/*
 * Styles de l'application — mobile d'abord. Règles : docs/design/DESIGN-SYSTEM.md.
 * Couleurs, ombres, durées : uniquement var(--…) définies dans tokens.css.
 * Points de rupture : tablette 48em, poste 64em (pointeur fin : @media (pointer: fine)).
 *
 * Sommaire
 *   1. Base            6. Boutons            11. Toasts et dialogue
 *   2. En-tête         7. Formulaires        12. Jauge « ligne de charge »
 *   3. Mise en page    8. Tableaux           13. Tableau de bord (T5)
 *   4. Fil d'Ariane    9. Pastilles d'état   14. Authentification
 *   5. Titres de page 10. Messages, vides    15. Mouvement et préférences
 */

/* ===== 1. Base ===== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-5); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-surface);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-lead); }
p { margin: 0 0 var(--space-3); }

a { color: var(--color-action); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Focus clavier visible partout */
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: 2px;
}

/* Chiffres : alignés en colonnes partout où ils comptent */
.num, .figure, .data-table td, .summary dd, .gauge__legend { font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 50;
  padding: var(--space-2) var(--space-3);
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  color: var(--color-action);
  border: 2px solid var(--color-action);
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Barre de progression Turbo : couleur de la charte (sinon bleu par défaut de Turbo) */
.turbo-progress-bar { height: 3px; background: var(--color-action); }

/* ===== 2. En-tête ===== */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  view-transition-name: en-tete;
}
.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand account" "nav nav";
  align-items: center;
  column-gap: var(--space-3);
}
.site-header__brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  color: var(--color-text);
  text-decoration: none;
  min-width: 0;
}
.site-header__logo { display: block; height: 2.25rem; width: auto; flex: none; }
.site-header__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-small);
  line-height: var(--line-height-tight);
  margin: 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border);
}
.site-header__title span { display: block; font-weight: 400; color: var(--color-text-muted); }
/* Téléphone : le logo suffit à identifier l'application ; le titre revient dès 30em. */
@media (max-width: 29.99em) { .site-header__title { display: none; } }
/* Conteneur des navigations : transparent pour la grille sur téléphone. */
.site-header__nav { display: contents; }

.primary-nav { grid-area: nav; margin: 0 calc(-1 * var(--space-3)); overflow-x: auto; scrollbar-width: none; }
.primary-nav ul { list-style: none; margin: 0; padding: 0 var(--space-3); display: flex; gap: var(--space-1); }
.primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: 0;
  height: 3px;
  background: var(--color-action);
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-out);
}
.primary-nav a:hover::after { transform: scaleX(0.4); }
.primary-nav a[aria-current="page"] { color: var(--color-action); }
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Menu du compte : <details> natif, fermé au clic extérieur par le contrôleur « disclosure ». */
.account-menu { grid-area: account; position: relative; }
.account-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--font-size-small);
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::after {
  content: "";
  width: 0.45em; height: 0.45em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out);
}
.account-menu[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.account-menu > summary:hover { border-color: var(--color-border-strong); background: var(--color-surface-alt); }
.account-menu__name { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  width: min(18rem, calc(100vw - 2 * var(--space-3)));
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
  display: grid;
  gap: var(--space-2);
  transform-origin: top right;
  animation: pop-in var(--duration-base) var(--ease-out);
}
.account-menu__who { margin: 0 0 var(--space-1); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.account-menu__who strong { display: block; }
.account-menu__who span { font-size: var(--font-size-small); color: var(--color-text-muted); }
.account-menu__panel a { display: flex; align-items: center; min-height: var(--touch-target); }
.account-menu__panel .btn { width: 100%; }

/* ===== 3. Mise en page ===== */

.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-6);
  view-transition-name: contenu;
}
.site-main:focus { outline: none; }

