/*
 * 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; }
/* 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; } }
.zina-coming { background:var(--zina-bg); color:var(--zina-text); }
.zina-coming__main { position:relative; isolation:isolate; min-height:100svh; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; background:radial-gradient(circle at 78% 46%,var(--zina-tint),transparent 35%),radial-gradient(circle at 18% 82%,var(--zina-focus-shadow),transparent 30%),var(--zina-bg); }
.zina-coming .zina-shell { width:min(var(--zina-content-width),calc(100% - 40px)); max-width:none; min-height:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; margin-inline:auto; }
.zina-coming__header,.zina-coming__footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.zina-coming .zina-coming__header { padding-block:28px; }
.zina-wordmark { display:inline-flex; align-items:center; gap:10px; color:var(--zina-text); font-weight:700; font-size:18px; letter-spacing:.18em; text-decoration:none; }
.zina-wordmark__mark { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--zina-border); border-radius:12px; background:var(--zina-overlay); letter-spacing:0; }
.zina-coming .zina-status { display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid var(--zina-border); border-radius:var(--zina-pill); background:var(--zina-overlay); color:var(--zina-muted); font-size:12px; }
.zina-status__signal,.zina-coming__pulse span { width:7px; height:7px; border-radius:50%; background:var(--zina-success); box-shadow:0 0 14px var(--zina-success-border); }
.zina-coming .zina-coming__hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:clamp(30px,6vw,80px); padding-block:50px; }
.zina-coming__eyebrow { color:var(--zina-accent); font-size:12px; text-transform:uppercase; letter-spacing:.15em; margin:0 0 20px; }
.zina-coming h1 { font-size:var(--zina-text-display); line-height:1.06; letter-spacing:-.045em; font-weight:450; margin:0; }
.zina-coming h1 span { color:var(--zina-accent); }
.zina-coming__lead { color:var(--zina-muted); line-height:1.7; margin:24px 0 0; max-width:580px; font-size:var(--zina-font-size); }
.zina-coming__signals { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.zina-coming__signals span { padding:9px 14px; border:1px solid var(--zina-border-strong); border-radius:var(--zina-pill); color:var(--zina-text); font-size:12px; background:var(--zina-surface-raised); box-shadow:0 0 12px var(--zina-focus-shadow); }
.zina-coming__signals span:hover { border-color:var(--zina-blue); box-shadow:var(--zina-glow); }
.zina-coming__header [data-settings] { border-color:var(--zina-border-strong); color:var(--zina-text); background:var(--zina-surface-raised); box-shadow:0 0 12px var(--zina-focus-shadow); }
.zina-coming__header [data-settings]:hover,.zina-coming__header [data-settings]:focus-visible,.zina-coming__header [data-settings]:active { border-color:var(--zina-blue); box-shadow:var(--zina-glow); }
.zina-coming__header [data-settings]:active::before { opacity:var(--zina-glow-edge-opacity); animation-play-state:running; }
.zina-coming__header [data-settings]:active::after { opacity:var(--zina-glow-opacity); animation-play-state:running; }
:root[data-effects=false] .zina-coming__signals span,:root[data-effects=false] .zina-coming__header [data-settings] { box-shadow:none; }
.zina-coming__visual { display:grid; place-items:center; }
.zina-mascot-stage { position:relative; width:min(38vw,430px); aspect-ratio:1; display:grid; place-items:center; }
.zina-mascot-stage__halo { position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle,var(--zina-focus-shadow),transparent 70%); filter:blur(8px); }
.zina-mascot-stage__grid { position:absolute; inset:6%; border:1px solid var(--zina-border); border-radius:50%; box-shadow:0 0 0 28px var(--zina-overlay),0 0 0 55px var(--zina-overlay); }
.zina-mascot-stage picture { position:relative; z-index:2; width:70%; }
.zina-coming__mascot { width:100%; height:auto; display:block; filter:drop-shadow(0 15px 25px var(--zina-focus-shadow)); animation:zina-float 5s ease-in-out infinite; }
.zina-node { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--zina-blue); box-shadow:var(--zina-glow); }
.zina-node--one { top:14%; right:21%; } .zina-node--two { bottom:20%; left:10%; } .zina-node--three { top:39%; left:2%; }
.zina-orbit { position:absolute; z-index:-1; border:1px solid var(--zina-border); border-radius:50%; pointer-events:none; }
.zina-orbit--one { width:48vw; height:48vw; top:-30vw; left:-16vw; } .zina-orbit--two { width:36vw; height:36vw; right:-21vw; bottom:-20vw; }
.zina-coming .zina-coming__footer { padding-block:24px; border-top:1px solid var(--zina-border); color:var(--zina-subtle); font-size:12px; }
.zina-coming__footer p { margin:0; } .zina-coming__pulse { display:inline-flex; align-items:center; gap:10px; }
@keyframes zina-float { 50% { transform:translateY(-12px); } }
@media(max-width:760px) { .zina-coming .zina-coming__hero { grid-template-columns:1fr; gap:18px; padding-block:24px 36px; } .zina-mascot-stage { width:min(45vw,180px); } .zina-coming__copy { text-align:center; } .zina-coming__signals { justify-content:center; } .zina-coming h1 { font-size:clamp(32px,10vw,56px); } }
@media(max-width:600px) {
  .zina-coming .zina-coming__header { padding-block:16px; gap:12px; }
  .zina-coming__header .zina-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; width:100%; }
  .zina-coming__header .zina-status { display:none; }
  .zina-coming .zina-coming__footer { flex-direction:column; justify-content:center; align-items:center; gap:8px; text-align:center; padding-block:16px; }
}
/* Personnalisation projet : surcharger ici les tokens ou composants sans modifier le cœur. */