/*
 * Composants du design system « Atlantique & Dune » (docs/04 § 7).
 *
 * Chaque bloc correspond à un gabarit de templates/components/ (documentation d'usage en tête
 * du gabarit) ou à un motif utilisé par les écrans des couloirs (c-page-header, c-card…).
 * Valeurs issues de tokens.css uniquement ; propriétés logiques uniquement (RTL) ;
 * BEM : c-bloc__élément--modificateur, états is-* / has-*.
 */

/* ===== Lien d'évitement ===== */

.c-skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-field);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-modal);
}

/* ===== Touches clavier ===== */

kbd {
  display: inline-block;
  min-inline-size: var(--size-kbd);
  padding-inline: var(--space-1);
  border: var(--border-width) solid var(--color-input-border);
  border-block-end-width: var(--size-kbd-border);
  border-radius: var(--radius-field);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  text-align: center;
}

/* ===== En-tête de page, fil d'Ariane, onglets ===== */

.c-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-4);
}

/* Ordre visuel fixe quel que soit l'ordre du DOM (CR-130) : retour, puis titre et actions
   sur une même ligne, puis sous-titre sur toute la largeur. */
.c-page-header__title {
  flex: 1 1 auto;
  order: 1;
  font-size: var(--font-size-xl);
}

.c-page-header__actions,
.c-page-header > .c-button {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-inline-start: auto;
  order: 2;
}

.c-page-header__subtitle,
.c-page-header__lead {
  flex-basis: 100%;
  order: 3;
  max-inline-size: var(--size-measure);
  color: var(--color-text-muted);
}

/* Lien de retour : la flèche est un élément flexible, placée côté début quelle que soit la
   langue (l'algorithme bidi la déplacerait en fin de ligne dans un texte arabe). */
.c-page-header__back {
  display: flex;
  flex-basis: 100%;
  order: 0;
  align-items: center;
  gap: var(--space-1);
  max-inline-size: max-content;
  font-size: var(--font-size-sm);
}

.c-page-header__back::before {
  content: "←";
}

[dir="rtl"] .c-page-header__back::before {
  content: "→";
}

.c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.c-breadcrumb > * + *::before {
  content: "/";
  display: inline-block;
  margin-inline-end: var(--space-2);
  color: var(--color-text-muted);
}

.c-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-block-end: var(--border-width) solid var(--color-line);
}

.c-tabs__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-control);
  padding-inline: var(--space-4);
  border-block-end: var(--size-nav-marker) solid transparent;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

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

.c-tabs__link.is-active,
.c-tabs__link[aria-current="page"] {
  border-block-end-color: var(--color-primary);
  color: var(--color-primary);
}

/* ===== Bouton (c-button) ===== */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--size-control);
  padding-block: var(--space-1);
  padding-inline: var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-field);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing),
    border-color var(--motion-duration-fast) var(--motion-easing);
}

.c-button--primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.c-button--primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-text-on-primary);
}

.c-button--secondary {
  border-color: var(--color-primary);
}

.c-button--secondary:hover,
.c-button--ghost:hover {
  background-color: var(--color-lagoon-50);
  color: var(--color-primary-hover);
}

.c-button--ghost {
  background-color: transparent;
}

.c-button--danger {
  background-color: var(--color-danger-600);
  color: var(--color-text-on-primary);
}

.c-button--danger:hover {
  background-color: var(--color-danger-600);
  color: var(--color-text-on-primary);
  box-shadow: inset 0 0 0 var(--size-hover-inset) var(--color-ink-900);
}

.c-button:disabled,
.c-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* Chargement : spinner devant le libellé conservé (static/js/forms.js pose aria-busy) */
.c-button[aria-busy="true"]::before {
  content: "";
  inline-size: var(--size-spinner);
  block-size: var(--size-spinner);
  border: var(--size-spinner-stroke) solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-pill);
  animation: c-spin var(--motion-duration-spin) linear infinite;
}

@keyframes c-spin {
  to {
    transform: rotate(1turn);
  }
}

/* ===== Champs (c-field, c-form, c-filters) ===== */

input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="range"], [type="color"]),
select,
textarea {
  min-block-size: var(--size-control);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-input-border);
  border-radius: var(--radius-field);
  background-color: var(--color-surface);
  color: var(--color-text);
}

textarea {
  padding-block: var(--space-2);
}

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

:is(input, select, textarea):disabled {
  opacity: var(--opacity-disabled);
}

input[type="checkbox"],
input[type="radio"] {
  inline-size: var(--size-checkbox);
  block-size: var(--size-checkbox);
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

input[type="file"] {
  max-inline-size: 100%;
}

[aria-invalid="true"],
.has-error :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  border-color: var(--color-danger-600);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-danger-600);
}