.site-footer {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.site-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-3); }
.site-footer p { margin: 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.site-footer__version { font-variant-numeric: tabular-nums; }
.site-footer__version a { display: inline-flex; align-items: center; min-height: var(--touch-target); }

/* Page « Nouveautés » : journal des versions rendu par ChangelogRenderer (h1 à h3, ul, p, strong, code) */
.changelog { max-width: var(--prose-max); }
.changelog h1 { display: none; }
.changelog h2 { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.changelog h2:first-of-type { margin-top: var(--space-4); }
.changelog h3 { margin: var(--space-3) 0 var(--space-1); font-size: var(--font-size-lead); }
.changelog ul { padding-left: var(--space-4); }
.changelog li { margin-bottom: var(--space-2); }
.changelog code { font-family: var(--font-mono); font-size: var(--font-size-small); background: var(--color-surface-sunken); padding: 0 var(--space-1); border-radius: var(--radius-xs); }

/* Administration : barre latérale (poste) / bandeau défilant (téléphone) */
.admin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.admin__nav {
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-3)) 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
}
.admin__nav-title { margin: 0; font-family: var(--font-heading); font-weight: 700; flex: none; }
.admin__nav-title a,
.admin__menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.admin__menu { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.admin__menu a:hover, .admin__nav-title a:hover { background: var(--color-action-soft); }
.admin__menu a[aria-current="page"] { background: var(--color-action); color: var(--color-action-text); font-weight: 700; }
.admin__content { min-width: 0; }
.admin__content > h2 { margin-top: var(--space-5); }
.panel > h2:first-child { margin-top: 0; }

/* Section de page (fiche) */
.section { margin-top: var(--space-5); }
.section__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.section__header h2 { margin: 0; }
.panel {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-surface);
}
.panel--danger { border-color: var(--color-danger); border-left-width: 4px; }
.panel > :last-child { margin-bottom: 0; }

/* Sommaire (accueil, accueil d'administration) : une liste lisible, pas une grille de cartes */
.index-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; border-top: 1px solid var(--color-border); }
.index-list li { position: relative; border-bottom: 1px solid var(--color-border); }
.index-list a {
  display: block;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color var(--duration-fast), box-shadow var(--duration-fast);
}
.index-list a::after {
  content: "";
  position: absolute;
  right: var(--space-3); top: 50%;
  width: 0.5rem; height: 0.5rem;
  border-top: 2px solid var(--color-action); border-right: 2px solid var(--color-action);
  transform: translateY(-50%) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out);
}
.index-list a:hover { background: var(--color-action-soft); box-shadow: inset 3px 0 0 var(--color-action); }
.index-list a:hover::after { transform: translate(3px, -50%) rotate(45deg); }
.index-list__title { display: block; font-family: var(--font-heading); font-weight: 700; font-size: var(--font-size-lead); color: var(--color-action); }
.index-list__text { display: block; color: var(--color-text-muted); font-size: var(--font-size-small); }

/* Fiche : paires libellé / valeur */
.summary { display: grid; gap: 0; margin: 0 0 var(--space-4); border-top: 1px solid var(--color-border); }
.summary > div { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.summary dt { font-size: var(--font-size-small); color: var(--color-text-muted); }
.summary dd { margin: 0; }

.page-note { max-width: var(--prose-max); color: var(--color-text-muted); font-size: var(--font-size-small); }
.back-link { margin-top: var(--space-5); }
.back-link a::before { content: "‹ "; }
.link-list { padding-left: var(--space-4); }
.link-list li { margin-bottom: var(--space-2); }
.link-list a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.inline-form { display: inline; margin: 0; }
.actions-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ===== 4. Fil d'Ariane ===== */

.breadcrumb { margin-bottom: var(--space-2); font-size: var(--font-size-small); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--color-text-muted); }
.breadcrumb li + li::before {
  content: "";
  width: 0.35rem; height: 0.35rem;
  margin: 0 var(--space-2);
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.breadcrumb a { display: inline-flex; align-items: center; min-height: 2rem; }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* ===== 5. Titres de page ===== */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.page-header h1 { margin: 0; }
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-header__meta { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); }

