/* ==========================================================================
   AV-Connexion — Components
   --------------------------------------------------------------------------
   Kit de composants réutilisables. Chaque section est précédée d'un bloc de
   commentaires : nom, variantes, mini-exemple HTML.
   Toutes les valeurs passent par var(--av-*) — voir tokens.css.
   ========================================================================== */

/* --- App-own token override: --av-text-faint contrast (P3, ARBITRAGES 3
   quaterdecies) --------------------------------------------------------------
   His verdict on the 2.4:1 the charter measured: « il faut un minimum
   respecter les normes d'accessibilité ». Measured LIVE (Playwright,
   getComputedStyle on the real shell bench — scripts/mesures/probe-contrast.mjs,
   never the token's hex read cold): --av-text-faint on --av-bg-soft (the
   tightest real pair — .av-sidebar-label in the sidebar AND the launcher's
   CONCEVOIR/EXPLOITER/ADMINISTRER bands both reach it) was 2.39:1 in light,
   3.45:1 in dark — both below WCAG AA's 4.5:1 floor for small text.
   `tokens.css` stays byte-identical to the AV-Connexion template (house rule,
   CLAUDE.md §4) — this file loads AFTER it (app/index.html, shell-bench.html)
   so an equal-specificity redeclaration here wins the cascade for this ONE
   custom property, exactly the precedent `.av-input:disabled` set below for
   a rule the template never had at all. Re-measured after: 4.55:1 light /
   4.69:1 dark against the same tightest pair — over the floor, and confirmed
   on all THREE theme paths (data-theme=light, data-theme=dark, and OS
   preference with no attribute at all).

   🔴 ONE CONSEQUENCE, FOUND BY THE ADVERSE REVIEW 2026-09-03 — an earlier
   wording of this comment claimed the tone stayed "visibly the faintest next
   to --av-text-muted in both themes", and that was FALSE in LIGHT:
   --av-text-muted was #6B7280 (tokens.css:20), the SAME hex as faint. So in
   the light theme `faint` and `muted` collapsed to one single tone and the
   two-tier text hierarchy flattened to one tier (.av-help, .av-kpi-label,
   .av-sidebar-label, .av-profile-role, .av-tile-meta, .av-dropdown-label,
   .av-table thead th and the placeholders all became exactly as dark as
   ordinary muted body copy). It was not an oversight but arithmetic: on
   --av-bg-soft (#F7F8FA) 4.5:1 is reached at #6B7280 and NOTHING lighter
   clears the floor, so a distinct-and-compliant faint tone cannot exist
   below muted while muted itself sits at the floor — restoring two tiers
   REQUIRES darkening muted. Flagged to Léandre as P7 (ARBITRAGES 3
   quindecies); his verdict, verbatim: *« (b), je suis tes recommandations »*
   — (b) being the darken-muted option below. Dark was, and stays,
   unaffected: muted #9CA3AF vs faint #828894 were already distinct.

   ⚠️ Residue, deliberately left: --av-bg-strong (#EFF1F4 / #232638) gives
   4.27:1 / 4.20:1. Measured across the charter, no rule paints faint TEXT on
   that surface — it carries chips, badges and thumbnail wells; the one app
   use (app/src/inspector-panel.ts:810) is a 32px icon placeholder, which
   WCAG scores under 1.4.11 non-text at 3:1 and passes. Left as measured
   rather than "fixed" against a pair that does not exist on screen. */
