/* ============================================================================
   vue-decideur.css — Vue Décideur (Nydham)
   Composants : app-shell.js (sidebar + barre haute), title-banner.js (bandeau bleu
   nuit). Porté depuis docs/vue-decideur/maquette/vue-decideur-maquette-v12.html,
   lignes 37-119, 123-144 et 148-172.

   Aucune couleur ni dimension en dur : uniquement des var(--dc-*), déclarées dans
   vue-decideur-tokens.css (chargé avant cette feuille — voir ARBRE_COMPOSANTS.md).

   Quelques valeurs de la maquette n'ont pas de token exact ; la variable existante la
   plus proche est utilisée à la place (jamais de littéral ajouté). Chaque cas est
   signalé en commentaire ci-dessous et repris dans le rapport de portage.
   ========================================================================== */

/* --- Conteneur général ---------------------------------------------------- */

.dc-shell {
  display: flex;
  align-items: stretch;
  background: var(--dc-fond-page);
  border: var(--dc-filet-largeur) solid var(--dc-filet-section);
  border-radius: var(--dc-rayon-cadre);
  overflow: hidden;
  position: relative;
  font-family: var(--dc-police);
  color: var(--dc-texte-titre);
  /* ⚠️ NE JAMAIS RETIRER — la page était FIGÉE sans ça (mesuré le 19/08).
     Monté dans l'app, `.dc-shell` est un enfant flex de `.page` (flex-direction:
     column, hauteur bornée par la fenêtre). Avec le `flex-shrink: 1` par défaut il
     se comprimait de 1170 px à 746, et son `overflow: hidden` coupait net les
     424 px restants : les trois panneaux du bas étaient inatteignables, la molette
     ne faisait rien. Il doit garder sa hauteur naturelle et laisser la PAGE défiler. */
  flex-shrink: 0;
}

/* Second verrou du même défaut : `assets/css/dashboard.css:9` impose
   `#page-dashboard.page.active { overflow: hidden }`, écrit pour l'ancienne Vue
   Décideur v2 qui gérait son propre défilement interne. La nouvelle vue, elle, se
   laisse défiler par la page comme tous les autres écrans. Sélecteur volontairement
   aussi spécifique que celui qu'il annule, plus la classe posée au montage. */
#page-dashboard.page.active.dc-monte {
  overflow: auto;
  padding: 0;
}

.dc-shell-sidebar-slot--masque,
.dc-shell-topbar-slot--masque {
  display: none;
}

.dc-shell-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* {{ fondEcran }} dans la maquette : non résolu, la zone de contenu partage le fond
     de page qui l'entoure. */
  background: var(--dc-fond-page);
}

.dc-shell-screen {
  padding: var(--dc-padding-ecran);
  display: flex;
  flex-direction: column;
  gap: var(--dc-gouttiere-rubriques);
}

/* --- Sidebar ---------------------------------------------------------------- */

.dc-shell-sidebar {
  width: var(--dc-largeur-sidebar);
  flex: 0 0 var(--dc-largeur-sidebar);
  background: var(--dc-fond-carte);
  border-right: var(--dc-filet-largeur) solid var(--dc-filet-carte);
  display: flex;
  flex-direction: column;
  padding: var(--dc-espace-6) 0 0;
  min-height: 100%;
}

.dc-shell-logo {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
  /* padding haut 2px : pas de token à 2px, --dc-espace-1 (4px) est la valeur la plus
     proche. */
  padding: var(--dc-espace-1) var(--dc-espace-6) var(--dc-espace-7);
}

.dc-shell-logo-icon {
  /* 30×30 : pas de token de dimension à 30px, --dc-espace-12 (32px) est le plus proche. */
  width: var(--dc-espace-12);
  height: var(--dc-espace-12);
  border-radius: var(--dc-rayon-formule);
  background: var(--dc-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.dc-shell-logo-text {
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-1);
}

.dc-shell-logo-title {
  /* 14.5px : pas de token exact, --dc-taille-accordeon (14px) est le plus proche. */
  font-size: var(--dc-taille-accordeon);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-titre);
}

.dc-shell-logo-subtitle {
  /* {{ tailleLegende }} dans la maquette : la variable --dc-taille-legende porte le même
     nom, c'est la correspondance directe. */
  font-size: var(--dc-taille-legende);
  color: var(--dc-texte-tertiaire);
}

.dc-shell-nav {
  display: flex;
  flex-direction: column;
  padding: 0 var(--dc-espace-4);
  gap: var(--dc-espace-1);
}

.dc-shell-nav-group-label {
  font-size: var(--dc-taille-micro);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales-large);
  color: var(--dc-texte-faible);
  padding: var(--dc-espace-7) var(--dc-espace-3) var(--dc-espace-2);
}

.dc-shell-nav-group-label:first-child {
  padding-top: var(--dc-espace-6);
}

.dc-shell-nav-item {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
  padding: var(--dc-espace-3) var(--dc-espace-5);
  border-radius: var(--dc-rayon-formule);
  color: var(--dc-texte-corps);
  font-size: var(--dc-taille-corps-large);
  font-weight: var(--dc-graisse-semi);
}

.dc-shell-nav-item--actif {
  /* padding 8px 10px 8px 9px dans la maquette : pas de token à 9px, --dc-espace-4 (10px)
     est le plus proche. */
  padding: var(--dc-espace-3) var(--dc-espace-4) var(--dc-espace-3) var(--dc-espace-4);
  border-left: var(--dc-filet-accent-actif) solid var(--dc-violet);
  border-radius: 0 var(--dc-rayon-formule) var(--dc-rayon-formule) 0;
  background: var(--dc-violet-pale-fond);
  color: var(--dc-violet-lien);
  font-weight: var(--dc-graisse-forte);
}

.dc-shell-nav-item--separe {
  margin-top: var(--dc-espace-7);
  padding-top: var(--dc-espace-7);
  border-top: var(--dc-filet-largeur) solid var(--dc-filet-sidebar);
}

.dc-shell-nav-item-label {
  flex: 1 1 auto;
}

.dc-shell-nav-item-dash {
  margin-left: auto;
  color: var(--dc-filet-bouton-survol);
  font-size: var(--dc-taille-cellule);
}

.dc-shell-badge {
  margin-left: auto;
  font-size: var(--dc-taille-legende);
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-texte-secondaire);
  background: var(--dc-fond-badge);
  border-radius: var(--dc-rayon-item);
  /* padding 2px 7px dans la maquette : pas de tokens exacts, --dc-espace-1 (4px) et
     --dc-espace-3 (8px) sont les plus proches. */
  padding: var(--dc-espace-1) var(--dc-espace-3);
}

.dc-shell-footer {
  margin-top: auto;
  border-top: var(--dc-filet-largeur) solid var(--dc-filet-sidebar);
  /* padding 12px 18px 14px : pas de token à 18px, --dc-espace-8 (20px) est le plus
     proche. */
  padding: var(--dc-espace-5) var(--dc-espace-8) var(--dc-espace-6);
  display: flex;
  align-items: center;
  /* gap 7px : pas de token exact, --dc-espace-3 (8px) est le plus proche. */
  gap: var(--dc-espace-3);
  font-size: var(--dc-taille-legende);
  /* letter-spacing 0.04em : pas de token exact, --dc-interlettre-capitales (0.09em) est
     le plus proche. */
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-texte-faible);
}

/* --- Barre haute -------------------------------------------------------- */

.dc-shell-topbar {
  height: var(--dc-hauteur-barre-haute);
  flex: 0 0 var(--dc-hauteur-barre-haute);
  background: var(--dc-fond-carte);
  border-bottom: var(--dc-filet-largeur) solid var(--dc-filet-carte);
  display: flex;
  align-items: center;
  gap: var(--dc-espace-6);
  padding: 0 var(--dc-espace-9);
}

.dc-shell-topbar-retour {
  font: inherit;
  font-size: var(--dc-taille-corps);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-corps);
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-bouton);
  border-radius: var(--dc-rayon-bouton);
  /* padding vertical 7px : pas de token exact, --dc-espace-3 (8px) est le plus proche. */
  padding: var(--dc-espace-3) var(--dc-espace-5);
  cursor: pointer;
}

.dc-shell-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--dc-espace-6);
}

.dc-shell-topbar-icon {
  /* 30×30 : voir .dc-shell-logo-icon, même absence de token exact. */
  width: var(--dc-espace-12);
  height: var(--dc-espace-12);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dc-rayon-bouton);
  cursor: pointer;
}

.dc-shell-topbar-icon:hover {
  background: var(--dc-fond-survol-nav);
}

.dc-shell-topbar-notification {
  display: flex;
  align-items: center;
}

.dc-shell-pill {
  display: flex;
  align-items: center;
  border-radius: var(--dc-rayon-pilule);
  font-size: var(--dc-taille-corps);
  font-weight: var(--dc-graisse-semi);
  white-space: nowrap;
}

.dc-shell-pill--claire {
  /* gap 7px dans la maquette : pas de token exact, --dc-espace-3 (8px) est le plus
     proche. */
  gap: var(--dc-espace-3);
  background: var(--dc-fond-quart);
  border: var(--dc-filet-largeur) solid var(--dc-vert-pale-bord);
  /* border #e2eae5 dans la maquette : pas de token exact, --dc-vert-pale-bord est la
     couleur de bordure claire la plus proche déjà déclarée. */
  color: var(--dc-texte-titre);
  font-size: var(--dc-taille-cellule);
  /* padding vertical 5px : pas de token exact, --dc-espace-2 (6px) est le plus proche. */
  padding: var(--dc-espace-2) var(--dc-espace-5);
}

.dc-shell-pill--sombre {
  /* gap 9px dans la maquette : pas de token exact, --dc-espace-4 (10px) est le plus
     proche. */
  gap: var(--dc-espace-4);
  background: var(--dc-fond-nuit-pastille);
  color: var(--dc-texte-inverse);
  flex: 0 0 auto;
  /* padding vertical 7px : pas de token exact, --dc-espace-3 (8px) est le plus proche. */
  padding: var(--dc-espace-3) var(--dc-espace-6);
}

.dc-shell-pill-dot {
  /* 7×7 (pastille T3 2026) et 8×8 (pastille Tous les quartiers) dans la maquette :
     7px est à égale distance de --dc-espace-2 (6px) et --dc-espace-3 (8px) ; les deux
     pastilles partagent --dc-espace-3 (8px), qui est la valeur exacte de la seconde. */
  width: var(--dc-espace-3);
  height: var(--dc-espace-3);
  border-radius: var(--dc-rayon-pilule);
  flex: 0 0 auto;
}

.dc-shell-pill-dot--vert {
  background: var(--dc-vert);
}

.dc-shell-pill-dot--violet {
  /* couleur #7c6cf5 dans la maquette : pas de token exact, --dc-violet-estompe est la
     teinte violette désaturée la plus proche déjà déclarée. */
  background: var(--dc-violet-estompe);
}

.dc-shell-pill-chevron {
  font-size: var(--dc-taille-micro);
  color: var(--dc-texte-inverse-tres-faible);
}

.dc-shell-user {
  display: flex;
  align-items: center;
  /* gap 9px : pas de token exact, --dc-espace-4 (10px) est le plus proche. */
  gap: var(--dc-espace-4);
}

.dc-shell-avatar {
  width: var(--dc-espace-11);
  height: var(--dc-espace-11);
  border-radius: var(--dc-rayon-bouton);
  background: var(--dc-fond-nuit-pastille);
  color: var(--dc-texte-inverse);
  font-size: var(--dc-taille-note);
  font-weight: var(--dc-graisse-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  /* letter-spacing 0.02em : pas de token exact, --dc-interlettre-titre (-0.01em) est le
     plus proche en valeur absolue. */
  letter-spacing: var(--dc-interlettre-titre);
}

.dc-shell-user-name {
  font-size: var(--dc-taille-corps-large);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-titre);
}

/* --- Bandeau de titre ----------------------------------------------------- */

.dc-title-banner {
  background: var(--dc-fond-nuit);
  border-radius: var(--dc-rayon-carte);
  padding: var(--dc-espace-8) var(--dc-espace-9);
  display: flex;
  align-items: center;
  gap: var(--dc-espace-7);
}

.dc-title-banner-icon {
  /* 44×44 : pas de token exact, --dc-espace-13 (40px) est le plus proche. */
  width: var(--dc-espace-13);
  height: var(--dc-espace-13);
  flex: 0 0 var(--dc-espace-13);
  border-radius: var(--dc-rayon-carte);
  background: var(--dc-violet);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-title-banner-text {
  display: flex;
  flex-direction: column;
  /* gap 5px : pas de token exact, --dc-espace-2 (6px) est le plus proche. */
  gap: var(--dc-espace-2);
}

.dc-title-banner h1 {
  margin: 0;
  font-size: var(--dc-taille-titre-bandeau);
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-texte-inverse);
  letter-spacing: var(--dc-interlettre-titre);
}

.dc-title-banner-subtitle {
  margin: 0;
  font-size: var(--dc-taille-corps);
  color: var(--dc-texte-inverse-faible);
}

.dc-title-banner-filtres {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--dc-espace-3);
}

/* ── T-04 : filtres en cascade ────────────────────────────────────────────── */

/* ── LA RÉPARTITION DU BANDEAU ───────────────────────────────────────────────
   Hicham, 27/08 : « retravaille ce bandeau, décales un peu les filtres vers le
   milieu, le mode présentation et grandissement extrême droite ».

   MESURÉ AVANT : la barre s'arrêtait à 868 px sur un bandeau de 1394 — tout était
   packé à gauche derrière le titre, et 526 px de vide traînaient à droite. Les
   deux boutons de mode se retrouvaient collés aux filtres, au milieu de nulle
   part, alors qu'ils ne servent ni au même geste ni au même moment.

   LA BARRE PREND DÉSORMAIS TOUTE LA LARGEUR RESTANTE, et deux marges automatiques
   se partagent le vide : l'une avant la première pilule, l'autre avant les
   outils. C'est l'idiome flexbox qui centre un groupe ET en épingle un autre —
   `justify-content: center` seul ne peut pas faire les deux, la marge automatique
   des outils absorberait tout l'espace et ramènerait les pilules à gauche.

   Les filtres se lisent donc au centre, là où l'œil passe ; les deux modes
   d'affichage à l'extrême droite, là où on va les chercher quand on présente. */
