/* app/v2/styles/v9-arbitrages.css — LES ÉCARTS ORDONNÉS, ET EUX SEULS.
 *
 * Mission `mission-v9-demandes-porte`, 15/09. Chargée APRÈS `v9-signature.css`
 * (elle-même générée, jamais éditée à la main — voir son en-tête) : c'est la
 * SEULE feuille de ce lot écrite à la main, et chaque règle ci-dessous nomme
 * l'arbitrage qui la justifie (`ops/inventaires/DESIGN-V9-RELEVE.md` §0 ter,
 * sauf mention contraire). Aucune couleur en dur : tout consomme un jeton déjà
 * posé par `v9-signature.css` (`--iap-*`, `--v9-*`) ou par `revolut.css`
 * (`--du`, `--encaisse`, `--doux`) — les deux feuilles sont chargées avant
 * celle-ci (`gabarit.html`).
 */

/* ───────────────────────────────────────────────────────────────────────
   ARBITRAGE N°1 — la barre latérale et la nav de la maquette n'entrent
   jamais dans notre coquille. `#iap-signature-v9` est conçu par le dossier
   comme une grille à deux colonnes (sidebar + contenu, `grid-template-
   columns:160-190px minmax(0,1fr)`, bordure et rayon de 24px, min-height
   810px — l'habillage de la DÉMO iframe du designer). Nous n'insérons que le
   contenu de page (`[data-page="requests"]`) : sans ce reset, notre seul
   enfant hériterait de la colonne étroite prévue pour la sidebar, et
   porterait une bordure/un rayon pensés pour envelopper un shell entier.
   ─────────────────────────────────────────────────────────────────────── */
#iap-signature-v9 {
  display: block;
  border: 0;
  border-radius: 0;
  min-height: 0;
  background: transparent;
  box-shadow: none;
}

/* ───────────────────────────────────────────────────────────────────────
   ARBITRAGE — LES TROIS ONGLETS (GESTE, notre produit). La vue `requests`
   du fragment n'a pas d'onglets ; nous reprenons `.s-tabs` de la vue Devis,
   mais nos onglets sont des LIENS <a href> (changement de pile par URL,
   bookmarkable, bouton retour du navigateur) quand le dossier les code en
   <button> pilotés par JS pur (`document.querySelectorAll('[data-tab]')`
   dans le fragment). Même habillage visuel, valeurs reprises telles quelles
   des règles `.s-tabs button` déjà posées par v9-signature.css (aucune
   valeur nouvelle) — seul le sélecteur change de `button` à `a`.
   ─────────────────────────────────────────────────────────────────────── */
#iap-signature-v9 .s-tabs a {
  background: transparent;
  border-radius: 8px;
  white-space: nowrap;
  min-height: 44px; /* plancher cible — voir bloc PLANCHERS plus bas */
  font-size: 14px; /* plancher texte — la valeur du dossier (13px) descendait sous 14px (suite 793) */
  font-weight: 500;
  color: var(--v9-texte-button-3, var(--iap-text-secondary));
  padding: 9px 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* ⚠️ SANS CE `gap`, LE NOM ET LE COMPTE SE TOUCHENT — vu à l'œil (capture
     1400px, « À traiter3 » collé) : `display:inline-flex` (posé ici pour
     centrer verticalement le texte du lien) réduit le nœud de texte blanc
     entre « À traiter » et `.s-count` à un espace de largeur nulle — un
     comportement normal des conteneurs flex, pas un défaut du dossier. */
  gap: 4px;
}
#iap-signature-v9 .s-tabs a[aria-selected="true"] {
  background: var(--v9-fond-button-2, var(--iap-surface));
  color: var(--v9-texte-button-4, var(--iap-brand-navy));
  box-shadow: 0 1px 3px var(--v9-ombre-button, var(--iap-shadow-panel));
  font-weight: 650;
}

/* ───────────────────────────────────────────────────────────────────────
   ARBITRAGE — LA CATÉGORIE « URGENCE » RESTE ROUGE (§0 ter point 3 : « le
   rouge reste pour ce qui est dû » — ici étendu à ce qui est URGENT, même
   convention que le reste du produit réel, `revolut.css:.v2-pilule--rouge`).
   Le dossier n'a aucun jeton rouge (sa palette réserve l'ocre à
   « attention » — collision de convention documentée, tranchée par
   Houssem). On consomme --du/--encaisse/--doux de revolut.css, déjà
   chargée : aucune couleur nouvelle. Le ton ambre, lui, N'A PAS BESOIN
   d'une classe ici : le dossier porte déjà `.s-amber` pour ce dot
   (fragment, vue `requests` : `<span class="s-dot s-amber">`) —
   `demandes.js#pastilleEtatV9` la réutilise TELLE QUELLE.
   ─────────────────────────────────────────────────────────────────────── */
#iap-signature-v9 .s-dot--rouge { background: var(--du); }
#iap-signature-v9 .s-dot--vert { background: var(--encaisse); }
#iap-signature-v9 .s-dot--gris { background: var(--doux); }

