/* Kluiz (10/11/2026) : rouge Kluiz de la charte (Pantone 485, #DA291C) à la place de l'orange d'OAISIS (blanc dessus : 4,9:1) ; or #A3842C, noir #222221.
   Charte OAISIS — style A « Chaleureux » (choix de Vincent du 18/10/2026, docs/habillage/charte.md).
   SEUL endroit où vivent les valeurs de la charte : couleurs, rayons, ombres, espacements, tailles de texte, polices.
   Chargé EN PREMIER par templates/core/base.html ; app.css, components.css, mobile.css et les CSS des sections n'écrivent
   que des var(--…). Le mode « Sobre » (core/static/core/sobre.css, <html data-theme="sobre">) redéfinit ces jetons.
   Vitrine de tous les composants : /vitrine/ (direction et administrateurs). Contrastes mesurés sur la vitrine. */

/* --- Polices auto-hébergées (licence OFL dans fonts/) : jamais de CDN. ---------------------------------------------- */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-400-normal.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: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-400-italic.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: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-700-normal.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: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/bricolage-grotesque-latin-600-normal.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: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/bricolage-grotesque-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/bricolage-grotesque-latin-700-normal.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: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/bricolage-grotesque-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; }

:root {
  color-scheme: light;

  /* --- Couleurs (contraste mesuré sur blanc / sur crème ; AA = 4,5:1 pour le texte, 3:1 pour un contrôle) --- */
  --color-bg: #fbf7f4;              /* fond crème de la page */
  --color-surface: #ffffff;         /* cartes, panneaux, barre du haut */
  --color-surface-sunken: #f6efeb;  /* champ de recherche, onglets au repos, pistes, rangées alternées */
  --color-ink: #2b2526;             /* texte : 15,2:1 sur blanc, 14,1:1 sur crème */
  --color-muted: #6b6162;           /* texte secondaire : 6,0:1 sur blanc, 5,6:1 sur crème, 5,3:1 sur le gris chaud */
  --color-line: #f1e8e4;            /* filets (décoratifs) */
  --color-line-strong: #e4d7d2;     /* séparation d'une zone sur fond crème (décoratif) */
  --color-field-border: #968a88;    /* bord d'un champ : 3,3:1 sur blanc (contrôle ≥ 3:1) */
  --color-accent: #da291c;          /* SEULE couleur d'action : boutons, liens, onglet actif. Blanc dessus 5,2:1 */
  --color-accent-hover: #b3200f;    /* survol ; texte sur fond doux 6,2:1 */
  --color-accent-soft: #fdeae8;     /* fond doux de l'onglet actif et du lien de navigation courant */
  --color-accent-ink: #a91f12;      /* petit texte orange, et texte posé sur --color-accent-soft : 5,5:1 (le #c2410c n'y fait que 4,4:1) */
  --color-on-accent: #ffffff;
  --color-focus: #da291c;           /* anneau de focus clavier */
  --color-assistant: #2b2526;       /* disque de l'assistant (téléphone), bouton « Demander à l'assistant » */
  --color-assistant-spark: #fdba74; /* étincelle sur le disque : 8,9:1 */
  --color-on-assistant: #ffffff;    /* texte sur le disque / bouton de l'assistant : 15,2:1 */
  --color-warning: #78350f;         /* « ! » à vérifier : 8,2:1 sur son fond */
  --color-warning-soft: #fef3c7;
  --color-warning-line: #f59e0b;    /* bord d'un moment à vérifier (décoratif, toujours avec un mot) */
  --color-success: #0f766e;         /* fait, présent, validé : 4,7:1 sur son fond, 5,5:1 sur blanc */
  --color-success-soft: #e0f2ef;
  --color-danger: #991b1b;          /* urgent, bloquant, erreur : 6,8:1 sur son fond, 8,6:1 sur blanc */
  --color-danger-soft: #fee2e2;
  --color-danger-strong: #7f1d1d;   /* échu (pastille pleine, texte blanc 10,6:1) */
  --color-info: #1e40af;            /* information neutre : 7,2:1 sur son fond */
  --color-info-soft: #dbeafe;
  --color-violet: #5b21b6;          /* psycho-social, rôle « référent » : 7,6:1 sur son fond */
  --color-violet-soft: #ede9fe;
  --color-on-dark: #ffffff;         /* texte blanc posé sur une couleur de la palette de données (identique en sombre) */
  /* Canaux pour les transparences (ombres, voiles, halos) : rgb(var(--shadow-rgb) / .2). */
  --shadow-rgb: 43 37 38; --surface-rgb: 255 255 255; --accent-rgb: 218 41 28;

  /* Palette de DONNÉES (types de moments du planning, pièces de l'écran de tri, jauges) : des repères qui se distinguent,
     jamais une action. Toujours avec un mot ou un pictogramme. Fond doux = texte en encre. */
  --palette-orange: #ea580c; --palette-orange-soft: #fff2e6;
  --palette-blue: #2563eb;   --palette-blue-soft: #e8efff;   --palette-blue-light: #93c5fd;
  --palette-green: #15803d;  --palette-green-soft: #e7f6ec;  --palette-green-light: #4ade80;
  --palette-red: #dc2626;    --palette-red-soft: #fdecec;    --palette-red-light: #f87171;
  --palette-violet: #7c3aed; --palette-violet-soft: #f1eafe; --palette-violet-light: #a78bfa;
  --palette-amber: #b45309;  --palette-amber-soft: #fdf3dc;
  --palette-teal: #0f766e;   --palette-teal-soft: #e2f5f3;
  --palette-pink: #db2777;   --palette-pink-soft: #fde8f2;
  --palette-grey: #57534e;   --palette-grey-soft: #f1efee;
  --palette-indigo: #6366f1; --palette-yellow: #ca8a04; --palette-slate: #64748b;
  /* Motifs d'absence (Configuration › Motifs) : pastille pleine + texte foncé (≥ 7:1), rouge = à signaler, texte blanc. */
  --reason-blue: #93c5fd;   --reason-blue-ink: #1e3a8a;
  --reason-green: #86efac;  --reason-green-ink: #14532d;
  --reason-red: #dc2626;    --reason-red-ink: #ffffff;
  --reason-violet: #c4b5fd; --reason-violet-ink: #4c1d95;
  --reason-amber: #fcd34d;  --reason-amber-ink: #78350f;
  --reason-teal: #5eead4;   --reason-teal-ink: #134e4a;
  --reason-pink: #f9a8d4;   --reason-pink-ink: #831843;
  --reason-grey: #d1d5db;   --reason-grey-ink: #374151;
  --reason-half-ink: #2b2526; --reason-half-bg: #eef7f0; /* l'autre moitié d'une demi-journée : clair dans tous les affichages (texte foncé du motif) */
  /* Logo (Vincent, 20/10/2026 : « dans ce style de couleur pour ne pas détonner ») : plus AUCUN dégradé. Le palmier et
     « AI » prennent l'orange d'action (le clair en Sombre, l'encre en Sobre), le mot « OAISIS » l'encre. */
  --logo-mark: var(--color-accent);
  --logo-ai: var(--color-accent);

  /* Avatars sans photo : pastel + initiales foncées (≥ 5,9:1 chacun). */
  --avatar-1-bg: #fde2d3; --avatar-1-ink: #9a3412;
  --avatar-2-bg: #fce7f3; --avatar-2-ink: #9d174d;
  --avatar-3-bg: #fef3c7; --avatar-3-ink: #854d0e;
  --avatar-4-bg: #e0f2ef; --avatar-4-ink: #115e59;
  --avatar-5-bg: #ede9fe; --avatar-5-ink: #5b21b6;
  --avatar-6-bg: #dbeafe; --avatar-6-ink: #1e40af;
  --avatar-7-bg: #e7f0da; --avatar-7-ink: #3f6212;
  --avatar-8-bg: #ede7e4; --avatar-8-ink: #4a4344;

  /* --- Rayons --- */
  --radius-xs: 6px;
  --radius-sm: 10px;    /* petites puces carrées, vignettes */
  --radius-md: 14px;    /* champs, onglets d'un dossier, menus */
  --radius-lg: 18px;    /* listes en carte, bandeaux d'alerte */
  --radius-xl: 22px;    /* cartes et panneaux */
  --radius-pill: 999px; /* boutons, puces d'état, navigation */

  /* --- Ombres (très légères ; pas de bordure dure) --- */
  --shadow-sm: 0 1px 2px rgba(43, 37, 38, .06), 0 8px 24px rgba(43, 37, 38, .06);
  --shadow-md: 0 2px 6px rgba(43, 37, 38, .06), 0 14px 32px rgba(43, 37, 38, .10);
  --shadow-lg: 0 20px 50px rgba(43, 37, 38, .18);   /* menus, fenêtres, tiroirs qui flottent */

  /* --- Espacements : échelle de 4 px --- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* --- Texte : échelle fixe. Taille « confortable » (décision de Vincent du 19/10) : 1rem = 17 px (html, plus bas). --- */
  --text-xs: .75rem;    /* 12,75 px : plus petit texte autorisé */
  --text-sm: .875rem;   /* 14,9 px : métadonnées, puces */
  --text-md: 1rem;      /* 17 px : texte courant */
  --text-lg: 1.125rem;  /* 19 px : titre d'une ligne, texte d'appel */
  --text-xl: 1.25rem;   /* 21 px : titre d'un bloc */
  --text-2xl: 1.5rem;   /* 25,5 px : titre de section */
  --text-3xl: 1.875rem; /* 32 px : titre de page (téléphone) */
  --text-4xl: 2.375rem; /* 40 px : titre de page (ordinateur) */
  --leading-tight: 1.15; --leading-normal: 1.5;

  /* --- Polices --- */
  --font-text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-title: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo: Georgia, "Times New Roman", serif;

  /* --- Mise en page : UN conteneur pour le contenu de toutes les pages (main.page), centré sur les grands écrans ;
     la grille des blocs de l'accueil, le brief et les cartes des modules tombent sur ses bords (20/10/2026). --- */
  --layout-max: 1240px;
  --layout-gutter: clamp(16px, 4vw, 48px);

  /* --- Tailles d'interaction --- */
  --control-height: 44px;  /* bouton, champ, onglet : jamais moins sur téléphone */
  --control-height-sm: 36px;
  --icon-size: 18px;          /* icône en ligne devant un mot de bouton (icon_undo.html, icon_redo.html) */
  --icon-size-lg: 22px;       /* icône seule d'un bouton icône (« button icon » de 44 px : icon_trash.html), 26/10/2026 */

  /* --- Anciens noms (gardés pour les CSS des sections) : ils pointent vers les jetons ci-dessus. --- */
  --ink: var(--color-ink); --muted: var(--color-muted); --paper: var(--color-bg); --surface: var(--color-surface);
  --line: var(--color-line); --soft: var(--color-accent-soft); --surface-muted: var(--color-surface-sunken);
  --accent: var(--color-accent); --accent-pink: var(--color-accent); --accent-dark: var(--color-accent-ink); --accent-hover: var(--color-accent-hover);
  --brand-pink: var(--color-accent); --brand-orange: var(--color-accent); --brand-yellow: var(--color-accent); --brand-yellow-light: var(--color-accent);
  --brand-pink-dark: var(--color-accent-hover); --brand-orange-dark: var(--color-accent-hover); --brand-yellow-dark: var(--color-accent-hover);
  --heading-paint: linear-gradient(var(--color-ink), var(--color-ink));
  --danger: var(--color-danger); --warning: var(--color-warning); --success: var(--color-success); --field-border: var(--color-field-border);
  --text-min: 0px;
  /* Aperçus de « Mon compte › Affichage » : chacun montre SON affichage, quel que soit l'affichage en cours. */
  --sample-habituel-bg: #fbf7f4; --sample-habituel-ink: #2b2526; --sample-habituel-accent: #c2410c;
  --sample-sobre-bg: #ffffff; --sample-sobre-ink: #111111; --sample-sobre-accent: #1e3a5f;
  --sample-sombre-bg: #1c1819; --sample-sombre-ink: #f4eeeb; --sample-sombre-accent: #fb8f4e;
}

