/* ============================================================================
   ONSEN V3 - feuille de style du socle (cycle 3 ; scindee au cycle 20).

   Mobile d'abord (cible 390 px), mise en page large a partir de 900 px, theme
   sombre et clair par `prefers-color-scheme`. Aucune dependance, aucune police
   distante : depuis le cycle 18 (lot D), deux polices libres sont servies par
   le jeu lui-meme (`fonts/`, 29 Ko depuis le cycle 20), la pile systeme
   reste en repli.

   REGLE DE MISE EN PAGE, tenue partout : tout bloc qui attend une donnee du
   serveur porte une HAUTEUR MINIMALE avant que la donnee arrive. C'est la seule
   facon d'obtenir « aucune mise en page qui saute pendant un rejeu » sans
   bricoler apres coup.

   LE SOCLE (cycle 20, lot A). Cette feuille est celle de la coquille : jetons,
   mise en page, en-tete, barres, boutons, cartes, et les ecrans du premier
   passage (connexion, arene, journal). Les regles des ecrans rares vivent dans
   css/ecrans/<nom>.css (rejeu, codex, dojo, tournoi, yokai, amis), chargees
   avec leur ecran. Une regle ajoutee pour un ecran rare va dans sa feuille ;
   dans le doute, ici.
   ========================================================================== */
/* -------------------------------------------------------------------------
   1. Jetons
   ------------------------------------------------------------------------- */
:root {
  color-scheme: dark light;

  /* CYCLE 18 (lot D) : « BLEU ET BLANC A LA JAPONAISE, CHILL ». La charte est
     dans docs/LABRUTE-C18.md §4. Quatre familles, pas une de plus :
       - le washi (blanc casse) pour le fond, le blanc pur pour les cartes ;
       - l'indigo profond (ai) pour le texte et l'action (boutons pleins) ;
       - le bleu d'eau d'onsen (mizu) pour les surfaces secondaires et le motif ;
       - UN accent chaud, l'or (kincha), pour ce qui compte : jetons, niveau,
         XP, recompense, onglet actif, « c'est moi ».
     Le vermillon et le jade ne sont plus des decors : ils disent un etat
     (defaite, danger, yokai ; victoire, soin). Chaque texte ci-dessous a ete
     mesure contre les quatre fonds de son theme (script de la charte) : 5,9 au
     plus bas en clair, 6,6 en sombre. */

  /* Teintes des APLATS (fonds, barres, bordures). */
  --vermillon: #c9492f;
  --vermillon-vif: #e0603f;
  --indigo: #23427c;
  --or: #c9a04e;
  --jade: #3a9b74;
  --mizu: #86b6d8;

  /* L'action : le bouton plein indigo et son survol, le texte blanc dessus
     tient 9,8 (12,2 au survol). */
  --action: #23427c;
  --action-survol: #1a3466;
  --action-texte: #ffffff;
  /* Le contour du focus : un bleu franc qui tient 4,3 a 4,9 contre les trois
     fonds clairs (3 exiges pour un element d'interface). */
  --focus: #2f6fcf;
  /* Le motif seigaiha : un trait de mizu, a peine visible. */
  --motif: rgba(90, 145, 190, 0.22);
  /* La pastille de l'onglet actif, et le fond d'un bouton secondaire survole. */
  --pastille: #dce8f4;
  /* Le bord d'un champ de saisie : 3,3 contre le blanc (1.4.11, 3 exiges). */
  --trait-champ: #7b8fab;

  /* LES MEMES TEINTES, VERSION TEXTE : au moins 5,9 sur chaque fond clair. */
  --or-texte: #77540c;
  --jade-texte: #17684a;
  --vermillon-texte: #a6321c;
  --indigo-texte: #244a8a;

  /* Le badge IA : un sceau vermillon profond (hanko), le blanc gras y tient
     7,1. C'est la marque la plus voyante de l'interface, et c'est voulu. */
  --badge-ia: #a32d16;

  /* Theme clair, par defaut : le blanc de lune et le blanc (c57 U : le fond passe du washi creme #f7f5f0 au geppaku,
     DA3 (a) de la bible ; plus aucun fond creme). */
  --fond: #eef3f8;
  --fond-2: #eef2f6;
  --surface: #ffffff;
  --surface-2: #eaf1f7;
  --trait: #dfe6ee;
  --trait-fort: #b3c1d3;
  --texte: #14213a;
  --texte-2: #3a4964;
  --texte-3: #4d5b74;
  /* c57 U : les deux ombres floues deviennent l'ombre franche (DA5 : la meme forme decalee de 2 px, kachi, sans flou) ;
     tous leurs usages basculent d'un coup. tests-v3/plateau-c57.test.mjs le tient. */
  --ombre-1: var(--ombre-franche);
  --ombre-2: var(--ombre-franche);
  --voile: rgba(35, 66, 124, 0.06);

  /* c57 socle : LA PALETTE DE LA BIBLE (docs/STYLE-ONSEN.md DA3), les memes valeurs que
     js/palette.js (tests-v3/palette-c57.test.mjs tient l'egalite). Un AJOUT : aucun jeton
     d'avant ne change, rien ne se voit. `--mizu` existe plus haut, a la meme valeur. Les
     teintes de la planche de style validee se recopient ici et dans palette.js, nulle part
     ailleurs. */
  --kachi: #16223d;
  --ai: #23427c;
  --geppaku: #eef3f8;
  --shu: #c9492f;
  --yamabuki: #c9a04e;
  --lueur: #ffd27a;
  --wakatake: #3a9b74;
  --fuji: #8f78c8;
  --laque: #14233f;
  --papier: #f4f1e8;
  --bleu-gris: #7d8aa3;
  --shu-texte: #a6321c;
  --yamabuki-texte: #77540c;
  --wakatake-texte: #17684a;
  /* L'ombre franche (DA5) : la meme forme decalee de 2 px, en kachi, sans flou. */
  --ombre-franche: 2px 2px 0 rgb(22 34 61 / 0.28);
  /* c58 (le contrat) : la laque et l'or du plateau, les memes valeurs que PALETTE */
  --urushi: #1d1619;
  --kinpaku: #e0b85a;
  --kin-sombre: #9a7424;
  /* fin c57 socle */

  /* Rayons : 12 a 16 px pour les composants, 8 pour les petites cases. */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --largeur: 460px;
  --entete-h: 52px;
  /* Zone sure du haut (encoche, ilot dynamique de l'iPhone) : l'en-tete la prend
     en hauteur, les elements calés sous lui la comptent (24/09/2026, retour de
     Valentin sur iPhone 16 en mode application). */
  --zone-sure-haut: env(safe-area-inset-top, 0px);
  --entete-total: calc(var(--entete-h) + var(--zone-sure-haut));
  --barre-h: 60px;
  --marge-cote: 16px;

  /* Deux polices libres (SIL OFL 1.1), AUTO-HEBERGEES dans fonts/ (la CSP
     dit `font-src 'self'`) : Nunito pour le corps (chiffres tabulaires de
     naissance), Zen Maru Gothic pour les titres. La pile systeme suit en
     repli : si une police manque, rien ne casse. */
  --police: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    system-ui, sans-serif;
  --police-titre: "Zen Maru Gothic", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* L'INDIGO DE NUIT, pas le gris : meme famille que le clair. */
    --fond: #0b1322;
    --fond-2: #0f192c;
    --surface: #142036;
    --surface-2: #1a2844;
    --trait: #24365a;
    --trait-fort: #3d5480;
    --texte: #e8edf6;
    --texte-2: #b8c3d8;
    --texte-3: #a2afc6;
    --voile: rgba(158, 192, 242, 0.08);
    /* c57 socle : en theme sombre l'ombre franche est une encre de nuit, plus sombre que le fond
       (le kachi y est plus clair que le fond : il eclairerait au lieu d'ombrer). */
    --ombre-franche: 2px 2px 0 rgb(4 8 20 / 0.6);
    --vermillon: #e2573a;
    --indigo: #6f9ada;
    --or: #e6c06e;
    --mizu: #5f8fc0;
    --action: #3f6cb8;
    --action-survol: #3560a8;
    --focus: #8ec2ff;
    --motif: rgba(120, 165, 225, 0.16);
    --pastille: #24395f;
    --trait-champ: #5a74a3;
    --or-texte: #e6c06e;
    --jade-texte: #62d1a1;
    --vermillon-texte: #ff8f74;
    --indigo-texte: #9ec0f2;
    --badge-ia: #a32d16;
  }
}

/* --- les polices (cycle 18, lot D) ------------------------------------------
   Deux fichiers woff2 servis par le jeu (fonts/, licence SIL OFL 1.1 a cote),
   reduits au latin (francais et anglais : accents, œ, guillemets, espaces
   fines, €). Nunito est une police VARIABLE bornee a 400-800 : un seul
   fichier couvre toutes les graisses du corps ; Zen Maru Gothic n'a que le
   700. `font-display: swap` : le texte se lit tout de suite dans la police
   systeme, puis prend la sienne ; index.html precharge les deux fichiers pour
   que l'echange tombe avant le premier rendu.
   CYCLE 20 (lot A) : SOUS-ENSEMBLE STRICT. Les deux fichiers ne portent plus
   que les caracteres que le jeu ecrit : l'ASCII (moins $ * < = > [ \ ] ^ ` | ~,
   qu'aucun texte n'emploie), les lettres accentuees du francais, le macron
   combinant (le o long de Tanto, Bo, Odachi, que le navigateur compose), les
   guillemets, l'apostrophe, les points de suspension, le tiret demi-cadratin,
   le point median, le signe moins ; toutes les regles de mise en forme (Nunito
   change des glyphes selon la graisse) et les tables de rendu gardees. 33 + 12
   Ko devenus 22 + 7 Ko (fontTools, docs/REGIME-C20.md §1) ; les 3 015 textes
   des dictionnaires ont la meme largeur, au pixel, a chaque graisse.
   `unicode-range` dit au navigateur ce que chaque fichier couvre : tout autre
   caractere (un nom de joueur en ñ, une fleche, un symbole) tombe sur la
   police du systeme, comme avant pour ce que ces polices ne dessinaient pas. */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-23, U+25-29, U+2B-3B, U+3F-5A, U+5F, U+61-7B, U+7D, U+A0, U+A7, U+AB, U+B0, U+B7, U+BB, U+C0, U+C2, U+C6-CB, U+CE-CF, U+D4, U+D7, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF, U+14C-14D, U+152-153, U+16A-16B, U+304, U+2013, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+2212;
}

@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/zen-maru-gothic-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-23, U+25-29, U+2B-3B, U+3F-5A, U+5F, U+61-7B, U+7D, U+A0, U+A7, U+AB, U+B0, U+B7, U+BB, U+C0, U+C2, U+C6-CB, U+CE-CF, U+D4, U+D7, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF, U+152-153, U+2013, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+2193, U+2212;
}

/* --- typo (lot B, cycle 16) ------------------------------------------------
   LES JETONS TYPOGRAPHIQUES, ET LEUR APPLICATION A LA TAILLE DU TEXTE.
   Mesure du 24/09 sur les ecrans d'entree (connexion, creation, arene, dojo) :
   sur 99 textes visibles du dojo a 390 px, 74 faisaient moins de 15 px, jusqu'a
   11 px pour les etiquettes et l'aide des champs. La regle du guide
   (docs/GUIDE-ECRITURE.md) : 15 px au moins pour tout texte qu'on LIT, 14 px
   pour une etiquette (compteur, legende, pastille), interligne 1,4 au moins,
   ligne bornee a 66 caracteres, chiffres tabulaires la ou l'on compare.
   POURQUOI `:root` DEVANT CHAQUE SELECTEUR. Ce bloc vit ici, a cote des
   jetons, et pas dans chaque section : la mise en page (lot D) et le rejeu
   (lot A) gardent leurs sections. Le prefixe `:root` ajoute une classe de
   specificite : la taille, l'interligne et les chiffres poses ici gagnent sur
   ceux des sections suivantes, et RIEN D'AUTRE (ni marge, ni grille, ni
   couleur). Pour changer une taille, change le jeton. Le rejeu, la carte SVG
   du dojo et la barre basse ne sont pas touches ici. */
:root {
  --t-etiquette: 0.875rem;   /* 14 px : etiquettes, compteurs, legendes */
  --t-lu: 0.9375rem;         /* 15 px : tout texte lu, sur telephone aussi */
  --t-corps: 1rem;           /* 16 px : le corps, les champs */
  --interligne: 1.45;
  --interligne-etiquette: 1.3;
  --mesure: 66ch;            /* largeur de ligne d'un paragraphe */
  /* Texte discret : sa valeur vit avec les autres jetons de couleur depuis le
     cycle 18 (lot D) : 6,0 sur `--surface-2` clair, 6,6 sur `--surface-2`
     sombre, au plus bas (le plancher du lot B etait 6,0). */
}

/* Tout texte qu'on lit : 15 px, interligne 1,45. */
:root .sous-titre,
:root .message,
:root .bandeau,
:root .accueil-hero p,
:root .champ .aide,
:root .codex-regles p,
:root .niveau-gagne-corps,
:root .arene-cible,
:root .liste-puces,
:root .dojo-condition,
:root .dojo-usages,
:root .dojo-malus,
:root .dojo-carte-choix .dojo-effet,
:root .dojo-chiffres-plats,
:root .comparee,
:root .yokai-regle,
:root .yokai-chiffres,
:root .yokai-rebours,
:root .yokai-coup-corps,
:root .yokai-recompenses,
:root .yokai-ligne,
:root .lexique dd {
  font-size: var(--t-lu);
  line-height: var(--interligne);
}

/* Le bandeau de message tient en deux lignes au-dessus du titre de l'ecran
   (le banc le mesure) : 15 px, mais un interligne serre. D'ou la regle du
   guide, 70 caracteres au plus par message, noms compris. */
:root .message { line-height: var(--interligne-etiquette); }

/* Les etiquettes : 14 px. */
:root .champ > span,
:root .etiquette,
:root .etiquette-objet,
:root .fiche-inventaire .etiquette,
:root .grille-stats div,
:root .tirage-relances,
:root .jetons span,
:root .section-titre,
:root .ligne-journal .issue,
:root .ligne-journal .quand,
:root .journal-revanche,
:root .ligne-classement .details,
:root .pagination span,
:root .codex-regles h2,
:root .codex-onglet,
:root .codex-onglet-compte,
:root .codex-compte,
:root .dojo-legende,
:root .dojo-legende-titre,
:root .dojo-legende-branches,
:root .dojo-chiffre,
:root .dojo-chiffre .ecart,
:root .dojo-carte-branche,
:root .yokai-ligne-quand,
:root .yokai-ligne-issue,
:root .yokai-rappel-sur,
:root .yokai-rappel-ligne,
:root .comparee thead th {
  font-size: var(--t-etiquette);
}

/* La largeur d'une ligne de lecture, sur grand ecran. */
:root .sous-titre,
:root .accueil-hero p,
:root .codex-regles p,
:root .lexique dd {
  max-width: var(--mesure);
}

:root .accueil-hero p { margin-inline: auto; }

/* Les chiffres qu'on compare d'une ligne a l'autre ne dansent plus. */
:root .jetons,
:root .tirage-relances,
:root .ligne-classement,
:root .ligne-journal .quand,
:root .pagination span,
:root .codex-compte,
:root .comparee,
:root .podium,
:root .yokai-ligne {
  font-variant-numeric: tabular-nums;
}

/* La seule entorse a la regle « rien que la taille » : a 390 px, la carte
   d'arene laisse 60 px a cote du portrait, et « Renommée » en 14 px en fait 72
   (il debordait de la carte de 2 px, mesure du 24/09). Les chiffres passent
   alors sous le portrait au lieu de sortir du cadre. A reprendre par la
   grille du lot D si elle donne plus de place. */

