/* =========================================================================
   RESPONSIVE ADJUSTMENTS - Déjà présents pour tablettes et mobiles moyens
   ========================================================================= */
 @media (max-width: 991px) {
     .container {
         padding: 15px;
     }

     .row {
         margin-bottom: 15px;
     }

     .col-md-6 {
         padding: 15px;
     }

     .botao {
         width: 110px;
         height: 40px;
         font-size: 14px;
     }

     .btn-unique {
         width: 130px;
         font-size: 18px;
         padding: 0.6em 0.8em;
     }

     .carousel-container {
         height: 450px;
     }

     .carousel .post {
         padding: 15px;
     }

     .contact-container {
         width: 90%;
         padding: 1em;
     }

     .post {
         flex-direction: column;
         text-align: center;
     }

     .post-image {
         width: 100%;
         height: auto;
     }
 }

 @media (max-width: 767px) {
     .botao {
         width: 90px;
         height: 35px;
         font-size: 12px;
     }

     .btn-unique {
         width: 120px;
         font-size: 16px;
         padding: 0.5em 0.7em;
     }

     .footer-section {
         padding: 15px;
         text-align: center;
     }

     .social-link {
         width: 60px;
         height: 60px;
     }

     .carousel-container {
         height: 350px;
     }

     .carousel .post {
         padding: 10px;
     }

     .post {
         flex-direction: column;
     }

     .post-image {
         width: 100%;
         height: auto;
     }

     .contact-container {
         width: 100%;
         padding: 10px;
     }

     .header {
         padding: 20px 10px;
     }

     .header h1 {
         font-size: 2rem;
     }

     .header p {
         font-size: 1rem;
     }

     .page-container {
         padding: 10px;
     }

     .custom-image-container {
         height: 250px;
     }
 }

 /* =========================================================================
     RESPONSIVE POUR TÉLÉPHONES (max-width: 480px)
     ========================================================================= */
 @media (max-width: 480px) {

     /* Généralités */
     html,
     body {
         font-size: 14px;
         /* Ajustement global de la taille de police si besoin */
     }

     .container {
         padding: 10px;
         max-width: 100%;
     }

     /* Bouton Télécharger (.botao) */
     .botao {
         width: 75px;
         height: 30px;
         font-size: 10px;
         padding: 4px 8px;
     }

     .botao:hover {
         /* Pour mobile, on peut désactiver le hover (s’il y a lieu)
         ou prévoir que l’effet hover ne se déclenche pas naturellement */
         width: 75px;
         /* Garder la taille en mode tactile */
         height: 30px;
     }

     /* Bouton Envoyer (.btn-unique) */
     .btn-unique {
         width: 100%;
         max-width: 200px;
         font-size: 14px;
         padding: 0.5em 0.8em;
         justify-content: center;
     }

     .btn-unique .btn-label {
         margin-left: 0.2em;
         font-size: 12px;
     }

     /* Footer et réseaux sociaux */
     .footer-section {
         padding: 10px;
     }

     .social-link {
         width: 50px;
         height: 50px;
         margin: 5px;
     }

     /* Zone de dépôt */
     #drop-area {
         padding: 15px;
     }

     /* Carousel Actualités et Calendrier */
     .carousel-container {
         height: auto;
         padding: 10px;
     }

     .carousel-cell {
         width: 100%;
         height: auto;
         margin-bottom: 10px;
     }

     .carousel .post {
         padding: 10px;
         margin-bottom: 10px;
     }

     /* Formulaire de Contact */
     .contact-container {
         width: 100%;
         padding: 10px;
     }

     .contact-field {
         flex-direction: column;
         align-items: flex-start;
         gap: 5px;
     }

     .contact-input,
     .contact-textarea {
         font-size: 0.85em;
         padding: 0.3em;
     }

     /* Posts et Faits Marquants */
     .post {
         flex-direction: column;
         padding: 10px;
     }

     .post-image {
         width: 100%;
         height: auto;
     }

     .content-container {
         padding: 10px;
     }

     .read-more {
         font-size: 0.9rem;
     }

     /* Album Photo / Photo Gallery */
     .photo-gallery {
         padding: 10px;
         column-count: 1;
     }

     .photo-item {
         margin-bottom: 10px;
     }

     /* Bouton "Haut de page" personnalisé */
     .button {
         width: 40px;
         height: 40px;
         bottom: 10px;
         right: 10px;
     }

     .button:hover {
         width: 100px;
         border-radius: 20px;
     }

     /* Réduire la taille des logos et autres images */
     .logo {
         max-width: 50px;
     }

     /* Ajustements pour le calendrier */
     .past-event {
         font-size: 0.9rem;
     }

     /* Popup et infos sur icônes */
     .popup-info {
         font-size: 0.8rem;
         padding: 3px 6px;
         bottom: 25px;
     }

     /* Ajustement des boutons d’album photo */
     .photo-actions button {
         padding: 6px 12px;
         font-size: 0.8rem;
     }
 }
 /* Sur le carousel des images page accueil logo, icône (téléphone, etc.) */
