/* =========================================================
   Jeux Clavier & Souris : feuille de style commune
   Couleurs légères et acidulées, gros textes, dark mode
   ========================================================= */

:root {
  --jcs-menthe:   #7de2c3;
  --jcs-citron:   #ffe066;
  --jcs-corail:   #ff9aa2;
  --jcs-lilas:    #c8a2ff;
  --jcs-ciel:     #8ecfff;
  --jcs-peche:    #ffc09f;

  --jcs-bg:       #fffdf7;
  --jcs-card:     #ffffff;
  --jcs-text:     #2f3640;
  --jcs-muted:    #6b7280;
  --jcs-border:   rgba(0, 0, 0, .08);
  --jcs-shadow:   0 6px 0 rgba(0, 0, 0, .08);

  --jcs-gauche:   var(--jcs-lilas);
  --jcs-droite:   var(--jcs-menthe);
}

html[data-theme="dark"] {
  --jcs-bg:       #1b1d2a;
  --jcs-card:     #262a3d;
  --jcs-text:     #f2f4ff;
  --jcs-muted:    #a9b0c8;
  --jcs-border:   rgba(255, 255, 255, .12);
  --jcs-shadow:   0 6px 0 rgba(0, 0, 0, .35);

  --jcs-menthe:   #4fd1a5;
  --jcs-citron:   #f5d33d;
  --jcs-corail:   #ff7f8a;
  --jcs-lilas:    #a97dff;
  --jcs-ciel:     #5fb8f5;
}

html, body {
  background: var(--jcs-bg);
  color: var(--jcs-text);
  font-family: "Trebuchet MS", "Comic Sans MS", Verdana, sans-serif;
  min-height: 100%;
}

/* ---------- Typographie enfant ---------- */
.jcs-title      { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--jcs-text); }
.jcs-subtitle   { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--jcs-muted); }
.jcs-big        { font-size: clamp(1.1rem, 2vw, 1.4rem); }

/* ---------- Navbar ---------- */
.jcs-navbar {
  /* La couleur de celui qui joue, posee par majAffichageProfil. Sans joueur
     inscrit, le bandeau garde ses couleurs de maison. */
  background: var(--jcs-navbar-fond,
               linear-gradient(90deg, var(--jcs-lilas), var(--jcs-ciel), var(--jcs-menthe)));
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  box-shadow: 0 4px 0 var(--jcs-border);
}
.jcs-navbar .jcs-brand {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 800;
  color: #2f3640;
  text-decoration: none;
  display: flex; align-items: center; gap: .5rem;
}
.jcs-navbar .jcs-spacer { flex: 1 1 auto; }
/* Tous les boutons de la barre a la meme taille : retour, drapeau, joueur et
   burger. C'est le bouton Menu qui sert d'etalon. Une hauteur commune, plutot
   qu'un calage sur le contenu : sinon le drapeau, l'avatar et le texte, qui
   n'ont pas la meme hauteur de ligne, donnaient trois boutons differents.
   La barre reduite des ateliers garde la sienne, plus petite (voir is-mini). */
.jcs-navbar .jcs-btn {
  font-size: 1.3rem;
  min-height: 3.1rem;
  padding-top: 0;
  padding-bottom: 0;
}
/* Le burger n'a plus que son trait : on le grossit pour qu'il pese autant a
   l'oeil que les mots voisins. La hauteur, elle, ne bouge pas. */
#jcs-burger-btn {
  font-size: 1.75rem;
  line-height: 1;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

/* Les boutons de la barre gardent leur fond d'origine : c'est le bandeau qui
   prend la couleur du joueur, pas eux. Leur fond etait translucide, donc il
   se teintait de ce qu'il y avait dessous : on l'opacifie. Et le texte reste
   sombre meme en theme sombre, car le bandeau, lui, est toujours clair. */
.jcs-navbar .jcs-btn.is-ghost,
html[data-theme="dark"] .jcs-navbar .jcs-btn.is-ghost {
  background: rgba(255, 255, 255, .92);
  color: #2f3640;
}

/* ---------- Boutons ---------- */
.jcs-btn {
  border: none;
  border-radius: 999px;
  padding: .75rem 1.4rem;
  font-size: clamp(.98rem, 1.7vw, 1.18rem);
  font-weight: 700;
  font-family: inherit;
  color: #2f3640;
  background: var(--jcs-citron);
  box-shadow: var(--jcs-shadow);
  cursor: pointer;
  transition: transform .1s ease, filter .15s ease;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.jcs-btn:hover  { filter: brightness(1.05); transform: translateY(-2px); }
.jcs-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.jcs-btn.is-menthe { background: var(--jcs-menthe); }
.jcs-btn.is-corail { background: var(--jcs-corail); }
.jcs-btn.is-lilas  { background: var(--jcs-lilas); }
.jcs-btn.is-ciel   { background: var(--jcs-ciel); }
.jcs-btn.is-peche  { background: var(--jcs-peche); }
.jcs-btn.is-ghost  { background: rgba(255,255,255,.55); }
html[data-theme="dark"] .jcs-btn.is-ghost { background: rgba(255,255,255,.15); color: var(--jcs-text); }
.jcs-btn:disabled  { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Cartes ---------- */
.jcs-card {
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 24px;
  padding: 1.4rem 1.3rem;
  box-shadow: var(--jcs-shadow);
  height: 100%;
  display: flex; flex-direction: column;
  transition: transform .15s ease;
}
.jcs-card:hover { transform: translateY(-4px); }
.jcs-card .jcs-emoji { font-size: 3rem; line-height: 1; }
.jcs-card h2 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); font-weight: 800; margin: .4rem 0; }
.jcs-card p  { color: var(--jcs-muted); font-size: clamp(1rem, 1.6vw, 1.12rem); flex: 1 1 auto; }
/* Le bouton d action ne doit jamais coller au texte : sur les cartes sans
   ligne de record (Mon petit Word), rien ne creait cet espace. */
.jcs-card > .jcs-btn { margin-top: 1.2rem; }
.jcs-card p + .jcs-btn { margin-top: 1.4rem; }

/* Statistique, surtout pas un bouton : pas de fond plein ni de pastille,
   juste un chiffre mis en avant sous un filet pointille. */
.jcs-badge {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  background: none;
  border: none;
  border-bottom: 3px dotted var(--jcs-border);
  border-radius: 0;
  padding: .15rem .1rem .35rem;
  color: var(--jcs-muted);
  font-weight: 700;
  font-size: clamp(.92rem, 1.5vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: default;
}
.jcs-badge strong {
  font-size: 1.6em;
  font-weight: 800;
  color: var(--jcs-text);
  letter-spacing: 0;
}

/* ---------- Barre de score ---------- */
.jcs-hud {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-bottom: 1.5rem;
}
.jcs-hud .jcs-stat {
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  padding: .55rem 1.2rem;
  text-align: center;
  min-width: 118px;
}
.jcs-hud .jcs-stat span { display: block; font-size: .92rem; color: var(--jcs-muted); font-weight: 700; }
.jcs-hud .jcs-stat strong { font-size: clamp(1.6rem, 2.8vw, 2rem); }

/* Pendant la partie, la barre se fait discrete : une ligne par case,
   l etiquette a cote du nombre, pour laisser la hauteur au jeu.
   L ecran de fin garde ses grandes cases. */
#ecran-jeu .jcs-hud { gap: .6rem; margin-bottom: .7rem; }
#ecran-jeu .jcs-hud .jcs-stat {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .2rem .95rem;
  border-width: 2px;
  border-radius: 999px;
  min-width: 0;
}
#ecran-jeu .jcs-hud .jcs-stat span { display: inline; font-size: .85rem; }
#ecran-jeu .jcs-hud .jcs-stat strong { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.3; }
#ecran-jeu .jcs-progress { height: 10px; }
@media (max-width: 520px) {
  #ecran-jeu .jcs-hud { gap: .35rem; }
  #ecran-jeu .jcs-hud .jcs-stat { padding: .15rem .6rem; gap: .3rem; }
  #ecran-jeu .jcs-hud .jcs-stat span { font-size: .75rem; }
}

/* ---------- Touches / lettres ---------- */
.jcs-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(62px, 11vw, 104px);
  height: clamp(62px, 11vw, 104px);
  border-radius: 22px;
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 800;
  text-transform: uppercase;
  background: var(--jcs-card);
  border: 4px solid var(--jcs-border);
  box-shadow: var(--jcs-shadow);
  color: var(--jcs-text);
}
.jcs-key.is-done  { background: var(--jcs-menthe); color: #2f3640; }
.jcs-key.is-wrong { background: var(--jcs-corail); animation: jcs-shake .3s; }
.jcs-key.is-idle  { opacity: .25; }

@keyframes jcs-shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-8px); }
  75%     { transform: translateX(8px); }
}
@keyframes jcs-pop {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.jcs-pop { animation: jcs-pop .25s ease-out; }

/* ---------- Panneaux gauche / droite (jeu 1) ---------- */
.jcs-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 640px) { .jcs-hands { grid-template-columns: 1fr; } }
.jcs-hand {
  border-radius: 28px;
  padding: 1.5rem 1rem;
  text-align: center;
  border: 5px dashed transparent;
}
.jcs-hand.is-left  { background: color-mix(in srgb, var(--jcs-gauche) 30%, transparent); }
.jcs-hand.is-right { background: color-mix(in srgb, var(--jcs-droite) 30%, transparent); }
.jcs-hand.is-active { border-color: var(--jcs-citron); }
.jcs-hand .jcs-hand-label { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 800; margin-bottom: .8rem; }

/* ---------- Mot à recopier (jeu 2) ---------- */
.jcs-word { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.jcs-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(44px, 7.5vw, 74px);
  height: clamp(56px, 9.5vw, 94px);
  border-radius: 16px;
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  font-weight: 800;
  background: var(--jcs-card);
  border: 4px solid var(--jcs-border);
  color: var(--jcs-text);
}
.jcs-letter.is-ok      { background: var(--jcs-menthe); color: #2f3640; border-color: transparent; }
.jcs-letter.is-current { border-color: var(--jcs-citron); transform: translateY(-6px); box-shadow: var(--jcs-shadow); }
.jcs-letter.is-error   { background: var(--jcs-corail); animation: jcs-shake .3s; }

/* ---------- Divers ---------- */
.jcs-center   { text-align: center; }
.jcs-hidden   { display: none !important; }
.jcs-progress {
  height: 22px; border-radius: 999px; overflow: hidden;
  background: var(--jcs-border);
}
.jcs-progress > div {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--jcs-menthe), var(--jcs-ciel));
  transition: width .3s ease;
}
.jcs-input {
  font-family: inherit; font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 700;
  padding: .7rem 1.2rem; border-radius: 999px;
  border: 3px solid var(--jcs-border);
  background: var(--jcs-card); color: var(--jcs-text);
}
.jcs-footer { color: var(--jcs-muted); padding: 2rem 1rem; text-align: center; font-size: .98rem; }

.jcs-btn.is-citron { background: var(--jcs-citron); }

/* ---------- Fenêtre « Qui joue ? » ---------- */
.jcs-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(24, 26, 40, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: jcs-fade .2s ease-out;
}
@keyframes jcs-fade { from { opacity: 0; } to { opacity: 1; } }

.jcs-modal-box {
  background: var(--jcs-card);
  color: var(--jcs-text);
  border: 5px solid var(--jcs-citron);
  border-radius: 28px;
  padding: 2rem 1.6rem;
  max-width: 620px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  text-align: center;
  box-shadow: 0 12px 0 rgba(0, 0, 0, .18);
  animation: jcs-pop .25s ease-out;
}
.jcs-modal-box .jcs-input { width: min(100%, 380px); text-align: center; }

/* La fenetre des joueurs est plus large que les autres, et tient en trois
   etages : une tete, un corps qui defile, et un pied qui ne bouge pas.
   Valider et annuler restent ainsi sous les yeux, quel que soit le defilement. */
.jcs-modal-box.is-joueurs {
  max-width: min(1100px, 96vw);
  display: flex;
  flex-direction: column;
  padding: 0;             /* chaque etage pose sa propre marge */
  overflow: hidden;       /* c est le corps qui defile, pas la boite */
}
.jcs-joueurs-tete  { flex: 0 0 auto; padding: 1.6rem 1.6rem .2rem; }
.jcs-joueurs-corps { flex: 1 1 auto; overflow-y: auto; padding: .6rem 1.6rem 1.2rem; }
.jcs-joueurs-pied {
  flex: 0 0 auto;
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  padding: 1rem 1.6rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 3px solid var(--jcs-border);
  background: var(--jcs-card);
}

