/*
  Projet : Site 15A
  Fichier : css/header.css
  Version : 0.27.0 — 2026-07-19 17:01
  Objectif : styles du header + menu communs (partials/header.php), dont le
             CTA « Contact » persistant (PC + menu latéral mobile).
*/
h1 {
  font-family: "nulshock";
}
h2 {
  font-family: "nulshock";
  font-size: 1.25rem;
}



.picto {
  width: 3rem;
}

/* Hero Section */ 
.hero {
  background-image: url(../images/club2/header3.0.jpg);  
  background-size: cover;
  background-repeat: no-repeat;
  height: 125vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  text-align: center;
}
.hero-content {
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 3rem;
}
.hero-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  padding: 0 2rem;
}
.hero-image {
  width: 75%;
}

/* Navbar */
.navbar {
  position: absolute;
  top: 0;
  width: 100%;
  background: transparent;
  z-index: 1000;
}
.navbar-button {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 5px;
}

/* nav mobile */ 

/* navbar phone */
#mobile-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: background-color 0.3s ease;
  z-index: 100; 
}
#mobile-nav.scrolled {
  background-color: rgba(0, 0, 0, 0.5);
}
.mobile-images {
  display: flex;
  padding: 0px 25px 0px 25px;
  gap: 0px;
  width: 100%;
  height: 65px;
}
#pc-nav{
  display: flex;
  padding: 0px 25px 0px 25px;
  gap: 0px;
  height: 65px;
}
.navbar-logo.mobile-nav-image {
  width: 30px;
  height: auto;
  z-index: 3;
}
.navbar-logo {
  position: fixed;
  z-index: 100000;
  top: 1%;
  left: 6%;
}

/* navbar pc */
#pc-nav{
  display: none;
}
.image-stack {
  position: relative;
}


/* navbar les deux */
.overlay-image {
  position: absolute;
  top: 39%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  pointer-events: none;
}
.image-stack {
  position: relative; /* Assure que les enfants absolus se basent sur lui */
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay-image {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}

.image-stack:hover .overlay-image {
  transform: translate(-50%, -50%) scale(1.1); /* Agrandissement sans décalage */
}

/* modal sidebar */
.side-menu {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  /* Le menu peut contenir plus d'entrées que la hauteur d'écran (petits
     téléphones) : on le rend défilable EN INTERNE au lieu de laisser ses
     dernières entrées (ex. « CGU ») déborder en haut de la page. */
  overflow-y: auto;
  /* Fermé = hors écran (top: -100%) ET « visibility: hidden ». C'est la
     visibilité qui garantit que la dernière entrée (ex. « CGU »), collée au bord
     haut, ne dépasse jamais dans la page sur les écrans un peu courts.
     Ouverture INSTANTANÉE (pas de transition) : animer `top` de -100% à 0 restait
     bloqué dans certains moteurs et empêchait le menu de s'ouvrir. */
  visibility: hidden;
  background: #000000ab;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  align-items: center;
  backdrop-filter: blur(10px);
}
.side-menu.open {
  top: 0;
  visibility: visible;
}
.image-stack-mobile{
  margin: auto;
  z-index: 1;
}
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 10px;
  color: white;
}
.side-menu ul {
  list-style: none;
  padding: 0;
  /* La pilule de connexion s'insère désormais AU-DESSUS de cette liste sur
     téléphone (voir auth15a-skin.css) : elle apporte déjà de l'air, donc la
     liste n'a plus besoin d'une marge aussi grande pour ne pas coller. */
  margin: 24px 0 0 0;
}
.side-menu ul li {
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
}
.side-menu ul li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: nulshock;
}

.side-menu ul li img {
  width: 28px !important;
}


/* Sections */
.section-white {
  position: relative;
}

/* Containers */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.text-light-blue {
  color: #fff;
}
.text-blue {
  color: #013cb2;
}

@keyframes zoomThenRotate {
  0% {
    transform: scale(1) rotateY(0deg);
  }
  50% {
    transform: scale(1.3) rotateY(0deg);
  }
  100% {
    transform: scale(1.3) rotateY(180deg);
  }
}





/* Media Queries */
@media (min-width: 576px) {
  .container-left {
    gap: 0rem;
    padding: 17rem 2rem !important;
}

}

@media (orientation: landscape) {
  .first-section {
    margin-top: 18rem;
  }

  .hero {
    height: 150vh;
  }

  .hero-image {
    width: 27rem;
  }
  /*hero index*/
  .hero_index {
    height: 150vh;
  }

  .hero-image_index {
    width: 27rem;
  }
}

@media (min-width: 768px) {
  .mobile-nav-image.gif-scroll-mobile {
    height: auto;
    width: 155px !important;
  }
  .overlay-image {
    width: 125px !important;
  }
  /* .overlay-image.bleu {
    left: 83%;
    width: 65px !important;
  } */
  .mobile-images {
    height: 85px;
  }
  .side-menu ul {
    list-style: none;
    padding: 0;
    margin: 125px 0 0 0;
}
}

@media (min-width: 992px) {
  .side-menu ul {
    list-style: none;
    padding: 0;
    margin: 125px 0 0 0;
    display: none;
  }
  .hero-image_index {
    width: 350px!important;
  }
  .overlay-image {
    width: 76px !important;
    transition: transform 0.3s ease;
  }
  .overlay-image.bleu {
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px !important;
    height: auto;
    pointer-events: none;
  } 
  .overlay-image.bleu.terrain {
    width: 85px !important;
    top: 10%;
  }
  .container {
    flex-direction: row;
    margin: 0;
    padding: 0 7rem;
    gap: 1rem;
  }
  .container-left {
    gap: 0rem;
    padding: 19rem 11rem !important;
  }
  
}

@media (min-width: 1200px) {
  .overlay-image {
  }
  .overlay-image.bleu {
    left: 51%;
    top: 2%;
  }
  /* .image-stack:hover .overlay-image.orange {
    transform: scale(1.2);
    transition: transform 0.3s ease;
    left: 19%;
  } */
  /* .image-stack:hover .overlay-image.bleu {
    transform: scale(1.2);
    transition: transform 0.3s ease;
    left: 28%;
  } */
}

@media (min-width: 1400px) {
  .overlay-image {
  }
  .overlay-image.bleu {
  }
  .container-left {
    gap: 0rem;
    padding: 24rem 11rem !important;
  }
}

/* ------------------------------------------------------------------ *
 *  Menu PC (rangée de boules verticale, à droite) : avec 7 boules, sur
 *  un écran LARGE mais PEU HAUT (portable en paysage), le bas du menu
 *  descend jusqu'aux boutons de défilement et les touche. Sur ces
 *  écrans, on REMONTE le menu (ancré en haut) pour qu'il dégage les
 *  boutons. Sur écran assez haut, la position d'origine est conservée.
 *  (Réglé dans la feuille PARTAGÉE du menu → vaut sur toutes les pages.)
 * ------------------------------------------------------------------ */
@media (min-width: 992px) and (max-height: 850px) {
  .pc-images {
    top: 12px !important;
    bottom: auto !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------------ *
 *  CTA « Contact » PERSISTANT (mailto:contact@15a.fr)
 *  Deux déclinaisons : bureau (#pc-nav) et menu latéral mobile (#side-menu).
 * ------------------------------------------------------------------ */

/* (Le bouton « Contact » d'en-tête a été retiré : le contact se fait désormais
   via un bouton dans le pied de page, qui prend la couleur d'accent de la page.) */