/* ═══════════════════════════════════════════════════════════════
   GRANDIR EN CONSCIENCE — Design Tokens
   Direction artistique : HUD techno-spirituel, bleu électrique cosmique
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Tomorrow:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Italianno&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  /* ───────────────────────────────────────────
     COLOR — FONDS (du plus sombre au plus profond)
     ─────────────────────────────────────────── */
  --cosmic-void:        #03060F;   /* noir cosmique presque absolu */
  --deep-space:         #060B1F;   /* fond principal des sections */
  --midnight-blue:      #0A1535;   /* cards et conteneurs */
  --abyssal:            #0F1E45;   /* gradient de profondeur */

  /* ───────────────────────────────────────────
     COLOR — BLEUS PRINCIPAUX (l'âme du site)
     ─────────────────────────────────────────── */
  --electric-blue:      #0066FF;   /* bleu signature, CTA, accents forts */
  --cyber-blue:         #0094FF;   /* hover, focus, plus lumineux */
  --azure-glow:         #00C8FF;   /* glow, highlights, bordures */
  --celeste:            #5DD9FF;   /* particules, liens, citations */

  /* ───────────────────────────────────────────
     COLOR — ACCENTS SACRÉS (touches rares)
     ─────────────────────────────────────────── */
  --lotus-cyan:         #7FE7FF;   /* aura douce, halo de lotus */
  --violet-cosmic:      #6B4FFF;   /* anges, chakras hauts (rare) */
  --gold-particle:      #FFB840;   /* parcimonieux, 1-2 par page max */

  /* ───────────────────────────────────────────
     COLOR — TEXTE
     ─────────────────────────────────────────── */
  --text-primary:       #E8F1FF;   /* blanc bleuté — corps de texte */
  --text-secondary:     #94B0D9;   /* bleu-gris doux — sous-titres */
  --text-muted:         #5C7299;   /* légendes, mentions discrètes */
  --text-glow:          #00C8FF;   /* mots-clés, titres importants */

  /* ───────────────────────────────────────────
     COLOR — LIGNES & STRUCTURES HUD
     ─────────────────────────────────────────── */
  --grid-line:          rgba(0, 200, 255, 0.08);   /* grille de fond */
  --border-glow:        rgba(0, 200, 255, 0.25);   /* bordures cards */
  --border-active:      rgba(0, 200, 255, 0.6);    /* bordures hover */
  --hud-line:           rgba(125, 231, 255, 0.4);  /* lignes décoratives */

  /* ───────────────────────────────────────────
     SEMANTIC COLOR ALIASES
     ─────────────────────────────────────────── */
  --bg:                 var(--deep-space);
  --bg-card:            rgba(10, 21, 53, 0.6);
  --bg-elevated:        var(--midnight-blue);
  --fg:                 var(--text-primary);
  --fg-muted:           var(--text-secondary);
  --fg-faint:           var(--text-muted);
  --accent:             var(--azure-glow);
  --accent-strong:      var(--electric-blue);
  --link:               var(--celeste);

  /* ───────────────────────────────────────────
     TYPE — FAMILIES
     ─────────────────────────────────────────── */
  --font-display:       'Tomorrow', 'Space Grotesk', system-ui, sans-serif;
  --font-serif:         'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-script:        'Italianno', 'Cormorant Garamond', cursive;
  --font-mono:          'JetBrains Mono', 'Space Mono', ui-monospace, monospace;

  /* ───────────────────────────────────────────
     TYPE — FLUID SCALE
     ─────────────────────────────────────────── */
  --fs-hero:            clamp(48px, 7vw, 96px);     /* H1 hero */
  --fs-h1:              clamp(40px, 5vw, 72px);
  --fs-h2:              clamp(32px, 4vw, 56px);
  --fs-h3:              clamp(22px, 2.4vw, 32px);
  --fs-h4:              20px;
  --fs-body:            18px;
  --fs-body-sm:         16px;
  --fs-meta:            13px;
  --fs-tiny:            11px;
  --fs-quote:           clamp(28px, 3.5vw, 40px);   /* italianno */

  /* ───────────────────────────────────────────
     TYPE — TRACKING (letter-spacing)
     ─────────────────────────────────────────── */
  --tracking-display:   0.05em;
  --tracking-h3:        0.15em;
  --tracking-meta:      0.25em;
  --tracking-mono:      0.2em;
  --tracking-loose:     0.3em;

  /* ───────────────────────────────────────────
     TYPE — LINE HEIGHTS
     ─────────────────────────────────────────── */
  --lh-tight:           1.1;
  --lh-snug:            1.3;
  --lh-normal:          1.5;
  --lh-relaxed:         1.75;     /* corps serif, lecture longue */

  /* ───────────────────────────────────────────
     SPACING (8px base, fibonacci-ish)
     ─────────────────────────────────────────── */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;
  --space-9:            96px;
  --space-10:           128px;

  /* ───────────────────────────────────────────
     RADII (tech-square — quasi nul)
     ─────────────────────────────────────────── */
  --radius-none:        0;
  --radius-xs:          2px;       /* maximum acceptable sur cards */
  --radius-sm:          4px;       /* exception : pills, badges */
  --radius-pill:        9999px;    /* exception : tags arrondis */

  /* ───────────────────────────────────────────
     SHADOWS / GLOWS (la lumière sculpte la hiérarchie)
     ─────────────────────────────────────────── */
  --glow-xs:            0 0 12px rgba(0, 200, 255, 0.15);
  --glow-sm:            0 0 24px rgba(0, 200, 255, 0.20);
  --glow-md:            0 0 40px rgba(0, 200, 255, 0.25);
  --glow-lg:            0 0 60px rgba(0, 200, 255, 0.35);
  --glow-xl:            0 0 100px rgba(0, 200, 255, 0.45);
  --glow-cta:           0 0 30px rgba(0, 102, 255, 0.5);
  --glow-cta-hover:     0 0 50px rgba(0, 102, 255, 0.75);
  --glow-lotus:         0 0 50px rgba(127, 231, 255, 0.6);
  --glow-violet:        0 0 40px rgba(107, 79, 255, 0.5);
  --glow-gold:          0 0 30px rgba(255, 184, 64, 0.6);

  /* ───────────────────────────────────────────
     MOTION
     ─────────────────────────────────────────── */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:           0.2s;
  --dur-base:           0.3s;
  --dur-slow:           0.6s;
  --dur-reveal:         0.8s;

  /* ───────────────────────────────────────────
     LAYOUT
     ─────────────────────────────────────────── */
  --container-max:      1280px;
  --container-pad:      clamp(24px, 5vw, 60px);
  --hud-grid-size:      60px;
}

/* ═══════════════════════════════════════════════════════════════
   BASE — page, body, gradient global, grille HUD
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(ellipse at top,    var(--midnight-blue) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, var(--abyssal) 0%, transparent 70%),
    var(--cosmic-void);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grille HUD — désactivée (esthétique douce sacrée) */
.hud-grid--legacy::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--hud-grid-size) var(--hud-grid-size);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SEMANTIC TYPE — h1..h4, p, blockquote, code, .meta, .quote
   ═══════════════════════════════════════════════════════════════ */

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-hero);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-h3);
  text-transform: uppercase;
  color: var(--azure-glow);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

p, .body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}

p.lede {
  font-size: 22px;
  font-style: italic;
  color: var(--text-secondary);
}

blockquote, .quote {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.2;
  color: var(--celeste);
  margin: var(--space-7) 0;
  padding: 0;
  border: none;
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--azure-glow);
}

/* HUD meta line — "// 003 // Thérapie quantique //" */
.meta-hud {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--azure-glow);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.meta-hud::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

a {
  color: var(--celeste);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
a:hover {
  color: var(--azure-glow);
  border-bottom-color: var(--azure-glow);
}

::selection {
  background: rgba(0, 200, 255, 0.3);
  color: #fff;
}