/* style.css */

/* Importer la police Alkatra depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');

/* Importer la police Nunito depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

@media only screen and (max-width: 600px) {
	body 
	{
		font-family: 'Alkatra', sans-serif; /* changer la police du texte */
		line-height: 1.2;
		margin: auto;
	}
	
	.noMobile{
		display: none!important;
	}
	
	@keyframes fadeIn {
	  from { opacity: 0; }
	  to { opacity: 1; }
	}

	.fade-in-element {
	  opacity: 0;
	  animation: 2s ease-out 0s 1 fadeIn forwards;/*fadeIn 1s ease-in-out;*/
	}
	
	.propose .flotte {
		height: 25px;
	}
	
	header 
	{
		top: 0;
		z-index: 50;
		margin-right: auto;
		margin-left: auto;
		margin-top: auto;
		margin-bottom: auto;
	}

	.centerSubtitle{
		text-align: center;
		font-size: 20px;
		color: rgb(165, 89, 60);
	}

	nav a 
	{
		text-decoration: none;
		color: white;
		font-size: 19px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		font-weight: bold;
        margin: 7px;
	}
	.imgCenter{
		display: flex;
		justify-content: center;
	}
	nav a:hover 
	{
		color: #a33a3a;
	}
	nav.entete 
	{
		list-style: none;
		display: flex;
		text-align: right;
		justify-content: center;
		/* margin: 5px; */
		padding: 1px;
		background-color: rgb(233, 179, 163);
		height: 50px;
		border: none;
	}
	div.entete
	{
		height: 100%;
		margin-top: 0px;
		margin-bottom: 0px;
		display: flex;
		align-items: center;
	}

	nav.soins 
	{
		display: flex;
		text-align: center;
		justify-content: center;
		margin: 0px; /* changer l espace des liens titre accueil la socio contact */
		background-color: rgb(233,179,163);
		color: white;
		border: none;
		border-radius: 1500px 250px 250px 0px / 110px 10px 10px 0px;
		line-height: 1.7;
		font-size: 18px; /* taille du texte */
        width: 100vw;
        margin-left: -20px;
	}

	nav.support 
	{
		display: flex;
		gap: 2px;
		text-align: center;
		justify-content: center;
		margin: 0px;
		background-color: rgb(251,232,215);
		color: white;*
		border: none;
		border-radius: 1500px 250px 250px 0px / 110px 10px 10px 0px;
		line-height: 1.7;
		font-size: 18px; /* taille du texte */
        width: 100vw;
        margin-left: -20px;
	}

	nav.propose 
	{
		display: flex;
		flex-direction: column;
		gap: 2px;
		text-align: right;
		justify-content: center;
		margin: 0px;
		background-color: rgb(251,232,215);
		color: white;
		border: none;
		border-radius: 1500px 250px 250px 0px / 110px 10px 10px 0px;
		line-height: 1.7;
		font-size: 18px; /* taille du texte */
        width: 100vw;
        margin-left: -20px;
		min-height: 300px;
	}

	nav.interventions 
	{
		display: flex;
		justify-content: center;
		text-align: center;
		margin: 0px;
		background-color: rgb(251,232,215);
		color: white;
		border: none;
		border-radius: 1500px 250px 250px 0px / 110px 10px 10px 0px;
		line-height: 1.7;
		font-size: 18px; /* taille du texte */
        width: 100vw;
        margin-left: -20px;
	}

	nav.contact1 
	{
		list-style: none;
		text-align: center;
		justify-content: center;
		background-color: rgb(233,179,163);
		color: white;
		border: none;
		border-radius: 17px;
		margin-right: auto;
		margin-left: auto;
		letter-spacing: 10px;
		margin-bottom: 10px
	}
	
	.contact1 h4 {
		margin: 0px;
        padding: 5px;
	}

	.noMargin{
		margin-left: 0px;
		margin-right: 0px;
	}

	.telephone a {
		font-size: 18px;
        overflow-wrap: anywhere;
	}
	
	.telephone {
		display: flex;
		font-size: 50px;
		margin: 0px;
		justify-content: center;
		align-items: center;
	}

	nav.contact2 
	{
		list-style: none;
		display: flex;
		text-align: center;
		justify-content: center;
		margin: 20px;
		background-color: rgb(251,232,215);
		border: none;
		border-radius: 80px 70px;
		margin-right: auto;
		margin-left: auto;
		letter-spacing: 10px;
	}

	.section 
	{
		padding-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
		margin: auto;
	}

	p 
	{
	  color: black;
	  font-size: 16px; /* taille du texte */
	  font-family: 'Nunito', sans-serif; /* changer la police du texte */
	}

	.p1
	{
		color: white;
		font-size: 16px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
	}

	.p2
	{
	  margin-top: 30px;   /* espace au-dessus */
	  margin-bottom: 30px; /* espace en dessous */
	}

	.spacer {
	  display: block;
	  height: 20px; /* ajuste la valeur selon l’espace voulu */
	}
	
	.mobileSpacer {
	  display: block;
	  height: 20px; /* ajuste la valeur selon l’espace voulu */
	}

	h1
	{
		color: rgb(233,179,163);
		font-weight: bold;
		font-size: 27px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		text-align: center;
		margin-left: 25px;
		margin-right: 25px;
		margin-top: 0px;
	}

	div.encartMoyen
	{
		color: rgb(103,53,0);
		font-weight : normal;
		font-size: 16px; /* taille du texte */
		font-family: 'Nunito', sans-serif; /* changer la police du texte */
		margin: 20px;
		text-align: left;
	}

	h3
	{
		color: #7a3b3b;
		font-size: 20px; /* taille du texte */
		font-family: 'Nunito', sans-serif; /* changer la police du texte */
		text-align: left;
		margin: 5px;
	}

	h4
	{
		color: #7a3b3b;
		font-weight: bold;
		font-size: 20px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		text-align: center;
		margin: 20px;
	}
	h5
	{
		color: white;
		font-weight: bold;
		font-size: 20px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		text-align: center;
		margin: 25px;
	}
	h6
	{
		color: rgb(233,179,163);
		font-weight: bold;
		font-size: 20px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		text-align: center;
		margin: 25px;
	}

	span
	{
		font-weight : normal;
		color: rgb(103,53,0);
		font-size: 16px; /* taille du texte */
		text-align: center;
		margin: 2px; /* espacement entre le PARAGRAPHE et le SPAN */
		letter-spacing: 1px;
		font-family: 'Nunito', sans-serif; /* changer la police du texte */
	}

	ul
	{
		color: rgb(103,53,0);
		font-size: 18px; /* taille du texte */
		font-family: 'Nunito', sans-serif; /* changer la police du texte */
	}

	.flotte 
	{
		float:right; /* mettre une image en position droite ou gauche */
		object-fit: cover;
		position: relative;
        right: 10px;
        top: -50px;
	}

	.mb2{
		margin-bottom: 20px;
	}

	/* ---- BOUTON RETOUR HAUT ---- */
	.back-to-top 
	{
		position: fixed;
		bottom: 20px;
		right: 20px;
		background-color: #f0b8a8;
		color: white;
		font-size: 40px;
		font-weight: bold;
		text-align: center;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
		text-decoration: none;
		transition: background-color 0.3s ease, transform 0.3s ease;
	}
	
	img {
		max-width: 100%;
	}

	.image-ronde
	{
		width: 100px;
		height: 100px;
		border: none;
		-moz-border-radius : 100px;
		-webkit-border-radius : 100px;
		border-radius: 100px;
	}
	
	#imageSoin1 {
		width: 100%
	}
	
	#imageSoin2 {
		width: 100%
	}

	.centerImg
	{
		width: auto !important;
        height: auto !important;
        max-width: 49%;
        aspect-ratio: auto;
	}

	footer
	{
		padding: 1px 0;
		top: 0;
		z-index: 50;
		margin-right: auto;
		margin-left: auto;
		margin-top: auto; 
		margin-bottom: auto;
		text-align: center;
	}

	nav.contact3 {
		background-color: rgb(251,232,215);
		width: 800px;
		height: auto;
		border-radius: 80px 70px;
		margin: 40px auto; /* centre horizontalement */
		padding: 40px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center; /* centre horizontalement le contenu */
		justify-content: center; /* centre verticalement si hauteur fixe */
	}

	.contact-form {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 80%;
		max-width: 500px;
	}

	.contact-form label {
		text-align: left;
	}

	.contact-form input,
	.contact-form textarea {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-family: inherit;
	}

	.contact-form button {
		padding: 10px;
		border: none;
		background: #333;
		color: white;
		font-weight: bold;
		border-radius: 5px;
		cursor: pointer;
	}

	.contact-form button:hover {
		background: #555;
	}
}

