/* Polices servies par l'application (PERF-01) : Inter et Figtree, variables, sous-ensemble latin, licence SIL OFL 1.1 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-latin-joy4ri1.woff2") format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/figtree-latin-PJhrdvF.woff2") format('woff2'); }

/* =========================================================================
   Headquarter — design system Scoob (Figma « Scoob (propriétaire) », nœud 4002-1352)
   Tokens du cahier des charges, chapitre 16. Thème clair par défaut, sombre
   via prefers-color-scheme ou [data-theme="dark"].
   ========================================================================= */

:root {
  /* Couleurs de base */
  --accent: #0099FF;
  --accent-hover: #007ACC;
  --neutral-bold: #1A1B1F;
  --neutral-soft: #F1F2F4;
  --app-bg: #FFFFFF;
  --dark-soft: #2D303C;
  --danger: #FF5864;
  --success: #33B06F;
  --warning: #F59E0C;

  /* Sémantique : texte, fonds, bordures */
  --text: var(--neutral-bold);
  --text-soft: #6A6E7A; /* design system #6B6F7B assombri d'un cran : 4,5:1 sur --bg-soft (BUG-027) */
  --text-inverse: #FFFFFF;
  --bg: var(--app-bg);
  --bg-subtle: #F8F9FA;
  --bg-soft: var(--neutral-soft);
  --bg-soft-hover: #E6E8EC;
  --border: #E3E5E9;
  --border-bold: #C9CCD3;
  --sidebar-bg: var(--app-bg);

  --accent-text: var(--accent); /* bleu Scoob #0099FF obligatoire, y compris pour le texte et les liens (règle de Max du 26/10/2026) : contraste 3:1 accepté */
  --accent-bg-soft: rgba(0, 153, 255, 0.10);
  --accent-border-soft: rgba(0, 153, 255, 0.35);
  --danger-bg-soft: rgba(255, 88, 100, 0.12);
  --danger-text: #D12836; /* 4,5:1 sur --danger-bg-soft (BUG-027) */
  --success-bg-soft: rgba(51, 176, 111, 0.14);
  --success-text: #1F7C4A; /* 4,5:1 sur --success-bg-soft et --bg-soft (BUG-027) */
  --warning-bg-soft: rgba(245, 158, 12, 0.16);
  --warning-text: #9C6000; /* 4,5:1 sur --warning-bg-soft (BUG-027) */

  /* Formes */
  --radius-s: 4px;
  --radius-m: 6px;
  --radius: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --control-h: 32px;

  /* Ombres */
  --shadow-s: 0 1px 2px rgba(26, 27, 31, 0.06), 0 1px 3px rgba(26, 27, 31, 0.08);
  --shadow-modal: 0 8px 24px rgba(26, 27, 31, 0.16), 0 2px 6px rgba(26, 27, 31, 0.08);

  /* Typographie */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-headline: "Figtree", var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sidebar-w: 232px;
  --header-h: 56px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #F1F2F4;
    --text-soft: #A3A7B3;
    --accent-text: var(--accent);
    --text-inverse: #1A1B1F;
    --bg: #1A1B1F;
    --bg-subtle: #212328;
    --bg-soft: var(--dark-soft);
    --bg-soft-hover: #383C4A;
    --border: #2D303C;
    --border-bold: #454957;
    --sidebar-bg: #1A1B1F;
    --accent-bg-soft: rgba(0, 153, 255, 0.18);
    --danger-text: #FF7A84;
    --success-text: #5CCB8F;
    --warning-text: #FFB547;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --text: #F1F2F4;
  --text-soft: #A3A7B3;
  --accent-text: var(--accent);
  --text-inverse: #1A1B1F;
  --bg: #1A1B1F;
  --bg-subtle: #212328;
  --bg-soft: var(--dark-soft);
  --bg-soft-hover: #383C4A;
  --border: #2D303C;
  --border-bold: #454957;
  --sidebar-bg: #1A1B1F;
  --accent-bg-soft: rgba(0, 153, 255, 0.18);
  --danger-text: #FF7A84;
  --success-text: #5CCB8F;
  --warning-text: #FFB547;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden masque toujours, même un bloc mis en flex ou en grille (.stack, .grid, .row…) */
[hidden] { display: none !important; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { vertical-align: middle; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Typographie (ch. 16) ---------- */
.t-page { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -1px; }
.t-section { font-size: 18px; line-height: 32px; font-weight: 500; letter-spacing: -0.5px; }
.t-block { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.5px; }
.t-list { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-soft); text-transform: none; }
.t-body-lg { font-size: 16px; line-height: 24px; }
.t-body { font-size: 14px; line-height: 20px; }
.t-small { font-size: 12px; line-height: 16px; }
.t-soft { color: var(--text-soft); }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-num { font-variant-numeric: tabular-nums; }
.headline-1 { font-family: var(--font-headline); font-weight: 600; font-size: 36px; line-height: 40px; letter-spacing: -1px; }
.headline-2 { font-family: var(--font-headline); font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: -0.5px; }
.headline-3 { font-family: var(--font-headline); font-weight: 600; font-size: 20px; line-height: 24px; }
.subheadline { font-family: var(--font-headline); font-weight: 500; font-size: 16px; line-height: 28px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h); padding: 0 8px; border-radius: var(--radius);
  border: 1px solid transparent; background: var(--bg-soft); color: var(--text);
  font-weight: 500; font-size: 14px; line-height: 20px; cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--bg-soft-hover); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 14px; height: 14px; }