:root, [data-theme="light"] { --av-text-faint: #6B7280; }
[data-theme="dark"] { --av-text-faint: #828894; }
@media (prefers-color-scheme: dark) {
  /* Mirrors theme.css's OWN OS-preference block (no explicit data-theme) —
     must stay conditional the same way, or this would also win in light OS
     preference and paint faint text dark-mode-light-grey on a white page. */
  :root:not([data-theme]) { --av-text-faint: #828894; }
}

/* --- App-own token override: --av-text-muted contrast (P7, ARBITRAGES 3
   quindecies, 2026-09-03) -----------------------------------------------
   Closes the collapse the comment above found: with --av-text-faint fixed
   at #6B7280 in light (4.55:1 on --av-bg-soft), the ONLY way to get a
   distinct, still-compliant tone ABOVE it is to darken --av-text-muted —
   nothing lighter than #6B7280 clears 4.5:1 on that surface, so faint
   cannot move down to make room. His verdict, verbatim: *« (b), je suis tes
   recommandations »* — (b) darkens --av-text-muted by one notch in LIGHT
   only, to #4B5563. Measured LIVE (scripts/mesures/probe-contrast.mjs,
   Playwright getComputedStyle on the real shell bench, never a cold hex
   read): #4B5563 on --av-bg-soft (the tightest real pair) is 7.11:1, on
   --av-bg 7.56:1 — both well clear of the 4.5:1 floor, and both strictly
   ABOVE faint's own 4.55:1 / 4.83:1 on the same two surfaces, restoring the
   two-tier ordering (muted reads stronger than faint, in both themes — the
   probe's P7 gate asserts contrast(muted) > contrast(faint) on --av-bg and
   --av-bg-soft, never a raw hex "darker than" comparison, because in DARK
   the more prominent tone is the LIGHTER one — see the probe's own header
   comment for why a hex comparison would flip sign between themes).

   Same mechanism as --av-text-faint above: `tokens.css` stays byte-identical
   to the AV-Connexion template (CLAUDE.md §4), this file loads after it, an
   equal-specificity redeclaration here wins the cascade for this ONE custom
   property. DARK IS UNTOUCHED — muted #9CA3AF vs faint #828894 were already
   distinct AND correctly ordered (7.42:1 / 6.58:1 vs 5.29:1 / 4.69:1 on
   --av-bg / --av-bg-soft, both re-measured, neither moved), matching his
   "ne touche à rien si les deux restent distincts" instruction.

   🔴 THE EXPLICIT [data-theme="dark"] RESTATEMENT BELOW IS LOAD-BEARING, NOT
   DECORATIVE — caught by the probe itself, not by inspection. `:root` matches
   the document root REGARDLESS of its data-theme attribute, so a bare
   `:root, [data-theme="light"] {…}` rule placed after tokens.css's own
   `[data-theme="dark"] {…}` block in the SAME cascade beats it on source
   order once specificity ties (both (0,1,0)) — it silently overwrote
   EXPLICIT dark mode with the light value (#4B5563 measured under
   [data-theme="dark"], not #9CA3AF) while OS-preference dark stayed correct
   only because theme.css's own block uses the MORE specific
   `:root:not([data-theme])` ((0,2,0), via :not()'s argument specificity).
   Restating dark here — same value tokens.css already declares — closes
   that gap the same way the --av-text-faint block above already does.

   Screen check (Playwright, dSF 2, Projets/Profil/Salles, light+dark, before/
   after — docs/design-references/2026-09-03-matin/): no secondary text reads
   as heavy as primary body text in either theme; the darkened tone stays
   read as "muted", never "normal". */
:root, [data-theme="light"] { --av-text-muted: #4B5563; }
[data-theme="dark"] { --av-text-muted: #9CA3AF; }

/* --- Icônes ----------------------------------------------------------------
   Système d'icônes SVG inline (cf. js/icons.js).
   <i class="av-ico" data-ico="trash"></i>  → remplacé en <svg> au load
   Tailles : --sm (14), défaut (18), --md (20), --lg (24), --xl (32)
   --------------------------------------------------------------------------- */
.av-ico {
  display: inline-block;
  width: 18px; height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  /* Si jamais utilisé en image SVG hors helper, garder les caps cohérents */
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.av-ico--sm { width: 14px; height: 14px; }
.av-ico--md { width: 20px; height: 20px; }
.av-ico--lg { width: 24px; height: 24px; }
.av-ico--xl { width: 32px; height: 32px; }
.av-ico--brand { color: var(--av-brand); }
.av-ico--muted { color: var(--av-text-muted); }
.av-ico--faint { color: var(--av-text-faint); }

/* --- Skip link (a11y) ------------------------------------------------------
   Lien d'évitement vers le contenu principal. Invisible jusqu'à focus clavier.
     <a class="av-skiplink" href="#main">Aller au contenu</a>
   À placer comme premier enfant de <body>, et donner id="main" à <main>.
   --------------------------------------------------------------------------- */
.av-skiplink {
  position: absolute;
  top: -40px;
  left: var(--av-space-2);
  z-index: 9999;
  padding: var(--av-space-2) var(--av-space-4);
  background: var(--av-brand);
  color: var(--av-text-on-brand, #fff);
  font-size: var(--av-text-sm);
  font-weight: var(--av-w-bold);
  border-radius: var(--av-radius-sm);
  text-decoration: none;
  transition: top var(--av-duration-quick, .15s) var(--av-ease-standard, ease);
  box-shadow: var(--av-shadow-md);
}
.av-skiplink:focus-visible {
  top: var(--av-space-2);
  outline: none;
  box-shadow: var(--av-shadow-focus);
}

/* --- Boutons ---------------------------------------------------------------
   <button class="av-btn av-btn--primary">Action</button>
   Variantes : --primary, --secondary, --ghost, --destructive
   Tailles   : --sm, --md (défaut), --lg, --block (full width)
   --------------------------------------------------------------------------- */
.av-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--av-space-2);
  padding: 8px 14px;
  font-family: var(--av-font);
  font-size: var(--av-text-base);
  font-weight: var(--av-w-bold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--av-radius-sm);
  cursor: pointer;
  transition: background-color .1s ease, border-color .1s ease, color .1s ease;
  white-space: nowrap;
}
.av-btn:focus-visible { outline: none; box-shadow: var(--av-shadow-focus); }
.av-btn:disabled { opacity: .5; cursor: not-allowed; }

.av-btn--primary { background: var(--av-brand); color: #fff; }
.av-btn--primary:hover:not(:disabled) { background: var(--av-brand-hover); }

.av-btn--secondary { background: var(--av-bg); color: var(--av-text); border-color: var(--av-border); }
.av-btn--secondary:hover:not(:disabled) { background: var(--av-bg-soft); }

.av-btn--ghost { background: transparent; color: var(--av-text-muted); border-color: var(--av-border); }
.av-btn--ghost:hover:not(:disabled) { color: var(--av-text); background: var(--av-bg-soft); }

.av-btn--destructive { background: var(--av-error); color: #fff; }
.av-btn--destructive:hover:not(:disabled) { background: #DC2626; }

.av-btn--sm    { padding: 6px 10px; font-size: var(--av-text-sm); }
.av-btn--lg    { padding: 12px 20px; font-size: var(--av-text-md); }
.av-btn--block { width: 100%; }

/* --- Inputs ---------------------------------------------------------------
   <label class="av-label">Nom</label>
   <input class="av-input" type="text">
   --------------------------------------------------------------------------- */
.av-label {
  display: block;
  font-size: var(--av-text-xs);
  font-weight: var(--av-w-bold);
  color: var(--av-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--av-space-1);
}
.av-help {
  font-size: var(--av-text-xs);
  color: var(--av-text-faint);
  margin-top: var(--av-space-1);
}

.av-input, .av-select, .av-textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--av-font);
  font-size: var(--av-text-base);
  color: var(--av-text);
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  transition: border-color .1s, box-shadow .1s;
}
.av-input::placeholder, .av-textarea::placeholder { color: var(--av-text-faint); }
/* App-own rule (not in the template, which styles only .av-btn:disabled):
   a locked field must LOOK locked. Measured 2026-09-03 (ACL v2 Lot B
   review): a disabled .av-input had the same background, colour, opacity
   and border as an editable one — the lock was real and invisible. */
.av-input:disabled, .av-select:disabled, .av-textarea:disabled {
  background: var(--av-bg-soft); color: var(--av-text-muted); opacity: .75; cursor: not-allowed;
}
.av-input:focus, .av-select:focus, .av-textarea:focus {
  outline: none;
  border-color: var(--av-brand);
  box-shadow: var(--av-shadow-focus);
}
.av-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }

.av-search {
  display: inline-flex; align-items: center; gap: var(--av-space-2);
  padding: 6px 10px;
  background: var(--av-bg-soft);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-md);
  color: var(--av-text-muted);
  font-size: var(--av-text-sm);
}
.av-search input {
  border: none; background: transparent; outline: none;
  flex: 1; min-width: 200px;
  color: var(--av-text);
}
.av-kbd {
  font-size: var(--av-text-xs);
  padding: 1px 5px;
  background: var(--av-bg-strong);
  border: 1px solid var(--av-border);
  border-radius: 3px;
  font-family: var(--av-font-mono);
}

.av-toggle {
  display: inline-flex; align-items: center; gap: var(--av-space-2);
  cursor: pointer; font-size: var(--av-text-base);
}
.av-toggle input { display: none; }
.av-toggle .av-toggle-track {
  width: 36px; height: 20px;
  background: var(--av-bg-strong);
  border-radius: var(--av-radius-full);
  position: relative;
  transition: background-color .15s;
}
.av-toggle .av-toggle-track::after {
  content: "";
  width: 16px; height: 16px;
  background: #fff;
  border-radius: var(--av-radius-full);
  position: absolute; top: 2px; left: 2px;
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.av-toggle input:checked + .av-toggle-track { background: var(--av-brand); }
.av-toggle input:checked + .av-toggle-track::after { transform: translateX(16px); }
/* App-own rule, SAME defect as `.av-input:disabled` above and found the same
   way (revue adverse Lot D12-a, 2026-09-04). `.av-toggle input` is
   `display:none`, so setting `input.disabled` changed NOTHING on screen:
   mesuré au pixel dans un vrai Chromium sur le balisage réel de
   views/systeme.ts — verrouillé et déverrouillé rendaient un track identique
   (opacity 1, background rgb(239,241,244), cursor:pointer, 36x20), alors que
   le témoin de sens opposé `.av-btn:disabled` mesurait bien opacity 0.5. Or
   son arbitrage P13 dit « grisée, non modifiable ». Le `:has()` habille le
   label entier (texte compris) ; la règle sur la piste seule reste pour les
   navigateurs qui ne l'ont pas. */
.av-toggle input:disabled + .av-toggle-track { opacity: .5; }
.av-toggle:has(input:disabled) { opacity: .6; cursor: not-allowed; }

.av-check, .av-radio {
  display: inline-flex; align-items: center; gap: var(--av-space-2);
  cursor: pointer; font-size: var(--av-text-base);
}
.av-check input, .av-radio input { accent-color: var(--av-brand); }

/* --- Badges & tags ---------------------------------------------------------
   <span class="av-badge av-badge--success">En ligne</span>
   --------------------------------------------------------------------------- */
.av-badge {
  display: inline-block;
  font-size: var(--av-text-xs);
  font-weight: var(--av-w-bold);
  padding: 2px 8px;
  border-radius: var(--av-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.av-badge--neutral { background: var(--av-bg-soft); color: var(--av-text-muted); }
.av-badge--success { background: var(--av-badge-success-bg); color: var(--av-badge-success-fg); }
.av-badge--warning { background: var(--av-badge-warning-bg); color: var(--av-badge-warning-fg); }
.av-badge--error   { background: var(--av-badge-error-bg);   color: var(--av-badge-error-fg); }
.av-badge--info    { background: var(--av-badge-info-bg);    color: var(--av-badge-info-fg); }
.av-badge--brand   { background: var(--av-brand-soft);       color: var(--av-brand); }

.av-tag {
  display: inline-block;
  font-size: var(--av-text-xs);
  font-weight: var(--av-w-bold);
  padding: 2px 10px;
  border-radius: var(--av-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Avatar ----------------------------------------------------------------
   <div class="av-avatar">LB</div>
   Tailles : --sm (24), --md (32, défaut), --lg (40), --xl (60)
   Modifieurs : --brand (fond bleu doux), --square (rayon lg au lieu de full)
   --------------------------------------------------------------------------- */
.av-avatar {
  width: 32px; height: 32px;
  border-radius: var(--av-radius-full);
  background: var(--av-bg-strong);
  color: var(--av-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--av-w-bold);
  font-size: var(--av-text-xs);
  overflow: hidden;
  flex-shrink: 0;
}
.av-avatar img { width: 100%; height: 100%; object-fit: cover; }
.av-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.av-avatar--lg { width: 40px; height: 40px; font-size: var(--av-text-sm); }
.av-avatar--xl { width: 60px; height: 60px; font-size: var(--av-text-xl); }
.av-avatar--brand  { background: var(--av-brand-soft); color: var(--av-brand); }
.av-avatar--square { border-radius: var(--av-radius-lg); }

/* --- Cards -----------------------------------------------------------------
   <div class="av-card"><h3>Titre</h3>…</div>
   Variantes : --kpi (KPI), --accent (bordure brand)
   --------------------------------------------------------------------------- */
.av-card {
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-md);
  padding: var(--av-space-4);
}
.av-card--kpi { padding: 12px 14px; }
.av-card--kpi .av-kpi-label {
  font-size: var(--av-text-xs);
  color: var(--av-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--av-w-bold);
}
.av-card--kpi .av-kpi-value {
  font-size: var(--av-text-2xl);
  font-weight: var(--av-w-black);
  letter-spacing: -0.02em;
  margin-top: var(--av-space-1);
}
.av-card--kpi .av-kpi-delta {
  font-size: var(--av-text-xs);
  color: var(--av-text-muted);
  margin-top: 2px;
}
.av-card--kpi .av-kpi-delta--up   { color: var(--av-error); }
.av-card--kpi .av-kpi-delta--down { color: var(--av-success); }

.av-card--accent {
  border-color: var(--av-brand);
  box-shadow: 0 0 0 3px rgba(0,32,224,.05);
}

/* --- App shell : layout 4 zones --------------------------------------------
   <div class="av-shell">
     <aside class="av-sidebar">…</aside>
     <header class="av-topbar">…</header>
     <main class="av-main">…</main>
     <footer class="av-statusbar">…</footer>
   </div>
   --------------------------------------------------------------------------- */
.av-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr 28px;
  grid-template-areas:
    "side topbar"
    "side main"
    "side status";
  height: 100vh;          /* hauteur figée — la sidebar ne défile pas */
  overflow: hidden;       /* seul .av-main scrolle (cf. overflow:auto plus bas) */
}

/* SIDEBAR (240 px) */
.av-sidebar {
  grid-area: side;
  background: var(--av-bg-soft);
  border-right: 1px solid var(--av-border);
  display: flex; flex-direction: column;
  z-index: var(--av-z-sidebar);
}
.av-sidebar-brand {
  display: flex; align-items: center; gap: var(--av-space-3);
  padding: var(--av-space-4) 18px;
  border-bottom: 1px solid var(--av-border);
}
.av-sidebar-brand .av-sidebar-symbol {
  width: 28px; height: 28px;
  border-radius: var(--av-radius-md);
  background: var(--av-brand);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: var(--av-w-black);
}
.av-sidebar-brand .av-sidebar-wordmark {
  font-weight: var(--av-w-black);
  letter-spacing: -0.02em;
}
.av-sidebar-brand .av-sidebar-wordmark .av-accent { color: var(--av-brand); }

/* --- Logo (image officielle, bascule auto light/dark) ----------------------
   <img class="av-logo av-logo--light" src="assets/logo/logo-light.png" alt="AV-Connexion">
   <img class="av-logo av-logo--dark"  src="assets/logo/logo-dark.png"  alt="AV-Connexion">
   La variante light s'affiche en mode clair, la dark en mode sombre.
   --------------------------------------------------------------------------- */
.av-logo { display: block; height: 30px; width: auto; }
.av-logo--dark { display: none; }
[data-theme="dark"] .av-logo--light { display: none; }
[data-theme="dark"] .av-logo--dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .av-logo--light { display: none; }
  :root:not([data-theme]) .av-logo--dark  { display: block; }
}

.av-sidebar-nav { padding: var(--av-space-3) var(--av-space-2); flex: 1; overflow-y: auto; }
.av-sidebar-label {
  padding: var(--av-space-2) var(--av-space-3) var(--av-space-1);
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--av-text-faint); font-weight: var(--av-w-bold);
}
.av-sidebar-item {
  display: flex; align-items: center; gap: var(--av-space-3);
  padding: 9px var(--av-space-3);
  border-radius: var(--av-radius-sm);
  color: var(--av-text-muted);
  font-size: var(--av-text-sm);
  cursor: pointer;
  margin-bottom: 2px;
  position: relative;
  transition: background-color .1s, color .1s;
}
.av-sidebar-item:hover { background: var(--av-bg-strong); color: var(--av-text); }
.av-sidebar-item.is-active {
  background: var(--av-brand-soft);
  color: var(--av-brand-hover);
  font-weight: var(--av-w-bold);
}
.av-sidebar-item.is-active::before {
  content: ""; position: absolute;
  left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--av-brand);
  border-radius: 0 3px 3px 0;
}
.av-sidebar-item .av-sidebar-ico,
.av-sidebar-item > .av-ico { width: 18px; text-align: center; opacity: .85; }
.av-sidebar-item.is-active > .av-ico { opacity: 1; }
.av-sidebar-item .av-sidebar-count {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--av-radius-full);
  background: var(--av-brand);
  color: #fff;
  font-weight: var(--av-w-bold);
}

.av-sidebar-profile {
  padding: var(--av-space-3);
  border-top: 1px solid var(--av-border);
  display: flex; align-items: center; gap: var(--av-space-3);
}
.av-profile-info { display: flex; flex-direction: column; line-height: 1.2; }
.av-profile-name { font-size: var(--av-text-sm); font-weight: var(--av-w-bold); }
.av-profile-role { font-size: 10px; color: var(--av-text-faint); }

/* TOPBAR (56 px) */
.av-topbar {
  grid-area: topbar;
  background: var(--av-bg);
  border-bottom: 1px solid var(--av-border);
  display: flex; align-items: center;
  padding: 0 var(--av-space-5);
  gap: var(--av-space-4);
  z-index: var(--av-z-topbar);
}
.av-crumb {
  display: flex; align-items: center; gap: var(--av-space-2);
  font-size: var(--av-text-sm); color: var(--av-text-muted);
}
.av-crumb b { color: var(--av-text); font-weight: var(--av-w-bold); }
.av-crumb .av-crumb-sep { opacity: .4; }
.av-crumb a { color: var(--av-brand); font-weight: var(--av-w-bold); }
.av-topbar-actions { margin-left: auto; display: flex; gap: var(--av-space-2); align-items: center; }

.av-icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--av-radius-sm);
  background: var(--av-bg-soft);
  border: 1px solid var(--av-border);
  color: var(--av-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background-color .1s;
}
.av-icon-btn:hover { background: var(--av-bg-strong); color: var(--av-text); }
.av-notif-dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px;
  border-radius: var(--av-radius-full);
  background: var(--av-error);
  border: 1.5px solid var(--av-bg);
}

/* MAIN */
.av-main {
  grid-area: main;
  background: var(--av-bg-dim);
  padding: var(--av-space-5) var(--av-space-6);
  overflow: auto;
}
.av-pagehead {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--av-space-5);
}
.av-pagehead h1 { display: flex; align-items: center; gap: var(--av-space-3); }
.av-pagehead .av-sub {
  font-size: var(--av-text-sm); color: var(--av-text-muted);
  margin-top: var(--av-space-1);
}
.av-pagehead .av-actions { display: flex; gap: var(--av-space-2); }