.dc-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-3);
  flex: 1;
  min-width: 0;   /* sans lui, une pilule longue empêcherait la barre de rétrécir */
}

/* Les deux marges qui se partagent l'espace libre. */
.dc-title-banner .dc-filter-bar > .dc-filter-pill-wrap:first-child { margin-left: auto; }
.dc-title-banner .dc-banner-outils { margin-left: auto; }

.dc-filter-pill-wrap {
  position: relative;
}

.dc-filter-pill {
  font: inherit;
  display: flex;
  align-items: center;
  /* gap 12px : pas de token exact, --dc-espace-5 (12px) est exact ici. */
  gap: var(--dc-espace-5);
  background: var(--dc-translucide);
  border: var(--dc-filet-largeur) solid var(--dc-translucide-bord);
  border-radius: var(--dc-rayon-formule);
  padding: var(--dc-espace-4) var(--dc-espace-6);
  font-size: var(--dc-taille-corps);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-inverse);
  white-space: nowrap;
  cursor: pointer;
}

.dc-filter-pill:hover,
.dc-filter-pill--ouvert {
  background: var(--dc-translucide-survol);
}

.dc-filter-pill--periode {
  cursor: default;
}

.dc-filter-pill-chevron {
  font-size: var(--dc-taille-micro);
  color: var(--dc-texte-inverse-tres-faible);
}

.dc-filter-menu {
  position: absolute;
  /* décalage 7px dans la maquette : pas de token exact, --dc-espace-3 (8px) est le
     plus proche. */
  top: calc(100% + var(--dc-espace-3));
  left: 0;
  z-index: 40;
  min-width: var(--dc-largeur-menu-filtre);
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-drawer);
  border-radius: var(--dc-rayon-menu);
  padding: var(--dc-espace-2);
  box-shadow: var(--dc-ombre-menu-filtre);
}

.dc-filter-menu--droite {
  left: auto;
  right: 0;
  min-width: var(--dc-largeur-menu-filtre-large);
}

/* Le compte d'épics d'un trimestre, poussé à droite de son libellé : il informe,
   il ne se lit pas comme une seconde option. `margin-left:auto` le colle au bord
   sans changer la mise en page des menus qui n'en portent pas. */
.dc-filter-option-compte {
  margin-left: auto;
  padding-left: var(--dc-espace-5);
  font-size: var(--dc-taille-legende);
  color: var(--dc-texte-tertiaire);
  white-space: nowrap;
}

.dc-filter-option {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
  padding: var(--dc-espace-3) var(--dc-espace-2);
  border-radius: var(--dc-rayon-item);
  font-size: var(--dc-taille-corps);
  color: var(--dc-texte-titre);
  cursor: pointer;
}

.dc-filter-option:hover {
  background: var(--dc-fond-survol-nav);
}

/* ── Cases à cocher des filtres multi-choix (filter-bar.js, 24/08) ─────────────
   Remplace la simple marque « ✓ » de la maquette : avec un choix multiple, il
   faut voir d'un coup d'œil ce qui est coché ET ce qui ne l'est pas. Une marque
   seule ne montre que le premier — les options non retenues n'avaient alors
   aucune trace visible, et rien ne disait qu'elles étaient cochables. */
.dc-filter-case {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.5px solid var(--dc-neutre-pale-bord);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: transparent;
  transition: background .12s ease, border-color .12s ease;
}

.dc-filter-case--cochee {
  background: var(--dc-violet);
  border-color: var(--dc-violet);
  color: var(--dc-texte-inverse);
}

.dc-filter-option--cochee { font-weight: var(--dc-graisse-forte); }

.dc-filter-option:focus-visible {
  outline: 2px solid var(--dc-violet);
  outline-offset: -2px;
}

.dc-filter-option-marque {
  /* 11px dans la maquette : pas de token exact, --dc-taille-note (11px) convient
     numériquement pour une largeur bien qu'il soit nommé pour une taille de texte. */
  width: var(--dc-taille-note);
  flex: 0 0 var(--dc-taille-note);
  font-size: var(--dc-taille-note);
  color: var(--dc-violet);
}

.dc-filter-chips {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-3);
  flex-wrap: wrap;
}

.dc-chip {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-bouton);
  border-radius: var(--dc-rayon-pilule);
  padding: var(--dc-espace-2) var(--dc-espace-2) var(--dc-espace-2) var(--dc-espace-5);
  font-size: var(--dc-taille-etiquette);
  color: var(--dc-texte-corps);
  white-space: nowrap;
}

.dc-chip-close {
  width: var(--dc-espace-7);
  height: var(--dc-espace-7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dc-rayon-pilule);
  font-size: var(--dc-taille-mini);
  color: var(--dc-texte-secondaire);
  cursor: pointer;
}

.dc-chip-close:hover {
  background: var(--dc-fond-badge);
  color: var(--dc-texte-titre);
}

.dc-chips-reset {
  font-size: var(--dc-taille-etiquette);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-violet);
  cursor: pointer;
  padding: 0 var(--dc-espace-1);
  /* couleur de soulignement #cfc9f7 dans la maquette : pas de token exact,
     --dc-violet-pale-bord (#dcd8f7) est le plus proche déjà défini. */
  border-bottom: var(--dc-filet-largeur) solid var(--dc-violet-pale-bord);
}

/* ── T-05 : les 14 blocs ──────────────────────────────────────────────────────
   Porté depuis la maquette, lignes 528-545 (tuiles), 546-549 (titres de rubrique),
   553-877 (cartes de compartiment) et 883-959 (panneaux). */

/* --- Rubriques et rangées ------------------------------------------------- */

.dc-section-header {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-6);
  /* margin-top 6px dans la maquette : pas de token exact, --dc-espace-2 (6px) est exact. */
  margin-top: var(--dc-espace-2);
}

.dc-section-header-label {
  font-size: var(--dc-taille-legende);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales-large);
  color: var(--dc-violet);
  white-space: nowrap;
}

.dc-section-header-rule {
  flex: 1;
  height: var(--dc-filet-largeur);
  background: var(--dc-filet-section);
}

/* Une rangée de blocs qui se répartissent la largeur. `align-items: stretch` est ce qui
   permet au piège n°2 de se résoudre seul : masquer un bloc ne laisse pas de trou, les
   restants s'étirent — il n'y a pas de largeur fixe à recalculer. */
.dc-blocs-rangee {
  display: flex;
  gap: var(--dc-gouttiere-grille);
  align-items: stretch;
}

.dc-blocs-colonne {
  display: flex;
  flex-direction: column;
  gap: var(--dc-gouttiere-grille);
}

/* --- Sélecteur de plage de dates (date-range-picker.js) ------------------- */

.dc-range-picker { position: relative; margin-left: auto; }

.dc-range-pill {
  font: inherit;
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-bouton);
  border-radius: var(--dc-rayon-pilule);
  padding: var(--dc-espace-2) var(--dc-espace-5);
  font-size: var(--dc-taille-corps);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-titre);
  cursor: pointer;
  white-space: nowrap;
}

.dc-range-pill:hover,
.dc-range-pill--ouvert { border-color: var(--dc-filet-bouton-survol); }

.dc-range-chevron { font-size: var(--dc-taille-micro); color: var(--dc-texte-tertiaire); }

.dc-range-popover {
  position: absolute;
  top: calc(100% + var(--dc-espace-3));
  right: 0;
  z-index: 45;
  width: var(--dc-largeur-popover-plage);
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-drawer);
  border-radius: var(--dc-rayon-menu);
  box-shadow: var(--dc-ombre-menu);
  display: flex;
  flex-direction: column;
}

.dc-range-popover[hidden] { display: none; }

.dc-range-champs { padding: var(--dc-espace-5) var(--dc-espace-6); display: flex; gap: var(--dc-espace-4); }

.dc-range-champ { flex: 1; display: flex; flex-direction: column; gap: var(--dc-espace-2); }

.dc-range-champ-titre {
  font-size: var(--dc-taille-micro);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales-large);
  color: var(--dc-texte-faible);
}

.dc-range-champ input {
  font: inherit;
  font-size: var(--dc-taille-cellule);
  color: var(--dc-texte-titre);
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-bouton);
  border-radius: var(--dc-rayon-item);
  padding: var(--dc-espace-2) var(--dc-espace-3);
  width: 100%;
}

.dc-range-filet { height: var(--dc-filet-largeur); background: var(--dc-filet-doux); }

.dc-range-raccourcis { padding: var(--dc-espace-2); display: flex; flex-direction: column; }

.dc-range-shortcut {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
  padding: var(--dc-espace-3) var(--dc-espace-4);
  border-radius: var(--dc-rayon-item);
  font-size: var(--dc-taille-corps);
  color: var(--dc-texte-titre);
  cursor: pointer;
}

.dc-range-shortcut:hover { background: var(--dc-fond-survol-menu); }

.dc-range-marque {
  width: var(--dc-taille-note);
  flex: 0 0 var(--dc-taille-note);
  font-size: var(--dc-taille-note);
  color: var(--dc-violet);
}

.dc-range-footer {
  padding: var(--dc-espace-4) var(--dc-espace-5);
  border-top: var(--dc-filet-largeur) solid var(--dc-filet-doux);
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
}

.dc-range-footer .dc-button--primaire {
  margin-left: auto;
  background: var(--dc-violet);
  border-color: var(--dc-violet);
  color: var(--dc-texte-inverse);
}

.dc-range-footer .dc-button--primaire:hover {
  background: var(--dc-violet-fonce);
  border-color: var(--dc-violet-fonce);
}

/* --- Bloc 07 : tableau de progression (viz/progress-table.js) ------------- */

.dc-b07 { display: flex; flex-direction: column; width: 100%; }

.dc-b07-ligne {
  display: grid;
  /* LIGNE MÉTIER · INIT. · CADRAGE · GO · NO GO · ÉPICS · PRÉPA. · BLOQUÉS ·
     ROADMAP · EN PROD. · PROGRESSION — onze colonnes depuis le 02/09. */
  grid-template-columns:
    var(--dc-b07-colonne-libelle)
    var(--dc-b07-colonne-initiatives)
    var(--dc-b07-colonne-chiffre) var(--dc-b07-colonne-chiffre) var(--dc-b07-colonne-chiffre)
    var(--dc-b07-colonne-epics)
    var(--dc-b07-colonne-chiffre) var(--dc-b07-colonne-chiffre) var(--dc-b07-colonne-chiffre)
    var(--dc-b07-colonne-production)
    var(--dc-b07-colonne-progression);
  align-items: center;
  gap: 0 var(--dc-b07-gouttiere-colonnes);
  padding: var(--dc-b07-padding-ligne) 0;
  border-bottom: var(--dc-filet-largeur) solid var(--dc-filet-tres-doux);
}

.dc-b07-ligne--entete { padding-top: 0; border-bottom-color: var(--dc-filet-tableau); }

/* ── Bandeau de familles : INITIATIVES · ÉPICS ─────────────────────────────
   Hicham, 02/09 : « sépares les vues pour plus de distinction ». Il nomme les
   deux familles et les relie par un filet ; la réglure verticale ci-dessous
   fait le reste du travail quand on descend les lignes. */
.dc-b07-ligne--familles {
  padding: 0 0 var(--dc-espace-2) 0;
  border-bottom: none;
}

.dc-b07-famille {
  font-size: var(--dc-taille-legende);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dc-texte-faible);
  text-align: center;
}

/* Le filet ne court QUE sous les familles nommées : sous la colonne des
   libellés ou de la progression, il annoncerait un groupe qui n'existe pas. */
.dc-b07-famille--nommee {
  padding-bottom: var(--dc-espace-2);
  border-bottom: var(--dc-filet-largeur) solid var(--dc-filet-doux);
}

/* ⚠️ LA RÉGLURE VERTICALE EST LE VRAI SÉPARATEUR. Un bandeau ne se voit qu'en
   haut du tableau ; passé la deuxième ligne, c'est elle qui dit où commence
   chaque famille. Elle porte sur TOUTES les rangées — bandeau, en-têtes,
   lignes et total — sinon elle se briserait à chaque changement de style.
   Cellules, dans l'ordre : 1 libellé · 2-5 initiatives · 6-10 épics · 11 progression. */
.dc-b07-ligne > :nth-child(2),
.dc-b07-ligne > :nth-child(6),
.dc-b07-ligne > :nth-child(11) {
  border-left: var(--dc-filet-largeur) solid var(--dc-filet-tres-doux);
  padding-left: var(--dc-espace-4);
}

/* Le bandeau de familles porte ses propres bornes : ses cellules SPAN plusieurs
   colonnes, donc leurs rangs ne coïncident pas avec ceux des autres rangées. */
.dc-b07-ligne--familles > :nth-child(2),
.dc-b07-ligne--familles > :nth-child(3),
.dc-b07-ligne--familles > :nth-child(4) {
  border-left: var(--dc-filet-largeur) solid var(--dc-filet-tres-doux);
  padding-left: var(--dc-espace-4);
}
.dc-b07-ligne--familles > :nth-child(6),
.dc-b07-ligne--familles > :nth-child(11) { border-left: none; padding-left: 0; }

/* Onze en-têtes courts sur une carte pleine largeur : sans troncature, un
   libellé qui déborde pousse la colonne et décale toute la grille. */
