/* =============================================================
   Linked Connexion — Design Tokens
   Colors, Type, Spacing, Radii, Shadows, Motion
   ============================================================= */

/* =============================================================
   Trinité typographique Fidulia (v2026-07-15)
   -------------------------------------------------------------
   • Playfair Display  → titres, chutes, citations, sous-titres
                         italiques. Serif éditorial haute-contraste.
   • Raleway           → corps, bullets, légendes, sources.
                         Sans-serif humaniste.
   • League Spartan    → chiffres display (KPIs, stats-hero).
                         Sans-serif géométrique très bold.
                         Règle : dès qu'un chiffre est mis en avant,
                         c'est League Spartan.

   Les 3 familles sont livrées en Variable Fonts (VF), un fichier
   par famille couvrant tous les weights (100 → 900).

   Sana Sans (Latinotype, achetée MyFonts) est conservée dans
   /Fonts/ comme asset dormant réactivable, mais n'est plus la
   police officielle Fidulia depuis le 2026-07-15.
   ============================================================= */

/* Google Fonts remote fallback — utile pour les artefacts partagés
   qui n'ont pas accès aux .ttf locaux (previews, exports web).
   Doit rester en tête de fichier : les @import CSS ne sont valides
   qu'avant toute autre règle. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=League+Spartan:wght@100..900&display=swap');

@font-face { font-family:'Playfair Display'; src:url('./fonts/PlayfairDisplay-VF.ttf')        format('truetype-variations'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('./fonts/PlayfairDisplay-Italic-VF.ttf') format('truetype-variations'); font-weight:400 900; font-style:italic; font-display:swap; }

@font-face { font-family:'Raleway'; src:url('./fonts/Raleway-VF.ttf')        format('truetype-variations'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('./fonts/Raleway-Italic-VF.ttf') format('truetype-variations'); font-weight:100 900; font-style:italic; font-display:swap; }

@font-face { font-family:'League Spartan'; src:url('./fonts/LeagueSpartan-VF.ttf') format('truetype-variations'); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  /* --- Brand palette ---------------------------------------- */
  --lc-bg:           #0C132A;   /* brand deep navy — dominant background */
  --lc-black:        #0C132A;   /* alias for legacy refs */
  --lc-true-black:   #000000;   /* for full-bleed photo bg */
  --lc-magenta:      #D70459;   /* primary accent */
  --lc-magenta-700:  #A60344;   /* hover/pressed */
  --lc-magenta-300:  #F25C95;   /* tints over dark */
  --lc-white:        #FFFFFF;

  /* --- Neutral scale (cool navy-tinted grey) ---------------- */
  --lc-neutral-950:  #0C132A;
  --lc-neutral-900:  #131A33;
  --lc-neutral-800:  #1B2240;
  --lc-neutral-700:  #2A3252;
  --lc-neutral-600:  #424B6D;
  --lc-neutral-500:  #6E7593;
  --lc-neutral-400:  #9FA5BD;
  --lc-neutral-300:  #C9CEDC;
  --lc-neutral-200:  #E1E4EE;
  --lc-neutral-100:  #F1F3F8;
  --lc-neutral-50:   #F8F9FC;

  /* --- Semantic surfaces (dark theme — default) ------------- */
  --bg:              var(--lc-bg);
  --bg-elevated:     var(--lc-neutral-900);
  --bg-inverse:      var(--lc-white);
  --surface-card:    var(--lc-neutral-900);
  --surface-card-light: var(--lc-white);
  --border-subtle:   rgba(255,255,255,0.08);
  --border-strong:   rgba(255,255,255,0.18);
  --border-light:    var(--lc-neutral-200);

  /* --- Semantic text ---------------------------------------- */
  --fg:              var(--lc-white);          /* primary on dark  */
  --fg-muted:        var(--lc-neutral-400);    /* secondary on dark*/
  --fg-dim:          var(--lc-neutral-500);
  --fg-inverse:      var(--lc-bg);             /* primary on light */
  --fg-inverse-muted:var(--lc-neutral-600);
  --fg-accent:       var(--lc-magenta);
  --link:            var(--lc-magenta);

  /* --- Type families (trinité Fidulia) ---------------------- */
  --font-title:     'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:      'Raleway', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-numeric:   'League Spartan', 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;

  /* Aliases legacy — préservent la compat des HTML existants.
     À terme, remplacer les usages par les 3 variables sémantiques. */
  --font-display:   var(--font-title);
  --font-serif:     var(--font-title);
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Type scale ------------------------------------------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  128px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-display: -0.01em;
  --tracking-kicker:  0.14em;   /* badges, kickers, CTAs */
  --tracking-tight:   -0.02em;

  /* --- Spacing (4px base) ----------------------------------- */
  --space-0:  0;
  --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 ------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* --- Elevation -------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.12);
  --shadow-md:  0 6px 16px -4px rgba(0,0,0,0.18);
  --shadow-lg:  0 12px 32px -8px rgba(0,0,0,0.22);
  --shadow-xl:  0 24px 64px -16px rgba(0,0,0,0.32);
  --shadow-magenta: 0 12px 40px -12px rgba(226,0,116,0.55);

  /* --- Motion ----------------------------------------------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast:  150ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;

  /* --- Layout ----------------------------------------------- */
  --container:  1200px;
  --nav-height: 72px;
}

/* =============================================================
   Semantic typography classes — trinité Playfair/Raleway/League
   ============================================================= */

.lc-display,
.lc-h1 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(48px, 8vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

.lc-h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(36px, 5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

.lc-h3 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.lc-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.lc-eyebrow,
.lc-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--lc-magenta);
}

.lc-subtitle {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.lc-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.lc-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

.lc-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* Chiffres display : League Spartan.
   Utilisation : KPIs, stats-hero, chiffres-fort de slides carrousel. */
.lc-numeric,
.lc-stat {
  font-family: var(--font-numeric);
  font-weight: 700;
  font-size: clamp(64px, 12vw, var(--fs-6xl));
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--lc-magenta);
}

.lc-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* =============================================================
   Light-section override
   ============================================================= */
.lc-on-light {
  --bg: var(--lc-white);
  --fg: var(--lc-bg);
  --fg-muted: var(--lc-neutral-600);
  --border-subtle: var(--lc-neutral-200);
  --border-strong: var(--lc-neutral-300);
  background: var(--bg);
  color: var(--fg);
}

/* =============================================================
   Selection
   ============================================================= */
::selection { background: var(--lc-magenta); color: var(--lc-white); }