/* ============================================================
   app.css — Circuit de signature (outil HORS SOMA)
   Grammaire visuelle = mockups/circuit-signature/mockup-signatures-V1.html
   (KPI noirs · stepper OPC→MOE→MOA · barre de ligne · cards r22)
   Tokens : voir tokens.css — aucune valeur en dur ici.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  min-height: 100vh;
}
button { font-family: var(--font); cursor: pointer; }
input, textarea, select { font-family: var(--font); color: var(--text); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
a { color: var(--green-dark); }

/* ===== Brand mark (barre verte + wordmark) ===== */
.brand-mark { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.brand-mark::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 32px;
  background: var(--green); border-radius: 3px;
}
.brand-mark .bm-txt { font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: -0.4px; line-height: 1.15; }
.brand-mark .bm-txt em { font-style: normal; color: var(--green); display: block; }

/* ===== Shell + topbar ===== */
.shell { max-width: 1180px; margin: 0 auto; padding: 28px 32px 96px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 16px; }
.baseline { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--muted); font-size: var(--text-base); }

/* ===== Footer signature « DVH » — sur TOUTES les pages (règle 8bis SOMA, SIG-9 #7) =====
   Barre verte + wordmark + devise + provenance. Bande verte très diluée,
   filet vert 2px en haut. Lora italic pour les deux lignes éditoriales. */
.dvh-signature {
  margin-top: 48px; padding: 28px 0 8px; text-align: center;
  background: rgba(47, 191, 122, 0.035); border-top: 2px solid var(--green);
}
.dvh-signature .dvh-mark { display: inline-flex; align-items: center; gap: 8px; }
.dvh-signature .dvh-mark::before {
  content: ""; flex: 0 0 auto; width: 5px; height: 24px;
  background: var(--green); border-radius: 3px;
}
.dvh-signature .dvh-wordmark { font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: -0.4px; color: var(--text); }
.dvh-signature .dvh-wordmark em { font-style: normal; color: var(--green); }
.dvh-signature .dvh-devise {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: var(--text-md); color: var(--text2); margin-top: 10px;
}
.dvh-signature .dvh-meta {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: var(--text-sm); color: var(--muted); margin-top: 4px;
}

/* Bouton retour (header) — discret en desktop, bien visible en mobile (SIG-7 #23).
   Sur les sous-écrans (détail circuit, édition fiche) uniquement. */
.btn-retour {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; margin-right: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--text2); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.btn-retour:hover { background: var(--green-soft); color: var(--green-dark); border-color: var(--green-border); }

/* ===== Navigation principale ===== */
.nav-row { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.nav-btn {
  height: 44px; padding: 0 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--card);
  font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text2);
}
.nav-btn.active { background: var(--green-soft); border-color: var(--green-border); color: var(--green-dark); }
.nav-btn .cnt { color: var(--red); }
.nav-spacer { flex: 1; }
.nav-user { font-size: var(--text-sm); color: var(--muted); }

/* Bouton hamburger : masqué en desktop, visible en mobile (cf. @media 640px) */
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  background: var(--card); color: var(--text); cursor: pointer;
}

.page-title { font-weight: var(--weight-black); font-size: var(--text-3xl); letter-spacing: -0.8px; margin-bottom: 4px; }
/* SIG-9 #2 : --muted verdâtre se lisait « vert » sur fond neutre → --text2.
   --muted reste réservé aux micro-labels uppercase (kpi-label, f-label…). */
.page-sub { color: var(--text2); font-size: var(--text-md); margin-bottom: 24px; }

/* En-tête : titre à gauche, sélecteur de mois à droite */
.dash-titre-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dash-mois { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dash-mois-lbl {
  font-weight: var(--weight-bold); text-transform: uppercase; font-size: var(--text-xs);
  letter-spacing: 0.8px; color: var(--muted);
}
.dash-mois select {
  height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--card);
  font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text);
  cursor: pointer;
}
.dash-mois select:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--green); }

/* ===== KPI (chiffres NOIRS Lato Black — aucune couleur) ===== */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 24px; min-height: 140px; box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; justify-content: space-between;
}
.kpi-label { font-weight: var(--weight-bold); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.8px; color: var(--muted); }
.kpi-num { font-weight: var(--weight-black); font-size: 48px; letter-spacing: -1.5px; color: var(--text); line-height: 1; }
.kpi-num.small { font-size: var(--text-2xl); letter-spacing: -0.5px; padding-top: 12px; }
.kpi-card.is-zero .kpi-num { opacity: 0.35; }
.kpi-hint { font-size: var(--text-base); color: var(--muted); }

/* KPI cliquables (filtres « horloge 45 j ») : survol + état actif teinté */
.kpi-card.kpi-clic { cursor: pointer; transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s; }
.kpi-card.kpi-clic:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card.kpi-clic:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Tons : rouge/orange = urgence, tolérés sur le CHIFFRE (exception Maxime SIG-9 #6).
   Le vert quitte le chiffre (chiffre noir) → devient une pastille 7px devant le LABEL. */
.kpi-card.ton-rouge .kpi-num { color: var(--red); }
.kpi-card.ton-orange .kpi-num { color: var(--yellow); }
.kpi-card.ton-bleu .kpi-num { color: var(--text); }
.kpi-card.ton-vert .kpi-num { color: var(--text); }
.kpi-card.ton-vert .kpi-label::before,
.kpi-card.ton-bleu .kpi-label::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: var(--radius-full); background: var(--green); vertical-align: middle;
}
.kpi-card.ton-bleu .kpi-label::before { background: var(--blue); }
.kpi-card.is-zero .kpi-num { color: var(--text); } /* zéro = neutre, peu importe le ton */
.kpi-card.is-actif { border-color: var(--green); box-shadow: var(--shadow-focus); }

/* ===== Barre de commande ===== */
.command-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.search {
  flex: 1; display: flex; align-items: center; gap: 10px; height: 50px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 0 22px; color: var(--muted);
}
.search svg { flex: 0 0 auto; }
.search input { flex: 1; border: none; background: transparent; font-size: var(--text-md); height: 100%; }
.search input:focus-visible { box-shadow: none; outline: none; }
.cb-btn {
  height: 50px; padding: 0 22px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--card);
  font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text2);
}
.cta {
  height: 50px; padding: 0 26px; border-radius: var(--radius-pill); border: none;
  background: var(--green); color: var(--white); font-weight: var(--weight-bold);
  font-size: var(--text-md); box-shadow: var(--sh-green);
}
.cta-compact { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 0 20px; }
.cta:hover { background: var(--green-hover); }
.cta:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Menu du bouton + (Nouveau circuit · Note / message) */
.dash-plus-wrap { position: relative; flex: 0 0 auto; }
.dash-plus-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 220px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.dash-plus-menu[hidden] { display: none; }
.dash-plus-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border: none; background: none; border-radius: var(--radius-sm);
  font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text); cursor: pointer;
}
.dash-plus-item svg { flex: 0 0 auto; color: var(--green); }
.dash-plus-item:hover { background: var(--bg); }

/* ===== Onglets ===== */
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border); padding: 0 6px; }
.tab {
  padding: 12px 2px; font-weight: var(--weight-bold); font-size: var(--text-base);
  color: var(--muted); border: none; background: none; border-bottom: 2px solid transparent;
}
.tab.active { color: var(--text); border-bottom-color: var(--green); }
.tab.active .cnt { color: var(--green); }
/* Définition de l'onglet actif (sous-titre lisible — Maxime 2026-06-12) */
.tab-def { margin: 10px 6px 0; font-size: var(--text-sm); color: var(--muted); }
.tab-def:empty { display: none; }

/* ===== Liste circuits ===== */
.list {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden;
}
.list.standalone { border-radius: var(--radius-lg); }
/* ============================================================
   GRAMMAIRE DE LIGNE V2 (mockup mockup-ligne-dashboard-V2.html) — 5 zones
   à ordre fixe : IDENTITÉ | ÉTAT | STEPPER+track | ÉCHÉANCE | ACTION.
   ============================================================ */
.row {
  position: relative; display: grid;
  grid-template-columns: minmax(230px, 1.2fr) 210px 290px 170px 150px;
  align-items: center; gap: 16px; padding: 16px 18px 16px 26px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.row:last-child { border-bottom: none; }
.row::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  transform: translateY(-50%) scaleY(0.7); width: 3px; height: 48px;
  background: var(--green); border-radius: 0 3px 3px 0; opacity: 0.6; transition: 0.2s;
}
/* La barre signature est flush-left (rayon 0 3px 3px 0 = onglet attaché au bord) */
.row:hover::before { opacity: 1; transform: translateY(-50%) scaleY(1); }
.row.blocked::before { background: var(--red); opacity: 0.9; }
.row.tocheck::before { background: var(--blue); opacity: 0.9; }
/* Code couleur Maxime sur la BARRE latérale : orange = en attente OPC/MOE ·
   noir = chez le client (MOA/EG) · bleu = à contrôler · vert = bouclé/validé. */
.row.attente::before { background: var(--yellow); opacity: 0.9; }
.row.chez-client::before { background: var(--text); opacity: 0.9; }
.row.bouclee::before { background: var(--green); opacity: 0.9; }
.row:hover { background: var(--green-row-hover); }

/* Zone 1 — IDENTITÉ : titre + UNE ligne méta (ref · K€ HT · mois) */
.r-title { font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: -0.1px; margin-bottom: 4px; }
.r-meta { font-size: var(--text-sm); color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; white-space: nowrap; }
.r-ref {
  font-family: var(--font-mono); font-size: var(--text-xs);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; color: var(--text2);
}
.r-eur { font-weight: var(--weight-bold); color: var(--text2); }

/* Zone 2 — ÉTAT : un seul message. Chip si action requise, texte calme sinon. */
.chip-block, .chip-wait, .chip-in, .chip-done {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  line-height: 1.2; border-radius: var(--radius-pill); padding: 5px 12px;
}
.chip-block, .chip-wait, .chip-in, .chip-done { white-space: normal; }
.chip-block svg, .chip-wait svg, .chip-in svg, .chip-done svg { flex: none; }
.chip-block { background: var(--red-bg); color: var(--red); }
.chip-wait { background: var(--yellow-bg); color: var(--yellow); }
.chip-in { background: var(--blue-bg); color: var(--blue); }
.chip-done { background: var(--green-soft); color: var(--green-dark); }
/* Texte calme (silence = tout va bien) — gris, pas de chip */
.etat-calme { font-size: var(--text-sm); color: var(--muted); }
.etat-calme b { color: var(--text2); font-weight: var(--weight-bold); }

/* ===== Pastille santé « horloge de paiement 45 j » ===== */
.pastille-sante {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--weight-bold); font-size: var(--text-xs);
  border-radius: var(--radius-pill); padding: 3px 10px 3px 8px;
}
.pastille-sante .ps-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; }
.pastille-sante.vert { background: var(--green-soft); color: var(--green-dark); }
.pastille-sante.vert .ps-dot { background: var(--green); }
.pastille-sante.orange { background: var(--yellow-bg); color: var(--yellow); }
.pastille-sante.orange .ps-dot { background: var(--yellow); }
.pastille-sante.rouge { background: var(--red-bg); color: var(--red); }
.pastille-sante.rouge .ps-dot { background: var(--red); }

/* ===== En-tête de vague mensuelle (groupement par mois d'émission) =====
   SIG-9 #10 : bandeau serif italique = pattern révoqué V7 → mini-titre Lato 700
   uppercase (cohérent avec les autres labels de groupement). */
.vague-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px 10px 28px; font-family: var(--font);
  font-weight: var(--weight-bold); font-style: normal; text-transform: uppercase;
  letter-spacing: 0.6px; font-size: var(--text-sm); color: var(--text2);
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.vague-head:first-child { border-radius: 0; }
.vague-cnt {
  font-family: var(--font); font-style: normal; font-weight: var(--weight-bold);
  font-size: var(--text-xs); color: var(--muted);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 1px 9px;
}

/* ===== Stepper OPC → MOE → MOA ===== */
/* align-items: flex-start → nodes alignés en haut, labels (1 ou 2 lignes)
   poussent vers le bas sans décaler les pastilles (corrige les collisions
   visuelles du nœud MOE, SIG-7 #24). */
.stepper { display: flex; align-items: flex-start; }
.step {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 64px; flex: 0 0 64px; position: relative; z-index: 1;
}
.node {
  width: 26px; height: 26px; border-radius: var(--radius-full); flex: 0 0 26px;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
  font-size: var(--text-sm); font-weight: var(--weight-black);
  border: 2px solid var(--muted2); background: var(--card); color: var(--muted2);
}
/* en_attente : cercle gris fin, vide (ni numéro ni icône) — couleur muted */
.node { border-width: 1.5px; }
.node svg { display: block; }
/* signé : ✓ vert plein */
.node.done { background: var(--green); border-color: var(--green); color: var(--white); }
/* en cours (chez le signataire) : cercle vert épais + halo pulsé discret */
.node.current { border-width: 2.5px; border-color: var(--green); background: var(--card); box-shadow: 0 0 0 4px var(--green-glow); }
.node-pulse { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--green); display: block; animation: node-pulse 1.8s ease-in-out infinite; }
@keyframes node-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.65; }
  50% { transform: scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .node-pulse { animation: none; opacity: 1; transform: none; }
}
/* à contrôler : cercle bleu plein + icône inbox */
.node.inbox { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); box-shadow: var(--blue-glow); }
/* bloqué : cercle rouge + alerte (SVG) */
.node.late { border-color: var(--red); color: var(--red); background: var(--red-bg); box-shadow: var(--red-glow); }
.s-label {
  font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted); text-align: center; line-height: 1.25;
  max-width: 60px; word-break: break-word; hyphens: auto;
}
/* Le trait de liaison s'aligne sur le CENTRE des pastilles (13px = moitié de 26px),
   et reste fin entre deux étapes sans empiéter sur les labels. */
.s-link { height: 2px; width: 24px; flex: 0 0 24px; background: var(--muted2); margin: 12px -5px 0; z-index: 0; }
.s-link.done { background: var(--green); }

/* Zone 3 — STEPPER + micro-ligne tracking ALIGNÉE dessous (mockup zone 3).
   La track COMMENCE PAR QUI (rôle + nom), puis les badges ouvert/téléchargé
   RANGÉS sur cette ligne — jamais flottants sur les nœuds. */
