/* ==========================================================================
   SurValeur V2 — le système de pages
   Couche posée sur style.css (inchangé) : elle reprend le même vocabulaire
   de classes et les mêmes jetons, et lui donne le rendu V2 : titres gravés
   plus légers, en-têtes de page photographiques, cartes vivantes, frise des
   étapes qui se trace au défilement, chiffres qui se comptent.
   ========================================================================== */
:root {
  --ardoise-nuit:#14181C;
  --t-h1: clamp(2.5rem, 1.5rem + 4.2vw, 5.4rem);
  --t-h2: clamp(2rem, 1.35rem + 2.6vw, 3.6rem);
  --t-h3: clamp(1.35rem, 1.18rem + .8vw, 1.85rem);
  --bloc: clamp(4.5rem, 2.8rem + 6.5vw, 9rem);
  --shell: 1260px;
  --radius: 2px;
  --sv-ease: cubic-bezier(.22,1,.36,1);
}

body { background:var(--parchemin); }
::selection { background:var(--dore-clair); color:var(--encre); }

h1, h2, h3, h4 { font-weight:400; font-variation-settings:"opsz" 144, "SOFT" 20, "WONK" 0; }
h1 { font-weight:300; letter-spacing:-.034em; line-height:1; }
h2 { font-weight:300; letter-spacing:-.028em; line-height:1.04; }
h3 { font-weight:400; letter-spacing:-.015em; }
h2 em, h1 em, h1 .or, h2 .or { font-style:italic; color:var(--dore-profond); font-weight:300; }
.section--sombre h2 em, .page-tete h1 em, .page-tete h1 .or, .bandeau-cta h2 em { color:var(--dore-clair); }

/* Les liens du corps : un filet qui se dessine au survol */
main p a:not(.btn):not(.lien-fleche), main li a:not(.btn):not(.lien-fleche):not(.fil a), main dd a:not(.btn) {
  text-decoration:none; color:var(--dore-profond);
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;
  transition:background-size .5s var(--sv-ease), color .3s;
}
main p a:not(.btn):hover, main li a:not(.btn):not(.lien-fleche):hover { background-size:0 1px; background-position:100% 100%; color:var(--terre-profonde); }
.section--sombre p a:not(.btn), .bandeau-cta p a:not(.btn) { color:var(--dore-clair); }

/* --------------------------------------------------------------------------
   Contenants et sections
   -------------------------------------------------------------------------- */
.shell--moyen { max-width:1000px; }
.section--sombre { background:var(--ardoise); position:relative; isolation:isolate; }
.section--sombre::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 60% at 85% 0%, rgba(199,155,82,.14), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(79,195,232,.06), transparent 70%);
}
.section--creme { background:var(--parchemin-creux); }
.section + .section:not(.section--creme):not(.section--sombre):not(.section--pierre) { padding-top:calc(var(--bloc) * .55); }

/* Le surtitre : un trait qui se trace avant le texte */
.surtitre { font-size:.72rem; letter-spacing:.2em; margin-bottom:1.4rem; }
.surtitre::before { width:34px; height:1px; transform-origin:left; transition:transform .9s var(--sv-ease) .1s; }
.sv-anime .surtitre:not(.sv-vu)::before { transform:scaleX(0); }

.chapo { font-size:clamp(1.08rem, 1rem + .4vw, 1.32rem); line-height:1.6; }
.exergue {
  font-weight:300; font-size:clamp(1.45rem, 1.1rem + 1.4vw, 2.4rem); line-height:1.22; letter-spacing:-.015em;
  border-left:0; padding:0 0 0 clamp(1.4rem,1rem + 2vw,3rem); position:relative; max-width:30ch; margin:3.2rem 0;
}
.exergue::before { content:"«"; position:absolute; left:0; top:-.15em; font-size:1.6em; color:var(--dore); line-height:1; }

/* --------------------------------------------------------------------------
   Boutons : un aplat qui monte au survol
   -------------------------------------------------------------------------- */
