/* ============================================================
   v4/dashboard.css — TABLEAU DE BORD (module Commercial, §2)

   Relevé sur la maquette Claude Design, pas interprété. Deux sources,
   dans cet ordre (hiérarchie de vérité du MODULE-COMMERCIAL.md) :
     1. le style inline de scratchpad/maquette-ecrans/01-dashboard.clean.html
     2. l'atlas de mesures atlas-maq-01-dashboard.json.html (x,y,w,h,fs,fw,c,bg,br,p,g)
   Chaque bloc est précédé d'un commentaire « MESURE » qui cite le
   relevé. Là où le texte de la §2 et la maquette divergent, la maquette
   tranche — les écarts sont signalés en toutes lettres (« ÉCART »).

   LE SQUELETTE VIENT DE v4/commun.css : .x4-ecran + .x4-ecran-aere
   posent padding 22px 30px 86px, gap 24px, min-width 1180px,
   line-height 1.2, et annulent le padding de #kanban-container. Rien
   de tout ça n'est réécrit ici (§7 n° 2 : deux définitions de la même
   chose divergent toujours).

   JETONS : --text/--text-2/--text-3/--accent/--bg portent le préfixe
   --v2- dans le CRM (tokens-v2.css) ; les autres non. Toujours avec
   repli : var(--panel-solid, #fff).
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   0. LE CADRE
   ══════════════════════════════════════════════════════════
   MESURE (01-dashboard.clean.html, dc-tpl 210, verbatim) :
     padding: 22px 30px 86px; display: flex; flex-direction: column;
     gap: 24px; min-width: 1180px;
   → c'est .x4-ecran.x4-ecran-aere de commun.css. Ici on ne pose que
   ce qui est PROPRE au tableau de bord.

   --x4-icone : la taille des SVG. styles.css:416 impose 15px à toute
   .btn-icon ; commun.css § 6 rend la main à .x4-icone via cette
   variable. On la pose ici en 16px (la taille des icônes de titre de
   la maquette) et chaque bloc la redéfinit — jamais d'icône qui
   retombe sur une valeur par défaut sans qu'on l'ait voulu.        */

.x4-dashboard {
  --x4-icone: 16px;
  -webkit-font-smoothing: antialiased;

  /* §1.5 : « font-variant-numeric: tabular-nums sur TOUT nombre, sans
     exception ». La maquette la pose chiffre par chiffre et en oublie
     — relevé au banc : seize nœuds portant un nombre s'en passaient
     (« dans 6 h 48 », « Historique (38) », « dans 5 j », « + 40 autres »,
     « aujourd'hui 23:30 »…). Posée ici, elle est héritée par tout
     l'écran : plus aucune exception possible. .x4-num (commun.css)
     reste sur les nombres pour dire l'intention dans le balisage. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* MESURE : les SVG de la maquette portent stroke-width 1.7 (dc-tpl 219,
   258, 293…) ; icon() de icons.js émet 2. */
.x4-dashboard .icon { stroke-width: 1.7; }

/* Les boutons repartent de zéro : chaque classe pose son style. Un
   bouton n'existe ici que s'il fait quelque chose (§1.6.2).

   LA REMISE À ZÉRO EST EN :where(), DONC DE SPÉCIFICITÉ NULLE. Écrite
   « .x4-dashboard button », elle pesait (0,1,1) et passait DEVANT les
   classes de composant en (0,1,0) : mesuré au banc, la puce recevait
   padding 0 au lieu de 0 15px 0 13px et font-size 16px au lieu de
   12,5px, et les six autres blocs bâtis sur un <button> (créneau,
   ligne de fil, ligne à relancer, ligne de complétude, pastille de
   RDV, pastille de fiche) perdaient tous leur padding. Une remise à
   zéro doit toujours être le perdant par défaut.
   `letter-spacing: inherit` est nécessaire : les contrôles de
   formulaire ne l'héritent pas tout seuls, et l'écran est en -.01em. */
:where(.x4-dashboard) :where(button, input, select) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
}
:where(.x4-dashboard) :where(button) { cursor: pointer; }

/* MESURE (atlas 142, 226, 304, 487) : tous les liens de l'écran sont
   en rgb(125,100,13) = #7d640d = --accent, 12,5px / 550. C'est l'ENCRE
   ambre (§1.6.6), pas l'aplat. */
.x4-dashboard-lien {
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-accent, #7d640d);
  white-space: nowrap;
  flex-shrink: 0;
}
.x4-dashboard-lien:hover { text-decoration: underline; }

/* La rangée d'un bloc-liste (« om-row » de la maquette) réagit au
   survol : le nom de classe existait, sa feuille non — le survol est
   posé ici, une seule fois. */
.x4-dashboard-ligne:hover { background: var(--inset, rgba(0, 0, 0, .035)); }

/* ══════════════════════════════════════════════════════════
   1. RANGÉE 1 — LA BANDE DE CINQ PUCES (§2.1)
   ══════════════════════════════════════════════════════════
   MESURE (dc-tpl 211 → 215, verbatim) :
     bande   display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
     puce    display: flex; align-items: center; gap: 8px; height: 34px;
             min-width: 0px; padding: 0px 15px 0px 13px;
             border-radius: 99px; background: var(--panel-2);
             border: 1px solid var(--stroke-2); font-size: 12.5px;
             color: var(--v2-text-2, #55595f); cursor: pointer;
     point   width: 6px; height: 6px; border-radius: 99px;
             background: var(--track); flex-shrink: 0;
     nombre  font-size: 12.5px; font-weight: 620; color: var(--v2-text-2, #55595f);
             font-variant-numeric: tabular-nums;
   MESURE (atlas 81-101) : bande y 95 h 34 sur 1302 px ; cinq puces de
   254 px à x 258 · 520 · 782 · 1044 · 1306 → 520−258−254 = 8 px de
   gouttière, et 5×254 + 4×8 = 1302. Le nombre commence à +28 px du
   bord (13 padding + 6 point + 8 gouttière + 1 bordure).

   LA PUCE ACTIVE (celle qui a du contenu) : la maquette calcule
   `live = n > 0 && ton !== "neutral"` puis pose
     fond    ton-soft au lieu de --panel-2
     bordure transparente au lieu de --stroke-2
     point   ton-fg au lieu de --track
   et, indépendamment, `nombre = n > 0 ? --text : --text-2`.

   ÉCART SIGNALÉ. La §2.1 écrit « lavis ambre, point plein » pour la
   puce active. La maquette donne un ton FIXE à chaque puce —
   chip(0,"en retard","neg") · chip(0,"aujourd'hui","accent") ·
   chip(0,"cette semaine","neutral") · chip(0,"demandes","neutral") ·
   chip(1,"mes tâches","info") — et la cinquième, la seule qui ait du
   contenu, ressort donc en BLEU (atlas 98 : bg rgba(53,104,196,.11) =
   --info-soft ; capture C1 : la pastille est bleue). Le texte décrit
   le cas où c'est « aujourd'hui » qui s'allume. On suit la maquette
   (hiérarchie de vérité : maquette > capture > texte) : le ton est
   attaché au SENS de la puce, l'ambre reste sur « aujourd'hui ».
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-puces {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.x4-dashboard-puce {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-width: 0;
  padding: 0 15px 0 13px;
  border-radius: 99px;
  background: var(--panel-2, rgba(255, 255, 255, .42));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  transition: transform .14s, box-shadow .14s;
}
.x4-dashboard-puce:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
}

.x4-dashboard-puce-point {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--track, rgba(20, 20, 25, .07));
  flex-shrink: 0;
}

.x4-dashboard-puce-n {
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text-2, #55595f);
  flex-shrink: 0;
}
/* Un compte non nul passe le nombre en encre pleine — c'est la seule
   chose que la maquette change quand la puce est « neutral ». */
