:root {
  /* Palette Symbiel : sombre premium + accent violet→turquoise, or (gold) en highlight.
     Refonte du 23/09 : le bleu d'action passe à #4361ee (5,0:1 sur blanc, AA) ; les
     variables utilisées sans être définies (--muted, --card, --hover, --faint, --danger)
     le sont désormais, et les couleurs en dur les plus fréquentes passent par ces jetons. */
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;   /* en-têtes de tableau, survols neutres */
  --surface-3: #f1f5f9;   /* pastilles neutres */
  --sidebar: #0c0e18;
  --sidebar-hover: #1a1f33;
  --sidebar-text: #cbd5e1;
  --sidebar-soft: #94a3b8;
  --border: #e2e8f0;
  --border-soft: #eef2f7;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-soft: #556274;   /* gris atténué mais contrasté AA sur fond clair (#f1f5f9) */
  --text-faint: #64748b;  /* 4,8:1 sur blanc — remplace #94a3b8 (2,6:1) pour du texte */
  --muted: var(--text-soft);
  --faint: var(--text-faint);
  --card: var(--surface);
  --hover: #f5f8ff;
  --primary: #4361ee;
  --primary-dark: #3149c9;
  --primary-soft: #eef2ff;
  --primary-ring: #4361ee33;
  --accent: #2fd4d0;      /* turquoise : sur fond sombre uniquement */
  --accent-ink: #0f766e;  /* turquoise lisible sur fond clair (5,5:1) */
  --violet: #a984ff;
  --gold: #f5c56b;
  --green: #15803d;
  --amber: #d97706;
  --red: #dc2626;
  --danger: var(--red);
  --radius: 10px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);
  /* Échelle typographique : sept tailles, pas une de plus. */
  --fs-2xs: 11px;  /* pastilles et étiquettes en capitales */
  --fs-xs: 12px;   /* textes d'aide, dates secondaires */
  --fs-sm: 13px;   /* libellés de champ, boutons compacts */
  --fs-md: 14px;   /* texte courant */
  --fs-lg: 16px;   /* titres de bloc */
  --fs-xl: 20px;   /* titres de page */
  --fs-2xl: 28px;  /* chiffres clés */
  --touch: 44px;   /* cible tactile minimale */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Accessibilité : focus clavier visible sur tous les éléments interactifs. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, tr[data-id]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
.nav-hidden-off { display: none !important; }
.nav-toggle-list { display: grid; gap: 8px; margin-top: 12px; max-width: 560px; }
.nav-toggle-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.nav-toggle-row:hover { border-color: var(--primary); background: var(--hover); }
.nav-toggle-row input { width: 18px; height: 18px; flex: none; cursor: pointer; }
.nav-toggle-txt { display: flex; flex-direction: column; line-height: 1.3; }
.nav-toggle-txt .cell-soft { font-size: var(--fs-sm); }

