/* ============================================================
   ALUR Express, direction artistique editoriale.
   Noir, jaune signal, grande typographie en capitales.
   Meme charte que haccp-express.com, adaptee au balisage d'ici.
   Polices hebergees : la feuille Google bloquait le rendu 407 ms.
   ============================================================ */

@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --black:#0C0C0D;
  --black-2:#18181B;
  --yellow:#FFD400;
  --yellow-dark:#E5BE00;
  --red:#FF4D2E;
  --red-txt:#BE2E11;  /* rouge lisible sur fond clair : #FF4D2E ne faisait que 3,31 */
  --green:#0E7A4F;
  --paper:#F5F2EA;
  --paper-2:#EDE8DC;
  --white:#fff;
  --ink-2:#4A4A4E;
  --muted:#66666C;
  --line:#DFD9CB;
  --line-dark:#2C2C31;
  --display:"Archivo","Arial Black",Impact,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--black);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
svg{width:1em;height:1em}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.035em;margin:0 0 .45em;text-transform:uppercase;overflow-wrap:break-word}
h1{font-size:clamp(1.75rem,6.4vw,5.2rem);hyphens:manual;overflow-wrap:break-word}
h2{font-size:clamp(1.55rem,4.4vw,3.2rem)}
h3{font-size:1.28rem;letter-spacing:-.02em;line-height:1.15}
h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
p{margin:0 0 1.05rem}
mark{background:var(--yellow);color:var(--black);padding:0 .1em}
::selection{background:var(--yellow);color:var(--black)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:880px;margin-inline:auto}
.section{padding:clamp(56px,8vw,100px) 0}
.section--surface,.section--alt{background:var(--paper-2)}
.section--ink{background:var(--black);color:#C9C9CF}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.center{text-align:center}
.lead{font-size:1.18rem;color:var(--ink-2);max-width:62ch;line-height:1.6}
.lead--sm{font-size:1rem}
.center .lead{margin-inline:auto}
.mt-3{margin-top:22px}
.mt-4{margin-top:46px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.disclaimer{font-size:.8rem;color:var(--muted);line-height:1.6;max-width:92ch}
.hint{display:block;font-weight:400;font-size:.78rem;color:var(--muted);text-transform:none;letter-spacing:0}

/* ---------- surtitres et pastilles ---------- */
.eyebrow,.lec__k,.choix__lbl,.trust__lbl{
  display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:16px;padding-bottom:6px;border-bottom:3px solid var(--yellow);color:var(--black);
}
.section--ink .eyebrow{color:var(--yellow)}
.pill,.tag{
  display:inline-flex;align-items:center;gap:.45rem;padding:6px 13px;
  font-size:.71rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--black);color:var(--yellow);border:2px solid var(--black);
}
.pill--amber,.pill--solid{background:var(--yellow);color:var(--black)}
.pill--blue{background:var(--white);color:var(--black)}
.pill--green{background:var(--green);color:#fff;border-color:var(--green)}
.pill--dot::before{content:"";width:7px;height:7px;background:currentColor;border-radius:50%}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:16px 30px;font-family:var(--sans);font-weight:700;font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.25;
  border:2px solid var(--black);background:var(--white);color:var(--black);
  cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s ease;
}
.btn svg{width:16px;height:16px}
.btn--amber{background:var(--yellow);color:var(--black);box-shadow:5px 5px 0 var(--black)}
.btn--amber:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--black)}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:var(--black);color:#fff}
.btn--outline-light{background:transparent;color:#fff;border-color:#fff}
.btn--outline-light:hover{background:#fff;color:var(--black)}
.btn--google{background:var(--white);gap:10px}
.btn--google:hover{background:var(--yellow)}
.btn--sm{padding:11px 18px;font-size:.75rem}
.btn--wide{width:100%}
.btn[disabled]{opacity:.5;cursor:progress}

/* ---------- barre haute et en-tete ---------- */
.topbar{background:var(--black);color:#C9C9CF;font-size:.76rem;padding:9px 0}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:center}
.topbar span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar svg{width:14px;height:14px;color:var(--yellow)}
.topbar b{font-weight:700;color:#fff}

.hdr{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--black)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:22px;height:74px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1}
.logo__mark{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--black);color:#fff}
.logo__mark svg{width:24px;height:24px}
.logo small{display:block;font-family:var(--sans);font-size:.58rem;font-weight:700;letter-spacing:.18em;color:var(--muted);margin-top:4px}
.nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;font-size:.79rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:.16s}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hdr__cta{display:flex;align-items:center;gap:12px}
.burger{position:absolute;opacity:0;pointer-events:none}
.burger__btn{display:none;border:2px solid var(--black);padding:8px 10px;cursor:pointer;background:var(--white)}
.burger__btn svg{width:20px;height:20px;display:block}

/* ---------- hero ---------- */
.hero{background:var(--black);color:#C9C9CF;padding:clamp(52px,7vw,86px) 0 clamp(58px,8vw,96px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:760px;height:760px;right:-240px;top:-280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,212,0,.16),transparent 62%)}
.hero__in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
.hero h1{color:#fff;margin-bottom:.28em}
.hero .lead{color:#A9A9B1;font-size:1.16rem;max-width:52ch}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero__note{display:flex;flex-direction:column;gap:9px;margin-top:30px;font-size:.87rem;color:#A9A9B1}
.hero__note span{display:flex;align-items:center;gap:9px}
.hero__note svg{width:16px;height:16px;color:var(--yellow);flex:none}

/* ---------- bandeau de confiance et chiffres ---------- */
.trust{background:var(--yellow);border-block:2px solid var(--black);padding:16px 0}
.trust__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px}
.trust__lbl{margin:0;padding:0;border:0;font-size:.72rem}
.trust__items{display:flex;flex-wrap:wrap;gap:12px 30px;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.trust__items span{display:inline-flex;align-items:center;gap:8px}
.trust__items svg{width:15px;height:15px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--black);border-left:2px solid var(--black)}
.stat{border-right:2px solid var(--black);border-bottom:2px solid var(--black);padding:32px 24px;background:var(--white)}
.stat:first-child{background:var(--yellow)}
.stat b,.stat strong{display:block;font-family:var(--display);font-size:3rem;line-height:.9;letter-spacing:-.05em;margin-bottom:8px}
.stat span{font-size:.82rem;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.stats__note{font-size:.82rem;color:var(--muted);margin-top:16px}

/* ---------- titres de section ---------- */
.s-head{margin-bottom:38px;max-width:70ch}
.s-head--center{margin-inline:auto;text-align:center}
.h-sec{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:10px}

/* ---------- grilles et cellules ---------- */
.grid{display:grid;gap:0}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--split{grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.grid--fiche{grid-template-columns:1fr 340px;gap:48px;align-items:start}

.feat,.step,.info-card,.encart,.note{border:2px solid var(--black);background:var(--white);padding:30px 28px}
.feat{transition:background .15s}
.feat:hover,.feat--hi{background:var(--yellow)}
.feat__ico{width:44px;height:44px;display:grid;place-items:center;background:var(--black);color:var(--yellow);margin-bottom:18px}
.feat__ico svg{width:22px;height:22px}
.feat h3{margin-bottom:.45em}
.feat p{color:var(--ink-2);font-size:.96rem;margin:0}

.steps{display:grid;gap:0;border-top:2px solid var(--black);border-left:2px solid var(--black)}
.step{border:0;border-right:2px solid var(--black);border-bottom:2px solid var(--black)}
.step .n,.instant__num{font-family:var(--display);font-size:2.6rem;line-height:.85;letter-spacing:-.05em;display:block;margin-bottom:14px}

.info-card{background:var(--black);color:#C9C9CF;border-color:var(--black)}
.info-card h3{color:#fff;margin-bottom:20px}
.info-card ul{list-style:none;display:grid;gap:18px;margin:0;padding:0}
.info-card li{display:grid;grid-template-columns:22px 1fr;gap:13px;font-size:.92rem}
.info-card svg{width:19px;height:19px;color:var(--yellow);margin-top:3px}
.info-card b{display:block;color:#fff;font-size:.95rem;margin-bottom:2px}
.info-card a{text-decoration:underline;font-weight:700}

.encart{background:var(--yellow)}
.encart h3{margin-bottom:.5em}
.encart p{font-size:.95rem;margin-bottom:.6rem}
.encart p:last-child{margin-bottom:0}
.encart .disclaimer{color:#6B5A00}

/* ---------- catalogue ---------- */
.catwrap{display:grid;gap:0}
.cat{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--black);border-left:2px solid var(--black)}
.card{
  position:relative;border-right:2px solid var(--black);border-bottom:2px solid var(--black);
  background:var(--white);display:flex;flex-direction:column;transition:background .15s;
}
.card:hover,.card:focus-within{background:var(--yellow)}
.card__top{padding:22px 24px 0}
.card__body{padding:14px 24px 20px;flex:1}
.card__body h3{margin-bottom:.4em;font-size:1.16rem}
.card__body h3 a{display:block}
/* toute la carte est cliquable : le lien du titre couvre la surface */
.card__body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card__desc{color:var(--ink-2);font-size:.93rem;margin-bottom:16px}
.card__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-top:14px;border-top:2px solid var(--line)}
.card:hover .card__meta{border-color:rgba(12,12,13,.2);color:#6B5A00}
.card__meta span{display:inline-flex;align-items:center;gap:7px}
.card__meta svg{width:14px;height:14px}
.card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:18px 24px;border-top:2px solid var(--black)}
.card__liens{display:grid;gap:7px;position:relative;z-index:2}
.card__prog{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center;text-decoration:underline;text-underline-offset:3px}
.price{font-family:var(--display);font-size:2.1rem;line-height:.9;letter-spacing:-.05em}
.price small{display:block;font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.card:hover .price small{color:#6B5A00}

/* selecteur en deux questions */
.choix{display:grid;gap:8px;margin-bottom:18px}
.choix__q{display:grid;gap:8px}
.choix__lbl{margin-bottom:2px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.fradio{position:absolute;opacity:0;pointer-events:none}
.filters label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;
  border:2px solid var(--black);background:var(--white);font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;transition:.14s;
}
.filters label:hover{background:var(--yellow)}
.filters label .n{font-family:var(--sans);font-size:.72rem;color:var(--muted)}
.choix__vide{display:none;margin:0 0 22px;padding:18px 20px;background:var(--yellow);border:2px solid var(--black);font-size:.92rem}
.choix__vide label{text-decoration:underline;cursor:pointer;font-weight:800}

/* barre collante d'achat, sur mobile */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--black);border-top:2px solid var(--yellow);padding:12px 0}
.barre__in{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.barre__txt{min-width:0;color:#fff}
.barre__txt b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre__txt span{font-size:.76rem;color:var(--yellow);font-weight:700}

/* ---------- pages produit ---------- */
.phead{background:var(--paper-2);border-bottom:2px solid var(--black);padding-block:clamp(34px,5vw,58px)}
.phead h1{max-width:20ch}
.phead .lead{max-width:66ch;margin-bottom:24px}
.crumb{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:18px}
.crumb a{text-decoration:underline;text-underline-offset:3px}
.crumb span{margin:0 6px}
.phead--fiche .pill,.phead--demo .pill{margin-bottom:16px}

.fiche__faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:2px solid var(--black);border-left:2px solid var(--black);margin-bottom:26px}
.fiche__faits>div{border-right:2px solid var(--black);border-bottom:2px solid var(--black);background:var(--white);padding:16px 18px}
.fiche__faits svg{width:17px;height:17px;color:var(--black);margin-bottom:8px;display:block}
.fiche__faits b{display:block;font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em;text-transform:uppercase}
.fiche__faits span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fiche__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.fiche__prix b{font-family:var(--display);font-size:2.8rem;line-height:.9;letter-spacing:-.05em;display:block}
.fiche__prix small{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fiche__essai{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:.9rem;color:var(--ink-2)}
.fiche__essai svg,.bandeau-essai svg{width:17px;height:17px;flex:none;margin-top:3px}
.fiche__essai a,.bandeau-essai a{font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* Barre d'offre, en haut du catalogue. L'ancienne version affichait 169 EUR
   en premier alors que la publicite annonce des 15 EUR : on ancrait haut
   quelqu'un a qui il manque quatre heures. */
.offre-bar{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  background:var(--yellow);border:2px solid var(--black);box-shadow:5px 5px 0 var(--black);
  padding:14px 18px;margin:24px 0 0;font-size:.9rem;line-height:1.45;color:#5C4E00}
.offre-bar b{font-family:var(--display);font-size:1.6rem;line-height:1;letter-spacing:-.03em;
  color:var(--black);flex:none}
.offre-bar span{flex:1;min-width:min(100%,240px)}
.offre-bar a{color:var(--black);font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* Barre compacte de creation de compte, posee en haut du catalogue. Le bloc
   complet est en bas de page, mais a 12 ecrans de scroll personne ne le voit :
   la mediane de lecture mesuree est de 0 %. Celle-ci coute 80 px, pas 512. */
.compte-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--black);border:2px solid var(--black);box-shadow:5px 5px 0 var(--yellow);
  padding:14px 18px;margin:22px 0 0;font-size:.9rem;line-height:1.45;color:#D8D8DE}
.compte-bar svg{width:18px;height:18px;flex:none;color:var(--yellow)}
.compte-bar span{flex:1;min-width:min(100%,240px)}
.compte-bar b{color:#fff}
.compte-bar .btn{flex:none}
@media(max-width:560px){.compte-bar .btn{width:100%}}

/* Appel a la creation de compte. La campagne Meta optimise sur la creation
   de compte, or aucun des 30 premiers visiteurs n'avait atteint compte.html :
   rien sur le catalogue ne la proposait. Bloc noir sur fond papier, c'est le
   contraste le plus fort de la palette. */
.compte-cta{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  background:var(--black);border:2px solid var(--black);box-shadow:6px 6px 0 var(--yellow);
  padding:26px 30px;margin:0 0 30px}
.compte-cta__k{display:block;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:9px}
.compte-cta h2{font-family:var(--display);font-size:clamp(1.25rem,3.2vw,1.6rem);line-height:1.1;
  letter-spacing:-.02em;color:#fff;margin:0 0 12px}
.compte-cta ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.compte-cta li{display:grid;grid-template-columns:17px 1fr;gap:11px;align-items:start;
  font-size:.9rem;line-height:1.45;color:#D8D8DE}
.compte-cta li svg{width:17px;height:17px;color:var(--yellow);margin-top:3px}
.compte-cta__a{display:grid;gap:9px;justify-items:stretch;min-width:0}
.compte-cta__a small{font-size:.72rem;color:#9A9AA2;text-align:center}
@media(max-width:820px){
  .compte-cta{grid-template-columns:1fr;gap:22px;padding:22px}
  .compte-cta__a{justify-items:stretch}
}
.bandeau-essai{display:flex;gap:11px;align-items:flex-start;background:#fff;border:2px solid var(--black);box-shadow:4px 4px 0 var(--black);padding:15px 18px;margin:0 0 30px;font-size:.92rem}

.mods{list-style:none;margin:0;padding:0}
.mod{display:grid;grid-template-columns:96px 1fr;gap:26px;padding:32px 0;border-top:2px solid var(--black)}
.mod:last-child{border-bottom:2px solid var(--black)}
.mod__n{font-family:var(--display);font-size:3.4rem;line-height:.8;letter-spacing:-.06em}
.mod__c h3{font-size:1.4rem;margin-bottom:.3em}
.mod__d{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mod__d svg{width:13px;height:13px}
.mod__c ul{list-style:none;margin:0;padding:0;color:var(--ink-2);font-size:.95rem;columns:2;column-gap:40px}
.mod__c li{break-inside:avoid;padding-left:18px;position:relative;margin-bottom:7px}
.mod__c li::before{content:"→";position:absolute;left:0;font-weight:800;color:var(--black)}

.obj{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.obj li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:.96rem;color:var(--ink-2)}
.obj svg{width:18px;height:18px;color:var(--black);margin-top:3px}

.fiche__side{position:sticky;top:96px}
.side__box{border:2px solid var(--black);background:var(--white);padding:28px 26px;box-shadow:8px 8px 0 var(--black)}
.side__prix b{font-family:var(--display);font-size:3rem;line-height:.9;letter-spacing:-.05em;display:block}
.side__prix small{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side__prix{margin-bottom:18px}
.side__note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:12px}
.side__dl{margin:22px 0 0;padding-top:20px;border-top:2px solid var(--line);display:grid;gap:14px}
.side__dl dt{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.side__dl dd{margin:0;font-size:.88rem;color:var(--ink-2);line-height:1.6}

.liees{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:2px solid var(--black);border-left:2px solid var(--black)}
.liee{border-right:2px solid var(--black);border-bottom:2px solid var(--black);background:var(--white);padding:22px 24px;display:grid;gap:8px;transition:background .15s}
.liee:hover{background:var(--yellow)}
.liee__t{font-weight:800;font-size:.98rem;line-height:1.3}
.liee__m{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.liee:hover .liee__m{color:#6B5A00}
.liee__m b{font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em}

/* ---------- demonstration ---------- */
.jauge{position:sticky;top:74px;z-index:50;height:4px;background:var(--paper-2);border-bottom:2px solid var(--black)}
.jauge i{display:block;height:100%;width:0;background:var(--yellow);transition:width .12s linear}
.demo__faits{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.demo__faits div{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;background:var(--white);border:2px solid var(--black);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.demo__faits svg{width:15px;height:15px}

.lec{max-width:800px}
.lec__tete{padding-bottom:26px;margin-bottom:34px;border-bottom:2px solid var(--black)}
.lec__k{margin-bottom:10px}
.lec__titre{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:6px}
.lec__st{font-size:.84rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.lec__intro{font-size:1.08rem;line-height:1.75;color:var(--ink-2)}
.lec__s{margin-bottom:40px;scroll-margin-top:96px}
.lec__s h2{font-size:1.5rem;margin-bottom:16px;display:flex;gap:14px;align-items:baseline}
.lec__n{font-family:var(--display);font-size:1.1rem;color:var(--black);background:var(--yellow);padding:2px 8px;flex:none}
.lec__s p{font-size:1rem;line-height:1.8;margin-bottom:14px}
.lec__enc{border:2px solid var(--black);padding:20px 22px;margin:22px 0 6px}
.lec__enc__k{display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.lec__enc b{display:block;margin-bottom:7px;font-size:.98rem}
.lec__enc p{font-size:.93rem;line-height:1.7;margin:0}
.lec__enc--ex{background:var(--white)}
.lec__enc--att{background:var(--yellow)}
.lec__enc--txt{background:var(--paper-2)}
.lec__retenir{background:var(--black);color:#C9C9CF;border:2px solid var(--black);padding:30px 32px;margin:40px 0}
.lec__retenir h2{color:#fff;font-size:1.35rem;margin-bottom:18px}
.lec__retenir ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lec__retenir li{display:grid;grid-template-columns:20px 1fr;gap:13px;font-size:.95rem;line-height:1.65}
.lec__retenir svg{width:18px;height:18px;color:var(--yellow);margin-top:3px}
.lec__src{margin-top:34px;font-size:.86rem}
.lec__src summary{cursor:pointer;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}
.lec__src ul{margin-top:12px;padding-left:18px;display:grid;gap:6px;color:var(--muted);line-height:1.6}

.qcm{border-top:2px solid var(--black);padding-top:36px}
.qcm__l2{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:24px}
.qcm__q{border:2px solid var(--black);background:var(--white);padding:24px 26px}
.qcm__t{font-size:1rem;line-height:1.6;margin-bottom:16px}
.qcm__t b{font-family:var(--display);font-size:.9rem;letter-spacing:.02em;margin-right:5px}
.qcm__reps{display:grid;gap:9px}
.qcm__r{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:13px 16px;border:2px solid var(--black);background:var(--paper);font:inherit;font-size:.94rem;cursor:pointer;transition:.14s}
.qcm__r:hover:not(:disabled){background:var(--yellow)}
.qcm__r:disabled{cursor:default}
.qcm__l{font-family:var(--display);font-size:.85rem;flex:none;margin-top:1px}
.qcm__r.est-bonne{background:var(--yellow)}
.qcm__r.est-fausse{background:#FFF1EE;color:#8C2413;border-color:var(--red)}
.qcm__exp{display:grid;grid-template-columns:20px 1fr;gap:12px;margin-top:16px;padding-top:16px;border-top:2px solid var(--line)}
.qcm__exp svg{width:18px;height:18px;margin-top:2px}
.qcm__exp p{font-size:.9rem;line-height:1.7;color:var(--ink-2);margin:0}
.qcm__bilan{margin-top:26px;border:2px solid var(--black);background:var(--yellow);padding:22px 24px}
.qcm__bilan b{display:block;font-family:var(--display);font-size:1.5rem;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:8px}
.qcm__bilan p{font-size:.93rem;margin:0}
.demo__offres{display:grid;gap:14px}
.demo__offre{border:2px solid var(--black);background:var(--white);padding:20px 22px;display:grid;gap:6px;transition:background .15s}
.demo__offre:hover{background:var(--yellow)}
.demo__offre__t{font-weight:800}
.demo__offre__m{font-size:.85rem;color:var(--ink-2)}
.demo__offre__p{font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em}

/* ---------- formulaires ---------- */
.form{border:2px solid var(--black);background:var(--white);padding:clamp(24px,3.4vw,36px);box-shadow:8px 8px 0 var(--black)}
.form h2{font-size:1.5rem}
.frow{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-bottom:16px}
.frow--1{grid-template-columns:1fr}
.field{display:grid;gap:7px}
.field label{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.field label span{color:var(--red-txt)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:2px solid var(--black);background:var(--paper);
  font-family:inherit;font-size:1rem;color:var(--black);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:var(--yellow)}
.field textarea{min-height:130px;resize:vertical}
.check{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;font-size:.85rem;color:var(--ink-2);margin-bottom:22px}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--black)}
.check a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.formok{border:2px solid var(--black);background:var(--yellow);padding:14px 16px;margin-bottom:22px;font-size:.92rem;font-weight:600}
.formok b{font-weight:800}
#form-compte [data-erreur]{background:#FFF1EE;border-color:var(--red);color:#8C2413}

.qbloc{border:0;padding:0;margin:0 0 22px;min-width:0}
.qbloc legend{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;padding:0}
.qbloc legend span{color:var(--red-txt)}
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchips label{
  position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:11px 16px;
  border:2px solid var(--black);background:var(--white);font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;transition:.14s;
}
.qchips label:hover{background:var(--yellow)}
.qchips input{position:absolute;opacity:0;pointer-events:none}
.qchips label:has(input:checked){background:var(--black);color:#fff}
.qchips label:has(input:focus-visible){outline:3px solid var(--yellow);outline-offset:2px}

.onglets{display:flex;gap:26px;margin-bottom:24px;border-bottom:2px solid var(--black)}
.onglet{padding:11px 2px;margin-bottom:-2px;background:none;border:0;border-bottom:3px solid transparent;font:inherit;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:pointer}
.onglet:hover{color:var(--black)}
.onglet.est-actif{color:var(--black);border-bottom-color:var(--yellow)}
.ou{position:relative;text-align:center;margin:20px 0 22px}
.ou::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line)}
.ou span{position:relative;background:var(--white);padding:0 14px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.recevoir{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,54px);align-items:center}
.recevoir h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.recevoir p{font-size:.96rem;color:var(--ink-2);max-width:46ch}
.recevoir__form label[for]{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.recevoir__ligne{display:flex;gap:10px;margin-bottom:16px}
.recevoir__ligne input{flex:1;min-width:0;padding:13px 15px;border:2px solid var(--black);background:var(--paper);font:inherit;font-size:1rem}
.recevoir__ligne input:focus{outline:none;background:var(--yellow)}
.recevoir__ligne .btn{flex:none}
.recevoir__form .check{margin-bottom:0}

/* ---------- espace personnel ---------- */
.espace__attente{font-size:.86rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:30px 0}
.espace__liste{display:grid;gap:0;border-top:2px solid var(--black);border-left:2px solid var(--black)}
.espace__f{display:flex;align-items:center;justify-content:space-between;gap:18px;border-right:2px solid var(--black);border-bottom:2px solid var(--black);background:var(--white);padding:20px 22px}
.espace__f b{display:block;font-size:1rem}
.espace__f__m{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.espace__f__e{flex:none;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);border:2px solid var(--black);padding:6px 12px}
.espace__profil{border-top:0;padding-top:0;max-width:520px}

/* ---------- FAQ, tarifs, comparateur ---------- */
.faq{max-width:900px}
.faq details{border-top:2px solid var(--black)}
.faq details:last-of-type{border-bottom:2px solid var(--black)}
.faq summary{cursor:pointer;list-style:none;padding:22px 56px 22px 0;font-weight:700;position:relative;font-size:1.05rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:1.6rem;line-height:1}
.faq details[open] summary{background:var(--yellow);padding-left:18px;margin-inline:-18px}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:6px 0 26px;color:var(--ink-2);font-size:.97rem;max-width:70ch}
.faq .a p:last-child{margin-bottom:0}

.plan{border:2px solid var(--black);background:var(--white);padding:34px 30px;display:flex;flex-direction:column}
.plan--hi{background:var(--yellow)}
.plan__tag{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.plan--hi .plan__tag{color:#6B5A00}
.plan__price{font-family:var(--display);font-size:3.2rem;line-height:.86;letter-spacing:-.05em;margin-bottom:6px}
.plan__unit,.plan__for{font-size:.84rem;color:var(--muted)}
.plan--hi .plan__unit,.plan--hi .plan__for{color:#6B5A00}
.plan .btn{margin-top:auto}

.tarif-tab,.compa{width:100%;border-collapse:collapse;border:2px solid var(--black);background:var(--white);font-size:.95rem}
.tarif-tab th,.tarif-tab td,.compa th,.compa td{padding:15px 18px;text-align:left;border-bottom:2px solid var(--line)}
.tarif-tab thead th,.compa thead th{background:var(--black);color:#fff;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;border:0}
.tarif-tab__cta{text-align:right}
.compa__nous{background:var(--yellow)}
.compa__nom{font-weight:700}
.compa__prix,.compa__heure{font-family:var(--display);font-size:1.2rem;letter-spacing:-.02em}
.compa__note,.compa__barre,.compa__liste{font-size:.85rem;color:var(--ink-2)}
.cmp,.ok,.no,.off{font-weight:800}
.no{color:var(--red-txt)}
.ok{color:var(--green)}

/* ---------- illustrations, documents, pied de page ---------- */
.illus,.illu{border:2px solid var(--black);background:var(--white);padding:26px}
.illus__bloc{border:2px solid var(--black);background:var(--paper-2);padding:20px}
.illus__legende{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:14px}
.badge-cert{display:inline-flex;align-items:center;gap:8px;background:var(--black);color:var(--yellow);padding:7px 13px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.doc{max-width:820px}
.doc h2{font-size:1.4rem;margin:44px 0 14px}
.doc h2:first-child{margin-top:0}
.doc__maj{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:26px}
.doc__sommaire{border:2px solid var(--black);background:var(--white);padding:24px 26px;margin-bottom:40px}
.doc__sommaire ol{margin:0;padding-left:20px}
.doc__sommaire a{text-decoration:underline;text-underline-offset:3px}
.doc__puces{padding-left:20px}
.doc__liste dt{font-weight:800;margin-top:16px}
.doc__liste dd{margin:4px 0 0;color:var(--ink-2)}
.doc__acompleter{background:var(--yellow);padding:1px 7px;font-weight:800;font-size:.85rem}
.sans-n span{display:inline}

.cta{background:var(--yellow);border-block:2px solid var(--black);padding:clamp(46px,6vw,72px) 0}
.cta__in{text-align:center;max-width:70ch;margin-inline:auto}
.cta h2{margin-bottom:.3em}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

.ftr{background:var(--black);color:#9A9AA2;padding:clamp(46px,6vw,72px) 0 32px;font-size:.9rem}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:38px;margin-bottom:44px}
.ftr .logo,.ftr h4{color:#fff}
.ftr .logo small{color:#9A9AA2}  /* var(--muted) est trop sombre sur le noir : 3,43 */
.ftr .logo__mark{background:var(--yellow);color:var(--black)}
.ftr__about{margin-top:16px;max-width:34ch;font-size:.87rem}
.ftr h4{margin-bottom:16px;color:var(--yellow)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a:hover{color:var(--yellow)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;border-top:2px solid var(--line-dark);padding-top:24px;font-size:.82rem}
.ftr__legal{display:flex;flex-wrap:wrap;gap:20px}
.ftr__traceurs{background:none;border:0;color:inherit;font:inherit;font-size:.82rem;cursor:pointer;text-decoration:underline}

/* ---------- parcours instantane de l'accueil ---------- */
.instant{border:2px solid var(--black);background:var(--white)}
.instant__top{display:flex;align-items:center;gap:14px;background:var(--yellow);border-bottom:2px solid var(--black);padding:16px 22px}
.instant__top svg{width:22px;height:22px}
.instant__top strong{display:block;font-family:var(--display);font-size:1rem;text-transform:uppercase;letter-spacing:-.01em}
.instant__top span{font-size:.8rem;color:#6B5A00}
.instant__steps{list-style:none;margin:0;padding:0}
.instant__steps li{display:flex;gap:16px;padding:18px 22px;border-bottom:2px solid var(--line);align-items:baseline}
.instant__steps li:last-child{border-bottom:0}
.instant__num{font-family:var(--display);font-size:1.5rem;color:var(--muted);flex:none;width:34px;margin:0}
.instant__foot{background:var(--black);color:#C9C9CF;padding:14px 22px;font-size:.85rem}
.instant__foot b{color:var(--yellow)}
.hero .instant{box-shadow:8px 8px 0 var(--yellow)}

/* ---------- illustrations SVG en ligne ---------- */

/* ---------- adaptation aux petits ecrans ---------- */
@media(max-width:1080px){
  .cat{grid-template-columns:repeat(2,1fr)}
  .grid--fiche{grid-template-columns:1fr;gap:34px}
  .fiche__side{position:static}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:38px;align-items:start}
  .grid--split,.recevoir{grid-template-columns:1fr;gap:32px}
  .grid--3,.steps{grid-template-columns:1fr}
  .mod__c ul{columns:1}
  .topbar{display:none}
  .nav{position:absolute;left:0;right:0;top:74px;background:var(--paper);border-bottom:2px solid var(--black);display:none;padding:8px 0}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav li{border-bottom:2px solid var(--line)}
  .nav li:last-child{border-bottom:0}
  .nav a{display:block;padding:15px 28px}
  .nav a::after{display:none}
  .burger:checked ~ .nav{display:block}
  .burger__btn{display:block;order:3}
  .hdr__cta{order:2}
  .hdr__cta .btn--ghost{display:none}
}
@media(max-width:640px){
  body{font-size:16px}
  .cat{grid-template-columns:1fr}
  .mod{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .mod__n{font-size:2.4rem}
  .stats,.ftr__grid{grid-template-columns:1fr}
  .qchips label,.filters label{flex:1 1 calc(50% - 8px);justify-content:center;text-align:center}
  .frow{grid-template-columns:1fr}
  .recevoir__ligne{flex-direction:column}
  .recevoir__ligne .btn{width:100%}
  .fiche__actions .btn{width:100%}
  .btn{padding:14px 22px}
  .card__foot{flex-direction:column;align-items:stretch}
  .card__liens{width:100%}
  .espace__f{flex-direction:column;align-items:flex-start;gap:10px}
  .lec__s h2{flex-direction:column;gap:4px}
  .ftr__bot{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}


/* ---------- corrections de contraste ----------
   Le hero impose une couleur de texte claire a toute sa descendance. Les
   blocs poses dessus qui ont leur propre fond clair doivent la reprendre a
   zero, sinon on obtient du gris clair sur blanc, ou du gris sur jaune. */
.hero .instant{color:var(--black)}
.hero .instant .instant__top strong,.hero .instant .instant__steps b{color:var(--black)}
.hero .instant .instant__steps p{color:var(--ink-2)}
.hero .instant .instant__top span{color:#6B5A00}
.hero .instant .instant__foot{color:#C9C9CF}
.hero .instant .t{color:var(--muted)}

/* Un bouton fantome sur fond noir doit s'habiller en clair. */
.hero .btn--ghost,.section--ink .btn--ghost{color:#fff;border-color:#fff;background:transparent}
.hero .btn--ghost:hover,.section--ink .btn--ghost:hover{background:#fff;color:var(--black)}

/* Tout bloc a fond clair pose dans une section sombre reprend l'encre noire :
   sans ca il herite du gris clair de la section et devient illisible. */
.section--ink .stat,.section--ink .feat,.section--ink .card,.section--ink .plan,
.section--ink .step,.section--ink .liee,.section--ink .side__box,.section--ink .form,
.section--ink .encart,.section--ink .qcm__q,.section--ink .demo__offre,.section--ink .espace__f,
.hero .stat,.hero .feat,.hero .card{color:var(--black)}
.section--ink .stat span,.section--ink .feat p,.section--ink .card__desc{color:var(--ink-2)}
.section--ink .stat b,.section--ink .stat strong{color:var(--black)}

/* Bouton fantome sur le pied de page noir. */
.ftr .btn--ghost{color:#fff;border-color:#fff;background:transparent}
.ftr .btn--ghost:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow)}

/* Le chapeau a une encre grise foncee, illisible sur une section sombre. */
.section--ink .lead,.hero .lead{color:#A9A9B1}
/* Le bouton clair est fait pour un fond sombre ; le bloc d'appel est jaune. */
.cta .btn--outline-light{color:var(--black);border-color:var(--black)}
.cta .btn--outline-light:hover{background:var(--black);color:#fff}

/* ---------- corrections de mise en page ----------
   Les bandeaux melangent une icone, du texte libre et un lien. En flex,
   chaque bout de texte devient un element separe et se met en colonne.
   Ils redeviennent donc des paragraphes, avec l'icone en ligne. */
.bandeau-essai,.fiche__essai{display:block}
.bandeau-essai svg,.fiche__essai svg{display:inline-block;vertical-align:-3px;margin-right:8px;margin-top:0}

@media(max-width:1080px){
  /* l'en-tete doit tenir : logo compact, une seule action, et le menu */
  .hdr__in{gap:12px}
  .logo{font-size:.95rem;gap:9px}
  .logo__mark{width:32px;height:32px}
  .logo small{display:none}
  .hdr__cta .btn{padding:10px 14px;font-size:.7rem}
}
@media(max-width:420px){
  .hdr__cta .btn--amber{box-shadow:3px 3px 0 var(--black)}
  .logo{font-size:.85rem}
}

/* ---------- tableau comparatif ----------
   Il n'avait aucune classe et se retrouvait sans style : colonnes serrees,
   texte de couleur sur fond noir, et rien de centre. On le pose en blanc
   sur la section sombre, avec notre colonne en jaune. */
.cmp{overflow-x:auto;border:2px solid var(--black);background:var(--white);box-shadow:8px 8px 0 var(--yellow)}
.cmp table{width:100%;border-collapse:collapse;min-width:620px;color:var(--black)}
.cmp caption{text-align:left}
.cmp th,.cmp td{padding:16px 20px;text-align:left;vertical-align:middle;border-bottom:2px solid var(--line)}
.cmp thead th{
  background:var(--black);color:#fff;font-family:var(--sans);font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;border-bottom:0;white-space:nowrap;
}
.cmp thead th:nth-child(2){background:var(--yellow);color:var(--black)}
.cmp tbody th{width:30%;font-weight:800;font-size:.92rem;background:var(--paper-2)}
.cmp tbody td:nth-child(2){background:#FFF8D6;font-weight:700}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp .ok,.cmp .no{display:inline-flex;align-items:flex-start;gap:9px;font-size:.94rem;line-height:1.45}
.cmp .ok{color:var(--black);font-weight:700}
.cmp .no{color:var(--ink-2);font-weight:500}
.cmp .ok svg{color:var(--green);flex:none;margin-top:2px}
.cmp .no svg{color:var(--red-txt);flex:none;margin-top:2px}
.cmp svg{width:17px;height:17px}
.section--ink .cmp{color:var(--black)}
@media(max-width:640px){
  .cmp th,.cmp td{padding:13px 14px}
  .cmp tbody th{width:34%;font-size:.85rem}
  .cmp .ok,.cmp .no{font-size:.87rem}
}

/* ---------- carte du catalogue, deuxieme passe ----------
   Le prix est l'argument principal : il monte en tete de carte, en face de
   la pastille, et il respire. Le pied ne porte plus que les deux actions. */
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 24px 4px}
.card__top .price{text-align:right;flex:none}
.card__top .price small{text-align:right}
.card__body{padding:16px 24px 22px}
.card__body h3{margin-bottom:.5em;font-size:1.18rem;line-height:1.2}
.card__desc{margin-bottom:18px}
.card__meta{padding-top:16px}
.card__foot{display:block;padding:20px 24px}
.card__liens{display:grid;gap:10px}
.card__liens .btn{width:100%}
.card__prog{padding-bottom:2px}
.price{font-size:2.4rem}
.price small{margin-top:5px;font-size:.64rem}

/* ---------- mise en avant du prix ----------
   L'argument le plus fort du site est le prix, et il etait enterre en bas
   de page. Il monte dans le hero et en tete du catalogue, date et verifiable. */
.prixmis{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px;padding:20px 24px;border:2px solid var(--yellow);background:rgba(255,212,0,.08)}
.prixmis__p{flex:none}
.prixmis__p b{display:block;font-family:var(--display);font-size:2.9rem;line-height:.9;letter-spacing:-.05em;color:var(--yellow)}
.prixmis__p span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#A9A9B1;margin-top:6px}
.prixmis__t{min-width:min(100%,260px);flex:1}
.prixmis__t strong{display:block;font-size:1rem;color:#fff;margin-bottom:4px}
.prixmis__t span{font-size:.86rem;color:#A9A9B1;line-height:1.55}
.prixmis__t a{color:var(--yellow);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* variante posee sur fond papier */
.prixmis--clair{background:var(--yellow);border-color:var(--black);box-shadow:4px 4px 0 var(--black);margin-top:0;margin-bottom:30px}
.prixmis--clair .prixmis__p b{color:var(--black)}
.prixmis--clair .prixmis__p span,.prixmis--clair .prixmis__t span{color:#6B5A00}
.prixmis--clair .prixmis__t strong{color:var(--black)}
.prixmis--clair .prixmis__t a{color:var(--black)}
@media(max-width:560px){
  .prixmis{gap:14px;padding:18px}
  .prixmis__p b{font-size:2.4rem}
}

/* Les mentions grises restent lisibles sur une section sombre. */
.section--ink .disclaimer,.section--ink .stats__note,.hero .disclaimer{color:#9A9AA2}

/* ============================================================
   Correctifs de mise en page releves sur telephone le 03/09.
   ============================================================ */

/* 1. La regle globale svg{width:1em} est faite pour les icones. Elle
   ecrasait les illustrations, qui se retrouvaient en carres vides. */
.illu,.illus svg,.illu--doc{width:100%;height:auto;display:block}
.illus{display:grid;gap:16px;border:0;background:none;padding:0}
.illus__bloc{border:2px solid var(--black);background:var(--white);padding:22px}
.illus__bloc--doc{background:var(--paper-2)}
.illus__legende{
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink-2);line-height:1.6;margin-top:14px;
}

/* 2. Chaque carte est un objet distinct. Les bordures partagees d'une grille
   collee donnaient un bloc unique ou l'on ne voyait plus ou commencait une
   fiche, et le pied semblait etre un second encadrement. */
.cat{grid-template-columns:repeat(3,1fr);gap:26px;border:0}
.card{border:2px solid var(--black);box-shadow:5px 5px 0 var(--black)}
.card:hover{box-shadow:5px 5px 0 var(--yellow-dark)}
.card__foot{border-top:2px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.card__foot .price{font-size:2rem}
.card__foot .btn{flex:none}
.card__liens{display:grid;gap:9px;flex:1;min-width:150px}

/* 3. Le tableau des tarifs agence debordait, et le prix collait a son unite. */
.tarif-tab{overflow-x:auto;border:2px solid var(--black);background:var(--white);box-shadow:6px 6px 0 var(--yellow)}
.tarif-tab table{width:100%;border-collapse:collapse;min-width:600px}
.tarif-tab th,.tarif-tab td{padding:15px 18px;text-align:left;border-bottom:2px solid var(--line);vertical-align:top}
.tarif-tab thead th{background:var(--black);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-bottom:0;white-space:nowrap}
.tarif-tab tbody th{font-weight:800;white-space:nowrap;background:var(--paper-2)}
.tarif-tab td b{display:block;font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em;line-height:1}
.tarif-tab td span{display:block;font-size:.8rem;color:var(--ink-2);margin-top:4px}
.tarif-tab tbody tr:last-child th,.tarif-tab tbody tr:last-child td{border-bottom:0}
.tarif-tab__cta{white-space:nowrap}

/* 4. Le comparateur de prix est une liste, pas un tableau : il n'avait donc
   aucun style et retombait en puces. */
.compa{border:2px solid var(--black);background:var(--white);box-shadow:8px 8px 0 var(--yellow)}
.compa__liste{list-style:none;margin:0;padding:0}
.compa__liste li{
  display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(90px,2fr) auto;
  align-items:center;gap:8px 18px;padding:15px 20px;border-bottom:2px solid var(--line);
}
.compa__liste li:last-child{border-bottom:0}
.compa__nous{background:var(--yellow)}
.compa__nom{font-weight:700;font-size:.95rem}
.compa__nous .compa__nom{font-weight:800}
.compa__barre{display:block;height:12px;background:var(--paper-2);border:2px solid var(--black)}
.compa__barre i{display:block;height:100%;background:var(--black)}
.compa__nous .compa__barre{background:rgba(12,12,13,.12);border-color:var(--black)}
.compa__prix{font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em;text-align:right;white-space:nowrap}
.compa__heure{grid-column:3;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:right;white-space:nowrap}
.compa__nous .compa__heure{color:#6B5A00}

@media(max-width:900px){.cat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .cat{grid-template-columns:1fr;gap:24px}
  .card{box-shadow:4px 4px 0 var(--black)}
  .compa__liste li{grid-template-columns:1fr auto;gap:6px 14px;padding:14px 16px}
  .compa__nom{grid-column:1}
  .compa__prix{grid-column:2;grid-row:1}
  .compa__barre{grid-column:1/-1;grid-row:2}
  .compa__heure{grid-column:1/-1;grid-row:3;text-align:left}
  .illus__bloc{padding:16px}
}

/* Le haut de carte peut porter deux pastilles et le prix : il passe en
   colonnes, pastilles a gauche, prix a droite, sans jamais se chevaucher. */
.card__top{flex-wrap:wrap;row-gap:10px}
.card__top .pill{flex:none}
.card__top .price{margin-left:auto}

/* ============================================================
   Deuxieme passe de correctifs, apres audit des 28 pages.
   ============================================================ */

/* 1. REGRESSION LA PLUS GRAVE. La reecriture de la feuille a perdu les
   regles de filtrage du catalogue : les dix boutons se cochaient sans rien
   filtrer, sans etat visible, et le message des combinaisons vides ne
   pouvait plus apparaitre. Le tilde de [data-cat~="t"] est indispensable,
   une fiche porte data-cat="t g" et doit sortir sur les deux filtres. */
#f-all:checked ~ .choix label[for="f-all"],
#f-t:checked ~ .choix label[for="f-t"],
#f-g:checked ~ .choix label[for="f-g"],
#f-s:checked ~ .choix label[for="f-s"],
#f-m:checked ~ .choix label[for="f-m"],
#f-o:checked ~ .choix label[for="f-o"],
#b-all:checked ~ .choix label[for="b-all"],
#b-14:checked ~ .choix label[for="b-14"],
#b-42:checked ~ .choix label[for="b-42"],
#b-court:checked ~ .choix label[for="b-court"]{background:var(--black);border-color:var(--black);color:#fff}
#f-all:checked ~ .choix label[for="f-all"] .n,
#f-t:checked ~ .choix label[for="f-t"] .n,
#f-g:checked ~ .choix label[for="f-g"] .n,
#f-s:checked ~ .choix label[for="f-s"] .n,
#f-m:checked ~ .choix label[for="f-m"] .n,
#f-o:checked ~ .choix label[for="f-o"] .n{color:var(--yellow)}

#f-t:checked ~ .cat > .card:not([data-cat~="t"]),
#f-g:checked ~ .cat > .card:not([data-cat~="g"]),
#f-s:checked ~ .cat > .card:not([data-cat~="s"]),
#f-m:checked ~ .cat > .card:not([data-cat~="m"]),
#f-o:checked ~ .cat > .card:not([data-cat~="o"]),
#b-14:checked ~ .cat > .card:not([data-h="14"]),
#b-42:checked ~ .cat > .card:not([data-h="42"]),
#b-court:checked ~ .cat > .card:not([data-h="court"]){display:none}

#f-m:checked ~ #b-42:checked ~ .choix__vide,
#f-o:checked ~ #b-14:checked ~ .choix__vide,
#f-o:checked ~ #b-42:checked ~ .choix__vide{display:block}

/* 2. Les listes des cartes de tarifs retombaient en puces, a cote des
   coches deja dessinees, et la seule ligne NON incluse etait la plus grasse
   de la liste : le lecteur comprenait l'inverse de ce qui est vendu. */
.plan ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px;flex:1;align-content:start}
.plan li{display:grid;grid-template-columns:19px 1fr;gap:11px;font-size:.92rem;line-height:1.5;margin:0}
.plan li svg{width:17px;height:17px;color:var(--green);margin-top:3px}
.plan--hi li svg{color:var(--black)}
.plan li.off{color:var(--muted);font-weight:400;text-decoration:line-through;text-decoration-color:var(--line)}
.plan li.off svg{color:var(--muted);opacity:.4}
.plan__price sup{font-size:.4em;font-weight:700;vertical-align:baseline;position:relative;top:-.85em;margin-left:.06em;letter-spacing:0}

/* 3. Les pastilles du bandeau de confiance soudaient leurs deux lignes :
   on lisait « CONFORME LOI ALURDECRET N 2016-173 ». */
.badge-cert{align-items:flex-start;gap:10px;padding:10px 15px;text-transform:none;letter-spacing:0}
.badge-cert svg{width:16px;height:16px;flex:none;margin-top:2px}
.badge-cert>div{display:grid;gap:2px}
.badge-cert b{display:block;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.badge-cert span{display:block;font-size:.7rem;font-weight:600;color:rgba(255,212,0,.78);line-height:1.35}

/* 4. Les numeros d'article des CGV etaient colles au titre :
   on lisait « 01OBJET ET CHAMP D'APPLICATION ». */
.doc h2{display:grid;grid-template-columns:2.8rem 1fr;align-items:baseline;column-gap:4px}
.doc h2 .n{font-family:var(--sans);font-size:.78rem;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.doc h2.sans-n{display:block}

/* 5. Dans le corps de texte, un lien etait indiscernable du texte. */
.doc a,.disclaimer a,.faq .a a,.check a,.side__note a,.lec__s a,.encart a{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-color:var(--yellow-dark);font-weight:700;
}
.section--ink .disclaimer a,.info-card a{text-decoration-color:var(--yellow)}

/* 6. Grilles qui n'avaient aucune colonne, ou dont les bordures voisines
   se doublaient faute d'ecart. */
.steps{grid-template-columns:repeat(4,1fr);gap:18px;border:0}
.step{border:2px solid var(--black);box-shadow:5px 5px 0 var(--black)}
.grid--3{gap:24px}
.feat,.plan{box-shadow:5px 5px 0 var(--black)}
.illus{grid-template-columns:1.1fr .9fr;align-items:start}
.illu,.illu--doc{border:0;background:none;padding:0}

/* 7. La barre d'achat collee en bas masquait la fin du pied de page. */
body:has(.barre:not([hidden])){padding-bottom:96px}

/* 8. Rien ne doit forcer une piste de grille a depasser son conteneur. */
.grid--split>*,.grid--fiche>*,.recevoir>*,.hero__in>*,.hdr__in{min-width:0}

@media(max-width:1080px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.illus{grid-template-columns:1fr}}
@media(max-width:640px){.steps,.grid--3{grid-template-columns:1fr;gap:22px}}

/* 9. Les illustrations en ligne : chaque classe est un TEXTE, pas une forme.
   Mes regles precedentes leur appliquaient un contour, et la perte des
   tailles renvoyait tout a 17 px, donc chevauchement et debordement du
   viewBox. Tailles reprises de l'ancienne feuille, palette actuelle. */
.illu .i-lbl{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;fill:var(--muted)}
.illu .i-lbl2{font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.14em;fill:var(--muted)}
.illu .i-num{font-family:var(--display);font-size:21px;font-weight:800;fill:var(--black)}
.illu .i-num2{font-family:var(--display);font-size:17px;font-weight:800;fill:var(--yellow-dark)}
.illu .i-num3{font-family:var(--display);font-size:19px;font-weight:800;fill:var(--black)}
.illu .i-tot{font-family:var(--display);font-size:15px;font-weight:800;fill:#fff;letter-spacing:.02em}
.illu .i-sub{font-family:var(--sans);font-size:11px;fill:var(--ink-2)}
.illu .i-note{font-family:var(--sans);font-size:10.5px;fill:var(--muted)}
.illu .i-mk{font-family:var(--display);font-size:13px;font-weight:800;fill:var(--black)}
.illu .i-mini{font-family:var(--sans);font-size:6.6px;font-weight:700;letter-spacing:.12em;fill:var(--muted)}
.illu .i-mini2{font-family:var(--sans);font-size:9.5px;fill:var(--ink-2)}
.illu .i-titre{font-family:var(--display);font-size:19px;font-weight:800;fill:var(--black)}
.illu .i-val{font-family:var(--sans);font-size:11.5px;fill:var(--black)}
.illu .i-specimen{font-family:var(--display);font-size:40px;font-weight:800;fill:var(--black);opacity:.1;letter-spacing:.1em}
.illu .i-champ{font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.1em;fill:var(--muted)}
.illu text{stroke:none}