/* Design system « Roquette » — les seules valeurs brutes du projet vivent ici.
   Tout composant (css/app.css, et plus tard les cartes du jeu) passe par ces variables :
   c'est ce qui permettra au jeu de cartes de reprendre l'arbre sans tout redessiner.
   Documentation : docs/DESIGN.md. Vitrine : design.html. */

:root {
  /* ——— Blanc et vert très foncé (Eugène, 27/09/2026) ———
     Un blanc à peine teinté de vert, une encre vert-noir : sobre, profond, « maison de
     famille ». L'or ne sert plus qu'aux dorures des cartes (--or). */
  --papier: #f6f8f6;
  --papier-2: #e8eee9;      /* surfaces en retrait : champs, puces */
  --carte: #ffffff;
  --encre: #0c2a1f;         /* vert très foncé : le texte ET la couleur de la marque */
  --encre-2: #3d5a4e;
  --encre-3: #7a9086;
  --trait: #d6e0da;
  --accent: #0f3b2c;        /* boutons principaux, onglet actif, sélection */
  --accent-doux: #dfeae3;
  --voile: rgb(6 26 19 / 0.55);
  --sur-branche: #fff;      /* texte posé sur une couleur de branche ou sur l'accent */
  --or: #c8a24a;            /* dorure des cartes : cadre, numéro, dos */
  --or-clair: #f3e2a9;
  --or-sombre: #7a5c1c;
  /* La carte garde ses couleurs en mode sombre, comme une carte en carton : ces trois-là
     ne changent jamais. */
  --plaque: #f3efe4;        /* cartouche du nom */
  --texte-carte: #2c3f37;
  --texte-carte-2: #5b6b63;
  /* Grain de papier des cartes : un bruit fractal en SVG, pas une image à télécharger. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* ——— Jeu ———
     Couleurs hors des teintes de branche (principe 3 de DESIGN.md) : une alerte rouge ne
     doit jamais se lire « branche Élisabeth ». */
  --alerte: #c0392b;        /* erreur, propositions d'échange en attente */
  --booster-haut: #16513d;  /* le paquet fermé : vert de la marque et filet d'or */
  --booster-bas: #07231a;
  --booster-texte: #f3e2a9;

  /* ——— Lignées d'Henri-Paul = ses six enfants ———
     Le jeu ne couvre que sa descendance (donnees/jeu.json) : une seule couleur de branche
     pour 389 cartes serait monotone, on colore donc par lignée. */
  --l0: #b08a2e;  /* Henri-Paul et Ghislaine — or */
  --l1: #9b2c3c;  /* Henri — grenat */
  --l2: #2f5da8;  /* Roger — cobalt */
  --l3: #2e7d4f;  /* Denis — forêt */
  --l4: #1f7a80;  /* Jacques — sarcelle */
  --l5: #7a3e8e;  /* Geneviève — prune */
  --l6: #b4532a;  /* Hubert — rouille */

  /* ——— Branches = les 9 enfants d'Henry ———
     Chaque branche a sa couleur, comme un « type » de carte Pokémon. On garde des teintes
     sourdes, de pigment, pour rester dans le registre patrimoine (pas des aplats vifs). */
  --b0: #a8842c;  /* Henry — or */
  --b1: #9b2c3c;  /* Élisabeth — grenat */
  --b2: #2f5da8;  /* Henri-Paul — cobalt */
  --b3: #6b7280;  /* Roger — ardoise (mort en 1914, sans descendance) */
  --b4: #7c7466;  /* Louis — étain (mort en 1918, sans descendance) */
  --b5: #2e7d4f;  /* Dominique — forêt */
  --b6: #b7791f;  /* Jeanne — ocre */
  --b7: #1f7a80;  /* Germain — sarcelle */
  --b8: #7a3e8e;  /* Gonzague — prune */
  --b9: #b4532a;  /* Bernard — rouille */

  /* ——— Typographie ———
     Les noms en sérif (ils se lisent comme sur un faire-part), l'interface en sans. */
  --f-titre: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --f-texte: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: 12px;
  --t-s: 14px;
  --t-m: 16px;   /* jamais moins de 16 px dans un champ : iOS zoomerait la page */
  --t-l: 20px;
  --t-xl: 26px;
  --t-xxl: 32px;

  /* ——— Espace, rayons, ombres ——— */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;   /* gouttière de page sur téléphone */
  --e-5: 24px;
  --e-6: 32px;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;   /* rayon de carte : assez rond pour évoquer une carte à jouer */
  --r-rond: 999px;
  --ombre-1: 0 1px 2px rgb(42 33 25 / 0.06), 0 1px 1px rgb(42 33 25 / 0.04);
  --ombre-2: 0 6px 20px rgb(42 33 25 / 0.10), 0 2px 6px rgb(42 33 25 / 0.06);

  /* ——— Tactile ——— */
  --cible: 48px;          /* hauteur mini d'une zone à toucher (pouce, pas souris) */
  --barre-bas: 64px;      /* barre d'onglets, hors zone de sécurité iOS */
  --duree: 180ms;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Mode sombre : même papier, la nuit. Les couleurs de branche s'éclaircissent pour garder
   leur contraste sur fond sombre. Deux sélecteurs : le choix du système, et un forçage
   explicite par data-theme sur <html>. */
@media (prefers-color-scheme: dark) {
  /* Désactivé : clair par défaut, « Auto » est géré par js/theme.js. */
  :root[data-theme="auto-inutilise"] {
    /* Sombre NEUTRE (Eugène : « tout est trop vert ») : un anthracite à peine chaud, le
       vert n'apparaît que sur les boutons et les accents. */
    --papier: #121513;
    --papier-2: #1d201e;
    --carte: #191c1a;
    --encre: #eef1ef;
    --encre-2: #b3bbb7;
    --encre-3: #7f8884;
    --trait: #2b302d;
    --accent: #3f9a72;
    --accent-doux: #1f2b25;
    --voile: rgb(0 0 0 / 0.65);
    --sur-branche: #ffffff;
    --booster-haut: #16513d;
    --booster-bas: #07231a;
    --alerte: #e5604f;
    --b0: #d4b35c; --b1: #d8687a; --b2: #7ea3e6; --b3: #9ca3af; --b4: #aba392;
    --b5: #6cc08e; --b6: #e0a64d; --b7: #5bbcc2; --b8: #b884cc; --b9: #e38a60;
    --ombre-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --ombre-2: 0 8px 24px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  /* Sombre NEUTRE (Eugène : « tout est trop vert ») : un anthracite à peine chaud, le
     vert n'apparaît que sur les boutons et les accents. */
  --papier: #121513;
  --papier-2: #1d201e;
  --carte: #191c1a;
  --encre: #eef1ef;
  --encre-2: #b3bbb7;
  --encre-3: #7f8884;
  --trait: #2b302d;
  --accent: #3f9a72;
  --accent-doux: #1f2b25;
  --voile: rgb(0 0 0 / 0.65);
  --sur-branche: #ffffff;
  --booster-haut: #16513d;
  --booster-bas: #07231a;
  --alerte: #e5604f;
  --b0: #d4b35c; --b1: #d8687a; --b2: #7ea3e6; --b3: #9ca3af; --b4: #aba392;
  --b5: #6cc08e; --b6: #e0a64d; --b7: #5bbcc2; --b8: #b884cc; --b9: #e38a60;
  --ombre-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --ombre-2: 0 8px 24px rgb(0 0 0 / 0.5);
}

/* La couleur de branche se pose sur un élément par data-branche, et ses enfants lisent
   --branche : un composant n'a jamais à connaître le numéro. */
[data-branche="0"] { --branche: var(--b0); }
[data-branche="1"] { --branche: var(--b1); }
[data-branche="2"] { --branche: var(--b2); }
[data-branche="3"] { --branche: var(--b3); }
[data-branche="4"] { --branche: var(--b4); }
[data-branche="5"] { --branche: var(--b5); }
[data-branche="6"] { --branche: var(--b6); }
[data-branche="7"] { --branche: var(--b7); }
[data-branche="8"] { --branche: var(--b8); }
[data-branche="9"] { --branche: var(--b9); }

/* Lignées (jeu) : même mécanique que data-branche, la carte lit --branche. */
[data-lignee="0"] { --branche: var(--l0); }
[data-lignee="1"] { --branche: var(--l1); }
[data-lignee="2"] { --branche: var(--l2); }
[data-lignee="3"] { --branche: var(--l3); }
[data-lignee="4"] { --branche: var(--l4); }
[data-lignee="5"] { --branche: var(--l5); }
[data-lignee="6"] { --branche: var(--l6); }