.c-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

/* Action principale en fin de formulaire, côté fin de ligne (§ 1) */
.c-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-block-start: var(--space-2);
}

.c-form__hint {
  max-inline-size: var(--size-measure);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.c-field :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  inline-size: 100%;
  max-inline-size: var(--size-field-max);
}

.c-field__label {
  font-weight: var(--font-weight-medium);
}

.c-field__required {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.c-field__help {
  max-inline-size: var(--size-measure);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--color-danger-600);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.c-field__error .c-icon {
  inline-size: var(--size-badge-icon);
  block-size: var(--size-badge-icon);
  margin-block-start: var(--space-1);
}

.c-field--checkbox {
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-2);
}

.c-field--checkbox .c-field__label {
  flex: 1;
  font-weight: var(--font-weight-regular);
}

.c-field--checkbox > :is(.c-field__help, .c-field__error) {
  flex-basis: 100%;
}

.c-field__choices > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-field__choices label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-control);
}

.c-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
}

.c-filters > .c-field {
  flex: 1 1 var(--size-filter-min);
}

/* ===== Recherche NNI (c-nni-search) ===== */

.c-nni-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.c-nni-search > .c-field {
  flex: 0 1 var(--size-nni-input);
}

.c-nni-search input:not([type="hidden"]) {
  block-size: var(--size-nni-field);
  max-inline-size: var(--size-nni-input);
  font-size: var(--font-size-nni);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-nni);
  /* Le NNI reste en chiffres occidentaux, de gauche à droite, même en arabe */
  direction: ltr;
}

.c-nni-search > .c-button {
  min-block-size: var(--size-nni-field);
  padding-inline: var(--space-6);
}

/* Le bouton reste aligné sur le champ quand une aide ou une erreur s'affiche dessous */
.c-nni-search:has(.c-field__help, .c-field__error) {
  align-items: flex-start;
}

.c-nni-search:has(.c-field__help, .c-field__error) > .c-button {
  margin-block-start: calc(var(--font-size-body) * var(--line-height-body) + var(--space-1));
}

.c-nni-search--compact input:not([type="hidden"]) {
  block-size: var(--size-control);
  font-size: var(--font-size-body);
}

.c-nni-search--compact > .c-button {
  min-block-size: var(--size-control);
  padding-inline: var(--space-4);
}

/* ===== Tableau (c-table) ===== */

/* Cadre : <div class="c-table"> ou <div class="c-table-wrapper">, défilement horizontal si besoin */
div.c-table,
.c-table-wrapper {
  max-inline-size: 100%;
  overflow-x: auto;
}

div.c-table,
.c-table-wrapper > table.c-table {
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.c-table-wrapper > * + * {
  margin-block-start: var(--space-4);
}

:is(table.c-table, .c-table__table) {
  inline-size: 100%;
  font-variant-numeric: tabular-nums;
}

:is(table.c-table, .c-table__table) :is(th, td) {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-block-end: var(--border-width) solid var(--color-line);
  text-align: start;
  vertical-align: middle;
}

:is(table.c-table, .c-table__table) thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-raised);
  background-color: var(--color-salt);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

:is(table.c-table, .c-table__table) tbody tr:last-child > * {
  border-block-end: 0;
}

:is(table.c-table, .c-table__table) tbody tr:hover {
  background-color: var(--color-lagoon-50);
}

:is(table.c-table, .c-table__table) tbody th {
  font-weight: var(--font-weight-medium);
}

.c-table--compact :is(th, td),
.c-table__table.c-table--compact :is(th, td) {
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
}

/* Ligne cliquable : le premier lien de la ligne couvre toute la ligne */
.c-table__row {
  position: relative;
}

.c-table__row > :first-child a:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
}

.c-table__row:has(> :first-child a):hover {
  cursor: pointer;
}

.c-table__actions {
  position: relative;
  z-index: var(--z-raised);
  text-align: end;
  white-space: nowrap;
}

:is(table.c-table, .c-table__table) .c-table__actions {
  text-align: end;
}

/* Les <dialog> de confirmation sont exclus : un `display` explicite écraserait le
   `display: none` natif d'un dialogue fermé et l'afficherait dans la cellule. */
.c-table__actions > :not(dialog) {
  display: inline-flex;
  vertical-align: middle;
}

.c-table__actions > :not(dialog) ~ :not(dialog) {
  margin-inline-start: var(--space-2);
}

:is(table.c-table, .c-table__table) :is(.c-table__number, .c-table__cell--numeric) {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

tr.is-selected {
  background-color: var(--color-selection);
}

tr.is-deciding {
  background-color: var(--color-dune-100);
}

.c-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
}

