/* Fiches des jeux (/escape-game-en-ligne/<jeu>) : le bouton « Commencer » visible sans défiler.
   Chargé APRÈS le <style> propre à chaque fiche (couleurs du jeu) : ne règle que la mise en page du haut de page
   et la barre d'appel en bas d'écran (assets/fiche.js). */

/* ordre commun : image, accroche, titre, bouton, texte, infos clés */
.hero > img { order: 0 }
.hero > .kicker { order: 1 }
.hero > h1 { order: 2 }
.hero > .cta { order: 3 }
.hero > .lead { order: 4 }
.hero > .facts { order: 5 }
.hero .cta .fine { flex-basis: 100%; margin-top: -4px }

/* téléphone et tablette : image moins haute, bouton juste sous le titre */
@media (max-width: 959px) {
  .hero { gap: 16px; margin-top: 18px }
  .hero > img { aspect-ratio: 16 / 8; max-height: 38vh }
  .hero > h1 { font-size: clamp(24px, 6.4vw, 34px); line-height: 1.15 }
  .hero > .kicker { font-size: 11.5px }
  .hero .btn.big { flex: 1 1 auto; text-align: center }
}

/* ordinateur : image à gauche, titre et bouton à droite, le tout dans le premier écran */
@media (min-width: 960px) {
  .wrap:has(> main > .hero) { max-width: 1240px }
  .hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 44px; row-gap: 16px; align-items: start; margin-top: 22px;
  }
  .hero > img { grid-column: 1; grid-row: 1 / -1; align-self: center; max-height: calc(100vh - 150px) }
  .hero > :not(img) { grid-column: 2 }
  .hero > .kicker { grid-row: 1; margin-top: 6px }
  .hero > h1 { grid-row: 2; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12; max-width: none }
  .hero > .lead { grid-row: 3; font-size: 17px; line-height: 1.55; max-width: none }
  .hero > .cta { grid-row: 4; margin-top: 4px }
  .hero > .facts { grid-row: 5 }
}

/* barre d'appel en bas d'écran, quand le bouton du haut n'est plus visible */
.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(12, 10, 14, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); border-top: 1px solid rgba(255, 255, 255, .1);
  transform: translateY(110%); transition: transform .25s ease; color: #f3ead8;
}
.stickycta.on { transform: none }
.stickycta .t { font: 600 15px/1.3 system-ui, sans-serif; max-width: 34em }
.stickycta .t small { display: block; font-weight: 400; opacity: .75; font-size: 12.5px }
.stickycta .btn.big { font-size: 16px; padding: 11px 20px }
@media (max-width: 559px) {
  .stickycta { gap: 10px; padding-left: 12px; padding-right: 12px }
  .stickycta .t { display: none }
  .stickycta .btn.big { flex: 1; text-align: center }
}
@media (prefers-reduced-motion: reduce) { .stickycta { transition: none } }

/* cadres (« Comment on joue », « En pratique »…) et questions de la FAQ : fond anthracite, comme la fiche Hors ligne,
   pour qu'ils se détachent du fond de la page ; chaque fiche garde la couleur de son liseré */
.box, .faq details { background: rgba(24, 26, 32, .7) }