.jcs-choix { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* Choix exclusifs presentes comme de vrais boutons radio : la pastille
   indique ce qui est selectionne, aucun bouton n est grise. */
.jcs-choix-btn {
  position: relative;
  border: 3px solid transparent;
  font-size: clamp(.92rem, 1.5vw, 1.05rem);
  padding: .5rem 1rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .10);
}
.jcs-choix-btn::before {
  content: "";
  flex: 0 0 auto;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(47, 54, 64, .45);
  box-sizing: border-box;
}
.jcs-choix-btn.is-choisi::before {
  border-color: #2f3640;
  background: radial-gradient(circle at center, #2f3640 0 42%, #fff 45% 100%);
}
.jcs-choix-btn.is-choisi {
  border-color: #2f3640;
  transform: translateY(-3px);
}

/* ---------- Chasse aux bulles ---------- */
.jcs-terrain {
  position: relative;
  height: min(62vh, 560px);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--jcs-ciel) 35%, transparent),
              color-mix(in srgb, var(--jcs-menthe) 30%, transparent));
  border: 5px solid var(--jcs-border);
  touch-action: manipulation;
  cursor: crosshair;
  /* Le terrain se clique, il ne se lit pas : une souris qui glisse ne doit
     pas surligner l emoji d une bulle. */
  user-select: none; -webkit-user-select: none;
}
.jcs-bulle {
  position: absolute;
  bottom: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .75);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.25) 60%,
              rgba(255,255,255,.05) 100%), var(--jcs-card);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
  cursor: pointer;
  padding: 0;
  animation-name: jcs-monte;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.jcs-bulle.is-bombe { background: radial-gradient(circle at 32% 28%, #7b7f92, #2f3440); border-color: #1d2029; }
.jcs-bulle.is-eclatee { animation: jcs-eclate .25s ease-out forwards; }

/* La course est calculee en JS : la bulle traverse exactement le terrain,
   donc la duree choisie correspond au temps reellement visible. */
@keyframes jcs-monte {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(calc(-1 * var(--jcs-course, 120vh))) rotate(12deg); }
}
@keyframes jcs-eclate {
  to { transform: scale(1.7); opacity: 0; }
}

/* ---------- Glisse-depose ---------- */
.jcs-atelier { display: grid; gap: 1.5rem; }
.jcs-reserve {
  min-height: 150px;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center;
  padding: 1.2rem;
  border-radius: 24px;
  border: 5px dashed var(--jcs-border);
  background: var(--jcs-card);
}
.jcs-paniers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
.jcs-panier {
  border-radius: 24px;
  padding: 1.2rem .8rem;
  text-align: center;
  border: 5px solid transparent;
  background: color-mix(in srgb, var(--jcs-lilas) 25%, transparent);
  min-height: 170px;
  transition: transform .12s ease, border-color .12s ease;
}
.jcs-panier:nth-child(2) { background: color-mix(in srgb, var(--jcs-menthe) 28%, transparent); }
.jcs-panier:nth-child(3) { background: color-mix(in srgb, var(--jcs-peche) 32%, transparent); }
.jcs-panier.is-survole { border-color: var(--jcs-citron); transform: scale(1.04); }
.jcs-panier .jcs-panier-titre { font-size: clamp(1.1rem, 1.9vw, 1.35rem); font-weight: 800; margin-bottom: .4rem; }
.jcs-panier .jcs-panier-emoji { font-size: 2.5rem; line-height: 1; }
.jcs-panier .jcs-panier-compte { font-size: 1rem; color: var(--jcs-muted); font-weight: 700; }

.jcs-objet {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem;
  min-width: 118px;
  padding: .7rem 1rem;
  border-radius: 20px;
  background: var(--jcs-card);
  border: 4px solid var(--jcs-border);
  box-shadow: var(--jcs-shadow);
  font-size: clamp(1rem, 1.7vw, 1.18rem); font-weight: 700;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.jcs-objet .jcs-objet-emoji { font-size: 2.3rem; line-height: 1; }
.jcs-objet.is-attrape {
  position: fixed; z-index: 80; margin: 0;
  cursor: grabbing;
  transform: scale(1.12) rotate(-3deg);
  pointer-events: none;
  box-shadow: 0 14px 24px rgba(0, 0, 0, .25);
}
.jcs-objet.is-juste  { animation: jcs-pop .3s ease-out; border-color: var(--jcs-menthe); }
.jcs-objet.is-faux   { animation: jcs-shake .3s; border-color: var(--jcs-corail); }

/* ---------- Mon petit Word ---------- */

.jcs-consigne {
  display: flex; align-items: center; gap: .5rem;
  background: color-mix(in srgb, var(--jcs-citron) 30%, transparent);
  border: 3px solid var(--jcs-border);
  border-radius: 14px;
  padding: .3rem .6rem;
  margin-bottom: .6rem;
}
.jcs-consigne-emoji { font-size: 1.35rem; line-height: 1; }
/* Le titre et la consigne tiennent sur une ligne, le texte s efface au besoin */
.jcs-consigne-texte {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: .5rem;
  overflow: hidden;
}
.jcs-consigne h2 {
  font-size: .95rem; font-weight: 800;
  white-space: nowrap;
}
.jcs-consigne p {
  font-size: .85rem;
  color: var(--jcs-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jcs-consigne .jcs-btn { padding: .25rem .7rem; font-size: .85rem; flex: 0 0 auto; }

/* Ecran etroit : la consigne s efface, le titre suffit */
@media (max-width: 700px) {
  .jcs-consigne p { display: none; }
}

/* Collee en haut, la barre garde ses arrondis : le texte de la feuille
   defilait derriere et apparaissait dans les coins. On les carre alors,
   et on ajoute une ombre pour marquer qu elle flotte au-dessus du texte. */
.jcs-barre-outils.is-collee {
  border-radius: 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .12);
}
.jcs-barre-outils {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: .7rem;
  border-radius: 20px 20px 0 0;
  background: var(--jcs-card);
  border: 4px solid var(--jcs-border);
  border-bottom: none;
}
.jcs-outil {
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--jcs-text);
  background: transparent;
  border: 3px solid transparent;
  border-radius: 14px;
  padding: .45rem .8rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
}
.jcs-outil:hover { background: color-mix(in srgb, var(--jcs-ciel) 30%, transparent); }
.jcs-outil:active { transform: translateY(1px); }
.jcs-outil.jcs-select { border-color: var(--jcs-border); background: var(--jcs-card); }
.jcs-outil input[type="color"] {
  width: 34px; height: 30px; border: none; background: none; padding: 0; cursor: pointer;
}
.jcs-separateur { width: 3px; height: 30px; background: var(--jcs-border); border-radius: 3px; margin: 0 .3rem; }

.jcs-palette-emoji {
  display: flex; flex-wrap: wrap; gap: .3rem;
  padding: .8rem;
  background: var(--jcs-card);
  border: 4px solid var(--jcs-border);
  border-top: none;
}
.jcs-emoji-btn {
  font-size: 1.7rem; line-height: 1;
  background: none; border: none; border-radius: 12px;
  padding: .25rem .35rem; cursor: pointer;
}
.jcs-emoji-btn:hover { background: color-mix(in srgb, var(--jcs-citron) 45%, transparent); }

.jcs-feuille {
  background: #fff;
  color: #23252e;
  border: 4px solid var(--jcs-border);
  border-radius: 0 0 20px 20px;
  padding: clamp(1.2rem, 4vw, 3rem);
  min-height: 60vh;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.jcs-titre-doc {
  display: block; width: 100%;
  font-family: 'Fredoka', 'Trebuchet MS', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #23252e;
  border: none; border-bottom: 3px dashed #d9dbe6;
  padding: .3rem 0 .6rem;
  margin-bottom: 1.2rem;
  background: none;
}
.jcs-titre-doc:focus { outline: none; border-bottom-color: var(--jcs-lilas); }
/* Doublon du champ de titre, uniquement pour le papier et le PDF :
   a l ecran il ferait apparaitre le titre deux fois. */
.jcs-titre-imprime {
  display: none;
  font-family: 'Fredoka', 'Trebuchet MS', sans-serif;
  font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: #23252e;
}
/* Le PDF est une photo de l ecran : on le montre juste le temps du cliche. */
.jcs-titre-imprime.is-visible { display: block; }
.jcs-page {
  font-family: 'Andika', 'Trebuchet MS', sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.8;
  color: #23252e;
  min-height: 45vh;
  outline: none;
}
.jcs-page:focus { outline: none; }
.jcs-page h2 { font-size: 1.7em; font-weight: 800; margin: .8rem 0 .4rem; }
.jcs-page p  { margin: 0 0 .7rem; }
.jcs-page ul, .jcs-page ol { margin: 0 0 .8rem 1.6rem; }
.jcs-page li { margin-bottom: .3rem; }
.jcs-page img { max-width: 100%; border-radius: 12px; margin: .5rem 0; }
.jcs-page:empty::before { content: 'Écris ici…'; color: #a8abbd; }

.jcs-actions {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center;
  margin-top: 1.5rem;
}
.jcs-liste-textes { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.jcs-texte-ligne {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .8rem 1rem;
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  font-size: 1.1rem;
}


/* ---------- Barre de menu de Mon petit Word ---------- */
.jcs-menu-appli {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  padding: .5rem .7rem;
  margin-bottom: 1rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--jcs-lilas) 22%, var(--jcs-card));
  border: 3px solid var(--jcs-border);
}
.jcs-menu-btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--jcs-text);
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 12px;
  padding: .4rem .8rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
}
.jcs-menu-btn:hover  { filter: brightness(1.05); border-color: var(--jcs-lilas); }
.jcs-menu-btn:active { transform: translateY(1px); }
.jcs-menu-btn:disabled { opacity: .55; cursor: not-allowed; }
.jcs-menu-btn.is-primaire { background: var(--jcs-menthe); border-color: transparent; }
.jcs-menu-espace { flex: 1 1 auto; }
.jcs-menu-info {
  font-size: .95rem; font-weight: 700; color: var(--jcs-muted);
  padding: .2rem .6rem;
}

/* Saut de page demande par l enfant */
.jcs-saut-page {
  position: relative;
  height: 0;
  border: none;
  border-top: 3px dashed var(--jcs-corail);
  margin: 1.6rem 0;
}
.jcs-saut-page::after {
  content: "✂️ nouvelle page";
  position: absolute;
  top: -.75em; left: 50%; transform: translateX(-50%);
  background: #fff;
  padding: 0 .6rem;
  font-size: .85rem;
  font-weight: 700;
  color: #9aa0b8;
}

/* Feuille clonee au moment d imprimer : le contenu vit dans une cellule de
   tableau dont l en-tete et le pied se repetent sur chaque page. C est ce qui
   redonne une marge haute et basse a toutes les pages, sans @page. */
.jcs-zone-impression { display: none; }
.jcs-table-impression { width: 100%; border-collapse: collapse; }
.jcs-bande-page { height: 14mm; }

/* ---------- Impression ---------- */
/* En-tetes du navigateur (date, titre, URL) : ils disparaissent quand la
   marge de page vaut 0. On remet donc les marges dans la feuille elle-meme. */
/* Le navigateur dessine ses en-tetes (date, titre, URL) DANS les marges
   haute et basse de @page. On les met donc a zero : il n a plus la place de
   les imprimer. Les marges laterales, elles, ne le genent pas.
   La respiration verticale de chaque page est recree par une bande repetee
   (thead/tfoot d un tableau), voir .jcs-bande-page plus bas. */
@page { margin: 0 16mm; size: A4; }

@media print {
  html, body { margin: 0 !important; padding: 0 !important; }
  /* Rien de l application ne s imprime : seul le clone de la feuille. */
  body > *:not(.jcs-zone-impression) { display: none !important; }
  .jcs-zone-impression { display: block !important; }
  body { background: #fff !important; }
  .jcs-feuille {
    border: none; box-shadow: none; border-radius: 0;
    padding: 0; min-height: auto;      /* la marge vient de @page */
  }
  .jcs-page > *:first-child { margin-top: 0; }
  main.container { max-width: none !important; padding: 0 !important; }
  .jcs-titre-imprime { display: block; }
  .jcs-titre-imprime.jcs-hidden { display: none !important; }
  .jcs-page { font-size: 12pt; }

  /* Coupures propres : jamais un titre seul en bas de page, jamais une
     image ou une ligne isolee coupee en deux. */
  .jcs-page p, .jcs-page li { orphans: 3; widows: 3; }
  .jcs-page h2 { break-after: avoid-page; break-inside: avoid; }
  .jcs-page li, .jcs-page ul, .jcs-page ol { break-inside: avoid; }
  .jcs-page img { break-inside: avoid; max-height: 230mm; }
  .jcs-saut-page { break-after: page; border: none; margin: 0; }
  .jcs-saut-page::after { display: none; }
}

/* Etiquettes des listes deroulantes de la barre d'outils */
.jcs-etiquette {
  font-size: .95rem;
  font-weight: 800;
  color: var(--jcs-muted);
  padding-left: .4rem;
}

/* ---------- Fenetre des joueurs ---------- */
/* Une grille de cartes : une colonne sur telephone, deux des que l ecran
   s y prete, trois quand il est vraiment large. */
.jcs-joueurs {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin: 0 0 1.2rem;
}
@media (min-width: 700px)  { .jcs-joueurs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .jcs-joueurs { grid-template-columns: repeat(3, 1fr); } }
.jcs-joueur-ligne {
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  padding: .8rem;
  background: color-mix(in srgb, var(--jcs-ciel) 12%, transparent);
  /* Sans cela une carte de la grille refuse de se serrer, et son contenu
     deborde sur la voisine : les elements de grille valent min-width:auto. */
  min-width: 0;
  /* Repere pour la poubelle, posee dans le coin (voir jcs-joueur-retirer). */
  position: relative;
}
.jcs-joueur-ligne.is-actif { border-color: var(--jcs-citron); }
.jcs-joueur-tete {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
  flex-wrap: wrap;   /* le bouton « c est lui qui joue » passe a la ligne plutot que de deborder */
}
.jcs-joueur-avatar { font-size: 2rem; line-height: 1; }
/* La photo du joueur, quand il en a pris une. Elle se mesure en « em » :
   elle suit donc la taille du texte autour d'elle, et le meme code sert
   aussi bien dans la barre du haut qu'en grand au milieu d'une fenetre. */
.jcs-photo {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -.15em;
  background: var(--jcs-border);
}
.jcs-joueur-avatar .jcs-photo { vertical-align: 0; }

/* ---------- Prendre une photo ---------- */
.jcs-photo-scene {
  position: relative;
  width: min(320px, 70vw);
  aspect-ratio: 1 / 1;
  margin: 1.2rem auto 0;
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid var(--jcs-border);
  background: #000;
}
.jcs-photo-scene video,
.jcs-photo-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Un miroir : l'enfant se voit du cote ou il se attend. La photo gardee
   est retournee au moment de la prise, elle n'a donc rien a corriger ici. */
.jcs-photo-scene video { transform: scaleX(-1); }

/* Fond retire : la couleur du joueur prend la place, posee en style en ligne
   (elle se deduit de son prenom, voir couleurJoueur dans common.js). */
.jcs-photo-scene.is-detoure img { object-fit: contain; }

/* Le curseur de zoom, sous l'apercu. */
.jcs-photo-zoom {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: min(320px, 70vw);
  margin: .8rem auto 0;
}
.jcs-photo-zoom input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.8rem;
  accent-color: var(--jcs-menthe);
}
.jcs-photo-zoom span { font-weight: 800; color: var(--jcs-muted); }
.jcs-joueur-num { font-weight: 800; color: var(--jcs-muted); flex: 1 1 auto; text-align: left; }

/* La poubelle est hors du flux : elle ne pousse plus rien a la ligne, et le
   bouton « c est lui qui joue » ne la repousse plus nulle part. La tete lui
   reserve sa place a droite, pour qu ils ne se recouvrent jamais. */
.jcs-joueur-tete.a-retirer { padding-right: 2.6rem; }
.jcs-joueur-retirer {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.jcs-joueur-ligne:hover .jcs-joueur-retirer,
.jcs-joueur-retirer:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Sans survol (tablette, telephone), elle reste visible : sinon on ne
   pourrait plus retirer personne. */
@media (hover: none) {
  .jcs-joueur-retirer { opacity: 1; pointer-events: auto; }
}
.jcs-joueur-ligne .jcs-input { width: 100%; margin-bottom: .7rem; }
/* Des cartes cote a cote : tout y est un cran plus serre qu avant. */
.jcs-joueur-ligne .jcs-choix { gap: .4rem; }
.jcs-joueur-ligne .jcs-choix-btn { font-size: .85rem; padding: .35rem .7rem; }
.jcs-joueur-ligne .jcs-choix-btn::before { width: 13px; height: 13px; border-width: 3px; }
/* La photo n est pas un choix exclusif : ses boutons n ont pas de pastille. */
.jcs-joueur-ligne .jcs-photo-btn {
  font-size: .85rem;
  padding: .35rem .7rem;
  border: 3px solid transparent;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .10);
}
/* Qui tient la souris : ses scores et ses creations vont sous son nom */
.jcs-joueur-choisir {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .85rem;
  padding: .35rem .8rem;
}

/* ---------- Classement de fin de tournoi ---------- */
.jcs-classement { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; }
.jcs-classement-ligne {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 1rem;
  border: 3px solid var(--jcs-border);
  border-radius: 16px;
  font-size: 1.15rem;
}
.jcs-classement-ligne.is-premier {
  border-color: var(--jcs-citron);
  background: color-mix(in srgb, var(--jcs-citron) 30%, transparent);
}
.jcs-classement-rang  { font-size: 1.7rem; min-width: 2.2rem; }
.jcs-classement-nom   { flex: 1 1 auto; text-align: left; font-weight: 700; }
.jcs-classement-score { font-size: 1.5rem; }
/* Bonus temps : il departage deux joueurs a egalite de points */
.jcs-classement-temps { color: var(--jcs-muted); font-size: .95rem; white-space: nowrap; }
.jcs-departage        { color: var(--jcs-muted); font-size: .95rem; }

/* ---------- Mon petit navigateur : les nouvelles des journaux ---------- */

/* Liste seule tant qu on n a rien ouvert ; deux colonnes des qu une
   nouvelle est choisie : la liste se range a gauche, l article s ouvre
   a droite et y reste pendant qu on passe de l une a l autre. */
.jcs-nav-duo { display: flex; flex-direction: column; gap: 1rem; }
.jcs-nav-duo-liste { min-width: 0; }
.jcs-nav-duo-fiche { min-width: 0; }

@media (min-width: 900px) {
  /* Chaque colonne defile pour elle-meme : on descend la liste sans
     perdre l article, et l article sans perdre sa place dans la liste. */
  .jcs-nav-duo.is-ouvert {
    flex-direction: row;
    align-items: stretch;
    gap: 1.4rem;
    height: 100%;
    min-height: 0;
  }
  .jcs-nav-duo.is-ouvert .jcs-nav-duo-liste,
  .jcs-nav-duo.is-ouvert .jcs-nav-duo-fiche {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: .5rem;
  }
  .jcs-nav-duo.is-ouvert .jcs-nav-duo-liste { flex: 0 1 22rem; }
  .jcs-nav-duo.is-ouvert .jcs-nav-duo-fiche {
    flex: 1 1 26rem;
    border-left: 3px dotted var(--jcs-border);
    padding-left: 1.4rem;
  }
  .jcs-nav-duo.is-ouvert .jcs-nav-actus { width: 100%; }
  .jcs-nav-duo.is-ouvert .jcs-nav-actu-carte img { width: 56px; height: 44px; }
  .jcs-nav-duo.is-ouvert .jcs-nav-actu-texte strong { font-size: .95rem; }
}

.jcs-nav-actus {
  display: flex; flex-direction: column; gap: .5rem;
  width: min(100%, 640px);
  margin: .5rem auto 0;
}

/* Une carte : la photo, puis la ligne du titre ou se tient aussi le
   petit bouton qui detache la nouvelle dans un onglet. La photo occupe
   toute la largeur que sa carte lui donne, elle ne partage sa ligne avec
   personne. */
.jcs-nav-actu-carte {
  display: flex; align-items: stretch; gap: .5rem;
  border: 3px solid var(--jcs-border);
  border-radius: 16px;
  background: var(--jcs-card);
  padding: .45rem;
}
.jcs-nav-actu-photo {
  flex: 0 0 auto;
  display: block; line-height: 0;
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.jcs-nav-actu-ligne {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-start; gap: .3rem;
}
.jcs-nav-actu-carte:hover { border-color: var(--jcs-lilas); }
.jcs-nav-actu-carte.is-choisie { border-color: var(--jcs-menthe); }
.jcs-nav-actu-ouvrir {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .7rem;
  text-align: left;
  align-self: center;
  font-family: inherit;
  color: var(--jcs-text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.jcs-nav-actu-onglet {
  flex: 0 0 auto;
  align-self: flex-start;
  font-family: inherit; font-size: .9rem;
  color: var(--jcs-muted);
  background: none;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: .15rem .3rem;
  cursor: pointer;
}
.jcs-nav-actu-onglet:hover { color: var(--jcs-text); border-color: var(--jcs-lilas); }
/* Chaque carte reserve a son image une zone de proportions connues, que
   l image remplit en debordant de ses bords les plus longs (cover). Les
   photos des journaux sont de toutes les formes : posees entieres, elles
   laissaient de grands vides autour d elles et la liste perdait son
   alignement. L article ouvert, lui, montre toujours son image entiere. */
.jcs-nav-actu-carte img,
.jcs-nav-actu-mini {
  flex: 0 0 auto;
  width: 84px; height: 60px;
  object-fit: cover; object-position: center;
  background: var(--jcs-bg);
  border-radius: 10px;
}

/* Pas d image ? un carre gris, le drapeau du site au milieu. Il occupe
   exactement la zone qu aurait prise la photo, pour que la rangee reste
   alignee. */
.jcs-nav-actu-vide {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: var(--jcs-bg);
  border: 2px dotted var(--jcs-border);
}
.jcs-nav-favicon {
  position: absolute; inset: 0; margin: auto;
  width: 28px; height: 28px;
  object-fit: contain;
  background: var(--jcs-bg);
  border-radius: 6px;
  padding: 2px;
}
.jcs-nav-actu-image.jcs-nav-actu-vide { height: 160px; font-size: 3rem; }
.jcs-nav-actu-image.jcs-nav-actu-vide .jcs-nav-favicon { width: 54px; height: 54px; }
.jcs-nav-actu-texte { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.jcs-nav-actu-texte strong { font-size: 1rem; line-height: 1.25; }

/* ---------- La une des nouvelles ----------
   La premiere page se lit comme la une d un journal : une grande
   nouvelle avec son chapeau, trois qui l accompagnent, puis les breves
   sur plusieurs colonnes. Les cartes sont les memes que dans la liste
   empilee : seules leur largeur et la place de l image changent. */
.jcs-nav-mosaique {
  width: min(100%, 980px);
  margin: .5rem auto 0;
  display: flex; flex-direction: column; gap: .8rem;
}
.jcs-nav-epaules {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.jcs-nav-breves {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
/* La grande nouvelle : la photo a gauche, le titre et le chapeau a
   droite. Sa zone fait seize dixiemes, comme une photo de presse, et
   l image la remplit. */
.jcs-nav-actu-carte.is-une { align-items: center; gap: 1rem; }
.jcs-nav-actu-carte.is-une .jcs-nav-actu-photo {
  flex: 0 0 clamp(220px, 42%, 420px);
}
.jcs-nav-actu-carte.is-une img,
.jcs-nav-actu-carte.is-une .jcs-nav-actu-mini {
  width: 100%;
  height: auto; aspect-ratio: 16 / 10;
}
.jcs-nav-actu-carte.is-une .jcs-nav-actu-texte { gap: .35rem; }
.jcs-nav-actu-carte.is-une .jcs-nav-actu-texte strong {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.22;
}

/* Les epaules posent l image au dessus du titre, dans une zone en trois
   demis : les trois cartes s alignent alors quelles que soient leurs
   photos. */
.jcs-nav-actu-carte.is-epaule { flex-direction: column; gap: .5rem; }
.jcs-nav-actu-carte.is-epaule .jcs-nav-actu-photo { flex: 0 0 auto; }
.jcs-nav-actu-carte.is-epaule img,
.jcs-nav-actu-carte.is-epaule .jcs-nav-actu-mini {
  width: 100%; height: auto; aspect-ratio: 3 / 2;
}
.jcs-nav-actu-carte.is-epaule .jcs-nav-actu-texte strong { font-size: 1.02rem; }

/* En fenetre etroite, la une repasse en colonne comme les autres */
@media (max-width: 700px) {
  .jcs-nav-actu-carte.is-une { flex-direction: column; align-items: stretch; }
  .jcs-nav-actu-carte.is-une .jcs-nav-actu-photo { flex: 0 0 auto; }
  .jcs-nav-actu-carte.is-une img,
  .jcs-nav-actu-carte.is-une .jcs-nav-actu-mini { width: 100%; aspect-ratio: 16 / 9; }
}

/* Le chapeau de la une : deux ou trois lignes suffisent a donner envie */
.jcs-nav-actu-chapeau {
  color: var(--jcs-muted);
  font-size: .98rem; line-height: 1.4;
}

.jcs-nav-actu {
  width: min(100%, 640px);
  margin: 0 auto;
  text-align: left;
}
.jcs-nav-actu h1 { font-size: 1.5rem; font-weight: 800; margin: .6rem 0 .3rem; }
.jcs-nav-actu-image {
  width: 100%; height: auto; max-height: 320px;
  object-fit: contain;
  background: var(--jcs-bg);
  border-radius: 16px;
}
.jcs-nav-actu-resume { font-size: 1.05rem; line-height: 1.5; margin: .8rem 0 1.2rem; }
/* Les flèches ferment la fiche, sous le bouton de lecture : un filet les
   sépare du texte, et le numéro reste au milieu, une flèche à chaque bord. */
.jcs-nav-actu-voisines {
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; flex-wrap: nowrap;
  margin: 1.2rem 0 .4rem;
  padding-top: 1rem;
  border-top: 2px solid var(--jcs-border);
}
.jcs-nav-actu-voisines .jcs-btn {
  padding: .3rem .8rem; font-size: .9rem; border-width: 2px;
  white-space: nowrap; flex: 0 0 auto;
}
.jcs-nav-actu-voisines .jcs-menu-info {
  flex: 1 1 auto; text-align: center; white-space: nowrap;
}

/* ---------- Mon petit navigateur : les mots qui se proposent ---------- */
.jcs-nav-completion {
  position: fixed;
  z-index: 52;
  margin: 0; padding: .25rem;
  list-style: none;
  max-height: 40vh; overflow-y: auto;
  border: 3px solid var(--jcs-border);
  border-radius: 14px;
  background: var(--jcs-card);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}
.jcs-nav-completion-item {
  padding: .4rem .6rem;
  border-radius: 10px;
  font-size: 1rem; font-weight: 700;
  color: var(--jcs-text);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jcs-nav-completion-item:hover,
.jcs-nav-completion-item.is-choisi {
  background: var(--jcs-citron);
  color: #2f3640;
}

/* ---------- Mon petit Paint ---------- */
/* Une appli qui tient dans l ecran : rien ne defile, la feuille s adapte. */
body.jcs-appli-pleine {
  height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.jcs-appli-corps {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  gap: .4rem;
  padding: .6rem clamp(.5rem, 2vw, 1.2rem) .6rem;
  max-width: 1400px; width: 100%;
  margin: 0 auto;
}
.jcs-appli-pleine .jcs-menu-appli { margin-bottom: 0; }
.jcs-appli-pleine .jcs-barre-outils { position: static; border-radius: 18px; border-bottom: 4px solid var(--jcs-border); }
.jcs-appli-pleine .jcs-feuille { border-radius: 20px; }
.jcs-mot { margin-left: .35rem; }

/* Navbar reduite : le logo seul, des boutons compacts. Toutes les pages de
   jeu la portent, la place gagnee revient au terrain de jeu. */
.jcs-navbar.is-mini { padding: .3rem .7rem; gap: .55rem; }
.jcs-navbar.is-mini .jcs-brand      { font-size: 1.4rem; gap: .3rem; }
.jcs-navbar.is-mini .jcs-brand-nom  { display: none; }
/* La barre est un bandeau de service : ses boutons sont plus discrets et
   plus petits que ceux du jeu, pour ne pas se confondre avec eux. */
.jcs-navbar.is-mini .jcs-btn {
  padding: .22rem .6rem;
  font-size: .85rem;
  border-width: 2px;
  border-radius: 999px;
  min-height: 0;      /* la hauteur commune de la grande barre ne vaut pas ici */
}
.jcs-navbar.is-mini #jcs-burger-btn { font-size: 1.1rem; padding: .22rem .6rem; }

/* L atelier : les outils en colonne a gauche, la feuille a droite. */
.jcs-atelier-paint {
  flex: 1 1 auto; min-height: 0;
  display: flex; gap: .5rem;
}
.jcs-outils-verticaux {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: .2rem;
  padding: .4rem;
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  background: var(--jcs-card);
  overflow-y: auto;
}
.jcs-outils-verticaux .jcs-outil {
  justify-content: center;
  font-size: 1.45rem;
  padding: .3rem .45rem;
  min-width: 2.6rem;
}
.jcs-separateur-h {
  height: 3px; width: 80%;
  align-self: center;
  background: var(--jcs-border);
  border-radius: 3px;
  margin: .2rem 0;
}
.jcs-zone-paint {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: .4rem;
}

/* Ecran a l etroit : les outils gardent leur dessin, le mot s efface. */
@media (max-width: 1100px), (max-height: 780px) {
  .jcs-appli-pleine .jcs-mot { display: none; }
  .jcs-appli-pleine .jcs-outil,
  .jcs-appli-pleine .jcs-menu-btn { padding: .3rem .5rem; font-size: 1.15rem; }
  .jcs-appli-pleine .jcs-barre-outils { padding: .4rem .5rem; gap: .25rem; }
  .jcs-appli-pleine .jcs-menu-appli   { padding: .35rem .5rem; gap: .25rem; }
  .jcs-appli-pleine .jcs-palette-couleurs { padding: .35rem .5rem; gap: .3rem; }
  .jcs-appli-pleine .jcs-pastille { width: 26px; height: 26px; border-width: 2px; }
  .jcs-appli-pleine .jcs-separateur { height: 22px; margin: 0 .15rem; }
}

.jcs-feuille-paint {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  gap: .4rem;
  padding: .6rem clamp(.6rem, 2vw, 1.2rem);
  min-height: 0;
}
/* La planche de tampons : une colonne contre les outils, jamais une bande
   horizontale ; sur un netbook, la hauteur va a la feuille. */
.jcs-tampons-colonne {
  flex: 0 0 auto;
  align-self: stretch;
  display: grid; grid-template-columns: repeat(2, auto);
  gap: .15rem;
  padding: .35rem;
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  background: var(--jcs-card);
  overflow-y: auto; overflow-x: hidden;
  align-content: start; justify-items: center;
}
.jcs-tampons-colonne .jcs-emoji-btn { font-size: 1.35rem; padding: .15rem .2rem; }

@media (max-height: 700px), (max-width: 900px) {
  .jcs-tampons-colonne { grid-template-columns: auto; }
  .jcs-tampons-colonne .jcs-emoji-btn { font-size: 1.15rem; }
}

/* Choix de l epaisseur : quatre points qui grossissent */
.jcs-epaisseurs { display: flex; gap: .2rem; align-items: center; }
.jcs-epaisseur {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border: 3px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--jcs-text);
  cursor: pointer;
  padding: 0;
}
.jcs-epaisseur:hover  { background: color-mix(in srgb, var(--jcs-ciel) 30%, transparent); }
.jcs-epaisseur:active { transform: translateY(1px); }
.jcs-epaisseur.is-choisi-outil {
  background: var(--jcs-citron);
  border-color: #2f3640;
  color: #2f3640;
}

/* Les petites icones dessinees a la main (la gomme), a la taille du texte */
.jcs-icone { width: 1.5em; height: 1.5em; display: block; }

/* La loupe et le bouton ... au bout de la planche */
.jcs-tampon-outil {
  font-size: 1rem;
  color: var(--jcs-text);
  border: 2px dashed var(--jcs-border);
  border-radius: 10px;
  line-height: 1;
}
.jcs-tampon-outil:hover { background: color-mix(in srgb, var(--jcs-ciel) 35%, transparent); }
/* La loupe et le ... restent sous la main quand la planche defile */
.jcs-tampons-colonne .jcs-tampon-outil {
  grid-column: 1 / -1;
  position: sticky;
  background: var(--jcs-card);
  z-index: 1;
}
.jcs-tampons-colonne #btn-chercher-tampon { top: -.35rem; }
.jcs-tampons-colonne #btn-plus-tampons    { bottom: -.35rem; }

/* La fenetre de recherche, accrochee a la loupe */
.jcs-cherche-tampon {
  position: fixed;
  z-index: 62;
  width: min(320px, 88vw);
  padding: .6rem;
  border-radius: 16px;
  border: 3px solid var(--jcs-border);
  background: var(--jcs-card);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}
.jcs-cherche-champ {
  width: 100%;
  font-family: inherit; font-size: 1rem;
  padding: .4rem .6rem;
  border: 3px solid var(--jcs-ciel);
  border-radius: 12px;
  background: var(--jcs-card);
  color: var(--jcs-text);
}
.jcs-cherche-champ:focus { outline: none; border-color: var(--jcs-lilas); }
.jcs-cherche-resultats {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: .1rem;
  margin-top: .5rem;
  max-height: 220px;
  overflow-y: auto;
}
.jcs-cherche-resultats .jcs-emoji-btn { font-size: 1.4rem; padding: .15rem; }
.jcs-cherche-titre {
  grid-column: 1 / -1;
  margin: .2rem 0 0;
  font-size: .8rem; font-weight: 800;
  color: var(--jcs-muted);
}
.jcs-cherche-rien {
  grid-column: 1 / -1;
  margin: .4rem 0;
  font-size: .9rem;
  color: var(--jcs-muted);
}

/* Ecran bas (netbook) : on rogne les marges, la feuille prend le reste. */
@media (max-height: 700px) {
  .jcs-appli-pleine .jcs-feuille-paint { padding: .35rem .5rem; gap: .25rem; }
  .jcs-appli-pleine .jcs-appli-corps   { padding: .35rem .5rem; gap: .3rem; }
  .jcs-feuille-paint .jcs-titre-doc { font-size: 1rem; padding: 0 0 .2rem; }
  .jcs-feuille-paint #message { font-size: .8rem; }
}

/* La barre du nom : le titre a gauche, l agrandissement a droite */
.jcs-barre-nom {
  display: flex; align-items: center; gap: .6rem;
  flex: 0 0 auto;
}
.jcs-barre-nom .jcs-titre-doc { flex: 1 1 auto; min-width: 0; }
.jcs-barre-nom .jcs-menu-btn  { flex: 0 0 auto; }

/* Vue agrandie : il ne reste que la navbar reduite, le nom et le dessin */
.jcs-vue-agrandie .jcs-menu-appli,
.jcs-vue-agrandie .jcs-barre-outils,
.jcs-vue-agrandie .jcs-outils-verticaux,
.jcs-vue-agrandie .jcs-palette-emoji,
.jcs-vue-agrandie .jcs-feuille-paint #message { display: none; }
.jcs-vue-agrandie .jcs-appli-corps { padding: .4rem; gap: 0; max-width: none; }
.jcs-vue-agrandie .jcs-feuille-paint { border-width: 3px; }

.jcs-feuille-paint .jcs-titre-doc {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  padding: .1rem 0 .3rem;
  margin-bottom: 0;
}

.jcs-palette-couleurs {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.jcs-pastille {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--jcs-border);
  cursor: pointer;
  padding: 0;
}
.jcs-pastille:hover    { transform: translateY(-2px); }
.jcs-pastille.is-choisie {
  border-color: #2f3640;
  box-shadow: 0 0 0 3px var(--jcs-citron);
}

/* L outil en cours de selection, dans la barre comme dans les tampons */
.jcs-outil.is-choisi-outil,
.jcs-emoji-btn.is-choisi-outil {
  background: var(--jcs-citron);
  border-color: #2f3640;
  color: #2f3640;
}

.jcs-canevas-boite {
  flex: 1 1 auto; min-height: 0;
  display: flex; justify-content: center; align-items: center;
  background: repeating-conic-gradient(#f2f3f8 0 25%, #ffffff 0 50%) 0 0 / 24px 24px;
  border-radius: 14px;
  padding: .4rem;
}
#canevas {
  /* La feuille garde ses proportions et prend toute la place disponible. */
  height: 100%; width: auto;
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
  cursor: crosshair;
  touch-action: none;
}
#canevas.is-pot { cursor: cell; }

/* Le fantome du tampon : ce qu on posera si l on clique */
.jcs-apercu-tampon {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  transform: translate(-50%, -50%);
  line-height: 1;
  filter: grayscale(1);
  opacity: .45;
}

/* Une creation rangee sous un nom de secours attend son vrai nom */
.jcs-brouillon {
  font-size: .75rem; font-weight: 800;
  color: var(--jcs-muted);
  background: color-mix(in srgb, var(--jcs-citron) 40%, transparent);
  border-radius: 8px;
  padding: .05rem .35rem;
  white-space: nowrap;
}

/* La galerie des dessins gardes */
.jcs-feuille-paint #message {
  flex: 0 0 auto;
  min-height: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.jcs-galerie {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin-top: 1.2rem;
}
.jcs-galerie-item {
  margin: 0;
  border: 3px solid var(--jcs-border);
  border-radius: 16px;
  padding: .5rem;
  background: var(--jcs-card);
}
.jcs-galerie-item img {
  width: 100%; height: 110px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}
.jcs-galerie-item figcaption {
  font-weight: 700; font-size: .95rem;
  margin: .5rem 0;
  word-break: break-word;
}
.jcs-galerie-actions { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.jcs-galerie-actions .jcs-btn { padding: .35rem .7rem; font-size: .9rem; }

/* ---------- Reglages personnels dans l annonce du tour ---------- */
.jcs-reglages-tour {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 3px dashed var(--jcs-border);
}
.jcs-reglages-tour .jcs-big    { font-size: 1.05rem; margin: .9rem 0 .5rem; }
.jcs-reglages-tour .jcs-choix  { margin: 0 !important; gap: .5rem; }
.jcs-reglages-tour .jcs-choix-btn { font-size: .92rem; padding: .4rem .8rem; }

/* ---------- Clavier d aide : petit, flottant, deplacable ---------- */
.jcs-clavier-flottant {
  position: fixed;
  left: 0; top: 0;
  z-index: 58;
  /* La fenetre se serre sur ses touches : sans cela, elle gardait de
     larges marges vides a gauche et a droite du clavier. */
  width: max-content;
  max-width: min(520px, 94vw);
  border-radius: 16px;
  border: 3px solid var(--jcs-border);
  background: color-mix(in srgb, var(--jcs-ciel) 10%, var(--jcs-card));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  user-select: none;
  opacity: .96;
}
.jcs-clavier-flottant.is-deplace { opacity: 1; cursor: grabbing; }

.jcs-clavier-poignee {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .3rem .5rem;
  border-radius: 13px 13px 0 0;
  background: color-mix(in srgb, var(--jcs-lilas) 30%, var(--jcs-card));
  font-size: .85rem; font-weight: 800;
  color: var(--jcs-text);
  cursor: grab;
  touch-action: none;
}
.jcs-clavier-fermer {
  border: none; background: none;
  font-size: 1rem; font-weight: 800; line-height: 1;
  color: var(--jcs-text);
  padding: .1rem .3rem; border-radius: 8px;
  cursor: pointer;
}
.jcs-clavier-fermer:hover { background: rgba(0, 0, 0, .12); }

.jcs-clavier {
  display: flex; flex-direction: column; align-items: center;
  gap: .18rem;
  padding: .35rem .3rem .45rem;
}
.jcs-clavier-rangee { display: flex; gap: .16rem; justify-content: center; width: 100%; }
.jcs-touche {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: clamp(1.3rem, 3.2vw, 1.9rem);
  padding: .18rem .1rem;
  border-radius: 6px;
  border: 2px solid var(--jcs-border);
  background: var(--jcs-card);
  font-size: clamp(.62rem, 1.5vw, .8rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--jcs-text);
}
.jcs-touche small { font-size: .72em; font-weight: 600; color: var(--jcs-muted); }
.jcs-touche.is-maj    { min-width: clamp(1.6rem, 4vw, 2.4rem); }
.jcs-touche.is-espace { min-width: clamp(7rem, 34vw, 13rem); font-size: .7rem; }

/* La touche a appuyer, et la touche Maj quand il faut la tenir */
.jcs-touche.is-cible {
  background: var(--jcs-citron);
  border-color: #2f3640;
  color: #2f3640;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .2);
}
.jcs-touche.is-cible small { color: #2f3640; }
.jcs-touche.is-avec-maj {
  background: var(--jcs-peche);
  border-color: #2f3640;
  color: #2f3640;
}

/* ---------- Qui travaille dans l atelier ---------- */
.jcs-choix-qui {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
  margin-top: 1.4rem;
}

/* Les dossiers des creations : le mien, puis ceux des autres */
.jcs-dossier { margin-top: 1.4rem; text-align: left; }
.jcs-dossier-titre {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.1rem;
  padding: .4rem .2rem;
  border-bottom: 3px dashed var(--jcs-border);
}
.jcs-dossier-titre .jcs-badge { font-size: .8rem; margin-left: auto; }

/* ---------- Page des credits ---------- */
.jcs-lien {
  color: var(--jcs-lilas);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jcs-lien:hover { filter: brightness(1.1); }

.jcs-liste-credits { list-style: none; margin: 0; padding: 0; }
.jcs-liste-credits li {
  padding: .6rem 0;
  border-bottom: 2px dashed var(--jcs-border);
  line-height: 1.5;
}
.jcs-liste-credits li:last-child { border-bottom: none; }
.jcs-licence {
  display: block;
  color: var(--jcs-muted);
  font-size: .9rem;
}

/* ---------- Bandeau « qui joue » sur les pages de jeu ---------- */
.jcs-info-mode {
  color: var(--jcs-muted);
  font-size: 1.05rem;
  margin-top: .6rem;
}

/* ---------- Terrain generique des nouveaux jeux ---------- */
.jcs-scene {
  position: relative;
  height: min(58vh, 520px);
  border-radius: 26px;
  overflow: hidden;
  border: 5px solid var(--jcs-border);
  background: color-mix(in srgb, var(--jcs-lilas) 14%, var(--jcs-card));
  touch-action: manipulation;
  /* Le terrain se clique, il ne se lit pas : sans cela, une souris qui
     glisse entre deux clics surligne l emoji du paquet en bleu. */
  user-select: none; -webkit-user-select: none;
}

/* Pluie de lettres */
.jcs-chute {
  position: absolute;
  top: 0;
  display: flex; align-items: center; justify-content: center;
  width: clamp(52px, 8vw, 78px);
  height: clamp(52px, 8vw, 78px);
  border-radius: 18px;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #2f3640;
  background: var(--jcs-citron);
  border: 4px solid rgba(0, 0, 0, .12);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  animation-name: jcs-tombe;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.jcs-chute.is-cible  { background: var(--jcs-menthe); }
.jcs-chute.is-touche { animation: jcs-eclate .22s ease-out forwards; }
@keyframes jcs-tombe {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--jcs-course, 100%)); }
}
.jcs-sol {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: repeating-linear-gradient(90deg, var(--jcs-corail) 0 18px, transparent 18px 36px);
}

/* Suis le chemin */
.jcs-point {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: clamp(46px, 7vw, 68px);
  height: clamp(46px, 7vw, 68px);
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.1rem;
  background: var(--jcs-card);
  border: 4px dashed var(--jcs-border);
  color: var(--jcs-muted);
  transform: translate(-50%, -50%);
  transition: transform .12s ease;
}
.jcs-point.is-suivant {
  border-style: solid;
  border-color: var(--jcs-citron);
  background: var(--jcs-citron);
  color: #2f3640;
  transform: translate(-50%, -50%) scale(1.15);
}
.jcs-point.is-fait {
  border-style: solid;
  background: var(--jcs-menthe);
  border-color: transparent;
  color: #2f3640;
}

/* Double-clic express */
.jcs-cadeau {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  border: 4px solid rgba(0, 0, 0, .12);
  background: var(--jcs-card);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .12);
  cursor: pointer;
  padding: 0;
  /* Pas de translate ici : les animations (pop, shake) remplacent le transform
     et le cadeau se decalerait d une demi-largeur. Le centrage est fait en JS
     avec un calc() sur left/top. */
  animation: jcs-pop .2s ease-out;
}
/* L objet decouvert ne reste pas a la place du paquet : il file aussitot
   vers la collection, en bas. Pose sous le curseur, il passait pour le
   paquet suivant et se faisait double-cliquer a son tour. */
.jcs-vol {
  position: fixed;
  user-select: none; -webkit-user-select: none;
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transform: scale(1.12);
  transition: transform .43s cubic-bezier(.3, .8, .4, 1);
  will-change: transform;
  animation: jcs-jaillit .3s ease-out;
}
/* L objet jaillit du paquet : il grossit d un coup, puis se pose. */
@keyframes jcs-jaillit {
  0%   { transform: scale(.5) rotate(-12deg); }
  60%  { transform: scale(1.35) rotate(6deg); }
  100% { transform: scale(1.12) rotate(0deg); }
}
/* Retour visuel du clic isole : un halo, jamais un deplacement,
   sinon le second clic du double-clic tomberait a cote. */
.jcs-cadeau.is-rate   { border-color: var(--jcs-corail); background: color-mix(in srgb, var(--jcs-corail) 25%, var(--jcs-card)); }

/* Papiers cadeaux : le paquet est ferme, sa couleur change a chaque fois. */
.jcs-cadeau.papier-1 { background: color-mix(in srgb, var(--jcs-corail) 45%, var(--jcs-card)); }
.jcs-cadeau.papier-2 { background: color-mix(in srgb, var(--jcs-ciel)   45%, var(--jcs-card)); }
.jcs-cadeau.papier-3 { background: color-mix(in srgb, var(--jcs-menthe) 45%, var(--jcs-card)); }
.jcs-cadeau.papier-4 { background: color-mix(in srgb, var(--jcs-lilas)  45%, var(--jcs-card)); }
.jcs-cadeau.papier-5 { background: color-mix(in srgb, var(--jcs-citron) 55%, var(--jcs-card)); }

/* La collection d objets trouves pendant la partie. */
.jcs-butin {
  display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center;
  margin-top: .8rem;
}
/* Vide, il ne prend aucune place : pas de bande blanche sous le terrain. */
.jcs-butin:empty { display: none; }
.jcs-butin-objet {
  font-size: 1.9rem; line-height: 1;
  user-select: none; -webkit-user-select: none;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 14px;
  padding: .15rem .3rem;
  animation: jcs-pop .25s ease-out;
}
.jcs-butin.is-bilan .jcs-butin-objet { font-size: 2.4rem; }

/* Vif comme l'eclair : cible souris */
.jcs-cible-souris {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: clamp(80px, 13vw, 120px);
  height: clamp(80px, 13vw, 120px);
  border-radius: 50%;
  font-size: clamp(2rem, 5vw, 3rem);
  background: radial-gradient(circle at center,
              var(--jcs-corail) 0 32%, var(--jcs-card) 33% 58%, var(--jcs-corail) 59% 100%);
  border: 5px solid rgba(0, 0, 0, .12);
  cursor: pointer;
  padding: 0;
  /* Meme raison que pour les cadeaux : centrage fait en JS, pas en transform. */
  animation: jcs-pop .18s ease-out;
}
.jcs-consigne-eclair {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  min-height: 30vh;
}
.jcs-touche-geante {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(110px, 20vw, 190px);
  height: clamp(110px, 20vw, 190px);
  border-radius: 28px;
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 800;
  text-transform: uppercase;
  background: var(--jcs-citron);
  color: #2f3640;
  border: 6px solid rgba(0, 0, 0, .12);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .12);
  animation: jcs-pop .18s ease-out;
}

/* Recopie la phrase */
.jcs-phrase {
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  line-height: 1.9;
  font-weight: 700;
  letter-spacing: .02em;
  word-break: break-word;
  background: var(--jcs-card);
  border: 4px solid var(--jcs-border);
  border-radius: 22px;
  padding: 1.4rem 1.6rem;
  /* Chaque lettre est une case a colorier : la phrase ne peut donc pas
     aller a la ligne, et une longue phrase depasserait sa boite. Elle
     defile ici, dans sa boite, et le jeu garde la lettre a taper sous
     les yeux (voir phrases-magiques.js). */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.jcs-car {
  padding: .05em .04em;
  border-radius: 6px;
  white-space: pre;
}
.jcs-car.is-ok      { background: color-mix(in srgb, var(--jcs-menthe) 65%, transparent); color: #2f3640; }
.jcs-car.is-current { background: var(--jcs-citron); color: #2f3640; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.jcs-car.is-error   { background: var(--jcs-corail); color: #2f3640; animation: jcs-shake .25s; }
.jcs-car.is-espace.is-current { outline: 3px dashed #2f3640; }

/* Ca tourne ! */
.jcs-consigne {
  max-width: 760px;
  margin: 0 auto 1rem;
  line-height: 1.5;
}
.jcs-tourniquet {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  height: min(52vh, 440px);
  border-radius: 26px;
  overflow: hidden;
  border: 5px solid var(--jcs-border);
  background: color-mix(in srgb, var(--jcs-ciel) 14%, var(--jcs-card));
  /* Glisser fait tourner l objet : le navigateur ne doit pas y voir
     un defilement de la page, ni une selection. */
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.jcs-tourniquet.is-prise { cursor: grabbing; }
.jcs-tourniquet canvas   { display: block; width: 100%; height: 100%; }

/* ---------- Onglets de filtrage du menu ---------- */
.jcs-onglets {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  padding: .5rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jcs-ciel) 18%, var(--jcs-card));
  border: 3px solid var(--jcs-border);
}
.jcs-onglet {
  font-family: inherit;
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  font-weight: 700;
  color: var(--jcs-text);
  background: transparent;
  border: 3px solid transparent;
  border-radius: 999px;
  padding: .55rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .1s ease, background .15s ease;
}
.jcs-onglet:hover  { background: color-mix(in srgb, var(--jcs-citron) 35%, transparent); }
.jcs-onglet:active { transform: translateY(1px); }
.jcs-onglet.is-actif {
  background: var(--jcs-citron);
  border-color: #2f3640;
  color: #2f3640;
}

/* Etiquette de theme sur les cartes de jeu */
.jcs-etiquette-jeu {
  align-self: flex-start;
  font-size: .95rem;
  font-weight: 800;
  color: var(--jcs-muted);
  background: color-mix(in srgb, var(--jcs-lilas) 22%, transparent);
  border-radius: 999px;
  padding: .2rem .7rem;
  margin-top: .4rem;
}

/* ---------- Bouton « Jouer » geant, en tete des menus ---------- */
.jcs-lancement { text-align: center; margin: 1.6rem 0 2.4rem; }
.jcs-btn.is-geant {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  padding: 1.3rem 4rem;
  border-radius: 999px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .18);
  gap: .8rem;
  letter-spacing: .01em;
}
.jcs-btn.is-geant:active { box-shadow: 0 3px 0 rgba(0, 0, 0, .16); }
.jcs-lancement .jcs-info-mode { margin-top: .6rem; }

/* ---------- Pouce ! (pause) ---------- */
.jcs-pause-btn {
  position: fixed;
  right: clamp(.8rem, 3vw, 2rem);
  bottom: clamp(.8rem, 3vw, 2rem);
  z-index: 55;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem;
  min-width: clamp(96px, 15vw, 132px);
  padding: .9rem 1.2rem;
  border-radius: 26px;
  font-family: inherit;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
  color: #2f3640;
  background: var(--jcs-citron);
  border: 5px solid rgba(0, 0, 0, .14);
  box-shadow: 0 7px 0 rgba(0, 0, 0, .18);
  cursor: pointer;
}
.jcs-pause-btn:hover  { filter: brightness(1.05); }
.jcs-pause-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.jcs-pause-btn .jcs-pause-main { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1; }
.jcs-pause-btn.is-en-pause { background: var(--jcs-menthe); }

/* ---------- Coque du plein ecran ----------
   La page du dessus garde le plein ecran ; le site vit dans le cadre,
   ou l on peut changer de page sans que le navigateur en sorte. */
body.jcs-porte-cadre { overflow: hidden; }
body.jcs-porte-cadre > *:not(.jcs-cadre) { display: none !important; }
.jcs-cadre {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: var(--jcs-bg);
}

/* ---------- Bouton plein ecran (dans le pied de page) ---------- */
/* Dans la ligne de liens du pied de page, le plein ecran se lit comme
   « Credits » ; sans pied de page, il redevient une pastille flottante. */
.jcs-plein-ecran-btn.is-flottant {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--jcs-text);
  background: var(--jcs-card);
  border: 3px solid var(--jcs-ciel);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .14);
  text-decoration: none;
  cursor: pointer;
  opacity: .85;
  /* Les ateliers pleine page n ont pas de pied de page : le bouton y
     flotte encore, dans le coin oppose a la colonne d outils. */
  position: fixed;
  right: clamp(.8rem, 3vw, 2rem);
  bottom: clamp(.8rem, 3vw, 2rem);
  z-index: 55;
  margin: 0;
}
.jcs-plein-ecran-btn.is-flottant:hover  { opacity: 1; filter: brightness(1.05); }
.jcs-plein-ecran-btn.is-flottant:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .14); }

/* Le voile de pause passe au-dessus du bouton */
.jcs-voile-pause { z-index: 60; }

/* Tout ce qui bouge dans le terrain s'arrete pendant la pause */
.jcs-fige, .jcs-fige * { animation-play-state: paused !important; }

/* Les onglets sont des liens : on annule le style de lien par defaut */
a.jcs-onglet { text-decoration: none; display: inline-flex; align-items: center; }

/* Icone et mot : cote a cote sur grand ecran, le court reste cache */
.jcs-onglet-icone { font-size: 1.1em; }
.jcs-onglet-mot   { margin-left: .4rem; }
.jcs-onglet-court { display: none; }

/* Sur telephone : une grande icone, le mot tout petit dessous.
   Cinq onglets doivent tenir sur la largeur, d ou les mots courts. */
@media (max-width: 560px) {
  .jcs-onglets { gap: .15rem; padding: .35rem; border-radius: 22px; }
  a.jcs-onglet, .jcs-onglet {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
    padding: .45rem .2rem;
    border-radius: 16px;
    white-space: normal;
  }
  .jcs-onglet-icone { font-size: 1.7rem; line-height: 1; }
  .jcs-onglet-mot   { display: none; }
  .jcs-onglet-court {
    display: block;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    margin: 0;
  }
}

/* Tout petit telephone : les cinq onglets tiennent quand meme sur un rang */
@media (max-width: 380px) {
  .jcs-onglets { gap: .1rem; padding: .25rem; }
  a.jcs-onglet, .jcs-onglet { padding: .35rem .1rem; }
  .jcs-onglet-icone { font-size: 1.4rem; }
  .jcs-onglet-court { font-size: .55rem; }
}

/* ---------- Encadre d aide sous un jeu ---------- */
.jcs-aide {
  max-width: 520px;
  margin: 1.6rem auto 0;
  padding: 1rem 1.2rem;
  border-radius: 20px;
  border: 4px dashed var(--jcs-ciel);
  background: color-mix(in srgb, var(--jcs-ciel) 12%, var(--jcs-card));
  text-align: center;
  font-size: 1.05rem;
}
.jcs-aide p { margin: 0; }

/* La demonstration du geste : Maj + a = A */
.jcs-aide-geste {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem;
  margin-bottom: .8rem;
}
.jcs-aide-plus { font-size: 1.5rem; font-weight: 800; color: var(--jcs-muted); }
.jcs-touche-svg { width: clamp(104px, 18vw, 132px); height: auto; }

.jcs-touche-dessin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--jcs-card);
  border: 4px solid #2f3640;
  box-shadow: 0 4px 0 #2f3640;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--jcs-text);
}
.jcs-touche-dessin.is-resultat {
  background: var(--jcs-menthe);
  color: #2f3640;
  border-style: solid;
  box-shadow: none;
}

/* ---------- Mon petit navigateur ---------- */
/* Une coque de navigateur : barre d onglets, barre d adresse, et une
   seule zone qui defile : celle de l onglet actif. */

/* Les onglets : tous de la meme hauteur, poses sur la meme ligne, et
   le bouton « nouvel onglet » avec eux plutot qu au-dessus. */
.jcs-nav-onglets {
  flex: 0 0 auto;
  display: flex; align-items: stretch; gap: .3rem;
  padding: .35rem .5rem .3rem;
  /* La barre glisse de cote quand il y a beaucoup d onglets. Sans le
     overflow-y explicite, le navigateur en deduit un « auto » vertical :
     l ascenseur horizontal mange alors le haut des onglets, qui se
     retrouvent rognes. Le padding du bas lui laisse sa propre voie. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.jcs-nav-onglet {
  display: flex; align-items: center;
  flex: 0 0 auto;                  /* les onglets glissent, ils ne s ecrasent pas */
  max-width: 15rem; min-width: 0;
  min-height: 2.4rem;
  background: color-mix(in srgb, var(--jcs-card) 70%, var(--jcs-bg));
  border: 3px solid var(--jcs-border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding-right: .2rem;
}
.jcs-nav-onglet.is-actif {
  background: var(--jcs-card);
  border-color: var(--jcs-lilas);
  box-shadow: 0 -3px 0 var(--jcs-lilas) inset;
}
.jcs-nav-onglet-titre {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .35rem;
  font-family: inherit; font-size: .95rem; font-weight: 700;
  color: var(--jcs-text);
  background: none; border: none;
  padding: .4rem .3rem .4rem .6rem;
  cursor: pointer;
}
.jcs-nav-onglet-mot {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 11rem;
}
.jcs-nav-onglet-fermer {
  flex: 0 0 auto;
  font-family: inherit; font-size: .8rem; font-weight: 800;
  color: var(--jcs-muted);
  background: none; border: none; border-radius: 50%;
  width: 1.6rem; height: 1.6rem;
  cursor: pointer;
}
.jcs-nav-onglet-fermer:hover { background: var(--jcs-corail); color: #2f3640; }
.jcs-nav-plus {
  flex: 0 0 auto;
  display: flex; align-items: center;
  font-family: inherit; font-size: 1.1rem;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  padding: .25rem .7rem;
  cursor: pointer;
}
.jcs-nav-plus:hover { border-color: var(--jcs-lilas); }

/* La barre d adresse : ici, c est une barre de recherche, pas une URL */
.jcs-nav-barre {
  flex: 0 0 auto; flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;              /* meme raison que la barre d onglets */
  scrollbar-width: thin;
}
/* Quand une boite qui defile se termine, les navigateurs oublient son
   padding de droite : le dernier bouton (le dossier des favoris) se
   retrouvait coupe. Ce faux element rend cette marge inoubliable. */
.jcs-nav-barre::after { content: ''; flex: 0 0 .4rem; align-self: stretch; }
/* Les boutons gardent leur taille, c est le champ de recherche qui cede
   la place : un bouton a moitie ecrase ne se lit plus. */
.jcs-nav-barre > .jcs-menu-btn,
.jcs-nav-barre > .jcs-menu-info,
.jcs-nav-barre > .jcs-separateur { flex: 0 0 auto; }
.jcs-nav-adresse {
  flex: 1 1 9rem; min-width: 0;
  display: flex; align-items: center; gap: .35rem;
}
.jcs-nav-adresse .jcs-menu-btn { flex: 0 0 auto; }
.jcs-nav-champ {
  flex: 1 1 auto; min-width: 0;
  font-family: inherit; font-size: 1.05rem;
  color: var(--jcs-text);
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 999px;
  padding: .4rem 1rem;
}
.jcs-nav-champ:focus { outline: none; border-color: var(--jcs-ciel); }

/* Ou l on cherche : le bouton de la barre, et sa petite fenetre */
.jcs-nav-ou { position: relative; flex: 0 0 auto; }
/* La fenetre flotte au-dessus de la page : la barre du haut defile de
   cote, elle y serait coupee. Sa place est calculee en JS. */
.jcs-nav-ou-menu {
  position: fixed; z-index: 60;
  width: min(19rem, 80vw);
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 16px;
  padding: .45rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
  text-align: left;
}
/* Sans cette ligne, le display:flex ci-dessus l emporte sur la regle du
   navigateur pour [hidden] : la fenetre resterait ouverte pour toujours. */
.jcs-nav-ou-menu[hidden] { display: none; }

.jcs-nav-ou-item {
  font-family: inherit;
  display: flex; flex-direction: column; gap: .1rem;
  color: var(--jcs-text);
  background: none;
  border: 3px solid transparent;
  border-radius: 12px;
  padding: .4rem .6rem;
  cursor: pointer;
  text-align: left;
}
.jcs-nav-ou-item:hover { border-color: var(--jcs-lilas); }
.jcs-nav-ou-item.is-choisi { border-color: var(--jcs-menthe); }
.jcs-nav-ou-nom    { font-size: 1rem; font-weight: 800; }

/* L embleme d une source : son logo, l emoji dessous s il ne vient pas */
.jcs-nav-embleme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3em; height: 1.3em;
  vertical-align: -.25em;
}
.jcs-nav-embleme img { width: 100%; height: 100%; object-fit: contain; }
.jcs-nav-embleme:has(img) .jcs-nav-embleme-mot { display: none; }
.jcs-nav-ou-resume { font-size: .85rem; color: var(--jcs-muted); }
.jcs-nav-ou-autres {
  font-family: inherit; font-size: .85rem; font-weight: 700;
  color: var(--jcs-muted);
  background: none; border: none;
  border-top: 3px dotted var(--jcs-border);
  padding: .45rem .6rem 0;
  margin-top: .1rem;
  cursor: pointer;
  text-align: left;
}
.jcs-nav-ou-autres:hover { color: var(--jcs-text); }

/* La seule zone qui defile : le contenu de l onglet actif */
.jcs-nav-page {
  position: relative;              /* le lien « autres sources » s y accroche */
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  padding: 1rem clamp(.6rem, 3vw, 2rem);
}

/* La page d accueil de l onglet, facon moteur de recherche.
   Le champ attend au milieu de la hauteur, comme sur les vrais moteurs ;
   « safe » garde le haut visible quand le contenu deborde (les nouvelles
   de la semaine, par exemple). */
.jcs-nav-accueil, .jcs-nav-message {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(1rem, 4vh, 3rem) 0;
  text-align: center;
}
.jcs-nav-accueil {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  min-height: 100%;
}

/* Le coin en haut a droite : les actus, et les sources rangees */
.jcs-nav-coin {
  position: absolute; top: .5rem; right: .8rem;
  display: flex; align-items: center; gap: .2rem;
  z-index: 2;
}
.jcs-nav-autres {
  font-family: inherit; font-size: .9rem; font-weight: 700;
  color: var(--jcs-muted);
  background: none;
  border: none;
  border-radius: 999px;
  padding: .25rem .6rem;
  cursor: pointer;
}
.jcs-nav-autres:hover { color: var(--jcs-text); background: var(--jcs-bg); }

/* Tourner les pages de l archive */
/* La colonne de gauche est étroite : les deux flèches et le numéro de page
   tiennent sur une seule ligne, une flèche à chaque bord, le numéro au
   milieu. Sans le nowrap, « Après » passait seul à la ligne suivante. */
.jcs-nav-pages {
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; flex-wrap: nowrap;
  margin: 1rem 0 .3rem;
}
.jcs-nav-pages .jcs-btn {
  padding: .3rem .8rem; font-size: .9rem; border-width: 2px;
  white-space: nowrap; flex: 0 0 auto;
}
.jcs-nav-pages .jcs-menu-info {
  flex: 1 1 auto; text-align: center; white-space: nowrap;
}
.jcs-nav-logo  { font-size: clamp(3rem, 9vh, 4.5rem); line-height: 1; }
.jcs-nav-titre { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; margin: .2rem 0 .4rem; }
.jcs-nav-grande-recherche {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
  margin: 1.2rem auto 0;
}
.jcs-nav-grand-champ {
  flex: 1 1 18rem; max-width: 26rem;
  border-radius: 999px;
  text-align: left;
}
.jcs-nav-sources,
.jcs-nav-suggestions {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1rem;
}
.jcs-nav-suggestion {
  font-family: inherit; font-size: 1rem; font-weight: 700;
  color: var(--jcs-text);
  background: color-mix(in srgb, var(--jcs-ciel) 18%, var(--jcs-card));
  border: 3px solid var(--jcs-border);
  border-radius: 999px;
  padding: .4rem .9rem;
  cursor: pointer;
}
.jcs-nav-suggestion:hover { border-color: var(--jcs-ciel); }

/* La liste des reponses */
.jcs-nav-resultats { max-width: 780px; margin: 0 auto; }
.jcs-nav-compte { color: var(--jcs-muted); font-size: .95rem; margin-bottom: .8rem; }
.jcs-nav-resultat {
  padding: .8rem 0;
  border-bottom: 3px dotted var(--jcs-border);
}
.jcs-nav-resultat h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 .2rem; }
.jcs-nav-extrait { color: var(--jcs-text); font-size: 1rem; margin: 0 0 .4rem; }
.jcs-nav-pied { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.jcs-nav-source { color: var(--jcs-muted); font-size: .9rem; font-weight: 700; }

/* L article : remonte de l encyclopedie, puis reconstruit chez nous */
.jcs-nav-article { max-width: 760px; margin: 0 auto; min-width: 0; }
.jcs-nav-article-tete {
  border-bottom: 3px solid var(--jcs-border);
  padding-bottom: .6rem;
  margin-bottom: 1rem;
}
.jcs-nav-article-tete h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; line-height: 1.15;
  margin-bottom: .2rem;
}
/* Le texte vient d ailleurs : il peut contenir un nom de molecule ou une
   adresse a rallonge. On le laisse se couper plutot que deborder. */
.jcs-nav-corps {
  font-size: 1.08rem; line-height: 1.6;
  max-width: 100%; min-width: 0;
  overflow-wrap: break-word;
}
.jcs-nav-corps p  { margin: 0 0 .9rem; }
.jcs-nav-corps h2 { font-size: 1.5rem;  font-weight: 800; margin: 1.6rem 0 .5rem; }
.jcs-nav-corps h3 { font-size: 1.25rem; font-weight: 800; margin: 1.2rem 0 .4rem; }
.jcs-nav-corps h4 { font-size: 1.1rem;  font-weight: 800; margin: 1rem 0 .3rem; }
.jcs-nav-corps ul { list-style: disc;    padding-left: 1.6rem; margin: 0 0 .9rem; }
.jcs-nav-corps ol { list-style: decimal; padding-left: 1.6rem; margin: 0 0 .9rem; }
.jcs-nav-corps li { margin-bottom: .25rem; }
/* Une liste dans une liste ne recree pas l espace de fin de liste */
.jcs-nav-corps li > ul,
.jcs-nav-corps li > ol { margin-bottom: 0; }
/* Les wikis decalent une ligne (une formule, un exemple) avec dl/dd */
.jcs-nav-corps dl { margin: 0 0 .9rem; }
.jcs-nav-corps dt { font-weight: 800; }
.jcs-nav-corps dd { margin: 0 0 .3rem 1.6rem; }
.jcs-nav-corps blockquote {
  border-left: 5px solid var(--jcs-citron);
  padding-left: .9rem; margin: 0 0 .9rem;
  color: var(--jcs-muted);
}
.jcs-nav-corps img {
  max-width: 100%; height: auto;
  border-radius: 12px;
  border: 3px solid var(--jcs-border);
}
.jcs-nav-corps figure { margin: 1rem auto; text-align: center; max-width: 100%; }
.jcs-nav-corps figcaption { color: var(--jcs-muted); font-size: .92rem; margin-top: .3rem; }
/* Le cadre d une image ne mene nulle part : pas de soulignement dessous,
   ni de fond de survol, sinon chaque photo semblait posee sur un trait. */
.jcs-nav-corps a:has(img),
.jcs-nav-corps a:has(img):hover { text-decoration: none; background: none; }

/* ---------- Ce que l encyclopedie rangeait dans la marge ----------
   Une encyclopedie pose a cote du texte la fiche d identite d un pays ou
   d un animal (l « infobox »), les petites boites « Le savais-tu ? », et
   les vignettes legendees. Elle les met de cote avec sa feuille de style
   a elle, que nous n avons pas : sans habit, toutes ces boites retombaient
   en travers de la colonne, et il fallait derouler la fiche du chat en
   entier avant de lire la premiere phrase de l article.
   Elles retrouvent ici leur place : a cote du texte sur un ecran
   d ordinateur, au-dessus, sur toute la largeur, sur un ecran etroit. */

/* La fiche d identite et les encadres. Leur largeur ne depasse jamais le
   tiers de la colonne : le texte garde de quoi se lire. */
.jcs-nav-corps .jcs-nav-encadre {
  float: right;
  clear: right;
  width: clamp(210px, 36%, 320px);
  max-width: 100%;
  margin: .2rem 0 1rem 1.2rem;
  padding: .5rem .6rem;
  background: color-mix(in srgb, var(--jcs-ciel) 10%, var(--jcs-card));
  border: 3px solid var(--jcs-border);
  border-radius: 16px;
  font-size: .92rem;
  /* Une fiche a rallonge defile dans sa boite plutot que de pousser la
     colonne de lecture vers la droite. */
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Dans un encadre, le tableau prend la boite et rien de plus : ses
   largeurs d origine sont parties avec le style. Ses lignes se separent
   d un pointille, car un quadrillage complet, a cette taille, ne se lit
   plus. */
.jcs-nav-corps .jcs-nav-encadre table { width: 100%; font-size: inherit; }
.jcs-nav-corps .jcs-nav-encadre th,
.jcs-nav-corps .jcs-nav-encadre td {
  border: none;
  border-bottom: 2px dotted var(--jcs-border);
  padding: .3rem .3rem;
  vertical-align: top;
}
.jcs-nav-corps .jcs-nav-encadre tr:last-child th,
.jcs-nav-corps .jcs-nav-encadre tr:last-child td { border-bottom: none; }
.jcs-nav-corps .jcs-nav-encadre th { background: none; font-weight: 800; }
.jcs-nav-corps .jcs-nav-encadre img,
.jcs-nav-corps .jcs-nav-encadre td img,
.jcs-nav-corps .jcs-nav-encadre th img { max-width: 100%; height: auto; }
.jcs-nav-corps .jcs-nav-encadre p { margin: 0 0 .4rem; }
.jcs-nav-corps .jcs-nav-encadre figure { margin: .4rem auto; }
.jcs-nav-corps .jcs-nav-encadre ul,
.jcs-nav-corps .jcs-nav-encadre ol { padding-left: 1.1rem; margin-bottom: .4rem; }
/* Un encadre dans un encadre ne flotte plus : il est deja dans la marge */
.jcs-nav-corps .jcs-nav-encadre .jcs-nav-encadre,
.jcs-nav-corps .jcs-nav-encadre .jcs-nav-vignette {
  float: none; width: auto; max-width: 100%;
  margin: .4rem 0;
}

/* Les vignettes legendees : le texte coule autour, comme dans l original.
   Sans largeur imposee, une legende a rallonge etirerait la vignette
   jusqu au bord de la colonne. */
.jcs-nav-corps .jcs-nav-vignette {
  max-width: clamp(180px, 38%, 320px);
  margin: .2rem 0 .8rem;
}
.jcs-nav-corps .jcs-nav-vignette.is-droite {
  float: right; clear: right; margin-left: 1.2rem;
}
.jcs-nav-corps .jcs-nav-vignette.is-gauche {
  float: left; clear: left; margin-right: 1.2rem;
}
/* Un titre ne se glisse pas dans le creux laisse par une vignette :
   la section qu il annonce commencerait a mi-hauteur d une image. */
.jcs-nav-corps h2 { clear: both; }

/* Les listes qu un wiki ecrit sur une seule ligne (les portails du bas de
   page, les palettes de pays) : en ligne ici aussi, un point entre deux,
   plutot qu une puce par pays sur trente lignes. */
.jcs-nav-corps .jcs-nav-liste-ligne {
  list-style: none;
  padding-left: 0;
  margin: 0 0 .4rem;
}
.jcs-nav-corps .jcs-nav-liste-ligne li { display: inline; margin: 0; }
.jcs-nav-corps .jcs-nav-liste-ligne li + li::before {
  content: ' · ';
  color: var(--jcs-muted);
}

/* Ces boites flottent : sans ce trait invisible, la derniere depassait du
   bas de l article et venait mordre sur ce qui le suit. */
.jcs-nav-corps::after { content: ''; display: block; clear: both; }

/* Une galerie du wiki est un <ul> : sans habit, ses vignettes tombaient en
   file indienne, chacune derriere sa puce. Ici, une vraie grille : autant
   de colonnes que la largeur en autorise, et plus une seule puce. */
.jcs-nav-galerie {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8rem;
  align-items: start;
}
.jcs-nav-galerie-case {
  margin: 0;
  min-width: 0;
  text-align: center;
  font-size: .92rem;
}
.jcs-nav-galerie-case figure { margin: 0; }
.jcs-nav-galerie-case p { margin: .3rem 0 0; }
/* La vignette garde sa taille d origine : etiree, elle deviendrait floue */
.jcs-nav-galerie-case img { max-width: 100%; height: auto; }

/* Un tableau large defile dans sa propre boite, jamais la page entiere.
   C est la boite qui defile, pas le tableau : ainsi ses bordures restent
   collees les unes aux autres. */
.jcs-nav-tableau {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  margin: 0 0 1rem;
}
.jcs-nav-corps table {
  border-collapse: collapse;
  margin: 0;
  font-size: .96rem;
}
.jcs-nav-corps caption {
  caption-side: top;
  color: var(--jcs-muted); font-size: .92rem; font-weight: 700;
  text-align: left;
  padding-bottom: .3rem;
}
.jcs-nav-corps th, .jcs-nav-corps td {
  border: 2px solid var(--jcs-border);
  padding: .3rem .5rem;
  text-align: left;
}
.jcs-nav-corps th { background: color-mix(in srgb, var(--jcs-lilas) 18%, var(--jcs-card)); }
/* Dans un tableau, une image reste a sa place plutot que de l elargir */
.jcs-nav-corps td img, .jcs-nav-corps th img { max-width: 260px; }
.jcs-nav-corps sup { font-size: .7em; }

/* Une formule de maths est une image de texte, pas une photo : ni cadre,
   ni coins arrondis, et elle s aligne sur la ligne de texte. */
.jcs-nav-corps .jcs-nav-formule {
  border: none;
  border-radius: 0;
  background: none;
  vertical-align: middle;
  max-width: 100%;
}
/* En theme sombre, les dessins des encyclopedies restent noirs sur fond
   transparent : sans ce fond clair, schemas et cartes disparaissaient. */
html[data-theme="dark"] .jcs-nav-corps img { background: #fff; }
/* Une formule, elle, n a pas de fond a elle : on retourne ses couleurs
   pour qu elle s ecrive en clair, comme le texte qui l entoure. */
html[data-theme="dark"] .jcs-nav-corps .jcs-nav-formule {
  background: none;
  filter: invert(1);
}

/* Les liens : ceux du wiki naviguent chez nous, les autres ne font rien */
.jcs-nav-lien {
  color: var(--jcs-text);
  text-decoration: underline 3px var(--jcs-ciel);
  cursor: pointer;
}
.jcs-nav-lien:hover {
  color: var(--jcs-text);
  background: color-mix(in srgb, var(--jcs-ciel) 25%, transparent);
}
.jcs-nav-lien.is-dehors { text-decoration-color: var(--jcs-border); color: var(--jcs-muted); }
.jcs-nav-bulle {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .85rem; font-weight: 700;
  background: var(--jcs-citron);
  color: #2f3640;
}

/* Les favoris, ranges par personne */
.jcs-nav-favoris { display: flex; flex-direction: column; gap: .35rem; }
.jcs-nav-favori  { display: flex; gap: .35rem; align-items: stretch; }
.jcs-nav-favori-titre {
  flex: 1 1 auto; min-width: 0;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Netbook 1024x600 : les deux barres du haut se serrent */
@media (max-width: 1100px), (max-height: 780px) {
  .jcs-nav-onglets      { padding: .2rem .2rem .25rem; gap: .15rem; }
  .jcs-nav-onglet       { max-width: 10rem; }
  .jcs-nav-onglet-mot   { max-width: 7rem; font-size: .88rem; }
  .jcs-nav-onglet-titre { padding: .25rem .2rem .25rem .45rem; }
  .jcs-nav-champ        { font-size: .98rem; padding: .3rem .8rem; }
  .jcs-nav-page         { padding: .7rem .8rem; }
  .jcs-nav-corps        { font-size: 1rem; }
  /* Sur un petit ecran, des vignettes plus petites, mais toujours en grille */
  .jcs-nav-galerie      { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
  /* Les huit suggestions doivent rester visibles sans faire defiler */
  .jcs-nav-accueil, .jcs-nav-message { padding: .4rem 0; }
  .jcs-nav-logo         { font-size: 2.6rem; }
  .jcs-nav-titre        { font-size: 1.5rem; margin: .1rem 0 .2rem; }
  .jcs-nav-accueil .jcs-subtitle { font-size: 1rem; }
  .jcs-nav-grande-recherche { margin-top: .7rem; }
  .jcs-nav-sources, .jcs-nav-suggestions { margin-top: .6rem; gap: .35rem; }
  .jcs-nav-suggestion   { font-size: .95rem; padding: .3rem .75rem; }
}

/* Ecran etroit : plus rien ne flotte. La fiche d identite et les vignettes
   se posent sur toute la largeur, au-dessus du texte qu elles accompagnent,
   et l article se lit d une seule colonne, du haut vers le bas. */
@media (max-width: 720px) {
  .jcs-nav-corps .jcs-nav-encadre,
  .jcs-nav-corps .jcs-nav-vignette,
  .jcs-nav-corps .jcs-nav-vignette.is-droite,
  .jcs-nav-corps .jcs-nav-vignette.is-gauche {
    float: none;
    clear: both;
    width: auto;
    max-width: 100%;
    margin: .6rem 0 1rem;
  }
}

/* =========================================================
   La loupe et Les quatre flèches
   Les deux jeux qui affichent une scène en trois dimensions
   partagent le cadre .jcs-tourniquet ; ce qui suit ne concerne
   que leurs commandes et leurs repères.
   ========================================================= */

/* Le repli de la molette : visible dès la première seconde, jamais caché
   derrière un délai, car sans molette le jeu serait infranchissable. */
.jcs-loupe-boutons {
  display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: .4rem;
}
.jcs-loupe-boutons .jcs-btn { min-width: 4.4rem; justify-content: center; font-size: 1.4rem; }
.jcs-loupe-boutons .jcs-btn.is-ghost { font-size: 1rem; }
.jcs-loupe-boutons .jcs-btn.is-choisi { outline: 4px solid var(--jcs-lilas); }

/* Le damier a besoin de plus de hauteur que le manège : sur sept rangées,
   une case du fond ferait moins de cinquante pixels. */
.jcs-tourniquet.is-damier { height: min(62vh, 520px); cursor: default; }

/* La rose des vents, sous le damier : elle reste affichée en permanence,
   parce que la flèche du haut éloigne l'objet au lieu de le monter. */
.jcs-rose {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
  max-width: 780px; margin: 1rem auto 0;
}
.jcs-rose-touche {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 3px solid var(--jcs-border);
  background: var(--jcs-card);
  font-weight: 700;
  font-size: clamp(.95rem, 1.7vw, 1.15rem);
}
.jcs-rose-touche .jcs-rose-fleche { font-size: 1.35rem; line-height: 1; }
.jcs-rose-touche.is-appuyee { background: var(--jcs-citron); color: #2f3640; }

/* =========================================================
   L'ascenseur
   Un immeuble en coupe, dessiné à plat : le cadre est plus
   haut que large, contrairement au manège et au damier.
   ========================================================= */
.jcs-immeuble {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  height: min(64vh, 540px);
  border-radius: 26px;
  overflow: hidden;
  border: 5px solid var(--jcs-border);
  background: color-mix(in srgb, var(--jcs-citron) 12%, var(--jcs-card));
  /* La molette pilote la cabine : le navigateur ne doit y voir ni
     défilement de la page, ni sélection de texte. */
  touch-action: none;
  user-select: none;
  cursor: ns-resize;
}
.jcs-immeuble canvas { display: block; width: 100%; height: 100%; }

/* =========================================================
   LA SÉRIE : plusieurs jeux à la suite
   Un bandeau sous la navbar sur les pages de jeu, un grand
   panneau sur l accueil, et le tableau des scores de fin.
   ========================================================= */

/* ---------- Le bandeau des pages de jeu ---------- */
.jcs-serie-bandeau {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem .9rem;
  padding: .5rem 1rem;
  background: color-mix(in srgb, var(--jcs-citron) 45%, var(--jcs-bg));
  border-bottom: 3px solid var(--jcs-border);
  font-weight: 700;
}
.jcs-serie-etiquette { font-size: 1.05rem; white-space: nowrap; }
.jcs-serie-mot       { color: var(--jcs-text); flex: 1 1 12rem; }
.jcs-serie-bandeau .jcs-btn { padding: .45rem 1rem; font-size: 1rem; }

.jcs-serie-pastilles { display: flex; gap: .3rem; flex-wrap: wrap; }
.jcs-serie-pastille {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  font-size: 1rem; line-height: 1;
  opacity: .55;
}
.jcs-serie-pastille.is-fait    { opacity: 1; border-color: var(--jcs-menthe); }
.jcs-serie-pastille.is-courant {
  opacity: 1;
  border-color: var(--jcs-text);
  transform: scale(1.12);
}

/* ---------- Le panneau de l accueil ---------- */
.jcs-serie-accueil { margin: 0 0 2rem; }
.jcs-serie-carte {
  background: var(--jcs-card);
  border: 4px solid var(--jcs-citron);
  border-radius: 26px;
  padding: 1.6rem 1.4rem;
  box-shadow: var(--jcs-shadow);
  text-align: center;
}
.jcs-serie-carte h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; margin-bottom: .4rem; }
.jcs-serie-carte .jcs-subtitle { max-width: 46rem; margin: 0 auto 1.2rem; }
.jcs-serie-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.4rem;
}

/* La liste ordonnee : c est la serie qu on est en train de composer */
.jcs-serie-liste {
  list-style: none; margin: 1rem auto; padding: 0;
  max-width: 34rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.jcs-serie-ligne {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  border: 3px solid var(--jcs-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--jcs-ciel) 12%, transparent);
}
.jcs-serie-ligne.is-fait    { border-color: var(--jcs-menthe); }
.jcs-serie-ligne.is-courant { border-color: var(--jcs-citron); background: color-mix(in srgb, var(--jcs-citron) 22%, transparent); }
.jcs-serie-num {
  width: 2rem; height: 2rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  font-weight: 800;
}
.jcs-serie-nom   { flex: 1 1 auto; text-align: left; font-weight: 700; }
.jcs-serie-note  { color: var(--jcs-muted); font-size: .92rem; white-space: nowrap; }
.jcs-serie-ligne .jcs-menu-btn { padding: .25rem .5rem; }

/* Les jeux qu on peut encore ajouter */
.jcs-serie-dispo { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: .6rem; }
.jcs-serie-dispo .jcs-menu-btn { font-size: .98rem; }
.jcs-serie-dispo .jcs-menu-btn.is-pris { opacity: .45; }

/* ---------- Le tableau des scores ---------- */
.jcs-serie-tableau-boite { overflow-x: auto; margin: 1.2rem 0 .4rem; }
.jcs-serie-tableau {
  border-collapse: collapse;
  margin: 0 auto;
  min-width: min(100%, 30rem);
}
.jcs-serie-tableau th,
.jcs-serie-tableau td {
  border: 3px solid var(--jcs-border);
  padding: .5rem .7rem;
  text-align: center;
  font-size: 1rem;
}
.jcs-serie-tableau thead th {
  background: color-mix(in srgb, var(--jcs-lilas) 22%, transparent);
  font-weight: 800;
}
.jcs-serie-tableau tbody th { text-align: left; white-space: nowrap; font-weight: 800; }
.jcs-serie-tableau tbody tr.is-premier { background: color-mix(in srgb, var(--jcs-citron) 28%, transparent); }
.jcs-serie-tableau td strong { font-size: 1.25rem; }
.jcs-serie-vide { color: var(--jcs-muted); }
.jcs-serie-col-total { background: color-mix(in srgb, var(--jcs-menthe) 20%, transparent); }
.jcs-serie-col-emoji { display: block; font-size: 1.4rem; line-height: 1.2; }
.jcs-serie-col-nom   { display: block; font-size: .82rem; font-weight: 700; max-width: 7rem; }
.jcs-serie-medaille  { font-size: 1.3rem; }

/* Sur un petit ecran, le tableau garde ses emojis mais perd les mots */
@media (max-width: 700px) {
  .jcs-serie-col-nom { display: none; }
  .jcs-serie-tableau th, .jcs-serie-tableau td { padding: .4rem .5rem; }
}

/* Le nombre de tentatives, discret a cote de la meilleure manche */
.jcs-serie-essais {
  display: block;
  font-size: .75rem; font-weight: 700;
  color: var(--jcs-muted);
}

/* Sortie de secours du bandeau, la ou la page n a pas de pied */
.jcs-serie-sortie { font-size: .9rem; white-space: nowrap; }

/* Hors serie, le bloc de l accueil est vide : il ne doit pas
   pour autant creuser un blanc au milieu de la page. */
.jcs-serie-accueil:empty { display: none; margin: 0; }

/* Dans les ateliers plein ecran, le bandeau ne doit rien voler a la feuille */
.jcs-appli-pleine .jcs-serie-bandeau {
  flex: 0 0 auto;
  padding: .3rem .7rem;
  font-size: .95rem;
}
.jcs-appli-pleine .jcs-serie-bandeau .jcs-btn { padding: .3rem .7rem; font-size: .9rem; }
.jcs-appli-pleine .jcs-serie-pastille { width: 1.6rem; height: 1.6rem; font-size: .85rem; border-width: 2px; }

/* Le grand bouton « on continue » du suivi de serie */
.jcs-serie-continuer { font-size: clamp(1.1rem, 2vw, 1.35rem); padding: .9rem 1.8rem; }

/* =========================================================
   LE MENU BURGER
   La barre du haut ne garde que la marque et le retour ; tout le
   reste (qui joue, les series, le son, la nuit) tient dans un
   panneau qui se deplie sous un seul bouton.
   ========================================================= */
.jcs-burger { position: relative; }
.jcs-burger-panneau {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 50;
  min-width: 15rem;
  display: flex; flex-direction: column; gap: .4rem;
  padding: .6rem;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .12);
}
.jcs-burger-panneau .jcs-menu-btn { justify-content: flex-start; width: 100%; }


/* =========================================================
   CHACUN SON TOUR, A LA MONTRE
   Le temps qui reste se lit deux fois : en chiffres dans la barre
   du haut, et d'un coup d'oeil dans le trait qui court au ras du
   bas de l'ecran. Les trente dernieres secondes passent au corail.
   ========================================================= */
.jcs-tours-chrono {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: #2f3640;
  font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--jcs-shadow);
}
html[data-theme="dark"] .jcs-tours-chrono { background: rgba(255, 255, 255, .15); color: var(--jcs-text); }
.jcs-tours-chrono.is-bientot,
html[data-theme="dark"] .jcs-tours-chrono.is-bientot {
  background: var(--jcs-corail); color: #2f3640;
  animation: jcs-tours-bat 1s ease-in-out infinite;
}
@keyframes jcs-tours-bat { 50% { transform: scale(1.07); } }
.jcs-navbar.is-mini .jcs-tours-chrono { padding: .25rem .65rem; font-size: 1rem; }

/* Le trait du bas : au-dessus du « Pouce ! », sous les fenetres. */
.jcs-tours-barre {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 6px;
  z-index: 57;
  background: var(--jcs-border);
  pointer-events: none;
}
.jcs-tours-barre > div {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--jcs-menthe), var(--jcs-ciel));
  transition: width .25s linear;
}
.jcs-tours-barre.is-bientot > div { background: var(--jcs-corail); }

/* La fenetre du passage de main passe devant tout, et ne se ferme pas. */
.jcs-tours-fenetre { z-index: 70; }

.jcs-tours-joueur { border: 3px solid transparent; }
.jcs-tours-joueur.is-choisi { border-color: #2f3640; }
.jcs-tours-joueur:not(.is-choisi) { opacity: .65; }

/* Pendant un tour, le bouton du joueur n'est plus qu'une etiquette. */
#jcs-joueur-btn:disabled { opacity: 1; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .jcs-tours-chrono.is-bientot { animation: none; }
  .jcs-tours-barre > div { transition: none; }
}


/* =========================================================
   LE DRAPEAU DES LANGUES
   Le site parle cinq langues : la barre du haut montre celle de
   la page, et le drapeau ouvre la liste des autres. Le panneau
   est celui du burger, dans un autre coin : c'est le meme geste,
   il doit avoir la meme forme.

   Sur les pages ouvertes telles quelles, et dans l'archive hors
   ligne, ce bloc ne s'affiche pas : le site n'y parle qu'une
   langue, et le JavaScript ne dessine alors aucun drapeau.
   ========================================================= */
.jcs-langues { position: relative; }
.jcs-langue-panneau {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 50;
  min-width: 12rem;
  display: flex; flex-direction: column; gap: .4rem;
  padding: .6rem;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .12);
}
.jcs-langue-panneau .jcs-menu-btn {
  justify-content: flex-start;
  width: 100%;
  gap: .6rem;
}
/* La langue de la page reste dans la liste, mais elle ne se clique
   pas : elle dit ou l'on est, elle n'emmene nulle part. */
.jcs-langue-panneau .jcs-menu-btn.is-choisi {
  background: var(--jcs-menthe);
  border-color: transparent;
  cursor: default;
}
/* Un drapeau se lit a sa forme : il lui faut de la place. */
/* Le drapeau est un dessin (voir langues/liste.js) : on lui donne sa
   boite, et un filet clair pour que le blanc du drapeau francais ne se
   perde pas dans la barre. */
.jcs-drapeau { display: inline-block; width: 1.6em; height: 1.07em; line-height: 0;
               border-radius: 3px; overflow: hidden; vertical-align: -.15em;
               box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.jcs-drapeau svg { display: block; width: 100%; height: 100%; }

/* Dans les ateliers, la barre se resserre : il ne reste que le
   drapeau, qui suffit a se reconnaitre. */
.jcs-navbar.is-mini #jcs-langue-btn .jcs-mot { display: none; }

/* =========================================================
   LES NIVEAUX ET LES REGLAGES AVANCES
   ========================================================= */
.jcs-avance {
  max-width: 46rem;
  margin: 1.2rem auto 0;
  border: 3px dashed var(--jcs-border);
  border-radius: 18px;
  padding: 0 1rem;
  text-align: center;
}
.jcs-avance[open] { padding-bottom: 1rem; }
.jcs-avance > summary {
  cursor: pointer;
  list-style: none;
  padding: .7rem .4rem;
  font-weight: 700;
  color: var(--jcs-muted);
}
.jcs-avance > summary::-webkit-details-marker { display: none; }
.jcs-avance > summary::before { content: "▸ "; }
.jcs-avance[open] > summary::before { content: "▾ "; }
.jcs-avance > summary:hover { color: var(--jcs-text); }
/* Les titres des reglages, une fois replies, n'ont plus a crier */
.jcs-avance .jcs-big { font-size: 1.05rem; margin-top: 1rem; }

/* =========================================================
   LE PIED DE PAGE : une ligne de liens, sous le texte
   ========================================================= */
.jcs-footer-liens {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .9rem;
  margin-top: .6rem;
}
.jcs-footer-liens > * + *::before {
  content: "·";
  margin-right: .9rem;
  color: var(--jcs-muted);
  text-decoration: none;
  display: inline-block;
}
/* Un bouton qui doit se lire comme le lien « Credits » */
button.jcs-lien {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* =========================================================
   COMPOSER UNE SERIE SUR LES VRAIES CARTES
   Pendant la composition, la grille des jeux ne se joue plus :
   elle se choisit. Chaque carte troque son bouton « Jouer »
   contre un bouton « Ajouter a la serie ».
   ========================================================= */
#grille.is-selection .jcs-card.is-dans-la-serie {
  border-color: var(--jcs-menthe);
  background: color-mix(in srgb, var(--jcs-menthe) 12%, var(--jcs-card));
}
#grille.is-selection .jcs-card > [data-choisir] { margin-top: 1.2rem; }

/* Les trois pastilles de niveau, sur la ligne d un jeu de la serie */
.jcs-serie-paliers { display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.jcs-palier-pastille {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--jcs-border);
  background: var(--jcs-card);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  opacity: .5;
}
.jcs-palier-pastille:hover    { opacity: .85; }
.jcs-palier-pastille.is-choisi {
  opacity: 1;
  border-color: var(--jcs-text);
  background: var(--jcs-citron);
}

/* =========================================================
   PARTIR D UNE SERIE TOUTE FAITE, OU D UNE SERIE GARDEE
   ========================================================= */
.jcs-modeles > summary { color: var(--jcs-text); }
.jcs-modeles-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .8rem;
  margin: .8rem 0;
}
.jcs-modele {
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  padding: .9rem;
  background: color-mix(in srgb, var(--jcs-lilas) 8%, var(--jcs-card));
  text-align: left;
  display: flex; flex-direction: column; gap: .4rem;
}
.jcs-modele.is-repris { border-color: var(--jcs-citron); }
.jcs-modele-titre  { font-weight: 800; font-size: 1.1rem; }
.jcs-modele-resume { color: var(--jcs-muted); font-size: .95rem; margin: 0; flex: 1 1 auto; }
.jcs-modele-jeux   { font-size: 1.3rem; margin: 0; }
.jcs-modele-actions { display: flex; gap: .4rem; align-items: center; }
.jcs-modele-actions .jcs-btn { padding: .45rem 1rem; font-size: .98rem; }

/* La poignee qui sert a ranger les jeux dans l ordre, a la souris */
.jcs-poignee {
  flex: 0 0 auto;
  cursor: grab;
  color: var(--jcs-muted);
  font-size: 1.2rem;
  padding: 0 .2rem;
  user-select: none;
}
.jcs-serie-ligne[draggable="true"] { cursor: default; }
.jcs-serie-ligne.is-tire  { opacity: .45; }
.jcs-serie-ligne.is-cible { border-color: var(--jcs-lilas); border-style: dashed; }

/* Le nom de la serie, et son lien a copier */
.jcs-serie-carte .jcs-input { width: min(100%, 26rem); text-align: center; }
.jcs-permalien { margin-top: .8rem; }

/* =========================================================
   MON PETIT NAVIGATEUR : LA RECHERCHE D IMAGES
   Une grille de vignettes, chacune avec son titre, son auteur et sa
   licence : une image libre le reste a condition de dire d ou elle
   vient. Une fois ouverte, l image passe a droite dans le meme duo
   que les nouvelles (.jcs-nav-duo), et la grille se resserre.
   ========================================================= */
.jcs-nav-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .7rem;
  width: min(100%, 900px);
  margin: .6rem auto 0;
}

