/* ============================================================
   design.css — système de design « Lumière »
   ------------------------------------------------------------
   LE fichier des jetons : couleurs, typographie, espacements, rayons,
   ombres, durées. Toute l'application (style.css, nacelle.css, page
   publique) lit ces variables ; aucune couleur ne s'écrit ailleurs.

   Trois thèmes, choisis par l'utilisateur et mémorisés (js/core/theme.js) :
     clair    par défaut, bureau
     sombre   faible lumière
     soleil   « Plein soleil » : contraste maximal pour le terrain
              (aplats pleins, bordures franches, ni ombre ni dégradé)

   Contrastes : chaque paire texte / fond déclarée ici est contrôlée par
   app/tests/contrastes.test.mjs (WCAG AA partout, AAA pour le texte
   courant et pour tout le thème « Plein soleil »).

   Police : Plus Jakarta Sans (licence OFL), servie par l'application —
   aucun appel à un service tiers. Icônes : Lucide (licence ISC),
   assets/icones/lucide.svg.
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/polices/PlusJakartaSans-latin.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/polices/PlusJakartaSans-latin-ext.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;
}

/* ------------------------------------------------------------
   Jetons communs aux trois thèmes
   ------------------------------------------------------------ */
:root {
  /* Typographie */
  --police: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --police-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --t-xs: 12px;
  --t-s: 13px;
  --t-m: 14px;
  --t-l: 16px;
  --t-xl: 20px;
  --t-2xl: 26px;
  --graisse-texte: 400;
  --graisse-fort: 600;
  --graisse-titre: 800;

  /* Espacements (pas de 4 px) */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  /* Rayons */
  --rayon-s: 8px;
  --rayon-m: 12px;
  --rayon-l: 16px;
  --rayon-pilule: 999px;

  /* Animations : courtes, coupées par « réduire les animations » */
  --duree-1: 120ms;
  --duree-2: 200ms;

  /* Cible tactile minimale (audit mobile : doigts gantés) */
  --cible: 48px;
}

/* ------------------------------------------------------------
   Thème clair (par défaut)
   ------------------------------------------------------------ */
:root,
:root[data-theme="clair"] {
  color-scheme: light;

  --c-fond: #F4F5FB;
  --c-surface: #FFFFFF;
  --c-surface-2: #EEF0F8;
  --c-survol: #E7E8FF;
  --c-texte: #171A2B;
  --c-texte-discret: #515675;
  --c-bordure: #E1E4F0;
  --c-bordure-champ: #8A8FAD;

  /* Marque : --c-marque porte du texte blanc ; --c-marque-texte s'écrit
     sur une surface. Une teinte par PME : voir « Teintes de marque » plus bas. */
  --c-marque: #4338CA;
  --c-marque-2: #6D28D9;
  --c-marque-survol: #3730A3;
  --c-marque-fond: #E7E8FF;
  --c-marque-texte: #4338CA;
  --c-sur-marque: #FFFFFF;
  --c-focus: #4338CA;
  --degrade-marque: linear-gradient(135deg, var(--c-marque), var(--c-marque-2));

  /* Navigation (toujours sombre) */
  --c-nav-1: #1E1B4B;
  --c-nav-2: #312E81;
  --c-nav-texte: #C7CAF0;
  --c-nav-actif: #4F46E5;
  --degrade-nav: linear-gradient(180deg, var(--c-nav-1), var(--c-nav-2));
  --c-pastille: #FFD60A;
  --c-sur-pastille: #15181C;

  /* États : toujours couleur + icône + texte (jamais la couleur seule).
     -texte sur -fond pour les pastilles ; -teinte pour une grande zone
     (ligne de tableau) qui garde le texte courant ; -trait pour un liseré. */
  --c-retard-texte: #8E1616;  --c-retard-fond: #FDE8E8;  --c-retard-teinte: #FDE8E8;  --c-retard-trait: #E02424;
  --c-urgent-texte: #7A3E00;  --c-urgent-fond: #FDEFC8;  --c-urgent-teinte: #FDF6DD;  --c-urgent-trait: #D49A06;
  --c-afaire-texte: #3730A3;  --c-afaire-fond: #E7E8FF;
  --c-depose-texte: #03543F;  --c-depose-fond: #DEF7EC;  --c-depose-trait: #0E9F6E;
  --c-clos-texte:   #414659;  --c-clos-fond:   #E9EAF2;

  /* Aplats portant du texte blanc (boutons, notifications brèves) */
  --c-succes: #047857;
  --c-alerte: #B45309;
  --c-danger: #B91C1C;
  --c-succes-fort: #065F46;
  --c-alerte-fort: #92400E;
  --c-danger-fort: #991B1B;
  --c-message: #171A2B;
  --c-voile: rgba(23, 26, 43, .5);

  /* Graphiques (tableau de bord) : séries de données */
  --c-graph-1: #4338CA;  --c-graph-2: #0E9F6E;  --c-graph-3: #D49A06;  --c-graph-4: #E02424;  --c-graph-5: #7C3AED;
  --c-graph-6: #0891B2;  --c-graph-7: #EA580C;  --c-graph-8: #65A30D;  --c-graph-9: #DB2777;  --c-graph-10: #6B7280;

  --bord-carte: 0px;
  --ombre-s: 0 1px 2px rgba(23, 26, 43, .05), 0 2px 8px rgba(23, 26, 43, .05);
  --ombre-m: 0 1px 2px rgba(23, 26, 43, .05), 0 8px 24px rgba(23, 26, 43, .07);
  --ombre-l: 0 20px 60px rgba(23, 26, 43, .25);
  --ombre-marque: 0 6px 16px color-mix(in srgb, var(--c-marque) 32%, transparent);
  --halo: 0 0 0 3px color-mix(in srgb, var(--c-marque) 22%, transparent);
}

/* ------------------------------------------------------------
   Thème sombre
   ------------------------------------------------------------ */
:root[data-theme="sombre"] {
  color-scheme: dark;

  --c-fond: #0F1020;
  --c-surface: #1A1C33;
  --c-surface-2: #23264A;
  --c-survol: #2B2E5C;
  --c-texte: #ECEEFB;
  --c-texte-discret: #A9AED0;
  --c-bordure: #2E3254;
  --c-bordure-champ: #7A80A8;

  --c-marque: #4F46E5;
  --c-marque-2: #7C3AED;
  --c-marque-survol: #4338CA;
  --c-marque-fond: #2B2D6B;
  --c-marque-texte: #A5B4FC;
  --c-sur-marque: #FFFFFF;
  --c-focus: #A5B4FC;

  --c-nav-1: #14152B;
  --c-nav-2: #1B1C3D;
  --c-nav-texte: #B9BDE6;
  --c-nav-actif: #4F46E5;

  --c-retard-texte: #FCA5A5;  --c-retard-fond: #4A1518;  --c-retard-teinte: #2A1620;  --c-retard-trait: #F87171;
  --c-urgent-texte: #FCD34D;  --c-urgent-fond: #453006;  --c-urgent-teinte: #2A2418;  --c-urgent-trait: #FBBF24;
  --c-afaire-texte: #C7D2FE;  --c-afaire-fond: #2B2D6B;
  --c-depose-texte: #86EFAC;  --c-depose-fond: #0F3D2A;  --c-depose-trait: #34D399;
  --c-clos-texte:   #C5C9E0;  --c-clos-fond:   #2A2D45;

  --c-message: #2B2E5C;
  --c-voile: rgba(0, 0, 0, .65);

  --c-graph-1: #818CF8;  --c-graph-2: #34D399;  --c-graph-3: #FBBF24;  --c-graph-4: #F87171;  --c-graph-5: #A78BFA;
  --c-graph-6: #22D3EE;  --c-graph-7: #FB923C;  --c-graph-8: #A3E635;  --c-graph-9: #F472B6;  --c-graph-10: #9CA3AF;

  --bord-carte: 1px;
  --ombre-s: none;
  --ombre-m: none;
  --ombre-l: 0 20px 60px rgba(0, 0, 0, .6);
  --ombre-marque: none;
  --halo: 0 0 0 3px color-mix(in srgb, var(--c-marque-texte) 35%, transparent);
}

/* ------------------------------------------------------------
   Thème « Plein soleil » : tout en AAA, aplats pleins, pas de dégradé
   ------------------------------------------------------------ */
