/* ============================================================
   LES PETITES COLLECTIONS — tokens de direction artistique
   v1 · 31/08/2026 · système : DA.md · démonstration : DA-PROPOSITIONS.html
   Deux registres : VIVANT (aventure) et GRAVURE (carnet/leçon).
   Le contraste est l'identité ; l'or est le pont entre les deux.
   Contrastes texte annotés (ratio WCAG, calculé) : tous ≥ 4,5:1.
   ============================================================ */

/* ---------- Fontes (Google Fonts, toutes OFL) ----------
   <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=Lexend:wght@400;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,400&family=Spline+Sans+Mono:wght@500&display=swap" rel="stylesheet">
*/

:root {
  /* ===== TYPOGRAPHIE (commune aux deux registres) ===== */
  --fonte-titre-vivant: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --fonte-titre-gravure: 'Fraunces', 'Hoefler Text', Georgia, serif;
  --fonte-texte: 'Lexend', 'Hanken Grotesk', system-ui, sans-serif; /* dessinée pour la fluidité de lecture — choix dyslexie */
  --fonte-donnees: 'Spline Sans Mono', ui-monospace, Menlo, monospace;

  /* Échelle — corps ≥ 18px partout, interligne 1,6 : règle dure dyslexie */
  --texte-corps: 18px;
  --texte-grand: 22px;
  --texte-titre-3: 28px;
  --texte-titre-2: 38px;
  --texte-titre-1: 52px;
  --texte-etiquette: 14px;      /* étiquettes 1-3 mots seulement, avec --espacement-etiquette */
  --interligne: 1.6;
  --espacement-etiquette: 0.14em;
  --longueur-ligne-max: 60ch;

  /* ===== ESPACEMENTS ===== */
  --e1: 4px;  --e2: 8px;  --e3: 14px;  --e4: 22px;  --e5: 36px;  --e6: 58px;
  --cible-tactile-min: 44px;    /* aucun bouton en dessous */

  /* ===== RAYONS ===== */
  --rayon-vivant: 18px;         /* tout est rond côté aventure */
  --rayon-vivant-petit: 10px;
  --rayon-gravure: 2px;         /* le carnet est presque droit */

  /* ===== LE PONT : L'OR ===== */
  --or: #F2B23A;                /* pièces, récompenses, éclat côté vivant */
  --or-sombre: #C88A1E;
  --laiton: #B0833A;            /* le même or, assagi, côté gravure (héritage socle) */

  /* ============================================================
     REGISTRE VIVANT — variante A « Prairie solaire » (défaut)
     ============================================================ */
  --v-ciel-haut: #7ED3F0;
  --v-ciel-bas: #E3F7FB;
  --v-soleil: #FFD84D;
  --v-colline-1: #A6D94E;       /* la plus proche, la plus claire */
  --v-colline-2: #6FBC44;
  --v-colline-3: #3F8A2E;
  --v-herbe-ombre: #2E6B24;
  --v-fleur-1: #F4572E;         /* coquelicot */
  --v-fleur-2: #4D7BE8;         /* bleuet */
  --v-fleur-coeur: #3A2A18;
  --v-bois: #8A5A2E;            /* HUD, panneaux, manches d'outils */
  --v-bois-clair: #C89B62;
  --v-encre: #23301C;           /* texte sur fonds clairs — 12,9:1 sur blanc */
  --v-carte: #FFFFFF;           /* fond des cartouches de texte */
  --v-toast: #FFF9E8;
  --v-ombre-portee: 0 6px 0 rgba(46,107,36,.28);   /* ombre « posée », pas floue : côté jeu */
  --v-ombre-douce: 0 10px 30px rgba(35,48,28,.22);

  /* ===== REGISTRE GRAVURE (héritage socle maison) ===== */
  --g-parchemin: #F5EEE0;
  --g-parchemin-ombre: #EAE0C9; /* marges, tranche des pages */
  --g-encre: #2B2723;           /* 12,6:1 sur parchemin */
  --g-encre-douce: #57493C;     /* 6,3:1 sur parchemin — texte secondaire, jamais < 4,5:1 */
  --g-sanguine: #8A3A1F;        /* accent rare : numéro de planche, sceau */
  --g-filet: #B0833A;           /* = --laiton */
  --g-ombre-page: 0 14px 40px rgba(43,39,35,.28);
  /* fond studio macro des planches d'excellence (backdrop du moteur SVG) */
  --g-studio-haut: #1B2220;
  --g-studio-bas: #080A0B;
  --g-studio-halo: #2E4038;

  /* ===== ÉTATS & ACCESSIBILITÉ (communs) =====
     Rappel règle dure : un état = couleur + FORME + LIBELLÉ, jamais la couleur seule. */
  --ok: #0E8A52;
  --alerte: #C2401C;
  --anneau-focus: 0 0 0 4px #FFFFFF, 0 0 0 8px #1B45F0;   /* visible sur tout fond */
  --duree-rituel: 1500ms;       /* capture → gravure : la bascule entre registres */
  --duree-rebond: 240ms;
}

/* ============================================================
   REGISTRE VIVANT — variante B « Sous-bois d'aventure »
   Poser data-palette="sousbois" sur le conteneur de scène.
   ============================================================ */
[data-palette="sousbois"] {
  --v-ciel-haut: #1F5E5A;       /* canopée profonde */
  --v-ciel-bas: #3E8C77;
  --v-soleil: #EAF7C9;          /* trouée de lumière */
  --v-colline-1: #6FBF6A;       /* mousse */
  --v-colline-2: #2F8C5A;       /* fougère */
  --v-colline-3: #1C5E42;
  --v-herbe-ombre: #123E2E;
  --v-fleur-1: #F0705A;         /* champignon corail */
  --v-fleur-2: #FFC86B;         /* luciole */
  --v-fleur-coeur: #2A1B10;
  --v-bois: #5C3A22;
  --v-bois-clair: #A9805A;
  --v-encre: #F4F0E2;           /* texte clair sur fonds profonds — 8,1:1 sur --v-ciel-haut */
  --v-carte: #14413D;           /* cartouches sombres, texte --v-encre : 9,6:1 */
  --v-toast: #0F332F;
  --v-ombre-portee: 0 6px 0 rgba(8,26,22,.5);
  --v-ombre-douce: 0 10px 30px rgba(5,18,15,.45);
}

/* ============================================================
   BASES D'APPLICATION — à consommer telles quelles par l'app
   ============================================================ */
.registre-vivant {
  font-family: var(--fonte-texte);
  font-size: var(--texte-corps);
  line-height: var(--interligne);
  color: var(--v-encre);
}
.registre-vivant h1, .registre-vivant h2, .registre-vivant .bouton {
  font-family: var(--fonte-titre-vivant);
}
.registre-gravure {
  font-family: var(--fonte-texte);      /* le corps reste lisible : Fraunces = titres seulement */
  font-size: var(--texte-corps);
  line-height: var(--interligne);
  background: var(--g-parchemin);
  color: var(--g-encre);
}
.registre-gravure h1, .registre-gravure h2, .registre-gravure .latin {
  font-family: var(--fonte-titre-gravure);
}
:is(button, a, [tabindex]):focus-visible { outline: none; box-shadow: var(--anneau-focus); }