/* ==========================================================================
   Écoutons les sons — feuille de style unique
   Univers visuel : le cahier d'école français (réglure Seyès, marge rouge)
   et des cartes-lettres que l'on appuie comme des touches.
   ========================================================================== */

:root {
  color-scheme: light;

  --papier:      #fbf8f1;
  --papier-haut: #ffffff;
  --ligne:       #c5d0ef;   /* réglure Seyès */
  --marge:       #e3a3a3;   /* marge du cahier */
  --encre:       #222a3d;
  --encre-doux:  #5d6780;
  --accent:      #1f56c4;   /* bleu stylo */
  --accent-clair:#dbe6ff;
  --actif:       #c8500f;   /* carte en train de sonner */
  --actif-fond:  #ffeadd;
  --carte:       #ffffff;
  --carte-bord:  #ded5c4;
  --carte-socle: #cfc5b2;
  --muet-fond:   #f1ece2;

  --ombre: 0 2px 0 var(--carte-socle), 0 10px 22px rgba(34, 42, 61, .10);
  --rayon: 22px;

  --seyes: 11px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier:      #141821;
    --papier-haut: #1c2230;
    --ligne:       #2f3c5c;
    --marge:       #6b3f3f;
    --encre:       #eef1f8;
    --encre-doux:  #a3adc4;
    --accent:      #85acff;
    --accent-clair:#243352;
    --actif:       #ff9757;
    --actif-fond:  #3a2416;
    --carte:       #232a3a;
    --carte-bord:  #374054;
    --carte-socle: #10141c;
    --muet-fond:   #1b2029;
    --ombre: 0 2px 0 var(--carte-socle), 0 10px 22px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --papier:      #141821;
  --papier-haut: #1c2230;
  --ligne:       #2f3c5c;
  --marge:       #6b3f3f;
  --encre:       #eef1f8;
  --encre-doux:  #a3adc4;
  --accent:      #85acff;
  --accent-clair:#243352;
  --actif:       #ff9757;
  --actif-fond:  #3a2416;
  --carte:       #232a3a;
  --carte-bord:  #374054;
  --carte-socle: #10141c;
  --muet-fond:   #1b2029;
  --ombre: 0 2px 0 var(--carte-socle), 0 10px 22px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.page {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(18px, 4vh, 40px) 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.2vh, 34px);
}

/* --- Titre --- */
.titre {
  margin: 0;
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--accent);
  text-align: center;
  text-wrap: balance;
}

/* --- Le mot, posé sur une page de cahier --- */
.mot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: clamp(14px, 3vw, 26px) clamp(16px, 4vw, 40px);
  border-radius: var(--rayon);
  background-color: var(--papier-haut);
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--seyes) - 1px),
      var(--ligne) calc(var(--seyes) - 1px) var(--seyes)
    ),
    linear-gradient(to right, transparent 34px, var(--marge) 34px 36px, transparent 36px);
  box-shadow: var(--ombre);
  border: 2px solid var(--carte-bord);
}

.mot__image {
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  line-height: 1.1;
}

.mot__texte {
  margin: 0;
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 12vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: .06em;
  color: var(--encre);
}

/* --- Les cartes de phonèmes --- */
.cartes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2.5vw, 20px);
  width: 100%;
}

.carte {
  position: relative;
  min-width: clamp(84px, 17vw, 132px);
  min-height: clamp(96px, 19vw, 148px);
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  font: inherit;
  color: var(--encre);
  background: var(--carte);
  border: 3px solid var(--carte-bord);
  border-radius: 20px;
  box-shadow: var(--ombre);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease;
}

.carte__lettres {
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 7.5vw, 3.2rem);
  line-height: 1;
  letter-spacing: .04em;
}

/* L'alphabet phonétique : repère pour l'adulte, discret pour l'enfant. */
.carte__api {
  font-family: "Segoe UI", "DejaVu Sans", "Noto Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(.8rem, 2.4vw, 1.05rem);
  color: var(--encre-doux);
}

.carte:hover { transform: translateY(-3px); }
.carte:active { transform: translateY(2px); box-shadow: 0 0 0 var(--carte-socle); }

.carte:focus-visible,
.bouton:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 4px;
}

/* Carte qui sonne : elle grossit, change de fond, change de bordure et affiche
   trois ondes. Jamais la couleur toute seule. */
.carte.sonne {
  transform: translateY(-6px) scale(1.08);
  background: var(--actif-fond);
  border-color: var(--actif);
  box-shadow: 0 4px 0 var(--carte-socle), 0 16px 30px rgba(200, 80, 15, .28);
}
.carte.sonne .carte__api { color: var(--actif); }

.carte__ondes {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  opacity: 0;
  transition: opacity .15s ease;
}
.carte.sonne .carte__ondes { opacity: 1; }
.carte__ondes i {
  display: block;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--actif);
  animation: onde .55s ease-in-out infinite alternate;
}
.carte__ondes i:nth-child(2) { animation-delay: .12s; }
.carte__ondes i:nth-child(3) { animation-delay: .24s; }

