/*css de la barre de menu*/

/* Navbar container */
.Navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    font-family: Arial, sans-serif;
    padding: 10px;
}
  /* Links inside the navbar */
.Navbar a {
    float: left;
    font-size: 16px;
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  /* The dropdown container */
.Dropdown {
    float: left;
    overflow: hidden;
}
  /* Dropdown button */
.Dropdown .Dropbtn {
    font-size: 16px;
    border: 2px;
    outline:none;
    color: blue;
    padding: 14px 16px;
    background-color: inherit;
}
  /* Add a red background color to navbar links on hover */
.Navbar a:hover, .Dropdown:hover .Dropbtn {
    background-color: skyblue;
}
  /* Dropdown content (hidden by default) */
.Dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 0;
}
  /* Mega Menu header, if needed */
.Dropdown-content .header {
    background: red;
    padding: 16px;
    color: white;
}
  /* Show the dropdown menu on hover */
.Dropdown:hover .Dropdown-content {
    display: block;
}
  /* Create three equal columns that floats next to each other */
.column {
    float: left;
    width:100%;
    padding: 10px;
    background-color: skyblue;
    height: 200px;
}

  /* Add a background color on hover */
.column a:hover {
    background-color: #ddd;
}
  /* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
@media screen and (min-width: 320px) and (max-width: 480px){
    .Navbar a, .Dropdown .Dropbtn {
        font-size: 10px; /* Ajustement de la taille de la police pour petits écrans */
        padding: 8px 10px;
        height: auto;
    }

    .Dropdown-content {
        width: 100%;
    }

    .column {
        width: 100%;
        height: auto;
    }

    .carre, .image-carre, .onglet2, .onglet3, .onglet4, .onglet5, .logo {
        height: auto;
        width: 20%;
        background-size: contain;
    }
}
/*carré avec élément à l'intérieur*/
.carre{
height: 150px;
width:150px;
float: left;
margin-left: 50px;
padding-right: 5px;
background-image: url("imagescss/CarreMenu.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
vertical-align: center;
}
.carre a{
    margin-top: 35px;
    text-align: center;
    color: white;

}
/*image du logo*/
.image-carre{
height: 150px;
width: 150px;
background-image: url("imagescss/BandeauOnglet1.png");
background-size:contain;
background-repeat: no-repeat;
}
.onglet2{
    height: 150px;
    width: 150px;
    background-image: url("imagescss/BandeauOnglet2.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.onglet3{
    height: 150px;
    width: 150px;
    background-image: url("imagescss/BandeauOnglet3.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.onglet4{
    margin-top: 20px;
    height: 150px;
    width: 150px;
    background-image: url("imagescss/BandeauOnglet4.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.onglet5{
    height: 150px;
    width: 150px;
    background-image: url("imagescss/BandeauOnglet5.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.logo{
    height: 150px;
    width: 150px;
    background-image: url("imagescss/Logo_AHAS_Bleu_SANS_FOND.png");
    background-size: contain;
    background-repeat: no-repeat;
}


/*css des pour les différents texte dans la page*/

.texte{
    height: 950px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.texte[target="President"]{
    background-image: url("imagetexte/Presidents2.png");
}
.texte[target="PatrimoineReligieux"]{
    background-image: url("imagetexte/PatrimoineReligieux.png");
}

.texte[target="Valeurs"]{
    background-image: url("imagetexte/Valeurs.png");
}
.texte[target="FaitMarquants"]{
    background-image: url("imagetexte/FaitsMarquants.png");
}
.texte[target="Poetes"]{
    background-image: url("imagetexte/AuteursPoetesMusiciensStgillois.png");
}
.texte[target="PhotosAbbatiale"]{
    background-image: url("imagescss/PhotographierLabbatiale.png");
    background-position: center;
}
.texte[target="ManifestationCulte"]{
    background-image: url("imagetexte/ManifestationCulteReliquesCorrige.png");
}
.texte[target="LesBulletins"]{
    background-image: url("imagetexte/LesBulletins.png");
    background-position: center;
}
.texte[target="VillageVille"]{
    background-image: url("imagetexte/VillageDevenuVille.png");
}

.texte[target="PatrimoineAgricole"]{
    background-image: url("imagetexte/Patrimoine_Agricole.png");
}


.texte[target="PhotographierAbbatiale"]{
    background-image: url("imagetexte/PhotographierLaFaçade.png");
}

.texte[target="PatrimoineEcrit"]{
    background-image: url("imagetexte/Patrimoinearchives.png");
    background-position: center;
}

.texte[target="Plan14siecle"]{
    background-image: url("imagescss/Plan14emeSiecleRemparts.png");
    background-position: center;
}

.texte[target="Conferences"]{
    background-image: url("imagetexte/Conferences.png");
    
}
.texte[target="Expositions"]{
    background-image: url("imagetexte/Expositions.png");
}
.texte[target="Troubadour1"]{
    background-image: url("imagetexte/Souvenirtroubadour1.png");
    background-position: center;
}

.texte[target="Troubadour2"]{
    background-image: url("imagetexte/Souvenirtoubadour2.png");
    background-position: center;
}

.texte[target="LocalisationleStrat"]{
    background-image: url("imagetexte/LocalisationLeStrat.png");
    background-position: center;
}
.texte[target="ReliquesSaintGilles"]{
    background-image: url("imagetexte/ManifestationCulteReliquesCorrige.png");
}
.texte[target="AHAShistorique"]{
    background-image: url("imagetexte/AHAShistorique.png");
    background-position: center;
}
.texte[target="Embleme"]{
    background-image: url("imagetexte/Embleme2.png");
}
.texte[target="carteRelique"]{
    background-image: url("imagescss/CarteReliques.png");
    background-position: center;
}
.texte[target="Apotres"]{
    background-image: url("imagescss/Apotres.JPG");
    background-position: center;
}
.texte[target="Passer"]{
    width: 99%;
    background-image: url("imagetexte/ActionsPasser.png");
}
.texte[target="ActionsRecentes"]{
    background-image: url("imagetexte/ActionsRecentes.png");
}
.texte[target="AbbesCures"]{
    background-image: url("imagetexte/AbbesCures.png");
    background-position: center;
}
.texte[target="Personnalite"]{
    background-image: url("imagetexte/Personnalites.png");
    background-position: center;
}
.texte[target="Moulins"]{
    background-image: url("imagetexte/Moulins.png");
    background-position: center;
}
.texte[target="Basilique"]{
    background-image: url("imagetexte/Basilique.png");
    background-position: center;
}
.texte[target="bibliographie"]{
    background-image: url("imagetexte/bibliographie.jpg");
}
.texte[target="signeappartenance"]{
    background-image: url("imagetexte/Signesdappartenance2.png");
}
/*Css pour les différents éléments présent dans la page d'acceuil*/
.h2{
    text-align: center;
    color: steelblue;
}
.BandeauLoc{
    height: 300px;
    width: 100%;
    background-image: url("imagescss/BandeauLocalisation.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.BandeauHistAsso{
    height: 300px;
    width: 100%;
    background-image: url("imagescss/Image1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ImageAcceuil{
    height: 600px;
    width: 100%;
    background-image: url("imagescss/1er_Fondu.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ConteneurCarte{
    height: 359px;
    width: 100%;
    background-image: url("imagescss/BandeauLocalisation.png");
    background-size: contain;
    background-repeat: no-repeat;
}
/* Styles généraux pour les conteneurs */
.Conteneur1, .Conteneur2, .Conteneur3 {
    margin-top: 20px;
    height: 357px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: space-between; /* Distribution des Carres */
    align-items: center; /* Alignement vertical centré */
    padding: 0 50px; /* Espace sur les côtés */
}
.TitreConteneur{
    color: steelblue;
    text-align: center;
    margin-bottom: 20px; /* Espace entre le titre et les Carres */
    font-size: 24px;
}

/* Images de fond spécifiques */
.Conteneur1 {
    background-image: url("imagescss/Bandeau_1_arriere_plan.jpg");
}
.Conteneur2 {
    background-image: url("imagescss/Bandeau_2_arrière_plan.jpg");
}
.Conteneur3 {
    background-image: url("imagescss/Bandeau_3_arrière_plan.jpg");
}

/* Style des liens */
.Conteneur1 a, .Conteneur2 a, .Conteneur3 a {
    font-size: 20px;
    text-align: center;
    padding: 14px 16px;
    height: 250px;
    width: 250px;
    text-decoration: none;
}

/* Styles généraux pour les Carres */
.carres {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.Carre {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Carres de Conteneur1 */
.Carre[target="Gauche1"] {
    height: 230px;
    width: 230px;
    background-image: url("imagescss/BandeauGauche1.png");
}
.Carre[target="Centre1"] {
    height: 220px;
    width: 220px;
    background-image: url("../css/imagescss/Bandeau5Onglet2.png");
}
.Carre[target="Droite1"] {
    height: 250px;
    width: 250px;
    background-image: url("imagescss/BandeauDroite1.png");
}

/* Carres de Conteneur2 */
.Carre[target="Gauche2"] {
    height: 230px;
    width: 230px;
    background-image: url("imagescss/BandeauGauche2.png");
}
.Carre[target="Centre2"] {
    height: 210px;
    width: 210px;
    background-image: url("imagescss/BandeauCentre2.png");
}
.Carre[target="Droite2"] {
    height: 220px;
    width: 220px;
    background-image: url("imagescss/BandeauDroite2.png");
}

/* Carres de Conteneur3 */
.Carre[target="Gauche3"] {
    height: 230px;
    width: 230px;
    background-image: url("imagescss/BandeauGauche3.png");
}
.Carre[target="Centre3"] {
    height: 230px;
    width: 230px;
    background-image: url("imagescss/BandeauCentre3.png");
}
.Carre[target="Droite3"] {
    height: 250px;
    width: 250px;
    background-image: url("imagescss/BandeauDroite3.png");
}

/* Responsive Design pour les écrans de téléphone */
@media (max-width: 768px) {
    .Conteneur1, .Conteneur2, .Conteneur3 {
        flex-direction: row; /* Maintenir l'alignement horizontal */
        justify-content: center; /* Centrage des Carres horizontalement */
        gap: 10px; /* Espace entre les Carres */
        padding: 10px; /* Réduire les marges */
        height: auto; /* Adapter la hauteur automatiquement */
    }

    .Carre {
        width: 30%; /* Adapter la largeur à l'écran tout en restant aligné horizontalement */
        height: auto; /* Ajuster la hauteur automatiquement */
        max-width: 150px; /* Limite maximale pour éviter les débordements */
    }

    .TitreConteneur{
        font-size: 20px; /* Taille du texte réduite pour les petits écrans */
        margin-bottom: 15px;
    }

    .Conteneur1 a, .Conteneur2 a, .Conteneur3 a {
        width: 30%;
        max-width: 150px;
        height: auto;
    }
}


/*--------------------------------------------------------------
# Css destiné à la page Contact du site
--------------------------------------------------------------*/
.contact {
    padding-bottom: 30px;
}

.contact .info-box {
    color: #444;
    text-align: center;
    box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
    padding: 20px 0 30px 0;
    margin-bottom: 30px;
}

.contact .info-box i {
    font-size: 32px;
    color: #68A4C4;
    border-radius: 50%;
    padding: 8px;
    border: 2px dotted #a2cce3;
}

.contact .info-box h3 {
    font-size: 20px;
    color: #666;
    font-weight: 700;
    margin: 10px 0;
}

.contact .info-box p {
    padding: 0;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.contact .php-email-form {
    box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
    padding: 30px;
    margin-bottom: 30px;
}

.contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    font-weight: 600;
}

.contact .php-email-form .error-message br+br {
    margin-top: 25px;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
}

.contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
}

.contact .php-email-form input::focus,
.contact .php-email-form textarea::focus {
    background-color: #68A4C4;
}

.contact .php-email-form input {
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
    background: #68A4C4;
    border: 0;
    padding: 10px 24px;
    color: #fff;
    transition: 0.4s;
}

.contact .php-email-form button[type=submit]:hover {
    background: #8dbad2;
}

@keyframes animate-loading {
    0% {
    transform: rotate(0deg);
    }

    100% {
    transform: rotate(360deg);
    }
}

/*Css pour le défilement d'image sans fondue*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    .ig-carousel-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
    }
    .ig-carousel-container {
    position: relative;
    width: 90%;
    max-width: 600px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .ig-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    }

    .ig-carousel-track-2 {
        display: flex;
        transition: transform 0.5s ease-in-out;
        }

    .ig-carousel-item {
    min-width: 100%;
    }

    .ig-carousel-item img {
    width: 100%;
    display: block;
    }

    .ig-carousel-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    }

    .ig-carousel-buttons button {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    }

    .ig-carousel-buttons button:hover {
    background-color: rgba(0, 0, 0, 0.8);
    }

/**Css pour les vidéo**/
.video-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px;
}

.video-container iframe {
    width: 100%;
    max-width: 350px;
    height: 350px;
}

@media (max-width: 768px) {
    .video-container {
        flex-direction: column;
        align-items: center;
    }
    .video-container iframe{
        width: 100%;
        max-width: 100px;
        height: 100px;
    }
}
/*Css pour le contenue du bas de page (footer)*/
.ConteneurBasDePage{
    height: 500px;
    width: 100%;
    background-image: url("../css/imagescss/Bandeau7.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.map-container {
    margin-left: 350px;
    border: 0;
    width: 200px;
    height: 200px;
}
.BTN {
    display: block;
    width: 220px;
    margin: 10px auto;
    padding: 14px;
    border: none;
    background-color: #00c3ff;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.BTN:hover {
    background-color: #009ac8;
}
@media screen and (min-width: 320px) and (max-width: 480px){
    .map-container{
        margin-left: 10px;
        border: 0;
        width: 60px;
        height: 60px;
    }
}