/* ============================================================
   Refonte v2 — Tableau de bord (lot 3)

   POURQUOI CETTE FEUILLE NE RÉÉCRIT PAS LE BALISAGE

   Le tableau de bord fait 845 lignes plus six sous-rendus, et son
   vocabulaire EST déjà celui des motifs, sous d'autres noms :
     .d3-card   = le panneau de verre        .d3-badge = la pastille
     .d3-item   = la ligne de tableau        .d3-bar   = la barre
     .d3-empty  = l'état vide                .d3-kpi   = la carte KPI
   Réécrire 800 lignes de gabarit pour renommer des classes aurait
   mis en jeu chaque calcul et chaque écouteur de l'écran sans rien
   changer à ce qu'on voit. On rhabille le vocabulaire ; le balisage,
   les calculs et les événements ne bougent pas.

   CE QUI REND CETTE APPROCHE SÛRE AUJOURD'HUI, ET PAS HIER

   `.dashboard-v3` porte `data-v2`. Avant le préfixe --v2-, cela aurait
   fait basculer treize aplats ambre en olive, parce que `--accent`
   voulait dire deux choses opposées selon le système. Depuis le
   préfixe, la portée v2 n'ombre plus aucun nom de l'ancien système :
   ce que cette feuille ne restyle pas garde exactement son apparence
   d'avant, sur ses anciens jetons. La conversion peut donc être
   partielle sans être bancale.

   POURQUOI `[data-v2].dashboard-v3` ET PAS `.dashboard-v3`

   L'attribut est là pour la SPÉCIFICITÉ, pas pour la portée : il n'élargit
   ni ne restreint rien, l'élément porte déjà les deux. Sans lui, les tons
   passent par des slots (`--m-fg`), si bien que la déclaration `color`
   vit sur le sélecteur de base — `.dashboard-v3 .d3-badge`, (0,3,0) —
   alors que styles.css:11833 pose `color` directement sur
   `[data-theme="dark"] .d3-badge.red`, également (0,3,0) mais avec la
   couleur en dur. En thème clair mes règles gagnaient à l'ancienneté ;
   en sombre elles perdaient, et la pastille « en retard » restait
   #ff9a8f. L'attribut ajoute un cran et clôt la question.
   Ne pas « simplifier » en retirant `[data-v2]`.

   Cette feuille est chargée APRÈS styles.css (voir index.html) : à
   spécificité égale, la couche neuve doit avoir le dernier mot.
   ============================================================ */

[data-v2].dashboard-v3 {
  font-family: var(--font);
  color: var(--v2-text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  /* DEUX PALIERS D'ÉCART, PAS UN SEUL.
     La maquette met 24 px entre ses zones — les puces, l'argent, la journée,
     le travail — et 12 px entre les cartes d'une même zone. Avec 12 px
     partout, les onze cartes se suivaient au même intervalle et l'écran se
     lisait comme une seule longue liste : rien ne disait où finissait
     l'argent, où commençait la journée. */
  gap: 24px;
  /* Valeurs de la maquette : 86 px en bas pour que la dernière carte ne
     colle pas au bord, et un plancher de 1180 px — en dessous, la rangée
     à deux colonnes n'a plus la place et la mise en page se disloque. */
  padding-bottom: 86px;
  min-width: 1180px;
}

/* ══════════════════════════════════════════════════════════════
   LE BANDEAU DE SYNCHRO GOOGLE
   Trois états, trois sens, donc trois paires de statut : un
   instantané périmé n'est qu'une information, une autorisation à
   donner appelle une décision, une synchro interrompue est une
   panne. C'est le seul endroit du tableau de bord où le CRM parle
   de lui-même — il ne doit pas crier plus fort que les données.
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .gs-bandeau {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--m-bg, var(--inset));
  border: 1px solid transparent;
  font-family: var(--font);
}
[data-v2].dashboard-v3 .gs-bandeau > svg {
  width: 15px; height: 15px; flex: 0 0 15px;
  margin-top: 1px;
  color: var(--m-fg, var(--v2-text-2));
}
[data-v2].dashboard-v3 .gs-txt { flex: 1; min-width: 0; }
[data-v2].dashboard-v3 .gs-txt strong {
  display: block;
  font-size: 12.5px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--m-fg, var(--v2-text));
}
[data-v2].dashboard-v3 .gs-txt span {
  display: block;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--v2-text-3);
  margin-top: 2px;
}
[data-v2].dashboard-v3 .gs-txt code {
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--inset);
}
[data-v2].dashboard-v3 .gs-btn {
  all: unset;
  cursor: pointer;
  flex-shrink: 0;
  height: 28px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  background: var(--accent-bright);
  color: var(--sur-accent, #1b1a12);
  font-size: 12.5px;
  font-weight: 640;
  box-shadow: var(--shadow-sm);
  transition: filter .14s ease;
}
[data-v2].dashboard-v3 .gs-btn:hover { filter: brightness(1.06); text-decoration: none; }
[data-v2].dashboard-v3 .gs-info   { --m-fg: var(--info-fg);   --m-bg: var(--info-soft); }
[data-v2].dashboard-v3 .gs-action { --m-fg: var(--v2-accent); --m-bg: var(--accent-soft); }
[data-v2].dashboard-v3 .gs-erreur { --m-fg: var(--neg-fg);    --m-bg: var(--neg-soft); }

/* ══════════════════════════════════════════════════════════════
   L'EN-TÊTE DE CONTENU
   Le titre de la page vit dans l'en-tête de la coque (lot 1). Ce
   bloc-ci porte la salutation, la date et le résumé du jour.
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-top { flex-direction: column; gap: 12px; }
/* Le bloc d'accueil n'existe plus : la salutation et la date sont écrites
   dans l'en-tête de la coque par renderDashboard(), comme dans la maquette.
   Ne restent ici que la phrase de résumé et l'ordre des rangées du haut. */
[data-v2].dashboard-v3 .d3-hero-summary {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--v2-text-2);
  margin: 0;
}
[data-v2].dashboard-v3 .d3-hero-summary strong { font-weight: 680; color: var(--v2-text); }

/* Le bouton PDF, rapatrié dans l'en-tête à côté de la bascule de thème. */
body.v2-coque main .header #dash-export-pdf {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--v2-text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 550;
  backdrop-filter: blur(20px);
  transition: background .14s ease, color .14s ease;
}
body.v2-coque main .header #dash-export-pdf:hover { background: var(--inset); color: var(--v2-text); }
body.v2-coque main .header #dash-export-pdf svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════
   LE BANDEAU DE PUCES — motif « segments de filtre »
   Six compteurs cliquables qui font défiler vers leur section.
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-pills {
  display: grid;
  /* Six colonnes fixes, pas `auto-fit` : les puces forment UNE ligne, quelle
     que soit la largeur des libellés. En auto-fit elles se réorganisaient et
     la rangée changeait de hauteur d'un écran à l'autre. */
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 0;
}
[data-v2].dashboard-v3 .d3-pill {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;

  /* Hauteur fixe de 34 px : c'est une pilule, pas une carte. Sans elle, la
     hauteur dépendait du contenu et la rangée « respirait » au rechargement. */
  height: 34px;
  box-sizing: border-box;
  padding: 0 15px 0 13px;
  border-radius: 99px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-text-2);
  transition: background .14s ease, border-color .14s ease;
}
[data-v2].dashboard-v3 .d3-pill:hover { background: var(--inset); border-color: var(--stroke-2); }
[data-v2].dashboard-v3 .d3-pill:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
[data-v2].dashboard-v3 .d3-pill strong {
  font-family: var(--font-display);


  letter-spacing: -.02em;
  color: var(--m-fg, var(--v2-text));
  font-variant-numeric: tabular-nums;
}
/* La puce prend la couleur de son sujet ; l'icône aussi, en plus discret.
   Un compteur à zéro repasse en neutre : sinon « 0 en retard » s'affiche
   en rouge et le rouge cesse de vouloir dire quelque chose. */
[data-v2].dashboard-v3 .d3-pill svg { width: 13px; height: 13px; color: var(--m-fg, var(--v2-text-3)); opacity: .8; }
[data-v2].dashboard-v3 .d3-pill.red    { --m-fg: var(--neg-fg); }
/* EXCEPTION ASSUMÉE : « aujourd'hui » reprend l'ambre, demandé nommément par
   l'inventaire du 10/08/2026. Cela déroge à la règle « l'ambre est réservé à
   l'action » posée le 07/08 — ici aucun bouton ne lui dispute la bande, et la
   puce du jour est le seul repère temporel de l'écran. À rearbitrer si la
   règle doit primer. */
[data-v2].dashboard-v3 .d3-pill.orange { --m-fg: var(--v2-accent); }
[data-v2].dashboard-v3 .d3-pill.blue   { --m-fg: var(--info-fg); }
[data-v2].dashboard-v3 .d3-pill.purple { --m-fg: var(--alt-fg); }
[data-v2].dashboard-v3 .d3-pill.green  { --m-fg: var(--pos-fg); }
[data-v2].dashboard-v3 .d3-pill.yellow { --m-fg: var(--info-fg); }
/* Posé par le gabarit quand le compteur vaut zéro. Doit venir après les
   six tons pour les emporter. */
[data-v2].dashboard-v3 .d3-pill[data-zero] { --m-fg: var(--v2-text-3); }
[data-v2].dashboard-v3 .d3-pill[data-zero] strong { font-weight: 550; }

/* ÉTAT ACTIF — une puce dont le compteur n'est pas nul se TEINTE.
   Colorer le seul chiffre ne suffisait pas : à distance de lecture, six
   pilules identiques se valent et on doit les parcourir une à une. La
   maquette pose un fond pâle et une bordure assortie ; la puce qui compte
   quelque chose sort du rang sans qu'on ait à lire.
   `--m-teinte` et `--m-bord` sont des APLATS, séparés de `--m-fg` qui est
   l'encre — c'est la même discipline que `--m-fill` ailleurs. */
[data-v2].dashboard-v3 .d3-pill:not([data-zero]) {
  background: var(--m-teinte, var(--panel));
  border-color: var(--m-bord, var(--stroke));
}
[data-v2].dashboard-v3 .d3-pill:not([data-zero]):hover {
  border-color: var(--m-bord, var(--stroke-2));
  filter: brightness(.985);
}
[data-v2].dashboard-v3 .d3-pill.red:not([data-zero])    { --m-teinte: var(--neg-soft);  --m-bord: rgba(167,65,55,.26); }
[data-v2].dashboard-v3 .d3-pill.orange:not([data-zero]) { --m-teinte: var(--accent-soft); --m-bord: rgba(125,100,13,.28); }
[data-v2].dashboard-v3 .d3-pill.blue:not([data-zero])   { --m-teinte: var(--info-soft); --m-bord: rgba(49,96,180,.26); }
[data-v2].dashboard-v3 .d3-pill.green:not([data-zero])  { --m-teinte: var(--pos);       --m-bord: rgba(19,109,69,.26); }
[data-app-theme="dark"] [data-v2].dashboard-v3 .d3-pill:not([data-zero]) { filter: none; }
[data-app-theme="dark"] [data-v2].dashboard-v3 .d3-pill.red:not([data-zero])    { --m-bord: rgba(255,138,124,.30); }
[data-app-theme="dark"] [data-v2].dashboard-v3 .d3-pill.orange:not([data-zero]) { --m-bord: rgba(245,213,71,.30); }
[data-app-theme="dark"] [data-v2].dashboard-v3 .d3-pill.blue:not([data-zero])   { --m-bord: rgba(138,180,255,.30); }
[data-app-theme="dark"] [data-v2].dashboard-v3 .d3-pill.green:not([data-zero])  { --m-bord: rgba(94,214,158,.30); }

