/* =============================================================
   SERVICE CLIENT IA — DESIGN TOKENS
   Direction : Atelier éditorial (cream × ink × Hermès orange)
   Mono-accent : --color-klein (bright) + --color-klein-deep (dark)
   À importer en premier dans toutes les pages.
   ============================================================= */

/* --- Polices : Fraunces (display) + Geist (corps & mono) ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* =============================================================
     COULEURS
     ============================================================= */
  --color-cream:           #F4EDE2;  /* fond principal */
  --color-cream-deep:      #ECE2D2;  /* surfaces subtiles */
  --color-ink:             #14130F;  /* texte principal, jamais #000 */
  --color-klein:           #E85D1A;  /* orange Hermès — fonds, gros chiffres signature */
  --color-klein-deep:      #C44A0E;  /* orange burnt — hovers, accents texte < 18px */
  --color-stone:           #8A857C;  /* texte secondaire */
  --color-stone-light:     #B5B0A6;  /* bordures discrètes */

  /* surlignages translucides */
  --highlight-klein:       rgba(232, 93, 26, 0.20);

  /* =============================================================
     TYPOGRAPHIE
     ============================================================= */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body:    "Geist", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  --font-mono:    "Geist Mono", "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* échelle typographique — fluide via clamp(min, fluid, max) */
  --text-eyebrow:  0.75rem;                            /* 12 px — labels */
  --text-xs:       0.8125rem;                          /* 13 px */
  --text-sm:       0.9375rem;                          /* 15 px */
  --text-base:     1.0625rem;                          /* 17 px — corps */
  --text-lg:       1.25rem;                            /* 20 px — lead */
  --text-xl:       clamp(1.5rem, 2vw, 1.75rem);
  --text-2xl:      clamp(1.875rem, 2.5vw, 2.25rem);
  --text-3xl:      clamp(2.25rem, 3vw, 3rem);
  --text-4xl:      clamp(2.75rem, 4vw, 4rem);
  --text-5xl:      clamp(3.5rem, 5vw, 5.5rem);
  --text-display:  clamp(4rem, 8vw, 7.5rem);           /* hero uniquement */

  /* line heights */
  --leading-display:  0.95;
  --leading-tight:    1.05;
  --leading-snug:     1.15;
  --leading-normal:   1.45;
  --leading-body:     1.6;
  --leading-relaxed:  1.75;

  /* letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;  /* labels capitales */

  /* =============================================================
     ESPACEMENTS (4px-based)
     ============================================================= */
  --space-1:  0.25rem;   /* 4 px */
  --space-2:  0.5rem;    /* 8 px */
  --space-3:  0.75rem;   /* 12 px */
  --space-4:  1rem;      /* 16 px */
  --space-5:  1.25rem;   /* 20 px */
  --space-6:  1.5rem;    /* 24 px */
  --space-8:  2rem;      /* 32 px */
  --space-10: 2.5rem;    /* 40 px */
  --space-12: 3rem;      /* 48 px */
  --space-16: 4rem;      /* 64 px */
  --space-20: 5rem;      /* 80 px */
  --space-24: 6rem;      /* 96 px */
  --space-32: 8rem;      /* 128 px */
  --space-40: 10rem;     /* 160 px */

  /* =============================================================
     LAYOUT
     ============================================================= */
  --container-max:    1240px;
  --container-narrow:  880px;
  --container-text:    680px;
  --gutter-mobile:    1.25rem;
  --gutter-desktop:   2rem;

  /* =============================================================
     TRAITS, RAYONS, TRANSITIONS
     ============================================================= */
  --hairline:       1px solid var(--color-ink);
  --hairline-soft:  1px solid var(--color-stone);
  --hairline-cream: 1px solid var(--color-cream-deep);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  450ms;
}

/* =============================================================
   RESET MINIMAL
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background-color: var(--color-cream);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

::selection {
  background-color: var(--color-klein);
  color: var(--color-cream);
}

/* =============================================================
   TYPOGRAPHIE — CLASSES DE BASE
   ============================================================= */

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 500;
  font-variation-settings: "opsz" 48;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
}

p {
  line-height: var(--leading-body);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* italique d'emphase dans les titres — actif via Fraunces */
.display em,
h1 em, h2 em, h3 em,
.h1 em, .h2 em, .h3 em {
  font-style: italic;
  font-feature-settings: "ss01" 1;
}

/* eyebrow (label de section) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 500;
}

/* surlignages dans le corps de texte */
.highlight        { background-color: var(--highlight-klein); padding: 0 0.15em; }

/* =============================================================
   COMPOSANTS
   ============================================================= */

/* --- CTA primaire ----------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-md);
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.cta--primary {
  background-color: var(--color-klein);
  color: var(--color-cream);
}

.cta--primary:hover {
  background-color: var(--color-klein-deep);
}

.cta--primary:active {
  transform: translateY(1px);
}

/* --- CTA fantôme (ghost / soulignement) ------------------ */
.cta--ghost {
  background-color: transparent;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
  padding: var(--space-2) 0;
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-size: var(--text-base);
}

.cta--ghost:hover {
  color: var(--color-klein-deep);
  border-color: var(--color-klein-deep);
}

/* --- Liens texte ------------------------------------------ */
.link {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-klein-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-out);
}

.link:hover {
  color: var(--color-klein-deep);
}

/* --- Sections --------------------------------------------- */
.section {
  padding: var(--space-24) var(--gutter-desktop);
}

.section--tight {
  padding: var(--space-16) var(--gutter-desktop);
}

.section--inverted-klein {
  background-color: var(--color-klein);
  color: var(--color-cream);
}

.section--inverted-klein .eyebrow,
.section--inverted-klein h1,
.section--inverted-klein h2,
.section--inverted-klein h3 {
  color: var(--color-cream);
}

.section--inverted-ink {
  background-color: var(--color-ink);
  color: var(--color-cream);
}

.section--inverted-ink .eyebrow,
.section--inverted-ink h1,
.section--inverted-ink h2,
.section--inverted-ink h3 {
  color: var(--color-cream);
}

/* --- Containers ------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.container--text {
  max-width: var(--container-text);
  margin: 0 auto;
}

/* --- Filets horizontaux ----------------------------------- */
.rule {
  border: none;
  border-top: var(--hairline);
  margin: 0;
}

.rule--soft {
  border-top: var(--hairline-soft);
}

/* --- Numérotation de section ------------------------------ */
.section-number {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: currentColor;
  margin-bottom: var(--space-12);
}

.section-number::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: currentColor;
  opacity: 0.3;
}

/* --- Chiffres mis en avant -------------------------------- */
.figure {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-display);
  font-weight: 500;
  color: var(--color-klein);
  font-variation-settings: "opsz" 96;
}


/* =============================================================
   RESPONSIVE — ajustements mobile
   ============================================================= */
@media (max-width: 768px) {
  .section {
    padding: var(--space-16) var(--gutter-mobile);
  }

  .section--tight {
    padding: var(--space-12) var(--gutter-mobile);
  }

  .section-number {
    margin-bottom: var(--space-8);
  }
}

/* =============================================================
   ACCESSIBILITÉ
   ============================================================= */
:focus-visible {
  outline: 2px solid var(--color-klein);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}