/*
  FICHIER RECOPIE : NE PAS MODIFIER ICI.

  Original : kmoove-memory/src/styles.css
  Copie produite par : npm run exporter-editeur (depot du jeu)

  L'editeur de seance existe en UN SEUL exemplaire, pour que l'animateur
  retrouve les MEMES mots et les MEMES blocs sur le mur et sur le site.
  Une retouche faite ici serait perdue au prochain export, et le controle
  des deux depots la signalerait avant.
*/
:root {
  --fond: #101426;
  --fond-profond: #0b0e1c;
  --fond-carte: #1a2038;
  --bordure: #2c3352;
  --texte: #f6f4ef;
  --texte-doux: #a7adc4;
  --creme: #faf7f2;

  --accent: #f0733f;
  --accent-doux: #ff8f5e;
  --zone-1: #3ec8b4;
  --zone-2: #f0733f;
  --zone-3: #9b7ede;
  --succes: #46c98a;
  --or: #f6d743;

  --rayon: 24px;
  --transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);
  --police: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  /* ─── LE MOUVEMENT DU MUR, NOMMÉ PAR CE QU'IL DIT (2026-09-08, règle 69) ──
     « Réfléchis aussi à faire un beau design et des belles animations. »
     (Mounassib). Le mur portait QUINZE durées différentes, chacune posée à un
     endroit, aucune nommée : onze templates de plus, ce sont onze
     vocabulaires qui divergent.

     ⚠️ CES VALEURS NE SONT PAS CHOISIES : ce sont celles que le mur employait
     déjà. Les nommer sans les changer laisse le jeu exactement tel qu'il
     était, donc les 68 étalons du banc intacts, et donne au template suivant
     un vocabulaire au lieu d'un nombre à inventer. Chacune a été réglée sur
     une capture réelle entre août et septembre : on ne les change pas sans
     revoir le mur.

     ⚠️ ELLES SONT ÉCRITES DEUX FOIS, ici et dans src/logique/animations.js.
     C'est voulu : un minuteur JavaScript qui retire une classe doit durer
     aussi longtemps que l'animation qu'il accompagne. `controlerMouvement()`
     compare les deux tables, sinon elles divergeraient. */
  --mvt-touche: 90ms;    /* le retour d'un contact */
  --mvt-revele: 350ms;   /* une carte se retourne */
  --mvt-juste: 450ms;    /* c'était ça */
  --mvt-rate: 380ms;     /* ce n'était pas ça, ou pas maintenant */
  --mvt-range: 500ms;    /* cet objet rejoint sa place */
  --mvt-entre: 320ms;    /* ceci arrive */
  --mvt-sort: 150ms;     /* ceci a fini son travail */
  --mvt-attend: 1100ms;  /* c'est à vous : ça respire */
}


/* ─── LES COULEURS DU LOGO, POUR L'EDITEUR ET LE SITE SEULEMENT (2026-09-06) ──
   Relevees pixel par pixel sur kmoove-launcher/assets/kmoove-logo.png
   (plan directeur § 8, 3.3) : elles ne s'estiment pas, elles se lisent.
   Le MUR ne les voit jamais : `:root` ci-dessus reste la « soiree arcade »
   lisible a huit metres, et `controlerThemeClairHorsDuMur()` refuse qu'un
   jeton --km- entre dans une regle du bloc PARTAGE-PARTIE.

   ─── UNE SEULE SOURCE POUR TREIZE COULEURS (2026-09-07) ───────────────────
   Mounassib, en constatant que changer un bleu demandait de retoucher trois
   fichiers a la main sur le site : « il faut que les dossiers sur Git soient
   bien places pour que les couleurs, les logos soient bien dans un bon
   fichier ». Ce bloc, delimite par ses propres bornes de partage juste en
   dessous, est desormais la SEULE main qui ecrit ces treize couleurs.
   `npm run exporter-editeur` le recopie a DEUX endroits du site : dans
   public/editeur-partage/socle.css
   (via le bloc SOCLE plus large qui l'englobe) et, directement, dans
   public/kmoove-design.css. Avant cette date, ce dernier fichier
   redefinissait les huit couleurs de base a la main, et cinq teintes
   derivees (bordure, texte doux, succes, alerte, fond d'alerte) etaient
   recopiees une troisieme fois plus bas, dans le scope .ecran--editeur : un
   bleu retouche ici ne l'aurait pas change la-bas, en silence. Le scope
   .ecran--editeur reprend maintenant ces cinq teintes par var(), il ne les
   redefinit plus.

   ─── ET SIX TAILLES DE TEXTE, MEME CHEMIN (2026-09-07) ────────────────────
   « Les textes de l'éditeur sont beaucoup trop petits » (Mounassib) : la
   scène fixe 1920x1080 de l'éditeur, mise à l'échelle pour tenir dans la
   fenêtre reelle, rétrécissait TOUS ses textes du même facteur (voir la note
   sur `#scene` dans editeur-seance.html), jusqu'à 8,8px pour le plus petit.
   Six jetons, une seule fois : `--km-texte-xs` a `--km-texte-2xl`, chacun
   avec son role en commentaire. Ils voyagent par le MEME bloc que la
   palette, donc vers les MEMES deux fichiers : aucune ligne a ecrire a la
   main cote site. Le plancher, 16px, est celui sous lequel un texte n'est
   plus considere lisible (POLICE_MINIMUM_PX, tests/navigateur/
   mesure-debordements.js sur le site) : `controlerDebordements` refuse tout
   texte de l'editeur qui descendrait en dessous.
   PARTAGE-PALETTE-DEBUT */
:root {
  --km-cyan: #17C6E8;      /* le haut de l'anneau : etat positif, jamais du texte (2,0:1) */
  --km-bleu: #256AC7;      /* le milieu haut du K : l'action */
  --km-indigo: #3029B0;    /* le coeur des lettres : les liens */
  --km-violet: #5E17EB;    /* la signature : les titres */
  --km-magenta: #BB0CA5;   /* le bas des lettres : ce qui est choisi */
  --km-fond: #FFFFFF;      /* « surtout sur fond blanc » */
  --km-surface: #F4F6FB;   /* un gris a peine bleute pour les panneaux */
  --km-encre: #1B1F3A;     /* un bleu nuit pour le texte, jamais du noir pur */
  --km-degrade: linear-gradient(135deg, var(--km-magenta), var(--km-violet));
                           /* magenta vers violet : une seule fois par ecran,
                              le titre et le bouton principal, jamais ailleurs */

  /* Cinq teintes derivees des memes releves, pour l'alerte et les surfaces
     discretes du theme clair. Dans ce fichier (styles.css), le scope
     .ecran--editeur plus bas les reprend par var() : il ne les redefinit
     plus. Une copie de ce bloc qui voyage seule (public/kmoove-design.css,
     sur le site) n'a pas ce scope : elle n'a besoin que des couleurs. */
  --km-bordure: #D6DAE8;      /* une bordure claire */
  --km-texte-doux: #4A5070;   /* un texte secondaire, moins appuye que l'encre */
  --km-succes: #1B8F5A;       /* la meme validation qu'ailleurs sur le theme clair */
  --km-alerte: #B3261E;       /* l'alerte du theme clair */
  --km-alerte-fond: #FCEBEA;  /* son fond pale, toujours associe */

  /* Six tailles de texte (2026-09-07), decidees avec Mounassib : base 18px,
     titres de 24 a 40, plus rien sous 16. Voir la note au-dessus du bloc. */
  --km-texte-xs: 16px;   /* le plus petit texte autorise, nulle part en dessous */
  --km-texte-s: 18px;    /* la base : tout ce qui se lit couramment */
  --km-texte-m: 21px;    /* les intitules de reglage, les noms de template */
  --km-texte-l: 24px;    /* les titres de bloc */
  --km-texte-xl: 32px;   /* les titres d'ecran */
  --km-texte-2xl: 40px;  /* le titre du produit et celui d'une modale */
}
/* PARTAGE-PALETTE-FIN */

/* Le scope : l'editeur et SES modales (soeurs de la section dans #scene,
   d'ou le combinateur ~). Les memes NOMS de jetons, d'autres valeurs : aucune
   regle de l'editeur n'a a etre reecrite pour changer de theme, et le mur
   (#ecran-partie) ne voit rien de tout cela. */
