/* Hero : solution gagnante du tournoi arena (a014). Le header est fixe, le hero prend tout l'écran. */
/* ===== Polices de repli calées sur les polices web =====
   Pendant le chargement de Google Fonts (display=swap), le texte s'affiche dans une
   police système. Ces @font-face reprennent Arial (iOS, macOS, Windows) ou Roboto
   (Android) en ajustant leur largeur (size-adjust) et leurs métriques verticales
   sur Roboto Condensed et Inter : quand la vraie police arrive, les lignes gardent
   la même longueur et la même hauteur. Valeurs mesurées sur les textes des deux blocs. */
@font-face {
  font-family: "HS Title Fallback A";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700 800;
  size-adjust: 82%;
  ascent-override: 113%; descent-override: 30%; line-gap-override: 0%;
}
@font-face {
  font-family: "HS Title Fallback R";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 700 800;
  size-adjust: 88%;
  ascent-override: 105%; descent-override: 28%; line-gap-override: 0%;
}
@font-face {
  font-family: "HS Text Fallback A";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500;
  size-adjust: 106%;
  ascent-override: 91%; descent-override: 23%; line-gap-override: 0%;
}
@font-face {
  font-family: "HS Text Fallback A";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 700;
  size-adjust: 101%;
  ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "HS Text Fallback R";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 400 500;
  size-adjust: 106.5%;
  ascent-override: 91%; descent-override: 23%; line-gap-override: 0%;
}
@font-face {
  font-family: "HS Text Fallback R";
  src: local("Roboto Medium"), local("Roboto-Medium");
  font-weight: 600 700;
  size-adjust: 107.5%;
  ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}

/* ===== Variables de base HILLSIDE ===== */
:root {
  --onyx: #08090A;      /* fond principal */
  --chalk: #F4F4F2;     /* texte sur noir, fonds clairs */
  --slate: #303337;     /* structure : bordures, séparateurs */
  --alu: #A7AAAD;       /* texte secondaire */
  --signal: #D7FF3F;    /* accent uniquement : CTA, puces actives */

  --font-title: "Roboto Condensed", "HS Title Fallback A", "HS Title Fallback R", "Arial Narrow", sans-serif;
  --font-text: "Inter", "HS Text Fallback A", "HS Text Fallback R", system-ui, sans-serif;

  --header-h: 64px;                         /* header sticky existant */
  --gutter: clamp(16px, 4vw, 48px);         /* marge latérale : 16 px à 390 px */
  --maxw: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Utilitaires partagés par les deux blocs (à ne pas dupliquer s'ils existent déjà) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(.hero) :focus-visible {
  outline: 2px solid var(--chalk);          /* Chalk : Signal reste réservé aux CTA et puces actives */
  outline-offset: 3px;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* plein écran sous le header sticky de 64 px */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;              /* contient le léger zoom de l'image */
  background: var(--onyx);
  color: var(--chalk);
  font-family: var(--font-text);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  animation: hero-zoom 1.8s var(--ease) both;
}
/* Voile Onyx en deux couches.
   Mobile : un voile léger sur toute la photo (le plafond LED reste visible au-dessus du texte)
   + un second voile accroché au bloc de texte (.hero__inner::before), qui suit sa hauteur
   réelle quelle que soit la taille d'écran. Desktop : voile en diagonale, photo libre à droite. */
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 9, 10, .55) 0%, rgba(8, 9, 10, .2) 45%, rgba(8, 9, 10, .2) 100%);
}
@media (min-width: 900px) {
  .hero__shade {
    background:
      linear-gradient(to right, rgba(8, 9, 10, .78) 0%, rgba(8, 9, 10, .35) 55%, rgba(8, 9, 10, 0) 100%),
      linear-gradient(to top, rgba(8, 9, 10, .95) 0%, rgba(8, 9, 10, .55) 45%, rgba(8, 9, 10, .25) 100%);
  }
}
.hero__inner {
  position: relative;
  width: 100%;
  min-width: 0;                  /* item flex : ne s'élargit jamais au-delà de l'écran */
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(24px, 4vh, 64px) var(--gutter) clamp(20px, 4vh, 40px);
}
@media (max-width: 899px) {
  .hero__inner::before {
    content: ""; position: absolute; z-index: -1;
    left: 0; right: 0; bottom: 0; top: -80px;      /* commence 80 px au-dessus du sur-titre */
    pointer-events: none;
    /* repères + CTA (bas) : opaque ; titre (gros texte, AA = 3:1) : voile moyen ;
       au-dessus du bloc : fondu vers la photo */
    background: linear-gradient(to top,
      rgba(8, 9, 10, .9) 0,
      rgba(8, 9, 10, .82) 170px,
      rgba(8, 9, 10, .55) 340px,
      rgba(8, 9, 10, .45) 420px,
      rgba(8, 9, 10, .45) calc(100% - 80px),
      rgba(8, 9, 10, 0) 100%);
  }
}
.hero__eyebrow {
  display: inline-flex; align-items: center;
  margin: 0 0 16px;
  padding: 5px 12px;
  border: 1px solid var(--slate); border-radius: 999px;   /* pilule, comme la nav */
  background: rgba(8, 9, 10, .6);                       /* contraste garanti sur la photo */
  font-size: .8125rem; font-weight: 500; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--chalk);
}
.hero__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 12.5vw, 6.5rem);  /* 48,75 px à 390 px */
  line-height: .94;
  letter-spacing: -.005em;
}
/* Coupures de ligne fixes : 4 lignes sur mobile, 2 sur desktop. Aux tailles normales,
   chaque segment tient dans sa ligne même en police système non ajustée : la hauteur du
   titre ne dépend que de font-size × line-height, et l'arrivée de Roboto Condensed ne change
   pas le nombre de lignes. Mais le retour à la ligne reste AUTORISÉ (pas de nowrap) :
   en zoom 200 %, ou avec une grande taille de police par défaut, un segment trop large
   passe à la ligne (et un mot seul trop long se coupe) au lieu d'être rogné par le masque. */