/* Meme cause pour le palmares : « 12 victoires, 10 défaites » en 14 px ne
   tient pas sur une ligne dans 150 px ; la pastille passe a la ligne. */
:root .fiche-etiquettes .etiquette { white-space: normal; }

/* Les mots du dojo (encart du Codex, cycle 16) : un terme, sa ligne. */
.lexique { margin: 6px 0 0; }

.lexique dt { font-weight: 700; margin-top: 8px; }

.lexique dd { margin: 2px 0 0; color: var(--texte-2); }
/* --- fin typo ------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   2. Socle
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* `hidden` doit gagner contre les `display` que ce fichier pose plus bas.
   Sans cette ligne, `.champ { display: block }` rend visible un champ marque
   `hidden` : c'est exactement ce qui affichait le code d'invitation en mode
   connexion. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 var(--police);
  /* Aucun defilement horizontal, jamais : c'est une porte du banc. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Les titres en Zen Maru Gothic (cycle 18) : une gothique ronde japonaise,
   douce, en 700 seulement (un fichier). */
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: 0.01em; }

h1 { font-size: 1.4rem; }

h2 { font-size: 1.12rem; }

h3 { font-size: 1rem; }

p { margin: 0 0 0.6em; }

/* `ol` autant que `ul` : le journal du rejeu est une liste ORDONNEE (l'ordre
   des coups est une information), et ses puces numerotees n'apportaient qu'un
   « . » devant chaque ligne. */
ul, ol { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; }

a { color: var(--indigo-texte); }

/* Le focus : un contour bleu franc (cycle 18), visible sur le washi, le
   blanc et le mizu (4,3 au plus bas) comme sur l'indigo de nuit. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 10px 14px;
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-m);
}

.saut-contenu:focus { left: 8px; top: 8px; }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   3. Charpente
   ------------------------------------------------------------------------- */
.appli {
  /* Repli pour Safari d'avant la 15.4, qui ignore dvh et svh (cycle 13). */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: var(--entete-total) 1fr auto;
  grid-template-columns: 100%;
}

.entete {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--entete-total);
  padding: var(--zone-sure-haut) var(--marge-cote) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
  position: sticky;
  top: 0;
  z-index: 20;
}

.entete-marque { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Le sceau est l'icone de l'application (cycle 18) : le bain, la vapeur et
   l'eau, sur l'indigo. */
.entete-sceau {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: url("../icones/onsen.svg") center / cover no-repeat;
}

.entete-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--texte);
}

.entete-info {
  font-size: 0.78rem;
  color: var(--texte-2);
  display: flex;
  align-items: center;
  gap: 10px;
  /* Hauteur figee : les jetons arrivent apres le premier rendu. */
  min-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entete-info b { color: var(--or-texte); font-variant-numeric: tabular-nums; }

.contenu {
  grid-row: 2;
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  /* LE BAS DE PAGE N'EST PAS DE LA DECORATION. La barre basse est `sticky` :
     elle flotte AU-DESSUS du contenu tant qu'on n'est pas arrive en bas. Sans
     une reserve de sa hauteur, le bouton « Attaquer » de la derniere carte
     d'arene se retrouve sous les onglets -- deux cibles tactiles superposees,
     que Lighthouse signale a juste titre (`target-size`, mesure a 96 sur
     l'arene) et qu'un pouce confond pour de vrai. */
  padding: 14px var(--marge-cote) calc(var(--barre-h) + 24px);
  /* Reserve la place du premier ecran : rien ne saute au montage. */
  min-height: 60vh;
  min-height: 60svh;
}

.contenu:focus { outline: none; }

/* L'ECRAN DE DEMARRAGE (cycle 16, lot D) : le sceau, le nom, une ligne, au
   centre. C'est ce que l'application installee montre entre l'icone et le
   premier ecran : avant, une ligne grise en haut a gauche. */
.chargement-initial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--texte-3);
  padding: 32px 0;
  min-height: 50vh;
  min-height: 50svh;
}

.chargement-sceau {
  width: 64px; height: 64px; border-radius: 18px;
  background: url("../icones/onsen.svg") center / cover no-repeat;
  box-shadow: var(--ombre-2);
}

.chargement-nom {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: var(--texte);
}

.chargement-ligne { display: flex; align-items: center; gap: 10px; }

.chargement-rond {
  width: 18px; height: 18px; flex: none;
  border: 2px solid var(--trait);
  border-top-color: var(--action);
  border-radius: 50%;
  animation: tourne 0.9s linear infinite;
}

@keyframes tourne { to { transform: rotate(360deg); } }

/* --- barre basse (mobile) ------------------------------------------------ */
.barre-basse {
  grid-row: 3;
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: 1px solid var(--trait);
  box-shadow: var(--ombre-franche);
  padding-bottom: env(safe-area-inset-bottom, 0);
  min-height: var(--barre-h);
}

.barre-basse:empty { min-height: 0; border-top: 0; }

.onglet {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  color: var(--texte-3);
  font: inherit;
  font-size: 0.68rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 44 px de cible tactile au minimum, pouce compris. */
  min-height: var(--barre-h);
  padding: 6px 2px;
  cursor: pointer;
  position: relative;
}

.onglet-pictogramme { font-size: 1.15rem; line-height: 1; }

/* L'onglet actif (cycle 18) : l'indigo, et une pastille de mizu derriere le
   pictogramme (barre basse) ou toute la ligne (colonne du web). Plus de
   liseré : la pastille se voit mieux et ne se confond pas avec un trait. */
.onglet[aria-current="page"] { color: var(--indigo-texte); }

.barre-basse .onglet-pictogramme {
  display: grid;
  place-items: center;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  transition: background-color 0.2s var(--sortie);
}

.barre-basse .onglet[aria-current="page"] .onglet-pictogramme { background: var(--pastille); }

.onglet-pastille {
  position: absolute;
  top: 8px;
  left: 56%;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--badge-ia);
  color: #fff;
  font-size: 0.6rem;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   4. Mise en page bureau (a partir de 900 px)
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* CYCLE 16 (lot D) : UTILISER LA LARGEUR, PAS L'ETIRER. Quatre colonnes :
     deux gouttieres qui se partagent le reste, la colonne laterale (240 px)
     et le contenu (1 100 px au plus). A 1 280 px les gouttieres valent zero ;
     a 1 920 px, la colonne et le contenu restent cote a cote au centre au lieu
     de laisser 1 400 px de vide entre la navigation et le texte. */
  .appli {
    /* c38 L1 : plus de rail. Hors cadre de jeu (combat, connexion), le contenu
       est centre, 1 100 px au plus ; le cadre de jeu pose sa colonne (bloc c38 L1). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1100px) minmax(0, 1fr);
    grid-template-rows: var(--entete-total) 1fr;
  }
  /* Avant la connexion il n'y a pas de navigation : la colonne disparait au
     lieu de laisser 240 px de vide a cote du formulaire. */
  .appli.sans-navigation { grid-template-columns: minmax(0, 1fr) minmax(0, 1340px) minmax(0, 1fr); }
  .appli.sans-navigation .contenu { grid-column: 2; }
  /* identite (cycle 18, lot D) : sans colonne, le formulaire d'accueil est au
     centre de la fenetre, plus a 550 px sur 1 280. */
  .appli.sans-navigation .contenu { margin-inline: auto; }
  .entete {
    grid-column: 1 / -1;
    /* Le contenu de l'en-tete s'aligne sur la coquille centree. */
    padding-left: max(var(--marge-cote), calc((100% - 1340px) / 2));
    padding-right: max(var(--marge-cote), calc((100% - 1340px) / 2));
  }
  .barre-basse { display: none; }
  /* Plus de barre basse a partir de 900 px : la reserve du bas n'a plus lieu
     d'etre, et vingt pixels suffisent. */
  .contenu { padding-bottom: 24px; }
  .contenu {
    grid-column: 2;
    grid-row: 2;
    max-width: 1100px;
    /* c38 L1 : hors cadre (le combat), la largeur d'avant le retrait du rail : le rejeu ne change pas de taille. */
    max-width: min(1100px, calc(100vw - 240px));
    margin: 0 auto;
    padding: 22px 32px 40px;
  }
  /* Six cartes d'adversaires sur une seule ligne de 1280 px, ce sont six
     colonnes de 150 px ou le niveau passe a la ligne trois fois. Deux rangees
     de trois se lisent d'un coup d'oeil. */

}

/* -------------------------------------------------------------------------
   5. Briques communes
   ------------------------------------------------------------------------- */
/* LA CARTE (cycle 18) : du blanc sur le washi, un trait a peine visible,
   une ombre douce, 16 px de rayon. */
.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: 16px;
  box-shadow: var(--ombre-1);
}

.carte + .carte { margin-top: 12px; }

.titre-ecran { margin-bottom: 4px; }

.sous-titre { color: var(--texte-2); font-size: 0.86rem; margin-bottom: 14px; }

/* LES BOUTONS (cycle 18). Le secondaire : un aplat de mizu, texte indigo,
   sans bordure visible (le trait transparent garde la place et reparait en
   mode de contraste force). Le principal : l'indigo plein, texte blanc, une
   ombre d'eau. Le discret : un contour fin. Rayons de 12 px. */
.bouton {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--indigo-texte);
  border-radius: var(--r-m);
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: transform 0.12s var(--sortie), background-color 0.18s var(--sortie),
    box-shadow 0.18s var(--sortie), border-color 0.18s var(--sortie);
}

.bouton:hover:not(:disabled) { background-color: var(--pastille); }

.bouton:active:not(:disabled) { transform: translateY(1px); }

.bouton:disabled { opacity: 0.55; cursor: not-allowed; }

.bouton-principal {
  background: var(--action);
  border-color: transparent;
  color: var(--action-texte);
  box-shadow: var(--ombre-franche);
}

.bouton-principal:hover:not(:disabled) { background-color: var(--action-survol); box-shadow: var(--ombre-franche); }

.bouton-discret { background: transparent; border-color: var(--trait-fort); color: var(--texte-2); }

.bouton-large { width: 100%; }

.champ { display: block; margin-bottom: 12px; }

.champ > span { display: block; font-size: 0.8rem; color: var(--texte-2); margin-bottom: 5px; }

.champ input,
.champ select {
  width: 100%;
  font: inherit;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-m);
  color: var(--texte);
  transition: border-color 0.15s var(--sortie), box-shadow 0.15s var(--sortie);
}

.champ input:focus,
.champ select:focus { border-color: var(--action); box-shadow: 0 0 0 3px var(--pastille); }

.champ .aide { display: block; font-size: 0.72rem; color: var(--texte-3); margin-top: 4px; }

.onglets-simples { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

.onglets-simples .bouton { flex: 1 1 auto; min-width: 120px; }

/* identite (cycle 18) : trois choix courts (Tout, Lancés, Reçus) tiennent sur
   une ligne a 390 px ; le troisieme passait seul a la ligne. */
@media (max-width: 480px) {
  .onglets-simples:not(:has(> :nth-child(4))) .bouton { min-width: 88px; }
}

/* Le bouton enfonce d'un groupe : l'indigo plein, comme un choix fait. */
.onglets-simples .bouton[aria-pressed="true"] {
  background: var(--action);
  border-color: transparent;
  color: var(--action-texte);
}

/* L'etiquette (cycle 18) : une pastille pleine de mizu, plus de contour. */
.etiquette {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--surface-2);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--texte-2);
  white-space: nowrap;
}

.etiquette-ia {
  /* Le badge IA doit se voir de loin : c'est la contrepartie explicite du
     plancher de six cartes (les IA completent au-dela de la regle de moitie).
     Fond profond plutot que vermillon : le blanc gras y tient 7,1 de contraste,
     la ou le vermillon des aplats n'en donnait que 3,7. */
  background: var(--badge-ia);
  border-color: var(--badge-ia);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.etiquette-titre { border-color: var(--or); background: transparent; color: var(--or-texte); }

.grille-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.grille-stats div {
  background: var(--surface-2);
  border-radius: var(--r-s);
  padding: 7px 10px;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.grille-stats b { font-variant-numeric: tabular-nums; }

.jauge {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.jauge > i { display: block; height: 100%; background: var(--indigo); }

.vide, .erreur-bloc {
  color: var(--texte-2);
  text-align: center;
  padding: 26px 10px;
}

.erreur-bloc { color: var(--vermillon-texte); }

.liste-lignes > li + li { margin-top: 8px; }

/* c24 T : LES MESSAGES SE POSENT SOUS L'EN-TETE, JAMAIS DESSUS (ils
   couvraient le selecteur de combattant et le « + » du cycle 22). La zone ne
   capte aucun geste, les boites si (ui.js, messages-differes.js). */
.messages {
  position: fixed;
  left: 50%;
  top: calc(var(--entete-total) + 6px);
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(calc(100vw - 2 * var(--marge-cote)), 440px);
  pointer-events: none;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--action);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-2);
  padding: 6px 4px 6px 13px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--texte);
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  transform: translateY(var(--glisse, 0px));
  /* c25 relecteur : le depart se replie par le bas (clip-path) au lieu d'un fondu. Lu a mi-fondu,
     le texte sortant faisait tomber axe-core (color-contrast, R-5 du cycle 24 pour l'arrivee). */
  clip-path: inset(-12px -12px -16px -12px);
  transition: transform 0.18s var(--sortie), clip-path 0.18s linear;
  animation: message-arrive 0.2s var(--sortie);
}

.message-texte { flex: 1; min-width: 0; margin: 0; padding: 3px 0; overflow-wrap: anywhere; }

.message-fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -2px 0;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--texte-2);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.message-fermer:hover { background: var(--voile); color: var(--texte); }

.message-tenu { transition: none; }

.message-sort { clip-path: inset(-12px -12px 100% -12px); transform: translateY(calc(var(--glisse, 0px) - 12px)); } /* c25 relecteur : sans fondu */

.message-erreur { border-left-color: var(--vermillon); }

.message-succes { border-left-color: var(--jade); }

/* Sur le web, a droite sous le selecteur : titre et sous-titre restent lisibles. */
@media (min-width: 900px) {
  .messages {
    left: auto;
    right: max(var(--marge-cote), calc((100% - 1340px) / 2));
    transform: none;
    width: 400px;
  }
}

/* c24 relecteur : l'arrivee glisse sans fondu (axe-core lisait le texte a
   mi-fondu et le refusait au contraste, banc 1280, etape fiche-ecole ; meme cause
   que C-P1 du carton d'absence). */
@keyframes message-arrive {
  from { transform: translateY(-8px); }
}
/* fin c24 T */

/* -------------------------------------------------------------------------
   6. Ecran de creation
   ------------------------------------------------------------------------- */
.tirage {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  /* La fiche tiree remplace un bloc de meme hauteur : pas de saut. */
  min-height: 170px;
}

.tirage-relances { font-size: 0.78rem; color: var(--texte-3); margin-top: 6px; }

@media (max-width: 400px) {
  .tirage { grid-template-columns: 96px minmax(0, 1fr); }

}

.dojo-cadre {
  position: relative;
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--fond-2);
  /* Defilement dans les deux sens A L'INTERIEUR du cadre : la page, elle, ne
     defile jamais horizontalement. */
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  height: 58vh;
  height: 58svh;
  min-height: 320px;
  touch-action: pan-x pan-y;
}

@media (min-width: 900px) {
  .dojo-cadre { height: 62vh; }
}

.dojo-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }

/* -------------------------------------------------------------------------
   8. Arene
   ------------------------------------------------------------------------- */
.jetons {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  min-height: 24px;
}

.jetons b { font-size: 1.3rem; color: var(--or-texte); font-variant-numeric: tabular-nums; }

