@import "tailwindcss";

/* ─── VALABEL Design Tokens ──────────────────────────────────────────────── */

@theme {
  /* Colors */
  --color-black:      #080808;
  --color-white:      #F5F4F0;
  --color-electric:   #0047FF;
  --color-electric-dark: #0036CC;

  --color-gray-900:   #141414;
  --color-gray-800:   #1E1E1E;
  --color-gray-700:   #282828;
  --color-gray-600:   #3A3A3A;
  --color-gray-500:   #505050;
  --color-gray-400:   #686868;
  --color-gray-300:   #888888;
  --color-gray-200:   #B8B8B4;
  --color-gray-100:   #E8E7E3;
  --color-gray-50:    #F2F1ED;

  /* Typography */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* Border radius */
  --radius-sm:   2px;
  --radius:      4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;
}

/* ─── Semantic variables ─────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --bg:             #080808;
  --surface:        #141414;
  --surface-raised: #1E1E1E;
  --border:         #282828;
  --border-subtle:  #3A3A3A;
  --text:           #F5F4F0;
  --text-secondary: #888888;
  --text-muted:     #686868;
  --accent:         #0047FF;
  --accent-dark:    #0036CC;
}

/* Mode clair — activé via [data-theme="light"] sur <html> (voir ThemeToggle) */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:             #F5F4F0;
  --surface:        #F2F1ED;
  --surface-raised: #E8E7E3;
  --border:         #B8B8B4;
  --border-subtle:  #888888;
  --text:           #080808;
  --text-secondary: #505050;
  --text-muted:     #686868;
  --accent:         #0047FF;
  --accent-dark:    #0036CC;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Pas de contour de focus sur les éléments tactiles (catégories, boutons) */
button:focus,
button:focus-visible,
a:focus,
a:focus-visible {
  outline: none;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Selection ───────────────────────────────────────────────────────────── */

::selection { background-color: #0047FF; color: #F5F4F0; }

/* ─── Glitch (wordmark VALABEL) ───────────────────────────────────────────── */

.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Le texte réel se déforme (filtre de déplacement SVG + skew/scale) */
  .glitch {
    animation: glitch-shape 6s ease-in-out infinite;
  }
  .glitch::before {
    color: var(--accent);
    animation: glitch-burst-1 6s ease-in-out infinite;
  }
  .glitch::after {
    color: #ff2965;
    animation: glitch-burst-2 6s ease-in-out infinite;
  }
}

@keyframes glitch-shape {
  0%, 91.5%, 96.5%, 100% { filter: none; transform: none; }
  92%   { filter: url(#glitch-displace); transform: skewX(-8deg) scaleX(1.05); }
  92.8% { filter: none; transform: translate(-3px, 1px) scaleY(0.94); }
  93.6% { filter: url(#glitch-displace); transform: skewX(5deg) translate(2px, 0); }
  94.4% { filter: none; transform: scaleX(1.04) translate(-2px, 0); }
  95.2% { filter: url(#glitch-displace); transform: translate(3px, -1px) scaleY(1.05); }
  96%   { filter: none; transform: translate(0, 0); }
}

@keyframes glitch-burst-1 {
  0%, 92%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  92.5% { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translate(-3px, 0); }
  93.5% { opacity: 1; clip-path: inset(55% 0 20% 0); transform: translate(3px, 0); }
  94.5% { opacity: 1; clip-path: inset(30% 0 45% 0); transform: translate(-2px, 0); }
  95.5% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
}

@keyframes glitch-burst-2 {
  0%, 92%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  92.5% { opacity: 1; clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); }
  93.5% { opacity: 1; clip-path: inset(15% 0 65% 0); transform: translate(-3px, 0); }
  94.5% { opacity: 1; clip-path: inset(40% 0 35% 0); transform: translate(2px, 0); }
  95.5% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
}

/* ─── Glitch du logo du header (voir LogoGlitch) ────────────────────────────
   Même principe que .glitch ci-dessus, mais avec de vrais éléments
   superposés à la place des pseudo-éléments ::before/::after — un SVG ne
   peut pas être dupliqué via content: attr(data-text). Amplitudes réduites,
   adaptées à la petite taille du logo. */

.glitch-logo { position: relative; display: inline-block; }
.glitch-logo-burst-1,
.glitch-logo-burst-2 {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .glitch-logo-shape { animation: logo-glitch-shape 6s ease-in-out infinite; }
  .glitch-logo-burst-1 { animation: logo-glitch-burst-1 6s ease-in-out infinite; }
  .glitch-logo-burst-2 { animation: logo-glitch-burst-2 6s ease-in-out infinite; }
}

@keyframes logo-glitch-shape {
  0%, 91.5%, 96.5%, 100% { filter: none; transform: none; }
  92%   { filter: url(#glitch-displace-logo); transform: skewX(-8deg) scaleX(1.05); }
  92.8% { filter: none; transform: translate(-1.5px, 0.5px) scaleY(0.94); }
  93.6% { filter: url(#glitch-displace-logo); transform: skewX(5deg) translate(1px, 0); }
  94.4% { filter: none; transform: scaleX(1.04) translate(-1px, 0); }
  95.2% { filter: url(#glitch-displace-logo); transform: translate(1.5px, -0.5px) scaleY(1.05); }
  96%   { filter: none; transform: translate(0, 0); }
}

@keyframes logo-glitch-burst-1 {
  0%, 92%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  92.5% { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translate(-1.5px, 0); }
  93.5% { opacity: 1; clip-path: inset(55% 0 20% 0); transform: translate(1.5px, 0); }
  94.5% { opacity: 1; clip-path: inset(30% 0 45% 0); transform: translate(-1px, 0); }
  95.5% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
}

@keyframes logo-glitch-burst-2 {
  0%, 92%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  92.5% { opacity: 1; clip-path: inset(60% 0 10% 0); transform: translate(1.5px, 0); }
  93.5% { opacity: 1; clip-path: inset(15% 0 65% 0); transform: translate(-1.5px, 0); }
  94.5% { opacity: 1; clip-path: inset(40% 0 35% 0); transform: translate(1px, 0); }
  95.5% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
}

/* ─── Flash du mode de défilement "Glitch" (voir ScrollModeController) ──────
   Un seul coup, déclenché au hasard pendant le scroll (pas une boucle) —
   la page a un raté au moment où on glisse. */

@keyframes scroll-glitch-flash {
  0%   { opacity: 0; transform: translate(0, 0) skewX(0deg); }
  15%  { opacity: 0.85; transform: translate(-5px, 2px) skewX(6deg); }
  35%  { opacity: 0.55; transform: translate(4px, -2px) skewX(-4deg); }
  55%  { opacity: 0.9; transform: translate(-3px, 1px) skewX(3deg); }
  75%  { opacity: 0.4; transform: translate(2px, -1px) skewX(-2deg); }
  100% { opacity: 0; transform: translate(0, 0) skewX(0deg); }
}

.scroll-glitch-flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 71, 255, 0.2), transparent 45%, rgba(255, 41, 101, 0.2));
  mix-blend-mode: screen;
  animation: scroll-glitch-flash 220ms steps(2, end);
}

/* ─── Sélecteur de catégorie (fondu doux au changement de valeur) ──────────── */

@keyframes facet-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.facet-value {
  animation: facet-fade-in 0.2s ease-out;
}

/* ─── Utilitaires ─────────────────────────────────────────────────────────── */

/* Défilement horizontal sans barre visible (barres de filtres mobile) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }