/* ============================================================
   RETRAITE TAUX PLEIN — design system
   Cormorant Garamond / Spectral / Public Sans, palette bleu-ardoise
   et laiton chaud. Toutes les valeurs sont déclarées ci-dessous et
   ne dépendent d'aucune feuille externe.
   ============================================================ */
:root{
  --deep:#123C4A; --deep-2:#0C2833; --ink:#22302F; --muted:#5A6A6B;
  --rule:#DCD2C0; --cream:#FBF7F0; --cream-2:#F2EBDD; --paper:#FFFFFF;
  --brass:#B07E2B; --brass-soft:#D8B871; --coral:#B4462F;
  --display:"Cormorant Garamond",Georgia,serif;
  --serif:"Spectral",Georgia,serif;
  --sans:"Public Sans",-apple-system,system-ui,sans-serif;
  --hand:"Caveat",cursive;
  --max:1140px; --prose:700px; --tight:580px;
  --radius:6px; --radius-lg:12px;
  --shadow:0 1px 0 rgba(12,40,51,.04),0 8px 26px -12px rgba(12,40,51,.18);
  --lift:0 20px 44px -22px rgba(12,40,51,.4);
}
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg,video,table,iframe{max-width:100%}
.grid>*,.twocol>*,.hero-grid>*{min-width:0}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--serif);font-size:17.5px;line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'tnum' 1}
.shell{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--prose);margin:0 auto;padding:0 24px}
.tight{max-width:var(--tight);margin:0 auto;padding:0 24px}
a{color:var(--deep)} a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);color:var(--deep);margin:0;font-weight:600;letter-spacing:0;line-height:1.14}
p{margin:0 0 16px}
strong{color:var(--deep-2)}
.kicker{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0 0 12px}
/* Masquage accessible. `!important` est nécessaire : la règle générique
   `input[type=text]` plus bas est plus spécifique (0,1,1 contre 0,1,0) et
   redonnait au piège à robots une largeur de 100 % plus des marges — ce qui
   élargissait la page de 50 px sur téléphone et créait un défilement
   horizontal sur l'accueil et le simulateur. */
.sr{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;border:0!important;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- bandeau d'offre (injecté par site.js) ---------- */
.promobar{background:var(--deep);color:#F2EBD9;font-family:var(--sans);font-size:14.5px}
.promobar-in{display:flex;align-items:center;justify-content:center;gap:10px 26px;flex-wrap:wrap;
  padding:11px 24px;text-align:center;min-height:44px;color:inherit;text-decoration:none}
.promobar-in:hover{text-decoration:none;background:rgba(255,255,255,.05)}
.promobar-txt b{color:#fff;font-weight:700}
.promobar-pct{display:inline-block;background:var(--brass-soft);color:#0C2833;font-weight:700;
  font-size:12.5px;letter-spacing:.04em;padding:3px 9px;border-radius:999px;margin-left:6px;white-space:nowrap}
.promobar-cd{display:flex;align-items:center;gap:10px}
.promobar-lab{color:#A9C0C5;font-size:13px;white-space:nowrap}
.cd{font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.cd b{color:#fff;font-weight:700}
.rappel{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  background:#FDF6E7;border:1px solid var(--brass-soft);border-radius:var(--radius);
  font-family:var(--sans);font-size:15px;color:var(--deep);padding:12px 16px;margin:0 0 22px;text-align:center}
.rappel b{font-weight:700}
.rappel .cd b{color:var(--deep)}
@media(max-width:760px){
  .promobar{font-size:13px}
  .promobar-in{gap:5px 12px;padding:9px 16px;min-height:0}
  .promobar-pct{font-size:11.5px;padding:2px 7px;margin-left:4px}
  .promobar-lab{font-size:12px}
}

/* ---------- barre haute ---------- */
.topbar{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rule);
  background:rgba(251,247,240,.9);backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px)}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:11px 0}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--deep)}
.brand::before{content:"CM";flex:0 0 auto;width:38px;height:38px;border-radius:9px;
  background:var(--deep);color:var(--brass-soft);font:700 14px/38px var(--sans);
  letter-spacing:.06em;text-align:center}
.brand:hover{text-decoration:none}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-nom{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.012em}
.brand-sous{font:600 9.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}
.brand:hover .brand-nom{color:var(--brass)}

/* ---------- navigation ---------- */
.topnav{display:flex;gap:4px;align-items:center}
.topnav a{position:relative;font-family:var(--sans);font-weight:600;font-size:15px;
  color:var(--deep);text-decoration:none;white-space:nowrap;padding:9px 13px;
  border-radius:var(--radius);transition:background .2s,color .2s}
.topnav a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.topnav a:hover{background:rgba(176,126,43,.09);text-decoration:none}
.topnav a:hover::after,.topnav a[aria-current="page"]::after{transform:scaleX(1)}
.topnav a[aria-current="page"]{color:var(--brass)}
.topnav .nav-cta{background:var(--brass);color:#fff;padding:11px 18px;font-weight:700;
  box-shadow:0 8px 18px -10px rgba(176,126,43,.9)}
.topnav .nav-cta::after{display:none}
.topnav .nav-cta:hover{background:#C08D33;color:#fff}
.topnav .nav-cta[aria-current="page"]{color:#fff}

.nav-toggle{display:none;background:none;border:1.5px solid var(--rule);border-radius:var(--radius);
  padding:9px 12px;cursor:pointer;font:700 14px var(--sans);color:var(--deep);align-items:center;gap:8px}
.nav-toggle svg{width:17px;height:17px}

@media(max-width:900px){
  .nav-toggle{display:inline-flex}
  .topnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--cream);border-bottom:1px solid var(--rule);
    padding:8px 24px 16px;box-shadow:var(--shadow)}
  .topnav.on{display:flex}
  .topnav a{padding:13px 6px;font-size:16.5px;border-bottom:1px solid var(--rule);border-radius:0}
  .topnav a::after{display:none}
  .topnav a:last-child{border-bottom:0}
  .topnav .nav-cta{margin-top:12px;border-radius:var(--radius);text-align:center;padding:15px}
  .topbar-in{position:relative}
}

/* ---------- barre d'action sur téléphone ----------
   Derrière un simple bouton « Menu », le visiteur ne voit aucune destination :
   il ne sait pas que le site vend quelque chose. On sort donc l'appel à
   l'action du menu et on le pose en pleine largeur sous l'en-tête, où il reste
   collé en haut pendant tout le défilement. Le reste (Accueil, Les dossiers)
   demeure dans le menu, où on va le chercher quand on le cherche. */
.cta-tel{display:none}
@media(max-width:900px){
  .cta-tel{display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--brass);color:#fff;font-family:var(--sans);font-weight:700;
    font-size:16px;min-height:48px;padding:12px 18px;text-decoration:none;
    border-top:1px solid rgba(255,255,255,.15)}
  .cta-tel:hover,.cta-tel:visited,.cta-tel:active{color:#fff;text-decoration:none}
  .cta-tel svg{width:17px;height:17px;flex:0 0 auto}
  /* La flèche dit « ceci se clique » sans ajouter un mot. */
  .cta-tel .fleche{width:19px;height:19px;margin-left:2px}
  /* L'appel à l'action est déjà visible : le répéter dans le menu ferait deux
     boutons identiques à trois centimètres l'un de l'autre. */
  .topnav .nav-cta{display:none}
  .brand-sous{display:none}
  .brand-nom{font-size:19px}
}
@media(max-width:420px){
  .brand-nom{font-size:21px}
  .brand::before{width:34px;height:34px;line-height:34px;font-size:13px}
}

/* ---------- bandeau de réassurance ---------- */
/* Bande claire : le bandeau d'offre est déjà foncé juste au-dessus, et deux
   bandes sombres encadrant la barre de navigation écrasaient le haut de page. */
.reassure{background:var(--cream-2);border-bottom:1px solid var(--rule);
  color:var(--muted);font-family:var(--sans);font-size:13.5px}
.reassure ul{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;list-style:none;margin:0;padding:10px 24px}
.reassure li{display:flex;align-items:center;gap:8px}
.reassure b{color:var(--deep);font-weight:700}
.reassure svg{width:15px;height:15px;flex:0 0 auto;color:var(--brass)}
/* La bande se réduit avec la largeur : à quatre repères sur ordinateur, deux
   sur tablette, un seul sur téléphone. Sinon elle passait sur deux lignes et
   repoussait le titre hors du premier écran. */
/* Sur téléphone, la barre d'action « Analyser mon relevé » occupe déjà cette
   place et vaut mieux qu'un rappel : le bandeau s'efface. */
@media(max-width:900px){.reassure{display:none}}

/* ---------- hero ---------- */
.hero{padding:52px 0 46px}
.hero h1{font-size:clamp(28px,4vw,46px);margin:10px 0 16px;letter-spacing:-.014em;text-wrap:balance}
.hero .lede{font-size:clamp(16.5px,1.5vw,19px);color:var(--muted);max-width:54ch;font-style:italic;text-wrap:pretty}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:auto 1fr;
  gap:0 54px;align-items:start}
.hero-grid .hg-titre {grid-column:1;grid-row:1}
.hero-grid .hg-detail{grid-column:1;grid-row:2;align-self:start;padding-top:18px}
.hero-grid aside    {grid-column:2;grid-row:1/3}
/* Sur téléphone, la grille se replie en titre → carte → détail : sans ça, le
   visiteur doit franchir le titre, le chapô et une citation avant d'apercevoir
   la moindre action. Même principe que le bloc d'achat de la page d'analyse. */
@media(max-width:940px){
  .hero-grid{display:flex;flex-direction:column;gap:26px}
  .hero-grid .hg-titre{order:1}
  .hero-grid aside{order:2}
  .hero-grid .hg-detail{order:3;padding-top:0}
}
/* ---------- passage mis en valeur ----------
   Un aplat qui ne couvre que les trois quarts de la hauteur ressemble à un
   coup de marqueur mal posé — sur un site qui vend du sérieux, ça se voit.
   On couvre donc toute la hauteur du texte, hampes et jambages compris, avec
   une teinte plus discrète. box-decoration-break répète l'aplat proprement
   quand le passage se coupe sur deux lignes. */
.hl{
  background-image:linear-gradient(rgba(216,184,113,.34),rgba(216,184,113,.34));
  background-repeat:no-repeat;
  background-size:100% 1.06em;
  background-position:0 .12em;
  padding:.04em .16em;
  border-radius:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Hero de la page de vente. Sur ordinateur, la carte d'offre occupe la colonne
   de droite sur toute la hauteur. Sur téléphone, la grille se déplie en
   TITRE → OFFRE → détail : sans ça la carte partait à plus de 1 300 px de haut
   et presque personne ne la voyait, ce qui vide de son sens l'idée même
   d'une offre placée en début de page. */
/* La colonne de gauche est coupée en deux cellules pour pouvoir se replier en
   titre → offre → détail sur téléphone. Mais le bloc d'offre, qui enjambe les
   deux rangées, est bien plus haut que le texte : sans `1fr` sur la seconde
   rangée, le navigateur répartissait ce surplus entre les deux rangées et
   creusait un trou entre le titre et le paragraphe. La rangée en `1fr` absorbe
   tout le surplus, et le paragraphe reste collé sous le titre. */
.hero-vente{display:grid;grid-template-columns:1.06fr .94fr;grid-template-rows:auto 1fr;
  gap:0 56px;align-items:start}
.hero-vente>*{min-width:0}
.hv-titre {grid-column:1;grid-row:1}
.hv-detail{grid-column:1;grid-row:2;align-self:start;padding-top:20px}
.hv-offre {grid-column:2;grid-row:1/3}

/* L'aperçu du sommaire occupe le bas de la colonne de gauche. Sans lui, le
   texte s'arrêtait à mi-hauteur face à un bloc d'offre deux fois plus haut :
   c'était le grand blanc. */
.hv-liste{list-style:none;margin:14px 0 0;padding:0}
.hv-liste li{position:relative;padding:11px 0 11px 26px;font-family:var(--serif);
  font-size:17.5px;line-height:1.5;border-bottom:1px solid var(--rule)}
.hv-liste li:last-child{border-bottom:0}
.hv-liste li::before{content:"";position:absolute;left:2px;top:20px;
  width:9px;height:1.5px;background:var(--brass)}
.hv-suite{margin:14px 0 0;font-family:var(--sans);font-size:15.5px;font-weight:700}
.hv-suite a{color:var(--brass);text-decoration:none}
.hv-suite a:hover{text-decoration:underline}
@media(max-width:940px){
  .hero-vente{display:flex;flex-direction:column;gap:28px}
  .hv-titre{order:1} .hv-offre{order:2} .hv-detail{order:3;padding-top:0}
}

/* ---------- sections ---------- */
.section{padding:58px 0;border-top:1px solid var(--rule)}
.section.alt{background:var(--cream-2)}
.section.dark{background:var(--deep);color:#D7E3E6;border-color:var(--deep-2)}
.section.dark h2,.section.dark h3{color:#F2EBD9}
.section.dark .kicker{color:var(--brass-soft)}
.section.dark a{color:#E6CE93}
h2.title{font-size:clamp(23px,2.7vw,31px);margin:0 0 16px;letter-spacing:-.008em;text-wrap:balance}
.section-sub{font-size:17.5px;color:var(--muted);max-width:58ch;margin:0 0 36px;font-style:italic;text-wrap:pretty}
.ph{display:inline-block}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:17px;line-height:1.25;
  padding:16px 26px;border:0;border-radius:var(--radius);cursor:pointer;
  background:var(--brass);color:#fff;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  box-shadow:0 10px 22px -12px rgba(176,126,43,.9)}
.btn:hover{background:#C08D33;transform:translateY(-1px);text-decoration:none;color:#fff}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--deep);border:1.5px solid var(--rule);box-shadow:none}
.btn.ghost:hover{background:var(--paper);color:var(--deep)}
.btn.dark{background:var(--deep)} .btn.dark:hover{background:#17505F}
:focus-visible{outline:3px solid var(--brass-soft);outline-offset:2px}

/* ---------- carte formulaire ---------- */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:28px 26px;box-shadow:var(--shadow)}
.card.sticky{position:sticky;top:88px}
@media(max-width:940px){.card.sticky{position:static}}
.card h2{font-size:27px;margin:0 0 8px}
.card .sub{font-family:var(--sans);font-size:15px;color:var(--muted);margin:0 0 22px;line-height:1.55}
label{display:block;font:700 15.5px/1.4 var(--sans);color:var(--deep);margin:0 0 8px}
input[type=email],input[type=text],input[type=tel],input[type=number],select{
  width:100%;font-family:var(--sans);font-size:17.5px;font-weight:500;
  padding:15px 14px;border:1.5px solid var(--rule);border-radius:var(--radius);
  background:var(--cream);color:var(--ink);margin:0 0 18px;appearance:none;-webkit-appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23123C4A' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
input:focus,select:focus{border-color:var(--brass);background:var(--paper)}
.consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;margin:2px 0 20px}
.consent input{width:25px;height:25px;margin:2px 0 0;accent-color:var(--deep);flex:none}
.consent label{font:400 16px/1.55 var(--sans);color:#4A5959;margin:0}
.note{font-family:var(--sans);font-size:13.5px;color:var(--muted);line-height:1.6;margin:16px 0 0}
.err{background:#FBE9E4;border:2px solid #D89478;color:#8C3620;font:700 16px/1.5 var(--sans);
  padding:11px 14px;border-radius:var(--radius);margin:0 0 16px;display:none}

/* ---------- listes numérotées ---------- */
.items{list-style:none;margin:0;padding:0}
.items li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--rule)}
.items li:first-child{border-top:0;padding-top:4px}
.num{font:700 15px/38px var(--sans);width:38px;height:38px;border-radius:50%;
  background:var(--deep);color:var(--brass-soft);text-align:center;font-variant-numeric:tabular-nums}
.items h3{font-family:var(--sans);font-size:16.5px;font-weight:700;color:var(--deep);margin:7px 0 5px}
.items p{margin:0;font-size:16px;color:var(--muted);line-height:1.62}
.flag{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  background:var(--coral);color:#fff;padding:4px 9px;border-radius:3px;vertical-align:middle;margin-left:9px}

/* ---------- statistiques ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0}
@media(max-width:720px){.stats{grid-template-columns:1fr}}
.stat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:22px 24px}
.section.dark .stat{background:rgba(255,255,255,.06);border-color:rgba(216,184,113,.28)}
.stat .n{font-family:var(--display);font-size:38px;font-weight:600;color:var(--deep);line-height:1;letter-spacing:-.02em}
.section.dark .stat .n{color:#F2EBD9}
.stat .n.mot{font-size:24px;line-height:1.15}
.stat .t{font-family:var(--sans);font-size:15px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.section.dark .stat .t{color:#B9CCD0}
.stat .src{font-family:var(--sans);font-size:12.5px;color:var(--muted);opacity:.85;margin:8px 0 0}

/* ---------- citation ---------- */
.quote{border-left:4px solid var(--brass);background:var(--paper);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 26px;margin:30px 0;box-shadow:var(--shadow)}
.quote p{font-style:italic;font-size:17.5px;margin:0 0 10px;color:var(--deep-2)}
.quote cite{font-family:var(--sans);font-size:13.5px;color:var(--muted);font-style:normal}

/* ---------- calculateur à curseurs ----------
   Trois curseurs plutôt que des champs à remplir : on manipule, on voit le
   chiffre bouger. Poignées de 34 px, bien au-delà du minimum tactile — ce
   calculateur s'utilise beaucoup au doigt, et par des mains de 65 ans. */
.calc{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow)}

.sl{margin:0 0 26px}
.sl:last-of-type{margin-bottom:6px}
.sl-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 12px}
.sl-top label{font:700 16px/1.35 var(--sans);color:var(--deep);margin:0}
.sl-top output{font-family:var(--sans);font-weight:800;font-size:25px;color:var(--deep);
  letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.sl-ends{display:flex;justify-content:space-between;font:500 13px var(--sans);color:var(--muted);margin-top:7px}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:12px;margin:0;
  border-radius:999px;cursor:pointer;background:var(--rule);
  /* --p est la part remplie, mise à jour par le script */
  background-image:linear-gradient(90deg,var(--brass) var(--p,0%),transparent var(--p,0%));
  background-repeat:no-repeat}
input[type=range]:focus-visible{outline:3px solid var(--brass);outline-offset:4px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:34px;height:34px;border-radius:50%;
  background:var(--deep);border:4px solid #fff;cursor:grab;
  box-shadow:0 3px 10px rgba(12,40,51,.45)}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.06)}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--deep);border:4px solid #fff;
  cursor:grab;box-shadow:0 3px 10px rgba(12,40,51,.45)}

.calc-total{text-align:center;background:var(--cream-2);border-radius:var(--radius);
  padding:22px 20px;margin:26px 0 0}
