/* Polices auto-hebergees (RGPD + independance Google) - ajoute le 2026-09-17 */
@font-face{
  font-family:"Figtree";
  font-style:normal;
  /* Police VARIABLE : un seul binaire couvre 300 a 900. Les quatre fichiers
     figtree-400/500/600/800 etaient octet pour octet identiques (20 156 o
     chacun) : 60 468 octets telecharges pour rien. Les fichiers restent sur
     le disque, ils ne sont simplement plus references. */
  font-weight:300 900;
  font-display:swap;
  src:url(/polices/figtree-400.woff2) format("woff2");
}
@font-face{
  font-family:"Spline Sans Mono";
  font-style:normal;
  /* Meme chose : spline-sans-mono-400 et -500 sont le meme binaire (36 476 o),
     variable de 300 a 700. */
  font-weight:300 700;
  font-display:swap;
  src:url(/polices/spline-sans-mono-400.woff2) format("woff2");
}
:root{
  --encre:#0B1A2E;
  --accent:#12B39F;
  --accent-clair:#2ED3BC;
  --accent-fonce:#0A6E61;
  --ligne:#E2EAE8;
  --texte:#26333F;
  --texte-doux:#61707F;
  --fond:#FBFDFC;
  --surface:#FFFFFF;
  --surface-2:#F2F8F7;
  --surface-encre:#0B1A2E;
  --sur-encre:#EAF3F1;
  --sur-encre-doux:#94AAB8;
  --ombre:0 1px 2px rgba(11,26,46,.05), 0 8px 24px -12px rgba(11,26,46,.18);
  --ombre-forte:0 2px 4px rgba(11,26,46,.06), 0 24px 48px -20px rgba(11,26,46,.35);
  --rayon:14px;
  --gouttiere:clamp(16px, 5vw, 40px);
  --colonne:1400px;
  --police:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- Direction visuelle validee le 2026-09-18 ---------------------------
     L'action est TURQUOISE PLEIN (et non plus le vert fonce --accent-fonce,
     qui restait terne sur fond clair). L'ambre est la SECONDE couleur : il
     ne porte jamais une action, seulement une valeur (heure, manque a
     gagner, badge). Ces jetons valent pour tout le site, pas seulement pour
     l'accueil : c'est le socle des lots suivants. */
  --action:#12B39F;
  --action-vive:#3BDCC4;
  --sur-action:#04201C;
  --encre-2:#132844;
  --encre-3:#1D3757;
  --ambre:#FF9A4D;
  --ambre-clair:#FFC489;
  --ambre-encre:#4A2609;
  --ambre-lisible:#A8500C;
  --r-l:24px;
  --ombre-haute:0 28px 70px -34px rgba(11,26,46,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ligne:#1E3448;
    --texte:#E6EDF2;
    --texte-doux:#9AACBB;
    --fond:#08141F;
    --surface:#0F2032;
    --surface-2:#132639;
    --surface-encre:#0A1826;
    --accent:#2ED3BC;
    --accent-fonce:#12B39F;
    --ombre:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --ombre-forte:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
    /* Palette 2026-09-18 en theme sombre : sans ces lignes, l'action et
       l'ambre restaient definis pour le seul theme clair. */
    --action:#2ED3BC;
    --action-vive:#6FEBD8;
    --sur-action:#04201C;
    --ambre:#FFB066;
    --ambre-clair:#FFD2A6;
    --ambre-lisible:#FFB066;
    --ombre-haute:0 28px 70px -34px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ligne:#1E3448;
  --texte:#E6EDF2;
  --texte-doux:#9AACBB;
  --fond:#08141F;
  --surface:#0F2032;
  --surface-2:#132639;
  --surface-encre:#0A1826;
  --accent:#2ED3BC;
  --accent-fonce:#12B39F;
  --ombre:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --ombre-forte:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
  --action:#2ED3BC;
  --action-vive:#6FEBD8;
  --sur-action:#04201C;
  --ambre:#FFB066;
  --ambre-clair:#FFD2A6;
  --ambre-lisible:#FFB066;
  --ombre-haute:0 28px 70px -34px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--police);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{text-wrap:balance;margin:0;color:var(--encre);line-height:1.12;letter-spacing:-.02em}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) h1,
  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3{color:var(--texte)}
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3{color:var(--texte)}
p{margin:0}
a{color:var(--accent-fonce);text-decoration-thickness:1px;text-underline-offset:3px}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent-fonce);outline-offset:3px;border-radius:4px}
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bande{padding-block:clamp(56px,8vw,104px)}
.bande-serree{padding-block:clamp(40px,5vw,64px)}

/* En-tête */
.entete{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)
}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:26px;width:auto;display:block}
.logo .clair{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo .sombre{display:none}
  :root:not([data-theme="light"]) .logo .clair{display:block}
}
:root[data-theme="dark"] .logo .sombre{display:none}
:root[data-theme="dark"] .logo .clair{display:block}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{color:var(--texte-doux);text-decoration:none;font-size:15px;font-weight:500}
.nav a:hover{color:var(--accent-fonce)}
.nav a[aria-current="page"]{color:var(--texte);font-weight:600}
@media (max-width:860px){.nav{display:none}}
@media (prefers-reduced-motion:reduce){
  .bouton:hover{transform:none}
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Hero */
.hero{padding-block:clamp(48px,7vw,88px) clamp(40px,6vw,72px)}
@media (max-width:940px){.hero-grille{grid-template-columns:1fr;gap:40px}}
.hero h1{font-size:clamp(38px,6.4vw,64px);font-weight:800;letter-spacing:-.03em}
.hero .chapo{font-size:clamp(18px,2.2vw,21px);margin-top:20px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Hero simple (pages intérieures) */
.hero-simple{padding-block:clamp(44px,6vw,72px) clamp(8px,2vw,20px)}
.hero-simple h1{font-size:clamp(34px,5.4vw,52px);font-weight:800;letter-spacing:-.03em;max-width:20ch}

/* Fiche d'appel */
.fiche{
  background:var(--surface-encre);color:var(--sur-encre);border-radius:20px;
  padding:26px;box-shadow:var(--ombre-forte);border:1px solid rgba(255,255,255,.07)
}
.pastille{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-clair)
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:420px){.fiche-ligne{grid-template-columns:1fr;gap:2px}}
.coche{flex:0 0 auto;color:var(--accent-clair)}

/* Étapes */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);margin-top:44px;list-style:none;padding:0}
@media (max-width:820px){.etapes{grid-template-columns:1fr;gap:28px}}
.etape{position:relative;padding-top:30px}
.etape::before{
  content:"";position:absolute;top:9px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent) 0 12px,var(--ligne) 12px)
}
.etape:last-child::before{background:linear-gradient(90deg,var(--accent) 0 12px,var(--ligne) 12px 60%,transparent 60%)}
@media (max-width:820px){.etape::before{width:60px;right:auto}}
.etape-num{
  position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;
  background:var(--accent-fonce);color:#fff;font-family:var(--mono);font-size:11px;
  display:flex;align-items:center;justify-content:center;font-weight:500
}
.etape h3{font-size:20px;font-weight:700;margin-bottom:8px}
.etape p{color:var(--texte-doux);font-size:16px}

/* Curseur */
.curseur-bloc{background:var(--surface-2);border-radius:24px;padding:clamp(26px,4vw,44px);border:1px solid var(--ligne)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;display:block
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--encre));border:none}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--encre));border:none}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--surface);border:3px solid var(--accent-fonce);margin-top:-10px;box-shadow:var(--ombre)
}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--surface);
  border:3px solid var(--accent-fonce);box-shadow:var(--ombre)
}
.curseur-crans{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}
.cran{
  background:none;border:none;padding:10px 4px;text-align:center;cursor:pointer;
  font-family:var(--police);font-size:14.5px;font-weight:600;color:var(--texte-doux);
  border-top:2px solid transparent
}
.cran:first-child{text-align:left}
.cran:last-child{text-align:right}
.cran[aria-pressed="true"]{color:var(--accent-fonce);border-top-color:var(--accent-fonce)}
.curseur-sortie{
  margin-top:26px;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:24px;display:grid;gap:10px
}
.curseur-sortie h3{font-size:21px;font-weight:700}
.curseur-sortie p{color:var(--texte-doux);font-size:16px}
.curseur-note{margin-top:18px;font-size:14.5px;color:var(--texte-doux)}

/* Offres */
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:start}
@media (max-width:980px){.offres{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.offre{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:28px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--ombre)
}
.offre h3{font-size:21px;font-weight:700}
.illimite{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:var(--surface-2);border:1px solid var(--ligne);border-radius:999px;
  padding:5px 12px;font-size:13.5px;font-weight:600;color:var(--accent-fonce)
}
.offre ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:15.5px;color:var(--texte-doux)}
.offre li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;line-height:1.5}
.offre li svg{margin-top:5px;color:var(--accent)}
.offre li.exclu svg{color:var(--texte-doux)}
.offre .bouton{margin-top:auto}
.mention-grille{margin-top:20px;font-size:14px;color:var(--texte-doux);text-align:center}

/* Tableau comparatif */
.cadre-tableau{
  margin-top:40px;overflow-x:auto;border:1px solid var(--ligne);
  border-radius:var(--rayon);background:var(--surface)
}
table.comparatif{border-collapse:collapse;width:100%;min-width:680px;font-size:15.5px}
table.comparatif caption{text-align:left;padding:20px 22px 0;color:var(--texte-doux);font-size:15px}
table.comparatif th,table.comparatif td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--ligne);vertical-align:top}
table.comparatif thead th{
  position:sticky;top:0;background:var(--surface-2);font-size:15px;font-weight:700;
  color:var(--texte);border-bottom:2px solid var(--ligne);z-index:1
}
table.comparatif thead th:first-child{font-weight:600;color:var(--texte-doux)}
table.comparatif thead th .prix{display:block;font-family:var(--mono);font-size:13px;font-weight:400;color:var(--texte-doux);margin-top:3px;letter-spacing:.02em}
table.comparatif tbody th{font-weight:500;color:var(--texte);width:38%}
table.comparatif td{color:var(--texte-doux);text-align:center;font-variant-numeric:tabular-nums}
table.comparatif tbody tr:last-child th,table.comparatif tbody tr:last-child td{border-bottom:none}
table.comparatif tr.groupe th{
  background:var(--surface-2);font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-fonce);font-weight:500
}
table.comparatif col.phare{background:color-mix(in srgb, var(--accent) 7%, transparent)}
.oui{color:var(--accent-fonce);display:inline-block}
/* Contraste : l'opacite .55 ramenait ces mentions a 2,19:1 sur fond clair,
   alors que ce sont justement les lignes qui differencient les offres.
   Sans opacite, la meme couleur de palette donne 5,1:1 en theme clair et
   7,1:1 en theme sombre. */
.non{color:var(--texte-doux);display:inline-block}
.aide-defilement{margin-top:10px;font-size:13.5px;color:var(--texte-doux);font-family:var(--mono)}
@media (min-width:760px){.aide-defilement{display:none}}
@media (max-width:900px){.secteurs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.secteurs{grid-template-columns:1fr}}
.secteur{border-top:2px solid var(--ligne);padding-top:18px}
.secteur svg{color:var(--accent-fonce);margin-bottom:12px;display:block}
.secteur h3{font-size:17.5px;font-weight:700;margin-bottom:6px}
.secteur p{font-size:15px;color:var(--texte-doux)}
@media (pointer:coarse){.secteur-liens a,.secteurs-tous a{display:inline-flex;align-items:center;min-height:32px}}

/* FAQ */
.faq{margin-top:40px;max-width:820px;border-top:1px solid var(--ligne)}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{
  cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:17.5px;
  list-style:none;position:relative;color:var(--texte)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:27px;width:10px;height:10px;
  border-right:2px solid var(--accent-fonce);border-bottom:2px solid var(--accent-fonce);
  transform:rotate(45deg);transition:transform .2s ease
}
.faq details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq .reponse{padding:0 0 22px;color:var(--texte-doux);font-size:16.5px;max-width:68ch}