.jetons span { font-size: 0.8rem; color: var(--texte-2); }

.adversaire {
  background: var(--surface);
  border: 1px solid var(--trait);
  /* Cycle 18 : la couleur du combattant vit dans son portrait, plus dans un
     liseré de 4 px a gauche de la carte. */
  border-radius: var(--r-l);
  box-shadow: var(--ombre-1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 214px;
}

/* LE PORTRAIT FAIT 72 px, PAS 44 (finition du cycle 4).
   Sur les captures du cycle 3, la vignette de 44 px ne montrait qu'une tache :
   impossible de reconnaitre un adversaire d'un coup d'oeil, alors que c'est
   exactement ce qu'on fait sur l'ecran de l'Arene. A 72 px on voit la
   silhouette, l'arme et la couleur. Le fond prend la couleur du combattant,
   derivee de sa graine : deux cartes voisines ne se ressemblent plus. */

/* Gros plan : le sprite est cadre sur le buste, pas reduit en entier. */

.adversaire-nom {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adversaire .bouton { margin-top: auto; }

.squelette {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--voile) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: brille 1.4s ease infinite;
  border-radius: var(--r-m);
}

@keyframes brille { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* -------------------------------------------------------------------------
   9. Le rejeu
   ------------------------------------------------------------------------- */
.rejeu { display: grid; gap: 12px; }

.rejeu-scene {
  position: relative;
  border-radius: var(--r-l);
  border: 1px solid var(--trait);
  overflow: hidden;
  background: var(--fond-2) center / cover no-repeat;
  /* Rapport fige : la scene occupe la meme place avant et pendant le rejeu. */
  aspect-ratio: 16 / 11;
  min-height: 220px;
  contain: layout paint;
}

@media (min-width: 900px) {
  .rejeu-scene { aspect-ratio: 16 / 9; }
}

.combattant {
  position: absolute;
  bottom: 8%;
  width: 34%;
  max-width: 190px;
  display: grid;
  place-items: end center;
  transition: transform 0.2s var(--sortie);
}

.combattant.gauche { left: 3%; }

.combattant.droite { right: 3%; }

.combattant img.corps {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  /* `--teinte` est posee par le rendu (la couleur tiree a la naissance) : elle
     entre dans CHAQUE filtre, eclats compris, pour qu'une parade ne change
     plus la couleur du combattant le temps de son flash (cycle 11). */
  filter: var(--teinte, hue-rotate(0deg)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

.combattant.droite img.corps { transform: scaleX(-1); }

.rejeu-commandes .bouton { min-width: 44px; padding: 9px 12px; }

.rejeu-jauge > i { display: block; height: 100%; background: var(--or); transition: width 0.12s linear; }

.rejeu-journal li { padding: 2px 0; border-bottom: 1px solid var(--voile); }

.rejeu-journal li:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Les DELAIS aussi (cycle 14 §3) : sans eux, la trainee rouge de la barre
     de PV (`.tete-pv-fantome`, 0,16 s) attendait encore avant de sauter, et
     une animation retardee restait « en attente » dans getAnimations(). */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* -------------------------------------------------------------------------
   10. Journal, classement, fiche
   ------------------------------------------------------------------------- */
.ligne-journal {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: 10px 12px;
  /* 76 px : la hauteur d'une vignette de 56 px plus ses marges. La ligne du
     Journal porte maintenant un portrait, et sa hauteur est reservee des le
     squelette pour que rien ne saute quand la page arrive. */
  min-height: 76px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* 34 px ne contenaient pas « PERDU » : le mot debordait sur le nom de
   l'adversaire, colle a lui. La colonne fait desormais la largeur du plus long
   des deux verdicts. */
.ligne-journal .issue { font-weight: 700; font-size: 0.78rem; flex: none; width: 48px; }

.ligne-journal .issue.gagne { color: var(--jade-texte); }

.ligne-journal .issue.perdu { color: var(--vermillon-texte); }

.ligne-journal .corps { min-width: 0; flex: 1 1 auto; }

.ligne-journal .quand { font-size: 0.72rem; color: var(--texte-3); }

.ligne-journal .neuf {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vermillon); flex: none;
}

.ligne-classement {
  display: grid;
  /* Quatre colonnes depuis le cycle 4 : le rang, LE PORTRAIT, le nom et ses
     chiffres, la renommee. Trois colonnes pour quatre enfants renvoyaient la
     renommee a la ligne suivante. */
  /* identite (cycle 18) : 72 px, la largeur de la vignette depuis le cycle 4 ;
     a 56 px elle passait sous le nom (vu sur les captures avant, 390 px). */
  grid-template-columns: 34px 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: 9px 12px;
  min-height: 74px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.ligne-classement.moi { border-color: var(--or); }

.ligne-classement .rang { font-variant-numeric: tabular-nums; color: var(--texte-3); }

.ligne-classement .renommee { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--or-texte); }

.ligne-classement .details { font-size: 0.74rem; color: var(--texte-2); }

.pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; }

.pagination span { font-size: 0.8rem; color: var(--texte-2); }

.fiche-tete { display: flex; gap: 14px; align-items: flex-start; min-height: 128px; }

.fiche-portrait {
  width: 110px; height: 110px; flex: none;
  background: var(--surface-2);
  border-radius: var(--r-m);
  display: grid; place-items: center; overflow: hidden;
}

.fiche-portrait img { width: 104px; height: 104px; image-rendering: pixelated; }

.fiche-etiquettes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.fiche-inventaire { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.fiche-inventaire .etiquette { font-size: 0.72rem; }

.section-titre { font-size: 1rem; letter-spacing: 0; color: var(--texte-3); margin: 14px 0 6px; } /* c57 U : un titre en minuscules a sa taille (DA11), plus de capitales */

/* -------------------------------------------------------------------------
   11. Ecran de connexion
   ------------------------------------------------------------------------- */
.accueil { max-width: 420px; margin: 0 auto; }

.accueil-hero { text-align: center; margin-bottom: 18px; }

.accueil-hero h1 { font-size: 1.9rem; letter-spacing: 0.24em; }

.accueil-hero p { color: var(--texte-2); font-size: 0.88rem; margin-top: 6px; }

/* --- l'entree en marche depuis les bords --------------------------------- */
/* La transition vit sur `.combattant` (deja posee au cycle 3) ; la classe
   `entre` ne fait que decaler le point de depart, et `rendu.js` la retire a la
   fin du carton. Une transition, pas une animation : si elle est interrompue
   (saut immediat), le sprite se pose la ou il doit etre, sans a-coup. */
.combattant { transition: transform 0.9s var(--sortie); }

.combattant.gauche.entre { transform: translateX(-160%); }

.combattant.droite.entre { transform: translateX(160%); }

@media (prefers-reduced-motion: reduce) {
  .combattant.gauche.entre,
  .combattant.droite.entre { transform: none; }
}

/* --- l'arme desarmee tombe en tournant ----------------------------------- */

/* Cycle 11 : l'arme ne se pose plus d'un coup, elle REBONDIT deux fois. */
@keyframes chute-gauche {
  0%   { transform: translate(0, -70px) rotate(0deg); opacity: 1; }
  58%  { transform: translate(24px, 0) rotate(300deg); }
  72%  { transform: translate(29px, -14px) rotate(360deg); }
  84%  { transform: translate(32px, 0) rotate(400deg); }
  92%  { transform: translate(33px, -4px) rotate(412deg); }
  100% { transform: translate(34px, 0) rotate(420deg); opacity: 0.85; }
}

@keyframes chute-droite {
  0%   { transform: translate(0, -70px) rotate(0deg); opacity: 1; }
  58%  { transform: translate(-24px, 0) rotate(-300deg); }
  72%  { transform: translate(-29px, -14px) rotate(-360deg); }
  84%  { transform: translate(-32px, 0) rotate(-400deg); }
  92%  { transform: translate(-33px, -4px) rotate(-412deg); }
  100% { transform: translate(-34px, 0) rotate(-420deg); opacity: 0.85; }
}

.flaque.gauche { left: 10%; }

.flaque.droite { right: 10%; }

.rejeu-banniere.passe { animation: banniere 0.82s linear both; }

@keyframes banniere {
  0%   { opacity: 0; transform: translateX(60%); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-60%); }
}

/* --- les familiers ------------------------------------------------------- */
.familiers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.familier {
  position: absolute;
  bottom: 6%;
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.22s var(--sortie), opacity 0.3s linear;
}

.familier.gauche { left: 30%; }

.familier.droite { right: 30%; transform: scaleX(-1); }

/* Deux familiers du meme cote ne se superposent pas : le second recule. */
.familier.gauche ~ .familier.gauche { left: 38%; bottom: 13%; width: 38px; height: 38px; }

.familier.droite ~ .familier.droite { right: 38%; bottom: 13%; width: 38px; height: 38px; }

.familier.vole { outline: 2px solid var(--or); outline-offset: 2px; }

/* Le bond d'un familier est le mouvement `bond` du cycle 11 (un saut en arc
   vers la cible, par `translate`) : la classe `mord` et ses 34 px ont vecu. */
/* --- la pose de victoire -------------------------------------------------- */
.combattant.vainqueur img.corps {
  filter: var(--teinte, hue-rotate(0deg)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 14px rgba(255, 200, 90, 0.5));
}

/* -------------------------------------------------------------------------
   15. Le partage (cycle 4, §3 ter)
   ------------------------------------------------------------------------- */
.partage {
  margin-top: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  /* Hauteur reservee : le bloc contient au repos un titre, deux boutons et une
     ligne d'etat. Quand l'apercu arrive, il pousse vers le bas et rien
     au-dessus ne bouge. */
  min-height: 132px;
}

/* -------------------------------------------------------------------------
   16. Le rejeu public, le bandeau d'installation, le bandeau hors ligne
   ------------------------------------------------------------------------- */
.bandeau {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--or);
  border-radius: var(--r-m);
  font-size: 0.86rem;
}

.bandeau p { margin: 0; flex: 1 1 220px; }

.bandeau .bouton { min-height: 38px; padding: 7px 12px; }

.bandeau-hors-ligne { border-left-color: var(--vermillon); }

/* -------------------------------------------------------------------------
   17. Portraits lisibles dans le classement et le journal (finition cycle 4)
   ------------------------------------------------------------------------- */
.vignette {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: var(--r-m);
  border: 1px solid var(--accent, var(--trait));
  background: var(--accent-voile, var(--surface-2));
  overflow: hidden;
  display: grid;
  place-items: center;
}

.vignette img {
  width: 104px;
  height: 104px;
  image-rendering: pixelated;
  object-fit: none;
  object-position: 50% 24%;
}

/* LE PLANCHER DU CAHIER EST 72 px, ET IL VAUT POUR LES TROIS ECRANS.
   Le cycle 4 avait lu « on ne reconnait pas un visage dans une liste » et pose
   56 px dans le classement et le journal. Le cahier nommait pourtant « les
   cartes d'arene, du classement et du journal » et donnait le chiffre : la
   revue a mesure 56 px aux deux derniers. La vignette de liste garde son cadrage
   plus serre, mais elle atteint le plancher. */
.vignette.petite { width: 72px; height: 72px; }

.vignette.petite img { width: 96px; height: 96px; object-position: 50% 22%; }

.dojo-legende-branches i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -1px;
}

/* LES BANDEAUX SONT DANS LE FLUX, ET C'EST LE CONTRAIRE DU CYCLE 4.
   Ils flottaient « pour ne rien pousser, donc ne produire aucun decalage ».
   L'intention etait bonne, la consequence ne l'etait pas : un bandeau qui ne
   pousse rien se pose SUR quelque chose, et ces deux-la sont persistants. Sur
   l'ecran de creation, les deux se superposaient au sous-titre.
   Ils vivent donc au-dessus du contenu, dans la zone `#bandeaux`, qui est
   toujours dans la page : ils couvrent zero pixel. Le decalage qu'ils
   produisent est unique, il arrive avant qu'on lise quoi que ce soit, et il ne
   concerne pas les mesures de Lighthouse -- le bandeau hors ligne n'existe que
   hors ligne, celui d'installation attend une visite precedente. */
#bandeaux:empty { display: none; }

#bandeaux .bandeau { box-shadow: var(--ombre-1); }

/* ============================================================================
   CYCLE 6 : la vie sociale (§7, §3 ter, §10).

   Rien de neuf dans les jetons de couleur : tout ce qui suit reutilise ceux du
   theme, donc tout suit le clair et le sombre sans une ligne de plus.
   ============================================================================ */
/* --- les deux entrees de l'en-tete (Fiche et Compte) ---------------------- */
/* La barre basse porte les CINQ entrees de jeu du §8 ; Fiche et Compte vivent
   ici sur telephone, et dans le rail sur PC. Elles gardent la cible tactile de
   44 px : un bouton d'en-tete n'est pas une decoration. */
/* L'en-tete porte maintenant DEUX boutons en plus des compteurs. A 390 px la
   place est comptee : les compteurs se laissent rogner, les boutons jamais --
   un bouton a moitie coupe n'est pas cliquable, et c'est par la qu'on atteint
   sa fiche sur telephone. */
.entete-info { min-width: 0; }

.entete-info > span:not(.entete-onglet) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entete-onglet {
  flex: 0 0 auto;
  /* Cycle 16 (lot D) : 44 px. Il ne reste qu'un bouton dans l'en-tete
     (Compte, avant le premier combattant) : il a la place d'une vraie cible. */
  min-height: 44px;
  min-width: 44px;
  padding: 4px 10px;
  font-size: 1rem;
  line-height: 1;
}

.entete-onglet[aria-current="page"] {
  border-color: var(--or);
  color: var(--or-texte);
}

.codex-regles h2 { font-size: 0.9rem; margin: 0; display: inline; }

.codex-regles p { font-size: 0.84rem; line-height: 1.45; margin: 4px 0 0; }

.codex-regles-resume::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s var(--sortie);
  flex: 0 0 auto;
}

.codex-medaillon img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }

.codex-effet { margin: 4px 0; }

/* LE TROISIEME BOUTON DE L'EN-TETE NE SE PAIE PAS SUR LE LIEN DU DOJO. Sur
   telephone, le Codex rejoint Fiche et Compte dans l'en-tete ; a padding
   inchange, ses 50 px etaient pris aux compteurs, et « 1 point de dojo »
   (le lien du cycle 8 vers les trois choix) tombait de 66 a 34 px visibles en
   390 px. Des boutons plus serres et un ecart de 6 px rendent cette place ; la
   cible garde 34 px de haut et plus de 24 px de large. */
@media (max-width: 899px) {
  .entete-info { gap: 6px; }
  .entete-onglet { padding: 4px 7px; }
}

/* --- l'arene figee -------------------------------------------------------- */

#arene-rafraichir { margin-bottom: 10px; }

/* --- le podium ------------------------------------------------------------ */
.podium {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  counter-reset: podium;
}

.podium li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--trait);
}

.podium li:last-child { border-bottom: 0; }

/* --- l'ecole -------------------------------------------------------------- */

/* Les trois rivaux au-dessus et les trois en dessous (§7). Un liseré discret
   suffit a dire le sens : une couleur pleine ferait croire a un etat. */

/* --- les rappels ---------------------------------------------------------- */
.liste-puces {
  margin: 6px 0 10px;
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--texte-2);
}

.liste-puces li { margin: 3px 0; }

#push-etat { margin-top: 8px; }

/* Le bandeau du parrain : meme forme que les autres bandeaux, liseré doré. */
.bandeau-parrain { border-left-color: var(--or); flex-direction: column; align-items: flex-start; }

.bandeau-parrain p { margin: 0; flex: 0 0 auto; } /* c25 A */

