/* Lockup combiné : tuile SevenGroupe + wordmark (cf. « combiné » de la charte) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sz-s-2);
}

.brand__tile {
  display: block;
  flex: none;
  border-radius: var(--sz-r-md);
}

/* Wordmark à la SevenGroupe : casse mixte, « Seven » sombre + 2e mot gris */
.brand__name {
  font-family: var(--sz-font-ui);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--sz-text);
}

.brand__name > span {
  color: var(--sz-text-2);
  font-weight: 800;
}

.brand--sm .brand__name { font-size: 16px; }
.brand--md .brand__name { font-size: 24px; }
.brand--lg .brand__name { font-size: 32px; }

.brand--sm .brand__tile { width: 22px; height: 22px; }
.brand--md .brand__tile { width: 30px; height: 30px; }
.brand--lg .brand__tile { width: 44px; height: 44px; }
/* Primitives UI partagées du module SAV.
   Importée en JS (donc bundlée) — ce ne sont PAS des tokens de thème, juste des
   composants ; les couleurs passent toutes par var(--sz-*). */

/* ── Page ────────────────────────────────────────────────────────────────── */
.sv-page {
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-6);
  color: var(--sz-text);
  font-family: var(--sz-font-ui);
}

.sv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sz-s-4);
  flex-wrap: wrap;
}

.sv-head__titles { display: flex; flex-direction: column; gap: var(--sz-s-1); min-width: 0; }
.sv-title { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sv-subtitle { margin: 0; color: var(--sz-text-2); font-size: 0.95rem; }

.sv-back {
  display: inline-flex; align-items: center; gap: var(--sz-s-2);
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--sz-text-3); font: inherit; font-size: 0.85rem; font-weight: 600;
  margin-bottom: var(--sz-s-2);
}
.sv-back:hover { color: var(--sz-text); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sz-s-2);
  padding: var(--sz-s-2) var(--sz-s-4); border-radius: var(--sz-r-md);
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--sz-border); background: var(--sz-surface); color: var(--sz-text);
  transition: background-color var(--sz-dur) var(--sz-ease), border-color var(--sz-dur) var(--sz-ease), color var(--sz-dur) var(--sz-ease);
  white-space: nowrap;
}
.sv-btn:hover { background: var(--sz-surface-2); }
.sv-btn:focus-visible { outline: none; box-shadow: var(--sz-ring); }
.sv-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sv-btn--primary { background: var(--sz-accent); border-color: var(--sz-accent); color: var(--sz-on-accent); }
.sv-btn--primary:hover { background: var(--sz-accent-hover); border-color: var(--sz-accent-hover); }
.sv-btn--ghost { background: transparent; border-color: transparent; color: var(--sz-text-2); }
.sv-btn--ghost:hover { background: var(--sz-surface-2); color: var(--sz-text); }
.sv-btn--danger:hover { background: var(--sz-red-soft); border-color: var(--sz-red); color: var(--sz-red); }
.sv-btn--sm { padding: var(--sz-s-1) var(--sz-s-3); font-size: 0.8rem; }

.sv-icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sz-r-md); border: 1px solid transparent; background: transparent;
  color: var(--sz-text-3); cursor: pointer;
}
/* surface-3 (et non -2) pour rester visible même sur une ligne cliquable surlignée. */
.sv-icon-btn:hover { background: var(--sz-surface-3); color: var(--sz-text); }
.sv-icon-btn--danger:hover { background: var(--sz-red-soft); color: var(--sz-red); }

/* ── Toolbar / filtres ───────────────────────────────────────────────────── */
.sv-toolbar {
  display: flex; align-items: center; gap: var(--sz-s-2); flex-wrap: wrap;
}
.sv-toolbar__spacer { flex: 1; }

.sv-search {
  display: flex; align-items: center; gap: var(--sz-s-2);
  padding: var(--sz-s-2) var(--sz-s-3); min-width: 220px;
  background: var(--sz-input); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
  color: var(--sz-text-3);
}
.sv-search:focus-within { border-color: var(--sz-border-focus); box-shadow: var(--sz-ring); }
.sv-search > svg { flex: none; }
.sv-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 0.875rem; color: var(--sz-text); }

.sv-select {
  padding: var(--sz-s-2) var(--sz-s-3); font: inherit; font-size: 0.85rem;
  background: var(--sz-input); color: var(--sz-text);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); cursor: pointer;
}
.sv-select:focus-visible { outline: none; border-color: var(--sz-border-focus); box-shadow: var(--sz-ring); }

/* ── Panneau / carte ─────────────────────────────────────────────────────── */
.sv-panel {
  background: var(--sz-surface); border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-lg); box-shadow: var(--sz-shadow-sm);
}
.sv-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sz-s-3);
  padding: var(--sz-s-4) var(--sz-s-5); border-bottom: 1px solid var(--sz-border);
}
.sv-panel__title { margin: 0; font-size: 0.95rem; font-weight: 700; }
.sv-panel__body { padding: var(--sz-s-5); }

.sv-section-title {
  margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--sz-text-3);
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* ── Grilles ─────────────────────────────────────────────────────────────── */
.sv-grid { display: grid; gap: var(--sz-s-4); }
.sv-grid--kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sv-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--sz-s-5); align-items: start; }
@media (max-width: 900px) { .sv-cols { grid-template-columns: minmax(0, 1fr); } }

/* Ligne Informations (1/3) + Description (2/3). Les panneaux s'étirent à la même
   hauteur (stretch) pour que la Description occupe le maximum de hauteur. */
.sv-row-desc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sz-s-5); align-items: stretch; }
@media (max-width: 700px) { .sv-row-desc { grid-template-columns: minmax(0, 1fr); } }

/* Panneau qui remplit la hauteur (corps extensible). */
.sv-panel--fill { display: flex; flex-direction: column; }
.sv-panel--fill .sv-panel__body { flex: 1; }

/* Modale centrée */
.sv-modal__overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(11, 14, 18, 0.45);
  display: flex; align-items: center; justify-content: center; padding: var(--sz-s-5);
}
/* Dialogs confirm/alert : au-dessus des drawers et modales (mêmes z-index sinon). */
.sv-modal__overlay--top { z-index: 1100; }
/* Variante : laisse les popups internes (ex. date picker) déborder de la modale
   au lieu d'être clippées par le corps scrollable. */
.sv-modal__overlay--overflow .sv-modal { max-height: none; }
.sv-modal__overlay--overflow .sv-modal__body { overflow: visible; }

/* Prévisualisation de fichiers (image / PDF / Excel) : grande modale à hauteur fixe,
   au-dessus des drawers. Le corps de la modale ne scrolle PAS : seul le contenu
   prévisualisé (pages PDF, feuille Excel) a sa propre barre de défilement. */
.sv-modal__overlay--preview { z-index: 1050; }
.sv-modal__overlay--preview .sv-modal { width: min(960px, 96vw); height: 85vh; }
.sv-modal__overlay--preview .sv-modal__body { overflow: hidden; display: flex; flex-direction: column; }
.sv-preview__img { display: block; max-width: 100%; max-height: 100%; min-height: 0; margin: auto; object-fit: contain; border-radius: var(--sz-r-sm); }
.sv-preview__pdfwrap { flex: 1; min-height: 0; overflow: auto; }
.sv-preview__page { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--sz-border); border-radius: var(--sz-r-sm); margin-bottom: var(--sz-s-2); }
.sv-preview__tabs { flex: none; margin-bottom: var(--sz-s-3); max-width: 100%; overflow-x: auto; }
.sv-preview__sheet { flex: 1; min-height: 0; overflow: auto; font-size: 0.85rem; }
.sv-preview__sheet table { border-collapse: collapse; }
.sv-preview__sheet td { border: 1px solid var(--sz-border); padding: 4px 8px; white-space: nowrap; }
.sv-modal {
  width: min(560px, 100%); max-height: 85vh; display: flex; flex-direction: column;
  background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-r-lg);
  box-shadow: var(--sz-shadow-md); animation: sv-pop var(--sz-dur) var(--sz-ease);
}
@keyframes sv-pop { from { transform: scale(0.98); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sv-modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sz-s-5); border-bottom: 1px solid var(--sz-border); }
.sv-modal__title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.sv-modal__body { padding: var(--sz-s-5); overflow-y: auto; }
.sv-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sz-s-2); padding: var(--sz-s-4) var(--sz-s-5); border-top: 1px solid var(--sz-border); }

/* Sélecteur client → site (formulaire ticket). */
.sv-picker-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 220px; overflow-y: auto; margin-top: var(--sz-s-2);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); padding: var(--sz-s-1);
}
.sv-picker-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--sz-s-2) var(--sz-s-3); border: none; background: transparent;
  border-radius: var(--sz-r-sm); cursor: pointer; text-align: left; font: inherit; color: var(--sz-text);
}
.sv-picker-item:hover { background: var(--sz-surface-2); }
.sv-picker-item__meta { font-size: 0.78rem; color: var(--sz-text-3); }
.sv-picker-selected {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sz-s-2);
  padding: var(--sz-s-2) var(--sz-s-3); margin-bottom: var(--sz-s-2);
  background: var(--sz-surface-2); border-radius: var(--sz-r-md); font-size: 0.875rem;
}

/* ── KPI ─────────────────────────────────────────────────────────────────── */
.sv-kpi {
  display: flex; flex-direction: column; gap: var(--sz-s-2);
  padding: var(--sz-s-5); background: var(--sz-surface);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-lg); box-shadow: var(--sz-shadow-sm);
}
.sv-kpi__label {
  font-size: 0.75rem; font-weight: 700; color: var(--sz-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.sv-kpi__value { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.sv-kpi__hint { font-size: 0.8rem; color: var(--sz-text-2); }
.sv-kpi__value--red { color: var(--sz-red); }
.sv-kpi__value--amber { color: var(--sz-amber); }
/* KPI cliquable (raccourci) */
.sv-kpi--link { position: relative; cursor: pointer; text-align: left; font: inherit; transition: border-color var(--sz-dur) var(--sz-ease), box-shadow var(--sz-dur) var(--sz-ease); }
.sv-kpi--link:hover { border-color: var(--sz-border-strong); box-shadow: var(--sz-shadow-md); }
.sv-kpi--link:focus-visible { outline: none; box-shadow: var(--sz-ring); }
.sv-kpi__go { position: absolute; top: var(--sz-s-3); right: var(--sz-s-3); display: inline-flex; color: var(--sz-text-3); opacity: 0.55; transition: opacity var(--sz-dur) var(--sz-ease), transform var(--sz-dur) var(--sz-ease); }
.sv-kpi--link:hover .sv-kpi__go { opacity: 1; color: var(--sz-text); transform: translateX(2px); }

/* Variation vs N-1 (comparatif statistiques) */
.sv-delta { display: inline-flex; align-items: baseline; gap: 4px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sz-text-3); }
.sv-delta--up { color: var(--sz-green); }
.sv-delta--down { color: var(--sz-red); }
.sv-delta__ref { font-weight: 500; color: var(--sz-text-3); }
/* Comparatif : 2 donuts côte à côte */
.sv-compare-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sz-s-4); }
.sv-compare__cap { font-size: 0.78rem; font-weight: 700; color: var(--sz-text-2); text-align: center; margin-bottom: var(--sz-s-2); }
.sv-toolbar__check { display: inline-flex; align-items: center; gap: var(--sz-s-2); font-size: 0.85rem; color: var(--sz-text-2); cursor: pointer; user-select: none; }
@media (max-width: 640px) { .sv-compare-2 { grid-template-columns: 1fr; } }

/* Liste de documents (site) */
.sv-doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sz-s-1); }
.sv-doc { display: flex; align-items: center; gap: var(--sz-s-2); border-radius: var(--sz-r-md); }
.sv-doc__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sz-s-2); padding: var(--sz-s-2); background: none; border: none; font: inherit; color: var(--sz-text); text-align: left; cursor: pointer; border-radius: var(--sz-r-md); }
.sv-doc__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-doc__name:hover { background: var(--sz-surface-2); color: var(--sz-blue); }
.sv-doc__name > svg { flex: none; color: var(--sz-text-3); }
.sv-doc__del { flex: none; display: inline-flex; padding: var(--sz-s-2); background: none; border: none; color: var(--sz-text-3); cursor: pointer; border-radius: var(--sz-r-md); }
.sv-doc__del:hover { background: var(--sz-red-soft); color: var(--sz-red); }
/* Zone de dépôt des documents */
.sv-doc-drop { display: flex; flex-direction: column; gap: var(--sz-s-2); border-radius: var(--sz-r-md); transition: background var(--sz-dur) var(--sz-ease), box-shadow var(--sz-dur) var(--sz-ease); }
.sv-doc-drop.is-drag { background: var(--sz-blue-soft); box-shadow: inset 0 0 0 2px var(--sz-blue); }
.sv-doc-drop__hint { margin: 0; font-size: 0.8rem; color: var(--sz-text-3); text-align: center; border: 1px dashed var(--sz-border); border-radius: var(--sz-r-md); padding: var(--sz-s-3); }
.sv-doc-warn, .sv-warn { display: flex; align-items: flex-start; gap: var(--sz-s-2); margin: var(--sz-s-3) 0 0; padding: var(--sz-s-2) var(--sz-s-3); font-size: 0.8rem; color: var(--sz-text-2); background: var(--sz-amber-soft); border-radius: var(--sz-r-md); }
.sv-doc-warn { margin: 0; }
.sv-doc-warn > svg, .sv-warn > svg { flex: none; color: var(--sz-amber); margin-top: 1px; }
.sv-warn--err { background: var(--sz-red-soft); color: var(--sz-red); }
.sv-warn--err > svg { color: var(--sz-red); }
.sv-plan__dispo { margin: var(--sz-s-3) 0 0; font-size: 0.85rem; color: var(--sz-text-2); }

/* Rappels d'intervention : pastilles sélectionnées + raccourcis + ajout perso */
.sv-rappels { display: flex; flex-wrap: wrap; gap: var(--sz-s-2); margin-top: var(--sz-s-1); }
.sv-rappel-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; background: var(--sz-blue-soft); color: var(--sz-blue); border-radius: var(--sz-r-pill); font-size: 0.8rem; font-weight: 600; }
.sv-rappel-chip > svg { flex: none; }
.sv-rappel-chip__x { display: inline-flex; padding: 2px; background: none; border: none; color: inherit; cursor: pointer; opacity: 0.7; border-radius: var(--sz-r-pill); }
.sv-rappel-chip__x:hover { opacity: 1; background: color-mix(in srgb, var(--sz-blue) 18%, transparent); }
/* Panneau déroulant d'ajout d'un rappel (raccourcis + saisie perso). */
.sv-rappel-add { display: flex; flex-direction: column; gap: var(--sz-s-3); margin-top: var(--sz-s-2); }
.sv-rappels-presets { display: flex; flex-wrap: wrap; gap: var(--sz-s-2); }
.sv-chip-btn { padding: 4px 10px; font-size: 0.8rem; background: var(--sz-surface-2); border: 1px solid var(--sz-border); border-radius: var(--sz-r-pill); color: var(--sz-text-2); cursor: pointer; transition: border-color var(--sz-dur) var(--sz-ease), color var(--sz-dur) var(--sz-ease); }
.sv-chip-btn:hover:not(:disabled) { border-color: var(--sz-border-strong); color: var(--sz-text); }
.sv-chip-btn:disabled { opacity: 0.4; cursor: default; }
/* Ligne saisie perso : prend toute la largeur, l'input valeur s'étire. */
.sv-rappel-custom__row { display: flex; align-items: center; gap: var(--sz-s-2); }
.sv-rappel-custom__row .sv-rappel__val { flex: 1; min-width: 0; width: auto; text-align: center; }
.sv-rappel-custom__row .sv-rappel__unit { flex: none; width: auto; }
.sv-rappel-custom__row .sv-btn { flex: none; }

/* ── Plannings (drag & drop) ──────────────────────────────────────────────── */
.sv-plan__nav { display: flex; align-items: center; gap: var(--sz-s-2); flex-wrap: wrap; }
.sv-plan__weeklabel { font-size: 0.85rem; font-weight: 600; color: var(--sz-text-2); }
/* Pleine hauteur : la page remplit .layout__content, le scroll se fait DANS les boîtes. */
.sv-page--fill { height: 100%; min-height: 0; }
.sv-page--fill .sv-plan { flex: 1; min-height: 0; }