.c-table__sort:hover {
  color: var(--color-primary);
}

.c-table__sort-icon {
  inline-size: var(--size-badge-icon);
  block-size: var(--size-badge-icon);
  opacity: 0;
}

.c-table__sort:is(:hover, :focus-visible) .c-table__sort-icon,
.c-table__sort:is(.is-ascending, .is-descending) .c-table__sort-icon {
  opacity: 1;
}

.c-table__sort.is-ascending .c-table__sort-icon {
  transform: rotate(0.5turn);
}

/* ===== Pagination ===== */

.c-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.c-pagination__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--size-control);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-field);
  background-color: var(--color-surface);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.c-pagination__link:hover {
  border-color: var(--color-primary);
}

.c-pagination__current {
  font-weight: var(--font-weight-semibold);
}

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

/* ===== Badge de statut (c-badge, § 3) ===== */

.c-badge {
  --badge-bg: var(--color-salt);
  --badge-fg: var(--color-ink-600);

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-half);
  padding-inline: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-pill);
  background-color: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  white-space: nowrap;
}

.c-badge__icon {
  inline-size: var(--size-badge-icon);
  block-size: var(--size-badge-icon);
}

/* Statuts de candidature */
.c-badge--submitted {
  --badge-bg: var(--color-status-submitted-bg);
  --badge-fg: var(--color-status-submitted-fg);
}

.c-badge--selected {
  --badge-bg: var(--color-status-selected-bg);
  --badge-fg: var(--color-status-selected-fg);

  border-color: transparent;
}

.c-badge--waitlisted {
  --badge-bg: var(--color-status-waitlisted-bg);
  --badge-fg: var(--color-status-waitlisted-fg);

  border-color: transparent;
}

/* Point dune-500 de la liste d'attente */
.c-badge--waitlisted::before {
  content: "";
  inline-size: var(--size-badge-dot);
  block-size: var(--size-badge-dot);
  border-radius: var(--radius-pill);
  background-color: var(--color-status-waitlisted-dot);
}

.c-badge--not-selected {
  --badge-bg: var(--color-status-not-selected-bg);
  --badge-fg: var(--color-status-not-selected-fg);
}

.c-badge--promoted {
  --badge-bg: var(--color-status-promoted-bg);
  --badge-fg: var(--color-status-promoted-fg);

  border-color: transparent;
}

.c-badge--checked-in {
  --badge-bg: var(--color-status-checked-in-bg);
  --badge-fg: var(--color-status-checked-in-fg);

  border-color: transparent;
}

.c-badge--no-show {
  --badge-bg: var(--color-status-no-show-bg);
  --badge-fg: var(--color-status-no-show-fg);

  border-color: transparent;
}

.c-badge--withdrawn {
  --badge-bg: var(--color-status-withdrawn-bg);
  --badge-fg: var(--color-status-withdrawn-fg);
}

.c-badge--terminated {
  --badge-bg: var(--color-status-terminated-bg);
  --badge-fg: var(--color-status-terminated-fg);

  border-color: transparent;
}

.c-badge--exceptional {
  --badge-bg: var(--color-status-exceptional-bg);
  --badge-fg: var(--color-status-exceptional-fg);

  border-color: transparent;
}

/* Badges neutres utilisés par les écrans (campagnes, lits, référentiels) */
.c-badge--open,
.c-badge--current,
.c-badge--free {
  --badge-bg: var(--color-lagoon-100);
  --badge-fg: var(--color-lagoon-700);

  border-color: transparent;
}

.c-badge--active {
  --badge-bg: var(--color-success-50);
  --badge-fg: var(--color-success-700);

  border-color: transparent;
}

.c-badge--population {
  --badge-bg: var(--color-info-50);
  --badge-fg: var(--color-info-600);

  border-color: transparent;
}

.c-badge--warning {
  --badge-bg: var(--color-warning-50);
  --badge-fg: var(--color-warning-700);

  border-color: transparent;
}

.c-badge--occupied,
.c-badge--out_of_service,
.c-badge--out-of-service {
  background-image: var(--pattern-hatch);
  color: var(--color-ink-900);
}

/* ===== Bandeau (c-banner) ===== */

.c-banner {
  --banner-bg: var(--color-info-50);
  --banner-accent: var(--color-info-600);

  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--banner-accent);
  border-inline-start-width: var(--size-banner-marker);
  border-radius: var(--radius-card);
  background-color: var(--banner-bg);
  color: var(--color-text);
}

/* Bandeau sans élément interne (texte directement dans le bloc) */
.c-banner:not(:has(> .c-banner__body)) {
  flex-direction: column;
  gap: var(--space-1);
}