.dc-b07-entete {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* La ligne TOTAL déborde du padding de la carte, comme dans la maquette. */
.dc-b07-ligne--total {
  padding: var(--dc-b07-padding-ligne) var(--dc-espace-5);
  margin: 0 calc(-1 * var(--dc-espace-5));
  /* ⚠️ FILET SUPÉRIEUR ÉPAIS — 03/09. Un total est une SOMME : le trait doit
     dire « ce qui suit récapitule ce qui précède », et un filet d'un pixel s'y
     confond avec les séparateurs de rangée. */
  border-top: 2px solid var(--dc-violet);
  border-bottom: 0;
  background: var(--dc-b07-fond-total);
}
/* Les chiffres du total portent la graisse maximale, y compris la décomposition
   qui reste allégée sur les lignes de données : sur la ligne de synthèse, tout
   compte. */
.dc-b07-ligne--total > * { font-weight: var(--dc-graisse-forte) !important; }

/* ── LES EN-TÊTES DE COLONNE SE LISENT ──────────────────────────────────────
   Hicham, 27/08 : « corriges alignement en têtes c pas lisibles », capture du
   bloc 07 à l'appui.

   MESURÉ, ET LE CHIFFRE EST SANS APPEL : `--dc-texte-tertiaire` (#8a89a8) sur
   blanc donne 3,37:1 de contraste — sous le seuil de 4,5:1 d'un texte courant.
   À 9,5 px, en capitales espacées, ce n'est plus une nuance de style : « EN
   PRODUCTION » ne se lit pas. Or sans lui, la colonne des 4 et des 0 ne veut
   rien dire.

   `--dc-texte-secondaire` (#6b6b8a) donne 5,19:1, et c'est le ton des libellés
   de tuile — exactement le rôle que ces en-têtes jouent.

   L'alignement, lui, était déjà juste : mesuré le 26/08 contre la production,
   bord droit de l'en-tête contre bord droit du chiffre, 0 px d'écart sur les
   trois colonnes numériques. Ce n'était pas la géométrie, c'était le contraste. */
.dc-b07-entete {
  font-size: var(--dc-b07-taille-entete);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-texte-secondaire);
  white-space: nowrap;
}

.dc-b07-entete--droite { text-align: right; }

.dc-b07-libelle { display: flex; flex-direction: column; gap: var(--dc-espace-1); min-width: 0; }

.dc-b07-libelle-texte {
  font-size: var(--dc-b07-taille-libelle);
  color: var(--dc-texte-titre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-b07-ligne--total .dc-b07-libelle-texte {
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
}

.dc-b07-mention {
  font-size: var(--dc-taille-corps);
  font-style: italic;
  color: var(--dc-texte-faible);
  white-space: nowrap;
}

.dc-b07-chiffre {
  font-size: var(--dc-b07-taille-chiffre);
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-texte-titre);
  text-align: right;
  letter-spacing: var(--dc-interlettre-chiffre);
  font-variant-numeric: tabular-nums;
}

.dc-b07-chiffre--accent { color: var(--dc-violet); }
.dc-b07-chiffre--gris   { color: var(--dc-texte-faible); }

/* ── Hiérarchie des chiffres — 03/09 ───────────────────────────────────────
   « Je veux un truc plus joli. » La table n'avait pas de problème de couleur
   ni de bordure : elle avait un problème de POIDS. Onze colonnes où tout est
   en gras sombre ne se hiérarchisent pas, et l'œil ne sait pas où se poser.

   ⚠️ UN ZÉRO NE PORTE AUCUNE INFORMATION. Relevé sur la capture : plus de
   trente zéros en gras criaient aussi fort que les trois nombres qui comptent.
   Il garde sa place — la colonne doit rester lisible en ligne — mais il recule
   au gris clair et perd sa graisse. C'est le geste qui change le plus la table,
   et il ne coûte ni couleur ni trait supplémentaire. */
.dc-b07-chiffre--zero {
  /* ⚠️ OPACITÉ PLUTÔT QUE COULEUR — demande d'Hicham du 03/09 : « les griser
     fortement (opacité ~35 %) ». L'opacité recule le chiffre sur TOUS les fonds
     — zébrure, teinte du groupe ÉPICS, ligne TOTAL — là où une couleur fixe se
     mettrait à jurer sur l'un d'eux. */
  color: var(--dc-texte-tres-faible);
  opacity: .35;
  font-weight: var(--dc-graisse-moyenne, 500);
}

/* ── Ligne d'agrégat « 38 autres lignes métier » ────────────────────────────
   Elle reste — elle dit ce que l'extrait ne montre pas — mais en retrait : ce
   n'est pas une ligne du référentiel, et la compter comme telle en survolant le
   tableau serait une erreur de lecture. */
.dc-b07-libelle--agregat .dc-b07-libelle-texte {
  font-style: italic;
  font-weight: var(--dc-graisse-moyenne, 500);
  color: var(--dc-texte-faible);
}

/* ── Le pourcentage se met en gras quand il dit quelque chose ───────────────
   À 0 %, il recule pour ne pas concurrencer les taux réels de la colonne. */
.dc-b07-taux--actif { font-weight: var(--dc-graisse-forte); color: var(--dc-texte-titre); }
.dc-b07-taux--nul   { font-weight: var(--dc-graisse-moyenne, 500); opacity: .5; }

/* ⚠️ LA PREMIÈRE COLONNE DE CHAQUE FAMILLE EST UN TOTAL, LES SUIVANTES SA
   DÉCOMPOSITION. INIT. et ÉPICS répondent « combien » ; CADRAGE, GO, NO GO,
   PRÉPA., BLOQUÉS, ROADMAP répondent « répartis comment ». Les mettre au même
   poids revenait à dire qu'ils ont la même importance — c'est ce qui donnait
   ce mur de chiffres.
   Colonnes 3-5 et 7-9 : la décomposition. Le poids seul suffit, on ne touche
   ni à la taille ni à l'alignement — la grille de chiffres doit rester une
   grille. */
.dc-b07-ligne > :nth-child(3),
.dc-b07-ligne > :nth-child(4),
.dc-b07-ligne > :nth-child(5),
.dc-b07-ligne > :nth-child(7),
.dc-b07-ligne > :nth-child(8),
.dc-b07-ligne > :nth-child(9) {
  font-weight: var(--dc-graisse-moyenne, 500);
}

/* Les alertes reprennent la main : un blocage se voit quel que soit son rang. */
.dc-b07-chiffre--alerte { font-weight: var(--dc-graisse-forte); }

/* ⚠️ LE SURVOL DE RANGÉE N'EST PAS UN ORNEMENT SUR UNE TABLE DE ONZE COLONNES.
   Suivre « Risque Simple Prod » jusqu'à sa colonne EN PROD. demande de traverser
   1 100 px : sans repère, l'œil saute d'une ligne. Le jeton `--dc-fond-survol`
   existait déjà, commenté « survol de ligne de tableau », et n'était utilisé
   nulle part ici.
   Il ne porte QUE sur les lignes de données : ni l'en-tête ni le bandeau de
   familles ne se suivent du regard. */
.dc-b07-ligne--donnees { transition: background-color 160ms ease-out; }

/* ── Zébrure — 03/09 ────────────────────────────────────────────────────────
   Elle guide l'œil sur 1 100 px de large. Volontairement à la limite du
   perceptible : plus marquée, elle deviendrait un motif et concurrencerait le
   survol comme la ligne TOTAL. Le survol reste PRIORITAIRE — il est déclaré
   après, à spécificité supérieure. */
.dc-b07-ligne--donnees:nth-of-type(even) { background: var(--dc-b07-fond-zebre); }
.dc-b07-ligne--donnees:hover { background: var(--dc-fond-survol); }

/* ── Le groupe ÉPICS reçoit un fond à peine teinté ──────────────────────────
   « Séparation visuelle nette entre INITIATIVES et ÉPICS. » Un trait seul se
   perd sur une table dense ; une teinte de fond porte le groupe sur toute la
   hauteur. Colonnes 6 à 10 : ÉPICS, PRÉPA., BLOQUÉS, ROADMAP, EN PROD.
   ⚠️ ELLE NE COUVRE PAS LA LIGNE TOTAL ni le bandeau : leur propre fond doit
   rester lisible d'un bloc, sinon la table se découpe en damier. */
.dc-b07-ligne--donnees > :nth-child(6),
.dc-b07-ligne--donnees > :nth-child(7),
.dc-b07-ligne--donnees > :nth-child(8),
.dc-b07-ligne--donnees > :nth-child(9),
.dc-b07-ligne--donnees > :nth-child(10),
.dc-b07-ligne--entete > :nth-child(6),
.dc-b07-ligne--entete > :nth-child(7),
.dc-b07-ligne--entete > :nth-child(8),
.dc-b07-ligne--entete > :nth-child(9),
.dc-b07-ligne--entete > :nth-child(10) {
  background: var(--dc-b07-fond-famille-epics);
}

/* ── Compteurs cliquables ───────────────────────────────────────────────────
   Un bouton dans une grille de chiffres ne doit RIEN changer à l'alignement :
   il reprend la cellule à l'identique et n'ajoute qu'un curseur et un état de
   survol. Le focus reste visible — on ne navigue pas cet écran qu'à la souris. */
.dc-b07-ouvrable {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border-radius: var(--dc-rayon-pastille);
}
.dc-b07-ouvrable:hover .dc-b07-pill { filter: brightness(0.96); }
.dc-b07-ouvrable:focus-visible { outline: 2px solid var(--dc-violet); outline-offset: 2px; }

/* ── Pastilles ─────────────────────────────────────────────────────────────
   ⚠️ L'ALERTE PORTE UNE ICÔNE, PAS SEULEMENT UNE COULEUR. Le rouge seul
   disparaît pour un daltonien et sur une projection mal réglée — or ce bloc est
   fait pour être projeté en COMEX. Le triangle est inline, sans requête. */
.dc-b07-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: var(--dc-graisse-forte);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.dc-b07-pill--rouge {
  background: var(--dc-rouge-pale-fond);
  color: var(--dc-rouge-pale-texte);
  box-shadow: inset 0 0 0 1px var(--dc-rouge-pale-bord);
}
.dc-b07-pill--vert {
  background: var(--dc-vert-pale-fond);
  color: var(--dc-vert-pale-texte);
  box-shadow: inset 0 0 0 1px var(--dc-vert-pale-bord);
}
/* « En préparation » n'est ni une alerte ni une bonne nouvelle : c'est un état.
   Il reste dans la teinte du bloc, sans pastille colorée qui crierait. */
.dc-b07-pill--prepa {
  background: transparent;
  color: var(--dc-texte-titre);
  padding: 3px 0;
  font-size: var(--dc-b07-taille-chiffre);
}

/* La cellule BLOQUÉS entière se teinte dès qu'elle porte un blocage : c'est LA
   priorité de cet écran, elle doit se voir avant d'être lue. */
.dc-b07-bloques { background: var(--dc-rouge-pale-fond) !important; }
.dc-b07-ligne--total .dc-b07-bloques { background: var(--dc-rouge-pale-fond) !important; }

/* ── La modale des épics derrière un compteur ───────────────────────────────
   Elle reprend le voile et la carte de `repartition-modal.js` (`dcr-*`) : une
   seconde grammaire de modale dans le même écran serait une divergence. Seule
   la liste lui est propre. */
.dce-modale { max-width: 620px; }
.dce-compte {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--dc-rouge-pale-fond);
  color: var(--dc-rouge-pale-texte);
  font-size: 13px;
  font-weight: var(--dc-graisse-forte);
}
.dce-corps { max-height: 62vh; overflow-y: auto; }
.dce-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

/* Chaque épic est un BOUTON pleine largeur : la zone cliquable est la ligne
   entière, pas seulement son titre. Un lien de trois mots au milieu d'une
   rangée est une cible qu'on manque. */
.dce-epic {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--dc-rayon-pastille);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.dce-epic:hover { background: var(--dc-fond-survol); }
.dce-epic:focus-visible { outline: 2px solid var(--dc-violet); outline-offset: -2px; }
.dce-epic-id {
  font-family: var(--dc-police-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--dc-texte-faible);
}
.dce-epic-titre {
  font-size: 14px;
  color: var(--dc-texte-titre);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* L'action ne se révèle qu'au survol : affichée en permanence sur dix lignes,
   elle répéterait dix fois la même phrase et noierait les titres. */
.dce-epic-action {
  font-size: 11.5px;
  color: var(--dc-violet);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 160ms ease-out;
}
.dce-epic:hover .dce-epic-action,
.dce-epic:focus-visible .dce-epic-action { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dce-epic, .dce-epic-action { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-b07-ligne--donnees { transition: none; }
}

/* ⚠️ DÉCLARÉE APRÈS `.dc-b07-chiffre`, ET C'EST TOUT L'ENJEU. Placée plus haut
   dans le fichier, cette règle était écrasée par la couleur de base à
   spécificité égale : le chiffre s'affichait en noir et l'alerte ne se voyait
   pas. Les épics BLOQUÉS sont la seule colonne chiffrée qui change de ton, et
   seulement quand elle est non nulle — un rouge permanent cesserait d'alerter. */
.dc-b07-chiffre--alerte { color: var(--dc-rouge); font-weight: 800; }

/* ── Bloc 05 · la barre empilée remonte sous la phrase de contexte ─────────
   Hicham, 02/09 : « remonte la barre un peu et occupe bien le bloc ».
   `.dc-compartment-viz` porte `justify-content: flex-end` — juste pour les
   cartes dont la visualisation doit s'ancrer en bas (les tuiles). Sur une carte
   PLEINE LARGEUR, cela poussait la barre vers le bas et laissait un vide entre
   la phrase et elle : mesuré 116 px de zone pour 100 px de contenu.
   ⚠️ ON NE TOUCHE PAS À LA RÈGLE GLOBALE : elle sert aux autres cartes, et la
   changer les casserait toutes. On cible la seule visualisation concernée par
   son enfant — l'idiome `:has()` déjà employé quinze lignes plus haut. */
.dc-compartment-viz:has(> .dc-viz-empilee-legende) {
  justify-content: flex-start;
  gap: var(--dc-espace-5);
}

.dc-b07-progression { display: flex; align-items: center; gap: var(--dc-espace-5); }

.dc-b07-piste {
  flex: 1;
  height: var(--dc-b07-hauteur-barre);
  border-radius: var(--dc-b07-rayon-barre);
  background: var(--dc-b07-piste-barre);
  display: block;
}

.dc-b07-piste--total { background: var(--dc-b07-piste-barre-total); }

/* Une ligne à zéro n'a pas de barre pleine : une piste en pointillé, qui dit
   « rien n'est engagé ici » au lieu de laisser croire à une mesure minuscule. */
.dc-b07-piste--vide {
  background: none;
  border: var(--dc-filet-largeur) dashed var(--dc-filet-pointille);
}

.dc-b07-barre {
  display: block;
  height: var(--dc-b07-hauteur-barre);
  border-radius: var(--dc-b07-rayon-barre);
  background: var(--dc-violet);
}

.dc-b07-taux {
  width: var(--dc-b07-largeur-taux);
  flex: 0 0 var(--dc-b07-largeur-taux);
  text-align: right;
  font-size: var(--dc-b07-taille-taux);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-corps);
  font-variant-numeric: tabular-nums;
}

.dc-b07-taux--gris  { color: var(--dc-texte-faible); }
.dc-b07-taux--total { font-weight: var(--dc-graisse-forte); color: var(--dc-texte-titre); }

/* --- Barres verticales (viz/bars-vertical.js) ----------------------------- */

.dc-barres-v {
  display: grid;
  gap: var(--dc-espace-10);
  align-items: end;
  flex: 1;
  min-height: var(--dc-hauteur-viz-panneau);
  width: 100%;
}

.dc-barres-v-colonne {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dc-espace-2);
  height: 100%;
  justify-content: flex-end;
}

