/*
 * ZINA — Design System · Tokens
 * Source canonique : kit `zina-ui` v2.1.0, étendue selon ADR-0001.
 * Les composants ne consomment que ces variables, jamais de couleur en dur.
 * Ne jamais modifier une valeur de marque directement dans un composant :
 * la surcharge passe par le profil d'apparence (voir tools/build-appearance-css.py).
 */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------- *
   * Typographie
   * ---------------------------------------------------------------- */
  --zina-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --zina-font-body: var(--zina-font);
  --zina-font-display: var(--zina-font); /* [OUVERT] fonte de marque auto-hébergée */
  --zina-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --zina-font-size: 15px;
  --zina-text-xs: .75rem;
  --zina-text-sm: .875rem;
  --zina-text-body: 1rem;
  --zina-text-title: clamp(1.35rem, 3vw, 1.75rem);
  --zina-text-display: clamp(2.5rem, 7vw, 5rem);

  /* Tailles fluides — réservées au display */
  --zina-text-fluid-hero: clamp(2.5rem, 5vw, 4.5rem);
  --zina-text-fluid-display: clamp(2rem, 4vw, 3.75rem);
  --zina-text-fluid-title: clamp(1.5rem, 2.4vw, 2.25rem);

  --zina-weight-regular: 400;
  --zina-weight-medium: 500;
  --zina-weight-semibold: 600;
  --zina-weight-bold: 700;

  --zina-leading-display: .98;
  --zina-leading-tight: 1.15;
  --zina-leading-snug: 1.25;
  --zina-leading-normal: 1.5;
  --zina-leading-relaxed: 1.65;

  --zina-tracking-display: -.03em;
  --zina-tracking-title: -.015em;
  --zina-tracking-body: 0;
  --zina-tracking-overline: .06em;

  /* Rôles typographiques (composés) */
  --zina-type-display: var(--zina-weight-semibold) var(--zina-text-fluid-display) / var(--zina-leading-display) var(--zina-font-display);
  --zina-type-hero: var(--zina-weight-bold) var(--zina-text-fluid-hero) / var(--zina-leading-display) var(--zina-font-display);
  --zina-type-page-title: var(--zina-weight-semibold) 30px / 1.1 var(--zina-font);
  --zina-type-section-title: var(--zina-weight-semibold) 22px / 1.2 var(--zina-font);
  --zina-type-card-title: var(--zina-weight-semibold) 18px / 1.25 var(--zina-font);
  --zina-type-body: var(--zina-weight-regular) var(--zina-text-body) / var(--zina-leading-normal) var(--zina-font);
  --zina-type-body-dense: var(--zina-weight-regular) var(--zina-text-sm) / 1.5 var(--zina-font);
  --zina-type-label: var(--zina-weight-medium) var(--zina-text-sm) / 1.35 var(--zina-font);
  --zina-type-helper: var(--zina-weight-regular) var(--zina-text-sm) / 1.45 var(--zina-font);
  --zina-type-caption: var(--zina-weight-regular) var(--zina-text-xs) / 1.45 var(--zina-font);
  --zina-type-overline: var(--zina-weight-semibold) var(--zina-text-xs) / 1.2 var(--zina-font);
  --zina-type-metric: var(--zina-weight-semibold) 32px / 1.1 var(--zina-font);

  /* ---------------------------------------------------------------- *
   * Espacement — base 8px
   * ---------------------------------------------------------------- */
  --zina-space-1: 4px;
  --zina-space-2: 8px;
  --zina-space-3: 12px;
  --zina-space-4: 16px;
  --zina-space-5: 20px;
  --zina-space-6: 24px;
  --zina-space-8: 32px;
  --zina-space-10: 40px;
  --zina-space-12: 48px;
  --zina-space-16: 64px;

  /* Espacements fluides (pages publiques) */
  --zina-gutter-fluid: clamp(1rem, 2vw, 2rem);
  --zina-section-fluid: clamp(2.5rem, 6vw, 5rem);
  --zina-hero-fluid: clamp(3.5rem, 8vw, 7rem);
  --zina-card-padding: 20px 26px;

  /* ---------------------------------------------------------------- *
   * Arrondis
   * ---------------------------------------------------------------- */
  --zina-radius-small: 12px;
  --zina-radius: 18px;
  --zina-radius-card: 24px;
  --zina-radius-major: 32px;
  --zina-pill: 999px;
  --zina-radius-pill: var(--zina-pill);

  /* ---------------------------------------------------------------- *
   * Contrôles et cibles
   * ---------------------------------------------------------------- */
  --zina-control-sm: 36px;
  --zina-control-md: 44px;
  --zina-control-lg: 52px;
  --zina-touch-target: 44px;

  /* ---------------------------------------------------------------- *
   * Layout flexible
   * ---------------------------------------------------------------- */
  --zina-content-width: 1120px;
  --zina-container-app: 96rem;
  --zina-container-marketing: 80rem;
  --zina-sidebar-width: 240px;
  --zina-measure-reading: 72ch;
  --zina-measure-marketing: 60ch;
  --zina-measure-compact: 52ch;
  --zina-grid-min-card: 18rem;
  --zina-grid-min-card-wide: 22rem;
  --zina-split-main: 20rem;
  --zina-split-side: 18rem;
  --zina-bp-narrow: 30rem;
  --zina-bp-tablet: 48rem;
  --zina-bp-desktop: 64rem;
  --zina-bp-wide: 80rem;

  /* ---------------------------------------------------------------- *
   * Mouvement
   * ---------------------------------------------------------------- */
  --zina-motion-tap: 160ms;
  --zina-motion-entry: 220ms;
  --zina-glow-speed: 6s;

  /* ---------------------------------------------------------------- *
   * Couleurs sémantiques — thème clair
   * ---------------------------------------------------------------- */
  --zina-bg: #f5f6fc;
  --zina-surface: #ffffff;
  --zina-surface-raised: #edf0fa;
  --zina-text: #20263c;
  --zina-muted: #545d78;
  --zina-subtle: #646e89;
  --zina-blue: #365ba6;
  --zina-accent: #6251b8;
  --zina-lavender: #eae5fb;
  --zina-success: #247247;
  --zina-warning: #805c12;
  --zina-danger: #b12b47;
  --zina-border: #ccd3e4;
  --zina-border-strong: #7c86a8;
  --zina-overlay: #556ca00a;
  --zina-tint: #5478c51a;
  --zina-focus-shadow: #6251b82b;
  --zina-user-surface: #e0e8fc;
  --zina-nav-bg: #ffffffed;
  --zina-success-bg: #e4f3e9;
  --zina-success-border: #a4cdb3;
  --zina-warning-bg: #fff2d4;
  --zina-warning-border: #d9c082;
  --zina-danger-bg: #ffe6eb;
  --zina-danger-border: #e4a6b4;
  --zina-focus-ring: #6251b82b;
  --zina-focus-ring-strong: #6251b855;

  /* Ombres multi-couches */
  --zina-shadow-soft: 0 1px 2px #22396710, 0 8px 20px #2239670a;
  --zina-shadow-card: 0 20px 70px #22396712;
  --zina-shadow-medium: 0 2px 6px #22396714, 0 12px 28px #2239670f;
  --zina-shadow-strong: 0 6px 16px #2239671a, 0 24px 48px #22396714;
  --zina-glow: 0 0 22px #6576c51c;
  --zina-surface-highlight: inset 0 1px 0 #ffffffbf;

  /* Alias de compatibilité (migration du CSS public) */
  --zina-background: var(--zina-bg);
  --zina-ink: var(--zina-text);
  --zina-violet: var(--zina-accent);
  --zina-violet-2: var(--zina-blue);
  --zina-deep: var(--zina-text);
  --zina-error: var(--zina-danger);
  --zina-focus: var(--zina-accent);
}

/* -------------------------------------------------------------------- *
 * Thème sombre
 * -------------------------------------------------------------------- */
:root[data-theme=dark] {
  color-scheme: dark;
  --zina-bg: #070a12;
  --zina-surface: #0d121e;
  --zina-surface-raised: #171e2e;
  --zina-text: #f1f1fa;
  --zina-muted: #b5b7ca;
  --zina-subtle: #8d93aa;
  --zina-blue: #94baff;
  --zina-accent: #b3a5ff;
  --zina-lavender: #25223d;
  --zina-success: #95e8ac;
  --zina-warning: #f2ce8d;
  --zina-danger: #ffabb8;
  --zina-border: #aabcec30;
  --zina-border-strong: #566385;
  --zina-overlay: #ffffff05;
  --zina-tint: #94baff18;
  --zina-focus-shadow: #a18cff45;
  --zina-user-surface: #26324b;
  --zina-nav-bg: #090d17ed;
  --zina-success-bg: #95e8ac10;
  --zina-success-border: #95e8ac33;
  --zina-warning-bg: #f2ce8d10;
  --zina-warning-border: #f2ce8d33;
  --zina-danger-bg: #ffabb810;
  --zina-danger-border: #ffabb833;
  --zina-focus-ring: #a18cff45;
  --zina-focus-ring-strong: #a18cff70;
  --zina-shadow-soft: inset 0 1px 0 #ffffff0d, 0 1px 2px #02040a38, 0 12px 24px #02040a2e;
  --zina-shadow-card: 0 22px 90px #0008;
  --zina-shadow-medium: inset 0 1px 0 #ffffff0f, 0 2px 6px #02040a47, 0 16px 32px #02040a3d;
  --zina-shadow-strong: inset 0 1px 0 #ffffff14, 0 6px 16px #02040a57, 0 28px 56px #02040a47;
  --zina-glow: 0 0 22px #7d91ff3d;
  --zina-surface-highlight: inset 0 1px 0 #ffffff0f;
}

/* -------------------------------------------------------------------- *
 * Accent
 * -------------------------------------------------------------------- */
:root[data-accent=violet] { --zina-blue: #6949b7; --zina-accent: #6949b7; }
:root[data-theme=dark][data-accent=violet] { --zina-blue: #c3abff; --zina-accent: #c3abff; }

/* Accent custom : les variables --zina-accent-custom-* sont injectées par le profil. */
:root[data-accent=custom] {
  --zina-accent: var(--zina-accent-custom, #6251b8);
  --zina-blue: var(--zina-accent-custom-blue, var(--zina-accent));
}

/* -------------------------------------------------------------------- *
 * Densité
 * -------------------------------------------------------------------- */
:root[data-density=compact] {
  --zina-card-padding: 14px 18px;
  --zina-space-6: 18px;
  --zina-space-8: 24px;
}

/* -------------------------------------------------------------------- *
 * Arrondis
 * -------------------------------------------------------------------- */
:root[data-radius=round] {
  --zina-radius-small: 18px;
  --zina-radius: 24px;
  --zina-radius-card: 32px;
}

/* -------------------------------------------------------------------- *
 * Effets et mouvement
 * -------------------------------------------------------------------- */
:root[data-effects=false] * {
  box-shadow: none !important;
  backdrop-filter: none !important;
}
:root[data-motion=false] *,
:root[data-motion=false] *::before,
:root[data-motion=false] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 var(--zina-font-size)/1.5 var(--zina-font); color: var(--zina-text); background: var(--zina-bg); }
button,input,select,textarea { font: inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
:focus-visible { outline: 2px solid var(--zina-accent); outline-offset: 5px; }
.zina-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.zina-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zina-page { min-height: 100svh; padding: 32px; background: radial-gradient(ellipse at 30% 0%,rgba(115,135,212,.19),transparent 45%),radial-gradient(ellipse at 100% 70%,rgba(157,126,154,.1),transparent 45%),var(--zina-bg); }
.zina-brandbar { max-width: 1240px; margin: 0 auto 32px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.zina-brand { color: var(--zina-text); text-decoration: none; font-weight: 300; font-size: 28px; letter-spacing: -.04em; }
.zina-tagline { margin: 4px 0 0; font-size: 10px; letter-spacing: .23em; text-transform: uppercase; color: var(--zina-muted); }
.zina-principles { display: flex; align-items: center; gap: 28px; }
.zina-principles p { margin: 0; }
.zina-principles small { display: block; color: var(--zina-muted); }
.zina-principles > span { color: var(--zina-subtle); }
.zina-shell { max-width: 1120px; margin: auto; padding: 22px 36px; border: 1px solid var(--zina-border); border-radius: var(--zina-radius-card); background: var(--zina-surface); box-shadow: var(--zina-shadow-card); }
.zina-topbar { display: flex; align-items: center; justify-content: space-between; }
.zina-topbar > span { font-size: 19px; color: var(--zina-muted); }
.zina-icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border: 1px solid var(--zina-border); border-radius: var(--zina-radius-small); background: var(--zina-overlay); color: var(--zina-text); min-height: 38px; }
.zina-hero { text-align: center; margin: 0 auto; }
.zina-mascot { display: block; width: 218px; height: 154px; object-fit: contain; margin: 0 auto 5px;  }
.zina-hero h1 { margin: 0; font-size: clamp(26px,3.5vw,40px); font-weight: 300; letter-spacing: -.035em; color: var(--zina-accent); }
.zina-hero h1 strong { color: var(--zina-text); font-weight: 450; }
.zina-hero p { margin: 4px 0 20px; color: var(--zina-muted); font-size: 18px; letter-spacing: .04em; }
.zina-composer { display: flex; align-items: center; max-width: 650px; margin: auto; border: 1px solid var(--zina-accent); border-radius: var(--zina-pill); padding: 7px 10px; background: linear-gradient(110deg,var(--zina-surface),var(--zina-surface-raised)); box-shadow: var(--zina-glow),inset 0 0 16px var(--zina-tint); }
.zina-composer:focus-within { border-color: var(--zina-lavender); box-shadow: 0 0 28px var(--zina-focus-shadow); }
.zina-composer input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--zina-text); background: transparent; padding: 8px 14px; }
.zina-composer input::placeholder { color: var(--zina-muted); opacity: .8; }
.zina-mic { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-right: 1px solid var(--zina-border); color: var(--zina-text); background: transparent; }
.zina-mic .zina-icon { width: 27px; height: 27px; }
.zina-send { display: grid; place-items: center; width: 36px; height: 36px; background: var(--zina-tint); color: var(--zina-blue); border: 0; border-radius: 50%; }
.zina-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 16px 0 18px; }
.zina-chip { border: 1px solid var(--zina-border); border-radius: var(--zina-pill); padding: 8px 20px; color: var(--zina-muted); background: linear-gradient(180deg,var(--zina-overlay),var(--zina-overlay)); font-size: 13px; }
.zina-chip:hover,.zina-chip[aria-pressed=true] { border-color: var(--zina-blue); color: var(--zina-text); background: var(--zina-tint); }
.zina-theme-picker { display:inline-flex; align-items:center; gap:8px; color:var(--zina-muted); font-size:13px; white-space:nowrap; }
.zina-theme-picker select { min-height:var(--zina-touch-target,44px); max-width:170px; padding:7px 28px 7px 12px; border:1px solid var(--zina-border); border-radius:var(--zina-pill); background:var(--zina-surface); color:var(--zina-text); cursor:pointer; }
.zina-theme-picker select:hover { border-color:var(--zina-blue); }
.zina-conversation { max-width: 860px; margin: auto; display: grid; gap: 12px; }
.zina-message { display: flex; align-items: flex-end; gap: 10px; max-width: 75%; }
.zina-message--user { justify-self: end; }
.zina-bubble { padding: 12px 16px; background: linear-gradient(125deg,var(--zina-surface-raised),var(--zina-surface)); border: 1px solid var(--zina-overlay); border-radius: 16px 16px 16px 4px; }
.zina-message--user .zina-bubble { background: linear-gradient(125deg,var(--zina-user-surface),var(--zina-user-surface)); border-radius: 16px 16px 4px 16px; }
.zina-bubble p { margin: 0; }
.zina-bubble time { display: block; text-align: right; color: var(--zina-subtle); font-size: 10px; margin-top: 4px; }
.zina-avatar { width: 42px; height: 42px; object-fit: cover;  }
.zina-timeline { list-style: none; display: flex; padding: 0; margin: 24px auto 20px; max-width: 860px; }
.zina-timeline li { position: relative; flex: 1; text-align: center; font-size: 12px; color: var(--zina-muted); }
.zina-timeline li:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: calc(50% + 17px); width: calc(100% - 34px); height: 1px; background: var(--zina-blue); box-shadow: 0 0 6px var(--zina-tint); }
.zina-step { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 7px; border: 1.5px solid var(--zina-blue); border-radius: 50%; color: var(--zina-text); background: var(--zina-surface); box-shadow: 0 0 12px var(--zina-tint); }
.zina-card { border: 1px solid var(--zina-border); border-radius: var(--zina-radius); background: linear-gradient(130deg,var(--zina-surface-raised),var(--zina-surface)); padding: var(--zina-card-padding); }
.zina-intervention { display: flex; align-items: center; gap: 26px; max-width: 860px; margin: auto; }
.zina-service-icon { display: grid; place-items: center; flex-shrink: 0; width: 72px; height: 72px; border-radius: 22px; color: var(--zina-blue); background: linear-gradient(140deg,var(--zina-user-surface),var(--zina-surface)); box-shadow: inset 0 1px 0 var(--zina-overlay); }
.zina-service-icon .zina-icon { width: 39px; height: 39px; }
.zina-card h2 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.zina-meta { margin: 5px 0; display: flex; align-items: center; gap: 10px; color: var(--zina-muted); font-size: 14px; }
.zina-meta .zina-icon { width: 18px; height: 18px; }
.zina-status { color: var(--zina-success); }
.zina-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 9px 24px; min-height: 42px; color: var(--zina-text); border: 1px solid var(--zina-blue); border-radius: var(--zina-pill); background: linear-gradient(120deg,var(--zina-user-surface),var(--zina-surface)); box-shadow: inset 0 0 12px var(--zina-tint),0 0 15px var(--zina-tint); text-decoration: none; }
.zina-button:hover { background: var(--zina-user-surface); box-shadow: var(--zina-glow); }
.zina-intervention > .zina-button { margin-left: auto; }
.zina-footer { text-align: center; font-size: 10px; letter-spacing: .18em; color: var(--zina-subtle); margin: 18px 0 0; }
.zina-bottom-nav { display: none; }
.zina-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 20; width: max-content; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 14px; border: 1px solid var(--zina-blue); background: var(--zina-surface-raised); color: var(--zina-text); box-shadow: var(--zina-glow); }
.zina-toast:empty { display: none; }
.zina-dialog { width: min(460px,calc(100% - 32px)); color: var(--zina-text); background: var(--zina-surface); border: 1px solid var(--zina-border); border-radius: 22px; padding: 28px; box-shadow: 0 24px 100px #000b; }
.zina-dialog::backdrop { background: #02040ab3; backdrop-filter: blur(8px); }
.zina-dialog h2 { font-size: 22px; margin-top: 0; }
.zina-dialog .zina-button { margin-top: 14px; }
.zina-showcase { max-width: 1120px; margin: 32px auto 0; }
.zina-showcase summary { cursor: pointer; color: var(--zina-muted); padding: 8px 0; }
.zina-component-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 18px; }
.zina-component-grid .zina-card { padding: 22px; }
.zina-field { display: grid; gap: 8px; margin-bottom: 14px; color: var(--zina-muted); }
.zina-input { width: 100%; padding: 11px 14px; border: 1px solid var(--zina-border-strong); border-radius: var(--zina-radius-small); background: var(--zina-surface); color: var(--zina-text); }
.zina-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.zina-switch input { appearance: none; width: 40px; height: 24px; border: 1px solid var(--zina-border-strong); border-radius: 20px; background: var(--zina-user-surface); position: relative; cursor: pointer; }
.zina-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--zina-muted); transition: transform .18s; }
.zina-switch input:checked { background: var(--zina-blue); border-color: var(--zina-blue); }
.zina-switch input:checked::after { transform: translateX(16px); background: white; }
.zina-badge { display: inline-block; padding: 4px 9px; margin: 4px 3px 4px 0; border-radius: 8px; font-size: 12px; background: var(--zina-success-bg); color: var(--zina-success); border: 1px solid var(--zina-success-border); }
.zina-badge--warning { color: var(--zina-warning); background: var(--zina-warning-bg); border-color: var(--zina-warning-border); }
.zina-badge--danger { color: var(--zina-danger); background: var(--zina-danger-bg); border-color: var(--zina-danger-border); }
@media (max-width: 850px) { .zina-page { padding: 20px; } .zina-principles { gap: 14px; font-size: 12px; } .zina-shell { padding: 22px; } .zina-component-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .zina-page { padding: 0; }
  .zina-brandbar { display: none; }
  .zina-shell { border: 0; border-radius: 0; padding: 24px 18px 110px; min-height: 100svh; }
  .zina-hero { margin-top: 10px; }
  .zina-mascot { width: 200px; height: 148px; }
  .zina-hero h1 { font-size: 26px; }
  .zina-hero p { font-size: 15px; max-width: 240px; margin: 8px auto 20px; }
  .zina-composer { border-radius: 24px; padding: 6px; }
  .zina-composer input { font-size: 16px; padding-left: 9px; }
  .zina-suggestions { gap: 7px; }
  .zina-chip { padding: 8px 11px; font-size: 11px; }
  .zina-message { max-width: 94%; font-size: 13px; }
  .zina-timeline { flex-direction: column; gap: 14px; margin: 22px 8px; }
  .zina-timeline li { display: flex; align-items: center; gap: 12px; text-align: left; }
  .zina-step { margin: 0; width: 28px; height: 28px; }
  .zina-timeline li:not(:last-child)::after { top: 29px; left: 13px; width: 1px; height: 12px; }
  .zina-intervention { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .zina-service-icon { width: 46px; height: 46px; border-radius: 13px; }
  .zina-service-icon .zina-icon { width: 28px; height: 28px; }
  .zina-card h2 { font-size: 15px; }
  .zina-meta { font-size: 12px; }
  .zina-intervention > .zina-button { width: 100%; margin: 0; }
  .zina-footer { font-size: 9px; letter-spacing: .08em; }
  .zina-bottom-nav { display: flex; position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; justify-content: space-around; border-top: 1px solid var(--zina-border); background: var(--zina-nav-bg); backdrop-filter: blur(16px); padding: 12px 8px calc(12px + env(safe-area-inset-bottom)); }
  .zina-nav-item { display: grid; justify-items: center; gap: 5px; background: none; border: 0; color: var(--zina-subtle); font-size: 10px; min-width: 70px; }
  .zina-nav-item[aria-current=page] { color: var(--zina-blue); }
  .zina-toast { bottom: 92px; font-size: 13px; }
  .zina-showcase { padding: 0 18px 100px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; scroll-behavior: auto !important; } }
[hidden] { display: none !important; }
a { color: var(--zina-blue); }
.zina-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; max-width:var(--zina-content-width); margin:0 auto 22px; padding:0 12px; }
.zina-toolbar a { text-decoration:none; }
.zina-chip,.zina-icon-button,.zina-send,.zina-mic { min-height:var(--zina-touch-target); }
.zina-mascot { height:165px; width:180px; filter:drop-shadow(0 0 15px var(--zina-tint)); }
.zina-avatar { object-fit:contain; }
.zina-settings-grid { display:grid; gap:16px; }
.zina-settings-dialog { max-height:85svh; overflow:auto; }
.zina-dialog-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.zina-page-heading { max-width:var(--zina-content-width); margin:30px auto; }
.zina-page-heading h1 { font-size:clamp(28px,5vw,42px); font-weight:450; margin:0; }
.zina-page-heading p { color:var(--zina-muted); }
.zina-section-title { grid-column:1/-1; font-size:22px; font-weight:500; margin:14px 0 0; }
.zina-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:var(--zina-content-width); margin:auto; }
.zina-stack { display:grid; gap:14px; }
.zina-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.zina-button--secondary { background:var(--zina-surface); border-color:var(--zina-border); box-shadow:none; }
.zina-button--danger { background:var(--zina-danger-bg); color:var(--zina-danger); border-color:var(--zina-danger-border); }
.zina-button--ghost { background:transparent; border-color:transparent; box-shadow:none; color:var(--zina-blue); }
.zina-alert { padding:14px; border-radius:var(--zina-radius-small); background:var(--zina-tint); border:1px solid var(--zina-border); }
.zina-alert--success { background:var(--zina-success-bg); color:var(--zina-success); border-color:var(--zina-success-border); }
.zina-alert--danger { background:var(--zina-danger-bg); color:var(--zina-danger); border-color:var(--zina-danger-border); }
.zina-help { margin:0; font-size:12px; color:var(--zina-muted); }
.zina-input[aria-invalid=true] { border-color:var(--zina-danger); }
.zina-check { display:flex; gap:10px; align-items:center; min-height:44px; }
.zina-check input { accent-color:var(--zina-blue); width:18px; height:18px; }
.zina-tabs { display:flex; flex-wrap:wrap; gap:6px; padding:5px; background:var(--zina-surface-raised); border-radius:var(--zina-radius-small); }
.zina-tabs button { padding:10px 16px; background:transparent; border:0; color:var(--zina-muted); border-radius:8px; }
.zina-tabs button[aria-selected=true] { background:var(--zina-surface); color:var(--zina-blue); box-shadow:var(--zina-shadow-card); }
.zina-stat { font-size:32px; font-weight:500; margin:0; }
.zina-table-wrap { overflow:auto; }
.zina-table { width:100%; border-collapse:collapse; font-size:13px; }
.zina-table th,.zina-table td { padding:12px 10px; text-align:left; border-bottom:1px solid var(--zina-border); white-space:nowrap; }
.zina-table th { color:var(--zina-muted); font-weight:500; }
.zina-span-2 { grid-column:span 2; }
.zina-progress { width:100%; accent-color:var(--zina-blue); height:10px; }
.zina-empty { text-align:center; color:var(--zina-muted); padding:22px; }
.zina-empty img { width:80px; }
.zina-skeleton { height:16px; border-radius:8px; background:var(--zina-user-surface); animation:zina-loading 1.5s ease-in-out infinite; }
.zina-spinner { width:22px; height:22px; border:2px solid var(--zina-border); border-top-color:var(--zina-blue); border-radius:50%; animation:zina-spin .9s linear infinite; }
@keyframes zina-loading { 50% { opacity:.4; } }
@keyframes zina-spin { to { transform:rotate(360deg); } }
:root[data-effects=false] * { box-shadow:none !important; backdrop-filter:none !important; }
:root[data-effects=false] .zina-page,:root[data-effects=false] .zina-coming__main { background:var(--zina-bg); }
:root[data-motion=false] *,:root[data-motion=false] *::before,:root[data-motion=false] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media(max-width:850px) { .zina-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .zina-grid { grid-template-columns:1fr; padding:0 16px; } .zina-span-2 { grid-column:auto; } .zina-page-heading { padding:0 16px; } .zina-toolbar { padding:14px 16px; margin:0; } }
:root[data-effects=false] .zina-mascot-stage__halo,:root[data-effects=false] .zina-mascot-stage__grid,:root[data-effects=false] .zina-node,:root[data-effects=false] .zina-orbit { visibility:hidden; }
/*
 * ZINA — Design System · Surfaces
 * Composants app/admin recommandés par le système produit (ADR-0001 §4.2).
 * Neutral-first : la couleur est réservée aux statuts, au focus et aux actions clés.
 */