/* ==========================================================================
   CYCLE 7 §D.2 a §D.4 : DE L'IMPACT, DES CHIFFRES, ET TROIS ISSUES QUI SE
   DISTINGUENT PAR LA FORME.
   ==========================================================================
   L'audit du cycle 7 a mesure une scene ou PERSONNE NE BOUGE JAMAIS : les
   combattants etaient fixes a `left: 3%` et `right: 3%`, et rien ne les
   deplacait ; la secousse maximale mesuree sur dix rejeux valait zero partout.
   La V2 avait pourtant livre le stagger et le screen-shake : la V3 avait
   regresse sur le game-feel.

   Tout ce qui suit est du RENDU PUR : aucune regeneration de corpus golden.
   -------------------------------------------------------------------------- */
/* Les positions de repos se rapprochent : la scene fait 16/11 en portrait, et
   la moitie centrale ne servait a rien. */
.combattant.gauche { left: 12%; }

.combattant.droite { right: 12%; }

/* --- le chiffre de degats (§D.2) ------------------------------------------ */
.chiffre-degat {
  position: absolute;
  left: 50%;
  bottom: 78%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  pointer-events: none;
  z-index: 6;
  animation: chiffre-monte 0.6s var(--sortie) forwards;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@keyframes chiffre-monte {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.85); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-34px) scale(0.95); }
}

/* --- le recul du touche et la secousse de la scene (§D.3) ----------------- */
/* Le recul est devenu le mouvement `encaisse` du cycle 11 (recul ET
   ecrasement, sur le corps qui a vraiment pris le coup). La secousse de la
   SCENE est jouee depuis le cycle 16 par l'API Web Animations (`voyant.js`,
   `imagesSecousse`) : plus de classe a poser ni de relecture forcee de la
   mise en page pour la relancer. */
/* --- l'avancee de frappe et les trois issues (§D.3 et §D.4) ---------------
   Le cycle 7 les jouait par des classes qui animaient `transform` : 18 % de la
   boite pour la frappe (22 px a 390 px, quand les corps sont a 150 px l'un de
   l'autre), 22 px pour l'esquive. Elles sont devenues les mouvements `assaut`,
   `glissade`, `parade` et `riposte` du cycle 11 (`rejeu/mouvements.js`). Reste
   l'arc de parade, qui marque le contact et que la parade pose toujours. */
.combattant.geste-blocage::after {
  content: "";
  position: absolute;
  bottom: 22%;
  width: 36%;
  aspect-ratio: 1;
  border: 2px solid rgba(240, 240, 240, 0.85);
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  animation: arc-parade 0.36s var(--sortie) forwards;
  pointer-events: none;
}

@keyframes arc-parade {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- §D.7 : le familier cesse d'etre un PNG fige -------------------------- */
.familier { transition: transform 0.18s var(--sortie); }

.familier.touche { animation: familier-touche 0.3s var(--sortie); }

/* Le flash seul : le sursaut est le mouvement `encaisse` (cycle 11). Animer
   `transform` ici retournait la vignette de droite, qui porte `scaleX(-1)`. */
@keyframes familier-touche {
  0% { filter: none; }
  30% { filter: brightness(1.9) sepia(0.6) saturate(4); }
  100% { filter: none; }
}

.familier.mort { animation: familier-chute 0.5s var(--sortie) forwards; }

@keyframes familier-chute {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0.28; transform: translateY(10px) rotate(-70deg); }
}

@media (prefers-reduced-motion: reduce) {
  .chiffre-degat,
  .combattant.geste-blocage::after,
  .familier.mort,
  .familier.touche {
    animation: none;
  }
}

/* Une seule branche a l'ecran : la toile tient dans le cadre, sans defilement
   horizontal, et les libelles s'ecrivent a cote des ronds. */

.dojo-effet { margin: 6px 0; line-height: 1.45; }

.dojo-condition, .dojo-usages { font-size: 0.82rem; opacity: 0.85; margin: 2px 0; }

.dojo-malus {
  margin: 8px 0 0;
  font-size: 0.82rem;
  /* Teinte « texte » et non la teinte vive : en theme clair, le vermillon vif
     sur fond creme ne tenait pas le contraste AA (axe, cycle 8, sur les cartes
     du choix qui l'affichent d'office). */
  color: var(--vermillon-texte);
}

/* --- la feuille ancree au bas de l'ecran, sur telephone (§A.3) ------------ */
@media (max-width: 899px) {
  @keyframes feuille-monte {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

.pastille-etat i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--trait-fort, #8c8378);
}

.familier.anime { image-rendering: pixelated; }

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

/* --- §B.5 : une etiquette d'inventaire qui s'ouvre ------------------------ */
.etiquette-objet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  /* UN BOUTON N'HERITE NI DE LA COULEUR NI DU FOND DE SON PARENT : sans ces
     deux lignes il reprend le noir sur gris clair du navigateur, et axe-core a
     mesure un contraste insuffisant sur les quinze ecrans qui portent une
     etiquette. Les valeurs sont EXACTEMENT celles de `.etiquette`. */
  /* Cycle 18 (lot D) : la pastille pleine de mizu de `.etiquette`. */
  background: var(--surface-2);
  color: var(--texte-2);
  font-size: 0.7rem;
  font-weight: 600;
  font-family: inherit;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.etiquette-objet:hover,
.etiquette-objet:focus-visible { border-color: var(--action); }

.etiquette-icone { image-rendering: pixelated; }

/* art c23 : une icone generee (32 ou 48 px) reduite a 18 px se lisse. */
.etiquette-icone[src*="/img/"] { image-rendering: auto; }

/* c57 R : les selecteurs des icones generees (img/competences, img/armes) sont retires : ces images ne sont plus dans le jeu. */

.etiquette-glyphe { font-style: normal; opacity: 0.7; }

.fiche-objet {
  border: 1px solid var(--trait-fort, #8c8378);
  border-radius: 14px;
  background: var(--fond-carte, #1a1611);
  color: inherit;
  max-width: min(420px, 92vw);
  padding: 0;
}

.fiche-objet::backdrop { background: rgba(0, 0, 0, 0.55); }

.fiche-objet-corps { padding: 16px; display: grid; gap: 8px; }

.fiche-objet-corps h2 { margin: 0; font-size: 1.05rem; }

.dojo-chiffres-plats { font-size: 0.82rem; opacity: 0.86; margin: 0; }

.dojo-choix .section-titre { margin-top: 0; color: var(--jade-texte); }

.dojo-carte-voir { min-height: 40px; }

i.dojo-legende-drapeau {
  display: inline-block;
  width: 10px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
  border-radius: 0;
  background: var(--or);
  clip-path: polygon(0 0, 100% 30%, 18% 60%, 18% 100%, 0 100%);
}

/* La fleche : un losange tourne, du fond de la bulle, bord or sur deux cotes.
   Sa position horizontale suit le centre de l'ancre (`--fleche-x`). */

/* --- §2.2 : la pastille de points de l'en-tete devient un lien ------------ */

/* ==========================================================================
   CYCLE 11 §2 : LES ANIMATIONS MAISON
   ==========================================================================
   Les mouvements sont decrits par `rejeu/mouvements.js` et joues par
   `rejeu/rendu.js` au moyen de l'API Web Animations, sur `translate`,
   `rotate` et `scale` : aucune regle ci-dessous ne les anime. Cette section
   ne pose que les PIECES qu'ils deplacent (la trainee, l'etoile d'impact, la
   forme des armes sans dessin, le vol d'un projectile) et les LUEURS, qui
   sont des filtres et restent en CSS. Aucune image n'est ajoutee.
   -------------------------------------------------------------------------- */
/* L'ecrasement a l'impact se fait depuis les PIEDS : un corps qui encaisse se
   tasse sur le sol, il ne retrecit pas vers son centre. */
.combattant { transform-origin: 50% 100%; }

/* --- l'etoile d'impact --------------------------------------------------- */
/* Du cote d'ou vient le coup : a droite du combattant de gauche, et
   inversement. */
.combattant > .impact {
  position: absolute;
  left: 50%;
  bottom: 34%;
  width: 44%;
  aspect-ratio: 1;
  translate: -18% 0;
  background: radial-gradient(circle, #fff 0 16%, rgba(255, 228, 150, 0.95) 26%, rgba(255, 150, 70, 0.6) 42%, transparent 64%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.combattant.droite > .impact { translate: -82% 0; }

.arme-vol::before {
  content: "";
  position: absolute;
  top: 44%;
  right: 55%;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to left, rgba(255, 246, 224, 0.75), rgba(255, 246, 224, 0));
}

/* L'ombre portee sous le corps : une ellipse aux pieds, peinte avant le corps
   (les deux sont positionnes, l'ordre du DOM tranche). Elle reste au sol quand
   le corps saute (`imagesOmbre`). */
.combattant img.corps { position: relative; }

.combattant > .ombre {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 46% 75.5%;
  /* Les pieds des 82 paquets sont a 75 % de la hauteur de l'image (mesure sur
     la premiere image d'attente de chacun), le corps un peu a gauche du
     centre pour un combattant tourne vers la droite : l'ellipse s'y pose. */
  background: radial-gradient(ellipse 24% 4.6% at 46% 75.5%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.42) 50%, transparent 100%);
}

.combattant.droite > .ombre {
  transform-origin: 54% 75.5%;
  background: radial-gradient(ellipse 24% 4.6% at 54% 75.5%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.42) 50%, transparent 100%);
}

.rejeu-bilan-table th,
.rejeu-bilan-table td { padding: 6px 8px; border-bottom: 1px solid var(--trait); }

.rejeu-bilan-table thead th {
  font-weight: 700;
  vertical-align: bottom;
  overflow-wrap: anywhere;
  width: 32%;
}

.rejeu-bilan-table tbody th { text-align: left; font-weight: 500; color: var(--texte-2); }

.rejeu-bilan-table td { text-align: center; font-weight: 800; font-size: 1.1rem; }

/* --- rejeu : le combat lisible (cycle 18, lot A) ---------------------------
   Tout ce bloc appartient au lot A du cycle 18 (docs/CYCLE-18.md §1). Le temps
   vient de `rejeu/cadence.js` (telegraphe, frappe, impact tenu, retour, temps
   mort), le jeu de `rejeu/rendu.js`. Les regles ci-dessous agrandissent la
   scene (les corps passent de 34 % de la largeur a 88 % de la HAUTEUR de la
   scene, par les unites de conteneur), posent l'arme dans la main, affinent
   les tetes, allument la lame pendant le telegraphe, font tenir les chiffres
   et posent la phrase du coup sous la scene. Les couleurs passent par les
   jetons de `:root` (lot D) : la scene prend la charte du site.
   -------------------------------------------------------------------------- */
.rejeu-scene {
  /* Les unites `cqh` des corps se lisent sur la hauteur de la scene. */
  container-type: size;
  --scene-texte: #f7f4ee;
  --scene-voile: rgba(8, 10, 16, 0.66);
  --scene-voile: color-mix(in srgb, var(--indigo, #3d5a8a) 16%, rgb(8 10 16 / 0.7));
  --scene-accent: var(--or, #d6a54a);
}

/* L'etoile a hauteur de torse, les etoiles du vertige juste au-dessus de la tete. */
.combattant > .impact { bottom: 42%; }

/* Le corps d'un combattant fait un quart de la scene ; un familier en fait la
   moitie (petit), les trois quarts (moyen) ou un peu plus (grand : 114 %),
   comme le chien, la panthere et l'ours de LaBrute. Un PNG de familier est
   rempli a 85 %, un paquet anime a 49 %. */
.familiers { z-index: auto; }

/* Le vaincu reste a terre, son ombre palit. */
.combattant > .ombre { transition: opacity 1s linear; }

@media (prefers-reduced-motion: reduce) {
  .combattant > .ombre { transition: none; }
}

/* ==========================================================================
   CYCLE 12 §3 - le yokai de la semaine.

   Une barre partagee, un compte a rebours, un bouton d'attaque, et une carte
   de rappel sur l'Arene. Aucune couleur nouvelle : le vermillon dit « le
   monstre », l'or dit « la recompense », comme partout ailleurs. Les textes
   de couleur passent par les variantes `-texte` du theme (contraste 4,5).
   ========================================================================== */
/* Le bouton d'en-tete du yokai ne sert que sur telephone : a partir de
   900 px, le rail le porte deja, juste sous le Tournoi. */

/* Cinq boutons dans l'en-tete a 390 px (yokai, Codex, Fiche, Compte, et le
   lien de dojo quand un point attend) : on resserre encore d'un cran sous
   420 px, la cible garde 34 px de haut et plus de 24 px de large. */
@media (max-width: 420px) {
  .entete-info { gap: 4px; }
  .entete-onglet { padding: 4px 5px; }
  /* Cycle 16 (lot D) : le mot ONSEN ne cede plus ici. Il cedait quand le lien
     du dojo s'ajoutait aux quatre boutons de l'en-tete ; ces boutons sont
     dans « Plus » (sonde des largeurs, docs/AMIS-C16.md §4). */
}

/* --- la barre partagee ---------------------------------------------------- */
.yokai-barre {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--trait-fort);
  overflow: hidden;
}

.yokai-barre.petite { height: 8px; }

.yokai-barre-perte,
.yokai-barre-plein {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.yokai-barre-plein {
  background: linear-gradient(90deg, var(--vermillon), var(--vermillon-vif) 70%, var(--or));
}

/* La trainee : ce que le coup vient de prendre, visible une seconde. */
.yokai-barre-perte { background: var(--or); opacity: 0.75; }

.yokai-barre.anime .yokai-barre-plein { transition: width 1.1s var(--sortie); }

.yokai-barre.anime .yokai-barre-perte { transition: width 0.8s ease-in 1s; }

.yokai-colonne > .carte + .carte { margin-top: 0; }

.yokai-glyphe {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vermillon-texte);
}

.yokai-glyphe.grand { font-size: 5rem; }

.yokai-contribution .section-titre,
.yokai-classement .section-titre,
.yokai-passees .section-titre { margin-top: 0; }

/* --- les portraits (rappel de l'Arene, ligne du Journal) ------------------ */
.yokai-portrait {
  position: relative;
  width: 72px;
  height: 72px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-m);
  border: 1px solid var(--vermillon);
  background: var(--surface-2);
}

.yokai-portrait img {
  width: 124px;
  height: 124px;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
  /* Plus grand que sa boite, et centre sur elle : le paquet a beaucoup de
     marge transparente autour du personnage. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
}

.yokai-portrait.petit { width: 56px; height: 56px; }

.yokai-portrait.petit img { width: 100px; height: 100px; }

/* --- la carte de rappel de l'Arene ---------------------------------------- */
.yokai-rappel-hote { margin: 0 0 12px; }

.yokai-rappel {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-color: var(--vermillon);
}

.yokai-rappel:hover { filter: brightness(1.04); }

.yokai-rappel:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.yokai-rappel-corps { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }

.yokai-rappel-sur {
  font-size: 0.72rem;
  letter-spacing: 0;
  color: var(--texte-3);
}

.yokai-rappel-titre {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yokai-rappel-ligne { font-size: 0.8rem; color: var(--texte-2); }

.yokai-rappel-fleche { flex: none; font-size: 1.4rem; color: var(--texte-3); }

.yokai-rappel.phase-tombe { border-color: var(--or); }

/* --- la ligne du Journal -------------------------------------------------- */
.ligne-journal.ligne-yokai { border-left-color: var(--vermillon); }

.ligne-journal .issue.yokai { color: var(--vermillon-texte); }

@media (prefers-reduced-motion: reduce) {
  .yokai-barre.anime .yokai-barre-plein,
  .yokai-barre.anime .yokai-barre-perte { transition: none; }
}

/* ============================================================================
   CYCLE 13 §2 : robustesse et telephone reel.

   Le bloc « Réessayer » d'un ecran qui n'a pas pu se charger, et le bandeau
   « nouvelle version ». Rien de neuf dans les couleurs : tout reprend les
   jetons du theme, donc suit le clair et le sombre.
   ============================================================================ */
.erreur-reessai {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
}

.erreur-reessai .erreur-bloc { padding-bottom: 4px; }

.erreur-reessai .bouton { min-height: 44px; }

.bandeau-version { border-left-color: var(--or); }

/* ============================================================================
   CYCLE 16 §4 (lot D) : LE MODE TELEPHONE ET LE MODE WEB.

   La mise en page des trois gabarits du cahier, la feuille « Plus », la
   colonne laterale et son resume du combattant, les gestes, les cartons du
   clavier et de l'installation iPhone. Rien de neuf dans les couleurs : tout
   reprend les jetons du theme, donc suit le clair et le sombre. La zone sure
   (--zone-sure-*, --entete-total) est reprise telle quelle.
   Les decisions (quelles entrees, quels seuils) vivent dans js/disposition.js.
   ============================================================================ */
/* --- la barre basse : cinq entrees, libelles lisibles ----------------------- */
/* 0,68 rem faisaient 10,9 px : sous le plancher de 14 px des etiquettes (lot 2
   du cycle 16). « Classement » n'est plus dans la barre : les cinq libelles
   (Arène, Dojo, Amis, Journal, Plus) tiennent en 14 px jusqu'a 320 px. */
.barre-basse .onglet { font-size: 0.875rem; font-weight: 600; }

.barre-basse {
  /* Telephone couche : la barre ne passe pas sous l'encoche ni sous les coins. */
  padding-left: var(--zone-sure-gauche, 0px);
  padding-right: var(--zone-sure-droite, 0px);
}

.onglet-libelle { white-space: nowrap; }

/* L'ecran ouvert est derriere « Plus » : la meme pastille que l'onglet actif
   (cycle 18 ; c'etait le liseré or). */
.onglet.onglet-plus-ici { color: var(--indigo-texte); }

.barre-basse .onglet.onglet-plus-ici .onglet-pictogramme { background: var(--pastille); }

.barre-basse .onglet:focus-visible { outline-offset: -4px; }

/* --- c38 L1 : la feuille du Menu (et celle du selecteur) -------------------- */
/* Un `dialog` modal ancre en bas, au-dessus du dock : le navigateur lui donne
   Echap, le piege du focus et le voile. Neuf tuiles de 114 x 100. */
.feuille-menu {
  padding: 12px max(16px, var(--zone-sure-droite)) calc(12px + var(--zone-sure-bas)) max(16px, var(--zone-sure-gauche));
  border: 1px solid var(--trait);
  border-bottom: 0;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: var(--surface);
  color: var(--texte);
  width: 100%;
  max-width: 560px;
  margin: auto auto 0;
  box-shadow: var(--ombre-2);
}

.feuille-menu:modal {
  top: auto;
  bottom: 0;
  max-height: calc(100% - var(--zone-sure-haut) - 24px);
}

.feuille-menu::backdrop,
.carton-raccourcis::backdrop,
.guide-ios::backdrop { background: rgba(8, 10, 14, 0.55); }

.feuille-menu[open] { animation: feuille-monte 0.22s var(--sortie); }

@keyframes feuille-monte { from { transform: translateY(28px); opacity: 0.4; } }

.feuille-menu-grille, .feuille-combattants-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.feuille-menu-entree, .feuille-combattant {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 100px;
  padding: 10px 4px;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--texte);
  cursor: pointer;
}

.feuille-menu-entree[aria-current="page"], .feuille-combattant[aria-pressed="true"] {
  border-color: var(--action);
  color: var(--indigo-texte);
  box-shadow: inset 0 0 0 1px var(--action);
}

.feuille-menu-libelle, .feuille-combattant-nom { font-size: 0.9rem; font-weight: 600; text-align: center; }

.feuille-menu-entree .onglet-pastille { top: 8px; left: auto; right: 12px; }
.feuille-combattants-liste .entete-combattant { width: auto; height: auto; min-height: 100px; border-radius: var(--r-m); }
.feuille-combattants-liste .entete-combattant .pastille { top: 8px; right: 12px; }

/* Le clavier n'a pas de sens sur un ecran tactile sans souris. */

/* --- les touches du clavier, et le carton qui les liste --------------------- */
kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 2px 7px;
  border: 1px solid var(--trait-fort);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--texte);
  font: 600 0.85rem/1.3 var(--police);
  text-align: center;
}

.carton-raccourcis,
.guide-ios {
  width: min(480px, calc(100% - 32px));
  padding: 18px 18px 14px;
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--ombre-2);
}

.carton-raccourcis h2,
.guide-ios h2 { margin-bottom: 6px; }

.raccourcis-liste {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 14px;
  align-items: baseline;
  margin: 12px 0 14px;
}

.raccourcis-liste dt { white-space: nowrap; }

.raccourcis-liste dd { margin: 0; color: var(--texte-2); line-height: 1.4; }

.carton-raccourcis-pied,
.guide-ios-pied { display: flex; justify-content: flex-end; }

/* --- « Ajouter a l'ecran d'accueil » sur iPhone ----------------------------- */
.guide-ios-etapes { display: grid; gap: 12px; margin: 14px 0 10px; }

.guide-ios-etapes li {
  display: grid;
  grid-template-columns: 28px 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.guide-ios-numero {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--or);
  color: #14213a;
  font-weight: 700;
}

.guide-ios-picto {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--indigo-texte);
}

