/* =========================================================
   UI.CSS
   ---------------------------------------------------------
   Interface hors modales :
   - bouton musique
   - animation des barres
   - bouton menu
   - menu du haut
   ========================================================= */

/* =========================================================
   BOUTON MUSIQUE
   ---------------------------------------------------------
   Bouton fixe en haut à gauche
   ========================================================= */
.music-btn{
  position:fixed;
  top:calc(var(--bars-h) / 2);
  left:28px;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  z-index:20;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  pointer-events:auto;
}

/* =========================================================
   CONTENEUR DES BARRES AUDIO
   ---------------------------------------------------------
   Petit bloc qui contient les barres animées
   ========================================================= */
.footer-sound{
  position:relative;
  width:18px;
  height:18px;
  margin:0 auto;
  pointer-events:none;
}

/* =========================================================
   BARRE AUDIO GENERIQUE
   ---------------------------------------------------------
   Chaque petite barre verticale du bouton musique
   ========================================================= */
.sbar{
  position:absolute;
  bottom:2px;
  width:2px;
  height:4px;
  border-radius:2px;
  opacity:.95;
  background-color:var(--ui-dim);
  animation-duration:500ms;
  animation-play-state:running;
  animation-direction:alternate;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

/* Barre 1 */
.sbar#bar-1{
  left:0;
  animation-name:danceHeight1;
  animation-delay:0ms;
}

/* Barre 2 */
.sbar#bar-2{
  left:4px;
  animation-name:danceHeight2;
  animation-delay:300ms;
}

/* Barre 3 */
.sbar#bar-3{
  left:8px;
  animation-name:danceHeight3;
  animation-delay:600ms;
}

/* Barre 4 */
.sbar#bar-4{
  left:12px;
  animation-name:danceHeight4;
  animation-delay:900ms;
}

/* =========================================================
   BARRE SANS ANIMATION
   ---------------------------------------------------------
   Utilisé quand le son est coupé
   ========================================================= */
.sbar.noAnim{
  animation:none !important;
}

/* =========================================================
   ETAT MUSIQUE OFF
   ---------------------------------------------------------
   Barres plus basses et moins visibles
   ========================================================= */
.music-btn:not(.on) .sbar{
  height:4px;
  opacity:.65;
  background-color:var(--ui-dim);
}

/* =========================================================
   ETAT MUSIQUE ON
   ---------------------------------------------------------
   Barres avec léger glow
   ========================================================= */
.music-btn.on .sbar{
  background-color:var(--ui-dim);
  box-shadow:
    0 0 6px rgba(255,255,255,.10),
    0 0 10px rgba(255,255,255,.06);
}

/* =========================================================
   ANIMATION BARRE 1
   ========================================================= */
@keyframes danceHeight1{
  0%{ height:3px; }
  100%{ height:14px; }
}

/* =========================================================
   ANIMATION BARRE 2
   ========================================================= */
@keyframes danceHeight2{
  0%{ height:6px; }
  100%{ height:16px; }
}

/* =========================================================
   ANIMATION BARRE 3
   ========================================================= */
@keyframes danceHeight3{
  0%{ height:4px; }
  100%{ height:12px; }
}

/* =========================================================
   ANIMATION BARRE 4
   ========================================================= */
@keyframes danceHeight4{
  0%{ height:7px; }
  100%{ height:15px; }
}

/* =========================================================
   BOUTON MENU
   ---------------------------------------------------------
   Bouton burger / croix en haut à droite
   ========================================================= */
.menu-toggle{
  position:fixed;
  top:calc(var(--bars-h) / 2);
  right:28px;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  z-index:26;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  pointer-events:auto;
}

/* =========================================================
   CONTENEUR INTERNE DES LIGNES DU BURGER
   ========================================================= */
.menu-toggle-lines{
  position:relative;
  width:26px;
  height:26px;
}

/* =========================================================
   LIGNES DU BURGER
   ---------------------------------------------------------
   Deux traits qui deviennent une croix à l’ouverture
   ========================================================= */
.menu-toggle-lines span{
  position:absolute;
  left:0;
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--ui-dim);
  transition:
    transform .25s ease,
    top .25s ease,
    opacity .22s ease;
}

/* Ligne haute */
.menu-toggle-lines span:nth-child(1){
  top:8px;
}

/* Ligne basse */
.menu-toggle-lines span:nth-child(2){
  top:14px;
}

/* =========================================================
   ETAT MENU OUVERT - LIGNE 1
   ========================================================= */
body.menu-open .menu-toggle-lines span:nth-child(1){
  top:13px;
  transform:rotate(45deg);
}

/* =========================================================
   ETAT MENU OUVERT - LIGNE 2
   ========================================================= */
body.menu-open .menu-toggle-lines span:nth-child(2){
  top:13px;
  transform:rotate(-45deg);
}

/* =========================================================
   MENU HORIZONTAL DU HAUT
   ---------------------------------------------------------
   Bloc contenant LOGIN / CONTACT
   Positionné à gauche du bouton menu
   ========================================================= */
.top-menu{
  position:fixed;
  top:calc(var(--bars-h) / 2);
  right:78px;
  transform:translateY(-50%) translateX(20px);
  z-index:25;
  display:flex;
  align-items:center;
  gap:16px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear .25s;
}

/* =========================================================
   ETAT MENU OUVERT
   ---------------------------------------------------------
   Le menu devient visible et cliquable
   ========================================================= */
body.menu-open .top-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0);
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear 0s;
}

/* =========================================================
   LIENS DU MENU
   ---------------------------------------------------------
   Style des liens LOGIN / CONTACT
   ========================================================= */
.top-menu a{
  color:rgba(220,235,245,.68);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:clamp(12px, .95vw, 16px);
  line-height:1;
  transition:color .18s ease, transform .18s ease;
}

/* Hover des liens */
.top-menu a:hover{
  color:rgba(235,248,255,.95);
  transform:translateY(-1px);
}

/* Séparateur vertical | */
.top-menu .sep{
  color:rgba(220,235,245,.30);
  font-size:16px;
  line-height:1;
}