/* =====================================================================
   v2-main.css — proto v2 · cgp-cheverneuil.fr
   Couche de design V2 — chargée APRÈS site-v7.css.
   Design uniquement : aucun texte, aucune structure, aucune image photo.
   Sources : v2-design-spec.md (webmaster) · v2-design-charter.md (designer)
             · v2-ux-qa-report.md (UX/QA)

   Couches :
   0. Tokens v2            1. Finitions globales (#9)
   2. Rythme & texture (#2) 3. Filigranes SVG + icônes produits (#3)
   4. Contrastes AA (#4)    5. Tableau comparatif (#5)
   6. Cartes profils (#6)   7. Micro-interactions (#7)
   8. Correctifs UX (menu mobile, sticky CTA, footer)
   9. Responsive / print / reduced-motion
   ===================================================================== */

/* ============ 0. TOKENS V2 ============ */
:root {
  /* Encre dorée lisible sur fonds clairs (texte) — AA 5.5:1 sur #f8f7f4 */
  --gold-ink:      #8a5a1a;
  /* Bordiga profond corrigé AA (em des ledes) */
  --burgundy:      #9a6114;
  /* Pastilles accessibles du tableau (#5) */
  --ok-green:      #1f7a4d;
  --warn-amber:    #b26a00;
  --ko-red:        #b3453a;
  /* Teintes v2 (remplacent les tints vert hérités) */
  --tint-navy:     rgba(21, 48, 77, 0.055);
  --tint-gold:     rgba(210, 138, 44, 0.08);
  /* Footer distinction (casse la fusion avec le CTA final navy) */
  --footer-navy:   #0c2340;
  /* Motion tokens (#7) */
  --t-fast:  150ms;
  --t-med:   220ms;
  --t-slow:  300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ 1. FINITIONS GLOBALES (#9) ============ */
::selection { background: var(--gold); color: var(--forest-deep); }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}

[id] { scroll-margin-top: 84px; } /* ancres sous topbar sticky */

html { scrollbar-width: thin; scrollbar-color: #c9c2b4 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c9c2b4; border-radius: 8px; border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #b3ab9b; }

/* Reveal : contenu JAMAIS invisible si le JS ne s'exécute pas
   (site.js ajoute documentElement.classList.add('js') en 1re ligne) */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

/* ============ 2. RYTHME VISUEL (#2 — mode très discret) ============ */
/* Alternance stricte des fonds (plus jamais 2 sections claires identiques) */
.section--tarifs   { background: var(--bg-alt); }
.section--piliers  { background: var(--bg); }
.section--compare  { background: var(--bg-alt); }
.section--produits { background: var(--bg); }
.section--methode  { background: var(--bg-alt); }
.section--faq      { background: var(--bg); }

/* Le changement de fond devient le séparateur — on retire les bordures
   systématiques sur la home, on garde 2 filets dorés signature */
.page-home .section { border-bottom: none; }
.page-home .section--compare::before,
.page-home .cta-final::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  translate: -50% 0;
  width: min(1260px, 92vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 138, 44, 0.45), transparent);
  pointer-events: none;
}

/* Trame de points navy 5 % sur les sections crème (texture, pas décor) */
.section--tarifs, .section--compare, .section--methode {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%231C2B4A' fill-opacity='.05'/%3E%3C/svg%3E");
  background-size: 28px 28px;
}

/* Espacements resserrés (−196 px de vide structurel, home uniquement) */
.page-home .section        { --section-pad: clamp(44px, 4.5vw, 72px); }
.page-home .section-head   { margin-bottom: 36px; }
.page-home .piliers-head   { margin-bottom: 36px; }
.page-home .hero           { padding-top: clamp(40px, 4vw, 60px); padding-bottom: clamp(36px, 4vw, 60px); }
.page-home .hero-title--long { margin-bottom: 20px; }
.page-home .hero-grid      { padding-top: 28px; }
.page-home .hero-video     { margin-bottom: 24px; }
.page-home .faq-cta        { margin-top: 40px; }
.page-home .produits-cta   { margin-top: 28px; }
.cta-final { padding: clamp(56px, 6vw, 88px) var(--pad-x); }
.footer    { padding-top: 64px; }