/* ══════════════════════════════════════════════════════════════
   LES CARTES KPI — motif 5
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-kpis {
  display: grid;
  /* Quatre colonnes fixes : les cartes gardent la même largeur quel que soit
     le nombre affiché. `auto-fit` les faisait passer à trois puis à deux, et
     la bande d'argent changeait de forme selon le rôle de l'utilisateur. */
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
[data-v2].dashboard-v3 .d3-kpi {
  padding: 17px 19px 18px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--stroke);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* Le total prévu est la seule carte mise en avant : c'est le chiffre
   qu'on vient chercher. Une teinte, pas une bordure de plus. */
[data-v2].dashboard-v3 .d3-kpi-total {

  border-color: color-mix(in srgb, var(--accent-bright) 34%, transparent);
}
[data-v2].dashboard-v3 .d3-kpi-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;

  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].dashboard-v3 .d3-kpi-head svg { width: 14px; height: 14px; flex: 0 0 14px; }
[data-v2].dashboard-v3 .d3-kpi-head span { flex: 1; min-width: 0; }
[data-v2].dashboard-v3 .d3-kpi-edit { width: 10px; height: 10px; }
/* LE SÉPARATEUR DE MILLIERS DOIT SURVIVRE AU CRÉNAGE.
   Les chiffres d'affichage portent `letter-spacing: -.04em`, qui resserre
   TOUS les caractères — y compris l'espace insécable qui sépare les
   milliers. À 25 px, « 108 075 » se lisait « 108075 ». Le caractère n'y
   est pour rien : U+202F, U+00A0 et U+2009 rendent la même chose une fois
   crénés. `word-spacing` ne touche que les espaces, donc uniquement ce
   séparateur, et lui rend sa lisibilité sans desserrer les chiffres. */
[data-v2].dashboard-v3 .d3-kpi-val {
  word-spacing: .12em;
  font-family: var(--font-display);
  /* 32 px et graisse 680, les valeurs de la maquette. J'étais à 25/650, soit
     22 % trop petit : le chiffre d'affaires n'était plus la première chose
     que l'œil trouvait, et le rapport au sur-titre tombait de 2,9 à 2,3. */
  font-size: 32px;
  font-weight: 680;
  letter-spacing: -.04em;
  line-height: 1.15;
  color: var(--v2-text);
  font-variant-numeric: tabular-nums;
  margin-top: 12px;
}
[data-v2].dashboard-v3 .d3-kpi-unit,
[data-v2].dashboard-v3 .d3-kpi-val span {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--v2-text-3);
  margin-left: 4px;
}
[data-v2].dashboard-v3 .d3-kpi-ttc {

  font-weight: 550;
  color: var(--v2-text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
[data-v2].dashboard-v3 .d3-kpi-meta {

  font-weight: 550;
  color: var(--v2-text-3);
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--stroke-2);
}
/* Un chiffre saisi à la main doit se voir : sinon on croit lire un calcul. */
[data-v2].dashboard-v3 .editable-ca { cursor: pointer; border-radius: var(--r-xs); }
[data-v2].dashboard-v3 .editable-ca:hover { background: var(--inset); }
[data-v2].dashboard-v3 .editable-ca.is-manual { color: var(--v2-text); font-style: italic; }
[data-v2].dashboard-v3 .ca-reset-btn {
  all: unset;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 99px;
  color: var(--v2-text-3);
  vertical-align: -4px;
}
[data-v2].dashboard-v3 .ca-reset-btn:hover { background: var(--inset); color: var(--v2-text); }

/* ══════════════════════════════════════════════════════════════
   LA CARTE — le panneau de verre, partagé par tous les blocs
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .dga-card { display: flex; flex-direction: column; }
[data-v2].dashboard-v3 .d3-card,
[data-v2].dashboard-v3 .dga-card,
[data-v2].dashboard-v3 .d3-fil {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  padding: 0;
}
[data-v2].dashboard-v3 .d3-card-head,
[data-v2].dashboard-v3 .dga-head,
[data-v2].dashboard-v3 .d3-fil-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px 12px;
  border-bottom: 1px solid var(--stroke);
  background: none;
}
[data-v2].dashboard-v3 .d3-card-head h3,
[data-v2].dashboard-v3 .dga-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -.02em;
  color: var(--v2-text);
}
[data-v2].dashboard-v3 .d3-card-head > svg,
[data-v2].dashboard-v3 .dga-head svg,
[data-v2].dashboard-v3 .d3-fil-head > svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--v2-text-3); }
[data-v2].dashboard-v3 .d3-fil-head > span {
  font-size: 15px; font-weight: 620; letter-spacing: -.02em; color: var(--v2-text);
}
[data-v2].dashboard-v3 .d3-card-actions { margin-left: auto; display: flex; gap: 4px; }
[data-v2].dashboard-v3 .d3-mini-btn,
[data-v2].dashboard-v3 .dga-open-cal,
[data-v2].dashboard-v3 .d3-fil-all {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  color: var(--v2-text-2);
  font-size: 11.5px;
  font-weight: 550;
  transition: background .14s ease, color .14s ease;
}
[data-v2].dashboard-v3 .d3-fil-all { margin-left: auto; }
[data-v2].dashboard-v3 .dga-open-cal { margin-left: auto; }
[data-v2].dashboard-v3 .d3-mini-btn:hover,
[data-v2].dashboard-v3 .dga-open-cal:hover,
[data-v2].dashboard-v3 .d3-fil-all:hover { background: var(--inset); color: var(--v2-text); }
[data-v2].dashboard-v3 .d3-mini-btn svg,
[data-v2].dashboard-v3 .dga-open-cal svg,
[data-v2].dashboard-v3 .d3-fil-all svg { width: 12px; height: 12px; }

/* Le compteur d'en-tête : une pastille, comme partout ailleurs. */
[data-v2].dashboard-v3 .d3-count,
[data-v2].dashboard-v3 .dga-count {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  color: var(--m-fg, var(--v2-text-2));
  background: var(--m-bg, var(--inset));
}
[data-v2].dashboard-v3 .d3-count-alert { --m-fg: var(--neg-fg); --m-bg: var(--neg-soft); }
[data-v2].dashboard-v3 .dc-ok   { --m-fg: var(--pos-fg);  --m-bg: var(--pos); }
[data-v2].dashboard-v3 .dc-warn { --m-fg: var(--v2-text-2); --m-bg: var(--inset); }
[data-v2].dashboard-v3 .dc-low  { --m-fg: var(--neg-fg);  --m-bg: var(--neg-soft); }

/* Sous-titre de section, à l'intérieur d'une carte. */
[data-v2].dashboard-v3 .d3-card-subhead {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px 8px;
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].dashboard-v3 .d3-card-subhead svg { width: 13px; height: 13px; }
[data-v2].dashboard-v3 .d3-divider { height: 1px; background: var(--stroke-2); margin: 6px 0; }
[data-v2].dashboard-v3 .d3-hor-intro {
  margin: 0;
  padding: 11px 18px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-text-2);
  background: var(--panel-2);
  border-bottom: 1px solid var(--stroke-2);
}
[data-v2].dashboard-v3 .d3-hor-intro strong { font-weight: 640; color: var(--v2-text); }

/* Titre de groupe coloré, dans l'agenda commercial. */
[data-v2].dashboard-v3 .d3-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--stroke-2);
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m-fg, var(--v2-text-3));
}
[data-v2].dashboard-v3 .d3-group-title svg { width: 12px; height: 12px; }
[data-v2].dashboard-v3 .d3-group-title.red    { --m-fg: var(--neg-fg); }
[data-v2].dashboard-v3 .d3-group-title.orange { --m-fg: var(--v2-text); }
[data-v2].dashboard-v3 .d3-group-title.blue   { --m-fg: var(--info-fg); }

/* ══════════════════════════════════════════════════════════════
   LA LIGNE — motif 1, tableau de liste
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 18px;
  border-bottom: 1px solid var(--stroke-2);
  cursor: pointer;
  transition: background .14s ease;
}
[data-v2].dashboard-v3 .d3-item:hover { background: var(--inset); }
[data-v2].dashboard-v3 .d3-item:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
[data-v2].dashboard-v3 .d3-item:last-child { border-bottom: 0; }
[data-v2].dashboard-v3 .d3-logo {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--inset);
  color: var(--v2-text-3);
  font-size: 11px;
  font-weight: 680;
}
[data-v2].dashboard-v3 .d3-logo img { width: 100%; height: 100%; object-fit: cover; }
[data-v2].dashboard-v3 .d3-logo svg { width: 15px; height: 15px; }
[data-v2].dashboard-v3 .d3-logo-alert { background: var(--inset); color: var(--v2-text-2); }
[data-v2].dashboard-v3 .d3-main { flex: 1; min-width: 0; }
[data-v2].dashboard-v3 .d3-name {
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--v2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-v2].dashboard-v3 .d3-sub {
  font-size: 11.5px;
  font-weight: 550;
  color: var(--v2-text-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-v2].dashboard-v3 .d3-sub strong { font-weight: 640; color: var(--v2-text-2); }
[data-v2].dashboard-v3 .d3-more {
  display: block;




  text-decoration: none;
  cursor: pointer;
}
[data-v2].dashboard-v3 .d3-more:hover { color: var(--v2-accent); }

/* Lignes de statistiques simples (répartition par statut). */
[data-v2].dashboard-v3 .d3-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 18px 3px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-text-2);
}
[data-v2].dashboard-v3 .d3-stat-val { font-weight: 640; color: var(--v2-text); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   LA PASTILLE — motif 3
   Les six tons hérités (red / orange / blue / green / purple / grey)
   sont remappés sur les paires de statut. Une couleur = un sens.
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 23px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--m-fg, var(--v2-text-2));
  background: var(--m-bg, var(--inset));
}
[data-v2].dashboard-v3 .d3-badge svg { width: 12px; height: 12px; }
/* Une pastille qui ouvre une fiche doit se présenter comme cliquable. */
[data-v2].dashboard-v3 .d3-badge[data-ptodo-open-card] { cursor: pointer; }
[data-v2].dashboard-v3 .d3-badge[data-ptodo-open-card]:hover { filter: brightness(.94); }
[data-v2].dashboard-v3 .d3-badge.red    { --m-fg: var(--neg-fg);    --m-bg: var(--neg-soft); }
[data-v2].dashboard-v3 .d3-badge.orange { --m-fg: var(--v2-text); --m-bg: var(--inset); }
[data-v2].dashboard-v3 .d3-badge.blue   { --m-fg: var(--info-fg);   --m-bg: var(--info-soft); }
[data-v2].dashboard-v3 .d3-badge.green  { --m-fg: var(--pos-fg);    --m-bg: var(--pos); }
[data-v2].dashboard-v3 .d3-badge.purple { --m-fg: var(--alt-fg);    --m-bg: var(--alt-soft); }
[data-v2].dashboard-v3 .d3-badge.grey   { --m-fg: var(--v2-text-2); --m-bg: var(--inset); }

