/*
 * UmbraBot — surcouche MINIMALE de Product.Ui 1.0.0 (chargée APRÈS product-ui.css).
 * Règles : on surcharge des TOKENS sémantiques, jamais les règles des composants du toolkit ; le reste ne
 * concerne que la géométrie de composants propres à UmbraBot (arbre des sessions, auth, plateaux de jeu).
 */

/* ── Product V2 : accent BLEU de la maquette validée (CURRENT-V2-REFERENCE), appliqué à tout le document ───────────
   Sélecteurs de même poids que ceux du thème faithful sombre de Product.Ui (0,3,0), chargés APRÈS product-ui.css : ils
   s'appliquent à tous les thèmes, pour chaque mode — un cookie de thème différent ne rend plus l'acier du toolkit.
   Contrastes (WCAG 2.2, mesurés) :
   - #3572c2 porte un texte blanc à 4,84:1 (AA), #2d66b0 à 5,77:1, #275a9c à 6,93:1 ; il ne colore JAMAIS un texte
     (2,61:1 sur #333) : le texte d'accent et les liens sont #8fb8ea (6,14:1 sur #333, 8,11:1 sur #1e1e1e) ;
   - anneau de focus OPAQUE #8fb8ea (≥ 3:1 sur toutes les surfaces sombres), au lieu du rgba .65 de la maquette
     (2,89:1 sur #333, sous le seuil de 1.4.11) — écart volontaire, voir docs/product-v2/DECISIONS.md (D7) ;
   - sélection #2e4260 : jamais signalée par le fond seul (barre d'accent #5a8fd6, 3,81:1). */
:root[data-mode="dark"][data-theme] {
    --background: #1e1e1e;
    --background-secondary: #252526;
    --text-primary: #ececec;
    /* Texte discret : #aab1bd (maquette #a3a9b5) pour garder ≥ 4,5:1 sur la sélection bleue #2e4260 (4,7:1). */
    --text-muted: #aab1bd;
    --accent: #3572c2;
    --accent-hover: #2d66b0;
    --accent-active: #275a9c;
    --accent-contrast: #ffffff;
    /* Teinte d'accent à 12 % (maquette : 16 %) : #8fb8ea y garde ≥ 4,5:1 sur les surfaces ET dans les dialogues
       (#3b3b3b) — badges d'accent et puces pressées (axe color-contrast). */
    --accent-soft: rgba(90, 143, 214, .12);
    --accent-soft-strong: rgba(90, 143, 214, .26);
    --surface-accent-soft: rgba(90, 143, 214, .12);
    --accent-ring: #8fb8ea;
    --border-accent: #5a8fd6;
    --text-accent: #8fb8ea;
    --text-link: #8fb8ea;
    --text-link-hover: #b5d0f1;
    --icon-accent: #8fb8ea;
    --surface-selected: #2e4260;
    --info-soft: rgba(90, 143, 214, .14);
    /* Dialogue de PNJ dans la console : ce que dit le PNJ (lilas) et ce qu'on lui répond (sarcelle). Hors de la
       palette sémantique — vert, ambre et bleu disent déjà réussite, alerte et script. Mesurés sur --surface-inset
       (#131519 à #262626) et #2f2f2f : lilas ≥ 6,51:1, sarcelle ≥ 7,39:1. */
    --log-npc-text: #c8a6f3;
    --log-reply-text: #5fd3c3;
}

/* Mode clair (préférence de profil) : même bleu, réglé pour les surfaces claires (contrastes AA sur #ffffff). */
:root[data-mode="light"][data-theme] {
    --accent: #3572c2;
    --accent-hover: #2d66b0;
    --accent-active: #275a9c;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(53, 114, 194, .12);
    --accent-soft-strong: rgba(53, 114, 194, .2);
    --surface-accent-soft: rgba(53, 114, 194, .10);
    --accent-ring: #3572c2;
    --border-accent: #3572c2;
    --text-accent: #275a9c;
    --text-link: #2d66b0;
    --text-link-hover: #275a9c;
    --icon-accent: #2d66b0;
    --surface-selected: #dbe7f6;
    /* Mesurés sur #f7f8f9, #ffffff et #eceef0 : lilas ≥ 6,1:1, sarcelle ≥ 5,48:1. */
    --log-npc-text: #6b3db5;
    --log-reply-text: #0b6b62;
}

