/* =====================================================================
   Volet jeu : la coquille d'une manche a choix, chronometree.
   Se pose sur socle.css, dont il reprend les variables, .card, .btn, .chip.

   Il ne reprend pas atelier.css : un jeu ne se lit pas comme un atelier.
   Les propositions sont grandes et cliquables au pouce, le chrono occupe
   la largeur, et le devoilement doit se lire d'un coup d'oeil. Ce qui est
   commun aux deux volets vit dans le socle.

   Accent vert pour ce qui est juste, orange de signal pour ce qui est rate
   et pour le chrono qui s'epuise. Aucune autre couleur.
   ===================================================================== */

.jeu{max-width:820px;margin:0 auto;padding:30px 0 0}
.jeu .crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--ink3);margin:0 0 6px}
.jeu .niveau{font-size:.78rem;color:var(--ink3);margin:0 0 10px;line-height:1.55;
  padding-left:9px;border-left:2px solid var(--line)}
.jeu h1{font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.2rem);letter-spacing:-.024em;
  line-height:1.12;font-weight:670;margin:8px 0 0}
.jeu h2{font-size:1.2rem;letter-spacing:-.015em;font-weight:640;margin:0 0 10px}
.jeu h3{font-size:1rem;font-weight:620;margin:30px 0 10px}
.jeu .lede{margin:12px 0 0;max-width:62ch;color:var(--ink2);font-size:.98rem}

/* en-tête : la marque du site, puis le nom du jeu. Le bloc `.brand` et son
   sous-titre viennent du socle, pour être identiques à ceux de l'accueil.

   LA MARQUE CLIQUE, et ramène à la page de garde. Elle ne le faisait pas,
   au motif que la page devait garder une sortie unique en pied. Cette règle
   vient du jardin clos des cours, où elle a un sens : on n'en sort que par
   un acte volontaire. Un jeu du volet praticien n'est pas un jardin clos,
   et une marque de site inerte se paie en clics perçus comme cassés : c'est
   le premier endroit où l'on clique pour rentrer. La sortie du pied reste,
   elle est désormais la seconde. */
.hd .brand{color:inherit;text-decoration:none;border-radius:8px;
  transition:opacity .15s}
.hd .brand:hover{opacity:.78}
.hd .brand:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.hd .sepv{width:1px;height:26px;background:var(--line2);flex:none;margin:0 2px}

/* en-tete : la barre porte la part de bonnes reponses */
.prog{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.prog .bar{width:120px;height:5px;border-radius:99px;background:var(--surf2);overflow:hidden}
.prog .bar i{display:block;height:100%;background:var(--ac);border-radius:99px;
  transition:width .3s;width:0}
.prog span{font-family:var(--mono);font-size:.7rem;color:var(--ink3);white-space:nowrap}
.hd .cnom{display:flex;flex-direction:column;min-width:0}
.hd .cnom b{font-size:.95rem;font-weight:640;letter-spacing:-.01em;white-space:nowrap}
.hd .cnom small{font-family:var(--mono);font-size:.64rem;color:var(--ink3);
  letter-spacing:.12em;text-transform:uppercase}

/* avant la premiere manche : regle du jeu, notations, ce qui est mesure */
.avant{margin:26px 0 0;padding:18px 20px}
.avant h2{font-size:.98rem;margin:0 0 10px}
.avant p{margin:0 0 10px;font-size:.9rem;color:var(--ink2);line-height:1.65;max-width:66ch}
.avant p:last-child{margin-bottom:0}
.avant dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;
  font-size:.87rem;color:var(--ink2)}
.avant dt{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.avant dd{margin:0}

/* l'accueil : les parcours, puis la série mêlée */
#accueil{margin:34px 0 0}
#accueil h2{font-size:1.15rem;margin:0 0 6px}
#accueil .sous{margin:0 0 18px;font-size:.92rem;color:var(--ink2);max-width:68ch;
  line-height:1.65}
.parcours{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.parc{display:grid;gap:5px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surf);color:var(--ink);cursor:pointer;
  font:inherit;text-align:left;transition:border-color .15s,background .15s}
.parc:hover:not(:disabled){border-color:var(--ac);background:var(--ac-t)}
.parc b{font-size:1rem;letter-spacing:-.01em}
.parc .sd{font-size:.83rem;color:var(--ink2);line-height:1.5}
.parc .etat{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin-top:4px}
.parc.avenir{opacity:.5;cursor:default}
.parc:disabled{cursor:default}
.melee{margin:14px 0 0;padding:18px 20px}
.melee h3{margin:0 0 6px;font-size:1rem}
.melee p{margin:0 0 14px;font-size:.9rem;color:var(--ink2);line-height:1.65;max-width:68ch}

