/*! SEEDKA Terrain : design system, généré par scripts/build.mjs depuis css/src/ (ne pas modifier à la main) */

/* ---- 01-tokens.css ---- */
/* ==========================================================================
   SEEDKA Terrain : jetons de design (palette « Bleu de travail »)
   Seule source des couleurs, typographies, espacements, rayons et ombres.
   Contrastes vérifiés par scripts/contrast.mjs (WCAG AA) : ne pas modifier
   une valeur sans relancer `node scripts/contrast.mjs`.
   ========================================================================== */
:root {
  color-scheme: light;

  /* -- Marque -------------------------------------------------------------- */
  --st-bleu-900: #13263E;   /* bleu de travail profond : textes forts sur clair */
  --st-bleu-800: #1A3758;   /* survol du bouton principal */
  --st-bleu-700: #23466F;   /* BLEU DE TRAVAIL : couleur de marque, bouton principal */
  --st-bleu-500: #3E6BA0;
  --st-bleu-200: #C6D5E7;
  --st-bleu-100: #E3EBF5;
  --st-bleu-50:  #F0F4F9;
  --st-balisage: #F2BE1A;   /* jaune balisage : repère « maintenant », focus, logo. Jamais du texte sur blanc. */
  --st-balisage-100: #FCEFC2;

  /* -- Neutres « ciment » ------------------------------------------------- */
  --st-encre: #17212E;      /* texte principal */
  --st-gris-700: #3A4450;
  --st-gris-600: #535C66;   /* texte secondaire (6,1:1 sur le fond) */
  --st-gris-500: #858D96;   /* bordures de champs (3,2:1 : contraste non textuel AA) */
  --st-gris-300: #C9CDC8;
  --st-gris-200: #DDE0DC;   /* filets, séparateurs */
  --st-gris-100: #ECEEEB;
  --st-ciment:   #F2F3F1;   /* fond de l'application */
  --st-blanc:    #FFFFFF;

  /* -- États ------------------------------------------------------------- */
  --st-vert-700: #1A6A40;  --st-vert-600: #1F7A4A;  --st-vert-100: #E3F2EA;
  --st-rouge-700: #A3201A; --st-rouge-600: #B42318; --st-rouge-100: #FBE6E4;
  --st-ambre-800: #5C4500; --st-ambre-700: #8A5A00; --st-ambre-100: #FCEFC2;
  --st-ardoise-700: #4A5562; --st-ardoise-100: #EEF0F2;

  /* -- Couleurs des métiers (pastilles et liseré des cartes de planning) --- */
  --st-metier-nettoyage: #1F7F80;
  --st-metier-plomberie: #2D63AE;
  --st-metier-electricite: #C99400;
  --st-metier-informatique: #5D5AA8;
  --st-metier-espaces-verts: #4A7F2E;
  --st-metier-multi: #8E5632;

  /* -- Rôles sémantiques (à utiliser dans les composants) ----------------- */
  --st-bg: var(--st-ciment);
  --st-surface: var(--st-blanc);
  --st-surface-2: var(--st-gris-100);
  --st-surface-sunken: #E7E9E5;
  --st-text: var(--st-encre);
  --st-text-2: var(--st-gris-600);
  --st-text-invert: var(--st-blanc);
  --st-line: var(--st-gris-200);
  --st-line-strong: var(--st-gris-300);
  --st-line-input: var(--st-gris-500);
  --st-primary: var(--st-bleu-700);
  --st-primary-hover: var(--st-bleu-800);
  --st-primary-text: var(--st-bleu-700);       /* liens, éléments actifs */
  --st-primary-tint: var(--st-bleu-100);
  --st-on-primary: var(--st-blanc);
  --st-signal: var(--st-balisage);
  --st-on-signal: var(--st-encre);
  --st-focus: var(--st-balisage);
  --st-focus-ring: 0 0 0 2px var(--st-surface), 0 0 0 5px var(--st-balisage), 0 0 0 6px var(--st-encre);

  --st-ok: var(--st-vert-600);       --st-ok-text: var(--st-vert-700);     --st-ok-tint: var(--st-vert-100);
  --st-danger: var(--st-rouge-600);  --st-danger-text: var(--st-rouge-700);--st-danger-tint: var(--st-rouge-100);
  --st-warn: var(--st-balisage);     --st-warn-text: var(--st-ambre-800);  --st-warn-tint: var(--st-ambre-100);
  --st-info-text: var(--st-bleu-700);--st-info-tint: var(--st-bleu-100);
  --st-neutral-text: var(--st-ardoise-700); --st-neutral-tint: var(--st-ardoise-100);

  /* -- Typographie -------------------------------------------------------- */
  /* Polices cibles (libres, à auto-héberger dans wwwroot/fonts, voir BRAND.md § 5) :
     Atkinson Hyperlegible Next (texte) et Barlow Semi Condensed (titres, heures, montants).
     Les piles de repli suffisent pour livrer sans les fichiers. */
  --st-font: "Atkinson Hyperlegible Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --st-font-display: "Barlow Semi Condensed", "Roboto Condensed", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --st-fs-12: 0.75rem;
  --st-fs-14: 0.875rem;
  --st-fs-16: 1rem;        /* texte courant ET champs (évite le zoom iOS) */
  --st-fs-18: 1.125rem;
  --st-fs-22: 1.375rem;
  --st-fs-28: 1.75rem;
  --st-fs-36: 2.25rem;
  --st-lh: 1.5;
  --st-lh-tight: 1.2;
  --st-w-regular: 400;
  --st-w-medium: 500;
  --st-w-semibold: 600;
  --st-w-bold: 700;

  /* -- Espacements (grille de 4 px) -------------------------------------- */
  --st-s1: 4px;  --st-s2: 8px;  --st-s3: 12px; --st-s4: 16px;
  --st-s5: 20px; --st-s6: 24px; --st-s8: 32px; --st-s10: 40px; --st-s12: 48px;
  --st-gutter: 16px;

  /* -- Rayons : hiérarchiques, jamais le même partout -------------------- */
  --st-r-xs: 4px;    /* badges, cases */
  --st-r-sm: 6px;    /* boutons, champs */
  --st-r-md: 10px;   /* cartes, panneaux */
  --st-r-lg: 16px;   /* feuille inférieure (coins hauts) */
  --st-r-pill: 999px;/* interrupteurs, puces de filtre */

  /* -- Profondeur : bordures d'abord, ombre réservée à ce qui flotte ----- */
  --st-shadow-float: 0 -1px 0 var(--st-line), 0 -8px 24px rgba(23, 33, 46, 0.08);
  --st-shadow-pop: 0 1px 0 rgba(23, 33, 46, 0.04), 0 10px 30px rgba(23, 33, 46, 0.14);

  /* -- Ergonomie ---------------------------------------------------------- */
  --st-touch: 48px;        /* hauteur des boutons et champs (≥ 44 px exigé) */
  --st-touch-min: 44px;
  --st-header-h: 56px;
  --st-tabbar-h: 64px;
  --st-sidebar-w: 248px;
  --st-actionbar-h: 76px;
  --st-safe-bottom: env(safe-area-inset-bottom, 0px);

  --st-ease: cubic-bezier(.2, .7, .2, 1);
  --st-dur: 160ms;
}

/* -- Thème sombre ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --st-bg: #141A22;
    --st-surface: #1C2430;
    --st-surface-2: #232D3A;
    --st-surface-sunken: #10151C;
    --st-text: #E7EAEE;
    --st-text-2: #A3AEBB;
    --st-line: #2E3947;
    --st-line-strong: #3C4858;
    --st-line-input: #6E7B8B;
    --st-primary: #3E6BA0;
    --st-primary-hover: #4A78AE;
    --st-primary-text: #9DBCE3;
    --st-primary-tint: #22344B;
    --st-on-primary: #FFFFFF;
    --st-focus-ring: 0 0 0 2px var(--st-bg), 0 0 0 5px var(--st-balisage);
    --st-ok-text: #7FD1A2;     --st-ok-tint: #173326;
    --st-danger-text: #F4A39C; --st-danger-tint: #3A1C1B;
    --st-warn-text: #F6D46A;   --st-warn-tint: #3A3115;
    --st-info-text: #9DBCE3;   --st-info-tint: #22344B;
    --st-neutral-text: #B5BFCA;--st-neutral-tint: #2A3441;
    --st-shadow-float: 0 -1px 0 var(--st-line), 0 -8px 24px rgba(0, 0, 0, 0.35);
    --st-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --st-bg: #141A22;
  --st-surface: #1C2430;
  --st-surface-2: #232D3A;
  --st-surface-sunken: #10151C;
  --st-text: #E7EAEE;
  --st-text-2: #A3AEBB;
  --st-line: #2E3947;
  --st-line-strong: #3C4858;
  --st-line-input: #6E7B8B;
  --st-primary: #3E6BA0;
  --st-primary-hover: #4A78AE;
  --st-primary-text: #9DBCE3;
  --st-primary-tint: #22344B;
  --st-on-primary: #FFFFFF;
  --st-focus-ring: 0 0 0 2px var(--st-bg), 0 0 0 5px var(--st-balisage);
  --st-ok-text: #7FD1A2;     --st-ok-tint: #173326;
  --st-danger-text: #F4A39C; --st-danger-tint: #3A1C1B;
  --st-warn-text: #F6D46A;   --st-warn-tint: #3A3115;
  --st-info-text: #9DBCE3;   --st-info-tint: #22344B;
  --st-neutral-text: #B5BFCA;--st-neutral-tint: #2A3441;
  --st-shadow-float: 0 -1px 0 var(--st-line), 0 -8px 24px rgba(0, 0, 0, 0.35);
  --st-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ---- 02-base.css ---- */