.jcs-nav-image-carte {
  border: 3px solid var(--jcs-border);
  border-radius: 16px;
  background: var(--jcs-card);
  padding: .4rem;
  min-width: 0;
}
.jcs-nav-image-carte:hover { border-color: var(--jcs-lilas); }
.jcs-nav-image-carte.is-choisie { border-color: var(--jcs-menthe); }

.jcs-nav-image-ouvrir {
  display: flex; flex-direction: column; gap: .3rem;
  width: 100%; min-width: 0;
  text-align: left;
  font-family: inherit;
  color: var(--jcs-text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Chaque case reserve la meme zone : les images de Commons sont de
   toutes les formes, posees entieres elles laisseraient la grille en
   escalier. L image ouverte, elle, se montre toujours entiere. */
.jcs-nav-image-vignette {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 10px;
}

/* Deux lignes de titre au plus : les noms de fichiers de Commons sont
   parfois des phrases entieres, et toutes les cases doivent rester de
   la meme hauteur. */
.jcs-nav-image-mot {
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jcs-nav-image-credit {
  color: var(--jcs-muted);
  font-size: .78rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* L image ouverte : en grand, puis tout ce qu il faut dire d elle. */
.jcs-nav-image-fiche { max-width: 760px; margin: 0 auto; min-width: 0; }
.jcs-nav-image-fiche h1 { font-size: 1.4rem; font-weight: 800; margin: .6rem 0 .3rem; }
.jcs-nav-image-grande {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  border-radius: 13px;
}
.jcs-nav-image-auteur { font-weight: 700; margin: .3rem 0; }
.jcs-nav-image-description {
  font-size: 1rem; line-height: 1.5;
  margin: .6rem 0 1rem;
}

/* La grille passe a deux colonnes quand elle partage la place avec
   l image ouverte : la colonne de gauche ne fait plus que 22rem. */
@media (min-width: 900px) {
  .jcs-nav-duo.is-ouvert .jcs-nav-images {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jcs-nav-duo.is-ouvert .jcs-nav-image-mot { font-size: .85rem; }
}

/* =========================================================
   LA TOUCHE MAJ
   Le signe demande occupe le milieu de l ecran ; sous lui,
   la touche a enfoncer, et le temoin de la main gauche.
   ========================================================= */
.jcs-maj-lecon {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin: 1.6rem 0 .6rem;
}
.jcs-maj-exemple {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem;
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  background: var(--jcs-card);
}
.jcs-maj-touche {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem;
  padding: .3rem .6rem;
  border-radius: 10px;
  border: 3px solid var(--jcs-border);
  border-bottom-width: 5px;
  background: var(--jcs-bg);
  font-weight: 800;
  font-size: 1.15rem;
}
.jcs-maj-touche.is-maj { background: color-mix(in srgb, var(--jcs-citron) 55%, var(--jcs-bg)); }
.jcs-maj-plus     { font-weight: 800; color: var(--jcs-muted); }
.jcs-maj-flap     { color: var(--jcs-muted); }
.jcs-maj-resultat { font-size: 1.6rem; font-weight: 800; }
.jcs-maj-seule    { color: var(--jcs-muted); font-weight: 700; margin-left: .5rem; }

/* Le signe a taper : gros, seul, au milieu */
.jcs-maj-scene { max-width: 700px; margin: 0 auto; }
.jcs-maj-cible {
  display: flex; align-items: center; justify-content: center;
  width: clamp(140px, 26vw, 220px);
  height: clamp(140px, 26vw, 220px);
  margin: 0 auto;
  border-radius: 34px;
  border: 5px solid var(--jcs-border);
  border-bottom-width: 10px;
  background: var(--jcs-card);
  font-size: clamp(4.5rem, 14vw, 8rem);
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--jcs-shadow);
}
.jcs-maj-cible.is-error { background: var(--jcs-corail); animation: jcs-shake .3s; }
.jcs-maj-nom { color: var(--jcs-muted); font-weight: 700; margin-top: .8rem; }
.jcs-maj-aide {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  flex-wrap: wrap;
  min-height: 2.6rem;
  margin-top: .6rem;
}

/* Le temoin de la main gauche : eteint, puis allume quand Maj est tenue */
.jcs-maj-temoin {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .4rem;
  padding: .35rem 1rem;
  border-radius: 999px;
  border: 3px dashed var(--jcs-border);
  color: var(--jcs-muted);
  font-weight: 800;
  transition: transform .12s ease;
}
.jcs-maj-temoin.is-tenue {
  border-style: solid;
  border-color: transparent;
  background: var(--jcs-menthe);
  color: #2f3640;
  transform: translateY(-2px);
}

/* Le troisieme etage d une touche : ce que sort Alt Gr */
.jcs-touche-altgr {
  position: absolute;
  right: .18em; bottom: .1em;
  font-size: .62em;
  opacity: .55;
}
.jcs-touche { position: relative; }
.jcs-touche.is-altgr { min-width: 4.2rem; font-size: .72rem; }
/* Les deux temoins du jeu de la touche Maj, cote a cote */
.jcs-maj-temoin + .jcs-maj-temoin { margin-left: .5rem; }

/* =========================================================
   MENU, SOUS-MENU
   Un faux logiciel : une barre de menus qui s ouvrent, des
   sous-menus qui partent sur le cote, et une page vide dessous.
   ========================================================= */
.jcs-faux-logiciel {
  max-width: 860px;
  margin: 0 auto;
  border: 4px solid var(--jcs-border);
  border-radius: 20px;
  overflow: visible;
  background: var(--jcs-card);
  box-shadow: var(--jcs-shadow);
}
.jcs-faux-barre {
  display: flex; flex-wrap: wrap; gap: .2rem;
  padding: .4rem .5rem;
  border-bottom: 3px solid var(--jcs-border);
  border-radius: 16px 16px 0 0;
  background: color-mix(in srgb, var(--jcs-ciel) 16%, var(--jcs-card));
}
.jcs-faux-menu { position: relative; }
.jcs-faux-titre {
  font-family: inherit;
  font-size: clamp(.95rem, 1.7vw, 1.05rem);
  font-weight: 700;
  color: var(--jcs-text);
  background: none;
  border: none;
  border-radius: 10px;
  padding: .4rem .7rem;
  cursor: pointer;
}
.jcs-faux-titre:hover { background: color-mix(in srgb, var(--jcs-lilas) 25%, transparent); }
.jcs-faux-menu.is-ouvert > .jcs-faux-titre {
  background: var(--jcs-lilas);
  color: #2f3640;
}

/* Les listes : fermees par defaut, ouvertes par le jeu */
.jcs-faux-liste {
  display: none;
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  z-index: 40;
  min-width: 14rem;
  margin: 0; padding: .3rem;
  list-style: none;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 14px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .12);
}
.jcs-faux-menu.is-ouvert > .jcs-faux-liste { display: block; }

.jcs-faux-item { position: relative; }
.jcs-faux-item > button {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%;
  font-family: inherit;
  font-size: clamp(.92rem, 1.6vw, 1rem);
  font-weight: 600;
  text-align: left;
  color: var(--jcs-text);
  background: none;
  border: none;
  border-radius: 10px;
  padding: .45rem .6rem;
  cursor: pointer;
}
.jcs-faux-item > button:hover,
.jcs-faux-item.is-ouvert > button {
  background: color-mix(in srgb, var(--jcs-citron) 45%, transparent);
}
.jcs-faux-fleche { color: var(--jcs-muted); font-weight: 800; }

/* Un sous-menu part sur le cote, a hauteur de sa ligne */
.jcs-faux-sous { top: -.3rem; left: calc(100% + .2rem); }
.jcs-faux-item.is-ouvert > .jcs-faux-sous { display: block; }

/* La page du faux logiciel : du decor, pour que la barre ait un corps */
.jcs-faux-page {
  display: flex; align-items: center; justify-content: center;
  height: clamp(120px, 22vh, 200px);
  border-radius: 0 0 16px 16px;
  background: repeating-linear-gradient(
    45deg, transparent 0 12px,
    color-mix(in srgb, var(--jcs-border) 45%, transparent) 12px 13px);
}
.jcs-faux-page-mot { color: var(--jcs-muted); font-weight: 800; font-size: 1.2rem; }

/* Sur un petit ecran, un sous-menu qui part a droite sortirait de l ecran :
   il se pose alors sous sa ligne, comme le font les vrais logiciels. */
@media (max-width: 700px) {
  .jcs-faux-liste { min-width: 11rem; }
  .jcs-faux-sous  { position: static; margin: .2rem 0 .2rem .8rem; box-shadow: none; }
}

/* =========================================================
   L AVERTISSEMENT DES PETITS ECRANS
   Il est toujours dans la page, mais ne se montre que la ou
   il a lieu d etre : ecran etroit, ou pointeur grossier
   (un doigt). Tourner la tablette suffit a le faire
   apparaitre ou disparaitre, sans une ligne de JavaScript.
   ========================================================= */
.jcs-bandeau-mobile { display: none; }

@media (max-width: 820px), (pointer: coarse) {
  .jcs-bandeau-mobile {
    display: flex;
    flex: 0 0 auto;
    align-items: center; justify-content: center;
    flex-wrap: wrap;
    gap: .6rem .9rem;
    padding: .7rem 1rem;
    background: color-mix(in srgb, var(--jcs-peche) 55%, var(--jcs-bg));
    border-bottom: 3px solid var(--jcs-border);
    color: var(--jcs-text);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.35;
    text-align: center;
  }
  .jcs-bandeau-mobile-mot { flex: 1 1 16rem; }
  .jcs-bandeau-mobile .jcs-btn {
    flex: 0 0 auto;
    padding: .4rem 1rem;
    font-size: .92rem;
    background: var(--jcs-card);
  }
}

/* Les icones des menus du faux logiciel, dans le menu comme dans la consigne */
.jcs-faux-icone {
  flex: 0 0 auto;
  width: 1.2em;
  text-align: center;
  color: var(--jcs-muted);
  margin-right: .15em;
}
.jcs-faux-mot { flex: 1 1 auto; }
.jcs-faux-item > button:hover .jcs-faux-icone,
.jcs-faux-item.is-ouvert > button .jcs-faux-icone { color: var(--jcs-text); }
.jcs-consigne .jcs-faux-icone { color: inherit; }
/* Au niveau Champion, la consigne ne dit plus le chemin */
.jcs-faux-sans-chemin { color: var(--jcs-muted); font-weight: 700; font-size: .9em; }

/* La note d Alt Gr, dans les parties ou ces signes tombent */
.jcs-maj-note { max-width: 34rem; margin: .6rem auto 0; line-height: 1.4; }

/* =========================================================
   LE CADRE D UNE IMAGE
   L image occupe sa place avant meme d arriver : le cadre a
   la taille qu elle aura, et un rond tourne dedans en
   attendant. Sans cela la grille sautait a chaque image
   recue, et l apercu s ouvrait sur du vide.
   ========================================================= */
.jcs-nav-image-cadre {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--jcs-bg);
  border-radius: 10px;
  overflow: hidden;
}
.jcs-nav-image-cadre.is-grande {
  aspect-ratio: auto;
  height: min(60vh, 460px);
  border: 3px solid var(--jcs-border);
  border-radius: 16px;
}

/* Le rond qui tourne, tant que l image n est pas la */
.jcs-nav-image-cadre.is-attente::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 2rem; height: 2rem;
  margin: -1rem 0 0 -1rem;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--jcs-lilas) 35%, transparent);
  border-top-color: var(--jcs-lilas);
  animation: jcs-tourne .8s linear infinite;
}
@keyframes jcs-tourne { to { transform: rotate(360deg); } }

