/* ============================================================
   MODULE COMMERCIAL v4 — FONDATIONS PARTAGÉES (§1 de MODULE-COMMERCIAL.md)

   Les cinq écrans du module (tableau de bord, prospects, clients,
   carnet, carte) construisent tout leur squelette avec ce fichier :
   une seule définition du corps d'écran, de la bande de compteurs,
   des quatre surfaces et de l'en-tête. Deux définitions de la même
   chose divergent toujours — c'est l'erreur n° 2 de la §7.

   ── D'OÙ VIENNENT LES CHIFFRES ─────────────────────────────
   Chaque valeur ci-dessous est RELEVÉE sur la maquette Claude Design,
   pas interprétée. Deux sources, dans cet ordre :
     1. le style inline de la maquette
        (scratchpad/maquette-ecrans/*.clean.html)
     2. l'atlas de mesures (atlas-maq-*.json.html : x,y,w,h,fs,fw…)
   Les relevés sont cités en commentaire au-dessus de chaque bloc,
   sous la forme « MESURE ». Là où la §1 du texte et la maquette
   divergent, la maquette tranche (hiérarchie de vérité du document,
   et « la mesure tranche sur la capture ») — les deux écarts trouvés
   sont signalés en toutes lettres.

   ── TRADUCTION DES JETONS ──────────────────────────────────
   La maquette écrit var(--v2-text, #16171a), var(--v2-text-2, #55595f), var(--v2-text-3, #6b6f76),
   var(--accent-bright, #f5d547), var(--bg). Dans le CRM ces cinq-là — et eux seuls —
   portent le préfixe --v2- (tokens-v2.css l'explique : dans
   styles.css --accent est l'ambre APLAT, ici c'est l'olive ENCRE).
   Ce fichier écrit donc var(--v2-text, …) partout, avec repli.

   Les encres de statut relevées sur la maquette (rgb(193,75,64),
   rgb(53,104,196)…) NE sont PAS recopiées : tokens-v2.css les a
   assombries de 4 à 14 % le 07/08/2026 pour passer 4,5:1 sur le fond
   plein du CRM. Idem --v2-text-2, passé de #64686e à #55595f. On
   consomme les jetons, jamais les valeurs de la maquette.

   ── PORTÉE ─────────────────────────────────────────────────
   Rien ici ne s'applique hors d'un `.x4-ecran` ou d'un élément
   explicitement classé x4-. Deux exceptions assumées, toutes deux
   déclenchées par du JS (commun.js) et donc absentes tant qu'un écran
   du module n'est pas monté :
     · #kanban-container:has(> .x4-ecran) — annule le padding de coque
     · .header[data-x4-entete]           — en-tête empilé de la §1.2
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   1. LE SQUELETTE (§1.1)
   ══════════════════════════════════════════════════════════
   MESURE (01-dashboard.clean.html … 10-todo.clean.html, le corps de
   chaque écran, style inline, verbatim) :

     écran courant   padding: 20px 30px 86px; display: flex;
                     flex-direction: column; gap: 12px;
                     min-width: 1180px;
     tableau de bord padding: 22px 30px 86px; … gap: 24px;
     carte de France padding: 18px 30px 86px; … gap: 12px;
                     height: calc(100vh - 96px);

   Le min-width: 1180px est volontaire (§1.1) : ces écrans sont denses,
   ils défilent horizontalement plutôt que de se casser.

   MESURE de la racine de la maquette (data-dc-tpl="5") :
     font-family: var(--font); color: var(--v2-text, #16171a);
     letter-spacing: -0.01em;

   L'INTERLIGNAGE VAUT 1,2, et il doit être écrit. Le `normal` de
   Manrope vaut 1,36 — mesuré au banc : 11px → 15px, 12px → 16,5px,
   19px → 26px. Or l'atlas de la maquette donne 11px → 13px, 12px →
   14px, 12,5px → 15px, 17px → 20px : c'est 1,2, posé quelque part
   dans la feuille de la maquette. Sans cette ligne, chaque texte
   serait plus haut de 13 % — et l'app, elle, hérite d'environ 1,4.
   1.2 est aussi ce que portent déjà v3-rail.css et v4/clients.css :
   une seule valeur pour tout le v4, pas deux qui divergent.        */