/* ==========================================================================
   Base : remise à zéro légère, typographie, focus, accessibilité
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-font);
  font-size: var(--st-fs-16);
  line-height: var(--st-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 var(--st-s3); max-width: 68ch; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--st-font-display);
  line-height: var(--st-lh-tight);
  font-weight: var(--st-w-semibold);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--st-fs-28); }
h2 { font-size: var(--st-fs-22); }
h3 { font-size: var(--st-fs-18); }
h4 { font-size: var(--st-fs-16); }
@media (min-width: 1024px) { h1 { font-size: var(--st-fs-36); } }
a { color: var(--st-primary-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
small, .st-small { font-size: var(--st-fs-14); }
.st-muted { color: var(--st-text-2); }
.st-num { font-variant-numeric: tabular-nums; }
.st-display { font-family: var(--st-font-display); }
strong, b { font-weight: var(--st-w-bold); }
hr { border: 0; border-top: 1px solid var(--st-line); margin: var(--st-s6) 0; }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--st-focus-ring); border-radius: var(--st-r-sm); }

.st-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.st-skip {
  position: absolute; left: var(--st-s2); top: -100px; z-index: 100;
  background: var(--st-signal); color: var(--st-on-signal); padding: var(--st-s3) var(--st-s4);
  font-weight: var(--st-w-bold); border-radius: var(--st-r-sm);
}
.st-skip:focus { top: var(--st-s2); }

.st-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.st-icon--sm { width: 20px; height: 20px; }
.st-icon--lg { width: 32px; height: 32px; }

[hidden] { display: none !important; }

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

/* ---- 03-layout.css ---- */
/* ==========================================================================
   Structure de page : barre du haut (mobile), navigation latérale (bureau),
   barre d'onglets (mobile), contenu, barre d'action fixe
   Mobile d'abord ; bureau à partir de 1024 px.
   ========================================================================== */
.st-app { min-height: 100vh; min-height: 100dvh; }

/* -- Barre du haut (mobile) -------------------------------------------- */
.st-topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--st-header-h);
  display: flex; align-items: center; gap: var(--st-s2);
  padding: 0 var(--st-s2) 0 var(--st-gutter);
  background: var(--st-surface);
  border-bottom: 1px solid var(--st-line);
}
.st-topbar__brand { display: flex; min-height: var(--st-touch-min); align-items: center; gap: var(--st-s2); min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.st-topbar__brand svg { height: 28px; width: auto; }
.st-topbar__org { font-weight: var(--st-w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-topbar__title { flex: 1; min-width: 0; font-family: var(--st-font-display); font-size: var(--st-fs-18); font-weight: var(--st-w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-topbar .st-btn--icon { flex: none; }

/* -- Navigation latérale (bureau) ------------------------------------- */
.st-sidebar { display: none; }

/* -- Contenu ------------------------------------------------------------ */
.st-main {
  padding: var(--st-s4) var(--st-gutter) calc(var(--st-tabbar-h) + var(--st-safe-bottom) + var(--st-s8));
  max-width: 100%;
}
.st-app--focus .st-main { padding-bottom: calc(var(--st-actionbar-h) + var(--st-safe-bottom) + var(--st-s6)); }
.st-app--bare .st-main { padding-bottom: var(--st-s8); }
.st-container { width: 100%; max-width: 1200px; margin: 0 auto; }
.st-container--narrow { max-width: 640px; }
.st-container--form { max-width: 720px; }

.st-stack > * + * { margin-top: var(--st-s4); }
.st-stack-lg > * + * { margin-top: var(--st-s8); }
.st-row { display: flex; gap: var(--st-s3); align-items: center; flex-wrap: wrap; }
.st-row--between { justify-content: space-between; }
.st-grid-2 { display: grid; gap: var(--st-s4); }
@media (min-width: 720px) { .st-grid-2 { grid-template-columns: 1fr 1fr; } }
.st-split { display: grid; gap: var(--st-s6); }
@media (min-width: 1024px) { .st-split { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }

/* -- Barre d'onglets (mobile) ----------------------------------------- */
.st-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--st-tabbar-h) + var(--st-safe-bottom));
  padding-bottom: var(--st-safe-bottom);
  background: var(--st-surface);
  border-top: 1px solid var(--st-line);
}
.st-tabbar--4 { grid-template-columns: repeat(4, 1fr); }
.st-tabbar a, .st-tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--st-touch-min);
  border: 0; background: none; padding: 0 2px;
  color: var(--st-text-2); text-decoration: none;
  font-size: var(--st-fs-12); font-weight: var(--st-w-medium); line-height: 1.1;
  position: relative;
}
.st-tabbar [aria-current="page"] { color: var(--st-text); font-weight: var(--st-w-bold); }
.st-tabbar [aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; background: var(--st-signal);
}
.st-tabbar__create .st-tabbar__plus {
  display: grid; place-items: center; width: 44px; height: 36px; border-radius: var(--st-r-sm);
  background: var(--st-primary); color: var(--st-on-primary);
}
.st-tabbar__create { color: var(--st-text) !important; }

/* -- Barre d'action fixe (une action principale) ---------------------- */
.st-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; gap: var(--st-s3); align-items: center;
  padding: var(--st-s3) var(--st-gutter) calc(var(--st-s3) + var(--st-safe-bottom));
  background: var(--st-surface);
  box-shadow: var(--st-shadow-float);
}
.st-actionbar > .st-btn--primary, .st-actionbar > .st-btn--signal { flex: 1; }
.st-actionbar__meta { flex: 1; min-width: 0; font-size: var(--st-fs-14); color: var(--st-text-2); line-height: 1.3; }
.st-actionbar__meta strong { display: block; color: var(--st-text); font-family: var(--st-font-display); font-size: var(--st-fs-18); }

/* -- Bureau ------------------------------------------------------------- */
@media (min-width: 1024px) {
  .st-app { display: grid; grid-template-columns: var(--st-sidebar-w) minmax(0, 1fr);
    /* la colonne de navigation garde son fond sur toute la hauteur, même quand la page défile */
    background-image: linear-gradient(to right, var(--st-surface) calc(var(--st-sidebar-w) - 1px), var(--st-line) calc(var(--st-sidebar-w) - 1px), var(--st-line) var(--st-sidebar-w), transparent var(--st-sidebar-w)); }
  .st-app--bare, .st-app--field { background-image: none; }
  .st-app--bare, .st-app--field { display: block; }
  .st-topbar { display: none; }
  .st-app--field .st-topbar, .st-app--bare .st-topbar { display: flex; }
  .st-tabbar { display: none; }
  .st-app--field .st-tabbar { display: grid; position: sticky; max-width: 480px; margin: 0 auto; }
  .st-sidebar {
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    padding: var(--st-s5) var(--st-s3) var(--st-s4);
    background: var(--st-surface);
    border-right: 1px solid var(--st-line);
    overflow-y: auto;
  }
  .st-main { padding: var(--st-s8) var(--st-s10) var(--st-s12); }
  .st-app--focus .st-main { padding-bottom: calc(var(--st-actionbar-h) + var(--st-s8)); }
  .st-actionbar {
    left: var(--st-sidebar-w);
    padding-left: var(--st-s10); padding-right: var(--st-s10);
    justify-content: flex-end;
  }
  .st-actionbar > .st-btn--primary, .st-actionbar > .st-btn--signal { flex: none; min-width: 240px; }
  .st-app--bare .st-actionbar, .st-app--field .st-actionbar { left: 0; }
}

.st-sidebar__brand { display: block; padding: var(--st-s1) var(--st-s3) var(--st-s6); color: inherit; }
.st-sidebar__brand svg { height: 30px; width: auto; }
.st-sidebar__org {
  display: flex; align-items: center; gap: var(--st-s2); width: 100%;
  margin: 0 0 var(--st-s4); padding: var(--st-s2) var(--st-s3);
  min-height: var(--st-touch-min);
  border: 1px solid var(--st-line); border-radius: var(--st-r-sm); background: var(--st-surface);
  text-align: left; font-size: var(--st-fs-14);
}
.st-sidebar__org span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--st-w-semibold); }
.st-nav { list-style: none; margin: 0; padding: 0; }
.st-nav + .st-nav { margin-top: var(--st-s4); padding-top: var(--st-s4); border-top: 1px solid var(--st-line); }
.st-nav a {
  display: flex; align-items: center; gap: var(--st-s3);
  min-height: var(--st-touch-min); padding: 0 var(--st-s3);
  border-radius: var(--st-r-sm);
  color: var(--st-text-2); text-decoration: none; font-weight: var(--st-w-medium);
  position: relative;
}
.st-nav a:hover { background: var(--st-surface-2); color: var(--st-text); }
.st-nav a[aria-current="page"] { color: var(--st-text); font-weight: var(--st-w-bold); background: var(--st-surface-2); }
.st-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; background: var(--st-signal); }
.st-nav__count { margin-left: auto; font-size: var(--st-fs-12); font-weight: var(--st-w-bold); color: var(--st-text-2); font-variant-numeric: tabular-nums; }
.st-nav__lock { margin-left: auto; color: var(--st-text-2); }
.st-sidebar__foot { margin-top: auto; padding-top: var(--st-s4); }
.st-sidebar__user { display: flex; align-items: center; gap: var(--st-s3); padding: var(--st-s2) var(--st-s3); font-size: var(--st-fs-14); line-height: 1.3; }
.st-sidebar__user span { display: block; color: var(--st-text-2); }

