/* Zinies — feuille de style commune du site */
:root{
  --fond:#15141b; --fond2:#1d1c27; --carte:#232232; --ligne:#3a3950;
  --txt:#ecebf5; --doux:#a9a7c0; --or:#e8b84a; --or-fonce:#8a6520;
  --bleu:#3f7fe0; --rouge:#d8402f; --violet:#8a4fc4; --jaune:#d9a510; --vert:#5fc46b;
  --pixel:"Fredoka", "Nunito", system-ui, sans-serif;
  --logo:"Pixelify Sans", ui-monospace, monospace;
  --texte:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fond);color:var(--txt);font-family:var(--texte);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--or)}
img,canvas{max-width:100%}
.enveloppe{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* en-tete */
.entete{position:sticky;top:0;z-index:10;background:rgba(21,20,27,.92);backdrop-filter:blur(6px);border-bottom:2px solid var(--ligne)}
.entete .enveloppe{display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:10px;color:var(--txt);text-decoration:none;font-family:var(--logo);font-size:24px;font-weight:700;letter-spacing:.1em}
.marque canvas{width:30px;height:30px;image-rendering:pixelated}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav a{color:var(--doux);text-decoration:none;padding:6px 12px;border-radius:4px;font-size:16px}
.nav a:hover{color:var(--txt)}
.nav a.ici{color:var(--txt);background:var(--carte)}
.nav a.cta{background:var(--or);color:#1a1300;font-weight:700}

/* boutons */
.bouton{display:inline-block;font-family:var(--pixel);font-weight:700;font-size:20px;padding:14px 26px;background:var(--or);color:#1a1300;text-decoration:none;border-radius:6px;box-shadow:0 5px 0 var(--or-fonce);transition:transform .08s,box-shadow .08s}
.bouton:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--or-fonce)}
.bouton.second{background:var(--carte);color:var(--txt);box-shadow:0 5px 0 #0c0b11;border:2px solid var(--ligne)}

/* sections */
section{padding-block:64px}
h1,h2,h3{font-family:var(--pixel);font-weight:700;line-height:1.1;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(28px,4.4vw,40px);margin-bottom:12px}
h3{font-size:21px;margin-bottom:6px}
.chapeau{color:var(--doux);max-width:62ch;margin-bottom:28px}
.etiquette{display:inline-block;font-family:var(--pixel);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
.grille{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.carte{background:var(--fond2);border:2px solid var(--ligne);border-radius:8px;padding:18px;min-width:0}
.carte p{color:var(--doux);font-size:16px}
.icone{width:48px;height:48px;image-rendering:pixelated;margin-bottom:10px;display:block}

/* pied */
.pied{border-top:2px solid var(--ligne);padding-block:28px;color:var(--doux);font-size:14px}
.pied .enveloppe{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pied a{color:var(--doux)}

@media (max-width:860px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
@media (max-width:520px){.g4{grid-template-columns:1fr}.nav a{padding:6px 8px;font-size:15px}section{padding-block:44px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bouton{transition:none}}

/* selecteur de langue */
.langue{display:flex;align-items:center;gap:2px;font-size:14px;border:2px solid var(--ligne);border-radius:4px;overflow:hidden}
.langue a{color:var(--doux);text-decoration:none;padding:4px 8px}
.langue a.on{background:var(--carte);color:var(--txt)}

/* pages de texte (regles, feuille de route) */
.page{padding-block:48px 64px}
.page h1{font-size:clamp(36px,5.5vw,56px);margin-bottom:10px}
.page h2{font-size:clamp(24px,3.4vw,30px);margin:40px 0 10px}
.page p,.page li{color:var(--doux);max-width:68ch}
.page ul{padding-left:20px;display:grid;gap:6px}
.page strong{color:var(--txt);font-weight:600}
.tableau{overflow-x:auto;margin-top:12px}
.tableau table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px;font-variant-numeric:tabular-nums}
.tableau th{text-align:left;color:var(--doux);font-weight:400;border-bottom:2px solid var(--ligne);padding:8px 10px}
.tableau td{border-bottom:1px solid #2c2b3c;padding:9px 10px;vertical-align:top}
.tableau td:first-child{color:var(--txt);white-space:nowrap}
kbd{font-family:var(--pixel);background:var(--carte);border:1.5px solid var(--ligne);border-bottom-width:3px;border-radius:4px;padding:1px 7px;font-size:14px;color:var(--txt)}

/* feuille de route */
.phases{list-style:none;padding:0;margin-top:28px;border-left:3px solid var(--ligne);margin-left:12px;display:grid;gap:26px}
.phase{position:relative;padding-left:28px}
.phase::before{content:"";position:absolute;left:-13px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--fond);border:3px solid var(--ligne)}
.phase.fait::before{background:var(--vert);border-color:var(--vert)}
.phase.encours::before{background:var(--or);border-color:var(--or);box-shadow:0 0 0 6px rgba(232,184,74,.2)}
.phase .tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.phase .tete h2{margin:0;font-size:24px}
.statut{font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid currentColor;padding:1px 8px;border-radius:3px}
.fait .statut{color:var(--vert)}.encours .statut{color:var(--or)}.afaire .statut{color:var(--doux)}
.phase ul{list-style:none;padding:0;display:grid;gap:6px;margin-top:8px}
.phase li{position:relative;padding-left:22px}
.phase li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border:2px solid var(--ligne);border-radius:2px}
.phase li.ok::before{background:var(--vert);border-color:var(--vert)}
.phase li.cours::before{background:var(--or);border-color:var(--or)}