/*
 * Cclub Jeux -- feuille de la coquille et de l'echiquier (LOT-JEUX / SocleJeux-1).
 *
 * ZERO COULEUR EN DUR : tout passe par les tokens --app-* deja definis dans
 * cclub-app.css. Ce fichier n'en cree aucun et n'en redefinit aucun -- le banc
 * d'essai isole fournit les siens (dev/jeux/tokens-dev.css, non deploye), ce qui
 * evite de poser ici des valeurs de repli qui seraient autant d'hex en dur.
 *
 * Les cinq tokens du diagramme (--app-sq-l/d/grout, --app-pc-l/d) sont
 * VOLONTAIREMENT identiques en clair et en sombre : un echiquier ne s'adapte pas
 * au theme, une piece blanche reste claire. Decision heritee du quiz, pas reprise
 * ici a la legere.
 *
 * Cibles de toucher >= 48px, tailles en calc(NNpx * var(--app-fs)).
 */

/* ------------------------------------------------------------------ echiquier */

.cclub-jx-board {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: var(--app-sq-grout);
  border-radius: 12px;
  /* L'ECHIQUIER EST FIGE (constat presidentiel 2026-09-01). `manipulation` laissait le
     defilement de page s'emparer du geste : glisser une piece faisait defiler l'ecran, et
     le coup se perdait. `none` rend le plateau inerte au defilement et au zoom -- ce qui
     n'est pas une privation : c'est ce qui permet de glisser une piece avec le doigt. */
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}
.cclub-jx-board.is-dragging { cursor: grabbing; }
.cclub-jx-sq--l { fill: var(--app-sq-l); }
.cclub-jx-sq--d { fill: var(--app-sq-d); }

/* Terrain : case inatteignable et infranchissable.
   Le SENS prime sur la lettre : une meme lettre peint un lac (bleu, jeu du tour du lac)
   ou un mur (rouge de la charte). Le gris d'avant se confondait avec le fond. */
.cclub-jx-sq--lac { fill: var(--app-blue); }
.cclub-jx-sq--mur { fill: var(--app-red); }

/* Case d'arrivee : le but doit se voir, sinon le jeu n'a plus de regle. */
.cclub-jx-sq--but  { fill: var(--app-ok); }
.cclub-jx-goal     { fill: none; stroke: var(--app-pc-d); stroke-width: 2; pointer-events: none; }
.cclub-jx-goal-in  { fill: var(--app-pc-d); pointer-events: none; }

.cclub-jx-pc {
  paint-order: stroke;
  pointer-events: none;
  user-select: none;
}
.cclub-jx-pc--w { fill: var(--app-pc-l); stroke: var(--app-pc-d); }
.cclub-jx-pc--b { fill: var(--app-pc-d); stroke: var(--app-pc-l); }

.cclub-jx-tok { pointer-events: none; stroke-width: 1.5; }
.cclub-jx-tok__lock { fill: var(--app-warn); stroke: none; }
.cclub-jx-tok--w { fill: var(--app-pc-l); stroke: var(--app-pc-d); }
.cclub-jx-tok--b { fill: var(--app-pc-d); stroke: var(--app-pc-l); }

.cclub-jx-obj { fill: var(--app-warn); pointer-events: none; }

/* Marques. `--last` reste discret : il informe sans attirer le regard, alors que
   `--sel` doit se voir immediatement puisqu'il repond a un toucher. */
.cclub-jx-last { fill: var(--app-primary); fill-opacity: .22; pointer-events: none; }
.cclub-jx-sel  { fill: var(--app-primary); fill-opacity: .42; pointer-events: none; }

/* Curseur clavier (R-102 b) : sans etat de focus VISIBLE, l'echiquier reste inatteignable
   a qui ne se sert pas d'une souris -- et rien ne le signale. */
.cclub-jx-cur {
  fill: none;
  stroke: var(--app-primary);
  stroke-width: 3;
  pointer-events: none;
}
.cclub-jx-board:focus-visible { outline: 3px solid var(--app-primary); outline-offset: 3px; }

/* Pastilles des coups possibles : la regle rendue visible. */
.cclub-jx-hint { fill: var(--app-pc-d); fill-opacity: .30; cursor: pointer; }
.cclub-jx-hint--take {
  fill: none;
  stroke: var(--app-primary);
  stroke-width: 3;
  stroke-opacity: .85;
}