.guide-ios-etapes p { margin: 0; line-height: 1.45; }

.guide-ios-note { margin: 0 0 12px; }

.bandeau-installation { border-left-color: var(--jade); }

@media (max-width: 899px) {
  html { overscroll-behavior-y: none; }
}

/* --- l'ecran arrive du cote du balayage ------------------------------------- */
#ecran:focus { outline: none; }

#ecran[data-arrivee="droite"] { animation: arrivee-droite 0.24s var(--sortie); }

#ecran[data-arrivee="gauche"] { animation: arrivee-gauche 0.24s var(--sortie); }

@keyframes arrivee-droite { from { transform: translateX(32px); opacity: 0.5; } }

@keyframes arrivee-gauche { from { transform: translateX(-32px); opacity: 0.5; } }

/* --- les cibles tactiles : 44 px pour toute action -------------------------- */
/* Relevees par la sonde du lot (docs/AMIS-C16.md §4) : 34 a 42 px de haut. */
@media (max-width: 899px), (pointer: coarse) {

  .dojo-carte-voir,
  .bandeau .bouton,
  .journal-revanche { min-height: 44px; }
  /* Les etiquettes qui ouvrent la fiche d'un objet, et le nom d'une entree du
     Codex : 20 et 24 px de haut, sous la cible minimale de 24 px du WCAG 2.2
     pour les premieres. Elles restent des etiquettes, un peu plus epaisses. */
  .etiquette-objet { min-height: 32px; display: inline-flex; align-items: center; }
}

/* --- entre les deux (481 a 899 px) : une tablette n'est pas un telephone ---- */
/* 460 px de contenu au milieu de 768 : deux bandes vides de 150 px. Le contenu
   prend 720 px, et l'Arene passe a trois colonnes. */
@media (min-width: 600px) and (max-width: 899px) {
  :root { --largeur: 720px; }
}

/* SIX CARTES, TROIS COLONNES, DES 600 PX. La regle du web (section 4) le
   disait depuis le cycle 4, mais la regle de base de l'Arene, plus bas dans ce
   fichier, l'ecrasait : a 1 280 px l'Arene montrait cinq cartes puis une
   orpheline (capture « avant » du lot, docs/AMIS-C16.md §4). */

/* --- le telephone couche (844 x 390) ---------------------------------------- */
/* 52 px d'en-tete et 60 px de barre laissaient 278 px de contenu, et la scene
   du rejeu (16/11 sur 460 px : 316 px) n'y tenait pas. En-tete et barre
   s'affinent, le contenu s'elargit, et le rejeu met le journal A COTE de la
   scene, dont la largeur se regle sur la hauteur disponible. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) {
  :root {
    --entete-h: 44px;
    --barre-h: 48px;
    --largeur: 820px;
  }
  .barre-basse .onglet { flex-direction: row; gap: 8px; padding: 4px 6px; }
  .barre-basse .onglet-pictogramme { font-size: 1rem; }
  .onglet-pastille { top: 4px; }
  .contenu { padding-top: 10px; }
}

/* --- la barre d'etat de l'iPhone en theme clair ----------------------------- */
/* L'application installee declare `black-translucent` : l'heure et la batterie
   sont TOUJOURS en blanc, posees sur le haut de l'en-tete. En theme sombre,
   rien a faire ; en theme clair, du blanc sur #fffdf8 ne se lisait pas. La
   bande de la zone sure prend donc une teinte sombre en theme clair. Hors
   application installee, la zone sure vaut 0 : la bande n'existe pas. */
:root { --barre-etat: #0b1322; }

@media (prefers-color-scheme: dark) {
  :root { --barre-etat: var(--surface); }
}

.entete {
  background:
    linear-gradient(var(--barre-etat), var(--barre-etat)) top / 100% var(--zone-sure-haut) no-repeat,
    var(--surface);
}

/* --- le web : survols, focus, largeur de lecture ---------------------------- */
@media (hover: hover) and (pointer: fine) {
  .adversaire { transition: border-color 0.15s var(--sortie), box-shadow 0.15s var(--sortie); }
  .adversaire:hover { box-shadow: var(--ombre-2); border-color: var(--trait-fort); }
  .ligne-journal:hover,
  .ligne-classement:hover { background: var(--surface-2); }
  .feuille-menu-entree:hover, .cellule-icone:hover { border-color: var(--trait-fort); }
  .bouton-discret:hover:not(:disabled) { border-color: var(--trait-fort); color: var(--texte); }
}

/* La carte que « A » vise se voit : le contour du focus l'entoure toute. */
.adversaire:focus-within { border-color: var(--or); }

/* ============================================================================
   CYCLE 15 §3 : le joueur. L'en-tete a 390 px, la zone sure de tous les bords,
   la revanche du Journal, le rival vise dans l'Arene, la fiche comparee.
   La zone sure du haut posee le 24/09 (--zone-sure-haut, --entete-total) est
   gardee telle quelle : ce bloc s'appuie dessus.
   ============================================================================ */
:root {
  --zone-sure-bas: env(safe-area-inset-bottom, 0px);
  --zone-sure-gauche: env(safe-area-inset-left, 0px);
  --zone-sure-droite: env(safe-area-inset-right, 0px);
}

/* Ce qu'on amene a l'ecran par programme (la ligne visee du Journal, la carte
   du rival, une fiche de noeud) s'arrete SOUS l'en-tete colle, encoche
   comprise, et au-dessus de la barre basse. */
html { scroll-padding-top: calc(var(--entete-total) + 8px); }

@media (max-width: 899px) {
  html { scroll-padding-bottom: calc(var(--barre-h) + var(--zone-sure-bas) + 8px); }
}

/* Telephone couche : l'encoche passe sur le cote. Le PC garde ses marges. */
@media (max-width: 899px) {
  .entete,
  .contenu {
    padding-left: max(var(--marge-cote), var(--zone-sure-gauche));
    padding-right: max(var(--marge-cote), var(--zone-sure-droite));
  }
}

.barre-basse { padding-bottom: var(--zone-sure-bas); }

.saut-contenu:focus { top: calc(8px + var(--zone-sure-haut)); }

/* Un carton modal (fiche d'un objet, du Codex ou du dojo) reste entre
   l'encoche et la barre du geste, et defile s'il est plus haut. */
dialog:modal {
  top: var(--zone-sure-haut);
  bottom: var(--zone-sure-bas);
  max-height: calc(100% - var(--zone-sure-haut) - var(--zone-sure-bas) - 24px);
  overflow-y: auto;
}

/* --- l'en-tete a 390 px : une pastille chiffree pour les points de dojo ---- */
/* Mesure sur la maquette (docs/SUR-C15.md §3, sonde des largeurs), douze
   jetons et niveau 40, FR et EN : la pastille tient de 320 a 480 px ; la
   phrase entiere reprend au-dela. 430 px est l'iPhone Plus ou Pro Max, ou la
   phrase et le mot ONSEN rognaient encore le niveau. */

@media (max-width: 480px) {
  /* Cycle 16 (lot D) : ONSEN reste a cote de la pastille, la place est la. */
  /* Le niveau ne se rogne plus : c'est lui qui tombait a « N… ». */
  .entete-info > span:first-child { flex: 0 0 auto; }

  /* La phrase reste le nom accessible du bouton, cachee a l'oeil. */

}

/* 375 et 360 px (iPhone mini ou SE, la plupart des Android) : le mot ONSEN
   cede toujours sa place, sinon c'etait le bouton « Compte » qui sortait du
   cadre, coupe ; a 320 px, les boutons se serrent encore d'un cran. La cible
   garde 34 px de haut.
   CYCLE 16 (lot D) : les quatre boutons de l'en-tete sont dans « Plus ». Le
   niveau ne cede plus jamais, et ONSEN ne cede que sous 360 px (sonde des
   largeurs, docs/AMIS-C16.md §4 : 28 en-tetes sur 28 sans rognure). */
@media (max-width: 359px) {
  .entete-titre { display: none; }
  .entete { gap: 8px; }
}

@media (max-width: 340px) {
  .entete-info { gap: 3px; }
  .entete-onglet { padding: 4px 3px; }

}

/* --- la revanche, a cote de la ligne du Journal ---------------------------- */
/* La ligne garde toute sa largeur (le nom de l'adversaire tient sur une
   ligne a 390 px) ; la revanche vit dans une barre fine collee sous elle, a
   droite, du cote du pouce. Une colonne laterale de 76 px faisait passer le
   nom sur trois lignes et coupait « Réattaquer » (vu sur capture). */

.journal-revanche {
  /* 44 px (cycle 16, lot D) : c'est une action, la cible tactile du cahier. */
  min-height: 44px;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.ligne-journal.ligne-visee {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

/* --- le rival vise dans l'Arene --------------------------------------------- */
.arene-cible {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--or);
  background: var(--surface-2);
  border-radius: var(--r-s);
  font-size: 0.86rem;
}

.arene-cible[data-cible-etat="hors-liste"],
.arene-cible[data-cible-etat="sans-jeton"],
.arene-cible[data-cible-etat="plafond"] { border-left-color: var(--vermillon); }

.adversaire.adversaire-vise {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

/* --- la fiche comparee ------------------------------------------------------ */
.comparee {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  margin-top: 6px;
  table-layout: fixed;
}

.comparee th,
.comparee td { padding: 6px 4px; text-align: left; vertical-align: middle; }

/* Le nom du rival peut passer a la ligne : rogne en « Kuro… », il ne disait
   plus a qui etait la colonne (vu sur capture a 390 px). */
.comparee thead th {
  font-size: 0.74rem;
  color: var(--texte-2);
  font-weight: 600;
  overflow-wrap: anywhere;
  vertical-align: bottom;
}

.comparee tbody tr + tr { border-top: 1px solid var(--trait); }

.comparee thead td:first-child,
.comparee tbody th { width: 30%; }

.comparee tbody th { font-weight: 600; }

.comparee thead th { width: 18%; font-variant-numeric: tabular-nums; }

/* ============================================================================
   [amis] CYCLE 16, LOT C : LES AMIS ET LE CONFORT DE JEU (docs/AMIS-C16.md §3).
   Section du lot C, ajoutee en fin de feuille : elle ne pose que ses propres
   classes (amis-*, ami-*, combat-suite, niveau-gagne-voie*, jetons-*,
   arene-sans-jeton). Les tailles de texte suivent les jetons typographiques du
   lot B (rem), les points de rupture sont ceux de la feuille (481 et 900 px).
   ========================================================================== */
/* --- l'ecran Amis ----------------------------------------------------------- */
.amis .carte + .carte,
.amis .carte + .amis-bloc,
.amis .amis-bloc + .amis-bloc { margin-top: 14px; }

.amis .section-titre { margin-top: 0; }

.ami-confirmation p { margin: 0 0 4px; flex: 1 1 100%; font-size: 0.9rem; }

/* --- l'arene : les jetons dits clairement ------------------------------------ */
.jetons .jetons-nombre { font-size: 1.6rem; line-height: 1; }

.jetons .jetons-libelle { font-size: 0.9rem; color: var(--texte-2); }

.jetons .jetons-prochain { flex: 1 1 100%; font-size: 0.9rem; color: var(--texte); }

.jetons-pastilles { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }

.jetons-pastilles i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--or);
  background: transparent;
}

.jetons-pastilles i.pleine { background: var(--or); }

/* sanctuaire (cycle 21, lot D) : vus de l'arene (coquille), la carte « au
   Sanctuaire » en tete, le carton de retour, et le bouton « Aller au
   Sanctuaire » sous les cartes avec sa regle en une ligne. Le bord d'eau
   (mizu) pour le sejour, l'or pour l'XP rendue. */

/* fin sanctuaire */

/* --- le journal : la ligne d'un duel amical ------------------------------------ */
.ligne-journal.ligne-amicale .quand { color: var(--jade-texte); }

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

/* [fin amis] ============================================================== */
/* ============================================================================
   [identite] CYCLE 18, LOT D : L'IDENTITE « BLEU ET BLANC A LA JAPONAISE ».
   Charte complete dans docs/LABRUTE-C18.md §4. Les jetons (couleurs, polices,
   rayons, ombres) sont en tete de feuille ; les briques de base (boutons,
   cartes, champs, etiquettes, en-tete, barre basse) sont reprises a leur
   place. Ce bloc ne pose que ce qui est NEUF : les pictogrammes dessines de la
   navigation, le motif seigaiha, et quelques reprises d'ecrans. La section du
   rejeu (lot A) n'est pas touchee ici.
   ========================================================================== */
/* --- les pictogrammes de la navigation ----------------------------------------
   Les emoji (⚔️ 🗺 👥 📜 …) avaient chacun leur dessin et leurs couleurs : le
   premier signe « vieux site ». Dix pictogrammes au trait (icones/nav-*.svg,
   2,8 Ko en tout) les remplacent, poses en MASQUE : ils prennent la couleur du
   texte (gris d'ardoise au repos, indigo quand l'onglet est actif) dans les
   deux themes. L'emoji reste dans le DOM (masque, `font-size: 0`) : un onglet
   que cette liste ne connait pas garde le sien. */
[data-onglet="arene"] { --picto: url("../icones/nav-arene.svg"); }

[data-onglet="dojo"] { --picto: url("../icones/nav-dojo.svg"); }

[data-onglet="niveau"] { --picto: url("../icones/nav-niveau.svg"); }

[data-onglet="amis"] { --picto: url("../icones/nav-amis.svg"); }

[data-onglet="journal"] { --picto: url("../icones/nav-journal.svg"); }

[data-onglet="tournoi"] { --picto: url("../icones/nav-tournoi.svg"); }

[data-onglet="yokai"] { --picto: url("../icones/nav-yokai.svg"); }

[data-onglet="classement"] { --picto: url("../icones/nav-classement.svg"); }

[data-onglet="codex"] { --picto: url("../icones/nav-codex.svg"); }

[data-onglet="fiche"] { --picto: url("../icones/nav-fiche.svg"); }

[data-onglet="compte"] { --picto: url("../icones/nav-compte.svg"); }

[data-onglet="onsen"] { --picto: url("../icones/nav-onsen.svg"); }

[data-onglet="sanctuaire"] { --picto: url("../icones/nav-sanctuaire.svg"); }

/* c38 L1 : la cellule, le menu et l'epreuve, meme trait. */
[data-onglet="cellule"] { --picto: url("../icones/nav-cellule.svg"); }

[data-onglet="menu"] { --picto: url("../icones/nav-menu.svg"); }

[data-onglet="epreuve"] { --picto: url("../icones/nav-epreuve.svg"); }
/* c57 U : le Sentier prend le torii dessine (son emoji sort du texte de la barre) */
[data-onglet="sentier"] { --picto: url("../icones/nav-epreuve.svg"); }
[data-onglet="calendrier"] { --picto: url("../icones/nav-calendrier.svg"); } /* c68 J1 */
[data-onglet="buts"] { --picto: url("../icones/nav-buts.svg"); } /* c68 J1 */

:is([data-onglet="arene"], [data-onglet="dojo"], [data-onglet="niveau"], [data-onglet="amis"], [data-onglet="journal"],
  [data-onglet="tournoi"], [data-onglet="yokai"], [data-onglet="classement"], [data-onglet="codex"],
  [data-onglet="fiche"], [data-onglet="compte"], [data-onglet="onsen"], [data-onglet="sanctuaire"],
  [data-onglet="cellule"], [data-onglet="menu"], [data-onglet="epreuve"], [data-onglet="sentier"], [data-onglet="calendrier"], [data-onglet="buts"]) :is(.onglet-pictogramme, .menu-picto) {
  font-size: 0;
  line-height: 0;
}

:is([data-onglet="arene"], [data-onglet="dojo"], [data-onglet="niveau"], [data-onglet="amis"], [data-onglet="journal"],
  [data-onglet="tournoi"], [data-onglet="yokai"], [data-onglet="classement"], [data-onglet="codex"],
  [data-onglet="fiche"], [data-onglet="compte"], [data-onglet="onsen"], [data-onglet="sanctuaire"],
  [data-onglet="cellule"], [data-onglet="menu"], [data-onglet="epreuve"], [data-onglet="sentier"], [data-onglet="calendrier"], [data-onglet="buts"]) :is(.onglet-pictogramme, .menu-picto)::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--picto) center / contain no-repeat;
  mask: var(--picto) center / contain no-repeat;
}

