/* ═══════════════════════════════════════════════════════════════════════════
   ROOS — SYSTÈME DE THÈMES
   A · Console (sombre, défaut)   B · Atelier (clair)

   Principe : on ne réécrit pas les 26 feuilles de style. On REDÉFINIT les
   tokens que l'application utilise déjà (5 584 usages recensés) — la bascule
   se propage donc d'elle-même. Les couleurs écrites en dur (828 recensées)
   sont corrigées vue par vue dans un second temps.

   Chargé APRÈS style.css pour surcharger le bloc :root d'origine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   A · CONSOLE — sombre. Bleu-encre froid (hue 250), or laiton.
   Densité d'instrument : surfaces proches, lignes fines, or rare.
   ══════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — 7 paliers de clarté */
  --sl-0: oklch(0.115 0.014 250);
  --sl-1: oklch(0.148 0.014 250);
  --sl-2: oklch(0.178 0.014 250);
  --sl-3: oklch(0.212 0.013 250);
  --sl-4: oklch(0.252 0.013 250);
  --sl-5: oklch(0.300 0.012 250);
  --sl-6: oklch(0.355 0.011 250);

  --bg:         var(--sl-0);
  --bg-card:    var(--sl-1);
  --bg-card2:   var(--sl-2);
  --bg-glass:   oklch(0.115 0.014 250 / 0.92);
  --bg-sidebar: oklch(0.098 0.014 250);

  /* Accent — or laiton, désaturé, réservé au signal */
  --au:     oklch(0.80 0.070 85);
  --au-hi:  oklch(0.88 0.075 87);
  --au-lo:  oklch(0.66 0.060 82);
  --au-dim: oklch(0.48 0.045 80);
  --au-bg:  oklch(0.80 0.070 85 / .10);
  --au-ln:  oklch(0.80 0.070 85 / .42);

  --gold:       var(--au);
  --gold-hi:    var(--au-hi);
  --gold-dim:   var(--au-bg);
  --gold-bd:    oklch(0.80 0.070 85 / .20);
  --gold-bd-hi: var(--au-ln);

  /* Texte — 4 niveaux */
  --tx-1: oklch(0.97 0.004 250);
  --tx-2: oklch(0.85 0.005 250);
  --tx-3: oklch(0.70 0.006 250);
  --tx-4: oklch(0.55 0.008 250);

  --text-0: var(--tx-1);
  --text-1: var(--tx-2);
  --text-2: var(--tx-3);
  --text-3: oklch(0.70 0.006 250 / 0.42);

  /* Lignes */
  --ln-1: oklch(0.240 0.013 250);
  --ln-2: oklch(0.310 0.013 250);
  --ln-3: oklch(0.400 0.012 250);

  /* Sémantiques */
  --ok:      oklch(0.74 0.150 152);  --ok-bg:   oklch(0.74 0.150 152 / .13); --ok-ln:   oklch(0.74 0.150 152 / .40);
  --err:     oklch(0.64 0.180 25);   --err-bg:  oklch(0.64 0.180 25 / .13);  --err-ln:  oklch(0.64 0.180 25 / .40);
  --warn:    oklch(0.78 0.140 70);   --warn-bg: oklch(0.78 0.140 70 / .13);  --warn-ln: oklch(0.78 0.140 70 / .38);
  --info:    oklch(0.72 0.120 230);  --info-bg: oklch(0.72 0.120 230 / .13); --info-ln: oklch(0.72 0.120 230 / .38);
  --green: var(--ok); --red: var(--err); --blue: var(--info); --amber: var(--warn);

  /* Élévation — ombres courtes, jamais diffuses */
  --sh-1: 0 1px 1px oklch(0 0 0 / .40), 0 2px 4px -2px oklch(0 0 0 / .50);
  --sh-2: 0 1px 1px oklch(0 0 0 / .45), 0 6px 14px -8px oklch(0 0 0 / .60);
  --sh-focus: 0 0 0 2px var(--sl-0), 0 0 0 4px oklch(0.80 0.070 85 / .55);
  --glow-sm: 0 0 8px  oklch(0.80 0.070 85 / .35);
  --glow-md: 0 0 22px oklch(0.80 0.070 85 / .32), 0 0 44px oklch(0.80 0.070 85 / .12);
  --glow-lg: 0 0 36px oklch(0.80 0.070 85 / .40), 0 0 72px oklch(0.80 0.070 85 / .16);

  /* Fond de page : trame métrique + grain (signature Console) */
  --page-grid: oklch(1 0 0 / .016);
  --page-halo: oklch(0.42 0.06 235 / .22);
  --bevel:     oklch(1 0 0 / .045);
}

/* ══════════════════════════════════════════════════════════════
   B · ATELIER — clair. Papier bleuté, encre marine, or foncé.
   L'or descend en clarté pour rester lisible sur fond clair ; les
   surfaces montent, les ombres deviennent des ombres portées douces.
   ══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — l'échelle s'inverse : sl-0 = le papier, sl-6 = le plus contrasté */
  --sl-0: oklch(0.950 0.006 245);
  --sl-1: oklch(0.975 0.004 245);
  --sl-2: oklch(1.000 0.000 245);
  --sl-3: oklch(0.930 0.008 245);
  --sl-4: oklch(0.890 0.010 245);
  --sl-5: oklch(0.840 0.012 245);
  --sl-6: oklch(0.780 0.014 245);

  --bg:         var(--sl-0);
  --bg-card:    var(--sl-2);
  --bg-card2:   var(--sl-1);
  --bg-glass:   oklch(0.975 0.004 245 / 0.92);
  --bg-sidebar: oklch(0.985 0.003 245);

  /* Accent — or foncé (contraste AA sur papier) */
  --au:     oklch(0.58 0.110 76);
  --au-hi:  oklch(0.50 0.115 74);
  --au-lo:  oklch(0.66 0.100 78);
  --au-dim: oklch(0.78 0.070 80);
  --au-bg:  oklch(0.58 0.110 76 / .09);
  --au-ln:  oklch(0.58 0.110 76 / .38);

  --gold:       var(--au);
  --gold-hi:    var(--au-hi);
  --gold-dim:   var(--au-bg);
  --gold-bd:    oklch(0.58 0.110 76 / .22);
  --gold-bd-hi: var(--au-ln);

  /* Texte — encre marine, du plus dense au plus léger */
  --tx-1: oklch(0.26 0.045 255);
  --tx-2: oklch(0.36 0.035 255);
  --tx-3: oklch(0.50 0.025 255);
  --tx-4: oklch(0.60 0.020 255);

  --text-0: var(--tx-1);
  --text-1: var(--tx-2);
  --text-2: var(--tx-3);
  --text-3: oklch(0.50 0.025 255 / 0.55);

  /* Lignes */
  --ln-1: oklch(0.880 0.010 245);
  --ln-2: oklch(0.800 0.013 245);
  --ln-3: oklch(0.720 0.016 245);

  /* Sémantiques — assombries pour tenir le contraste sur clair */
  --ok:      oklch(0.50 0.135 152); --ok-bg:   oklch(0.50 0.135 152 / .11); --ok-ln:   oklch(0.50 0.135 152 / .35);
  --err:     oklch(0.55 0.190 27);  --err-bg:  oklch(0.55 0.190 27 / .10);  --err-ln:  oklch(0.55 0.190 27 / .35);
  --warn:    oklch(0.58 0.130 68);  --warn-bg: oklch(0.58 0.130 68 / .11);  --warn-ln: oklch(0.58 0.130 68 / .34);
  --info:    oklch(0.52 0.120 235); --info-bg: oklch(0.52 0.120 235 / .10); --info-ln: oklch(0.52 0.120 235 / .34);
  --green: var(--ok); --red: var(--err); --blue: var(--info); --amber: var(--warn);

  /* Élévation — la feuille posée sur la table */
  --sh-1: 0 1px 1px oklch(0.45 0.04 255 / .07), 0 2px 5px -3px oklch(0.45 0.04 255 / .16);
  --sh-2: 0 1px 1px oklch(0.45 0.04 255 / .06), 0 6px 16px -10px oklch(0.42 0.05 255 / .26);
  --sh-focus: 0 0 0 2px var(--sl-0), 0 0 0 4px oklch(0.58 0.110 76 / .55);
  --glow-sm: 0 0 8px  oklch(0.58 0.110 76 / .22);
  --glow-md: 0 0 20px oklch(0.58 0.110 76 / .20), 0 0 40px oklch(0.58 0.110 76 / .08);
  --glow-lg: 0 0 32px oklch(0.58 0.110 76 / .26), 0 0 64px oklch(0.58 0.110 76 / .10);

  --page-grid: oklch(0.45 0.04 250 / .030);
  --page-halo: oklch(1 0 0 / .85);
  --bevel:     oklch(1 0 0 / .90);
}

/* ══════════════════════════════════════════════════════════════
   Fond de page — pilotés par tokens, donc thémés d'office
   ══════════════════════════════════════════════════════════════ */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 55% at 50% -8%, var(--page-halo), transparent 62%),
    repeating-linear-gradient(to right,  var(--page-grid) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, var(--page-grid) 0 1px, transparent 1px 32px);
  color: var(--text-1);
  transition: background-color .28s cubic-bezier(0.16,1,0.3,1), color .28s cubic-bezier(0.16,1,0.3,1);
}
/* Le grain d'origine s'atténue en clair (sinon il salit le papier) */
:root[data-theme="light"] body::before { opacity: .35; }