.dc-barres-v-valeur {
  /* Meme piege : sans repli, la taille est simplement ignoree et le texte herite
     de son parent. Valeur non-projection de la maquette : 11.5px. */
  font-size: var(--dc-proj-taille-valeur-barre, 11.5px);
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-texte-titre);
}

.dc-barres-v-barre {
  width: 100%;
  background: var(--dc-violet);
  border-radius: var(--dc-rayon-barre);
}

.dc-barres-v-libelle {
  font-size: var(--dc-taille-legende);
  color: var(--dc-texte-tertiaire);
  text-align: center;
}

/* --- Matrice de ratios (viz/ratio-matrix.js) ------------------------------ */

.dc-matrice {
  display: grid;
  /* ⚠️ LES TOKENS `--dc-proj-*` N'EXISTENT QUE SOUS `.dc-presentation`.
     Hors mode projection, `--dc-proj-gouttiere-phase` est ABSENTE : la
     declaration `gap` entiere devient invalide et retombe a `normal`, c'est-a-dire
     ZERO — y compris pour sa composante horizontale, pourtant valide.
     Mesure du 25/08 : 0 px entre deux pastilles et 0 px entre le libelle et son
     bloc, a toutes les largeurs. Les pastilles se touchaient, et leurs coins
     arrondis dessinaient un losange blanc la ou il aurait du y avoir une
     gouttiere — releve par Hicham : « il faut un saut de ligne pas bloc colle, et
     un espace entre bloc et label ».
     Le repli reprend la valeur non-projection de la maquette (10px) portee a 14px,
     celle qu'elle utilise en projection : c'est le meme panneau, il merite le meme
     air dans les deux modes. */
  gap: var(--dc-proj-gouttiere-phase, 14px) var(--dc-espace-7);
  align-items: center;
  align-content: center;
  flex: 1;
  width: 100%;
}

/* ── L'EN-TÊTE DE COLONNE SE LIT ────────────────────────────────────────────
   Hicham, 27/08, sa maquette en regard de l'écran : « corriges l'affichage, ci
   joint l'affichage maquette ». Il a même isolé la ligne des en-têtes dans une
   capture à part — c'est bien d'eux qu'il s'agit.

   Ils étaient en `--dc-texte-tertiaire` (#8a89a8), le ton des SURTITRES et des
   LÉGENDES. Or ce ne sont pas des mentions : ce sont les deux colonnes qui
   donnent son sens à chaque pastille — sans « EN PRODUCTION » et « EN COURS »,
   un 72 % vert ne veut rien dire. Sur la maquette ils sont nettement plus
   soutenus.

   On passe à `--dc-texte-secondaire` (#6b6b8a), le ton des libellés de tuile.
   C'est le rôle qu'ils jouent, et le contraste s'en trouve conforme au reste de
   l'écran plutôt que traité comme une note de bas de page. */
.dc-matrice-entete {
  font-size: var(--dc-taille-micro);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-texte-secondaire);
  text-align: center;
}

.dc-matrice-libelle {
  font-size: var(--dc-taille-corps-large);
  color: var(--dc-texte-titre);
}

.dc-matrice-pastille {
  height: var(--dc-espace-11);
  border-radius: var(--dc-rayon-bouton);
  color: var(--dc-texte-inverse);
  font-size: var(--dc-taille-etiquette);
  font-weight: var(--dc-graisse-forte);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-matrice-pastille--vert  { background: var(--dc-vert); }
.dc-matrice-pastille--ambre { background: var(--dc-ambre); }
.dc-matrice-pastille--rouge { background: var(--dc-rouge); }

/* ⚠️ MÊME HAUTEUR QU'UNE PASTILLE — sinon les lignes se décalent.
   Une cellule vide en `display:block` occupe une hauteur NULLE. La ligne d'une
   phase sans mesure fait alors la hauteur de son seul libellé (~20 px) pendant
   qu'une ligne avec pastilles en fait 44 : les libellés glissent d'une demi-ligne
   et ne répondent plus aux pastilles d'en face. Relevé par Hicham le 25/08 sur
   capture — « 33 % » s'affichait à côté de « B · Développement » alors qu'il
   appartient à la ligne du dessus.
   La cellule garde donc la hauteur d'une pastille : c'est un emplacement réservé,
   pas une pastille grise — qui, elle, se lirait comme une mesure.

   ── ET ELLE PORTE DÉSORMAIS UN TIRET ────────────────────────────────────
   Hicham, 26/08 : « corriges cet affichage ». La géométrie était juste — mesurée
   avant de toucher quoi que ce soit : en-têtes centrés au pixel, libellés à la
   hauteur de leurs pastilles, quatre lignes de 28 px. Ce qui manquait, c'était
   du SENS : trois cases blanches, dont les deux d'une phase entière, sans rien
   qui distingue « pas de mesure » d'un rendu qui a échoué.
   Le tiret est la convention du produit pour une valeur absente — le tiroir de ce
   même panneau l'écrit déjà sur un taux nul. Il reste en gris tertiaire : il dit
   qu'on n'a pas mesuré, il ne prétend pas à une valeur. */
.dc-matrice-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--dc-espace-11);
  color: var(--dc-texte-tertiaire);
  font-size: var(--dc-taille-etiquette);
}

/* Une phase dont AUCUNE colonne n'est mesurée s'atténue : la ligne existe, elle
   n'a rien à dire, et elle ne doit pas peser autant qu'une ligne mesurée. */
.dc-matrice-libelle--sans-mesure { color: var(--dc-texte-tertiaire); }

/* La note vit sous la grille, hors du flux en colonnes. */
.dc-matrice-note {
  display: block;
  margin-top: var(--dc-espace-4, 8px);
}

/* --- Liste d'alertes (viz/alert-list.js) ---------------------------------- */

.dc-alertes {
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-6);
  flex: 1;
  width: 100%;
}

/* Meme piege que la matrice : ce token n'existe que sous `.dc-presentation`.
   Repli sur la valeur non-projection de la maquette (`gouttiereAlertes` = 14px). */
.dc-alertes--grille { display: grid; gap: var(--dc-proj-gouttiere-alertes, 14px); }

.dc-alerte {
  display: flex;
  gap: var(--dc-espace-5);
  padding: var(--dc-espace-2) var(--dc-espace-4);
  margin: calc(-1 * var(--dc-espace-2)) calc(-1 * var(--dc-espace-4));
  border-radius: var(--dc-rayon-formule);
  cursor: pointer;
}

.dc-alerte:hover { background: var(--dc-fond-survol-menu); }

.dc-alerte-pastille {
  width: var(--dc-espace-4);
  height: var(--dc-espace-4);
  flex: 0 0 var(--dc-espace-4);
  border-radius: var(--dc-rayon-pilule);
  margin-top: var(--dc-espace-2);
}

.dc-alerte-pastille--rouge { background: var(--dc-rouge); }
.dc-alerte-pastille--ambre { background: var(--dc-ambre); }
.dc-alerte-pastille--vert  { background: var(--dc-vert); }

.dc-alerte-texte { display: flex; flex-direction: column; gap: var(--dc-espace-1); min-width: 0; }

.dc-alerte-titre {
  font-size: var(--dc-taille-corps-large);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-titre);
}

.dc-alerte-motif {
  font-size: var(--dc-taille-legende);
  color: var(--dc-texte-tertiaire);
}

/* --- Outils du bandeau : présentation et plein écran ---------------------- */

.dc-banner-outils {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-2);
  margin-right: var(--dc-espace-3);
}

.dc-banner-outil {
  font: inherit;
  width: var(--dc-espace-12);
  height: var(--dc-espace-12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dc-translucide);
  border: var(--dc-filet-largeur) solid var(--dc-translucide-bord);
  border-radius: var(--dc-rayon-bouton);
  cursor: pointer;
}

.dc-banner-outil:hover { background: var(--dc-translucide-survol); }

/* Les icônes de la maquette sont tracées en gris ; sur le bandeau bleu nuit il leur
   faut le trait clair. `stroke: currentColor` sur le SVG suffit, la couleur venant
   du bouton. */
.dc-banner-outil svg { stroke: var(--dc-texte-inverse-faible); }
.dc-banner-outil:hover svg { stroke: var(--dc-texte-inverse); }

/* --- Plein écran (fullscreen-mode.js) ------------------------------------- */

.dc-pastille-plein {
  font: inherit;
  position: absolute;
  top: var(--dc-espace-7);
  right: var(--dc-espace-7);
  z-index: var(--dc-z-plein-ecran);
  background: var(--dc-fond-nuit);
  color: var(--dc-texte-inverse);
  border: 0;
  border-radius: var(--dc-rayon-pilule);
  padding: var(--dc-espace-3) var(--dc-espace-7);
  font-size: var(--dc-taille-etiquette);
  font-weight: var(--dc-graisse-semi);
  cursor: pointer;
  opacity: 1;
  transition: opacity var(--dc-duree-vue) var(--dc-courbe);
}

.dc-pastille-plein--estompee { opacity: 0; }

/* --- Tiroir de détail (detail-drawer.js, detail-table.js, accordion.js) --- */
/* Porté de la maquette l. 290-403. `fixed` et non `absolute` : le tiroir se pose sur
   toute la fenêtre, par-dessus la barre latérale de l'application — c'est ce que fait
   la maquette, et c'est ce qui lui donne ses 100vh. */

.dc-drawer-voile {
  position: fixed;
  inset: 0;
  z-index: var(--dc-z-voile);
  background: var(--dc-voile);
}

/* ⚠️ CLASSE RENOMMÉE — `.dc-drawer` est DÉJÀ PRIS par `assets/css/dashboard.css:660`
   (tiroir de l'ancienne Vue Décideur v2), qui le pose en `transform: translateX(100%)`
   et ne le ramène qu'avec `.dc-drawer.open`. Mesuré le 20/08 : mon tiroir s'ouvrait
   entièrement HORS ÉCRAN, à x=1440 sur une fenêtre de 1440 — visible pour le
   navigateur, inatteignable pour l'utilisateur. Troisième collision `.dc-*` de ce
   chantier après `.dc-kpi-value` et `.dc-kpi-label` : auditer AVANT d'ajouter. */
.dc-tiroir-detail {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  z-index: var(--dc-z-tiroir);
  width: var(--dc-largeur-drawer-detail);
  max-width: 100%;
  background: var(--dc-fond-carte);
  border-left: var(--dc-filet-largeur) solid var(--dc-filet-drawer);
  box-shadow: var(--dc-ombre-drawer);
  display: flex;
  flex-direction: column;
}

/* En-tête : colonne de texte à gauche, valeur à droite, croix. Alignés en HAUT. */
.dc-drawer-entete {
  flex: 0 0 auto;
  background: var(--dc-fond-nuit);
  color: var(--dc-texte-inverse);
  padding: var(--dc-espace-10) var(--dc-espace-11);
  display: flex;
  align-items: flex-start;
  gap: var(--dc-espace-8);
}

.dc-drawer-entete-texte {
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-3);
  min-width: 0;
}

.dc-drawer-titre {
  font-size: var(--dc-taille-etiquette);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
}

.dc-drawer-perimetre {
  font-size: var(--dc-taille-note);
  color: var(--dc-texte-inverse-faible);
}

.dc-drawer-valeur {
  margin-left: auto;
  font-size: var(--dc-taille-valeur-drawer);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-chiffre);
  line-height: var(--dc-interligne-serre);
  white-space: nowrap;
}

.dc-drawer-unite { font-size: var(--dc-taille-unite-compartiment); }

.dc-drawer-fermer {
  font: inherit;
  flex: 0 0 var(--dc-espace-10);
  width: var(--dc-espace-10);
  height: var(--dc-espace-10);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--dc-rayon-item);
  color: var(--dc-texte-inverse-tres-faible);
  font-size: var(--dc-taille-corps);
  cursor: pointer;
}

.dc-drawer-fermer:hover {
  background: var(--dc-translucide-survol);
  color: var(--dc-texte-inverse);
}

/* UNE seule zone défilante, qui contient le corps ET le socle. */
.dc-drawer-defilant {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.dc-drawer-corps {
  padding: var(--dc-espace-11);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-10);
}

.dc-drawer-definition {
  margin: 0;
  font-size: var(--dc-taille-definition);
  line-height: var(--dc-interligne-texte);
  color: var(--dc-texte-titre);
  text-wrap: pretty;
}

.dc-drawer-section { display: flex; flex-direction: column; gap: var(--dc-espace-3); }

.dc-drawer-section-titre {
  font-size: var(--dc-taille-micro);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales-socle);
  color: var(--dc-texte-faible);
}

.dc-drawer-section-texte {
  margin: 0;
  font-size: var(--dc-taille-cellule);
  line-height: var(--dc-interligne-phrase);
  color: var(--dc-texte-corps);
  text-wrap: pretty;
}

/* Bloc formule : deux bandes monospace, la seconde en violet sous un filet. */
.dc-drawer-formule {
  background: var(--dc-fond-formule);
  border: var(--dc-filet-largeur) solid var(--dc-filet-formule);
  border-radius: var(--dc-rayon-formule);
  overflow: hidden;
}

.dc-drawer-formule-brute,
.dc-drawer-formule-chiffree {
  display: block;
  font-family: var(--dc-police-mono);
  font-size: var(--dc-taille-etiquette);
  line-height: var(--dc-interligne-phrase);
  padding: var(--dc-espace-5) var(--dc-espace-6);
}

.dc-drawer-formule-brute { color: var(--dc-texte-titre); }

.dc-drawer-formule-chiffree {
  border-top: var(--dc-filet-largeur) solid var(--dc-filet-formule);
  font-weight: var(--dc-graisse-medium);
  color: var(--dc-violet-lien);
}

.dc-detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.dc-detail-table th {
  text-align: left;
  padding: 0 var(--dc-espace-4) var(--dc-espace-4);
  border-bottom: var(--dc-filet-largeur) solid var(--dc-filet-tableau);
  font-size: var(--dc-taille-note);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-texte-tertiaire);
  white-space: nowrap;
}

.dc-detail-table tbody tr { height: var(--dc-espace-13);   /* 40px : hauteur de rangée de la maquette */ }
.dc-detail-table tbody tr:hover { background: var(--dc-fond-survol); }

.dc-detail-table td {
  padding: 0 var(--dc-espace-4);
  border-bottom: var(--dc-filet-largeur) solid var(--dc-filet-tres-doux);
  font-size: var(--dc-taille-cellule);
  color: var(--dc-texte-corps);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dc-cellule--id { font-family: var(--dc-police-mono); color: var(--dc-texte-secondaire); }

/* SEUL rôle autorisé à tronquer — le titre complet reste en attribut `title`. */
.dc-cellule--epic {
  max-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dc-texte-titre);
}

.dc-cellule--date,
.dc-cellule--num { text-align: right; }

/* ── L'EN-TÊTE S'ALIGNE SUR SA COLONNE ───────────────────────────────────────
   Hicham, 26/08, deux fois : « l'affichage est décalé en prod », puis
   « corriges cet affichage ».

   CAUSE, ET ELLE EST DANS LA SPÉCIFICITÉ, PAS DANS LE RENDU.
   `detail-table.js` pose déjà la classe de rôle sur le `th` comme sur le `td`
   (l. 37 et 50) : l'en-tête d'une colonne numérique porte bien
   `dc-cellule--num`. Mais `.dc-detail-table th` vaut 0,1,1 en spécificité et
   `.dc-cellule--num` seulement 0,1,0 : l'alignement à gauche l'emporte, quel
   que soit l'ordre des règles.

   Résultat à l'écran : le titre à gauche, la valeur à droite. Sur une colonne
   étroite cela se remarque à peine ; sur « Dates échues », large, le chiffre
   atterrit sous le titre SUIVANT et le tableau devient illisible — c'est
   exactement ce que montrent les captures du panneau « Tenue des engagements ».

   On remonte donc la spécificité au même niveau, sans toucher au renderer. */
.dc-detail-table th.dc-cellule--num,
.dc-detail-table th.dc-cellule--date { text-align: right; }

/* Une pastille ne se coupe jamais : la colonne se dimensionne sur son contenu. */
.dc-cellule--pill { width: 1%; }

/* ── CR-25 · LE NOM D'UN ÉPIC EST UN LIEN ────────────────────────────────────
   Boubker, 27/08 : « Rendre le nom de l'Epic cliquable vers sa fiche détaillée ».

   ⚠️ UN LIEN DOIT SE VOIR SANS CRIER. Cet écran est lu de loin, en réunion : du
   bleu souligné partout transformerait un tableau de bord en page web. Le nom
   garde donc sa couleur, et n'annonce le geste qu'au survol — soulignement
   pointillé et couleur d'accent. Ce qui n'est PAS cliquable (un libellé sans
   identifiant) ne reçoit jamais cette classe : rien ne promet ce qu'il ne fait pas. */
.dc-epic-lien {
  cursor: pointer;
  text-decoration: underline dotted transparent;
  text-underline-offset: 3px;
  transition: color .12s ease, text-decoration-color .12s ease;
}
.dc-epic-lien:hover,
.dc-epic-lien:focus-visible {
  color: var(--dc-violet-pale-texte);
  text-decoration-color: currentColor;
}
.dc-epic-lien:focus-visible {
  outline: 2px solid var(--dc-violet-pale-bord);
  outline-offset: 2px;
  border-radius: var(--dc-rayon-item);
}

/* Le nom de l'épic sur une carte d'alerte : sous le code, plus discret que lui. */
.dc-alerte-epic {
  display: block;
  font-size: var(--dc-taille-note);
  color: var(--dc-texte-secondaire);
  /* Un titre long tronque ICI, et jamais le délai qui le précède. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── UNE LIGNE QUI SE DÉPLIE ─────────────────────────────────────────────────
   Ticket : « rendre les éléments de catégorie interactifs/cliquables ; au clic,
   déplier la liste des épics associés ».

   ⚠️ CE QUI EST CLIQUABLE DOIT AVOIR L'AIR CLIQUABLE, ET RIEN D'AUTRE NE DOIT
   L'AVOIR. Toutes les lignes du tableau se surlignaient déjà au survol : garder
   ce seul signal aurait rendu les lignes dépliables indiscernables des autres.
   Le chevron dans la pastille est donc le signal, et il n'apparaît QUE sur une
   ligne qui porte des épics. Il pivote à l'ouverture — l'état se lit sans avoir
   à regarder plus bas. */
.dc-ligne-depliable { cursor: pointer; }
.dc-ligne-depliable:focus-visible {
  outline: 2px solid var(--dc-violet-pale-bord);
  outline-offset: -2px;
}
.dc-pastille--depliable { padding-left: var(--dc-espace-2); }

.dc-chevron {
  display: inline-block;
  margin-right: var(--dc-espace-1);
  font-weight: var(--dc-graisse-forte);
  transition: transform .15s ease;
}
.dc-ligne-depliable--ouverte .dc-chevron { transform: rotate(90deg); }

/* Le déplié n'est pas une rangée de plus : c'est un tiroir sous la ligne. Fond
   du socle et filet gauche l'y rattachent visuellement, sinon on lit une liste
   d'épics flottante dont on ne sait plus de quelle catégorie elle vient. */
.dc-ligne-depli > td {
  padding: 0;
  background: var(--dc-fond-socle);
  white-space: normal;
}
.dc-ligne-depli:hover > td { background: var(--dc-fond-socle); }

.dc-depli-liste {
  list-style: none;
  margin: 0;
  padding: var(--dc-espace-3) var(--dc-espace-4) var(--dc-espace-3) var(--dc-espace-8);
  /* Vingt-trois épics ne doivent pas pousser le reste du tiroir hors de vue :
     au-delà, la liste défile chez elle. */
  max-height: 240px;
  overflow-y: auto;
}
.dc-depli-liste li {
  display: flex;
  align-items: baseline;
  gap: var(--dc-espace-4);
  padding: var(--dc-espace-1) 0;
  font-size: var(--dc-taille-note);
  line-height: 1.5;
}
.dc-depli-ref {
  flex: 0 0 auto;
  font-family: var(--dc-police-mono);
  color: var(--dc-texte-secondaire);
}
/* Le titre prend la place restante et tronque — même règle que le rôle `epic`. */
.dc-depli-titre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dc-texte-corps);
}
.dc-depli-charge {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-texte-titre);
}

.dc-pastille {
  display: inline-block;
  font-size: var(--dc-taille-note);
  font-weight: var(--dc-graisse-forte);
  border-radius: var(--dc-rayon-item);
  padding: var(--dc-espace-1) var(--dc-espace-3);
  white-space: nowrap;
  background: var(--dc-neutre-pale-fond);
  color: var(--dc-neutre-pale-texte);
  border: var(--dc-filet-largeur) solid var(--dc-neutre-pale-bord);
}

.dc-pastille--vert   { background: var(--dc-vert-pale-fond);   color: var(--dc-vert-pale-texte);   border-color: var(--dc-vert-pale-bord); }
.dc-pastille--ambre  { background: var(--dc-ambre-pale-fond);  color: var(--dc-ambre-pale-texte);  border-color: var(--dc-ambre-pale-bord); }
.dc-pastille--rouge  { background: var(--dc-rouge-pale-fond);  color: var(--dc-rouge-pale-texte);  border-color: var(--dc-rouge-pale-bord); }
.dc-pastille--violet { background: var(--dc-violet-pale-fond); color: var(--dc-violet-pale-texte); border-color: var(--dc-violet-pale-bord); }

.dc-detail-reste {
  margin: var(--dc-espace-5) 0 0;
  padding: 0 var(--dc-espace-4);
  font-size: var(--dc-taille-cellule);
  font-style: italic;
  color: var(--dc-texte-faible);
}

/* `flex: 1` DANS la zone défilante : c'est ce socle qui absorbe le vide quand le
   contenu est court. Sans lui, un tiroir d'alerte laisse la moitié basse blanche. */
.dc-drawer-socle {
  flex: 1;
  background: var(--dc-fond-socle);
  border-top: var(--dc-filet-largeur) solid var(--dc-filet-socle);
  padding: var(--dc-espace-7) var(--dc-espace-10) var(--dc-espace-9);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-1);
}

.dc-accordeon-tete {
  font: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--dc-espace-5);
  background: none;
  border: 0;
  padding: var(--dc-espace-4) var(--dc-espace-1);
  border-radius: var(--dc-rayon-bouton);
  cursor: pointer;
  text-align: left;
}

.dc-accordeon-tete:hover { background: var(--dc-fond-survol-socle); }

.dc-accordeon-chevron {
  width: var(--dc-espace-5);
  flex: 0 0 var(--dc-espace-5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--dc-taille-cellule);
  color: var(--dc-texte-tertiaire);
  transition: transform var(--dc-duree-accordeon) var(--dc-courbe);
}

.dc-accordeon--ouvert .dc-accordeon-chevron { transform: rotate(90deg); }

.dc-accordeon-titre {
  font-size: var(--dc-taille-accordeon);
  font-weight: var(--dc-graisse-medium);
  color: var(--dc-texte-titre);
}

/* Chaque source est précédée d'une puce ronde, comme dans la maquette. */
.dc-accordeon-corps {
  margin: 0;
  padding: var(--dc-espace-1) var(--dc-espace-1) var(--dc-espace-6) var(--dc-espace-12);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-4);
}

.dc-accordeon-corps li {
  position: relative;
  padding-left: var(--dc-espace-5);
  font-size: var(--dc-taille-corps-large);
  line-height: var(--dc-interligne-phrase);
  color: var(--dc-texte-secondaire);
}

.dc-accordeon-corps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--dc-espace-3);
  width: var(--dc-espace-1);
  height: var(--dc-espace-1);
  border-radius: var(--dc-rayon-pilule);
  background: var(--dc-filet-bouton-survol);
}

.dc-accordeon-corps[hidden] { display: none; }

.dc-drawer-pied {
  flex: 0 0 var(--dc-hauteur-pied-drawer);
  height: var(--dc-hauteur-pied-drawer);
  display: flex;
  align-items: center;
  gap: var(--dc-espace-7);
  padding: 0 var(--dc-espace-11);
  border-top: var(--dc-filet-largeur) solid var(--dc-filet-socle);
  background: var(--dc-fond-carte);
}

.dc-drawer-recalcul {
  font-size: var(--dc-taille-cellule);
  color: var(--dc-texte-tertiaire);
}

.dc-drawer-lien {
  margin-left: auto;
  font-size: var(--dc-taille-cellule);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-violet);
  text-decoration: none;
  cursor: pointer;
}

.dc-drawer-lien:hover { text-decoration: underline; }

/* --- Tiroir de personnalisation (customize-panel.js) ---------------------- */

.dc-perso-voile {
  position: absolute;
  inset: 0;
  z-index: var(--dc-z-voile);
  background: var(--dc-voile-leger);
}

.dc-perso {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--dc-z-tiroir);
  width: var(--dc-largeur-drawer-perso);
  max-width: 100%;
  background: var(--dc-fond-carte);
  border-left: var(--dc-filet-largeur) solid var(--dc-filet-drawer);
  box-shadow: var(--dc-ombre-drawer-perso);
  display: flex;
  flex-direction: column;
}

.dc-perso-entete {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
  padding: var(--dc-espace-7) var(--dc-espace-8);
  border-bottom: var(--dc-filet-largeur) solid var(--dc-filet-doux);
  flex: 0 0 auto;
}

.dc-perso-titre {
  font-size: var(--dc-taille-accordeon);
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-texte-titre);
}

.dc-perso-fermer {
  font: inherit;
  margin-left: auto;
  background: none;
  border: 0;
  font-size: var(--dc-taille-cellule);
  color: var(--dc-texte-secondaire);
  cursor: pointer;
  padding: var(--dc-espace-1);
}

.dc-perso-fermer:hover { color: var(--dc-texte-titre); }

/* Le corps est la SEULE zone qui défile : l'en-tête et le pied restent en vue,
   sinon le bouton « Tout afficher » disparaît dès qu'on descend dans la liste. */
.dc-perso-corps {
  flex: 1;
  overflow-y: auto;
  padding: var(--dc-espace-6) var(--dc-espace-8);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-7);
}

.dc-perso-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-2);
}

.dc-perso-groupe-titre {
  font-size: var(--dc-taille-micro);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales-large);
  color: var(--dc-texte-faible);
  margin-bottom: var(--dc-espace-1);
}

.dc-perso-ligne {
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
  padding: var(--dc-espace-2) var(--dc-espace-1);
  border-radius: var(--dc-rayon-item);
  cursor: pointer;
}

.dc-perso-ligne:hover { background: var(--dc-fond-survol-nav); }

.dc-perso-case {
  accent-color: var(--dc-violet);
  cursor: pointer;
  flex: 0 0 auto;
}

.dc-perso-ligne-texte {
  font-size: var(--dc-taille-corps-large);
  color: var(--dc-texte-corps);
}

.dc-perso-pied {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-espace-4);
  padding: var(--dc-espace-6) var(--dc-espace-8);
  border-top: var(--dc-filet-largeur) solid var(--dc-filet-doux);
}

/* --- Notification brève (toast.js) ---------------------------------------- */

.dc-toast {
  position: absolute;
  right: var(--dc-espace-8);
  bottom: var(--dc-espace-8);
  z-index: var(--dc-z-toast);
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-bouton);
  border-radius: var(--dc-rayon-menu);
  padding: var(--dc-espace-5) var(--dc-espace-7);
  box-shadow: var(--dc-ombre-toast);
}

.dc-toast-icone {
  width: var(--dc-espace-6);
  height: var(--dc-espace-6);
  flex: 0 0 auto;
  color: var(--dc-vert);
}

.dc-toast-texte {
  font-size: var(--dc-taille-corps);
  color: var(--dc-texte-titre);
  white-space: nowrap;
}

/* --- Bandeau d'état (status-bar.js) --------------------------------------- */

