/***************/
/*STYLE DE BASE*/
/***************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Poppins, sans-serif;
    line-height: 1.6;
}

/********/
/*HEADER*/
/********/
header {
    background-color: #0077eb;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px; /* Limite la largeur maximale à 1200px */
    margin: 0 auto; /* Centre le header horizontalement */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

header .logo-container {
    max-width: 80px;
    display: flex;
    align-items: center;
    flex: 1;
}

header .logo-image {
    width: 100%;
    max-width: 60px;
    height: auto;
}

.logo-image {
    display: flex;
    justify-content: center;  /* Centre horizontalement */
    align-items: center;      /* Centre verticalement si hauteur définie */
    margin: 0 auto;           /* Centre le bloc */
    padding-top: 20px;        /* Espace en haut */
    text-align: center;
}

.logo-image img {
    width: 300px;  /* tu modifies ici à ta guise */
    height: auto;
}

header .logo-text {
    flex: 2;
    text-align: left;
}

header .logo-text h1 {
    font-size: 1.8rem;
}

.menu-container {
    flex: 3;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

header nav {
    display: flex;
    flex-wrap: wrap; /* Permet de passer sur plusieurs lignes */
    justify-content: center;
    overflow: hidden;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

header nav ul li {
    margin: 0 5px;
    margin-bottom: 5px; /* Augmenter l'espace vertical entre les éléments si nécessaire */
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 0.80rem;
}

html {
    scroll-behavior: smooth;	/*Défilement vers les ancres plus esthétique*/
}

/* Liens réseaux sociaux */
.social-links {
    display: flex;
    gap: 10px;
}

.header_youtube_link, .header_instagram_link {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.header_logo_youtube, .header_logo_insta {
    width: 20px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.header_logo_youtube {
    background-image: url('../images/miniatures/logo_youtube.png');
}

.header_logo_insta {
    background-image: url('../images/miniatures/logo_insta.png');
}

		/*------------------------*/
		/*RESPONSIVE DESIGN HEADER*/
		/*------------------------*/	
		/* Desktop ≥1025px : logo centré en haut, texte + menu centrés dessous */
		@media screen and (min-width: 1025px) {
			header {
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			/* Le conteneur du logo prend toute la largeur et centre le contenu */
			header .logo-container {
			width: 100%;
			max-width: none;      /* annule la limite 80px sur desktop */
			flex: 0 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10px;
			}

			/* Le bloc "logo-image" n'est plus limité à 60px sur desktop */
			header .logo-image {
			width: auto;
			max-width: none;      /* annule la limite 60px sur desktop */
			}

			/* Titre centré sous le logo */
			header .logo-text {
			width: 100%;
			text-align: center;
			margin: 5px 0;
			flex: 0 0 auto;
			}

			/* Menu centré sous le titre */
			.menu-container {
			width: 100%;
			justify-content: center;
			flex: 0 0 auto;
			}
			}
				
		/*Smartphones (environ 1024px et moins)*/
		@media screen and (max-width: 1024px) {
			header {
				flex-direction: column;
			}

			.logo-image img {
				max-width: 250%;
			}

			.logo-text h1 {
				font-size: 1.6rem;
				text-align: center;
			}

			header nav ul {
				justify-content: center;
				gap: 0.5rem;
			}

			header nav ul li a {
				font-size: 0.9rem;
			}
		}

		/*Smartphones (environ 768px et moins)*/
		@media screen and (max-width: 768px) {
			header {
				padding: 5px;
			}

			.logo-image img {
				max-width: 200%;
			}
			
			.logo-text h1 {
				font-size: 1.5rem;
			}

			header nav ul {
				flex-wrap: wrap;
				justify-content: center;
			}
		}
		
		/*Smartphones (environ 480px et moins)*/
		@media screen and (max-width: 480px) {
			.logo-image img {
				position : relative;
				max-width: 100%;
			}

			.logo-text h1 {
				font-size: 1.2rem;
			}

			header nav ul li a {
				font-size: 0.8rem;
			}
		}

		/*Smartphones (environ 320px et moins)*/
		@media screen and (max-width: 320px) {
			header {
				padding: 5px;
				flex-direction: column; /* Empile les éléments verticalement */
				align-items: center; /* Centre les éléments */
			}

			/* Logo */
			.logo-image img {
				max-width: 100%; /* Réduit davantage la taille du logo */
				height: auto;
			}

			.logo-text h1 {
				font-size: 1rem; /* Réduit la taille du titre */
				text-align: center; /* Centre le texte */
				margin: 5px 0; /* Ajoute de l'espace vertical */
			}

			/* Navigation */
			nav ul {
				flex-direction: column; /* Empile les liens verticalement */
				align-items: center;
				gap: 5px; /* Espace réduit entre les liens */
			}

			nav ul li a {
				font-size: 0.7rem; /* Taille de texte adaptée aux petits écrans */
			}

			/* Réseaux sociaux */
			.social-links {
				margin-top: 10px; /* Ajoute un peu d'espace entre le menu et les icônes */
			}

			.header_youtube_link, .header_instagram_link {
				width: 25px; /* Réduit la taille des icônes */
				height: 25px;
			}

			.header_logo_youtube, .header_logo_insta {
				width: 15px; /* Taille de l'icône adaptée */
				height: 15px;
			}
		}
		/*------------------------*/
		/*RESPONSIVE DESIGN HEADER*/
		/*------------------------*/




/*******************/
/*BANDEAU PRINCIPAL*/
/*******************/
html {
    font-size: 16px; /* Base standard pour calcul des rem */
}

body {
    font-size: 1rem; /* 1rem = 16px */
}

.conteneur_bandeau_principal {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Limite la largeur à 1200px */
    margin: 0 auto; /* Centre horizontalement */
    height: 50vh; /* Ajusté à 50% de la hauteur de l'écran */
    overflow: hidden;
}

.conteneur_bandeau_principal::before {		/*CRÉER UNE SUPERPOSITION SEMI-TRANSPARENTE C.F. EXPLICATION PLUS BAS*/
    content: ""; /* Obligatoire pour que le pseudo-élément soit visible */
    position: absolute; /* Position absolue pour recouvrir toute la div */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Superposition semi-transparente */
    z-index: 1;
    pointer-events: none; /* Permet de cliquer à travers la superposition */
}

.bp_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.bp_conteneur {
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* Ajoute un espacement entre les éléments */
}

.bp_conteneur h4 {
    font-size: 1rem; /*Texte de taille normale*/
}

.bp_conteneur h2 {
    font-size: 2rem; /*Texte principal*/
	margin: 0 0;
}

.bp_conteneur h5 {
    font-size: 0.9rem; /*Texte plus petit*/
}

.bp_btn_ovale_contact,
.bp_btn_ovale_realisations {
    padding: 0.6rem 1.2rem;
    margin: 0.2rem;
    background-color: #0077eb;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 1rem;
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    text-align: center;
}

.bp_btn_ovale_contact:hover,
.bp_btn_ovale_realisations:hover {
    background-color: #0056b3;
}

		/*-----------------------------------*/
		/*RESPONSIVE DESIGN BANDEAU PRINCIPAL*/
		/*-----------------------------------*/
		/*Smartphones (environ 1024px et moins)*/
		@media screen and (max-width: 1024px) {
			.conteneur_bandeau_principal {
				height: 40vh;
			}

			.bp_conteneur h4 {
				font-size: 0.9rem;
			}
			
			.bp_conteneur h2 {
				font-size: 1.8rem;
				width: 90%; /* Ajout de la largeur de 80% de la div parente */
			}
			
			.bp_conteneur h5 {
				font-size: 0.8rem;
			}

			.bp_btn_ovale_contact,
			.bp_btn_ovale_realisations {
				font-size: 0.9rem;
				padding: 0.5rem 1rem;
			}
		}

		/*Smartphones (environ 768px et moins)*/
		@media screen and (max-width: 768px) {
			.conteneur_bandeau_principal {
				height: 35vh;
			}

			.bp_conteneur h4 {
				font-size: 0.8rem;
			}
			
			.bp_conteneur h2 {
				font-size: 1.6rem;
				width: 90%; /* Ajout de la largeur de 80% de la div parente */
			}
			
			.bp_conteneur h5 {
				font-size: 0.7rem;
			}

			.bp_btn_ovale_contact,
			.bp_btn_ovale_realisations {
				font-size: 0.8rem;
				padding: 0.4rem 0.8rem;
			}
		}
		
		/*Smartphones (environ 480px et moins)*/
		@media screen and (max-width: 480px) {
			.conteneur_bandeau_principal {
				height: 30vh;
			}
			
			.bp_conteneur{
			    gap: 0.3rem; /* Ajoute un espacement entre les éléments */
			}

			.bp_conteneur h4 {
				font-size: 0.7rem;
			}
			
			.bp_conteneur h2 {
				font-size: 1.2rem;
				width: 85%; /* Ajout de la largeur de 80% de la div parente */
			}
			
			.bp_conteneur h5 {
				font-size: 0.8rem;
			}

			.bp_btn_ovale_contact,
			.bp_btn_ovale_realisations {
				font-size: 0.6rem;
				display: inline-flex; /* Utilisation de flexbox pour centrer le texte */
				justify-content: center; /* Centre horizontalement */
				align-items: center; /* Centre verticalement */
				text-align: center; /* Assure que le texte est centré */
			}
		}

		/*Smartphones (environ 320px et moins)*/
		@media screen and (max-width: 320px) {
			.conteneur_bandeau_principal {
				height: 25vh;
			}
			
			.bp_conteneur{
			    gap: 0.2rem; /* Ajoute un espacement entre les éléments */
			}

			.bp_conteneur h4 {
				font-size: 0.6rem;
			}
			
			.bp_conteneur h2 {
				font-size: 0.8rem;
			}
			
			.bp_conteneur h5 {
				font-size: 0.5rem;
			}

			.bp_btn_ovale_contact,
			.bp_btn_ovale_realisations {
				font-size: 0.6rem;
				display: inline-flex; /* Utilisation de flexbox pour centrer le texte */
				justify-content: center; /* Centre horizontalement */
				align-items: center; /* Centre verticalement */
				text-align: center; /* Assure que le texte est centré */
			}
		}
		/*-----------------------------------*/
		/*RESPONSIVE DESIGN BANDEAU PRINCIPAL*/
		/*-----------------------------------*/




/***************************************/
/* IMPRESSION 3D & CRÉATION SUR-MESURE */
/***************************************/
.conteneur_icsm {
    display: flex; /* Active le mode flexbox */
    justify-content: space-between; /* Espacement entre les colonnes */
    align-items: stretch; /* Étire les colonnes verticalement */
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne si nécessaire */
    padding: 1rem; /* Ajoute de l’espace autour du contenu */
    background-color: #f4f4f4; /* Couleur de fond */
    position: relative; /* Positionne le conteneur pour d'éventuels enfants absolus */
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1200px; /* Limite la largeur maximale à 1200px */
    margin: 2rem auto; /* Centre la div horizontalement */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    gap: 20px; /* Ajoute un espacement entre les colonnes */
}

.conteneur_icsm_container {
    display: flex;
    flex-direction: column; /* Empile les éléments */
    align-items: center;
    gap: 20px; /* Espacement entre les éléments */
}

.icsm_titre {
	padding: 8px 20px;
    text-align: left;
    margin: 0 0 -10px 0;
}

.icsm_titre h3 {
	font-family: "Work Sans", sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #0077eb;
}

.icsm_titre h2 {
	font-family: Poppins, sans-serif;
	font-size: 38px;
	font-weight: normal;
	color: #191819;
	opacity: 0.8;
}

.icsm_colonne_milieu {
    flex: 1; /* Prend tout l'espace disponible */
    width: 95%; /* Ajuste la largeur */
    text-align: justify;
    background-size: cover;
    background-position: center;
}

.icsm_colonne_milieu_texte {
    margin: 10px;
    width: 90%;
    font-weight: normal;
    line-height: 26px;
    text-align: justify;
	hyphens: auto;
}

.icsm_bouton {
    display: flex; /* Active Flexbox */
    flex-direction: column; /* Place les éléments en colonne */
    justify-content: center; /* Centre les boutons verticalement */
    align-items: center; /* Centre les boutons horizontalement */
    height: 100%; /* Remplit la hauteur de la div parent */
	margin-top: 10px;
}	

.icsm_btn_ovale_realisations {
    width: 40%;
    font-family: "Work Sans", sans-serif;
    font-size: 12px;
    line-height: 14.08px;
    text-decoration: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex; /* Changement ici pour utiliser flexbox */
    justify-content: center; /* Centre le texte horizontalement */
    align-items: center; /* Centre le texte verticalement */
    padding: 15px 30px;
	font-weight: 700;
	border: 1px solid #0077eb;
	background-color: #FFFFFF;
	color: #0077eb;
	margin-bottom: -15px; /* Espacement plus réduit en bas du bouton */
}

.icsm_colonne_gauche,
.icsm_colonne_droite {
    flex: 1; /* Les images partagent l'espace */
    max-width: 45%; /* Limite leur taille */
    height: 200px; /* Hauteur fixe */
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}

.icsm_colonne_gauche {
    width: 100%;
    background-image: url('../images/image-02-ok.jpg');
    background-size: cover;
    background-position: center;
    height: 100%;
	border: 2px solid #ccc;
	border-radius: 10px;
	margin: 0 auto 10px 10px;
}

.icsm_colonne_droite {
    width: 200px; /* Fixe la largeur à 200px */
    height: 400px; /* Fixe la hauteur à 200px */
    background-image: url('../images/image-03-ok.jpg');
    /*background-size: contain; */ /* L'image sera contenue entièrement dans la boîte */
    background-position: center; /* Centre l'image dans la boîte */
    background-repeat: no-repeat; /* Évite les répétitions de l'image */
    background-color: #f0f0f0; /* Couleur de fond (si l'image n'occupe pas tout l'espace) */
    border: 2px solid #ccc;
    border-radius: 10px;
    margin: 0 auto; /* Centre horizontalement l'élément */
}

/* Colonnes d'images */
.icsm_images {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacement entre les images */
    margin-top: 15px;
    width: 100%; /* Prend toute la largeur */
}
		
		/*-------------------------------**********------------*/
		/*RESPONSIVE DESIGN IMPRESSION 3D & CRÉATION SUR-MESURE*/
		/*--------------------------------**********-----------*/	
		/*Smartphones (environ 1024px et moins)*/
		@media screen and (max-width: 1024px) {
			.icsm_colonne_gauche,
			.icsm_colonne_milieu,
			.icsm_colonne_droite {
				width: 100%;
				height: auto;
				margin-bottom: 20px;
				display: block; /* Permet d'empiler les éléments sur mobile */
			}

			.icsm_titre {
				padding: 8px 0px;
			}

			.icsm_titre h2 {
				font-size: 0.8em;
			}

			.icsm_btn_ovale_realisations {
				width: 35%;
				padding: 12px 10px;
				margin-top: 10px;
				display: inline-flex; /* Flexbox pour centrer le texte */
				justify-content: center; /* Centrer horizontalement */
				align-items: center; /* Centrer verticalement */
				text-align: center; /* Assure que le texte est centré */
			}

			.icsm_images{
				margin-top: -10px;
			}

			.icsm_colonne_gauche {
				background-image: url('../images/image-02-ok.jpg');
				background-repeat: no-repeat;
				background-position: center;
				width: 80%; /* Réduction de la largeur */
				height: 300px; /* Ajuster selon l'effet souhaité */
			}

			.icsm_colonne_droite {
				background-image: url('../images/image-03-ok.jpg');
				background-repeat: no-repeat;
				background-position: center;
				width: 80%; /* Réduction de la largeur */
				height: 300px; /* Ajuster selon l'effet souhaité */
			}

			.icsm_colonne_milieu_texte {
				margin-left: 0;
				width: 100%;
				font-size: 13px;
				line-height: 25px;
			}
		}

		/*Smartphones (environ 768px et moins)*/		
		@media screen and (max-width: 768px) {
			.icsm_colonne_gauche,
			.icsm_colonne_milieu,
			.icsm_colonne_droite {
				width: 100%;
				height: auto;
				margin-bottom: 20px;
				display: block; /* Empile les colonnes */
			}

			.icsm_titre {
				padding: 8px 0px;
			}

			.icsm_titre h2 {
				font-size: 1.5em;
			}

			.icsm_titre h3 {
				font-size: 1em;
			}

			.icsm_btn_ovale_realisations {
				width: 35%;
				font-size: 10px;
				background-image: none; /* Supprime l'image de fond */
				padding: 10px 8px;
			}

			.icsm_images{
				margin-top: -10px;
			}

			.icsm_colonne_gauche {
				background-image: url('../images/image-02-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 200px; /* Ajuster selon l'effet souhaité */
			}

			.icsm_colonne_droite {
				background-image: url('../images/image-03-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 200px; /* Ajuster selon l'effet souhaité */
			}

			.icsm_colonne_milieu_texte {
				margin-left: 0;
				width: 100%;
				font-size: 12px;
				line-height: 19px;
			}	
		}

		/*Smartphones (environ 480px et moins)*/
		@media screen and (max-width: 480px) {
			.icsm_colonne_gauche,
			.icsm_colonne_milieu,
			.icsm_colonne_droite {
				width: 100%;
				height: auto;
				margin-bottom: 15px;
				display: block; /* Empile les colonnes */
			}

			.icsm_titre {
				padding: 8px 0px;
			}

			.icsm_titre h2 {
				font-size: 0.8em;
			}

			.icsm_btn_ovale_realisations {
				width: 45%;
				font-size: 8px;
				background-image: none; /* Supprime l'image de fond */
				padding: 10px 8px;
			}

			.icsm_images{
				margin-top: -10px;
			}

			.icsm_colonne_gauche {
				background-image: url('../images/image-02-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 150px; /* Ajuster selon l'effet souhaité */
			}

			.icsm_colonne_droite {
				background-image: url('../images/image-03-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 150px; /* Ajuster selon l'effet souhaité */
			}

			.icsm_colonne_milieu_texte {
				flex: 1; /* Occupe tout l'espace disponible entre les colonnes */
				text-align: justify; /* Justifie le texte */
				hyphens: auto;
				max-width: 100%; /* Limite la largeur à 55% */
				font-size: 11px;
				line-height: 13px;
				padding: 0px;
				align-items: center; /* Centre verticalement */
				justify-content: center; /* Centre horizontalement */
			}	
		}

		/*Smartphones (environ 320px et moins)*/
		@media screen and (max-width: 320px) {
			.icsm_colonne_gauche,
			.icsm_colonne_milieu,
			.icsm_colonne_droite {
				width: 100%;
				height: auto;
				margin-bottom: 20px;
				display: block; /* Empile les colonnes */
			}

			.icsm_titre {
				padding: 8px 0px;
			}

			.icsm_titre h2 {
				font-size: 1.5em;
			}
			
			.icsm_titre h3 {
				font-size: 1em;
			}

			.icsm_btn_ovale_realisations {
				width: 35%;
				font-size: 10px;
				background-image: none; /* Supprime l'image de fond */
				padding: 10px 8px;
			}

			.icsm_images{
				margin-top: -30px;
			}

			.icsm_colonne_gauche {
				background-image: url('../images/image-02-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 100px; /* Ajuster selon l'effet souhaité */
			}

			.icsm_colonne_droite {
				background-image: url('../images/image-03-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 100px; /* Ajuster selon l'effet souhaité */
			}

			.icsm_colonne_milieu_texte {
				flex: 1; /* Occupe tout l'espace disponible entre les colonnes */
				text-align: justify; /* Justifie le texte */
				max-width: 100%; /* Limite la largeur à 55% */
				font-size: 11px;
				line-height: 13px;
				padding: 10px;
				align-items: center; /* Centre verticalement */
				justify-content: center; /* Centre horizontalement */
			}	
		}
		/*-----------------------------------------------------*/
		/*RESPONSIVE DESIGN IMPRESSION 3D & CRÉATION SUR-MESURE*/
		/*-----------------------------------------------------*/	
		
		
		
/******************/
/*CHIFFRES ANNUELS*/
/******************/
.conteneur_chiffres_annuels {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
    /*display: flex;*/ /* Ajoute un contexte de flexbox pour centrer les enfants */
    justify-content: center; /* Centre les enfants horizontalement */
    align-items: center; /* Centre les enfants verticalement */
    gap: 20px; /* Espacement entre les blocs, réduit à 20px pour éviter le débordement */
    width: 100%; /* Permet de s'adapter au parent */
    max-width: 1200px; /* Limite la largeur maximale */
    margin: 30px auto 40px; /* Centrage horizontal */
    padding: 20px;
    background-image: url(../images/image-04-ok.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* L'image s'ajuste à la taille du conteneur sans déformation */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
}

.conteneur_chiffres_annuels > * {
    flex: 1 1 calc(33.33% - 20px); /* Ajuste la largeur des éléments pour éviter les débordements */
    max-width: calc(33.33% - 20px); /* Assure que chaque élément ne dépasse pas un tiers de la largeur totale */
    min-width: 280px; /* Largeur minimale pour éviter les éléments trop petits */
    box-sizing: border-box; /* Pour inclure le padding dans la largeur */
}

.conteneur_chiffres_annuels h2 {
    margin-top: 0px;
    font-size: 62px;
    line-height: 62px;
    color: #0077eb;
}

/*Titres avec icônes*/
.ca_titre_clients,
.ca_titre_domaine,
.ca_titre_annee {	
    display: inline-block;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    margin-bottom: 40px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px 30px;
    padding-left: 40px;
}

.ca_titre_clients {
    background-image: url(../images/miniatures/clients.png);
}

.ca_titre_domaine {
    background-image: url(../images/miniatures/domaine.png);
}

.ca_titre_annee {
    background-image: url(../images/miniatures/annee.png);
}

/*Résumé*/
.ca_resume {
    flex: 1 1 300px; /*Chaque bloc prend au moins 300px mais peut s'adapter*/
    max-width: 300px; /*Largeur maximale*/
    min-width: 280px; /*Largeur minimale*/
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1); /*Optionnel : fond léger*/
    border-radius: 10px; /*Coins arrondis pour un rendu moderne*/
    box-sizing: border-box;
	border-left: none;
}

.ca_resume:first-child {
    border-left: none;
}

.ca_resume h2 {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 10px;
}

.ca_resume h2 sup {
    font-size: 0.6em;
}

.ca_resume h5 {
    margin: 0;
    font-family: "Work Sans", sans-serif;
    font-size: 1rem;
    font-weight: bold;
    line-height: 14px;
    text-align: left;
    color: white;
    position: static; /* Valeur par défaut */
}

.ca_resume p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #d4d4d4;
    margin: 10px 0 0;
}

.conteneur_chiffres_annuels p {
    margin-top: 12px;
    margin-left: 15px;
    margin-right: 10px;
    margin-bottom: 0px;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    line-height: 20px;
    text-align: left;
    color: #d4d4d4;
}

		/*----------------------------------*/
		/*RESPONSIVE DESIGN CHIFFRES ANNUELS*/
		/*----------------------------------*/
		/*Smartphones (environ 1024px et moins)*/		
		@media screen and (max-width: 1024px) {
			.conteneur_chiffres_annuels {
				align-items: center; /*Centre chaque bloc*/
				gap: 20px; /*Espacement entre les blocs*/
				height: auto; /*Ajuste la hauteur automatiquement*/
				padding: 20px; /*Ajoute de l'espace autour*/
			}

			.ca_resume {
				flex: 1 1 45%; /*Prend 45% de l'espace disponible*/
				margin-top: 20px;
				max-width: 70%;
				height: auto;
				border-left: none;
				text-align: center;
				padding: 10px;
			}

			.conteneur_chiffres_annuels h2 {
				font-size: 48px;
				line-height: 48px;
			}

			.ca_resume h2 {
				font-size: 2.5rem; /*Adapte la taille des chiffres*/
				margin-bottom: 10px; /*Ajoute un espacement sous le chiffre*/
			}

			.ca_resume h5 {
				font-size: 1rem; /*Réduit légèrement les titres*/
				margin: 5px 0; /*Ajoute un peu d'espacement*/
			}

			.ca_resume p {
				font-size: 0.9rem; /*Texte descriptif plus petit*/
			}
		}

		/*Smartphones (environ 768px et moins)*/
		@media screen and (max-width: 768px) {
			.conteneur_chiffres_annuels {
				flex-direction: column; /*Empile les blocs verticalement*/
				align-items: center; /*Centre chaque bloc*/
				gap: 20px; /*Espacement entre les blocs*/
				height: auto; /*Ajuste la hauteur automatiquement*/
				padding: 20px; /*Ajoute de l'espace autour*/
			}

			.ca_resume {
				margin-top: -10px;
				flex: 1 1 100%; /*Permet aux blocs de s'adapter à la largeur disponible*/
				width: 100%; /*Les blocs prennent toute la largeur*/
				max-width: 90%; /*Ajoute une marge sur les côtés*/
				max-height: 150px;
				text-align: center; /*Texte centré pour un affichage propre*/
				padding: 10px; /*Réduit les marges internes*/
				position: relative; /*Définit un contexte pour les enfants en position absolue*/
				margin: 0; /* Remove extra margin */
			}

			.ca_resume h2 {
				font-size: 1.6rem; /*Adapte la taille des chiffres*/
				margin-top: 0; /*Supprime le margement par défaut*/
				position: absolute; /*Positionnement absolu*/
				top: 20%; /*Aligne verticalement au centre*/
				left: 8%; /*Positionne à gauche*/
				transform: translate(-50%, -50%); /*Centre parfaitement*/
				z-index: 1; /*Place au-dessus des autres éléments*/
				padding: 5px 10px; /*Optionnel : espace interne autour du texte*/
				border-radius: 5px; /*Optionnel : coins arrondis pour le texte*/
			}

			/*Le reste des styles*/
			.ca_titre_clients,
			.ca_titre_domaine,
			.ca_titre_annee {
				font-size: 9px; /*Réduit la taille des titres*/
				background-size: 20px 20px; /* Ajuste la taille des icônes */
				padding-left: 20px;
				background-image: none; /*Optionnel : supprime l'image*/				
			}

			.ca_resume h5 {
				position: relative; /* Positionnement relatif */
				font-size: 1rem; /*Réduit légèrement les titres*/
				margin: 5px 0; /*Ajoute un peu d'espacement*/
				left : 15%;
			}

			.ca_resume p {
				font-size: 0.9rem; /*Texte descriptif plus petit*/
				line-height: 1.5; /*Améliore la lisibilité*/
			}
		}
		
		/*Smartphones (environ 480px et moins)*/
		@media screen and (max-width: 480px) {
			.conteneur_chiffres_annuels {
				flex-direction: column; /*Empile les blocs verticalement*/
				align-items: center; /*Centre chaque bloc*/
				gap: 15px; /*Réduit légèrement l'espacement*/
				height: auto; /*Ajuste la hauteur automatiquement*/
				padding: 15px; /*Réduit les marges*/
			}

			.ca_resume {
				margin-top: 0;
				flex: 1 1 80%; /*Permet aux blocs de s'adapter à la largeur disponible*/
				width: 100%; /*Les blocs prennent toute la largeur*/
				max-width: 95%; /*Réduit les marges latérales*/
				max-height: none; /* Supprime la limite de hauteur */
				text-align: center; /*Texte centré pour un affichage propre*/
				padding: 8px; /*Réduit les marges internes*/
				position: relative; /*Pour superposition*/
			}

			.ca_resume h2 {
				font-size: 1.3rem; /*Réduit la taille des chiffres*/
				margin-top: 0;
				position: absolute; /*Positionnement absolu*/
				top: 20%; /*Ajuste l'alignement vertical*/
				left: 8%; /*Positionne à gauche*/	
				transform: translate(-50%, -50%);
				z-index: 1;
				padding: 5px; /*Espacement autour du texte*/
				border-radius: 5px; /*Coins arrondis*/
			}

			.ca_titre_clients,
			.ca_titre_domaine,
			.ca_titre_annee {
				font-size: 9px; /*Réduit la taille des titres*/
				background-size: 20px 20px; /* Ajuste la taille des icônes */
				padding-left: 20px;
				background-image: none; /*Optionnel : supprime l'image*/	
			}

			.ca_resume h5 {
				position: relative; /* Positionnement relatif */
				font-size: 1rem; /*Réduit légèrement les titres*/
				margin: 5px 0; /*Ajoute un peu d'espacement*/
				left : 15%;
			}

			.ca_resume p {
				font-size: 0.8rem; /*Texte descriptif plus petit*/
				line-height: 1.4;
			}
		}

		/*Smartphones (environ 320px et moins)*/
		@media screen and (max-width: 320px) {
			.conteneur_chiffres_annuels {
				flex-direction: column; /*Empile les blocs verticalement*/
				align-items: center; /*Centre chaque bloc*/
				gap: 10px; /*Réduit encore l'espacement*/
				height: auto; /*Ajuste la hauteur automatiquement*/
				padding: 10px; /*Réduit les marges*/
			}

			.ca_resume {
				margin-top: 0;
				flex: 1 1 80%; /*Permet aux blocs de s'adapter à la largeur disponible*/
				width: 100%; /*Les blocs prennent toute la largeur*/
				max-width: 100%; /*Utilise toute la largeur disponible*/
				max-height: none; /* Supprime la limite de hauteur */
				text-align: center; /*Texte centré pour un affichage propre*/
				padding: 5px; /*Réduit les marges internes*/
				position: relative; /*Pour superposition*/
			}

			.ca_resume h2 {
				font-size: 1rem; /*Réduit encore la taille des chiffres*/
				margin-top: 0;
				position: absolute; /*Positionnement absolu*/
				top: 25%; /*Ajuste l'alignement vertical*/
				left: 5%; /*Positionne à gauche*/
				transform: translate(-50%, -50%);
				z-index: 1;
				padding: 5px; /*Espacement autour du texte*/
				border-radius: 5px; /*Coins arrondis*/
			}

			.ca_titre_clients,
			.ca_titre_domaine,
			.ca_titre_annee {
				font-size: 8px; /*Réduit encore la taille des titres*/
				background-size: 20px 20px; /* Ajuste la taille des icônes */
				padding-left: 15px;
				background-image: none; /*Optionnel : supprime l'image*/
			}

			.ca_resume h5 {
				font-size: 0.8rem; /*Réduit encore les titres*/
				margin: 3px 0;
			}

			.ca_resume p {
				font-size: 0.7rem; /*Texte descriptif encore plus petit*/
				line-height: 1.3;
			}

		}
		/*----------------------------------*/
		/*RESPONSIVE DESIGN CHIFFRES ANNUELS*/
		/*----------------------------------*/	




/**********************************************/
/*SECTION CRÉATIONS UNIQUES, DESIGN SUR-MESURE*/
/**********************************************/
/*Conteneur des colonnes*/
.conteneur_cudsm {
    display: flex; /* Active le mode flexbox */
    justify-content: space-between; /* Espacement entre les colonnes */
    align-items: stretch; /* Étire les colonnes verticalement */
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne si nécessaire */
    padding: 1rem; /* Ajoute de l’espace autour du contenu */
    background-color: #f4f4f4; /* Couleur de fond */
    position: relative; /* Positionne le conteneur pour d'éventuels enfants absolus */
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 1200px; /* Limite la largeur maximale à 1200px */
    margin: 2rem auto; /* Centre la div horizontalement */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    gap: 20px; /* Ajoute un espacement entre les colonnes */
}

/*Conteneur général de la section*/
.conteneur_cudsm_container {
    display: flex;
    flex-direction: column; /* Empile les éléments */
    align-items: center;
    gap: 20px; /* Espacement entre les éléments */
}

.cudsm_titre {
	padding: 8px 20px;
    text-align: left;
    margin: 0 0 -10px 0;
}

.cudsm_titre h3 {
	font-family: "Work Sans", sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #0077eb;
}

.cudsm_titre h2 {
	font-family: Poppins, sans-serif;
	font-size: 38px;
	font-weight: normal;
	color: #191819;
	opacity: 0.8;
}

/* Colonne centrale */
.cudsm_colonne_milieu {
    flex: 1; /* Prend tout l'espace disponible */
    width: 95%; /* Ajuste la largeur */
    text-align: justify;
    background-size: cover;
    background-position: center;
}

/* Conteneur des images */
.cudsm_images {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacement entre les images */
    margin-top: -5px;
    width: 100%; /* Prend toute la largeur */
}

/* Colonne gauche et droite */
.cudsm_colonne_gauche,
.cudsm_colonne_droite {
    flex: 1; /* Les images partagent l'espace */
    max-width: 45%; /* Limite leur taille */
    height: 200px; /* Hauteur fixe */
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}

/*Colonne de gauche avec image de fond*/
.cudsm_colonne_gauche {
    width: 100%;
    background-image: url('../images/image-05-ok.jpg');
    background-size: cover;
    background-position: center;
    height: 100%;
	border: 2px solid #ccc;
	border-radius: 10px;
	margin: 0 auto 10px 10px;
}


/*Colonne de droite avec image de fond*/
.cudsm_colonne_droite {
    width: 200px; /* Fixe la largeur à 200px */
    height: 400px; /* Fixe la hauteur à 200px */
    background-image: url('../images/image-06-ok.jpg');
    /*background-size: contain; */ /* L'image sera contenue entièrement dans la boîte */
    background-position: center; /* Centre l'image dans la boîte */
    background-repeat: no-repeat; /* Évite les répétitions de l'image */
    background-color: #f0f0f0; /* Couleur de fond (si l'image n'occupe pas tout l'espace) */
    border: 2px solid #ccc;
    border-radius: 10px;
    margin: 0 auto; /* Centre horizontalement l'élément */
}

/*Texte dans la colonne centrale*/
.cudsm_colonne_milieu_texte {
    margin: 10px;
    width: 90%;
    font-weight: normal;
    line-height: 26px;
    text-align: justify;
	hyphens: auto;
}

/*Texte noir dans la colonne centrale*/
.texte_noir {
    color: #000;
}

/*Texte gris dans la colonne centrale*/
.texte_gris {
    color: #808080;
    margin-top: 5px;
    margin-bottom: 5px;
}

/*Lettrine dans la colonne centrale*/
.cudsm_lettrine {
    font-family: Poppins, sans-serif;
    font-size: 62px;
    font-weight: 600;
    color: #0077eb;
}

.cudsm_boutons {
    display: flex; /* Active Flexbox */
    flex-direction: column; /* Place les éléments en colonne */
    justify-content: center; /* Centre les boutons verticalement */
    align-items: center; /* Centre les boutons horizontalement */
    height: 100%; /* Remplit la hauteur de la div parent */
}	

.cudsm_bouton_ovale_liste_prestations,
.cudsm_bouton_ovale_contact {
    width: 40%;
    font-family: "Work Sans", sans-serif;
    font-size: 12px;
    line-height: 14.08px;
    text-decoration: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex; /* Changement ici pour utiliser flexbox */
    justify-content: center; /* Centre le texte horizontalement */
    align-items: center; /* Centre le texte verticalement */
    padding: 15px 30px;
}

/* Bouton ovale pour la liste des prestations */
.cudsm_bouton_ovale_liste_prestations {
    font-weight: 700;
    border: 1px solid #0077eb;
    background-color: #FFFFFF;
    color: #0077eb;
	margin-bottom: -15px; /* Espacement plus réduit en bas du bouton */
}

/* Bouton de contact avec image de fond */
.cudsm_bouton_ovale_contact {
    font-weight: 600;
    border: none;
    /*padding-left: 60px;*/
    color: white;
    background-color: #0077eb;
    background-repeat: no-repeat;
    background-position: 3px center;
}

		/*------------------------------------------------------*/
		/*RESPONSIVE DESIGN CRÉATIONS UNIQUES, DESIGN SUR-MESURE*/
		/*------------------------------------------------------*/
		/*Smartphones (environ 1024px et moins)*/
		@media screen and (max-width: 1024px) {
			.cudsm_colonne_gauche,
			.cudsm_colonne_milieu,
			.cudsm_colonne_droite {
				width: 100%;
				height: auto;
				margin-bottom: 20px;
				display: block; /* Permet d'empiler les éléments sur mobile */
			}

			.cudsm_colonne_gauche {
				background-image: url('../images/image-05-ok.jpg');
				background-repeat: no-repeat;
				background-position: center;
				width: 80%; /* Réduction de la largeur */
				height: 300px; /* Ajuster selon l'effet souhaité */
			}

			.cudsm_colonne_droite {
				background-image: url('../images/image-06-ok.jpg');
				background-repeat: no-repeat;
				background-position: center;
				width: 80%; /* Réduction de la largeur */
				height: 300px; /* Ajuster selon l'effet souhaité */
			}

			.cudsm_titre {
				padding: 8px 0px;
			}

			.cudsm_bouton_ovale_liste_prestations,
			.cudsm_bouton_ovale_contact {
				width: 35%;
				padding: 12px 10px;
				margin-top: 10px;
				display: inline-flex; /* Flexbox pour centrer le texte */
				justify-content: center; /* Centrer horizontalement */
				align-items: center; /* Centrer verticalement */
				text-align: center; /* Assure que le texte est centré */
			}

			.cudsm_images{
				margin-top: -20px;
			}

			.cudsm_lettrine {
				font-size: 50px;
			}

			.cudsm_colonne_milieu_texte {
				margin-left: 0;
				width: 100%;
				font-size: 13px;
				line-height: 25px;
			}
		}

		/*Smartphones (environ 768px et moins)*/
		@media screen and (max-width: 768px) {
			.cudsm_colonne_gauche,
			.cudsm_colonne_milieu,
			.cudsm_colonne_droite {
				width: 100%;
				height: auto;
				margin-bottom: 20px;
				display: block; /* Empile les colonnes */
			}

			.cudsm_colonne_gauche {
				background-image: url('../images/image-05-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 200px; /* Ajuster selon l'effet souhaité */
			}

			.cudsm_colonne_droite {
				background-image: url('../images/image-06-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 200px; /* Ajuster selon l'effet souhaité */
			}

			.cudsm_titre {
				padding: 8px 0px;
			}

			.cudsm_titre h2 {
				font-size: 1.5em;
			}

			.cudsm_titre h3 {
				font-size: 1em;
			}

			.cudsm_bouton_ovale_liste_prestations,
			.cudsm_bouton_ovale_contact {
				width: 35%;
				font-size: 10px;
				background-image: none; /* Supprime l'image de fond */
				padding: 10px 8px;
			}

			.cudsm_images{
				margin-top: -30px;
			}

			.cudsm_lettrine {
				font-size: 45px;
			}

			.cudsm_colonne_milieu_texte {
				margin-left: 0;
				width: 100%;
				font-size: 12px;
				line-height: 19px;
			}
		}

		/*Smartphones (environ 480px et moins)*/
		@media screen and (max-width: 480px) {
			.cudsm_colonne_gauche,
			.cudsm_colonne_milieu,
			.cudsm_colonne_droite {
				width: 100%;
				height: auto;
				margin-bottom: 15px;
				display: block; /* Empile les colonnes */
			}

			.cudsm_colonne_gauche {
				background-image: url('../images/image-05-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 150px; /* Ajuster selon l'effet souhaité */
			}

			.cudsm_colonne_droite {
				background-image: url('../images/image-06-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 150px; /* Ajuster selon l'effet souhaité */
			}

			.cudsm_titre {
				padding: 8px 0px;
			}

			.cudsm_titre h2 {
				font-size: 0.8em;
			}

			.cudsm_bouton_ovale_liste_prestations,
			.cudsm_bouton_ovale_contact {
				width: 45%;
				font-size: 8px;
				background-image: none; /* Supprime l'image de fond */
				padding: 10px 8px;
			}

			.cudsm_images{
				margin-top: -30px;
			}

			.cudsm_lettrine {
				font-size: 35px;
			}

			.cudsm_colonne_milieu_texte {
				flex: 1; /* Occupe tout l'espace disponible entre les colonnes */
				text-align: justify; /* Justifie le texte */
				hyphens: auto;
				max-width: 100%; /* Limite la largeur à 55% */
				font-size: 11px;
				line-height: 13px;
				padding: 0px;
				align-items: center; /* Centre verticalement */
				justify-content: center; /* Centre horizontalement */
			}		
		}

		/*Smartphones (environ 320px et moins)*/
		@media screen and (max-width: 320px) {
			.cudsm_colonne_gauche,
			.cudsm_colonne_milieu,
			.cudsm_colonne_droite {
				width: 100%;
				height: auto;
				margin-bottom: 10px;
				display: block; /* Empile les colonnes */
			}

			.cudsm_colonne_gauche {
				background-image: url('../images/image-05-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 100px; /* Ajuster selon l'effet souhaité */
			}

			.cudsm_colonne_droite {
				background-image: url('../images/image-06-ok.jpg');
				background-size: cover;
				background-position: center;
				height: 100px; /* Ajuster selon l'effet souhaité */
			}

			.cudsm_titre {
				padding: 8px 15px;
			}

			.cudsm_titre h2 {
				font-size: 0.8em;
			}

			.cudsm_bouton_ovale_liste_prestations,
			.cudsm_bouton_ovale_contact {
				width: 60%;
				font-size: 8px;
				background-image: none; /* Supprime l'image de fond */
				padding: 10px 8px;
			}

			.cudsm_lettrine {
				font-size: 30px;
			}

			.cudsm_colonne_milieu_texte {
				flex: 1; /* Occupe tout l'espace disponible entre les colonnes */
				text-align: justify; /* Justifie le texte */
				max-width: 100%; /* Limite la largeur à 55% */
				font-size: 11px;
				line-height: 13px;
				padding: 10px;
				align-items: center; /* Centre verticalement */
				justify-content: center; /* Centre horizontalement */
			}
		}
		/*------------------------------------------------------*/
		/*RESPONSIVE DESIGN CRÉATIONS UNIQUES, DESIGN SUR-MESURE*/
		/*------------------------------------------------------*/




/****************/
/*GALERIE PHOTOS*/
/****************/
.conteneur_galerie_photos {
    position: relative;
    height: auto;
    margin: 30px auto 40px; /* Centrage horizontal */
    width: 100%; /* Permet de s'adapter au parent */
    max-width: 1200px; /* Limite la largeur maximale */
    /*display: flex;*/ /* Ajoute un contexte de flexbox pour centrer les enfants */
    justify-content: center; /* Centre les enfants horizontalement */
    align-items: center; /* Centre les enfants verticalement */
    background-color: #f4f4f4; /* Couleur de fond */
}

.galerie_photos {
    padding: 0 15px;
    margin-right: auto;
    margin-left: auto;
}

.galerie_photos_titre {
	padding: 8px 20px;
    text-align: left;
    margin: 10px 0;
}

.galerie_photos_titre h3 {
	font-family: "Work Sans", sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #0077eb;
}

.galerie_photos_titre h2 {
	font-family: Poppins, sans-serif;
	font-size: 38px;
	font-weight: normal;
	color: #191819;
	opacity: 0.8;
}

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

.row {
    display: flex;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.photo-container {
    width: calc(25% - 30px); /*4 images par ligne*/
    box-sizing: border-box;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo_400x400,
.photo_200x200 {
    position: relative;
    overflow: hidden;
    border: 2px solid #ccc;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    text-align: center;
}

.photo_400x400 {
    width: 400px;
    height: 400px;
}

.photo_200x200 {
    width: 200px;
    height: 200px;
    flex: 1 1 calc(25% - 30px);
    max-width: calc(25% - 30px);
    margin: 10px;
}

.photo_400x400 img,
.photo_200x200 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.photo_400x400:hover img,
.photo_200x200:hover img {
    transform: scale(1.2);
}

.photo_400x400 a,
.photo_200x200 a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.photo_400x400_commentaire {
    padding: 10px;
    background-color: #f9f9f9;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    margin-top: 10px;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
    z-index: 1001;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#prev-btn {
    left: 20px;
}

#next-btn {
    right: 20px;
}

.nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#lightbox img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.row:before,
.row:after {
    display: table;
    content: " ";
}

.row:after {
    clear: both;
}

.price-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
}

.descriptif {
	  position: absolute;
	  bottom: 10px;
	  left: 50%;
	  transform: translateX(-50%);
	  background: rgba(0, 0, 0, 0.6);
	  color: #fff;
	  padding: 6px 6px;
	  border-radius: 8px;
	  font-size: 10px;
	  font-family: sans-serif;
	  width: 90%;
}

		/*--------------------------------*/
		/*RESPONSIVE DESIGN GALERIE PHOTOS*/
		/*--------------------------------*/
		/*Smartphones (environ 1024px et moins)*/
		@media screen and (max-width: 1024px) {
			.photo-container {
				width: calc(33.33% - 30px); /* 3 images par ligne */
			}

			.photo_400x400 {
				width: 300px;
				height: 300px;
			}

			.galerie_photos_titre {
				padding: 8px 20px;
			}		
		}

		/*Smartphones (environ 768px et moins)*/
		@media screen and (max-width: 768px) {
			.photo-container {
				width: calc(50% - 30px); /* 2 images par ligne */
			}

			.photo_400x400 {
				width: 180px;
				height: 180px;
			}

			.photo_400x400_commentaire {
				padding: 10px;
				margin-top: 10px;
				font-size: 0.8em;
			}

			.photo_200x200 {
				max-width: 100%;
				height: 130px;
			}

			.galerie_photos_titre {
				padding: 8px 20px;
			}

			.galerie_photos_titre h2 {
				font-size: 1.5em;
			}

			.galerie_photos_titre h3 {
				font-size: 1em;
			}
		}

		/*Smartphones (environ 480px et moins)*/
		@media screen and (max-width: 480px) {
			.photo-container {
				width: calc(50% - 30px); /* 2 images par ligne */
			}

			.photo_400x400 {
				width: 120px;
				height: 120px;
			}

			.photo_400x400_commentaire {
				padding: 10px;
				margin-top: 10px;
				font-size: 0.8em;
				line-height: 1.2;
			}

			.photo_200x200 {
				max-width: 100%;
				height: 80px;
			}

			.galerie_photos_titre {
				padding: 8px 15px;
			}

			.galerie_photos_titre h2 {
				font-size: 0.8em;
			}

			.galerie_photos_titre h3 {
				font-size: 1em;
			}
			
			.photo_400x400_commentaire {
				font-size: 0.6em;
			}
			
			.col-lg-12 h2 {
				font-size: 1em;
			}
			
			.col-lg-12 p {
				font-size: 0.6em;
			}
		}

		/*Smartphones (environ 320px et moins)*/
		@media screen and (max-width: 320px) {
			.photo-container {
				width: 100%; /* 1 image par ligne */
			}

			.photo_400x400 {
				width: 100px;
				height: 100px;
			}

			.photo_400x400_commentaire {
				padding: 5px;
				margin-top: 5px;
				font-size: 0.5em;
				line-height: 1;
			}

			.photo_200x200 {
				max-width: 100%;
				height: 50px;
			}

			.galerie_photos_titre {
				padding: 8px 15px;
			}

			.galerie_photos_titre h2 {
				font-size: 0.8em;
			}

			.galerie_photos_titre h3 {
				font-size: 1em;
			}
		}
		/*--------------------------------*/
		/*RESPONSIVE DESIGN GALERIE PHOTOS*/
		/*--------------------------------*/




/************************/
/*TOUTES LES PRESTATIONS*/
/************************/
.conteneur_prestations {
    margin: 30px auto 40px; /* Centrage horizontal */
    width: 100%;
    padding: 8px 15px; /*Ajout pour un meilleur rendu sur petits écrans*/
    width: 100%; /* Permet de s'adapter au parent */
    max-width: 1200px; /* Limite la largeur maximale */
    /*display: flex;*/ /* Ajoute un contexte de flexbox pour centrer les enfants */
    justify-content: center; /* Centre les enfants horizontalement */
    align-items: center; /* Centre les enfants verticalement */
    background-color: #f4f4f4; /* Couleur de fond */
}

.prestations_titre {
	padding: 8px 20px;
    text-align: left;
    margin: 10px 0;
}

.prestations_titre h3 {
	font-family: "Work Sans", sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #0077eb;
}

.prestations_titre h2 {
	font-family: Poppins, sans-serif;
	font-size: 38px;
	font-weight: normal;
	color: #191819;
	opacity: 0.8;
}

/*Conteneur avec style visuel*/
.table-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.table-container h2 {
    font-size: 1.3em;
    margin-bottom: 20px;
    color: #333;
}

/*Table des services*/
.services-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    text-align: left;
}

.services-table thead {
    background-color: #0077eb;
    color: #ffffff;
}

.services-table th,
.services-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #dddddd;
    font-size: 14px;
}

.services-table th {
    font-size: 16px;
    font-weight: bold;
}

.services-table td {
    font-size: 14px;
    color: #555555;
}

.services-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.services-table tr:hover {
    background-color: #f1f1f1;
    transition: background-color 0.3s ease;
}

		/*----------------------------------------*/
		/*RESPONSIVE DESIGN TOUTES LES PRESTATIONS*/
		/*----------------------------------------*/
		/*Smartphones (environ 1024px et moins)*/
		@media screen and (max-width: 1024px) {
			.table-container {
				padding: 15px;
				max-width: 900px;
			}

			.prestations_titre h2 {
				font-size: 24px;
			}

			.prestations_titre h3 {
				font-size: 20px;
			}

			.services-table th,
			.services-table td {
				padding: 12px;
				font-size: 14px;
			}
		}

		/*Smartphones (environ 768px et moins)*/
		@media screen and (max-width: 768px) {
			.table-container {
				max-width: 600px;
				padding: 10px;
			}

			.prestations_titre {
				padding: 8px 20px;
			}

			.prestations_titre h2 {
				font-size: 1.5em;
			}

			.prestations_titre h3 {
				font-size: 1em;
			}

			.services-table th,
			.services-table td {
				font-size: 12px;
				padding: 10px;
			}
		}

		/*Smartphones (environ 480px et moins)*/
		@media screen and (max-width: 480px) {
			.conteneur_prestations {
				padding: 10px;
			}

			.prestations_titre {
				padding: 8px 15px;
			}

			.prestations_titre h2 {
				font-size: 0.8em;
			}

			.prestations_titre h3 {
				font-size: 1em;
			}

			.table-container {
				max-width: 100%;
				padding: 10px;
				box-shadow: none; /* Suppression de l'ombre pour plus de simplicité sur mobile */
			}

			.services-table {
				font-size: 12px;
			}

			.services-table th,
			.services-table td {
				padding: 8px;
			}
		}

		/*Smartphones (environ 320px et moins)*/
		@media screen and (max-width: 320px) {
			.conteneur_prestations {
				padding: 5px;
			}

			.prestations_titre {
				padding: 8px 15px;
			}

			.prestations_titre h2 {
				font-size: 0.8em;
			}

			.prestations_titre h3 {
				font-size: 1em;
			}

			.table-container {
				max-width: 80%;
				padding: 5px;
				box-shadow: none; /* Suppression de l'ombre pour plus de simplicité */
			}

			.services-table {
				font-size: 10px; /* Réduction de la taille du texte pour les très petits écrans */
			}

			.services-table th,
			.services-table td {
				padding: 6px; /* Moins de padding pour s'adapter à la petite taille de l'écran */
			}
		}
		/*----------------------------------------*/
		/*RESPONSIVE DESIGN TOUTES LES PRESTATIONS*/
		/*----------------------------------------*/




/***********************/
/*FORMULAIRE DE CONTACT*/
/***********************/
.conteneur_me_contacter {
    margin: 30px auto 40px; /* Centrage horizontal */
	width: 100%;
    max-width: 1200px; /* Limite la largeur maximale */
    /*display: flex;*/ /* Ajoute un contexte de flexbox pour centrer les enfants */
    justify-content: center; /* Centre les enfants horizontalement */
    align-items: center; /* Centre les enfants verticalement */
    margin-bottom: 40px;
    padding: 20px;
    background-color: #f9f9f9;
    border-top: 2px solid #ddd;
}

.contact_titre {
    /*padding: 8px 20px;*/
    text-align: left;
    margin: 10px 0;
}

.contact_titre h3 {
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #0077eb;
}

.contact_titre h2 {
    font-family: Poppins, sans-serif;
    font-size: 2.4rem;  /* Utilisation de 'rem' pour plus de flexibilité */
    font-weight: normal;
    color: #191819;
    opacity: 0.8;
}

/*Conteneur principal du formulaire*/
.form_contact {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0px;
    box-sizing: border-box;
}

/*Style du formulaire*/
.contact-form {
    margin: 20px;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
}

.contact-form h2 {
    margin-bottom: 20px;
    color: #333;
    text-align: center;
    font-size: 2rem;  /* Adaptation de la taille du titre pour plus de flexibilité */
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 1rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-group textarea {
    resize: none;
    height: 120px;
}

.form-group button {
    background: #0077eb;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s ease;
}

.form-group button:hover {
    background: #6cbef2;
}

		/*---------------------------------------*/
		/*RESPONSIVE DESIGN FORMULAIRE DE CONTACT*/
		/*---------------------------------------*/
		/*Smartphones (environ 1024px et moins)*/
		@media screen and (max-width: 1024px) {
			.contact-form {
				padding: 25px;
				max-width: 500px;
			}
			.contact-form h2 {
				font-size: 1.5rem;
			}
			.form-group input,
			.form-group textarea {
				font-size: 1rem;
			}
			.form-group button {
				font-size: 1rem;
				padding: 10px 15px;
			}
		}
		
		/*Smartphones (environ 768px et moins)*/
		@media screen and (max-width: 768px) {
			.contact-form {
				padding: 20px;
				border-radius: 15px;
			}
		}

		/*Smartphones (environ 480px et moins)*/
		@media screen and (max-width: 480px) {
			.contact-form {
				padding: 15px;
				border-radius: 10px;
			}
			.form-group input,
			.form-group textarea {
				font-size: 0.9rem;
			}
			.form-group button {
				font-size: 0.9rem;
				padding: 8px 10px;
			}
			
			.contact_titre h3 {
				font-size: 1em;
			}
			
			.contact_titre h2 {
				font-size: 0.8em;
			}
		}

		/*Smartphones (environ 320px et moins)*/
		@media screen and (max-width: 320px) {
			.contact-form {
				padding: 10px;
				border-radius: 8px;
			}
			.form-group input,
			.form-group textarea {
				font-size: 0.8rem;
			}
			.form-group button {
				font-size: 0.8rem;
				padding: 6px 8px;
			}
		}
		/*---------------------------------------*/
		/*RESPONSIVE DESIGN FORMULAIRE DE CONTACT*/
		/*---------------------------------------*/




/*****************/
/*OÙ NOUS TROUVER*/
/*****************/
.conteneur_infos_pratiques_comment_venir {
    position: relative;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    max-width: 1200px;
    min-height: 475px;
    font-family: Poppins, sans-serif;
    /*background: url(../images/image-14-maps_3dluv.jpg);*/
    background-size: cover;
    padding: 20px;
    box-sizing: border-box;
    overflow: visible;
}

/*Content Container - Placer au-dessus de la div principale*/
.ipcv_cadre_incruste_maps { 
    position: absolute;
    top: 35px;
    right: 20px;
    width: calc(100% - 40px);
    max-width: 450px;
    background-color: rgba(0, 0, 0, 1);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    z-index: 2;
    height: auto;
}

.ipcv_maps h3 {
    margin-top: 10px;
    font-size: 14px;
    color: #b2b3b3;
}

.ipcv_maps h2 {
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 15px;
}

.ipcv_comment_venir address {
    font-size: 18px;
    color: #ffffff;
    line-height: 20px;
}

.ipcv_maps {
    width: 100%;
    height: auto;
    background-image: url(../images/miniatures/vague.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 10px;
}

.ipcv_comment_venir {
    margin-top: 32px;
    font-size: 18px;
    line-height: 20px;
    text-align: left;
    color: #ffffff;
}

.ipcv_horaires {
    margin-top: 13px;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    opacity: 0.8;
}

.ipcv_horaires p {
    font-size: 14px;
    color: #ffffff;
    opacity: 0.8;
}

.ipcv_texte_l1,
.ipcv_texte_l2 {
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin-bottom: 15px;
}

.ipcv_texte_l1 {
    background-image: url(../images/miniatures/localisation.png);
    background-repeat: no-repeat;
    background-position: left top;
}

.ipcv_texte_l2 {
    background-image: url(../images/miniatures/telephone.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.ipcv_horaires_texte_gras {
    font-weight: 600;
}

.ipcv_btn_ovale_contact {
    display: inline-block;
    position: absolute; /*Positionnement absolu pour le placer par rapport à la div parente*/
    bottom: 10px; /*Décalage par rapport au bas de la div*/
    left: 50%; /*Centrage horizontal*/
    /*transform: translateX(-50%); /*Ajustement pour centrer parfaitement*/
    padding: 10px 30px;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    background-color: #0077eb;
    transition: background-color 0.3s ease;
    z-index: 10; /*S'assure que le bouton est visible*/
    text-align: center; /*Alignement du texte au centre*/
}

.ipcv_btn_ovale_contact:hover {
    background-color: #6cbef2; /*Couleur plus claire au survol*/
}

.ipcv_bouton_contact a {
    text-decoration: none;
    color: inherit;
}

		/*---------------------------------*/
		/*RESPONSIVE DESIGN OÙ NOUS TROUVER*/
		/*---------------------------------*/
		/*Smartphones (environ 1024px et moins)*/
		@media screen and (max-width: 1024px) {
			.conteneur_infos_pratiques_comment_venir {
				padding: 20px;
				background-position: 80% center; /* 80% horizontal, 50% vertical */
			}

			.ipcv_cadre_incruste_maps {
				max-width: 400px;
				padding: 10px;
				margin: 0 auto;
				right: 20px;
			}

			.ipcv_maps h2 {
				font-size: 30px;
				line-height: 38px;
			}

			.ipcv_maps h3 {
				font-size: 13px;
			}

			.ipcv_comment_venir {
				font-size: 16px;
			}

			.ipcv_horaires {
				font-size: 13px;
			}

			.ipcv_btn_ovale_contact {
				padding: 8px 25px;
				font-size: 12px;
			}
		}
		
		/*Smartphones (environ 768px et moins)*/
		@media screen and (max-width: 768px) {
			.conteneur_infos_pratiques_comment_venir {
				padding: 20px 10px;
				background-position: 35% center; /* 90% horizontal, 30% vertical */
			}

			.ipcv_cadre_incruste_maps {
				/*position: relative;*/
				width: calc(100% - 40px);
				max-width: 350px;
				right: 20px;
			}

			.ipcv_maps h2 {
				font-size: 28px;
				line-height: 36px;
			}

			.ipcv_maps h3 {
				font-size: 12px;
			}

			.ipcv_comment_venir {
				font-size: 16px;
			}

			.ipcv_horaires {
				font-size: 13px;
			}

			.ipcv_btn_ovale_contact {
				padding: 8px 20px; /*Réduction du padding pour éviter les débordements*/
				font-size: 12px; /*Réduction de la taille du texte*/
			}
		}

		/*Smartphones (environ 480px et moins)*/
		@media screen and (max-width: 480px) {
			.conteneur_infos_pratiques_comment_venir {
				padding: 20px 10px;
				background-position: 16% center; /* 90% horizontal, 30% vertical */
			}
			
			.ipcv_cadre_incruste_maps {
				width: calc(100% - 40px);
				max-width: 350px;
				margin-left: 40px;
			}
						
			.ipcv_maps h2 {
				font-size: 24px;
				line-height: 32px;
			}

			.ipcv_maps h3 {
				font-size: 10px;
			}

			.ipcv_comment_venir {
				font-size: 14px;
			}

			.ipcv_btn_ovale_contact {
				font-size: 10px;
				padding: 6px 15px;
			}
		}
		
		/*Smartphones (environ 320px et moins)*/
		@media screen and (max-width: 320px) {
			/*Adjustments for the smallest screens*/
			.ipcv_maps h2 {
				font-size: 15px;
				line-height: 30px;
			}

			.ipcv_maps h3 {
				font-size: 8px;
			}

			.ipcv_comment_venir {
				font-size: 12px;
			}

			.ipcv_btn_ovale_contact {
				font-size: 9px;
				padding: 5px 10px;
			}
		}
		/*---------------------------------*/
		/*RESPONSIVE DESIGN OÙ NOUS TROUVER*/
		/*---------------------------------*/




/**********/
/* FOOTER */
/**********/
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

/* Conteneur principal du footer */
.conteneur_footer {
    margin: auto;
    max-width: 1200px; /* Limite la largeur maximale */
    width: 100%; /* Prend toute la largeur disponible */
    height: auto;
    background-color: #0077eb;
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
    padding: 10px 20px;
}

/* Style du footer */
footer nav ul {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    padding: 0;
    margin: 0;
    list-style-type: none;
    max-width: 1200px; /* Limite la largeur du contenu du footer */
}

footer nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 0.7rem; /* Taille du texte avec rem pour être plus réactif */
}

.conteneur_footer a {
    margin: 0 0.5vw; /* Utilisation de pourcentage pour l'espacement */
    text-decoration: none;
    color: #f9f9f9;
    font-size: 0.7rem; /* Taille du texte avec rem pour être plus réactif */
}

.conteneur_footer a:hover {
    color: #B8B2B2;
}

/* Flexbox pour les éléments de .footer_menu_gauche_gras */
.footer_menu_gauche_gras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Ajustement des liens dans .footer_menu_gauche_gras */
.footer_menu_gauche_gras li {
    margin-right: 8px;
}

/* Popups */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-content {
    max-height: 80%;
    overflow-y: auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 80%;
    max-width: 800px;
    position: relative;
}

.popup-content h2 {
    margin-top: 0;
    color: #0077eb;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #0077eb;
}

/* Popups spécifiques */
#legal-popup,
#privacy-popup,
#cookies-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 800;
}

/* Contenu de la popup */
#legal-popup .popup-content,
#privacy-popup .popup-content,
#cookies-popup .popup-content {
    max-height: 80%; /* Limite la hauteur à 80% de la hauteur de la fenêtre */
    overflow-y: auto; /* Ajoute l'ascenseur vertical */
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 80%; /* Ajuste la largeur si nécessaire */
}

.close-privacy-btn,
.close-cookies-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #0056b3;
}

.popup-content h3 {
    margin-top: 0;
    color: #0056b3;
}

		/*--------------------------*/
		/* RESPONSIVE DESIGN FOOTER */
		/*--------------------------*/
		/* Smartphones (environ 1024px et moins) */
		@media screen and (max-width: 1024px) {
			.conteneur_footer {
				flex-direction: column;
				height: auto;
				padding: 10px;
			}

			footer nav ul {
				gap: 8px;
			}

			footer nav ul li {
				font-size: 0.5em;
			}
			
			footer nav ul li a {
				font-size: 0.9rem;
			}

			.conteneur_footer a {
				margin: 5px 0; /* Réduit l'espacement entre les liens verticaux */
			}
		}

		/* Smartphones (environ 768px et moins) */
		@media screen and (max-width: 768px) {
			.conteneur_footer {
				height: auto;
				padding: 0px;
			}

			.footer_menu_gauche {
				font-size: 0.7em;
			}

			.footer_menu_gauche_gras li {
				position : relative;
				margin-right: 0px;
				margin-bottom: -10px; /* Réduit la marge entre les éléments */
				padding: 0; /* Enlève les espacements internes des éléments de la liste */
				bottom: 10px;
			}

			footer nav ul {
				flex-direction: column;
				margin-top: 10px;
			}

			footer nav ul li {
				font-size: 0.5em;
				display: block; /* S'assure que chaque élément de la liste prend toute la largeur */
			}

			footer nav ul li a {
				font-size: 0.8rem;  /* Réduit la taille des liens du menu */
			}

			.conteneur_footer a {
				display: block; /* Les liens deviennent des blocs pour mieux contrôler l'espacement */
				margin: 0px 0; /* Réduit l'espacement entre les liens verticaux */
				padding: 0; /* Enlève toute marge interne */
			}
		}

		/* Smartphones (environ 480px et moins) */
		@media screen and (max-width: 480px) {
			.conteneur_footer {
				height: auto;
				padding: 0px;
			}

			.footer_menu_gauche {
				font-size: 0.7em;
			}

			.footer_menu_gauche_gras li {
				position : relative;
				margin-right: 0px;
				margin-bottom: -10px; /* Réduit la marge entre les éléments */
				padding: 0; /* Enlève les espacements internes des éléments de la liste */
				bottom: 10px;
			}
			
			footer nav ul li {
				margin: 3px 0;
			}

			footer nav ul li {
				font-size: 0.5em;
			}

			.conteneur_footer a {
				display: block; /* Les liens deviennent des blocs pour mieux contrôler l'espacement */
				margin: 0px 0; /* Réduit encore l'espacement entre les liens */
			}
		}

		/* Smartphones (environ 320px et moins) */
		@media screen and (max-width: 320px) {
			.conteneur_footer {
				height: auto;
				padding: 0px;
			}

			.footer_menu_gauche_gras li {
				position : relative;
				margin-right: 0px;
				margin-bottom: -10px; /* Réduit la marge entre les éléments */
				padding: 0; /* Enlève les espacements internes des éléments de la liste */
				bottom: 10px;
			}

			footer nav ul {
				padding: 0;
			}

			footer nav ul li {
				font-size: 0.5em;
			}

			.conteneur_footer a {
				display: block; /* Les liens deviennent des blocs pour mieux contrôler l'espacement */
				margin: 0px 0; /* Espacement très réduit entre les liens */
			}
		}
		/*--------------------------*/
		/* RESPONSIVE DESIGN FOOTER */
		/*--------------------------*/