/* La revanche du Journal : les deux sabres de l'Arene, a la place de l'emoji. */

/* Le Menu : chaque tuile porte son pictogramme dans un rond de mizu, comme
   une touche d'ecran d'accueil. */
.menu-picto {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--indigo-texte);
}

.feuille-menu-entree[aria-current="page"] .menu-picto { background: var(--pastille); }

/* --- le motif seigaiha ----------------------------------------------------------
   Les vagues bleues du Japon, en tuile SVG de 40 x 20 (771 octets, un
   fichier par theme : l'ecaille peint le fond pour cacher celle de derriere,
   donc la tuile connait la couleur de sa surface). Pose a droite de
   l'en-tete, fondu vers la gauche par un masque : on le devine, il ne se lit
   pas. Aucun texte ne passe dessus sans son fond. */
.entete { isolation: isolate; }

.entete::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--zone-sure-haut);
  right: 0;
  bottom: 0;
  width: min(62%, 640px);
  background: url("../icones/seigaiha-clair.svg") right top / 32px 16px repeat;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 45%, transparent);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 45%, transparent);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .entete::before { background-image: url("../icones/seigaiha-sombre.svg"); }
}

/* Les compteurs de l'en-tete sur une pastille de la surface : le motif ne
   passe jamais sous un chiffre. */
.entete-info:not(:empty) {
  background: var(--surface);
  border-radius: 999px;
  padding: 2px 4px 2px 12px;
}

/* --- les titres d'ecran et de section ---------------------------------------- */
.titre-ecran { letter-spacing: 0.01em; }

.section-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--texte);
}

/* --- l'accueil (connexion) : la marque, sur une vague -------------------------- */
/* Une carte de la surface : la tuile du motif peint le meme fond. */
.accueil-hero {
  position: relative;
  isolation: isolate;
  padding: 28px 16px 26px;
  margin-bottom: 18px;
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}

.accueil-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../icones/seigaiha-clair.svg") center bottom / 40px 20px repeat;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 75%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 75%);
}

@media (prefers-color-scheme: dark) {
  .accueil-hero::before { background-image: url("../icones/seigaiha-sombre.svg"); }
}

.accueil-hero h1 { font-size: 2.2rem; letter-spacing: 0.08em; }

/* art c23 : l'illustration d'accueil, pleine largeur en haut de la carte ; le
   sceau du titre passe a cheval sur son bord bas. */
.accueil-illustration { display: block; margin: -28px -16px 0; }

.accueil-illustration img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 416 / 144;
  image-rendering: pixelated;
}

.accueil-illustration + h1::before { margin-top: -30px; position: relative; }

.accueil-hero h1::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: url("../icones/onsen.svg") center / cover no-repeat;
  box-shadow: var(--ombre-2);
}

/* --- les lignes du Journal, du Classement, de l'ecole -------------------------- */
.ligne-journal,
.ligne-classement { border-radius: var(--r-l); box-shadow: var(--ombre-1); }

.ligne-classement.moi { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or), var(--ombre-1); }

/* Un choix fait garde son indigo sous la souris : le survol generique des
   boutons (mizu) laissait du blanc sur du bleu pale (axe, banc 1280). */
.codex-onglet[aria-selected="true"]:hover:not(:disabled),
.onglets-simples .bouton[aria-pressed="true"]:hover:not(:disabled) { background-color: var(--action-survol); }

/* --- les bandeaux, les encarts -------------------------------------------------- */
.bandeau { border-color: transparent; border-left-width: 4px; border-radius: var(--r-m); }

/* --- le focus garde sa couleur partout -----------------------------------------
   Quelques regles anciennes posaient leur propre contour (or ou vermillon) :
   elles prennent le bleu du focus, pour un seul langage. */
.codex-regles-resume:focus-visible,
.codex-panneau:focus-visible,
.codex-nom:focus-visible,
.yokai-rappel:focus-visible { outline-color: var(--focus); }

/* [fin identite] ============================================================ */
/* [stats] (cycle 18, lot E) ================================================
   Les chiffres qui se lisent : une barre par stat, le chiffre, et la phrase
   qui dit son effet. Chaque stat garde sa teinte partout (fiche, cartes de
   rivaux) : force vermillon, agilite jade, vitesse or, trempe indigo. Les
   couleurs viennent des jetons de :root, pour suivre la charte du lot D. */
.stats-lisibles { display: grid; gap: 12px; margin-top: 4px; }

@media (min-width: 900px) {
  .stats-lisibles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}

.stat-ligne { display: grid; gap: 5px; min-width: 0; align-content: start; }

.stat-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

.stat-nom { font-weight: 600; font-size: var(--t-lu, 0.9375rem); }

.stat-nombre { font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1; }

.stat-barre, .mini-stat-barre {
  display: block;
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.stat-barre > i, .mini-stat-barre > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--stat-teinte, var(--indigo));
}

[data-stat="strength"] { --stat-teinte: var(--vermillon); }

[data-stat="agility"] { --stat-teinte: var(--jade); }

[data-stat="speed"] { --stat-teinte: var(--or); }

[data-stat="toughness"] { --stat-teinte: var(--indigo); }

.stat-phrase {
  margin: 0;
  font-size: var(--t-lu, 0.9375rem);
  line-height: 1.45;
  color: var(--texte-2);
  font-variant-numeric: tabular-nums;
}

.stat-pv, .stat-initiative { border-top: 1px solid var(--trait); padding-top: 10px; }

@media (min-width: 900px) {
  .stat-pv, .stat-initiative { grid-column: auto; }
}

/* Les quatre stats en miniature, sur les cartes de rivaux. */
.mini-stats { display: grid; gap: 3px; }

.mini-stat { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 2.2ch; align-items: center; gap: 6px; min-width: 0; }

.mini-stat-nom { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--texte-2); }

.mini-stat-barre { height: 7px; }

.mini-stat-nombre { font-size: 0.8125rem; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

/* Arsenal, competences, familiers : chaque objet avec ses nombres. */
.objets-chiffres { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }

@media (min-width: 900px) {
  .objets-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.objet-chiffre {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-m);
  min-width: 0;
}

.objet-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

.objet-classe {
  font-size: var(--t-etiquette, 0.875rem);
  color: var(--texte-2);
}

.objet-phrase { margin: 0; font-size: var(--t-lu, 0.9375rem); line-height: 1.45; color: var(--texte-2); }

.objet-puces { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }

.objet-puce { display: flex; gap: 5px; align-items: baseline; }

.objet-puce dt { font-size: var(--t-etiquette, 0.875rem); color: var(--texte-2); }

.objet-puce dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.objet-puce[data-chiffre="coup"] dd, .objet-puce[data-chiffre="interpose"] dd { color: var(--vermillon-texte); }

.objet-note { margin: 8px 0 0; font-size: var(--t-etiquette, 0.875rem); color: var(--texte-3); line-height: 1.4; }

/* [fin relecture c18] ====================================================== */

/* deux (cycle 22, agent A) ====================================================
   LE SELECTEUR DE COMBATTANT DE L'EN-TETE (docs/DEUX-C22.md §1). Un portrait
   rond par combattant du compte, celui qui joue cercle d'or, l'autre pali ;
   puis le « + » de « Creer mon deuxieme onsen ». La marque reste a gauche, le
   selecteur et les compteurs se serrent a droite. Cibles de 44 px, portraits
   de 32 px. */
.entete.avec-selecteur { justify-content: flex-start; }

.entete-combattants {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  flex: 0 0 auto;
}

.entete.avec-selecteur .entete-info { flex: 0 1 auto; }

.entete-combattant {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}

.entete-combattant .vignette.mini {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid var(--trait-fort);
  opacity: 0.62;
  transition: opacity 0.15s var(--sortie), border-color 0.15s var(--sortie);
}

/* Le paquet dessine son combattant au milieu d'une image de 120 a 128 px :
   reduite a 84 px et descendue de 13 px, la tete et le buste tiennent dans le
   rond de 32 px. */
.entete-combattant .vignette.mini img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  max-width: none;
  object-fit: contain;
  object-position: 50% 50%;
  transform: translate(-50%, calc(-50% + 13px));
}

.entete-combattant.actif .vignette.mini {
  border-color: var(--or);
  opacity: 1;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--or);
}

.entete-combattant:focus-visible { outline: 2px solid var(--vermillon); outline-offset: -2px; }

.entete-creer-plus {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid var(--trait-fort);
  color: var(--texte-2);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .entete-combattant:hover .vignette.mini { opacity: 1; }
  .entete-creer:hover .entete-creer-plus { border-color: var(--or); color: var(--or-texte); }
}

/* Sur telephone, le mot ONSEN cede sa place au selecteur (le sceau reste la
   marque) : deux portraits et les compteurs tiennent de 360 a 480 px.
   (« screen and » : le test du cycle 15 lit la DERNIERE regle « (max-width:
   480px) » de la feuille, celle de la pastille du dojo.) */
@media screen and (max-width: 480px) {
  .entete.avec-selecteur .entete-titre { display: none; }
  .entete.avec-selecteur { gap: 6px; }
}

/* L'ecran Compte : la liste des combattants du compte. */
.deux-liste { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }

.deux-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface);
}

.deux-ligne.actif { border-color: var(--or); }

.deux-ligne .vignette.mini { position: relative; width: 44px; height: 44px; border-radius: 999px; }

.deux-ligne .vignette.mini img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116px;
  height: 116px;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, calc(-50% + 18px));
}

.deux-identite { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }

.deux-nom { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.deux-detail { font-size: 0.84rem; color: var(--texte-2); }

.deux-etat { font-size: 0.8rem; font-weight: 700; color: var(--or-texte); flex: none; }

.deux-ligne .bouton { flex: none; }
/* [fin deux] ================================================================= */

/* [c23 R] ====================================================================
   L'ARENE LIBRE ET LA TETE DE LA FICHE (docs/CYCLE-23.md §3 bis,
   docs/OEIL-C23.md §4). Quatorze rivaux ranges en quatre tranches, chacune
   sous un titre qui court sur toute la largeur de la grille (un filet la
   prolonge), sa couleur reprise par l'etiquette de chaque carte : indigo pour
   « ton niveau », vermillon pour « plus fort », jade pour « plus faible », or
   pour « ailleurs ». (L'encart « Aller a l'arene » de la fiche vit dans la
   feuille de la fiche, `ecrans/codex.css` : rien de plus dans la coquille.)
   ========================================================================== */

.arene-cible #arene-remettre { display: flex; margin-top: 10px; }

.adversaire[data-tranche="dessus"] { border-top: 3px solid var(--vermillon); }

.adversaire[data-tranche="dessous"] { border-top: 3px solid var(--jade); }

.adversaire[data-tranche="ailleurs"] { border-top: 3px solid var(--or); }

.adversaire[data-tranche="egal"] { border-top: 3px solid var(--indigo); }

/* [fin c23 R] ================================================================ */
/* [c23 C] TITRES ET SUCCES (docs/CYCLE-23.md §3) ==============================
   Au socle parce que l'arene et le journal sont dans la coquille : le titre
   porte sous un nom (cartes des rivaux, fiche) et la ligne « Titre gagné » du
   journal. L'or de la charte, en texte (`--or-texte`, 5,9 au plus bas). */
.titre-porte {
  margin: -4px 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  font-style: italic;
  color: var(--or-texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titre-porte-texte::before { content: "~ "; font-style: normal; opacity: 0.7; }

.titre-porte-texte::after { content: " ~"; font-style: normal; opacity: 0.7; }

.fiche-tete .titre-porte { margin: 2px 0 0; font-size: 0.9rem; }

.ligne-journal.ligne-succes { cursor: default; border-left: 3px solid var(--or); }

.ligne-journal .issue.succes { color: var(--or-texte); }

/* Le sceau d'un titre : un rond d'or au trait, un kanji de gloire (栄) dessine
   par la police du systeme ; il tient la place d'une vignette de 56 px. */

/* [fin c23 C] ================================================================ */

/* [c24 G2] ===================================================================
   LES ECRANS FINIS (docs/CYCLE-24.md §6, lot G2 ; docs/SOIR-C24.md §6).
   1. (Les squelettes de chargement gardent leur lueur du cycle 16 : une lueur
      en `translate` sur un pseudo-element, essayee, faisait monter le temps
      bloque de l'Arene sous Lighthouse, 28 -> 259 ms ; retiree, docs/SOIR-C24.md §6.)
   2. La fiche : le portrait au double exact du dessin (248 px pour 124, aucun
      pixel casse), cadre sur le corps (le corps fait 49 % de l'image, pieds a
      75 %) dans une case de 128 px : le combattant la remplit au lieu d'y
      flotter a 50 px ; les icones de l'arsenal et des competences a 32 px
      (elles etaient a 18). */
.fiche-portrait { position: relative; width: 128px; height: 128px; }

.fiche-portrait img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 248px;
  height: 248px;
  max-width: none;
  translate: -50% -50.5%;
}

.objet-chiffre .etiquette-objet .etiquette-icone { width: 32px; height: 32px; }

@media (prefers-color-scheme: dark) {
  .objet-chiffre .etiquette-objet .etiquette-icone[src*="/img/"] { filter: drop-shadow(0 0 1px rgba(232, 237, 246, 0.55)); }
}

/* 3. Les cartes de rivaux : la tranche en bande droite de 4 px au haut de la
   carte (le bord haut de 3 px suivait l'arrondi et se lisait en croissant) ;
   au survol, a la souris, la carte se leve d'un pixel. */
.adversaire[data-tranche] {
  --c24-tranche: var(--indigo);
  border-top: 1px solid var(--trait);
  box-shadow: inset 0 4px 0 var(--c24-tranche), var(--ombre-1);
}

.adversaire[data-tranche="dessus"] { --c24-tranche: var(--vermillon); }

.adversaire[data-tranche="dessous"] { --c24-tranche: var(--jade); }

.adversaire[data-tranche="ailleurs"] { --c24-tranche: var(--or); }

@media (hover: hover) and (pointer: fine) {
  .adversaire[data-tranche] { transition: border-color 0.15s var(--sortie), box-shadow 0.15s var(--sortie), translate 0.15s var(--sortie); }

  .adversaire[data-tranche]:hover { box-shadow: inset 0 4px 0 var(--c24-tranche), var(--ombre-2); translate: 0 -1px; }
}

@media (prefers-reduced-motion: reduce) {
  .adversaire[data-tranche]:hover { translate: none; }
}
/* [fin c24 G2] =============================================================== */

/* [c25 B] L'ACCUEIL ECRIT DANS LA PAGE (docs/AMI-C25.md §2) ===================
   index.html porte l'ecran de connexion dans les deux langues
   (`.accueil-statique`) ; l'amorce (js/amorce.js) pose sur <html> la langue
   et `data-amorce` : « accueil » pour un visiteur, « attente » pour un joueur
   connecte ou un lien de combat ou de parrain. Seul l'accueil de la langue de
   <html> se montre, et seulement a un visiteur ; sans amorce, rien ne se
   montre et l'ecran de demarrage reste, comme avant. Les modules remplacent
   l'accueil ecrit par le vrai ecran, dont il porte les classes : aucune regle
   de mise en page ne lui est propre. */
html:not([data-amorce="accueil"]) .accueil-statique,
html[lang="fr"] .accueil-statique[lang="en"],
html[lang="en"] .accueil-statique[lang="fr"] { display: none; }
html[data-amorce="accueil"] .chargement-initial { display: none; }
/* Les deux marges que connexion.js pose en attribut `style` (la page n'en
   porte aucun, tests-v3/dom-hostile-c15.test.mjs) : « Compte perdu ? » et le
   bandeau de l'ancien Onsen. */
.accueil-statique > .bouton-discret { margin-top: 10px; }
.accueil-statique > .bandeau { margin-top: 12px; margin-bottom: 0; }
/* Sur PC, la page d'un visiteur n'a pas de colonne laterale : la mise en page
   de `.appli.sans-navigation` (plus haut), que la navigation pose une fois
   les modules la. main.js retire `data-amorce` apres le premier ecran. */
@media (min-width: 900px) {
  html[data-amorce="accueil"] .appli { grid-template-columns: minmax(0, 1fr) minmax(0, 1340px) minmax(0, 1fr); }
  html[data-amorce="accueil"] .appli .contenu { grid-column: 2; margin-inline: auto; }
}
/* [fin c25 B] ================================================================ */
/* [c32 F2] LA BORDURE DE LA SAISON (docs/CYCLE-32.md §2) : le rang de la
   derniere saison close, sur les portraits (vignettes, en-tete, colonne,
   fiche, cartes de l'arene) et l'etiquette de la fiche. Bronze et argent : un
   trait ; or : un liseré detache par un filet blanc ; jade (« Perle » a l'ecran,
   c68 J1) : un double liseré blanc nacré, cerné de nacre ombrée au thème clair.
   `data-saison` est pose par ecrans/commun.js (`poserSaison`). */
[data-saison] { --s: #a8703f; --sa: 0 0 0 2px var(--s); }
[data-saison="argent"] { --s: #8196ad; }
[data-saison="or"] { --s: var(--or); --sa: 0 0 0 1px var(--surface), 0 0 0 3px var(--s); }
[data-saison="jade"] { --s: #8a8198; --sa: 0 0 0 1px var(--surface), 0 0 0 2px var(--s), 0 0 0 4px #ece6f1, 0 0 0 5px var(--s); }
@media (prefers-color-scheme: dark) { [data-saison="jade"] { --s: #ece6f1; --sa: 0 0 0 1px var(--surface), 0 0 0 3px var(--s), 0 0 0 4px var(--surface), 0 0 0 5px var(--s); } }
.vignette[data-saison], .fiche-portrait[data-saison] { border: 1px solid var(--s); box-shadow: var(--sa); }
.entete-combattant .vignette.mini[data-saison] { border-color: var(--s); box-shadow: none; }
.entete-combattant.actif .vignette.mini[data-saison] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--or); }
.etiquette-saison { border: 1px solid var(--s); }
.marque-reincarnation { color: var(--vermillon-texte, var(--vermillon)); font-weight: 700; }
/* [fin c32 F2] */

/* [c33 B] Le pied de l'accueil, peint par la page avant les modules. */
.accueil-pied { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 14px 0 0; font-size: 0.84rem; }
.accueil-pied a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--texte-2); text-underline-offset: 3px; }
.accueil-pied a:hover { color: var(--texte); }
/* [fin c33 B] */

/* c33 A */
#formulaire-perdu #oubli-par-mail { margin: 4px 0 6px; }
.courrier-ou-code { margin: 18px 0 2px; font-weight: 700; color: var(--texte-2); }
/* fin c33 A */

/* ============================================================================
   c38 L1 : LE CADRE DE JEU, « un jeu, pas un site » (docs/INTERFACE-C38.md
   §0.3 et §1). `html.jeu` (pose par navigation.js quand un combattant existe,
   hors combat et ecrans libres) tient l'application dans 100dvh : en-tete,
   `#ecran`, dock ; a partir de 900 px, la colonne `#cellule` et le panneau.
   Jamais `overflow: hidden` sur html, body, .contenu ou #ecran : `#ecran`
   defile seulement en `.cadre-souple` (le banc mesure qu'il ne defile pas).
   ============================================================================ */
:root {
  --entete-h: 44px;
  --dock-h: 54px;
  --barre-h: var(--dock-h); /* l'alias que lit le combat (rejeu.css) */
  --titre-h: 48px;
  --onglets-h: 44px;
  --cible: 44px;
  --ecart: 8px;
  --panneau-marge: 16px;
  --ligne-s: 44px;
  --ligne-m: 56px;
  --ligne-l: 64px;
  --cellule-l: 400px;
  --corps-h: 200px;
  --gros-h: 72px;
  --tournoi-h: 64px;
  --tuile-h: 64px;
  --lisere-egal: var(--indigo);
  --lisere-dessus: var(--or);
  --lisere-dessous: var(--jade);
  --lisere-ailleurs: var(--trait-fort);
  --ecran-h: calc(100vh - var(--entete-total) - var(--dock-h) - var(--zone-sure-bas));
  --ecran-h: calc(100dvh - var(--entete-total) - var(--dock-h) - var(--zone-sure-bas));
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) { :root { --dock-h: 48px; } }
/* relecteur c38 : HORS DU CADRE DE JEU (le combat, les ecrans libres), l'en-tete et la barre gardent leurs
   mesures d'avant le cycle 38 (52 et 60 px au telephone, 44 et 48 couche) : la scene du combat, qui les
   lit (rejeu.css), ne bouge pas d'un pixel (empreinte du rejeu --plein a l'octet). */
@media (max-width: 899px) { html:not(.jeu) { --entete-h: 52px; --barre-h: 60px; } }
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) { html:not(.jeu) { --entete-h: 44px; --barre-h: 48px; } }
/* Le mode tasse : sous 740 px de haut (telephone), sous 680 px (au-dessus de 900 px). */
@media (max-width: 899px) and (max-height: 739px) { :root { --corps-h: 120px; --gros-h: 56px; --tournoi-h: 52px; --tuile-h: 52px; } }
@media (min-width: 900px) {
  :root { --entete-h: 52px; --dock-h: 0px; --panneau-marge: 24px; --corps-h: 240px; --gros-h: 64px; --tournoi-h: 56px; --tuile-h: 56px; }
}
@media (min-width: 900px) and (max-height: 679px) { :root { --corps-h: 180px; --gros-h: 56px; --tournoi-h: 48px; --tuile-h: 48px; } }

/* --- la grille d'application --------------------------------------------- */
.cellule-colonne { display: none; }
html.jeu .appli {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: var(--entete-total) minmax(0, 1fr) calc(var(--dock-h) + var(--zone-sure-bas));
  grid-template-columns: minmax(0, 1fr);
}
html.jeu .entete { position: relative; }
html.jeu .contenu {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}
html.jeu #bandeaux { flex: none; }
html.jeu #bandeaux:not(:empty) { padding: 8px var(--marge-cote) 0; }
html.jeu #ecran {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px max(var(--marge-cote), var(--zone-sure-gauche)) 16px max(var(--marge-cote), var(--zone-sure-droite));
}
html.jeu #ecran:has(> .panneau, > .cellule) { padding: 0; }
html.jeu .barre-basse { grid-row: 3; position: relative; min-height: 0; }
@media (min-width: 481px) and (max-width: 899px) {
  html.jeu #ecran > .panneau, html.jeu #ecran > .cellule { max-width: 600px; margin-inline: auto; width: 100%; }
}
@media (max-width: 899px) {
  html.jeu #ecran > :not(.panneau):not(.cellule) { max-width: var(--largeur); margin-inline: auto; }
  html.jeu .entete-marque { display: none; }
  html.jeu .entete { gap: 4px; }
  html.jeu .entete-combattants { margin-left: 0; }
  html.jeu .entete.avec-selecteur .entete-info { flex: 1 1 auto; }
}
@media (min-width: 900px) {
  html.jeu .appli { grid-template-columns: var(--cellule-l) minmax(0, 1fr); grid-template-rows: var(--entete-total) minmax(0, 1fr); }
  html.jeu .entete { grid-column: 1 / -1; padding-inline: 16px; }
  html.jeu .contenu { grid-column: 2; grid-row: 2; }
  html.jeu .barre-basse { display: none; }
  html.jeu .cellule-colonne {
    display: block;
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--trait);
    background: var(--surface);
  }
}
/* Le cadre souple : texte agrandi, fenetre basse, clavier virtuel. Le panneau
   reprend sa hauteur naturelle, `#ecran` defile, rien n'est coupe. */
html.cadre-souple .panneau { height: auto; min-height: 100%; }
html.cadre-souple .panneau-corps { flex: none; }
html.cadre-souple .panneau-borne { flex: none; max-height: 70vh; }