/* ══════════════════════════════════════════════════════════════
   LA BARRE — motif 6
   Slot `--m-fill` distinct de `--m-fg` : un aplat n'est pas une encre.
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-bar,
[data-v2].dashboard-v3 .fun-piste {
  /* L'AMBRE EST L'APLAT. On avait mis ici --v2-accent, l'ENCRE olive, au
     motif que l'ambre disparaissait sur une piste claire — la piste est
     grise (--track), l'objection ne tient plus, et l'olive donnait des
     barres brunes là où la maquette montre de l'ambre franc.
     Le test ne l'avait pas vu : il inspecte les propriétés d'aplat, pas
     les affectations de variables. Il inspecte les deux depuis. */
  --m-fill: var(--accent-bright);
  position: relative;
  display: block;
  height: 6px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
[data-v2].dashboard-v3 .d3-bar-fill,
[data-v2].dashboard-v3 .fun-remplissage {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--m-fill);
  transition: width .18s ease;
}
[data-v2].dashboard-v3 .d3-bar-fill.done { --m-fill: var(--pos-fg); }
[data-v2].dashboard-v3 .dc-fill-ok   { --m-fill: var(--pos-fg); }
[data-v2].dashboard-v3 .dc-fill-warn { --m-fill: var(--accent-bright); }
[data-v2].dashboard-v3 .dc-fill-low  { --m-fill: var(--neg-fg); }
[data-v2].dashboard-v3 .d3-bar[data-statut="neutre"] { --m-fill: var(--v2-text-3); }
[data-v2].dashboard-v3 .d3-bar[data-statut="pos"]    { --m-fill: var(--pos-fg); }
[data-v2].dashboard-v3 .d3-bar[data-statut="neg"]    { --m-fill: var(--neg-fg); }
[data-v2].dashboard-v3 .d3-bar[data-statut="info"]   { --m-fill: var(--info-fg); }
/* « attention » : la marche intermédiaire de l'échelle de remplissage.
   Ce n'est PAS un statut de la rampe à quatre sens — c'est une mesure
   partielle, et l'ambre y dit « il reste à faire », donc une action. */
[data-v2].dashboard-v3 .d3-bar[data-statut="attention"] { --m-fill: var(--accent-bright); }

/* ══════════════════════════════════════════════════════════════
   L'ÉTAT VIDE — motif 7
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-empty,
[data-v2].dashboard-v3 .fil-vide,
[data-v2].dashboard-v3 .d3-empty-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 26px 20px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-text-3);
  max-width: 46ch;
  margin: 0 auto;
}
[data-v2].dashboard-v3 .d3-empty svg {
  width: 19px; height: 19px;
  color: var(--v2-text-3);
  opacity: .7;
}
[data-v2].dashboard-v3 .d3-empty-sm { padding: 12px; }

/* ══════════════════════════════════════════════════════════════
   LA MISE EN PAGE — deux colonnes, la principale à gauche
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   LES RANGÉES APPARIÉES

   La maquette ne fait pas deux colonnes : elle fait des RANGÉES de deux
   cellules, en 1,62fr / 1fr, étirées à la même hauteur. La différence
   compte. Deux colonnes qui s'empilent chacune de leur côté se
   désynchronisent dès que l'une est plus haute — les cartes se décalent
   et le bas de la colonne courte reste vide, ce qui était le cas ici.
   Avec des rangées, les deux cellules d'une même ligne commencent et
   finissent ensemble, quoi qu'elles contiennent.
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-rangee {
  display: grid;

  gap: 12px;
  align-items: stretch;
}
/* Une rangée à une seule cellule prend toute la largeur : une carte seule
   n'a aucune raison de s'arrêter aux deux tiers. */
[data-v2].dashboard-v3 .d3-rangee-seule { }
/* La cellule empile ses cartes et se laisse étirer par la rangée. */
[data-v2].dashboard-v3 .d3-cellule {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* LA DERNIÈRE CARTE D'UNE CELLULE PREND LA HAUTEUR QUI RESTE.
   Sans ça, la cellule s'étire à la hauteur de la rangée mais la carte garde
   la sienne : il reste un blanc sous la carte la plus courte, visible entre
   deux rangées. Ce vide-là se voit ; celui qui se retrouve à l'intérieur d'un
   panneau, non. On étire donc la dernière carte de chaque cellule. */
[data-v2].dashboard-v3 .d3-cellule > * { flex: 0 0 auto; margin: 0; }
[data-v2].dashboard-v3 .d3-cellule > *:last-child { }
/* Le contenu de la carte étirée suit : sans ça, la carte grandit mais sa
   liste reste collée en haut et le blanc revient, juste un cran plus bas. */
[data-v2].dashboard-v3 .d3-cellule > *:last-child > .d3-empty,
[data-v2].dashboard-v3 .d3-cellule > *:last-child > .m-vide { margin-top: auto; margin-bottom: auto; }
/* `.d3-fil` portait un `margin-top: 14px` de l'ancienne feuille, hérité de
   l'époque où le fil vivait à l'intérieur du bloc d'accueil. Devenu une carte
   dans une cellule, ce reste le décalait de 14 px sous l'agenda — une seule
   rangée mal alignée sur cinq, et c'est celle qu'on voit en premier. */

@media (max-width: 1180px) {
  [data-v2].dashboard-v3 .d3-rangee { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   LA CARTE « MES TÂCHES »
   Même langage que l'écran Tâches : ligne d'ajout sobre, cases
   rondes, sections en capitales.
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-qa {

  flex-wrap: wrap;
  align-items: center;
  gap: 7px;



}
/* Repliée par défaut : cinq contrôles étalés en permanence pour une tâche
   qu'on écrit en trois mots, c'est la carte qui accueille l'écran. Le champ
   de texte reste seul ; le reste apparaît dès qu'on écrit. Même règle que
   l'écran Tâches, posée par le même code (renderDashboard). */
/* Le repli porte sur le CONTENEUR des contrôles avancés, plus sur les
   enfants directs de .d3-qa : depuis que la ligne visible est elle-même
   un enfant direct (.d3-qa-ligne), la règle par exclusion la masquait.
   La classe .ouvert est posée et retirée par renderDashboard — elle tient
   compte du contenu du champ, ce qu'un :focus-within ne sait pas faire. */
[data-v2].dashboard-v3 .d3-qa:not(.ouvert) .d3-qa-avance { display: none; }
[data-v2].dashboard-v3 .d3-qa:not(.ouvert) .d3-qa-add { opacity: .45; }

/* Les champs natifs : sans habillage, ils gardent la police du système et
   l'apparence du navigateur au milieu d'un écran converti. */
[data-v2].dashboard-v3 input[type="date"],
[data-v2].dashboard-v3 input[type="time"] {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 550;
  color: var(--v2-text-2);
  height: 26px;
  padding: 0 8px;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--panel-solid);
  cursor: pointer;
}
[data-v2].dashboard-v3 input[type="date"]::-webkit-calendar-picker-indicator,
[data-v2].dashboard-v3 input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .4;
  cursor: pointer;
}
[data-v2].dashboard-v3 input[type="date"]:hover::-webkit-calendar-picker-indicator,
[data-v2].dashboard-v3 input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: .8; }
[data-v2].dashboard-v3 .d3-qa-text {
  all: unset;
  flex: 1 1 200px;
  min-width: 0;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--v2-text);
}
[data-v2].dashboard-v3 .d3-qa-text::placeholder { color: var(--v2-text-3); }
[data-v2].dashboard-v3 .d3-qa-date,
[data-v2].dashboard-v3 .d3-qa-time,
[data-v2].dashboard-v3 .d3-qa-sel {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 550;
  color: var(--v2-text-2);
  height: 26px;
  padding: 0 8px;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--panel-solid);
  cursor: pointer;
  max-width: 150px;
}
[data-v2].dashboard-v3 .d3-qa-sel:disabled { opacity: .5; cursor: not-allowed; }
[data-v2].dashboard-v3 .d3-qa-g {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  color: var(--v2-text-3);
  font-size: 11.5px;
  font-weight: 550;
}
[data-v2].dashboard-v3 .d3-qa-g.active { color: var(--v2-accent); background: var(--accent-soft); border-color: transparent; }
[data-v2].dashboard-v3 .d3-qa-g svg { width: 13px; height: 13px; }
[data-v2].dashboard-v3 .d3-qa-add {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 99px;
  background: var(--accent-bright);
  color: var(--sur-accent, #1b1a12);
  box-shadow: var(--shadow-sm);
}
[data-v2].dashboard-v3 .d3-qa-add:hover { filter: brightness(1.06); }
[data-v2].dashboard-v3 .d3-qa-add svg { width: 14px; height: 14px; }

[data-v2].dashboard-v3 .d3-todo {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  border-bottom: 1px solid var(--stroke-2);
}
[data-v2].dashboard-v3 .d3-todo:hover { background: var(--inset); }
[data-v2].dashboard-v3 .d3-todo-check {
  all: unset;
  cursor: pointer;
  width: 17px; height: 17px;
  flex: 0 0 17px;
  margin-top: 1px;

  border: 1.5px solid var(--stroke);
  transition: border-color .14s ease, background .14s ease;
}
[data-v2].dashboard-v3 .d3-todo-check:hover { border-color: var(--pos-fg); }
[data-v2].dashboard-v3 .d3-todo-check:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
[data-v2].dashboard-v3 .d3-todo-main { flex: 1; min-width: 0; }
[data-v2].dashboard-v3 .d3-todo-text {

  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--v2-text);
}
[data-v2].dashboard-v3 .d3-todo-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
[data-v2].dashboard-v3 .d3-todo-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--stroke-2);
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m-fg, var(--v2-text-3));
}
/* Trois reprises dans cet en-tête, toutes pour la même raison : l'ancienne
   feuille habille les trois enfants séparément, et ce qu'on ne redéclare pas
   reste peint à l'ancienne palette au milieu du reste.
     · l'intitulé gardait --c-red-txt (#a8291c / #ff9a8f)
     · la puce ::before gardait --red / --accent-2 / --blue
     · le compteur gardait un fond --bg-3 en pilule
   Résultat avant correction : deux rouges différents côte à côte dans le
   même intertitre, très visible en sombre. */
[data-v2].dashboard-v3 .d3-todo-sec-t { color: inherit; font: inherit; letter-spacing: inherit; }
[data-v2].dashboard-v3 .d3-todo-sec::before { background: currentColor; }
[data-v2].dashboard-v3 .d3-todo-sec-n {
  margin-left: auto;
  padding: 0;
  background: none;
  color: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
[data-v2].dashboard-v3 .d3-todo-sec.retard { --m-fg: var(--neg-fg); }
[data-v2].dashboard-v3 .d3-todo-sec.jour   { --m-fg: var(--v2-text); }

[data-v2].dashboard-v3 .d3-transmis { border-top: 1px solid var(--stroke); }
[data-v2].dashboard-v3 .d3-transmis-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 8px;
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].dashboard-v3 .d3-transmis-head svg { width: 12px; height: 12px; }
[data-v2].dashboard-v3 .d3-transmis-n { font-variant-numeric: tabular-nums; letter-spacing: 0; }
[data-v2].dashboard-v3 .d3-transmis-l {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px;
  font-size: 12.5px;
  color: var(--v2-text-2);
}
[data-v2].dashboard-v3 .d3-transmis-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2].dashboard-v3 .d3-transmis-qui { font-size: 11.5px; color: var(--v2-text-3); flex-shrink: 0; }
[data-v2].dashboard-v3 .d3-transmis-l.supprimee .d3-transmis-txt { text-decoration: line-through; color: var(--v2-text-3); }
/* Les quatre états viennent d'etatTransmise() : envoyee, vue, faite,
   supprimee. Le tableau de bord n'en affiche que trois — `faite` est
   filtrée par transmisEnCours — mais les quatre sont habillées, sinon
   un changement de filtre ferait réapparaître un point sans couleur.
   « Pas encore ouverte » et « Vue » sont les deux cas courants : les
   laisser tous les deux bleus effaçait la seule information utile du
   bloc, celle de savoir si le destinataire a lu. */