/* STATUS BAR (28 px) */
.av-statusbar {
  grid-area: status;
  background: var(--av-bg-soft);
  border-top: 1px solid var(--av-border);
  display: flex; align-items: center;
  padding: 0 var(--av-space-5);
  gap: var(--av-space-4);
  font-size: var(--av-text-xs); color: var(--av-text-muted);
}
.av-status-right { margin-left: auto; }
.av-status-dot {
  width: 6px; height: 6px;
  border-radius: var(--av-radius-full);
  background: var(--av-success);
  display: inline-block;
  margin-right: 6px;
}
.av-status-dot--warning { background: var(--av-warning); }
.av-status-dot--error   { background: var(--av-error); }

/* --- Modal ----------------------------------------------------------------- */
.av-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--av-z-modal);
  padding: var(--av-space-4);
}
.av-modal {
  background: var(--av-bg);
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-lg);
  padding: var(--av-space-6);
  max-width: 480px; width: 100%;
}
.av-modal-actions {
  margin-top: var(--av-space-5);
  display: flex; gap: var(--av-space-2); justify-content: flex-end;
}

/* --- Toast ----------------------------------------------------------------- */
.av-toast {
  position: fixed; bottom: var(--av-space-5); right: var(--av-space-5);
  padding: var(--av-space-3) var(--av-space-4);
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-left: 3px solid var(--av-brand);
  border-radius: var(--av-radius-md);
  box-shadow: var(--av-shadow-md);
  z-index: var(--av-z-toast);
  max-width: 360px;
  font-size: var(--av-text-sm);
}
.av-toast--success { border-left-color: var(--av-success); }
.av-toast--warning { border-left-color: var(--av-warning); }
.av-toast--error   { border-left-color: var(--av-error); }