/* Géométrie de la maquette V2 (tous thèmes) : contrôles 4 px, badges 3 px, cartes et surfaces 6 px, dialogues 8 px. */
:root[data-theme] {
    --radius-control: 4px;
    --radius-badge: 3px;
    --radius-card: 6px;
    --radius-surface: 6px;
    --radius-overlay: 8px;
}

/* Un titre focalisé PAR PROGRAMME (FocusOnNavigate, annonce aux lecteurs d'écran) n'est pas un contrôle : pas d'anneau. */
h1[tabindex="-1"]:focus { outline: none; }

/* P-06 (exception assumée à « tokens seulement », pour toute l'application) : `.ui-button[disabled]` de Product.Ui 1.0.0 pose un fond et une bordure
   à TOUTES les variantes. Un bouton fantôme ou tertiaire désactivé ressortait donc ENCADRÉ, plus visible que le même
   bouton actif (▶ et ⏸ de l'en-tête de compte). Désactivé = même forme qu'actif, seul le texte s'atténue. */
.ui-button--ghost:is([disabled], [aria-disabled="true"]),
.ui-button--tertiary:is([disabled], [aria-disabled="true"]) { background: transparent; border-color: transparent; }

/* P-07 (même exception, pour toute l'application) : Product.Ui 1.0.0 masque `.ui-card__actions` (opacité 0) jusqu'au
   survol ou au focus dans la carte. L'application y range des commandes principales : Lancer, Pause et Nouveau des
   Scripts, statut d'une sonde, badges d'un groupe. Elles n'apparaissaient qu'en passant la souris, et jamais sur un
   écran tactile, qui n'a pas de survol. */
.ui-card__actions { opacity: 1; }

/* ── Utilitaires de mise en page propres à UmbraBot ─────────────────────────────────────────────────────── */
.umbra-center { display: grid; place-items: center; min-height: 40vh; }

.umbra-menubar { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-width: 0; }
.umbra-logout { display: inline-flex; margin: 0; }

/* ── Barre de menu V2 : bascule des sessions, Boutique, solde, avatar, recherche visible ────────────────────────── */
.umbra-menubar__sessions { display: none; }
.umbra-menubar__shop .ui-icon { color: var(--text-accent); }
.umbra-menubar__search {
    display: inline-flex; align-items: center; gap: var(--space-2); height: 22px; min-width: 240px; margin: 0 var(--space-1);
    padding: 0 var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-control);
    background: var(--surface-inset); color: var(--text-muted); font: inherit; font-size: var(--font-size-sm); cursor: pointer;
}
.umbra-menubar__search:hover { border-color: var(--border); color: var(--text-secondary); }
.umbra-menubar__search:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.umbra-menubar__search .ui-kbd { margin-left: auto; }
.umbra-menubar__balance {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 3px 0 10px; flex: none;
    border: 1px solid rgba(90, 143, 214, .45); border-radius: 999px; background: var(--accent-soft); color: var(--text-primary);
    font-size: var(--font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap;
}
.umbra-menubar__balance:hover { border-color: var(--border-accent); text-decoration: none; }
.umbra-menubar__balance:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.umbra-menubar__balance > .ui-icon { color: var(--text-accent); }
.umbra-menubar__plus { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); }
.umbra-menubar__plus .ui-icon, .umbra-menubar__plus svg { width: 12px; height: 12px; }
.umbra-menubar__user { display: inline-grid; place-items: center; flex: none; margin: 0 2px 0 4px; border-radius: var(--radius-control); text-decoration: none; }
.umbra-menubar__user:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* Avatars « accent » de la coque (profil ; meneur de groupe dans les sessions) : le bleu du thème, pas l'acier du toolkit
   (.ui-avatar--accent peint --primary-800 / --primary-100). Initiales blanches sur #3572c2 : 4,84:1 (AA), en mode sombre
   comme en mode clair. */
.umbra-menubar__user .ui-avatar--accent { background: var(--accent); color: var(--accent-contrast); }
.umbra-sessions__link .ui-avatar--accent { background: var(--accent); color: var(--accent-contrast); }
@media (max-width: 1200px) {
    .umbra-menubar__search { min-width: 0; }
    .umbra-menubar__search-text { display: none; }
}
@media (max-width: 900px) {
    .umbra-menubar__sessions { display: inline-flex; flex: none; }
    .umbra-menubar__label { display: none; }
}
@media (max-width: 640px) {
    .umbra-menubar { gap: var(--space-1); }
    .umbra-menubar__search .ui-kbd, .umbra-menubar__plus, .umbra-menubar__balance > .ui-icon { display: none; }
    .umbra-menubar__balance { padding: 0 8px; }
}