/* -- En-tête de page ---------------------------------------------------- */
.st-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--st-s3) var(--st-s4); margin-bottom: var(--st-s6); }
.st-page-head__text { flex: 1 1 280px; min-width: 0; }
.st-page-head__back {
  display: inline-flex; align-items: center; gap: var(--st-s1);
  min-height: var(--st-touch-min); margin: calc(-1 * var(--st-s2)) 0 var(--st-s1) calc(-1 * var(--st-s1));
  padding: 0 var(--st-s2) 0 var(--st-s1);
  color: var(--st-text-2); text-decoration: none; font-size: var(--st-fs-14); font-weight: var(--st-w-medium);
}
.st-page-head h1 { overflow-wrap: anywhere; }
@media (max-width: 1023.98px) { .st-app--focus .st-page-head__back { display: none; } }
.st-page-head__meta { margin: var(--st-s2) 0 0; color: var(--st-text-2); }
.st-page-head__actions { display: none; gap: var(--st-s2); }
@media (min-width: 1024px) { .st-page-head__actions { display: flex; } }

/* -- Sections ------------------------------------------------------------ */
.st-section { margin-top: var(--st-s8); }
.st-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--st-s3); margin-bottom: var(--st-s3); }
.st-section__head h2 { font-size: var(--st-fs-18); }
.st-section__head a { font-size: var(--st-fs-14); font-weight: var(--st-w-semibold); min-height: var(--st-touch-min); display: inline-flex; align-items: center; }

/* -- Logo : version claire / sombre selon le thème ---------------------- */
.st-logo { display: inline-block; line-height: 0; }
.st-logo svg { height: inherit; width: auto; }
.st-logo--dark { display: none; }
:root[data-theme="dark"] .st-logo--light { display: none; }
:root[data-theme="dark"] .st-logo--dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-logo--light { display: none; }
  :root:not([data-theme="light"]) .st-logo--dark { display: inline-block; }
}
.st-sidebar__brand .st-logo { height: 30px; }
.st-auth__logo .st-logo { height: 32px; }

/* ---- 04-components.css ---- */
/* ==========================================================================
   Composants de base
   ========================================================================== */

/* -- Boutons ------------------------------------------------------------ */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--st-s2);
  min-height: var(--st-touch); padding: 0 var(--st-s5);
  border: 1px solid transparent; border-radius: var(--st-r-sm);
  font-size: var(--st-fs-16); font-weight: var(--st-w-semibold); line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), transform 80ms;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.st-btn:active { transform: translateY(1px); }
.st-btn--primary { background: var(--st-primary); color: var(--st-on-primary); }
.st-btn--primary:hover { background: var(--st-primary-hover); }
.st-btn--signal { background: var(--st-signal); color: var(--st-on-signal); border-color: rgba(23,33,46,.12); }
.st-btn--signal:hover { background: #E5B210; }
.st-btn--secondary { background: var(--st-surface); color: var(--st-text); border-color: var(--st-line-input); }
.st-btn--secondary:hover { background: var(--st-surface-2); }
.st-btn--ghost { background: transparent; color: var(--st-primary-text); padding: 0 var(--st-s3); }
.st-btn--ghost:hover { background: var(--st-primary-tint); }
.st-btn--danger { background: var(--st-surface); color: var(--st-danger-text); border-color: currentColor; }
.st-btn--danger:hover { background: var(--st-danger-tint); }
.st-btn--lg { min-height: 56px; font-size: var(--st-fs-18); padding: 0 var(--st-s6); }
.st-btn--sm { min-height: var(--st-touch-min); padding: 0 var(--st-s3); font-size: var(--st-fs-14); }
.st-btn--block { display: flex; width: 100%; }
.st-btn--icon { width: var(--st-touch); min-width: var(--st-touch); padding: 0; background: transparent; color: var(--st-text); }
.st-btn--icon:hover { background: var(--st-surface-2); }
.st-btn[disabled], .st-btn[aria-disabled="true"] { background: var(--st-surface-2); color: var(--st-text-2); border-color: var(--st-line); cursor: not-allowed; transform: none; }
.st-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.st-btn.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--st-on-primary); border-right-color: transparent; animation: st-spin .7s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-btn-group { display: flex; flex-wrap: wrap; gap: var(--st-s2); }

/* -- Champs ------------------------------------------------------------- */
.st-field { display: block; margin-bottom: var(--st-s5); }
.st-field:last-child { margin-bottom: 0; }
.st-label { display: block; margin-bottom: var(--st-s2); font-weight: var(--st-w-semibold); line-height: 1.3; }
.st-label__opt { font-weight: var(--st-w-regular); color: var(--st-text-2); }
.st-help { display: block; margin-top: var(--st-s2); font-size: var(--st-fs-14); color: var(--st-text-2); line-height: 1.4; }
.st-error { display: flex; gap: var(--st-s2); align-items: flex-start; margin-top: var(--st-s2); font-size: var(--st-fs-14); color: var(--st-danger-text); font-weight: var(--st-w-semibold); line-height: 1.4; }
.st-error .st-icon { width: 18px; height: 18px; margin-top: 1px; }
.st-input, .st-select, .st-textarea {
  display: block; width: 100%;
  min-height: var(--st-touch); padding: 0 var(--st-s3);
  border: 1px solid var(--st-line-input); border-radius: var(--st-r-sm);
  background: var(--st-surface); color: var(--st-text);
  font-size: var(--st-fs-16);
  transition: border-color var(--st-dur);
}
.st-textarea { padding: var(--st-s3); min-height: 112px; resize: vertical; line-height: var(--st-lh); }
.st-input::placeholder, .st-textarea::placeholder { color: var(--st-text-2); opacity: .8; }
.st-input:hover, .st-select:hover, .st-textarea:hover { border-color: var(--st-text-2); }
.st-input:focus-visible, .st-select:focus-visible, .st-textarea:focus-visible { border-color: var(--st-text); box-shadow: var(--st-focus-ring); }
.st-input[aria-invalid="true"], .st-select[aria-invalid="true"], .st-textarea[aria-invalid="true"] { border-color: var(--st-danger); border-width: 2px; }
.st-input[readonly] { background: var(--st-surface-2); }
.st-select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23535C66' stroke-width='1.75'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.st-input-group { display: flex; align-items: stretch; }
.st-input-group .st-input { border-radius: var(--st-r-sm) 0 0 var(--st-r-sm); }
.st-input-group__addon {
  display: flex; align-items: center; padding: 0 var(--st-s3);
  border: 1px solid var(--st-line-input); border-left: 0; border-radius: 0 var(--st-r-sm) var(--st-r-sm) 0;
  background: var(--st-surface-2); color: var(--st-text-2); font-weight: var(--st-w-semibold);
}
.st-search { position: relative; }
.st-search .st-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--st-text-2); pointer-events: none; }
.st-search .st-input { padding-left: 44px; }

/* -- Choix en liste (radios / cases larges) ---------------------------- */
.st-choices { display: grid; gap: var(--st-s2); border: 0; padding: 0; margin: 0 0 var(--st-s5); min-width: 0; }
.st-choices legend { padding: 0; }
.st-choice { position: relative; display: block; }
.st-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.st-choice__box {
  display: flex; gap: var(--st-s3); align-items: center;
  min-height: 56px; padding: var(--st-s3) var(--st-s4);
  border: 1px solid var(--st-line-input); border-radius: var(--st-r-sm); background: var(--st-surface);
  line-height: 1.35;
}
.st-choice__box::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--st-line-input); background: var(--st-surface);
}
.st-choice input[type="checkbox"] + .st-choice__box::before { border-radius: var(--st-r-xs); }
.st-choice__text { flex: 1; min-width: 0; }
.st-choice__text small { display: block; color: var(--st-text-2); }
.st-choice__aside { font-family: var(--st-font-display); font-weight: var(--st-w-semibold); white-space: nowrap; }
.st-choice input:checked + .st-choice__box { border: 2px solid var(--st-primary); padding: calc(var(--st-s3) - 1px) calc(var(--st-s4) - 1px); background: var(--st-primary-tint); }
.st-choice input:checked + .st-choice__box::before { border: 7px solid var(--st-primary); }
.st-choice input[type="checkbox"]:checked + .st-choice__box::before {
  border: 0; background: var(--st-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;
}
.st-choice input:focus-visible + .st-choice__box { box-shadow: var(--st-focus-ring); }
.st-choice input:disabled + .st-choice__box { opacity: .55; }

/* -- Case à cocher simple --------------------------------------------- */
.st-check { display: flex; gap: var(--st-s3); align-items: flex-start; min-height: var(--st-touch-min); padding: 10px 0; cursor: pointer; line-height: 1.4; }
.st-check input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 24px; height: 24px;
  border: 2px solid var(--st-line-input); border-radius: var(--st-r-xs); background: var(--st-surface); cursor: pointer;
}
.st-check input:checked {
  border-color: var(--st-primary);
  background: var(--st-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat;
}
.st-check input:focus-visible { box-shadow: var(--st-focus-ring); }

/* -- Interrupteur ------------------------------------------------------- */
.st-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--st-s4); min-height: 56px; cursor: pointer; line-height: 1.35; }
.st-switch__text small { display: block; color: var(--st-text-2); }
.st-switch input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 52px; height: 32px; border-radius: var(--st-r-pill);
  background: var(--st-gris-500); cursor: pointer; transition: background-color var(--st-dur);
}
.st-switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--st-dur) var(--st-ease);
}
.st-switch input:checked { background: var(--st-primary); }
.st-switch input:checked::after { transform: translateX(20px); }
.st-switch input:focus-visible { box-shadow: var(--st-focus-ring); }