/* Essai */
.essai{background:var(--surface-encre);color:var(--sur-encre);border-radius:24px;padding:clamp(28px,4.5vw,52px)}
.essai-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:880px){.essai-grille{grid-template-columns:1fr;gap:32px}}
.essai h2{color:var(--sur-encre);font-size:clamp(26px,3.6vw,36px);font-weight:800}
.essai .chapo{color:var(--sur-encre-doux)}
.essai .etiquette{color:var(--accent-clair)}
.essai ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;font-size:16px;color:var(--sur-encre-doux)}
.essai li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.essai li svg{margin-top:5px;color:var(--accent-clair)}
form{display:grid;gap:14px}
.champ{display:grid;gap:6px}
.champ label{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--sur-encre-doux)}
.champ input,.champ select{
  width:100%;padding:13px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:var(--sur-encre);font-family:var(--police);font-size:16px
}
.champ select option{background:#0B1A2E;color:#EAF3F1}
.champ input::placeholder{color:#5F7889}
.champ input:focus-visible,.champ select:focus-visible{outline:2px solid var(--accent-clair);outline-offset:1px}
.rgpd{font-size:13.5px;color:var(--sur-encre-doux);line-height:1.5}
.rgpd a{color:var(--accent-clair)}
.avis-form{
  display:none;padding:14px 16px;border-radius:10px;font-size:15px;
  background:rgba(46,211,188,.12);border:1px solid rgba(46,211,188,.3);color:var(--accent-clair)
}
.avis-form[data-visible="true"]{display:block}

/* Pied */
.pied{border-top:1px solid var(--ligne);padding-block:44px;margin-top:clamp(56px,8vw,96px)}

/* Schéma du parcours d'appel */
figure.schema{margin:40px 0 0}
.cadre-schema{
  overflow-x:auto;border:1px solid var(--ligne);border-radius:var(--rayon);
  background:var(--surface);padding:24px 20px
}
.cadre-schema svg{min-width:760px;max-width:100%;height:auto;color:var(--texte);display:block;margin-inline:auto}
figure.schema figcaption{
  margin-top:14px;font-size:15px;color:var(--texte-doux);max-width:72ch
}
.schema-boite{fill:var(--surface-2);stroke:var(--ligne)}
.schema-boite-accent{fill:color-mix(in srgb, var(--accent) 12%, transparent);stroke:var(--accent-fonce)}
.schema-boite-encre{fill:var(--surface-encre);stroke:var(--surface-encre)}
.schema-titre{fill:var(--texte);font-weight:600}
.schema-titre-clair{fill:#EAF3F1;font-weight:600}
.schema-detail{fill:var(--texte-doux)}
.schema-detail-clair{fill:#94AAB8}
.schema-accent{fill:var(--accent-fonce);font-weight:600}
.schema-trait{stroke:var(--texte-doux);fill:none}
.schema-trait-accent{stroke:var(--accent-fonce);fill:none}
.schema-legende{fill:var(--texte-doux);font-family:var(--mono)}
.schema-pointe{fill:var(--texte-doux)}
.schema-pointe-accent{fill:var(--accent-fonce)}

/* Déclencheurs de transfert */
.declencheurs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
@media (max-width:700px){.declencheurs{grid-template-columns:1fr}}
.declencheur{
  background:var(--surface);border:1px solid var(--ligne);border-left:3px solid var(--accent-fonce);
  border-radius:0 var(--rayon) var(--rayon) 0;padding:20px 22px
}
.declencheur h3{font-size:17.5px;font-weight:700;margin-bottom:7px}
.declencheur p{font-size:15.5px;color:var(--texte-doux)}
.declencheur .exemple{
  display:block;margin-top:10px;font-family:var(--mono);font-size:13.5px;
  color:var(--accent-fonce);font-style:normal
}

/* Deux colonnes texte + illustration */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:40px}
@media (max-width:880px){.duo{grid-template-columns:1fr;gap:32px}}

/* Ce que l'IA ne fait pas */
.limites{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px;max-width:72ch}
.limites li{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  font-size:16.5px;color:var(--texte-doux);line-height:1.55
}
.limites li svg{margin-top:4px;color:var(--texte-doux);opacity:.7}
.limites strong{color:var(--texte);font-weight:600}

/* Repères chronologiques */
.jalons{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0;max-width:760px}
.jalon{
  display:grid;grid-template-columns:96px 1fr;gap:22px;
  padding:22px 0;border-top:1px solid var(--ligne)
}
.jalon:last-child{border-bottom:1px solid var(--ligne)}
@media (max-width:620px){.jalon{grid-template-columns:1fr;gap:6px}}
.jalon-temps{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--accent-fonce);
  font-variant-numeric:tabular-nums;padding-top:3px
}
.jalon h3{font-size:18px;font-weight:700;margin-bottom:6px}
.jalon p{font-size:16px;color:var(--texte-doux)}

/* Sommaire de la FAQ */
.sommaire{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none
}
.sommaire a{
  display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid var(--ligne);
  background:var(--surface);color:var(--texte);text-decoration:none;font-size:15px;font-weight:500
}
.sommaire a:hover{border-color:var(--accent-fonce);color:var(--accent-fonce)}
.faq-groupe{margin-top:clamp(44px,6vw,72px);scroll-margin-top:90px}
.faq-groupe h2{font-size:clamp(22px,3vw,28px);font-weight:800}
.faq-groupe .faq{margin-top:20px}

/* Encart de renvoi */
.encart{
  margin-top:44px;background:var(--surface-2);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:28px;display:flex;flex-wrap:wrap;
  gap:18px 28px;align-items:center
}
.encart p{font-size:16.5px;max-width:52ch}
.encart .bouton{margin-left:auto}
@media (max-width:640px){.encart .bouton{margin-left:0;width:100%}}

/* Voies de contact */
.voies{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media (max-width:880px){.voies{grid-template-columns:1fr}}
.voie{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--ombre)
}
.voie svg{color:var(--accent-fonce)}
.voie h2{font-size:19px;font-weight:700}
.voie p{font-size:15.5px;color:var(--texte-doux)}
.voie .bouton{margin-top:auto;align-self:flex-start}

/* Formulaire sur fond clair */
.form-clair{max-width:640px}
.form-clair .champ label{color:var(--texte-doux)}
.form-clair .champ input,
.form-clair .champ select,
.form-clair .champ textarea{
  background:var(--surface);border:1px solid var(--ligne);color:var(--texte);
  width:100%;padding:13px 14px;border-radius:10px;font-family:var(--police);font-size:16px
}
.form-clair .champ textarea{min-height:150px;resize:vertical;line-height:1.55}
.form-clair .champ input::placeholder,
.form-clair .champ textarea::placeholder{color:var(--texte-doux);opacity:.7}
.form-clair .champ select option{background:var(--surface);color:var(--texte)}
.form-clair .rgpd{color:var(--texte-doux)}
.form-clair .rgpd a{color:var(--accent-fonce)}
.form-clair .avis-form{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-color:var(--accent-fonce);color:var(--accent-fonce)
}

/* Coordonnées */
.coordonnees{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
@media (max-width:820px){.coordonnees{grid-template-columns:1fr;gap:24px}}
.coordonnee{border-top:2px solid var(--ligne);padding-top:18px}
.coordonnee h3{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-fonce);font-weight:500;margin-bottom:10px
}
.coordonnee p{font-size:16.5px}
.coordonnee .gros{font-size:21px;font-weight:700;color:var(--texte);letter-spacing:-.01em}
.coordonnee a{color:var(--texte);text-decoration:none}
.coordonnee a:hover{color:var(--accent-fonce)}
.coordonnee .precision{font-size:14.5px;color:var(--texte-doux);margin-top:6px}

/* Bandeau recrutement */
.bandeau{
  margin-top:clamp(44px,6vw,72px);border:1px dashed var(--ligne);border-radius:var(--rayon);
  padding:24px 26px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center
}
.bandeau p{font-size:16px;color:var(--texte-doux);max-width:56ch}
.bandeau a{margin-left:auto;font-weight:600}
@media (max-width:640px){.bandeau a{margin-left:0}}

/* Page de confirmation */
.confirmation{max-width:720px;margin-inline:auto;text-align:center;padding-block:clamp(48px,7vw,80px) 0}
.confirmation .sceau{
  width:64px;height:64px;border-radius:50%;margin:0 auto 26px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:2px solid var(--accent-fonce);color:var(--accent-fonce);
  display:flex;align-items:center;justify-content:center
}
.confirmation h1{font-size:clamp(32px,5vw,46px);font-weight:800;letter-spacing:-.03em}
.confirmation .chapo{margin-inline:auto;margin-top:18px}
.rappel-offre{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 18px;
  border-radius:999px;background:var(--surface-2);border:1px solid var(--ligne);
  font-size:15.5px;color:var(--texte)
}
.rappel-offre strong{font-weight:700;color:var(--accent-fonce)}

/* Préparer l'appel */
.preparation{
  margin-top:clamp(40px,6vw,64px);background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:clamp(24px,4vw,36px);box-shadow:var(--ombre)
}
.preparation h2{font-size:clamp(21px,3vw,26px);font-weight:800}
.preparation ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.preparation li{
  display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;
  font-size:16.5px;color:var(--texte-doux);line-height:1.55;text-align:left
}
.preparation li svg{margin-top:4px;color:var(--accent-fonce)}
.preparation strong{color:var(--texte);font-weight:600;display:block;margin-bottom:2px}

/* Liens utiles après confirmation */
.pistes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(40px,6vw,64px)}
@media (max-width:820px){.pistes{grid-template-columns:1fr}}
.piste{
  display:block;border:1px solid var(--ligne);border-radius:var(--rayon);padding:22px;
  text-decoration:none;background:var(--surface);text-align:left
}
.piste:hover{border-color:var(--accent-fonce)}
.piste h3{font-size:17px;font-weight:700;margin-bottom:6px}
.piste p{font-size:15px;color:var(--texte-doux)}

/* Pages légales */
.legale{max-width:780px}
.legale .maj{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--texte-doux);
  margin-top:18px
}
.avertissement{
  margin-top:28px;border:2px dashed var(--accent-fonce);border-radius:var(--rayon);
  padding:20px 22px;background:color-mix(in srgb, var(--accent) 8%, transparent)
}
.avertissement h2{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-fonce);font-weight:500;margin-bottom:8px
}
.avertissement p{font-size:15.5px;color:var(--texte)}
.sommaire-legal{
  margin-top:36px;padding:24px 26px;background:var(--surface-2);
  border:1px solid var(--ligne);border-radius:var(--rayon)
}
.sommaire-legal h2{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-fonce);font-weight:500;margin-bottom:14px
}
.sommaire-legal ol{margin:0;padding-left:22px;display:grid;gap:7px;font-size:15.5px}
.sommaire-legal a{color:var(--texte);text-decoration:none}
.sommaire-legal a:hover{color:var(--accent-fonce);text-decoration:underline}
.article{margin-top:clamp(36px,5vw,52px);scroll-margin-top:90px;max-width:72ch}
.article h2{font-size:clamp(20px,2.6vw,25px);font-weight:800}
.article h3{font-size:18px;font-weight:700;margin-top:24px}
.article p{margin-top:14px;color:var(--texte-doux);font-size:16.5px;line-height:1.65}
.article ul,.article ol.liste{margin:14px 0 0;padding-left:24px;color:var(--texte-doux);font-size:16.5px;line-height:1.65}
.article li{margin-top:9px}
.article .numero{
  font-family:var(--mono);font-size:13px;color:var(--accent-fonce);
  letter-spacing:.06em;display:block;margin-bottom:6px
}
[data-placeholder]{
  background:color-mix(in srgb, #FFB066 26%, transparent);
  color:var(--texte);padding:1px 6px;border-radius:4px;
  font-weight:500;box-decoration-break:clone;-webkit-box-decoration-break:clone
}

/* Préversion : liens vers des pages non encore produites */
a[data-bientot]{opacity:.5;cursor:not-allowed}

/* Cibles tactiles : les liens du pied de page mesuraient 17 px de haut,
   sous le minimum de 24 px. La hauteur de frappe augmente, pas le dessin. */
@media (pointer:coarse){
  .pied-liens a,.mention-grille a{display:inline-flex;align-items:center;min-height:32px}
}

/* =======================================================================
   SOCLE VISUEL 2026-09-18 — direction validee par la Direction
   -----------------------------------------------------------------------
   Tout ce qui suit est porte par la classe « nv2 » posee sur <body>.
   POURQUOI UN PREFIXE : les pages tarifs, comment-ca-marche, questions,
   contact et les pages legales s'appuient encore sur les regles ci-dessus
   (.hero, .entete, .offre, .faq, .etape, .curseur-bloc...). Les ecraser
   globalement aurait casse cinq pages pour en refaire une. Chaque page
   basculera en ajoutant « nv2 » a son <body>, lot par lot, et les anciennes
   regles pourront alors etre retirees d'un seul coup.
   ======================================================================= */

body.nv2{font-size:17px;line-height:1.62}
.nv2 h1,.nv2 h2,.nv2 h3{font-weight:800;letter-spacing:-.025em;line-height:1.08}
.nv2 h1{font-size:clamp(2.4rem,6.6vw,4.2rem);font-weight:900;letter-spacing:-.04em}
.nv2 h2{font-size:clamp(1.8rem,4.2vw,2.8rem)}
.nv2 h3{font-size:1.16rem;letter-spacing:-.015em;line-height:1.3}
.nv2 .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.nv2 .enveloppe{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,5vw,32px)}
.nv2 .bande--claire{background:var(--surface-2)}
.nv2 .chapeau{color:var(--texte-doux);font-size:1.06rem;max-width:58ch;margin-top:18px}

/* L'oeil : la sur-titre en capitales. La police machine en a ete RETIREE
   (decision du 2026-09-18) : elle ne sert plus qu'aux horaires, prix,
   chiffres et donnees. */
.nv2 .oeil{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--police);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-fonce);
}
.nv2 .oeil::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.7}
.nv2 .hero .oeil,.nv2 .final .oeil{color:var(--action-vive)}

/* ---------- Boutons ---------- */
.nv2 .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--police);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.nv2 .btn--vif{
  background:var(--action);color:var(--sur-action);
  box-shadow:0 10px 28px -10px rgba(18,179,159,.75);
}
.nv2 .btn--vif:hover{background:var(--action-vive);transform:translateY(-2px)}
.nv2 .btn--fantome{border-color:rgba(255,255,255,.28);color:#fff;background:transparent}
.nv2 .btn--fantome:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07)}
.nv2 .btn--sobre{border-color:var(--ligne);color:var(--texte);background:var(--surface)}
.nv2 .btn--sobre:hover{border-color:var(--action);color:var(--accent-fonce)}
.nv2 .btn--large{width:100%}

