/* GÉNÉRÉ par apps/xqv9-landing/comparateur/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) Un thème par vitrine (comparateur/donnees/visuels.json) via themeVersCss, sur .x-v-<vitrine>.
   3) Signature XQV9 commune : comptes/rendu/xqv9-comptes.css (sha256 9c204a71382c).
   4) Compléments propres aux vitrines du comparateur : comparateur/rendu/xqv9-comparateur.css.
   5) Onglets des profils sans script (générés depuis methodologie.json). */

/* ─── @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-v-comparateur { --fond: #F7F1E8; --fond-alt: #EFE6D8; --panneau: #FFFBF5; --panneau-fort: #FFFFFF; --creme: #1C1A17; --accent: #8E2F2B; --accent-clair: #B5443E; --accent-texte: #8A2C28; --texte: #1C1A17; --texte-discret: #5C554C; --texte-sur-creme: #F7F1E8; --texte-sur-accent: #FFFFFF; --risque: #8E2F2B; --bougie-hausse: #1C1A17; --bougie-baisse: #8E2F2B; --filet: rgba(28, 26, 23, 0.16); --police-titres: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Liberation Serif", "Times New Roman", serif; --police-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Liberation Serif", "Times New Roman", serif; --police-texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-chiffres: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Liberation Serif", "Times New Roman", serif; --police-donnees: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --rayon: 4px; background: var(--fond); color: var(--texte); font-family: var(--police-texte); }
.x-v-cout-reel { --fond: #F6F5FB; --fond-alt: #ECEAF6; --panneau: #FFFFFF; --panneau-fort: #FFFFFF; --creme: #1B1640; --accent: #5B4BDB; --accent-clair: #8B7CF6; --accent-texte: #4A3AC2; --texte: #1B1640; --texte-discret: #5A5676; --texte-sur-creme: #FFFFFF; --texte-sur-accent: #FFFFFF; --risque: #5B4BDB; --bougie-hausse: #5B4BDB; --bougie-baisse: #8E8AA8; --filet: rgba(27, 22, 64, 0.12); --police-titres: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-display: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-texte: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-chiffres: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-donnees: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --rayon: 22px; background: var(--fond); color: var(--texte); font-family: var(--police-texte); }
.x-v-regles { --fond: #050505; --fond-alt: #0D0D0D; --panneau: #121212; --panneau-fort: #1A1A1A; --creme: #F2F2F2; --accent: #FF9F1A; --accent-clair: #FFC266; --accent-texte: #FFB347; --texte: #EDEDED; --texte-discret: #A0A0A0; --texte-sur-creme: #050505; --texte-sur-accent: #050505; --risque: #FF9F1A; --bougie-hausse: #FF9F1A; --bougie-baisse: #7A7A7A; --filet: rgba(255, 159, 26, 0.2); --police-titres: "Helvetica Neue", "Arial Narrow", "Liberation Sans Narrow", "Liberation Sans", Arial, sans-serif; --police-display: "Helvetica Neue", "Arial Narrow", "Liberation Sans Narrow", "Liberation Sans", 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: 3px; background: var(--fond); color: var(--texte); font-family: var(--police-texte); }
.x-v-outils { --fond: #FFFFFF; --fond-alt: #F5F8FC; --panneau: #FFFFFF; --panneau-fort: #F5F8FC; --creme: #0B2342; --accent: #4C5BF0; --accent-clair: #7FB2FF; --accent-texte: #3442C9; --texte: #0B2342; --texte-discret: #4F607A; --texte-sur-creme: #FFFFFF; --texte-sur-accent: #FFFFFF; --risque: #4C5BF0; --bougie-hausse: #4C5BF0; --bougie-baisse: #8A97AB; --filet: rgba(11, 35, 66, 0.12); --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: 12px; background: var(--fond); color: var(--texte); font-family: var(--police-texte); }
.x-v-profil { --fond: #FBFBF7; --fond-alt: #EEF6F0; --panneau: #FFFFFF; --panneau-fort: #FFFFFF; --creme: #123524; --accent: #12805C; --accent-clair: #3FBF8F; --accent-texte: #0D6A4B; --texte: #13261D; --texte-discret: #54655C; --texte-sur-creme: #FFFFFF; --texte-sur-accent: #FFFFFF; --risque: #12805C; --bougie-hausse: #12805C; --bougie-baisse: #8FA399; --filet: rgba(19, 38, 29, 0.12); --police-titres: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-display: "Avenir Next", Avenir, "Segoe UI", "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: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", "Liberation Sans", system-ui, Arial, sans-serif; --police-donnees: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --rayon: 18px; background: var(--fond); color: var(--texte); font-family: var(--police-texte); }

/* ─── 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; }
}

/* ─── XQV9 — compléments des cinq vitrines /comparateur/* aux modules de vitrine partagés ─── XQV9_COMPARATEURS_V2_5_VITRINES ───
   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) dans dist/assets/css/comparateur.css. Aucune couleur en dur
   hors des variables du thème. Références : Morningstar (la note se lit avec sa méthode et ce qui la compose),
   NerdWallet / Forbes Advisor (cartes, « en tête du profil », divulgation en tête), Bloomberg / Financial Times
   (chiffres en chasse fixe, filets fins, densité maîtrisée), Wealthfront / Revolut (curseurs qui recalculent),
   Stripe (méthode en étapes, formule lisible). Aucun tableau. */

.x-cmp { margin: 0; min-height: 100vh; }
.x-cmp a { color: inherit; }
.x-h3 { margin: 0 0 14px; font: 600 12px/1.2 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-discret); }

/* Divulgation en tête (Forbes Advisor / NerdWallet) : avant tout classement, qui édite et qui figure. */
.x-divulgation { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 14px; padding: 11px var(--g, 16px); border-bottom: 1px solid var(--filet); background: var(--fond-alt); font-size: 13px; line-height: 1.45; color: var(--texte-discret); text-align: center; }
.x-divulgation__etiquette { font: 700 11px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-texte); }
.x-divulgation a { color: var(--accent-texte); text-underline-offset: 3px; }

/* Rail des cinq vitrines : une question par vitrine (onglets d'un portail de notation). */
.x-rail { margin-top: 8px; }
.x-rail ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.x-rail li + li { border-left: 1px solid var(--filet); }
.x-rail a { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; text-decoration: none; color: var(--texte-discret); transition: color .2s ease, background .2s ease; }
.x-rail a:hover { color: var(--texte); background: var(--fond-alt); }
.x-rail a[aria-current="page"] { color: var(--texte); box-shadow: inset 0 -2px 0 var(--accent); }
.x-rail__num { font: 600 11px/1 var(--police-chiffres); letter-spacing: .08em; color: var(--accent-texte); }
.x-rail__nom { font: 600 15px/1.25 var(--police-titres); }

/* Bande de faits sous le héros : chiffres en chasse fixe (Financial Times). */
.x-faits { margin-top: 64px; }
.x-faits .m-faits__chiffre { font-family: var(--police-chiffres); letter-spacing: -.02em; }
.v-site .x-ouverture h1 { max-width: 15ch; }

/* Statut, date, source : chaque valeur dit d'où elle vient et de quand (Morningstar : la note est traçable). */
.x-v { display: inline; }
.x-v__texte { color: var(--texte); }
.x-v[data-statut="UNKNOWN"] .x-v__texte, .x-v[data-statut="NOT_APPLICABLE"] .x-v__texte { color: var(--texte-discret); font-style: italic; }
.x-v[data-statut="CONFLICT"] .x-st { color: var(--creme); }
.x-v__critere { font-size: .88em; color: var(--texte-discret); }
.x-v__meta { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; margin-left: 8px; vertical-align: baseline; }
.x-v__meta .x-d { font-size: 11.5px; }
.x-src { font: 500 11.5px/1.3 var(--police-chiffres); color: var(--accent-texte); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.x-src:hover { border-bottom-color: var(--accent); }
span.x-src { border-bottom: 0; color: var(--texte-discret); }
.x-src-plus { font: 500 11px/1.3 var(--police-chiffres); color: var(--texte-discret); }

.x-editeur { display: inline-block; padding: 4px 9px; border: 1px solid var(--creme); border-radius: 999px; font: 700 10.5px/1 var(--police-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--creme); vertical-align: middle; white-space: nowrap; }
.x-entete { display: inline-block; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); font: 600 11px/1 var(--police-texte); color: var(--accent-texte); }

/* Note : chiffre, jauge, couverture — la note n'existe jamais sans sa couverture. */
.x-note { display: grid; gap: 6px; min-width: 150px; }
.x-note__libelle { font: 600 10.5px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); }
.x-note__chiffre { font: 700 34px/1 var(--police-chiffres); letter-spacing: -.03em; color: var(--texte); }
.x-note__chiffre small { margin-left: 2px; font-size: 14px; font-weight: 500; color: var(--texte-discret); }
.x-jauge { display: block; height: 6px; border-radius: 999px; background: var(--fond-alt); overflow: hidden; border: 1px solid var(--filet); }
.x-jauge i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-clair)); }
.x-note__couverture { font: 500 12px/1.2 var(--police-chiffres); color: var(--texte-discret); }

