/* ==========================================================================
   VTD BOT — Design tokens & base
   DA : Vinted DARK MODE, dont le teal d'origine est remplacé par un azur
        électrique (#2E8FFF) — plus lumineux, plus premium sur fond sombre.

   Principe de nommage (hérité, volontairement conservé) :
   les tokens gardent leur SÉMANTIQUE, pas leur teinte. L'échelle `--slate-*`
   va toujours du « plus contrasté avec le fond » (700) au « presque le fond »
   (50) : en dark mode, 700 est donc quasi blanc et 50 quasi noir. Toute règle
   écrite pour le thème clair garde ainsi son intention, à l'envers.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Brand — azur électrique (remplace le teal Vinted) */
  --blue-50:  #0D1E33;   /* fond teinté, « presque le fond » */
  --blue-100: #12283F;
  --blue-200: #1A3A5E;
  --blue-300: #24568C;
  --blue-400: #7FBEFF;   /* TEXTE de marque sur fond sombre (le plus lisible) */
  --blue-500: #2E8FFF;   /* PRIMAIRE — aplats, boutons, focus */
  --blue-600: #1B7AF0;   /* pressé / dégradés */
  --blue-700: #1463CC;
  --blue-800: #0F4D9E;
  --blue-900: #0C3C7A;

  /* Azur lisible en TEXTE sur fond sombre (raccourci explicite) */
  --brand:      var(--blue-500);
  --brand-text: #5AA9FF;

  /* Encres & neutres — échelle INVERSÉE pour le dark mode */
  --ink:        #F5F7F8;   /* texte principal (quasi blanc) */
  --ink-soft:   #DCE2E6;
  --slate-700:  #C6CED3;
  --slate-600:  #A5AEB5;   /* paragraphes */
  --slate-500:  #8A939A;   /* texte discret */
  --slate-400:  #6C757C;
  --slate-300:  #495157;
  --slate-200:  #333A3F;   /* bordures marquées */
  --slate-100:  #262B2F;   /* fond de puce / champ */
  --slate-50:   #1E2326;   /* surface douce */
  --paper:      #1A1E21;   /* cartes */
  --canvas:     #0E1216;   /* fond de page (assombri : les cartes s'en détachent) */

  /* Sémantique — recalibrée pour rester lisible sur fond sombre */
  --green-500:  #22C77E;
  --green-50:   #0E2A1E;
  --red-500:    #FF5F53;
  --red-50:     #2E1614;
  --amber-500:  #FFB020;
  --amber-50:   #2E2210;
  --info-500:   #17C3CE;   /* clin d'œil au teal Vinted, en accent secondaire */
  --info-50:    #0A2A2C;
  --violet-500: #9B7CFF;
  --violet-50:  #201A3B;

  /* Le code réclamait des nuances qui n'existaient pas : bordures (-100/-200) et texte
     (-600/-700). Sans elles, `color: var(--green-700)` était INVALIDE AU CALCUL — la
     déclaration sautait en silence et le texte reprenait la couleur héritée, sans la
     moindre erreur en console. Comme pour --slate-*, l'échelle est INVERSÉE ici : un
     « -700 » doit être CLAIR pour se lire sur un fond sombre teinté. */
  --green-100: #12341F;  --green-200: #1B4A2D;
  --green-600: #4ED79A;  --green-700: #7BE7B8;
  --red-100:   #3A1B18;  --red-200:   #4E2420;
  --red-600:   #FF8078;  --red-700:   #FFA39D;
  --amber-200: #52401A;  --amber-600: #FFC14D;
  --red:       var(--red-500);

  /* Surfaces & bordures */
  --bg:         var(--canvas);
  --surface:    var(--paper);
  --surface-2:  var(--slate-50);
  --border:     #2A2F33;
  --border-2:   #363D42;

  /* Typo — Inter, la plus proche de la typographie Vinted */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-body);

  /* Rayons — Vinted est généreux en arrondis */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Ombres — sur fond sombre une ombre se voit peu : on la double d'un liseré clair */
  --sh-xs: 0 1px 2px rgba(0,0,0,.40);
  --sh-sm: 0 2px 8px rgba(0,0,0,.44), 0 1px 2px rgba(0,0,0,.30);
  --sh-md: 0 8px 26px -8px rgba(0,0,0,.62), 0 3px 8px -4px rgba(0,0,0,.44);
  --sh-lg: 0 22px 50px -16px rgba(0,0,0,.74), 0 8px 18px -10px rgba(0,0,0,.52);
  --sh-blue: 0 14px 34px -12px rgba(46,143,255,.55);
  --sh-glow: 0 0 0 4px rgba(46,143,255,.16);

  /* Dégradés de marque. Un APLAT d'azur sur fond sombre paraît mort : l'œil n'a aucun
     relief à accrocher. Il faut un vrai écart entre le premier et le dernier stop —
     `blue-500 -> blue-600` (#2E8FFF -> #1B7AF0) sont si proches que le dégradé ne se
     voyait pas, d'où une bande finale parfaitement plate. */
  /* RÈGLE : un dégradé qui PORTE DU TEXTE ne doit jamais contenir de stop plus clair
     que #2E8FFF. Du blanc sur #2E8FFF plafonne déjà à 3,24:1 ; un stop à #5AA9FF le
     fait tomber à 2,46 et #7FBEFF à 1,96. On part donc de l'aplat d'origine et on
     descend : le pire cas reste celui d'avant, et le reste de la surface s'améliore. */
  --grad-brand: linear-gradient(135deg, #2E8FFF 0%, #1F7BEB 52%, #1463CC 100%);
  --grad-band:  linear-gradient(145deg, #2E8FFF 0%, #1B7AF0 30%, #1463CC 68%, #0F4D9E 100%);
  /* Variante PROFONDE, pour les surfaces qui portent du TEXTE PETIT (bulles de message
     et leur horodatage à 10,9 px) : #2E8FFF plafonne à 3,24:1, insuffisant à cette taille. */
  --grad-brand-deep: linear-gradient(135deg, #1463CC 0%, #0F4D9E 100%);
  /* ⚠️ --grad-dot est CLAIR : réservé aux pastilles SANS TEXTE (points de radar, puce
     de fil non lu, point de frise). Y poser du texte blanc donne 1,96:1. */
  --grad-dot:   linear-gradient(140deg, #7FBEFF, #2E8FFF);
  --grad-soft:  linear-gradient(140deg, var(--blue-100), var(--blue-50));
  /* Voile de lumière posé EN HAUT d'une surface. Arrêté en pixels et non en %, pour
     que l'effet soit identique sur une carte courte et sur une carte longue. */
  --sheen: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,0) 130px);

  /* Lueurs — la marque « respire » au lieu d'être posée à plat sur le fond. */
  --glow-xs: 0 4px 14px -5px rgba(46,143,255,.50);
  --glow-sm: 0 10px 26px -10px rgba(46,143,255,.52);
  --glow-md: 0 18px 46px -16px rgba(46,143,255,.58);
  --glow-lg: 0 36px 96px -28px rgba(46,143,255,.55);
  /* Arête claire sur le bord supérieur : c'est elle qui « décolle » une surface du fond. */
  --edge-light: inset 0 1px 0 rgba(255,255,255,.18);

  --ring: 0 0 0 4px rgba(46,143,255,.34);
  --maxw: 1200px;
  --header-h: 70px;
  --sidebar-w: 256px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ------------------------------ Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Le fond de base vit sur <html>, PAS sur <body>. C'est la condition pour que les
   voiles d'aurore — des pseudo-éléments de <body> en z-index négatif — se voient :
   un fond peint sur <body> couvrirait ses propres pseudo-éléments, et l'animation
   serait invisible sans la moindre erreur. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  background-color: #0A0D10;
  background-image: linear-gradient(180deg, #151C25 0%, #0E1216 44%, #0A0D10 100%);
  background-attachment: fixed; }
body {
  font-family: var(--font-body);
  background: transparent;          /* le fond est sur <html>, voir plus haut */
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ── Les aurores ────────────────────────────────────────────────────────────
   Deux voiles de lumière, en mouvement lent et DÉSYNCHRONISÉ (34 s et 46 s, un
   cycle qui ne se referme jamais au même moment) : l'œil ne doit jamais pouvoir
   anticiper le motif, sinon le fond devient une animation qu'on regarde au lieu
   d'une ambiance qu'on ressent.

   On n'anime QUE `transform`. C'est, avec `opacity`, la seule propriété que le
   compositeur joue sans repeindre : animer la position d'un dégradé ferait
   recalculer tout l'écran à chaque image, sur une surface qui fait la fenêtre. */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  will-change: transform;
}
body::before {
  top: -28vh; left: -18vw; right: -18vw; height: 96vh;
  background:
    radial-gradient(42% 48% at 24% 34%, rgba(46,143,255,.22), transparent 68%),
    radial-gradient(38% 44% at 72% 16%, rgba(124,92,245,.17), transparent 66%);
  animation: aurore-haut 34s ease-in-out infinite alternate;
}
body::after {
  bottom: -32vh; left: -22vw; right: -22vw; height: 88vh;
  background:
    radial-gradient(40% 46% at 70% 60%, rgba(90,169,255,.14), transparent 66%),
    radial-gradient(34% 40% at 22% 76%, rgba(124,92,245,.12), transparent 64%);
  animation: aurore-bas 46s ease-in-out infinite alternate;
}
@keyframes aurore-haut {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.14); }
}
@keyframes aurore-bas {
  from { transform: translate3d(3%, 2%, 0) scale(1.1); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1); }
}
/* Un fond qui bouge peut déclencher des nausées : on le fige pour qui l'a demandé
   à son système. Et à l'impression, ces voiles n'ont rien à faire sur le papier. */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}