/* ── Documentation V2 : la page remplit la zone de contenu, chaque colonne défile seule (Documentation.razor.css) ── */
.umbra-docs-page { overflow: hidden; }
.umbra-docs-page > .ui-page-transition { height: 100%; }

/* ── Sessions : ligne active marquée par une barre d'accent (jamais par le fond seul) ────────────────────────────── */
.umbra-sessions__link[aria-current="page"] { box-shadow: inset 2px 0 0 var(--border-accent); }

/* ── Arbre des sessions chargées (maquette : barre latérale) ─────────────────────────────────────────────── */
.umbra-sessions { display: flex; flex-direction: column; min-height: 0; }
.umbra-sessions__title { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-3) var(--space-2); }
.umbra-sessions__group { border-bottom: 1px solid var(--separator); }
.umbra-sessions__group-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); min-height: 34px; }
.umbra-sessions__group-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text-primary); }
.umbra-sessions__members { margin-left: 22px; padding-left: var(--space-2); border-left: 1px solid var(--separator); }
.umbra-sessions__row { display: flex; align-items: center; gap: var(--space-1); padding-right: var(--space-1); }
.umbra-sessions__row--solo { border-bottom: 1px solid var(--separator); }
.umbra-sessions__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: 40px; border-radius: 0; }
.umbra-sessions__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.umbra-sessions__alias { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 600; }

/* ── Pages d'authentification (rendu statique) ──────────────────────────────────────────────────────────── */
.umbra-auth { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: var(--background); }
.umbra-auth__card { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-7); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-overlay); }
.umbra-auth__brand { display: flex; align-items: center; gap: var(--space-3); }

/* ── Gestionnaire V2 : comptes chargés masqués de la vue « À charger » ───────────────────────────────────────────── */
.umbra-manager__hidden-note { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); color: var(--text-muted); border-radius: var(--radius-control); }
.umbra-manager__hidden-note:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* Emplacement d'action réservé (largeur d'un bouton-icône XS) : les boutons d'une ligne ne glissent pas quand elle change d'état. */
.umbra-manager__action-slot { flex: none; width: var(--control-height-xs); }