/* H2 produits (3 phrases) : masse réduite, rééquilibrage de section */
.page-home .section--produits .section-title {
  font-size: clamp(30px, 3.4vw, 46px);
  max-width: 26ch;
}

/* CTA final + footer : deux navy distincts + hairline dorée */
.footer {
  background: var(--footer-navy);
  box-shadow: inset 0 1px 0 rgba(210, 138, 44, 0.35);
}

/* ============ 3. FILIGRANES & ICÔNES (#3 — zéro photo) ============ */
/* 3.a — Hero : carrés imbriqués (style d'origine ◈, revisité SVG) — or/marine
   visibilité accrue vs v7 (0.025 → traits 0.12–0.30) tout en restant filigrane */
.hero::after {
  content: "";
  position: absolute;
  right: -5vw;
  top: 6%;
  width: clamp(380px, 44vw, 720px);
  aspect-ratio: 900 / 640;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 640' fill='none'%3E%3Cpath d='M450 30L740 320L450 610L160 320Z' stroke='%231C2B4A' stroke-width='1.5' stroke-opacity='.09'/%3E%3Crect x='245' y='115' width='410' height='410' stroke='%23B8925A' stroke-width='1.5' stroke-opacity='.16'/%3E%3Cpath d='M450 175L595 320L450 465L305 320Z' stroke='%23B8925A' stroke-width='2' stroke-opacity='.26'/%3E%3Crect x='348' y='218' width='204' height='204' stroke='%23B8925A' stroke-width='1.5' stroke-opacity='.16'/%3E%3Cpath d='M450 260L510 320L450 380L390 320Z' stroke='%23B8925A' stroke-width='2' stroke-opacity='.30'/%3E%3Ccircle cx='450' cy='320' r='4' fill='%23B8925A' fill-opacity='.32'/%3E%3C/svg%3E") no-repeat right top / contain;
  opacity: 1; /* neutralise l'opacity 0.025 du glyphe v7 — l'SVG porte ses propres opacités */
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) { .hero::after { display: none; } }

/* 3.b — CTA finale : écho des carrés imbriqués — ancré bas-droit, débordement volontaire
   (rognage net par overflow:hidden du bloc = intentionnel, comme le ◈ d'origine) */
.cta-final::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  top: auto;
  width: clamp(320px, 38vw, 560px);
  aspect-ratio: 960 / 720;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 720' fill='none'%3E%3Cpath d='M480 70L770 360L480 650L190 360Z' stroke='%23E0A458' stroke-width='1.5' stroke-opacity='.21'/%3E%3Crect x='275' y='155' width='410' height='410' stroke='%23E0A458' stroke-width='1.5' stroke-opacity='.30'/%3E%3Cpath d='M480 215L625 360L480 505L335 360Z' stroke='%23E0A458' stroke-width='2' stroke-opacity='.40'/%3E%3Crect x='378' y='258' width='204' height='204' stroke='%23E0A458' stroke-width='1.5' stroke-opacity='.28'/%3E%3Cpath d='M480 300L540 360L480 420L420 360Z' stroke='%23E0A458' stroke-width='2' stroke-opacity='.44'/%3E%3Ccircle cx='480' cy='360' r='4.5' fill='%23E0A458' fill-opacity='.48'/%3E%3C/svg%3E") no-repeat right bottom / contain;
  opacity: 1; /* neutralise l'opacity du glyphe or v7 */
  pointer-events: none;
}
/* Mobile : bloc CTA empilé et dense — le motif serait du bruit, on le retire */
@media (max-width: 760px) {
  .cta-final::after { display: none; }
}