/* --- Table ----------------------------------------------------------------- */
.av-table-panel {
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-md);
  overflow: hidden;
}
.av-table { width: 100%; border-collapse: collapse; font-size: var(--av-text-sm); }
.av-table thead th {
  background: var(--av-bg-soft);
  padding: var(--av-space-2) var(--av-space-3);
  text-align: left;
  font-size: var(--av-text-xs); font-weight: var(--av-w-bold);
  color: var(--av-text-faint);
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--av-border);
}
.av-table tbody td {
  padding: var(--av-space-2) var(--av-space-3);
  border-bottom: 1px solid var(--av-border);
  color: var(--av-text-muted);
}
.av-table tbody tr:last-child td { border-bottom: none; }
.av-table tbody tr:hover { background: var(--av-bg-soft); }
.av-table tbody tr.is-selected { background: var(--av-brand-soft); color: var(--av-text); }
.av-table--zebra tbody tr:nth-child(even) { background: var(--av-bg-dim); }
.av-table-num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Tabs ------------------------------------------------------------------ */
.av-tabs {
  display: flex; gap: var(--av-space-1);
  border-bottom: 1px solid var(--av-border);
}
.av-tab {
  padding: var(--av-space-3) var(--av-space-4);
  font-size: var(--av-text-sm); font-weight: var(--av-w-bold);
  color: var(--av-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .1s;
}
.av-tab:hover:not(.is-active) { color: var(--av-text); }
.av-tab.is-active { color: var(--av-brand); border-bottom-color: var(--av-brand); }

/* --- Pagination ------------------------------------------------------------ */
.av-pagination { display: flex; gap: 4px; }
.av-pg {
  min-width: 28px; height: 28px;
  border-radius: var(--av-radius-sm);
  background: var(--av-bg-soft);
  border: 1px solid var(--av-border);
  color: var(--av-text-muted);
  font-size: var(--av-text-xs); font-weight: var(--av-w-bold);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--av-space-2);
}
.av-pg:hover:not(.is-current) { color: var(--av-text); }
.av-pg.is-current {
  background: var(--av-brand);
  color: #fff;
  border-color: var(--av-brand);
}

/* --- Chips ----------------------------------------------------------------- */
.av-chip {
  display: inline-flex; align-items: center; gap: var(--av-space-2);
  padding: 4px 10px;
  border-radius: var(--av-radius-full);
  background: var(--av-bg-soft);
  border: 1px solid var(--av-border);
  font-size: var(--av-text-xs); font-weight: var(--av-w-bold);
  color: var(--av-text-muted);
  cursor: pointer;
}
.av-chip:hover:not(.is-active) { color: var(--av-text); }
.av-chip.is-active {
  background: var(--av-brand-soft);
  border-color: var(--av-brand);
  color: var(--av-brand-hover);
}
.av-chip-dot {
  width: 6px; height: 6px;
  border-radius: var(--av-radius-full);
  background: var(--av-text-faint);
}

/* --- Empty state ----------------------------------------------------------- */
.av-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--av-space-12) var(--av-space-6);
  gap: var(--av-space-3);
  background: var(--av-bg);
  border: 1px dashed var(--av-border-strong);
  border-radius: var(--av-radius-md);
}
.av-empty-ico { font-size: 48px; color: var(--av-text-faint); margin-bottom: var(--av-space-2); }
.av-empty p { color: var(--av-text-muted); max-width: 400px; }

/* --- Loader & skeleton ----------------------------------------------------- */
.av-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--av-bg-strong);
  border-top-color: var(--av-brand);
  border-radius: var(--av-radius-full);
  animation: av-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes av-spin { to { transform: rotate(360deg); } }

.av-skeleton {
  background: linear-gradient(90deg, var(--av-bg-soft) 0%, var(--av-bg-strong) 50%, var(--av-bg-soft) 100%);
  background-size: 200% 100%;
  animation: av-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--av-radius-sm);
  display: inline-block;
}
@keyframes av-shimmer { to { background-position: -200% 0; } }

/* --- App tile (Launcher) --------------------------------------------------- */
.av-tile {
  display: flex; flex-direction: column; gap: var(--av-space-3);
  padding: var(--av-space-4);
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color .1s, box-shadow .1s, transform .1s;
}
.av-tile:hover {
  border-color: var(--av-brand);
  box-shadow: var(--av-shadow-md);
  transform: translateY(-1px);
}
.av-tile-head { display: flex; align-items: center; justify-content: space-between; }
.av-tile-ico {
  width: 36px; height: 36px;
  border-radius: var(--av-radius-lg);
  background: var(--av-brand-soft);
  color: var(--av-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--av-text-md);
}
.av-tile h3 { margin: 0; font-size: var(--av-text-base); font-weight: var(--av-w-bold); }
.av-tile p { font-size: var(--av-text-sm); color: var(--av-text-muted); margin: 0; line-height: 1.4; }
.av-tile-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--av-text-xs); color: var(--av-text-faint);
  padding-top: var(--av-space-2);
  border-top: 1px dashed var(--av-border);
}

