/* Réinitialisation des styles de base */
html, body {
    height: auto;
    margin: 0;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
       font-family: 'Bad Script', cursive;
	   max-width:1200px;margin :auto; 
font-size:1em;
line-height:1.4em
}

/* Styles pour le header */
header {
    background-color: #54abc1;
    color: #fff;
    padding: 1em 0;
    text-align: center;
 
}

header h1 {
    font-size: 2.2em;
    margin: 0;
    padding: 0;
    font-weight: normal;
		margin-bottom: 0.3em;font-family: 'Fredericka the Great', serif;
}


h2 {
    font-size: 1.5em;
    margin: 0;
    padding: 0;
    font-weight: normal;
}

header p {
    font-size: 1.2em;
    margin: 0;
    padding: 0;
}

header nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

header nav li {
    margin: 0 10px;
}

header nav a {
    text-decoration: none;
    color: #fff;
    font-size: 1em;
    text-decoration: none;
}

header nav a:hover {
  color: #aad3de;
}
}

/* Styles pour le contenu principal */
main {
    background-color: #fff;
    padding: 1em;
    flex-grow: 1;

}



/* Styles CSS pour la section "bouton-ouvrir-carte" */
#bouton-ouvrir-carte {
   width: 100%; /* Faites en sorte que la section occupe 100% de la largeur */
    text-align: center; /* Centre le contenu horizontalement */
}

#ouvrir-carte {
    background-color: #54abc1;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
}

#ouvrir-carte:hover {
    background-color: #1a87b4; /* Changement de couleur au survol */
	 
}



/* Styles pour chaque section */
section {
    margin: 2em 0;
}

/* Styles pour la classe .section-content */
.section-content {
    display: flex;
    flex-direction: row; /* Place les éléments en ligne (côte à côte) */
    align-items: center; /* Centre verticalement les éléments */
    margin: 2em 0;
}


/* CSS pour la section de la carte */
#carte {
    display: flex; /* Utilisez Flexbox pour organiser les éléments en ligne */
}


.section-explo {
	color:#fff;
    display: flex; /* Utilisez Flexbox pour la mise en page interne */
    flex: 1; /* Faites en sorte que la section occupe tout l'espace disponible */
    margin: 0; /* Supprimez les marges par défaut */
}


/* CSS pour la zone de lien (50% de la zone de droite) */
.section-link {
    flex: 20%; /* Occupe 50% de l'espace disponible dans la zone de droite */
    padding: 20px; /* Espace autour du lien */
	text-align:center;
}

/* CSS pour le lien dans la zone de lien */
.section-link a {
    text-decoration: none; /* Supprime la soulignement du lien */
    color: #fff; /* Couleur du lien */
    font-weight: bold; /* Texte en gras */
    font-size: 1.2em; /* Taille du texte */
	text-decoration:none;
	 background-color: #54abc1;padding:0.5em;
	 border-radius: 0.8em;
}







/* Styles pour la classe .section-image */
.section-image {
    flex: 1; /* Permet à l'image de prendre autant d'espace que possible */
    max-width: 50%; /* L'image prendra au maximum 50% de la largeur de l'écran */
    padding: 0 1em; /* Ajoute un peu d'espace entre l'image et le texte */
    text-align: center; /* Centre l'image horizontalement */
}

/* Styles pour la classe .section-text */
.section-text {
    flex: 1; /* Permet au texte de prendre autant d'espace que possible */
}

/* Styles spécifiques pour les images */
.section-image img {
    max-width: 100%; /* Assurez-vous que l'image ne dépasse pas de son conteneur */
    height: auto; /* Permet à l'image de conserver son ratio hauteur/largeur */
}


/* Ajoutez ces styles CSS à votre feuille de style existante */
.image-hover {
    transition: transform 0.3s ease-in-out; /* Ajoute une transition à la propriété "transform" */
}

.image-hover:hover {
    transform: scale(1.01); /* Applique une mise à l'échelle de 110% au survol de l'image */
}



.section-text ul li {
    margin-bottom: 0.5em; /* Espacement entre les éléments de la liste */
}



/* Styles pour le lien e-mail */
a.email-link {
    color: black;
    font-weight: bold;
}







#ouvrir-carte {
    background-color: #54abc1;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 15px;
    font-size: 1em;
    cursor: pointer;
    margin-bottom: 10px; /* Espacement en bas du bouton */
}

#ouvrir-carte:hover {
    background-color: #1a87b4; /* Changement de couleur au survol */
}


#nouvelle-section{width:80%; margin:auto; background-color:#f0f0f0; padding:1em; margin-bottom:2em
}

#nouvelle-section a {color:#000}

/* Styles pour le lien "Lancer la carte interactive" */
#lancer-carte {
    display: inline-block;
    padding: 10px 20px;
    background-color: #54abc1;
    color: #fff;
    text-decoration: none;
    border-radius: 15px;
    font-size: 1.2em;
	width:50%;
	text-align:center;
    transition: background-color 0.3s;
	margin:auto;
	margin-bottom : 2em
}

#lancer-carte:hover {
    background-color: #1a87b4; /* Changement de couleur au survol */
}




/* Styles pour le footer */
footer {
    background-color: #54abc1;
    color: #fff;
    padding: 0;

    text-align: center;
}

footer a {
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}

footer a:hover {
    text-decoration: underline;
}


/* Styles pour la classe .section-content sur les appareils mobiles */
@media screen and (max-width: 767px) {
    .section-content {
        flex-direction: column; /* Place les éléments en colonne les uns en dessous des autres */
        align-items: stretch; /* Étire les éléments pour occuper toute la largeur */
    }

    .section-text, .section-image {
        max-width: 100%; /* Assurez-vous que chaque élément occupe 100% de la largeur */
		margin:0; padding:2em
    }
}