/* app/static/css/tokens.css
   Jetons de design : themes clair/sombre + densites compacte/confort.

   Valeurs copiees de "design interface/PC/markup (3).html" ligne 290
   (theme sombre, verbatim) et de applyTheme() dans
   "design interface/PC/logic (3).js" (theme clair + densites).
   Ne rien inventer ici : toute valeur vient de la maquette.

   Le bloc html{...} ci-dessous porte les valeurs par defaut sans
   condition : si data-theme / data-densite est absent, inconnu ou pas
   encore pose par le gabarit, la page reste stylee.
   [data-theme="dark"] et [data-densite="confort"] ne servent qu'a
   surcharger ce defaut.

   Decision d'Edwin (round de correction 2, tache 9) : le theme par
   defaut passe de sombre a CLAIR. Le code de la maquette demarre en
   sombre (`state = { theme: 'dark' }`, logic (3).js), mais son propre
   README annonce « Clair (par defaut) » ; Edwin a tranche pour le clair,
   contredisant le code de la maquette sur ce point precis. Le bloc
   compacte reste le defaut de densite, inchange.

   Piege deja rencontre a la tache 5 en inversant un bloc defaut/surcharge :
   si le bloc [data-theme="dark"] omettait un seul jeton de couleur, ce
   jeton garderait sa valeur claire en theme sombre (texte invisible sur
   fond de meme teinte). test_tokens.py compare les DEUX ensembles de noms
   de jetons plutot que d'enumerer a la main, dans le sens clair->sombre
   maintenant.

   Ecart volontaire (le seul du lot 0 initial) : --accHover.
   La maquette porte `a:hover{color:#e8ff7a}`, un reste vert-jaune de
   l'accent supprime lors du passage a l'accent bleu unique. Edwin a
   tranche : un seul accent bleu, le survol en decline une teinte.
   --accHover ne vient donc pas de la maquette mais de cette decision :
   #83bef7 en sombre, #2a4e72 en clair.

   --shadowPanel / --shadowModal (round de correction 1, panneau de
   notifications PC) : deuxieme ecart, meme nature. La maquette n'a pas de
   jeton d'ombre du tout (`box-shadow` y est ecrit en dur dans les objets
   de style JS, jamais dans applyTheme()) — ni --shadowPanel (popup/
   notifPanel, logic (3).js l.271 et 494-499 ; consomme par
   .pc-panneau-notifs dans pc.css) ni --shadowModal (markup (3).html l.306,
   boite 440px pas encore construite dans ce lot, jeton pose a l'avance
   "pret a l'emploi" comme demande par Edwin). Valeur SOMBRE verbatim de la
   maquette dans les deux cas ; valeur CLAIRE proposee ici, meme geometrie
   (flou/decalage inchanges), alpha seule adoucie — decision d'Edwin suite
   a une premiere livraison ou l'alpha sombre (.45) etait reprise telle
   quelle en clair.

   Mesure a l'appui (capture reelle du panneau de notifications ouvert en
   theme clair, ombre d'origine 0 18px 44px rgba(0,0,0,.45) verbatim,
   captures dans task-panneau-notifs-report.md) : au pixel le plus sombre
   juste sous le panneau, couleur mesuree (153,152,147) contre un fond
   --bg a (238,236,229) — assombrissement moyen 84/255. La bordure la plus
   foncee du theme clair, --line3 (rgba(26,26,23,.18)), composee sur ce
   meme fond donne (200,198,192) soit un assombrissement de 38/255 : c'est
   le plafond fixe par Edwin ("pas plus sombre que --line3"). Le ratio
   correspondant est 38/84 ≈ 0,45 de l'alpha d'origine (≈ 0,20 pile au
   plafond) ; --shadowPanel clair retient .16 (ratio 0,356) pour une
   marge reelle, pas un pile-poil : assombrissement attendu ≈ 30/255,
   environ 21% sous le plafond de --line3. --shadowModal clair applique le
   meme ratio a l'alpha sombre de la modale (.55 x 0,356 ≈ 0,196, arrondi
   .20) faute de modale reelle a mesurer dans ce lot — a revalider par
   capture d'ecran des qu'une modale existe (lot a determiner). */