.z-step { display: flex; flex-direction: column; gap: 7px; }
.track {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--muted); padding-left: 2px;
}
.track b { color: var(--text2); font-weight: var(--weight-bold); }
.track > span { display: inline-flex; align-items: center; gap: 4px; }
.track svg { flex: none; }
.track .ok { color: var(--green-dark); font-weight: var(--weight-bold); }
.track .tk-seen { color: var(--green-dark); }

/* Stepper navigable (écran détail) — pastille cliquable = document consultable */
.step.nav { cursor: pointer; }
.step.nav:hover .node { border-color: var(--green-dark); }
.step.nav:hover .s-label { color: var(--text); }
.node.viewing { outline: 2px solid var(--green-dark); outline-offset: 3px; }
.node.done-soft { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); }
/* Rôle EG (entreprise générale — chemin sous-traitance) : label NAVY partout */
.step.eg .s-label { color: var(--navy); }
.role-eg { color: var(--navy); }

/* Légende des 4 états du stepper — discrète, affichée UNE fois */
.stepper-legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin-top: 12px; font-size: var(--text-xs); color: var(--muted);
}
.sl-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sl-dot {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.sl-dot svg { width: 10px; height: 10px; display: block; }
.sl-dot.wait { border: 1.5px solid var(--muted2); background: var(--card); }
.sl-dot.live { border: 2px solid var(--green); background: var(--card); }
.sl-pulse { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--green); animation: node-pulse 1.8s ease-in-out infinite; }
.sl-dot.check { border: 1.5px solid var(--blue); background: var(--blue-bg); color: var(--blue); }
.sl-dot.done { background: var(--green); border: 1.5px solid var(--green); color: var(--white); }
.chip-eg { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--weight-bold); font-size: var(--text-xs); border-radius: var(--radius-pill); padding: 3px 10px; background: var(--navy-bg); color: var(--navy); }

/* Badge tracking d'ouverture (pixel) — discret, sous le stepper / dans le détail */
.open-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; font-size: var(--text-xs); color: var(--muted);
}
.open-badge svg { flex: none; }
.open-badge.seen { color: var(--green-dark); }

/* Badge TÉLÉCHARGEMENT (preuve de lecture, ≠ pixel) — vert FORT : pastille
   pleine verte, texte blanc. Visuellement plus fort que l'œil gris. */
.download-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 3px 10px;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--white); background: var(--green); border-radius: var(--radius-pill);
}
.download-badge svg { flex: none; }

/* Lecture des mails — détail PAR MAIL ENVOYÉ (SIG-7 #10) */
.mail-track .mail-track-liste { margin-top: 8px; }
.mail-track-ligne {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm);
}
.mail-track-ligne:last-child { border-bottom: none; }
.mail-track-quoi { font-weight: var(--weight-bold); color: var(--text); }
.mail-track-quand { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.mail-track-ligne .open-badge { margin-top: 0; margin-left: auto; }
.mail-track-preuve { margin-top: 8px; }

/* Zone 4 — ÉCHÉANCE : quand (gras) + prochaine relance / sous-info (muted) */
.z-when { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
.z-when b { display: block; color: var(--text); font-size: var(--text-base); }
.z-when .rel { white-space: nowrap; }
.z-when .chip-relance { margin-top: 1px; }
.z-when .ecart-retard { color: var(--red); font-weight: var(--weight-bold); }

/* Zone 5 — ACTION : UN bouton principal + kebab ⋯ (Détail + Annuler) */
.z-act { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.btn {
  height: 36px; padding: 0 18px; border-radius: var(--radius-pill); border: none;
  font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--white);
  white-space: nowrap; flex: 0 0 auto;
}
.btn.ctrl { background: var(--blue); }
.btn.go { background: var(--green); }
.btn.go:hover { background: var(--green-hover); }
.btn.pay { background: var(--green-dark); }
.kebab-wrap { position: relative; }
.kebab {
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2); flex: 0 0 auto;
}
.kebab:hover { background: var(--bg); }
.kebab svg { display: block; }
.kebab-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 180px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 6px;
}
.kebab-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text2);
}
.kebab-item:hover { background: var(--bg); color: var(--text); }
.kebab-item.danger { color: var(--red); }
.kebab-item.danger:hover { background: var(--red-bg); }

.r-days { font-size: var(--text-sm); color: var(--muted); }
.r-days b { display: block; color: var(--text); font-size: var(--text-base); }
.r-days.alert b { color: var(--red); }
/* « Relance N » — même grammaire couleur que la pastille du mail
   (Relance 1 verte · Relance 2 orange · Relance ≥3 rouge) */
.rel-niveau { font-weight: 600; }
.rel-niveau.g { color: var(--green); }
.rel-niveau.y { color: var(--yellow); }
.rel-niveau.r { color: var(--red); }
.r-act { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
.r-act .mini-btn { flex: 0 0 auto; }
/* Paiement (onglet Signées) — attendu / réel / décalage, discret */
.r-paiement { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
.r-paiement .ecart-ok { color: var(--green-dark); font-weight: var(--weight-bold); }
.r-paiement .ecart-retard { color: var(--red); font-weight: var(--weight-bold); }
.mini-btn {
  height: 32px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--card);
  font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text2);
}
.mini-btn.go { background: var(--green); border-color: var(--green); color: var(--white); }
.mini-btn.check { background: var(--blue); border-color: var(--blue); color: var(--white); }
/* « Paiement reçu » sur la ligne (circuit bouclé non payé) — vert plein */
.mini-btn.pay { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
/* Croix d'annulation de circuit — discrète, rouge au survol */
.row-x {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--muted2);
  cursor: pointer; transition: 0.15s;
}
.row-x:hover { color: var(--red); border-color: var(--red); background: var(--red-bg); }

/* Carte MOBILE (.mcard) : masquée en desktop (le .row pilote), affichée < 640px.
   Même hiérarchie que le mockup mobile : titre · méta · état · stepper · track ·
   foot (échéance + bouton + kebab). */
.mcard { display: none; }

.empty-state {
  padding: 48px 24px; text-align: center; color: var(--muted); font-size: var(--text-md);
}

/* ===== Cards / grilles détail ===== */
.det-grid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 24px 26px;
}
.det-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--blue-bg); border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 20px;
  font-size: var(--text-base); color: var(--text2);
}
.det-banner b { color: var(--blue); }
.det-banner.danger { background: var(--red-bg); border-color: rgba(224, 32, 32, 0.25); }
.det-banner.danger b { color: var(--red); }

.scan-box {
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
  min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 16px; color: var(--muted); overflow: hidden;
}
.scan-box .doc { font-weight: var(--weight-bold); color: var(--text2); font-size: var(--text-md); }
.scan-frame { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 16px; background: var(--bg); }
/* Lien « Ouvrir le PDF dans un onglet » (SIG-9 #12 : classe utilisée mais jamais définie) */
.lien-pdf {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  color: var(--green-dark); text-decoration: none; cursor: pointer;
}
.lien-pdf:hover { text-decoration: underline; }

.det-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-xl {
  width: 100%; height: 50px; border: none; border-radius: var(--radius-md);
  background: var(--green); color: var(--white); font-weight: var(--weight-black);
  font-size: var(--text-md); box-shadow: var(--sh-green);
}
.btn-xl:hover { background: var(--green-hover); }
.btn-xl:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-line {
  width: 100%; height: 44px; border-radius: var(--radius-md);
  border: 1px solid var(--border2); background: var(--card);
  font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text2);
}
.btn-line.danger { color: var(--red); border-color: rgba(224, 32, 32, 0.3); }
.det-note {
  font-size: var(--text-xs); color: var(--muted); line-height: var(--leading-normal);
  background: var(--bg); border-radius: var(--radius-sm); padding: 10px 12px;
}
.h-title { font-weight: var(--weight-bold); font-size: var(--text-md); margin-bottom: 14px; }