.hero__seg { display: block; }
.hero__title { overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .hero__seg { display: inline; }
  .hero__title {
    /* « CONSTRUIS TA MÉTHODE. » = 10,76 em en Roboto Condensed 800 : on divise la largeur
       utile par 11,2 em pour garder 4 % de marge (barre de défilement comprise). 98 px à 1440 px. */
    font-size: min(6.25rem, calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 11.2));
  }
}
.hero__line {
  display: block;
  overflow: hidden;
  /* Masque de l'entrée. Avec line-height .94, la boîte de ligne s'arrête vers 0,81 em
     au-dessus de la ligne de base, alors que les accents des capitales (Û, É) montent
     vers 0,9–0,95 em. On agrandit le masque de .16 em en haut (et .08 em en bas) et on
     annule l'agrandissement par des marges négatives : la mise en page ne bouge pas,
     les accents ne sont plus coupés. */
  padding: .16em 0 .08em;
  margin: -.16em 0 -.08em;
}
.hero__line > span { display: block; animation: hero-rise .9s var(--ease) both; }
.hero__line + .hero__line > span { animation-delay: .12s; }
.hero__lead {
  margin: 20px 0 0;
  max-width: 40rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  color: var(--chalk);
  animation: hero-fade .8s .3s var(--ease) both;
}
.hero__ctas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* largeur de colonne explicite : boutons à leur hauteur réelle */
  gap: 12px;
  margin-top: 24px;
  animation: hero-fade .8s .4s var(--ease) both;
}
@media (min-width: 480px) {
  .hero__ctas { display: flex; flex-wrap: wrap; }
}