/* --- Wave divider (décoratif) ---------------------------------------------- */
.av-wave-divider {
  height: 24px;
  background-image: url('../assets/symbole/symbole.svg');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  opacity: 0.05;
  pointer-events: none;
}

/* ==========================================================================
   Composants v2 (depuis v1.2.0)
   Voir js/components.js pour le comportement.
   ========================================================================== */

/* --- Form field states ---------------------------------------------------- */
.av-input--error, .av-select--error, .av-textarea--error { border-color: var(--av-error); }
.av-input--error:focus, .av-select--error:focus, .av-textarea--error:focus {
  border-color: var(--av-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}
.av-input--success { border-color: var(--av-success); }
.av-input--success:focus {
  border-color: var(--av-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}
.av-help--error   { color: var(--av-error); }
.av-help--success { color: var(--av-success); }

.av-field { margin-bottom: var(--av-space-4); }
.av-field-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--av-space-1);
}

/* --- Loading button ------------------------------------------------------- */
.av-btn.is-loading { pointer-events: none; opacity: .85; }
.av-btn.is-loading .av-spinner {
  width: 14px; height: 14px;
  border-width: 2px;
  border-color: currentColor;
  border-top-color: transparent;
  opacity: .9;
}

/* --- Dropdown ------------------------------------------------------------- */
.av-dropdown {
  position: relative;
  display: inline-flex;
}
.av-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-md);
  box-shadow: var(--av-shadow-lg);
  padding: 4px;
  z-index: 50;
  display: none;
  flex-direction: column;
}
.av-dropdown.is-open .av-dropdown-menu { display: flex; }
.av-dropdown--align-left .av-dropdown-menu { right: auto; left: 0; }
.av-dropdown--align-up .av-dropdown-menu { top: auto; bottom: calc(100% + 6px); }

.av-dropdown-item {
  display: flex; align-items: center;
  gap: var(--av-space-2);
  padding: 8px 12px;
  border-radius: var(--av-radius-sm);
  font-size: var(--av-text-sm);
  color: var(--av-text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
}
.av-dropdown-item:hover { background: var(--av-bg-soft); }
.av-dropdown-item .av-ico { color: var(--av-text-muted); }
.av-dropdown-item:hover .av-ico { color: var(--av-text); }
.av-dropdown-item--danger { color: var(--av-error); }
.av-dropdown-item--danger:hover { background: var(--av-badge-error-bg); }
.av-dropdown-item--danger .av-ico { color: var(--av-error); }
.av-dropdown-sep {
  height: 1px;
  background: var(--av-border);
  margin: 4px 0;
}
.av-dropdown-label {
  padding: 6px 12px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--av-w-bold);
  color: var(--av-text-faint);
}

/* --- Drawer --------------------------------------------------------------- */
.av-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: var(--av-z-modal);
  display: flex;
  opacity: 0;
  transition: opacity .2s ease;
}
.av-drawer-overlay.is-open { opacity: 1; }
.av-drawer-overlay[hidden] { display: none; }

.av-drawer {
  width: min(420px, 92vw);
  height: 100%;
  background: var(--av-bg);
  display: flex;
  flex-direction: column;
  box-shadow: var(--av-shadow-lg);
  transition: transform .22s cubic-bezier(0.2, 0, 0, 1);
}
.av-drawer--right { margin-left: auto; transform: translateX(100%); }
.av-drawer--left  { margin-right: auto; transform: translateX(-100%); }
.av-drawer-overlay.is-open .av-drawer { transform: translateX(0); }
.av-drawer--wide { width: min(640px, 92vw); }

.av-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--av-space-4) var(--av-space-5);
  border-bottom: 1px solid var(--av-border);
  flex-shrink: 0;
}
.av-drawer-title {
  font-size: var(--av-text-lg);
  font-weight: var(--av-w-bold);
  letter-spacing: -0.01em;
}
.av-drawer-body  { flex: 1; overflow-y: auto; padding: var(--av-space-5); }
.av-drawer-foot {
  display: flex; gap: var(--av-space-2); justify-content: flex-end;
  padding: var(--av-space-3) var(--av-space-5);
  border-top: 1px solid var(--av-border);
  flex-shrink: 0;
}

/* --- Banner (inline alert persistante) ----------------------------------- */
.av-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--av-space-3);
  padding: var(--av-space-3) var(--av-space-4);
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-left: 3px solid var(--av-info);
  border-radius: var(--av-radius-md);
  font-size: var(--av-text-sm);
  transition: opacity .2s ease, transform .2s ease;
}
.av-banner.is-dismissing { opacity: 0; transform: translateY(-4px); }
.av-banner > .av-ico {
  color: var(--av-info);
  flex-shrink: 0;
  margin-top: 1px;
  width: 20px; height: 20px;
}
.av-banner-content { flex: 1; line-height: 1.5; min-width: 0; }
.av-banner-content strong { font-weight: var(--av-w-bold); }
.av-banner-content p { margin: 0; }
.av-banner-actions { display: flex; gap: var(--av-space-2); margin-top: var(--av-space-2); }

.av-banner--success { border-left-color: var(--av-success); }
.av-banner--success > .av-ico { color: var(--av-success); }
.av-banner--warning { border-left-color: var(--av-warning); }
.av-banner--warning > .av-ico { color: var(--av-warning); }
.av-banner--error   { border-left-color: var(--av-error); }
.av-banner--error   > .av-ico { color: var(--av-error); }
.av-banner--brand   { border-left-color: var(--av-brand); }
.av-banner--brand   > .av-ico { color: var(--av-brand); }

/* --- Progress (linéaire) ------------------------------------------------- */
.av-progress {
  width: 100%;
  height: 6px;
  background: var(--av-bg-strong);
  border-radius: var(--av-radius-full);
  overflow: hidden;
  position: relative;
}
.av-progress--sm { height: 4px; }
.av-progress--lg { height: 10px; }

.av-progress-bar {
  height: 100%;
  background: var(--av-brand);
  border-radius: var(--av-radius-full);
  transition: width .3s ease;
}
.av-progress--success .av-progress-bar { background: var(--av-success); }
.av-progress--warning .av-progress-bar { background: var(--av-warning); }
.av-progress--error   .av-progress-bar { background: var(--av-error); }