.sv-plan { display: flex; gap: var(--sz-s-4); align-items: stretch; }
/* Backlog à droite (order), nettement différencié des colonnes de jour. */
.sv-plan__pool { order: 2; width: 260px; flex: none; min-height: 0; display: flex; border-radius: var(--sz-r-lg); transition: box-shadow var(--sz-dur) var(--sz-ease); }
.sv-plan__pool > .sv-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--sz-surface-2); border: 1px dashed var(--sz-border-strong); }
.sv-plan__pool .sv-panel__head { background: var(--sz-surface-3); border-top-left-radius: var(--sz-r-lg); border-top-right-radius: var(--sz-r-lg); }
.sv-plan__pool .sv-panel__title { display: inline-flex; align-items: center; gap: var(--sz-s-2); }
.sv-plan__pool.is-over > .sv-panel { border-style: solid; border-color: var(--sz-blue); box-shadow: 0 0 0 2px var(--sz-blue); background: var(--sz-blue-soft); }
.sv-plan__pool-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sz-s-2); overflow: auto; }
/* Cartes du backlog : accent ambre pour les distinguer des cartes planifiées (bleu). */
.sv-plan__pool .sv-plan__card { background: var(--sz-surface); border-left: 3px solid var(--sz-amber); }
.sv-plan__week { order: 1; flex: 1; min-width: 0; min-height: 0; overflow-x: auto; }
.sv-plan__grid { display: grid; grid-template-columns: repeat(5, minmax(124px, 1fr)); gap: var(--sz-s-2); height: 100%; min-height: 0; }
.sv-plan__day { display: flex; flex-direction: column; min-height: 140px; background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); transition: background var(--sz-dur) var(--sz-ease), box-shadow var(--sz-dur) var(--sz-ease); }
.sv-plan__day.is-today { border-color: var(--sz-blue); }
.sv-plan__day.is-over { background: var(--sz-blue-soft); box-shadow: inset 0 0 0 2px var(--sz-blue); }
/* Tentative de dépôt sur un jour passé : surbrillance rouge (dépôt refusé). */
.sv-plan__day.is-forbidden { background: var(--sz-red-soft); box-shadow: inset 0 0 0 2px var(--sz-red); }
.sv-plan__day-head { padding: var(--sz-s-2); text-align: center; font-size: 0.76rem; font-weight: 700; color: var(--sz-text-2); border-bottom: 1px solid var(--sz-border); flex: none; }
.sv-plan__day-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sz-s-2); display: flex; flex-direction: column; gap: var(--sz-s-2); }
.sv-plan__card { background: var(--sz-surface-2); border: 1px solid var(--sz-border); border-radius: var(--sz-r-sm); padding: var(--sz-s-2); cursor: grab; display: flex; flex-direction: column; gap: 2px; }
.sv-plan__card:hover { border-color: var(--sz-border-strong); }
.sv-plan__card:active { cursor: grabbing; }
.sv-plan__card-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sz-s-1); min-height: 20px; }
.sv-plan__card-prio { justify-self: start; min-width: 0; }
.sv-plan__card-typeicon { justify-self: center; display: inline-flex; color: var(--sz-text-2); }
.sv-plan__card-when { justify-self: end; }
.sv-plan__card-hour { display: inline-flex; align-items: center; gap: 3px; font-size: 0.74rem; font-weight: 700; color: var(--sz-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-plan__card-hour > svg { flex: none; }
.sv-plan__card-souhait { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 600; color: var(--sz-amber); white-space: nowrap; }
.sv-plan__card-souhait > svg { flex: none; }
.sv-plan__card-title { font-size: 0.82rem; font-weight: 600; color: var(--sz-text); overflow-wrap: anywhere; }
.sv-plan__card-loc { display: flex; flex-direction: column; gap: 1px; }
.sv-plan__card-client { font-size: 0.76rem; font-weight: 600; color: var(--sz-text-2); overflow-wrap: anywhere; }
.sv-plan__card-site { font-size: 0.74rem; color: var(--sz-text-3); overflow-wrap: anywhere; }
/* Entre 901 et 1650 px : on n'écrase plus les colonnes, on fige leur largeur et on scrolle. */
@media (min-width: 901px) and (max-width: 1650px) {
  .sv-plan__grid { grid-template-columns: repeat(5, 208px); }
}

@media (max-width: 900px) {
  /* En mobile : on repasse au scroll naturel de la page (pas de pleine hauteur contrainte). */
  .sv-page--fill { height: auto; }
  .sv-page--fill .sv-plan { min-height: 0; }
  .sv-plan { flex-direction: column; align-items: stretch; }
  .sv-plan__pool { width: 100%; }
  .sv-plan__pool-body { overflow: visible; }
  .sv-plan__week { overflow-x: auto; }
  .sv-plan__grid { height: auto; }
  .sv-plan__day-body { overflow: visible; }
}

@media (min-width: 641px) and (max-width: 900px) {
  /* Tablette : ~3 jours visibles + aperçu du suivant (glissement horizontal). */
  .sv-plan__week { scroll-snap-type: x proximity; }
  .sv-plan__grid { grid-template-columns: repeat(5, 30%); }
  .sv-plan__day { scroll-snap-align: start; }
}

@media (max-width: 640px) {
  /* Mobile : 1 jour large + aperçu du suivant → on comprend qu'il faut glisser. */
  .sv-plan__week { scroll-snap-type: x proximity; }
  .sv-plan__grid { grid-template-columns: repeat(5, 85%); }
  .sv-plan__day { scroll-snap-align: start; }
}

/* ── Tableau ─────────────────────────────────────────────────────────────── */
.sv-table-wrap { overflow-x: auto; }
.sv-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sv-table thead th {
  padding: var(--sz-s-3) var(--sz-s-4); text-align: left; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--sz-text-3);
  border-bottom: 1px solid var(--sz-border); white-space: nowrap;
}
.sv-table tbody td { padding: var(--sz-s-3) var(--sz-s-4); border-top: 1px solid var(--sz-border); vertical-align: middle; }
.sv-table tbody tr { transition: background-color var(--sz-dur) var(--sz-ease); }
.sv-table tbody tr.is-clickable { cursor: pointer; }
.sv-table tbody tr.is-clickable:hover { background: var(--sz-surface-2); }
.sv-table__id { font-family: var(--sz-font-data); font-size: 0.82rem; color: var(--sz-text-3); }
.sv-table__strong { font-weight: 600; }
.sv-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.sv-table__center, .sv-table thead th.sv-table__center { text-align: center; font-variant-numeric: tabular-nums; }

/* ── Badges / pills ──────────────────────────────────────────────────────── */
.sv-badge {
  display: inline-flex; align-items: center; gap: var(--sz-s-1);
  padding: 2px var(--sz-s-2); border-radius: var(--sz-r-pill);
  font-size: 0.74rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.sv-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.sv-badge--plain::before { display: none; }
.sv-badge--neutral { background: var(--sz-surface-3); color: var(--sz-text-2); }
.sv-badge--green  { background: var(--sz-green-soft); color: var(--sz-green); }
.sv-badge--amber  { background: var(--sz-amber-soft); color: var(--sz-amber); }
.sv-badge--red    { background: var(--sz-red-soft); color: var(--sz-red); }
.sv-badge--blue   { background: var(--sz-blue-soft); color: var(--sz-blue); }
.sv-badge--violet { background: rgba(139, 92, 246, 0.14); color: #8b5cf6; }

/* ── Liste descriptive (fiche) ───────────────────────────────────────────── */
.sv-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sz-s-3) var(--sz-s-4); margin: 0; }
.sv-dl dt { color: var(--sz-text-3); font-size: 0.8rem; font-weight: 600; }
.sv-dl dd { margin: 0; min-width: 0; font-size: 0.875rem; color: var(--sz-text); overflow-wrap: anywhere; }
.sv-mono { font-family: var(--sz-font-data); }
.sv-link { background: none; border: none; padding: 0; font: inherit; color: var(--sz-blue); cursor: pointer; text-align: left; text-decoration: none; }
.sv-link:hover { text-decoration: underline; }

/* ── Timeline ────────────────────────────────────────────────────────────── */
.sv-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sv-tl { position: relative; padding: 0 0 var(--sz-s-5) var(--sz-s-6); }
.sv-tl::before {
  content: ''; position: absolute; left: 7px; top: 16px; bottom: -2px; width: 2px; background: var(--sz-border);
}
.sv-timeline .sv-tl:last-child { padding-bottom: 0; }
.sv-timeline .sv-tl:last-child::before { display: none; }
.sv-tl__dot {
  position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sz-surface); border: 3px solid var(--sz-text-3);
}
.sv-tl--green .sv-tl__dot { border-color: var(--sz-green); }
.sv-tl--amber .sv-tl__dot { border-color: var(--sz-amber); }
.sv-tl--blue .sv-tl__dot { border-color: var(--sz-blue); }
.sv-tl--violet .sv-tl__dot { border-color: #8b5cf6; }
.sv-tl--accent .sv-tl__dot { border-color: var(--sz-accent); }
.sv-tl__head { display: flex; align-items: baseline; gap: var(--sz-s-2); flex-wrap: wrap; }
.sv-tl__label { font-size: 0.875rem; font-weight: 600; }
.sv-tl__date { font-size: 0.75rem; color: var(--sz-text-3); font-family: var(--sz-font-data); }
.sv-tl__detail { margin: var(--sz-s-1) 0 0; font-size: 0.85rem; color: var(--sz-text-2); white-space: pre-line; }
.sv-tl__who { font-size: 0.78rem; color: var(--sz-text-3); margin-top: 2px; }

/* ── Bulle message ───────────────────────────────────────────────────────── */
.sv-msg { display: flex; flex-direction: column; gap: var(--sz-s-1); padding: var(--sz-s-3) var(--sz-s-4); border-radius: var(--sz-r-md); background: var(--sz-surface-2); }
.sv-msg--tech { background: var(--sz-accent-soft); }
.sv-msg__meta { display: flex; align-items: baseline; gap: var(--sz-s-2); font-size: 0.75rem; color: var(--sz-text-3); }
.sv-msg__author { font-weight: 700; color: var(--sz-text-2); }
.sv-msg__text { font-size: 0.875rem; color: var(--sz-text); }
.sv-msg__doc { display: inline-flex; align-items: center; gap: var(--sz-s-1); font-size: 0.78rem; color: var(--sz-blue); font-family: var(--sz-font-data); }

/* Pièce jointe (timeline + liste documents) */
.sv-attach {
  display: inline-flex; align-items: center; gap: var(--sz-s-2); margin-top: var(--sz-s-2);
  max-width: 100%; padding: var(--sz-s-1) var(--sz-s-3); border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-md); background: var(--sz-surface-2); color: var(--sz-blue);
  font: inherit; font-size: 0.8rem; cursor: pointer; text-align: left;
}
.sv-attach:hover { border-color: var(--sz-blue); }
.sv-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sv-doc-list { display: flex; flex-direction: column; gap: var(--sz-s-2); }
.sv-doc-item {
  display: flex; align-items: center; gap: var(--sz-s-2); width: 100%;
  padding: var(--sz-s-2) var(--sz-s-3); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
  background: var(--sz-surface-2); color: var(--sz-text); font: inherit; font-size: 0.82rem; cursor: pointer; text-align: left;
}
.sv-doc-item:hover { background: var(--sz-surface-3); }
.sv-doc-item__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-doc-item__date { color: var(--sz-text-3); font-size: 0.75rem; font-family: var(--sz-font-data); }

/* ── Formulaires (drawer) ────────────────────────────────────────────────── */
.sv-field { display: flex; flex-direction: column; gap: var(--sz-s-2); }
.sv-field__label { font-size: 0.8rem; font-weight: 600; color: var(--sz-text-2); }
.sv-field__req { color: var(--sz-red); }
.sv-field__hint { display: inline-flex; align-items: center; gap: var(--sz-s-1); font-size: 0.78rem; color: var(--sz-text-3); }
.sv-field__hint svg { color: var(--sz-blue); flex: none; }
.sv-input, .sv-textarea {
  width: 100%; padding: var(--sz-s-2) var(--sz-s-3); font: inherit; font-size: 0.875rem;
  background: var(--sz-input); color: var(--sz-text);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
}
.sv-input:focus, .sv-textarea:focus { outline: none; border-color: var(--sz-border-focus); box-shadow: var(--sz-ring); }
.sv-textarea { resize: vertical; min-height: 80px; }
/* Champs désactivés : grisés + curseur interdit. */
.sv-input:disabled, .sv-textarea:disabled, .sv-select:disabled { opacity: 0.55; cursor: not-allowed; background: var(--sz-surface-2); }
.sv-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* display: flex (et non inline-flex) → dans une cellule de tableau, remplit la largeur
   et colle les actions au bord droit de la ligne. */
.sv-row-actions { display: flex; gap: var(--sz-s-1); justify-content: flex-end; }

/* Signature client affichée sur la fiche (fond blanc du PNG conservé). */
.sv-signature-img { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); }

/* Menu kebab d'actions de ligne */
.sv-kebab { position: relative; display: inline-flex; }
.sv-kebab__menu {
  position: fixed; z-index: 90; min-width: 150px;
  background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
  box-shadow: var(--sz-shadow-md); padding: var(--sz-s-1);
  display: flex; flex-direction: column;
}
.sv-kebab__item {
  display: flex; align-items: center; gap: var(--sz-s-2);
  padding: var(--sz-s-2) var(--sz-s-3); border: none; background: none; border-radius: var(--sz-r-sm);
  font: inherit; font-size: 0.85rem; color: var(--sz-text); cursor: pointer; text-align: left; white-space: nowrap;
}
.sv-kebab__item:hover { background: var(--sz-surface-2); }

/* Zone de signature (clôture d'intervention) */
.sv-signpad { display: flex; flex-direction: column; gap: var(--sz-s-1); }
.sv-signpad__canvas { width: 100%; display: block; background: #fff; border: 1px dashed var(--sz-border-strong); border-radius: var(--sz-r-md); touch-action: none; cursor: crosshair; }
.sv-signpad__clear { align-self: flex-end; }

/* Badge acronyme d'entité (même rendu que l'acronyme vendeur du module gestion-commande). */
.sv-entites { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sv-entite {
  flex: none; padding: 2px 7px; border-radius: var(--sz-r-sm);
  color: var(--sv-entite-color, var(--sz-blue));
  background: color-mix(in srgb, var(--sv-entite-color, var(--sz-blue)) 15%, transparent);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
/* En thème clair, le fond de pastille est très clair : certaines couleurs charte (le lime)
   sont illisibles en texte. On applique la variante foncée si fournie ; le fond reste inchangé. */
.theme-sevenbox:not([data-theme='dark']) .sv-entite {
  color: var(--sv-entite-text-light, var(--sv-entite-color, var(--sz-blue)));
}

/* Choix d'entité (formulaire ticket) : « checkbox » + badge acronyme, mono-sélection. */
.sv-entite-choices { display: flex; flex-wrap: wrap; gap: var(--sz-s-2); }
.sv-entite-choice { display: inline-flex; align-items: center; gap: var(--sz-s-2); padding: var(--sz-s-1) var(--sz-s-3) var(--sz-s-1) var(--sz-s-2); border: 1px solid var(--sz-border); border-radius: var(--sz-r-pill); cursor: pointer; transition: border-color var(--sz-dur) var(--sz-ease), background var(--sz-dur) var(--sz-ease); }
.sv-entite-choice:hover { border-color: var(--sz-border-strong); }
.sv-entite-choice.is-selected { border-color: var(--sz-border-strong); background: var(--sz-surface-2); }
.sv-entite-choice.is-disabled { opacity: 0.4; cursor: not-allowed; }
.sv-entite-choice input { cursor: inherit; }

/* Empilement de panneaux dans une cellule de grille (ex. infos bancaires + contrats). */
.sv-stack { display: flex; flex-direction: column; gap: var(--sz-s-4); min-width: 0; }

/* Carrousel de cards de contrats banque */
.sv-cb-carousel { display: flex; flex-direction: column; gap: var(--sz-s-3); }
/* touch-action: pan-y → le glissement horizontal nous est réservé (swipe), le scroll vertical reste natif. */
.sv-cb-carousel__stage { display: flex; align-items: stretch; gap: var(--sz-s-2); touch-action: pan-y; }
.sv-cb-carousel__stage .sv-cb-card { flex: 1; min-width: 0; }
.sv-cb-carousel__arrow { flex: none; align-self: center; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sz-border); border-radius: var(--sz-r-pill); background: var(--sz-surface); color: var(--sz-text-2); cursor: pointer; font-size: 1.1rem; line-height: 1; transition: border-color var(--sz-dur) var(--sz-ease), color var(--sz-dur) var(--sz-ease); }
.sv-cb-carousel__arrow:hover { border-color: var(--sz-border-strong); color: var(--sz-text); }
.sv-cb-carousel__dots { display: flex; justify-content: center; gap: var(--sz-s-2); }
.sv-cb-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--sz-border-strong); opacity: 0.5; cursor: pointer; transition: opacity var(--sz-dur) var(--sz-ease), background var(--sz-dur) var(--sz-ease); }
.sv-cb-dot:hover { opacity: 0.8; }
.sv-cb-dot.is-active { background: var(--sz-accent); opacity: 1; }
.sv-cb-card { border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); padding: var(--sz-s-3); background: var(--sz-surface-2); }
.sv-cb-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sz-s-2); margin-bottom: var(--sz-s-2); }
.sv-cb-card__title { font-weight: 700; color: var(--sz-text); overflow-wrap: anywhere; }
.sv-cb-card__rows { display: flex; flex-direction: column; gap: 2px; }
.sv-cb-card__row { display: flex; align-items: baseline; gap: var(--sz-s-2); font-size: 0.85rem; color: var(--sz-text); }
.sv-cb-card__lbl { flex: none; min-width: 116px; color: var(--sz-text-3); font-size: 0.78rem; }
.sv-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sz-s-3); }

/* Sélecteur de fichier stylisé (input natif masqué + bouton-label) */
.sv-file { display: flex; align-items: center; gap: var(--sz-s-2); flex-wrap: wrap; }
.sv-file__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.sv-file__name { display: inline-flex; align-items: center; gap: var(--sz-s-1); min-width: 0; font-size: 0.8rem; color: var(--sz-text-2); }
.sv-file__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.sv-file__remove { display: inline-flex; background: none; border: none; padding: 0; cursor: pointer; color: var(--sz-text-3); }
.sv-file__remove:hover { color: var(--sz-red); }

