/* Écrans de choix animés (tâche 2.4).
   Animations légères de jeu vidéo pour enfants, à la manière des menus de Mario :
   cartes épaisses qui rebondissent au survol et au choix, titre qui saute, étapes
   qui glissent, formes qui flottent doucement dans le fond. Toutes restent brèves
   et ne bloquent jamais un clic. La préférence système de réduction des
   animations les coupe (fin de feuille).
   Couleurs : ivoire chaud des visuels des personnages et vert de la maquette
   explication_pc_v02.png. Police : Nunito (OFL), chargée depuis le CDN jsDelivr
   à une version exacte ; à défaut, la police système arrondie du poste. */

@font-face {
  font-family: "Nunito Menus";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/nunito@5.1.0/files/nunito-latin-wght-normal.woff2") format("woff2-variations");
}

.ecran-menus {
  --m-fond: #fbf4e6;
  --m-fond-bas: #f3e2c4;
  --m-texte: #3d2f22;
  --m-texte-doux: #7a6552;
  --m-carte: #fffaf1;
  --m-bord: #ead7b7;
  --m-vert: #4e7a50;
  --m-ombre: rgb(91 62 30 / 18%);
  --c-orange: #ee9d33;
  --c-corail: #e9735a;
  --c-turquoise: #2b9e90;
  --c-bleu: #4b86e0;
  --c-violet: #9467d2;
  --c-vert: #5b9a47;
  --c-feuille: #3c9660;
  --c-ardoise: #5c7690;
  --rebond: cubic-bezier(.34, 1.56, .64, 1);
  --c: var(--m-vert);

  position: relative;
  isolation: isolate;
  overflow-x: clip;   /* « clip » et non « hidden » : le bandeau reste collé en haut pendant le défilement */
  display: flex;
  flex-direction: column;
  padding: 0 0 32px;
  background:
    radial-gradient(120% 70% at 50% -10%, #fffdf7 0%, transparent 60%),
    linear-gradient(180deg, var(--m-fond) 0%, var(--m-fond-bas) 100%);
  background-attachment: fixed;
  color: var(--m-texte);
  font-family: "Nunito Menus", "Nunito", ui-rounded, "Segoe UI Rounded", "Arial Rounded MT Bold", var(--police);
  font-weight: 600;
}

.ecran-menus button { font-family: inherit; }
.ecran-menus :focus-visible { outline: 4px solid var(--m-vert); outline-offset: 3px; }

.couleur-orange { --c: var(--c-orange); }
.couleur-corail { --c: var(--c-corail); }
.couleur-turquoise { --c: var(--c-turquoise); }
.couleur-bleu { --c: var(--c-bleu); }
.couleur-violet { --c: var(--c-violet); }
.couleur-vert { --c: var(--c-vert); }
.couleur-feuille { --c: var(--c-feuille); }
.couleur-ardoise { --c: var(--c-ardoise); }

/* ---- Fond : formes qui flottent ------------------------------------------------ */

.menus-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.decor-forme {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  opacity: .22;
  animation: flotter calc(9s + var(--k) * .7s) ease-in-out calc(var(--k) * -1.3s) infinite alternate;
}
.decor-forme-0 { background: var(--c-orange); }
.decor-forme-1 { background: var(--c-turquoise); width: 22px; height: 22px; }
.decor-forme-2 { background: var(--c-corail); border-radius: 8px; transform: rotate(20deg); }
.decor-forme-3 { background: var(--c-bleu); width: 18px; height: 18px; }
.decor-forme-4 { background: var(--c-violet); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border-radius: 0; width: 40px; height: 40px; }
.decor-forme-5 { background: var(--c-vert); width: 26px; height: 26px; }
@keyframes flotter {
  from { translate: 0 0; rotate: -8deg; }
  to { translate: 14px -26px; rotate: 10deg; }
}

/* ---- Bandeau ------------------------------------------------------------------- */

.menus-bandeau {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: rgb(251 244 230 / 88%);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--m-bord);
}
.menus-entete-navigation { display: flex; align-items: center; gap: 12px; min-width: 0; }
.menus-logo { display: flex; align-items: center; font-size: 20px; font-weight: 900; letter-spacing: .2px; white-space: nowrap; color: inherit; text-decoration: none; }
.menus-accueil { text-decoration: none; white-space: nowrap; }
.menus-entete-navigation .menus-accueil { min-height: 44px; }
.menus-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.menus-actions .reglage-voix { white-space: normal; }
.menus-actions .reglage-voix[aria-pressed="true"] { background: #e7efe3; color: var(--m-vert); border-color: var(--m-vert); }
.menus-actions .reglage-voix:disabled { opacity: 0.6; cursor: wait; }
.bandeau-bouton, .bandeau-son {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 14px;
  background: var(--m-carte);
  border: 2px solid var(--m-bord);
  border-radius: 999px;
  color: var(--m-texte-doux);
  font-size: 15px;
  font-weight: 700;
  transition: transform .18s var(--rebond), background-color .15s;
}
.bandeau-bouton[aria-disabled="true"] { opacity: .78; cursor: not-allowed; border-style: dashed; }
.bandeau-son { min-width: 44px; justify-content: center; padding: 6px 10px; color: var(--m-vert); border-color: var(--m-vert); }
.bandeau-son.coupe { color: var(--m-texte-doux); border-color: var(--m-bord); }
.bandeau-bouton:hover, .bandeau-son:hover { transform: translateY(-2px) scale(1.05); }
.bandeau-son:active { transform: scale(.94); }
.icone { width: 22px; height: 22px; flex: none; }
.icone-petite { width: 15px; height: 15px; }

/* ---- Fil des choix ------------------------------------------------------------- */

.menus-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px max(16px, env(safe-area-inset-left)) 0;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.menus-fil[hidden] { display: none; }
.fil-retour, .fil-puce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  transition: transform .18s var(--rebond);
}
.fil-retour { background: var(--m-vert); color: #fff; border: none; box-shadow: 0 3px 0 #355737; }
.fil-puce { background: var(--m-carte); color: var(--m-texte); border: 2px solid var(--m-bord); }
.fil-puce::after { content: "✎"; font-size: 13px; color: var(--m-texte-doux); }
.fil-retour:hover, .fil-puce:hover { transform: translateY(-2px); }
.fil-retour:active, .fil-puce:active { transform: translateY(2px); box-shadow: none; }

/* ---- Étapes et transitions ----------------------------------------------------- */

.menus-scene { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.menus-etape { display: flex; flex-direction: column; align-items: center; }
.entree-avant { animation: etape-avant .24s ease-out both; }
.entree-arriere { animation: etape-arriere .24s ease-out both; }
@keyframes etape-avant { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes etape-arriere { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }

.menus-titre {
  margin: 22px 0 4px;
  font-size: clamp(26px, 4.6vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  color: var(--m-texte);
  text-shadow: 0 3px 0 #fff;
  animation: titre-saut .34s var(--rebond) both;
}
@keyframes titre-saut { from { transform: scale(.7) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.menus-aide { margin: 0 0 6px; color: var(--m-texte-doux); text-align: center; font-size: 17px; }

.menus-grille { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; width: 100%; margin-top: 18px; }

/* ---- Cartes : épaisses, elles rebondissent au survol et bondissent au choix ------ */

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px;
  background: var(--m-carte);
  color: var(--m-texte);
  border: 3px solid var(--c);
  border-radius: 22px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 72%, #000), 0 14px 22px var(--m-ombre);
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .2s var(--rebond), box-shadow .2s var(--rebond), opacity .12s, filter .12s;
  /* Entrée en rebond, décalée selon le rang (--i) ; « backwards » laisse ensuite la main au survol. */
  animation: carte-entree .26s var(--rebond) calc(var(--i, 0) * 24ms) backwards;
}
@keyframes carte-entree { from { opacity: 0; transform: translateY(22px) scale(.82); } }
.carte:hover, .carte:focus-visible { transform: translateY(-7px) scale(1.04); box-shadow: 0 10px 0 color-mix(in srgb, var(--c) 72%, #000), 0 22px 28px var(--m-ombre); }
.carte:active { transform: translateY(4px) scale(.98); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 72%, #000), 0 6px 12px var(--m-ombre); transition-duration: .06s; }
.carte.choisie { animation: carte-bond .2s var(--rebond); z-index: 1; }
@keyframes carte-bond { 0% { transform: scale(1); } 45% { transform: translateY(-10px) scale(1.12); } 100% { transform: scale(1.06); } }
.carte.eteinte { opacity: .45; filter: saturate(.6); }
.carte.precedente { outline: 4px dashed color-mix(in srgb, var(--c) 70%, #fff); outline-offset: 4px; }
.carte.precedente:focus-visible { outline: 4px solid var(--m-vert); }
.secoue { animation: secouer .32s ease-in-out !important; }
@keyframes secouer {
  0%, 100% { translate: 0; }
  20% { translate: -7px; }
  40% { translate: 6px; }
  60% { translate: -4px; }
  80% { translate: 3px; }
}

/* Classe : grosse pastille colorée, avec l'âge. */
.carte-classe { flex: 0 1 172px; min-width: 132px; min-height: 150px; background: var(--c); color: #fff; border-color: color-mix(in srgb, var(--c) 80%, #fff); }
.classe-nom { font-size: clamp(40px, 6vw, 58px); font-weight: 900; line-height: 1; text-shadow: 0 3px 0 rgb(0 0 0 / 18%); }
.classe-age { white-space: nowrap; padding: 2px 12px; border-radius: 999px; background: rgb(255 255 255 / 28%); font-size: 16px; font-weight: 800; }
.carte-classe:hover .classe-nom, .carte-classe:focus-visible .classe-nom { animation: hop .4s var(--rebond); }
@keyframes hop { 40% { transform: translateY(-6px) rotate(-4deg); } }

/* Professeur : visuel du personnage, nom, rôle, matières ou « bientôt ». */
.carte-prof { flex: 0 1 260px; min-width: 150px; padding: 10px 10px 14px; justify-content: flex-start; --c: var(--m-vert); }
.prof-image { display: block; width: 100%; aspect-ratio: 4 / 4.2; overflow: hidden; border-radius: 16px; background: #fbf5e7; }
.prof-image img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.32); transform-origin: 50% 22%; transition: transform .25s var(--rebond); }
.prof-image-hibou img { transform-origin: 50% 26%; }
.carte-prof:hover .prof-image img, .carte-prof:focus-visible .prof-image img { transform: scale(1.4) rotate(-2deg); }
.prof-nom { margin-top: 6px; font-size: 22px; font-weight: 900; }
.prof-role { color: var(--m-texte-doux); font-size: 15px; }
.prof-matieres { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.prof-matiere { padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--m-vert) 14%, #fff); color: var(--m-vert); font-size: 13px; font-weight: 800; line-height: 1.3; }
.carte-prof.fermee { --c: #b9a68a; cursor: not-allowed; }
.carte-prof.fermee .prof-image img { filter: grayscale(.55) brightness(1.04); }
.carte-prof.fermee:hover, .carte-prof.fermee:focus-visible { transform: translateY(-3px); }
.prof-ruban {
  position: absolute;
  top: 16px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 10px 4px 4px 10px;
  background: var(--c-corail);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 3px 0 #a94c38;
  transform: rotate(4deg);
}

/* Matière : pastille avec son icône. */
.carte-matiere { flex: 0 1 230px; min-width: 150px; min-height: 170px; gap: 8px; }
.matiere-pastille { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: inset 0 -5px 0 rgb(0 0 0 / 16%); }
.icone-matiere { width: 40px; height: 40px; stroke-width: 1.9; }
.carte-matiere:hover .matiere-pastille, .carte-matiere:focus-visible .matiere-pastille { animation: hop .45s var(--rebond); }
.matiere-nom { font-size: 20px; font-weight: 900; line-height: 1.15; }
.matiere-nombre { color: var(--m-texte-doux); font-size: 14px; }

/* Les parcours sont communs au domaine du professeur, avant toute matière. */
.carte-parcours { --c: var(--m-vert); flex: 0 1 240px; min-width: min(100%, 190px); min-height: 180px; gap: 10px; }
.parcours-pastille { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--m-vert); color: #fff; font-size: 30px; }
.parcours-titre { font-size: 21px; font-weight: 900; }
.parcours-aide { color: var(--m-texte-doux); font-size: 15px; line-height: 1.35; }

/* Partie : sujet libre en tête, puis les parties regroupées par domaine. */
.menus-provisoire {
  max-width: 720px;
  margin: 10px 0 0;
  padding: 8px 14px;
  border: 2px dashed var(--c-orange);
  border-radius: 14px;
  background: #fff4dd;
  color: #7a4c0e;
  font-size: 14px;
  text-align: center;
}
.carte-libre {
  --c: var(--m-vert);
  flex-direction: row;
  gap: 14px;
  width: min(100%, 560px);
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--m-vert);
  color: #fff;
  text-align: left;
  border-color: color-mix(in srgb, var(--m-vert) 70%, #fff);
}
.libre-pastille { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #ffd65a; color: #8a5a00; }
.icone-libre { width: 30px; height: 30px; fill: currentColor; }
.carte-libre:hover .libre-pastille, .carte-libre:focus-visible .libre-pastille { animation: tourne .5s var(--rebond); }
@keyframes tourne { to { rotate: 1turn; } }
.libre-texte { display: flex; flex-direction: column; }
.libre-titre { font-size: 22px; font-weight: 900; }
.libre-aide { font-size: 15px; opacity: .92; }
.menus-domaine { align-self: stretch; margin: 26px 0 0; font-size: 18px; font-weight: 900; color: var(--m-texte-doux); text-align: left; }
.grille-parties {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  margin-top: 10px;
}
.carte-partie { min-height: 76px; padding: 12px 14px; border-width: 2px; border-left-width: 10px; border-radius: 16px; justify-content: center; align-items: flex-start; text-align: left; box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 72%, #000), 0 10px 16px var(--m-ombre); }
.carte-partie:hover, .carte-partie:focus-visible { transform: translateY(-4px) scale(1.02); }
.partie-titre { font-size: 16px; font-weight: 800; line-height: 1.25; }
/* Partie du programme qui a une leçon préparée. */
.partie-lecon { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 2px 9px; border-radius: 10px; background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 78%, #000); font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.menus-sources { margin-top: 28px; color: var(--m-texte-doux); font-size: 13px; text-align: center; }
.menus-sources p { margin: 2px 0; }
.menus-sources a { color: inherit; }

/* ---- Bulle « bientôt » ----------------------------------------------------------- */

.menus-bulle {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 20;
  max-width: min(90vw, 460px);
  margin: 0;
  padding: 12px 20px;
  border-radius: 18px;
  background: var(--m-texte);
  color: #fff;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
  opacity: 0;
  transform: translate(-50%, 20px) scale(.9);
  pointer-events: none;
  transition: opacity .15s, transform .25s var(--rebond);
}
.menus-bulle:empty { display: none; }
.menus-bulle.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---- Téléphone en portrait ------------------------------------------------------ */

@media (max-width: 600px) {
  .menus-bandeau { padding: 8px 12px; gap: 8px; }
  .menus-logo { font-size: 17px; gap: 8px; }
  .menus-entete-navigation { gap: 8px; }
  .bandeau-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bandeau-bouton { padding: 6px 10px; }
  .menus-grille { gap: 12px; }
  .carte-classe { flex-basis: 30%; min-width: 96px; min-height: 112px; }
  .classe-age { font-size: 14px; padding: 2px 8px; }
  .carte-prof { flex-basis: 30%; min-width: 98px; padding: 6px 6px 10px; border-radius: 18px; }
  .prof-image { aspect-ratio: 3 / 4; border-radius: 12px; }
  .prof-nom { font-size: 17px; }
  .prof-role { font-size: 12px; line-height: 1.2; }
  .prof-matiere { font-size: 11px; padding: 2px 5px; }
  .prof-ruban { top: 8px; right: -4px; font-size: 12px; padding: 3px 8px; }
  .carte-matiere { flex-basis: 44%; min-width: 136px; min-height: 140px; }
  .matiere-nom { font-size: 17px; }
  .menus-titre { margin-top: 16px; }
  .menus-aide { font-size: 15px; }
}

/* ---- Téléphone en paysage : peu de hauteur -------------------------------------- */

@media (max-height: 500px) {
  .menus-bandeau { padding-top: 6px; padding-bottom: 6px; }
  .bandeau-bouton, .bandeau-son { min-height: 40px; }
  .menus-fil { padding-top: 8px; }
  .menus-titre { margin-top: 10px; font-size: 26px; }
  .menus-aide { font-size: 14px; }
  .menus-grille { margin-top: 12px; gap: 12px; }
  .carte-classe { flex-basis: 128px; min-width: 100px; min-height: 104px; }
  .classe-nom { font-size: 38px; }
  .carte-prof { flex-basis: 220px; display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto 1fr; align-items: start; text-align: left; column-gap: 10px; row-gap: 2px; }
  .carte-prof .prof-image { grid-row: 1 / span 3; width: 92px; height: 112px; aspect-ratio: auto; }
  .carte-prof .prof-nom { margin-top: 4px; font-size: 18px; }
  .carte-prof .prof-matieres { justify-content: flex-start; }
  .carte-prof .prof-ruban { top: auto; bottom: 14px; }
  .carte-prof .prof-matiere { font-size: 12px; }
  .carte-matiere { min-height: 120px; flex-basis: 170px; }
  .matiere-pastille { width: 54px; height: 54px; }
  .icone-matiere { width: 30px; height: 30px; }
  .carte-libre { margin-top: 10px; padding: 8px 14px; }
  .libre-pastille { width: 42px; height: 42px; }
  .libre-titre { font-size: 19px; }
  .menus-provisoire { margin-top: 6px; padding: 4px 10px; font-size: 12px; }
  .menus-domaine { margin-top: 16px; font-size: 16px; }
  .menus-bulle { bottom: 12px; }
}

/* ---- Réduction des animations demandée par le système ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .ecran-menus *, .ecran-menus *::before, .ecran-menus *::after {
    animation: none !important;
    transition: none !important;
  }
  .ecran-menus .decor-forme { display: none; }
  .carte:hover, .carte:focus-visible { transform: none; }
}

/* L'aide garde les mêmes choix de classe/matière et reste ouverte dans Base. */
.carte-devoirs { border-color: #4f7a52; background: #edf5e8; margin-bottom: 0.7em; }
.menus-dictees { margin: 1em 0; }

/* ---- Mission 7 (V1) : espacements, fil, bandeau compact ------------------------- */

/* Titre et phrase d'aide aérés ; une phrase posée après une grille de cartes ne
   touche plus l'épaisseur et l'ombre des cartes. */
.menus-aide { margin-top: 12px; }
.menus-grille + p, .menus-grille + .menus-aide { margin-top: 30px; }

/* Fil des choix : une seule ligne, centrée sur le contenu (défilement s'il est long). */
.menus-fil { flex-wrap: nowrap; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.menus-fil > * { flex: 0 0 auto; }

/* Points lisibles sur le bandeau clair. */
.espace-points { color: var(--m-texte); font-weight: 700; }

/* Bouton des réglages : seulement sur petit écran. */
.menus-reglages { display: none; }
@media (max-width: 600px), (max-height: 500px) {
  .menus-bandeau { position: sticky; }
  .menus-reglages { display: inline-flex; margin-left: auto; min-width: 44px; justify-content: center; font-size: 20px; }
  .menus-actions {
    display: none;
    position: absolute;
    top: 100%;
    right: max(8px, env(safe-area-inset-right));
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    background: var(--m-carte, #fff);
    border: 2px solid var(--m-bord);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgb(0 0 0 / .15);
  }
  .menus-actions.ouvert { display: flex; }
  .menus-actions .espace-eleve { flex-direction: column; align-items: stretch; }
  .menus-fil { justify-content: flex-start; padding-top: 6px; }
  .fil-retour, .fil-puce { min-height: 44px; }
}
/* Une phrase d'aide ne touche plus les cartes qui la suivent (mission 7). */
.menus-aide + .menus-grille { margin-top: 24px; }