/* ------------------------------------------------------------------- coquille */

/* LA PORTE REPOSE SUR LA GOUTTIERE DE L'APP, ET ELLE NE LE FAISAIT PAS (ERGO-8, R-33c).
   MESURE au navigateur en 375 px : titre, onglets, cartes et compte a x=0, jusqu'au bord
   exact de l'ecran -- alors que le standard de l'app est un retrait lateral de 14 px
   (`.cclub-tiles { padding: 0 14px }`, `.cclub-app-card { margin: 14px }`). Rien ne le
   signalait : le contenu s'affichait, simplement colle aux deux bords, et le compte de la
   recherche finissait au pixel pres contre l'arete droite.
   *Un ecran qui ne respecte pas la gouttiere commune ne parait pas casse : il parait etranger
   au produit, et l'on cherche la difference sans la nommer.* */
.cclub-jx {
  display: flex;
  flex-direction: column;
  gap: var(--app-gap);
  color: var(--app-text);
  padding: 0 14px 18px;
  box-sizing: border-box;
}

.cclub-jx__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: var(--app-tap);
}
.cclub-jx__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(17px * var(--app-fs));
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Les actions passent A LA LIGNE quand la largeur manque, au lieu de rogner le
   nom du jeu. Un titre tronque ne nomme plus rien. */
.cclub-jx__acts { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 460px) {
  .cclub-jx__acts { flex: 1 1 100%; justify-content: flex-end; }
}

/* Le bouton REEMPLOIE `.cclub-app-seg` (R-33b) : cible tactile, rayon, focus et etat presse
   viennent de la fabrique de l'app. Ne restent ici que les deux variantes propres au lot. */
.cclub-jx__btn--go {
  background: var(--app-primary);
  color: var(--app-on-primary);
  border-color: var(--app-primary);
  font-weight: 600;
}
.cclub-jx__btn--ico { padding: 8px 12px; }
.cclub-jx__tabs { margin-bottom: 4px; }

/* --------------------------------------------------- recherche du catalogue (ERGO-8)
   MESURE DU 2026-09-04 : 22 jeux dans le seul rayon a deux (28 jeux, 60 variantes au
   total). Un mur de 22 cartes sur un telephone ne se parcourt pas, il se subit.
   Le champ ne parait qu'au-dela de huit jeux -- meme borne que les onglets :
   *un controle qui ne fait economiser aucun geste n'aide pas, il occupe la place.* */
.cclub-jx__search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
}
.cclub-jx__search-in {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--app-tap);          /* une cible plus petite que le doigt se rate */
  padding: 8px 12px;
  border: 1px solid var(--app-surface-2);
  border-radius: 10px;
  /* `--app-tile`, PAS `--app-surface` : ce dernier N'EXISTE PAS. Releve en posant cette regle
     -- il est employe par trois blocs de la feuille de l'app sans y avoir jamais ete defini,
     et un token fantome ne leve rien : la propriete rend une valeur vide et l'element herite
     du fond de son parent. Le defaut est consigne au registre plutot que corrige ici, l'ecran
     concerne n'etant pas celui de ce build. */
  background: var(--app-tile);
  color: var(--app-text);
  font: inherit;
}
.cclub-jx__search-in::placeholder { color: var(--app-text-3); }
.cclub-jx__search-in:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
  border-color: var(--app-primary);
}
/* Le compte ne se met JAMAIS en gras ni en couleur d'action : il rend compte, il n'appelle
   pas un geste. */
.cclub-jx__count {
  flex: 0 0 auto;
  font-size: calc(13px * var(--app-fs));
  color: var(--app-text-2);
  white-space: nowrap;
}
/* Une recherche sans resultat se DIT : une grille vide ne distingue pas << rien ne
   correspond >> de << le catalogue n'a pas charge >>. */
.cclub-jx__none {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 4px;
  color: var(--app-text-2);
  text-align: center;
}

/* ------------------------------------------------------------------- modale */
/* R-102 : ce qui se consulte PARFOIS ne se pose pas a cote de ce qui se lit TOUJOURS.
   L'app n'a aucune modale a son catalogue -- verifie. Celle-ci est donc propre au lot ;
   si une seconde surface en a besoin, elle sera promue au socle plutot que copiee. */