.dc-status-bar {
  background: var(--dc-fond-bandeau-etat);
  border: var(--dc-filet-largeur) solid var(--dc-filet-bandeau-etat);
  border-radius: var(--dc-rayon-carte);
  /* padding 14px 18px : --dc-espace-6 (14px) est exact, --dc-espace-8 (20px) est le
     plus proche pour 18px. */
  padding: var(--dc-espace-6) var(--dc-espace-8);
  display: flex;
  align-items: center;
  gap: var(--dc-espace-8);
  flex-wrap: wrap;
}

.dc-status-bar-message {
  margin: 0;
  font-size: var(--dc-taille-corps-large);
  color: var(--dc-texte-corps);
}

.dc-status-bar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--dc-espace-4);
}

.dc-button {
  font: inherit;
  display: flex;
  align-items: center;
  /* gap 9px : pas de token exact, --dc-espace-4 (10px) est le plus proche. */
  gap: var(--dc-espace-4);
  font-size: var(--dc-taille-corps);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-titre);
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-bouton);
  border-radius: var(--dc-rayon-bouton);
  /* padding 9px 14px : --dc-espace-6 (14px) est exact, --dc-espace-4 (10px) le plus
     proche pour 9px. */
  padding: var(--dc-espace-4) var(--dc-espace-6);
  cursor: pointer;
  white-space: nowrap;
}

.dc-button:hover,
.dc-button--ouvert {
  border-color: var(--dc-filet-bouton-survol);
}

.dc-badge-masques {
  font-size: var(--dc-taille-legende);
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-violet-lien);
  background: var(--dc-violet-pale-fond);
  border: var(--dc-filet-largeur) solid var(--dc-violet-pale-bord);
  border-radius: var(--dc-rayon-badge);
  padding: 0 var(--dc-espace-2);
}

.dc-badge-masques[hidden] { display: none; }

.dc-export-wrap { position: relative; }

.dc-export-menu {
  position: absolute;
  top: calc(100% + var(--dc-espace-3));
  right: 0;
  z-index: 40;
  width: var(--dc-largeur-menu-export);
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-drawer);
  border-radius: var(--dc-rayon-menu);
  padding: var(--dc-espace-2);
  box-shadow: var(--dc-ombre-menu);
}

.dc-export-menu[hidden] { display: none; }

.dc-export-item {
  display: flex;
  gap: var(--dc-espace-5);
  padding: var(--dc-espace-4);
  border-radius: var(--dc-rayon-bouton);
  cursor: pointer;
}

.dc-export-item:hover { background: var(--dc-fond-survol-menu); }

.dc-export-item-texte {
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-1);
  min-width: 0;
}

.dc-export-item-titre {
  font-size: var(--dc-taille-corps);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-titre);
}

.dc-export-item-desc {
  font-size: var(--dc-taille-legende);
  color: var(--dc-texte-tertiaire);
}

.dc-blocs {
  display: flex;
  flex-direction: column;
  gap: var(--dc-gouttiere-rubriques);
}

/* Recalcul en cours après un changement de filtre. On atténue au lieu de vider :
   un écran qui se vide donne l'impression d'avoir perdu ses données, alors qu'il
   attend le nouveau calcul. Les clics sont neutralisés le temps du chargement. */
.dc-blocs--chargement {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--dc-duree-vue) var(--dc-courbe);
}

/* Marqueur des blocs encore alimentés par la fixture de démonstration. Discret mais
   toujours lisible : sur un écran de décision, un chiffre de démo indiscernable d'un
   chiffre réel est le pire défaut possible. Disparaît dès que le bloc est branché. */
.dc-bloc--demo::before {
  content: "DÉMO";
  position: absolute;
  top: var(--dc-espace-3);
  right: var(--dc-espace-11);
  font-size: var(--dc-taille-micro);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-ambre-pale-texte);
  background: var(--dc-ambre-pale-fond);
  border: var(--dc-filet-largeur) solid var(--dc-ambre-pale-bord);
  border-radius: var(--dc-rayon-pastille);
  padding: 0 var(--dc-espace-1);
  pointer-events: none;
}

/* Le marqueur occupe le coin haut droit, juste après la pastille d'affordance : la
   ligne de titre doit lui réserver sa place, sinon le surtitre passe dessous. */
.dc-bloc--demo .dc-compartment-head,
.dc-bloc--demo .dc-panel-title {
  padding-right: calc(var(--dc-espace-9) + var(--dc-espace-13));
}

/* --- Pastille d'affordance (commune tuile / carte / panneau) --------------- */

.dc-affordance {
  position: absolute;
  /* 9px dans la maquette : pas de token exact, --dc-espace-3 (8px) est le plus proche. */
  top: var(--dc-espace-3);
  right: var(--dc-espace-3);
  /* 15×15 : pas de token de dimension à 15px, --dc-espace-7 (16px) est le plus proche. */
  width: var(--dc-espace-7);
  height: var(--dc-espace-7);
  border-radius: var(--dc-rayon-pilule);
  background: var(--dc-fond-pastille-info);
  color: var(--dc-texte-tertiaire);
  font-size: var(--dc-taille-micro);
  font-weight: var(--dc-graisse-forte);
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Tuiles KPI ------------------------------------------------------------ */

.dc-kpi-tile {
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-carte);
  border-left: var(--dc-filet-accent-tuile) solid var(--dc-violet);
  border-radius: var(--dc-rayon-carte);
  padding: var(--dc-padding-tuile);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-3);
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  position: relative;
}

.dc-kpi-tile:hover {
  border-top-color: var(--dc-filet-bouton-survol);
  border-right-color: var(--dc-filet-bouton-survol);
  border-bottom-color: var(--dc-filet-bouton-survol);
}

.dc-kpi-tile--violet { border-left-color: var(--dc-violet); }
.dc-kpi-tile--ambre  { border-left-color: var(--dc-ambre); }
.dc-kpi-tile--indigo { border-left-color: var(--dc-indigo); }
.dc-kpi-tile--vert   { border-left-color: var(--dc-vert); }

.dc-kpi-tile-value {
  font-size: var(--dc-taille-chiffre-tuile);
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-texte-titre);
  /* letter-spacing -0.02em : pas de token exact, --dc-interlettre-chiffre (-0.025em) est
     le plus proche. */
  letter-spacing: var(--dc-interlettre-chiffre);
  line-height: var(--dc-interligne-serre);
}

.dc-kpi-unit {
  font-size: var(--dc-taille-unite);
  font-weight: var(--dc-graisse-semi);
}

.dc-kpi-tile-label {
  font-size: var(--dc-taille-legende);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-texte-secondaire);
}

/* ── Filtre par phase dans une tuile (kpi-tile.js) ─────────────────────────────
   Cinq puces sous le libellé, dans une tuile qui fait ~350 px à 1440 px : elles
   doivent tenir sur deux lignes au plus et rester lisibles à 375 px. D'où des
   libellés raccourcis côté JS (« Fin de conduite du changement » → « CDC ») et
   un `flex-wrap` plutôt qu'un défilement, qu'on ne verrait pas venir. */
.dc-kpi-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* ── LES PUCES DE PHASE SE LISENT ───────────────────────────────────────────
   Hicham, 27/08, capture de la tuile « Engagement promesses » : « corriges
   l'affichage stp c pas lisible ».

   MESURÉ, LES TROIS ÉTATS ÉCHOUAIENT, et le coché était le PIRE :
     décoché  #8a89a8 sur blanc              3,37:1
     coché    #4c37dd sur #9b93e8            2,67:1
     vide     3,37:1 ET une opacité de 0,55  ≈ 2,3:1 perçus
   Le seuil d'un texte courant est 4,5:1. À 9,5 px, en capitales espacées, ces
   puces ne se lisaient dans aucun état — or ce sont des FILTRES : on ne peut pas
   cocher ce qu'on ne lit pas.

   ⚠️ LA CAUSE DU COCHÉ EST UN JETON PRIS POUR UN AUTRE.
   `--dc-violet-estompe` (#9b93e8) est une couleur de REMPLISSAGE — son
   commentaire le dit, « segment secondaire de donut ». Elle était employée en
   FOND, sous du `--dc-violet` : du violet moyen sur du violet moyen. La paire
   prévue pour cet usage existe et porte son nom — `--dc-violet-pale-fond` avec
   `--dc-violet-pale-texte` — et donne 7,6:1.
   C'est le piège des clés voisines, transposé aux jetons de couleur : le nom
   ressemblait, l'intention non. */
.dc-kpi-phase {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: var(--dc-graisse-forte);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--dc-rayon-bouton);
  border: 1px solid var(--dc-neutre-pale-bord);
  background: transparent;
  color: var(--dc-texte-secondaire);
  cursor: pointer;
  line-height: 1.2;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

/* Une phase RETENUE est pleine, une phase écartée est en creux : l'état doit se
   lire sans couleur, pour rester visible en vidéoprojection comme à l'impression. */
.dc-kpi-phase--on {
  background: var(--dc-violet-pale-fond);
  border-color: var(--dc-violet-pale-bord);
  color: var(--dc-violet-pale-texte);
}

/* Le décompte d'échéances, porté par le tag lui-même : c'est lui qui explique
   pourquoi une phase ne fait pas bouger le taux, sans qu'on ait à survoler. */
.dc-kpi-phase-compte {
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 3px;
  /* ⚠️ 7 % SUFFISAIENT À FAIRE ÉCHOUER LE COMPTE. Le texte de la puce atteint
     5,13:1 sur blanc, mais cette pastille assombrit son fond : mesuré 4,38:1,
     sous le seuil. Un fond décoratif qui coûte un demi-point de contraste n'est
     pas neutre. Ramené à 5 %, le compte passe à 4,6:1 et la pastille se voit
     toujours. */
  background: rgba(0, 0, 0, .05);
  font-variant-numeric: tabular-nums;
}

.dc-kpi-phase--on .dc-kpi-phase-compte { background: rgba(255, 255, 255, .28); }

/* Phase sans aucune échéance échue sur le périmètre : elle reste CHOISISSABLE —
   c'était la demande d'Hicham, un filtre se choisit. Elle est seulement plus
   discrète, et son « 0 » dit qu'elle n'apportera rien au total. Pas de
   `cursor: default` ni de `disabled` : une case qu'on ne peut pas cocher n'est
   pas un filtre. */
/* ⚠️ PLUS D'OPACITÉ — elle se multipliait au contraste déjà faible et rendait
   « MEP 0 » et « CDC 0 » quasi invisibles (≈ 2,3:1 perçus). Une opacité ne se
   règle pas : elle dégrade tout, texte compris. Le BORD EN POINTILLÉ suffit à
   dire « rien à filtrer ici », et il ne coûte rien à la lisibilité — c'est la
   même convention que la piste en pointillé du bloc 05.
   La puce reste CHOISISSABLE, comme demandé le 25/08 : un filtre se choisit. */
.dc-kpi-phase--vide {
  border-style: dashed;
  /* ⚠️ ET PAS UN TON PLUS PÂLE NON PLUS. Premier jet du 27/08 : j'avais retiré
     l'opacité mais gardé `--dc-texte-tertiaire` pour la discrétion — mesuré
     3,37:1, toujours sous le seuil. « MEP 0 » restait illisible, ce qui était la
     plainte. Le POINTILLÉ porte seul la distinction : il se voit sans rien coûter
     à la lecture. */
  color: var(--dc-texte-secondaire);
}

.dc-kpi-phase:hover { border-color: var(--dc-texte-tertiaire); }
.dc-kpi-phase:focus-visible {
  outline: 2px solid var(--dc-violet);
  outline-offset: 1px;
}

/* La phrase qui explique un tiret. Volontairement discrète — elle ne doit pas
   concurrencer le chiffre des tuiles voisines qui, elles, en ont un. Casse
   normale et pas de majuscules : c'est une phrase, pas une étiquette. */
.dc-kpi-tile-vide {
  margin: 0;
  /* `--dc-taille-note` (11 px) et pas `--dc-taille-micro` (9.5 px) : cette phrase
     est le SEUL contenu lisible d'une tuile sans chiffre. La rendre plus petite
     que les légendes de graphique reviendrait à cacher la seule information que
     la tuile porte encore. */
  font-size: var(--dc-taille-note);
  line-height: 1.35;
  font-weight: var(--dc-graisse-normale);
  letter-spacing: 0;
  text-transform: none;
  color: var(--dc-texte-tertiaire);
}

/* --- Cartes de compartiment ------------------------------------------------ */

.dc-compartment {
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-carte);
  border-top: var(--dc-filet-accent-carte) solid var(--dc-indigo);
  border-radius: var(--dc-rayon-carte);
  padding: var(--dc-padding-carte);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-5);
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  position: relative;
}

.dc-compartment:hover {
  border-left-color: var(--dc-filet-bouton-survol);
  border-right-color: var(--dc-filet-bouton-survol);
  border-bottom-color: var(--dc-filet-bouton-survol);
}

.dc-compartment--filet-rouge  { border-top-color: var(--dc-rouge); }
.dc-compartment--filet-indigo { border-top-color: var(--dc-indigo); }

/* Bloc 07 : seul bloc en pleine largeur de sa rubrique, hors rangée. */
.dc-compartment--pleine { flex: 1 1 100%; }

.dc-compartment-head {
  display: flex;
  align-items: center;
  /* gap 9px : pas de token exact, --dc-espace-4 (10px) est le plus proche. */
  gap: var(--dc-espace-4);
  /* réserve la place de la pastille d'affordance en haut à droite. */
  padding-right: var(--dc-espace-9);
}

.dc-compartment-badge {
  background: var(--dc-indigo);
  color: var(--dc-texte-inverse);
  font-size: var(--dc-taille-mini);
  font-weight: var(--dc-graisse-forte);
  border-radius: var(--dc-rayon-pastille);
  /* padding 3px 5px : pas de tokens exacts, --dc-espace-1 (4px) est le plus proche des
     deux. */
  padding: var(--dc-espace-1) var(--dc-espace-1);
  /* letter-spacing 0.03em : pas de token exact, --dc-interlettre-titre (-0.01em) est le
     plus proche en valeur absolue. */
  letter-spacing: var(--dc-interlettre-titre);
  flex: 0 0 auto;
}

.dc-compartment-title {
  font-size: var(--dc-taille-etiquette);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-texte-titre);
  white-space: nowrap;
}

