/*
 * CapSecur — composants
 * Dépend de tokens.css et base.css. Nommage BEM : .bloc, .bloc__element, .bloc--variante.
 */

/* ------------------------------------------------------------------ */
/* Marque : logo EEUdF + signature de l'application                    */
/* Le logo couleur ne s'utilise que sur fond blanc (charte EEUdF) :     */
/* en thème sombre, on bascule automatiquement sur le logo blanc.       */
/* ------------------------------------------------------------------ */

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

.brand__logo {
  display: block;
  height: 3.5rem;
  width: auto;
}

.brand__logo--white {
  display: none;
}

.brand__name {
  display: grid;
  padding-left: var(--space-3);
  border-left: var(--border-width) solid var(--color-border);
  line-height: 1.1;
}

.brand__app {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand__entity {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo--color { display: none; }
  :root:not([data-theme="light"]) .brand__logo--white { display: block; }
}

:root[data-theme="dark"] .brand__logo--color { display: none; }
:root[data-theme="dark"] .brand__logo--white { display: block; }

/* Tiret de titre : reprend le petit trait sous les titres de la charte EEUdF.
   À réserver aux titres de page, avec parcimonie. */
.title-dash::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 3px;
  margin-top: var(--space-2);
  border-radius: 2px;
  background: var(--brand-vert-1);
}

/* ------------------------------------------------------------------ */
/* Icône                                                               */
/* ------------------------------------------------------------------ */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ */
/* Bouton                                                              */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
}

.btn--ghost:hover {
  background: var(--color-primary-soft);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--color-surface);
}

.btn--danger:hover {
  background: var(--color-danger);
  color: var(--color-surface);
  filter: brightness(0.92);
}

/* Taille compacte : réservée aux interfaces bureau (tableaux, barres d'outils) */
.btn--sm {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.btn--block {
  width: 100%;
}

/* Bouton carré sans libellé visible (libellé en .visually-hidden) */
.btn--icon {
  width: var(--tap-min);
  padding: 0;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* Badge de statut — couleur + icône + libellé, jamais la couleur seule */
/* ------------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge .icon {
  width: 1em;
  height: 1em;
  stroke-width: 2.5;
}

.badge--ok      { color: var(--color-ok);      background: var(--color-ok-soft); }
.badge--warn    { color: var(--color-warn);    background: var(--color-warn-soft); }
.badge--danger  { color: var(--color-danger);  background: var(--color-danger-soft); }
.badge--neutral { color: var(--color-neutral); background: var(--color-neutral-soft); }
.badge--info    { color: var(--color-primary); background: var(--color-primary-soft); }

/* ------------------------------------------------------------------ */
/* Champs de formulaire                                                */
/* ------------------------------------------------------------------ */

.field {
  display: grid;
  /* Dans une rangée (.form-row), les champs s'étirent à la hauteur du plus
     haut : on garde libellé et champ en haut plutôt que d'étirer leurs
     lignes, pour que les champs restent alignés quand l'un a une aide. */
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
}

.field__label {
  font-weight: 700;
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-danger);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.textarea {
  min-height: 6rem;
  resize: vertical;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--color-primary);
}

.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--color-danger);
  border-width: 2px;
}

/* ------------------------------------------------------------------ */
/* Zone de dépôt de fichier (contrôleur Stimulus dropzone)             */
/* Le champ natif, transparent, couvre la zone : clic, glisser-déposer */
/* et clavier passent par lui. Sans JavaScript, il reste visible.      */
/* ------------------------------------------------------------------ */

.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 7rem;
  padding: var(--space-4);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}

.dropzone__texte {
  display: none;
}

.dropzone--active .dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone--active .dropzone__texte {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.dropzone__texte .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
}

.dropzone__action {
  color: var(--color-text);
}

.dropzone__action strong {
  color: var(--color-primary);
}

/* Sur écran tactile, pas de glisser-déposer : « Touchez pour choisir ». */
.dropzone__action--tactile {
  display: none;
}

@media (pointer: coarse) {
  .dropzone__action--souris { display: none; }
  .dropzone__action--tactile { display: inline; }
}

.dropzone__fichier {
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.dropzone__fichier:empty,
.dropzone__alerte:empty {
  display: none;
}

/* Au-dessus du champ transparent : sinon le message serait sous lui. */
.dropzone__alerte {
  position: relative;
  margin: var(--space-2) 0 0;
  pointer-events: none;
}

.dropzone:hover,
.dropzone--survol {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dropzone--survol {
  border-style: solid;
}

.dropzone:has(.dropzone__input:focus-visible) {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.field--error .dropzone {
  border-color: var(--color-danger);
}

/* ------------------------------------------------------------------ */
/* Choix segmenté Conforme / Non conforme / Sans objet                 */
/* Radios natifs masqués ; chaque option prend la couleur de son statut */
/* ------------------------------------------------------------------ */

.seg {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.seg__option {
  position: relative;
}

.seg__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
}

.seg__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 700;
  cursor: pointer;
}

.seg__option + .seg__option .seg__label {
  border-left-width: 0;
}

.seg__option:first-child .seg__label {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.seg__option:last-child .seg__label {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.seg__input:focus-visible + .seg__label {
  box-shadow: var(--focus-ring);
  position: relative;
}

.seg__input:checked + .seg__label {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Réponses de contrôle : couleur du statut correspondant */
.seg__input[value="ok"]:checked + .seg__label,
.seg__input[value="ko"]:checked + .seg__label,
.seg__input[value="na"]:checked + .seg__label {
  color: var(--color-surface);
}

.seg__input[value="ok"]:checked + .seg__label { background: var(--color-ok);      border-color: var(--color-ok); }
.seg__input[value="ko"]:checked + .seg__label { background: var(--color-danger);  border-color: var(--color-danger); }
.seg__input[value="na"]:checked + .seg__label { background: var(--color-neutral); border-color: var(--color-neutral); }

/* ------------------------------------------------------------------ */
/* Puce de filtre (bascule)                                            */
/* ------------------------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 40px;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

.chip__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ------------------------------------------------------------------ */
/* Type de matériel : icône du type devant son libellé                 */
/* ------------------------------------------------------------------ */

.type-materiel {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* Le texte reste aligné sur la ligne de base (lignes .kv__row), l'icône
   est centrée : sans quoi la base du conteneur serait le bas de l'icône. */
.type-materiel > .icon {
  align-self: center;
  color: var(--color-primary);
}

/* ------------------------------------------------------------------ */
/* Bandeau d'information                                               */
/* ------------------------------------------------------------------ */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid currentColor;
  border-radius: var(--radius-sm);
}

.notice__body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  color: var(--color-text);
}

.notice__title {
  font-weight: 700;
}

.notice--ok      { color: var(--color-ok);      background: var(--color-ok-soft); }
.notice--info    { color: var(--color-primary); background: var(--color-primary-soft); }
.notice--warn    { color: var(--color-warn);    background: var(--color-warn-soft); }
.notice--danger  { color: var(--color-danger);  background: var(--color-danger-soft); }
.notice--offline { color: var(--color-neutral); background: var(--color-neutral-soft); }

/* Boutons d'action (icônes) alignés à droite du bandeau */
.notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: auto;
}

.notice__actions:empty {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Carte bateau                                                        */
/* ------------------------------------------------------------------ */

.boat-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  min-width: 0;
}

.boat-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.boat-card__name {
  font-size: var(--text-lg);
}

.boat-card__model {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Plaque d'identification, façon marquage de coque */
.boat-card__plate {
  padding: 0.125rem var(--space-2);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.boat-card__facts {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.boat-card__fact {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.boat-card__fact dt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.boat-card__fact dd {
  margin: 0;
  min-width: 0;
}

/* Grille de cartes bateau (vue « Cartes » de la liste de la flotte) */
.boat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.boat-grid > li {
  display: grid;
}

.boat-card__name a {
  color: inherit;
}

.boat-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

/* ------------------------------------------------------------------ */
/* Point de contrôle (ligne du registre de visite de sécurité)         */
/* ------------------------------------------------------------------ */

.check-item {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  min-width: 0;
}

.check-item__title {
  font-weight: 700;
}

.check-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Les champs de remarque n'apparaissent que si le point est non conforme */
.check-item__remark {
  display: none;
  gap: var(--space-3);
}

.check-item:has(.seg__input[value="ko"]:checked) {
  border-color: var(--color-danger);
  box-shadow: inset 4px 0 0 var(--color-danger);
}

.check-item:has(.seg__input[value="ko"]:checked) .check-item__remark {
  display: grid;
}

/* ------------------------------------------------------------------ */
/* Tableau                                                             */
/* ------------------------------------------------------------------ */

.table-wrap {
  position: relative; /* contient les libellés .visually-hidden (position absolue) dans la zone défilante */
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-border-strong);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: var(--color-surface-sunken);
}

/* ------------------------------------------------------------------ */
/* Étapes d'un circuit (ex. saisie → validation d'une visite)          */
/* ------------------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-3);
  padding: var(--space-3);
  border-top: 4px solid var(--color-border);
  counter-increment: step;
}

.steps__item::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text-muted);
}

.steps__title {
  font-weight: 700;
}

.steps__who {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.steps__item--done {
  border-top-color: var(--color-ok);
}

.steps__item--done::before {
  content: "✓";
  border-color: var(--color-ok);
  background: var(--color-ok);
  color: var(--color-surface);
}

.steps__item--current {
  border-top-color: var(--color-primary);
}

.steps__item--current::before {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ------------------------------------------------------------------ */
/* Indicateur chiffré (tableau de bord)                                */
/* ------------------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-3);
}

.stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-top: 4px solid var(--stat-color, var(--color-border-strong));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

a.stat:hover {
  background: var(--color-surface-sunken);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__total {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.stat--ok     { --stat-color: var(--color-ok); }
.stat--warn   { --stat-color: var(--color-warn-solid); }
.stat--danger { --stat-color: var(--color-danger); }
.stat--info   { --stat-color: var(--color-primary); }

/* ------------------------------------------------------------------ */
/* Liste d'actions à traiter                                           */
/* ------------------------------------------------------------------ */

.tasks {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

a.task:hover {
  background: var(--color-surface-sunken);
}

.task__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
}

.task__icon--ok     { color: var(--color-ok);      background: var(--color-ok-soft); }
.task__icon--warn   { color: var(--color-warn);    background: var(--color-warn-soft); }
.task__icon--danger { color: var(--color-danger);  background: var(--color-danger-soft); }
.task__icon--info   { color: var(--color-primary); background: var(--color-primary-soft); }

.task__body {
  display: grid;
  min-width: 0;
}

.task__title {
  font-weight: 700;
}

.task__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.task > .icon {
  color: var(--color-text-muted);
}

/* Écran étroit : le badge de statut passe sous le texte plutôt que de l'écraser */
@media (max-width: 30rem) {
  .task > .badge {
    grid-column: 2;
    justify-self: start;
  }
}

/* ------------------------------------------------------------------ */
/* Onglets                                                             */
/* ------------------------------------------------------------------ */

.tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: var(--border-width) solid var(--color-border);
  scrollbar-width: none;
}

.tabs__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.tabs__link:hover {
  color: var(--color-text);
}

.tabs__link[aria-current="page"] {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* ------------------------------------------------------------------ */
/* Liste clé / valeur                                                  */
/* ------------------------------------------------------------------ */

.kv {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.kv__row {
  display: grid;
  grid-template-columns: minmax(8rem, min(40%, 14rem)) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  min-width: 0;
}

.kv dt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Historique (visites, entretien)                                     */
/* ------------------------------------------------------------------ */

.timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: 0 0 var(--space-5) var(--space-6);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 0.5rem;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item:last-child::before {
  display: none;
}

.timeline__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-border-strong);
  box-shadow: 0 0 0 1px var(--color-border-strong);
}

.timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.timeline__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Boutons d'action (icônes) d'une étape, poussés à droite de l'en-tête */
.timeline__actions {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* Zone défilante                                                      */
/* ------------------------------------------------------------------ */

/*
 * Limite la hauteur d'une liste longue (ex. historique de 20 ans) : défile
 * verticalement au-delà d'environ 3 éléments, le suivant reste entrevu pour
 * signaler la suite. Balisage : role="region", aria-labelledby (titre de la
 * liste) et tabindex="0", pour défiler au clavier (RGAA 7.3, 12.8).
 */
.scroll-area {
  max-height: var(--scroll-area-max, 17rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-2) var(--space-3) 0;
  border-block: var(--border-width) solid var(--color-border);
}

/* ------------------------------------------------------------------ */
/* Document joint                                                      */
/* ------------------------------------------------------------------ */

.doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-auto-columns: auto;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.doc > .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-text-muted);
}

.doc__body {
  display: grid;
  min-width: 0;
}

.doc__name {
  font-weight: 700;
}

.doc__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ */
/* Recherche                                                           */
/* ------------------------------------------------------------------ */

.search {
  position: relative;
  min-width: 0;
}

.search > .icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  translate: 0 -50%;
  color: var(--color-text-muted);
  pointer-events: none;
}

.search .input {
  padding-left: 2.75rem;
}

/* ------------------------------------------------------------------ */
/* Progression par sections (visite de sécurité)                       */
/* ------------------------------------------------------------------ */

.progress {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress__step {
  height: 0.5rem;
  border-radius: 2px;
  background: var(--color-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.progress__step--done    { background: var(--color-ok);      box-shadow: none; }
.progress__step--ko      { background: var(--color-danger);  box-shadow: none; }
.progress__step--current { background: var(--color-primary); box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Barre d'actions collée en bas d'écran (saisie mobile)               */
/* ------------------------------------------------------------------ */

.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}

.action-bar .btn {
  flex: 1;
}

/* ------------------------------------------------------------------ */
/* Avatar                                                              */
/* ------------------------------------------------------------------ */

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Bouton icône seule (toujours avec un aria-label)                    */
/* ------------------------------------------------------------------ */

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--color-surface-sunken);
}

/* ------------------------------------------------------------------ */
/* Choix du thème : Auto / Clair / Sombre                              */
/* Radios natifs ; le comportement est dans theme.js.                  */
/* ------------------------------------------------------------------ */

.theme-switch {
  display: inline-flex;
  margin: 0;
  padding: 3px;
  border: var(--border-width) solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-sunken);
  min-width: 0;
}

.theme-switch__option {
  position: relative;
}

.theme-switch__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}

.theme-switch__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.theme-switch__label .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.theme-switch__input:checked + .theme-switch__label {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-raised);
}

.theme-switch__input:focus-visible + .theme-switch__label {
  box-shadow: var(--focus-ring);
}

/* Variante pleine largeur (tiroir mobile, menus) : grands boutons */
.theme-switch--block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius-md);
}

.theme-switch--block .theme-switch__label {
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ */
/* Personne : avatar + nom + rôle (en-tête, listes, tiroir)            */
/* ------------------------------------------------------------------ */

.person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.person__text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
  text-align: left;
}

.person__name {
  font-weight: 700;
}

.person__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.person--compact .person__name {
  font-size: var(--text-sm);
}

.person--compact .person__meta {
  font-size: var(--text-xs);
}

/* ------------------------------------------------------------------ */
/* Menu déroulant (sur <details>, fonctionne sans JavaScript)          */
/* Utilisé par le menu du compte et le sélecteur de groupe.            */
/* ------------------------------------------------------------------ */

.dropdown {
  position: relative;
  min-width: 0;
}

.dropdown__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
}

.dropdown__trigger::-webkit-details-marker {
  display: none;
}

.dropdown__trigger:hover {
  background: var(--color-surface-sunken);
}

.dropdown__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 40;
  display: grid;
  width: max-content;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.dropdown__panel--start {
  right: auto;
  left: 0;
}

.dropdown__title {
  padding: var(--space-2) var(--space-3) var(--space-1);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}

.menu-item:hover {
  background: var(--color-surface-sunken);
}

.menu-item .icon {
  color: var(--color-text-muted);
}

.menu-item__meta {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.menu-item[aria-current="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
}

.menu-item[aria-current="true"] .icon {
  color: currentColor;
}

.menu-sep {
  height: 1px;
  margin: var(--space-2) 0;
  background: var(--color-border);
}

/* ------------------------------------------------------------------ */
/* Sélecteur de périmètre (groupe local ou toute la flotte)            */
/* ------------------------------------------------------------------ */

.scope__trigger {
  border: var(--border-width) solid var(--color-border);
}

.scope__text {
  display: grid;
  line-height: 1.15;
  text-align: left;
}

.scope__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.scope__value {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scope__value .foulard__dots {
  margin-right: var(--space-1);
  vertical-align: -0.2em;
}

.scope__trigger > .icon {
  rotate: 90deg;
  color: var(--color-text-muted);
}

/* Nombreux groupes pour un rôle national : le menu défile. */
.scope .dropdown__panel {
  max-height: min(70vh, 32rem);
  overflow-y: auto;
}

/* Un seul périmètre possible : affiché, sans menu. */
.scope__trigger--fixe {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------------ */
/* Étiquette de rôle — neutre : un rôle n'est pas un statut            */
/* ------------------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.0625rem var(--space-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  flex-wrap: wrap;
  max-width: 100%;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.tag__scope {
  color: var(--color-text-muted);
}

.tag .icon {
  width: 1em;
  height: 1em;
}

.tag--strong {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
}

/* Dans un tableau, une étiquette reste sur une ligne : c'est le tableau qui défile */
.table .tag {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* ------------------------------------------------------------------ */
/* Cartes de choix (radio ou case à cocher décrite)                    */
/* ------------------------------------------------------------------ */

.choice-cards {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.choice-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.choice-card:has(:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-card:has(:focus-visible) {
  box-shadow: var(--focus-ring);
}

.choice-card input {
  grid-row: span 2;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-primary);
}

.choice-card__title {
  font-weight: 700;
}

.choice-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ */
/* Ligne de rôle répétable (formulaire utilisateur, LiveCollectionType) */
/* ------------------------------------------------------------------ */

.role-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

/* ------------------------------------------------------------------ */
/* Case à cocher simple                                                */
/* ------------------------------------------------------------------ */

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  cursor: pointer;
}

.checkbox input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-primary);
}

/* ------------------------------------------------------------------ */
/* Couleurs de foulard (choix à la saisie, affichage sur une fiche)    */
/* ------------------------------------------------------------------ */

.swatch-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.swatch {
  position: relative;
  display: flex;
  cursor: pointer;
}

.swatch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}

.swatch__dot {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--swatch-color);
}

.swatch__dot .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 3;
  color: #fff;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.6));
  opacity: 0;
}

.swatch-picker--coque .swatch__dot {
  border-radius: var(--radius-md);
}

.swatch:has(input:checked) .swatch__dot {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--swatch-color);
}

.swatch:has(input:checked) .swatch__dot .icon {
  opacity: 1;
}

.swatch:has(input:focus-visible) .swatch__dot {
  box-shadow: var(--focus-ring);
}

.swatch:has(input:disabled) {
  cursor: not-allowed;
}

.swatch:has(input:disabled) .swatch__dot {
  opacity: 0.35;
}

.foulard {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* Texte sur la ligne de base (voir .type-materiel) ; pastilles centrées
   sur la première ligne, même quand le nom passe à la ligne. */
.foulard > .foulard__dots {
  align-self: flex-start;
  margin-top: calc((1lh - 1.125rem) / 2);
}

.foulard__dots {
  display: inline-flex;
  flex: none;
}

.foulard__dots .foulard__dot {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--swatch-color);
}

.foulard__dots .foulard__dot + .foulard__dot {
  margin-left: -0.375rem;
}

/* Couleurs de coque d'un bateau : pastille carrée (distincte du foulard
   rond d'un groupe), coupée en diagonale quand il y a deux couleurs. */

.coque {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* Texte sur la ligne de base (voir .type-materiel) ; pastille centrée sur
   la première ligne, même quand le nom passe à la ligne. */
.coque > .coque__swatch {
  align-self: flex-start;
  margin-top: calc((1lh - 1.125rem) / 2);
}

.coque__swatch {
  flex: none;
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border-strong);
  background: linear-gradient(135deg, var(--coque-a) 50%, var(--coque-b, var(--coque-a)) 50%);
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Matrice des droits (rôle × action)                                  */
/* ------------------------------------------------------------------ */

.perm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.perm .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.5;
}

.perm--all     { color: var(--color-ok); font-weight: 700; }
.perm--partial { color: var(--color-primary); }
.perm--none    { color: var(--color-text-muted); }

.table th[scope="row"] {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  white-space: normal;
  border-bottom: var(--border-width) solid var(--color-border);
}

.table__group th {
  padding-top: var(--space-5);
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

/* ------------------------------------------------------------------ */
/* État de synchronisation (usage hors connexion)                      */
/* ------------------------------------------------------------------ */

.sync {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

.sync .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.sync--ok      { color: var(--color-ok);      background: var(--color-ok-soft); }
.sync--pending { color: var(--color-warn);    background: var(--color-warn-soft); }
.sync--offline { color: var(--color-neutral); background: var(--color-neutral-soft); }

/* ------------------------------------------------------------------ */
/* Envoi d'un lot de fichiers (contrôleur envoi-lot) : zone de dépôt,  */
/* bouton, progression et erreurs par fichier                          */
/* ------------------------------------------------------------------ */

.envoi-lot {
  display: grid;
  gap: var(--space-3);
}

.envoi-lot__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.envoi-lot__progression {
  width: min(16rem, 100%);
  accent-color: var(--color-primary);
}

.envoi-lot__statut {
  margin: 0;
  color: var(--color-text-muted);
}

.envoi-lot__statut:empty,
.envoi-lot__erreurs:empty {
  display: none;
}

.envoi-lot__erreurs {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------------ */
/* Galerie de photos : miniatures carrées, nom et date dessous         */
/* ------------------------------------------------------------------ */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 40%), 1fr));
  gap: var(--space-4) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.galerie__item {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}

.galerie__cadre {
  position: relative;
  display: block;
}

.galerie__cadre img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.galerie__item:hover img {
  border-color: var(--color-primary);
  filter: brightness(0.92);
}

.galerie__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}

.galerie__badge .icon {
  width: 1rem;
  height: 1rem;
}

.galerie__legende {
  display: grid;
  min-width: 0;
}

.galerie__nom {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galerie__date {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------------ */
/* Visionneuse de photos (<dialog class="lightbox">, contrôleur        */
/* galerie) : grande image, précédente/suivante, actions               */
/* ------------------------------------------------------------------ */

.lightbox {
  width: min(80rem, calc(100vw - 2rem));
  max-width: none;
  height: calc(100dvh - 2rem);
  max-height: none;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}

.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.lightbox::backdrop {
  background: rgb(8 20 29 / 0.8);
}

.lightbox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.lightbox__title {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding-top: var(--space-2);
}

.lightbox__title h2 {
  font-size: var(--text-lg);
  overflow-wrap: anywhere;
}

.lightbox__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.lightbox__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-3);
  background: var(--color-surface-sunken);
}

.lightbox__image {
  grid-column: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox__nav[hidden] + .lightbox__image {
  grid-column: 1 / -1;
}

.lightbox__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: var(--border-width) solid var(--color-border);
}

.lightbox__actions form {
  display: contents;
}

.lightbox__actions form[hidden] {
  display: none;
}

@media (max-width: 56rem) {
  .lightbox {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .lightbox__head {
    padding-left: var(--space-4);
  }

  /* Boutons précédente/suivante par-dessus la photo, de part et d'autre. */
  .lightbox__body {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .lightbox__image {
    grid-column: 1;
  }

  .lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
  }

  .lightbox__nav:first-child {
    left: var(--space-2);
  }

  .lightbox__nav:last-child {
    right: var(--space-2);
  }
}

/* ------------------------------------------------------------------ */
/* Fenêtre de confirmation (<dialog class="modal">)                    */
/* ------------------------------------------------------------------ */

.modal {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}

.modal::backdrop {
  background: rgb(8 20 29 / 0.5);
}

.modal__inner {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.modal__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Volet latéral (<dialog class="sheet">) : aperçu d'un document       */
/* Collé à droite sur ordinateur, plein écran sur téléphone.           */
/* ------------------------------------------------------------------ */

.sheet {
  width: min(48rem, 60vw);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}

.sheet[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: sheet-in var(--duration-base) ease-out;
}

.sheet::backdrop {
  background: rgb(8 20 29 / 0.5);
}

@keyframes sheet-in {
  from { transform: translateX(100%); }
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.sheet__title {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding-top: var(--space-2);
}

.sheet__title h2 {
  font-size: var(--text-lg);
  overflow-wrap: anywhere;
}

.sheet__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.sheet__body {
  display: grid;
  min-height: 0;
  overflow: auto;
  background: var(--color-surface-sunken);
}

.sheet__body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.sheet__body img {
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  object-fit: contain;
}

.sheet__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: var(--border-width) solid var(--color-border);
}

@media (max-width: 56rem) {
  .sheet {
    width: 100%;
    height: 100dvh;
    border-left: 0;
    box-shadow: none;
  }

  .sheet__head {
    padding-left: var(--space-4);
  }

  .sheet__actions {
    padding-inline: var(--space-4);
  }

  .sheet__actions .btn {
    flex: 1;
  }
}

/* ------------------------------------------------------------------ */
/* Formulaire en sections : intitulé à gauche, champs à droite         */
/* ------------------------------------------------------------------ */

.form {
  display: grid;
  gap: var(--space-5);
  max-width: 60rem;
}

.form-section {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.form-section__intro {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.form-section__intro p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-section__fields {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4);
}

.form-section--danger {
  border-color: var(--color-danger);
}

.form-section--danger h2 {
  color: var(--color-danger);
}

.danger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.danger-row + .danger-row {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.danger-row__text {
  display: grid;
  gap: 2px;
  max-width: 40ch;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.danger-row__text strong {
  font-size: var(--text-md);
  color: var(--color-text);
}

.form-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  background: var(--color-bg);
}

/* Bloc affiché seulement quand une option est cochée */
.reveal {
  display: none;
}

.reveal-host:has([data-reveal]:checked) .reveal {
  display: grid;
  gap: var(--space-2);
}

/* Bascule entre deux blocs selon l'option radio cochée (ex. choisir un
   utilisateur existant ou en inviter un nouveau par e-mail) */
.reveal-host:has(input[value="existing"]:checked) .reveal[data-show="existing"],
.reveal-host:has(input[value="new"]:checked) .reveal[data-show="new"] {
  display: grid;
  gap: var(--space-2);
}

@media (max-width: 56rem) {
  .form-section {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .form-actions {
    bottom: calc(var(--tabbar-height, 0px) + env(safe-area-inset-bottom, 0px));
  }

  .form-actions .btn {
    flex: 1;
  }
}

/* ------------------------------------------------------------------ */
/* Listes : recherche, filtres, tri par colonne, pagination            */
/* ------------------------------------------------------------------ */

.liste-filtres {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.liste-filtres__resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.liste-filtres__resume p {
  margin: 0;
}

.liste-filtres__puces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* À droite du nombre de résultats : effacer les filtres, tri, affichage */
.liste-filtres__outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.liste-filtres__tri {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.liste-filtres__tri .select {
  width: auto;
}

/* Choix Liste / Cartes : contrôle segmenté (.seg) à largeur de son contenu */
.liste-filtres__vue {
  grid-auto-columns: auto;
  font-size: var(--text-sm);
}

.liste-filtres__vue .seg__label {
  padding: 0 var(--space-3);
}

/* Lien de tri dans un en-tête de colonne : toute la cellule est cliquable. */
.table__tri {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  margin-block: calc(-1 * var(--space-3));
  color: inherit;
  text-decoration: none;
}

.table__tri:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.table__tri .icon {
  flex-shrink: 0;
}

th[aria-sort] .table__tri {
  color: var(--color-primary);
}

.pagination {
  margin-top: var(--space-4);
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.pagination__link:hover {
  background: var(--color-surface-sunken);
}

.pagination__link[aria-current="page"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.pagination__ellipsis {
  min-width: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ */
/* Graphique (Chart.js) et sa légende                                  */
/* ------------------------------------------------------------------ */

/* --chart-rows : nombre de barres, pour une hauteur à leur mesure. */
.chart {
  display: grid;
  gap: var(--space-4);
}

.chart__canvas {
  position: relative;
  height: calc(var(--chart-rows, 4) * 2.75rem + 2.5rem);
}

/* Légende : reprend chaque barre en texte (alternative du canvas). */
.chart__legend {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.chart__legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.chart__legend-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chart__legend-label .icon {
  flex: none;
  color: var(--color-text-muted);
}

.chart__legend-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Texte rédigé (prose) : contenu Markdown rendu en HTML (aide)       */
/* ------------------------------------------------------------------ */
/* Le contenu commence au h2 : le h1 est celui de la page. */
.prose > * + * {
  margin-top: var(--space-3);
}

.prose > h2 {
  margin-top: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.prose > h3 {
  margin-top: var(--space-5);
}

.prose > :first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  max-width: 65ch;
  margin-bottom: 0;
  padding-left: var(--space-5);
}

.prose li + li,
.prose li > ul,
.prose li > ol {
  margin-top: var(--space-2);
}

.prose strong {
  font-weight: 600;
}