/* ===== Historique (événements) ===== */
.evt { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.evt:last-child { border-bottom: none; }
.evt .dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--muted2); margin-top: 3px; }
.evt .dot.g { background: var(--green); }
.evt .dot.b { background: var(--blue); }
.evt .dot.y { background: var(--yellow); }
.evt .dot.r { background: var(--red); }
.evt .dot.v { background: var(--navy); } /* SIG-D20 : plus de violet dans cet outil */
.evt .dot.n { background: var(--navy); }
.evt b { display: block; color: var(--text); font-size: var(--text-base); }
.evt .when { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; margin-left: auto; }

/* ===== Timeline en CHAPITRES — détail circuit (esprit « livre » SOMA) =====
   Copie locale adaptée de la grammaire timeline.css du repo principal
   (rail vertical + dots de chapitre + en-têtes) — préfixe .tlc-*, tokens only.
   1 chapitre par signataire (Envoi OPC → MOE → MOA) + chapitre Circuit. */
.tlc-book { position: relative; padding-left: 24px; }
.tlc-book::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--border2); border-radius: 2px;
}
.tlc-chap { position: relative; margin-bottom: 22px; }
.tlc-chap:last-child { margin-bottom: 0; }
/* Dot de chapitre : vert plein = fait · halo = en cours · gris = futur · rouge = bloqué */
.tlc-chap-dot {
  position: absolute; left: -24px; top: 1px; width: 16px; height: 16px;
  border-radius: var(--radius-full); background: var(--card);
  border: 2px solid var(--muted2); z-index: 1;
}
.tlc-chap[data-state="done"] .tlc-chap-dot { border-color: var(--green); }
.tlc-chap[data-state="done"] .tlc-chap-dot::after {
  content: ""; position: absolute; inset: 2px;
  border-radius: var(--radius-full); background: var(--green);
}
.tlc-chap[data-state="active"] .tlc-chap-dot {
  border-color: var(--green); background: var(--green);
  box-shadow: 0 0 0 4px var(--green-glow);
}
.tlc-chap[data-state="inbox"] .tlc-chap-dot {
  border-color: var(--blue); background: var(--blue-bg);
  box-shadow: var(--blue-glow);
}
.tlc-chap[data-state="late"] .tlc-chap-dot {
  border-color: var(--red); background: var(--red-bg);
  box-shadow: var(--red-glow);
}
.tlc-chap[data-state="future"] .tlc-chap-dot { border-style: dashed; }
.tlc-chap[data-state="future"] { opacity: 0.55; }
/* En-tête de chapitre : nom + chip d'état + badge œil (compteur d'ouvertures) */
.tlc-chap-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; cursor: pointer; user-select: none; }
.tlc-chap-head:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: var(--radius-sm); }
.tlc-chap-name { font-weight: var(--weight-black); font-size: var(--text-md); letter-spacing: -0.2px; }
.tlc-chap-name svg { vertical-align: -1px; color: var(--muted); }
/* Compteur d'évènements + chevron de pliage (timeline contractable, SIG-7 #25) */
.tlc-chap-count { font-size: var(--text-xs); color: var(--muted); font-weight: var(--weight-bold); }
.tlc-chap-chevron { margin-left: auto; color: var(--muted); flex: 0 0 auto; transition: transform .15s ease; }
.tlc-chap:not(.collapsed) .tlc-chap-chevron { transform: rotate(180deg); }
.tlc-chap.collapsed .tlc-chap-body { display: none; }
.tlc-chap.collapsed .tlc-chap-head { margin-bottom: 0; }
.tlc-chip {
  font-size: 10px; font-weight: var(--weight-black); text-transform: uppercase;
  letter-spacing: 0.08em; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.tlc-chip.ok { background: var(--green-soft); color: var(--green-dark); }
.tlc-chip.wait { background: var(--yellow-bg); color: var(--yellow); }
.tlc-chip.inbox { background: var(--blue-bg); color: var(--blue); }
.tlc-chip.late { background: var(--red-bg); color: var(--red); }
.tlc-chip.off { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.tlc-chap-head .open-badge { margin-top: 0; }
/* Événements d'un chapitre — densité du livre, dots colorés par type */
.tlc-evt { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.tlc-evt:last-child { border-bottom: none; }
.tlc-evt .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--muted2); margin-top: 4px; }
.tlc-evt .dot.g { background: var(--green); }
.tlc-evt .dot.b { background: var(--blue); }
.tlc-evt .dot.y { background: var(--yellow); }
.tlc-evt .dot.r { background: var(--red); }
.tlc-evt .dot.n { background: var(--navy); }
.tlc-evt b { display: block; color: var(--text); font-size: var(--text-base); }
.tlc-evt b .open-badge { margin-top: 0; font-size: var(--text-base); font-weight: var(--weight-bold); }
.tlc-evt .when { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; margin-left: auto; padding-left: 10px; }
.tlc-sub { color: var(--muted); }
.tlc-scan { display: inline-block; margin-top: 2px; font-weight: var(--weight-bold); color: var(--green-dark); cursor: pointer; text-decoration: underline; }
/* Événement de mail relisable : ligne cliquable + indice « lire » au survol */
.tlc-evt-mail { cursor: pointer; border-radius: var(--radius-sm, 10px); transition: background .12s ease; }
.tlc-evt-mail:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.tlc-evt-mail:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.tlc-lire { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--green-dark); opacity: 0; transition: opacity .12s ease; }
.tlc-evt-mail:hover .tlc-lire, .tlc-evt-mail:focus-visible .tlc-lire { opacity: 1; }
.tlc-lire-icon { vertical-align: -1px; }

/* ===== Modale « Lire le mail » ===== */
.mail-modal { max-width: 620px; }
.mail-sens { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-bold); vertical-align: middle; }
.mail-sens.envoye { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-dark); }
.mail-sens.recu { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.mail-entete { margin: 12px 0; padding: 12px 14px; background: var(--surface-2, rgba(0,0,0,.03)); border-radius: var(--radius-sm, 10px); }
.mail-ligne { display: flex; gap: 8px; padding: 2px 0; font-size: var(--text-sm); }
.mail-k { flex: 0 0 44px; color: var(--muted); font-weight: var(--weight-bold); }
.mail-v { color: var(--text); word-break: break-word; }
.mail-sujet { display: flex; gap: 8px; align-items: baseline; margin: 4px 0 12px; font-size: var(--text-base); }
.mail-sujet .mail-k { flex: 0 0 44px; }
.mail-corps { margin-top: 6px; padding: 14px 16px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); white-space: pre-wrap; word-break: break-word; font-size: var(--text-sm); line-height: 1.5; color: var(--text); max-height: 46vh; overflow-y: auto; }
/* Chapitre futur / vide : une ligne en italique éditorial (Lora) */
.tlc-empty { font-family: var(--font-serif); font-style: italic; color: var(--muted); font-size: var(--text-sm); padding: 2px 0; }