/* ---------- En-tete sombre + menu mobile ---------- */
.nv2 .entete{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:rgba(11,26,46,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nv2 .entete__rang{display:flex;align-items:center;gap:16px;min-height:66px}
/* L'en-tete est encre dans les DEUX themes : le logo clair y est le seul
   lisible, quel que soit le reglage du visiteur. */
.nv2 .entete .logo .sombre,.nv2 .pied .logo .sombre{display:none}
.nv2 .entete .logo .clair,.nv2 .pied .logo .clair{display:block}
.nv2 .entete .nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nv2 .entete .nav a{
  color:rgba(255,255,255,.82);text-decoration:none;font-size:.95rem;font-weight:600;
  padding:8px 13px;border-radius:999px;transition:background .15s,color .15s;
}
.nv2 .entete .nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nv2 .entete .nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.nv2 .entete .btn{padding:10px 18px;font-size:.94rem}
.nv2 .burger{
  display:none;margin-left:auto;background:transparent;border:1.5px solid rgba(255,255,255,.3);
  border-radius:12px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;
}
.nv2 .burger span{display:block;width:19px;height:2px;background:#fff;position:relative}
.nv2 .burger span::before,.nv2 .burger span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:#fff;
}
.nv2 .burger span::before{top:-6px}
.nv2 .burger span::after{top:6px}
.nv2 .tiroir{display:none;border-top:1px solid rgba(255,255,255,.1);padding-block:12px 20px}
.nv2 .tiroir a{
  display:block;color:#fff;text-decoration:none;font-weight:600;
  padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);
}
.nv2 .tiroir a:hover{color:var(--action-vive)}
/* « a.btn » et pas « .btn » : la regle .tiroir a ci-dessus impose display:block,
   qui desalignerait le libelle du bouton a gauche. */
.nv2 .tiroir a.btn{display:flex;margin-top:16px;border-bottom:none}

/* ---------- Hero ---------- */
.nv2 .hero{
  position:relative;overflow:hidden;color:#fff;padding-block:0;
  background:
    radial-gradient(90% 120% at 82% 8%, rgba(18,179,159,.30) 0%, rgba(18,179,159,0) 58%),
    radial-gradient(70% 90% at 8% 96%, rgba(255,154,77,.16) 0%, rgba(255,154,77,0) 60%),
    var(--encre);
}
.nv2 .hero__grille{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(34px,5vw,64px);align-items:start;
  padding-block:clamp(44px,5.5vw,72px);
}
/* Le titre est en TROIS temps, un par ligne. La taille est plafonnee a ce
   que la colonne peut tenir sans casser « Votre telephone sonne. » en deux :
   mesure faite a 1440 px, colonne de 616 px, 3 lignes de 55 px. */
.nv2 .hero h1{color:#fff;margin-top:16px;font-size:clamp(1.85rem,4.7vw,3.2rem)}
/* Trait de surligneur ambre, pas un pave : la bande s'arrete avant le bas de
   la ligne, sinon elle se lit comme un bloc brun derriere le texte. */
.nv2 .hero h1 .accent{
  background:linear-gradient(180deg,
    transparent 72%, rgba(255,154,77,.45) 72%,
    rgba(255,154,77,.45) 94%, transparent 94%);
  padding-inline:3px;
}
.nv2 .hero__sous{color:rgba(255,255,255,.80);font-size:1.12rem;margin-top:20px;max-width:46ch}
.nv2 .hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.nv2 .hero__preuves{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.14);list-style:none;padding-left:0;margin-bottom:0;
}
.nv2 .hero__preuves li{
  display:flex;align-items:center;gap:8px;
  font-size:.92rem;color:rgba(255,255,255,.78);font-weight:500;
}
.nv2 .coche{width:16px;height:16px;flex:0 0 auto;color:var(--action-vive)}

/* ---------- Fiche d'appel qui se deroule ---------- */
.nv2 .telephone{
  background:var(--encre-2);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-l);box-shadow:var(--ombre-haute);overflow:hidden;
}
.nv2 .telephone__barre{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.78rem;color:rgba(255,255,255,.68);
}
.nv2 .pastille{
  display:block;width:8px;height:8px;border-radius:50%;background:var(--action);
  flex:0 0 auto;box-shadow:0 0 0 0 rgba(18,179,159,.55);
}
@media (prefers-reduced-motion:no-preference){
  .nv2 .pastille{animation:nv2-battement 2.4s ease-out infinite}
}
@keyframes nv2-battement{
  0%{box-shadow:0 0 0 0 rgba(18,179,159,.5)}
  70%{box-shadow:0 0 0 9px rgba(18,179,159,0)}
  100%{box-shadow:0 0 0 0 rgba(18,179,159,0)}
}
.nv2 .telephone__heure{margin-left:auto;color:var(--ambre-clair);font-weight:600}
.nv2 .fil{padding:20px 18px 22px;display:flex;flex-direction:column}
.nv2 .tour{display:grid;grid-template-columns:62px 1fr;gap:14px;padding-block:11px}
/* Par defaut TOUT est visible : si le script ne se charge pas, la fiche
   reste lisible. C'est le script qui masque, en posant « anime » sur le
   fil, juste avant de derouler. */
.nv2 .fil.anime .tour{opacity:0;transform:translateY(8px)}
.nv2 .fil.anime .tour.vu{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
@media (prefers-reduced-motion:reduce){
  .nv2 .fil.anime .tour{opacity:1;transform:none}
}
.nv2 .tour__h{font-size:.76rem;color:rgba(255,255,255,.46);padding-top:3px;font-weight:500}
.nv2 .tour__corps{min-width:0}
.nv2 .tour__qui{
  font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.52);margin-bottom:3px;
}
.nv2 .tour--ia .tour__qui{color:var(--action-vive)}
.nv2 .tour__texte{font-size:.95rem;color:rgba(255,255,255,.92);line-height:1.5}
.nv2 .tour--sonne .tour__texte{color:var(--ambre-clair);font-weight:600}
.nv2 .etiq{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:4px 11px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.02em;
}
.nv2 .etiq--urgent{background:var(--ambre);color:var(--ambre-encre)}
.nv2 .etiq--fait{
  background:rgba(18,179,159,.18);color:var(--action-vive);
  border:1px solid rgba(18,179,159,.35);
}
.nv2 .telephone__pied{
  padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.82rem;color:rgba(255,255,255,.62);
}
.nv2 .rejouer{
  margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.82);border-radius:999px;padding:8px 16px;font-size:.8rem;
  font-weight:600;cursor:pointer;font-family:var(--police);
}
.nv2 .rejouer:hover{border-color:var(--action-vive);color:#fff}

/* ---------- Ruban de chiffres ---------- */
.nv2 .ruban-chiffres{background:var(--encre-2);color:#fff;padding-block:22px}
.nv2 .ruban-chiffres__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.nv2 .ruban-chiffres__n{
  font-size:1.5rem;font-weight:900;letter-spacing:-.03em;
  color:var(--action-vive);display:block;
}
.nv2 .ruban-chiffres__l{font-size:.82rem;color:rgba(255,255,255,.68);display:block;margin-top:2px}

/* ---------- Calculette du manque a gagner ---------- */
.nv2 .calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,4vw,52px);align-items:center;
}
.nv2 .reglages{display:flex;flex-direction:column;gap:26px;margin-top:30px}
.nv2 .reglage label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-weight:600;font-size:.98rem;
}
.nv2 .reglage output{font-family:var(--mono);font-weight:700;color:var(--accent-fonce);font-size:1.08rem}
.nv2 input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:var(--ligne);margin-top:14px;cursor:pointer;display:block;
}
.nv2 input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:transparent;border:none}
.nv2 input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--ligne);border:none}
.nv2 input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--action);border:3px solid var(--surface);margin-top:-10px;
  box-shadow:0 4px 14px -4px rgba(18,179,159,.9);cursor:grab;
}
.nv2 input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--action);
  border:3px solid var(--surface);box-shadow:0 4px 14px -4px rgba(18,179,159,.9);cursor:grab;
}
.nv2 input[type=range]:focus-visible{outline:3px solid var(--action);outline-offset:4px}
.nv2 .ardoise{
  background:var(--encre);color:#fff;border-radius:var(--r-l);
  padding:clamp(26px,4vw,38px);box-shadow:var(--ombre-haute);
}
.nv2 .ardoise__l{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.58);font-weight:600;
}
.nv2 .ardoise__n{
  font-family:var(--mono);font-size:clamp(2.4rem,6.4vw,3.6rem);font-weight:700;
  letter-spacing:-.04em;color:var(--ambre);line-height:1;margin-top:10px;
  font-variant-numeric:tabular-nums;
}
.nv2 .ardoise__sous{color:rgba(255,255,255,.74);font-size:.95rem;margin-top:14px}
.nv2 .ardoise__sous strong{color:var(--ambre-clair)}
.nv2 .ardoise__comparo{
  margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  color:rgba(255,255,255,.74);font-size:.95rem;
}
.nv2 .ardoise__comparo strong{color:var(--action-vive);font-size:1.2rem;font-weight:800}
.nv2 .avert{font-size:.84rem;color:var(--texte-doux);margin-top:18px;max-width:58ch}

/* ---------- Trois etapes ---------- */
.nv2 .etapes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;
  counter-reset:nv2e;list-style:none;padding:0;
}
.nv2 .etape{
  position:relative;padding-top:26px;border-top:2px solid var(--action);
  counter-increment:nv2e;
}
.nv2 .etape::before{
  content:counter(nv2e,decimal-leading-zero);
  position:absolute;top:-2px;left:0;transform:translateY(-100%);
  padding-right:12px;background:none;width:auto;height:auto;right:auto;
  font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--accent-fonce);
}
.nv2 .etape h3{margin-bottom:8px;font-size:1.16rem}
.nv2 .etape p{color:var(--texte-doux);font-size:.96rem}
.nv2 .apres-etapes{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.nv2 .apres-etapes a:not(.btn){color:var(--accent-fonce);font-weight:600}

/* ---------- Curseur IA / humain ---------- */
.nv2 .curseur-bloc{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-l);
  padding:clamp(24px,4vw,38px);box-shadow:var(--ombre);margin-top:36px;
}
.nv2 .curseur-crans{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.nv2 .cran{
  background:none;border:none;border-top:2px solid transparent;padding:12px 4px;
  text-align:center;cursor:pointer;font-family:var(--police);font-size:.86rem;
  font-weight:600;color:var(--texte-doux);
}
.nv2 .cran:first-child{text-align:left}
.nv2 .cran:last-child{text-align:right}
.nv2 .cran[aria-pressed="true"]{color:var(--accent-fonce);border-top-color:var(--action)}
.nv2 .curseur-sortie{
  margin-top:24px;padding:22px;border-radius:var(--rayon);
  background:var(--surface-2);border:1px solid var(--ligne);display:block;
}
.nv2 .curseur-sortie h3{margin-bottom:10px;font-size:1.16rem}
.nv2 .curseur-sortie p{color:var(--texte-doux);font-size:.97rem}
.nv2 .curseur-note{margin-top:16px;font-size:.88rem;color:var(--texte-doux)}

/* ---------- Offres ---------- */
.nv2 .offres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch}
.nv2 .offre{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-l);
  padding:28px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--ombre);
}
.nv2 .offre--phare{
  background:var(--encre);color:#fff;border-color:transparent;
  box-shadow:var(--ombre-haute);position:relative;padding-top:34px;
}
/* Le traitement du theme sombre (carte eclaircie + bandeau turquoise en
   tete de carte) est pose en fin de feuille, au LOT 3. */
.nv2 .offre--phare h3{color:#fff}
.nv2 .offre--phare .offre__pour,
.nv2 .offre--phare .offre__liste li{color:rgba(255,255,255,.82)}
.nv2 .offre--phare .offre__unite{color:rgba(255,255,255,.62)}
.nv2 .ruban-phare{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ambre);color:var(--ambre-encre);font-size:.72rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:999px;
  white-space:nowrap;font-family:var(--police);
}
.nv2 .offre h3{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.nv2 .offre__prix{display:flex;align-items:baseline;gap:7px}
.nv2 .offre__n{
  font-family:var(--mono);font-size:3rem;font-weight:700;letter-spacing:-.05em;
  line-height:1;font-variant-numeric:tabular-nums;
}
.nv2 .offre__unite{font-size:.88rem;color:var(--texte-doux);font-weight:600}
.nv2 .offre__par-jour{font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--accent-fonce)}
.nv2 .offre--phare .offre__par-jour{color:var(--action-vive)}
.nv2 .offre__pour{font-size:.93rem;color:var(--texte-doux);border:none;padding-left:0}
.nv2 .offre__liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.nv2 .offre__liste li{
  display:flex;gap:9px;font-size:.93rem;color:var(--texte-doux);align-items:flex-start;
}
.nv2 .offre__liste .coche{margin-top:4px;color:var(--action)}
.nv2 .offre details{font-size:.9rem}
.nv2 .offre summary{cursor:pointer;font-weight:600;color:var(--accent-fonce);padding-block:6px}
.nv2 .offre--phare summary{color:var(--action-vive)}
.nv2 .offre details p{margin-top:8px;color:var(--texte-doux);font-size:.9rem}
.nv2 .offre--phare details p{color:rgba(255,255,255,.74)}
.nv2 .offre .btn{margin-top:auto}
.nv2 .sous-offres{text-align:center;color:var(--texte-doux);font-size:.88rem;margin-top:22px}
.nv2 .sous-offres a{color:var(--accent-fonce)}

/* ---------- Pour qui ---------- */
.nv2 .metiers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.nv2 .metier{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:22px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.nv2 .metier:hover{border-color:var(--action);transform:translateY(-3px);box-shadow:var(--ombre)}
.nv2 .metier__h{font-family:var(--mono);font-size:.78rem;color:var(--ambre-lisible);font-weight:600}
.nv2 .metier h3{font-size:1.02rem}
.nv2 .metier h3 a{color:inherit;text-decoration:none}
.nv2 .metier h3 a:hover{color:var(--accent-fonce)}
.nv2 .metier p{font-size:.9rem;color:var(--texte-doux)}
.nv2 .metier__liens{margin-top:auto;padding-top:6px;font-size:.84rem;line-height:1.9}
.nv2 .metier__liens a{color:var(--accent-fonce);text-underline-offset:2px}
.nv2 .metiers-tous{margin-top:26px;font-size:.95rem}
.nv2 .metiers-tous a{color:var(--accent-fonce);font-weight:600}

/* ---------- FAQ ---------- */
.nv2 .faq{margin-top:38px;border-top:1px solid var(--ligne);max-width:860px}
.nv2 .faq details{border-bottom:1px solid var(--ligne)}
.nv2 .faq summary{
  cursor:pointer;padding:19px 34px 19px 0;font-weight:700;font-size:1.03rem;
  position:relative;list-style:none;letter-spacing:-.015em;color:var(--texte);
}
.nv2 .faq summary::-webkit-details-marker{display:none}
.nv2 .faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--accent-fonce);border-bottom:2px solid var(--accent-fonce);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.nv2 .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.nv2 .faq .reponse{padding:0 0 20px;color:var(--texte-doux);font-size:.98rem;max-width:72ch}

/* ---------- Appel final + formulaire reel ---------- */
.nv2 .final{
  background:
    radial-gradient(80% 130% at 88% 10%, rgba(18,179,159,.26) 0%, rgba(18,179,159,0) 60%),
    var(--encre);
  color:#fff;border-radius:var(--r-l);padding:clamp(32px,5vw,58px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,52px);align-items:start;
}
.nv2 .final h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.5rem)}
.nv2 .final>div>p{color:rgba(255,255,255,.78);margin-top:16px}
.nv2 .final__liste{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:9px}
.nv2 .final__liste li{
  display:flex;gap:9px;font-size:.94rem;color:rgba(255,255,255,.82);align-items:flex-start;
}
.nv2 .final__liste .coche{margin-top:4px}
.nv2 .carte-form{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rayon);padding:24px;display:grid;gap:14px;
}
.nv2 .carte-form .champ{display:grid;gap:6px}
.nv2 .carte-form .champ label{
  font-family:var(--police);font-size:.82rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:rgba(255,255,255,.75);
}
.nv2 .carte-form .champ input,.nv2 .carte-form .champ select{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:10px;padding:12px 13px;color:#fff;font-family:var(--police);font-size:.96rem;
}
.nv2 .carte-form .champ input::placeholder{color:rgba(255,255,255,.42)}
.nv2 .carte-form .champ input:focus-visible,
.nv2 .carte-form .champ select:focus-visible{outline:2px solid var(--action-vive);outline-offset:1px}
.nv2 .carte-form .champ select option{background:#0B1A2E;color:#fff}
.nv2 .carte-form .rgpd{font-size:.78rem;color:rgba(255,255,255,.58);line-height:1.5}
.nv2 .carte-form .rgpd a{color:var(--action-vive)}

/* ---------- Pied de page ---------- */
.nv2 .pied{
  background:var(--encre);color:rgba(255,255,255,.66);
  border-top:none;padding-block:44px 34px;margin-top:0;
}
.nv2 .pied__haut{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start;justify-content:space-between}
.nv2 .pied__baseline{margin-top:12px;font-size:.92rem;color:rgba(255,255,255,.66);max-width:34ch}
.nv2 .pied__liens{display:flex;flex-wrap:wrap;gap:10px 22px}
.nv2 .pied__liens a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.92rem}
.nv2 .pied__liens a:hover{color:#fff}
.nv2 .pied__legal{
  margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.62);font-family:var(--police);
}

/* ---------- Saut de navigation ---------- */
.nv2 .saut{position:absolute;left:-9999px}
.nv2 .saut:focus{
  left:16px;top:16px;background:#fff;color:var(--encre);padding:10px 16px;
  border-radius:8px;z-index:99;position:fixed;
}
.nv2 :focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:4px}

/* ---------- Adaptations ---------- */
@media (max-width:1000px){
  .nv2 .hero__grille{grid-template-columns:1fr;gap:38px}
  .nv2 .calc{grid-template-columns:1fr}
  .nv2 .final{grid-template-columns:1fr}
  .nv2 .metiers{grid-template-columns:repeat(2,1fr)}
  .nv2 .offres{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .nv2 .offre--phare{order:-1}
  .nv2 .etapes{grid-template-columns:1fr;gap:28px}
}
@media (max-width:860px){
  .nv2 .entete .nav{display:none}
  .nv2 .entete>.enveloppe>.entete__rang>.btn{display:none}
  .nv2 .burger{display:inline-flex}
  .nv2 .tiroir.ouvert{display:block}
  .nv2 .ruban-chiffres__grille{grid-template-columns:repeat(2,1fr);gap:22px}
  .nv2 .tour{grid-template-columns:52px 1fr;gap:10px}
}
@media (max-width:480px){
  .nv2 .metiers{grid-template-columns:1fr}
  .nv2 .curseur-crans{grid-template-columns:1fr;gap:0}
  .nv2 .cran,.nv2 .cran:first-child,.nv2 .cran:last-child{text-align:left;border-top:none;border-left:2px solid transparent;padding-left:12px}
  .nv2 .cran[aria-pressed="true"]{border-left-color:var(--action)}
}
/* Cibles tactiles : 24 px minimum sur les liens serres du pied et des cartes. */
@media (pointer:coarse){
  .nv2 .pied__liens a,.nv2 .metier__liens a,.nv2 .metiers-tous a{
    display:inline-flex;align-items:center;min-height:32px;
  }
}

/* =======================================================================
   SOCLE VISUEL 2026-09-18 — LOT 2 : pages principales et pages legales
   -----------------------------------------------------------------------
   Meme regle qu'au-dessus : TOUT est porte par « nv2 ». Les 23 pages qui
   chargent cette feuille sans la classe (metier, devis, souscription...)
   ne voient rien de ce qui suit.
   Deux familles de regles :
   1. des PLAFONDS DE TITRE. « .nv2 h2 » et « .nv2 h3 » sont des titres de
      section ; les pages interieures se servent aussi de h2/h3 comme
      simples libelles (Sommaire, Courriel, Article 4...). Sans ces
      plafonds, une etiquette de 12 px partait a 45 px.
   2. le TABLEAU COMPARATIF, qui cesse d'etre un tableau sous 760 px.
   ======================================================================= */

/* ---------- Pages interieures : entree en matiere ---------- */
.nv2 .hero-simple{padding-block:clamp(40px,6vw,66px) clamp(6px,2vw,18px)}
.nv2 .hero-simple h1{font-size:clamp(1.9rem,4.6vw,3rem);max-width:22ch}
.nv2 .hero-simple .chapeau{font-size:1.08rem}
.nv2 .titre-centre{text-align:center}

/* ---------- Plafonds de titre ---------- */
.nv2 .faq-groupe h2{font-size:clamp(1.45rem,3vw,1.95rem)}
.nv2 .voie h2{font-size:1.16rem;letter-spacing:-.015em}
.nv2 .preparation h2{font-size:clamp(1.3rem,3vw,1.7rem)}
.nv2 .confirmation h1{font-size:clamp(1.9rem,4.6vw,2.8rem)}
.nv2 .article h2{font-size:clamp(1.2rem,2.6vw,1.6rem)}
.nv2 .article h3{font-size:1.05rem}
.nv2 .sommaire-legal h2,.nv2 .avertissement h2{font-size:.76rem;letter-spacing:.09em;line-height:1.4}
.nv2 .coordonnee h3{font-size:.76rem;letter-spacing:.09em;line-height:1.4}
.nv2 .jalon h3,.nv2 .piste h3,.nv2 .declencheur h3{font-size:1.08rem}

/* ---------- Utilitaires : aucun attribut « style » n'est tolere ---------- */
.nv2 .marge-0{margin-top:0}
.nv2 .marge-t{margin-top:28px}
.nv2 .note-bloc{margin-top:32px;color:var(--texte-doux);max-width:62ch}
.nv2 .note-prep{margin-top:12px;color:var(--texte-doux);font-size:1rem}

/* ---------- Calages de bouton repris de l'ancienne feuille ----------
   « .encart .bouton » et « .voie .bouton » ne s'appliquent plus depuis
   que les boutons s'appellent « btn ». */
.nv2 .voie .btn{margin-top:auto;align-self:flex-start}
.nv2 .encart .btn{margin-left:auto}
@media (max-width:640px){.nv2 .encart .btn{margin-left:0;width:100%}}

/* ---------- Bloc d'essai sombre ---------- */
.nv2 .essai{
  border-radius:var(--r-l);color:#fff;
  background:
    radial-gradient(80% 130% at 88% 10%, rgba(18,179,159,.24) 0%, rgba(18,179,159,0) 60%),
    var(--encre);
}
.nv2 .essai h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.3rem)}
.nv2 .essai .oeil{color:var(--action-vive)}
.nv2 .essai .chapeau{color:rgba(255,255,255,.78)}

/* ---------- Cartes d'offre de /tarifs ----------
   La carte phare passe a l'encre, comme sur l'accueil : elle herite donc
   aussi du traitement de theme sombre pose au LOT 3, en fin de feuille. */
.nv2 .offre__cond{
  font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-fonce);
}
.nv2 .offre--phare .offre__cond{color:var(--action-vive)}
.nv2 .offre--phare .illimite{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:var(--action-vive);
}
.nv2 .offre__liste li.exclu .coche{color:var(--texte-doux)}
.nv2 .offre--phare .offre__liste li.exclu .coche{color:rgba(255,255,255,.55)}

/* ---------- Comparatif : lisible au telephone ----------------------------
   Le tableau reclame 680 px de large. Dans les 349 px d'un telephone, deux
   colonnes sur trois etaient hors champ AU CHARGEMENT, et c'est la page qui
   decide de l'achat. Sous 760 px il cesse donc d'etre un tableau : chaque
   critere devient une fiche, et les trois formules s'y lisent cote a cote,
   chacune sous son nom. Plus aucun defilement horizontal, rien de cache.
   Le nom de la formule est un vrai texte (« .col-offre »), pas un contenu
   genere : il reste lu par les lecteurs d'ecran. */
.nv2 .col-offre{display:none}
@media (max-width:760px){
  .nv2 .cadre-tableau{
    overflow:visible;border:none;background:transparent;border-radius:0;margin-top:24px;
  }
  .nv2 table.comparatif{display:block;min-width:0;width:100%;font-size:1rem}
  .nv2 table.comparatif caption{display:block;width:100%;padding:0 0 16px}
  .nv2 table.comparatif thead{display:none}
  .nv2 table.comparatif tbody{display:block}
  .nv2 table.comparatif tr{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;
    background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    padding:14px 15px;margin-bottom:10px;
  }
  .nv2 table.comparatif tbody th,
  .nv2 table.comparatif td{border:none;padding:0;width:auto}
  .nv2 table.comparatif tbody th[scope="row"]{
    grid-column:1/-1;font-weight:700;font-size:.97rem;color:var(--texte);line-height:1.35;
  }
  .nv2 table.comparatif td{text-align:left;font-size:.85rem;color:var(--texte);line-height:1.4}
  .nv2 table.comparatif .col-offre{
    display:block;font-family:var(--police);font-size:.63rem;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--texte-doux);margin-bottom:4px;line-height:1.25;
    /* Deux lignes reservees : « IA + relais humain » passe a la ligne, les
       trois valeurs doivent malgre tout demarrer a la meme hauteur. */
    min-height:2.5em;
  }
  .nv2 table.comparatif td:nth-of-type(2) .col-offre{color:var(--accent-fonce)}
  .nv2 table.comparatif tr.groupe{
    display:block;background:transparent;border:none;border-radius:0;
    padding:18px 2px 4px;margin-bottom:0;
  }
  .nv2 table.comparatif tr.groupe th{
    background:transparent;border:none;padding:0;font-family:var(--police);font-size:.74rem;
    font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-fonce);
  }
  .nv2 .comparatif .oui{font-weight:700;color:var(--accent-fonce)}
  .nv2 .comparatif .non{font-weight:600}
  .nv2 .aide-defilement{font-family:var(--police);font-size:.86rem;line-height:1.5}
}

/* ---------- Deux reprises constatees a l'ecran, pas au garde ----------
   1. La colonne legale etait bornee a 780 px par « .legale ». « .enveloppe »
      (1200 px) est plus specifique et l'emportait : le sommaire et le bandeau
      s'etiraient sur toute la largeur alors que les articles restaient a
      72 ch. On reborne la colonne entiere.
   2. « .rappel-offre » est affiche en inline-flex, ce qui ANNULE l'attribut
      « hidden » du HTML. Resultat : la page de confirmation montrait une
      pastille « Offre demandee : » vide a tout visiteur arrivant sans
      parametre. Defaut anterieur a ce lot, corrige ici. */