/* ===== 6. Boutons ===== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 700;
  line-height: var(--line-height-tight);
  cursor: pointer;
  border: 2px solid var(--color-action);
  border-radius: var(--radius-s);
  text-decoration: none;
  text-align: center;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-action); color: var(--color-action-text); }
.btn--primary:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.btn--secondary { background: var(--color-surface); color: var(--color-action); }
.btn--secondary:hover { background: var(--color-action-soft); }
/* Action destructrice : texte noir (le rouge échoue en texte), bordure rouge (3,06), fond rouge au survol (noir 6,86). */
.btn--danger { background: var(--color-surface); color: var(--color-on-status); border-color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger); }
.btn--block { width: 100%; }
.btn--small { padding: var(--space-1) var(--space-3); font-size: var(--font-size-small); }
@media (pointer: fine) {
  /* Pointeur fin (souris) : boutons de tableau plus compacts ; le tactile garde 44 px. */
  .btn--small { min-height: var(--control-compact); }
}
/* Envoi en cours (Turbo pose aria-busy sur le formulaire) */
form[aria-busy="true"] [type="submit"] { cursor: progress; opacity: 0.85; }
form[aria-busy="true"] [type="submit"]::after {
  content: "";
  width: 0.9em; height: 0.9em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* ===== 7. Formulaires ===== */

.form { max-width: 40rem; }
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.field { margin-bottom: var(--space-4); }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: var(--space-1); }
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-s);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-text); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 var(--focus-width) var(--color-action-soft), 0 0 0 calc(var(--focus-width) + 1px) var(--color-focus);
}
.field input[inputmode="decimal"], .field input[inputmode="numeric"] { font-variant-numeric: tabular-nums; }
.field input[type="file"] { padding: var(--space-2); }
fieldset.field { border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-3); margin-inline: 0; }
fieldset.field legend { padding: 0 var(--space-1); }
.field__hint { margin: 0 0 var(--space-2); font-size: var(--font-size-small); color: var(--color-text-muted); max-width: var(--prose-max); }
.field input + .field__hint { margin: var(--space-1) 0 0; }
.field__required { font-weight: 400; font-size: var(--font-size-small); color: var(--color-text-muted); }
.field--error input:not([type="checkbox"]), .field--error select, .field--error textarea { border-color: var(--color-danger); }
.field__error {
  display: block;
  margin: var(--space-2) 0 0;
  padding: var(--space-1) var(--space-2);
  border-left: 4px solid var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: var(--font-size-small);
  animation: slide-down var(--duration-base) var(--ease-out);
}
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); }
.choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-action); flex: none; }
.choice label { font-weight: 400; margin: 0; }

/* ===== 8. Tableaux ===== */
/* Téléphone : chaque ligne devient une fiche (titre = cellule d'en-tête de ligne, libellés repris de data-label).
   Tablette et poste : tableau classique, en-tête collant, chiffres à droite.
   .data-table--scroll : reste un tableau sur téléphone (défilement horizontal, 1re colonne figée) pour les grilles à comparer. */

.table-wrap { margin-bottom: var(--space-4); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table caption { text-align: left; }
.data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.data-table tr {
  display: block;
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-surface);
}
.data-table th, .data-table td {
  display: grid;
  grid-template-columns: minmax(6.5rem, 38%) 1fr;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  text-align: left;
  font-weight: 400;
}
.data-table tbody th[scope="row"] { display: block; font-weight: 700; font-size: var(--font-size-lead); padding-bottom: var(--space-2); }
.data-table th[data-label]::before, .data-table td[data-label]::before {
  content: attr(data-label);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}
