/* =========================================================================
   CORE.CSS — style commun à tous les jeux du "Bureau"
   Variables de couleurs, composants réutilisés (cartes, badges, boutons,
   cases-lettres, clavier visuel, effets d'étoiles).
   ========================================================================= */
:root{
  /* Teintes "vives" : décor, pastilles, fonds larges. Elles restent joyeuses,
     mais plusieurs sont trop claires pour porter du texte blanc. */
  --bleu:#2d7ff9;
  --vert:#33c15a;
  --rouge:#ff4d4d;
  --jaune:#ffcc33;
  --violet:#8b5cf6;
  --orange:#ff8a3d;
  --rose:#ff6fae;

  /* Teintes "encre" : mêmes couleurs, assombries juste ce qu'il faut pour que
     du texte blanc gras reste lisible (≥ 4.5:1, seuil AA texte normal).
     À utiliser DÈS QU'IL Y A DU TEXTE BLANC dessus — boutons, badges.
     Avant correction : blanc sur --vert = 2,36:1, sur --orange = 2,35:1,
     sur --rose = 2,58:1. Une enfant qui déchiffre encore devinait le mot
     au lieu de le lire. */
  --bleu-encre:#1c62cc;
  --vert-encre:#1f7c39;
  --rouge-encre:#cc2727;
  --violet-encre:#6d3fd4;
  --orange-encre:#b8551a;
  --rose-encre:#c72e73;

  --fond:#eaf4ff;
  --carte:#ffffff;
  --texte:#1b1b2f;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; min-height:100%;
  background:var(--fond);
  font-family:"Lexend","Arial",sans-serif;
  color:var(--texte);
  -webkit-user-select:none; user-select:none;
}

/* ---------- Structure commune ---------- */
.app{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-height:100vh; padding:16px; gap:10px;
}
header.entete{
  width:100%; max-width:960px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  background:var(--carte); border-radius:20px; padding:12px 24px;
  box-shadow:0 6px 0 rgba(0,0,0,0.08);
}
/* Le lien "🏠 Bureau" est en position:fixed : sous ~840px de large il venait
   se poser sur le <h1> du jeu. On lui réserve une gouttière à gauche plutôt
   que de le déplacer, pour qu'il reste toujours au même endroit à l'écran. */
@media (max-width:840px){
  header.entete{ padding-left:clamp(120px,17vw,150px); }
}
header.entete h1{ font-size:clamp(20px,3vw,32px); margin:0; display:flex; align-items:center; gap:10px; }
.badges{ display:flex; gap:12px; flex-wrap:wrap; font-size:clamp(14px,2vw,20px); font-weight:700; }
.badge{ background:var(--jaune); color:var(--texte); border-radius:14px; padding:6px 14px; white-space:nowrap; }
.badge.niveau{ background:var(--violet-encre); color:#fff; }
.badge.score{ background:var(--vert-encre); color:#fff; }

main.zone-jeu{
  flex:1; width:100%; max-width:960px;
  background:var(--carte); border-radius:28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; padding:24px; position:relative; overflow:hidden;
  box-shadow:0 8px 0 rgba(0,0,0,0.08);
}

/* ---------- Boutons ronds et colorés ---------- */
button, .bouton{
  font-family:inherit; font-weight:800; font-size:clamp(15px,2vw,20px);
  border:none; border-radius:18px; padding:14px 22px; cursor:pointer;
  color:#fff; box-shadow:0 5px 0 rgba(0,0,0,0.15);
  transition:transform .08s ease;
}
button:active, .bouton:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,0.15); }
/* Les boutons portent tous du texte blanc : ils utilisent donc les teintes
   "encre", jamais les teintes vives (voir le bloc :root). */
.btn-bleu{ background:var(--bleu-encre); }
.btn-vert{ background:var(--vert-encre); }
.btn-violet{ background:var(--violet-encre); }
.btn-orange{ background:var(--orange-encre); }
.btn-rouge{ background:var(--rouge-encre); }
.actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; }

/* ---------- Geste destructeur, volontairement discret --------------------
   "Effacer mes étoiles" ne doit PAS ressembler à "rejouer" : même taille et
   même couleur que les autres boutons, c'était le piège n°1 du jeu — le
   libellé promettait "recommencer une partie" et vidait le score, derrière
   une boîte de confirmation qu'une enfant de 6 ans ne sait pas lire. */
.lien-effacer{
  background:none; border:none; box-shadow:none; padding:6px 10px;
  color:#7c85a8; font-size:13px; font-weight:700; text-decoration:underline;
  cursor:pointer;
}
.lien-effacer:hover{ color:var(--rouge-encre); }
.lien-effacer:active{ transform:none; box-shadow:none; }

