/* base.css — reset, typographie, primitives de mise en page.
   Aucune couleur en dur : tout vient de tokens.css. */

/* --- Polices ------------------------------------------------------------ */
@font-face {
  font-family: Geist;
  src: url("../assets/fonts/Geist-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("../assets/fonts/RobotoMono-Variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--_colors---primary--paper);
  color: var(--_colors---primary--black);
  font-family: var(--_typography---body-regular--font-family);
  font-size: var(--_typography---body-regular--font-size);
  line-height: var(--_typography---body-regular--line-height);
  font-weight: var(--_typography---body-regular--font-weight);
  letter-spacing: var(--_typography---body-regular--letter-spacing);
  -webkit-font-smoothing: antialiased;
}

/* Le navigateur pose margin:1em 40px sur figure et blockquote.
   Sans cette remise à zéro, chaque carte perd 40 px de largeur. */
figure, figcaption, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* Les balises de titre nues portent la même échelle que les classes
   `heading-style-*`. Sans ces règles, un `<h2>` sans classe retombe sur
   l'interligne du corps de texte — c'est ce qui écrasait les années de la
   frise chronologique.
   L'interligne du h2 vient bien de h1 : c'est ainsi dans la source, vérifié
   au rendu (72 px de corps pour 68,4 px d'interligne, soit 95 %). */
h1 {
  font-family: var(--_typography---h1--font-family);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---h1--font-weight);
  letter-spacing: var(--_typography---h1--letter-spacing);
}
h2 {
  font-family: var(--_typography---h2--font-family);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
}
h3 {
  font-family: var(--_typography---h3--font-family);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
}
h4 {
  font-family: var(--_typography---h4--font-family);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
}
h5 {
  font-family: var(--_typography---h5--font-family);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
}
h6 {
  font-family: var(--_typography---h6--font-family);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
}
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Une image inline-block ajoute l'espace de sa descendante : ~7 px sous
   chaque illustration. */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--_colors---primary--accent); outline-offset: 2px; }

/* --- Typographie -------------------------------------------------------- */
.heading-style-h1 {
  font-family: var(--_typography---h1--font-family);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---h1--font-weight);
  letter-spacing: var(--_typography---h1--letter-spacing);
}
.heading-style-h2 {
  font-family: var(--_typography---h2--font-family);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
}
.heading-style-h3 {
  font-family: var(--_typography---h3--font-family);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
}
.heading-style-h4 {
  font-family: var(--_typography---h4--font-family);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
}
.heading-style-h5 {
  font-family: var(--_typography---h5--font-family);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
}
.heading-style-h6 {
  font-family: var(--_typography---h6--font-family);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
}

.text-style-label {
  font-family: var(--_typography---font-family--detail);
  font-size: var(--size--size-7);
  line-height: 120%;
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: 0;
  text-transform: uppercase;
}
.text-size-medium {
  font-size: var(--_typography---body-medium--font-size);
  line-height: var(--_typography---body-medium--line-height);
  letter-spacing: var(--_typography---body-medium--letter-spacing);
}
.text-size-large {
  font-size: var(--_typography---body-large--font-size);
  line-height: var(--_typography---body-large--line-height);
  letter-spacing: var(--_typography---body-large--letter-spacing);
}
.text-size-small { font-size: var(--_typography---body-small--font-size); line-height: 140%; }

.text-color-grey-250 { color: var(--_colors---grey--250); }
.text-color-grey-300 { color: var(--_colors---grey--300); }
.text-color-grey-400 { color: var(--_colors---grey--400); }
.text-color-bleu-400 { color: var(--_colors---bleu--400); }
.text-color-bleu-500 { color: var(--_colors---bleu--500); }
.text-color-white { color: var(--_colors---primary--white); }
.text-color-white-40 { color: var(--_colors---white--40); }
.text-color-white-60 { color: var(--_colors---white--60); }
.text-weight-medium { font-weight: var(--_typography---font-weight--medium); }
.text-weight-semibold { font-weight: var(--_typography---font-weight--semibold); }
.text-size-regular { font-size: var(--_typography---body-regular--font-size); line-height: 140%; }
.text-align-center { text-align: center; }