@keyframes onde { from { height: 5px; } to { height: 14px; } }

/* Lettre muette : ni cliquable, ni discrète pour l'oeil. */
.carte--muette {
  background: var(--muet-fond);
  border-style: dashed;
  border-color: var(--encre-doux);
  color: var(--encre-doux);
  box-shadow: none;
  cursor: default;
}
.carte--muette .carte__lettres { opacity: .75; }

/* --- Boutons --- */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
  width: 100%;
}

.bouton {
  min-height: 64px;
  padding: 14px 24px;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--accent);
  background: var(--carte);
  border: 3px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.bouton:hover { transform: translateY(-2px); background: var(--accent-clair); }
.bouton:active { transform: translateY(1px); }

.bouton--principal {
  color: var(--papier-haut);
  background: var(--accent);
}
.bouton--principal:hover { background: var(--accent); filter: brightness(1.12); }

.bouton[disabled] {
  opacity: .45;
  cursor: default;
  transform: none;
}

/* --- Navigation entre les mots --- */
.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  width: 100%;
}

.bouton--nav {
  color: var(--encre);
  border-color: var(--carte-bord);
  background: transparent;
}
.bouton--nav:hover { background: var(--carte); }

.compteur {
  margin: 0;
  min-width: 5ch;
  text-align: center;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--encre-doux);
}

/* --- Message d'état (lu par les lecteurs d'écran, visible discrètement) --- */
.statut {
  margin: 0;
  min-height: 1.6em;
  font-size: 1.05rem;
  color: var(--encre-doux);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .carte.sonne { transform: none; }
  .carte__ondes i { height: 12px; }
}

/* ==========================================================================
   MVP : navigation, écrans, jeux, fin de partie
   ========================================================================== */

:root {
  --juste:       #1f8a4c;
  --juste-fond:  #dcf5e5;
  --faux:        #c0392b;
  --faux-fond:   #fde3df;
  --or:          #f2b705;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --juste: #5fd18d; --juste-fond: #173826; --faux: #ff8a7a; --faux-fond: #3d1c18;
  }
}

.page:focus { outline: none; }

.entete {
  max-width: 1000px;
  margin-inline: auto;
  padding: 12px 20px 0;
  min-height: 12px;
}
.entete__retour {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 18px;
  border-radius: 999px; border: 2px solid var(--carte-bord);
  color: var(--encre); text-decoration: none; font-weight: 800;
}
.entete__retour:hover { background: var(--carte); }
.entete__retour[hidden] { display: none; }

.credits {
  max-width: 1000px; margin: 0 auto; padding: 24px 20px 32px;
  font-size: .78rem; font-weight: 600; color: var(--encre-doux); text-align: center;
}

.ecran {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 3vh, 28px);
}
.titre--grand { font-size: clamp(2rem, 7vw, 3.2rem); }
.sous-titre { margin: -8px 0 0; color: var(--encre-doux); font-size: 1.15rem; text-align: center; }

.bouton--grand { min-height: 72px; padding-inline: 40px; font-size: clamp(1.15rem, 3vw, 1.45rem); }
.bouton--petit { min-height: 48px; padding: 8px 18px; font-size: 1rem; }

/* --- Tuiles de l'accueil et du catalogue --- */
.tuiles {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(12px, 2.5vw, 22px);
}
.tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 170px; padding: 20px;
  text-align: center; text-decoration: none; color: var(--encre);
  background: var(--carte); border: 3px solid var(--carte-bord); border-radius: var(--rayon);
  box-shadow: var(--ombre);
  transition: transform .15s ease;
}
.tuile:hover { transform: translateY(-4px); }
.tuile:active { transform: translateY(2px); }
.tuile:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }
.tuile__icone { font-size: 3.2rem; line-height: 1; }
.tuile__titre { font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600; font-size: 1.55rem; }
.tuile__detail { color: var(--encre-doux); font-size: 1rem; }

/* --- Pastilles (réglages, filtres) --- */
.reglage { border: 0; padding: 0; margin: 0; width: 100%; text-align: center; }
.reglage legend { margin: 0 auto 12px; font-size: 1.25rem; }
.pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pastille {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 96px; min-height: 64px; padding: 10px 20px;
  font: inherit; font-size: 1.25rem; font-weight: 800; color: var(--encre);
  background: var(--carte); border: 3px solid var(--carte-bord); border-radius: 18px;
  cursor: pointer;
}
.pastille__detail { font-size: .85rem; font-weight: 600; color: var(--encre-doux); }
.pastille[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-clair); color: var(--accent); }
.pastille[aria-pressed="true"] .pastille__nom::before { content: "✓ "; }
.pastille--petite[aria-pressed="true"]::before { content: "✓ "; }
.pastille:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
.pastille--petite { flex-direction: row; min-width: 0; min-height: 48px; padding: 6px 16px; font-size: 1.05rem; border-radius: 999px; }