[data-v2].dashboard-v3 .td-etat-pastille {
  width: 7px; height: 7px;
  flex: 0 0 7px;
  border-radius: 99px;
  background: var(--m-fill, var(--v2-text-3));
}
/* « Pas encore ouverte » prend l'accent, pas le gris : c'est l'état qui
   appelle une relance. L'ancien système le peignait déjà en orange, et le
   passer en neutre aurait effacé le seul signal que le bloc sert à donner. */
[data-v2].dashboard-v3 .d3-transmis-l.envoyee   { --m-fill: var(--accent-bright); }
[data-v2].dashboard-v3 .d3-transmis-l.vue       { --m-fill: var(--info-fg); }
[data-v2].dashboard-v3 .d3-transmis-l.repondu   { --m-fill: var(--info-fg); }
/* La dernière réponse, en écho sous la ligne : c'est elle qu'on vient lire. */
[data-v2].dashboard-v3 .d3-transmis-rep {
  padding: 0 18px 5px 33px;
  font-size: 11px; color: var(--v2-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-v2].dashboard-v3 .d3-transmis-l.faite     { --m-fill: var(--pos-fg); }
[data-v2].dashboard-v3 .d3-transmis-l.supprimee { --m-fill: var(--neg-fg); }

/* ══════════════════════════════════════════════════════════════
   L'ENTONNOIR COMMERCIAL
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .fun { }
[data-v2].dashboard-v3 .fun-entree {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0 12px;
}
[data-v2].dashboard-v3 .fun-entree-n {
  word-spacing: .12em;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 640;
  letter-spacing: -.04em;
  color: var(--v2-text);
  font-variant-numeric: tabular-nums;
}
[data-v2].dashboard-v3 .fun-entree-l { font-size: 12.5px; color: var(--v2-text-3); }
[data-v2].dashboard-v3 .fun-etape {
  padding: 9px 0;
  border-top: 1px solid var(--stroke-2);
  cursor: pointer;
}
[data-v2].dashboard-v3 .fun-etape:hover { background: var(--inset); }
[data-v2].dashboard-v3 .fun-etape.vide { opacity: .55; }
[data-v2].dashboard-v3 .fun-l1 { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
[data-v2].dashboard-v3 .fun-num {



  display: grid;
  place-items: center;
  background: var(--inset);
  color: var(--v2-text-3);
  font-size: 10.5px;
  font-weight: 680;
}
[data-v2].dashboard-v3 .fun-lbl { flex: 1; font-weight: 550; color: var(--v2-text); }
[data-v2].dashboard-v3 .fun-n {
  font-family: var(--font-display);


  color: var(--v2-text);
  font-variant-numeric: tabular-nums;
}
/* Une marche qui perd plus de la moitié des dossiers se signale — c'est
   la seule chose qu'on cherche dans un entonnoir. */
[data-v2].dashboard-v3 .fun-etape.casse .fun-remplissage { }
[data-v2].dashboard-v3 .fun-etape.casse .fun-taux { color: var(--neg-fg); }
[data-v2].dashboard-v3 .fun-l2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  font-size: 11.5px;
  color: var(--v2-text-3);
}
[data-v2].dashboard-v3 .fun-taux { color: var(--v2-text-2); font-variant-numeric: tabular-nums; }
[data-v2].dashboard-v3 .fun-taux small { font-weight: 550; font-size: 10px; }
[data-v2].dashboard-v3 .fun-perdus {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 99px; background: var(--neg-soft); color: var(--neg-fg); font-weight: 550;
}
[data-v2].dashboard-v3 .fun-bloques {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 99px; background: var(--inset); color: var(--v2-text-2);
}
[data-v2].dashboard-v3 .fun-ca { margin-left: auto; font-weight: 640; color: var(--v2-text-2); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   LE FIL « CETTE SEMAINE »
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .fil-item {
  all: unset;
  box-sizing: border-box;
  display: flex;


  width: 100%;


  cursor: pointer;
  transition: background .14s ease;
}
[data-v2].dashboard-v3 .fil-item:hover { background: var(--inset); }
[data-v2].dashboard-v3 .fil-item:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
[data-v2].dashboard-v3 .fil-item:last-child { border-bottom: 0; }
[data-v2].dashboard-v3 .fil-dot {
  width: 26px; height: 26px;
  flex: 0 0 26px;

  display: grid;
  place-items: center;
  color: var(--m-fg, var(--v2-text-3));
  background: var(--m-bg, var(--inset));
}
[data-v2].dashboard-v3 .fil-dot svg { }
[data-v2].dashboard-v3 .fil-red    { --m-fg: var(--neg-fg);    --m-bg: var(--neg-soft); }
[data-v2].dashboard-v3 .fil-orange { --m-fg: var(--v2-text-2); --m-bg: var(--inset); }
[data-v2].dashboard-v3 .fil-blue   { --m-fg: var(--info-fg);   --m-bg: var(--info-soft); }
[data-v2].dashboard-v3 .fil-green  { --m-fg: var(--pos-fg);    --m-bg: var(--pos); }
[data-v2].dashboard-v3 .fil-purple { --m-fg: var(--alt-fg);    --m-bg: var(--alt-soft); }
[data-v2].dashboard-v3 .fil-red    { --m-fg: var(--neg-fg);    --m-bg: var(--neg-soft); }
[data-v2].dashboard-v3 .fil-orange,
[data-v2].dashboard-v3 .fil-yellow { --m-fg: var(--v2-accent); --m-bg: var(--accent-soft); }
[data-v2].dashboard-v3 .fil-teal   { --m-fg: var(--teal-fg); }
[data-v2].dashboard-v3 .fil-grey,
[data-v2].dashboard-v3 .fil-gray   { --m-fg: var(--v2-text-3); --m-bg: var(--inset); }
[data-v2].dashboard-v3 .fil-teal   { --m-fg: var(--teal-fg);   --m-bg: var(--teal-soft); }
[data-v2].dashboard-v3 .fil-txt {
  flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--v2-text-2);

}
[data-v2].dashboard-v3 .fil-txt strong { color: var(--v2-text); }
[data-v2].dashboard-v3 .fil-det { }
[data-v2].dashboard-v3 .fil-meta {
  font-size: 11px; color: var(--v2-text-3); flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
[data-v2].dashboard-v3 .fil-go { color: var(--v2-text-3); display: grid; place-items: center; flex-shrink: 0; }
[data-v2].dashboard-v3 .fil-go svg { width: 12px; height: 12px; transform: rotate(-90deg); }

/* ══════════════════════════════════════════════════════════════
   LA COMPLÉTUDE DES DONNÉES
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .dc-mods { display: flex; flex-direction: column; }
[data-v2].dashboard-v3 .dc-mod {
  all: unset;
  cursor: pointer;

  border-radius: var(--r-xs);
}
[data-v2].dashboard-v3 .dc-mod-top {
 align-items: baseline; justify-content: space-between;
  margin-bottom: 5px;
}
[data-v2].dashboard-v3 .dc-mod-lbl { font-size: 12.5px; font-weight: 550; color: var(--v2-text-2); }
[data-v2].dashboard-v3 .dc-mod-pct {
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--m-fg, var(--v2-text-2)); background: none; padding: 0; height: auto;
}
[data-v2].dashboard-v3 .dc-actions { padding-bottom: 6px; }
[data-v2].dashboard-v3 .dc-action {
  all: unset;
  box-sizing: border-box;
  display: flex; align-items: center;
  width: 100%;
  cursor: pointer;
  transition: background .14s ease;
}
[data-v2].dashboard-v3 .dc-action:hover { background: var(--inset); }
[data-v2].dashboard-v3 .dc-action:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
[data-v2].dashboard-v3 .dc-action-n {
  min-width: 24px; padding: 0 7px;
 align-items: center; justify-content: center;

 font-weight: 640; font-variant-numeric: tabular-nums;
}
[data-v2].dashboard-v3 .dc-n-alert { background: var(--neg-soft); color: var(--neg-fg); }
[data-v2].dashboard-v3 .dc-action-txt { flex: 1; min-width: 0; font-size: 12.5px; color: var(--v2-text-2); }
[data-v2].dashboard-v3 .dc-action-go { color: var(--v2-text-3); display: grid; place-items: center; }
[data-v2].dashboard-v3 .dc-action-go svg { }

/* ══════════════════════════════════════════════════════════════
   L'OUTILLAGE
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-outil-global { }
[data-v2].dashboard-v3 .d3-outil-global-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12.5px; color: var(--v2-text-2);
}
[data-v2].dashboard-v3 .d3-outil-global-head strong {
  font-family: var(--font-display); font-weight: 680;
  letter-spacing: -.03em; color: var(--v2-text); font-variant-numeric: tabular-nums;
}
[data-v2].dashboard-v3 .d3-outil-pct { font-variant-numeric: tabular-nums; }
[data-v2].dashboard-v3 .d3-outil-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;

}
[data-v2].dashboard-v3 .d3-outil-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 6px; border-radius: var(--r-sm);
  background: var(--m-bg, var(--inset));
  font-size: 11px; color: var(--v2-text-3); text-align: center;
}
[data-v2].dashboard-v3 .d3-outil-n {
  word-spacing: .12em;
  font-family: var(--font-display); font-weight: 680;
  letter-spacing: -.03em; color: var(--m-fg, var(--v2-text)); font-variant-numeric: tabular-nums;
}
[data-v2].dashboard-v3 .d3-outil-stat.is-green { --m-fg: var(--pos-fg);  --m-bg: var(--pos); }
[data-v2].dashboard-v3 .d3-outil-stat.is-red   { --m-fg: var(--neg-fg);  --m-bg: var(--neg-soft); }
[data-v2].dashboard-v3 .d3-outil-stat.is-blue  { --m-fg: var(--info-fg); --m-bg: var(--info-soft); }

/* ══════════════════════════════════════════════════════════════
   LA RÉPARTITION — barre segmentée + puces
   Les couleurs viennent d'un tableau JavaScript (elles distinguent des
   catégories arbitraires, pas des statuts) : on ne les remappe pas.
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .d3-repart { padding: 4px 18px 14px; display: flex; flex-direction: column; gap: 14px; }
[data-v2].dashboard-v3 .d3-rp-bar {
  display: flex; height: 6px; border-radius: 99px; overflow: hidden;
  background: var(--track); margin: 2px 0 8px;
}
[data-v2].dashboard-v3 .d3-rp-seg { height: 100%; }
[data-v2].dashboard-v3 .d3-rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
[data-v2].dashboard-v3 .d3-rp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 99px;
  background: var(--inset); color: var(--v2-text-2);
  font-size: 11.5px; font-weight: 550;
}
[data-v2].dashboard-v3 .d3-rp-chip b { font-weight: 640; color: var(--v2-text); font-variant-numeric: tabular-nums; }
[data-v2].dashboard-v3 .d3-rp-dot { width: 7px; height: 7px; border-radius: 99px; flex: 0 0 7px; }
[data-v2].dashboard-v3 .d3-rp .d3-card-subhead { padding-left: 0; padding-right: 0; }

/* ══════════════════════════════════════════════════════════════
   MON AGENDA — la semaine en sept colonnes
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 .dga-head-title { display: flex; align-items: center; gap: 9px; }
[data-v2].dashboard-v3 .dga-live {
  display: inline-flex; align-items: center; gap: 7px;
  height: 23px; padding: 0 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 550;
  color: var(--m-fg, var(--v2-text-2)); background: var(--m-bg, var(--inset));
}
[data-v2].dashboard-v3 .dga-live svg { width: 12px; height: 12px; }
[data-v2].dashboard-v3 .dga-live b { font-weight: 680; font-variant-numeric: tabular-nums; }
[data-v2].dashboard-v3 .dga-live-now  { --m-fg: var(--pos-fg);    --m-bg: var(--pos); }
[data-v2].dashboard-v3 .dga-live-next { --m-fg: var(--v2-text); --m-bg: var(--inset); }
[data-v2].dashboard-v3 .dga-live-done { --m-fg: var(--v2-text-3); --m-bg: var(--inset); }
[data-v2].dashboard-v3 .dga-live-dot {
  width: 7px; height: 7px; border-radius: 99px; background: currentColor;
}

[data-v2].dashboard-v3 .dga-week-row {
  display: grid;
  /* SEPT COLONNES ÉGALES. J'avais donné 1,5fr à aujourd'hui, ce qui écrasait
     les six autres jours et rompait la régularité de la semaine. La maquette
     signale le jour courant par la couleur seule — c'est suffisant, et ça
     laisse la grille lisible. */
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  flex: 1;


}
[data-v2].dashboard-v3 .dga-daycol {
  /* 150 px, valeur de la maquette : en dessous, une colonne portant deux RDV
     déborde et la semaine perd son alignement. */
  min-height: 150px;

  background: var(--panel-2);
  border: 1px solid var(--stroke-2);

}
[data-v2].dashboard-v3 .dga-daycol.is-today { background: var(--accent-soft); }
/* Un samedi VIDE s'efface — c'est le sens de l'estompe : rien à y faire.
   Un samedi qui porte un rendez-vous doit se lire comme les autres jours ;
   l'opacité globale rendait « 14:00 Levrault » plus pâle que le reste et
   c'est précisément le rendez-vous qu'on risque d'oublier. */