/* ── Drawer (slide-over) ─────────────────────────────────────────────────── */
.sv-drawer__overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(11, 14, 18, 0.45);
  display: flex; justify-content: flex-end;
}
.sv-drawer {
  width: min(480px, 100%); height: 100%; background: var(--sz-surface);
  border-left: 1px solid var(--sz-border); box-shadow: var(--sz-shadow-md);
  display: flex; flex-direction: column; animation: sv-slide var(--sz-dur) var(--sz-ease);
}
@keyframes sv-slide { from { transform: translateX(16px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sv-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sz-s-5); border-bottom: 1px solid var(--sz-border); }
.sv-drawer__title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.sv-drawer__body { flex: 1; overflow-y: auto; padding: var(--sz-s-5); display: flex; flex-direction: column; gap: var(--sz-s-4); }
.sv-drawer__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sz-s-2); padding: var(--sz-s-4) var(--sz-s-5); border-top: 1px solid var(--sz-border); }

/* ── États (chargement / vide / erreur) ──────────────────────────────────── */
.sv-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sz-s-3); padding: var(--sz-s-7); text-align: center; color: var(--sz-text-3); }
.sv-state__title { font-size: 1rem; font-weight: 700; color: var(--sz-text-2); }
.sv-state__text { font-size: 0.875rem; }
.sv-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--sz-border); border-top-color: var(--sz-accent); animation: sv-spin 0.7s linear infinite; }
@keyframes sv-spin { to { transform: rotate(360deg); } }

.sv-meta-row { display: flex; align-items: center; gap: var(--sz-s-3); flex-wrap: wrap; color: var(--sz-text-2); font-size: 0.85rem; }
.sv-dot-sep::before { content: '·'; margin-right: var(--sz-s-3); color: var(--sz-text-3); }

/* ── Onglets (segmented control) ─────────────────────────────────────────── */
.sv-tabs { display: inline-flex; gap: var(--sz-s-1); padding: var(--sz-s-1); background: var(--sz-surface-2); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); }
.sv-tab {
  display: inline-flex; align-items: center; gap: var(--sz-s-2);
  padding: var(--sz-s-2) var(--sz-s-4); border: none; background: transparent;
  border-radius: var(--sz-r-sm); font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--sz-text-2); cursor: pointer; white-space: nowrap;
}
.sv-tab:hover { color: var(--sz-text); }
.sv-tab--active { background: var(--sz-surface); color: var(--sz-text); box-shadow: var(--sz-shadow-sm); }

/* ── Multi-select (cases à cocher) ───────────────────────────────────────── */
.sv-ms { position: relative; }
.sv-ms__btn { display: inline-flex; align-items: center; gap: var(--sz-s-2); font: inherit; font-size: 0.85rem; cursor: pointer; }
.sv-ms__caret { color: var(--sz-text-3); }
.sv-ms__menu {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 210px; max-height: 260px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--sz-s-1);
  background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); box-shadow: var(--sz-shadow-md);
}
.sv-ms__item { display: flex; align-items: center; gap: var(--sz-s-2); padding: var(--sz-s-2) var(--sz-s-3); border-radius: var(--sz-r-sm); font-size: 0.85rem; cursor: pointer; }
.sv-ms__item:hover { background: var(--sz-surface-2); }
.sv-ms__clear { margin-top: var(--sz-s-1); padding: var(--sz-s-2) var(--sz-s-3); background: none; border: none; border-top: 1px solid var(--sz-border); color: var(--sz-text-2); font: inherit; font-size: 0.8rem; cursor: pointer; text-align: left; }
.sv-ms__clear:hover { color: var(--sz-text); }

/* ── Filtre date (libellé + input) ───────────────────────────────────────── */
.sv-filter-date {
  display: inline-flex; align-items: center; gap: var(--sz-s-2);
  font-size: 0.8rem; font-weight: 600; color: var(--sz-text-3);
}
.sv-filter-date input { width: 150px; }

/* ── En-tête de colonne triable ──────────────────────────────────────────── */
.sv-th-sort { cursor: pointer; user-select: none; }
.sv-th-sort:hover { color: var(--sz-text); }
.sv-th-sort__arrow { margin-left: 4px; opacity: 0.9; }
.sv-th-sort__arrow--off { opacity: 0.25; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.sv-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sz-s-3);
  padding: var(--sz-s-3) var(--sz-s-4); border-top: 1px solid var(--sz-border);
  font-size: 0.85rem; color: var(--sz-text-2);
}
.sv-pagination__nav { display: flex; align-items: center; gap: var(--sz-s-2); }
.sv-pagination__left { display: flex; align-items: center; gap: var(--sz-s-4); }
.sv-pagesize { display: inline-flex; align-items: center; gap: var(--sz-s-2); white-space: nowrap; }
.sv-pagesize__select { width: auto; padding: var(--sz-s-1) var(--sz-s-2); font-size: 0.85rem; }

/* ── Autocomplétion d'adresse ────────────────────────────────────────────── */
.sv-ac { position: relative; }
.sv-ac__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
  box-shadow: var(--sz-shadow-md); padding: var(--sz-s-1);
  max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}

/* ── Liste « Mes conversations » ─────────────────────────────────────────── */
.sv-conv-list { display: flex; flex-direction: column; }
.sv-conv {
  display: flex; align-items: center; gap: var(--sz-s-3);
  padding: var(--sz-s-3) var(--sz-s-4); border: none; border-top: 1px solid var(--sz-border);
  border-left: 3px solid transparent;
  background: transparent; cursor: pointer; text-align: left; font: inherit; color: var(--sz-text);
}
.sv-conv:first-child { border-top: none; }
.sv-conv:hover { background: var(--sz-surface-2); }
/* Non lu = barre bleue à gauche + badge « Non lu » + titre en gras. */
.sv-conv--unread { border-left-color: var(--sz-blue); }
.sv-conv__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-conv__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-conv--unread .sv-conv__title { font-weight: 800; }
.sv-conv__sub { font-size: 0.8rem; color: var(--sz-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-conv__meta { display: flex; align-items: center; gap: var(--sz-s-3); flex: none; }
.sv-conv__date { font-size: 0.78rem; color: var(--sz-text-3); white-space: nowrap; }
.sv-conv__unread-badge {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--sz-blue); background: var(--sz-blue-soft); padding: 2px 8px; border-radius: var(--sz-r-pill); white-space: nowrap;
}

/* ── Chat (conversation client) ──────────────────────────────────────────── */
.sv-chat { position: relative; display: flex; flex-direction: column; gap: var(--sz-s-4); }
.sv-chat--dragging { outline: 2px dashed var(--sz-blue); outline-offset: 4px; border-radius: var(--sz-r-md); }
.sv-chat__drop {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sz-s-2);
  background: var(--sz-blue-soft); border-radius: var(--sz-r-md);
  color: var(--sz-blue); font-weight: 700; font-size: 0.9rem;
}
/* Zone de dépôt générique (ex. Note interne) — réutilise l'overlay .sv-chat__drop. */
.sv-dropzone { position: relative; }
.sv-dropzone--dragging { outline: 2px dashed var(--sz-blue); outline-offset: 4px; border-radius: var(--sz-r-md); }
.sv-chat__feed { display: flex; flex-direction: column; gap: var(--sz-s-3); max-height: 58vh; overflow-y: auto; padding-right: var(--sz-s-2); }
.sv-chat__empty { text-align: center; color: var(--sz-text-3); padding: var(--sz-s-5) 0; }
.sv-chat__msg { display: flex; }
.sv-chat__msg--mine { justify-content: flex-end; }
.sv-chat__msg--system { justify-content: center; }
.sv-chat__system {
  max-width: 88%; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: var(--sz-s-2) var(--sz-s-4); border-radius: var(--sz-r-pill);
  background: var(--sz-blue-soft); border: 1px solid var(--sz-blue-soft); color: var(--sz-text-2);
}
.sv-chat__system-tag { display: inline-flex; align-items: center; gap: var(--sz-s-1); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sz-blue); }
.sv-chat__system-text { font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; }
.sv-chat__system-time { font-size: 0.66rem; color: var(--sz-text-3); }
.sv-chat__bubble {
  max-width: 78%; display: flex; flex-direction: column; gap: 3px;
  padding: var(--sz-s-2) var(--sz-s-3); border: 1px solid var(--sz-border);
  background: var(--sz-surface-2); border-radius: var(--sz-r-lg);
}
.sv-chat__msg--mine .sv-chat__bubble { background: var(--sz-accent-soft); border-color: var(--sz-accent-soft-2); }
.sv-chat__author { font-size: 0.72rem; font-weight: 700; color: var(--sz-text-2); }
.sv-chat__text { font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sv-chat__attach {
  display: inline-flex; align-items: center; gap: var(--sz-s-1); align-self: flex-start;
  font: inherit; font-size: 0.8rem; color: var(--sz-blue); background: none; border: none; padding: 2px 0; cursor: pointer;
}
.sv-chat__attach:hover { text-decoration: underline; }
.sv-chat__img-btn { align-self: flex-start; padding: 0; border: none; background: none; cursor: pointer; }
.sv-chat__img { display: block; max-width: 260px; max-height: 260px; border-radius: var(--sz-r-md); border: 1px solid var(--sz-border); }
.sv-chat__time { font-size: 0.68rem; color: var(--sz-text-3); align-self: flex-end; }
.sv-chat__composer { display: flex; flex-direction: column; gap: var(--sz-s-2); border-top: 1px solid var(--sz-border); padding-top: var(--sz-s-3); }
.sv-chat__composer-row { display: flex; align-items: flex-end; gap: var(--sz-s-2); }
.sv-chat__composer textarea { flex: 1; resize: vertical; min-height: 42px; }
.sv-chat__file { display: inline-flex; align-items: center; gap: var(--sz-s-1); font-size: 0.78rem; color: var(--sz-text-2); }
.sv-chat__file button { background: none; border: none; color: var(--sz-text-3); cursor: pointer; display: inline-flex; }

/* ── Sélecteur date / heure custom ───────────────────────────────────────── */
.sv-dp { position: relative; width: 100%; }
.sv-dp__field {
  display: flex; align-items: center; gap: var(--sz-s-1); width: 100%;
  padding: 0 var(--sz-s-2); background: var(--sz-input);
  border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
}
.sv-dp__field:focus-within { border-color: var(--sz-border-focus); box-shadow: var(--sz-ring); }
.sv-dp__field--disabled { opacity: 0.6; }
.sv-dp__icon { display: inline-flex; border: none; background: none; cursor: pointer; color: var(--sz-text-3); padding: 4px; border-radius: var(--sz-r-sm); flex: none; }
.sv-dp__icon:hover:not(:disabled) { color: var(--sz-text); background: var(--sz-surface-2); }
.sv-dp__icon:disabled { cursor: not-allowed; }
.sv-dp__input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 0.875rem; color: var(--sz-text); padding: var(--sz-s-2) 0; }
.sv-dp__input::placeholder { color: var(--sz-text-3); }
.sv-dp__clear { display: inline-flex; border: none; background: none; cursor: pointer; color: var(--sz-text-3); padding: 4px; flex: none; }
.sv-dp__clear:hover { color: var(--sz-text); }
.sv-dp__pop {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; width: 272px;
  background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md);
  box-shadow: var(--sz-shadow-md); padding: var(--sz-s-3);
}
/* Mobile : la popup ancrée sous le champ peut sortir de l'écran (ex. picker dans une modale)
   → on la centre en overlay fixe, au-dessus de tout, avec un voile cliquable pour fermer. */