.btn { position:relative; overflow:hidden; isolation:isolate; border-radius:2px; padding:1rem 1.55rem; transition:color .45s var(--sv-ease), border-color .3s, transform .3s; }
.btn:hover { transform:none; }
.btn::after { content:""; position:absolute; inset:0; z-index:-1; transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--sv-ease); }
.btn:hover::after, .btn:focus-visible::after { transform:scaleY(1); }
.btn--or { background:var(--dore-bouton); border-color:var(--dore-bouton); }
.btn--or::after { background:var(--encre); }
.btn--or:hover { background:var(--dore-bouton); color:var(--creme); }
.section--sombre .btn--or::after, .page-tete .btn--or::after, .bandeau-cta .btn--or::after { background:var(--creme); }
.section--sombre .btn--or:hover, .page-tete .btn--or:hover, .bandeau-cta .btn--or:hover, .section--sombre a.btn--or:hover { color:var(--encre); }
.btn--encre::after { background:var(--dore-bouton); }
.btn--encre:hover { background:var(--ardoise); color:var(--encre); }
.btn--fantome::after { background:currentColor; opacity:.1; }
.btn--fantome:hover { background:transparent; }
.lien-fleche { gap:.6rem; }
.lien-fleche::after { transition:transform .45s var(--sv-ease); }

/* --------------------------------------------------------------------------
   En-tête de page : la planche photographique
   L'image de la rubrique se pose en fond, voilée d'ardoise ; le titre monte
   ligne à ligne, l'image glisse plus lentement que la page.
   -------------------------------------------------------------------------- */