/* ───────────────────────────────────────────────────────────────────────
   ARBITRAGE — LA COLONNE « ÉTAT » RESTE VISIBLE À 360px SANS DÉFILEMENT
   (relevé §2 : « Le tableau Demandes coupe la colonne État à 360px […] La
   maquette plie ici : fonction avant forme »). Sous le plancher de
   l'application (560px, §4.2 de CLAUDE.md — aucune @media du dépôt ne
   descend plus bas), le tableau `<table>` se lit comme une pile de cartes :
   la STRUCTURE (`<table><thead><tr><th>`) ne change pas, seule sa mise en
   page change — même patron que les tableaux responsives usuels, jamais un
   second balisage.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  #iap-signature-v9 [data-page="requests"] table,
  #iap-signature-v9 [data-page="requests"] thead,
  #iap-signature-v9 [data-page="requests"] tbody,
  #iap-signature-v9 [data-page="requests"] tr,
  #iap-signature-v9 [data-page="requests"] td {
    display: block;
    width: 100%;
  }
  #iap-signature-v9 [data-page="requests"] thead { display: none; }
  #iap-signature-v9 [data-page="requests"] tr {
    padding: 14px 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--iap-border);
  }
  #iap-signature-v9 [data-page="requests"] tr:last-child { border-bottom: 0; }
  #iap-signature-v9 [data-page="requests"] td {
    padding: 3px 0;
    text-align: left !important;
    border-bottom: 0 !important;
  }
  #iap-signature-v9 [data-page="requests"] td:nth-child(3) { margin: 4px 0; }

  /* ⚠️ ARBITRAGE N°6 DE HOUSSEM — AUCUNE INFORMATION DE DÉCISION NE
     DISPARAÎT EN MOBILE. Corrigé le 15/09, relu par la pilote sur
     `liste-360-app.png` : le dossier porte `.s-count{display:none}` sous
     580px (`v9-signature.css`) — une règle pensée pour LA SIENNE, le compte
     à côté d'une entrée de SA barre latérale, absente de notre coquille
     (arbitrage n°1). Sans ce correctif, elle éteignait AUSSI le compte de
     nos onglets (« À traiter » sans le « 3 »), qui n'a rien à voir avec la
     sidebar et reste une information dont l'artisan a besoin pour décider. */
  #iap-signature-v9 .s-tabs .s-count { display: inline; }

  /* ⚠️ CORRECTIF — LE MOIS DU BANDEAU ACCUEIL NE SE COUPE JAMAIS À 360px.
     Vu par la pilote sur `overview-360-app.png` (15/09) : « SEPTEMBR »,
     le « E » manquant. Mesuré : `v9-signature.css` (GÉNÉRÉE) pose
     `.u8-date{min-width:49px}` sous 580px — un plancher plus étroit que
     le mot le plus long qu'il porte (« SEPTEMBRE », ~100px calculé à
     14px + 1px de letter-spacing). Un flex-item AUTORISÉ À RÉTRÉCIR EN
     DESSOUS de son contenu déborde de sa boîte, et l'overflow-x:hidden qui
     empêche le défilement horizontal de la page (garanti par la suite 141)
     coupe silencieusement ce qui dépasse — le texte n'est jamais tronqué
     par une ellipse, il est amputé par le bord de l'écran.
     ⚠️ LA TAILLE NE BOUGE PAS (plancher 14px, inchangé) — c'est la MISE EN
     PAGE qui cède : `flex-shrink:0` restitue au bloc date sa largeur de
     contenu naturelle, jamais réduite sous ce dont « SEPTEMBRE » a besoin ;
     le bloc du titre (« Bonjour/Bonsoir … »), qui peut envelopper son texte
     à des espaces, se resserre à sa place — déjà observé sur deux lignes
     dans la capture, sans ce correctif. */
  #iap-signature-v9 .u8-date { flex-shrink: 0; }
}

/* ⚠️ SON PROPRE `@media`, À 580px — PAS 560px COMME LE BLOC CI-DESSUS.
   La cause de ce correctif (voir juste en dessous) tient EXACTEMENT au
   seuil où `.u8-orbit{grid-template-columns:1fr}` empile ses colonnes
   (v9-signature.css:667, généré, 580px) — pas au plancher mobile général de
   l'application (560px). Entre 561 et 579px, l'empilement a DÉJÀ eu lieu et
   la cause DÉJÀ disparu ; un seuil à 560px aurait laissé cette bande de 19px
   sans le correctif alors qu'elle en a besoin. */