.btn-icon { width: var(--control-h); padding: 0; }
.btn-icon .icon { width: 20px; height: 20px; }
/* Bleu Scoob du design system Figma (choix assumé contre les contrastes d'A11Y-AUD-03) */
.btn-primary { background: var(--accent); color: #fff; } /* bleu Scoob obligatoire (règle de Max du 26/10/2026) : texte blanc à 3:1 accepté */
.btn-primary:hover { background: var(--accent-hover); }
.btn-bold { background: var(--neutral-bold); color: var(--text-inverse); }
.btn-bold:hover { background: #2D303C; }
.btn-outline { background: transparent; border-color: var(--border-bold); }
.btn-outline:hover { background: var(--bg-soft); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-danger { background: #D93644; color: #fff; } /* texte blanc à 4,6:1 (BUG-027) */
.btn-danger:hover { background: #C7313E; }
.btn-pill { border-radius: 999px; padding: 0 12px; }
.btn-xs { height: 24px; padding: 0 6px; font-size: 12px; line-height: 16px; margin-left: 4px; } /* action discrète dans un libellé (lot 10) */
.btn-group { display: inline-flex; gap: 4px; }

/* ---------- Champs ---------- */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Espacement vertical entre blocs d'un formulaire (champ, case à cocher, grille de champs, alerte). */
.field + .field, .field + .checkbox, .checkbox + .field, .field + .grid, .grid + .field, .grid + .grid,
.checkbox + .grid, .grid + .checkbox, .field + .alert, .alert + .field, .field + .input-group, .input-group + .field { margin-top: 12px; }
/* …mais jamais entre cellules d'une même grille ou d'une même ligne : les champs restent alignés en haut. */
.grid > .field, .grid > .grid, .grid > .checkbox, .row > .field, .row-between > .field, .content > .grid, .content > .grid + .grid { margin-top: 0; }
/* Une ligne qui mélange champs (label + contrôle) et boutons aligne tout sur la ligne de base des contrôles. */
.row:has(> .field), .row-between:has(> .field) { align-items: flex-end; }
/* Formulaire dont les champs sont enveloppés dans des sections (affichage conditionnel) : rythme vertical par gap. */
.form-stack { display: flex; flex-direction: column; gap: 12px; }
/* 01/11/2026 : une alerte suivie d'un formulaire (panneau « Préparer le portail ») ne le touche plus */
.alert + form, .alert + .form-stack { margin-top: 12px; }
.form-stack > * { margin-top: 0 !important; }
.form-stack > .hidden, .form-stack > [hidden] { display: none; }
.label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-soft); }
.input, .select, .textarea {
  width: 100%; min-height: var(--control-h); padding: 4px 8px; border-radius: var(--radius);
  border: 1px solid var(--border-bold); background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 24px; padding: 3px 8px; /* Inputs du design system : 32 de haut, texte 16 / 24 */
}
.textarea { min-height: 72px; resize: vertical; }
.select { padding-right: 28px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6F80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; }
/* Contrôle avec suffixe (€, %, j…) : une seule boîte, le suffixe ne passe jamais à la ligne. */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group .input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .input:focus { position: relative; z-index: 1; }
.input-group-text { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--border-bold); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-soft); color: var(--text-soft); font-size: 14px; white-space: nowrap; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg-soft); }
.input::placeholder { color: var(--text-soft); }
.input.is-invalid { border-color: var(--danger); }
.input-num { text-align: right; font-variant-numeric: tabular-nums; }
.input-lg { min-height: 48px; font-size: 24px; text-align: center; }
.help { font-size: 12px; line-height: 16px; color: var(--text-soft); }
.error { font-size: 12px; line-height: 16px; color: var(--danger-text); }
.checkbox { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 20px; }
.checkbox input { flex-shrink: 0; width: 16px; height: 16px; border-radius: var(--radius-s); accent-color: var(--accent); margin: 2px 0 0; }
.switch { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--border-bold); padding: 1.5px; }
.switch::after { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .12s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  border-radius: var(--radius-m); font-size: 12px; line-height: 16px; font-weight: 500;
  background: var(--bg-soft); color: var(--text); white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge-success { background: var(--success-bg-soft); color: var(--success-text); }
.badge-warning { background: var(--warning-bg-soft); color: var(--warning-text); }
.badge-danger { background: var(--danger-bg-soft); color: var(--danger-text); }
.badge-accent { background: var(--accent-bg-soft); color: var(--accent-text); }
.badge-neutral { color: var(--text-soft); }
.badge-plain::before { display: none; }
/* Lot 26 : option recommandée (CGV, décisions). Teinte et liseré bleu Scoob ; texte foncé pour rester lisible (4,5:1) */
.badge-defaut { background: var(--accent-bg-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-border-soft); font-weight: 500; }
.badge-defaut::before { background: var(--accent); }
/* 01/11/2026 : badge compact (20 px), sans marge propre (l'espace du texte suffit) : renvoyé à la ligne, il ne se décale plus */
.badge-defaut { height: 20px; padding: 0 6px; gap: 4px; font-size: 11px; border-radius: var(--radius-s); vertical-align: 1px; max-width: 100%; min-width: 0; }
.badge-defaut-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Sous un champ, en tête de sa ligne d'aide : les libellés restent sur une ligne et les champs voisins alignés */
.help > .badge-defaut:first-child { display: flex; width: fit-content; margin: 2px 0; }

/* Pictos des outils liés (Pipedrive, Pennylane) : vert si lié, rouge pâle sinon, côte à côte sur une ligne */
.pictos-outils { display: inline-flex; align-items: center; gap: 4px; vertical-align: -1px; } /* À prévoir n°5 : « middle » les posait 1,7 px sous le centre du texte */
/* En-tête de fiche (texte 14 px, ligne de 20 px) : pictos centrés sur le texte voisin, 3 px plus bas sinon (31/10/2026) */
.page-header .sub .pictos-outils { vertical-align: 2px; }
/* Lot 23 : dans la liste des factures, un statut long (« Brouillon Pennylane ») passe sur deux lignes plutôt que d'élargir le tableau */
.table .statut-cellule .badge { white-space: normal; height: auto; min-height: 24px; padding: 4px 8px; }
.picto-outil { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: var(--radius-m); background: var(--danger-bg-soft); color: var(--danger-text); opacity: .75; }
.picto-outil.is-actif { background: var(--success); color: #fff; opacity: 1; }
a.picto-outil:hover { text-decoration: none; filter: brightness(.92); }
.picto-outil .icon { width: 14px; height: 14px; }
/* Au survol d'un picto : l'identifiant dans l'outil, copiable en un clic (bulle_controller) */
.picto-outil-bloc { display: inline-flex; }
/* Bleu Scoob obligatoire : un lien dans un texte d'aide se distingue par le soulignement, pas seulement par la couleur (axe link-in-text-block) */
.t-soft a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
/* BUG-028 : un lien de la ligne d'état d'une fiche passe à la ligne d'un bloc, sans chevaucher les pictos de la ligne précédente */
.page-header .sub a { display: inline-block; }
/* 04/11/2026 (Max) : le picto Pipedrive lié est un lien, « inline-block » l'emportait sur .picto-outil et calait le « p » à gauche de sa pastille */
.page-header .sub a.picto-outil { display: inline-flex; }
.picto-bulle { position: fixed; z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-modal); font-size: 12px; line-height: 16px; white-space: nowrap; }
.picto-bulle[hidden] { display: none; }
.picto-bulle-libelle { color: var(--text-soft); }
.picto-bulle-id { font-family: var(--font-mono); font-size: 12px; color: var(--text); user-select: all; }
.picto-bulle-copier { width: auto; min-width: 28px; height: 28px; padding: 0 6px; font-size: 12px; }
.picto-bulle-copier .icon { width: 14px; height: 14px; }
.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; }