.av-progress--indeterminate .av-progress-bar {
  width: 30% !important;
  position: absolute;
  animation: av-progress-indet 1.4s ease-in-out infinite;
}
@keyframes av-progress-indet {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* --- Progress (circulaire) ----------------------------------------------- */
.av-progress-circle {
  width: 60px; height: 60px;
  transform: rotate(-90deg);
}
.av-progress-circle .av-progress-track {
  stroke: var(--av-bg-strong);
  stroke-width: 3;
  fill: none;
}
.av-progress-circle .av-progress-fill {
  stroke: var(--av-brand);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
  transition: stroke-dasharray .4s ease;
}
.av-progress-circle--success .av-progress-fill { stroke: var(--av-success); }
.av-progress-circle--warning .av-progress-fill { stroke: var(--av-warning); }
.av-progress-circle--error   .av-progress-fill { stroke: var(--av-error); }
.av-progress-circle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.av-progress-circle-label {
  position: absolute;
  font-size: var(--av-text-sm);
  font-weight: var(--av-w-bold);
  color: var(--av-text);
}

/* --- Tooltip -------------------------------------------------------------- */
.av-tooltip {
  position: absolute;
  top: 0; left: 0;
  z-index: 1000;
  pointer-events: none;
  padding: 6px 10px;
  background: var(--av-text);
  color: var(--av-bg);
  font-size: var(--av-text-xs);
  font-weight: var(--av-w-medium);
  border-radius: var(--av-radius-sm);
  max-width: 240px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .15s ease;
  white-space: normal;
  box-shadow: var(--av-shadow-md);
}
.av-tooltip.is-visible { opacity: 1; }

/* --- Datepicker ----------------------------------------------------------- */
.av-datepicker {
  position: relative;
  display: inline-block;
  width: 100%;
}
.av-datepicker > input {
  cursor: pointer;
  padding-right: 36px;
}
.av-datepicker-trigger-ico {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--av-text-faint);
  pointer-events: none;
}
.av-datepicker-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  width: 280px;
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-md);
  box-shadow: var(--av-shadow-lg);
  padding: var(--av-space-3);
  display: none;
}
.av-datepicker-popover.is-open { display: block; }

.av-datepicker-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--av-space-3);
}
.av-datepicker-month {
  font-weight: var(--av-w-bold);
  font-size: var(--av-text-sm);
  text-transform: capitalize;
}
.av-datepicker-nav {
  width: 28px; height: 28px;
  border-radius: var(--av-radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--av-text-muted);
  cursor: pointer;
  background: transparent;
  border: 0;
}
.av-datepicker-nav:hover { background: var(--av-bg-soft); color: var(--av-text); }

.av-datepicker-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: var(--av-w-bold);
  color: var(--av-text-faint);
  margin-bottom: 4px;
}
.av-datepicker-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.av-datepicker-day {
  height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--av-text-sm);
  border-radius: var(--av-radius-sm);
  cursor: pointer;
  color: var(--av-text);
  background: transparent;
  border: 0;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.av-datepicker-day:hover:not(.is-selected) { background: var(--av-bg-soft); }