.nv2 .enveloppe.legale{max-width:820px}
.nv2 .rappel-offre[hidden]{display:none}

/* =======================================================================
   SOCLE VISUEL 2026-09-18 — LOT 3 : les 32 pages metier
   -----------------------------------------------------------------------
   Ces pages formaient un second site visuel : cinq feuilles separees
   (polices.css, marque-allolib.css, acquisition-v2.css, secteurs.css,
   navigation-metiers.css, seo-pack.css, metiers-approfondis.css) qui
   redefinissaient les MEMES couleurs sous d'autres noms (--al-encre pour
   --encre, --or pour --action...), plus une palette « premium » jamais
   utilisee. Elles sont retirees : le contenu des pages metier ne bouge
   pas, seules ses classes sont desormais servies par ce bloc, avec les
   jetons du socle.
   Tout est porte par « nv2 » ; « nv2-metier » ne sert qu'a neutraliser
   les quelques regles du socle qui portent le meme nom de classe que le
   contenu metier (.hero, .etape, .etapes, .calc, .champ, .faq).
   ======================================================================= */

/* ---------- Conteneurs et rythme ---------- */
.nv2 .wrap,
.nv2 .container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,5vw,32px)}
.nv2 .narrow,.nv2 .sectors-intro,.nv2 .metier-depth__intro{max-width:64ch}
.nv2 .section{padding-block:clamp(48px,6.4vw,82px)}
.nv2 .section-tight{padding-block:clamp(32px,4vw,52px)}
.nv2 .section-alt,.nv2 .section-soft{background:var(--surface-2)}
.nv2-metier main>section+section{border-top:none}

/* ---------- Entree en matiere des pages metier ----------
   Le socle met « padding-block:0 » sur .hero, parce que l'accueil gere
   lui-meme ses marges dans .hero__grille. Les pages metier n'ont pas
   cette grille : elles reclament leur propre respiration. */
.nv2-metier .hero,
.nv2-metier .hero-compact{padding-block:clamp(42px,6vw,76px) clamp(38px,5.2vw,66px)}
.nv2-metier .hero h1{max-width:20ch}
.nv2 .hero-lead,.nv2-metier .hero .sous,.nv2 .hero-content>p{
  color:rgba(255,255,255,.82);font-size:1.1rem;margin-top:20px;max-width:62ch;
}
.nv2-metier .hero .note,.nv2 .hero-note{
  margin-top:18px;font-family:var(--mono);font-size:.84rem;color:var(--sur-encre-doux);
}
.nv2 .hero-actions,.nv2-metier .hero .cta,.nv2 .cta-actions,.nv2 .metier-actions{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;
}
.nv2 .hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,60px);align-items:center}
.nv2 .hero-card,.nv2 .form-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-l);padding:clamp(22px,3vw,30px);
}

/* ---------- La sur-titre : meme dessin que « .oeil » du socle ---------- */
.nv2 .eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  font-family:var(--police);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-fonce);
}
.nv2 .eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.7}
.nv2 .hero .eyebrow,.nv2 .cta-final .eyebrow,.nv2 .final-cta .eyebrow,
.nv2 .cta-band .eyebrow,.nv2 .mx-scenario .eyebrow{color:var(--action-vive)}

/* ---------- Titres de section ---------- */
.nv2 .section-head,.nv2 .section-heading{max-width:62ch;margin-bottom:clamp(26px,3.6vw,42px)}
.nv2 .section-heading.center{margin-inline:auto;text-align:center}
.nv2 .section-head>p,.nv2 .section-heading>p,.nv2 .section-sous{color:var(--texte-doux);margin-top:14px}
.nv2 .section-head .sous{color:var(--texte-doux);margin-top:14px}
.nv2-metier h2{font-size:clamp(1.55rem,3.4vw,2.35rem)}
.nv2-metier h3{font-size:1.1rem}
.nv2 .nv-h1,.nv2 .serif{font-family:var(--police)}

/* ---------- Fil d'Ariane ---------- */
.nv2 .sector-breadcrumb,.nv2 .al-breadcrumb,.nv2 .breadcrumb,.nv2 .breadcrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;padding:0;
  list-style:none;font-size:.88rem;color:rgba(255,255,255,.62);
}
.nv2 .sector-breadcrumb a,.nv2 .al-breadcrumb a,.nv2 .breadcrumb a{
  color:var(--action-vive);text-decoration:none;
}
.nv2 .sector-breadcrumb a:hover,.nv2 .al-breadcrumb a:hover,.nv2 .breadcrumb a:hover{text-decoration:underline}
.nv2 .sector-breadcrumb [aria-current="page"],.nv2 .al-breadcrumb [aria-current="page"]{color:#fff}
.nv2 .breadcrumb ol li+li::before{content:"›";margin-right:8px;opacity:.6}

/* ---------- Badge d'entree ---------- */
.nv2 .badge{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  padding:6px 14px;border-radius:999px;
  background:rgba(18,179,159,.14);border:1px solid rgba(46,211,188,.42);
  color:var(--action-vive);font-family:var(--police);font-size:.76rem;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}

/* ---------- Boutons : un seul dessin pour tout le site ---------- */
.nv2 .button,.nv2-metier .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--police);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.nv2 .button,.nv2 .btn-or,.nv2-metier .btn.btn-or{
  background:var(--action);color:var(--sur-action);border-color:transparent;
  box-shadow:0 10px 28px -10px rgba(18,179,159,.75);
}
.nv2 .button:hover,.nv2 .btn-or:hover{background:var(--action-vive);transform:translateY(-2px);color:var(--sur-action)}
.nv2 .btn-ghost,.nv2 .btn-fantome,.nv2 .btn-ghost-clair,
.nv2 .hero .button-secondary,.nv2 .final-cta .button-secondary,.nv2 .cta-band .button-secondary{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.3);box-shadow:none;
}
.nv2 .btn-ghost:hover,.nv2 .btn-fantome:hover,.nv2 .btn-ghost-clair:hover,
.nv2 .hero .button-secondary:hover,.nv2 .final-cta .button-secondary:hover{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);color:#fff;transform:translateY(-2px);
}
.nv2 .button-secondary,.nv2 .btn-secondary,.nv2 .btn-marine,.nv2 .btn-appel{
  background:var(--surface);color:var(--texte);border-color:var(--ligne);box-shadow:none;
}
.nv2 .button-secondary:hover,.nv2 .btn-secondary:hover,.nv2 .btn-marine:hover,.nv2 .btn-appel:hover{
  border-color:var(--action);color:var(--accent-fonce);background:var(--surface);transform:translateY(-2px);
}
.nv2 .button-block{width:100%}
.nv2 .button-small{padding:10px 18px;font-size:.92rem}
.nv2 .more-link,.nv2 .centered-link,.nv2 .text-link,.nv2 .card-link,.nv2 .secteur-lien{
  color:var(--accent-fonce);font-weight:700;text-decoration:none;
}
.nv2 .more-link a{color:var(--accent-fonce);font-weight:700}
.nv2 .centered-link{display:block;text-align:center;margin-top:26px}
.nv2 .card-link:hover,.nv2 .more-link:hover,.nv2 .text-link:hover{text-decoration:underline}

/* ---------- Cartes ---------- */
.nv2 .card,.nv2 .sector-card,.nv2 .detail-panel,.nv2 .metier-depth__card,
.nv2 .price-card,.nv2 .pq-carte,.nv2 .checklist-panel,.nv2 .mx-preuve,
.nv2 .preuve-encart,.nv2 .metier-col,.nv2 .cta-panel,.nv2 .resto-carte,
.nv2-metier .secteur{
  position:relative;background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:clamp(20px,2.6vw,26px);
  box-shadow:var(--ombre);min-width:0;
}
.nv2 .card h3,.nv2 .sector-card h3,.nv2 .detail-panel h3,
.nv2 .metier-depth__card h3,.nv2 .mx-preuve h3{margin-bottom:9px;font-size:1.08rem}
.nv2 .card p,.nv2 .sector-card p,.nv2 .metier-depth__card p,
.nv2 .mx-preuve p,.nv2-metier .secteur p{color:var(--texte-doux);font-size:.95rem}
.nv2 .card p+p{margin-top:10px}
.nv2 .card-accent,.nv2 .metier-depth__card{border-top:4px solid var(--action)}
.nv2 .sector-card{display:flex;flex-direction:column;gap:10px}
.nv2 .sector-card a{margin-top:auto;color:var(--accent-fonce);font-weight:700;text-decoration:none}
.nv2 .sector-card a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.nv2 .sector-card:hover,.nv2 .card:has(.card-link):hover{
  border-color:var(--action);transform:translateY(-3px);box-shadow:var(--ombre-forte);
}
.nv2 .sector-card,.nv2 .card:has(.card-link){transition:transform .16s,border-color .16s,box-shadow .16s}
.nv2 .card-anchor,.nv2 .anchor-alias{scroll-margin-top:96px}
.nv2 .detail-panel ul,.nv2 .checklist-panel ul{display:grid;gap:9px;margin:0;padding-left:20px}
.nv2 .detail-panel li::marker{color:var(--action)}
.nv2 .detail-panel li,.nv2 .detail-panel p{color:var(--texte-doux);font-size:.95rem}

/* ---------- Grilles ---------- */
.nv2 .grid3,.nv2 .grid-3,.nv2 .metier-depth__grid,.nv2 .process{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}
.nv2 .grid-2,.nv2 .metier-demo,.nv2 .filet-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nv2 .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.nv2 .sector-grid,.nv2 .secteurs-grille,.nv2 .pourquoi{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;
}
.nv2 .detail-panels,.nv2 .family-stack,.nv2 .steps-list,.nv2 .cascade{display:grid;gap:18px}
.nv2 .family-stack{gap:clamp(36px,6vw,64px)}
.nv2 .split,.nv2 .price-layout,.nv2 .leadg,.nv2 .cta-band-grid,.nv2 .metier-summary-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4.4vw,52px);align-items:start;
}
.nv2 .split{align-items:center}
.nv2 .metier-chiffres,.nv2 .preuve-flux{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px}

/* ---------- Trois etapes (les pages metier numerotent elles-memes) ----------
   Le socle pose un compteur « 01 02 03 » en pseudo-element sur .etape.
   Les pages metier ecrivent deja « ETAPE 1 » en toutes lettres : le
   compteur ferait doublon, il est retire ici et seul le filet reste. */
.nv2-metier .etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px;border:none;padding:0}
.nv2-metier .etape{padding:24px 0 0;border:none;border-top:2px solid var(--action)}
.nv2-metier .etape::before{content:none}
.nv2-metier .etape .n,.nv2 .etape-num,.nv2 .preuve-num,.nv2 .step-number,.nv2 .metier-depth__number{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.08em;
  color:var(--accent-fonce);margin-bottom:12px;
}
.nv2 .step-number,.nv2 .metier-depth__number{
  min-width:38px;height:28px;border-radius:999px;background:var(--surface-2);
}
.nv2 .metier-depth__next{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  margin-top:24px;padding:20px 22px;border:1px solid var(--ligne);
  border-left:4px solid var(--action);border-radius:var(--rayon);background:var(--surface-2);
}
.nv2 .metier-depth__next p{color:var(--texte-doux);margin:0}
.nv2 .metier-depth__next a{color:var(--accent-fonce);font-weight:700;text-decoration:none}

/* ---------- Listes a coches ---------- */
.nv2 .inclus,.nv2 .check-list,.nv2 .pts,.nv2 .trust-list,
.nv2 .compact-list,.nv2 .plain-list,.nv2 .mini-flow{
  list-style:none;margin:0;padding:0;display:grid;gap:11px;
}
.nv2 .inclus li,.nv2 .check-list li,.nv2 .pts li,.nv2 .trust-list li{
  position:relative;padding-left:27px;font-size:.97rem;color:var(--texte-doux);
}
.nv2 .inclus li::before,.nv2 .check-list li::before,.nv2 .pts li::before,.nv2 .trust-list li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--action);font-weight:800;
}
.nv2 .cta-final .pts li,.nv2 .final-cta .pts li,.nv2 .leadg .pts li{color:rgba(255,255,255,.84)}
.nv2 .cta-final .pts li::before,.nv2 .final-cta .pts li::before,.nv2 .leadg .pts li::before{color:var(--action-vive)}
.nv2 .trust-line,.nv2 .fine-print,.nv2 .notice,.nv2 .controle-note,.nv2 .preuve-note{
  color:var(--texte-doux);font-size:.9rem;
}
.nv2 .notice{
  padding:16px 18px;border:1px solid var(--ligne);border-left:4px solid var(--ambre);
  border-radius:var(--rayon);background:var(--surface-2);
}