/* Une image qui n arrive pas laisse sa place, et le dit */
.jcs-nav-image-cadre.is-manquee::after {
  content: "🖼️";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  opacity: .45;
}
/* Tant qu elle n est pas la, l image ne montre pas son cadre vide */
.jcs-nav-image-cadre:not(.is-chargee) img { opacity: 0; }
.jcs-nav-image-cadre.is-chargee img { animation: jcs-fade .25s ease-out; }

/* =========================================================
   LES MATHS ET LES POKEMON
   Ce que les cinq jeux de maths se partagent : le pave
   numerique, la reponse en gros, l image d un Pokemon et la
   Poke Ball qui la remplace quand le reseau manque.
   ========================================================= */
.jcs-pokemon-img {
  display: block;
  max-width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .12));
}

/* La Poke Ball de secours : un rond, deux couleurs, un bouton */
.jcs-pokeball {
  display: inline-block;
  width: 7rem; height: 7rem;
  border-radius: 50%;
  border: 6px solid #2f3640;
  background: linear-gradient(#ff6b6b 0 46%, #2f3640 46% 54%, #fff 54% 100%);
  position: relative;
  box-sizing: border-box;
}
.jcs-pokeball::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 28%; height: 28%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 5px solid #2f3640;
  background: #fff;
  box-sizing: border-box;
}