/* -------------------------------------------------------------------- *
 * Rôles typographiques utilitaires
 * -------------------------------------------------------------------- */
.zina-display { font: var(--zina-type-display); letter-spacing: var(--zina-tracking-display); }
.zina-hero-type { font: var(--zina-type-hero); letter-spacing: var(--zina-tracking-display); }
.zina-page-title { font: var(--zina-type-page-title); letter-spacing: var(--zina-tracking-title); }
.zina-section-title { font: var(--zina-type-section-title); letter-spacing: var(--zina-tracking-title); }
.zina-card-title { font: var(--zina-type-card-title); letter-spacing: var(--zina-tracking-title); }
.zina-label { font: var(--zina-type-label); letter-spacing: var(--zina-tracking-body); }
.zina-helper { font: var(--zina-type-helper); color: var(--zina-muted); }
.zina-caption { font: var(--zina-type-caption); color: var(--zina-subtle); }
.zina-overline {
  font: var(--zina-type-overline);
  letter-spacing: var(--zina-tracking-overline);
  text-transform: uppercase;
  color: var(--zina-muted);
}
.zina-metric { font: var(--zina-type-metric); letter-spacing: var(--zina-tracking-title); }

/* Mesures de lecture */
.zina-measure-reading { max-width: var(--zina-measure-reading); }
.zina-measure-marketing { max-width: var(--zina-measure-marketing); }
.zina-measure-compact { max-width: var(--zina-measure-compact); }

/* -------------------------------------------------------------------- *
 * Conteneurs et grilles flexibles
 * -------------------------------------------------------------------- */
.zina-container-app {
  width: min(100% - (2 * var(--zina-gutter-fluid)), var(--zina-container-app));
  margin-inline: auto;
}
.zina-container-marketing {
  width: min(100% - (2 * var(--zina-gutter-fluid)), var(--zina-container-marketing));
  margin-inline: auto;
}
.zina-auto-grid {
  display: grid;
  gap: var(--zina-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--zina-grid-min-card), 100%), 1fr));
}
.zina-auto-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--zina-grid-min-card-wide), 100%), 1fr));
}
.zina-split { display: flex; flex-wrap: wrap; gap: var(--zina-space-8); }
.zina-split__main { flex: 3 1 var(--zina-split-main); min-width: 0; }
.zina-split__side { flex: 1 1 var(--zina-split-side); min-width: 0; }

/* -------------------------------------------------------------------- *
 * Shell applicatif
 * -------------------------------------------------------------------- */
.zina-app-shell {
  display: grid;
  grid-template-columns: var(--zina-sidebar-width) minmax(0, 1fr);
  min-height: 100svh;
  background: var(--zina-bg);
  color: var(--zina-text);
}
.zina-app-sidebar {
  border-right: 1px solid var(--zina-border);
  background: var(--zina-surface);
  padding: var(--zina-space-5);
}
.zina-app-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zina-space-4);
  padding: var(--zina-space-3) var(--zina-space-6);
  border-bottom: 1px solid var(--zina-border);
  background: var(--zina-nav-bg);
  backdrop-filter: blur(14px);
}
.zina-app-main { padding: var(--zina-space-6); }
@media (max-width: 64rem) {
  .zina-app-shell { grid-template-columns: 1fr; }
  .zina-app-sidebar { display: none; }
  .zina-app-sidebar[data-open=true] {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(82vw, var(--zina-sidebar-width));
    z-index: 30;
    box-shadow: var(--zina-shadow-strong);
  }
}

/* -------------------------------------------------------------------- *
 * Cartes de synthèse / KPI
 * -------------------------------------------------------------------- */
.zina-stat-card {
  padding: var(--zina-space-5);
  border: 1px solid var(--zina-border);
  border-radius: var(--zina-radius);
  background: var(--zina-surface);
  box-shadow: var(--zina-shadow-soft);
}
.zina-stat-card__label {
  font: var(--zina-type-label);
  color: var(--zina-muted);
  margin: 0 0 var(--zina-space-2);
}
.zina-stat-card__value { margin: 0; font: var(--zina-type-metric); }
.zina-stat-card__delta { margin: var(--zina-space-1) 0 0; font: var(--zina-type-caption); color: var(--zina-muted); }

/* -------------------------------------------------------------------- *
 * Barre de filtres / actions de masse
 * -------------------------------------------------------------------- */
.zina-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zina-space-3);
  align-items: center;
  padding: var(--zina-space-3) 0;
}
.zina-filterbar__grow { flex: 1 1 var(--zina-grid-min-card); min-width: 0; }
.zina-bulkbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zina-space-3);
  align-items: center;
  padding: var(--zina-space-3) var(--zina-space-4);
  border: 1px solid var(--zina-accent);
  border-radius: var(--zina-radius-small);
  background: var(--zina-tint);
}

/* -------------------------------------------------------------------- *
 * Drawer (contexte, détail, filtres)
 * -------------------------------------------------------------------- */
.zina-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 420px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--zina-surface);
  border-left: 1px solid var(--zina-border);
  box-shadow: var(--zina-shadow-strong);
  transform: translateX(100%);
  transition: transform var(--zina-motion-entry);
}
.zina-drawer[data-open=true] { transform: translateX(0); }
.zina-drawer__header,
.zina-drawer__footer {
  padding: var(--zina-space-4) var(--zina-space-5);
  border-bottom: 1px solid var(--zina-border);
}
.zina-drawer__footer { border-bottom: 0; border-top: 1px solid var(--zina-border); margin-top: auto; }
.zina-drawer__body { padding: var(--zina-space-5); overflow: auto; }
@media (max-width: 48rem) {
  .zina-drawer { width: 100%; }
}

/* -------------------------------------------------------------------- *
 * Command palette (recherche / raccourcis)
 * -------------------------------------------------------------------- */
.zina-command {
  width: min(560px, calc(100% - 32px));
  margin: 10vh auto auto;
  border: 1px solid var(--zina-border);
  border-radius: var(--zina-radius);
  background: var(--zina-surface);
  box-shadow: var(--zina-shadow-strong);
  overflow: hidden;
}
.zina-command__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--zina-border);
  padding: var(--zina-space-4) var(--zina-space-5);
  background: transparent;
  color: var(--zina-text);
  font: var(--zina-type-body);
}
.zina-command__group { padding: var(--zina-space-2) var(--zina-space-2) var(--zina-space-3); }
.zina-command__group-title {
  padding: var(--zina-space-2) var(--zina-space-3);
  font: var(--zina-type-caption);
  color: var(--zina-subtle);
  text-transform: uppercase;
  letter-spacing: var(--zina-tracking-overline);
}
.zina-command__item {
  display: flex;
  align-items: center;
  gap: var(--zina-space-3);
  width: 100%;
  padding: var(--zina-space-3);
  border: 0;
  border-radius: var(--zina-radius-small);
  background: transparent;
  color: var(--zina-text);
  text-align: left;
}
.zina-command__item[aria-selected=true] { background: var(--zina-tint); }
.zina-command__hint { margin-left: auto; font: var(--zina-type-caption); color: var(--zina-subtle); }

/* -------------------------------------------------------------------- *
 * Inbox notifications
 * -------------------------------------------------------------------- */