/* --- Explorateur --- */
.recherche {
  width: min(100%, 520px); min-height: 56px; padding: 10px 20px;
  font: inherit; font-size: 1.15rem; color: var(--encre);
  background: var(--carte); border: 3px solid var(--carte-bord); border-radius: 999px;
}
.recherche:focus { outline: none; border-color: var(--accent); }
.filtres { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.filtres__titre { margin: 6px 0 0; color: var(--encre-doux); font-size: .95rem; }
.grille-mots {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.vignette-mot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; min-height: 120px;
  text-decoration: none; color: var(--encre);
  background: var(--carte); border: 2px solid var(--carte-bord); border-radius: 18px;
  box-shadow: var(--ombre);
}
.vignette-mot:hover { transform: translateY(-2px); }
.vignette-mot:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
.vignette-mot__image { font-size: 2.6rem; line-height: 1.1; }
.vignette-mot__texte { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: .04em; text-align: center; word-break: break-word; }

.fiche { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3.2vh, 34px); }

/* --- Partie : barre du haut --- */
.ecran--partie { gap: clamp(14px, 2.5vh, 24px); padding-bottom: 150px; }
.progression { width: 100%; display: flex; align-items: center; gap: 14px; }
.progression__piste { flex: 1; height: 18px; border-radius: 999px; background: var(--carte-bord); overflow: hidden; }
.progression__barre { height: 100%; width: 0; border-radius: inherit; background: var(--juste); transition: width .4s ease; }
.progression__score { min-width: 4ch; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.fermer {
  width: 48px; height: 48px; flex: none;
  font: inherit; font-size: 1.4rem; color: var(--encre-doux);
  background: transparent; border: 2px solid var(--carte-bord); border-radius: 50%; cursor: pointer;
}
.fermer:hover { background: var(--carte); }
.consigne { margin: 0; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: clamp(1.3rem, 4vw, 1.9rem); text-align: center; }
.scene { width: 100%; }

.jeu { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3vh, 28px); }
.jeu__tete { display: flex; align-items: center; justify-content: center; gap: 22px; }
.vignette { font-size: clamp(4rem, 14vw, 6.5rem); line-height: 1; }

.ecoute {
  width: 88px; height: 88px; flex: none;
  display: grid; place-items: center;
  font-size: 2.4rem;
  background: var(--accent); border: 0; border-radius: 50%;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, black);
  cursor: pointer;
}
.ecoute:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, black); }
.ecoute:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }
.ecoute--petit { width: 52px; height: 52px; font-size: 1.4rem; }

/* --- Tuiles façon Duolingo : relief par une épaisse bordure basse, enfoncées à l'appui --- */
.carte--petite {
  min-width: clamp(56px, 13vw, 96px);
  min-height: clamp(64px, 14vw, 104px);
  padding: 8px 10px;
}
.carte--petite .carte__lettres { font-size: clamp(1.5rem, 6vw, 2.4rem); }
.carte--trou { border-style: dashed; border-color: var(--accent); background: var(--accent-clair); color: var(--accent); box-shadow: none; }
.carte--trou.revele { border-style: solid; border-color: var(--juste); background: var(--juste-fond); color: var(--juste); animation: rebond .4s ease; }

.tuile-son,
.choix-sons__option, .choix-cartes__option, .choix-images__option {
  position: relative;
  display: grid; place-items: center;
  font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600;
  color: var(--encre);
  background: var(--carte);
  border: 2px solid var(--carte-bord);
  border-bottom-width: 5px;
  border-radius: 16px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: transform .12s ease, border-color .15s ease, background-color .15s ease;
}
.tuile-son:active:not(:disabled),
[class*="__option"]:active { transform: translateY(3px); }
.tuile-son:focus-visible, [class*="__option"]:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }

/* --- Construis le mot --- */
.tuile-son {
  min-width: var(--tuile, 64px); height: calc(var(--tuile, 64px) + 6px); padding: 0 12px;
  font-size: calc(var(--tuile, 64px) * .46);
  line-height: 1;
  touch-action: none;             /* le doigt fait glisser la tuile, pas la page */
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.15), border-color .15s ease, background-color .15s ease;
}
.tuile-son.en-vol {
  z-index: 20;
  transition: none;
  border-color: var(--accent);
  box-shadow: 0 14px 28px rgba(34, 42, 61, .25);
  cursor: grabbing;
}
.jeu--construire, .jeu--poser { --tuile: clamp(54px, 13vw, 78px); }

/* Le son qui manque : les lettres du mot sonnent, le trou attend une tuile */
.tuile-son--mot { touch-action: auto; background: var(--papier-haut); }
.tuile-son--mot.sonne { color: var(--actif); border-color: var(--actif); background: var(--actif-fond); }
.emplacement.emplacement--trou {
  border: 3px dashed var(--accent); border-radius: 16px;
  background: color-mix(in srgb, var(--accent-clair) 70%, transparent);
  align-items: stretch;
}
.emplacement.emplacement--trou.rempli { border-color: transparent; background: transparent; }
.emplacement.emplacement--trou.survolee { border-style: solid; }
.banque.fige .tuile-son.est-attendue { opacity: 1; }