[data-v2].dashboard-v3 .dga-daycol.is-we.is-empty { opacity: .68; }
[data-v2].dashboard-v3 .dga-dhead {
  padding: 8px 9px 7px;
  border-bottom: 1px solid var(--stroke-2);
  text-align: center;
}
[data-v2].dashboard-v3 .dga-dh-dow {
  display: block;
  letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-3);
}
[data-v2].dashboard-v3 .dga-dh-num {
  display: block; font-family: var(--font-display);
 letter-spacing: -.03em; color: var(--v2-text);
}
/* Aplat, donc --accent-bright et non --v2-accent : cette dernière est
   l'encre olive, elle rendrait la barre du jour terne et sale en clair. */
[data-v2].dashboard-v3 .dga-daycol-body { display: flex; flex-direction: column; }
[data-v2].dashboard-v3 .dga-wempty {
  padding: 14px 4px; text-align: center;
  font-size: 11px; font-style: italic; color: var(--v2-text-3);
}

/* Un RDV : bloc compact les jours suivants, carte détaillée aujourd'hui. */
[data-v2].dashboard-v3 .dga-slot {

  background: var(--panel-solid); border: 1px solid var(--stroke-2);
  cursor: pointer; transition: border-color .14s ease;
}
[data-v2].dashboard-v3 .dga-slot:hover { border-color: var(--info-fg); }
[data-v2].dashboard-v3 .dga-slot.is-past { opacity: .5; }
/* LE RDV EN COURS RESTE AMBRE (décision Joris, 11/08/2026).
   J'avais fait passer l'état « en cours » au vert — seule information
   temps réel de l'écran. La maquette de Claude Design ne montre aucun
   vert dans l'agenda : la colonne du jour est ambre, ses créneaux
   aussi, quel que soit leur état. On suit la photo ; ce qui distingue
   le créneau en cours, c'est la mention « En cours » et la pastille
   d'en-tête, pas une couleur de plus. */
[data-v2].dashboard-v3 .dga-slot-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
[data-v2].dashboard-v3 .dga-slot-time {
  font-size: 11px; color: var(--info-fg); font-variant-numeric: tabular-nums;
}
[data-v2].dashboard-v3 .dga-slot-title {
 color: var(--v2-text);
  overflow: hidden;
}
[data-v2].dashboard-v3 .dga-slot-state {
  display: inline-block; margin-top: 3px; font-size: 10px;
  font-weight: 640; color: var(--v2-accent);
}
[data-v2].dashboard-v3 .dga-slot-meet,
[data-v2].dashboard-v3 .dga-join {
  color: var(--info-fg); display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; font-size: 11px; font-weight: 550;
}
[data-v2].dashboard-v3 .dga-slot-meet svg,
[data-v2].dashboard-v3 .dga-join svg { width: 12px; height: 12px; }

[data-v2].dashboard-v3 .dga-ev {
  display: grid;
  grid-template-columns: 52px 3px 1fr;
  gap: 9px;
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  border: 1px solid var(--stroke-2);
  cursor: pointer;
}
[data-v2].dashboard-v3 .dga-ev.dga-past { opacity: .5; }
[data-v2].dashboard-v3 .dga-ev-time {
  font-size: 11.5px; font-weight: 640; color: var(--v2-text);
  font-variant-numeric: tabular-nums;
}
[data-v2].dashboard-v3 .dga-ev-end { display: block; font-size: 10px; font-weight: 550; color: var(--v2-text-3); }
[data-v2].dashboard-v3 .dga-ev-rail { border-radius: 99px; background: var(--info-fg); }
[data-v2].dashboard-v3 .dga-ev.dga-now .dga-ev-rail { background: var(--pos-fg); }
[data-v2].dashboard-v3 .dga-ev.dga-next .dga-ev-rail { background: var(--v2-text); }
[data-v2].dashboard-v3 .dga-ev-title { font-size: 12.5px; font-weight: 550; color: var(--v2-text); }
[data-v2].dashboard-v3 .dga-ev-state { font-size: 10.5px; font-weight: 640; margin-top: 2px; }
[data-v2].dashboard-v3 .dga-ev-state.now { color: var(--pos-fg); }
[data-v2].dashboard-v3 .dga-ev-state.next { color: var(--v2-text); }

/* ══════════════════════════════════════════════════════════════
   L'ALIGNEMENT SUR LA MAQUETTE — 10 août 2026
   Ce qui suit rapproche l'écran des trois captures de référence, bloc
   par bloc. Chaque règle est qualifiée `[data-v2].dashboard-v3` : passer
   par un slot (`var(--m-fg)`) abaisse la spécificité effective de la
   déclaration, et sans ce préfixe styles.css l'emporte.
   ══════════════════════════════════════════════════════════════ */

/* ── Les trois commandes de l'en-tête ──────────────────────────
   Émises dans le gabarit du tableau de bord puis déplacées dans
   l'en-tête de la coque : elles agissent sur la page, leur place est
   dans sa barre de titre. */
body.v2-coque main .header .d3-cmds {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Le déclencheur de la palette ⌘K. Dessiné comme un champ parce que
   c'est la forme qu'on cherche des yeux — mais c'est un bouton, et il
   ouvre une vraie recherche. */
body.v2-coque main .header .d3-recherche {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  width: 246px;
  padding: 0 8px 0 13px;
  border-radius: var(--r-sm);
  background: var(--inset);
  border: 1px solid var(--stroke);
  color: var(--v2-text-3);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
body.v2-coque main .header .d3-recherche:hover { border-color: var(--stroke-2); background: var(--panel-2); }
body.v2-coque main .header .d3-recherche:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
body.v2-coque main .header .d3-recherche > span { flex: 1; text-align: left; }
body.v2-coque main .header .d3-recherche svg { width: 15px; height: 15px; flex: 0 0 15px; }
body.v2-coque main .header .d3-recherche kbd {
  font-family: inherit;
  font-size: 11px;
  font-weight: 620;
  padding: 3px 6px;
  border-radius: var(--r-xs, 9px);
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--v2-text-3);
}
/* PDF : un rond sans libellé. La fonction reste, le mot disparaît —
   l'icône d'export se lit sans être nommée, et l'en-tête tient sur une
   ligne à côté de la recherche et de l'action principale. */
body.v2-coque main .header .d3-btn-rond {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--v2-text-2);
  box-shadow: var(--shadow-sm);
  transition: background .14s ease, color .14s ease;
}
body.v2-coque main .header .d3-btn-rond:hover { background: var(--inset); color: var(--v2-text); }
body.v2-coque main .header .d3-btn-rond svg { width: 15px; height: 15px; }
body.v2-coque main .header .d3-btn-rond span { display: none; }
/* L'action principale. Un seul bouton ambre plein par écran. */
body.v2-coque main .header .d3-btn-primaire {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 17px;
  border-radius: 99px;
  background: var(--accent-bright);
  color: var(--sur-accent, #1b1a12);
  font-size: 13.5px;
  font-weight: 640;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter .14s ease, transform .14s ease;
}
body.v2-coque main .header .d3-btn-primaire:hover  { filter: brightness(1.06); }
body.v2-coque main .header .d3-btn-primaire:active { transform: scale(.98); }
body.v2-coque main .header .d3-btn-primaire:focus-visible { outline: 2px solid var(--v2-text); outline-offset: 2px; }
body.v2-coque main .header .d3-btn-primaire svg { width: 16px; height: 16px; }
/* La bascule de thème est accueillie dans le groupe : quatre commandes,
   une seule rangée, même hauteur. */
body.v2-coque main .header .d3-cmds #theme-btn {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
}

/* ── KPI : la jauge de conversion et le crayon ─────────────────
   La jauge remplace le trait fin que portent les trois autres cartes :
   même rôle de séparation, plus la valeur rendue visible d'un coup.
   C'est un APLAT — --accent-bright, jamais --v2-accent. */
[data-v2].dashboard-v3 .d3-kpi-jauge {
  height: 5px;

  border-radius: 99px;
  background: var(--inset);
  overflow: hidden;
}
[data-v2].dashboard-v3 .d3-kpi-jauge i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent-bright);
}
/* Le crayon ne s'affiche qu'au survol de sa carte. Il signalait en
   permanence une possibilité qu'on utilise deux fois par an, sur quatre
   cartes dont deux ne sont pas modifiables. */
[data-v2].dashboard-v3 .d3-kpi-edit { opacity: 0; transition: opacity .14s ease; }
[data-v2].dashboard-v3 .d3-kpi:hover .d3-kpi-edit,
[data-v2].dashboard-v3 .d3-kpi:focus-within .d3-kpi-edit { opacity: .5; }

/* ── En-tête de carte : compteurs et liens ─────────────────────*/
/* Un total qui résume n'alerte pas : il reste noir. */
[data-v2].dashboard-v3 .d3-count-fort {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 680;
  color: var(--v2-text);
  background: none;
  border: 0;
  padding: 0;
}
/* « 44 prospects · 7 étapes » : une légende, pas un badge. */
[data-v2].dashboard-v3 .d3-count-meta {
  font-size: 12px;
  font-weight: 550;
  color: var(--v2-text-3);
  background: none;
  border: 0;
  padding: 0;
  white-space: nowrap;
}
/* Un lien écrit vaut mieux qu'un carré à icône : on sait où il mène
   avant de cliquer. */
