/* quentyx-hora / themes : LES JETONS DE THEME, PARTAGES.
 *
 * EXTRAIT D `index.html` LE 2026-09-21, SANS UNE VALEUR CHANGEE. Anthony, en
 * regardant la page d inscription : « je ne vois pas les reliefs ? »
 *
 * CE QUE CA CORRIGE, ET C ETAIT MA FAUTE. J avais ecrit que la page
 * d inscription n avait pas a porter le systeme de themes, au motif qu elle se
 * voit une fois. C etait faux deux fois : le RELIEF n est pas un theme en
 * attente d arbitrage, c est une matiere DECIDEE par Anthony les 16 et 17/09 ;
 * et une page qui ne ressemble pas au produit est la premiere chose qu on voit
 * du produit.
 *
 * POURQUOI UN FICHIER ET PAS UNE COPIE. Recopier soixante lignes de jetons
 * dans une seconde page en ferait un second systeme de design, qui divergerait
 * du premier a la premiere retouche. « Une regle recopiee a trois endroits
 * diverge » : c est la loi de la maison, elle vaut aussi pour des couleurs.
 *
 * L ORDRE DE CASCADE EST PRESERVE : ce fichier est lie AVANT le `<style>` de
 * la page, donc il arrive exactement la ou ces regles etaient. La preuve n est
 * pas une opinion : la reconstruction a l identique a ete verifiee.
 */

/* ── LES THEMES, REFONTE DU 2026-09-17 ─────────────────────────────────────
   Portes depuis `maquette-2026.html`, ou Anthony les a choisis un par un les
   16 et 17/09. Ce qui y a ete DECIDE : la matiere MAT, plus de carres
   d initiale, la FENETRE facon Linear qui commence sous le titre de la page,
   et DIX palettes a comparer a l usage. Aucune n est encore « la bonne ».

   LE VOCABULAIRE HISTORIQUE EST GARDE (--fond, --fond-2, --encre a --encre-4,
   --filet, --filet-2, --voile, --barre) : `app.js` et ses styles en ligne s en
   servent partout, et un theme ne doit rien casser d autre que sa teinte. Il
   s y AJOUTE la matiere de la maquette :
     --fond-page   le sol, sous le rail et autour de la fenetre
     --fond        la fenetre, ou vit le contenu
     --fond-carte  les cartes, les menus, les pupitres
     --fond-haut   ce qui se pose sur une carte (code, champ, pastille)
     --fond-survol une carte sous le pointeur
     --carte-filet, --carte-ombre, --carte-ombre-haut, --ombre, --eclat, --creux
     --relief-bas, --fenetre-filet, --fenetre-ombre, --voile-modal
   AUCUNE NE VAUT none : dans une liste d ombres, une valeur invalide fait tomber
   la declaration ENTIERE, en silence. Une ombre vide s ecrit
   0 0 0 0 transparent.

   LE DEFAUT RESTE AU :root, et c est le sombre Black Minimal : attribut absent,
   theme inconnu, stockage refuse, la page rend quand meme. */