/* ===== Formulaires ===== */
.f-label {
  font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text2); margin: 0 0 6px; display: block;
}
.f-input, .f-select {
  width: 100%; height: 44px; border: 1px solid var(--border2); border-radius: var(--radius-md);
  padding: 0 14px; font-size: var(--text-md); background: var(--card); color: var(--text); margin-bottom: 16px;
}
.f-area {
  width: 100%; min-height: 96px; border: 1px solid var(--border2); border-radius: var(--radius-md);
  padding: 12px 14px; font-size: var(--text-md); background: var(--card); color: var(--text);
  margin-bottom: 16px; resize: vertical; line-height: var(--leading-normal);
}
/* SIG-D14 : quatuor Prénom / Nom / Email / Téléphone */
.f-trio { display: grid; grid-template-columns: 0.7fr 0.8fr 1.2fr 0.9fr; gap: 12px; }
.f-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-hint { font-size: var(--text-sm); color: var(--muted); margin: -10px 0 16px; }
.role-head { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-black); font-size: var(--text-md); margin: 4px 0 12px; }
.role-head .rd { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--green); }
.role-head .rd.blue { background: var(--blue); }
.role-head .rd.navy { background: var(--navy); }
.role-head .opt { font-weight: var(--weight-regular); color: var(--muted); font-size: var(--text-sm); }
.save-bar { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* ===== Fiche chantier — formulaire PLEINE LARGEUR (retour Maxime 2026-06-11) :
   4 cartes empilées, labels au-dessus, inputs larges (min 200px par colonne) ===== */
.fiche-stack { display: grid; grid-template-columns: 1fr; gap: 20px; }
.fiche-stack .f-trio { grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 16px; } /* SIG-D14 : 4 colonnes, inputs ≥180px */
.fiche-stack .f-cinq { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 16px; } /* Contacts bonus : + colonne Fonction (5 colonnes propres) */
.fiche-stack .role-head { margin-top: 8px; }
.fiche-stack .role-head:first-of-type { margin-top: 0; }
.fiche-stack .save-bar { margin-top: 0; }

/* ===== Fiche chantier COMPACTE (SIG-7 #13) — champs densifiés, on voit plus ===== */
.fiche-compact { gap: 16px; }
.fiche-compact .card { padding: 18px 20px; }
.fiche-compact .h-title { margin-bottom: 10px; }
.fiche-compact .f-label { font-size: var(--text-xs); margin-bottom: 4px; }
.fiche-compact .f-input, .fiche-compact .f-select { height: 38px; margin-bottom: 12px; font-size: var(--text-base); }
.fiche-compact .f-area { min-height: 64px; margin-bottom: 8px; font-size: var(--text-base); }
.fiche-compact .role-head { font-size: var(--text-base); margin: 2px 0 8px; }
.fiche-compact .f-hint { margin: -6px 0 10px; }

/* Rôles OPTIONNELS repliés (Comptable MOA / Entreprise générale — SIG-7 #14) */
.role-opt { margin-top: 6px; }
.opt-add {
  border: 1px dashed var(--border2); background: var(--bg); color: var(--text2);
  border-radius: var(--radius-md); padding: 9px 16px; font-weight: var(--weight-bold);
  font-size: var(--text-sm); cursor: pointer;
}
.opt-add:hover { border-color: var(--green); color: var(--green-dark); }
.is-hidden { display: none; }

/* ===== Bandeau pilotage en tête de la fiche (SIG-7 #16) ===== */
.pilot-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.pilot-cell { display: flex; flex-direction: column; gap: 4px; }
.pilot-num { font-weight: var(--weight-black); font-size: var(--text-2xl); letter-spacing: -0.6px; color: var(--text); line-height: 1; }
.pilot-cell.ton-orange .pilot-num { color: var(--yellow); }
.pilot-cell.ton-rouge .pilot-num { color: var(--red); }
.pilot-lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); font-weight: var(--weight-bold); }

/* ===== Chips emails (copies internes) ===== */
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-soft); color: var(--green-dark);
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  border-radius: var(--radius-pill); padding: 6px 14px;
}
.cc-chip button {
  border: none; background: none; color: var(--green-dark);
  opacity: 0.6; font-size: var(--text-sm); padding: 0; line-height: 1;
}
.cc-chip button:hover { opacity: 1; }

/* ===== Upload PDF ===== */
.drop-zone {
  border: 2px dashed var(--border2); border-radius: var(--radius-md); background: var(--bg);
  padding: 32px 20px; text-align: center; color: var(--muted); margin-bottom: 16px; cursor: pointer;
}
.drop-zone.has-file { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
/* Glisser-déposer en cours au-dessus de la zone : halo vert (trait plein) */
.drop-zone.dz-over { border-color: var(--green); border-style: solid; background: var(--green-soft); color: var(--green-dark); }
.drop-zone .dz-name { font-weight: var(--weight-bold); font-size: var(--text-md); }

/* ===== Modale éditeur de mail ===== */
.sig-modal-overlay {
  position: fixed; inset: 0; background: var(--overlay);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px; z-index: 50; overflow-y: auto;
}
.modal {
  background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  width: 100%; max-width: 980px; padding: 28px 32px;
}
/* Modale compacte (note / message libre) */
.modal-sm { max-width: 520px; }
.nm-canaux { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.nm-check { display: flex; align-items: center; gap: 9px; font-size: var(--text-base); color: var(--text); cursor: pointer; }
.nm-check input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sig-modal-close {
  width: 34px; height: 34px; border: 1px solid var(--green-border); background: var(--card);
  border-radius: var(--radius-sm); transform: rotate(45deg);
  display: flex; align-items: center; justify-content: center;
  color: var(--green-dark); font-weight: var(--weight-bold); font-size: var(--text-md);
}
.sig-modal-close span { transform: rotate(-45deg); display: block; }
.sig-modal-title { font-weight: var(--weight-black); font-size: var(--text-2xl); letter-spacing: -0.5px; margin-bottom: 2px; }
.modal-sub { color: var(--muted); font-size: var(--text-base); margin-bottom: 18px; }
.mail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }

/* Bouton IA « Résumé avec SOMA » — VERT (SIG-D20 : outil hors SOMA, plus de violet ici) */
.btn-ia {
  height: 44px; padding: 0 20px; border: none; border-radius: var(--radius-md);
  background: var(--green); color: var(--white); font-weight: var(--weight-bold); font-size: var(--text-base);
}
.btn-ia:disabled { opacity: 0.6; cursor: wait; }

/* ===== Login ===== */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 36px 40px; width: 100%; max-width: 420px;
}
.login-title { font-weight: var(--weight-black); font-size: var(--text-2xl); letter-spacing: -0.5px; margin: 22px 0 4px; }
.login-sub { color: var(--muted); font-size: var(--text-base); margin-bottom: 24px; }
.login-error {
  background: var(--red-bg); color: var(--red); font-weight: var(--weight-bold);
  font-size: var(--text-sm); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px;
}

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--white); font-weight: var(--weight-bold);
  font-size: var(--text-base); border-radius: var(--radius-pill); padding: 12px 24px;
  box-shadow: var(--shadow-lg); z-index: 100; max-width: 80vw;
}
.toast.error { background: var(--red); }
.toast.success { background: var(--green-dark); }

/* ===== Fiches chantiers (liste) ===== */
.fiche-row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 18px 24px 18px 28px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.fiche-row:last-child { border-bottom: none; }
.fiche-row:hover { background: var(--green-row-hover); }
.fiche-row::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0.7); width: 3px; height: 40px;
  background: var(--green); border-radius: 0 3px 3px 0; opacity: 0.6; transition: 0.2s;
}
.fiche-row:hover::before { opacity: 1; transform: translateY(-50%) scaleY(1); }

