/* ============================================================
   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)}
/* logo : un relevé coché (01/11/2026, remplace « CM » : le visiteur ne connaît que « Retraite Taux Plein ») */
.brand::before{content:"";flex:0 0 auto;width:38px;height:38px;border-radius:9px;
  background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8B871' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1-2-2v-14a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M9 15l2 2l4-4'/%3E%3C/svg%3E") center/24px no-repeat}
.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;background-size:22px}
}

/* ---------- 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}
/* 01/11/2026 : « Paiement 100 % sécurisé » passe SOUS les logos de cartes (demande du user). */
.cmd-logos + .cmd-secu-ligne{margin-top:12px}
/* 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}
}

/* ==========================================================================
   PAGE DE COMMANDE COURTE (31 octobre 2026)
   Le bouton Payer arrive dans le premier écran : la photo de Catherine, le
   chiffre de la Cour des comptes, l'offre, la garantie, puis le paiement. Le
   relevé s'envoie après (bloc .cmd-apres) ; l'email est demandé par Stripe.
   ========================================================================== */
.cmd-qui{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.cmd-qui .cmd-chapo{margin:0}
.cmd-photo img{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.cmd-cdc{font:500 15.5px/1.45 var(--sans);color:#4A5959;margin:0 0 22px;padding-left:12px;border-left:3px solid var(--brass)}
.cmd-cdc b{color:var(--deep);font-weight:800}
.cmd-offre .cmd-express{margin-top:14px}
.cmd-garantie{display:flex;gap:10px;align-items:flex-start;margin:0;padding:18px 32px 0;
  font:500 15.5px/1.45 var(--sans);color:#3D4C4C}
.cmd-garantie svg{flex:0 0 auto;width:22px;height:22px;color:#2F7A4E;margin-top:1px}
.cmd-garantie b{display:block;color:var(--deep);font-weight:800;font-size:17px;margin-bottom:2px}
.cmd-apres{padding:26px 32px 30px;border-top:1px solid #EDE6D8}
.cmd-apres h2{font:700 19px/1.25 var(--sans);color:var(--deep);margin:0 0 8px}
.cmd-apres p{font-size:16px;line-height:1.5;margin:0 0 12px}
.cmd-photo[hidden],.cmd-cdc[hidden],.cmd-garantie[hidden],.cmd-apres[hidden]{display:none}
@media(max-width:940px){
  .cmd-qui{gap:12px;margin:0 0 10px}
  .cmd-photo img{width:54px;height:54px}
  .cmd-cdc{font-size:14.5px;margin:0}
  .cmd-garantie{padding:14px 16px 0;font-size:14.5px}
  .cmd-garantie b{font-size:16px}
  .cmd-apres{padding:20px 16px 22px}
  .cmd-apres p{font-size:15.5px}
}
.cmd-photo{flex:0 0 auto}
@media(max-width:940px){
  .cmd-qui .cmd-chapo{font-size:15.5px;line-height:1.4}
  .cmd-offre .cmd-express{margin-top:10px;padding-top:8px;padding-bottom:8px}
  .cmd-recap-tel{padding-top:14px}
  .cmd-recap-tel ul{gap:4px;margin-bottom:10px}
  .cmd-recap-tel li{font-size:14.5px}
}
@media(max-width:940px){
  /* Le prix est déjà sur la formule et sur le bouton : pas de ligne Total. */
  .cmd-recap-tel .cmd-recap-total{display:none}
  .cmd-recap-tel ul{margin-bottom:2px}
  .cmd-offre .cmd-express .express-lib em{display:none}
  .cmd-offre .cmd-express{min-height:0}
  .cmd-offre{padding-bottom:16px}
  .cmd-recap h1{font-size:25px;margin-bottom:10px}
}
@media(max-width:940px){.cmd-garantie{background:#FCFAF5}}
/* Photo : tête et épaules, comme dans les vidéos ; un carré arrondi garde les épaules. */
.cmd-photo img{width:76px;height:76px;border-radius:18px}
@media(max-width:940px){.cmd-photo img{width:66px;height:66px;border-radius:16px}}

/* Ligne « vues sur YouTube » sous le chapô : du texte et une icône, aucun lecteur chargé. */
.cmd-yt{display:flex;align-items:center;gap:8px;margin:8px 0 0;font:500 15px/1.3 var(--sans);color:#4A5959}
.cmd-yt svg{flex:0 0 auto;width:22px;height:16px}
.cmd-yt b{color:var(--deep);font-weight:800}
.cmd-yt[hidden]{display:none}
@media(max-width:940px){.cmd-yt{font-size:14.5px;margin-top:6px}}
.acc-qui .cmd-yt{margin:8px 0 0;font:500 15px/1.3 var(--sans);color:#4A5959}
@media(max-width:940px){.acc-qui .cmd-yt{font-size:14.5px;margin-top:6px}}

/* Barre de paiement collée en bas (téléphone), une fois le bouton dépassé. */
.cmd-barre{display:none}
@media(max-width:940px){
  .cmd-barre:not([hidden]){display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #E3D9C8;
    box-shadow:0 -6px 18px rgba(20,40,45,.10)}
  .cmd-barre p{flex:1;margin:0;display:flex;flex-direction:column;line-height:1.2}
  .cmd-barre p b{font:800 21px/1.1 var(--sans);color:var(--deep);letter-spacing:-.02em}
  .cmd-barre p span{font:500 13px/1.3 var(--sans);color:#2F7A4E}
  .cmd-barre .btn{flex:0 0 auto;min-height:50px;padding:0 26px;font-size:18px}
  body.barre-on{padding-bottom:84px}
}

/* ==========================================================================
   L'ACTION AVANT LE PRIX (31 octobre 2026, après-midi)
   Le bouton dit ce qu'on obtient (« Faire vérifier mon relevé ») ; le prix
   passe en seconde ligne. La formule n'est plus une case cochée mais l'offre
   elle-même ; les deux options, plus discrètes, se lisent comme des ajouts.
   ========================================================================== */
.cmd-btn2{flex-direction:column;gap:3px;line-height:1.15;padding-top:12px;padding-bottom:12px}
.cmd-btn2 .cmd-btn-l1{font-size:20px;font-weight:800}
.cmd-btn2 .cmd-btn-l2{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;opacity:.92}
.cmd-btn2 .btn-cadenas{width:14px;height:14px;margin:0}
.cmd-options-tit{margin:14px 0 2px;font:600 14px/1.3 var(--sans);color:var(--muted)}
.cmd-offre .cmd-conjoint{margin-top:6px}
.cmd-offre .cmd-express,.cmd-offre .cmd-express.on{background:none;border:0;padding:4px 0;min-height:0;margin-top:8px;box-shadow:none}
.cmd-offre .cmd-express .express-lib b,.cmd-offre .cmd-express.on .express-lib b{font-weight:500;font-size:16px;color:#3D4C4C}
.cmd-offre .cmd-express .express-prix,.cmd-offre .cmd-express.on .express-prix{color:var(--muted);font-weight:700;font-size:16px}
.cmd-offre .cmd-express.on .express-carre{background:var(--deep);border-color:var(--deep)}
.cmd-offre .cmd-express .express-lib em{color:var(--muted)}
@media(max-width:940px){
  .cmd-btn2 .cmd-btn-l1{font-size:19px}
  .cmd-options-tit{margin-top:12px}
  .cmd-barre .btn{padding:0 20px;font-size:17px}
}
.cmd-offre .cmd-express{margin-left:4px}
/* Ordinateur : le prix est sur l'offre et sur le bouton, pas de ticket « Total TTC ». */
.cmd-ticket .cmd-total{display:none}
.cmd-ticket{padding-bottom:12px}

/* ==========================================================================
   AVIS DE CLIENTS (31 octobre 2026)
   Messages réels reçus par email après l'analyse : prénom + initiale, mois,
   textes raccourcis et orthographe corrigée (dit sous la grille). Pas de note
   sur 5 : personne n'a noté, une note inventée serait trompeuse.
   ========================================================================== */
.cmd-avis-mini{margin:12px 0 0;text-align:center;font:600 15.5px/1.4 var(--sans);color:var(--deep)}
.cmd-avis-mini span{display:block;font-weight:500;font-size:13.5px;color:var(--muted)}
.cmd-avis-mini a{display:inline-block;margin-top:2px;font:600 13.5px/1.3 var(--sans);color:var(--brass-ink);text-underline-offset:3px}
.mode-depot .cmd-avis-mini{display:none}
.an-avis{background:#FCFAF5}
.avis-grille{columns:2 340px;column-gap:18px}
.avis-carte{break-inside:avoid;margin:0 0 18px;padding:20px 22px 18px;background:#fff;border:1px solid #E3D9C8;border-radius:18px}
.avis-carte blockquote{margin:0 0 12px;font:500 17px/1.55 var(--sans);color:#2C3B3B}
.avis-carte figcaption{font:500 14.5px/1.3 var(--sans);color:var(--muted)}
.avis-carte figcaption b{color:var(--deep);font-weight:700}
.avis-note{margin:6px 0 0;font:500 13px/1.45 var(--sans);color:var(--muted);max-width:60ch}
.avis-cta{margin:24px 0 0}
@media(max-width:620px){
  .avis-carte{padding:16px 18px 14px;margin-bottom:12px}
  .avis-carte blockquote{font-size:16px}
  .avis-cta .btn{width:100%}
}

/* ==========================================================================
   PHOTOS « CHEZ VOUS » (31 octobre 2026)
   ========================================================================== */
.chez-galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 10px}
.chez-galerie figure{margin:0}
.chez-galerie img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:1px solid #E3D9C8;background:#EFE8DC}
.chez-galerie figcaption{margin:7px 2px 0;font:600 15px/1.35 var(--sans);color:var(--deep)}
.chez-note{margin:0 0 26px;font:500 14.5px/1.45 var(--sans);color:var(--muted)}
.ex-photos{margin-top:30px}
@media(max-width:620px){
  .chez-galerie{grid-template-columns:repeat(2,1fr);gap:10px}
  .chez-galerie figcaption{font-size:14.5px}
}
/* Défilé de photos. Ordinateur : 4 visibles + flèches.
   Téléphone : une carte et le bord de la suivante, on fait glisser au doigt. */
.chez-defile{position:relative;margin:0 0 10px}
.chez-piste{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 6px;outline:none}
.chez-piste::-webkit-scrollbar{display:none}
.chez-carte{position:relative;flex:0 0 calc((100% - 42px) / 4);margin:0;scroll-snap-align:start}
.chez-carte img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px;
  background:#EFE8DC;box-shadow:0 1px 2px rgba(30,40,40,.08),0 6px 18px rgba(30,40,40,.08)}
/* Pastille verte en haut à gauche de chaque photo. */
.chez-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;
  border-radius:999px;background:#2E6B45;color:#fff;font:800 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.chez-badge::before{content:"";width:9px;height:5px;margin-top:-3px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg)}
.chez-sec{background:#fff;padding-bottom:18px}
.chez-sec + .an-avis{padding-top:34px}
.chez-chapo{margin:-4px 0 18px;font:500 17px/1.5 var(--sans);color:#3D4C4C;max-width:60ch}
@media(max-width:620px){.chez-chapo{font-size:16px}}
.chez-carte figcaption{margin:9px 2px 0;font:500 14.5px/1.35 var(--sans);color:var(--muted)}
.chez-carte figcaption b{display:block;font:700 16px/1.3 var(--sans);color:var(--deep)}
.chez-fleche{position:absolute;top:calc(50% - 25px);width:44px;height:44px;border-radius:50%;border:1px solid #E3D9C8;
  background:#fff;color:var(--deep);font:400 30px/40px var(--sans);cursor:pointer;box-shadow:0 4px 14px rgba(30,40,40,.14)}
.chez-prec{left:-14px}.chez-suiv{right:-14px}
@media(max-width:940px){.chez-carte{flex-basis:calc((100% - 28px) / 3)}}
@media(max-width:620px){
  .chez-piste{gap:10px;margin:0 -16px;padding:2px 16px 6px;scroll-padding:0 16px}
  .chez-carte{flex-basis:78%}
  /* Flèches aussi sur téléphone (le défilé tourne en boucle), plus petites, posées sur les photos. */
  .chez-fleche{width:38px;height:38px;font-size:26px;line-height:34px;top:calc(50% - 21px);background:rgba(255,255,255,.95)}
  .chez-prec{left:4px}.chez-suiv{right:4px}
  .chez-carte figcaption b{font-size:16.5px}
}

/* ==========================================================================
   LISIBILITÉ 60 ANS ET PLUS (31 octobre 2026)
   Plus aucun texte utile sous 15 px sur la page de commande ; les mentions
   secondaires restent à 14,5 px au minimum.
   ========================================================================== */
.cmd-contact{margin:14px 0 0;font:500 15px/1.45 var(--sans);color:#3D4C4C;text-align:center}
.cmd-contact a{color:var(--deep);font-weight:700;text-underline-offset:3px;word-break:break-word}
.mode-depot .cmd-contact{display:none}
.cmd-carte-txt em{font-size:15px}
.cmd-options-tit{font-size:15.5px}
.cmd-mini-garanties li{font-size:15.5px}
.cmd-secu-sous,.cmd-cgv,.cmd-cartes{font-size:14.5px}
.cmd-avis-mini span,.cmd-avis-mini a{font-size:14.5px}
.avis-note{font-size:14.5px}
.avis-carte figcaption{font-size:15px}
@media(max-width:940px){
  .cmd-qui .cmd-chapo{font-size:16.5px}
  .cmd-cdc{font-size:15.5px}
  .cmd-recap-tel li{font-size:15.5px}
  .cmd-garantie{font-size:15.5px}
  .cmd-garantie b{font-size:17px}
  .cmd-barre p span{font-size:14px}
  .cmd-btn2 .cmd-btn-l2{font-size:15px}
}
/* Après paiement : rien qui ressemble à une nouvelle vente. */
.page-recue .promobar,.page-recue .cta-tel,.page-recue .nav-cta{display:none!important}
.page-recue .recue p,.page-recue .recue li{font-size:17px}
.page-recue .recue .maj{font-size:16px}
/* Liens dans le texte de la commande : une zone de toucher plus haute. */
.cmd-avis-mini a,.cmd-contact a,.cmd-cgv a{display:inline-block;padding:10px 4px;margin:-6px 0}
.avis-cta .cmd-btn2,.an-fin .cmd-btn2{text-align:center}

/* ==========================================================================
   EXEMPLE D'ANALYSE (31 octobre 2026)
   Dossier fictif. Un extrait lisible (une anomalie et ses chiffres) pour la
   preuve, puis quatre pages en vignettes trop petites pour lire le texte
   courant : on voit le sérieux et le volume, pas la méthode.
   ========================================================================== */
.ex-chapo{margin:-10px 0 20px;font:600 18px/1.45 var(--sans);color:var(--deep)}
.ex-chapo span{display:block;font-weight:500;font-size:15px;color:var(--muted)}
.ex-extrait{position:relative;margin:0 0 22px;max-width:760px}
.ex-extrait img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid #E3D9C8;
  box-shadow:0 10px 28px rgba(18,60,74,.12)}
.ex-extrait figcaption{margin:10px 2px 0;font:500 15.5px/1.45 var(--sans);color:#3D4C4C}
.ex-badge{position:absolute;top:-11px;left:14px;z-index:1;padding:4px 10px;border-radius:999px;background:var(--deep);
  color:#fff;font:700 13px/1.2 var(--sans);letter-spacing:.02em}
.ex-pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 34px}
.ex-page{margin:0}
.ex-page img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid #E3D9C8;
  box-shadow:0 8px 20px rgba(18,60,74,.14)}
.ex-page figcaption{margin:9px 0 0;font:600 15px/1.35 var(--sans);color:var(--deep)}
@media(max-width:760px){
  .ex-pages{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
  .ex-chapo{font-size:17px}
}
/* L'extrait est du vrai texte (lisible à toute taille), habillé comme l'encadré du PDF. */
.ex-anomalie{background:#FBF5E6;border:1.5px solid #D9B865;border-radius:14px;padding:22px 22px 18px;
  box-shadow:0 10px 28px rgba(18,60,74,.10)}
.ex-num{margin:0 0 6px;font:800 14px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#A97E22}
.ex-titre{margin:0 0 14px;font:800 19px/1.3 var(--sans);color:var(--deep);letter-spacing:-.01em}
.ex-table{margin:0 0 14px;padding:0}
.ex-table div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid #EADFC6}
.ex-table dt{font:500 16px/1.35 var(--sans);color:#3D4C4C}
.ex-table dd{margin:0;font:800 16px/1.3 var(--sans);color:var(--deep);text-align:right;white-space:nowrap}
.ex-table dd.ex-zero{color:#B03A2E;font-size:20px}
.ex-faire{margin:0;padding-top:12px;border-top:1px solid #EADFC6;font:500 16px/1.5 var(--sans);color:#2C3B3B}
@media(max-width:620px){
  .ex-anomalie{padding:20px 16px 16px}
  .ex-titre{font-size:18px}
  .ex-table div{flex-direction:column;align-items:flex-start;gap:2px}
  .ex-table dd{text-align:left}
}
/* Toutes les pages en éventail : le volume d'un vrai dossier, sans le lire. */
.ex-eventail{margin:0 0 26px}
.ex-eventail img{display:block;width:100%;max-width:980px;height:auto;margin:0 auto}
.ex-eventail figcaption{margin:12px auto 0;max-width:760px;font:500 16px/1.5 var(--sans);color:#3D4C4C;text-align:center}
.ex-zoom{margin:0 0 18px;font:700 17px/1.3 var(--sans);color:var(--deep)}
@media(max-width:620px){
  .ex-eventail{margin:0 -8px 22px}
  .ex-eventail figcaption{font-size:15.5px;padding:0 8px}
}
@media(max-width:620px){.ex-eventail{margin:0 -16px 22px}.ex-eventail figcaption{padding:0 16px}}

/* ==========================================================================
   ÉVENTAIL EN HTML (31 octobre 2026, refait)
   Chaque page est une image nette (480 px, deux fois sa taille affichée),
   posée et tournée par le CSS sur le fond même de la section : pas de
   rectangle incrusté, pas de texte figé dans une image. Pivot sous les pages.
   ========================================================================== */
.ex-eventail{margin:0 0 26px}
.ex-fan{--pw:230px;position:relative;height:calc(var(--pw) * 1.414 + 40px);margin:0 auto;max-width:100%}
.ex-fan picture{display:contents}
.ex-fan img{position:absolute;left:50%;bottom:20px;width:var(--pw);height:auto;margin-left:calc(var(--pw) / -2);
  transform:rotate(var(--a));transform-origin:50% 240%;border-radius:3px;
  box-shadow:0 1px 2px rgba(18,40,50,.10),0 8px 22px rgba(18,40,50,.16)}
@media(max-width:620px){
  .ex-eventail{margin:0 0 22px}
  .ex-fan{--pw:150px;height:calc(var(--pw) * 1.414 + 34px)}
  .ex-fan img{bottom:14px}
}
/* Réglage : l'éventail tient en entier dans la largeur (±20° à l'écran,
   ±16° sur téléphone), pivot plus proche. Les angles du HTML vont à ±30°. */
.ex-fan{--k:.667;height:calc(var(--pw) * 1.414 + 30px)}
.ex-fan img{transform:rotate(calc(var(--a) * var(--k)));transform-origin:50% 190%;bottom:10px}
@media(max-width:620px){
  .ex-fan{--pw:136px;--k:.533;height:calc(var(--pw) * 1.414 + 22px)}
  .ex-fan img{bottom:8px}
}
.ex-fan{height:calc(var(--pw) * 1.414 + 42px)}
@media(max-width:620px){.ex-fan{height:calc(var(--pw) * 1.414 + 34px)}}
.ex-eventail figcaption{margin-top:18px}
/* Les pages des bords descendent en tournant : on les remonte d'autant. */
.ex-fan,.ex-fan img{--bas:calc(var(--pw) * .27)}
.ex-fan{height:calc(var(--pw) * 1.414 + var(--bas) + 14px)}
.ex-fan img{bottom:var(--bas)}
@media(max-width:620px){.ex-fan{height:calc(var(--pw) * 1.414 + var(--bas) + 12px)}.ex-fan img{bottom:var(--bas)}}
.ex-eventail figcaption{margin-top:14px}
/* Pages plus grandes et plus nettes (640 px, rendues depuis le PDF à 300 dpi) ;
   éventail un peu plus serré pour qu'elles tiennent quand même. */
.ex-fan{--pw:250px;--k:.62}
.ex-fan img{backface-visibility:hidden;background:#fff}
@media(max-width:620px){.ex-fan{--pw:152px;--k:.47}}

/* ==========================================================================
   ACCUEIL (31 octobre 2026)
   Mène d'abord à l'analyse (le produit qui se vend), le test gratuit en
   second choix ; mêmes briques que la page de commande (photo, chiffre de la
   Cour des comptes, bouton à deux lignes, avis).
   ========================================================================== */
.acc-hero{padding:34px 0 40px;background:var(--cream)}
.acc-hero-in{max-width:720px}
.acc-hero h1{font-size:clamp(29px,4.4vw,46px);line-height:1.1;letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance}
.acc-qui{margin:0 0 14px}
.acc-qui p{margin:0;font:500 18px/1.5 var(--sans);color:#3D4C4C}
.acc-cdc{margin:0 0 22px}
.acc-btn{max-width:460px}
.acc-hero .cmd-avis-mini{max-width:460px;text-align:center}
.acc-test{margin:26px 0 0;max-width:460px;padding:16px 18px;border:1px solid #E3D9C8;border-radius:16px;background:#FCFAF5}
.acc-test p{margin:0 0 8px;font:500 16px/1.5 var(--sans);color:#3D4C4C}
.acc-lien{font:700 16.5px/1.3 var(--sans);color:var(--deep);text-underline-offset:3px}
.acc-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.acc-bloc{background:#fff;border:1px solid #E3D9C8;border-radius:20px;padding:26px 26px 28px}
.acc-bloc h2{font:800 23px/1.2 var(--sans);letter-spacing:-.02em;color:var(--deep);margin:0 0 10px}
.acc-bloc p{font-size:16.5px;line-height:1.55}
.acc-note{font-size:15px!important;color:var(--muted)}
.an-avis .avis-note a{color:var(--deep);font-weight:700}
@media(max-width:760px){
  .acc-hero{padding:22px 0 30px}
  .acc-hero h1{font-size:28px;margin-bottom:16px}
  .acc-qui p{font-size:16.5px}
  .acc-deux{grid-template-columns:1fr}
  .acc-bloc{padding:22px 20px 24px}
  .acc-bloc .btn{width:100%}
}
.dos-pont{margin:24px auto 0;text-align:left}

/* ==========================================================================
   FENÊTRE DE SORTIE −20 % (01/11/2026) — site.js, section 7 ; prix remisés
   sur /analyse (commande.html) ; montant payé fixé par lib/tarifs.js (CODES).
   ========================================================================== */
.rjs{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(12,40,51,.55)}
/* Sans fondu : un onglet en arrière-plan fige les transitions et laissait la fenêtre à demi visible. */
.rjs:not(.is-on){display:none}
.rjs-carte{position:relative;width:100%;max-width:440px;padding:30px 26px 20px;border-radius:20px;background:#FCFAF5;
  text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.rjs-x{position:absolute;top:8px;right:10px;width:40px;height:40px;border:0;background:none;font:400 30px/1 var(--sans);
  color:var(--muted);cursor:pointer}
.rjs-kicker{margin:0 0 8px;font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.rjs-carte h2{font-size:25px;line-height:1.2;margin:0 0 12px}
.rjs-prix{margin:0 0 12px;font:800 34px/1.1 var(--sans);color:var(--deep)}
.rjs-prix s{font-weight:600;font-size:22px;color:var(--muted)}
.rjs-prix span{display:block;margin-top:4px;font:500 15px/1.4 var(--sans);color:var(--muted)}
.rjs-txt{margin:0 0 18px;font:500 16px/1.5 var(--sans);color:#3D4C4C}
.rjs-txt b{color:var(--deep)}
.rjs-go{width:100%;font-size:18px}
.rjs-non{margin:10px 0 0;padding:8px;border:0;background:none;font:500 15px/1.3 var(--sans);color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cmd-remise{margin:0 0 12px;padding:8px 12px;border-radius:10px;background:#E6F2EA;color:#2E6B45;
  font:700 15px/1.3 var(--sans);text-align:center}
.cmd-px-barre{font-weight:500;color:var(--muted);margin-right:4px}
@media(max-width:620px){
  .rjs-carte{padding:28px 20px 16px}
  .rjs-carte h2{font-size:23px}
}