/* GÉNÉRÉ par apps/xqv9-landing/site/generer.cjs — ne pas éditer à la main.
   1) Modules de vitrine partagés (V2 BOFI) : packages/ui/src/vitrine/vitrine.css, repris tel quel (sha256 3aec328a61a8).
   2) Thème XQV9 (comptes/donnees/marque-xqv9.json) via themeVersCss.
   3) Signature XQV9 commune : comptes/rendu/xqv9-comptes.css (sha256 9c204a71382c).
   4) Compléments de la homepage : site/rendu/xqv9-accueil.css. */

/* ─── @propfirm/ui/vitrine — système des vitrines de marque (direction D3 « Le Parcours », validée par JPB) ───
 * Repris de la maquette validée (V2_BOFI_DIRECTIONS/modules/modules.css + gabarit D3), sans changement de rendu.
 * Aucune couleur, police ou rayon de marque ici : tout vient des variables posées par le thème de la marque
 * (themeVersCss / themeClair). Une autre marque = un autre jeu de variables. Les pages placent les modules ;
 * elles ne les redessinent pas.
 *
 * Note d'intégration : le site public charge Tailwind (preflight). Les règles ci-dessous posent elles-mêmes
 * marges, listes et polices des modules ; la couche « Compatibilité preflight » en fin de fichier rétablit
 * les quelques valeurs que la maquette tenait du navigateur. */

.m-racine { background: var(--fond); color: var(--texte); font-family: var(--police-texte); -webkit-font-smoothing: antialiased; }
/* Un seul système typographique : les contrôles natifs n'héritent pas de la police par défaut, on l'impose. */
.m-racine button, .m-racine input, .m-racine select, .m-racine textarea { font-family: inherit; }
.m-racine *, .m-racine *::before, .m-racine *::after { box-sizing: border-box; }
.m-chiffre { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; }
.m-discret { color: var(--texte-discret); }
.m-accent { color: var(--accent-texte, var(--accent)); }

/* Badge de provenance : toute donnée affichée dit d'où elle vient et de quand. */
.m-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--police-texte); letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 9px; border-radius: 999px; border: 1px solid var(--filet); color: var(--texte-discret); background: color-mix(in srgb, var(--panneau) 70%, transparent); white-space: nowrap; }
.m-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.m-badge[data-nature="demo"]::before { background: var(--texte-discret); }
.m-badge[data-nature="direct"]::before { background: #4caf50; }

.m-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border-radius: var(--rayon); font: 700 16px/1 var(--police-texte); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.m-bouton:hover { transform: translateY(-2px); }
.m-bouton[data-genre="principal"] { background: var(--accent); color: var(--texte-sur-accent, var(--fond)); box-shadow: 0 8px 30px -10px var(--accent); }
.m-bouton[data-genre="secondaire"] { background: transparent; color: var(--texte); border-color: var(--filet); }
.m-bouton[data-genre="secondaire"]:hover { border-color: var(--accent); }
.m-bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* Calque JPB : emplacement réservé, jamais un décor dessiné par le code. */
.m-calque { position: relative; display: grid; place-items: center; text-align: center; border: 1.5px dashed var(--filet);
  border-radius: var(--rayon); color: var(--texte-discret); background: color-mix(in srgb, var(--panneau) 55%, transparent); padding: 18px; }
.m-calque strong { display: block; color: var(--accent-texte, var(--accent)); font: 700 12px/1.3 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.m-calque span { font-size: 13px; line-height: 1.45; }

/* ─── GraphiqueReel ─── */
.m-graph { min-width: 0; max-width: 100%; position: relative; background: var(--panneau); border-radius: var(--rayon); border: 1px solid var(--filet); overflow: hidden; }
.m-graph__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--filet); }
.m-graph__actifs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.m-graph__actifs::-webkit-scrollbar { display: none; }
.m-pastille { flex: none; border: 1px solid var(--filet); background: transparent; color: var(--texte-discret); border-radius: 999px; padding: 7px 12px;
  font: 600 12px/1 var(--police-chiffres); cursor: pointer; transition: all .15s ease; }
.m-pastille:hover { color: var(--texte); border-color: var(--accent); }
.m-pastille[aria-pressed="true"] { background: var(--accent); color: var(--texte-sur-accent, var(--fond)); border-color: var(--accent); }
.m-graph__ut { display: flex; gap: 4px; }
.m-graph__toile { position: relative; }
.m-graph canvas { display: block; width: 100%; }
.m-graph__info { position: absolute; left: 14px; top: 10px; display: flex; gap: 14px; flex-wrap: wrap; font: 500 12px/1.2 var(--police-chiffres); color: var(--texte-discret); pointer-events: none; }
.m-graph__info b { color: var(--texte); font-weight: 600; }
.m-graph__prix { font: 700 26px/1 var(--police-chiffres); color: var(--texte); }
.m-graph__pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--filet); font-size: 12px; color: var(--texte-discret); }

/* ─── BandeMarche ─── */
.m-bande { overflow: hidden; border-block: 1px solid var(--filet); background: var(--fond-alt); }
.m-bande__piste { display: flex; width: max-content; animation: m-defile var(--duree, 48s) linear infinite; }
.m-bande:hover .m-bande__piste { animation-play-state: paused; }
.m-bande__item { display: flex; align-items: baseline; gap: 10px; padding: 14px 28px; border-right: 1px solid var(--filet); white-space: nowrap; }
.m-bande__nom { font: 700 13px/1 var(--police-texte); letter-spacing: .08em; }
.m-bande__prix { font: 600 15px/1 var(--police-chiffres); }
.m-bande__var { font: 600 13px/1 var(--police-chiffres); }
.m-bande__var[data-sens="hausse"] { color: color-mix(in srgb, var(--bougie-hausse) 45%, var(--texte)); }
.m-bande__var[data-sens="baisse"] { color: color-mix(in srgb, var(--bougie-baisse) 45%, var(--texte)); }
@keyframes m-defile { to { transform: translateX(-50%); } }

/* ─── CompteurVivant ─── */
.m-compteur__valeur { font: 800 clamp(44px, 6vw, 84px)/1 var(--police-chiffres); color: var(--accent-texte, var(--accent)); letter-spacing: -.02em; }
.m-compteur__barre { font: 600 18px/1 var(--police-chiffres); color: var(--texte-discret); text-decoration: line-through; text-decoration-color: var(--risque); text-decoration-thickness: 2px; }
.m-compteur__libelle { font-size: 15px; color: var(--texte); margin-top: 8px; }

/* ─── BandeFaits ─── */
.m-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.m-faits__fait { background: var(--fond-alt); padding: 22px 20px; transition: background .2s ease; }
.m-faits__fait:hover { background: var(--panneau); }
.m-faits__chiffre { font: 700 30px/1 var(--police-chiffres); color: var(--accent-texte, var(--accent)); }
.m-faits__libelle { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--texte); }
.m-faits__source { margin-top: 8px; font-size: 11px; color: var(--texte-discret); letter-spacing: .04em; }

/* ─── OffreInteractive ─── */
.m-offre__bascule { display: inline-flex; padding: 5px; border-radius: 999px; border: 1px solid var(--filet); background: var(--fond-alt); }
.m-offre__bascule button { border: 0; background: transparent; color: var(--texte-discret); padding: 11px 20px; border-radius: 999px; font: 700 14px/1 var(--police-texte); cursor: pointer; transition: all .2s ease; }
.m-offre__bascule button[aria-pressed="true"] { background: var(--accent); color: var(--texte-sur-accent, var(--fond)); }
.m-offre__carte { margin-top: 18px; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--panneau); padding: 28px; position: relative; overflow: hidden; }
.m-offre__nom { font: 700 13px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte, var(--accent)); }
.m-offre__prix { margin-top: 14px; font: 800 clamp(40px, 5vw, 60px)/1 var(--police-chiffres); }
.m-offre__suite { margin-top: 8px; color: var(--texte-discret); }
.m-offre__lignes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.m-offre__lignes li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; line-height: 1.45; font-size: 15px; }
.m-offre__lignes li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border-radius: 4px; border: 2px solid var(--accent); }
.m-offre__groupes { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.m-offre__groupe { border-radius: 12px; border: 1px solid var(--filet); background: var(--fond-alt); padding: 18px; }
.m-offre__groupe h3 { margin: 0; font: 700 12px/1.3 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-texte, var(--accent)); }
.m-offre__groupe .m-offre__lignes { margin-top: 12px; gap: 9px; }
.m-offre__groupe .m-offre__lignes li { font-size: 14px; }
.m-offre__regle { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-offre__regle div { border-radius: 12px; padding: 14px; background: var(--fond-alt); border: 1px solid var(--filet); font-size: 13px; line-height: 1.4; }
.m-offre__regle b { display: block; font: 700 18px/1.1 var(--police-chiffres); color: var(--texte); margin-bottom: 4px; }
.m-offre__reserve { margin-top: 14px; font-size: 13px; color: var(--accent-texte, var(--accent)); }
.m-offre__risque, .m-risque { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--texte-discret); border-left: 2px solid var(--risque); padding-left: 12px; }

