/* ==========================================================================
   ROCKWOOL Quiz Expert — page d'accueil
   Repères repris du PSD (canvas 1920) : rouge #C12824, conteneur 1403px
   (x 259 → 1662), bandeau 92px, section rouge 88 → 988.
   ========================================================================== */

:root {
  --red: #C12824;
  --black: #000;
  --white: #fff;
  --ink: #1a1a1a;

  /* Avenir est sous licence Linotype : à substituer une fois la licence web
     acquise. Nunito Sans sert de doublure libre (même appui géométrique). */
  --font-brand: "Avenir Next", "Avenir", "Nunito Sans", system-ui, sans-serif;

  --container: 1403px;
  --gutter: 24px;
  --radius-card: 38px;

  /* Hauteur du pied de page, retranchée du min-height plein écran du quiz. */
  --footer-h: 64px;
}

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

body {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* height:auto est indispensable : les attributs width/height du HTML s'appliquent comme
   hints de présentation, donc sans lui une largeur réduite (max-width, media query)
   laisse la hauteur figée et écrase l'image. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

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

/* --- Bandeau -------------------------------------------------------------- */

.topbar {
  background: var(--red);
  height: 92px;
  display: flex;
  align-items: center;
}

.topbar__inner {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 110px;
}

.topbar__logo img { width: 233px; height: auto; }

.topbar__baseline {
  color: var(--white);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  background: var(--red);
  padding-block: 101px 0;
  min-height: 896px;
}

.hero__inner {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 528px) minmax(0, 833px);
  gap: 40px;
  align-items: start;
}

/* Le PSD cale le texte à x=354 et le logo à x=283, soit 71px plus à gauche. */
.hero__logo { width: 388px; margin-left: -71px; }
.hero__copy { padding-left: 95px; color: var(--white); }
.hero__copy > p { font-size: 18px; line-height: 1.22; max-width: 365px; }
.hero__copy > p + p { margin-top: 14px; }

.hero__title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  max-width: 365px;
  margin: 44px 0 14px;
}

.hero__media { margin: 41px 0 0; }
.hero__media img {
  width: 833px;
  height: 514px;
  object-fit: cover;
  border-radius: 8px;
}

/* --- Section média -------------------------------------------------------- */

/* Le fond est exporté au gabarit exact de la section (1920x987).
   flow-root est indispensable : sans lui, la marge négative de .video se fusionne
   avec la section et remonte le fond de 77px, ce qui rogne la bande rouge au lieu
   de laisser la carte vidéo passer par-dessus. */
.media {
  display: flow-root;
  background: #3d3d3d url("../assets/bg-atelier.jpg") center top / cover no-repeat;
  padding-bottom: 217px;
}

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

.video {
  display: grid;
  grid-template-columns: minmax(0, 893px) minmax(0, 1fr);
  gap: 112px;
  align-items: start;
  /* La carte vidéo chevauche la section rouge de 77px (y 911 vs 988). */
  margin-top: -77px;
}

.video__player {
  display: block;
  width: 893px;
  height: 529px;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.video__copy { color: var(--white); padding-top: 151px; max-width: 319px; }
.video__copy h2 { font-size: 24px; font-weight: 900; line-height: 1.2; margin-bottom: 14px; }
.video__copy p { font-size: 18px; line-height: 1.22; }
.video__copy p + p { margin-top: 14px; }

/* --- Barre CTA ------------------------------------------------------------ */

.cta {
  margin-top: 87px;
  background: var(--white);
  border-radius: var(--radius-card);
  min-height: 231px;
  padding: 0 57px 0 69px;
  display: grid;
  grid-template-columns: minmax(0, 356px) minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

.cta__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta__title {
  color: var(--red);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.24;
}

.cta__prize {
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}
.cta__prize sup { font-size: 0.7em; }

/* Les libellés (105px) sont plus larges que les pictos : un écart de 25px entre
   libellés redonne les 56px entre pictos relevés sur le PSD. */
.badges {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 25px;
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.badge img { height: auto; }
.badge:nth-child(1) img { width: 82px; }
.badge:nth-child(2) img { width: 68px; }
.badge:nth-child(3) img { width: 67px; }

.badge__label {
  color: var(--red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 12px;
  border-top: 4px solid var(--red);
  width: 105px;
  text-align: center;
}

/* --- Boutons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.btn--dark { background: var(--black); color: var(--white); }
.btn--dark:hover { background: #2b2b2b; }
.btn--dark:active { transform: scale(0.98); }

.btn--ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--ghost:active { transform: scale(0.98); }

.cta__btn { width: 343px; height: 71px; }

/* --- Modale « Êtes-vous prêt ? » ------------------------------------------ */

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }

.modal__card {
  position: relative;
  width: min(100% - var(--gutter) * 2, 699px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 55px 60px 60px;
  text-align: center;
}

.modal__close {
  position: absolute;
  top: 16px; right: 22px;
  border: 0; background: none;
  font-size: 30px; line-height: 1;
  color: #999;
  cursor: pointer;
}
.modal__close:hover { color: var(--ink); }

.modal__title { font-size: 40px; font-weight: 900; line-height: 1.2; }
.modal__lead { font-size: 18px; font-weight: 900; margin-top: 46px; }
.modal__text {
  font-size: 18px;
  line-height: 1.5;
  margin: 22px auto 0;
  max-width: 400px;
}

.badges--modal { margin-top: 50px; }
.modal__btn { width: 211px; height: 71px; margin-top: 62px; font-weight: 900; font-size: 15px; }

/* --- Pied de page --------------------------------------------------------
   Présent sur les deux pages (accueil et quiz) : l'accès au règlement doit
   rester atteignable à tout moment du parcours.
   -------------------------------------------------------------------------- */

.sitefooter {
  background: var(--ink);
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
}

.sitefooter__inner {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-block: 14px;
}

.sitefooter__note {
  color: #b9b9b9;
  font-size: 14px;
  line-height: 1.4;
}

.sitefooter__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sitefooter__link:hover { color: #ffb3b1; }
.sitefooter__link:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.sitefooter__link svg { flex: none; }

.sitefooter__meta {
  font-weight: 400;
  color: #b9b9b9;
  text-decoration: none;
}

/* --- Adaptatif ------------------------------------------------------------ */

@media (max-width: 1400px) {
  .hero__inner { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; }
  .hero__copy { padding-left: 0; }
  .hero__logo { margin-left: 0; }
  .hero__title { margin-top: 60px; }
  .hero__media { margin-top: 0; }
  .hero__media img { width: 100%; height: auto; aspect-ratio: 833 / 514; }
  .video { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 48px; }
  .video__player { width: 100%; height: auto; aspect-ratio: 893 / 529; }
  .video__copy { padding-top: 0; }
  .cta { padding: 40px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 32px; }
}

@media (max-width: 1024px) {
  .hero { min-height: 0; padding-block: 56px 72px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__title { margin-top: 32px; }
  .hero__copy > p, .hero__title { max-width: 60ch; }
  .video { grid-template-columns: 1fr; margin-top: -48px; gap: 32px; }
  .video__copy { max-width: 60ch; }
  .media { padding-bottom: 72px; }
  /* minmax(0,…) et non 1fr : sinon le min-content des badges élargit la colonne. */
  .cta { margin-top: 48px; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .cta__btn { width: 100%; max-width: 343px; }
}

@media (max-width: 760px) {
  .topbar { height: auto; padding-block: 16px; }
  .topbar__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .topbar__baseline { font-size: 16px; }
  .hero__logo { width: 260px; }
  .hero__title { font-size: 22px; }
  .cta { padding: 32px 20px; }
  .badges { gap: 14px; }
  .badge__label { width: auto; min-width: 0; font-size: 10px; letter-spacing: 0; }
  .modal__card { padding: 48px 24px 40px; }
  .modal__title { font-size: 30px; }
  .sitefooter__inner { flex-direction: column; align-items: flex-start; }
}