.calc-total .l{font:700 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.calc-total .big{font-family:var(--sans);font-weight:800;font-size:clamp(38px,7vw,54px);
  color:var(--coral);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc-total .sub{font-family:var(--sans);font-size:15.5px;color:var(--deep);margin:12px 0 0;line-height:1.5}

.calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 0}
@media(max-width:640px){.calc-out{grid-template-columns:1fr;gap:10px}}
.calc-out div{text-align:center;border:1px solid var(--rule);border-radius:var(--radius);padding:16px 12px}
.calc-out .v{font-family:var(--sans);font-weight:800;font-size:26px;color:var(--deep);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-out .l{font:600 12.5px/1.4 var(--sans);color:var(--muted);margin-top:8px;
  text-transform:uppercase;letter-spacing:.06em}
.calc .hyp{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:20px 0 0;line-height:1.65}
output{display:block}

/* ---------- bloc offre ---------- */
.offre{background:var(--deep);color:#D7E3E6;border-radius:var(--radius-lg);padding:30px;box-shadow:var(--lift)}
/* Les titres des blocs d'achat passent en Public Sans. Le Cormorant est un
   serif à déliés très fins : magnifique en grand sur fond clair, illisible en
   petit sur bleu nuit. C'est la même raison qui met déjà les boutons et les
   formulaires en sans-serif. Le titre s'aligne ainsi sur le texte qu'il coiffe. */
.offre h2{font-family:var(--sans);font-weight:700;font-size:25px;line-height:1.2;
  letter-spacing:-.015em;color:#F2EBD9;margin:0 0 10px}
/* Le prix ne se crie pas. Sur la fiche produit il n'y a rien à barrer : un
   « 39 € » en 46 px met en avant la dépense, pas ce qu'on achète. C'est le
   bouton qui doit dominer. Le pack, lui, garde un gros prix — il est barré à
   117 €, l'écart fait l'argument. */
.offre .prix{font-family:var(--sans);font-weight:800;font-size:35px;color:#fff;letter-spacing:-.02em;line-height:1;margin:0 0 4px}
.offre .prix small{margin-top:7px}
.offre .prix s{font-size:26px;opacity:.5;font-weight:600;margin-left:10px}
.offre .prix small{display:block;font-size:14.5px;font-weight:500;opacity:.8;letter-spacing:0;margin-top:9px}
.offre ul{list-style:none;margin:22px 0;padding:0}
/* Surtout PAS de `display:grid` ici : en grille, CHAQUE nœud enfant devient une
   cellule — y compris les fragments de texte et les <strong> à l'intérieur de
   la puce. Le contenu se retrouvait éclaté en colonnes. La coche est donc
   posée en absolu et le texte coule normalement. */
.offre li{position:relative;padding:9px 0 9px 27px;font-size:16.5px;line-height:1.55}
.offre li::before{content:"✓";position:absolute;left:0;top:9px;color:var(--brass-soft);font-weight:700}
.offre .fin{font-family:var(--sans);font-size:13.5px;color:#A9C0C5;margin:14px 0 0;line-height:1.6}
.offre .livraison{font-size:13px;letter-spacing:.01em;margin-top:12px}
.offre input[type=email]{background:rgba(255,255,255,.94);border-color:transparent}
/* Le gras hérite de `strong{color:var(--deep-2)}` — soit du foncé sur du
   foncé, illisible. Sur tous les fonds sombres, il repasse en clair. */
.offre strong,.section.dark strong,.verdict strong{color:#F2EBD9}
.offre .fin strong{color:#EAD9AE}
.offre label{margin-top:18px}
.offre .err{margin-top:18px}

/* ---------- grille de dossiers ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:600px){.grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

.book{display:flex;flex-direction:column;color:inherit;text-decoration:none;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius-lg);padding:18px 18px 20px;
  box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.book:hover{transform:translateY(-4px);box-shadow:var(--lift);text-decoration:none}
.book h3{font-family:var(--display);font-size:20px;font-weight:600;margin:16px 0 8px;line-height:1.16}
.book p{font-size:16px;color:var(--muted);line-height:1.55;margin:0 0 16px;flex:1}
.book .bas{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--rule);padding-top:14px}
.book .px{font-family:var(--sans);font-weight:800;font-size:23px;color:var(--deep);letter-spacing:-.02em}
.book .go{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--brass)}

/* Les rendus 3D portent déjà leur ombre portée dans le fichier : aucun
   cadre, aucune ombre CSS à ajouter par-dessus. */
/* Un livre bleu nuit posé sur un bloc bleu nuit ne se voit pas : les deux
   valeurs sont trop proches. Plutôt que d'ajouter un cadre clair dans le cadre
   sombre — deux cadres imbriqués, l'œil ne sait plus où regarder — le livre
   sort du bloc et se pose sur le fond clair de la page, juste au-dessus. */
.livre{display:block;width:100%;height:auto;max-width:300px;margin:0 auto 26px}
/* Dans les cartes du catalogue, le livre partage la place avec un titre, un
   résumé et un prix : il y tient une taille plus modeste. */
.book .livre{max-width:190px;margin-bottom:6px}
/* Sur téléphone, un livre de 300 px repousse le prix et le bouton sous la
   ligne de flottaison : le visiteur ne voit plus ce qu'il achète ni à
   combien. */
@media(max-width:760px){.livre{max-width:210px;margin-bottom:20px}}
.livre-pack{display:block;width:100%;height:auto;max-width:500px;margin:0 auto 6px}

.cover{position:relative;aspect-ratio:1/1.42;border-radius:3px;
  background:linear-gradient(158deg,#1a5064 0%,#123C4A 62%,#0C2833 100%);
  padding:26px 22px;display:flex;flex-direction:column;justify-content:space-between;
  filter:drop-shadow(0 18px 28px rgba(12,40,51,.26))}
.cover::before{content:"";position:absolute;left:10px;top:10px;bottom:10px;width:2px;
  background:var(--brass-soft);opacity:.55}
.cv-top{font:600 9.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-soft)}
.cv-title{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.12;color:#F2EBD9}
.cv-rule{width:34px;height:2px;background:var(--brass-soft);opacity:.8;margin:12px 0}
.cv-author{font-family:var(--display);font-style:italic;font-size:15px;color:#DCD2BC}

.pack{background:var(--deep);color:#D7E3E6;border-radius:var(--radius-lg);padding:34px 30px;box-shadow:var(--lift)}
.pack h2{font-family:var(--sans);font-weight:700;font-size:26px;line-height:1.2;
  letter-spacing:-.015em;color:#F2EBD9;margin:0 0 12px}
.pack .px{font-family:var(--sans);font-weight:800;font-size:44px;color:#fff;letter-spacing:-.025em;line-height:1;margin:16px 0 4px}
.pack .px s{font-size:25px;opacity:.5;font-weight:600;margin-left:10px}
.pack .px small{display:block;font-size:14.5px;font-weight:500;opacity:.85;letter-spacing:0;margin-top:9px}
.pack ul{list-style:none;margin:20px 0;padding:0}
/* Même remarque que pour .offre li : la grille éclatait le texte en colonnes. */
.pack li{position:relative;padding:8px 0 8px 27px;font-size:16.5px;line-height:1.5}
.pack li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--brass-soft);font-weight:700}
.pack strong{color:#F2EBD9}
.pack .fin{font-family:var(--sans);font-size:13.5px;color:#A9C0C5;margin:14px 0 0;line-height:1.6}

/* ---------- FAQ ---------- */
details{border-top:1px solid var(--rule);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{font-family:var(--display);font-size:20px;font-weight:600;color:var(--deep);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--sans);font-weight:400;color:var(--brass);font-size:26px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;color:var(--muted);font-size:16.5px}

/* ---------- barre d'action flottante ---------- */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(18,60,74,.97);
  backdrop-filter:blur(10px);padding:11px 0;transform:translateY(120%);transition:transform .3s ease;
  box-shadow:0 -8px 26px -14px rgba(0,0,0,.5)}
.cta-bar.on{transform:translateY(0)}
.cta-bar .in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cta-bar .txt{font-family:var(--sans);font-size:15px;color:#D7E3E6;line-height:1.35}
.cta-bar .txt b{color:#fff;display:block;font-size:16px}
.cta-bar .btn{padding:13px 22px;font-size:16px;white-space:nowrap}
@media(max-width:620px){.cta-bar .txt{display:none}.cta-bar .btn{width:100%}}
/* La barre du bas et la barre collée en haut diraient la même chose au même
   moment : sur téléphone, celle du bas s'efface. */
@media(max-width:900px){.cta-bar{display:none}}

/* ---------- fenêtre de sortie ---------- */
.sortie{position:fixed;inset:0;background:rgba(12,40,51,.74);display:none;
  align-items:center;justify-content:center;padding:20px;z-index:99}
.sortie.on{display:flex}
.sortie .bx{background:var(--cream);border-radius:var(--radius-lg);max-width:450px;width:100%;
  padding:30px 28px 24px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sortie h3{font-size:28px;margin:0 0 12px}
.sortie p{font-size:16.5px;margin:0 0 14px}
.sortie .cle{font-family:var(--display);font-size:21px;font-weight:600;color:var(--deep);
  border-left:4px solid var(--brass);padding-left:14px;margin:0 0 18px}
.sortie .non{display:block;width:100%;background:none;border:0;margin-top:12px;
  font:400 14.5px var(--sans);color:var(--muted);text-decoration:underline;cursor:pointer}
.sortie .croix{position:absolute;top:6px;right:12px;background:none;border:0;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer}

/* ---------- simulateur ---------- */
/* ---------- questionnaire ----------
   Public âgé : les questions passent en SANS (le Cormorant, serif à déliés
   fins et fort contraste, se lit mal après 60 ans), le corps monte, et l'état
   sélectionné doit être évident sans avoir à comparer deux cases. */
.q{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:26px 28px;margin:0 0 20px;box-shadow:var(--shadow)}
.q .qn{font:700 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:0 0 12px}
.q h3{font-family:var(--sans);font-size:21px;font-weight:700;line-height:1.35;color:var(--deep);margin:0 0 10px}
.q .help{font-family:var(--sans);font-size:16px;color:#4A5959;margin:0 0 18px;line-height:1.6}

.q .sousq{font-family:var(--sans);font-size:18px;font-weight:700;color:var(--deep);
  line-height:1.4;margin:0 0 12px}
.opts{display:grid;gap:12px}
.opts.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.opts.two{grid-template-columns:1fr}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}

.opt span{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:17.5px;font-weight:600;color:var(--ink);
  border:2px solid var(--rule);border-radius:var(--radius);
  padding:16px 18px;cursor:pointer;background:var(--paper);
  transition:border-color .15s,background .15s,box-shadow .15s}

/* Pastille de sélection : vide et grise au repos, pleine et sombre une fois
   cochée. C'est le repère le plus lisible de loin. */
.opt span::before{
  content:"";flex:0 0 auto;width:25px;height:25px;border-radius:50%;
  border:2px solid #B9BFB9;background:#fff;
  transition:border-color .15s,background .15s,box-shadow .15s}

.opt span:hover{border-color:#9FB0B4;background:var(--cream)}

/* Aplat sombre + texte blanc. Une teinte claire ne donnait qu'un contraste de
   1,16 avec l'état au repos : lisible pour un œil de trente ans, pas pour le
   public visé. Ici la case cochée est la seule sombre de la liste, on la
   repère sans lire. */
.opt input:checked+span{
  border-color:var(--deep);
  background:var(--deep);
  color:#fff;
  font-weight:700;
  box-shadow:0 6px 16px -8px rgba(12,40,51,.6);}
.opt input:checked+span::before{
  border-color:#fff;
  background:#fff;
  box-shadow:inset 0 0 0 5px var(--deep);}

.opt input:focus-visible+span{outline:3px solid var(--brass);outline-offset:3px}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.dates{grid-template-columns:1fr}}
.privacy{display:flex;gap:11px;align-items:flex-start;font-family:var(--sans);font-size:15px;
  color:var(--muted);background:var(--cream-2);border-radius:var(--radius);padding:12px 14px;margin:16px 0 0;line-height:1.55}
.privacy svg{width:17px;height:17px;flex:0 0 auto;color:var(--brass);margin-top:2px}

/* verdict */
.verdict{background:var(--deep);color:#D7E3E6;border-radius:var(--radius-lg);padding:32px 30px;box-shadow:var(--lift)}
.verdict .lab{font:700 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-soft)}
.verdict .big{font-family:var(--display);font-size:clamp(34px,5vw,50px);font-weight:600;color:#fff;line-height:1.1;margin:12px 0 8px}
.verdict .sub{font-family:var(--sans);font-size:16px;color:#B9CCD0;line-height:1.6;margin:0}
.cartes{display:grid;gap:16px;margin:26px 0 0}
.carte{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--brass);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px}
.carte h4{font-family:var(--display);font-size:20px;font-weight:600;color:var(--deep);margin:0 0 6px}
.carte .age{font:700 13.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--brass);margin:0 0 10px}
.carte p{margin:0;font-size:16.5px;color:#4A5959;line-height:1.62}
.carte.off{border-left-color:var(--rule);opacity:.72}
.tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:16px;margin:18px 0 0}
.tbl th,.tbl td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--rule)}
.tbl th{font-weight:700;color:var(--deep);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.tbl td b{color:var(--deep-2)}
.tbl tr.hit td{background:#FDF6E7}

/* ---------- pied ---------- */
.foot{background:var(--deep-2);color:#B7CACE;padding:46px 0;font-family:var(--sans);font-size:14.5px}
.foot a{color:#E8D7AE}
/* Le gras héritait de `strong{color:var(--deep-2)}` — la couleur du fond du
   pied de page : le texte existait mais était invisible, et la phrase
   paraissait commencer au milieu. */
.foot strong,.foot b{color:#F2EBD9;font-weight:700}
.foot-links{margin:16px 0 20px;display:flex;gap:8px 22px;flex-wrap:wrap}
.foot-links a{padding:3px 0;text-decoration:none;border-bottom:1px solid transparent}
.foot-links a:hover{border-bottom-color:#E8D7AE}
.disclosure{font-size:13.5px;color:#93A9AE;max-width:72ch;margin-top:22px;
  padding-top:18px;border-top:1px solid rgba(232,215,174,.18);line-height:1.7}

/* ---------- pages légales ---------- */
.legal{padding:44px 0 60px}
.legal h1{font-size:clamp(30px,4vw,42px);margin:0 0 8px}
.legal .maj{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:0 0 34px}
.legal h2{font-size:25px;margin:36px 0 12px}
.legal h3{font-size:20px;margin:26px 0 10px;font-family:var(--sans);font-weight:700}
.legal p,.legal li{font-size:16.5px}
.legal ul{padding-left:22px}
.legal li{margin:0 0 10px}
.legal table{width:100%;border-collapse:collapse;font-size:16.5px;margin:18px 0}
.legal th,.legal td{text-align:left;padding:12px;border:1px solid var(--rule);vertical-align:top}
.legal th{background:var(--cream-2);font-family:var(--sans);font-size:14px;font-weight:700;color:var(--deep)}


/* ---------- option express sur la page d'analyse ----------
   ⚠️ Préfixe obligatoire : `.opt`, `.px` et `.txt` appartiennent déjà au
   simulateur et aux cartes de dossier.
   Une case à cocher, pas deux prix côte à côte : le lecteur voit 59 €, et
   l'express se présente comme un supplément qu'il ajoute, pas comme un second
   tarif entre lesquels il faudrait trancher. */
.express{display:flex;align-items:center;gap:11px;min-height:48px;
  padding:10px 13px;margin:16px 0;cursor:pointer;border-radius:var(--radius);
  border:1.5px solid rgba(216,184,113,.45);transition:background .15s,border-color .15s}
.express:hover{border-color:var(--brass-soft)}
.express input{position:absolute;opacity:0;width:0;height:0}
.express-carre{flex:0 0 auto;width:21px;height:21px;border-radius:4px;
  border:2px solid var(--brass-soft);background:transparent;position:relative}
.express-lib{flex:1;font-family:var(--sans);line-height:1.35}
.express-lib b{display:block;font-size:14.5px;font-weight:700;color:#F2EBD9}
.express-lib em{display:block;font-style:normal;font-size:13px;color:#A9C0C5;margin-top:1px}
.express-prix{flex:0 0 auto;font-family:var(--sans);font-weight:800;font-size:16px;color:#EAD9AE;
  align-self:flex-start;margin-top:1px}

.express.on{background:var(--cream);border-color:var(--cream)}
.express.on .express-carre{background:var(--deep);border-color:var(--deep)}
.express.on .express-carre::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
.express.on .express-lib b,.express.on .express-prix{color:var(--deep)}
.express.on .express-lib em{color:var(--muted)}
.express input:focus-visible ~ .express-carre{outline:3px solid var(--brass);outline-offset:3px}

/* Trois rassurances, une icône chacune. Sur ce public, « Stripe » ne dit rien :
   un cadenas et « paiement sécurisé » disent tout. */
.rassure-achat{list-style:none;margin:18px 0 0;padding:0}
.rassure-achat li{display:flex;align-items:center;gap:12px;padding:7px 0;
  font-family:var(--sans);font-size:15px;line-height:1.4;color:#F2EBD9;font-weight:600}
/* Formes PLEINES dans une pastille : un trait de 2 px en doré sur bleu nuit
   ne se lit pas à 19 px — on ne distinguait même pas le cadenas. Le contraste
   inversé (icône sombre sur pastille claire) règle la question. */
.rassure-achat svg{flex:0 0 auto;width:32px;height:32px;padding:6px;
  background:var(--brass-soft);color:var(--deep);border-radius:50%}
.rassure-achat b{color:#F2EBD9;font-weight:700}

/* Pas de repli du prix à la ligne : il doublerait la hauteur de la case pour
   afficher trois caractères. Il reste à droite, aligné sur le titre. */
@media(max-width:420px){
  .express{padding:10px 12px;gap:9px}
  .express-lib b{font-size:14px}
  .express-prix{font-size:15.5px}
}

/* ---------- tarif de lancement (page d'analyse) ----------
   ⚠️ Pas de prix barré : l'analyse n'a jamais été vendue 89 €, et barrer un
   prix jamais pratiqué est un prix de référence fictif (article L112-1-1 du
   code de la consommation). On annonce une HAUSSE À VENIR, ce qui est licite
   — à condition de l'appliquer vraiment le 1er novembre 2026. Passé cette
   date : soit le prix monte, soit cette mention disparaît. */
/* Le prix barré, à droite du prix courant, en plus petit.
   ⚠️ 98 € N'EST PAS UN PRIX INVENTÉ : c'est la somme de deux prix réellement
   pratiqués aujourd'hui — l'analyse à 59 € et le dossier « Votre date de
   départ » à 39 € sur Payhip. C'est ce qui le rend licite au regard de
   l'article L112-1-1 du code de la consommation, exactement comme le
   117 € → 79 € du pack collection. Le petit texte sous le prix dit la
   composition, pour que personne ne puisse le lire comme un ancien tarif.

   Trois conditions à ne jamais casser, sous peine de prix de référence fictif :
     1. le dossier reste vendu 39 € à l'unité ;
     2. il part vraiment avec chaque analyse (`functions/api/stripe.js`) ;
     3. 98 € reste égal à la somme des deux. */
/* ⚠️ SÉLECTEUR EN TROIS CLASSES, ET C'EST NÉCESSAIRE. La règle générique
   `.offre .prix s` (0,2,1) bat `.prix-barre` (0,1,0) : elle imposait
   `opacity:.5`, et le 98 € s'affichait à moitié transparent.

   LA BARRE PASSE DERRIÈRE LE TEXTE. C'est le seul moyen de barrer un prix sans
   cacher ce qu'on barre : `z-index:-1` sur le `::after`, `isolation:isolate`
   sur le parent pour que ce -1 reste dans son propre contexte d'empilement —
   sans lui, la barre passerait sous le fond bleu nuit du bloc et deviendrait
   invisible. Le `text-shadow` bleu nuit creuse en plus un petit vide autour de
   chaque chiffre : la barre s'interrompt au contact du glyphe au lieu de s'y
   coller. Les chiffres restent entiers, la barre se lit quand même.

   Elle est posée à 57 %, pas à 50 % : en plein milieu elle tombe sur la taille
   du 8 et sur la jonction de la boucle du 9, là où ces deux chiffres sont les
   plus chargés. Un peu plus bas, elle traverse du vide.

   PAS DE `text-shadow` POUR CREUSER UN HALO : essayé, et c'est pire. Le flou
   bleu nuit ronge le bord des chiffres, qui deviennent mous et ternes. La
   barre passant déjà derrière, le glyphe l'occulte proprement tout seul.

   GRAISSE 500, JAMAIS 700 : en Public Sans 700 les contreformes du 9 et du 8
   sont presque fermées et le chiffre devient une tache dès qu'on le barre.
   Quinze variantes ont été comparées côte à côte dans la page réelle. */
.offre .prix .prix-barre{display:inline-block;position:relative;isolation:isolate;
  margin-left:16px;vertical-align:middle;
  font-family:var(--sans);font-size:24px;font-weight:500;
  letter-spacing:.02em;word-spacing:-.14em;
  line-height:1;color:#E4EDEF;text-decoration:none;
  /* ⚠️ `opacity:1` OBLIGATOIRE, même si ça semble redondant : sans lui,
     `.offre .prix s{opacity:.5}` reprend la main et le prix redevient
     à moitié transparent. Retiré une fois, le défaut est revenu aussitôt. */
  opacity:1}
.offre .prix .prix-barre::after{content:"";position:absolute;z-index:-1;
  left:-2px;right:1px;top:57%;height:2.2px;border-radius:2px;
  background:#F26B52;transform:translateY(-50%)}

.lancement{display:block;width:max-content;margin:12px 0 0;padding:4px 10px;
  border-radius:100px;background:var(--brass);color:#fff;font-family:var(--sans);
  font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.offre .prix small b{color:#EAD9AE;font-weight:700}
@media(max-width:420px){
  .prix-apres{margin-left:12px}
}

/* Le pont entre le calculateur et le prix : c'est le seul endroit où le
   lecteur a en tête ce que vaut un trimestre. L'arithmétique doit s'y faire
   toute seule, sans qu'on ait à écrire « et ça ne coûte que 59 € ». */
.calc-pont{margin:22px auto 0;max-width:var(--prose);font-size:17px;
  line-height:1.62;color:var(--muted);text-align:center}
.calc-pont strong{color:var(--deep)}

/* ---------- la suite, à la fin du test ----------
   Le test est gratuit et sans inscription : c'est ce bloc, et lui seul, qui
   transforme un visiteur en acheteur. Il arrive après la démonstration, pas
   avant — on montre d'abord, on propose ensuite. */
.suite{margin-top:30px}
.suite-haut{background:var(--deep);color:#D7E3E6;border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--lift)}
.suite-haut .kicker{color:var(--brass-soft)}
.suite-haut h3{font-family:var(--display);font-weight:600;font-size:27px;line-height:1.15;
  color:#F2EBD9;margin:6px 0 12px}
.suite-haut p{font-size:17px;line-height:1.6;margin:0 0 16px}
.suite-haut strong{color:#F2EBD9}
.suite-px{font-family:var(--sans);margin:0 0 18px!important}
.suite-px b{display:block;font-size:38px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1}
.suite-px span{display:block;font-size:14.5px;color:#A9C0C5;margin-top:6px}
.suite-gar{font-family:var(--sans);font-size:14px;color:#A9C0C5;margin:14px 0 0!important}
.suite-bas{font-family:var(--sans);font-size:15.5px;color:var(--muted);
  text-align:center;margin:18px auto 0;max-width:58ch}
@media(max-width:620px){
  .suite-haut{padding:24px 20px}
  .suite-haut h3{font-size:24px}
}

/* ---------- la marche à suivre, dans le bloc d'achat ----------
   « Comment va-t-il vérifier mon relevé ? » est la question qui arrête la main
   au-dessus du bouton. Elle se pose ici, pas trois écrans plus bas : trois
   lignes suffisent à y répondre, et elles doivent précéder le paiement. */
.marche{counter-reset:m;list-style:none;margin:0 0 18px;padding:0}
.marche li{counter-increment:m;position:relative;padding:6px 0 6px 30px;
  font-family:var(--sans);font-size:14.5px;line-height:1.45;color:#A9C0C5}
.marche li::before{content:counter(m);position:absolute;left:0;top:6px;
  width:21px;height:21px;border-radius:50%;background:rgba(216,184,113,.18);
  color:var(--brass-soft);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center}
.marche b{color:#F2EBD9;font-weight:700}

/* ---------- bascule vers la collection (page des dossiers) ----------
   Sous les trois cartes à 39 €, l'arithmétique doit sauter aux yeux : trois
   fois 39 font 117, la collection en vaut 79. C'est le seul endroit où le
   lecteur a les trois prix en tête. Le clic ne quitte pas la page, il descend
   au bloc de commande. */
.bascule{display:flex;align-items:center;justify-content:space-between;gap:22px;
  margin:30px auto 0;max-width:760px;padding:20px 24px;border-radius:var(--radius-lg);
  background:var(--deep);color:#D7E3E6;text-decoration:none;box-shadow:var(--lift);
  transition:transform .15s,box-shadow .15s}
.bascule:hover{transform:translateY(-2px);text-decoration:none;color:#D7E3E6}
.bascule-txt{font-family:var(--sans);line-height:1.4}
.bascule-txt b{display:block;font-size:19px;font-weight:800;color:#F2EBD9}
.bascule-txt em{display:block;font-style:normal;font-size:15px;color:#A9C0C5;margin-top:4px}
.bascule-go{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  background:var(--brass);color:#fff;font-family:var(--sans);font-weight:700;font-size:16px;
  padding:13px 20px;border-radius:var(--radius);white-space:nowrap}
.bascule-go svg{width:18px;height:18px}
@media(max-width:620px){
  .bascule{flex-direction:column;align-items:stretch;gap:16px;text-align:center;padding:20px}
  .bascule-go{justify-content:center}
}


/* ---------- page de commande ----------
   Deux colonnes sur ordinateur : le récapitulatif à gauche reste collé
   pendant qu'on remplit, le formulaire à droite. Sur téléphone, le
   récapitulatif passe au-dessus, réduit au total. */
.page-cmd{background:var(--cream-2)}
.cmd-secu{display:flex;align-items:center;gap:8px;margin:0;font:600 14px/1 var(--sans);color:var(--muted)}
.cmd-secu svg{width:16px;height:16px;color:var(--brass)}
.cmd{padding:44px 0 70px}
.cmd-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.cmd-recap{position:static}
.cmd-recap h1{font-size:40px;line-height:1.08;margin:0 0 14px}
.cmd-chapo{font-size:17.5px;color:#3D4C4C;margin:0 0 26px}
.cmd-ticket{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:8px 22px 18px;box-shadow:var(--shadow)}
.cmd-lignes{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:15.5px}
.cmd-lignes li{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid #EDE6D8}
.cmd-lignes b{font-weight:700;color:var(--deep);white-space:nowrap}
.cmd-offert{color:#2F7A4E!important}
.cmd-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0 4px;
  font:800 19px/1.2 var(--sans);color:var(--deep)}
.cmd-total-px{display:flex;align-items:baseline;gap:10px}
.cmd-total-px b{font-size:30px;letter-spacing:-.02em}
.cmd-barre{font-weight:500;font-size:18px;color:var(--muted);text-decoration-thickness:2px}
.cmd-compo{font:500 12.5px/1.5 var(--sans);color:var(--muted);margin:6px 0 0}
.cmd-garanties{list-style:none;margin:22px 0 0;padding:0;font-family:var(--sans);font-size:14.5px;line-height:1.5;color:#4A5959}
.cmd-garanties li{position:relative;padding:0 0 12px 28px}
.cmd-garanties li::before{content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;
  background:var(--brass-soft);color:var(--deep);font:800 11px/19px var(--sans);text-align:center}
.cmd-garanties b{color:var(--deep)}

.cmd-form{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.cmd-etape{padding:28px 30px;border-bottom:1px solid #EDE6D8}
.cmd-etape[hidden]{display:none}
.cmd-etape h2{display:flex;align-items:center;gap:12px;font:700 21px/1.25 var(--sans);color:var(--deep);margin:0 0 16px}
.cmd-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--deep);color:#fff;
  font:800 15px/30px var(--sans);text-align:center}
.cmd-aide{font:500 15px/1.55 var(--sans);color:#4A5959;margin:0 0 16px}
.cmd-aide strong{color:var(--deep)}
.cmd-aide-champ{font-size:13.5px;color:var(--muted);margin:-10px 0 20px}
.cmd-facultatif{font-weight:500;font-size:13px;color:var(--muted);margin-left:6px}
.cmd-form textarea{width:100%;font:500 16.5px/1.5 var(--sans);padding:14px;border:1.5px solid var(--rule);
  border-radius:var(--radius);background:var(--cream);color:var(--ink);resize:vertical;min-height:110px}
.cmd-form textarea:focus{border-color:var(--brass);background:var(--paper);outline:none}

/* Les deux formules : cartes à cocher, l'état choisi en aplat sombre. */
.cmd-choix{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 4px}
.cmd-carte{position:relative;display:flex;align-items:center;gap:12px;margin:0;min-height:76px;
  padding:14px 16px;border:1.5px solid var(--rule);border-radius:var(--radius);background:var(--cream);cursor:pointer;
  transition:border-color .15s ease,background .15s ease}
.cmd-carte:hover{border-color:var(--brass-soft)}
.cmd-carte input{position:absolute;opacity:0;width:0;height:0}
.cmd-carte::before{content:"";flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #9AA8A9;background:#fff}
.cmd-carte-txt{flex:1;line-height:1.3}
.cmd-carte-txt b{display:block;font:700 16.5px/1.25 var(--sans);color:var(--deep)}
.cmd-carte-txt em{display:block;font:500 13.5px/1.35 var(--sans);font-style:normal;color:var(--muted);margin-top:3px}
.cmd-carte-px{font:800 19px/1 var(--sans);color:var(--deep);white-space:nowrap}
.cmd-carte:has(input:checked){background:var(--deep);border-color:var(--deep)}
.cmd-carte:has(input:checked)::before{border-color:var(--brass-soft);background:var(--brass-soft);box-shadow:inset 0 0 0 4px var(--deep)}
.cmd-carte:has(input:checked) .cmd-carte-txt b,.cmd-carte:has(input:checked) .cmd-carte-px{color:#fff}
.cmd-carte:has(input:checked) .cmd-carte-txt em{color:#BCD0D4}
.cmd-carte:has(input:focus-visible){outline:3px solid var(--brass);outline-offset:3px}
#aide-couple{margin:14px 0 0}

/* La formule choisie, affichée seule ; l'analyse à deux s'ajoute par une case. */
.cmd-formule{display:flex;align-items:center;gap:12px;min-height:76px;padding:14px 16px;
  border-radius:16px;background:var(--deep);color:#fff}
.cmd-formule .cmd-carte-txt b,.cmd-formule .cmd-carte-px{color:#fff}
.cmd-formule .cmd-carte-txt em{color:#BCD0D4}
.cmd-formule-coche{flex:0 0 auto;position:relative;width:24px;height:24px;border-radius:50%;background:var(--brass-soft)}
.cmd-formule-coche::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;
  border:solid var(--deep);border-width:0 3px 3px 0;transform:rotate(45deg)}
/* Une simple case, sans cadre, en retrait : on doit lire « option », pas « deuxième formule ». */
.cmd-conjoint{display:flex;align-items:center;gap:10px;min-height:44px;margin:16px 0 0 4px;cursor:pointer;
  font:500 15px/1.35 var(--sans);color:#4A5959}
.cmd-conjoint input{position:absolute;opacity:0;width:0;height:0}
.cmd-conjoint-carre{flex:0 0 auto;position:relative;width:20px;height:20px;border-radius:4px;border:2px solid #9AA8A9;background:#fff}
.cmd-conjoint input:checked + .cmd-conjoint-carre{background:var(--deep);border-color:var(--deep)}
.cmd-conjoint input:checked + .cmd-conjoint-carre::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cmd-conjoint input:focus-visible + .cmd-conjoint-carre{outline:3px solid var(--brass);outline-offset:3px}
.cmd-conjoint:hover .cmd-conjoint-carre{border-color:var(--brass)}
.cmd-conjoint-px{font-weight:700;color:var(--deep);opacity:.6;white-space:nowrap;margin-left:4px}
.cmd-conjoint input:checked ~ .cmd-conjoint-lib{color:var(--deep)}

/* Les deux façons d'envoyer le relevé : ici, ou par email. */
.cmd-aide-releve{font-size:16px}
.cmd-voie{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:700 16.5px/1.3 var(--sans);color:var(--deep)}
.cmd-voie-num{flex:0 0 auto;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--brass-soft);color:var(--deep);font:800 15px/1 var(--sans)}
.cmd-voie-ou{display:flex;align-items:center;gap:14px;margin:18px 0;font:700 15px/1 var(--sans);
  color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.cmd-voie-ou::before,.cmd-voie-ou::after{content:"";flex:1;height:1px;background:var(--rule)}
.cmd-mail{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:18px;
  background:var(--cream);border:1.5px solid var(--rule)}
.cmd-mail svg{flex:0 0 auto;width:30px;height:30px;color:var(--brass);margin-top:2px}
.cmd-mail p{margin:0;font:500 16px/1.55 var(--sans);color:#4A5959}
.cmd-mail strong{color:var(--deep)}
.cmd-voie[hidden],.cmd-voie-ou[hidden],.cmd-voie-mail[hidden]{display:none}

/* Dépôt du relevé */
.cmd-depots{display:grid;gap:16px}
.depot[hidden]{display:none}
.depot-qui{font:700 15px/1.3 var(--sans);color:var(--deep);margin:0 0 8px}
.depot-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:0;
  min-height:150px;padding:22px;text-align:center;border:2px dashed #C9BFAA;border-radius:var(--radius-lg);
  background:#FCFAF5;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.depot-zone:hover,.depot-zone.survol{border-color:var(--brass);background:#FBF3E2}
.depot-zone input{position:absolute;opacity:0;width:1px;height:1px}
.depot-zone:has(input:focus-visible){outline:3px solid var(--brass);outline-offset:3px}
.depot-zone svg{width:40px;height:40px;color:var(--brass)}
.depot-txt b{display:block;font:700 17px/1.3 var(--sans);color:var(--deep)}
.depot-txt em{display:block;font:500 14px/1.4 var(--sans);font-style:normal;color:var(--muted);margin-top:3px}
.depot.plein .depot-zone{min-height:0;flex-direction:row;padding:12px 16px}
.depot.plein .depot-zone svg{width:26px;height:26px}
.depot.plein .depot-txt em{display:none}
.depot.plein .depot-txt b::before{content:"+ ";}
.depot-liste{list-style:none;margin:10px 0 0;padding:0}
.depot-liste li{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 0 6px;border-radius:var(--radius);
  background:#EEF5EF;border:1px solid #CFE3D4;font:600 14.5px/1.3 var(--sans);color:#1F4B31}
.depot-liste li::before{content:"✓";font-weight:800;color:#2F7A4E}
.depot-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.depot-liste small{color:#4D6B56;font-weight:500;white-space:nowrap}
.depot-x{background:none;border:0;padding:8px 4px;min-height:36px;font:600 13.5px var(--sans);color:#8C3620;
  text-decoration:underline;cursor:pointer}
.cmd-ou{margin:14px 0 0;font-family:var(--sans);font-size:15px}
.cmd-ou summary{cursor:pointer;font-weight:700;color:var(--brass);padding:8px 0;min-height:44px;display:flex;align-items:center}
.cmd-ou ol{margin:4px 0 0;padding-left:22px;color:#4A5959;line-height:1.55}
.cmd-ou li{margin:0 0 6px}

/* L'option express reprend la case de la page d'analyse, en version claire. */
.cmd-express{background:var(--cream);border-color:var(--rule);margin:0}
.cmd-express .express-carre{border-color:#9AA8A9;background:#fff}
.cmd-express .express-lib b{color:var(--deep)}
.cmd-express .express-lib em{color:var(--muted)}
.cmd-express .express-prix{color:var(--deep)}
.cmd-express.on{background:var(--deep);border-color:var(--deep)}
.cmd-express.on .express-carre{background:var(--brass-soft);border-color:var(--brass-soft)}
.cmd-express.on .express-lib b,.cmd-express.on .express-prix{color:#fff}
.cmd-express.on .express-lib em{color:#BCD0D4}

.cmd-payer{padding:26px 30px 30px;background:#FCFAF5}
.cmd-payer .btn{font-size:18.5px;padding:18px 26px}
.cmd-cartes{font:500 13.5px/1.4 var(--sans);color:var(--muted);text-align:center;margin:12px 0 0}
.cmd-merci p{font-size:17.5px}

@media(max-width:940px){
  .cmd{padding:22px 0 50px}
  .cmd-grille{grid-template-columns:1fr;gap:22px}
  .cmd-recap{position:static}
  .cmd-recap h1{font-size:31px}
  .cmd-garanties{display:none}
}
@media(max-width:600px){
  .shell.cmd-grille{padding:0 12px}
  .cmd-etape{padding:22px 18px}
  .cmd-payer{padding:22px 18px 24px}
  .cmd-choix{grid-template-columns:1fr}
  .cmd-secu{font-size:12.5px}
}

/* Le lien vers l'analyse à deux, sous le bouton des blocs d'offre. */
.offre-couple{display:block;margin:12px 0 0;text-align:center;font:600 15px/1.4 var(--sans);
  color:#D9E4E6;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(216,184,113,.6)}
.offre-couple b{color:#fff;font-weight:700}
.offre-couple:hover{color:#fff;text-decoration-color:var(--brass-soft)}

/* ==========================================================================
   OCTOBRE 2026 — une seule famille, Public Sans, du titre au bouton.
   Titres très gras et serrés, texte courant plus grand, cartes plus rondes
   et plus douces, boutons qui ont du relief. La palette ne change pas.
   ========================================================================== */
:root{
  --display:"Public Sans",-apple-system,system-ui,sans-serif;
  --serif:"Public Sans",-apple-system,system-ui,sans-serif;
  --radius:12px; --radius-lg:22px;
  --brass-ink:#8A5F17;
  --shadow:0 1px 2px rgba(12,40,51,.05),0 14px 34px -16px rgba(12,40,51,.24);
  --lift:0 2px 4px rgba(12,40,51,.06),0 28px 54px -26px rgba(12,40,51,.5);
}
body{font-size:18.5px;line-height:1.62;color:#1E2B2A;font-weight:400}
h1,h2,h3{font-weight:800;letter-spacing:-.028em;line-height:1.08}
h3{letter-spacing:-.016em;line-height:1.18}
strong,b{font-weight:700}
.hero h1{font-size:clamp(32px,4.6vw,54px);letter-spacing:-.036em;line-height:1.04}
.hero .lede,.section-sub{font-style:normal}
h2.title{font-size:clamp(25px,3vw,35px);letter-spacing:-.03em;line-height:1.1}
.legal h1{font-size:clamp(32px,4.4vw,46px);letter-spacing:-.034em}
.legal h2{font-size:24px}
.kicker{font:700 15.5px/1.25 var(--sans);letter-spacing:0;text-transform:none;color:var(--brass-ink);margin:0 0 10px}
.section.dark .kicker,.offre .kicker,.pack .kicker{color:var(--brass-soft)}

/* en-tête */
.brand::before{border-radius:12px}
.brand-nom{font-weight:800;font-size:21px;letter-spacing:-.025em}
.brand-sous{letter-spacing:.06em;font-size:10.5px;text-transform:none;font-weight:600}
.topnav a{border-radius:10px}
.topnav .nav-cta{border-radius:12px;box-shadow:0 2px 0 var(--brass-ink),0 10px 20px -12px rgba(138,95,23,.9)}

/* boutons : un aplat, un liseré sombre dessous qui fait le relief */
.btn{border-radius:12px;font-size:17.5px;font-weight:700;letter-spacing:-.005em;padding:17px 30px;
  box-shadow:0 2px 0 var(--brass-ink),0 14px 26px -14px rgba(138,95,23,.85)}
.btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--brass-ink),0 18px 30px -14px rgba(138,95,23,.9)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--brass-ink),0 6px 14px -10px rgba(138,95,23,.8)}
.btn.dark{box-shadow:0 2px 0 #061B23,0 14px 26px -14px rgba(6,27,35,.8)}
.btn.ghost{background:var(--paper);border:1.5px solid #CDBFA8;box-shadow:none}
.btn.ghost:hover{border-color:var(--deep);box-shadow:none}

/* cartes */
.card,.book,.carte{border-radius:var(--radius-lg);border:1px solid #E3D9C8;box-shadow:var(--shadow)}
.carte{border-left:4px solid var(--brass)}
.card h2{font-size:26px}
.offre,.pack{border-radius:var(--radius-lg)}
.stat .n{font-weight:800;letter-spacing:-.035em}
.book h3,.carte h4,.cv-title{font-weight:800;letter-spacing:-.02em}
.sortie .cle,.suite-haut h3{font-weight:800;letter-spacing:-.02em}
.verdict .big{font-weight:800;letter-spacing:-.035em}
summary{font-weight:700;font-size:18.5px;letter-spacing:-.01em}

/* champs */
input[type=email],input[type=text],input[type=tel],input[type=number],select,.cmd-form textarea{
  border-radius:12px;border:1.5px solid #D6CAB5;background:#fff;font-size:17.5px}
input[type=email]:focus,input[type=text]:focus,input[type=tel]:focus,input[type=number]:focus,select:focus,.cmd-form textarea:focus{
  border-color:var(--deep);box-shadow:0 0 0 4px rgba(18,60,74,.12);outline:none}

/* page de commande */
.page-cmd .promobar{display:none}
.cmd-lignes li[hidden]{display:none}
.cmd-recap .kicker{margin-bottom:8px}
.cmd-recap h1{font-size:44px;letter-spacing:-.036em;line-height:1.04}
.cmd-chapo{font-size:19px;color:#3D4C4C;line-height:1.55}
.cmd-ticket,.cmd-form{border-radius:var(--radius-lg);border-color:#E3D9C8}
.cmd-ticket{padding:10px 26px 22px}
.cmd-lignes{font-size:17px}
.cmd-total{font-size:22px}
.cmd-total-px b{font-size:32px;letter-spacing:-.03em}
.cmd-etape{padding:30px 32px}
.cmd-etape h2{font-size:22px;letter-spacing:-.022em}
.cmd-num{display:inline-flex;align-items:center;justify-content:center;line-height:1;width:34px;height:34px;font-size:16px;background:var(--brass);box-shadow:0 2px 0 var(--brass-ink)}
.cmd-carte{border-radius:16px}
.depot-zone{border-radius:18px;border-width:2px;border-style:dashed}
.cmd-ou summary{font-size:16.5px;color:var(--brass-ink)}
.cmd-payer .btn{font-size:18.5px;padding:19px 30px}
@media(max-width:620px){.cmd-recap h1{font-size:33px}.cmd-etape{padding:24px 20px}}


/* « Où trouver mon relevé ? » : un petit lien qui se voit cliquable — souligné,
   avec une flèche qui tourne à l'ouverture — et non plus un gros titre. */
.cmd-ou{margin:14px 0 0}
.cmd-ou summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0;
  font:700 16px/1.3 var(--sans);color:var(--brass-ink);letter-spacing:0;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.cmd-ou summary::before{content:"";width:0;height:0;border-left:7px solid currentColor;
  border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .2s}
.cmd-ou[open] summary::before{transform:rotate(90deg)}
.cmd-ou summary::after{content:none}
.cmd-ou summary:hover{color:var(--deep)}
.cmd-ou-corps{margin:4px 0 0;padding:14px 18px;background:var(--cream);border-radius:12px;
  font:500 15.5px/1.55 var(--sans);color:#3D4C4C}
.cmd-ou-corps p{margin:0 0 8px}
.cmd-ou-corps a{font-weight:700;color:var(--deep)}
.cmd-ou-corps ol{margin:0;padding-left:20px}
.cmd-ou-corps li{margin:0 0 4px}

/* Catalogue des dossiers : le livre posé dans une vitrine claire en haut de
   la carte, puis le texte, puis le prix et un vrai bouton. */
.book{padding:0;overflow:hidden}
.book-vitrine{display:flex;justify-content:center;padding:26px 20px 18px;
  background:radial-gradient(120% 90% at 50% 100%,#EFE3CB 0%,#F7F1E5 60%,#FBF8F2 100%);
  border-bottom:1px solid #EDE4D3}
.book .livre{max-width:170px;margin:0}
.book-corps{display:flex;flex-direction:column;flex:1;padding:20px 24px 24px}
.book .book-num{flex:0 0 auto;font:700 13.5px/1.2 var(--sans);color:var(--brass-ink);margin:0 0 8px}
.book h3{font-size:22px;margin:0 0 8px;letter-spacing:-.024em}
.book p{font-size:16.5px}
.book .bas{align-items:center;border-top:1px solid #EDE4D3;padding-top:16px}
.book .px{font-size:26px;letter-spacing:-.03em}
.book-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;
  background:var(--paper);border:1.5px solid #CDBFA8;font:700 15.5px/1 var(--sans);color:var(--deep);
  transition:border-color .2s,background .2s}
.book-btn::after{content:"→";font-weight:700;transition:transform .2s}
.book:hover .book-btn{border-color:var(--deep);background:var(--deep);color:#fff}
.book:hover .book-btn::after{transform:translateX(3px)}
.bascule{border-radius:var(--radius-lg)}
.pack{padding:36px 34px}
.pack h2{font-weight:800;font-size:30px;letter-spacing:-.03em}
.pack .px{font-size:52px;letter-spacing:-.04em}

/* Sous le bouton de paiement : le cadenas, puis les cartes acceptées en
   logos. Un logo de carte se reconnaît d'un coup d'œil, une phrase se lit. */
.btn-cadenas{width:18px;height:18px;flex:0 0 auto;opacity:.9}
.cmd-cartes{margin:16px 0 0;text-align:center}
.cmd-secu-ligne{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 7px;margin:0;
  font:500 14px/1.4 var(--sans);color:var(--muted)}
.cmd-secu-ligne svg{width:15px;height:15px;color:#2F7A4E}
.cmd-secu-ligne b{color:#2F7A4E;font-weight:700}
.cmd-logos{display:flex;justify-content:center;gap:10px;margin:12px 0 0}
.cmd-logo{display:inline-flex;align-items:center;justify-content:center;width:58px;height:36px;border-radius:8px;
  box-shadow:0 1px 2px rgba(12,40,51,.12)}
.cmd-logo b{font:800 15px/1 var(--sans);color:#fff}
.cmd-logo svg{height:22px;width:auto}
.cl-cb{background:#37729E}
.cl-cb b{font-size:19px;letter-spacing:-.06em}
.cl-visa{background:#1A1F71}
.cl-visa b{font-style:italic;letter-spacing:.01em}
.cl-mc{background:#fff;border:1px solid #E3D9C8}
.cmd-cgv{margin:12px 0 0;font:500 13.5px/1.4 var(--sans)}
.cmd-cgv a{color:var(--muted)}
.cmd-secu-sous{margin:3px 0 0;font:500 13.5px/1.4 var(--sans);color:var(--muted)}
.cmd-secu-ligne{font-size:15px}
/* Le relevé peut arriver après le paiement : la zone de dépôt le dit. */
.depot-facultatif{display:inline-block;vertical-align:2px;margin-left:6px;padding:3px 8px;border-radius:999px;
  background:#EFE6D3;font:600 12.5px/1.2 var(--sans);color:var(--muted)}
.mode-depot .depot-facultatif{display:none}
.cmd-ou-corps a{white-space:nowrap}
/* La page de commande garde une navigation discrète : on peut revenir aux
   dossiers ou à la présentation de l'analyse sans repasser par l'accueil. */
.cmd-nav{display:flex;gap:4px;margin-left:auto;margin-right:18px}
.cmd-nav a{font:600 15px/1 var(--sans);color:var(--deep);text-decoration:none;padding:10px 12px;border-radius:10px}
.cmd-nav a:hover{background:rgba(176,126,43,.09);text-decoration:none}
@media(max-width:760px){
  .page-cmd .topbar-in{flex-wrap:wrap;row-gap:4px}
  .cmd-nav{order:3;width:100%;margin:0;justify-content:center;border-top:1px solid var(--rule);padding-top:4px}
  .cmd-nav a{font-size:14.5px;padding:9px 10px}
}
html:not(.couple-ouvert) [data-couple]{display:none!important}
/* une seule carte : elle prend toute la largeur */
html:not(.couple-ouvert) .cmd-choix{grid-template-columns:1fr}
/* Étapes numérotées par le CSS : une étape cachée (l'offre à deux fermée)
   ne laisse pas de trou dans la numérotation. */
.cmd-form{counter-reset:etape}
.cmd-etape:has(.cmd-num){counter-increment:etape}
.cmd-num::before{content:counter(etape)}
/* L'en-tête collait aux bords de l'écran : `.topbar-in` remettait à zéro la
   marge latérale de `.shell`. */
.topbar-in{padding:11px 24px}
@media(max-width:620px){.topbar-in{padding:10px 16px}.cmd-secu{font-size:13px}}
.cmd-num[hidden]{display:none}

/* ==========================================================================
   Page de l'analyse : sous la commande, ce qui rassure avant de payer.
   ========================================================================== */
.mode-depot .an-sec{display:none}
.an-sec{padding:64px 0;border-top:1px solid var(--rule);background:var(--cream)}
.an-clair{background:var(--cream-2)}
.an-sombre{background:var(--deep);color:#D7E3E6;border-top:0}
.an-sombre .kicker{color:var(--brass-soft)}
.an-titre{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.032em;line-height:1.08;margin:0 0 26px;max-width:24ch;text-wrap:balance}
.an-sombre .an-titre{color:#fff}
.an-petit{font-size:clamp(23px,2.4vw,28px);margin-bottom:14px}

.an-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 26px}
.an-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:22px}
.an-stat b{display:block;font:800 clamp(30px,3.4vw,40px)/1 var(--sans);color:#fff;letter-spacing:-.03em;margin:0 0 10px}
.an-stat span{font:500 16px/1.45 var(--sans);color:#C9D7DA}
.an-citation{margin:0 0 18px;padding:0 0 0 18px;border-left:3px solid var(--brass-soft);font:500 18px/1.55 var(--sans);color:#EEF3F4;font-style:italic;max-width:70ch}
.an-citation cite{display:block;margin-top:8px;font:500 14px/1.4 var(--sans);font-style:normal;color:#A9C0C5}
.an-chute{font:600 18px/1.5 var(--sans);color:#fff;margin:0;max-width:62ch}

.an-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.an-carte{background:var(--paper);border:1px solid #E3D9C8;border-radius:var(--radius-lg);padding:22px 22px 20px;box-shadow:var(--shadow)}
.an-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--brass-soft);color:var(--deep);font:800 15px/1 var(--sans);margin:0 0 12px}
.an-carte h3{font-size:19px;margin:0 0 6px}
.an-carte p{font:400 16px/1.5 var(--sans);color:#4A5959;margin:0}
.an-note{font:400 17px/1.55 var(--sans);color:#3D4C4C;margin:22px 0 0;max-width:70ch}

.an-etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:an}
.an-etapes li{counter-increment:an;background:var(--paper);border:1px solid #E3D9C8;border-radius:var(--radius-lg);padding:22px;position:relative}
.an-etapes li::before{content:counter(an);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--brass);color:#fff;font:800 16px/1 var(--sans);margin:0 0 12px;box-shadow:0 2px 0 var(--brass-ink)}
.an-etapes b{display:block;font:800 19px/1.25 var(--sans);color:var(--deep);letter-spacing:-.015em;margin:0 0 6px}
.an-etapes span{font:400 16px/1.5 var(--sans);color:#4A5959}

.an-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center}
.an-mot{margin:0;background:var(--paper);border:1px solid #E3D9C8;border-left:4px solid var(--brass);border-radius:var(--radius-lg);padding:26px 26px 22px;box-shadow:var(--shadow)}
.an-mot blockquote{margin:0;font:500 19px/1.55 var(--sans);font-style:italic;color:var(--deep)}
.an-mot figcaption{margin-top:12px;font:700 15px/1 var(--sans);color:var(--brass-ink)}
.an-avant p{font:400 17px/1.6 var(--sans);color:#3D4C4C;margin:0 0 12px}

.an-faq{max-width:820px}
.an-faq details{background:var(--paper);border:1px solid #E3D9C8;border-radius:14px;margin:0 0 10px;padding:0 20px}
.an-faq summary{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:60px;padding:14px 0;
  font:700 17.5px/1.35 var(--sans);color:var(--deep);cursor:pointer}
.an-faq details[open] summary{border-bottom:1px solid #EDE4D3}
.an-faq details p{font:400 16.5px/1.6 var(--sans);color:#3D4C4C;margin:14px 0 18px}

.an-fin{text-align:center}
.an-fin .an-titre{margin-left:auto;margin-right:auto}
.an-fin p{font:400 18px/1.55 var(--sans);color:#C9D7DA;max-width:56ch;margin:0 auto 24px}

@media(max-width:860px){
  .an-stats,.an-cartes,.an-etapes{grid-template-columns:1fr}
  .an-duo{grid-template-columns:1fr;gap:24px}
  .an-sec{padding:48px 0}
}
@media(min-width:861px) and (max-width:1060px){.an-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Les deux formules l une sous l autre : leurs libellés sont longs. */
.cmd-choix{grid-template-columns:1fr!important}
/* Les garanties forment un bloc à part, détaché du total. Ordinateur :
   colonne de gauche, sous le récapitulatif. Téléphone : tout en bas, après
   le bouton de paiement. */
.cmd-recap{position:static}
.cmd-recap{grid-column:1;grid-row:1}
.cmd-form{grid-column:2;grid-row:1 / span 2}
.cmd-garantie-bloc{grid-column:1;grid-row:2;align-self:start;background:var(--paper);border:1px solid #E3D9C8;
  border-radius:var(--radius-lg);padding:22px 24px 10px;box-shadow:var(--shadow)}
.cmd-garantie-bloc h2{font:800 19px/1.2 var(--sans);color:var(--deep);letter-spacing:-.015em;margin:0 0 16px}
.cmd-garantie-bloc .cmd-garanties{margin:0}
.mode-depot .cmd-garantie-bloc{display:none}
@media(max-width:940px){
  .cmd-recap,.cmd-form,.cmd-garantie-bloc{grid-column:1;grid-row:auto}
  .cmd-garantie-bloc .cmd-garanties{display:block}
}
@media(min-width:941px){.cmd-grille{grid-template-rows:auto 1fr;row-gap:28px}}

/* Révision du 15 octobre 2026, soir : plus d'air, moins de texte. */
.cmd-grille{margin-bottom:72px}
@media(max-width:940px){.cmd-grille{margin-bottom:48px}}
@media(min-width:941px){.cmd-grille{grid-template-rows:auto}}
.cmd-form{grid-row:auto}
.cmd-mini-garanties{list-style:none;margin:18px 0 0;padding:0 4px;display:grid;gap:8px}
.cmd-mini-garanties li{display:flex;align-items:center;gap:9px;font:500 14.5px/1.35 var(--sans);color:#4A5959}
.cmd-mini-garanties svg{flex:0 0 auto;width:16px;height:16px;color:#2F7A4E}
.mode-depot .cmd-mini-garanties{display:none}
.an-source{font:500 14px/1.4 var(--sans);color:#A9C0C5;margin:0}
.an-stats{margin-bottom:18px}
.an-carte{padding:20px}
.an-carte h3{margin-bottom:4px}
.an-mot{max-width:760px;margin:0 auto;text-align:center;border-left:1px solid #E3D9C8;border-top:4px solid var(--brass)}
.an-mot blockquote{font-size:21px}
.an-fin .an-titre{margin-bottom:24px}
/* « Où trouver mon relevé ? » : pas de filets autour, le soulignement suffit. */
.cmd-ou,.cmd-ou:last-of-type{border:0;padding:4px 0 0}

/* ==========================================================================
   TÉLÉPHONE — page de commande (19 octobre 2026)
   Quatre visites sur cinq arrivent sur téléphone. Le premier écran montre le
   formulaire (formule, relevé), pas un ticket de caisse : le récapitulatif et
   le total descendent juste au-dessus du bouton de paiement, les garanties
   juste en dessous. L'en-tête tient sur une ligne.
   ========================================================================== */
.cmd-recap-tel,.cmd-garanties-tel{display:none}
.cmd-recap-tel[hidden]{display:none!important}
@media(max-width:940px){
  .page-cmd .cmd-nav{display:none}
  .page-cmd .topbar-in{flex-wrap:nowrap}
  .page-cmd .cmd-secu{margin-left:auto}
  .cmd{padding:16px 0 40px}
  .cmd-grille{gap:16px}
  .cmd-recap .kicker,.cmd-recap .cmd-ticket,.cmd-recap .cmd-mini-garanties{display:none}
  .cmd-recap h1{font-size:27px;line-height:1.12;margin:0 0 8px}
  .cmd-chapo{font-size:16.5px;line-height:1.45;margin:0}
  .cmd-etape{padding:20px 16px}
  .cmd-etape h2{font-size:19.5px;gap:10px;margin:0 0 12px}
  .cmd-num{width:30px;height:30px;font-size:15px}
  .cmd-formule{min-height:64px;padding:12px 14px}
  .cmd-conjoint{margin-top:10px}
  .cmd-aide-releve{font-size:15.5px;margin-bottom:12px}
  .depot-zone{min-height:0;padding:16px 14px;gap:6px}
  .depot-zone svg{width:32px;height:32px}
  .cmd-voie-ou{margin:12px 0}
  .cmd-mail{padding:14px 16px;gap:12px}
  .cmd-mail svg{width:24px;height:24px}
  .cmd-mail p{font-size:15.5px}

  .cmd-recap-tel{display:block;padding:20px 16px 4px;background:#FCFAF5;border-top:1px solid #EDE6D8}
  .cmd-recap-tel ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px}
  .cmd-recap-tel li{display:flex;gap:9px;align-items:flex-start;font:500 15px/1.4 var(--sans);color:#4A5959}
  .cmd-recap-tel li::before{content:"✓";font-weight:800;color:#2F7A4E}
  .cmd-recap-tel li[hidden]{display:none}
  .cmd-recap-total{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:12px 0 0;
    border-top:1px solid var(--rule);font:700 17px/1.2 var(--sans);color:var(--deep)}
  .cmd-recap-total b{font:800 26px/1 var(--sans);letter-spacing:-.02em}
  .cmd-payer{padding-top:14px}
  .cmd-garanties-tel{display:grid;margin:16px auto 6px;max-width:330px;text-align:left}
}
/* Les deux façons d'envoyer le relevé ne portent plus de numéro : « 2 », puis
   « 1 » et « 2 » se lisaient comme des étapes du formulaire. Le « ou » suffit. */
.cmd-voie-num{display:none}
@media(max-width:940px){
  .page-cmd .brand-nom,.page-cmd .cmd-secu{white-space:nowrap}
  .page-cmd .brand-sous{display:none}
}
@media(max-width:400px){
  .page-cmd .cmd-secu{font-size:12.5px;gap:5px}
  .page-cmd .brand-nom{font-size:17px}
}