.cclub-jx__scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  padding: 16px;
}
.cclub-jx__modal {
  width: 100%;
  max-width: 440px;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--app-tile);
  color: var(--app-text);
  border-radius: var(--app-radius);
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cclub-jx__modal h4 { margin: 0; font-size: calc(18px * var(--app-fs)); font-weight: 600; }
.cclub-jx__modal-body { display: flex; flex-direction: column; gap: 10px; }
.cclub-jx__modal-body p { margin: 0; font-size: calc(14.5px * var(--app-fs)); }
.cclub-jx__modal-body small { color: var(--app-text-2); font-size: calc(12.5px * var(--app-fs)); }
@media (min-width: 560px) { .cclub-jx__scrim { align-items: center; } }

/* Bandeau d'etat : il dit TOUJOURS a qui est le trait, y compris quand
   l'ordinateur reflechit -- sans quoi l'attente ressemble a une panne. */
.cclub-jx__state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--app-tile);
  font-size: calc(14px * var(--app-fs));
}
.cclub-jx__turn { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cclub-jx__dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.cclub-jx__dot--w { background: var(--app-pc-l); border: 2px solid var(--app-pc-d); }
.cclub-jx__dot--b { background: var(--app-pc-d); border: 2px solid var(--app-pc-l); }
.cclub-jx__goal { color: var(--app-text-2); text-align: right; }

/* --------------------------------------------------------------- catalogue */

.cclub-jx__rayon { margin-top: 6px; }
.cclub-jx__rayon h3 {
  margin: 0 0 8px;
  font-size: calc(12px * var(--app-fs));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--app-text-2);
}
/* TROIS COLONNES, TOUJOURS (demande presidentielle du 2026-09-04).
   Les deux onglets partageaient DEJA cette regle -- et rendaient pourtant 2 colonnes pour les
   jeux a deux, 3 pour les casse-tetes. La cause n'etait pas la mise en page : l'onglet << A
   deux >> compte 21 cartes, assez pour faire apparaitre la BARRE DE DEFILEMENT, qui prend
   18 px ; il restait 462 px la ou 470 sont necessaires a trois colonnes de 150. L'onglet solo,
   avec ses 6 cartes, n'avait pas de barre et disposait de 480.
   *Une mise en page qui bascule sur la presence d'une barre de defilement change de forme
   selon la quantite de contenu, jamais selon la place disponible* -- et le seuil ne se voit
   nulle part : deux ecrans du meme produit se contredisent sans qu'aucune regle ne differe.
   Le nombre de colonnes est donc POSE, plus deduit. */
.cclub-jx__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cclub-jx__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  min-height: 72px;
  text-align: left;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-tile);
  color: var(--app-text);
  cursor: pointer;
  /* Un nom long ne doit pas elargir sa colonne ni deborder de sa tuile. */
  overflow: hidden;
}
.cclub-jx__card:hover { border-color: var(--app-primary); }
.cclub-jx__card:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.cclub-jx__card b {
  font-size: calc(13px * var(--app-fs));
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
/* LE BUT COURT SE COUPE A TROIS LIGNES, points de suspension a l'appui. Il aide a choisir un
   jeu, il ne le remplace pas : *un resume qui prend plus de place que le titre qu'il eclaire
   n'aide plus a choisir, il oblige a lire.* */
.cclub-jx__card span {
  font-size: calc(11.5px * var(--app-fs));
  color: var(--app-text-2);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ------------------------------------------------------------------ panneaux */

.cclub-jx__panel {
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-tile);
  padding: 16px 18px;
}
.cclub-jx__panel h4 {
  margin: 0 0 6px;
  font-size: calc(15px * var(--app-fs));
  font-weight: 600;
}
.cclub-jx__panel p { margin: 0 0 10px; font-size: calc(14px * var(--app-fs)); }
.cclub-jx__panel p:last-child { margin-bottom: 0; }
.cclub-jx__panel small { color: var(--app-text-2); font-size: calc(12.5px * var(--app-fs)); }

.cclub-jx__choices { display: flex; flex-wrap: wrap; gap: 8px; }

/* Il ne sert pas a faire joli : sans lui, le plateau pivote pendant que personne
   ne regarde, et le joueur suivant recoit une position qu'il n'a pas vue naitre.
   Il evite aussi le coup touche par inadvertance quand le telephone glisse sur
   la table. */
.cclub-jx__stage { position: relative; }
/* Le PLATEAU ne tourne pas : a1 reste a1 pour les deux joueurs assis face a face, et seules les
   pieces s'orientent -- INSTANTANEMENT.
   Le fondu qui marquait le passage de main a ete retire (constat presidentiel) : il estompait
   l'echiquier pendant que le joueur reprenait la main, donc au moment precis ou il en a besoin.
   *Une transition qui s'interpose entre le geste et son effet n'adoucit pas le passage : elle le
   coupe.* */

/* ---------------------------------------------------------------- fin de partie */

.cclub-jx__end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 18px;
  border-radius: 12px;
  background: var(--app-tile);
  text-align: center;
}
.cclub-jx__reward {
  margin: 0;
  font-size: calc(18px * var(--app-fs));
  line-height: 1.4;
  max-width: 34ch;
}
.cclub-jx__result {
  margin: 0;
  font-size: calc(13px * var(--app-fs));
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--app-text-2);
  font-weight: 600;
}
.cclub-jx__end .cclub-jx__choices { justify-content: center; }