[data-v2].dashboard-v3 .d3-lien-tete,
[data-v2].dashboard-v3 .d3-fil-all,
[data-v2].dashboard-v3 .dga-open-cal {
  all: unset;
  cursor: pointer;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-text-3);
  white-space: nowrap;
  transition: color .14s ease;
}
[data-v2].dashboard-v3 .d3-lien-tete:hover,
[data-v2].dashboard-v3 .d3-fil-all:hover,
[data-v2].dashboard-v3 .dga-open-cal:hover { color: var(--v2-text); text-decoration: underline; }
[data-v2].dashboard-v3 .d3-lien-tete:focus-visible,
[data-v2].dashboard-v3 .d3-fil-all:focus-visible,
[data-v2].dashboard-v3 .dga-open-cal:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; border-radius: 3px; }

/* ── Le rond des badges ────────────────────────────────────────
   Il se lit avant le texte et donne la gravité sans qu'on ait à
   décoder la teinte du fond, qui est très pâle. */
[data-v2].dashboard-v3 .d3-badge > i,
[data-v2].dashboard-v3 .fun-perdus > i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── L'agenda ──────────────────────────────────────────────────*/
/* Le délai jusqu'au prochain rendez-vous, réduit à une pastille. La
   ligne pleine largeur qu'elle remplace répétait l'heure et le titre
   déjà lisibles deux centimètres plus bas, pour 46 px de hauteur. */
[data-v2].dashboard-v3 .dga-pastille {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 0 11px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--v2-accent);

  font-weight: 620;
  cursor: pointer;
  white-space: nowrap;
}
[data-v2].dashboard-v3 .dga-pastille > i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-bright); flex-shrink: 0;
}
[data-v2].dashboard-v3 .dga-pastille:hover { filter: brightness(.97); }
[data-v2].dashboard-v3 .dga-pastille:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
/* En cours : le vert est le seul état qui demande qu'on lève les yeux
   tout de suite. */
/* `est-en-cours` ne change plus la couleur : la pastille reste ambre,
   son texte (« encore 35 min ») dit déjà tout. Comme les photos. */
[data-v2].dashboard-v3 .dga-pastille.est-fini { background: var(--inset); color: var(--v2-text-3); cursor: default; }
[data-v2].dashboard-v3 .dga-pastille.est-fini > i { background: var(--v2-text-3); }
/* Sept en-têtes de colonne identiques : abréviation, numéro. La colonne
   du jour se distingue par son fond, pas par un libellé de plus. */
[data-v2].dashboard-v3 .dga-dhead { text-align: center; }
[data-v2].dashboard-v3 .dga-dhead.is-today .dga-dh-dow,
[data-v2].dashboard-v3 .dga-dhead.is-today .dga-dh-num { color: var(--v2-accent); }
/* Une colonne vide le dit. Le vide brut obligeait à compter les
   colonnes pour savoir si le samedi était libre ou si l'affichage avait
   échoué. */
[data-v2].dashboard-v3 .dga-wempty {
  display: grid;
  place-items: center;


  font-style: italic;
  color: var(--v2-text-3);
  opacity: .75;
}
/* Le titre d'un créneau passe à la ligne. Tronqué, « Visio de
   qualification » devenait « Visi… » et ne disait plus rien.
   `anywhere` coupait en plein mot — « Guillaum / e Atger ». `break-word`
   ne casse un mot que s'il ne peut PAS tenir seul sur une ligne, ce qui
   n'arrive jamais avec des noms propres dans une colonne de 100 px. */
[data-v2].dashboard-v3 .dga-slot-title {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  text-overflow: clip;

}

/* ── Le fil « Cette semaine » ──────────────────────────────────
   Deux lignes par entrée. Tout tenait sur une seule — libellé, cible,
   auteur, date, avatar, chevron — et le texte était tronqué dès qu'une
   cible dépassait vingt caractères. */
[data-v2].dashboard-v3 .fil-corps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
[data-v2].dashboard-v3 .fil-item { align-items: flex-start; border-bottom: 0; }
[data-v2].dashboard-v3 .fil-txt {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.4;
  text-align: left;
}
[data-v2].dashboard-v3 .fil-meta {
  margin-left: 0;

  color: var(--v2-text-3);
  text-align: left;
  white-space: normal;
}
/* La vignette est CARRÉE et NEUTRE. Ronde et colorée par ton, elle
   donnait six couleurs à des événements qui n'ont pas de gravité — la
   couleur ne veut plus rien dire quand tout en porte une. */
[data-v2].dashboard-v3 .fil-dot {
  /* Le fond vient du TON de l'événement (--m-bg, posé par .fil-blue et
     consorts) ; --inset n'est que le repli des types sans ton déclaré.
     J'avais figé --inset ici, ce qui neutralisait les six tons. */
  background: var(--m-bg, var(--inset));
  color: var(--m-fg, var(--v2-text-3));

}
[data-v2].dashboard-v3 .fil-dot svg { }

/* ── « Mes tâches » : un seul champ visible ────────────────────
   Les six autres contrôles — date, heure, destinataire, fiche, Agenda,
   ajouter — se déplient au focus. Ils ne sont pas supprimés : tous les
   identifiants et tous les écouteurs sont intacts. */
[data-v2].dashboard-v3 .d3-qa {
  display: block;
  background: none;
  border-bottom: 0;

}
[data-v2].dashboard-v3 .d3-qa-ligne {
  display: flex;
  align-items: center;
  gap: 9px;



  background: var(--inset);

  transition: border-color .14s ease;
}
[data-v2].dashboard-v3 .d3-qa:focus-within .d3-qa-ligne { border-color: var(--stroke-2); }
[data-v2].dashboard-v3 .d3-qa-plus { width: 15px; height: 15px; flex: 0 0 15px; color: var(--v2-text-3); }
[data-v2].dashboard-v3 .d3-qa-ligne .d3-qa-text {
  all: unset;
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--v2-text);
}
[data-v2].dashboard-v3 .d3-qa-ligne .d3-qa-text::placeholder { color: var(--v2-text-3); }
/* Le destinataire, rendu nu : c'est une mention, pas un contrôle à
   remplir — dans neuf cas sur dix la tâche est pour soi. */
[data-v2].dashboard-v3 .d3-qa-pour {
  all: unset;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 130px;
  font-size: 12.5px;
  color: var(--v2-text-3);
  text-align: right;
}
[data-v2].dashboard-v3 .d3-qa-pour:hover { color: var(--v2-text-2); }
[data-v2].dashboard-v3 .d3-qa-avance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}

/* ── Complétude : la pastille numérotée ────────────────────────*/
[data-v2].dashboard-v3 .dc-action-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--v2-accent);
  font-size: 12px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  flex: 0 0 26px;
}
[data-v2].dashboard-v3 .dc-action-n.dc-n-alert { background: var(--neg-soft); color: var(--neg-fg); }
[data-v2].dashboard-v3 .dc-action-go svg { transform: none !important; }
/* Le lien « + N autres » : un lien, pas un bouton encadré. */
[data-v2].dashboard-v3 .d3-more {
  all: unset;
  cursor: pointer;
  display: block;
  padding: 10px 18px 12px;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-accent);
}
[data-v2].dashboard-v3 .d3-more:hover { text-decoration: underline; }
[data-v2].dashboard-v3 .d3-more:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }

/* ── Deux héritages de styles.css à neutraliser ────────────────
   Ces règles-là sont plus anciennes que la coque v2 et gagnent par
   spécificité ou par héritage. Elles sont annulées ici plutôt que
   modifiées là-bas : styles.css sert encore les écrans non migrés. */

/* styles.css:11241 pose `text-transform: uppercase` sur .d3-fil-head ;
   le titre l'HÉRITE, sans règle propre — d'où « CETTE SEMAINE » au lieu
   de « Cette semaine ». La casse capitale est réservée aux sur-titres de
   11 px ; à 15 px elle se lit moins vite qu'une casse normale. */
[data-v2].dashboard-v3 .d3-fil-head { text-transform: none; letter-spacing: -.02em; font-size: 15px; }
[data-v2].dashboard-v3 .d3-fil-head > span { text-transform: none; }
[data-v2].dashboard-v3 .d3-fil-all { text-transform: none; letter-spacing: 0; }

/* styles.css peint le numéro du jour courant d'un dégradé ambre en
   pastille ronde. La colonne entière est déjà ambre : la pastille posait
   de l'ambre sur de l'ambre, et le chiffre y perdait son contraste. */
[data-v2].dashboard-v3 .dga-dhead.is-today .dga-dh-num {
  background: none;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--v2-accent);
}

/* ── L'agenda remplit sa rangée ────────────────────────────────
   La cellule est étirée à la hauteur de sa voisine (align-items:
   stretch), mais les sept colonnes gardaient leur hauteur de contenu :
   la carte se terminait sur 200 px de vide. */
/* `align-content: stretch` ne suffit pas : la piste implicite garde sa
   taille de contenu. On la dimensionne explicitement — au moins 150 px,
   sinon tout l'espace disponible. */
[data-v2].dashboard-v3 .dga-week-row {
  grid-auto-rows: minmax(150px, 1fr);
  align-content: stretch;
  /* `align-items: start` était posé plus haut : la piste faisait bien 354 px
     mais les colonnes restaient collées en haut, à leur hauteur de contenu. */
  align-items: stretch;
}
[data-v2].dashboard-v3 .dga-daycol   { display: flex; flex-direction: column; }
[data-v2].dashboard-v3 .dga-daycol-body { flex: 1; display: flex; flex-direction: column; }
[data-v2].dashboard-v3 .dga-daycol.is-empty .dga-wempty { flex: 1; }


/* ══════════════════════════════════════════════════════════════
   PLAN COMPLET — valeurs exactes (Industry, 10 août 2026)
   Quatre rangées, 24 px entre chacune. Trois gouttières seulement :
   8 px à l'intérieur d'un bloc, 12 px entre blocs, 24 px entre
   rangées. Aucune autre valeur.
   ══════════════════════════════════════════════════════════════ */

[data-v2].dashboard-v3 { padding: 22px 30px 86px; gap: 24px; }
/* .d3-top n'est plus une boîte : ses enfants — la bande de puces, les
   quatre KPI — deviennent des rangées de plein droit et héritent du
   gap de 24 px. Sans ça, deux systèmes d'espacement se superposaient. */
[data-v2].dashboard-v3 .d3-top { display: contents; }

/* ── RANGÉE 1 : la bande de puces ──────────────────────────────*/
[data-v2].dashboard-v3 .d3-pills { grid-template-columns: repeat(6, 1fr); gap: 8px; }
[data-v2].dashboard-v3 .d3-pill {
  height: 34px;
  padding: 0 15px 0 13px;
  gap: 8px;
  border-radius: 99px;
  font-size: 12.5px;
  color: var(--v2-text-2);
}
[data-v2].dashboard-v3 .d3-pill > i {
  width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: 50%;
  /* Un point de 6 px est un trait, pas une surface : il prend l'encre du
     ton, comme le chiffre qu'il annonce. L'ambre d'aplat y serait
     invisible sur le fond pâle de la puce. Le marqueur doit être SUR la
     ligne de la déclaration — le test lit cette ligne-là, pas le
     commentaire qui la précède. */
  background: var(--m-fg, var(--v2-text-3)); /* trait-fin */
}
[data-v2].dashboard-v3 .d3-pill strong { font-size: 12.5px; font-weight: 620; font-variant-numeric: tabular-nums; }

