/* ============================================================
   SCORE AO : design system du site marketing (refonte premium)
   Palette héritée de la charte La Bulle d'Équilibre (navy + or),
   traitée dans un esprit SaaS B2B sobre (fond clair, un seul
   registre sombre réservé aux moments de preuve produit).
   Partagé par toutes les pages marketing. Ne pas dupliquer ces
   règles dans les pages : les inclure via <link rel="stylesheet">.
============================================================ */
:root{
  --navy:#162035; --navy2:#1f2c47; --navy-deep:#0c1322; --navy-3:#243350;
  --or:#C9A84C; --or-soft:#e7d6a0; --or-bright:#e3c56f; --or-deep:#a9862f;
  --bg:#faf9f5; --paper:#ffffff; --ink:#181c26; --muted:#5b6072; --line:#e7e4da;
  --line-soft:#efece3;
  --ok:#2f7d52; --warn:#b4791f; --err:#b23a3a;
  --shadow-sm:0 2px 8px rgba(22,32,53,.06);
  --shadow:0 12px 32px -14px rgba(22,32,53,.16);
  --shadow-lg:0 34px 80px -30px rgba(12,19,34,.28);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,1,.36,1);
  --z-header:40; --z-backdrop:80; --z-modal:90;
}
@property --v{ syntax:'<number>'; inherits:false; initial-value:0; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* overflow-x:hidden au niveau document : les halos décoratifs (inset négatif,
   voir .reveal:has(.mockwin)::before) débordent volontairement de leur boîte ;
   sans ce garde-fou ils élargissent le document et créent un défilement
   horizontal fantôme sur mobile (retour "affichage mobile cata" du 23/07/2026). */
html,body{overflow-x:hidden}
body{margin:0;font-family:'Outfit',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:15.75px;line-height:1.52;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:-.01em;line-height:1.08;text-wrap:balance;color:var(--navy)}
p{text-wrap:pretty}
a{color:var(--navy)}
img,svg{max-width:100%}
::selection{background:var(--or);color:var(--navy)}
.container{max-width:1180px;margin:0 auto;padding-left:clamp(18px,4vw,40px);padding-right:clamp(18px,4vw,40px)}
.container-narrow{max-width:820px;margin:0 auto;padding-left:clamp(18px,4vw,40px);padding-right:clamp(18px,4vw,40px)}

/* ── Boutons ── */
button,.btn{font-family:inherit;cursor:pointer;border:none;border-radius:11px;padding:13px 22px;font-size:15.5px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s,border-color .2s,color .2s;position:relative}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 10px 22px -10px rgba(22,32,53,.55)}
.btn-primary:hover{background:var(--navy2);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(22,32,53,.6)}
.btn-or{background:linear-gradient(135deg,var(--or-bright),var(--or) 55%,var(--or-deep));color:#241c07;font-weight:600;box-shadow:0 12px 26px -10px rgba(169,134,47,.55);overflow:hidden}
.btn-or:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(169,134,47,.6)}
.btn-or::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-100%);transition:transform .7s var(--ease-2)}
.btn-or:hover::after{transform:translateX(100%)}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy);background:var(--paper);transform:translateY(-1px)}
.btn-ghost-dark{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.18)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.btn-sm{padding:9px 15px;font-size:14px;border-radius:9px}
.btn-lg{padding:16px 30px;font-size:17px;border-radius:12px}
.btn-block{width:100%}

