/* ============================================================================
   SUITE OPTIMA — CHARTE UI/UX DE RÉFÉRENCE
   Base Linear (densité, sobriété) + signature (gradients, glow, neu)
   ----------------------------------------------------------------------------
   SOCLE LINEAR (sourcé live sur linear.app) : grille de densité, UI 13px,
   surfaces sombres réelles, bordures translucides, bouton primaire haute densité.

   SIGNATURE (demande Jocelyn) :
   • Palette : #10b2c9 cyan = ACCENT de marque · #ebb92a doré = warning/accent 2
     · #c73137 = danger · #767b83 = neutre. Vert "success" non fourni → harmonisé
     (#2faf6b / #3fce8c), à valider.
   • Box : fond ET bordure en dégradé 135° (double background padding/border-box),
     box-shadow douces et légères.
   • Titres : Inter 600/800, interlettrage serré (tracking négatif).
   • Neumorphisme dosé (ombres douces bi-directionnelles) sur secondaire/tabs/champs.
   • Bouton accent : gradient cyan→bleu (#10b2c9→#0071da) + glow.

   Réutilise les noms de tokens du projet → drop-in. Thème : LIGHT par défaut →
   DARK si système sombre ET aucun choix manuel → [data-theme] manuel gagne.
   Voir optima-theme.js. Format : 1 sélecteur / ligne, sections numérotées.
   ============================================================================ */

/* === 1. FONTS ============================================================= */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/InterVariable.woff2') format('woff2-variations'), url('assets/fonts/InterVariable.woff2') format('woff2'); }

/* === 2. VARIABLES CSS — TOKENS (LIGHT par défaut) ========================= */
:root {
  /* Surfaces */
  --bg-app: #f7f8fa; --bg-panel: #ffffff; --bg-soft: rgba(9,11,16,0.035); --bg-hover: rgba(9,11,16,0.055); --bg-active: rgba(9,11,16,0.085); --bg-elevated: #ffffff; --bg-inset: rgba(9,11,16,0.025);
  /* Texte */
  --text-main: #0d0e10; --text-body: #3c4149; --text-muted: #6b6f76; --text-faint: #8a8f98;
  /* Bordures translucides hairline */
  --border: rgba(9,11,16,0.09); --border-strong: rgba(9,11,16,0.16); --border-ghost: rgba(9,11,16,0.05);
  /* Accent de marque — CYAN (surchargé par --app inline si per-app) */
  --app: #10b2c9; --app-hover: #14c0d8; --app-active: #0e9cb0; --app-soft: rgba(16,178,201,0.12); --app-ink: #0c7e90; --app-contrast: #ffffff;
  /* Solide / bouton primaire haute-densité (clair = encre quasi-noire) */
  --solid-bg: #1f2023; --solid-bg-hover: #34363b; --solid-bg-active: #0d0e10; --solid-text: #ffffff;
  /* Palette statuts (+ neutre) */
  --status-success: #2faf6b; --status-warning: #946600; --status-warning-pure: #ebb92a; --status-danger: #c73137; --status-info: #10b2c9; --neutral: #767b83;
  /* Set applicatif Optima® — couleurs de marque (constantes, hors thème) */
  --app-conception: #e07430; --app-update: #3f98b4; --app-jds: #0d3a5f; --app-checkin: #2a944b; --app-risk: #cf2f3d; --app-plus: #e1c336;
  /* Dégradés signature (135°) */
  --grad-brand: linear-gradient(135deg, #10b2c9 0%, #0071da 100%); --grad-brand-hover: linear-gradient(135deg, #1ec1d8 0%, #1a82e8 100%);
  --grad-panel: linear-gradient(135deg, #ffffff 0%, #f4f6f9 100%); --grad-border: linear-gradient(135deg, rgba(9,11,16,0.13) 0%, rgba(9,11,16,0.035) 100%); --grad-border-accent: linear-gradient(135deg, rgba(16,178,201,0.5) 0%, rgba(0,113,218,0.4) 100%);
  /* Rayons */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px;
  /* Ombres — douces et légères (signature) + couches flottantes + neu */
  --shadow-xs: 0 1px 2px rgba(9,11,16,0.05); --shadow-sm: 0 1px 2px rgba(9,11,16,0.07); --shadow-soft: 0 1px 2px rgba(9,11,16,0.04), 0 10px 28px -10px rgba(9,11,16,0.12); --shadow-pop: 0 0 0 1px rgba(9,11,16,0.04), 0 12px 34px -8px rgba(9,11,16,0.18), 0 2px 8px -2px rgba(9,11,16,0.08); --shadow-glow: 0 6px 20px -6px rgba(16,178,201,0.45), 0 2px 6px -2px rgba(0,113,218,0.35);
  --neu-bg: #f4f5f7; --neu-raised: 5px 5px 12px rgba(9,11,16,0.07), -4px -4px 10px rgba(255,255,255,0.95); --neu-inset: inset 3px 3px 7px rgba(9,11,16,0.08), inset -3px -3px 7px rgba(255,255,255,0.9);
  /* Focus — anneau cyan discret */
  --ring: 0 0 0 2px var(--bg-panel), 0 0 0 4px color-mix(in oklab, var(--app) 55%, transparent);
  /* Typo & rythme — titres lourds, interlettrage serré */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
  --fw-normal: 400; --fw-medium: 510; --fw-semibold: 600; --fw-heavy: 800;
  --tracking-heading: -0.03em; --tracking-tight: -0.022em; --tracking-snug: -0.012em;
  /* Tailles fluides : base × --k (--k = échelle écran × densité). Voir 5.0. */
  --fs-xs: calc(11px * var(--k)); --fs-sm: calc(12px * var(--k)); --fs-base: calc(13px * var(--k)); --fs-md: calc(14px * var(--k)); --fs-lg: calc(15px * var(--k)); --fs-xl: calc(18px * var(--k)); --fs-2xl: calc(22px * var(--k)); --fs-3xl: calc(28px * var(--k));
  --lh-tight: 1.1; --lh-snug: 1.35; --lh-base: 1.5;
  --space-1: calc(4px * var(--k)); --space-2: calc(8px * var(--k)); --space-3: calc(12px * var(--k)); --space-4: calc(16px * var(--k)); --space-5: calc(24px * var(--k)); --space-6: calc(32px * var(--k)); --space-7: calc(48px * var(--k));
  --ctrl-h: calc(32px * var(--k)); --ctrl-h-sm: calc(28px * var(--k)); --ctrl-h-lg: calc(44px * var(--k));
  /* Largeurs adaptatives (× --ui-scale uniquement — indépendantes de la densité) */
  --w-prose: calc(680px * var(--ui-scale)); --w-content: calc(1080px * var(--ui-scale)); --w-wide: calc(1320px * var(--ui-scale)); --w-sidebar: calc(248px * var(--ui-scale)); --w-menu: calc(200px * var(--ui-scale)); --w-toast: calc(360px * var(--ui-scale)); --w-modal-sm: calc(380px * var(--ui-scale)); --w-modal: calc(460px * var(--ui-scale)); --w-modal-lg: calc(640px * var(--ui-scale));
  --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.1s; --dur: 0.16s; --dur-slow: 0.26s;
  /* Échelle maître : --ui-scale (écran, cf. 5.0) × --density (manuel) */
  --ui-scale: 0.96; --density: 1; --k: calc(var(--ui-scale) * var(--density));
  color-scheme: light;
}
body.density-compact { --density: 0.92; } body.density-comfy { --density: 1; } body.density-airy { --density: 1.08; }

/* === 3. RESET + BASE ====================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
*::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-normal); letter-spacing: var(--tracking-snug); font-feature-settings: 'cv01', 'cv11', 'ss03'; line-height: var(--lh-base); background: var(--bg-app); color: var(--text-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
hr { border: none; border-top: 1px solid var(--border); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
::selection { background: color-mix(in oklab, var(--app) 30%, transparent); }
/* Titres : Inter lourd, interlettrage serré (signature) */
h1, h2, h3, h4 { color: var(--text-main); line-height: var(--lh-tight); }
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-heading); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); }
a.link { color: var(--app-ink); } a.link:hover { text-decoration: underline; text-underline-offset: 2px; }
small { font-size: var(--fs-sm); color: var(--text-muted); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* === 4. DEV TOOLS ========================================================= */
[data-debug] * { outline: 1px solid color-mix(in oklab, var(--app) 45%, transparent); }
[data-debug] *:hover { outline: 1px solid var(--status-danger); }
.ds-swatch { width: 100%; height: 52px; border-radius: var(--radius-md); border: 1px solid var(--border); }

/* === 5. LAYOUT & THEMES =================================================== */

/* --- 5.0 ÉCHELLE RESPONSIVE — --ui-scale (px logiques = points CSS) -------
   Pilote fs / space / ctrl-h via --k. Cibles réelles :
     • 14" MacBook Air M5  ~1512 pt → 0.96 (défaut :root)
     • 16" MacBook Pro M5  ~1728 pt → 1.00
     • écran 27"           ~2056 pt → 1.08
     • 5K / 32"            ~2560 pt → 1.16
     • 32" en 3000×1692    ~3000 pt → 1.26
   Se combine à --density (compact/comfy/airy) par multiplication, sans conflit.
   IMPORTANT : dans une maquette qui applique déjà transform:scale (zoom 1920
   façon InterfaceAppliHubs), pinner :root{ --ui-scale:1 } pour ne pas cumuler
   deux redimensionnements. */
@media (min-width: 1600px) { :root { --ui-scale: 1; } }
@media (min-width: 2000px) { :root { --ui-scale: 1.08; } }
@media (min-width: 2560px) { :root { --ui-scale: 1.16; } }
@media (min-width: 2960px) { :root { --ui-scale: 1.26; } }

/* --- 5.1 THÈME SOMBRE — base live linear.app + signature (auto) ----------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-app: #08090a; --bg-panel: #101113; --bg-soft: rgba(255,255,255,0.026); --bg-hover: rgba(255,255,255,0.05); --bg-active: rgba(255,255,255,0.08); --bg-elevated: #1c1d20; --bg-inset: rgba(255,255,255,0.018);
    --text-main: #f7f8f8; --text-body: #e1e3e6; --text-muted: #8a8f98; --text-faint: #767b83;
    --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.13); --border-ghost: rgba(255,255,255,0.045);
    --app: #10b2c9; --app-hover: #2ac6dc; --app-active: #0e9cb0; --app-soft: rgba(16,178,201,0.18); --app-ink: #4fd3e6; --app-contrast: #04181c;
    --solid-bg: #e6e6e7; --solid-bg-hover: #f1f1f2; --solid-bg-active: #d4d4d6; --solid-text: #08090a;
    --status-success: #3fce8c; --status-warning: #ebb92a; --status-warning-pure: #ebb92a; --status-danger: #f0796b; --status-info: #10b2c9; --neutral: #767b83;
    --grad-brand: linear-gradient(135deg, #10b2c9 0%, #0071da 100%); --grad-brand-hover: linear-gradient(135deg, #1ec1d8 0%, #1a82e8 100%);
    --grad-panel: linear-gradient(135deg, #17181c 0%, #0d0e11 100%); --grad-border: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 100%); --grad-border-accent: linear-gradient(135deg, rgba(16,178,201,0.6) 0%, rgba(0,113,218,0.45) 100%);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.5); --shadow-sm: 0 1px 2px rgba(0,0,0,0.6); --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 14px 36px -12px rgba(0,0,0,0.6); --shadow-pop: 0 0 0 1px rgba(0,0,0,0.6), 0 16px 40px -10px rgba(0,0,0,0.72), 0 2px 8px -2px rgba(0,0,0,0.5); --shadow-glow: 0 8px 26px -6px rgba(16,178,201,0.5), 0 3px 10px -3px rgba(0,113,218,0.42);
    --neu-bg: #0d0e11; --neu-raised: 5px 5px 13px #000000, -5px -5px 13px rgba(255,255,255,0.11); --neu-inset: inset 4px 4px 10px rgba(0,0,0,0.6), inset -4px -4px 10px rgba(255,255,255,0.12);
    --ring: 0 0 0 2px var(--bg-app), 0 0 0 4px color-mix(in oklab, var(--app) 65%, transparent);
    color-scheme: dark;
  }
}

/* --- 5.2 THÈME SOMBRE — override manuel (gagne toujours) ------------------ */
[data-theme="dark"] {
  --bg-app: #08090a; --bg-panel: #101113; --bg-soft: rgba(255,255,255,0.026); --bg-hover: rgba(255,255,255,0.05); --bg-active: rgba(255,255,255,0.08); --bg-elevated: #1c1d20; --bg-inset: rgba(255,255,255,0.018);
  --text-main: #f7f8f8; --text-body: #e1e3e6; --text-muted: #8a8f98; --text-faint: #767b83;
  --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.13); --border-ghost: rgba(255,255,255,0.045);
  --app: #10b2c9; --app-hover: #2ac6dc; --app-active: #0e9cb0; --app-soft: rgba(16,178,201,0.18); --app-ink: #4fd3e6; --app-contrast: #04181c;
  --solid-bg: #e6e6e7; --solid-bg-hover: #f1f1f2; --solid-bg-active: #d4d4d6; --solid-text: #08090a;
  --status-success: #3fce8c; --status-warning: #ebb92a; --status-warning-pure: #ebb92a; --status-danger: #f0796b; --status-info: #10b2c9; --neutral: #767b83;
  --grad-brand: linear-gradient(135deg, #10b2c9 0%, #0071da 100%); --grad-brand-hover: linear-gradient(135deg, #1ec1d8 0%, #1a82e8 100%);
  --grad-panel: linear-gradient(135deg, #17181c 0%, #0d0e11 100%); --grad-border: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 100%); --grad-border-accent: linear-gradient(135deg, rgba(16,178,201,0.6) 0%, rgba(0,113,218,0.45) 100%);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.5); --shadow-sm: 0 1px 2px rgba(0,0,0,0.6); --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 14px 36px -12px rgba(0,0,0,0.6); --shadow-pop: 0 0 0 1px rgba(0,0,0,0.6), 0 16px 40px -10px rgba(0,0,0,0.72), 0 2px 8px -2px rgba(0,0,0,0.5); --shadow-glow: 0 8px 26px -6px rgba(16,178,201,0.5), 0 3px 10px -3px rgba(0,113,218,0.42);
  --neu-bg: #0d0e11; --neu-raised: 5px 5px 13px #000000, -5px -5px 13px rgba(255,255,255,0.11); --neu-inset: inset 4px 4px 10px rgba(0,0,0,0.6), inset -4px -4px 10px rgba(255,255,255,0.12);
  --ring: 0 0 0 2px var(--bg-app), 0 0 0 4px color-mix(in oklab, var(--app) 65%, transparent);
  color-scheme: dark;
}

/* --- 5.3 Override manuel CLAIR (explicite) ------------------------------- */
[data-theme="light"] { color-scheme: light; }

/* --- 5.4 Transition douce à la bascule de thème -------------------------- */
.theme-anim, .theme-anim * { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }

/* --- 5.5 Primitives de mise en page -------------------------------------- */
.ds-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.ds-row { display: flex; align-items: center; gap: var(--space-2); }
.ds-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ds-grid { display: grid; gap: var(--space-3); }
.ds-wrap { flex-wrap: wrap; }
.ds-spacer { flex: 1 1 auto; }
.ds-container { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: var(--space-5); }
.ds-section { width: 100%; max-width: var(--w-content); margin-inline: auto; }
.ds-section.is-prose { max-width: var(--w-prose); }
.ds-section.is-wide { max-width: var(--w-wide); }
.ds-muted { color: var(--text-muted); }
.ds-faint { color: var(--text-faint); }
.ds-mono { font-family: var(--font-mono); }
.ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-section-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: var(--tracking-snug); }
.ds-gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- 5.6 Utilitaires signature (gradient box + neumorphisme) ------------- */
/* .box-grad : fond ET bordure en dégradé 135° + ombre douce. Le cœur du style. */
.box-grad { border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--grad-panel) padding-box, var(--grad-border) border-box; box-shadow: var(--shadow-soft); }
.box-grad-accent { border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--grad-panel) padding-box, var(--grad-border-accent) border-box; box-shadow: var(--shadow-soft); }
.neu { border: none; border-radius: var(--radius-lg); background: var(--neu-bg); box-shadow: var(--neu-raised); }
.neu-inset { border: none; border-radius: var(--radius-lg); background: var(--neu-bg); box-shadow: var(--neu-inset); }

/* === 6. COMPOSANTS UI ===================================================== */

/* --- 6.1 Boutons --------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--ctrl-h); padding: 0 14px; font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--tracking-snug); border-radius: var(--radius-pill); border: 1px solid transparent; color: var(--text-body); background: transparent; cursor: pointer; white-space: nowrap; user-select: none; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--solid-bg); color: var(--solid-text); }
.btn-primary:hover { background: var(--solid-bg-hover); }
.btn-primary:active { background: var(--solid-bg-active); }
.btn-accent { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-glow); }
.btn-accent:hover { background: var(--grad-brand-hover); filter: brightness(1.04); }
.btn-accent:active { filter: brightness(0.96); }
/* Tout contenu posé SUR le gradient de marque = BLANC (texte + icônes currentColor). Ajouter .on-grad à tout élément custom déposé sur --grad-brand. */
.btn-accent, .btn-accent svg, .badge-solid, .badge-solid svg, .avatar, .avatar svg, .on-grad, .on-grad svg { color: #fff; }
.btn-secondary { background: var(--neu-bg); color: var(--text-body); box-shadow: var(--neu-raised); }
.btn-secondary:hover { color: var(--text-main); }
.btn-secondary:active { box-shadow: var(--neu-inset); }
.btn-ghost { background: transparent; color: var(--text-body); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-ghost:active { background: var(--bg-active); }
.btn-danger { background: transparent; color: var(--status-danger); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--status-danger) 35%, transparent); }
.btn-danger:hover { background: color-mix(in oklab, var(--status-danger) 12%, transparent); }
.btn-sm { height: var(--ctrl-h-sm); padding: 0 10px; }
.btn-lg { height: var(--ctrl-h-lg); padding: 0 20px; font-size: var(--fs-lg); }
.btn-icon { width: var(--ctrl-h); height: var(--ctrl-h); padding: 0; border-radius: var(--radius-md); }
.btn-icon.btn-sm { width: var(--ctrl-h-sm); height: var(--ctrl-h-sm); }
.btn-block { width: 100%; }