@media (max-width: 580px) {
  /* ⚠️ CORRECTIF — mission-v9-clients-identique, 16/09, sur retour de la
     pilote (`.u8-total` repassé (a) après `mission-demo-variete`, remesuré :
     y relatif à `.u8-main` 98→100 à 1440px, 32→39 à 360px).

     LA VRAIE CAUSE N'EST PAS LE MONTANT : `.u8-total` a la MÊME hauteur des
     deux côtés (39-40px, `white-space:nowrap`, une seule ligne quelle que
     soit la longueur du texte — vérifié : un montant plus court ou plus long
     ne change RIEN à sa boîte). La cause est `.u8-tag` — « CAP ENCAISSEMENTS »
     — juste au-dessus : son plancher texte (cause 1, déjà déclaré impossible)
     fait passer sa hauteur de 14px (maquette, police 9px × line-height 1.5)
     à 21px (app, police 14px × 1.5, le RATIO de ligne est identique des deux
     côtés — resserrer `.u8-tag` diviserait de la maquette, ce n'est pas la
     bonne réparation). `.u8-total` suit avec `margin-top:18px` fixe : la
     boîte au-dessus a grandi de +7px, le total descend donc de +7px de plus
     qu'attendu.

     ⚠️ POURQUOI CE CORRECTIF NE VIT QUE SOUS 580px, ET C'EST MESURÉ, PAS
     DEVINÉ. Sous ce seuil, `.u8-orbit{grid-template-columns:1fr}` (généré,
     ligne 667 de v9-signature.css) empile `.u8-main`/`.u8-dial`/`.u8-received`
     en LIGNES au lieu de COLONNES : `.u8-main` n'est alors plus étiré à la
     hauteur d'un voisin, `justify-content:center` (v9-signature.css:619)
     n'a donc AUCUN espace à redistribuer — l'offset de `.u8-tag` DANS
     `.u8-main` est prouvé à ZÉRO, des DEUX côtés, quelle que soit la donnée
     réelle (pas seulement celle de ce test). Les +7px de `.u8-tag` s'y
     répercutent donc en ENTIER, sans rien qui les absorbe : retirer 18-7=11px
     de marge les annule EXACTEMENT, pour tout jeu de données.

     ⚠️ AU-DESSUS DE 580px, LE MÊME CALCUL NE TIENT PLUS — ET C'EST DÉCLARÉ
     « IMPOSSIBLE », PAS CORRIGÉ ICI. `.u8-main` y est étiré à la hauteur de
     `.u8-dial`/`.u8-received` (mise en grille), donc `justify-content:center`
     redistribue une partie de l'espace AU-DESSUS de `.u8-tag` — la part
     dépend de la hauteur de CES DEUX voisins, qui varie avec les VRAIES
     données (l'anneau, « Encaissé ce mois »). Le résidu observé (2px à
     1440px) est déjà PARTIELLEMENT annulé par cette redistribution ; un
     correctif fixe ici sur-corrigerait pour la donnée d'aujourd'hui et
     dérivera dès que les chiffres réels changent — voir
     `scripts/v9/ecarts-declares.json`, la déclaration « u8-total, y,
     1440px ». */
  #iap-signature-v9 .u8-total { margin-top: 11px; }
}

/* ───────────────────────────────────────────────────────────────────────
   PLANCHER CIBLE (≥44px) — `.s-button` est déjà tenu par le générateur (voir
   plus bas : `PLANCHER_CIBLE_PX` s'applique à toute déclaration `min-height`
   dont le sélecteur porte `.s-button`, globalement, pour les 19 vues).
   `.s-link` reste À POSER ICI : piège n°162, il n'a AUCUN `min-height` dans
   la cascade d'origine — un plancher ne peut PAS raisonner une propriété
   absente, seulement en corriger une trop basse.
   ─────────────────────────────────────────────────────────────────────── */
#iap-signature-v9 [data-page="requests"] .s-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* Dans une cellule de tableau ou une rangée d'actions, le lien reste ALIGNÉ
   À DROITE (patron du dossier — dernière colonne, dernier bouton) ; le
   fil d'Ariane (« ← Demandes », en tête de fiche) reste à gauche, seul son
   ANCRAGE change ci-dessus — mesuré : sans cette règle, le lien de retour
   ressortait à 33px de haut (< 44px), le seul .s-link hors ces deux
   contextes sur cet écran. */
#iap-signature-v9 [data-page="requests"] td .s-link,
#iap-signature-v9 [data-page="requests"] .s-actions .s-link {
  justify-content: flex-end;
}

/* ───────────────────────────────────────────────────────────────────────
   GRILLE DE COLONNES FIXE (mission-v9-demandes-identique, 15/09, cause R2).
   `#iap-signature-v9 table{width:100%}` du dossier N'A NI colgroup NI
   largeur posée sur les colonnes : c'est un tableau en layout AUTO, dont la
   largeur de chaque colonne suit le texte le plus long qu'elle contient.
   Mesuré sur les 2 lignes de démo, à 1440px : Client 368px (32.5%), Objet
   383px (33.9%), État 227px (20%), action 154px (13.6%) d'une table de
   1132px. Notre table est le MÊME layout auto, mais nourri de 41 demandes
   RÉELLES dont l'Objet est 2 à 3 fois plus long que la démo (« Demande de
   passage sur place, pas encore de devis en jeu. » contre « Isolation des
   combles ») — le layout auto du navigateur redistribue alors les colonnes
   très différemment (mesuré avant ce correctif : Client 238px, Objet 613px,
   État 197px, action 84px). REPRODUIRE LA GRILLE DE LA MAQUETTE suppose donc
   de la FIGER plutôt que de rejouer le même calcul sur un texte plus long :
   `table-layout:fixed` + les largeurs ci-dessous (les 4 valeurs mesurées sur
   la maquette, en px — la colonne de contenu est de largeur FIXE, `--colonne`
   dans `v9-signature.css`, un % aurait juste réintroduit l'arrondi que ces
   valeurs en px évitent) empêchent la ligne la plus longue de distordre la
   colonne pour les 41 lignes — l'Objet réel s'enveloppe sur plusieurs
   lignes au lieu d'élargir sa colonne, ce que fait déjà tout tableau
   responsive standard. Posées sur `<th>` (le premier rang lu par l'algorithme
   `fixed`), donc sans toucher au balisage `<td>` de chaque ligne. */
#iap-signature-v9 [data-page="requests"] table { table-layout: fixed; }
#iap-signature-v9 [data-page="requests"] th:nth-child(1) { width: 368px; }
#iap-signature-v9 [data-page="requests"] th:nth-child(2) { width: 383px; }
#iap-signature-v9 [data-page="requests"] th:nth-child(3) { width: 227px; }
#iap-signature-v9 [data-page="requests"] th:nth-child(4) { width: 154px; }

/* ⚠️ PLANCHER TEXTE (≥14px) ET PLANCHER CHAMP (≥16px, textarea) : TENUS PAR
   LE GÉNÉRATEUR, PAS ICI. Consigne de Houssem, 15/09, après refus de la
   pilote (suite 793 : 83 tailles sous 14px dans une première version qui les
   posait à la main, écran par écran). `scripts/v9/consolider-cascade.js`
   applique désormais `PLANCHER_TEXTE_PX`/`PLANCHER_CHAMP_PX` à TOUTE
   déclaration `font-size` de `v9-signature.css`, pour les 19 vues — th/td/
   .s-status/label/textarea y sont donc déjà ≥14px (≥16px pour textarea)
   AVANT que cette feuille ne charge. Une règle locale ici dupliquerait une
   garantie que le générateur tient déjà pour tout le dossier, et diverger le
   jour où le générateur change de valeur (règle 1 duovicies : un fait a un
   seul endroit). Voir le rapport JSON du générateur (`planchersAppliques`)
   pour la liste de chaque morsure.*/

/* ─────────────────────────────────────────────────────────────────────────
   COQUILLE V9 — mission-v9-shell, 15/09. Tenant interne/recette SEULEMENT
   (`v9ShellAutorise()`, `app/v2/main.js`), rendue par `app/v2/coquille.js`.

   ⚠️ ZÉRO SÉLECTEUR `#iap-signature-v9` ICI : ce préfixe scope les feuilles
   du dossier au CONTENU d'écran (Demandes, Accueil), pas à la coquille — la
   dupliquer aurait imposé un second id="iap-signature-v9" sur la page
   (structure invalide, deux racines pour la même ID). La coquille consomme
   les MÊMES jetons `--iap-*`/`--v9-*` directement : ils sont posés sur
   `:root` par `v9-signature.css`, donc déjà globaux sur toute page (voir son
   en-tête) — aucune couleur en dur ci-dessous.

   ⚠️ ARBITRAGE N°1 DE HOUSSEM — MOBILE INCHANGÉ. Sous 900px (le point de
   rupture desktop EXISTANT de l'app, `revolut.css:1180` /
   `revolut.css:1042`), seules les COULEURS/POLICE de l'en-tête ACTUEL
   changent (jetons du dossier) ; sa structure, et la barre basse, ne sont
   touchées par AUCUNE règle d'ici — pas de bouton « Menu » ajouté.
   ───────────────────────────────────────────────────────────────────────── */

/* Les deux coquilles sont TOUJOURS rendues (voir coquille.js#page) — le CSS
   décide laquelle est visible. Par défaut (mobile) : la V9 desktop est
   masquée. */
.v2-barre--v9, .v2-top--v9 { display: none; }

@media (max-width: 899px) {
  /* Mobile : l'en-tête ACTUEL reste, seules ses couleurs/police prennent la
     signature V9 — la structure (titre + cloche + avatar) ne bouge pas. */
  .v2-app--v9 .v2-entete {
    background: var(--iap-surface);
    color: var(--iap-text);
    font-family: var(--iap-font);
    border-bottom: 1px solid var(--iap-border);
  }
  .v2-app--v9 .v2-sous-titre { color: var(--iap-text-secondary); font-family: var(--iap-font); }
}

@media (min-width: 900px) {
  /* Desktop : la coquille V9 remplace l'ancienne latérale + en-tête. */
  .v2-app--v9 .v2-barre { display: none; }
  .v2-app--v9 .v2-entete,
  .v2-app--v9 .v2-sous-titre { display: none; }
  .v2-barre--v9 { display: flex; flex-direction: column; }
  .v2-top--v9 { display: flex; }
}

.v2-barre--v9 {
  /* ⚠️ `position: sticky; top: 0; height: 100vh` — même patron QUE
     `.v2-barre` (revolut.css:169) : SANS ÇA, la barre s'étire à la hauteur
     du CONTENU (flex row, align-items: stretch par défaut) et le profil du
     bas — `margin-top: auto` sur `.v2-v9-bas` — se retrouve au bas d'une
     colonne bien plus haute que l'écran, hors de vue tant qu'on n'a pas
     défilé jusqu'au bout de la page. Trouvé à l'œil (capture 1440px,
     profil absent) après le retour de Houssem sur ce même lot. */
  width: 190px; flex: none; position: sticky; top: 0; height: 100vh; height: 100dvh;
  /* ⚠️ ÉTAPE 3 (cause 12, pilote 15/09) — même dégradé que le dossier
     (v9-signature.css:384, généré, trois variables déjà posées) : un
     `background-color` plat ne suffisait pas, `getComputedStyle(...)
     .backgroundColor` d'un dégradé rend transparent des deux côtés — mais
     la TEINTE réellement peinte à l'écran ne correspondait qu'à une seule
     des trois. Padding-top aligné sur la valeur mesurée (28px, pas 20). */
  background: linear-gradient(155deg, var(--v9-fond-s-sidebar) 0%, var(--v9-fond-s-sidebar-2, var(--v9-fond-s-sidebar)) 65%, var(--v9-fond-s-sidebar-3, var(--v9-fond-s-sidebar)) 100%);
  border-right: 1px solid var(--v9-bordure-s-sidebar, var(--iap-border));
  font-family: var(--iap-font);
  padding: 28px 12px 20px 12px;
  gap: 4px;
  overflow-y: auto;
}
/* ⚠️ ÉTAPE 3 (cause 6, pilote 15/09) — taille/graisse/espacement alignés sur
   la maquette RÉELLE mesurée (`.s-logo`, dump `getComputedStyle` à 1440 :
   fontSize 24px, fontWeight 650, padding 0 12px 0 13px, letter-spacing
   -0.8px — même valeurs que le dossier généré, v9-signature.css:385,493).
   La couleur (`--iap-brand-navy`) était déjà le bon jeton. */