@media (max-width: 480px) {

    /* Conteneur général */
    .overlay {
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Alignement total à gauche */
    }

    /* Titre de l'overlay */
    .overlay h2 {
        font-size: 18px !important; /* Réduction de la taille */
        text-align: left !important;
        margin: 0; /* Pas de marge inutile */
    }

    /* Paragraphe de l'overlay */
    .overlay p {
        font-size: 12px;
        text-align: left !important;
        margin: 5px 0;
    }

    /* Réduire la taille du logo mais le garder plus grand que les icônes */
    .img-fluid.img-thumbnail {
        width: 80px !important; /* Taille intermédiaire */
        height: 80px !important;
        display: block;
        margin: 10px auto;
    }

    /* Icônes plus petites sous le logo */
    .icon-container i {
        font-size: 16px !important; /* Réduction de la taille */
    }

    /* Ajustement du texte sous les icônes */
    .popup-info {
        font-size: 8px; /* Ajustez selon vos préférences */
    }
    
    /* Ajustement du conteneur des icônes pour rester centré sous le logo */
    .overlay .mt-2 {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    /* Carousel : réduire la hauteur des images */
    #carousel-container .carousel-item img {
        height: 200px !important;
    }
}


/*Accueil image,texte et lien vers histoire*/
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    .position-relative {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* Image de fond */
    #image {
        max-width: 90% !important;
        height: auto !important;
        margin-left: 0 !important;
    }

    /* Conteneur du texte superposé */
    .position-absolute.top-50.start-0.bg-light.p-4.rounded.shadow {
        position: relative !important;
        width: 90% !important;
        height: auto !important;
        transform: none !important;
        left: 0 !important;
        top: 0 !important;
        padding: 20px !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    .position-absolute.top-50.start-0.bg-light.p-4.rounded.shadow h1 {
        font-size: 1.5rem !important;
    }

    .position-absolute.top-50.start-0.bg-light.p-4.rounded.shadow p {
        font-size: 1rem !important;
    }

    .btn-primary {
        width: 100% !important;
        max-width: 250px !important;
        font-size: 1rem !important;
        padding: 10px !important;
    }
}

  
/*fait marquant*/
  @media (max-width: 768px) {
    .post {
        display: flex;
        flex-direction: column !important; /* Toujours en colonne */
        align-items: center;
        background: white;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        width: 90%;
        margin: 10px auto;
    }

    .post-image {
        width: 100% !important;
        height: 200px !important;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 10px;
    }

    .content-container {
        width: 100% !important; /* Corrige le problème du texte qui disparaît */
        text-align: center;
        padding: 10px;
        display: block !important; /* Forcer l'affichage du texte */
    }

    .post-message {
        font-size: 14px;
        word-wrap: break-word;
        color: #333 !important; /* S'assurer que le texte est visible */
        display: block !important; /* Éviter qu'il soit caché */
    }

    .read-more {
        font-size: 12px;
        display: block;
        margin-top: 10px;
        color: #007bff;
        cursor: pointer;
    }
}



/* Styles généraux pour les écrans larges */
.contact-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Styles pour les écrans mobiles */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column; /* Les éléments seront disposés en colonne */
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 20px;
    }

    /* La carte doit être en bas */
    .contact-map {
        width: 100% !important;
        height: 300px !important;  /* Hauteur ajustée pour la carte */
        margin-bottom: 20px;
        order: 2; /* Carte après le formulaire */
    }

    /* Le formulaire doit être au-dessus de la carte */
    .contact-container {
        order: 1; /* Le formulaire passe avant la carte */
        width: 100% !important; /* Formulaire prend toute la largeur */
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .button-container {
        display: flex;
        justify-content: center;
    }

    .btn-unique {
        width: 100% !important;
        max-width: 300px;
    }
}
/* Taille par défaut pour les écrans plus larges */
.modal-dialog {
    max-width: 600px; /* Taille par défaut sur les écrans plus larges */
}

/* Styles spécifiques pour les écrans mobiles */
@media (max-width: 768px) {
    .modal-dialog {
        width: 80%;  /* Réduit la largeur de la modale sur mobile */
        max-width: 400px;  /* Taille maximale sur mobile */
        margin: 15% auto;  /* Centrage vertical et horizontal */
    }

    /* Ajuste le contenu de la modale si nécessaire */
    .modal-content {
        padding: 15px;
    }
}