/* La variante soulignée du label est le défaut dans la source ; certaines
   occurrences la retirent explicitement. */
.text-style-label.no-underline { text-decoration: none; }
.text-style-label.is-smaller { font-size: var(--size--size-5); }
.text-style-label.is-large { font-size: var(--size--size-9); }

/* --- Mise en page ------------------------------------------------------- */
.page-wrapper { z-index: 1; position: relative; overflow: clip; }

.padding-global {
  padding-left: var(--_structure---padding-global--padding);
  padding-right: var(--_structure---padding-global--padding);
}
.container-large  { width: 100%; max-width: var(--_structure---container--large);  margin-inline: auto; }
.container-medium { width: 100%; max-width: var(--_structure---container--medium); margin-inline: auto; }
.container-small  { width: 100%; max-width: var(--_structure---container--small);  margin-inline: auto; }
.container-xsmall { width: 100%; max-width: var(--_structure---container--xsmall); margin-inline: auto; }
.container-xxsmall{ width: 100%; max-width: var(--_structure---container--xxsmall);margin-inline: auto; }

/* Les paddings de section sont des blocs vides dans la source, pas du padding
   sur la section elle-même : ils n'ont donc qu'une hauteur. */
.padding-section-small  { padding-top: var(--section--small); }
.padding-section-medium { padding-top: var(--section--medium); }
.padding-section-large  { padding-top: var(--section--large); }

.max-width-medium { max-width: var(--_structure---max-width--medium); }
.max-width-large  { max-width: var(--_structure---max-width--large); }

/* --- Espaceurs et filets ------------------------------------------------ */
.spacer-xsmall   { height: var(--spacer--xsmall); }
.spacer-small    { height: var(--spacer--small); }
.spacer-medium   { height: var(--spacer--medium); }
.spacer-large    { height: var(--spacer--large); }
.spacer-xlarge   { height: var(--spacer--xlarge); }
.spacer-xxlarge  { height: var(--spacer--xxlarge); }
.spacer-custom-1 { height: var(--spacer--custom-1); }
.spacer-custom-2 { height: var(--spacer--custom-2); }

/* Modificateurs de respiration par palier — la source réduit certains blancs
   sur tablette et sur mobile plutôt que de tout mettre à l'échelle. */
@media (max-width: 991px) {
  .padding-section-medium.is-tablet-xsmall { padding-top: var(--section--xsmall); }
  .spacer-xxlarge.is-tablet-large { height: var(--spacer--large); }
}
@media (max-width: 767px) {
  .padding-section-medium.is-mobile-small { padding-top: var(--section--small); }
  .spacer-xxlarge.is-mobile-large { height: var(--spacer--large); }
}

/* Icône posée devant un titre court. */
.icon-height-small { height: var(--size--size-13); width: auto; flex: none; }

.line { height: 1px; background-color: var(--_colors---bleu--150); }
.line.is-dark { background-color: var(--_colors---white--10); }

.z-index-2 { position: relative; z-index: 2; }
.z-index-4 { position: relative; z-index: 4; }

/* --- Textes découpés par SplitText -------------------------------------- */
/* L'état initial est posé en JavaScript, jamais ici : si le script échoue,
   la page reste entièrement lisible. */
.gsap_split_line { display: block; }
.gsap_split_word, .gsap_split_letter { display: inline-block; }

/* --- Accessibilité ------------------------------------------------------ */
.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;
}

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

/* --- Responsive : le CSS source passe padding-global à 1rem ------------- */
@media (max-width: 767px) {
  .padding-global {
    padding-left: var(--_structure---padding-global--padding-tiny);
    padding-right: var(--_structure---padding-global--padding-tiny);
  }
}

/* --- Utilitaires d'affichage --------------------------------------------
   Présents sur toutes les pages : ils décident de ce qui disparaît à chaque
   palier, et ne peuvent donc pas vivre dans le CSS d'une seule page. */
.hide-tablet, .hide-mobile-landscape, .hide-mobile-portrait { display: block; }
@media (max-width: 991px) { .hide-tablet { display: none; } }
@media (max-width: 767px) { .hide-mobile-landscape { display: none; } }
@media (max-width: 479px) { .hide-mobile-portrait { display: none; } }