.v2-v9-logo {
  display: flex; align-items: center; gap: 9px; padding: 0 12px 0 13px;
  color: var(--iap-brand-navy); font-weight: 650; font-size: 24px;
  letter-spacing: -0.8px;
}
/* ⚠️ AJOUTÉ — retour n°2 de Houssem : l'ancienne `<img>` (l'icône du menu
   basse, pensée pour ~22px de large réels dans une image bien plus grande)
   rendait un dessin de ~8px, illisible. La maquette porte un CARRÉ NAVY
   ARRONDI avec un « i » — même patron que `.s-logomark` du dossier
   (`v9-signature.css` : fond navy, texte clair, ~30-32px). Reconstruit en
   CSS pur (zéro dépendance, zéro fichier binaire) : un carré net à ~26px,
   jamais un import d'image qui peut se retrouver flou ou mal cadré.
   ⚠️ ÉTAPE 3 (cause 6) — dimensions alignées sur la maquette RÉELLE mesurée
   (30×32px, rayon 10px, fontSize 21px, padding 0 2px 0 0 — la cascade finale
   du dossier grandit le glyphe au-delà des 22×25px/rayon 7px du markup brut). */
.v2-v9-logomark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 32px; border-radius: 10px; flex: none;
  background: var(--iap-brand-navy); color: var(--iap-surface);
  font-family: Georgia, serif; font-style: normal; font-weight: 500;
  font-size: 21px; line-height: 1; padding: 0 2px 0 0;
}
.v2-v9-logo-mot { font-family: var(--iap-font); }
/* ⚠️ ÉTAPE 3 (cause 12, pilote 15/09) — margin/padding/couleur/poids alignés
   sur le dossier généré (v9-signature.css:388,492 : `.s-workspace{padding:
   0 2px 0 2px;margin:27px 12px 24px 12px}`, `{font-size:14px;color:var(
   --v9-texte-s-workspace)}`, poids NORMAL — notre 600 n'existe QUE chez
   nous, comme le `margin-bottom` d'origine sur `.v2-v9-groupe-titre`
   (cause 3), même famille de défaut). */
