/* ==========================================
   GÉNÉRAL
   ========================================== */
   html, body {
    height: 100%;
    margin: 0;
    scroll-behavior: smooth;
    width: 100%;
}
body {
    font-family: 'Agbalumo', sans-serif;
    background-color: rgba(25,73,91,1);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ==========================================
   HEADER
   ========================================== */
header {
    position: relative;
    display: flex;
    align-items: center;
    background-image: linear-gradient(to bottom, rgba(25,73,91,0.1) 80%, rgb(0, 32, 51, 1) 99%), url('../Images/ImageSite1.png');
    background-size: cover;
    padding: 42vh 0; /* Ajusté pour un padding vertical responsive */
    background-position: center;
    
}
.title-container {
    position: absolute;
    top: 35vh; /* Utilisation de vh pour un positionnement vertical responsive */
    left: 50%; /* Centrage horizontal */
    transform: translate(-50%, -50%); /* Ajustement pour un centrage parfait */
    z-index: 3;
    font-size: 0.9vw;
   
}

.bateaux-container {
    position: absolute;
    bottom: 350px; /* Ajustez selon la hauteur de votre vague */
    width: 100%;
    overflow: visible;
    z-index: 1;
  }
  
  .bateau {
    position: absolute;
    width: 250px;
    height: auto; /* Ajoutez cette ligne pour maintenir le ratio de l'image */
    animation-duration: 25s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
   max-width: 100%; /* Ainsi, l'élément ne débordera pas de l'écran */
    height: auto; /* Maintient le rapport d'aspect */
}
  
  .bateau1 {
    animation-name: bateauAnimation1;
  }
  
  .bateau2 {
    animation-name: bateauAnimation2;
    animation-delay: -10s; /* Pour décaler le deuxième bateau */
  }
  
  @keyframes bateauAnimation1 {
    0% {
      transform: translateX(1000%) translateY(-10px) rotate(5deg);
    }
    0% {
      transform: translateX(900%) translateY(10px) rotate(-5deg);
    }
    0% {
      transform: translateX(800%) translateY(-10px) rotate(5deg);
    }
    5% {
      transform: translateX(700%) translateY(10px) rotate(-5deg);
    }
    10% {
      transform: translateX(600%) translateY(-10px) rotate(5deg);
    }
    15% {
      transform: translateX(500%) translateY(10px) rotate(-5deg);
    }
    20% {
      transform: translateX(400%) translateY(-10px) rotate(5deg);
    }
    25% {
      transform: translateX(300%) translateY(10px) rotate(-5deg);
    }
    30% {
      transform: translateX(200%) translateY(-10px) rotate(5deg);
    }
    35% {
      transform: translateX(100%) translateY(10px) rotate(-5deg);
    }
    40% {
      transform: translateX(0%) translateY(-10px) rotate(5deg);
    }
    45% {
      transform: translateX(-100%) translateY(10px) rotate(-5deg);
    }
    50% {
      transform: translateX(-200%) translateY(-10px) rotate(5deg);
    }
    55% {
      transform: translateX(-300%) translateY(10px) rotate(-5deg);
    }
    60% {
      transform: translateX(-400%) translateY(-10px) rotate(5deg);
    }
    65% {
      transform: translateX(-500%) translateY(10px) rotate(-5deg);
    }
    70% {
      transform: translateX(-600%) translateY(-10px) rotate(5deg);
    }
    75% {
      transform: translateX(-700%) translateY(10px) rotate(-5deg);
    }
    100% {
      transform: translateX(-800%) translateY(-10px) rotate(5deg);
    }
    100% {
      transform: translateX(-900%) translateY(10px) rotate(-5deg);
    }
    100% {
      transform: translateX(-1000%) translateY(-10px) rotate(5deg);
    }
  }
  
  
  @keyframes bateauAnimation2 {
    0% {
      transform: translateX(-1000%) translateY(10px) rotate(-5deg);
    }
    5% {
      transform: translateX(-900%) translateY(-10px) rotate(5deg);
    }
    10% {
      transform: translateX(-800%) translateY(10px) rotate(-5deg);
    }
    15% {
      transform: translateX(-700%) translateY(-10px) rotate(5deg);
    }
    20% {
      transform: translateX(-600%) translateY(10px) rotate(-5deg);
    }
    25% {
      transform: translateX(-500%) translateY(-10px) rotate(5deg);
    }
    30% {
      transform: translateX(-400%) translateY(10px) rotate(-5deg);
    }
    35% {
      transform: translateX(-300%) translateY(-10px) rotate(5deg);
    }
    40% {
      transform: translateX(-200%) translateY(10px) rotate(-5deg);
    }
    45% {
      transform: translateX(-100%) translateY(-10px) rotate(5deg);
    }
    50% {
      transform: translateX(0%) translateY(10px) rotate(-5deg);
    }
    55% {
      transform: translateX(100%) translateY(-10px) rotate(5deg);
    }
    60% {
      transform: translateX(200%) translateY(10px) rotate(-5deg);
    }
    65% {
      transform: translateX(300%) translateY(-10px) rotate(5deg);
    }
    70% {
      transform: translateX(400%) translateY(10px) rotate(-5deg);
    }
    75% {
      transform: translateX(500%) translateY(-10px) rotate(5deg);
    }
    80% {
      transform: translateX(600%) translateY(10px) rotate(-5deg);
    }
    85% {
      transform: translateX(700%) translateY(-10px) rotate(5deg);
    }
    90% {
      transform: translateX(800%) translateY(10px) rotate(-5deg);
    }
    95% {
      transform: translateX(900%) translateY(-10px) rotate(5deg);
    }
    100% {
      transform: translateX(1000%) translateY(10px) rotate(-5deg);
    }
  }
  
  

.vague {
    margin: 0;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 200px;
    left: 0px;
    overflow: hidden;
    z-index: 3;
}


.vague-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgb(0, 32, 51, 1), rgba(85,182,177,0.1));
    z-index: 4;
}
.title-container h1 {
    font-family: 'Agbalumo', sans-serif;
    font-weight: 700; 
    letter-spacing: 1px;
    font-size: 5em;
    color: #ffffff; 
    padding: 10px 20px;
    border-radius: 10px;
    text-shadow: 
        1px 1px 0 #000, 
        2px 2px 0 #000,
        3px 3px 0 #000,
        4px 4px 0 #000,
        5px 5px 0 #000,
        6px 6px 0 #000, 
        7px 7px 0 #000,
        8px 8px 0 #000,
        9px 9px 0 #000;
}