.zina-inbox__row {
  display: flex;
  gap: var(--zina-space-3);
  padding: var(--zina-space-4);
  border-bottom: 1px solid var(--zina-border);
  background: var(--zina-surface);
}
.zina-inbox__row[data-unread=true] { background: var(--zina-tint); }
.zina-inbox__row[data-unread=true] .zina-inbox__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--zina-blue); flex-shrink: 0;
}
.zina-inbox__row:not([data-unread=true]) .zina-inbox__dot { width: 8px; flex-shrink: 0; }

/* -------------------------------------------------------------------- *
 * États
 * -------------------------------------------------------------------- */
.zina-state { padding: var(--zina-space-8); text-align: center; color: var(--zina-muted); }
.zina-state__icon { width: 64px; height: 64px; margin: 0 auto var(--zina-space-4); opacity: .9; }
.zina-field-error { font: var(--zina-type-caption); color: var(--zina-danger); }
.zina-field[data-invalid=true] .zina-input { border-color: var(--zina-danger); }

/* -------------------------------------------------------------------- *
 * Emails transactionnels (aperçu — HTML email réel = table-based, CSS inline)
 * -------------------------------------------------------------------- */
.zina-email-preview {
  width: min(600px, 100%);
  margin-inline: auto;
  border: 1px solid var(--zina-border);
  border-radius: var(--zina-radius);
  overflow: hidden;
  background: var(--zina-surface);
}
.zina-email-preview__header { padding: var(--zina-space-5); background: var(--zina-surface-raised); }
.zina-email-preview__brand { height: 40px; width: auto; display: block; }
.zina-email-preview__body { padding: var(--zina-space-6); }
.zina-email-preview__footer {
  padding: var(--zina-space-5);
  border-top: 1px solid var(--zina-border);
  font: var(--zina-type-caption);
  color: var(--zina-subtle);
}
.zina-email-preview__signature { margin-top: var(--zina-space-4); padding-left: var(--zina-space-3); border-left: 2px solid var(--zina-accent); }
/* Bordure lumineuse rotative — CSS natif, sans dépendance. */
@property --zina-glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
:root {
  --zina-glow-speed: 6s;
  --zina-glow-width: 1.5px;
  --zina-glow-blur: 9px;
  --zina-glow-opacity: .28;
  --zina-glow-edge-opacity: .72;
  --zina-glow-color-1: var(--zina-blue);
  --zina-glow-color-2: var(--zina-accent);
}
:root[data-theme=dark] { --zina-glow-opacity: .5; --zina-glow-edge-opacity: .9; }
:root[data-glow-intensity=subtle] { --zina-glow-opacity: .18; --zina-glow-edge-opacity: .5; --zina-glow-blur: 6px; }
:root[data-glow-intensity=intense] { --zina-glow-opacity: .7; --zina-glow-edge-opacity: 1; --zina-glow-blur: 14px; }
.zina-glow {
  position: relative;
  isolation: isolate;
  /* Le fallback conserve une bordure statique si les masques sont indisponibles. */
  border-color: var(--zina-blue);
}
@supports (background: conic-gradient(from 0deg, transparent, blue)) and ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .zina-glow::before,.zina-glow::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--zina-glow-width));
    padding: var(--zina-glow-width);
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--zina-glow-angle),transparent 0deg 65deg,var(--zina-glow-color-1) 105deg,var(--zina-glow-color-2) 155deg,transparent 195deg 250deg,var(--zina-glow-color-2) 290deg,var(--zina-glow-color-1) 330deg,transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: zina-glow-turn var(--zina-glow-speed) linear infinite;
  }
  .zina-glow::before { z-index: 1; opacity: var(--zina-glow-edge-opacity); }
  .zina-glow::after { z-index: -1; filter: blur(var(--zina-glow-blur)); opacity: var(--zina-glow-opacity); }
}
@keyframes zina-glow-turn { to { --zina-glow-angle: 360deg; } }
.zina-glow--slow { --zina-glow-speed: 10s; }
.zina-glow--fast { --zina-glow-speed: 3s; }
.zina-glow--hover::before,.zina-glow--hover::after { opacity: 0; animation-play-state: paused; }
.zina-glow--hover:hover::before,.zina-glow--hover:focus-within::before { opacity: var(--zina-glow-edge-opacity); animation-play-state: running; }
.zina-glow--hover:hover::after,.zina-glow--hover:focus-within::after { opacity: var(--zina-glow-opacity); animation-play-state: running; }
:root[data-effects=false] .zina-glow::before,:root[data-effects=false] .zina-glow::after,
:root[data-rotating-glow=false] .zina-glow::before,:root[data-rotating-glow=false] .zina-glow::after,
.zina-glow:disabled::before,.zina-glow:disabled::after { display: none; }
:root[data-motion=false] .zina-glow::before,:root[data-motion=false] .zina-glow::after { animation: none; }
@media (prefers-reduced-motion:reduce) { .zina-glow::before,.zina-glow::after { animation: none !important; } }
@media print { .zina-glow::before,.zina-glow::after { display: none; } }
/* Personnalisation projet : surcharger ici les tokens ou composants sans modifier le cœur. */