.jcs-chargement {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  color: var(--jcs-muted); font-size: clamp(1.1rem, 2vw, 1.3rem);
  min-height: 6rem;
}
.jcs-chargement::before {
  content: "";
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--jcs-lilas) 35%, transparent);
  border-top-color: var(--jcs-lilas);
  animation: jcs-tourne .8s linear infinite;
}

/* La reponse : un grand champ, centre, au-dessus du pave */
.jcs-reponse {
  font-family: inherit;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  text-align: center;
  width: min(100%, 11rem);
  padding: .4rem .8rem;
  border-radius: 20px;
  border: 4px solid var(--jcs-border);
  background: var(--jcs-card);
  color: var(--jcs-text);
}
.jcs-reponse:focus { outline: none; border-color: var(--jcs-ciel); }
.jcs-reponse.is-juste { border-color: var(--jcs-menthe); background: color-mix(in srgb, var(--jcs-menthe) 28%, var(--jcs-card)); }
.jcs-reponse.is-faux  { border-color: var(--jcs-corail); background: color-mix(in srgb, var(--jcs-corail) 28%, var(--jcs-card)); }

/* Le pave numerique, flottant : il se pose dans le coin en bas a gauche
   (celui de droite est au bouton « Pouce ! »), au-dessus de la page, et
   se deplace par sa poignee. Sous les fenetres et la pause. */