.sv-dp__scrim { position: fixed; inset: 0; z-index: 1190; background: rgba(11, 14, 18, 0.45); }
.sv-dp__pop--mobile {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1200; max-height: calc(100vh - 24px); overflow-y: auto;
}
.sv-dp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sz-s-2); }
.sv-dp__month { font-weight: 700; font-size: 0.85rem; text-transform: capitalize; }
.sv-dp__nav { border: none; background: none; cursor: pointer; color: var(--sz-text-2); font-size: 1.15rem; line-height: 1; padding: 2px 8px; border-radius: var(--sz-r-sm); }
.sv-dp__nav:hover { background: var(--sz-surface-2); color: var(--sz-text); }
.sv-dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sv-dp__grid--head { margin-bottom: 4px; }
.sv-dp__wd { text-align: center; font-size: 0.7rem; color: var(--sz-text-3); font-weight: 700; padding: 2px 0; }
.sv-dp__day {
  border: none; background: none; cursor: pointer; aspect-ratio: 1; border-radius: var(--sz-r-sm);
  font: inherit; font-size: 0.82rem; color: var(--sz-text); display: flex; align-items: center; justify-content: center;
}
.sv-dp__day:hover:not(:disabled) { background: var(--sz-surface-2); }
.sv-dp__day:disabled { color: var(--sz-text-3); opacity: 0.4; cursor: not-allowed; }
.sv-dp__day--today { box-shadow: inset 0 0 0 1px var(--sz-border-strong); font-weight: 800; }
.sv-dp__day--sel { background: var(--sz-accent); color: var(--sz-on-accent); }
/* Même spécificité que `.sv-dp__day:hover:not(:disabled)` et déclaré après → prime au survol
   (sinon le fond repassait en surface-2 avec un texte on-accent : illisible). */
.sv-dp__day--sel:hover:not(:disabled) { background: var(--sz-accent-hover); color: var(--sz-on-accent); }
/* Cadran d'horloge : sélection de l'heure puis des minutes. */
.sv-clock__display { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: var(--sz-s-3); }
.sv-clock__unit { padding: 2px 10px; border: none; border-radius: var(--sz-r-md); background: var(--sz-surface-2); color: var(--sz-text-3); font: inherit; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.sv-clock__unit.is-active { background: var(--sz-accent-soft); color: var(--sz-accent); }
.sv-clock__sep { font-size: 1.4rem; font-weight: 700; color: var(--sz-text-2); }
.sv-clock { position: relative; margin: 0 auto; touch-action: manipulation; }
.sv-clock__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-clock__face { fill: var(--sz-surface-2); stroke: var(--sz-border); }
.sv-clock__hand { stroke: var(--sz-accent); stroke-width: 2; }
.sv-clock__knob, .sv-clock__center { fill: var(--sz-accent); }
.sv-clock__num {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--sz-text);
}
.sv-clock__num--in { font-size: 0.74rem; color: var(--sz-text-2); }
.sv-clock__num:hover:not(:disabled):not(.is-sel) { background: var(--sz-surface-3); }
.sv-clock__num.is-sel { color: var(--sz-on-accent); font-weight: 700; }
.sv-clock__num:disabled { opacity: 0.3; cursor: not-allowed; }
.sv-dp__foot { display: flex; justify-content: space-between; gap: var(--sz-s-2); margin-top: var(--sz-s-3); }

/* ── Saisie téléphone (indicatif + numéro) ───────────────────────────────── */
.sv-phone { display: flex; gap: var(--sz-s-2); }
.sv-phone__code { flex: none; width: auto; max-width: 160px; }
.sv-phone__num { flex: 1; min-width: 0; }

/* ── Barre de répartition ────────────────────────────────────────────────── */
.sv-bars { display: flex; flex-direction: column; gap: var(--sz-s-3); }
.sv-bar { display: grid; grid-template-columns: 130px 1fr 32px; align-items: center; gap: var(--sz-s-3); font-size: 0.82rem; }
.sv-bar__track { height: 8px; border-radius: var(--sz-r-pill); background: var(--sz-surface-3); overflow: hidden; }
.sv-bar__fill { height: 100%; border-radius: var(--sz-r-pill); background: var(--sz-accent); }
.sv-bar__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--sz-text-2); font-weight: 600; }

/* Les graphiques (donut / histogramme / courbes) sont rendus par Recharts — voir Charts.jsx. */

/* ── Mobile : ajustements de confort ─────────────────────────────────────── */
/* Tablette + mobile : éléments qui débordent ou méritent d'être empilés/condensés. */
@media (max-width: 900px) {
  .sv-panel__body { padding: var(--sz-s-4); }
  /* Le picker date/heure ne déborde pas. */
  .sv-dp__pop { width: min(272px, calc(100vw - 32px)); }
  /* Bulles de chat un peu plus larges. */
  .sv-chat__bubble { max-width: 88%; }

  /* Pagination empilée : total + taille de page sur une ligne, navigation en dessous. */
  .sv-pagination { flex-direction: column; align-items: stretch; gap: var(--sz-s-3); }
  .sv-pagination__left { flex-wrap: wrap; justify-content: space-between; gap: var(--sz-s-2) var(--sz-s-3); }
  .sv-pagination__nav { justify-content: space-between; }
  .sv-pagination__nav .sv-btn { flex: 1; min-width: 0; }

  /* Tabs : scroll horizontal quand elles ne tiennent pas en largeur. */
  .sv-tabs { max-width: 100%; overflow-x: auto; }
  .sv-tab { flex: none; }
}

/* Mobile uniquement : densité plus forte. */
@media (max-width: 640px) {
  .sv-page { gap: var(--sz-s-4); }
  .sv-title { font-size: 1.3rem; }
}

/* ── Grille de droits (Utilisateurs : rôle + exceptions) ───────────────────── */
.sv-perm__legend { display: flex; flex-wrap: wrap; gap: var(--sz-s-3); align-items: center; font-size: 0.78rem; color: var(--sz-text-2); }
.sv-perm__legend-item { display: inline-flex; align-items: center; gap: var(--sz-s-1); }
.sv-perm__legend-item > svg { color: var(--sz-text-3); }
.sv-perm__legend-item--exc { color: var(--sz-amber); }
.sv-perm__dot { width: 8px; height: 8px; border-radius: var(--sz-r-pill); background: var(--sz-amber); display: inline-block; }

