/* DPAE — feuille de style unique. Couleurs uniquement dans @layer tokens. */
@layer reset, tokens, base, layout, components, utilities;

/* ───────────────────────── reset ───────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg { display: block; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
}

/* ───────────────────────── tokens ───────────────────────── */
@layer tokens {
  :root {
    color-scheme: light dark;
    --bg: #F2F2F7;
    --surface: #FFFFFF;
    --surface-2: #FFFFFF;
    --fill: #ECECF0;
    --fill-hover: rgba(0, 0, 0, .04);
    --fill-press: rgba(0, 0, 0, .08);
    --text-1: #1D1D1F;
    --text-2: #52525A;
    --text-3: #6E6E73;
    --sep: #C6C6C8;
    --control-border: #86868B;
    --accent: #0066CC;
    --accent-fill: #0066CC;
    --accent-press: #0058B0;
    --on-accent: #FFFFFF;
    --accent-tint: #E5F0FB;
    --danger: #C4161C;
    --danger-fill: #C4161C;
    --danger-tint: #FDECEB;
    --st-todo: #52525A;  --st-todo-bg: #ECECF0;
    --st-sent: #0066CC;  --st-sent-bg: #E5F0FB;
    --st-ok: #177534;    --st-ok-bg: #E8F5EC;
    --st-ko: #C4161C;    --st-ko-bg: #FDECEB;
    --st-retry: #B25000; --st-retry-bg: #FDF0E1;
    --bar-bg: rgba(249, 249, 249, .94);
    --backdrop: rgba(0, 0, 0, .32);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .04);
    --ring: 0 0 0 .5px rgba(0, 0, 0, .06);

    --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px;
    --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px;
    --tap: 44px;
    --btn-h: 48px; --field-h: 48px; --row-h: 48px;
    --tabbar-h: 56px; --sidebar-w: 288px;
    --content-form: 640px; --content-wide: 1024px;
    --r-12: 12px; --r-16: 16px; --r-full: 999px;
    --r-group: 12px;
    --hairline: 1px;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --t-large: 700 34px/41px var(--font);
    --t-title1: 700 28px/34px var(--font);
    --t-title2: 600 22px/28px var(--font);
    --t-title3: 600 20px/25px var(--font);
    --t-headline: 600 17px/22px var(--font);
    --t-body: 400 17px/22px var(--font);
    --t-callout: 400 16px/21px var(--font);
    --t-subhead: 400 15px/20px var(--font);
    --t-footnote: 400 13px/18px var(--font);
    --t-caption: 600 12px/16px var(--font);

    --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 250ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-std: cubic-bezier(.4, 0, .2, 1);
  }
  @media (min-resolution: 2dppx) { :root { --hairline: .5px; } }
  @media (min-width: 1024px) { :root { --r-group: 16px; } }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #000000;
      --surface: #1C1C1E;
      --surface-2: #2C2C2E;
      --fill: #2C2C2E;
      --fill-hover: rgba(255, 255, 255, .06);
      --fill-press: rgba(255, 255, 255, .10);
      --text-1: #F5F5F7;
      --text-2: #AEAEB2;
      --text-3: #98989F;
      --sep: #38383A;
      --control-border: #7C7C80;
      --accent: #4DA3FF;
      --accent-fill: #0A6FDC;
      --accent-press: #085BB5;
      --on-accent: #FFFFFF;
      --accent-tint: #0F2236;
      --danger: #FF6B61;
      --danger-fill: #D62D24;
      --danger-tint: #331816;
      --st-todo: #AEAEB2;  --st-todo-bg: #2C2C2E;
      --st-sent: #4DA3FF;  --st-sent-bg: #0F2236;
      --st-ok: #30D158;    --st-ok-bg: #16291B;
      --st-ko: #FF6B61;    --st-ko-bg: #331816;
      --st-retry: #FF9F0A; --st-retry-bg: #2E2210;
      --bar-bg: rgba(22, 22, 24, .94);
      --backdrop: rgba(0, 0, 0, .56);
      --shadow-1: none;
      --shadow-2: 0 8px 24px rgba(0, 0, 0, .5);
      --ring: 0 0 0 .5px rgba(255, 255, 255, .10);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  }
}

