/* client/style.css — mobile d'abord, clair et sombre, aucune police externe.
   Les couleurs sont des variables définies une fois pour le thème clair, puis
   redéfinies pour le thème sombre : le reste de la feuille ne parle qu'en variables. */

:root {
  --fond: #fbfaf7;
  --fond-carte: #ffffff;
  --texte: #1f2328;
  --texte-doux: #5c6670;
  --accent: #2f6fdf;
  --accent-texte: #ffffff;
  --juste: #1d8a4e;
  --faux: #c2410c;
  --bord: #d9d4ca;
  --focus: #f59e0b;
  --creature: #3aa36b;
  --creature-sombre: #2b7a50;
  --creature-clair: #a8e6c1;
  --feu: #f59e0b;
  --feu-clair: #fde68a;
  --gouttiere: 16px;
  --rayon: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #15181c;
    --fond-carte: #1e2329;
    --texte: #e8e6e1;
    --texte-doux: #a3a9b1;
    --accent: #6ea0ff;
    --accent-texte: #0d1117;
    --juste: #4ade80;
    --faux: #fb923c;
    --bord: #343b44;
    --focus: #fbbf24;
    --creature: #4cc07f;
    --creature-sombre: #2e8a5a;
    --creature-clair: #7fd9a6;
    --feu: #fbbf24;
    --feu-clair: #fef3c7;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  overflow-x: hidden;
}
main { padding: 0 var(--gouttiere) 48px; max-width: 640px; margin: 0 auto; }
h1 { font-size: 1.3rem; margin: 0; }
h2 { font-size: 1.15rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }

/* En-tête */
.entete {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px var(--gouttiere);
  padding: 12px var(--gouttiere) 8px;
  max-width: 640px;
  margin: 0 auto;
}
.serie { margin: 0; color: var(--texte-doux); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.serie.palier { color: var(--accent); font-weight: 600; animation: pulsation 600ms ease-out; }
@keyframes pulsation { from { transform: scale(1.4); } to { transform: scale(1); } }
.onglets { grid-column: 1 / -1; display: flex; gap: 8px; }
.creature-entete { width: 44px; height: 44px; }
.creature-grande { width: 200px; height: 200px; max-width: 100%; margin: 0 auto; }
.carte-creature { text-align: center; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; margin-bottom: 16px; background: var(--fond-carte); }
.carte-creature h3 { margin: 8px 0 0; font-size: 1.15rem; }
.carte-creature .stade { margin: 0; color: var(--texte-doux); }
.carte-creature p { margin: 4px 0 0; }
.evolution { text-align: center; }
.evolution h2 { text-wrap: balance; }
.onglets button {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond-carte);
}
.onglets button[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }

/* Jeu */
.consigne { color: var(--texte-doux); margin: 16px 0 4px; }
.expression { font-size: 1.6rem; line-height: 1.8; overflow-wrap: anywhere; }
.enonce { margin: 0 0 16px; font-weight: 600; }
.saisie { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.operateur { padding: 0 6px; }
.trou { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; }
.groupe { display: inline-flex; align-items: center; white-space: nowrap; }
.trou .signe { width: 32px; height: 44px; border: 1px solid var(--bord); border-radius: var(--rayon) 0 0 var(--rayon); background: var(--fond-carte); font-size: 1.2rem; }
.trou input { width: 54px; height: 44px; border: 1px solid var(--bord); border-left: 0; border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--fond-carte); text-align: center; font-size: 1.2rem; }
.formes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.formes button { padding: 8px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-carte); font-size: 1rem; }
.formes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
/* Tuiles */
.reponse-tuiles { min-height: 2.2em; margin: 0 0 12px; padding: 6px 12px; border: 1px dashed var(--bord); border-radius: var(--rayon); background: var(--fond-carte); }
.tuiles { display: flex; flex-wrap: wrap; gap: 10px; }
.tuile { min-height: 44px; padding: 6px 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-carte); font-size: 1.3rem; }
.tuile[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.tuile:disabled:not([aria-pressed="true"]) { opacity: 0.4; }
/* Chasse l'erreur */
.propositions { display: grid; gap: 10px; }
.proposition button { width: 100%; min-height: 52px; padding: 8px 14px; border: 2px solid var(--bord); border-radius: var(--rayon); background: var(--fond-carte); text-align: left; font-size: 1.3rem; }
.proposition button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
/* Après le verdict, la couleur du verdict l'emporte sur celle de la sélection ;
   la proposition choisie garde un liseré intérieur de la même couleur. */
.proposition.juste button { border-color: var(--juste); box-shadow: none; }
.proposition.faux button { border-color: var(--faux); box-shadow: none; }
.proposition.juste.choisie button { box-shadow: inset 0 0 0 2px var(--juste); }
.proposition.faux.choisie button { box-shadow: inset 0 0 0 2px var(--faux); }
.annotation { margin: 4px 0 0; font-size: 0.95rem; color: var(--texte-doux); }
.proposition.juste .annotation { color: var(--juste); font-weight: 600; }
/* La créature */
/* overflow visible : la lueur et la flamme dépassent un peu du carré de 120 ;
   transform-origin à 50 % 75 % : la respiration et l'évolution gonflent le
   dragon autour de son ventre, pas autour du coin de la case. */
.creature { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 75%; }
.creature .corps { fill: var(--creature); }
.creature .sombre { fill: var(--creature-sombre); }
.creature .clair { fill: var(--creature-clair); stroke: var(--creature-sombre); stroke-width: 2; }
.creature .tache { stroke: none; }
.creature .feu { fill: var(--feu); }
.creature .feu-clair { fill: var(--feu-clair); }
.creature .oeil { fill: #1f2328; }
.creature .reflet { fill: #ffffff; }
.creature .bouche { fill: none; stroke: var(--creature-sombre); stroke-width: 2; stroke-linecap: round; }
.creature .queue { stroke: var(--creature-sombre); stroke-width: 2; }
.creature .lueur { fill: var(--feu-clair); opacity: 0.45; }
.creature.respire { animation: respiration 3s ease-in-out infinite; }
.creature.evolue { animation: evolution 2.2s ease-out; }
@keyframes respiration { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes evolution {
  0% { transform: scale(0.8); filter: brightness(1); }
  25% { transform: scale(1.12) rotate(-3deg); filter: brightness(1.5) drop-shadow(0 0 14px var(--feu)); }
  55% { transform: scale(0.96) rotate(2deg); filter: brightness(1.25) drop-shadow(0 0 10px var(--feu)); }
  100% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { .creature.respire, .creature.evolue { animation: none; } }
.actions { margin: 20px 0; display: flex; gap: 12px; }
.principal { padding: 12px 20px; border: 0; border-radius: var(--rayon); background: var(--accent); color: var(--accent-texte); font-weight: 600; min-width: 140px; }
.retour { padding: 12px 16px; border-radius: var(--rayon); background: var(--fond-carte); border: 2px solid var(--bord); margin-top: 12px; }
.retour.juste { border-color: var(--juste); }
.retour.faux { border-color: var(--faux); }
.retour p { margin: 0 0 8px; }
.correction { margin: 0; padding-left: 20px; color: var(--texte-doux); }
.correction:empty { display: none; }
.bilan { padding: 16px; border-radius: var(--rayon); background: var(--fond-carte); border: 1px solid var(--bord); }

/* Carte */
.niveau { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 12px; background: var(--fond-carte); }
.niveau h3 { margin: 0 0 8px; font-size: 1rem; }
.niveau.verrouille { opacity: 0.55; }
.competence { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.competence .etat { color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.competence.maitrisee .etat { color: var(--juste); font-weight: 600; }

/* Réglages et connexion */
label { display: block; margin: 12px 0 6px; }
label input:not([type="file"]) { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-carte); }
label select { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-carte); }
#ecran-reglages button, .bouton { display: inline-block; margin: 8px 0; padding: 10px 16px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-carte); cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--bord); margin: 16px 0; }
.page-connexion { display: grid; place-items: center; min-height: 100vh; padding: var(--gouttiere); }
.carte { width: 100%; max-width: 360px; padding: 24px; border-radius: var(--rayon); background: var(--fond-carte); border: 1px solid var(--bord); }
.erreur { color: var(--faux); }
dialog { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-carte); color: var(--texte); padding: 24px; max-width: calc(100vw - 2 * var(--gouttiere)); }
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog input { width: 100%; padding: 10px; margin: 12px 0; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }