/* ============================================================================
   DealUp — style.css
   Fondations : reset, design tokens, typographie, layout, header, footer,
   accueil, illustrations. Les composants réutilisables vivent dans
   components.css, les adaptations d'écran dans responsive.css.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Une seule famille : noir, graphite, blanc. Les noms « violet » et « sky »
     sont conservés pour les composants existants ; leurs valeurs sont
     désormais neutres — le blanc est la seule couleur d'action. */
  --violet-50:  #151515;
  --violet-100: #1b1b1b;
  --violet-200: #2a2a2a;
  --violet-300: #3a3a3a;
  --violet-400: #8a8a92;
  --violet-500: #f5f5f7;
  --violet-600: #ffffff;
  --violet-700: #ffffff;

  --sky-50:  #151618;
  --sky-100: #1b1d21;
  --sky-200: #2a2d33;
  --sky-300: #4a4f59;
  --sky-400: #8fa3bd;
  --sky-500: #b9c6d8;

  /* Teintes sémantiques (état actif, alerte, favori), atténuées pour le sombre */
  --mint-100: rgba(79, 173, 161, .14);
  --mint-300: #6fc9bb;
  --mint-500: #5fc9b3;
  --mint-700: #8fe0d0;
  --sand-100: rgba(201, 162, 92, .14);
  --sand-300: #d9b77a;
  --sand-500: #e7c08a;
  --rose-100: rgba(201, 88, 125, .14);
  --rose-500: #f1a2bd;

  /* Encre : du blanc au gris, sur fond sombre */
  --ink-900: #f5f5f7;
  --ink-800: #e6e6ea;
  --ink-700: #cfcfd5;
  --ink-600: #b0b0b8;
  --ink-500: #9a9aa3;
  --ink-400: #7c7c85;
  --ink-300: #5a5a62;

  /* Nuit : les visuels DealUp sont sombres, ils vivent dans ces cadres */
  --navy-950: #070a16;
  --navy-900: #0b1023;
  --navy-800: #121a33;
  --navy-line: rgba(160, 170, 255, .18);

  /* Surfaces */
  --bg:            #0a0a0a;
  --bg-soft:       #0d0d0d;
  --surface:       #111111;
  --surface-muted: #171717;
  --line:          rgba(255, 255, 255, .08);
  --line-strong:   rgba(255, 255, 255, .14);
  --glass:         rgba(17, 17, 17, .72);
  --glass-strong:  rgba(17, 17, 17, .9);
  --glass-line:    rgba(255, 255, 255, .1);

  /* Dégradés signature : très discrets */
  --grad-brand: linear-gradient(135deg, #ffffff 0%, #d9d9de 100%);
  --grad-soft:  linear-gradient(135deg, #1e1e1e 0%, #161616 100%);
  --grad-live:  linear-gradient(135deg, #5fc9b3 0%, #8fa3bd 100%);
  --grad-hero:  radial-gradient(120% 120% at 12% 0%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 55%),
                radial-gradient(100% 100% at 92% 8%, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 58%);
  --grad-night: linear-gradient(160deg, #141b3a 0%, #0b1023 55%, #070a16 100%);

  /* Ombres profondes, une lueur blanche pour les éléments actifs */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -8px rgba(0, 0, 0, .6);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -16px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 60px -24px rgba(0, 0, 0, .8);
  --shadow-ring: 0 0 0 4px rgba(255, 255, 255, .12);
  --shadow-glow: 0 10px 30px -10px rgba(255, 255, 255, .25);
  --shadow-night: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--navy-line);

  /* Rayons */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 34px;
  --r-full: 999px;

  /* Rythme */
  --gap: 20px;
  --page-x: 28px;
  --header-h: 68px;
  --maxw: 1240px;

  /* Mouvement */
  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 260ms;
  --t-slower: 420ms;
  --ease: cubic-bezier(.22, .68, .32, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Scores (démonstration) */
  --score-excellent: #b8adff;
  --score-tresbon:   #8fbdf0;
  --score-interessant: #7fd8c4;
  --score-moyen:     #8a8a92;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(70% 45% at 0% 4%, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 58%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { color: var(--ink-900); letter-spacing: -.02em; line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.05rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem); }
h3 { font-size: 1.02rem; }

::selection { background: rgba(255, 255, 255, .22); }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--sm { width: 16px; height: 16px; stroke-width: 1.8; }
.icon--lg { width: 24px; height: 24px; }

/* ---------- 3. Accessibilité ---------- */
:focus-visible {
  outline: 2px solid var(--violet-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  background: var(--surface); color: var(--ink-900);
  padding: 10px 16px; border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); font-weight: 600;
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 4. Header ---------- */
.app-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 10, 10, .72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.app-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(10, 10, 10, .9);
  box-shadow: 0 8px 24px -20px rgba(0, 0, 0, .8);
}
.app-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--page-x);
  height: var(--header-h);
  display: flex; align-items: center; gap: 18px;
}
.app-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--r-sm); }
.logo__mark {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: var(--bg);
  box-shadow: 0 4px 12px -4px rgba(255, 255, 255, .25);
  transition: transform var(--t-slow) var(--ease-spring), box-shadow var(--t-base) var(--ease);
}
.logo__mark .icon { width: 19px; height: 19px; stroke-width: 1.7; }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); box-shadow: 0 6px 16px -4px rgba(255, 255, 255, .3); }
.logo__text {
  font-weight: 700; font-size: 1.06rem; letter-spacing: -.03em; color: var(--ink-900);
}
.logo__text span {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo--sm .logo__mark { width: 26px; height: 26px; border-radius: 8px; }
.logo--sm .logo__mark .icon { width: 15px; height: 15px; }
.logo--sm .logo__text { font-size: .92rem; }

/* Navigation desktop */
.nav { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.nav__link {
  position: relative;
  padding: 8px 13px;
  border-radius: var(--r-full);
  font-size: .875rem; font-weight: 500; color: var(--ink-500);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--ink-800); background: rgba(255, 255, 255, .06); }
.nav__link:active { transform: scale(.97); }
.nav__link.is-active { color: var(--violet-700); background: rgba(255, 255, 255, .1); font-weight: 600; }
.nav__link.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: 16px; height: 2px; border-radius: 2px;
  background: var(--grad-brand); transform: translateX(-50%);
  animation: nav-underline var(--t-slow) var(--ease) both;
}
@keyframes nav-underline { from { width: 0; opacity: 0; } to { width: 16px; opacity: 1; } }

/* ---------- 5. Layout principal ---------- */
.app-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px var(--page-x) 64px;
  outline: none;
}
.app-main:focus { outline: none; }

.view { animation: view-in var(--t-slower) var(--ease) both; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.section { margin-top: 44px; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.section__title { display: flex; align-items: center; gap: 10px; }
.section__title h2 { margin: 0; }
.section__sub { color: var(--ink-400); font-size: .875rem; margin-top: 4px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-head__text { max-width: 62ch; }
.page-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); }
.page-head p { color: var(--ink-500); margin-top: 8px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase;
  color: var(--violet-600);
}

/* ---------- 8. Footer ---------- */
.app-footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  margin-top: 40px;
}
.app-footer__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 22px var(--page-x);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.app-footer p { color: var(--ink-400); font-size: .8rem; }

/* ---------- 9. Grilles utilitaires ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--stats  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--deals  { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.grid--alerts { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.text-muted { color: var(--ink-400); }

/* ---------- 10. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}