/* =====================================================================
 * SSGL Ops — coque de gestion (2.50.0)
 *   sui.base      : styles d'éléments nus et anneau de focus par défaut, SOUS
 *                   l'ancien CSS et les composants (qui ajustent leur anneau) ;
 *   sui.shell     : barre latérale, en-têtes, tiroir, barre du bas, messages,
 *                   page d'erreur, focus — AU-DESSUS de l'ancien CSS ;
 *   sui.utilities : utilitaires (seul endroit avec !important, hors impression).
 * Ordre des couches : Assets::LAYERS (en tête de tokens.css, répété par la coque).
 * Points de rupture en em (suivent le zoom) : 48em = 768 px, 64em = 1 024 px.
 * Aucune couleur en dur : uniquement var(--sui-*).
 * ===================================================================== */

@layer sui.base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--sui-bg);
    color: var(--sui-text);
    font-family: var(--sui-font);
    font-size: var(--sui-fs-14);
    line-height: var(--sui-lh-14);
  }
  a { color: var(--sui-primary-fg); text-underline-offset: .15em; }
  a:hover { color: var(--sui-primary-solid-hover); }
  h1, h2, h3, h4 { color: var(--sui-text); line-height: 1.3; font-weight: var(--sui-fw-semibold); }
  h2 { font-size: var(--sui-fs-20); margin: var(--sui-sp-5) 0 var(--sui-sp-3); }
  h3 { font-size: var(--sui-fs-16); margin: var(--sui-sp-4) 0 var(--sui-sp-2); }
  h4 { font-size: var(--sui-fs-14); margin: var(--sui-sp-4) 0 var(--sui-sp-2); }
  p { margin: 0 0 1em; }
  img { max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
  hr { border: 0; border-top: var(--sui-border-w) solid var(--sui-border); margin: var(--sui-sp-5) 0; }
  code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  code { font-size: .875em; background: var(--sui-surface-2); padding: .1em .35em; border-radius: var(--sui-radius-sm); }
  pre { overflow-x: auto; }
  /* Focus : un anneau visible partout, ajustable par les composants (onglets : -2px,
     sinon coupé par leur zone défilante). Écrans anciens : legacy.css le réimpose
     au-dessus de admin.css (sui.legacy.fix). */
  :focus-visible { outline: 2px solid var(--sui-focus); outline-offset: 2px; }
}

@layer sui.shell {
  /* ── Focus : anneau par défaut en sui.base ; la zone principale (cible du lien d'évitement) n'en a pas ── */
  .sui-main:focus { outline: none; }

  /* ── Lien d'évitement ── */
  .sui-skip {
    position: absolute; left: var(--sui-sp-2); top: -10rem; z-index: var(--sui-z-skip);
    padding: var(--sui-sp-2) var(--sui-sp-4); border-radius: var(--sui-radius-sm);
    background: var(--sui-surface); color: var(--sui-primary-fg); font-weight: var(--sui-fw-semibold);
    box-shadow: var(--sui-shadow-2);
  }
  .sui-skip:focus { top: var(--sui-sp-2); }

  .sui-body { min-height: 100vh; }
  .sui-icon { flex: none; }

  /* ── Barre latérale ── */
  .sui-sidebar {
    display: flex; flex-direction: column; gap: var(--sui-sp-1);
    padding: 1.25rem var(--sui-sp-3) var(--sui-sp-3);
    background: var(--sui-surface); border-right: var(--sui-border-w) solid var(--sui-border);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .sui-brand { display: flex; align-items: center; gap: .625rem; padding: var(--sui-sp-1) var(--sui-sp-2) var(--sui-sp-3); }
  .sui-brand-mark {
    width: 2rem; height: 2rem; border-radius: var(--sui-radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sui-nav-active-bg); color: var(--sui-nav-active-fg); font-weight: var(--sui-fw-bold);
  }
  .sui-brand-name { font-size: var(--sui-fs-16); font-weight: var(--sui-fw-semibold); flex: 1 1 auto; }
  .sui-sidebar-nav { display: flex; flex-direction: column; gap: var(--sui-sp-1); }
  .sui-nav-group { list-style: none; margin: 0; padding: var(--sui-sp-2) 0; display: flex; flex-direction: column; gap: 2px; }
  .sui-nav-group + .sui-nav-group { border-top: var(--sui-border-w) solid var(--sui-border); }
  .sui-nav-item {
    display: flex; align-items: center; gap: .625rem; min-height: var(--sui-h-md); padding: 0 .625rem;
    border-radius: var(--sui-radius-md); color: var(--sui-text); text-decoration: none; font-weight: var(--sui-fw-medium);
  }
  .sui-nav-item:hover { background: var(--sui-surface-2); color: var(--sui-text); }
  .sui-nav-item[aria-current="page"] { background: var(--sui-nav-active-bg); color: var(--sui-nav-active-fg); font-weight: var(--sui-fw-semibold); }
  .sui-nav-label { flex: 1 1 auto; }
  .sui-nav-count {
    min-width: 1.5rem; height: 1.375rem; padding: 0 .4375rem; border-radius: var(--sui-radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--sui-fs-12); font-weight: var(--sui-fw-semibold); font-family: var(--sui-font-num);
    background: var(--sui-primary-tint); color: var(--sui-primary-solid-hover);
  }
  .sui-nav-item[aria-current="page"] .sui-nav-count { background: var(--sui-nav-active-fg); color: var(--sui-nav-active-bg); }
  /* Recherche (E21, 2.52.0) : indice de raccourci, jamais le seul moyen de comprendre le bouton. */
  .sui-search-kbd {
    flex: none; padding: 0 .375rem; border: var(--sui-border-w) solid var(--sui-border-strong); border-radius: var(--sui-radius-sm);
    font-size: var(--sui-fs-12); line-height: 1.25rem; color: var(--sui-text-2); font-family: var(--sui-font);
  }

  /* ── Menu utilisateur (bouton de divulgation, pas un menu ARIA) ── */
  .sui-user { position: relative; margin-top: auto; border-top: var(--sui-border-w) solid var(--sui-border); padding-top: var(--sui-sp-2); }
  .sui-user-btn {
    width: 100%; display: flex; align-items: center; gap: .625rem; padding: .625rem var(--sui-sp-2);
    border: 0; border-radius: var(--sui-radius-md); background: transparent; text-align: left; cursor: pointer;
  }
  .sui-user-btn:hover { background: var(--sui-surface-2); }
  .sui-user-btn[aria-expanded="true"] .sui-icon { transform: rotate(180deg); }
  .sui-avatar {
    width: 2rem; height: 2rem; border-radius: var(--sui-radius-full); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sui-primary-tint); color: var(--sui-primary-fg); font-weight: var(--sui-fw-semibold);
  }
  .sui-user-id { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
  .sui-user-name { font-weight: var(--sui-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sui-user-role { font-size: var(--sui-fs-12); color: var(--sui-text-2); }
  .sui-user-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + var(--sui-sp-1)); z-index: var(--sui-z-dropdown);
    list-style: none; margin: 0; padding: var(--sui-sp-1); background: var(--sui-surface-3);
    border: var(--sui-border-w) solid var(--sui-border); border-radius: var(--sui-radius-md); box-shadow: var(--sui-shadow-2);
  }
  .sui-user-menu a {
    display: flex; align-items: center; min-height: var(--sui-h-md); padding: 0 var(--sui-sp-3);
    border-radius: var(--sui-radius-sm); color: var(--sui-text); text-decoration: none;
  }
  .sui-user-menu a:hover, .sui-user-menu a[aria-current="page"] { background: var(--sui-surface-2); }
  .sui-user-version {
    padding: var(--sui-sp-2) var(--sui-sp-3) var(--sui-sp-1); margin-top: var(--sui-sp-1);
    font-size: var(--sui-fs-12); color: var(--sui-text-2); border-top: var(--sui-border-w) solid var(--sui-border);
  }

  /* ── Zone principale et en-tête de page ── */
  .sui-main { min-width: 0; display: block; }
  .sui-main-inner { max-width: var(--sui-content-max); margin: 0 auto; padding: var(--sui-sp-4) var(--sui-gutter) var(--sui-sp-7); }
  /* Écrans anciens : pleine largeur, comme en 2.49.0 (plein écran) ; le plafond de 90rem reste pour les écrans v3. */
  .sui-compat .sui-main-inner { max-width: none; }
  .sui-pagehead { margin-bottom: var(--sui-sp-5); }
  /* Fil d'Ariane : même rendu que le composant (ui.css), séparateur ENTRE les éléments. */
  .sui-crumbs ol { list-style: none; margin: 0 0 var(--sui-sp-1); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sui-sp-1); color: var(--sui-text-2); }
  .sui-crumbs li { display: inline-flex; align-items: center; gap: var(--sui-sp-1); }
  .sui-crumbs li + li::before { content: "›" / ""; }
  .sui-crumbs a { color: var(--sui-text-2); }
  .sui-crumbs a:hover { color: var(--sui-text); }
  .sui-pagehead-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sui-sp-3) var(--sui-sp-4); }
  .sui-h1 { margin: 0; flex: 1 1 16rem; min-width: 0; font-size: var(--sui-fs-24); line-height: var(--sui-lh-24); font-weight: var(--sui-fw-semibold); overflow-wrap: anywhere; }
  .sui-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sui-sp-2); }
  /* Sous-navigation = composant Onglets (.sui-tabs, ui.css) : ici l'espacement seulement. */
  .sui-subnav { margin-top: var(--sui-sp-4); }
  .sui-legacy, .sui-content { min-width: 0; }
  /* <h1> ancien restant (écran avec barre de titre ET <h1> brut) : rétrogradé en <h2>. */
  .sui-legacy [data-sui-demoted="h1"] { font-size: var(--sui-fs-20); }

  /* ── Messages (Flash) : composant Alerte, en haut du contenu, refermables ── */
  .sui-flash { display: flex; flex-direction: column; gap: var(--sui-sp-2); margin: 0 0 var(--sui-sp-4); }
  .sui-flash:empty { display: none; }
  .sui-flash > .sui-alert { margin: 0; }

  /* ── Page d'erreur E23 (403 / 404) ── */
  .sui-e23 { max-width: var(--sui-form-max); padding: var(--sui-sp-5); background: var(--sui-surface); border: var(--sui-border-w) solid var(--sui-border); border-radius: var(--sui-radius-lg); }
  .sui-e23-code { margin: 0 0 var(--sui-sp-2); font-size: var(--sui-fs-12); font-weight: var(--sui-fw-semibold); letter-spacing: var(--sui-tracking-caps); text-transform: uppercase; color: var(--sui-text-2); }
  .sui-e23-text { margin: 0 0 var(--sui-sp-5); }

  /* ── Boutons d'icône (menu, fermeture) ── */
  .sui-iconbtn {
    width: var(--sui-target-touch); height: var(--sui-target-touch); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--sui-radius-md); background: transparent; color: var(--sui-text); cursor: pointer;
  }
  .sui-iconbtn:hover { background: var(--sui-surface-2); }

  /* ── En-tête mobile, tiroir, fond, barre du bas ── */
  .sui-mobilebar { display: none; }
  .sui-mobilebar-title { font-weight: var(--sui-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sui-drawer-close { display: none; }
  .sui-backdrop { position: fixed; inset: 0; z-index: calc(var(--sui-z-drawer) - 1); background: var(--sui-overlay); }
  .sui-bottombar { display: none; }

  /* ≥ 1 024 px : barre latérale permanente de 248 px. */
  @media (min-width: 64em) {
    .sui-body { display: grid; grid-template-columns: var(--sui-sidebar-w) minmax(0, 1fr); }
    .sui-sidebar { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; }
    .sui-main { grid-column: 2; grid-row: 1; }
    .sui-main-inner { padding: 1.75rem 2.5rem var(--sui-sp-7); }
    /* Écrans anciens : gouttières de 32 px, celles de la 2.49.0 (plein écran) — leurs
       tableaux les plus larges (lignes de temps d'un CRI) y tenaient sans défiler. */
    .sui-compat .sui-main-inner { padding-left: var(--sui-sp-6); padding-right: var(--sui-sp-6); }
    .sui-backdrop { display: none; }
  }

  /* < 1 024 px : en-tête de 56 px, navigation complète dans un tiroir. */
  @media (max-width: 63.99em) {
    html { scroll-padding-top: calc(var(--sui-topbar-h) + var(--sui-sp-2)); }
    .sui-mobilebar {
      position: sticky; top: 0; z-index: var(--sui-z-sticky);
      display: flex; align-items: center; gap: var(--sui-sp-2);
      height: var(--sui-topbar-h); padding: 0 var(--sui-sp-2);
      background: var(--sui-surface); border-bottom: var(--sui-border-w) solid var(--sui-border);
    }
    .sui-sidebar {
      position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--sui-z-drawer);
      width: min(20rem, 86vw); box-shadow: var(--sui-shadow-3);
      transform: translateX(-100%); visibility: hidden;
      transition: transform var(--sui-dur-2) var(--sui-ease), visibility 0s linear var(--sui-dur-2);
    }
    .sui-nav-open .sui-sidebar { transform: none; visibility: visible; transition: transform var(--sui-dur-2) var(--sui-ease); }
    .sui-nav-open .sui-body { overflow: hidden; }
    .sui-drawer-close { display: inline-flex; }
    .sui-h1 { font-size: var(--sui-fs-20); line-height: var(--sui-lh-20); }
  }

  /* < 768 px : barre du bas (À faire · CRI · Banque · Menu). */
  @media (max-width: 47.99em) {
    html { scroll-padding-bottom: calc(var(--sui-bottombar-h) + env(safe-area-inset-bottom)); }
    .sui-main { padding-bottom: calc(var(--sui-bottombar-h) + env(safe-area-inset-bottom)); }
    .sui-bottombar {
      display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--sui-z-bottombar);
      padding-bottom: env(safe-area-inset-bottom);
      background: var(--sui-surface); border-top: var(--sui-border-w) solid var(--sui-border);
    }
    .sui-bottombar ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; height: var(--sui-bottombar-h); }
    .sui-bottombar a, .sui-bottombar button {
      position: relative; width: 100%; height: 100%; min-width: 4rem;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      border: 0; border-top: 2px solid transparent; background: transparent; color: var(--sui-text-2);
      font-size: var(--sui-fs-12); text-decoration: none; cursor: pointer;
    }
    .sui-bottombar [aria-current="page"], .sui-bottombar [aria-expanded="true"] { color: var(--sui-text); font-weight: var(--sui-fw-semibold); border-top-color: var(--sui-text); }
    .sui-bottombar .sui-nav-count { position: absolute; top: .25rem; left: calc(50% + .5rem); min-width: 1.25rem; height: 1.125rem; padding: 0 .3rem; }
    /* Cibles tactiles de 44 px (03-design-system) : entrées du tiroir et menu du compte
       (sous-navigation : .sui-tabs, ui.css) ; miettes : 24 px au moins (WCAG 2.5.8). */
    .sui-nav-item, .sui-user-menu a { min-height: var(--sui-target-touch); }
    .sui-crumbs a { display: inline-flex; align-items: center; min-height: 1.5rem; }
  }

  /* Contraste forcé : un seul marqueur « courant » visible par zone, focus en Highlight. */
  @media (forced-colors: active) {
    /* Les traits transparents deviennent visibles : effacés hors élément courant. */
    .sui-subnav a:not([aria-current="page"]), .sui-bottombar a:not([aria-current="page"]), .sui-bottombar button:not([aria-expanded="true"]) { border-color: Canvas; }
    .sui-nav-item[aria-current="page"] { outline: 2px solid CanvasText; }
    .sui-subnav a[aria-current="page"], .sui-user-menu a[aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -2px; }
    .sui-bottombar [aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -4px; }
    /* Après les marqueurs (spécificité 0,2,1 ≥ 0,2,0) : le focus se distingue du « courant ». */
    :is(.sui-nav-item, .sui-bottombar a, .sui-bottombar button, .sui-user-btn, .sui-user-menu a, .sui-iconbtn, .sui-skip, .sui-crumbs a):focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
    /* Onglets : anneau intérieur (la zone défilante couperait un anneau extérieur). */
    .sui-subnav a:focus-visible { outline: 3px solid Highlight; outline-offset: -3px; }
  }

  @media print {
    .sui-sidebar, .sui-mobilebar, .sui-bottombar, .sui-backdrop, .sui-skip, .sui-page-actions, .sui-subnav, .sui-flash { display: none; }
    .sui-body { display: block; }
    .sui-main-inner { padding: 0; max-width: none; }
  }
}

@layer sui.utilities {
  [hidden] { display: none !important; }
  .screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}