/* =====================================================================
   socle.css — le socle visuel commun de la plateforme.

   CE FICHIER N'INVENTE AUCUNE DIRECTION ARTISTIQUE. Toutes les valeurs
   qu'il porte sont RELEVÉES de ce qui existe déjà et de ce qui a été
   validé — jamais redessinées. La provenance de chaque famille est
   écrite en face d'elle, plus bas.

   POURQUOI IL EXISTE. Le dépôt ne portait aucune feuille commune : les
   trois CSS existants sont des habillages cantonnés (la carte BOP, les
   formats d'interaction, les deux boutons de retour). Chaque page
   réimplémentait donc son habillage dans un <style> local, et l'inventaire
   du 22/08/2026 a montré le résultat : DEUX JEUX DE JETONS RIVAUX portant
   LES MÊMES NOMS avec DES VALEURS DIFFÉRENTES — « --or » vaut #d9ad5c sur
   treize pages et #EAB939 sur quatre.

   ─────────────────────────────────────────────────────────────────────
   DEUX RÈGLES DE SÛRETÉ, ET ELLES EXPLIQUENT TOUTE LA FORME DU FICHIER
   ─────────────────────────────────────────────────────────────────────
   1. LE PRÉFIXE EST « --mrs- », PAS « --mr- ». interactions.css définit
      DÉJÀ --mr-or, --mr-creme, --mr-encre, --mr-violet et consorts, avec
      les valeurs du jeu A. Réutiliser ce préfixe ici ferait s'affronter
      deux définitions sur toute page chargeant les deux feuilles — à
      commencer par player.html, qui est hors périmètre et ne doit pas
      bouger d'un pixel. Un préfixe distinct rend la collision impossible
      plutôt qu'improbable.

   2. CE FICHIER NE TOUCHE AUCUN ÉLÉMENT NU. Pas de body, pas de h1, pas
      de button, pas de a. Uniquement des variables et des classes
      préfixées « .mrs- ». Le charger sur une page NE CHANGE DONC RIEN
      tant que cette page n'emploie pas une de ces classes. C'est ce qui
      permet de le livrer seul, puis de raccorder les pages UNE PAR UNE,
      au lieu d'en repeindre dix-huit d'un coup.

   L'INDIRECTION « var(--jeton-de-page, valeur) » N'EST PAS UN ORNEMENT :
   une page qui déclare déjà --or garde SA valeur, le socle ne la lui
   reprend pas. Le raccordement se fait quand la page le décide, en
   changeant son propre jeton — pas quand elle charge cette feuille.
   ===================================================================== */