/* ─── LigneDeTemps ─── */
.m-temps { position: relative; display: grid; gap: 0; }
.m-temps[data-orientation="horizontale"] { grid-auto-flow: column; grid-auto-columns: 1fr; }
.m-temps__etape { position: relative; padding: 26px 18px 0; transition: transform .6s ease, border-color .6s ease; }
.m-temps[data-anime] .m-temps__etape { transform: translateY(6px); }
.m-temps[data-anime] .m-temps__etape.est-allumee { opacity: 1; transform: none; }
.m-temps__etape.est-allumee { opacity: 1; transform: none; }
.m-temps[data-orientation="horizontale"] .m-temps__etape { border-top: 2px solid var(--filet); }
.m-temps[data-orientation="horizontale"] .m-temps__etape.est-allumee, .m-temps:not([data-anime]) .m-temps__etape { border-top-color: var(--accent); }
.m-temps[data-orientation="horizontale"] .m-temps__etape::before { content: ""; position: absolute; top: -8px; left: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--fond); border: 2px solid var(--filet); }
.m-temps[data-orientation="horizontale"] .m-temps__etape.est-allumee::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
.m-temps[data-orientation="verticale"] .m-temps__etape { padding: 0 0 30px 34px; border-left: 2px solid var(--filet); margin-left: 7px; }
.m-temps[data-orientation="verticale"] .m-temps__etape.est-allumee { border-left-color: var(--accent); }
.m-temps[data-orientation="verticale"] .m-temps__etape::before { content: ""; position: absolute; left: -9px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--fond); border: 2px solid var(--filet); }
.m-temps[data-orientation="verticale"] .m-temps__etape.est-allumee::before { background: var(--accent); border-color: var(--accent); }
.m-temps__quand { font: 600 12px/1 var(--police-chiffres); color: var(--accent-texte, var(--accent)); letter-spacing: .06em; text-transform: uppercase; }
.m-temps__chiffre { margin-top: 10px; font: 800 28px/1 var(--police-chiffres); }
.m-temps__titre { margin-top: 10px; font: 700 18px/1.2 var(--police-titres); }
.m-temps__texte { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--texte-discret); }

/* ─── Explorer ─── */
.m-explorer__onglets { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.m-explorer__onglets::-webkit-scrollbar { display: none; }
.m-explorer__onglet { flex: none; border: 1px solid var(--filet); background: transparent; color: var(--texte-discret); border-radius: 999px; padding: 12px 18px; font: 700 14px/1 var(--police-texte); cursor: pointer; transition: all .2s ease; }
.m-explorer__onglet:hover { color: var(--texte); }
.m-explorer__onglet[aria-selected="true"] { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.m-explorer__scene { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.m-explorer__aside { border-radius: var(--rayon); border: 1px solid var(--filet); padding: 20px; background: var(--fond-alt); font-size: 14px; line-height: 1.55; }
.m-explorer__aside h3 { margin: 0 0 8px; font: 700 16px/1.3 var(--police-titres); }
.m-explorer__aside p { margin: 0 0 12px; color: var(--texte-discret); }
.m-explorer__aside .m-limite { border-top: 1px solid var(--filet); padding-top: 12px; margin-top: 12px; font-size: 12.5px; }
.m-explorer__aside .m-limite b { color: var(--texte); }
.m-explorer__aside .m-zone { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 10px; font-size: 12.5px; }
.m-explorer__aside .m-zone dt { opacity: .75; }
.m-explorer__aside .m-zone dd { margin: 0; color: var(--texte); }
@media (max-width: 860px) { .m-explorer__scene { grid-template-columns: 1fr; } }

/* Simulateur HWM / DD */
.m-hwm { border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--panneau); padding: 22px; }
.m-hwm__ligne { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 18px; font-size: 14px; }
.m-hwm__ligne output { font: 700 16px/1 var(--police-chiffres); }
.m-hwm input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 28px; }
.m-hwm__jauge { position: relative; margin-top: 26px; height: 16px; border-radius: 999px; background: var(--fond-alt); border: 1px solid var(--filet); overflow: hidden; }
.m-hwm__remplissage { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); transition: width .25s ease, background .25s ease; }
.m-hwm[data-etat="proche"] .m-hwm__remplissage { background: color-mix(in srgb, var(--accent) 50%, var(--risque)); }
.m-hwm[data-etat="depasse"] .m-hwm__remplissage { background: var(--risque); }
.m-hwm__reperes { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px/1 var(--police-chiffres); color: var(--texte-discret); }
.m-hwm__verdict { margin-top: 18px; border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.5; background: var(--fond-alt); border: 1px solid var(--filet); }
.m-hwm[data-etat="depasse"] .m-hwm__verdict { border-color: var(--risque); }
.m-hwm__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.m-hwm__grille div { background: var(--fond-alt); border-radius: 12px; padding: 12px; font-size: 12px; color: var(--texte-discret); }
.m-hwm__grille b { display: block; margin-top: 6px; font: 700 18px/1 var(--police-chiffres); color: var(--texte); }
.m-hwm__mode { display: flex; gap: 6px; flex-wrap: wrap; }

/* Démo SA */
.m-sa { border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--panneau); overflow: hidden; }
.m-sa__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--filet); flex-wrap: wrap; }
.m-sa__choix { display: flex; gap: 6px; flex-wrap: wrap; }
.m-sa__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.m-sa__message { padding: 18px; border-right: 1px solid var(--filet); }
.m-sa__bulle { border-radius: 14px 14px 14px 4px; background: var(--fond-alt); border: 1px solid var(--filet); padding: 16px; font-size: 14px; line-height: 1.6; }
.m-sa__bulle .m-chiffre { color: var(--texte); }
.m-sa__dir { display: inline-block; font: 800 12px/1 var(--police-texte); letter-spacing: .1em; padding: 6px 9px; border-radius: 6px; background: var(--accent); color: var(--texte-sur-accent, var(--fond)); }
.m-sa__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.m-sa__actions button { min-height: 42px; padding: 0 16px; font-size: 14px; }
.m-sa__revele { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--texte-discret); }
.m-sa__issue { margin-top: 12px; border-radius: 12px; padding: 12px 14px; border: 1px solid var(--filet); }
.m-sa__issue[data-issue="TP_HIT"] { border-color: var(--accent); }
.m-sa__issue[data-issue="SL_HIT"] { border-color: var(--risque); }
.m-sa__graph { padding: 0; min-height: 280px; }
@media (max-width: 860px) { .m-sa__corps { grid-template-columns: 1fr; } .m-sa__message { border-right: 0; border-bottom: 1px solid var(--filet); } }

/* ─── TuilesOutils ─── */
.m-tuiles { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(170px, auto); gap: 14px; }
.m-tuile { position: relative; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--panneau); padding: 20px; overflow: hidden; transition: transform .2s ease, border-color .2s ease; display: flex; flex-direction: column; }
.m-tuile:hover { transform: translateY(-2px); border-color: var(--accent); }
.m-tuile[data-taille="l"] { grid-column: span 3; grid-row: span 2; }
.m-tuile[data-taille="m"] { grid-column: span 3; }
.m-tuile[data-taille="s"] { grid-column: span 2; }
.m-tuile h3 { margin: 0; font: 700 18px/1.25 var(--police-titres); }
.m-tuile p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--texte-discret); }
.m-tuile__fragment { margin-top: auto; padding-top: 12px; }
/* Grande tuile : le contenu suit le texte (pas de vide au milieu quand la tuile est plus haute que son contenu). */
.m-tuile[data-taille="l"] .m-tuile__fragment { margin-top: 0; }
.m-tuile__icone { width: 40px; height: 40px; margin-bottom: 12px; }
@media (max-width: 860px) { .m-tuiles { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } .m-tuile[data-taille] { grid-column: span 2; grid-row: auto; min-height: 150px; } .m-tuile[data-taille="s"] { grid-column: span 1; } }

/* ─── FAQ ─── */
.m-faq { border-top: 1px solid var(--filet); }
.m-faq details { border-bottom: 1px solid var(--filet); }
.m-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; padding: 22px 4px; font: 600 17px/1.4 var(--police-titres); }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: "+"; flex: none; font: 400 26px/1 var(--police-texte); color: var(--accent-texte, var(--accent)); transition: transform .25s ease; }
.m-faq details[open] summary::after { transform: rotate(45deg); }
.m-faq details p { margin: 0 4px 22px; color: var(--texte-discret); line-height: 1.6; max-width: 70ch; }

/* ─── PiedDePage ─── */
.m-pied { border-top: 1px solid var(--filet); padding: 40px 0 120px; font-size: 13px; color: var(--texte-discret); }
.m-pied__liens { display: flex; flex-wrap: wrap; gap: 18px; }
.m-pied__liens a { color: var(--texte); text-decoration: none; }
.m-pied__liens a:hover { color: var(--accent-texte, var(--accent)); }
.m-pied__risque { margin-top: 18px; max-width: 90ch; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .m-bande__piste { animation: none; }
  .m-temps__etape { transition: none; opacity: 1; transform: none; }
}
.m-racine[data-motion="reduite"] .m-bande__piste, .m-racine[data-motion="reduite"] .m-marques__piste { animation: none; }

.m-graph__pied .m-badge, .m-compteur .m-badge, .m-offre .m-badge { white-space: normal; line-height: 1.35; }