/* ───────────────────────── base ───────────────────────── */
@layer base {
  body {
    font: var(--t-body);
    background: var(--bg);
    color: var(--text-1);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
  }
  h1 { font: var(--t-large); letter-spacing: -.01em; text-wrap: balance; }
  h2 { font: var(--t-title1); letter-spacing: -.01em; }
  a:not([class]) { color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  input:not([type="checkbox"]):focus-visible { outline: none; } /* champs : anneau propre ; cases : contour */
  ::placeholder { color: var(--text-3); }
  .num, time, td { font-variant-numeric: tabular-nums lining-nums; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ───────────────────────── layout ───────────────────────── */
@layer layout {
  .skip-link {
    position: absolute; left: var(--sp-16); top: var(--sp-8); z-index: 100;
    padding: var(--sp-12) var(--sp-16); border-radius: var(--r-12);
    background: var(--surface); color: var(--accent); font: var(--t-headline);
    box-shadow: var(--shadow-2);
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus-visible { transform: none; }
  #contenu:focus { outline: none; } /* cible du lien d'évitement (tabindex="-1"), jamais contrôle */

  .app { min-height: 100vh; min-height: 100dvh; }
  .app__main {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-24));
  }

  .page {
    padding: var(--sp-24) var(--sp-16) var(--sp-32);
    padding-left: max(var(--sp-16), env(safe-area-inset-left));
    padding-right: max(var(--sp-16), env(safe-area-inset-right));
  }
  .page__header { margin-bottom: var(--sp-24); }
  .page__sub { font: var(--t-subhead); color: var(--text-2); margin-top: var(--sp-4); }
  .page__action { margin-top: var(--sp-24); }

  /* Barre d'onglets (téléphone, tablette) */
  .tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 10;
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: var(--hairline) solid var(--sep);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tabbar {
      background: var(--bar-bg);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
    }
  }
  .tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: var(--tap);
    font: var(--t-caption); color: var(--text-3);
    transition: color var(--dur-fast) var(--ease-std);
  }
  .tabbar__item[aria-current="page"] { color: var(--accent); }
  /* Un contrôle atteint au clavier ne s'arrête pas sous la barre d'onglets. */
  @media (max-width: 1023px) { html:has(.tabbar) { scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-8)); } }

  /* Barre latérale (ordinateur) */
  .sidebar { display: none; }

  @media (min-width: 600px) {
    .page {
      max-width: calc(var(--content-form) + 2 * var(--sp-24));
      margin-inline: auto;
      padding-inline: var(--sp-24);
    }
  }

  @media (min-width: 1024px) {
    .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
    .app__main { padding-bottom: 0; min-width: 0; }
    .tabbar { display: none; }
    .sidebar {
      display: flex; flex-direction: column; gap: var(--sp-24);
      position: sticky; top: 0; height: 100vh; height: 100dvh;
      padding: var(--sp-24) var(--sp-16);
      background: var(--bg);
      border-right: var(--hairline) solid var(--sep);
      overflow-y: auto;
    }
    .page {
      max-width: calc(var(--content-wide) + 2 * var(--sp-48));
      padding: var(--sp-32) var(--sp-48) var(--sp-48);
    }
    .page--form { max-width: calc(var(--content-form) + 2 * var(--sp-48)); }
    .sidebar .btn { padding-inline: var(--sp-16); white-space: nowrap; }
  }

  .sidebar__org {
    font: var(--t-headline); padding: 0 var(--sp-12);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sidebar__nav { display: flex; flex-direction: column; gap: var(--sp-4); }
  .sidebar__bas { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-4); }
  .sidebar__link {
    display: flex; align-items: center; gap: var(--sp-12);
    min-height: var(--tap); padding: 0 var(--sp-12);
    border-radius: var(--r-12); color: var(--text-1);
    transition: background-color var(--dur-fast) var(--ease-std);
  }
  .sidebar__link .icon { color: var(--accent); flex: none; }
  .sidebar__link[aria-current="page"] { background: var(--fill); font-weight: 600; }
  .sidebar__compte {
    padding: var(--sp-8) 0 0;
    border-top: var(--hairline) solid var(--sep);
    margin-top: var(--sp-8);
  }
  .sidebar__nom {
    font: var(--t-subhead); color: var(--text-2);
    padding: var(--sp-8) var(--sp-12);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Pages sans navigation : connexion, erreur, parcours plein écran */
  .centre {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-24) var(--sp-16);
  }
  .centre__boite { width: 100%; max-width: 400px; }
  .centre__boite h1 { margin-bottom: var(--sp-24); }
  .centre__texte { font: var(--t-body); color: var(--text-2); margin-bottom: var(--sp-24); }
  .centre__marque { font: var(--t-footnote); color: var(--text-2); margin-bottom: var(--sp-8); }
  .centre__boite form { margin-top: var(--sp-8); }

  .flux { min-height: 100vh; min-height: 100dvh; }
  .flux__entete {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    min-height: var(--tap);
    /* Le texte d'« Annuler » (bouton à 8 px de marge) s'aligne sur le titre de la page, à toute largeur. */
    padding: var(--sp-8) max(var(--sp-8), calc((100% - var(--content-form)) / 2 - var(--sp-8)));
    padding-top: max(var(--sp-8), env(safe-area-inset-top));
    border-bottom: var(--hairline) solid var(--sep);
    background: var(--bg);
  }
  .flux__entete > :first-child { justify-self: start; }
  .flux__entete > :last-child { justify-self: end; }
  .flux__entete > .flux__etape { justify-self: center; }
}

