/*! azmk-design-system v1.2.0 | code MIT, nom et logo AZMK réservés | https://github.com/mike-shifterpro/azmk-design-system */
/* ============================================================
   AZMK Design System · tokens
   Thème « HUD clair » : fond pierre, panneaux ivoire, encre vert-noir,
   un seul accent ambre, brique pour le négatif. Aucun rayon, aucune ombre.
   ============================================================ */
:root {
  /* Surfaces */
  --az-bg: #E2DFD8;
  --az-panel: #F4F2EC;
  --az-panel-2: #EAE7E0;
  --az-hover: rgba(23, 27, 24, 0.06);
  --az-scrim: rgba(23, 27, 24, 0.45);

  /* Encre */
  --az-ink: #171B18;
  --az-ink-2: #4C514B;
  --az-muted: #5F635D;

  /* Traits */
  --az-line: rgba(23, 27, 24, 0.30);
  --az-line-soft: rgba(23, 27, 24, 0.14);
  --az-line-strong: rgba(23, 27, 24, 0.55);

  /* Accent : un seul par écran */
  --az-amber: #C98A12;        /* graphique sur clair : ▸, filets, coches, barres */
  --az-amber-text: #835A0A;   /* texte ambre sur clair */
  --az-amber-bright: #F2B63A; /* sur pavé sombre : bouton, chiffre, ▸ */
  --az-focus: #A06C0D;        /* anneau de focus */
  --az-amber-tint: rgba(201, 138, 18, 0.14); /* fond d'alerte, de bandeau, de ligne mise en avant */

  /* États (sémantiques, ne comptent pas comme accent). L'alerte partage la teinte de
     l'ambre texte : les badges d'état portent donc une forme (coche, triangle, croix). */
  --az-ok: #3F6B47;
  --az-ok-bg: #DEE2D8;
  --az-warn: #835A0A;
  --az-warn-bg: #EFE6D2;
  --az-neg: #A03D28;
  --az-neg-bg: #EADCD4;

  /* Catégories (données : marché, type, équipe…). Ce ne sont pas des accents :
     elles codent une information. Texte ≥ 4,5:1 sur les surfaces claires.
     Toutes froides : le vert, le rouge et l'ambre sont réservés aux états,
     une catégorie ne doit jamais se lire « validé », « erreur » ou « à relire ».
     Les cinq premières sont les plus distinctes : servez-vous-en d'abord. */
  --az-cat-1: #2A639E; /* bleu */
  --az-cat-2: #0F6A80; /* pétrole */
  --az-cat-3: #7D3FB0; /* violet */
  --az-cat-4: #A62F7D; /* prune */
  --az-cat-5: #4C50C8; /* indigo */
  --az-cat-6: #5B6272; /* ardoise */
  --az-cat-7: #83506A; /* vieux rose */
  --az-cat-8: #3E5470; /* bleu nuit */

  /* Pavé sombre (hero, tête de section, bandeau, avertissement) : un seul à l'écran */
  --az-dark: #171B18;
  --az-dark-2: #1D221E;
  --az-dark-text: #E4E2D6;
  --az-dark-muted: rgba(228, 226, 214, 0.62);
  --az-dark-line: rgba(228, 226, 214, 0.28);

  /* Typographie */
  --az-font: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --az-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --az-text-xs: 13px;
  --az-text-sm: 14px;
  --az-text-md: 15px;
  --az-text-lg: 17px;
  --az-text-xl: 20px;
  --az-text-2xl: 28px;
  --az-text-3xl: 40px;
  --az-text-4xl: 56px;

  /* Espacements */
  --az-space-1: 4px;
  --az-space-2: 8px;
  --az-space-3: 12px;
  --az-space-4: 16px;
  --az-space-5: 24px;
  --az-space-6: 32px;
  --az-space-7: 48px;
  --az-space-8: 64px;

  /* Formes : chanfrein haut gauche + bas droit */
  --az-chamfer: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --az-chamfer-in: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  --az-chamfer-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --az-chamfer-sm-in: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  --az-chamfer-sm-focus: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --az-radius: 0px;
  --az-shadow: none;
}

/* ============================================================
   AZMK Design System · base
   Règles d'éléments en :where() (spécificité nulle : un composant ou une
   règle locale l'emporte toujours) et jamais dans [data-az-isolate]
   (contenu qui garde son propre style, par exemple un document à exporter).
   ============================================================ */
:where(html) {
  -webkit-text-size-adjust: 100%;
}

:where(body) {
  margin: 0;
  background: var(--az-bg);
  color: var(--az-ink);
  font-family: var(--az-font);
  font-weight: 500;
  font-size: var(--az-text-lg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4):where(:not([data-az-isolate], [data-az-isolate] *)) {
  font-family: var(--az-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--az-ink);
  text-wrap: balance;
}

:where(a):where(:not([data-az-isolate] *)) {
  color: inherit;
  text-decoration-color: var(--az-amber);
  text-underline-offset: 3px;
}

:where(code, kbd, samp, pre):where(:not([data-az-isolate] *)) {
  font-family: var(--az-font-mono);
  font-size: 0.9em;
}

:where(::selection) {
  background: var(--az-amber-bright);
  color: var(--az-ink);
}

:where(:focus-visible):where(:not([data-az-isolate] *)) {
  outline: 2px solid var(--az-focus);
  outline-offset: 2px;
}

:where(:focus:not(:focus-visible)):where(:not([data-az-isolate] *)) {
  outline: none;
}

/* ============================================================
   AZMK Design System · composants
   Préfixe .az-. Variantes en --modificateur. Couleurs uniquement par tokens.
   ============================================================ */

/* ---------- Mise en page ---------- */
.az-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--az-space-4); box-sizing: border-box; }
.az-rule { height: 1px; margin: var(--az-space-5) 0; border: 0; background: var(--az-line); }