:root {
  color-scheme: dark;
  --fond-page:   #0A0A0A;
  --fond:        #0F0F0F;
  --fond-carte:  #1C1C1C;
  --fond-haut:   #252525;
  --fond-survol: #2F2F2F;
  --fond-2:      #252525;
  --encre:   #EDEDED;
  --encre-2: rgba(237,237,237,.74);
  --encre-3: rgba(237,237,237,.58);
  --encre-4: rgba(237,237,237,.48);
  --filet:   rgba(255,255,255,.12);
  --filet-2: rgba(255,255,255,.07);
  --voile:   rgba(255,255,255,.05);
  --barre:      #333333;
  --barre-vive: #4A4A4A;
  --accent-doux: rgba(255,255,255,.08);
  --carte-filet: #262626;
  --carte-ombre: 0 0 0 0 transparent;
  --carte-ombre-haut: 0 10px 30px rgba(0,0,0,.45);
  --ombre: 0 28px 70px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5);
  --eclat: inset 0 1px 0 rgba(255,255,255,.06);
  --creux: inset 0 0 0 1px rgba(255,255,255,.07);
  --relief-bas: 0 0 0 0 transparent;
  --fenetre-filet: rgba(255,255,255,.07);
  --fenetre-ombre: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 40px rgba(0,0,0,.35);
  --voile-modal: rgba(0,0,0,.58);
  --lumiere: transparent;
  --penombre: transparent;

  /* LE SYSTEME TYPOGRAPHIQUE QUENTYX, enfin branche : Archivo pour la
     mecanique, Literata pour la lecture, JetBrains Mono pour les nombres et
     les coordonnees. Les trois sont servis depuis ce domaine. */
  --lecture:   'Literata', ui-serif, Georgia, "Times New Roman", serif;
  --interface: 'Archivo', 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chiffre:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rail: 286px;
  --cote: 428px;
  --pas: 8px;
  --rayon: 16px;
  --rayon-petit: 10px;
}

/* CLAIR : trois couleurs d Anthony, #1C1C1C, #EEF0F2, #FAFAFF. La seule marche
   entre les deux clairs va aux CARTES ; la fenetre tient par son filet. */
