/* Reset des marges et paddings */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Le body prend 100% de la hauteur */
html, body {
height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Disposer les éléments en colonne */
	overflow-x: hidden; /* Pour éviter les scrollbars horizontales */

}

header, .box-global {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Header */
header {
    height: 15vh;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Le body prend toute la hauteur */

}

.burger-menu {
  position: relative;
  z-index: 10; /* Met le menu en avant */
}

/* Cacher la case à cocher */
#menu-toggle {
  display: none;
}

/* Style de l'icône du menu burger */
.menu-icon {
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-icon span {
  display: block;
  width: 30px;
  height: 4px;
  background-color: white;
  transition: transform 0.3s ease;
}

/* Rotation de l'icône au clic */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}

#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Style du menu déroulant */
.menu {
 position: absolute;
  top: 40px;
  right: 0;
  width: 200px;
  background-color: black;
  border-radius: 4px;
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
  z-index: 9;
  font-family: "Lato", sans-serif;
   border: 4px solid black; /* Bordure blanche autour du menu burger */
   box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Effet d'ombre lumineuse */
}


#menu-toggle:checked ~ .menu {
  transform: scaleY(1);
}

.menu ul {
  list-style: none;
}

.menu li {
  border-bottom: 1px solid white; /* Changer la couleur de la séparation en noir */
}

.menu li:last-child {
  border-bottom: none;
}

.logo-container {
flex: 0 1 auto; /* S'assure que le logo prend seulement l'espace dont il a besoin */
}

.menu a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  text-align: center;
  transition: background-color 0.3s, font-weight 0.3s, color 0.3s, box-shadow 0.3s;
}

.menu a:hover {
  font-weight: bold;
  color: white;
 background: linear-gradient(90deg, #000000, #000000, #25cdff);
  box-shadow: 0 0 20px white; /* Surbrillance blanche lumineuse */
}

.titre-principal {
    font-size: 2rem;
    color: #ff416c;
    margin-bottom: 1rem;
}




.logo {
    width: 150px;
    height: auto;
}

/* Limite la hauteur du swiper-wrapper */
.swiper-wrapper {
    height: 100%;
    display: flex;
}

.swiper-container {
    max-height: 80vh; /* Limite la hauteur du swiper à 80% de la hauteur de la fenêtre */
        flex-grow: 1; /* Permet au swiper de prendre l'espace restant dans le conteneur */

}

/* Limite la taille de la diapositive pour remplir l'écran */
.swiper-slide {
 display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* Largeur de l'écran */
    height: 100vh; /* Hauteur de l'écran */
    overflow: hidden; /* Pour éviter les débordements */
}

/* Ajuste la taille de l'image pour remplir la diapositive */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assurez-vous que l'image remplit la diapositive sans déformation */
}

/* Taille puce */
.swiper-pagination-bullet {
     width: 30px;   /* Réduit la largeur */
    height: 50px;  /* Réduit la hauteur */
    background: white;  /* Couleur des bullets */
    opacity: 0.9;  /* Légère transparence */
    transition: opacity 0.3s ease;
}

.swiper-pagination-bullet-active {
    width: 30px;  /* Taille un peu plus grande pour l'élément actif */
    height: 30px; /* Taille un peu plus grande pour l'élément actif */
    background: #0ab1f0; /* Couleur des bullets actives */
    opacity: 1;   /* Opacité complète pour le bullet actif */
}

/* Styles pour la superposition (overlay) */
.overlay {
position: absolute;
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste pour un centrage parfait */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre horizontalement le contenu de l'overlay */
    justify-content: center; /* Centre verticalement le contenu de l'overlay */
    width: 100%; /* Prend la largeur totale de l'écran */
    padding: 20px;
    color: red;
    z-index: 999; /* Assure que la superposition est au-dessus de tout autre contenu */
    text-align: center; /* Centre le texte à l'intérieur */
}

/* Styles pour le titre */
.overlay h2 {
    margin: 6;
}

h2 {
    margin-top: 10px;  /* Réduit l'espace avant un titre */
    margin-bottom: 10px;  /* Réduit l'espace après un titre */
    font-size: 40px ;
    color: white;
    background-color: #;
    font-family: 'Luckiest Guy', cursive; 
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

h3 {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    font-size: 38px ;
    color: white;
    background-color: #;
    font-family: 'Luckiest Guy', cursive; 
}

/* Styles pour le bouton */
.overlay button {
    background-color: black;
    border: 5px solid white;
    color: white;
    padding: auto;
    cursor: pointer;
    font-size: 40px;
    font-family: 'Handlee', cursive;
}

/* Effet de survol sur le bouton */
.overlay button:hover {

    background-color: white;
    color: white;
	background: linear-gradient(90deg, #000000 0%, #000000 20%, #001f3f 100%);
}

.tabs {
    background-color: #333;
    overflow: hidden;
}

.tab {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    cursor: pointer;
}

.tab:hover {
    background-color: #ddd;
    color: black;
}



/* Styles pour le bouton stylé */
.custom-button {
    display: inline-block;
    padding: 1% 1%; /* Taille du bouton (tu peux aussi ajuster) */
    font-size: 14px; /* Taille du texte, ajuste à la taille que tu préfères */
     background: linear-gradient(90deg, #000000, #000000, #25cdff);
  box-shadow: 0 0 20px white; /* Surbrillance blanche lumineuse */
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px; /* Arrondi du bouton */
    color: #fff;
    font-family: "Lato", sans-serif;
    
    border: 2px solid black;
    transition: background 0.3s, color 0.3s;
}

.swiper-button-next, .swiper-button-prev {
    top: 60%; /* Ajuste cette valeur pour abaisser les boutons */
    transform: translateY(-50%); /* Centre verticalement les boutons en fonction de leur nouvelle position */
    color: white; /* Optionnel : personnalise la couleur des boutons si nécessaire */
}

.custom-button:hover {
    background: linear-gradient(90deg, #25cdff, #000000, #000000);
	border: 4px solid white;
    color: #fff;
	font-weight: bold;
	font-size: 16px; /* Taille du texte, ajuste à la taille que tu préfères */
}

/* Styles pour la section d'introduction */
.introduction {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    background-color: black;
}

.introduction h1 {
    font-size: 3.5rem;
    font-family: 'Luckiest Guy', cursive;
    color: white;
    margin: 0;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

/* Styles pour le footer */
.sticky-footer {
    background-color: #ff416c;
	border: 2px solid black; /* Bordure cohérente avec le fond */
	color: black; /* Couleur du texte */
}

/* Liens de réseau social */
.socials {
    list-style-type: none; /* Supprimez les puces */
    padding: 0; /* Supprimez le rembourrage */
}

.socials li {
    display: inline; /* Affiche les éléments en ligne */
    margin: 0 10px; /* Espace entre les éléments */
}

/* Icônes de réseaux sociaux */
.socials i {
    font-size: 30px; /* Taille de l'icône */
    color: #ddd; /* Couleur de l'icône */
    transition: color 0.3s; /* Ajoute une transition pour l'effet de survol */
}

.socials i:hover {
    color: white; /* Changer la couleur au survol */
}


.footer-banner {
    position: fixed; /* S'assure que le footer reste en bas de la page */
    bottom: 0;
    left: 0;
    width: 100%; /* Prend toute la largeur de la page */
    background-color: black; /* Couleur de fond du footer */
    color: white; /* Couleur du texte */
    text-align: center; /* Centre le texte à l'intérieur du footer */
    padding: 10px 0; /* Ajoute un peu d'espace vertical dans la bannière */
    font-family: 'Handlee', cursive; /* Police personnalisée */
    z-index: 9999; /* S'assure que le footer soit au-dessus du reste du contenu */
    font-size: 14px; /* Ajuste la taille du texte */
}


/* Styles pour les petits écrans */
@media (max-width: 768px) {
    .logo {
        width: 100px; /* Réduit la taille du logo */
        left: 10px;   /* Ajuste la marge à gauche pour les petits écrans */
    }

    .introduction h1 {
        font-size: 32px; /* Réduit la taille du texte pour les petits écrans */
    }

    .introduction {
        height: 80px; /* Ajuste la hauteur de la bannière */
        padding: 5px 0; /* Réduit les marges internes */
    }
	

    .swiper-button-next, .swiper-button-prev {
        top: 70%; /* Réduit la position des boutons sur mobile pour mieux les adapter */
    }

    .swiper-container {
		   height: 100vh; /* Prend toute la hauteur de l'écran sur tablette et mobile */
    }
            flex-grow: 1;
.swiper-slide img {
        width: 100%;
        height: 100vh; /* Assurer que l'image prend bien toute la hauteur */
        object-fit: cover; /* Remplir l'image sans déformer */
    }
	
	.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}

}


@media (max-width: 480px) {
    .introduction {
        height: 100px; /* Réduit encore la taille de l'introduction pour les très petits écrans */
        padding: 5px;
    }
	
	.introduction h1 {
        font-size: 36px; /* Réduire encore un peu la taille du texte pour mobile */
    }

    .swiper-container {
        height: auto; /* S'assure que le swiper occupe tout l'espace */
    }
	
	  h2 {
        font-size: 28px; /* Diminuer encore la taille du h2 sur mobile */
    }
	
}