/* =====================================================================
   Design System — Components (composants utilitaires + surcharges Bootstrap)
   ---------------------------------------------------------------------
   Convention : utiliser EXCLUSIVEMENT les tokens définis dans tokens.css
   (aucune valeur hex en dur ici, sauf cas extrêmement justifiés).
   ---
   Périmètre IMPL-1 : règles globales nécessaires AVANT le port des vues.
   17 règles portées depuis app.css + 23 sélecteurs portés depuis
   documents-edit.css + surcharges Bootstrap natives (DI-17).
   ---
   Les règles spécifiques à un domaine métier (Settings, Catalogue,
   Dashboard, etc.) seront ajoutées par les sous-specs CORR-DS-IMPL-2..20.
   ---
   Spec : CORR-DS-IMPL-1
   ===================================================================== */

/* ─── Base : police globale + body ─────────────────────────────────── */

body {
  font-family: var(--font-sans);
  background-color: var(--slate-50);
  color: var(--slate-900);
  font-size: var(--fs-base);
}

/* =====================================================================
   Composants Bootstrap surchargés (DI-17 — conservation markup natif)
   ===================================================================== */

/* ─── Modal — surcharge Bootstrap, pas de rename .modal-overlay ─────── */
.modal-content {
  border-radius: var(--radius-card);
  border: none;
  box-shadow: var(--shadow-card-hover);
}
.modal-header {
  border-bottom: 1px solid var(--slate-100);
}
.modal-footer {
  border-top: 1px solid var(--slate-100);
}

/* ─── Boutons Bootstrap (surcharge minimale — couleur Chef appliquée) ─ */
.btn {
  border-radius: var(--radius-btn);
  font-weight: 500;
}
.btn-primary {
  background-color: var(--accent-500);
  border-color: var(--accent-500);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--accent-600);
  border-color: var(--accent-600);
}
.btn-outline-primary {
  color: var(--accent-500);
  border-color: var(--accent-500);
}
.btn-outline-primary:hover {
  background-color: var(--accent-500);
  border-color: var(--accent-500);
}

/* ─── Cartes Bootstrap ─────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-card);
  border: 1px solid var(--slate-100);
  box-shadow: var(--shadow-card);
}

/* ─── Tooltip / Popover (marges & ombres adoucies) ─────────────────── */
.tooltip-inner {
  background-color: var(--slate-900);
  font-size: var(--fs-sm);
}
.popover {
  border-radius: var(--radius-card);
  border: 1px solid var(--slate-100);
  box-shadow: var(--shadow-card-hover);
}

/* ─── Nav-tabs / Tab-pane (cohérence visuelle) ─────────────────────── */
.nav-tabs .nav-link.active {
  color: var(--accent-700);
  border-bottom: 2px solid var(--accent-500);
}

/* =====================================================================
   Layout — sidebar / header / page-content (porté depuis app.css)
   ===================================================================== */

/* ─── Sidebar ─── Règle 3 (app.css:17-23) — CORR-DS-IMPL-2bis-A : fond Mint clair */
#sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  flex-shrink: 0;
  background: var(--slate-50);
  border-right: 1px solid var(--slate-100);
  transition: margin-left 0.25s ease-in-out, width 0.25s ease-in-out;
  overflow-y: auto;
}

/* Spec 110-11 : sidebar sticky desktop ─── Règle 4 (app.css:26-32) */
@media (min-width: 769px) {
  #sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

/* Spec 110-11 : sidebar collapsed desktop ─── Règle 5 (app.css:35-52) */
#sidebar.collapsed {
  width: 60px;
  min-width: 60px;
}
#sidebar.collapsed .sidebar-brand span,
#sidebar.collapsed .nav-link span,
#sidebar.collapsed .sidebar-section-title {
  display: none;
}
/* Spec 114 : le texte de la marque se masque (règle ci-dessus, déjà en place) ;
   le logo, lui, ne disparaît pas tout seul — il doit rétrécir pour tenir dans
   la barre réduite à 60px (moins le padding p-3 du conteneur). */
#sidebar.collapsed .sidebar-brand-logo {
  width: 24px;
  height: 21px;
  margin-right: 0 !important;
}

/* Spec 114 (V8, maquette approuvée par le chef 2026-08-29) : le nom de marque
   en deux mots, couleurs relevées au pixel dans le logo — jamais le bleu
   Bootstrap par défaut, qui n'existe nulle part dans l'emblème. */
.marque-mots {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.marque-mot1 {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #56524c;
}
.marque-mot2 {
  /* Police vendorisée (app/public/assets/vendor/mrs-saint-delafield/) — le
       même rendu sur tous les appareils, plus de dépendance à une police
       système. Choisie par le chef parmi quatre polices comparées au logo. */
  font-family: "Mrs Saint Delafield", cursive;
  letter-spacing: 0.02em;
  color: #df572f;
}
.sidebar-brand .marque-mot1 {
  font-size: 15.5px;
}
.sidebar-brand .marque-mot2 {
  font-size: 17px;
}
.auth-brand .marque-mot1 {
  font-size: 32.6px;
}
.auth-brand .marque-mot2 {
  font-size: 29.1px;
}
#sidebar.collapsed .nav-link {
  text-align: center;
  padding: 8px 0;
  justify-content: center;
}
#sidebar.collapsed .nav-link i {
  margin-right: 0 !important;
  font-size: 1.1rem;
}

/* ─── Sidebar nav-link ─── Règle 6 (app.css:54-71) — CORR-DS-IMPL-2bis-A : couleurs Mint */
.sidebar .nav-link {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--slate-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar .nav-link.active {
  background-color: var(--accent-50);
  color: var(--accent-700);
  font-weight: 600;
}
.sidebar .nav-link:hover {
  background-color: var(--slate-100);
  color: var(--accent-700);
}

/* ─── Sidebar brand ─── Règle 7 (app.css:73-77) — CORR-DS-IMPL-2bis-A : couleur slate */
.sidebar-brand {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  color: var(--slate-900);
  font-weight: 700;
}

/* ─── Header sticky ─── Règle 8 (app.css:80-86) */
#page-header {
  height: var(--header-height);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ─── Page content ─── Règle 9 (app.css:89-91) */
#page-content {
  min-width: 0; /* évite débordement flex */
}

/* ─── Sidebar mobile (≤ 768px) ─── Règle 13 (app.css:119-131) */
@media (max-width: 768px) {
  #sidebar {
    margin-left: calc(-1 * var(--sidebar-width));
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 200;
  }
  #sidebar.active {
    margin-left: 0;
  }
}

/* =====================================================================
   Auth — card animation (porté depuis app.css)
   ===================================================================== */

/* ─── Règle 10 (app.css:94-101) */
.auth-card {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================================
   Composants utilitaires globaux (portés depuis app.css)
   ===================================================================== */

/* ─── Save-as-default button (disquette) ─── Règle 17 (app.css:228-237) */
.save-default-btn,
.save-to-catalog-btn {
  color: var(--slate-500);
  vertical-align: baseline;
  text-decoration: none !important;
}
.save-default-btn:hover,
.save-to-catalog-btn:hover {
  color: var(--accent-600);
}

/* ─── MENTIONS-3-C : subordination visuelle des sous-champs d'une notion ───
   Un petit trait à gauche marque que « Délai (jours) », les champs d'escompte et
   les coordonnées du médiateur DÉPENDENT de leur phrase (le champ principal
   au-dessus). Le simple retrait (ps-3) était trop discret pour se remarquer. */
.mention-subfield {
  border-left: 2px solid var(--slate-200);
  padding-left: 0.75rem;
  margin-left: 0.25rem;
}

/* Dans l'éditeur de document, le bouton « enregistrer par défaut » (💾) monte au
   coin haut-droit de la notion, au niveau du titre (à côté de « Délai de paiement »,
   « Escompte »), au lieu de surmonter les champs de valeur. */
.mention-notion-block {
  position: relative;
}
.notion-save-default {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  line-height: 1;
}

/* ─── Tooltip "?" rond ─── RETIRÉ par AIDE-4b : son dernier porteur (le « ? »
   des conditions générales) est passé à la bulle commune. Une info-bulle au
   survol est muette au doigt (GA12). ─── */

/* ─── Net à payer en gras ─── Règle 20 (app.css:281-285) */
.net-to-pay {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--success-700);
}

/* ─── Drag handle ─── Règle 27 (app.css:346-347) — Spec 029 Q-3 verrouillée */
.subtotal-amount {
  font-weight: 600;
  white-space: nowrap;
}
.drag-handle {
  cursor: grab;
  width: 30px;
  text-align: center;
  color: var(--slate-300);
}
.drag-handle:hover {
  color: var(--slate-700);
}

/* ─── Bouton d'aide flottant ─── Spec AIDE-1a (remplace la règle 30, spec 143)
   [SYNC:AIDE] — JUMEAU : `.preview-floating-btn` (bouton « Aperçu » du formulaire
   de document) est positionné PAR RAPPORT à celui-ci. Toute modification de
   `bottom`, `right` ou de la taille ici oblige à recalculer là-bas. */
/* AIDE-6a-2 (`AIDE6-D22`, `D32`) — ROND PLEIN de la couleur d'accent, glyphe
   blanc qui remplit le rond. ⛔ Aucun anneau, aucune bordure, aucun disque
   intérieur : les trois `!important` (bordure, fond blanc, couleur d'accent)
   dessinaient exactement l'anneau que le chef ne veut plus. Ils sont RETIRÉS,
   pas surchargés. */
.aide-floating-btn,
.guide-floating-btn {
  position: fixed;
  bottom: 20px;
  z-index: 1050;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent-500);
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.aide-floating-btn {
  right: 20px;
}

/* `AIDE6-D5` — le guide À GAUCHE de l'aide : 20 + 40 (l'aide) + 10 (gouttière). */
.guide-floating-btn { right: 70px; }

/* `AIDE6-D5` — au doigt, la cible garde 44px même si le rond visible en fait 40.
   Une zone transparente centrée, qui ne change rien au dessin. */
.aide-floating-btn::after,
.guide-floating-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.aide-floating-btn:hover,
.guide-floating-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* La pastille : il reste quelque chose à faire. Elle se voit sans qu'on la
   cherche, et elle ne porte AUCUN chiffre — le guide dit une seule chose. */
.guide-pastille {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger-500, #dc3545);
  border: 2px solid #fff;
}
/* AIDE-1b (DA-31) — Plusieurs aides sur un ecran : elles se replient derriere
   leur titre, et le panneau montre d'abord la LISTE de ce qu'il y a a savoir.
   Une seule aide reste depliee (aucune de ces regles ne s'applique alors).

   ⛔ AUCUN repere de synchronisation n'est pose sur ce bloc, et c'est delibere :
      ce repere-la marque les GEOMETRIES JUMELLES des boutons flottants (une
      position calee en dur sur une autre). Un titre repliable n'a pas de jumeau.
      ⚠️ Le controle qui les compte en attend EXACTEMENT quatre, et il compte le
      texte : ecrire son nom ici, meme dans un commentaire qui dit de ne pas en
      poser, en aurait pose un cinquieme. (Constate a l'execution, AIDE-1b.)

   Le repli lui-meme vient des attributs natifs de Bootstrap, deja charge sur
   toutes les pages : zero octet de script ajoute au gabarit commun (GA15). */
.aide-article-repliable {
  border-top: 1px solid var(--slate-200);
}
.aide-article-repliable:last-of-type {
  border-bottom: 1px solid var(--slate-200);
}
.aide-article-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  /* 44px de haut au doigt (GA12) : l'application est aussi une coquille mobile. */
  min-height: 44px;
  padding: 0.625rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-weight: 600;
  color: var(--slate-800);
}
.aide-article-titre:hover {
  color: var(--accent-600);
}
.aide-article-chevron {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.aide-article-titre[aria-expanded="true"] .aide-article-chevron {
  transform: rotate(180deg);
}

/* Le corps d'un article d'aide : le rendu ne produit que onze balises. */
.aide-article-corps h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.75rem;
}
.aide-article-corps h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.5rem;
}
.aide-article-corps blockquote {
  border-left: 3px solid var(--accent-500);
  padding-left: 0.75rem;
  color: var(--slate-700);
}

/* AIDE-2 — le MEME corps, lu en pleine page : ici le texte est le contenu
   principal, plus un aparte dans un panneau lateral. Seules les tailles changent. */
.aide-article-page .aide-article-corps {
  line-height: 1.65;
}
.aide-article-page .aide-article-corps h2 {
  font-size: 1.15rem;
  margin-top: 1.5rem;
}
.aide-article-page .aide-article-corps h3 {
  font-size: 1rem;
  margin-top: 1rem;
}
.aide-article-page .aide-article-corps p {
  margin-bottom: 0.85rem;
}
.aide-theme-carte a {
  text-decoration: none;
}
.aide-theme-carte a:hover {
  text-decoration: underline;
}

/* ─── Bandeau de première visite ─── AIDE-3 (remplace .help-banner, spec 143)
   Il se rend sur toutes les pages connectées, au-dessus du contenu : discret par
   construction — un liseré et un fond neutre, jamais une alerte colorée. Ce n'est
   pas un avertissement, c'est une explication. */
.aide-bandeau {
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--accent-500);
  background-color: var(--slate-50);
  color: var(--slate-700);
}
.aide-bandeau .bi-lightbulb {
  color: var(--accent-500);
  font-size: 1.1rem;
}

/* ─── Le mot d'accueil du guide ─── AIDE-6b (`AIDE6-D60`)
   CLASSE SŒUR de `.aide-bandeau`, jamais une extension : celle du dessus est
   « discrète par construction », faite pour se répéter sur vingt écrans. Celle-ci
   se voit UNE fois dans la vie d'un compte et doit accueillir. */
/* 🖋️ Chef, 2026-08-28, sur pièce : le bloc se confondait avec la page. Il doit
   se détacher — fond d'accent, ombre douce, et de l'air autour. */
.aide-bandeau-accueil {
  border: 1px solid var(--accent-200);
  background-color: var(--accent-50);
  color: var(--slate-700);
  padding: 1.75rem 1.9rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
.aide-bandeau-accueil p {
  font-size: 0.97rem;
  line-height: 1.65;
}
.aide-bandeau-accueil strong {
  color: var(--slate-800);
  font-weight: 600;
}
.aide-bandeau-accueil__rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--accent-500);
  color: #fff;
  font-size: 1.6rem;
}
/* La première phrase fait l'accroche — il n'y a pas de titre au-dessus, et c'est
   elle qui doit se lire en diagonale. */
.aide-bandeau-accueil__accroche {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--slate-900);
  margin-bottom: 0.85rem;
}
/* Le conseil final : l'information la plus utile à retenir, donc mise à part. */
.aide-bandeau-accueil__conseil {
  font-style: italic;
  color: var(--slate-600);
}
/* Le signe que désigne « ce bouton » : il MONTRE la boussole, il ne se clique pas. */
.aide-bandeau-accueil__signe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--accent-500);
  color: #fff;
  font-size: 0.8rem;
  vertical-align: -7px;
}
.aide-bandeau-accueil .btn {
  min-height: 44px; /* au doigt (`AIDE6-GN12`) */
}
@media (max-width: 767.98px) {
  /* Sous 768 px le rond passe AU-DESSUS du texte : côte à côte, il ne resterait
       pas assez de largeur pour lire quatre paragraphes. */
  .aide-bandeau-accueil > .d-flex {
    flex-direction: column;
  }
}

/* ─── Spinner anti-double-clic ─── Règle 44 (app.css:698-707) — CORR-5-1 */
.is-loading-spinner {
  pointer-events: none;
  opacity: 0.75;
  cursor: wait;
}
.loading-spinner-icon {
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: middle;
}

/* =====================================================================
   Sentinelle franchise TVA (Spec 063-2) — Règle 18 (app.css:240-255)
   ===================================================================== */

.tva-disabled select,
.tva-disabled input {
  opacity: 0.5;
  pointer-events: none;
  background-color: var(--slate-100);
}

.tva-franchise-banner {
  background-color: var(--warning-50);
  border: 1px solid var(--warning-500);
  border-radius: var(--radius-input);
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--warning-700);
}

/* =====================================================================
   Spec 029 — Lignes formulaire document (23 sélecteurs intégralement
   portés depuis documents-edit.css — recompte post-audit 1 B-G3)
   ===================================================================== */

/* ── En-tête colonnes flex ─── */
.lines-header {
  padding: 0 0 0 8px;
}

/* ── Conteneur principal ─── */
#items-container {
  background-color: var(--slate-100);
  border-radius: 10px;
  overflow: hidden;
  padding: 4px;
}

/* ── <article class="line-item"> : un article = 3 sous-rangées ─── */
.line-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
}

/* La drag-handle (gauche) s'aligne sur toute la hauteur */
.line-item > .drag-handle {
  width: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Les 3 rangées prennent la largeur restante */
.line-r1,
.line-r2,
.line-r3 {
  flex-basis: calc(100% - 38px);
  min-width: 0;
}

/* ── L1 : désignation + loupe + disquette ─── */
.line-r1 {
  margin-bottom: 4px;
}
.line-description {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 2px;
  /* FIX-076 — la classe vit sur la zone de saisie de l'éditeur ET sur cinq écrans
       du guide, où elle habille un champ d'une ligne (ces trois-là y sont inertes).
       ⚠ `overflow-y:hidden` est posé PAR LE SCRIPT, jamais ici : écrit en dur, une
       zone que le script n'aurait pas agrandie masquerait son texte. Revue F3. */
  resize: none;
  line-height: 1.5;
  min-height: calc(1.5em + 0.5rem + 2px);
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
.line-description:focus {
  border-bottom: 1px solid #86b7fe !important;
}

/* ── ACOMPTE-0-4 : signal « cette ligne ne comptera pas » ──────────────────
   [SYNC:VACUITE-DESIGNATION] Le JS jumeau est toggleEmptyDesignationState()
   (document-editor.js). La classe n'est posee QUE si la regle de vacuite du
   serveur (isVisuallyEmpty) juge le nom vide — jamais par .trim().

   ⚠ !important obligatoire : la regle de base pose « box-shadow: none !important »,
     et une declaration normale ne bat JAMAIS un !important, quelle que soit sa
     specificite. Sans lui, cette regle est inerte et ne peint rien.

   ⚠ Ombre interne et non bordure (D-0.4-4) : box-sizing est en border-box (reboot
     Bootstrap), donc une bordure de 2px mangerait 2px de hauteur utile et ferait
     sauter le texte a chaque frappe. L'ombre ne participe a aucune disposition.
     L'assertion D2 interdit toute propriete de disposition dans ce bloc. */
.line-description.is-empty {
  box-shadow: inset 0 -2px 0 0 var(--accent-600) !important;
}
/* ⚠ D-0.4-2 : quand le champ est vide, l'accent gagne — curseur dedans ou non.
   Le curseur clignotant signale deja le focus ; la vacuite n'a que ce trait pour
   se dire, et deux traits concurrents au meme endroit ne se distingueraient pas.
   Neutralisation PAR LA COULEUR : « border-bottom: none » oterait 1px et ferait
   sauter le texte a la prise de focus — exactement ce que D-0.4-4 evite. */
.line-description.is-empty:focus {
  border-bottom-color: transparent !important;
}

/* ── L2 : 7 cellules valeurs ─── */
.line-r2 {
  margin-bottom: 4px;
}
.line-val-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* CORR-DS-IMPL-4-C audit B1 / Phase 3.2ter : .line-val-cell .field-label SUPPRIMEE
   (regle morte apres retrait des 7 <small class="field-label"> dans form.php — couverts par .lines-header unique).
   Voir Spec CORR-DS-IMPL-4-C section "Doublons a eviter dans components.css". */
.line-val {
  font-size: 0.85rem;
}
.line-val-readonly {
  background-color: var(--slate-100) !important;
  pointer-events: none;
}

/* ── L3 : nature + chip + badge SAP + mois + supprimer ─── */
.line-r3 {
  font-size: 0.75rem;
}

/* ── Section header (DIV flex) ─── */
/* Spec 054-1 : le fond gris est parti au profit d'un filet SOUS le titre, sur toute
   la largeur (decision du chef). Couleur : celle de l'APPLICATION (--accent-500),
   jamais celle du document (--doc-accent) — les deux se ressemblent par defaut mais
   divergent des que l'utilisateur change l'une ou l'autre. Le jumeau imprime vit
   dans document-styles.css et prend, lui, la couleur du document. */
.line-section-header {
  padding: 6px 8px;
  margin-bottom: 4px;
  /* Le rayon de 8px vivait ici : sur un bloc sans fond, il n'arrondissait plus
       rien et incurvait les extremites du filet. */
  border-bottom: 2px solid var(--accent-500);
}
.line-section-header .form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700;
  padding-left: 2px;
}
.line-section-header .form-control:focus {
  border-bottom: 1px solid #86b7fe !important;
}

/* ── Section subtotal (DIV flex) ─── */
/* Spec 054-1 : fond retire lui aussi, mais PAS de filet — le trait va sous le titre,
   et la seulement. L'italique reste : c'est ce qui distingue encore la ligne. */
.line-section-subtotal {
  padding: 4px 8px;
  margin-bottom: 4px;
  font-style: italic;
  font-size: 0.875rem;
}

/* ── Indentation hiérarchique des items dans les sections ─── */
.line-item[data-indent="1"],
.line-section-header[data-indent="1"],
.line-section-subtotal[data-indent="1"] {
  margin-left: 2rem;
}
.line-item[data-indent="2"],
.line-section-header[data-indent="2"],
.line-section-subtotal[data-indent="2"] {
  margin-left: 4rem;
}
.line-item[data-indent="3"],
.line-section-header[data-indent="3"],
.line-section-subtotal[data-indent="3"] {
  margin-left: 6rem;
}

/* ── Drag placeholder ─── */
.drag-placeholder {
  height: 3px;
  background: var(--accent-500);
  margin: 0;
  padding: 0;
  border-radius: 2px;
}

/* ── Mobile Spec 029 : touch-friendly + lisibilité ─── */
@media (max-width: 767.98px) {
  .line-r2 {
    flex-wrap: wrap;
  }
  .line-val-cell {
    flex: 1 1 30% !important;
  }
  .line-r3 {
    flex-wrap: wrap;
  }
}

/* =====================================================================
   Mobile global (≤ 767.98px) — règles 35a + 35b portées
   (35c .preview-floating-btn différé à IMPL-4)
   ===================================================================== */

@media (max-width: 767.98px) {
  /* Règle 35a (app.css:541) — Spec 029 FM11 touch 44px verrouillée */
  .drag-handle {
    width: 24px;
    min-height: 44px;
  }
  /* Spec AIDE-1a — bouton d'aide au doigt (44px). [SYNC:AIDE] : le bouton
       « Aperçu » se cale sur ces valeurs, mais à un point de bascule DIFFÉRENT
       (640px) — voir son commentaire. */
  .aide-floating-btn,
  .guide-floating-btn {
    bottom: 12px;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .aide-floating-btn {
    right: 12px;
  }
  .guide-floating-btn {
    right: 62px;
  } /* 12 + 40 + 10 */
}

/* =====================================================================
   Accessibilité — prefers-reduced-motion (DI-7 étape 0quinquies)
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   CORR-DS-IMPL-2 — Page Preferences (couleur Chef + nav mobile FAB + toast)
   ===================================================================== */

/* Sections preferences (port sandbox 23 lignes 92-95) */
.pref-section {
  margin-bottom: 18px;
}
.pref-section:last-child {
  margin-bottom: 0;
}
.pref-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
}
.pref-section-help {
  font-size: 12px;
  color: var(--slate-500);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Grille 3 cartes couleur Chef (port sandbox 23 lignes 97-114) */
.chef-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 580px) {
  .chef-options {
    grid-template-columns: 1fr;
  }
}

.chef-card {
  background: #fff;
  border: 2px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  overflow: hidden;
  position: relative;
}
.chef-card:hover {
  border-color: var(--slate-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.chef-card.is-active {
  border-color: var(--slate-900);
}
.chef-card.is-active .chef-check {
  opacity: 1;
  transform: scale(1);
}

/* Swatch 3 colonnes (cs-tint-50 / 500 / 700) */
.chef-swatch {
  height: 80px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
}
.chef-swatch .cs-tint-50 {
  background: var(--c50);
}
.chef-swatch .cs-tint-500 {
  background: var(--c500);
}
.chef-swatch .cs-tint-700 {
  background: var(--c700);
}

/* Note technique : les --cX sont des variables LOCALES par bouton, figees
   pour montrer toujours les 3 palettes meme quand data-color racine differe.
   Voir spec CORR-DS-IMPL-2 § Notes techniques M3. */
.chef-card[data-c="A"] {
  --c50: #ecfdf5;
  --c500: #10b981;
  --c700: #047857;
}
.chef-card[data-c="B"] {
  --c50: #ecfeff;
  --c500: #0891b2;
  --c700: #155e75;
}
.chef-card[data-c="F"] {
  --c50: #fff7ed;
  --c500: #ea580c;
  --c700: #9a3412;
}

.chef-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--slate-900);
  display: grid;
  place-items: center;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s ease;
}

.chef-body {
  padding: 12px 14px;
}
.chef-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}
.chef-desc {
  font-size: 11.5px;
  color: var(--slate-500);
  margin: 3px 0 0;
}
.chef-mood {
  display: inline-block;
  font-size: 10.5px;
  padding: 1px 7px;
  background: var(--slate-100);
  color: var(--slate-600);
  border-radius: 4px;
  font-weight: 600;
  margin-top: 6px;
}

/* Zone live preview (port sandbox 23 lignes 116-122) */
.live-preview {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: 14px;
  margin-top: 14px;
}
.live-preview-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-preview-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-500);
  color: #fff;
  border: 0;
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.lp-btn-ghost {
  background: #fff;
  color: var(--accent-700);
  border: 1px solid var(--accent-200); /* utilise --accent-200 (ajoute tokens.css) */
  padding: 6px 11px;
  border-radius: var(--radius-btn);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.lp-badge {
  padding: 2px 9px;
  background: var(--accent-50);
  color: var(--accent-700);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
}
.lp-link {
  color: var(--accent-700);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
}

/* =====================================================================
   Spec 110-14 — FAB nav mobile Settings (specs ORIGINE preservees)
   Bouton flottant demi-cercle (mobile only) sur le bord GAUCHE de l'ecran,
   milieu vertical. Demi-cercle arrondi a droite (cote gauche plat colle au bord).
   Au clic, ouvre l'offcanvas #settingsNavOffcanvas (sous-pages Settings).
   CORR-DS-IMPL-2bis-A 2026-06-06 : restaure les specs ORIGINE 110-14 apres
   modifications erronees IMPL-2 (position right/bottom + cercle plein). Seul
   le changement de palette (Mint accent) est conserve du port DS.
   ===================================================================== */
.settings-fab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* FM3 CORR-DS-IMPL-10 : taille réduite d'un tiers (56px → 38px) pour discrétion */
  width: 38px;
  height: 38px;
  border-radius: 0 50% 50% 0; /* demi-cercle droit : cote gauche plat (colle au bord) */
  background: var(--accent-500);
  color: #fff;
  border: 0;
  box-shadow: 4px 4px 12px rgba(15, 23, 42, 0.18); /* ombre vers la droite (bord gauche colle) */
  display: grid;
  place-items: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 1040; /* sous l'offcanvas (Bootstrap 1045) — spec 110-14 */
  transition: background 0.12s ease;
}
.settings-fab:hover {
  background: var(--accent-600);
}
.settings-fab:active {
  filter: brightness(0.92);
}
@media (min-width: 768px) {
  .settings-fab {
    display: none;
  }
} /* breakpoint Bootstrap md = 768 */

/* =====================================================================
   CORR-DS-IMPL-2 — Toast erreur revert (ecrit from scratch)
   Affiche quand la sauvegarde de couleur a echoue et que la valeur a ete
   reverter cote UI (correction B-G7 Option B audit externe 2 — pas d'endpoint
   reconciliation). Position centree bas, anti-collision avec .aide-floating-btn
   et .settings-fab.  (AIDE-1a : l'ancien bouton d'aide a ete remplace.)
   ===================================================================== */
.color-switcher-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--slate-900);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-btn);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: all 0.25s ease;
  z-index: 60;
  pointer-events: none;
}
.color-switcher-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* === CORR-DS-IMPL-2bis-B : classes Bootstrap natives modales/forms === */
/* =====================================================================
   CORR-DS-IMPL-2bis-B : completion classes Bootstrap natives Mint
   ─────────────────────────────────────────────────────────────────────
   Couvre les classes utilisees par .mouvement-split-modal et
   .invoice-picker-modal qui n'avaient pas de regle Mint en IMPL-1 :
   .form-control / .form-select / .btn-close / .btn-outline-secondary /
   .btn-outline-success/warning/danger / .table*.
   Audit externe v1->v2 (B4+B6+B7+O5+O6).

   .btn-outline-info est CONSERVE Bootstrap natif (#0dcaf0) — pas de
   palette --info-* dans le DS (ecart explicitement documente).
   ===================================================================== */

.form-control,
.form-select {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-input);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
  outline: 0;
}

/* Btn-close — teinte slate-500 au lieu de noir Bootstrap par filter SVG */
.btn-close {
  filter: invert(45%) sepia(8%) saturate(390%) hue-rotate(178deg)
    brightness(91%) contrast(86%);
}
.btn-close:hover {
  filter: invert(20%) sepia(12%) saturate(800%) hue-rotate(178deg)
    brightness(80%) contrast(95%);
}

/* Btn-outline-secondary (bouton Annuler split-modal, footers modales) */
.btn-outline-secondary {
  color: var(--slate-700);
  border-color: var(--slate-300);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: var(--slate-100);
  border-color: var(--slate-300);
  color: var(--slate-900);
}

/* Btn-outline statuts semantiques (filtres invoice-picker) — palettes figees */
.btn-outline-success {
  color: var(--success-700);
  border-color: var(--success-500);
}
.btn-outline-success:hover,
.btn-outline-success.active {
  background-color: var(--success-500);
  border-color: var(--success-500);
  color: #fff;
}
.btn-outline-warning {
  color: var(--warning-700);
  border-color: var(--warning-500);
}
.btn-outline-warning:hover,
.btn-outline-warning.active {
  background-color: var(--warning-500);
  border-color: var(--warning-500);
  color: var(--warning-700);
}
.btn-outline-danger {
  color: var(--danger-700);
  border-color: var(--danger-500);
}
.btn-outline-danger:hover,
.btn-outline-danger.active {
  background-color: var(--danger-500);
  border-color: var(--danger-500);
  color: #fff;
}
/* Note : .btn-outline-info conserve Bootstrap natif (pas de palette --info-* dans le DS) */

/* Table — surcharge minimale pour invoice-picker (tableaux Mint) */
.table {
  color: var(--slate-700);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--slate-100);
}
.table-hover tbody tr:hover {
  background-color: var(--slate-50);
}
thead.table-light {
  background-color: var(--slate-50);
  color: var(--slate-500);
}

/* === CORR-DS-IMPL-2bis-A : 5 composants globaux Mint === */
/* =====================================================================
   CORR-DS-IMPL-2bis-A : 5 composants globaux Mint
   ─────────────────────────────────────────────────────────────────────
   Reecriture from-scratch via tokens existants (--slate-*, --accent-*).
   Pas de port aveugle de la sandbox (couverture 8% seulement). Markup
   prod conserve structurellement (R2/D3) — adaptation valeurs CSS uniquement.

   Composants concernes :
   - sidebar : modifications en place L96-156 (fond Mint clair + nav-link Mint)
   - header  : extension #page-header L159+
   - _seuil_franchise_alerts : palette Mint via tokens BS natifs
   - alert-banner : palette Mint via tokens BS natifs
   - bouton d'aide flottant : extension L261-283 + 2e instance L486+
     (AIDE-1a : composant remplace ; le selecteur est desormais .aide-floating-btn)
   ===================================================================== */

/* ─── Sentinelle franchise TVA — palette Mint ─── */
.alert.alert-warning {
  border-left: 3px solid var(--warning-500);
  background: var(--warning-50);
  color: var(--slate-900);
}
.alert.alert-danger {
  border-left: 3px solid var(--danger-500);
  background: var(--danger-50);
  color: var(--slate-900);
}

/* ─── Header — alignement Mint clair (etend #page-header L159+) ─── */
#page-header {
  background: #fff;
  border-bottom: 1px solid var(--slate-100);
}

/* === CORR-DS-IMPL-2bis-C : composants ponctuels — pagination + form check + etats invalides + btn solid + utilitaires text + dropdown adresse === */

/* =====================================================================
   Tokenise 14 regles Bootstrap natives oubliees par IMPL-1/2bis-A/2bis-B
   et utilisees par 4 composants partages (_client_core_fields,
   _modal_confirm, _modal_save_to_catalog, pagination) + ~16 vues transverses
   via .btn-success/.btn-danger.

   Q1 (verrouille) : .alert-info, .btn-outline-info
   restent Bootstrap natif (pas de palette --info-* dans le DS).
   Q4 + audit B2 : .suggestion-item.active (pas :hover) car JS pose .active
   sur mouseenter dans address-autocomplete.js:121.
   Audit O16 : pas de display: sur .address-suggestions (JS gere inline).
   ===================================================================== */

/* ─── Section 1 : Pagination Chef (couleur varie A/B/F) ─── */
.page-link {
  color: var(--accent-500);
  border: 1px solid var(--slate-200);
}
.page-link:hover {
  color: var(--accent-600);
  background-color: var(--accent-50);
  border-color: var(--slate-200);
}
.page-item.active > .page-link,
.page-item.active .page-link {
  background-color: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
}

/* ─── Section 2 : Form check (radio/checkbox Chef) ─── */
.form-check-input:checked {
  background-color: var(--accent-500);
  border-color: var(--accent-500);
}
.form-check-input:focus {
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}

/* ─── Section 3 : Etats invalides (statut figé danger) ─── */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger-500);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--danger-500);
  box-shadow: 0 0 0 3px var(--danger-50);
}
.invalid-feedback {
  color: var(--danger-700);
}

/* ─── Section 4 : Btn solid success (statut figé) ─── */
.btn-success {
  background-color: var(--success-500);
  border-color: var(--success-500);
  color: #fff;
}
.btn-success:hover {
  background-color: var(--success-600);
  border-color: var(--success-600);
  color: #fff;
}
.btn-success:focus,
.btn-success:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: 0;
}

/* ─── Section 4bis : Btn solid danger (statut figé) ─── */
.btn-danger {
  background-color: var(--danger-500);
  border-color: var(--danger-500);
  color: #fff;
}
.btn-danger:hover {
  background-color: var(--danger-700);
  border-color: var(--danger-700);
  color: #fff;
}
.btn-danger:focus,
.btn-danger:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: 0;
}

/* ─── Section 5 : Utilitaires text override Bootstrap (cohérence DS) ─── */
.text-danger {
  color: var(--danger-700) !important;
}
.text-muted {
  color: var(--slate-500) !important;
}

/* ─── Section 6 : Dropdown adresse autocomplete (cree par address-autocomplete.js)
       NB audit O16 : pas de display: ici — JS pose display: block/none inline ─── */
.address-suggestions {
  position: absolute;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-card-hover);
  z-index: 1050;
  max-height: 240px;
  overflow-y: auto;
}
.suggestion-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--slate-100);
}
.suggestion-item:last-child {
  border-bottom: none;
}
.suggestion-item.active {
  background-color: var(--accent-50);
}

/* =====================================================================
   === Section IMPL-9 — Ledger (sandbox 18 — livre des recettes/achats) ===
   ---------------------------------------------------------------------
   Convention : tokens DS exclusifs (var(--*)) sauf 12 hex categoriels
   justifies comme palette semantique metier FIGEE (URSSAF / type piece /
   SAP), independante de la couleur Chef A/B/F.
   Cf. feedback_action_vs_statut_couleur.
   ---
   Classes prefixees .ledger-* pour eviter collision futures sous-specs.
   Sticky thead : top: var(--header-height) (56px) — pas 64px hardcode (audit B1).
   Spec : CORR-DS-IMPL-9
   ===================================================================== */

/* === [LEDGER-9b-START] (CORR-DS-IMPL-9b D22) — bornage TDD extraction === */

/* ---- Sticky page-header (audit B1 : .ledger-page-header renomme) ---- */
/* CORR-DS-IMPL-9b L9-8 : top: 0 -> var(--header-height) (sticky sous #page-header z:100) */
.ledger-page-header {
  position: sticky;
  top: var(--header-height);
  z-index: 30;
  background: var(--slate-50);
  padding: 14px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 16px;
}
.ledger-page-header.is-scrolled {
  border-bottom-color: var(--slate-200);
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.08);
}
.ledger-page-title-block {
  flex: 1;
  min-width: 0;
}
.ledger-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}
.ledger-page-subtitle {
  font-size: 12px;
  color: var(--slate-500);
  margin: 2px 0 0;
}
.ledger-page-header .header-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

/* Boutons header-actions (port sandbox .btn-ghost — oublie initial corrige) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.btn-ghost:hover {
  background: var(--slate-50);
  color: var(--slate-900);
  border-color: var(--slate-300);
  text-decoration: none;
}
.btn-ghost:focus {
  outline: 0;
  box-shadow: var(--shadow-focus);
}
.btn-ghost i {
  font-size: 14px;
}
@media (max-width: 640px) {
  .ledger-page-title {
    font-size: 16px;
  }
}

/* ---- Tab bar (DI-17 markup .nav-tabs Bootstrap conserve + surcharge spec scopee) ---- */
.ledger-tab-bar.nav-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: 6px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.ledger-tab-bar.nav-tabs .nav-item {
  flex: 1;
}
.ledger-tab-bar.nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-btn);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-600);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ledger-tab-bar.nav-tabs .nav-link:hover {
  background: var(--slate-50);
  color: var(--slate-900);
  border: 0;
}
.ledger-tab-bar.nav-tabs .nav-link.active {
  background: var(--accent-500);
  color: #fff;
  border: 0;
}
.ledger-tab-bar.nav-tabs .nav-link.active:hover {
  background: var(--accent-600);
  color: #fff;
}
.ledger-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: var(--slate-100);
  color: var(--slate-600);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ledger-tab-bar.nav-tabs .nav-link.active .ledger-tab-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ledger-tab-badge.is-zero {
  opacity: 0.55;
}

/* ---- Toolbar (year-picker + period-segmented + search visuel) ---- */
.ledger-toolbar {
  margin-bottom: 14px;
}
.ledger-toolbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ledger-toolbar-dates {
  gap: 10px;
}
.ledger-toolbar-date {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  color: var(--slate-500);
}
.ledger-toolbar-date-label {
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  color: var(--slate-500);
  margin-bottom: 4px;
}
.ledger-toolbar-submit {
  white-space: nowrap;
}

.year-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  padding: 4px;
}
.year-picker-btn {
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--slate-500);
  cursor: pointer;
  border-radius: var(--radius-btn);
  font-size: 14px;
}
.year-picker-btn:hover {
  background: var(--slate-50);
  color: var(--slate-900);
}
.year-picker-val {
  padding: 0 10px;
  font-weight: 700;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.period-segmented {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  padding: 3px;
  gap: 2px;
}
.period-segmented button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate-600);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s ease, color 0.1s ease;
}
.period-segmented button:hover {
  color: var(--slate-900);
}
.period-segmented button.is-active {
  background: var(--accent-500);
  color: #fff;
  font-weight: 600;
}

.toolbar-spacer {
  flex: 1;
}

.search-input-wrap {
  position: relative;
  max-width: 260px;
  flex: 1 1 200px;
}
.search-input-wrap i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-400);
  font-size: 13px;
}
.search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-family: inherit;
  color: var(--slate-900);
}
.search-input:focus {
  outline: 0;
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}

/* ---- KPI row 4 cards ---- */
.ledger-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 768px) {
  .ledger-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 380px) {
  .ledger-kpi-row {
    grid-template-columns: 1fr;
  }
}

.ledger-kpi {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  transition: box-shadow 0.15s ease;
}
.ledger-kpi:hover {
  box-shadow: var(--shadow-card-hover);
}
.ledger-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--slate-500);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ledger-kpi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ledger-kpi-dot.is-accent {
  background: var(--accent-500);
}
.ledger-kpi-dot.is-sap {
  background: #0891b2;
} /* SAP cyan figee */
.ledger-kpi-dot.is-other {
  background: var(--slate-400);
}
.ledger-kpi-dot.is-tva {
  background: var(--warning-500);
}
.ledger-kpi-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ledger-kpi-sub {
  font-size: 11.5px;
  color: var(--slate-500);
  margin-top: 4px;
}

/* ---- Empty state ---- */
.ledger-empty-state {
  background: #fff;
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius-card);
  padding: 60px 24px;
  text-align: center;
  color: var(--slate-500);
}
.ledger-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  background: var(--accent-50);
  color: var(--accent-700);
  border-radius: 50%;
  font-size: 28px;
}
.ledger-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 8px;
}
.ledger-empty-desc {
  font-size: 13px;
  max-width: 460px;
  margin: 0 auto 18px;
  line-height: 1.55;
}

/* ---- Ledger (table-like grid 7 colonnes) ---- */
.ledger {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.ledger:hover {
  box-shadow: var(--shadow-card-hover);
}
.ledger + .ledger {
  margin-top: 24px;
}

/* Sticky thead — audit B1 : top: var(--header-height) (56px) PAS 64px hardcode */
.ledger-thead {
  display: grid;
  /* CORR-DS-IMPL-9b L9-3 hotfix : DATE/N° elargis, CLIENT/NATURE en fractions ratio (capture chef 2026-06-06 — date+ref tronquees, CLIENT espace inutilise). */
  grid-template-columns: 56px 120px 180px 1.5fr 1fr 120px 140px 90px;
  gap: 0;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  position: sticky;
  top: var(--header-height);
  z-index: 10;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--slate-600);
}
.ledger-thead.ledger-thead-achats {
  grid-template-columns: 56px 110px 130px 1fr 1.4fr 1fr 130px 120px 44px;
}
/* TVA-002-5 (F8 de la revue) : sans TVA a montrer sur la periode — franchise, ou
   aucune depense taxee — la colonne « TVA recup. » n'est pas rendue. La grille passe
   donc a 7 colonnes. En-tete et lignes portent la MEME regle : les modifier separement
   les decalerait. */
.ledger-thead.ledger-thead-achats.is-no-vat,
.ledger-row.ledger-row-achats.is-no-vat {
  grid-template-columns: 56px 110px 130px 1fr 1.4fr 1fr 130px 44px;
}
/* 🔴 Spec LIVRE-7 (D54) : module SAP allume — le livre des recettes porte UNE colonne
   de plus, « Service a la personne », en fin de ligne. Meme regle pour l'en-tete et
   pour les lignes : les modifier separement les decalerait, et rien ne le dirait. */
.ledger-thead.is-sap,
.ledger-row.is-sap {
  /* ⚠️ La derniere colonne tient « SAP + Hors SAP » — l etat MIXTE, celui que ce
       lot existe pour rendre visible. Le dimensionner sur « SAP » le ferait couper. */
  /* 🔴 Recadrage (capture du chef, 2026-08-13) : « MODE DE RÈGLEMENT » touchait
       « MONTANT TTC » et le titre de la colonne SAP sortait du cadre. Le mode de
       reglement porte des libelles longs (« Virement CESU », « Titre restaurant »)
       et n avait plus la place ; la colonne SAP tient « SAP + Hors SAP ». */
  /* ⚠️ Revue ciblee (F8) : les colonnes de MONTANT ne se rognent pas — un nombre
       aligne a droite qui deborde se coupe SANS ellipse, donc en silence, et c est
       la partie entiere qui part. Ce sont le n° de piece et le client qui cedent. */
  grid-template-columns: 44px 88px 124px 1fr 1fr 128px 124px 88px 124px;
}
.ledger-thead .th {
  padding: 10px 12px;
  white-space: nowrap;
}
/* La variante a neuf colonnes serre les titres : ils passent sur deux lignes
   plutot que d etre coupes — un titre tronque ne se voit pas, il se devine. */
.ledger-thead.is-sap .th {
  padding: 8px 10px;
  white-space: normal;
  line-height: 1.15;
}
.ledger-row.is-sap .td {
  padding-left: 10px;
  padding-right: 10px;
}
.ledger-row.is-sap .td-sap {
  font-size: 12px;
  color: var(--slate-600);
  white-space: nowrap;
}
.ledger-thead .th.tar {
  text-align: right;
}

/* Lignes ledger */
.ledger-row {
  display: grid;
  /* CORR-DS-IMPL-9b L9-3 hotfix : DATE/N° elargis, CLIENT/NATURE en fractions ratio (capture chef 2026-06-06 — date+ref tronquees, CLIENT espace inutilise). */
  grid-template-columns: 56px 120px 180px 1.5fr 1fr 120px 140px 90px;
  gap: 0;
  border-bottom: 1px solid var(--slate-100);
  align-items: center;
  transition: background 0.1s ease;
  /* CORR-DS-IMPL-9b hotfix desktop row clickable (capture chef 2026-06-06) :
       pattern stretched-link Bootstrap. Le td-date-link existant porte aussi
       .stretched-link pour couvrir la ligne entiere. Curseur pointer pour affordance. */
  position: relative;
  cursor: pointer;
}
.ledger-row.ledger-row-achats {
  grid-template-columns: 56px 110px 130px 1fr 1.4fr 1fr 130px 120px 44px;
}
.ledger-row:hover {
  background: var(--slate-50);
}

/* Spec LIVRE-6 (D32, D48) — LES DEUX LIGNES TECHNIQUES.
   L'annulation et l'ecriture qu'elle contre-passe restent VISIBLES au livre : c'est
   la piece probante, elle montre tout. Mais elles se lisent d'un coup d'œil comme
   ce qu'elles sont — de la mecanique comptable, pas des operations a reprendre :
   en plus petit, en gris, et SANS curseur de clic puisqu'elles n'ont plus de lien. */
/* 🔴 Spec LIVRE-6 — FOND BLANC, TEXTE GRISÉ (chef, 2026-08-11).
   Le fond gris de ces lignes se confondait avec celui du sous-total, juste au-dessus :
   deux choses de sens opposé — une écriture annulée et un total — se lisaient pareil.
   C'est le TEXTE qui porte désormais l'atténuation ; le fond reste celui du livre,
   au bureau comme sur téléphone. */
.ledger-row-technique {
  font-size: 0.82rem;
  color: var(--slate-500);
  cursor: default;
}

/* Spec LIVRE-6 (F7 de la revue à l'aveugle) — la même ligne technique, sur téléphone.
   Sous 1024 px c'est ce gabarit qui rend le livre : il doit porter le même gris et la
   même inertie, sans quoi la porte fermée au bureau reste ouverte au doigt.
   ⚠️ Le sélecteur est dédoublé pour PRIMER sur `.deck-item`, déclaré plus bas dans ce
   fichier à spécificité égale (0,1,0) — l'ordre source lui donnait sinon le dernier
   mot, et la ligne technique gardait la couleur normale et le curseur de clic. */
.deck-item-technique,
.deck-item.deck-item-technique {
  color: var(--slate-500);
  cursor: default;
  text-decoration: none;
}

/* 🔴 TOUTE la ligne est grisée, pas seulement son conteneur (chef, 2026-08-11).
   Poser la couleur sur la ligne ne suffisait pas : chaque cellule porte la sienne —
   le montant en vert « encaissement » ou en rouge « remboursement », le numéro de
   pièce, la nature. La ligne restait donc colorée alors qu'elle est neutralisée.
   ⚠️ `!important` est délibéré ici, et c'est le seul endroit du livre où il l'est :
   l'atténuation doit primer sur les couleurs SÉMANTIQUES, précisément parce qu'une
   écriture annulée n'a plus de sens comptable à signaler. Un montant d'annulation
   affiché en rouge « remboursement » dirait une opération qui n'a pas eu lieu. */
.ledger-row-technique,
.ledger-row-technique *,
.deck-item-technique,
.deck-item-technique * {
  color: var(--slate-500) !important;
}
.deck-item .di-seq {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--slate-600);
  margin-right: 6px;
}
.ledger-row-technique .td-date-link {
  color: var(--slate-500);
  text-decoration: none;
}

/* La colonne « N » : etroite, alignee a gauche, en chiffres tabulaires pour que les
   numeros s'empilent droit d'une ligne a l'autre. Un tiret quand l'ecriture n'est
   pas encore scellee — elle vit alors dans la zone provisoire du livre. */
.ledger-thead .th:first-child,
.ledger-row .td-seq {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-row .td-seq {
  padding: 10px 12px;
  color: var(--slate-600);
  font-weight: 600;
}
/* Stretched-link Ledger : pseudo-element absolute couvre la ligne entiere (z:1).
   Les autres liens internes (recap-toggle, justificatif Achats) restent au-dessus (z:2). */
.ledger-row .stretched-link::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}
.ledger-row .recap-toggle,
.ledger-row a[href*="/api/receipts/"] {
  position: relative;
  z-index: 2;
}
.ledger-row .td {
  padding: 11px 12px;
  font-size: 13px;
  color: var(--slate-700);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-row .td.tar {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ledger-row .td.strong {
  color: var(--slate-900);
  font-weight: 600;
}
.ledger-row .td.is-refund {
  color: var(--danger-500);
}
.ledger-row .td.is-income {
  color: var(--success-700);
}
.ledger-row .td.is-expense {
  color: var(--danger-500);
}

.td-date-link {
  color: var(--accent-700);
  text-decoration: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.td-date-link:hover {
  text-decoration: underline;
  color: var(--accent-700);
}
.ref-link {
  color: var(--accent-700);
  text-decoration: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.recap-toggle {
  color: var(--slate-400);
  text-decoration: none;
  margin-left: 4px;
}
.recap-toggle:hover {
  color: var(--accent-700);
}

.recap-detail {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-100);
  padding: 8px 16px 8px 32px;
}
.recap-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recap-detail-line {
  display: grid;
  grid-template-columns: 1fr 120px 100px;
  gap: 12px;
  font-size: 12px;
  color: var(--slate-600);
}
.recap-detail-desc {
  color: var(--slate-700);
}
.recap-detail-method {
  color: var(--slate-500);
  font-style: italic;
}
.recap-detail-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--slate-900);
  font-weight: 600;
}

/* ---- Badges categoriels (palette semantique metier FIGEE — audit B3) ----
   Independants de la couleur Chef : nat-badge URSSAF, doc-type piece, sap-tag.
   Hex justifies comme valeurs reglementaires non-tokenisables. */
.nat-badge {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.nat-badge.is-bic-vente {
  background: #dbeafe;
  color: #1e40af;
}
.nat-badge.is-bic-service {
  background: #f0f9ff;
  color: #075985;
}
.nat-badge.is-bnc {
  background: #fef3c7;
  color: #92400e;
}
.nat-badge.is-autre {
  background: var(--slate-100);
  color: var(--slate-600);
}

.td-nat {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.td-nat .nat-badge {
  flex: 0 1 auto;
  min-width: 0;
}
.td-nat /* 🔴 Revue ciblee (F7) : la pastille porte desormais TROIS textes. Le cyan disait
   « service a la personne » ; l afficher sur une ligne « Hors SAP » ferait dire au
   signal l inverse de son texte. Chaque etat a sa teinte. */
.sap-tag.is-hors {
  background: var(--slate-100);
  color: var(--slate-600);
}
.sap-tag.is-mixte {
  background: #fef3c7;
  color: #92400e;
}
.sap-tag {
  flex-shrink: 0;
}

.doc-type {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  margin-right: 6px;
}
.doc-type.is-fac {
  background: var(--accent-50);
  color: var(--accent-700);
}
.doc-type.is-direct {
  background: #fef3c7;
  color: #92400e;
}
.doc-type.is-recap {
  background: #f3e8ff;
  color: #6b21a8;
}
/* Spec LIVRE-4 : un remboursement d'avoir tombait en « Direct » faute d'etiquette
   propre (TR-27). Rouge sourd — c'est une piece qui SORT, comme le montant. */
.doc-type.is-avoir {
  background: #fee2e2;
  color: #991b1b;
}

/* 🔴 Revue ciblee (F7) : la pastille porte desormais TROIS textes. Le cyan disait
   « service a la personne » ; l afficher sur une ligne « Hors SAP » ferait dire au
   signal l inverse de son texte. Chaque etat a sa teinte. */
.sap-tag.is-hors {
  background: var(--slate-100);
  color: var(--slate-600);
}
.sap-tag.is-mixte {
  background: #fef3c7;
  color: #92400e;
}
.sap-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: #cffafe;
  color: #155e75;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ---- Mode paiement + TVA petites ---- */
.pay-mode {
  font-size: 12px;
  color: var(--slate-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pay-mode i {
  font-size: 13px;
  color: var(--slate-400);
}

.tva-cell {
  font-size: 12px;
  color: var(--slate-500);
  font-variant-numeric: tabular-nums;
}
.tva-zero {
  color: var(--slate-400);
}

/* ---- Quarter header (bandeau accent fort) ---- */
.quarter-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--accent-50);
  border-bottom: 1px solid var(--accent-200);
  border-top: 1px solid var(--accent-200);
}
.quarter-header .q-badge {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--accent-500);
  color: #fff;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.quarter-header .q-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-700);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.quarter-header .q-title .q-period {
  font-weight: 500;
  color: var(--slate-600);
  text-transform: none;
  letter-spacing: 0;
}
.quarter-header .q-spacer {
  flex: 1;
}
.quarter-header .q-meta {
  font-size: 11.5px;
  color: var(--slate-600);
  font-variant-numeric: tabular-nums;
}
.quarter-header .q-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-700);
  font-variant-numeric: tabular-nums;
}
/* CORR-DS-IMPL-9b L9-11 : desktop display:contents preserve flex 1 ligne actuel
   (les enfants sont aplatis dans le flex parent). Mobile 640px : 2 lignes. */
.quarter-header-row-1,
.quarter-header-row-2 {
  display: contents;
}
@media (max-width: 640px) {
  .quarter-header {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .quarter-header-row-1,
  .quarter-header-row-2 {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .quarter-header-row-2 {
    justify-content: space-between;
  }
  .quarter-header .q-spacer {
    display: none;
  }
}

/* ---- Spec LIVRE-3 (D7) : la dénomination au-dessus de chaque montant ----
   Reprend à l'identique le procédé du bandeau « Total général » (.af-item) :
   le libellé en petites majuscules discrètes, la valeur en dessous. C'est ce
   qui rend le bloc lisible, les titres de colonnes du tableau ne tombant PAS
   au-dessus des bons montants (grilles à 7, 3 et 4 rails — mesuré). */
.qs-row .qs-cell.has-denom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.qs-row .qs-cell.has-denom .denom {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  color: var(--slate-500);
  margin-bottom: 1px;
}
.qs-row .qs-cell.has-denom .val {
  font-variant-numeric: tabular-nums;
}

/* ---- Spec LIVRE-6-bis (DEC-3) : le rappel rectificatif ----
   « En plus petit et en italique », sous le sous-total du trimestre (chef,
   2026-08-11). Il porte un montant qui appartient à une période antérieure :
   il doit se lire comme un rappel, jamais comme une ligne du trimestre. */
.qs-row.is-rectificatif {
  font-style: italic;
  font-size: 11.5px;
  color: var(--slate-500);
}
.qs-row.is-rectificatif .qs-label {
  padding-left: 14px;
}

/* ---- Quarter summary (collapse cliquable) ---- */
.quarter-summary {
  border-top: 1px solid var(--accent-200);
}
.qs-row {
  display: grid;
  grid-template-columns: 1fr 130px 90px 130px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--accent-100);
}
.qs-row .qs-cell {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--slate-700);
}
.qs-row .qs-cell.tar {
  text-align: right;
}
.qs-row .qs-cell.is-empty {
  color: transparent;
}

.qs-row.is-total {
  background: var(--accent-100);
  border-bottom-color: var(--accent-200);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}
.qs-row.is-total:hover {
  background: var(--accent-200);
}
.qs-row.is-total .qs-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent-700);
  display: flex;
  align-items: center;
  gap: 6px;
}
.qs-row.is-total .qs-label .qs-period {
  font-weight: 500;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0;
}
.qs-row.is-total .qs-cell {
  font-weight: 700;
  color: var(--slate-900);
  font-size: 13.5px;
}
.qs-row.is-total .qs-cell.is-ttc {
  color: var(--accent-700);
}

/* 🔴 Spec LIVRE-7 (D55 ⓐ) : le chevron du sous-total trimestriel est retire — il
   n'avait plus rien a ouvrir. Son remplacant vit sur le total annuel (.af-chevron). */
/* 🔴 Spec LIVRE-7 (chef, 2026-08-13) : le chevron reste A DROITE du bandeau et prend
   la couleur d accent. Il basculait au milieu depuis l ajout de la colonne SAP —
   le bandeau debordait et le renvoyait a la ligne. */
.af-chevron {
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--accent-400, #34d399);
}

.annual-footer-toggle {
  cursor: pointer;
}
/* Le bandeau porte desormais quatre valeurs plus le chevron : sans ce resserrement
   il deborde et le chevron part a la ligne. */
/* 🔴 Revue ciblee (F5) : ce bandeau est une GRILLE (voir plus bas), pas un flex —
   les proprietes de flex ecrites ici n avaient AUCUN effet, et le `gap` etait
   ecrase par la declaration plus tardive. Le chevron ajoute est un SIXIEME enfant
   pour cinq pistes : il tombait sur une rangee implicite, c est-a-dire a la ligne,
   au milieu — exactement le defaut qu il devait corriger. La piste manquante se
   declare la ou la grille est definie. */
.annual-footer .af-item {
  white-space: nowrap;
}
.annual-footer .af-label {
  min-width: 0;
}

/* 🔴 Spec LIVRE-7 (D53) — LE RECAPITULATIF PAR PERIODE. */
.synthese-panel {
  display: block;
  padding: 4px 18px 18px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
}
.annual-footer-card.is-collapsed .synthese-panel {
  display: none;
}
.annual-footer-card.is-collapsed .af-chevron {
  transform: rotate(-90deg);
}
.synthese-bloc + .synthese-bloc {
  margin-top: 18px;
}
/* 🔴 Spec LIVRE-7 (chef, sur maquette) : une annee ANTERIEURE est un encadre
   detache — on ne doit pas pouvoir la lire comme la suite du recapitulatif de
   l exercice. Ton ambre (attention), jamais le vert des sections normales. */
.synthese-bloc.is-anterieure {
  margin-top: 22px;
  padding: 14px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
}
.synthese-bloc.is-anterieure .synthese-titre {
  color: #92400e;
  padding-top: 0;
}
/* La ligne de total d une annee : elle ferme le bloc et permet de refaire
   l addition a l oeil jusqu au bandeau noir. */
.synthese-row.is-total-annee {
  border-top: 1.5px solid var(--slate-300);
  margin-top: 6px;
  padding-top: 9px;
  font-weight: 700;
  color: var(--slate-900);
}
.synthese-bloc.is-anterieure .synthese-row.is-total-annee {
  border-top-color: #fcd34d;
}
/* Les denominations ne servent qu au telephone. */
.synthese-row .denom {
  display: none;
}
.synthese-titre {
  padding: 12px 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--slate-600);
}
.synthese-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
}
.synthese-row .sy-label {
  flex: 1;
  min-width: 0;
  color: var(--slate-700);
}
.synthese-row .sy-cell {
  flex: 0 0 auto;
  min-width: 96px;
}
.synthese-row .sy-cell.tar {
  text-align: right;
}
.synthese-row .sy-cell.is-ttc {
  font-weight: 700;
  color: var(--slate-900);
}
/* Les deux blocs de ventilation sont DETACHES : le blanc dit que ces montants
   ventilent le total, ils ne s'y ajoutent pas (exigence du chef). */
.synthese-vent {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--slate-300);
}
.sy-vent-titre {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--slate-500);
  margin-bottom: 4px;
}
.synthese-row.is-vent {
  font-style: italic;
  color: var(--slate-600);
  padding: 3px 0;
}
.synthese-row.is-vent .sy-label {
  padding-left: 14px;
}
.synthese-row .short-label {
  display: none;
}
/* L asterisque du rappel rectificatif : visible, et masquee la ou le rappel se
   reduit a son montant (revue F9). */
.qs-asterisque {
  font-size: 10px;
  color: var(--accent-600, #059669);
  font-weight: 700;
}
.synthese-note.is-seule {
  padding: 0 18px 16px;
}
.synthese-note {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--slate-500);
}

/* 🔴 Spec LIVRE-7 (D31, D53) — LES VENTILATIONS ONT QUITTE LES SOUS-TOTAUX.
   Les regles qui les habillaient (.qs-row.is-dont, .qs-vent-header, .qs-row.is-nature
   et leur repli) sont retirees : elles seraient devenues du CSS mort, qui ne rougit
   jamais. Le tableau de synthese porte desormais son propre habillage, plus bas. */

/* ---- Annual footer dark (audit B10 : --accent-on-dark) ---- */
.annual-footer-card {
  margin-top: 22px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.annual-footer {
  display: grid;
  /* 🔴 SIX pistes : le libelle, les quatre valeurs, et le chevron (revue F5). */
  grid-template-columns: 1fr repeat(5, auto);
  gap: 20px;
  padding: 16px 18px;
  background: var(--slate-900);
  color: #fff;
  align-items: center;
}
.annual-footer .af-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: #fff;
}
.annual-footer .af-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.annual-footer .af-item-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--slate-300);
  margin-bottom: 2px;
}
.annual-footer .af-item-val {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.annual-footer .af-item.is-grand .af-item-val {
  font-size: 20px;
  color: var(--accent-on-dark);
}

/* Spec LIVRE-FIX-2 (TR-7 ②) : les 4 regles de l'encadre reglementaire du livre
   ont ete retirees avec le bloc qu'elles habillaient. Aucun autre porteur dans
   le depot — les laisser aurait fait croire au relecteur suivant qu'elles
   servaient encore. */

/* CORR-DS-IMPL-9b D19 : bandeau indicateur "X resultats sur Y" + lien Effacer. */
.search-results-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  font-size: 13px;
  color: var(--slate-700);
}
.search-results-banner .search-results-text {
  font-weight: 500;
}
.search-results-banner .link-clear-search {
  color: var(--accent-700);
  font-weight: 600;
  text-decoration: none;
}
.search-results-banner .link-clear-search:hover {
  text-decoration: underline;
}

/* ---- Deck mobile (duplication PHP — visible mobile uniquement) ---- */
.deck-item {
  display: none;
}
/* Spec TVA-002-5 : la section Achats porte desormais elle aussi un affichage carte
   (`.deck-item.deck-item-achats`). Elle n'en avait AUCUN — sous 1024 px le registre
   des achats n'affichait donc pas une seule ligne, seuls l'en-tete de trimestre et
   les sous-totaux restaient. La classe additionnelle herite de tout `.deck-item` :
   aucune regle propre n'est necessaire, ce commentaire sert de repere de recherche. */

/* CORR-DS-IMPL-9b L9-3 D24 : bloc 1 elargi a 1024px (bascule deck plus tot).
   Concerne uniquement le tableau / deck / qs-row / annual-footer (UX mobile lisible).
   Toolbar/search/page-header restent dans le bloc 2 a 768px (D24 strict). */
@media (max-width: 1024px) {
  .ledger-thead,
  .ledger-row {
    display: none;
  }

  .deck-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--slate-100);
    cursor: pointer;
    transition: background 0.12s ease;
    /* CORR-DS-IMPL-9b L9-4 : neutralisation styles <a> natifs (wrapper anchor) */
    text-decoration: none;
    color: inherit;
  }
  .deck-item:hover,
  .deck-item:active {
    background: var(--slate-50);
  }

  .di-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
  }
  .di-l1-left {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--slate-500);
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
    min-width: 0;
  }
  .di-l1-left .doc-type {
    margin-right: 0;
  }
  .di-l1-left .ref-link {
    color: var(--accent-700);
    font-weight: 600;
  }
  .di-l1-left .di-sep {
    color: var(--slate-300);
  }
  .di-ttc {
    font-size: 16px;
    font-weight: 700;
    color: var(--slate-900);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .di-ttc.is-refund {
    color: var(--danger-500);
  }
  .di-ttc.is-expense {
    color: var(--danger-500);
  }
  .di-l2-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-900);
    line-height: 1.3;
    min-width: 0;
    flex-wrap: wrap;
  }
  .di-l2-left /* 🔴 Revue ciblee (F7) : la pastille porte desormais TROIS textes. Le cyan disait
   « service a la personne » ; l afficher sur une ligne « Hors SAP » ferait dire au
   signal l inverse de son texte. Chaque etat a sa teinte. */
.sap-tag.is-hors {
    background: var(--slate-100);
    color: var(--slate-600);
  }
  .sap-tag.is-mixte {
    background: #fef3c7;
    color: #92400e;
  }
  .sap-tag {
    font-size: 9.5px;
    padding: 1px 6px;
    flex-shrink: 0;
  }
  .di-tva {
    font-size: 11px;
    color: var(--slate-500);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .di-tva.is-zero {
    color: var(--slate-400);
    font-style: italic;
  }
  .di-l3-left {
    font-style: italic;
    color: var(--slate-500);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .di-l3-right .pay-mode {
    font-size: 11.5px;
    color: var(--slate-700);
    font-weight: 500;
    white-space: nowrap;
  }

  /* qs-row mobile : flex inline */
  .qs-row {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: none;
    padding: 10px 14px;
    gap: 10px;
  }
  .qs-row .qs-label {
    flex: 1;
    min-width: 0;
  }
  .qs-row .qs-cell {
    padding: 0;
    font-size: 13px;
    flex-shrink: 0;
  }
  /* ---- Spec LIVRE-3 (TR-3, DEC-9) ----
       AVANT : `.qs-row.is-total .qs-cell:not(.is-ttc) { display: none }` — le
       trimestre ne montrait que son TTC sur téléphone. Un assujetti ne pouvait
       donc PAS relire la TVA de son trimestre, sur l'appareil qui EST
       l'application. Les trois montants reviennent, en pavés coiffés de leur
       dénomination.
       ⚠️ Cette règle portait DEUX sélecteurs : le second, `.qs-row.is-dont`,
       concerne les rangées « dont SAP / dont hors SAP » et n'a rien à voir avec
       le défaut corrigé ici. Il est donc CONSERVÉ tel quel, séparé, pour que son
       comportement ne bouge pas (relevé à l'audit du plan — le remplacement en
       bloc l'aurait emporté sans qu'on s'en aperçoive). */
  /* ⚠️ Portée volontairement RESTREINTE aux rangées qui portent des
       dénominations, c'est-à-dire au livre des RECETTES. `.qs-row.is-total`
       existe aussi sur l'onglet Achats, sans `has-denom` : la règle écrite
       globalement lui aurait imposé « libellé pleine largeur puis un nombre nu
       aligné à gauche », une régression visuelle sur un écran hors périmètre
       (relevé par la revue de diff, finding 6). */
  .qs-row.is-total:has(.has-denom) {
    flex-wrap: wrap;
    gap: 8px 14px;
    min-height: 44px;
  }
  .qs-row.is-total:has(.has-denom) .qs-label {
    flex: 1 0 100%;
  }
  .qs-row.is-total:has(.has-denom) .qs-cell {
    display: flex;
    flex: 0 0 auto;
    text-align: left;
  }
  .qs-row.is-total .qs-cell.has-denom {
    align-items: flex-start;
  }
  .qs-row.is-total:has(.has-denom) .qs-cell.is-empty {
    display: none;
  }
  /* Achats : comportement d'avant, inchangé — le TTC seul, à droite. */
  .qs-row.is-total:not(:has(.has-denom)) .qs-cell:not(.is-ttc) {
    display: none;
  }

  /* Spec LIVRE-6-bis (revue a l'aveugle) : le rappel rectificatif est le SEUL
       type de ligne du bloc qui n'avait pas de regle mobile — trois nombres nus
       cote a cote a 390 px, sans denomination. On ne garde que le montant qui compte. */
  .qs-row.is-rectificatif .qs-cell:not(.is-ttc) {
    display: none;
  }
  .qs-row.is-total .qs-period {
    display: none;
  }

  /* 🔴 Spec LIVRE-7 (D31) : les regles mobiles des ventilations sont retirees
       avec les blocs qu'elles habillaient. Le recapitulatif par periode a les
       siennes, plus bas — dont le repli, qui vit desormais sur le total annuel. */

  /* 🔴 Spec LIVRE-7 (D55 ⓑ) : sur telephone le recapitulatif est REPLIE par
       defaut — la page reste lisible au pouce ; il s'ouvre d'un geste. Sur
       ordinateur il est ouvert : il n'y a rien a gagner a le cacher. */
  .synthese-panel {
    display: none;
    padding: 4px 12px 16px;
  }
  .annual-footer-card.is-expanded .synthese-panel {
    display: block;
  }

  /* 🔴 Spec LIVRE-7 (chef, capture du 2026-08-13) : sur telephone, les trois
       montants debordaient — le TTC etait coupe au bord droit. Chaque ligne passe
       donc sur DEUX rangs : le libelle en haut, les montants en pavés en dessous,
       coiffes de leur denomination. Meme gabarit que le sous-total trimestriel
       (LIVRE-3, DEC-9), et l espace vide de droite est enfin occupe. */
  .synthese-row {
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--slate-200);
  }
  .synthese-row .sy-label {
    flex: 1 0 100%;
    font-size: 12.5px;
    font-weight: 600;
  }
  .synthese-row .sy-cell {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .synthese-row .sy-cell .denom {
    display: block;
    font-size: 8.5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--slate-500);
    white-space: nowrap;
  }
  .synthese-row .sy-cell .val {
    font-size: 12.5px;
    white-space: nowrap;
  }
  .synthese-row .sy-cell.is-ttc .val {
    font-weight: 700;
  }
  /* Les deux blocs de ventilation gardent UNE seule ligne : un libelle, un
       montant — ils n ont jamais eu trois colonnes. */
  .synthese-row.is-vent {
    border-bottom: none;
    padding: 3px 0;
  }
  .synthese-row.is-vent .sy-label {
    flex: 1 1 auto;
    font-weight: 400;
  }
  .synthese-row.is-vent .sy-cell {
    flex: 0 0 auto;
    text-align: right;
  }
  .synthese-row.is-total-annee {
    border-bottom: none;
  }
  .synthese-bloc.is-anterieure {
    padding: 12px 12px;
  }
  /* ⚠️ Le chevron suit l etat REEL de CE cote : sur telephone c est
       `.is-expanded` qui ouvre, pas l absence de `.is-collapsed`. Sans cette
       regle il pointait vers le bas sur un panneau ferme. */
  .af-chevron {
    transform: rotate(-90deg);
  }
  .annual-footer-card.is-expanded .af-chevron {
    transform: none;
  }
  .synthese-row .full-label {
    display: none;
  }
  .synthese-row .short-label {
    display: inline;
  }

  .annual-footer {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px 14px;
  }
  .annual-footer .af-label {
    grid-column: span 2;
    margin-bottom: 4px;
  }
  .annual-footer .af-item {
    align-items: flex-start;
  }
}

/* CORR-DS-IMPL-9b L9-3 D24 : bloc 2 conserve a 768px (toolbar/search/page-header mobile).
   D25 : padding/typo compact .ledger-page-header fusionne ici (anciennement 640px L1886). */
@media (max-width: 768px) {
  /* Toolbar compact mobile */
  .ledger-toolbar-row {
    gap: 8px;
  }
  .search-input-wrap {
    max-width: none;
    flex: 1 1 100%;
  }

  /* CORR-DS-IMPL-9b L9-8 partie 2 + D25 fusion 640px : page-header compact mobile */
  .ledger-page-header {
    padding: 6px 0 4px;
    gap: 6px;
  }
  .ledger-page-title {
    font-size: 14px;
  }
  .ledger-page-subtitle {
    display: none;
  }
  /* CORR-DS-IMPL-9b D23 : ancienne regle .btn-ghost .btn-label morte apres swap L9-9 retiree.
       Remplacee par regle generale .btn-label ciblant le bouton primary-chef contextuel. */
  .ledger-page-header .btn-label {
    display: none;
  }
}

@media (max-width: 480px) {
  .ledger-tab-bar.nav-tabs .nav-link {
    padding: 9px 8px;
    font-size: 12px;
    gap: 5px;
  }
}

@media (max-width: 380px) {
  .annual-footer {
    grid-template-columns: 1fr;
  }
  .annual-footer .af-label {
    grid-column: auto;
  }
}

/* === [LEDGER-9b-END] (CORR-DS-IMPL-9b D22) — fin bornage TDD === */

/* === Section IMPL-5 Clients === */
/* =====================================================================
   Spec : CORR-DS-IMPL-5
   Sandbox cibles : 05-card-clients.html v4 (index) + 10-show-client.html v2 (show)
   Couvre : index.php, show.php, form.php (wrapper), _modal_aici_invite.php, import.php
   Règle Q28 : visuel ne touche pas aux données affichées
   ===================================================================== */

/* ─── A. Index — grille de cartes ─────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
/* Breakpoints 720px/1280px MIGRÉS en @container cl-page Section IMPL-5-EXT-A — bug A1 FM8 (cf. P41 pattern container-queries vs media-queries avec sidebar variable) */

.card-grid .client-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  transition: box-shadow 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */

/* BL-5 : stretched-link sous quick-action pour ne pas masquer les boutons */
.card-grid .client-card .stretched-link::after {
  z-index: 1;
}
.card-grid .client-card .client-quick {
  position: relative;
  z-index: 2;
}

.client-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.client-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.client-avatar.is-company {
  background: var(--slate-100);
  color: var(--slate-700);
  border-radius: 12px;
}
.client-id {
  flex: 1 1 auto;
  min-width: 0;
}
.client-name {
  display: block;
  color: var(--slate-900);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 1px 8px;
  background: var(--slate-100);
  color: var(--slate-500);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.client-type.is-pro {
  background: var(--accent-50);
  color: var(--accent-700);
}

.client-quick {
  display: flex;
  gap: 2px;
}
.client-quick a,
.client-quick button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--slate-500);
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */
.client-quick form {
  margin: 0;
  padding: 0;
}

.client-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--slate-700);
}
.client-meta .line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.client-meta i {
  color: var(--slate-500);
  font-size: 13px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.client-meta .value {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.cli-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.cli-search {
  flex: 1 1 240px;
  position: relative;
}
.cli-search input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--slate-900);
}
.cli-search input:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}
.cli-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-500);
  font-size: 15px;
  pointer-events: none;
}

/* ─── B. Show — Header sticky ────────────────────────────────────────── */

.page-header-sticky {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: var(--slate-50);
  margin-bottom: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  transition: padding 0.15s ease;
}
.page-header-sticky.is-scrolled {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--slate-600);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */

.page-header-sticky .client-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-header-sticky.is-scrolled .client-name {
  font-size: var(--fs-lg);
}

.client-badges {
  display: inline-flex;
  gap: 5px;
  flex-wrap: wrap;
}
.client-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.client-badge.bg-slate {
  background: var(--slate-100);
  color: var(--slate-700);
}
.client-badge.bg-accent {
  background: var(--accent-50);
  color: var(--accent-700);
}
.client-badge.bg-success {
  background: var(--success-50);
  color: var(--success-700);
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.btn-primary-chef {
  background: var(--accent-500);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
  text-decoration: none;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */
/* CORR-DS-IMPL-9b L9-9 D15 conservateur : enrichissement non-regressant IMPL-5
   (padding/font-weight/border existants L2171 preserves — IMPL-5 clients/show les utilise). */
.btn-primary-chef:focus {
  outline: 0;
  box-shadow: var(--shadow-focus);
}
.btn-primary-chef i {
  font-size: 14px;
}

/* 🔴 Spec LIVRE-6 (chef, 2026-08-11) — LE BOUTON « FIGER » N'AVAIT AUCUN STYLE.
   Le gabarit posait `.btn-secondary-chef`, une classe qui n'existait nulle part :
   le bouton sortait donc au style natif du navigateur, à côté d'un bouton d'export
   au style de la maison.
   C'est le pendant SECONDAIRE du bouton d'action : même géométrie, même typographie,
   mais en contour — « Figer » est un geste rare et engageant, il ne doit pas rivaliser
   visuellement avec l'export, qui est le geste courant de cette page. */
.btn-secondary-chef {
  background: #fff;
  color: var(--accent-600, var(--accent-500));
  border: 1px solid var(--accent-500);
  border-radius: var(--radius-btn);
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.btn-secondary-chef:focus {
  outline: 0;
  box-shadow: var(--shadow-focus);
}
.btn-secondary-chef i {
  font-size: 14px;
}
@media (hover: hover) {
  .btn-secondary-chef:hover {
    background: var(--accent-50, var(--slate-50));
  }
}

/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 (I-4 --danger-50 preservé) */

/* ─── C. Show — KPI 3 cards ──────────────────────────────────────────── */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */
.kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-500);
  font-weight: 600;
  margin-bottom: 4px;
}
.kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.kpi-value.is-positive {
  color: var(--success-700);
}
.kpi-value.is-warning {
  color: var(--warning-700);
}
.kpi-value.is-danger {
  color: var(--danger-700);
}
/* Note Q28 : pas de sub-texte sous KPI (sandbox inventait des calculs absents en prod) */

/* ─── D. Show — Layout 2 colonnes ────────────────────────────────────── */

.client-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 20px;
  align-items: start;
}

/* ─── E. Show — Client cards (sections du show, ≠ .card-grid .client-card index) ─── */

.client-layout .client-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
  padding: 0;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */
.client-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  gap: 10px;
  cursor: pointer;
}
.client-card-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-500);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.client-card-title .bi {
  font-size: 13px;
}

.card-action {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 6px;
  color: var(--slate-400);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */
.card-action .bi {
  font-size: 16px;
}

.card-toggle {
  transition: transform 0.2s;
}
.client-card.is-collapsible.is-open .card-toggle {
  transform: rotate(180deg);
}
.client-card.is-collapsible:not(.is-open) .client-card-body {
  display: none;
}

.client-card-body {
  padding: 0 18px 16px;
}

/* ─── F. Show — Identity hero + KV-list + Adresses ──────────────────── */

.identity-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--slate-100);
}
.identity-avatar {
  width: 76px;
  height: 76px;
  border-radius: 16px;
  background: var(--accent-50);
  color: var(--accent-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.identity-avatar.is-particulier {
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-700);
}
.identity-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 4px 0;
}
.identity-type {
  font-size: 12px;
  color: var(--slate-500);
}

.kv-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.kv-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--slate-100);
}
.kv-row:last-child {
  border-bottom: none;
}
.kv-icon {
  color: var(--slate-400);
  font-size: 14px;
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.kv-value {
  font-size: 13px;
  color: var(--slate-900);
  word-break: break-word;
}
.kv-value.is-mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.kv-value a {
  color: var(--accent-700);
  text-decoration: none;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */
.kv-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-500);
  font-weight: 600;
  margin-bottom: 1px;
}
.kv-empty {
  color: var(--slate-400);
  font-style: italic;
  font-size: 12px;
}

.addr-block {
  padding: 10px 0;
  border-bottom: 1px solid var(--slate-100);
}
.addr-block:last-child {
  border-bottom: none;
}
.addr-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-500);
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.addr-label .bi {
  font-size: 12px;
}
.addr-lines {
  font-size: 13px;
  color: var(--slate-900);
  line-height: 1.55;
}

/* ─── G. Show — Documents deck (tabs + groupage mois) ──────────────── */

/* Préfixe .client-deck-* pour éviter collision .deck-item Ledger IMPL-9 (P37 réclamation 2026-06-06) */
.client-deck-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--slate-200);
  padding: 0 18px;
}
.client-deck-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  color: var(--slate-500);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
  font-family: inherit;
}
.client-deck-tab.is-active {
  color: var(--accent-700);
  border-bottom-color: var(--accent-500);
  font-weight: 600;
}
.client-deck-tab-count {
  margin-left: 5px;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 400;
}
.client-deck-tab.is-active .client-deck-tab-count {
  color: var(--accent-600);
}

.client-deck-list {
  padding: 0;
}
.client-deck-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-700);
  font-size: 12px;
}
.client-deck-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--accent-50);
  color: var(--accent-700);
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 600;
}
.client-deck-group-label {
  flex: 1 1 auto;
  color: var(--slate-900);
  font-weight: 600;
  text-transform: capitalize;
}
.client-deck-group-total {
  font-variant-numeric: tabular-nums;
  color: var(--slate-700);
  font-weight: 600;
}

.client-deck-item {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 12px 18px;
  border-bottom: 1px solid var(--slate-100);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.client-deck-item:last-child {
  border-bottom: none;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */
.client-deck-info {
  min-width: 0;
}
.client-deck-num {
  color: var(--slate-900);
  font-weight: 600;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.client-deck-meta {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 2px;
}
.client-deck-amount-block {
  text-align: right;
}
.client-deck-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--slate-900);
  font-size: 13.5px;
  white-space: nowrap;
}
.client-deck-amount.is-paid {
  color: var(--success-700);
}
.client-deck-amount.is-overdue {
  color: var(--danger-700);
}
.client-deck-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 2px;
}
.client-deck-status.s-paid {
  background: var(--success-50);
  color: var(--success-700);
}
.client-deck-status.s-pending {
  background: var(--warning-50);
  color: var(--warning-700);
}
.client-deck-status.s-overdue {
  background: var(--danger-50);
  color: var(--danger-700);
}
.client-deck-status.s-draft {
  background: var(--slate-100);
  color: var(--slate-700);
}
/* FIX-022 (M6) : classes canoniques manquantes → alignées sur .deck-status */
.client-deck-status.s-cancelled {
  background: var(--slate-100);
  color: var(--slate-500);
}
.client-deck-status.s-finalise {
  background: var(--accent-50);
  color: var(--accent-700);
}

/* ─── H. Footer card link ───────────────────────────────────────────── */

.card-footer-link {
  padding: 12px 18px;
  border-top: 1px solid var(--slate-100);
  text-align: center;
  background: var(--slate-50);
}
.card-footer-link a {
  color: var(--accent-700);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */

/* ─── I. Import dropzone ────────────────────────────────────────────── */

.import-dropzone {
  text-align: center;
  padding: 32px 16px;
  border: 2px dashed var(--slate-300);
  border-radius: var(--radius-card);
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* :hover migré dans Section IMPL-5-EXT-A @media (hover: hover) — BL-1 v3 */
.import-dropzone .bi {
  font-size: 3rem;
  color: var(--slate-500);
  display: block;
  margin-bottom: 8px;
}
.import-dropzone .dropzone-hint {
  color: var(--slate-500);
  font-size: var(--fs-sm);
  margin-bottom: 16px;
}
.import-dropzone input[type="file"] {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── J. Responsive ─────────────────────────────────────────────────── */

@media (max-width: 880px) {
  /* .client-layout migré vers @container Section IMPL-5-EXT-A — A2 v3 */
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .kpi-value {
    font-size: 18px;
  }
  .identity-hero {
    padding: 18px 14px 14px;
  }
  .identity-avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
  }
  .client-card-body {
    padding: 0 14px 12px;
  }
  .client-card-header {
    padding: 12px 14px;
  }
  .client-deck-tabs {
    padding: 0 14px;
    overflow-x: auto;
  }
  .client-deck-tab {
    padding: 10px 10px;
    font-size: 12.5px;
  }
  .client-deck-item {
    padding-left: 14px;
    padding-right: 14px;
  }
  .client-deck-group {
    padding: 6px 14px;
  }
}

/* === Fin Section IMPL-5 Clients === */

/* === Section IMPL-5-EXT-A — Bugs visuels Clients + bonus polish (post-FM) === */
/* Spec CORR-DS-IMPL-5-EXT-A v4 — 2026-06-07
   Items : A1 grid breakpoint, A2 layout breakpoint, A3 max-width,
           A4 mobile portrait header, A5 sticky index,
           A7 hover sticky mobile (MIGRATION 12 :hover IMPL-5 — BL-1),
           A8 padding header mobile, A9 wrap header tablet,
           A10 KPI mobile portrait, A11 focus-visible cards
   Retirés : A6 (chef OK), A12 (déjà appliqué L2152-2156)
   Hors Section : B6 (i18n show.php) */

/* ─── Wrapper local container — A1/A2/A3/A5 ─────────────────────────── */
/* A3 (hotfix FM 9Capture.PNG) : max-width déplacé du .client-layout vers .cl-page-wrap
   pour que header sticky + KPI + identity + sections soient TOUS centrés et alignés
   sur la même largeur 1280px (sinon header étiré pleine largeur ≠ contenu centré).
   A3-bis (hotfix FM 10Capture.PNG) : width: 100% explicite — sans cela, container-type:
   inline-size + max-width + margin: 0 auto produit un shrink-to-fit qui rétrécit le
   wrapper à une largeur intrinsèque sur mobile (cartes débordent à droite, header étroit). */
.cl-page-wrap {
  container-type: inline-size;
  container-name: cl-page;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* A1 : grille index — breakpoints recalés sur largeur conteneur */
@container cl-page (min-width: 720px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container cl-page (min-width: 1280px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* A2 : layout fiche — bascule 1 col sur largeur conteneur < 880 */
@container cl-page (max-width: 880px) {
  .client-layout { grid-template-columns: 1fr; }
}

/* A7 (BL-1 MIGRATION) : 12 :hover IMPL-5 confinés au desktop pointer fine */
@media (hover: hover) and (pointer: fine) {
  .card-grid .client-card:hover {
    border-color: var(--slate-300);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
  }
  .client-quick a:hover,
  .client-quick button:hover {
    background: var(--accent-50);
    color: var(--accent-700);
  }
  .back-btn:hover {
    color: var(--slate-900);
  }
  .btn-primary-chef:hover {
    background: var(--accent-600);
    color: #fff;
  }
  .btn-ghost.is-danger-hover:hover {
    background: var(--danger-50);
    border-color: var(--danger-50);
    color: var(--danger-700);
  }
  .kpi-card:hover {
    box-shadow: var(--shadow-card-hover);
  }
  .client-layout .client-card:hover {
    box-shadow: var(--shadow-card-hover);
  }
  .card-action:hover {
    color: var(--slate-700);
    background: var(--slate-50);
  }
  .kv-value a:hover {
    text-decoration: underline;
  }
  .client-deck-item:hover {
    background: var(--slate-50);
  }
  .card-footer-link a:hover {
    text-decoration: underline;
  }
  .import-dropzone:hover {
    border-color: var(--accent-300);
    background: var(--accent-50);
  }
}

/* A9 : wrap header tablet (481-768 px) — permet ellipsis nom long */
.page-header-sticky .header-left {
  flex: 1 1 auto;
  min-width: 0;
}
.page-header-sticky .client-name {
  flex: 1 1 0;
  min-width: 0;
}

/* A11 : focus-visible cards index (a11y clavier) */
.card-grid .client-card:focus-within {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-card);
}

/* A4 + A10 : mobile portrait < 480 px — header grid + KPI 1 col
   BL-10 : scoping .cl-page-wrap + :has(.client-name) pour ne PAS impacter index.php
            (qui contient aussi <header class="page-header-sticky"> sans
             .back-btn/.client-name/.client-badges) */
@media (max-width: 480px) {
  .cl-page-wrap .page-header-sticky:has(.client-name) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "back    actions"
      "title   title"
      "badges  badges";
    gap: 8px;
    align-items: center;
  }
  .cl-page-wrap .page-header-sticky:has(.client-name) .header-left { display: contents; }
  .cl-page-wrap .page-header-sticky:has(.client-name) .back-btn {
    grid-area: back;
  }
  .cl-page-wrap .page-header-sticky:has(.client-name) .client-name {
    grid-area: title;
    font-size: var(--fs-lg);
  }
  .cl-page-wrap .page-header-sticky:has(.client-name) .client-badges {
    grid-area: badges;
  }
  .cl-page-wrap .page-header-sticky:has(.client-name) .header-actions {
    grid-area: actions;
  }

  /* A10 : KPI 1 col mobile portrait */
  .kpi-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .kpi-value {
    font-size: 16px;
  }
}

/* A8 : padding header sticky réduit mobile tactile (< 640 px) */
@media (max-width: 640px) {
  .page-header-sticky {
    padding: var(--space-2) 0;
    margin-bottom: var(--space-3);
  }
}

/* === Fin Section IMPL-5-EXT-A === */

/* === Section IMPL-7 Interventions === */
/* Spec CORR-DS-IMPL-7 — Refonte visuelle DS Mint des 7 vues interventions
   (index liste+calendrier, _calendar, _day_group, show, form wizard, bill, _bill_picker).
   Q21 : tokens substitues (--surface-soft -> --slate-50, --surface-muted -> --slate-100,
   --shadow-fab -> 0 4px 12px rgba(15,23,42,.15) calque .settings-fab 110-14).
   Q4 : palette .calendar-client-pill hex hardcodes preserves (indep. couleur Chef A/B/F).
   Q24 : .interventions-fab width:48px;height:48px pour test 050-1b TE3 adapte 5.6ter. */

/* ─── A. Index liste ──────────────────────────────────────────────────── */
.interventions-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.interventions-header h1 {
  margin: 0;
  color: var(--slate-900);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.interventions-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.interventions-filter-segmented {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.interventions-filter-segmented .btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--slate-600);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.interventions-filter-segmented .btn-primary {
  background: transparent;
  color: var(--accent-700);
  border-color: var(--accent-500);
  box-shadow: none;
}
.interventions-filter-segmented .btn-outline-secondary:hover {
  background: var(--slate-50);
  color: var(--slate-900);
}

.interventions-tabs {
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 20px;
  display: flex;
  gap: 4px;
}
.interventions-tabs .nav-link {
  border: 0;
  color: var(--slate-500);
  padding: 10px 16px;
  font-size: var(--fs-md);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}
.interventions-tabs .nav-link:hover {
  color: var(--slate-900);
  background: transparent;
}
.interventions-tabs .nav-link.active {
  color: var(--accent-700);
  border-bottom-color: var(--accent-500);
  background: transparent;
}

.interventions-period-filter {
  margin-bottom: 16px;
}
.interventions-period-filter .badge {
  background: var(--accent-50);
  color: var(--accent-700);
  border: 1px solid var(--accent-100);
  padding: 8px 14px;
  font-weight: 500;
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.interventions-period-filter .badge a {
  color: var(--accent-700);
  text-decoration: none;
  margin-left: 4px;
}
.interventions-period-filter .badge a:hover {
  color: var(--accent-600);
}

.interventions-summary {
  color: var(--slate-500);
  font-size: var(--fs-sm);
  margin-bottom: 16px;
}

.interventions-page {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.interventions-month-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-top: 36px;
  margin-bottom: 0;
  box-shadow: none;
}
.interventions-month-card:first-of-type {
  margin-top: 8px;
}
.interventions-month-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px 10px;
  background: transparent;
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 8px;
}
.interventions-month-header strong {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--slate-500);
}
.interventions-month-header .interventions-month-total {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-700);
  font-variant-numeric: tabular-nums;
}
.interventions-month-body {
  background: transparent;
}

.interventions-fab {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-500);
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  z-index: 1040;
  transition: background 0.15s, transform 0.15s;
}
.interventions-fab:hover {
  background: var(--accent-600);
  color: #fff;
  transform: translateY(-1px);
}
.interventions-fab:focus {
  outline: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15), var(--shadow-focus);
}

/* ─── A-bis. Day-group + intervention-item ────────────────────────────── */
.intervention-day-group {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* FM2bis : sélecteur :not(:first-child) au lieu de + adjacent
   (le <script> inline EXT-A entre les day-groups casse l'adjacent sibling) */
.intervention-day-group {
  margin-top: 10px;
}
.intervention-day-group:first-child {
  margin-top: 0;
}
.intervention-day-header {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
}
.intervention-day-header strong {
  flex-grow: 1;
  color: var(--slate-900);
  font-weight: 600;
  font-size: var(--fs-md);
}
.intervention-day-header .intervention-day-total {
  color: var(--accent-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.intervention-item {
  display: block;
  padding: 12px 18px;
  text-decoration: none;
  color: var(--slate-900);
  border-bottom: 1px solid var(--slate-100);
  transition: background 0.12s;
}
.intervention-item:last-child {
  border-bottom: 0;
}
.intervention-item:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}
.intervention-item .intervention-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.intervention-item-row .intervention-item-client {
  flex-grow: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intervention-item-row .intervention-item-total {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
}
.intervention-item-row .intervention-item-service {
  flex-grow: 1;
  color: var(--slate-500);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intervention-item-row .intervention-item-meta {
  flex-shrink: 0;
  color: var(--slate-500);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.intervention-item.is-billed {
  opacity: 0.6;
  color: var(--slate-500);
}
.intervention-item.is-billed .intervention-item-client i.bi-lock-fill {
  margin-left: 6px;
  font-size: var(--fs-xs);
  color: var(--slate-500);
}

/* ─── B. Show détail ───────────────────────────────────────────────────── */
.intervention-header-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.intervention-header-bar h1 {
  margin: 0;
  color: var(--slate-900);
  font-size: var(--fs-2xl);
  font-weight: 600;
}
.intervention-header-bar .btn-outline-secondary {
  border-color: var(--slate-300);
  color: var(--slate-700);
  background: #fff;
}
.intervention-header-bar .btn-outline-secondary:hover {
  background: var(--slate-100);
  color: var(--slate-900);
  border-color: var(--slate-300);
}

.intervention-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.intervention-status-badge.is-billed {
  background: var(--slate-100);
  color: var(--slate-700);
}
.intervention-status-badge.is-active {
  background: var(--success-50);
  color: var(--success-700);
}

.intervention-kv-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width: 600px;
  overflow: hidden;
}
.intervention-kv-list {
  list-style: none;
  margin: 0;
  padding: 18px 24px;
}
.intervention-kv-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--slate-100);
  break-inside: avoid;
}
.intervention-kv-row:last-child {
  border-bottom: 0;
}
.intervention-kv-key {
  color: var(--slate-500);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.intervention-kv-value {
  color: var(--slate-900);
  font-size: var(--fs-base);
}
.intervention-kv-value.is-highlight {
  color: var(--accent-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.intervention-kv-value a {
  color: var(--slate-900);
  text-decoration: none;
}
.intervention-kv-value a:hover {
  color: var(--accent-700);
}

.intervention-actions-bar {
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-100);
}

/* ─── C. Form wizard 2 étapes ──────────────────────────────────────────── */
.intervention-form-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width: 500px;
  margin: 0 auto;
  padding: 28px 24px;
}
.intervention-step-title {
  color: var(--slate-500);
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.intervention-step-title i {
  color: var(--accent-500);
  font-size: 16px;
}

.intervention-stepper {
  display: inline-flex;
  max-width: 200px;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-btn);
  overflow: hidden;
  background: #fff;
}
.intervention-stepper .btn {
  border: 0;
  background: #fff;
  color: var(--slate-700);
  padding: 6px 10px;
  border-radius: 0;
}
.intervention-stepper .btn:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}
.intervention-stepper .form-control {
  border: 0;
  text-align: center;
  background: #fff;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.intervention-stepper .form-control:focus {
  box-shadow: none;
}
.intervention-stepper .input-group-text {
  background: var(--slate-50);
  border: 0;
  border-left: 1px solid var(--slate-200);
  color: var(--slate-700);
  font-weight: 500;
}

.intervention-hint-converted {
  color: var(--slate-500);
  font-size: var(--fs-xs);
  margin-top: 4px;
  font-style: italic;
}
.intervention-rate-source {
  color: var(--slate-500);
  font-size: var(--fs-sm);
  font-style: italic;
}

.intervention-total-box {
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  text-align: center;
  margin-bottom: 18px;
}
.intervention-total-box .intervention-total-label {
  color: var(--accent-700);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 4px;
}
.intervention-total-box .intervention-total-value {
  color: var(--accent-700);
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.intervention-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

/* ─── D. Calendar ──────────────────────────────────────────────────────── */
.calendar-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
  overflow: hidden;
}
.calendar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
}
.calendar-nav-btn {
  border: 1px solid var(--slate-300);
  background: #fff;
  color: var(--slate-700);
  padding: 4px 10px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.calendar-nav-btn:hover {
  background: var(--slate-100);
  color: var(--slate-900);
  border-color: var(--slate-300);
}

.calendar-mode-toggle {
  display: inline-flex;
  gap: 0;
  background: var(--slate-100);
  border-radius: var(--radius-btn);
  padding: 2px;
}
.calendar-mode-toggle .btn {
  border: 0;
  background: transparent;
  color: var(--slate-500);
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.calendar-mode-toggle .btn-primary {
  background: #fff;
  color: var(--slate-900);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.calendar-mode-toggle .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--slate-900);
}

.calendar-body {
  padding: 8px;
}
.calendar-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
}
.calendar-table th {
  color: var(--slate-500);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 0;
  text-align: center;
}
.calendar-cell {
  height: 100px;
  vertical-align: top;
  padding: 5px 6px 4px;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  background: #fff !important;
  background: var(--slate-50);
  transition: background 0.12s;
}
.calendar-cell.is-today {
  background: var(--accent-50) !important;
  border-color: var(--accent-500);
}
.calendar-cell.is-today .calendar-day-number {
  color: var(--accent-700);
  font-weight: 700;
}
.calendar-cell.has-data:hover {
  background: var(--accent-50) !important;
  border-color: var(--accent-100);
  cursor: pointer;
}
.calendar-day-number {
  font-size: var(--fs-xs);
  text-align: right;
  color: var(--slate-400);
  font-variant-numeric: tabular-nums;
}
.calendar-day-number.has-data {
  color: var(--slate-900);
  font-weight: 600;
}
.calendar-cell a {
  text-decoration: none;
  display: block;
  font-size: 10px;
  line-height: 1.2;
}

.calendar-hours-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}
.calendar-hours-badge.bg-primary {
  background: var(--accent-500) !important;
}
.calendar-hours-badge.bg-secondary {
  background: var(--slate-500) !important;
}

/* Q4 : palette pastel 10 hex hardcodes preserves dans le markup (_calendar.php:27).
   Cette regle ne CONTIENT PAS var(--accent-) (test K1 strict).
   Le texte color: var(--slate-700) reste tokenize neutre (lisible sur palette pastel claire). */
.calendar-client-pill {
  border-radius: 3px;
  padding: 1px 4px;
  margin: 1px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--slate-700);
  font-size: 10px;
}
.calendar-client-pill.is-all-billed {
  opacity: 0.5;
}

/* ─── E. Bill picker (mode dual standalone+embedded) ──────────────────── */
.bill-picker-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
}
.bill-picker-card.is-standalone {
  max-width: 700px;
  margin: 0 auto;
}
/* I-1 Q31a : variante reset quand picker inclus dans .modal-content */
.bill-picker-card.is-embedded {
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
}

.bill-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.bill-toolbar .btn {
  border: 1px solid var(--slate-300);
  background: #fff;
  color: var(--slate-700);
  padding: 6px 12px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-btn);
}
.bill-toolbar .btn:hover {
  background: var(--accent-50);
  color: var(--accent-700);
  border-color: var(--accent-200);
}

.bill-list {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  overflow: hidden;
}
.bill-item {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--slate-100);
  cursor: pointer;
  transition: background 0.12s;
}
.bill-item:last-child {
  border-bottom: 0;
}
.bill-item:hover {
  background: var(--slate-100);
}
/* Q26 I-2 : CSS pur :has() — JS ne pose pas .is-checked */
.bill-item:has(.bill-check:checked) {
  background: var(--accent-50);
}
.bill-check {
  margin-right: 10px;
}

.bill-options-box {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.bill-preview-box {
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
  border-radius: var(--radius-btn);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.bill-preview-box h6 {
  color: var(--accent-700);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 8px;
}
.bill-preview-box hr {
  border-color: var(--accent-100);
  opacity: 1;
  margin: 10px 0;
}
.bill-preview-box .bill-preview-total {
  color: var(--accent-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bill-actions-bar {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

/* ─── F. @media print preservations (Q27 I-3) ─────────────────────────── */
@media print {
  .intervention-kv-row {
    break-inside: avoid;
  }
  .intervention-day-group {
    break-inside: avoid;
  }
  .interventions-fab {
    display: none;
  }
}

/* ─── G. Responsive mobile (FM17 D-1) ─────────────────────────────────── */
@media (max-width: 480px) {
  .interventions-header h1 {
    font-size: var(--fs-lg);
  }
  .calendar-cell {
    height: 48px;
    padding: 2px;
  }
  .calendar-day-number {
    font-size: 9px;
  }
  .calendar-hours-badge {
    font-size: 9px;
    padding: 1px 4px;
  }
  .calendar-client-pill {
    font-size: 9px;
  }
  .intervention-kv-row {
    grid-template-columns: 100px 1fr;
    gap: 8px;
  }
  .intervention-form-card {
    padding: 18px 14px;
  }
  .bill-picker-card {
    padding: 18px 14px;
  }
}

/* ─── EXT-A : search-bar + pagination ─────────────────────────────────────── */
#iv-search-form {
  margin-bottom: var(--space-3);
}
#interventions-search-bar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
#interventions-search-bar input[type="search"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}
#interventions-search-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}
#interventions-search-bar select {
  padding: 8px 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 0.95rem;
  max-width: 160px;
}
#interventions-pagination {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-4) 0;
  flex-wrap: wrap;
}
#interventions-pagination a,
#interventions-pagination .ellipsis {
  padding: 6px 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  color: var(--slate-700);
  text-decoration: none;
  font-size: 0.9rem;
  min-width: 36px;
  text-align: center;
}
#interventions-pagination a.is-active {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
  font-weight: 600;
}
#interventions-pagination a:hover:not(.is-active) {
  background: var(--slate-50);
  border-color: var(--accent-100);
}
#interventions-pagination .ellipsis {
  border-color: transparent;
  color: var(--slate-400);
}

/* ─── EXT-A : calendrier is-future + is-selected + cellule cliquable ──────── */
/* D9 — is-future (jour à venir) : grisé léger. !important bat le défaut #fff !important FM5. */
.calendar-cell.is-future {
  background: var(--slate-100) !important;
}
/* Audit B2 — cascade spec 3 sur .has-data:hover qui sinon écraserait .is-future (spec 2). */
.calendar-cell.is-future.has-data:hover {
  background: var(--slate-100) !important;
  border-color: var(--accent-100);
}
/* D8 — is-selected (clic sur case) : surlignage accent. */
.calendar-cell.is-selected {
  background: var(--accent-100) !important;
  border-color: var(--accent-500) !important;
}
/* Audit I12 — préserver le surlignage au hover sur case sélectionnée. */
.calendar-cell.is-selected:hover {
  background: var(--accent-100) !important;
  border-color: var(--accent-500) !important;
}
/* D7 — cellule entièrement cliquable. */
.calendar-cell[data-href] {
  cursor: pointer;
}
.calendar-cell[data-href]:focus {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}

/* ─── EXT-A : légende calendrier (D10 / EXT-02) ───────────────────────────── */
.calendar-legend {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  padding: var(--space-3) 0;
  font-size: 0.85rem;
  color: var(--slate-600);
  flex-wrap: wrap;
}
.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.calendar-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}
.calendar-legend-swatch.is-to-bill {
  background: var(--accent-500);
}
.calendar-legend-swatch.is-billed {
  background: var(--slate-500);
}
.calendar-legend-swatch.is-today {
  background: var(--accent-100);
  border: 1px solid var(--accent-500);
}

/* ─── EXT-A : .intervention-item passé en <div data-href> (D11 audit B3) ─── */
.intervention-item[data-href] {
  cursor: pointer;
}
.intervention-item[data-href]:focus {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}

/* ─── EXT-A : bouton .iv-edit-btn par ligne (EXT-06) ──────────────────────── */
/* FM2 — calque sandbox 11 : icône + texte « Modifier » + couleur Chef (accent-700) */
.iv-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-btn, var(--radius-md));
  color: var(--accent-700);
  border: 1px solid var(--accent-100);
  background: transparent;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 500;
  flex-shrink: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.iv-edit-btn:hover,
.iv-edit-btn:focus {
  background: var(--accent-50);
  border-color: var(--accent-500);
  color: var(--accent-700);
}
.iv-edit-btn i.bi {
  font-size: 12px;
}

/* === Fin Section IMPL-7-EXT-A === */

/* === Fin Section IMPL-7 Interventions === */

/* === Section IMPL-5-EXT-B Polish UX Clients + Form (spec CORR-DS-IMPL-5-EXT-B) ===
   B3 : sélecteur de tri dans .cli-toolbar
   B4 : actions tactiles tap tel/mail/maps sur cards index (.client-meta a.line)
        pattern P-STRETCHED : z-index: 2 pour intercepter le clic avant .stretched-link::after
   B10 : polish bouton SIRET (champ pleine largeur tabular)
   D1 : header sticky form create/edit réutilise .page-header-sticky existant (Section IMPL-5)
*/

/* B3 — Sélecteur de tri (cli-toolbar) */
.cli-toolbar .sort-select {
  flex: 0 0 auto;
  padding: 9px 28px 9px 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--slate-700);
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M3.5 5.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
.cli-toolbar .sort-select:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}

/* B4 — Wrap option B : a.line REMPLACE .line div, mêmes propriétés flex que .line historique */
.client-meta a.line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  /* P-STRETCHED : intercepter le clic avant .stretched-link::after (sibling) */
  position: relative;
  z-index: 2;
  /* Cible tactile mobile confortable */
  padding: 2px 0;
  border-radius: var(--radius-btn);
  transition: background 0.15s ease;
}
.client-meta a.line:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  background: var(--accent-50);
}

/* B10 — Input SIRET polish : largeur confortable 14 chiffres, font tabular pour alignement */
.siret-input {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 12ch;
}

/* P41-bis — Migration :hover sous @media (hover: hover) and (pointer: fine)
   (les terminaux tactiles n'exposent pas hover correctement, éviter sticky-hover sur mobile) */
@media (hover: hover) and (pointer: fine) {
  .client-meta a.line:hover {
    background: var(--accent-50);
  }
  .cli-toolbar .sort-select:hover {
    border-color: var(--slate-300);
  }
}

/* === Fin Section IMPL-5-EXT-B === */

/* === Section IMPL-7-EXT-B Picker mois + iv-icon (spec CORR-DS-IMPL-7-EXT-B) ===
   - Picker mois/année popover (sandbox 14) : .calendar-month-wrap / .calendar-month-btn /
     .calendar-month-picker / .cal-year-row / .cal-year-nav / .cal-year-label /
     .cal-months-grid / .cal-month-cell (12 cellules)
   - FOLLOWUP-007 iv-icon (sandbox 11) : rond 36×36 en tête de .intervention-item,
     accent-100 si non facturée / slate-100 si is-billed.
     Cascade .intervention-item passe en display:flex pour intégrer .iv-icon + .iv-body.
*/

/* Picker mois/année popover */
.calendar-header {
  position: relative;
}
.calendar-month-wrap {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
}
.calendar-month-btn {
  background: transparent;
  border: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--slate-900);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-btn);
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.12s ease;
}
.calendar-month-btn:hover {
  background: var(--slate-50);
}
.calendar-month-btn i {
  font-size: 11px;
  color: var(--slate-500);
  transition: transform 0.15s ease;
}
.calendar-month-btn.is-open i {
  transform: rotate(180deg);
}

.calendar-month-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: 0 14px 36px -10px rgba(15, 23, 42, 0.18);
  padding: 14px;
  z-index: 50;
  width: 280px;
  display: none;
}
.calendar-month-picker.is-open {
  display: block;
}

.cal-year-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-year-nav {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  color: var(--slate-700);
  cursor: pointer;
  transition: background 0.12s ease;
}
.cal-year-nav:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}
.cal-year-label {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--slate-900);
}

.cal-months-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.cal-month-cell {
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-btn);
  padding: 8px 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--slate-700);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cal-month-cell:hover {
  background: var(--accent-50);
  border-color: var(--accent-100);
  color: var(--accent-700);
}
.cal-month-cell.is-current {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
}

/* FOLLOWUP-007 icône statut intervention-item (sandbox 11 .iv-icon)
   Cascade : .intervention-item passe en display:flex (surcharge Section IMPL-7 display:block) */
.intervention-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.iv-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-700);
  font-size: 16px;
}
.intervention-item.is-billed .iv-icon {
  background: var(--slate-100);
  color: var(--slate-500);
}
.iv-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* FOLLOWUP-007 v2 (chef post-FM 4Capture.PNG) : pattern sandbox 11 fidele —
   .iv-right colonne droite avec .intervention-item-total + .iv-edit-btn */
.iv-right {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 86px;
}
/* Total dans .iv-right : taille plus marquee comme sandbox 11 .iv-amount */
.iv-right .intervention-item-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-900);
  text-align: right;
  white-space: nowrap;
}

/* FOLLOWUP-009 (chef post-FM 5Capture.PNG) : label "par page" notch dans bordure du select
   pour reduire l'encombrement visuel (options reduites au chiffre seul). Pattern label-in-border. */
.iv-per-page-wrap {
  position: relative;
  flex: none;
}
.iv-per-page-wrap label {
  position: absolute;
  top: -7px;
  left: 10px;
  background: #fff;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 1;
}
/* Surcharge du select pour qu'il soit compact (juste largeur du chiffre + chevron) */
#interventions-search-bar .iv-per-page-wrap select {
  max-width: 90px;
  padding: 8px 28px 8px 12px; /* room pour la fleche chevron natif */
}

/* Responsive iv-icon + iv-right mobile */
@media (max-width: 480px) {
  .iv-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .iv-right {
    min-width: 76px;
  }
  .iv-right .intervention-item-total {
    font-size: 13px;
  }
  #interventions-search-bar .iv-per-page-wrap select {
    max-width: 80px;
  }
}

/* === Fin Section IMPL-7-EXT-B === */

/* === [IMPL-6-START] Section IMPL-6 — Mouvements (CORR-DS-IMPL-6, sandbox 08+09) === */

/* Header sticky local (anti-collision .page-header-sticky couplée à .client-name IMPL-5) */
.mvt-page-header {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: var(--slate-50);
  margin-bottom: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  transition: padding 0.15s ease;
}
.mvt-page-header.is-scrolled {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}
.mvt-page-header h1 {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--slate-900);
  margin: 0;
  display: flex;
  align-items: center;
}
.mvt-page-header .header-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.mvt-summary-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.mvt-summary-card.card-ca {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color: #fff;
  text-align: center;
  margin-bottom: var(--space-3);
  border: none;
}
.mvt-summary-card.card-ca .ca-label {
  font-size: var(--fs-sm);
  opacity: 0.9;
}
.mvt-summary-card.card-ca .ca-value {
  font-size: 28px;
  font-weight: 700;
}
.mvt-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.mvt-summary-card.sum-entrees,
.mvt-summary-card.sum-sorties,
.mvt-summary-card.sum-solde {
  text-align: center;
  padding: var(--space-2);
}
.mvt-summary-card small {
  color: var(--slate-500);
  font-size: var(--fs-xs);
  display: block;
}
.mvt-summary-card .sum-amount {
  font-weight: 600;
  font-size: clamp(0.85rem, 2.5vw, 1.25rem);
}
.mvt-summary-card .sum-pos {
  color: var(--success-700);
}
.mvt-summary-card .sum-neg {
  color: var(--danger-600);
}

/* E3 filtre rétractable */
.filter-toolbar {
  margin-bottom: var(--space-2);
}
.filter-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--slate-300);
  color: var(--slate-700);
  padding: 6px 14px;
  border-radius: var(--radius-pill, 20px);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.filter-link:hover {
  border-color: var(--accent-500);
}
.filter-link.is-open {
  background: var(--accent-50);
  border-color: var(--accent-500);
  color: var(--accent-700);
}
.filter-link .chevron {
  transition: transform 0.2s;
  font-size: 12px;
}
.filter-link.is-open .chevron {
  transform: rotate(180deg);
}
.filter-link .filter-badge {
  color: var(--accent-500);
  font-size: 8px;
}

.filter-panel {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-card);
}
.filter-panel[hidden] {
  display: none;
}
.filter-panel .filter-group {
  margin-bottom: var(--space-3);
}
.filter-panel .filter-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.filter-panel .filter-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--slate-600);
  margin-bottom: 4px;
  font-weight: 500;
}
.filter-panel .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-panel .chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-pill, 16px);
  background: #fff;
  color: var(--slate-700);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.filter-panel .chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.filter-panel .chip:hover {
  border-color: var(--accent-400);
}
.filter-panel .chip.active,
.filter-panel .chip:has(input:checked) {
  background: var(--accent-50);
  border-color: var(--accent-500);
  color: var(--accent-700);
}
.filter-panel .date-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-panel .date-range .date-sep {
  color: var(--slate-400);
}
.filter-panel .filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--slate-100);
}

.mvt-empty-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  margin: var(--space-4) 0;
}
.mvt-empty-card .empty-icon {
  font-size: 48px;
  color: var(--slate-300);
}
.mvt-empty-card .empty-text {
  color: var(--slate-500);
  margin: var(--space-3) 0;
}

/* E1 Deck items groupés par mois */
.mvt-deck {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.mvt-deck-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  font-size: var(--fs-sm);
}
.mvt-deck-group:not(:first-child) {
  border-top: 1px solid var(--slate-200);
}
.mvt-deck-group-label {
  font-weight: 600;
  color: var(--slate-900);
  text-transform: capitalize;
  flex: 1;
}
.mvt-deck-group-count {
  color: var(--slate-500);
  font-size: var(--fs-xs);
}
.mvt-deck-group-total {
  font-weight: 600;
  font-size: var(--fs-sm);
}
.mvt-deck-group-total.net.is-positive {
  color: var(--success-700);
}
.mvt-deck-group-total.net.is-negative {
  color: var(--danger-600);
}

/* === EXT-A : refonte grille 3 colonnes externe (2026-06-13) === */
.mvt-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: start;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--slate-100);
  transition: background 0.15s;
}
.mvt-item:last-child {
  border-bottom: 0;
}
.mvt-item:hover {
  background: var(--slate-50);
}
.mvt-item.is-hors-ca {
  background: var(--slate-50);
  color: var(--slate-500);
}
.mvt-item.is-hors-ca .mvt-type,
.mvt-item.is-hors-ca .mvt-amount {
  color: var(--slate-500);
}

/* Icône typée (audit v2 O1 : mapping mouvement_type) — EXT-A D7 : carré arrondi 12px (sandbox 08) */
.mvt-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 20px;
  margin-top: 2px;
}
.mvt-icon.t-in {
  background: var(--success-100);
  color: var(--success-700);
}
.mvt-icon.t-out {
  background: var(--danger-100, #fee2e2);
  color: var(--danger-600);
}
.mvt-icon.t-other {
  background: var(--slate-100);
  color: var(--slate-600);
}

.mvt-body {
  min-width: 0;
}

.mvt-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.mvt-type {
  font-weight: 600;
  color: var(--slate-900);
  font-size: var(--fs-base);
}
.mvt-doc {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-xs);
  color: var(--accent-700);
  background: var(--accent-50);
  padding: 2px 6px;
  border-radius: 4px;
}
/* EXT-A D8 : margin-left: 2px (sandbox 08 L301) — collent au .mvt-doc, plus à l'extrême droite */
.mvt-status-icons {
  display: inline-flex;
  gap: 4px;
  margin-left: 2px;
}
.mvt-status-icons .si {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
}
.mvt-status-icons .si.is-rapproche {
  background: var(--success-100);
  color: var(--success-700);
}
.mvt-status-icons .si.has-justif {
  background: var(--accent-100, #ecfdf5);
  color: var(--accent-700);
}
.mvt-status-icons .si.is-empty {
  background: var(--slate-100);
  color: var(--slate-400);
}

/* EXT-A O4 : préserver text-align: right + white-space: nowrap, AJOUTER tabular-nums + padding-top */
.mvt-amount {
  font-weight: 700;
  font-size: var(--fs-md);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.mvt-amount.is-positive {
  color: var(--success-700);
}
.mvt-amount.is-negative {
  color: var(--danger-600);
}
.mvt-amount-date {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--slate-500);
}

.mvt-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--slate-600);
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mvt-line2 .sep {
  color: var(--slate-300);
}
.mvt-line2 .mvt-category {
  background: var(--slate-100);
  color: var(--slate-700);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--fs-xs);
}
.mvt-tag-hors-ca {
  background: var(--slate-200);
  color: var(--slate-600);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* EXT-A D1 : .mvt-desc supprimée (doublon avec n° doc déjà visible ligne 1) */
.mvt-allocations {
  font-size: var(--fs-xs);
  color: var(--slate-500);
  margin: 4px 0;
}

/* E2 : 5 boutons inline ligne 3 */
.mvt-actions {
  display: flex;
  gap: 6px;
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.mvt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.15s;
}
.mvt-action-btn:hover {
  border-color: var(--accent-400);
  color: var(--accent-700);
  background: var(--accent-50);
}
.mvt-action-btn.is-active {
  border-color: var(--success-500);
  color: var(--success-700);
  background: var(--success-50);
}
.mvt-action-btn.has-attachment {
  border-color: var(--accent-300);
}
.mvt-action-btn.is-danger:hover {
  border-color: var(--danger-500);
  color: var(--danger-600);
  background: var(--danger-50, #fef2f2);
}
.mvt-action-form {
  display: inline;
  margin: 0;
}

/* Phase 4.3 + 4.6 : Segmented CSS-only :checked (audit profond B7 + O8) */
.segmented {
  display: inline-flex;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-pill, 24px);
  overflow: hidden;
  background: var(--slate-50);
  width: 100%;
  position: relative;
}
.segmented .seg-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.segmented .seg-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--slate-600);
  background: transparent;
  transition: all 0.15s;
  border: 0;
  text-align: center;
  margin: 0;
}
.segmented .seg-btn:hover {
  color: var(--slate-900);
}
.segmented .seg-input:checked + .seg-btn {
  background: #fff;
  color: var(--slate-900);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.segmented .seg-input:checked + .seg-btn.is-in {
  background: var(--success-100);
  color: var(--success-700);
}
.segmented .seg-input:checked + .seg-btn.is-out {
  background: var(--danger-100, #fee2e2);
  color: var(--danger-600);
}
.segmented-sm .seg-btn {
  padding: 6px 10px;
  font-size: var(--fs-xs);
}

/* DI-17 : Surcharges scopées modales (audit profond B3+B6+O9) */
#reconcileModal .modal-content {
  border-radius: var(--radius-card);
}
#reconcileModal .modal-header {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}
/* B3+B6 : règle unifiée .doc-choice ET .direct-client-choice */
#reconcileModal .list-group-item-action.active {
  background: var(--accent-100, #ecfdf5);
  color: var(--accent-700);
  border-color: var(--accent-500);
}
/* O9 : scope si surcharge globale .btn.active ajoutée */
#facturePickerModal .btn.active,
#avoirPickerModal .btn.active {
  background: var(--accent-500);
  color: #fff;
}

/* Mobile responsive — EXT-A D5 : grid externe 38px + boutons nowrap icônes seules */
@media (max-width: 640px) {
  .mvt-summary-grid {
    grid-template-columns: 1fr;
  }
  .filter-panel .filter-group-row {
    grid-template-columns: 1fr;
  }
  .mvt-item {
    grid-template-columns: 38px 1fr auto;
    column-gap: 10px;
    padding: var(--space-3);
  }
  .mvt-icon {
    width: 38px;
    height: 38px;
    font-size: 17px;
    border-radius: 10px;
  }
  .mvt-type {
    font-size: var(--fs-sm);
  }
  .mvt-amount {
    font-size: var(--fs-sm);
  }
  .mvt-actions {
    gap: 4px;
    flex-wrap: nowrap;
  }
  .mvt-action-btn {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 6px;
    font-size: 12px;
    flex-shrink: 0;
  }
  /* EXT-A FM hotfix : compteur « X mouvements » masqué en mobile (libère l'en-tête de mois) */
  .mvt-deck-group-count {
    display: none;
  }
}

/* === EXT-A : suppression hotfix FM3 IMPL-6 (grid interne .mvt-body retirée → align-self caduc) === */

/* Point 4 : totaux généraux neutralisés — fond transparent, juste texte accent */
.mvt-grand-total {
  background: transparent;
  color: inherit;
  border: 0;
  box-shadow: none;
  padding: var(--space-3) var(--space-1) 0 var(--space-1);
  margin-top: var(--space-3);
  border-top: 1px solid var(--slate-200);
}
.mvt-grand-total-title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--accent-700);
  opacity: 1;
}
.mvt-grand-total .gt-label {
  color: var(--slate-500);
  opacity: 1;
}
.mvt-grand-total .gt-value {
  color: var(--accent-700);
  font-weight: 700;
}
.mvt-grand-total .gt-value.sum-pos {
  color: var(--success-700);
}
.mvt-grand-total .gt-value.sum-neg {
  color: var(--danger-600);
}
.mvt-grand-total .gt-ca .gt-value {
  color: var(--accent-700);
  font-size: var(--fs-lg);
}

/* === FM2 hotfix IMPL-6 post-Apply round 2 (2026-06-07) === */

/* Point 4 : bandeau .mvt-summary-bar du haut RETIRÉ (year-picker à la place) */
.mvt-summary-bar {
  display: none;
}

/* Point 7 : year-picker en haut (flèches navigation + label) */
.mvt-year-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.mvt-year-picker .year-current {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--slate-900);
  min-width: 80px;
  text-align: center;
}
.mvt-year-picker .year-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--slate-300);
  color: var(--slate-600);
  text-decoration: none;
  transition: all 0.15s;
}
.mvt-year-picker .year-nav:hover {
  border-color: var(--accent-500);
  color: var(--accent-700);
  background: var(--accent-50);
}

/* === EXT-A : suppression grid interne .mvt-body (remplacé par grid externe .mvt-item 3 cols) === */
/* L'ancien grid-template-areas "line2 / actions" forçait .mvt-line2 sur la hauteur des boutons (≥ 36px), créant un vide vertical. */
/* La nouvelle structure : grid externe au niveau .mvt-item (44px | 1fr | auto), body en flex column simple. */

/* Point 2 : Bouton dé-rapprocher + badge rapproché + bouton justif coloré = COULEUR ACCENT (pas success) */
.mvt-action-btn.is-active {
  border-color: var(--accent-500);
  color: var(--accent-700);
  background: var(--accent-50);
}
.mvt-status-icons .si.is-rapproche {
  background: var(--accent-100, #ecfdf5);
  color: var(--accent-700);
}
/* .mvt-action-btn.is-active.has-attachment garde le même style accent (cohérent) */

/* Point 5 : récap mini-bandeau neutre sous liste, aligné droite */
.mvt-summary-inline {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  color: var(--slate-600);
  font-size: var(--fs-sm);
  background: transparent;
  border: 0;
}
.mvt-summary-inline .sumi-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mvt-summary-inline .sumi-label {
  color: var(--slate-500);
}
.mvt-summary-inline .sumi-value {
  font-weight: 600;
}
.mvt-summary-inline .sumi-sep {
  color: var(--slate-300);
}

/* Point 7 : totaux généraux année (style ledger livre des recettes) */
.mvt-grand-total {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
/* Les couleurs sombres du bloc « Point 4 » (fond transparent) survivaient à ce fond
   dégradé accent : titre, libellés et valeurs y devenaient illisibles. */
.mvt-grand-total-title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: #fff;
  opacity: 0.95;
}
.mvt-grand-total-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.mvt-grand-total .gt-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mvt-grand-total .gt-label {
  font-size: var(--fs-xs);
  color: #fff;
  opacity: 0.85;
}
.mvt-grand-total .gt-value {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #fff;
}
.mvt-grand-total .gt-value.sum-pos,
.mvt-grand-total .gt-value.sum-neg {
  color: #fff; /* sur fond accent, garder blanc lisible */
}
.mvt-grand-total .gt-ca .gt-value {
  font-size: var(--fs-lg);
  color: #fff;
}
@media (max-width: 640px) {
  .mvt-grand-total-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Point 6 : fil d'Ariane import — passées = contour accent, courante = remplie accent, futures = gris */
.import-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.import-stepper .import-step {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 20px);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all 0.15s;
}
.import-stepper .import-step.is-current {
  background: var(--accent-500);
  color: #fff;
  border: 1px solid var(--accent-500);
}
.import-stepper .import-step.is-past {
  background: #fff;
  color: var(--accent-700);
  border: 1px solid var(--accent-500);
}
.import-stepper .import-step.is-future {
  background: var(--slate-100);
  color: var(--slate-500);
  border: 1px solid var(--slate-200);
}
.import-stepper .import-step-sep {
  color: var(--slate-400);
  font-size: 14px;
}

/* === FM hotfix IMPL-6 post-Apply (2026-06-07) === */

/* Point 10 : max-width container Mint (grand écran centré) */
.mvt-page-wrap {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

/* Point 1 : bandeau résumé en 1 ligne unique (style sandbox 08 .deck-toolbar) — remplace .mvt-summary-grid */
.mvt-summary-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.mvt-summary-bar .sb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
}
.mvt-summary-bar .sb-ca {
  font-weight: 600;
}
.mvt-summary-bar .sb-ca .sb-ca-value {
  color: var(--accent-700);
  font-size: var(--fs-md);
  font-weight: 700;
}
.mvt-summary-bar .sb-label {
  color: var(--slate-500);
  font-size: var(--fs-xs);
}
.mvt-summary-bar .sb-value {
  font-weight: 600;
}
.mvt-summary-bar .sb-value.sum-pos {
  color: var(--success-700);
}
.mvt-summary-bar .sb-value.sum-neg {
  color: var(--danger-600);
}
.mvt-summary-bar .sb-sep {
  width: 1px;
  height: 24px;
  background: var(--slate-200);
}
.mvt-summary-bar .sb-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mvt-summary-bar .sb-dot-pos {
  background: var(--success-500);
}
.mvt-summary-bar .sb-dot-neg {
  background: var(--danger-500);
}

/* Point 9 : collapse mois via <details>/<summary> */
.mvt-deck-month {
  border: 0;
  margin: 0;
}
.mvt-deck-month + .mvt-deck-month {
  border-top: 1px solid var(--slate-200);
}
.mvt-deck-month > summary.mvt-deck-group {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.mvt-deck-month > summary.mvt-deck-group::-webkit-details-marker {
  display: none;
}
.mvt-deck-month .deck-chevron {
  transition: transform 0.2s;
  color: var(--slate-500);
  font-size: 12px;
  margin-right: 4px;
}
.mvt-deck-month[open] .deck-chevron {
  transform: rotate(90deg);
}

/* Point 2 : boutons d'actions alignés à droite (ligne 3) */
.mvt-actions {
  justify-content: flex-end;
  margin-top: var(--space-2);
}

/* Point 5 : bouton justif coloré .is-active quand attaché (même style que rapprochement) */
.mvt-action-btn.is-active.has-attachment {
  border-color: var(--accent-500);
  color: var(--accent-700);
  background: var(--accent-50);
}
.mvt-action-btn.is-active.has-attachment .si.has-justif {
  background: transparent;
  color: inherit;
}

/* === EXT-A : .mvt-amount-method supprimée — méthode paiement déplacée dans .mvt-line2 (D3) === */

/* /create 2 : couleur sélection picker factures (scopé anti-collision IMPL-2bis-B) */
#facturePickerModal .list-group-item.selected,
#facturePickerModal .list-group-item.active,
#facturePickerModal .invoice-picker-row.selected {
  background: var(--accent-100, #ecfdf5);
  color: var(--accent-700);
  border-color: var(--accent-500);
}

/* /import 1 : fil d'Ariane import wizard couleur Chef */
.import-stepper .step.active,
.import-stepper .step.is-active,
.bg-primary.import-step,
.import-step-dot.active,
.import-step-circle.active {
  background-color: var(--accent-500) !important;
  color: #fff !important;
  border-color: var(--accent-500) !important;
}
.import-stepper .step-line.completed,
.import-stepper .step-line.is-completed {
  background-color: var(--accent-500) !important;
}
.import-stepper .badge.bg-primary,
.import-stepper .step-badge.bg-primary {
  background-color: var(--accent-500) !important;
}

/* Mobile : bandeau résumé wrap proprement */
@media (max-width: 640px) {
  .mvt-summary-bar {
    gap: var(--space-2);
  }
  .mvt-summary-bar .sb-sep {
    display: none;
  }
  .mvt-summary-bar .sb-item {
    flex: 1 1 calc(50% - var(--space-2));
  }
  .mvt-page-wrap {
    padding: 0 var(--space-2);
  }
}

/* === [IMPL-6-END] Fin Section IMPL-6 === */

/* ============================================================
 * CORR-DS-IMPL-4-A — Documents Liste (refonte Mint de documents/index.php)
 *
 * Préfixe `.deck-doc-*` pour les éléments d'item — éviter collision
 * avec `.deck-item` Ledger IMPL-9b (L1808+L1818+L1830) et cohabiter
 * avec `.client-deck-*` IMPL-5 L2474 (pattern P37 ré-appliqué).
 *
 * Classes partagées (sans `-doc-`) : `.deck-list`, `.deck-action(s)`,
 * `.deck-status` (+ slugs `.s-*`), `.deck-tabs/tab`, `.deck-pagination`,
 * `.deck-empty-state`, `.deck-delta`, `.deck-banner`, `.deck-overlay`,
 * `.deck-modal-header`, `.deck-toolbar`, `.deck-search*`, `.deck-select`.
 * ============================================================ */

/* — Wrapper liste — */
.deck-list {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  container-type: inline-size;
}

/* — Toolbar (onglets + recherche + dropdown statut) — */
.deck-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  container-type: inline-size;
}

/* — Onglets type document — */
.deck-tabs {
  display: flex;
  flex-direction: row;
  gap: var(--space-1);
  border-bottom: 1px solid transparent;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.deck-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  color: var(--slate-500);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}
.deck-tab:hover {
  color: var(--accent-700);
  background: var(--slate-50);
}
.deck-tab.is-active {
  color: var(--accent-700);
  border-bottom: 2px solid var(--accent-500);
  background: var(--accent-50);
}

/* — Recherche — */
.deck-search {
  flex: 0 1 320px;
  min-width: 200px;
  margin: 0;
}
.deck-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.deck-search-icon {
  position: absolute;
  left: 10px;
  color: var(--slate-500);
  pointer-events: none;
  font-size: var(--fs-sm);
}
.deck-search-input {
  width: 100%;
  padding: 6px 32px 6px 32px;
  font-size: var(--fs-sm);
  color: var(--slate-900);
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.deck-search-input:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-50);
}
.deck-search-clear {
  position: absolute;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-500);
  background: transparent;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.deck-search-clear:hover {
  background: var(--slate-100);
  color: var(--danger-700);
}

/* — Dropdown statut — */
.deck-status-filter {
  flex: 0 0 auto;
}
.deck-select {
  padding: 6px 28px 6px 10px;
  font-size: var(--fs-sm);
  color: var(--slate-900);
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color 0.15s ease;
  appearance: auto;
}
.deck-select:hover {
  border-color: var(--accent-500);
}
.deck-select:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-50);
}

/* — Bandeau filtre actif (unpaid) — */
.deck-banner {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-btn);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.deck-banner-warning {
  background: var(--warning-50);
  color: var(--warning-700);
  border-color: var(--warning-700);
  border-left-width: 4px;
}
.deck-banner-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  margin-left: var(--space-2);
  transition: background-color 0.15s ease;
}
.deck-banner-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* — État vide — */
.deck-empty-state {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-6);
  text-align: center;
  color: var(--slate-500);
  background: #fff;
  border: 1px dashed var(--slate-200);
  border-radius: var(--radius-card);
}

/* — Item document (préfixe .deck-doc-* anti-collision IMPL-9b) — */
.deck-doc-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--slate-100);
  transition: background-color 0.15s ease;
}
.deck-doc-item:last-child {
  border-bottom: none;
}
.deck-doc-item:hover {
  background: var(--slate-50);
}
.deck-doc-item:focus-within {
  background: var(--slate-50);
}
.deck-doc-item.is-cancelled {
  opacity: 0.6;
}

/* — Lien englobant 2 rangées (I2 décision a — accessibilité Tab+Enter) — */
.deck-doc-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  outline: none;
}
.deck-doc-item-link:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-btn);
}

/* — Rangées internes — */
.deck-doc-line-num,
.deck-doc-line-client,
.deck-doc-line-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}
.deck-doc-line-actions {
  margin-top: var(--space-1);
}

/* — Textes item — */
.deck-doc-num {
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--slate-900);
}
.deck-doc-num.is-cancelled {
  text-decoration: line-through;
  color: var(--slate-500);
}
.deck-doc-date {
  font-size: var(--fs-sm);
  color: var(--slate-500);
  white-space: nowrap;
  flex-shrink: 0;
}
.deck-doc-client {
  font-size: var(--fs-md);
  color: var(--slate-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
}
.deck-doc-amount-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.deck-doc-amount {
  font-size: var(--fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--slate-900);
}
.deck-doc-amount.is-paid {
  color: var(--success-700);
}
.deck-doc-amount.is-overdue {
  color: var(--danger-700);
}

/* — Badge delta paiement (CORR-3-7) — */
.deck-delta {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--slate-700);
  background: var(--slate-100);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* — Actions par ligne — */
.deck-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.deck-action-form {
  margin: 0;
  display: inline-flex;
}
.deck-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--slate-500);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
  font-size: 15px;
}
.deck-action:hover {
  color: var(--accent-700);
  background: var(--accent-50);
}
.deck-action:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 1px;
}
.deck-action.deck-action-danger:hover {
  color: var(--danger-700);
  background: var(--danger-50);
}
.deck-action.deck-action-success:hover {
  color: var(--success-700);
  background: var(--success-50);
}
.deck-action.is-active {
  color: var(--accent-600);
  background: var(--accent-50);
}

/* — Badge statut — */
.deck-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
  flex-shrink: 0;
}
.deck-status.s-paid {
  background: var(--success-50);
  color: var(--success-700);
}
.deck-status.s-pending {
  background: var(--warning-50);
  color: var(--warning-700);
}
.deck-status.s-overdue {
  background: var(--danger-50);
  color: var(--danger-700);
}
.deck-status.s-draft {
  background: var(--slate-100);
  color: var(--slate-700);
}
.deck-status.s-cancelled {
  background: var(--slate-100);
  color: var(--slate-500);
}
.deck-status.s-finalise {
  background: var(--accent-50);
  color: var(--accent-700);
}

/* — Pagination Mint — */
.deck-pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.deck-pagination-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 36px;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--slate-700);
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}
.deck-pagination-link:hover {
  color: var(--accent-700);
  background: var(--accent-50);
  border-color: var(--accent-500);
}
.deck-pagination-link.is-active {
  color: #fff;
  background: var(--accent-500);
  border-color: var(--accent-500);
  pointer-events: none;
}
.deck-pagination-link.is-disabled {
  color: var(--slate-300, #cbd5e1);
  background: var(--slate-50);
  border-color: var(--slate-100);
  pointer-events: none;
  cursor: default;
}

/* — Overlay bloquant AICI (réutilise marqueur JS .js-aici-*-form intact) — */
.deck-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2000;
  background: rgba(33, 37, 41, 0.55);
  color: #fff;
}
.deck-overlay.d-none {
  display: none;
}
.deck-overlay.is-visible {
  display: flex;
}
.deck-overlay-label {
  color: #fff;
}

/* — Modale Mint (header sémantique) — */
.deck-modal-header {
  border-bottom: 1px solid var(--slate-200);
}
.deck-modal-header.is-success {
  background: var(--success-50);
  color: var(--success-700);
}
.deck-modal-header.is-warning {
  background: var(--warning-50);
  color: var(--warning-700);
}
.deck-modal-header.is-danger {
  background: var(--danger-50);
  color: var(--danger-700);
}
.deck-modal-header.is-info {
  background: var(--slate-50);
  color: var(--slate-700);
}

/* — Responsive : masquage progressif des actions par priorité (D7) — */
/* Supprimé post-FM9/FM20 : les seuils @container étaient trop agressifs (920px masquait
 * les boutons avec sidebar visible). Tous les boutons restent visibles à toutes largeurs. */

/* — Mobile : densification — */
@media (max-width: 640px) {
  .deck-doc-item {
    padding: var(--space-3) var(--space-3);
  }
  .deck-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .deck-search {
    flex: 1 1 auto;
    max-width: none;
  }
  .deck-action {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .deck-doc-client {
    font-size: var(--fs-sm);
  }
  .deck-doc-amount {
    font-size: var(--fs-sm);
  }
}

/* — ACOMPTE-1 (O1) : mini-barre de progression d'acompte, à côté du numéro de devis —
   Positionnement porté par la barre SEULE (margin-right:auto la colle au numéro sans
   toucher le justify-content:space-between de la rangée partagée .deck-doc-line-num,
   utilisée aussi par le dashboard et les attestations — B2). Tokens DS existants. */
.dossier-progress {
  flex: 0 0 44px; /* largeur fixe : ne comprime pas le numéro à 360px */
  height: 6px;
  margin-right: auto; /* pousse la date à droite, garde la barre contre le numéro */
  background: var(--slate-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.dossier-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent-500);
  border-radius: var(--radius-pill);
}

/* === [IMPL-4-A-END] Fin Section IMPL-4-A === */

/* === Section IMPL-8 Catalogue === */

/* Max-width catalogue — toutes les vues catalog (/catalog + create/edit) */
.cat-header,
.warning-banner,
.cat-tabs-wrap,
.cat-search,
.cat-count,
.catalog-tree,
.cat-tpl-content,
.form-card,
.cascade,
.toggle-block {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* A. Header sticky (sous #page-header z:100 — cf. .ledger-page-header L981) */
.cat-header {
  position: sticky;
  top: var(--header-height);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--slate-50);
  padding: 12px 0 14px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.cat-header.is-scrolled {
  border-bottom-color: var(--slate-200);
  box-shadow: 0 2px 12px -6px rgba(15, 23, 42, 0.1);
}
.cat-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
  flex: 1;
}
.cat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--slate-700);
  border: 1.5px solid var(--slate-200);
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-ghost:hover {
  background: var(--slate-50);
  color: var(--slate-900);
  border-color: var(--slate-300);
}
.btn-primary-chef {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-500);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary-chef:hover {
  background: var(--accent-600);
  color: #fff;
}
.btn-label {
}
@media (max-width: 575.98px) {
  /* CORR-DS-IMPL-8-EXT-A item 5 (O2 audit) : titre 15px + boutons compacts 6px 8px */
  .cat-title {
    font-size: 15px;
  }
  .btn-label {
    display: none;
  }
  .cat-header-actions {
    gap: 6px;
  }
  .btn-ghost,
  .btn-primary-chef {
    padding: 6px 8px;
    font-size: 12px;
  }
}

/* B. Warning banner TVA */
.warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin: 0 auto 18px;
}
.warning-banner-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  font-size: 13px;
}
.warning-banner-body {
  flex: 1;
  min-width: 0;
}
.warning-banner-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 3px;
}
.warning-banner-text {
  font-size: 12.5px;
  color: #92400e;
  opacity: 0.85;
  margin: 0 0 10px;
}
.warning-banner-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.warning-banner-label {
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
}
.warning-banner .tva-select.form-select {
  appearance: none;
  font-size: 12.5px;
  padding: 5px 28px 5px 8px;
  min-width: 80px;
  background-color: #fff;
  border-color: #fde68a;
}
.btn-banner-apply {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-500);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-btn);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-banner-apply:hover {
  background: var(--accent-600);
}
.btn-banner-apply:disabled {
  background: var(--slate-200);
  color: var(--slate-500);
  cursor: not-allowed;
}
.warning-banner-close {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: #92400e;
  opacity: 0.55;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  font-size: 13px;
}
.warning-banner-close:hover {
  opacity: 1;
  background: rgba(146, 64, 14, 0.08);
}

/* C. Tabs habillés */
.cat-tabs-wrap {
  margin-bottom: 18px;
}
.cat-tabs-wrap .nav-tabs {
  border-bottom: 1.5px solid var(--slate-200);
  padding: 0;
  gap: 0;
}
.cat-tabs-wrap .nav-link {
  background: transparent;
  color: var(--slate-500);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: -1.5px;
  transition: color 0.15s;
}
.cat-tabs-wrap .nav-link:hover {
  color: var(--slate-900);
  background: transparent;
  border-color: transparent;
}
.cat-tabs-wrap .nav-link.active {
  color: var(--accent-700);
  border-bottom-color: var(--accent-500);
  font-weight: 600;
  background: transparent;
}

/* D. Search */
.cat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.cat-search-input {
  flex: 1;
  padding: 10px 12px 10px 38px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.099zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11'/%3E%3C/svg%3E")
    no-repeat 12px center;
  background-size: 16px;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-btn);
  font-size: 14px;
  color: var(--slate-900);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cat-search-input:focus {
  outline: 0;
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}
.cat-count {
  font-size: 12.5px;
  color: var(--slate-500);
  margin-bottom: 14px;
}

/* E. Arbre catalogue */
.catalog-tree {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.catalog-cat {
  background: #fff;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-card);
  margin-bottom: 0 !important;
}
.catalog-cat:not(.is-collapsed) {
  box-shadow: var(--shadow-card);
}
.catalog-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 0;
}
.catalog-cat-header:hover {
  background: var(--slate-50);
}
.catalog-cat:not(.is-collapsed) .catalog-cat-header {
  border-bottom: 1px solid var(--slate-100);
}
.catalog-cat-header strong {
  flex: 1;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--slate-900);
}
.catalog-cat-header em {
  flex: 1;
  font-size: 14.5px;
  color: var(--slate-500);
  font-style: italic;
}
.catalog-cat-header .badge.bg-secondary {
  background: var(--slate-100) !important;
  color: var(--slate-700);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.cat-chevron,
.subcat-chevron,
.subsubcat-chevron {
  color: var(--slate-500);
  font-size: 11px;
  opacity: 1;
}
.catalog-cat-body {
  border: none !important;
  border-radius: 0 !important;
}
.catalog-subcat {
  border-top: 1px solid var(--slate-100);
}
.catalog-subcat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 32px;
  background: var(--slate-50);
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 0;
}
.catalog-subcat-header:hover {
  background: var(--slate-100);
}
.catalog-subcat-header i.bi-folder2 {
  color: var(--slate-500);
  font-size: 14px;
}
.catalog-subcat-header span:first-of-type {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700);
}
.catalog-subcat-header .badge.bg-light.text-dark {
  background: #fff !important;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--slate-200);
}
.catalog-subsubcat {
  border-top: 1px solid var(--slate-100);
}
.catalog-subsubcat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 48px;
  background: #fafafa;
  cursor: pointer;
  transition: background 0.15s;
}
.catalog-subsubcat-header:hover {
  background: var(--slate-50);
}
.catalog-subsubcat-header i.bi-folder {
  color: var(--slate-400);
  font-size: 12px;
}
.catalog-subsubcat-header span:first-of-type {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate-500);
}
.catalog-subsubcat-header .badge {
  background: transparent;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 600;
}

/* F. Items feuilles */
.catalog-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 16px 11px 64px;
  border-top: 1px solid var(--slate-100);
  transition: background 0.12s;
  border-bottom: none !important;
}
.catalog-subcat-body > .catalog-item {
  padding-left: 48px;
}
.catalog-cat-body > .catalog-item {
  padding-left: 32px;
}
.catalog-item:first-child {
  border-top: 0;
}
.catalog-item:hover {
  background: var(--accent-50);
}
.catalog-item .drag-handle {
  flex: none;
  width: 18px;
  color: var(--slate-300);
  cursor: grab;
  font-size: 14px;
  display: grid;
  place-items: center;
}
.catalog-item .drag-handle:active {
  cursor: grabbing;
}
.cat-item-row1 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cat-item-row1 strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cat-item-row1 small.text-muted {
  font-size: 11px;
  color: var(--slate-500);
  white-space: nowrap;
}
.sap-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #cffafe;
  color: #155e75;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  flex: none;
}
.sap-badge i {
  font-size: 10px;
}
.cat-price-desktop {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-900);
  text-align: right;
  white-space: nowrap;
  min-width: 80px;
}
.cat-price-desktop small.text-muted {
  font-size: 11px;
  color: var(--slate-500);
  font-weight: 400;
}
.cat-tva-desktop {
  font-size: 12px;
  color: var(--slate-500);
  text-align: right;
  white-space: nowrap;
  min-width: 42px;
}
.cat-btn-desktop {
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--slate-500);
  border-radius: var(--radius-btn);
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  cursor: pointer;
}
.cat-btn-desktop:hover {
  background: var(--accent-50);
  color: var(--accent-700);
}
.cat-btn-desktop.text-danger:hover {
  background: #fee2e2;
  color: #b91c1c;
}
.cat-item-row2 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 32px;
}
.cat-designation-clamp {
  font-size: 12px;
  color: var(--slate-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.cat-designation-clamp.expanded {
  overflow: visible;
  /* CORR-DS-IMPL-8-EXT-A v5 : préserver les sauts de ligne saisis dans le textarea désignation */
  white-space: pre-line;
}
.cat-item-row2 .cat-chevron {
  background: transparent;
  border: 0;
  color: var(--slate-300);
  cursor: pointer;
  font-size: 11px;
  padding: 2px;
}
.cat-mobile-row3 {
  display: none;
}
.catalog-drag-placeholder {
  background: #0d6efd;
  height: 3px;
  margin: 0;
}
@media (max-width: 575.98px) {
  .catalog-item {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-left: 32px;
  }
  .cat-price-desktop,
  .cat-tva-desktop,
  .cat-btn-desktop {
    display: none !important;
  }
  .cat-mobile-row3 {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 32px;
    gap: 8px;
  }
  .cat-mobile-row3 .btn-link,
  .cat-mobile-row3 button {
    min-width: 44px;
    min-height: 44px;
  }
  /* CORR-DS-IMPL-8-EXT-A v5.2 (FM2) + v5.3 (FM3) + v5.4 (FM4) : ventilation mobile <576px
     ⚠️ !important nécessaire car les règles de base .vent-* (lignes ~5978+) sont définies
     APRÈS ces media queries → sans !important elles écrasent ces overrides (cascade). */
  .toggle-body {
    padding: 0 8px 16px 8px !important;
  }
  .vent-banner {
    margin: 14px -8px 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 14px 12px !important;
  }
  .vent-banner-reset {
    display: none !important;
  }
  .vent-inputs {
    grid-template-columns: 1fr !important;
  }
  .vent-banner-header {
    flex-wrap: wrap;
  }
  .vent-input-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .vent-input-group input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .vent-input-group .vent-input-suffix:not(.vent-input-pct) {
    display: none !important;
  }
  .vent-input-pct {
    font-size: 10px !important;
    padding: 0 6px !important;
  }
}
@media (max-width: 991.98px) and (min-width: 576px) {
  /* Tablette portrait + intermédiaire (breakpoint Bootstrap lg) — !important idem */
  .toggle-body {
    padding: 0 12px 16px 12px !important;
  }
  .vent-banner {
    margin: 14px -12px 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
  }
  .vent-banner-reset {
    display: none !important;
  }
  .vent-inputs {
    grid-template-columns: 1fr !important;
  }
  .vent-input-group input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .vent-input-group .vent-input-suffix:not(.vent-input-pct) {
    display: none !important;
  }
  .vent-input-pct {
    font-size: 10px !important;
    padding: 0 6px !important;
  }
}

/* G. Form 4 cartes */
.form-card {
  background: #fff;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 24px 24px;
  margin-bottom: 16px;
}
.form-card + .form-card {
  margin-top: 0;
}
.card-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent-700);
  margin: 0 0 4px;
}
.card-section-title .step-num {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: var(--accent-100);
  color: var(--accent-700);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.card-section-sub {
  font-size: 12px;
  color: var(--slate-500);
  margin: 0 0 18px;
  padding-left: 30px;
}
.sub-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--slate-500);
  margin: 18px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--slate-200);
}
.sub-section-title:first-of-type {
  margin-top: 0;
}

/* H. Field label-in-border */
.form-card .field {
  position: relative;
}
.form-card .field .form-label {
  position: absolute;
  top: -8px;
  left: 12px;
  background: #fff;
  padding: 0 6px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.form-card .field:focus-within .form-label {
  color: var(--accent-700);
}
.form-card .form-control,
.form-card .form-select {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-btn);
  padding: 13px 12px 11px;
  font-size: 14px;
  color: var(--slate-900);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-card textarea.form-control {
  resize: vertical;
  min-height: 88px;
  padding-top: 13px;
}
.form-card .form-control:focus,
.form-card .form-select:focus,
.form-card textarea.form-control:focus {
  outline: 0;
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}
.form-card .form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%2364748b' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px;
}
.form-card .input-group {
  display: flex;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-btn);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-card .input-group:focus-within {
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}
.form-card .input-group .form-control {
  flex: 1;
  width: auto;
  min-width: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.form-card .input-group .form-control:focus {
  box-shadow: none;
  border: 0;
}
.form-card .input-group-text {
  display: grid;
  place-items: center;
  padding: 0 14px;
  background: var(--slate-50);
  border-left: 1px solid var(--slate-100);
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700);
}
.form-card .form-control.is-invalid,
.form-card .form-select.is-invalid {
  border-color: var(--danger-500);
}
.form-card .form-control.is-invalid:focus,
.form-card .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* I. Toggle-block */
.toggle-block {
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-card);
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
}
.toggle-block + .toggle-block {
  margin-top: 14px;
}
.toggle-block.is-checked {
  border-color: var(--accent-100);
}
.toggle-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  margin: 0;
}
.toggle-header .form-check-input {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid var(--slate-300);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s, background 0.15s;
  margin-top: 1px;
}
.toggle-header .form-check-input:checked {
  background-color: var(--accent-500);
  border-color: var(--accent-500);
}
.toggle-header .form-check-input:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) translateY(-1px);
}
.toggle-header .form-check-input:focus {
  outline: 0;
  box-shadow: var(--shadow-focus);
}
.toggle-content {
  flex: 1;
}
.toggle-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-900);
}
.toggle-title i {
  font-size: 14px;
  color: var(--slate-500);
}
.toggle-block.is-checked .toggle-title i {
  color: var(--accent-700);
}
.toggle-hint {
  font-size: 11.5px;
  color: var(--slate-500);
  margin-top: 3px;
  line-height: 1.45;
}
.toggle-body {
  padding: 0 16px 16px 50px;
  display: none;
}
.toggle-block.is-checked .toggle-body {
  display: block;
}

/* J. Cascade hiérarchique */
.cascade {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cascade-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cascade-row.level-1 {
  padding-left: 0;
}
.cascade-row.level-2 {
  padding-left: 32px;
}
.cascade-row.level-3 {
  padding-left: 64px;
}
.cascade-connector {
  width: 18px;
  flex: none;
  color: var(--slate-300);
  display: grid;
  place-items: center;
  font-size: 14px;
}
.cascade-row.level-1 .cascade-connector {
  display: none;
}
.cascade-field {
  flex: 1;
  max-width: 100%;
}
@media (max-width: 640px) {
  .cascade-row.level-2 {
    padding-left: 16px;
  }
  .cascade-row.level-3 {
    padding-left: 32px;
  }
}

/* K. Vent-banner ventilation BTP */
.vent-banner {
  background: linear-gradient(180deg, var(--accent-50) 0%, #fff 100%);
  border: 1.5px solid var(--accent-200);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-top: 14px;
}
.vent-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.vent-banner-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-700);
}
.vent-banner-title i {
  font-size: 13px;
}
.vent-banner-reset {
  background: #fff;
  border: 1.5px solid var(--accent-200);
  color: var(--accent-700);
  padding: 4px 9px;
  border-radius: var(--radius-btn);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vent-banner-reset:hover {
  background: var(--accent-50);
}
.vent-banner-reset i {
  font-size: 11px;
}
.vent-banner-help {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--slate-600);
  margin: 0 0 12px;
  line-height: 1.4;
}
.vent-banner-help i {
  color: var(--accent-600);
  flex: none;
  margin-top: 1px;
}
.vent-range {
  width: 100%;
  appearance: none;
  height: 6px;
  /* MIXTE-1 — une feuille de style ne peut pas lire la source du taux proposé :
     l'écran et le script posent `--val`, et priment sur cette ligne. Le 50 % n'est
     pas un taux, c'est le milieu de course du curseur. */
  --val: 50%;
  background: linear-gradient(
    to right,
    #f59e0b 0%,
    #f59e0b var(--val),
    #3b82f6 var(--val),
    #3b82f6 100%
  );
  border-radius: 3px;
  outline: 0;
  cursor: pointer;
}
.vent-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--slate-700);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.vent-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--slate-700);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.vent-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--slate-500);
  margin-top: 6px;
}
.vent-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.vent-input-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 4px;
}
.vent-input-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.vent-input-dot.mat {
  background: #f59e0b;
}
.vent-input-dot.mo {
  background: #3b82f6;
}
.vent-input-group {
  display: flex;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-btn);
  background: #fff;
  overflow: hidden;
}
.vent-input-group:focus-within {
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}
.vent-input-group input {
  flex: 1;
  border: 0;
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--slate-900);
  font-weight: 600;
  min-width: 0;
  /* CORR-DS-IMPL-8-EXT-A item 3 (O4 audit cause-racine) : retirer les spin buttons
     natifs de <input type="number"> qui ajoutent ~14px non comptés par flex:1 et
     provoquent le débordement horizontal du bloc ventilation en mode mobile. */
  appearance: textfield;
  -moz-appearance: textfield;
}
.vent-input-group input::-webkit-outer-spin-button,
.vent-input-group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vent-input-group input:focus {
  outline: 0;
}
.vent-input-suffix {
  display: grid;
  place-items: center;
  padding: 0 10px;
  background: var(--slate-50);
  border-left: 1px solid var(--slate-100);
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 500;
  min-width: 30px;
}
.vent-input-pct {
  background: #f3f4f6;
  color: var(--slate-700);
  font-weight: 600;
}

/* L. FAB cosmétique */
.fab-stack {
  position: fixed;
  right: 26px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 50;
}
.fab-help {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.12);
  display: grid;
  place-items: center;
  transition: box-shadow 0.15s, background 0.15s;
}
.fab-help:hover {
  background: var(--slate-50);
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.18);
}
.fab-help:disabled {
  cursor: default;
  opacity: 0.7;
}

/* === Fin Section IMPL-8 Catalogue === */

/* ============================================================
 * CORR-DS-IMPL-4-A-EXT-fonctionnel — Header de page bornée
 *
 * Wrapper générique pour le header de pages liste (titre + bouton action).
 * Borné à 1080px (= largeur de .deck-list) pour cohérence visuelle sur
 * grand écran. Réutilisable pour les futures sous-specs 4-B/4-C.
 * (item 9 FM CORR-DS-IMPL-4-A)
 * ============================================================ */
.deck-page-header {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* — Icon stack : superposition de 2 icones Bootstrap (eclair + cycle pour verifier statut AICI) —
   Couleurs heritees du .deck-action parent (slate-500 au repos, accent-700 au hover) pour
   uniformite avec les autres boutons d'action. Item B FM (capture chef 5Capture.PNG). */
.icon-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}
.icon-stack .icon-outer {
  position: absolute;
  inset: 0;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.icon-stack .icon-inner {
  position: relative;
  font-size: 0.55em;
  z-index: 2;
  color: inherit;
}
/* — Flash visuel a l'arrivee sur une section ciblee par hash (#section-aici, etc.) — FM3 —
   Glow accent transitoire (1.6s) qui signale a l'utilisateur ou son action l'a mene. */
.section-target-flash {
  box-shadow: 0 0 0 4px var(--accent-200, #99f6e4),
    0 8px 24px -8px var(--accent-500, #14b8a6) !important;
  transition: box-shadow 0.4s ease;
  border-radius: var(--radius-card, 12px);
}

/* — Groupage par mois liste documents (FM5 — sandbox 04b ; FM6 fond transparent + items separes) — */
.deck-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  background: transparent; /* FM6 : fond transparent (pas de slate-50) */
  color: var(--slate-700);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-top: var(--space-3);
}
.deck-group:first-child {
  margin-top: 0;
}
.deck-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent-50);
  color: var(--accent-700);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.deck-group-label {
  flex: 1 1 auto;
  color: var(--slate-900);
  font-weight: 600;
  text-transform: capitalize;
}
.deck-group-total {
  font-variant-numeric: tabular-nums;
  color: var(--slate-500);
  font-size: var(--fs-sm);
}

/* — FM6 : separation des items en cards individuelles (override .deck-list+item IMPL-4-A) — */
/* La liste perd son fond unifie ; chaque item devient une mini-carte avec fond, border, radius. */
.deck-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0;
}
.deck-doc-item {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
}
.deck-doc-item:last-child {
  margin-bottom: 0;
}
.deck-doc-item:hover {
  border-color: var(--accent-500);
}

/* — FM7 : groupe annee+statut sur la meme ligne (responsive compact) — */
.deck-filters-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.deck-filters-row > .deck-status-filter {
  flex: 0 1 auto;
}
/* Mobile : les 2 selects se partagent la ligne (50/50) */
@media (max-width: 640px) {
  .deck-filters-row {
    width: 100%;
  }
  .deck-filters-row > .deck-status-filter {
    flex: 1 1 0;
    min-width: 0;
  }
  .deck-filters-row > .deck-status-filter .deck-select {
    width: 100%;
  }
}
/* === [IMPL-4-A-EXT-END] Fin Section IMPL-4-A-EXT-fonctionnel === */

/* ====================================================================================
   SECTION SETTINGS — CORR-DS-IMPL-10
   Refonte au style DS Mint des 8 vues Paramètres + sidebar + offcanvas + placeholder.
   Préfixe `s-` partout pour éviter collision avec `.card` racine (ligne 68).
   Aliases miroir rétro-compat pour `.settings-card`/`.settings-sticky-save`/...
   ==================================================================================== */

/* — Section groupée encadrée (fieldset + legend HTML5 natif) — utilisée pour wrapper
     plusieurs cards thématiques sous une même appellation, ex : SAP / Bâtiment dans
     trade.php (FM1). Le rendu natif HTML5 fait que le <legend> "coupe" la border-top
     du <fieldset> et apparait DANS la bordure. Bootstrap 5 casse ce comportement avec
     `legend { width: 100%; float: left }` — d'où les overrides explicites ci-dessous. */
.s-section-group {
  border: 2px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: 8px 18px 6px;
  margin: 18px 0 20px;
  min-width: 0;
}
.s-section-group-legend {
  /* Overrides Bootstrap reset legend (bootstrap.min.css `legend { float:left; width:100% }`) */
  width: auto;
  float: none;
  /* Position dans la border-top du fieldset (rendu HTML5 natif) */
  padding: 0 10px;
  margin: 0 0 0 8px;
  /* Typographie */
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-700);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.2;
  /* Le fond transparent laisse voir le découpage natif HTML5 */
  background: transparent;
}
/* Couleurs métier portées sur fieldset+legend SAP / Bâtiment */
.trade-section-sap.s-section-group {
  border-color: rgba(111, 66, 193, 0.35);
}
.trade-section-sap > .s-section-group-legend {
  color: #6f42c1;
}
.trade-section-batiment.s-section-group {
  border-color: rgba(253, 126, 20, 0.35);
}
.trade-section-batiment > .s-section-group-legend {
  color: #fd7e14;
}

/* — Sticky page header avec back-btn + breadcrumb + title + bouton Enregistrer — */
.s-page-header {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: var(--slate-50);
  padding: 12px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 16px;
}
.s-page-header.is-scrolled {
  border-bottom-color: var(--slate-200);
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.08);
}
.s-back-btn {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  color: var(--slate-700);
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}
.s-back-btn:hover {
  background: var(--slate-50);
  color: var(--slate-900);
}
.s-title-block {
  flex: 1;
  min-width: 0;
}
.s-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
  line-height: 1.25;
}
.s-subtitle {
  font-size: 12px;
  color: var(--slate-500);
  margin: 2px 0 0;
}
.s-breadcrumb {
  font-size: 11px;
  color: var(--slate-500);
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.s-breadcrumb a {
  color: var(--slate-500);
  text-decoration: none;
  cursor: pointer;
}
.s-breadcrumb a:hover {
  color: var(--accent-700);
}
.s-breadcrumb i {
  font-size: 10px;
}
.s-btn-save-chef {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-500);
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
  flex: none;
  white-space: nowrap;
}
.s-btn-save-chef:hover {
  background: var(--accent-600);
}
.s-btn-save-chef i {
  font-size: 14px;
}

/* FM9 CORR-DS-IMPL-10 — Mobile : sticky restauré + header compact.
   Stratégie : sticky activé (bouton Save toujours accessible en scrollant) mais header
   très compact (50-60px au lieu de 130px) → masque peu de contenu au scroll. Breadcrumb
   et subtitle masqués sur mobile (la sidebar offcanvas et le contexte suffisent). */
@media (max-width: 575.98px) {
  /* (a) Sticky restauré, header compact 1 ligne */
  .s-page-header {
    position: sticky;
    top: var(--header-height);
    z-index: 90;
    flex-wrap: nowrap;
    padding: 6px 10px 8px;
    margin-bottom: 12px;
    gap: 8px;
  }
  /* (b) Breadcrumb + subtitle masqués → header beaucoup moins haut */
  .s-page-header .s-breadcrumb,
  .s-page-header .s-subtitle {
    display: none;
  }
  /* (c) Title plus petit + line-height réduit */
  .s-page-header .s-title {
    font-size: 15px;
    line-height: 1.2;
  }
  /* (d) Back-btn plus petit */
  .s-page-header .s-back-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  /* (e) Bouton Save inline compact à droite du titre (1 seule ligne) */
  .s-page-header .s-btn-save-chef {
    position: static;
    box-shadow: none;
    border-radius: var(--radius-btn);
    flex: none;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    gap: 4px;
    bottom: auto;
    right: auto;
  }
  .s-page-header .s-btn-save-chef i {
    font-size: 13px;
  }
  /* (f) Annule le padding-top du <main> Bootstrap p-4 quand on est sur une page
       settings → ferme le gap visuel entre #page-header global et .s-page-header. */
  body:has(.settings-page) main.p-4 {
    padding-top: 0 !important;
  }
  /* (g) Padding-bottom normal */
  .settings-page > .flex-grow-1 {
    padding-bottom: 24px !important;
  }
  /* (h) Scroll-margin pour que les anchors/scrolls programmatiques s'arrêtent
       sous le sticky compact (56px global + ~50px settings = ~110px de buffer). */
  .settings-page .s-card,
  .settings-page .s-section-group {
    scroll-margin-top: 120px;
  }
}

/* FM4 CORR-DS-IMPL-10 — Mobile : maximiser la largeur du contenu Settings.
   Réduit les paddings horizontaux du wrapper `.flex-grow-1` et fait que les cards
   `.s-card` se collent aux bords de l'écran (bordures latérales retirées + radius 0). */
@media (max-width: 575.98px) {
  /* FM5+FM10 CORR-DS-IMPL-10 — Anti-débordement horizontal : empêche les `.row`
       Bootstrap (margin: -12px) de déborder la viewport.
       FM10 fix CRITIQUE : `overflow-x: clip` au lieu de `overflow-x: hidden` ! Le
       `hidden` créait un scroll container qui CASSAIT le `position: sticky` du
       `.s-page-header` (sticky devient relative au container scrollable, donc scrolle
       avec la page = pas figé). `clip` masque le débordement sans créer de scroll
       container → le sticky fonctionne. Pattern aligné `.ledger-page-header` (L982). */
  .settings-page {
    overflow-x: clip;
  }
  .settings-page > .flex-grow-1 {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 24px !important;
    min-width: 0;
  }
  .settings-page .s-card {
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .settings-page .s-card-h,
  .settings-page .s-card-b {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* FM5 : neutralise margins négatifs Bootstrap `<div class="row">` qui débordaient */
  .settings-page .s-card-b > .row,
  .settings-page .s-card-b .row {
    margin-left: 0;
    margin-right: 0;
  }
  .settings-page .s-card-b .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
  /* Fieldset trade.php (SAP / Bâtiment) — aligner également */
  .settings-page .s-section-group {
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* — Bouton mobile « Tous les paramètres » (FM3 : masqué, doublon avec `.settings-fab`
     flottant qui rend déjà cette fonction visuellement plus discoverable et hors-flux.
     Le markup reste dans les vues pour rétro-compat ; la classe est neutralisée ici). */
.s-mobile-nav-btn {
  display: none !important;
}

/* — Cards Settings (préfixé pour éviter collision avec .card racine ligne 68) — */
.s-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  overflow: hidden;
}
/* FIX-017 : le dropdown des mention-pickers (position:absolute; z-index:1050) etait
   clippe par l'overflow:hidden de .s-card et masque par la carte suivante (capture 11).
   overflow:visible uniquement sur les cartes contenant un picker. Le dropdown etant
   display:none au repos, aucun effet visuel hors ouverture ; son z-index le fait passer
   par-dessus les cartes voisines (les .s-card ne creent pas de contexte d'empilement).
   :has() deja utilise dans ce fichier (l. 2743, 3456, 4073, 6479). */
.settings-page .s-card:has([data-mention-picker]) {
  overflow: visible;
}
.s-card-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.s-card-h-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-50);
  color: var(--accent-700);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: none;
}
.s-card-h-text {
  flex: 1;
  min-width: 0;
}
.s-card-h-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}
.s-card-h-sub {
  font-size: 12px;
  color: var(--slate-500);
  margin: 3px 0 0;
  line-height: 1.45;
}
.s-card-b {
  padding: 16px 18px 18px;
}

/* — Form row : label gauche / champ droite, responsive — */
.s-form-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--slate-100);
  align-items: center;
}
.s-form-row:first-child {
  border-top: 0;
  padding-top: 4px;
}
@media (max-width: 580px) {
  .s-form-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.s-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700);
}
.s-form-help {
  font-size: 11.5px;
  color: var(--slate-500);
  margin-top: 4px;
  font-weight: 400;
}

/* — Encart d'info conditionnel (port .settings-conditional prod) — */
.s-conditional-info {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.5;
}

/* — Notif row : switch + titre + desc + delay/percent — */
.s-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--slate-100);
}
.s-notif-row:first-child {
  border-top: 0;
}
.s-notif-body {
  flex: 1;
  min-width: 0;
}
.s-notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-900);
  margin: 0;
}
.s-notif-desc {
  font-size: 11.5px;
  color: var(--slate-500);
  margin: 2px 0 0;
  line-height: 1.45;
}
.s-notif-channels {
  display: flex;
  gap: 14px;
  flex: none;
}
.s-notif-ch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.s-notif-ch-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
@media (max-width: 580px) {
  .s-notif-channels {
    flex-direction: row;
    gap: 10px;
  }
  .s-notif-ch {
    flex-direction: row;
  }
}

/* — Module row : icône + corps + switch — */
.s-module-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--slate-100);
}
.s-module-row:first-child {
  border-top: 0;
  padding-top: 4px;
}
.s-module-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-50);
  color: var(--accent-700);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
}
.s-module-body {
  flex: 1;
  min-width: 0;
}
.s-module-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.s-module-tag {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--slate-100);
  color: var(--slate-600);
  border-radius: 4px;
  font-weight: 600;
}
.s-module-tag.is-core {
  background: var(--accent-50);
  color: var(--accent-700);
}
.s-module-tag.is-pro {
  background: #fef3c7;
  color: #92400e;
}
.s-module-desc {
  font-size: 12px;
  color: var(--slate-500);
  margin: 4px 0 0;
  line-height: 1.45;
}
.s-module-switch {
  flex: none;
  padding-top: 6px;
}

/* — Sentinel inline (look DS Mint pour panneau S29 — wrapper visuel,
     sentinel-renderer.js injecte ses sous-éléments dedans) — */
.s-sentinel-inline {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid var(--danger-500);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: #991b1b;
}

/* — Password rules box (sandbox) — */
.s-password-rules {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--slate-600);
  margin-top: 8px;
}
.s-password-rules ul {
  margin: 0;
  padding-left: 18px;
}
.s-password-rules li {
  line-height: 1.6;
}

/* — Placeholder pref (2FA + Bientôt disponible) — */
.s-placeholder-pref {
  background: var(--slate-50);
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.s-placeholder-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--slate-100);
  color: var(--slate-500);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: none;
}
.s-placeholder-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.s-placeholder-tag {
  font-size: 10px;
  padding: 1px 7px;
  background: var(--slate-200);
  color: var(--slate-600);
  border-radius: 4px;
  font-weight: 700;
}
.s-placeholder-desc {
  font-size: 12px;
  color: var(--slate-500);
  margin: 3px 0 0;
  line-height: 1.45;
}

/* — Page placeholder « Bientôt disponible » (placeholder.php) — */
.s-placeholder-page {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 48px 24px;
  text-align: center;
}
.s-placeholder-page .s-placeholder-page-icon {
  font-size: 48px;
  color: var(--slate-400);
  margin-bottom: 16px;
}
.s-placeholder-page h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 6px;
}
.s-placeholder-page p {
  font-size: 13px;
  color: var(--slate-500);
  margin: 0 0 12px;
}

/* — URSSAF status badge (statut sémantique figé — D15) — */
.s-urssaf-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.s-urssaf-status.is-active {
  background: #d1fae5;
  color: #065f46;
}
.s-urssaf-status.is-inactive {
  background: var(--slate-100);
  color: var(--slate-600);
}

/* — Field status (statut sémantique figé — D15) — */
.s-field-status {
  font-size: 11.5px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.s-field-status.is-ok {
  color: #047857;
}
.s-field-status.is-warning {
  color: #b45309;
}
.s-field-status.is-danger {
  color: #b91c1c;
}

/* — Radio group / segmented control — */
.s-radio-group {
  display: inline-flex;
  gap: 0;
  background: var(--slate-100);
  border-radius: var(--radius-btn);
  padding: 3px;
  flex-wrap: wrap;
}
.s-radio-group label {
  padding: 0;
  cursor: pointer;
}
.s-radio-group input {
  display: none;
}
.s-radio-group label span {
  display: block;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-600);
  border-radius: calc(var(--radius-btn) - 2px);
  transition: all 0.12s ease;
}
.s-radio-group input:checked + span {
  background: #fff;
  color: var(--slate-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ────────────────────────────────────────────────────────────────────
   SIDEBAR SETTINGS NAV (port sandbox 23 lignes 26-48)
   Restylage de `_nav_v2.php` (wrapper) et `_nav_mobile.php` (offcanvas)
   ──────────────────────────────────────────────────────────────────── */
.s-settings-nav {
  background: #fff;
  border-right: 1px solid var(--slate-200);
  padding: 16px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* FM1 : sidebar flottante visible pendant le scroll de page — décalée sous le
       #page-header global (z=100). align-self pour ne pas s'étirer dans le flex parent. */
  position: sticky;
  top: var(--header-height);
  align-self: flex-start;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
}
.s-sn-header {
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--slate-100);
}
.s-sn-header-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0;
}
.s-sn-header-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-900);
  margin: 4px 0 0;
}
.s-sn-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.s-sn-group-header {
  background: none;
  border: 0;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: var(--radius-btn);
  width: 100%;
  text-align: left;
}
.s-sn-group-header:hover {
  background: var(--slate-50);
}
.s-sn-group-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  flex: 1;
}
.s-sn-group-chevron {
  font-size: 12px;
  color: var(--slate-400);
  transition: transform 0.2s ease;
}
.s-sn-group-header[aria-expanded="true"] .s-sn-group-chevron {
  transform: rotate(180deg);
}
.s-sn-group-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 4px;
  padding-top: 2px;
}
.s-sn-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-btn);
  color: var(--slate-700);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.12s ease, color 0.12s ease;
  cursor: pointer;
}
.s-sn-link:hover {
  background: var(--slate-50);
  color: var(--slate-900);
}
.s-sn-link.is-active {
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 600;
}
.s-sn-link.is-disabled {
  color: var(--slate-400);
  cursor: default;
}
.s-sn-link.is-disabled:hover {
  background: transparent;
}
.s-sn-link i {
  font-size: 14px;
  opacity: 0.8;
  width: 16px;
}
.s-sn-link.is-active i {
  opacity: 1;
}
.s-sn-badge {
  font-size: 10px;
  padding: 1px 6px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 10px;
  font-weight: 700;
  margin-left: auto;
}
.s-sn-placeholder {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--slate-100);
  color: var(--slate-500);
  border-radius: 4px;
  font-weight: 600;
  margin-left: auto;
}
.s-sn-divider {
  height: 1px;
  background: var(--slate-100);
  margin: 4px 0;
}

/* ────────────────────────────────────────────────────────────────────
   ALIASES MIROIR rétro-compat (D8)
   Les classes prod historiques (.settings-card etc.) sont utilisées par :
     - clients/form.php (hors périmètre Settings)
     - 5 tests existants (110-2, 110-3, 110-4, 110-9, 110-10) qui assertionnent
       str_contains('settings-card') sur les vues settings/*
   On les conserve avec règles miroir vers les composants `.s-*`.
   ──────────────────────────────────────────────────────────────────── */

/* alias miroir de .s-card pour ne pas casser clients/form.php + tests */
.settings-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  padding: 16px 18px 18px;
}
.settings-card > h6 {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--slate-100);
  margin: 0 0 12px;
}

/* alias miroir du sticky-save bottom (security multi-form) */
.settings-sticky-save {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--slate-50) 70%, transparent);
  padding: 12px 0;
  margin-top: 16px;
}

/* alias miroir du wrapper page settings */
.settings-page {
  min-height: calc(100vh - var(--header-height));
}

/* alias miroir du wrapper sidebar legacy (_nav_v2 / _nav_mobile pre-refonte) */
.settings-nav-col {
  background: #fff;
  border-right: 1px solid var(--slate-200);
  padding: 16px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-nav-col .nav-link {
  color: var(--slate-700);
  border-radius: var(--radius-btn);
  padding: 7px 10px;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.settings-nav-col .nav-link:hover {
  background: var(--slate-50);
  color: var(--slate-900);
}
.settings-nav-col .nav-link.active {
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 600;
}

/* alias miroir des bandeaux de groupe legacy */
.nav-section {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 8px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-section .chevron {
  font-size: 12px;
  color: var(--slate-400);
  transition: transform 0.2s ease;
  margin-left: auto;
}
.nav-section.collapsed .chevron {
  transform: rotate(-90deg);
}

/* alias miroir de .settings-conditional (fiscal + invoicing — encart info) */
.settings-conditional {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.5;
}

/* alias miroir de .settings-placeholder (placeholder.php) */
.settings-placeholder {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 48px 24px;
  text-align: center;
}
.settings-placeholder .icon {
  font-size: 48px;
  color: var(--slate-400);
  margin-bottom: 16px;
}
.settings-placeholder h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 6px;
}
.settings-placeholder p {
  font-size: 13px;
  color: var(--slate-500);
  margin: 0 0 12px;
}

/* === [IMPL-10-END] Fin Section SETTINGS — CORR-DS-IMPL-10 === */

/* ============================================================================
   DASHBOARD (CORR-DS-IMPL-3) — refonte visuelle sandbox 01-dashboard.html
   ============================================================================
   Préfixe `.dash-*` (cohérent avec .ledger-* IMPL-9, .mvt-* IMPL-6, .cat-* IMPL-8).
   Réutilise .kpi-row / .kpi-card / .kpi-label / .kpi-value introduits par IMPL-5.
   Restaure aussi 5 classes legacy `.threshold-*` orphelines depuis IMPL-1 (B5).
   ============================================================================ */

/* ─── A. Header sticky ──────────────────────────────────────────────── */
.dash-page-header {
  position: sticky;
  top: var(--header-height);
  z-index: 30;
  background: var(--slate-50);
  padding: 14px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dash-page-header.is-scrolled {
  border-bottom-color: var(--slate-200);
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.08);
}
.dash-page-title-block {
  flex: 1;
  min-width: 0;
}
.dash-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-page-subtitle {
  font-size: 13px;
  color: var(--slate-500);
  margin: 3px 0 0;
}
.dash-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
}
@media (max-width: 580px) {
  .dash-page-title {
    font-size: 18px;
  }
  .dash-page-subtitle {
    font-size: 12px;
  }
}

/* ─── B. KPI icons (B7 — classes sandbox manquantes v1) ─────────────── */
/* CORR-DS-IMPL-3-EXT D15 : .kpi-top et .kpi-icon.is-* supprimes (orphelins post-refonte
   dashboard, §3.1 pas de code mort). .kpi-row/.kpi-card/.kpi-label/.kpi-value restent
   ci-dessus, consommees par clients/show.php. */

/* ─── C. Deadline banner (NOVA-EMA / URSSAF) ────────────────────────── */
.dash-deadline-banner {
  background: linear-gradient(135deg, var(--accent-50), #fff);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-deadline-banner.is-warn {
  background: linear-gradient(135deg, var(--warning-50), #fff);
  border-color: var(--warning-200);
}
.dash-deadline-banner.is-danger {
  background: linear-gradient(135deg, var(--danger-50), #fff);
  border-color: var(--danger-200);
}
.dash-deadline-banner.is-info {
  background: linear-gradient(135deg, #dbeafe, #fff);
  border-color: #bfdbfe;
}
.dash-deadline-banner.is-muted {
  background: linear-gradient(135deg, var(--slate-100), #fff);
  border-color: var(--slate-200);
}
.dash-deadline-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-100, #d1fae5);
  color: var(--accent-700);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
}
.dash-deadline-banner.is-warn .dash-deadline-icon {
  background: var(--warning-100);
  color: var(--warning-700);
}
.dash-deadline-banner.is-danger .dash-deadline-icon {
  background: var(--danger-100);
  color: var(--danger-700);
}
.dash-deadline-banner.is-info .dash-deadline-icon {
  background: #dbeafe;
  color: #1e40af;
}
.dash-deadline-banner.is-muted .dash-deadline-icon {
  background: var(--slate-200);
  color: var(--slate-600);
}
.dash-deadline-body {
  flex: 1;
  min-width: 200px;
}
.dash-deadline-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}
.dash-deadline-sub {
  font-size: 12px;
  color: var(--slate-600);
  margin: 2px 0 0;
}
.dash-deadline-cta {
  background: var(--accent-500);
  color: #fff;
  border: 0;
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  flex: none;
}
.dash-deadline-cta:hover {
  background: var(--accent-600);
}

/* ─── D. Section card ───────────────────────────────────────────────── */
.dash-section {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  overflow: hidden;
}
.dash-section-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-section-h-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-50);
  color: var(--accent-700);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: none;
}
.dash-section-h-text {
  flex: 1;
  min-width: 0;
}
.dash-section-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-section-sub {
  font-size: 11.5px;
  color: var(--slate-500);
  margin: 2px 0 0;
}
.dash-section-h-action {
  font-size: 12px;
  color: var(--accent-700);
  text-decoration: none;
  font-weight: 600;
  flex: none;
}
.dash-section-h-action:hover {
  text-decoration: underline;
}
.dash-section-b {
  padding: 14px 18px 16px;
}

/* ─── E. Threshold (plafonds) ───────────────────────────────────────── */
.dash-threshold-block {
  margin-bottom: 18px;
}
.dash-threshold-block:last-child {
  margin-bottom: 0;
}
.dash-threshold-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.dash-threshold-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-800);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.dash-threshold-max {
  font-size: 12px;
  color: var(--slate-500);
  font-variant-numeric: tabular-nums;
}
.dash-threshold-max strong {
  color: var(--slate-900);
  font-weight: 700;
}
.dash-threshold-bar {
  position: relative;
  height: 18px; /* CORR-DS-IMPL-3-EXT : harmonise avec .dash-ratio-bar */
  background: var(--slate-100);
  border-radius: 6px;
  overflow: visible;
}
.dash-threshold-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  transition: width 0.35s ease;
}
/* CORR-DS-IMPL-3-EXT D9 : is-ok prend la couleur Chef (--accent A/B/F).
   is-warn/is-danger restent figes (statut semantique, cf. feedback_action_vs_statut_couleur). */
.dash-threshold-bar-fill.is-ok {
  background: linear-gradient(90deg, var(--accent-500), var(--accent-600));
}
.dash-threshold-bar-fill.is-warn {
  background: linear-gradient(90deg, var(--warning-500), var(--warning-600));
}
.dash-threshold-bar-fill.is-danger {
  background: linear-gradient(90deg, var(--danger-500), var(--danger-600));
}
.dash-threshold-bar-amount-in {
  color: var(--slate-900);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* FM R2-2 : halo blanc multi-passes pour lisibilite quand le montant chevauche
       les markers TVA/Maj. (chef-FM 2026-06-11). */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.dash-threshold-bar-pct {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slate-700);
  font-variant-numeric: tabular-nums;
  /* FM hotfix 5 (chef-FM 2026-06-12) : halo blanc triple pour lisibilite
       quelle que soit la couleur de fond derriere (fill clair ou zone vide). */
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}
/* CORR-DS-IMPL-3-EXT D7 : marqueurs TVA en pointille vertical discret
   (vert franchise / ambre majore) au lieu du plein rouge/noir. */
.dash-tva-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 0;
  background: transparent;
  border-left: 1.5px dashed var(--slate-400);
  z-index: 2;
}
/* FM hotfix 2.5 : marker TVA base en couleur Chef (chef-FM 2026-06-11).
   is-majore reste figee (warning sémantique pour seuil majore). */
.dash-tva-marker.is-base {
  border-left: 1.5px dashed var(--accent-500);
}
.dash-tva-marker.is-majore {
  border-left: 1.5px dashed var(--warning-500);
}
.dash-tva-marker-flag {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(
    --accent-600
  ); /* FM hotfix 2.5 : flag TVA base couleur Chef */
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  /* FM R2-2 : halo blanc autour du label TVA (chef-FM 2026-06-11) */
  box-shadow: 0 0 0 2px #fff;
}
.dash-tva-marker.is-majore .dash-tva-marker-flag {
  background: var(--warning-600);
}
.dash-threshold-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  font-size: 11px;
  color: var(--slate-600);
}
.dash-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dash-legend-dot {
  width: 10px;
  height: 2px;
}
/* FM hotfix 2.5 : legend dot base en couleur Chef pour coherence avec marker */
.dash-legend-dot.is-base {
  background: var(--accent-500);
}
.dash-legend-dot.is-majore {
  background: var(--warning-500);
}
.dash-legend-item strong {
  color: var(--slate-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-threshold-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
}
/* FM hotfix 2.4 : badge "Sous plafond" en couleur Chef (chef-FM 2026-06-11).
   is-warn et is-danger restent figes (statut semantique d'alerte). */
.dash-threshold-status.is-ok {
  background: var(--accent-100);
  color: var(--accent-700);
}
.dash-threshold-status.is-warn {
  background: var(--warning-100);
  color: var(--warning-700);
}
.dash-threshold-status.is-danger {
  background: var(--danger-100);
  color: var(--danger-700);
}
.dash-alert-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--slate-200);
  font-size: 12.5px;
  line-height: 1.5;
}
.dash-alert-line:first-child {
  border-top: 0;
  padding-top: 0;
}
.dash-alert-line:last-child {
  padding-bottom: 0;
}

/* ─── F. Ratio SAP ──────────────────────────────────────────────────── */
/* CORR-DS-IMPL-3-EXT + FM hotfix 2.6 : completement decadre (pas de border, pas de background) —
   doit avoir le meme apercu visuel que les barres plafonds au-dessus. Chef-FM 2026-06-11. */
.dash-ratio-block {
  background: transparent;
  padding: 12px 0 0 0;
  margin-top: 18px;
  border-top: 1px solid var(--slate-100);
}
.dash-ratio-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.dash-ratio-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-800);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.dash-ratio-min {
  font-size: 11.5px;
  color: var(--slate-600);
}
.dash-ratio-min strong {
  color: var(--slate-900);
  font-weight: 700;
}
.dash-ratio-bar {
  position: relative;
  height: 18px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  overflow: visible;
}
.dash-ratio-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px 0 0 5px;
  transition: width 0.35s ease;
}
.dash-ratio-bar-fill.is-ok {
  background: linear-gradient(90deg, var(--success-500), var(--success-600));
}
.dash-ratio-bar-fill.is-low {
  background: linear-gradient(90deg, var(--warning-500), var(--warning-600));
}
.dash-ratio-bar-pct {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-700);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.dash-ratio-seuil-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--slate-700);
  z-index: 1;
}
.dash-ratio-seuil-marker.is-covered {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2);
}
.dash-ratio-seuil-flag {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--slate-900);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.dash-ratio-detail {
  font-size: 11px;
  color: var(--slate-500);
  margin-top: 6px;
}

/* ─── G. Grid 2-col + table activité ────────────────────────────────── */
.dash-grid-2col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
@media (max-width: 992px) {
  .dash-grid-2col {
    grid-template-columns: 1fr;
  }
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
}
.dash-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 8px 12px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}
.dash-table td {
  padding: 11px 12px;
  font-size: 13px;
  color: var(--slate-800);
  border-bottom: 1px solid var(--slate-100);
}
.dash-table tbody tr:last-child td {
  border-bottom: 0;
}
.dash-table tbody tr {
  transition: background 0.1s ease;
}
.dash-table tbody tr:hover {
  background: var(--slate-50);
}
.dash-doc-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--slate-700);
  font-weight: 600;
}
.dash-doc-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.dash-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.dash-badge i {
  font-size: 9px;
}
.dash-badge.b-paid {
  background: var(--success-100);
  color: var(--success-700);
}
.dash-badge.b-pending {
  background: #dbeafe;
  color: #1e40af;
}
.dash-badge.b-overdue {
  background: var(--danger-100);
  color: var(--danger-700);
}
.dash-badge.b-draft {
  background: var(--slate-100);
  color: var(--slate-600);
}

/* ─── H. Quick list (raccourcis) ────────────────────────────────────── */
.dash-quick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-quick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-btn);
  color: var(--slate-800);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.12s ease;
}
.dash-quick-item:hover {
  background: var(--accent-50);
  border-color: var(--accent-200);
  color: var(--accent-700);
}
.dash-quick-item i {
  font-size: 15px;
  color: var(--accent-600);
  width: 18px;
}

/* ─── I. Timeline ───────────────────────────────────────────────────── */
.dash-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-timeline-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--slate-100);
}
.dash-timeline-item:first-child {
  border-top: 0;
  padding-top: 0;
}
.dash-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  margin-top: 5px;
}
.dash-timeline-dot.is-warn {
  background: var(--warning-500);
}
.dash-timeline-dot.is-info {
  background: #3b82f6;
}
.dash-timeline-dot.is-danger {
  background: var(--danger-500);
}
.dash-timeline-body {
  flex: 1;
  min-width: 0;
}
.dash-timeline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-900);
  margin: 0;
}
.dash-timeline-date {
  font-size: 11.5px;
  color: var(--slate-500);
  margin-top: 2px;
}

/* ─── J. Disclaimer ─────────────────────────────────────────────────── */
.dash-disclaimer {
  font-size: 11.5px;
  color: var(--slate-500);
  margin: 4px 4px 18px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dash-disclaimer i {
  font-size: 13px;
}

/* ─── Z. Restauration classes legacy (B5 — étaient orphelines depuis IMPL-1) ── */
/* Testées par 084 B1/B2/B3 + 084 F1/F2 (à décommenter en Phase 3.3) + 068-13bis T13d */
.threshold-tva-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--slate-500);
  z-index: 2;
}
.threshold-tva-label-below {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--slate-700);
  white-space: nowrap;
  margin-top: 4px;
  /* FM R2-2 (chef-FM 2026-06-11) : halo blanc autour du label TVA / Maj. / seuil SAP
       pour lisibilite quand le label chevauche la barre fill coloree. */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
/* FIX-051 : dans la barre ratio SAP, le label du seuil passe AU-DESSUS de la barre
   (sous la barre il chevauchait la ligne de detail). Scope .dash-ratio-bar pour ne
   PAS bouger les libelles TVA/Maj. des barres de seuil (classe .threshold-tva-label-below
   partagee). .dash-ratio-bar est overflow:visible -> pas de clipping au-dessus. */
.dash-ratio-bar .threshold-tva-label-below {
  top: auto;
  bottom: 100%;
  margin: 0 0 3px;
}
.threshold-alert-btn {
  background: var(--warning-100);
  color: var(--warning-700);
  border: 1px solid var(--warning-300, #fcd34d);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
}
.threshold-alert-btn.alert-danger {
  background: var(--danger-100);
  color: var(--danger-700);
  border-color: var(--danger-300, #fca5a5);
}
.threshold-alert-panel {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  margin-top: 12px;
  display: none;
}
.threshold-alert-panel.is-open {
  display: block;
}
.threshold-bar-amount {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slate-700);
}

/* === [IMPL-3-END] Fin Section DASHBOARD — CORR-DS-IMPL-3 === */

/* =====================================================================
   CORR-DS-IMPL-4-B — Show document (fiche detail facture/devis/avoir)
   ---------------------------------------------------------------------
   Sandbox cible : _Rusl/design_system_chantier/sandbox/06-show-document.html
   Periometre   : documents/show.php + _section_aici.php + bloc refund inline
   Type         : T1 DOM/UI (cosmetique pur)
   Date         : 2026-06-10
   Decisions D-B-1..D-B-16 verrouillees (cf. spec)
   ===================================================================== */

/* ─── Wrapper ─── */
.show-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

/* ─── Header (back + titre + badge + PDF) ─── */
.show-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.show-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.show-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--slate-700);
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
}
.show-back:hover {
  background: var(--slate-100);
}
.show-title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
}

/* ─── Badges statut (semantiques figes - D8 macrospec) ─── */
.show-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.show-badge.s-paid {
  background: var(--success-50);
  color: var(--success-700);
}
.show-badge.s-pending {
  background: var(--warning-50);
  color: var(--warning-700);
}
.show-badge.s-overdue {
  background: var(--danger-50);
  color: var(--danger-700);
}
.show-badge.s-draft {
  background: var(--slate-100);
  color: var(--slate-700);
}
.show-badge.s-cancelled {
  background: var(--slate-100);
  color: var(--slate-500);
}
.show-badge.s-finalise {
  background: var(--accent-50);
  color: var(--accent-700);
}
.show-badge.b-info {
  background: #e0f2fe;
  color: #0369a1;
}

/* ─── Badge contexte TVA ─── */
.show-tva-context-wrap {
  margin-bottom: var(--space-3);
}
.show-tva-context {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #e0f2fe;
  color: #075985;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ─── Banner avoir (2 variantes A+B - audit O2) ─── */
.show-banner {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  color: var(--slate-700);
  box-shadow: var(--shadow-card);
}
.show-banner.is-neutral {
  background: var(--slate-50);
}
.show-banner.is-warning {
  border-color: var(--warning-200);
  background: var(--warning-50);
  color: var(--warning-700);
}
.show-banner.is-danger {
  border-color: var(--danger-200);
  background: var(--danger-50);
  color: var(--danger-700);
}
.show-banner.is-info {
  border-color: #bae6fd;
  background: #e0f2fe;
  color: #0369a1;
}
.show-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.show-banner-head-title {
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--slate-700);
}
.show-banner-head-title i {
  color: var(--slate-500);
}
.show-banner-head-title strong {
  color: var(--slate-900);
}
.show-banner-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  color: var(--slate-700);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: none;
}
.show-banner-toggle:hover {
  background: var(--slate-100);
}
.show-banner-body {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--slate-100);
}
.show-banner-body.is-open {
  display: block;
}
.show-banner-body.collapse:not(.show) {
  display: none;
}
.show-banner-body table {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: collapse;
}
.show-banner-body table th,
.show-banner-body table td {
  padding: 4px 8px;
}
.show-banner-body table th {
  color: var(--slate-500);
  font-weight: 500;
  text-align: left;
}
.show-banner-body table tfoot td {
  border-top: 1px solid var(--slate-100);
  font-weight: 600;
}
.show-banner-note {
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}
.show-banner-drafts {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--slate-100);
}
.show-banner-drafts-title {
  color: var(--slate-500);
  font-weight: 600;
}
.show-banner-draft-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
}

/* ─── Barre actions ─── */
.show-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.show-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  text-decoration: none;
  line-height: 1.2;
}
.show-btn:hover:not(:disabled) {
  background: var(--slate-100);
}
.show-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.show-btn.is-primary {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
}
.show-btn.is-primary:hover:not(:disabled) {
  background: var(--accent-600);
  border-color: var(--accent-600);
}
/* D-B-9 : contour couleur Chef (Envoyer email avant envoi + Generer avoir permanent) */
.show-btn.is-accent-outline {
  background: #fff;
  color: var(--accent-700);
  border-color: var(--accent-500);
}
.show-btn.is-accent-outline:hover:not(:disabled) {
  background: var(--accent-50);
  border-color: var(--accent-600);
}
.show-btn.is-success {
  background: var(--success-500);
  color: #fff;
  border-color: var(--success-500);
}
.show-btn.is-success:hover:not(:disabled) {
  background: var(--success-600);
  border-color: var(--success-600);
}
.show-btn.is-danger {
  color: var(--danger-700);
  border-color: #fecaca;
  background: #fff;
}
.show-btn.is-danger:hover:not(:disabled) {
  background: var(--danger-50);
}
.show-btn.is-warning {
  color: var(--warning-700);
  border-color: #fde68a;
  background: #fff;
}
.show-btn.is-warning:hover:not(:disabled) {
  background: var(--warning-50);
}
.show-btn.is-icon-only {
  padding: 6px 8px;
}
/* FM1 : variante compacte pour bouton dans show-card-title */
.show-btn.is-sm {
  padding: 4px 10px;
  font-size: var(--fs-sm);
}

/* ─── ACOMPTE-2b : bandeau de suivi de facturation du devis (repliable) ─── */
.dossier-track {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.dossier-track-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
  color: var(--slate-900);
}
.dossier-track-head::-webkit-details-marker {
  display: none;
}
.dossier-track-sum {
  font-weight: 600;
}
.dossier-track-bar {
  flex: 1 1 auto;
  max-width: 200px;
  height: 6px;
  background: var(--slate-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.dossier-track-fill {
  display: block;
  height: 100%;
  background: var(--accent-500);
  border-radius: var(--radius-pill);
}
.dossier-track-chevron {
  margin-left: auto;
  color: var(--slate-500);
  transition: transform 0.18s ease;
}
.dossier-track[open] .dossier-track-chevron {
  transform: rotate(180deg);
}
.dossier-track-body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--slate-100);
}
.dossier-track-list {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
}
.dossier-track-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  color: var(--slate-700);
}
.dossier-track-step-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dossier-track-step-num {
  color: var(--accent-700);
  text-decoration: none;
  font-weight: 600;
}
.dossier-track-step-num:hover {
  text-decoration: underline;
}
.dossier-track-step-amount {
  margin-left: auto;
  font-weight: 600;
  color: var(--slate-900);
}
.dossier-track-step-date {
  color: var(--slate-500);
  font-size: var(--fs-xs);
}
.dossier-track-remaining {
  padding: var(--space-2) 0 0;
  margin-top: var(--space-2);
  border-top: 1px dashed var(--slate-200);
  font-weight: 600;
  color: var(--slate-700);
}
.dossier-track-next {
  margin-top: var(--space-3);
}

/* ─── Grille 2 colonnes ─── */
.show-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 840px) {
  .show-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Carte show ─── */
.show-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
/* Audit user prefs : titre cartes fond BLANC (pas gris) - critere 7 */
.show-card-title {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--slate-100);
  background: #fff;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--slate-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.show-card-title > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.show-card-title i {
  color: var(--slate-500);
}
.show-card-body {
  padding: var(--space-4);
}
.show-card-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--slate-100);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: flex-start;
}

/* ─── Carte Client ─── */
.client-line {
  font-size: var(--fs-md);
  color: var(--slate-700);
  margin-bottom: 4px;
}
.client-line.is-name {
  color: var(--slate-900);
  font-weight: 600;
  font-size: var(--fs-base);
}
.client-line.is-muted {
  color: var(--slate-500);
  font-size: var(--fs-sm);
}
.client-line a {
  color: var(--accent-700);
  text-decoration: none;
}
.client-line a:hover {
  text-decoration: underline;
}
.client-locked-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--slate-500);
}

/* ─── Carte Document (dl/dd) ─── */
.doc-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 8px;
  column-gap: var(--space-3);
  margin: 0;
}
.doc-dl dt {
  color: var(--slate-500);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.doc-dl dd {
  margin: 0;
  color: var(--slate-900);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}
.method-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--slate-700);
  margin-right: 4px;
}

/* ─── Table lignes (items-table) ─── */
/* FM9 : scroll horizontal sur mobile / ecran etroit (7 colonnes) */
.items-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* indication subtile de scroll possible (degrade lateral) */
  background-image: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0));
  background-attachment: local, local;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 20px 100%, 20px 100%;
}
/* FIX-076 (retour FM du chef) : 640 → 520. Les en-têtes ne sont plus insécables
   (règle plus bas), le tableau tient donc dans moins de large — et l'écran de
   portable a d'autant moins à faire glisser. */
.items-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.items-table thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--slate-50);
  color: var(--slate-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--slate-200);
}
.items-table tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--slate-100);
  font-size: var(--fs-sm);
  vertical-align: top;
  /* FIX-076 : sans coupure, un nom (ou un titre de section) sans espace imposait sa
       largeur au tableau — les colonnes de chiffres partaient derrière l'ascenseur.
       Deux écritures : la seconde est plus efficace, la première sert de repli aux
       moteurs qui ne la connaissent pas. Les montants gardent `nowrap` (voir .num). */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
.items-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* FIX-076 (retour FM du chef) : un TITRE de colonne se replie sur deux lignes ; seuls
   les MONTANTS restent insécables. Insécables, les titres longs des langues autres que
   le français (« ЦЕНА ЗА ЕДИНИЦУ БЕЗ НДС ») prenaient la moitié de la largeur du
   tableau et ne laissaient plus qu'un tiers au nom de la prestation. */
.items-table thead th.num { white-space: normal; }
.items-table .designation {
  color: var(--slate-900);
}
.items-table .reference {
  color: var(--slate-500);
  font-size: var(--fs-xs);
  display: block;
  margin-bottom: 2px;
}
/* Spec 054-1 : la FICHE du document suit l'ecran de saisie — plus de fond, un filet
   sous le titre. Couleur de l'APPLICATION (cf. .line-section-header) : cette page
   est un ecran, pas un document imprime. */
.items-table .section-header td {
  color: var(--accent-700);
  font-weight: 600;
  border-bottom: 2px solid var(--accent-500);
}
.items-table .section-subtotal td {
  font-style: italic;
  color: var(--slate-700);
  font-weight: 600;
}

/* ─── Bloc Verifications (Sentinelle + alertes statiques) ─── */
.checks {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-3);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* FIX-059 : le menu « Masquer » d'une alerte masquable (dropdown Bootstrap,
   position:absolute) etait clippe par l'overflow:hidden ci-dessus — l'utilisateur
   voyait le menu tronque et ne pouvait pas choisir la duree. MEME defaut et MEME
   remede que FIX-017 pour les mention-pickers (cf. `.s-card:has([data-mention-picker])`
   plus haut dans ce fichier). Le scope :has() limite l'exception aux panneaux qui
   contiennent reellement un menu de masquage ; au repos le dropdown est display:none,
   donc aucun effet visuel hors ouverture. */
.checks:has(.check-snooze) {
  overflow: visible;
}
.checks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--slate-100);
}
.checks-head-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--slate-900);
  font-size: var(--fs-md);
}
.checks-head-title i {
  color: var(--slate-500);
}
/* Audit O9 : modificateurs semantiques figes (--danger/warning-500) */
.checks-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--slate-100);
  color: var(--slate-700);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.checks-count.is-danger {
  background: var(--danger-100);
  color: var(--danger-700);
}
.checks-count.is-warning {
  background: var(--warning-100);
  color: var(--warning-700);
}
.checks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--slate-100);
  border-left: 3px solid transparent;
}
.check-row:last-child {
  border-bottom: none;
}
.check-row.lvl-danger {
  background: #fefafa;
  border-left-color: var(--danger-500);
}
.check-row.lvl-warning {
  background: #fefcf6;
  border-left-color: var(--warning-500);
}
.check-row.lvl-info {
  background: #f8fbff;
  border-left-color: #0ea5e9;
}
.check-row.lvl-success {
  background: #f0fdf4;
  border-left-color: var(--success-500);
}
.check-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.check-row.lvl-danger .check-icon {
  background: var(--danger-50);
  color: var(--danger-700);
}
.check-row.lvl-warning .check-icon {
  background: var(--warning-50);
  color: var(--warning-700);
}
.check-row.lvl-info .check-icon {
  background: #e0f2fe;
  color: #0369a1;
}
.check-row.lvl-success .check-icon {
  background: var(--success-50);
  color: var(--success-700);
}
.check-body {
  flex: 1 1 auto;
  min-width: 0;
}
.check-title {
  font-weight: 600;
  color: var(--slate-900);
  font-size: var(--fs-md);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.check-desc {
  color: var(--slate-700);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-top: 4px;
}
.check-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 6px 12px;
  background: #fff;
  color: var(--accent-700);
  border: 1px solid var(--accent-100);
  border-radius: var(--radius-btn);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.check-action:hover {
  background: var(--accent-50);
  border-color: var(--accent-500);
}
.check-dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--slate-500);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.check-dismiss:hover {
  background: var(--slate-100);
  color: var(--slate-700);
}
.check-error {
  color: var(--danger-700);
  font-size: var(--fs-sm);
  margin-left: var(--space-2);
}
.check-inline-row {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.check-inline-label {
  font-size: var(--fs-sm);
  color: var(--slate-700);
  white-space: nowrap;
}

/* ─── Bloc Totaux ─── */
.totals-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}
.totals-table {
  min-width: 320px;
  font-size: var(--fs-md);
  border-collapse: collapse;
}
.totals-table td {
  padding: 7px 12px;
}
.totals-table td:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ─── [SYNC:SOLDE-TOTALS] Spec ACOMPTE-3 (O3) — Récapitulatif des acomptes ─────
   Jumeau écran du bloc `.doc-solde-recap` du document imprimé (document-styles.css).
   ⚠️ CE QUE LE REPÈRE GARANTIT, ET CE QU'IL NE GARANTIT PLUS (chef 2026-07-25) :
   il couvre le CONTENU et les LIBELLÉS — mêmes acomptes, mêmes montants (TTC + HT
   entre parenthèses), même absence de mention explicative. Il ne couvre PLUS le
   PLACEMENT ni le style, que le chef a délibérément dissociés par médium :
     · fiche, grand écran → à GAUCHE des totaux, cadre neutre comme les autres cartes ;
     · fiche, < 992 px    → SOUS les totaux (voir la media query en fin de bloc) ;
     · document imprimé   → SOUS les totaux, style des sections de bas de page.
   Toute modification du CONTENU reste à répercuter dans les deux gabarits. */
.totals-wrap {
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* Le <div> POSITIONNE et porte le cadre ; la <table> ne fait que mettre en colonnes.
   Bordure NEUTRE (chef 2026-07-25, FM) : le bloc s'aligne sur les autres cartes de la
   fiche (`--slate-200`), il n'est pas mis en avant par la couleur d'accent — celle-ci
   est réservée au document imprimé. `separate` (sur la table) est OBLIGATOIRE pour que
   le rayon s'applique : en `collapse`, les navigateurs n'arrondissent pas une table. */
.solde-recap-box {
  margin-right: auto;
  align-self: flex-start;
  border: 1px solid var(--slate-200);
  background: #fff;
  border-radius: var(--radius-md);
  /* `overflow-x: auto` et non `hidden` : la 2ᵉ colonne est en `nowrap` et s'est
       allongée (montant TTC + équivalent HT entre parenthèses). Sur un écran étroit,
       `hidden` COUPAIT le montant hors taxes — précisément l'information ajoutée. */
  overflow-x: auto;
}
.solde-recap-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  color: var(--slate-600);
}
/* Distance bordure ⇄ texte (chef 2026-07-25, FM). Posé sur les règles de LIGNE, pas
   sur un sélecteur générique : un `.solde-recap-table td { padding-left }` générique
   était écrasé par les règles de ligne ci-dessous, et le texte touchait le trait. */
.solde-recap-table td {
  padding: 5px 16px;
  vertical-align: baseline;
}
.solde-recap-table td:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.solde-recap-table tr.solde-recap-title td {
  font-weight: 600;
  color: var(--slate-700);
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--slate-200);
}
.solde-recap-table tr:last-child td {
  padding-bottom: 12px;
}
/* Équivalent hors taxes entre parenthèses : c'est lui qui est déduit des totaux. */
.solde-recap-ht {
  color: var(--slate-400);
  font-style: italic;
}

/* Tablette / mobile (chef 2026-07-25, FM) : le récap passe SOUS le bloc de totaux.
   Sans cet ordre, le conteneur flex le plaçait en PREMIER une fois replié et
   repoussait les totaux — le chiffre le plus important du document se retrouvait
   sous un bloc secondaire. `order` seul suffit : `.totals-wrap` est déjà en
   `flex-wrap: wrap`. */
@media (max-width: 991.98px) {
  .solde-recap-box {
    order: 2;
    margin-right: 0;
    width: 100%;
  }
  .totals-wrap .totals-table {
    order: 1;
  }
}
.totals-table tr.is-muted td {
  color: var(--slate-500);
  font-style: italic;
  font-size: var(--fs-sm);
  padding-top: 2px;
  padding-bottom: 2px;
}
.totals-table tr.is-ttc td {
  background: var(--slate-50);
  font-weight: 700;
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}
/* D-B-11 / O6 : .is-net = couleur Chef (was .net-to-pay legacy) */
.totals-table tr.is-net td {
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 700;
}
.totals-table tr.is-deposit td {
  color: var(--danger-700);
}
.totals-table tr.is-hours td {
  border-top: 1px solid var(--slate-200);
  padding-top: var(--space-3);
  font-style: italic;
  color: var(--slate-500);
  font-size: var(--fs-sm);
}
.totals-table tr.is-hours-detail td {
  text-align: right;
  font-style: italic;
  color: var(--slate-500);
  font-size: var(--fs-xs);
  padding-top: 0;
}

/* ─── Situation financiere ─── */
/* D-B-11 : balance-pill.is-accent = couleur Chef (badge avoir derogation D8) */
.balance-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.balance-pill.is-due {
  background: var(--warning-50);
  color: var(--warning-700);
}
.balance-pill.is-accent {
  background: var(--accent-50);
  color: var(--accent-700);
}
.balance-pill.is-settled {
  background: var(--success-50);
  color: var(--success-700);
}

/* FM1 : migration vers .movements-deck (DIV). closest('tr') adapte vers closest('.movement-item') dans show.php */
.movements-deck {
  display: flex;
  flex-direction: column;
}
.movement-item {
  border-bottom: 1px solid var(--slate-100);
  padding: var(--space-3) var(--space-4);
  transition: background 0.12s ease;
}
.movement-item:last-child {
  border-bottom: none;
}
.movement-item .pay-read {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.movement-item .pay-read:hover {
  background: var(--slate-50);
}
.movement-content {
  flex: 1 1 auto;
  min-width: 0;
}
.movement-l1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 4px;
}
.movement-type {
  font-weight: 600;
  color: var(--slate-900);
  font-size: var(--fs-md);
}
.movement-type a {
  color: var(--slate-900);
  text-decoration: none;
}
.movement-type a:hover {
  color: var(--accent-700);
  text-decoration: underline;
}
.movement-l2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.movement-meta {
  font-size: var(--fs-sm);
  color: var(--slate-500);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.movement-meta .dot {
  opacity: 0.5;
}
.movement-meta .method {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.movement-meta .method i {
  color: var(--slate-700);
}
.movement-meta .ref {
  font-style: italic;
}
.movement-balance {
  font-size: var(--fs-sm);
  color: var(--slate-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.movement-balance strong {
  color: var(--slate-900);
  font-weight: 600;
}
/* Footer (solde final) */
.movement-item.is-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--slate-50);
  font-weight: 700;
  border-top: 1px solid var(--slate-200);
  border-bottom: none;
}
.movement-foot-label {
  color: var(--slate-700);
}
.movement-foot-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--slate-900);
}
.movement-item .pay-edit {
  padding: var(--space-2) 0;
}

/* 🔴 Spec LIVRE-6 (chef, 2026-08-11) — l'avertissement « opération figée », affiché à
   l'OUVERTURE du formulaire de correction d'un paiement, dans la fiche de la facture.
   Couleur de STATUT (amber), pas d'action : il informe, il n'invite à rien. */
.pay-edit-sealed {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: var(--space-2);
  padding: 8px 10px;
  border: 1px solid var(--warning-100);
  border-left: 3px solid var(--warning-500);
  border-radius: var(--radius-btn);
  background: var(--warning-50);
  color: var(--slate-700);
  font-size: 12.5px;
  line-height: 1.45;
}
.pay-edit-sealed i {
  color: var(--warning-500);
  font-size: 13px;
  margin-top: 1px;
}

/* D-B-16 : 5 variantes movement-icon (CORR2-1 M5) */
.movement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  font-size: 14px;
}
.movement-icon.m-emission {
  background: var(--accent-50);
  color: var(--accent-700);
}
.movement-icon.m-encaissement {
  background: var(--success-50);
  color: var(--success-700);
}
.movement-icon.m-avoir {
  background: var(--warning-50);
  color: var(--warning-700);
}
.movement-icon.m-remboursement {
  background: var(--danger-50);
  color: var(--danger-700);
}
.movement-icon.m-remboursement_facture {
  background: var(--slate-100);
  color: var(--slate-900);
}
/* Spec FIX-013 Item 2 v2 : acompte initial (deposit_percent du document) */
.movement-icon.m-acompte {
  background: var(--slate-100);
  color: var(--slate-700);
}

/* Spec FIX-013 Item 3 (D10) : anciennes classes par TYPE conservees pour rétrocompat
   (icônes / classes utilitaires) sans propriété color. La couleur est désormais
   pilotée par le SIGNE du montant via .is-pos / .is-neg ci-dessous (D2). */
.movement-amount.is-emission {
  /* color retire FIX-013 D10 */
}
.movement-amount.is-encaissement {
  /* color retire FIX-013 D10 */
}
.movement-amount.is-avoir {
  /* color retire FIX-013 D10 */
}
.movement-amount.is-remboursement {
  /* color retire FIX-013 D10 */
}

/* Spec FIX-013 Item 3 (D2) : convention chef — positif = augmente la dette = ROUGE,
   négatif = diminue la dette = VERT. Placées APRÈS les classes par type pour
   priorité d'ordre à spécificité égale (0,2,0). */
.movement-amount.is-pos {
  color: var(--danger-600);
}
.movement-amount.is-neg {
  color: var(--success-600);
}

/* Spec FIX-013 Item 1 : focus + halo pulsé sur cible d'ancre URL.
   Déclenchée par le handler global app.js sur les liens de Sentinelles
   (S02/S05 TVA intracom -> #tva_number). Limité aux inputs (le JS filtre). */
@keyframes fix013HashFocusPulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent-300);
  }
  50% {
    box-shadow: 0 0 0 6px var(--accent-50);
  }
  100% {
    box-shadow: 0 0 0 0 var(--accent-50);
  }
}
.hash-focus-highlight {
  animation: fix013HashFocusPulse 1.2s ease-in-out 2;
  border-color: var(--accent-500) !important;
  outline: none !important;
}

/* Spec FIX-013 Item 4 (D11) : habillage Mint des modales partagées.
   Appliqué via .modal-card sur .modal-content (cf. _modal_catalogue.php). */
.modal-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--slate-200);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}
.modal-card-header {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  padding: var(--space-3) var(--space-4);
}
.modal-card-header .modal-title {
  font-weight: 600;
  color: var(--slate-900);
  font-size: var(--fs-md);
}
.modal-card-body {
  background: #fff;
}

/* ─────────────────────────────────────────────────────────────
   Spec FIX-013 Item 4 v2 — Habillage interieur modale catalogue
   Periode : tabs + arbre 3 niveaux + items + mini-badge SAP.
   Selecteurs scopes sous #modalCatalogue pour ne casser aucun
   autre composant (nav-tabs ailleurs sur le site, etc.).
   ───────────────────────────────────────────────────────────── */

/* Onglets - alignement sur .ledger-tab-bar (existant Mint) */
#modalCatalogue .nav-tabs {
  border-bottom: 1px solid var(--slate-200);
  padding: 0 var(--space-3);
  gap: var(--space-1);
}
#modalCatalogue .nav-tabs .nav-link {
  color: var(--slate-600);
  font-weight: 500;
  font-size: var(--fs-sm);
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  border-radius: 0;
  background: transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#modalCatalogue .nav-tabs .nav-link:hover {
  color: var(--accent-700);
  border-bottom-color: var(--slate-300);
}
#modalCatalogue .nav-tabs .nav-link.active {
  color: var(--accent-700);
  border-bottom-color: var(--accent-500);
  background: transparent;
  font-weight: 600;
}

/* Arbre catégories - niveau 1 */
#modalCatalogue .catalog-modal-tree {
  padding: var(--space-2) 0;
  max-height: 60vh;
  overflow-y: auto;
}
#modalCatalogue .cm-cat {
  border-bottom: 1px solid var(--slate-100);
}
#modalCatalogue .cm-cat:last-child {
  border-bottom: none;
}
#modalCatalogue .cm-cat-header {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--slate-900);
  background: var(--slate-50);
  transition: background 0.12s ease;
}
#modalCatalogue .cm-cat-header:hover {
  background: var(--accent-50);
}
#modalCatalogue .cm-cat-chevron {
  color: var(--slate-500);
  font-size: 14px;
  transition: transform 0.15s ease;
}
#modalCatalogue .cm-cat-header .badge {
  background: var(--accent-100) !important;
  color: var(--accent-700) !important;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 11px;
}
#modalCatalogue .cm-cat-body {
  padding: var(--space-1) 0 var(--space-2) var(--space-3);
}

/* Arbre - niveau 2 (sous-categorie) */
#modalCatalogue .cm-subcat {
  margin: var(--space-1) 0;
}
#modalCatalogue .cm-subcat-header {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--slate-700);
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}
#modalCatalogue .cm-subcat-header:hover {
  background: var(--slate-50);
}
#modalCatalogue .cm-subcat-header .badge {
  background: var(--slate-100) !important;
  color: var(--slate-600) !important;
  font-weight: 500;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}
#modalCatalogue .cm-subcat-body {
  padding-left: var(--space-3);
}

/* Arbre - niveau 3 (sous-sous-categorie) */
#modalCatalogue .cm-subsubcat-header {
  display: flex;
  align-items: center;
  padding: 2px var(--space-3);
  cursor: pointer;
  color: var(--slate-600);
  border-radius: var(--radius-sm);
}
#modalCatalogue .cm-subsubcat-header:hover {
  background: var(--slate-50);
}
#modalCatalogue .cm-subsubcat-body {
  padding-left: var(--space-3);
}

/* Item article - ligne 1 (code | libelle | prix | TVA) */
#modalCatalogue .cm-item {
  padding: var(--space-2) var(--space-3);
  margin: var(--space-1) 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
#modalCatalogue .cm-item:hover {
  background: var(--accent-50);
  border-color: var(--accent-200);
}
#modalCatalogue .cm-item-row1 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
#modalCatalogue .cm-item-row1 > small.text-muted {
  color: var(--slate-500) !important;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  min-width: 60px;
  font-weight: 500;
}
#modalCatalogue .cm-item-row1 > span.flex-grow-1 {
  color: var(--slate-900);
  font-weight: 500;
}
#modalCatalogue .cm-item-row1 > span.text-end:nth-last-child(2) {
  color: var(--slate-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#modalCatalogue .cm-item-row1 > span.text-end:last-child {
  color: var(--slate-500);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  background: var(--slate-100);
  border-radius: var(--radius-pill);
}

/* Item article - ligne 2 (description secondaire + chevron expand) */
#modalCatalogue .cm-item-row2 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: 4px;
  padding-left: 60px; /* alignement avec libelle de la ligne 1 */
}
#modalCatalogue .cm-designation-clamp {
  flex: 1;
  color: var(--slate-500);
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
#modalCatalogue .cm-designation-clamp.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}
#modalCatalogue .cm-chevron {
  background: transparent;
  border: none;
  color: var(--slate-400);
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.12s ease, transform 0.15s ease;
}
#modalCatalogue .cm-chevron:hover {
  color: var(--accent-600);
}
#modalCatalogue .cm-chevron.expanded {
  transform: rotate(180deg);
  color: var(--accent-600);
}

/* ── Spec 043-9 : bande du haut (recherche + bouton d'ajout) ─────────────
   La liste (.catalog-modal-tree) a deja son propre defilement : la bande ne
   sort donc de l'ecran que si le corps de la fenetre deborde a son tour
   (petits ecrans). `sticky` est la ceinture pour ce cas-la.

   ⚠️ La disposition est ICI, pas en classes utilitaires dans la vue : l'onglet
   « Interventions a facturer » masque cette bande par un `display:none` en
   ligne, qu'une classe `!important` du socle ecraserait. Une regle d'id sans
   `!important` laisse le masquage gagner. */
#modalCatalogue #catalog-modal-search-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff; /* aligne sur .modal-card-body — pas de jeton `--surface` dans ce socle */
}
#modalCatalogue #catalog-modal-add {
  min-height: 44px; /* cible tactile (CLAUDE.md §6 responsive) */
  flex: none;
}

/* Item template (modele metier) - liseré d'identification.
   Spec 043-9 : le liseré passe par une BORDURE, plus par le fond — le fond
   est desormais celui de la selection et du survol, qui l'ecrasaient. */
#modalCatalogue .cm-item {
  border-left: 3px solid var(--accent-200);
}
#modalCatalogue .cm-item.cm-template {
  border-left-color: var(--accent-400, var(--accent-200));
}

/* Spec 043-9 : etat « choisi » — le FOND et la coche, jamais le liseré.
   Deux signaux distincts : le liseré dit ce que c'est, le fond ce que j'ai
   choisi. Les confondre rendrait les deux illisibles. */
#modalCatalogue .cm-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm, 4px);
  color: transparent;
  font-size: 12px;
}
#modalCatalogue .cm-item.is-selected {
  background: var(--accent-100);
  /* ⚠️ JAMAIS `border-color` en raccourci ici : il ecraserait les quatre cotes,
       donc le liseré gauche qui distingue un modele metier d'un article a soi —
       exactement la confusion que ces deux signaux existent pour eviter. */
  border-top-color: var(--accent-300);
  border-right-color: var(--accent-300);
  border-bottom-color: var(--accent-300);
}
#modalCatalogue .cm-item.is-selected .cm-check {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: #fff;
}

/* Mini-badge SAP - aligne sur .line-sap-badge.is-sap du formulaire (D14) */
#modalCatalogue .cm-sap-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--accent-100);
  color: var(--accent-700);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-size: 10px !important; /* override le style inline du JS */
  line-height: 1;
  flex: none;
}
#modalCatalogue .cm-sap-badge i {
  font-size: 10px;
}

/* Repere « fourniture et pose » - MIXTE-3 (MIXTE-D11). Meme gabarit que le
   mini-badge SAP ci-dessus, teinte neutre : c'est une information, pas un statut. */
#modalCatalogue .cm-materials-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--slate-100);
  color: var(--slate-700);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  line-height: 1;
  flex: none;
}
#modalCatalogue .cm-materials-badge i {
  font-size: 10px;
}

/* Etats vides + loading */
#modalCatalogue #catalog-modal-empty,
#modalCatalogue #catalog-modal-loading {
  padding: var(--space-5) var(--space-3);
  color: var(--slate-500);
  font-size: var(--fs-sm);
}

/* 3e onglet "Interventions a facturer" - reset Bootstrap brut */
#modalCatalogue #catalog-modal-interventions {
  padding: var(--space-3);
}
#modalCatalogue #catalog-modal-interventions .form-control,
#modalCatalogue #catalog-modal-interventions .form-select {
  font-size: var(--fs-sm);
  border-color: var(--slate-200);
}
#modalCatalogue #catalog-modal-interventions .btn-primary {
  background: var(--accent-500);
  border-color: var(--accent-500);
}
#modalCatalogue #catalog-modal-interventions .btn-primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
}

/* ─── Refund inline table ─── */
.refund-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.refund-table thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--slate-50);
  color: var(--slate-700);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.refund-table tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--slate-100);
}
.refund-table tfoot td {
  font-weight: 700;
  background: var(--slate-50);
}

/* ─── Mentions legales (4 zones - audit O4) ─── */
.legal-zone {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--slate-500);
  line-height: 1.55;
}
.legal-zone:last-child {
  margin-bottom: 0;
}
.legal-zone .label {
  color: var(--slate-700);
  font-weight: 600;
  margin-right: 4px;
}

/* ─── Historique (timeline) ─── */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--slate-200);
}
.timeline-item {
  position: relative;
  padding-left: var(--space-5);
  padding-bottom: var(--space-3);
  font-size: var(--fs-sm);
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-50);
}
.timeline-item .time {
  color: var(--slate-500);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 2px;
}
.timeline-item .transition {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* FM3 : collapse apres N items */
.timeline.is-collapsible.is-collapsed .timeline-item.is-extra {
  display: none;
}
.timeline-toggle {
  margin-top: var(--space-2);
  background: transparent;
  border: none;
  color: var(--accent-700);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-btn);
  transition: background 0.15s ease;
}
.timeline-toggle:hover {
  background: var(--accent-50);
}

/* ─── Badge integrite SHA-256 ─── */
.integrity-badge-wrap {
  margin-top: var(--space-3);
}
.integrity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-pill);
  color: var(--slate-500);
  font-size: var(--fs-xs);
}
.integrity-badge code {
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--slate-200);
  color: var(--slate-700);
  font-family: "SF Mono", "Consolas", monospace;
  font-size: var(--fs-xs);
}

/* ─── Forms Mint compactes (encaissements + refund + DES) ─── */
.show-input.is-sm,
.show-select.is-sm {
  display: inline-block;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--slate-900);
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: border-color 0.15s ease;
}
.show-input.is-sm:focus,
.show-select.is-sm:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-50);
}
.show-input.is-sm:disabled,
.show-select.is-sm:disabled {
  background: var(--slate-50);
  opacity: 0.7;
}

/* ─── show-switch (toggle Mint - audit O12) ─── */
.show-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.show-switch-input {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--slate-200);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
  margin: 0;
}
.show-switch-input:checked {
  background: var(--accent-500);
}
.show-switch-input::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.show-switch-input:checked::before {
  transform: translateX(16px);
}
.show-switch-label {
  font-size: var(--fs-sm);
  color: var(--slate-700);
  cursor: pointer;
}

/* === FM6 : overrides :disabled pour boutons Bootstrap (fix transverse) ===
   Cause-racine : IMPL-1 surcharge .btn-primary/.btn-success/.btn-danger
   en couleur Mint, mais SANS l'etat `:disabled`. Bootstrap natif reprend
   alors la main avec #0d6efd (bleu Bootstrap), #198754 (vert), etc.
   loading-spinner.js pose `el.disabled = true` au clic -> bouton "Finaliser"
   passe au bleu Bootstrap pendant le spinner. Fix : .btn-*:disabled preserve
   le token Mint correspondant avec opacity:0.65 (norme Bootstrap pour disable). */
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
  opacity: 0.65;
}
.btn-success:disabled,
.btn-success.disabled {
  background-color: var(--success-500);
  border-color: var(--success-500);
  color: #fff;
  opacity: 0.65;
}
.btn-danger:disabled,
.btn-danger.disabled {
  background-color: var(--danger-500);
  border-color: var(--danger-500);
  color: #fff;
  opacity: 0.65;
}
.btn-warning:disabled,
.btn-warning.disabled {
  background-color: var(--warning-500);
  border-color: var(--warning-500);
  color: var(--warning-700);
  opacity: 0.65;
}
.btn-info:disabled,
.btn-info.disabled {
  background-color: #e0f2fe;
  border-color: #bae6fd;
  color: #0369a1;
  opacity: 0.65;
}
.btn-secondary:disabled,
.btn-secondary.disabled {
  background-color: var(--slate-100);
  border-color: var(--slate-200);
  color: var(--slate-700);
  opacity: 0.65;
}
/* Variantes outline */
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  background-color: transparent;
  color: var(--accent-500);
  border-color: var(--accent-500);
  opacity: 0.65;
}
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  background-color: transparent;
  color: var(--slate-700);
  border-color: var(--slate-200);
  opacity: 0.65;
}
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
  background-color: transparent;
  color: var(--danger-700);
  border-color: #fecaca;
  opacity: 0.65;
}
.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
  background-color: transparent;
  color: var(--warning-700);
  border-color: #fde68a;
  opacity: 0.65;
}
.btn-outline-info:disabled,
.btn-outline-info.disabled {
  background-color: transparent;
  color: #0369a1;
  border-color: #bae6fd;
  opacity: 0.65;
}
.btn-outline-success:disabled,
.btn-outline-success.disabled {
  background-color: transparent;
  color: var(--success-700);
  border-color: var(--success-200);
  opacity: 0.65;
}
/* show-btn (variante Mint native) : etat :disabled cohérent */
.show-btn.is-primary:disabled {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
  opacity: 0.65;
}
.show-btn.is-success:disabled {
  background: var(--success-500);
  border-color: var(--success-500);
  color: #fff;
  opacity: 0.65;
}
.show-btn.is-danger:disabled {
  background: #fff;
  color: var(--danger-700);
  border-color: #fecaca;
  opacity: 0.65;
}
.show-btn.is-warning:disabled {
  background: #fff;
  color: var(--warning-700);
  border-color: #fde68a;
  opacity: 0.65;
}
.show-btn.is-accent-outline:disabled {
  background: #fff;
  color: var(--accent-700);
  border-color: var(--accent-500);
  opacity: 0.65;
}

/* === [IMPL-4-B-END] Fin Section CORR-DS-IMPL-4-B Show document === */

/* ============================================================
   CORR-DS-IMPL-4-C — Form Document Edit (brouillon)
   Sandbox cible : 07-edit-document.html
   Audit B1 : doublons evites — .totals-table/.totals-wrap/.card-toggle
   reutilises (IMPL-4-B lignes 8105+ et 2354). Cumul Mint sur .line-val
   et .line-section-header existants.
   ============================================================ */

/* Wrapper principal — remplace .card.shadow-sm + .card-body p-4 prod */
.edit-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------- En-tete brouillon (audit Phase 2.1) ---------- */
/* CORR-DS-IMPL-4-D chantier 4 : sticky scroll. Pattern aligne sur la memoire
   [[feedback_sticky_top_header_height]] (top: var(--header-height), JAMAIS top: 0). */
.edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid transparent;
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: var(--surface, #fff);
  transition: box-shadow 0.15s ease, padding 0.15s ease;
}
/* CORR-DS-IMPL-4-D chantier 4 : .is-scrolled pose par micro-script form.php (Phase 5.3). */
.edit-header.is-scrolled {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border-bottom-color: var(--slate-200);
}
/* CORR-DS-IMPL-4-D FM10 (mobile) : header compact + boutons en icones seules.
   Hauteur reduite de moitie (padding 4px au lieu de space-3=12px) + libelle texte
   masque sur les .edit-btn (icone seule visible) pour gagner de la place a cote
   du badge "Brouillon". */
@media (max-width: 575.98px) {
  .edit-header {
    padding: var(--space-1) 0;
    margin-bottom: var(--space-2);
    gap: var(--space-2);
  }
  .edit-header.is-scrolled {
    padding: var(--space-1) 0;
  }
  .edit-header-actions .edit-btn-label {
    display: none;
  }
  .edit-header-actions .edit-btn {
    padding: 6px 10px;
  }
  .edit-header-actions .edit-btn i {
    margin: 0;
  }
}
.edit-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* CORR-DS-IMPL-4-D FM14 : wrapper droit (badge Brouillon + boutons actions) reste
   un groupe coherent sur mobile, sur une ligne unique a cote du titre s'il y a la
   place, ou en dessous sinon — JAMAIS badge et boutons sur 2 lignes separees. */
.edit-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
}
.edit-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--slate-700);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.edit-back:hover {
  background: var(--slate-100);
}
.edit-title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate-900);
}
.edit-badge-draft {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--slate-100);
  color: var(--slate-700);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------- Bouton .edit-btn (audit O4 — remplacement strict btn-primary) ---------- */
.edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.edit-btn:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}
.edit-btn.is-primary {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
}
.edit-btn.is-primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: #fff;
}

/* ---------- Carte Mint (Audit B1 : .card-toggle reutilise ligne 2354) ---------- */
.edit-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
  /* FM2.2 (hotfix) : overflow visible pour ne pas couper les dropdowns
       Bootstrap natifs (Mention TVA, Moyens de paiement) qui debordent
       au-dela de la carte. */
  overflow: visible;
}
.edit-card-title {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--slate-100);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--slate-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.edit-card-body {
  padding: var(--space-4);
}

/* Zone TOUJOURS visible (selecteur Client) */
.edit-card-static {
  padding: var(--space-4);
  border-bottom: 1px solid var(--slate-100);
}
.edit-card.is-collapsible:not(.is-open) .edit-card-static {
  border-bottom: none;
}

/* Collapsible — clic sur titre toggle (FM2.1 : JS minimal en pied de form.php) */
.edit-card.is-collapsible .edit-card-title {
  cursor: pointer;
  user-select: none;
}
.edit-card.is-collapsible .edit-card-title:hover {
  background: var(--slate-50);
}
.edit-card.is-collapsible:not(.is-open) .edit-card-body {
  display: none;
}
.edit-card.is-collapsible.is-open .card-toggle {
  transform: rotate(180deg);
}

/* FM2.1 : chevron .card-toggle Mint (sandbox 07) — fleche legere slate */
.edit-card .card-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--slate-500);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.15s ease;
  padding: 0;
}
.edit-card .card-toggle:hover {
  background: var(--slate-100);
  color: var(--slate-700);
}
.edit-card .card-toggle i {
  font-size: 14px;
}

/* FM2.3 + FM3.1 + FM4.1 : bouton Apercu flottant — restauration position fixed,
   place AU-DESSUS du bouton d'aide pour eviter la collision tout en preservant
   la zone bas-droite habituelle.
   [SYNC:AIDE] — JUMEAU : `.aide-floating-btn`. Cette regle est calee EN DUR sur
   ses valeurs : la modifier la-bas oblige a recalculer ici.
   ⚠️ Les deux regles n'ont PAS le meme point de bascule mobile (768px pour
   l'aide, 640px ici) : entre 641 et 768px, la variante mobile de l'aide
   s'applique sans celle-ci. Rien ne se chevauche pour autant (voir plus bas). */
.preview-floating-btn {
  position: fixed;
  bottom: 70px;   /* aide a bottom:20 + 40 hauteur + 10 gap = 70 (AIDE-6a-2) */
  right: 20px; /* aligne horizontalement avec le bouton d'aide */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-500);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.preview-floating-btn:hover {
  background: var(--accent-600);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  color: #fff;
}
@media (max-width: 640px) {
  .preview-floating-btn {
    /* [SYNC:AIDE] — JUMEAU mobile : `.aide-floating-btn` sous 767.98px.
           🔄 AIDE-6a-2 : l'aide est passee de 44 a 40px de haut. Recalcul :
           12 (son bas) + 40 (sa hauteur) + 10 (gouttiere) = 62. */
    bottom: 62px;
    right: 12px; /* aligne sur l'aide mobile, qui est a 12 et non 16 */
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

/* CORR-DS-IMPL-4-D FM3 : restauration regles offcanvas/iframe apercu (Spec 037).
   Perdues lors de la migration de app.css vers components.css (DS Mint) — seule
   .preview-floating-btn avait ete restauree. Sans ces 4 regles : offcanvas garde
   sa largeur Bootstrap par defaut (~400px), wrapper sans hauteur, iframe sans
   dimensions → aperçu rétréci en haut-droite. */
.offcanvas-preview {
  width: 95% !important;
}
@media (min-width: 992px) {
  .offcanvas-preview {
    width: 65% !important;
  }
}
.preview-frame-wrapper {
  position: relative;
  width: 100%;
  min-height: 200px;
  /* Hotfix FM7b (Spec 109-3, 2026-07-04) : la hauteur n'est plus 100% fixe
       ni geree par l'iframe elle-meme — document-preview.js::fitPreview()
       la fixe explicitement a la hauteur VISUELLE reelle du contenu mis a
       l'echelle (bodyHeight x scale). overflow:hidden masque l'empreinte de
       mise en page non-mise-a-l'echelle de l'iframe (voir .preview-iframe
       ci-dessous) — sans consequence, cette zone n'est jamais destinee a
       etre visible. Le scroll vertical du panneau, si le contenu depasse la
       hauteur visible de l'offcanvas, reste gere par .offcanvas-body
       (Bootstrap, overflow-y:auto par defaut — un seul contexte de scroll). */
  overflow: hidden;
  background: var(--slate-50);
}
.preview-iframe {
  /* Hotfix FM7b (Spec 109-3, 2026-07-04, capture mobile 6a48220567783e90894adab5.jpg) :
       largeur FIXE (pas 100% fluide) — les tailles de police de `.doc`
       (document-styles.css, en `pt`, absolues) sont calibrees pour une
       largeur de reference de 760px. Une largeur fluide reduit la BOITE sans
       reduire le TEXTE (unites absolues) -> texte disproportionne, colonnes
       qui debordent sur un panneau etroit (mobile). `document-preview.js`
       applique un `transform:scale()` sur cette largeur de reference fixe
       pour la faire tenir dans la largeur reelle du panneau, en resynchro-
       nisant l'empreinte de mise en page du wrapper sur la taille visuelle
       (evite le defaut de l'ancien mecanisme FM2 : zone scrollable fantome). */
  width: 760px;
  border: none;
  background: #fff;
  transform-origin: top left;
  display: none; /* revele par document-preview.js apres chargement */
}
.preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  z-index: 2;
}
.preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
}

/* ---------- Pattern .field — input avec libelle integre a la bordure ---------- */
/* Audit B1 — anti-cascade : .edit-card .field plus specifique que .form-card .field (ligne 5793) */
.edit-card .field,
.edit-wrap .field {
  position: relative;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-input);
  background: #fff;
  padding: 13px 12px 7px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.edit-card .field:hover,
.edit-wrap .field:hover {
  border-color: var(--slate-300);
}
.edit-card .field:focus-within,
.edit-wrap .field:focus-within {
  border-color: var(--accent-500);
  box-shadow: var(--shadow-focus);
}

/* Audit B1 : .field-label standalone — distinct de .line-val-cell .field-label (supprimee).
   Ne PAS dominer le selecteur .lines-header existant. */
.edit-card .field > .field-label,
.edit-wrap .field > .field-label {
  position: absolute;
  top: -8px;
  left: 10px;
  padding: 0 6px;
  background: #fff;
  font-size: 11px;
  color: var(--slate-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
  margin-bottom: 0;
}
.edit-card .field:focus-within > .field-label,
.edit-wrap .field:focus-within > .field-label {
  color: var(--accent-700);
}

.edit-card .field-input,
.edit-wrap .field-input,
.edit-card .field-textarea,
.edit-wrap .field-textarea,
.edit-card .field-select,
.edit-wrap .field-select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--slate-900);
  padding: 0;
  margin: 0;
}
.edit-card .field-input::placeholder,
.edit-wrap .field-input::placeholder,
.edit-card .field-textarea::placeholder,
.edit-wrap .field-textarea::placeholder {
  color: var(--slate-300);
}

/* CORR-DS-IMPL-4-D FM9 : 3 inputs Email/SIRET/Adresse facturation en lecture seule
   (pre-remplis JS depuis fiche client). Texte grise pour signaler la non-editabilite. */
.edit-card .field-input[data-prefill-from-client],
.edit-wrap .field-input[data-prefill-from-client] {
  color: var(--slate-500);
  cursor: not-allowed;
}
.edit-card .field-textarea,
.edit-wrap .field-textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.5;
  display: block;
}
.edit-card .field-select,
.edit-wrap .field-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'><path d='M8 10.5L3 5.5h10L8 10.5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 14px;
  padding-right: 18px;
  cursor: pointer;
}

.edit-card .field-help,
.edit-wrap .field-help {
  display: block;
  font-size: var(--fs-xs);
  color: var(--slate-500);
  margin-top: 6px;
  padding-left: 2px;
}

/* Bouton disquette flottant en haut-droite d'un .field */
.edit-card .field .field-save-icon,
.edit-wrap .field .field-save-icon,
.edit-card .field .save-default-btn,
.edit-wrap .field .save-default-btn {
  position: absolute;
  top: -8px;
  right: 10px;
  height: 16px;
  padding: 0 5px;
  background: #fff;
  color: var(--slate-300);
  font-size: 12px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.edit-card .field .field-save-icon:hover,
.edit-wrap .field .field-save-icon:hover,
.edit-card .field .save-default-btn:hover,
.edit-wrap .field .save-default-btn:hover {
  color: var(--accent-700);
  background: var(--accent-50);
}

/* Grille de champs (2 cols desktop, 1 col mobile) */
.fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .fields-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Checklist Mint (.affichage-group + .checklist) ---------- */
.affichage-group {
  padding: var(--space-2) 0;
}
.affichage-group-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.affichage-group-title i {
  color: var(--accent-700);
}
.affichage-divider {
  height: 1px;
  background: var(--slate-100);
  margin: var(--space-3) 0;
}
.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2) var(--space-3);
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
  margin: 0;
}
.checklist-item:hover {
  background: var(--slate-50);
}
.checklist-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--slate-300);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  margin: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.checklist-item input[type="checkbox"]:checked {
  background: var(--accent-500);
  border-color: var(--accent-500);
}
.checklist-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-md);
  color: var(--slate-700);
}
.checklist-label i {
  color: var(--slate-500);
  font-size: 14px;
}

/* ---------- Regime mixte banner Mint (Phase 2.7) ---------- */
.regime-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #f8fbff;
  border-bottom: 1px solid var(--slate-100);
  border-left: 3px solid #0ea5e9;
  color: var(--slate-700);
  font-size: var(--fs-sm);
}
.regime-banner-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--slate-900);
}
.regime-banner-title i {
  color: #0369a1;
}
.regime-banner-toggle {
  background: none;
  border: none;
  color: var(--accent-700);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}
.regime-banner-toggle:hover {
  text-decoration: underline;
}

/* ---------- Lignes footer + hint (Phase 2.7) ---------- */
.lines-footer {
  padding: var(--space-3) var(--space-4);
  background: var(--slate-50);
  border-top: 1px solid var(--slate-100);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.lines-hint {
  padding: var(--space-2) var(--space-4);
  background: #fff;
  border-top: 1px solid var(--slate-100);
  font-size: var(--fs-xs);
  color: var(--slate-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lines-hint i {
  color: var(--accent-700);
}

/* Bouton ajout Mint (audit Q7 : .is-primary plein / defaut outline dashed) */
.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1px dashed var(--accent-500);
  color: var(--accent-700);
  border-radius: var(--radius-btn);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.add-btn:hover {
  background: var(--accent-50);
  border-color: var(--accent-500);
  border-style: solid;
}
.add-btn.is-primary {
  background: var(--accent-500);
  border: 1px solid var(--accent-500);
  color: #fff;
}
.add-btn.is-primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: #fff;
}

/* FM4.2 : empecher le wrap des valeurs L2 sur tablette intermediaire (641-840px env)
   - flex-wrap: nowrap explicite sur .line-r2 (defensif, contre overrides Bootstrap)
   - min-width: 0 sur inputs/selects pour qu'ils puissent se compresser sous leur largeur intrinsec */
.line-r2.d-flex {
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.line-r2 .line-val-cell {
  min-width: 0 !important;
  position: relative; /* FM5 : ancrage du .line-val-notch absolu */
  /* overflow:hidden retire en FM5 pour ne pas couper le notch qui deborde en haut */
}
.line-r2 .line-val,
.line-r2 input.line-val,
.line-r2 select.line-val,
.line-r2 span.line-val {
  min-width: 0 !important;
  width: 100% !important;
}

/* FM5 : libelle abrege (Q / Un / Prix / Rem / TVA / HT / Ref) integre dans la bordure
   de chaque .line-val-cell — pattern .field-label Mint notched applique aux lignes */
.line-r2 .line-val-notch {
  position: absolute;
  top: -6px;
  left: 7px;
  padding: 0 4px;
  background: #fff;
  color: var(--slate-500);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
/* Au focus de la valeur, le notch prend la couleur Chef pour aligner avec la bordure accent */
.line-r2 .line-val-cell:focus-within .line-val-notch {
  color: var(--accent-700);
}
/* Padding-top reduit sur les inputs pour compenser le notch (sinon visuel cramped) */
.line-r2 .line-val {
  padding-top: 6px !important;
  padding-bottom: 2px !important;
}

/* ---------- Cumul Mint sur .line-val existant (Phase 3.2quater + FM3.2) ---------- */
/* Valeurs REDACTABLES : cadre gris subtil visible (demande chef FM3) + focus couleur Chef */
.edit-card .line-val,
.edit-wrap .line-val {
  border: 1px solid var(--slate-200) !important; /* gris subtil visible — FM3.2 */
  background: transparent !important;
  border-radius: 4px !important;
  transition: border-color 0.12s ease, background 0.12s ease,
    box-shadow 0.12s ease;
}
.edit-card .line-val:hover,
.edit-wrap .line-val:hover {
  border-color: var(--slate-300) !important;
  background: #fff !important;
}
.edit-card .line-val:focus,
.edit-wrap .line-val:focus,
.edit-card .line-val.is-editing,
.edit-wrap .line-val.is-editing {
  border: 1px solid var(--accent-500) !important; /* couleur Chef au focus */
  background: #fff !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none;
}
/* Valeurs LECTURE-SEULE : sans cadre, fond transparent (demande chef explicite) */
.edit-card .line-val-readonly,
.edit-wrap .line-val-readonly,
.edit-card .line-val.line-val-readonly,
.edit-wrap .line-val.line-val-readonly {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
  color: var(--slate-900);
  font-weight: 600;
}
/* CORR-DS-IMPL-4-D FM15 : sur un avoir, seule la quantite est editable.
   RÉF / UN / PRIX / REM sont readonly/disabled — retirer leurs bordures pour
   signaler visuellement la non-editabilite (alignement sur .line-val-readonly). */
.edit-card .line-val[readonly],
.edit-wrap .line-val[readonly],
.edit-card .line-val:disabled,
.edit-wrap .line-val:disabled {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
}

/* ---------- Alignement droite Carte Totaux desktop (audit O5) ---------- */
.edit-card[id="totals-panel"] {
  max-width: 480px;
  margin-left: auto;
}
@media (max-width: 768px) {
  .edit-card[id="totals-panel"] {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* FM7 : neutraliser min-width:320px de .totals-table (IMPL-4-B L8103) qui
       fait deborder la table dans la carte sur viewports <= 360px (capture 6Capture.PNG) */
  .edit-card[id="totals-panel"] .totals-wrap {
    display: block !important;
    width: 100% !important;
  }
  .edit-card[id="totals-panel"] .totals-table {
    min-width: 0 !important;
    width: 100% !important;
  }
}
@media (max-width: 640px) {
  /* Padding td plus serre en mobile pour les longs libelles type
       "TVA non applicable, art. 293 B du CGI" qui prennent une 2e ligne */
  .edit-card[id="totals-panel"] .totals-table td {
    padding: 5px 6px !important;
    font-size: var(--fs-sm) !important;
  }
  .edit-card[id="totals-panel"] .totals-table tr.is-muted td {
    font-size: var(--fs-xs) !important;
  }
}

/* ---------- Habillage tokens Mint des bandeaux conditionnels (Phase 3.4) ---------- */
/* PRESERVE id/class — uniquement les couleurs/bordures changent */
#service-month-realign-banner.alert.alert-warning {
  background: var(--warning-50);
  border-left: 3px solid var(--warning-500);
  color: var(--warning-700);
  border-color: var(--warning-500);
}
#client-country-banner.alert.alert-info {
  background: var(--accent-50);
  border-left: 3px solid var(--accent-500);
  color: var(--accent-700);
  border-color: var(--accent-500);
}
.tva-franchise-banner {
  background: var(--accent-50);
  border-left: 3px solid var(--accent-500);
  color: var(--accent-700);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
}
.tva-franchise-banner i {
  color: var(--accent-700);
}

/* ---------- Mention TVA fieldset habillage Mint (Phase 3.5) ---------- */
fieldset.tva-context-fieldset {
  border: 1px solid var(--slate-200);
  background: #fafbfc;
  border-radius: 8px;
}
fieldset.tva-context-fieldset > legend {
  color: var(--slate-700);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- Responsive mobile lignes (audit Q12 + FM3.3 — reduire espaces au max, 3 rangees, masquer Ref) ---------- */
@media (max-width: 640px) {
  /* FM3.3 : cacher la cellule REF + son libelle d'en-tete pour gagner de la place
       et permettre aux 6 valeurs restantes (qte/unite/PU/rem/TVA/HT) de tenir sur 1 ligne */
  .line-r2 .line-val-cell:first-child,
  .lines-header .lines-header-cols > span:first-child {
    display: none !important;
  }
  /* Valeurs serrees au maximum */
  .edit-card .line-val,
  .edit-wrap .line-val {
    font-size: 11px !important;
    padding: 2px 3px !important;
  }
  .line-r2.d-flex {
    gap: 1px !important;
  }
  .line-vals,
  .lines-header-cols {
    gap: 1px !important;
    padding: 0 1px !important;
  }
  .line-val-cell {
    min-width: 0;
    flex: 1 1 0 !important;
  }
  /* Spacers reduits — preserve la regle Spec 029 .lines-header-spacer-* */
  .lines-header-spacer-handle,
  .line-handle {
    width: 18px !important;
  }
  /* Header colonnes : police plus petite pour s'aligner */
  .lines-header {
    font-size: 9px !important;
    padding: 4px 6px !important;
  }
  .line-item {
    padding: 6px 4px !important;
  }

  /* FM8 : bouton "+ Nouveau client" reduit a l'icone "+" en mobile (gain de place dans la
       carte Client a cote du selecteur autocomplete) — le titre/aria-label preserve l'accessibilite */
  .btn-new-client-label {
    display: none !important;
  }
  .btn-new-client {
    padding: 7px 10px !important;
    min-width: 36px;
    justify-content: center;
  }
  .btn-new-client i.bi-plus-circle {
    margin: 0 !important;
    font-size: 1.1rem;
  }

  /* FM6 : compactages mobiles supplementaires (demande chef sur capture 5Capture.PNG) */
  /* (1) Cacher le caret "▾" devant "Details" du bandeau Regime mixte (garde "Details" cliquable) */
  .regime-banner-caret {
    display: none !important;
  }

  /* (2) Cacher l'icone calendrier bi-calendar3 a cote de l'input mois en L3 */
  .line-r3 i.bi-calendar3 {
    display: none !important;
  }

  /* (3) Cacher le picker natif a droite de l'input mois (l'input reste cliquable
       grace au position:absolute du picker — calque sandbox 07) + compresser largeur */
  .line-r3 .service-month-input {
    max-width: 100px !important;
    width: auto !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .line-r3 .service-month-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}

/* === [IMPL-4-C-END] Fin Section CORR-DS-IMPL-4-C Form brouillon === */

/* ═══════════════════════════════════════════════════════════════════════════
 * SECTION : DASHBOARD ONGLETS + CALENDRIER + GRAPHIQUE (CORR-DS-IMPL-3-EXT)
 * ═══════════════════════════════════════════════════════════════════════════
 * - Onglets .dash-tabs / .dash-tab / .dash-tab-panel pour le bloc 2/1 gauche
 * - Graphique Chart.js : .dash-chart-wrapper / canvas #dashRevenueChart
 * - Mini-calendrier dashboard : .dash-cal / .dash-cal-grid / .dash-cal-day
 * - Liste encaissements : .dash-payments-list (heritee de .dash-table)
 * - Timeline droite : min-height pour >= 3 lignes visibles
 *
 * Le bloc plafonds existant (.dash-threshold-*) est refondu plus haut :
 *   - height bar : 18px (harmonise avec ratio SAP)
 *   - fill is-ok : var(--accent-*) (couleur Chef A/B/F, D9)
 *   - marqueurs TVA : pointille vert/ambre (D7)
 *   - ratio SAP : sans border dashed (decadre)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Onglets ────────────────────────────────────────────────────────── */
.dash-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--slate-200);
  padding: 0 14px;
  background: #fff;
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
  overflow-x: auto;
  scrollbar-width: thin;
}
.dash-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--slate-600);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.15s ease;
}
.dash-tab i {
  font-size: 14px;
  opacity: 0.85;
}
.dash-tab:hover {
  color: var(--slate-900);
}
.dash-tab.is-active {
  color: var(--accent-700);
  border-bottom-color: var(--accent-500);
  font-weight: 600;
}
.dash-tab-panel {
  display: none;
}
/* FM R2-1 : panneau actif en flex pour que le graphique remplisse toute la hauteur du panel.
   La section gauche s'aligne sur la colonne droite (raccourcis+timeline) via grid-2col, donc
   le panneau peut etre plus grand que son contenu — le wrapper Chart.js doit etirer. */
.dash-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.dash-tab-panel.is-active > .dash-section-b {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Et la section gauche elle-meme doit s'etirer en hauteur pour matcher le grid item droit */
.dash-grid-2col > .dash-section {
  display: flex;
  flex-direction: column;
}

/* FM5.3 + FM5.7 (chef-FM 2026-06-12) — Limite hauteur onglets gauche
   La section gauche ne doit jamais depasser la colonne droite (raccourcis + timeline).
   Documents (.deck-list) : scroll force a max-height 350px.
   Encaissements (FM5.7) : revenu en tableau .dash-payments-table — pas de scroll.
   Le calendrier conserve sa hauteur (flex: 1 sur .dash-cal).

   FM5.7 :
   - Scrollbar 12px (etait 8) + couleur plus marquee --slate-400 pour visibilite forte.
   - Bordure thumb pour contraste sur tracks tres clairs. */
.dash-tab-panel.is-active > .deck-list {
  max-height: 350px;
  overflow-y: scroll;
  /* FM5.8 : eviter scrollbar horizontale parasite — items doc figes par largeur cadre */
  overflow-x: hidden;
  scrollbar-width: auto;
  scrollbar-color: var(--slate-400) var(--slate-100);
}
.dash-tab-panel.is-active > .deck-list::-webkit-scrollbar {
  width: 12px;
}
.dash-tab-panel.is-active > .deck-list::-webkit-scrollbar-thumb {
  background: var(--slate-400);
  border-radius: 6px;
  border: 2px solid var(--slate-100);
}
.dash-tab-panel.is-active > .deck-list::-webkit-scrollbar-thumb:hover {
  background: var(--slate-500);
}
.dash-tab-panel.is-active > .deck-list::-webkit-scrollbar-track {
  background: var(--slate-100);
  border-radius: 6px;
}

/* FM5.7 (chef-FM 2026-06-12) — Tableau encaissements simple Date/Client/Montant */
.dash-payments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.dash-payments-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--slate-500);
  padding: 8px 12px;
  border-bottom: 1px solid var(--slate-200);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.dash-payments-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-700);
}
.dash-payments-table tbody tr:last-child td {
  border-bottom: 0;
}
.dash-payments-table tbody tr:hover td {
  background: var(--slate-50);
}
.dash-payments-table .dash-pay-date {
  white-space: nowrap;
  color: var(--slate-500);
}
.dash-payments-table .dash-pay-client {
  color: var(--slate-900);
  font-weight: 500;
}
.dash-payments-table .dash-pay-amount {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-payments-table .dash-pay-amount.is-positive {
  color: var(--success-700);
}
/* FM5.8 (chef-FM 2026-06-12) — Sorties (depenses, remboursements) en rouge */
.dash-payments-table .dash-pay-amount.is-negative {
  color: var(--danger-600);
}
/* FM5.8 — lignes cliquables (redirige vers /mouvements/{id}/edit) */
.dash-payments-table .dash-pay-row {
  cursor: pointer;
}
.dash-payments-table .dash-pay-row:hover td {
  background: var(--slate-100);
}

/* FM5.7 (chef-FM 2026-06-12) — Separation visuelle entre bloc onglets et bloc plafonds.
   Le bloc Suivi des plafonds suit le bloc onglets (.dash-grid-2col) — sans marge ils
   etaient colles. 24px d'espacement reproduit la separation entre les deux cartes. */
.dash-grid-2col + .dash-section {
  margin-top: 24px;
}

/* FM5.6 (chef-FM 2026-06-12) — Encaissements dashboard utilise desormais le
   markup IDENTIQUE de mouvements/index.php. Les classes .mvt-line2-date /
   .mvt-line2-method / .mvt-line3 / .mvt-line3-spacer creees par FM5.4 sont
   supprimees (plus utilisees). Pas de regles dashboard-specifiques sur .mvt-item. */

/* ─── Graphique Chart.js ─────────────────────────────────────────────── */
.dash-chart-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 220px; /* min visible si panel court ; sinon prend toute la hauteur dispo */
}
/* FIX-035 : le canvas doit rester HORS FLUX.
   Chart.js (responsive + maintainAspectRatio:false) ecrit
   canvas.height = wrapper.clientHeight x devicePixelRatio. En flux, cette hauteur
   bitmap realimente la hauteur intrinseque du wrapper des que la colonne gauche
   pilote la hauteur de la ligne de grille (fenetre retrecie) : le graphique grandit
   alors sans borne, uniquement si devicePixelRatio > 1.
   position:absolute retire le canvas du flux -> plus aucune retroaction possible. */
#dashRevenueChart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ─── Mini-calendrier dashboard (FM hotfix 3) ─────────────────────────── */
.dash-cal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* FM5.3 (chef-FM 2026-06-12) : prend toute la hauteur du panel actif
       pour que la grille puisse s'etirer et combler le vide. */
  flex: 1;
  min-height: 0;
}
.dash-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-cal-month {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate-900);
}
/* FM R2-4 : sélecteur mois avec flèches gauche/droite + input month natif */
.dash-cal-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dash-cal-nav-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--slate-50);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.dash-cal-nav-btn:hover {
  background: var(--accent-50);
  color: var(--accent-700);
  border-color: var(--accent-200);
}
.dash-cal-month-input {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--slate-900);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
}
.dash-cal-month-input:focus {
  outline: 0;
  border-color: var(--accent-400);
  box-shadow: 0 0 0 2px var(--accent-100);
}
.dash-cal-header-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-cal-summary {
  font-size: 11.5px;
  color: var(--slate-500);
  font-variant-numeric: tabular-nums;
}
/* FM hotfix 3.9 : bouton "+ Nouvelle intervention" couleur Chef */
.dash-cal-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-500);
  color: #fff;
  border: 0;
  border-radius: var(--radius-btn);
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s ease;
}
.dash-cal-add-btn:hover {
  background: var(--accent-600);
  color: #fff;
}
.dash-cal-add-btn i {
  font-size: 13px;
}

.dash-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* FM5.3 (chef-FM 2026-06-12) : cases jour etirees pour remplir la hauteur
       disponible du panel (combler le vide en bas du calendrier). */
  grid-auto-rows: minmax(60px, 1fr);
  gap: 3px;
  flex: 1;
  min-height: 0;
}
.dash-cal-dow {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 4px;
}
.dash-cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 3px 4px;
  background: var(--slate-50);
  border-radius: 6px;
  color: var(--slate-700);
  font-size: 11px;
  text-decoration: none;
  /* FM5.3 : 60px min (etait 46) pour combler le vide bas du calendrier */
  min-height: 60px;
  overflow: hidden;
  transition: background 0.12s ease;
}
.dash-cal-day:hover {
  background: var(--slate-100);
}
.dash-cal-day.is-pad {
  background: transparent;
  pointer-events: none;
}
.dash-cal-day.is-today {
  box-shadow: inset 0 0 0 1px var(--accent-400);
  color: var(--accent-700);
  font-weight: 600;
}
.dash-cal-day.has-events {
  background: #fff;
  color: var(--slate-900);
}
.dash-cal-day-num {
  line-height: 1;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--slate-600);
  align-self: flex-end;
}
/* FM hotfix 3.8 : chips clients pastel — pattern interventions/_calendar.php (Q4 verrouille) */
.dash-cal-client-pill {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--slate-900);
  padding: 1px 4px;
  border-radius: 3px;
  margin-top: 2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-cal-client-pill.is-all-billed {
  opacity: 0.55;
}
.dash-cal-client-more {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--slate-500);
  margin-top: 1px;
  line-height: 1;
}

/* ─── Liste encaissements ────────────────────────────────────────────── */
.dash-payments-list {
  /* herite de .dash-table — surcharge si besoin */
  width: 100%;
}

/* ─── Timeline : hauteur min pour >= 3 lignes visibles ───────────────── */
.dash-timeline {
  min-height: 168px; /* ~3 lignes a 56px de hauteur effective */
}

/* ═══════════════════════════════════════════════════════════════════════
   FM hotfix 5 (chef-FM 2026-06-12) — Masquage mobile section plafonds
   Cache 3 elements sur viewport < 576px (xs Bootstrap) :
     - badge "Sous plafond" / "Attention" / "Critique" (.dash-threshold-status)
     - LABEL "Plafond :" uniquement (le montant reste visible — FM5.2)
     - badge "Maj." marqueur seuil TVA majore (badge "TVA" base conserve)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  .dash-threshold-status,
  .dash-threshold-max-label,
  .dash-tva-marker.is-majore .dash-tva-marker-flag {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FM hotfix 5.2 (chef-FM 2026-06-12) — Largeur max dashboard 1080px
   Centre le contenu du tableau de bord sur grand ecran pour eviter les
   pages excessivement larges (l'oeil suit mal au-dela de 1080px).
   .dash-page-wrap est applique sur le .container-fluid de dashboard/index.php.
   ═══════════════════════════════════════════════════════════════════════ */
.dash-page-wrap {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   CORR-DS-IMPL-4-D — Section finale (Phase 6.3 / 6.4 / 6.5)
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- 6.3 Loupe catalogue verte (chantier 3) ---- */
/* La loupe `.line-catalog` (form.php documents/ligne) passe en vert quand la
   designation est vide (suggere a l'utilisateur de cliquer pour ouvrir le
   catalogue). Depuis ACOMPTE-0-4, la condition est posee par
   toggleEmptyDesignationState() dans document-editor.js — voir
   [SYNC:VACUITE-DESIGNATION]. */
.line-catalog {
  color: var(--slate-400);
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
/* CORR-DS-IMPL-4-D FM17 : halo accent autour de la loupe quand la designation est vide
   pour mieux signaler le clic (anneau + glow). */
.line-catalog.is-empty {
  color: var(--accent-600);
  background: var(--accent-50);
  padding: 4px !important;
  box-shadow: 0 0 0 2px var(--accent-100), 0 0 6px var(--accent-300);
}
.line-catalog.is-empty:hover {
  color: var(--accent-700);
  background: var(--accent-100);
  box-shadow: 0 0 0 2px var(--accent-200), 0 0 8px var(--accent-400);
}

/* ---- 6.4 Badge SAP cliquable (chantier 7 — chef points 4+5) ---- */
/* CORR-DS-IMPL-4-D D26 : classe distincte `.line-sap-badge` pour la version
   cliquable doc-line. La classe `.sap-badge` historique (CSS L5578-5590) reste
   inchangee pour catalog/_tree_item_row.php + tests 029/068-1/CORR-DS-IMPL-4-C/8. */
.line-sap-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.line-sap-badge.is-sap {
  background: var(--accent-100);
  color: var(--accent-700);
}
.line-sap-badge.is-non-sap {
  background: var(--slate-100);
  color: var(--slate-500);
}
.line-sap-badge:hover {
  filter: brightness(0.96);
}
.line-sap-badge[disabled],
.line-sap-badge.is-locked {
  cursor: not-allowed;
  opacity: 0.5;
}
.line-sap-badge-menu {
  min-width: 120px;
}

/* ---- 6.5 Sticky header /documents page liste (chantier 9 D31) ---- */
/* CORR-DS-IMPL-4-D fix rapide : fige le titre + bouton « + Nouveau X » au scroll.
   Pattern aligne sur `.edit-header` mais z-index 80 < 90 (defense en profondeur).
   IMPORTANT : modifier `.is-sticky-top` cible UNIQUEMENT le 1er <div class="deck-page-header">
   de documents/index.php (titre+bouton). Le 2eme wrapper (banner+compteur) reste non-sticky. */
.deck-page-header.is-sticky-top {
  position: sticky;
  top: var(--header-height);
  z-index: 80;
  background: var(--surface, #fff);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--slate-200);
}

/* === Section IMPL-11 Déclarations === */
/* ====================================================================================
   === Section IMPL-11 Déclarations === — Refonte visuelle Mint hub URSSAF + TVA + NOVA
   Spec : CORR-DS-IMPL-11-declarations-urssaf-tva.md (T1 DOM/UI, fusion IMPL-12 absorbée)
   Date : 2026-06-13
   IMPORTANT (P-CSS-SCOPING-DECL v2 B4+B6) : toutes les classes nouvelles ET les overrides
   Bootstrap natifs (.nav-tabs, .btn-warning) sont scopés sous .decl-hub-page ou
   .decl-detail-page. Aucune classe générique en racine (sinon casse Clients/Ledger/etc.).
   Hex statuts en dur autorisés (B5-v2 — couleurs sémantiques figées, pas couleur Chef).
   ==================================================================================== */

/* ---- 1. Wrappers de page (scope obligatoire) ---- */
.decl-hub-page,
.decl-detail-page,
.decl-classify-page {
  background: var(--slate-50);
  min-height: 100vh;
}

/* ---- 2. Sticky header (B2-v3 + B3-v3) ---- */
.decl-hub-page .page-header,
.decl-detail-page .page-header,
.decl-classify-page .page-header {
  position: sticky;
  top: var(--header-height, 56px); /* B3-v3 : pas top: 0 */
  z-index: 30; /* < 100 pour rester sous modales */
  background: var(--slate-50);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.decl-hub-page .page-header.is-scrolled,
.decl-detail-page .page-header.is-scrolled,
.decl-classify-page .page-header.is-scrolled {
  border-bottom-color: var(--slate-200);
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.08);
}
.decl-hub-page .page-header-row,
.decl-detail-page .page-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.decl-detail-page .header-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- 3. Back button (B4 — conflit IMPL-5 résolu par scoping) ---- */
.decl-hub-page .back-btn,
.decl-detail-page .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-btn, 10px);
  background: #fff;
  border: 1px solid var(--slate-200);
  color: var(--slate-600);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.decl-hub-page .back-btn:hover,
.decl-detail-page .back-btn:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}

/* ---- 4. Page title block ---- */
.decl-hub-page .page-title-block,
.decl-detail-page .page-title-block {
  flex: 1;
  min-width: 0;
}
.decl-hub-page .page-title,
.decl-detail-page .page-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--slate-900);
  margin: 0;
  line-height: 1.3;
}
.decl-hub-page .page-subtitle,
.decl-detail-page .page-subtitle {
  font-size: 0.875rem;
  color: var(--slate-500);
  margin-top: 2px;
}

/* ---- 5. Status badge (hex sémantiques figés B5-v2) ---- */
.decl-hub-page .status-badge,
.decl-detail-page .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
/* Statut sémantique figé — pas couleur Chef */
.decl-hub-page .status-badge.is-brouillon,
.decl-detail-page .status-badge.is-brouillon {
  background: #fef3c7;
  color: #92400e;
}
.decl-hub-page .status-badge.is-pret,
.decl-detail-page .status-badge.is-pret {
  background: #dbeafe;
  color: #1e40af;
}
.decl-hub-page .status-badge.is-declared,
.decl-detail-page .status-badge.is-declared {
  background: #d1fae5;
  color: #065f46;
}
.decl-hub-page .status-badge.is-soumis,
.decl-detail-page .status-badge.is-soumis {
  background: #d1fae5;
  color: #065f46;
}
.decl-hub-page .status-badge.is-validee,
.decl-detail-page .status-badge.is-validee {
  background: #a7f3d0;
  color: #064e3b;
}
.decl-hub-page .status-badge.is-rejected,
.decl-detail-page .status-badge.is-rejected {
  background: #fee2e2;
  color: #991b1b;
}
.decl-hub-page .status-badge.is-overdue,
.decl-detail-page .status-badge.is-overdue {
  background: #fee2e2;
  color: #991b1b;
}
.decl-hub-page .status-badge.is-paid,
.decl-detail-page .status-badge.is-paid {
  background: #a7f3d0;
  color: #064e3b;
}
.decl-hub-page .status-badge.is-todo,
.decl-detail-page .status-badge.is-todo {
  background: var(--slate-100);
  color: var(--slate-600);
}
.decl-hub-page .status-badge.is-future,
.decl-detail-page .status-badge.is-future {
  background: var(--slate-50);
  color: var(--slate-400);
}

/* ---- 6. Year picker (B4 — conflit Ledger résolu par scoping) ---- */
.decl-hub-page .year-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn, 10px);
  padding: 4px 8px;
}
.decl-hub-page .year-picker select {
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--slate-700);
  padding: 4px 4px;
  cursor: pointer;
}
.decl-hub-page .year-picker select:focus {
  outline: none;
}

/* ---- 7. Onglets natifs Bootstrap habillés (DI-17 — markup natif préservé) ---- */
.decl-hub-page .nav-tabs {
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: var(--space-3);
}
.decl-hub-page .nav-tabs .nav-link {
  color: var(--slate-500);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.decl-hub-page .nav-tabs .nav-link:hover {
  color: var(--slate-700);
}
.decl-hub-page .nav-tabs .nav-link.active {
  color: var(--accent-700);
  background: transparent;
  border-bottom-color: var(--accent-500);
}
.decl-hub-page .tab-pane {
  padding-top: var(--space-3);
}

/* ---- 8. Timeline (B4 — conflit audit log résolu par scoping) ---- */
/* CORR-DS-IMPL-11 post-FM4 : retrait fond + box-shadow + padding pour éviter la bordure
   visible derrière les cards (chef-FM 2026-06-13). La timeline reste un simple wrapper
   flex column avec gap, sans habillage propre. */
.decl-hub-page .timeline {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* CORR-DS-IMPL-11 post-FM4 : périodes futures — contraste suffisant avec fond --slate-50
   en utilisant --slate-100 + opacité réduite pour bien différencier du fond. */
.decl-hub-page .timeline .card.bg-light {
  background-color: var(--slate-100, #f1f5f9) !important;
  border-color: var(--slate-200, #e2e8f0) !important;
  color: var(--slate-500, #64748b) !important;
}
.decl-hub-page .tl-row {
  display: grid;
  grid-template-columns: 200px 1fr 140px 140px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--slate-100);
}
.decl-hub-page .tl-row:last-child {
  border-bottom: none;
}
.decl-hub-page .tl-period {
  font-weight: 600;
  color: var(--slate-900);
}
.decl-hub-page .tl-meta {
  font-size: 0.875rem;
  color: var(--slate-500);
}
.decl-hub-page .tl-status {
  text-align: center;
}
.decl-hub-page .tl-amount {
  text-align: right;
  font-weight: 600;
  color: var(--slate-900);
}
.decl-hub-page .tl-action {
  text-align: right;
}
.decl-hub-page .tl-sub {
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin-top: 2px;
}

/* Mobile : empilage tl-row → tl-deck */
@media (max-width: 768px) {
  .decl-hub-page .tl-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .decl-hub-page .tl-status,
  .decl-hub-page .tl-amount,
  .decl-hub-page .tl-action {
    text-align: left;
  }
  .decl-hub-page .tl-deck {
    display: block;
  }
}

/* ---- 9. Sentinelles (alert-sentinel, alert-ecart) ---- */
.decl-hub-page .alert-sentinel,
.decl-detail-page .alert-sentinel {
  display: flex;
  gap: var(--space-3);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-card, 14px);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.decl-hub-page .alert-sentinel-icon,
.decl-detail-page .alert-sentinel-icon {
  color: #b45309;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.decl-hub-page .alert-sentinel-body,
.decl-detail-page .alert-sentinel-body {
  flex: 1;
}
.decl-hub-page .alert-sentinel-title,
.decl-detail-page .alert-sentinel-title {
  font-weight: 600;
  color: #78350f;
  margin-bottom: 4px;
}
.decl-hub-page .alert-sentinel-text,
.decl-detail-page .alert-sentinel-text {
  font-size: 0.875rem;
  color: #92400e;
}
.decl-hub-page .alert-sentinel-action,
.decl-detail-page .alert-sentinel-action {
  margin-top: var(--space-2);
}

.decl-detail-page .alert-ecart,
.decl-hub-page .alert-ecart {
  display: flex;
  gap: var(--space-3);
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--radius-card, 14px);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.decl-detail-page .alert-ecart-icon {
  color: #f59e0b;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.decl-detail-page .alert-ecart-body {
  flex: 1;
}
.decl-detail-page .alert-ecart-title {
  font-weight: 600;
  color: #78350f;
  margin-bottom: 4px;
}
.decl-detail-page .alert-ecart-text {
  font-size: 0.875rem;
  color: #92400e;
}
.decl-detail-page .alert-ecart-meta {
  font-size: 0.8125rem;
  color: #92400e;
  margin-top: 4px;
  opacity: 0.8;
}
.decl-detail-page .alert-ecart-action {
  margin-top: var(--space-2);
}

/* ---- 10. CTA Déclarer (couleur Chef accent) ---- */
.decl-detail-page .cta-declarer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-card, 14px);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.decl-detail-page .cta-icon {
  color: var(--accent-600);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.decl-detail-page .cta-body {
  flex: 1;
}
.decl-detail-page .cta-title {
  font-weight: 600;
  color: var(--slate-900);
}
.decl-detail-page .cta-sub {
  font-size: 0.875rem;
  color: var(--slate-500);
  margin-top: 2px;
}
.decl-detail-page .cta-action {
  flex-shrink: 0;
}
.decl-detail-page .btn-primary-chef {
  background: var(--accent-500);
  color: #fff;
  border: 1px solid var(--accent-500);
  border-radius: var(--radius-btn, 10px);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  transition: background 0.15s ease;
  cursor: pointer;
  white-space: normal; /* FM32 fallback i18n RU */
}
.decl-detail-page .btn-primary-chef:hover {
  background: var(--accent-600);
}
.decl-detail-page .btn-primary-chef.is-lg {
  padding: var(--space-3) var(--space-5);
  font-size: 1.0625rem;
}

/* ---- 11. Banner is-success (collapsible) ---- */
.decl-detail-page .banner {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card, 14px);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.decl-detail-page .banner.is-success {
  background: #d1fae5;
  border-color: #6ee7b7;
}
.decl-detail-page .banner-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.decl-detail-page .banner-icon {
  color: #065f46;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.decl-detail-page .banner-title-block {
  flex: 1;
}
.decl-detail-page .banner-title {
  font-weight: 600;
  color: #064e3b;
}
.decl-detail-page .banner-meta {
  font-size: 0.875rem;
  color: #065f46;
  margin-top: 2px;
}
.decl-detail-page .banner-chevron {
  color: #065f46;
  transition: transform 0.15s ease;
}
.decl-detail-page .banner-body {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid #6ee7b7;
}
.decl-detail-page .b-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid #6ee7b7;
}
.decl-detail-page .b-row:last-child {
  border-bottom: none;
}
.decl-detail-page .b-label {
  color: #065f46;
}
.decl-detail-page .b-value {
  font-weight: 600;
  color: #064e3b;
}
.decl-detail-page .b-actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
}
.decl-detail-page .b-action.is-danger {
  color: #991b1b;
  background: transparent;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-btn, 10px);
  padding: var(--space-1) var(--space-3);
}

/* ---- 12. Card Mint (override général scopé) ---- */
.decl-detail-page .card,
.decl-hub-page .card,
.decl-classify-page .card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card, 14px);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(15, 23, 42, 0.04));
  overflow: hidden;
}
.decl-detail-page .card-h,
.decl-hub-page .card-h {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--slate-100);
  font-weight: 600;
  color: var(--slate-900);
}
.decl-detail-page .card-h-icon {
  color: var(--accent-600);
  font-size: 1.125rem;
}
.decl-detail-page .card-h-amount {
  margin-left: auto;
  font-weight: 700;
  font-size: 1.0625rem;
}
.decl-detail-page .card-h-link {
  margin-left: auto;
}
.decl-detail-page .card-h-spacer {
  flex: 1;
}
.decl-detail-page .card-b,
.decl-hub-page .card-b {
  padding: var(--space-3) var(--space-4);
}

/* ---- 13. Cotis & TVA tables ---- */
.decl-detail-page .cotis-table,
.decl-detail-page .tva-table {
  width: 100%;
  font-size: 0.9375rem;
}
.decl-detail-page .cotis-table th,
.decl-detail-page .tva-table th {
  text-align: left;
  color: var(--slate-500);
  font-weight: 500;
  padding: var(--space-2);
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--slate-100);
}
.decl-detail-page .cotis-table td,
.decl-detail-page .tva-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-700);
}
.decl-detail-page .cotis-table tr:last-child td,
.decl-detail-page .tva-table tr:last-child td {
  border-bottom: none;
}
.decl-detail-page .rate-cell {
  text-align: center;
}
.decl-detail-page .rate-badge {
  background: var(--slate-100);
  color: var(--slate-600);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---- 14. VT subsection (biens/services exigibilité — O4-v3) ---- */
.decl-detail-page .vt-subsection {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--slate-100);
}
.decl-detail-page .vt-subsection:first-of-type {
  border-top: none;
}
.decl-detail-page .vt-sub-header {
  margin-bottom: var(--space-2);
}
.decl-detail-page .vt-sub-title {
  font-weight: 600;
  color: var(--slate-800);
  font-size: 0.9375rem;
}
.decl-detail-page .vt-sub-exigibilite {
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin-top: 2px;
  font-style: italic;
}

/* ---- 15. Mouvements section (collapsible) ---- */
.decl-detail-page .mvts-section {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card, 14px);
  overflow: hidden;
}
.decl-detail-page .mvts-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.decl-detail-page .mvts-icon {
  color: var(--accent-600);
}
.decl-detail-page .mvts-group {
  border-top: 1px solid var(--slate-100);
}
.decl-detail-page .mvts-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--slate-50);
  font-size: 0.875rem;
}
.decl-detail-page .mvts-group-nat {
  font-weight: 600;
  color: var(--slate-700);
}
.decl-detail-page .mvts-group-count {
  color: var(--slate-500);
}
.decl-detail-page .mvts-group-total {
  margin-left: auto;
  font-weight: 600;
  color: var(--slate-900);
}
.decl-detail-page .mvts-list {
  padding: 0;
}
.decl-detail-page .mvts-item {
  display: grid;
  grid-template-columns: 120px 1fr 100px 80px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  align-items: center;
  border-top: 1px solid var(--slate-100);
}
.decl-detail-page .mvts-date {
  font-size: 0.8125rem;
  color: var(--slate-500);
}
.decl-detail-page .mvts-desc {
  color: var(--slate-700);
}
.decl-detail-page .mvts-amt {
  text-align: right;
  font-weight: 600;
  color: var(--slate-900);
}
.decl-detail-page .mvts-rate {
  text-align: center;
  color: var(--slate-500);
  font-size: 0.8125rem;
}
@media (max-width: 768px) {
  .decl-detail-page .mvts-item {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
}

/* ---- 16. Guide (steps + recap) ---- */
.decl-detail-page .guide {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card, 14px);
  overflow: hidden;
}
.decl-detail-page .guide-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.decl-detail-page .guide-icon {
  color: var(--accent-600);
}
.decl-detail-page .guide-title {
  flex: 1;
  font-weight: 600;
  color: var(--slate-900);
}
.decl-detail-page .guide-chevron {
  color: var(--slate-400);
}
.decl-detail-page .guide-content {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--slate-100);
}
.decl-detail-page .guide-step {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.decl-detail-page .guide-step-num {
  background: var(--accent-100);
  color: var(--accent-700);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.decl-detail-page .guide-step-body {
  flex: 1;
}
.decl-detail-page .guide-step-title {
  font-weight: 600;
  color: var(--slate-800);
}
.decl-detail-page .guide-step-text {
  font-size: 0.875rem;
  color: var(--slate-600);
  margin-top: 2px;
}
.decl-detail-page .guide-recap {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--slate-100);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.decl-detail-page .guide-recap-label {
  color: var(--slate-500);
  font-size: 0.875rem;
}
.decl-detail-page .guide-recap-val {
  font-weight: 600;
  color: var(--slate-900);
}

/* ---- 17. Historique timeline ---- */
.decl-detail-page .hist-timeline {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card, 14px);
  padding: var(--space-3) var(--space-4);
}
.decl-detail-page .hist-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  position: relative;
}
.decl-detail-page .hist-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--slate-300);
  flex-shrink: 0;
  margin-top: 6px;
}
.decl-detail-page .hist-dot.is-success {
  background: #10b981;
}
.decl-detail-page .hist-dot.is-warning {
  background: #f59e0b;
}
.decl-detail-page .hist-dot.is-danger {
  background: #ef4444;
}
.decl-detail-page .hist-body {
  flex: 1;
}
.decl-detail-page .hist-title {
  font-weight: 600;
  color: var(--slate-800);
}
.decl-detail-page .hist-meta {
  font-size: 0.8125rem;
  color: var(--slate-500);
}
.decl-detail-page .hist-time {
  font-size: 0.8125rem;
  color: var(--slate-400);
}

/* ---- 18. Footer actions ---- */
.decl-detail-page .footer-actions {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--slate-200);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- 19. Overrides Bootstrap btn-warning (B6 — scoping détail uniquement) ---- */
/* Warning métier figé : Re-préparer / Annuler+recalculer (lié à $has_ecart) */
.decl-detail-page .btn-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.decl-detail-page .btn-warning:hover {
  background: #fde68a;
  color: #78350f;
}

/* ---- 20. Btn ghost / variantes secondaires ---- */
.decl-hub-page .btn-ghost,
.decl-detail-page .btn-ghost {
  background: transparent;
  color: var(--slate-600);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn, 10px);
  padding: var(--space-1) var(--space-3);
}
.decl-hub-page .btn-ghost:hover,
.decl-detail-page .btn-ghost:hover {
  background: var(--slate-100);
}

/* ---- 21. Disclaimer ---- */
.decl-detail-page .disclaimer {
  font-size: 0.8125rem;
  color: var(--slate-500);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn, 10px);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

/* ---- 22. Toolbar (hub) ---- */
.decl-hub-page .toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* ---- 23. Mobile responsive page-header ---- */
@media (max-width: 768px) {
  .decl-hub-page .page-header,
  .decl-detail-page .page-header {
    padding: var(--space-2) var(--space-3);
  }
  .decl-detail-page .header-actions-row {
    gap: var(--space-2);
  }
  .decl-detail-page .cta-declarer {
    flex-direction: column;
    align-items: stretch;
  }
  .decl-detail-page .footer-actions {
    flex-direction: column;
  }
}

/* === [IMPL-11-END] Fin Section IMPL-11 Déclarations === */

/* === Section IMPL-13 NOVA + decl-wrap ===
   Refonte visuelle onglet NOVA (Couleur Chef A/B/F) + largeur 1080 px
   uniforme sur tout le domaine declarations (hub + 4 vues detail + 2 guides
   + classify). Wrapper partage .decl-page-wrap aligne avec convention
   .cl-page-wrap (clients) / .mvt-page-wrap (mouvements) / .dash-page-wrap
   (dashboard) / .show-wrap (documents).

   Imbrication OBLIGATOIRE (audit B2/B3 v3) :
       .decl-hub-page | .decl-detail-page | .decl-classify-page  -- fond slate-50 full-bleed
           .decl-page-wrap                                       -- 1080 centre
               ...
   Si on inversait, le fond slate-50 serait limite a 1080 -> bandes blanches
   <body> sur ecran > 1080 (regression visuelle directe).

   Materialise les ~27 classes .nova-* references dans les vues PHP (sans
   CSS depuis suppression nova-guide.css par IMPL-1). Tokens DS :
       - Couleur Chef : --accent-* (CTA, badges, titres)
       - Palette figee rouge : .nova-num-red, .nova-cell (capture portail)
       - Palette figee mauve DSFR : .tr-primary, .tr-info (miroir verbatim)
       - Palette figee grise : boutons illustratifs replique portail
   ============================================================ */

/* --- Wrapper largeur 1080 (partage domaine declarations + heritage guides NOVA) --- */
.decl-page-wrap,
.nova-guide-wrap {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

/* --- Guides EMA + TSA (nova_guide.php + nova_tsa_guide.php) --- */
.nova-guide-wrap {
  padding: var(--space-4) var(--space-5) var(--space-6);
}

.nova-guide-step {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.nova-guide-step img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  margin-top: var(--space-3);
  display: block;
}

.nova-guide-missing {
  background: var(--slate-50);
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius-btn);
  padding: var(--space-3);
  margin-top: var(--space-3);
  color: var(--slate-500);
  font-style: italic;
  text-align: center;
}

.nova-guide-foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--slate-200);
  color: var(--slate-500);
  font-size: 12px;
  text-align: center;
}

.nova-step-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-700);
  margin: 0 0 var(--space-2);
}

.nova-step-num {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  margin-right: var(--space-2);
  background: var(--accent-50);
  color: var(--accent-700);
  border-radius: 14px;
  font-weight: 700;
  font-size: 12.5px;
  vertical-align: middle;
}

/* Sentinelles [[N]] capture portail : palette ROUGE FIGEE (miroir capture) */
.nova-num-red {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 11px;
  font-weight: 700;
  font-size: 11.5px;
  vertical-align: middle;
}

.nova-portal-cta {
  text-align: center;
  margin: var(--space-4) 0;
}

/* --- Replique formulaire portail (mode='app' + mode='guide') --- */
.nova-replica {
  background: #fff;
  border: 2px solid var(--slate-300);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-card);
}

.nova-replica-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-700);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--slate-200);
}

.nova-replica-identity {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-btn);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.nova-replica-badges {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.nova-replica-id-lines {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--slate-700);
}

.nova-replica-id-lines strong {
  color: var(--slate-900);
}

.nova-replica-mode {
  background: var(--accent-50);
  color: var(--accent-700);
  border: 1px solid var(--accent-200);
  padding: 4px 12px;
  border-radius: var(--radius-btn);
  display: inline-block;
  font-weight: 600;
  font-size: 12.5px;
  margin-bottom: var(--space-3);
}

.nova-replica-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.nova-replica-table th,
.nova-replica-table td {
  border: 1px solid var(--slate-300);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

.nova-replica-table thead th {
  background: var(--slate-100);
  color: var(--slate-700);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.nova-replica-table tbody td {
  background: #fff;
}

.nova-replica-month {
  background: var(--slate-50);
  font-weight: 600;
  color: var(--slate-700);
}

.nova-replica-caption {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate-900);
  padding: var(--space-2) 0;
}

.nova-replica-h {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  margin: var(--space-4) 0 var(--space-2);
}

.nova-replica-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Cellule SAISIE rouge (miroir capture portail -- palette FIGEE) */
.nova-cell {
  display: inline-block;
  min-width: 50px;
  padding: 4px 10px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px dashed #fca5a5;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Cellule INFO (non saisissable, auto-calculee) -- slate doux */
.nova-info-cell {
  background: var(--slate-50);
  color: var(--slate-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Badges EMA/TSA replique (Couleur Chef) */
.nova-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-500);
  color: #fff;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nova-badge-soft {
  background: var(--accent-50);
  color: var(--accent-700);
  border: 1px solid var(--accent-200);
}

/* Boutons illustratifs replique portail (non interactifs, miroir visuel -- palette FIGEE) */
.nova-link-btn,
.nova-ghost-btn,
.nova-primary-btn {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-btn);
  font-size: 12.5px;
  font-weight: 600;
  user-select: none;
  cursor: default;
}

.nova-link-btn {
  color: #2563eb;
  background: transparent;
  text-decoration: underline;
}

.nova-ghost-btn {
  color: #475569;
  background: #fff;
  border: 1px solid #cbd5e1;
}

.nova-primary-btn {
  color: #fff;
  background: #2563eb;
  border: 1px solid #1d4ed8;
}

/* Lignes d'en-tete tableaux TSA (mode='guide') -- palette FIGEE mauve DSFR
   Miroir verbatim du portail externe (D-PALETTE-1 v3 verrouillee).
   NON Chef-variant : la replique sert d'illustration verbatim. */
.nova-replica-table tr.tr-primary td,
.tr-primary td {
  background: #ede9fe;
  color: #5b21b6;
  font-weight: 700;
}

.nova-replica-table tr.tr-info td,
.tr-info td {
  background: #ddd6fe;
  color: #4c1d95;
  font-weight: 600;
}

/* --- Impression (Ctrl+P guides) --- */
@media print {
  .nova-guide-noprint {
    display: none !important;
  }
  .nova-guide-step {
    box-shadow: none;
    border-color: var(--slate-300);
    page-break-inside: avoid;
  }
  .decl-page-wrap,
  .nova-guide-wrap {
    max-width: 100%;
  }
}

/* --- Responsive mobile --- */
@media (max-width: 640px) {
  .decl-page-wrap {
    padding: 0 var(--space-2);
  }
  .nova-guide-wrap {
    padding: var(--space-3) var(--space-3) var(--space-5);
  }
  .nova-guide-step {
    padding: var(--space-3);
  }
  .nova-replica {
    padding: var(--space-3);
  }
  .nova-replica-table th,
  .nova-replica-table td {
    padding: 6px 8px;
    font-size: 12px;
  }
  .nova-replica-actions {
    justify-content: stretch;
  }
  .nova-replica-actions > * {
    flex: 1;
    text-align: center;
  }
}

/* --- Hotfix FM (capture 3Capture.PNG, 2026-06-14) :
       remplace bleu Bootstrap par Couleur Chef sur show_nova.php
       (header carte recap + lien collapse historique). --- */

/* Header de carte Couleur Chef (remplace Bootstrap .bg-primary.text-white) */
.card-header-chef {
  background: var(--accent-500);
  color: #fff;
  border-bottom: 1px solid var(--accent-600);
}
.card-header-chef h5,
.card-header-chef h6,
.card-header-chef .card-title {
  color: #fff;
}

/* Bouton-lien Couleur Chef (remplace Bootstrap .btn-link bleu primary) */
.btn.chef-link,
.btn.chef-link:focus,
a.chef-link,
a.chef-link:focus {
  color: var(--accent-700);
  text-decoration: none;
}
.btn.chef-link:hover,
a.chef-link:hover {
  color: var(--accent-600);
}
.btn.chef-link .bi-chevron-down,
.btn.chef-link .bi-chevron-up {
  color: var(--accent-700);
}

/* === [IMPL-13-END] Fin Section IMPL-13 NOVA + decl-wrap === */

/* === Section IMPL-14 Attestations (sandbox : décision en route) === */
/* Refonte visuelle pure T1 (D12 : liste = pattern .deck-doc-item IMPL-4-A — réutilisation max).
   Classes propres minimales : page-wrap + preview + wizard-stepper + recap-table + helpers.
   Statut attestation = .deck-status .s-finalise / .s-cancelled (déjà DS L5034-5035, D15). */

.att-page-wrap {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

/* [SYNC:ATT_RECAP_STYLE] — Jumeau : AttestationPdfService::_table() (rendu FPDF du même
   tableau d'attestation). FPDF ne lit pas ce CSS : il réplique ces styles en RGB dur.
   Toute modification de .att-paye / .att-soft / .att-recap-table ci-dessous impose de
   vérifier le jumeau PHP, et réciproquement.
   ⚠️ DIVERGENCE CONSTATÉE 2026-07-10 (non corrigée — corriger changerait le rendu PDF) :
   les hex du PDF datent de 031-3a et n'ont pas suivi la tokenisation IMPL-14.
     .att-paye   CSS var(--slate-900) #0f172a  ≠  PDF #1b2733
     .att-soft   CSS var(--slate-400) #94a3b8  ≠  PDF #9098a1
     thead th    CSS var(--slate-600) #475569  ≠  PDF #7a828c
     filets      CSS var(--slate-200) #e2e8f0  ≠  PDF #dde1e6 / #eef0f3
     tfoot       CSS sans fond                 ≠  PDF fond vert #d1e7dd
   Décision d'alignement à trancher dans une spec dédiée. */

/* D6 — Montant clé en valeur (total payé SAP, montants finaux) */
.att-paye {
  color: var(--slate-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* D7 — Données contextuelles discrètes */
.att-soft {
  color: var(--slate-400);
  font-variant-numeric: tabular-nums;
}

/* D3 — Aperçu document type "papier officiel" (distinct de la card conteneur) */
.att-preview-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 1.5rem;
  font-size: 0.875rem;
}
.att-preview-card h2 {
  letter-spacing: 0.04em;
}

/* D2 — Stepper wizard 3 étapes (indicateur textuel) */
.att-wizard-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin-bottom: 1rem;
}
.att-wizard-stepper .step-num {
  font-weight: 600;
  color: var(--accent-600);
}

/* Phase 5-E — Recap table (aperçu document) */
.att-recap-table {
  width: 100%;
  border-collapse: collapse;
}
.att-recap-table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-600);
  border-bottom: 2px solid var(--slate-200);
}
.att-recap-table tfoot {
  font-weight: 600;
  border-top: 2px solid var(--slate-200);
}

/* FIX-036 — `.filter-link.is-active` (variant créé ici par IMPL-14 pour la barre
   `_invoices_filter_bar.php`) SUPPRIMÉE : ce partial adopte désormais `.deck-tab`.
   `.filter-link` (base) et `.filter-link.is-open` restent en place — encore consommées
   par `mouvements/index.php`. */

/* === Fin Section IMPL-14 Attestations === */

/* ════════════════════════════════════════════════════════════════
 * Spec 109-1septies — Croix de suppression d'asset image (logo)
 * Composant reutilisable : /settings/company (vignette logo) et
 * /settings/style (#dropLogo). Charge globalement (app.php/auth.php/
 * public-form.php) car company.php utilise le layout standard.
 * ════════════════════════════════════════════════════════════════ */
.asset-thumb-wrap {
  position: relative;
  display: inline-block;
}

.asset-remove-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.asset-remove-btn:hover {
  background: #b91c1c;
}
.asset-remove-btn:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* === Fin Section 109-1septies === */

/* === Section TVA-002-9 — chevrons des blocs dépliables === */
/* Cette règle vivait dans un <style> inline de Views/declarations/show.php.
   Cette vue fait `include tva-detail.php` PUIS `return` sur une déclaration de
   TVA : le style n'en sortait jamais. Et declarations/index.php n'inclut pas
   show.php du tout. Trois chevrons restaient donc figés depuis l'origine —
   règle silencieusement morte (pattern P25). */
[data-bs-toggle="collapse"] .collapse-chevron {
  transition: transform 0.2s ease-in-out;
}
[data-bs-toggle="collapse"][aria-expanded="true"] .collapse-chevron {
  transform: rotate(180deg);
}

/* === Fin Section TVA-002-9 === */

/* === Section EINV-4-5 — le bloc « Vérifier dans l'annuaire » === */
/* Retour de test manuel du chef (2026-08-13, capture 25) : le bouton et sa réponse
   flottaient entre deux champs, sans rien qui dise à quel champ ils appartenaient —
   et le texte d'avertissement, en `text-warning` de Bootstrap (#ffc107 sur blanc),
   était illisible. Ce bloc rattache l'ensemble au champ qui le précède, et prend ses
   couleurs dans les jetons du DS, dont le brun `--warning-700` prévu pour du texte. */
.einv-directory {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--slate-300, #cbd5e1);
  background: var(--slate-50, #f8fafc);
  border-radius: 0 6px 6px 0;
}
.einv-directory-aide {
  /* La taille et l'italique vivent plus bas, sous « .form-client » : les répéter ici
       donnait une déclaration morte — écrasée par la spécificité supérieure, qui gagne
       toujours puisque ce composant est toujours inclus sous ce conteneur. */
  color: var(--slate-600);
  margin-top: 6px;
}
.einv-directory-msg {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
}
/* Le champ vit DANS l'encadre (capture 26) : il lui faut son air au-dessus, et
   l'explication du champ ferme le bloc sans marge inutile. */
.einv-directory .form-control {
  margin-top: 10px;
}
/* Mise en bloc pour TOUS les contextes : réservée au seul encadré, la même explication
   sautait de 4 px selon qu'un réglage invisible affichait ou non le bouton. */
.form-client-aide {
  display: block;
  margin-top: 4px;
}
/* Les trois tons rendus par le serveur (`ton` de la réponse), jamais décidés en JS. */
.einv-directory-msg.is-succes {
  color: var(--success-700);
  font-weight: 600;
}
.einv-directory-msg.is-attention {
  color: var(--warning-700);
  font-weight: 600;
}
.einv-directory-msg.is-neutre {
  color: var(--slate-600);
}
.einv-directory-msg .einv-directory-nom {
  color: var(--slate-600);
  font-weight: 400;
}

/* === Fin Section EINV-4-5 === */

/* === Section EINV-4-5 (2) — typographie du formulaire client === */
/* Retour de test manuel du chef (2026-08-13) : titres de champs en gras, et les DEUX
   lignes d'explication (sous le bouton d'annuaire, sous le champ d'adresse électronique)
   plus petites et en italique — pour qu'elles se distinguent au premier coup d'œil de la
   RÉPONSE de l'annuaire, qui, elle, ne change pas.
   ⚠️ La classe est portée par le CONTENEUR de ce formulaire — `clients/form.php` et la
   création rapide, les deux hôtes du même composant. Jamais `.form-label` en global :
   ce sélecteur vit dans toute l'application. */
.form-client .form-label {
  font-weight: 600;
}
/* 🔴 EINV-0-6 (`DC6`) — L'ENCADRÉ VIT MAINTENANT SUR UN TROISIÈME ÉCRAN, QUI N'A PAS
   CET ANCÊTRE. La fiche entreprise (`settings/company.php`) ne porte pas `.form-client`
   — les deux lignes ci-dessous n'y seraient donc **jamais** appliquées, et personne ne
   l'aurait vu : une règle qui ne s'applique pas ne casse rien, elle rend seulement un
   écran différent de son jumeau. Trouvé par l'audit du PLAN, pas à l'œil.

   ⛔ **Deux voies écartées, et il faut savoir pourquoi.**
   (a) Rendre ces règles indépendantes de `.form-client` : la garde `G23` d'`EINV-4-5`
       EXIGE qu'elles restent portées par lui — elle rougirait à coup sûr.
   (b) Donner `.form-client` à la fiche entreprise : cela importerait aussi
       `.form-client .form-label` ci-dessus, donc le **gras sur tous les titres** de
       cette page — un changement visuel que personne n'a demandé.
   ➜ On **étend la portée** par un second sélecteur, en laissant `.form-client` intact. */
/* ⚠️ `.einv-directory` est CONDITIONNELLE au bouton — donc absente quand les appels
   sont désactivés, qui est le réglage par défaut. Sans le troisième porteur
   ci-dessous, la même phrase d'aide sortirait en italique 11,5 px sur la fiche
   client et en taille normale sur la fiche entreprise : exactement la divergence
   que ce bloc corrige, dans le cas qu'il n'avait pas couvert.
   *(Revue à l'aveugle, finding `F7`.)* */
.form-client .form-client-aide,
.form-client .einv-directory-aide,
.einv-directory-host .form-client-aide,
.einv-directory-host .einv-directory-aide,
.einv-directory .form-client-aide,
.einv-directory .einv-directory-aide {
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.4;
}
/* La réponse de l'annuaire garde sa taille et son poids : le chef l'a explicitement
   exclue de cette passe (« la réponse qu'on reçoit, on ne la touche pas »). */

/* === Fin Section EINV-4-5 (2) === */

/* === Section EINV-0-5 — l'état de vérification de l'entreprise === */

/* Le bandeau vit sur l'écran « votre compte est relié ». Les quatre tons sont rendus
   par le SERVEUR (`ton` de la réponse), jamais décidés en JS : un renommage côté PHP
   laisserait sinon le bandeau gris sans qu'aucune vérification ne rougisse. */
.einv-kyb {
  border-left: 3px solid var(--slate-300, #cbd5e1);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  background: var(--slate-50, #f8fafc);
  font-size: 14px;
  line-height: 1.5;
}
.einv-kyb.is-succes {
  border-left-color: var(--success-700);
}
.einv-kyb.is-attente {
  border-left-color: var(--warning-700);
}
.einv-kyb.is-refus {
  border-left-color: var(--danger-700, #b91c1c);
}
.einv-kyb.is-neutre {
  border-left-color: var(--slate-300, #cbd5e1);
}

/* === Fin Section EINV-0-5 === */

/* =====================================================================
   Section EINV-5-2 — Factures electroniques RECUES (hub, liste, detail)
   Spec         : specs/EINV-5-2-le-hub-la-liste-le-detail.md
   Type         : T1 DOM/UI (largeur de page uniquement)
   Date         : 2026-08-17

   🔴 UNE SEULE regle, et une seule raison d'exister : BORNER LA LARGEUR.
      Sans elle, la liste des factures recues s'etalait sur toute la largeur de
      l'ecran, alors que les listes du produit sont bornees a 1080 px et centrees
      (retour du chef, 2026-08-17).

   ⚠️ POURQUOI UNE CLASSE NEUVE, et non une classe existante :
      · `.deck-page-header` porte deja cette borne, mais un controle d'isolation
        transverse (`CORR-DS-IMPL-4-D`, STKLI5) lui INTERDIT toute autre vue que
        celle des documents — mesure : l'employer ici faisait rougir la suite ;
      · `.show-wrap` porte la meme borne, mais son nom designe le DETAIL d'un
        document : la detourner pour une liste rendrait le CSS trompeur a lire.
      ➜ La borne reste la MEME valeur que les NEUF autres enveloppes de page du
        produit (mesure : 10 declarations de `max-width: 1080px` dans ce fichier,
        celle-ci comprise — .mvt-page-wrap, .deck-list, .deck-toolbar,
        .deck-empty-state, .deck-page-header, .show-wrap, .dash-page-wrap,
        .decl-page-wrap, .att-page-wrap). C'est la largeur de reference des pages
        du produit, pas un chiffre invente ici, et une classe par domaine est la
        convention deja suivie neuf fois.
      ⚠️ Le commentaire disait « les deux autres » : chiffre FAUX, corrige apres
        re-revue a l'aveugle. Un compte ecrit de memoire n'est pas une mesure.
   ===================================================================== */

.einv-wrap {
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* === Fin Section EINV-5-2 === */

/* ===========================================================================
   Section EINV-5-4 — LA NOUVEAUTÉ QUI SE VOIT
   ---------------------------------------------------------------------------
   Les factures que la vérification vient de ramener se distinguent des anciennes
   JUSQU'AU PROCHAIN RECHARGEMENT de la page (`RP12`). Forme dessinée et validée
   par le chef sur la maquette `_tmp_maquette_EINV-5-2.html`.

   ⛔ PULSATION TROIS FOIS, JAMAIS UN CLIGNOTEMENT CONTINU : il fatigue, et il gêne
      les personnes sensibles au mouvement.
   =========================================================================== */

/* 🔴 LE CONTOUR DE LA LIGNE CLIGNOTE TROIS FOIS, EN COULEUR CHEF.
   🖋️ Demandé par le chef le 2026-08-19, sur capture : la première version teintait
      le fond en BLEU BOOTSTRAP avec un filet à gauche — « pas trop fantastique », et
      surtout ce n'était ni la bonne couleur ni la bonne forme.
   ⚠️ La couleur chef est `--accent-500`, jamais `--bs-primary` : c'est celle du bouton
      d'action, et elle suit le thème (elle change en mode sombre et sur les variantes). */

/* Le contour d'une LIGNE de tableau se dessine sur ses cellules : `border` sur un
   `<tr>` est ignoré en `border-collapse`, et `outline` déborde des coins arrondis. */
.einv-row-new > td {
  animation: einvBlinkNew 0.7s ease-in-out 3;
  animation-fill-mode: forwards;
}

.einv-row-new > td:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.einv-row-new > td:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Trois battements, puis le contour RESTE : la ligne doit se retrouver d'un coup d'œil
   jusqu'au prochain rechargement, pas seulement pendant deux secondes. */
@keyframes einvBlinkNew {
  0%,
  100% {
    box-shadow: inset 0 2px 0 var(--accent-500),
      inset 0 -2px 0 var(--accent-500);
  }
  50% {
    box-shadow: inset 0 2px 0 transparent, inset 0 -2px 0 transparent;
  }
}

/* Les deux bouts du contour, pour que le trait fasse le tour et non deux barres. */
.einv-row-new > td:first-child {
  border-left: 2px solid var(--accent-500);
}
.einv-row-new > td:last-child {
  border-right: 2px solid var(--accent-500);
}

/* Sur téléphone, la ligne est un bloc : le contour s'y dessine d'un seul trait. */
a.einv-row-new,
.list-group-item.einv-row-new {
  border: 2px solid var(--accent-500);
  border-radius: 6px;
  animation: einvBlinkCarte 0.7s ease-in-out 3;
  animation-fill-mode: forwards;
}

@keyframes einvBlinkCarte {
  0%,
  100% {
    border-color: var(--accent-500);
  }
  50% {
    border-color: transparent;
  }
}

/* La pastille en tête de ligne : elle dit « celle-ci vient d'arriver ». */
.einv-newdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-100);
  margin-right: 6px;
  vertical-align: middle;
}

/* 🔴 AUCUNE ANIMATION quand le système demande à réduire les mouvements.
      Le CONTOUR, lui, reste posé : l'information ne se perd pas, seul le battement
      disparaît. C'est ce que `prefers-reduced-motion` demande — pas de cacher la
      nouveauté aux personnes que le mouvement gêne. */
@media (prefers-reduced-motion: reduce) {
  .einv-row-new,
  .einv-row-new > td {
    animation: none;
  }

  .einv-row-new > td {
    box-shadow: inset 0 2px 0 var(--accent-500),
      inset 0 -2px 0 var(--accent-500);
  }
}

/* === Fin Section EINV-5-4 === */

/* ============================================================
   Section EINV-5-3 — RÉPONDRE À SON FOURNISSEUR
   🖋️ Chef, 2026-08-20, sur capture annotée :
   « Le trait entre les actions en attente et la description de la facture est le
     même qu'entre deux factures, de quoi on peut se poser la question : c'est quoi
     cette ligne avec le bouton, à qui elle se réfère ? Je voudrais séparer les
     factures entre elles, qu'elles soient des blocs séparés avec une toute petite
     séparation, plutôt qu'un seul bloc entier avec des séparations juste entre les
     lignes. »
   ============================================================ */

/* Une facture = un `<tbody class="einv-groupe">`, donc un BLOC. La ligne d'actions
   appartient au même groupe que sa facture : plus aucun doute sur ce qu'elle vise. */

/* ⓵ Plus de trait À L'INTÉRIEUR d'un groupe : la ligne d'actions est collée à sa
      facture, comme un sous-titre l'est à son titre. */
.einv-groupe > tr + tr > td {
  border-top: 0;
}

/* ⓶ La séparation vit ENTRE les groupes, et elle est franche — c'est elle qui dit
      « ici commence une autre facture ». Posée sur la première cellule du groupe
      suivant : `border-collapse` de Bootstrap ignore une bordure posée sur `tbody`. */
.einv-groupe + .einv-groupe > tr:first-child > td {
  border-top: 3px solid var(--slate-100, #f1f5f9);
}

/* ⓷ Le survol suit le GROUPE, pas la ligne : survoler les boutons ne doit pas
      détacher visuellement la ligne d'actions de sa facture. */
.table-hover > .einv-groupe:hover > tr > td {
  background-color: var(--slate-50, #f8fafc);
}

/* ⓸ Sur téléphone, même intention : des cartes séparées plutôt qu'une liste continue.
      ⚠️ `list-group-flush` retire les bordures extérieures — on redonne donc l'écart
      entre cartes, pas une bordure de plus. */
.einv-cartes > .list-group-item + .list-group-item {
  border-top: 3px solid var(--slate-100, #f1f5f9);
}

/* === Fin Section EINV-5-3 === */

/* 🖋️ Chef, 2026-08-20 : « Les boutons dans la liste sont toujours trop grands,
   diminue le texte du bouton, qu'il soit à la même taille que le titre de la ligne. »

   🔬 MESURÉ AVANT DE TOUCHER : le bouton était DÉJÀ plus petit que le nom du fournisseur
   (14 px contre 16). Ce qui le faisait dominer n'était pas sa police, c'était son fond
   plein, son épaisseur de trait et sa hauteur. On agit donc sur les trois.

   ⚠️ Par les variables de Bootstrap, jamais en forçant : le bouton garde ses états
   (survol, focus, désactivé) et suivra une mise à jour du cadre sans rien casser.
   ⚠️ MAJ le même jour, sur second essai du chef : « pour la version portable, ça n'a
   rien changé, fais pareil. » ➜ La classe est désormais posée SUR LES DEUX RENDUS.
   ÉCART ASSUMÉ à la cible tactile de 44 px que le chantier s'était fixée — décision du
   chef, prise après avoir vu l'écran, et figée par le contrôle V2 bis pour que personne
   ne la « corrige » plus tard en croyant à un oubli. */
.einv-btn-compact {
  --bs-btn-font-size: 0.75rem;
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-padding-x: 0.5rem;
  font-weight: 500;
}

/* 🔴 Relecture à l'aveugle, F11 — L'AFFORDANCE PERDUE EN RESTRUCTURANT LA CARTE.
   La carte était un `<a class="list-group-item-action">` : elle réagissait au survol et
   au focus clavier. Devenue un `<div>` (un bouton dans un lien est interdit en HTML),
   elle a perdu ce retour visuel — et `list-group-item-action` ne peut pas revenir, car
   elle colore la carte ENTIÈRE, boutons compris, alors que seul le bloc d'information
   est cliquable. L'affordance revient donc là où elle est vraie. */
.einv-carte-action > a {
  display: block;
  border-radius: var(--radius-btn, 6px);
  transition: background-color 0.12s;
}
@media (hover: hover) {
  .einv-carte-action > a:hover {
    background-color: var(--slate-50, #f8fafc);
  }
}
.einv-carte-action > a:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

/* 🔴 Relecture à l'aveugle, F11 — LA SÉPARATION ÉTAIT DOUBLE.
   `list-group-flush` pose déjà `border-width: 0 0 1px` entre deux items : la règle
   ajoutée plus haut portait la séparation à 4 px au lieu de 3. On neutralise celle du
   cadre, et la nôtre reste seule. */
.einv-cartes > .list-group-item {
  border-bottom-width: 0;
}

/* === Spec AIDE-4a — cible tactile des bulles d'aide (GA12, ≥ 44 px) ===
   Mesuré par l'audit (`M2`) : aucune règle de taille n'existait pour
   .popover-help-icon avant ce lot — la cible réelle était celle de l'icône
   seule (~16 px), sous le minimum tactile. Un ::after invisible agrandit la
   zone cliquable SANS changer la taille visuelle du glyphe ni perturber le
   flux du texte qui l'entoure (l'icône reste un élément inline ordinaire). */
.popover-help-icon {
  position: relative;
  /* 🔴 AIDE-4b — une bulle reste PRESSABLE meme dans un libelle qui ne l'est
       pas. Le formulaire d'article pose ses libelles SUR le cadre du champ
       (`label-in-border`) et les neutralise par `pointer-events: none`, pour
       que le clic traverse jusqu'au champ. Sans cette ligne, les bulles de cet
       ecran sont MUETTES — le defaut exact que AIDE-4a devait fermer pour
       toujours, et qu'aucun controle PHP ne peut voir. (Chef, capture du
       2026-08-24.) */
  pointer-events: auto;
  /* Alignement de toutes les bulles du produit, pas seulement des libelles
       encadres : sans lui, le glyphe retombe sous la ligne de base — visible
       surtout en petites capitales, ou il chevauche le trait du cadre. */
  vertical-align: middle;
}
.popover-help-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VERROU DES RÉGLAGES — Spec 113
   Le compte accompagné voit ses réglages, teintés et insensibles au clic.

   🔴 Ce qu'on ne fait PAS ici, et pourquoi (mesuré sur des incidents passés) :
      • aucun `overflow` — il casse les en-têtes collants de tout le produit ;
      • aucune enveloppe positionnée autour du contenu — elle déplacerait le
        repère des éléments absolus des 96 pages ;
      • aucun `user-select` — le client doit pouvoir recopier son numéro
        d'entreprise, c'est la promesse « il voit toujours ses informations ».
   L'opacité et le filtre créent bien, eux, un contexte d'empilement dans le
   conteneur teinté : sans effet ici, les trois navigations vivant en dehors.
   ═══════════════════════════════════════════════════════════════════════════ */

body.verrou-actif .settings-page > .flex-grow-1,
body.verrou-actif .verrou-cible {
  opacity: 0.55;
  filter: grayscale(0.7);
  pointer-events: none;
}

/* Volontairement PAS `sticky` : l'en-tête de page des réglages l'est déjà, au même
   décalage — et le teintage du contenu enferme son empilement, si bien qu'un
   panneau collant recouvrirait le titre au premier défilement. */
.verrou-panneau {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 720px;
  margin: 0 auto 1rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--mint-300, #cfe8dd);
  border-radius: 0.75rem;
  background: var(--mint-50, #f4faf7);
  box-shadow: 0 2px 10px rgba(16, 40, 32, 0.08);
}

.verrou-panneau .bi {
  flex: 0 0 auto;
  font-size: 1.6rem;
  color: var(--mint-700, #2f7a5f);
}

.verrou-panneau-titre {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
}

.verrou-panneau-message {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted, #5b6b64);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AIDE-6c — Les trois listes du profil d'entreprise, dans le tiroir du guide.

   🔴 Deux lignes par réglage (🖋️ chef, 2026-08-28) : le titre et son bouton en
      haut, la valeur en dessous. C'est ce qui tient sur un téléphone sans
      couper la valeur.
   ⛔ Aucun repère de synchronisation ici : celui des boutons flottants ne marque
      que leur géométrie, et un contrôle en compte un nombre exact.
   ═══════════════════════════════════════════════════════════════════════════ */

.guide-profil {
  margin: 1rem 0 0;
}

.guide-profil-bloc {
  margin-bottom: 1.15rem;
}

.guide-profil-bloc-h {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.guide-profil-titre {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 650;
}

.guide-profil-compte {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--slate-500, #64748b);
}

.guide-profil-sous {
  margin: 0.1rem 0 0.55rem;
  font-size: 0.78rem;
  color: var(--slate-500, #64748b);
}

.guide-profil-liste,
.guide-profil-reglages {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

.guide-profil-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}

.guide-profil-liste li:first-child,
.guide-profil-reglages li:first-child {
  border-top: 0;
}

.guide-profil-liste li.est-todo {
  background: #fffbeb;
}

.guide-profil-marque {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 18px;
  text-align: center;
  margin-top: 1px;
}

.est-ok .guide-profil-marque {
  background: var(--accent-100, #d1fae5);
  color: var(--accent-700, #047857);
}

.est-todo .guide-profil-marque {
  background: var(--warning-50, #fef3c7);
  color: var(--warning-700, #92400e);
  border: 1px solid var(--warning-100, #fde68a);
}

.guide-profil-nom {
  flex: 1;
  min-width: 0;
}

/* Cible tactile : au moins 44 px de haut, même si le texte est court. */
.guide-profil-lien {
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--accent-700, #047857);
  padding: 0.35rem 0.15rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.guide-profil-lien:hover {
  text-decoration: underline;
}

/* 🟢 Le feu vert — il n'apparaît que lorsque la première liste est complète. */
.guide-profil-feuvert {
  background: var(--accent-50, #ecfdf5);
  border: 1px solid var(--accent-200, #a7f3d0);
  border-left: 4px solid var(--accent-500, #10b981);
  border-radius: var(--radius-md, 10px);
  padding: 0.8rem 0.85rem;
  margin: 0.85rem 0 1.15rem;
}

.guide-profil-feuvert p {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
}

.guide-profil-feuvert-t {
  font-weight: 650;
  color: var(--accent-700, #047857);
  margin-bottom: 0.3rem !important;
}

.guide-profil-reglages li {
  padding: 0.55rem 0.7rem;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}

.guide-profil-reglage-h {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.guide-profil-valeur {
  display: inline-block;
  margin-top: 0.2rem;
  max-width: 100%;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-700, #334155);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* =====================================================================
   AIDE-6d-2 — LA MISE EN SCÈNE : la fête à chaque étape, et le mot d'adieu
   =====================================================================
   🔴 La fenêtre est rendue DÉJÀ OUVERTE par le serveur (chef, 2026-08-28) :
      ces règles n'ont donc pas d'état « fermé » à gérer. Aucun actif tiers —
      les confettis et le salut sont écrits ici.
   ===================================================================== */

.guide-fete-fenetre {
  z-index: 1060;
}
.guide-fete-voile {
  z-index: 1055;
}

.guide-fete {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
}

/* Le bandeau de fête : la couleur d'accent, comme le mot d'accueil. */
.guide-fete__bandeau {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: #fff;
  text-align: center;
  padding: 1.75rem 1.25rem 1.5rem;
}

.guide-fete__medaille {
  width: 66px;
  height: 66px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  animation: guide-fete-pose 0.5s ease-out both;
}

.guide-fete__bravo {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}
.guide-fete__acquis {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  opacity: 0.95;
}

/* Douze pièces, posées ici — ⛔ aucune bibliothèque, aucun style écrit en Vue. */
.guide-fete__confetti {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  background: #fff;
  animation: guide-fete-tombe 2.1s ease-in forwards;
}
.guide-fete__confetti:nth-child(1) {
  left: 6%;
  animation-delay: 0.05s;
  background: #fde68a;
}
.guide-fete__confetti:nth-child(2) {
  left: 15%;
  animation-delay: 0.35s;
  background: #fca5a5;
}
.guide-fete__confetti:nth-child(3) {
  left: 24%;
  animation-delay: 0.15s;
  background: #a5f3fc;
}
.guide-fete__confetti:nth-child(4) {
  left: 33%;
  animation-delay: 0.5s;
  background: #c4b5fd;
}
.guide-fete__confetti:nth-child(5) {
  left: 42%;
  animation-delay: 0.1s;
}
.guide-fete__confetti:nth-child(6) {
  left: 51%;
  animation-delay: 0.42s;
  background: #fde68a;
}
.guide-fete__confetti:nth-child(7) {
  left: 60%;
  animation-delay: 0.22s;
  background: #a5f3fc;
}
.guide-fete__confetti:nth-child(8) {
  left: 69%;
  animation-delay: 0.58s;
  background: #fca5a5;
}
.guide-fete__confetti:nth-child(9) {
  left: 78%;
  animation-delay: 0.3s;
  background: #c4b5fd;
}
.guide-fete__confetti:nth-child(10) {
  left: 87%;
  animation-delay: 0s;
}
.guide-fete__confetti:nth-child(11) {
  left: 93%;
  animation-delay: 0.46s;
  background: #fde68a;
}
.guide-fete__confetti:nth-child(12) {
  left: 71%;
  animation-delay: 0.66s;
  background: #a5f3fc;
}

/* 🔴 CHAQUE ANIMATION FINIT DANS SON ÉTAT DE REPOS. Le fichier porte déjà un
      reset universel qui force la durée à 0,01 ms sous « animations réduites » :
      il ne supprime pas un décor, il le PROPULSE À SA FIN. Une image de fin mal
      choisie resterait donc figée à l'écran. */
@keyframes guide-fete-pose {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes guide-fete-tombe {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(190px) rotate(420deg);
  }
}

.guide-fete__suite-libelle {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500, #64748b);
  margin-bottom: 0.3rem;
}
.guide-fete__suite-titre {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

/* ─── Le mot d'adieu ─── */

.guide-fin {
  text-align: center;
}

.guide-fin__salut {
  font-size: 3rem;
  line-height: 1;
  display: inline-block;
  transform-origin: 70% 80%;
  animation: guide-salut 1.9s ease-in-out 2;
}
@keyframes guide-salut {
  0%,
  60%,
  100% {
    transform: rotate(0deg);
  }
  10%,
  30% {
    transform: rotate(16deg);
  }
  20%,
  40% {
    transform: rotate(-10deg);
  }
}

.guide-fin__titre {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.5rem 0 0.25rem;
}
.guide-fin__corps {
  color: var(--slate-600, #475569);
}

.guide-fin__secours {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.5rem;
  text-align: left;
}
.guide-fin__secours li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  margin-bottom: 0.5rem;
}
.guide-fin__secours i {
  color: var(--accent-500);
  font-size: 1.15rem;
  line-height: 1.35;
}
.guide-fin__secours strong {
  display: block;
  font-size: 0.95rem;
}
.guide-fin__secours span {
  font-size: 0.85rem;
  color: var(--slate-500, #64748b);
}

/* 🔴 SOUS « ANIMATIONS RÉDUITES », LE DÉCOR N'EST PAS RENDU DU TOUT.
      ⛔ Aucune neutralisation d'animation n'est écrite ici : le reset universel
      du fichier s'en charge déjà, et l'écrire deux fois serait un doublon
      (`CLAUDE.md` §7). Ce qu'il ne sait PAS faire, en revanche, c'est effacer
      une décoration : accélérée, elle se fige. D'où ce retrait, sur le modèle
      du bloc de la ligne neuve du suivi des envois. */
@media (prefers-reduced-motion: reduce) {
  .guide-fete__confetti {
    display: none;
  }
}

/* =====================================================================
   [161-1] Bas de page légal — la barre dépliable
   ---------------------------------------------------------------------
   Ouverture NATIVE (<details>/<summary>) : aucun script ne l'accompagne.
   Couleurs : celles de la barre latérale, relevées dans ce même fichier
   (#sidebar L96-101, .sidebar .nav-link L179-195). Le fond noir du site
   vitrine n'est pas repris — décision du chef.
   ===================================================================== */

.legal-bar {
  border-top: 1px solid var(--slate-100);
  background: var(--slate-50);
  font-size: 0.8125rem;
}

/* Le triangle par défaut du navigateur est remplacé par un chevron, pour que
   la ligne repliée ressemble au reste de l'application. Les deux préfixes sont
   nécessaires : la propriété standard ne suffit pas encore sur WebKit. */
.legal-bar__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  color: var(--slate-700);
}
.legal-bar__summary::-webkit-details-marker {
  display: none;
}
.legal-bar__summary:hover {
  background: var(--slate-100);
  color: var(--accent-700);
}
.legal-bar__label {
  flex: 1 1 auto;
}
.legal-bar__chevron {
  transition: transform 0.2s ease-in-out;
}
.legal-bar[open] .legal-bar__chevron {
  transform: rotate(180deg);
}

.legal-bar__panel {
  padding: 0.25rem 1rem 1rem;
  border-top: 1px solid var(--slate-100);
}
.legal-bar__title {
  margin-bottom: 0.35rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
  color: var(--slate-700);
}

/* Cible tactile : 44px de haut au doigt, y compris quand le libellé tient sur
   une seule ligne (mobile 360px, CLAUDE.md §6). */
.legal-bar__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0;
  color: var(--slate-700);
  text-decoration: none;
}
.legal-bar__link:hover {
  color: var(--accent-700);
  text-decoration: underline;
}

/* La barre ne s'imprime pas. Elle vit ICI et non dans `print.css` : cette
   feuille-là n'est chargée que par le gabarit de l'application, alors que la
   barre existe aussi sur la connexion et sur le formulaire public. Y charger
   `print.css` entier masquerait leur formulaire à l'impression. */
@media print {
  .legal-bar {
    display: none !important;
  }
}