html[data-theme="clair"] {
  color-scheme: light;
  --fond-page:   #EEF0F2;
  --fond:        #EEF0F2;
  --fond-carte:  #FAFAFF;
  --fond-haut:   #EEF0F2;
  --fond-survol: #FFFFFF;
  --fond-2:      #EEF0F2;
  --encre:   #1C1C1C;
  --encre-2: rgba(28,28,28,.80);
  --encre-3: rgba(28,28,28,.64);
  --encre-4: rgba(28,28,28,.56);
  --filet:   rgba(28,28,28,.14);
  --filet-2: rgba(28,28,28,.08);
  --voile:   rgba(28,28,28,.05);
  --barre:      #C9CCD1;
  --barre-vive: #A3A7AE;
  --accent-doux: rgba(28,28,28,.07);
  --carte-filet: rgba(28,28,28,.09);
  --carte-ombre-haut: 0 10px 28px rgba(28,28,28,.08);
  --ombre: 0 24px 60px rgba(28,28,28,.12), 0 2px 6px rgba(28,28,28,.08);
  --eclat: inset 0 1px 0 rgba(255,255,255,.7);
  --creux: inset 0 0 0 1px rgba(28,28,28,.08);
  --fenetre-filet: rgba(28,28,28,.10);
  --fenetre-ombre: 0 1px 2px rgba(28,28,28,.06), 0 12px 36px rgba(28,28,28,.08);
  --voile-modal: rgba(28,28,28,.28);
}
/* Sur un sol deja #EEF0F2, une surface haute en #EEF0F2 disparait. */
html[data-theme="clair"] :is(.colonne-rail, .entete, #cote) { --fond-haut: #FAFAFF; }

/* BLANC : la version claire du sombre, des nuances de blanc, sans teinte.
   HORS DU SELECTEUR depuis le 2026-09-17, « pour le moment ». Garde ici pour
   pouvoir revenir d un mot, comme AGENT et GIRLY plus bas. */
html[data-theme="blanc"] {
  color-scheme: light;
  --fond-page:   #F5F5F5;
  --fond:        #FAFAFA;
  --fond-carte:  #FFFFFF;
  --fond-haut:   #F5F5F5;
  --fond-survol: #FFFFFF;
  --fond-2:      #F2F2F2;
  --encre:   #121212;
  --encre-2: rgba(18,18,18,.78);
  --encre-3: rgba(18,18,18,.62);
  --encre-4: rgba(18,18,18,.55);
  --filet:   rgba(0,0,0,.12);
  --filet-2: rgba(0,0,0,.07);
  --voile:   rgba(0,0,0,.04);
  --barre:      #D4D4D4;
  --barre-vive: #ABABAB;
  --accent-doux: rgba(0,0,0,.06);
  --carte-filet: rgba(0,0,0,.08);
  --carte-ombre-haut: 0 10px 28px rgba(0,0,0,.07);
  --ombre: 0 24px 60px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07);
  --eclat: inset 0 1px 0 rgba(255,255,255,.8);
  --creux: inset 0 0 0 1px rgba(0,0,0,.07);
  --fenetre-filet: rgba(0,0,0,.08);
  --fenetre-ombre: 0 1px 2px rgba(0,0,0,.05), 0 10px 32px rgba(0,0,0,.06);
  --voile-modal: rgba(0,0,0,.24);
}
html[data-theme="blanc"] :is(.colonne-rail, .entete) { --fond-haut: #FFFFFF; }

/* LES QUATRE RELIEFS partagent leurs jetons de forme ; chacun ne redefinit que
   sa lumiere, son ombre et son sol. NEOMORPHISME : les surfaces ont la couleur
   du sol, c est la lumiere qui les dessine. */
html[data-theme="relief"], html[data-theme="relief-sombre"],
html[data-theme="relief-rose"], html[data-theme="relief-verre"], html[data-theme="relief-heure"] {
  color-scheme: light;
  --relief-sol: #F0F2F5;
  --lumiere:    #FFFFFF;
  --penombre:   rgba(166,176,194,.55);
  --fond-page:   var(--relief-sol);
  --fond:        var(--relief-sol);
  --fond-carte:  var(--relief-sol);
  --fond-haut:   var(--relief-sol);
  --fond-survol: var(--relief-sol);
  --fond-2:      var(--relief-sol);
  --encre:   #121212;
  --encre-2: rgba(18,18,18,.78);
  --encre-3: rgba(18,18,18,.62);
  --encre-4: rgba(18,18,18,.55);
  --filet:   rgba(0,0,0,.10);
  --filet-2: rgba(0,0,0,.06);
  --voile:   rgba(0,0,0,.035);
  --barre:      #C8CDD6;
  --barre-vive: #A3AAB6;
  --accent-doux: transparent;
  --carte-filet: transparent;
  --relief-bas:  -3px -3px 7px var(--lumiere), 3px 3px 7px var(--penombre);
  --carte-ombre: -6px -6px 14px var(--lumiere), 6px 6px 14px var(--penombre);
  --carte-ombre-haut: -9px -9px 20px var(--lumiere), 9px 9px 20px var(--penombre);
  --ombre:       -10px -10px 24px var(--lumiere), 10px 10px 24px var(--penombre);
  --creux:       inset 3px 3px 7px var(--penombre), inset -3px -3px 7px var(--lumiere);
  --eclat:       var(--relief-bas);
  --fenetre-filet: transparent;
  --fenetre-ombre: -8px -8px 22px var(--lumiere), 8px 8px 22px var(--penombre);
  --voile-modal: rgba(240,242,245,.55);
}
/* RELIEF SOMBRE : Charcoal, car sur un presque-noir l ombre n a rien a assombrir.
   PLUS NOIR, 2026-09-27. Anthony : « un peu plus noir sans perdre le neomorphisme ».
   Le relief ne tient pas a la teinte du sol, il tient aux ECARTS : sol -> lumiere +14
   niveaux (1C -> 2A avant, 12 -> 20 maintenant), sol -> ombre -18 (1C -> 0A avant,
   12 -> 00 maintenant). Tout descend de 10 niveaux, les ecarts restent : c est la voie
   que `reflexions-contexte.md` § 11.2 designait (« le modele halo peut continuer a
   descendre »). Valeurs d avant : #1C1C1C, #2A2A2A, rgba(10,10,10,.92). */
html[data-theme="relief-sombre"] {
  color-scheme: dark;
  --relief-sol: #121212;
  --lumiere:    #202020;
  --penombre:   rgba(0,0,0,.95);
  --encre:   #EDEDED;
  --encre-2: rgba(237,237,237,.74);
  --encre-3: rgba(237,237,237,.58);
  --encre-4: rgba(237,237,237,.50);
  --filet:   rgba(255,255,255,.10);
  --filet-2: rgba(255,255,255,.06);
  --voile:   rgba(255,255,255,.04);
  --barre:      #3A3A3A;
  --barre-vive: #555555;
  --fenetre-ombre: -8px -8px 22px rgba(255,255,255,.03), 8px 8px 22px rgba(0,0,0,.75);
  --voile-modal: rgba(0,0,0,.58);
}
/* ROSE : #EE9CA7 et #FFDDE1, le sol fonce d un quart pour que le relief se voie,
   des ombres roses et courtes, un texte prune. */
html[data-theme="relief-rose"] {
  --rose:       #EE9CA7;
  --rose-sol:   #FBCDD2;
  --prune:      #4A2530;
  --relief-sol: var(--rose-sol);
  --lumiere:    rgba(255,242,245,.85);
  --penombre:   rgba(214,118,134,.26);
  --encre:   var(--prune);
  --encre-2: rgba(74,37,48,.82);
  --encre-3: rgba(74,37,48,.70);
  --encre-4: rgba(74,37,48,.64);
  --filet:   rgba(74,37,48,.14);
  --filet-2: rgba(74,37,48,.08);
  --voile:   rgba(74,37,48,.05);
  --barre:      #EBA5AF;
  --barre-vive: #D98795;
  --relief-bas:  -2px -2px 5px var(--lumiere), 2px 2px 6px var(--penombre);
  --carte-ombre: -3px -3px 8px var(--lumiere), 4px 5px 12px var(--penombre);
  --carte-ombre-haut: -4px -4px 12px var(--lumiere), 6px 8px 20px rgba(214,118,134,.30);
  --ombre:       -4px -4px 12px var(--lumiere), 6px 8px 20px rgba(214,118,134,.30);
  --creux:       inset 2px 2px 4px rgba(214,118,134,.24), inset -2px -2px 4px rgba(255,246,248,.75);
  --eclat:       var(--relief-bas);
  --fenetre-filet: rgba(255,255,255,.40);
  --fenetre-ombre: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 24px rgba(214,118,134,.16);
  --voile-modal: rgba(255,221,225,.55);
  --degrade-fond: linear-gradient(90deg, var(--rose), var(--rose-sol));
  --bombe: linear-gradient(135deg, color-mix(in oklab, var(--rose-sol), #fff 30%), color-mix(in oklab, var(--rose-sol), var(--rose) 14%));
}
/* RELIEF HEURE : les decalages suivent l heure, poses par le script. */
html[data-theme="relief-heure"] {
  --sx: 6px; --sy: 6px; --sb: 14px;
  --relief-bas:  calc(var(--sx) * -.5) calc(var(--sy) * -.5) calc(var(--sb) * .5) var(--lumiere), calc(var(--sx) * .5) calc(var(--sy) * .5) calc(var(--sb) * .5) var(--penombre);
  --carte-ombre: calc(var(--sx) * -1) calc(var(--sy) * -1) var(--sb) var(--lumiere), var(--sx) var(--sy) var(--sb) var(--penombre);
  --carte-ombre-haut: calc(var(--sx) * -1.5) calc(var(--sy) * -1.5) calc(var(--sb) * 1.4) var(--lumiere), calc(var(--sx) * 1.5) calc(var(--sy) * 1.5) calc(var(--sb) * 1.4) var(--penombre);
  --ombre:       calc(var(--sx) * -1.6) calc(var(--sy) * -1.6) calc(var(--sb) * 1.6) var(--lumiere), calc(var(--sx) * 1.6) calc(var(--sy) * 1.6) calc(var(--sb) * 1.6) var(--penombre);
  --creux:       inset calc(var(--sx) * .5) calc(var(--sy) * .5) calc(var(--sb) * .5) var(--penombre), inset calc(var(--sx) * -.5) calc(var(--sy) * -.5) calc(var(--sb) * .5) var(--lumiere);
  --eclat:       var(--relief-bas);
  --fenetre-ombre: calc(var(--sx) * -1.2) calc(var(--sy) * -1.2) calc(var(--sb) * 1.5) var(--lumiere), calc(var(--sx) * 1.2) calc(var(--sy) * 1.2) calc(var(--sb) * 1.5) var(--penombre);
}
/* RELIEF VERRE : le relief clair, plus le verre sur ce qui flotte. */
html[data-theme="relief-verre"] {
  /* LE VOILE DE LA RECHERCHE A SON JETON depuis le 2026-09-18 : ecrit en dur, il
     etait la seule couleur hors palette du fichier une fois le profil Vera
     rempli. Un jeton se declare, une valeur en dur se cherche. */
  --verre-voile-recherche: rgba(20,24,32,.26);
  --verre-voile: rgba(255,255,255,.20);
  --verre-flou:  9px;
  --verre-arete: inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(255,255,255,.40), inset 0 0 16px rgba(255,255,255,.30);
  --verre-porte: 0 12px 32px rgba(120,132,152,.26), 0 1px 3px rgba(120,132,152,.18);
}

/* AGENT : repris de l ancienne palette, le vert porte la mecanique.
   HORS DU SELECTEUR depuis le 2026-09-17. */
html[data-theme="agent"] {
  color-scheme: dark;
  --fond-page:   #05070a;
  --fond:        #05070a;
  --fond-carte:  #0b1014;
  --fond-haut:   #0f161b;
  --fond-survol: #121b21;
  --fond-2:      #0f161b;
  --encre:   #e2e9ec;
  --encre-2: rgba(226,233,236,.70);
  --encre-3: rgba(94,242,142,.80);
  --encre-4: rgba(94,242,142,.62);
  --filet:   rgba(94,242,142,.20);
  --filet-2: rgba(94,242,142,.10);
  --voile:   rgba(94,242,142,.06);
  --barre:      #1d6b3f;
  --barre-vive: #2f9e5b;
  --accent-doux: rgba(94,242,142,.10);
  --carte-filet: rgba(94,242,142,.14);
  --fenetre-filet: rgba(94,242,142,.14);
}
/* GIRLY : repris de l ancienne palette, le rose aux surfaces, l or a la mecanique.
   HORS DU SELECTEUR depuis le 2026-09-17. */
html[data-theme="girly"] {
  color-scheme: light;
  --fond-page:   #ffeef4;
  --fond:        #ffeef4;
  --fond-carte:  #ffe0ea;
  --fond-haut:   #ffd3e2;
  --fond-survol: #ffd3e2;
  --fond-2:      #ffe0ea;
  --encre:   #45142f;
  --encre-2: rgba(69,20,47,.76);
  --encre-3: #8f6200;
  --encre-4: #8f6200;
  --filet:   rgba(214,26,120,.26);
  --filet-2: rgba(214,26,120,.13);
  --voile:   rgba(214,26,120,.08);
  --barre:      #f4aecb;
  --barre-vive: #e0709f;
  --accent-doux: rgba(214,26,120,.10);
  --carte-filet: rgba(214,26,120,.18);
  --carte-ombre-haut: 0 10px 28px rgba(214,26,120,.12);
  --ombre: 0 24px 60px rgba(69,20,47,.14), 0 2px 6px rgba(69,20,47,.08);
  --eclat: inset 0 1px 0 rgba(255,255,255,.6);
  --fenetre-filet: rgba(214,26,120,.18);
  --fenetre-ombre: 0 10px 32px rgba(69,20,47,.08);
  --voile-modal: rgba(69,20,47,.24);
}