/* 3.c — Icônes custom des listes produits (mask-image, zéro HTML).
   Teinte pilotée par background-color : or profond sur clair,
   or clair sur la colonne marine. */
.produits-list li { position: relative; padding-left: 38px; }
.produits-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 23px;
  width: 20px; height: 20px;
  background-color: var(--gold-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l2.4 6.6L21 12l-6.6 2.4L12 21l-2.4-6.6L3 12l6.6-2.4z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l2.4 6.6L21 12l-6.6 2.4L12 21l-2.4-6.6L3 12l6.6-2.4z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.produits-col--premium .produits-list li::before { background-color: var(--gold-light); }

/* Icône par produit — colonne « Les classiques » */
.produits-col:not(.produits-col--premium) .produits-list li:nth-child(1)::before { /* Assurance-vie : bouclier + check */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l7 2.6v5.2c0 4.6-3 8.2-7 9.9-4-1.7-7-5.3-7-9.9V5.6L12 3z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 11.5l2 2 4-4.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l7 2.6v5.2c0 4.6-3 8.2-7 9.9-4-1.7-7-5.3-7-9.9V5.6L12 3z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 11.5l2 2 4-4.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.produits-col:not(.produits-col--premium) .produits-list li:nth-child(2)::before { /* PER : parapluie */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3a8 8 0 0 1 8 8H4a8 8 0 0 1 8-8z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 11v7a2 2 0 0 0 4 0' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3a8 8 0 0 1 8 8H4a8 8 0 0 1 8-8z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 11v7a2 2 0 0 0 4 0' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.produits-col:not(.produits-col--premium) .produits-list li:nth-child(3)::before { /* SCPI : immeuble */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 21V5a1 1 0 0 1 1-1h8v17M15 9h3a1 1 0 0 1 1 1v11M3 21h18' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 21V5a1 1 0 0 1 1-1h8v17M15 9h3a1 1 0 0 1 1 1v11M3 21h18' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.produits-col:not(.produits-col--premium) .produits-list li:nth-child(4)::before { /* PEA / CTO : graphique */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 20h18M5 15l4-5 3 3 6-7' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 6h3v3' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 20h18M5 15l4-5 3 3 6-7' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 6h3v3' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.produits-col:not(.produits-col--premium) .produits-list li:nth-child(5)::before { /* Obligataire / monétaire : cylindre */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 7c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3z' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4 7v10c0 1.7 3.6 3 8 3s8-1.3 8-3V7' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 7c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3z' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4 7v10c0 1.7 3.6 3 8 3s8-1.3 8-3V7' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}
.produits-col:not(.produits-col--premium) .produits-list li:nth-child(6)::before { /* FCPI / FIP : ampoule */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 1 4 10.5c-.8.7-1 1.5-1 2.5h-6c0-1-.2-1.8-1-2.5A6 6 0 0 1 12 3z' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 1 4 10.5c-.8.7-1 1.5-1 2.5h-6c0-1-.2-1.8-1-2.5A6 6 0 0 1 12 3z' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.produits-col:not(.produits-col--premium) .produits-list li:nth-child(7)::before { /* GFI : arbre */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l5 7h-3l4 6H6l4-7H7l5-7zM12 16v5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l5 7h-3l4 6H6l4-7H7l5-7zM12 16v5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Icône par produit — colonne « Réservés via un CGP agréé » */
.produits-col--premium .produits-list li:nth-child(1)::before { /* Girardin : usine */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 21V10l5 3v-3l5 3v-3l8 4v7H3z' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 21V10l5 3v-3l5 3v-3l8 4v7H3z' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.produits-col--premium .produits-list li:nth-child(2)::before { /* Private Equity : courbe + nœuds */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 19l5-6 4 3 7-9' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='7' r='1.4' fill='%23000'/%3E%3Ccircle cx='13' cy='16' r='1.4' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 19l5-6 4 3 7-9' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='7' r='1.4' fill='%23000'/%3E%3Ccircle cx='13' cy='16' r='1.4' fill='%23000'/%3E%3C/svg%3E");
}
.produits-col--premium .produits-list li:nth-child(3)::before { /* Dette privée : maillage triangulaire */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 18L12 5L19 18L5 18' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 13.5L5 18M12 13.5V5M12 13.5L19 18' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='12' cy='13.5' r='1.6' fill='%23000'/%3E%3Ccircle cx='5' cy='18' r='1.5' fill='%23000'/%3E%3Ccircle cx='12' cy='5' r='1.5' fill='%23000'/%3E%3Ccircle cx='19' cy='18' r='1.5' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 18L12 5L19 18L5 18' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 13.5L5 18M12 13.5V5M12 13.5L19 18' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='12' cy='13.5' r='1.6' fill='%23000'/%3E%3Ccircle cx='5' cy='18' r='1.5' fill='%23000'/%3E%3Ccircle cx='12' cy='5' r='1.5' fill='%23000'/%3E%3Ccircle cx='19' cy='18' r='1.5' fill='%23000'/%3E%3C/svg%3E");
}
.produits-col--premium .produits-list li:nth-child(4)::before { /* AV luxembourgeoise : cadenas */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 11h12v9H6z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 11V8a3 3 0 0 1 6 0v3' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 11h12v9H6z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 11V8a3 3 0 0 1 6 0v3' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.produits-col--premium .produits-list li:nth-child(5)::before { /* Structurés : hexagone */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l7.8 4.5v9L12 21l-7.8-4.5v-9L12 3z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l7.8 4.5v9L12 21l-7.8-4.5v-9L12 3z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.produits-col--premium .produits-list li:nth-child(6)::before { /* SCPI internationales : globe */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.8 2.7 2.8 14.3 0 17-2.8-2.7-2.8-14.3 0-17z' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.8 2.7 2.8 14.3 0 17-2.8-2.7-2.8-14.3 0-17z' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.produits-col--premium .produits-list li:nth-child(7)::before { /* Dispositif Jeanbrun : maison */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 11l8-7 8 7M6 10v10h12V10' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 11l8-7 8 7M6 10v10h12V10' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============ 4. CONTRASTES AA (#4) ============ */
/* Doré texte → encre dorée (tous les textes or sur fond clair) */
/* NB : .logo-tagline EXCLU volontairement -> le header est sur fond navy
   (--gold-light, ratio 7.23) et non sur fond clair. */
.section-tag, .hero-eyebrow, .hero-tagline, .hero-baseline,
.pilier-title em, .tarif-tag,
.pourqui-amount, .profil-amount, .badge-kind,
.contact-info-label, .methode-num, .pilier-num { color: var(--gold-ink); }

/* Passe 2 (#4b) — oublis identifiés à l'audit du 11/09/2026.
   Mêmes éléments, mêmes fonds clairs, ratio 2.64 → 5.51. */
.logo-cgp .logo-g, .hero-title .amp, .contact-hero-title .amp,
.timeline-year, .perk-title em, .portrait-meta, .portrait-role,
.profil-typical-label, .catalogue-tagline, .catalogue-risks-label,
.book-feature-tag, .investaide-cta, .link-copper,
.form-required, .contact-info-extra--orias a { color: var(--gold-ink); }

/* États interactifs — passe 2 */
.contact-info-value a:hover, .booking-alt a:hover { color: var(--gold-ink); }
.methode-num { opacity: 1; }
.pilier-num  { opacity: 1; }

/* États interactifs textuels */
.nav-primary a:hover, .nav-primary a.active { color: var(--gold-ink); }
.btn-secondary:hover { color: var(--gold-ink); border-color: var(--gold-ink); }
.pourqui-card:hover .pourqui-cta,
.pilier-card:hover .pilier-cta,
.pourqui-card:focus-visible .pourqui-cta { color: var(--gold-ink); }
/* Restauration : la carte navy garde son or clair */
.pourqui-card--more:hover .pourqui-cta,
.pourqui-card--more:focus-visible .pourqui-cta { color: var(--gold-ink); }

/* Footer : © et mentions lisibles (0.35 → 0.72) */
.footer-bottom { color: rgba(245, 242, 237, 0.72); }
.cta-final p.cta-reassure { color: rgba(248, 247, 244, 0.7); }

/* Bandeau construction temporaire : fond assombri -> contraste AA (7.4:1 sur texte creme) */
.construction-banner { background: #6e460f; border-bottom-color: #55350b; }

/* Colonne CGP du tableau : or clair sur marine éclairci */
.compare-col--us em { color: var(--gold-ink); }

/* FAQ : chevron en encre dorée */
.faq-item summary::after { color: var(--gold-ink); }

/* ============ 5. TABLEAU COMPARATIF PREMIUM (#5) ============ */
.compare-table-wrap {
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(10, 30, 51, 0.10);
  background: var(--bg-card);
}
@media (min-width: 761px) {
  .compare-table-wrap { overflow: hidden; } /* coins nets desktop uniquement */
}
.compare-table { border-radius: 10px; }

/* En-tête marine plein */
.compare-table thead th {
  background: var(--forest);
  color: var(--bg);
  border-bottom: none;
  padding: 20px 16px;
  font-size: 19px;
  vertical-align: middle;
}
.compare-table thead th.compare-criterion {
  background: var(--forest-deep);
  color: rgba(248, 247, 244, 0.78) !important;   /* reprend les !important v7 pour les battre */
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.18em;
}
.compare-table thead th:not(.compare-criterion) { text-align: center; }
/* Italiques des en-têtes : lisibles sur marine (héritaient de --forest = invisibles) */
.compare-table thead th em { color: rgba(248, 247, 244, 0.94); font-style: italic; }
.compare-table thead th.compare-col--us em { color: var(--gold-light); }

/* Colonne « CGP en réseau » : colonne gagnante (tint or + liserés) */
.compare-table thead th.compare-col--us {
  background: #1d3d63;
  box-shadow: inset 0 3px 0 var(--gold);
}
.compare-table thead th.compare-col--us::after {
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.compare-table tbody td:nth-child(2) {
  background: var(--tint-gold);
  border-left: 1px solid rgba(210, 138, 44, 0.35);
  border-right: 1px solid rgba(210, 138, 44, 0.35);
}
.compare-table tbody tr:last-child td:nth-child(2) {
  border-bottom: 1px solid rgba(210, 138, 44, 0.35);
}

/* Zebra striping */
.compare-table tbody tr:nth-child(even) th,
.compare-table tbody tr:nth-child(even) td { background: rgba(10, 30, 51, 0.025); }
.compare-table tbody tr:nth-child(even) td:nth-child(2) { background: rgba(210, 138, 44, 0.10); }
.compare-table tbody th { font-size: 16.5px; padding: 16px; }
.compare-table tbody td { padding: 16px 10px; }

/* Pastilles accessibles vert / ambre / rouge (surcharge v2.7.2) */
.compare-table tbody td.cell-yes::after { background: var(--ok-green);   box-shadow: 0 2px 6px rgba(31, 122, 77, 0.3); }
.compare-table tbody td.cell-mid::after { background: var(--warn-amber); box-shadow: 0 2px 6px rgba(178, 106, 0, 0.3); }
.compare-table tbody td.cell-no::after  { background: var(--ko-red);     box-shadow: 0 2px 6px rgba(179, 69, 58, 0.3); }
.compare-legend .cell-yes { background: var(--ok-green); }
.compare-legend .cell-mid { background: var(--warn-amber); }
.compare-legend .cell-no  { background: var(--ko-red); }
.compare-legend { margin-top: 20px; }

/* ============ 6. CARTES PROFILS (#6) ============ */
.pourqui-grid { grid-auto-rows: 1fr; }
.pourqui-card {
  min-height: 280px;
  padding: 32px 28px 26px;
  transition:
    border-color var(--t-fast) var(--ease-out),
    transform   var(--t-fast) var(--ease-out),
    box-shadow  var(--t-slow) var(--ease-out);
}
.pourqui-card p { margin-bottom: 18px; }
.pourqui-cta    { margin-top: auto; }
.pourqui-card:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px -12px rgba(10, 30, 51, 0.12);
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.piliers-grid { grid-auto-rows: 1fr; }
.pilier-card  { transition-duration: var(--t-fast); }

/* Mobile : flux naturel — v7 (l.2100/2161) écrase min-height et passe en 1 colonne,
   on désactive donc l'égalisation de rangées pour éviter les trous sous cartes courtes */
@media (max-width: 1100px) {
  .pourqui-grid, .piliers-grid { grid-auto-rows: auto; }
}

/* Bloc tarifs : plus large et aéré (v7 le plafonne à 600px) */
.tarifs-grid--single { grid-template-columns: minmax(0, 760px); }
.tarif-card { padding: 48px 44px; }

/* ============ 7. MICRO-INTERACTIONS (#7) ============ */
/* Reveal plus court, plus discret */
.reveal {
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

/* Chevron FAQ animé (rotation, remplace le +/− statique) */
.faq-item summary::after {
  content: "";
  top: 50%; right: 24px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  background: none;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-slow) var(--ease-out);
}
.faq-item[open] summary::after {
  content: "";
  transform: translateY(-30%) rotate(225deg);
}
@keyframes v2-faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.faq-item[open] > p { animation: v2-faq-in var(--t-slow) var(--ease-out); }

/* Navigation : souligné animé (l'état .active v7 reste prioritaire) */
.nav-primary a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width var(--t-med) var(--ease-out);
}
.nav-primary a:hover::after { width: 100%; }

/* Boutons : feedback d'appui + respiration verticale */
.btn-primary, .btn-secondary, .btn-rdv, .cta-card { transition-duration: var(--t-fast); }
.btn-primary:active, .btn-rdv:active, .cta-card:active { transform: translateY(0) scale(0.985); }
.cta-card { padding: 30px 34px; }

/* Liserés dorés des cartes : 220 ms */
.pourqui-card::before, .promesse::before, .summary-pillar-qsj::before,
.pilier-card::before { transition-duration: var(--t-med); }

/* ============ 8. CORRECTIFS UX (audit rendu réel) ============ */
/* Menu mobile : le hamburger/X reste en haut à droite quand le menu s'ouvre
   Breakpoint aligné sur site-v7.css (900px) — correctif audit 11/09/2026 */
@media (max-width: 900px) {
  .topbar .nav-toggle { margin-left: auto; }
  .topbar.menu-open .brand       { order: 1; }
  .topbar.menu-open .nav-toggle  { order: 2; margin-left: auto; }
  .topbar.menu-open .nav-primary { order: 3; }
  .topbar.menu-open .btn-rdv     { order: 4; }
}
/* Sticky CTA mobile : ne chevauche plus le footer */
@media (max-width: 760px) {
  .footer { padding-bottom: 120px; }
}

/* Page qui-suis-je : mise en page éditoriale — titre/texte à gauche,
   photo à droite, le texte coule SOUS la photo sur toute la largeur */
.portrait-grid {
  display: flow-root; /* contient le float — remplace la grille v7 (photo flottait au centre) */
}
.portrait-frame {
  float: right;
  width: clamp(280px, 36%, 420px);
  margin: 58px 0 36px 56px; /* 58px = haut de la photo aligné sur le NOM (sous l'eyebrow) */
}
/* le texte coule SOUS la photo sur toute la largeur (v7 le plafonnait à 52ch) */
.portrait-text, .portrait-text--invite { max-width: none; }
/* Texte justifié + césure française (alignement demandé par Fred) */
.portrait-text, .portrait-text--invite {
  text-align: justify;
  -webkit-hyphens: auto;
          hyphens: auto;
}
@media (max-width: 1100px) {
  .portrait-frame { width: 42%; margin-left: 40px; }
}
@media (max-width: 800px) {
  .portrait-frame {
    float: none;
    width: auto;
    max-width: 300px;
    margin: 0 auto 32px;
  }
}
/* Le CTA sticky disparaît quand le menu est ouvert (3 CTA visibles → 2) */
body:has(.topbar.menu-open) .mobile-sticky-cta { display: none; }

/* ============ 9. RESPONSIVE / PRINT / REDUCED MOTION ============ */
/* Tableau mobile : 1ʳᵉ colonne collante + masque dégradé désactivé */
@media (max-width: 800px) {
  .compare-table { min-width: 560px; }
  .compare-table thead th { min-width: 112px; padding: 14px 10px; }
  .compare-table tbody td { padding: 14px 8px; }
  .compare-table thead th.compare-criterion,
  .compare-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-alt);
    box-shadow:
      8px 0 12px -8px rgba(10, 30, 51, 0.18),
      inset 0 -1px 0 rgba(10, 30, 51, 0.08);
  }
  .compare-table thead th.compare-criterion { background: var(--forest-deep); box-shadow: 8px 0 12px -8px rgba(10, 30, 51, 0.28); }
  .compare-table tbody tr:nth-child(even) th { background: #ece4d5; }
  .compare-table tbody td.cell-yes::after,
  .compare-table tbody td.cell-mid::after,
  .compare-table tbody td.cell-no::after { width: 24px; height: 24px; }
}
@media (max-width: 760px) {
  /* désactive le masque dégradé v2.7.2 incompatible avec la colonne collante */
  .compare-table-wrap { -webkit-mask-image: none; mask-image: none; }
}

/* Méthode : rail vertical doré sur mobile (parcours accompagné) */
@media (max-width: 800px) {
  .methode-steps { display: block; border-left: none; border-top: none; }
  .methode-step {
    border-left: 2px solid rgba(210, 138, 44, 0.35);
    border-top: none;
    padding: 0 0 32px 56px;
    position: relative;
  }
  .methode-step:last-child { padding-bottom: 0; }
  .methode-step::before {
    content: "";
    position: absolute;
    left: -11px; top: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--bg-alt);
    border: 2px solid var(--gold);
  }
  .methode-num { font-size: 22px; opacity: 1; margin-bottom: 8px; }
  .methode-meta { border-top: none; padding-top: 8px; }
}

/* Impression — le papier ne doit jamais être vide ni charger l'UI */
@media print {
  .reveal, html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
  .topbar, .mobile-sticky-cta, .construction-banner,
  .cta-final-actions, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero { padding: 12pt 0; border-bottom: 1px solid #ddd; }
  .compare-table-wrap { overflow: visible; box-shadow: none; }
  .compare-table { min-width: 0; font-size: 10pt; }
  .footer { background: #fff; color: #000; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Reduced-motion : filet de sécurité (la coupe globale v7 existe déjà) */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .faq-item[open] > p { animation: none; }
  .nav-primary a::after, .faq-item summary::after { transition: none; }
}
/* ===== Brand header : lockup horizontal validé (charte v5, 02/09/2026) ===== */
.brand .logo-svg { height: 42px; width: auto; display: block; }
@media (max-width: 800px) {
  .brand .logo-svg { height: 34px; }
}

/* ============ 6. ACCESSIBILITÉ — SKIP-LINK (#3) ============ */
/* Lien d'évitement : invisible au repos, apparaît au focus clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 22px;
  background: var(--forest-deep, #0a1e33);
  color: #f8f7f4;
  font-family: var(--sans, 'Montserrat', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 0 0 var(--radius, 4px) 0;
  box-shadow: 0 4px 16px rgba(10, 30, 51, .22);
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--gold-ink, #8a5a1a);
  outline-offset: 2px;
}

/* Le contenu principal : pas de contour au focus programmatique */
main:focus { outline: none; }