/* =============================================================
   design-tokens.css — Design system "premium" (sidebar + surfaces
   soignées, icônes en dégradé, micro-interactions).

   Principe : ce fichier n'introduit AUCUNE couleur de marque en dur.
   Il alias les nouveaux noms de tokens (--color-*, --radius-*, --shadow-*)
   sur les variables déjà pilotées par GlobalSettings (--primary-color,
   --border-radius-medium, --box-shadow-medium... définies par
   templates/partials/head.html à partir de la base de données) afin que
   la personnalisation admin existante continue de faire autorité. Seuls
   les tokens qui n'ont pas d'équivalent existant (sidebar, accents de
   statut fixes, transition rapide des micro-interactions) reçoivent une
   valeur par défaut fixe ici.

   Chargé après theme.css et après le <style> inline de head.html qui
   définit les variables issues de GlobalSettings (voir ordre dans
   templates/partials/head.html) : les alias var(--primary-color) etc.
   se résolvent de toute façon sur la cascade finale, l'ordre textuel
   n'a donc pas d'incidence sur ces références.
   ============================================================= */

:root {
    /* === Rayons : alias des tokens GlobalSettings déjà configurables === */
    --radius-sm: var(--border-radius-small, 0.375rem);
    --radius: var(--border-radius-medium, 0.5rem);
    --radius-lg: var(--border-radius-large, 0.75rem);
    --radius-pill: 9999px;

    /* === Ombres : alias des tokens GlobalSettings déjà configurables === */
    --shadow-sm: var(--box-shadow-small, 0 1px 2px rgba(15, 23, 42, 0.06));
    --shadow: var(--box-shadow-medium, 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04));
    --shadow-md: var(--box-shadow-large, 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.06));

    /* Transition rapide dédiée aux micro-interactions "premium" (hover lift,
       collapse sidebar, focus ring...) — volontairement distincte de
       var(--transition) (vitesse/easing configurables par l'admin via
       GlobalSettings.transition_speed/transition_easing, utilisée par les
       composants déjà existants) pour ne jamais court-circuiter ce réglage
       admin en place. */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === Couleurs : alias des tokens GlobalSettings déjà configurables === */
    --color-primary: var(--primary-color);
    --color-primary-hover: var(--secondary-color);
    --color-accent: var(--accent-color);
    /* La marque employée en TEXTE : identique à l'aplat en clair, éclaircie en
       sombre (voir JETONS DE LISIBILITÉ plus bas). Toute règle `color:` qui
       voulait la couleur de marque passe par ces deux-là ; les fonds et
       bordures gardent --color-primary / --color-accent. */
    --color-primary-text: var(--color-primary);
    --color-accent-text: var(--color-accent);
    --color-bg: var(--background-color);
    --color-surface: var(--surface-color, #ffffff);
    --color-surface-secondary: var(--surface-alt-color, #f1f5f9);
    --color-text: var(--text-color);
    --color-text-muted: var(--text-secondary-color);
    --color-border: var(--border-color, #e2e8f0);

    /* === Couleurs de statut : fixes (pas de sens à les rendre configurables
       par marque, ce sont des conventions universelles succès/alerte/erreur) === */
    --color-success: #10b981;
    --color-success-rgb: 16, 185, 129;
    --color-warning: #f59e0b;
    --color-warning-rgb: 245, 158, 11;
    --color-danger: #ef4444;
    --color-danger-rgb: 239, 68, 68;
    --color-info: #3b82f6;
    --color-info-rgb: 59, 130, 246;

    /* === Sidebar : alias des tokens GlobalSettings.sidebar_* (voir head.html),
       personnalisable admin comme le header/footer plutôt que figée en dur. === */
    --color-sidebar: var(--sidebar-background-color, #1e293b);
    --color-sidebar-hover: var(--sidebar-hover-color, #334155);
    --color-sidebar-active: var(--sidebar-active-color, #0f172a);
    --color-sidebar-text: var(--sidebar-text-color, #e2e8f0);
    /* Mélanges du texte de la barre latérale : à 40 % (titres de section) le
       contraste tombait à 1,95:1 sur une barre claire configurée et 3,39:1 sur
       la barre sombre — 98 écrans. 80-82 % tiennent 4,5:1 sur les deux, la
       hiérarchie restant portée par la taille et les capitales. */
    --color-sidebar-text-muted: color-mix(in srgb, var(--color-sidebar-text, #e2e8f0) 80%, transparent);
    --color-sidebar-section-label: color-mix(in srgb, var(--color-sidebar-text, #e2e8f0) 82%, transparent);
    /* Rail resserré façon HubSpot/Linear (était 256/64/56) : moins de largeur
       gaspillée par le menu, plus de place pour le contenu — voir SIDEBAR
       dans theme.css pour le reste de la densité (paddings, tailles de police). */
    --sidebar-width: 228px;
    --sidebar-width-collapsed: 60px;
    --topbar-height: 52px;

    /* === Header (topbar) : alias des tokens GlobalSettings.header_* (voir
       head.html). Bordure/texte atténué dérivés par color-mix sur la couleur de
       texte du header plutôt que sur --color-border/--color-text-muted (globaux,
       pensés pour le fond de PAGE) : ces derniers restaient sombres même quand
       l'admin choisissait un fond de header foncé, rendant icônes/bordures/texte
       de la topbar (bouton menu, recherche, cloche, profil...) quasi invisibles
       sur leur propre fond — d'où cette section dédiée. */
    --color-header: var(--header-background-color, #ffffff);
    --color-header-hover: var(--header-hover-color, #f1f5f9);
    --color-header-text: var(--header-text-color, #1f2937);
    /* 65 % donnait 3,64:1 au bouton « Connexion » ; 85 % tient 4,5:1. */
    --color-header-text-muted: color-mix(in srgb, var(--color-header-text, #1f2937) 85%, transparent);
    --color-header-border: color-mix(in srgb, var(--color-header-text, #1f2937) 18%, transparent);

    /* === Touches "premium" : dégradé icônes/bandeaux, basé sur les vraies
       couleurs de marque (primary → accent), jamais une couleur en dur === */
    --gradient-accent: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 35%, transparent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* === Mapping vers les variables Bootstrap natives (bootstrap.min.css) ===
   Permet aux classes Bootstrap non re-stylées explicitement (.btn, .alert,
   .list-group...) d'hériter automatiquement de la charte, sans dupliquer
   chaque composant en CSS custom. */
:root {
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: var(--color-border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-lg);
    --bs-border-radius-2xl: var(--radius-lg);
    --bs-border-radius-pill: var(--radius-pill);
    --bs-box-shadow: var(--shadow);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow-lg: var(--shadow-md);
    --bs-font-sans-serif: var(--font-family);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: var(--primary-color-rgb);
    --bs-link-hover-color: var(--color-primary-hover);

    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--primary-color-rgb);
    --bs-secondary: var(--color-text-muted);
    --bs-secondary-rgb: var(--secondary-color-rgb);
    --bs-success: var(--color-success);
    --bs-success-rgb: var(--color-success-rgb);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: var(--color-warning-rgb);
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: var(--color-danger-rgb);
    --bs-info: var(--color-info);
    --bs-info-rgb: var(--color-info-rgb);

    /* --bs-primary/--bs-secondary ci-dessus ne suffisent pas à eux seuls :
       Bootstrap calcule les variantes "subtle" (.bg-primary-subtle,
       .text-primary-emphasis...) sur des tokens SÉPARÉS
       (--bs-primary-bg-subtle...), non dérivés de --bs-primary-rgb — sans
       cet alias, ces classes gardent le bleu/gris codé en dur de Bootstrap
       (ex: badges "N requis"/"N optionnels", voir _module_detail_scripts.html)
       au lieu de la couleur de marque du tenant, et restent en plus figées
       en clair quel que soit le thème puisqu'elles ne dépendent pas de
       --color-surface/--color-text. */
    --bs-primary-bg-subtle: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
    --bs-primary-border-subtle: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface));
    /* Texte des .alert-primary / .text-primary-emphasis : part du jeton de
       TEXTE de marque, qui s'éclaircit en sombre (2,87:1 sinon). */
    --bs-primary-text-emphasis: color-mix(in srgb, var(--color-primary-text) 80%, var(--color-text));
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--color-text-muted) 18%, var(--color-surface));
    --bs-secondary-border-subtle: color-mix(in srgb, var(--color-text-muted) 35%, var(--color-surface));
    --bs-secondary-text-emphasis: var(--color-text);
}

/* Police (Inter), vendorisée localement — voir static/fonts/inter/ — pas
   d'appel CDN Google Fonts (le projet vendorise systématiquement ses
   dépendances front, voir static/css/vendor et static/js/vendor). */
@font-face {
    font-family: 'Inter';
    src: url("../fonts/inter/Inter-Variable.260c81a4759b.woff2") format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

body {
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* Focus visible accessible et cohérent partout, y compris sur la sidebar
   sombre (contraste blanc semi-transparent plutôt que l'accent, invisible
   sur fond --color-sidebar). */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.sidebar :focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   JETONS DE LISIBILITÉ (contraste AA garanti)

   Source unique du projet. Ils existent parce que les jetons de marque ne
   tiennent pas le seuil AA (4,5:1) dans tous les contextes :
   `--text-secondary-color` (#6c757d) vaut 4,69:1 sur blanc pur mais 3,68 sur
   le fond de page ; la couleur PRIMAIRE employée en TEXTE sur fond sombre
   tombe à 1,80:1 (mesuré sur la barre d'outils du tableau) ; #ef4444 ne porte
   que 3,76:1 sous du blanc.

   Deux règles d'usage, valables partout :
   - les APLATS gardent la couleur exacte choisie par l'administrateur ; seuls
     les usages TEXTE passent par ces jetons ;
   - une couleur choisie par l'UTILISATEUR (catégorie, étiquette, valeur de
     colonne « Choix ») ne sert jamais de texte : elle devient une pastille,
     où aucune valeur n'est illisible.

   Les trois états de thème sont couverts : préférence système, choix explicite
   sombre, choix explicite clair. Un jeton défini uniquement sous
   `prefers-color-scheme` ne s'appliquerait pas au bascule manuel du produit
   (qui pose `:root[data-theme="dark"]`), et réciproquement.

   `static/css/task_manager.css` alimente ses propres `--task-*` depuis ces
   valeurs : ne pas les redéfinir ailleurs.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --readable-muted: #575e66;          /* >= 5,15:1 sur toutes les surfaces claires */
    --readable-danger-solid: #c62828;   /* fond plein, texte blanc : 5,62:1 */
    --readable-danger-text: #b91c1c;    /* texte rouge sur surface claire : 5,07:1 */
    --readable-neutral-solid: #5f676e;  /* badge neutre, texte blanc : 5,75:1 */
    --readable-accent-text: var(--primary-color);
    --readable-success-text: #0d6b52;   /* texte vert sur surface claire : 5,08:1 */
    --readable-success-solid: #0d6b52;  /* fond plein, texte blanc : 5,08:1 */
    --readable-warning-text: #8a5a08;   /* texte ambre sur surface claire : 5,04:1 */
    --readable-warning-solid: #a35c00;  /* fond plein, texte blanc : 4,58:1 */
    --readable-info-text: #1d4ed8;      /* texte bleu sur surface claire : 6,70:1 */
    --readable-info-solid: #1d4ed8;     /* fond plein, texte blanc : 6,70:1 */
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --readable-muted: #aab4bd;         /* >= 7,03:1 sur les surfaces sombres */
        --readable-danger-text: #f87171;   /* 5,36:1 */
        --readable-accent-text: var(--primary-color-on-dark, #4dbd97);
        --color-primary-text: var(--primary-color-on-dark, #4dbd97);
        --color-accent-text: var(--accent-color-on-dark, #4dbd97);
        /* Liens Bootstrap (`a`, .btn-link, .page-link…) : ils lisent ces
           triplets, et prenaient sinon la marque brute — 1,8:1 sur 93 écrans. */
        --bs-link-color: var(--primary-color-on-dark, #4dbd97);
        --bs-link-color-rgb: var(--primary-color-on-dark-rgb, 77, 189, 151);
        --bs-link-hover-color: var(--primary-color-on-dark-hover, #6fd0ae);
        --bs-link-hover-color-rgb: var(--primary-color-on-dark-hover-rgb, 111, 208, 174);
        --readable-success-text: #34d399;  /* 7,71:1 */
        --readable-warning-text: #e0ad52;  /* 8,05:1 */
        --readable-info-text: #93c5fd;     /* 8,45:1 */
    }
}
:root[data-theme="dark"] {
    --readable-muted: #aab4bd;
    --readable-danger-text: #f87171;
    --readable-accent-text: var(--primary-color-on-dark, #4dbd97);
    --color-primary-text: var(--primary-color-on-dark, #4dbd97);
    --color-accent-text: var(--accent-color-on-dark, #4dbd97);
    /* Liens Bootstrap (`a`, .btn-link, .page-link…) : ils lisent ces
       triplets, et prenaient sinon la marque brute — 1,8:1 sur 93 écrans. */
    --bs-link-color: var(--primary-color-on-dark, #4dbd97);
    --bs-link-color-rgb: var(--primary-color-on-dark-rgb, 77, 189, 151);
    --bs-link-hover-color: var(--primary-color-on-dark-hover, #6fd0ae);
    --bs-link-hover-color-rgb: var(--primary-color-on-dark-hover-rgb, 111, 208, 174);
    --readable-success-text: #34d399;
    --readable-warning-text: #e0ad52;
    --readable-info-text: #93c5fd;
}
:root[data-theme="light"] {
    --readable-muted: #575e66;
    --readable-danger-text: #b91c1c;
    --readable-accent-text: var(--primary-color);
    --readable-success-text: #0d6b52;
    --readable-warning-text: #8a5a08;
    --readable-info-text: #1d4ed8;
}