.c-banner__icon {
  margin-block-start: var(--space-half);
  color: var(--banner-accent);
}

.c-banner__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
}

.c-banner__title {
  font-weight: var(--font-weight-semibold);
}

.c-banner__list {
  padding-inline-start: var(--space-6);
}

.c-banner--warning {
  --banner-bg: var(--color-warning-50);
  --banner-accent: var(--color-warning-700);
}

.c-banner--danger {
  --banner-bg: var(--color-danger-50);
  --banner-accent: var(--color-danger-600);
}

.c-banner--success {
  --banner-bg: var(--color-success-50);
  --banner-accent: var(--color-success-700);
}

/* Mode cas exceptionnels : bandeau indigo permanent (§ 8.4) */
.c-banner--exceptional {
  --banner-bg: var(--color-indigo-50);
  --banner-accent: var(--color-indigo-900);
}

.c-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ===== Cartes, panneaux, listes de définitions ===== */

.c-card,
.c-panel,
.c-run-validation,
.c-published-section {
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.c-card > * + *,
.c-panel > * + *,
.c-run-validation > * + *,
.c-published-section > * + * {
  margin-block-start: var(--space-4);
}

.c-card__title,
.c-panel__title {
  font-size: var(--font-size-lg);
}

.c-card__text,
.c-panel__meta,
.c-panel__note {
  color: var(--color-text-muted);
}

.c-panel__meta,
.c-panel__note {
  font-size: var(--font-size-sm);
}

.c-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.c-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min), 1fr));
  gap: var(--space-4);
  padding: var(--space-0);
  list-style: none;
}

.c-summary {
  display: grid;
}

.c-summary__row {
  display: grid;
  grid-template-columns: minmax(var(--size-summary-term), 1fr) 2fr;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: var(--border-width) solid var(--color-line);
}

.c-summary__row:last-child {
  border-block-end: 0;
}

.c-summary__row dt {
  color: var(--color-text-muted);
}

.c-summary__row dd {
  margin: 0;
  font-weight: var(--font-weight-medium);
}

.c-summary__row.is-corrected dd {
  color: var(--color-accent-text);
}

.c-summary__correction {
  color: var(--color-accent-text);
  font-size: var(--font-size-sm);
}

.c-summary__missing {
  color: var(--color-warning-700);
  font-weight: var(--font-weight-medium);
}

.c-summary__documents {
  padding-inline-start: var(--space-6);
}

.c-identity-card {
  border-inline-start: var(--size-banner-marker) solid var(--color-primary);
}

.c-identity-card__name-ar {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-lg);
}

.c-correction-list {
  display: grid;
  gap: var(--space-4);
}

.c-correction {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--size-filter-min), 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: start;
}

.c-correction__reason {
  padding-inline-start: var(--space-3);
  border-inline-start: var(--size-nav-marker) solid var(--color-accent);
}

.c-document-list,
.c-bed-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-0);
  list-style: none;
}

.c-document-list {
  flex-direction: column;
}

.c-bed-list__item,
.c-document-list__item {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ===== Guichet (écran de lane C) ===== */

.c-desk > * + * {
  margin-block-start: var(--space-6);
}

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

.c-desk__cancel {
  display: inline-block;
}

/* ===== Assistant (c-stepper) ===== */

.c-stepper {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-0);
  list-style: none;
}

.c-stepper__step {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  color: var(--color-text-muted);
}

/* Trait entre deux étapes */
.c-stepper__step:not(:last-child)::after {
  content: "";
  flex: 1;
  min-inline-size: var(--space-4);
  block-size: var(--size-stepper-line);
  background-color: var(--color-line);
}

.c-stepper__step.is-done:not(:last-child)::after {
  background-color: var(--color-primary);
}

.c-stepper__number {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  inline-size: var(--size-stepper-number);
  block-size: var(--size-stepper-number);
  border: var(--size-stepper-line) solid var(--color-input-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.c-stepper__number .c-icon {
  inline-size: var(--size-badge-icon);
  block-size: var(--size-badge-icon);
}

.c-stepper__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.c-stepper__step.is-current {
  color: var(--color-text);
}

.c-stepper__step.is-current .c-stepper__number {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.c-stepper__step.is-current .c-stepper__label {
  font-weight: var(--font-weight-semibold);
}

.c-stepper__step.is-done {
  color: var(--color-lagoon-700);
}

.c-stepper__step.is-done .c-stepper__number {
  border-color: var(--color-primary);
  background-color: var(--color-lagoon-100);
  color: var(--color-lagoon-700);
}

/* ===== Modale (c-dialog) ===== */

.c-dialog {
  inline-size: calc(100% - 2 * var(--space-4));
  max-inline-size: var(--size-dialog);
  padding: var(--space-6);
  border: 0;
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-modal);
}

.c-dialog::backdrop {
  background-color: var(--color-backdrop);
}

.c-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-dialog__title {
  font-size: var(--font-size-lg);
}

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

.c-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ===== Notification (c-toast) ===== */

.c-toast-region {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: min(var(--size-toast), calc(100% - 2 * var(--space-6)));
  pointer-events: none;
}

.c-toast {
  --toast-accent: var(--color-info-600);

  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  padding-inline: var(--space-4) var(--space-2);
  border: var(--border-width) solid var(--color-line);
  border-inline-start: var(--size-banner-marker) solid var(--toast-accent);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-modal);
  pointer-events: auto;
}

.c-toast--success {
  --toast-accent: var(--color-success-700);
}

.c-toast--warning {
  --toast-accent: var(--color-warning-700);
}

.c-toast--danger {
  --toast-accent: var(--color-danger-600);
}

.c-toast__icon {
  margin-block-start: var(--space-half);
  color: var(--toast-accent);
}

.c-toast__message {
  flex: 1;
  padding-block-start: var(--space-half);
}

.c-toast__action,
.c-toast__close {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  min-inline-size: var(--size-control);
  min-block-size: var(--size-control);
  padding-inline: var(--space-2);
  border: 0;
  border-radius: var(--radius-field);
  background: transparent;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.c-toast__action:hover,
.c-toast__close:hover {
  background-color: var(--color-lagoon-50);
}

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

/* ===== Pastille de campagne ===== */

.c-campaign-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
}

.c-campaign-pill--open {
  background-color: var(--color-lagoon-100);
  color: var(--color-lagoon-700);
}

.c-campaign-pill--upcoming {
  background-color: var(--color-dune-100);
  color: var(--color-ink-900);
}

.c-campaign-pill--none {
  border-color: var(--color-line);
  background-color: var(--color-salt);
  color: var(--color-ink-600);
}

.c-campaign-pill__icon {
  inline-size: var(--size-badge-icon);
  block-size: var(--size-badge-icon);
}

.c-campaign-pill__name,
.c-campaign-pill__countdown {
  font-weight: var(--font-weight-semibold);
}

.c-campaign-pill__status {
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
}

.c-campaign-pill__countdown::before {
  content: "·";
  margin-inline-end: var(--space-2);
}

/* ===== Bascule FR | AR ===== */

.c-lang-switch {
  display: inline-flex;
  border: var(--border-width) solid var(--color-input-border);
  border-radius: var(--radius-field);
  overflow: hidden;
}

.c-lang-switch__option {
  min-block-size: var(--size-control);
  padding-inline: var(--space-3);
  border: 0;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.c-lang-switch__option + .c-lang-switch__option {
  border-inline-start: var(--border-width) solid var(--color-input-border);
}

.c-lang-switch__option:hover {
  background-color: var(--color-lagoon-50);
}

.c-lang-switch__option[aria-current="true"] {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.c-lang-switch__option:focus-visible {
  outline-offset: calc(var(--focus-ring-width) * -1);
}

/* ===== Menu utilisateur ===== */

.c-user-menu {
  position: relative;
}

.c-user-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-control);
  padding-inline: var(--space-3);
  border-radius: var(--radius-field);
  cursor: pointer;
  list-style: none;
}

.c-user-menu__toggle::-webkit-details-marker {
  display: none;
}

.c-user-menu__toggle:hover,
.c-user-menu[open] > .c-user-menu__toggle {
  background-color: var(--color-salt);
}

.c-user-menu__name {
  max-inline-size: var(--size-user-name-max);
  overflow: hidden;
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-user-menu__chevron {
  inline-size: var(--size-badge-icon);
  block-size: var(--size-badge-icon);
  transition: transform var(--motion-duration-fast) var(--motion-easing);
}

.c-user-menu[open] .c-user-menu__chevron {
  transform: rotate(0.5turn);
}

.c-user-menu__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: 0;
  z-index: var(--z-popover);
  min-inline-size: var(--size-popover);
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-modal);
}

.c-user-menu__identity {
  padding: var(--space-2) var(--space-3);
  border-block-end: var(--border-width) solid var(--color-line);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-user-menu__list {
  padding-block-start: var(--space-1);
}

.c-user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--size-control);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-field);
  background: transparent;
  color: var(--color-text);
  text-align: start;
  text-decoration: none;
}

.c-user-menu__item:hover {
  background-color: var(--color-lagoon-50);
  color: var(--color-text);
}

