/* Couleurs et polices de identite.md (maquette validée le 2026-10-25).
   Un seul thème clair, voulu : les couleurs vives sont réservées à ce qu'on apprend. */
@font-face {
  font-family: "Fredoka";
  src: url("polices/fredoka-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("polices/jost-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --tapis: #D7EEF4;
  --plateau: #FFFFFF;
  --encre: #2B2440;
  --encre-2: #5D5873;
  --mascotte: #EF6C16;
  --mascotte-ombre: #B94F0C;
  --bravo: #2E9E5B;
  --parent: #FFF6D6;
  --filet: rgba(43, 36, 64, .14);
  --f-jeu: "Fredoka", "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
  --f-parent: "Jost", "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box }
/* hidden doit toujours cacher, même un élément à qui on a donné display: grid ou flex. */
[hidden] { display: none !important }
html, body { height: 100%; margin: 0; background: var(--tapis); color: var(--encre) }
body { font: 400 1rem/1.5 var(--f-parent); -webkit-tap-highlight-color: transparent }
button { font: inherit; color: inherit; cursor: pointer }
:focus-visible { outline: 4px solid var(--mascotte); outline-offset: 3px }

/* L'appli occupe tout l'écran de la tablette : le fil en haut, le jeu au centre, le parent en bas. */
.appli {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--plateau);
  padding-top: env(safe-area-inset-top, 0px);
}
.fil {
  display: flex; justify-content: center; gap: 10px;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--filet);
  min-height: 69px;
}
.scene {
  display: grid; place-items: center; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: auto;
  padding: clamp(16px, 3vw, 32px) max(16px, env(safe-area-inset-right, 0px)) clamp(16px, 3vw, 32px) max(16px, env(safe-area-inset-left, 0px));
}
.parent {
  background: var(--parent); border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.parent p { margin: 0; flex: 1 1 18rem; min-width: 0 }
.parent b { font-weight: 600 }
.boutons { display: flex; gap: 10px }
.suivant, .secondaire {
  min-height: 48px; border-radius: 999px; padding: 12px 22px; font: 600 1rem/1 var(--f-parent);
}
.suivant { border: 0; background: var(--encre); color: var(--plateau) }
.secondaire { border: 1px solid var(--filet); background: var(--plateau) }

/* Fil de la séance */
.fil span {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.4rem; background: var(--tapis); opacity: .45;
}
.fil span.fait { opacity: .8 }
.fil span.ici { opacity: 1; background: var(--mascotte); box-shadow: 0 0 0 4px rgba(239, 108, 22, .25) }

/* Messages pour le parent à l'accueil (tablette sans voix, mémoire refusée…) */
.alertes-parent { display: grid; gap: 8px; max-width: 40rem }
.alertes-parent p {
  margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--parent);
  border: 1px solid var(--mascotte); font: 400 .95rem/1.4 var(--f-parent);
}

/* Mascotte et accueil */
.accueil, .hello { display: grid; gap: 20px; justify-items: center }
.mascotte { width: min(15rem, 55vw); height: auto }
.flotte { animation: flotte 3s ease-in-out infinite }
@keyframes flotte { 50% { transform: translateY(-10px) } }
.jouer {
  width: 7.5rem; height: 7.5rem; border-radius: 50%; border: 0; background: var(--mascotte);
  box-shadow: 0 8px 0 var(--mascotte-ombre); display: grid; place-items: center;
  transition: transform .1s, box-shadow .1s;
}
.jouer::after {
  content: ""; margin-left: .6rem; border-style: solid; border-width: 1.6rem 0 1.6rem 2.6rem;
  border-color: transparent transparent transparent var(--plateau);
}
.jouer:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--mascotte-ombre) }
/* Boutons surtout touchés par le parent : au moins 4,8rem (environ 1,2 cm sur la tablette). */
.reecouter { border: 0; background: var(--tapis); border-radius: 999px; width: 4.8rem; height: 4.8rem; font-size: 2rem }

/* Choix du thème */
.themes { width: 100%; max-width: 44rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 24px }
.theme {
  position: relative; aspect-ratio: 1; max-width: 100%; border: 4px solid var(--filet); border-radius: 28px;
  background: var(--plateau); display: grid; place-items: center; padding: 18%;
}
.theme img { width: 100%; height: auto }
.theme.conseille { border-color: var(--mascotte); box-shadow: 0 0 0 6px rgba(239, 108, 22, .2) }
.theme.ferme { cursor: default; background: var(--tapis) }
.theme.ferme img { filter: grayscale(1); opacity: .4 }
.theme .cadenas {
  position: absolute; right: 10px; bottom: 10px; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem; background: var(--plateau); border: 3px solid var(--encre);
}
.theme.secoue { animation: secoue .45s ease }
@keyframes secoue { 20%, 60% { transform: translateX(-10px) rotate(-2deg) } 40%, 80% { transform: translateX(10px) rotate(2deg) } }