:root[data-theme="soleil"] {
  color-scheme: light;

  --c-fond: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-surface-2: #EDEDF5;
  --c-survol: #E0DEFF;
  --c-texte: #000000;
  --c-texte-discret: #26283A;
  --c-bordure: #11132A;
  --c-bordure-champ: #000000;

  --c-marque: #2A1FA8;
  --c-marque-2: #2A1FA8;
  --c-marque-survol: #1D1580;
  --c-marque-fond: #E0DEFF;
  --c-marque-texte: #2A1FA8;
  --c-focus: #000000;
  --degrade-marque: none;

  --c-nav-1: #000000;
  --c-nav-2: #000000;
  --c-nav-texte: #FFFFFF;
  --c-nav-actif: #2A1FA8;

  --c-retard-texte: #FFFFFF;  --c-retard-fond: #8C0F14;  --c-retard-teinte: #FFE3E3;  --c-retard-trait: #8C0F14;
  --c-urgent-texte: #000000;  --c-urgent-fond: #FFC400;  --c-urgent-teinte: #FFF1B8;  --c-urgent-trait: #7A4F00;
  --c-afaire-texte: #FFFFFF;  --c-afaire-fond: #1E3A8A;
  --c-depose-texte: #FFFFFF;  --c-depose-fond: #0B4D2C;  --c-depose-trait: #0B4D2C;
  --c-clos-texte:   #000000;  --c-clos-fond:   #D9DBE6;

  --c-succes: #0B4D2C;
  --c-alerte: #7A3E00;
  --c-danger: #8C0F14;
  --c-succes-fort: #0B4D2C;
  --c-alerte-fort: #7A3E00;
  --c-danger-fort: #8C0F14;
  --c-message: #000000;

  --graisse-texte: 500;
  --graisse-fort: 700;
  --bord-carte: 2px;
  --ombre-s: none;
  --ombre-m: none;
  --ombre-marque: none;
  --halo: 0 0 0 3px #FFC400;
}

/* ------------------------------------------------------------
   Teintes de marque : une par PME (Administration › Marque,
   js/core/marque.js pose <html data-marque="…">). Sans attribut :
   indigo, la teinte d'origine. Chaque teinte redéfinit la marque et la
   navigation dans les trois thèmes ; les couleurs d'ÉTAT (retard,
   urgent, déposé…) ne changent jamais. Contrastes contrôlés pour chaque
   teinte et chaque thème par app/tests/design.test.mjs — une teinte ne
   s'ajoute qu'ici, puis dans MARQUE_TEINTES (marque.js) et dans la
   migration qui valide la valeur en base.
   ------------------------------------------------------------ */
