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

html {
  scroll-behavior: smooth;
  cursor: var(--cursor-default);
}

/* --------------------------------------------------------------------------
   ÉCRANS PLEINE HAUTEUR
   Chaque section de premier niveau vaut au moins une fenêtre, en-tête déduit :
   c'est ce qui fait qu'un geste amène une section entière et non un fragment.
   « min-height » et non « height » : une section plus riche que l'écran garde
   le droit de s'étendre, et le script la fait lire avant de passer à la
   suivante (voir assets/js/main.js).
   La sélection s'arrête au premier niveau — « main > div > section » attrape
   les pages qui enveloppent leur contenu, mais une section imbriquée dans une
   autre, comme le bloc de réservation du planning, reste où elle est : elle
   appartient à l'écran qui la contient.
   Les sections qui posent déjà leur propre hauteur (les héros, avec leur
   plancher de maquette) l'emportent : leur sélecteur de classe est plus fort
   que celui-ci, et c'est voulu.
   -------------------------------------------------------------------------- */
main > section,
main > div > section {
  min-height: calc(100svh - var(--header-h));
  scroll-margin-top: var(--header-h);
  display: grid;
  align-content: safe center;
  grid-template-columns: minmax(0, 1fr);
}

main > div > section.fut-ecran,
main > div > section.fut-roadmap {
  align-content: stretch;
}

@supports not (height: 100svh) {
  main > section,
  main > div > section { min-height: calc(100vh - var(--header-h)); }
}

.site-footer { scroll-margin-top: var(--header-h); }

/* --------------------------------------------------------------------------
   CALIBRAGE DES GRANDS ÉCRANS
   Toutes les tailles du site s'écrivent clamp(mini, Xvw, maxi), et au-delà
   d'environ 1366 px la part en vw dépasse partout le maxi : la typographie est
   donc PLAFONNÉE, et le site cesse de grandir quelle que soit la taille de
   l'écran. Sur un grand moniteur, il paraît petit — c'est ce que voit qui
   travaille en 1920 ou en 2560.
   La correction tient en une ligne par palier. Aucune taille d'écran n'est
   écrite en pixels dans ces feuilles (vérifié : zéro occurrence) : tout est en
   rem, donc relatif à cette référence. La relever agrandit l'ensemble dans les
   mêmes proportions — titres, textes, libellés — sans toucher aux quelque
   quatre-vingt-dix règles de taille, et sans rien changer sous 1500 px, donc
   ni sur téléphone ni sur un portable ordinaire.
   POUR AJUSTER : ces deux nombres, et eux seuls. 16px est la référence des
   navigateurs ; 17px agrandit de 6 %, 18px de 12,5 %. Monter par pas de 1px et
   regarder — au-delà de 19px, les titres commencent à manger la page.
   -------------------------------------------------------------------------- */
@media (min-width: 1500px) {
  html { font-size: 17px; }
}

@media (min-width: 1920px) {
  html { font-size: 18px; }
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  color: var(--white);
  background: var(--black-elegant);
  -webkit-font-smoothing: antialiased;
}

a,
button,
summary,
select,
label[for],
[role="button"],
[role="tab"],
[role="link"],
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
input[type="file"],
input[type="range"] {
  cursor: var(--cursor-pointer);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
textarea {
  cursor: text;
}

:disabled,
[aria-disabled="true"],
.is-disabled {
  cursor: not-allowed;
}

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

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

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
}

h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--u2);
  z-index: 9999;
  padding: var(--u1) var(--u2);
  background: var(--beige);
  color: var(--black);
}

.skip-link:focus {
  top: var(--u2);
}

.text-red { color: var(--red); }
.text-beige { color: var(--beige); }

.eyebrow {
  display: block;
  margin-bottom: var(--u2);
  font-size: var(--surtitre-taille);
  font-weight: var(--surtitre-graisse);
  letter-spacing: var(--surtitre-lettrage);
  text-transform: uppercase;
  color: var(--red);
}

.section {
  padding-block: var(--u16);
}

.section--dark { background: var(--black); }
.section--beige { background: var(--beige); color: var(--black-elegant); }
.section--surface { background: var(--surface); }

.split {
  display: grid;
  gap: var(--u6);
  align-items: center;
}

@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--dominant { grid-template-columns: 2fr 1fr; }
  .split--dominant.split--reverse { grid-template-columns: 1fr 2fr; }
  .split--reverse .split__media { order: 2; }
  .split--reverse .split__content { order: 1; }
}

.split--centered {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.split__media img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.split__content p {
  margin-top: var(--u3);
  color: var(--beige);
}

.section--beige .split__content p { color: var(--black-elegant); }

.split__cta {
  display: inline-block;
  margin-top: var(--u4);
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

[data-parallax] {
  overflow: hidden;
}

[data-parallax] img {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.06);
  transition: transform 0.1s linear;
  will-change: transform;
}

[data-stagger] .founder-eyebrow::before,
.reveal .founder-eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

[data-stagger].is-visible .founder-eyebrow::before,
.reveal.is-visible .founder-eyebrow::before {
  transform: scaleX(1);
}

.no-js .reveal,
.no-js [data-stagger] > * {
  opacity: 1;
  transform: none;
}

.no-js .founder-eyebrow::before {
  transform: scaleX(1);
}

.no-js .founder-section__media img {
  clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-parallax] img { transform: none; }
  [data-stagger] .founder-eyebrow::before,
  .reveal .founder-eyebrow::before { transform: scaleX(1); transition: none; }
}

@media (max-width: 767px) {
  .section { padding-block: var(--u12); }
  .split { text-align: left; }
}