/* ---------- Cartes & blocs ---------- */
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-l); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.card-body { padding: 16px; }
.card-footer { padding: 12px 16px; border-top: 1px solid var(--border); }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.stat-label { font-size: 12px; line-height: 16px; color: var(--text-soft); font-weight: 500; }
.stat-value { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.stat-delta { font-size: 12px; line-height: 16px; color: var(--text-soft); }
.stat-delta.up { color: var(--success-text); }
.stat-delta.down { color: var(--danger-text); }
/* Tableau de bord (31/10/2026) : évolution sur un mois, graphiques d'une série (marque en couleur, texte en encre neutre) */
.stat-delta.is-hausse { color: var(--success-text); }
.stat-delta.is-baisse { color: var(--danger-text); }
.stat-hero .stat-value { font-size: 36px; line-height: 44px; }
a.stat-lien { color: inherit; text-decoration: none; }
a.stat-lien:hover { border-color: var(--accent); }
.graphique { position: relative; }
.graphique-zone { width: 100%; min-height: 120px; }
.graphique-zone svg { display: block; overflow: visible; }
.graphique-zone .g-grille { stroke: var(--border); stroke-width: 1; }
.graphique-zone .g-axe { fill: var(--text-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.graphique-zone .g-libelle { fill: var(--text); font-size: 12px; }
.graphique-zone .g-valeur { fill: var(--text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.graphique-zone .g-ligne { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphique-zone .g-aire { fill: var(--accent); opacity: .1; }
.graphique-zone .g-point { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.graphique-zone .g-barre { fill: var(--accent); opacity: .55; }
.graphique-zone .g-barre.is-courante { opacity: 1; }
.graphique-zone .g-repere { stroke: var(--text-soft); stroke-width: 1; }
.graphique-zone .g-cible { fill: transparent; cursor: default; outline: none; }
.graphique-zone .g-cible.is-survol { fill: var(--accent); fill-opacity: .06; }
.graphique-zone .g-cible.is-cliquable { cursor: pointer; }
.graphique-bulle { position: absolute; transform: translate(-50%, -100%); margin-top: 8px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); font-size: 12px; line-height: 16px; pointer-events: none; z-index: 3; max-width: 260px; }
.graphique-tableau { margin-top: 8px; }
.graphique-tableau summary { cursor: pointer; color: var(--text-soft); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 01/11/2026 : champs sans aide alignés sur leur bas, quand un libellé passe sur deux lignes */
.grid-aligne-bas { align-items: end; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Tableaux ---------- */
/* Un tableau qui défile est focalisable au clavier (axe scrollable-region-focusable) : tabindex posé par assets/app.js */
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* BUG-028 : repère de positionnement, sinon les textes .sr-only des pictos (position absolue) élargissent la page */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-l); }
/* Tableau posé directement dans une carte : enveloppe ajoutée par lib/tableaux.js, sans second cadre */
.table-wrap.table-wrap-carte { border: 0; border-radius: 0 0 var(--radius-l) var(--radius-l); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { position: relative; text-align: left; padding: 0 8px; height: 40px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-soft); background: var(--bg-subtle); border-bottom: 1px solid var(--border); white-space: nowrap; }
/* Une cellule tient sur une ligne : le tableau défile horizontalement dans son cadre plutôt que de passer à la ligne */
.table td { padding: 0 8px; height: 40px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.table td .wrap, .table td.wrap { white-space: normal; }
/* Texte long dans une cellule : une ligne coupée par « … », le texte entier en infobulle (attribut title) */
.table .cellule-longue { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
/* Largeur des colonnes réglable à la souris (lib/tableaux.js), mémorisée par page */
.col-poignee { position: absolute; top: 0; right: -4px; z-index: 2; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
.col-poignee::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 3px; width: 2px; border-radius: 1px; background: transparent; transition: background .12s; }
.table th:hover .col-poignee::after, .col-poignee.is-active::after { background: var(--accent); }
.table.colonnes-fixees { table-layout: fixed; min-width: 100%; }
.table.colonnes-fixees th, .table.colonnes-fixees td { overflow: hidden; text-overflow: ellipsis; }
.table.colonnes-fixees td.actions { overflow: visible; }
body.redimension-colonne { cursor: col-resize; user-select: none; }
/* État vide dans un tableau : le cadre pointillé respire à l'intérieur de la cellule */
.table td > .empty { margin: 12px 4px; white-space: normal; }
.table tbody tr:has(> td > .empty):hover td { background: transparent; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-subtle); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .nowrap, .table td.t-mono, .table td.t-num { white-space: nowrap; }
.table td .input, .table td .select { min-height: 28px; padding: 3px 8px; }
.table .actions { text-align: right; white-space: nowrap; width: 1%; }
.table .actions .btn { vertical-align: middle; }
.table .actions .btn + .btn, .table .actions form + form, .table .actions .btn + form, .table .actions form + .btn { margin-left: 4px; }
.table .actions form { display: inline-flex; vertical-align: middle; } /* aligné sur les liens-pictos voisins (31/10/2026) */
.table .badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0; }
.table a.row-link { color: inherit; font-weight: 500; }

/* ---------- Alertes / flash ---------- */
.alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-soft); }
.alert-error { background: var(--danger-bg-soft); border-color: rgba(255, 88, 100, .4); color: var(--danger-text); }
.alert-success { background: var(--success-bg-soft); border-color: rgba(51, 176, 111, .4); color: var(--success-text); }
.alert-warning { background: var(--warning-bg-soft); border-color: rgba(245, 158, 12, .4); color: var(--warning-text); }
.alert-info { background: var(--accent-bg-soft); border-color: var(--accent-border-soft); color: var(--accent-text); }
.banner-danger { background: var(--danger); color: #fff; padding: 8px 16px; font-weight: 500; }

/* ---------- Avatar ---------- */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Coquille de l'application ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--sidebar-bg); padding: 12px; }
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 8px 16px; }
.brand-emails { display: flex; align-items: center; gap: 4px; flex-basis: 100%; min-width: 0; font-size: 11px; line-height: 14px; color: var(--warning-text); }
.brand-emails .icon { flex: none; width: 12px; height: 12px; }
.brand-emails span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.brand-name { font-weight: 600; letter-spacing: -0.3px; }
.brand-logo { height: 28px; width: auto; display: block; }
.brand-env { margin-left: auto; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: var(--radius); color: var(--text); font-weight: 500; }
.nav a:hover { background: var(--bg-soft); text-decoration: none; }
.nav a.is-active { background: var(--accent-bg-soft); color: var(--accent-text); }
.nav a .icon { width: 18px; height: 18px; color: var(--text-soft); }
.nav a.is-active .icon { color: var(--accent-text); }
.nav .counter { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; line-height: 20px; text-align: center; font-weight: 600; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 0; }
.sidebar-footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--border); }
.sidebar-footer .who { display: flex; flex-direction: column; min-width: 0; }
.sidebar-footer .who strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer .who span { font-size: 12px; color: var(--text-soft); }

.main { min-width: 0; display: flex; flex-direction: column; }
/* Raccourci « / » : le rappel disparaît quand le champ a le focus */
.search:focus-within kbd { display: none; }

/* Champ éditable en place (avenant n°1, changement 1) : la valeur se lit comme du texte, le cadre apparaît au survol et au focus */
.champ-editable { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; max-width: 100%; position: relative; }
.champ-editable-input { width: auto; min-width: 6ch; min-height: 24px; padding: 1px 6px; margin: -2px -6px; border-color: transparent; background: transparent; font: inherit; line-height: 20px; color: inherit; text-align: inherit; border-radius: var(--radius); transition: border-color .12s, background-color .12s; }
.champ-editable-input:hover { border-color: var(--border); background: var(--bg-soft); }
.champ-editable-input:focus { border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px var(--accent-bg-soft); }
.champ-editable-input::placeholder { color: var(--text-soft); }
/* Nombre éditable : largeur à sa mesure, le suffixe (j, €, %) reste collé à la valeur, y compris dans un tableau */
.champ-nombre .champ-editable-input { width: 9ch; }
.table td .champ-editable-input { min-height: 24px; padding: 1px 6px; }
.champ-editable textarea.champ-editable-input { width: 100%; min-height: 24px; resize: none; field-sizing: content; white-space: pre-line; }
/* Une note (textarea) occupe toute la largeur de son bloc, pas seulement celle de son texte (31/10/2026) */
.champ-editable.champ-textarea { display: flex; width: 100%; }
.champ-editable.champ-textarea textarea.champ-editable-input { width: calc(100% + 12px); min-height: 48px; }
.champ-editable select.champ-editable-input { padding-right: 24px; }
.champ-editable-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.champ-editable-suffixe, .champ-editable-verrou { color: var(--text-soft); font-size: 13px; }
.champ-editable-verrou .icon { width: 14px; height: 14px; }
.champ-editable-lien { font-size: 12px; white-space: nowrap; }
.champ-editable-rafraichir { display: inline-flex; }
.champ-editable-rafraichir .btn { min-height: 22px; padding: 0 4px; }
.champ-editable-etat { display: inline-flex; align-items: center; min-width: 0; }
/* Vide (ni ✓ ni erreur), la zone d'état annule le gap du conteneur : la valeur s'aligne sur le bord comme le texte voisin */
.champ-editable-etat:empty { margin-left: -6px; }
.champ-editable-erreur { display: block; flex-basis: 100%; font-size: 12px; line-height: 16px; color: var(--danger-text); white-space: normal; }
.champ-editable.is-erreur .champ-editable-input { border-color: var(--danger); }
/* 01/11/2026 : un champ éditable en ligne prend la largeur de son contenu : un email ou une valeur longue n'est plus coupé,
   et la valeur s'aligne sur le bord comme le texte voisin */
.champ-editable input.champ-editable-input:not([type=date]) { field-sizing: content; max-width: 100%; }
.champ-nombre .champ-editable-input { width: auto; min-width: 4ch; }
/* Sans flèches d'incrément : elles réservaient ~15 px et écartaient le suffixe (« 10    j »). */
.champ-editable input[type=number].champ-editable-input { appearance: textfield; -moz-appearance: textfield; }
.champ-editable input[type=number].champ-editable-input::-webkit-inner-spin-button, .champ-editable input[type=number].champ-editable-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Dans un tableau : la colonne s'élargit au contenu, et les valeurs éditables restent sur la ligne du texte voisin */
.table td .champ-editable input.champ-editable-input:not([type=date]) { max-width: none; }
.table td .champ-editable { vertical-align: middle; }
.row-between .champ-textarea textarea.champ-editable-input:placeholder-shown { text-align: right; min-height: 24px; }
.champ-editable-ok { color: var(--success-text); animation: champ-ok 1.2s ease forwards; }
@keyframes champ-ok { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }
/* Dans une ligne libellé / valeur, le champ prend la place de la valeur, aligné à droite */
.row-between > .champ-editable { flex: 1; justify-content: flex-end; margin-left: 16px; text-align: right; }
.row-between > .champ-editable .champ-editable-input { text-align: right; max-width: 100%; }
.row-between > .champ-editable textarea.champ-editable-input { text-align: left; }
.row-between > .champ-editable .champ-editable-erreur { text-align: right; }
/* Dans une cellule de tableau, le champ remplit la cellule */
td > .champ-editable { display: flex; width: 100%; }
td > .champ-editable .champ-editable-input { width: 100%; }
td > .champ-nombre { display: inline-flex; width: auto; }
td > .champ-nombre .champ-editable-input { width: 9ch; }
td.num > .champ-editable { justify-content: flex-end; }
td.num > .champ-editable .champ-editable-input { text-align: right; }

/* Panneau latéral (avenant n°1, changement 3) : 480 px, 640 px pour les formulaires longs ; jamais empilé */
.panneau-fond { position: fixed; inset: 0; z-index: 40; background: rgba(15, 18, 28, .32); }
.panneau { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: 480px; max-width: 100vw; overflow-y: auto; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -16px 0 40px rgba(15, 18, 28, .14); animation: panneau-entree .18s ease-out; }
.panneau.is-large { width: 640px; }
.panneau[hidden], .panneau-fond[hidden] { display: none; }
.panneau-fermer { position: absolute; top: 14px; right: 16px; z-index: 1; }
.panneau-page { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 32px; }
.panneau-entete { padding-right: 40px; }
.panneau-entete .sub { color: var(--text-soft); margin-top: 4px; font-size: 13px; line-height: 18px; }
.panneau .grid-2, .panneau .grid-3, .panneau .grid-4 { grid-template-columns: 1fr; }
.panneau .card { box-shadow: none; }
.panneau .page-actions { display: none; }
body.panneau-ouvert { overflow: hidden; }
@keyframes panneau-entree { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Barre sticky d'une fiche (avenant n°1, changement 2) */
.barre-sticky { position: sticky; top: var(--header-h); z-index: 9; display: flex; align-items: center; gap: 20px; min-height: 52px; padding: 8px 24px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 6px 16px rgba(15, 18, 28, .05); animation: barre-entree .15s ease-out; }
.barre-sticky[hidden] { display: none; }
.barre-titre { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 120px; max-width: 320px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.barre-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.barre-titre .badge { flex: none; }
/* Les infos qui ne tiennent pas passent sur une seconde ligne masquée : jamais de chevauchement ni de valeur tronquée */
.barre-infos { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 24px; row-gap: 8px; flex: 1 1 0; min-width: 0; height: 34px; overflow: hidden; }
.barre-info { display: flex; flex-direction: column; flex: none; white-space: nowrap; }
.barre-info > span:first-child { font-size: 11px; line-height: 14px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .3px; }
.barre-info > span:last-child { font-size: 14px; line-height: 18px; font-weight: 500; }
.barre-info .badge { height: 18px; padding: 0 6px; font-size: 11px; }
.barre-actions { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; white-space: nowrap; }
.barre-actions form { display: inline-flex; }
@keyframes barre-entree { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Actions par ligne (avenant n°1, changement 4) : visibles au survol et au focus clavier */
.table tbody .actions .btn, .table tbody .actions form { opacity: 0; transition: opacity .12s; }
.table tbody tr:hover .actions .btn, .table tbody tr:focus-within .actions .btn, .table tbody tr:hover .actions form, .table tbody tr:focus-within .actions form, .table tbody .actions .btn:focus-visible { opacity: 1; }
@media (hover: none) { .table tbody .actions .btn, .table tbody .actions form { opacity: 1; } }

/* Popup d'impact (avenant n°1, changement 6) */
dialog.impact { width: 520px; max-width: calc(100vw - 32px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--bg); color: var(--text); box-shadow: 0 24px 64px rgba(15, 18, 28, .22); }
dialog.impact::backdrop { background: rgba(15, 18, 28, .4); }
.impact-page { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 8px; }
.impact-lignes { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-soft); }
.impact-ligne { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 20px; }
.impact-ligne strong { text-align: right; font-weight: 500; }
.impact-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 20px; }

/* Glisser-déposer des lignes (modèles d'onboarding) */
tr.is-dragging { opacity: .4; }
tr[draggable] td .input, tr[draggable] td .select { min-width: 0; }

/* Entrée fournisseur du stock : réception d'un BDC dans un cadre Turbo */
#entree-fournisseur { display: block; }

/* Aperçu de facture et sélection de lignes (avenant, changements 16 et 17) */
.apercu-remise td { color: var(--text-soft); }
.selection-barre { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; margin-bottom: 8px; }
.selection-barre[hidden] { display: none; }
dialog.impact .apercu-facture .table { font-size: 12px; }
dialog.impact { width: 640px; }

/* Bandeau de recette (horloge simulée, Admin uniquement, jamais en production) */
.bandeau-recette { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 24px; font-size: 13px; background: var(--warning-bg-soft); color: var(--warning-text); border-bottom: 1px solid rgba(245, 158, 12, .4); }
.bandeau-recette strong { font-weight: 600; }
.bandeau-recette form { display: contents; }
.bandeau-recette .btn { padding: 2px 8px; min-height: 26px; font-size: 12px; }
.bandeau-recette .btn-group { display: inline-flex; gap: 4px; }
.bandeau-recette .lien { margin-left: auto; color: inherit; text-decoration: underline; }

.header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; height: var(--header-h); padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--bg); }
.search { position: relative; flex: 1; max-width: 520px; }
.search .icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-soft); }
.search input { padding-left: 32px; font-size: 14px; line-height: 20px; }
.search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-ui); font-size: 11px; color: var(--text-soft); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.content { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
/* Les boutons d'une page sont toujours à droite : en face du titre, ou en dessous mais calés à droite s'ils sont nombreux */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.page-header > :first-child { flex: 1 1 360px; min-width: 0; }
.page-header > .page-actions { flex: 0 1 auto; justify-content: flex-end; margin-left: auto; }
.page-header .sub { color: var(--text-soft); margin-top: 4px; }
/* 04/11/2026 (Max) : période des KPI de l'Analyse mise en avant sous le titre */
.periode-kpi { margin-top: 2px; font-size: 20px; line-height: 28px; letter-spacing: -0.3px; }
.periode-kpi .t-soft { font-size: 14px; letter-spacing: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* Recette du 04/11/2026 (NV-02) : un groupe de boutons dans les actions de page replie aussi sur téléphone (planning à 390 px) */
.page-actions .btn-group { flex-wrap: wrap; }
.section { display: flex; flex-direction: column; gap: 12px; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.empty { padding: 32px; text-align: center; color: var(--text-soft); border: 1px dashed var(--border-bold); border-radius: var(--radius-l); }
.empty strong { display: block; color: var(--text); margin-bottom: 4px; }

/* Onglets */
.tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); }
.tabs a { position: relative; padding: 8px 0 10px; color: var(--text-soft); font-weight: 500; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active { color: var(--text); }
.tabs a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; }
.segmented { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--radius-l); background: var(--bg-soft); }
.segmented a, .segmented button { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: var(--text-soft); font-weight: 500; font-size: 12px; line-height: 16px; white-space: nowrap; cursor: pointer; }
.segmented a:hover { text-decoration: none; color: var(--text); }
.segmented .is-active { background: var(--bg); color: var(--text); box-shadow: var(--shadow-s); }

