:root{
  --nuit:#1C222A;--nuit2:#242B35;--nuit3:#2C3540;--ligne:#3B4654;--ligne2:#2B3440;
  --blanc:#FFFFFF;--doux:#BDC7D1;--gris:#8B97A3;--laiton:#C8A15A;--laiton-clair:#D9B472;
  --gain:#5AA583;--gain-fond:#1B3029;--perte:#D07A66;--perte-fond:#321E1B;
  --display:"Archivo",Helvetica,sans-serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --chiffre:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(20px,4vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--nuit);color:var(--blanc);font-family:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--laiton)}
a:hover{color:var(--laiton-clair)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.lecture{max-width:740px}

/* en-tête */
header{position:sticky;top:0;z-index:50;background:rgba(28,34,42,.96);border-bottom:1px solid var(--ligne2);backdrop-filter:blur(8px)}
.hbar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.mark{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.mono-jh{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:1px;width:40px;height:40px;border:1px solid var(--laiton);overflow:hidden;flex:none}
.mono-jh i{font-family:var(--display);font-weight:800;font-style:normal;font-size:1rem;letter-spacing:-.04em;color:var(--blanc)}
.mono-jh b{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--laiton)}
.mot{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blanc)}
.hnav{display:flex;align-items:center;gap:26px}
.hnav a{color:var(--doux);text-decoration:none;font-size:.95rem}
.hnav a:hover{color:var(--blanc)}
.btn{display:inline-block;background:var(--laiton);color:var(--nuit)!important;font-family:var(--display);font-weight:700;text-decoration:none;padding:.85em 1.4em;border:0;transition:background .2s}
.btn:hover{background:var(--laiton-clair)}
.btn.sm{padding:.6em 1.05em;font-size:.92rem}
@media(max-width:720px){.hnav a:not(.btn){display:none}.mot{display:none}}

/* article */
main{padding:clamp(40px,6vw,84px) 0 clamp(56px,8vw,110px)}
.fil{font-size:.88rem;color:var(--gris);margin-bottom:26px}
.fil a{color:var(--gris);text-decoration:none}
.fil a:hover{color:var(--blanc)}
.sur{font-family:var(--chiffre);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton);margin-bottom:16px;display:block}
h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:clamp(2rem,4.4vw,3.3rem);text-wrap:balance;margin-bottom:22px}
.chapo{font-size:1.18rem;line-height:1.6;color:var(--doux);margin-bottom:28px}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:var(--gris);padding-bottom:30px;border-bottom:1px solid var(--ligne2);margin-bottom:36px}
article h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.15;margin:52px 0 16px;text-wrap:balance}
article h3{font-family:var(--display);font-weight:700;font-size:1.15rem;margin:30px 0 10px}
article p,article li{color:var(--doux)}
article p{margin-bottom:16px}
article strong{color:var(--blanc);font-weight:600}
article ul,article ol{margin:0 0 18px 22px}
article li{margin-bottom:8px}
.essentiel{background:var(--nuit2);border:1px solid var(--ligne);border-left:3px solid var(--laiton);padding:26px 28px;margin:0 0 38px}
.essentiel h2{margin:0 0 12px;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.essentiel ul{margin-bottom:0}
.essentiel li:last-child{margin-bottom:0}
.alerte{background:var(--perte-fond);border:1px solid rgba(208,122,102,.35);padding:20px 24px;margin:26px 0;color:var(--blanc)}
.alerte p{color:#F0D2CA;margin:0}
.alerte p+p{margin-top:10px}
.tableau{overflow-x:auto;margin:22px 0 26px;border:1px solid var(--ligne)}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--ligne2);vertical-align:top}
th{font-family:var(--display);font-weight:700;color:var(--blanc);background:var(--nuit2);font-size:.9rem}
td{color:var(--doux)}
tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--chiffre);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.total td{color:var(--blanc);font-weight:600}
td.gain{color:var(--gain)}
.note{font-size:.9rem;color:var(--gris)}

/* appel à l'action */
.cta{margin:56px 0 0;padding:clamp(28px,4vw,44px);background:var(--nuit2);border:1px solid var(--laiton)}
.cta h2{margin:0 0 12px;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.cta p{color:var(--doux);margin-bottom:24px;max-width:56ch}
.sources{margin-top:48px;padding-top:24px;border-top:1px solid var(--ligne2)}
.sources h2{font-size:1rem;margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em}
.sources p,.sources li{font-size:.9rem;color:var(--gris)}
.autres{margin-top:48px}
.autres h2{font-size:1.1rem;margin:0 0 14px}

/* liste des guides */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:40px}
.carte{display:flex;flex-direction:column;gap:10px;padding:28px;background:var(--nuit2);border:1px solid var(--ligne);text-decoration:none;color:var(--blanc);transition:border-color .2s,transform .2s}
.carte:hover{border-color:var(--laiton);transform:translateY(-2px);color:var(--blanc)}
.carte .sur{margin:0}
.carte h2{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.2;letter-spacing:-.015em}
.carte p{color:var(--doux);font-size:.97rem}
.carte span.lire{margin-top:auto;color:var(--laiton);font-weight:600;font-size:.95rem}

/* pied de page */
footer{border-top:1px solid var(--ligne2);padding:36px 0;font-size:.88rem;color:var(--gris)}
.fbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}
footer a{color:var(--gris);text-decoration:none;margin-left:18px}
footer a:first-child{margin-left:0}
footer a:hover{color:var(--blanc)}