.jcs-pave-flottant {
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: min(calc(100vw - 2rem), 15.5rem);
  padding: .35rem .55rem .6rem;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  touch-action: none;
}
.jcs-pave-flottant.a-operateurs { width: min(calc(100vw - 2rem), 21rem); }
.jcs-pave-flottant.is-glisse { box-shadow: 0 16px 36px rgba(0, 0, 0, .3); opacity: .96; }
.jcs-pave-flottant.is-plie { width: auto; padding-bottom: .35rem; }
.jcs-pave-flottant.is-plie .jcs-pave { display: none; }
.jcs-pave-poignee {
  display: flex; align-items: center; gap: .45rem;
  padding: .1rem .1rem .4rem;
  cursor: grab;
  user-select: none;
  font-weight: 800;
  color: var(--jcs-muted);
  border-radius: 12px;
}
.jcs-pave-flottant.is-plie .jcs-pave-poignee { padding-bottom: .1rem; }
.jcs-pave-flottant.is-glisse .jcs-pave-poignee { cursor: grabbing; }
.jcs-pave-poignee:focus-visible { outline: 3px solid var(--jcs-ciel); }
.jcs-pave-prise { font-size: 1.3rem; letter-spacing: -.1em; }
.jcs-pave-titre { flex: 1; font-size: .95rem; white-space: nowrap; }
.jcs-pave-plier {
  font: inherit; font-size: 1.1rem; font-weight: 800;
  width: 2.2rem; height: 2.2rem;
  border: 2px solid var(--jcs-border); border-radius: 50%;
  background: var(--jcs-bg, transparent); color: var(--jcs-text);
  cursor: pointer;
}
.jcs-pave {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.jcs-pave.a-operateurs { grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, .8fr)); }
/* Avec les signes : les chiffres a gauche, les signes a droite */
.jcs-pave.a-operateurs > :nth-child(-n+12):nth-child(3n+1) { grid-column: 1; }
.jcs-pave.a-operateurs > :nth-child(-n+12):nth-child(3n+2) { grid-column: 2; }
.jcs-pave.a-operateurs > :nth-child(-n+12):nth-child(3n)   { grid-column: 3; }
.jcs-pave.a-operateurs > :nth-child(13) { grid-column: 4; grid-row: 1; }
.jcs-pave.a-operateurs > :nth-child(14) { grid-column: 5; grid-row: 1; }
.jcs-pave.a-operateurs > :nth-child(15) { grid-column: 4; grid-row: 2; }
.jcs-pave.a-operateurs > :nth-child(16) { grid-column: 5; grid-row: 2; }
.jcs-pave.a-operateurs > :nth-child(17) { grid-column: 4; grid-row: 3; }
.jcs-pave.a-operateurs > :nth-child(18) { grid-column: 5; grid-row: 3; }
.jcs-pave.a-operateurs > :nth-child(19) { grid-column: 4 / 6; grid-row: 4; }
.jcs-pave-touche {
  font-family: inherit;
  font-size: clamp(1.25rem, 3.2vw, 1.55rem);
  font-weight: 800;
  color: #2f3640;
  background: var(--jcs-ciel);
  border: none;
  border-radius: 14px;
  padding: .45rem 0;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .14);
  cursor: pointer;
  touch-action: manipulation;
}
.jcs-pave-touche:hover  { filter: brightness(1.06); }
.jcs-pave-touche:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .14); }
.jcs-pave-touche.is-effacer { background: var(--jcs-peche); }
.jcs-pave-touche.is-signe   { background: var(--jcs-lilas); }
.jcs-pave-touche.is-valider { background: var(--jcs-menthe); grid-column: 1 / -1; font-size: clamp(1.1rem, 2.6vw, 1.3rem); }