.x4-ecran {
  /* Gouttières de la §1.1, exposées pour les cinq écrans :
     8px À L'INTÉRIEUR d'un bloc, 12px ENTRE les blocs. */
  --x4-gap-bloc: 8px;
  --x4-gap-ecran: 12px;

  /* --warn-* n'existe pas dans tokens-v2.css (vérifié) alors que la
     §4.2 et la §6.1 l'exigent : « Renouvellement à préparer » et
     « non géolocalisés ». Défini ici SOUS LE PRÉFIXE x4 pour ne pas
     préempter un futur jeton du système, et une seule fois pour les
     cinq écrans (v4/clients.css en avait sa copie locale : c'est
     exactement la divergence que la §7 n° 2 interdit). Valeurs
     reprises de v4/clients.css, déjà validées. */
  --x4-warn-fg: #9a5a12;
  --x4-warn-soft: rgba(154, 90, 18, .12);

  padding: 20px 30px 86px;
  display: flex;
  flex-direction: column;
  gap: var(--x4-gap-ecran);
  min-width: 1180px;

  font-family: var(--font, 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  color: var(--v2-text, #16171a);
  letter-spacing: -.01em;
  line-height: 1.2;
}

[data-app-theme="dark"] .x4-ecran {
  --x4-warn-fg: #e8a54b;
  --x4-warn-soft: rgba(232, 165, 75, .16);
}

/* Le tableau de bord respire (§2 : « Corps : padding 22px 30px 86px,
   gap 24px entre rangées »). */
.x4-ecran-aere {
  padding: 22px 30px 86px;
  gap: 24px;
}

/* La carte de France ne défile pas (§6 : « height: calc(100vh - 96px) :
   la carte occupe toute la hauteur restante ». Livré ici parce que
   c'est un squelette d'écran comme les deux autres ; l'écran carte n'a
   plus qu'à poser la classe. */
.x4-ecran-plein {
  padding: 18px 30px 86px;
  height: calc(100vh - 96px);
}

/* Un bloc qui groupe ses propres enfants : 8px, jamais 12px. */
.x4-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--x4-gap-bloc);
}

/* [hidden] doit rester masqué même sur du flex. */
.x4-ecran [hidden] { display: none !important; }

/* ── Le padding de coque, annulé une seule fois ──────────────
   v2-coque.css:449 pose `padding: 20px 30px` sur #kanban-container.
   Un .x4-ecran monté dedans porterait 40px 60px : le double de la
   mesure. On rend la main au squelette, qui est la source de vérité
   des trois variantes ci-dessus (20 / 22 / 18 px en haut, 86 px en
   bas — un écran ne peut pas connaître le padding de son hôte).

   Spécificité : la règle de coque vaut (1,1,1) ; `:has(> .x4-ecran)`
   ajoute une classe → (1,2,1). Elle gagne quel que soit l'ordre de
   chargement des feuilles. `:has()` est déjà utilisé par v2-coque.css
   (lignes 475-478), le support est acquis. */
body.v2-coque #kanban-container:has(> .x4-ecran) { padding: 0; }