/* Écoute : grosses cartes (écran 2 de la maquette) */
/* --colonnes est fixé par l'écran (4 cartes : une rangée ; 6 : deux rangées de 3). La largeur est
   bornée par la hauteur disponible pour que les deux rangées tiennent sans défiler sur la tablette. */
.cartes {
  --colonnes: 3;
  width: 100%; max-width: min(56rem, calc((100dvh - 260px) * var(--colonnes) / 2));
  display: grid; grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 40rem) { .cartes { --colonnes: 2 !important; max-width: 100% } }
.carte {
  position: relative; aspect-ratio: 1; max-width: 100%; border: 3px solid var(--filet); border-radius: 22px;
  background: var(--plateau); display: grid; place-items: center; padding: 12%;
}
.carte img { width: 100%; height: auto }
.carte .revu {
  position: absolute; top: 8px; right: 8px; background: var(--tapis); border-radius: 999px;
  padding: 2px 8px; font: 500 .75rem/1.4 var(--f-parent); color: var(--encre-2);
}
/* La carte touchée saute et s'entoure d'orange le temps de l'animation seulement. */
.carte.dit { animation: saute-carte .6s ease }
@keyframes saute-carte {
  0%, 100% { border-color: var(--filet) }
  30% { transform: scale(1.08) rotate(-3deg); border-color: var(--mascotte) }
  60% { transform: scale(.97) rotate(2deg); border-color: var(--mascotte) }
}
@keyframes saute { 30% { transform: scale(1.08) rotate(-3deg) } 60% { transform: scale(.97) rotate(2deg) } }

/* Répète comme… : un mot, trois voix */
.repete { display: grid; gap: 12px; justify-items: center }
.carte.grande { width: min(15rem, 45vw, calc(100dvh - 470px)); padding: 14% }
.facons { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px }
/* Zones touchées par les enfants : au moins 7,5rem (environ 2 cm sur la tablette, plan § Accessibilité). */
.facon {
  width: 7.5rem; height: 7.5rem; border-radius: 50%; border: 3px solid var(--filet);
  background: var(--tapis); font-size: 3.6rem; display: grid; place-items: center;
}
.facon.dit { border-color: var(--mascotte); animation: saute .5s ease }
.points { display: flex; gap: 8px }
.points span { width: 12px; height: 12px; border-radius: 50%; background: var(--filet) }
.points span.fait { background: var(--encre-2) }
.points span.ici { background: var(--mascotte) }
.mot-suivant {
  width: 5rem; height: 5rem; border-radius: 50%; border: 0; background: var(--mascotte);
  box-shadow: 0 6px 0 var(--mascotte-ombre); display: grid; place-items: center;
}
.mot-suivant::after {
  content: ""; margin-left: .4rem; border-style: solid; border-width: 1rem 0 1rem 1.6rem;
  border-color: transparent transparent transparent var(--plateau);
}
.mot-suivant:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--mascotte-ombre) }

/* Nourris le monstre (écran 3 de la maquette) */
.jeu-monstre { display: grid; gap: 16px; justify-items: center; width: 100% }
.joueurs { display: flex; gap: 14px }
.joueur {
  width: 4.8rem; height: 4.8rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.4rem;
  background: var(--tapis); opacity: .4; border: 3px solid transparent; transition: opacity .2s;
}
.joueur.actif { opacity: 1; border-color: var(--mascotte) }
.arene { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 32px) }
.monstre { width: min(12rem, 40vw, calc(100dvh - 470px)); min-width: 7rem; height: auto }
.monstre.mange { animation: croque .3s ease 3 }
@keyframes croque { 50% { transform: scale(1.06, .9) } }
.bulle { background: var(--tapis); border-radius: 22px; padding: 12px; display: grid; justify-items: center; gap: 6px }
.bulle img { width: 4.5rem }
.bulle .reecouter { background: var(--plateau) }
.pommes { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px }
.pomme {
  width: 7.5rem; height: 7.5rem; border: 3px solid var(--filet); border-radius: 22px;
  background: var(--plateau); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 1rem; /* en rem : un % se calculerait sur la largeur de toute la rangée */
}
.pomme img { width: 100%; height: auto }
.pomme.non { animation: non .4s ease }
@keyframes non { 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }
.pomme.oui { border-color: var(--bravo); box-shadow: 0 0 0 5px rgba(46, 158, 91, .25) }