/* la manche */
#manche{margin:30px 0 0}
.rang-haut{display:flex;justify-content:flex-end;align-items:center;gap:9px;margin:0 0 8px}
.donnees{font-size:.94rem;color:var(--ink2);margin:0 0 16px;max-width:68ch;line-height:1.65}
.question{font-size:1.06rem;font-weight:580;line-height:1.45;margin:20px 0 12px;max-width:62ch}
.planche{background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px;
  overflow-x:auto}
.planche svg{display:block;min-width:520px}
.legende{font-size:.79rem;color:var(--ink3);margin:8px 0 0;max-width:66ch}

/* chrono */
.chrono{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.chrono .cbar{flex:1;height:7px;border-radius:99px;background:var(--surf2);overflow:hidden}
.chrono .cbar i{display:block;height:100%;width:100%;background:var(--ac);border-radius:99px}
.chrono .cbar.court i{background:var(--sig)}
.chrono .csec{font-family:var(--mono);font-size:.86rem;color:var(--ink3);
  min-width:2.4ch;text-align:right;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.chrono .cbar i{transition:none}}

/* les quatre propositions */
.opts{display:grid;gap:9px}
.opts.gros{grid-template-columns:1fr 1fr}
/* une question de reconnaissance porte des phrases, pas des nombres :
   une seule colonne, et le texte aligné à gauche */
.opts.texte{grid-template-columns:1fr}
.opts.texte .opt b{font-size:.92rem;font-weight:520;line-height:1.5}
.opt{display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--line);
  border-radius:11px;background:var(--bg2);cursor:pointer;text-align:left;
  color:var(--ink);font-family:inherit;transition:.16s}
.opt b{font-size:1.05rem;font-weight:620;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.opt:hover:not(:disabled){border-color:var(--ink3)}
.opt:disabled{cursor:default;opacity:.6}
.opt .k{font-family:var(--mono);font-size:.72rem;color:var(--ink3);border:1px solid var(--line2);
  border-radius:6px;width:22px;height:22px;display:grid;place-items:center;flex:none}
.opt.vrai{border-color:var(--ac);background:var(--ac-t);opacity:1}
.opt.vrai .k{border-color:var(--ac);color:var(--ac)}
.opt.faux{border-color:var(--sig);background:var(--sig-t);opacity:1}
.opt.faux .k{border-color:var(--sig);color:var(--sig)}

.rang{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0}
.btn-mince{font-size:.79rem;padding:6px 11px;color:var(--ink3)}
.btn-ac{border-color:var(--ac);color:var(--ac)}
.btn-ac:hover{background:var(--ac-t)}
.btn:disabled{opacity:.55;cursor:default;border-color:var(--line);color:var(--ink3)}

/* devoilement */
.devoile{padding:20px;margin:22px 0 0;position:relative;overflow:hidden}
.devoile::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--ac)}
.devoile.no::before{background:var(--sig)}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.tuile{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.tuile .e{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.tuile b{font-size:1.05rem;font-weight:620;letter-spacing:-.01em}
.verdict{margin:16px 0 0;font-size:.95rem;font-weight:560}
.devoile.ok .verdict{color:var(--ac)}
.devoile.no .verdict{color:var(--sig)}
/* le diagnostic nomme le calcul suivi ; le retour explique le juste */
.diag{margin:14px 0 0;padding:0 0 0 14px;border-left:2px solid var(--sig);
  font-size:.93rem;color:var(--ink);line-height:1.7;max-width:66ch}
.diag-2{margin:14px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line2);
  font-size:.86rem;color:var(--ink3);line-height:1.65;max-width:66ch}
.retour{margin:14px 0 0;font-size:.93rem;color:var(--ink2);line-height:1.7;max-width:66ch}
.repere{margin:12px 0 0;padding:11px 14px;border-left:2px solid var(--ac);
  background:var(--bg2);border-radius:0 8px 8px 0;font-size:.9rem;color:var(--ink);
  line-height:1.6;max-width:66ch}

/* le corrigé détaillé, replié par défaut */
.corrige{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.corrige > .btn{color:var(--ac);border-color:var(--line2)}
.corrige > .btn:hover{border-color:var(--ac)}
.corrige-in{margin:14px 0 0}
.corrige-in h3{margin:16px 0 8px;font-size:.95rem}
.corrige-in .planche{margin:0 0 12px}
.corrige-in .planche svg{min-width:560px}

/* bilan */
#bilan{margin:30px 0 0}
.lecture{margin:18px 0 0;font-size:.93rem;color:var(--ink2);line-height:1.68;max-width:66ch}
.lecture-2{margin:10px 0 0;font-size:.85rem;color:var(--ink3);max-width:66ch;line-height:1.6}
.tablo{overflow-x:auto;margin:14px 0 0}
table.releve{width:100%;border-collapse:collapse;font-size:.85rem}
table.releve th,table.releve td.num{white-space:nowrap}
table.releve th{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);font-weight:500;padding:8px 10px;
  border-bottom:1px solid var(--line2);background:var(--surf2)}
table.releve td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink2)}
table.releve td.num{font-family:var(--mono);font-size:.82rem;text-align:right}
table.releve tr.no td{color:var(--sig)}