.title-container h1.scrolled {
    transform: translateY(-50%) scale(0.9); /* Réduire la taille du titre */
    opacity: 1; /* Réduire l'opacité pour un effet doux */
}


.nav-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 5px;
    opacity: 0;
    transform: translateY(-100%);
    animation: fadeInDown 0.5s ease-out 0.5s forwards;

}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 5px;
    display: flex;
    gap: 20px;

}

.bouton {
    padding: 10px 20px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-align: center;
    background: none;
    border: none;
    transition: all 0.3s ease-out;
    border-bottom: 2px solid #ffffff;
    padding-bottom: 5px;
    font-size: 1.5rem;
}

.bouton:hover {
    color: rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
    border-bottom: 2px solid rgb(0, 0, 0);
}

.bouton:active {
    transform: scale(1);
}

/* ==========================================
   MODALS
   ========================================== */
   .modal-content {
    position: fixed;
    top: 10%; /* Centrage vertical */
    left: 35%; /* Centrage horizontal */
    width: 100%;
    max-height: 90%; /* Hauteur maximale de 80% de la hauteur de la fenêtre */
    background-color: rgba(255, 255, 255, 0.7);
    display: none;
    padding-bottom: 25px;
    align-items: center; /* Centrer le contenu verticalement */
    justify-content: center; /* Centrer le contenu horizontalement */
    z-index: 3000;
    transform: translate(-50%, -50%); /* Ajustement pour un centrage parfait */
    animation: bounceIn 0.5s forwards; /* Application de l'effet de rebondissement */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(25,75,90,255);
    font-family: 'Agbalumo', sans-serif;
}

.tab-content.modal-content {
    max-width: 500px;
    margin: 0 auto;
 font-family: 'Agbalumo', sans-serif;

}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: black;
    border: none;
    font-size: 24px;
    cursor: pointer;
        font-family: 'Agbalumo', sans-serif;

}
.close-modal:hover {
    color:red;
}

/* ==========================================
   CONTENU PRINCIPAL
   ========================================== */
   main {
    flex: 1;
    background-image: linear-gradient(to bottom, rgba(0,32,51,255) 60%, rgb(0, 64, 92));
}
  