/* ===== Carte KPI (c-kpi) ===== */

.c-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-kpi-min), 1fr));
  gap: var(--space-4);
  padding: var(--space-0);
  list-style: none;
}

.c-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-4);
  padding-inline: var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.c-kpi__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.c-kpi__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-heading);
}

.c-kpi__delta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.c-kpi__delta--positive {
  color: var(--color-success-700);
}

.c-kpi__delta--negative {
  color: var(--color-danger-600);
}

.c-kpi__delta--neutral {
  color: var(--color-text-muted);
}

.c-kpi__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  font-size: var(--font-size-sm);
}

/* ===== Plan des lits (c-bed-map) ===== */

/* Apparence de chaque état, partagée par les cases et la légende */
.c-bed-map__cell--free {
  --bed-bg: var(--color-lagoon-50);
  --bed-border: var(--color-lagoon-600);
  --bed-fg: var(--color-lagoon-700);
  --bed-pattern: none;
  --bed-border-style: solid;
}

.c-bed-map__cell--occupied {
  --bed-bg: var(--color-surface);
  --bed-border: var(--color-ink-600);
  --bed-fg: var(--color-ink-900);
  --bed-pattern: var(--pattern-hatch);
  --bed-border-style: solid;
}

.c-bed-map__cell--out_of_service {
  --bed-bg: var(--color-salt);
  --bed-border: var(--color-input-border);
  --bed-fg: var(--color-ink-600);
  --bed-pattern: var(--pattern-hatch);
  --bed-border-style: dashed;
}

.c-bed-map__cell--selected,
.c-bed-map__cell:has(.c-bed-map__input:checked) {
  --bed-bg: var(--color-accent);
  --bed-border: var(--color-accent-text);
  --bed-fg: var(--color-ink-900);
  --bed-pattern: none;
  --bed-border-style: solid;
}

.c-bed-map {
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

#occupancy-plans > * + * {
  margin-block-start: var(--space-6);
}

.c-bed-map__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}

.c-bed-map__title {
  font-size: var(--font-size-lg);
}

.c-bed-map__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
}

.c-bed-map__counts > div {
  display: flex;
  gap: var(--space-1);
}

.c-bed-map__counts dt {
  color: var(--color-text-muted);
}

.c-bed-map__counts dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.c-bed-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-0);
  font-size: var(--font-size-sm);
  list-style: none;
}

.c-bed-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.c-bed-map__legend-item::before {
  content: "";
  inline-size: var(--size-icon);
  block-size: var(--size-icon);
  border: var(--border-width) var(--bed-border-style) var(--bed-border);
  border-radius: var(--radius-field);
  background: var(--bed-pattern), var(--bed-bg);
}

.c-bed-map__floor {
  margin-block-start: var(--space-6);
}

.c-bed-map__floor-title {
  margin-block-end: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-bed-map__rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-room-min), 1fr));
  gap: var(--space-3);
  padding: var(--space-0);
  list-style: none;
}

.c-bed-map__room {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-field);
}

.c-bed-map__room.is-inactive {
  border-style: dashed;
  color: var(--color-text-muted);
}

.c-bed-map__room-number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.c-bed-map__beds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-0);
  list-style: none;
}

.c-bed-map__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: var(--size-bed-cell);
  min-block-size: var(--size-control);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border: var(--border-width) var(--bed-border-style, solid) var(--bed-border, var(--color-line));
  border-radius: var(--radius-field);
  background: var(--bed-pattern, none), var(--bed-bg, var(--color-surface));
  color: var(--bed-fg, var(--color-text));
}

.c-bed-map__bed {
  display: flex;
  flex-direction: column;
}

/* Plan sélectionnable : le libellé occupe toute la case */
.c-bed-map--selectable .c-bed-map__cell:has(.c-bed-map__input) {
  padding: var(--space-0);
}

.c-bed-map--selectable label.c-bed-map__bed {
  flex: 1;
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  cursor: pointer;
}

.c-bed-map__cell:has(.c-bed-map__input:not(:checked)):hover {
  --bed-bg: var(--color-lagoon-100);
}

.c-bed-map__cell:has(.c-bed-map__input:checked) {
  box-shadow: 0 0 0 var(--size-bed-ring) var(--color-accent-text);
}