/* ── Cartes / pills ── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;background:#efece2;color:#5b5647;letter-spacing:.01em}
.pill.or{background:#f6edcf;color:#7a611c}
.pill.navy{background:#e6eaf2;color:var(--navy)}
.pill.ok{background:#e0f0e7;color:var(--ok)}
.pill.warn{background:#f7ecd7;color:var(--warn)}
.pill.err{background:#f6e0e0;color:var(--err)}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--or-deep);font-weight:600;padding:7px 15px;border:1px solid rgba(169,134,47,.3);border-radius:999px;background:rgba(201,168,76,.08)}
.kicker.on-dark{color:var(--or-bright);border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.08)}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2.4s ease-in-out 3 both}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

/* ── Navigation ── */
.nav{position:sticky;top:0;z-index:var(--z-header);background:rgba(250,249,245,.86);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line);padding:14px clamp(18px,4vw,40px);transition:box-shadow .35s var(--ease),background .35s var(--ease)}
.nav.scrolled{background:rgba(250,249,245,.95);box-shadow:0 10px 28px -20px rgba(12,19,34,.3)}
.nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .logo{width:38px;height:38px;border-radius:11px;background:radial-gradient(120% 120% at 30% 25%,var(--or-bright),var(--or) 45%,var(--or-deep));display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(169,134,47,.65),inset 0 1px 1px rgba(255,255,255,.5);flex:none}
.brand b{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;color:var(--navy);letter-spacing:.2px}
.brand b span{color:var(--or-deep)}
.brand small{display:block;color:var(--muted);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;margin-top:-2px}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav-links a{color:var(--navy);text-decoration:none;font-size:15px;font-weight:500;padding:9px 13px;border-radius:9px;transition:background .2s}
.nav-links a:hover{background:rgba(22,32,53,.06)}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-burger{display:none;width:38px;height:38px;padding:0;border-radius:9px;background:transparent;border:1px solid var(--line);flex:none}
.nav-burger svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round}
@media(max-width:920px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(18px,4vw,40px) 14px;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 4px;border-bottom:1px solid var(--line-soft)}
  .nav-burger{display:inline-flex}
  .nav{position:sticky}
  .nav-inner{position:relative}
}

