/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    padding-top: 9rem;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding: 80px 0;
}

.gif-container {
    text-align: center;
    margin: 20px;
}

/* menu navigation */

/* Style de la barre principale */

.logo-container {
    height: 100%;         /* Le conteneur prend toute la hauteur du bandeau */
    display: flex;
    align-items: center;
    padding-left: 5%
}

.logo {
  height: 100%;         /* L'image prend toute la hauteur du conteneur */
  width: auto;          /* Garde les proportions de l'image intactes */
  display: block;
  object-fit: contain;  /* Évite que l'image ne soit écrasée ou déformée */
}

.logo_commune{
  height: 100%;         /* L'image prend toute la hauteur du conteneur */
  width: auto;          /* Garde les proportions de l'image intactes */
  display: flex;
  object-fit: contain;  /* Évite que l'image ne soit écrasée ou déformée */
}

.home_logo {
  height: 3rem;
  width: auto;          /* Garde les proportions de l'image intactes */
  display: block;
  object-fit: contain;  /* Évite que l'image ne soit écrasée ou déformée */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffd9a7; /* Ou une autre couleur de fond pour la barre */
    padding: 10px 5%;
    height: 9rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Important avec fixed */
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Petit effet d'ombre pour le relief */
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- Style des Boutons Principaux --- */
.nav-links > li {
    margin: 0 8px; /* L'espace entre chaque bouton */
    position: relative; /* Nécessaire pour positionner le sous-menu */
}

.nav-links > li > a {
    display: block;
    color: white;
    text-decoration: none;
    background-color: #fda93b;
    padding: 1rem 2rem;
    border-radius: 2.5rem; /* Coins arrondis "pilule" */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* --- Interaction au survol des boutons principaux --- */
.nav-links > li > a:hover {
    filter: brightness(1.1); /* Éclaircit légèrement au survol */
}

/* --- Style du Sous-Menu (Dropdown) --- */
.dropdown-content {
    display: none; /* Caché par défaut */
    position: absolute;
    top: 100%; /* S'affiche juste en dessous du bouton */
    background-color: #fac277;
    min-width: 10rem;
    padding: 10px 0;
    padding-top: 5px; /* Petit espace entre le bouton et le menu qui descend */
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    list-style: none;
    z-index: 1000;
}

/* Affichage au survol */
.dropdown:hover .dropdown-content {
    display: block;
    overflow: hidden;
}

/* Style des liens à l'intérieur du sous-menu */
.dropdown-content li a {
    display: block;
    color: white;
    padding: 12px 20px; /* Un peu plus de hauteur pour faciliter le survol */
    text-decoration: none;
    transition: all 0.2s ease; /* Transition sur toutes les propriétés */
    width: 100%; /* S'assure que le lien prend toute la largeur */
    box-sizing: border-box;
    border-radius: 15px;
}

.dropdown-content li a:hover {
    background-color: #fda93b !important; /* Le !important aide à vérifier si c'est un conflit */
    border-radius: 0; /* Pour un sous-menu, il vaut mieux que le gris prenne tout l'angle */
}


/* Si vous voulez que le bouton Home n'ait pas le fond orange : */
.nav-links li:last-child a {
    background-color: transparent;
}

#toggler, .burger-btn {
    display: none;
}

/* Styles des titres */

.titre-principal{
    font-family: "Lavishly Yours", cursive;
    color: #fda93b;
    font-size: 8rem;
    text-align: center;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 1.2);
}

.titre-secondaire {
        font-size: 2rem;
    }