/* ── RANGÉE 2 : les quatre KPI ─────────────────────────────────*/
[data-v2].dashboard-v3 .d3-kpis { grid-template-columns: repeat(4, 1fr); gap: 12px; }
[data-v2].dashboard-v3 .d3-kpi {
  padding: 17px 19px 18px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
[data-v2].dashboard-v3 .d3-kpi-head {
  gap: 7px;
  font-size: 11px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-text-3);
}
[data-v2].dashboard-v3 .d3-kpi-head > svg { width: 14px; height: 14px; }
[data-v2].dashboard-v3 .d3-kpi-val {
  margin-top: 12px;
  font-size: 32px; font-weight: 680; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  /* Le séparateur de milliers disparaissait sous le letter-spacing
     négatif : c'est l'espacement des MOTS qui le rétablit, pas un autre
     caractère d'espace — trois candidats mesurés, tous identiques. */
  word-spacing: .12em;
}
[data-v2].dashboard-v3 .d3-kpi-unit { font-size: 12.5px; letter-spacing: 0; word-spacing: 0; }
[data-v2].dashboard-v3 .d3-kpi-ttc  { margin-top: 4px; font-size: 12.5px; }
[data-v2].dashboard-v3 .d3-kpi-meta {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--stroke-2);
  font-size: 12.5px;
}
/* La carte du total : la seule en dégradé, sur-titre et TTC en accent. */
[data-v2].dashboard-v3 .d3-kpi-total {
  background: linear-gradient(165deg, var(--accent-soft), var(--panel-2));
}
[data-v2].dashboard-v3 .d3-kpi-total .d3-kpi-head,
[data-v2].dashboard-v3 .d3-kpi-total .d3-kpi-ttc { color: var(--v2-accent); font-weight: 620; }
/* Conversion : la barre remplace la ligne TTC, elle ne s'y ajoute pas —
   d'où le même margin-top et le même rôle de séparation. */
[data-v2].dashboard-v3 .d3-kpi-jauge { height: 5px; margin: 12px 0 0; }
[data-v2].dashboard-v3 .d3-kpi-jauge + .d3-kpi-meta { border-top: 0; padding-top: 0; margin-top: 12px; }

/* ── RANGÉES 3 et 4 : deux colonnes, rapport 1,62 / 1 ──────────
   `1.62fr 1fr` et non `minmax(0, 1.62fr)` : le plan donne le rapport
   exact. `min-width: 0` est reporté sur les cellules, qui en ont besoin
   pour que leur contenu puisse rétrécir. */
[data-v2].dashboard-v3 .d3-rangee { grid-template-columns: 1.62fr 1fr; gap: 12px; align-items: stretch; }
[data-v2].dashboard-v3 .d3-rangee-seule { grid-template-columns: 1fr; }
[data-v2].dashboard-v3 .d3-cellule { gap: 12px; min-width: 0; }

/* ── Mon agenda ────────────────────────────────────────────────*/
[data-v2].dashboard-v3 .dga-card { overflow: hidden; }
[data-v2].dashboard-v3 .dga-head { padding: 16px 19px 13px; gap: 10px; }
[data-v2].dashboard-v3 .dga-head > svg,
[data-v2].dashboard-v3 .dga-head-title > svg { width: 16px; height: 16px; }
[data-v2].dashboard-v3 .dga-head h3 { font-size: 15px; font-weight: 620; }
[data-v2].dashboard-v3 .dga-count  { font-size: 12.5px; }
[data-v2].dashboard-v3 .dga-pastille { height: 22px; font-size: 11.5px; }
[data-v2].dashboard-v3 .dga-week-row {
  flex: 1;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 0 19px 18px;
  /* Pas de grid-auto-rows : la piste tient sa hauteur du `flex: 1`, et
     les jours la remplissent par `align-items: stretch`. Une valeur de
     piste imposée aurait figé la rangée. */
  align-items: stretch;
}
[data-v2].dashboard-v3 .dga-daycol {
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  padding: 9px 7px 10px;
  min-height: 150px;
  display: flex; flex-direction: column; gap: 8px;
  overflow: visible;
}
[data-v2].dashboard-v3 .dga-dhead { text-align: center; }
[data-v2].dashboard-v3 .dga-dh-dow { font-size: 11px; font-weight: 620; letter-spacing: .08em; }
[data-v2].dashboard-v3 .dga-dh-num { font-size: 15px; font-weight: 620; }
/* PADDING À ZÉRO. Le plan pose la marge intérieure sur la colonne
   (`9px 7px 10px`) ; le corps en portait une seconde, héritée. Les deux
   se cumulaient : 28 px sur une colonne de 97, soit 29 % de la largeur
   mangés avant le premier caractère — c'est ce qui coupait
   « Christophe » en « Christop / he », pas la règle de césure. */
[data-v2].dashboard-v3 .dga-daycol-body { gap: 8px; padding: 0; }
[data-v2].dashboard-v3 .dga-slot {
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke-2);
  border-left: 2.5px solid var(--info-fg);
  padding: 5px 7px;
}
/* ── Le créneau, repris sur la maquette ────────────────────────
   Il était posé sur `--panel-solid`, c'est-à-dire blanc sur blanc : la
   carte n'existait visuellement que par sa bordure d'un pixel, et sur la
   colonne ambre du jour elle se voyait encore moins. La maquette lui
   donne un FOND TEINTÉ — bleu pâle les jours ordinaires — plus un liseré
   franc à gauche. Le rendez-vous se lit alors comme un objet posé dans
   la journée, pas comme un rectangle vide. */
[data-v2].dashboard-v3 .dga-daycol .dga-slot {
  background: var(--info-soft);
  border: 1px solid transparent;
  border-left: 2.5px solid var(--info-fg);
  border-radius: var(--r-sm);
  padding: 5px 7px;
}
[data-v2].dashboard-v3 .dga-daycol .dga-slot:hover { border-color: var(--info-fg); border-left-color: var(--info-fg); }
/* Sur la colonne du jour, l'ambre du créneau se superpose à l'ambre de la
   colonne : il en ressort plus dense, sans qu'on ait à inventer une
   seconde valeur. */
[data-v2].dashboard-v3 .dga-daycol.is-today .dga-slot {
  background: var(--accent-soft);
  border-left-color: var(--accent-bright);
}
[data-v2].dashboard-v3 .dga-daycol.is-today .dga-slot:hover { border-color: var(--accent-bright); border-left-color: var(--accent-bright); }
/* Le rendez-vous en cours reste vert : c'est le seul état qui demande
   qu'on lève les yeux tout de suite, et il doit primer sur l'ambre. */
/* Pas de règle `.is-now` : le créneau en cours garde l'habillage de sa
   colonne (ambre aujourd'hui, bleu ailleurs) — décision du 11/08/2026. */
/* La colonne du jour porte une BORDURE ambre. Elle était transparente :
   le bloc ambre flottait sans contour pendant que les six autres
   colonnes en avaient un, et la semaine perdait son alignement. */
[data-v2].dashboard-v3 .dga-daycol.is-today {
  background: var(--accent-soft);
  border-color: var(--accent-bright);
}
[data-v2].dashboard-v3 .dga-slot-time { font-size: 11px; font-weight: 620; color: var(--info-fg); }
[data-v2].dashboard-v3 .dga-daycol.is-today .dga-slot-time { color: var(--v2-accent); }
/* Deux lignes au plus : au-delà, un intitulé long repoussait les
   rendez-vous suivants hors de la colonne. */
[data-v2].dashboard-v3 .dga-slot-title {
  font-size: 11px;
  color: var(--v2-text);
  line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
}
[data-v2].dashboard-v3 .dga-wempty {
  margin: auto 0;
  min-height: 0;
  font-size: 11px;
  font-style: italic;
}

/* ── Cette semaine (l'historique) ──────────────────────────────*/
[data-v2].dashboard-v3 .d3-fil-head { padding: 16px 18px 12px; gap: 10px; }
[data-v2].dashboard-v3 .d3-fil-head > svg { width: 16px; height: 16px; flex: 0 0 16px; }
[data-v2].dashboard-v3 .d3-fil-head > span { font-size: 15px; font-weight: 620; }
[data-v2].dashboard-v3 .fil-item {
  gap: 12px;
  padding: 9px 10px;
  margin: 0 8px;
  border-radius: var(--r-sm);
}
[data-v2].dashboard-v3 .d3-fil > .fil-item:last-child { margin-bottom: 10px; }
/* Le carré reprend son ton : c'est le seul repère du TYPE d'événement,
   les icônes se ressemblent trop à 13 px pour le porter seules. */
[data-v2].dashboard-v3 .fil-dot {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: var(--r-xs);
  margin-top: 0;
}
[data-v2].dashboard-v3 .fil-dot svg { width: 13px; height: 13px; }
[data-v2].dashboard-v3 .fil-txt  { font-size: 12.5px; }
[data-v2].dashboard-v3 .fil-txt strong { font-weight: 620; }
[data-v2].dashboard-v3 .fil-det  { color: var(--v2-text-2); }
[data-v2].dashboard-v3 .fil-meta { margin-top: 2px; font-size: 11px; color: var(--v2-text-3); }
/* La note qui explique qu'on a élargi la fenêtre au-delà des 7 jours. */
[data-v2].dashboard-v3 .fil-note {
  margin: 0 18px 6px;
  font-size: 11.5px;
  color: var(--v2-text-3);
}
/* L'état vide occupe la carte : c'est ce qui garantit que la colonne
   droite de la rangée 3 garde sa place même sans une seule entrée. */
[data-v2].dashboard-v3 .fil-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 1;
  min-height: 160px;
  padding: 20px 24px 26px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v2-text-3);
}
[data-v2].dashboard-v3 .fil-vide svg { width: 18px; height: 18px; opacity: .5; }
[data-v2].dashboard-v3 .d3-fil { display: flex; flex-direction: column; }

/* ── Mes tâches ────────────────────────────────────────────────*/
[data-v2].dashboard-v3 .d3-card-tasks { flex: 1; padding: 16px 19px 18px; }
[data-v2].dashboard-v3 .d3-card-tasks .d3-card-head { padding: 0; gap: 9px; }
[data-v2].dashboard-v3 .d3-card-head > svg { width: 16px; height: 16px; }
[data-v2].dashboard-v3 .d3-card-head h3 { font-size: 15px; font-weight: 620; }
[data-v2].dashboard-v3 .d3-qa { padding: 0; }
/* Une pilule, pas un rectangle : même forme que les puces de la rangée 1,
   et la ligne d'ajout se distingue des tâches qu'elle produit. */
[data-v2].dashboard-v3 .d3-qa-ligne {
  height: auto;
  padding: 9px 15px;
  margin: 14px 0;
  border-radius: 99px;
  background: var(--inset);
  border: 1px solid var(--stroke-2);
}
[data-v2].dashboard-v3 .d3-card-tasks-list { display: flex; flex-direction: column; gap: 4px; }
[data-v2].dashboard-v3 .d3-todo { padding: 4px 0; }
[data-v2].dashboard-v3 .d3-todo-check { width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; }
[data-v2].dashboard-v3 .d3-todo-text  { font-size: 12.5px; }