/* porte unique avant toute perte de travail */
.porte-fond{position:fixed;inset:0;z-index:200;background:rgba(4,8,12,.72);
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.porte{max-width:520px;padding:24px;box-shadow:var(--sh)}
.porte h2{font-size:1.05rem;margin:0 0 10px}
.porte p{margin:0 0 10px;font-size:.9rem;color:var(--ink2);line-height:1.6}
.porte .porte-q{color:var(--ink);font-weight:560}
.porte-boutons{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}

.afoot{border-top:1px solid var(--line);background:var(--bg2);margin-top:60px;padding:26px 0}
.afoot .in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:space-between;font-size:.83rem;color:var(--ink3)}
.afoot a.sortie{color:var(--ink2);border:1px solid var(--line2);border-radius:9px;padding:7px 12px}
.afoot a.sortie:hover{color:var(--ac);border-color:var(--ac)}

@media (max-width:700px){
  /* l'en-tête ne tient plus la marque ET le nom du jeu : c'est le nom du
     jeu qui s'efface, la marque du site reste */
  .hd .sepv,.hd .cnom{display:none}
}
@media (max-width:620px){
  .opts.gros{grid-template-columns:1fr}
  .prog .bar{width:70px}
}

/* ------------------------------------------------------------------
   Designation sur la figure. La zone de reponse n'est plus une rangee
   de boutons mais la planche elle-meme : ce bloc ne porte donc que le
   geste qui engage, et le rappel de ce qui est vise tant que rien
   n'est pose.
   ------------------------------------------------------------------ */
.viser{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;
  padding:12px 14px;border:1px solid var(--line2);border-radius:11px;background:var(--surf2)}
.viser-dit{margin:0;flex:1 1 260px;font-size:.86rem;color:var(--ink2);line-height:1.5}
.zones-clavier{display:flex;gap:8px;flex-wrap:wrap}
.opt-zone{min-width:46px;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;
  background:var(--surf);color:var(--ink);font-family:var(--mono);font-size:.95rem;
  cursor:pointer}