.sv-perm { display: flex; flex-direction: column; border: 1px solid var(--sz-border); border-radius: var(--sz-r-lg); overflow: hidden; }
.sv-perm__row { display: grid; grid-template-columns: 1fr auto minmax(120px, 160px) auto; align-items: center; gap: var(--sz-s-3); padding: var(--sz-s-2) var(--sz-s-3); border-top: 1px solid var(--sz-border); }
.sv-perm__row:first-child { border-top: none; }
.sv-perm__row.is-exception { background: var(--sz-amber-soft); box-shadow: inset 3px 0 0 var(--sz-amber); }
.sv-perm__name { font-size: 0.85rem; color: var(--sz-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sv-perm__actions { display: inline-flex; gap: 2px; padding: 2px; background: var(--sz-surface-2); border-radius: var(--sz-r-md); }
.sv-perm__act { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; border: none; border-radius: var(--sz-r-sm); background: transparent; color: var(--sz-text-3); cursor: pointer; transition: background var(--sz-dur) var(--sz-ease), color var(--sz-dur) var(--sz-ease); }
.sv-perm__act:hover { color: var(--sz-text); }
.sv-perm__act.is-active { background: var(--sz-surface); color: var(--sz-accent); box-shadow: var(--sz-shadow-sm); }

.sv-perm__scope { min-width: 0; font-size: 0.8rem; padding-top: 4px; padding-bottom: 4px; }
.sv-perm__scope:disabled { opacity: 0.45; }

.sv-perm__assign { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.sv-perm__assign input { width: 15px; height: 15px; accent-color: var(--sz-accent); cursor: pointer; }
.sv-perm__assign--na { visibility: hidden; }

@media (max-width: 640px) {
  .sv-perm__row { grid-template-columns: 1fr auto; grid-template-areas: "name name" "actions assign" "scope scope"; row-gap: var(--sz-s-2); }
  .sv-perm__name { grid-area: name; }
  .sv-perm__actions { grid-area: actions; }
  .sv-perm__assign { grid-area: assign; }
  .sv-perm__scope { grid-area: scope; }
}

/* Drawer élargi (grille de droits Utilisateurs). */
.sv-drawer--wide { width: min(600px, 100%); }

/* Cellule « exceptions » + infobulle de détail. */
.sv-exc-cell { display: inline-flex; align-items: center; gap: var(--sz-s-2); }
.sv-tip { display: inline-flex; align-items: center; color: var(--sz-text-3); cursor: help; }
.sv-tip:hover, .sv-tip:focus-visible { color: var(--sz-text); outline: none; }
.sv-tip__pop {
  position: fixed; z-index: 1200; width: max-content; max-width: 280px; text-align: left;
  padding: var(--sz-s-2) var(--sz-s-3); background: var(--sz-surface); color: var(--sz-text);
  border: 1px solid var(--sz-border-strong); border-radius: var(--sz-r-md); box-shadow: var(--sz-shadow-md);
  display: flex; flex-direction: column; gap: var(--sz-s-2); font-size: 0.78rem; font-weight: 400;
}
.sv-tip__line { display: flex; flex-direction: column; gap: 1px; }
.sv-tip__line + .sv-tip__line { border-top: 1px solid var(--sz-border); padding-top: var(--sz-s-2); }
.sv-tip__line strong { color: var(--sz-text); font-weight: 700; }
.sv-tip__line span { color: var(--sz-text-2); }

/* Page « accès non autorisé ». */
.sv-forbidden {
  max-width: 420px; margin: auto; padding: var(--sz-s-7) var(--sz-s-5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sz-s-4);
  min-height: 50vh; justify-content: center;
}
.sv-forbidden__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: var(--sz-r-pill); background: var(--sz-surface-2); color: var(--sz-text-2);
}
.sv-forbidden__title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--sz-text); }
.sv-forbidden__text { margin: 0; font-size: 0.9rem; color: var(--sz-text-2); line-height: 1.5; }

/* Grille de droits en lecture seule : contrôles verrouillés mais restant lisibles. */
.sv-perm--ro .sv-perm__act { cursor: default; }
.sv-perm--ro .sv-perm__act:disabled { opacity: 1; }
.sv-perm--ro .sv-perm__act:hover { color: var(--sz-text-3); }
.sv-perm--ro .sv-perm__act.is-active { color: var(--sz-accent); }
.sv-perm--ro .sv-perm__scope:disabled { opacity: 1; color: var(--sz-text-2); cursor: default; }
.sv-perm--ro .sv-perm__assign input:disabled { cursor: default; }

/* Conversation en lecture seule (pas d'écriture) : message à la place du composer. */
.sv-chat__readonly {
  display: flex; align-items: center; gap: var(--sz-s-2); margin: 0;
  padding: var(--sz-s-3) var(--sz-s-4); border-top: 1px solid var(--sz-border);
  font-size: 0.85rem; color: var(--sz-text-2);
}
.sv-chat__readonly > svg { flex: none; color: var(--sz-text-3); }

/* Combobox recherchable (SearchSelect). */
.sv-ssel { position: relative; display: inline-block; min-width: 220px; }
.sv-ssel__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--sz-s-2); width: 100%; text-align: left; cursor: pointer; }
.sv-ssel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-ssel__value.is-placeholder { color: var(--sz-text-3); }
.sv-ssel__pop {
  position: absolute; z-index: 1100; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px;
  background: var(--sz-surface); border: 1px solid var(--sz-border-strong); border-radius: var(--sz-r-md);
  box-shadow: var(--sz-shadow-md); padding: var(--sz-s-2); display: flex; flex-direction: column; gap: var(--sz-s-2);
}
.sv-ssel__search { width: 100%; }
.sv-ssel__list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
.sv-ssel__opt {
  text-align: left; padding: var(--sz-s-2) var(--sz-s-3); border: none; background: transparent;
  border-radius: var(--sz-r-sm); color: var(--sz-text); font-size: 0.88rem; cursor: pointer;
}
.sv-ssel__opt:hover { background: var(--sz-surface-2); }
.sv-ssel__opt.is-active { background: var(--sz-accent-soft); color: var(--sz-accent); font-weight: 700; }
.sv-ssel__empty { padding: var(--sz-s-3); font-size: 0.85rem; color: var(--sz-text-3); text-align: center; }

/* Technicien affiché sur une carte de planning. */
.sv-plan__card-tech { display: inline-flex; align-items: center; gap: var(--sz-s-1); font-size: 0.75rem; color: var(--sz-text-2); }
.sv-plan__card-tech > svg { flex: none; color: var(--sz-text-3); }

/* En contexte formulaire, le combobox occupe toute la largeur du champ. */
.sv-field > .sv-ssel { display: block; width: 100%; min-width: 0; }

/* Pagination numérotée (‹ 1 2 … 120 ›). */
.sv-pager { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.sv-pager__arrow, .sv-pager__page {
  min-width: 30px; height: 30px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sz-border); background: var(--sz-surface); color: var(--sz-text-2);
  border-radius: var(--sz-r-md); font-size: 0.85rem; font-family: var(--sz-font-data); cursor: pointer;
  transition: background var(--sz-dur) var(--sz-ease), color var(--sz-dur) var(--sz-ease), border-color var(--sz-dur) var(--sz-ease);
}
.sv-pager__arrow:hover:not(:disabled), .sv-pager__page:hover:not(.is-active) { background: var(--sz-surface-2); color: var(--sz-text); border-color: var(--sz-border-strong); }
.sv-pager__page.is-active { background: var(--sz-accent); color: var(--sz-on-accent); border-color: var(--sz-accent); font-weight: 700; cursor: default; }
.sv-pager__arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.sv-pager__dots { min-width: 22px; text-align: center; color: var(--sz-text-3); user-select: none; }

/* Overlay de rechargement : spinner par-dessus le tableau sans le vider (pagination fluide). */
.sv-loading-host { position: relative; }
.sv-loading-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sz-bg) 55%, transparent);
  border-radius: var(--sz-r-lg);
}
.layout {
  display: flex;
  background: var(--sz-bg);
  color: var(--sz-text);
}

.layout--standalone {
  /* App shell : hauteur fixe, le scroll est délégué à .layout__content.
     La sidebar reste donc fixe et les sticky du contenu fonctionnent. */
  height: 100vh;
  overflow: hidden;
}

.layout--portal {
  /* Hauteur fixée en JS (viewport - top), le scroll est délégué à .layout__content.
     Fallback CSS avant exécution du JS. */
  height: 100vh;
  overflow: hidden;
}

.layout__sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sz-surface);
  border-right: 1px solid var(--sz-border);
  box-shadow: var(--sz-shadow-sm);
  align-self: flex-start;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

.layout--standalone .layout__sidebar {
  height: 100vh;
}

/* En fédéré, la sidebar remplit la hauteur du shell (calée en JS). */
.layout--portal .layout__sidebar {
  height: 100%;
  max-height: 100%;
}