/* --- 6.2 Champs de formulaire (creux neu doux + focus cyan) -------------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-body); }
.hint { font-size: var(--fs-xs); color: var(--text-muted); }
.input, .select, .textarea { width: 100%; min-height: var(--ctrl-h); padding: 6px 10px; font-size: var(--fs-base); color: var(--text-main); background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--neu-inset); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in oklab, var(--app) 35%, var(--border-strong)); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--app); box-shadow: var(--neu-inset), 0 0 0 3px color-mix(in oklab, var(--app) 22%, transparent); }
.input:disabled, .select:disabled, .textarea:disabled { color: var(--text-faint); cursor: not-allowed; }
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--status-danger); box-shadow: var(--neu-inset), 0 0 0 3px color-mix(in oklab, var(--status-danger) 22%, transparent); }
.textarea { min-height: 80px; resize: vertical; line-height: var(--lh-base); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) center, calc(100% - 11px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; color: var(--text-main); }
.input-group { display: flex; align-items: center; gap: var(--space-2); padding: 0 10px; background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--neu-inset); }
.input-group:focus-within { border-color: var(--app); box-shadow: var(--neu-inset), 0 0 0 3px color-mix(in oklab, var(--app) 22%, transparent); }
.input-group .input { border: none; box-shadow: none; padding-left: 0; padding-right: 0; background: transparent; }
.input-group > svg { width: 15px; height: 15px; color: var(--text-faint); }

/* --- 6.3 Checkbox / Radio / Switch --------------------------------------- */
.check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--fs-base); }
.check input { appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--bg-panel); display: grid; place-content: center; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.check input[type="radio"] { border-radius: var(--radius-pill); }
.check input:hover { border-color: var(--app); }
.check input:checked { background: var(--grad-brand); border-color: transparent; }
.check input[type="checkbox"]:checked::after { content: ''; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg) translateY(-1px); }
.check input[type="radio"]:checked::after { content: ''; width: 6px; height: 6px; border-radius: var(--radius-pill); background: #fff; }
.check input:focus-visible { box-shadow: var(--ring); }
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--bg-active); box-shadow: var(--neu-inset); transition: background var(--dur) var(--ease); }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out); }
.switch input:checked + .track { background: var(--grad-brand); box-shadow: none; }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