/* Contrat SEO : H1 = accroche + descripteur visible (jamais de texte caché) ; dl/ol statiques sans marges natives. */
.seo-descripteur { display: block; margin-top: .45em; font: 600 clamp(15px, 1.5vw, 19px)/1.35 var(--police-texte); letter-spacing: .01em; color: var(--texte-discret); -webkit-text-fill-color: var(--texte-discret); }
.m-faits dt, .m-faits dd { margin: 0; }
.m-temps__titre { margin-bottom: 0; } .m-temps__texte { margin-bottom: 0; }
.m-tuile h3, .m-explorer__aside h3, .m-offre__groupe h3 { margin-top: 0; }

/* ════ Couche « système » (D3 validée) — tout est dessiné, aucun contrôle natif brut, uniquement des jetons ════ */
.m-racine { --anim: cubic-bezier(.2, .7, .2, 1); --focus: 0 0 0 3px var(--fond), 0 0 0 5px var(--accent); }
.m-racine :focus { outline: none; }
.m-racine :focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--rayon); }

/* Boutons : survol, appui, focus, micro-mouvement */
.m-bouton { position: relative; transition: transform .18s var(--anim), box-shadow .25s var(--anim), background .2s ease, border-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
.m-bouton:active { transform: translateY(0) scale(.98); }
.m-bouton[data-genre="principal"]:hover { box-shadow: 0 14px 34px -12px var(--accent); }
.m-bouton[data-genre="secondaire"]:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.m-bouton[aria-disabled="true"] { cursor: not-allowed; opacity: .7; }

/* Pastilles et onglets */
.m-pastille, .m-explorer__onglet { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s var(--anim); -webkit-tap-highlight-color: transparent; }
.m-pastille:active, .m-explorer__onglet:active { transform: scale(.96); }
.m-explorer__onglet:hover { border-color: var(--accent); }
/* Panneaux défilants : barre système masquée, fondu en bord */
.m-graph__actifs, .m-explorer__onglets, .m-sa__choix { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); padding-inline: 4px; }
.m-graph__actifs::-webkit-scrollbar, .m-explorer__onglets::-webkit-scrollbar, .m-sa__choix::-webkit-scrollbar { display: none; }
.m-sa__choix { flex-wrap: nowrap; overflow-x: auto; }

/* Cartes : survol et focus */
.m-tuile, .m-faits__fait, .m-offre__carte, .m-offre__groupe, .m-explorer__aside, .m-hwm, .m-sa { transition: transform .25s var(--anim), border-color .25s ease, box-shadow .25s ease; }
.m-tuile:hover, .m-offre__groupe:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(0,0,0,.55); }
.m-faq summary { transition: color .2s ease; border-radius: 8px; }
.m-faq summary:hover { color: var(--accent-texte, var(--accent)); }
.m-faq details[open] p { animation: m-ouvre .3s var(--anim); }
@keyframes m-ouvre { from { opacity: 0; transform: translateY(-4px); } }

/* Curseurs du simulateur : piste et poignée dessinées (aucun curseur natif brut) */
.m-hwm input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 30px; cursor: pointer; }
.m-hwm input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--pct, 50%), color-mix(in srgb, var(--texte) 14%, transparent) var(--pct, 50%)); }
.m-hwm input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--texte) 14%, transparent); }
.m-hwm input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.m-hwm input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--fond); border: 3px solid var(--accent); box-shadow: 0 4px 14px -4px rgba(0,0,0,.5); transition: transform .15s var(--anim); }
.m-hwm input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--fond); border: 3px solid var(--accent); }
.m-hwm input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.m-hwm input[type=range]:active::-webkit-slider-thumb { transform: scale(1.22); }
.m-hwm input[type=range]:focus-visible { box-shadow: none; }
.m-hwm input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.m-hwm__remplissage { border-radius: 999px; }

/* ─── DefilementMarques : défilé continu de gauche à droite ─── */
.m-marques { position: relative; overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.m-marques__piste { display: flex; width: max-content; animation: m-defile-droite var(--duree, 48s) linear infinite; will-change: transform; }
.m-marques:hover .m-marques__piste, .m-marques:focus-within .m-marques__piste { animation-play-state: paused; }
@keyframes m-defile-droite { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.m-marques__carte { flex: none; width: 176px; margin-right: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 14px 14px; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--panneau); color: var(--texte); text-decoration: none; transition: transform .25s var(--anim), border-color .25s ease, box-shadow .25s ease; }
.m-marques__carte[data-statut="ouvert"]:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 40px -24px rgba(0,0,0,.6); }
.m-marques__carte[data-statut="ouvert"]:active { transform: translateY(-1px) scale(.98); }
.m-marques__logo { height: 64px; width: 100%; display: grid; place-items: center; border-radius: calc(var(--rayon) - 4px); }
.m-marques__logo[data-pastille="sombre"] { background: #141a26; }
.m-marques__logo[data-pastille="claire"] { background: #f4f2ec; }
.m-marques__logo img { max-height: 44px; max-width: 132px; width: auto; height: auto; display: block; }
.m-marques__logo[data-pastille="aucune"] img { max-height: 62px; border-radius: 10px; } /* logo carré opaque : coins adoucis, jamais recadré */
.m-marques__nom { font: 600 13px/1.2 var(--police-texte); letter-spacing: .01em; }
.m-marques__action { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--police-texte); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--filet); color: var(--accent-texte, var(--accent)); }
.m-marques__action svg { width: 12px; height: 12px; }
.m-marques__carte[data-statut="ouvert"]:hover .m-marques__action { background: var(--accent); color: var(--texte-sur-accent, var(--fond)); border-color: var(--accent); }
.m-marques__carte[data-statut="bientot"] { cursor: not-allowed; background: color-mix(in srgb, var(--panneau) 70%, transparent); }
.m-marques__carte[data-statut="bientot"] .m-marques__logo img { filter: grayscale(1); opacity: .45; }
.m-marques__carte[data-statut="bientot"] .m-marques__nom { color: var(--texte-discret); }
.m-marques__carte[data-statut="bientot"] .m-marques__action { color: var(--texte-discret); background: color-mix(in srgb, var(--texte) 7%, transparent); border-color: transparent; }
.m-marques__carte[data-statut="partenaire"] { cursor: default; }
.m-marques__carte[data-statut="partenaire"] .m-marques__action { color: var(--texte-discret); }
@media (prefers-reduced-motion: reduce) {
  .m-marques { overflow-x: auto; scrollbar-width: none; }
  .m-marques::-webkit-scrollbar { display: none; }
  .m-marques__piste { animation: none; }
  .m-marques__carte[aria-hidden="true"] { display: none; }
}
.m-racine[data-motion="reduite"] .m-marques__piste { animation: none; }