/* ───────────────────────── components ───────────────────────── */
@layer components {
  .icon { flex: none; } /* taille donnée par les attributs width/height (macro icon) */

  /* Boutons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
    min-height: var(--btn-h); padding: 0 var(--sp-24);
    border-radius: var(--r-12);
    font: var(--t-headline);
    transition: background-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active { transform: scale(.98); }
  .btn--primaire { background: var(--accent-fill); color: var(--on-accent); }
  .btn--primaire:active { background: var(--accent-press); }
  .btn--secondaire { background: var(--fill); color: var(--accent); }
  .btn--danger { background: var(--surface); color: var(--danger); }
  .btn--texte {
    min-height: var(--tap); padding: 0 var(--sp-8);
    color: var(--accent); font: var(--t-body);
  }
  .btn--bloc { display: flex; width: 100%; }
  .btn[aria-disabled="true"], .btn:disabled { opacity: .4; pointer-events: none; }
  @media (hover: hover) and (pointer: fine) {
    .btn--primaire:hover { background: var(--accent-press); }
    .btn--secondaire:hover, .btn--danger:hover { background: var(--fill-press); }
    .sidebar__link:hover { background: var(--fill-hover); }
    .sidebar__link[aria-current="page"]:hover { background: var(--fill); }
    .btn--texte:hover { text-decoration: underline; }
    a.row:hover, label.row:hover, .segment:not([aria-current]):hover, .pastilles input:not(:checked) + .pastille:hover { background: var(--fill-hover); }
  }

  /* Champs */
  .field { display: flex; flex-direction: column; gap: var(--sp-8); margin-bottom: var(--sp-16); }
  .field__label { font: var(--t-subhead); font-weight: 600; color: var(--text-1); }
  .field__input {
    width: 100%; min-height: var(--field-h);
    padding: 0 var(--sp-16);
    border: 1px solid var(--control-border);
    border-radius: var(--r-12);
    background: var(--surface);
    font: var(--t-body);
    transition: box-shadow var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
  }
  .field__input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); outline: none; }
  .field__input[aria-invalid="true"] { border-color: var(--danger); }
  .field__input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--danger); }
  .field__input[type="file"] { padding: var(--sp-8) var(--sp-16); }
  .field__input::file-selector-button {
    min-height: 32px; margin-right: var(--sp-12); padding: 0 var(--sp-12); border: 0; border-radius: var(--r-12);
    background: var(--fill); color: var(--accent); font: var(--t-subhead); font-weight: 600; cursor: pointer;
  }
  .field__hint { font: var(--t-footnote); color: var(--text-2); }

  .message-erreur {
    display: flex; align-items: flex-start; gap: var(--sp-8);
    margin: 0 0 var(--sp-16);
    font: var(--t-subhead); color: var(--danger);
  }
  .message-erreur .icon { margin-top: 0; }
  .message-erreur:empty { display: none; }

  /* Listes groupées (inset grouped) */
  .group-titre {
    font: var(--t-footnote); color: var(--text-2);
    padding: 0 var(--sp-16) var(--sp-8);
  }
  .group {
    background: var(--surface);
    border-radius: var(--r-group);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    margin-bottom: var(--sp-32);
  }
  .row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
    min-height: var(--row-h);
    padding: var(--sp-12) var(--sp-16);
    position: relative;
  }
  .row + .row::before {
    content: ""; position: absolute; top: 0; left: var(--sp-16); right: 0;
    border-top: var(--hairline) solid var(--sep);
  }
  .row__label { color: var(--text-1); }
  .row__valeur {
    color: var(--text-2); text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
    overflow-wrap: anywhere;
  }

  /* État vide */
  .vide {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--sp-40) var(--sp-24);
  }
  .vide > .icon { color: var(--text-3); margin-bottom: var(--sp-16); }
  .vide__titre { font: var(--t-title3); margin-bottom: var(--sp-8); text-wrap: balance; }
  .vide__texte { font: var(--t-subhead); color: var(--text-2); max-width: 40ch; text-wrap: balance; }

  /* Champs : erreur, choix, recherche */
  .field__erreur { font: var(--t-footnote); color: var(--danger); }
  fieldset.field { border: 0; min-width: 0; }
  fieldset.field legend { padding: 0; margin-bottom: var(--sp-8); }
  .recherche { position: relative; margin-bottom: var(--sp-16); }
  .recherche > .icon { position: absolute; left: var(--sp-12); top: 14px; color: var(--text-3); pointer-events: none; }
  .recherche .field__input { padding-left: var(--sp-40); -webkit-appearance: none; appearance: none; }

  /* Pastilles (choix exclusif) */
  .pastilles { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
  .pastilles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .pastille {
    display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-16);
    border-radius: var(--r-full); background: var(--fill); color: var(--text-1);
    font: var(--t-headline); font-variant-numeric: tabular-nums; cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
  }
  /* Choix fait : teinte d'accent, pour ne pas concurrencer le bouton principal. */
  .pastilles input:checked + .pastille { background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
  .pastilles input:focus-visible + .pastille { outline: 2px solid var(--accent); outline-offset: 2px; }
  .si-autre { display: none; margin-top: var(--sp-8); }
  .field:has(input[value="autre"]:checked) .si-autre { display: block; }
  form:has(input[name="type"][value="CDI"]:checked) .si-fin { display: none; }

  /* Lignes cliquables, choix multiples */
  .group > li:not([hidden]) ~ li:not([hidden]) > .row::before {
    content: ""; position: absolute; top: 0; left: var(--sp-16); right: 0;
    border-top: var(--hairline) solid var(--sep);
  }
  a.row, label.row { color: inherit; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-std); }
  a.row:active, label.row:active { background: var(--fill-press); }
  .row > .icon:last-child { color: var(--text-3); }
  .row__principal { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .row__titre { font: var(--t-headline); overflow-wrap: anywhere; }
  .row__sous { font: var(--t-subhead); color: var(--text-2); overflow-wrap: anywhere; }
  .row__fin { display: flex; align-items: center; gap: var(--sp-8); flex: none; }
  .row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent-fill); flex: none; }
  label.row { justify-content: flex-start; }
  .confirmation { display: flex; align-items: center; gap: var(--sp-12); min-height: var(--tap); margin-bottom: var(--sp-16); font: var(--t-subhead); cursor: pointer; }
  .confirmation input { width: 22px; height: 22px; accent-color: var(--accent-fill); flex: none; }
  .row--detail { flex-wrap: wrap; }
  .row--detail .row__note { flex-basis: 100%; font: var(--t-subhead); color: var(--text-2); }
  .row--detail .row__note--erreur { color: var(--danger); }
  /* Téléphone : les actions d'une ligne passent sous le texte. */
  @media (max-width: 599px) { .row--detail > .row__actions { flex-basis: 100%; margin-inline-start: calc(-1 * var(--sp-8)); } }
  dl.group .row dt { color: var(--text-1); }
  dl.group .row dd { color: var(--text-2); text-align: right; overflow-wrap: anywhere; }

  /* Historique : segments de statut, filtres */
  .segments { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-bottom: var(--sp-16); }
  .segment {
    display: inline-flex; align-items: center; flex: none; min-height: var(--tap); padding: 0 var(--sp-16);
    border-radius: var(--r-full); background: var(--fill); color: var(--text-1); font: var(--t-headline);
    transition: background-color var(--dur-fast) var(--ease-std);
  }
  .segment[aria-current="true"] { background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
  .filtres { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-12); align-items: end; margin-bottom: var(--sp-8); }
  .filtres > * { grid-column: 1 / -1; }
  .filtres > .field--demi { grid-column: auto; }
  .filtres .btn { margin-bottom: var(--sp-16); justify-self: start; }
  .filtres__aide { margin: calc(-1 * var(--sp-8)) 0 var(--sp-16); }

  /* Statuts */
  .badge {
    display: inline-flex; align-items: center; gap: var(--sp-4); white-space: nowrap;
    padding: 2px var(--sp-8); border-radius: var(--r-full); font: var(--t-caption);
  }
  .badge--todo { color: var(--st-todo); background: var(--st-todo-bg); }
  .badge--sent { color: var(--st-sent); background: var(--st-sent-bg); }
  .badge--ok { color: var(--st-ok); background: var(--st-ok-bg); }
  .badge--ko { color: var(--st-ko); background: var(--st-ko-bg); }
  .badge--retry { color: var(--st-retry); background: var(--st-retry-bg); }

  /* Bandeaux */
  .bandeau {
    display: flex; align-items: flex-start; gap: var(--sp-12);
    padding: var(--sp-12) var(--sp-16); margin-bottom: var(--sp-16);
    border-radius: var(--r-12); font: var(--t-subhead);
  }
  .bandeau > .icon { margin-top: 1px; }
  .bandeau__texte { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
  .bandeau__texte a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
  .bandeau--info { background: var(--accent-tint); color: var(--text-1); }
  .bandeau--info > .icon { color: var(--accent); }
  .bandeau--alerte { background: var(--st-retry-bg); color: var(--text-1); }
  .bandeau--alerte > .icon { color: var(--st-retry); }
  .bandeau--erreur { background: var(--danger-tint); color: var(--text-1); }
  .bandeau--erreur > .icon { color: var(--danger); }

  /* Parcours plein écran */
  .flux__etape { font: var(--t-footnote); color: var(--text-2); font-variant-numeric: tabular-nums; }
  .flux__pied {
    position: sticky; bottom: 0; z-index: 5;
    margin: var(--sp-24) calc(-1 * var(--sp-16)) 0; padding: var(--sp-12) var(--sp-16);
    padding-bottom: max(var(--sp-12), env(safe-area-inset-bottom));
    background: var(--bg); border-top: var(--hairline) solid var(--sep);
  }
  /* Téléphone : un champ qui reçoit le focus ne passe pas sous le bouton collé en bas. */
  @media (max-width: 599px) { html:has(.flux__pied) { scroll-padding-bottom: calc(var(--btn-h) + 3 * var(--sp-12) + var(--sp-8)); } }
  @media (min-width: 600px) {
    .flux__pied { position: static; margin: var(--sp-32) 0 0; padding: 0; border: 0; background: none; }
  }
  .actions { display: flex; flex-direction: column; gap: var(--sp-12); margin-top: var(--sp-24); }
  .actions-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-24); }
  .actions-ligne .btn--texte { margin-inline: calc(-1 * var(--sp-8)); } /* texte aligné sur le contenu */
  .btn--petit { min-height: var(--tap); padding: 0 var(--sp-16); font: var(--t-subhead); font-weight: 600; }
  .resultat__icone { color: var(--st-sent); margin-bottom: var(--sp-16); }
  .resultat__icone--ok { color: var(--st-ok); }
  .resultat__icone--ko { color: var(--st-ko); }
  .lien-suite { margin: calc(-1 * var(--sp-24)) calc(-1 * var(--sp-8)) var(--sp-24); }
  .pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 calc(-1 * var(--sp-8)); }
  .pagination > :first-child { justify-self: start; }
  .pagination > :last-child { justify-self: end; }
  .pagination .page__sub { margin: 0; }
  .vide__action { margin-top: var(--sp-16); }
  .vide__ligne { padding: 0 var(--sp-16) var(--sp-32); }
  .section-titre { font: var(--t-headline); margin: var(--sp-32) 0 var(--sp-16); }
  a.row:focus-visible, label.row:focus-visible { outline-offset: -2px; border-radius: 0; }
  .group > li:first-child > .row:focus-visible { border-radius: var(--r-group) var(--r-group) 0 0; }
  .group > li:last-child > .row:focus-visible { border-radius: 0 0 var(--r-group) var(--r-group); }
  .group > li:only-child > .row:focus-visible { border-radius: var(--r-group); }
  .row--detail { row-gap: var(--sp-4); }
  .row.lien-action { color: var(--accent); font-weight: 600; }
  .row + .row.lien-action::before { display: none; }
  dl.group .row dt { flex: none; }
  .group + .vide__ligne { margin-top: calc(-1 * var(--sp-24)); }
  .row__note.lien-action { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent); font-weight: 600; }
  .resultat__icone--alerte { color: var(--st-retry); }

  /* Autres informations repliées */
  details.autres { margin-bottom: var(--sp-16); }
  details.autres > summary {
    display: flex; align-items: center; justify-content: space-between; min-height: var(--tap);
    color: var(--accent); font: var(--t-body); cursor: pointer; list-style: none;
  }
  details.autres > summary::-webkit-details-marker { display: none; }
  details.autres > summary .icon { transition: transform var(--dur-base) var(--ease-std); }
  details.autres[open] > summary .icon { transform: rotate(90deg); }

  /* Modale */
  dialog.modale {
    margin: auto; width: calc(100% - 2 * var(--sp-24)); max-width: 420px; padding: var(--sp-24);
    border: 0; border-radius: var(--r-16); background: var(--surface-2); color: var(--text-1);
    box-shadow: var(--shadow-2);
  }
  dialog.modale::backdrop { background: var(--backdrop); }
  dialog.modale h2 { font: var(--t-title3); margin-bottom: var(--sp-8); }
  dialog.modale p { color: var(--text-2); }
  dialog.modale p + p { margin-top: var(--sp-8); }
  dialog.modale form[method="dialog"] { margin-top: var(--sp-12); }
  dialog.modale:focus-visible { outline: none; }
  .bandeau + .group-titre, form + .group-titre { margin-top: var(--sp-24); }
  .flux__pied .field__hint { margin-top: var(--sp-8); text-align: center; }
  /* Import XML : corrections dans la ligne */
  .import__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-12); color: var(--text-1); }
  .import__saisie { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); align-items: center; margin-top: var(--sp-8); }
  .import__saisie .btn { min-height: var(--field-h); }
  .import__action .btn--texte { margin-inline: calc(-1 * var(--sp-8)); }
  .import__saisie .field__label { grid-column: 1 / -1; margin: 0; }
}

/* ───────────────────────── utilities ───────────────────────── */
@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .stack-16 > * + * { margin-top: var(--sp-16); }
  @media (min-width: 1024px) { .mobile-seulement { display: none !important; } }
  [hidden] { display: none !important; }
}