/* =============================================================================
 * Couleurs, polices et icônes communes aux quatre écrans (gestion, caisse,
 * pointeuse, paie). Une seule source : changer une couleur ici la change
 * partout.
 *
 * Les polices sont servies par notre serveur (licence libre OFL, voir
 * polices/LICENCE-OFL.txt) : même rendu sur chaque poste, rien demandé à un
 * tiers, et elles s'affichent aussi hors ligne.
 *
 * Contrastes vérifiés (norme AA, 4,5:1 pour le texte courant) sur le blanc
 * des cartes et sur le fond gris bleuté.
 * ========================================================================== */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/commun/polices/public-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/commun/polices/public-sans-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/commun/polices/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/commun/polices/jetbrains-mono-700.woff2") format("woff2");
}

:root {
  /* ---- Design Vercolorz (docs/design/vercolorz/COMPARAISON.md) ----------
   * Fond clair, une seule couleur d'accent : celle de la pharmacie (le vert
   * d'officine par défaut ; palette.js la remplace par celle choisie par
   * l'éditeur). */
  --accent-50: #EEF8F0;  --accent-100: #D5EFDB; --accent-500: #2EA44F;
  --accent-600: #1A7F37; --accent-700: #116329; --accent-900: #0B3D1E;

  /* Surfaces et textes (gris bleutés). */
  --fond: #F3F5F4;
  --carte: #FFFFFF;
  --sous-carte: #F7F9F8;
  --filet: #DDE3E0;
  --encre: #17211C;
  --encre-douce: #55625B;
  /* Texte secondaire : jamais plus pâle que 4,5:1 sur blanc. */
  --muet: #55625B;
  /* Gris décoratif (icônes, bordures marquées) — pas pour du texte. */
  --muet-clair: #7F8B84;

  /* États : fond pâle et texte foncé de la même teinte (≥ 5:1), et un point vif. */
  --ok-bg: #ECFDF3;    --ok-fg: #067647;    --ok-point: #12B76A;
  --warn-bg: #FFFAEB;  --warn-fg: #B54708;  --warn-point: #F79009;
  --jaune-bg: #FEFBE8; --jaune-fg: #854A0E; --jaune-point: #EAAA08;
  --crit-bg: #FEF3F2;  --crit-fg: #B42318;  --crit-point: #F04438;
  --info-bg: #EFF8FF;  --info-fg: #175CD3;  --info-point: #2E90FA;

  /* ---- Éclat : dégradés, profondeur, couleurs des graphiques ---------------
   * Tirés de la couleur de la pharmacie : une officine « Sapin » garde ses
   * verts, une « Corail » ses roses. Le second ton tire vers le cyan, pour
   * des dégradés vivants sans jamais trahir la couleur choisie. */
  /* Logiciel d'officine : des aplats, pas de dégradé ni de lueur. */
  --eclat: var(--accent-500);
  --degrade: linear-gradient(var(--accent-600), var(--accent-600));
  --degrade-doux: linear-gradient(var(--accent-50), var(--accent-50));
  --degrade-nuit: linear-gradient(165deg, var(--accent-900) 0%, color-mix(in oklch, var(--accent-900) 70%, #020617) 100%);
  /* Plus de halo coloré sous les boutons et les pastilles : une ombre neutre d'un pixel. */
  --lueur: 0 1px 2px rgba(16, 24, 40, .08);
  --ombre-haute: 0 2px 4px rgba(16, 24, 40, .04), 0 18px 40px -12px rgba(16, 24, 40, .18);
  /* Six couleurs franches pour les graphiques (moyens de paiement, opérateurs,
   * catégories), distinguables entre elles et lisibles sur blanc. */
  --g1: var(--accent-500); --g2: #14B8A6; --g3: #F59E0B; --g4: #F43F5E; --g5: #0EA5E9; --g6: #A855F7;
  /* Mouvement : court, jamais gênant ; coupé pour qui l'a demandé (plus bas). */
  --vite: 180ms cubic-bezier(.2, .8, .2, 1);
  --doux: 420ms cubic-bezier(.2, .8, .2, 1);

  /* Formes. */
  --r-carte: 10px;
  --r-champ: 8px;
  --r-puce: 999px;
  --ombre-carte: 0 1px 2px rgba(16, 24, 40, .05);

  /* ---- Anciens noms, gardés comme alias de la nouvelle palette ----------
   * (tout l'existant bascule d'un coup ; les composants sont repris un à un). */
  --vert-900: var(--accent-900);
  --vert-800: var(--accent-700);
  --vert-700: var(--accent-600);
  --vert-600: var(--accent-500);
  --lime: var(--accent-100);
  --lime-fonce: var(--accent-500);

  /* Mêmes couleurs sous les noms qu'emploient la caisse, la pointeuse et la paie. */
  --green-900: var(--vert-900);
  --green-800: var(--vert-800);
  --green-700: var(--vert-700);
  --lime-dark: var(--accent-500);
  --bg: var(--fond);
  --card: var(--carte);
  --ink: var(--encre);
  --muted: var(--muet);
  --line: var(--filet);
  --low-bg: var(--warn-bg); --low-fg: var(--warn-fg);
  --out-bg: var(--crit-bg); --out-fg: var(--crit-fg);
  --err-bg: var(--crit-bg); --err-fg: var(--crit-fg);

  --police: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Les chiffres : la même police, en chiffres tabulaires (alignés en colonne). */
  --police-chiffres: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--police);
}

/* ---- Mode sombre (gestion) -------------------------------------------------
 * Choisi au poste (☀/☾ dans l'en-tête), pour les gardes de nuit. Les mêmes
 * jetons, en teintes de nuit : surfaces bleu nuit, textes clairs (≥ 4,5:1),
 * états sur fonds translucides. L'accent de la pharmacie est recalculé par
 * palette.js (ses tons pâles deviennent des fonds sombres teintés). */
:root[data-mode="sombre"] {
  color-scheme: dark;
  --fond: #0E1020;
  --carte: #171A2E;
  --sous-carte: #1D2139;
  --filet: #2C3152;
  --encre: #E8E9F5;
  --encre-douce: #AEB2CF;
  --muet: #A7ABCA;
  --muet-clair: #767BA3;
  --ok-bg: rgba(18, 183, 106, .16);   --ok-fg: #75E0A7;
  --warn-bg: rgba(247, 144, 9, .16);  --warn-fg: #FEC84B;
  --jaune-bg: rgba(234, 170, 8, .16); --jaune-fg: #FDE272;
  --crit-bg: rgba(240, 68, 56, .18);  --crit-fg: #FDA29B;
  --info-bg: rgba(46, 144, 250, .16); --info-fg: #84CAFF;
  --degrade-doux: linear-gradient(135deg, var(--accent-50) 0%, var(--sous-carte) 100%);
  --ombre-haute: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -12px rgba(0, 0, 0, .6);
  --ombre-carte: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3);
  /* La barre latérale garde sa nuit (accent-900 sert ici au texte, éclairci). */
  --degrade-nuit: linear-gradient(165deg, color-mix(in oklch, var(--accent-600) 38%, #0A0C1A) 0%, #080A16 100%);
}
:root[data-mode="sombre"] body { background: var(--fond); color: var(--encre); }
/* Les champs posés sans style : fond de carte, texte clair. */
:root[data-mode="sombre"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea) {
  background-color: var(--carte); color: var(--encre); border-color: var(--filet);
}
:root[data-mode="sombre"] ::placeholder { color: var(--muet-clair); }

/* Icône dessinée : prend la couleur et la taille du texte qui l'entoure. */
.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; display: inline-block; }
/* Un emoji écrit dans un texte, rendu en icône dessinée (pictos.js) : à la taille et à la couleur du texte. */
.picto { width: 1.1em; height: 1.1em; vertical-align: -0.17em; margin-right: .12em; }

/* Qui a demandé moins de mouvement à son système n'en a pas ici non plus. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Robot de test : pas de mouvement (voir noyau.js). */
.sans-anim *, .sans-anim *::before, .sans-anim *::after { animation: none !important; transition: none !important; }