/* ── Pipeline commercial ───────────────────────────────────────*/
[data-v2].dashboard-v3 #section-pipeline { padding: 16px 19px 20px; }
[data-v2].dashboard-v3 #section-pipeline .d3-card-head { padding: 0; gap: 9px; }
[data-v2].dashboard-v3 .fun { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding: 0; }
[data-v2].dashboard-v3 .fun-num {
  width: 17px; height: 17px; flex: 0 0 17px;
  border-radius: var(--r-xs, 9px);
  display: grid; place-items: center;
  font-size: 10.5px;
}
[data-v2].dashboard-v3 .fun-lbl { font-size: 12.5px; }
[data-v2].dashboard-v3 .fun-n   { font-size: 13.5px; font-weight: 620; }
[data-v2].dashboard-v3 .fun-piste { height: 7px; }
[data-v2].dashboard-v3 .fun-l2  { margin-top: 7px; gap: 8px; }
[data-v2].dashboard-v3 .fun-taux { font-size: 11px; font-weight: 620; }

/* ── À relancer ────────────────────────────────────────────────*/
[data-v2].dashboard-v3 .d3-card-relances .d3-card-head { padding: 16px 18px 11px; gap: 9px; }
[data-v2].dashboard-v3 .d3-card-relances .d3-card-head > svg { color: var(--v2-accent); }
[data-v2].dashboard-v3 .d3-card-relances .d3-count {
  background: var(--accent-soft); color: var(--v2-accent); border: 0;
}
[data-v2].dashboard-v3 .d3-card-relances .d3-relance-item { padding: 9px 10px; margin: 0 8px; border-radius: var(--r-sm); }
[data-v2].dashboard-v3 .d3-card-relances .d3-logo { width: 26px; height: 26px; flex: 0 0 26px; border-radius: var(--r-xs); }
[data-v2].dashboard-v3 .d3-card-relances .d3-logo svg { width: 13px; height: 13px; }
[data-v2].dashboard-v3 .d3-card-relances .d3-name { font-size: 12.5px; }
[data-v2].dashboard-v3 .d3-card-relances .d3-sub  { font-size: 11px; }
[data-v2].dashboard-v3 .d3-card-relances .d3-more { padding: 4px 18px 12px; }

/* ── Complétude des données ────────────────────────────────────*/
[data-v2].dashboard-v3 .d3-card-completude { padding: 16px 18px 18px; }
[data-v2].dashboard-v3 .d3-card-completude .d3-card-head { padding: 0; gap: 9px; }
[data-v2].dashboard-v3 .dc-mods { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 0; }
/* Trois colonnes fixes : libellé, barre, pourcentage. Les cinq lignes
   s'alignent verticalement, ce qu'un simple flex ne garantissait pas. */
[data-v2].dashboard-v3 .dc-mod { display: grid; grid-template-columns: 84px 1fr 32px; align-items: center; gap: 10px; padding: 0; }
[data-v2].dashboard-v3 .dc-mod-top { display: contents; }
[data-v2].dashboard-v3 .dc-mod-lbl { font-size: 12.5px; color: var(--v2-text-2); text-align: left; }
[data-v2].dashboard-v3 .dc-mod .d3-bar { height: 6px; grid-column: 2; grid-row: 1; }
[data-v2].dashboard-v3 .dc-mod-pct { font-size: 12.5px; font-weight: 620; text-align: right; grid-column: 3; grid-row: 1; }
[data-v2].dashboard-v3 .d3-card-completude .d3-card-subhead {
  margin-top: 15px; padding: 13px 0 0;
  border-top: 1px solid var(--stroke-2);
  font-size: 11px; font-weight: 620; letter-spacing: .08em;
}
[data-v2].dashboard-v3 .dc-actions { padding: 0; }
[data-v2].dashboard-v3 .dc-action  { padding: 7px 0; gap: 10px; }
[data-v2].dashboard-v3 .dc-action-txt { font-size: 12.5px; }
[data-v2].dashboard-v3 .dc-action-go svg { width: 14px; height: 14px; }
/* Le chevron pointe À DROITE : il annonce un départ vers un autre écran.
   La rotation de -90° posée plus haut le faisait pointer vers le haut,
   ce qui ne veut rien dire — ni dépliement, ni navigation. */
[data-v2].dashboard-v3 .dc-action-go svg { transform: rotate(0deg); }

/* ── Qui s'étire dans une colonne ──────────────────────────────
   La règle « le dernier enfant absorbe l'espace » entrait en conflit
   avec le plan, qui désigne nommément la carte principale de chaque
   colonne : Mes tâches à gauche, Outillage à droite. Le pipeline, placé
   en dernier, s'étirait donc sur 300 px de vide. */
[data-v2].dashboard-v3 .d3-cellule > *:last-child { flex: 0 0 auto; }
/* Les cartes PRINCIPALES de chaque colonne remplissent leur cellule.
   Sans ça, `align-items: stretch` étirait la cellule mais pas la carte
   qu'elle contient : rangée 3, l'agenda s'arrêtait à 243 px pendant que
   le fil en faisait 310, et les deux ne finissaient pas au même endroit —
   l'escalier que la règle 1 du plan cherche justement à éviter.
   Rangée 3 : chaque cellule n'a qu'une carte, donc chacune est la
   principale. Rangée 4 : « Mes tâches » à gauche, « Outillage » à droite. */
/* Qualifiées par `.d3-cellule >` : la règle « le dernier enfant ne grandit
   pas » juste au-dessus pèse (0,4,0) et l'emportait sur un simple
   `.dashboard-v3 .dga-card` (0,3,0), quel que soit l'ordre. */
/* .dga-card retirée de ce groupe (25/08/2026) : l'agenda est devenu une
   liste compacte — l'étirer pleine cellule recréait le grand vide vitré
   que la refonte supprime. */
[data-v2].dashboard-v3 .d3-cellule > .d3-fil,
[data-v2].dashboard-v3 .d3-cellule > .d3-card-tasks,
[data-v2].dashboard-v3 .d3-cellule > .d3-card-outillage { flex: 1 1 auto; }

/* ── Toutes les barres de l'entonnoir sont ambre ───────────────
   Une marche qui perd plus de la moitié des dossiers passait sa barre au
   rouge. La maquette les veut toutes ambre — et l'alerte n'est pas
   perdue : le POURCENTAGE reste rouge, avec la pastille « N perdus »
   juste à côté. Deux signaux au lieu de trois, au même endroit. */
[data-v2].dashboard-v3 .fun-etape.casse .fun-remplissage { --m-fill: var(--accent-bright); }

/* ── Outillage ─────────────────────────────────────────────────*/
[data-v2].dashboard-v3 .d3-card-outillage { flex: 1; padding: 16px 18px 18px; }
[data-v2].dashboard-v3 .d3-card-outillage .d3-card-head { padding: 0; gap: 9px; }
[data-v2].dashboard-v3 .d3-outil-global { margin-top: 13px; padding: 0; }
[data-v2].dashboard-v3 .d3-outil-global-head { font-size: 12.5px; margin-bottom: 8px; }
/* 19 px et non 32 : un seul chiffre dominant par carte, et le dominant
   de cet écran est celui des KPI. */
[data-v2].dashboard-v3 .d3-outil-global-head strong { font-size: 19px; font-weight: 680; letter-spacing: -.03em; }
[data-v2].dashboard-v3 .d3-outil-global .d3-bar { height: 6px; }
[data-v2].dashboard-v3 .d3-outil-pct { font-weight: 620; color: var(--pos-fg); }
[data-v2].dashboard-v3 .d3-outil-stats { margin-top: 14px; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; }
[data-v2].dashboard-v3 .d3-outil-n { font-size: 19px; font-weight: 680; }
[data-v2].dashboard-v3 .d3-card-outillage .d3-item {
  margin-top: 0; padding: 9px 0;
}
[data-v2].dashboard-v3 .d3-card-outillage .d3-item:first-of-type {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--stroke-2);
}

/* ══════════════════════════════════════════════════════════════
   LE TABLEAU DE BORD EST LA PAGE, PAS UNE AFFICHE POSÉE DESSUS
   (Joris, 11/08/2026 : « on dirait un pop-up qui se superpose »).
   Deux causes mesurées :
   1. styles.css:9971 peint des halos radiaux SUR le bloc lui-même —
      depuis le passage au fond neutre, ce rectangle éclairé de
      l'intérieur se détachait du fond plat.
   2. Le conteneur de page (20×30) et le tableau de bord (22×30)
      cumulaient leurs marges internes : un double cadre, l'effet
      fenêtre. Une seule marge, celle du tableau de bord.
   ══════════════════════════════════════════════════════════════ */
[data-v2].dashboard-v3 { background-image: none; }
body.v2-coque[data-vue="dashboard"] #kanban-container { padding: 0; }

@media (max-width: 1180px) {

[data-v2].dashboard-v3 .dga-week-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  [data-v2].dashboard-v3 .d3-pills { grid-template-columns: repeat(2, 1fr); }
  [data-v2].dashboard-v3 .d3-kpis { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   L'ORDRE SUR TÉLÉPHONE

   Une décision antérieure, prise dans styles.css : le matin on ouvre le
   CRM pour savoir quoi faire, pas pour relire son chiffre d'affaires —
   qui ne bouge pas d'un jour à l'autre. « Mes tâches » passait donc juste
   après le message d'accueil, et les KPI suivaient.

   Ces règles-là ciblaient `.dashboard-v3 > .d3-daily`, parce que le bloc
   quotidien contenait alors les tâches. En sortant l'agenda du côte-à-côte
   et en descendant la carte des tâches dans `.d3-col-main`, j'ai vidé leur
   cible : sur téléphone, l'agenda remontait à leur place et les tâches
   repartaient tout en bas. La décision est rétablie ici, sur la nouvelle
   structure.

   `display: contents` aplatit les conteneurs de mise en page pour que
   leurs cartes deviennent des frères ordonnables. Il faut alors un rang
   par défaut élevé : sans lui, tout ce qui n'est pas nommé prend order 0
   et passe devant.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-v2].dashboard-v3 { display: flex; flex-direction: column; gap: 12px; }
  [data-v2].dashboard-v3 > .d3-top,
  [data-v2].dashboard-v3 > .d3-grid,
  [data-v2].dashboard-v3 .d3-col-main,
  [data-v2].dashboard-v3 .d3-col-side { display: contents; }

  [data-v2].dashboard-v3 > *,
  [data-v2].dashboard-v3 .d3-col-main > *,
  [data-v2].dashboard-v3 .d3-col-side > * { order: 7; }

  [data-v2].dashboard-v3 .gs-bandeau    { order: 1; }
  [data-v2].dashboard-v3 .d3-hero       { order: 2; }
  [data-v2].dashboard-v3 .d3-card-tasks { order: 3; }
  [data-v2].dashboard-v3 .d3-pills      { order: 4; }
  [data-v2].dashboard-v3 .d3-kpis       { order: 5; }
  [data-v2].dashboard-v3 .d3-daily      { order: 6; }
}
@media (prefers-reduced-motion: reduce) {
  [data-v2].dashboard-v3 .d3-item,
  [data-v2].dashboard-v3 .d3-pill,
  [data-v2].dashboard-v3 .fil-item,
  [data-v2].dashboard-v3 .d3-bar-fill,
  [data-v2].dashboard-v3 .fun-remplissage,
  [data-v2].dashboard-v3 .dc-action,
  [data-v2].dashboard-v3 .d3-todo-check { transition: none; }
}