/*
 * GEIQ56 — Global CSS
 * Child theme Ollie (labernik-geiq56)
 *
 * Ce fichier fait le pont entre les variables WordPress (--wp--preset--*)
 * générées par theme.json et les custom properties utilisées par les
 * composants CSS. Un seul endroit pour modifier un token.
 *
 * Chargement : wp_enqueue_style() dans functions.php
 */

/* ═══════════════════════════════════════════════════════════════════
   1. BRIDGE — WP preset vars → custom properties lisibles
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Couleurs brand (v10.8.0 — palette carmin mature) ──────────
     Ancienne palette framboise flashy #e30043 → remplacée par un
     rouge carmin #c41e3a, plus profond, plus institutionnel,
     meilleur contraste et plus en harmonie avec Instrument Serif
     + fonds neutres chauds. Customizer (Apparence → Personnaliser
     → Couleurs GEIQ56) peut toujours override. */
  --color-primary:       var(--wp--preset--color--primary,       #c41e3a);
  --color-primary-dark:  var(--wp--preset--color--primary-dark,  #8b1228);
  --color-primary-soft:  var(--wp--preset--color--primary-soft,  #fce4e8);

  /* ── Couleurs entités GEIQ ──────────────────────────────────── */
  --color-btp:           var(--wp--preset--color--btp,           #c41e3a);
  --color-multi:         var(--wp--preset--color--multi,         #1a171b);

  /* ── Neutrals ───────────────────────────────────────────────── */
  --color-neutral-0:     var(--wp--preset--color--neutral-0,     #ffffff);
  --color-neutral-50:    var(--wp--preset--color--neutral-50,    #f9fafb);
  --color-neutral-100:   var(--wp--preset--color--neutral-100,   #f3f4f6);
  --color-neutral-200:   var(--wp--preset--color--neutral-200,   #dbdfe4);
  --color-neutral-300:   var(--wp--preset--color--neutral-300,   #d1d5db);
  --color-neutral-400:   var(--wp--preset--color--neutral-400,   #9ca3af);
  --color-neutral-500:   var(--wp--preset--color--neutral-500,   #6b7280);
  --color-neutral-600:   var(--wp--preset--color--neutral-600,   #4b575f);
  --color-neutral-900:   var(--wp--preset--color--neutral-900,   #1a171b);

  /* ── Sémantiques ────────────────────────────────────────────── */
  --color-success:       var(--wp--preset--color--success,       #058b4f);
  --color-success-soft:  var(--wp--preset--color--success-soft,  #e6f4ed);
  --color-warning:       var(--wp--preset--color--warning,       #b45309);
  --color-warning-soft:  var(--wp--preset--color--warning-soft,  #fef3e2);
  --color-error:         var(--wp--preset--color--error,         #b42318);
  --color-error-soft:    var(--wp--preset--color--error-soft,    #fef1f0);

  /* ── Dégradés ───────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #b8002f 0%, #e30043 55%, #ff6b8a 100%);

  /* ── Typographie ────────────────────────────────────────────── */
  --font-display: var(--wp--preset--font-family--display, 'Instrument Serif', Georgia, serif);
  --font-body:    var(--wp--preset--font-family--body,    'Inter', system-ui, sans-serif);

  --font-display-size: var(--wp--preset--font-size--display, 3.5rem);
  --font-h1-size:      var(--wp--preset--font-size--h1,      2.5rem);
  --font-h2-size:      var(--wp--preset--font-size--h2,      2rem);
  --font-h3-size:      var(--wp--preset--font-size--h3,      1.5rem);
  --font-h4-size:      var(--wp--preset--font-size--h4,      1.25rem);
  --font-body-lg-size: var(--wp--preset--font-size--body-lg, 1.125rem);
  --font-body-size:    var(--wp--preset--font-size--body,    1rem);
  --font-body-sm-size: var(--wp--preset--font-size--body-sm, 0.875rem);

  /* Line-heights */
  --lh-display: 1.1;
  --lh-heading: 1.25;
  --lh-subhead: 1.3;
  --lh-card:    1.4;
  --lh-body:    1.65;
  --lh-meta:    1.55;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Espacement ─────────────────────────────────────────────── */
  --space-1:  var(--wp--preset--spacing--1,  8px);
  --space-2:  var(--wp--preset--spacing--2,  16px);
  --space-3:  var(--wp--preset--spacing--3,  24px);
  --space-4:  var(--wp--preset--spacing--4,  32px);
  --space-5:  var(--wp--preset--spacing--5,  48px);
  --space-6:  var(--wp--preset--spacing--6,  64px);
  --space-7:  var(--wp--preset--spacing--7,  96px);
  --space-8:  var(--wp--preset--spacing--8,  128px);

  /* ── Espacement des sections (v7.5.3 — single-layer padding serré) ──
     RÈGLE D'OR : le padding-block d'une section est porté UNIQUEMENT
     par .section--*, jamais par un conteneur interne. Aucune section
     ne cumule son espace avec un wrapper enfant.
     → Éditer ces tokens pour ajuster globalement le rythme vertical
       du site sans toucher au CSS composant.
     v7.5.3 : valeurs baissées d'environ 35% pour un rythme plus dense.
       Avant : section→section cumulait 112-192 px de vide.
       Après : section→section cumule 72-128 px. */
  --section-gap-hero:  clamp(60px, 7vw,  108px);   /* Hero (sous header sticky) */
  --section-gap:       clamp(36px, 4vw,   64px);   /* Bloc standard */
  --section-gap-sm:    clamp(22px, 2.4vw, 40px);   /* Bloc compact / fin de page */
  --section-gutter:    clamp(20px, 4vw,   48px);   /* Padding-inline horizontal */

  /* ── Border radius ──────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:  var(--wp--preset--shadow--sm,  0 1px 3px rgba(26,23,27,.08), 0 1px 2px rgba(26,23,27,.06));
  --shadow-md:  var(--wp--preset--shadow--md,  0 4px 12px rgba(26,23,27,.10), 0 2px 4px rgba(26,23,27,.06));
  --shadow-lg:  var(--wp--preset--shadow--lg,  0 12px 32px rgba(26,23,27,.12), 0 4px 8px rgba(26,23,27,.08));

  /* ── Layout ─────────────────────────────────────────────────── */
  --content-width: var(--wp--style--global--content-size,    720px);
  --wide-width:    var(--wp--style--global--wide-size,        1200px);

  /* ── Glassmorphism tokens ───────────────────────────────────── */
  --glass-light-bg:     rgba(255, 255, 255, .78);
  --glass-light-blur:   blur(18px) saturate(1.7);
  --glass-light-border: rgba(255, 255, 255, .58);
  --glass-light-shadow: 0 2px 18px rgba(26,23,27,.08), 0 0 0 1px rgba(255,255,255,.58), inset 0 1px 0 rgba(255,255,255,.9);

  --glass-dark-bg:     rgba(28, 24, 32, .78);
  --glass-dark-blur:   blur(18px) saturate(1.6);
  --glass-dark-border: rgba(255, 255, 255, .07);
  --glass-dark-shadow: 0 2px 18px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.06);

  /* ── Timing fonctions ───────────────────────────────────────── */
  --ease-spring:  cubic-bezier(.22, 1, .36, 1);
  --ease-out:     cubic-bezier(.16, 1, .3,  1);
  --ease-in-out:  cubic-bezier(.45, 0, .55, 1);
}


/* ═══════════════════════════════════════════════════════════════════
   2. DARK MODE overrides  [data-theme="dark"]
   Déclenché par le toggle JS (header.js) — ajout de l'attribut sur <html>
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --color-neutral-0:    #111018;
  --color-neutral-50:   #1a171b;
  --color-neutral-100:  #252028;
  --color-neutral-200:  rgba(255,255,255,.09);
  --color-neutral-300:  rgba(255,255,255,.14);
  --color-neutral-400:  rgba(255,255,255,.35);
  --color-neutral-500:  rgba(255,255,255,.45);
  --color-neutral-600:  rgba(255,255,255,.55);
  --color-neutral-900:  #f0eef1;

  --glass-light-bg:     rgba(28, 24, 32, .80);
  --glass-light-blur:   blur(20px) saturate(1.6);
  --glass-light-border: rgba(255, 255, 255, .08);
  --glass-light-shadow: 0 2px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.06);
}


/* ═══════════════════════════════════════════════════════════════════
   3. RESET MINIMAL
   ═══════════════════════════════════════════════════════════════════ */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--lh-body);
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-underline-offset: 2px;
}

/* Headings — Instrument Serif (relayé depuis theme.json) */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-card);
}

/* Focus visible accessible */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════════
   4. UTILITIES LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow {
  max-width: var(--content-width);
}

.section {
  /* v7.1.1 — homepage rejoint le système de tokens Spoke. Même clamp (56-96)
     donc rythme vertical piloté en UN SEUL endroit : --section-gap (global.css). */
  padding-block: var(--section-gap);
}

.section--alt {
  background-color: var(--color-neutral-50);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-6);
  max-width: 640px;
  margin-inline: auto;
}

.section-eyebrow {
  font-size: var(--font-body-sm-size);
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--font-h2-size));
  font-weight: var(--fw-regular);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-3);
}

.section-lead {
  font-size: var(--font-body-lg-size);
  color: var(--color-neutral-600);
  line-height: var(--lh-body);
}

/* Glow canvas (injecté par JS) */
.glow-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 767px) {
  .container {
    padding-inline: var(--space-3);
  }
  .section {
    padding-block: var(--section-gap-sm);
  }
}