/* ---- Dossier chantier / rentabilité ---- */
.ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .ch-grid { grid-template-columns: 1fr; } }
.ch-col .ch-h { font-weight: 700; font-size: var(--fs-md); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-col .ch-h .ch-sub { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); margin-left: auto; }
.ch-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ch-form label { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: var(--fs-xs); color: var(--muted); position: relative; }
.ch-form label input { width: 100%; min-width: 0; padding: 7px 30px 7px 8px; border: 1px solid var(--border); border-radius: 8px; text-align: right; font-size: var(--fs-md); }
.ch-form label .u { position: absolute; right: 9px; bottom: 8px; color: var(--muted); font-size: var(--fs-xs); pointer-events: none; }
.ch-mini { margin-top: 10px; font-size: var(--fs-md); color: var(--muted); }
.ch-kpi { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.ch-kpi-lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ch-kpi-val { font-size: var(--fs-2xl); font-weight: 800; margin-top: 2px; }
.ch-kpi-val span { font-size: var(--fs-lg); font-weight: 700; margin-left: 6px; }
.ch-gauge { height: 8px; border-radius: 999px; background: #e5e7eb; margin-top: 10px; overflow: hidden; }
.ch-gauge span { display: block; height: 100%; border-radius: 999px; }
.ch-ok .ch-kpi-val { color: #15803d; } .ch-ok .ch-gauge span { background: #22c55e; }
.ch-warn .ch-kpi-val { color: #b45309; } .ch-warn .ch-gauge span { background: #f59e0b; }
.ch-bad .ch-kpi-val { color: #b91c1c; } .ch-bad .ch-gauge span { background: #ef4444; }
.ch-eac { margin-top: 12px; }
.ch-fav { color: #15803d; font-weight: 600; }
.ch-unfav { color: #b91c1c; font-weight: 600; }
.ch-table tr, .ch-table td { font-size: var(--fs-md); }
.ch-table .ch-total td { font-weight: 800; border-top: 2px solid var(--border); }
/* « à renseigner » plutôt qu'un 0 € qui se lirait comme un coût réellement nul. */
.ch-unknown { color: #b45309; font-style: italic; font-weight: 600; }
/* Un chiffre estimé s'affiche — mais se signale. Il oriente une décision sans avoir la
   valeur d'une saisie de l'entreprise. */
.ch-estim { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: #fef3c7; color: #92400e; border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.ch-note { font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }
/* ---- Fournisseurs & sous-traitants ---- */
/* Le rouge ne signale pas ici un simple oubli administratif : sans attestation à jour,
   l'entreprise est solidairement redevable des cotisations de son sous-traitant. */
.badge.sup-bad, .sup-state.sup-bad { background: #fee2e2; color: #991b1b; }
.badge.sup-warn, .sup-state.sup-warn { background: #fef3c7; color: #92400e; }
.badge.sup-ok, .sup-state.sup-ok { background: #dcfce7; color: #166534; }
.badge.sup-none, .sup-state.sup-none { background: var(--surface-3); color: var(--text-faint); }
.sup-state { border-radius: 10px; padding: 11px 13px; font-size: var(--fs-md); line-height: 1.45; }
.sup-state b { display: block; margin-bottom: 3px; }
/* ---- Achats ---- */
.badge.po-draft { background: var(--surface-3); color: var(--text-faint); }
.badge.po-sent { background: #dbeafe; color: #1e40af; }
.badge.po-part { background: #fef3c7; color: #92400e; }
.badge.po-done { background: #dcfce7; color: #166534; }
.badge.po-void { background: var(--border); color: var(--text-soft); text-decoration: line-through; }
.badge.po-late { background: #fee2e2; color: #991b1b; }
/* Une ligne qui entre au dépôt ne se comporte pas comme une dépense directe : le repère
   visuel évite de croire que le coût touche le chantier tout de suite. */
.badge.po-stock { background: #fff7ed; color: #9a3412; font-size: var(--fs-2xs); }
/* ---- Feuilles d'heures ---- */
/* La grille doit se remplir au clavier : cases larges, tabulation naturelle, et un total
   qui se met à jour sans qu'on cherche un bouton « enregistrer ». */
.ts-table th { white-space: nowrap; }
.ts-dnum { display: block; font-weight: 700; font-size: var(--fs-lg); }
.ts-cell { padding: 4px !important; }
.ts-h { width: 62px; text-align: right; padding: 6px 7px; border: 1px solid var(--border); border-radius: 7px; font-size: var(--fs-md); }
.ts-h:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px #5b7cfa22; }
.ts-h:disabled { background: var(--surface-2); color: var(--text-faint); }
.ts-today { background: var(--primary-soft); }
.ts-rowtot { background: var(--hover); }
.badge.ts-valid { background: #dcfce7; color: #166534; }
.ts-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 12px; font-size: var(--fs-md); }
/* Le dépassement de la durée légale n'est pas une erreur de saisie : c'est une information
   de paie, qui doit se voir sans crier. */
.ts-warn { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 5px 11px; }
/* Recherche de chantier dans la barre d'outils : même comportement que la bibliothèque BTP
   de l'éditeur de devis — on tape, on clique, la ligne apparaît. */
.ts-pick-list { display: none; position: absolute; z-index: 60; left: 0; top: calc(100% + 4px);
  min-width: 320px; max-width: 420px; max-height: 300px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(15,23,42,.16); }
.ts-pick-list.open { display: block; }
.ts-pick-row { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.ts-pick-row:last-child { border-bottom: none; }
.ts-pick-row:hover { background: #f5f8ff; }
.ts-pick-row b { display: block; font-size: var(--fs-md); font-weight: 600; }
.ts-pick-row span { font-size: var(--fs-xs); color: var(--muted); }
.ts-pick-vide { padding: 12px; font-size: var(--fs-sm); color: var(--muted); }

/* La colonne chantier porte le contexte : nom cliquable, client, cumul face au vendu. */
.ts-nom { min-width: 230px; }
.ts-open { cursor: pointer; border-bottom: 1px dotted transparent; }
.ts-open:hover { color: var(--primary); border-bottom-color: currentColor; }
.ts-ctx { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.ts-jauge { font-size: var(--fs-xs); font-weight: 600; border-radius: 5px; padding: 1px 7px; }
.ts-jauge.occ-ok { background: #dcfce7; color: #166534; }
.ts-jauge.occ-warn { background: #fef3c7; color: #92400e; }
.ts-jauge.occ-bad { background: #fee2e2; color: #991b1b; }
/* Une ligne proposée par le planning, encore vide : présente sans s'imposer. */
.ts-propose { background: #fbfcfe; }
.ts-tag { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--primary-soft); color: #3730a3; border-radius: 5px; padding: 1px 6px; }
.ts-tag-add { background: var(--surface-3); color: var(--text-soft); }
.ts-wend { background: #fbfcfe; }
.ts-over td { background: #fffafa; }
.ts-equipe { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ts-equipe span { font-size: var(--fs-2xs); background: var(--bg); border-radius: 5px; padding: 1px 7px; color: var(--text-soft); }
@media (max-width: 820px) { .ts-h { width: 52px; } }
/* ---- Équipe & habilitations ---- */
.hr-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.hr-card { display: flex; flex-direction: column; }
.hr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hr-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-xs); color: var(--muted); }
.hr-meta > span { background: var(--bg); border-radius: 6px; padding: 2px 8px; }
/* ---- Import DPGF ---- */
.dp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; font-size: var(--fs-sm); }
.dp-stats > span { background: var(--bg); border-radius: 7px; padding: 4px 10px; }
.dp-lot td { background: var(--hover); }
/* ---- Planning, vue Jour ---- */
/* Pensée pour le téléphone : une colonne, des pastilles pleine largeur, aucun défilement
   horizontal. La grille hebdomadaire fait 2,5 fois la largeur d'un écran de 390 px — on
   n'y voit que deux jours sur sept. */
.pj-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 10px 2px 14px; }
.pj-date { font-size: var(--fs-lg); font-weight: 700; text-transform: capitalize; }
.pj-today .pj-date::after { content: "aujourd'hui"; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; background: var(--primary); color: #fff; border-radius: 999px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; }
.pj-charge { font-size: var(--fs-sm); color: var(--muted); }
.pj-row { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 10px 12px; margin-bottom: 10px; }
.pj-abs { background: #fafbfc; }
.pj-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.pj-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-count { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.pj-ev { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 9px;
  border-left: 3px solid; margin-bottom: 6px; cursor: pointer; font-size: var(--fs-sm); }
.pj-ev:last-child { margin-bottom: 0; }
.pj-ic { flex: none; font-size: .95rem; line-height: 1.3; }
.pj-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pj-txt b { font-weight: 650; line-height: 1.3; }
.pj-txt span { font-size: var(--fs-xs); opacity: .8; }
.pj-per { font-style: italic; }
.pj-add { width: 100%; border: 1px dashed var(--border); background: none; border-radius: 9px;
  padding: 9px; color: var(--primary); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; font-family: inherit; }
.pj-add:hover { background: #f5f8ff; border-color: var(--primary); }
.pj-sep { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 18px 0 8px; }
.ch-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.ch-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-md); }
.ch-item .cell-soft { font-size: var(--fs-xs); margin-top: 2px; }
.ch-del { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: var(--fs-md); padding: 2px 4px; }
.ch-del:hover { color: #ef4444; }
/* Vue pilotage multi-chantiers */
.ch-kpirow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .ch-kpirow { grid-template-columns: repeat(2, 1fr); } }
.ch-stat { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.ch-stat .l { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ch-stat .v { font-size: var(--fs-xl); font-weight: 800; margin-top: 3px; }
.ch-stat .v span { font-size: var(--fs-md); font-weight: 700; margin-left: 4px; }
.ch-stat.ch-ok .v { color: #15803d; } .ch-stat.ch-warn .v { color: #b45309; } .ch-stat.ch-bad .v { color: #b91c1c; }
.ch-table tr[data-go]:hover { background: var(--hover); }
.ch-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; margin-left: 4px; }
.ch-b-ok { background: #dcfce7; color: #15803d; }
.ch-b-warn { background: #fef3c7; color: #b45309; }
.ch-b-bad { background: #fee2e2; color: #b91c1c; }
/* Marge prévisionnelle dans l'éditeur de devis (interne) */
.qe-margin { text-align: right; margin-top: 6px; font-weight: 600; font-size: var(--fs-md); padding: 7px 12px; border-radius: 8px; }
.qe-margin.ok { background: #dcfce7; color: #15803d; }
.qe-margin.low { background: #fef3c7; color: #b45309; }
.qe-margin.neg { background: #fee2e2; color: #b91c1c; }
/* Diagnostic de rentabilité + analyse IA */
.ch-diag { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.ch-diag-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); }
.ch-diag-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ch-diag-ok { background: #f0fdf4; border-color: #bbf7d0; } .ch-diag-ok .ch-diag-dot { background: #22c55e; }
.ch-diag-watch { background: #fffbeb; border-color: #fde68a; } .ch-diag-watch .ch-diag-dot { background: #f59e0b; }
.ch-diag-risk { background: #fef2f2; border-color: #fecaca; } .ch-diag-risk .ch-diag-dot { background: #ef4444; }
.ch-diag-list { margin: 8px 0 4px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-md); }
.ch-diag-actions { margin-top: 8px; }
.ch-ai-out { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; }
.ch-ai-txt { font-size: var(--fs-md); line-height: 1.55; white-space: normal; }
.ch-rowcause { font-size: var(--fs-xs); margin-top: 3px; font-weight: 600; }
.ch-rc-risk { color: #b91c1c; } .ch-rc-watch { color: #b45309; }
/* Fil d'étapes du dossier chantier */
.ch-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 6px 0 16px; }
.ch-step { border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.ch-step:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.ch-step.done { background: var(--primary-soft); color: #4f46e5; border-color: #c7d2fe; }
.ch-step.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.ch-step:disabled { cursor: default; opacity: .85; }
.ch-step-sep { color: var(--border-strong); font-size: var(--fs-sm); }
.ch-stbadge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--primary-soft); color: #4f46e5; vertical-align: middle; }
.ch-st-cloture { background: #dcfce7; color: #15803d; }
.ch-st-en_cours { background: #dbeafe; color: #1d4ed8; }
.ch-st-reception, .ch-st-facturation { background: #fef3c7; color: #b45309; }
/* Bilan de clôture */
.ch-closing { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.ch-closing .ch-h { margin-bottom: 8px; }
.ch-close-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ch-close-cell .l { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ch-close-cell .v { font-size: var(--fs-xl); font-weight: 800; }
.ch-close-cell .v span { font-size: var(--fs-md); font-weight: 700; margin-left: 3px; }
.ch-arrow { font-size: 1.3rem; color: var(--text-faint); }
.ch-bridge { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 3px; max-width: 420px; }
.ch-bridge li { display: flex; justify-content: space-between; font-size: var(--fs-md); padding: 2px 0; border-bottom: 1px dashed var(--border); }
/* Planning chantier (agenda) */
.pl-agenda { display: flex; flex-direction: column; gap: 14px; }
.pl-day { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
.pl-day.pl-today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.pl-date { background: var(--hover); padding: 8px 14px; font-weight: 700; font-size: var(--fs-md); border-bottom: 1px solid var(--border); }
.pl-day.pl-today .pl-date { color: var(--primary); }
.pl-rows { display: flex; flex-direction: column; }
.pl-row { display: grid; grid-template-columns: 160px 1fr auto; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.pl-row:last-child { border-bottom: none; }
.pl-row:hover { background: var(--hover); }
.pl-who { font-weight: 700; font-size: var(--fs-md); }
.pl-what { font-size: var(--fs-md); }
@media (max-width: 640px) { .pl-row { grid-template-columns: 1fr; gap: 2px; } .pl-per { justify-self: start; } }
/* Barre de facturation du chantier */
.ch-billbar { height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin-top: 4px; }
.ch-billbar span { display: block; height: 100%; border-radius: 999px; background: #6366f1; }
/* Barre modèles de devis */
.qtpl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
/* ---- Mode terrain (mobile technicien) : grandes cibles tactiles ---- */
.tr-head { margin-bottom: 16px; }
.tr-hello { font-size: var(--fs-xl); font-weight: 800; color: var(--text); }
.tr-today { color: var(--muted); font-size: var(--fs-lg); margin-top: 2px; }
.tr-quick { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
.tr-quick2 { grid-template-columns: 1fr 1fr; }
.tr-big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 92px; padding: 14px; border-radius: 16px; border: none; cursor: pointer;
  background: var(--primary); color: #fff; font-size: var(--fs-lg); font-weight: 700; box-shadow: 0 4px 14px rgba(91,124,250,.28); }
.tr-big:active { transform: scale(.985); }
.tr-big .tr-big-ic { font-size: 27px; line-height: 1; }
.tr-sec { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 18px 0 8px; }
.tr-list { display: flex; flex-direction: column; gap: 10px; }
.tr-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); cursor: pointer; }
.tr-card:active { background: var(--hover); }
.tr-title { font-weight: 700; font-size: var(--fs-lg); line-height: 1.3; }
.tr-sub { color: var(--muted); font-size: var(--fs-md); margin-top: 3px; }
.tr-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: var(--fs-2xs); font-weight: 700; vertical-align: middle; }
.tr-card-side { display: flex; align-items: center; gap: 10px; flex: none; }
.tr-hours { background: var(--primary-soft); color: #4f46e5; font-weight: 700; font-size: var(--fs-sm); padding: 3px 9px; border-radius: 999px; }
.tr-arrow { color: var(--border-strong); font-size: 1.5rem; line-height: 1; }
.tr-line { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: var(--fs-md); }
.tr-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.tr-ph { margin: 0; cursor: pointer; }
.tr-ph img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.tr-ph figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Devis express */
.dx-wrap { max-width: 620px; }
.dx-line { padding: 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--card); }
.dx-line input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: var(--fs-lg); }
.dx-nums { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; }
.dx-nums label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--muted); flex: 1; }
.dx-del { flex: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text-faint); font-size: var(--fs-lg); cursor: pointer; }
.dx-del:active { color: #ef4444; }
.dx-total { display: flex; align-items: baseline; gap: 10px; justify-content: flex-end; margin-top: 14px; font-size: var(--fs-lg); }
.dx-total b { font-size: var(--fs-xl); }
.dx-actions { display: flex; gap: 10px; margin-top: 16px; }
.dx-actions .btn-sm { flex: 1; padding: 13px; font-size: var(--fs-lg); }
@media (max-width: 820px) { .tr-photos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }

/* Maintenance préventive */
.mv-gen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mv-gen label { font-size: var(--fs-sm); color: var(--muted); }
.mv-gen input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.mv-list { display: flex; flex-direction: column; gap: 6px; }
.mv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-md); }
.mv-actions { display: flex; gap: 6px; }
.btn-xs { font-size: var(--fs-xs); padding: 3px 9px; border-radius: 7px; border: 1px solid var(--primary); background: var(--primary); color: #fff; cursor: pointer; }
.btn-xs.ghost { background: #fff; color: var(--muted); border-color: var(--border); }
.mv-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.mv-planifiee { background: #dbeafe; color: #1d4ed8; }
.mv-realisee { background: #dcfce7; color: #15803d; }
.mv-annulee { background: var(--surface-3); color: var(--text-faint); }
.mv-late { color: #b91c1c; font-size: var(--fs-xs); font-weight: 700; }
/* Historique des versions de devis */
.ver-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; font-size: var(--fs-md); cursor: pointer; }
.ver-row[data-ver]:hover { border-color: var(--primary); background: var(--hover); }
.ver-row.ver-current { cursor: default; background: var(--hover); }
.ver-row .v { font-weight: 700; }
/* Dossier chantier : synthèse équipe + dates */
.ch-dossier { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; margin-bottom: 16px; background: var(--hover); border: 1px solid var(--border); border-radius: 10px; font-size: var(--fs-md); }
.ch-dates { display: flex; gap: 12px; margin-top: 10px; }
.ch-dates label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--muted); flex: 1; }
.ch-dates input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xl); font-weight: 700; }
.logo {
  display: inline-block; width: 34px; height: 34px;
  background: url("/symbiel-glyph.svg") center/contain no-repeat;
}
.brand-name { letter-spacing: -.3px; }
.brand-suffix { color: var(--accent); font-weight: 800; }

/* ---------- Auth ---------- */
.auth-screen {
  min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 70% -10%, #a984ff2e, transparent), radial-gradient(900px 500px at 10% 110%, #2fd4d022, transparent), var(--bg);
  padding: 20px;
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--surface); border-radius: 16px;
  padding: 32px; box-shadow: var(--shadow-lg);
}
.auth-card .brand { justify-content: center; }
.auth-tagline { text-align: center; color: var(--text-soft); margin: 6px 0 24px; font-size: var(--fs-md); }
.auth-card h2 { font-size: var(--fs-xl); margin-bottom: 16px; }
.auth-card label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); margin-bottom: 12px; }
.auth-card input {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: var(--fs-md); color: var(--text);
}
.auth-card input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px #2563eb22; }
.auth-switch { text-align: center; font-size: var(--fs-sm); color: var(--text-soft); margin-top: 16px; }
.auth-error { color: var(--red); font-size: var(--fs-sm); text-align: center; margin-top: 12px; min-height: 18px; }

.btn-primary {
  width: 100%; padding: 11px; background: var(--primary); color: #fff; border: none;
  border-radius: 8px; font-size: var(--fs-md); font-weight: 600; transition: background .15s;
}
.btn-primary:hover { background: var(--primary-dark); }
.topbar-actions .btn-primary { width: auto; padding: 9px 16px; }

/* ---------- App layout ---------- */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--sidebar); color: var(--border-strong); display: flex; flex-direction: column;
  padding: 20px 14px; position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { color: #fff; font-size: var(--fs-xl); padding: 0 6px 22px; }
.sidebar nav { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; margin-right: -6px; padding-right: 6px; }
/* Ascenseur discret : présent quand il sert, invisible le reste du temps. */
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: #ffffff1f; border-radius: 3px; }
.sidebar nav:hover::-webkit-scrollbar-thumb { background: #ffffff33; }
.sidebar nav { scrollbar-width: thin; scrollbar-color: #ffffff1f transparent; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px;
  color: var(--border-strong); font-size: var(--fs-md); font-weight: 500; transition: background .12s, color .12s;
}
.nav-item .ic { width: 18px; text-align: center; opacity: .8; }
.nav-short { display: none; } /* libellé court réservé à la barre mobile */
/* ---- Familles du menu ---- */
/* Dix-huit entrées à plat, c'est une liste qu'on parcourt ; trois familles, c'est un menu
   qu'on lit. L'intertitre sert aussi de bouton de repli. */
.nav-group { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.nav-grp-h { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; padding: 5px 12px 4px;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.42); font-family: inherit; }
.nav-grp-h:hover { color: rgba(255,255,255,.75); }
.nav-grp-c { transition: transform .18s; transform: rotate(90deg); font-size: 13px; line-height: 1; }
.nav-group.collapsed .nav-grp-c { transform: rotate(0deg); }
.nav-grp-items { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.nav-group.collapsed .nav-grp-items { display: none; }
.nav-group.nav-hidden-off { display: none; }
/* Intertitres du panneau « Plus » (mobile) : mêmes familles, sans repli — sur un panneau
   qui se ferme au premier clic, replier n'apporterait rien. */
.more-grp { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-soft, var(--text-faint)); padding: 10px 14px 4px; }
.more-grp:first-child { padding-top: 4px; }
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-item.active .ic { opacity: 1; }
.sidebar-foot { border-top: 1px solid #ffffff1a; padding-top: 14px; flex: none; margin-top: 10px; }
.tenant-name { font-size: var(--fs-xs); color: var(--sidebar-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 0 6px 4px; }
.role-badge { font-size: var(--fs-2xs); color: #fde68a; background: #78350f66; display: inline-block; border-radius: 5px; padding: 1px 7px; margin: 0 6px 8px; font-weight: 600; }
.role-badge:empty { display: none; }
.user-row { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.user-name { font-size: var(--fs-md); color: #fff; font-weight: 500; }
.logout { color: var(--sidebar-soft); font-size: 18px; }
.logout:hover { color: #fff; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 28px;
  background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: var(--fs-xl); font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.search { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-md); width: 240px; }
.search:focus { outline: none; border-color: var(--primary); }
.view-root { padding: 28px; }

/* ---------- Dashboard filter ---------- */
.dash-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.dash-filter label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.dash-filter select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-md); background: var(--surface); font-family: inherit; }
.dash-filter select:focus { outline: none; border-color: var(--primary); }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.kpi .label { font-size: var(--fs-sm); color: var(--text-soft); font-weight: 600; }
.kpi .value { font-size: var(--fs-2xl); font-weight: 800; margin-top: 6px; letter-spacing: -.5px; }
.kpi .sub { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 4px; }
.kpi.accent { border-top: 3px solid var(--primary); }
.kpi.green .value { color: var(--green); }

.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 24px;
}
.panel-head { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: var(--fs-lg); display: flex; justify-content: space-between; align-items: center; }
.panel-body { padding: 8px 20px 16px; }

/* ---------- Centre d'action ---------- */
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 16px 20px; }
.action-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.action-head { display: flex; align-items: center; gap: 8px; padding: 11px 13px; font-weight: 700; font-size: var(--fs-md); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.action-ic { font-size: 15px; }
.action-count { margin-left: auto; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; background: var(--border); color: var(--text-soft); padding: 0 7px; }
.action-count.on { background: #e0e7ff; color: #3730a3; }
.action-count.red { background: #fee2e2; color: #991b1b; }
.action-count.amber { background: #fef3c7; color: #92400e; }
.action-list { padding: 4px 0; max-height: 240px; overflow-y: auto; }
.action-item { padding: 9px 13px; border-bottom: 1px solid var(--surface-3); cursor: pointer; transition: background .1s; }
.action-item:last-child { border-bottom: none; }
.action-item[data-go]:hover { background: var(--surface-2); }
.action-item:not([data-go]) { cursor: default; }
.ai-main { font-size: var(--fs-md); font-weight: 600; }
.ai-sub { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }
.action-empty { padding: 20px 13px; text-align: center; color: var(--green); font-size: var(--fs-sm); font-weight: 600; }

/* ---------- Conversion flow ---------- */
.conv-overall { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; color: var(--primary); background: #e0e7ff; padding: 3px 12px; border-radius: 20px; }
.conv-flow { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding: 6px 0; }
.conv-step { flex: 1 1 0; min-width: 92px; text-align: center; background: linear-gradient(180deg, var(--surface-2), var(--primary-soft)); border: 1px solid var(--border); border-radius: 10px; padding: 12px 6px; }
.conv-count { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.5px; }
.conv-label { font-size: var(--fs-xs); color: var(--text-soft); font-weight: 600; margin-top: 2px; }
.conv-time { font-size: var(--fs-2xs); color: var(--primary); font-weight: 600; margin-top: 4px; }
.conv-arrow { display: flex; align-items: center; flex-shrink: 0; }
.conv-arrow span { font-size: 12px; font-weight: 700; color: var(--primary); background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px; }

/* ---------- Funnel bars ---------- */
.funnel-row[data-go] { cursor: pointer; border-radius: 6px; padding-left: 6px; padding-right: 6px; margin: 0 -6px; transition: background .1s; }
.funnel-row[data-go]:hover { background: var(--surface-2); }
.info { font-size: var(--fs-2xs); color: var(--border-strong); cursor: help; }
.funnel-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.funnel-label { width: 130px; font-size: var(--fs-sm); color: var(--text-soft); font-weight: 600; flex-shrink: 0; }
.funnel-track { flex: 1; background: var(--border-soft); border-radius: 6px; height: 26px; position: relative; overflow: hidden; }
.funnel-fill { height: 100%; background: linear-gradient(90deg, var(--violet), var(--accent)); border-radius: 6px; min-width: 2px; transition: width .4s; }
.funnel-meta { width: 150px; text-align: right; font-size: var(--fs-sm); font-weight: 600; flex-shrink: 0; }
.funnel-meta .cnt { color: var(--text-soft); font-weight: 500; }

/* ---------- Tables ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--text-soft); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; transition: background .1s; }
tbody tr:hover { background: var(--surface-2); }
/* Colonnes de chiffres : alignées à droite pour que les ordres de grandeur se comparent
   d'un coup d'œil. La classe était utilisée dans plusieurs tableaux sans être définie. */
th.num { text-align: right; }
td.num { text-align: right; white-space: nowrap; }
.cell-strong { font-weight: 600; }
.cell-soft { color: var(--text-soft); }
.empty { padding: 48px; text-align: center; color: var(--text-soft); }
.empty .big { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin-bottom: 6px; }

/* ---------- Notifications ---------- */
.notif-wrap { position: relative; }
.bell-btn { position: relative; background: none; border: 1px solid var(--border); border-radius: 8px; width: 38px; height: 38px; font-size: var(--fs-lg); display: grid; place-items: center; }
.bell-btn:hover { background: var(--surface-2); }
.bell-badge { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; font-size: var(--fs-2xs); font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.notif-panel { position: absolute; top: 46px; right: 0; width: 320px; max-height: 420px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 40; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: var(--fs-md); }
.notif-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: #eff4ff; }
.notif-item.unread:hover { background: #e4edff; }
.notif-ic { font-size: 16px; flex-shrink: 0; }
.notif-title { font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; }
.notif-time { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }
.notif-empty { padding: 32px; text-align: center; color: var(--text-soft); font-size: var(--fs-sm); }

/* ---------- List toolbar ---------- */
.list-toolbar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 14px; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 600; background: #eef1f6; color: #516074; }
.pipe-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pipe-tab { padding: 7px 14px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); cursor: pointer; }
.pipe-tab:hover { border-color: var(--primary); }
.pipe-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-bar .fb-views { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.fb-view { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); cursor: pointer; }
.fb-view:hover { border-color: var(--primary); color: var(--primary-dark); }
.fb-view-del { color: var(--faint); font-weight: 700; }
.fb-view-del:hover { color: var(--red); }
.flt-row select, .flt-row input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; font-size: var(--fs-sm); font-family: inherit; }
/* Éditeur de lignes (devis/factures) */
.qe-incomplete { text-align: right; font-size: var(--fs-sm); margin-top: 4px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 10px; }
.line-table th, .line-table td { padding: 8px 8px; }
.line-table th:first-child, .line-table td:first-child { width: 1%; }
.line-table .li-ctrl { white-space: nowrap; text-align: right; }
.line-table .li-ctrl .link-btn { padding: 2px 4px; }
.li-section td { background: #f1f4fb; }
.li-section .li-label { font-weight: 700; color: var(--text); border: none; background: transparent; width: 100%; font-size: var(--fs-md); }
.li-text td { background: #fbfcfe; }
.li-text .li-label { font-style: italic; color: var(--text-soft); border: none; background: transparent; width: 100%; }
/* Affichage des lignes (fiche) */
.dl-section td { font-weight: 700; background: #f1f4fb; color: #2b3550; padding-top: 12px; }
.dl-text td { font-style: italic; color: var(--text-soft); }
/* Éditeur de devis plein écran (2 colonnes : formulaire + aperçu) */
.editor-2col { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
/* En dessous de 1400 px, deux colonnes étouffent la saisie : l'aperçu passe dessous. */
@media (max-width: 1400px) { .editor-2col { grid-template-columns: 1fr; } }
.editor-form { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.editor-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.editor-preview { position: sticky; top: 12px; }
.editor-preview-head { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 700; margin-bottom: 8px; }
#docPreview { border: 1px solid var(--border); border-radius: 14px; overflow: auto; max-height: calc(100vh - 130px); background: #e9edf3; padding: 16px; }
.badge.stage-nouveau { background: #e0e7ff; color: #3730a3; }
.badge.stage-qualifie { background: #cffafe; color: #155e75; }
.badge.stage-visite { background: #fef3c7; color: #92400e; }
.badge.stage-devis { background: #ffedd5; color: #9a3412; }
.badge.stage-negociation { background: #fae8ff; color: #86198f; }
.badge.stage-gagne { background: #dcfce7; color: #166534; }
.badge.stage-perdu { background: #fee2e2; color: #991b1b; }
.badge.type { background: var(--surface-3); color: var(--text-soft); }

/* Légende des couleurs d'étapes (en tête du pipeline) */
.stage-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.stage-legend li { display: inline-flex; }
.badge.qs-brouillon { background: var(--surface-3); color: var(--text-soft); }
.badge.qs-envoye { background: #dbeafe; color: #1e40af; }
.badge.qs-accepte { background: #dcfce7; color: #166534; }
.badge.qs-refuse { background: #fee2e2; color: #991b1b; }
.badge.inv-brouillon { background: var(--surface-3); color: var(--text-soft); }
.badge.inv-envoyee { background: #dbeafe; color: #1e40af; }
.badge.inv-emise { background: #e0e7ff; color: #3730a3; }
.badge.inv-payee { background: #dcfce7; color: #166534; }
.badge.inv-annulee { background: var(--surface-3); color: var(--text-faint); }
.badge.inv-en_retard { background: #fee2e2; color: #991b1b; }
.badge.inv-partiel { background: #fef3c7; color: #92400e; }
.badge.inv-avoir { background: #ede9fe; color: #6d28d9; }
.pay-summary { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 4px 0 2px; }
.pay-summary > div { display: flex; flex-direction: column; }
.pay-summary .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); font-weight: 600; }
.pay-summary b { font-size: var(--fs-lg); }
.dup-group { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; background: var(--surface); }
.dup-key { font-weight: 700; font-size: var(--fs-md); margin-bottom: 8px; }
.dup-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: var(--fs-md); cursor: pointer; }
.dup-row:first-of-type { border-top: 0; }
.dup-row .dup-name { font-weight: 600; flex: 1; }
.sirene-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.sirene-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: pointer; font-size: var(--fs-md); }
.sirene-item:hover { border-color: var(--primary); background: #f7f9ff; }
.badge.tks-nouveau { background: #dbeafe; color: #1e40af; }
.badge.tks-en_cours { background: #e0e7ff; color: #3730a3; }
.badge.tks-en_attente { background: #fef3c7; color: #92400e; }
.badge.tks-resolu { background: #dcfce7; color: #166534; }
.badge.tks-ferme { background: var(--surface-3); color: var(--text-faint); }
.badge.prio-basse { background: var(--surface-3); color: var(--text-faint); }
.badge.prio-normale { background: #e0f2fe; color: #075985; }
.badge.prio-haute { background: #ffedd5; color: #9a3412; }
.badge.prio-urgente { background: #fee2e2; color: #991b1b; }
.badge.cs-actif { background: #dcfce7; color: #166534; }
.badge.cs-en_attente { background: #fef3c7; color: #92400e; }
.badge.cs-expire { background: #fee2e2; color: #991b1b; }
.badge.cs-resilie { background: var(--surface-3); color: var(--text-soft); }
.badge.warn-badge { background: #fef3c7; color: #92400e; }
.kpi.warn { border-top: 3px solid var(--amber); }
.kpi.warn .value { color: var(--amber); }

/* ---------- Pipeline kanban ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.kanban-col { flex: 0 0 250px; background: var(--border-soft); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 180px); }
.kanban-col.drop-hover { outline: 2px dashed var(--primary); outline-offset: -2px; }
.kanban-col-head { padding: 12px 14px; font-size: var(--fs-sm); font-weight: 700; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; }
.kanban-col-head .sum { font-size: var(--fs-xs); color: var(--text-soft); font-weight: 600; }
.kanban-cards { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; }
.deal-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 12px;
  box-shadow: var(--shadow); cursor: grab; transition: box-shadow .12s, transform .05s;
}
.deal-card:hover { box-shadow: var(--shadow-lg); }
.deal-card.dragging { opacity: .5; }
.deal-card .dc-title { font-weight: 600; font-size: var(--fs-md); margin-bottom: 6px; }
.deal-card .dc-company { font-size: var(--fs-xs); color: var(--text-soft); margin-bottom: 8px; }
.deal-card .dc-foot { display: flex; justify-content: space-between; align-items: center; }
.deal-card .dc-amount { font-weight: 700; font-size: var(--fs-md); }
.col-nouveau .kanban-col-head { color: #3730a3; }
.col-qualifie .kanban-col-head { color: #155e75; }
.col-visite .kanban-col-head { color: #92400e; }
.col-devis .kanban-col-head { color: #9a3412; }
.col-negociation .kanban-col-head { color: #86198f; }
.col-gagne .kanban-col-head { color: #166534; }
.col-perdu .kanban-col-head { color: #991b1b; }

/* ---------- Detail / fiche 360 ---------- */
.detail-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.detail-title { font-size: var(--fs-xl); font-weight: 800; margin-bottom: 4px; }
.detail-sub { color: var(--text-soft); font-size: var(--fs-md); margin-bottom: 16px; }
.field-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.field-row:last-child { border-bottom: none; }
.field-row .k { color: var(--text-soft); }
.field-row .v { font-weight: 600; text-align: right; }
.detail-actions { display: flex; gap: 8px; margin-top: 16px; }
.btn-sm { padding: 7px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.btn-sm:hover { background: var(--surface-2); }
.btn-sm.danger { color: var(--red); border-color: #fecaca; }
.btn-sm.primary { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Timeline ---------- */
.timeline { position: relative; }
.tl-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.tl-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-3); font-size: var(--fs-md); }
.tl-body { flex: 1; min-width: 0; }
.tl-subject { font-weight: 600; font-size: var(--fs-md); }
.tl-meta { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }
.tl-note { font-size: var(--fs-sm); color: #334155; margin-top: 4px; white-space: pre-wrap; }
.tl-check { flex-shrink: 0; }
.tl-check input { width: 17px; height: 17px; cursor: pointer; }
.tl-done .tl-subject { text-decoration: line-through; color: var(--text-soft); }
.tl-dir { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; padding: 1px 7px; border-radius: 10px; vertical-align: middle; }
.tl-dir.in { background: #dcfce7; color: #166534; }
.tl-dir.out { background: #dbeafe; color: #1e40af; }
.tl-dir.cal { background: #ede9fe; color: #6d28d9; }

/* ---------- Capture (e-mail + agenda) ---------- */
.inbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card-h { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 8px; }
.muted { color: var(--text-soft); font-size: var(--fs-md); line-height: 1.5; margin: 0 0 14px; }
.copy-line { display: flex; gap: 8px; margin-bottom: 12px; }
.copy-line input { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-sm); padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 14px; font-size: var(--fs-md); font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.btn-ghost:hover { background: var(--bg); border-color: var(--primary); }
.btn-ghost.sm, .btn-primary.sm { padding: 7px 12px; font-size: var(--fs-sm); width: auto; }
.howto { margin: 12px 0; font-size: var(--fs-sm); color: var(--text-soft); }
.howto summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.howto ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
.howto li { margin-bottom: 4px; }
.warn-inline { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 8px 10px; border-radius: 8px; margin-top: 10px; font-size: var(--fs-sm); }
.feeds-list { margin: 14px 0 4px; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.feed-row:last-child { border-bottom: none; }
.feed-main { flex: 1; min-width: 0; }
.feed-label { font-weight: 600; font-size: var(--fs-md); }
.feed-sub { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }
.feed-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- Assistant IA ---------- */
.ai-card { border: 1px solid #c7d2fe; background: linear-gradient(180deg, #f5f6ff 0%, var(--surface) 60%); }
.ai-badge { font-size: var(--fs-2xs); font-weight: 700; color: var(--primary); background: var(--primary-soft); border: 1px solid #c7d2fe; border-radius: 20px; padding: 2px 10px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-out { margin-top: 12px; }
.ai-out:empty { display: none; }
.ai-text { font-size: var(--fs-md); line-height: 1.65; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.ai-src { font-size: var(--fs-2xs); color: var(--text-soft); margin-top: 6px; font-style: italic; }
/* Fil de discussion */
.ai-thread { margin-top: 12px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.ai-hint { font-size: var(--fs-sm); color: var(--text-soft); padding: 6px 2px; }
.ai-msg { display: flex; }
.ai-msg.me { justify-content: flex-end; }
.ai-bubble { max-width: 88%; font-size: var(--fs-md); line-height: 1.6; border-radius: 12px; padding: 10px 13px; }
.ai-msg.bot .ai-bubble { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-top-left-radius: 4px; }
.ai-msg.me .ai-bubble { background: var(--primary); color: #fff; border-top-right-radius: 4px; }
.ai-typing { color: var(--text-soft); font-style: italic; }
.ai-chatbar { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.ai-chatbar textarea { flex: 1; min-width: 0; resize: vertical; min-height: 40px; max-height: 140px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: var(--fs-md); background: var(--surface); color: var(--text); }
.ai-chatbar textarea:focus { outline: none; border-color: var(--primary); }
.ai-tasks { display: flex; flex-direction: column; gap: 8px; }
.ai-task { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-md); padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.ai-task input { margin-top: 3px; flex-shrink: 0; }

/* ---------- Onboarding (accueil guidé nouvel espace) ---------- */
.onboard { max-width: 720px; margin: 10px auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 28px 30px; }
.onboard-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.onboard-emoji { font-size: 40px; line-height: 1; }
.onboard-head h2 { font-size: var(--fs-xl); }
.onboard-progress { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.onboard-bar { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 999px; transition: width .3s; }
.onboard-steps { display: flex; flex-direction: column; gap: 10px; }
.onboard-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.onboard-step.is-done { background: var(--surface-2); opacity: .75; }
.onboard-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-md); background: var(--primary); color: #fff; }
.onboard-step.is-done .onboard-num { background: var(--green); }
.onboard-main { flex: 1; min-width: 0; }
.onboard-t { font-weight: 700; font-size: var(--fs-md); }
.onboard-sub { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 2px; }

/* ---------- Tableau de bord : barre d'outils ---------- */
.dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* ---------- RGPD ---------- */
.gdpr-box { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.gdpr-title { font-size: var(--fs-xs); font-weight: 700; color: var(--text-soft); margin-bottom: 8px; }

/* ---------- Conversation ticket (omnicanal) ---------- */
.tk-thread { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; margin-bottom: 14px; }
.tk-msg { display: flex; }
.tk-msg.out { justify-content: flex-end; }
.tk-msg.note { justify-content: center; }
.tk-bubble { max-width: 82%; font-size: var(--fs-md); line-height: 1.55; border-radius: 12px; padding: 9px 13px; }
.tk-msg.in .tk-bubble { background: var(--bg); border: 1px solid var(--border); border-top-left-radius: 4px; }
.tk-msg.out .tk-bubble { background: var(--primary-soft); border: 1px solid #c7d2fe; border-top-right-radius: 4px; }
.tk-msg.note .tk-bubble { background: #fffbeb; border: 1px solid #fde68a; max-width: 92%; }
.tk-head { font-size: var(--fs-2xs); color: var(--text-soft); font-weight: 600; margin-bottom: 4px; }
.tk-composer { border-top: 1px solid var(--border); padding-top: 12px; }
.tk-composer-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.tk-composer select { flex: 1; min-width: 130px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-sm); background: var(--surface); color: var(--text); }
.tk-composer textarea { width: 100%; resize: vertical; min-height: 64px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: var(--fs-md); background: var(--surface); color: var(--text); margin-bottom: 8px; }
.tk-send-opt { flex: 1; font-size: var(--fs-sm); color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
.tk-composer-row .btn-sm { margin-left: auto; }

/* ---------- Scoring prédictif ---------- */
.score-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.score-row:last-child { border-bottom: none; }
.score-row:hover { background: var(--bg); }
.score-pill { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff; }
.band-chaud, .band-eleve { background: #dc2626; }
.band-tiede, .band-moyen { background: #f59e0b; }
.band-froid, .band-faible { background: var(--text-faint); }
.score-main { flex: 1; min-width: 0; }
.score-name { font-weight: 600; font-size: var(--fs-md); }
.score-factors { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.score-factor { font-size: var(--fs-2xs); padding: 1px 7px; border-radius: 8px; border: 1px solid var(--border); white-space: nowrap; }
.score-factor.pos { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.score-factor.neg { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.score-side { flex-shrink: 0; text-align: right; font-weight: 600; font-size: var(--fs-sm); display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.score-band-lbl { font-size: var(--fs-2xs); font-weight: 700; padding: 1px 8px; border-radius: 8px; color: #fff; }

.section-h { font-size: var(--fs-lg); font-weight: 700; margin: 4px 0 12px; display: flex; justify-content: space-between; align-items: center; }
.link-btn { background: none; border: none; color: var(--primary); font-size: var(--fs-sm); font-weight: 600; }

/* chip list */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { background: var(--surface); border-radius: 14px; width: 100%; max-width: 520px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: var(--fs-lg); font-weight: 700; }
.modal-close { border: none; background: none; font-size: var(--fs-xl); color: var(--text-soft); }
.modal-body { padding: 20px 22px; overflow-y: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.field input, .field select, .field textarea {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-md); font-family: inherit; color: var(--text); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px #2563eb22; }
.field textarea { resize: vertical; min-height: 70px; }
/* Validation champ par champ : champ en erreur + message inline */
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: var(--red); box-shadow: 0 0 0 3px #dc262622; }
.field-error { font-size: var(--fs-xs); font-weight: 600; color: var(--red); }
.switch-row { display: flex; align-items: center; gap: 9px; font-size: var(--fs-md); margin: 4px 0 12px; cursor: pointer; }
.switch-row input { width: 17px; height: 17px; accent-color: var(--primary); }
.catalog-pick { font-size: var(--fs-sm); padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--primary); font-weight: 600; background: #fff; cursor: pointer; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Squelettes de chargement (shimmer) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skeleton { padding: 8px 2px; }
.skel-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.skel { display: inline-block; border-radius: 6px; background: linear-gradient(90deg, #e9eef5 25%, #f4f7fb 37%, #e9eef5 63%); background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite; }
.skel-line { height: 12px; }
.skel-line.w60 { width: 60%; }
.skel-line.w30 { width: 30%; }
@keyframes skel-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---------- Bandeau vérification e-mail ---------- */
.verify-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: #fef3c7; color: #92400e; padding: 10px 18px; font-size: var(--fs-md); font-weight: 600; border-bottom: 1px solid #fde68a; }
.verify-btn { background: #92400e; color: #fff; border: none; border-radius: 7px; padding: 6px 14px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.verify-btn:hover { background: #78350f; }
.verify-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--sidebar); color: #fff; padding: 12px 20px; border-radius: 9px; font-size: var(--fs-md); font-weight: 500; box-shadow: var(--shadow-lg); z-index: 200; }

/* Menu "Plus" (mobile) : masqué en desktop */
.nav-more { display: none; }
button.nav-more { background: none; border: none; font-family: inherit; }
.more-sheet { display: none; }

@media (max-width: 820px) {
  /* Seuls html et body bornent la largeur : .app et .main ne coupent plus rien (le contenu
     trop large défile dans son propre conteneur, cf. « Refonte visuelle » en fin de fichier). */
  html, body { overflow-x: hidden; max-width: 100%; }
  /* « hidden » fait de body un conteneur de défilement qui ne défile jamais : tout élément
     « sticky » (barre du haut, boutons de l'éditeur, barre d'enregistrement) restait alors
     immobile. « clip » coupe pareillement sans créer de conteneur de défilement. */
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
  .app { grid-template-columns: 1fr; }
  .inbox-grid { grid-template-columns: minmax(0, 1fr); }
  .inbox-grid > * { min-width: 0; }
  .sidebar { position: fixed; bottom: 0; top: auto; left: 0; right: 0; width: 100%; height: auto; flex-direction: row; z-index: 50;
    padding: 8px 0; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #ffffff1f; box-shadow: 0 -4px 18px rgba(0, 0, 0, .22); }
  .sidebar-brand, .sidebar-foot { display: none; }
  .sidebar nav { flex: 1; min-width: 0; flex-direction: row; justify-content: space-around; gap: 0; overflow: visible; margin-right: 0; padding-right: 0; }
  /* Barre du bas : icône au-dessus, libellé en dessous — plus grand et plus lisible. */
  .nav-item { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 5px; padding: 8px 2px; font-size: var(--fs-xs); font-weight: 500; line-height: 1.2; text-align: center; border-radius: 10px; overflow: hidden; white-space: nowrap; }
  .nav-item .ic { font-size: 23px; width: auto; }
  .nav-item.active { font-weight: 600; }
  /* Barre mobile : libellé court pour « Tableau de bord » → « Accueil ». */
  .nav-full { display: none; }
  .nav-short { display: inline; }
  .main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .view-root { padding: 16px; }
  /* Barre du haut : la recherche fixe (240px) poussait cloche + "Nouveau" hors écran → la rendre flexible. */
  .topbar { padding: 14px 16px; gap: 10px; }
  .topbar { align-items: center; }
  .topbar h1 { font-size: var(--fs-xl); flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.2; }
  .topbar-actions { flex: 0 1 auto; min-width: min-content; gap: 8px; }
  .topbar-actions .notif-wrap, .topbar-actions .btn-primary { flex: none; }
  /* La recherche cède la place au titre : elle reste utilisable, mais ne l'écrase plus. */
  .search { flex: 1 1 auto; min-width: 0; width: auto; max-width: 120px; }
  .topbar-actions .btn-primary { padding: 9px 12px; white-space: nowrap; }
  /* Tables : scroll horizontal au lieu de couper les colonnes hors écran. */
  .table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  /* Moins de rembourrage : ~12 % de largeur gagnée sur toutes les listes, sans masquer
     aucune colonne — préférable à cacher des données que l'utilisateur cherche. */
  thead th { padding: 10px 10px; }
  tbody td { padding: 11px 10px; }
  /* Filtres tableau de bord : passer à la ligne au lieu de déborder. */
  .dash-filter { flex-wrap: wrap; }
  /* Barre du bas : 4 rubriques principales + "Plus" ; le reste va dans le panneau. */
  .nav-more-item { display: none; }
  /* La barre du bas est une rangée : les familles ne doivent pas y créer de niveau. */
  .nav-group { display: contents; }
  .nav-grp-h { display: none; }
  .nav-grp-items { display: contents; }
  .nav-group.collapsed .nav-grp-items { display: contents; }
  .nav-more { display: flex; }
  .more-sheet:not(.hidden) {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px; z-index: 60;
    background: var(--sidebar); border-radius: 14px; padding: 8px; box-shadow: var(--shadow-lg);
  }
  .more-link { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 9px; color: var(--border-strong); font-size: var(--fs-lg); font-weight: 500; }
  .more-link .ic { width: 18px; text-align: center; opacity: .8; }
  .more-link:hover, .more-link.active { background: var(--sidebar-hover); color: #fff; }
}
.ch-kpi-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 8px; line-height: 1.35; }

/* ---- Centre d'alertes ---- */
.nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: auto; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: var(--fs-2xs); font-weight: 700; text-align: center; line-height: 18px; }
.al-kpis { display: flex; gap: 12px; flex-wrap: wrap; }
.al-kpi { border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; background: var(--card); min-width: 140px; }
.al-kpi .l { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.al-kpi .v { font-size: var(--fs-2xl); font-weight: 800; }
.al-kpi-bad .v { color: #b91c1c; }
.al-list { display: flex; flex-direction: column; gap: 6px; }
.al-row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 12px; align-items: center; cursor: pointer;
  padding: 11px 14px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; background: var(--card); }
.al-row:hover { border-color: var(--primary); background: var(--hover); }
.al-critique { border-left-color: #ef4444; }
.al-attention { border-left-color: #f59e0b; }
.al-ic { font-size: 17px; text-align: center; }
.al-main { display: flex; flex-direction: column; min-width: 0; }
.al-title { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-detail { font-size: var(--fs-sm); color: var(--muted); }
.al-amount { font-weight: 700; font-size: var(--fs-md); white-space: nowrap; }
.al-action { font-size: var(--fs-sm); color: var(--primary); font-weight: 600; white-space: nowrap; }
.al-clear { display: flex; align-items: center; gap: 16px; padding: 26px; border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 14px; }
.al-clear-ic { font-size: 30px; color: #15803d; }
@media (max-width: 640px) {
  .al-row { grid-template-columns: 22px 1fr; row-gap: 4px; }
  .al-amount, .al-action { grid-column: 2; justify-self: start; font-size: var(--fs-sm); }
}

/* ---- Planning : calendrier des ressources ---- */
.pl-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-nav { display: flex; align-items: center; gap: 6px; }
.pl-period { font-weight: 700; margin-left: 8px; text-transform: capitalize; }
.pl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-switch { display: flex; gap: 4px; }
.pl-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 10px; }
.pl-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
/* Vue semaine : ressources en lignes */
.pl-week { border: 1px solid var(--border); border-radius: 14px; overflow: auto; background: var(--card);
  max-height: calc(100vh - 250px); box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.pl-whead { position: sticky; top: 0; z-index: 3; background: var(--hover); backdrop-filter: saturate(1.4) blur(2px); }
.pl-whead .pl-wres { z-index: 4; }
.pl-wrow { display: grid; grid-template-columns: 150px repeat(7, minmax(112px, 1fr)); border-bottom: 1px solid var(--border); }
.pl-wrow:last-child { border-bottom: none; }
.pl-whead { position: sticky; top: 0; background: var(--hover); z-index: 2; }
.pl-wres { padding: 9px 12px; font-weight: 600; font-size: var(--fs-md); border-right: 1px solid var(--border);
  position: sticky; left: 0; background: var(--card); z-index: 2; display: flex; align-items: center; gap: 9px; }
/* Initiales colorées : on repère une personne à la forme et à la teinte, plus vite qu'en lisant. */
.pl-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.pl-ava-mat { background: var(--surface-3); font-size: .95rem; }
.pl-wname { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pl-wname > span:first-child, .pl-wcount { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-wcount { font-weight: 500; font-size: var(--fs-2xs); color: var(--muted); }
.pl-whead .pl-wres { background: var(--hover); }
.pl-wday { padding: 7px 6px 8px; text-align: center; border-right: 1px solid var(--border); }
/* Plan de charge : combien de personnes sont prises ce jour-là. C'est ce qu'on cherche
   vraiment en regardant une semaine — « puis-je caser ce chantier jeudi ? ». */
.pl-load { display: block; height: 4px; border-radius: 2px; background: #e8edf5; margin: 5px 8px 3px; overflow: hidden; }
.pl-load-fill { display: block; height: 100%; border-radius: 2px; transition: width .3s; }
.pl-free .pl-load-fill { background: #22c55e; }
.pl-busy .pl-load-fill { background: #f59e0b; }
.pl-full .pl-load-fill { background: #ef4444; }
.pl-load-t { font-size: var(--fs-2xs); color: var(--muted); font-weight: 600; }
/* Week-end en retrait : la semaine de travail doit ressortir d'elle-même. */
.pl-wend { background: #fbfcfe; }
.pl-wend .pl-wdname, .pl-wend .pl-wdnum { opacity: .5; }
/* Case libre : elle s'annonce cliquable au survol, sans meubler l'écran le reste du temps. */
.pl-libre { cursor: pointer; }
.pl-libre:hover { background: #f5f8ff; box-shadow: inset 0 0 0 1.5px var(--primary); border-radius: 8px; }
.pl-libre::after { content: '+'; display: none; color: var(--primary); font-size: 1.15rem; font-weight: 700;
  align-self: center; margin: auto; opacity: .8; }
.pl-libre:hover::after { display: block; }
.pl-wrow:hover .pl-wres { background: var(--hover); }
.pl-wdname { display: block; font-size: var(--fs-xs); text-transform: uppercase; color: var(--muted); }
.pl-wdnum { display: block; font-weight: 700; font-size: var(--fs-lg); }
.pl-wcell { min-height: 72px; padding: 5px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
/* Aujourd'hui : un repère franc — un liseré vertical, pas une nuance qu'il faut chercher. */
.pl-wtoday { background: var(--primary-soft); box-shadow: inset 2px 0 0 var(--primary); }
.pl-whead .pl-wtoday .pl-wdnum { background: var(--primary); color: #fff; border-radius: 999px;
  display: inline-flex; width: 23px; height: 23px; align-items: center; justify-content: center; }
.pl-over { background: #dbeafe; outline: 2px dashed var(--primary); outline-offset: -3px; }
/* Vue mois */
.pl-month { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
.pl-mhead { padding: 8px; text-align: center; font-size: var(--fs-xs); text-transform: uppercase; color: var(--muted); background: var(--hover); font-weight: 700; }
.pl-mcell { min-height: 96px; padding: 5px; border-top: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.pl-mnum { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.pl-moff { background: #fafbfc; } .pl-moff .pl-mnum { opacity: .4; }
.pl-mtoday .pl-mnum { background: var(--primary); color: #fff; border-radius: 999px; width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; }
.pl-more { font-size: var(--fs-xs); color: var(--muted); padding-left: 3px; }
/* Pastilles d'événement */
.ev { display: flex; align-items: flex-start; gap: 5px; padding: 5px 7px; border-radius: 8px; font-size: var(--fs-xs);
  cursor: pointer; border-left: 3px solid; overflow: hidden; transition: transform .12s, box-shadow .12s; }
.ev:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,.13); filter: none; }
/* Deux lignes plutôt qu'une ligne tronquée : « Rénovation CT… » ne dit rien, alors que
   « Rénovation CTA + désenfumage » se lit. La colonne a la place, autant s'en servir. */
.ev-t { font-weight: 600; overflow: hidden; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ev-s { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-ic { flex: none; font-size: .8rem; }

.ev-dragging { opacity: .45; }
.ev-done { opacity: .5; text-decoration: line-through; }
.ev-chantier, i.ev-chantier { background: var(--primary-soft); border-color: #6366f1; color: #3730a3; }
.ev-maint, i.ev-maint { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.ev-rdv, i.ev-rdv { background: #dcfce7; border-color: #22c55e; color: #14532d; }
.ev-tache, i.ev-tache { background: var(--surface-3); border-color: var(--text-faint); color: #334155; }
@media (max-width: 820px) {
  .pl-wrow { grid-template-columns: 96px repeat(7, minmax(88px, 1fr)); }
  .pl-mcell { min-height: 72px; }
  .ev-s { display: none; }
}
/* Absences et conflits dans le planning */
.ev-abs, i.ev-abs { background: var(--border); border-color: var(--text-faint); color: #334155; }
/* Matériel dans le planning : une teinte distincte des personnes, pour qu'un coup d'œil
   suffise à séparer « qui » de « avec quoi ». */
.ev-res, i.ev-res { background: #fff7ed; border-color: #f97316; color: #9a3412; }
.ev-immo, i.ev-immo { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.pl-wsep .pl-wres { background: var(--surface-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.pl-wsepcell { background: var(--surface-2); }
.pl-wresmat { font-weight: 600; }
.pl-wref { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-faint); }
/* Jauge d'occupation du parc : verte tant qu'il reste de la marge, rouge quand le matériel
   est saturé — c'est le signal « il faut en louer un deuxième ». */
.occ { height: 6px; border-radius: 3px; background: var(--border-soft); overflow: hidden; max-width: 130px; }
.occ-bar { height: 100%; border-radius: 3px; }
.occ-ok { background: #16a34a; }
.occ-warn { background: #f59e0b; }
.occ-bad { background: #dc2626; }
.row-off { opacity: .55; }
/* ---- Vue Gantt ---- */
/* Une ligne par chantier, une piste en position relative, une barre positionnée en % :
   le serveur fournit déjà left/width, l'interface ne recalcule aucune date. */
.gt { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
.gt-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.gt-row:last-child { border-bottom: none; }
.gt-name { width: 240px; min-width: 240px; padding: 9px 12px; border-right: 1px solid var(--border); font-size: var(--fs-md); cursor: pointer; }
.gt-name:hover { background: var(--hover); }
.gt-track { position: relative; flex: 1; min-height: 44px; background: repeating-linear-gradient(to right, transparent, transparent calc(100% / 12 - 1px), var(--surface-3) calc(100% / 12 - 1px), var(--surface-3) calc(100% / 12)); }
.gt-head { background: var(--hover); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.gt-head .gt-track { min-height: 30px; background: none; }
.gt-cols { display: flex; }
.gt-col { border-right: 1px solid var(--border); padding: 7px 6px; overflow: hidden; white-space: nowrap; }
.gt-col:last-child { border-right: none; }
/* La barre porte deux informations : sa couleur dit l'état de la marge, son remplissage
   l'avancement réel. Un chantier vert rempli à 20 % en fin de période saute aux yeux. */
.gt-bar { position: absolute; top: 8px; height: 26px; border-radius: 6px; border: 1px solid; display: flex; align-items: center; overflow: hidden; cursor: pointer; }
.gt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.45); }
.gt-lbl { position: relative; padding: 0 8px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-ok, i.gt-ok { background: #bbf7d0; border-color: #16a34a; color: #14532d; }
.gt-watch, i.gt-watch { background: #fde68a; border-color: #f59e0b; color: #78350f; }
.gt-risk, i.gt-risk { background: #fecaca; border-color: #dc2626; color: #7f1d1d; }
.gt-late, i.gt-late { background: #ddd6fe; border-color: #7c3aed; color: #4c1d95; }
/* Barre tronquée par le bord de la fenêtre : le chevron dit qu'elle continue au-delà. */
.gt-clipl { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gt-clipr { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; opacity: .6; z-index: 2; }
.gt-badge { font-size: var(--fs-2xs); background: #ede9fe; color: #5b21b6; border-radius: 5px; padding: 1px 6px; vertical-align: middle; }
@media (max-width: 760px) { .gt-name { width: 140px; min-width: 140px; } }

/* ---------- Lisibilité sur tablette et mobile ---------- */
/* Constat de l'audit du 18/08 : sur écran étroit, plusieurs libellés étaient coupés sans
   moyen de les lire — sur mobile il n'y a pas de survol, donc pas d'infobulle de secours.
   Le parti pris ici est de laisser le texte passer à la ligne plutôt que de le tronquer. */
@media (max-width: 820px) {
  /* Planning : une pastille d'intervention tenait sur une seule ligne rognée
     (« Rénovation CTA + désenfum… »). On l'autorise à s'étaler sur trois lignes. */
  /* Aucune limite de lignes : la pastille s'agrandit autant qu'il faut. Sur mobile il n'y a
     pas de survol, donc pas d'infobulle de secours — un libellé coupé est un libellé perdu.
     La densité cède devant la lisibilité. */
  .ev { align-items: flex-start; overflow: visible; }
  .ev-t { white-space: normal; overflow: visible; text-overflow: clip; display: block; line-height: 1.22; }
  .ev-s { white-space: normal; }
  .pl-wcell { min-height: 74px; }
  .pl-wrow { grid-template-columns: 128px repeat(7, minmax(124px, 1fr)); }
  .pl-wres { width: 128px; }

  /* Centre d'alertes : le libellé cédait la place à la mention « … → » alors que toute la
     ligne est déjà cliquable. On supprime la mention et on laisse le titre respirer. */
  .al-row { grid-template-columns: 22px 1fr auto; gap: 8px; }
  .al-action { display: none; }
  .al-title { white-space: normal; overflow: visible; text-overflow: clip; }

  /* Gantt : le nom du chantier est l'information, pas la barre. */
  .gt-name { font-size: var(--fs-sm); }
  .gt-lbl { font-size: var(--fs-xs); }
}

@media (max-width: 640px) {
  /* Parc matériel et stock : les deux boutons d'action tenaient sur une ligne large.
     Empilés, ils restent atteignables sans faire défiler le tableau jusqu'au bout. */
  .table-wrap td .btn-sm { display: block; width: 100%; margin: 2px 0; }
  /* Jauge d'occupation : la barre et son libellé chiffré se chevauchaient. */
  .occ { max-width: 90px; }
}
/* ---- Stock de dépôt ---- */
/* La liste de réapprovisionnement est le seul écran vraiment actionnable du module :
   ce qu'il faut commander, sans parcourir tout le dépôt. */
.st-order { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st-chip { font-size: var(--fs-xs); border-radius: 6px; padding: 3px 9px; border: 1px solid; }
.st-chip.st-bas { background: #fef3c7; border-color: #f59e0b; color: #78350f; }
.st-chip.st-rupture { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }
.badge.st-bas { background: #fef3c7; color: #78350f; }
.badge.st-rupture { background: #fee2e2; color: #7f1d1d; }
.st-warn { color: #b45309; }
.st-head { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 0 2px; }
.st-head > div { display: flex; flex-direction: column; }
.st-head b { font-size: var(--fs-lg); }
.st-moves { max-height: 320px; overflow-y: auto; }
.ev-conflit { box-shadow: 0 0 0 2px #ef4444 inset; }
.pl-absent { background: repeating-linear-gradient(45deg, var(--surface-3), var(--surface-3) 6px, var(--border) 6px, var(--border) 12px); }

/* Champ « identifiant » de l'écran de changement de mot de passe : lu par les gestionnaires de mots de passe, invisible. */
.champ-identifiant-cache { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; left: -9999px !important; }
.form-auth { margin: 0; }

/* ======================================================================================
   Refonte visuelle et usage sur téléphone (23/09/2026)
   Analyse : docs/analyse-symbiel-gestion-2026-09-23/3-analyse-visuelle.md. Les règles
   ci-dessous priment sur celles, plus anciennes, qui les précèdent.
   ====================================================================================== */

/* ---- Base typographique ---- */
/* Le texte courant est à 14 px : un paragraphe d'aide sans taille explicite n'hérite plus
   des 16 px du navigateur (il était plus gros que les libellés de 13 px qu'il explique). */
body { font-size: var(--fs-md); line-height: 1.45; }
h1, h2, h3 { line-height: 1.25; }
p.cell-soft, div.cell-soft, span.cell-soft:not(td *) { font-size: var(--fs-sm); line-height: 1.45; }
.field .cell-soft, .field > span.cell-soft, .field > p { font-size: var(--fs-xs) !important; line-height: 1.4; color: var(--text-soft); }
.detail-title { font-size: var(--fs-xl); }
.info { color: var(--text-faint); }
.more-grp { color: var(--sidebar-soft); }
/* Le turquoise #2fd4d0 n'est lisible que sur fond sombre (10,5:1) ; sur fond clair
   (écran de connexion) il tombait à 1,8:1. */
.auth-card .brand-suffix { color: var(--accent-ink); }
.badge, .ch-badge, .mv-badge, .ch-stbadge { white-space: nowrap; }
tbody td.cell-strong:first-child { white-space: nowrap; }

/* ---- Focus clavier ---- */
:where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.sidebar :focus-visible, .more-sheet :focus-visible { outline-color: var(--accent); }
tbody tr[tabindex]:focus-visible { outline-offset: -2px; background: var(--hover); }
.user-name-btn { cursor: pointer; border-radius: 6px; }
.user-name-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Boutons ---- */
.btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; min-height: 34px; }
.btn-sm.primary:hover, .btn-xs:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.link-btn { color: var(--primary); cursor: pointer; }
.link-btn:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Formulaires : plus aucun champ coupé ---- */
/* Cause des champs tronqués : un <select> garde la largeur de sa plus longue option
   (« Contrat de maintenance multitechnique des trois… ») et, dans une grille, un élément
   ne descend pas sous sa largeur de contenu. La colonne gauche s'élargissait et poussait
   la droite hors de la carte. */
.form-grid > *, .field { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; }
.field input[type=checkbox], .field input[type=radio] { width: auto; }
.field select { text-overflow: ellipsis; }
.field input:not([type=checkbox]):not([type=radio]), .field select { min-height: 38px; }
.field input:disabled { background: var(--surface-2); color: var(--text-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); opacity: 1; }

/* ---- Fenêtres ---- */
.modal-close { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; font-size: var(--fs-lg); }
.modal-close:hover { background: var(--surface-3); color: var(--text); }
/* Facture (éditeur de lignes complet) et contrat (quinze champs) : la fenêtre de 520 px
   les coupait. */
.modal.modal-wide, .modal:has(.line-table) { max-width: min(1120px, 100%); }
.modal.modal-md, .modal:has(#f_cover) { max-width: min(780px, 100%); }
.modal-head { flex: none; }
/* Boutons d'enregistrement toujours visibles au bas d'une longue fenêtre. */
.modal-body > .modal-foot:last-child {
  position: sticky; bottom: -20px; z-index: 5; background: var(--surface);
  margin: 20px -22px -20px; padding: 12px 22px; border-top: 1px solid var(--border);
}

/* ---- Éditeur de lignes (devis, facture) ---- */
.line-table { min-width: 820px; }
.line-table thead th { white-space: nowrap; }
.line-table th, .line-table td { padding: 8px 6px; vertical-align: top; }
.line-table th:first-child, .line-table td:first-child { width: 150px; }
.line-table input, .line-table select {
  display: block; width: 100%; min-width: 0; height: 36px; padding: 6px 9px;
  border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface);
  font: inherit; font-size: var(--fs-md); color: var(--text);
}
.line-table input:focus, .line-table select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.line-table input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
.line-table .li-label { min-width: 200px; }
.line-table .li-unit { height: 30px; margin-top: 5px !important; font-size: var(--fs-xs) !important; color: var(--text-soft); }
.line-table .li-qty { width: 76px !important; }
.line-table .li-price, .line-table .li-cost { width: 108px !important; }
.line-table .li-tva { width: 96px !important; }
.line-table .li-ctrl { width: 1%; }
.line-table .li-ctrl .link-btn {
  width: 30px; height: 30px; padding: 0; border-radius: 7px; display: inline-grid; place-items: center;
  color: var(--text-soft); font-size: var(--fs-xs);
}
.line-table .li-ctrl .link-btn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.line-table .li-ctrl .li-del:hover { background: #fee2e2; color: var(--red); }
.li-section .li-label, .li-text .li-label { border-color: transparent; background: transparent; }
.li-section .li-label:hover, .li-text .li-label:hover { border-color: var(--border); }
#liveTotal { font-variant-numeric: tabular-nums; }

/* ---- Éditeur de devis ---- */
/* Deux colonnes seulement sur très grand écran : en dessous de 1600 px, formulaire et
   aperçu côte à côte se coupaient mutuellement (Contact, Validité, Remise, colonne coût). */
@media (max-width: 1600px) {
  .editor-2col { grid-template-columns: minmax(0, 1fr); }
  .editor-preview { position: static; }
  #docPreview { max-height: 70vh; }
}
.editor-form { min-width: 0; }
.editor-actions {
  position: sticky; bottom: 0; z-index: 5; background: var(--surface);
  margin: 18px -20px -20px; padding: 12px 20px; border-top: 1px solid var(--border); border-radius: 0 0 14px 14px;
}
.editor-preview-head { color: var(--text-faint); }
.qtpl-bar .catalog-pick { max-width: 100%; }

/* ---- Menu utilisateur (barre du haut) ---- */
.user-menu { position: relative; }
.user-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--primary-soft); padding: 0; display: grid; place-items: center; }
.user-btn:hover { border-color: var(--primary); }
.user-ava { font-size: var(--fs-sm); font-weight: 700; color: var(--primary-dark); letter-spacing: .02em; }
.user-panel { position: absolute; top: 46px; right: 0; width: 260px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 45; padding: 6px; }
.user-panel-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-panel-head b { font-size: var(--fs-md); }
.user-panel-head span { font-size: var(--fs-xs); color: var(--text-soft); }
.user-panel-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: none; background: none;
  border-radius: 8px; font-size: var(--fs-md); color: var(--text); text-align: left; }
.user-panel-item:hover, .user-panel-item:focus-visible { background: var(--hover); }
.user-panel-item[data-um="logout"] { color: var(--red); }
.bell-btn { color: var(--text-soft); }
.bell-btn:hover { color: var(--text); }

/* ---- Barre latérale : tout le menu tient dans 900 px de haut ---- */
@media (min-width: 821px) {
  .sidebar { padding: 16px 12px; }
  .sidebar-brand { padding-bottom: 14px; }
  .nav-item { padding: 7px 12px; gap: 10px; }
  .nav-group { margin-top: 6px; gap: 1px; }
  .nav-grp-items { gap: 1px; }
  .sidebar nav { gap: 1px; }
  .nav-grp-h { padding: 4px 12px 3px; }
  .sidebar-foot { padding-top: 10px; }
}

/* ---- Listes : recherche et filtre ---- */
.list-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.lf-search { position: relative; flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; }
.lf-search .ui-ico { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.lf-search input, .lf-status select {
  width: 100%; height: 38px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: var(--fs-md); color: var(--text);
}
.lf-search input { padding-left: 34px; }
.lf-status select { width: auto; min-width: 180px; }
.lf-search input:focus, .lf-status select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.lf-count { margin-left: auto; font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.lf-empty { padding: 28px; text-align: center; color: var(--text-soft); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
tr[hidden] { display: none !important; }

/* ---- Mode technicien : action principale à portée de pouce ---- */
.tr-actions .btn-sm { min-height: 44px; padding: 10px 16px; font-size: var(--fs-md); }

/* ======================= Téléphone et petite tablette ======================= */
@media (max-width: 820px) {
  body { -webkit-text-size-adjust: 100%; }
  .view-root { min-width: 0; }
  .topbar h1 { font-size: var(--fs-lg); }
  .topbar-actions .btn-primary { padding: 10px 12px; }
  /* Mon compte / Déconnexion : le pied de la barre latérale n'existe pas sur téléphone. */
  .user-btn, .bell-btn { width: var(--touch); height: var(--touch); }
  .user-panel { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; }
  /* Panneau de notifications : ancré à l'écran, plus sorti par la gauche. */
  .notif-panel { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 170px); }
  .notif-item { min-height: 52px; }

  /* Barre du bas du gérant : Accueil, Devis, Factures, Planning, Plus. Pipeline et Terrain
     passent dans « Plus » (le technicien garde son propre menu à quatre entrées). */
  body:not(.role-tech) .sidebar .nav-item[data-view="pipeline"],
  body:not(.role-tech) .sidebar .nav-item[data-view="terrain"] { display: none; }
  body:not(.role-tech) .sidebar .nav-item[data-view="invoices"],
  body:not(.role-tech) .sidebar .nav-item[data-view="planning"] { display: flex; }
  /* Déjà dans la barre du bas : inutile de les répéter dans « Plus ». */
  body:not(.role-tech) .more-link[data-view="invoices"], body:not(.role-tech) .more-link[data-view="planning"] { display: none; }
  .nav-item .ic { width: 22px; height: 22px; }
  .more-link .ic { width: 20px; height: 20px; }
  /* « Plus » : 22 entrées tenaient sur plus d'un écran. Deux colonnes, et un défilement
     interne si l'écran est très bas. */
  .more-sheet:not(.hidden) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; align-content: start;
    max-height: calc(100dvh - 84px - 24px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain;
  }
  .more-grp, .more-account { grid-column: 1 / -1; }
  .more-link { min-height: var(--touch); padding: 10px 12px; font-size: var(--fs-md); }
  .more-account { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; border-top: 1px solid #ffffff1f; margin-top: 6px; padding-top: 6px; }
  .more-account .more-link { background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; }

  /* Cibles tactiles : 44 px minimum. */
  .btn-sm, .btn-ghost, .btn-primary, .btn-ghost.sm, .btn-primary.sm, .chip, .pipe-tab, .fb-view, .catalog-pick, .verify-btn, .pj-add, .ch-step { min-height: var(--touch); }
  .btn-sm { padding: 10px 14px; }
  .btn-xs { min-height: 36px; padding: 6px 12px; }
  .link-btn { min-height: var(--touch); padding: 0 8px; display: inline-flex; align-items: center; }
  .modal-close { width: var(--touch); height: var(--touch); }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select { min-height: var(--touch); }
  /* 16 px dans les champs : en dessous, Safari zoome la page à chaque saisie. */
  input, select, textarea { font-size: 16px !important; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .switch-row { min-height: var(--touch); }
  .ts-h { width: 60px; height: var(--touch); }
  .dash-filter select, .flt-row select, .flt-row input { min-height: var(--touch); }

  /* Fiches : les valeurs longues passent à la ligne au lieu de sortir de l'écran. */
  .detail-card, .panel, .editor-form { overflow-wrap: break-word; }
  /* …mais pas dans les tableaux : un montant se lit d'un bloc (« 17 400,00 € »), le tableau
     défile plutôt dans son cadre. */
  .table-wrap:not(.lt-cards) td, .table-wrap:not(.lt-cards) th { overflow-wrap: normal; }
  .table-wrap:not(.lt-cards) th, .table-wrap:not(.lt-cards) td:not(:first-child) { white-space: nowrap; }
  .table-wrap:not(.lt-cards) td:first-child { min-width: 160px; }
  .field-row { gap: 12px; }
  .field-row .k { flex: none; max-width: 45%; }
  .field-row .v { min-width: 0; }
  .detail-actions { flex-wrap: wrap; }

  /* Fenêtres en plein écran, boutons collés en bas. */
  .modal-overlay { padding: 0; place-items: end stretch; }
  .modal, .modal.modal-wide, .modal.modal-md { max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .modal-head { padding: 10px 12px 10px 16px; }
  .modal-body { padding: 16px; flex: 1; }
  .modal-body > .modal-foot:last-child { bottom: -16px; margin: 16px -16px -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }

  /* Éditeur de devis : boutons au-dessus de la barre d'onglets. */
  .editor-actions { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); margin: 18px -16px -16px; padding: 10px 16px; border-radius: 0; }
  .editor-form { padding: 16px; }
  .qtpl-bar { gap: 8px; }

  /* Fiche intervention (technicien) : « Démarrer l'intervention » restait sous la barre
     d'onglets tant qu'on ne faisait pas défiler. La rangée d'actions colle au-dessus. */
  .tr-actions {
    position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    background: var(--bg); margin: 8px -16px 0 !important; padding: 10px 16px; border-top: 1px solid var(--border);
    box-shadow: 0 -6px 14px rgba(15, 23, 42, .06);
  }
  .tr-actions .btn-sm { flex: 1 1 0; }
  .tr-sec .link-btn { min-height: 36px; }

  /* Tableaux larges qui restent des tableaux : ils défilent dans leur cadre, avec une
     ombre qui signale la suite à droite. */
  .table-wrap:not(.lt-cards) {
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.14), transparent) left / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.14), transparent) right / 10px 100% no-repeat scroll,
      var(--surface);
  }
  .kanban { scroll-snap-type: x proximity; }
  .kanban-col { scroll-snap-align: start; flex-basis: 82vw; }
  .list-filter { gap: 8px; }
  .lf-search { flex: 1 1 100%; max-width: none; }
  .lf-search input, .lf-status select { height: var(--touch); }
  .lf-status { flex: 1 1 auto; }
  .lf-status select { width: 100%; min-width: 0; }
  .lf-count { margin-left: 0; }
  .list-toolbar { flex-wrap: wrap; justify-content: flex-start; }
  .pl-bar { align-items: flex-start; }
}

/* ======================= Listes en cartes (< 700 px) ======================= */
/* Un tableau de quatre colonnes cassait « DEV-2026-009 » mot par mot et renvoyait le
   montant hors écran. Chaque ligne devient une carte : numéro et statut en tête, intitulé,
   client et montant, puis les autres informations avec leur libellé. */
@media (max-width: 700px) {
  .table-wrap.lt-cards, .detail-card.lt-cards { background: none; border: none; box-shadow: none; overflow: visible !important; border-radius: 0; padding: 0; }
  .lt-cards > table, .lt-cards > table > tbody { display: block; width: 100%; }
  .lt-cards > table > thead { display: none; }
  .lt-cards > table > tbody > tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; position: relative;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
    padding: 12px 14px; margin-bottom: 10px;
  }
  .lt-cards > table > tbody > tr:hover { background: var(--surface); border-color: var(--primary); }
  .lt-cards > table > tbody > tr > td { display: block; padding: 0; border: none; font-size: var(--fs-sm); min-width: 0; text-align: left; white-space: normal; }
  .lt-cards td.c-num { order: 1; font-size: var(--fs-xs); font-weight: 700; color: var(--text-soft); white-space: nowrap; }
  .lt-cards td.c-status { order: 2; margin-left: auto; }
  .lt-cards td.c-title { order: 3; flex: 1 0 100%; font-size: var(--fs-md); font-weight: 600; color: var(--text); line-height: 1.3; }
  .lt-cards td.c-client { order: 4; flex: 1 1 0; color: var(--text-soft); }
  .lt-cards td.c-amount { order: 5; margin-left: auto; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; text-align: right; }
  .lt-cards td.c-meta { order: 6; flex: 1 0 100%; font-size: var(--fs-xs); color: var(--text-soft); }
  .lt-cards td.c-meta::before { content: attr(data-label) " : "; font-weight: 600; color: var(--text-faint); }
  .lt-cards td.c-meta:not([data-label])::before, .lt-cards td.c-meta[data-label=""]::before { content: none; }
  .lt-cards td.c-blank { display: none; }
  .lt-cards td.c-action { order: 7; flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .lt-cards td.c-action::before { content: none; }
  .lt-cards td.c-action .btn-sm { flex: 1 1 auto; width: auto; margin: 0; }
  /* Montant seul sur sa ligne quand il n'y a pas de client. */
  .lt-cards td.c-title:last-child { margin-bottom: 0; }

  /* Lignes du devis / de la facture : une carte par ligne, champs pleine largeur. */
  .line-table { min-width: 0; }
  .line-table, .line-table tbody { display: block; width: 100%; }
  .line-table thead { display: none; }
  .line-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 10px; border-bottom: 1px solid var(--border); }
  .line-table tbody tr.li-section, .line-table tbody tr.li-text { grid-template-columns: 1fr auto; align-items: center; }
  .line-table tbody td { display: block; padding: 0 !important; border: none; width: auto !important; }
  .line-table tbody tr[data-kind="item"] td:nth-child(1), .line-table tbody tr[data-kind="item"] td:nth-child(2) { grid-column: 1 / -1; }
  .line-table tbody tr[data-kind="item"] td:nth-child(n+3):not(.li-ctrl)::before {
    display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); margin-bottom: 3px;
  }
  .line-table tbody tr[data-kind="item"] td:nth-child(3)::before { content: "Quantité"; }
  .line-table tbody tr[data-kind="item"] td:nth-child(4)::before { content: "Prix unitaire HT"; }
  .line-table tbody tr[data-kind="item"] td:nth-child(5)::before { content: "TVA"; }
  .line-table tbody tr[data-kind="item"] td:nth-child(6)::before { content: "Coût unitaire (interne)"; }
  .line-table tbody tr[data-kind="item"] .li-ctrl { grid-column: 1 / -1; text-align: right; }
  .line-table .li-qty, .line-table .li-price, .line-table .li-cost, .line-table .li-tva { width: 100% !important; }
  .line-table input, .line-table select { height: var(--touch); }
  .line-table .li-unit { height: 40px; }
  .line-table .li-label { min-width: 0; }
  .line-table .li-ctrl .link-btn { width: var(--touch); height: var(--touch); font-size: var(--fs-md); }
  .table-wrap:has(> .line-table) { overflow: visible; background: var(--surface); }
}

/* ---- Grands écrans uniquement : l'aperçu reste à côté du formulaire ---- */
@media (min-width: 1601px) { .editor-preview { top: 84px; } }
/* ---- Icônes de navigation ----
   Un seul jeu d'icônes au trait, monochromes, dessinées en SVG et appliquées en masque :
   elles prennent la couleur du texte (active, survol, barre sombre) et s'affichent de la
   même façon sur tous les systèmes — les émojis (🏗️ 📅 🦺) changeaient d'aspect sous Windows
   et juraient avec les glyphes (▤ ◨ ▦). Le caractère d'origine reste dans le HTML, masqué. */
:root {
  --ico-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
  --ico-alertes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
  --ico-pipeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='5' height='18' rx='1'/%3E%3Crect x='10' y='3' width='5' height='12' rx='1'/%3E%3Crect x='17' y='3' width='4' height='8' rx='1'/%3E%3C/svg%3E");
  --ico-quotes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8 13h8M8 17h5'/%3E%3C/svg%3E");
  --ico-invoices: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
  --ico-contracts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.2L3 16'/%3E%3Cpath d='M3 12A9 9 0 0 1 18.5 5.8L21 8'/%3E%3Cpath d='M21 3v5h-5M3 21v-5h5'/%3E%3C/svg%3E");
  --ico-catalog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E");
  --ico-companies: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 21v-4h6v4M8 7h2M14 7h2M8 11h2M14 11h2'/%3E%3C/svg%3E");
  --ico-contacts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --ico-activities: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
  --ico-chantiers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18h20'/%3E%3Cpath d='M4 18v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M10 9V5h4v4'/%3E%3C/svg%3E");
  --ico-planning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --ico-planning-travaux: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 7h8M10 12h9M7 17h6'/%3E%3C/svg%3E");
  --ico-timesheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ico-terrain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
  --ico-tickets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.2L3 17.8V21h3.2l6.3-6.3a4 4 0 0 0 5.2-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E");
  --ico-suppliers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='6.5' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
  --ico-purchases: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E");
  --ico-documents: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --ico-scoring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E");
  --ico-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E");
  --ico-hr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20a7 7 0 0 1 14 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M22 20a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E");
  --ico-admin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
  --ico-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='19' cy='12' r='1.2'/%3E%3C/svg%3E");
  --ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --ico-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.nav-item .ic, .more-link .ic, .ui-ico, .bell-ic {
  display: inline-block; flex: none; width: 18px; height: 18px; font-size: 0 !important; color: inherit; opacity: 1;
  background-color: currentColor; -webkit-mask: var(--ico, var(--ico-more)) center / contain no-repeat; mask: var(--ico, var(--ico-more)) center / contain no-repeat;
}
[data-view="dashboard"] > .ic { --ico: var(--ico-dashboard); }
[data-view="alertes"] > .ic { --ico: var(--ico-alertes); }
[data-view="pipeline"] > .ic { --ico: var(--ico-pipeline); }
[data-view="quotes"] > .ic { --ico: var(--ico-quotes); }
[data-view="invoices"] > .ic { --ico: var(--ico-invoices); }
[data-view="contracts"] > .ic { --ico: var(--ico-contracts); }
[data-view="catalog"] > .ic { --ico: var(--ico-catalog); }
[data-view="companies"] > .ic { --ico: var(--ico-companies); }
[data-view="contacts"] > .ic { --ico: var(--ico-contacts); }
[data-view="activities"] > .ic { --ico: var(--ico-activities); }
[data-view="chantiers"] > .ic { --ico: var(--ico-chantiers); }
[data-view="planning"] > .ic { --ico: var(--ico-planning); }
[data-view="planning-travaux"] > .ic { --ico: var(--ico-planning-travaux); }
[data-view="timesheet"] > .ic { --ico: var(--ico-timesheet); }
[data-view="terrain"] > .ic { --ico: var(--ico-terrain); }
[data-view="tickets"] > .ic { --ico: var(--ico-tickets); }
[data-view="suppliers"] > .ic { --ico: var(--ico-suppliers); }
[data-view="purchases"] > .ic { --ico: var(--ico-purchases); }
[data-view="documents"] > .ic { --ico: var(--ico-documents); }
[data-view="scoring"] > .ic { --ico: var(--ico-scoring); }
[data-view="inbox"] > .ic { --ico: var(--ico-inbox); }
[data-view="hr"] > .ic { --ico: var(--ico-hr); }
[data-view="admin"] > .ic { --ico: var(--ico-admin); }
#navMore .ic { --ico: var(--ico-more); }
.ic-user, .ico-user { --ico: var(--ico-user); }
.ic-logout, .ico-logout { --ico: var(--ico-logout); }
.ico-admin { --ico: var(--ico-admin); }
.ico-search { --ico: var(--ico-search); }
.bell-ic { --ico: var(--ico-alertes); width: 20px; height: 20px; }
body.role-tech [data-view="terrain"] > .ic { --ico: var(--ico-home); }
@media (max-width: 820px) {
  .nav-item .ic { width: 22px; height: 22px; }
  .more-link .ic { width: 20px; height: 20px; }
}
/* Barre « Lignes » de l'éditeur : catalogue et bibliothèque BTP ne dépassent plus sur téléphone. */
#catalogPick { max-width: 100%; min-width: 0; }
@media (max-width: 820px) {
  #catalogPick, #btpWrap, #btpWrap input { flex: 1 1 100%; width: 100%; min-width: 0 !important; }
  #btpResults { min-width: 0 !important; max-width: calc(100vw - 32px) !important; }
  .score-factors { min-width: 0; }
  .score-factor { white-space: normal; }
  .score-main { min-width: 0; }
}
/* Colonnes de fiche : un tableau large défile dans sa carte au lieu d'élargir la colonne. */
.detail-grid > *, .ch-grid > *, .inbox-grid > * { min-width: 0; }
td.c-date { white-space: nowrap; }
/* Champs nus des barres d'outils (période d'export des factures…) : même habillage que les autres. */
.list-toolbar input:not([type=checkbox]), .list-toolbar select, .pl-tools select, .pl-tools input:not([type=checkbox]) {
  height: 34px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: var(--fs-sm); color: var(--text); margin-left: 4px;
}
.list-toolbar label { display: inline-flex; align-items: center; font-size: var(--fs-sm); }
/* Fil d'Ariane : sur téléphone, le lien de retour (« Devis / DEV-… ») est le bouton retour. */
@media (max-width: 820px) {
  #backLink { display: inline-flex; align-items: center; min-height: var(--touch); }
}
@media (max-width: 820px) {
  /* Tableaux posés directement dans une carte (fiche affaire…) : défilement dans la carte. */
  .detail-card:not(.lt-cards) > table, .panel > table { display: block; max-width: 100%; overflow-x: auto; }
}
/* La désignation prend la place disponible ; les colonnes de chiffres restent à leur largeur. */
@media (min-width: 701px) {
  .line-table { table-layout: fixed; }
  .line-table thead th:nth-child(1) { width: 160px; }
  .line-table thead th:nth-child(2) { width: auto; }
  .line-table thead th:nth-child(3) { width: 86px; }
  .line-table thead th:nth-child(4), .line-table thead th:nth-child(6) { width: 120px; }
  .line-table thead th:nth-child(5) { width: 104px; }
  .line-table thead th:nth-child(7) { width: 104px; }
  .line-table .li-qty, .line-table .li-price, .line-table .li-cost, .line-table .li-tva { width: 100% !important; }
}

/* Bouton « + Nouveau » : libellé complet sur grand écran, court sur téléphone (barre du haut). */
.nb-court { display: none; }
@media (max-width: 480px) {
  .nb-long { display: none; }
  .nb-court { display: inline; }
}
/* Guide de démarrage sur téléphone : le bouton passe sous le texte au lieu de l'écraser. */
@media (max-width: 480px) {
  .onboard-step { flex-wrap: wrap; }
  .onboard-step .onboard-main { flex: 1 1 calc(100% - 48px); min-width: 0; }
  .onboard-step > button { margin-left: 44px; }
}

/* ======================= Administration (analyse visuelle du 27/09) ======================= */
/* Rubriques rangées par thèmes ; sur téléphone, une liste déroulante au lieu de quatre rangées. */
.adm-nav { margin-bottom: 18px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.adm-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-grp-t { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-right: 2px; }
.adm-select { display: none; }
.adm-select span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.adm-select select { width: 100%; height: var(--touch, 44px); padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font: inherit; font-size: var(--fs-md); color: var(--text); }
@media (max-width: 700px) {
  .adm-chips { display: none; }
  .adm-select { display: flex; flex-direction: column; gap: 4px; }
}

/* Ma société : sommaire, sections repérables, enregistrement toujours accessible. */
/* Sommaire collé sous la barre du haut (75 px sur ordinateur, 73 px sur téléphone). */
.soc-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 10px 0; position: sticky; top: 75px; z-index: 6; background: var(--bg); }
.soc-toc-link { padding: 5px 11px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); font-size: var(--fs-sm); color: var(--text-soft); font-weight: 600; }
.soc-toc-link:hover { color: var(--primary); border-color: var(--primary); }
.soc-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 6px; margin-bottom: 14px; scroll-margin-top: 150px; }
.soc-sec-t { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 4px; }
.soc-sec-t:focus { outline: none; }
.soc-sec-aide { font-size: .86rem; margin: 0 0 10px; }
.soc-sec .gdpr-box { margin-top: 4px; }
.soc-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.soc-logo input[type=file] { max-width: 100%; min-width: 0; }
.soc-save { position: sticky; bottom: 0; z-index: 7; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin: 0 -4px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 -6px 14px rgba(15, 23, 42, .06); }
.soc-save.is-dirty { border-color: var(--amber); }
.soc-save.is-dirty .soc-save-etat { color: #92400e; font-weight: 600; }
.soc-save-etat { margin-right: auto; font-size: var(--fs-sm); }
@media (max-width: 820px) {
  .soc-toc { top: 73px; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 8px; padding: 8px 16px; scrollbar-width: none; }
  .soc-sec { scroll-margin-top: 136px; }
  .soc-toc::-webkit-scrollbar { display: none; }
  .soc-toc-link { flex: none; min-height: 36px; }
  .soc-sec { padding: 14px 14px 4px; }
  .soc-save { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .soc-save .btn-sm { min-height: 44px; padding: 10px 20px; }
}

/* Équipe : une carte par utilisateur sur téléphone (plus de tableau à défilement horizontal). */
@media (max-width: 700px) {
  .team-wrap { background: none !important; border: none; box-shadow: none; overflow: visible; padding: 0; }
  .team-table, .team-table tbody { display: block; width: 100%; }
  .team-table thead { display: none; }
  .team-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; margin-bottom: 10px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
  .team-table tbody td { display: block; padding: 0; border: none; min-width: 0; }
  .team-table td.tm-nom { grid-column: 1 / -1; font-size: var(--fs-md); }
  .team-table td.tm-email { grid-column: 1 / -1; margin-top: -6px; overflow-wrap: anywhere; font-size: var(--fs-sm); }
  .team-table td.tm-role, .team-table td.tm-obj { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .team-table td.tm-role::before, .team-table td.tm-obj::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); }
  .team-table td.tm-role select { max-width: 60%; min-height: 40px; }
  .team-table td.tm-obj input { min-height: 40px; }
  .team-table td.tm-etat { grid-column: 1 / -1; white-space: normal !important; }
  .team-table td.tm-etat .btn-sm { min-height: 40px; }
}

/* Réglage « modules avancés » : correspondance des termes selon le mode. */
.nav-vocab { font-size: .86rem; color: var(--text-soft); }
.nav-vocab summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.nav-vocab ul { margin: 6px 0 4px 18px; padding: 0; }
.nav-vocab li { margin-bottom: 4px; }
.nav-vocab p { margin: 4px 0 0; }

/* Écran d'échec d'une vue (bouton « Réessayer »). */
.vue-echec .empty { padding: 36px 20px; }
/* Champs posés hors d'un bloc .field (prochain numéro, adresse de test) : même habillage. */
.soc-sec td input[type=number], .soc-sec .tk-composer-row input {
  height: 36px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: var(--fs-sm); color: var(--text);
}
.soc-sec .tk-composer-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }