/* Défis — identité Empan « métro » (d'après empan.remyvdm.com/empan-metro.css)
   Archivo auto-hébergée (SIL OFL), aucune ressource tierce. */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/polices/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  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:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/polices/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  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;}

:root{
  /* palette Empan métro */
  --blanc:#FFFFFF; --gris:#F5F5F7; --gris-2:#EBEBEF; --panneau:#181819;
  --plongee:#0A6676; --crayon:#AE3628; --curseurs:#38702E; --voile:#5D43A6;
  /* noms utilisés par les pages (conservés, valeurs Empan) */
  --fond:#FFFFFF; --carte:#F5F5F7; --encre:#1D1D1F; --doux:#6E6E73; --trait:#E3E3E8;
  --mer:#0A6676; --mer-clair:#E2EFF1; --corail:#AE3628; --algue:#38702E; --algue-clair:#E5EFE2;
  --ombre:none; --r:22px;
  --police:'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--blanc);color:var(--encre);font:18px/1.55 var(--police);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--plongee);outline-offset:2px}
.page{max-width:820px;margin:0 auto;padding:30px 20px 90px}

/* bandeau d'en-tête : ligne de métro */
.vague{height:8px;background:linear-gradient(90deg,var(--plongee) 0 25%,var(--crayon) 25% 50%,var(--curseurs) 50% 75%,var(--voile) 75%)}

/* en-tête : titre géant ou panneau noir à double filet */
header.tete{margin:6px 0 30px}
.surtitre{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
h1{font-weight:800;font-stretch:82%;font-size:clamp(40px,8vw,72px);line-height:.98;letter-spacing:-.018em;margin:14px 0 6px;text-wrap:balance}
.tete h1#prenom{display:inline-block;background:var(--panneau);color:#fff;border-radius:18px;padding:14px 34px 18px;
  outline:3px solid #fff;outline-offset:-9px;box-shadow:0 0 0 2px var(--panneau);font-size:clamp(36px,7vw,60px);margin-top:16px}
.tete p{font-size:17px}

/* titres de section : grotesque serrée */
h2{font-weight:800;font-stretch:82%;font-size:clamp(28px,4.4vw,40px);line-height:1;letter-spacing:-.015em;
  text-transform:none;color:var(--encre);margin:46px 0 16px;display:flex;align-items:center;gap:12px}
h2::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--ligne,var(--plongee));box-shadow:0 0 0 4px #fff,0 0 0 6px var(--ligne,var(--plongee))}

/* cartes grises, filet de couleur de ligne */
.carte{background:var(--gris);border-radius:22px;padding:20px 22px;margin:0 0 14px;border:0;box-shadow:none;position:relative}
.carte h3{margin:0 0 8px;font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.005em}
.carte .md p:first-child{margin-top:0}.carte .md p:last-child,.carte .md ol:last-child,.carte .md ul:last-child{margin-bottom:0}
.md{font-size:17px}
.md ol,.md ul{padding-left:24px}.md li{margin:5px 0}.md li::marker{font-weight:700;color:var(--doux)}
.md h4{margin:14px 0 6px;font-size:18px}
.md code{background:#fff;padding:1px 6px;border-radius:6px;font-size:.92em}
.md a{font-weight:600;overflow-wrap:anywhere}
.md blockquote{margin:12px 0;padding:10px 16px;background:#fff;border-radius:12px;box-shadow:inset 4px 0 0 var(--voile)}
.md hr{border:0;border-top:2px solid var(--trait);margin:16px 0}
.md .tableau{overflow-x:auto;margin:12px 0}
.md table{border-collapse:collapse;width:100%;font-size:15px;background:#fff;border-radius:12px;overflow:hidden}
.md th,.md td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--trait);vertical-align:top}
.md th{font-weight:700;background:var(--gris-2)}
.md s{color:var(--doux)}
.etape{border-left:0}
.defi,.commun{border-left:0}
.carte.defi{box-shadow:inset 6px 0 0 var(--crayon)}
.carte.commun{box-shadow:inset 6px 0 0 var(--curseurs)}
#etapes{counter-reset:etape}
.carte.etape{padding-left:74px}
.carte.etape::before{counter-increment:etape;content:counter(etape);position:absolute;left:20px;top:18px;width:38px;height:38px;border-radius:50%;
  background:var(--panneau);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;box-shadow:0 0 0 3px var(--gris),0 0 0 5px var(--plongee)}
.nouveau{animation:eclat 2.4s ease-out}
@keyframes eclat{0%{box-shadow:0 0 0 4px var(--crayon)}100%{box-shadow:none}}
.carte.defi.nouveau{animation:eclatd 2.4s ease-out}
@keyframes eclatd{0%{box-shadow:inset 6px 0 0 var(--crayon),0 0 0 4px var(--crayon)}100%{box-shadow:inset 6px 0 0 var(--crayon)}}
.pastille{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px;background:var(--crayon);color:#fff;vertical-align:middle;margin-left:8px}

/* encadré d'attente : bordure épaisse, façon « Attention » */
.attente{color:var(--encre);background:#fff;border:2.5px solid var(--encre);border-radius:22px;padding:18px 22px;font-weight:600}

/* accueil : prénoms en panneaux */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.grille a{display:block;text-decoration:none;color:#fff;background:var(--panneau);border-radius:16px;padding:16px 18px 18px;
  outline:2.5px solid #fff;outline-offset:-7px;font-weight:800;font-stretch:82%;font-size:24px;line-height:1;transition:transform .12s}
.grille a:hover{transform:translateY(-2px);background:#000}
.pied{margin-top:50px;font-size:14px;color:var(--doux)}
.direct{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)}
.direct::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--curseurs);box-shadow:0 0 0 3px var(--algue-clair)}

/* pilotage */
button,.btn{font:inherit;font-size:15px;font-weight:600;border:0;background:#fff;color:var(--encre);border-radius:12px;padding:9px 15px;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--encre);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
button:hover,.btn:hover{background:var(--gris-2)}
button.plein{background:var(--encre);color:#fff;box-shadow:none}
button.plein:hover{background:#000}
button.corail{background:var(--crayon);color:#fff;box-shadow:none}
button.corail:hover{filter:brightness(.92)}
button.petit{padding:5px 11px;font-size:14px;border-radius:10px}
button:disabled{opacity:.5;cursor:wait}
input,textarea,select{font:inherit;font-size:16px;color:var(--encre);background:#fff;border:1.5px solid var(--trait);border-radius:12px;padding:11px 13px;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--encre)}
textarea{min-height:100px;resize:vertical}
label{font-size:14px;font-weight:700;color:var(--doux);display:block;margin:12px 0 5px}
.ligne{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ligne>*{flex:0 0 auto}
.entre{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.masque>.md,.masque strong{opacity:.5}
.etiquette{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--plongee);color:#fff}
.etiquette.off{background:#fff;color:var(--doux);box-shadow:inset 0 0 0 1.5px var(--trait)}
.micro.ecoute{background:var(--crayon);color:#fff;box-shadow:none}
details>summary{cursor:pointer;font-weight:700;list-style:none}
details>summary::-webkit-details-marker{display:none}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--panneau);color:#fff;padding:11px 18px;border-radius:12px;font-weight:600;z-index:9;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.vu{opacity:1}
.apercu{border:1.5px dashed var(--doux);border-radius:14px;padding:14px 16px;margin-top:10px;background:#fff}
@media (max-width:560px){
  body{font-size:17px}
  .carte{padding:16px 16px;border-radius:18px}
  .carte.etape{padding-left:62px}
  .carte.etape::before{left:14px;top:15px;width:34px;height:34px;font-size:15px}
  .entre{flex-direction:column}
  .tete h1#prenom{padding:12px 24px 15px}
}
@media print{.vague{display:none}.carte{break-inside:avoid}}