/* ── Gestionnaire V2 : membres d'un groupe (primaires, secondaires, chargés) et groupe bloqué ────────────────────── */
.umbra-group-members { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.umbra-group-member {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 22px; padding: 0 8px;
    border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-inset); font-size: var(--font-size-sm); color: var(--text-secondary);
}
.umbra-group-member--leader { border-color: var(--border-accent); color: var(--text-primary); }
.umbra-group-member--loaded { border-style: dashed; }
.umbra-group-member__tag { font-size: 10px; letter-spacing: .02em; color: var(--text-muted); }
.umbra-group-member__tag--loaded { color: var(--warning-text); }
.umbra-group-card--blocked { border-color: rgba(224, 163, 64, .45); }
/* ── Boutique V2 (maquette) : barre, couverture, catalogue, fiche, bibliothèque ─────────────────────────────────── */
.umbra-shop-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--separator); }
.umbra-shop-nav { display: flex; flex-wrap: wrap; gap: 2px; }
.umbra-shop-nav__item {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3); margin-bottom: -1px;
    border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none;
}
.umbra-shop-nav__item:hover { color: var(--text-primary); text-decoration: none; }
.umbra-shop-nav__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-control); }
.umbra-shop-nav__item[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--border-accent); }
.umbra-shop-nav__count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font-size: 11px; text-align: center; }
.umbra-shop-bar__wallet { display: inline-flex; align-items: center; gap: var(--space-2); padding-bottom: 6px; }
.umbra-shop-bar__label { font-size: var(--font-size-sm); color: var(--text-muted); }
.umbra-shop-bar__balance { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* Couverture : texte blanc sur une teinte sombre (L 26 % / 16 %) — contraste ≥ 7:1 quelle que soit la teinte. */
.umbra-shop-cover {
    position: relative; display: grid; place-items: center; aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: linear-gradient(135deg, hsl(var(--h) 42% 26%), hsl(calc(var(--h) + 40) 38% 16%));
}
.umbra-shop-cover--big { aspect-ratio: 16 / 6; border-radius: var(--radius-card); }
.umbra-shop-cover__cat { position: absolute; top: 8px; left: 10px; padding: 1px 6px; border-radius: var(--radius-badge); background: rgba(0, 0, 0, .45); color: #ffffff; font-size: 11px; font-weight: 600; }
.umbra-shop-cover__mono { font-size: 34px; font-weight: 800; letter-spacing: .04em; color: rgba(255, 255, 255, .92); }
.umbra-shop-cover--big .umbra-shop-cover__mono { font-size: 56px; }

.umbra-shop-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface); }
.umbra-shop-hero__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; justify-content: center; }
.umbra-shop-hero__title { margin: 0; font-size: 20px; color: var(--text-primary); }
.umbra-shop-hero__summary { margin: 0; color: var(--text-secondary); }
.umbra-shop-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.umbra-shop-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.umbra-shop-toolbar__search { flex: 1 1 260px; min-width: 0; }
.umbra-shop-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.umbra-shop-cats__count { margin-left: 2px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.umbra-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.umbra-shop-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface); }
.umbra-shop-card:hover { border-color: var(--border); }
.umbra-shop-card:focus-within { border-color: var(--border-accent); }
.umbra-shop-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: var(--space-3); }
.umbra-shop-card__meta { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.umbra-shop-card__name { margin: 0; font-size: 15px; }
.umbra-shop-card__link { color: var(--text-primary); text-decoration: none; }
.umbra-shop-card__link:hover { color: var(--text-link-hover); text-decoration: underline; }
.umbra-shop-card__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.umbra-shop-card__summary { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.umbra-shop-card__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }

.umbra-shop-price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.umbra-shop-price--free { color: var(--success-text); }
.umbra-shop-price--lg { font-size: 20px; }

.umbra-shop-item { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
.umbra-shop-item__main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.umbra-shop-item__description { margin: 0; white-space: pre-wrap; color: var(--text-primary); line-height: 1.6; }
.umbra-shop-buy { position: sticky; top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface); }
.umbra-shop-buy__price { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.umbra-shop-calc { display: grid; gap: 4px; margin: 0; padding: var(--space-2); border-radius: var(--radius-control); background: var(--surface-inset); font-size: var(--font-size-sm); }
.umbra-shop-calc > div { display: flex; justify-content: space-between; gap: var(--space-2); }
.umbra-shop-calc dt { color: var(--text-secondary); }
.umbra-shop-calc dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.umbra-shop-calc__total { padding-top: 4px; border-top: 1px solid var(--separator); font-weight: 700; }
.umbra-shop-calc .umbra-shop-calc__short { color: var(--danger-text); }
.umbra-shop-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.umbra-shop-facts > div { padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface); }
.umbra-shop-facts dt { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.umbra-shop-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--text-primary); }
.umbra-shop-tags, .umbra-shop-features, .umbra-shop-caps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.umbra-shop-features, .umbra-shop-caps { flex-direction: column; gap: var(--space-2); }
.umbra-shop-features li { display: flex; align-items: center; gap: 6px; }
.umbra-shop-caps__name { font-family: var(--font-family-mono); font-weight: 600; }