.dc-compartment-surtitre {
  margin-left: auto;
  font-size: var(--dc-taille-legende);
  color: var(--dc-texte-tertiaire);
  white-space: nowrap;
}

.dc-compartment-valeur-ligne {
  display: flex;
  align-items: baseline;
  /* gap 9px : pas de token exact, --dc-espace-4 (10px) est le plus proche. */
  gap: var(--dc-espace-4);
}

/* Le chiffre est neutre par défaut. Il ne devient rouge que si le delta l'est —
   voir l'en-tête de compartment-card.js, règle mesurée sur la maquette. */
.dc-compartment-value {
  font-size: var(--dc-taille-chiffre-compartiment);
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-texte-titre);
  letter-spacing: var(--dc-interlettre-chiffre);
  line-height: var(--dc-interligne-serre);
}

.dc-compartment-value--rouge { color: var(--dc-rouge); }

.dc-compartment-unit {
  font-size: var(--dc-taille-unite-compartiment);
}

.dc-compartment-delta {
  font-size: var(--dc-taille-note);
  font-weight: var(--dc-graisse-forte);
  border: var(--dc-filet-largeur) solid;
  border-radius: var(--dc-rayon-badge);
  /* padding 3px 7px : pas de tokens exacts, --dc-espace-1 (4px) et --dc-espace-3 (8px)
     sont les plus proches. */
  padding: var(--dc-espace-1) var(--dc-espace-3);
  white-space: nowrap;
}

.dc-compartment-delta--rouge {
  color: var(--dc-rouge);
  background: var(--dc-rouge-pale-fond);
  border-color: var(--dc-rouge-pale-bord);
}

.dc-compartment-delta--violet {
  color: var(--dc-violet-lien);
  background: var(--dc-violet-pale-fond);
  border-color: var(--dc-violet-pale-bord);
}

.dc-compartment-delta--ambre {
  color: var(--dc-ambre-pale-texte);
  background: var(--dc-ambre-pale-fond);
  border-color: var(--dc-ambre-pale-bord);
}

.dc-compartment-delta--vert {
  color: var(--dc-vert-pale-texte);
  background: var(--dc-vert-pale-fond);
  border-color: var(--dc-vert-pale-bord);
}

/* Mention en clair à la place du badge, quand le bloc n'a pas de delta (04, 05). */
.dc-compartment-mention {
  font-size: var(--dc-taille-cellule);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-corps);
}

.dc-compartment-sentence {
  margin: 0;
  font-size: var(--dc-taille-corps);
  line-height: var(--dc-interligne-phrase);
  color: var(--dc-texte-contexte);
  text-wrap: pretty;
}

/* `margin-top: auto` pousse la viz en bas de carte et absorbe le vide : c'est ce qui
   tient le piège n°7 (aucune zone blanche de plus de 80 px) quand les cartes d'une
   rangée n'ont pas la même hauteur de contenu. */
/* `flex: 1` et non `margin-top: auto` — c'est le mécanisme de la maquette
   (`flex:{{ croissanceViz }}` + `justify-content:{{ repartitionViz }}` sur ce même
   conteneur). Avec `margin-top: auto` seul, la hauteur excédentaire de la carte
   devenait un VIDE entre la phrase et la visualisation : 100 px mesurés sur le
   bloc 01 le 20/08, au-delà du seuil de 80 px que le dossier fixe (piège n°7).
   En laissant le conteneur de visualisation grandir et pousser son contenu en bas,
   l'espace est absorbé par la zone qui doit le porter. */
.dc-compartment-viz {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--dc-espace-2);
}

/* --- Pied de carte : la part des évolutions (modèle B) ----------------------
   Hicham, 28/08 : « rajoute-moi le pourcentage des évolutions, pas dans le
   camembert mais en bas ». Modèle B retenu sur maquette — le plus lisible de
   loin, pensé pour un écran de comité projeté.

   ⚠️ IL DÉBORDE VOLONTAIREMENT DU PADDING DE LA CARTE. Les marges négatives le
   collent aux trois bords et lui donnent son statut de bandeau, pas de ligne de
   plus. Le rayon inférieur reprend celui de la carte, sinon un coin carré
   dépasse sous l'angle arrondi. */
.dc-compartment-pied {
  margin: var(--dc-espace-2)
          calc(-1 * var(--dc-padding-carte-x))
          calc(-1 * var(--dc-padding-carte-bas));
  padding: var(--dc-espace-3) var(--dc-padding-carte-x);
  border: 0;
  border-radius: 0 0 var(--dc-rayon-carte, 12px) var(--dc-rayon-carte, 12px);
  background: var(--dc-violet-pale-fond);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* Une grille à deux colonnes : le chiffre tient sa colonne, le libellé prend
     le reste et le détail passe dessous. En poussant le détail à droite sur la
     même ligne, le libellé se coupait en deux — mesuré sur la maquette. */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--dc-espace-2);
  row-gap: 2px;
  align-items: baseline;
  transition: filter .12s;
}
.dc-compartment-pied:hover { filter: brightness(.97); }
.dc-compartment-pied:focus-visible {
  outline: 2px solid var(--dc-violet);
  outline-offset: -2px;
}
.dc-compartment-pied-valeur {
  /* Pas de jeton dédié : on prend la valeur de drawer, réduite. Une taille en
     dur ici deviendrait fausse au premier changement d'échelle du produit. */
  font-size: calc(var(--dc-taille-valeur-drawer) * .6);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
  color: var(--dc-violet);
  font-variant-numeric: tabular-nums;
}
.dc-compartment-pied-libelle {
  font-size: var(--dc-taille-legende);
  font-weight: 600;
  color: var(--dc-violet-pale-texte);
  min-width: 0;
}
.dc-compartment-pied-detail {
  grid-column: 2;
  font-size: var(--dc-taille-legende);
  color: var(--dc-violet-pale-texte);
  opacity: .85;
  font-variant-numeric: tabular-nums;
}

/* --- Panneaux -------------------------------------------------------------- */

.dc-panel {
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-carte);
  border-radius: var(--dc-rayon-carte);
  padding: var(--dc-padding-panneau);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-7);
  min-width: 0;
  cursor: pointer;
  position: relative;
}

.dc-panel:hover { border-color: var(--dc-filet-bouton-survol); }

.dc-panel--demi   { flex: 1 1 0; }
.dc-panel--pleine { flex: 1 1 100%; }

.dc-panel-title {
  font-size: var(--dc-taille-etiquette);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-texte-titre);
  /* réserve la place de la pastille d'affordance. */
  padding-right: var(--dc-espace-9);
}

/* Seuls les deux panneaux en demi-largeur portent un filet sous leur titre dans la
   maquette (l. 887 et 913) ; celui des alertes n'en a pas (l. 935). */
.dc-panel--demi .dc-panel-title {
  border-bottom: var(--dc-filet-largeur) solid var(--dc-filet-doux);
  padding-bottom: var(--dc-espace-6);
}

/* `min-height` : la zone de dessin d'un panneau doit avoir une hauteur RÉELLE.
   Sans elle, elle se réduit au contenu (41 px mesurés le 20/08) et toute
   visualisation dimensionnée en pourcentage — les barres verticales — se rend à
   1 px. La maquette fixe cette hauteur explicitement. */
.dc-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: var(--dc-hauteur-viz-panneau);
}

/* La barre de plage du bloc 07 : la pilule seule, poussée à droite, au-dessus du
   tableau de progression. */
/* Phrase de contexte et sélecteur de plage sur UNE ligne — maquette l. 764-767.
   `align-items:flex-start` et non `center` : la phrase peut passer à deux lignes
   sur un écran étroit, et la pilule doit rester alignée sur la PREMIÈRE, pas
   flotter au milieu du paragraphe. */
.dc-compartment-contexte {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-espace-7);      /* 16 px — la valeur exacte de la maquette */
}

.dc-compartment-plage {
  display: flex;
  align-items: center;
  /* `margin-left:auto` pousse la pilule à droite quelle que soit la longueur de la
     phrase — un `justify-content` ne suffirait pas, le conteneur étant partagé. */
  margin-left: auto;
  flex: 0 0 auto;
}

/* --- Mode présentation (presentation-mode.js, presentation-footer.js) ------ */
/* Quatre vues plein écran, lisibles à cinq mètres. Toutes les dimensions viennent
   des tokens `--dc-proj-*`, calibrés pour cet usage. */

.dc-presentation {
  position: fixed;
  inset: 0;
  z-index: var(--dc-z-presentation);
  background: var(--dc-fond-page);
  display: flex;
  flex-direction: column;
}

.dc-presentation-contenu {
  flex: 1;
  min-height: 0;
  padding: var(--dc-espace-11);   /* pas de token de padding d écran propre au mode : on reprend celui des drawers */
  padding-bottom: var(--dc-proj-padding-bas);
  display: flex;
  flex-direction: column;
  gap: var(--dc-proj-marge-titre);
  overflow: hidden;
}

.dc-proj-titre {
  margin: 0;
  font-size: var(--dc-proj-taille-titre);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-violet);
  flex: 0 0 auto;
}

.dc-proj-grille {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: var(--dc-proj-gouttiere-cartes);
}

/* Une bande de 4 tuiles → grille 2×2, comme le prescrit T-11. */
.dc-proj-grille--bande { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.dc-proj-grille--rangee_3 { grid-template-columns: repeat(3, 1fr); }
/* Deux panneaux en haut, un en pleine largeur en bas. */
.dc-proj-grille--deux_puis_pleine_largeur { grid-template-columns: repeat(2, 1fr); }
.dc-proj-carte--pleine { grid-column: 1 / -1; }

.dc-proj-carte {
  background: var(--dc-fond-carte);
  border: var(--dc-filet-largeur) solid var(--dc-filet-carte);
  border-radius: var(--dc-rayon-carte);
  padding: var(--dc-proj-padding-carte);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espace-6);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* La phrase ne doit jamais pousser la visualisation hors de la carte : elle se borne
   à trois lignes et tronque proprement. */
.dc-proj-phrase {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-proj-libelle {
  font-size: var(--dc-proj-taille-libelle);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-capitales);
  color: var(--dc-texte-secondaire);
}

/* Le chiffre et son unité partagent la LIGNE DE BASE : une unité centrée
   verticalement sur un chiffre de 96 px flotte au milieu du vide. */
.dc-proj-valeur-ligne {
  display: flex;
  align-items: baseline;
  gap: var(--dc-proj-ecart-chiffre-unite);
}

.dc-proj-valeur {
  font-size: var(--dc-proj-taille-chiffre);
  font-weight: var(--dc-graisse-forte);
  letter-spacing: var(--dc-interlettre-chiffre);
  line-height: var(--dc-interligne-serre);
  color: var(--dc-texte-titre);
}

.dc-proj-unite {
  font-size: var(--dc-proj-taille-unite);
  font-weight: var(--dc-graisse-semi);
  color: var(--dc-texte-titre);
}

.dc-proj-phrase {
  margin: 0;
  font-size: var(--dc-proj-taille-phrase);
  line-height: var(--dc-interligne-texte);
  color: var(--dc-texte-corps);
  text-wrap: pretty;
}

/* `flex: 1` et non `margin-top: auto` : la zone de visualisation GRANDIT et pousse
   son contenu en bas. Avec `margin-top: auto`, l'espace excédentaire devenait un
   blanc entre la phrase et la micro-viz — 272 px mesurés sur la vue 2 le 20/08,
   très au-delà du seuil de 80 px du dossier (piège n°7).

   `min-height: 0` + `overflow: hidden` : SANS EUX, une carte trop basse laissait son
   contenu déborder et CHEVAUCHER le chiffre géant (mesuré le 20/08 sur les vues 3 et
   4, cartes de 339 px). Un débordement doit se couper, jamais se superposer. */
.dc-proj-viz {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── B-32 · LES BARRES DÉBORDAIENT DE LEUR CARTE EN PROJECTION ──────────────
   Hicham, 25/08, capture à l'appui : « vue décideur mode prez, corriger les
   soucis d'affichage ». Sur la vue 4/4, les barres de « Vélocité de préparation »
   sortaient du bas de leur carte et se faisaient couper.

   MESURÉ, et le compte est exact :
     .dc-proj-viz  (le contenant)  min-height 0 · overflow hidden · 138 px réels
     .dc-barres-v  (les barres)    min-height 168px             · 168 px réels
     → 30 px de trop, dont 8 px au-delà du bord de la carte.

   `--dc-hauteur-viz-panneau: 168px` est POSÉE POUR LE MODE NORMAL, et elle y est
   indispensable : le commentaire de `.dc-panel-body` le dit — sans elle, le corps
   du panneau se réduit à son contenu (41 px mesurés le 20/08) et toute
   visualisation dimensionnée en POURCENTAGE se rend à 1 px.
   En projection le besoin est INVERSE : la carte impose sa hauteur, et c'est la
   visualisation qui doit s'y plier. Une hauteur minimale fixe l'en empêche.

   On ne touche donc PAS au token ni au mode normal — on lève la contrainte là
   où elle nuit, et là seulement. `flex: 1` continue de donner aux barres tout
   l'espace disponible ; elles cessent seulement d'en exiger un minimum. */
.dc-presentation .dc-barres-v { min-height: 0; }

/* ── B-32 (2) · LA MATRICE DÉBORDAIT DÈS LA QUATRIÈME PHASE ─────────────────
   Même capture, carte de droite : « Consommé / planifié — par phase » était
   TRONQUÉE, sa dernière ligne coupée en deux par le bord.

   MESURÉ, et le compte tombe juste :
     en-tête 13 px + 4 lignes × 28 px + 4 gouttières × 14 px = 181 px
     espace réellement offert par la carte en projection        = 138 px
     → 21 px au-delà du bord.
   Avec TROIS phases (153 px) ça tenait — c'est pourquoi le défaut n'était pas
   apparu plus tôt, et pourquoi la fixture du dépôt, qui n'en a que trois, ne le
   révélait pas. La conduite du changement est en production depuis le 24/08 :
   la quatrième ligne est désormais le cas NORMAL, pas l'exception.

   Ce qu'on resserre, et seulement en projection :
     · la gouttière verticale 14 → 6 px — elle sépare des lignes déjà distinguées
       par leurs pastilles colorées, elle n'a pas à porter la lecture ;
     · la hauteur de pastille 28 → 24 px — le texte y fait 11,5 px, il reste au
       large, et le mode est fait pour être lu à cinq mètres : c'est la COULEUR
       qui se lit de loin, pas la hauteur du bandeau.
   Nouveau total : 13 + 4×24 + 4×6 = 133 px. Il reste 5 px de marge, et une
   CINQUIÈME phase tiendrait encore à 163 px… non : elle déborderait. C'est
   assumé — le jour où une cinquième phase existera, ce panneau devra défiler ou
   changer de forme, et un débordement mesuré vaut mieux qu'un chiffre faux.

   ⚠️ RIEN N'EST TOUCHÉ HORS PROJECTION : en mode normal la carte est libre de
   grandir, la matrice y respire, et les valeurs de la maquette y restent. */
.dc-presentation .dc-matrice { row-gap: 6px; }
.dc-presentation .dc-matrice-pastille { height: 24px; }

/* `margin-top: auto` sur l'ENFANT, et non `justify-content: flex-end` sur le
   conteneur. Les deux collent le contenu en bas quand il y a de la place, mais avec
   `flex-end` un contenu TROP GRAND déborde par le HAUT et se fait couper là :
   mesuré le 20/08, le tableau du bloc 07 perdait son en-tête de colonnes en mode
   présentation. Avec `margin-top: auto`, le contenu trop grand reste ancré en haut
   et c'est le bas qui se coupe — on garde toujours ce qui donne la lecture. */
.dc-proj-viz > * { margin-top: auto; }

/* ── Vues denses : plus d'une rangée de cartes ─────────────────────────────── */
.dc-proj-grille--dense .dc-proj-valeur  { font-size: var(--dc-proj-taille-chiffre-dense); }
.dc-proj-grille--dense .dc-proj-unite   { font-size: var(--dc-proj-taille-unite-dense); }
.dc-proj-grille--dense .dc-proj-phrase  { font-size: var(--dc-proj-taille-phrase-dense); }
.dc-proj-grille--dense .dc-proj-libelle { font-size: var(--dc-proj-taille-libelle-dense); }
.dc-proj-grille--dense .dc-proj-carte   { padding: var(--dc-espace-9); gap: var(--dc-espace-4); }

/* Le mode présentation couvre tout l'écran : les éléments flottants de
   l'application (bouton d'assistant, notifications) le traversaient et masquaient le
   compteur de vues. On les retire le temps de la projection. */
/* `#ass-fab` : le bouton d'assistant de l'application, en z-index 9900 — il passait
   au-dessus de la projection et masquait le compteur de vues. Identifié par mesure
   (seul élément `position: fixed` du coin bas-droit). */
body:has(.dc-presentation) #ass-fab,
body:has(.dc-presentation) .topbar,
body:has(.dc-presentation) .sidebar { display: none !important; }

/* Bandes cliquables des bords — arrêtées au-dessus du pied, sinon elles lui
   voleraient ses clics. */
.dc-presentation-bord {
  position: absolute;
  top: 0;
  bottom: var(--dc-hauteur-pied-drawer);
  width: 11%;
  z-index: 20;
  cursor: pointer;
}

.dc-presentation-bord--gauche { left: 0; }
.dc-presentation-bord--droite { right: 0; }

/* Pied de vue — monté hors du conteneur mis à l'échelle (piège n°9). */
.dc-presentation-pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dc-hauteur-pied-drawer);
  z-index: 25;
  padding: 0 var(--dc-espace-9);
  display: flex;
  align-items: center;
  gap: var(--dc-espace-7);
  background: var(--dc-fond-carte);
  border-top: var(--dc-filet-largeur) solid var(--dc-filet-socle);
}