.data-table tbody th[scope="row"]::before { content: none; }
.data-table .num { text-align: left; }
.data-table td[data-label="Actions"], .data-table td[data-label="Révocation"] { display: flex; justify-content: flex-end; }
.data-table td[data-label="Actions"]::before, .data-table td[data-label="Révocation"]::before { content: none; }
.data-table td:empty { display: none; }
.data-table .is-flagged { background: var(--color-warning-bg); border-color: var(--color-warning); }
.data-table .is-current { background: var(--color-action-soft); border-color: var(--color-action); }

/* Grille à comparer : tableau même sur téléphone */
.table-wrap--scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-m); }
.data-table--scroll { min-width: 46rem; }
.data-table--scroll thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
.data-table--scroll tr { display: table-row; border: 0; border-radius: 0; margin: 0; padding: 0; background: transparent; }
.data-table--scroll th, .data-table--scroll td,
.data-table--scroll tbody th[scope="row"] {
  display: table-cell;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  vertical-align: top;
  white-space: nowrap;
}
.data-table--scroll thead th { font-size: var(--font-size-small); color: var(--color-text-muted); background: var(--color-surface-alt); vertical-align: bottom; }
.data-table--scroll th[data-label]::before, .data-table--scroll td[data-label]::before { content: none; }
.data-table--scroll .num { text-align: right; }
.data-table--scroll tbody th[scope="row"], .data-table--scroll thead th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--color-surface);
  box-shadow: inset -1px 0 0 var(--color-border);
  white-space: nowrap;
}
.data-table--scroll thead th:first-child { background: var(--color-surface-alt); }
.data-table--scroll .is-flagged th[scope="row"] { background: var(--color-warning-bg); }

/* ===== 9. Pastilles d'état : forme + libellé, jamais la couleur seule ===== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  line-height: 1.6;
  color: var(--color-on-status);
  background: var(--color-surface-sunken);
  white-space: nowrap;
}
.badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-border-strong); flex: none; }
.badge--success { background: var(--color-success-bg); }
.badge--success::before { background: var(--color-success); }
.badge--warning { background: var(--color-warning-bg); }
.badge--warning::before { background: var(--color-warning); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.badge--error, .badge--danger { background: var(--color-danger-bg); }
.badge--error::before, .badge--danger::before { background: var(--color-danger); border-radius: 1px; }
.badge--info { background: var(--color-info-bg); }
.badge--info::before { background: var(--color-info); }
/* Mention neutre (ex. « indicatif, jamais bloquant ») : pas de pastille, pas d'air de bouton */
.badge--note { background: transparent; border: 1px dashed var(--color-border-strong); }
.badge--note::before { content: none; }

/* ===== 10. Messages en page, états vides ===== */

.alert {
  position: relative;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 2rem);
  color: var(--color-on-status);
  border-left: 0.375rem solid;
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  max-width: var(--prose-max);
}
.alert::before {
  content: "";
  position: absolute;
  left: var(--space-3); top: calc(var(--space-3) + 0.2rem);
  width: 1.1rem; height: 1.1rem;
  background: currentColor;
}
.alert > :last-child { margin-bottom: 0; }
.alert p { margin: 0 0 var(--space-1); }
.alert__label { font-weight: 700; }
.alert__list { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
/* Icônes par forme : ■ erreur, ▲ vigilance, ● information */
.alert--error, .alert--danger { background: var(--color-danger-bg); border-color: var(--color-danger); }
.alert--error::before, .alert--danger::before { border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning); }
.alert--warning::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.alert--success { background: var(--color-success-bg); border-color: var(--color-success); }
.alert--success::before { clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 26%, 86% 12%, 38% 72%); }
.alert--info { background: var(--color-info-bg); border-color: var(--color-info); }
.alert--info::before { border-radius: 50%; }

.empty-state {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-m);
  background: var(--color-surface-alt);
  max-width: var(--prose-max);
}
.empty-state__title { margin: 0; font-weight: 700; font-family: var(--font-heading); font-size: var(--font-size-lead); }
.empty-state__text { margin: 0; color: var(--color-text-muted); }
.empty-state .btn { margin-top: var(--space-2); }

.report { margin-bottom: var(--space-4); }

/* ===== 11. Toasts et dialogue ===== */

.toast-region {
  position: fixed;
  z-index: 40;
  left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  display: grid;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  color: var(--color-on-status);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 0.375rem solid var(--color-border-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  animation: toast-in var(--duration-base) var(--ease-out);
}
.toast::before { content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; background: currentColor; }
.toast p { margin: 0; }
.toast__label { font-weight: 700; }
.toast--success { border-left-color: var(--color-success); }
.toast--success::before { background: var(--color-success); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 26%, 86% 12%, 38% 72%); }
.toast--warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.toast--warning::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.toast--error { border-left-color: var(--color-danger); background: var(--color-danger-bg); }
.toast--error::before { border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.toast__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch-target); height: var(--touch-target);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0;
  border: 0; border-radius: var(--radius-s);
  background: transparent; color: inherit; font: inherit; font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.toast__close:hover { background: var(--color-surface-sunken); }
.toast.is-leaving { animation: toast-out var(--duration-base) var(--ease-in) forwards; }
/* Barre de temps restant (succès seulement) : animation-duration fixée par le contrôleur toast */
.toast__timer { grid-column: 1 / -1; height: 2px; margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3)); background: var(--color-success); transform-origin: left; animation: toast-timer 6s linear forwards; }
.toast:hover .toast__timer, .toast:focus-within .toast__timer { animation-play-state: paused; }

.dialog {
  width: min(28rem, calc(100vw - 2 * var(--space-3)));
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-l);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}
.dialog[open] { animation: pop-in var(--duration-base) var(--ease-out); }
.dialog::backdrop { background: var(--color-backdrop); }
.dialog h2 { margin-bottom: var(--space-2); }
.dialog__actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.dialog__actions .btn { flex: 1 1 auto; }
@media (min-width: 30em) { .dialog__actions .btn { flex: 0 0 auto; } }

/* ===== 12. Jauge « ligne de charge » ===== */
/* L'idée forte de l'interface : comme la marque de franc-bord d'un navire, la jauge montre
   la charge (consommé) par rapport à la ligne à ne pas dépasser (plafond). Repère de
   vigilance au seuil PARAMÉTRÉ transmis par le serveur (--gauge-threshold), jamais codé ici. */

.gauge { display: grid; gap: var(--space-1); min-width: 8rem; }
.gauge__track {
  position: relative;
  height: var(--gauge-height);
  margin-right: 3px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-xs);
}
.gauge__fill {
  position: absolute; inset: 0 auto 0 0;
  width: min(var(--gauge-value, 0%), 100%);
  background: var(--color-action);
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  transform-origin: left;
  animation: gauge-fill var(--duration-slow) var(--ease-out) both;
  animation-delay: calc(var(--gauge-index, 0) * 90ms);
}
.gauge--vigilance .gauge__fill { background: var(--color-warning); }
.gauge--depasse .gauge__fill {
  background: repeating-linear-gradient(135deg, var(--color-danger) 0 6px, var(--color-on-status) 6px 8px);
}
/* Repère de vigilance : trait fin noir */
.gauge__threshold {
  position: absolute; top: -3px; bottom: -3px;
  left: var(--gauge-threshold);
  width: 2px;
  background: var(--color-text);
}
/* Ligne de charge = plafond : trait épais qui déborde de la jauge */
.gauge__track::after {
  content: "";
  position: absolute; top: -5px; bottom: -5px; right: -3px;
  width: 3px;
  background: var(--color-text);
}
.gauge--plain .gauge__track::after { content: none; }
.gauge__legend { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.gauge__legend strong { color: var(--color-text); font-size: var(--font-size-small); }
.gauge--mini { min-width: 5rem; margin-top: var(--space-1); }
.gauge--mini .gauge__track { height: 0.375rem; }

/* ===== 12 bis. Consultation en cascade (T3.2, T3.3) ===== */
/* Frise des titulaires consultés, dans l'ordre des rangs : l'étape en cours est la seule en bleu, une étape close
   est en noir avec son issue écrite, l'étape à venir est en pointillé. États dits aussi en texte (badge). */

.cascade-steps { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cascade-step { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); min-width: 0; }
.cascade-step--current { border: 2px solid var(--color-action); background: var(--color-action-soft); }
.cascade-step--closed { border-color: var(--color-text); }
.cascade-step--pending { border-style: dashed; border-color: var(--color-border-strong); }
.cascade-step p { margin: 0 0 var(--space-2); }
.cascade-step__basis { font-size: var(--font-size-small); color: var(--color-text-muted); }
.cascade-step__facts { margin: 0 0 var(--space-2); font-size: var(--font-size-small); }
.cascade-step__facts > div { padding: var(--space-1) 0; border-top: 1px solid var(--color-border); }
.cascade-step__facts dt { color: var(--color-text-muted); }
.cascade-step__facts dd { margin: 0; overflow-wrap: anywhere; }
.gauge-block { margin: 0 0 var(--space-3); }
.gauge-block__text { margin: var(--space-1) 0 0; font-size: var(--font-size-small); }
.summary--compact { margin-bottom: var(--space-3); }
.counters h3 { margin-top: var(--space-4); }
.counter-alert { margin: var(--space-2) 0 var(--space-3); }

/* ===== 13. Tableau de bord (T5) ===== */

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-m);
}
.filters .field { margin: 0; min-width: 10rem; flex: 1 1 10rem; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.kpi { padding: var(--space-3) 0; border-top: 3px solid var(--color-text); }
.kpi__label { margin: 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.kpi__value { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.125rem, 5vw, var(--font-size-figure)); line-height: var(--line-height-tight); }
.kpi__detail { margin: var(--space-1) 0 0; font-size: var(--font-size-small); }

.ceiling-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ceiling-row { display: grid; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.ceiling-row__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); align-items: baseline; }
.ceiling-row__name { font-weight: 700; }
.ceiling-row__rank { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; margin-right: var(--space-2); border: 2px solid var(--color-text); border-radius: 50%; font-size: var(--font-size-small); font-weight: 700; }