/* Menus déroulants */
.menu { min-width: 180px; padding: 6px; border-radius: var(--radius-l); background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-modal); }
.menu a, .menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border-radius: var(--radius); border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--bg-soft); text-decoration: none; }

/* Modales */
dialog.modal { border: 0; padding: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); background: var(--bg); color: var(--text); width: min(560px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(26, 27, 31, 0.45); }

/* Portail client */
.portal { min-height: 100vh; background: var(--bg-subtle); display: flex; flex-direction: column; align-items: center; padding: 32px 16px; }
.portal-card { width: 100%; max-width: 720px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; }
.steps { display: flex; gap: 8px; margin: 16px 0 24px; }
.step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius); background: var(--bg-soft); font-size: 12px; font-weight: 500; color: var(--text-soft); }
.step .n { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 11px; }
.step.is-active { background: var(--accent-bg-soft); color: var(--accent-text); }
.step.is-done { color: var(--success-text); }
.steps-resume { display: none; }
.choix-contact:has(input[value="nouveau"]:checked) [data-nouveau-contact] { display: grid; }
.choix-contact:not(:has(input[value="nouveau"]:checked)) [data-nouveau-contact] { display: none; }
/* BUG-018 : sur téléphone, la barre d'étapes défile dans son cadre au lieu d'élargir la page */
/* Recette du 27/10/2026 : carte élargie à 720 px pour 6 étapes ; en dessous de 760 px, la barre défile encore dans son cadre */
@media (max-width: 760px) {
  .steps { overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 auto; }
  .steps-resume { display: block; margin-top: 12px; font-size: 13px; color: var(--text-soft); }
}