.ecran--editeur, .ecran--editeur ~ .modale {
  --fond: var(--km-fond);
  --fond-profond: var(--km-surface);
  --fond-carte: var(--km-fond);
  --bordure: var(--km-bordure);
  --texte: var(--km-encre);
  --texte-doux: var(--km-texte-doux);
  --creme: var(--km-surface);
  --accent: var(--km-bleu);
  --accent-doux: var(--km-indigo);
  --succes: var(--km-succes);
  --or: #B8860B;
  --corail: var(--km-alerte);       /* l'alerte du theme clair : accompagne var(--km-alerte-fond) en fond */
  color: var(--texte);
  background: var(--fond);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* L'attribut hidden fait TOUJOURS foi, meme quand une classe pose un display. */
[hidden] { display: none !important; }

/* ─── CE QUE PORTE UNE CARTE : UN MOT, OU UNE COULEUR (2026-09-06) ──────────
   Ces deux regles vivent au SOCLE, pas au mur (PARTAGE-PARTIE) : elles ne
   dessinent RIEN de mur-specifique (aucun retournement, aucune position
   absolue — voir `.carte__face` juste apres, qui reste au mur). Elles disent
   seulement ce que `construireFaceDeCarte()` (src/logique/carte.js) pose
   dans une carte : le mot ou l'aplat de couleur. `construireFaceDeCarte()`
   dessine AUSSI la vignette de la grille et l'apercu de la modale de paire
   de l'editeur (plan directeur § 8, 3.4) : au socle, ces deux regles
   traversent l'export vers le site (`socle.css`) ; laissees au mur, l'editeur
   les aurait perdues en silence — un mot de carte s'y affichait sans aucune
   police ni couleur, une couleur de carte n'y remplissait rien (defaut trouve
   par le cas de navigateur « UN MOT S ECRIT EN DIRECT, COMME AU MUR »).
   Le mur les voit exactement pareil : rien n'y change, une regle deplacee
   dans le meme fichier reste la MEME regle. */
/* La taille de police est calculee par `construireFaceDeCarte()` (elle depend
   de la carte et de la longueur du mot) et ne descend jamais sous 54 px, soit
   les 40 pt de la regle du projet. Ici on ne fixe que ce qui ne depend pas de
   la mesure : le mot tient sur deux lignes au plus, centre, et ne deborde
   jamais. */
.carte__mot {
  width: 88%;
  text-align: center;
  font-weight: 800;
  line-height: 1.05;
  /* ⚠️ La FACE d'une carte est creme (--creme), pas sombre : y poser la
     couleur de texte de l'interface (--texte, claire) donnait un mot
     quasiment invisible — clair sur clair. Le defaut ne se voyait sur AUCUN
     test : le mot etait bien present et bien dimensionne, simplement illisible.
     Trouve en regardant la capture, le 2026-08-20. La couleur est desormais
     celle du DOS de la carte, contrastee sur le creme, et un test mesure le
     rapport de contraste. Une valeur LITTERALE, jamais un jeton de theme : une
     carte de memory est creme des DEUX cotes de l'export, mur comme editeur. */
  color: rgba(12, 10, 22, 0.92);
  /* ⚠️ UN MOT NE SE COUPE JAMAIS AU MILIEU (2026-09-08, regle generale).
     `overflow-wrap: break-word` se justifiait quand rien ne bornait la
     longueur d'un mot. Ce n'est plus vrai : l'editeur REFUSE un mot trop long
     pour sa carte en nommant la limite (`caracteresParCarte`,
     `caracteresParDate`, regle 41), et `construireFaceDeCarte` calcule
     desormais sa police sur la vraie part de boite. Un mot accepte TIENT : la
     cesure ne servait plus qu'a fabriquer des « LAP / IN ». Deux exceptions
     avaient deja ete ecrites une par une pour ce meme defaut (la date d'une
     frise le 2026-09-06, l'apercu de l'editeur le meme jour) : c'est le signal
     du § 3 bis 0 du CLAUDE.md qu'une decision vivait au mauvais endroit. Elle
     vit ici, une seule fois. Un mot a deux mots (« Noel 1962 ») passe toujours
     a la ligne, a son espace : c'est le seul retour acceptable. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Un aplat de couleur occupe la carte entiere : c'est la carte du Simon. */
.carte__couleur { width: 84%; height: 84%; border-radius: 14px; }