/* ===== Sas à rattacher ===== */
.sas-row { padding: 18px 24px; border-bottom: 1px solid var(--border); }
.sas-row:last-child { border-bottom: none; }
.sas-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sas-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sas-controls .f-select { width: auto; min-width: 240px; margin-bottom: 0; }

/* ===== Choix du chemin (Nouveau circuit) — 2 cartes radio (M2) ===== */
.chemin-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.chemin-card {
  position: relative; display: block; border: 1px solid var(--border2);
  border-radius: var(--radius-md); background: var(--card); padding: 14px 16px;
  cursor: pointer; transition: 0.15s;
}
.chemin-card input { position: absolute; opacity: 0; pointer-events: none; }
.chemin-card .ch-titre { font-weight: var(--weight-black); font-size: var(--text-base); margin-bottom: 3px; }
.chemin-card .ch-sub { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-normal); }
.chemin-card.active { border-color: var(--green); background: var(--green-soft); box-shadow: var(--shadow-focus); }
.chemin-card.active.navy { border-color: var(--navy); background: var(--navy-bg); box-shadow: var(--navy-glow); }
.chemin-card.active .ch-titre { color: var(--green-dark); }
.chemin-card.active.navy .ch-titre { color: var(--navy); }

/* ===== Notes d'appel (M1) — boutons + modale ===== */
.contact-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.contact-ligne .det-note { flex: 1; }
.btn-note {
  flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--navy-border); background: var(--card);
  font-weight: var(--weight-bold); font-size: var(--text-xs); color: var(--navy);
  white-space: nowrap; margin-top: 4px;
}
.btn-note:hover { background: var(--navy-bg); }
/* « Appeler » (lien tel:) — accent vert, aligné comme un btn-note */
a.btn-note.btn-appeler {
  display: inline-flex; align-items: center; text-decoration: none;
  color: var(--green-dark); border-color: rgba(47, 191, 122, 0.35);
}
a.btn-note.btn-appeler:hover { background: var(--green-soft); }
/* « Appeler » sans numéro : grisé, non cliquable */
.btn-note.btn-appeler.disabled {
  display: inline-flex; align-items: center; color: var(--muted);
  border-color: var(--border2); background: transparent;
  cursor: not-allowed; opacity: 0.7;
}
/* Bouton « Dicter » en cours d'écoute */
.btn-dictee.actif { background: var(--navy-bg); border-color: var(--navy); }
/* Modale « Noter un appel » — refonte SIG-7 #18 : sections respirantes,
   hiérarchie claire (contact → note → relance → actions), charte Lato/vert. */
.note-modal { max-width: 560px; }
.note-modal .f-label { margin-top: 4px; }
.note-modal .f-area { min-height: 120px; }
/* Barre IA « Résumé avec SOMA » : bloc vert clair sous la zone de note */
.note-ia-bar {
  background: var(--green-soft); border: 1px solid var(--green-border);
  border-radius: var(--radius-md); padding: 12px 14px; margin-top: 8px;
}
.note-ia-bar .note-ia-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-ia-bar .f-hint { color: var(--text2); }
/* « Pas réussi à joindre → SMS » : action secondaire, bloc discret */
.note-injoignable {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 4px; padding-top: 16px; border-top: 1px solid var(--border);
}
.note-injoignable .f-hint { margin: 0; flex: 1 1 200px; }
.btn-injoignable {
  display: inline-flex; align-items: center; gap: 6px; height: 32px;
  color: var(--navy); border-color: var(--navy-border);
}
.btn-injoignable svg { flex: none; }
.btn-injoignable:disabled { opacity: 0.6; cursor: wait; }
.note-relance-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border2); border-radius: var(--radius-md);
  margin-bottom: 10px; cursor: pointer; font-size: var(--text-base);
}
.note-relance-opt input[type="radio"] { accent-color: var(--green-dark); }
.note-relance-opt .f-input { margin: 0; height: 36px; width: 160px; }

/* ===== Carte Paiement (M3) — détail circuit ===== */
.paiement-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.paiement-ligne .f-label { margin: 0; }
.paiement-ligne .f-input { margin: 0; height: 38px; width: 170px; }
.paiement-ecart { font-weight: var(--weight-black); font-size: var(--text-md); }
.paiement-ecart.ok { color: var(--green-dark); }
.paiement-ecart.retard { color: var(--red); }

/* ===== M4 — Relance programmée : visible et modifiable partout ===== */
/* Timeline détail : entrée FUTURE (dot pointillée grise + libellé grisé) */
.tlc-evt.future { border-bottom: none; }
.tlc-evt .dot.future { background: transparent; border: 1.5px dashed var(--muted); width: 7px; height: 7px; }
.tlc-evt.future b { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.tlc-evt.future .when { font-style: italic; }
.tlc-relance-modif {
  margin-left: 8px; font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--green-dark); text-decoration: underline; cursor: pointer;
}
/* Input date « ancre » du calendrier natif (showPicker) — invisible mais rendu */
.relance-date-input { width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; }
.relance-date-input.visible {
  width: auto; height: 30px; opacity: 1; margin-left: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 8px;
  font-size: var(--text-xs); color: var(--text); background: var(--card);
}
/* Dashboard : chip discrète « relance 14/06 » dans la colonne droite */
.chip-relance {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; font-size: var(--text-xs); color: var(--muted); cursor: pointer;
}
.chip-relance svg { flex: none; }
.chip-relance:hover { color: var(--navy); text-decoration: underline; }
.r-days .chip-relance { display: flex; } /* sous le « Relance N envoyée », pas à côté */

/* ===== Responsive — tablette / petit écran ===== */
@media (max-width: 980px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .det-grid, .param-grid, .mail-grid { grid-template-columns: 1fr; }
  .fiche-stack .f-trio { grid-template-columns: 1fr; }
  .fiche-stack .f-cinq { grid-template-columns: 1fr; }
  /* Sous 980px : la ligne tableau (.row) cède la place à la carte (.mcard)
     — pas d'écrasement du grid 5 zones, on bascule en carte (mockup mobile). */
  #dash-liste .row { display: none; }
  #dash-liste .mcard {
    display: block; position: relative;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
    padding: 14px 16px 14px 22px; margin-bottom: 12px; cursor: pointer;
  }
  #dash-liste .mcard::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--green); opacity: 0.6;
  }
  #dash-liste .mcard.blocked::before { background: var(--red); opacity: 0.9; }
  #dash-liste .mcard.tocheck::before { background: var(--blue); opacity: 0.9; }
  #dash-liste .mcard.attente::before { background: var(--yellow); opacity: 0.9; }
  #dash-liste .mcard.chez-client::before { background: var(--text); opacity: 0.9; }
  #dash-liste .mcard.bouclee::before { background: var(--green); opacity: 0.9; }
  #dash-liste .mcard .r-meta { margin-bottom: 9px; }
  #dash-liste .mcard-etat { margin-bottom: 9px; }
  #dash-liste .mcard .stepper { margin-bottom: 6px; }
  #dash-liste .mcard .track { margin-bottom: 10px; }
  #dash-liste .mcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .r-act { justify-content: flex-start; }
  .chemin-duo { grid-template-columns: 1fr; }
}