/* --- le dock (390) : cinq entrees de 78 x 54 ------------------------------ */
.barre-basse.dock { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dock .onglet { min-height: calc(var(--dock-h) - 1px); padding: 3px 1px; gap: 2px; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; } /* le trait du haut compte */
.dock .onglet-pictogramme { width: 48px; height: 26px; }
.dock .onglet-pastille { top: 2px; left: 58%; }
.dock .onglet-pastille.pastille--or { background: var(--or); color: #1d1606; }
.dock .onglet-libelle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* c63 N : la barre en B sous html[data-menus] (ONSEN_IMAGES_MENUS), tous themes, sans image (CYCLE-63, amendements 1 et 2) : une
   planche de laque veinee d'or, l'onglet courant releve sur un disque de papier cercle d'or, son libelle en or et en gras */
html[data-menus] .barre-basse { background: repeating-linear-gradient(90deg, rgb(224 184 90 / 0.05) 0 1px, transparent 1px 13px), var(--urushi); border-top-color: var(--kin-sombre); box-shadow: inset 0 1px 0 var(--kin-sombre); }
html[data-menus] .barre-basse .onglet { color: var(--papier); }
html[data-menus] .barre-basse .onglet:is([aria-current="page"], .onglet-plus-ici) { color: var(--kinpaku); font-weight: 900; }
html[data-menus] .barre-basse .onglet:is([aria-current="page"], .onglet-plus-ici) .onglet-pictogramme { width: 40px; height: 40px; margin-top: -14px; border: 3px solid var(--kinpaku); border-radius: 50%; background: var(--papier); color: var(--urushi); box-shadow: 2px 2px 0 rgb(4 8 20 / 0.6); }
html[data-menus] .barre-basse .onglet:focus-visible { outline-color: var(--papier); }

/* --- l'en-tete compact ---------------------------------------------------- */
.entete-info { gap: 6px; font-size: 0.875rem; overflow: visible; }
html.jeu .entete-info { flex: 1 1 auto; justify-content: space-between; min-width: 0; }
.entete-xp, .entete-jetons {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: var(--texte);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.entete-xp { flex: 1 1 auto; min-width: 0; max-width: 260px; }
.entete-xp .jauge { flex: 1 1 60px; max-width: 120px; height: 6px; }
.entete-xp .jauge > i { background: var(--or); }
.entete-xp-chiffres { font-weight: 600; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.entete-etoile { color: var(--or-texte); }
.entete-jetons b { color: var(--or-texte); font-variant-numeric: tabular-nums; }
.entete-jetons-plafond { color: var(--texte-2); font-weight: 600; }
.entete-jetons-prochain { display: none; color: var(--texte-2); font-weight: 600; }
@media (min-width: 900px) {
  .entete-xp { max-width: 360px; }
  .entete-xp .jauge { max-width: 200px; flex-basis: 200px; }
  .entete-jetons-prochain { display: inline; }
}
.entete-choisir {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.entete-choisir .pastille, .entete-combattant .pastille { position: absolute; top: 2px; right: 0; }

/* --- les briques des panneaux (cadre.js) ---------------------------------- */
.panneau {
  display: flex;
  flex-direction: column;
  gap: var(--ecart);
  height: 100%;
  min-height: 0;
  padding: 0 max(var(--panneau-marge), var(--zone-sure-droite)) var(--ecart) max(var(--panneau-marge), var(--zone-sure-gauche));
}
.panneau-titre { display: flex; align-items: center; gap: 4px; min-height: var(--titre-h); flex: none; }
.panneau-h1 { flex: 1 1 auto; min-width: 0; font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panneau-h1:focus { outline: none; }
.panneau-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.panneau-entete, .panneau-pied { display: flex; flex-direction: column; gap: var(--ecart); flex: none; }
.panneau-entete:empty, .panneau-pied:empty { display: none; }
.panneau-corps { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--ecart); }
.bouton-icone {
  -webkit-appearance: none;
  appearance: none;
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--indigo-texte);
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
}
.bouton-icone:disabled { opacity: 0.45; cursor: default; }
/* relecteur c38 : le [←] n'existe qu'a 390 ; la regle vient APRES .bouton-icone, qui l'emportait a specificite egale. */
@media (min-width: 900px) { .bouton-icone.panneau-retour { display: none; } }
.bande-etat { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 0 0 12px; border-radius: var(--r-m); background: var(--surface-2); }
.bande-etat > p { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onglets-internes { display: flex; gap: 4px; min-height: var(--onglets-h); flex: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.onglets-internes::-webkit-scrollbar { display: none; }
.onglet-interne, .segment {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--texte-2);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.onglet-interne[aria-selected="true"] { background: var(--pastille); color: var(--indigo-texte); box-shadow: inset 0 -3px 0 var(--or); }
.onglet-interne .onglet-pastille { position: static; margin-left: 6px; vertical-align: 1px; }
.onglet-panneau { display: flex; flex-direction: column; gap: var(--ecart); min-height: 0; flex: 1 1 auto; }
.onglet-panneau:focus { outline: none; }
.segments { display: flex; gap: 4px; flex: none; overflow-x: auto; scrollbar-width: none; }
.segment { flex: 0 0 auto; border-color: var(--trait-fort); border-radius: 999px; font-weight: 600; }
.segment[aria-pressed="true"] { background: var(--action); border-color: transparent; color: var(--action-texte); }
.panneau-borne {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(var(--fond) 30%, transparent) center top / 100% 24px no-repeat local,
    linear-gradient(transparent, var(--fond) 70%) center bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(20, 33, 58, 0.22), transparent) center top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(20, 33, 58, 0.22), transparent) center bottom / 100% 10px no-repeat scroll;
}
.borne-epingle { position: sticky; bottom: 0; background: var(--surface); }
.liste-lignes { display: grid; gap: 4px; }
.ligne { display: flex; align-items: center; gap: 8px; min-height: var(--ligne-h, var(--ligne-m)); }
.pagination { margin-top: 0; min-height: 44px; flex: none; }
.pagination[hidden] { display: none; }
.pagination-points { letter-spacing: 2px; color: var(--indigo-texte); font-size: 0.7rem; }
.pagination-chiffre { font-variant-numeric: tabular-nums; color: var(--texte-2); font-weight: 600; }
.bouton-aide {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--trait-fort);
  border-radius: 50%;
  background: var(--surface);
  color: var(--indigo-texte);
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
}
.bouton-aide[aria-expanded="true"] { background: var(--action); color: var(--action-texte); border-color: transparent; }
.bulle-aide {
  position: fixed;
  z-index: 60;
  padding: 12px 8px 4px 14px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--ombre-2);
}
.bulle-aide:focus { outline: none; }
.bulle-ligne { margin: 0 6px 6px 0; font-size: var(--t-lu); line-height: 1.4; }
.bulle-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bulle-codex { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.bulle-fermer, .carton-fermer { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--texte-2); font: inherit; font-size: 1rem; cursor: pointer; margin-left: auto; }
.gros-bouton {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: var(--gros-h);
  padding: 4px 16px;
  border: 2px solid transparent;
  border-radius: var(--r-l);
  font: inherit;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-align: center;
}
.gros-bouton--principal { background: var(--action); color: var(--action-texte); box-shadow: var(--ombre-franche); }
.gros-bouton--principal.est-vide { background: var(--surface-2); color: var(--texte-2); box-shadow: none; }
.gros-bouton--or { min-height: var(--tournoi-h); background: var(--or); color: #1d1606; }
.gros-bouton--inscrit { min-height: var(--tournoi-h); background: var(--surface); color: var(--indigo-texte); border-color: var(--indigo); }
.pulse-deux { animation: pulse-deux 1.1s ease-out 2; }
@keyframes pulse-deux { from { box-shadow: 0 0 0 0 rgba(201, 160, 78, 0.75); } to { box-shadow: 0 0 0 14px rgba(201, 160, 78, 0); } }
.tuile-jeu {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  min-height: var(--tuile-h);
  min-width: 0;
  padding: 4px 12px;
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.carton-unique { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px 0 4px 12px; border: 1px solid var(--trait-fort); border-left: 4px solid var(--or); border-radius: var(--r-l); background: var(--surface); }
.carton-texte { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-lu); line-height: 1.3; }
.carton-action { flex: none; padding: 8px 12px; }
.pastille { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--badge-ia); color: #fff; font-size: 0.7rem; font-weight: 800; line-height: 1; }
.pastille--or { background: var(--or); color: #1d1606; }
dialog.feuille-detail { width: 100%; max-width: 100%; margin: auto 0 0; padding: 16px; border: 1px solid var(--trait); border-bottom: 0; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--surface); color: var(--texte); }
@media (min-width: 900px) { dialog.feuille-detail { max-width: 516px; margin: auto; border-radius: var(--r-l); border-bottom: 1px solid var(--trait); } }
@media (min-width: 900px) { .deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
.tranche-egal { --lisere: var(--lisere-egal); }
.tranche-dessus { --lisere: var(--lisere-dessus); }
.tranche-dessous { --lisere: var(--lisere-dessous); }
.tranche-ailleurs { --lisere: var(--lisere-ailleurs); }
@media (prefers-reduced-motion: reduce) { .pulse-deux { animation: none; } }
/* fin c38 L1 */

/* c45 A : LE PLEIN ECRAN DU SENTIER au telephone (docs/CYCLE-45-A.md §3.2). Sous `html.plein` (navigation.js),
   `#ecran` prend toute la fenetre ; l'en-tete et le dock reels glissent hors de l'ecran (fixes, caches, `inert`) et
   reviennent par-dessus la scene sous `html.plein-barres`, un voile entre les deux. Jamais d'overflow: hidden ici :
   la racine du plein (fixe) borne. Les bandeaux sous le HUD du haut, les messages au-dessus de la rangee basse. */
/* La grille garde ses rangees : la racine du plein est fixe, `#principal` ne bouge pas quand le plein se pose apres la
   lecture de la fiche (aucun decalage de mise en page au premier affichage, Lighthouse le comptait a 0,08). */
html.plein .entete, html.plein .barre-basse { position: fixed; left: 0; right: 0; z-index: 30; visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
html.plein .entete { top: 0; transform: translateY(-100%); }
html.plein .barre-basse { bottom: 0; min-height: calc(var(--dock-h) + var(--zone-sure-bas)); transform: translateY(100%); }
html.plein-barres .entete, html.plein-barres .barre-basse { visibility: visible; transform: none; transition: transform 0.2s ease, visibility 0s; }
.plein-voile { display: none; }
html.plein-barres .plein-voile { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(10, 16, 32, 0.35); }
html.plein #ecran { padding: 0; }
html.plein #bandeaux:not(:empty) { position: fixed; z-index: 20; left: 0; right: 0; top: calc(var(--zone-sure-haut) + 104px); padding: 0 var(--marge-cote); }
html.plein .messages { top: auto; bottom: calc(var(--zone-sure-bas) + 126px); }
@media (prefers-reduced-motion: reduce) { html.plein .entete, html.plein .barre-basse { transition: none; } }
/* fin c45 A */
/* [c45B] le sceau de classe : un hanko vermillon profond, kanji blanc (la police du
   systeme, comme 栄 et 転), decoratif et double du nom ; les accents des six classes,
   3:1 au moins sur le papier, redefinis pour le theme sombre. */
:root { --classe-rikishi: #1f3a68; --classe-sohei: #c23f26; --classe-shinobi: #4b3f8f; --classe-samourai: #1d5a8a; --classe-biwa_hoshi: #8f6210; --classe-miko: #b52a33; }
@media (prefers-color-scheme: dark) { :root { --classe-rikishi: #8fb0e8; --classe-sohei: #ff8f74; --classe-shinobi: #b3a7f5; --classe-samourai: #7cbbe8; --classe-biwa_hoshi: #e2b55e; --classe-miko: #ff8a92; } }
.sceau-classe { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; align-content: center; box-sizing: border-box; width: 18px; height: 18px; padding: 1px; border-radius: 3px; background: var(--badge-ia); color: #fff; font: 700 11px/1 "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif; text-align: center; vertical-align: -3px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28), inset 1px -1px 0 2px rgba(0, 0, 0, 0.14); }
.sceau-classe[data-taille="carte"] { width: 28px; height: 28px; font-size: 17px; }
.sceau-classe[data-taille="carte"][data-signes="2"] { font-size: 12px; }
.sceau-classe[data-taille="fiche"] { width: 56px; height: 56px; padding: 6px; border-radius: 6px; font-size: 32px; }
.sceau-classe[data-taille="fiche"][data-signes="2"] { font-size: 21px; }
.sceau-classe[data-taille="fiche"][data-signes="4"] { font-size: 19px; }
/* [fin c45B] */
/* c45 integ : le nom de classe lisible cache (`.visuellement-cache`, absolu) se cale sur son sceau ; sans cela, dans une
   liste qui defile (le classement « Top » a 1280), les noms des rangees hors de vue debordaient la page (725 px pour 720). */
.sceau-classe-hote { position: relative; }
/* fin c45 integ */
/* c57 U : LES TROIS FAMILLES DE FORMES (docs/STYLE-ONSEN.md DA11). La forme dit le role : le jeton (objets.css) ; le bouton
   d'action, une plaque pleine ai a ombre franche qui s'enfonce de 2 px au toucher (l'ombre disparait ; sans translation sous
   mouvement reduit) ; la carte d'information, du papier a bord kachi fin. Les ecrans les posent par `data-forme`. */
[data-forme="action"] { border: 1.5px solid var(--kachi); border-radius: 4px; background: var(--ai); color: #ffffff; box-shadow: var(--ombre-franche); transition: translate 80ms linear, box-shadow 80ms linear; }
[data-forme="action"]:active:not(:disabled) { translate: 2px 2px; box-shadow: none; }
[data-forme="papier"] { border: 1px solid var(--kachi); border-radius: 2px; background: var(--papier); color: var(--kachi); }
@media (prefers-color-scheme: dark) {
  [data-forme="action"] { background: var(--action); }
}
@media (prefers-reduced-motion: reduce) {
  [data-forme="action"]:active:not(:disabled) { translate: none; }
}
/* la croix de fermeture, dessinee (plus de « ✕ » en texte) */
:where([data-croix]) { position: relative; } /* sans poids : une croix deja placee (absolue) garde sa place */
[data-croix]::before, [data-croix]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 1px; background: currentColor; translate: -50% -50%; rotate: 45deg; }
[data-croix]::after { rotate: -45deg; }
/* les petits titres en capitales deviennent des titres en minuscules, a leur taille */
:root .section-titre { font-size: var(--t-corps); line-height: 1.3; }
/* les pictogrammes dessines par le masque de la barre (le journal du rejeu, la roue du compte, Mon onsen), plus d'emoji ;
   le losange d'une recompense a choisir */
[data-picto="journal"] { --picto: url("../icones/nav-journal.svg"); }
[data-picto="compte"] { --picto: url("../icones/nav-compte.svg"); }
[data-picto="onsen"] { --picto: url("../icones/nav-onsen.svg"); }
.entete-etoile::before, .onglet-pastille.pastille--or:empty::before, .journal-issue.succes::before, .journal-issue.yokai::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 1.5px solid var(--kachi); background: var(--lueur); rotate: 45deg; }
[data-picto]::before { content: ""; display: block; width: 22px; height: 22px; margin: auto; background: currentColor; -webkit-mask: var(--picto) center / contain no-repeat; mask: var(--picto) center / contain no-repeat; }
/* fin c57 U */
/* c56 A : les onglets glissent (D10), le « +1 » qui flotte (D9) ; sous mouvement reduit, des fondus (D14) */
.onglet-panneau.onglet-entre { animation: c56-onglet 160ms cubic-bezier(0.2, 0.8, 0.2, 1); --glisse: 16px; }
.onglet-panneau.onglet-entre[data-onglet-sens="g"] { --glisse: -16px; }
@keyframes c56-onglet { from { opacity: 0; transform: translateX(var(--glisse)); } }
@keyframes c56-fondu { from { opacity: 0; } }
.geste-flotte { font-weight: 800; color: var(--lueur, #e8b53a); -webkit-text-stroke: 3px var(--kachi, #16223d); paint-order: stroke fill; }
@media (prefers-reduced-motion: reduce) { .onglet-panneau.onglet-entre { animation: c56-fondu 120ms linear; animation-duration: 120ms !important; } }
/* fin c56 A */
/* c63 ter : le mouvement reduit du jeu (Reglages, amorce.js) s'ajoute a celui du telephone ; la langue avant la connexion */
html[data-mouvement="reduit"] *, html[data-mouvement="reduit"] ::before, html[data-mouvement="reduit"] ::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
.accueil-langue { position: fixed; z-index: 21; top: calc(var(--zone-sure-haut) + (var(--entete-h) - 46px) / 2); right: var(--marge-cote); gap: 0; margin: 0; flex-wrap: nowrap; border: 1px solid var(--kinpaku); border-radius: 23px; background: var(--urushi); overflow: hidden; }
html .accueil-langue.onglets-simples .bouton { flex: none; min-width: 50px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--papier); font-size: 0.9rem; }
html .accueil-langue.onglets-simples .bouton[aria-pressed="true"] { background: var(--kinpaku); color: var(--urushi); font-weight: 900; }
/* fin c63 ter */