.heatmap-wrap { overflow-x: auto; margin-bottom: var(--space-2); }
.heatmap { border-collapse: separate; border-spacing: 3px; font-size: var(--font-size-small); }
.heatmap th { font-weight: 400; color: var(--color-text-muted); text-align: left; padding: 0 var(--space-2); white-space: nowrap; }
.heatmap thead th { text-align: center; font-size: var(--font-size-xs); }
.heatmap td {
  min-width: 2.75rem; height: 2.25rem;
  text-align: center;
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
  background: var(--color-heat-0);
  animation: fade-in var(--duration-base) var(--ease-out) both;
}
.heatmap td[data-level="1"] { background: var(--color-heat-1); }
.heatmap td[data-level="2"] { background: var(--color-heat-2); }
.heatmap td[data-level="3"] { background: var(--color-heat-3); }
.heatmap td[data-level="4"] { background: var(--color-heat-4); }
.heatmap td[data-level="5"] { background: var(--color-heat-5); color: var(--color-on-heat-strong); font-weight: 700; }
.heatmap .is-today { box-shadow: inset 0 0 0 2px var(--color-text); }
.heat-legend { display: flex; align-items: center; gap: 3px; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.heat-legend span { width: 1.5rem; height: 0.75rem; border-radius: var(--radius-xs); background: var(--color-heat-0); }
.heat-legend [data-level="1"] { background: var(--color-heat-1); }
.heat-legend [data-level="2"] { background: var(--color-heat-2); }
.heat-legend [data-level="3"] { background: var(--color-heat-3); }
.heat-legend [data-level="4"] { background: var(--color-heat-4); }
.heat-legend [data-level="5"] { background: var(--color-heat-5); }

.alert-center { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.alert-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.alert-item::before { content: ""; grid-row: span 2; width: 0.875rem; height: 0.875rem; margin-top: 0.3rem; background: var(--color-info); border-radius: 50%; }
.alert-item--danger::before { background: var(--color-danger); border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.alert-item--warning::before { background: var(--color-warning); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.alert-item__title { margin: 0; font-weight: 700; }
.alert-item__meta { margin: 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
/* Centre d'alertes (T5.3) : entrée unique, glissement de 8 px et fondu, cascade de 60 ms limitée aux 8 premières (coupée par dashboard.css au rechargement d'un frame et par prefers-reduced-motion, §15). */
.alert-board .alert-item { animation: rise-in var(--duration-base) var(--ease-out) both; animation-delay: calc(var(--alert-index, 0) * 60ms); }
.dashboard { display: grid; gap: var(--space-5); }
.dashboard__block > h2 { margin-bottom: var(--space-1); }
.dashboard__block > .block-note { margin: 0 0 var(--space-3); font-size: var(--font-size-small); color: var(--color-text-muted); }
/* Recherche (T5.6) : fondu de 120 ms du nouveau résultat (seul mouvement de l'écran ; coupé par prefers-reduced-motion, §15). */
.search-results__content { animation: fade-in var(--duration-fast) var(--ease-out) both; }

/* ===== 14. Authentification ===== */

.card {
  width: 100%;
  max-width: var(--form-max);
  margin: var(--space-3) auto;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  animation: rise-in var(--duration-base) var(--ease-out);
}
.card--wide { max-width: 32rem; }
.card__intro { color: var(--color-text-muted); }
.card__footer { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--font-size-small); }
.card__footer p { margin-bottom: var(--space-2); }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--space-4); }
.steps > li { counter-increment: step; position: relative; padding-left: 2.5rem; margin-bottom: var(--space-4); }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.1rem;
  width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-text);
  border-radius: 50%;
  font-weight: 700; font-size: var(--font-size-small);
}
/* QR code : modules sombres sur fond clair, quelle que soit la sortie du générateur. */
.qr-code { margin: var(--space-3) 0; max-width: 12rem; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-m); }
.qr-code svg { display: block; width: 100%; height: auto; }
.qr-code svg rect { fill: var(--color-blanc); }
.qr-code svg path { fill: var(--color-noir); }
.secret-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  letter-spacing: 0.08em;
  word-break: break-all;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  user-select: all;
}
.site-header__user { font-weight: 700; }

