/*
 * Jetons de la charte graphique Kofreo — docs/CHARTE-GRAPHIQUE.md §1 et §8.1.
 * Charte v2, adoptée le 23/09/2026 (GLOBAL-019, UI-086).
 *
 * SEUL FICHIER où une valeur de couleur, de taille ou de rayon s'écrit en
 * clair. Partout ailleurs — composant, page, PDF — on lit une variable.
 * Un test le vérifie (Kofreo.Web.Tests).
 *
 * LES NOMS SONT CEUX D'AVANT LA V2, seules les valeurs ont changé : plus de
 * deux mille emplois les lisent déjà, et les écrans passent au v2 un par un
 * (Renald, 23/09/2026). Un nom qui n'existait pas s'ajoute ; un nom ancien
 * que la v2 a fondu dans un autre le lit par var(), pour qu'une valeur ne
 * s'écrive qu'une fois.
 *
 * --accent change avec la société connectée (charte §8.3) : voir la fin du
 * fichier.
 */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/Manrope-Variable.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Marque (§1.1) — valeurs du défaut ; voir la palette en fin de fichier. */
    --accent: #4f46e5;
    --accent-survol: #3b34c9;
    --accent-fonce: #3730a3;
    --accent-enfonce: var(--accent-fonce);
    --accent-doux: #eef0ff;
    --accent-logo: #f0862f;
    --marque: #b90140;

    /* Surfaces (§1.2) */
    --fond-travail: #f3f4f9;
    --surface: #ffffff;
    --surface-douce: #f7f8fc;
    --surface-bandeau: #fafbfd;
    --surface-unite: #f9fafc;
    --segment-fond: #e7e9f2;
    --colonne: #e9ebf3;
    --bordure: #e3e5ee;

    /* Le contour d'un champ, d'une case, d'un interrupteur éteint. Plus foncé
       que les autres bordures, et ce n'est pas une nuance de goût : le WCAG
       demande 3:1 pour ce qui délimite un contrôle, et le #d8dbe7 de la v2 ne
       donnait que 1,38 (charte §7.1). Le gris « neutre » de la v2 (#8a8fa8)
       tenait sur une carte mais pas sur le fond de travail (2,91) : celui-ci,
       de la même teinte, tient 3:1 sur toutes les surfaces claires. */
    --bordure-controle: #858aa3;

    --filet: #eceef5;
    --filet-fort: #dfe2ee;
    --pointille: #cfd3e3;

    /* Texte (§1.3) */
    --texte: #14172b;
    --texte-courant: #3d4260;
    --texte-libelle: #5b6180;
    /* Aide, dates, placeholder, « — ». Le #6b7089 de la v2 donnait 4,44 sur le
       fond de travail ; celui-ci passe 4,5:1 sur toutes les surfaces claires,
       sauf le fond d'une colonne de kanban, où l'on prend --texte-libelle. */
    --texte-attenue: #666b84;
    --texte-bouton: #23273d;
    --texte-compteur: #4a5070;
    /* Décoratif seulement (1,86:1) : chevron de fil d'Ariane, poignée. */
    --icone-pale: #b9bdd2;

    /* Menu latéral, toujours sombre (§1.4) */
    --nav: #161a2e;
    --nav-texte: #b7bcd4;
    --nav-texte-survol: #c3c7db;
    --nav-texte-2: #9ea3bd;
    --nav-champ: #232842;
    --nav-survol: var(--nav-champ);
    --nav-filet: #2a2f4a;
    --nav-avatar: #2d3352;

    /* Groupes, sous-entrées et badges du menu (UI-097, charte v2 §1.4). Le
       survol d'une entrée est un voile blanc à 6 % : il éclaircit le fond sans
       en changer la teinte. La sous-entrée active prend l'accent à 18 % — une
       valeur par couleur de la palette, en fin de fichier. */
    --nav-entree-survol: rgba(255, 255, 255, 0.06);
    --nav-sous-entree-active: rgba(79, 70, 229, 0.18);
    --nav-badge-info-fond: var(--nav-avatar);
    --nav-badge-info-texte: var(--nav-texte-survol);
    --nav-badge-attention-fond: var(--ambre);
    --nav-badge-danger-fond: var(--rouge);
    --nav-badge-texte: var(--surface);
    /* Le contour de focus SUR LE MENU. L'accent n'y tient pas le 3:1 du §7
       (2,73 pour le violet par défaut, 2,74 pour le rouge de la palette) : sur
       ce fond sombre, le contour prend la nuance douce de l'accent. */
    --nav-contour-focus: var(--accent-doux);

    /* Statuts (§1.5) — une couleur, un sens. */
    --vert: #2f9e68;
    --succes-bandeau: #eefaf3;
    --succes-bordure: #cdeadb;
    --succes-bandeau-texte: #2b6a4c;
    --succes-bandeau-fort: #14472f;

    --ambre: #8a5a00;
    --attention-bandeau: #fffaf1;
    --attention-bordure: #f0d9b5;
    --attention-icone-fond: #f6e2c2;
    --attention-bandeau-texte: #7a5a20;
    --attention-bandeau-fort: #5c3c05;

    --danger: #d64545;
    --rouge: #b42323;
    --danger-bandeau: #fdf2f2;
    --danger-bordure: #f6d7d7;
    --danger-icone-fond: #fbe0e0;
    --danger-bandeau-texte: #7a3a3a;
    --danger-bandeau-fort: #5c1f1f;
    --champ-erreur-fond: #fdf6f6;
    --danger-sur-sombre: #ff9c9c;

    --neutre: #8a8fa8;
    --compteur-fond: #eef0f6;

    /* Privé : ce que le client ne voit jamais (§5). */
    --prive-fond: #fff8e1;
    --prive-bordure: #f1e3a6;
    --prive-texte: #8a6d1a;
    --prive-colonne: #fffbea;
    --marge: #e0a020;

    --fournisseur: #0f766e;
    --fournisseur-doux: #e6f2f0;
    --fournisseur-texte: #0f5f58;

    --barre-selection: #14172b;
    --barre-selection-filet: #3a4062;
    --barre-selection-bouton: #232842;

    /* Pastilles : cinq tons nommés par leur sens (§1.5, §2.4). */
    --pastille-accent-fond: var(--accent-doux);
    --pastille-accent-texte: var(--accent-fonce);
    --pastille-gris-fond: #f1f2f7;
    --pastille-gris-texte: #3d4260;
    --pastille-vert-fond: #e3f4ea;
    --pastille-vert-texte: #176b43;
    --pastille-ambre-fond: #fff1e3;
    --pastille-ambre-texte: #9a4a0c;
    --pastille-rouge-fond: #fdecec;
    --pastille-rouge-texte: var(--rouge);

    /* Initiales d'un contact sans photo (CTC-045) : la palette fermée dans
       laquelle une société choisit une teinte par couple rôle × type. Chaque
       fond est vérifié lisible sous ses initiales par l'épreuve de contraste ;
       les noms suivent KofreoContactColours.Tones, qu'une épreuve tient en
       phase. */
    --teinte-orange-fond: var(--accent-logo);
    --teinte-orange-texte: var(--texte);
    --teinte-indigo-fond: #4f46e5;
    --teinte-indigo-texte: var(--surface);
    --teinte-bleu-fond: #2563eb;
    --teinte-bleu-texte: var(--surface);
    --teinte-sarcelle-fond: var(--fournisseur);
    --teinte-sarcelle-texte: var(--surface);
    --teinte-vert-fond: #15803d;
    --teinte-vert-texte: var(--surface);
    --teinte-ambre-fond: #b45309;
    --teinte-ambre-texte: var(--surface);
    --teinte-rose-fond: #be123c;
    --teinte-rose-texte: var(--surface);
    --teinte-violet-fond: #7e22ce;
    --teinte-violet-texte: var(--surface);
    --teinte-ardoise-fond: #475569;
    --teinte-ardoise-texte: var(--surface);
    --teinte-gris-fond: var(--pastille-gris-fond);
    --teinte-gris-texte: var(--pastille-gris-texte);

    /* Boutons secondaires (§2.1). Leur contour garde le #d8dbe7 de la v2 :
       le libellé suffit à identifier un bouton, le 3:1 ne s'applique pas à
       son bord. */
    --bouton: var(--surface);
    --bouton-survol: var(--surface-douce);
    --bouton-enfonce: var(--filet);
    --bouton-bordure: #d8dbe7;
    --bouton-bordure-survol: var(--pointille);

    /* Formes (§1.7) */
    --rayon-etiquette: 6px;
    --rayon-petit: 8px;
    --rayon-champ: 9px;
    --rayon-menu: 10px;
    --rayon-encart: 12px;
    --rayon-barre: 14px;
    --rayon-surface: 16px;
    --rayon-fenetre: 18px;
    --rayon-pastille: 999px;

    --ombre-carte: 0 1px 2px rgba(20, 23, 43, 0.08);
    --ombre-segment: 0 1px 2px rgba(20, 23, 43, 0.12);
    --ombre-flottante: 0 12px 28px rgba(20, 23, 43, 0.16);
    --ombre-barre-selection: 0 10px 24px rgba(20, 23, 43, 0.28);
    --ombre-fenetre: 0 24px 60px rgba(10, 12, 26, 0.4);
    /* Voile derrière une fenêtre modale. */
    --voile: rgba(20, 23, 43, 0.5);

    /* Espacements (§1.7). Chaque jeton est UNE longueur, jamais un raccourci
       à plusieurs valeurs : on les emploie dans des calc() et des paddings
       composés, où « 20px 22px » casserait tout. */
    --marge-carte-haut: 20px;
    --marge-carte: 22px;
    --marge-carte-rail-haut: 18px;
    --marge-carte-rail: 20px;
    --marge-encart-haut: 12px;
    --marge-encart: 14px;
    --marge-fenetre: 20px;
    --marge-contenu: 36px;
    --espace-blocs: 20px;
    --espace-colonnes: 22px;
    --espace-champs: 6px;
    --largeur-rail: 330px;
    /* La colonne principale d'une fiche ne descend pas sous cette largeur à
       côté du rail : en dessous, le rail passe sous elle (IA-019). */
    --largeur-fiche-min: 444px;

    /* Le tiroir d'un module, à droite de l'écran (IA-010, charte v2 §2.21) :
       400 px par défaut, 320 au moins, et sans plafond fixe — l'écran d'à côté
       garde toujours --largeur-ecran-min, c'est le tiroir qui cède (IA-018).
       Les bornes sont dans Layout/PanelWidth.cs, et des épreuves gardent ces
       deux valeurs égales aux siennes. La poignée qui le règle à la souris a
       la largeur d'une cible confortable. */
    --largeur-tiroir: 400px;
    --largeur-ecran-min: 480px;
    --largeur-poignee-tiroir: 8px;

    /* Hauteurs (§8.1). Un bouton, un champ et une liste déroulante posés sur
       la même ligne ont la même hauteur, bordure comprise (UI-079). */
    --hauteur-bouton: 38px;
    --hauteur-bouton-compact: 34px;
    --hauteur-champ: 38px;
    --hauteur-champ-compact: 36px;

    /* Les boutons d'un en-tête de fiche et la pastille du titre qu'ils
       regardent (UI-053) : une seule valeur pour les deux. */
    --hauteur-entete: 40px;
    /* Le titre d'un en-tête de fiche garde au moins cette largeur : en deçà,
       le chiffre clé et les boutons passent sous lui (UI-123). Sur un écran de
       1 280 px à 100 %, une facture émise tient encore sur une ligne. */
    --largeur-titre-fiche-min: 280px;

    /* Le menu déployé : 264 px par défaut, et chacun le règle de 232 à 320 px
       sur son navigateur (UI-105). La largeur choisie se pose sur la racine de
       la page et remplace celle-ci ; les bornes sont dans Layout/MenuWidth.cs,
       et une épreuve garde ce défaut égal au sien. */
    --largeur-menu: 264px;
    /* Le zoom de l'interface (UI-123) : 1 par défaut, et chacun choisit de 0,8
       à 1,5 sur son navigateur, dans Mon affichage. Le zoom choisi se pose sur
       la racine avec la propriété « zoom », qui multiplie aussi les unités de
       fenêtre : toute longueur en vh ou en vw se divise par celui-ci, sans quoi
       la page dépasserait l'écran à 125 % (crans dans Layout/InterfaceZoom.cs). */
    --zoom: 1;
    /* Le menu replié en rail d'icônes (UI-076). */
    --largeur-menu-rail: 64px;
    --hauteur-entree-menu: 40px;
    /* Le menu v2 en détail (UI-097) : la sous-entrée d'un groupe, le badge,
       la rangée du logo et le bloc du compte. */
    --hauteur-sous-entree-menu: 36px;
    --hauteur-badge-menu: 18px;
    --hauteur-logo-menu: 32px;
    --hauteur-compte-menu: 30px;
    /* Le panneau des résultats de la recherche globale, qui déborde du menu
       sur le fond clair (SOC-009). */
    --largeur-resultats-recherche: 320px;
    /* Le volet d'un groupe quand le menu est replié en rail : la largeur du
       menu déployé — celle que la personne a choisie —, lue ici, à la racine,
       avant que le rail ne redéfinisse la sienne plus bas dans la page. */
    --largeur-volant-menu: var(--largeur-menu);
    /* Le symbole du logo en quatre briques (§0) : celle en haut à droite se
       soulève d'un écart de brique et tourne de 12°, comme dans les fichiers
       du logo (Renald, 03/10/2026). */
    --largeur-symbole: 22px;
    --hauteur-brique: 9px;
    --rayon-brique: 3px;
    --ecart-brique: 3px;
    --rotation-brique: 12deg;
    --hauteur-entete-tableau: 42px;
    --hauteur-ligne-tableau: 62px;
    --hauteur-ligne-document: 58px;
    --hauteur-pastille: 24px;
    --hauteur-etiquette: 22px;
    --hauteur-marqueur: 20px;
    /* L'interrupteur (§2.17) et le carré d'icône d'une carte d'application
       (SOC-096). */
    --largeur-interrupteur: 44px;
    --hauteur-interrupteur: 26px;
    --pastille-interrupteur: 20px;
    --hauteur-icone-carte: 36px;
    /* Un curseur et sa valeur (§2.20, UI-105) : assez long pour viser une
       position au pixel près, assez court pour se lire d'un coup d'œil. */
    --largeur-curseur: 440px;

    /*
     * Typographie (§1.6) — une seule taille héritée, les autres sont des
     * exceptions nommées. Manrope est servie par Kofreo lui-même (voir la règle
     * @font-face en tête) : aucune page n'appelle Google Fonts.
     */
    --police: "Manrope", "Segoe UI", system-ui, sans-serif;
    --taille: 14px;
    --taille-titre-ecran: 26px;
    --taille-titre-fiche: 25px;
    --taille-titre-section: 16px;
    --taille-titre-fenetre: 15px;
    --taille-titre-colonne: 15px;
    --taille-libelle: 13px;
    --taille-secondaire: 13.5px;
    --taille-aide: 12.5px;
    --taille-pastille: 12px;
    --taille-etiquette: 11.5px;
    --taille-marqueur: 11px;

    /* Noms d'avant la v2, fondus dans l'échelle ci-dessus. */
    --taille-sous-titre: var(--taille-titre-section);
    --taille-entete-colonne: var(--taille-aide);
    --taille-ligne-tableau: var(--taille-secondaire);

    /* Les chiffres qu'on vient lire. */
    --taille-chiffre: 20px;
    --taille-chiffre-fort: 32px;
    --taille-chiffre-heros: 42px;

    /* Le logotype du menu : un dessin de marque, pas du texte qu'on lit. */
    --taille-marque: 17px;

    /* La palette que Paramètres propose (§8.3) : de quoi peindre les cinq
       pastilles du nuancier sans écrire une couleur dans la page. */
    --palette-4f46e5: #4f46e5;
    --palette-2563eb: #2563eb;
    --palette-0f766e: #0f766e;
    --palette-b45309: #b45309;
    --palette-be123c: #be123c;
}

