/*
 * Habillage « Supabase » (D60) : mêmes jetons, mêmes tailles et mêmes composants que le Studio Supabase.
 * Valeurs relevées dans le dépôt public supabase/supabase (packages/ui : Button.tsx, constants.ts, themes/dark.css, themes/light.css).
 * - Texte : 12 px (text-xs) et 14 px (text-sm) ; boutons : tiny 26 px / 12 px (défaut), small 34 px / 14 px ; contrôles arrondis de 6 px.
 * - Couleurs en oklch (teinte 157,5), vert de marque hsl(153 60% 53%), accent de texte en vert marque (sombre) ou brand-600 (clair).
 * Chargé en dernier : il l'emporte sur custom-front.css, kit.css et grid.css à spécificité égale.
 */
html { font-size: 14px; }

:root,
:root[data-theme="light"] {
  --bg: oklch(0.995 0 157.5);
  --surface: oklch(0.995 0 157.5);
  --surface-soft: oklch(0.971 0 157.5);
  --selection: oklch(0.955 0 157.5);
  --ink: oklch(0.1 0 157.5);
  --muted: oklch(0.45 0 157.5);
  --faint: oklch(0.58 0 157.5);
  --line: oklch(0.915 0 157.5);
  --line-strong: oklch(0.86 0 157.5);
  --field: oklch(1 0 157.5);
  --btn-bg: oklch(0.995 0 157.5);
  --btn-border: oklch(0.86 0 157.5);
  --btn-hover: oklch(0.965 0 157.5);
  --brand: hsl(152.9 60% 52.9%);
  --accent: hsl(156.5 86.5% 26.1%);
  --accent-strong: hsl(156.5 86.5% 20%);
  --accent-soft: hsl(147.6 72.5% 93%);
  --accent-line: hsl(147.5 72% 80.4%);
  --primary-solid: hsl(155.3 78.4% 40%);
  --primary-solid-hover: hsl(155.3 78.4% 34%);
  --primary-fg: oklch(0.99 0.00275 157.5);
  --danger: hsl(9.9 82% 43.5%);
  --danger-solid: hsl(10.2 77.9% 53.9%);
  --danger-solid-hover: hsl(9.9 82% 43.5%);
  --danger-bg: hsl(7.1 100% 96.7%);
  --danger-line: hsl(10.4 77.1% 79.4%);
  --warning: hsl(30.3 80.3% 47.8%);
  --warn-bg: hsl(40 81.8% 97.8%);
  --warn-line: hsl(41.9 100% 81.8%);
  --warn-ink: hsl(30.3 80% 25%);
  --success: hsl(155.3 78.4% 33%);
  --side: var(--bg);
  --side-ink: oklch(0.45 0 157.5);
  --side-hover: oklch(0.965 0 157.5);
  --side-active-bg: oklch(0.945 0 157.5);
  --side-active-ink: oklch(0.1 0 157.5);
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .07);
  --shadow: 0 8px 30px rgba(0, 0, 0, .12);
  --topbar-height: 48px;
  --side-width: 232px;
  --side-width-collapsed: 56px;
  --ring: oklch(0.6 0 157.5);
}

:root[data-theme="dark"] {
  --bg: oklch(0.19 0.005 157.5);
  --surface: oklch(0.215 0.005 157.5);
  --surface-soft: oklch(0.24 0.005 157.5);
  --selection: oklch(0.27 0.005 157.5);
  --ink: oklch(0.95 0.005 157.5);
  --muted: oklch(0.72 0.005 157.5);
  --faint: oklch(0.58 0.005 157.5);
  --line: oklch(0.285 0.005 157.5);
  --line-strong: oklch(0.34 0.005 157.5);
  /* Opaque : un fond translucide laisserait voir la trame de la zone de contenu à travers les champs et les listes de choix. */
  --field: oklch(0.235 0.005 157.5);
  --btn-bg: oklch(0.26 0.005 157.5);
  --btn-border: oklch(0.36 0.005 157.5);
  --btn-hover: oklch(0.31 0.005 157.5);
  --brand: hsl(153.1 60.2% 52.7%);
  --accent: hsl(153.1 60.2% 52.7%);
  --accent-strong: hsl(154.9 59.5% 70%);
  --accent-soft: hsl(155.5 100% 9.6%);
  --accent-line: hsl(154.9 100% 19.2%);
  --primary-solid: hsl(154.9 100% 19.2%);
  --primary-solid-hover: hsl(154.9 100% 23%);
  --primary-fg: oklch(0.99 0.00275 157.5);
  --danger: hsl(9.7 85.2% 62.9%);
  --danger-solid: hsl(10.2 77.9% 53.9%);
  --danger-solid-hover: hsl(9.7 85.2% 62.9%);
  --danger-bg: hsl(10.9 23.4% 9.2%);
  --danger-line: hsl(7.9 71.6% 29%);
  --warning: hsl(38.9 100% 42.9%);
  --warn-bg: hsl(36.6 100% 8%);
  --warn-line: hsl(34.8 90.9% 21.6%);
  --warn-ink: hsl(38.9 100% 70%);
  --success: hsl(153.1 60.2% 52.7%);
  --side: var(--bg);
  --side-ink: oklch(0.72 0.005 157.5);
  --side-hover: oklch(0.235 0.005 157.5);
  --side-active-bg: oklch(0.27 0.005 157.5);
  --side-active-ink: oklch(0.95 0.005 157.5);
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 8px 30px rgba(0, 0, 0, .5);
  --ring: oklch(0.55 0.005 157.5);
}

body { font-size: 14px; font-weight: 450; line-height: 1.5; letter-spacing: 0; }

/* ---- Titres : sobres, poids moyen ---- */
.content > h1 { margin: 0 0 18px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.content h2 { margin: 24px 0 10px; font-size: 18px; font-weight: 600; }
.content h3 { margin: 20px 0 8px; font-size: 16px; font-weight: 600; }
.content h4 { margin: 18px 0 8px; font-size: 14px; font-weight: 500; }
.content p { margin: 0 0 12px; }
.content { padding: 24px clamp(20px, 3vw, 40px) 64px; max-width: none; }

/* ---- Barre latérale et bande du haut ---- */
.sidebar { padding: 8px; gap: 4px; border-right: 1px solid var(--line); }
.brand { min-height: 48px; }
.brand-link { font-size: 14px; font-weight: 500; }
.brand-mark { width: 28px; height: 28px; flex-basis: 28px; border-radius: 6px; font-size: 12px; }
.sidenav { gap: 1px; }
.sidenav .nav-link { gap: 10px; min-height: 30px; padding: 5px 9px; border-radius: 6px; font-size: 14px; font-weight: 450; }
.sidenav .nav-link.is-active { font-weight: 450; }
.ico { width: 16px; height: 16px; flex-basis: 16px; }
.topbar { min-height: 48px; background: var(--bg); gap: 10px; }
.icon-btn { width: 28px; height: 28px; border-radius: 6px; }
.breadcrumb ol { font-size: 14px; }
.breadcrumb [aria-current="page"] { font-weight: 450; }
.clock { font-size: 12px; }
.profile-btn { min-height: 28px; padding: 2px 8px 2px 3px; border-radius: 999px; font-size: 12px; background: transparent; border-color: var(--line); }
.avatar { width: 22px; height: 22px; font-size: 12px; font-weight: 500; color: oklch(0.15 0 0); }
.profile-menu { border-radius: 8px; padding: 4px; min-width: 200px; }
.profile-menu a { min-height: 30px; padding: 5px 8px; border-radius: 6px; font-size: 14px; }
.profile-menu-head { font-size: 12px; }
.notification-center__toggle { width: 28px; height: 28px; border-radius: 6px; }
.notification-center__badge { top: -2px; right: -2px; min-width: 16px; font-size: 10px; line-height: 16px; }
.notification-center__panel { border-radius: 8px; }

/* ---- Boutons : variantes Supabase (tiny par défaut : 26 px, 12 px, rayon 6 px) ---- */
.content button,
button.btn-secondaire,
button.btn-primary,
button.btn-danger-plein,
button.btn-discret,
.wg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 10px;
  color: var(--ink);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  box-shadow: var(--shadow-raised);
  font: inherit;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.33;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.content button:hover:not(:disabled),
button.btn-secondaire:hover:not(:disabled),
.wg-btn:hover:not(:disabled) { color: var(--ink); background: var(--btn-hover); border-color: var(--line-strong); }

.content button.btn-primary,
button.btn-primary,
.wg-btn-primary {
  color: var(--primary-fg);
  background: var(--primary-solid);
  border-color: transparent;
  font-weight: 450;
}

.content button.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled),
.wg-btn-primary:hover:not(:disabled) { color: var(--primary-fg); background: var(--primary-solid-hover); border-color: transparent; filter: none; }

.content button.btn-danger,
button.btn-danger-plein,
.wg-btn-danger { color: #fff; background: var(--danger-solid); border-color: transparent; }

.content button.btn-danger:hover:not(:disabled),
button.btn-danger-plein:hover:not(:disabled),
.wg-btn-danger:hover:not(:disabled) { color: #fff; background: var(--danger-solid-hover); border-color: transparent; filter: none; }

.content button.btn-discret,
button.btn-discret { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.content button.btn-discret:hover:not(:disabled),
button.btn-discret:hover:not(:disabled) { color: var(--ink); background: var(--selection); }

.content button:focus-visible,
button.btn-primary:focus-visible,
.wg-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.content button:disabled,
.wg-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Taille « small » (34 px / 14 px) : actions principales des modales et des formulaires */
.modale-pied button,
.modale-corps-court + .modale-pied button,
.login-submit { min-height: 34px; padding: 8px 12px; font-size: 14px; line-height: 1; }

/* ---- Champs ---- */
.content input,
.content select,
.content textarea,
.wg input,
.wg select,
.wg textarea,
.wg-dialog input,
.wg-dialog select,
.wg-dialog textarea,
.wg-panel input,
.wg-panel select,
.wg-panel textarea {
  min-height: 32px;
  padding: 6px 10px;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
}

.content textarea,
.wg textarea { min-height: 84px; }

.content input:focus,
.content select:focus,
.content textarea:focus,
.wg input:focus,
.wg select:focus { border-color: var(--ring); outline: 2px solid color-mix(in oklch, var(--ring) 35%, transparent); outline-offset: 0; }

/* Liste déroulante des choix : fond plein, jamais celui de la page. */
.content select option,
.wg select option,
.wg-dialog select option,
.wg-panel select option { color: var(--ink); background: var(--surface); }

.content label { gap: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 450; color: var(--ink); }
.content input::placeholder,
.wg input::placeholder { color: var(--faint); }

/* ---- Onglets : soulignement neutre ---- */
.wg-tabs { gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.content .wg-tab,
.content button.wg-tab { min-height: 36px; padding: 8px 12px; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0; box-shadow: none; font-size: 14px; font-weight: 450; }
.content .wg-tab:hover:not(:disabled) { color: var(--ink); background: transparent; border-bottom-color: var(--line-strong); }
.content .wg-tab[aria-selected="true"] { color: var(--ink); border-bottom: 1px solid var(--ink); font-weight: 450; }

/* ---- Tableaux ---- */
:root { --wg-font-size: 12px; --wg-row-height: 34px; --wg-radius: 8px; }
.wg { background: var(--surface); border-color: var(--line); }
.wg-toolbar { padding: 10px 12px; gap: 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.wg-table { font-size: 12px; }
.wg-table thead th { height: 32px; color: var(--muted); background: var(--surface-soft); font-size: 12px; font-weight: 450; letter-spacing: .04em; text-transform: uppercase; }
.content .wg-sort { font-size: 12px; font-weight: 450; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); box-shadow: none; }
.wg-table th, .wg-table td { padding: 0 12px; border-bottom: 1px solid var(--line); }
.wg-table tbody tr:hover { background: var(--surface-soft); }
.wg-table tbody tr[aria-selected="true"] { background: var(--selection); }
.wg-footer { padding: 8px 12px; background: var(--surface); font-size: 12px; }
.wg-state { color: var(--muted); }
.wg-badge { padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* ---- Modales ---- */
.modale-boite,
.wg-dialog,
.wg-panel { border-radius: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wg-panel { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5), var(--shadow); }
.modale-voile,
.wg-overlay { background: rgba(0, 0, 0, .5); backdrop-filter: none; }
.modale-entete { padding: 12px 12px 12px 16px; }
.modale-zone .modale-titre { font-size: 14px; font-weight: 500; }
.modale-corps { padding: 16px; }
.modale-corps h4 { margin: 16px 0 6px; color: var(--muted); font-size: 12px; font-weight: 450; letter-spacing: 0; text-transform: none; }
.modale-pied { padding: 12px 16px; }
.wg-dialog h2,
.wg-panel h2,
.wg-panel h3 { font-size: 16px; font-weight: 600; }
.modale-pictogramme { width: 40px; height: 40px; }

/* ---- Listes, tableaux simples, annonces, jetons divers ---- */
.content ul:not([class]) > li { padding: 8px 12px; border-radius: 6px; font-size: 14px; }
.content table { border-radius: 6px; font-size: 14px; }
.content th { font-size: 12px; font-weight: 450; letter-spacing: .04em; }
.content a { color: var(--accent); text-decoration: none; }
.content a:hover { text-decoration: underline; }
.annonce { border-radius: 6px; font-size: 14px; }
.toast { border-radius: 6px; font-size: 14px; }
#sync-pill { padding: 4px 10px; font-size: 12px; box-shadow: none; }
.login-card { border-radius: 8px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 20px; font-weight: 500; }

/* ---- Barre d'outils de grille compacte (une ligne : recherche, filtres, actions) ---- */
.content .wg-toolbar .wg-search { flex: 1 1 220px; min-width: 180px; }
.content .wg-toolbar .wg-filters { flex: 2 1 320px; width: auto; align-items: center; }
.content .wg-filters .wg-filter { flex: 1 1 180px; min-width: 170px; }
.wg-toolbar .wg-export,
.wg-toolbar .wg-clear { margin-left: auto; }
.wg-toolbar .wg-clear { margin-left: 0; }

/* La pastille de synchronisation ne masque plus la pagination */
.wg-footer { padding-right: 160px; }

/* Champs pleine largeur dans les modales */
.modale-corps label { max-width: none; }
.modale-corps input,
.modale-corps select,
.modale-corps textarea { max-width: none; width: 100%; }
.modale-corps input[type="checkbox"],
.modale-corps input[type="radio"] { width: auto; }

/* Formulaire en modale : deux colonnes (titres, messages et actions sur toute la largeur) */
.modale-corps.modale-formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-content: start; }
.modale-corps.modale-formulaire > h4,
.modale-corps.modale-formulaire > p,
.modale-corps.modale-formulaire > .modale-actions,
.modale-corps.modale-formulaire > label:has(textarea) { grid-column: 1 / -1; }
@media (max-width: 700px) { .modale-corps.modale-formulaire { grid-template-columns: minmax(0, 1fr); } }

/* Actions d'une modale toujours visibles en bas, même quand le contenu défile */
.modale-corps .modale-actions { position: sticky; bottom: -16px; z-index: 1; margin-bottom: -16px; padding-bottom: 16px; background: var(--surface); }

/* Barre d'actions de la grille (actions sur la ligne sélectionnée) */
.wg-actionbar { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.wg-toolbar .wg-export { margin-left: 0; }
.wg-table tbody tr { cursor: pointer; }
.wg-table tbody tr[aria-selected="true"] td { background: var(--selection); }
.wg-actions .wg-btn { min-height: 24px; padding: 2px 10px; }
.wg .wg-btn:disabled { opacity: .45; }

/* Tableau : les cellules passent à la ligne (rien n'est coupé) et la colonne d'action reste visible à droite */
.wg-table th, .wg-table td { white-space: normal; vertical-align: middle; }
.wg-table td { padding-top: 6px; padding-bottom: 6px; }
.wg-table th.wg-actions, .wg-table td.wg-actions { position: sticky; right: 0; z-index: 1; width: 1%; white-space: nowrap; background: var(--surface); box-shadow: -1px 0 0 var(--line); }
.wg-table thead th.wg-actions { background: var(--surface-soft); }
.wg-table tbody tr:hover td.wg-actions { background: var(--surface-soft); }
.wg-table tbody tr[aria-selected="true"] td.wg-actions { background: var(--selection); }
.wg-table th.wg-select, .wg-table td.wg-select { width: 36px; }

/* Panneaux, actions de fiche, filtres de timeline */
.content button.panneau-bascule { justify-content: flex-start; background: transparent; border: 0; box-shadow: none; font-size: 14px; font-weight: 500; }
.content button.panneau-bascule:hover:not(:disabled) { background: var(--surface-soft); border: 0; }
.content .fiche-filtres label { display: flex; margin: 0; font-size: 12px; font-weight: 450; color: var(--muted); }
.content .fiche-filtres input { width: auto; min-height: 0; }
.fiche-actions { gap: 6px; }
.fiche-action small { display: none; }
.wg-actions .wg-btn { min-height: 26px; padding: 4px 10px; }
.chaine-libelle, .chaine-bouton { font-size: 12px; line-height: 1.4; }

/* Connexion : largeur bornée (la règle .content { max-width: none } ne doit pas l'écraser) */
.login-page .login-card.content { width: 100%; max-width: 400px; padding: 28px; }

/* Filtre dans une barre d'actions de page : libellé et champ sur une ligne, à droite */
.page-actions label { display: flex; align-items: center; gap: 8px; max-width: none; margin: 0 0 0 auto; color: var(--muted); }
.page-actions select { width: auto; min-width: 180px; }

/* Colonne d'action des tableaux : le bouton garde sa taille et son libellé sur une ligne */
.wg-table td.wg-actions .wg-btn,
.wg-table td.wg-actions button { flex: 0 0 auto; width: auto; white-space: nowrap; }
.wg-table td.wg-actions { vertical-align: middle; }
.wg-table th.wg-actions,
.wg-table td.wg-actions { display: table-cell; width: 1%; min-width: max-content; }
.wg-table td.wg-actions .wg-btn { display: inline-flex; margin-right: 4px; }

/* Une modale posée dans le <body> (hors .content) reçoit le même habillage de formulaire */
.modale-zone label { display: grid; gap: 6px; max-width: none; margin: 0 0 14px; color: var(--ink); font-size: 14px; font-weight: 450; }
.modale-zone label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; }
.modale-zone input,
.modale-zone select,
.modale-zone textarea { width: 100%; min-height: 32px; padding: 6px 10px; color: var(--ink); background: var(--field); border: 1px solid var(--btn-border); border-radius: 6px; font: inherit; font-size: 14px; }
.modale-zone input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--accent); }
.modale-zone input[type="file"] { padding: 4px; }
.modale-zone input:focus,
.modale-zone select:focus,
.modale-zone textarea:focus { border-color: var(--ring); outline: 2px solid color-mix(in oklch, var(--ring) 35%, transparent); outline-offset: 0; }
.modale-zone button:not([class]) { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; color: var(--ink); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; }

/* ---- Boîtes de dialogue historiques (.wg-dialog, .wg-panel) : champs, boutons et en-tête au même style que les modales du kit ---- */
.wg-dialog { width: min(92vw, 600px); max-height: 88vh; padding: 0; overflow-y: auto; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); font-size: 14px; }
.wg-dialog > h2 { margin: 0; padding: 14px 52px 14px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--line); }
.wg-dialog > :not(h2):not(.dialogue-fermer) { margin-left: 20px; margin-right: 20px; }
.wg-dialog > h2 + * { margin-top: 16px; }
.wg-dialog > :last-child { margin-bottom: 20px; }
.wg-dialog .dialogue-fermer { position: absolute; top: 8px; right: 12px; }
.wg-dialog { position: relative; }
.wg-dialog label,
.wg-panel label { display: grid; gap: 6px; max-width: none; margin: 0 0 14px; color: var(--ink); font-size: 14px; font-weight: 450; }
.wg-dialog label:has(> input[type="checkbox"]),
.wg-panel label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; }
.wg-dialog input,
.wg-dialog select,
.wg-dialog textarea,
.wg-panel input,
.wg-panel select,
.wg-panel textarea { width: 100%; max-width: none; min-height: 32px; padding: 6px 10px; color: var(--ink); background: var(--field); border: 1px solid var(--btn-border); border-radius: 6px; font: inherit; font-size: 14px; line-height: 1.4; }
.wg-dialog input[type="checkbox"],
.wg-panel input[type="checkbox"],
.wg-dialog input[type="radio"] { width: auto; min-height: 0; accent-color: var(--accent); }
.wg-dialog textarea,
.wg-panel textarea { min-height: 84px; resize: vertical; }
.wg-dialog button:not([class]),
.wg-panel button:not([class]) { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 4px 10px; margin: 0 6px 6px 0; color: var(--ink); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 6px; box-shadow: var(--shadow-raised); font: inherit; font-size: 12px; cursor: pointer; }
.wg-dialog button:not([class]):hover,
.wg-panel button:not([class]):hover { background: var(--btn-hover); border-color: var(--line-strong); }
.wg-dialog .btn-primary,
.wg-dialog .btn-danger,
.wg-dialog .btn-secondaire { margin: 0 6px 6px 0; }
.wg-dialog .dialogue-fermer { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; margin: 0; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 20px; line-height: 1; cursor: pointer; }
.wg-dialog .dialogue-fermer:hover { color: var(--ink); background: var(--surface-soft); }
.wg-dialog > .dialogue-fermer + * { margin-top: 16px; }
.wg-dialog > h2 + :not(.dialogue-fermer) { margin-top: 16px; }
/* Pied des boîtes historiques : boutons à droite, même hauteur, séparés du contenu comme `.modale-pied` */
.wg-dialog > div.wg-pied { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 20px 0 0; padding: 14px 20px; border-top: 1px solid var(--line); }
.wg-dialog .wg-pied button { margin: 0; }
.wg-panel .wg-field { display: grid; gap: 6px; margin-bottom: 14px; }
.wg-panel .wg-field label { margin: 0; }
.wg-panel .wg-field > label + * { margin: 0; }
/* Champ à cases à cocher : liste simple, une option par ligne */
.wg-panel .wg-checkboxes { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.wg-panel .wg-checkboxes label { display: flex; align-items: center; gap: 8px; margin: 0; }
.wg-panel button:not([class]) { margin-top: 8px; }
.wg-panel h2 { margin: 0 0 16px; font-size: 18px; font-weight: 600; }

/* Écran du code PIN */
#regulatis-lock { background: rgba(10, 10, 10, .72); backdrop-filter: blur(3px); font-family: inherit; }
#regulatis-lock .lock-form { width: min(92vw, 380px); padding: 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
#regulatis-lock .lock-title { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
#regulatis-lock .lock-help { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
/* Retour d'une action dans un dialogue de procédure : en cours, réussi, refusé. */
.wg-dialog [role="status"][data-ton] { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-soft); color: var(--ink); }
.wg-dialog [role="status"][data-ton="ok"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); }
.wg-dialog [role="status"][data-ton="erreur"] { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.wg-dialog [role="status"][data-ton="info"] { color: var(--muted); }
.wg-dialog button:disabled { opacity: .55; cursor: wait; }

/* Champ texte masqué par CSS (et non type="password") : le gestionnaire de mots de passe du navigateur ne doit pas le traiter, ni signaler un PIN « divulgué ». */
#regulatis-lock .lock-pin { -webkit-text-security: disc; width: 100%; min-height: 40px; padding: 8px 12px; color: var(--ink); background: var(--field); border: 1px solid var(--btn-border); border-radius: 6px; font-size: 18px; letter-spacing: .3em; text-align: center; }
#regulatis-lock .lock-pin:focus { border-color: var(--ring); outline: 2px solid color-mix(in oklch, var(--ring) 35%, transparent); outline-offset: 0; }
#regulatis-lock .lock-error { min-height: 1.4em; margin: 8px 0; color: var(--danger); font-size: 12px; }
#regulatis-lock .lock-btn { min-height: 34px; padding: 8px 14px; color: var(--primary-fg); background: var(--primary-solid); border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 14px; cursor: pointer; }
#regulatis-lock .lock-btn:hover { background: var(--primary-solid-hover); }
#regulatis-lock .lock-btn-forgot { margin-left: 8px; color: var(--ink); background: var(--btn-bg); border-color: var(--btn-border); }
#regulatis-lock .lock-btn-forgot:hover { background: var(--btn-hover); }

/* Panneau d'édition de grille : boutons toujours visibles en bas de la modale */
.wg-panel-pied { position: sticky; bottom: -24px; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; margin: 8px -24px -24px; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--line); }
.wg-panel-pied button { margin: 0; }

/* Fiche d'un dossier : carte « Prochaine action » et phases */
.fiche-prochaine { border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; margin: 12px 0; display: grid; gap: 8px; justify-items: start; }
.fiche-prochaine h3 { margin: 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.fiche-prochaine .fiche-prochaine-libelle { margin: 0; font-size: 16px; font-weight: 500; }
.fiche-prochaine p, .fiche-prochaine small { margin: 0; }
.fiche-phases { margin: 0; }

/* Nouvelle plainte : suggestion de la cible depuis le courrier */
.prefill-cible { display: grid; gap: 8px; }
.prefill-cible .prefill-message { margin: 0; font-size: 12px; opacity: .8; }
.prefill-cible .prefill-candidats { display: grid; gap: 6px; }
.prefill-cible .prefill-candidats label { display: flex; align-items: center; gap: 8px; margin: 0; }

/* Organigramme (page Mon compte) : graphique descendant, cartes reliées par des traits ; panneau de gestion sous le graphique. */
.organigramme-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.organigramme-outils { display: flex; gap: 6px; }
.organigramme-etat { min-height: 1.5em; margin: 6px 0; color: var(--accent-strong); font-weight: 500; }
.organigramme-etat-erreur { color: var(--danger); }

.org-defilement { overflow-x: auto; padding: 8px 4px 16px; }
.org-arbre { --org-trait: var(--line-strong); --org-hauteur: 28px; display: flex; justify-content: center; min-width: max-content; }
.org-arbre ul { display: flex; justify-content: center; margin: 0; padding: var(--org-hauteur) 0 0; list-style: none; position: relative; }
.org-arbre > ul { padding-top: 0; }
.org-arbre li { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--org-hauteur) 10px 0; }
.org-arbre > ul > li { padding-top: 0; }
/* traits horizontaux entre frères, puis trait vertical vers chaque carte */
.org-arbre li::before, .org-arbre li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: var(--org-hauteur); border-top: 2px solid var(--org-trait); }
.org-arbre li::after { right: auto; left: 50%; border-left: 2px solid var(--org-trait); }
.org-arbre > ul > li::before, .org-arbre > ul > li::after { display: none; }
.org-arbre li:only-child::before { display: none; }
.org-arbre li:only-child::after { width: 0; border-top: 0; }
.org-arbre li:first-child::before, .org-arbre li:last-child::after { border: 0 none; }
.org-arbre li:last-child::before { border-right: 2px solid var(--org-trait); border-radius: 0 8px 0 0; }
.org-arbre li:first-child::after { border-radius: 8px 0 0 0; }
/* trait vertical qui descend de la carte parente vers la rangée de ses enfants */
.org-arbre ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: var(--org-hauteur); border-left: 2px solid var(--org-trait); }

.organigramme .org-carte {
  display: grid; gap: 4px; justify-items: center; text-align: center; width: 190px; padding: 10px 12px; cursor: pointer;
  color: var(--ink); font: inherit; background: var(--surface); border: 1px solid var(--line-strong); border-top: 4px solid var(--org-couleur, var(--muted));
  border-radius: var(--radius-lg); box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 10%, transparent);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.organigramme .org-carte:hover { box-shadow: 0 4px 12px color-mix(in oklch, var(--ink) 16%, transparent); transform: translateY(-1px); }
.organigramme .org-carte:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }
.organigramme .org-selectionnee { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 4px 12px color-mix(in oklch, var(--ink) 14%, transparent); }
.organigramme .org-presidence { --org-couleur: var(--accent-strong); }
.organigramme .org-college { --org-couleur: oklch(0.55 0.14 25); }
/* deux racines (administration, collège) : la seconde est séparée par un trait en pointillé, ce n'est pas la même ligne hiérarchique */
.organigramme .org-arbre > ul { align-items: flex-start; }
.organigramme .org-arbre > ul > li + li { margin-left: 28px; padding-left: 28px; border-left: 2px dashed var(--line-strong); }
.organigramme .org-secretariat { --org-couleur: oklch(0.6 0.12 250); }
.organigramme .org-direction { --org-couleur: var(--accent); }
.organigramme .org-service { --org-couleur: oklch(0.65 0.12 75); }
.organigramme .org-equipe { --org-couleur: oklch(0.62 0.1 320); }
.organigramme .org-cellule { --org-couleur: var(--muted); border-style: dashed; border-top-style: solid; }
.organigramme .org-inactive { opacity: .55; }
.org-type { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.org-libelle { font-weight: 600; line-height: 1.25; }
.org-responsable { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.org-initiales { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 10px; font-weight: 700; }
.org-vacant { color: var(--faint); font-style: italic; }
.org-effectif { font-size: 12px; color: var(--muted); }
.organigramme .org-repli { margin-top: 4px; padding: 0 8px; font: inherit; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.organigramme .org-repli:hover { color: var(--ink); border-color: var(--line-strong); }

/* une carte qui vient d'être ajoutée ou modifiée : halo qui s'estompe */
@keyframes org-halo { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 70%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in oklch, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.organigramme .org-nouvelle { animation: org-halo 1.6s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .organigramme .org-nouvelle { animation: none; outline: 3px solid var(--accent); } .organigramme .org-carte { transition: none; } }

.org-detail { margin-top: 12px; padding: 14px 16px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.org-detail-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 10px; }
.org-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.org-sous-titre { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.org-membres { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

@media print { .org-defilement { overflow: visible; } .org-repli, .org-detail-actions { display: none; } }

/* Trame de fond de la zone de contenu : rayures diagonales très discrètes (3 % en clair, 5 % en foncé). Les cartes, tableaux et boîtes
   gardent leur fond uni : le texte ne se pose jamais sur la trame. Retirée à l'impression. */
:root { --trame: color-mix(in oklch, var(--ink) 3%, transparent); }
:root[data-theme="dark"] { --trame: color-mix(in oklch, var(--ink) 5%, transparent); }
.main > .content { background-image: repeating-linear-gradient(135deg, var(--trame) 0 1px, transparent 1px 14px); }
@media print { .main > .content { background-image: none; } }

/* Sécurité des connexions : avertissement de fin de plage horaire, page Administration > Sécurité, demande de dérogation sur la page de connexion. */
.securite-avertissement { position: fixed; left: 50%; bottom: 16px; z-index: 60; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--warning-line, var(--line-strong)); border-left: 4px solid var(--warning, #d97706); border-radius: var(--radius-lg); box-shadow: 0 6px 24px color-mix(in oklch, var(--ink) 18%, transparent); }
.securite-etat { min-height: 1.5em; margin: 6px 0; color: var(--accent-strong); font-weight: 500; }
.securite-etat-erreur { color: var(--danger); }
.securite-form { display: grid; gap: 10px; max-width: 640px; }
.securite-jours { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.securite-jour { display: inline-flex; align-items: center; gap: 6px; }
.securite-journal { margin-top: 10px; }
.login-derogation { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.login-derogation h2 { margin: 0 0 6px; font-size: 16px; }
.login-derogation textarea { width: 100%; }
@media print { .securite-avertissement { display: none; } }


/* Administration > Modèles : variables insérables, aperçu isolé. */
.modeles label { display: grid; gap: 4px; margin-bottom: 10px; }
.modeles-variables { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.modeles-variables button { font-family: ui-monospace, 'Source Code Pro', Menlo, monospace; font-size: 12px; }
.modeles-variables .modeles-obligatoire { font-weight: 700; border-color: var(--accent-line, var(--line-strong)); }
.modeles-apercu { margin-top: 12px; }
.modeles-cadre { width: 100%; height: 520px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.modale-boite textarea, .modale-boite input[name="objet"] { width: 100%; }

/* Fiche éditeur : onglet Équipe */
.fiche-equipe { display: flex; flex-direction: column; gap: 24px; }
.equipe-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.equipe-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.equipe-resultats { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.equipe-creation { margin: 12px 0; }
.equipe-choisi { font-weight: 600; }
.actions-ligne { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.imputation-detail { display: block; font-size: 12px; opacity: .75; }
.wg-checkboxes-recherche { width: 100%; margin-bottom: 4px; }

/* Suggestions de saisie (datalist) : jamais affichées dans la mise en page, le navigateur les montre dans sa liste. */
datalist { display: none; }

/* Formulaires en grille : chaque champ garde sa hauteur naturelle, aligné en haut de sa case (sans cela, un champ voisin plus haut étire le champ et son libellé). */
.modale-corps.modale-formulaire,
.grille-champs { align-items: start; }

/* Un élément masqué (attribut hidden) le reste, quel que soit son affichage (grille des libellés de formulaire). */
[hidden] { display: none !important; }

/* ---- Tableaux adaptés à l'écran ----
   Grand écran : valeurs courtes (dates, nombres, heures) sur une ligne, textes qui passent à la ligne, colonnes secondaires (.wg-low) masquées quand la place manque.
   Petit écran : chaque ligne devient une carte « libellé : valeur » ; plus de défilement horizontal. */
.wg-table th, .wg-table td { padding-left: 10px; padding-right: 10px; }
.wg-table td[data-type="date"], .wg-table td[data-type="datetime"], .wg-table td[data-type="number"], .wg-table td[data-type="time"], .wg-table td[data-type="boolean"],
.wg-table th[data-type="date"], .wg-table th[data-type="datetime"], .wg-table th[data-type="number"], .wg-table th[data-type="time"], .wg-table th[data-type="boolean"] { white-space: nowrap; }
.wg-wrap { max-width: 100%; }
@media (max-width: 1200px) { .wg-table .wg-low { display: none; } }
@media (max-width: 720px) {
  .wg-wrap { max-height: none; overflow: visible; border-bottom: 0; background: transparent; }
  .wg-table, .wg-table tbody, .wg-table tr { display: block; width: 100%; }
  .wg-table thead { display: none; }
  .wg-table tbody tr { margin: 0 0 8px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
  .wg-table tbody tr[aria-selected="true"] { background: var(--selection); }
  .wg-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: auto; height: auto; padding: 4px 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  .wg-table td[data-label]::before { content: attr(data-label); flex: 0 0 38%; max-width: 38%; color: var(--muted); font-size: 12px; text-align: left; text-transform: uppercase; letter-spacing: .04em; }
  .wg-table td.wg-select { display: none; }
  .wg-table .wg-low { display: flex; }
  .wg-table td.wg-actions, .wg-table tbody tr:hover td.wg-actions, .wg-table tbody tr[aria-selected="true"] td.wg-actions { position: static; display: block; width: auto; padding-top: 8px; text-align: left; background: transparent; box-shadow: none; }
  .wg-toolbar { flex-wrap: wrap; }
  .content .wg-toolbar .wg-search, .content .wg-filters .wg-filter { flex: 1 1 100%; min-width: 0; }
  .wg-footer { flex-wrap: wrap; gap: 8px; }
}