/* ============================================================================
   vue-decideur-tokens.css — Vue Décideur (Nydham)
   Pièce 2 du dossier d'intégration. Extrait de la maquette v12 du 18/08/2026.

   Nom de fichier : préfixé `vue-decideur-` pour ne pas entrer en collision avec
   le tokens.css partagé par le reste de l'application. Ces variables sont
   propres au module et ne doivent pas être promues au niveau global sans
   arbitrage.

   Règle : aucune valeur en dur ailleurs dans le module, même utilisée une seule
   fois. Tout ce qui suit est référencé par variable depuis les feuilles de style
   des composants. Si une valeur manque ici, elle est ajoutée ici, pas dans le
   composant.

   Convention : --dc- + kebab-case.
   ========================================================================== */

:root {

  /* --- Palette de données -------------------------------------------------
     Quatre familles, aucune autre couleur autorisée.
     violet / indigo = valeur principale · ambre = tension · rouge = alerte ·
     vert = tenu. Chaque famille a une version pleine (barres, bordures,
     courbes) et une version désaturée (pastilles de verdict : fond pâle,
     texte plein, bordure intermédiaire). */

  --dc-violet: #4c37dd;
  --dc-violet-fonce: #3f2cc4;          /* survol de bouton primaire */
  --dc-violet-lien: #2f22a8;           /* survol de lien */
  --dc-violet-pale-fond: #eeeefc;
  --dc-violet-pale-texte: #3f2cc4;
  --dc-violet-pale-bord: #dcd8f7;
  --dc-violet-estompe: #9b93e8;        /* segment secondaire de donut */
  --dc-violet-estompe-2: #d6d4e8;      /* segment « non catégorisé » */

  --dc-indigo: #2a2377;                /* 3e tuile, badges numérotés, donut */

  --dc-ambre: #d9971a;
  --dc-ambre-pale-fond: #fdf4e6;
  --dc-ambre-pale-texte: #a9720f;
  --dc-ambre-pale-bord: #f0dfbc;

  --dc-rouge: #c9352b;
  --dc-rouge-pale-fond: #fbeceb;
  --dc-rouge-pale-texte: #b02b21;
  --dc-rouge-pale-bord: #f1d2cf;
  --dc-rouge-hachure-clair: #fbeceb;   /* trame de dépassement, bloc 01 */
  --dc-rouge-hachure-fonce: #f4cdc9;
  --dc-rouge-hachure-bord: #e2a7a1;

  --dc-vert: #12996b;
  --dc-vert-pale-fond: #eaf6f0;
  --dc-vert-pale-texte: #0f7f57;
  --dc-vert-pale-bord: #cbe6da;

  --dc-neutre-pale-fond: #f5f5fa;      /* pastille sans verdict : « non catégorisé » */
  --dc-neutre-pale-texte: #6b6b8a;
  --dc-neutre-pale-bord: #e7e7f1;

  /* --- Surfaces ----------------------------------------------------------- */

  --dc-fond-page: #eeeef7;             /* lavande très clair */
  --dc-fond-carte: #ffffff;
  --dc-fond-nuit: #191938;             /* bandeau de titre, en-tête de drawer */
  --dc-fond-nuit-pastille: #1e1b4b;    /* avatar, sélecteur sombre de barre haute */
  --dc-fond-bandeau-etat: #f5f6fd;
  --dc-fond-socle: #f7f6fc;            /* socle du drawer */
  --dc-fond-formule: #f7f7fc;          /* bloc mono du drawer */
  --dc-fond-survol: #f8f7fd;           /* survol de ligne de tableau */
  --dc-fond-survol-menu: #f6f6fb;      /* survol d'entrée de menu */
  --dc-fond-survol-socle: #f0eef9;     /* survol d'accordéon dans le socle */
  --dc-fond-survol-nav: #f4f4fb;       /* survol d'icône de barre haute */
  --dc-fond-badge: #eceaf6;            /* compteur de sidebar, piste de barre */
  --dc-fond-pastille-info: #f0eff9;    /* pastille « i » d'affordance de bloc */
  --dc-fond-quart: #f2f5f3;            /* pastille T3 2026 de barre haute */
  --dc-voile: rgba(25, 25, 56, 0.40);  /* overlay de drawer de détail */
  --dc-voile-leger: rgba(25, 25, 56, 0.24); /* overlay de panneau de personnalisation */
  --dc-translucide: rgba(255, 255, 255, 0.09);      /* pilule sur fond nuit */
  --dc-translucide-survol: rgba(255, 255, 255, 0.16);
  --dc-translucide-bord: rgba(255, 255, 255, 0.14);

  /* --- Texte -------------------------------------------------------------- */

  --dc-texte-titre: #1e1b4b;           /* bleu nuit, titres et chiffres clés */
  --dc-texte-corps: #3a3a5c;
  --dc-texte-contexte: #5a5a78;        /* phrases éditoriales des compartiments */
  --dc-texte-secondaire: #6b6b8a;      /* libellés de tuile, unités */
  --dc-texte-tertiaire: #8a89a8;       /* surtitres, légendes */
  --dc-texte-faible: #9a99b5;          /* labels de rubrique de sidebar, mentions */
  --dc-texte-tres-faible: #b0aec6;
  --dc-texte-inverse: #ffffff;
  --dc-texte-inverse-faible: #a9a7c9;  /* sous-titre sur fond nuit */
  --dc-texte-inverse-tres-faible: #b6b4d4;

  /* --- Filets et bordures -------------------------------------------------- */

  --dc-filet-carte: #e7e7f1;           /* bordure de carte et de panneau */
  --dc-filet-bouton: #dedde9;
  --dc-filet-bouton-survol: #b7b6cc;
  --dc-filet-section: #dcdbea;         /* filet de titre de rubrique, pied d'écran */
  --dc-filet-drawer: #e0dfec;
  --dc-filet-doux: #eceaf6;            /* séparateurs internes de panneau */
  --dc-filet-tres-doux: #f1f0f8;       /* lignes de tableau */
  --dc-filet-tableau: #e3e2ef;         /* filet sous en-tête et sous dernière ligne */
  --dc-filet-socle: #e9e7f4;
  --dc-filet-formule: #e3e0f0;         /* séparateur des deux étages du bloc formule */
  --dc-filet-carte-viz: #f0eff7;       /* filet au-dessus d'une micro-visualisation */
  --dc-filet-sidebar: #f0f0f6;
  --dc-filet-bandeau-etat: #e3e4f4;
  --dc-filet-pointille: #b7b6cc;       /* piste vide bloc 05, seuils de micro-viz */

  --dc-filet-largeur: 1px;
  --dc-filet-accent-tuile: 4px;        /* bordure gauche de tuile KPI */
  --dc-filet-accent-carte: 3px;        /* filet supérieur de compartiment */
  --dc-filet-accent-actif: 3px;        /* item actif de sidebar */

  /* --- Typographie -------------------------------------------------------- */

  --dc-police: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dc-police-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --dc-graisse-normale: 400;
  --dc-graisse-medium: 500;
  --dc-graisse-semi: 600;
  --dc-graisse-forte: 700;

  --dc-taille-micro: 9.5px;            /* labels de rubrique de sidebar et de socle */
  --dc-taille-mini: 10px;              /* en-têtes de colonne de panneau */
  --dc-taille-legende: 10.5px;         /* légendes de visualisation */
  --dc-taille-note: 11px;              /* notes, en-têtes de tableau de drawer */
  --dc-taille-etiquette: 11.5px;       /* libellés de bloc, valeurs de barre */
  --dc-taille-cellule: 12px;           /* cellules de tableau, phrases de compartiment */
  --dc-taille-corps: 12.5px;           /* boutons, items de menu, lignes d'alerte */
  --dc-taille-corps-large: 13px;       /* navigation de sidebar, pied de drawer */
  --dc-taille-accordeon: 14px;
  --dc-taille-definition: 16.5px;      /* phrase de définition du drawer */
  --dc-taille-unite: 17px;             /* unité d'une tuile KPI */
  --dc-taille-titre-bandeau: 22px;
  --dc-taille-chiffre-tuile: 29px;
  --dc-taille-valeur-drawer: 40px;     /* valeur dans l'en-tête de drawer */
  --dc-taille-unite-compartiment: 22px;
  --dc-taille-chiffre-compartiment: 38px;

  --dc-interligne-serre: 1;
  --dc-interligne-phrase: 1.45;
  --dc-interligne-texte: 1.55;
  --dc-interligne-paragraphe: 1.6;

  --dc-interlettre-capitales: 0.09em;  /* petites capitales de libellé de bloc */
  --dc-interlettre-capitales-large: 0.13em; /* labels de rubrique */
  --dc-interlettre-capitales-socle: 0.14em;
  --dc-interlettre-titre: -0.01em;
  --dc-interlettre-chiffre: -0.025em;

  /* --- Espacements -------------------------------------------------------- */

  --dc-espace-1: 4px;
  --dc-espace-2: 6px;
  --dc-espace-3: 8px;
  --dc-espace-4: 10px;
  --dc-espace-5: 12px;
  --dc-espace-6: 14px;
  --dc-espace-7: 16px;
  --dc-espace-8: 20px;
  --dc-espace-9: 22px;
  --dc-espace-10: 24px;
  --dc-espace-11: 28px;
  --dc-espace-12: 32px;
  --dc-espace-13: 40px;

  --dc-gouttiere-grille: 16px;         /* entre cartes d'une rubrique */
  --dc-gouttiere-rubriques: 20px;      /* entre rubriques */
  /* ⚠️ DÉCOMPOSÉ, ET LE RACCOURCI EN DÉCOULE. Le pied de carte doit déborder du
     padding pour se coller aux trois bords (modèle B) : il lui faut la valeur
     EXACTE, en négatif. Un raccourci à trois valeurs ne se négative pas, et
     recopier « 16px » à la main dans la feuille voisine ferait deux vérités qui
     divergeraient au premier ajustement. */
  --dc-padding-carte-x: 16px;
  --dc-padding-carte-haut: 16px;
  --dc-padding-carte-bas: 18px;
  --dc-padding-carte: var(--dc-padding-carte-haut) var(--dc-padding-carte-x) var(--dc-padding-carte-bas);  /* compartiment */
  --dc-padding-tuile: 16px 18px;
  /* ── PLANS DE SUPERPOSITION ──────────────────────────────────────────────
     ⚠️ MESURÉ LE 20/08 : la barre haute de l'application est en z-index 1001 et
     recouvrait la CROIX DE FERMETURE du tiroir, qui était en 80 — le tiroir
     s'ouvrait mais ne se fermait plus au clic. On se place donc au-dessus, sur
     l'échelle que l'application réserve déjà à ses propres panneaux
     (dashboard.css : voile 9000, tiroir 9010) et sous ses notifications (9990).
     Toute nouvelle surface flottante de ce module prend un de ces tokens. */
  --dc-z-voile: 9000;          /* voiles de tiroir et de panneau */
  --dc-z-tiroir: 9010;         /* tiroir de détail, panneau de personnalisation */
  --dc-z-plein-ecran: 9015;    /* pastille « Quitter le plein écran » */
  --dc-z-presentation: 9020;   /* mode présentation, qui couvre tout l'écran */
  --dc-z-toast: 9030;          /* notification : toujours au-dessus du reste */

  --dc-padding-panneau: 18px 20px 20px;
  /* Hauteur de la zone de dessin d'un panneau. La maquette la fixe explicitement
     (l. 888 : `height:{{ hauteurBarres }}` = 168px hors présentation, 230px en
     projection — cf. --dc-proj-hauteur-barres-velocite). Sans elle, la zone se
     réduit à son contenu et des barres en pourcentage se rendent à 1 px : mesuré
     le 20/08, corps de panneau à 41 px et barres écrasées. */
  --dc-hauteur-viz-panneau: 168px;
  --dc-padding-ecran: 20px 22px 30px;

  /* --- Dimensions de shell ------------------------------------------------ */

  --dc-largeur-cible: 1440px;
  --dc-largeur-sidebar: 220px;
  --dc-hauteur-barre-haute: 58px;
  --dc-largeur-drawer-detail: 760px;
  --dc-largeur-drawer-perso: 340px;
  --dc-hauteur-pied-drawer: 56px;
  --dc-largeur-menu-export: 296px;
  --dc-largeur-menu-filtre: 214px;
  --dc-largeur-menu-filtre-large: 224px;
  --dc-largeur-popover-plage: 272px;    /* sélecteur de plage du bloc 07 */

  /* --- Bloc 07 : tableau à barres de progression -------------------------- */

  --dc-b07-colonne-libelle: minmax(190px, 1fr);
  /* ⚠️ ONZE COLONNES DEPUIS LE 02/09 (huit indicateurs demandés par Hicham).
     Les colonnes chiffrées sont RESSERRÉES : à 104 px chacune, onze colonnes
     demandaient 1100 px pour les seuls chiffres et la barre de progression
     disparaissait. 64 px tiennent un nombre à trois chiffres et son en-tête
     court. Le libellé et la progression gardent des minmax : ce sont les deux
     seules colonnes dont la lisibilité dépend de la largeur disponible. */
  --dc-b07-colonne-initiatives: 104px;
  --dc-b07-colonne-chiffre: 64px;
  --dc-b07-colonne-epics: 96px;
  --dc-b07-colonne-production: 132px;
  --dc-b07-colonne-progression: minmax(160px, 1fr);
  --dc-b07-gouttiere-colonnes: 16px;
  /* 10 → 13 px, 03/09 : « plus de padding vertical ». Onze colonnes de chiffres
     demandent de l'air entre les rangées, sinon les lignes se confondent au
     survol comme à la lecture. */
  --dc-b07-padding-ligne: 13px;
  /* Zébrure très discrète : elle guide l'œil sur 1 100 px sans devenir un motif.
     Plus sombre, elle concurrencerait le survol et la ligne TOTAL. */
  --dc-b07-fond-zebre: #fcfcfe;
  /* Le groupe ÉPICS reçoit un fond à peine teinté : il sépare les deux familles
     là où un trait seul se perd sur une table dense. */
  --dc-b07-fond-famille-epics: #fbfaff;
  /* 9,5 px en capitales espacees etait sous le seuil de lisibilite -- Hicham,
     27/08 : « c pas lisibles ». Porte a 10,5 px, avec le ton secondaire. */
  --dc-b07-taille-entete: 10.5px;
  /* 15 → 15,5 px et 22 → 23 px, 03/09 : « augmenter légèrement la taille des
     chiffres et des libellés ». Léger, volontairement : au-delà, onze colonnes
     ne tiennent plus sans défilement horizontal. */
  --dc-b07-taille-libelle: 15.5px;
  --dc-b07-taille-chiffre: 23px;
  --dc-b07-taille-taux: 13px;
  --dc-b07-largeur-taux: 42px;
  --dc-b07-hauteur-barre: 14px;
  /* 3 → 7 px : la moitié de la hauteur, donc des extrémités pleinement
     arrondies — « coins arrondis », 03/09. */
  --dc-b07-rayon-barre: 7px;
  --dc-b07-piste-barre: #f0eff7;
  --dc-b07-piste-barre-total: #ebe9f6;
  --dc-b07-fond-total: #f7f6fc;
  --dc-b07-seuil-vert: 40;              /* taux > 40 % = vert, sinon ambre, 0 % = rouge */

  /* --- Rayons ------------------------------------------------------------- */

  --dc-rayon-pastille: 4px;            /* pastille de verdict, jamais 999 */
  --dc-rayon-badge: 5px;
  --dc-rayon-item: 6px;
  --dc-rayon-bouton: 7px;
  --dc-rayon-formule: 8px;
  --dc-rayon-menu: 9px;
  --dc-rayon-carte: 10px;
  --dc-rayon-cadre: 12px;
  --dc-rayon-cellule-gaufre: 2px;
  --dc-rayon-barre: 2px;
  --dc-rayon-pilule: 999px;

  /* --- Ombres ------------------------------------------------------------- */

  --dc-ombre-carte: none;              /* ombre quasi nulle : la bordure suffit */
  --dc-ombre-menu: 0 16px 36px rgba(20, 20, 50, 0.20);
  --dc-ombre-menu-filtre: 0 16px 36px rgba(20, 20, 50, 0.24);
  --dc-ombre-drawer: -22px 0 50px rgba(20, 20, 50, 0.16);
  --dc-ombre-drawer-perso: -18px 0 40px rgba(20, 20, 50, 0.16);
  --dc-ombre-toast: 0 10px 26px rgba(20, 20, 50, 0.12);

  /* --- Durées et courbes -------------------------------------------------- */

  --dc-duree-accordeon: 120ms;
  --dc-duree-toast-entree: 160ms;
  --dc-duree-drawer: 180ms;
  --dc-duree-vue: 200ms;
  --dc-courbe: ease-out;
  --dc-delai-toast: 1500ms;            /* durée d'affichage de la notification d'export */
  --dc-delai-pastille-plein-ecran: 3000ms;

  /* --- Seuils de couleur -------------------------------------------------- */
  /* Consommé / planifié : vert sous 100, ambre jusqu'à 115, rouge au-delà.
     Le front n'applique le seuil qu'à l'affichage ; la valeur vient de SQL. */

  --dc-seuil-vert-max: 100;
  --dc-seuil-ambre-max: 115;
}

/* ============================================================================
   Échelle du mode présentation
   Appliquée uniquement sous .dc-presentation. Le pied de vue (56 px) est en
   dehors du conteneur mis à l'échelle : il ne doit jamais être zoomé.
   ========================================================================== */

.dc-presentation {

  /* Vues 2, 3 et 4 : facteur global appliqué au conteneur de contenu. */
  --dc-proj-zoom: 1.4;
  --dc-proj-hauteur-min: 600px;
  --dc-proj-hauteur-min-vue1: 780px;
  --dc-proj-padding-bas: 84px;         /* réserve la hauteur du pied de vue */

  /* Titres de vue — identiques sur les 4 vues */
  --dc-proj-taille-surtitre: 13px;
  --dc-proj-taille-titre: 36px;
  --dc-proj-marge-titre: 32px;
  --dc-proj-taille-surtitre-zoom: 9.5px; /* vues 2-4 : compense le zoom 1.4 */
  --dc-proj-taille-titre-zoom: 26px;
  --dc-proj-marge-titre-zoom: 28px;

  /* Vue 1 — cartes KPI en grille 2 × 2 */
  --dc-proj-gouttiere-cartes: 32px;
  --dc-proj-padding-carte: 40px;
  --dc-proj-filet-accent: 6px;
  --dc-proj-taille-chiffre: 96px;
  /* Vues DENSES (plus d'une rangée de cartes). La maquette obtient le même effet par
     un zoom de 1,4 appliqué à des tailles pré-divisées (cf. --dc-proj-*-zoom) ; on
     divise ici directement, c'est le même rapport sans transformation à gérer.
     Mesuré le 20/08 : sans cette réduction, une carte de 339 px devait loger un
     chiffre de 96 px + une phrase + 90 px de visualisation — le contenu débordait et
     se chevauchait. */
  --dc-proj-taille-chiffre-dense: 68px;
  --dc-proj-taille-unite-dense: 26px;
  --dc-proj-taille-phrase-dense: 16px;
  --dc-proj-taille-libelle-dense: 13px;
  --dc-proj-hauteur-microviz-dense: 64px;
  --dc-proj-taille-unite: 36px;
  --dc-proj-ecart-chiffre-unite: 6px;
  --dc-proj-taille-libelle: 18px;
  --dc-proj-taille-phrase: 22px;
  --dc-proj-hauteur-microviz: 90px;
  --dc-proj-taille-valeur-microviz: 13px;
  --dc-proj-taille-legende-microviz: 11px;

  /* Vues 2, 3 et 4 — remontée des textes et agrandissement des visualisations */
  --dc-proj-taille-phrase-compartiment: 13px;
  --dc-proj-taille-legende: 11px;
  --dc-proj-hauteur-barre-01: 31px;
  --dc-proj-hauteur-frise-02: 74px;
  --dc-proj-hauteur-courbe-06: 93px;
  --dc-proj-cellule-gaufre-03: 13px;
  --dc-proj-gouttiere-gaufre-03: 3px;
  --dc-proj-taille-donut-04: 110px;
  --dc-proj-hauteur-barres-velocite: 230px;
  --dc-proj-taille-valeur-barre: 13px;
  --dc-proj-gouttiere-alertes: 20px;
  --dc-proj-taille-alerte: 13px;
  --dc-proj-colonne-phase: 110px;
  --dc-proj-gouttiere-phase: 14px;
  --dc-proj-hauteur-pastille-ratio: 31px;
  --dc-proj-taille-pastille-ratio: 14px;

  /* Vue 3 — bloc 07 en pleine largeur sur la rangée basse. Les tailles sont plus
     petites que hors présentation car le conteneur est déjà zoomé de 1,4 :
     15 px × 1,4 ≈ 21 px rendus, 23 px × 1,4 ≈ 32 px rendus. */
  --dc-proj-b07-taille-entete: 10px;
  --dc-proj-b07-taille-libelle: 13px;
  --dc-proj-b07-taille-chiffre: 23px;
  --dc-proj-b07-taille-taux: 11px;
  --dc-proj-b07-hauteur-barre: 14px;
  --dc-proj-b07-padding-ligne: 8px;

  /* Pied de vue — identique sur les 4 vues, hors conteneur zoomé */
  --dc-proj-hauteur-pied: 56px;
  --dc-proj-taille-pied: 13px;
  --dc-proj-hauteur-segment: 3px;
  --dc-proj-gouttiere-segments: 6px;
  --dc-proj-zone-clic-laterale: 11%;

  /* Contrainte de remplissage : aucune zone blanche de plus de 80 px dans une
     carte ou un panneau. Valeur de contrôle, pas de style. */
  --dc-proj-vide-max: 80px;
}