@media only screen and (min-width: 600px) {
	body {
		font-family: 'Alkatra', sans-serif; /* changer la police du texte */
		line-height: 1.2;
		margin: auto;
		padding: 25px;
	}

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

	.fade-in-element {
	  opacity: 0;
	  animation: 2s ease-out 0s 1 fadeIn forwards;/*fadeIn 1s ease-in-out;*/
	}
	
	#imgSoins {
		display: flex; 
		right: 150px;
	}
	
	#imageSoin1 {
		width: 275px; 
		height:275px;	
	}
	
	#imageSoin2 {
		width: 276px;
		height: 396px;
		margin-left: 75px;
	}
	
	header 
	{
		top: 0;
		z-index: 50;
		margin-right: auto;
		margin-left: auto;
		width: 900px;
		margin-top: auto;
		margin-bottom: auto;
		position: absolute;
		right: 0px;
	}

	.centerSubtitle{
		text-align: center;
		font-size: 35px;
		color: rgb(165, 89, 60);
	}

	nav a 
	{
		text-decoration: none;
		color: white;
		font-size: 25px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		font-weight: bold;
		margin-right: 75px;
		margin-left: 50px;
		overflow-wrap: anywhere;
    }
	.imgCenter{
		display: flex;
		justify-content: center;
	}
	nav a:hover 
	{
		color: #a33a3a;
	}
	nav.entete 
	{
		list-style: none;
		display: flex;
		text-align: right;
		justify-content: center;
		/* margin: 5px; */
		padding: 1px;
		background-color: rgb(233, 179, 163);
		height: 60px;
		border: none;
		border-bottom-left-radius: 125px 60px;
	}
	div.entete
	{
		height: 100%;
		margin-top: 0px;
		margin-bottom: 0px;
		display: flex;
		align-items: center;
	}

	nav.soins 
	{
		display: flex;
		text-align: center;
		justify-content: center;
		margin: 0px; /* changer l espace des liens titre accueil la socio contact */
		background-color: rgb(233,179,163);
		color: white;
		border: none;
		border-radius: 1500px 250px 250px 0px / 110px 10px 10px 0px;
        line-height: 1.7;
        font-size: 25px;
        width: 100vw;
        margin-left: -60px;
        min-height: 250px;
        align-items: center;
	}

	nav.support 
	{
		display: flex;
		gap: 2px;
		text-align: center;
		justify-content: center;
		margin: 0px;
		background-color: rgb(251,232,215);
		color: white;
		border: none;
		border-radius: 1500px 250px 250px 0px / 110px 10px 10px 0px;
        line-height: 1.7;
        font-size: 25px;
        width: 100vw;
        margin-left: -60px;
        min-height: 625px;
        align-items: center;
	}

	nav.propose 
	{
		display: flex;
		gap: 2px;
		text-align: center;
		justify-content: center;
		margin: 0px;
		background-color: rgb(251,232,215);
		color: white;
		border: none;
		border-radius: 1500px 250px 250px 0px / 110px 10px 10px 0px;
        line-height: 1.7;
        font-size: 25px;
        width: 100vw;
        margin-left: -60px;
        min-height: 350px;
        align-items: center;
	}

	nav.interventions 
	{
		display: flex;
		justify-content: center;
		text-align: center;
		margin: 0px;
		background-color: rgb(251,232,215);
		color: white;
		border: none;
		border-radius: 1500px 250px 250px 0px / 110px 10px 10px 0px;
        line-height: 1.7;
        font-size: 25px;
        width: 100vw;
        margin-left: -60px;
        min-height: 200px;
        align-items: center;
	}

	nav.contact1 
	{
		list-style: none;
		display: inline-block;
		text-align: center;
		justify-content: center;
		background-color: rgb(233,179,163);
		color: white;
		border: none;
		border-radius: 80px 70px;
		margin-right: auto;
		margin-left: auto;
		letter-spacing: 10px;
		width: 49%;
	}

	.noMargin{
		margin-left: 0px;
		margin-right: 0px;
	}

	.telephone {
		font-size: 70px;
		margin: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	nav.contact2 
	{
		list-style: none;
		display: flex;
		text-align: center;
		justify-content: center;
		margin: 20px;
		background-color: rgb(251,232,215);
		border: none;
		border-radius: 80px 70px;
		margin-right: auto;
		margin-left: auto;
		letter-spacing: 10px;
	}

	.section 
	{
		padding: 20px 20px;
		margin: auto;
	}

	p 
	{
	  color: black;
	  font-size: 25px; /* taille du texte */
	  font-family: 'Nunito', sans-serif; /* changer la police du texte */
	}

	.p1
	{
		color: white;
		font-size: 25px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
	}

	.p2
	{
	  margin-top: 30px;   /* espace au-dessus */
	  margin-bottom: 30px; /* espace en dessous */
	}

	.spacer {
	  display: block;
	  height: 60px; /* ajuste la valeur selon l’espace voulu */
	}

	.mobileSpacer {
	  display: none;
	  height: 0px; /* ajuste la valeur selon l’espace voulu */
	}
	
	h1
	{
		color: rgb(233,179,163);
		font-weight: bold;
		font-size: 39px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		text-align: center;
		margin: 25px;
		margin-bottom: 75px;
	}

	div.encartMoyen
	{
		color: rgb(103,53,0);
		font-weight : normal;
		font-size: 25px; /* taille du texte */
		font-family: 'Nunito', sans-serif; /* changer la police du texte */
		margin: 20px;
		text-align: left;
		padding: 25px;
	}

	h3
	{
		color: #7a3b3b;
		font-size: 28px; /* taille du texte */
		font-family: 'Nunito', sans-serif; /* changer la police du texte */
		text-align: left;
		margin: 5px;
	}

	h4
	{
		color: #7a3b3b;
		font-weight: bold;
		font-size: 28px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		text-align: center;
		 margin: 20px;
	}
	h5
	{
		color: white;
		font-weight: bold;
		font-size: 28px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		text-align: center;
		margin: 47px;
	}
	h6
	{
		color: rgb(233,179,163);
		font-weight: bold;
		font-size: 30px; /* taille du texte */
		font-family: 'Alkatra', cursive; /* changer la police du texte */
		text-align: center;
		margin: 25px;
	}

	span
	{
		font-weight : normal;
		color: rgb(103,53,0);
		font-size: 25px; /* taille du texte */
		text-align: center;
		margin: 2px; /* espacement entre le PARAGRAPHE et le SPAN */
		letter-spacing: 1px;
		font-family: 'Nunito', sans-serif; /* changer la police du texte */
	}

	ul
	{
		color: rgb(103,53,0);
		font-size: 25px; /* taille du texte */
		font-family: 'Nunito', sans-serif; /* changer la police du texte */
	}

	.flotte 
	{
		float:right; /* mettre une image en position droite ou gauche */
		object-fit: cover;
		top: -120px;
		position: relative;
		right: 25px;
	}

	.mb2{
		margin-bottom: 20px;
	}

	.flotte1
	{
		float:right; /* mettre une image en position droite ou gauche */
		object-fit: cover;
		margin-top: 9px;
		margin-left: 5px;
		display: flex;
		width: 290px;
		height: 500px;
		margin-right: 50px;
	}

	.flotte2 {
		float: right;
		object-fit: cover;
		margin-top: 15px;
		margin-left: 15px;
		position: relative;
	}

	.flotte2.noMobile {
		margin: 0px;
	}

	#dacContent {
		display: flex;
		flex-flow: wrap;
		align-items: center;
	}
	
	#dac {
		display: flex;
	}
	/* ---- BOUTON RETOUR HAUT ---- */
	.back-to-top 
	{
		position: fixed;
		bottom: 20px;
		right: 20px;
		background-color: #f0b8a8;
		color: white;
		font-size: 40px;
		font-weight: bold;
		text-align: center;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
		text-decoration: none;
		transition: background-color 0.3s ease, transform 0.3s ease;
	}

	.noLaptop{
		display: none;
	}
	
	.image-ronde
	{
		width: 200px;
		height: 200px;
		border: none;
		-moz-border-radius : 100px;
		-webkit-border-radius : 100px;
		border-radius: 100px;
	}

	.centerImg
	{
		width: 500px;
		height: 500px;
		margin-left: 100px;
		margin-right: 100px;
	}

	footer
	{
		padding: 1px 0;
		top: 0;
		z-index: 50;
		margin-right: auto;
		margin-left: auto;
		width: 900px;
		margin-top: auto; 
		margin-bottom: auto;
		text-align: center;
	}

	nav.contact3 {
		background-color: rgb(251,232,215);
		width: 800px;
		height: auto;
		border-radius: 80px 70px;
		margin: 40px auto; /* centre horizontalement */
		padding: 40px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center; /* centre horizontalement le contenu */
		justify-content: center; /* centre verticalement si hauteur fixe */
	}

	.contact-form {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 80%;
		max-width: 500px;
	}

	.contact-form label {
		text-align: left;
	}

	.contact-form input,
	.contact-form textarea {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-family: inherit;
	}

	.contact1 h4 {
		margin: 0px;
        padding: 5px;
	} 
	
	.contact-form button {
		padding: 10px;
		border: none;
		background: #333;
		color: white;
		font-weight: bold;
		border-radius: 5px;
		cursor: pointer;
	}

	.contact-form button:hover {
		background: #555;
	}
}