@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@keyframes fade{
	from {opacity:0;}
	to {opacity: 1;}
}

.scroll-up
{
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: white;
	color: black;
	border-color: thin solid black;
	padding: 15px;
	font-size: 25px;
	border-radius: 15px;
	animation: fade;
	animation-timeline: scroll(y root);
}



/*MENU BURGER*/

#burger
{
	position: absolute;
	width: 100%;
	font-size: 20px;
	right: 0;
	top: 0;
	display: none;
}

#burger nav
{
	position: absolute;
	width: 100%;
	text-align: center;
	background-color: #149F98;
	transition: transform 1s;
}

#burger a
{
	color: black;
	text-decoration: none;
}

#burger nav a{
	color: white;
	text-decoration: none;
	display: block;
	padding: 10px;
}

#open, #close{
	position: absolute;
	right: 10px;
	top: 5px;
	font-size: 50px;
	z-index: 1;
}

#burger:target #open, #burger:not(:target) #close{
	display: none;
}

#burger:not(:target) nav{
	transform: translate3d(0, -200px, 0);
}

#burger:target nav{
	transform: translate3d(0, 0, 0);
}

/*----Général----*/
* 
{
	margin: 0; /* Supprime les marges par défaut de tous les éléments */
	padding: 0; /* Supprime les espacements internes par défaut de tous les éléments */
	box-sizing: border-box; /* Inclut les bordures et les espacements internes dans la largeur et la hauteur des éléments */
	font-family: Roboto, sans-serif; /* Définit la police de caractères utilisée sur toute la page */
	scroll-behavior: smooth;
}

/*----En-tête----*/
.h-accueil 
{
	display: flex; /* Utilise Flexbox pour organiser les éléments à l'intérieur du conteneur */
	flex-direction: column; /* Aligne les éléments en colonne */
	align-items: center; /* Centre les éléments horizontalement */
	padding-top: 20px; /* Ajoute un espacement interne */
	width: 1000PX; /* Définit la largeur du conteneur à 100% de son conteneur parent */
	margin: auto; /* Centre le conteneur horizontalement dans son conteneur parent */
}

header img 
{
	width: 300px; /* Définit la largeur de l'image à 300 pixels */
	margin-bottom: 20px; /* Ajoute un espacement inférieur de 20 pixels sous l'image */
	display: block; /* Affiche l'image comme un bloc, pour qu'elle puisse avoir des marges */
}

.contenu 
{
	width: 100%; /* Définit la largeur du conteneur à 100% de son conteneur parent */
	display: flex; /* Utilise Flexbox pour organiser les éléments à l'intérieur du conteneur */
	justify-content: center; /* Centre les éléments horizontalement */
	align-items: center; /* Centre les éléments verticalement */
}

/* Style pour le menu */
.h-accueil nav 
{
	display: flex; /* Utilise Flexbox pour organiser les éléments à l'intérieur du conteneur */
	justify-content: center; /* Centre les éléments horizontalement */
	align-items: center; /* Centre les éléments verticalement */
	background-color: #149F98; /* Définit la couleur de fond du menu */
	width: 800PX; /* Définit la largeur du menu à 100% de son conteneur parent */
	height: 80px; /* Définit la hauteur du menu à 80 pixels */
	margin-top: 20px; /* Ajoute un espacement supérieur de 20 pixels au-dessus du menu */
	overflow: hidden; /* Cache tout débordement pour éviter les sauts de ligne */
	/* Optionnel : ajoute un rétrécissement des liens si nécessaire pour les petits écrans */
	flex-wrap: nowrap; /* Assure que les éléments restent en ligne */
    overflow: hidden; /* Cache le contenu qui déborde */
}

.h-accueil nav a 
{
	color: white; /* Définit la couleur du texte des liens à blanc */
	text-decoration: none; /* Supprime la décoration par défaut des liens (soulignement) */
	font-size: 20px; /* Définit la taille de la police des liens à 20 pixels */
	margin: 0 30px; /* Ajoute un espacement horizontal de 30 pixels entre chaque lien */
	white-space: nowrap; /* Empêche le retour à la ligne des liens */
}

/* Image bandeau */
.bandeau-container 
{
	background-image: url(images/bandeau.jpg);
    text-align: center; /* Centre le texte à l'intérieur du conteneur */
    margin-top: 0; /* Supprime l'espacement supérieur du conteneur */
    margin-bottom: 0; /* Supprime l'espacement inférieur du conteneur */
    padding: 0;
    width: 100%; /* Définit la largeur de l'image à 100% du conteneur parent */
    height: 725px; /* Définit la hauteur fixe de l'image */
    object-fit: cover; /* Ajuste l'image pour couvrir entièrement le conteneur sans déformation */
    display: block; /* Affiche l'image comme un bloc, pour qu'elle puisse avoir des marges */
}

.welcome
{
	background-color: #2b3a3f; /* Définit la couleur de fond du conteneur à gris foncé */
	color: white; /* Définit la couleur du texte à blanc */
	text-align: center; /* Centre le texte à l'intérieur du conteneur */
	width: 100%; /* Définit la largeur du conteneur à 100% du conteneur parent */
	padding: 20px;
	box-sizing: border-box;
}

h2
{
	padding: 10px; /* Ajoute un espacement interne de 10 pixels autour du texte */
	font-size: 35px; /* Définit la taille de la police des titres à 35 pixels */
	font-weight: bold; /* Définit le poids de la police des titres à gras */
	margin-top: 20px;
}

.sep
{
	height: 3px;
	width: 350px;
	background-color: #00cec4;
	margin: auto;
}

.button 
{
    background-color: #00cec4; /* Définit la couleur de fond du bouton */
    border: none; /* Supprime les bordures par défaut du bouton */
    width: 150px; /* Définit la largeur du bouton à 150 pixels */
    height: 50px; /* Définit la hauteur du bouton à 50 pixels */
    margin: 30px auto; /* Ajoute un espacement vertical de 30 pixels autour du bouton et centre le bouton horizontalement */
    text-decoration: none; /* Supprime la décoration par défaut des liens (soulignement) */
    color: white; /* Définit la couleur du texte du bouton à blanc */
    display: flex; /* Utilise Flexbox pour organiser le contenu du bouton */
    align-items: center; /* Centre le texte verticalement dans le bouton */
    justify-content: center; /* Centre le texte horizontalement dans le bouton */
    border-radius: 10px; /* Arrondit les coins du bouton avec un rayon de 10 pixels */
    font-size: 16px; /* Définit la taille de la police du texte du bouton à 16 pixels */
}

.c-services
{
	background-color: white; /* Définit la couleur de fond du conteneur à blanc */
	color: black; /* Définit la couleur du texte à noir */
	width: 100%; /* Définit la largeur du conteneur à 100% du conteneur parent */
	text-align: center; /* Centre le texte à l'intérieur du conteneur */
	padding: 20px; /* Ajoute un espacement interne de 20 pixels autour du contenu du conteneur */
}

.c-services h2, 
{
    text-align: center; /* Centre le texte des titres et la ligne horizontale */
    margin: 0 auto; /* Centre les éléments horizontalement et supprime les marges verticales */
}

.col-container 
{
    display: flex; /* Utilise Flexbox pour organiser les colonnes en ligne */
    justify-content: space-around; /* Distribue l'espace également entre les colonnes */
    padding: 20px 0; /* Ajoute un espacement interne vertical de 20 pixels autour des colonnes */
}

.col
{
	width: 30%; /* Définit la largeur de chaque colonne à 30% de son conteneur parent */
    text-align: center; /* Centre le texte à l'intérieur de chaque colonne */
    padding: 10px; /* Ajoute un espacement interne de 10 pixels autour du contenu de chaque colonne */
}

.col h3 
{
    font-size: 24px; /* Définit la taille de la police des titres à 24 pixels */
    background-color: #00cec4;
    color: white;
    height: 50px;
    width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.col p 
{
    font-size: 16px; /* Définit la taille de la police du texte à 16 pixels */
    line-height: 1.5; /* Définit l'interligne du texte pour améliorer la lisibilité */
    margin-top: 10px; /* Ajoute un espacement supérieur de 10 pixels entre le titre et le texte */
}

/* Pour les images de fond des colonnes */
.img1, .img2, .img3
{
    width: 100%; /* Définit la largeur des éléments contenant les images de fond à 100% de leur conteneur parent */
    height: 200px; /* Définit la hauteur des éléments contenant les images de fond à 200 pixels */
    margin-bottom: 10px;
    
    /* Ajuste l'image de fond pour qu'elle soit entièrement visible à l'intérieur du conteneur sans déformation */
    background-size: contain; /* Redimensionne l'image pour qu'elle soit entièrement visible à l'intérieur du conteneur tout en maintenant ses proportions */ 
    background-repeat: no-repeat; /* Évite que l'image de fond se répète si elle est plus petite que le conteneur */    
    background-position: center; /* Centre l'image de fond à l'intérieur du conteneur */
}

.img1 
{
	background-image: url(images/img1.png); /* Définit l'image de fond pour .img1 */
}

.img2 
{
	background-image: url(images/img2.png); /* Définit l'image de fond pour .img2 */
}

.img3 
{
	background-image: url(images/img3.png); /* Définit l'image de fond pour .img3 */
}

.c-honoraires
{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #2b3a3f; /* Définit la couleur de fond du conteneur à gris foncé */
	color: white; /* Définit la couleur du texte à blanc */
	text-align: center; /* Centre le texte à l'intérieur du conteneur */
	width: 100%; /* Définit la largeur du conteneur à 100% du conteneur parent */
	padding: 20px;
	box-sizing: border-box;
}

.c-honoraires h3
{
	font-size: 24px; /* Définit la taille de la police des titres à 24 pixels */
    background-color: #00cec4;
    color: white;
    height: 50px;
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
}

/* Style des détails des honoraires */
.honoraires-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: auto;
}