/* Objet du héros (méthode, simulateur, cockpit, indicateurs, profils) : gabarit m-hwm partagé. */
.x-ouverture__cockpit .m-hwm { width: 100%; }
.x-formule { display: block; margin-top: 18px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--filet); background: var(--fond); font: 500 14px/1.6 var(--police-chiffres); color: var(--accent-texte); white-space: normal; }
.x-methode__seuil { margin: 12px 0 0; font-size: 13.5px; color: var(--texte-discret); }
.x-statuts { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.x-statuts li { display: grid; grid-template-columns: 22px auto; gap: 2px 10px; font-size: 13px; line-height: 1.45; color: var(--texte-discret); }
.x-statuts .x-st { grid-row: span 2; font-size: 16px; line-height: 1.2; color: var(--accent-texte); }
.x-statuts li[data-statut="UNKNOWN"] .x-st, .x-statuts li[data-statut="NOT_APPLICABLE"] .x-st { color: var(--texte-discret); }
.x-statuts b { color: var(--texte); font-weight: 600; }

/* Onglets sans script : cases radio cachées, pastilles, un panneau visible (règles par profil générées). */
.x-onglets { margin-top: 34px; }
.x-onglets__entree { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.x-onglets__choix { display: flex; flex-wrap: wrap; gap: 8px; }
.x-onglets__choix label { cursor: pointer; }
.x-panneau { display: none; margin-top: 28px; }
.x-panneau__phrase { margin: 0 0 24px; font: 500 18px/1.45 var(--police-titres); color: var(--texte); max-width: 60ch; }
.x-panneau__cta { margin-top: 26px; }

/* Cartes de classement (NerdWallet / Forbes Advisor) : rang, firme, ce qui pèse, note. */
.x-cartes { display: grid; gap: 14px; }
.x-carte { display: grid; grid-template-columns: 72px minmax(0, 1fr) 220px; gap: 24px; padding: 24px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); }
.x-carte[data-editeur] { border-color: color-mix(in srgb, var(--creme) 45%, transparent); }
.x-carte__rang { font: 700 46px/1 var(--police-chiffres); letter-spacing: -.04em; color: var(--accent-texte); }
.x-carte__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.x-carte__tete h3 { margin: 0; font: 700 24px/1.1 var(--police-titres); color: var(--texte); }
.x-carte__programme { margin: 8px 0 0; font-size: 13.5px; color: var(--texte-discret); }
.x-carte__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); }
.x-carte__ptitre { display: block; margin-bottom: 8px; font: 600 10.5px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); }
.x-carte__points ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.5; }
.x-carte__points b { display: block; font-weight: 600; color: var(--texte); }
.x-carte__droite { display: grid; align-content: space-between; gap: 18px; }
.x-carte__actions { display: grid; gap: 8px; }
.x-carte__actions .m-bouton, .x-lien-site { text-align: center; font-size: 13.5px; }
.x-lien-site { margin-top: 14px; }

/* Lignes compactes d'un profil (densité Bloomberg : rang, firme, note, couverture). */
.x-lignes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.x-ligne { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px 18px; padding: 14px 4px; border-bottom: 1px solid var(--filet); }
.x-ligne .x-editeur { grid-column: 2; justify-self: start; }
.x-ligne__rang { font: 700 22px/1 var(--police-chiffres); color: var(--accent-texte); }
.x-ligne__nom { font: 600 17px/1.2 var(--police-titres); text-decoration: none; color: var(--texte); }
.x-ligne__nom:hover { color: var(--accent-texte); }
.x-ligne__note { font: 700 17px/1 var(--police-chiffres); color: var(--texte); }
.x-ligne__couv { font: 500 12.5px/1 var(--police-chiffres); color: var(--texte-discret); }
.x-ligne__raison { grid-column: 2 / -1; font-size: 13px; color: var(--texte-discret); }
.x-hors { margin-top: 26px; }
.x-hors__titre { display: block; margin-bottom: 10px; font: 600 11px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); }
.x-hors ul:not(.x-lignes) { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--texte-discret); }
.x-hors ul:not(.x-lignes) b { margin-right: 8px; color: var(--texte); }

/* Fiches : une firme, cinq familles notées (les « piliers » d'une notation), chaque critère sourcé. */
.x-fiches { display: grid; gap: 12px; margin-top: 34px; }
.x-fiche { border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); }
.x-fiche[data-editeur] { border-color: color-mix(in srgb, var(--creme) 45%, transparent); }
.x-fiche summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 20px 22px; cursor: pointer; list-style: none; }
.x-fiche summary::-webkit-details-marker { display: none; }
.x-fiche summary::after { content: "+"; margin-left: auto; font: 400 22px/1 var(--police-chiffres); color: var(--accent-texte); }
.x-fiche[open] summary::after { content: "–"; }
.x-fiche__nom { font: 700 20px/1.1 var(--police-titres); color: var(--texte); }
.x-fiche__resume { font: 500 13px/1 var(--police-chiffres); color: var(--texte-discret); }
.x-fiche__corps { padding: 0 22px 22px; }
.x-fiche__programme { margin: 0; font-size: 13.5px; color: var(--texte-discret); }
.x-fiche__alerte, .x-firme__alerte { margin: 12px 0 0; padding: 10px 14px; border-left: 2px solid var(--creme); font-size: 13px; line-height: 1.5; color: var(--texte); background: var(--fond-alt); }
.x-familles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.x-famille { padding: 16px 18px; border: 1px solid var(--filet); border-radius: 12px; background: var(--fond-alt); }
.x-famille header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.x-famille h4 { margin: 0; font: 600 12px/1.2 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); }
.x-famille__note { font: 700 18px/1 var(--police-chiffres); color: var(--accent-texte); }
.x-famille dl, .x-composantes, .x-pourquoi { display: grid; gap: 10px; margin: 12px 0 0; }
.x-famille dl > div, .x-composantes > div, .x-pourquoi > div { display: grid; gap: 3px; }
.x-famille dt, .x-composantes dt, .x-pourquoi dt { font: 600 12.5px/1.3 var(--police-texte); color: var(--texte); }
.x-famille dd, .x-composantes dd, .x-pourquoi dd { margin: 0; font-size: 13px; line-height: 1.5; }
.x-fiche__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.x-fiche__actions .x-lien-site { margin-top: 0; }