@media print {
  body::before, body::after { display: none; }
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
/* Le repère de focus était un `box-shadow` — donc écrasé par la PREMIÈRE règle qui
   posait une ombre sur le même élément (bouton, puce, CTA de la barre latérale), et
   `outline: none` restait, lui, actif : plus aucun repère au clavier. Un `outline` ne
   peut être écrasé par aucune lueur, et il suit la forme de l'élément. */
:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: rgba(46,143,255,.32); color: #fff; }

/* Scrollbar — sombre, discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------ Typo ------------------------------------ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--ink);
  text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Plus un caractère est grand, plus l'espacement paraît large : on resserre le titre
   principal davantage que les autres niveaux. C'est de la correction OPTIQUE, pas du goût. */
h1 { letter-spacing: -.034em; }
/* Un titre qui contient une icône : icône À GAUCHE du texte, alignée (les svg
   étant en display:block par défaut, ils passeraient sinon au-dessus du titre). */
h1:has(> svg), h2:has(> svg), h3:has(> svg), h4:has(> svg) { display: flex; align-items: center; gap: 8px; }
h1:has(> svg) > svg, h2:has(> svg) > svg, h3:has(> svg) > svg, h4:has(> svg) > svg { flex: none; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; }
p { color: var(--slate-600); }
strong { font-weight: 700; color: var(--ink); }
small { font-size: .82rem; }

/* ------------------------------ Layout utils ---------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.container-wide { max-width: 1320px; }
.section { padding-block: clamp(44px, 5.2vw, 78px); }
/* Filet de séparation qui s'éteint sur les bords : il sépare sans couper la page en deux. */
.rule-fade { height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--border-2) 18%, var(--border-2) 82%, transparent); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.center { display: flex; align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.muted { color: var(--slate-500); }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.full { width: 100%; }

/* Couleurs sémantiques rapides.
   `.c-blue` est la couleur de MARQUE en texte : sur fond sombre elle vise le
   400 (clair), et non le 600 comme en thème clair — sinon elle disparaît. */
.c-blue   { color: var(--blue-400); }
.c-green  { color: var(--green-500); }
.c-red    { color: var(--red-500); }
.c-amber  { color: var(--amber-500); }
.c-info   { color: var(--info-500); }
.c-ink    { color: var(--ink); }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-400);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad-dot); border-radius: 2px; }

/* Gradients texte — on reste dans les azurs CLAIRS : sur fond sombre, finir sur
   un bleu foncé (700/800/900) rendrait la fin du mot illisible. */
.grad-text {
  background: linear-gradient(100deg, var(--blue-400), var(--blue-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Reveal au scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Animations clés */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
/* L'onde était un box-shadow animé : le navigateur REPEINT l'élément à chaque image.
   Même rendu via un anneau en ::after animé en transform+opacity, que le compositeur
   gère seul, sans repeindre. */
@keyframes pulse-ring { 0% { transform: translate(-50%,-50%) scale(1); opacity: .35; } 70% { transform: translate(-50%,-50%) scale(3.6); opacity: 0; } 100% { transform: translate(-50%,-50%) scale(3.6); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
/* `top` animé = MISE EN PAGE recalculée à chaque image. translateY fait la même
   chose sur le seul compositeur. (Le parent doit être en position: relative.) */
@keyframes scan { 0% { transform: translateY(0); } 100% { transform: translateY(var(--scan-h, 100px)); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ticker { to { transform: translateX(-50%); } }

.spin { animation: spin 1s linear infinite; }