/*
 * 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);
  --field: oklch(0.95 0.005 157.5 / 0.03);
  --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; line-height: 1.5; letter-spacing: 0; }

/* ---- Titres : sobres, poids moyen ---- */
.content > h1 { margin: 0 0 18px; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.content h2 { margin: 24px 0 10px; font-size: 18px; font-weight: 500; }
.content h3 { margin: 20px 0 8px; font-size: 16px; font-weight: 500; }
.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 { min-height: 60px; margin-bottom: 20px;}
.brand-link { font-size: 14px; font-weight: 500; }
.brand-mark { width: 28px; height: 28px; flex-basis: 28px; border-radius: 6px; font-size: 13px; }
.sidenav { gap: 1px; }
.sidenav .nav-link { gap: 10px; min-height: 30px; padding: 5px 9px; border-radius: 6px; font-size: 14px; font-weight: 400; }
.sidenav .nav-link.is-active { font-weight: 400; }
.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: 400; }
.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: 11px; 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: 400;
  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: 400;
}

.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; }

.content label { gap: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 400; 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: 400; }
.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: 400; }

/* ---- 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: 400; letter-spacing: 0; text-transform: none; }
.content .wg-sort { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; 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: 11px; }

/* ---- 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: 400; 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: 500; }
.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: 400; letter-spacing: 0; text-transform: none; }
.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 120px; min-width: 110px; }
.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: 400; 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: 400; }
.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: 400; }
.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; }
.wg-panel button:not([class]) { margin-top: 8px; }
.wg-panel h2 { margin: 0 0 16px; font-size: 16px; font-weight: 500; }

/* É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: 13px; }
#regulatis-lock .lock-pin { 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: 13px; }
#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; }