/* La ligne du mot : des cases sur une ligne de cahier, nettement différentes de la réserve */
.ligne-reponse {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: clamp(6px, 1.6vw, 12px);
  width: 100%;
  padding: 14px 12px 12px;
  border-radius: var(--rayon);
  background-color: var(--papier-haut);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--seyes) - 1px), var(--ligne) calc(var(--seyes) - 1px) var(--seyes));
  border: 2px solid var(--carte-bord);
}
.emplacement {
  min-width: var(--tuile); height: calc(var(--tuile) + 6px);
  display: flex; align-items: flex-end; justify-content: center;
  border-bottom: 4px solid var(--encre-doux);
  border-radius: 4px;
  transition: background-color .15s ease;
}
.emplacement:has(.tuile-son) { border-bottom-color: transparent; }
.emplacement.survolee { background: var(--accent-clair); border-bottom-color: var(--accent); }
.lettre-muette {
  display: grid; place-items: center;
  min-width: calc(var(--tuile) * .6); height: calc(var(--tuile) + 6px);
  font-family: "Fredoka", sans-serif; font-weight: 600;
  font-size: calc(var(--tuile) * .46);
  color: var(--encre-doux); opacity: .55;
}

/* La réserve : chaque tuile posée laisse son empreinte grise */
.banque { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2vw, 12px); padding-top: 4px; }
.banque__place {
  min-width: var(--tuile); height: calc(var(--tuile) + 6px);
  border-radius: 16px;
  background: var(--carte-bord);
  opacity: 1;
}
.banque__place:has(.tuile-son) { background: transparent; }
.banque.fige .tuile-son { opacity: .45; cursor: default; }

.tuile-son.est-juste { color: var(--juste); border-color: var(--juste); background: var(--juste-fond); animation: rebond .4s ease; }
.tuile-son.est-faux { color: var(--faux); border-color: var(--faux); background: var(--faux-fond); animation: secousse .4s ease; }
.tuile-son:disabled { cursor: default; }


.cases { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 2vw, 14px); }

/* --- Choix (sons, cartes, images) --- */
.choix-sons, .choix-cartes { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 3vw, 20px); }
.choix-sons__option, .choix-cartes__option {
  min-width: clamp(70px, 16vw, 112px); min-height: clamp(78px, 17vw, 120px); padding: 8px 14px;
}
.choix-sons__option .carte__lettres, .choix-cartes__option .carte__lettres { font-size: clamp(1.7rem, 7vw, 2.7rem); }

.choix-images {
  width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); justify-content: center;
  gap: clamp(10px, 3vw, 20px);
}
.choix-images__option { aspect-ratio: 1; width: 100%; }
.choix-images__image { font-size: clamp(3rem, 13vw, 5.4rem); line-height: 1; }
.choix-images__legendes {
  width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); justify-content: center;
  gap: clamp(10px, 3vw, 20px);
  color: var(--encre-doux); text-align: center; font-size: clamp(.85rem, 3.2vw, 1.05rem);
}
.choix-images__legendes[hidden] { display: none; }

[class*="__option"][aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-clair);
}
.fige [class*="__option"] { cursor: default; }
[class*="__option"].est-juste { color: var(--juste); border-color: var(--juste); background: var(--juste-fond); animation: rebond .4s ease; }
[class*="__option"].est-faux { color: var(--faux); border-color: var(--faux); background: var(--faux-fond); animation: secousse .4s ease; }
[class*="__option"].est-juste::after, [class*="__option"].est-faux::after {
  position: absolute; top: -10px; right: -10px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; font: 800 1rem "Nunito", sans-serif;
}
[class*="__option"].est-juste::after { content: "✓"; background: var(--juste); }
[class*="__option"].est-faux::after { content: "✗"; background: var(--faux); }