/* Fil chronologique de la commande (31/10/2026) : étapes franchies, prochaine, à venir ; en colonne sur écran étroit */
.fil-etapes { list-style: none; margin: 0; padding: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.fil-etape { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fil-etape::before { content: ""; position: absolute; top: 11px; left: 28px; right: -4px; height: 2px; background: var(--border); }
.fil-etape:last-child::before { display: none; }
.fil-etape.is-fait::before { background: var(--success-text); }
.fil-point { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--bg-soft); color: var(--text-soft); border: 2px solid var(--border); }
.fil-point .icon { width: 14px; height: 14px; }
.fil-etape.is-fait .fil-point { background: var(--success-text); border-color: var(--success-text); color: var(--bg); }
.fil-etape.is-prochaine .fil-point { background: var(--accent-bg-soft); border-color: var(--accent-text); color: var(--accent-text); }
.fil-etape.is-a-venir .fil-texte strong { color: var(--text-soft); font-weight: 500; }
.fil-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .fil-etapes { grid-auto-flow: row; grid-auto-columns: auto; gap: 12px; }
  .fil-etape { flex-direction: row; align-items: flex-start; gap: 12px; }
  .fil-etape::before { top: 28px; bottom: -14px; left: 11px; right: auto; width: 2px; height: auto; }
}

/* Modèle d'onboarding enregistré d'un coup (31/10/2026) */
.barre-enregistrer { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--border); margin-top: 8px; z-index: 2; }
.barre-enregistrer .btn-primary { margin-left: auto; }
tr.ligne-etape td .input[name$="[libelle]"] { min-width: 240px; }
tr.ligne-etape td .select[name$="[type]"] { min-width: 150px; }
.retirer-etape { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--text-soft); padding: 4px; border-radius: var(--radius); }
.retirer-etape input { margin: 0; }
.ligne-etape:has(.retirer-etape input:checked) td { opacity: .45; text-decoration: line-through; }
.ligne-etape:has(.retirer-etape input:checked) .retirer-etape { opacity: 1; color: var(--danger-text); text-decoration: none; }

/* Paramètres > Entreprise (31/10/2026) : aperçu des fichiers de marque déposés */
.marque-apercu { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 44px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.marque-apercu.is-sombre { background: #1F2230; }
.marque-apercu img { max-height: 30px; max-width: 180px; }

/* Paramètres > Emails (31/10/2026) : templates par déclencheur, éditeur visuel */
.emails-grille { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.liste-templates { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.liste-templates li { padding: 6px 8px; border-radius: var(--radius); }
.liste-templates li.is-current { background: var(--accent-bg-soft); }
.liste-templates li .badge { margin-left: 4px; }
.nouveau-template { border-top: 1px solid var(--border); padding-top: 12px; }
.encadre { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin: 0; min-width: 0; }
.encadre > legend { padding: 0 4px; }
.editeur-email { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.editeur-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.editeur-barre .btn { min-height: 28px; padding: 0 8px; }
.editeur-barre .btn:disabled { opacity: .4; }
.editeur-barre .select { min-height: 28px; padding: 2px 24px 2px 8px; font-size: 13px; }
.editeur-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.editeur-mode { margin-left: auto; }
.editeur-visuel { min-height: 260px; padding: 16px; outline: none; overflow-wrap: anywhere; }
.editeur-visuel:focus { box-shadow: inset 0 0 0 2px var(--accent-bg-soft); }
.editeur-source { border: 0; border-radius: 0; min-height: 260px; font-size: 13px; }
.email-contenu p { margin: 0 0 12px; }
.email-contenu h2 { font-size: 18px; margin: 0 0 12px; }
.email-contenu a.btn { display: inline-block; padding: 8px 16px; border-radius: 6px; background: var(--accent); color: #fff; text-decoration: none; }
@media (max-width: 900px) { .emails-grille { grid-template-columns: minmax(0, 1fr); } }

/* Planning d'expédition (31/10/2026) : sept colonnes, jour et date sur deux lignes, jour courant mis en avant ;
   sous 1100 px, la semaine défile dans son cadre plutôt que d'écraser les colonnes */
.planning-semaine { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.planning-jour { display: flex; flex-direction: column; min-width: 0; min-height: 180px; border: 1px solid var(--border); border-radius: var(--radius-l, 12px); background: var(--bg); }
.planning-jour.is-weekend { background: var(--bg-soft); }
.planning-jour.is-aujourdhui { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.planning-jour-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.planning-jour-nom { font-size: 12px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .02em; }
.planning-jour-date { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.is-aujourdhui .planning-jour-date { color: var(--accent-text); }
.planning-jour-repere { flex-basis: 100%; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--accent-text); }
.planning-jour-corps { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.planning-item { display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px; border-radius: var(--radius); font-size: 12px; line-height: 16px; text-decoration: none; overflow-wrap: anywhere; }
.planning-item .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.planning-item:hover { text-decoration: none; filter: brightness(.95); }
.planning-item.is-expedition { background: var(--accent-bg-soft); color: var(--accent-text); }
.planning-item.is-livraison { background: var(--success-bg-soft); color: var(--success-text); }
.planning-item.is-retour { background: var(--warning-bg-soft); color: var(--warning-text); }
.planning-item.is-formation { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); }
.planning-vide { font-size: 12px; color: var(--text-soft); }

/* Onboarding en Kanban (31/10/2026) : une colonne par phase, défilement horizontal dans son cadre */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kanban-colonne { background: var(--bg-soft); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kanban-titre { font-size: 13px; font-weight: 600; margin: 4px 4px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kanban-aide { font-size: 12px; line-height: 16px; color: var(--text-soft); margin: 0 4px 4px; min-height: 32px; }
.kanban-carte { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.kanban-carte.is-retard { border-left: 3px solid var(--warning); }
.kanban-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; text-align: left; }
.kanban-entete .badge { flex: none; }
.help a, .t-soft a.souligne { text-decoration: underline; }
.kanban-progression { height: 4px; border-radius: 2px; background: var(--bg-soft); overflow: hidden; }
.kanban-progression span { display: block; height: 100%; background: var(--success-text); }
.kanban-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.kanban-actions:empty { display: none; }
.kanban-actions form { display: inline-flex; }
.kanban-vide { margin: 4px; }

/* Avenant n°2 : 9 onglets sur la fiche client (Affaires) ; en dessous de 900 px (zoom 200 %), ils défilent dans leur cadre */
@media (max-width: 900px) {
  .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: 0 0 auto; white-space: nowrap; }
  .tabs a.is-active::after { bottom: 0; }
}

/* UX-AUD-02/03/04, A11Y-AUD-08 : sur téléphone, onglets, filtres et tableaux défilent dans leur cadre au lieu d'élargir la page */
@media (max-width: 640px) {
  .tabs, .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .segmented::-webkit-scrollbar { display: none; }
  .tabs a, .segmented a, .segmented button { flex: 0 0 auto; white-space: nowrap; }
  .tabs a.is-active::after { bottom: 0; }
  .card > .table { display: block; overflow-x: auto; }
  .table-wrap > .table { min-width: 640px; }
  .table-wrap .champ-editable-input { min-width: 28ch; }
  .card-header { flex-wrap: wrap; }
  .card-header > .row { flex-wrap: wrap; }
  .grid > * { min-width: 0; }
  .section-header, .section-header > .row { flex-wrap: wrap; }
}

/* A11Y-AUD-07 : lien d'évitement, visible seulement au focus clavier */
.lien-evitement { position: absolute; left: 8px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: var(--radius-l); background: var(--bg); color: var(--accent-text); box-shadow: var(--shadow-modal); font-weight: 500; }
.lien-evitement:focus { top: 8px; outline: 2px solid var(--accent); outline-offset: 2px; }
.panneau:focus, dialog.impact:focus { outline: none; }
#contenu:focus { outline: none; }

/* Utilitaires */
.row { display: flex; align-items: center; gap: 8px; }
/* Barre de filtres d'une liste : la recherche garde une largeur utile, le bouton d'envoi reste à droite */
form.row > .search { flex: 1 1 220px; min-width: 200px; }
form.row > button.btn:last-child, form.row > .btn:last-child { margin-left: auto; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-wrap { flex-wrap: wrap; }
.row-end { justify-content: flex-end; }
.row > form, .row-between > form, .page-actions > form { display: contents; }
.row-between > a, .row-between > span:last-child { text-align: right; }
.row-between > .t-soft:first-child { flex-shrink: 0; }
/* Boutons d'action en pied de carte, alignés sur une ligne qui replie. */
.card-footer.row, .card-footer.row-between { flex-wrap: wrap; }
.card-footer > details { flex-basis: 100%; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.inline-editor > summary { display: inline-flex; }
/* BUG-016 : un résumé en bouton de pleine largeur (aperçu d'email) passe à la ligne au lieu d'élargir la page */
details.card > summary.btn { white-space: normal; height: auto; min-height: 36px; text-align: left; }
details.inline-editor[open] > summary { margin-bottom: 12px; }
/* Éditeur en surimpression : le résumé est un bouton, le panneau s'ouvre dessous sans déformer la ligne. */
details.popover { position: relative; display: inline-block; }
details.popover > summary { display: inline-flex; }
details.popover > .popover-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 320px; padding: 12px; border-radius: var(--radius-l); background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-modal); text-align: left; white-space: normal; }
details.popover.popover-left > .popover-panel { right: auto; left: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }
/* Bouton d'envoi d'un formulaire empilé : à droite, à sa taille */
.stack > .btn, .stack > button.btn { align-self: flex-end; }
.ml-auto { margin-left: auto; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.hidden { display: none !important; }
.icon { width: 1em; height: 1em; }
.login { min-height: 100vh; display: grid; place-items: center; background: var(--bg-subtle); padding: 16px; }
.login-card { width: 100%; max-width: 400px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-footer { display: none; }
  .content { padding: 16px; }
}

/* Recette du 01/11/2026 : logo sombre (Paramètres > Entreprise) affiché en thème sombre */
.brand-logo-sombre { display: none; }
:root[data-theme="dark"] .brand-logo-sombre { display: inline; }
:root[data-theme="dark"] .brand-logo-clair { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-sombre { display: inline; }
  :root:not([data-theme="light"]) .brand-logo-clair { display: none; }
}

/* Fiche d'édition client, « Vérifier et compléter depuis le SIREN » : écarts fiche / registre, une ligne par champ */
.registre [data-registre-target="resultat"]:empty { display: none; }
.registre-ecarts { border: 1px solid var(--border); border-radius: var(--radius); }
.registre-ecart { display: flex; gap: 12px; align-items: center; padding: 10px 12px; }
.registre-ecart + .registre-ecart { border-top: 1px solid var(--border); }
.registre-ecart > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.registre-ecart .t-small { overflow-wrap: anywhere; }

/* Avenant n°4 (changement 58) : jauges du tableau des objectifs et légende de la courbe */
.jauge-barre { display: block; height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; margin: 6px 0 2px; }
.jauge-barre > span { display: block; height: 100%; border-radius: 3px; }
.jauge-accent { background: var(--accent); }
.jauge-success { background: var(--success-text); }
.jauge-warning { background: var(--warning-text); }
a.jauge:hover { border-color: var(--accent); }
.legende { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.legende-accent { background: var(--accent); }
.legende-vendus { background: var(--text-soft); opacity: .45; }
.legende-objectif { background: var(--warning-text); height: 3px; vertical-align: 2px; }