/* Taille du texte « confortable » : un peu plus grande qu'avant (16 → 17 px), comme dans les maquettes. */
html { font-size: 106.25%; }

/* --- « Affichage : Sombre » (Mon compte › Affichage, au choix seulement : jamais selon le réglage de l'appareil).
   Mêmes noms de jetons, valeurs sombres ; contraste AA mesuré (texte 13,8:1, gris 8,2:1, orange 6,9:1 sur les cartes).
   Aussi la nuit des écrans d'affichage (screens, data-theme="night"). ------------------------------------------------- */
:root[data-theme="sombre"], :root[data-theme="night"] {
  color-scheme: dark;
  --color-bg: #1c1819;
  --color-surface: #262122;
  --color-surface-sunken: #312b2c;
  --color-ink: #f4eeeb;             /* 13,8:1 sur les cartes, 15,3:1 sur le fond */
  --color-muted: #c4b8b5;           /* 8,2:1 sur les cartes, 7,2:1 sur le gris */
  --color-line: #3a3334;
  --color-line-strong: #4d4546;
  --color-field-border: #8d817f;    /* 4,2:1 sur les cartes */
  --color-accent: #fb8f4e;          /* 6,9:1 sur les cartes ; texte foncé dessus 7,7:1 */
  --color-accent-hover: #fdba74;
  --color-accent-soft: #47271a;
  --color-accent-ink: #fed7aa;      /* 9,9:1 sur le fond doux */
  --color-on-accent: #1c1819;
  --color-focus: #fdba74;
  --color-assistant: #3a3334;
  --color-assistant-spark: #fdba74; /* 7,3:1 */
  --color-on-assistant: #f4eeeb;
  --color-warning: #fcd34d;         --color-warning-soft: #3d300f; --color-warning-line: #f59e0b;
  --color-success: #5eead4;         --color-success-soft: #10302c;
  --color-danger: #fca5a5;          --color-danger-soft: #3f1a1a;  --color-danger-strong: #f87171;
  --color-info: #93c5fd;            --color-info-soft: #172a4a;
  --color-violet: #c4b5fd;          --color-violet-soft: #2c2346;
  --shadow-rgb: 0 0 0; --surface-rgb: 38 33 34; --accent-rgb: 251 143 78;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .3), 0 14px 32px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);
  /* Palette de données : fonds sombres (texte clair 12:1 et plus), traits clairs. */
  --palette-orange: #fb923c; --palette-orange-soft: #3f2414;
  --palette-blue: #93c5fd;   --palette-blue-soft: #1a2747;
  --palette-green: #4ade80;  --palette-green-soft: #14301f;
  --palette-red: #f87171;    --palette-red-soft: #3f1a1a;
  --palette-violet: #c4b5fd; --palette-violet-soft: #2c2346;
  --palette-amber: #fcd34d;  --palette-amber-soft: #3a2c10;
  --palette-teal: #5eead4;   --palette-teal-soft: #0f2e2b;
  --palette-pink: #f9a8d4;   --palette-pink-soft: #3d1a2c;
  --palette-grey: #c4b8b5;   --palette-grey-soft: #302b2b;
  --palette-yellow: #facc15;
}
:root[data-theme="sombre"] img:not([src$=".svg"]) { filter: brightness(.92); }