/* Le motif du verdict : pourquoi la partie s'est terminee ainsi. Il precede la phrase de
   recompense, parce qu'un joueur qui ne comprend pas le resultat ne lit pas la plaisanterie. */
.cclub-jx__why {
  margin: 0;
  font-size: calc(14.5px * var(--app-fs));
  color: var(--app-text-2);
  border-left: 3px solid var(--app-primary);
  padding-left: 12px;
}

/* Compteur de demi-tours du lac, piece par piece et pour les deux camps. Il rend la regle
   VERIFIABLE : le joueur voit son compteur monter quand il franchit la ligne, et redescendre
   s'il repart en arriere. */
.cclub-jx__tours { display: flex; flex-direction: column; gap: 6px; }
.cclub-jx__tours-l {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: calc(13px * var(--app-fs));
}
.cclub-jx__tours-l b { min-width: 52px; font-weight: 600; }
.cclub-jx__demi {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--app-radius-pill);
  border: 1px solid var(--app-border); background: var(--app-tile);
  color: var(--app-text-2);
}
.cclub-jx__demi.is-plein {
  border-color: var(--app-primary); color: var(--app-text); font-weight: 600;
}
.cclub-jx__pc-mini { font-style: normal; font-size: calc(15px * var(--app-fs)); line-height: 1; }
.cclub-jx__pc-mini--w { color: var(--app-pc-l); -webkit-text-stroke: 1px var(--app-pc-d); }
.cclub-jx__pc-mini--b { color: var(--app-pc-d); }
.cclub-jx__demi.is-ok { background: var(--app-ok-bg); border-color: var(--app-ok); color: var(--app-ok); }

/* La piece dans la main : legerement grossie et posee d'une ombre, pour qu'on la voie
   au-dessus des cases et des autres pieces. Elle n'intercepte aucun evenement, sans quoi
   elle se volerait a elle-meme le pointeur qu'elle suit. */
.cclub-jx-ghost {
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}

/* ===================================================================== LES TROIS ZONES
 *
 * Arbitrage presidentiel du 2026-09-02 : le template range trois NATURES d'information,
 * pas une pile de boutons. L'ecran precedent empilait cinq boutons sur trois lignes, et le
 * nom du jeu occupait a lui seul la ligne la plus visible pendant toute la partie.
 * ===================================================================================== */

/* --- zone 1 : information. En haut, toujours visible, elle remplace le nom du jeu. ----- */
.cclub-jx__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--app-tile);
  border-radius: 10px;
  padding: 6px 8px;
}
.cclub-jx__info-l1 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--app-tap);
}
/* Le texte prend TOUTE la place restante : c'est lui qu'on lit, pas les deux cibles. */
.cclub-jx__info-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: calc(13.5px * var(--app-fs));
  color: var(--app-text-2);
}
.cclub-jx__info-txt b {
  font-size: calc(15px * var(--app-fs));
  font-weight: 600;
  color: var(--app-text);
}

/* --- les cibles sans libelle : reconnaissables a leur forme ---------------------------- */
.cclub-jx__ico {
  flex: none;
  width: var(--app-tap);
  height: var(--app-tap);
  display: grid;
  place-items: center;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-bg);
  color: var(--app-text-2);
  font-size: calc(17px * var(--app-fs));
  line-height: 1;
  cursor: pointer;
}
.cclub-jx__ico:hover { border-color: var(--app-primary); color: var(--app-primary); }
.cclub-jx__ico:focus-visible {
  outline: 3px solid var(--app-primary);
  outline-offset: 2px;
}
/* Abandonner est la seule action irreversible de la barre : elle porte le rouge d'action
   de la charte. Elle se confirme toujours, mais elle s'annonce d'abord. */
