/* =====================================================================
   ATELIER 360 — POLICES AUTO-HÉBERGÉES (subset FR, woff2)
   Veille web.dev « Best practices for fonts » (2022-10) + Core Web Vitals (2024-10) :
   - auto-hébergées (zéro domaine tiers) → connexion et négociation en moins ;
   - sous-ensemble limité au français → ~15-45 Ko par graisse ;
   - font-display: swap → texte visible immédiatement (pas de FOIT) ;
   - fallback métrique (size-adjust/ascent/descent) → le fallback occupe le même
     espace que la police web → CLS du swap quasi nul au moment du chargement.
   Sources : Satoshi (Fontshare Free License), Inter & JetBrains Mono (OFL).
   Voir /fonts/LICENSE.txt.
   ===================================================================== */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
/* Fallback métrique pour Satoshi : Arial recalibré pour matcher les métriques
   de Satoshi → le texte ne saute pas au moment du swap de police (anti-CLS). */
@font-face {
  font-family: 'Satoshi-Fallback';
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 98%;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
/* Fallback métrique pour Inter : la stack système tient déjà bien le rôle
   (Inter est très proche d'une sans système), ajuste léger pour le swap. */
@font-face {
  font-family: 'Inter-Fallback';
  src: local('Segoe UI') local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrainsmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrainsmono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}

/* =====================================================================
   ATELIER 360 — DESIGN TOKENS
   Direction « Vitrine Vivante » (Plan 3 validé, 25 juin 2026)
   Source de vérité couleurs/typo/espacements. Ne pas redéfinir ailleurs.
   ===================================================================== */

:root {
  /* ---- Fonds (dark premium) ---- */
  --bg:            #06070a;   /* fond de page              */
  --bg-soft:       #090b11;   /* sections alternées         */
  --bg-elevated:   #0c0e15;   /* cartes                     */
  --bg-elevated-2: #11141d;   /* cartes survol / 2e niveau  */
  --surface-glass: rgba(255, 255, 255, .035);
  --surface-glass-strong: rgba(255, 255, 255, .06);

  /* ---- Bordures ---- */
  --border:        rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --border-indigo: rgba(99, 102, 241, .35);

  /* ---- Couleurs de marque ---- */
  --indigo:        #4f46e5;   /* PRIMAIRE — Économie / CTA  */
  --indigo-bright: #6366f1;
  --indigo-soft:   rgba(79, 70, 229, .14);
  --violet:        #7c3aed;   /* SECONDAIRE — Accessibilité */
  --violet-soft:   rgba(124, 58, 237, .14);
  --gold:          #ca8a04;   /* SIGNATURE — Souveraineté (parcimonie) */
  --gold-soft:     rgba(202, 138, 4, .12);
  --cyan:          #22d3ee;   /* accent tertiaire (logo) — dosé */

  /* ---- Texte ---- */
  --text:        #f1f5f9;     /* slate-100 — titres        */
  --text-body:   #cbd5e1;     /* slate-300 — corps         */
  --text-muted:  #94a3b8;     /* slate-400 — secondaire    */
  --text-faint:  #64748b;     /* slate-500 — légendes      */

  /* ---- Dégradés ---- */
  --grad-brand:   linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  --grad-text:    linear-gradient(120deg, #a5b4fc 0%, #c4b5fd 50%, #818cf8 100%);
  --grad-aurora:  radial-gradient(60% 50% at 50% 0%, rgba(79,70,229,.20) 0%, rgba(124,58,237,.08) 45%, transparent 75%);
  --grad-card:    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 100%);

  /* ---- Glows & ombres ---- */
  --glow-indigo:  0 0 0 1px rgba(99,102,241,.35), 0 8px 40px -8px rgba(79,70,229,.55);
  --glow-violet:  0 0 0 1px rgba(124,58,237,.35), 0 8px 40px -8px rgba(124,58,237,.50);
  --glow-gold:    0 0 0 1px rgba(202,138,4,.35),  0 8px 40px -8px rgba(202,138,4,.40);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.4);
  --shadow-md:    0 8px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:    0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-card:  0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.8);

  /* ---- Typographie ----
     Police web → fallback métrique (anti-CLS au swap) → stack système final. */
  --font-display: 'Satoshi', 'Satoshi-Fallback', 'Inter', 'Inter-Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', 'Inter-Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Échelle typographique fluide (clamp: mobile → desktop) */
  --fs-display: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  --fs-h1:      clamp(2.2rem, 1.5rem + 3.2vw, 3.8rem);
  --fs-h2:      clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem);
  --fs-h3:      clamp(1.3rem, 1.05rem + 1vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, .98rem + .5vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      .9375rem;    /* 15px */
  --fs-xs:      .8125rem;    /* 13px */

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.65;

  /* ---- Espacements ---- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);  /* respiration verticale des sections */

  /* ---- Rayons ---- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---- Layout ---- */
  --container:     1200px;
  --container-narrow: 880px;
  --gutter:        clamp(1.1rem, .5rem + 2vw, 2.5rem);
  --header-h:      72px;

  /* ---- Transitions ---- */
  --t-fast:  .15s ease;
  --t-base:  .28s cubic-bezier(.4, 0, .2, 1);
  --t-slow:  .5s  cubic-bezier(.4, 0, .2, 1);

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-concierge: 200;
  --z-modal: 300;

  color-scheme: dark;
}