/* ─── LecteurAudio : lecteur sur mesure ─── */
.m-audio { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: calc(var(--rayon) - 2px); background: var(--fond-alt); border: 1px solid var(--filet); }
.m-audio__bouton { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--accent); color: var(--texte-sur-accent, var(--fond)); transition: transform .18s var(--anim), box-shadow .25s ease; }
.m-audio__bouton svg { width: 22px; height: 22px; }
.m-audio__bouton:hover { transform: scale(1.06); box-shadow: 0 10px 24px -10px var(--accent); }
.m-audio__bouton:active { transform: scale(.95); }
.m-audio__titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.m-audio__titre strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-audio__sous { display: block; font-size: 12px; color: var(--texte-discret); margin-top: 2px; }
.m-audio__ligne { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.m-audio__piste { position: relative; flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--texte) 12%, transparent); cursor: pointer; }
.m-audio__piste::after { content: ""; position: absolute; inset: -8px 0; }
.m-audio__remplissage { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); transition: width .2s linear; }
.m-audio__temps { font-size: 11.5px; color: var(--texte-discret); white-space: nowrap; }
.m-audio__onde { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.m-audio__onde i { width: 3px; height: 4px; border-radius: 2px; background: var(--accent); opacity: .5; }
.m-audio[data-etat="lecture"] .m-audio__onde i { opacity: 1; animation: m-onde .9s ease-in-out infinite; }
.m-audio[data-etat="lecture"] .m-audio__onde i:nth-child(2) { animation-delay: .15s; } .m-audio[data-etat="lecture"] .m-audio__onde i:nth-child(3) { animation-delay: .3s; } .m-audio[data-etat="lecture"] .m-audio__onde i:nth-child(4) { animation-delay: .45s; }
@keyframes m-onde { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* ─── BulleWhatsApp : bulle flottante moderne ─── */
.m-wa { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte); animation: m-wa-entree .6s var(--anim) 1.2s both; }
@keyframes m-wa-entree { from { opacity: 0; transform: translateY(18px) scale(.85); } }
.m-wa__rond { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25D366; box-shadow: 0 14px 34px -10px rgba(37, 211, 102, .7); transition: transform .2s var(--anim); }
.m-wa__rond::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: m-wa-onde 2.4s ease-out infinite; }
@keyframes m-wa-onde { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.m-wa__rond svg { width: 30px; height: 30px; }
.m-wa:hover .m-wa__rond { transform: scale(1.06); }
.m-wa__carte { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--panneau); border: 1px solid var(--filet); box-shadow: 0 16px 40px -22px rgba(0,0,0,.6); font-size: 12.5px; line-height: 1.3; }
.m-wa__carte strong { font-size: 13.5px; }
.m-wa__carte span { color: var(--texte-discret); }
.m-wa[data-etat="non-configure"] { cursor: default; }
.m-wa[data-etat="non-configure"] .m-wa__rond { background: color-mix(in srgb, #25D366 75%, #808a8f); }
@media (max-width: 640px) { .m-wa { right: 14px; bottom: 14px; gap: 8px; } .m-wa__rond { width: 54px; height: 54px; } .m-wa__carte { padding: 8px 11px; font-size: 11.5px; } .m-wa__carte strong { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .m-wa, .m-wa__rond::after { animation: none; } }

/* ─── PopupSortie : création moderne ─── */
.m-popup { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 18px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), rgba(5, 8, 14, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.m-popup.est-ouverte { display: grid; animation: m-voile .3s ease both; }
.m-popup.est-ouverte .m-popup__boite { animation: m-surgit .45s var(--anim) both; }
@keyframes m-voile { from { opacity: 0; } }
@keyframes m-surgit { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.m-popup__boite { position: relative; width: min(540px, 100%); max-height: calc(100dvh - 36px); overflow: auto; scrollbar-width: none; border-radius: calc(var(--rayon) + 8px); padding: 34px 32px 26px; color: var(--texte);
  background: linear-gradient(var(--panneau), var(--panneau)) padding-box, linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 10%, transparent) 45%, var(--filet)) border-box; border: 1px solid transparent; box-shadow: 0 40px 90px -30px rgba(0,0,0,.75); }
.m-popup__boite::-webkit-scrollbar { display: none; }
.m-popup__fermer { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--filet); background: var(--fond-alt); color: var(--texte); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--anim), border-color .2s ease; }
.m-popup__fermer svg { width: 18px; height: 18px; }
.m-popup__fermer:hover { transform: rotate(90deg); border-color: var(--accent); }
.m-popup__surtitre { font: 600 12px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte, var(--accent)); }
.m-popup__titre { margin: 12px 0 0; font: 700 clamp(28px, 4.4vw, 36px)/1.05 var(--police-titres); letter-spacing: -.03em; }
.m-popup__texte { margin: 12px 0 0; line-height: 1.6; color: var(--texte-discret); }
.m-popup__code { margin-top: 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 14px 14px 14px 18px; border-radius: var(--rayon); background: var(--fond-alt); border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
.m-popup__code-libelle { grid-column: 1; font-size: 12px; color: var(--texte-discret); }
.m-popup__code strong { grid-column: 1; font: 700 26px/1.1 var(--police-chiffres); letter-spacing: .08em; color: var(--accent-texte, var(--accent)); }
.m-popup__copier { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--filet); background: var(--panneau); color: var(--texte); font: 600 13px/1 var(--police-texte); cursor: pointer; transition: border-color .2s ease, transform .15s var(--anim); }
.m-popup__copier svg { width: 16px; height: 16px; }
.m-popup__copier:hover { border-color: var(--accent); } .m-popup__copier:active { transform: scale(.96); }
.m-popup__parcours { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; counter-reset: p; }
.m-popup__parcours li { counter-increment: p; position: relative; display: grid; gap: 2px; padding: 0 0 16px 42px; font-size: 13.5px; color: var(--texte-discret); }
.m-popup__parcours li strong { color: var(--texte); font-size: 14.5px; }
.m-popup__parcours li::before { content: counter(p); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--police-chiffres); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-texte, var(--accent)); }
.m-popup__parcours li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--filet); }
.m-popup__actions { display: grid; gap: 10px; margin-top: 8px; }
.m-popup__note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--texte-discret); padding-top: 12px; border-top: 1px solid var(--filet); }
.m-popup-test { position: fixed; left: 16px; bottom: 16px; z-index: 49; padding: 9px 14px; border-radius: 999px; border: 1px dashed var(--filet); background: color-mix(in srgb, var(--panneau) 92%, transparent); color: var(--texte-discret); font: 600 12px/1 var(--police-texte); cursor: pointer; backdrop-filter: blur(6px); transition: color .2s ease, border-color .2s ease; }
.m-popup-test:hover { color: var(--texte); border-color: var(--accent); }
@media (max-width: 640px) { .m-popup { padding: 10px; place-items: end center; } .m-popup__boite { padding: 28px 20px 20px; border-radius: 22px; } .m-popup-test { bottom: 84px; left: 12px; } }
@media (prefers-reduced-motion: reduce) { .m-popup.est-ouverte, .m-popup.est-ouverte .m-popup__boite { animation: none; } }

/* Aucun débordement horizontal : un enfant de grille/flex garde « min-width: auto » par défaut et se laisse élargir
 * par sa rangée de pastilles défilante (mesuré : graphique à 649 px sur un écran de 390 px). */
.m-explorer__scene > *, .m-sa__corps > *, .m-graph__barre > *, .m-offre, .m-tuile, .m-hwm, .m-audio__corps, .m-tuile__fragment { min-width: 0; }
.m-graph__actifs { min-width: 0; flex: 1 1 0; }
.m-graph__pied .m-badge { max-width: 100%; }

/* ════ Site (toutes les pages) — modules NavSite, PageContenu, PiedSite : même système, mêmes jetons ════ */
.s-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--fond) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--filet); }
.s-nav__in { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); height: 68px; display: flex; align-items: center; gap: 22px; }
.s-nav__logo { display: flex; align-items: center; flex: none; border-radius: 10px; }
.s-nav__logo img { height: 48px; width: auto; display: block; }
.s-nav__liens { display: flex; gap: 2px; margin-left: auto; }
.s-nav__liens a { position: relative; text-decoration: none; color: var(--texte-discret); font: 560 14px/1 var(--police-texte); padding: 10px 12px; border-radius: 999px; transition: color .2s ease, background .2s ease; }
.s-nav__liens a:hover { color: var(--texte); background: color-mix(in srgb, var(--texte) 6%, transparent); }
.s-nav__liens a[aria-current="page"] { color: var(--texte); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.s-nav__actions { display: flex; align-items: center; gap: 10px; }
.s-nav__actions .m-bouton { min-height: 42px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.s-app { display: inline-flex; align-items: center; gap: 6px; }
.s-app svg, .s-app__marque svg { width: 12px; height: 12px; }
.s-app__marque { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font: 600 10px/1 var(--police-texte); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-discret); border: 1px solid var(--filet); border-radius: 999px; padding: 4px 6px; }
.s-nav__menu { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--filet); background: var(--panneau); color: var(--texte); cursor: pointer; place-items: center; transition: transform .15s var(--anim, ease); }
.s-nav__menu:active { transform: scale(.95); }
.s-nav__menu svg { width: 20px; height: 20px; }
.s-tiroir { display: none; }
@media (max-width: 1080px) {
  .s-nav__liens { display: none; } .s-nav__menu { display: grid; } .s-nav__actions { margin-left: auto; }
  .s-nav__actions .s-app { display: none; }
  .s-tiroir.est-ouvert { display: block; position: fixed; inset: 68px 0 0 0; z-index: 39; background: var(--fond); padding: 18px clamp(16px, 4vw, 48px) 40px; overflow-y: auto; scrollbar-width: none; animation: m-ouvre .25s var(--anim, ease); }
  .s-tiroir a { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--filet); color: var(--texte); text-decoration: none; font: 560 18px/1.2 var(--police-texte); }
  .s-tiroir a[aria-current="page"] { color: var(--accent-texte, var(--accent)); }
}
@media (max-width: 520px) { .s-nav__actions .m-bouton[data-genre="principal"] { padding: 0 12px; font-size: 13px; } .s-nav__logo img { height: 50px; } }

