/* ─── Reset ──────────────────────────────────────────────────────────────── */

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

/* ─── Fonts ──────────────────────────────────────────────────────────────── */
/* Polices commerciales du Figma (fichiers .otf fournis dans
   public/assets/fonts/). Pile de fallback Helvetica Neue / Arial le temps du
   chargement. */

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/assets/fonts/HelveticaNeueLTStd-Roman.otf") format("opentype");
  font-weight: 400; /* 55 Roman */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/assets/fonts/HelveticaNeueLTStd-Md.otf") format("opentype");
  font-weight: 500; /* 65 Medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Konkret Grotesk Pro";
  src: url("/assets/fonts/KonkretGroteskPro-Medium.otf") format("opentype");
  font-weight: 500; /* Medium (chiffres du compteur) */
  font-style: normal;
  font-display: swap;
}

/* ─── Design tokens (extraits du Figma BailSensei) ───────────────────────── */

:root {
  /* Colors */
  --bs-red:       #dc2121; /* primary/primary-500 : CTA + accents */
  --bs-ink:       #050505; /* secondary/background-500 : texte principal sur fond clair */
  --bs-gray:      #b2b2b2; /* secondary/background-100 : liens + textes secondaires */
  --bs-off-white: #e6e6e6; /* secondary/background-50 : texte adouci sur fond noir */
  --bs-white:     #ffffff;
  --bs-black:     #000000; /* fond des blocs sombres (hero, programs, cta...) */
  --bs-bg:        #ffffff; /* fond de page : les blocs noirs sont poses dessus */

  /* Typography */
  --bs-font-base: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --bs-font-num: "Konkret Grotesk Pro", "Helvetica Neue LT Std",
    "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --bs-radius: 24px;   /* rayon des blocs (cartes sombres) */
  --bs-inset: 24px;    /* marge des blocs par rapport aux bords de l'ecran */
  --bs-content-max: 1632px; /* largeur max du CONTENU (1920 - 2x144 de gouttiere) */
  --bs-section-gap: 240px;  /* respiration verticale entre sections (valeur maquette) */
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

html {
  background-color: var(--bs-bg);
  color: var(--bs-ink);
  font-family: var(--bs-font-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  interpolate-size: allow-keywords;
  /* scrollbar toujours affichee : evite le decalage horizontal du contenu */
  overflow-y: scroll;
}

body {
  min-height: 100vh;
  background-color: var(--bs-bg);
}

/* Toute la page est plafonnee a 2560px (2K) et centree : au-dela, les blocs
   ne s'etendent plus, des marges noires apparaissent sur les cotes. */
.page {
  max-width: 2560px;
  margin: 0 auto;
}

/* Contenu centre : le fond (page claire ou bloc noir) s'etend en largeur, mais
   le contenu reste cape a --bs-content-max et centre. Au-dela, ce sont les
   marges/le bloc qui grandissent, jamais le contenu. Sous cette largeur, une
   gouttiere de 24px de chaque cote evite que le contenu touche les bords. */
.container {
  width: min(100% - 48px, var(--bs-content-max));
  margin-inline: auto;
}

/* ─── Animation des CTA (survol) ─────────────────────────────────────────── */
/* Classe utilitaire posee sur les boutons rouges : legere elevation + halo
   rouge au survol. Le !important sur la transition prime sur les transitions
   scopees des composants pour que le transform s'anime bien. */
.btn-primary {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    filter 0.2s ease !important;
  will-change: transform;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(220, 33, 33, 0.5);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px -8px rgba(220, 33, 33, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary {
    transition: none !important;
  }
  .btn-primary:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Bloc noir partage : enveloppe les sections sombres consecutives dans un seul
   bloc continu (pas de coupure blanche entre elles). Fond pleine largeur inset
   de 24px, coins arrondis ; les sections a l'interieur sont empilees avec un
   ecart constant. Chaque section interne reste transparente et cape son propre
   contenu via .container. */
.darkblock {
  margin-inline: var(--bs-inset);
  /* Mesures exactes du Figma (node 2340:570) : padding 180px, gap 420px. */
  padding: 180px 0;
  border-radius: var(--bs-radius);
  background: var(--bs-black);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 420px;
}
@media (max-width: 1280px) {
  .darkblock {
    padding: 130px 0;
    gap: 280px;
  }
}
@media (max-width: 768px) {
  .darkblock {
    margin-inline: 12px;
    padding: 80px 0;
    gap: 160px;
  }
}

/* Rythme vertical : les sections sont empilees avec un ecart constant
   (respiration de la maquette). Le gap ne s'applique qu'entre sections, pas
   avant la premiere. */
main {
  display: flex;
  flex-direction: column;
  gap: var(--bs-section-gap);
}
@media (max-width: 1024px) {
  main {
    gap: 160px;
  }
}
@media (max-width: 768px) {
  main {
    gap: 120px;
  }
}

/* Accessible aux lecteurs d'ecran, invisible a l'ecran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

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

/* Ancres du menu : cible decalee sous les blocs sticky eventuels. */
[id] {
  scroll-margin-top: calc(var(--bs-inset) + 24px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ─── Reveal au scroll (micro-interactions) ──────────────────────────────── */
/* Les enfants directs d'un [data-reveal] apparaissent en fondu + glissement
   quand la section entre dans l'ecran. Scope sur .js : sans JavaScript, le
   contenu reste visible (pas de blocage). */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] > * {
    opacity: 0;
  }
  .js [data-reveal].is-visible > * {
    animation: reveal-rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .js [data-reveal].is-visible > *:nth-child(2) {
    animation-delay: 0.14s;
  }
  .js [data-reveal].is-visible > *:nth-child(3) {
    animation-delay: 0.28s;
  }

  @keyframes reveal-rise {
    from {
      opacity: 0;
      transform: translateY(48px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}