/* ---------- Typographie ---------- */
/* Marges remises à zéro sans spécificité : une marge locale ou utilitaire (mb-4…) l'emporte */
:where(.az-title, .az-lead) { margin: 0; }
.az-title { font-family: var(--az-font); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; color: var(--az-ink); text-wrap: balance; }
.az-title--xl { font-size: var(--az-text-4xl); }
.az-title--lg { font-size: var(--az-text-3xl); }
.az-title--md { font-size: var(--az-text-2xl); }
.az-title--sm { font-size: var(--az-text-xl); }
.az-title em { font-style: normal; color: var(--az-amber-text); }
.az-lead { font-size: var(--az-text-lg); font-weight: 500; line-height: 1.45; color: var(--az-ink-2); }
.az-eyebrow { display: inline-block; font-family: var(--az-font-mono); font-weight: 400; font-size: var(--az-text-sm); letter-spacing: 0; color: var(--az-ink-2); }
/* ▸ dessiné et non tapé : le glyphe manque à Rajdhani et changeait de taille selon la police de secours */
.az-eyebrow::before, .az-title--mark::before { content: ""; display: inline-block; width: 0.42em; height: 0.56em; margin-right: 0.5em; background: var(--az-amber); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.az-eyebrow::before { vertical-align: 0.02em; }
.az-mono { font-family: var(--az-font-mono); font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.az-muted { color: var(--az-muted); }
.az-link { color: var(--az-ink); text-decoration: underline; text-decoration-color: var(--az-amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.az-link:hover { color: var(--az-amber-text); }
.az-title--mark::before { width: 0.3em; height: 0.4em; margin-right: 0.35em; vertical-align: 0.12em; }

/* ---------- Boutons et chips : chanfrein DESSINÉ ----------
   Le bouton est le calque « trait » (fond = couleur du trait, clippé au chanfrein) ;
   ::before, 1 px à l'intérieur, porte le fond. Le trait suit donc le coin cassé.
   Un outline serait coupé par clip-path : le focus redessine le trait en 2 px. */
.az-btn, .az-chip {
  --az-btn-stroke: var(--az-line-strong);
  --az-btn-fill: var(--az-panel);
  --az-btn-fill-hover: var(--az-panel-2);
  --az-btn-ink: var(--az-ink);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--az-space-2);
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: var(--az-btn-stroke);
  color: var(--az-btn-ink);
  font-family: var(--az-font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  clip-path: var(--az-chamfer-sm);
  transition: opacity 150ms ease;
}
.az-btn::before, .az-chip::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--az-btn-fill);
  clip-path: var(--az-chamfer-sm-in);
}
.az-btn:hover, .az-chip:hover { --az-btn-fill: var(--az-btn-fill-hover); }
.az-btn:focus-visible, .az-chip:focus-visible { outline: none; --az-btn-stroke: var(--az-focus); }
.az-btn:focus-visible::before, .az-chip:focus-visible::before { inset: 2px; clip-path: var(--az-chamfer-sm-focus); }
.az-btn:active { opacity: 0.88; }
.az-btn:disabled, .az-btn[aria-disabled="true"], .az-chip:disabled { opacity: 0.5; cursor: not-allowed; }

.az-btn { min-height: 40px; padding: var(--az-space-2) 18px; font-weight: 700; font-size: var(--az-text-md); line-height: 1.2; }
.az-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.az-btn--primary { --az-btn-stroke: var(--az-ink); --az-btn-fill: var(--az-ink); --az-btn-fill-hover: var(--az-dark-2); --az-btn-ink: var(--az-dark-text); }
.az-btn--ghost { --az-btn-stroke: var(--az-line-strong); }
.az-btn--accent { --az-btn-stroke: var(--az-amber-bright); --az-btn-fill: var(--az-amber-bright); --az-btn-fill-hover: var(--az-amber-bright); --az-btn-ink: var(--az-ink); }
.az-btn--accent:hover { opacity: 0.92; }
.az-btn--danger { --az-btn-stroke: var(--az-neg); --az-btn-ink: var(--az-neg); --az-btn-fill-hover: var(--az-neg-bg); }
.az-btn--sm { min-height: 32px; padding: 5px var(--az-space-3); font-size: var(--az-text-sm); }
.az-btn--sm svg { width: 14px; height: 14px; }
.az-btn--icon { min-width: 36px; min-height: 36px; padding: 6px; gap: 0; }
.az-btn--block { display: flex; width: 100%; }
.az-btn--text { min-height: 0; padding: 2px var(--az-space-1); background: transparent; clip-path: none; color: var(--az-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--az-amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.az-btn--text::before { content: none; }
.az-btn--text:hover { color: var(--az-amber-text); }
.az-btn--text:focus-visible { outline: 2px solid var(--az-focus); outline-offset: 2px; }
.az-btn--busy { pointer-events: none; cursor: progress; }
.az-btn--busy::after { content: ""; order: -1; width: 14px; height: 14px; flex-shrink: 0; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: az-spin 0.7s linear infinite; }
.az-btn--busy > svg:first-child { display: none; }

.az-chip { --az-btn-ink: var(--az-ink-2); padding: 6px var(--az-space-3); font-weight: 600; font-size: var(--az-text-sm); line-height: 1.2; }
.az-chip[aria-pressed="true"], .az-chip.is-active { --az-btn-stroke: var(--az-ink); --az-btn-fill: var(--az-ink); --az-btn-fill-hover: var(--az-ink); --az-btn-ink: var(--az-dark-text); }

/* ---------- Panneaux et cartes ----------
   Trait et fond portés par ::before et ::after : le panneau lui-même n'est pas
   clippé, un menu déroulant qu'il contient peut en déborder. */
.az-panel, .az-card {
  --az-panel-stroke: var(--az-line);
  --az-panel-fill: var(--az-panel);
  position: relative;
  isolation: isolate;
  color: var(--az-ink);
}
.az-panel { padding: var(--az-space-6); }
.az-panel::before, .az-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--az-panel-stroke); clip-path: var(--az-chamfer); pointer-events: none; }
.az-panel::after, .az-card::after { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--az-panel-fill); clip-path: var(--az-chamfer-in); pointer-events: none; }
.az-panel--inset { --az-panel-fill: var(--az-panel-2); }
.az-panel--tight { padding: var(--az-space-4); }
.az-panel--flat::before, .az-panel--flat::after { clip-path: none; }
.az-card { display: flex; flex-direction: column; padding: 1px; }
.az-card__media { display: block; border-bottom: 1px solid var(--az-line); clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%, 0 13px); overflow: hidden; }
.az-card__media img { display: block; width: 100%; height: auto; }
.az-card__body { flex: 1; padding: var(--az-space-5); }
.az-card__foot { padding: var(--az-space-3) var(--az-space-5); border-top: 1px solid var(--az-line-soft); }