.banner-container {
    width: 110%; /* Augmentation de la largeur pour permettre le débordement */
    background-color: rgba(253,203,151,0.8); /* Couleur de fond de la banderole */
    padding: 25px 0px; /* Espacement intérieur augmenté pour le texte */
    padding-right: 25px;
    padding-left: 25px;
    position: relative;
    text-align: center;
    margin-bottom: 100px; /* Espacement entre la banderole et les boutons */
    margin-top: 200px; /* Espacement du haut */
    clip-path: polygon(
        5% 0, 8% 2%, 12% 0%, 15% 3%, 19% 0, 22% 3%, 26% 2%, 30% 1%, 34% 2%, 37% 0, 
        41% 3%, 44% 0, 47% 3%, 50% 2%, 53% 0, 56% 3%, 59% 1%, 62% 0, 65% 2%, 68% 0, 
        70% 3%, 73% 1%, 76% 2%, 78% 0, 81% 2%, 83% 0, 86% 3%, 88% 1%, 90% 0, 92% 3%, 
        94% 0, 96% 2%, 98% 3%, 99% 5%, 100% 8%, 99% 12%, 100% 16%, 99% 20%, 100% 24%, 
        99% 28%, 100% 32%, 99% 36%, 100% 40%, 99% 44%, 100% 48%, 100% 52%, 99% 56%, 
        100% 60%, 100% 64%, 99% 68%, 100% 72%, 100% 76%, 99% 80%, 100% 84%, 100% 88%, 
        99% 92%, 100% 96%, 99% 98%, 97% 99%, 95% 100%, 92% 99%, 90% 100%, 87% 99%, 
        84% 100%, 81% 99%, 78% 100%, 75% 99%, 72% 100%, 69% 99%, 66% 100%, 63% 99%, 
        60% 100%, 57% 99%, 54% 100%, 51% 99%, 48% 100%, 45% 99%, 42% 100%, 39% 99%, 
        36% 100%, 33% 99%, 30% 100%, 27% 99%, 24% 100%, 21% 99%, 18% 100%, 15% 99%, 
        12% 100%, 9% 99%, 6% 100%, 3% 99%, 1% 97%, 0% 95%, 1% 92%, 0% 88%, 1% 84%, 
        0% 80%, 1% 76%, 0% 72%, 1% 68%, 0% 64%, 1% 60%, 0% 56%, 1% 52%, 0% 48%, 
        1% 44%, 0% 40%, 1% 36%, 0% 32%, 1% 28%, 0% 24%, 1% 20%, 0% 16%, 1% 12%, 
        0% 8%, 1% 4%, 1% 1%
    );    
    transform: skewY(-2deg) translateX(-5%); /* Diagonale légère et déplacement vers la gauche */
}

.banner-container p {
    margin: 0;
    padding: 0 50px; /* Espacement intérieur pour le texte */
}

.main-title {
    text-align: center;
    font-size: 3em;
    color: white;
    margin-bottom: 50px;
    margin-top: 200px;
    font-family: 'Agbalumo', sans-serif;
}
.presentation {
    color: white;
    font-size: 20px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* Styles communs pour les conteneurs d'images et de descriptions */
.solo-container, .equipage-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrer les éléments horizontalement */
    width: 40%; /* Ajusté pour définir une largeur */
    margin: 0 5%; /* Ajouté une marge horizontale */
}

/* Pour l'image et la description de solo */
.solo-container img, .equipage-container img {
    opacity: 0;
    margin: 0 20px;
    width: 100%; /* Ajusté pour utiliser toute la largeur du conteneur */
    transition: all 1s ease-out;
    margin-bottom: 20px; /* Espacement entre l'image et la description */
}

.solo-container .solo-description {
    color: white;
    width: 100%; /* Ajusté pour utiliser toute la largeur du conteneur */
    opacity: 0;
    margin-left: 10px;
    transition: all 1s ease-out;
    text-align: left; /* Centrer le texte */
}

 .equipage-container .equipage-description {
    color: white;
    width: 100%; /* Ajusté pour utiliser toute la largeur du conteneur */
    opacity: 0;
    margin-right: 10px;
    transition: all 1s ease-out;
    text-align: right; /* Centrer le texte */
}

/* Conteneur principal pour aligner tous les éléments sur une ligne */
.image-buttons {
    display: flex;
    justify-content: space-around; /* Ajusté pour espacer les éléments de manière égale */
    align-items: center;
    width: 100%;
    padding: 0 2%; /* Ajouté un padding pour éviter que le contenu touche les bords */
}


.solo-title, .equipage-title {
    color: white;
    opacity: 0;
    transition: all 1s ease-out;
}


.zoom-effect {
    transition: transform 0.3s ease;
    width: 300px;
    margin: 0 auto;
    transform: skewY(-5deg);
    position: relative;
    overflow: hidden;
    border: #fefcd4 3px solid;
}