.umbra-shop-library { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface); }
.umbra-shop-library__row { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.umbra-shop-library__row + .umbra-shop-library__row { border-top: 1px solid var(--separator); }
.umbra-shop-library__who { display: flex; flex-direction: column; min-width: 0; }
.umbra-shop-library__name { font-weight: 600; color: var(--text-primary); text-decoration: none; }
.umbra-shop-library__name:hover { text-decoration: underline; }
.umbra-shop-library__name:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.umbra-shop-library__state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.umbra-shop-library__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.umbra-shop-thumb { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-control); background: linear-gradient(135deg, hsl(var(--h) 42% 26%), hsl(calc(var(--h) + 40) 38% 16%)); color: #ffffff; font-size: 12px; font-weight: 800; }

@media (max-width: 1200px) {
    .umbra-shop-item { grid-template-columns: minmax(0, 1fr) 260px; }
    .umbra-shop-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .umbra-shop-hero, .umbra-shop-item { grid-template-columns: minmax(0, 1fr); }
    .umbra-shop-buy { position: static; }
    .umbra-shop-library__row { grid-template-columns: auto minmax(0, 1fr); }
    .umbra-shop-library__state, .umbra-shop-library__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 480px) {
    .umbra-shop-grid { grid-template-columns: minmax(0, 1fr); }
    .umbra-shop-bar__wallet { width: 100%; justify-content: space-between; }
}

/* ── Espace vendeur et revue de la boutique (Product V2) ───────────────────────────────────────────────────────── */
.umbra-seller-earnings { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.umbra-seller-earnings__amount { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.umbra-seller-form { display: grid; gap: var(--space-3); max-width: 760px; padding-top: var(--space-3); }
.umbra-seller-versions { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.umbra-seller-version { display: grid; gap: 4px; padding: var(--space-2) var(--space-3); }
.umbra-seller-version + .umbra-seller-version { border-top: 1px solid var(--separator); }
.umbra-seller-version__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.umbra-review { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr); gap: var(--space-3); align-items: start; }
.umbra-review__queue .umbra-shop-library__row { grid-template-columns: minmax(0, 1fr); }
.umbra-review__item--selected { box-shadow: inset 2px 0 0 var(--border-accent); background: var(--surface-selected); }
.umbra-review__open { padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.umbra-review__open:hover { text-decoration: underline; }
.umbra-review__open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 900px) {
    .umbra-review { grid-template-columns: minmax(0, 1fr); }
}

/* ── Profil V2 (maquette) : en-tête, navigation latérale, vues ───────────────────────────────────────────────────── */
.umbra-profile-hero {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface);
}
.umbra-profile-hero__who { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.umbra-profile-hero__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 18px; font-weight: 700; color: var(--text-primary); }
.umbra-profile-stat {
    display: flex; flex-direction: column; gap: 2px; min-width: 110px; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface-inset); text-decoration: none;
}
.umbra-profile-stat:hover { border-color: var(--border-accent); text-decoration: none; }
.umbra-profile-stat:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.umbra-profile-stat__label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.umbra-profile-stat__value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.umbra-profile-stat__value--warn { color: var(--warning-text); }

.umbra-profile { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.umbra-profile__nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-3); }
.umbra-profile__nav-item {
    display: flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-control);
    color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none;
}
.umbra-profile__nav-item:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
.umbra-profile__nav-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.umbra-profile__nav-item[aria-current="page"] { background: var(--surface-selected); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--border-accent); }
.umbra-profile__content { min-width: 0; }

.umbra-profile-lines { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: var(--font-size-sm); }
.umbra-profile-lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.umbra-profile-lines__when { flex: none; min-width: 90px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.umbra-profile-lines__what { flex: 1 1 160px; min-width: 0; color: var(--text-primary); }
.umbra-profile-lines__amount { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); }
.umbra-profile-lines__amount--in { color: var(--success-text); }
.umbra-profile-checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.umbra-profile-checks li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary); }
.umbra-profile-balance { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.umbra-profile-table { overflow-x: auto; }
.umbra-profile-table:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.umbra-profile-table .ui-table { width: 100%; }
.umbra-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.umbra-profile-order { grid-template-columns: minmax(0, 1fr) auto auto; }
.umbra-profile-order__what { font-weight: 600; color: var(--text-primary); }
.umbra-profile-strength { display: grid; gap: 4px; }

@media (max-width: 900px) {
    .umbra-profile { grid-template-columns: minmax(0, 1fr); }
    .umbra-profile__nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .umbra-profile__nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--border-accent); }
}
@media (max-width: 480px) {
    .umbra-profile-stat { flex: 1 1 90px; min-width: 0; }
}

/* Enregistrements de combats (ADR-0011) : liste et relecteur. */
.umbra-recordings__steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-1); color: var(--text-secondary); }
.umbra-replay { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--space-3); align-items: start; outline: none; }
.umbra-replay:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-card); }
.umbra-replay__board { display: grid; gap: var(--space-2); min-width: 0; background: var(--surface-inset); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-2); }
.umbra-replay__side { display: grid; gap: var(--space-3); min-width: 0; }
.umbra-replay__scrub { width: 100%; accent-color: var(--accent); }
.umbra-replay__lines { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--text-primary); }
.umbra-replay__fighter[data-side="self"] { color: var(--text-accent); font-weight: 600; }
.umbra-replay__fighter[data-side="enemy"] { color: var(--danger); }
.umbra-replay__fighter[data-acting] { text-decoration: underline; text-underline-offset: 3px; }
.umbra-replay__fighter[data-dead] { opacity: .5; text-decoration: line-through; }
.umbra-replay__turns, .umbra-replay__spells { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }

@media (max-width: 900px) {
    .umbra-replay { grid-template-columns: minmax(0, 1fr); }
}