/* ===== Tablette ===== */
@media (min-width: 48em) {
  :root { --font-size-h1: 1.875rem; --font-size-h2: 1.375rem; }
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav account"; padding: 0 var(--space-4); min-height: 4.5rem; }
  .site-header__logo { height: 2.75rem; }
  .site-header__title { font-size: var(--font-size-base); }
  .primary-nav { margin: 0; align-self: stretch; display: flex; }
  .primary-nav ul { padding: 0 0 0 var(--space-4); align-items: stretch; }
  .primary-nav a { height: 100%; }
  .account-menu__name { max-width: 14rem; }
  .site-main { padding: var(--space-5) var(--space-4) var(--space-6); }
  .admin__nav { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) 0; padding: var(--space-2) var(--space-4); }
  .card { margin-top: var(--space-6); padding: var(--space-5); }
  .summary > div { display: grid; grid-template-columns: minmax(12rem, 30%) 1fr; gap: var(--space-3); }
  .summary dt { font-size: var(--font-size-base); }
  .index-list--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); border-top: 0; }
  .index-list--columns li:nth-child(-n + 2) { border-top: 1px solid var(--color-border); }
  .toast-region { left: auto; right: var(--space-4); bottom: var(--space-4); width: 26rem; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }

  .table-wrap { overflow-x: auto; }
  .data-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
  .data-table tr { display: table-row; border: 0; border-radius: 0; margin: 0; padding: 0; background: transparent; }
  .data-table th, .data-table td,
  .data-table tbody th[scope="row"] {
    display: table-cell;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    font-size: var(--font-size-base);
  }
  .data-table tbody th[scope="row"] { font-weight: 700; }
  .data-table thead th {
    position: sticky; top: 0;
    font-size: var(--font-size-small);
    font-weight: 700;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-text);
    background: var(--color-surface);
    vertical-align: bottom;
  }
  .data-table th[data-label]::before, .data-table td[data-label]::before { content: none; }
  .data-table .num { text-align: right; }
  .data-table td[data-label="Actions"], .data-table td[data-label="Révocation"] { display: table-cell; text-align: right; }
  .data-table td:empty { display: table-cell; }
  .data-table tbody tr { transition: background-color var(--duration-fast); }
  .data-table tbody tr:hover { background: var(--color-surface-alt); }
  .data-table .is-current, .data-table .is-current:hover { background: var(--color-action-soft); box-shadow: inset 3px 0 0 var(--color-action); }
  .data-table .is-flagged, .data-table .is-flagged:hover { background: var(--color-warning-bg); box-shadow: inset 3px 0 0 var(--color-warning); }
  .table-wrap--scroll { border: 0; border-radius: 0; }
  .data-table--scroll thead th { background: var(--color-surface); }
  .data-table--scroll tbody th[scope="row"], .data-table--scroll thead th:first-child { position: static; box-shadow: none; background: transparent; }
  .data-table--scroll thead th:first-child { position: sticky; }
}

/* ===== Poste ===== */
@media (min-width: 64em) {
  .admin { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .admin__nav {
    position: sticky; top: var(--space-4);
    margin: 0;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .admin__nav-title { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
  .admin__nav-title a { font-size: var(--font-size-small); color: var(--color-text-muted); border-radius: var(--radius-s); }
  .admin__menu { flex-direction: column; gap: 2px; }
  .admin__menu a { display: flex; border-radius: var(--radius-s); min-height: 2.5rem; }
  .admin__menu a[aria-current="page"] { background: var(--color-action-soft); color: var(--color-action); box-shadow: inset 3px 0 0 var(--color-action); }
  .dashboard--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

/* ===== 15. Mouvement et préférences ===== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-4px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes gauge-fill { from { transform: scaleX(0); } }

/* Transitions de page (View Transitions API, contrôleur page-transition) : seul le contenu glisse, l'en-tête reste. */
::view-transition-old(contenu) { animation: var(--duration-page) var(--ease-in) both vt-out; }
::view-transition-new(contenu) { animation: var(--duration-page) var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  form[aria-busy="true"] [type="submit"]::after { animation: none; border-right-color: currentColor; }
}

@media print {
  .site-header, .site-footer, .admin__nav, .toast-region, .skip-link, .form__actions, .breadcrumb { display: none !important; }
  .admin { display: block; }
  .site-main { padding: 0; max-width: none; }
}

/* Lignes de devis dépliables (T3.6) : zone cliquable de 44 px minimum. */
.section > details > summary { display: flex; align-items: center; min-height: var(--touch-target); cursor: pointer; }
.section > details[open] > summary { font-weight: 700; }

/* ===== Bandeau « 2FA désactivée » (Q-73, hors production) : rouge, forme ◆ et libellé, permanent ===== */
.env-banner { background: var(--color-danger); color: var(--color-on-status); padding: var(--space-2) var(--space-4); }
.env-banner p { margin: 0 auto; max-width: var(--content-max); font-weight: 700; }
.env-banner p::before { content: "◆"; margin-right: var(--space-2); }