.page-tete, .blog-tete {
  position:relative; overflow:hidden; isolation:isolate; background:var(--ardoise-nuit); color:var(--creme);
  padding-block:calc(var(--sv-h, 76px) + clamp(3rem, 2rem + 5vw, 7rem)) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  border-bottom:0;
  min-height:min(88svh, 52rem); display:flex; flex-direction:column; justify-content:flex-end;
}
.page-tete::after { display:none; }
.page-tete > .shell, .blog-tete > .shell { position:relative; z-index:2; width:100%; }
.sv-fond { position:absolute; inset:0; z-index:0; overflow:hidden; }
.sv-fond img { position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; opacity:.5; filter:saturate(.8) contrast(1.05); will-change:transform; }
.sv-fond::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,24,28,.94) 0%, rgba(20,24,28,.78) 42%, rgba(20,24,28,.35) 100%),
             linear-gradient(0deg, rgba(20,24,28,.95) 0%, transparent 45%);
}
.sv-fond__trame { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(90deg, rgba(240,228,208,.045) 1px, transparent 1px); background-size:72px 100%; }
.sv-fond__arc { position:absolute; z-index:1; right:-4%; bottom:8%; width:min(60vw,820px); height:auto; color:var(--dore-clair); opacity:.55; pointer-events:none; }
.sv-fond__arc path { fill:none; stroke:currentColor; stroke-width:1; vector-effect:non-scaling-stroke; }
.page-tete h1, .blog-tete h1 { max-width:18ch; color:var(--parchemin); font-size:var(--t-h1); }
.page-tete--guide h1 { max-width:14ch; }
.page-tete .chapo, .blog-tete .chapo { color:#D3CBBD; max-width:52ch; }
.planche__sous { color:#CFC7B8; }
.page-tete .fil, .blog-tete .fil { margin-bottom:2.2rem; }
.fil a { background:none !important; }
.fil ol { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.page-tete .cartouche, .page-tete .hero__cartouche {
  background:rgba(20,24,28,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-color:rgba(199,155,82,.3);
}
.page-tete .cartouche > div { border-color:rgba(199,155,82,.22); }
.sv-tete__ligne { display:block; overflow:hidden; padding-bottom:.06em; }
.sv-tete__ligne > span { display:inline-block; }
.sv-temps { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem; font:500 .68rem/1 var(--font-data); letter-spacing:.16em; text-transform:uppercase; color:var(--gris-clair); }
.sv-temps::before { content:""; width:7px; height:7px; border:1px solid var(--dore-clair); transform:rotate(45deg); }

/* --------------------------------------------------------------------------
   Grille « élévation » : le cartouche devient une carte de repère
   -------------------------------------------------------------------------- */
.elevation__appui { border-top-width:2px; padding:1.4rem 1.5rem 1.6rem; font-weight:400; box-shadow:0 30px 60px -38px rgba(20,24,28,.9); }

/* --------------------------------------------------------------------------
   Cartes : elles se soulèvent, un filet d'or court sous leur titre
   -------------------------------------------------------------------------- */
.carte { border-radius:2px; position:relative; transition:border-color .4s, box-shadow .6s var(--sv-ease), transform .6s var(--sv-ease); }
.carte::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--dore); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--sv-ease); }
a.carte:hover { transform:translateY(-4px); box-shadow:0 30px 60px -36px rgba(36,31,25,.55); border-color:var(--pierre-claire); }
a.carte:hover::after { transform:scaleX(1); }
.carte h3 { font-weight:400; }
.carte--pilier { border-top-width:3px; }
.section--sombre .carte { background:rgba(38,45,52,.72); }
.section--sombre a.carte:hover { box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.carte--image, .carte--une { overflow:hidden; }
.carte__vignette { transition:transform 1.2s var(--sv-ease); }
a.carte:hover .carte__vignette { transform:scale(1.05); }

/* --------------------------------------------------------------------------
   Chiffres clés
   -------------------------------------------------------------------------- */
.chiffres { border-radius:2px; }
.chiffre { padding:1.8rem 1.5rem; }
.chiffre b { font-weight:300; font-size:clamp(2.2rem,1.5rem + 2.6vw,3.6rem); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.hero__cartouche dt { font-weight:300; font-size:2rem; }

/* --------------------------------------------------------------------------
   Les deux rives
   -------------------------------------------------------------------------- */
.rives { border:0; background:transparent; gap:clamp(.8rem,.5rem + 1vw,1.6rem); }
.rive { border-radius:2px; padding:clamp(1.6rem,1.2rem + 2vw,3rem); position:relative; overflow:hidden; }
.rive--cedant { background:linear-gradient(160deg,#F6E6DA 0%, var(--parchemin) 70%); border-top:3px solid var(--terracotta); }
.rive--repreneur { background:linear-gradient(200deg,#E7EFF1 0%, var(--parchemin) 70%); border-top:3px solid var(--bleu-tech); }
.section--sombre .rive--cedant { background:linear-gradient(160deg,#3A2418 0%, #221A16 70%); }
.section--sombre .rive--repreneur { background:linear-gradient(200deg,#13313A 0%, #17232A 70%); border-top-color:var(--bleu-tech); }
.rive .peur { font-weight:300; font-size:clamp(1.2rem,1rem + .8vw,1.6rem); }

/* --------------------------------------------------------------------------
   Listes et frise des étapes
   -------------------------------------------------------------------------- */
.liste-preuves li::before { width:7px; height:7px; border-width:1px; }
.sequence { position:relative; gap:2.2rem; padding-left:0; }
.sequence li { grid-template-columns:4.2rem 1fr; position:relative; }
.sequence li::before {
  border-top:0; padding-top:0; width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--dore); background:var(--parchemin); position:relative; z-index:1; font-size:.78rem;
  transition:background-color .5s, color .5s;
}
.section--creme .sequence li::before { background:var(--parchemin-creux); }
.section--sombre .sequence li::before { background:var(--ardoise); }
.sequence.sv-frise::after { content:""; position:absolute; left:1.3rem; top:1.3rem; bottom:1.3rem; width:1px; background:var(--pierre-claire); z-index:0; }
.sequence.sv-frise::before { content:""; position:absolute; left:1.3rem; top:1.3rem; bottom:1.3rem; width:1px; background:var(--dore); z-index:0; transform:scaleY(var(--sv-p,0)); transform-origin:top; }
.sequence li.sv-passe::before { background:var(--dore); color:var(--encre); }
.sequence h4 { font-weight:400; font-size:var(--t-h4); }

/* --------------------------------------------------------------------------
   Tableaux, définitions, réponses courtes, sources
   -------------------------------------------------------------------------- */
.tableau-cadre { border-radius:2px; box-shadow:0 24px 50px -40px rgba(36,31,25,.6); }
thead th { background:var(--ardoise); color:var(--creme); }
tbody tr { transition:background-color .3s; }
tbody tr:hover { background:var(--parchemin-creux); }
.definition { border-left:0; background:var(--parchemin-creux); position:relative; padding-left:clamp(1.5rem,1.2rem + 1.4vw,2.4rem); }
.definition::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--dore),var(--dore-clair)); transform-origin:top; }
.definition dd { font-family:var(--font-titre); font-weight:300; font-size:clamp(1.15rem,1rem + .55vw,1.45rem); }
.definition dd + dd { font-family:var(--font-texte); }
.reponse-courte { border:0 !important; border-left:3px solid var(--dore) !important; background:linear-gradient(100deg,rgba(192,138,62,.10),rgba(192,138,62,.03) 70%) !important; color:var(--ardoise) !important; padding:1.3rem 1.6rem !important; border-radius:0 3px 3px 0; position:relative; opacity:1 !important; visibility:visible !important; }
.reponse-courte, .reponse-courte * { color:var(--ardoise); }
.reponse-courte b { color:var(--dore) !important; opacity:1 !important; }
.sources { border-left-width:2px !important; background:transparent !important; font-size:.86rem !important; color:var(--encre-douce); }
.bloc-auteur { border:0 !important; background:var(--parchemin-creux) !important; padding:1.5rem 1.6rem !important; align-items:center !important; border-left:3px solid var(--dore) !important; }
.bloc-auteur img { width:72px !important; height:72px !important; filter:saturate(.9); }
.maillage h2 { font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem); }
.maillage ul { gap:0 1.6rem !important; }
.maillage li { padding:.75rem 0 .75rem 1.1rem !important; border-bottom:1px solid var(--pierre-voile); }
.maillage li::before { top:1.25em !important; }

/* --------------------------------------------------------------------------
   Offres
   -------------------------------------------------------------------------- */
.offre { transition:transform .6s var(--sv-ease), box-shadow .6s var(--sv-ease); }
.offre:hover { transform:translateY(-4px); box-shadow:0 34px 60px -40px rgba(36,31,25,.65); }
.offre__prix { font-weight:300; font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem); }
.offre--phare { background:var(--ardoise) !important; color:var(--creme); border-color:var(--dore) !important; }
.offre--phare h3, .offre--phare .offre__prix { color:var(--parchemin); }
.offre--phare p, .offre--phare li { color:#C9C1B3; }
.offre--phare .offre__mention, .offre--phare .offre__prix small, .offre--phare .offre__barre { color:var(--gris-clair); }
.offre--phare .btn--fantome { color:var(--creme); border-color:rgba(240,228,208,.45); }

/* --------------------------------------------------------------------------
   FAQ : ouverture en douceur
   -------------------------------------------------------------------------- */
.faq { border-top:1px solid var(--pierre-claire); }
.faq details { border-bottom:1px solid var(--pierre-claire); }
.faq summary { font-weight:400; padding:1.45rem 3rem 1.45rem 0; transition:color .3s, padding .5s var(--sv-ease); }
.faq summary:hover { padding-left:.4rem; }
.faq summary::after { content:"+"; border:0; transform:none; width:auto; height:auto; top:1.2rem; right:.2rem; font:300 1.8rem/1 var(--font-titre); color:var(--dore); transition:transform .5s var(--sv-ease); }
.faq details[open] summary::after { transform:rotate(45deg); top:1.2rem; }
.faq__reponse { overflow:hidden; }

/* --------------------------------------------------------------------------
   Bandeau d'appel à l'action
   -------------------------------------------------------------------------- */
.bandeau-cta { background:var(--ardoise-nuit); border-top:0; position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(4.5rem,3rem + 5vw,8rem); }
.bandeau-cta::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 100% 100%, rgba(199,155,82,.2), transparent 70%); }
.bandeau-cta::after { content:""; position:absolute; left:0; top:0; height:1px; width:100%; background:linear-gradient(90deg, transparent, var(--dore-clair), transparent); }
.bandeau-cta h2 { font-size:clamp(2.2rem,1.4rem + 3vw,4rem); max-width:16ch; }

/* --------------------------------------------------------------------------
   Illustrations : révélées par un volet
   -------------------------------------------------------------------------- */
.illustration img { border-radius:2px; }
.coupe__cadre { border-radius:2px; }

/* --------------------------------------------------------------------------
   Article : une mesure confortable
   -------------------------------------------------------------------------- */
.prose { font-size:clamp(1.04rem,1rem + .2vw,1.14rem); }
.prose > p:first-of-type { font-size:1.12em; color:var(--encre); }
.prose h2 { margin-top:3.6rem; padding-top:1.2rem; border-top:1px solid var(--pierre-claire); scroll-margin-top:calc(var(--sv-h) + 1rem); }
.prose h3 { margin-top:2.4rem; }
main h2[id], main h3[id] { scroll-margin-top:calc(var(--sv-h, 76px) + 1.5rem); }
.encadre-btp { background:var(--parchemin-creux) !important; border-left:3px solid var(--dore) !important; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.champ input, .champ select, .champ textarea { border-radius:2px; padding:.95rem 1rem; background:#FFFDF9; }
.panneau-formulaire { border-radius:2px; border-top-width:2px; box-shadow:0 40px 80px -50px rgba(36,31,25,.6); }

/* Formulaires en étapes (ajoutés par v2.js) */
.sv-etapes__entete { display:flex; gap:.5rem; margin:0 0 1.8rem; grid-column:1 / -1; counter-reset:e; }
.sv-etapes__entete button {
  flex:1; display:grid; gap:.5rem; text-align:left; background:none; border:0; padding:0; cursor:pointer; counter-increment:e;
  font:500 .68rem/1.3 var(--font-data); letter-spacing:.1em; text-transform:uppercase; color:var(--gris-texte);
}
.sv-etapes__entete button::before { content:""; height:3px; background:var(--pierre-claire); transition:background-color .5s; }
.sv-etapes__entete button[aria-current="step"], .sv-etapes__entete button.est-fait { color:var(--encre); }
.sv-etapes__entete button[aria-current="step"]::before, .sv-etapes__entete button.est-fait::before { background:var(--dore); }
.sv-etape { display:contents; }
.sv-etape[hidden] { display:none !important; }
.sv-etapes__nav { grid-column:1 / -1; display:flex; justify-content:space-between; gap:.8rem; margin-top:.4rem; }
.sv-etapes__nav[hidden] { display:none; }
.sv-entre { animation:sv-entre .6s var(--sv-ease) both; }
@keyframes sv-entre { from { opacity:0; transform:translateX(18px); } }

/* --------------------------------------------------------------------------
   Blog : filtres, recherche, cartes
   -------------------------------------------------------------------------- */
.sv-blog__outils { display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; margin:0 0 2.6rem; padding-bottom:1.6rem; border-bottom:1px solid var(--pierre-claire); }
.sv-blog__filtres { display:flex; flex-wrap:wrap; gap:.45rem; }
.sv-blog__filtres button {
  font:500 .72rem/1 var(--font-data); letter-spacing:.1em; text-transform:uppercase; padding:.7rem .95rem; cursor:pointer;
  border:1px solid var(--pierre-claire); background:transparent; color:var(--encre-douce); border-radius:2px; transition:all .35s;
}
.sv-blog__filtres button:hover { border-color:var(--dore); color:var(--encre); }
.sv-blog__filtres button[aria-pressed="true"] { background:var(--ardoise); border-color:var(--ardoise); color:var(--creme); }
.sv-blog__filtres button span { opacity:.55; margin-left:.35rem; }
.sv-blog__cherche { position:relative; flex:1 1 18rem; max-width:24rem; }
.sv-blog__cherche input { width:100%; padding:.85rem 1rem .85rem 2.6rem; border:1px solid var(--pierre-claire); border-radius:2px; background:#FFFDF9; font:inherit; }
.sv-blog__cherche input:focus { outline:none; border-color:var(--dore); }
.sv-blog__cherche svg { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--dore-profond); }
.sv-blog__vide { padding:2rem 0; color:var(--gris-texte); }
.sv-blog__compte { font:500 .7rem/1 var(--font-data); letter-spacing:.12em; text-transform:uppercase; color:var(--gris-texte); }
.carte[data-sv-cache] { display:none !important; }

/* --------------------------------------------------------------------------
   Révélations (pilotées par GSAP ; sans script, tout reste visible)
   -------------------------------------------------------------------------- */
.reveler { transition-duration:1s !important; }
@media (prefers-reduced-motion:reduce) {
  .sv-anime .surtitre:not(.sv-vu)::before { transform:none; }
  .sequence.sv-frise::before { transform:none; }
}

/* --------------------------------------------------------------------------
   Pied de page de l'ancienne maquette : masqué s'il subsiste
   -------------------------------------------------------------------------- */
.site-header, .site-footer { display:none !important; }

/* Le premier bloc de la page passe sous l'en-tête fixe */
main > :first-child:not(.page-tete):not(.blog-tete):not(.hero):not(.sv-vitrine) { margin-top:var(--sv-h, 76px); }
.hero { padding-top:calc(var(--sv-h, 76px) + clamp(2.4rem,1.4rem + 3.6vw,4rem)); }

/* --------------------------------------------------------------------------
   Héros des pages outils (autodiagnostic, partenaires) : même planche sombre
   -------------------------------------------------------------------------- */
.hero.sv-hero-sombre { background:var(--ardoise-nuit); color:var(--creme); position:relative; overflow:hidden; isolation:isolate;
  padding-block:calc(var(--sv-h, 76px) + clamp(3rem,2rem + 5vw,7rem)) clamp(3.5rem,2.5rem + 4vw,6.5rem); }
.hero.sv-hero-sombre > .shell { position:relative; z-index:2; }
.sv-hero-sombre h1 { color:var(--parchemin); }
.sv-hero-sombre h1 .or { color:var(--dore-clair); }
.sv-hero-sombre .chapo { color:#D3CBBD; }
.sv-hero-sombre .surtitre { color:var(--dore-clair); }
.sv-hero-sombre .btn--fantome { color:var(--creme); border-color:rgba(240,228,208,.45); }
.sv-hero-sombre .hero__cartouche { border-top-color:var(--dore-clair); background:rgba(20,24,28,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:1.4rem; }
.sv-hero-sombre .hero__cartouche dt { color:var(--dore-clair); }
.sv-hero-sombre .hero__cartouche dd { color:#CFC7B8; }
.sv-hero-sombre .coupe__cadre { border-color:rgba(240,228,208,.15); }

/* --------------------------------------------------------------------------
   Autodiagnostic V2 : une question à la fois, plus de relief
   (couche posée sur les styles propres de la page, sans toucher au moteur)
   -------------------------------------------------------------------------- */
#autodiag .ad-rail-zone { top:0; background:rgba(246,237,223,.92); border-bottom:0; box-shadow:0 18px 30px -28px rgba(36,31,25,.5); }
#autodiag .ad-etp { border-radius:999px; padding:.5rem .95rem; transition:background-color .4s, color .4s, box-shadow .4s; }
#autodiag .ad-etp[data-on="1"] { background:var(--ardoise); border-color:var(--ardoise); color:var(--creme); box-shadow:0 10px 24px -14px rgba(20,24,28,.8); }
#autodiag .ad-etp[data-on="1"] .ad-etp__n { background:var(--dore-clair); }
#autodiag .ad-jauge { height:3px; }
#autodiag .ad-jauge i { background:linear-gradient(90deg, var(--dore), var(--dore-clair)); transition:width .9s var(--sv-ease); }
#autodiag .ad-bloc { border:0; border-top:2px solid var(--dore); border-radius:2px; box-shadow:0 40px 80px -60px rgba(36,31,25,.7); padding:clamp(1.6rem,1.2rem + 2vw,3.2rem); }
#autodiag .ad-bloc h2 { font-weight:300; }
#autodiag .ad-question { font-weight:300; font-size:clamp(1.7rem,1.25rem + 1.8vw,2.7rem); line-height:1.12; letter-spacing:-.025em; max-width:26ch; }
#autodiag .ad-pourquoi { border-left:2px solid var(--dore); font-size:.98rem; }
#autodiag .ad-echelle { gap:.8rem; }
#autodiag .ad-opt {
  position:relative; min-height:9.5rem; padding:1.3rem 1.1rem 1.2rem; display:flex; flex-direction:column; border-radius:2px;
  background:#FFFDF9; overflow:hidden; transition:transform .5s var(--sv-ease), box-shadow .5s var(--sv-ease), border-color .3s, background-color .4s;
}
#autodiag .ad-opt::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--dore); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--sv-ease); }
#autodiag .ad-opt:hover { transform:translateY(-4px); box-shadow:0 24px 40px -28px rgba(36,31,25,.6); }
#autodiag .ad-opt:hover::before, #autodiag .ad-opt[aria-pressed="true"]::before { transform:scaleX(1); }
#autodiag .ad-opt__n { font:300 2.4rem/1 var(--font-titre); color:var(--dore); letter-spacing:-.03em; }
#autodiag .ad-opt__t { font-size:1rem; margin-top:auto; padding-top:1rem; }
#autodiag .ad-opt[aria-pressed="true"] { background:var(--ardoise); transform:translateY(-4px); box-shadow:0 30px 50px -30px rgba(20,24,28,.9); }
#autodiag .ad-opt[aria-pressed="true"] .ad-opt__n { color:var(--dore-clair); }
#autodiag .ad-opt[aria-pressed="true"]::after { content:"✓"; position:absolute; right:.9rem; top:.9rem; width:1.6rem; height:1.6rem; display:grid; place-items:center; border-radius:50%; background:var(--dore-clair); color:var(--encre); font-size:.8rem; animation:sv-coche .5s var(--sv-ease) both; }
@keyframes sv-coche { from { transform:scale(0) rotate(-40deg); } }
#autodiag .ad-map__i { width:1.7rem; border-radius:2px; }
#autodiag .ad-anneau__n { font-weight:300; font-size:3.4rem; }
#autodiag .ad-kpi { border-radius:2px; }
#autodiag .ad-kpi__v { font-weight:400; }
#autodiag .ad-profil { border:0; border-left:3px solid var(--dore); background:var(--parchemin-creux); }
#autodiag input[type=text], #autodiag input[type=number], #autodiag select { background:#FFFDF9; padding:.9rem 1rem; border-radius:2px; }
@media (max-width:760px){ #autodiag .ad-echelle { grid-template-columns:1fr 1fr; } #autodiag .ad-opt { min-height:7.5rem; } }

/* --------------------------------------------------------------------------
   La traversée : le pont se parcourt travée par travée (page Le Pont)
   -------------------------------------------------------------------------- */
.sv-traversee { position:relative; height:100svh; overflow:hidden; background:var(--ardoise-nuit); color:var(--creme); }
.sv-traversee__img { position:absolute; top:-12.5%; left:0; height:125%; width:auto; max-width:none; will-change:transform; }
.sv-traversee::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,24,28,.55) 0%, transparent 22%, transparent 48%, rgba(20,24,28,.94) 100%), linear-gradient(75deg, rgba(20,24,28,.6), transparent 50%); }
.sv-traversee__tete { position:absolute; z-index:2; left:var(--gutter); top:calc(var(--sv-h,76px) + 1.5rem); }
.sv-traversee__tete .surtitre { color:var(--dore-clair); margin:0; }
.sv-traversee__zone { position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); bottom:3rem; }
.sv-travee { position:absolute; left:0; bottom:3rem; max-width:36rem; }
.sv-travee b { display:block; font:500 .72rem/1 var(--font-data); letter-spacing:.18em; text-transform:uppercase; color:var(--c); margin-bottom:.9rem; }
.sv-travee h3 { font:300 clamp(1.9rem,1.3rem + 2.4vw,3.4rem)/1.02 var(--font-titre); letter-spacing:-.02em; color:var(--parchemin); margin:0 0 .7rem; }
.sv-travee h3 small { display:block; font:italic 400 .42em/1.4 var(--font-titre); color:#BFB6A6; margin-top:.35rem; letter-spacing:0; }
.sv-travee p { margin:0 0 .8rem; color:#D9D0C0; max-width:44ch; }
.sv-travee a { font:500 .72rem/1 var(--font-data); letter-spacing:.12em; text-transform:uppercase; color:var(--c) !important; background:none !important; }
.sv-tablier { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.sv-tablier span { height:3px; background:rgba(240,228,208,.16); position:relative; overflow:hidden; }
.sv-tablier span::after { content:""; position:absolute; inset:0; background:var(--c); transform:scaleX(var(--p,0)); transform-origin:left; }
.sv-tablier em { position:absolute; bottom:12px; font:500 .62rem/1 var(--font-data); letter-spacing:.14em; text-transform:uppercase; color:#9E978B; font-style:normal; }
@media (prefers-reduced-motion:reduce){ .sv-traversee { height:auto; } .sv-traversee__img { position:relative; top:0; height:60vh; } .sv-travee { position:relative; bottom:0; margin-bottom:2rem; } .sv-traversee__zone { position:relative; padding:2rem 0 4rem; } }
@media (max-width:640px){ .sv-tablier em { display:none; } }