/* -- Sélecteur segmenté (vues, périodes) ------------------------------ */
.st-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--st-r-sm); background: var(--st-surface-sunken); max-width: 100%; overflow-x: auto; }
.st-segmented button, .st-segmented a {
  min-height: var(--st-touch-min); padding: 0 var(--st-s4); border: 0; border-radius: 4px; background: transparent;
  color: var(--st-text-2); font-weight: var(--st-w-semibold); font-size: var(--st-fs-14); white-space: nowrap;
  display: inline-flex; align-items: center; text-decoration: none;
}
.st-segmented--full { display: flex; width: 100%; }
.st-segmented--full > * { flex: 1; justify-content: center; }
.st-segmented [aria-pressed="true"], .st-segmented [aria-selected="true"], .st-segmented [aria-current="page"] { background: var(--st-surface); color: var(--st-text); box-shadow: 0 1px 2px rgba(23,33,46,.12); }

/* -- Onglets ------------------------------------------------------------ */
.st-tabs { display: flex; gap: var(--st-s1); border-bottom: 1px solid var(--st-line); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--st-s4); }
.st-tabs a, .st-tabs button {
  display: inline-flex; align-items: center; gap: var(--st-s2);
  min-height: var(--st-touch); padding: 0 var(--st-s3); border: 0; background: none;
  color: var(--st-text-2); font-weight: var(--st-w-semibold); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.st-tabs [aria-selected="true"], .st-tabs [aria-current="page"] { color: var(--st-text); border-bottom-color: var(--st-text); }
.st-tabs__count { font-size: var(--st-fs-12); background: var(--st-surface-sunken); border-radius: var(--st-r-xs); padding: 1px 6px; font-variant-numeric: tabular-nums; color: var(--st-text); }

/* -- Puces de filtre ---------------------------------------------------- */
.st-chips { display: flex; gap: var(--st-s2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.st-chip {
  display: inline-flex; align-items: center; gap: var(--st-s1); flex: none;
  min-height: var(--st-touch-min); padding: 0 var(--st-s4); border-radius: var(--st-r-pill);
  border: 1px solid var(--st-line-strong); background: var(--st-surface); color: var(--st-text);
  font-size: var(--st-fs-14); font-weight: var(--st-w-semibold);
}
.st-chip[aria-pressed="true"] { background: var(--st-encre); color: #fff; border-color: var(--st-encre); }
:root[data-theme="dark"] .st-chip[aria-pressed="true"] { background: var(--st-text); color: var(--st-bg); }

/* -- Statuts d'intervention -------------------------------------------- */
.st-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 6px; border-radius: var(--st-r-xs);
  font-size: var(--st-fs-14); font-weight: var(--st-w-semibold); line-height: 1.45; white-space: nowrap;
  background: var(--st-neutral-tint); color: var(--st-neutral-text);
}
.st-status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; background: currentColor; }
.st-status--a-planifier { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.st-status--a-planifier::before { background: transparent; border: 1.5px dashed currentColor; width: 9px; height: 9px; }
.st-status--planifiee { background: var(--st-info-tint); color: var(--st-info-text); }
.st-status--en-cours { background: var(--st-warn-tint); color: var(--st-warn-text); }
.st-status--en-cours::before { background: var(--st-signal); box-shadow: 0 0 0 1.5px var(--st-warn-text); border-radius: 50%; }
.st-status--terminee { background: var(--st-ok-tint); color: var(--st-ok-text); }
.st-status--annulee { color: var(--st-text-2); background: var(--st-surface-2); }
.st-status--annulee::before { height: 2px; }
.st-status--en-retard { background: var(--st-danger-tint); color: var(--st-danger-text); }
/* États de facturation et de devis : même gabarit, forme de repère différente (losange) */
.st-status--facture::before { transform: rotate(45deg) scale(.85); border-radius: 1px; }
.st-status--a-facturer { background: var(--st-info-tint); color: var(--st-info-text); }
.st-status--bloquee { background: var(--st-warn-tint); color: var(--st-warn-text); }
.st-status--facturee, .st-status--acceptee, .st-status--payee { background: var(--st-ok-tint); color: var(--st-ok-text); }
.st-status--brouillon { background: var(--st-neutral-tint); color: var(--st-neutral-text); }
.st-status--envoye { background: var(--st-info-tint); color: var(--st-info-text); }
.st-status--refuse, .st-status--impayee { background: var(--st-danger-tint); color: var(--st-danger-text); }

/* Pastille de métier */
.st-metier { display: inline-flex; align-items: center; gap: 6px; font-size: var(--st-fs-14); color: var(--st-text-2); white-space: nowrap; }
.st-metier::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--st-metier, var(--st-gris-500)); }
[data-metier="nettoyage"] { --st-metier: var(--st-metier-nettoyage); }
[data-metier="plomberie"] { --st-metier: var(--st-metier-plomberie); }
[data-metier="electricite"] { --st-metier: var(--st-metier-electricite); }
[data-metier="informatique"] { --st-metier: var(--st-metier-informatique); }
[data-metier="espaces-verts"] { --st-metier: var(--st-metier-espaces-verts); }
[data-metier="multi"] { --st-metier: var(--st-metier-multi); }

/* Étiquette neutre (rang de série, « modifiée »…) */
.st-tag { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--st-line-strong); border-radius: var(--st-r-xs); font-size: var(--st-fs-12); font-weight: var(--st-w-semibold); color: var(--st-text-2); line-height: 1.6; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* -- Avatars ------------------------------------------------------------ */
.st-avatar {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--st-surface-sunken); color: var(--st-text); font-size: var(--st-fs-14); font-weight: var(--st-w-bold);
  border: 2px solid var(--st-surface);
}
.st-avatar--sm { width: 28px; height: 28px; font-size: var(--st-fs-12); }
.st-avatars { display: inline-flex; }
.st-avatars .st-avatar + .st-avatar { margin-left: -8px; }

/* -- Alertes ------------------------------------------------------------ */
.st-alert {
  display: flex; gap: var(--st-s3); align-items: flex-start;
  padding: var(--st-s3) var(--st-s4); border-radius: var(--st-r-sm);
  background: var(--st-info-tint); color: var(--st-text);
  border-left: 4px solid var(--st-info-text);
  line-height: 1.45;
}
.st-alert > .st-icon { color: var(--st-info-text); margin-top: 1px; }
.st-alert__body { flex: 1; min-width: 0; }
.st-alert__body p { margin: 0; }
.st-alert__title { display: block; font-weight: var(--st-w-bold); }
.st-alert__actions { display: flex; gap: var(--st-s2); flex-wrap: wrap; margin-top: var(--st-s2); }
.st-alert--ok { background: var(--st-ok-tint); border-left-color: var(--st-ok-text); }
.st-alert--ok > .st-icon { color: var(--st-ok-text); }
.st-alert--warn { background: var(--st-warn-tint); border-left-color: var(--st-signal); }
.st-alert--warn > .st-icon { color: var(--st-warn-text); }
.st-alert--danger { background: var(--st-danger-tint); border-left-color: var(--st-danger-text); }
.st-alert--danger > .st-icon { color: var(--st-danger-text); }

/* -- Panneaux (surface blanche) ---------------------------------------- */
.st-panel { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-r-md); padding: var(--st-s4); }
@media (min-width: 720px) { .st-panel { padding: var(--st-s6); } }
.st-panel--flush { padding: 0; overflow: hidden; }
.st-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--st-s3); margin-bottom: var(--st-s4); }
.st-panel__head h2, .st-panel__head h3 { font-size: var(--st-fs-18); }

/* Liste clé / valeur */
.st-dl { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: var(--st-s2) var(--st-s4); margin: 0; }
.st-dl dt { color: var(--st-text-2); }
.st-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* -- États vides --------------------------------------------------------- */
.st-empty { padding: var(--st-s8) var(--st-s4); text-align: left; border: 1px dashed var(--st-line-strong); border-radius: var(--st-r-md); background: var(--st-surface); }
.st-empty__icon { color: var(--st-text-2); margin-bottom: var(--st-s3); }
.st-empty h3 { margin-bottom: var(--st-s2); }
.st-empty p { color: var(--st-text-2); }
@media (min-width: 720px) { .st-empty { padding: var(--st-s10) var(--st-s8); } }