.s-vue[hidden] { display: none !important; }
.p-tete { max-width: 1200px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 48px) 28px; }
.p-surtitre { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.2 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte, var(--accent)); }
.p-tete h1 { margin: 16px 0 0; max-width: 20ch; font: var(--opt-titre, 640) clamp(36px, 5.4vw, 68px)/1.02 var(--police-titres); letter-spacing: var(--opt-titre-chasse, -.035em); }
.p-tete h1 .seo-descripteur { font-size: clamp(15px, 1.5vw, 19px); }
.p-chapeau { margin: 18px 0 0; max-width: 64ch; font-size: 18px; line-height: 1.6; color: var(--texte-discret); }
.p-corps { max-width: 1200px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 48px) 96px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.p-corps--simple { grid-template-columns: minmax(0, 860px); }
.p-sommaire { position: sticky; top: 92px; display: grid; gap: 2px; padding: 14px; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--panneau); max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: none; }
.p-sommaire::-webkit-scrollbar { display: none; }
.p-sommaire strong { font: 600 11px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); margin: 4px 8px 8px; }
.p-sommaire a { text-decoration: none; color: var(--texte-discret); font-size: 13.5px; line-height: 1.35; padding: 7px 8px; border-radius: 8px; transition: background .2s ease, color .2s ease; }
.p-sommaire a:hover { color: var(--texte); background: color-mix(in srgb, var(--texte) 6%, transparent); }
.p-texte { min-width: 0; font-size: 16.5px; line-height: 1.7; }
.p-section { padding: 28px 0; border-top: 1px solid var(--filet); scroll-margin-top: 90px; }
.p-section:first-child { border-top: 0; padding-top: 0; }
.p-texte h2 { margin: 0 0 14px; font: var(--opt-titre, 640) clamp(22px, 2.4vw, 30px)/1.15 var(--police-titres); letter-spacing: -.02em; }
.p-texte h3 { margin: 22px 0 8px; font: 620 18px/1.3 var(--police-titres); }
.p-texte p { margin: 0 0 12px; color: color-mix(in srgb, var(--texte) 86%, var(--fond)); }
.p-texte ul, .p-texte ol { margin: 0 0 14px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.p-texte li { position: relative; padding-left: 22px; }
.p-texte ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.p-texte ol { counter-reset: n; } .p-texte ol > li { counter-increment: n; padding-left: 30px; } .p-texte ol > li::before { content: counter(n); position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--police-chiffres); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-texte, var(--accent)); }
.p-texte a { color: var(--accent-texte, var(--accent)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.p-texte dl { margin: 0 0 14px; display: grid; gap: 10px; }
.p-texte dt { font-weight: 620; }
.p-tableau { overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; border: 1px solid var(--filet); border-radius: var(--rayon); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.p-tableau::-webkit-scrollbar { display: none; }
.p-tableau table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.p-tableau th, .p-tableau td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.p-tableau th { font-weight: 620; background: var(--fond-alt); }
.p-carte-liens { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.p-carte-liens a { display: grid; gap: 4px; padding: 16px; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--panneau); text-decoration: none; color: var(--texte); transition: transform .2s var(--anim, ease), border-color .2s ease; }
.p-carte-liens a:hover { transform: translateY(-2px); border-color: var(--accent); }
.p-carte-liens a span { color: var(--texte-discret); font-size: 14px; }
.p-encart { margin: 0 0 16px; padding: 18px; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--panneau); }
.p-formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 22px; margin: 6px 0 16px; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--panneau); }
.p-champ { display: grid; gap: 6px; font-size: 13.5px; font-weight: 560; }
.p-champ--large { grid-column: 1 / -1; }
.p-champ input, .p-champ textarea, .p-champ .p-choix { font: inherit; font-weight: 420; font-size: 15px; color: var(--texte); background: var(--fond); border: 1px solid var(--filet); border-radius: 12px; padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; }
.p-champ textarea { min-height: 110px; resize: vertical; }
.p-champ input:hover, .p-champ textarea:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--filet)); }
.p-champ input:focus-visible, .p-champ textarea:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.p-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.p-pastilles button { border: 1px solid var(--filet); background: var(--fond); color: var(--texte); border-radius: 999px; padding: 9px 13px; font-size: 13.5px; cursor: pointer; transition: all .2s ease; }
.p-pastilles button[aria-pressed="true"] { background: var(--accent); color: var(--texte-sur-accent, var(--fond)); border-color: var(--accent); }
.p-formulaire .m-bouton { grid-column: 1 / -1; justify-self: start; }
.p-non-raccorde { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--texte-discret); }
.p-compte { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.p-compte div { min-width: 86px; padding: 14px 12px; border-radius: 14px; border: 1px solid var(--filet); background: var(--panneau); text-align: center; }
.p-compte b { display: block; font: 600 32px/1 var(--police-chiffres); font-variant-numeric: tabular-nums; }
.p-compte span { font-size: 12px; color: var(--texte-discret); }
@media (max-width: 900px) { .p-corps { grid-template-columns: 1fr; gap: 20px; } .p-sommaire { position: static; max-height: none; } .p-formulaire { grid-template-columns: 1fr; } }

.s-pied { border-top: 1px solid var(--filet); background: var(--fond-alt); }
.s-pied__in { max-width: 1200px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 48px) 120px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.s-pied__in img { height: 56px; width: auto; }
.s-pied h2 { margin: 0 0 12px; font: 600 12px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); }
.s-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.s-pied a { color: var(--texte); text-decoration: none; font-size: 14.5px; transition: color .2s ease; }
.s-pied a:hover { color: var(--accent-texte, var(--accent)); }
.s-pied__risque { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid var(--filet); font-size: 13px; line-height: 1.6; color: var(--texte-discret); }
@media (max-width: 860px) { .s-pied__in { grid-template-columns: 1fr 1fr; } .s-pied__in > :first-child { grid-column: 1 / -1; } }


/* ─── Gabarit de vitrine « Le Parcours » (direction D3 validée par JPB) : crème dominant, l'interaction dès le premier écran ───
 * Hiérarchie d'une prop firm n°1 (titre géant centré), trois grands chiffres, la règle à manipuler
 * tout de suite, un fil VOIR → COMPRENDRE → TESTER → PAYER qui suit le scroll. Les sections crème
 * reçoivent une VARIANTE CLAIRE des tokens BOFI : mêmes modules, autres valeurs. */
.v-site { --g: clamp(16px, 4vw, 48px);
  /* Système typographique UNIQUE (Geist variable) — tailles optiques par paliers : graisse et chasse suivent la taille. */
  --opt-display: 680; --opt-display-chasse: -.05em;   /* ≥ 64 px */
  --opt-titre: 640;   --opt-titre-chasse: -.035em;    /* 28–60 px */
  --opt-chiffre: 560; --opt-chiffre-chasse: -.025em;  /* grands chiffres, chiffres tabulaires */
  --opt-texte: 420;   --opt-texte-chasse: -.006em;    /* 15–19 px */
  --opt-petit: 560;   --opt-petit-chasse: .02em;      /* ≤ 13 px */
  font-weight: var(--opt-texte); letter-spacing: var(--opt-texte-chasse); font-feature-settings: "ss01" 0; }