/* ============================================================
   Responsive MOBILE — iPhone (375 / 390 px, Safari iOS)
   Objectif : outil 100 % pilotable au téléphone. Mise en page
   adaptée UNIQUEMENT — aucune fonction retirée, aucun comportement
   changé. var() partout, zéro valeur en dur, zéro emoji.
   ============================================================ */
@media (max-width: 640px) {

  /* --- Shell : air sur les bords (plainte « collé au bord ») --- */
  .shell { padding: 20px 16px 96px; }

  /* --- Topbar : logo + baseline à gauche (empilés), hamburger à droite --- */
  .topbar {
    flex-direction: row; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px;
  }
  .btn-retour { order: 0; width: 44px; height: 44px; margin-right: 8px; }
  .brand-mark { order: 1; }
  .nav-burger { display: inline-flex; order: 2; }
  /* SIG-9 #7 : baseline retirée du topbar mobile (elle vit dans le footer .dvh-signature) */
  .baseline { display: none; }

  /* --- Nav : panneau déroulant masqué par défaut, ouvert via .nav-open.
     Pleine largeur, 1 colonne, items tap-friendly. --- */
  .nav-row { display: none; }
  .nav-row.nav-open {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 6px; margin-bottom: 18px;
  }
  .nav-row.nav-open .nav-btn {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; height: 48px; padding: 0 16px; text-align: left;
    font-size: var(--text-base);
  }
  /* L'email + Déconnexion en bas, séparés du reste */
  .nav-row.nav-open .nav-spacer { display: none; }
  .nav-row.nav-open .nav-user {
    order: 98; margin-top: 8px; padding-top: 12px;
    border-top: 1px solid var(--border); font-size: var(--text-sm);
  }
  .nav-row.nav-open #btn-logout { order: 99; }

  /* --- Titres de page : air sous le titre (SIG-9 #1) --- */
  .page-title { font-size: var(--text-2xl); margin-bottom: 8px; }
  .page-sub { font-size: var(--text-base); margin-bottom: 18px; }
  /* Sous-titre du dashboard masqué en mobile (trop long, mange l'écran — SIG-9 #2) */
  .dash-titre-row .page-sub { display: none; }

  /* --- Sélecteur de mois (SIG-9 #3) : label « MOIS » masqué (aria conservé),
     select = pill compacte 44px alignée à droite (plus de barre orpheline) --- */
  .dash-titre-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .dash-mois { justify-content: flex-end; gap: 0; }
  .dash-mois-lbl {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .dash-mois select { flex: 0 0 auto; height: 44px; }

  /* --- KPI : 2 colonnes compactes, denses (SIG-9 #12) --- */
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
  .kpi-card { padding: 16px 16px; min-height: 92px; }
  .kpi-num { font-size: var(--text-3xl); }
  .kpi-num.small { font-size: var(--text-xl); padding-top: 8px; }

  /* --- Barre de commande : recherche + bouton « + » côte à côte, tap-friendly.
     SIG-9 #4 : une SEULE définition de .cta-compact (le double bloc qui s'écrasait
     est fusionné), tout à 48px, gap 10, recherche en pill. --- */
  .command-bar { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 18px; }
  .command-bar .search {
    height: 48px; padding: 0 18px; flex: 1; min-width: 0;
    border-radius: var(--radius-pill);
  }
  .command-bar .cta-compact {
    width: 48px; height: 48px; padding: 0; flex: 0 0 auto;
    justify-content: center; font-size: var(--text-base);
    box-shadow: none; border-radius: var(--radius-full);
  }
  .command-bar .cta-compact .cta-txt { display: none; }  /* mobile : juste le + rond, gain de place */
  .cb-btn, .cta { width: 100%; height: 48px; justify-content: center; }

  /* --- Onglets : scroll horizontal plutôt qu'écrasement --- */
  .tabs {
    gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 1px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: 0 0 auto; }

  /* --- Liste circuits : sur mobile, on bascule du tableau .row vers la CARTE
     .mcard (mockup mobile). Le .row desktop est masqué. --- */
  .dash-liste-detail .row { /* détail circuit garde son .row si présent ailleurs */ }
  #dash-liste .row { display: none; }
  .mcard {
    display: block; position: relative;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
    padding: 14px 16px 14px 22px; margin-bottom: 12px; cursor: pointer;
  }
  .mcard::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--green); opacity: 0.6;
  }
  .mcard.blocked::before { background: var(--red); opacity: 0.9; }
  .mcard.tocheck::before { background: var(--blue); opacity: 0.9; }
  .mcard.attente::before { background: var(--yellow); opacity: 0.9; }
  .mcard.chez-client::before { background: var(--text); opacity: 0.9; }
  .mcard.bouclee::before { background: var(--green); opacity: 0.9; }
  .mcard .r-title { font-size: var(--text-md); margin-bottom: 3px; }
  .mcard .r-meta { margin-bottom: 9px; flex-wrap: wrap; }
  .mcard-etat { margin-bottom: 9px; }
  .mcard .stepper { margin-bottom: 6px; }
  .mcard .track { margin-bottom: 10px; }
  .mcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .mcard-foot .z-act { gap: 8px; }
  .mcard-foot .btn { height: 44px; }
  .mcard-foot .kebab { width: 44px; height: 44px; }
  .mcard .kebab-menu { min-width: 170px; }

  /* Le stepper OPC→MOE→MOA (dashboard ET détail) ne doit pas être écrasé :
     il devient scrollable horizontalement, jamais comprimé. */
  .stepper {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; max-width: 100%;
  }
  .stepper::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 auto; }
  /* Actions en bas (écrans réutilisant .r-act ailleurs : SAS, détail) --- */
  .r-act { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .r-act .mini-btn { flex: 1 1 auto; min-height: 44px; height: 44px; }
  .r-act .row-x { width: 44px; height: 44px; flex: 0 0 44px; }

  /* --- Fiche chantier : champs en 1 colonne, mais 2 colonnes là où ça reste
     lisible sur mobile (SIG-7 #13 : densifier sans rendre illisible) --- */
  .f-trio, .fiche-stack .f-trio, .fiche-stack .f-cinq { grid-template-columns: 1fr; gap: 0; }
  .f-duo { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pilot-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
  /* La croix « retirer » du contact bonus reste accessible sous le téléphone */
  .f-cinq.bonus-ligne > div:last-child { flex-direction: row; align-items: flex-end; }

  /* --- Détail circuit : 2 colonnes → 1, stepper scrollable, PDF hauteur raisonnable --- */
  .det-grid, .param-grid { grid-template-columns: 1fr; gap: 16px; }
  /* SIG-9 #9 : la colonne ACTIONS (Actions / Paiement / Lecture) remonte AVANT
     l'aperçu PDF — le geste principal n'est plus sous 2 écrans de scroll.
     Le PDF + Historique (1ère carte) passent en second. */
  .det-grid > .card { order: 2; }
  .det-grid > div:last-child { order: 1; }
  .scan-frame { height: 50vh; min-height: 280px; }
  .scan-box { min-height: 180px; }
  .card { padding: 18px 16px; }

  /* Stepper navigable (détail) : scroll horizontal dans son bloc */
  .det-banner { font-size: var(--text-sm); }
  .btn-xl { height: 50px; }
  .btn-line { height: 48px; }

  /* --- Modale éditeur de mail : pleine largeur, scroll interne, croix atteignable --- */
  .sig-modal-overlay { padding: 12px; align-items: flex-start; }
  .modal {
    padding: 18px 16px; max-width: 100%;
    max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .sig-modal-title { font-size: var(--text-xl); }
  .mail-grid { grid-template-columns: 1fr; gap: 16px; }
  .cc-chips { gap: 6px; }
  /* L'échéancier de relances reste lisible (champs pleine largeur déjà via .f-input) */

  /* --- Modale « Noter un appel » (SIG-9 #5) : croix 44×44, save-bar empilée
     pleine largeur, input date qui ne déborde pas --- */
  .sig-modal-close { width: 44px; height: 44px; }
  .save-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .save-bar > button { width: 100%; min-height: 48px; }
  .note-modal .f-input[type="date"],
  .modal input[type="date"] { max-width: 100%; }

  /* --- Nouveau circuit : cartes radio empilées, zone de dépôt tap-friendly --- */
  .chemin-duo { grid-template-columns: 1fr; }
  .type-herite { flex-direction: column; align-items: stretch; }
  .drop-zone { padding: 28px 16px; }

  /* --- Sas à rattacher : contrôles empilés, select pleine largeur --- */
  .sas-controls { flex-direction: column; align-items: stretch; }
  .sas-controls .f-select { width: 100%; min-width: 0; }
  .sas-controls .mini-btn, .sas-controls .cb-btn { min-height: 44px; }

  /* --- Login : carte resserrée --- */
  .login-card { padding: 28px 22px; }

  /* --- iOS : font-size ≥16px sur les champs pour éviter le zoom auto au focus.
     Réglé sur les classes de saisie de l'outil (var() autorise la surcharge). --- */
  .f-input, .f-select, .f-area,
  .search input { font-size: var(--text-lg); } /* 16px : seuil anti-zoom iOS */
  /* hauteur de frappe confortable */
  .f-input, .f-select { height: 48px; }
  /* SIG-9 #8 : la règle compacte (.fiche-compact .f-input, 13px / 38px) battait
     la règle mobile par spécificité → zoom auto Safari. On la surcharge ici avec
     une spécificité supérieure pour garder le seuil anti-zoom. */
  .fiche-compact .f-input, .fiche-compact .f-select {
    height: 48px; font-size: var(--text-lg);
  }
  .fiche-compact .f-area { font-size: var(--text-lg); }
  .mini-btn { min-height: 36px; }
}

/* ============================================================
   SIG-8 + SIG-9 — Tunnel envoi situation (3 CAS) · « Déjà signé
   sur chantier » · fiche gros œuvre étendu.
   Réutilise la grammaire .chemin-card existante (charte Lato/vert,
   var() partout, zéro couleur en dur). Ajout en fin de fichier —
   ne touche pas à la passe design déjà faite.
   ============================================================ */

/* --- SIG-9 #17 (clarif Maxime 2026-06-12) : le type de marché n'est plus choisi
   ici (3 cartes retirées) — il est HÉRITÉ de la fiche, affiché en bandeau read-only
   « Type : CAS X — … (défini sur la fiche chantier) » + lien « Modifier sur la fiche ». --- */
.type-herite {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--green); background: var(--green-soft);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 16px;
}
.type-herite.navy { border-color: var(--navy); background: var(--navy-bg); }
.type-herite .th-corps { flex: 1; }
.type-herite .th-titre { font-weight: var(--weight-black); font-size: var(--text-base); color: var(--green-dark); }
.type-herite.navy .th-titre { color: var(--navy); }
.type-herite .th-sub { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-normal); margin-top: 2px; }
.type-herite .th-lien { flex: none; }

