/* ============================================================
   OTAKAI — base.css
   Reset, jetons de design (tokens), thèmes, typographie, utilitaires
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); color: #fff; }

/* ---------- Jetons communs ---------- */
:root {
  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 220ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 420ms cubic-bezier(.16, 1, .3, 1);
  --t-spring: 520ms cubic-bezier(.34, 1.56, .64, 1);

  --sidebar-w: 264px;
  --rail-w: 320px;
  --topbar-h: 66px;
  --maxw: 1560px;

  --z-sticky: 30; --z-nav: 40; --z-modal: 80; --z-toast: 90; --z-fx: 95;

  --good: #34d399; --warn: #fbbf24; --bad: #fb7185; --info: #60a5fa;
}

/* ---------- Thème sombre (défaut) ---------- */
:root, [data-theme="dark"] {
  --bg: #0b0b12;
  --bg-deep: #07070c;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .075);
  --surface-solid: #14141f;
  --surface-solid-2: #1b1b28;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);
  --text: #f2f1f8;
  --text-dim: #b6b4c7;
  --text-mute: #7e7c92;
  --glass-blur: 18px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, .7);
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .8);
  --glow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent), 0 12px 40px -12px color-mix(in oklab, var(--accent) 55%, transparent);
  --aurora-opacity: .55;
  --on-accent: #17061a;
}

/* ---------- Thème clair ---------- */
[data-theme="light"] {
  --bg: #f6f5fb;
  --bg-deep: #eceafa;
  --surface: rgba(255, 255, 255, .72);
  --surface-2: rgba(255, 255, 255, .95);
  --surface-solid: #ffffff;
  --surface-solid-2: #f4f3fb;
  --border: rgba(22, 18, 45, .1);
  --border-strong: rgba(22, 18, 45, .2);
  --text: #171429;
  --text-dim: #4d4866;
  --text-mute: #74708c;
  --glass-blur: 14px;
  --shadow-1: 0 1px 2px rgba(24, 20, 48, .08);
  --shadow-2: 0 12px 28px -14px rgba(24, 20, 48, .28);
  --shadow-3: 0 30px 60px -24px rgba(24, 20, 48, .3);
  --aurora-opacity: .4;
  --on-accent: #ffffff;
}

/* ---------- Accents ---------- */
[data-accent="sakura"] { --accent: #ff5c9e; --accent-2: #8b5cf6; --accent-3: #ffb3d0; }
[data-accent="neon"]   { --accent: #22d3ee; --accent-2: #6366f1; --accent-3: #a5f3fc; }
[data-accent="matcha"] { --accent: #4ade80; --accent-2: #14b8a6; --accent-3: #bbf7d0; }
[data-accent="sunset"] { --accent: #fb923c; --accent-2: #ef4444; --accent-3: #fed7aa; }
[data-accent="violet"] { --accent: #a78bfa; --accent-2: #ec4899; --accent-3: #ddd6fe; }
[data-accent="gold"]   { --accent: #fbbf24; --accent-2: #f97316; --accent-3: #fde68a; }
:root { --accent: #ff5c9e; --accent-2: #8b5cf6; --accent-3: #ffb3d0; }
:root { --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent); }
:root { --gradient: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* ---------- Densité ---------- */
[data-density="compact"] { --sp-card: 12px; --row-h: 40px; }
[data-density="cozy"]    { --sp-card: 18px; --row-h: 48px; }
[data-density="roomy"]   { --sp-card: 24px; --row-h: 56px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
}
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
h3 { font-size: 1.08rem; }
small, .small { font-size: .82rem; }
code, pre { font-family: var(--font-mono); font-size: .88em; }

/* ---------- Fond animé ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; opacity: var(--aurora-opacity); pointer-events: none; }
.aurora__blob { position: absolute; width: 46vw; height: 46vw; min-width: 380px; min-height: 380px; border-radius: 50%; filter: blur(90px); }
.aurora__blob--1 { background: var(--accent); top: -12vw; left: -8vw; animation: float1 24s ease-in-out infinite; }
.aurora__blob--2 { background: var(--accent-2); bottom: -16vw; right: -10vw; animation: float2 30s ease-in-out infinite; }
.aurora__blob--3 { background: var(--accent-3); top: 38%; left: 48%; opacity: .35; animation: float3 26s ease-in-out infinite; }
.aurora__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  opacity: .5;
}
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw, 8vh) scale(1.15); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-7vw,-6vh) scale(.92); } }
@keyframes float3 { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-42%,-58%) scale(1.2); } }

/* ---------- Animations partagées ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes shimmer { 100% { background-position: 200% 0; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes flameFlicker { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(3deg); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.anim-up { animation: fadeUp var(--t-slow) both; }
.anim-in { animation: fadeIn var(--t-base) both; }
.stagger > * { animation: fadeUp var(--t-slow) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .1s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(6) { animation-delay: .22s; }
.stagger > *:nth-child(7) { animation-delay: .26s; }
.stagger > *:nth-child(8) { animation-delay: .3s; }

/* ---------- Utilitaires ---------- */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--sp-3); }
.grow { flex: 1 1 auto; min-width: 0; }
.center { display: grid; place-items: center; }
.dim { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.bold { font-weight: 700; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Utilitaires d'affichage responsive.
   `!important` est nécessaire : ces classes doivent l'emporter sur le `display`
   des composants (.iconbtn, .chip, .btn…) quel que soit l'ordre des feuilles. */
.only-sm { display: none !important; }
/* 900px = point de rupture de la coquille (voir layout.css) : le bouton menu
   doit apparaître exactement quand la barre latérale passe en tiroir. */
@media (max-width: 900px) {
  .hide-sm { display: none !important; }
  .only-sm { display: grid !important; }
}

/* Barres de défilement */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); background-clip: content-box; }

.noscript { margin: 20vh auto; max-width: 480px; padding: 24px; text-align: center; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-solid); }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-fx); }