.v2-v9-espace {
  margin: 27px 12px 24px 12px; padding: 0 2px; font-size: 14px; font-weight: 400;
  color: var(--v9-texte-s-workspace, var(--iap-text-secondary)); border-bottom: 1px solid var(--iap-border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-v9-nav { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.v2-v9-groupe { display: flex; flex-direction: column; gap: 2px; }
/* ⚠️ CORRIGÉ — retour n°2 : capitales grasses espacées n'existent PAS dans
   la maquette pour « Relation client » — petit, gris, casse normale.
   Plancher 14px conservé (règle du skill, déjà tenue).
   ⚠️ ÉTAPE 3 (cause 3, pilote 15/09) — padding/margin ET couleur alignés sur
   le dossier généré (v9-signature.css:391,491 : `.s-navgroup{padding:23px
   12px 7px 12px;font-size:14px;font-weight:600;color:var(--v9-texte-s-
   navgroup)}`, margin NUL des deux côtés — notre `margin-bottom:2px`
   n'existe QUE chez nous). */
.v2-v9-groupe-titre {
  padding: 23px 12px 7px 12px; margin: 0; font-size: 14px; font-weight: 600;
  color: var(--v9-texte-s-navgroup, var(--iap-text-secondary));
}
/* ⚠️ ÉTAPE 3 (cause 2, pilote 15/09) — LE DOSSIER (v9-signature.css:489-490,
   généré) POSE DÉJÀ `nav button{font-size:14px;font-weight:500;color:var(
   --v9-texte-button);padding:11px 12px;min-height:44px}` ET
   `nav button[aria-current=page]{font-weight:650;color:var(--v9-texte-
   button-2)}` — le plancher CIBLE (44px) y est DÉJÀ tenu, exactement.
   `.v2-v9-lien` réinventait ses propres valeurs (`--cible`, 48px de
   CONFORT — jamais le plancher 44px strict — un poids/rayon/padding qui ne
   venaient pas du dossier) : on consomme les tokens et les valeurs
   générées, un à un. ⚠️ 44px, PAS 48 : la maquette ET le plancher disent
   la même chose ici, consigne de Houssem 15/09 — EN LITTÉRAL, jamais
   `var(--cible-min)` : la v2 n'importe PAS `app/theme/tokens.css`
   (`app/v2/SYSTEME-A-PART.md`), et le générateur lui-même pose cette même
   valeur en dur (`v9-signature.css:489`), pas via un jeton. */
/* ⚠️ ÉTAPE 3 (résiduel de la cause 2, pilote 15/09) — `border-left: 3px
   solid` RÉSERVAIT DE LA PLACE (même transparent, `box-sizing:border-box`
   pousse le contenu de 3px) — la maquette (v9-signature.css:650, généré)
   marque la page active par un `box-shadow: inset 3px 0 …`, qui PEINT le
   même repère SANS toucher la boîte. C'est ce 3px, cumulé à la largeur de
   l'icône, qui décalait tous les libellés de nav de leur position réelle
   (mesuré : x 22→43 sur les quatre entrées). */
.v2-v9-lien {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 11px 12px; border-radius: 9px;
  color: var(--v9-texte-button, var(--iap-text-secondary));
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.v2-v9-lien svg { width: 18px; height: 18px; flex: none; }
.v2-v9-lien:hover { background: var(--v9-fond-button, var(--iap-surface)); color: var(--iap-text); }
.v2-v9-lien[aria-current="page"] {
  background: var(--iap-selected); color: var(--v9-texte-button-2, var(--iap-brand-navy));
  box-shadow: inset 3px 0 var(--iap-brand-ochre); font-weight: 650;
}
.v2-v9-bas { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--iap-border); }
/* Le menu de compte (avatar + popover) est réutilisé TEL QUEL — seul son
   ANCRAGE change (bas de latérale au lieu de l'en-tête) : aucune règle de
   `.v2-compte`/`.v2-avatar` n'est redéfinie ici. */

/* ⚠️ AJOUTÉ — retour de Houssem, même lot. Le bloc profil du bas était SEUL
   l'avatar (déclencheur du popover) : le TEXTE (nom + contexte, lus de la
   session par `profilBasV9()`, coquille.js) prend la place à côté, jamais
   au-dessus — la maquette place l'identité en ligne avec l'avatar, pas
   empilée, et c'est ce que l'espace de 190px permet sans écraser le nom.
   ⚠️ RETOUR N°2 : l'avatar est maintenant le PREMIER enfant dans le DOM
   (coquille.js) — cette règle n'a besoin de rien de plus, `align-items:
   center` place les deux où qu'ils soient dans l'ordre du flux. */
/* ⚠️ ÉTAPE 3 (cause 5, pilote 15/09) — couleur posée ICI, sur le conteneur,
   pour que le NOM ET LE RÔLE en héritent tous les deux sans la redéclarer :
   le dossier (v9-signature.css:548, généré) pose `.s-bottom{color:var(--v9-
   texte-s-bottom)}` sur SON conteneur, exactement comme ici. */
.v2-v9-profil { display: flex; align-items: center; gap: 10px; color: var(--v9-texte-s-bottom, var(--iap-text)); }
.v2-v9-profil-texte { flex: 1; min-width: 0; }
/* ⚠️ CORRIGÉ — retour n°2 : le nom de démonstration réel
   (« Administration (démo locale) », `platform/app/lib/demo.js`) ne tient
   PAS sur une ligne à 14px dans 190px de barre, quelle que soit la mise en
   page — et Houssem veut qu'IL NE SOIT JAMAIS TRONQUÉ. Le nom PEUT donc
   passer à une seconde ligne (`white-space: normal`, sans ellipse) ; un nom
   COURT (l'immense majorité des utilisateurs réels) reste sur une seule
   ligne par la force des choses — rien à forcer pour ce cas-là. */
.v2-v9-profil-nom {
  font-size: 14px; font-weight: 700; color: var(--v9-texte-s-bottom, var(--iap-text));
  white-space: normal; overflow-wrap: break-word; line-height: 1.25;
}
/* ⚠️ ÉTAPE 3 (cause 5, pilote 15/09) — couleur alignée sur le dossier
   généré (v9-signature.css:548 : `.s-bottom{font-size:14px;color:var(--v9-
   texte-s-bottom)}`) — le rôle utilisait `--iap-text-secondary`, une couleur
   proche mais pas le jeton exact du bloc profil. */
.v2-v9-profil-role { font-size: 14px; color: var(--v9-texte-s-bottom, var(--iap-text-secondary)); }

.v2-colonne--v9 { width: 100%; }

/* ⚠️ ÉTAPE 1 — LARGEUR DE LA COLONNE DE CONTENU (1210048px² · section ·
   width · 1168 → 760, `scripts/v9/lister-ecarts.js --largeur 1440`).
   `.v2-page` (rendue à l'intérieur de `.v2-colonne--v9`, coquille.js) tient
   sa largeur de `--colonne` (`revolut.css:73`, 760px) : c'est la colonne de
   l'app CLASSIQUE, et `coquille.js` porte un avertissement explicite contre
   son élargissement (« LE POINT OÙ L'ON SE TROMPE : élargir la colonne au
   bureau […] ça redonne exactement le back-office qu'on ne veut plus »).
   Cet avertissement vise le shell `.v2-app` d'AVANT le 15/09 (V2, grammaire
   Revolut) — il ne parle pas de la signature V9, qui a sa PROPRE largeur de
   référence : celle du dossier de maquette, 1168px de contenu. Une variable
   CSS est héritée : la redéclarer ICI, sur `.v2-app--v9` seul, la fait
   suivre par `.v2-page` À L'INTÉRIEUR de ce shell sans toucher `--colonne`
   sur `:root` — aucun autre écran (classique ou non-V9) ne bouge. Même
   patron que la doctrine du skill : consommer la variable, ne pas la
   recopier en valeur littérale ; ici on la RESSERRE localement, on ne la
   redéfinit pas globalement. */
/* ⚠️ ÉTAPE 3 (B, pilote 15/09) — TYPOGRAPHIE DE BASE HÉRITÉE, À LA RACINE
   SEULE. `body` (revolut.css:144-149, l'app CLASSIQUE) pose
   `font-size:15px;line-height:1.45;font-weight:500` — tout ce qui, dans le
   shell V9, ne déclare pas son propre style en hérite CETTE base (la
   latérale, la nav, la barre de contexte mesuraient toutes 15px/500 avant ce
   correctif, jamais la base de la signature V9).
   La racine V9 de la maquette (`#iap-signature-v9`, v9-signature.css:223 —
   `line-height:1.5`, ligne GÉNÉRÉE depuis le dossier — et :488 — généré —
   `font-size:14px;font-weight:400;color:var(--iap-text)`) pose ces QUATRE
   valeurs sur SA racine et RIEN d'autre : `.v2-app--v9` est notre racine
   équivalente, les mêmes quatre valeurs ici les font hériter par tout ce qui
   ne les redéfinit pas, sans toucher un seul sélecteur enfant. */
.v2-app--v9 { --colonne: 1168px; font-family: var(--iap-font); font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--iap-text); }
/* ⚠️ ÉTAPE 3 (cause 12, pilote 15/09) — `color` posée ICI, sur le
   conteneur (le fil d'ariane hérite déjà `--v9-texte-s-top` par lui-même,
   mais la boîte ELLE-MÊME, comparée telle quelle par l'instrument, restait
   sur la couleur de base héritée de la racine). */
.v2-top--v9 {
  align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 12px calc(18px + 14px);
  background: var(--v9-fond-s-top, var(--iap-surface));
  color: var(--v9-texte-s-top, var(--iap-text-secondary));
  border-bottom: 1px solid var(--iap-border);
  font-family: var(--iap-font);
}
/* ⚠️ ÉTAPE 3 (cause 4, pilote 15/09) — couleur alignée sur le dossier
   généré (v9-signature.css:494 : `.s-top{font-size:14px;color:var(--v9-
   texte-s-top)}`), consommée au lieu de `--iap-text-secondary`. */
.v2-v9-fil { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--v9-texte-s-top, var(--iap-text-secondary)); }
.v2-v9-fil span:last-child { color: var(--iap-text); font-weight: 700; }

/* ⚠️ AJOUTÉ — retour de Houssem : la cloche N'EST PAS SUPPRIMÉE de la barre
   de contexte, mais son badge (`.v2-cloche-badge`, `revolut.css`) consomme
   `--du`, le ROUGE de l'argent dû ailleurs dans le produit — un ton qui
   n'a rien à voir ici (aucune notification de la cloche n'est un impayé) et
   qui accroche l'œil bien plus que la maquette, sobre. Un compteur discret,
   au ton de la signature (navy sur liséré clair), jamais supprimé.
   ⚠️ RETOUR N°2 : SCOPÉ À `.v2-app--v9` ENTIER, PAS SEULEMENT `.v2-top--v9`
   — la cloche du tenant interne/recette vit aussi dans l'EN-TÊTE MOBILE
   (`.v2-entete`, arbitrage n°1 : structure inchangée, seuls les jetons de
   couleur suivent la signature), et son badge y restait rouge (mesuré à
   360px, capture après le premier retour). */
.v2-app--v9 .v2-cloche-badge {
  background: var(--iap-brand-navy); color: var(--inverse);
  box-shadow: 0 0 0 2px var(--iap-surface);
}

/* ───────────────────────────────────────────────────────────────────────
   ARBITRAGE — MISSION `mission-v9-agenda-identique`, 16/09. `.s-document`
   du fragment est un `<div>` (voir l'en-tête V9 d'`agenda.js` : sa ligne
   peuplée vient du `<script>` inline, `document.createElement('div')`) ;
   notre ligne est un `<button>`, pour porter un vrai geste (`data-geste=
   "rdv"`) là où celle de la maquette est inerte. `v9-signature.css` n'a
   habillé `.s-document` QUE pour un `<div>` — un séparateur bas
   (`border-bottom`), rien d'autre — et ne reset AUCUNE autre propriété que
   le navigateur pose par défaut sur un `<button>` (bordure haute/droite/
   gauche « outset », fond gris de bouton, largeur au contenu plutôt qu'au
   conteneur). Trois défauts trouvés À L'ŒIL, capture par capture, sur
   `agenda-1440-app.png` — AUCUN n'était visible dans `lister-ecarts.js` :
   la maquette n'a aucune ligne peuplée à comparer (son fragment statique ne
   montre que l'état vide), donc rien de ce que porte réellement `.s-
   document` n'entre dans le calcul des écarts (a)/(b)/(c).
     1. LARGEUR — un `<button>` en `display:flex` reste dimensionné à son
        contenu (443px sur 1054px de conteneur), là où un `<div>` remplit
        par défaut. `width:100%` le corrige.
     2. DÉBORDEMENT — `#v3-calendar-list .s-document` porte en plus
        `margin-left:5px` (v9-signature.css:724, l'encoche de l'accent
        gauche) : ajoutée à `width:100%`, elle pousse le bord droit de 5px
        hors du cadre arrondi. `calc(100% - 5px)`, propre à ce contexte,
        la retranche.
     3. BORDURE/FOND FANTÔMES — le troisième défaut, visible seulement
        après avoir corrigé les deux premiers : chaque ligne restait
        cerclée d'un liséré et d'un aplat gris — la bordure et le fond par
        défaut du `<button>`, qu'aucune règle de `.s-document` ne
        neutralise puisqu'elle n'a jamais eu à le faire pour un `<div>`. */
#iap-signature-v9 button.s-document {
  appearance: none;
  background: transparent;
  width: 100%;
  text-align: left;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  /* border-bottom NON touchée : `.s-document` (v9-signature.css) la pose
     déjà, en AUTEUR — elle gagne sur la bordure UA du bouton sans aide. */
}
#iap-signature-v9 #v3-calendar-list button.s-document {
  width: calc(100% - 5px);
  /* border-left NON touchée non plus : la règle `#v3-calendar-list
     .s-document{border-left…}` (v9-signature.css:724) est deux ID, elle
     gagne sur `border-left:0` ci-dessus sans qu'il faille la répéter ici. */
}

