/* ============================================================
   Triskell Outils — Base
   Mobile-first · Dark/Light · Vanilla CSS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ── TOKENS — light par défaut, dark via data-theme="dark" ── */
:root {
  --bg:        #F8FAFC;
  --bg-2:      #FFFFFF;
  --bg-3:      #F1F5F9;
  --bg-card:   #FFFFFF;
  --border:    rgba(15,23,42,.08);
  --border-2:  rgba(15,23,42,.16);

  --indigo:    #6366F1;
  --indigo-dk: #4F46E5;
  --violet:    #8B5CF6;
  --pink:      #EC4899;
  --orange:    #F97316;
  --green:     #10B981;
  --cyan:      #06B6D4;
  --red:       #EF4444;
  --amber:     #F59E0B;

  --text:      #0F172A;
  --text-2:    #1E293B;
  --muted:     #64748B;
  --muted-2:   #475569;

  --font-h:    'Syne', system-ui, sans-serif;
  --font-b:    'Inter', system-ui, sans-serif;

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  32px;

  --sh-card: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08);
  --sh-glow: 0 0 40px rgba(99,102,241,.18);

  --t: all .28s cubic-bezier(.4,0,.2,1);

  --container: 720px;
}

[data-theme="dark"] {
  --bg:        #08080F;
  --bg-2:      #0D0D1A;
  --bg-3:      #13131F;
  --bg-card:   #0F0F1C;
  --border:    rgba(255,255,255,.07);
  --border-2:  rgba(255,255,255,.14);

  --text:      #E2E8F0;
  --text-2:    #CBD5E1;
  --muted:     #64748B;
  --muted-2:   #94A3B8;

  --sh-card: 0 1px 1px rgba(0,0,0,.3), 0 4px 24px rgba(0,0,0,.4);
  --sh-glow: 0 0 40px rgba(99,102,241,.25);
}

html, body { transition: background-color .35s ease, color .35s ease; }

/* ── TYPOGRAPHIE ── */
h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 4vw, 1.875rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
.lead { color: var(--muted-2); font-size: 1.0625rem; }
.muted { color: var(--muted); }
small, .small { font-size: .875rem; }

/* ── UTILITAIRES ── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container-wide { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.stack > * + * { margin-top: var(--gap, 16px); }
.stack-lg { --gap: 24px; }
.stack-sm { --gap: 8px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 0; min-width: 0; }
.center { text-align: center; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.brand-grad {
  background: linear-gradient(135deg, var(--indigo), var(--violet) 50%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── SCROLLBARS DISCRETES ── */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

/* ── FOCUS ACCESSIBLE ── */
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}