/* --- SIG-9 #18 : « Déjà signé — obtenu sur chantier » dans l'aperçu --- */
.evt .dot.done { background: var(--green); }
.evt.is-signe-papier b { color: var(--green-dark); }
.deja-signe-opt {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 6px; font-size: var(--text-sm); color: var(--text2);
  cursor: pointer;
}
.deja-signe-opt input[type="checkbox"] { accent-color: var(--green-dark); flex: none; }
.tag-sur-chantier {
  display: inline-flex; align-items: center;
  margin-left: 6px; font-weight: var(--weight-bold);
  font-size: var(--text-xs); color: var(--green-dark);
  background: var(--green-soft); border-radius: var(--radius-pill);
  padding: 1px 9px;
}

/* --- SIG-8 : fiche gros œuvre étendu (data-marche pilote l'affichage) ---
   Par défaut (marché privé) : EG en bloc optionnel discret, OPC/MOE/MOA classiques.
   En gros œuvre : bandeau visible, EG remonté en tête, hints adaptés. */
.marche-go-bandeau {
  display: none;
  background: var(--navy-bg); border: 1px solid var(--navy-border);
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 14px;
  font-size: var(--text-sm); color: var(--navy); font-weight: var(--weight-bold);
}
.opt-go { display: none; }
/* CAS 1 (prive_moe) : OPC optionnel/informatif (pas d'étape OPC dans le pipeline).
   Par défaut le libellé CAS 1 est masqué ; il remplace le libellé classique en CAS 1. */
.opt-opc { display: none; }
.fiche-stack[data-marche="prive_moe"] .opt-opc { display: inline; }
.fiche-stack[data-marche="prive_moe"] .opt-classique { display: none; }
.fiche-stack[data-marche="gros_oeuvre"] #fiche-intervenants { display: flex; flex-direction: column; }
.fiche-stack[data-marche="gros_oeuvre"] #fiche-intervenants .h-title { order: 0; }
.fiche-stack[data-marche="gros_oeuvre"] .marche-go-bandeau { display: block; order: 1; }
.fiche-stack[data-marche="gros_oeuvre"] #fiche-intervenants .role-opt[data-opt="eg"] { order: 2; }
.fiche-stack[data-marche="gros_oeuvre"] .role-classique-bloc { display: none; } /* CAS 3 : OPC/MOE/MOA VIRÉS — seul le conducteur de travaux compte (Maxime) */
.fiche-stack[data-marche="gros_oeuvre"] #fiche-intervenants .role-opt[data-opt="comptable"] { display: none; }
.fiche-stack[data-marche="gros_oeuvre"] .opt-classique { display: none; }
.fiche-stack[data-marche="gros_oeuvre"] .role-opt[data-opt="eg"] .opt-add { display: none; } /* contact unique toujours ouvert */
.eg-label-go { display: none; }
.fiche-stack[data-marche="gros_oeuvre"] .eg-label-go { display: inline; }
.fiche-stack[data-marche="gros_oeuvre"] .eg-label-classique { display: none; }

/* --- SIG-9 #18 : mention « sur chantier » sous un nœud signé en présentiel
   (statut signe_papier — stepper dashboard + détail). Discrète, sous le rôle. --- */
.s-sub {
  font-size: 9px; font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--green-dark); text-align: center;
  line-height: 1.2; margin-top: 2px; max-width: 60px;
}

/* --- SIG-9 #15 : modale Note / message — sélecteurs, canaux, repli libre,
   plein écran mobile (mêmes règles que la modale appel). --- */
.nm-field { margin-top: 12px; }
.nm-field:first-child { margin-top: 0; }
.nm-contact-meta { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
.nm-libre { margin-top: 10px; }
.fiche-stack[data-marche="gros_oeuvre"] .opt-go { display: inline; }