/* ---------- Cases de lettres réutilisées par les jeux de mots ---------- */
.mot{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.lettre-case{
  width:clamp(44px,8vw,72px); height:clamp(54px,9vw,84px);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(26px,5vw,46px); font-weight:800;
  border-radius:14px; background:#f0f2ff;
  border:4px solid #cfd6ff;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.lettre-case.visible{ background:#e4f7ea; border-color:var(--vert); color:var(--texte); }
.lettre-case.trou{ background:#fff7d6; border-color:var(--jaune); color:transparent; }
.lettre-case.trou.actif{ border-color:var(--bleu); box-shadow:0 0 0 4px rgba(45,127,249,0.25); }
.lettre-case.succes{ animation:pop-vert .4s ease; background:#d3f8dd; border-color:var(--vert); }
.lettre-case.erreur{ animation:secoue .35s ease; border-color:var(--rouge); }
@keyframes pop-vert{ 0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);} }
@keyframes secoue{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }

.message{ min-height:40px; font-size:clamp(18px,3vw,28px); font-weight:700; color:var(--bleu-encre); text-align:center; }

/* ---------- Clavier AZERTY visuel d'aide ---------- */
.clavier{ display:flex; flex-direction:column; gap:6px; align-items:center; margin-top:6px; }
.rangee{ display:flex; gap:6px; }
/* Les touches plafonnaient à 42 px : juste sous les 44 px recommandés pour une
   cible tactile, et beaucoup de Chromebooks ont un écran tactile. On monte à
   46 px et on relève le plancher, quitte à ce que le clavier passe sur plus de
   lignes sur un écran étroit. */
.touche{
  min-width:clamp(34px,4.6vw,46px); height:clamp(34px,4.6vw,46px);
  display:flex; align-items:center; justify-content:center;
  background:#dfe6f7; border-radius:8px; font-weight:700;
  font-size:clamp(13px,1.9vw,17px); color:#333; border:2px solid #c3cdea;
  cursor:pointer;
  touch-action:manipulation;   /* supprime le délai de 300 ms au tapotement */
}
.touche.cible{ background:var(--jaune); border-color:#e0ac00; color:#000; animation:pulse 1s infinite; }
@keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }

/* ---------- Étoiles de victoire ---------- */
.etoile-vole{ position:absolute; font-size:40px; pointer-events:none; animation:monte 1s ease-out forwards; }
@keyframes monte{
  0%{ transform:translateY(0) scale(0.6) rotate(0deg); opacity:1; }
  100%{ transform:translateY(-160px) scale(1.4) rotate(30deg); opacity:0; }
}

/* ---------- Cadre photo mutualisé (jeux à photos réelles) ---------------
   Utilisé avec Bureau.afficherPhotoAvecSecours() : jamais d'émoji, un
   secours textuel élégant s'affiche si la photo est indisponible. */
.cadre-media{
  width:min(80vw,300px); height:min(56vw,220px);
  border-radius:18px; overflow:hidden; position:relative;
  background:#dfe6f7 linear-gradient(135deg,#dfe6f7 25%,#eef1fb 25%,#eef1fb 50%,#dfe6f7 50%,#dfe6f7 75%,#eef1fb 75%);
  background-size:28px 28px;
  box-shadow:0 6px 0 rgba(0,0,0,0.12); border:3px solid #cfd6ff;
  display:flex; align-items:center; justify-content:center;
}
.cadre-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.secours-chargement{ font-size:14px; font-weight:700; color:#5a6a99; }
.secours-texte{
  font-size:clamp(18px,3.4vw,26px); font-weight:800; color:var(--texte);
  text-align:center; padding:0 16px;
}

/* ---------- Lecture enrichie (sons colorés, muettes, arcs de syllabes) --- */
.texte-enrichi{
  font-size:clamp(22px,4vw,32px); line-height:2.4; text-align:center;
  font-family:"Lexend","Arial",sans-serif;
}
.mot-enrichi{ display:inline-flex; margin:0 2px; }
.syllabe{ position:relative; padding-bottom:11px; }
.syllabe::after{
  content:""; position:absolute; left:2px; right:2px; bottom:2px; height:9px;
  border-bottom:3px solid #b9c2e8; border-radius:0 0 50% 50%;
}
.lettre-normal{ color:#3a3a4a; }
.lettre-son{ color:var(--bleu); font-weight:800; }
.lettre-muet{ color:#c7cbe0; }
.legende-lecture{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  font-size:13px; font-weight:700; color:#5a6a99;
}
.legende-lecture span{ display:flex; align-items:center; gap:5px; }
.legende-lecture .pastille{ width:14px; height:14px; border-radius:50%; display:inline-block; }

/* ---------- Mouvement réduit -------------------------------------------
   Le clavier d'aide fait pulser sa touche cible en boucle, indéfiniment, dans
   six jeux. Pour un profil TDAH ou hypersensible, une animation permanente en
   périphérie est un aspirateur à attention. On respecte donc le réglage
   système "réduire les animations" : les retours ponctuels (succès, erreur)
   restent visibles, seules les boucles infinies s'arrêtent. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .touche.cible{ animation:none; box-shadow:0 0 0 4px rgba(224,172,0,0.45); }
  .lettre-case.succes, .lettre-case.erreur{ animation:none; }
}

/* ---------- Lien retour au bureau ---------- */
.retour-bureau{
  position:fixed; top:14px; left:14px; z-index:10;
  background:var(--carte); border-radius:14px; padding:8px 14px;
  font-weight:800; text-decoration:none; color:var(--texte);
  box-shadow:0 4px 0 rgba(0,0,0,0.12); font-size:clamp(13px,1.8vw,16px);
}