/* ══════════════════════════════════════════════════════════
   2. LA BANDE DE COMPTEURS (§1.4)
   ══════════════════════════════════════════════════════════
   MESURE — markup relevé mot pour mot dans 10-todo.clean.html
   (data-dc-tpl 2488→2493) et 14-sim-missions.clean.html (1767→1772,
   la version corrigée qui porte le nowrap) :

     bande    display: flex; align-items: center; gap: 0px;
              padding: 13px 18px 14px; border-radius: var(--r-md);
              background: var(--panel); border: 1px solid var(--stroke);
              box-shadow: var(--shadow-sm);
     cellule  flex: 1 1 0%; min-width: 0px;
              padding-left: 0px | 18px;
              border-left: 1px solid transparent | var(--stroke-2);
     ligne    display: flex; align-items: baseline; gap: 7px;
     valeur   font-size: 19px; font-weight: 680; letter-spacing: -0.035em;
              font-variant-numeric: tabular-nums; line-height: 1;
              white-space: nowrap; flex-shrink: 0; color: var(--v2-text, #16171a);
     libellé  min-width: 0px; font-size: 12px; color: var(--v2-text-2, #55595f);
              white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis;

   MESURE — atlas-maq-10-todo, bande de 5 cellules sur 1302px de large :
     bande    x 258  y 93  w 1302  h 48
     cellule1 x 277        w 238   (padding-left 0, filet transparent)
     cellule2 x 515        w 256   (padding-left 18 + filet 1px)
     cellule3 x 772        w 256
     cellule4 x 1028       w 256
   La géométrie se recompose exactement : (1302 − 2×1 bordure − 2×18
   padding) − (5×1 filet + 4×18 retrait) = 1187, ÷ 5 = 237,4 par
   cellule ; 237,4+1 = 238,4 pour la première, 237,4+19 = 256,4 pour
   les autres. Le filet de la PREMIÈRE cellule existe donc bel et
   bien — il est transparent, pas absent : sans lui les cinq cellules
   n'auraient pas la même largeur de contenu.

   Hauteur 48 = 13 (haut) + 19 (la valeur, line-height 1) + 14 (bas)
   + 2 (les deux bordures).

   DEUX RÈGLES APPRISES À LA DURE (§1.4, et §7 n° 12) :
     · la valeur porte white-space: nowrap; flex-shrink: 0 — sans quoi
       « 114 218 € » se casse sur deux lignes dès que la cellule se
       resserre ;
     · RIEN D'AUTRE NE VIT DANS LA BANDE. Un bouton posé dedans retire
       sa largeur aux cellules flex:1 et rogne chaque libellé. Les
       boutons prennent leur propre ligne. La règle .x4-bande > :not()
       plus bas rend la faute visible en revue plutôt qu'en production.
   ══════════════════════════════════════════════════════════ */