.opt-zone:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
.opt-zone:disabled{cursor:default;opacity:.75}
.opt-zone.vrai{border-color:var(--ok,#1a7f5a);color:var(--ok,#1a7f5a);font-weight:600;opacity:1}
.opt-zone.faux{border-color:var(--sig);color:var(--sig);opacity:1}

@media (max-width:620px){
  .viser{flex-direction:column;align-items:stretch}
}

/* ------------------------------------------------------------------
   Rappel replie. Les cartes d'entree se lisent avant de jouer ; une
   fois en manche elles ne sont plus qu'un bandeau d'une ligne, qui
   s'ouvre quand une notation echappe. Deployees en permanence, elles
   repoussaient la manche sous la ligne de flottaison a chaque tour.
   ------------------------------------------------------------------ */
details.rappel{margin:0 0 22px}
details.rappel>summary{cursor:pointer;list-style:none;padding:11px 15px;
  border:1px solid var(--line2);border-radius:11px;background:var(--surf2);
  color:var(--ink2);font-size:.86rem;user-select:none}
details.rappel>summary::-webkit-details-marker{display:none}
details.rappel>summary::before{content:"\25B8\00a0\00a0";color:var(--ac)}
details.rappel[open]>summary::before{content:"\25BE\00a0\00a0"}
details.rappel[open]>summary{margin-bottom:18px}
details.rappel>summary:hover{border-color:var(--ac);color:var(--ac)}
details.rappel>summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ==================================================================
   EMPREINTE : la zone de construction.

   Les cinq boutons de liaison sont alignes sur les cinq positions de la
   poutre, aux quarts, et la rangee occupe exactement la largeur utile de
   la planche : le joueur doit pouvoir rapporter le bouton qu'il presse a
   l'endroit de la courbe qu'il regarde. C'est pourquoi la rangee est en
   grille de cinq colonnes egales et non en flex, qui aurait laisse la
   largeur des libelles decider des positions.
   ================================================================== */
.batir{margin-top:14px}
.batir .apercu{margin:0 0 12px}
.liaisons{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.liaison{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 4px;border:1px solid var(--line2);border-radius:10px;
  background:var(--surf);color:var(--ink2);cursor:pointer;line-height:1.2}
.liaison .g{font-size:1.25rem;line-height:1}
.liaison small{font-family:var(--mono);font-size:.7rem;color:var(--ink3)}
.liaison:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
.liaison.pose{border-color:var(--ac);background:var(--ac-t);color:var(--ac)}
.liaison.impose{cursor:default;opacity:.75;border-style:dashed}
.liaison:disabled{cursor:default}
.palette{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.opt-charge{padding:10px 12px;border:1px solid var(--line2);border-radius:10px;
  background:var(--surf);color:var(--ink2);font-size:.85rem;text-align:left;
  cursor:pointer;line-height:1.35}
.opt-charge:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
.opt-charge.choisie{border-color:var(--ac);background:var(--ac-t);color:var(--ac);
  font-weight:560}
.opt-charge:disabled{cursor:default;opacity:.7}
@media (max-width:620px){
  .liaison{padding:9px 2px}
  .liaison small{font-size:.62rem}
  .palette{grid-template-columns:1fr}
}

/* ==================================================================
   SONDE : poser un profil de sol, axe par axe.

   Une ligne par grandeur, et les valeurs alignees dessus. La rangee est
   en grille a colonnes egales et non en flex, pour la meme raison que
   les liaisons d'EMPREINTE : la largeur des libelles ne doit pas
   decider des positions, sans quoi l'oeil ne retrouve plus la meme
   valeur d'une ligne a l'autre.

   L'apercu est SOUS les axes, et il ne montre que la colonne de sol
   posee, jamais la courbe qu'elle produirait. La regle du jeu le dit,
   et c'est ce qui separe une lecture d'un tatonnement.
   ================================================================== */
.sonde-pose{margin-top:14px;display:grid;gap:10px}
.sonde-axe{display:grid;grid-template-columns:minmax(120px,1.35fr) repeat(4,1fr);
  gap:7px;align-items:center}
.sonde-axe.fige{opacity:.72}
.sonde-nom{font-size:.82rem;color:var(--ink2);line-height:1.25}
.sonde-val{padding:10px 4px;border:1px solid var(--line2);border-radius:10px;
  background:var(--surf);color:var(--ink2);font-family:var(--mono);
  font-size:.78rem;cursor:pointer;text-align:center}
.sonde-val:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
.sonde-val.actif{border-color:var(--ac);background:var(--ac-t);color:var(--ac);
  font-weight:600}
.sonde-val:disabled{cursor:default}
.sonde-axe.fige .sonde-val{border-style:dashed}
.sonde-valider{margin-top:4px;padding:12px 16px;border:1px solid var(--ac);
  border-radius:10px;background:var(--ac-t);color:var(--ac);font-weight:600;
  font-size:.92rem;cursor:pointer}
.sonde-valider:disabled{cursor:default;opacity:.6}
.sonde-apercu{margin-top:12px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:6px}
@media (max-width:620px){
  .sonde-axe{grid-template-columns:repeat(4,1fr)}
  .sonde-nom{grid-column:1 / -1;font-size:.78rem}
}

/* ==================================================================
   Les animations pedagogiques de SONDE.

   Pilotees par un curseur, jamais en lecture automatique : le rendu
   reste juste a l'arret, a n'importe quelle position, donc le reglage
   de mouvement reduit du systeme n'a rien a couper et la regle du site
   sur les figures continue de s'appliquer.

   La planche est sur fond blanc dans les deux themes, comme toutes les
   figures du site. La commande, elle, suit le theme : c'est une
   commande d'interface et non une figure.
   ================================================================== */
.anim{margin:12px 0 0}
.anim-planche{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:6px;overflow-x:auto}
.anim-cmd{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.anim-nom{display:flex;align-items:center;gap:12px;flex:1 1 340px;
  font-size:.82rem;color:var(--ink2)}
.anim-curseur{flex:1 1 160px;min-width:140px;accent-color:var(--ac);cursor:pointer}
.anim-lu{font-size:.8rem;color:var(--ac);font-weight:560;flex:0 1 auto}
@media (max-width:620px){
  .anim-nom{flex:1 1 100%}
  .anim-cmd{gap:8px}
}