/* Sur un petit ecran, le pave flottant se fait plus petit */
@media (max-width: 520px) {
  .jcs-pave-flottant { left: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); width: min(calc(100vw - 1rem), 13rem); }
  .jcs-pave-flottant.a-operateurs { width: min(calc(100vw - 1rem), 18rem); }
  .jcs-pave { gap: .3rem; }
  .jcs-pave-touche { padding: .3rem 0; }
  .jcs-pave-titre-mot { display: none; }
}

/* Une carte de jeu de maths */
.jcs-maths-carte {
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 24px;
  box-shadow: var(--jcs-shadow);
  padding: 1.2rem 1.3rem;
}

/* =========================================================
   LA LIGNE DES POKEMON
   Une droite graduee de 0 a 10, un Pokemon qu on glisse
   dessus, et son fantome quand on s est trompe.
   ========================================================= */
.jcs-ligne-consigne { margin-bottom: 1rem; }
.jcs-ligne-nombre {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem 1rem;
  border-radius: 18px;
  background: var(--jcs-citron);
  color: #2f3640;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  vertical-align: middle;
  box-shadow: var(--jcs-shadow);
}

.jcs-ligne-zone {
  position: relative;
  padding: 7.2rem 3.2rem 3.4rem;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 24px;
  box-shadow: var(--jcs-shadow);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.jcs-ligne-zone.is-lire { cursor: default; }

/* La regle : sa largeur est celle de 0 a 10, tout s y place en pourcentage */
.jcs-ligne-regle { position: relative; height: 0; }
.jcs-ligne-axe {
  position: absolute; left: 0; right: 0; top: -3px;
  height: 6px;
  border-radius: 3px;
  background: var(--jcs-text);
}

.jcs-ligne-trait {
  position: absolute; top: 0;
  width: 2px; margin-left: -1px;
  background: var(--jcs-text);
}
.jcs-ligne-trait.is-petit  { height: .55rem; opacity: .75; }
.jcs-ligne-trait.is-mi     { height: .95rem; }
.jcs-ligne-trait.is-entier { height: 1.4rem; width: 4px; margin-left: -2px; border-radius: 0 0 2px 2px; }

.jcs-ligne-nombre-axe {
  position: absolute; top: 1.7rem;
  transform: translateX(-50%);
  font-size: clamp(.95rem, 2.4vw, 1.35rem);
  font-weight: 800;
  color: var(--jcs-text);
  pointer-events: none;
}

/* Les grands nombres : seuls les deux bouts sont ecrits, dans un cadre, comme sur la feuille */
.jcs-ligne-nombre-axe.is-borne {
  white-space: nowrap;
  padding: .05rem .45rem;
  border: 2px solid var(--jcs-border);
  border-radius: 8px;
  background: var(--jcs-card);
}
@media (max-width: 600px) {
  .jcs-ligne-nombre-axe.is-borne.is-debut { transform: translateX(-25%); }
  .jcs-ligne-nombre-axe.is-borne.is-fin   { transform: translateX(-75%); }
}

/* Le Pokemon : son pied touche l axe, il se centre sur sa place */
.jcs-ligne-pion, .jcs-ligne-fantome {
  position: absolute;
  bottom: 6px;
  width: 5.6rem; height: 5.6rem;
  margin-left: -2.8rem;
  padding: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.jcs-ligne-pion {
  z-index: 3;
  border: none; background: transparent;
  cursor: grab;
  transition: left .08s linear;
  touch-action: none;
}
.jcs-ligne-pion.is-glisse { cursor: grabbing; transform: translateY(-6px) scale(1.06); transition: none; }
.jcs-ligne-pion.is-fixe   { cursor: default; pointer-events: none; }
.jcs-ligne-pion:focus-visible { outline: 4px solid var(--jcs-ciel); outline-offset: 2px; border-radius: 18px; }
.jcs-ligne-pion::after, .jcs-ligne-fantome::after {
  content: "";
  position: absolute; left: 50%; bottom: -10px;
  margin-left: -9px;
  border: 9px solid transparent;
  border-top: 10px solid var(--jcs-corail);
  border-bottom: 0;
}
.jcs-ligne-pion.is-exact::after  { border-top-color: var(--jcs-menthe); }
.jcs-ligne-pion.is-proche::after { border-top-color: var(--jcs-citron); }
.jcs-ligne-pion.is-rate::after   { border-top-color: var(--jcs-corail); }

.jcs-ligne-sprite, .jcs-ligne-pion .jcs-pokeball, .jcs-ligne-fantome .jcs-pokeball {
  width: 100%; height: 100%;
  pointer-events: none;
}
.jcs-ligne-pion .jcs-pokeball, .jcs-ligne-fantome .jcs-pokeball { width: 4.4rem; height: 4.4rem; }

.jcs-ligne-pion.is-exact  .jcs-ligne-sprite { animation: jcs-pop .4s ease-out; filter: drop-shadow(0 0 12px var(--jcs-menthe)); }
.jcs-ligne-pion.is-proche .jcs-ligne-sprite { filter: drop-shadow(0 0 10px var(--jcs-citron)); }
.jcs-ligne-pion.is-rate   .jcs-ligne-sprite { filter: drop-shadow(0 0 10px var(--jcs-corail)); }

/* La bonne place : un fantome, un drapeau, et l ecart trace sur l axe */
.jcs-ligne-fantome { z-index: 2; opacity: .6; pointer-events: none; }
.jcs-ligne-fantome::after { border-top-color: var(--jcs-menthe); }
.jcs-ligne-drapeau {
  position: absolute; top: -1.9rem; left: 50%;
  transform: translateX(-50%);
  padding: .1rem .7rem;
  border-radius: 12px;
  background: var(--jcs-menthe);
  color: #2f3640;
  font-weight: 800;
  font-size: 1.15rem;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .14);
}
.jcs-ligne-ecart {
  position: absolute; top: -5px;
  height: 10px;
  border-radius: 5px;
  background: var(--jcs-corail);
  z-index: 1;
  min-width: 6px;
}

/* Ce que dit le jeu apres un tour */
.jcs-ligne-retour { margin-top: 1.5rem; }
.jcs-ligne-retour-titre { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .4rem; }
.jcs-ligne-retour .jcs-subtitle { max-width: 700px; margin: .5rem auto 0; }
.jcs-ligne-gain { font-weight: 800; font-size: 1.25rem; color: var(--jcs-muted); margin: .6rem 0; }
.jcs-ligne-retour .jcs-btn { margin-top: .8rem; }

/* La galerie de fin : un Pokemon par tour, et comment ca s est passe */
.jcs-ligne-galerie {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  margin-top: 1rem;
}
.jcs-ligne-tuile {
  position: relative;
  width: 7.2rem;
  padding: .5rem .3rem .6rem;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.jcs-ligne-tuile.is-exact  { border-color: var(--jcs-menthe); }
.jcs-ligne-tuile.is-proche { border-color: var(--jcs-citron); }
.jcs-ligne-tuile.is-rate   { border-color: var(--jcs-corail); }
.jcs-ligne-mini { width: 4.8rem; height: 4.8rem; image-rendering: pixelated; }
.jcs-ligne-tuile .jcs-pokeball { width: 3.6rem; height: 3.6rem; }
.jcs-ligne-tuile-nom { font-weight: 700; font-size: .92rem; text-align: center; word-break: break-word; line-height: 1.15; }
.jcs-ligne-tuile-marque { position: absolute; top: -.7rem; right: -.5rem; font-size: 1.4rem; }

/* Tablette et telephone : la droite garde de la place, les traits s allegent */
@media (max-width: 640px) {
  .jcs-ligne-zone { padding: 6rem 1.5rem 2.8rem; }
  .jcs-ligne-pion, .jcs-ligne-fantome { width: 4.4rem; height: 4.4rem; margin-left: -2.2rem; }
  .jcs-ligne-pion .jcs-pokeball, .jcs-ligne-fantome .jcs-pokeball { width: 3.4rem; height: 3.4rem; }
  .jcs-ligne-trait.is-entier { height: 1.2rem; width: 3px; margin-left: -1.5px; }
  .jcs-ligne-trait { width: 1px; margin-left: -.5px; }
  .jcs-ligne-nombre-axe { top: 1.5rem; }
}


/* =========================================================
   LE MUR MYSTERE
   Un mur de briques devant l image d un Pokemon : chaque
   bonne reponse fait tomber une brique. L image reste une
   silhouette noire jusqu a la revelation.
   ========================================================= */
.jcs-mur-jeu {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 1.5rem 2.2rem;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}

.jcs-mur-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 24px;
  border: 4px solid var(--jcs-border);
  background: color-mix(in srgb, var(--jcs-ciel) 24%, var(--jcs-card));
  box-shadow: var(--jcs-shadow);
  overflow: hidden;
}

/* Le Pokemon : une silhouette, jusqu a ce que le mur soit tombe */
.jcs-mur-scene .jcs-mur-image {
  position: absolute;
  inset: 6%;
  width: 88%; height: 88%;
  object-fit: contain;
  filter: brightness(0);
  transition: filter .9s ease;
}
.jcs-mur-scene.is-revele .jcs-mur-image { filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .12)); }

/* La Poke Ball de secours (pas de reseau) reste en couleurs */
.jcs-mur-scene .jcs-pokeball {
  position: absolute;
  top: 50%; left: 50%;
  margin: -3.5rem 0 0 -3.5rem;
  filter: none;
}

.jcs-mur-briques {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
.jcs-mur-rangee { flex: 1 1 0; display: flex; min-height: 0; }

.jcs-mur-brique {
  --jcs-mur-teinte: 50;
  flex-basis: 0;
  min-width: 0;
  border: 3px solid color-mix(in srgb, var(--jcs-text) 22%, transparent);
  border-radius: 3px;
  margin: -1px;          /* les briques se chevauchent d un pixel : pas de jour entre elles */
  background: color-mix(in srgb, var(--jcs-corail) calc(40% + var(--jcs-mur-teinte) * .25%), var(--jcs-peche));
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .10), inset 0 4px 0 rgba(255, 255, 255, .28);
  transform-origin: 50% 100%;
}
.jcs-mur-brique.is-tombee {
  animation: jcs-mur-tombe .55s ease-in forwards;
  pointer-events: none;
}
.jcs-mur-brique.is-revenue { animation: jcs-mur-revient .45s ease-out; }
@keyframes jcs-mur-tombe {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(70%) rotate(14deg); opacity: 0; }
}
@keyframes jcs-mur-revient {
  0%   { transform: translateY(-80%) scale(1.1); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* La question, a droite du mur */
.jcs-mur-panneau { text-align: center; min-width: 0; }
.jcs-mur-operation {
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: .8rem;
  letter-spacing: .02em;
}

.jcs-mur-aide {
  text-align: left;
  background: color-mix(in srgb, var(--jcs-citron) 30%, var(--jcs-card));
  border: 3px solid var(--jcs-border);
  border-radius: 20px;
  padding: 1rem 1.2rem;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
}
.jcs-mur-aide p { margin-bottom: .6rem; }
.jcs-mur-aide-resultat { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; }

.jcs-mur-revelation .jcs-title { margin-bottom: 1.2rem; }

/* Les tables a la carte */
.jcs-mur-choisies { margin: 0 0 1.6rem; }
.jcs-mur-puces { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .6rem 0; }
.jcs-mur-puce {
  font-family: inherit;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  min-width: 3rem;
  padding: .45rem .7rem;
  border-radius: 14px;
  border: 3px solid var(--jcs-border);
  background: var(--jcs-card);
  color: var(--jcs-text);
  cursor: pointer;
}
.jcs-mur-puce.is-choisie {
  background: var(--jcs-lilas);
  border-color: #2f3640;
  color: #2f3640;
}

/* La fin : les Pokemon reveles et ce qu il reste a travailler */
.jcs-mur-galerie { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.jcs-mur-fiche {
  margin: 0;
  width: 8.5rem;
  text-align: center;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 20px;
  padding: .6rem .4rem;
  box-shadow: var(--jcs-shadow);
}
.jcs-mur-fiche .jcs-mur-mini { width: 100%; height: 7rem; margin: 0 auto; }
.jcs-mur-fiche .jcs-pokeball { width: 4.5rem; height: 4.5rem; }
.jcs-mur-fiche figcaption { font-weight: 800; margin-top: .3rem; }

.jcs-mur-bilan {
  max-width: 28rem;
  margin: 2rem auto 0;
  padding: 1rem 1.4rem;
  background: color-mix(in srgb, var(--jcs-corail) 18%, var(--jcs-card));
  border: 3px solid var(--jcs-border);
  border-radius: 20px;
}
.jcs-mur-bilan ul { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; margin-top: .6rem; font-size: 1.2rem; font-weight: 700; }

/* Petit ecran : le mur se reduit pour que la question reste dans la page */
@media (max-width: 720px) {
  .jcs-mur-jeu { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .jcs-mur-scene { width: min(100%, 220px); margin: 0 auto; border-width: 3px; }
  .jcs-mur-brique { border-width: 2px; }
}


/* ---------- Calcul de dresseur ---------- */
.jcs-dresseur-scene {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.2rem;
  border-radius: 28px;
  border: 3px solid var(--jcs-border);
  box-shadow: var(--jcs-shadow);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--jcs-ciel) 24%, var(--jcs-card)) 0 58%,
    color-mix(in srgb, var(--jcs-menthe) 24%, var(--jcs-card)) 58% 100%);
}

.jcs-dresseur-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
}
.jcs-dresseur-duel.is-attente { visibility: hidden; height: 0; overflow: hidden; }

.jcs-dresseur-pokemon {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
}
.jcs-dresseur-cadre {
  width: min(100%, 13rem);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  animation: jcs-dresseur-arrive .35s ease-out;
}
.jcs-dresseur-cadre .jcs-dresseur-image { width: 100%; height: 100%; }
.jcs-dresseur-cadre .jcs-pokeball { width: 60%; height: 60%; }
.jcs-dresseur-nom {
  margin-top: .3rem;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 800;
  text-align: center;
}

/* La Poke Ball de capture : cachee, puis elle secoue le Pokemon qui rentre dedans */
.jcs-dresseur-balle {
  position: absolute; left: 50%; top: 38%;
  width: 4.5rem; height: 4.5rem;
  margin-left: -2.25rem;
  opacity: 0;
  pointer-events: none;
}
.jcs-dresseur-balle.is-capture { animation: jcs-dresseur-balle .9s ease-in-out forwards; }
.jcs-dresseur-cadre.is-capture { animation: jcs-dresseur-rentre .35s ease-in forwards; }
.jcs-dresseur-cadre.is-fuite   { animation: jcs-dresseur-fuite .6s ease-in forwards; }