/* -- Squelettes de chargement ------------------------------------------ */
.st-skel { display: block; border-radius: var(--st-r-xs); background: linear-gradient(90deg, var(--st-surface-2) 0, var(--st-surface-sunken) 50%, var(--st-surface-2) 100%); background-size: 200% 100%; animation: st-skel 1.4s linear infinite; }
.st-skel--line { height: 14px; margin: 6px 0; }
.st-skel--title { height: 22px; width: 50%; margin-bottom: var(--st-s3); }
.st-skel--block { height: 72px; border-radius: var(--st-r-md); }
@keyframes st-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* -- Toasts ------------------------------------------------------------- */
.st-toasts { position: fixed; z-index: 90; left: var(--st-gutter); right: var(--st-gutter); bottom: calc(var(--st-tabbar-h) + var(--st-safe-bottom) + var(--st-s3)); display: grid; gap: var(--st-s2); pointer-events: none; }
.st-app--focus ~ .st-toasts, .st-app--focus .st-toasts { bottom: calc(var(--st-actionbar-h) + var(--st-safe-bottom) + var(--st-s3)); }
@media (min-width: 1024px) { .st-toasts { left: auto; right: var(--st-s8); bottom: var(--st-s8); width: 400px; } }
.st-toast {
  display: flex; align-items: center; gap: var(--st-s3);
  padding: var(--st-s3) var(--st-s2) var(--st-s3) var(--st-s4);
  border-radius: var(--st-r-sm); background: var(--st-encre); color: #fff;
  box-shadow: var(--st-shadow-pop); pointer-events: auto; line-height: 1.4;
  animation: st-toast-in 200ms var(--st-ease);
}
.st-toast > span { flex: 1; }
.st-toast .st-icon { color: var(--st-signal); }
.st-toast__action { background: none; border: 0; color: #fff; font-weight: var(--st-w-bold); text-decoration: underline; text-underline-offset: 3px; min-height: var(--st-touch-min); padding: 0 var(--st-s3); }
.st-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: all 200ms; }
@keyframes st-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* -- Feuille inférieure (remplace les modales) ------------------------- */
.st-sheet-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(19, 38, 62, .48); opacity: 0; transition: opacity 200ms; }
.st-sheet-backdrop.is-open { opacity: 1; }
.st-sheet {
  position: fixed; z-index: 81; left: 0; right: 0; bottom: 0;
  max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--st-surface); border-radius: var(--st-r-lg) var(--st-r-lg) 0 0;
  box-shadow: var(--st-shadow-pop);
  transform: translateY(100%); transition: transform 240ms var(--st-ease);
  padding-bottom: var(--st-safe-bottom);
}
.st-sheet.is-open { transform: none; }
.st-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--st-line-strong); margin: var(--st-s2) auto 0; flex: none; }
.st-sheet__head { display: flex; align-items: center; gap: var(--st-s3); padding: var(--st-s3) var(--st-s2) var(--st-s3) var(--st-s5); }
.st-sheet__head h2 { flex: 1; font-size: var(--st-fs-22); }
.st-sheet__body { padding: 0 var(--st-s5) var(--st-s4); overflow-y: auto; }
.st-sheet__foot { display: flex; gap: var(--st-s3); padding: var(--st-s3) var(--st-s5) var(--st-s4); border-top: 1px solid var(--st-line); }
.st-sheet__foot .st-btn { flex: 1; }
@media (min-width: 1024px) {
  /* Sur ordinateur : panneau latéral droit, même composant, toujours un seul à la fois */
  .st-sheet { left: auto; top: 0; width: 440px; max-height: none; border-radius: 0; transform: translateX(100%); }
  .st-sheet__grip { display: none; }
  .st-sheet__head { padding-top: var(--st-s5); }
  .st-sheet__body { flex: 1; }
}
body.st-sheet-open { overflow: hidden; }

/* -- Tableau responsive (lignes en fiches sous 720 px) ----------------- */
.st-table-wrap { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-r-md); overflow: hidden; }
.st-table { width: 100%; border-collapse: collapse; font-size: var(--st-fs-16); }
.st-table th { text-align: left; font-weight: var(--st-w-semibold); font-size: var(--st-fs-14); color: var(--st-text-2); padding: var(--st-s3) var(--st-s4); background: var(--st-surface-2); border-bottom: 1px solid var(--st-line); white-space: nowrap; }
.st-table td { padding: var(--st-s3) var(--st-s4); border-bottom: 1px solid var(--st-line); vertical-align: middle; }
.st-table tr:last-child td { border-bottom: 0; }
.st-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-table tbody tr:hover { background: var(--st-bleu-50); }
:root[data-theme="dark"] .st-table tbody tr:hover { background: var(--st-surface-2); }
.st-table a.st-table__main { font-weight: var(--st-w-semibold); color: var(--st-text); text-decoration: none; }
.st-table a.st-table__main:hover { text-decoration: underline; }
@media (max-width: 719.98px) {
  .st-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .st-table--stack, .st-table--stack tbody, .st-table--stack tr, .st-table--stack td { display: block; width: 100%; }
  .st-table--stack tr { padding: var(--st-s3) var(--st-s4); border-bottom: 1px solid var(--st-line); }
  .st-table--stack tr:last-child { border-bottom: 0; }
  .st-table--stack td { display: flex; justify-content: space-between; gap: var(--st-s3); padding: 3px 0; border: 0; text-align: right; }
  .st-table--stack td::before { content: attr(data-label); color: var(--st-text-2); text-align: left; font-size: var(--st-fs-14); }
  .st-table--stack td.st-table__primary { display: block; text-align: left; font-size: var(--st-fs-18); padding-bottom: var(--st-s1); }
  .st-table--stack td.st-table__primary::before { display: none; }
}

/* -- Totaux (devis, facture) ------------------------------------------ */
.st-totals { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--st-s2) 0; font-variant-numeric: tabular-nums; }
.st-totals dt { color: var(--st-text-2); }
.st-totals dd { margin: 0; padding-left: var(--st-s6); text-align: right; }
.st-totals .is-total { padding-top: var(--st-s3); border-top: 2px solid var(--st-text); color: var(--st-text); font-family: var(--st-font-display); font-size: var(--st-fs-22); font-weight: var(--st-w-bold); }

/* -- Étapes d'assistant (stepper) -------------------------------------- */
.st-steps { list-style: none; margin: 0 0 var(--st-s6); padding: 0; display: grid; grid-template-columns: repeat(var(--st-steps, 3), 1fr); gap: var(--st-s2); counter-reset: st-step; }
.st-steps li { counter-increment: st-step; padding-top: var(--st-s2); border-top: 4px solid var(--st-line-strong); font-size: var(--st-fs-14); font-weight: var(--st-w-semibold); color: var(--st-text-2); line-height: 1.3; }
.st-steps li::before { content: counter(st-step) ". "; font-variant-numeric: tabular-nums; }
.st-steps li.is-done { border-top-color: var(--st-primary); color: var(--st-text); }
.st-steps li[aria-current="step"] { border-top-color: var(--st-signal); color: var(--st-text); font-weight: var(--st-w-bold); }

/* -- Résumé de saisie (récapitulatif des étapes précédentes) ----------- */
.st-recap { display: flex; align-items: center; gap: var(--st-s3); padding: var(--st-s3) var(--st-s4); border-radius: var(--st-r-sm); background: var(--st-surface-2); margin-bottom: var(--st-s5); line-height: 1.35; }
.st-recap > div { flex: 1; min-width: 0; }
.st-recap small { color: var(--st-text-2); display: block; }

/* -- Pagination simple ------------------------------------------------- */
.st-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--st-s3); margin-top: var(--st-s4); font-size: var(--st-fs-14); color: var(--st-text-2); }

/* -- Compatibilité avec la validation ASP.NET Core (classes générées par les tag helpers) -- */
.st-input.input-validation-error, .st-select.input-validation-error, .st-textarea.input-validation-error { border-color: var(--st-danger); border-width: 2px; }
.field-validation-error { display: block; margin-top: var(--st-s2); font-size: var(--st-fs-14); color: var(--st-danger-text); font-weight: var(--st-w-semibold); line-height: 1.4; }
.field-validation-valid { display: none; }
.validation-summary-errors { padding: var(--st-s3) var(--st-s4); border-left: 4px solid var(--st-danger-text); background: var(--st-danger-tint); border-radius: var(--st-r-sm); margin-bottom: var(--st-s5); }
.validation-summary-errors ul { margin: 0; padding-left: var(--st-s5); }
.validation-summary-valid { display: none; }

/* ---- 05-metier.css ---- */
/* ==========================================================================
   Composants métier : feuille de route, fiche, planning, terrain,
   dictée, assistant, rôles, offre
   ========================================================================== */