.cclub-jx__ico--quit { color: var(--app-red); }
.cclub-jx__ico--quit:hover { border-color: var(--app-red); color: var(--app-red); }

/* --- zone 3 : navigation. Une DEMI-ligne sous le plateau, alignee a droite. ------------ */
.cclub-jx__nav {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* --- zone 2 : les axes, dans le tiroir ------------------------------------------------- */
.cclub-jx__axe {
  margin: 10px 0 4px;
  font-size: calc(11.5px * var(--app-fs));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--app-text-2);
  font-weight: 600;
}
.cclub-jx__axe:first-child { margin-top: 0; }
.cclub-jx__sep {
  border: 0;
  border-top: 1px solid var(--app-border);
  margin: 12px 0 2px;
}

/* --- face a face : deux bandeaux, celui d'en face retourne -----------------------------
 *
 * Le joueur d'en face lit de SA place : son bandeau pivote d'un demi-tour, exactement comme
 * les pieces. Celui du joueur au trait reste net, l'autre s'estompe -- le changement de main
 * se lit alors sans un mot de plus, et sans rien masquer.
 * *Une information qu'on lit la tete a l'envers n'est pas une information.* */
.cclub-jx__info--duo { margin: 0; }
.cclub-jx__info--flip { transform: rotate(180deg); }
.cclub-jx__info--duo.is-attente { opacity: .52; }

/* La place du sandwich reste TENUE chez le joueur en attente : sans elle, son texte se
   recentrerait a chaque coup, et le bandeau semblerait sauter d'un cote a l'autre. */
.cclub-jx__ico--vide {
  border-color: transparent;
  background: none;
  pointer-events: none;
}

/* Case surveillee, au premier degre d'aide : un POINT, pas une teinte de case.
   Une case entierement coloree se confondrait avec le terrain infranchissable -- or ces
   cases-la sont praticables, elles sont seulement dangereuses. */
.cclub-jx-danger {
  fill: var(--app-red);
  fill-opacity: .55;
  pointer-events: none;
}

/* --- parcours : la piece seme son rang sur chaque case foulee ------------------------- */
.cclub-jx-step {
  fill: var(--app-warn);
  fill-opacity: .82;
  pointer-events: none;
}
.cclub-jx-step-n {
  fill: var(--app-on-primary);
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}

/* --- couverture : la teinte se SUPERPOSE, et c'est le point ---------------------------
   Deux pieces qui menacent la meme case la marquent deux fois : c'est precisement la que
   le conflit se prepare, et une teinte uniforme le cacherait. */
.cclub-jx-cover {
  fill: var(--app-primary);
  fill-opacity: .20;
  pointer-events: none;
}
.cclub-jx-cover--x2 { fill-opacity: .40; }

/* Ce que le niveau choisi demande, dit AVANT la partie et non decouvert en le ratant. */
.cclub-jx__exigence {
  margin: 6px 0 0;
  font-size: calc(13px * var(--app-fs));
  color: var(--app-text-2);
  font-style: italic;
}

/* ------------------------------------------------------------ LE NIVEAU SE REGLE A LA BARRE
   Demande presidentielle (refus T9-JEUX-1) : << il serait plus esthetique de ne pas avoir 3
   boutons, mais une barre avec un curseur s arretant sur les trois niveaux >>. Les trois noms
   restent ecrits sous la barre -- un cran qui ne se nomme nulle part ne se choisit pas. */
.cclub-jx__curseur { margin: 4px 0 2px; }

.cclub-jx__range {
  width: 100%;
  margin: 0;
  accent-color: var(--app-primary);
  /* La cible du doigt fait au moins 24px de haut : on regle en glissant, pas en visant. */
  height: 24px;
}
.cclub-jx__range:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 3px; }