/* Style pour chaque ligne de texte */
.honoraires-line {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 10px 0;
}

/* Style pour le texte de gauche */
.par-1 {
    flex: 1;
    text-align: right;
    padding: 0 10px;
}

/* Style pour le séparateur */
.par-sep {
    width: 30px; 
    height: 3px; 
    background-color: #00cec4;
}

/* Style pour le texte de droite */
.par-2 {
    flex: 1; /* Permet au texte de droite de prendre tout l'espace disponible */
    text-align: left; 
    padding: 0 10px; 
}

.contact
{

}

.info
{
	display: flex;
	align-items: center;
	margin-top: 20px;
	justify-content: center;
	margin-bottom: 20px;
}

.img-tel
{
	background-image: url(images/tel.png);
}

.img-mail
{
	background-image: url(images/email.png);
}

.img-tel, .img-mail
{
	width: 30px;
	height: 30px;
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 20px;
}

.r-sociaux
{
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #00cec4;
}
.fb
{
	background-image: url(images/facebook.png);
}

.ig
{
	background-image: url(images/instagram.png);
}

.x
{
	background-image: url(images/twitter.png);
}

.fb, .ig, .x
{
	width: 20px;
	height: 20px;
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 20px;
}

/*RESPONSIVE*/
@media screen and (max-width:1000px)
{
	.contenu
	{
		width: 100%;
		flex-direction: column;
	}

	.h-accueil
	{
		width: 100%;
	}

	.h-accueil nav
	{
		display: none;
	}

	.bandeau-container
	{
		width: 100%;
		height: 50vh; /* Ajuste la hauteur de l'image sur mobile */
		align-items: center;
		background-position: center;
		background-repeat: no-repeat;
		display: block;
		object-fit: cover;
	}

	.sep
	{
		width: 100px;
	}

	.col-container 
	{
	    flex-direction: column; /* Les colonnes passent en disposition verticale */
	    padding: 10px;
	}

	.col h3
	{
		width: 200px;
	}
	.col 
	{
		width: 90%; /* Réduit la largeur des colonnes sur mobile */
		margin: 10px auto;
	}

	.button 
	{
		width: 120px; /* Ajuste la taille des boutons */
		height: 40px;
		font-size: 14px; /* Réduit la taille du texte des boutons */
	}

	h2 
	{
		font-size: 28px; /* Réduit la taille des titres sur mobile */
	}

	h3 
	{
		font-size: 18px; /* Réduit la taille des sous-titres sur mobile */
	}

	.img1, .img2, .img3 
	{
		height: 150px; /* Réduit la taille des images de fond des colonnes */
	}

	.c-honoraires h3 
	{
		width: 90%; /* Ajuste la largeur des titres d'honoraires */
	}

	.honoraires-line 
	{
		flex-direction: column; /* Place le texte et les séparateurs en colonne */
		text-align: center; /* Centre le texte */
	}

	.par-1, .par-2 
	{
		text-align: center; /* Centre les sections de texte */
		padding: 10px 0; /* Ajoute un espacement vertical */
	}

	.par-sep 
	{
		margin: 10px 0; /* Ajoute un espacement autour du séparateur */
	}

	.info 
	{
		flex-direction: column; /* Dispose les infos contact en colonne */
		text-align: center;
	}

	.r-sociaux 
	{
		height: 60px; /* Réduit la hauteur de la section réseaux sociaux */
	}

	.fb, .ig, .x 
	{
		margin-right: 10px; /* Réduit l'espacement entre les icônes */
		width: 25px; /* Ajuste la taille des icônes */
		height: 25px;
	}

	#burger
	{
		display: block;
	}
}