@keyframes rebond { 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes secousse { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* --- Pied de partie : bouton Valider et bandeau de correction qui monte --- */
.pied {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--papier-haut); border-top: 2px solid var(--carte-bord);
}
.pied .bouton { position: relative; overflow: hidden; min-width: 240px; border-bottom-width: 6px; }
.pied .bouton:active { transform: translateY(3px); border-bottom-width: 3px; }
.pied--juste, .pied--faux { animation: monte .25s ease-out; }
.pied--juste { background: var(--juste-fond); border-top-color: var(--juste); }
.pied--juste .bouton { background: var(--juste); border-color: color-mix(in srgb, var(--juste) 75%, black); }
.pied--faux { background: var(--faux-fond); border-top-color: var(--faux); }
.pied--faux .bouton { background: var(--faux); border-color: color-mix(in srgb, var(--faux) 75%, black); }
@keyframes monte { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Minuteur : se remplit pendant l'attente avant la manche suivante */
.bouton__minuteur {
  position: absolute; left: 0; bottom: 0; height: 5px; width: 0;
  background: rgba(255, 255, 255, .7);
  animation: minuteur linear forwards;
}
@keyframes minuteur { to { width: 100%; } }

.retour { display: flex; align-items: center; gap: 14px; }
.retour:empty { display: none; }
.retour p { margin: 0; }
.retour__icone {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; font-size: 1.5rem;
  animation: rebond .4s ease;
}
.pied--juste .retour__icone { background: var(--juste); }
.pied--faux .retour__icone { background: var(--faux); }
.retour__titre { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.55rem; }
.pied--juste .retour__titre { color: var(--juste); }
.pied--faux .retour__titre { color: var(--faux); }
.retour__detail { font-size: 1.1rem; }

/* --- Fin de partie --- */
.ecran--fin { position: relative; }
.etoiles { display: flex; gap: 10px; font-size: clamp(3.6rem, 13vw, 5.5rem); line-height: 1; }
.etoile { color: var(--carte-bord); }
.etoiles .etoile:nth-child(2) { transform: translateY(-16px); }
.etoile--gagnee { color: var(--or); animation: etoile .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.etoiles .etoile--gagnee:nth-child(2) { animation-name: etoile-haute; }
@keyframes etoile { from { transform: scale(0) rotate(-60deg); } to { transform: scale(1); } }
@keyframes etoile-haute { from { transform: translateY(-16px) scale(0) rotate(-60deg); } to { transform: translateY(-16px) scale(1); } }
.score { margin: 0; font-size: 1.3rem; }
.score strong { font-size: 2rem; color: var(--accent); }

.erreurs { width: 100%; }
.erreurs h2 { margin: 0 0 12px; font-family: "Fredoka", sans-serif; font-weight: 600; text-align: center; }
.erreurs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.erreur {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--carte); border: 2px solid var(--carte-bord); border-left: 6px solid var(--faux); border-radius: 16px;
}
.erreur__image { font-size: 2.4rem; line-height: 1; }
.erreur__texte { flex: 1; min-width: 0; }
.erreur__texte p { margin: 0; }
.erreur__mot { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.3rem; letter-spacing: .03em; }
.erreur__jeu { font-family: "Nunito", sans-serif; font-size: .9rem; font-weight: 700; color: var(--encre-doux); letter-spacing: 0; }
.erreur__detail { color: var(--encre-doux); }
.erreur__faux { color: var(--faux); text-decoration: line-through; }
.erreur__juste { color: var(--juste); font-weight: 800; }
.erreur__actions { display: flex; align-items: center; gap: 8px; }

.confettis { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
.confettis i {
  position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px;
  animation-name: confetti; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confetti { to { top: 110vh; transform: rotate(720deg) translateX(40px); opacity: .6; } }

/* --- Fenêtre « Revoir » --- */
.fenetre {
  width: min(960px, 94vw); max-height: 92vh; padding: 28px 20px;
  color: var(--encre); background: var(--papier); border: 3px solid var(--carte-bord); border-radius: var(--rayon);
}
.fenetre::backdrop { background: rgba(20, 24, 33, .55); }
.fenetre__fermer { position: sticky; top: 0; float: right; z-index: 2; background: var(--papier-haut); }

@media (max-width: 560px) {
  .erreur { flex-wrap: wrap; }
  .erreur__actions { width: 100%; justify-content: flex-end; }

  /* Téléphone : tout doit tenir sans défilement horizontal, pied compris */
  .page { padding-inline: 14px; }
  .ecran--partie { padding-bottom: 200px; }
  .pied { gap: 10px; padding-inline: 14px; }
  .pied .bouton { width: 100%; min-width: 0; }
  .retour { width: 100%; }
  .retour__icone { width: 40px; height: 40px; font-size: 1.25rem; }
  .retour__titre { font-size: 1.3rem; }
  .retour__detail { font-size: 1rem; }
  .jeu__tete { gap: 14px; }
  .ecoute { width: 68px; height: 68px; font-size: 1.9rem; }
  .ligne-reponse { padding: 10px 6px; }
  .tuile-son { padding: 0 8px; }
  .tuiles { grid-template-columns: 1fr; }
  .tuile { min-height: 120px; }
  .grille-mots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .vignette-mot { min-height: 100px; padding: 10px 4px; }
  .vignette-mot__texte { font-size: .95rem; }
  .pastille { min-width: 72px; padding: 8px 14px; }
  .fiche .actions .bouton { width: 100%; }
  .navigation { flex-wrap: nowrap; }
  .navigation .bouton__texte { display: none; }
  .navigation .bouton--nav { min-width: 72px; font-size: 1.5rem; }
}

.mot__texte, .erreur__mot { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .confettis { display: none; }
  .etoile--gagnee { animation: none; }
}

/* ==========================================================================
   Revue des mots (adulte) — dense, pensée pour l'ordinateur, empilée sur téléphone
   ========================================================================== */

.credits a { color: var(--encre-doux); }
.ecran--revue { gap: 14px; align-items: stretch; }
.ecran--revue .titre { align-self: center; }
.revue__entete { display: flex; flex-direction: column; gap: 8px; }
.revue__stats { margin: 0; font-weight: 700; color: var(--encre-doux); }
.revue__stats strong { color: var(--encre); }
.revue__sauvegarde { color: var(--juste); font-size: .95rem; }
.revue__sauvegarde--erreur { color: var(--faux); }
.revue__filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.revue__filtres .pastilles { justify-content: flex-start; gap: 6px; }
.revue__filtres .recherche { width: 220px; min-height: 44px; }
.revue__aide { margin: 0; font-size: .9rem; color: var(--encre-doux); }
kbd {
  display: inline-block; min-width: 1.6em; margin: 0 2px; padding: 1px 6px;
  font: 700 .8rem "Nunito", sans-serif; text-align: center;
  border: 1px solid var(--carte-bord); border-bottom-width: 3px; border-radius: 6px; background: var(--carte);
}
.bouton kbd { margin-left: 8px; color: var(--encre-doux); }

.revue { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
.revue__colonne { position: sticky; top: 10px; }
.revue__compte { margin: 0 0 6px; color: var(--encre-doux); font-size: .9rem; }
.revue__liste {
  list-style: none; margin: 0; padding: 4px;
  max-height: calc(100vh - 120px); overflow-y: auto;
  background: var(--carte); border: 2px solid var(--carte-bord); border-radius: 16px;
}
.revue__ligne {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; min-height: 44px;
  font: inherit; color: var(--encre); text-align: left;
  background: transparent; border: 0; border-radius: 10px; cursor: pointer;
}
.revue__ligne:hover { background: var(--accent-clair); }
.revue__ligne[aria-current="true"] { background: var(--accent); color: var(--papier-haut); }
.revue__ligne-image { font-size: 1.4rem; }
.revue__ligne-mot { flex: 1; font-family: "Fredoka", sans-serif; font-weight: 600; letter-spacing: .03em; }
.revue__drapeau { color: #d08a00; }
.revue__pastille { width: 1.6em; text-align: center; }
.revue__ligne--ok .revue__pastille { color: var(--juste); }
.revue__ligne--probleme .revue__pastille { color: var(--faux); }
.revue__ligne[aria-current="true"] .revue__pastille { color: inherit; }

.revue__detail {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px; background: var(--carte); border: 2px solid var(--carte-bord); border-radius: var(--rayon);
}
.revue__vide { margin: 30px; text-align: center; font-size: 1.3rem; color: var(--encre-doux); }
.revue__apercu { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.revue__mot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.revue__image { font-size: 3.4rem; line-height: 1; }
.revue__texte { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 2.4rem; letter-spacing: .05em; }
.revue__niveau { font-size: .85rem; color: var(--encre-doux); padding: 2px 10px; border: 1px solid var(--carte-bord); border-radius: 999px; }
.revue__signal {
  margin: 0; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, #f2b705 18%, var(--carte)); border: 2px solid color-mix(in srgb, #f2b705 60%, var(--carte));
}
.revue__signal ul { margin: 4px 0 0; padding-left: 20px; font-weight: 600; }
.revue__decisions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.revue__decision[aria-pressed="true"] { color: var(--papier-haut); }
.revue__decision--ok[aria-pressed="true"] { background: var(--juste); border-color: var(--juste); }
.revue__decision--probleme[aria-pressed="true"] { background: var(--faux); border-color: var(--faux); }
.revue__decision--exclu[aria-pressed="true"] { background: var(--encre-doux); border-color: var(--encre-doux); }
.revue__note, .revue__champ {
  font: inherit; font-weight: 600; color: var(--encre);
  background: var(--papier-haut); border: 2px solid var(--carte-bord); border-radius: 10px; padding: 8px 10px;
}
.revue__note { width: 100%; resize: vertical; }
.revue__note:focus, .revue__champ:focus { outline: none; border-color: var(--accent); }
.revue__corriger { border-top: 2px dashed var(--carte-bord); padding-top: 10px; }
.revue__corriger summary { cursor: pointer; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.2rem; color: var(--accent); }
.revue__corriger section { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.revue__corriger h3 { margin: 0; font-size: 1rem; color: var(--encre-doux); }
.revue__ligne-champ { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.revue__champ--emoji { width: 5em; font-size: 1.6rem; text-align: center; padding: 4px; }
.revue__champ--texte { width: 5.5em; text-transform: uppercase; font-family: "Fredoka", sans-serif; }
.revue__cartes { display: flex; flex-direction: column; gap: 6px; }
.revue__carte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.revue__carte select { max-width: 11em; }
.revue__muet { color: var(--encre-doux); font-style: italic; min-width: 8em; }
.revue__case { font-weight: 600; color: var(--encre-doux); }
.revue__mini {
  width: 36px; height: 36px; font: inherit; cursor: pointer;
  background: var(--papier-haut); border: 2px solid var(--carte-bord); border-radius: 8px;
}
.revue__mini:disabled { opacity: .35; cursor: default; }
.revue__alerte { margin: 0; color: var(--faux); font-weight: 700; }
.revue__alerte:empty { display: none; }
.revue__alerte--bandeau { padding: 10px 14px; border-radius: 12px; background: var(--faux-fond); }
.revue__etiquette { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--encre-doux); }
.revue__etiquette .revue__champ { flex: 1; max-width: 22em; }
.revue__prononciation { margin: 0; color: var(--encre-doux); font-family: "Segoe UI", "Noto Sans", sans-serif; }

@media (max-width: 760px) {
  .revue { grid-template-columns: 1fr; }
  .revue__colonne { position: static; }
  .revue__liste { max-height: 38vh; }
  .revue__aide { display: none; }
}

/* ==========================================================================
   Accueil : une grande bannière « Partie rapide », puis trois portes égales
   ========================================================================== */

.heros {
  width: 100%;
  display: flex; align-items: center; gap: clamp(14px, 3vw, 28px);
  padding: clamp(18px, 3.5vw, 30px) clamp(18px, 4vw, 36px);
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #7a4fd6));
  border-radius: calc(var(--rayon) + 6px);
  border-bottom: 6px solid color-mix(in srgb, var(--accent) 60%, black);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .15s ease;
}
.heros:hover { transform: translateY(-3px); }
.heros:active { transform: translateY(3px); border-bottom-width: 3px; }
.heros:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }
.heros__icone { font-size: clamp(3.4rem, 10vw, 5rem); line-height: 1; animation: sautille 2.4s ease-in-out infinite; }
.heros__texte { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.heros__titre { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.1; }
.heros__detail { opacity: .9; font-size: clamp(.95rem, 2.6vw, 1.1rem); }
.heros__badge {
  margin-top: 6px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); font-size: .95rem;
}
.heros__jouer {
  flex: none; padding: 12px 22px; border-radius: 999px;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.25rem;
  color: var(--accent); background: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
}
@keyframes sautille { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-6px); } }

.tuiles--trois { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   Préparation : interrupteur « passer tout seul », rappel des mots à revoir
   ========================================================================== */

.interrupteur {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 8px 18px;
  font: inherit; font-size: 1.1rem; color: var(--encre);
  background: var(--carte); border: 2px solid var(--carte-bord); border-radius: 999px; cursor: pointer;
}
.interrupteur:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
.interrupteur__piste {
  position: relative; flex: none; width: 56px; height: 32px; border-radius: 999px;
  background: var(--carte-bord); transition: background-color .2s ease;
}
.interrupteur__bouton {
  position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .2s ease;
}
.interrupteur[aria-checked="true"] .interrupteur__piste { background: var(--juste); }
.interrupteur[aria-checked="true"] .interrupteur__bouton { transform: translateX(24px); }
.rappel { margin: 0; padding: 8px 16px; border-radius: 12px; background: var(--accent-clair); color: var(--accent); }

/* ==========================================================================
   Explication après chaque réponse : des puces qu'on touche pour entendre
   ========================================================================== */

.retour { align-items: flex-start; max-width: 760px; }
.retour__texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.explication { margin: 0; font-size: 1.1rem; line-height: 2.1; }
.puce {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 2px; padding: 0 10px; min-height: 34px; vertical-align: middle;
  font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1;
  color: var(--encre); background: var(--papier-haut);
  border: 2px solid var(--carte-bord); border-bottom-width: 4px; border-radius: 10px; cursor: pointer;
}
.puce:active { transform: translateY(2px); border-bottom-width: 2px; }
.puce:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.puce--son { color: var(--actif); border-color: color-mix(in srgb, var(--actif) 45%, var(--carte-bord)); }
.puce--mot { font-family: "Nunito", sans-serif; font-weight: 800; }
.puce--muette { cursor: default; opacity: .6; border-style: dashed; }
.puce--graphie::after, .puce--son::after, .puce--mot::after { content: "🔊"; font-size: .7em; opacity: .55; }

/* ==========================================================================
   Fin de partie : une vraie fête
   ========================================================================== */

.fete {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 20px 26px;
  border-radius: calc(var(--rayon) + 8px);
  color: #fff; text-align: center;
  background: linear-gradient(160deg, #ffb703, #fb8500);
  box-shadow: 0 18px 40px rgba(251, 133, 0, .35);
  animation: fete-arrive .6s cubic-bezier(.2, 1.4, .4, 1) both;
}
.fete--3 { background: linear-gradient(160deg, #ffd166, #f4a261 45%, #e76f51); }
.fete--2 { background: linear-gradient(160deg, #4cc9f0, #4361ee); box-shadow: 0 18px 40px rgba(67, 97, 238, .35); }
.fete--1 { background: linear-gradient(160deg, #80ed99, #38a3a5); box-shadow: 0 18px 40px rgba(56, 163, 165, .35); }
@keyframes fete-arrive { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.fete__rayons {
  position: absolute; inset: -60%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .16) 0 10deg, transparent 10deg 20deg);
  animation: tourne 22s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.fete__trophee {
  font-size: clamp(4.5rem, 16vw, 7rem); line-height: 1;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25));
  animation: trophee 1s cubic-bezier(.2, 1.6, .4, 1) .2s both, flotte 3s ease-in-out 1.2s infinite;
}
@keyframes trophee { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
@keyframes flotte { 50% { transform: translateY(-8px) rotate(3deg); } }

.fete .etoiles { gap: 6px; font-size: clamp(3rem, 12vw, 4.6rem); }
.fete .etoile { color: rgba(255, 255, 255, .35); text-shadow: none; }
.fete .etoile--gagnee { color: #fff6a3; text-shadow: 0 0 18px rgba(255, 246, 163, .9), 0 3px 0 rgba(0, 0, 0, .15); }
.fete__titre { margin: 0; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(2.2rem, 8vw, 3.4rem); text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.fete__score-ligne { margin: 0; font-size: 1.4rem; font-weight: 800; }
.fete__score { font-family: "Fredoka", sans-serif; font-size: 3rem; font-variant-numeric: tabular-nums; }
.fete__mot { margin: 0; font-size: 1.15rem; opacity: .95; }
.fete__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.badge {
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .25); border: 2px solid rgba(255, 255, 255, .5);
  font-weight: 800; animation: badge .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes badge { from { transform: scale(0); } to { transform: scale(1); } }

.confettis i.rond { border-radius: 50%; width: 10px; height: 10px; }
@keyframes confetti { to { top: 110vh; transform: rotate(720deg) translateX(var(--derive, 40px)); opacity: .7; } }

/* ==========================================================================
   Ma séance
   ========================================================================== */

.stats { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px;
  background: var(--carte); border: 2px solid var(--carte-bord); border-bottom-width: 5px; border-radius: 18px;
}
.stat__valeur { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.9rem; color: var(--accent); }
.stat__libelle { color: var(--encre-doux); }
.bloc { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bloc h2 { margin: 0; font-family: "Fredoka", sans-serif; font-weight: 600; }
.bloc__aide { margin: 0; color: var(--encre-doux); }
.puces-mots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puce-mot {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px;
  font: inherit; font-family: "Fredoka", sans-serif; font-weight: 600; letter-spacing: .03em; color: var(--encre);
  background: var(--carte); border: 2px solid var(--carte-bord); border-bottom-width: 4px; border-radius: 12px; cursor: pointer;
}
.puce-mot--rate { border-color: var(--faux); }
.puce-mot--reussi { border-color: color-mix(in srgb, var(--juste) 55%, var(--carte-bord)); }
.puce-mot--mitige { border-color: color-mix(in srgb, #f2b705 70%, var(--carte-bord)); }
.puce-mot__compte { font-family: "Nunito", sans-serif; font-size: .8rem; color: var(--encre-doux); }
.historique { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.partie-passee { background: var(--carte); border: 2px solid var(--carte-bord); border-radius: 14px; padding: 10px 14px; }
.partie-passee__ligne { display: flex; align-items: center; gap: 14px; }
.partie-passee summary { cursor: pointer; list-style: none; border-radius: 10px; margin: -6px -8px; padding: 6px 8px; }
.partie-passee summary::-webkit-details-marker { display: none; }
.partie-passee summary:hover { background: var(--accent-clair); }
.partie-passee summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.partie-passee__etat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: .9rem;
  color: var(--faux); background: var(--faux-fond);
}
.partie-passee--parfaite .partie-passee__etat { color: var(--juste); background: var(--juste-fond); }
.partie-passee__chevron { display: inline-block; transition: transform .2s ease; transform: rotate(-90deg); }
.partie-passee[open] .partie-passee__chevron { transform: rotate(0deg); }
.partie-passee__heure { color: var(--encre-doux); font-variant-numeric: tabular-nums; }
.partie-passee__titre { flex: 1; }
.partie-passee__etoiles { color: var(--or); letter-spacing: 2px; }
.partie-passee__score { font-variant-numeric: tabular-nums; }
.partie-passee .erreurs__liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 560px) {
  .tuiles--trois { grid-template-columns: 1fr; }
  .heros { flex-wrap: wrap; }
  .heros__jouer { width: 100%; text-align: center; }
  .explication { font-size: 1rem; line-height: 2; }
  .partie-passee__ligne { flex-wrap: wrap; gap: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .heros__icone, .fete__rayons, .fete__trophee { animation: none; }
}

/* --- La lettre muette, Compte les sons --- */
.indice { margin: -6px 0 0; color: var(--encre-doux); font-size: 1.05rem; }
.tuile-son--choix[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-clair); }
.tuile-son.est-attendue { color: var(--juste); border-color: var(--juste); border-style: dashed; }
.tuile-son.est-muette { opacity: .75; }
.points { display: block; margin-top: 4px; font-size: 1.1rem; letter-spacing: 3px; line-height: 1; color: var(--encre-doux); }
.choix-sons__option { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.credits__version { font-variant-numeric: tabular-nums; opacity: .8; }

/* --- Bandeau « nouvelle version » : en haut, discret, jamais pendant qu'on joue sans le vouloir --- */
.mise-a-jour {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100vw - 20px);
  padding: 10px 12px 10px 18px;
  background: var(--papier-haut); border: 2px solid var(--accent); border-radius: 16px;
  box-shadow: 0 10px 28px rgba(34, 42, 61, .2);
  animation: descend .3s ease-out;
}
.mise-a-jour .fermer { width: 40px; height: 40px; font-size: 1.1rem; }
@keyframes descend { from { transform: translate(-50%, -120%); } to { transform: translate(-50%, 0); } }