/* ---------- Encadre de mise en avant ---------- */
.nv2 .roi,.nv2 .encart-controle,.nv2 .specialist-band{
  margin-top:24px;padding:22px 26px;border-radius:var(--rayon);
  background:var(--encre);color:rgba(255,255,255,.84);
}
.nv2 .roi p,.nv2 .encart-controle p{color:rgba(255,255,255,.84);margin:0;font-size:1.02rem}
.nv2 .roi strong,.nv2 .encart-controle strong{color:var(--action-vive);font-weight:700}
.nv2 .wrap.specialist-band{
  background:var(--surface-2);color:var(--texte-doux);
  border:1px solid var(--ligne);border-left:4px solid var(--action);
  padding-block:clamp(18px,2.4vw,24px);margin-top:0;
}
.nv2 .wrap.specialist-band strong{color:var(--texte)}
@media (max-width:640px){
  .nv2 .wrap.specialist-band{border-radius:0;border-block-width:1px;border-right-width:0;border-left-width:4px}
}

/* ---------- Bandeau « pour ce metier » ---------- */
.nv2 .metier-summary{background:var(--surface-2);padding-block:clamp(48px,7vw,84px)}
.nv2 .metier-quote{
  margin:22px 0 0;padding:20px 22px;border:none;border-left:4px solid var(--action);
  border-radius:0 var(--rayon) var(--rayon) 0;background:var(--surface);color:var(--texte);
  font-size:1.12rem;font-weight:700;box-shadow:var(--ombre);
}
.nv2 .metier-quote small{display:block;margin-top:8px;color:var(--texte-doux);font-size:.78rem;font-weight:600}
.nv2 .role-limit,.nv2 .metier-note,.nv2 .metier-alerte{
  margin-top:22px;padding:16px 18px;border-left:4px solid var(--ambre);
  border-radius:0 var(--rayon) var(--rayon) 0;background:var(--surface-2);
  color:var(--texte-doux);font-size:.95rem;
}
.nv2 .family-heading{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.nv2 .family-icon,.nv2 .sector-icon,.nv2 .icon-box{
  display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;
  border-radius:14px;color:var(--accent-fonce);background:var(--surface-2);
}
.nv2 .family-icon svg,.nv2 .sector-icon svg,.nv2 .icon-box svg{width:24px;height:24px}
.nv2 .ic,.nv2 .ico{display:inline-block;color:var(--accent-fonce)}
.nv2 .card .ic{display:block;margin-bottom:12px}
.nv2 .ic>svg,.nv2 .ico>svg{width:22px;height:22px;color:var(--accent-fonce)}

/* ---------- Contenu metier enrichi (mx-*) ---------- */
.nv2 .mx-questions{
  background:var(--surface-2);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:24px 26px;margin-bottom:24px;
}
.nv2 .mx-questions ol{list-style:none;counter-reset:mxq;margin:0;padding:0}
.nv2 .mx-questions li{
  counter-increment:mxq;position:relative;padding:13px 0 13px 42px;
  border-bottom:1px solid var(--ligne);font-size:.95rem;line-height:1.6;
}
.nv2 .mx-questions li:last-child{border-bottom:none}
.nv2 .mx-questions li::before{
  content:counter(mxq,decimal-leading-zero);position:absolute;left:0;top:14px;
  width:27px;height:27px;border-radius:50%;background:var(--encre);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;font-weight:600;
}
.nv2 .mx-questions b{display:block;color:var(--texte);margin-bottom:2px}
.nv2 .mx-questions span{color:var(--texte-doux)}
.nv2 .mx-alertes{
  background:var(--surface-2);border:1px solid var(--ligne);border-left:4px solid var(--ambre);
  border-radius:var(--rayon);padding:22px 26px;margin-bottom:24px;
}
.nv2 .mx-alertes h3{color:var(--ambre-lisible);font-size:1.06rem;margin-bottom:12px}
.nv2 .mx-alertes ul{list-style:none;margin:0;padding:0}
.nv2 .mx-alertes li{
  position:relative;padding:8px 0 8px 24px;font-size:.94rem;color:var(--texte-doux);
}
.nv2 .mx-alertes li::before{
  content:"!";position:absolute;left:0;top:10px;width:16px;height:16px;border-radius:50%;
  background:var(--ambre);color:var(--ambre-encre);font-size:.66rem;font-weight:800;
  display:grid;place-items:center;
}
.nv2 .mx-scenario,.nv2 .metier-q{
  background:var(--encre-2);color:#fff;border-radius:var(--rayon);
  padding:26px 28px;margin-bottom:24px;
}
.nv2 .mx-scenario h3{color:#fff;font-size:1.12rem;margin-bottom:10px}
.nv2 .mx-scenario p{color:rgba(255,255,255,.80);line-height:1.75}
.nv2 .mx-preuve strong{color:var(--texte)}
.nv2 .metier-tag,.nv2 .ticket-titre,.nv2 .preuve-lbl,.nv2 .price-label{
  font-family:var(--police);font-size:.76rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent-fonce);
}
.nv2 .preuve-chiffre,.nv2 .price,.nv2 .price-tag strong{
  font-family:var(--mono);font-weight:700;letter-spacing:-.03em;color:var(--texte);
}
.nv2 .price{font-size:2.2rem;display:block}
.nv2 .price-tag{display:flex;align-items:baseline;gap:8px}
.nv2 .urgent{color:var(--ambre-lisible);font-weight:700}
.nv2 .cascade li,.nv2 .cascade p{color:var(--texte-doux)}

/* ---------- Questions frequentes ---------- */
.nv2-metier .faq{margin-top:30px;border-top:1px solid var(--ligne);max-width:860px}
.nv2 .faq .c,.nv2 .faq .answer,.nv2 .faq-corps,.nv2 .faq details p{
  padding:0 0 20px;color:var(--texte-doux);font-size:.97rem;max-width:72ch;
}
.nv2 .faq details p{padding-bottom:12px}

/* ---------- Comparatif ---------- */
.nv2 .comparison-wrap{overflow-x:auto;border:1px solid var(--ligne);border-radius:var(--rayon);margin-top:26px}
.nv2 .comparison-table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--surface)}
.nv2 .comparison-table th,.nv2 .comparison-table td{
  padding:14px 16px;text-align:left;border-bottom:1px solid var(--ligne);vertical-align:top;
}
.nv2 .comparison-table thead th{
  background:var(--surface-2);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-fonce);
}
.nv2 .comparison-table [data-highlight]{background:rgba(18,179,159,.07)}
.nv2 .comparison-table tr:last-child td,.nv2 .comparison-table tr:last-child th{border-bottom:none}
.nv2 .tbl-src{color:var(--texte-doux);font-size:.86rem;margin-top:12px}

/* ---------- Calculette « cout d'un appel manque » ---------- */
.nv2-metier .calc{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:26px;align-items:start;
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-l);
  padding:clamp(22px,3vw,30px);box-shadow:var(--ombre);
}
.nv2 .calc-champs{display:grid;gap:16px}
.nv2 .calc-champs label{display:grid;gap:7px;font-size:.9rem;color:var(--texte-doux);line-height:1.35}
.nv2 .calc-champs input{
  font-family:var(--mono);font-size:1.1rem;font-weight:700;color:var(--texte);
  padding:11px 13px;border:1px solid var(--ligne);border-radius:10px;
  background:var(--surface);width:100%;max-width:220px;
}
.nv2 .calc-res{
  display:block;background:var(--encre);color:#fff;border-radius:var(--r-l);
  padding:26px 28px;font-size:.96rem;line-height:1.6;
}
.nv2 .calc-res .gros{
  display:block;font-family:var(--mono);font-size:2.2rem;font-weight:700;
  letter-spacing:-.04em;color:var(--ambre);margin-bottom:6px;
}
.nv2 .calc-res .cmp{
  display:block;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);font-size:.9rem;
}
.nv2 .calc-src{margin-top:20px;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--surface)}
.nv2 .calc-src summary{cursor:pointer;padding:16px 22px;font-weight:700;font-size:.95rem;color:var(--accent-fonce)}
.nv2 .calc-src-corps{padding:0 22px 20px;color:var(--texte-doux);font-size:.92rem}
.nv2 .calc-src-corps p{margin:0 0 13px}

/* ---------- Appel final et formulaire de rappel ---------- */
.nv2 .cta-final,.nv2 .final-cta,.nv2 .cta-band{
  background:
    radial-gradient(80% 130% at 88% 10%, rgba(18,179,159,.26) 0%, rgba(18,179,159,0) 60%),
    var(--encre);
  color:#fff;padding-block:clamp(48px,6.4vw,82px);
}
.nv2 .cta-final h2,.nv2 .final-cta h2,.nv2 .cta-band h2{color:#fff}
.nv2 .cta-final p,.nv2 .final-cta p:not(.eyebrow),.nv2 .cta-band p:not(.eyebrow){color:rgba(255,255,255,.80)}
.nv2 .formc{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-l);
  padding:clamp(24px,3.4vw,34px);box-shadow:var(--ombre-haute);
}
.nv2 .formc h3{color:var(--texte);font-size:1.15rem}
.nv2 .formc .s{color:var(--texte-doux);font-size:.93rem;margin:6px 0 20px}
.nv2-metier .champ,.nv2 .field{display:grid;gap:6px;margin-bottom:14px}
.nv2-metier .champ label,.nv2 .field label{
  font-family:var(--police);font-size:.84rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--texte);
}
.nv2-metier .formc .champ input,.nv2 .field input,.nv2 .field select,.nv2 .field textarea{
  width:100%;font-family:var(--police);font-size:1rem;padding:12px 14px;
  border:1px solid var(--ligne);border-radius:11px;background:var(--surface-2);color:var(--texte);
}
.nv2-metier .formc .champ input:focus-visible,.nv2 .field input:focus-visible{
  outline:2px solid var(--action);outline-offset:1px;background:var(--surface);
}
.nv2 .formc .btn,.nv2 .formc .button,.nv2 .form-card .button{width:100%;margin-top:6px}
.nv2-metier .rgpd,.nv2 .form-help,.nv2 .form-promise{
  font-size:.8rem;color:var(--texte-doux);margin-top:12px;line-height:1.5;
}
.nv2 .hp,.nv2 .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nv2 .lead-minimum{
  margin:14px 0;padding:11px 13px;border-radius:9px;
  background:var(--surface-2);color:var(--texte-doux);font-size:.9rem;
}
.nv2 .lead-minimum strong{color:var(--texte)}
.nv2 .lead-optional,.nv2 .optional-fields{
  margin:12px 0 0;border:1px solid var(--ligne);border-radius:9px;background:var(--surface-2);
}
.nv2 .lead-optional summary,.nv2 .optional-fields summary{
  position:relative;padding:11px 36px 11px 12px;color:var(--texte);
  font-size:.9rem;font-weight:700;cursor:pointer;list-style:none;
}
.nv2 .lead-optional summary::-webkit-details-marker,
.nv2 .optional-fields summary::-webkit-details-marker{display:none}
.nv2 .lead-optional summary::after,.nv2 .optional-fields summary::after{
  content:"+";position:absolute;top:50%;right:13px;transform:translateY(-50%);
  color:var(--accent-fonce);font-size:1.2rem;
}
.nv2 .lead-optional[open] summary::after,.nv2 .optional-fields[open] summary::after{content:"−"}
.nv2 .lead-optional summary span,.nv2 .optional-fields summary span{
  color:var(--texte-doux);font-size:.78rem;font-weight:500;
}
.nv2 .lead-optional .champ{padding:0 12px 12px}
.nv2 .ok{display:none;text-align:center;padding:20px 0}
.nv2 .ok .ch{
  width:56px;height:56px;border-radius:50%;margin:0 auto 14px;
  background:rgba(18,179,159,.14);border:1px solid rgba(18,179,159,.4);
  color:var(--accent-fonce);display:grid;place-items:center;font-size:1.7rem;
}
.nv2 .form-status{margin:0 0 14px;font-size:.9rem;color:var(--texte-doux)}
.nv2 .form-status.is-error{color:var(--ambre-lisible)}
.nv2 .erreur-envoi{
  margin-top:14px;padding:12px 16px;border-radius:9px;font-size:.9rem;
  background:var(--surface-2);border:1px solid var(--ambre);color:var(--ambre-lisible);
}

/* ---------- Adaptations ---------- */
@media (max-width:1000px){
  .nv2 .split,.nv2 .price-layout,.nv2 .leadg,.nv2 .cta-band-grid,
  .nv2 .metier-summary-grid,.nv2 .hero-grid,.nv2-metier .calc{grid-template-columns:1fr}
  .nv2 .grid3,.nv2 .grid-3,.nv2 .metier-depth__grid,.nv2 .process,
  .nv2 .grid-4,.nv2 .grid-2,.nv2 .metier-demo,.nv2 .filet-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nv2-metier .etapes{grid-template-columns:1fr;gap:26px}
}
@media (max-width:680px){
  .nv2 .grid3,.nv2 .grid-3,.nv2 .metier-depth__grid,.nv2 .process,
  .nv2 .grid-4,.nv2 .grid-2,.nv2 .metier-demo,.nv2 .filet-duo{grid-template-columns:1fr}
  .nv2 .mx-questions,.nv2 .mx-alertes,.nv2 .mx-scenario{padding:20px 18px}
  .nv2 .metier-actions,.nv2-metier .hero .cta,.nv2 .hero-actions{display:grid}
  .nv2 .metier-actions .button,.nv2 .metier-actions .btn,
  .nv2-metier .hero .cta .btn,.nv2 .hero-actions .button{width:100%}
  .nv2 .calc-champs input{max-width:none}
}
@media (pointer:coarse){
  .nv2 .sector-card a,.nv2 .more-link a,.nv2 .metier-depth__next a{
    display:inline-flex;align-items:center;min-height:32px;
  }
}

