/* 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 : titre, photo, présentation, camion ENTREZ
   (ancienne version avec vidéo de fond : _archives/accueil-video-2026-09/)
   ========================================================= */

.page-accueil {
  min-height: 100vh;
  min-height: 100svh;
  background: #0b0b0b;
  color: var(--blanc);
  transition: opacity .45s ease;
}
.page-accueil.sortie { opacity: 0; }

.entree {
  height: 100vh;
  height: 100svh;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(16px, 4vh, 48px) clamp(16px, 2.5vw, 40px) clamp(12px, 3vh, 32px);
  display: grid;
  grid-template-columns: 53fr 47fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    ".      titre"
    "photo  texte"
    "camion camion";
  column-gap: clamp(20px, 3.5vw, 56px);
}

/* Titre en haut à droite */
.entree__titre { grid-area: titre; text-align: right; animation: fondu .7s .1s ease-out both; }
.entree__titre h1 { margin: 0; line-height: 0; }
.entree__titre img { width: min(100%, 660px); }

/* Photo de la salle, bords légèrement fondus dans le noir */
.entree__photo {
  grid-area: photo;
  margin: 0;
  min-height: 0;
  position: relative;
  animation: fondu .9s ease-out both;
}
.entree__photo img,
.entree__photo video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 35% 60%;
}
.entree__photo::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 24px 10px #0b0b0b;
}

/* Bouton pause de la vidéo du lieu (au-dessus du fondu des bords) */
.entree__pause {
  position: absolute;
  right: 16px; bottom: 16px;
  z-index: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s, background-color .2s;
}
.entree__pause[hidden] { display: none; }
.entree__pause:hover, .entree__pause:focus-visible { opacity: 1; background: var(--orange); }
.entree__pause svg { width: 16px; height: 16px; fill: var(--blanc); }
.entree__pause .ic-play { display: none; }
.entree__photo.en-pause .ic-play { display: block; }
.entree__photo.en-pause .ic-pause { display: none; }
.entree__photo video { object-position: 50% 50%; }

/* Slogan en haut, présentation plus bas */
.entree__texte {
  grid-area: texte;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: clamp(8px, 6vh, 90px);
}
.entree__slogan {
  margin: .5em 0 0;
  text-align: right;
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 2.5rem);
  line-height: 1.2;
  animation: fondu .7s .3s ease-out both;
}
.entree__presentation {
  font-size: clamp(1rem, 1.75vw, 1.7rem);
  line-height: 1.4;
  animation: fondu .7s .5s ease-out both;
}
.entree__presentation p { margin: 0 0 1.4em; }
.entree__presentation p:last-child { margin-bottom: 0; }

/* Camion = bouton ENTREZ (le mot se loge dans le grand panneau du camion) */
.entree__camion {
  grid-area: camion;
  justify-self: center;
  position: relative;
  display: block;
  width: clamp(150px, 24vh, 270px);
  margin-top: clamp(10px, 3vh, 36px);
  container-type: inline-size;
  text-decoration: none;
  border-radius: 6px;
  animation: fondu .7s .8s ease-out both;
}
.entree__camion img { display: block; width: 100%; }
.entree__entrez {
  position: absolute;
  /* position du panneau dans l'image du camion (550 × 368) */
  left: 3.6%; top: 15%; width: 61.5%; height: 27.2%;
  display: grid; place-items: center;
}
/* Le mot ENTREZ est un bouton, comme sur l'ancien écran d'entrée : cadre, survol orange */
.entree__mot {
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: 8.5cqw;
  line-height: 1.15;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--orange-vif);
  padding: .12em .55em .12em .67em;   /* un peu plus à gauche : compense l'espacement des lettres */
  border: 2px solid currentColor;
  border-radius: 3px;
  transition: background-color .2s, color .2s, border-color .2s;
}
/* Au repos : le moteur tourne au ralenti en permanence (petites fumées : accueil.js) */
.entree__camion img,
.entree__entrez { animation: moteur .22s 1.5s linear infinite; }
/* Au survol : le moteur tourne, le bouton s'allume */
.entree__camion:hover img,
.entree__camion:focus-visible img { animation: moteur .18s linear infinite; }
.entree__camion:hover .entree__entrez,
.entree__camion:focus-visible .entree__entrez { animation: moteur .18s linear infinite; }
.entree__camion:hover .entree__mot,
.entree__camion:focus-visible .entree__mot,
.entree__camion.part .entree__mot {
  color: var(--blanc);
  background: var(--orange);
  border-color: var(--orange);
}
/* Après le clic : « C'est parti ! », plus long, donc un peu plus petit */
.entree__camion.part .entree__mot { font-size: 6.2cqw; letter-spacing: .06em; padding: .12em .5em; }
.entree__camion:focus-visible { outline: 3px solid var(--orange-vif); outline-offset: 6px; }
/* Au clic : le camion démarre (nuage de gaz), puis file vers la droite et sort de l'écran.
   --trajet = distance jusqu'au bord droit, calculée par accueil.js. Durée totale < 3 s. */
.entree__camion.part {
  animation: depart 2.1s .35s cubic-bezier(.5, 0, .85, .55) forwards;
  pointer-events: none;
}
.entree__camion.part img,
.entree__camion.part .entree__entrez { animation: moteur .12s linear infinite; }

@keyframes moteur {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(.5px, -1px); }
  75%      { transform: translate(-.5px, .5px); }
}
@keyframes depart {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--trajet, 110vw)); }
}
@keyframes fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Nuages d'échappement style BD : contour blanc comme le dessin du camion */
.page-accueil { overflow-x: clip; }
.echappement { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.nuage {
  position: absolute;
  width: var(--taille, 46px);
  transform: translate(-100%, -50%);
  transform-origin: 100% 50%;
  animation: nuage var(--duree, 1.1s) ease-out forwards;
}
.nuage svg { display: block; width: 100%; height: auto; overflow: visible; }
.nuage path { fill: #0b0b0b; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
@keyframes nuage {
  from { opacity: 1; transform: translate(-100%, -50%) scale(.25) rotate(0deg); }
  20%  { opacity: 1; }
  to   { opacity: 0; transform: translate(calc(-100% - var(--dx, 34px)), calc(-50% - var(--dy, 22px))) scale(1.15) rotate(var(--rot, -8deg)); }
}

/* Téléphone, tablette en portrait : tout en colonne, la page peut défiler */
@media (max-width: 800px), (max-aspect-ratio: 1/1) {
  .entree {
    height: auto;
    min-height: 100svh;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "titre" "photo" "texte" "camion";
    row-gap: 18px;
  }
  .entree__titre { text-align: center; }
  .entree__photo img { height: auto; aspect-ratio: 4 / 3; }
  .entree__photo video { height: auto; aspect-ratio: 16 / 9; }
  .entree__texte { padding-bottom: 0; gap: 18px; }
  .entree__slogan { text-align: center; margin: 0; }
  .entree__presentation { font-size: 1.05rem; text-align: center; }
  .entree__camion { width: min(62vw, 240px); margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entree *, .entree { animation: none !important; }
  .page-accueil { transition: none; }
}