/* --- 6.4 Badges / Statuts (pastille + texte ; neutre = #767b83) ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1; border-radius: var(--radius-pill); background: transparent; color: var(--text-body); border: 1px solid var(--border); }
.badge-dot::before { content: ''; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--neutral); flex-shrink: 0; }
.badge-success::before { background: var(--status-success); }
.badge-warning::before { background: var(--status-warning-pure); }
.badge-danger::before { background: var(--status-danger); }
.badge-info::before { background: var(--status-info); }
.badge-app { color: var(--app-ink); border-color: color-mix(in oklab, var(--app) 30%, transparent); } .badge-app::before { background: var(--app); }
.badge-solid { border-color: transparent; background: var(--grad-brand); color: #fff; }

/* --- 6.5 Card / Panel (fond + bordure gradient 135° + ombre douce) ------- */
.card { border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--grad-panel) padding-box, var(--grad-border) border-box; box-shadow: var(--shadow-soft); overflow: hidden; }
.card-pad { padding: var(--space-4); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-ghost); }
.card-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-main); letter-spacing: var(--tracking-snug); }
.card-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-ghost); }
.panel { border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--grad-panel) padding-box, var(--grad-border) border-box; box-shadow: var(--shadow-soft); }
.divider { height: 1px; background: var(--border); border: none; margin: var(--space-3) 0; }