/* =======================================================================
   La carte « La plus choisie » en theme sombre
   -----------------------------------------------------------------------
   Constat : la carte phare etait a 1,06:1 de contraste avec ses voisines,
   et meme legerement PLUS SOMBRE qu'elles — donc indistinguable. Le filet
   turquoise d'1 px pose au lot precedent etait une fausse solution : un
   trait de 1 px ne fait pas une hierarchie. Il est retire.
   Decision : la carte phare est ECLAIRCIE (bleu d'encre clair, ~2,9:1
   avec les cartes voisines, la barre des 3:1 des elements non textuels)
   et coiffee d'un bandeau turquoise de 5 px, visible dans les deux
   themes. Vaut pour l'accueil, /tarifs et les pages metier.
   ======================================================================= */
.nv2 .offre--phare,.nv2 .card-phare{position:relative}
/* Le bandeau epouse l'arrondi de la carte. Surtout pas « overflow:hidden »
   sur la carte : le ruban « La plus choisie », pose a -13 px au-dessus du
   bord, serait coupe en deux — constate a l'ecran sur /tarifs. */
.nv2 .offre--phare::before,.nv2 .card-phare::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--action) 0%,var(--action-vive) 100%);
  border-radius:var(--rayon) var(--rayon) 0 0;
}
.nv2 .offre--phare::before{border-radius:var(--r-l) var(--r-l) 0 0}
.nv2 .card-phare{
  background:var(--encre);color:#fff;border-color:transparent;
  box-shadow:var(--ombre-haute);padding-top:30px;
}
.nv2 .card-phare h3{color:#fff}
.nv2 .card-phare p{color:rgba(255,255,255,.82)}
.nv2 .card-phare strong{color:var(--action-vive)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nv2 .offre--phare,
  :root:not([data-theme="light"]) .nv2 .card-phare{background:#3A6B9B;border-color:transparent}
  :root:not([data-theme="light"]) .nv2 .offre--phare .offre__par-jour,
  :root:not([data-theme="light"]) .nv2 .offre--phare summary,
  :root:not([data-theme="light"]) .nv2 .offre--phare .offre__cond,
  :root:not([data-theme="light"]) .nv2 .card-phare strong{color:#B5F5EA}
}
:root[data-theme="dark"] .nv2 .offre--phare,
:root[data-theme="dark"] .nv2 .card-phare{background:#3A6B9B;border-color:transparent}
:root[data-theme="dark"] .nv2 .offre--phare .offre__par-jour,
:root[data-theme="dark"] .nv2 .offre--phare summary,
:root[data-theme="dark"] .nv2 .offre--phare .offre__cond,
:root[data-theme="dark"] .nv2 .card-phare strong{color:#B5F5EA}

/* Etats du formulaire de rappel des pages metier : pilotes par classe, pour
   qu'aucun attribut « style » ne soit ecrit par le script (la politique de
   securite garde « style-src-attr 'none' »). */
.nv2 .ok.visible{display:block}
.nv2 .champ-invalide input{border-color:var(--ambre)}

/* Utilitaires des pages metier : ils remplacent les 129 attributs « style »
   qui etaient poses dans le HTML. Aucun attribut de style ne subsiste, la
   politique de securite garde donc « style-src-attr 'none' ». */
.nv2 .texte-doux{color:var(--texte-doux)}
.nv2 .accent-fort{color:var(--accent-fonce);font-weight:700}
.nv2 .marge-8{margin-top:8px}
.nv2 .marge-12{margin-top:12px}
.nv2 .marge-14{margin-top:14px}
.nv2 .marge-18{margin-top:18px}
.nv2 .marge-22{margin-top:22px}
.nv2 .marge-26{margin-top:26px}
.nv2 .marge-28{margin-top:28px}
.nv2 .marge-30{margin-top:30px}
.nv2 .une-colonne{grid-template-columns:1fr}
.nv2 .defilement-x{overflow-x:auto}
/* Sur fond d'encre, le texte adouci doit rester clair. */
.nv2 .hero .texte-doux,.nv2 .cta-final .texte-doux,
.nv2 .final-cta .texte-doux,.nv2 .mx-scenario .texte-doux{color:rgba(255,255,255,.80)}

/* Liens poses sur un fond d'encre : sans cette regle ils heritent du vert
   fonce des liens sur fond clair, illisible sur l'encre (constate a l'ecran
   sur « Estimez-la avec vos propres chiffres » dans l'encart .roi). */
.nv2 .roi a,.nv2 .mx-scenario a,.nv2 .calc-res a,
.nv2 .cta-final a:not(.btn):not(.button),
.nv2 .final-cta a:not(.btn):not(.button),
.nv2 .cta-band a:not(.btn):not(.button),
.nv2-metier .hero a:not(.btn):not(.button):not(.al-nav__link){
  color:var(--action-vive);
}
/* La carte phare des pages metier reprend aussi la vignette numerotee et
   les listes de la carte, sur fond d'encre. */
.nv2 .card-phare .metier-depth__number,.nv2 .card-phare .step-number{
  background:rgba(255,255,255,.10);color:var(--action-vive);
}
.nv2 .card-phare li,.nv2 .card-phare .texte-doux{color:rgba(255,255,255,.82)}
.nv2 .card-phare a:not(.btn):not(.button){color:var(--action-vive)}

/* Les encarts d'encart .roi portent parfois un titre : sans cette regle il
   restait a la couleur d'encre des titres, donc invisible sur l'encre
   (constate a l'ecran sur /cout-appel-manque). */
.nv2 .roi h2,.nv2 .roi h3,.nv2 .roi h4,
.nv2 .mx-scenario h2,.nv2 .encart-controle h2,.nv2 .encart-controle h3,
.nv2 .calc-res h3{color:#fff}
.nv2 .roi li,.nv2 .encart-controle li{color:rgba(255,255,255,.84)}

/* ---------- Reprises constatees a l'ecran, pas au garde (LOT 3) ----------
   1. « .etape-num » existe aussi dans l'ancienne feuille, ou c'est une
      PASTILLE de 20 px posee en absolu au coin de l'etape. Sur les pages
      metier, le meme nom de classe porte un libelle entier (« 01 —
      SELECTION ») : la pastille le repliait sur le titre. On rend l'element
      a son flux.
   2. « .metier-chiffres » collait le nombre a son libelle (« 20metiers
      presentes ») : chacun reprend sa ligne, comme le ruban de l'accueil.
   3. Le selecteur de metier du calculateur restait un menu natif brut.
   4. « .narrow », « .sectors-intro » et « .metier-depth__intro » sont parfois
      poses SUR le conteneur : la colonne entiere se retrecissait et se
      recentrait, et l'entree en matiere ne s'alignait plus sur le reste de
      la page. La largeur de lecture revient sur le contenu. */
.nv2-metier .etape-num{
  position:static;width:auto;height:auto;border-radius:0;background:none;
  color:var(--accent-fonce);display:inline-block;
}
.nv2 .metier-chiffres>div{
  background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:18px 20px;
}
.nv2 .metier-chiffres .v{
  display:block;font-family:var(--mono);font-size:1.6rem;font-weight:700;
  letter-spacing:-.03em;color:var(--accent-fonce);
}
.nv2 .metier-chiffres .l{display:block;margin-top:4px;color:var(--texte-doux);font-size:.9rem}
.nv2 .calc-champs select{
  font-family:var(--police);font-size:1rem;padding:11px 13px;
  border:1px solid var(--ligne);border-radius:10px;
  background:var(--surface);color:var(--texte);width:100%;max-width:320px;
}
.nv2 .calc-champs select:focus-visible{outline:2px solid var(--action);outline-offset:1px}
.nv2 .wrap.narrow,.nv2 .wrap.sectors-intro,.nv2 .wrap.metier-depth__intro{max-width:1200px}
.nv2 .wrap.narrow>*,.nv2 .wrap.sectors-intro>*,.nv2 .wrap.metier-depth__intro>*{max-width:64ch}
.nv2-metier .hero .hero-note,.nv2-metier .hero .note{color:rgba(255,255,255,.62)}
/* La carte phare annule le filet superieur de « .card-accent » et le trait
   de « .secteur » : le bandeau turquoise tient ce role a lui seul. */
.nv2 .card-phare{border:1px solid transparent}

/* =======================================================================
   SOCLE VISUEL 2026-09-18 — LOT 4 : les 11 dernieres pages
   -----------------------------------------------------------------------
   Pages concernees : 404, /pages, les trois atterrissages publicitaires
   (devis, rappel, demande-rappel), le tunnel de souscription, l'espace
   client, la plateforme interne, la formation reception, l'examen final
   et l'ancien test de francais.
   Elles portaient leur mise en forme EN LIGNE, chacune avec sa propre
   palette : quatre turquoise differents, trois familles de boutons, deux
   fonds de page. Tout est repris ici, en jetons communs.
   Regle inchangee : rien ne s'applique sans « nv2 » sur <body>. Les noms
   sont prefixes (« pub- », « tun- », « app- ») pour qu'aucun ne rencontre
   une classe de contenu deja portee par l'ancienne feuille.
   ======================================================================= */

/* ---------- Sommaire de /pages : la barre de categories ---------- */
.nv2 .sommaire-pages{
  display:flex;flex-wrap:wrap;gap:9px;
  border:1px solid var(--ligne);border-radius:var(--r-l);
  background:var(--surface);box-shadow:var(--ombre);padding:16px;
}
.nv2 .sommaire-pages a{
  display:inline-flex;align-items:center;min-height:38px;
  padding:8px 14px;border-radius:999px;
  background:var(--surface-2);color:var(--texte);
  font-size:.92rem;font-weight:700;text-decoration:none;
  transition:background .16s,color .16s;
}
.nv2 .sommaire-pages a:hover{background:var(--accent-fonce);color:#fff}
/* L'en-tete est collee : sans cette marge, un saut d'ancre place le titre
   de section SOUS la barre. Portee a la seule page de sommaire. */
.nv2-sommaire section[id]{scroll-margin-top:86px}

/* ---------- Atterrissages publicitaires ----------
   En-tete FERMEE : le logo seul, aucune navigation. C'est voulu — une
   page achetee au clic ne propose pas dix portes de sortie. Le marqueur
   « nv2-pub » sur <body> retire donc la barre de navigation et le menu. */
.nv2-pub .entete .nav,
.nv2-pub .entete .burger,
.nv2-pub .entete .tiroir,
.nv2-pub .entete__rang>.btn{display:none}
.nv2-pub .entete{position:static}
.nv2-pub .entete__rang{min-height:60px}

.nv2 .pub-grille{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(30px,4.5vw,56px);align-items:start;
  padding-block:clamp(38px,5vw,64px);
}
.nv2 .pub-grille h1{color:#fff;font-size:clamp(1.8rem,4.4vw,2.9rem);margin-bottom:16px}
.nv2 .pub-grille h1 em{font-style:normal;color:var(--action-vive)}
.nv2 .pub-sous{color:rgba(255,255,255,.82);font-size:1.08rem;max-width:52ch}
.nv2 .pub-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.nv2 .pub-points li{
  display:flex;gap:10px;align-items:flex-start;
  color:rgba(255,255,255,.86);font-size:1rem;
}
.nv2 .pub-points .coche{margin-top:4px;color:var(--action-vive)}
.nv2 .pub-prix{
  display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:8px;
  margin-top:26px;padding:16px 22px;border-radius:var(--rayon);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
}
.nv2 .pub-prix strong{font-family:var(--mono);font-size:1.7rem;font-weight:700;color:#fff;letter-spacing:-.03em}
.nv2 .pub-prix span{color:rgba(255,255,255,.72);font-size:.94rem}

/* La carte du formulaire : blanche sur l'encre, c'est elle qui doit
   attraper l'oeil. Elle reste blanche dans les deux themes. */
.nv2 .pub-carte{
  background:#fff;color:#26333F;border-radius:var(--r-l);
  box-shadow:var(--ombre-haute);padding:26px 26px 22px;
}
.nv2 .pub-carte h2{font-size:1.28rem;color:#0B1A2E;margin-bottom:4px}
.nv2 .pub-carte .pub-gratuit{color:#0A6E61;font-weight:700;font-size:.94rem;margin-bottom:16px}
.nv2 .pub-carte fieldset{border:0;padding:0;margin:0;min-width:0}
.nv2 .pub-carte legend{font-weight:800;font-size:1.04rem;color:#0B1A2E;margin-bottom:12px;padding:0}
/* Sans JavaScript, les trois etapes restent visibles et le formulaire part
   en POST classique : c'est le script qui replie, jamais l'inverse. La
   jauge et les boutons « revenir » n'apparaissent donc qu'une fois le
   script en place — sinon ils promettent une mecanique qui n'existe pas. */
.nv2 .pub-prog,.nv2 .pub-retour{display:none}
.nv2 form.js-on .pub-retour{display:inline-block}
.nv2 form.js-on .pub-prog{display:flex}
.nv2 .pub-prog{align-items:center;gap:10px;margin-bottom:18px;font-size:.84rem;color:#4A5A6A}
.nv2 .pub-prog .pub-barre{flex:1;height:6px;border-radius:999px;background:#EEF4F3;overflow:hidden}
.nv2 .pub-prog .pub-barre i{display:block;height:100%;border-radius:999px;background:#12B39F;transition:width .25s ease}
.nv2 .pub-prog .pub-barre.pas-1 i{width:33%}
.nv2 .pub-prog .pub-barre.pas-2 i{width:67%}
.nv2 .pub-prog .pub-barre.pas-3 i{width:100%}
.nv2 .pub-choix{display:grid;gap:9px}
.nv2 .pub-choix label{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  border:1.5px solid #D8E2E0;border-radius:11px;padding:12px 14px;
  background:#fff;color:#26333F;font-size:1rem;
  transition:border-color .15s,background .15s;
}
.nv2 .pub-choix label:hover{border-color:#12B39F;background:#F7FCFB}
.nv2 .pub-choix input{accent-color:#0A6E61;width:18px;height:18px;flex:none}
.nv2 .pub-choix input:checked+span{font-weight:700}
.nv2 .pub-champ{display:block;margin-bottom:12px;font-weight:700;font-size:.92rem;color:#0B1A2E}
.nv2 .pub-champ small{font-weight:400;color:#61707F}
.nv2 .pub-champ input,.nv2 .pub-champ select{
  display:block;width:100%;margin-top:6px;padding:12px 13px;
  border:1.5px solid #D8E2E0;border-radius:10px;
  background:#fff;color:#26333F;font:inherit;font-weight:400;
}
.nv2 .pub-champ select{min-height:46px}
.nv2 .pub-champ input:focus-visible,
.nv2 .pub-champ select:focus-visible{outline:2px solid #0A6E61;outline-offset:1px;border-color:#12B39F}
.nv2 .pub-carte .btn{width:100%;background:#12B39F;color:#04201C;box-shadow:none}
.nv2 .pub-carte .btn:hover{background:#0A6E61;color:#fff}
.nv2 .pub-carte .btn[disabled]{opacity:.6;cursor:wait}
.nv2 .pub-retour{
  background:none;border:0;padding:6px 2px;margin-top:12px;
  color:#4A5A6A;font:inherit;font-size:.88rem;text-decoration:underline;cursor:pointer;
}
.nv2 .pub-note{font-size:.82rem;color:#4A5A6A;margin-top:12px}
.nv2 .pub-note a{color:inherit}
.nv2 .pub-erreur{color:#8C2F1B;font-weight:700;margin-top:10px;font-size:.94rem;min-height:1.2em}
.nv2 .pub-succes{display:none;text-align:center;padding:14px 0;color:#26333F}
.nv2 .pub-succes.visible,.nv2 .pub-succes.show{display:block}
.nv2 .pub-succes h3{color:#0B1A2E;margin-bottom:8px}
.nv2 .pub-rond{
  width:56px;height:56px;border-radius:50%;margin:0 auto 14px;
  background:#12B39F;color:#04201C;display:grid;place-items:center;
}
.nv2 .pub-masque{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

.nv2 .pub-faits{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;
}
.nv2 .pub-faits strong{
  display:block;font-family:var(--mono);font-size:1.4rem;font-weight:700;
  letter-spacing:-.03em;color:var(--accent-fonce);
}
.nv2 .pub-faits span{display:block;margin-top:4px;font-size:.9rem;color:var(--texte-doux)}

/* Le bloc « pourquoi nous confier votre ligne » : trois cartes sur encre. */
.nv2 .pub-confiance{
  background:var(--encre);color:#fff;border-radius:var(--r-l);
  padding:clamp(26px,4vw,44px);
}
.nv2 .pub-confiance h2{color:#fff}
.nv2 .pub-confiance .chapeau{color:rgba(255,255,255,.78)}
.nv2 .pub-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.nv2 .pub-cartes article{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rayon);padding:22px;
}
.nv2 .pub-cartes h3{color:var(--action-vive);margin-bottom:8px}
.nv2 .pub-cartes p{color:rgba(255,255,255,.82);font-size:.95rem}

@media (max-width:900px){
  .nv2 .pub-grille{grid-template-columns:1fr;gap:30px}
  .nv2 .pub-faits{grid-template-columns:repeat(2,1fr)}
  .nv2 .pub-cartes{grid-template-columns:1fr}
}

/* ---------- Tunnel de souscription ----------
   Une seule colonne centree, sans navigation ni pied de page : c'est un
   parcours, pas une page a explorer. Les cinq ecrans vivent dans la meme
   carte et le script ne montre que celui en cours. */
.nv2-tunnel{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,28px);
  background:
    radial-gradient(120% 120% at 80% 8%, var(--encre-3) 0%, var(--encre) 55%);
}
.nv2 .tun-carte{
  position:relative;overflow:hidden;width:100%;max-width:580px;
  background:var(--surface);border:1px solid var(--ligne);
  border-radius:22px;box-shadow:var(--ombre-haute);
}
.nv2 .tun-carte::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--action) 0%,var(--action-vive) 100%);
}
.nv2 .tun-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:28px 32px 0}
.nv2 .tun-tete .logo img{height:24px}
.nv2 .tun-tete .logo .clair{display:none}
.nv2 .tun-tete .logo .sombre{display:block}
.nv2 .tun-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-fonce);
}
.nv2 .tun-badge::before{content:"";width:20px;height:1.5px;background:var(--action)}
.nv2 .tun-lien-client{margin-left:auto;font-size:.84rem;color:var(--texte-doux)}
.nv2 .tun-intro{padding:14px 32px 0;font-size:.88rem;color:var(--texte-doux)}
/* Meme principe que les atterrissages : tant que le script n'a pas pose
   « js-on » sur la carte, aucun bouton d'etape n'est affiche. Sans lui,
   le visiteur voit l'offre puis le formulaire de repli du bloc noscript,
   et jamais un bouton qui ne fait rien. */
.nv2 .tun-jalons,.nv2 .tun-pas,.nv2 .tun-actions{display:none}
.nv2 .js-on .tun-jalons,.nv2 .js-on .tun-actions{display:flex}
.nv2 .js-on .tun-pas{display:block}
.nv2 .tun-jalons{gap:8px;padding:20px 32px 6px}
.nv2 .tun-jalon{flex:1;height:4px;border-radius:999px;background:var(--ligne)}
.nv2 .tun-jalon.on{background:var(--action)}
.nv2 .tun-pas{
  padding:4px 32px 0;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--texte-doux);
}
.nv2 .tun-corps{padding:16px 32px 32px}
.nv2 .tun-ecran{display:none}
.nv2 .tun-ecran.show{display:block}
.nv2 .tun-ecran h1,.nv2 .tun-ecran h2{font-size:1.55rem;margin-bottom:6px}
.nv2 .tun-ecran .tun-sous{color:var(--texte-doux);font-size:.95rem;margin-bottom:18px}
.nv2 .tun-centre{text-align:center}

.nv2 .tun-atouts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;padding:0;list-style:none}
.nv2 .tun-atouts li{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface-2);border:1px solid var(--ligne);border-radius:999px;
  padding:6px 13px;font-size:.8rem;font-weight:700;color:var(--texte);
}
.nv2 .tun-atouts .coche{color:var(--accent-fonce)}

.nv2 .tun-offre{
  position:relative;overflow:hidden;border-radius:var(--rayon);
  background:var(--encre);color:#fff;padding:24px;margin-bottom:14px;
}
.nv2 .tun-offre .tun-prix{font-family:var(--mono);font-size:2rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff}
.nv2 .tun-offre .tun-prix small{
  display:block;margin-top:9px;font-family:var(--police);font-size:.9rem;
  font-weight:400;letter-spacing:normal;line-height:1.4;color:rgba(255,255,255,.72);
}
.nv2 .tun-lien-client{text-decoration:underline;text-underline-offset:2px}
.nv2 .tun-gratuit{
  display:inline-block;margin-top:12px;padding:5px 13px;border-radius:999px;
  background:var(--action);color:var(--sur-action);font-size:.76rem;font-weight:700;
}
.nv2 .tun-offre ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.nv2 .tun-offre li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:rgba(255,255,255,.84)}
.nv2 .tun-offre .coche{margin-top:3px;color:var(--action-vive)}

.nv2 .tun-sim{
  background:var(--surface-2);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:18px;margin:0 0 22px;
}
.nv2 .tun-sim h2{font-size:1.06rem;margin-bottom:5px}
.nv2 .tun-sim-statut{font-size:.85rem;color:var(--texte-doux);margin-bottom:15px}
.nv2 .tun-sim-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nv2 .tun-sim-champ label{display:block;font-size:.8rem;font-weight:700;margin-bottom:6px}
.nv2 .tun-sim-champ output{display:block;margin-top:4px;font-family:var(--mono);font-weight:700;font-size:.9rem;color:var(--accent-fonce)}
.nv2 .tun-sim-res{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--ligne);
}
.nv2 .tun-sim-res span{font-size:.82rem;color:var(--texte-doux)}
.nv2 .tun-sim-res strong{font-family:var(--mono);font-size:1.35rem;letter-spacing:-.03em}
.nv2 .tun-sim-note{font-size:.78rem;color:var(--texte-doux);margin-top:12px}

.nv2 .tun-champ{margin-bottom:15px}
.nv2 .tun-champ label{display:block;font-size:.83rem;font-weight:700;margin-bottom:7px}
.nv2 .tun-champ input,.nv2 .tun-champ select,.nv2 .tun-champ textarea{
  width:100%;font-family:inherit;font-size:.95rem;padding:12px 14px;
  border:1px solid var(--ligne);border-radius:11px;
  background:var(--surface-2);color:var(--texte);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.nv2 .tun-champ input:focus-visible{border-color:var(--action);background:var(--surface)}
.nv2 .tun-champ input[aria-invalid="true"]{border-color:#B25B54;background:#FFF8F7}
.nv2 .tun-aide{font-size:.78rem;color:var(--texte-doux);margin-top:6px}
.nv2 .tun-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nv2 .tun-obligatoires{font-size:.78rem;color:var(--texte-doux);margin:-10px 0 16px}
.nv2 .tun-erreur{
  margin:0 0 16px;padding:12px 14px;border-radius:10px;
  background:#FBEDEC;border:1px solid #E2B6B2;color:#8C3A33;
  font-size:.9rem;font-weight:700;
}
.nv2 .tun-erreur a{color:#8C3A33;font-weight:800}
.nv2 .tun-erreur-champ{color:#8C3A33;font-size:.8rem;font-weight:700;margin-top:6px;line-height:1.4}
.nv2 .tun-erreur[hidden],.nv2 .tun-erreur-champ[hidden]{display:none}
.nv2 .tun-collab{display:flex;gap:10px;margin-bottom:10px}
.nv2 .tun-collab input{flex:1;min-width:0}
.nv2 .tun-ajout{
  width:100%;padding:11px;border-radius:11px;
  border:1px dashed var(--ligne);background:var(--surface-2);
  color:var(--texte);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;
}
.nv2 .tun-ajout:hover{border-color:var(--action)}
.nv2 .tun-ajout[disabled]{opacity:.5;cursor:not-allowed}
.nv2 .tun-cgv{display:flex;gap:10px;align-items:flex-start;margin:6px 0 4px;font-size:.85rem}
.nv2 .tun-cgv input{margin-top:3px;accent-color:var(--action);width:16px;height:16px;flex-shrink:0}
.nv2 .tun-cgv.en-erreur{color:#8C3A33}
.nv2 .tun-actions{display:flex;gap:12px;margin-top:24px}
.nv2 .tun-actions .btn{flex:1}
.nv2 .tun-actions .btn--sobre{flex:0 0 auto}
.nv2 .tun-recap{
  text-align:left;background:var(--surface-2);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:16px 18px;margin-top:16px;font-size:.88rem;
}
.nv2 .tun-recap div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--ligne)}
.nv2 .tun-recap div:last-child{border-bottom:none}
.nv2 .tun-recap span{color:var(--texte-doux)}
.nv2 .tun-recap strong{text-align:right}
.nv2 .tun-mention{margin-top:18px;font-size:.82rem;color:var(--texte-doux);line-height:1.55}

@media (max-width:540px){
  .nv2 .tun-duo,.nv2 .tun-sim-champs{grid-template-columns:1fr}
  .nv2 .tun-tete,.nv2 .tun-corps,.nv2 .tun-jalons,.nv2 .tun-pas,.nv2 .tun-intro{
    padding-left:20px;padding-right:20px;
  }
  .nv2 .tun-collab{flex-direction:column}
}

/* ---------- Ecrans applicatifs (espace client, plateforme, formation) ----
   Ces pages ne sont pas des pages de site : elles ont leur propre mise en
   page, servie derriere authentification. Elles ne reprennent ici que le
   socle commun — polices, jetons, champs, boutons — pour qu'aucune ne
   dependante plus des anciennes feuilles separees. */
/* ---------- Ecrans authentifies : ils ne sont PAS dans cette feuille -----
   Le portail client, la console de la Direction, le cursus de formation et
   l'examen final portent « nv2 » comme le reste du site — ils prennent ici
   les polices, les jetons, les boutons et les champs — mais leur mise en
   page vit dans « /ecrans-internes.css », charge par ces quatre pages
   seulement. Motif : leurs 77 Ko n'ont rien a faire dans la feuille que
   telechargent les 52 pages publiques, qu'aucun visiteur ne quittera pour
   aller voir une console interne.
   Leurs marqueurs : « nv2-espaces » (portail + Direction) et
   « nv2-cursus » (formation + examen), puis un marqueur par page. */