.v-site .m-chiffre, .v-site .grands b, .v-site .m-compteur__valeur, .v-site .m-offre__prix, .v-site .m-temps__chiffre, .v-site .m-faits__chiffre { font-variant-numeric: tabular-nums; }
.v-site .cadre { max-width: 1200px; margin: 0 auto; padding: 0 var(--g); }
.v-site .nav-site { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--filet); }
.v-site .nav-site .cadre { display: flex; align-items: center; gap: 18px; height: 66px; }
.v-site .nav-site img { height: 46px; background: #121C2E; border-radius: 10px; padding: 4px; }
.v-site .fil { display: flex; gap: 4px; margin-left: auto; }
.v-site .fil a { text-decoration: none; font: 600 13px/1 var(--police-texte); color: var(--texte-discret); padding: 9px 14px; border-radius: 999px; transition: all .2s ease; }
.v-site .fil a.est-actif { background: var(--texte); color: var(--fond); }
.v-site .fil a span { font-family: var(--police-chiffres); margin-right: 6px; color: var(--texte-discret); }
.v-site .fil a.est-actif span { color: var(--accent-texte, var(--accent)); }
.v-site .nav-site .m-bouton { min-height: 42px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
.v-site .ouverture { text-align: center; padding: 80px var(--g) 40px; }
.v-site .regle > *, .v-site .deux > *, .v-site .payer > * { min-width: 0; }
.v-site .etiq { display: inline-flex; gap: 8px; align-items: center; font: 600 13px/1 var(--police-texte); color: var(--texte); border: 1px solid var(--filet); border-radius: 999px; padding: 8px 14px; background: var(--panneau); }
.v-site .etiq i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.v-site .ouverture h1 { margin: 26px auto 0; max-width: 15ch; font: var(--opt-display) clamp(48px, 7.2vw, 108px)/.94 var(--police-titres); letter-spacing: var(--opt-display-chasse); }
.v-site .ouverture h1 .seo-descripteur { margin-top: 18px; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: 0; }
.v-site h1 u { text-decoration: none; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 55%, transparent) 62%); }
.v-site .ouverture .m-hero__ligne { margin: 24px auto 0; max-width: 56ch; font-size: 19px; line-height: 1.6; color: var(--texte-discret); }
.v-site .ctas, .v-site .m-hero__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.v-site .grands { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-block: 1px solid var(--filet); }
.v-site .grands div { padding: 30px 20px; } .v-site .grands div + div { border-left: 1px solid var(--filet); }
.v-site .grands b { display: block; font: var(--opt-chiffre) clamp(40px, 5.6vw, 76px)/1 var(--police-chiffres); letter-spacing: var(--opt-chiffre-chasse); }
.v-site .grands span { display: block; margin-top: 10px; color: var(--texte-discret); font-size: 15px; }
.v-site .regle { display: grid; grid-template-columns: 5fr 7fr; gap: 0; margin: 64px 0 0; border-radius: 22px; overflow: hidden; text-align: left; }
.v-site .regle .explique { padding: 44px; }
.v-site .regle h2 { margin: 12px 0 0; font: var(--opt-titre) clamp(30px, 3.4vw, 46px)/1.05 var(--police-titres); letter-spacing: var(--opt-titre-chasse); }
.v-site .regle p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--texte-discret); }
.v-site .regle .sim { padding: 30px; min-height: 560px; }
.v-site .nav-site .logo-texte span { color: var(--texte) !important; }
.v-site .petit { font: var(--opt-petit) 12px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-texte, var(--accent)); }
.v-site section { padding: 110px 0; }
.v-site section h2.titre { margin: 12px 0 0; font: var(--opt-titre) clamp(34px, 4.4vw, 60px)/1.02 var(--police-titres); letter-spacing: var(--opt-titre-chasse); max-width: 16ch; }
.v-site section .intro { margin: 16px 0 40px; font-size: 18px; line-height: 1.6; color: var(--texte-discret); max-width: 58ch; }
.v-site .deux { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.v-site .payer { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: start; }
.v-site .places { border-radius: 22px; padding: 32px; }
.v-site .fin { text-align: center; padding: 120px 0; }
.v-site .fin h2 { margin: 12px auto 0; font: var(--opt-display) clamp(40px, 6vw, 90px)/.95 var(--police-titres); letter-spacing: var(--opt-display-chasse); max-width: 14ch; }
@media (max-width: 900px) {
  .v-site .fil { display: none; } .v-site .nav-site .logo-texte span { font-size: 15px !important; } .v-site .nav-site .m-bouton { margin-left: auto; }
  .v-site .ouverture { padding-top: 44px; }
  .v-site .grands { grid-template-columns: 1fr; } .v-site .grands div + div { border-left: 0; border-top: 1px solid var(--filet); }
  .v-site .regle, .v-site .deux, .v-site .payer { grid-template-columns: 1fr; } .v-site .regle .explique { padding: 26px; } .v-site .regle .sim { padding: 16px; min-height: 600px; }
  .v-site section { padding: 72px 0; } .v-site .ctas .m-bouton, .v-site .m-hero__ctas .m-bouton { flex: 1 1 100%; }
  .v-site .m-temps[data-orientation] { grid-auto-flow: row; }
}


/* ════ Compatibilité preflight (Tailwind) : valeurs que la maquette tenait du navigateur ════ */
.m-racine img { max-width: none; }
.m-racine .m-marques__logo img, .m-racine .s-nav__logo img, .m-racine .s-pied__in img { max-width: 100%; }
.m-racine summary { display: flex; }
.m-racine button { background-color: transparent; }
.m-racine .m-bouton[data-genre="principal"], .m-racine .m-pastille[aria-pressed="true"], .m-racine .m-offre__bascule button[aria-pressed="true"],
.m-racine .m-audio__bouton, .m-racine .p-pastilles button[aria-pressed="true"] { background-color: var(--accent); }
.m-racine .m-explorer__onglet[aria-selected="true"] { background-color: var(--texte); }

/* ════ Compléments du portage React (états sans donnée, provenance de la bande, liens d'espace client) ════ */
.m-graph__vide { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--texte-discret); font-size: 14px; line-height: 1.5; }
.m-graph__vide p { max-width: 42ch; margin: 0; }
.m-bande__provenance { display: flex; justify-content: flex-end; padding: 8px clamp(16px, 4vw, 48px); background: var(--fond-alt); }
.s-nav__actions .s-nav__espace { background: transparent; color: var(--texte); border-color: var(--filet); }
.s-nav__actions .s-nav__espace:hover { border-color: var(--accent); }
.s-nav__actions .s-nav__cta { background: var(--accent); color: var(--texte-sur-accent, var(--fond)); box-shadow: 0 8px 30px -10px var(--accent); }
.s-app__marque { border: 0; padding: 0; margin-left: 2px; }
.p-erreur { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--risque); }
.p-succes { margin: 0 0 16px; padding: 18px; border-radius: var(--rayon); border: 1px solid var(--accent); background: var(--panneau); }
.p-champ select { font: inherit; font-weight: 420; font-size: 15px; color: var(--texte); background: var(--fond); border: 1px solid var(--filet); border-radius: 12px; padding: 12px 14px; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-discret) 50%), linear-gradient(135deg, var(--texte-discret) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.p-champ .p-aide { font-weight: 420; font-size: 12.5px; color: var(--texte-discret); }
.p-case { grid-column: 1 / -1; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; font-weight: 420; line-height: 1.5; }
.p-case input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 2px 0 0; border-radius: 6px; border: 1.5px solid var(--filet); background: var(--fond); display: grid; place-items: center; cursor: pointer; }
.p-case input:checked { background: var(--accent); border-color: var(--accent); }
.p-case input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--texte-sur-accent, var(--fond)); border-bottom: 2px solid var(--texte-sur-accent, var(--fond)); transform: rotate(-45deg) translate(1px, -1px); }

/* ════ États des modules branchés au HUB : chargement, indisponible / réservé — jamais un bloc vide ════ */
.m-etat { display: grid; place-content: center; justify-items: center; gap: 10px; padding: 28px 22px; text-align: center; border-radius: var(--rayon); background: color-mix(in srgb, var(--panneau) 80%, transparent); border: 1px dashed var(--filet); color: var(--texte-discret); font-size: 14px; line-height: 1.55; }
.m-etat strong { color: var(--texte); font: 640 17px/1.3 var(--police-titres); }
.m-etat span { max-width: 52ch; }
.m-etat[data-etat="chargement"] { border-style: solid; }
.m-etat__roue { width: 26px; height: 26px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: m-tourne .9s linear infinite; }
@keyframes m-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .m-etat__roue { animation: none; } }
.m-graph > .m-etat { border-radius: 0; border: 0; }
.m-bande--etat { display: flex; justify-content: center; padding: 14px 24px; font-size: 13.5px; color: var(--texte-discret); }
.m-tuile__reserve { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--texte-discret); }
.m-tuile__reserve strong { color: var(--accent-texte, var(--accent)); font: 600 11px/1 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; }
.m-tuile__reserve a { justify-self: start; }
.m-tuile__liste { margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--texte-discret); }
.m-tuile__liste li::marker { color: var(--accent); }
/* Aucune case vide : un nombre impair de faits ne laisse pas de trou en fin de grille ; une tuile qui porte un
 * lecteur audio prend toute la largeur sur mobile (lecteur lisible). */
@media (max-width: 860px) { .m-faits { grid-template-columns: 1fr 1fr; } .m-faits__fait:last-child:nth-child(odd) { grid-column: 1 / -1; } .m-tuile:has(.m-audio) { grid-column: 1 / -1; } }

/* ─── Thème XQV9 ─── */
.x-accueil { --fond: #07090D; --fond-alt: #0D1117; --panneau: #12171F; --panneau-fort: #161D27; --creme: #E8EBEF; --accent: #4DA3FF; --accent-clair: #70C4FF; --accent-texte: #70C4FF; --texte: #F4F6F8; --texte-discret: #8D98A7; --texte-sur-creme: #07090D; --texte-sur-accent: #07090D; --risque: #70C4FF; --bougie-hausse: #4DA3FF; --bougie-baisse: #8B949E; --filet: rgba(112, 196, 255, 0.16); --police-titres: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-chiffres: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --police-donnees: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --rayon: 14px; background: var(--fond); color: var(--texte); font-family: var(--police-texte); }

/* ─── Signature XQV9 commune (comptes/rendu/xqv9-comptes.css) ─── */
/* ─── XQV9 — compléments des pages /comptes/* aux modules de vitrine partagés ─── XQV9_FUNDED_ACCOUNT_LANDINGS ───
   Source des seuls ajouts propres à XQV9 ; generer.cjs les place APRÈS vitrine.css (modules V2 BOFI, jamais modifiés)
   et le thème XQV9 (marque-xqv9.json) dans dist/assets/css/comptes.css. Aucune couleur en dur hors des variables du
   thème : la signature XQV9 (nuit, bleu de vigilance, trame et radar du cockpit) vient de la mise en page.
   Règles d'or : aucun grand tableau, aucune liste de 20 rectangles (brief maître vitrines V2 §19). */

.x-comptes { margin: 0; min-height: 100vh; }
.x-main { overflow-x: clip; }
.x-apercu { padding: 10px var(--g, 16px); text-align: center; font: 700 12px/1.3 var(--police-texte); letter-spacing: .08em; text-transform: uppercase; background: var(--creme); color: var(--texte-sur-creme); }

/* Ouverture : trame fine et balayage radar, la signature « cockpit » de XQV9. */
.x-ouverture { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 72px; }
.x-ouverture::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--filet) 1px, transparent 1px), linear-gradient(90deg, var(--filet) 1px, transparent 1px);
  background-size: 72px 72px; opacity: .45;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 30%, transparent 80%); }
.x-radar { position: absolute; z-index: -1; top: -260px; left: 50%; width: 760px; height: 760px; margin-left: -380px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--accent) 16%, transparent) 38deg, transparent 80deg);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 70%); mask-image: radial-gradient(circle, #000 55%, transparent 70%);
  animation: x-balayage 9s linear infinite; }
@keyframes x-balayage { to { transform: rotate(360deg); } }
.x-ouverture .m-hero__titre .seo-descripteur { display: block; color: var(--accent-texte); font-weight: 600; }

/* Héros XQV9 : la promesse à gauche, le cockpit à droite (brief design 02/09 §5-§6, §9 « le compte est au centre »).
   La V2 BOFI centre un titre géant ; XQV9 met l'objet produit dans le premier écran (Stripe Radar, Wealthfront). */
