/* DiveDirector : DESIGN.md (palette Lagon) en variables CSS.
   Jeu normal sur :root, jeu « -sun » sous [data-sun] (bouton ☀️, posé sur <html>). */

:root {
  /* Couleurs */
  --surface-base: #F3F7F8;
  --surface-raised: #FFFFFF;
  --ink-primary: #0F2A33;
  --ink-secondary: #5B717A;
  --border-hairline: #D5E1E5;
  --action: #0B6E8A;
  --action-soft: #E3F1F5;
  --on-action: #FFFFFF;
  --missing: #C2410C;
  --warning-surface: #FFF4E5;
  --warning-border: #F5C99B;
  --role-encadrant: #0B4F6C;
  --role-guide: #1F8A70;
  --role-autonome: #D99A00;
  --role-plongeur: #7FB7CF;
  --in-training: #7C3AED;
  --scrim: rgba(15, 42, 51, 0.45);

  /* Traits et profondeur */
  --line-width: 1px;
  --shadow-raised: 0 1px 3px rgba(15, 42, 51, 0.15);
  --shadow-panel: 0 -4px 24px rgba(15, 42, 51, 0.18);

  /* Typographie */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, monospace;
  --body-size: 16px;
  --body-weight: 400;
  --title-size: 18px;
  --meta-size: 13px;
  --meta-weight: 400;

  /* Formes */
  --rounded-sm: 6px;
  --rounded-md: 10px;
  --rounded-lg: 14px;
  --rounded-sheet: 20px;
  --rounded-full: 9999px;

  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --gutter-mobile: 12px;
  --target-min: 48px;
  --target-icon: 44px;
  --list-column-wide: 340px;
  --group-card-min: 300px;

  /* Pastilles de plongeur */
  --diver-dot-size: 24px;
  --diver-dot-letter: 12px;
  --diver-dot-ring: 1.5px;
}

[data-sun] {
  --surface-base: #FFFFFF;
  --surface-raised: #FFFFFF;
  --ink-primary: #000000;
  --ink-secondary: #1F2A30;
  --border-hairline: #000000;
  --action: #00506B;
  --missing: #B00020;
  --role-encadrant: #003B57;
  --role-guide: #00684C;
  --role-autonome: #A86F00;
  --role-plongeur: #2A7FA8;
  --in-training: #5B21B6;
  --scrim: rgba(0, 0, 0, 0.6);

  --line-width: 2px;
  --shadow-raised: none;
  --shadow-panel: none;

  --body-size: 18px;
  --body-weight: 600;
  --meta-weight: 600;

  --diver-dot-size: 30px;
  --diver-dot-letter: 14px;
  --diver-dot-ring: 2px;
}

/* ---------------------------------------------------------------- Base */

* { box-sizing: border-box; }

[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: 1.45;
  color: var(--ink-primary);
  background: var(--surface-base);
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--gutter-mobile) var(--space-6);
}

h1, h2 {
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  overflow-wrap: anywhere;
}
main > h1 { margin: var(--space-2) 0 var(--space-4); }

p { margin: 0 0 var(--space-3); }

a { color: var(--action); }

:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

.meta {
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  line-height: 1.4;
  color: var(--ink-secondary);
}

.section-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin: var(--space-5) var(--space-1) var(--space-2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Noms de personnes : complets en données, tronqués à l'affichage en gardant le début (prénom). */
.person {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* ------------------------------------------------------------- En-têtes */

/* En-tête des écrans non connectés (et des pages d'erreur). */
header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--gutter-mobile);
  background: var(--surface-raised);
  border-bottom: var(--line-width) solid var(--border-hairline);
}
header.site .brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-weight: 700;
  color: var(--ink-primary);
  text-decoration: none;
}
header.site form { margin: 0; }

/* En-tête des écrans connectés : retour, titre et sous-titre, actions. */
.app-header {
  background: var(--surface-raised);
  border-bottom: var(--line-width) solid var(--border-hairline);
  padding: var(--space-2) var(--gutter-mobile);
}
.app-header__inner {
  max-width: 640px;
  margin: 0 auto;
}
.app-header__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.app-header__title {
  flex: 1 1 10rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--target-min);
}
a.app-header__title {
  color: inherit;
  text-decoration: none;
  border-radius: var(--rounded-md);
}
a.app-header__title:hover h1 { text-decoration: underline; }
.app-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.app-header__actions form { margin: 0; }

/* L'en-tête de la fiche reste visible quand l'écran a la place (pas au zoom 200 %). */
@media (min-height: 600px) {
  .app-header--sheet {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* -------------------------------------------------------------- Boutons */

.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 54px;
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--action);
  border-radius: var(--rounded-lg);
  background: var(--action);
  color: var(--on-action);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button.secondary, button.secondary {
  background: var(--surface-raised);
  color: var(--action);
  font-weight: 700;
}
.button.danger, button.danger {
  background: var(--surface-raised);
  color: var(--missing);
  border-color: var(--missing);
  font-weight: 700;
}
.button.block, button.block { width: 100%; }
.button.link, button.link {
  min-height: var(--target-min);
  padding: 0 var(--space-2);
  border: none;
  background: none;
  color: var(--action);
  font-weight: inherit;
  text-decoration: underline;
}
button:disabled { cursor: default; }

/* Bouton d'icône (☀️, 🕘, ‹) : 44 px, libellé lisible par aria-label. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--target-icon);
  height: var(--target-icon);
  min-height: var(--target-icon);
  padding: 0;
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-md);
  background: var(--surface-raised);
  color: var(--ink-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.icon-button[aria-pressed="true"] {
  background: var(--ink-primary);
  border-color: var(--ink-primary);
  color: var(--surface-raised);
}

/* Sauvegarder : contour « Sauvegardé », plein « Sauvegarder (n) ». */
.save-button {
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border-radius: var(--rounded-md);
  font-size: var(--body-size);
  white-space: nowrap;
}
.save-button.is-clean {
  background: var(--surface-raised);
  color: var(--action);
}

/* Lien de texte : la zone de toucher fait au moins 48 px. */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.actions > * { flex: 1 1 auto; }
.actions form { margin: 0; display: flex; }
.actions form > button { flex: 1 1 auto; }

/* ---------------------------------------------------------------- Cartes */

.card {
  background: var(--surface-raised);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}

ul.list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
ul.list > li { margin-bottom: var(--space-2); }
ul.list > li > .card { margin-bottom: 0; }

a.card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: 64px;
  color: inherit;
  text-decoration: none;
}
a.card:hover { border-color: var(--action); }
.card__main { flex: 1 1 12rem; min-width: 0; }
.card__title { display: block; font-weight: 700; overflow-wrap: anywhere; }

/* Étiquette (rôle sur la fiche). */
.tag {
  display: inline-block;
  flex: none;
  padding: 2px var(--space-2);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-sm);
  font-size: var(--meta-size);
  font-weight: 700;
  color: var(--ink-secondary);
}
.tag.role-editor {
  background: var(--action-soft);
  border-color: var(--action-soft);
  color: var(--action);
}
[data-sun] .tag.role-editor { border-color: var(--action); }

/* --------------------------------------------------------------- Bandeaux */

.banner {
  border-radius: var(--rounded-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}
.banner.warning {
  background: var(--warning-surface);
  border: var(--line-width) solid var(--warning-border);
  border-radius: var(--rounded-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}
.banner.read-only {
  background: var(--action-soft);
  color: var(--action);
}
[data-sun] .banner.warning { border-color: var(--ink-primary); }
[data-sun] .banner.read-only { border: var(--line-width) solid var(--action); }

/* ------------------------------------------------------------- Formulaires */

.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 700; margin-bottom: var(--space-1); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-md);
  background: var(--surface-raised);
  font: inherit;
  color: inherit;
}
[data-sun] .field input, [data-sun] .field select, [data-sun] .field textarea {
  border-color: var(--ink-primary);
}
.field .help {
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  color: var(--ink-secondary);
  margin-top: var(--space-1);
}
.field .error, .errorlist {
  color: var(--missing);
  font-size: var(--meta-size);
  font-weight: 700;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

dl.info { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
dl.info dt { color: var(--ink-secondary); }
dl.info dd { margin: 0; min-width: 0; }

/* Encart « Infos de la fiche » sous l'en-tête : défile avec la page. */
.info-card {
  position: relative;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--rounded-lg);
}
.info-card.is-editable { cursor: pointer; }
.info-card__list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1px var(--space-3);
  min-width: 0;
  margin: 0;
  padding-right: var(--space-5, 32px); /* laisse la place à l'icône */
}
.info-card__list dt {
  align-self: center;
  color: var(--ink-secondary);
  font-size: var(--meta-size);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.info-card__list dd { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.info-card__list dd.is-empty { color: var(--ink-secondary); font-style: italic; }
/* Icône discrète en haut à droite ; la zone tactile reste ≥ 48 px. */
.info-card__edit {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rounded-md);
  color: var(--ink-secondary);
  font-size: 1rem;
  text-decoration: none;
}
.info-card__edit::after { content: ""; position: absolute; inset: -10px; }
.info-card__edit:hover, .info-card__edit:focus-visible { color: var(--action); background: var(--surface-sunken, transparent); }

/* ------------------------------------------------------- Bascule d'onglets */

.tab-switch {
  display: flex;
  gap: 3px;
  margin-top: var(--space-2);
  padding: 3px;
  background: var(--border-hairline);
  border-radius: var(--rounded-lg);
}
.tab-switch [role="tab"] {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-radius: var(--rounded-md);
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--body-size);
  font-weight: 700;
}
.tab-switch [role="tab"][aria-selected="true"] {
  background: var(--surface-raised);
  color: var(--ink-primary);
  box-shadow: var(--shadow-raised);
}
[data-sun] .tab-switch [role="tab"] { color: var(--surface-raised); }
[data-sun] .tab-switch [role="tab"][aria-selected="true"] { color: var(--ink-primary); }

/* Compteur sur un onglet (« n à placer ») : passe sous le libellé quand la place manque. */
.tab-switch [role="tab"] { flex-wrap: wrap; column-gap: var(--space-2); row-gap: 2px; }
.count-badge {
  display: inline-block;
  min-width: 1.5em;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: var(--rounded-md);
  background: var(--missing);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.tab-panel { padding-top: var(--space-2); }
.empty-state { color: var(--ink-secondary); padding: var(--space-5) var(--space-1); }

/* ------------------------------------------------------------ Panneau du bas */

dialog.panel {
  width: 100%;
  max-width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--rounded-sheet) var(--rounded-sheet) 0 0;
  background: var(--surface-raised);
  color: var(--ink-primary);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
dialog.panel[open] { display: flex; flex-direction: column; }
dialog.panel::backdrop { background: var(--scrim); }
[data-sun] dialog.panel { border-top: 2px solid var(--ink-primary); }

.panel__inner {
  overflow-y: auto;
  padding: var(--space-2) var(--space-4) var(--space-5);
}
.panel__grip {
  width: 40px;
  height: 5px;
  margin: var(--space-1) auto var(--space-3);
  border-radius: 3px;
  background: var(--border-hairline);
}
.panel__title { margin-bottom: var(--space-1); }
.panel__title:focus { outline: none; }
.panel__title:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.panel__help {
  color: var(--ink-secondary);
  font-size: var(--meta-size);
  margin-bottom: var(--space-3);
}

/* Option de panneau : grande ligne de 56 px ; « + Nouvelle… » en pointillé. */
.panel-option {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--line-width) solid transparent;
  border-radius: var(--rounded-lg);
  background: var(--surface-base);
  color: var(--ink-primary);
  font-weight: inherit;
  text-align: left;
}
.panel-option.new {
  background: var(--surface-raised);
  border: 2px dashed var(--ink-primary);
  font-weight: 700;
}

/* ------------------------------------------------------ Liste des plongeurs */

/* Filtres « À placer » / « Tous » et « + Plongeur ». */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}
.chips__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-4);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-md);
  background: var(--surface-raised);
  color: var(--ink-primary);
  font-size: var(--body-size);
  font-weight: inherit;
  text-decoration: none;
}
.chip[aria-pressed="true"] {
  background: var(--ink-primary);
  border-color: var(--ink-primary);
  color: var(--surface-raised);
  font-weight: 700;
}
.chip--new {
  border: 2px dashed var(--ink-primary);
  font-weight: 700;
}
[data-sun] .chip { border-color: var(--ink-primary); }

/* Ligne de plongeur : nom (prénom d'abord) et gaz, niveau, affectation, ✎. */
.diver-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 64px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-lg);
}
/* Nom, niveau et affectation passent à la ligne quand la place manque ; ✎ reste à droite. */
.diver-row__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}
.diver-row__main {
  flex: 1 1 7rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.diver-row__name { font-weight: 700; }
.diver-row__where {
  flex: none;
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  color: var(--ink-secondary);
}
.diver-row__where.is-missing { color: var(--missing); font-weight: 700; }

/* Étiquette de niveau (« N1 → N2 »). */
.level-tag {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px var(--space-2);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-sm);
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  color: var(--ink-secondary);
}

/* La ligne d'un plongeur qu'on peut placer : toucher son nom ouvre « Placer ». */
a.diver-row__place {
  align-self: stretch;
  min-height: var(--target-min);
  margin: calc(-1 * var(--space-2)) 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-4));
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-radius: var(--rounded-lg);
  color: inherit;
  text-decoration: none;
}
a.diver-row__place:hover .diver-row__name { text-decoration: underline; }

/* ------------------------------------------------------ Cartes de palanquée */

.chips form { margin: 0; display: flex; }

ul.group-list > li { margin-bottom: var(--space-3); }
.group-card {
  background: var(--surface-raised);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-lg);
  padding: var(--space-3);
}
.group-card__title { padding: var(--space-1) var(--space-1) var(--space-2); }
.group-card__members { list-style: none; margin: 0; padding: 0; }
.member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-1);
  border-top: var(--line-width) solid var(--surface-base);
}
[data-sun] .member { border-top-color: var(--border-hairline); }
.member__name { flex: 1 1 7rem; min-width: 0; font-weight: 700; }
/* Le chef en tête, séparé des autres membres par un trait épais (feuille du club). */
.member--chef .member__name { font-weight: 800; }
/* Le double chevron colle au niveau (le flex de la ligne laisse sinon --space-3). */
.member .chef-mark { margin-right: calc(var(--space-1) - var(--space-3)); }
.member--chef + .member { border-top: calc(2 * var(--line-width)) solid var(--ink-primary); }
/* La ligne d'un membre qu'on peut modifier : toute la ligne ouvre la fiche du plongeur. */
.member:has(> a.member__link) { padding: 0; }
a.member__link {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--rounded-md);
  color: inherit;
  text-decoration: none;
}
a.member__link:hover .member__name { text-decoration: underline; }
.group-card__empty { padding: var(--space-2) var(--space-1); margin: 0; }

/* « + Ajouter un plongeur » : pointillé, toute la largeur de la carte. */
.add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--target-min);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 2px dashed var(--ink-secondary);
  border-radius: var(--rounded-md);
  color: var(--ink-primary);
  font-weight: 700;
  text-decoration: none;
}
[data-sun] .add-button { border-color: var(--ink-primary); }
.group-card__delete {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-1);
  padding: 0 var(--space-1);
  color: var(--missing);
  font-size: var(--meta-size);
  font-weight: 700;
}

/* Options de « Placer » et « Ajouter à la palanquée ». */
.panel-option__title { display: block; font-weight: 700; overflow-wrap: anywhere; }
.panel-option__detail {
  display: block;
  margin-top: 2px;
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}
.panel-option__detail.is-missing { color: var(--missing); font-weight: 700; }
[data-sun] .panel-option { border-color: var(--ink-primary); }

/* Barre « n plongeurs à placer › » en bas de l'onglet Palanquées. */
.tab-panel--with-bar { padding-bottom: 88px; }
.todo-bar {
  position: fixed;
  left: var(--gutter-mobile);
  right: var(--gutter-mobile);
  bottom: var(--space-3);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 616px;
  min-height: 56px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--rounded-lg);
  background: var(--ink-primary);
  color: var(--surface-raised);
  font-weight: 700;
  text-decoration: none;
}

/* Message temporaire (3,5 s), avec « Annuler ». Au-dessus de la barre « à placer ». */
.toast {
  position: fixed;
  left: var(--gutter-mobile);
  right: var(--gutter-mobile);
  bottom: 80px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  max-width: 616px;
  margin: 0 auto;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  border-radius: var(--rounded-md);
  background: var(--ink-primary);
  color: var(--surface-raised);
  box-shadow: var(--shadow-panel);
}
[data-sun] .toast { outline: 2px solid var(--surface-raised); }
.toast__text { flex: 1 1 10rem; min-width: 0; padding: var(--space-2) 0; overflow-wrap: anywhere; }
.toast form { margin: 0; }
.toast .toast__undo {
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--surface-raised);
  font-weight: 800;
  text-decoration: underline;
}

ul.plain-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
ul.plain-list .person { vertical-align: top; }

/* ------------------------------------------- Pastilles et badge des plongeurs */

/* Disque de la couleur du rôle et sa lettre : blanche sur E et G, encre sur A et P ;
   filet intérieur encre sur P (et sur toutes en mode soleil). */
.diver-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--diver-dot-size);
  height: var(--diver-dot-size);
  border-radius: var(--rounded-full);
  font-size: var(--diver-dot-letter);
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
.diver-dot--e { background: var(--role-encadrant); color: #FFFFFF; }
.diver-dot--g { background: var(--role-guide); color: #FFFFFF; }
.diver-dot--a { background: var(--role-autonome); color: var(--ink-primary); }
.diver-dot--p {
  background: var(--role-plongeur);
  color: var(--ink-primary);
  box-shadow: inset 0 0 0 var(--diver-dot-ring) var(--ink-primary);
}
[data-sun] .diver-dot { box-shadow: inset 0 0 0 var(--diver-dot-ring) var(--ink-primary); }

/* « en formation » : un badge à côté, jamais une couleur de rôle. */
.training-badge {
  display: inline-block;
  flex: none;
  padding: 1px 7px;
  border: 1.5px solid var(--in-training);
  border-radius: var(--rounded-full);
  color: var(--in-training);
  font-size: var(--diver-dot-letter);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
[data-sun] .training-badge { border-width: 2px; }

/* Fonction écrite en clair sur la carte de palanquée. */
.member__function {
  flex: none;
  margin-left: auto;
  font-size: var(--meta-size);
  font-weight: 700;
  color: var(--ink-secondary);
}

/* Double chevron du chef, juste à gauche de son niveau ; « Palanquée autonome » sous le titre de la carte. */
.chef-mark {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-1);
  color: var(--ink-primary);
  vertical-align: middle;
}
.chef-mark svg { display: block; flex: none; }
[data-sun] .chef-mark svg { width: 18px; height: 18px; }
.group-card__autonomous {
  margin: 0;
  padding: 0 var(--space-1) var(--space-2);
  font-size: var(--meta-size);
  font-weight: 700;
  color: var(--ink-secondary);
}

/* En-tête de carte (titre et ✎) : il ouvre le panneau de la palanquée. */
a.group-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) 0;
  padding: 0 var(--space-1);
  border-radius: var(--rounded-md);
  color: inherit;
  text-decoration: none;
}
a.group-card__header .group-card__heading { flex: 1 1 auto; min-width: 0; }
a.group-card__header:hover .group-card__title { text-decoration: underline; }
/* ✎ de l'en-tête, comme sur les lignes de plongeurs : tout l'en-tête reste touchable. */
a.group-card__header:hover .group-card__edit,
a.group-card__header:focus-visible .group-card__edit { border-color: var(--ink-primary); }

/* Puces des prévus sous le titre de la carte (« ↓ 20 m », « ⏱ 40 min »). */
.group-card__title:has(+ .plan-chips) { padding-bottom: var(--space-1); }
.plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding: 0 var(--space-1) var(--space-2);
}
.plan-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--rounded-sm);
  background: var(--surface-base);
  color: var(--ink-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  max-width: 100%;
  overflow-wrap: anywhere;
}
[data-sun] .plan-chip {
  border: 2px solid var(--ink-primary);
  font-size: 16px;
}

/* Membres dans les options de « Placer ». */
.panel-option__member { display: inline-flex; align-items: center; gap: var(--space-1); }
.panel-option__member .diver-dot { margin-right: 2px; }
.panel-option__title .diver-dot { margin-right: var(--space-2); }

/* Légende d'un sélecteur de fonction : pastille, nom, niveau. */
fieldset.picker legend.picker__member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  max-width: 100%;
}
.picker__member .person { min-width: 0; }

/* ------------------------------------------------------- Sélecteurs de valeur */

fieldset.picker {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}
fieldset.picker legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-weight: 700;
}
.pick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Préfixés par .field pour passer devant « .field label » et « .field input ». */
.field .pick__option {
  position: relative;
  display: inline-flex;
  margin: 0;
  font-weight: inherit;
}
/* Le bouton radio reste dans la page (clavier, lecteurs d'écran) mais invisible. */
.field .pick__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.pick__option > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: var(--target-icon);
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-md);
  background: var(--surface-raised);
}
.pick__option input:checked + span {
  background: var(--ink-primary);
  border-color: var(--ink-primary);
  color: var(--surface-raised);
  font-weight: 700;
}
.pick__option input:focus-visible + span {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}
.pick__option--other > span { border: 2px dashed var(--ink-primary); }
[data-sun] .pick__option > span { border-color: var(--ink-primary); }
.pick__other {
  width: 100%;
  min-height: var(--target-min);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-md);
  background: var(--surface-raised);
  font: inherit;
  color: inherit;
}
[data-sun] .pick__other { border-color: var(--ink-primary); }

/* Panneau de palanquée : les prévus dans un encadré teinté, puis « Plongeurs · n ». */
.plan-box {
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  border-radius: var(--rounded-md);
  background: var(--surface-base);
}
.plan-box .section-label { margin-top: 0; }
.plan-box .field:last-child { margin-bottom: 0; }
[data-sun] .plan-box { border: 2px solid var(--ink-primary); }

/* Prévus du panneau : valeurs standard (comme .pick), puis − champ +. */
.plan__presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.plan__input { display: flex; align-items: stretch; gap: var(--space-2); }
.field .plan__input input { flex: 1 1 auto; min-width: 0; width: auto; text-align: center; }
.plan__preset, .plan__step {
  min-width: 52px;
  min-height: var(--target-icon);
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-md);
  background: var(--surface-raised);
  color: var(--ink-primary);
  font-weight: inherit;
}
.plan__step { flex: none; min-height: var(--target-min); font-size: 22px; font-weight: 700; line-height: 1; }
.plan__preset[aria-pressed="true"] {
  background: var(--ink-primary);
  border-color: var(--ink-primary);
  color: var(--surface-raised);
  font-weight: 700;
}
[data-sun] .plan__preset, [data-sun] .plan__step { border-color: var(--ink-primary); }

/* -------------------------------------------------------------- Grand écran */

@media (min-width: 900px) {
  dialog.panel {
    width: 420px;
    max-height: calc(100dvh - 32px);
    margin: auto var(--space-4) var(--space-4) auto;
    border-radius: var(--rounded-lg);
  }
  [data-sun] dialog.panel { border: 2px solid var(--ink-primary); }

  /* La fiche en deux colonnes : la liste des plongeurs à gauche, la grille des cartes à droite.
     Plus de bascule d'onglets (le compteur « à placer » reste sur le filtre de la liste). */
  main:has(> .sheet-board),
  .app-header--sheet .app-header__inner { max-width: 1280px; }
  .app-header--sheet .tab-switch { display: none; }
  .sheet-board {
    display: grid;
    grid-template-columns: var(--list-column-wide) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
  /* Sans JavaScript, les deux vues restent visibles (x-cloak ne masque plus rien). */
  .sheet-board > .tab-panel[x-cloak] { display: block !important; }
  .sheet-board .tab-panel--with-bar { padding-bottom: 0; }
  .sheet-board .todo-bar, .sheet-board .groups-done { display: none; }
  ul.group-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--group-card-min), 1fr));
    gap: var(--space-3);
  }
  ul.group-list > li { margin-bottom: 0; }

  /* Glisser-déposer : lignes glissables, cible survolée, place de la ligne pendant le geste. */
  .sheet-board[x-data] [data-place-url] { cursor: grab; }
  .sheet-board[x-data] .diver-list { min-height: var(--target-min); }
  /* Chaque carte est une cible : sa liste de membres occupe tout le bas de la carte. */
  ul.group-list { align-items: stretch; }
  .group-card { display: flex; flex-direction: column; }
  .group-card__members[data-group-id] { flex: 1 1 auto; min-height: var(--target-min); }
  .is-drop-target.group-card,
  .is-drop-target.tab-panel { outline: 2px solid var(--ink-primary); outline-offset: 2px; border-radius: var(--rounded-lg); }
  .is-drag-ghost { opacity: 0.4; }
  .is-drag-chosen { cursor: grabbing; }

  /* « + Nouvelle palanquée » en fin de grille : toute la carte pointillée reçoit le dépôt. */
  .group-card--new {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    background: transparent;
    border: 2px dashed var(--ink-secondary);
    color: var(--ink-primary);
    font-weight: 700;
  }
  [data-sun] .group-card--new { border-color: var(--ink-primary); }
  .group-card--new > .group-card__members {
    position: absolute;
    inset: 0;
    padding: var(--space-2);
    overflow: hidden;
  }
  .group-card--new > .group-card__members > * { opacity: 0.4; }
}

