:root{
  --craie:#EDEEE8; --papier:#FBFBF8; --ardoise:#1A211D;
  --gazon:#2B5D3F; --gazon-clair:#4A8760; --casaque:#B3122B;
  --dossard:#E9B949; --brume:#7C857F; --trait:#D3D6CD;
  --display:'Haettenschweiler','Arial Narrow','Oswald',Impact,sans-serif;
  --texte:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --data:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--craie);color:var(--ardoise);
  font-family:var(--texte);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gazon)}
:focus-visible{outline:3px solid var(--dossard);outline-offset:3px}
.env{max-width:1060px;margin:0 auto;padding:0 22px}

/* Bandeau */
.top{background:var(--ardoise);border-bottom:4px solid var(--dossard)}
.top .env{display:flex;align-items:center;gap:24px;padding:14px 22px}
.marque{font-family:var(--display);font-size:30px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--craie);text-decoration:none}
.marque span{color:var(--dossard)}
.top nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.top nav a{color:var(--craie);font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;text-decoration:none;opacity:.82}
.top nav a:hover{opacity:1;color:var(--dossard)}

/* Hero : la thèse, pas une promesse de gain */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--trait)}
.eyebrow{font-family:var(--data);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gazon);margin:0 0 18px}
.hero h1{font-family:var(--display);font-size:clamp(46px,8vw,92px);line-height:.94;
  letter-spacing:.01em;text-transform:uppercase;margin:0 0 22px;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--casaque)}
.hero p{font-size:19px;max-width:56ch;margin:0 0 30px;color:#39423B}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{font-family:var(--display);font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;padding:13px 26px;border-radius:2px;
  background:var(--ardoise);color:var(--craie);display:inline-block}
.btn:hover{background:var(--gazon)}
.btn.creux{background:transparent;color:var(--ardoise);
  box-shadow:inset 0 0 0 2px var(--ardoise)}
.btn.creux:hover{background:var(--ardoise);color:var(--craie)}

/* Le tableau de départ : élément signature */
.grille-dossards{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));
  gap:9px;margin:44px 0 10px;max-width:760px}
.d{aspect-ratio:1;display:grid;place-items:center;border-radius:2px;
  font-family:var(--display);font-size:26px;background:var(--trait);color:var(--papier)}
.d.retenu{background:var(--gazon);color:var(--craie)}
.legende-dossards{font-family:var(--data);font-size:12px;color:var(--brume);
  max-width:70ch;margin:0}
.legende-dossards b{color:var(--gazon)}

h2.sec{font-family:var(--display);font-size:clamp(30px,4.4vw,44px);
  text-transform:uppercase;letter-spacing:.03em;margin:64px 0 8px}
.chapo{color:var(--brume);margin:0 0 28px;max-width:62ch}

/* Étapes : une vraie séquence, donc numérotées */
.etapes{display:grid;gap:0;border-top:2px solid var(--ardoise)}
.etape{display:grid;grid-template-columns:64px 1fr;gap:22px;
  padding:24px 0;border-bottom:1px solid var(--trait)}
.etape .n{font-family:var(--display);font-size:40px;color:var(--dossard);line-height:.9}
.etape h3{font-size:18px;margin:0 0 6px}
.etape p{margin:0;color:#39423B;max-width:64ch}

.cartes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.carte{background:var(--papier);border:1px solid var(--trait);
  border-radius:2px;padding:22px}
.carte h3{font-family:var(--display);font-size:21px;text-transform:uppercase;
  letter-spacing:.03em;margin:0 0 8px}
.carte p{margin:0;color:#39423B;font-size:15px}
.carte .k{font-family:var(--data);font-size:30px;display:block;margin-bottom:4px}

/* Ce que Turfavo ne fait pas */
.negatifs{border-left:4px solid var(--casaque);background:var(--papier);
  padding:22px 26px;border-radius:2px}
.negatifs ul{margin:10px 0 0;padding-left:20px}
.negatifs li{margin-bottom:8px}

/* Offres */
.offres{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.offre{background:var(--papier);border:1px solid var(--trait);border-radius:2px;
  padding:24px;display:flex;flex-direction:column}
.offre.mise-en-avant{box-shadow:inset 0 0 0 2px var(--gazon)}
.offre h3{font-family:var(--display);font-size:24px;text-transform:uppercase;
  letter-spacing:.04em;margin:0 0 2px}
.prix{font-family:var(--data);font-size:26px;margin:0 0 14px}
.prix small{font-size:13px;color:var(--brume)}
.offre ul{list-style:none;padding:0;margin:0 0 20px;font-size:15px}
.offre li{padding:7px 0;border-bottom:1px solid var(--trait)}
.offre .btn{margin-top:auto;text-align:center}

table{width:100%;border-collapse:collapse;font-size:15px;background:var(--papier)}
th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brume);padding:10px 12px;border-bottom:2px solid var(--ardoise)}
td{padding:11px 12px;border-bottom:1px solid var(--trait);
  font-variant-numeric:tabular-nums}
td.num{text-align:right;font-family:var(--data)}

.pied{border-top:1px solid var(--trait);margin-top:64px;padding:28px 0 52px;
  font-size:13px;color:var(--brume)}
.pied strong{color:var(--casaque)}
.pied .liens{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px}

@media (max-width:640px){
  .hero{padding:48px 0 36px}
  .etape{grid-template-columns:44px 1fr;gap:14px}
  .top .env{flex-wrap:wrap;gap:12px}
  .top nav{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}