/* Le Chai — surfaces claires pour l'usage quotidien.
   Les couleurs de données (âges, origines) gardent leur sens. Le thème sombre
   et les feuilles d'impression existantes restent autonomes. */
@media screen {
  html[data-theme="light"] {
    color-scheme: light;
    /* Tokens du site actuel hautefeuille-site ; aucun changement de la palette métier. */
    --creme: #ffffff;
    --papier: #ffffff;
    --sable: #f0f0f0;
    --encre: #2b2014;
    --brun: #53422e;
    --taupe: #75634b;
    --or: #9e4f27;
    --or-fonce: #9e4f27;
    --or-pale: #f6f1e7;
    --ligne: #e2e2e2;
    --vert: #2f4a3a;
    --rouge: #9c3a2e;
    --serif: "Bodoni Moda", Georgia, serif;
    --sans: "Quicksand", system-ui, sans-serif;
    --ombre: 0 1px 2px rgba(43, 32, 20, 0.06), 0 8px 24px rgba(43, 32, 20, 0.07);
    --ombre-lg: 0 2px 4px rgba(43, 32, 20, 0.08), 0 16px 48px rgba(43, 32, 20, 0.14);
    --bg: var(--creme);
    --bg-raised: var(--sable);
    --bg-card: var(--papier);
    --bg-nav: var(--creme);
    --line: var(--ligne);
    --ink: var(--encre);
    --ink-2: var(--brun);
    --ink-3: var(--taupe);
    /* L’or foncé du site assure le contraste des petits liens et des CTA.
       L’or principal reste disponible pour les ornements et le focus. */
    --accent: var(--or-fonce);
    --warn: var(--rouge);
    --red: var(--rouge);
    --ok: var(--vert);
    --encre-sur-or: var(--papier);
    --champ-bord: var(--taupe);
    --ombre-1: var(--ombre);
    --ombre-2: var(--ombre-lg);
    --ombre-3: var(--ombre-lg);
  }
  html[data-theme="dark"] { color-scheme: dark; }

  html[data-theme="light"] ::selection { background: var(--or-pale); color: var(--encre); }
  html[data-theme="light"] { -webkit-tap-highlight-color: rgba(163, 120, 42, .12); }
  html[data-theme="light"] .topbar { background: var(--creme); }
  html[data-theme="light"] .nav-item:not(:disabled):not([aria-disabled="true"]):hover { background: var(--sable); }
  html[data-theme="light"] .nav-item[aria-current="page"] {
    background: var(--or-pale); color: var(--brun); border-left-color: var(--accent);
  }
  html[data-theme="light"] .nav-groupe { color: var(--ink-3); }
  html[data-theme="light"] :is(.card, .stat, .bord-hero, .stk-hero, .anx-carte) { box-shadow: var(--ombre-1); }
  html[data-theme="light"] :is(.btn-new, .sw-next, .sw-save) { box-shadow: none; }
  html[data-theme="light"] :is(.btn-new, .sw-next, .sw-save):not(:disabled):not([aria-disabled="true"]):hover { filter: brightness(.93); box-shadow: var(--ombre-1); }

  html[data-theme="light"] body { font-family: var(--sans); }
  html[data-theme="light"] :is(button, input, select, textarea) { font-family: var(--sans); }
  html[data-theme="light"] :is(h1, h2, h3, h4, .nav-title) {   /* chiffres héros : Geist, comme en sombre */
    font-family: var(--serif);
  }
  html[data-theme="light"] :is(.card, .stat, .bord-action, .bord-indicateur, .stk-hero, .anx-carte) {
    background-color: var(--papier); border-radius: var(--radius);
  }
  html[data-theme="light"] :is(.btn-new, .sw-next, .sw-save, .cond-btn-primaire) {
    background: var(--or-fonce); color: var(--papier); border-radius: var(--r-s);
  }
  html[data-theme="light"] :is(.btn-new, .sw-next, .sw-save, .cond-btn-primaire):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--brun); filter: none;
  }
  html[data-theme="light"] :is(.btn-ghost, .btn-theme, .cond-btn-secondaire) {
    background: var(--papier); color: var(--brun); border-color: var(--taupe);
  }
  html[data-theme="light"] :is(.btn-ghost, .btn-theme, .cond-btn-secondaire):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--sable); color: var(--or-fonce); border-color: var(--or-fonce);
  }
  html[data-theme="light"] :is(.prod-tab, [role="tab"]) {
    color: var(--brun);
  }
  html[data-theme="light"] :is(.prod-tab, [role="tab"])[aria-selected="true"] {
    color: var(--brun); background: var(--or-pale); border-color: var(--or-fonce);
  }
  html[data-theme="light"] th { background-color: var(--sable); color: var(--brun); }
  html[data-theme="light"] tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--sable) 40%, transparent); }
  html[data-theme="light"] tr.row-click:not(:disabled):not([aria-disabled="true"]):hover { background-color: var(--or-pale); }
  html[data-theme="light"] :is(.badge-warn, .stk-badge-rupture) {
    color: var(--rouge); background: color-mix(in srgb, var(--rouge) 8%, var(--papier));
  }
  html[data-theme="light"] .stk-badge-ok {
    color: var(--vert); background: color-mix(in srgb, var(--vert) 8%, var(--papier));
  }
  html[data-theme="light"] :is(.stk-badge-bas, .jr-badge-evm) {
    color: var(--brun); background: var(--or-pale);
  }
  html[data-theme="light"] :is(.drawer-veil, .saisie-veil, .stk-veil, .assistant-veil) {
    background: rgba(43, 32, 20, .55);
  }
  html[data-theme="light"] .lot-overlay { background: var(--creme); }
  html[data-theme="light"] dialog::backdrop { background: rgba(43, 32, 20, .55); }
  html[data-theme="light"] :is(dialog, .drawer, .saisie, .stk-modale, .assistant-panneau) {
    background: var(--papier); color: var(--encre); border-color: var(--ligne); box-shadow: var(--ombre-lg);
  }
  html[data-theme="light"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--or-fonce); outline-offset: 2px;
  }

  /* Les champs doivent être reconnaissables, même sans ombre sombre. */
  html[data-theme="light"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    background-color: var(--papier); color: var(--ink); border-color: var(--champ-bord);
    box-shadow: none;
  }
  html[data-theme="light"] :is(input, textarea)::placeholder { color: var(--ink-3); opacity: 1; }
  html[data-theme="light"] :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  html[data-theme="light"] :is(input, select, textarea):disabled { background: var(--bg-raised); }
  html[data-theme="light"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }

  html[data-theme="light"] :is(.reg-in) { background: var(--papier); border-color: var(--champ-bord); }
  html[data-theme="light"] :is(.reg-in) :is(input, select) { background: transparent; }
  /* Les états métier passent après les surfaces neutres, y compris au focus. */
  html[data-theme="light"] :is(input, select, textarea, .reg-in):is(.bad, [aria-invalid="true"]) {
    border-color: var(--warn);
  }
  html[data-theme="light"] :is(input, select, textarea):is(.bad, [aria-invalid="true"]):focus-visible {
    outline-color: var(--warn);
  }
  /* Neutralise aussi les hover/active hérités des feuilles de composants.
     aria-disabled reste un état visuel : son blocage métier appartient au JS. */
  html[data-theme="light"] :is(.btn-new, .sw-next, .sw-save, .cond-btn,
      .btn-ghost, .btn-theme, .prod-tab, [role="tab"]):is(:disabled, [aria-disabled="true"]) {
    background: var(--sable); color: var(--taupe); border-color: var(--taupe);
    opacity: 1; filter: none; box-shadow: none; transform: none; cursor: not-allowed;
  }

  html[data-theme="light"] input[type="date"] { color-scheme: light; }

  /* Surfaces anciennement fixées en noir dans les modules. */
  html[data-theme="light"] :is(.tooltip, .pl-tooltip, .pl-toast, .sw-fut-list) {
    background: var(--papier); color: var(--ink); border-color: var(--champ-bord); box-shadow: var(--ombre-2);
  }
  html[data-theme="light"] .stk-lots-row td { background: var(--sable); }
  html[data-theme="light"] :is(.prod-ouvert td, .prod-tab:not(:disabled):not([aria-disabled="true"]):hover) { background: var(--sable); }
  html[data-theme="light"] .ages-vide { opacity: 1; }
  html[data-theme="light"] :is(.ages-n0, .ages-n1, .ages-n2, .ages-n3, .ages-n4) { color: #20180c; }
  /* Les fonds d’âge restent ceux de ages.css (aucun remplacement par l’or UI). */
  html[data-theme="light"] .ages-n5 { color: #000; }
  html[data-theme="light"] :is(.clot-ouvrir, .clot-confirmer) { color: #fff; }

  html[data-theme="light"] :is(#ages, .bord-graph, .prod-graph) text { fill: var(--ink-2); }
  html[data-theme="light"] :is(.bord-graph, .prod-graph) line { stroke: var(--line); }
  html[data-theme="light"] .tooltip [style*="#E4572E"] { color: var(--warn) !important; }

  /* Éléments d'une grille ou d'un graphique : l'encre ne suit pas celle des CTA. */
  html[data-theme="light"] .legend .sw { background: var(--papier); }
  html[data-theme="light"] :is(.fut, .pl-dot) { box-shadow: inset 0 0 0 1px rgba(60, 45, 20, .28); }
  @media (pointer: coarse) {
    html[data-theme="light"] .pl-root:not(.pl-compact) .pl-dot:not(.pl-empty, .pl-div, .pl-sel)::after { box-shadow: inset 0 0 0 1px rgba(60, 45, 20, .28); }
  }
  html[data-theme="light"] .fut.empty { border-color: var(--ink-3); }
}

/* Commande persistante, clavier et tactile, sans ajout dans la navigation métier. */
.btn-theme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 8px 12px;
  background: var(--bg-card); color: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius-controle); font: inherit; font-size: var(--t-m); cursor: pointer;
  flex: none;
}
.btn-theme:hover { color: var(--accent); border-color: var(--accent); }
.btn-theme .ico { width: 18px; height: 18px; }
.theme-lune, html[data-theme="dark"] .theme-soleil { display: none; }
html[data-theme="dark"] .theme-lune { display: block; }
@media (max-width: 600px) {
  .btn-theme { padding: 8px; }
  .theme-libelle { display: none; }
}
@media print { .btn-theme { display: none !important; } }

/* Identité actuelle : chiffres tabulaires et logo local. */
:root { --serif: "Bodoni Moda", Georgia, serif; --sans: "Quicksand", system-ui, sans-serif; --chiffres: "Geist", sans-serif; }
body, button, input, select, textarea { font-family: var(--sans); }
.nav-brand { gap: 10px; }
.nav-logo { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; }
.nav-title { font-family: var(--serif); font-size: var(--t-l); }
/* Une identité, deux ambiances : seules les couleurs changent entre clair et sombre. */
:is(.stat-value,.d-hero .v,td.num,.num,.bord-repere-valeur,.bord-indicateur .valeur,.c3d-zone-kpis b,.c3d-anneau span,.bm-anneau b,.bm-mission > b) { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .nav-logo { background: #fff; border-radius: 50%; }
@media (max-width:1023px) { .nav-logo { width:32px; height:32px; flex-basis:32px; } .nav-title { font-size:var(--t-base); } }

:is(h1,h2,h3,h4,.bord-action-titre) { font-weight:500; }


/* ── Jetons de texte d'état, pour les deux thèmes ──────────────────────────
   Redéclarés sur chaque conteneur qui redéfinit sa palette localement.
   --warn-texte / --ok-texte : la couleur d'état tirée vers l'encre, ≥ 4,5:1
   sur carte, sur fond et sur fond d'alerte (le --warn brut fait 3,7 à 4,2:1
   en sombre, le --ok brut 3,5:1 sur sa propre teinte). */
:root, .view-alt, .stk-modale, .phys-dialog, .phys-section, .lot-overlay, dialog {
  --warn-texte: color-mix(in srgb, var(--warn) 68%, var(--ink));
  --ok-texte: color-mix(in srgb, var(--ok) 70%, var(--ink));
  --alerte-fond: color-mix(in srgb, var(--warn) 9%, var(--bg-card));
  --alerte-bord: color-mix(in srgb, var(--warn) 40%, var(--line));
}


/* Flèche d'action en icône (remplace les glyphes « → » et « ↗ ») : UNE seule
   définition, en masque, couleur du texte. Sert aux <span> comme aux <svg
   class="ico ico-fleche">. `.jr-fleche` est un alias provisoire, à retirer
   quand journal.js utilisera `.ico-fleche`. */
.ico-fleche {
  display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* espacement propre à l'Accueil (repris de bord.css) */
.bord-carte-lien .ico-fleche, .bord-action .ico-fleche { margin-left: 4px; }