/* --- 6.6 Table ----------------------------------------------------------- */
.table-wrap { border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--grad-panel) padding-box, var(--grad-border) border-box; box-shadow: var(--shadow-soft); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table thead th { text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); padding: 8px 14px; background: var(--bg-inset); border-bottom: 1px solid var(--border); letter-spacing: var(--tracking-snug); }
.table tbody td { padding: 9px 14px; color: var(--text-body); border-bottom: 1px solid var(--border-ghost); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr.is-selected { background: var(--app-soft); }

/* --- 6.7 Tabs (conteneur neu creux) -------------------------------------- */
.tabs { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--neu-bg); border-radius: var(--radius-md); box-shadow: var(--neu-inset); }
.tab { height: 26px; padding: 0 11px; font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-muted); border-radius: var(--radius-sm); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.tab:hover { color: var(--text-body); }
.tab.is-active { background: var(--bg-panel); color: var(--text-main); box-shadow: var(--shadow-xs); }
.tabs-underline { display: inline-flex; gap: var(--space-4); padding: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--border); }
.tabs-underline .tab { height: 34px; border-radius: 0; border-bottom: 2px solid transparent; padding: 0 2px; }
.tabs-underline .tab.is-active { background: none; box-shadow: none; border-image: var(--grad-brand) 1; border-bottom: 2px solid; border-image-slice: 1; color: var(--text-main); }

/* --- 6.8 Navigation (sidebar) -------------------------------------------- */
.nav-item { display: flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 9px; font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-muted); border-radius: var(--radius-sm); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav-item svg { width: 16px; height: 16px; }
.nav-item:hover { background: var(--bg-hover); color: var(--text-body); }
.nav-item.is-active { background: var(--app-soft); color: var(--app-ink); }

/* --- 6.9 Menu / Dropdown (couche flottante) ------------------------------ */
.menu { min-width: var(--w-menu); padding: 4px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--grad-panel) padding-box, var(--grad-border) border-box; box-shadow: var(--shadow-pop); }
.menu-item { display: flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 9px; font-size: var(--fs-base); color: var(--text-body); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.menu-item svg { width: 15px; height: 15px; color: var(--text-muted); }
.menu-item:hover { background: var(--bg-hover); }
.menu-item.is-danger { color: var(--status-danger); } .menu-item.is-danger svg { color: var(--status-danger); }
.menu-sep { height: 1px; background: var(--border-ghost); margin: 4px 0; }
.menu-label { padding: 6px 9px 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-faint); }

/* --- 6.10 Tooltip -------------------------------------------------------- */
.tooltip { display: inline-block; padding: 5px 9px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--solid-text); background: var(--solid-bg); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }

/* --- 6.11 Modal / Overlay ------------------------------------------------ */
.overlay { position: fixed; inset: 0; background: rgba(5,7,10,0.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: var(--space-5); z-index: 1000; }
.modal { width: 100%; max-width: var(--w-modal); border: 1px solid transparent; border-radius: var(--radius-xl); background: var(--grad-panel) padding-box, var(--grad-border) border-box; box-shadow: var(--shadow-pop); overflow: hidden; animation: ds-pop var(--dur-slow) var(--ease-out); }
.modal.modal-sm { max-width: var(--w-modal-sm); }
.modal.modal-lg { max-width: var(--w-modal-lg); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-ghost); }
.modal-body { padding: var(--space-4); color: var(--text-body); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-ghost); }
@keyframes ds-pop { from { opacity: 0; transform: scale(0.98) translateY(4px); } to { opacity: 1; transform: none; } }