/*
 * L'ACCENT DE LA SOCIÉTÉ (charte §8.3). Le navigateur pose data-accent sur la
 * racine (kofreo.setAccent) ; chaque couleur de la palette arrive avec ses
 * nuances écrites ici, pas calculées : la charte les donne, et un calcul ne
 * garantit pas le contraste d'un texte foncé sur son fond doux. Une valeur qui
 * n'est pas dans la palette ne trouve aucune règle et garde le défaut.
 *
 * La liste doit rester celle de Company.AccentPalette ; un test y veille.
 */
:root[data-accent="2563eb"] {
    --accent: #2563eb;
    --accent-survol: #1e51c1;
    --accent-fonce: #1943a0;
    --accent-doux: #f0f4fe;
    --nav-sous-entree-active: rgba(37, 99, 235, 0.18);
}

:root[data-accent="0f766e"] {
    --accent: #0f766e;
    --accent-survol: #0c615a;
    --accent-fonce: #0a504b;
    --accent-doux: #eef5f5;
    --nav-sous-entree-active: rgba(15, 118, 110, 0.18);
}

:root[data-accent="b45309"] {
    --accent: #b45309;
    --accent-survol: #944407;
    --accent-fonce: #7a3806;
    --accent-doux: #faf3ee;
    --nav-sous-entree-active: rgba(180, 83, 9, 0.18);
}

:root[data-accent="be123c"] {
    --accent: #be123c;
    --accent-survol: #9c0f31;
    --accent-fonce: #810c29;
    --accent-doux: #faeef1;
    --nav-sous-entree-active: rgba(190, 18, 60, 0.18);
}