/* Importation de la police */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400&display=swap');

/* Styles pour le header */
header {
    display: flex; /* Utilise le modèle de mise en page Flexbox pour aligner les éléments enfants. Cela permet de disposer les éléments du header de manière flexible et contrôlée. */
    justify-content: space-between; /* Répartit l'espace disponible entre les éléments enfants de manière à ce qu'ils soient positionnés aux extrémités opposées du conteneur. Par exemple, cela place le logo à gauche et le menu à droite. */
    align-items: center; /* Aligne verticalement les éléments enfants au centre de la hauteur du conteneur. Cela garantit que tous les éléments du header sont alignés verticalement au centre. */
    padding: 10px 0; /* Ajoute un espacement interne de 10 pixels en haut et en bas du header, mais aucun espacement sur les côtés. Cela crée de l'espace autour du contenu à l'intérieur du header. */
    background-color: gray; /* Définit la couleur de fond du header en gris. Cela donne une couleur de fond uniforme à l'ensemble du header. */
    /*position: sticky;*/ /* Rend le header "collant", c'est-à-dire qu'il reste fixé en haut de la page lorsqu'on fait défiler le contenu. Cela le rend visible en permanence en haut de la fenêtre de visualisation. */
    top: 0; /* Spécifie que le header doit rester collé au sommet de la fenêtre de visualisation lorsque l'utilisateur fait défiler la page. Cela s'associe à `position: sticky`. */
    z-index: 1000; /* Définit la profondeur d'affichage du header. Un `z-index` plus élevé place le header au-dessus des autres éléments avec des `z-index` inférieurs, ce qui garantit qu'il reste visible au-dessus du contenu lorsqu'on fait défiler. */
    border-radius: 15px 15px 0 0; /* Arrondit les coins du header. Les coins supérieurs gauche et droit ont un rayon de 15 pixels, tandis que les coins inférieurs gauche et droit ne sont pas arrondis. Cela donne un effet visuel esthétique et moderne avec des coins arrondis en haut. */
    position: relative;  /*Non sticky */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Styles globaux pour le logo */
.logo {
    max-height: 180px; /* Définit la hauteur maximale de l'élément avec la classe `.logo` à 150 pixels. Cela permet à l'image ou au logo de s'ajuster automatiquement tout en respectant cette contrainte de hauteur maximale. Si l'image est plus grande que 150 pixels de haut, elle sera réduite proportionnellement pour s'adapter à cette hauteur. */
    margin-left: 60px; /* Ajoute un espace de 20 pixels à gauche de l'élément avec la classe `.logo`. Cela crée un espace entre le logo et le bord gauche de son conteneur, ou tout autre élément situé à sa gauche, pour améliorer la mise en page et la séparation visuelle. */
    margin-top: 40px;
    margin-right: 80px;	
	order: 1;  /*Place le logo avant le titre (0) ou après le titre (1) */
}

/* Conteneur pour le titre et sous-titre */
.site-info {
    display: flex; /* Utilise Flexbox pour gérer la disposition des éléments enfants à l'intérieur de `.site-info`. Cela permet de positionner et aligner les éléments de manière plus flexible. */
    flex-direction: column; /* Dispose les éléments enfants (comme le titre et le sous-titre) en une colonne, les empilant verticalement les uns sur les autres. */
    align-items: center; /* Centre les éléments enfants horizontalement à l'intérieur de `.site-info`, assurant que le titre et le sous-titre sont alignés au centre. */
    text-align: center; /* Centre le texte à l'intérieur des éléments enfants de `.site-info`. Cela affecte les titres et sous-titres en assurant que le texte est centré horizontalement. */
    width: 80%; /* Définit la largeur de `.site-info` à 80% de la largeur de son conteneur parent. Cela permet à l'élément de s'adapter proportionnellement à l'espace disponible tout en laissant une certaine marge autour. */
    padding: 20px; /* Ajoute un espace intérieur de 20 pixels tout autour du contenu de `.site-info`. Cela crée de l'espace entre les bordures de `.site-info` et son contenu (titre et sous-titre) pour éviter que le texte ne touche les bords. */
}

/* Styles pour le titre du site */
.site-title {
    font-size: 4.5em; /* Définit la taille de la police du titre à 2.5 fois la taille de la police par défaut. Cela rend le titre plus grand et plus visible. */
    margin: 0; /* Supprime les marges par défaut autour du titre, assurant qu'il n'y a pas d'espace supplémentaire au-dessus ou en dessous du titre. Cela aide à garder l'espacement cohérent et précis. */
    color: white; /* Définit la couleur du texte du titre en blanc. Cela le rend visible sur des arrière-plans plus sombres, comme le fond gris de l'en-tête. */
}

/* Styles pour le sous-titre */
.site-subtitle {
    font-size: 1.5em; /* Définit la taille de la police du sous-titre à 1.5 fois la taille de la police par défaut. Cela rend le sous-titre plus petit que le titre mais toujours visible. */
    margin: 0; /* Supprime les marges par défaut autour du sous-titre pour maintenir un espacement uniforme et éviter tout espace supplémentaire indésirable. */
    color: white; /* Définit la couleur du texte du sous-titre en blanc, assurant ainsi que le sous-titre est également bien visible contre le fond sombre. */
}

/* Styles pour le menu burger */
.menu-burger {
    display: none; /* Le menu burger est caché par défaut */
    font-size: 2em; /* Définit une taille de police assez grande (2 fois la taille de la police de base) pour rendre le menu burger bien visible lorsque affiché */
    cursor: pointer; /* Change le curseur de la souris en une main lorsqu'on survole le menu burger, indiquant qu'il est cliquable */
}

/* Styles pour la navigation (menu) */
nav ul {
    list-style-type: none; /* Supprime les puces ou autres marqueurs de liste par défaut */
    padding: 0; /* Supprime le rembourrage par défaut autour de la liste */
    margin: 0; /* Supprime les marges par défaut autour de la liste */
    display: flex; /* Utilise Flexbox pour disposer les éléments de la liste horizontalement */
	align-items: flex-end; /* Aligne les éléments du menu sur la ligne de base du dernier élément, souvent pour qu'ils soient alignés avec le bas d'un logo ou d'autres éléments dans le header */
    justify-content: space-around; /* Distribue les éléments du menu de manière égale dans l'espace disponible, avec un espacement uniforme entre eux */
	background-color: gray; /* Définit la couleur de fond en gris pour la zone de navigation */
	border-radius: 0 0 15px 15px; /* Coins arrondis en bas à gauche et à droite seulement */
}

.menu {
    font-size: 1em; /* Définit une taille de police assez grande (2 fois la taille de la police de base) pour rendre le menu burger bien visible lorsque affiché */
}

nav ul li {
    position: relative; /* Définit la position comme relative, ce qui permet de positionner les éléments enfants (comme des sous-menus) en fonction de cet élément */
	margin-left: 20px; /* Ajoute un espace de 20px à gauche de chaque élément de la liste pour les séparer les uns des autres */
}

nav ul li a {
    text-decoration: none; /* Supprime la décoration par défaut des liens (comme les soulignements) */
    color: black; /* Définit la couleur du texte des liens en noir */
    padding: 10px 20px; /* Ajoute un rembourrage interne autour des liens (10px en haut et en bas, 20px à gauche et à droite) pour agrandir la zone cliquable */
	line-height: 1.5; /* Définit une hauteur de ligne pour ajuster l'espacement vertical à l'intérieur des éléments de la liste */
    display: block; /* Fait en sorte que chaque lien occupe tout l'espace disponible dans l'élément `li` et se comporte comme un bloc, ce qui rend toute la zone cliquable */
	}


/* Styles pour les sous-menus */
nav ul li .submenu {
    display: none; /* Le sous-menu est caché par défaut */
    position: absolute; /* Le sous-menu est positionné de manière absolue par rapport à l'élément parent (li) */
    top: 100%; /* Positionne le sous-menu juste en dessous de l'élément parent, 100% de la hauteur de ce dernier */
    left: 0; /* Aligne le sous-menu avec le bord gauche de l'élément parent */
    background-color: dimgray; /* Définit une couleur de fond gris clair pour le sous-menu */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Ajoute une ombre en dessous du sous-menu pour donner un effet de profondeur */
    text-align: left; /* Aligne le texte du sous-menu à gauche */
}

nav ul li:hover .submenu {
    display: block; /* Lorsque l'utilisateur survole l'élément parent (li), le sous-menu devient visible */
}

nav ul li .submenu li {
    width: 200px; /* Chaque élément de la liste dans le sous-menu a une largeur fixe de 200px */
}






/* Section de l'image de fond avec du texte */
.background-section {
    position: relative; /* Position relative pour permettre l'utilisation d'éléments positionnés absolument à l'intérieur si nécessaire */
    height: auto; /* Hauteur ajustable de 400px pour la section */
    background-size: cover; /* L'image de fond est redimensionnée pour couvrir entièrement la section, en gardant son ratio d'aspect */
    background-position: center; /* L'image de fond est centrée dans la section, quel que soit son redimensionnement */
    display: flex; /* Utilise Flexbox pour disposer le contenu à l'intérieur de la section */
    align-items: center; /* Centre verticalement le contenu dans la section */
    justify-content: left; /* Centre horizontalement le contenu dans la section */
    text-align: left; /* Aligne le texte au centre, pour que tout le texte soit centré dans la section */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin: 5px; /* Espacement autour des cartes */
	padding: 0;
}

.background-section:hover {
    transform: translateY(-0px); /* L'effet au survol */
}

.overlay-text {
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent pour le texte */
    padding: 20px;
    border-radius: 10px;
	width: 100%; /* Assurer que l'overlay-text prend toute la largeur */
    max-width: 800px; /* Fixer une largeur maximale pour éviter que le texte ne s'étale trop */
    box-sizing: border-box; /* Assurer que padding et largeur ne dépassent pas la taille définie */
}

.overlay-text h1 {
    font-size: 2.5em;
}

/* Styles pour les liens */
.overlay-text ul {
    list-style: none; /* Supprimer les puces de la liste */
    padding: 0; /* Enlever le padding interne de la liste */
    margin: 0; /* Enlever la marge externe de la liste */
}

.overlay-text li {
    margin-bottom: 10px; /* Espacement entre chaque élément de la liste */
}

.overlay-text a {
    color: white;
    font-size: 1.2em;
    text-decoration: none; /* Enlever le soulignement des liens */
}

.overlay-text a:hover {
    text-decoration: underline; /* Souligner les liens au survol pour indiquer l'interaction */
}

/* Marges et paddings spécifiques */
.overlay-text h3 {
    margin: 0 0 10px 0; /* Enlever les marges supérieures et inférieures pour éviter l'espacement supplémentaire */
    padding: 0;
}

.overlay-text p {
    font-size: 1.2em;
}







/* Styles généraux */

/* Corps de la page */

body {
    background-color: lightgray; /* Définit la couleur de fond de toute la page */
    font-family: 'Quicksand', 'Calibri', 'Garamond', 'Arial', sans-serif;
    margin: auto; /* Centre le contenu horizontalement dans certains cas, utile pour des pages de largeur fixe */
    text-align: justify; /* Justifie le texte pour qu'il soit aligné à la fois à gauche et à droite*/
    line-height: 1.6; /* Définit l'interligne à 1.6 fois la taille de la police pour améliorer la lisibilité */
    padding-top: 20px;
	padding-bottom:20px;/* Définit un espace intérieur (padding) pour le corps, ce qui ajoute de l'espace autour du contenu pour éviter qu'il ne colle trop aux bords de la page */
    padding-left: 50px;/* Ajoute un padding spécifique à gauche et à droite entre les côtés de l'écran et le contenu, tout en gardant les 20px généraux*/
    padding-right: 50px;
}


/* Styles pour les images avec légende */
figure {
    display: block; /* Définit l'élément figure comme un bloc (par défaut, mais explicite ici) */
    text-align: center; /* Centre tout le contenu à l'intérieur de la figure, y compris l'image et la légende */
    margin: 20px 0; /* Ajoute une marge verticale de 20px au-dessus et en dessous de la figure */
    float: right; /* Place la figure à droite du contenu environnant, permettant au texte de s'écouler autour d'elle */
    width: 40%; /* La figure occupe 40% de la largeur de son conteneur parent */
    margin-left: 20px; /* Ajoute une marge gauche de 20px pour éloigner la figure du texte à gauche */
}

figure img {
    max-width: 100%; /* L'image ne dépassera jamais la largeur de la figure, elle s'adapte à 100% de la largeur disponible */
    height: auto; /* La hauteur de l'image s'ajuste automatiquement pour maintenir son ratio d'aspect */
	border-radius: 15px; /* Arrondit tous les coins de l'image avec un rayon de 15px */
}

figcaption {
    font-size: 0.9em; /* La taille du texte de la légende est légèrement réduite (90% de la taille de base) */
    color: #555; /* Couleur gris foncé pour le texte de la légende */
    margin-top: 10px; /* Ajoute un espace de 10px au-dessus de la légende, séparant celle-ci de l'image */
    text-align: center; /* Centre le texte de la légende sous l'image */
}

figure {
    font-size: 0.6em; /* Réduction de la taille de la police pour les éléments à l'intérieur de figure, mais cette règle peut être redondante avec les autres */
}

figure figcaption {
    font-size: initial; /* Réinitialise la taille de la police de figcaption à la taille par défaut du document (annulant la réduction précédente) */
}

p {
    text-align: justify; /* Aligne le texte des paragraphes de manière à ce que les deux côtés (gauche et droit) soient alignés */
    margin-top: 0; /* Supprime toute marge supérieure sur les paragraphes */
    clear: none; /* Permet au texte de s'enrouler autour de la figure sur les grands écrans, en n'empêchant pas les éléments flottants */
}

/* Ajout pour s'assurer que le texte ne passe pas en dessous de l'image */
.content {
    overflow: auto; /* Permet de gérer correctement les flottants à l'intérieur du conteneur, assurant que le contenu suivant ne passe pas en dessous de l'image */
}

.image-petite {
	float:right;
    max-width: 60%;
    height: auto;
	margin-left: 20px;
	margin-right:50px;
}

.image-gauche {
	float:left;
    max-width: 100%;
    height: auto;
	margin-right: 20px;
	margin-left:20px;
}

/* Styles pour la sélection de la langue */
.lang-select {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligne à droite dans le header */
    margin-right: 20px; /* Espace entre les drapeaux et les autres éléments */
}

.lang-select a {
    margin-left: 10px; /* Espace entre les drapeaux */
}

.flag {
    width: 30px; /* Taille de l'image des drapeaux */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease; /* Animation au survol */
}

.flag:hover {
    transform: scale(1.4); /* Agrandissement au survol */
}

/* Style du plan du site */
footer.sitemap {
    background-color: rgba(128, 128, 128, 0.5); /* Gris à 50% d'opacité */
    padding: 20px;
    text-align: center;
    margin-top: 40px;
}

footer.sitemap ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

footer.sitemap ul li {
    margin: 10px 20px;
    position: relative;
}

footer.sitemap ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

footer.sitemap ul li a:hover {
    text-decoration: underline;
}

/* Sous-menus masqués par défaut */
footer.sitemap ul li .submenu {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0;
}

/* Afficher les sous-menus au survol */
footer.sitemap ul li:hover .submenu {
    display: block;
}

footer.sitemap ul li .submenu li {
    margin-top: 5px;
}

footer.sitemap ul li .submenu li a {
    font-weight: normal;
    color: #555;
}

footer p{
	text-align:center;
}


ul {
    list-style-type: none;
}

li {
    margin: 10px 0;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

.details {
    display: none;
}



/* Menu sticky (reste visible lors du scroll) */
nav {
    position: sticky;
    top: 0;
    background-color: gray; /* Garder la même couleur de fond que le header */
    padding: 10px 0;
    z-index: 1000;
	border-radius: 0 0 15px 15px; /* Coins arrondis en bas à gauche et à droite seulement */
}

/* Logo (disparaît au scroll) */
/*.logo {
    max-height: 200px;
    margin-left: 40px;
}
*/





/* Styles pour la navigation */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
	border-radius: 0 0 15px 15px; /* Coins arrondis en bas à gauche et à droite seulement */
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 0px 0px;
    display: block;
}

/* Effet pour cacher le header au scroll */
.hidden-header {
    opacity: 0;
    transform: translateY(-100%);
}







/* Début de la section pour les grands écrans (min-width: 769px) */
@media (min-width: 769px) {

/* Menu burger */
    .menu-burger {
        display: none; /* Cache le menu burger sur les grands écrans */
    }

    nav ul {
        display: flex; /* Assure que le menu principal est affiché en flex */
    }

	/* images */
    .image-gauche {
        float: left;
        width: 80%; /* Largeur de 80% pour les grands écrans */
        margin-right: 20px;
        margin-left: 0;
    }

/* Figures */
    figure {
        float: right;
        width: 40%;
        margin-left: 20px;
    }

    figcaption {
        text-align: center;
		font-size:1em;
    }
    
    .content {
        overflow: auto;/* Assure que le texte commence à côté de l'image */
    }

    p {
        clear: none; /* Ne force pas les paragraphes sous l'image */
    }

	
/* Section des cartes */
.cards-section {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Permet de mettre les cartes sur plusieurs lignes */
    margin: 40px 0;
}

.card {
    width: 20%; /* Largeur par défaut pour les grands écrans */
    min-width: 250px; /* Largeur minimale des cartes */
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin: 5px; /* Espacement autour des cartes */
}

.card:hover {
    transform: translateY(-10px); /* L'effet au survol */
}

.card img {
    width: 100%;
    height: auto;
}

.card h3 {
    margin: 15px 0;
    font-size: 1.5em;
}

.card p {
    padding: 0 15px 20px;
	text-align:center;
}	
	
}

/* Pour la page "Contact", proportion de 50% pour grands écrans et 100% pour petits écrans */
.image-grand-ecran-15 {
    width: 50%; /* Par défaut pour les grands écrans */
}

@media (max-width: 768px) {
    .image-grand-ecran-15 {
        width: 100%; /* Pleine largeur pour les petits écrans */
		
    }
}


/* Fin de la section pour grands écrans */






/* Début de la section pour les écrans moyens (tablettes et petits ordinateurs) */

/* Section des cartes */
@media (max-width: 1200px) {
    .card {
        width: 30%; /* 2 cartes par ligne */
		background-color: white;
		border-radius: 5px;
    }
}
/* Fin de la section pour écrans moyens */






/* Début de la section pour les petits écrans (max-width: 768px) */

@media (max-width: 768px) {
    header {
        justify-content: center;
        text-align: center;
    }

    .logo {
        margin: 0 auto;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
    }

    nav ul li {
        margin-left: 0;
        margin-bottom: 10px;
    }

	/* images */
    .image-gauche {
        float: none; /* Annule le float sur les petits écrans */
        width: 100%; /* L'image prend toute la largeur de l'écran */
        margin: 0 auto; /* Centre l'image avec les marges automatiques */
    }	

	/* Section des cartes */
    .cards-section {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 80%; /* 1 carte par ligne */
        margin-bottom: 20px;
    }	

    /* Nouvel ajout : Ajustement des images à l'intérieur des cartes */
    .card img {
        width: 100%; /* L'image occupe toute la largeur de la carte */
        height: auto; /* Conserve le ratio d'aspect de l'image */
    }	
	


	
/* Responsive design pour le plan du site */
    footer.sitemap ul {
        flex-direction: column;
        align-items: center;
    }

    footer.sitemap ul li {
        margin: 10px 0;
    }

/* Media queries pour les petits écrans */
    body {
        width: 100%;
        padding: 0;
		padding-left:20px;
		padding-right:20px;
    }


    header {
        flex-direction: column;
        align-items: center;
    }


    nav ul {
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
		
    }

    nav ul li {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .logo {
        max-height: 50px;
		margin: 0 auto;
    }

    .site-title {
        width: calc(100% - 80px);
        font-size: 4.5em;
        line-height: normal;
        text-align: center;
    }

    nav ul {
        flex-direction: column;
        display: none;
    }

    nav ul li {
        text-align: center;
    }

    nav ul li .submenu {
        position: static;
        box-shadow: none;
        text-align: left;
    }

    .menu-burger {
        display: block; /* Le menu burger apparaît sur les petits écrans */
    }

    figure {
        width: 100%;
        float: none;
        margin-left: 0;
    }

    .content {
        overflow: visible; /* Texte affiché en dessous de l'image sur les petits écrans */
    }
	
}
/* Fin de la section pour les petits écrans (max-width: 768px) */



/* code à contrôler */

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 10px 0;
    padding: 10px;
    cursor: pointer;
    position: relative;

}

.details {
    display: none;
    margin-top: 10px;
    /*padding: 10px;*/
    border-radius: 5px;
    font-size: 1em;	
    /*transition: max-height 0.3s ease;*/
}






.container {
    display: flex; /* Disposition en colonnes */
    justify-content: space-between; /* Espace entre les colonnes */
    padding: 20px;
	align-items: flex-start; /* Alignement des éléments au sommet */
	width: 100%; /* Le conteneur occupe 100% de la largeur */
}

.content {
    width: 50%; /* Le texte principal occupe 50% de la largeur */
    padding-right: 20px; /* Espacement à droite pour séparer du bord de l'encadré */
}

.encadre {
    width: 50%; /* L'encadré occupe 50% de la largeur */
    background-color: #f9f9f9; /* Couleur de fond */
    border: 2px solid #ddd; /* Bordure autour de l'encadré */
    padding: 20px;
    box-sizing: border-box; /* Pour inclure le padding et la bordure dans la largeur */
    border-radius: 8px; /* Coins arrondis */
}

.encadre_2 {
    width: 100%; /* L'encadré occupe 50% de la largeur */
    background-color: #e0e0e0; /* Couleur de fond */
    border: 2px solid #ddd; /* Bordure autour de l'encadré */
    padding: 20px;
    box-sizing: border-box; /* Pour inclure le padding et la bordure dans la largeur */
    border-radius: 8px; /* Coins arrondis */
}


/* Mise en page mobile */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column; /* Empile les éléments en colonne sur petit écran */
    }

    .content, .encadre {
        width: 100%; /* Chaque section prend 100% de la largeur sur petits écrans */
        padding: 10px 0; /* Espacement pour éviter que les sections ne se collent */
    }
}


.indente {
    padding-left: 40px; /* Indentation spécifique pour certains éléments de la liste */
}




/*Code à organiser*/




@media (max-width: 768px) {
    .image-grand-ecran-15 {
        width: 100%; /* Pleine largeur pour les petits écrans */
    }
}

/* Pour la page "Team", proportion de 25% pour grands écrans et 50% pour petits écrans (deux images côte à côte) */
.image-grand-ecran-25 {
    width: 50%; /* Par défaut pour les grands écrans */
}

@media (max-width: 768px) {
    .image-grand-ecran-25 {
        width: 50%; /* Deux images côte à côte pour les petits écrans */
    }
}