.x4-dashboard-puce[data-plein] .x4-dashboard-puce-n { color: var(--v2-text, #16171a); }

/* Le libellé est une phrase courte ; il se tronque plutôt que de
   pousser sa puce hors de sa colonne (§1.4). */
.x4-dashboard-puce-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Les quatre tons vivants. L'ambre est ici un LAVIS de fond
   (--accent-soft) avec le point en ENCRE (--v2-accent) : jamais
   d'aplat #f5d547 sur du texte (§1.6.6, §7 n° 8). */
.x4-dashboard-puce[data-vif="neg"]    { background: var(--neg-soft, rgba(193, 75, 64, .11)); border-color: transparent; }
.x4-dashboard-puce[data-vif="neg"]    .x4-dashboard-puce-point { background: var(--neg-fg, #a74137); }
.x4-dashboard-puce[data-vif="accent"] { background: var(--accent-soft, rgba(245, 213, 71, .26)); border-color: transparent; }
.x4-dashboard-puce[data-vif="accent"] .x4-dashboard-puce-point { background: var(--v2-accent, #7d640d); }
.x4-dashboard-puce[data-vif="info"]   { background: var(--info-soft, rgba(53, 104, 196, .11)); border-color: transparent; }
.x4-dashboard-puce[data-vif="info"]   .x4-dashboard-puce-point { background: var(--info-fg, #3160b4); }
.x4-dashboard-puce[data-vif="pos"]    { background: var(--pos, rgba(23, 128, 81, .15)); border-color: transparent; }
.x4-dashboard-puce[data-vif="pos"]    .x4-dashboard-puce-point { background: var(--pos-fg, #136d45); }

/* ══════════════════════════════════════════════════════════
   2. RANGÉE 2 — LES QUATRE CARTES DE CA (§2.2)
   ══════════════════════════════════════════════════════════
   MESURE (dc-tpl 216 → 254, verbatim) :
     rangée   display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
     carte    background: var(--panel); backdrop-filter: blur(20px);
              border: 1px solid var(--stroke); border-radius: var(--r-lg);
              padding: 17px 19px 18px; box-shadow: var(--shadow);
     sur-titre display: flex; align-items: center; gap: 8px;
              font-size: 11px; font-weight: 620; letter-spacing: 0.08em;
              text-transform: uppercase; color: var(--v2-text-3, #6b6f76);   (svg 14px)
     chiffre  margin-top: 12px; display: flex; align-items: baseline; gap: 8px;
              (carte Conversion : gap 4px
     valeur   font-size: 32px; font-weight: 680; letter-spacing: -0.04em;
              font-variant-numeric: tabular-nums;
     unité    font-size: 12.5px; color: var(--v2-text-3, #6b6f76);
              (le « % » de Conversion : 15px / 550 / var(--v2-text-2, #55595f)
     TTC      margin-top: 4px; font-size: 12.5px; color: var(--v2-text-2, #55595f);
     filet+ctx margin-top: 12px; padding-top: 11px;
              border-top: 1px solid var(--stroke-2);
              font-size: 12.5px; color: var(--v2-text-3, #6b6f76);
   MESURE (atlas 102-133) : rangée y 153 h 158 ; quatre cartes de 317 px
   à x 258 · 587 · 915 · 1244 (12 px de gouttière) ; contenu à x 278 =
   258 + 1 bordure + 19 padding ; sur-titre y 171 (= 153 + 1 + 17) h 14 ;
   chiffre y 197 h 38 ; TTC y 239 h 15 ; ligne de contexte y 266 h 27.

   « TOTAL PRÉVU » EST LA SEULE CARTE TEINTÉE (dc-tpl 236) :
     background: linear-gradient(165deg, var(--accent-soft), var(--panel-2));
     sur-titre color: var(--accent-bright, #f5d547) · TTC color: var(--accent-bright, #f5d547), 550
   C'est un LAVIS, jamais un aplat (§7 n° 8) : en ambre plein elle
   entrerait en concurrence avec le bouton primaire de l'en-tête.
   PAS de barre de progression dessus — elle était pleine en permanence.

   Le nombre de colonnes est PILOTÉ PAR --x4-cartes, posé par le JS
   d'après le nombre de cartes réellement émises : un visiteur qui n'a
   pas le droit de voir les montants (siMontantsAutorises) n'a plus que
   la carte Conversion, et repeat(4,1fr) lui laisserait trois quarts de
   rangée vides.
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-ca {
  display: grid;
  /* minmax(0, …) : sans lui, une piste 1fr refuse de descendre sous la
     largeur de son contenu et la 4e carte sort de l'écran (08/09/2026). */
  grid-template-columns: repeat(var(--x4-cartes, 4), minmax(0, 1fr));
  gap: 12px;
}

.x4-dashboard-carte {
  background: var(--panel, rgba(255, 255, 255, .66));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-lg, 26px);
  padding: 17px 19px 18px;
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, .03), 0 10px 30px -12px rgba(0, 0, 0, .14));
}

.x4-dashboard-carte-tete {
  --x4-icone: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3, #6b6f76);
}

.x4-dashboard-carte-chiffre {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.x4-dashboard-carte-val {
  font-size: 32px;
  font-weight: 680;
  letter-spacing: -.04em;
  /* §7 n° 12 : « 114 218 € » ne se casse pas sur deux lignes. */
  white-space: nowrap;
}

.x4-dashboard-carte-unite {
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
  white-space: nowrap;
}

/* §7 n° 12 : « 112 321 € TTC » ne se coupe pas. L'espace insécable de
   x4Euros() tient le montant à son euro ; c'est le blanc ordinaire
   devant « TTC » qui restait cassable — mesuré au banc à white-space
   normal. La ligne est un compteur, pas une phrase : nowrap. */
.x4-dashboard-carte-ttc {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  white-space: nowrap;
}

.x4-dashboard-carte-ctx {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
}

/* La carte « Total prévu » — le lavis, et lui seul. */
.x4-dashboard-carte[data-total] {
  background: linear-gradient(165deg, var(--accent-soft, rgba(245, 213, 71, .26)), var(--panel-2, rgba(255, 255, 255, .42)));
}
.x4-dashboard-carte[data-total] .x4-dashboard-carte-tete { color: var(--v2-accent, #7d640d); }
.x4-dashboard-carte[data-total] .x4-dashboard-carte-ttc  { color: var(--v2-accent, #7d640d); font-weight: 550; }

/* La carte Conversion : gouttière de 4px sous le « % », et sa barre. */
.x4-dashboard-carte[data-conv] .x4-dashboard-carte-chiffre { gap: 4px; }
.x4-dashboard-carte-pc {
  font-size: 15px;
  font-weight: 550;
  color: var(--v2-text-2, #55595f);
}
/* MESURE (dc-tpl 252-253) : margin-top 10px; height 5px; radius 99px;
   background var(--track) ; remplissage var(--accent-bright). L'aplat
   ambre est ici à sa place : c'est une surface, pas une encre. */
.x4-dashboard-carte-jauge {
  margin-top: 10px;
  height: 5px;
  border-radius: 99px;
  background: var(--track, rgba(20, 20, 25, .07));
  overflow: hidden;
}
.x4-dashboard-carte-jauge > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent-bright, #f5d547);
}

/* ══════════════════════════════════════════════════════════
   3. LES DEUX GRILLES DE RANGÉE (§2.3, §2.4)
   ══════════════════════════════════════════════════════════
   MESURE (dc-tpl 255 et 308, verbatim) :
     rangée 3  display: grid; grid-template-columns: 1.62fr 1fr;
               gap: 12px; align-items: stretch;
     rangée 4  … même grille, align-items: start;
     colonne   display: flex; flex-direction: column; gap: 12px;
   MESURE (atlas 134-135, 222) : rangée 3 y 335 h 407 ; colonne gauche
   798 px, colonne droite 492 px à x 1068 → 798 + 12 + 492 = 1302, et
   798/492 = 1,622.

   ERREUR N° 9 À NE PAS REFAIRE : pas de flex: 1 sur la dernière carte
   d'une colonne — elle s'étirerait à vide (544 px dont la moitié
   creuse). `align-items: start` sur la rangée 4 et une colonne en flex
   sans grow : le mou reste EN BAS de la colonne, pas dans la carte.
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-r3,
.x4-dashboard-r4 {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 12px;
}
.x4-dashboard-r3 { align-items: stretch; }
.x4-dashboard-r4 { align-items: start; }

.x4-dashboard-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* La surface commune des six blocs de ces deux rangées.
   MESURE (dc-tpl 256, 291, 310, 328, 351, 368) :
     background: var(--panel); backdrop-filter: blur(20px);
     border: 1px solid var(--stroke); border-radius: var(--r-lg);
     box-shadow: var(--shadow);
   Le padding, lui, diffère d'un bloc à l'autre (relevé bloc par bloc
   plus bas) : les blocs qui portent une liste à bord perdu passent en
   overflow: hidden et paddent leur corps, pas leur cadre. */
.x4-dashboard-bloc {
  background: var(--panel, rgba(255, 255, 255, .66));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, .03), 0 10px 30px -12px rgba(0, 0, 0, .14));
  min-width: 0;
}

/* MESURE (dc-tpl 292, 311, 329, 352, 369) : le titre d'un bloc est en
   15px / 620 / -0.02em, précédé d'une icône de 16px au trait --text-2
   (--accent pour « À relancer », dc-tpl 353). */
.x4-dashboard-tete {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.x4-dashboard-tete h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -.02em;
  color: var(--v2-text, #16171a);
  white-space: nowrap;
  flex-shrink: 0;
}
.x4-dashboard-tete .icon { color: var(--v2-text-2, #55595f); }
.x4-dashboard-tete .x4-dashboard-lien { margin-left: auto; }

/* ══════════════════════════════════════════════════════════
   4. RANGÉE 3, GAUCHE — MON AGENDA (§2.3)
   ══════════════════════════════════════════════════════════
   MESURE (dc-tpl 256 → 288, verbatim) :
     carte    display: flex; flex-direction: column; … overflow: hidden;
     en-tête  display: flex; align-items: center; gap: 12px;
              padding: 16px 19px 13px;
     pastille display: inline-flex; align-items: center; gap: 8px;
              height: 22px; padding: 0px 10px; border-radius: 99px;
              font-size: 11px; font-weight: 550; color: var(--accent-bright, #f5d547);
              background: var(--accent-soft); white-space: nowrap;
              (point : 5px, background: currentcolor
     reste    font-size: 12px; color: var(--v2-text-3, #6b6f76); min-width: 0px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     grille   flex: 1 1 0%; display: grid;
              grid-template-columns: 1.5fr repeat(3, 1fr); gap: 8px;
              padding: 0px 19px 18px; align-content: stretch;
   MESURE (atlas 136-221) : en-tête h 51 ; colonne du jour 245 px à
   x 278, les trois autres 163 px à x 531 · 702 · 873 → 245 = 1,5 × 163,
   gouttière 8 px.
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-agenda {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.x4-dashboard-agenda-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 19px 13px;
}

/* ── AUJOURD'HUI : la colonne 1,5× plus large, en lavis ambre ──
   MESURE (dc-tpl 267) : border-radius: var(--r-md);
   border: 1px solid var(--accent-bright);
   background: linear-gradient(165deg, var(--accent-soft), var(--panel-2));
   padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 9px; */
.x4-dashboard-jour-auj {
  border-radius: var(--r-md, 18px);
  border: 1px solid var(--accent-bright, #f5d547);
  background: linear-gradient(165deg, var(--accent-soft, rgba(245, 213, 71, .26)), var(--panel-2, rgba(255, 255, 255, .42)));
  padding: 11px 12px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* MESURE (dc-tpl 268-271) : ligne de date en baseline, gap 7px ;
   jour 11px/680/.08em, quantième 21px/680/-.03em line-height 1,
   mois 11px/620/.06em opacity .7 — les trois en var(--accent-bright, #f5d547). */
.x4-dashboard-jour-date {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.x4-dashboard-jour-dow {
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .08em;
  color: var(--v2-accent, #7d640d);
}
.x4-dashboard-jour-num {
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--v2-accent, #7d640d);
}
.x4-dashboard-jour-mois {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .06em;
  color: var(--v2-accent, #7d640d);
  opacity: .7;
}

/* MESURE (dc-tpl 273) : border-radius: var(--r-sm);
   background: var(--panel-solid); border-left: 3px solid <teinte>;
   padding: 8px 10px; min-width: 0px.
   --panel-solid, pas --panel-2 : le créneau est posé SUR le lavis
   ambre de la colonne, et un blanc translucide s'y composerait à
   néant (§1.3, §7 n° 6). */
.x4-dashboard-creneau {
  display: block;
  width: 100%;
  border-radius: var(--r-sm, 12px);
  background: var(--panel-solid, #fff);
  border-left: 3px solid var(--info-fg, #3160b4);
  padding: 8px 10px;
  min-width: 0;
}
/* Un créneau passé : filet et heure en --text-3, nom éteint, mention
   « passé ». MESURE (dc-tpl 273, premier créneau : bar var(--v2-text-3, #6b6f76),
   ink var(--v2-text-3, #6b6f76), deco "none". Le texte de la §2.3 dit « barré » ;
   la maquette barre le créneau passé des JOURS COMPACTS, pas celui
   d'aujourd'hui — qui porte, lui, la mention « passé ». On garde les
   deux signaux là où la maquette les met. */
.x4-dashboard-creneau[data-passe] { border-left-color: var(--v2-text-3, #6b6f76); }
.x4-dashboard-creneau[data-passe] .x4-dashboard-creneau-h,
.x4-dashboard-creneau[data-passe] .x4-dashboard-creneau-qui { color: var(--v2-text-3, #6b6f76); }

/* ── LES TROIS JOURS SUIVANTS : compacts ──
   MESURE (dc-tpl 281) : border-radius: var(--r-md);
   border: 1px solid var(--stroke-2); background: var(--panel-2);
   padding: 9px 7px 10px; min-height: 150px; overflow: hidden;
   display: flex; flex-direction: column; gap: 8px; */
.x4-dashboard-jour {
  border-radius: var(--r-md, 18px);
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  background: var(--panel-2, rgba(255, 255, 255, .42));
  padding: 9px 7px 10px;
  min-height: 150px;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.x4-dashboard-jour-tete { text-align: center; }
.x4-dashboard-jour-tete b {
  display: block;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  color: var(--v2-text-3, #6b6f76);
}
.x4-dashboard-jour-tete span {
  display: block;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -.02em;
  color: var(--v2-text, #16171a);
}

/* MESURE (dc-tpl 286) : border-radius: var(--r-sm);
   background: var(--info-soft) | var(--inset);
   border-left: 2.5px solid var(--info-fg) | var(--v2-text-3, #6b6f76);
   padding: 5px.
   Titre : 11.5px / line-height 1.18 / 550, tronqué à TROIS lignes
   (-webkit-line-clamp: 3) — c'est ce que dit la §2.3. */
.x4-dashboard-mini {
  display: block;
  width: 100%;
  border-radius: var(--r-sm, 12px);
  background: var(--info-soft, rgba(53, 104, 196, .11));
  border-left: 2.5px solid var(--info-fg, #3160b4);
  padding: 5px;
  min-width: 0;
}
.x4-dashboard-mini-h {
  display: block;
  font-size: 11px;
  font-weight: 620;
  color: var(--info-fg, #3160b4);
}
.x4-dashboard-mini-t {
  font-size: 11.5px;
  line-height: 1.18;
  font-weight: 550;
  color: var(--v2-text, #16171a);
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: normal;
}
.x4-dashboard-mini[data-passe] {
  background: var(--inset, rgba(0, 0, 0, .035));
  border-left-color: var(--v2-text-3, #6b6f76);
}
.x4-dashboard-mini[data-passe] .x4-dashboard-mini-h { color: var(--v2-text-3, #6b6f76); }
.x4-dashboard-mini[data-passe] .x4-dashboard-mini-t {
  color: var(--v2-text-3, #6b6f76);
  text-decoration: line-through;
}

/* « Un jour sans RDV affiche “Aucun RDV” en italique, centré
   verticalement » (§2.3). margin: auto → le bloc prend le mou de la
   colonne flex et se pose au milieu. */
.x4-dashboard-jour-vide {
  margin: auto 0;
  text-align: center;
  font-style: italic;
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
}

/* L'agenda non connecté garde le message de branchement du CRM. */
.x4-dashboard-agenda-vide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 19px 22px;
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
}
.x4-dashboard-agenda-vide a {
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text, #16171a);
  background: var(--accent-bright, #f5d547);
  border-radius: 99px;
  padding: 7px 14px;
  text-decoration: none;
}
.x4-dashboard-agenda-vide small {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
}

/* ══════════════════════════════════════════════════════════
   5. RANGÉE 3, DROITE — CETTE SEMAINE (§2.3)
   ══════════════════════════════════════════════════════════
   MESURE (dc-tpl 291 → 307, verbatim) :
     en-tête  display: flex; align-items: center; gap: 8px;
              padding: 16px 18px 12px;
     corps    padding: 0px 8px 10px;
     ligne    display: flex; gap: 12px; padding: 9px 10px;
              border-radius: var(--r-sm); transition: background 0.14s;
     carré    width/height 26px; border-radius: var(--r-xs);
              background: <ton>-soft; color: <ton>-fg;
              display: grid; place-items: center;   (svg 13px)
     texte    font-size: 12.5px; line-height: 1.35 ;
              <b> 620 · <span> var(--v2-text-2, #55595f)
     horodat. font-size: 11px; color: var(--v2-text-3, #6b6f76); margin-top: 2px;
   MESURE (atlas 228-237) : ligne h 50, carré à x 1087 (= 1077 + 10),
   texte à x 1125 (= 1087 + 26 + 12).
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-fil { overflow: hidden; }
.x4-dashboard-fil-tete { padding: 16px 18px 12px; }
.x4-dashboard-fil-corps { padding: 0 8px 10px; }

.x4-dashboard-fil-l {
  display: flex;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm, 12px);
  width: 100%;
  transition: background .14s;
}

/* Le carré d'icône, teinté par NATURE de l'événement (§2.3). Les tons
   viennent d'AUDIT_TYPES (audit.js) : blue · green · orange · red ·
   purple · grey. Une seule table de correspondance pour tout l'écran. */
.x4-dashboard-ico {
  --x4-icone: 13px;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs, 9px);
  background: var(--inset, rgba(0, 0, 0, .035));
  color: var(--v2-text-2, #55595f);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.x4-dashboard-ico[data-ton="info"]   { background: var(--info-soft, rgba(53, 104, 196, .11)); color: var(--info-fg, #3160b4); }
.x4-dashboard-ico[data-ton="pos"]    { background: var(--pos, rgba(23, 128, 81, .15));        color: var(--pos-fg, #136d45); }
.x4-dashboard-ico[data-ton="accent"] { background: var(--accent-soft, rgba(245, 213, 71, .26)); color: var(--v2-accent, #7d640d); }
.x4-dashboard-ico[data-ton="neg"]    { background: var(--neg-soft, rgba(193, 75, 64, .11));   color: var(--neg-fg, #a74137); }
.x4-dashboard-ico[data-ton="alt"]    { background: var(--alt-soft, rgba(106, 79, 201, .12));  color: var(--alt-fg, #664cc2); }

.x4-dashboard-fil-main { display: block; min-width: 0; flex: 1 1 0; }
.x4-dashboard-fil-txt {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--v2-text, #16171a);
}
.x4-dashboard-fil-txt b { font-weight: 620; }
.x4-dashboard-fil-txt span { color: var(--v2-text-2, #55595f); }
/* L'horodatage — « aujourd'hui 17:15 », « Joris · hier ». Un jour et
   son heure séparés par un retour à la ligne ne se lisent plus comme
   un instant : nowrap (§7 n° 12). */
.x4-dashboard-fil-meta {
  display: block;
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  margin-top: 2px;
  white-space: nowrap;
}
.x4-dashboard-fil-note {
  margin: 0 0 4px;
  padding: 0 10px;
  font-size: 11.5px;
  color: var(--v2-text-3, #6b6f76);
}

/* ══════════════════════════════════════════════════════════
   6. RANGÉE 4, GAUCHE — MES TÂCHES (§2.4)
   ══════════════════════════════════════════════════════════
   MESURE (dc-tpl 310 → 327, verbatim) :
     carte     … padding: 16px 19px 18px;
     en-tête   display: flex; align-items: center; gap: 8px;
               margin-bottom: 13px;
     compo     display: flex; align-items: center; gap: 8px;
               background: var(--inset); border: 1px solid var(--stroke-2);
               border-radius: 99px; padding: 9px 15px; margin-bottom: 14px;
               (svg 15px, texte 12,5px var(--v2-text-3, #6b6f76))
     liste     display: flex; flex-direction: column; gap: 4px;
     tâche     display: flex; align-items: center; gap: 12px;
               padding: 9px 10px; margin: 0px -10px;
               border-radius: var(--r-sm);
     rond      width/height 17px; border-radius: 99px;
               border: 1.5px solid var(--stroke);
     libellé   font-size: 12.5px; flex: 1 1 0%;
     échéance  height 20px; padding 0 8px; radius 99px; 11px;
               color var(--v2-text-3, #6b6f76); background var(--panel-2);
               border 1px solid var(--stroke-2);
     fiche     idem, 550, color var(--info-fg), background var(--info-soft),
               sans bordure.
   MESURE (atlas 305-341) : pilule de composition h 35 ; les tâches à
   x 268 = 278 − 10 (le margin négatif) sur 778 px de large.
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-taches { padding: 16px 19px 18px; }
.x4-dashboard-taches > .x4-dashboard-tete { margin-bottom: 13px; }

.x4-dashboard-compo {
  --x4-icone: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--inset, rgba(0, 0, 0, .035));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  border-radius: 99px;
  padding: 9px 15px;
  margin-bottom: 14px;
}
.x4-dashboard-compo .icon { color: var(--v2-text-3, #6b6f76); }
.x4-dashboard-compo-txt {
  flex: 1 1 0;
  min-width: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--v2-text, #16171a);
  background: none;
  border: 0;
  padding: 0;
  outline: none;
}
.x4-dashboard-compo-txt::placeholder { color: var(--v2-text-3, #6b6f76); }
.x4-dashboard-compo-pour {
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
  background: none;
  border: 0;
  max-width: 160px;
}

.x4-dashboard-taches-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.x4-dashboard-tache {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: var(--r-sm, 12px);
  transition: background .14s;
}
.x4-dashboard-tache-rond {
  width: 17px;
  height: 17px;
  border-radius: 99px;
  border: 1.5px solid var(--stroke, rgba(20, 20, 25, .075));
  flex-shrink: 0;
  padding: 0;
}
.x4-dashboard-tache-rond:hover { border-color: var(--pos-fg, #136d45); }
.x4-dashboard-tache-txt {
  font-size: 12.5px;
  flex: 1 1 0;
  min-width: 0;
  color: var(--v2-text, #16171a);
}

/* Les pastilles de fin de ligne — échéance (neutre) et fiche liée
   (bleue). Même géométrie, deux tons. */
.x4-dashboard-pastille {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  background: var(--panel-2, rgba(255, 255, 255, .42));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  white-space: nowrap;
  flex-shrink: 0;
}
.x4-dashboard-pastille[data-ton="info"] {
  font-weight: 550;
  color: var(--info-fg, #3160b4);
  background: var(--info-soft, rgba(53, 104, 196, .11));
  border-color: transparent;
}
.x4-dashboard-pastille[data-ton="neg"] {
  font-weight: 550;
  color: var(--neg-fg, #a74137);
  background: var(--neg-soft, rgba(193, 75, 64, .11));
  border-color: transparent;
}
.x4-dashboard-pastille[data-ton="accent"] {
  font-weight: 550;
  color: var(--v2-accent, #7d640d);
  background: var(--accent-soft, rgba(245, 213, 71, .26));
  border-color: transparent;
}

/* ══════════════════════════════════════════════════════════
   7. RANGÉE 4, GAUCHE — PIPELINE COMMERCIAL (§2.4)
   ══════════════════════════════════════════════════════════
   MESURE (dc-tpl 328 → 349, verbatim) :
     carte    … padding: 16px 19px 20px;
     en-tête  … margin-bottom: 15px; (méta à droite : 12,5px var(--v2-text-3, #6b6f76)
     liste    display: flex; flex-direction: column; gap: 12px;
     étape    opacity: 1 | 0.5;
     l1       display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
     numéro   width/height 17px; border-radius: var(--r-xs, 9px); background: var(--inset);
              color: var(--v2-text-3, #6b6f76); font-size: 11px; font-weight: 620;
              display: grid; place-items: center;
     nom      font-size: 12.5px; font-weight: 550;
     compte   margin-left: auto; font-size: 13.5px; font-weight: 620;
     barre    height: 7px; border-radius: 99px; background: var(--track);
              remplissage var(--accent-bright) — ou var(--pos-fg) sur les
              deux dernières étapes (dc-tpl 342, stages 6 et 7).
     l2       display: flex; align-items: center; gap: 8px; margin-top: 7px;
     taux     font-size: 11px; font-weight: 620; color: var(--v2-text-2, #55595f);
              min-width: 30px;
     perdus   height 20px; padding 0 8px; radius 99px; 11px/550;
              color var(--neg-fg); background var(--neg-soft);
              (point de 5px en currentcolor)
     attente  idem, color var(--v2-text-3, #6b6f76), background var(--panel-2),
              border 1px solid var(--stroke-2).
   MESURE (atlas 348-363) : bloc d'étape h 57 ; barre h 7 à y 1130 ;
   ligne 2 à y 1144.

   L'OPACITÉ : la maquette écrit 1 sur les étapes qui ont au moins une
   fiche et 0,5 sur celles à zéro (stage(5|6|7, …, 0.5)). C'est ce que
   « l'opacité décroît avec l'avancement » veut dire sur ces données —
   et c'est DÉRIVÉ du compte, pas écrit en dur (§1.6.1).
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-pipe { padding: 16px 19px 20px; }
.x4-dashboard-pipe > .x4-dashboard-tete { margin-bottom: 15px; }
.x4-dashboard-meta {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
  white-space: nowrap;
}

.x4-dashboard-pipe-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.x4-dashboard-pipe-etape { display: block; width: 100%; }
.x4-dashboard-pipe-etape[data-eteint] { opacity: .5; }

.x4-dashboard-pipe-l1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.x4-dashboard-pipe-num {
  width: 17px;
  height: 17px;
  border-radius: var(--r-xs, 9px);
  background: var(--inset, rgba(0, 0, 0, .035));
  color: var(--v2-text-3, #6b6f76);
  font-size: 11px;
  font-weight: 620;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.x4-dashboard-pipe-nom {
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-text, #16171a);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.x4-dashboard-pipe-n {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 620;
  color: var(--v2-text, #16171a);
  flex-shrink: 0;
}

.x4-dashboard-barre {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: var(--track, rgba(20, 20, 25, .07));
  overflow: hidden;
}
.x4-dashboard-barre > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent-bright, #f5d547);
}
.x4-dashboard-barre > i[data-ton="pos"] { background: var(--pos-fg, #136d45); }

.x4-dashboard-pipe-l2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
.x4-dashboard-pipe-taux {
  font-size: 11px;
  font-weight: 620;
  color: var(--v2-text-2, #55595f);
  min-width: 30px;
  flex-shrink: 0;
}
.x4-dashboard-pipe-perdus,
.x4-dashboard-pipe-attente {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
}
.x4-dashboard-pipe-perdus {
  color: var(--neg-fg, #a74137);
  background: var(--neg-soft, rgba(193, 75, 64, .11));
}
.x4-dashboard-pipe-perdus > i {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: currentColor;
}
.x4-dashboard-pipe-attente {
  color: var(--v2-text-3, #6b6f76);
  background: var(--panel-2, rgba(255, 255, 255, .42));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}

/* ══════════════════════════════════════════════════════════
   8. RANGÉE 4, DROITE — À RELANCER (§2.4)
   ══════════════════════════════════════════════════════════
   MESURE (dc-tpl 351 → 367, verbatim) :
     en-tête  display: flex; align-items: center; gap: 8px;
              padding: 16px 18px 11px;  (icône au trait var(--accent-bright, #f5d547))
     compte   margin-left: auto; height 20px; padding 0 9px; radius 99px;
              11px/620; color var(--accent-bright, #f5d547); background var(--accent-soft);
     corps    padding: 0px 8px 12px;
     ligne    display: flex; align-items: center; gap: 12px;
              padding: 8px 10px; border-radius: var(--r-sm);
     nom      font-size: 12.5px; font-weight: 550;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     état     font-size: 11px; color: var(--v2-text-3, #6b6f76);
     jours    height 20px; padding 0 8px; radius 99px; 11px/620;
              teinte selon la gravité (dc, fonction `lateness`) :
                ≥ 180 j → --neg-fg / --neg-soft
                ≥  30 j → --accent / --accent-soft
                sinon   → --text-2 / --inset
     lien     display: block; padding: 7px 10px; font-size: 12.5px;
   MESURE (atlas 451-487) : ligne h 44 ; carré d'icône 26 px à x 1087 ;
   texte à x 1125 ; pastille collée à droite à 1541 (= 1551 − 10).
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-rel { overflow: hidden; }
.x4-dashboard-rel-tete { padding: 16px 18px 11px; }
.x4-dashboard-rel-tete .icon { color: var(--v2-accent, #7d640d); }
.x4-dashboard-rel-compte {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 620;
  color: var(--v2-accent, #7d640d);
  background: var(--accent-soft, rgba(245, 213, 71, .26));
}
.x4-dashboard-rel-corps { padding: 0 8px 12px; }

.x4-dashboard-rel-l {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--r-sm, 12px);
  width: 100%;
  transition: background .14s;
}
.x4-dashboard-rel-main { display: block; min-width: 0; flex: 1 1 0; }
.x4-dashboard-rel-nom {
  display: block;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-text, #16171a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-dashboard-rel-sub {
  display: block;
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La pastille de jours : sa teinte SUIT LA GRAVITÉ (§2.4). */
.x4-dashboard-jours {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 620;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--v2-text-2, #55595f);
  background: var(--inset, rgba(0, 0, 0, .035));
}
.x4-dashboard-jours[data-grav="moyen"] {
  color: var(--v2-accent, #7d640d);
  background: var(--accent-soft, rgba(245, 213, 71, .26));
}
.x4-dashboard-jours[data-grav="grave"] {
  color: var(--neg-fg, #a74137);
  background: var(--neg-soft, rgba(193, 75, 64, .11));
}

/* « + 34 autres » : un compte suivi de son mot. nowrap, comme toute
   valeur de compteur (§7 n° 12). */
.x4-dashboard-plus {
  display: block;
  width: 100%;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--v2-accent, #7d640d);
  white-space: nowrap;
}
.x4-dashboard-plus:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   9. RANGÉE 4, DROITE — COMPLÉTUDE DES DONNÉES (§2.4)
   ══════════════════════════════════════════════════════════
   MESURE (dc-tpl 368 → 389, verbatim) :
     carte     … padding: 16px 18px 18px;
     en-tête   … margin-bottom: 13px;
               (global à droite : 12,5px / 620, tabulaire
     barres    display: flex; flex-direction: column; gap: 8px;
     ligne     display: flex; align-items: center; gap: 12px;
     libellé   font-size: 12.5px; color: var(--v2-text-2, #55595f);
               width: 84px; flex-shrink: 0;
     piste     flex: 1 1 0%; height: 6px; border-radius: 99px;
               background: var(--track); overflow: hidden;
     pct       font-size: 12.5px; font-weight: 620; width: 32px;
               text-align: right;
     priorité  margin-top: 15px; padding-top: 13px;
               border-top: 1px solid var(--stroke-2);
               display: flex; flex-direction: column; gap: 4px;
     titre     font-size: 11px; font-weight: 620; letter-spacing: 0.08em;
               color: var(--v2-text-3, #6b6f76); margin-bottom: 3px;
     ligne     display: flex; align-items: center; gap: 12px;
               padding: 9px 10px; border-radius: var(--r-sm);
     compte    height 20px; min-width 26px; padding 0 6px; radius 99px;
               11px/620; color var(--accent-bright, #f5d547); background var(--accent-soft);
     texte     font-size: 12.5px; color: var(--v2-text-2, #55595f); flex: 1 1 0%;
     chevron   svg 14px, trait var(--v2-text-3, #6b6f76).

   ÉCART ASSUMÉ — L'AMBRE N'EST PAS UNE ENCRE. La maquette met
   `color: var(--accent-bright)` sur le POURCENTAGE (atlas 499-500 :
   rgb(245,213,71) sur fond clair, soit 1,5:1). C'est exactement ce que
   la §1.6.6 interdit et l'erreur n° 8 de la §7. Le remplissage de la
   barre garde l'aplat #f5d547 — c'est une surface ; le chiffre passe à
   l'encre --accent (#7d640d, olive). Correction volontaire.

   Les trois paliers sont ceux de dashCompletudeSection (app-features.js),
   pas ceux de la maquette : vert ≥ 80, ambre ≥ 40, rouge en dessous.
   Une seule définition pour les deux écrans (§7 n° 2).
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-comp { padding: 16px 18px 18px; }
.x4-dashboard-comp > .x4-dashboard-tete { margin-bottom: 13px; }
.x4-dashboard-comp-global {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text, #16171a);
}

.x4-dashboard-comp-mods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.x4-dashboard-comp-mod {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.x4-dashboard-comp-lbl {
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  width: 84px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.x4-dashboard-comp-piste {
  flex: 1 1 0;
  height: 6px;
  border-radius: 99px;
  background: var(--track, rgba(20, 20, 25, .07));
  overflow: hidden;
}
.x4-dashboard-comp-piste > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent-bright, #f5d547);
}
.x4-dashboard-comp-piste > i[data-niv="ok"]  { background: var(--pos-fg, #136d45); }
.x4-dashboard-comp-piste > i[data-niv="low"] { background: var(--neg-fg, #a74137); }

.x4-dashboard-comp-pct {
  font-size: 12.5px;
  font-weight: 620;
  width: 32px;
  text-align: right;
  flex-shrink: 0;
  color: var(--v2-accent, #7d640d);   /* encre, jamais l'aplat — voir ci-dessus */
}
.x4-dashboard-comp-pct[data-niv="ok"]  { color: var(--pos-fg, #136d45); }
.x4-dashboard-comp-pct[data-niv="low"] { color: var(--neg-fg, #a74137); }

.x4-dashboard-comp-prio {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.x4-dashboard-comp-titre {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3, #6b6f76);
  margin-bottom: 3px;
}
.x4-dashboard-comp-a {
  --x4-icone: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 9px;
  margin: 0 -9px;
  border-radius: var(--r-sm, 12px);
  width: calc(100% + 18px);
  transition: background .14s;
}
.x4-dashboard-comp-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 26px;
  padding: 0 6px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 620;
  color: var(--v2-accent, #7d640d);
  background: var(--accent-soft, rgba(245, 213, 71, .26));
  flex-shrink: 0;
}
/* PAS DE VARIANTE DE GRAVITÉ ICI. Une version antérieure passait la
   pastille au rouge au-delà d'une certaine priorité. La maquette pose
   `color: var(--accent-bright, #f5d547); background: var(--accent-soft)` sur les TROIS
   lignes sans condition (dc-tpl 386, relevé verbatim), et la §2.4 écrit
   « le compte en pastille ambre » : les deux sources concordent, rien
   n'appuyait le rouge. Un champ à remplir n'est pas une anomalie — le
   rouge le faisait lire comme une erreur, et il ajoutait une troisième
   teinte de statut sur un bloc qui n'en porte qu'une. Le classement par
   priorité reste dans l'ORDRE des lignes, où dashCompletude() le met.
.x4-dashboard-comp-txt {
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  flex: 1 1 0;
  min-width: 0;
}
.x4-dashboard-comp-a .icon { color: var(--v2-text-3, #6b6f76); }

/* ══════════════════════════════════════════════════════════
   10. LES ÉTATS VIDES (§1.6.5)
   ══════════════════════════════════════════════════════════
   « Un état vide dit quoi faire », pas « aucun résultat ». Chaque bloc
   sans donnée garde donc son cadre, son titre et sa consigne.
   ══════════════════════════════════════════════════════════ */

.x4-dashboard-vide {
  --x4-icone: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 26px 18px 28px;
  text-align: center;
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
}
.x4-dashboard-vide .icon { color: var(--v2-text-3, #6b6f76); opacity: .65; }
.x4-dashboard-vide small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--v2-text-3, #6b6f76);
  max-width: 34ch;
}
.x4-dashboard-agenda-cal {
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; background: none; cursor: pointer; padding: 0 0 0 12px;
  font-size: 12.5px; font-weight: 550;
  color: var(--v2-accent, #7d640d);
  font-family: inherit;
}
.x4-dashboard-agenda-cal:hover { text-decoration: underline; }

/* Le pied de l'entonnoir : lapins, écartées, à reclasser — hors frise,
   aux couleurs du pipeline (07/09/2026). */
.x4-dashboard-pipe-pied {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-dashboard-pipe-detour {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px; border-radius: 99px;
  font: inherit; font-size: 11.5px; font-weight: 550; white-space: nowrap;
  color: var(--v2-text-3, #6b6f76);
  background: var(--panel-2, rgba(255, 255, 255, .42));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  cursor: default;
}
button.x4-dashboard-pipe-detour { cursor: pointer; }
.x4-dashboard-pipe-detour > b { font-weight: 680; }
.x4-dashboard-pipe-detour[data-ton="warn"] { color: var(--warn-fg, #8a5510); background: var(--warn-soft, rgba(201, 146, 26, .14)); border-color: transparent; }
.x4-dashboard-pipe-detour[data-ton="neg"]  { color: var(--neg-fg, #a74137);  background: var(--neg-soft, rgba(193, 75, 64, .11));   border-color: transparent; }

.x4-dashboard-carte-note { margin-top: 3px; font-size: 11px; color: var(--v2-text-3, #6b6f76); }

/* ══ Mon agenda — refonte Claude Design du 09/09/2026 ═══════════════
   Cotes relevées sur la maquette « Agenda — tableau de bord » : bandeau
   108, légende, carte 0/12/10, axe 46, colonnes 1,67 / 1,41 / 1 / 1 / 1
   (min 176), en-têtes 76, pas occupé 36, bandes 22 / 34, pied 35, hors-
   plage 33. Rien d'interprété : les valeurs sont celles du fichier. */
.x4-dashboard-r3 { grid-template-columns: minmax(0, 1fr); }
.x4-dga { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Le bandeau du prochain rendez-vous : un objet, pas une ligne. */
.x4-dga-bandeau { position: relative; overflow: hidden; height: 108px; display: flex; align-items: center; gap: 16px; padding: 0 20px 0 34px; border-radius: var(--r-lg, 26px); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: linear-gradient(100deg, var(--accent-soft, rgba(245, 213, 71, .26)) 0%, var(--panel-2, rgba(255, 255, 255, .42)) 44%, var(--panel-2, rgba(255, 255, 255, .42)) 100%); box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, .03), 0 10px 30px -12px rgba(0, 0, 0, .14)); --x4-enc: var(--info-fg, #3568c4); --x4-fond: color-mix(in srgb, var(--x4-enc) 22%, transparent); }
.x4-dga-bandeau { background: linear-gradient(100deg, color-mix(in srgb, var(--x4-enc) 20%, transparent) 0%, var(--panel-2, rgba(255, 255, 255, .42)) 48%, var(--panel-2, rgba(255, 255, 255, .42)) 100%); }
.x4-dga-bandeau[data-ton="pos"] { --x4-enc: var(--pos-fg, #136d45); }
.x4-dga-bandeau[data-ton="warn"] { --x4-enc: var(--v2-accent, #7d640d); --x4-fond: color-mix(in srgb, var(--accent-bright, #f5d547) 45%, var(--panel-solid, #fff)); }
.x4-dga-bandeau[data-ton="alt"] { --x4-enc: var(--alt-fg, #664cc2); }
.x4-dga-bandeau[data-ton="teal"] { --x4-enc: var(--teal-fg, #0d6b78); }
.x4-dga-bandeau[data-ton="neutre"] { --x4-enc: var(--v2-text-3, #6b6f76); --x4-fond: var(--inset, rgba(0, 0, 0, .035)); }
.x4-dga-bandeau[data-live] { --x4-enc: var(--pos-fg, #136d45); }
.x4-dga-sur { color: var(--x4-enc); }
.x4-dga-bandeau-filet { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--x4-enc); }
.x4-dga-bandeau-pastille { flex: none; width: 54px; height: 54px; border-radius: var(--r-md, 18px); background: var(--x4-fond); color: var(--x4-enc); display: grid; place-items: center; }
.x4-dga-bandeau-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.x4-dga-sur { font-size: 11px; font-weight: 620; letter-spacing: .09em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-dga-bandeau-t { margin-top: 3px; font-size: 22px; font-weight: 640; letter-spacing: -.01em; color: var(--v2-text, #16171a); border: 0; background: none; padding: 0; text-align: left; font-family: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
span.x4-dga-bandeau-t { cursor: default; }
button.x4-dga-bandeau-t:hover { text-decoration: underline; }
.x4-dga-bandeau-m { margin-top: 4px; font-size: 13px; color: var(--v2-text-2, #55595f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* « dans 2 h 56 » se lit comme un seul objet : même ligne de base, 28 / 680
   (Claude Design, 09/09 : « le titre 22 reprend la main »). */
.x4-dga-bandeau-compte { flex: none; display: flex; align-items: baseline; gap: 7px; margin-left: 8px; }
.x4-dga-bandeau-dans { font-size: 12px; font-weight: 550; color: var(--v2-text-3, #6b6f76); }
.x4-dga-bandeau-compte b { font-size: 28px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; color: var(--v2-text, #16171a); }
.x4-dga-bandeau[data-live] .x4-dga-bandeau-compte b, .x4-dga-bandeau[data-live] .x4-dga-bandeau-dans { color: var(--pos-fg, #136d45); }
.x4-dga-bandeau-btns { flex: none; display: flex; flex-direction: column; gap: 7px; margin-left: 6px; }
.x4-dga-btn { height: 36px; padding: 0 16px; border-radius: var(--r-sm, 12px); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: transparent; color: var(--v2-text-2, #55595f); font: inherit; font-size: 13px; font-weight: 620; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.x4-dga-btn.est-plein { background: var(--accent-bright, #f5d547); border-color: transparent; color: #16171a; font-weight: 640; }
.x4-dga-btn:hover { border-color: var(--stroke-3, rgba(20, 20, 25, .17)); color: var(--v2-text, #16171a); }
.x4-dga-btn.est-plein:hover { filter: brightness(.97); color: #16171a; }
.x4-dga-bandeau.est-vide { background: var(--panel-2, rgba(255, 255, 255, .42)); }

/* La ligne de légende. */
.x4-dga-legende { display: flex; align-items: center; gap: 9px; padding: 0 4px; color: var(--v2-text-3, #6b6f76); }
.x4-dga-legende > b { margin-left: 4px; font-size: 13.5px; font-weight: 620; color: var(--v2-text, #16171a); }
.x4-dga-legende > span { font-size: 12.5px; }
.x4-dga-legende-puces { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-dga-legende-puces i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-left: 10px; background: var(--v2-text-3, #6b6f76); }
.x4-dga-legende-puces i:first-child { margin-left: 0; }
.x4-dga-legende-puces i[data-ton="pos"] { background: var(--pos-fg, #136d45); }
.x4-dga-legende-puces i[data-ton="info"] { background: var(--info-fg, #3568c4); }
.x4-dga-legende-puces i[data-ton="warn"] { background: var(--accent-bright, #f5d547); box-shadow: inset 0 0 0 1px var(--v2-accent, #7d640d); }
.x4-dga-legende-puces i[data-ton="visio"] { background: var(--alt-fg, #664cc2); }
/* Équipe passe en rose : le violet est celui de Visio & tarifs, comme dans le pipeline (11/09/2026). */
.x4-dga-legende-puces i[data-ton="alt"] { background: var(--x4c-pink-fg, #b0407a); }
.x4-dga-legende-puces i[data-ton="teal"] { background: var(--teal-fg, #0d6b78); }

/* La carte et ses rangées. */
.x4-dga-carte { padding: 0 12px 10px; overflow: hidden; display: block; }
.x4-dga-rang { display: grid; grid-template-columns: 46px 1.67fr 1.41fr repeat(3, minmax(176px, 1fr)); margin: 0 -12px; padding: 0 12px; min-width: 0; }
.x4-dga-axe-cell { min-width: 0; }
.x4-dga-tetes { border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075)); }
.x4-dga-tete { min-width: 0; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); padding: 12px 10px 11px; display: flex; align-items: center; min-height: 76px; box-sizing: border-box; }
.x4-dga-tete[data-auj] { box-shadow: inset 0 -3px 0 var(--accent-bright, #f5d547); background: linear-gradient(180deg, var(--accent-soft, rgba(245, 213, 71, .26)), transparent); }
.x4-dga-tete-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.x4-dga-tete-txt > b { font-weight: 640; color: var(--v2-text, #16171a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-dga-tete-txt > span { font-size: 11.5px; color: var(--v2-text-2, #55595f); margin-top: 1px; }
.x4-dga-tete-txt > i { font-style: normal; font-size: 11.5px; font-weight: 550; color: var(--v2-text-3, #6b6f76); margin-top: 2px; }
.x4-dga-tete.est-t0 { gap: 11px; }
.x4-dga-tete.est-t0 .x4-dga-tete-pastille { flex: none; width: 42px; height: 42px; border-radius: var(--r-sm, 12px); background: var(--accent-bright, #f5d547); color: #16171a; font-size: 21px; font-weight: 680; display: grid; place-items: center; }
.x4-dga-tete.est-t0 .x4-dga-tete-txt > b { font-size: 15px; letter-spacing: -.005em; }
.x4-dga-tete.est-t0 .x4-dga-tete-txt > i { color: var(--v2-accent, #7d640d); }
.x4-dga-tete.est-t1 { gap: 10px; }
.x4-dga-tete.est-t1 .x4-dga-tete-pastille { flex: none; width: 38px; height: 38px; border-radius: var(--r-sm, 12px); border: 1px solid transparent; background: var(--accent-soft, rgba(245, 213, 71, .26)); color: var(--v2-accent, #7d640d); font-size: 18px; font-weight: 680; display: grid; place-items: center; }
.x4-dga-tete.est-t1 .x4-dga-tete-txt > b { font-size: 14px; }
.x4-dga-tete.est-t2 { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; line-height: 1.15; }
.x4-dga-tete-jour { font-size: 11px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-dga-tete-num { font-size: 11.5px; color: var(--v2-text-2, #55595f); }
.x4-dga-tete-num b { font-size: 17px; font-weight: 680; color: var(--v2-text, #16171a); }
.x4-dga-tete.est-t2 > i { font-style: normal; font-size: 11px; color: var(--v2-text-3, #6b6f76); }

/* Hors-plage : deux rangées compactes. */
.x4-dga-hors { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-dga-hors[data-avant] { border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-dga-hors[data-apres] { border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-dga-hors .x4-dga-axe-cell { display: flex; align-items: center; justify-content: flex-end; padding-right: 9px; font-size: 10.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76); }
.x4-dga-hors-cell { min-width: 0; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); padding: 4px 5px; min-height: 32px; display: flex; flex-direction: column; gap: 3px; box-sizing: border-box; }
.x4-dga-hors-l { height: 24px; border-radius: var(--r-xs, 9px); background: var(--x4-fond, var(--inset)); box-shadow: inset 3px 0 0 var(--x4-bar, var(--v2-text-3)); padding: 0 8px 0 11px; display: flex; align-items: center; gap: 7px; overflow: hidden; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--v2-text, #16171a); }
div.x4-dga-hors-l { cursor: default; }
.x4-dga-hors-l > span:first-child { flex: none; font-size: 11px; font-weight: 680; color: var(--x4-enc, var(--v2-text-2)); display: inline-flex; align-items: center; gap: 4px; }
.x4-dga-hors-l > span:last-child { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-dga-hors-l[data-passe] { opacity: .5; }

/* Le corps : l'axe, la couche des filets et des bandes, les colonnes. */
.x4-dga-corps { position: relative; }
.x4-dga-axe { position: relative; min-width: 0; }
.x4-dga-heure { position: absolute; right: 9px; font-size: 11.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76); font-variant-numeric: tabular-nums; }
.x4-dga-now-h { position: absolute; right: 7px; font-size: 10.5px; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--neg-fg, #a74137); background: var(--panel-solid, #fff); padding: 1px 3px; border-radius: 4px; z-index: 3; }
.x4-dga-couche { position: absolute; left: 58px; right: 12px; top: 0; bottom: 0; pointer-events: none; }
.x4-dga-filet { position: absolute; left: 0; right: 0; height: 1px; background: var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-dga-bande { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--pos-fg, #136d45) 7%, transparent); border-top: 1px dashed color-mix(in srgb, var(--pos-fg, #136d45) 30%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--pos-fg, #136d45) 30%, transparent); box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.x4-dga-bande > span { background: var(--panel-solid, #fff); padding: 0 11px; font-size: 10.5px; font-weight: 620; letter-spacing: .03em; color: var(--pos-fg, #136d45); white-space: nowrap; border-radius: 99px; }
.x4-dga-col { position: relative; min-width: 0; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-dga-col-in { position: absolute; left: 5px; right: 5px; top: 0; bottom: 0; }
/* Sur un grand écran la colonne s'étire, le bloc garde sa taille de carte
   (Claude Design, 09/09) : 360 sur les larges, 260 sur les étroites ; les
   filets et bandes restent pleine largeur. */
.x4-dga-col.est-large .x4-dga-col-in { max-width: 360px; }
.x4-dga-col.est-etroite .x4-dga-col-in { max-width: 260px; }
/* Pas de plafond sur les colonnes elles-mêmes : à 2560 il rendait les
   trois étroites plus larges qu'aujourd'hui et demain, à l'inverse de la
   règle de Joris (« aujourd'hui et demain plus gros »). Le plafond des
   blocs suffit. */
.x4-dga-aucun { position: absolute; left: 0; right: 0; top: calc(50% - 9px); text-align: center; font-size: 12px; color: var(--v2-text-3, #6b6f76); pointer-events: none; }

/* Les blocs : la nature en fond et en filet, trois densités. */
.x4-dga-bloc, .x4-dga-hors-l { --x4-enc: var(--info-fg, #3568c4); --x4-bar: var(--x4-enc); --x4-fond: color-mix(in srgb, var(--x4-enc) 20%, var(--panel-solid, #fff)); }
.x4-dga-bloc[data-ton="pos"], .x4-dga-hors-l[data-ton="pos"] { --x4-enc: var(--pos-fg, #136d45); }
/* Chantier = le jaune de la maison (Joris, 10/09 : ni orange, ni rose) :
   fond beurre, filet doré, encre sombre — la couleur des casques. */
.x4-dga-bloc[data-ton="warn"], .x4-dga-hors-l[data-ton="warn"] { --x4-enc: var(--v2-accent, #7d640d); --x4-fond: color-mix(in srgb, var(--accent-bright, #f5d547) 45%, var(--panel-solid, #fff)); }
.x4-dga-bloc[data-ton="warn"] .x4-dga-bloc-t { color: var(--v2-text, #16171a); }
[data-app-theme="dark"] .x4-dga-bloc[data-ton="warn"], [data-app-theme="dark"] .x4-dga-hors-l[data-ton="warn"] { --x4-fond: color-mix(in srgb, var(--accent-bright, #f5d547) 26%, var(--panel-solid, #17191c)); }
.x4-dga-bloc[data-ton="alt"], .x4-dga-hors-l[data-ton="alt"] { --x4-enc: var(--alt-fg, #664cc2); }
.x4-dga-bloc[data-ton="teal"], .x4-dga-hors-l[data-ton="teal"] { --x4-enc: var(--teal-fg, #0d6b78); }
.x4-dga-bloc[data-ton="neutre"], .x4-dga-hors-l[data-ton="neutre"] { --x4-enc: var(--v2-text-2, #55595f); --x4-bar: var(--v2-text-3, #6b6f76); }
[data-app-theme="dark"] .x4-dga-bloc, [data-app-theme="dark"] .x4-dga-hors-l { --x4-fond: color-mix(in srgb, var(--x4-enc) 24%, var(--panel-solid, #17191c)); }
.x4-dga-bloc { position: absolute; box-sizing: border-box; border: 0; border-radius: var(--r-sm, 12px); background: var(--x4-fond); box-shadow: inset 4px 0 0 var(--x4-bar); overflow: hidden; cursor: pointer; font: inherit; text-align: left; color: var(--v2-text, #16171a); display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 0 12px; transition: transform .12s; }
div.x4-dga-bloc { cursor: default; }
.x4-dga-bloc:hover { transform: translateY(-1px); }
.x4-dga-bloc-h { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--x4-enc); white-space: nowrap; }
.x4-dga-bloc-t { font-size: 12.5px; font-weight: 620; line-height: 1.25; color: color-mix(in srgb, var(--x4-enc) 72%, var(--v2-text, #16171a)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-dga-bloc-m { font-size: 11.5px; font-weight: 400; color: var(--v2-text-2, #55595f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-dga-bloc.est-d3 { flex-direction: row; align-items: center; gap: 6px; padding: 0 9px 0 12px; }
.x4-dga-bloc.est-d3 .x4-dga-bloc-t { font-size: 12px; font-weight: 550; }
.x4-dga-bloc[data-passe] { opacity: .5; }
.x4-dga-coche { flex: none; }
.x4-dga-visio { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--x4-enc); color: var(--panel-solid, #fff); }
.x4-dga-bloc[data-prochain] { box-shadow: inset 4px 0 0 var(--x4-bar), 0 0 0 1.5px var(--accent-bright, #f5d547), 0 8px 18px -10px rgba(0, 0, 0, .35); }
.x4-dga-bloc[data-live] { box-shadow: inset 4px 0 0 var(--pos-fg, #136d45), 0 0 0 1.5px var(--pos-fg, #136d45); }
.x4-dga-now { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px solid var(--neg-fg, #a74137); z-index: 6; pointer-events: none; }
.x4-dga-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 99px; background: var(--neg-fg, #a74137); }

/* Le pied : « libre à partir de ». */
.x4-dga-pied { border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-dga-pied-cell { min-width: 0; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); min-height: 34px; display: flex; align-items: center; padding: 0 10px; box-sizing: border-box; }
.x4-dga-libre { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 620; color: var(--pos-fg, #136d45); cursor: pointer; white-space: nowrap; }
.x4-dga-libre i { width: 7px; height: 7px; border-radius: 99px; background: var(--pos-fg, #136d45); }
.x4-dga-libre:hover { text-decoration: underline; }

/* Sombre : seuls les jetons changent (Claude Design) ; le texte posé sur
   l'ambre reste sombre. */
[data-app-theme="dark"] .x4-dga-tete.est-t0 .x4-dga-tete-pastille, [data-app-theme="dark"] .x4-dga-btn.est-plein { color: #16171a; }

/* Flèches de jours de l'agenda (11/09/2026) */

/* Tons d'entretien alignés sur le pipeline (11/09/2026) */
.x4-dga-bloc[data-ton="visio"], .x4-dga-hors-l[data-ton="visio"], .x4-dga-bandeau[data-ton="visio"] { --x4-enc: var(--alt-fg, #664cc2); }
.x4-dga-bloc[data-ton="alt"], .x4-dga-hors-l[data-ton="alt"], .x4-dga-bandeau[data-ton="alt"] { --x4-enc: var(--x4c-pink-fg, #b0407a); }

/* ── Poser un rendez-vous depuis l'agenda (16/09/2026) ── */
.x4-dashboard-agenda-poser {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  height: 28px; padding: 0 11px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12);
  font-family: inherit; font-size: 12.5px; font-weight: 640;
}
.x4-dashboard-agenda-poser:hover { filter: brightness(.96); }
.x4-dga-col[data-x4-jour] { cursor: copy; }
.x4-dga-col.est-pose { cursor: default; }
/* Le créneau fantôme qui suit la souris, puis le bloc posé le temps de la fenêtre. */
.x4-dga-fantome { position: absolute; left: 0; right: 0; box-sizing: border-box; z-index: 0; pointer-events: none; border: 1.5px dashed var(--v2-accent, #7d640d); border-radius: var(--r-sm, 12px); background: color-mix(in srgb, var(--accent-bright, #f5d547) 22%, transparent); display: flex; align-items: flex-start; padding: 4px 8px; }
.x4-dga-fantome[hidden] { display: none; }
.x4-dga-fantome span { font-size: 12px; font-weight: 680; color: var(--v2-accent, #7d640d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.x4-dga-fantome[data-passe="1"] { border-color: var(--v2-text-3, #6b6f76); background: transparent; }
.x4-dga-fantome[data-passe="1"] span { color: var(--v2-text-3, #6b6f76); }
.x4-dga-bloc.est-nouveau { --x4-enc: var(--v2-accent, #7d640d); --x4-fond: color-mix(in srgb, var(--accent-bright, #f5d547) 55%, var(--panel-solid, #fff)); z-index: 8; box-shadow: inset 4px 0 0 var(--accent-bright, #f5d547), 0 10px 24px rgba(20, 20, 25, .16); cursor: default; padding: 4px 8px; display: flex; flex-direction: column; gap: 1px; }
.x4-dga-bloc.est-nouveau:hover { transform: none; }

/* ── Agenda : échelle fixe et navigation (25/09/2026) ─────────────────── */
.x4-dga-filet.est-demi { background: none; height: 0; border-top: 1px dashed var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-dga-nav { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.x4-dga-nav-b { width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); color: var(--v2-text-2, #55595f); display: inline-grid; place-items: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)); transition: background .12s, border-color .12s, color .12s, transform .12s; }
.x4-dga-nav-b:hover { background: var(--inset, rgba(0, 0, 0, .035)); border-color: var(--stroke-3, rgba(20, 20, 25, .17)); color: var(--v2-text, #16171a); }
.x4-dga-nav-b:active { transform: scale(.96); }
.x4-dga-nav-auj { height: 34px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); font-family: inherit; font-size: 12.5px; font-weight: 640; cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)); }
.x4-dga-nav-auj.est-la, .x4-dga-nav-auj:disabled { background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-3, #6b6f76); cursor: default; box-shadow: none; }