/* La liste reste à l'écran quand on fait défiler les cartes (si l'en-tête, collant, a la place). */
@media (min-width: 900px) and (min-height: 600px) {
  .sheet-board > #panel-divers {
    position: sticky;
    top: calc(var(--sheet-header-height, 72px) + var(--space-2));
    max-height: calc(100dvh - var(--sheet-header-height, 72px) - var(--space-4));
    overflow-y: auto;
  }
}

/* Sans palanquée, la grille ne porte que « + Nouvelle palanquée » : rien sous 900 px. */
@media (max-width: 899.98px) {
  ul.group-list--empty { display: none; }
}

/* ------------------------------------------------------------- Mes fiches */

.card__main .meta { display: block; }
.card.empty { padding: var(--space-5) var(--space-4); }
.card.empty p { font-weight: 700; }
form.logout { margin-top: var(--space-6); text-align: center; }

/* ------------------------------------------------------------- Historique */

/* Une version par carte : <details> natif, dépliable sans JavaScript. */
.ver {
  background: var(--surface-raised);
  border: var(--line-width) solid var(--border-hairline);
  border-radius: var(--rounded-lg);
  overflow: hidden;
}
.ver__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
}
.ver__head::-webkit-details-marker { display: none; }
.ver__head::after {
  content: "▾";
  flex: none;
  color: var(--ink-secondary);
}
.ver[open] > .ver__head::after { content: "▴"; }
.ver__time {
  flex: none;
  min-width: 3.25em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ver__time small, .ver__who small {
  display: block;
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  color: var(--ink-secondary);
}
.ver__who { flex: 1 1 auto; min-width: 0; }
.ver__who .person { display: block; }
.ver__current {
  flex: none;
  padding: 2px var(--space-2);
  border-radius: var(--rounded-sm);
  background: var(--role-guide);
  color: var(--on-action);
  font-size: var(--meta-size);
  font-weight: 800;
}
.ver__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: var(--line-width) solid var(--border-hairline);
}
.ver__body > .meta { margin-bottom: var(--space-1); }
ul.ver__changes { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.chg {
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border-hairline);
  overflow-wrap: anywhere;
}
.chg:last-child { border-bottom: 0; }
.chg s { color: var(--ink-secondary); }
.chg b { color: var(--action); }
.ver__body > .button { margin-top: var(--space-2); }
.versions__note { text-align: center; }
.history-toast { bottom: var(--space-3); }
/* Sans JavaScript, le message reste : la fin de l'historique passe au-dessus. */
main:has(> .history-toast) { padding-bottom: calc(var(--space-6) + 72px); }

/* Confirmation « Revenir à la version n ? ». */
.card.restore .banner { margin-bottom: 0; }

/* Menu ⋯ de la fiche : lignes de 48 px au moins. */
ul.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list__item {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-2);
  border-bottom: var(--line-width) solid var(--border-hairline);
  color: var(--ink-primary);
  font-weight: 700;
  text-decoration: none;
}
.menu-list__item--danger { color: var(--missing); }