/* ============================================================
   L'HABILLAGE COMMUN DES QUÊTES

   Trois choses manquaient à tous les jeux :
   1. on ne voyait jamais l'INTÉRIEUR de la machine pendant qu'on joue ;
   2. rien ne reliait le jeu à la vraie IA dans le même écran ;
   3. aucun compteur ne donnait de poids à ce que l'enfant venait de faire.

   Ce fichier fournit ces trois briques, plus l'en-tête d'épreuve.
   Chaque quête garde son moteur et ses couleurs propres, définies par
   --accent et --accent-2 posées sur le conteneur .quete.
   ============================================================ */

.quete{
  --accent: var(--teal-clair, #5eead4);
  --accent-2: var(--teal, #2dd4bf);
  --sombre: rgba(13,20,45,.6);
  --trait: rgba(148,163,184,.16);
}

/* ---- en-tête d'épreuve ---- */
.epreuve{
  display:flex; align-items:center; gap:16px;
  font-family:'Nunito',sans-serif; font-weight:900;
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.epreuve::before{
  content:''; width:46px; height:2px; flex-shrink:0;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.jeu-titre{
  font-family:'Fredoka','Nunito',sans-serif; font-weight:600;
  font-size:clamp(1.9rem,4.6vw,3.1rem); line-height:1.1; color:#fff;
  margin-bottom:14px; text-wrap:balance;
}
.jeu-titre .glow{
  color:var(--accent);
  text-shadow:0 0 22px color-mix(in srgb, var(--accent) 55%, transparent),
              0 0 70px color-mix(in srgb, var(--accent) 28%, transparent);
}
.jeu-intro{
  font-size:1.04rem; font-weight:600; line-height:1.6;
  color:rgba(224,231,255,.78); max-width:66ch; margin-bottom:30px;
}
.jeu-intro .cle{ color:var(--accent); font-weight:800; }
.jeu-intro .cle-2{ color:var(--accent-2); font-weight:800; }

/* ---- la scène : le jeu à gauche, la machine à droite ---- */
.jeu-grille{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start; }
@media(max-width:860px){ .jeu-grille{ grid-template-columns:1fr; } }

.panneau{
  background:var(--sombre);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--trait); border-radius:22px; padding:24px 26px;
}
.panneau + .panneau{ margin-top:18px; }
.panneau h3{
  font-family:'Fredoka','Nunito',sans-serif; font-weight:600; font-size:1.16rem;
  color:#fff; margin-bottom:6px; display:flex; align-items:center; gap:10px;
}
.panneau h3 .pic{ width:1.15em; height:1.15em; color:var(--accent); }
.panneau .sous{ font-size:.9rem; font-weight:600; color:rgba(224,231,255,.6); margin-bottom:16px; }

/* ---- les barres de probabilité : l'intérieur de la machine ---- */
.probas{ display:flex; flex-direction:column; gap:13px; }
.proba .ligne{
  display:flex; justify-content:space-between; align-items:baseline;
  font-weight:800; font-size:.94rem; margin-bottom:5px;
}
.proba .mot{ color:var(--encre,#e8ecf8); }
.proba .pct{ color:rgba(224,231,255,.6); font-variant-numeric:tabular-nums; }
.proba .piste{
  height:11px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden;
}
/* La jauge occupe toute la piste et se dévoile par un transform : c'est le GPU
   qui travaille, pas le moteur de mise en page. La piste découpe les coins. */
.proba .jauge{
  height:100%; width:100%; transform:scaleX(0); transform-origin:left center;
  transition:transform .85s cubic-bezier(.22,1,.36,1); will-change:transform;
}
/* du plus probable au moins probable : vert d'eau → ambre → orangé */
.proba:nth-child(1) .jauge{ background:linear-gradient(90deg,#2dd4bf,#34d399); }
.proba:nth-child(2) .jauge{ background:linear-gradient(90deg,#34d399,#84cc16); }
.proba:nth-child(3) .jauge{ background:linear-gradient(90deg,#a3e635,#facc15); }
.proba:nth-child(4) .jauge{ background:linear-gradient(90deg,#facc15,#fb923c); }
.proba:nth-child(5) .jauge{ background:linear-gradient(90deg,#fb923c,#f87171); }
.proba.tiree .mot{ color:var(--accent); }
.proba.tiree .piste{ box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---- le panneau de théorie : du jeu à la vraie IA ---- */
.theorie{ border-color:color-mix(in srgb, var(--accent) 26%, transparent); }
.theorie h3{ color:var(--accent); }
.theorie ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.theorie li{
  position:relative; padding-left:20px;
  font-size:.95rem; font-weight:600; line-height:1.55; color:rgba(224,231,255,.8);
}
.theorie li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.theorie b{ color:var(--accent); font-weight:800; }
.theorie .chiffre{
  display:inline-block; font-family:'Fredoka',sans-serif; font-weight:600;
  color:var(--ambre,#fbbf24); background:rgba(251,191,36,.12);
  border:1px solid rgba(251,191,36,.35); border-radius:8px;
  padding:1px 9px; margin:0 2px;
}

/* ---- les compteurs ---- */
.compteurs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px; }
.compteur .val{
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.9rem; line-height:1;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.compteur .lib{
  display:block; margin-top:5px; font-size:.68rem; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(224,231,255,.5);
}

/* ---- la sortie de la machine ---- */
.sortie{
  min-height:78px; display:flex; align-items:center;
  font-size:1.08rem; font-weight:700; color:rgba(224,231,255,.45); font-style:italic;
}
.sortie.pleine{ color:#fff; font-style:normal; }
.sortie .neuf{ color:var(--accent); }

@media (prefers-reduced-motion:reduce){
  .proba .jauge{ transition:none; }
}