.cclub-jx__crans {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
/* Les noms des extremites se collent aux bords de la barre, celui du milieu reste centre :
   sans cela, le premier et le dernier flottent a cote de leur cran. */
.cclub-jx__cran {
  flex: 1 1 0;
  text-align: center;
  font-size: calc(12px * var(--app-fs));
  color: var(--app-text-2);
}
.cclub-jx__cran:first-child { text-align: left; }
.cclub-jx__cran:last-child  { text-align: right; }
.cclub-jx__cran.is-on { color: var(--app-text); font-weight: 600; }

/* --------------------------------------------------- LE TERRAIN SE DESSINE (serpent, vagues)
   Demande presidentielle : les cases interdites du labyrinthe etaient des aplats rouges que
   les regles appelaient des << rochers >> ; elles portent desormais un SERPENT, plus parlant
   pour un enfant. Les cases du lac portent des VAGUES.
   *Une couleur ne nomme rien : elle distingue.* La couleur signale de loin, la glyphe nomme. */
.cclub-jx-serpent {
  /* UNE MASSE, PLUS UN TRAIT. Le premier serpent etait dessine au `stroke` : a la taille
     d'une case de telephone, un trait fin se dilue et la forme cesse d'exister. Le cobra est
     un chemin FERME, rempli -- sa lisibilite ne depend plus de l'epaisseur d'un contour.
     Les classes `--tete` et `--oeil` ont ete retirees avec lui : la silhouette porte tout. */
  fill: var(--app-on-primary);
  opacity: .82;
  pointer-events: none;
}

.cclub-jx-vague {
  fill: none;
  stroke: var(--app-on-primary);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .55;
  pointer-events: none;
}

/* =========================================================== ECRAN DE DEPART (maquette A1)
   QUATRE FORMES, QUATRE ROLES -- et aucune n'en emprunte une autre. Le constat presidentiel
   etait que des commandes de natures differentes portaient le meme habit ; la premiere
   reponse -- tout uniformiser -- a ete refusee a juste titre : *uniformiser des commandes de
   roles differents ne range pas l'ecran, cela produit une bouillie reguliere.*

   LE ROUGE EST L'ACTION, ET RIEN D'AUTRE. Il ne parait qu'une fois par ecran, sur << Jouer >>.
   *Une couleur de marque n'est pas une decoration qu'on repartit : c'est un mot qu'on emploie,
   et il ne peut avoir qu'un sens a la fois.* */

/* --- le but, et les deux glyphes qui le prolongent ---------------------------------------- */
.cclub-jx__tete {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}
.cclub-jx__but { margin: 0; color: var(--app-text-2); font-size: calc(13px * var(--app-fs)); }
.cclub-jx__glyphes { display: flex; gap: 6px; }
/* Une cible de CONSULTATION, jamais de commande : ronde, sans libelle, en retrait. Les regles
   et << a propos >> etaient deux boutons de meme poids que Jouer, alignes sous lui. */
.cclub-jx__gly {
  width: var(--app-tap); height: var(--app-tap);
  min-width: 30px; min-height: 30px;
  border-radius: var(--app-radius-pill);
  border: 1px solid var(--app-border);
  background: var(--app-tile);
  color: var(--app-text-2);
  display: grid; place-items: center; padding: 0;
}
.cclub-jx__gly svg { width: 16px; height: 16px; }
.cclub-jx__gly:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }

/* --- la VIGNETTE : on choisit un contenu, on le voit ------------------------------------- */
.cclub-jx__vars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 6px;
}
.cclub-jx__var {
  border: 1px solid var(--app-border);
  background: var(--app-tile);
  border-radius: var(--app-radius);
  padding: 8px 4px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font: inherit;
  min-height: 56px;
}
.cclub-jx__var.is-on {
  border-color: var(--app-primary);
  border-width: 2px;
  padding: 7px 3px 6px;
  background: var(--app-blue-bg);
}
.cclub-jx__var-pcs {
  font-size: calc(17px * var(--app-fs));
  line-height: 1;
  color: var(--app-pc-d);
  letter-spacing: .5px;
}
.cclub-jx__var-nom {
  font-size: calc(11px * var(--app-fs));
  line-height: 1.25;
  text-align: center;
  color: var(--app-text-2);
}
.cclub-jx__var.is-on .cclub-jx__var-nom { color: var(--app-primary); font-weight: 600; }

