/* Style global du site amicro44 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: white; /* Couleur de fond de la page, identique à l'entête */
}
/* En-tête avec logo et 2 images */
header {
    display: flex;
    justify-content: space-between;
/*	flex-direction: row-reverse; /* dodecahedre à gauche */ 
    align-items: center;
    background-color: white;
    height: 190px; /* Ajuste la hauteur selon vos besoins */
}
.image-fixe {
    width: 110%;
    height: 100%;
    object-fit: cover; /* Adapte l'image à son conteneur sans déformer */
}
.image-animee {
    width: 15%; /* Ajustez selon vos besoins */
    height: 90%; /* Ajustez selon vos besoins */
    border: none; /* Supprime la bordure, si ce n'est pas encore fait */

}
/*Barre de menu */
nav {
    width: 100%;
    background-color: white;
}
.menu {
    position: relative; /* Position absolue pour la placer sous le header */
    top: 0px; /* Aligne la barre juste après le header (taille du header) */
    z-index: 100; /* Assure que la barre est visible au-dessus des zones */
    width: 100%; /* Prend toute la largeur */
    background-color: white; /* Fond blanc */
    height: 20px; /* Hauteur de la barre */
    display: flex;
    align-items: center; /* Centre verticalement les items */
	list-style-type: none;
}
.menu li:first-child {
    margin-left: 190px; /* Marge gauche du menu */
}
.menu li {
    margin: 0 60px; /* Ecartement des zones du menu */
}
.menu a {
    text-decoration: none;
    color: #1179bb;
    padding: 15px 0;
    display: block;
	font-size: 20px;
    font-weight: bold;
	transition: transform 0.5s; /* Transition pour l'animation */
}
.menu a:hover {
    transform: scale(1.2); /* Agrandit légèrement l'item survolé */
}
/* Ajout de l'animation de rotation au passage du curseur ( ne plait pas à tout le monde!)*/
/* .menu a:hover {
    transform: rotate(360deg);
}
*/
.zones {
    display: grid; /* Active le mode grille */
    grid-template-columns: 40% 30% 30%; /* Trois colonnes : 50% pour la première, 25% pour les deux autres */
    grid-template-rows: 33% 33% 34%; /* Trois lignes : répartition des hauteurs */
    gap: 10px; /* Espacement entre les éléments */
    padding: 10px; /* Espacement intérieur */
    height: calc(100vh - 190px); /* Ajuste la hauteur totale pour header + menu */
}
.zone {
    background-color: #e0e0e0; /* Fond gris clair */
    border: 1px solid #ccc; /* Bordure fine grise */
    text-align: center; /* Centrage horizontal du texte */
    display: flex; /* Utilise Flexbox pour centrer le contenu */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    text-decoration: none; /* Supprime le soulignement des liens */
    color: #333; /* Couleur du texte */
}
/* Positionnement des zones */
#zone1 {
	display: flex; /* Active le mode Flexbox */
    align-items: flex-start; /* Aligne le contenu au début (en haut) */
    justify-content: flex-start; /* Facultatif, pour un alignement horizontal */
    grid-column: 1 / 2; /* Première colonne (colonne 1) */
    grid-row: 1 / 4; /* S'étend sur toutes les lignes (1 à 3) */
	font-size: 4.5rem;;/* Taille de la police en proportionel équivalent 85px*/
	color: #1179bb;; /* Couleur du texte en bleu */
	background-color: white;
	border: none;
	padding-top: 0;
}
#zone2 {
    grid-column: 2 / 3; /* Deuxième colonne */
    grid-row: 1 / 2; /* Première ligne */
	overflow: hidden; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 100%; /* Ajuste la hauteur de la zone */
	border-radius: 10px;
}
#zone2 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: auto; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;
}
#zone2:hover img {
    transform: scale(1.1); /* Zoom à 110% lorsque la souris survole */
}
#zone3 {
    grid-column: 2 / 3; /* Deuxième colonne */
    grid-row: 2 / 3; /* Deuxième ligne */
	overflow: hidden; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 200%; /* Ajuste la hauteur de la zone */
	border-radius: 10px
}
#zone3 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: auto; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;
}
#zone3:hover img {
    transform: scale(1.1); /* Zoom à 110% lorsque la souris survole */
}
#zone4 {
    grid-column: 3 / 4; /* Troisième colonne */
    grid-row: 1 / 2; /* Première ligne */
	overflow: hidden; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 100%; /* Ajuste la hauteur de la zone */
	border-radius: 10px;
	border:
}
#zone4 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: 100%; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;	
}
#zone4:hover img {
    transform: scale(1.1); /* Zoom à 110% lorsque la souris survole */
}
#zone5 {
    grid-column: 3 / 4; /* Troisième colonne */
    grid-row: 2 / 3; /* Deuxième ligne */
	overflow: hidden; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 100%; /* Ajuste la hauteur de la zone */
	border-radius: 10px;
}
#zone5 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: 100%; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;
}
#zone5:hover img {
    transform: scale(1.1); /* Zoom à 110% lorsque la souris survole */
}
#zone6 {
    grid-column: 3 / 4; /* Troisième colonne */
    grid-row: 3 / 4; /* Troisième ligne */
	overflow: hidden; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 100%; /* Ajuste la hauteur de la zone */
	border-radius: 10px;
}
#zone6 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: 100%; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;
}	
#zone6:hover img {
    transform: scale(1.1); /* Zoom à 110% lorsque la souris survole */
}
.zone:hover {
    background-color: #d0d0d0; /* Change la couleur au survol */
    border-color: #aaa; /* Change la bordure au survol */
}
.club {                     /* Ajout de styles pour centrer les éléments (uniquement pour cette page) */
        main 
            display: flex;
            flex-direction: column;
            align-items: left;
            text-align: left;
			font-weight: bold;
            background-color: #dddddd;
        }
        form {
            display: inline-block;
            text-align: left;
        }
        p {
            text-align: left;
            font-size: 1em;
            margin: 10px 0;
        }
        h2 {
            text-align: center;
        }
        ul {
            text-align: left;
        }
        label {
            font-size: 1em;
        }
        .executive-board {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            text-align: center;
        }
        .member {
            margin: 20px;
        }
        .member img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }
        .member p {
            margin: 5px 0;
}

/* Styles pour la modal */
#about-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    z-index: 1000;
}
/* Styles pour le fond de la modal */
  #about-modal,
		#gestion-modal,
		#about-modal,
        #address-modal {
            display: none; /* Masquer les modals par défaut */
            position: fixed; /* Assurer que les modals soient superposés */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000; /* Assurer que les modals soient au-dessus des autres éléments */
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        #modal-background,
        #address-modal-background {
            display: none; /* Masquer les fonds de modals par défaut */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999; /* Assurer que les fonds de modals soient derrière les modals */
        }
			#modal-background {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
			}
/* Styles pour le bouton de fermeture des modals*/
.close-button {
    position: absolute;
    top: 1px;
    right: 10px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}
.close-button:hover {
    background-color: darkred;
}
/* Pied de page */
footer {
    width: 100%;
    background-color: #172b48;
    padding: 20px 0;
    text-align: center;
    margin-top: auto;	/* Place le pied de page en bas */
	height: 50px;
}
footer a {
    text-decoration: none;
    color: white;
    margin: 0 10px;
	margin-top: auto;
}
/* Adaptation pour les smartphones */
@media (max-width: 768px) {
    nav .menu {
        display: flex; /* Affiche les éléments du menu comme une flexbox */
        flex-direction: column; /* Aligne les éléments du menu verticalement */
        align-items: flex-start; /* Aligne les éléments du menu au début de l'axe principal (gauche) */
        margin-left: 0; /* Supprime toute marge gauche précédemment appliquée */
        margin-bottom: 300px; /* Espace sous le menu */
		margin-top: 55px; /* Ajoute un espace au-dessus du menu */
    }
    nav .menu li {
        margin: 0; /* Supprime les marges autour des éléments de la liste */
        width: 100%; /* Chaque élément occupe toute la largeur de son conteneur */
        text-align: left; /* Aligne le texte des éléments à gauche */
    }
	.menu li:first-child {
		margin-left: 0px; /* Marge gauche du menu */
	}	
    .image-fixe {
        width: 100%;
        height: auto;
		position: fixed;
		top: 0px;
    }
        
	.image-animee {
    width: 100%;
    height: 100%;
    position: relative; /* Permet un positionnement par rapport à son élément parent */
    margin-top: 100px; /* Ajoute un espace de 100px par rapport au haut de la page */
	}
    .zones {
        display: flex; /* Active Flexbox pour aligner les zones */
        flex-direction: column; /* Empile les zones verticalement */
        align-items: center; /* Centre horizontalement les zones */
        gap: 10px; /* Ajoute un espacement entre chaque zone */
        margin: 300px 0; /* Ajoute un espace entre les zones et le header/pied de page */
    }
    .zone {
        width: 90%; /* Les zones occupent 90% de la largeur de l'écran */
        height: 100%; /* Ajuste automatiquement la hauteur en fonction du contenu */
        display: flex; /* Utilise Flexbox pour centrer le contenu */
        justify-content: center; /* Centre horizontalement le contenu */
        align-items: center; /* Centre verticalement le contenu */
        text-align: center; /* Centre le texte dans chaque zone */
        background-color: #e0e0e0; /* Couleur de fond (gris clair) */
        border: 1px solid #ccc; /* Bordure fine autour de chaque zone */
        padding: 10px; /* Ajoute un espace intérieur */
        box-sizing: border-box; /* Inclut le padding dans la largeur et la hauteur totale */
    }
	
	#zone1 {
        display: none !important; /* Masque uniquement la zone 1 en mode adaptatif */
	}
	#zone2 {
   /* grid-column: 2 / 3; /* Deuxième colonne */
   /* grid-row: 1 / 2; /* Première ligne */
	overflow: visible; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 300%; /* Ajuste la hauteur de la zone */
	border-radius: 10px;
}
#zone2 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: auto; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;

}
#zone3 {
    /*grid-column: 2 / 3; /* Deuxième colonne */
    /*grid-row: 2 / 3; /* Deuxième ligne */
	overflow: hidden; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 300%; /* Ajuste la hauteur de la zone */
	border-radius: 10px
}
#zone3 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: auto; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;

}
#zone4 {
    grid-column: 3 / 4; /* Troisième colonne */
    grid-row: 1 / 2; /* Première ligne */
	overflow: hidden; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 200%; /* Ajuste la hauteur de la zone */
	border-radius: 10px;
	border:
}
#zone4 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: 100%; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;	

}
#zone5 {
    grid-column: 3 / 4; /* Troisième colonne */
    grid-row: 2 / 3; /* Deuxième ligne */
	overflow: hidden; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 250%; /* Ajuste la hauteur de la zone */
	border-radius: 10px;
}
#zone5 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: 100%; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;

}
#zone6 {
    grid-column: 3 / 4; /* Troisième colonne */
    grid-row: 3 / 4; /* Troisième ligne */
	overflow: hidden; /* Cache le contenu qui dépasse */
    width: 100%; /* Ajuste la largeur de la zone */
    height: 250%; /* Ajuste la hauteur de la zone */
	border-radius: 10px;
}
#zone6 img {
    width: 100%; /* Ajuste la largeur de l'image à la taille de la zone */
    height: 100%; /* Maintient le ratio de l'image */
    object-fit: cover; /* Permet d'adapter l'image à la zone sans déformation excessive */
	transition: transform 0.3s ease;
}	

    #about-modal,
    #gestion-modal,
    #address-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%; /* Largeur adaptée à l'écran */
            /*max-width: 400px; /* Limite maximale de largeur */
            /*height: 80vh; /* Hauteur relative à l'écran (80% de la hauteur de l'écran) */
           /* max-height: 90%; /* Limite maximale de hauteur */
            /*background-color: white;
            color: black;
            padding: 20px;
            box-sizing: border-box;
            font-size: 1rem;
            line-height: 1.5;
            z-index: 9999;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour meilleure visibilité */
            /*overflow-y: auto; /* Ajoute un défilement si le contenu dépasse la hauteur */
           /* word-wrap: break-word;
            overflow-wrap: break-word;         
            border-radius: 10px; /* Coins arrondis pour un aspect esthétique */
            /*display: flex;
            flex-direction: column;
            align-items: center; /* Centre horizontalement le texte et les éléments */
            /*justify-content: center; /* Centre verticalement les éléments */
           /* text-align: justify; /* Justifie le texte pour une meilleure présentation */
           /* max-width: 90%; /* Limite la largeur du paragraphe au sein du modal */
           /* margin: 0 auto; /* Centre le texte horizontalement */
        }
        
    #modal-background {
        position: fixed; /* Fixe le fond derrière la modal */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
        z-index: 9998; /* Juste en dessous de la modal */
    }
    .close-button {
        position: absolute; /* Correction de la propriété */
        top: 5px; /* Positionne le bouton de fermeture plus près du haut */
        right: 5px; /* Positionne le bouton plus près du bord droit */
        padding: 3px 8px; /* Réduit la taille du bouton pour les écrans plus petits */
        font-size: 0.9rem; /* Réduit légèrement la taille du texte */
    }
}