/* ───────────────────────────────────────────────────────────────────────
   ARBITRAGE — MISSION `mission-v9-desactive`, 16/09, ORDRE DIRECT DE
   HOUSSEM. `v9-signature.css` (généré depuis la cascade du designer) ne
   porte AUCUNE règle `:disabled` — mesuré : zéro occurrence de `:disabled`
   ou `[disabled]` dans les deux feuilles V9. Un `.s-button` désactivé (nos
   écrans en posent partout : Agenda « Déplacer »/« Annuler » d'un
   rendez-vous externe, Clients « Demander un avis »/« Rappeler » sans
   lien, Avis « Demander un avis » bloqué — attribut `disabled` toujours
   posé AVEC un `title` disant pourquoi, jamais `aria-disabled` : mesuré
   par `grep -rn disabled app/v2/ecrans/*.js`, zéro `aria-disabled` sur
   `.s-button` dans tout `app/v2/`) rendait donc EXACTEMENT le même fond et
   la même encre qu'un bouton actif de la même classe — un artisan clique
   et rien ne répond, sans qu'aucun signe ne l'ait prévenu.

   La valeur vient de la maquette elle-même :
   `livraison-claude-iapilote-design-v9/maquette-v9.html:595-598` —
   `.btn:disabled, .nav-link:disabled, .nav-link[aria-disabled="true"] {
   cursor: not-allowed; opacity: 0.4; }`. Reprise à l'identique : `opacity`
   fonctionne sur TOUTE variante (`.s-button` seul comme `.s-button.s-
   primary`) sans avoir à redéclarer un fond ou une encre par variante — un
   bouton désactivé s'assombrit vers le fond de la carte au lieu de
   garder son ocre ou son gris plein. `[aria-disabled="true"]` est ajouté
   par fidélité à la forme de la maquette (elle couvre les deux), même si
   la mesure ci-dessus dit qu'aucun écran ne l'utilise aujourd'hui — un
   écran V9 à venir qui l'introduirait n'aurait pas à répéter la règle.

   Le curseur suit la même source. Le focus clavier n'est PAS touché ici :
   `#iap-signature-v9 button:focus-visible` (v9-signature.css:228) existe
   déjà, généré depuis la même cascade, et rien dans ce fichier ne redéfinit
   `outline` sur `button` ou `.s-button` — mesuré (`grep -n "outline"
   v9-arbitrages.css`) avant d'écrire cette phrase. */
