@font-face{font-family:"Atkinson";src:url(fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --fond:#FFF8EC; --carte:#FFFFFF; --encre:#24211D; --doux:#6B645A; --trait:#E7DCC8;
  /* code couleur fixe, le même partout (et celui de la frise du cours) */
  --date:#1D5FD1; --voca:#16833F; --lieu:#9A5B13;
  --habilis:#E4C61B; --erectus:#F28B30; --neandertal:#D93B30; --sapiens:#6A2C8E; --austra:#8FB8DE;
  --ok:#15803D; --ok-fond:#E3F6E8; --ko:#C2410C; --ko-fond:#FDECE2;
  --accent:#E8590C; --accent2:#FFD8A8;
  --taille:19px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--encre)}
body{font-family:"Atkinson",Verdana,Arial,sans-serif;font-size:var(--taille);line-height:1.6;letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;min-height:100vh}
em,i{font-style:normal}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{line-height:1.25;margin:.2em 0 .5em}
h1{font-size:1.5em} h2{font-size:1.25em} h3{font-size:1.08em}
.date{color:var(--date);font-weight:700;white-space:nowrap}
.voca{color:var(--voca);font-weight:700}
.lieu{color:var(--lieu);font-weight:700}
.esp{font-weight:700;padding:0 .25em;border-radius:6px;white-space:nowrap}
.esp.habilis{background:#FBF1B0}.esp.erectus{background:#FCDDC2}.esp.neandertal{background:#F8CFCB}.esp.sapiens{background:#E6D3F1}.esp.austra{background:#DCEAF6}

/* barre du haut */
.haut{position:sticky;top:0;z-index:5;background:var(--fond);border-bottom:2px solid var(--trait);
  display:flex;align-items:center;gap:.5rem;padding:.5rem max(16px,env(safe-area-inset-left))}
.haut .titre{font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icone{background:var(--carte);border:2px solid var(--trait);border-radius:14px;min-width:48px;height:48px;padding:0 .6rem;font-size:1.05em}
.icone:active{transform:scale(.96)}
main{max-width:860px;margin:0 auto;padding:16px 16px 120px}

/* accueil */
.bonjour{display:flex;gap:1rem;align-items:center;margin:.5rem 0 1rem}
.bonjour .avatar{font-size:2.6em}
.stats{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.stat{background:var(--carte);border:2px solid var(--trait);border-radius:14px;padding:.4rem .8rem;font-weight:700}
.gros-bouton{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;background:var(--accent);color:#fff;
  border:0;border-radius:18px;padding:1rem 1.1rem;font-weight:700;font-size:1.1em;margin:.4rem 0;box-shadow:0 4px 0 #B8430A}
.gros-bouton.bleu{background:var(--date);box-shadow:0 4px 0 #123F8F}
.gros-bouton.vert{background:var(--voca);box-shadow:0 4px 0 #0E5A2B}
.gros-bouton.violet{background:var(--sapiens);box-shadow:0 4px 0 #461C5E}
.gros-bouton .emo{font-size:1.6em}
.gros-bouton small{display:block;font-weight:400;font-size:.8em;opacity:.95}
.gros-bouton:active{transform:translateY(3px);box-shadow:none}
.gros-bouton:disabled{opacity:.45}
.etapes{display:grid;gap:.7rem;margin:1rem 0}
.etape{display:flex;align-items:center;gap:.8rem;background:var(--carte);border:3px solid var(--trait);border-radius:18px;padding:.8rem 1rem;text-align:left;width:100%}
.etape .num{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff}
.etape .txt{flex:1}
.etape .txt b{display:block}
.etape .txt span{color:var(--doux);font-size:.85em}
.etape .etoiles{font-size:1.1em;white-space:nowrap}
.etape.verrou{opacity:.5}
.etape.actuelle{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent2)}

/* cartes de leçon et exercices */
.carte{background:var(--carte);border:2px solid var(--trait);border-radius:20px;padding:1.1rem 1.1rem 1.2rem;margin:.6rem 0 1rem;box-shadow:0 3px 0 var(--trait)}
.carte p{margin:.4em 0 .7em}
.carte ul{padding-left:1.2em;margin:.3em 0 .8em}
.carte li{margin:.25em 0}
.mnemo{background:#FFF3BF;border-left:8px solid #F59F00;border-radius:12px;padding:.6rem .9rem;margin:.8rem 0}
.mnemo::before{content:"💡 Astuce pour retenir";display:block;font-weight:700;font-size:.85em;color:#8A5A00}
.attention{background:#FFE3E3;border-left:8px solid #E03131;border-radius:12px;padding:.6rem .9rem;margin:.8rem 0}
.attention::before{content:"⚠️ Piège à éviter";display:block;font-weight:700;font-size:.85em;color:#A61E1E}
.def{border:3px solid var(--voca);border-radius:14px;padding:.5rem .9rem;margin:.6rem 0;background:#F0FAF3}
.def b{color:var(--voca)}
.identite{border-radius:16px;padding:.8rem 1rem;margin:.6rem 0;border:3px solid}
.identite h3{margin-top:0}
.identite dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;margin:0}
.identite dt{font-weight:700;color:var(--doux)}
.identite dd{margin:0}
.svgbox{width:100%;overflow:hidden;border-radius:14px;margin:.5rem 0}
.svgbox svg{display:block;width:100%;height:auto}

.progression{height:12px;background:var(--trait);border-radius:8px;overflow:hidden;margin:.2rem 0 .8rem}
.progression div{height:100%;background:var(--ok);transition:width .3s}
.consigne{font-weight:700;font-size:1.08em;margin-bottom:.8rem}
.choix{display:grid;gap:.6rem}
.choix button,.puce{background:var(--carte);border:3px solid var(--trait);border-radius:16px;padding:.8rem 1rem;text-align:left;min-height:56px;width:100%}
.choix button.coche{border-color:var(--date);background:#E7F0FF}
.choix button.bon{border-color:var(--ok);background:var(--ok-fond)}
.choix button.faux{border-color:var(--ko);background:var(--ko-fond)}
.choix button:disabled{color:var(--encre)}
.saisie{width:100%;font:inherit;padding:.8rem 1rem;border:3px solid var(--trait);border-radius:16px;background:#fff;min-height:56px}
textarea.saisie{min-height:9em;resize:vertical}
.saisie:focus{outline:none;border-color:var(--date)}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.btn{border:0;border-radius:16px;padding:.8rem 1.3rem;font-weight:700;min-height:54px;background:var(--date);color:#fff;box-shadow:0 4px 0 #123F8F}
.btn.second{background:var(--carte);color:var(--encre);border:2px solid var(--trait);box-shadow:0 3px 0 var(--trait)}
.btn.ok{background:var(--ok);box-shadow:0 4px 0 #0E5A2B}
.btn.ko{background:var(--ko);box-shadow:0 4px 0 #8A2E08}
.btn:active{transform:translateY(3px);box-shadow:none}
.btn:disabled{opacity:.4}
.retour{border-radius:16px;padding:.8rem 1rem;margin-top:1rem;font-weight:400}
.retour.bon{background:var(--ok-fond);border:3px solid var(--ok)}
.retour.faux{background:var(--ko-fond);border:3px solid var(--ko)}
.retour b.t{display:block;font-size:1.1em}

/* ordre et association */
.zone-ordre{display:grid;gap:.5rem;min-height:3rem;padding:.5rem;border:3px dashed var(--trait);border-radius:16px;margin-bottom:.8rem}
.zone-ordre:empty::before{content:"Touche les étiquettes dans le bon ordre ⬇️";color:var(--doux)}
.puce.placee{border-color:var(--date);background:#E7F0FF}
.puce .rang{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--date);color:#fff;font-weight:700;margin-right:.5rem;font-size:.85em}
.assoc{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.assoc .col{display:grid;gap:.5rem;align-content:start}
.assoc .puce{min-height:52px;padding:.6rem .7rem}
.puce.sel{border-color:var(--date);box-shadow:0 0 0 4px #BCD4FF}
.puce.fait{opacity:.55;border-color:var(--ok);background:var(--ok-fond)}
.puce.secoue{animation:secoue .35s}
@keyframes secoue{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* carte du monde */
.monde{background:#CFE8F7;border-radius:14px}
.monde .terre{fill:#F3E6C8;stroke:#B9A57E;stroke-width:.8}
.monde .cible{fill:transparent;cursor:pointer}
.monde .cible.vue{fill:rgba(29,95,209,.25)}
.monde .cible.bon{fill:rgba(21,128,61,.35)}
.monde .cible.faux{fill:rgba(194,65,12,.35)}

/* carte-éclair (flashcard) */
.flash{min-height:13rem;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:1.1em}
.flash .rep{margin-top:1rem;padding-top:1rem;border-top:3px dashed var(--trait);color:var(--encre)}
.boite{display:inline-block;background:var(--trait);border-radius:8px;padding:0 .5em;font-size:.75em;color:var(--doux)}

.fete{text-align:center}
.fete .gros{font-size:3.5em;line-height:1.2}
.liste-mots{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.liste-mots span{border-radius:10px;padding:.15rem .6rem;border:2px solid var(--trait);background:#fff}
.liste-mots span.ok{border-color:var(--ok);background:var(--ok-fond)}
.discret{color:var(--doux);font-size:.85em}
.reglages label{display:flex;align-items:center;gap:.6rem;margin:.6rem 0}
.parle{border:2px solid var(--trait);background:#fff;border-radius:12px;min-width:44px;height:44px;font-size:1.1em;float:right;margin:0 0 .4rem .6rem}

@media (max-width:520px){
  :root{--taille:18px}
  .assoc{grid-template-columns:1fr 1fr;gap:.4rem}
  .assoc .puce{font-size:.88em;padding:.5rem}
  .haut .titre{font-size:.95em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}