.v-site .x-ouverture { text-align: left; padding-top: 64px; }
.v-site .x-ouverture .x-grands-bloc { text-align: center; }
.v-site .x-ouverture.x-ouverture--centre, .v-site .x-ouverture.x-ouverture--centre .m-hero { text-align: center; }
.v-site .x-ouverture.x-ouverture--centre h1 { margin-left: auto; margin-right: auto; }
.v-site .x-ouverture.x-ouverture--centre .m-hero__ligne { margin-left: auto; margin-right: auto; }
.v-site .x-ouverture.x-ouverture--centre .m-hero__ctas { justify-content: center; }
.v-site .x-grands { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); }
.x-ouverture__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.x-ouverture__texte { padding-top: 12px; }
.x-ouverture .m-hero { text-align: left; }
.v-site .x-ouverture h1 { margin: 22px 0 0; max-width: 13ch; font-size: clamp(42px, 5.6vw, 84px); line-height: .98; }
.v-site .x-ouverture .m-hero__ligne { margin: 22px 0 0; max-width: 52ch; font-size: 18px; }
.v-site .x-ouverture .m-hero__ctas { justify-content: flex-start; }
.x-meta { margin: 14px 0 0; font-size: 13.5px; color: var(--texte-discret); }
.x-ouverture .x-tailles { justify-content: flex-start; margin-top: 26px; }
.x-ouverture__cockpit { display: grid; gap: 4px; }
.x-ouverture__cockpit .m-risque { margin-top: 14px; }
.x-grands-bloc { margin-top: 72px; text-align: center; }
.x-grands-bloc .grands { margin-top: 18px; }

/* Sélecteur de taille : les tailles réellement publiées, la courante en bleu. */
.x-tailles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; }
.x-tailles__titre { font: 600 11px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-discret); }
.x-tailles ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.x-tailles .m-pastille { display: inline-block; text-decoration: none; }
.x-tailles .m-pastille[aria-current="page"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }

/* Grands chiffres : des fourchettes, donc un corps plus serré que les prix de la V2 BOFI. */
.v-site .x-grands b { font-size: clamp(26px, 2.9vw, 42px); white-space: nowrap; color: var(--texte); }
.x-grands div:first-child b { color: var(--accent-texte); }

/* Le simulateur de marge (gabarit m-hwm) : l'objet produit, un cockpit. */
.x-sim { box-shadow: 0 30px 80px -50px color-mix(in srgb, var(--accent) 70%, transparent); }
.x-sim__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.x-sim__etape { font: 600 12px/1 var(--police-chiffres); color: var(--texte-discret); }
.x-sante { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--filet); background: var(--fond-alt); }
.x-sante__titre { font: 600 11px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-discret); }
.x-sante__etat { font: 800 clamp(26px, 3vw, 34px)/1 var(--police-chiffres); letter-spacing: .04em; color: var(--accent-texte); transition: color .25s ease, background .25s ease; }
.x-sante__etat[data-etat="WATCH"] { color: var(--creme); }
.x-sante__etat[data-etat="DANGER"] { padding: 4px 10px; border-radius: 10px; background: var(--creme); color: var(--texte-sur-creme); }
.x-sim .m-hwm__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-sim__programme { display: grid; gap: 8px; margin-top: 18px; }
.x-sim__programme label { font: 600 11px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); }
.x-sim__programme select { width: 100%; }
.x-sim__total { font-size: 12px; color: var(--texte-discret); }
.x-limite { margin-top: 6px; padding-top: 4px; }
.x-limite[data-calculable="0"] .m-hwm__jauge, .x-limite[data-calculable="0"] input { opacity: .35; }
.x-limite__regle { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--texte-discret); }
.x-v { color: inherit; }
.x-st { display: inline-block; min-width: 1em; color: var(--accent-texte); }
.x-v[data-statut="UNKNOWN"] .x-st, .x-v[data-statut="NOT_APPLICABLE"] .x-st { color: var(--texte-discret); }
.x-d { font-family: var(--police-chiffres); font-size: .9em; color: var(--texte-discret); }
.x-sim .m-hwm__grille b[data-etat="SAFE"] { color: var(--accent-texte); }
.x-sim .m-hwm__grille b[data-etat="WATCH"] { color: var(--creme); }
.x-sim .m-hwm__grille b[data-etat="DANGER"] { display: inline-block; padding: 3px 8px; border-radius: 8px; background: var(--creme); color: var(--texte-sur-creme); }
.x-sim__financement { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); }
.x-sim__financement-titre { display: block; font: 600 11px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); }
.x-sim__financement ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.x-sim__financement li { padding: 7px 11px; border: 1px solid var(--filet); border-radius: 999px; font-size: 12.5px; line-height: 1.2; color: var(--texte); background: var(--fond-alt); }
.x-sim__financement li[data-change] { border-color: var(--accent); }
.x-sim__cle { color: var(--texte-discret); }
.x-chg { color: var(--accent-texte); font-weight: 700; }
.x-sim__note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--texte-discret); }

/* Rythme des sections : nuit / nuit plus claire (XQV9 n'a pas de variante crème). */
.x-sombre { background: var(--fond-alt); }
.x-espace { margin-top: 56px; }
.x-etats { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--texte-discret); }
.x-etats li { display: flex; gap: 10px; align-items: baseline; }
.x-etats b { flex: none; min-width: 74px; padding: 4px 8px; border-radius: 8px; text-align: center; font: 700 11px/1 var(--police-chiffres); letter-spacing: .06em; border: 1px solid var(--filet); color: var(--accent-texte); }
.x-etats li[data-etat="WATCH"] b { color: var(--creme); }
.x-etats li[data-etat="DANGER"] b { background: var(--creme); color: var(--texte-sur-creme); border-color: var(--creme); }

/* Execution · Quality · Vigilance : « trois énormes blocs » (brief design §10). */
.x-eqv .m-tuile { min-height: 300px; padding: 28px; }
.x-eqv .m-tuile h3 { font: 800 clamp(26px, 2.6vw, 36px)/1 var(--police-chiffres); letter-spacing: .06em; text-transform: uppercase; color: var(--texte); }
.x-eqv .m-tuile[data-outil="vigilance"] { border-color: var(--accent); box-shadow: 0 0 60px -30px var(--accent); }
.x-eqv .m-tuile[data-outil="vigilance"] h3 { color: var(--accent-texte); }
.x-eqv .m-tuile p { font-size: 15px; }

/* Page /comptes/ : une tuile par taille, la taille en grands chiffres. */
.x-cartes-tailles .m-tuile h3 { font: 700 clamp(30px, 3vw, 40px)/1 var(--police-chiffres); color: var(--texte); letter-spacing: -.02em; }
.x-cartes-tailles .m-tuile p { white-space: pre-line; }

/* Clôture : la mention obligatoire au point de décision (Robinhood : le risque là où l'on décide). */
.x-fin { position: relative; }
.v-site .x-fin h2 { font-size: clamp(34px, 4.6vw, 68px); max-width: 18ch; }
.x-fin .x-mention { margin: 22px auto 0; max-width: 60ch; font: 600 17px/1.5 var(--police-texte); color: var(--texte); }
.x-jamais { max-width: 860px; margin: 48px auto 0; }
.x-jamais h3 { margin: 0; font: 600 12px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-discret); }
.x-jamais ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.x-jamais li { padding: 8px 14px; border: 1px solid var(--filet); border-radius: 999px; font-size: 13.5px; color: var(--texte-discret); }
.x-jamais-court { max-width: 62ch; margin: 36px auto 0; font-size: 14.5px; line-height: 1.55; color: var(--texte-discret); }
.x-jamais-court a, .x-sources-ligne a, .x-fin__notes a { color: var(--accent-texte); }
.x-fin__notes { max-width: 72ch; margin: 36px auto 0; text-align: left; }
.x-sources-ligne { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--texte-discret); }

/* Page des sources. */
.x-page-texte { padding-bottom: 96px; }
.x-page-texte .p-tete { padding-left: 0; padding-right: 0; }
.x-source-firme h2 { margin: 0 0 6px; font: 640 22px/1.2 var(--police-titres); }
.x-liste-sources { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; }
.x-liste-sources li { overflow-wrap: anywhere; }
.x-liste-sources a { color: var(--accent-texte); }

@media (max-width: 900px) {
  .x-ouverture { padding-top: 36px; }
  .x-ouverture__grille { grid-template-columns: minmax(0, 1fr); }
  .v-site .x-grands { grid-template-columns: minmax(0, 1fr); }
  .x-grands-bloc { margin-top: 48px; }
  .x-radar { width: 520px; height: 520px; margin-left: -260px; top: -200px; }
  .v-site .x-grands b { font-size: clamp(26px, 7.4vw, 38px); }
}
@media (prefers-reduced-motion: reduce) {
  .x-radar { animation: none; }
}

/* ─── Homepage (site/rendu/xqv9-accueil.css) ─── */
/* ─── XQV9 — compléments de la homepage aux modules de vitrine partagés ─── XQV9_HOME_V2 ───
   generer.cjs les place APRÈS vitrine.css (modules V2 BOFI, jamais modifiés), le thème XQV9 (marque-xqv9.json) et la
   signature XQV9 commune (comptes/rendu/xqv9-comptes.css : radar, cockpit m-hwm, Execution · Quality · Vigilance)
   dans dist/assets/css/accueil.css. Aucune couleur en dur hors des variables du thème. */