/* ── Footer ── */
.site-footer{background:var(--navy-deep);color:#c3ccdb;padding:40px 0 22px}
.site-footer .container{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px}
@media(max-width:820px){.site-footer .container{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.site-footer .container{grid-template-columns:1fr}}
.site-footer h5{color:#fff;font-family:'Outfit';font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin:0 0 14px}
.site-footer a{color:#a6b1c4;text-decoration:none;font-size:14px;display:block;margin-bottom:9px;transition:color .2s}
.site-footer a:hover{color:var(--or-bright)}
.site-footer .fbrand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.site-footer .fbrand b{color:#fff;font-family:'Cormorant Garamond',serif;font-size:20px}
.site-footer p.fdesc{color:#8b97ac;font-size:13.5px;max-width:34ch;line-height:1.6}
.foot-bottom{max-width:1180px;margin:34px auto 0;padding:20px clamp(18px,4vw,40px) 0;border-top:1px solid rgba(255,255,255,.08);color:#7c88a0;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ── Sections / titres ──
   Resserré le 23/07/2026 (retour "trop aéré" : trop de défilement pour lire
   la même info). Voir PRODUCT.md #4 "Densité avant élégance vide". */
.section{padding:clamp(38px,5.5vw,72px) 0}
.section-head{max-width:640px}
.section-head.center{margin:0 auto;text-align:center}
.eyebrow{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--or-deep);font-weight:600;margin-bottom:10px}
.eyebrow.on-dark{color:var(--or-bright)}
h2.h-lg{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h1.h-xl{font-size:clamp(2.3rem,5vw,4rem)}
.lede{color:var(--muted);font-size:1.04rem;margin-top:10px;max-width:56ch}
.lede.on-dark{color:#b7c1d2}

/* ── Atmosphère du hero : halo statique (jamais animé) pour sortir du fond plat ── */
header.section{position:relative;isolation:isolate}
header.section::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-8% -6% auto -6%;height:64%;
  background:
    radial-gradient(48% 60% at 18% 10%, rgba(201,168,76,.20), transparent 70%),
    radial-gradient(42% 55% at 92% -4%, rgba(22,32,53,.14), transparent 72%);
}

/* Halo doré derrière la fenêtre-témoin : l'objet le plus "réel" de la page mérite de la lumière */
.reveal:has(.mockwin){position:relative;isolation:isolate}
.reveal:has(.mockwin)::before{
  content:"";position:absolute;inset:-44px;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 55% at 50% 32%, rgba(201,168,76,.34), transparent 72%);
  filter:blur(34px);
}

/* ── Section sombre (registre unique de preuve produit) ── */
.dark{background:radial-gradient(130% 100% at 80% -10%,#233457 0%,#162035 46%,#0c1322 100%);color:#eef1f7}
.dark h2,.dark h3,.dark .serif{color:#fff}
.dark a{color:var(--or-bright)}

/* ── Grilles réutilisables ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}
@media(max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr}}

/* Grilles asymétriques ad hoc (hero, sections alternées) déclarées en inline-style :
   la classe .split n'a qu'un rôle, forcer l'empilement en dessous de 860px (elles
   n'avaient jusqu'ici aucun repli mobile — colonnes écrasées côte à côte). */
@media(max-width:860px){.split{grid-template-columns:1fr!important}}

/* ── Cartes fonctionnalités / douleurs ── */
.feat-card{padding:18px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(201,168,76,.4)}
.feat-card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.28);margin-bottom:14px}
.feat-card .ic svg{width:24px;height:24px;fill:none;stroke:var(--or-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feat-card h4{margin:0 0 6px;font-size:17.5px;font-weight:600;color:var(--navy)}
.feat-card p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}

.feat-card.on-dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
.feat-card.on-dark h4{color:#fff}
.feat-card.on-dark p{color:#a6b1c4}
.feat-card.on-dark .ic{background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.24)}
.feat-card.on-dark .ic svg{stroke:var(--or-bright)}

.pain-row{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;border-radius:15px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.pain-row:hover{transform:translateX(6px);box-shadow:var(--shadow);border-color:rgba(201,168,76,.4)}
.pain-row .px{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(178,58,58,.08);border:1px solid rgba(178,58,58,.18)}
.pain-row .px svg{width:22px;height:22px;fill:none;stroke:var(--err);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pain-row b{display:block;color:var(--navy);font-weight:600;font-size:16.5px;margin-bottom:3px}
.pain-row .cause{color:var(--muted);font-size:14px;margin:0 0 6px}
.pain-row .cons{color:var(--err);font-size:13.5px;font-weight:500;margin:0}
.pain-row .cons b{display:inline;color:var(--err);font-size:13.5px}

/* ── Étapes numérotées ── */
.step-card{position:relative;padding:20px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.step-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.step-card .n{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:700;color:var(--navy-deep);width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 25%,var(--or-bright),var(--or-deep));box-shadow:0 8px 18px -8px rgba(169,134,47,.6)}
.step-card h3{font-size:22px;margin:16px 0 6px;color:var(--navy)}
.step-card p{color:var(--muted);font-size:15px;margin:0}

/* ── Démo animée 3 étapes (mini-vidéo du parcours, cf. comment-ca-marche.html) ──
   Onglets cliquables + défilement auto (barre de progression = durée du plan).
   Pause au survol/focus. prefers-reduced-motion : pas de cycle auto, pas de barre. */
.stepdemo{border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
.stepdemo-tabs{display:flex;border-bottom:1px solid var(--line)}
.sdtab{flex:1;background:transparent;border:none;border-radius:0;padding:13px 8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;position:relative;transition:color .25s;display:flex;align-items:center;justify-content:center;gap:7px}
.sdtab .sdn{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;background:var(--line-soft);color:var(--muted);font-size:11px;font-weight:700;transition:background .25s,color .25s}
.sdtab.active{color:var(--navy)}
.sdtab.active .sdn{background:var(--or);color:#241c07}
.sdtab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.sdtab.active::after{transform:scaleX(1)}
.stepdemo-stage{position:relative;min-height:246px}
.sdpane{position:absolute;inset:0;padding:22px;opacity:0;pointer-events:none;transform:translateX(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sdpane.active{position:relative;opacity:1;pointer-events:auto;transform:none}
.stepdemo-progress{height:3px;background:var(--line-soft)}
.stepdemo-progress>span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--or-bright),var(--or-deep))}
.stepdemo-progress.playing>span{animation:sdprogress 4.6s linear forwards}
@keyframes sdprogress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sd-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.sd-files{display:flex;flex-wrap:wrap;gap:7px;max-width:230px;align-content:flex-start}
.sd-arrow{width:22px;height:22px;flex:none;fill:none;stroke:var(--or-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;align-self:center}
.sd-extract{flex:1;min-width:180px}
.sd-extract-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.sd-crit-name{font-size:12px;color:var(--muted);margin:2px 0 8px}
.sd-checklist{display:grid;gap:8px}
.sd-check{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 13px;border-radius:11px;background:var(--bg);border:1px solid var(--line);font-size:13.5px;color:var(--ink)}
.gauge-sm{width:92px;height:92px}
.gauge-sm .val b{font-size:26px}
@media(max-width:680px){.stepdemo-stage{min-height:340px}.sdtab{font-size:11.5px;padding:11px 4px}.sdtab span:not(.sdn){display:none}}

/* ── Flux "trajet d'un document" (securite-confidentialite.html) ── */
.sec-flow{display:flex;flex-wrap:wrap}
@media(max-width:760px){.sec-flow{flex-direction:column;align-items:center!important}.sec-flow-arrow{transform:rotate(90deg);margin-top:4px!important}}
@media (prefers-reduced-motion:reduce){.stepdemo-progress{display:none}.sdpane{transition:none}}

/* ── Jauges (report gauges), réutilisées partout ── */
.gauge{--v:0;--c:var(--or);width:150px;height:150px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--c) calc(var(--v)*1%), #ece8dc 0);transition:--v 1.4s var(--ease);box-shadow:0 18px 38px -20px rgba(22,32,53,.35)}
.gauge::before{content:"";position:absolute;inset:13px;border-radius:50%;background:#fff;box-shadow:inset 0 2px 10px rgba(22,32,53,.06)}
.gauge .val{position:relative;text-align:center;z-index:1}
.gauge .val b{font-family:'Cormorant Garamond',serif;font-size:41px;color:var(--navy);display:block;line-height:1}
.gauge .val small{color:var(--muted);font-size:11.5px;letter-spacing:.04em}
.gauge.on-dark::before{background:#14203a}
.gauge.on-dark .val b{color:#fff}
.gauge.on-dark .val small{color:#9fabbe}
.mgauge{--v:0;--c:var(--or-bright);width:112px;height:112px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--c) calc(var(--v)*1%),rgba(255,255,255,.1) 0);transition:--v 1.4s var(--ease)}
.mgauge::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#14203a}
.mgauge .mv{position:relative;text-align:center;color:#fff}
.mgauge .mv b{font-family:'Cormorant Garamond',serif;font-size:28px;display:block;line-height:1}
.mgauge .mv span{font-size:10px;color:#9fabbe;letter-spacing:.05em}

/* ── Barres de critère ── */
.crit-bar{height:9px;border-radius:5px;background:#ece8dc;overflow:hidden;margin:7px 0}
.crit-bar>span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--or-bright),var(--or-deep));border-radius:5px;transition:transform 1.1s var(--ease)}
.crit-bar.on-dark{background:rgba(255,255,255,.1)}
.lvl{font-size:11px;font-weight:600;padding:3px 10px;border-radius:7px}
.lvl.excellent,.lvl.conforme{background:#e0f0e7;color:var(--ok)}
.lvl.partiel{background:#f7ecd7;color:var(--warn)}
.lvl.insuffisant,.lvl.absent{background:#f6e0e0;color:var(--err)}

/* ── Fenêtre-témoin (mockup produit) ── */
.mockwin{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-lg);background:var(--navy-deep)}
.mockwin-bar{background:var(--navy-deep);padding:12px 18px;display:flex;align-items:center;gap:7px}
.mwdot{width:9px;height:9px;border-radius:50%;display:inline-block;opacity:.85}
.mwurl{margin-left:10px;color:#8b97ac;font-size:12px;letter-spacing:.02em}
.mockwin-body{background:var(--bg);padding:clamp(16px,3vw,28px)}
.rtable{border-collapse:collapse;width:100%;font-size:13.5px;margin:8px 0}
.rtable th{background:#eef1f6;color:var(--navy);text-align:left;padding:9px 11px;border:1px solid #d7dbe3;font-weight:600}
.rtable td{padding:9px 11px;border:1px solid #e6e9ef;vertical-align:top}
.st-ok{color:var(--ok);font-weight:600}.st-no{color:var(--err);font-weight:600}.st-mid{color:var(--warn);font-weight:600}
.crit-block{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;background:#fff;box-shadow:var(--shadow-sm)}
.plan-box{border:1px solid var(--or-soft);padding:12px 16px;margin-top:8px;background:linear-gradient(180deg,#fdfaf1,#fbf7ec);border-radius:12px}

/* ── Tarifs ──
   NB : les surcharges de breakpoint doivent lister chaque variante .tiers-N,
   sinon le sélecteur à 2 classes (.pricing-grid.tiers-5) reste plus spécifique
   que .pricing-grid seul et bloque la grille à 3 colonnes jusqu'à 0px de large. */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.pricing-grid.tiers-5{grid-template-columns:repeat(5,1fr)}
.pricing-grid.tiers-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1200px){.pricing-grid.tiers-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.pricing-grid,.pricing-grid.tiers-5,.pricing-grid.tiers-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pricing-grid,.pricing-grid.tiers-5,.pricing-grid.tiers-3{grid-template-columns:1fr}}
#abonnement,#unite,#tarifs-home{scroll-margin-top:96px}
.pricing-chooser{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
@media(max-width:760px){.pricing-chooser{grid-template-columns:1fr}}
.chooser-card{display:flex;flex-direction:column;gap:6px;padding:26px 28px;border-radius:18px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.chooser-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(201,168,76,.4)}
.chooser-card .cc-label{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em}
.chooser-card .cc-price{font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--navy);line-height:1;margin-top:4px}
.chooser-card .cc-price small{font-size:14px;color:var(--muted);font-family:'Outfit';font-weight:400}
.chooser-card .cc-desc{color:var(--muted);font-size:14px;line-height:1.55;margin:4px 0 6px}
.chooser-card .cc-link{color:var(--or-deep);font-size:13.5px;font-weight:600}
.chooser-card:hover .cc-link{text-decoration:underline}
.pricing-unit-head{text-align:center;margin:56px 0 0}
.pricing-unit-head h2{margin:0}
.pricing-unit-head p{color:var(--muted);margin:8px 0 0}
.price-card{position:relative;display:flex;flex-direction:column;height:100%;padding:28px 22px;border-radius:18px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(201,168,76,.4)}
.price-card.star{border-color:var(--or);box-shadow:0 24px 50px -26px rgba(201,168,76,.45)}
.price-card .pt{color:var(--muted);font-size:14.5px;font-weight:500;min-height:18px}
.price-card .pp{font-family:'Cormorant Garamond',serif;font-size:46px;color:var(--navy);line-height:1;margin:10px 0 2px}
.price-card .pp small{font-size:15px;color:var(--muted);font-family:'Outfit'}
.price-card .pd{color:var(--muted);font-size:12.5px;min-height:54px;margin-bottom:16px;display:flex;align-items:center;justify-content:center}
.price-card .tagbest,.price-card .tagsoon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;padding:4px 13px;border-radius:999px;white-space:nowrap}
.price-card .tagbest{background:linear-gradient(135deg,var(--or-bright),#a9862f);color:var(--navy-deep)}
.price-card .tagsoon{background:linear-gradient(135deg,#9aa0af,#5b6072);color:#fff}
.price-card ul{flex:1 0 auto;list-style:none;margin:14px 0 0;padding:0;text-align:left;font-size:13px;color:var(--muted)}
.price-card ul li{display:flex;gap:8px;margin-bottom:7px;align-items:flex-start}
.price-card ul li svg{width:15px;height:15px;flex:none;margin-top:2px;stroke:var(--ok);fill:none;stroke-width:2}
.price-card ul li.limit svg{stroke:var(--muted)}
.price-card ul li.limit{color:var(--muted)}
.price-card ul li.soon svg{stroke:var(--muted)}
.price-card .btn-block{margin-top:16px}
.price-card>.btn-block{margin-top:auto}
.soon-tag{display:inline-block;margin-left:6px;background:linear-gradient(135deg,#9aa0af,#5b6072);color:#fff;font-size:11px;font-weight:600;padding:4px 13px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.pricing-legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:22px 0 0;font-size:12.5px;color:var(--muted)}
.pricing-legend span{display:inline-flex;align-items:center;gap:6px}

/* ── Bandeau CTA final ── */
.cta-band{border-radius:26px;padding:clamp(28px,4.5vw,48px);text-align:center;background:radial-gradient(120% 140% at 50% 0%,#233457 0%,#162035 55%,#0c1322 100%);box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff}
.cta-band .lede{color:#b7c1d2;margin-left:auto;margin-right:auto}
.cta-band .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ── FAQ ── */
.faq-item{border-bottom:1px solid var(--line);padding:15px 0}
.faq-item summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;color:var(--or-deep);font-weight:400;flex:none;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--muted);margin:12px 0 0;font-size:15px;line-height:1.6}

/* ── Fil d'ariane ── */
.breadcrumb{font-size:13px;color:var(--muted);padding:16px 0 0}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb span{margin:0 6px}

/* ── Table comparative (secteurs / contre votre offre) ── */
.cmp-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0;border-bottom:1px solid var(--line)}
.cmp-row.head{font-weight:600;color:var(--navy);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.cmp-row>div{padding:14px 16px;font-size:14.5px}
.cmp-row .no{color:var(--err)}
.cmp-row .yes{color:var(--ok);font-weight:600}

/* ── Amorti d'entrée léger (aperçu produit du hero uniquement, non infini) ── */
@keyframes floaty{0%{transform:translateY(0)}35%{transform:translateY(-9px)}68%{transform:translateY(2px)}100%{transform:translateY(0)}}
.floaty{animation:floaty 2.6s var(--ease) 1 both}

/* ── Reveal au scroll : chorégraphié par type d'élément, pas un fondu uniforme ──
   Base : légère montée. Titres de section : montée plus ample (moment de conviction),
   jamais de flou (illisible pendant la transition + bug de cascade si mal ordonné).
   Fenêtre-témoin / jauges : l'objet le plus "réel" de la page, l'entrée la plus marquée.
   Tous les halos/animations ci-dessous sont à une seule itération : jamais de boucle
   sur un élément visible (voir feedback_infinite_css_animation_screenshot_hang). ── */
.reveal{opacity:1;transform:none}
.motion .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.motion .reveal.in{opacity:1;transform:none}

.motion .section-head.reveal.in,.motion h1.reveal.in,.motion h2.h-lg.reveal.in{transform:none}
.motion .section-head.reveal,.motion h1.reveal,.motion h2.h-lg.reveal{
  transform:translateY(34px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}

.motion .reveal:has(.mockwin).in{transform:none}
.motion .reveal:has(.mockwin){transform:translateY(30px) scale(.95);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}

@keyframes gaugeHalo{
  0%{box-shadow:0 18px 38px -20px rgba(22,32,53,.35),0 0 0 rgba(201,168,76,0)}
  55%{box-shadow:0 18px 38px -20px rgba(22,32,53,.35),0 0 36px -2px rgba(201,168,76,.5)}
  100%{box-shadow:0 18px 38px -20px rgba(22,32,53,.35),0 0 0 rgba(201,168,76,0)}
}
.motion .reveal.in .gauge{animation:gaugeHalo 1.4s var(--ease) 1 both}

@keyframes bandHalo{
  0%{box-shadow:var(--shadow-lg),0 0 0 rgba(201,168,76,0)}
  100%{box-shadow:var(--shadow-lg),0 0 70px -12px rgba(201,168,76,.4)}
}
.motion .cta-band.in{animation:bandHalo 1.7s var(--ease) 1 both}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;filter:none}
}