.av-datepicker-day.is-outside { color: var(--av-text-faint); }
.av-datepicker-day.is-today {
  font-weight: var(--av-w-black);
  color: var(--av-brand);
}
.av-datepicker-day.is-today.is-selected { color: #fff; }
.av-datepicker-day.is-selected {
  background: var(--av-brand);
  color: #fff;
  font-weight: var(--av-w-bold);
}
.av-datepicker-day.is-in-range {
  background: var(--av-brand-soft);
  color: var(--av-brand-hover);
  border-radius: 0;
}
.av-datepicker-day.is-range-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.av-datepicker-day.is-range-end   { border-top-left-radius: 0;  border-bottom-left-radius: 0; }

.av-datepicker-foot {
  display: flex; justify-content: space-between;
  padding-top: var(--av-space-3);
  margin-top: var(--av-space-2);
  border-top: 1px solid var(--av-border);
}


/* ==========================================================================
   Shell v2 — topbar globale + breadcrumb + sidebar contextuelle (depuis v1.7)
   À utiliser pour toutes les pages applicatives. Inspiration : Eurécia, Google.
   ========================================================================== */

/* --- Shell layout v2 --------------------------------------------------- */
.av-shell-v2 {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 56px auto 1fr 28px;
  grid-template-areas:
    "top top"
    "break break"
    "side main"
    "status status";
  height: 100vh;
  overflow: hidden;
}
/* <av-topbar> doit s'effacer du layout : ses enfants deviennent les vrais
   participants de la grille (header.av-topbar-v2 + drawers injectés ailleurs). */
av-topbar { display: contents; }
.av-shell-v2 .av-topbar-v2  { grid-area: top; }
.av-shell-v2 .av-breadcrumb { grid-area: break; }
.av-shell-v2 .av-side-v2    { grid-area: side; overflow-y: auto; }
.av-shell-v2 .av-main-v2    { grid-area: main; overflow: auto; padding: var(--av-space-5) var(--av-space-6); background: var(--av-surface-page); }
.av-shell-v2 .av-statusbar  { grid-area: status; }

/* Variante sans sidebar — pour pages publiques (status, auth, etc.) */
.av-shell-v2--bare {
  grid-template-columns: 1fr;
  grid-template-areas:
    "top"
    "break"
    "main"
    "status";
}
.av-shell-v2--bare .av-side-v2 { display: none; }

/* --- TopBar v2 (réplique des classes lc-* du Launcher, généralisée) --- */
.av-topbar-v2 {
  height: 56px;
  background: var(--av-surface-default);
  border-bottom: 1px solid var(--av-border);
  display: flex; align-items: center;
  padding: 0 var(--av-space-2);
  gap: var(--av-space-1);
  flex-shrink: 0;
  z-index: var(--av-z-topbar);
}
.av-tb-apps {
  width: 44px; height: 44px;
  border-radius: var(--av-radius-md);
  color: var(--av-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--av-trans-bg), var(--av-trans-color);
  background: transparent; border: 0;
}
.av-tb-apps:hover { background: var(--av-state-hover-bg); color: var(--av-text); }
.av-tb-apps .av-ico { width: 22px; height: 22px; }

.av-tb-brand {
  display: flex; align-items: center;
  gap: var(--av-space-3);
  padding: 0 var(--av-space-3);
  text-decoration: none;
  color: inherit;
}
.av-tb-brand img { height: 24px; }

.av-tb-domain {
  display: flex; align-items: center; gap: var(--av-space-2);
  padding: 6px 12px;
  background: var(--av-surface-sunken);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-full);
  font-size: var(--av-text-sm);
  font-weight: var(--av-w-bold);
  color: var(--av-text);
  cursor: pointer;
  transition: var(--av-trans-bg), var(--av-trans-border);
}
.av-tb-domain:hover { background: var(--av-state-hover-bg); border-color: var(--av-brand); }
.av-tb-domain-ico {
  width: 18px; height: 18px;
  border-radius: var(--av-radius-sm);
  background: var(--av-brand);
  color: var(--av-text-on-brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.av-tb-domain-ico .av-ico { width: 12px; height: 12px; }

.av-tb-spacer { flex: 1; }

.av-tb-action {
  width: 40px; height: 40px;
  border-radius: var(--av-radius-md);
  color: var(--av-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  background: transparent; border: 0;
  transition: var(--av-trans-bg), var(--av-trans-color);
}
.av-tb-action:hover { background: var(--av-state-hover-bg); color: var(--av-text); }
.av-tb-action.is-primary {
  background: var(--av-brand);
  color: var(--av-text-on-brand);
}
.av-tb-action.is-primary:hover { background: var(--av-brand-hover); color: #fff; }
.av-tb-action .badge-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: var(--av-radius-full);
  background: var(--av-error);
  border: 2px solid var(--av-surface-default);
}

.av-tb-avatar {
  width: 40px; height: 40px;
  border-radius: var(--av-radius-full);
  background: var(--av-brand);
  color: var(--av-text-on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--av-text-sm);
  font-weight: var(--av-w-black);
  cursor: pointer;
  border: 2px solid var(--av-bg);
  transition: var(--av-trans-shadow);
  position: relative;
}
.av-tb-avatar:hover { box-shadow: 0 0 0 3px var(--av-brand-soft); }
.av-tb-avatar::after {
  content: "";
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  border-radius: var(--av-radius-full);
  background: var(--av-success);
  border: 2px solid var(--av-surface-default);
}

/* --- Breadcrumb (style Eurécia : trail + titre avec icône) --- */
.av-breadcrumb {
  background: var(--av-surface-default);
  border-bottom: 1px solid var(--av-border);
  padding: var(--av-space-3) var(--av-space-6) var(--av-space-4);
  display: flex; flex-direction: column; gap: var(--av-space-2);
  flex-shrink: 0;
}
.av-breadcrumb-trail {
  display: flex; align-items: center; gap: var(--av-space-2);
  font-size: var(--av-text-sm);
}
.av-breadcrumb-back {
  width: 28px; height: 28px;
  border-radius: var(--av-radius-sm);
  color: var(--av-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  cursor: pointer;
  transition: var(--av-trans-bg), var(--av-trans-color);
}
.av-breadcrumb-back:hover { background: var(--av-state-hover-bg); color: var(--av-brand); }
.av-breadcrumb-trail ol {
  display: flex; align-items: center; gap: var(--av-space-2);
  list-style: none;
  padding: 0; margin: 0;
}
.av-breadcrumb-trail li {
  display: flex; align-items: center; gap: var(--av-space-2);
  color: var(--av-text-muted);
}
.av-breadcrumb-trail li a {
  color: var(--av-text);
  font-weight: var(--av-w-medium);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--av-duration-quick);
}
.av-breadcrumb-trail li a:hover { text-decoration-color: var(--av-brand); color: var(--av-brand); }
.av-breadcrumb-trail li::after {
  content: "/";
  color: var(--av-text-faint);
  margin-left: var(--av-space-1);
}
.av-breadcrumb-trail li:last-child::after { content: ""; }
.av-breadcrumb-trail li.is-current {
  color: var(--av-text-faint);
  font-weight: var(--av-w-medium);
}

.av-breadcrumb-title {
  display: flex; align-items: center; gap: var(--av-space-3);
}
.av-breadcrumb-title-ico {
  width: 44px; height: 44px;
  border-radius: var(--av-radius-md);
  background: var(--av-brand-soft);
  color: var(--av-brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.av-breadcrumb-title-ico .av-ico { width: 22px; height: 22px; }
.av-breadcrumb-title h1 {
  font-size: var(--av-text-xl);
  font-weight: var(--av-w-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.av-breadcrumb-title .av-sub {
  font-size: var(--av-text-sm);
  color: var(--av-text-muted);
  margin-top: 2px;
}
.av-breadcrumb-actions {
  margin-left: auto;
  display: flex; gap: var(--av-space-2);
}

/* --- Sidebar contextuelle v2 (200px, sous-sections de l'app courante) --- */
.av-side-v2 {
  background: var(--av-surface-sunken);
  border-right: 1px solid var(--av-border);
  padding: var(--av-space-3) var(--av-space-2);
  display: flex; flex-direction: column;
  gap: 2px;
}
.av-side-v2 .av-sidebar-label {
  padding: var(--av-space-2) var(--av-space-3) var(--av-space-1);
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--av-text-faint);
  font-weight: var(--av-w-bold);
}
.av-side-v2 .av-sidebar-item {
  display: flex; align-items: center; gap: var(--av-space-3);
  padding: 8px var(--av-space-3);
  border-radius: var(--av-radius-sm);
  color: var(--av-text-muted);
  font-size: var(--av-text-sm);
  cursor: pointer;
  position: relative;
  transition: var(--av-trans-bg), var(--av-trans-color);
  margin-bottom: 1px;
}
.av-side-v2 .av-sidebar-item:hover { background: var(--av-state-hover-bg); color: var(--av-text); }
.av-side-v2 .av-sidebar-item.is-active {
  background: var(--av-state-selected-bg);
  color: var(--av-state-selected-fg);
  font-weight: var(--av-w-bold);
}
.av-side-v2 .av-sidebar-item.is-active::before {
  content: ""; position: absolute;
  left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--av-brand);
  border-radius: 0 3px 3px 0;
}


/* ==========================================================================
   Drawers + Apps tiles + Notifications (depuis v1.7 — utilisés par
   <av-topbar> via shell-chrome.js partout dans le projet)
   Ces classes étaient initialement dans Launcher/index.html inline.
   ========================================================================== */

/* Apps grid (drawer "Toutes les applications") */
.lc-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--av-space-3);
}
.lc-app-tile {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--av-space-2);
  padding: var(--av-space-3) var(--av-space-2);
  border-radius: var(--av-radius-md);
  cursor: pointer;
  transition: var(--av-trans-bg);
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.lc-app-tile:hover { background: var(--av-state-hover-bg); }
.lc-app-tile-ico-wrap { position: relative; }
.lc-app-tile-ico {
  width: 52px; height: 52px;
  border-radius: var(--av-radius-md);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--av-shadow-sm);
}
.lc-app-tile-ico .av-ico { width: 26px; height: 26px; }
.lc-app-tile-name {
  font-size: 11px;
  font-weight: var(--av-w-bold);
  color: var(--av-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.lc-app-tile.is-soon .lc-app-tile-ico { opacity: .5; }
.lc-app-tile.is-soon .lc-app-tile-name { color: var(--av-text-faint); }
.lc-app-tile-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--av-brand);
  color: #fff;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--av-radius-full);
  font-weight: var(--av-w-bold);
}

/* Action list (drawer "Mes actions rapides", "Aide") */
.lc-action-list { display: flex; flex-direction: column; gap: 4px; }
.lc-action-row {
  display: flex; align-items: center; gap: var(--av-space-3);
  padding: var(--av-space-3);
  border-radius: var(--av-radius-sm);
  cursor: pointer;
  transition: var(--av-trans-bg);
  text-decoration: none;
  color: inherit;
}
.lc-action-row:hover { background: var(--av-state-hover-bg); }
.lc-action-row-ico {
  width: 40px; height: 40px;
  border-radius: var(--av-radius-md);
  background: var(--av-brand-soft);
  color: var(--av-brand);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lc-action-row-info { flex: 1; min-width: 0; }
.lc-action-row-name { font-size: var(--av-text-sm); font-weight: var(--av-w-bold); color: var(--av-text); }
.lc-action-row-hint { font-size: var(--av-text-xs); color: var(--av-text-faint); margin-top: 2px; }

/* Notifications */
.lc-notif-row {
  display: grid; grid-template-columns: 8px 32px 1fr auto;
  gap: var(--av-space-3); align-items: start;
  padding: var(--av-space-3);
  border-radius: var(--av-radius-sm);
  cursor: pointer;
  transition: var(--av-trans-bg);
}
.lc-notif-row:hover { background: var(--av-state-hover-bg); }
.lc-notif-dot {
  width: 8px; height: 8px;
  border-radius: var(--av-radius-full);
  background: var(--av-brand);
  margin-top: 12px;
}
.lc-notif-row.is-read .lc-notif-dot { background: transparent; }
.lc-notif-row.is-read { opacity: .65; }
.lc-notif-body { font-size: var(--av-text-sm); line-height: 1.5; color: var(--av-text); }
.lc-notif-body b { font-weight: var(--av-w-bold); }
.lc-notif-body .meta { color: var(--av-text-faint); font-size: var(--av-text-xs); margin-top: 4px; }
.lc-notif-time { font-size: var(--av-text-xs); color: var(--av-text-faint); white-space: nowrap; }

/* Account drawer */
.lc-account-head {
  display: flex; gap: var(--av-space-3); align-items: center;
  padding: var(--av-space-4) var(--av-space-5);
  background: var(--av-surface-sunken);
  border-bottom: 1px solid var(--av-border);
}
.lc-account-avatar {
  width: 48px; height: 48px;
  border-radius: var(--av-radius-full);
  background: var(--av-brand);
  color: var(--av-text-on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--av-text-md);
  font-weight: var(--av-w-black);
}
.lc-account-name { font-size: var(--av-text-md); font-weight: var(--av-w-bold); color: var(--av-text); line-height: 1.2; }
.lc-account-email { font-size: var(--av-text-xs); color: var(--av-text-muted); margin-top: 2px; }
.lc-account-actions { padding: var(--av-space-2); }
.lc-account-action {
  display: flex; align-items: center; gap: var(--av-space-3);
  padding: var(--av-space-3);
  border-radius: var(--av-radius-sm);
  cursor: pointer;
  font-size: var(--av-text-sm);
  color: var(--av-text);
  text-decoration: none;
  transition: var(--av-trans-bg);
}
.lc-account-action:hover { background: var(--av-state-hover-bg); }
.lc-account-action.is-danger { color: var(--av-error); }

/* Search drawer */
.lc-search-input-wrap { position: relative; }
.lc-search-input {
  width: 100%;
  padding: 14px 50px 14px 18px;
  font-size: var(--av-text-md);
  background: var(--av-surface-default);
  border: 1.5px solid var(--av-brand);
  border-radius: var(--av-radius-md);
  color: var(--av-text);
  box-shadow: var(--av-state-focus-ring);
}
.lc-search-input:focus { outline: none; }
.lc-search-ico-btn {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: var(--av-radius-sm);
  background: var(--av-brand);
  color: var(--av-text-on-brand);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}

/* Empty state */
.lc-empty {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: var(--av-space-12) var(--av-space-4);
  color: var(--av-text-faint);
}
.lc-empty-ico {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--av-surface-sunken);
  color: var(--av-text-faint);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--av-space-4);
}
.lc-empty-ico .av-ico { width: 36px; height: 36px; }
.lc-empty-title {
  font-size: var(--av-text-lg);
  font-weight: var(--av-w-bold);
  color: var(--av-text);
  margin-bottom: var(--av-space-1);
}
.lc-empty-msg { font-size: var(--av-text-sm); color: var(--av-text-muted); }

/* Avatar utilitaire pour notifications/feed */
.lc-feed-avatar {
  width: 32px; height: 32px;
  border-radius: var(--av-radius-full);
  background: var(--av-bg-strong);
  color: var(--av-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--av-text-xs);
  font-weight: var(--av-w-bold);
  flex-shrink: 0;
}

/* --- Property Grid rows (mission #60, Property Grid unifiée à la VT Pro) ---
   A field box built as `box.appendChild(label); box.appendChild(control)`
   (app/src/inspector-panel.ts, app/src/inspector/property-row.ts) becomes a
   2-column "Property Name / Property Value" row via ONE class — no DOM
   change, only layout. Matches docs/audits/maquettes-uiux/
   property-grid-unifiee.html's `.pg-name`/`.pg-val` and the real VT Pro-e
   reference (Property_Grid/About_the_Property_Grid.htm): "two columns,
   Property Name and Property Value".
   <div class="av-prop-row"><label class="av-label">Rayon (px)</label><input class="av-input"></div>
   A 3rd+ child (a validation hint, an unfold panel) spans the full row width.
   --------------------------------------------------------------------------- */
.av-prop-row {
  display: grid;
  grid-template-columns: 36% 1fr;
  align-items: center;
  gap: 4px 10px;
  padding: 5px 4px;
  border-radius: var(--av-radius-sm);
}
.av-prop-row:hover, .av-prop-row:focus-within { background: var(--av-brand-soft); }
.av-prop-row > .av-label {
  text-transform: none;
  font-weight: var(--av-w-roman);
  font-size: var(--av-text-sm);
  color: var(--av-text-muted);
  margin-bottom: 0;
}
/* An unusually long (sentence-style) property name — see property-row.ts's
   STACK_LABEL_THRESHOLD — gets its own full-width line instead of wrapping
   into a dozen lines squeezed against the value column. */
.av-prop-row.av-prop-row--stacked { grid-template-columns: 1fr; }
/* CSS Grid blowout guard: a grid item's default `min-width:auto` clamps it to
   its content's min-content size, which for a nowrap flex row (the assetRef
   picker's preview+name+"Parcourir" row, a join field's input+badge+auto
   button…) can exceed the 1fr track and force the WHOLE row to overflow
   sideways — field-caught on the real "Icon Ref"/"Normal state image" rows
   (mission #60). `min-width: 0` makes every cell respect the grid's own
   computed width; each cell's OWN inner flex/text-overflow rules (already
   `min-width:0;overflow:hidden;text-overflow:ellipsis` on the name spans)
   then do the actual shrinking. */
.av-prop-row > * { min-width: 0; }
.av-prop-row > :nth-child(n+3) { grid-column: 1 / -1; }

/* --- Property description box (mission #60) ---------------------------------
   Pinned at an inspector panel's bottom (never scrolls away with the
   sections above it) — VT Pro-e's own "property description box... indicates
   the property name that is selected", sticky until another row is
   hovered/focused (see app/src/inspector/property-row.ts's buildDescriptionBox).
   --------------------------------------------------------------------------- */
.av-prop-desc {
  flex-shrink: 0;
  border-top: 1px solid var(--av-border);
  background: var(--av-bg-soft);
  padding: 8px 12px;
  font-size: var(--av-text-xs);
  color: var(--av-text-muted);
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.av-prop-desc b { color: var(--av-text); font-size: var(--av-text-sm); }
.av-prop-desc:not(.is-active) b { display: none; }
.lc-feed-avatar.brand { background: var(--av-brand-soft); color: var(--av-brand); }

/* --- Click Assign (mission #66) ---------------------------------------------
   Canvas-side visual state for the "assign a join by clicking a canvas
   object" rafale mode (docs/audits/maquettes-uiux/click-assign-rafale.html).
   Applied via canvas.ts's applyClickAssignPaint() as class toggles only — no
   inline styles — so a component's normal (inline, paintSelection) selection
   outline still wins over these when both apply to the same element.
   The floating status overlay (app/src/inspector/click-assign-overlay.ts)
   and the join row's own target button (app/src/inspector-panel.ts's
   joinField) reuse existing av-badge/av-icon-btn/av-btn primitives — no
   dedicated CSS needed for those beyond the `is-active` rule below.
   ----------------------------------------------------------------------- */
.avx-ca-active { cursor: not-allowed; }
.avx-ca-active [data-avx-id] { transition: opacity .12s, outline-color .12s; }
.avx-ca-active [data-avx-id]:not(.avx-ca-target) { opacity: .35; }
.avx-ca-active [data-avx-id].avx-ca-target {
  cursor: crosshair;
  outline: 2px dashed var(--av-success);
  outline-offset: 2px;
}
.avx-ca-active [data-avx-id].avx-ca-target--done {
  cursor: default;
  outline: 2px solid var(--av-success);
  opacity: .7;
}
@keyframes avxCaReject {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.avx-ca-reject {
  animation: avxCaReject .3s ease-in-out;
  outline: 2px solid var(--av-error) !important;
}
/* The join row's own toggle button (app/src/inspector-panel.ts's joinField) —
   scoped to [data-ca-target] specifically so this never bleeds onto an
   unrelated .av-icon-btn elsewhere that happens to carry .is-active. */
[data-ca-target].is-active { background: var(--av-brand-soft); color: var(--av-brand-hover); }