.x4-bande {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 13px 18px 14px;
  border-radius: var(--r-md, 18px);
  background: var(--panel, rgba(255, 255, 255, .66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
}

.x4-bande-cellule {
  flex: 1 1 0%;
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}

/* La première n'a ni retrait ni filet — mais garde la bordure, en
   transparent, pour que les cinq contenus fassent la même largeur. */
.x4-bande-cellule:first-child {
  padding-left: 0;
  border-left-color: transparent;
}

.x4-bande-ligne {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.x4-bande-valeur {
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--v2-text, #16171a);
}

/* Le libellé est une PHRASE — « 8 clients avec missions actives » —
   pas des capitales empilées (§1.4). Il se tronque proprement plutôt
   que de pousser sa cellule. */
.x4-bande-libelle {
  min-width: 0;
  font-size: 12px;
  color: var(--v2-text-2, #55595f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tons de valeur. La maquette colore certaines valeurs de bande
   (atlas-maq-10-todo : neg, accent, info). --v2-accent est l'olive
   #7d640d, une ENCRE (§1.6.6 ; --accent-bright, l'aplat ambre, n'a
   rien à faire ici — l'ambre en encre sur fond clair fait 1,5:1. */
.x4-bande-valeur[data-ton="pos"]    { color: var(--pos-fg, #136d45); }
.x4-bande-valeur[data-ton="neg"]    { color: var(--neg-fg, #a74137); }
.x4-bande-valeur[data-ton="info"]   { color: var(--info-fg, #3160b4); }
.x4-bande-valeur[data-ton="alt"]    { color: var(--alt-fg, #664cc2); }
.x4-bande-valeur[data-ton="warn"]   { color: var(--x4-warn-fg, #9a5a12); }
.x4-bande-valeur[data-ton="accent"] { color: var(--v2-accent, #7d640d); }
.x4-bande-valeur[data-ton="doux"]   { color: var(--v2-text-3, #6b6f76); }

/* Garde-fou de la §1.4 : rien d'autre que des cellules dans la bande.
   Un bouton glissé là rognerait chaque libellé sans rien casser de
   visible — donc sans jamais être trouvé. Il se signale ici. */
.x4-bande > *:not(.x4-bande-cellule) {
  outline: 2px dashed var(--neg-fg, #a74137);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════
   3. LES NOMBRES (§1.5)
   ══════════════════════════════════════════════════════════
   « font-variant-numeric: tabular-nums sur TOUT nombre, sans
   exception — une colonne de chiffres qui tremble est illisible. »
   Le séparateur de milliers (espace fine insécable U+202F) et la
   virgule décimale sont produits par commun.js.

   Non portée par .x4-ecran : un nombre écrit dans l'en-tête de la
   coque (sur-titre « · 88 OPPORTUNITÉS ») doit en profiter aussi. */
.x4-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ══════════════════════════════════════════════════════════
   4. LES SURFACES (§1.3)
   ══════════════════════════════════════════════════════════
   | Rôle                       | Jeton         |
   | fond de page               | --bg / --v2-bg (posé par la coque) |
   | carte, panneau             | --panel       |
   | TABLE DE DONNÉES           | --panel-solid |
   | bande de groupe SUR table  | --inset       |
   | bandeau de filtres         | --panel-2 + --stroke-2 |

   ── LE PIÈGE --panel-2 (§1.3, et §7 n° 6) ───────────────────
   --panel-2 est un blanc TRANSLUCIDE (rgba(255,255,255,.42) en clair)
   fait pour se lire CONTRE LE FOND GRIS DE LA PAGE. Posé sur une table
   blanche opaque (--panel-solid = #fff), son alpha se compose à
   néant : la bande devient rigoureusement invisible, sans erreur, sans
   rien pour prévenir. Sur une table, la bande de groupe prend --inset
   (un noir à 3,5 %, qui lui assombrit ce qu'il couvre, donc se voit
   sur du blanc opaque comme sur du gris).
   Corollaire (§7 n° 7) : un écran entièrement translucide sur le fond
   gris moyenne au gris — « pourquoi c'est gris ». Les tables sont sur
   --panel-solid, c'est ce qui tient l'écran.
   ══════════════════════════════════════════════════════════ */

/* MESURE (07-carnet.clean.html, cartes de compteurs, dc-tpl 1510) :
   background: var(--panel); backdrop-filter: blur(20px);
   border: 1px solid var(--stroke); border-radius: var(--r-md);
   box-shadow: var(--shadow-sm);                                   */
.x4-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-md, 18px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
}

/* MESURE (07-carnet.clean.html, cadre du tableau, dc-tpl 1513) :
   border: 1px solid var(--stroke); border-radius: var(--r-lg);
   box-shadow: var(--shadow); overflow: hidden;
   ÉCART ASSUMÉ : la maquette y met var(--panel). Le texte de la §1.3
   et l'erreur n° 7 corrigent explicitement ce point — « tous les
   tableaux » sont sur --panel-solid. C'est une correction voulue de la
   maquette, pas un oubli : on suit le texte.
   Pas de backdrop-filter ici : la surface est opaque, il ne ferait que
   coûter une couche de composition. */
.x4-table {
  background: var(--panel-solid, #fff);
  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));
  overflow: hidden;
}

/* MESURE (14-sim-missions.clean.html, bande de société sur table) :
   display: flex; align-items: center; gap: 12px;
   padding: 13px 18px 12px; background: var(--inset);
   border-top: 1px solid var(--stroke);
   border-bottom: 1px solid var(--stroke);
   border-left: 3px solid var(--pos-fg);
   Le filet gauche de 3px prend le ton du groupe : l'écran pose
   --x4-groupe-ton, sinon il est transparent (pas de teinte par
   défaut : une couleur sans signification est une couleur de trop). */
.x4-bande-groupe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 12px;
  background: var(--inset, rgba(0, 0, 0, .035));
  border-top: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-left: 3px solid var(--x4-groupe-ton, transparent);
}

/* MESURE (06-clients.clean.html, bandeau de filtres) :
   display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
   padding: 10px 14px; border-radius: var(--r-md);
   background: var(--panel-2); border: 1px solid var(--stroke-2);
   « Tout dans un bandeau, pas posé sur le fond : c'est ce qui les fait
   lire comme un groupe » (§5.2). Sur le fond gris de la page, donc —
   JAMAIS sur une .x4-table (voir le piège ci-dessus). */
.x4-barre-outils {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: var(--r-md, 18px);
  background: var(--panel-2, rgba(255, 255, 255, .42));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}

/* Le même bandeau posé sur une table : --inset au lieu de --panel-2.
   Écrit une fois ici pour que personne n'ait à se souvenir du piège. */
.x4-table .x4-barre-outils,
.x4-barre-outils[data-sur="table"] {
  background: var(--inset, rgba(0, 0, 0, .035));
  border-color: var(--stroke, rgba(20, 20, 25, .075));
}


/* ══════════════════════════════════════════════════════════
   5. L'EN-TÊTE (§1.2)
   ══════════════════════════════════════════════════════════
   MESURE — identique sur les six écrans relevés (01-dashboard,
   02-prospects, 06-clients, 07-carnet, 08-carte, 10-todo,
   dc-tpl 191 et 192, verbatim) :

     sur-titre  font-size: 11px; font-weight: 620;
                letter-spacing: 0.08em; color: var(--v2-text-3, #6b6f76);
                text-transform: uppercase;
     titre      margin: 3px 0px 0px; font-size: 24px; font-weight: 680;
                letter-spacing: -0.04em; line-height: 1.1;

   ÉCART SIGNALÉ : la §1.2 écrit « le titre en 25 px ». Les six écrans
   de la maquette portent 24px, sans exception, et l'atlas le confirme
   (atlas-maq-01-dashboard, H1 : fs 24px, fw 680, y 32, h 26). La
   hiérarchie de vérité du document met la maquette avant le texte, et
   la consigne de lot ajoute « la mesure tranche ». C'est 24px — et
   c'est déjà ce que sert le CRM (v3-rail.css). À arbitrer par Joris
   s'il veut 25.

   Le sur-titre porte le contexte CHIFFRÉ, jamais un slogan (§1.2) :
   « PORTEFEUILLE CLIENT · 10 CONTRATS ». Il est écrit en casse
   normale et mis en capitales par le CSS : x4EnTete() reçoit donc
   « Portefeuille client · 10 contrats ».

   ── CE QUI RESTE VRAIMENT À CORRIGER ───────────────────────
   Relevé au banc, règle par règle : le CRM tient DÉJÀ la maquette sur
   presque tout l'en-tête. v3-rail.css pose padding 16px 30px 14px,
   fond --panel-2, gouttière de colonne 16px, titre 24px/1.1,
   sur-titre 620/1.2 ; v2-coque.css l'empile (order:-1, flex:1 0 100%).
   Rien de tout cela n'est réécrit ici : le réécrire créerait une
   deuxième définition de la même chose (§7 n° 2, qui divergerait au
   premier changement de coque.

   Restent trois écarts, et eux seuls :
     1. l'approche du titre — v2-coque.css pose -.035em, la maquette
        -.04em ;
     2. les 3px entre sur-titre et titre — la maquette les met en
        margin-top sur le h1, la coque en gouttière de rangée. Les
        deux ensemble feraient 6px : on tient le margin (mesure
        maquette) et on met la gouttière de rangée à zéro ;
     3. le sur-titre disparaît sous 1400px (styles.css:520 et :13209).
        Ici il ne décore pas, il CHIFFRE.

   NON REPRIS, VOLONTAIREMENT : la maquette laisse le titre en
   var(--font) (Manrope) là où le CRM pose var(--font-display)
   (Archivo). Ce n'est pas un oubli de la coque mais une décision de
   marque documentée dans tokens-v2.css — « le projet en utilise deux,
   d'où l'ajout de --font-display pour les titres ». La renverser sur
   cinq écrans ferait de leurs titres la seule Manrope du CRM, au
   milieu de trente titres en Archivo. À arbitrer, pas à trancher ici.

   ── POURQUOI CES SÉLECTEURS ────────────────────────────────
   Ils sont CONDITIONNÉS À LA PRÉSENCE D'UN ÉCRAN v4 dans le conteneur :
   `main:has(> #kanban-container > .x4-ecran)`. L'en-tête est partagé
   par tout le CRM et `data-x4-entete` y reste posé après un
   switchView() — rien ne le retire en quittant l'écran. Sans cette
   condition, le sur-titre des écrans HISTORIQUES passait en capitales
   11px dès qu'on avait ouvert le tableau de bord une fois : une fuite
   du lot hors de son écran. Avec elle, l'attribut résiduel est inerte,
   et x4EnTeteReset() devient un confort, plus une obligation.

   La spécificité suit : deux id (#kanban-container compte dans :has(),
   plus #page-title) = (2,3,1) contre les (1,3,2) de v3-rail.css:247 et
   les (1,2,2) de v2-coque.css:511. Ni !important, ni dépendance à
   l'ORDRE DE CHARGEMENT — une inversion d'un jour donnerait sinon 6px
   entre le sur-titre et le titre au lieu de 3, écart invisible en revue
   de code et évident à l'écran. Un seul sélecteur par règle suffit
   désormais : il couvre le cas avec coque v2 comme sans.

   `:has()` est déjà le socle de la § 1 (l'annulation du padding de
   #kanban-container) : même exigence de moteur, aucune régression
   nouvelle. Sur un moteur qui l'ignore, l'en-tête reprend simplement
   celui de v3-rail.css.
   ══════════════════════════════════════════════════════════ */

main:has(> #kanban-container > .x4-ecran) .header[data-x4-entete] #page-subtitle {
  display: block;
  order: -1;
  flex: 1 0 100%;
  margin: 0;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--v2-text-3, #6b6f76);
  /* Le sur-titre porte un compte : il ne se tronque pas en silence. */
  white-space: normal;
  overflow: visible;
}

main:has(> #kanban-container > .x4-ecran) .header[data-x4-entete] #page-title {
  margin: 3px 0 0;
  margin-right: auto;   /* repris de v2-coque : pousse les commandes à droite */
  font-size: 24px;      /* mesure maquette ; la §1.2 dit 25px — voir ci-dessus */
  font-weight: 680;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--v2-text, #16171a);
}

/* styles.css:520 et :13209 masquent le sous-titre sous 1400px. Sur ces
   écrans-là il ne décore pas, il CHIFFRE (« · 88 opportunités
   qualifiées ») : le masquer perd l'information que la §1.2 lui confie.
   Le corps est de toute façon en min-width: 1180px et défile. */
@media (max-width: 1400px) {
  main:has(> #kanban-container > .x4-ecran) .header[data-x4-entete] #page-subtitle { display: block; }
}

/* MESURE : sur-titre y 16, haut 13,2 → bas 29,2 ; titre y 32,2. Soit
   3px, ceux du margin-top — et rien d'autre. Or l'en-tête porte une
   gouttière de RANGÉE (10px dans v2-coque.css:499, 3px dans
   v3-rail.css) qui s'ajoute au margin et doublerait l'écart. On la
   remet à zéro : un seul réglage tient les 3px, pas deux qui
   divergent. Vérifié au banc : row-gap 0px, titre à y 32,2.
   La gouttière de COLONNE reste celle de la maquette : 16px (relevé
   sur le <header> des six écrans).
   (2,3,1) grâce aux deux id : passe devant v2-coque.css (1,2,2) ET
   v3-rail.css (1,3,2), sans !important et sans dépendre de l'ordre de
   chargement.

   Le reste du chrome de l'en-tête (padding 16px 30px 14px, fond
   --panel-2, filet --stroke-2, sticky) est DÉJÀ conforme à la
   maquette : v3-rail.css le pose pour tout le CRM. Rien à reprendre,
   et surtout rien à redéfinir ici — la hauteur de l'en-tête sert de
   référence à d'autres écrans (le `top: 96px` des en-têtes de tableau
   collants, v2-coque.css:78). */
main:has(> #kanban-container > .x4-ecran) .header[data-x4-entete] {
  row-gap: 0;
  column-gap: 16px;
}


/* ══════════════════════════════════════════════════════════
   6. LE PIÈGE .btn-icon
   ══════════════════════════════════════════════════════════
   styles.css:416 impose à TOUTE .btn-icon : width 15px, height 15px,
   opacity .85. Une icône de 14px (§2.2), de 13px (§5.4) ou de 26px
   (le carré du fil d'activité, §2.3) reprend 15px sans prévenir, et
   l'opacité éteint les icônes teintées.

   .x4-icone reprend la main : (0,2,0) contre (0,1,0), donc elle gagne
   sans !important et sans dépendre de l'ordre des feuilles. La taille
   se pilote par --x4-icone sur l'icône ou sur n'importe quel ancêtre.
   ══════════════════════════════════════════════════════════ */
.x4-ecran .x4-icone,
.x4-carte .x4-icone,
.x4-bande .x4-icone,
.header[data-x4-entete] .x4-icone {
  width: var(--x4-icone, 15px);
  height: var(--x4-icone, 15px);
  flex-shrink: 0;
  opacity: 1;
  vertical-align: baseline;
}

/* ── Glisser-déposer d'une carte vers une étape (08/09/2026) ─────────
   La carte tirée s'efface à moitié, son fantôme suit la souris, l'étape
   survolée se cercle d'ambre. Le corps coupe la sélection de texte le
   temps du geste. */
.x4-glisse-fantome { position: fixed; left: 0; top: 0; margin: 0; pointer-events: none; z-index: var(--z-alerte, 900); opacity: .92; box-shadow: 0 18px 40px -18px rgba(20, 20, 25, .45); transform: translate(-9999px, -9999px); will-change: transform; }
.est-glisse { opacity: .35; }
body.x4-glisse-en-cours { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.x4-glisse-en-cours * { cursor: grabbing !important; }
/* Pendant le geste, la case survolée ne change pas ; c'est le fantôme
   de la fiche qui prend l'encre de la case (variables posées par
   v4Glisser) — la couleur qu'elle aura une fois déposée. */
[data-x4c-col].est-depot, [data-x4pp-etape].est-depot { outline: 0; background: inherit; }
.x4-glisse-fantome.est-accueilli { border-left-width: 6px; }

/* ── La fenêtre de dépôt (glisser-déposer, 09/09/2026) ─────────────
   « Société → Étape », le commentaire, la date selon l'étape, les
   motifs. L'encre de l'étape d'arrivée souligne le chemin. */
.x4-depot { display: flex; flex-direction: column; gap: 10px; }
.x4-depot-chemin { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--v2-text-2, #55595f); padding: 10px 14px; border-radius: var(--r-sm, 12px); background: color-mix(in srgb, var(--x4-depot-encre, #3160b4) 12%, var(--panel-solid, #fff)); border-left: 4px solid var(--x4-depot-encre, #3160b4); }
.x4-depot-chemin i { font-style: normal; color: var(--v2-text-3, #6b6f76); }
.x4-depot-chemin b { font-weight: 680; color: var(--v2-text, #16171a); }
.x4-depot-l { font-size: 12.5px; font-weight: 640; color: var(--v2-text, #16171a); margin-top: 4px; }
.x4-depot-txt { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: var(--r-xs, 9px); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); font-family: inherit; font-size: 13.5px; line-height: 1.45; resize: vertical; }
.x4-depot-motifs { display: flex; flex-wrap: wrap; gap: 6px; }
.x4-depot-motifs button { height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); color: var(--v2-text-2, #55595f); font: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer; }
.x4-depot-motifs button.est-choisi { background: var(--v2-text, #16171a); border-color: transparent; color: var(--panel-solid, #fff); }
.x4-depot-date { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-depot-date span { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-depot-date input, .x4-depot-date select { padding: 6px 10px; border-radius: var(--r-xs, 9px); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); font: inherit; font-size: 13px; }