/* ==========================================
   FORMULAIRES
   ========================================== */
   h2 {
    text-align: center;
    font-size: 2em;
    font-weight: 700; 
    margin-bottom: 20px;
    color: rgba(25,75,90,255); /* Utilisation de la couleur fournie */
    text-shadow: rgba(25,75,90,255);
}

form {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 15px;
    background-color: rgba(255,255,221,255); /* Fond légèrement teinté avec la couleur fournie */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(25,75,90,255);
        font-family: 'Agbalumo', sans-serif;

}
/* Effet de rebondissement lors de l'ouverture de la fenêtre du formulaire */
@keyframes bounceIn {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

label {
    color: rgba(25,75,90,255); /* Utilisation de la couleur fournie */
    font-weight: 600;
    margin-bottom: 3px;
    text-align: center;
        font-family: 'Agbalumo', sans-serif;

}

input, button {
    padding: 10px 15px;
    font-family: 'Agbalumo', sans-serif;
    font-size: 16px;
    border: 2px solid rgba(25,75,90,255); /* Bordure avec la couleur fournie */
    background-color: rgba(255,255,232,255);
    color: #000000;
    transition: all 0.3s ease;
    border-radius: 5px;
}

input:focus, textarea:focus, button:focus, select:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(255,255,221,255);
}

textarea {
    font-family: 'Agbalumo', sans-serif;

}

button {
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    margin-top: 5px;
    padding: 8px 10px;
    background-color: rgba(115,205,195,255)    ; /* Fond du bouton avec la couleur fournie */
    color: rgba(255,255,232,255);
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease-out;
    position: relative;
    overflow: hidden;
}
.error-message {
  color: red;
  font-weight: bold;
  margin-bottom: 10px;
}
.success-message {
  color: green;
  font-weight: bold;
  margin-bottom: 10px;
}

/* ==========================================
   FOOTER
   ========================================== */
   footer {
    background-color: rgba(0, 32, 51, 0.9); /* Une couleur foncée pour un contraste subtil */
    padding: 5px 0;
    color: rgba(253,203,151,255); /* Utilisation de la couleur fournie pour le texte */
    text-align: center;
    font-size: 0.8em;
    border-top: 3px solid rgba(253,203,151,0.5); /* Une bordure subtile en haut pour séparer du contenu principal */
    position: relative;
    z-index: 1000;
}



/* ==========================================
   RESPONSIVE
   ========================================== */
@media only screen and (max-width: 768px) {
       html, body {
    height: 100%;
    margin: 0;
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden; /* Empêche le défilement horizontal */
}
.title-container {
    position: absolute;
    top: 35vh; /* Utilisation de vh pour un positionnement vertical responsive */
    left: 50%; /* Centrage horizontal */
    transform: translate(-50%, -50%); /* Ajustement pour un centrage parfait */
    z-index: 3;
    font-size: 2vw;
       white-space: nowrap;


}

     .bateaux-container {
        position: relative; /* Adjust if needed to work with your layout */
        width: 100%;
        bottom: 0; /* Adjust this value so that the container sits where you want it to */
        left: 0; /* Align the container to the left edge */
    }
  
    .bateau {
        width: 100%; /* Make the ship image responsive */
        position: relative; /* Change position to relative if you want it to flow with the document */
        animation: none; /* Disable animation if it's causing layout issues */
        display: none;
    }


  .modal-content {
    position: fixed;
    top: 10%; /* Centrage vertical */
    left: 5%; /* Centrage horizontal */
    width: 90%;
    max-height: 90%; /* Hauteur maximale de 80% de la hauteur de la fenêtre */
    background-color: rgba(255, 255, 255, 0.7);
    display: none;
    padding-bottom: 25px;
    align-items: center; /* Centrer le contenu verticalement */
    justify-content: center; /* Centrer le contenu horizontalement */
    z-index: 3000;
    transform: translate(-50%, -50%); /* Ajustement pour un centrage parfait */
    animation: bounceIn 0.5s forwards; /* Application de l'effet de rebondissement */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(25,75,90,255);
    font-family: 'Agbalumo', sans-serif;
}

.tab-content.modal-content {
    max-width: 400px;
    margin: 0 auto;
 font-family: 'Agbalumo', sans-serif;

}
form {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
    padding: 15px;
    background-color: rgba(255,255,221,255); /* Fond légèrement teinté avec la couleur fournie */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(25,75,90,255);
        font-family: 'Agbalumo', sans-serif;

}
}