:root[data-marque="bleu"] {
  --c-marque: #1D4ED8;
  --c-marque-2: #0369A1;
  --c-marque-survol: #1E40AF;
  --c-marque-fond: #DBEAFE;
  --c-marque-texte: #1D4ED8;
  --c-focus: #1D4ED8;
  --c-nav-1: #0F1E3D;
  --c-nav-2: #172F5E;
  --c-nav-texte: #C3D3F5;
  --c-nav-actif: #2563EB;
}
:root[data-marque="bleu"][data-theme="sombre"] {
  --c-marque: #2563EB;
  --c-marque-2: #0369A1;
  --c-marque-survol: #1D4ED8;
  --c-marque-fond: #1E3A6E;
  --c-marque-texte: #93C5FD;
  --c-focus: #93C5FD;
  --c-nav-1: #0E1526;
  --c-nav-2: #131E38;
  --c-nav-texte: #B8C7E6;
  --c-nav-actif: #2563EB;
}
:root[data-marque="bleu"][data-theme="soleil"] {
  --c-marque: #1E3A8A;
  --c-marque-2: #1E3A8A;
  --c-marque-survol: #172554;
  --c-marque-fond: #DBEAFE;
  --c-marque-texte: #1E3A8A;
  --c-focus: #000000;
  --c-nav-1: #000000;
  --c-nav-2: #000000;
  --c-nav-texte: #FFFFFF;
  --c-nav-actif: #1E3A8A;
}
:root[data-marque="turquoise"] {
  --c-marque: #0F766E;
  --c-marque-2: #0E7490;
  --c-marque-survol: #115E59;
  --c-marque-fond: #CCFBF1;
  --c-marque-texte: #0F766E;
  --c-focus: #0F766E;
  --c-nav-1: #0B2B2E;
  --c-nav-2: #11403F;
  --c-nav-texte: #BFE6E0;
  --c-nav-actif: #0F766E;
}
:root[data-marque="turquoise"][data-theme="sombre"] {
  --c-marque: #0F766E;
  --c-marque-2: #0E7490;
  --c-marque-survol: #115E59;
  --c-marque-fond: #134E4A;
  --c-marque-texte: #5EEAD4;
  --c-focus: #5EEAD4;
  --c-nav-1: #0C1A1C;
  --c-nav-2: #10272A;
  --c-nav-texte: #B5D9D5;
  --c-nav-actif: #0F766E;
}
:root[data-marque="turquoise"][data-theme="soleil"] {
  --c-marque: #134E4A;
  --c-marque-2: #134E4A;
  --c-marque-survol: #042F2E;
  --c-marque-fond: #CCFBF1;
  --c-marque-texte: #134E4A;
  --c-focus: #000000;
  --c-nav-1: #000000;
  --c-nav-2: #000000;
  --c-nav-texte: #FFFFFF;
  --c-nav-actif: #134E4A;
}
:root[data-marque="vert"] {
  --c-marque: #15803D;
  --c-marque-2: #047857;
  --c-marque-survol: #166534;
  --c-marque-fond: #DCFCE7;
  --c-marque-texte: #166534;
  --c-focus: #166534;
  --c-nav-1: #0D2A1B;
  --c-nav-2: #14402A;
  --c-nav-texte: #C2E8D0;
  --c-nav-actif: #15803D;
}
:root[data-marque="vert"][data-theme="sombre"] {
  --c-marque: #15803D;
  --c-marque-2: #047857;
  --c-marque-survol: #166534;
  --c-marque-fond: #14532D;
  --c-marque-texte: #86EFAC;
  --c-focus: #86EFAC;
  --c-nav-1: #0D1A12;
  --c-nav-2: #12261A;
  --c-nav-texte: #B9DBC6;
  --c-nav-actif: #15803D;
}
:root[data-marque="vert"][data-theme="soleil"] {
  --c-marque: #14532D;
  --c-marque-2: #14532D;
  --c-marque-survol: #052E16;
  --c-marque-fond: #DCFCE7;
  --c-marque-texte: #14532D;
  --c-focus: #000000;
  --c-nav-1: #000000;
  --c-nav-2: #000000;
  --c-nav-texte: #FFFFFF;
  --c-nav-actif: #14532D;
}
:root[data-marque="orange"] {
  --c-marque: #C2410C;
  --c-marque-2: #B45309;
  --c-marque-survol: #9A3412;
  --c-marque-fond: #FFEDD5;
  --c-marque-texte: #9A3412;
  --c-focus: #9A3412;
  --c-nav-1: #2B1A10;
  --c-nav-2: #432818;
  --c-nav-texte: #F2D6C2;
  --c-nav-actif: #C2410C;
}
:root[data-marque="orange"][data-theme="sombre"] {
  --c-marque: #C2410C;
  --c-marque-2: #B45309;
  --c-marque-survol: #9A3412;
  --c-marque-fond: #5A2A0E;
  --c-marque-texte: #FDBA74;
  --c-focus: #FDBA74;
  --c-nav-1: #1C140F;
  --c-nav-2: #2A1C13;
  --c-nav-texte: #E6CDBB;
  --c-nav-actif: #C2410C;
}
:root[data-marque="orange"][data-theme="soleil"] {
  --c-marque: #7C2D12;
  --c-marque-2: #7C2D12;
  --c-marque-survol: #431407;
  --c-marque-fond: #FFEDD5;
  --c-marque-texte: #7C2D12;
  --c-focus: #000000;
  --c-nav-1: #000000;
  --c-nav-2: #000000;
  --c-nav-texte: #FFFFFF;
  --c-nav-actif: #7C2D12;
}
:root[data-marque="rouge"] {
  --c-marque: #B91C1C;
  --c-marque-2: #BE123C;
  --c-marque-survol: #991B1B;
  --c-marque-fond: #FEE2E2;
  --c-marque-texte: #B91C1C;
  --c-focus: #B91C1C;
  --c-nav-1: #2B1216;
  --c-nav-2: #451A22;
  --c-nav-texte: #F3CBD1;
  --c-nav-actif: #B91C1C;
}
:root[data-marque="rouge"][data-theme="sombre"] {
  --c-marque: #B91C1C;
  --c-marque-2: #BE123C;
  --c-marque-survol: #991B1B;
  --c-marque-fond: #5C1A1F;
  --c-marque-texte: #FCA5A5;
  --c-focus: #FCA5A5;
  --c-nav-1: #1D1114;
  --c-nav-2: #2B161B;
  --c-nav-texte: #E6C4CA;
  --c-nav-actif: #B91C1C;
}
:root[data-marque="rouge"][data-theme="soleil"] {
  --c-marque: #7F1D1D;
  --c-marque-2: #7F1D1D;
  --c-marque-survol: #450A0A;
  --c-marque-fond: #FEE2E2;
  --c-marque-texte: #7F1D1D;
  --c-focus: #000000;
  --c-nav-1: #000000;
  --c-nav-2: #000000;
  --c-nav-texte: #FFFFFF;
  --c-nav-actif: #7F1D1D;
}

