/* ============================================================
   LAYOUT.CSS — Les Demented Brothers
   Navbar, Footer, Structure de page
   ============================================================ */

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  transition: background var(--transition), box-shadow var(--transition);
}

.navbar.transparent {
  background: transparent;
}

.navbar.scrolled {
  background: rgba(12, 12, 12, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.navbar.opaque {
  background: rgba(12, 12, 12, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* === LOGO === */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo:hover { opacity: 1; }

/* Le duo illustré, détouré — l'identité fournie par les artistes. */
.logo-mark {
  width: auto;
  height: 30px;
  display: block;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-logo:hover .logo-mark {
  transform: rotate(-6deg) scale(1.08);
}

.logo-text {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--blanc);
  white-space: nowrap;
}

/* === LIENS DE NAV === */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-corps);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-texte);
  padding: 0.5rem 0.75rem;
  transition: color var(--transition);
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--blanc);
  opacity: 1;
}

.nav-links a.active {
  color: var(--blanc);
  position: relative;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--rouge);
}

/* === ACTIONS DROITE === */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* === SÉLECTEUR DE LANGUE ===
   Les trois langues sont affichées côte à côte, l'active en blanc
   sur rouge. Un bouton unique portant « EN » n'aurait pas dit si
   l'on EST en anglais ou si l'on y va — ambigu à deux langues,
   impraticable à trois. */
.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.lang-opt {
  font-family: var(--font-corps);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gris-texte);
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.34rem 0.55rem;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.lang-opt:last-child { border-right: none; }

.lang-opt:hover { color: var(--blanc); background: rgba(255, 255, 255, 0.07); }

.lang-opt.is-active {
  color: var(--blanc);
  background: var(--rouge);
  cursor: default;
}

/* Sur les petits écrans la barre est déjà chargée : on resserre. */
@media (max-width: 480px) {
  .lang-opt { font-size: 0.72rem; padding: 0.3rem 0.4rem; }
}

/* === BURGER MOBILE === */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 44 px : la taille minimale confortable pour une cible tactile.
     Le trait reste visuellement fin, c'est la zone cliquable qui grandit. */
  width: 44px;
  height: 44px;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 8px;
}

.burger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--blanc);
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition), width var(--transition);
  transform-origin: center;
}

.burger.open .burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open .burger-line:nth-child(2) { opacity: 0; width: 0; }
.burger.open .burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   MENU MOBILE
   ============================================================ */
@media (max-width: 960px) {
  .burger { display: flex; }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.5rem 0 1rem;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-lg), opacity var(--transition);
    z-index: 999;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-links li { width: 100%; }

  .nav-links a {
    display: block;
    padding: 0.9rem 2rem;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;
  }

  .nav-links a.active {
    color: var(--blanc);
    border-left: 2px solid var(--rouge);
    background: rgba(212, 20, 48, 0.05);
    padding-left: calc(2rem - 2px);
  }

  .nav-links a.active::after { display: none; }
}

@media (max-width: 500px) {
  /* La barre porte le logo, le mot-marque, le sélecteur à trois
     langues et le burger. À 390 px, la somme dépassait la largeur
     disponible et le burger sortait de l'écran. On resserre les
     marges du conteneur et le mot-marque, qui occupait à lui seul
     la moitié de la place. */
  .nav-container { padding-left: 1rem; padding-right: 1rem; }
  .logo-text { font-size: 0.95rem; letter-spacing: 0.04em; }
  .nav-logo { gap: 0.45rem; }
  .nav-actions { gap: 0.5rem; }
  .logo-mark { width: 26px; height: 26px; }
}

@media (max-width: 360px) {
  /* Très petits écrans : le mot-marque cède la place, la marque
     reste lisible par le logo illustré. */
  .logo-text { display: none; }
}

/* ============================================================
   ANCRES
   La navbar est en position: fixed — sans cette marge, un lien #ancre
   cale la section pile dessous et son titre passe sous la barre.
   ============================================================ */
section[id] {
  scroll-margin-top: calc(var(--nav-height) + 1rem);
}

/* ============================================================
   HERO — plein écran (page d'accueil) — Option A
   Structure : hero-main (centré) + hero-tiles (bande en bas)
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background-color: var(--noir);
  background-image: radial-gradient(
    ellipse at 50% 45%,
    rgba(212, 20, 48, 0.08) 0%,
    transparent 65%
  );
}

.hero::before { display: none; }

/* ============================================================
   FOND PHOTO DU HERO — fondu enchaîné
   Les slides sont empilés ; seul .is-active est visible.
   La rotation est pilotée par js/effects.js (initHeroSlideshow).
   ============================================================ */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* 25% plutôt que 50% : sur ces photos les visages sont dans le tiers
     supérieur, un cadrage centré les coupe. */
  background-position: center 25%;
  background-repeat: no-repeat;
  filter: saturate(0.8) contrast(1.05);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.8s ease-in-out;
}

.hero-bg-slide.is-active {
  opacity: 1;
  animation: hero-drift 11s ease-out forwards;
}

/* Le texte du hero passe devant une photo qui change : on le détache du fond
   pour qu'il reste lisible quelle que soit la photo affichée. */
.hero .hero-title,
.hero .hero-tagline,
.hero .scroll-arrow-label {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* Voile sombre : sans lui, le titre devient illisible sur les photos claires */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(15, 15, 15, 0.82) 0%,
      rgba(15, 15, 15, 0.58) 38%,
      rgba(15, 15, 15, 0.72) 72%,
      rgba(15, 15, 15, 0.94) 100%
    ),
    radial-gradient(
      ellipse at 50% 45%,
      rgba(212, 20, 48, 0.16) 0%,
      transparent 62%
    );
}

/* Dès que la mise en page s'empile (même seuil que le menu burger), le bloc
   de texte devient beaucoup plus haut et déborde sur la partie claire de la
   photo : il faut un voile nettement plus opaque, pas seulement sur 700px. */
@media (max-width: 960px) {
  .hero-scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(15, 15, 15, 0.9) 0%,
        rgba(15, 15, 15, 0.78) 30%,
        rgba(15, 15, 15, 0.8) 65%,
        rgba(15, 15, 15, 0.96) 100%
      ),
      radial-gradient(ellipse at 50% 45%, rgba(212, 20, 48, 0.13) 0%, transparent 62%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide.is-active { animation: none; transform: none; }
  .hero-bg-slide { transition: none; }
}

/* Ligne rouge en bas du hero-main */
.hero::after {
  display: none; /* géré via border-top sur hero-tiles */
}

/* === ZONE CENTRALE === */
.hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-height) + 3rem) 2rem 2rem;
  position: relative;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: 100%;
}

/* === BANDE DE TUILES EN BAS === */
.hero-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: clamp(130px, 22vh, 200px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* === TUILE INDIVIDUELLE === */
.hero-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--gris-carte);
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  transition: flex var(--transition-lg);
}

.hero-tile:last-child { border-right: none; }

.hero-tile .tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: background var(--transition);
}

.hero-tile:hover .tile-overlay {
  background: rgba(0, 0, 0, 0.25);
}

.hero-tile .tile-content {
  position: relative;
  z-index: 1;
  padding: 0.8rem 1rem 0.9rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-top: 2px solid transparent;
  transition: border-color var(--transition);
}

.hero-tile:hover .tile-content {
  border-top-color: var(--rouge);
}

/* === FONDS DES TUILES HERO === */
.hero-tile--salle   { background: linear-gradient(160deg, #1c1c1c 0%, #111 100%); }
.hero-tile--talent  { background: linear-gradient(160deg, #1a0d10 0%, #111 100%); }
.hero-tile--dates   { background: linear-gradient(160deg, #111 0%, #181818 100%); }

.hero-tile--salle:hover,
.hero-tile--talent:hover { background: linear-gradient(160deg, #2a1015 0%, #1a0a0e 100%); }
.hero-tile--dates:hover  { background: linear-gradient(160deg, #1a1a1a 0%, #220d10 100%); }

/* === RESPONSIVE HERO TILES === */
@media (max-width: 768px) {
  .hero-tiles {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: auto;
  }

  /* La 4e et 5e tuile occupent la 2e rangée normalement */
  .hero-tiles .hero-tile:nth-child(4),
  .hero-tiles .hero-tile:nth-child(5) {
    height: clamp(90px, 15vw, 120px);
  }

  .hero-tiles .hero-tile {
    height: clamp(90px, 15vw, 120px);
  }
}

@media (max-width: 480px) {
  .hero-tiles {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 90px);
  }

  .hero-tile .tile-sub { display: none; }
  .hero-tile .tile-content { padding: 0.6rem 0.75rem 0.7rem; }
}

/* ============================================================
   PAGE HERO — compact (sous-pages)
   ============================================================ */
.page-hero {
  min-height: 42vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: calc(var(--nav-height) + 3rem) 2rem 2.5rem;
  position: relative;
  background-color: var(--noir);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============================================================
   FOND PHOTO DES SOUS-PAGES
   Une photo par page, choisie via body[data-page].
   Le dégradé est dans le même background que l'image : il passe
   devant elle et garde le titre lisible, sans pseudo-élément.
   ============================================================ */
body[data-page="salle"]    .page-hero { background-image: var(--voile), url('../img/cabaret-duo.jpg'); }
body[data-page="cabaret"]  .page-hero { background-image: var(--voile), url('../img/cabaret-anneaux.jpg'); }
body[data-page="talent"]   .page-hero { background-image: var(--voile), url('../img/talent-scene-2.jpg'); }
body[data-page="contact"]  .page-hero { background-image: var(--voile), url('../img/duo-foulard.jpg'); }
body[data-page="mentions"] .page-hero { background-image: var(--voile), url('../img/texture-pierre.jpg'); }

/* Les photos de rue ont le ciel en haut et le public en bas :
   il faut descendre le cadrage, sinon on n'affiche que des toits. */
body[data-page="rue"] .page-hero {
  background-image: var(--voile), url('../img/rue-chapiteau.jpg');
  background-position: center 68%;
}

/* Photo de scène plutôt qu'une seconde photo de rue : celles de rue-public
   et rue-chapiteau viennent du même événement et faisaient doublon. */
body[data-page="dates"] .page-hero {
  background-image: var(--voile), url('../img/cabaret-solo.jpg');
  background-position: center 38%;
}

/* Les photos de plateau sont sombres à droite : on dégrade vers la gauche,
   là où se trouve le titre. */
:root {
  --voile: linear-gradient(
    to right,
    rgba(15, 15, 15, 0.88) 0%,
    rgba(15, 15, 15, 0.68) 42%,
    rgba(15, 15, 15, 0.30) 100%
  );
}

@media (max-width: 700px) {
  :root {
    --voile: linear-gradient(
      to bottom,
      rgba(15, 15, 15, 0.72) 0%,
      rgba(15, 15, 15, 0.9) 100%
    );
  }
}

.page-hero::before,
.page-hero::after { display: none; } /* pas de rideaux */

/* Accent rouge sur le bord gauche du titre */
.page-hero::before {
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rouge);
}

.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  text-align: left;
}

/* ============================================================
   CANVAS ÉTOILES
   ============================================================ */
#starsCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4; /* plus discret */
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background-color: var(--gris-sombre);
  border-top: 2px solid var(--rouge);
  padding: 3rem 0 2rem;
  position: relative;
}

.footer::before { display: none; } /* pas de double barre */

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.footer-logo {
  font-family: var(--font-titre);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--blanc);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.footer-mark {
  width: auto;
  height: 28px;
  display: block;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  font-family: var(--font-corps);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-texte);
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--blanc);
  opacity: 1;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-family: var(--font-corps);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gris-texte);
  transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}

.footer-social a:hover {
  color: var(--blanc);
  border-color: var(--rouge);
  background: rgba(212, 20, 48, 0.12);
  transform: translateY(-2px);
  opacity: 1;
}

.footer-copyright {
  font-family: var(--font-corps);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--gris-texte);
  margin-bottom: 0;
  opacity: 0.6;
}

.footer-absurd {
  font-family: var(--font-corps);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--gris-texte);
  margin-bottom: 0;
  opacity: 0.35;
}

.footer-sep {
  width: 30px;
  height: 1px;
  background: var(--rouge);
  margin: 0 auto;
  opacity: 0.5;
}

.page-wrapper {
  padding-top: var(--nav-height);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 600px) {
  .footer-links { gap: 1rem; }
  .page-hero { padding-bottom: 2rem; }
}

/* ============================================================
   LANDING PAGE — index.html uniquement
   ============================================================ */

/* Empêche le scroll sur desktop */
.landing-body {
  overflow: hidden;
  height: 100vh;
}

/* Structure flex colonne pleine hauteur */
.landing {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

/* Toggle langue flottant (remplace la navbar) */
.landing-lang {
  position: fixed;
  top: 1.2rem;
  right: 1.5rem;
  z-index: 200;
}

/* === HEADER === */
.landing-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 2rem 1rem;
  flex-shrink: 0;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.landing-logo {
  height: clamp(50px, 8vh, 90px);
  width: auto;
  object-fit: contain;
  max-width: 320px;
}

.landing-names {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--rouge);
  margin: 0;
}

.landing-tagline {
  font-size: clamp(0.88rem, 1.5vw, 1.05rem);
  color: var(--gris-clair);
  font-weight: 400;
  font-style: italic;
  margin: 0;
  max-width: 520px;
}

.landing-social {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.3rem;
}

.landing-social a {
  font-family: var(--font-corps);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gris-texte);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-sm);
  transition: color var(--transition), border-color var(--transition);
}

.landing-social a:hover {
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

/* === GRILLE DE TUILES === */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  flex: 1;
  min-height: 0; /* important pour que flex: 1 respecte la hauteur */
  gap: 1px;
  background: rgba(255, 255, 255, 0.04); /* joint visible */
}

/* === TUILE === */
.landing-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--gris-carte);
  background-size: cover;
  background-position: center;
  transition: flex var(--transition-lg);
  text-decoration: none;
}

/* Overlay sombre sur les photos */
.tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  transition: background var(--transition);
}

.landing-tile:hover .tile-overlay {
  background: rgba(0, 0, 0, 0.3);
}

/* Contenu texte de la tuile */
.tile-content {
  position: relative;
  z-index: 1;
  padding: 1rem 1.2rem 1.1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-top: 2px solid transparent;
  transition: border-color var(--transition);
}

.landing-tile:hover .tile-content {
  border-top-color: var(--rouge);
}

.tile-label {
  font-family: var(--font-titre);
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  letter-spacing: 0.06em;
  color: var(--blanc);
  display: block;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.tile-sub {
  font-size: clamp(0.74rem, 1vw, 0.78rem);
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  letter-spacing: 0.05em;
  display: block;
  transition: color var(--transition);
}

.landing-tile:hover .tile-sub {
  color: rgba(255, 255, 255, 0.8);
}

/* === FONDS DES TUILES === */

/* Tuiles avec photo */

/* Tuiles sans photo : gradient sombre */
.landing-tile--salle   { background: linear-gradient(160deg, #1c1c1c 0%, #111 100%); }
.landing-tile--talent  { background: linear-gradient(160deg, #1a0d10 0%, #111 100%); }
.landing-tile--dates   { background: linear-gradient(160deg, #111 0%, #181818 100%); }
.landing-tile--contact { background: linear-gradient(160deg, #0f0f0f 0%, #1a0d10 100%); }

/* Hover : légère teinte rouge sur les tuiles sans photo */
.landing-tile--salle:hover,
.landing-tile--talent:hover,
.landing-tile--contact:hover {
  background: linear-gradient(160deg, #2a1015 0%, #1a0a0e 100%);
}

.landing-tile--dates:hover {
  background: linear-gradient(160deg, #1a1a1a 0%, #220d10 100%);
}

/* === RESPONSIVE === */

/* Tablette : 2 colonnes */
@media (max-width: 768px) {
  .landing-body { overflow: auto; height: auto; }

  .landing { height: auto; min-height: 100vh; }

  .landing-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, minmax(120px, 1fr));
  }

  .landing-header { padding: 1.2rem 1rem 0.8rem; }
  .landing-logo { height: clamp(40px, 7vh, 70px); }
}

/* Mobile : 1 colonne ou 2 compact */
@media (max-width: 480px) {
  .landing-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 100px);
  }

  .tile-label { font-size: 1rem; }
  .tile-content { padding: 0.7rem; }
  .tile-sub { display: none; }
}

/* Slide dont le sujet est en bas de l'image (public de rue) */
.hero-bg-slide--low { background-position: center 78%; }

/* Sur téléphone, une seule photo de fond.
   Les quatre images du diaporama pèsent 650 Ko et se téléchargent
   toutes dès l'ouverture, pour un bandeau haut de quelques
   centimètres qu'on dépasse en une seconde. En masquer trois évite
   566 Ko sur données mobiles — le navigateur ne charge pas l'image
   de fond d'un élément en display: none. */
@media (max-width: 700px) {
  .hero-bg-slide:not(:first-child) { display: none; }
  .hero-bg-slide:first-child { opacity: 1; }
}

/* ============================================================
   FICHE SPECTACLE — mise en page compacte des pages Salle et Rue

   Objectif : que tout l'essentiel (durée, public, documents,
   histoire, bande-annonce, affiche) tienne sur une seule vue,
   comme sur l'ancien site, plutôt que de s'étaler en sections
   successives qui obligent à faire défiler.
   ============================================================ */
.section--compact {
  padding: 3.5rem 0 4.5rem;
}

.fiche {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 4rem;
  align-items: start;
}

/* Le texte a besoin de respirer même dans une mise en page dense :
   c'est l'espacement entre les blocs qui rend une fiche lisible,
   pas la hauteur totale de la page. */
.fiche-principal > p { margin-bottom: 1rem; }

.fiche-principal .info-block { margin-bottom: 0.4rem; }

.fiche-principal .doc-links { gap: 0.9rem; }

.fiche-principal .callout { margin-bottom: 0; }

/* Un titre de section discret : on est déjà dans la page, pas
   besoin du grand titre centré avec son ornement. */
.titre-section {
  font-family: var(--font-titre);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  letter-spacing: 0.03em;
  color: var(--blanc);
  margin: 2.8rem 0 1.2rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--rouge);
}

/* Le premier titre de la colonne de droite doit s'aligner avec
   le haut de la colonne de gauche, pas se décaler d'une marge. */
.titre-section--premier { margin-top: 0; }

.fiche-media .figure { margin: 0; }

/* L'affiche est un format portrait très haut : à pleine largeur de
   colonne elle ferait à elle seule un écran. On la borne en hauteur
   pour que la fiche complète reste lisible d'un coup d'œil. */
.fiche-media .figure img {
  width: auto;
  max-width: 100%;
  max-height: 38vh;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--r-md);
}

@media (max-width: 900px) {
  .fiche-media .figure img { max-height: 70vh; }
}

/* Sous 900px les deux colonnes s'empilent : la bande-annonce et
   l'affiche passent sous le texte. */
@media (max-width: 900px) {
  .fiche {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .titre-section--premier { margin-top: 1.5rem; }
}

/* Sur les pages de fiche, le bandeau de titre est réduit : il
   annonce la page sans occuper tout l'écran. */
body[data-page="salle"] .page-hero,
body[data-page="rue"] .page-hero {
  min-height: 0;
  padding-top: calc(var(--nav-height) + 2rem);
  padding-bottom: 1.8rem;
}

body[data-page="salle"] .page-hero .hero-title,
body[data-page="rue"] .page-hero .hero-title {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
}

/* La page Talent porte un bandeau d'émissions sous le titre :
   son hero a besoin d'un peu plus de hauteur que les autres. */
body[data-page="talent"] .page-hero {
  min-height: 0;
  padding-bottom: 2.4rem;
}