/* Bouton radio invisible mais focalisable : l'anneau de focus est porté par la case */
.c-bed-map__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.c-bed-map__cell:has(.c-bed-map__input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.c-bed-map__bed-label {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.c-bed-map__bed-status {
  font-size: var(--font-size-xs);
}

.c-bed-map__icon {
  inline-size: var(--size-badge-icon);
  block-size: var(--size-badge-icon);
}

.c-bed-map__empty {
  margin-block-start: var(--space-4);
  color: var(--color-text-muted);
}

/* ===== Liste de contrôle (c-checklist) ===== */

.c-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-checklist__legend {
  margin-block-end: var(--space-2);
  font-weight: var(--font-weight-semibold);
}

.c-checklist__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-checklist-item-min), 1fr));
  gap: var(--space-2);
  padding: var(--space-0);
  list-style: none;
}

.c-checklist__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-block-size: var(--size-target-desk);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-field);
  background-color: var(--color-surface);
}

.c-checklist__item:hover {
  background-color: var(--color-lagoon-50);
}

.c-checklist__item:has(input[type="checkbox"]:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-lagoon-50);
}

.c-checklist__item input[type="checkbox"] {
  inline-size: var(--size-checkbox-desk);
  block-size: var(--size-checkbox-desk);
}

.c-checklist__item label {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-block-size: var(--size-target-desk);
  cursor: pointer;
}

.c-checklist__hint {
  flex-basis: 100%;
  padding-block-end: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-checklist__quantity {
  inline-size: var(--size-quantity);
  font-variant-numeric: tabular-nums;
}

.c-checklist__toggle-all {
  align-self: flex-start;
}

/* ===== État vide (c-empty) ===== */

.c-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-12);
  padding-inline: var(--space-6);
  border: var(--border-width) dashed var(--color-line);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
}

.c-empty__icon {
  inline-size: var(--size-empty-icon);
  block-size: var(--size-empty-icon);
  stroke-width: var(--icon-stroke-width-thin);
  color: var(--color-primary);
}

.c-empty__text {
  max-inline-size: var(--size-measure);
}

/* ===== Squelette de chargement (c-skeleton) ===== */

.c-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-skeleton__line {
  display: block;
  block-size: var(--size-skeleton-line);
  border-radius: var(--radius-field);
  background-color: var(--color-line);
  animation: c-pulse var(--motion-duration-pulse) var(--motion-easing) infinite alternate;
}

.c-skeleton__line:last-child:not(:first-child) {
  inline-size: var(--size-skeleton-last);
}

@keyframes c-pulse {
  from {
    opacity: 1;
  }

  to {
    opacity: var(--opacity-disabled);
  }
}

/* Indicateurs htmx (htmx.config.includeIndicatorStyles = false : styles ici, CSP) */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: revert;
}

/* ===== Connexion (templates/registration/) ===== */

.c-auth {
  inline-size: min(100%, var(--size-auth-card));
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.c-auth > * + * {
  margin-block-start: var(--space-6);
}

.c-auth__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-sidebar);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

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

.c-auth .c-field :is(input, select) {
  max-inline-size: none;
}

.c-auth .c-form__actions .c-button {
  inline-size: 100%;
}

/* ===== Pilotage (CR-111) : groupes de KPI, frise des campagnes, actions, journal d'audit ===== */

.c-kpi-group > * + * {
  margin-block-start: var(--space-3);
}

.c-kpi-group__title {
  font-size: var(--font-size-lg);
}

.c-kpi-group__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-kpi-min), 1fr));
  gap: var(--space-4);
  padding: var(--space-0);
  list-style: none;
}

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

.c-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: var(--space-4);
  padding: var(--space-0);
  list-style: none;
}

.c-timeline__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-start: var(--space-3);
  border-block-start: calc(var(--border-width) * 4) solid var(--color-line);
}

.c-timeline__step--done {
  border-block-start-color: var(--color-primary);
}

.c-timeline__step--in-progress,
.c-timeline__step[aria-current="step"] {
  border-block-start-color: var(--color-dune-500);
}

.c-timeline__title {
  font-weight: var(--font-weight-semibold);
}

.c-timeline__dates,
.c-timeline__state {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-timeline__step--in-progress .c-timeline__state {
  color: var(--color-accent-text);
  font-weight: var(--font-weight-medium);
}

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

.c-audit__type {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-audit__object {
  font-weight: var(--font-weight-medium);
}

.c-audit__changes {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.c-audit__changes th,
.c-audit__changes td {
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-block-end: var(--border-width) solid var(--color-line);
  text-align: start;
  vertical-align: top;
}

/* ===== Poste de travail (CR-130) : liste + fiche, onglets à compteurs, files de travail ===== */

/* Onglets de vues : compteur à côté du libellé (le libellé reste lu en entier par les lecteurs d'écran) */
.c-tabs__count {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-salt);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--font-size-body);
}

.c-tabs__link.is-active .c-tabs__count,
.c-tabs__link[aria-current="page"] .c-tabs__count {
  background-color: var(--color-lagoon-100);
  color: var(--color-lagoon-700);
}

/* Liste à gauche, fiche à droite : une seule colonne sous 1 024 px */
.l-master-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(var(--size-detail-min), 1fr);
  gap: var(--space-4);
  align-items: start;
}

.l-master-detail__detail {
  position: sticky;
  inset-block-start: calc(var(--size-topbar) + var(--space-4));
}

@media (max-width: 63.9375rem) {
  .l-master-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .l-master-detail__detail {
    position: static;
  }
}

/* Liste compacte sélectionnable : n° de dossier, nom + méta, élément de fin (statut) */
.c-list {
  margin: var(--space-0);
  padding: var(--space-0);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
  list-style: none;
  overflow: hidden;
}

.c-list__item {
  border-block-end: var(--border-width) solid var(--color-line);
  border-inline-start: var(--size-nav-marker) solid transparent;
}

.c-list__item:last-child {
  border-block-end: 0;
}

.c-list__item.is-selected {
  border-inline-start-color: var(--color-primary);
  background-color: var(--color-lagoon-50);
}

.c-list__link {
  display: grid;
  grid-template-columns: var(--size-list-ref) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-control);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.c-list__link:hover {
  background-color: var(--color-lagoon-50);
}

.c-list__ref {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.c-list__body {
  display: grid;
  min-inline-size: 0;
}

.c-list__title {
  overflow: hidden;
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* Fiche latérale : en-tête (titre + statut), actions courantes, sections */
.c-detail {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.c-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-4);
}

.c-detail__heading {
  display: grid;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.c-detail__title {
  font-size: var(--font-size-lg);
}

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

.c-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.c-detail__section-title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

/* Files de travail : un chiffre, une phrase, un bouton (accueil par rôle) */
.c-queue-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--size-queue-min), 1fr));
  gap: var(--space-3);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.c-queue {
  display: grid;
  grid-template-areas:
    "count title action"
    "count text action";
  grid-template-columns: var(--size-queue-count) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-half) var(--space-4);
  padding: var(--space-4);
  border-inline-start: var(--size-banner-marker) solid transparent;
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.c-queue__count {
  grid-area: count;
  font-size: var(--font-size-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}

.c-queue__title {
  grid-area: title;
  font-weight: var(--font-weight-semibold);
}

.c-queue__text {
  grid-area: text;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-queue__action {
  grid-area: action;
}

/* À traiter : le chiffre et le liseré passent en avertissement (le libellé dit aussi « à traiter ») */
.c-queue--attention {
  border-inline-start-color: var(--color-warning-700);
}

.c-queue--attention .c-queue__count {
  color: var(--color-warning-700);
}

/* Rien à faire : chiffre discret, pas de bouton */
.c-queue--idle .c-queue__count {
  color: var(--color-text-muted);
}

/* Frise du cycle annuel : une étape par rubrique, l'état est écrit en toutes lettres
   (couleur, texte et aria-current vont ensemble : jamais de couleur seule). */
.c-cycle {
  display: grid;
  grid-auto-columns: minmax(var(--size-cycle-step-min), 1fr);
  grid-auto-flow: column;
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
  overflow-x: auto;
}

.c-cycle__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-half);
  margin-inline-start: calc(var(--border-width) * -1);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--color-line);
  background-color: var(--color-surface);
  font-size: var(--font-size-sm);
}

.c-cycle__step:first-child {
  margin-inline-start: var(--space-0);
  border-start-start-radius: var(--radius-card);
  border-end-start-radius: var(--radius-card);
}

.c-cycle__step:last-child {
  border-start-end-radius: var(--radius-card);
  border-end-end-radius: var(--radius-card);
}

.c-cycle__title {
  font-weight: var(--font-weight-semibold);
}

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

.c-cycle__step--done {
  background-color: var(--color-lagoon-50);
  color: var(--color-lagoon-700);
}

.c-cycle__step--current {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.c-cycle__step--current .c-cycle__text {
  color: inherit;
}

/* Fil d'activité : qui a fait quoi, quand (jamais de donnée personnelle ni de texte libre) */
.c-feed {
  display: grid;
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.c-feed__item {
  display: grid;
  grid-template-columns: var(--size-feed-icon) minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: var(--border-width) solid var(--color-line);
}

.c-feed__item:first-child {
  border-block-start: 0;
}

.c-feed__icon {
  display: grid;
  place-items: center;
  inline-size: var(--size-feed-icon);
  block-size: var(--size-feed-icon);
  border-radius: var(--radius-field);
  background-color: var(--color-lagoon-50);
  color: var(--color-lagoon-700);
}

.c-feed__time {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}