/* --- 6.12 Avatar --------------------------------------------------------- */
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--grad-brand); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 20px; height: 20px; font-size: var(--fs-xs); }
.avatar-lg { width: 38px; height: 38px; font-size: var(--fs-md); }
.avatar-stack { display: inline-flex; } .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--bg-panel); margin-left: -8px; } .avatar-stack .avatar:first-child { margin-left: 0; }

/* --- 6.13 Kbd ------------------------------------------------------------ */
kbd, .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-xs); }

/* --- 6.14 Progress (gradient signature) ---------------------------------- */
.progress { width: 100%; height: 6px; background: var(--bg-active); border-radius: var(--radius-pill); box-shadow: var(--neu-inset); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--grad-brand); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }

/* --- 6.15 Skeleton ------------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg-hover) 37%, var(--bg-soft) 63%); background-size: 400% 100%; border-radius: var(--radius-sm); animation: ds-shimmer 1.4s ease infinite; }
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --- 6.16 Toast (couche flottante, liseré gradient) ---------------------- */
.toast { display: flex; align-items: flex-start; gap: var(--space-3); min-width: calc(260px * var(--ui-scale)); max-width: var(--w-toast); padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--grad-panel) padding-box, var(--grad-border) border-box; box-shadow: var(--shadow-pop); color: var(--text-body); animation: ds-slide var(--dur-slow) var(--ease-out); }
.toast::before { content: ''; width: 7px; height: 7px; margin-top: 5px; border-radius: var(--radius-pill); background: var(--neutral); flex-shrink: 0; }
.toast.is-success::before { background: var(--status-success); }
.toast.is-warning::before { background: var(--status-warning-pure); }
.toast.is-danger::before { background: var(--status-danger); }
.toast-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-main); }
.toast-msg { font-size: var(--fs-sm); color: var(--text-muted); }
@keyframes ds-slide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* --- 6.17 Réduction de mouvement (accessibilité) ------------------------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* === 7. SET COULEUR APPLICATIF — OPTIMA® ================================= */
/* Brancher data-app="…" sur n'importe quel sous-arbre → thème l'accent complet
   pour la zone. Pour les apps : --app-ink = --app (la couleur EXACTE du nom, pas
   d'assombrissement) et --app-contrast = #fff (texte blanc sur tout fond couleur). */
[data-app] { --app-ink: var(--app); --app-hover: color-mix(in oklab, var(--app) 86%, #fff); --app-active: color-mix(in oklab, var(--app) 85%, #000); --app-soft: color-mix(in oklab, var(--app) 14%, transparent); --app-contrast: #ffffff; }
[data-app="conception"] { --app: #e07430; }
[data-app="update"] { --app: #3f98b4; }
[data-app="jds"] { --app: #0d3a5f; }
[data-app="checkin"] { --app: #2a944b; }
[data-app="risk"] { --app: #cf2f3d; }
[data-app="plus"] { --app: #e1c336; }
/* Sombre : soft un peu plus présent ; --app-ink reste la couleur de marque pure */
@media (prefers-color-scheme: dark) { :root:not([data-theme]) [data-app] { --app-soft: color-mix(in oklab, var(--app) 22%, transparent); } }
[data-theme="dark"] [data-app] { --app-soft: color-mix(in oklab, var(--app) 22%, transparent); }
/* Logotype applicatif : "Optima®" fin + petit, nom en --app-ink poids 800 */
.optima-mark { display: inline-flex; align-items: baseline; gap: 0.24em; line-height: 1; letter-spacing: var(--tracking-heading); }
.optima-mark .opt { font-size: 0.58em; font-weight: var(--fw-medium); letter-spacing: 0; color: var(--text-muted); white-space: nowrap; }
.optima-mark .name { font-size: var(--fs-xl); font-weight: 800; color: var(--app); }
/* Tuile applicative (launcher) : aplat de marque + texte contrasté par data-app */
.app-tile { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--app); color: var(--app-contrast); font-weight: 800; font-size: var(--fs-lg); box-shadow: var(--shadow-soft); flex-shrink: 0; }