/* -- Feuille de route : liste d'interventions horodatée ---------------- */
.st-route { list-style: none; margin: 0; padding: 0; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-r-md); }
.st-route__item { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); border-top: 1px solid var(--st-line); }
.st-route__item:first-child { border-top: 0; }
.st-route__time {
  padding: var(--st-s4) 0 var(--st-s4) var(--st-s4);
  font-family: var(--st-font-display); font-weight: var(--st-w-semibold); font-size: var(--st-fs-18);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.st-route__time small { display: block; font-family: var(--st-font); font-weight: var(--st-w-regular); font-size: var(--st-fs-12); color: var(--st-text-2); margin-top: 2px; }
.st-route__body { display: block; padding: var(--st-s4) var(--st-s4) var(--st-s4) var(--st-s2); color: inherit; text-decoration: none; min-width: 0; }
a.st-route__body:hover .st-route__client { text-decoration: underline; }
.st-route__client { display: block; font-weight: var(--st-w-bold); font-size: var(--st-fs-16); line-height: 1.3; }
.st-route__where { display: block; color: var(--st-text-2); font-size: var(--st-fs-14); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-route__what { display: block; margin-top: 2px; font-size: var(--st-fs-14); line-height: 1.4; }
.st-route__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-s2) var(--st-s3); margin-top: var(--st-s2); }
.st-route__item::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 4px; background: var(--st-metier, transparent); }
.st-route__item:first-child::before { border-top-left-radius: var(--st-r-md); }
.st-route__item:last-child::before { border-bottom-left-radius: var(--st-r-md); }
.st-route__item.is-done .st-route__time, .st-route__item.is-done .st-route__client { color: var(--st-text-2); }
.st-route__item.is-cancelled .st-route__client { text-decoration: line-through; color: var(--st-text-2); }
/* Repère « maintenant » : le trait jaune balisage */
.st-route__now { position: relative; height: 0; list-style: none; }
.st-route__now::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--st-signal); z-index: 1; }
.st-route__now span { position: absolute; left: 12px; top: -11px; z-index: 2; padding: 0 6px; background: var(--st-signal); color: var(--st-on-signal); font-size: var(--st-fs-12); font-weight: var(--st-w-bold); border-radius: 3px; line-height: 20px; font-variant-numeric: tabular-nums; }

/* Prochaine intervention : la seule carte mise en avant de l'écran */
.st-next { background: var(--st-surface); border: 2px solid var(--st-text); border-radius: var(--st-r-md); overflow: hidden; }
.st-next__head { display: flex; align-items: baseline; gap: var(--st-s3); padding: var(--st-s4) var(--st-s4) 0; }
.st-next__time { font-family: var(--st-font-display); font-size: var(--st-fs-36); font-weight: var(--st-w-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.st-next__eta { color: var(--st-text-2); font-size: var(--st-fs-14); }
.st-next__body { padding: var(--st-s3) var(--st-s4) var(--st-s4); }
.st-next__client { font-size: var(--st-fs-22); font-family: var(--st-font-display); font-weight: var(--st-w-semibold); line-height: 1.2; }
.st-next__addr { margin: var(--st-s1) 0 var(--st-s3); color: var(--st-text-2); }
.st-next__note { margin: 0 0 var(--st-s4); padding: var(--st-s3); background: var(--st-warn-tint); border-radius: var(--st-r-xs); font-size: var(--st-fs-14); line-height: 1.45; }
.st-next__note strong { display: block; }
.st-next__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-s2); }
.st-next__actions .st-btn--signal, .st-next__actions .st-btn--primary { grid-column: 1 / -1; }

/* -- Bandeau de chiffres du jour --------------------------------------- */
.st-daybar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--st-line); border: 1px solid var(--st-line); border-radius: var(--st-r-md); overflow: hidden; }
@media (min-width: 720px) { .st-daybar { grid-template-columns: repeat(4, 1fr); } }
.st-daybar a, .st-daybar div { display: block; padding: var(--st-s3) var(--st-s4); background: var(--st-surface); color: inherit; text-decoration: none; min-height: 72px; }
.st-daybar a:hover { background: var(--st-bleu-50); }
:root[data-theme="dark"] .st-daybar a:hover { background: var(--st-surface-2); }
.st-daybar strong { display: block; font-family: var(--st-font-display); font-size: var(--st-fs-28); line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-daybar span { font-size: var(--st-fs-14); color: var(--st-text-2); }
.st-daybar .is-alert strong { color: var(--st-danger-text); }

/* -- Liste « À traiter » ----------------------------------------------- */
.st-todo { list-style: none; margin: 0; padding: 0; }
.st-todo li { display: flex; align-items: center; gap: var(--st-s3); padding: var(--st-s3) 0; border-top: 1px solid var(--st-line); }
.st-todo li:first-child { border-top: 0; padding-top: 0; }
.st-todo__text { flex: 1; min-width: 0; line-height: 1.35; }
.st-todo__text small { display: block; color: var(--st-text-2); }
.st-todo .st-icon { color: var(--st-text-2); }
.st-todo .is-alert .st-icon { color: var(--st-danger-text); }

/* -- Planning ------------------------------------------------------------ */
.st-plan-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-s2) var(--st-s3); margin-bottom: var(--st-s4); }
.st-plan-toolbar__period { font-family: var(--st-font-display); font-size: var(--st-fs-22); font-weight: var(--st-w-semibold); margin-right: auto; white-space: nowrap; }
.st-plan-nav { display: inline-flex; gap: 2px; }
.st-plan-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--st-s4); }
@media (min-width: 1440px) { .st-plan-layout { grid-template-columns: minmax(0, 1fr) 260px; } }
@media (min-width: 720px) and (max-width: 1439.98px) {
  /* « À planifier » passe sous la grille, en rangée de cartes */
  .st-backlog { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--st-s2) var(--st-s3); align-items: start; }
  .st-backlog h2, .st-backlog > p { grid-column: 1 / -1; margin: 0; }
  .st-backlog .st-plan-card { margin: 0; }
}

/* Grille scrollable horizontalement DANS son cadre, jamais la page */
.st-plan { position: relative; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-r-md); overflow: auto; max-height: 72vh; overscroll-behavior: contain; }
.st-plan__grid { display: grid; min-width: 760px; position: relative; }

/* Semaine (agenda) : colonne d'heures + 5 à 7 jours */
.st-plan--week .st-plan__grid { grid-template-columns: 56px repeat(var(--st-days, 5), minmax(132px, 1fr)); grid-template-rows: 52px repeat(var(--st-hours, 12), var(--st-row, 56px)); }
.st-plan__corner, .st-plan__dayhead { position: sticky; top: 0; z-index: 3; background: var(--st-surface); border-bottom: 1px solid var(--st-line-strong); }
.st-plan__corner { left: 0; z-index: 4; }
.st-plan__dayhead { padding: var(--st-s2) var(--st-s3); line-height: 1.2; border-left: 1px solid var(--st-line); }
.st-plan__dayhead strong { display: block; font-family: var(--st-font-display); font-size: var(--st-fs-18); }
.st-plan__dayhead span { font-size: var(--st-fs-12); color: var(--st-text-2); }
.st-plan__dayhead.is-today strong { width: fit-content; background: var(--st-signal); color: var(--st-on-signal); padding: 0 6px; border-radius: 3px; }
.st-plan__hour { position: sticky; left: 0; z-index: 2; background: var(--st-surface); padding: 0 var(--st-s2); font-size: var(--st-fs-12); color: var(--st-text-2); font-variant-numeric: tabular-nums; text-align: right; transform: translateY(-8px); }
.st-plan__hour.is-first { transform: none; padding-top: 2px; }
.st-plan__cell { border-left: 1px solid var(--st-line); border-top: 1px solid var(--st-line); min-width: 0; }
.st-plan__cell.is-off { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--st-surface-2) 6px 7px); }
.st-plan__now { grid-column: 2 / -1; height: 0; position: relative; z-index: 2; pointer-events: none; }
.st-plan__now::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--st-signal); box-shadow: 0 0 0 1px rgba(23,33,46,.25); }

/* Carte d'intervention dans le planning */
.st-plan-card {
  position: relative; z-index: 1; margin: 2px 4px; padding: 4px 6px 4px 9px; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--st-surface); border: 1px solid var(--st-line-strong); border-radius: var(--st-r-xs);
  font-size: var(--st-fs-12); line-height: 1.3; color: var(--st-text); text-decoration: none; min-height: 44px;
  cursor: grab;
}
.st-plan-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--st-metier, var(--st-gris-500)); }
.st-plan-card strong { font-size: var(--st-fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-plan-card span { color: var(--st-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-plan-card__time { font-variant-numeric: tabular-nums; font-weight: var(--st-w-semibold); color: var(--st-text) !important; }
.st-plan-card:hover { border-color: var(--st-text-2); }
.st-plan-card.is-en-cours { background: var(--st-warn-tint); border-color: var(--st-ambre-700); }
.st-plan-card.is-terminee { background: var(--st-surface-2); }
.st-plan-card.is-terminee strong { color: var(--st-text-2); }
.st-plan-card.is-en-retard { border: 2px solid var(--st-danger); }
.st-plan-card[style*="z-index:2"] { box-shadow: -2px 0 0 var(--st-surface); }
.st-plan-card.is-prevue { background: repeating-linear-gradient(135deg, var(--st-surface) 0 6px, var(--st-surface-2) 6px 8px); border-style: dashed; }
.st-plan-card.is-conflict::after { content: "!"; position: absolute; right: 4px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--st-danger); color: #fff; font-weight: 700; font-size: 11px; line-height: 16px; text-align: center; }
.st-plan-card.is-dragging { opacity: .5; }
.st-plan__cell.is-drop { background: var(--st-primary-tint); outline: 2px dashed var(--st-primary); outline-offset: -2px; }

/* Par intervenant : lignes = intervenants, colonnes = jours */
.st-plan--res .st-plan__grid { grid-template-columns: 184px repeat(var(--st-days, 5), minmax(140px, 1fr)); }
.st-plan__res { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: var(--st-s2); padding: var(--st-s2) var(--st-s3); background: var(--st-surface); border-top: 1px solid var(--st-line); border-right: 1px solid var(--st-line-strong); line-height: 1.25; min-width: 0; }
.st-plan__res div { min-width: 0; }
.st-plan__res strong { display: block; font-size: var(--st-fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-plan__res span { font-size: var(--st-fs-12); color: var(--st-text-2); font-variant-numeric: tabular-nums; }
.st-plan__res .is-over { color: var(--st-warn-text); font-weight: var(--st-w-bold); }
.st-plan--res .st-plan__cell { padding: 4px 0; min-height: 96px; display: flex; flex-direction: column; }
.st-plan--res .st-plan-card { flex: none; }
.st-plan__absence { margin: 2px 4px; padding: 6px 8px; border-radius: var(--st-r-xs); background: repeating-linear-gradient(135deg, var(--st-surface-2) 0 6px, var(--st-surface-sunken) 6px 8px); color: var(--st-text-2); font-size: var(--st-fs-12); font-weight: var(--st-w-semibold); flex: 1; }

/* Jour (mobile) : colonnes = intervenants */
.st-plan--day .st-plan__grid { grid-template-columns: 48px repeat(var(--st-cols, 3), minmax(150px, 1fr)); grid-template-rows: 52px repeat(var(--st-hours, 10), 64px); min-width: 0; }

/* Colonne « À planifier » */
.st-backlog { background: var(--st-surface); border: 1px dashed var(--st-line-strong); border-radius: var(--st-r-md); padding: var(--st-s4); }
.st-backlog h2 { font-size: var(--st-fs-18); margin-bottom: var(--st-s1); }
.st-backlog > p { font-size: var(--st-fs-14); color: var(--st-text-2); }
.st-backlog .st-plan-card { margin: 0 0 var(--st-s2); padding: var(--st-s2) var(--st-s2) var(--st-s2) 12px; }
.st-legend { display: flex; flex-wrap: wrap; gap: var(--st-s2) var(--st-s4); margin-top: var(--st-s3); font-size: var(--st-fs-14); }

/* -- Terrain : pointage, synchronisation, photos, signature ----------- */
.st-sync { display: inline-flex; align-items: center; gap: 6px; font-size: var(--st-fs-14); color: var(--st-text-2); }
.st-sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-ok); }
.st-sync--pending::before { background: var(--st-signal); box-shadow: 0 0 0 1.5px var(--st-ambre-700); }
.st-sync--offline::before { background: transparent; border: 2px solid var(--st-text-2); width: 9px; height: 9px; }

.st-clock { display: flex; align-items: center; gap: var(--st-s4); padding: var(--st-s4); background: var(--st-warn-tint); border: 1px solid var(--st-ambre-700); border-radius: var(--st-r-md); }
.st-clock__time { font-family: var(--st-font-display); font-size: var(--st-fs-36); font-weight: var(--st-w-bold); font-variant-numeric: tabular-nums; line-height: 1; }
.st-clock__label { font-size: var(--st-fs-14); line-height: 1.35; }
.st-clock__label strong { display: block; font-size: var(--st-fs-16); }

.st-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--st-s2); }
@media (min-width: 720px) { .st-photos { grid-template-columns: repeat(5, 1fr); } }
.st-photo { position: relative; aspect-ratio: 1; border-radius: var(--st-r-xs); overflow: hidden; background: var(--st-surface-sunken); }
.st-photo svg { width: 100%; height: 100%; }
.st-photo figcaption { position: absolute; left: 4px; bottom: 4px; padding: 0 5px; background: rgba(19,38,62,.82); color: #fff; font-size: var(--st-fs-12); border-radius: 3px; line-height: 18px; }
.st-photo-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1;
  border: 2px dashed var(--st-line-input); border-radius: var(--st-r-xs); background: var(--st-surface);
  color: var(--st-text); font-size: var(--st-fs-14); font-weight: var(--st-w-semibold); min-height: 88px; width: 100%;
}

.st-checklist { list-style: none; margin: 0; padding: 0; }
.st-checklist li { border-top: 1px solid var(--st-line); }
.st-checklist li:first-child { border-top: 0; }
.st-checklist .st-check { padding: 12px 0; }

.st-signature { position: relative; border: 2px solid var(--st-line-input); border-radius: var(--st-r-sm); background: var(--st-surface); touch-action: none; }
.st-signature canvas { width: 100%; height: 180px; display: block; cursor: crosshair; }
.st-signature__line { position: absolute; left: var(--st-s4); right: var(--st-s4); bottom: 40px; border-top: 1px solid var(--st-line-strong); pointer-events: none; }
.st-signature__hint { position: absolute; left: var(--st-s4); bottom: 12px; font-size: var(--st-fs-14); color: var(--st-text-2); pointer-events: none; }
.st-signature__clear { position: absolute; right: 4px; top: 4px; }
.st-signature.is-signed .st-signature__hint { display: none; }

/* Sections dépliables (clôture) */
.st-fold { border: 1px solid var(--st-line); border-radius: var(--st-r-md); background: var(--st-surface); }
.st-fold + .st-fold { margin-top: var(--st-s3); }
.st-fold > summary {
  display: flex; align-items: center; gap: var(--st-s3); min-height: 60px; padding: var(--st-s3) var(--st-s4);
  list-style: none; cursor: pointer; font-weight: var(--st-w-bold); font-size: var(--st-fs-18); font-family: var(--st-font-display);
}
.st-fold > summary::-webkit-details-marker { display: none; }
.st-fold > summary .st-fold__state { margin-left: auto; font-family: var(--st-font); font-size: var(--st-fs-14); font-weight: var(--st-w-semibold); color: var(--st-text-2); }
.st-fold > summary .st-fold__state.is-ok { color: var(--st-ok-text); }
.st-fold > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 var(--st-s2); flex: none; }
.st-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.st-fold__body { padding: 0 var(--st-s4) var(--st-s4); }

/* -- Dictée vocale ------------------------------------------------------ */
.st-mic {
  display: inline-grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--st-text); background: var(--st-surface); color: var(--st-text);
}
.st-mic .st-icon { width: 26px; height: 26px; }
.st-mic:hover { background: var(--st-surface-2); }
.st-mic[aria-pressed="true"] { background: var(--st-danger); border-color: var(--st-danger); color: #fff; animation: st-mic 1.4s ease-out infinite; }
@keyframes st-mic { 0% { box-shadow: 0 0 0 0 rgba(180,35,24,.45); } 100% { box-shadow: 0 0 0 16px rgba(180,35,24,0); } }
.st-mic--sm { width: 44px; height: 44px; border-width: 1px; }
.st-mic--sm .st-icon { width: 22px; height: 22px; }
.st-listening { display: flex; align-items: center; gap: var(--st-s3); color: var(--st-danger-text); font-weight: var(--st-w-semibold); font-size: var(--st-fs-14); }
.st-listening__bars { display: inline-flex; gap: 3px; align-items: center; height: 20px; }
.st-listening__bars i { width: 3px; height: 8px; background: currentColor; border-radius: 1px; animation: st-bars 900ms ease-in-out infinite; }
.st-listening__bars i:nth-child(2) { animation-delay: 150ms; } .st-listening__bars i:nth-child(3) { animation-delay: 300ms; } .st-listening__bars i:nth-child(4) { animation-delay: 450ms; }
@keyframes st-bars { 50% { height: 20px; } }

/* -- Assistant conversationnel ---------------------------------------- */
.st-assistant { display: flex; flex-direction: column; min-height: calc(100dvh - var(--st-header-h) - var(--st-tabbar-h) - 32px); }
.st-convo { flex: 1; display: flex; flex-direction: column; gap: var(--st-s4); padding-bottom: var(--st-s4); }
.st-msg { max-width: 88%; line-height: 1.45; }
.st-msg__who { display: block; font-size: var(--st-fs-12); color: var(--st-text-2); margin-bottom: 4px; font-weight: var(--st-w-semibold); }
.st-msg__bubble { padding: var(--st-s3) var(--st-s4); border-radius: var(--st-r-md); background: var(--st-surface); border: 1px solid var(--st-line); }
.st-msg__bubble p:last-child { margin-bottom: 0; }
.st-msg--me { align-self: flex-end; }
.st-msg--me .st-msg__who { text-align: right; }
.st-msg--me .st-msg__bubble { background: var(--st-bleu-900); color: #fff; border-color: var(--st-bleu-900); border-bottom-right-radius: var(--st-r-xs); }
.st-msg--bot .st-msg__bubble { border-bottom-left-radius: var(--st-r-xs); }
.st-msg__voice { display: flex; align-items: center; gap: 6px; font-size: var(--st-fs-12); opacity: .8; margin-top: 4px; }
.st-msg__voice .st-icon { width: 14px; height: 14px; }

/* Carte de confirmation : toute action qui écrit ou envoie passe par elle */
.st-confirm { border: 2px solid var(--st-text); border-radius: var(--st-r-md); background: var(--st-surface); overflow: hidden; max-width: 520px; }
.st-confirm__head { display: flex; align-items: center; gap: var(--st-s2); padding: var(--st-s3) var(--st-s4); background: var(--st-surface-2); font-weight: var(--st-w-bold); border-bottom: 1px solid var(--st-line); }
.st-confirm__body { padding: var(--st-s4); }
.st-confirm__body .st-dl { grid-template-columns: minmax(84px, 32%) 1fr; }
.st-confirm__foot { display: grid; grid-template-columns: 1fr; gap: var(--st-s2); padding: 0 var(--st-s4) var(--st-s4); }
@media (min-width: 420px) { .st-confirm__foot { grid-template-columns: 1fr auto; } }
.st-composer { position: sticky; bottom: calc(var(--st-tabbar-h) + var(--st-safe-bottom)); display: flex; align-items: center; gap: var(--st-s2); padding: var(--st-s3) 0; background: var(--st-bg); }
.st-composer .st-input { flex: 1; min-height: 52px; border-radius: var(--st-r-pill); padding-left: var(--st-s5); }
.st-suggest { display: flex; flex-wrap: wrap; gap: var(--st-s2); }
@media (min-width: 1024px) { .st-composer { bottom: 0; } }

/* -- Matrice des permissions ------------------------------------------ */
.st-matrix-wrap { overflow-x: auto; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-r-md); }
.st-matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
.st-matrix th, .st-matrix td { padding: 0 var(--st-s2); border-bottom: 1px solid var(--st-line); height: 52px; }
.st-matrix thead th { position: sticky; top: 0; background: var(--st-surface-2); font-size: var(--st-fs-14); text-align: center; line-height: 1.2; padding: var(--st-s2); z-index: 1; }
.st-matrix thead th:first-child { text-align: left; }
.st-matrix tbody th { position: sticky; left: 0; background: var(--st-surface); text-align: left; font-weight: var(--st-w-regular); z-index: 1; min-width: 220px; line-height: 1.3; padding-left: var(--st-s4); }
.st-matrix tbody th small { display: block; color: var(--st-text-2); }
.st-matrix td { text-align: center; }
.st-matrix .st-matrix__group th { background: var(--st-surface-2); font-family: var(--st-font-display); font-weight: var(--st-w-semibold); font-size: var(--st-fs-16); height: 40px; }
.st-matrix .st-matrix__group td { background: var(--st-surface-2); }
.st-matrix input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 9px; border: 2px solid var(--st-line-input); border-radius: var(--st-r-xs); background: var(--st-surface); cursor: pointer; vertical-align: middle;
}
.st-matrix label { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.st-matrix input[type="checkbox"]:checked { border-color: var(--st-primary); background: var(--st-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat; }
.st-matrix input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .55; }
.st-matrix input[type="checkbox"]:focus-visible { box-shadow: var(--st-focus-ring); }
.st-matrix__locked { color: var(--st-text-2); font-size: var(--st-fs-12); display: inline-flex !important; align-items: center; gap: 4px; }
.st-matrix .is-owner { background: var(--st-surface-2); }
.st-matrix thead .st-matrix__role { min-width: 108px; }

/* -- Fonctionnalité non incluse --------------------------------------- */
.st-locked { display: grid; gap: var(--st-s6); }
@media (min-width: 1024px) { .st-locked { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.st-locked__mark { display: inline-flex; align-items: center; gap: var(--st-s2); padding: 4px 10px 4px 6px; border: 1px solid var(--st-line-strong); border-radius: var(--st-r-xs); font-size: var(--st-fs-14); font-weight: var(--st-w-semibold); color: var(--st-text-2); background: var(--st-surface); }
.st-locked__mark .st-icon { width: 18px; height: 18px; }
.st-plans-compare { list-style: none; padding: 0; margin: 0; border: 1px solid var(--st-line); border-radius: var(--st-r-md); background: var(--st-surface); }
.st-plans-compare li { display: flex; align-items: center; justify-content: space-between; gap: var(--st-s3); padding: var(--st-s3) var(--st-s4); border-top: 1px solid var(--st-line); }
.st-plans-compare li:first-child { border-top: 0; }
.st-plans-compare li.is-current { background: var(--st-surface-2); }
.st-plans-compare li.is-target { box-shadow: inset 4px 0 0 var(--st-primary); }

/* -- Document (aperçu devis / facture) -------------------------------- */
.st-doc { background: #fff; color: #17212E; border: 1px solid var(--st-line); border-radius: var(--st-r-xs); padding: var(--st-s5); font-size: var(--st-fs-14); box-shadow: 0 1px 0 rgba(23,33,46,.04); }
@media (min-width: 720px) { .st-doc { padding: var(--st-s10); } }
.st-doc__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--st-s4); padding-bottom: var(--st-s5); border-bottom: 2px solid #17212E; margin-bottom: var(--st-s5); }
.st-doc__org strong { display: block; font-size: var(--st-fs-18); font-family: var(--st-font-display); }
.st-doc__title { text-align: right; margin-left: auto; }
.st-split aside .st-doc { padding: var(--st-s5); }
.st-doc__title h2 { font-size: var(--st-fs-28); }
.st-doc__parties { display: grid; gap: var(--st-s4); margin-bottom: var(--st-s5); }
@media (min-width: 560px) { .st-doc__parties { grid-template-columns: 1fr 1fr; } }
.st-doc__parties h3 { font-size: var(--st-fs-14); font-family: var(--st-font); color: #535C66; font-weight: var(--st-w-semibold); margin-bottom: 4px; }
.st-doc table { width: 100%; border-collapse: collapse; margin-bottom: var(--st-s5); }
.st-doc th { text-align: left; font-size: var(--st-fs-12); color: #535C66; border-bottom: 1px solid #17212E; padding: 6px 4px; font-weight: var(--st-w-semibold); }
.st-doc td { padding: 8px 4px; border-bottom: 1px solid #DDE0DC; vertical-align: top; }
.st-doc .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-doc__foot { margin-top: var(--st-s6); padding-top: var(--st-s4); border-top: 1px solid #DDE0DC; font-size: var(--st-fs-12); color: #535C66; }
.st-doc .st-totals { max-width: 320px; margin-left: auto; }
.st-doc .st-totals dt { color: #535C66; }
.st-doc .st-totals .is-total { border-top-color: #17212E; color: #17212E; }
@media (max-width: 559.98px) { .st-doc .st-doc__lines-ref { display: none; } }

/* Éditeur de lignes de devis */
.st-lines { list-style: none; margin: 0; padding: 0; border: 1px solid var(--st-line); border-radius: var(--st-r-md); background: var(--st-surface); }
.st-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--st-s1) var(--st-s3); padding: var(--st-s3) var(--st-s2) var(--st-s3) var(--st-s4); border-top: 1px solid var(--st-line); align-items: center; }
.st-line:first-child { border-top: 0; }
.st-line__label { font-weight: var(--st-w-semibold); line-height: 1.3; }
.st-line__calc { grid-column: 1; font-size: var(--st-fs-14); color: var(--st-text-2); font-variant-numeric: tabular-nums; }
.st-line__amount { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: var(--st-s1); font-family: var(--st-font-display); font-size: var(--st-fs-18); font-weight: var(--st-w-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -- Pages d'accès (connexion, inscription) --------------------------- */
.st-auth { min-height: 100vh; min-height: 100dvh; display: grid; }
@media (min-width: 1024px) { .st-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.st-auth__side { display: none; }
@media (min-width: 1024px) {
  .st-auth__side { display: flex; flex-direction: column; justify-content: space-between; padding: var(--st-s10); background: var(--st-bleu-900); color: #E7EAEE; position: relative; overflow: hidden; }
}
.st-auth__side blockquote { margin: 0; max-width: 30ch; font-family: var(--st-font-display); font-size: var(--st-fs-28); line-height: 1.25; font-weight: var(--st-w-medium); color: #fff; }
.st-auth__side figcaption { margin-top: var(--st-s4); color: #A9B8CB; }
.st-auth__side ul { list-style: none; padding: 0; margin: auto 0 var(--st-s10); display: grid; gap: var(--st-s5); color: #E7EAEE; max-width: 26ch; font-family: var(--st-font-display); font-size: var(--st-fs-28); line-height: 1.2; font-weight: var(--st-w-medium); }
.st-auth__side li .st-icon { width: 28px; height: 28px; margin-top: 4px; }
.st-auth__side li { display: flex; gap: var(--st-s3); }
.st-auth__side li .st-icon { color: var(--st-balisage); }
.st-auth__main { display: flex; flex-direction: column; padding: var(--st-s6) var(--st-gutter) var(--st-s8); background: var(--st-surface); }
@media (min-width: 720px) { .st-auth__main { padding: var(--st-s10); } }
.st-auth__form { width: 100%; max-width: 420px; margin: var(--st-s10) auto auto; }
.st-auth__form h1 { margin-bottom: var(--st-s2); }
.st-auth__logo svg { height: 32px; width: auto; }
.st-divider { display: flex; align-items: center; gap: var(--st-s3); color: var(--st-text-2); font-size: var(--st-fs-14); margin: var(--st-s5) 0; }
.st-divider::before, .st-divider::after { content: ""; flex: 1; border-top: 1px solid var(--st-line); }

/* Planning : compléments */
.st-plan__cell.is-half { border-top-style: dotted; }
.st-plan--res .st-plan__grid { grid-template-rows: 52px; grid-auto-rows: minmax(104px, auto); }
.st-plan--res .st-plan__cell { border-top: 1px solid var(--st-line); }
.st-suggest .st-chip { flex: 0 1 auto; max-width: 100%; text-align: left; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 719.98px) {
  .st-plan--res .st-plan__grid { grid-template-columns: 112px repeat(var(--st-days, 5), minmax(140px, 1fr)); }
  .st-plan__res { flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--st-s2); }
  .st-plan__res .st-avatar { display: none; }
  .st-plan__res strong { white-space: normal; }
  .st-plan-toolbar__period { width: 100%; font-size: var(--st-fs-22); }
}
@media (min-width: 1024px) { .st-auth__main > .st-auth__logo { visibility: hidden; } }