/* --- l'INTERRUPTEUR : deux etats qui s'excluent, un seul objet ---------------------------- */
.cclub-jx__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--app-blue-bg);
  border-radius: var(--app-radius-pill);
  padding: 3px;
  margin-top: 6px;
}
.cclub-jx__switch-b {
  border: 0; background: none;
  color: var(--app-text-2);
  border-radius: var(--app-radius-pill);
  padding: 9px 6px;
  font: inherit;
  font-size: calc(13px * var(--app-fs));
  min-height: 36px;
}
.cclub-jx__switch-b.is-on {
  background: var(--app-primary);
  color: var(--app-on-primary);
  font-weight: 600;
}

/* --- le PANNEAU DE L'ORDINATEUR : son fond et sa bordure suffisent a le nommer -------------
   Il portait un titre << Contre l'ordinateur >>, juste sous l'interrupteur du meme nom qu'on
   venait de basculer. *Un titre qui repete le bouton qui l'a fait paraitre ne nomme rien : il
   confirme.* Retire, avec ses 15 px et sa marge -- sur un petit telephone, ce panneau poussait
   << Jouer >> hors de l'ecran (constat presidentiel du 2026-09-04). */
.cclub-jx__ordi {
  background: var(--app-blue-bg);
  border: 1px solid var(--app-blue-bord);
  border-radius: var(--app-radius);
  padding: 8px 12px 10px;
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.cclub-jx__ordi .cclub-jx__axe { margin-top: 6px; }
.cclub-jx__ordi .cclub-jx__axe:first-child { margin-top: 0; }

/* LE RESUME DU PANNEAU : une ligne qui dit l'etat, et qui l'ouvre.
   Il porte les VALEURS (la force, qui commence), pas seulement un titre -- *un reglage qu'on
   ne change pas a chaque partie n'a pas besoin d'occuper l'ecran a chaque partie, mais il doit
   rester lisible, sinon on part sans savoir contre quoi.* */
.cclub-jx__ordi-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cclub-jx__ordi-quoi {
  font-size: calc(13px * var(--app-fs));
  font-weight: 600;
}
.cclub-jx__ordi-chev {
  font-size: calc(18px * var(--app-fs));
  color: var(--app-text-2);
  line-height: 1;
}
.cclub-jx__ordi-tete:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.cclub-jx__ordi-tete.is-open { margin-bottom: 2px; }

/* << JOUER >> RESTE ATTEIGNABLE, QUELLE QUE SOIT LA HAUTEUR DE L'ECRAN.
   Le compactage repousse le probleme, il ne le supprime pas : il suffit d'un appareil plus
   petit, d'une police agrandie ou d'un jeu a quatre variantes pour que le bouton reparte hors
   champ. *Un bouton d'action dont la visibilite depend du defilement se perdra sur le premier
   appareil un peu plus petit -- et celui qui ne le voit pas ne cherche pas, il repart.*
   Il se colle donc au bas de la zone visible tant que le contenu defile, et reprend sa place
   des que tout tient. Le fond est opaque : sinon le panneau defile dessous et le libelle
   devient illisible sur deux lignes de texte. */
/* LE CAMP TIENT SUR UNE LIGNE avec son titre : trois pastilles ne meritent pas une ligne pour
   elles seules quand la place manque a ce qui lance la partie. */
.cclub-jx__ligne {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 6px;
}
.cclub-jx__ligne .cclub-jx__axe { margin: 0; }
.cclub-jx__ligne .cclub-jx__jetons { margin-top: 0; }

/* Le meme rang, mais un contenu plus large : le titre reprend sa ligne. */
.cclub-jx__bloc { margin-top: 6px; }
.cclub-jx__bloc .cclub-jx__axe { margin: 0 0 4px; }

/* Le tiroir de reglages en cours de partie porte EXACTEMENT le meme socle que l'ecran de
   depart -- il n'a donc aucune regle a lui, seulement de quoi le separer des boutons. */
.cclub-jx__reglages { display: block; }
.cclub-jx__glyphes--bas { justify-content: flex-end; margin-top: 4px; }

/* --- le JETON : une identite, ronde comme une piece --------------------------------------- */
.cclub-jx__jetons { display: flex; gap: 9px; align-items: center; margin-top: 6px; }
.cclub-jx__jeton {
  width: 42px; height: 42px;
  border-radius: var(--app-radius-pill);
  border: 2px solid var(--app-border);
  display: grid; place-items: center;
  font-size: calc(21px * var(--app-fs));
  line-height: 1; padding: 0; font: inherit;
}
.cclub-jx__jeton--blanc  { background: var(--app-pc-l); color: var(--app-pc-d); }
.cclub-jx__jeton--noir   { background: var(--app-pc-d); color: var(--app-pc-l); }
.cclub-jx__jeton--hasard { background: var(--app-tile); color: var(--app-text-2);
                           font-size: calc(18px * var(--app-fs)); }
/* LA SELECTION DOIT DOMINER LA COULEUR NATURELLE DE LA PIECE. Vu a l ecran : un halo clair
   autour du jeton BLANC pesait moins que le noir plein d a cote -- on croyait le noir choisi
   alors qu il ne l etait pas.
   *Un etat qui se marque plus faiblement qu une difference d aspect deja presente ne se lit
   pas comme un etat : il se lit comme une nuance.*
   L anneau est donc PLEIN et de la couleur d accent, et le jeton se souleve legerement. */
.cclub-jx__jeton.is-on {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-primary), 0 2px 6px rgba(0, 0, 0, .18);
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) { .cclub-jx__jeton.is-on { transform: none; } }
.cclub-jx__jeton:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }

/* --- AGIR : seul, pleine largeur, et le SEUL rouge de l'ecran ----------------------------- */
.cclub-jx__go {
  width: 100%;
  margin-top: 12px;
  /* IL RESTE ATTEIGNABLE, QUELLE QUE SOIT LA HAUTEUR DE L'ECRAN. Le compactage repousse le
     probleme, il ne le supprime pas : il suffit d'un appareil plus petit, d'une police
     agrandie ou d'un jeu a quatre variantes pour que le bouton reparte hors champ.
     *Un bouton d'action dont la visibilite depend du defilement se perdra sur le premier
     appareil un peu plus petit -- et celui qui ne le voit pas ne cherche pas, il repart.*
     Il se colle au bas de la zone visible tant que le contenu defile, et reprend sa place des
     que tout tient. */
  position: sticky;
  bottom: 0;
  z-index: 2;
  border: 0;
  border-radius: var(--app-radius);
  background: var(--app-red);
  color: var(--app-on-primary);
  font: inherit;
  font-size: calc(16px * var(--app-fs));
  font-weight: 600;
  padding: 13px;
  min-height: 46px;
}
.cclub-jx__go:focus-visible { outline: 2px solid var(--app-text); outline-offset: 2px; }

/* ---------------------------------------------- LA PIECE EN MAIN (phase de pose, maquette 3)
   Constat presidentiel : rien n indiquait quelle piece allait etre posee. Le defaut etait plus
   large -- la coquille prenait la PREMIERE de la reserve, dans un ordre que le joueur ne
   voyait pas et ne pouvait pas changer.
   *Un ordre que personne n a choisi n est pas un defaut d affichage : c est une decision prise
   a la place du joueur, et qu aucun ecran n avoue.* */
.cclub-jx__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--app-blue-bg);
  border: 1px solid var(--app-blue-bord);
  border-radius: var(--app-radius);
  padding: 9px 11px;
  margin-top: 8px;
}
/* La piece tenue, EN GRAND : c est le seul objet de cette bande qui se regarde de loin. */
.cclub-jx__main-pc {
  width: 46px; height: 46px;
  border-radius: var(--app-radius);
  background: var(--app-pc-l);
  border: 2px solid var(--app-primary);
  color: var(--app-pc-d);
  display: grid; place-items: center;
  font-size: calc(26px * var(--app-fs));
  line-height: 1;
}
.cclub-jx__main-pc--noir { background: var(--app-pc-d); color: var(--app-pc-l); }
.cclub-jx__main-txt { font-size: calc(12.5px * var(--app-fs)); color: var(--app-text-2); }
/* Le NOM de la piece, ecrit : un enfant qui apprend ne reconnait pas encore les glyphes. */
.cclub-jx__main-txt b {
  display: block;
  color: var(--app-primary);
  font-weight: 600;
  font-size: calc(13.5px * var(--app-fs));
}
.cclub-jx__main-reste { display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.cclub-jx__main-mini { font-size: calc(15px * var(--app-fs)); line-height: 1; color: var(--app-text-3); }
.cclub-jx__main-n { font-size: calc(12px * var(--app-fs)); color: var(--app-text-2); }
.cclub-jx__main-chg { font-size: calc(11.5px * var(--app-fs)); padding: 5px 10px; }