/* ------------------------------------------------------------
   Alias historiques : noms utilisés par style.css depuis s2ie-gestion.
   Ils pointent sur les jetons ci-dessus ; ne plus en créer.
   ------------------------------------------------------------ */
:root {
  --bg: var(--c-fond);
  --white: var(--c-surface);
  --row-alt: var(--c-surface-2);
  --text: var(--c-texte);
  --text-muted: var(--c-texte-discret);
  --border: var(--c-bordure);
  --sidebar: var(--c-nav-1);
  --sidebar-hover: var(--c-nav-2);
  --accent: var(--c-marque);
  --accent-hover: var(--c-marque-survol);
  --success: var(--c-succes);
  --warning: var(--c-alerte);
  --danger: var(--c-danger);
  --info: var(--c-marque);
  --shadow: var(--ombre-s);
  --shadow-md: var(--ombre-m);
  --radius: var(--rayon-s);
  --font: var(--police);
}

/* ------------------------------------------------------------
   Socle
   ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body { font-weight: var(--graisse-texte); -webkit-font-smoothing: antialiased; }

/* Le focus clavier reste toujours visible */
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* Icônes : <svg class="icone"><use href="assets/icones/lucide.svg#nom"/></svg>
   (js/core/ui.js : icone('nom')). Elles prennent la couleur du texte. */
.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}

/* Pastille d'état : couleur + icône + texte */
.etat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--rayon-pilule);
  font-size: var(--t-s);
  font-weight: 700;
  white-space: nowrap;
}
.etat-retard { color: var(--c-retard-texte); background: var(--c-retard-fond); }
.etat-urgent { color: var(--c-urgent-texte); background: var(--c-urgent-fond); }
.etat-afaire { color: var(--c-afaire-texte); background: var(--c-afaire-fond); }
.etat-depose { color: var(--c-depose-texte); background: var(--c-depose-fond); }
.etat-clos   { color: var(--c-clos-texte);   background: var(--c-clos-fond); }

/* ---- Menu du thème (core/theme.js) : commun à l'application et à la
   page publique de suivi ---- */
/* Bouton rond de l'en-tête : thème, notifications */
.barre-bouton {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; background: none; color: var(--text);
  border: 1px solid var(--c-bordure-champ); border-radius: var(--rayon-m);
  font-size: 16px; cursor: pointer;
}
.barre-bouton:hover { background: var(--c-survol); }
.theme-menu { position: relative; }
/* Bouton du menu : icône fixe + « Thème » + chevron (libellé masqué sur téléphone) */
.theme-bouton { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px; font: 700 13px var(--font); }
.theme-bouton .icone:last-child { width: 14px; height: 14px; }
@media (max-width: 768px) { .theme-libelle { display: none; } }
.theme-panneau {
  position: absolute; right: 0; top: 46px; min-width: 200px; padding: 6px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rayon-m);
  box-shadow: var(--ombre-l); z-index: 200;
}
.theme-choix {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--cible);
  padding: 0 12px; border: none; border-radius: var(--rayon-s); background: none;
  color: var(--text); font: 600 14px var(--font); text-align: left; cursor: pointer;
}
.theme-choix:hover { background: var(--c-survol); }
.theme-choix[aria-checked="true"] { background: var(--c-marque-fond); color: var(--c-marque-texte); }
.theme-coche { margin-left: auto; }
.hidden { display: none !important; }

/* ---- Écran vide (core/ui.js, videHtml) : icône, titre, phrase, action ---- */
.vide {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 420px; margin: 0 auto; padding: 40px 20px; text-align: center;
}
.vide-icone {
  display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px;
  border-radius: var(--rayon-l); background: var(--c-marque-fond); color: var(--c-marque-texte); font-size: 28px;
}
.vide-titre { margin: 0; font-size: 17px; font-weight: var(--graisse-titre); color: var(--c-texte); }
.vide-texte { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-texte-discret); }
.vide-action { margin-top: 10px; min-height: var(--cible); }
.vide-compact { padding: 20px 14px; }
.vide-compact .vide-icone { width: 44px; height: 44px; font-size: 20px; border-radius: var(--rayon-m); }
.vide-compact .vide-titre { font-size: 14px; }
.vide-compact .vide-texte { font-size: 13px; }

/* Numéros (ND, dates) : chiffres de largeur fixe */
.chiffres { font-variant-numeric: tabular-nums; }

/* « Réduire les animations » demandé par l'utilisateur : plus rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}