/* La Baraque TV — page principale : en-tête et menu plein écran
   (inspiré du menu de leoboprivatereserve.com) */

:root {
  --fond-menu: #1d1613;      /* noir chaud, un peu brun */
  --texte-menu: #bfb1a6;     /* sable éteint */
  --texte-menu-vif: #fff;
}

.page-baraque {
  background: var(--fond-menu);
  color: var(--texte-menu);
}

/* ---------- En-tête fixe ---------- */

.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(16px, 3vw, 40px);
  pointer-events: none;           /* seuls le bouton et le logo sont cliquables */
}
.entete > * { pointer-events: auto; }

/* Fond de la barre dès que l'on fait défiler la page */
.entete::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(29, 22, 19, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  opacity: 0;
  transition: opacity .3s;
}
.entete.defile::before { opacity: 1; }
.menu-ouvert .entete::before { opacity: 0; }

/* Barre de menu visible : masquée par défaut (petits écrans) */
.entete__nav { display: none; }

.entete__menu {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--texte-menu-vif);
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.entete__icone {
  position: relative;
  width: 26px; height: 12px;
}
.entete__icone span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), top .3s cubic-bezier(.2,.7,.2,1);
}
.entete__icone span:first-child { top: 0; }
.entete__icone span:last-child  { top: 10px; }
body:not(.menu-ouvert) .entete__menu:hover .entete__icone span:first-child { transform: translateX(4px); }
.entete__menu:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }

/* Bouton ouvert : les deux traits forment une croix */
.menu-ouvert .entete__icone span:first-child { top: 5px; transform: rotate(45deg); }
.menu-ouvert .entete__icone span:last-child  { top: 5px; transform: rotate(-45deg); }

/* Logo + bouton « Éteindre » en dessous */
.entete__marque {
  display: flex;
  flex-direction: column;
  align-items: flex-end;          /* mobile : logo à droite */
  gap: 6px;
}
@media (min-width: 1200px) and (min-aspect-ratio: 1/1) {
  .entete__marque { align-items: flex-start; }   /* grand écran : logo à gauche */
}

/* ---------- Logo « Web TV » en bas à droite, qui tourne sur lui-même ---------- */
.mascotte {
  position: fixed;
  right: clamp(10px, 2vw, 28px);
  bottom: clamp(10px, 2.5vh, 26px);
  z-index: 15;                       /* sous l'en-tête et le menu, au-dessus des sections */
  width: clamp(35px, 3.7vw, 52px);   /* taille précédente réduite d'un tiers */
  perspective: 600px;                /* donne du relief à la rotation */
  pointer-events: none;              /* ne gêne jamais un clic sur ce qui est dessous */
  transition: opacity .3s;
}
.mascotte img {
  display: block;
  width: 100%;
  height: auto;
  /* halo clair : détache le fauteuil noir du fond sombre */
  filter: drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 7px rgba(255,235,215,.35));
  animation: tourne-sur-lui-meme 7s linear infinite;
}
@keyframes tourne-sur-lui-meme {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.menu-ouvert .mascotte { opacity: 0; }
/* Téléphone : pas de logo pivotant (il masquait du contenu) */
@media (max-width: 700px) { .mascotte { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mascotte img { animation: none; }
}

/* ---------- Effet « vieux téléviseur » : animations utilisées par la veille (plus bas) ---------- */
@keyframes volet { to { transform: scaleY(1); } }
@keyframes ligne-apparait { to { opacity: 1; } }
@keyframes ligne-retracte { to { transform: scaleX(.004) scaleY(1.6); } }
@keyframes point-eteint { to { opacity: 0; transform: scaleX(.001) scaleY(.4); } }
@keyframes message-apparait { to { opacity: 1; } }

/* ---------- Veille (souris sortie par le haut / retour sur l'onglet) ----------
   Même effet que « Éteindre », plus rapide et sans texte ; ne bloque jamais les clics. */
.veille {
  position: fixed; inset: 0;
  z-index: 99;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.veille.eteinte, .veille.rallume { visibility: visible; }
.veille__volet {
  position: absolute; left: 0; right: 0;
  height: 50.5%;
  background: #000;
  transform: scaleY(0);
}
.veille__volet--haut { top: 0; transform-origin: top; }
.veille__volet--bas { bottom: 0; transform-origin: bottom; }
.veille__ligne {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(255,255,255,.9), 0 0 40px 10px rgba(255,220,190,.5);
  opacity: 0;
}
/* Extinction (≈ 1,6 s) : l'image se referme en une ligne (0,6 s), la ligne devient un point (0,46 s), le point s'éteint */
.veille.eteinte .veille__volet { animation: volet .6s cubic-bezier(.55,0,.9,.4) forwards; }
.veille.eteinte .veille__ligne {
  animation:
    ligne-apparait .16s .47s forwards,
    ligne-retracte .46s .6s cubic-bezier(.6,0,.4,1) forwards,
    point-eteint .5s 1.06s ease-out forwards;
}
/* « Au revoir » : apparaît au-dessus de la ligne pendant que l'image se referme, reste sur le noir,
   disparaît dès le rallumage */
.veille__texte {
  position: absolute; left: 0; right: 0; top: 50%;
  margin: 0;
  transform: translateY(calc(-100% - 28px));
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 18px rgba(255,220,190,.55);
  opacity: 0;
}
.veille.eteinte .veille__texte { animation: message-apparait .6s .5s ease-out forwards; }   /* écran presque noir */
/* Déjà noir (onglet quitté) : pas d'animation, pas de texte au retour */
.veille.eteinte.instantane .veille__volet { animation: none; transform: scaleY(1); }
.veille.eteinte.instantane .veille__ligne { animation: none; }
.veille.eteinte.instantane .veille__texte { animation: none; opacity: 0; }
/* Rallumage (≈ 0,9 s) : un point s'allume, s'étire en ligne, puis l'image s'ouvre */
.veille.rallume .veille__volet { transform: scaleY(1); animation: volet-ouvre .45s .45s cubic-bezier(.2,.6,.4,1) forwards; }
.veille.rallume .veille__ligne { animation: ligne-deploie .9s ease-out forwards; }
@keyframes volet-ouvre { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes ligne-deploie {
  0%   { opacity: 0; transform: scaleX(.004) scaleY(.6); }
  15%  { opacity: 1; transform: scaleX(.004) scaleY(1.6); }
  50%  { opacity: 1; transform: scaleX(1) scaleY(1); }
  100% { opacity: 0; transform: scaleX(1) scaleY(.3); }
}

@media (prefers-reduced-motion: reduce) {
  .veille { display: none; }
}

.entete__logo { position: relative; display: block; }
.entete__logo img {
  display: block;
  width: clamp(187px, 21.3vw, 293px);   /* taille précédente + 1/3 */
  height: auto;
  transition: opacity .3s;
}

/* Effet « drapeau au vent » : le logo est découpé en fines bandes verticales
   qui ondulent en décalé ; le bord gauche reste fixe, comme accroché à un mât. */
.drapeau {
  position: absolute; inset: 0;
  display: flex;
  pointer-events: none;
}
.drapeau span {
  flex: 1 0 0;
  margin-right: -0.5px;              /* évite les fines lignes entre bandes */
  background-repeat: no-repeat;
  animation: vague 1.3s ease-in-out infinite alternate;
  animation-delay: var(--retard);
  will-change: transform;
}
@keyframes vague {
  from { transform: translateY(calc(var(--amplitude) * -1)); filter: brightness(1.12); }
  to   { transform: translateY(var(--amplitude));            filter: brightness(.82); }
}
.entete__logo.flotte img { opacity: 0; }   /* l'image reste pour la taille et l'accessibilité */

/* Au passage de la souris (ou au clavier), le drapeau retombe : logo net et immobile */
.drapeau { transition: opacity .25s ease; }
.entete__logo.flotte img { transition: opacity .25s ease; }
.entete__logo.flotte:hover .drapeau,
.entete__logo.flotte:focus-visible .drapeau { opacity: 0; }
.entete__logo.flotte:hover .drapeau span,
.entete__logo.flotte:focus-visible .drapeau span { animation-play-state: paused; }
.entete__logo.flotte:hover img,
.entete__logo.flotte:focus-visible img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .drapeau { display: none; }
  .entete__logo.flotte img { opacity: 1; }
}
.menu-ouvert .entete__logo img { opacity: .9; }

/* ---------- Menu plein écran ---------- */

.menu {
  position: fixed; inset: 0;
  z-index: 20;
  background: var(--fond-menu);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s;
}
.menu[hidden] { display: block; } /* on garde l'élément pour l'animation */
.menu.ouvert {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1), visibility 0s;
}

.menu__interieur {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: 110px clamp(24px, 8vw, 120px) 60px;
}

/* Rubriques */
.menu__rubriques ul { list-style: none; margin: 0; padding: 0; }
.menu__rubriques li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.menu.ouvert .menu__rubriques li { opacity: 1; transform: none; }
.menu.ouvert .menu__rubriques li:nth-child(1) { transition-delay: .08s; }
.menu.ouvert .menu__rubriques li:nth-child(2) { transition-delay: .13s; }
.menu.ouvert .menu__rubriques li:nth-child(3) { transition-delay: .18s; }
.menu.ouvert .menu__rubriques li:nth-child(4) { transition-delay: .23s; }
.menu.ouvert .menu__rubriques li:nth-child(5) { transition-delay: .28s; }
.menu.ouvert .menu__rubriques li:nth-child(6) { transition-delay: .33s; }
.menu.ouvert .menu__rubriques li:nth-child(7) { transition-delay: .38s; }

.menu__rubriques a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .28em 0;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.1vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texte-menu);
  transition: color .2s, transform .25s cubic-bezier(.2,.7,.2,1);
}
/* Petit carré orange (vide avec un point) qui apparaît devant la rubrique active */
.menu__rubriques a::before {
  content: '';
  flex: none;
  width: .42em; height: .42em;
  margin-right: 0;
  border: 3px solid var(--orange);
  background: radial-gradient(var(--orange) 0 32%, transparent 34%);
  opacity: 0;
  transform: scale(.4);
  width: 0;
  transition: opacity .2s, transform .25s, width .25s, margin-right .25s;
}
.menu__rubriques a.courant { color: var(--orange-vif); }   /* section affichée */
.menu__rubriques a.actif,
.menu__rubriques a:focus-visible {
  color: var(--texte-menu-vif);
  outline: none;
}
.menu__rubriques a.actif::before,
.menu__rubriques a:focus-visible::before {
  opacity: 1;
  transform: none;
  width: .42em;
  margin-right: .45em;
}

/* Aperçu : image qui change selon la rubrique */
.menu__apercu {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s .15s, transform .6s .15s cubic-bezier(.2,.7,.2,1);
}
.menu.ouvert .menu__apercu { opacity: 1; transform: none; }

.menu__image {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #120d0b;
}
.menu__image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .5s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.menu__image img.contenir { object-fit: contain; padding: 4%; }
.menu__image img.visible { opacity: 1; transform: none; }

.menu__legende {
  min-height: 1.4em;
  margin: .8em 0 1.4em;
  font-size: .95rem;
  font-style: italic;
  color: var(--texte-menu);
}

.menu__liens {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1.8em;
  margin: 0; padding: 0;
}
.menu__liens a {
  font-size: .95rem;
  color: var(--texte-menu-vif);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.menu__liens a:hover, .menu__liens a:focus-visible { color: var(--orange-vif); border-color: currentColor; outline: none; }

.menu__signature {
  margin: 1.2em 0 0;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange-vif);
}

/* Empêche la page de défiler sous le menu ouvert */
.menu-ouvert { overflow: hidden; }

/* ---------- Mobile / tablette en portrait ---------- */
@media (max-width: 800px), (max-aspect-ratio: 1/1) {
  .menu__interieur {
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: 90px;
    gap: 28px;
  }
  .menu__rubriques a { font-size: clamp(1.5rem, 7.5vw, 2.2rem); }
}

/* ---------- Grands écrans : barre de menu visible, pas de bouton MENU ---------- */
@media (min-width: 1200px) and (min-aspect-ratio: 1/1) {
  .entete { gap: 24px; }
  .entete__marque { flex: none; }                /* le logo ne se laisse jamais écraser */
  .entete__menu { display: none; }
  .menu { display: none !important; }

  .entete__nav {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 30px);
  }
  .entete__nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 0;
    font-family: var(--f-menu);
    font-weight: 500;
    font-size: clamp(.85rem, .9vw, 1rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--texte-menu);
    transition: color .2s;
  }
  /* Même petit carré orange que le menu plein écran, pour la section en cours */
  .entete__nav a::before {
    content: '';
    width: 0; height: .55em;
    margin-right: 0;
    border: 0 solid var(--orange);
    background: radial-gradient(var(--orange) 0 30%, transparent 33%);
    opacity: 0;
    transition: opacity .2s, width .25s, margin-right .25s;
  }
  .entete__nav a:hover,
  .entete__nav a:focus-visible { color: var(--texte-menu-vif); outline: none; }
  .entete__nav a.courant { color: var(--texte-menu-vif); }
  .entete__nav a.courant::before {
    width: .55em;
    margin-right: .5em;
    border-width: 2px;
    opacity: 1;
  }
  /* Soulignement orange au survol */
  .entete__nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .entete__nav a:hover::after,
  .entete__nav a:focus-visible::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .menu, .menu__rubriques li, .menu__apercu, .menu__image img { transition: none !important; }
}

/* ---------- Sections provisoires ---------- */
/* Sections pas encore construites : simple emplacement avec leur nom */
.attente > section.a-venir {
  min-height: 70vh;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.attente > section > h2 {
  margin: 0;
  font-family: var(--f-menu);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
}