html {
  --bg: #eeece5; --panel: #ffffff; --panel2: #f6f4ee; --chip: #e7e4da;
  --line: rgba(26,26,23,.10); --line2: rgba(26,26,23,.07); --line3: rgba(26,26,23,.18);
  --txt: #1a1a17; --txt2: #55534b; --mut: #6a685f; --mut2: #807d72; --dim: #9a978c;
  --bar2: #cbc7bb; --sw: #d3d0c5; --off: #c8c5ba;
  --acc: #34628e; --accTxt: #ffffff; --accHover: #2a4e72;
  --accSoft: rgba(52,98,142,.13); --accFaint: rgba(52,98,142,.08); --accLine: rgba(52,98,142,.32);
  --warn: #9a6410; --bad2: #c0432a; --bad: #b8351f;
  --shadowPanel: 0 18px 44px rgba(0,0,0,.16); --shadowModal: 0 30px 70px rgba(0,0,0,.20);
  color-scheme: light;

  --gap: 14px; --cardA: 16px 18px; --cardB: 16px 20px; --pageX: 22px;
}

html[data-theme="dark"] {
  --bg: #080808; --panel: #131313; --panel2: #0e0e0e; --chip: #1c1c1a;
  --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.05); --line3: rgba(255,255,255,.13);
  --txt: #ededea; --txt2: #a5a59e; --mut: #8b8b85; --mut2: #77776f; --dim: #5e5e59;
  --bar2: #42423c; --sw: #2c2c28; --off: #3a3a36;
  --acc: #5aa9f5; --accTxt: #141400; --accHover: #83bef7;
  --accSoft: rgba(90,169,245,.14); --accFaint: rgba(90,169,245,.09); --accLine: rgba(90,169,245,.28);
  --warn: #f5b45a; --bad2: #ff8a6e; --bad: #ff6b52;
  --shadowPanel: 0 18px 44px rgba(0,0,0,.45); --shadowModal: 0 30px 70px rgba(0,0,0,.55);
  /* color-scheme n'est pas sur la ligne 290 : ajoute par applyTheme() (logic (3).js, el.style.colorScheme). */
  color-scheme: dark;
}

html[data-densite="confort"] {
  --gap: 20px; --cardA: 22px 24px; --cardB: 22px 26px; --pageX: 32px;
}

/* Thème « système » (lot 1) : suit prefers-color-scheme du navigateur. Le
   serveur pose toujours data-theme="system" explicitement (jamais d'attribut
   absent, pour garder l'absence de clignotement du lot 0) ; ce bloc ne
   s'applique que si l'OS/le navigateur préfère le sombre — sinon la page
   reste sur les valeurs claires de :root ci-dessus, sans bloc dédié. Jetons
   identiques à [data-theme="dark"], jamais réinventés : la règle
   html[data-theme="system"] n'est délibérément pas ré-indentée sous
   @media (elle reste alignée sur 2 espaces, comme [data-theme="dark"]
   ci-dessus) pour que les deux blocs restent un texte strictement
   identique, propriété par propriété — c'est cette égalité que
   test_theme_systeme.py::test_le_bloc_media_systeme_reprend_les_jetons_sombres
   vérifie automatiquement. */
@media (prefers-color-scheme: dark) {
html[data-theme="system"] {
  --bg: #080808; --panel: #131313; --panel2: #0e0e0e; --chip: #1c1c1a;
  --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.05); --line3: rgba(255,255,255,.13);
  --txt: #ededea; --txt2: #a5a59e; --mut: #8b8b85; --mut2: #77776f; --dim: #5e5e59;
  --bar2: #42423c; --sw: #2c2c28; --off: #3a3a36;
  --acc: #5aa9f5; --accTxt: #141400; --accHover: #83bef7;
  --accSoft: rgba(90,169,245,.14); --accFaint: rgba(90,169,245,.09); --accLine: rgba(90,169,245,.28);
  --warn: #f5b45a; --bad2: #ff8a6e; --bad: #ff6b52;
  --shadowPanel: 0 18px 44px rgba(0,0,0,.45); --shadowModal: 0 30px 70px rgba(0,0,0,.55);
  /* jetons strictement identiques au bloc [data-theme="dark"] ci-dessus. */
  color-scheme: dark;
}
}