@keyframes jcs-dresseur-arrive {
  from { transform: translateY(14px) scale(.85); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes jcs-dresseur-rentre {
  to { transform: scale(.1) rotate(160deg); opacity: 0; }
}
@keyframes jcs-dresseur-balle {
  0%   { opacity: 0; transform: scale(.4); }
  35%  { opacity: 1; transform: scale(1); }
  50%  { transform: rotate(-18deg); }
  62%  { transform: rotate(18deg); }
  74%  { transform: rotate(-10deg); }
  86%  { transform: rotate(0); opacity: 1; }
  100% { opacity: 1; transform: scale(1.15); }
}
@keyframes jcs-dresseur-fuite {
  to { transform: translateX(120%) scale(.8); opacity: 0; }
}

/* L'astuce ou le bravo : dans la scene, sous le duel, pour rester sous les yeux */
.jcs-dresseur-message {
  margin-top: .8rem;
  min-height: 3rem;
  text-align: center;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
}

.jcs-dresseur-calcul { text-align: center; min-width: 0; }
.jcs-dresseur-enonce {
  font-size: clamp(1.8rem, 5.2vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: .8rem;
  overflow-wrap: anywhere;
}

/* L'equipe : une rangee de petites icones, la derniere arrivee fait pop */
.jcs-dresseur-equipe { max-width: 900px; margin: 1rem auto 0; text-align: center; }
.jcs-dresseur-equipe h2 { font-weight: 800; margin-bottom: .2rem; }
.jcs-dresseur-rang {
  display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center;
  min-height: 3.4rem;
}
.jcs-dresseur-rang.is-fin { gap: .5rem; }
.jcs-dresseur-mini {
  width: 3.4rem; height: 3.4rem;
  image-rendering: pixelated;
  filter: none;
}
.jcs-dresseur-mini.is-nouveau { animation: jcs-pop .35s ease-out; }
.jcs-dresseur-rang.is-fin .jcs-dresseur-mini { width: 4.6rem; height: 4.6rem; }

/* Le bilan de fin */
.jcs-dresseur-bilan { max-width: 720px; margin: 1.8rem auto 0; }
.jcs-dresseur-bilan h2 { font-weight: 800; margin-bottom: .6rem; }
.jcs-dresseur-ratees {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.jcs-dresseur-ratees li {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  background: color-mix(in srgb, var(--jcs-corail) 24%, var(--jcs-card));
  border: 3px solid var(--jcs-border);
  border-radius: 999px;
  padding: .3rem 1rem;
}

@media (max-width: 640px) {
  /* Le Pokemon se range a gauche de l'enonce : le pave reste sous les yeux, sans defiler */
  .jcs-dresseur-duel { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .3rem .8rem; }
  .jcs-dresseur-pokemon { grid-row: 1 / 3; }
  .jcs-dresseur-calcul { display: contents; }
  .jcs-dresseur-enonce { grid-column: 2; font-size: clamp(1.5rem, 7vw, 2rem); margin-bottom: 0; align-self: end; }
  .jcs-dresseur-duel .jcs-reponse { grid-column: 2; justify-self: center; font-size: 1.7rem; }
  .jcs-dresseur-duel #pave { grid-column: 1 / -1; }
  .jcs-dresseur-cadre { width: 6.5rem; }
  .jcs-dresseur-nom { font-size: .95rem; }
  .jcs-dresseur-scene { padding: .8rem; }
  .jcs-dresseur-message { min-height: 4rem; }
  .jcs-dresseur-mini { width: 2.6rem; height: 2.6rem; }
  .jcs-dresseur-rang { min-height: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jcs-dresseur-cadre, .jcs-dresseur-balle.is-capture, .jcs-dresseur-mini.is-nouveau { animation-duration: .01s; }
}


/* =========================================================
   L ATELIER DES OPERATIONS
   Une grille de cases, comme du papier quadrille : la colonne
   de gauche porte le signe, puis un chiffre par case. La
   potence de la division reprend la meme grille.
   ========================================================= */
/* Deux colonnes : l histoire (Pokemon et enonce) a gauche, le calcul a
   droite, pour que tout tienne sans defiler. Elles s empilent sur un ecran etroit. */
.jcs-pose-colonnes {
  display: grid;
  /* La colonne du calcul prend la largeur du calcul, pas plus : les deux
     colonnes restent l une contre l autre, centrees ensemble. */
  grid-template-columns: minmax(0, 34rem) minmax(0, max-content);
  justify-content: center;
  gap: 1.6rem;
  align-items: start;
  max-width: 1060px; margin: 0 auto 1rem;
}
.jcs-pose-droite { min-width: 0; }
.jcs-pose-histoire {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  margin: 0;
}
.jcs-pose-histoire .jcs-pose-texte { text-align: center; }
/* L histoire se lit, elle ne doit pas ecraser le calcul d a cote. */
.jcs-pose-histoire #pose-phrase { font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.5; }
.jcs-pose-histoire .jcs-pose-operation { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
@media (max-width: 760px) {
  .jcs-pose-colonnes { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .jcs-pose-histoire { flex-direction: row; }
  .jcs-pose-histoire .jcs-pose-texte { text-align: left; }
}
.jcs-pose-pokemons { display: flex; align-items: flex-end; gap: .4rem; flex: 0 0 auto; }
.jcs-pose-pokemon { width: clamp(90px, 18vw, 150px); height: clamp(90px, 18vw, 150px); }
.jcs-pose-pokemon.is-second { width: clamp(60px, 11vw, 96px); height: clamp(60px, 11vw, 96px); }
.jcs-pose-pokemons .jcs-pokeball { width: clamp(70px, 14vw, 110px); height: clamp(70px, 14vw, 110px); }
.jcs-pose-texte { min-width: 0; text-align: left; }
.jcs-pose-operation {
  margin-top: .5rem;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 800;
  color: var(--jcs-text);
}

.jcs-pose-estimation { margin: 0 0 1.2rem; text-align: center; }
.jcs-pose-estimation .jcs-choix { margin-top: .8rem; }
.jcs-pose-estimation .jcs-btn.is-juste { background: var(--jcs-menthe); }
.jcs-pose-estimation .jcs-btn.is-faux  { background: var(--jcs-corail); }

.jcs-pose-consigne { min-height: 1.6rem; margin-bottom: .6rem; font-weight: 700; color: var(--jcs-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.jcs-pose-consigne:empty { min-height: 0; margin: 0; }

/* La grille : une colonne par case, la taille s adapte a l ecran */
.jcs-pose-grille {
  --jcs-pose-case: clamp(1.9rem, 8.2vw, 3.2rem);
  display: grid;
  grid-template-columns: repeat(var(--jcs-pose-colonnes, 6), var(--jcs-pose-case));
  grid-auto-rows: auto;
  justify-content: center;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: .8rem 1rem;
  background: var(--jcs-card);
  border: 3px solid var(--jcs-border);
  border-radius: 20px;
  box-shadow: var(--jcs-shadow);
}
.jcs-pose-grille > * {
  min-height: var(--jcs-pose-case);
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  font-size: calc(var(--jcs-pose-case) * .62);
  font-weight: 800;
  line-height: 1;
  color: var(--jcs-text);
}

.jcs-pose-signe { color: var(--jcs-lilas); }
html[data-theme="dark"] .jcs-pose-signe { color: var(--jcs-lilas); }
.jcs-pose-virgule { align-items: flex-end; padding-bottom: .25em; }
.jcs-pose-fixe.is-decalage { color: var(--jcs-muted); }
.jcs-pose-fixe.is-valide { color: color-mix(in srgb, var(--jcs-menthe) 55%, var(--jcs-text)); }
.jcs-pose-fixe.is-abaisse { color: var(--jcs-ciel); }

/* Les lignes d appoint sont plus basses : l en-tete, les retenues, le trait */
.jcs-pose-grille > .is-entete { min-height: calc(var(--jcs-pose-case) * .5); }
.jcs-pose-grille > .is-aide   { min-height: calc(var(--jcs-pose-case) * .62); }
.jcs-pose-grille > .is-trait  { min-height: 0; }
.jcs-pose-entete {
  font-size: calc(var(--jcs-pose-case) * .3) !important;
  font-weight: 700 !important;
  color: var(--jcs-muted) !important;
  cursor: help;
}

/* Le trait sous les nombres : plus mince que les autres lignes */
.jcs-pose-trait { border-top: 4px solid var(--jcs-text); margin-top: .15rem; }

/* Le lien vers la fiche d aide, sous la consigne */
.jcs-pose-aide {
  font: inherit; font-weight: 700; font-size: .98rem;
  display: block; margin: .7rem auto 0; padding: .1rem .3rem;
  border: none; background: none; cursor: pointer;
  color: var(--jcs-text); opacity: .75;
  text-decoration: underline dotted; text-underline-offset: .2em;
}
.jcs-pose-aide:hover, .jcs-pose-aide:focus-visible { opacity: 1; }

/* La visionneuse : la fiche en grand, qui tient dans l ecran */
.jcs-aide-boite { max-width: min(640px, 96vw); padding: 1.2rem 1rem 1.4rem; }
.jcs-aide-titre { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 800; margin-bottom: .8rem; }
.jcs-aide-boite figure { margin: 0 0 1rem; }
.jcs-aide-boite img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 68vh; width: auto; height: auto;
  border-radius: 12px; background: #fff;
}
.jcs-aide-boite figcaption { margin-top: .4rem; font-size: .8rem; color: var(--jcs-muted); }

/* Les cases a remplir */
.jcs-pose-case {
  font-family: inherit;
  width: calc(var(--jcs-pose-case) - 6px); height: calc(var(--jcs-pose-case) - 6px);
  margin: auto;
  padding: 0;
  text-align: center;
  border: 3px solid var(--jcs-border);
  border-radius: 10px;
  background: var(--jcs-bg);
  color: var(--jcs-text);
  caret-color: transparent;
}
.jcs-pose-case:focus { outline: none; border-color: var(--jcs-ciel); background: color-mix(in srgb, var(--jcs-ciel) 22%, var(--jcs-card)); }
.jcs-pose-case.is-juste   { border-color: var(--jcs-menthe); background: color-mix(in srgb, var(--jcs-menthe) 28%, var(--jcs-card)); }
.jcs-pose-case.is-faux    { border-color: var(--jcs-corail); background: color-mix(in srgb, var(--jcs-corail) 30%, var(--jcs-card)); }
.jcs-pose-case.is-corrige { border-color: var(--jcs-citron); background: color-mix(in srgb, var(--jcs-citron) 35%, var(--jcs-card)); }

/* Les retenues et les zeros facultatifs : petits, discrets, jamais corriges */
.jcs-pose-case.is-aide {
  font-size: .62em;
  width: calc(var(--jcs-pose-case) * .55); height: calc(var(--jcs-pose-case) * .55);
  border-style: dashed;
  border-width: 2px;
  background: transparent;
  color: var(--jcs-lilas);
}
/* Les retenues du bas de la soustraction : sous le chiffre du bas, d'une autre couleur */
.jcs-pose-case.is-aide.is-bas { color: var(--jcs-corail); border-color: color-mix(in srgb, var(--jcs-corail) 55%, var(--jcs-border)); }
.jcs-pose-case.is-pad { border-style: dashed; background: transparent; color: var(--jcs-muted); }

/* La potence : la barre verticale et le trait sous le diviseur */
.jcs-pose-grille .has-bord-gauche { border-left: 4px solid var(--jcs-text); }
.jcs-pose-grille .has-sous { border-bottom: 4px solid var(--jcs-text); }
.jcs-pose-grille .jcs-pose-case.has-bord-gauche { border-left-width: 3px; border-left-color: var(--jcs-border); }
.jcs-pose-grille.is-potence > .has-bord-gauche:not(input) { padding-left: .1em; }

.jcs-pose-message { margin-top: 1rem; min-height: 2.2rem; }
.jcs-pose-message.is-juste { color: color-mix(in srgb, var(--jcs-menthe) 60%, var(--jcs-text)); }
.jcs-pose-message.is-faux  { color: color-mix(in srgb, var(--jcs-corail) 60%, var(--jcs-text)); }

.jcs-pose-boutons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

/* L ecran de fin */
.jcs-pose-galerie { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .6rem; }
.jcs-pose-souvenir { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  background: var(--jcs-card); border: 3px solid var(--jcs-menthe); border-radius: 50%; }
.jcs-pose-souvenir.is-rate { border-color: var(--jcs-border); filter: grayscale(1); opacity: .65; }
.jcs-pose-souvenir img { width: 64px; height: 64px; image-rendering: pixelated; }
.jcs-pose-ratees { max-width: 520px; margin: 1.6rem auto 0; text-align: left; }
.jcs-pose-ratees ul { margin-top: .4rem; padding-left: 1.4rem; list-style: disc; font-size: 1.15rem; font-weight: 700; }

@media (max-width: 560px) {
  .jcs-pose-histoire { flex-direction: column; text-align: center; }
  .jcs-pose-histoire .jcs-pose-texte { text-align: center; }
/* L histoire se lit, elle ne doit pas ecraser le calcul d a cote. */
.jcs-pose-histoire #pose-phrase { font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.5; }
.jcs-pose-histoire .jcs-pose-operation { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
  .jcs-pose-grille { padding: .5rem .4rem; }
}


/* =========================================================
   LA FABRIQUE A PROBLEMES
   Un probleme sur une carte : les Pokemon et l enonce en haut,
   puis le calcul, puis la phrase reponse a trous. Le schema en
   barres se deplie a la demande.
   ========================================================= */
.jcs-fabrique {
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

/* Deux colonnes : le probleme (Pokemon, enonce, schema) a gauche, la
   reponse (operations, calcul, phrase, correction) a droite. Elles
   s empilent sur un ecran etroit. */
.jcs-fabrique-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.6rem;
  align-items: start;
}
.jcs-fabrique-gauche, .jcs-fabrique-droite { min-width: 0; }
.jcs-fabrique-gauche .jcs-fabrique-haut { flex-direction: column; align-items: center; }
.jcs-fabrique-gauche .jcs-fabrique-enonce { flex: 0 1 auto; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.5; }
/* Le premier titre visible de la colonne de droite s aligne sur le haut de la gauche. */
#fabrique-choix-boite .jcs-fabrique-titre,
#fabrique-choix-boite.jcs-hidden + #fabrique-calcul-boite .jcs-fabrique-titre { margin-top: 0; }
.jcs-fabrique-droite .jcs-fabrique-choix { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
@media (max-width: 760px) {
  .jcs-fabrique-colonnes { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .jcs-fabrique-gauche .jcs-fabrique-haut { flex-direction: row; }
}

.jcs-fabrique-haut {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.jcs-fabrique-pokemon {
  display: flex;
  gap: .6rem;
  flex: 0 0 auto;
  justify-content: center;
}
.jcs-fabrique-poke {
  margin: 0;
  text-align: center;
  width: clamp(96px, 18vw, 150px);
}
.jcs-fabrique-poke-img { width: 100%; height: auto; aspect-ratio: 1; }
.jcs-fabrique-poke .jcs-pokeball { width: 100%; height: auto; aspect-ratio: 1; }
.jcs-fabrique-poke figcaption {
  font-weight: 800;
  font-size: .98rem;
  color: var(--jcs-muted);
  overflow-wrap: anywhere;
}
.jcs-fabrique-enonce {
  flex: 1 1 18rem;
  min-width: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.55;
  margin: 0;
}

.jcs-fabrique-titre {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 800;
  margin: 1.4rem 0 .5rem;
}

/* Le calcul : une ou plusieurs lignes, une par etape */
.jcs-fabrique-lignes { display: flex; flex-direction: column; gap: .5rem; }

/* Les operations proposees, a cocher : deux colonnes, comme sur la feuille */
.jcs-fabrique-choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .7rem;
}
.jcs-fabrique-choix .jcs-btn { font-size: clamp(1.1rem, 2.4vw, 1.35rem); justify-content: flex-start; text-align: left; white-space: normal; }
.jcs-fabrique-choix .jcs-btn::before { content: '☐'; margin-right: .6rem; font-size: 1.2em; }
.jcs-fabrique-choix .jcs-btn.is-juste { background: var(--jcs-menthe); }
.jcs-fabrique-choix .jcs-btn.is-juste::before { content: '☑'; }
.jcs-fabrique-choix .jcs-btn.is-faux { background: var(--jcs-corail); opacity: .75; text-decoration: line-through; }
.jcs-fabrique-calcul {
  width: 100%;
  border-radius: 16px;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  text-align: left;
}
.jcs-fabrique-calcul:focus { outline: none; border-color: var(--jcs-ciel); }
.jcs-fabrique-calcul.is-juste { border-color: var(--jcs-menthe); background: color-mix(in srgb, var(--jcs-menthe) 28%, var(--jcs-card)); }

/* La phrase reponse : les trous sont des champs au fil du texte */
.jcs-fabrique-phrase {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 2.6;
  margin: 0;
}
.jcs-fabrique-phrase .jcs-fabrique-trou {
  width: 5.5em;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  padding: .1rem .4rem;
  margin: 0 .25rem;
  border-radius: 12px;
  vertical-align: middle;
}

.jcs-fabrique-message { min-height: 2.2rem; margin: 1rem 0 0; }

/* Le schema en barres */
.jcs-fabrique-schema {
  margin: 1.2rem auto 0;
  max-width: 640px;
  padding: .9rem 1rem 1rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--jcs-ciel) 14%, var(--jcs-card));
  border: 3px dashed var(--jcs-border);
  animation: jcs-fade .25s ease-out;
}
.jcs-fabrique-sch-total {
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
  padding-bottom: .2rem;
  margin-bottom: .35rem;
  border-bottom: 4px solid var(--jcs-text);
  border-left: 4px solid var(--jcs-text);
  border-right: 4px solid var(--jcs-text);
  border-radius: 0 0 10px 10px;
  height: 1.6rem;
  line-height: 1.6rem;
  box-sizing: content-box;
}
.jcs-fabrique-sch-ligne { display: flex; gap: 4px; margin-top: .4rem; }
.jcs-fabrique-sch-seg {
  flex: 1 1 0;
  min-width: 2.2rem;
  padding: .55rem .3rem;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #2f3640;
  background: var(--jcs-menthe);
  border: 3px solid rgba(47, 54, 64, .55);
  border-radius: 10px;
  overflow: hidden;
  white-space: nowrap;
}
.jcs-fabrique-sch-ligne.is-egales .jcs-fabrique-sch-seg { min-width: 0; font-size: .95rem; }
.jcs-fabrique-sch-seg.is-autre   { background: var(--jcs-ciel); }
.jcs-fabrique-sch-seg.is-inconnu {
  background: transparent;
  border-style: dashed;
  color: var(--jcs-text);
}

/* La correction */
.jcs-fabrique-correction {
  margin-top: 1rem;
  padding: .8rem 1.2rem 1rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--jcs-citron) 22%, var(--jcs-card));
  border: 3px solid var(--jcs-border);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
}
.jcs-fabrique-correction .jcs-fabrique-titre { margin-top: .2rem; }
.jcs-fabrique-correction p { margin: .3rem 0; }

.jcs-fabrique-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  margin-top: 1.4rem;
}

/* A revoir, en fin de partie */
.jcs-fabrique-recap {
  max-width: 760px;
  margin: 2rem auto 0;
  text-align: left;
}
.jcs-fabrique-recap ul { list-style: disc; padding-left: 1.4rem; }
.jcs-fabrique-recap li { margin: .6rem 0; line-height: 1.5; }

@media (max-width: 520px) {
  .jcs-fabrique-haut { justify-content: center; }
  .jcs-fabrique-phrase { line-height: 2.4; }
  .jcs-fabrique-phrase .jcs-fabrique-trou { width: 4.6em; }
}



/* =========================================================
   LA DICTEE DE NOMBRES
   Un Pokemon et sa bulle : le bouton pour reecouter, ou le
   nombre en lettres. A la correction, le nombre range dans
   son tableau (centaines, dizaines, unites).
   ========================================================= */
.jcs-dictee { max-width: 760px; margin: 0 auto; }
.jcs-dictee-scene {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  flex-wrap: wrap;
}
.jcs-dictee-pokemon { width: 9rem; height: 9rem; display: grid; place-items: center; transition: transform .4s ease, opacity .4s ease; }
.jcs-dictee-img { width: 100%; height: 100%; object-fit: contain; }
.jcs-dictee-pokemon .jcs-pokeball { width: 6rem; height: 6rem; }
.jcs-dictee-pokemon.is-capture { animation: jcs-dictee-saut .6s ease; }
.jcs-dictee-pokemon.is-fuite { opacity: .35; transform: translateX(1.5rem) scale(.9); }
@keyframes jcs-dictee-saut { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-1.2rem); } }

.jcs-dictee-bulle {
  position: relative;
  min-width: min(100%, 16rem); max-width: 26rem;
  padding: 1rem 1.2rem;
  background: color-mix(in srgb, var(--jcs-ciel) 18%, var(--jcs-card));
  border: 3px solid var(--jcs-border);
  border-radius: 22px;
  text-align: center;
}
.jcs-dictee-bulle::before {
  content: ''; position: absolute; left: -14px; top: 50%;
  width: 22px; height: 22px; margin-top: -11px;
  background: inherit; border: inherit; border-width: 0 0 3px 3px;
  transform: rotate(45deg);
}
.jcs-dictee-ecouter { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
.jcs-dictee-ecouter.is-parle { animation: jcs-dictee-parle .5s ease-in-out infinite alternate; }
@keyframes jcs-dictee-parle { to { transform: scale(1.06); } }
.jcs-dictee-lettres { font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 800; line-height: 1.3; margin-top: .5rem; }
.jcs-dictee-lettres:first-child { margin-top: 0; }
.jcs-dictee-reponse { width: min(100%, 12rem); text-align: center; letter-spacing: .08em; }
.jcs-dictee-juste { color: color-mix(in srgb, var(--jcs-menthe) 55%, var(--jcs-text)); }
.jcs-dictee-faux  { color: color-mix(in srgb, var(--jcs-corail) 60%, var(--jcs-text)); }

/* Le tableau des rangs (milliers, centaines, dizaines, unites) : la dictee
   et le puzzle des nombres y rangent leur correction, un chiffre par colonne. */
.jcs-rangs {
  display: flex; justify-content: flex-start; gap: 0;
  margin: 1.2rem auto 0;
  width: max-content; max-width: 100%;
  border: 3px solid var(--jcs-border); border-radius: 14px; overflow-x: auto;
}
.jcs-rangs-col { display: flex; flex-direction: column; align-items: center; min-width: 5.5rem; }
.jcs-rangs-col + .jcs-rangs-col { border-left: 3px solid var(--jcs-border); }
.jcs-rangs-nom {
  width: 100%; text-align: center; font-size: .85rem; font-weight: 700; padding: .25rem .4rem;
  background: color-mix(in srgb, var(--jcs-lilas) 30%, var(--jcs-card));
}
.jcs-rangs-col strong { font-size: 2rem; padding: .2rem .6rem; }
.jcs-rangs-col strong.is-zero { color: var(--jcs-corail); }

@media (max-width: 520px) {
  .jcs-dictee-pokemon { width: 6.5rem; height: 6.5rem; }
  .jcs-dictee-bulle::before { display: none; }
  .jcs-rangs-col { min-width: 4.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jcs-dictee-pokemon.is-capture, .jcs-dictee-ecouter.is-parle { animation: none; }
}


/* =========================================================
   LE PUZZLE DES NOMBRES
   La decomposition en grand, puis quatre nombres a cocher
   (deux colonnes) ou un champ pour l ecrire. Le Pokemon et
   le tableau des rangs viennent de la dictee.
   ========================================================= */
.jcs-puzzle { max-width: 820px; margin: 0 auto; }
.jcs-puzzle-haut { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.jcs-puzzle-haut > div:last-child { flex: 1 1 18rem; }
.jcs-puzzle-decoupe { font-size: clamp(1.35rem, 3.2vw, 2rem); font-weight: 800; line-height: 1.35; }
.jcs-puzzle-choix {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem;
  max-width: 520px; margin: 1.4rem auto 0;
}
.jcs-puzzle-choix .jcs-btn { font-size: clamp(1.3rem, 3vw, 1.7rem); justify-content: flex-start; }
.jcs-puzzle-choix .jcs-btn::before { content: '☐'; margin-right: .7rem; }
.jcs-puzzle-choix .jcs-btn.is-juste { background: var(--jcs-menthe); }
.jcs-puzzle-choix .jcs-btn.is-juste::before { content: '☑'; }
.jcs-puzzle-choix .jcs-btn.is-faux { background: var(--jcs-corail); opacity: .75; text-decoration: line-through; }
.jcs-puzzle-reponse { width: min(100%, 14rem); text-align: center; letter-spacing: .06em; margin-top: 1.2rem; }
.jcs-puzzle-correction { margin-top: 1.2rem; text-align: center; }
.jcs-puzzle-morceaux { display: inline-flex; flex-direction: column; gap: .2rem; text-align: left; font-size: 1.15rem; font-weight: 700; }

@media (max-width: 420px) {
  .jcs-puzzle-choix { grid-template-columns: minmax(0, 1fr); }
}