#iap-signature-v9 .s-button:disabled,
#iap-signature-v9 .s-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.4;
}

/**
 * LE SQUELETTE DU COMPLÉMENT DE L'ACCUEIL V9 — mission `mission-accueil-appels`,
 * 16/09. `.u8-path-squelette`, `.s-tabs-squelette` et `.s-panel-squelette`
 * (`app/v2/ecrans/accueil.js#complementV9Squelette`) portent volontairement
 * des classes DIFFÉRENTES de `.u8-path`/`.s-tabs`/`[data-home-panel]` — le
 * contenu RÉEL — pour qu'une suite qui attend ce dernier ne tombe jamais sur
 * le squelette encore en place (suites 918, 941). Elles reprennent
 * simplement l'espacement de leurs équivalents réels (`.u8-path`,
 * `v9-signature.css:639` ; `.s-tabs`, `v9-signature.css:407`), pour que le
 * squelette n'occupe ni plus ni moins de place que ce qu'il remplace —
 * aucun saut de mise en page au moment où le complément réel arrive.
 */
#iap-signature-v9 .u8-path-squelette { margin-top: 26px; margin-bottom: 26px; }
#iap-signature-v9 .s-tabs-squelette { margin-bottom: 17px; }
#iap-signature-v9 .s-panel-squelette { margin-bottom: 26px; }