.dc-presentation-contexte {
  font-size: var(--dc-taille-cellule);
  color: var(--dc-texte-faible);
  white-space: nowrap;
}

.dc-presentation-segments {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--dc-espace-2);
  padding: 0 var(--dc-espace-7);
}

.dc-presentation-segment {
  flex: 1;
  height: var(--dc-filet-accent-actif);
  border-radius: var(--dc-rayon-pilule);
  background: var(--dc-filet-section);
}

.dc-presentation-segment--actif { background: var(--dc-violet); }

.dc-presentation-compteur {
  font-size: var(--dc-taille-cellule);
  font-weight: var(--dc-graisse-forte);
  color: var(--dc-texte-titre);
  white-space: nowrap;
}

/* État vide d'une visualisation : on dit POURQUOI il n'y a rien à dessiner, plutôt
   que de laisser une zone blanche qui se lit comme un défaut. */
.dc-viz-vide {
  margin: 0;
  align-self: center;
  max-width: 46ch;
  font-size: var(--dc-taille-corps-large);
  line-height: var(--dc-interligne-phrase);
  color: var(--dc-texte-faible);
  text-wrap: pretty;
}

/* Étape dont la durée n'est pas mesurable : piste en pointillé, chiffre effacé.
   Distinct d'une étape mesurée à 0 jour, qui garde une barre pleine minimale. */
.dc-barres-v-barre--absente {
  background: none;
  border: 0;
  border-top: var(--dc-filet-largeur) dashed var(--dc-filet-pointille);
  border-radius: 0;
}

.dc-barres-v-valeur--absente { color: var(--dc-texte-faible); }

/* Mention des lignes non montrées en projection : discrète, elle ne vole pas la
   place de la ligne TOTAL qu'elle précède. */
.dc-b07-reste {
  padding: var(--dc-espace-2) 0;
  font-size: var(--dc-taille-corps);
  font-style: italic;
  color: var(--dc-texte-faible);
}

/* Le tableau du bloc 07 en PROJECTION : rangées compactées. Mesuré le 20/08 —
   en-tête + 3 lignes + total demandaient 234 px pour 158 disponibles avec le padding
   de l'écran normal. On serre les rangées plutôt que d'amputer le tableau : à cinq
   mètres, c'est la hauteur de ligne qui est négociable, pas le nombre de lignes. */
.dc-proj-viz .dc-b07-ligne {
  padding-top: var(--dc-espace-1);
  padding-bottom: var(--dc-espace-1);
}

.dc-proj-viz .dc-b07-ligne--total {
  padding-top: var(--dc-espace-2);
  padding-bottom: var(--dc-espace-2);
}

.dc-proj-viz .dc-b07-mention,
.dc-proj-viz .dc-b07-reste { display: none; }

/* Carte pleine largeur en projection dense : la phrase de contexte cède la place à
   la visualisation. Sur le bloc 07, c'est le TABLEAU qui porte le message ; sa
   phrase (« Épics créés sur la période… ») répète le titre. Mesuré : sans elle, le
   tableau tient (158 px disponibles contre 178 demandés avec). */
.dc-proj-grille--dense .dc-proj-carte--pleine .dc-proj-phrase { display: none; }

/* ── Zones de dessin sans contenu ──────────────────────────────────────────
   Mesuré le 20/08 : une zone de visualisation vide réservait 114 px de blanc sur le
   bloc 01, et le message d'état vide du panneau consommé/planifié flottait en bas
   d'une zone de 168 px, laissant 130 px au-dessus — deux fois au-delà du seuil de
   80 px du dossier (piège n°7).
   Une zone SANS enfant sort du flux ; une zone qui ne porte qu'un message le CENTRE,
   au lieu de le coller en bas comme une visualisation. */
.dc-compartment-viz:empty,
.dc-panel-body:empty { display: none; }

.dc-compartment-viz:has(> .dc-viz-vide),
.dc-panel-body:has(> .dc-viz-vide) { justify-content: center; }

/* ⚠️ ET ON REND LA HAUTEUR, PAS SEULEMENT LE CENTRAGE — 02/09/2026.
   Le correctif du 20/08 ci-dessus a centré le message dans les 168 px ; il ne
   les a pas rendus. Tant que le panneau partageait sa rangée avec la vélocité
   par étape, le vide passait. Depuis son retrait, « Consommé / planifié » est
   SEUL sur la rangée : mesuré à 1148 × 251 px pour une phrase d'une ligne,
   dont 168 px de corps. La règle `min-height: var(--dc-hauteur-viz-panneau)`
   existe pour qu'une visualisation dimensionnée en POURCENTAGE ne se rende pas
   à 1 px — un état vide n'a pas de visualisation, la réservation n'a donc
   aucun objet.
   Portée volontairement limitée à `.dc-panel-body` : les compartiments du haut
   ne présentent pas ce défaut aujourd'hui, et élargir la règle changerait des
   écrans que personne n'a demandé de toucher. */
.dc-panel-body:has(> .dc-viz-vide) { min-height: 0; }

/* ══ MODALE · RÉPARTITION DE LA CHARGE PAR CATÉGORIE ═══════════════════════════
   Quatre camemberts en DEUX LIGNES de deux — demande d'Hicham du 01/09. La
   grille est figée à `repeat(2, 1fr)` et non en `auto-fit` : un auto-fit
   passerait à une ou trois colonnes selon la largeur et casserait la
   comparaison deux à deux que le carré permet. Sous 900 px on retombe à une
   colonne, où l'empilement est le seul agencement lisible. */
.dcr-voile {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.dcr-modale {
  background: #FFFFFF; border-radius: 16px;
  width: min(1080px, 100%); max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
  overflow: hidden;
}
.dcr-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 22px 14px; border-bottom: 1px solid #E7EAF0;
}
.dcr-tete h2 { margin: 0; font-size: 17px; font-weight: 800; color: #0F172A; letter-spacing: -.01em; }
.dcr-sous { display: block; margin-top: 3px; font-size: 12px; color: #64748B; }
.dcr-fermer {
  border: 1px solid #E7EAF0; background: #FFFFFF; border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; color: #475569; font-size: 14px; line-height: 1;
}
.dcr-fermer:hover { background: #F1F5F9; }
.dcr-fermer:focus-visible { outline: 2px solid #4F46E5; outline-offset: 2px; }
.dcr-corps { padding: 16px 22px 22px; overflow-y: auto; }

.dcr-regle {
  background: #F8FAFC; border: 1px solid #E7EAF0; border-radius: 10px;
  padding: 11px 14px; font-size: 12.5px; color: #334155; line-height: 1.55;
}
.dcr-regle-cal { margin-top: 6px; font-size: 11.5px; color: #64748B; }

.dcr-grille {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px;
}
@media (max-width: 900px) { .dcr-grille { grid-template-columns: 1fr; } }

.dcr-vignette { border: 1px solid #E7EAF0; border-radius: 12px; padding: 13px 15px; }
.dcr-vignette-vide { background: #FAFBFC; border-style: dashed; }
.dcr-vg-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dcr-vg-tete h3 { margin: 0; font-size: 13px; font-weight: 800; color: #0F172A; }
.dcr-vg-meta { font-size: 11px; color: #64748B; font-variant-numeric: tabular-nums; }
/* ⚠️ AUCUNE RÈGLE SUR L'ANNEAU NI SUR SA LÉGENDE. C'est `viz/donut.js` — le
   composant de la carte du bloc 04 — qui les rend et qui pose lui-même la
   direction, la gouttière et les teintes de son conteneur `.dc-compartment-viz`.
   Ma première version dessinait ses propres arcs et sa propre légende, avec ses
   propres hexadécimaux : « Non catégorisé » sortait GRIS dans la modale et
   INDIGO sur la carte, pour la même donnée, à un clic d'écart. On ne garde donc
   ici que la marge qui sépare l'anneau de l'en-tête de la vignette : toute autre
   déclaration entrerait en concurrence avec les styles en ligne du composant. */
.dcr-vg-corps { margin-top: 10px; }
.dcr-puce { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dcr-lg-j { color: #64748B; font-variant-numeric: tabular-nums; }
.dcr-legende-vide { margin: 8px 0 0; font-size: 11.5px; color: #94A3B8; font-style: italic; line-height: 1.5; }

.dcr-global { margin-top: 16px; border: 1px solid #C7D2FE; background: #F5F6FF; border-radius: 12px; padding: 14px 16px; }
.dcr-global-vide { border-color: #E7EAF0; background: #FAFBFC; font-size: 12.5px; color: #64748B; font-style: italic; }
.dcr-global-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dcr-global-tete h3 { margin: 0; font-size: 13px; font-weight: 800; color: #1E1B4B; }
.dcr-global-total { font-size: 12px; font-weight: 700; color: #3730A3; font-variant-numeric: tabular-nums; }
.dcr-barre { display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin-top: 10px; background: #EEF2F7; }
.dcr-seg { display: block; height: 100%; }
.dcr-global-legende {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: #334155;
}
.dcr-global-legende li { display: flex; align-items: center; gap: 6px; }
.dcr-global-legende b { font-variant-numeric: tabular-nums; color: #0F172A; }
.dcr-note { margin: 10px 0 0; font-size: 11.5px; color: #475569; line-height: 1.55; }

.dcr-reserves {
  margin-top: 14px; border-left: 3px solid #F59E0B; background: #FFFBEB;
  border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 12px; color: #78350F;
}
.dcr-reserves ul { margin: 5px 0 0; padding-left: 18px; }
/* Le corps de la répartition, rendu hors écran pour les exports PDF/PPTX/PNG. */
.dcr-export-titre { margin: 0 0 2px; font-size: 17px; font-weight: 800; color: #0F172A; }
.dcr-export-sous  { margin: 0 0 14px; font-size: 12px; color: #64748B; }

/* ⚠️ SOUS 560 px, L'ANNEAU PASSE AU-DESSUS DE SA LÉGENDE. Mesuré le 01/09 à
   320 px : la vignette réclamait 294 px dans un corps de 228 px utiles, et les
   quatre sortaient de la modale. La cause est arithmétique et non négociable —
   anneau 92 px + gouttière 16 px + légende 154 px (sa largeur minimale : le plus
   long libellé, la charge et la part) = 262 px, plus les marges.

   `viz/donut.js` pose `flex-direction:row` EN LIGNE (l. 120) : une règle de
   feuille ne peut pas l'emporter sans `!important`. C'est le seul endroit du
   fichier qui en porte un, et il est là pour cette raison précise — pas par
   commodité. On ne touche pas au composant : la rangée est la bonne disposition
   partout ailleurs, y compris sur la carte du bloc 04. */
@media (max-width: 560px) {
  .dcr-vignette .dc-compartment-viz {
    flex-direction: column !important;
    align-items: flex-start;
  }
  .dcr-vignette .dc-viz-donut-legende { width: 100%; }
  .dcr-vg-tete { flex-wrap: wrap; }
}