/* La Baraque TV — feuille de style principale */

:root {
  --orange: #c44b05;          /* un peu plus soutenu qu'avant (#d45306) : texte blanc lisible dessus */
  --orange-vif: #ef6a1a;
  --noir: #1a1a1a;
  --texte: #333;
  --blanc: #fff;
  --saumon: #f6d3c4;

  --f-titre: 'Archivo Black', Helvetica, Arial, sans-serif;
  --f-menu: 'Oswald', Helvetica, Arial, sans-serif;
  --f-texte: 'Open Sans', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-texte);
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

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

/* =========================================================
   PAGE D'ACCUEIL — un seul écran, rien dessous
   ========================================================= */

.page-accueil {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--noir);
  transition: opacity .45s ease;
}
.page-accueil.sortie { opacity: 0; }

.hero {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--noir) url('../img/hero-poster.jpg') center / cover no-repeat;
}

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Assombrit légèrement la vidéo pour faire ressortir le titre et le bouton */
.hero__voile {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.55) 100%),
    rgba(0,0,0,.12);
}

/* Titre (image détourée) + slogan */
.hero__titre {
  position: absolute;
  top: 26%;
  right: 6vw;
  width: min(60vw, 1000px);
  text-align: right;
}
.hero__titre h1 { margin: 0; line-height: 0; }
.hero__titre picture { display: block; }
/* Apparition rapide en petit fondu, l'un après l'autre (tout est visible en 1,5 s).
   Ancienne version, plus lente (3,8 s), en fondu flou : animation flou-net 1.6s, départs .4s / 1.1s / 1.8s, ENTREZ 2.8s */
.hero__titre picture:first-child { animation: fondu .7s .1s ease-out both; }
.hero__sous-titre               { animation: fondu .7s .3s ease-out both; }
.hero__titre img {
  width: 100%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.hero__sous-titre { margin-top: 1.2%; }
.hero__sous-titre img { filter: drop-shadow(0 1px 5px rgba(0,0,0,.7)); }
.hero__slogan {
  margin: .9em 0 0;
  font-family: var(--f-texte);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 2.1rem);
  color: var(--blanc);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  animation: fondu .7s .5s ease-out both;
}

@keyframes fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes flou-net {
  from { opacity: 0; filter: blur(16px); transform: scale(1.06); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

.hero__entrez {
  position: absolute;
  left: 50%; bottom: 13%;
  transform: translateX(-50%);
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.1vw + .6rem, 1.6rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blanc);
  padding: .55em 2em;
  border: 2px solid var(--blanc);
  border-radius: 3px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
  transition: background-color .25s, border-color .25s, transform .25s;
  animation: apparition-bouton .7s .8s ease-out both;
}
.hero__entrez:hover,
.hero__entrez:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  transform: translateX(-50%) translateY(-2px);
}
.hero__entrez:focus-visible { outline: 3px solid var(--blanc); outline-offset: 4px; }

@keyframes apparition-bouton {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__pause {
  position: absolute;
  right: 16px; bottom: 16px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s, background-color .2s;
}
.hero__pause:hover, .hero__pause:focus-visible { opacity: 1; background: var(--orange); }
.hero__pause svg { width: 18px; height: 18px; fill: var(--blanc); }
.hero__pause .ic-play { display: none; }
.hero.en-pause .hero__pause .ic-play { display: block; }
.hero.en-pause .hero__pause .ic-pause { display: none; }

/* Compte à rebours « vieux film » (au clic sur ENTREZ) */
/* Petit compte à rebours au centre, par-dessus la vidéo d'accueil */
.rebours {
  position: fixed; inset: 0;
  z-index: 10;
  display: grid; place-items: center;
  pointer-events: none;
}
.rebours[hidden] { display: none; }
/* compte à rebours lancé : tout l'écran devient cliquable pour passer à la suite */
.rebours:not([hidden]) { pointer-events: auto; cursor: pointer; }
.rebours__video {
  width: clamp(180px, 20vw, 300px);
  height: auto;
  border-radius: 4px;
  box-shadow: 0 6px 30px rgba(0,0,0,.6);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .35s ease, transform .35s ease;
}
.rebours.visible .rebours__video { opacity: 1; transform: none; }
.rebours__passer { pointer-events: auto; }

/* Pendant le compte à rebours, le bouton ENTREZ s'efface */
.hero.en-rebours .hero__entrez,
.hero.en-rebours .hero__pause {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity .3s ease;
}
.rebours__passer {
  position: absolute;
  right: 16px; bottom: 16px;
  font-family: var(--f-menu);
  font-size: .95rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 3px;
  padding: .35em .9em;
  cursor: pointer;
}
.rebours__passer:hover, .rebours__passer:focus-visible { color: #fff; border-color: var(--orange); background: var(--orange); }

/* Écran vertical ou presque carré (mobile, tablette en portrait) :
   titre centré et plus large */
@media (max-aspect-ratio: 5/4) {
  .hero__titre {
    top: 30%;
    left: 5vw; right: 5vw;
    width: auto;
    text-align: center;
  }
  .hero__slogan { font-size: clamp(1rem, 4.2vw, 1.6rem); }
  .hero__entrez { bottom: 18%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__titre picture, .hero__slogan, .hero__entrez { animation: none; }
  .page-accueil { transition: none; }
}