/* J-GAMES · charte commune des jeux (31 octobre 2026). Chaque jeu charge ce fichier, puis son propre CSS.
   Base tirée de l'accueil (version bleue) : papier blanc, encre noire, pilules bleues à contour bleu marine.
   Un jeu choisit sa couleur d'accent en redéfinissant --jeu, --jeu-fonce et --jeu-texte (voir _da/CHARTE-JEUX.md). */

@font-face{font-family:"Nunito";src:url("fonts/nunito.ttf") format("truetype");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Amatic SC";src:url("fonts/amatic-sc-bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  /* Base de l'accueil */
  --jg-papier:#fff;
  --jg-encre:#1a1a1a;
  --jg-marine:#172441;
  --jg-gris:#565656;
  --jg-ligne:#e3e5ea;
  --jg-bleu:#315cff;
  --jg-bleu-fonce:#2147e8;
  --jg-rouge:#e5383b;
  /* Accents disponibles, un par jeu (texte bleu marine dessus, sauf bleu et violet : texte blanc) */
  --jg-jaune:#ffe45c;
  --jg-rose:#ff9ecb;
  --jg-vert:#2bb673;
  --jg-orange:#ff8a1f;
  --jg-violet:#7c4dff;
  /* États de réponse, toujours accompagnés d'un mot ou d'un symbole */
  --jg-juste:#12a150;
  --jg-rate:#e5383b;
  /* Accent du jeu : bleu J-GAMES par défaut */
  --jeu:var(--jg-bleu);
  --jeu-fonce:var(--jg-bleu-fonce);
  --jeu-texte:#fff;
  /* Lettres : Nunito pour l'interface, Amatic SC (les lettres du logo) pour les titres et les grands chiffres */
  --jg-police:"Nunito",Arial,Helvetica,sans-serif;
  --jg-manuscrit:"Amatic SC","Nunito",Arial,sans-serif;
  --jg-contour:2px solid var(--jg-marine);
  --jg-ombre:0 14px 30px rgba(23,36,65,.14);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--jg-papier);color:var(--jg-encre);font:500 16px/1.4 var(--jg-police);-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

/* Bouton principal : pilule de la couleur du jeu, contour bleu marine (comme « Jouer » sur l'accueil). */
.jg-bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border:var(--jg-contour);border-radius:999px;background:var(--jeu);color:var(--jeu-texte);font:800 17px/1 var(--jg-police);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,transform .15s}
.jg-bouton:hover{background:var(--jeu-fonce)}
.jg-bouton:active{transform:scale(.97)}
.jg-bouton:disabled{opacity:.45;cursor:default;transform:none}
/* Bouton secondaire : papier blanc, texte bleu marine. */
.jg-bouton--clair{background:var(--jg-papier);color:var(--jg-marine)}
.jg-bouton--clair:hover{background:#eef1ff}
/* Bouton icône rond (micro, son…), 48 px pour le doigt. */
.jg-bouton--rond{width:48px;padding:0}
.jg-bouton svg{width:22px;height:22px;flex:none}

/* Champ de saisie en pilule, assez haut pour le pouce. */
.jg-champ{min-width:0;min-height:52px;padding:0 18px;border:var(--jg-contour);border-radius:999px;background:var(--jg-papier);color:var(--jg-encre);font:700 20px/1 var(--jg-police)}
.jg-champ::placeholder{color:#8d93a1;font-weight:600}

:where(.jg-bouton,.jg-champ,a,button,[tabindex]):focus-visible{outline:3px solid var(--jg-marine);outline-offset:3px}
/* A field being typed in looks the same as at rest: only the blinking caret shows it. */
.jg-champ:focus-visible{outline:none}

/* Titres et grands chiffres écrits à la main. */
.jg-manuscrit{font-family:var(--jg-manuscrit);font-weight:700;letter-spacing:.02em}

/* Texte réservé aux lecteurs d'écran. */
.jg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}