/* ══════════════════════════════════════════════════════════════
   Commutateur de thème (topbar)
   ══════════════════════════════════════════════════════════════ */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; cursor: pointer;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--gold-bd); border-radius: var(--r-p, 999px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  transition: color var(--dur-fast, .15s) var(--ease-out, ease),
              border-color var(--dur-fast, .15s) var(--ease-out, ease),
              background var(--dur-fast, .15s) var(--ease-out, ease),
              transform var(--dur-instant, .09s) var(--ease-out, ease);
}
.theme-toggle:hover { color: var(--gold-hi); border-color: var(--gold-bd-hi); background: var(--au-bg); }
.theme-toggle:active { transform: scale(0.97); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.theme-toggle svg { width: 13px; height: 13px; flex: 0 0 auto; }
.theme-toggle .tt-sun { display: none; }
:root[data-theme="light"] .theme-toggle .tt-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .tt-moon { display: none; }

/* Les surfaces changent de couleur en même temps que le fond */
#sidebar, #topbar, .view, .roos-frame, .est-card, .cpta-card, .cat-card, .q-card {
  transition: background-color .28s cubic-bezier(0.16,1,0.3,1),
              border-color .28s cubic-bezier(0.16,1,0.3,1),
              color .28s cubic-bezier(0.16,1,0.3,1);
}
@media (prefers-reduced-motion: reduce) {
  body, #sidebar, #topbar, .view { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHROME — reprise des surcharges historiques
   #sidebar et #topbar sont peints trois fois dans style.css (l.162/279 sur
   tokens, puis « ULTRA » l.2769/2812, puis « ULTRA » l.3692/3745 en
   !important) avec des hex en dur. Ces couches bloquaient le thème clair :
   on les ramène sur tokens pour les deux thèmes.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Fond de la sidebar : surface PLEINE et UNIFORME.
   L'ancien fond superposait deux couches nuisibles au texte :
   — un dégradé vertical qui ÉCLAIRCISSAIT vers le bas (0.085 → 0.105), donc un
     contraste qui décroissait avec la hauteur, au plus bas exactement là où se
     trouvent le sélecteur de chantier et les mentions de pied ;
   — une trame diagonale dorée, qui ajoutait du bruit sous des libellés de 10 px.
   Une surface unie garantit le même contraste partout et laisse la typographie
   porter seule la hiérarchie. Le liseré droit assure la séparation. */
#sidebar {
  background-color: var(--sidebar-bg) !important;
  background-image: none !important;
  border-right: 1px solid var(--gold-bd);
}
/* Lisibilité de la sidebar.
   Les intitulés de sections (« Chiffrage », « Appels d'offres », « Chantier »…)
   et les mentions de pied héritaient de --text-3, un token SEMI-TRANSPARENT
   (alpha .42 en sombre, .55 en clair). Sur le fond de la sidebar, cela donnait
   un contraste mesuré de 2,1:1 en sombre et 2,3:1 en clair, très en dessous du
   seuil WCAG AA (4,5:1) : le texte paraissait délavé.
   On les repasse sur une couleur opaque dédiée, sans toucher au token global
   qui sert dans toute l'application. */
#sidebar .nav-group-title,
#sidebar .nav-subhead,
#sidebar .ctx-hint,
#sidebar .sys-meta {
  color: var(--sidebar-dim);
  /* Certains de ces libellés cumulaient en plus une opacité propre (.70/.80),
     qui les ramenait sous le seuil malgré la couleur opaque. */
  opacity: 1;
}
/* Scanlines horizontales (style.css:3714) : un liseré doré de 1 px tous les
   4 px, peint sur toute la zone de navigation. Mesuré sur les pixels, le fond
   passait de 2,2 à 19,8 une ligne sur quatre — neuf fois plus lumineux. Sur
   une surface désormais unie, cette trame n'apporte plus qu'un bruit régulier
   sous des libellés de 10 à 12 px. */
.sidebar-nav::before { content: none !important; }

/* Les libellés de navigation héritent de --text-2 ; le survol utilise --text-1
   puis --text-0, l'état actif --gold-hi. On relève ces tokens DANS LA SEULE
   portée de la sidebar : les états gardent leur logique et aucune lutte de
   spécificité n'est nécessaire — l'héritage suffit. */
#sidebar {
  --text-2: var(--sidebar-text);
  --text-1: var(--sidebar-text-hi);
  --text-0: var(--sidebar-text-hi);
}
/* « Réglages & agents » : 9,5 px en graisse 400, ses traits sont si fins que
   l'anticrénelage lui faisait perdre un tiers de son contraste mesuré. */
#sidebar .nav-subhead { font-weight: 600; }
/* Le sous-titre de marque était doré à 80 % d'opacité : 4,5:1 en sombre mais
   2,1:1 en clair, le pire libellé de la sidebar. */
/* !important obligatoire : style.css:5714 impose color + opacity en !important. */
#sidebar .brand-sub { color: var(--sidebar-brand) !important; opacity: 1 !important; }

#topbar {
  background: var(--bg-glass) !important;
  border-bottom: 1px solid var(--gold-bd);
}
/* Le titre de vue est un dégradé clippé sur le texte : il suit les tokens,
   donc il se relit correctement dans les deux thèmes. */
#topbar h1 {
  background: linear-gradient(120deg, var(--text-0) 0%, var(--gold) 45%,
              var(--gold-hi) 70%, var(--text-0) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}

:root, :root[data-theme="dark"] {
  --chrome-trame: oklch(0.80 0.070 85 / .042);
  --sidebar-bg:      oklch(0.082 0.012 250);  /* surface unie, sans dégradé   */
  --sidebar-text:    oklch(0.86 0.006 250);   /* libellés de navigation       */
  --sidebar-text-hi: oklch(0.97 0.004 250);   /* survol                       */
  --sidebar-dim:     oklch(0.80 0.008 250);   /* intitulés de section, pied   */
  --sidebar-brand:   oklch(0.84 0.085 85);    /* sous-titre de marque, doré   */
}
:root[data-theme="light"] {
  --chrome-trame: oklch(0.58 0.110 76 / .035);
  /* En thème clair le fond est déjà quasi blanc : l'éclaircir davantage ne
     gagnerait rien. C'est donc le texte qui est assombri pour créer l'écart. */
  --sidebar-bg:      oklch(0.988 0.002 245);
  --sidebar-text:    oklch(0.36 0.020 255);
  --sidebar-text-hi: oklch(0.24 0.022 255);
  --sidebar-dim:     oklch(0.30 0.018 255);
  --sidebar-brand:   oklch(0.26 0.080 72);
}

/* Éléments du chrome qui portaient des valeurs en dur */
:root[data-theme="light"] .topbar-avatar:hover { background: var(--au-bg); }
:root[data-theme="light"] .ctx-switcher { background: var(--bg-card); }
:root[data-theme="light"] .ctx-select,
:root[data-theme="light"] .ctx-name-btn,
:root[data-theme="light"] .ctx-select-mini { background: var(--bg-card); color: var(--text-0); }

/* Sélecteur de langue — même facture que le commutateur de thème */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; cursor: pointer;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--gold-bd); border-radius: var(--r-p, 999px);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  transition: color var(--dur-fast,.15s) var(--ease-out,ease),
              border-color var(--dur-fast,.15s) var(--ease-out,ease),
              background var(--dur-fast,.15s) var(--ease-out,ease),
              transform var(--dur-instant,.09s) var(--ease-out,ease);
}
.lang-toggle:hover { color: var(--gold-hi); border-color: var(--gold-bd-hi); background: var(--au-bg); }
.lang-toggle:active { transform: scale(0.97); }
.lang-toggle:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.lang-toggle svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════════════════
   TEINTES & OMBRES — paliers neutres, inversés par thème
   Les voiles blancs (rgba(255,255,255,α)) sont invisibles sur papier et les
   voiles noirs y font des taches : on passe par des paliers sémantiques que
   chaque thème définit dans le bon sens.
   ═══════════════════════════════════════════════════════════════════════════ */
:root, :root[data-theme="dark"] {
  --tint-a: oklch(1 0 0 / .035);   /* voile léger    */
  --tint-b: oklch(1 0 0 / .070);   /* voile moyen    */
  --tint-c: oklch(1 0 0 / .130);   /* voile marqué   */
  --shade-a: oklch(0 0 0 / .18);
  --shade-b: oklch(0 0 0 / .32);
  --shade-c: oklch(0 0 0 / .50);
  --sh-c-a: oklch(0 0 0 / .22);    /* ombres         */
  --sh-c-b: oklch(0 0 0 / .38);
  --sh-c-c: oklch(0 0 0 / .55);
}
:root[data-theme="light"] {
  --tint-a: oklch(0.45 0.04 255 / .035);
  --tint-b: oklch(0.45 0.04 255 / .060);
  --tint-c: oklch(0.45 0.04 255 / .100);
  --shade-a: oklch(0.45 0.04 255 / .045);
  --shade-b: oklch(0.45 0.04 255 / .080);
  --shade-c: oklch(0.45 0.04 255 / .120);
  --sh-c-a: oklch(0.45 0.04 255 / .07);
  --sh-c-b: oklch(0.45 0.04 255 / .13);
  --sh-c-c: oklch(0.42 0.05 255 / .20);
}