.titre-style-blanc{
    font-family: "Rouge Script", cursive;
    color: white;
    font-size: 5rem;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.titre-style-blanc-petit{
    font-family: "Rouge Script", cursive;
    color: white;
    font-size: 2.5rem;
    padding-left: 5%;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.text-orange{
    color: #fda93b;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 1.2);
}

.text-ici{
    padding-left: 10%;
}

.titre-orange{
    color: #e8831b;
    font-size: 2rem;
}

.titre-valeurs{
    font-family: "Rouge Script", cursive;
    color: #fda93b;
    padding-left: 5%;
    font-size: 3.5rem;
}

section h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #2c3e50;
}


/* Styles des sections */

.hero-section{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 90dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section-verte{
  background-color: #ced4ba;
}

.section{
  min-height: 90dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demi-section{
  min-height: 50dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demi-section-commune{
  min-height: 50dvh;
  display: flex;
  flex-direction: flex;
  justify-content: center;
}

.quart-section{
  min-height: 25dvh;
}

.trois-quart-section{
  min-height: 75dvh;
}

.intra-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10% 0 10%;
}

.split-section {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 90dvh;
}

.left-side-cadre{
    flex: 0 0 40%;
}

.right-side-cadre {
    flex: 0 0 51%;
}

.left-side {
    flex: 0 0 46%;
}

.right-side {
    flex: 0 0 44%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.left-side-50 {
    flex: 0 0 50%; /* 50% pour la partie gauche */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le contenu horizontalement */
    justify-content: center;
}

.right-side-50 {
    flex: 0 0 50%; /* 50% pour la partie droite */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le contenu horizontalement */
    justify-content: center;
}

.left-side-60 {
    flex: 0 0 56%;
}

.right-side-40 {
    flex: 0 0 36%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.espaces p {
    text-align: left;
}

.cadre {
  width: 90%;
  display: block;
  object-fit: contain;  /* Évite que l'image ne soit écrasée ou déformée */
}

.cadre_evenements {
  width: 70%; /* Ou la taille que vous préférez */
  height: auto;
  display: block;
  margin: 0 auto 2rem auto; /* Le 2rem crée l'espace sous l'image */
  border-radius: 15px; /* Optionnel : pour adoucir les angles comme vos autres cadres */
}

.image-ronde {
  width: 40rem;         /* Définissez une taille fixe (ou en rem) */
  height: 40rem;        /* OBLIGATOIRE : doit être égal à la largeur */
  display: block;
  margin: 0 auto;       /* Pour la centrer dans sa colonne */
  object-fit: cover;    /* Découpe l'image proprement pour remplir le carré */
  border-radius: 50%;
}

.fond-degrade {
    background-color: #f6f6f6;
}

/* Styles div */

.div-membres{
  display: flex;
}

.div-membre{
  background-color: #fac277;
  border-radius: 20px;
  padding:1%;
  margin-left: 3%;
}

.div-membre:last-child{
  margin-right: 3%;
}

.blanc{
    color: white;
}

.reservation-espace{
    display: flex;
    justify-content: center;
}

.reservation-evenements {
    display: flex;
    justify-content: center;
    width: 100%;
}

.btn-orange{
    color: white;
    text-decoration: none;
    background-color: #fda93b;
    padding: 1rem 2rem;
    border-radius: 2.5rem; /* Coins arrondis "pilule" */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* Autres styles */

p {
  /* On utilise rem pour que l'espace soit proportionnel à la taille du texte */
  margin-bottom: 2rem;
  margin-top: 0; /* On annule souvent le haut pour mieux contrôler le bas */
  color: black;
  font-size: 1.2rem;
}

.center{
    text-align: center;
    align-items: center;
}

.bold{
    font-weight: bold;
}

.background-gris{
    background-color: #ced4ba;
}

.background-orange{
    background-color: #fac277;
}

.background-orange2{
    background-color: #ffd9a7;
}

.padding5{
    padding: 7%;
}

.padding5-l{
    padding-left: 7%;
}

.padding10{
    padding: 12%;
}

.padding25-lrd{
    padding: 0% 27% 4% 27%;
}

.padding5-td{
    padding: 7% 0% 7% 0%;
}

.margin5{
    margin: 7%;
}

.coins-arrondis{
    border-radius: 20px;        /* Arrondi des coins */
}

/* Photos */

.photo-bienvenue{
  background-image: url('../images/Photo_Bienvenue.jpeg');
}

.photo-concept{
  background-image: url('../images/Photo_Concept.jpeg');
}


/* Smartphone */

@media screen and (max-width: 920px) {
    .burger-btn {
        display: flex !important;
        flex-direction: column;
        gap: 5px; /* Espace entre les barres */
        cursor: pointer;
        order: 2;
    }

    /* Le bouton Burger devient orange pour être visible sur le fond clair */
    .burger-btn span {
        display: block;
        width: 30px;        /* Largeur des barres */
        height: 4px;        /* Épaisseur des barres */
        background-color: #fda93b; /* Couleur orange */
        border-radius: 2px;
        transition: 0.3s;
    }

    .logo-container {
        order: 1;
    }

    .navbar {
        height: 7rem; /* Réduction de la hauteur sur mobile */
        display: flex;
        justify-content: space-between; /* Le logo à gauche, le burger à droite */
        align-items: center;
        position: relative;
        background-color: #ffd9a7; /* Ou une autre couleur de fond pour la barre */
        padding: 10px 5%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%; /* Important avec fixed */
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    body {
        font-family: 'Poppins', sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #fff;
        padding-top: 7rem;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #ffd9a7; /* Rappel du fond de votre navbar */
        position: absolute;
        top: 100px;
        left: 0;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    .nav-links > li {
        margin: 10px 0;
        width: 90%; /* Pour que les boutons ne touchent pas les bords */
    }

    /* Sous-menu mobile */

    .dropdown-content {
        position: static; /* Il s'insère dans le flux du menu */
        display: none;    /* Caché par défaut */
        width: 100%;
        background-color: #fac277;
        box-shadow: none;
        padding: 0;
        transform: none; /* Annule le centrage horizontal de la version bureau */
    }

    /* AFFICHER LE SOUS-MENU AU CLIC SUR LE PARENT */
    /* Cette règle permet d'ouvrir le sous-menu quand on clique sur le bouton "Le Lieu" */
    .dropdown:focus-within .dropdown-content,
    .dropdown:active .dropdown-content {
        display: block !important;
    }

    /* Ajustement des liens de sous-menu pour qu'ils soient faciles à cliquer au doigt */
    .dropdown-content li a {
        padding: 15px 40px; /* Plus d'espace pour le pouce */
        border-radius: 0;    /* On retire les arrondis individuels pour un bloc uni */
        background-color: transparent;
    }

    /* ... (code navigation ci-dessus) ... */

    /* Redimensionnement des titres géants */
    .titre-principal {
        font-size: 3rem; /* Au lieu de 10rem */
    }

    .titre-secondaire {
        font-size: 1rem;
    }

    .titre-style-blanc, .style-titre2 {
        font-size: 2rem; /* Au lieu de 6rem */
        padding-left: 0;
        text-align: center;
    }

    /* Passage des sections "Split" en mode vertical */
    .split-section {
        flex-direction: column;
        text-align: center;
    }

    .left-side, .right-side {
        flex: 0 0 100%;
        width: 100%;
        padding: 20px;
    }

    .left-side-cadre, .right-side-cadre {
        flex: 0 0 100%;
        width: 100%;
        padding: 20px;
    }

    /* Adaptation des membres de l'association */
    .div-membres {
        flex-direction: column;
    }

    .div-membre {
        margin: 10px 5%;
    }

    /* Ajustement des textes et paddings */
    p {
        font-size: 0.6rem;
        padding: 0 5%;
    }

    .padding25-lrd {
        padding: 5%; /* On réduit les énormes marges latérales sur mobile */
    }

    #toggler:checked ~ .nav-links {
        display: flex !important;
    }

    /* On cache l'input moche par défaut */
    #toggler {
        display: none;
        position: absolute;
        top: 0.8rem;
        left: 0;
    }

    .logo_commune{
        width: 100%;          /* Garde les proportions de l'image intactes */
        display: flex;
        object-fit: contain;  /* Évite que l'image ne soit écrasée ou déformée */
    }

    .image-ronde {
        width: 20rem;         /* Définissez une taille fixe (ou en rem) */
        height: 20rem;        /* OBLIGATOIRE : doit être égal à la largeur */
}

}


/* On peut annuler la marge du tout dernier paragraphe pour éviter un trou en bas de section */
p:last-child {
  margin-bottom: 0;
}

/* Footer */
footer {
    background-color: #fac277; /* Votre orange clair */
    padding: 40px 0;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Espace entre le titre, l'email et les réseaux */
}

/* Style du bloc Email */
.email-block {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: white;
}

.email-block i {
    font-size: 1.2rem;
}

.email-block a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* Style des réseaux sociaux */
.social-block {
    display: flex;
    justify-content: center;
    gap: 25px; /* Espace entre les icônes */
    margin-top: 10px;
}

.social-block a {
    color: white;
    font-size: 1.5rem; /* Taille des logos */
    transition: transform 0.3s, color 0.3s;
    text-decoration: none; /* Cache les soulignements des liens */
}

.social-block a:hover {
    color: #fda93b; /* Orange plus foncé au survol */
    transform: scale(1.2); /* Petit effet de zoom */
}