.x-accueil { margin: 0; min-height: 100vh; }

/* Héros : le cockpit d'exemple est l'objet produit du premier écran (Stripe Radar, Wealthfront). */
/* Le H1 du brief design §5 garde ses deux phrases ; la seconde, en bleu de vigilance, porte le problème. */
.v-site.x-accueil .x-ouverture h1 { max-width: 15ch; font-size: clamp(40px, 4.9vw, 72px); }
.x-accueil .x-ouverture .m-hero__titre .seo-descripteur { display: block; margin-top: 16px; font: 700 clamp(24px, 2.6vw, 38px)/1.08 var(--police-titres); letter-spacing: -.015em; color: var(--accent-texte); -webkit-text-fill-color: var(--accent-texte); }
.x-cockpit .x-sim__tete { justify-content: flex-start; }
.x-cockpit .x-limite + .x-limite { margin-top: 8px; }
.x-cockpit .m-hwm__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x-cockpit .m-hwm__grille b { font-size: 16px; }
.x-grands__source { margin: 16px auto 0; max-width: 64ch; font-size: 13px; color: var(--texte-discret); }
.x-grands__source a { color: var(--accent-texte); }

/* Que voulez-vous faire ? — trois portes (Revolut : une entrée par intention). */
.x-portes .p-carte-liens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; }
.x-portes .p-carte-liens a { padding: 28px 24px; gap: 10px; min-height: 180px; align-content: start; }
.x-portes .p-carte-liens strong { font: 700 clamp(20px, 1.9vw, 26px)/1.15 var(--police-titres); }
.x-portes .p-carte-liens a::after { content: "→"; margin-top: auto; padding-top: 14px; font: 700 20px/1 var(--police-texte); color: var(--accent-texte); transition: transform .2s ease; }
.x-portes .p-carte-liens a:hover::after { transform: translateX(4px); }
.x-portes .p-carte-liens a[data-porte="absente"] { background: var(--fond-alt); }
.x-portes .p-carte-liens a[data-porte="absente"] strong::after { content: " · page en préparation"; font: 600 11px/1 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-discret); }

/* Le problème : quatre alertes système, jamais rouges (brief design §7, §15). */
.x-causes .m-tuile { min-height: 190px; }
.x-alerte { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border: 1px solid var(--filet); border-radius: 999px; font: 600 11.5px/1.2 var(--police-chiffres); color: var(--texte-discret); }
.x-alerte span { color: var(--accent-texte); }

/* Le compte est au centre : règles lues dans le registre, une ligne = une règle, son statut et sa date
   (FTMO « Objectifs » : une règle, sa valeur, sa source). */
.x-compte { align-items: center; }
.x-compte__texte { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--texte-discret); }
.x-carte__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.x-carte__tete b { font: 800 clamp(24px, 2.4vw, 30px)/1 var(--police-chiffres); letter-spacing: .02em; }
.x-carte__programme { margin: 10px 0 0; font-size: 13px; color: var(--texte-discret); }
.x-carte__regles { margin: 16px 0 0; }
.x-carte__ligne { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--filet); font-size: 14px; }
.x-carte__ligne dt { color: var(--texte-discret); }
.x-carte__ligne dd { margin: 0; text-align: right; }
.x-carte__vide { color: var(--texte-discret); }
.x-carte .x-sim__note a { color: var(--accent-texte); }

/* Ce que XQV9 ne fait pas (encore) : deux listes en pastilles, alignées à gauche. */
.x-limites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.x-limites .x-jamais { margin: 0; padding: 26px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); }
.x-limites .x-jamais ul { display: grid; gap: 10px; justify-content: stretch; }
.x-limites .x-jamais li { padding: 12px 14px; border-radius: 12px; border-left: 2px solid var(--filet); background: var(--fond-alt); color: var(--texte); font-size: 14.5px; line-height: 1.5; }
.x-limites .x-jamais:first-child li { border-left-color: var(--accent); }
.x-limites .x-jamais:first-child h3 { color: var(--accent-texte); }

/* Live gratuit. */
.x-live .ctas { justify-content: flex-start; }
.x-live__note { margin: 26px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--texte-discret); }

/* Inscription : le parcours, puis la pré-inscription (D-798 : gratuite, jamais présentée comme un achat). */
.x-parcours { max-width: 920px; margin: 40px auto 0; text-align: left; }
.x-parcours h3 { margin: 0 0 14px; font: 600 12px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-discret); text-align: center; }
.x-parcours .m-faits { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.x-parcours__note { margin: 14px auto 0; max-width: 70ch; font-size: 14px; line-height: 1.55; color: var(--texte-discret); text-align: center; }
.x-preinscription { max-width: 560px; margin: 48px auto 0; padding: 28px; text-align: left; border: 1px solid var(--accent); border-radius: var(--rayon); background: var(--panneau); box-shadow: 0 30px 80px -50px color-mix(in srgb, var(--accent) 70%, transparent); }
.x-preinscription .x-mention { margin: 0 0 18px; text-align: left; font-size: 15.5px; }
.x-preinscription .ctas { justify-content: flex-start; margin-top: 0; }
.x-form__label { display: block; margin-bottom: 8px; font: 600 11px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); }
.x-form__champ { display: flex; flex-wrap: wrap; gap: 10px; }
.x-form__champ input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--filet); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; font-size: 15px; }
.x-form__champ input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.x-form__champ .m-bouton[disabled] { opacity: .6; cursor: progress; }
.x-form__promesse { margin: 14px 0 0; font-size: 14px; color: var(--texte); }
.x-form__statut { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: var(--accent-texte); }
.x-form__statut.est-erreur { color: var(--creme); }
.x-form__meta { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--texte-discret); }
.x-form__meta a { color: var(--accent-texte); }

/* À propos, Écosystème (brief design §18, §23). */
.v-site .x-apropos { padding: 56px 0; border-top: 1px solid var(--filet); }
.x-apropos__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.x-apropos h2 { margin: 0 0 8px; font: 600 12px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-discret); }
.x-apropos p { margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: var(--texte-discret); }
.x-apropos__grille > div { scroll-margin-top: 88px; }

/* Page d'arrivée du lien e-mail (/inscription). */
.x-arrivee { padding-bottom: 96px; }
.x-arrivee__p { max-width: 64ch; font-size: 16px; line-height: 1.6; color: var(--texte-discret); }
.x-arrivee .p-carte-liens { margin-top: 28px; }

/* Bannière de consentement (xqv9-track.js, seulement si un identifiant de site est posé ; jamais un mur). */
.xqv9-consentement { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; max-width: 560px; margin: 0 auto; padding: 18px; border: 1px solid var(--accent); border-radius: var(--rayon); background: var(--panneau); color: var(--texte-discret); font: 14px/1.5 var(--police-texte); box-shadow: 0 20px 60px -30px #000; }
.xqv9-consentement p { margin: 0 0 12px; }
.xqv9-consentement a { color: var(--accent-texte); }
.xqv9-consentement-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.xqv9-consentement-actions .m-bouton { flex: 1 1 0; }

/* Barre CTA collante : mobile seulement, cachée tant que le CTA du héros ou le formulaire est visible. */
.x-collante { display: none; }

@media (max-width: 900px) {
  .x-portes .p-carte-liens, .x-limites, .x-apropos__grille { grid-template-columns: minmax(0, 1fr); }
  .x-portes .p-carte-liens a { min-height: 0; }
  .x-parcours .m-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-carte__ligne { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .x-carte__ligne dd { text-align: left; }
}

/* Mobile (brief design §22, 04_FAMILLES §A) : héros court, puis compte → règles → protection → portes → live ;
   CTA toujours accessible. L'ordre visuel ne change que sous 760 px. */
@media (max-width: 759px) {
  .x-main { display: flex; flex-direction: column; }
  .x-main > #ouverture { order: 0; }
  .x-main > #votre-compte { order: 1; }
  .x-main > #comment-ca-marche { order: 2; }
  .x-main > #probleme { order: 3; }
  .x-main > #eqv { order: 4; }
  .x-main > #portes { order: 5; }
  .x-main > #live { order: 6; }
  .x-main > #limites { order: 7; }
  .x-main > #questions { order: 8; }
  .x-main > #inscription { order: 9; }
  .x-main > .x-apropos { order: 10; }
  .v-site.x-accueil .x-ouverture h1 { font-size: clamp(32px, 9vw, 44px); }
  .x-cockpit .x-sante__etat { font-size: 24px; }
  .x-cockpit .m-hwm__grille b { font-size: 14px; }
  .x-ouverture .etiq { display: none; }
  .x-collante { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fond) 92%, transparent); border-top: 1px solid var(--filet); backdrop-filter: blur(10px); transition: transform .2s ease; }
  .x-collante .m-bouton { width: 100%; }
  .x-collante.est-masquee { transform: translateY(115%); }
  .x-accueil:has(.x-collante) { padding-bottom: 80px; }
  .xqv9-consentement { bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-collante { transition: none; }
}