/* Boutons (pilule) */
.hero .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-family: var(--font-text); font-size: 1rem; font-weight: 600;
  line-height: 1.2; text-align: center; text-decoration: none;
  /* une ligne aux tailles normales ; retour à la ligne permis en zoom fort (pas de débordement) */
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .3s, transform .2s var(--ease);
}
.hero .btn--signal { background: var(--signal); color: var(--onyx); border: 1px solid var(--signal); }
.hero .btn--signal:hover { background: var(--chalk); border-color: var(--chalk); }
.hero .btn--ghost { color: var(--chalk); border: 1px solid rgba(244, 244, 242, .55); background: rgba(8, 9, 10, .35); }
.hero .btn--ghost:hover { border-color: var(--chalk); background: var(--chalk); color: var(--onyx); }
.hero .btn:active { transform: scale(.98); }
.hero .btn__icon { flex: none; transition: transform .2s var(--ease); }
.hero .btn:hover .btn__icon { transform: translate(2px, -2px); }

/* Repères : une ligne discrète, sans pastilles */
.hero__facts {
  list-style: none; margin: clamp(28px, 5vh, 56px) 0 0; padding: 16px 0 0;
  border-top: 1px solid rgba(167, 170, 173, .22);
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 20px;
  font-size: .875rem; line-height: 1.3; color: var(--alu);
  animation: hero-fade .8s .5s var(--ease) both;
}
.hero__facts li + li { padding-left: 20px; border-left: 1px solid rgba(167, 170, 173, .22); }
@media (max-width: 599px) {
  .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; font-size: .8125rem; }
  .hero__facts li + li { padding-left: 12px; }
}
.hero__facts b { display: block; margin-bottom: 2px; color: var(--chalk); font-weight: 600; }

/* Mobiles courts (navigateur intégré Instagram/Facebook, 375 × 667…) : on resserre
   les espacements pour garder titre, CTA et repères dans le premier écran. */
@media (max-width: 899px) and (max-height: 760px) {
  .hero__inner { padding-top: 16px; padding-bottom: 16px; }
  .hero__eyebrow { margin-bottom: 12px; }
  .hero__title { font-size: clamp(2.375rem, 11.5vw, 3.5rem); }
  .hero__lead { margin-top: 12px; }
  .hero__ctas { margin-top: 16px; gap: 10px; }
  .hero .btn { min-height: 48px; }
  .hero__facts { margin-top: 16px; padding-top: 12px; }
}
/* Téléphone tourné à l'horizontale (844 × 390, 740 × 360, 667 × 375, 932 × 430…),
   navigateurs intégrés Instagram/Facebook compris. La largeur seule choisirait le titre
   en 4 lignes à 56 px et pousserait les deux CTA sous la ligne de flottaison.
   Ici : titre en 2 lignes, taille plafonnée par la hauteur visible, espacements serrés.
   Titre + 2 CTA tiennent dans le premier écran ; les repères suivent juste en dessous. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__inner { padding-top: 12px; padding-bottom: 12px; }
  .hero__eyebrow { margin-bottom: 10px; padding-block: 3px; }
  .hero__seg { display: inline; }
  .hero__title {
    /* 2 lignes ; la ligne la plus longue = 10,76 em, d'où la division par 11,2 (4 % de marge) */
    font-size: min(calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 11.2), 12.5vh);
    font-size: min(calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 11.2), 12.5svh);
  }
  .hero__lead { margin-top: 8px; font-size: .9375rem; }
  .hero__ctas { display: flex; flex-wrap: wrap; margin-top: 12px; gap: 10px; }
  .hero .btn { min-height: 44px; }
  .hero__facts { margin-top: 12px; padding-top: 10px; }
}
@media (max-width: 379px) {
  .hero__eyebrow { font-size: .75rem; letter-spacing: .06em; }
}
@media (max-width: 359px) {
  /* 11 px : le sur-titre tient sur une ligne aussi en police de repli (pas de saut au chargement) */
  .hero__eyebrow { font-size: .6875rem; letter-spacing: .05em; }
}

@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: none; } }
@keyframes hero-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before { animation: none !important; transition: none !important; }
}

.hero { min-height: 100vh; min-height: 100svh; padding-block: 0; } /* annule le padding générique des sections : sinon 80 px de photo sans voile sous les repères */
.hero__inner { padding-top: calc(var(--header-h) + 24px); padding-bottom: 18px; }