:root{
  /* ── Couleurs : RELEVÉES DE LA DIRECTION ARTISTIQUE VALIDÉE ──────────
     Valeurs identiques à celles de carte-bop-aptitude.css (--bop-*) et
     des quatre pages déjà au bon niveau : ma-carte, verifier-carte,
     creation, relecture. Ce sont les couleurs consignées au Cerveau pour
     le quiz final : violet #5F2F8A, carmin #C8203D, or #EAB939. */
  --mrs-encre:        var(--encre, #1A1A1A);
  --mrs-creme:        var(--creme, #F4F1E0);
  --mrs-or:           var(--or, #EAB939);
  --mrs-or-clair:     var(--or-clair, #F3CE6E);
  --mrs-carmin:       var(--carmin, #C8203D);
  --mrs-violet:       var(--violet, #5F2F8A);

  /* Surfaces sombres, relevées de creation.html et relecture.html. */
  --mrs-surface:      var(--surface, #212121);
  --mrs-surface-haute: var(--surface-haute, #282828);
  --mrs-bord:         var(--bord, #383838);

  /* Appuis crème, relevés des deux mêmes pages. */
  --mrs-creme-bord:   var(--creme-bord, #DED8C0);
  --mrs-creme-appui:  var(--creme-appui, #EAE5D0);

  /* ── Fond de planche : RELEVÉ DE LA BASE DÉJÀ COMMUNE ───────────────
     Douze pages portent exactement, et à l'identique :
       radial-gradient(ellipse at top, #241f2c 0%, var(--noir) 60%)
     C'est la seule chose qui était déjà partagée par la majorité des
     écrans. Elle est reprise telle quelle, en jetons. */
  --mrs-fond-haut:    var(--noir2, #241f2c);
  --mrs-fond:         var(--noir, #18141d);

  /* ── Typographie : JETONS SURCHARGEABLES, JAMAIS IMPOSÉS ────────────
     creation.html et relecture.html emploient Atkinson Hyperlegible, et
     CE N'EST PAS UNE DÉRIVE À CORRIGER : ce sont les écrans de l'atelier,
     et Charlotte est dyslexique — cette police est dessinée pour cela.
     Le socle ne pose donc jamais de police sur un élément : il n'offre
     qu'un jeton, que chaque page garde le droit de surcharger. */
  --mrs-police:       var(--font-body, 'Inter', system-ui, sans-serif);
  --mrs-police-titre: var(--font-display, 'Playfair Display', Georgia, serif);

  /* ── Géométrie et profondeur, relevées de l'existant ────────────── */
  --mrs-rayon:        var(--rayon, 14px);
  --mrs-rayon-plein:  999px;
  --mrs-interligne:   var(--interligne, 1.85);
  --mrs-ombre:        0 4px 14px rgba(0,0,0,.34);
  --mrs-ombre-haute:  0 7px 20px rgba(0,0,0,.42);

  /* La durée d'entrée des formats d'interaction, reprise à l'identique
     pour que le socle respire au même rythme que le lecteur. */
  --mrs-duree:        300ms;
}

/* =====================================================================
   CLASSES UTILITAIRES — rien ne s'applique sans être demandé
   ===================================================================== */

.mrs-fond-planche{
  background: radial-gradient(ellipse at top, var(--mrs-fond-haut) 0%, var(--mrs-fond) 60%);
  color: var(--mrs-creme);
}

.mrs-carte{
  background: var(--mrs-surface);
  border: 1px solid var(--mrs-bord);
  border-radius: var(--mrs-rayon);
  box-shadow: var(--mrs-ombre);
}
.mrs-carte-haute{ background: var(--mrs-surface-haute); }

.mrs-titre{ font-family: var(--mrs-police-titre); color: var(--mrs-creme); }
.mrs-texte{ font-family: var(--mrs-police); line-height: var(--mrs-interligne); color: var(--mrs-creme); }
.mrs-or{ color: var(--mrs-or); }
.mrs-carmin{ color: var(--mrs-carmin); }

/* CIBLE TACTILE : 44 px de côté au minimum, sur tout ce qui se clique.
   C'est la mesure déjà tenue par les quatre mécaniques premium et par
   les boutons de retour ; le socle ne fait que la rendre reprenable. */
.mrs-bouton{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 11px 18px;
  font: inherit; font-family: var(--mrs-police); font-weight: 700;
  border-radius: var(--mrs-rayon-plein); border: 2px solid transparent;
  cursor: pointer; box-shadow: var(--mrs-ombre);
  transition: transform var(--mrs-duree) ease, box-shadow var(--mrs-duree) ease, background var(--mrs-duree) ease;
}
.mrs-bouton:hover{ transform: translateY(-2px); box-shadow: var(--mrs-ombre-haute); }
.mrs-bouton-or{ background: var(--mrs-or); color: var(--mrs-encre); }
.mrs-bouton-fantome{ background: transparent; color: var(--mrs-or); border-color: var(--mrs-or); }

/* L'anneau de mise au point est doré et détaché : sur fond sombre comme
   sur fond crème, il reste visible sans être confondu avec une bordure
   du produit. Même valeur que celle déjà employée par retours.css. */
.mrs-bouton:focus-visible,
.mrs-lien:focus-visible{ outline: 3px solid var(--mrs-or); outline-offset: 3px; }

.mrs-lien{ color: var(--mrs-or); text-decoration: none; border-bottom: 1px solid transparent; }
.mrs-lien:hover{ border-bottom-color: var(--mrs-or); }

.mrs-etiquette{
  display: inline-block; padding: 4px 12px;
  border-radius: var(--mrs-rayon-plein);
  border: 1px solid var(--mrs-or); color: var(--mrs-or);
  font-size: .82rem; font-weight: 700;
}

/* ── Animation d'entrée ────────────────────────────────────────────────
   « Jamais figée » est une exigence du produit, mais elle ne doit jamais
   se payer en accessibilité : TOUT S'ARRÊTE sous mouvement réduit, et
   rien d'informatif ne dépend du mouvement. */
@keyframes mrs-entree{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
.mrs-entree{ animation: mrs-entree var(--mrs-duree) ease both; }

@media (prefers-reduced-motion: reduce){
  .mrs-entree{ animation: none; }
  .mrs-bouton{ transition: none; }
  .mrs-bouton:hover{ transform: none; }
}