.x-deux { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 56px; align-items: start; }
.x-autres { padding: 56px 0 8px; }
.x-autres .p-carte-liens { margin-top: 18px; }
.x-questions { border-top: 1px solid var(--filet); }

/* Simulateur de coût (Wealthfront / Revolut) : deux curseurs, des barres qui se recalculent. */
.x-curseur { margin-top: 14px; }
.x-cout__liste { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.x-cout__liste li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "nom barre total" ". detail detail"; align-items: center; gap: 4px 12px; }
.x-cout__nom { grid-area: nom; font: 600 13.5px/1.2 var(--police-titres); color: var(--texte); }
.x-cout__liste li[data-editeur] .x-cout__nom { color: var(--creme); }
.x-cout__barre { grid-area: barre; height: 10px; border-radius: 999px; background: var(--fond-alt); border: 1px solid var(--filet); overflow: hidden; }
.x-cout__remplissage { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-clair)); transition: width .35s ease; }
.x-cout__total { grid-area: total; font: 700 14px/1 var(--police-chiffres); color: var(--texte); white-space: nowrap; }
.x-cout__detail { grid-area: detail; font-size: 11.5px; color: var(--texte-discret); }
.x-cout__detail:empty { display: none; }
.x-tuiles-firmes .m-tuile h3 { font: 700 22px/1.1 var(--police-titres); }
.x-firme { display: grid; gap: 4px; }
.x-firme > .x-editeur { justify-self: start; margin-bottom: 6px; }
.x-firme__note { margin: 10px 0 0; font-size: 12.5px; }
.x-totaux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.x-totaux li { display: grid; gap: 6px; padding: 12px 8px 0 0; }
.x-totaux span { font: 600 10.5px/1 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-discret); }
.x-totaux b { font: 700 15px/1.1 var(--police-chiffres); color: var(--texte); white-space: nowrap; }

/* Règles qui font échouer (FTMO « objectifs » : une règle par bloc) + cockpit en preuve produit. */
.x-regles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.x-regle { padding: 24px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); }
.x-regle header { display: flex; align-items: baseline; gap: 12px; }
.x-regle__num { font: 600 12px/1 var(--police-chiffres); color: var(--accent-texte); }
.x-regle h3 { margin: 0; font: 700 22px/1.15 var(--police-titres); color: var(--texte); }
.x-regle__pourquoi { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--texte-discret); }
.x-regle__firmes { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.x-regle__firmes li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 14px; padding: 11px 0; border-bottom: 1px solid var(--filet); font-size: 13px; line-height: 1.5; }
.x-regle__firme { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 13.5px/1.3 var(--police-titres); color: var(--texte); }
.x-regle__firme .x-editeur { font-size: 9px; padding: 3px 7px; white-space: normal; max-width: 100%; line-height: 1.25; }
/* Tuiles des indicateurs D1–D9 : la liste des firmes suit le texte (le module partagé la pousse en bas, ce qui creusait
   un vide quand la tuile voisine est plus longue). */
.x-v-outils .m-tuile[data-outil] .m-tuile__fragment { margin-top: 0; }
/* Date de la comparaison et validité d'un mois. */
.x-validite { margin: 10px auto 0; font-size: 12.5px; line-height: 1.5; color: var(--texte-discret); }
.x-validite b { color: var(--texte); font-weight: 600; }
.x-validite.est-perimee { color: var(--accent-texte); }
.x-validite__perimee[hidden] { display: none; }
/* Promotions vérifiées (masquées tant qu'aucune n'est valable le jour de la consultation). */
.x-promos { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.x-promo { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); }
.x-promo[hidden], .x-promotions[hidden] { display: none; }
.x-promo__firme { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 14px/1.3 var(--police-titres); color: var(--texte); }
.x-promo__titre { font: 700 16px/1.35 var(--police-titres); color: var(--texte); }
.x-promo__conditions, .x-promo__dates { font-size: 13px; line-height: 1.5; color: var(--texte-discret); }
.x-promo__faits { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 13.5px; line-height: 1.45; }
.x-promo__faits dt { color: var(--texte-discret); font-weight: 600; }
.x-promo__faits dd { margin: 0; color: var(--texte); overflow-wrap: anywhere; }
.x-promo__faits code { font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; }
.x-promo__source { justify-self: start; font-size: 12.5px; }
.x-cockpit .m-hwm__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-cockpit .x-limite + .x-limite { margin-top: 10px; }
.x-etats--grand { gap: 14px; font-size: 15px; }
.x-etats--grand b { min-width: 92px; padding: 6px 10px; font-size: 12px; }

/* Indicateurs de qualité outil : ce qui sera mesuré, et l'état honnête de la mesure. */
.x-indicateurs__liste { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; }
.x-indicateurs__liste li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 13.5px; color: var(--texte); }
.x-indicateurs__cle { font: 600 12px/1 var(--police-chiffres); color: var(--accent-texte); }
.x-indicateurs__liste em, .x-collecte { font: 600 10.5px/1 var(--police-texte); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-discret); padding: 5px 8px; border: 1px dashed var(--filet); border-radius: 999px; white-space: nowrap; }
.x-collecte { display: inline-block; }
.x-groupe { margin-top: 14px; }
.x-groupe__titre { display: block; margin-bottom: 8px; font: 600 10.5px/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-discret); }
.x-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.x-puces li { padding: 6px 10px; border: 1px solid var(--filet); border-radius: 999px; font-size: 12.5px; line-height: 1.2; color: var(--texte); background: var(--fond-alt); }
.x-groupe .x-v__meta { margin-left: 0; }

/* Par profil : le choix, les poids visibles, la sélection et le pourquoi. */
.x-choix-profil ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.x-choix-profil a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 12px; background: var(--fond-alt); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.x-choix-profil a:hover { border-color: var(--accent); transform: translateY(-1px); }
.x-choix-profil b { font: 700 16px/1.2 var(--police-titres); color: var(--texte); }
.x-choix-profil span { font-size: 13px; line-height: 1.4; color: var(--texte-discret); }
.x-profil { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.x-poids { position: sticky; top: 90px; padding: 20px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); }
.x-poids ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.x-poids li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; font-size: 13.5px; color: var(--texte); }
.x-poids i { grid-column: 1 / -1; grid-row: 2; display: block; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-clair)); }
.x-poids b { font: 700 13px/1 var(--police-chiffres); color: var(--accent-texte); }
.x-selection ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.x-choisie { padding: 22px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); }
.x-choisie[data-editeur] { border-color: color-mix(in srgb, var(--creme) 45%, transparent); }
.x-choisie__tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
.x-choisie__tete .x-editeur { grid-column: 2; grid-row: 2; justify-self: start; }
.x-choisie__tete .x-note { grid-column: 3; grid-row: 1 / span 2; }
.x-choisie__rang { font: 700 34px/1 var(--police-chiffres); color: var(--accent-texte); }
.x-choisie h4 { margin: 0; font: 700 22px/1.1 var(--police-titres); color: var(--texte); }
.x-pourquoi { padding-top: 14px; border-top: 1px solid var(--filet); }

/* Mention de l'éditeur au-dessus de chaque classement ou comparaison (D-495, D-610). */
.x-editeur-ligne { margin: 22px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--fond-alt); font: 600 13px/1.45 var(--police-texte); color: var(--texte); }
.x-limite { margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--accent); border-radius: 10px; background: var(--fond-alt); }
.x-limite__titre { display: block; font: 700 14px/1.35 var(--police-titres); color: var(--texte); }
.x-limite__texte { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--texte); }
.x-sim .x-editeur-ligne { margin-top: 18px; font-size: 12px; }

/* Héros centré (vitrine Par profil) : le choix sous la promesse. */
.x-ouverture__objet { margin-top: 44px; text-align: left; }
.x-ouverture--centre .x-choix-profil ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Matrice de capacités (Stripe) : une grille, des points, une légende — rôles ARIA de tableau, aucune balise <table>. */
.x-matrice { margin-top: 26px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--panneau); }
.x-matrice__ligne { display: grid; grid-template-columns: minmax(170px, 1.4fr) repeat(var(--colonnes), minmax(0, 1fr)); align-items: center; border-top: 1px solid var(--filet); }
.x-matrice__tete { border-top: 0; background: var(--fond-alt); border-radius: var(--rayon) var(--rayon) 0 0; }
.x-matrice__tete > span { padding: 16px 8px; font: 650 13px/1.25 var(--police-titres); text-align: center; color: var(--texte); }
.x-matrice__tete .x-matrice__libelle { padding-left: 18px; text-align: left; font: 600 11px/1 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-discret); }
.x-matrice__firme[data-editeur] { color: var(--accent-texte); }
.x-matrice__titre-groupe { grid-template-columns: minmax(0, 1fr); }
.x-matrice__titre-groupe span { padding: 20px 18px 8px; font: 700 11px/1 var(--police-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-texte); }
.x-matrice__libelle { padding: 12px 18px; font-size: 14px; line-height: 1.35; color: var(--texte); }
.x-matrice__cellule { padding: 12px 4px; text-align: center; font-size: 18px; line-height: 1; color: var(--accent); }
.x-matrice__cellule[data-etat="absent"] { color: var(--texte-discret); opacity: .55; }
.x-matrice__cellule[data-etat="conflit"] { color: var(--texte); }
.x-matrice__cellule[data-etat="inconnu"], .x-matrice__cellule[data-etat="collecte"] { color: var(--texte-discret); }
.x-matrice__ligne[role="row"]:not(.x-matrice__tete):not(.x-matrice__titre-groupe):not(.x-matrice__sources):hover { background: var(--fond-alt); }
.x-matrice__sources { align-items: start; }
.x-matrice__source { padding: 12px 6px; text-align: center; font-size: 11px; }
.x-matrice__source b { display: none; }
.x-matrice__source .x-v__meta { display: grid; gap: 4px; justify-items: center; margin-left: 0; }
.x-matrice__legende { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 14px 18px; border-top: 1px solid var(--filet); list-style: none; font-size: 12.5px; color: var(--texte-discret); }
.x-matrice__legende li { display: inline-flex; align-items: center; gap: 8px; }
/* Points dessinés (nets à toute taille, indépendants de la police) : plein, anneau, anneau pointillé, tiret. */
.x-glyphe { display: inline-block; vertical-align: middle; }
[data-etat="oui"] > .x-glyphe, [data-etat="inconnu"] > .x-glyphe, [data-etat="collecte"] > .x-glyphe, [data-etat="absent"] > .x-glyphe { width: 11px; height: 11px; border-radius: 50%; font-size: 0; }
[data-etat="oui"] > .x-glyphe { background: var(--accent); }
[data-etat="inconnu"] > .x-glyphe { border: 1.5px solid var(--texte-discret); }
[data-etat="collecte"] > .x-glyphe { border: 1.5px dashed var(--texte-discret); }
[data-etat="absent"] > .x-glyphe { width: 12px; height: 2px; border-radius: 1px; background: var(--texte-discret); opacity: .55; }
[data-etat="conflit"] > .x-glyphe { font: 700 16px/1 var(--police-chiffres); color: var(--texte); }
.x-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═══ Cinq directions visuelles, mêmes modules (D-849) ═══ */

/* 1 · Comparateur — éditorial (Financial Times, Morningstar) : papier, encre, empattements, filets. */
.x-v-comparateur .x-ouverture::before { display: none; }
.x-v-comparateur .s-nav { border-bottom: 1px solid var(--texte); }
.x-v-comparateur h1, .x-v-comparateur h2.titre, .x-v-comparateur .x-fin h2, .x-v-comparateur .x-carte__tete h3, .x-v-comparateur .x-fiche__nom { font-family: var(--police-display); font-weight: 600; letter-spacing: -.01em; }
.v-site.x-v-comparateur .x-ouverture h1 { font-size: clamp(40px, 5vw, 74px); line-height: 1.03; max-width: 16ch; }
.x-v-comparateur .etiq { padding: 9px 0; border: 0; border-top: 2px solid var(--texte); border-bottom: 1px solid var(--texte); border-radius: 0; background: none; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte); }
.x-v-comparateur .etiq i { display: none; }
.x-v-comparateur section { border-top: 1px solid var(--filet); }
.x-v-comparateur .x-carte__rang, .x-v-comparateur .x-ligne__rang { font-family: var(--police-display); font-style: italic; color: var(--accent-texte); }
.x-v-comparateur .x-sim { box-shadow: none; border-color: var(--texte); }
.x-v-comparateur .x-jauge i, .x-v-comparateur .x-cout__remplissage { background: var(--accent); }
.x-v-comparateur .m-bouton { border-radius: 2px; }

/* 2 · Coût réel — simulateur (Wealthfront, Revolut) : clair, violet, grandes cartes arrondies. */
.x-v-cout-reel .x-ouverture::before { display: none; }
.x-v-cout-reel .x-main { background: radial-gradient(ellipse 55% 620px at 82% 260px, color-mix(in srgb, var(--accent-clair) 24%, transparent), transparent 75%) no-repeat; }
.x-v-cout-reel h1, .x-v-cout-reel h2.titre { letter-spacing: -.035em; font-weight: 700; }
.x-v-cout-reel .x-sim, .x-v-cout-reel .m-tuile { border-color: transparent; box-shadow: 0 30px 80px -36px color-mix(in srgb, var(--texte) 45%, transparent); }
.x-v-cout-reel .x-cout__barre { height: 14px; }
.x-v-cout-reel .x-cout__total { font-size: 17px; }
.x-v-cout-reel .m-bouton { border-radius: 999px; }
.x-v-cout-reel .x-totaux b { font-size: 18px; }

/* 3 · Audit — terminal (Bloomberg) : noir, ambre, chasse fixe, blocs serrés. */
.x-v-regles h1, .x-v-regles h2.titre, .x-v-regles .x-fin h2 { font-family: var(--police-display); font-stretch: condensed; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; }
.v-site.x-v-regles .x-ouverture h1 { font-size: clamp(36px, 4.4vw, 64px); line-height: .98; max-width: 17ch; }
.x-v-regles .etiq { border-radius: 2px; font-family: var(--police-chiffres); text-transform: uppercase; }
.x-v-regles .x-divulgation { font-family: var(--police-chiffres); font-size: 12px; }
.x-v-regles .x-regle { padding: 18px; border-left: 3px solid var(--accent); border-radius: 2px; }
.x-v-regles .x-regle h3 { font-family: var(--police-display); font-size: 18px; letter-spacing: .02em; text-transform: uppercase; }
.x-v-regles .x-regle__firmes li { padding: 8px 0; font-size: 12.5px; }
.x-v-regles .x-regle__firme { font-family: var(--police-chiffres); font-size: 12px; text-transform: uppercase; }
.x-v-regles .m-bouton { border-radius: 2px; letter-spacing: .04em; text-transform: uppercase; }
.x-v-regles .x-rail a[aria-current="page"] { background: var(--accent); color: var(--texte-sur-accent); box-shadow: none; }
.x-v-regles .x-rail a[aria-current="page"] .x-rail__num { color: var(--texte-sur-accent); }

/* 4 · Outils — produit (Stripe) : blanc, marine, bande dégradée oblique, ombres douces. */
.x-v-outils .x-ouverture::before { display: none; }
.x-v-outils .x-main { background: linear-gradient(173deg, color-mix(in srgb, var(--accent) 22%, var(--fond)) 0, color-mix(in srgb, var(--accent-clair) 26%, var(--fond)) 520px, var(--fond) 521px) no-repeat; }
.x-v-outils h1, .x-v-outils h2.titre { letter-spacing: -.03em; font-weight: 700; }
.x-v-outils .x-sim, .x-v-outils .m-tuile, .x-v-outils .x-matrice { border-color: var(--filet); box-shadow: 0 2px 5px -1px color-mix(in srgb, var(--texte) 10%, transparent), 0 16px 40px -24px color-mix(in srgb, var(--texte) 35%, transparent); }
.x-v-outils .m-bouton { border-radius: 999px; }

/* 5 · Profil — accueil (NerdWallet, Forbes Advisor) : clair, vert, grandes cartes de choix. */
.x-v-profil .x-ouverture::before { display: none; }
.x-v-profil h1, .x-v-profil h2.titre { letter-spacing: -.025em; font-weight: 700; }
.x-v-profil .x-choix-profil { padding: 0; border: 0; background: none; box-shadow: none; }
.x-v-profil .x-choix-profil .x-sim__tete { display: none; }
.x-v-profil .x-choix-profil ul { gap: 12px; margin-top: 0; }
.x-v-profil .x-choix-profil a { min-height: 150px; align-content: start; padding: 22px 20px; border-radius: var(--rayon); background: var(--panneau); box-shadow: 0 12px 34px -24px color-mix(in srgb, var(--texte) 40%, transparent); }
.x-v-profil .x-choix-profil b { font-size: 19px; color: var(--accent-texte); }
.x-v-profil .m-bouton { border-radius: 999px; }
.x-v-profil .x-choisie { box-shadow: 0 12px 34px -26px color-mix(in srgb, var(--texte) 40%, transparent); }

@media (max-width: 1000px) {
  .x-carte { grid-template-columns: 52px minmax(0, 1fr); }
  .x-carte__droite { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .x-regles, .x-familles { grid-template-columns: minmax(0, 1fr); }
  .x-profil { grid-template-columns: minmax(0, 1fr); }
  .x-poids { position: static; }
  .x-deux { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .x-cmp .s-nav__in { gap: 12px; }
  .x-cmp .s-nav__logo img { height: 38px; }
  .x-v-regles .s-nav .m-bouton { text-transform: none; letter-spacing: 0; }
  .x-ouverture--centre .x-choix-profil ul { grid-template-columns: minmax(0, 1fr); }
  .x-v-profil .x-choix-profil a { min-height: 0; }
  .x-matrice__ligne { grid-template-columns: minmax(96px, 1.2fr) repeat(var(--colonnes), minmax(0, 1fr)); }
  .x-matrice__titre-groupe { grid-template-columns: minmax(0, 1fr); }
  .x-matrice__tete > .x-matrice__firme { height: 132px; padding: 10px 0; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; font-size: 12px; }
  .x-matrice__libelle { padding: 10px 8px 10px 12px; font-size: 12.5px; }
  .x-matrice__cellule { padding: 10px 0; font-size: 15px; }
  .x-matrice__sources { grid-template-columns: minmax(0, 1fr); }
  .x-matrice__source { padding: 8px 12px; text-align: left; border-top: 1px solid var(--filet); }
  .x-matrice__source b { display: inline; margin-right: 6px; font-size: 12px; color: var(--texte); }
  .x-matrice__source .x-v__meta { display: inline-flex; justify-items: start; }
  .x-rail ul { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 46%); overflow-x: auto; scrollbar-width: none; }
  .x-rail ul::-webkit-scrollbar { display: none; }
  .x-rail a { padding: 14px 14px; }
  .x-carte { padding: 18px; gap: 14px 16px; }
  .x-carte__rang { font-size: 34px; }
  .x-carte__points { grid-template-columns: minmax(0, 1fr); }
  .x-carte__droite { grid-template-columns: minmax(0, 1fr); }
  .x-ligne { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .x-ligne__couv { grid-column: 2 / -1; }
  .x-cout__liste li { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .x-totaux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .x-regle { padding: 18px; }
  .x-regle__firmes li { grid-template-columns: minmax(0, 1fr); }
  .x-choisie { padding: 18px; }
  .x-choisie__tete { grid-template-columns: auto minmax(0, 1fr); }
  .x-choisie__tete .x-note { grid-column: 1 / -1; grid-row: auto; }
  .x-faits { margin-top: 40px; }
  .x-divulgation { font-size: 12.5px; text-align: left; justify-content: flex-start; }
}

/* ─── Onglets (générés) ─── */
#x-f-prop-firm:checked ~ .x-onglets__panneaux > [data-onglet="prop-firm"] { display: block; }
#x-f-prop-firm:checked ~ .x-onglets__choix label[for="x-f-prop-firm"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-f-prop-firm:focus-visible ~ .x-onglets__choix label[for="x-f-prop-firm"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-f-swing:checked ~ .x-onglets__panneaux > [data-onglet="swing"] { display: block; }
#x-f-swing:checked ~ .x-onglets__choix label[for="x-f-swing"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-f-swing:focus-visible ~ .x-onglets__choix label[for="x-f-swing"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-f-scalping:checked ~ .x-onglets__panneaux > [data-onglet="scalping"] { display: block; }
#x-f-scalping:checked ~ .x-onglets__choix label[for="x-f-scalping"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-f-scalping:focus-visible ~ .x-onglets__choix label[for="x-f-scalping"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-f-debutant:checked ~ .x-onglets__panneaux > [data-onglet="debutant"] { display: block; }
#x-f-debutant:checked ~ .x-onglets__choix label[for="x-f-debutant"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-f-debutant:focus-visible ~ .x-onglets__choix label[for="x-f-debutant"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-f-france:checked ~ .x-onglets__panneaux > [data-onglet="france"] { display: block; }
#x-f-france:checked ~ .x-onglets__choix label[for="x-f-france"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-f-france:focus-visible ~ .x-onglets__choix label[for="x-f-france"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-f-sans-challenge:checked ~ .x-onglets__panneaux > [data-onglet="sans-challenge"] { display: block; }
#x-f-sans-challenge:checked ~ .x-onglets__choix label[for="x-f-sans-challenge"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-f-sans-challenge:focus-visible ~ .x-onglets__choix label[for="x-f-sans-challenge"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-f-petit-budget:checked ~ .x-onglets__panneaux > [data-onglet="petit-budget"] { display: block; }
#x-f-petit-budget:checked ~ .x-onglets__choix label[for="x-f-petit-budget"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-f-petit-budget:focus-visible ~ .x-onglets__choix label[for="x-f-petit-budget"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-f-outils:checked ~ .x-onglets__panneaux > [data-onglet="outils"] { display: block; }
#x-f-outils:checked ~ .x-onglets__choix label[for="x-f-outils"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-f-outils:focus-visible ~ .x-onglets__choix label[for="x-f-outils"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-p-swing:checked ~ .x-onglets__panneaux > [data-onglet="swing"] { display: block; }
#x-p-swing:checked ~ .x-onglets__choix label[for="x-p-swing"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-p-swing:focus-visible ~ .x-onglets__choix label[for="x-p-swing"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-p-scalping:checked ~ .x-onglets__panneaux > [data-onglet="scalping"] { display: block; }
#x-p-scalping:checked ~ .x-onglets__choix label[for="x-p-scalping"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-p-scalping:focus-visible ~ .x-onglets__choix label[for="x-p-scalping"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-p-debutant:checked ~ .x-onglets__panneaux > [data-onglet="debutant"] { display: block; }
#x-p-debutant:checked ~ .x-onglets__choix label[for="x-p-debutant"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-p-debutant:focus-visible ~ .x-onglets__choix label[for="x-p-debutant"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-p-france:checked ~ .x-onglets__panneaux > [data-onglet="france"] { display: block; }
#x-p-france:checked ~ .x-onglets__choix label[for="x-p-france"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-p-france:focus-visible ~ .x-onglets__choix label[for="x-p-france"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }
#x-p-sans-challenge:checked ~ .x-onglets__panneaux > [data-onglet="sans-challenge"] { display: block; }
#x-p-sans-challenge:checked ~ .x-onglets__choix label[for="x-p-sans-challenge"] { background: var(--accent); color: var(--texte-sur-accent); border-color: var(--accent); }
#x-p-sans-challenge:focus-visible ~ .x-onglets__choix label[for="x-p-sans-challenge"] { outline: 2px solid var(--accent-clair); outline-offset: 2px; }