/* What's missing? */
.jeu-manquant { display: grid; gap: 18px; justify-items: center; width: 100% }
.jeu-manquant .cartes { max-width: min(56rem, calc((100dvh - 330px) * var(--colonnes) / 2)) }
.plateau-manquant { position: relative; width: 100%; display: grid; justify-items: center }
.rideau {
  position: absolute; inset: -8px; z-index: 1; border-radius: 26px; background: var(--tapis);
  display: grid; place-items: center; font-size: 5rem; animation: tombe .35s ease;
}
/* Le rideau ne joue que sur le mouvement (jamais sur la transparence) et les cartes sont cachées
   en plus : même si les animations sont coupées, rien ne se voit les yeux fermés. */
@keyframes tombe { from { transform: translateY(-30px) } }
.plateau-manquant.yeux-fermes .cartes { visibility: hidden }
.carte.vide {
  border: 4px dashed var(--mascotte); background: var(--parent);
  font: 700 3rem/1 var(--f-jeu); color: var(--mascotte);
}
.actions-manquant { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center }
.action-jeu {
  min-height: 4.8rem; border: 0; border-radius: 999px; padding: 12px 28px;
  background: var(--mascotte); color: var(--plateau); font: 600 1.4rem/1 var(--f-jeu);
  box-shadow: 0 5px 0 var(--mascotte-ombre);
}
.action-jeu.secondaire-jeu { background: var(--encre); box-shadow: 0 5px 0 #000 }
.actions-manquant .joueur { opacity: 1 }
.joueur.dit { animation: saute .5s ease }

/* Simon says */
.jeu-simon { display: grid; gap: 14px; justify-items: center }
.illustration-simon { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center }
.illustration-simon .carte.grande { width: min(13rem, 38vw, calc(100dvh - 400px)) }
.illustration-simon .carte.de { border-color: var(--mascotte) }

/* Chasse aux couleurs */
.jeu-chasse { display: grid; gap: 14px; justify-items: center }
.jeu-chasse .carte.grande { width: min(13rem, 40vw, calc(100dvh - 420px)) }
/* Sablier : une barre qui se vide doucement, sans chiffre ni son. */
.sablier { width: min(18rem, 70vw); height: 14px; border-radius: 999px; background: var(--filet); overflow: hidden }
.sablier-reste { height: 100%; background: var(--mascotte); border-radius: 999px; animation: se-vide linear forwards }
@keyframes se-vide { from { width: 100% } to { width: 0 } }
.sablier.vide .sablier-reste { width: 0; animation: none }

/* Bye bye (écran 4 de la maquette) : Pépin et sa collection */
.bye { display: grid; gap: 14px; justify-items: center }
.mascotte-recompense { position: relative }
.bye .mascotte { width: min(12rem, 45vw, calc(100dvh - 420px)) }
.cadeau { position: absolute; top: -1.6rem; left: 50%; translate: -50% 0; font-size: 3.4rem }
.cadeau.nouveau { animation: saute .6s ease 3 }
.collection { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 40rem }
.collection span {
  width: 3.4rem; height: 3.4rem; border-radius: 14px; display: grid; place-items: center; font-size: 1.7rem;
  border: 2px solid var(--mascotte); background: var(--parent);
}
.collection span.nouveau { animation: saute .6s ease 3 }

/* Réglage de la voix (écran du parent) */
.reglage-voix { width: 100%; max-width: 42rem; display: grid; gap: 12px }
.reglage-voix h1 { font: 600 1.4rem/1.2 var(--f-parent); margin: 0 }
.reglage-voix .info, .reglage-voix .alerte { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--tapis) }
.reglage-voix .alerte { background: var(--parent); border: 1px solid var(--mascotte) }
.reglage-voix ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.reglage-voix li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid var(--filet); border-radius: 12px; padding: 10px 12px }
.reglage-voix li.choisie { border-color: var(--mascotte); background: var(--parent) }
.reglage-voix .nom { min-width: 0; overflow-wrap: anywhere }
.reglage-voix .en-ligne { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--tapis); font-size: .8rem; color: var(--encre-2) }
.reglage-voix .actions { display: flex; gap: 8px }
.reglage-voix button { min-height: 44px; border: 1px solid var(--filet); background: var(--plateau); border-radius: 999px; padding: 8px 16px }

.titre-jeu { font: 700 clamp(2.4rem, 7vw, 4rem)/1 var(--f-jeu); margin: 0; text-align: center }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}