/* ───────────────────────────────────────────────────────────
   KypoLab · Pol QUIMERC'H — Tokens & fondations
   Couleurs, typographie, espace, reset, boutons.
   À lier EN PREMIER sur chaque page (avant site.css).
   ─────────────────────────────────────────────────────────── */
:root {
  /* Couleurs */
  --bg:            #0D0D0D;
  --text:          #F5F5F0;
  --accent:        #A78BFA;            /* violet / lavande — marque KypoLab */
  --accent-ink:    #0D0D0D;            /* encre foncée posée sur l'accent  */
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-glow:   color-mix(in srgb, var(--accent) 55%, transparent);
  --bg-secondary:  #3B3B4F;
  --panel:         color-mix(in srgb, #3B3B4F 30%, transparent);
  --text-muted:    #A0A09A;
  --text-dim:      #66665F;
  --bg-elev:       #131313;
  --bg-elev-2:     #1A1A1A;
  --hairline:      rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  /* Liquid glass (style Apple) — surfaces translucides */
  /* Teinte sombre LÉGÈREMENT lavande + faible opacité : le dégradé animé
     transparaît et colore le verre (au lieu d'un panneau blanc opaque). */
  --glass-tint:      color-mix(in srgb, var(--accent) 14%, var(--bg-elev));
  --glass-bg:        color-mix(in srgb, var(--glass-tint) 38%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--glass-tint) 56%, transparent);
  --glass-border:    color-mix(in srgb, #ffffff 12%, transparent);
  --glass-blur:      18px;
  /* backdrop-filter commun : flou + saturation + un léger gain de lumière
     pour que le reflet du fond « vive » au lieu de rester figé. */
  --glass-filter:    blur(var(--glass-blur)) saturate(180%) brightness(1.08);
  --glass-shadow:    0 8px 30px -14px rgba(0,0,0,0.6);
  /* Liseré spéculaire discret (haut clair, bas à peine) — pas de voile blanc. */
  --glass-sheen:     inset 0 1px 0 0 color-mix(in srgb, #ffffff 14%, transparent),
                     inset 0 -1px 0 0 color-mix(in srgb, #ffffff 4%, transparent);
  /* cartes de contenu : translucides (verre) — lisibilité assurée par le dégradé sombre + voile */
  --glass-panel:     color-mix(in srgb, var(--glass-tint) 60%, transparent);

  /* Typographie */
  --font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900;
  --text-display: clamp(3rem, 8.5vw, 6.5rem);
  --text-h1:      clamp(2rem, 4.2vw, 3.1rem);
  --text-h2:      clamp(1.6rem, 3vw, 2.25rem);
  --text-h3:      clamp(1.2rem, 2vw, 1.5rem);
  --text-lead:    clamp(1.05rem, 1.5vw, 1.25rem);
  --text-body:    1.0625rem;           /* 17px */
  --text-sm:      0.9rem;
  --text-label:   0.72rem;
  --lh-base:    1.6;
  --lh-tight:   1.0;
  --lh-relaxed: 1.75;
  --track-tight: -0.03em;
  --track-snug:  -0.015em;
  --track-label: 0.18em;

  /* Espace — échelle 4px */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;   --space-11: 10rem;
  --section-y: clamp(6.25rem, 12vw, 10rem);   /* ≥ 100px */

  /* Shell */
  --max-w: 1200px; --max-w-text: 720px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* Rayons */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur: 260ms;
}

/* ── Base / reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  background: transparent; color: var(--text);
  font-family: var(--font); font-size: var(--text-body); line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
.label { font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-dim); }

/* ── Boutons ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  padding: .72em 1.35em; border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  color: var(--text); background: var(--glass-bg); cursor: pointer;
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  box-shadow: var(--glass-sheen);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--accent:hover { filter: brightness(1.08); }
.btn--ghost { border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--panel); color: var(--text); border-color: var(--border); }
/* Flèche du bouton : glisse de quelques px au survol */
.btn span { transition: transform var(--dur) var(--ease); }
.btn:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn span { transition: none; } }