.layout__brand {
  padding: var(--sz-s-5) var(--sz-s-5) var(--sz-s-4);
  border-bottom: 1px solid var(--sz-border);
}

.layout__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-1);
  padding: var(--sz-s-4) var(--sz-s-3);
  overflow-y: auto;
}

.layout__nav-link {
  display: flex;
  align-items: center;
  gap: var(--sz-s-3);
  padding: var(--sz-s-2) var(--sz-s-3);
  border-radius: var(--sz-r-md);
  color: var(--sz-text-2);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    color var(--sz-dur) var(--sz-ease);
}

.layout__nav-link:hover {
  background: var(--sz-surface-2);
  color: var(--sz-text);
  text-decoration: none;
}

.layout__nav-link--active {
  background: var(--sz-accent-soft);
  color: var(--sz-accent);
}

/* Bulle de compteur (conversations non lues) — poussée à droite de l'onglet. */
.layout__nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sz-r-pill);
  background: var(--sz-blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.layout__footer {
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-3);
  padding: var(--sz-s-4);
  border-top: 1px solid var(--sz-border);
}

.layout__user {
  display: flex;
  align-items: center;
  gap: var(--sz-s-3);
  min-width: 0;
}

.layout__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--sz-r-pill);
  background: var(--sz-accent-soft);
  color: var(--sz-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.layout__user-meta {
  min-width: 0;
}

.layout__user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout__user-role {
  font-size: 0.75rem;
  color: var(--sz-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout__actions {
  display: flex;
  align-items: center;
  gap: var(--sz-s-2);
}

.layout__logout {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sz-r-lg);
  background: transparent;
  border: 1px solid var(--sz-border);
  color: var(--sz-text-2);
  cursor: pointer;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    color var(--sz-dur) var(--sz-ease),
    border-color var(--sz-dur) var(--sz-ease);
}

.layout__logout:hover {
  background: var(--sz-red-soft);
  border-color: var(--sz-red);
  color: var(--sz-red);
}

.layout__logout:focus-visible {
  outline: none;
  box-shadow: var(--sz-ring);
}

.layout__content {
  flex: 1;
  padding: var(--sz-s-7);
  /* Scroller principal en standalone (le layout est à hauteur fixe). Les éléments
     position: sticky des vues (ex. note interne) se calent sur ce conteneur. */
  overflow-y: auto;
  width: 100%;
  min-width: 0;
}

/* Barre mobile (burger) + voile : masqués par défaut, activés en mobile standalone.
   Hauteur de référence du header mobile = 56px (top du panneau + inset du voile). */
.layout__mobilebar { display: none; align-items: center; gap: var(--sz-s-3); height: 56px; padding: 0 var(--sz-s-3); border-bottom: 1px solid var(--sz-border); background: var(--sz-surface); position: relative; z-index: 31; }
.layout__burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); background: var(--sz-surface); color: var(--sz-text); cursor: pointer; }
.layout__burger:hover { background: var(--sz-surface-2); }
.layout__scrim { display: none; position: fixed; inset: 56px 0 0; z-index: 25; background: rgba(11, 14, 18, 0.35); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
/* ≤900 px (tablette + mobile) : la nav passe en haut (topbar fédéré / burger standalone). */
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .layout__content { padding: var(--sz-s-4); }

  /* Fédéré : la sidebar devient une barre supérieure horizontale (pas de burger). */
  .layout--portal .layout__sidebar {
    width: 100%; flex-direction: row; align-items: center; gap: var(--sz-s-2);
    height: auto; max-height: none; position: static; overflow: visible;
    padding: var(--sz-s-2) var(--sz-s-3); border-right: none; border-bottom: 1px solid var(--sz-border);
  }
  .layout--portal .layout__nav { flex: 1; flex-direction: row; gap: var(--sz-s-1); padding: 0; overflow-x: auto; overflow-y: hidden; }
  .layout--portal .layout__nav-link { white-space: nowrap; flex: none; }

  /* Standalone : barre mobile (burger à gauche) + nav qui se déroule SOUS le header. */
  .layout--standalone .layout__mobilebar { display: flex; }
  .layout--standalone .layout__brand { display: none; } /* la barre mobile porte déjà le wordmark */
  .layout--standalone .layout__sidebar {
    display: none;                       /* fermé par défaut */
    position: fixed; top: 56px; left: 0; right: 0;  /* top = hauteur du header */
    width: auto; height: auto; max-height: calc(100vh - 56px); overflow-y: auto;
    z-index: 30;                         /* header (31) > nav (30) > voile (25) */
    flex-direction: column;
    border-right: none; border-bottom: 1px solid var(--sz-border); box-shadow: var(--sz-shadow-md);
  }
  .layout--standalone.is-menu-open .layout__sidebar { display: flex; }
  .layout--standalone.is-menu-open .layout__scrim { display: block; }
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--sz-s-7) var(--sz-s-4);
}

.login__card {
  background: var(--sz-surface);
  border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-lg);
  padding: var(--sz-s-7) var(--sz-s-6);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--sz-shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-4);
}

.login__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sz-s-2);
  margin-bottom: var(--sz-s-2);
  text-align: center;
}

.login__subtitle {
  margin: 0;
  color: var(--sz-text-2);
  font-size: 0.95rem;
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: var(--sz-s-1);
}

.login__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sz-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login__field input {
  width: 100%;
  padding: var(--sz-s-3) var(--sz-s-3);
  border: 1px solid var(--sz-border);
  border-radius: var(--sz-r-md);
  font: inherit;
  font-size: 0.95rem;
  background: var(--sz-input);
  color: var(--sz-text);
  transition:
    border-color var(--sz-dur) var(--sz-ease),
    box-shadow var(--sz-dur) var(--sz-ease);
}

.login__field input::placeholder {
  color: var(--sz-text-3);
}

.login__field input:focus {
  outline: none;
  border-color: var(--sz-border-focus);
  box-shadow: var(--sz-ring);
}

.login__password {
  position: relative;
  display: flex;
  align-items: center;
}

.login__password input {
  padding-right: 5rem;
}

.login__password-toggle {
  position: absolute;
  right: var(--sz-s-1);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--sz-text-3);
  font: inherit;
  font-size: 0.8rem;
  padding: var(--sz-s-1) var(--sz-s-2);
  border-radius: var(--sz-r-sm);
  cursor: pointer;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    color var(--sz-dur) var(--sz-ease);
}

.login__password-toggle:hover {
  color: var(--sz-accent);
  background: var(--sz-accent-soft);
}

.login__error {
  background: var(--sz-red-soft);
  color: var(--sz-text);
  border: 1px solid var(--sz-border);
  padding: var(--sz-s-3);
  border-radius: var(--sz-r-md);
  font-size: 0.9rem;
}

.login__submit {
  margin-top: var(--sz-s-1);
  padding: var(--sz-s-3) var(--sz-s-4);
  background: var(--sz-accent);
  color: var(--sz-on-accent);
  border: none;
  border-radius: var(--sz-r-md);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    transform 80ms var(--sz-ease);
}

.login__submit:hover:not(:disabled) {
  background: var(--sz-accent-hover);
}

.login__submit:active:not(:disabled) {
  transform: translateY(1px);
}

.login__submit:focus-visible {
  outline: none;
  box-shadow: var(--sz-ring);
}

.login__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login__footer {
  margin: var(--sz-s-1) 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--sz-text-3);
}
* {
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--sz-font-ui, 'Nunito Sans', system-ui, sans-serif);
  background: var(--sz-bg, #e8e3d7);
  color: var(--sz-text, #0b0e12);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color var(--sz-dur, 150ms) var(--sz-ease, ease),
    color var(--sz-dur, 150ms) var(--sz-ease, ease);
}

a {
  color: var(--sz-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

code {
  font-family: var(--sz-font-data);
  background: var(--sz-surface-3);
  color: var(--sz-text);
  padding: 0.1em 0.35em;
  border-radius: var(--sz-r-sm);
  font-size: 0.9em;
  border: 1px solid var(--sz-border);
}

::selection {
  background: var(--sz-accent-soft-2);
  color: var(--sz-text);
}

.login-theme-toggle {
  position: fixed;
  top: var(--sz-s-4);
  right: var(--sz-s-4);
  z-index: 50;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--sz-r-lg);
  background: var(--sz-surface);
  color: var(--sz-text-2);
  border: 1px solid var(--sz-border);
  box-shadow: var(--sz-shadow-sm);
  cursor: pointer;
  transition:
    background-color var(--sz-dur) var(--sz-ease),
    color var(--sz-dur) var(--sz-ease),
    border-color var(--sz-dur) var(--sz-ease);
}

.theme-toggle:hover {
  background: var(--sz-surface-2);
  color: var(--sz-text);
  border-color: var(--sz-border-strong);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--sz-ring);
  border-color: var(--sz-border-focus);
}