/* ---------- Barre d'en-tête sombre (comme la console AZMK) ----------
   Elle ne compte pas dans la règle « un pavé sombre » : c'est le cadre de l'outil. */
.az-topbar { background: var(--az-dark); color: var(--az-dark-text); border-bottom: 1px solid var(--az-dark-line); }
.az-topbar__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--az-dark-text); font-family: var(--az-font); font-weight: 700; font-size: var(--az-text-lg); text-decoration: none; }
.az-topbar__brand::before { content: ""; width: 10px; height: 10px; flex-shrink: 0; background: var(--az-amber-bright); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.az-topbar__nav { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.az-topbar__link { padding: 10px 0 9px; border-bottom: 2px solid transparent; color: var(--az-dark-muted); font-family: var(--az-font); font-weight: 600; text-decoration: none; white-space: nowrap; }
.az-topbar__link:hover { color: var(--az-dark-text); }
.az-topbar__link[aria-current="page"] { color: var(--az-dark-text); border-bottom-color: var(--az-amber-bright); }
.az-topbar__who { font-family: var(--az-font-mono); font-size: var(--az-text-xs); color: var(--az-dark-muted); }
.az-topbar .az-muted { color: var(--az-dark-muted); }
.az-topbar :focus-visible { outline-color: var(--az-amber-bright); }
.az-topbar .az-btn--ghost { --az-btn-stroke: var(--az-dark-line); --az-btn-fill: var(--az-dark); --az-btn-fill-hover: var(--az-dark-2); --az-btn-ink: var(--az-dark-text); }
.az-topbar .az-btn--primary { --az-btn-stroke: var(--az-amber-bright); --az-btn-fill: var(--az-amber-bright); --az-btn-fill-hover: var(--az-amber-bright); --az-btn-ink: var(--az-ink); }
.az-topbar .az-btn--text { color: var(--az-dark-text); text-decoration-color: var(--az-amber-bright); }
.az-topbar .az-btn:focus-visible { --az-btn-stroke: var(--az-dark-text); }

/* ---------- Pavé sombre : un seul à l'écran ---------- */
.az-band { background: var(--az-dark); color: var(--az-dark-text); padding: var(--az-space-7) var(--az-space-5); }
.az-band .az-title { color: var(--az-dark-text); }
.az-band .az-title em { color: var(--az-amber-bright); }
.az-band .az-lead, .az-band .az-muted, .az-band .az-eyebrow { color: var(--az-dark-muted); }
.az-band .az-eyebrow::before, .az-band .az-title--mark::before { background: var(--az-amber-bright); }
.az-band .az-btn--ghost { --az-btn-stroke: var(--az-dark-line); --az-btn-fill: var(--az-dark); --az-btn-fill-hover: var(--az-dark-2); --az-btn-ink: var(--az-dark-text); }
.az-band .az-btn--primary { --az-btn-stroke: var(--az-amber-bright); --az-btn-fill: var(--az-amber-bright); --az-btn-fill-hover: var(--az-amber-bright); --az-btn-ink: var(--az-ink); }
.az-band :focus-visible { outline-color: var(--az-amber-bright); }
.az-band .az-btn:focus-visible { --az-btn-stroke: var(--az-dark-text); }
.az-band--notice { display: flex; align-items: center; gap: var(--az-space-3); padding: var(--az-space-3) var(--az-space-4); font-weight: 600; font-size: var(--az-text-md); }
.az-band--notice::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; background: var(--az-amber-bright); }

/* ---------- Formulaires ---------- */
.az-label { display: block; margin-bottom: 6px; font-family: var(--az-font); font-weight: 600; font-size: var(--az-text-md); color: var(--az-ink); }
.az-field { display: block; width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px var(--az-space-3); background: var(--az-panel); color: var(--az-ink); border: 1px solid var(--az-line-strong); border-radius: 0; font-family: var(--az-font); font-weight: 500; font-size: var(--az-text-lg); line-height: 1.3; }
.az-field::placeholder { color: var(--az-muted); opacity: 1; }
.az-field:hover { border-color: var(--az-ink-2); }
.az-field:focus, .az-field:focus-visible { outline: 2px solid var(--az-focus); outline-offset: 0; border-color: var(--az-focus); }
.az-field[aria-invalid="true"] { border-color: var(--az-neg); }
.az-field:disabled { background: var(--az-panel-2); color: var(--az-muted); cursor: not-allowed; }
.az-field--area, textarea.az-field { min-height: 96px; resize: vertical; line-height: 1.45; }
select.az-field { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--az-ink-2) 50%), linear-gradient(135deg, var(--az-ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.az-help { margin-top: 6px; font-size: var(--az-text-sm); color: var(--az-muted); }
.az-error { margin-top: 6px; font-size: var(--az-text-sm); font-weight: 600; color: var(--az-neg); }

/* ---------- Badges, tags, notices ---------- */
/* Badge = un libellé en Rajdhani ; le mono reste aux tags (identifiants techniques) et aux chiffres */
.az-badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px var(--az-space-2); border: 1px solid var(--az-line); background: var(--az-panel-2); color: var(--az-ink-2); font-family: var(--az-font); font-weight: 600; font-size: var(--az-text-sm); line-height: 1.45; white-space: nowrap; }
/* Chaque état a sa forme, pour ne pas reposer sur la seule couleur : coche, triangle, croix (la catégorie a le carré) */
.az-badge--ok::before, .az-badge--warn::before, .az-badge--neg::before { content: ""; width: 9px; height: 9px; flex-shrink: 0; background: currentColor; }
.az-badge--ok::before { clip-path: polygon(0 55%, 16% 40%, 38% 62%, 84% 12%, 100% 27%, 38% 92%); }
.az-badge--warn::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.az-badge--neg::before { clip-path: polygon(18% 0, 50% 32%, 82% 0, 100% 18%, 68% 50%, 100% 82%, 82% 100%, 50% 68%, 18% 100%, 0 82%, 32% 50%, 0 18%); }
/* Un badge qui porte déjà sa propre icône (premier enfant aria-hidden) garde la sienne */
.az-badge:has(> [aria-hidden="true"]:first-child)::before { content: none; }
.az-badge--ok { color: var(--az-ok); background: var(--az-ok-bg); border-color: currentColor; }
.az-badge--warn { color: var(--az-warn); background: var(--az-warn-bg); border-color: currentColor; }
.az-badge--neg { color: var(--az-neg); background: var(--az-neg-bg); border-color: currentColor; }
.az-badge--ink { color: var(--az-dark-text); background: var(--az-ink); border-color: var(--az-ink); }
.az-badge--cat { color: var(--az-cat, var(--az-ink-2)); background: color-mix(in srgb, var(--az-cat, transparent) 9%, var(--az-panel)); border-color: currentColor; }
.az-badge--cat::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.az-tag { display: inline-flex; align-items: center; padding: 2px var(--az-space-2); border: 1px solid var(--az-line); color: var(--az-ink-2); font-family: var(--az-font-mono); font-size: var(--az-text-xs); line-height: 1.5; white-space: nowrap; }
.az-notice { padding: var(--az-space-3) var(--az-space-4); background: var(--az-panel-2); border-left: 2px solid var(--az-amber); color: var(--az-ink); font-weight: 500; }
.az-notice--accent { background: var(--az-amber-tint); }
.az-notice--ok { background: var(--az-ok-bg); border-left-color: var(--az-ok); }
.az-notice--warn { background: var(--az-warn-bg); border-left-color: var(--az-warn); }
.az-notice--neg { background: var(--az-neg-bg); border-left-color: var(--az-neg); color: var(--az-neg); }

/* ---------- Tableaux, onglets, sélecteurs segmentés ---------- */
.az-table { width: 100%; border-collapse: collapse; font-size: var(--az-text-md); }
.az-table th { padding: var(--az-space-2) var(--az-space-3); border-bottom: 1px solid var(--az-line); text-align: left; font-family: var(--az-font-mono); font-weight: 400; font-size: var(--az-text-sm); color: var(--az-ink-2); }
.az-table td { padding: 10px var(--az-space-3); border-bottom: 1px solid var(--az-line-soft); vertical-align: top; }
.az-table tbody tr:hover td { background: var(--az-hover); }
.az-tabs { display: flex; gap: var(--az-space-1); border-bottom: 1px solid var(--az-line); }
.az-tab { appearance: none; margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: var(--az-font); font-weight: 600; font-size: var(--az-text-md); color: var(--az-ink-2); cursor: pointer; }
.az-tab:hover { color: var(--az-ink); }
.az-tab[aria-selected="true"], .az-tab.is-active { color: var(--az-ink); border-bottom-color: var(--az-amber); }
.az-segmented { display: inline-flex; border: 1px solid var(--az-line-strong); }
.az-segmented > button { appearance: none; padding: 6px 14px; border: 0; background: transparent; font-family: var(--az-font); font-weight: 600; font-size: var(--az-text-sm); color: var(--az-ink-2); cursor: pointer; }
.az-segmented > button + button { border-left: 1px solid var(--az-line-strong); }
.az-segmented > button[aria-pressed="true"], .az-segmented > button.is-active { background: var(--az-ink); color: var(--az-dark-text); }

/* ---------- Menus, modales, toasts ---------- */
.az-menu { min-width: 200px; padding: var(--az-space-1); background: var(--az-panel); border: 1px solid var(--az-line-strong); }
.az-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: var(--az-space-2) 10px; border: 0; background: none; text-align: left; text-decoration: none; font-family: var(--az-font); font-weight: 600; font-size: var(--az-text-md); color: var(--az-ink); cursor: pointer; }
.az-menu-item:hover, .az-menu-item:focus-visible { background: var(--az-hover); outline: none; }
.az-menu-item--danger { color: var(--az-neg); }
.az-menu-sep { height: 1px; margin: var(--az-space-1) 0; background: var(--az-line-soft); }
.az-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--az-space-4); background: var(--az-scrim); }
/* Modale chanfreinée comme un panneau. Elle défile : le trait du coin coupé est donc un fond
   (qui reste attaché à la boîte) et non un pseudo-élément (qui défilerait avec le contenu). */
.az-dialog { position: relative; width: min(560px, 100%); max-height: calc(100vh - 64px); overflow: auto; box-sizing: border-box; padding: var(--az-space-6); border: 1px solid var(--az-ink); color: var(--az-ink); clip-path: var(--az-chamfer);
  background:
    linear-gradient(135deg, transparent 50%, var(--az-ink) 50% calc(50% + 1.2px), transparent calc(50% + 1.2px)) left top / 14px 14px no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 1.2px), var(--az-ink) calc(50% - 1.2px) 50%, transparent 50%) right bottom / 14px 14px no-repeat border-box,
    var(--az-panel); }
.az-dialog__title { margin: 0 0 var(--az-space-3); font-family: var(--az-font); font-weight: 600; font-size: var(--az-text-2xl); line-height: 1.1; }
.az-toast { display: flex; align-items: center; gap: var(--az-space-3); padding: var(--az-space-3) var(--az-space-4); background: var(--az-panel); border: 1px solid var(--az-ink); border-left-width: 3px; color: var(--az-ink); font-weight: 600; }
.az-toast--ok { border-left-color: var(--az-ok); }
.az-toast--neg { border-left-color: var(--az-neg); }

/* ---------- Progression, étapes, squelettes ---------- */
.az-progress { height: 3px; overflow: hidden; background: var(--az-line-soft); }
.az-progress__bar { display: block; height: 100%; background: var(--az-amber); transition: width 400ms ease; }
.az-steps { margin: 0; padding: 0; list-style: none; counter-reset: az-step; }
.az-steps > li { counter-increment: az-step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--az-space-3); padding: var(--az-space-3) 0; border-top: 1px solid var(--az-line-soft); }
.az-steps > li::before { content: counter(az-step, decimal-leading-zero); font-family: var(--az-font-mono); font-size: var(--az-text-sm); color: var(--az-muted); }
.az-skeleton { display: block; background: linear-gradient(90deg, var(--az-panel-2) 25%, var(--az-panel) 50%, var(--az-panel-2) 75%); background-size: 200% 100%; animation: az-shimmer 1.4s ease-in-out infinite; }

@keyframes az-spin { to { transform: rotate(360deg); } }
@keyframes az-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .az-skeleton { animation: none; }
  .az-btn--busy::after { animation-duration: 1.6s; }
  .az-progress__bar { transition: none; }
}