/* Bootstrap grid :
xs  : <  576px
sm  : ≥  576px
md  : ≥  768px
lg  : ≥  992px
xl  : ≥ 1200px
xxl : ≥ 1400px

t- pour les classes qui définissent margin-top ou padding-top
b- pour les classes qui définissent margin-bottom ou padding-bottom
s- (début) pour les classes qui définissent margin-left ou padding-left en LTR, margin-right ou padding-right en RTL
e- (fin) pour les classes qui définissent margin-right ou padding-right en LTR, margin-left ou padding-left en RTL
x- pour les classes qui définissent à la fois *-left et *-right
y- pour les classes qui définissent à la fois *-top et *-bottom
vide - pour les classes qui définissent un marginou paddingsur les 4 côtés de l'élément

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);


*/


html
{
	/*background-color: rgb(217, 233, 234);
	background-repeat: no-repeat;
    background-size: cover;*/
	margin: auto; /* Pour centrer notre page */
    height: 100%;
}

/* Gradient transparent - color - transparent */
/*
hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}*/


/* Flaired edges, by Tomas Theunissen */

/*hr.style-seven {
    overflow: visible; /* For IE */
/*    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style-seven:before { /* Not really supposed to work, but does */
/*    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}*/

/*	Pour centrer verticalement et horizontalement le contenu d'un div directement en html :	style="Display: grid; place-items: center;" */



/*	Pour personnaliser le titre principal de chaque page web	*/
.titre-page {
	padding-top: 0px;
	text-align:center;
}

/*	Pour les boutons "Prendre rendez-vous" hors celui du menu */
.btn {
	background-color: rgb(226, 166, 145);
	border: none;
}

/*	Pour le bouton "Prendre rendez-vous" du menu */
.bouton_menu {
	border-radius: 30px;
	background-color: rgb(248, 242, 239);
	margin-bottom: 2px;
}

.bouton_doctolib:hover {
	background-color: #107ACA;
	/*background-color: rgb(52, 120, 200);*/
}


.TexteJustify {
	text-align: justify;
	text-justify: inter-word;
}

/*	Titres	*/
h1, h2 {
	color: rgb(226, 166, 145);
}


@media (min-width: 1200px){
	.dropdown:hover .dropdown-menu {
		display: block;
		margin-top: 0;
	}
}


.puceOVA {
	padding-left: 15px;
}

/*
.maVideo {
	display: block;	/* Pour centrer horizontalement la vidéo sur la page */
/*	margin: auto auto auto auto;	/* Pour centrer horizontalement la vidéo sur la page */
/*	width: max(560px, 800px);
	max-width: 100%;
	aspect-ratio: 16/9;

}

@media (min-width: 768px) {
	.maVideo {
		display: block;	/* Pour centrer horizontalement la vidéo sur la page */
/*		margin: auto auto auto auto;	/* Pour centrer horizontalement la vidéo sur la page */
/*		width: max(560px, 800px);
		max-width: 100%;
		aspect-ratio: 16/9;
		margin-bottom: -50px; /* Pour neutraliser l'espace vide qui se crée sous la vidéo */
/*	}
}

@media (min-width: 770px) {
	.maVideo {
		display: block;	/* Pour centrer horizontalement la vidéo sur la page */
/*		margin: auto auto auto auto;	/* Pour centrer horizontalement la vidéo sur la page */
/*		width: max(560px, 800px);
		max-width: 100%;
		aspect-ratio: 16/9;
		margin-bottom: -70px; /* Pour neutraliser l'espace vide qui se crée sous la vidéo */
/*	}
}

@media (min-width: 850px) {
	.maVideo {
		display: block;	/* Pour centrer horizontalement la vidéo sur la page */
/*		margin: auto auto auto auto;	/* Pour centrer horizontalement la vidéo sur la page */
/*		width: max(560px, 800px);
		max-width: 100%;
		aspect-ratio: 16/9;
		margin-bottom: -70px; /* Pour neutraliser l'espace vide qui se crée sous la vidéo */
/*	}
}

@media (min-width: 992px) {
	.maVideo {
		display: block;	/* Pour centrer horizontalement la vidéo sur la page */
/*		margin: auto auto auto auto;	/* Pour centrer horizontalement la vidéo sur la page */
/*		width: max(560px, 800px);
		max-width: 100%;
		aspect-ratio: 16/9;
		margin-bottom: -110px; /* Pour neutraliser l'espace vide qui se crée sous la vidéo */
/*	}
}

@media (min-width: 1140px) {
	.maVideo {
		display: block;	/* Pour centrer horizontalement la vidéo sur la page */
/*		margin: auto auto auto auto;	/* Pour centrer horizontalement la vidéo sur la page */
/*		width: max(560px, 800px);
		max-width: 100%;
		aspect-ratio: 16/9;
		margin-bottom: -130px; /* Pour neutraliser l'espace vide qui se crée sous la vidéo */
/*	}
}

.maVideo iframe {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: 315px;
	max-width: 560px;
}*/



/* Le parent */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	overflow: hidden;
	height: 0;
	text-align: center;
}


@media (min-width: 768px) {
	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		overflow: hidden;
		height: 0;
		text-align: center;
		margin-bottom: -450px; /* Pour neutraliser l'espace vide qui se crée sous la vidéo */
	}
}


/* L'enfant */
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 560px;
	max-height: 315px;
}


html, header, main {
	background-color: rgb(248, 242, 239);
	/*	background-color: rgb(123, 175, 189);	*/
	/*	background-color: rgb(217, 233, 234);	*/
}

footer {
	background-color: rgb(226, 166, 145);

}


/*	Non utilisé au 16/10/2025	*/
.lien_none { /* Pour des liens web sans soulignement */
	text-decoration: none;
	color: black;
}


.plan {
	width: 100%;
	/*width: 855;
	height: 470px; */
}

/* Non utilisé
.ul{
	padding: 0;
	padding-left: 2rem;
	text-align:left;
}
*/

/*	Utilisé	*/
.GroupePuce {
	padding-left: 1rem;
	text-align:left;
	margin-bottom: 2px;
}


/*	Utilisé	*/
.puce {
	margin-bottom: 0.5rem;
}


/*	Utilisé	*/
.alinéaParagraphe {
	text-indent: 3mm;
}


/* Non utilisé
.paragraphe {
	text-justify: inter-word;
	text-align: justify;
}
*/

/* Non utilisé
.image_temoignage {
	max-width: 100%;
}
*/

/* Non utilisé
.Témoignages {
	max-width: 200px;
}


.témoignage {
    display: block;
	margin: auto auto auto auto;	// Pour centrer horizontalement sur la page
	max-width: 100%;
    height: auto;
    width: 400px;
}
*/

/*
.test2 {
	position: relative;
    min-height: 100%;
}
*/



/*-------------------- image --------------------*/
.imageMC {
	border-radius: 50%; /* Image ronde	*/
	width: 40%;
}


@media (min-width: 768px) {
	.imageMC {
		border-radius: 50%; /* Image ronde	*/
		width: 30%;
	}
}

@media (min-width: 1200px) {
	.imageMC {
		border-radius: 50%; /* Image ronde	*/
		width: 20%;
	}
}


/*-------------------- image --------------------*/
.imageMCmenu {
	border-radius: 50%; /* Image ronde	*/
	width: 42px;
	margin-right: 1px;
}

/*
@media (min-width: 768px) {
	.imageMCmenu {
		border-radius: 50%; /* Image ronde	*/
/*		width: 30%;
	}
}*/

@media (min-width: 1200px) {
	.imageMCmenu {
		border-radius: 50%; /* Image ronde	*/
		width: 42px;
		margin-right: 10px;
	}
}


.imagePiedsBébéMainParents {
	width: 70%;
	border-radius: 30px;
}

@media (min-width: 768px) {
	.imagePiedsBébéMainParents {
		width: 60%;
		border-radius: 30px;
	}
}

@media (min-width: 1200px) {
	.imagePiedsBébéMainParents {
		width: 100%;
		border-radius: 30px;
	}
}




/*	Pour le logo-ambassadrice-bien-naître.jpg	*/
.responsiveAmbassadrice {
	max-width: 100%;
	width: 30%;
	height: auto;
}
@media (min-width: 768px) {
  .responsiveAmbassadrice {
    width: 10%;  /* Images occupy 50% of their container on larger screens */
  }
}

/*	Pour le logo-Methode-sonia-krief3.jpg	*/
.responsiveBainThalasso {
	width: 50%;
	height: auto;
	text-align: center;
}
@media (min-width: 768px) {
  .responsiveBainThalasso {
    width: 250px;  /* Images occupy 50% of their container on larger screens */
	text-align: center;
  }
}

.MarginBottomNégative15 {
	margin-bottom: -15px;
}


.photo {
	width: 100%;
}


.cent {
	width: 100%;
}


.trente {
	width: 30%;
}



.img-carree {
	clip-path: ellipse(50% 50%);
	display: block;
	width: 30%;
	margin: auto;
}

/* inversion entre l'active et le click ?	
.dropdown-menu a:active {
	font-weight: bold;
	background : rgba(0, 0, 0, 0.5);
}*/


/*-------------------- Animation du surlignage d'un lien au survol de la souris --------------------*/
/* Ne fonctionne que pour une seule ligne :	*/

/*
a {	/*	S'applique à tous les liens !	*/
/*
	color: inherit;
	text-decoration: none;
	background: linear-gradient(to top, rgba(255, 0, 0, 0.5) 0%,
	rgba(255, 0, 0, 0.5) 10%, transparent 10.01%) no-repeat;
	background-size: 0% 100%;
	transition: background-size .3s;
}*/

.animationSurlignement {	
	color: inherit;
	text-decoration: none;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, /*	Le 0.5 correspond à l'épaisseur du surlignement"	*/
	rgba(0, 0, 0, 0.5) 10%, transparent 10.01%) no-repeat;
	background-size: 0% 100%;
	transition: background-size .3s;
}


a:hover {
  background-size: 100% 100%;
}

.content a {	/*	Pour les liens dont le parent à la classe "content"	*/
	background-size: 100% 100%;
	/*font-weight: bold;*/
}

.content a:hover {	/*	Lors du survol des liens dont le parent à la classe "content"	*/
	animation: underlined 1s both;	/*	On anime pendant 1 seconde le keyframes nommé "underlined"	*/ 
}

@keyframes underlined {
	from {
		background-size: 100% 100%;	/* On passe d'un surlignement à 100%	*/
		background-position: bottom right;
	}
	50% {
		background-size: 0% 100%;
		background-position: bottom right;
	}
	50.01% {
		background-position: bottom left;
	}
	100% {
		background-size: 100% 100%;
		background-position: bottom left;
	}
}
/*
a {
  position: relative;
}
/*
a::after {
  content: '';
  /*transform-origin: 0 0; 
  transform: scaleX(0);
  position: absolute;
  /*bottom: 0;*/
/*  bottom: 10%;
  left: 0;
  right: 0;
  /*height: .4em;*/
/*  height: 30%;
  background: #78ab4e;
  background: rgba(255, 0, 0, 0.5);
  z-index: -1;
  /*opacity: 0.8;
  transition: transform .3s;*/
/*}
/*
a:hover::after {
  transform: scaleX(1);
}*/

/* Pour une approche multiligne :	*/
/*
@keyframes underlined {
	from {
		background-size: 100% 100%;
		background-position: bottom right;
	}
	50% {
		background-size: 0% 100%;
		background-position: bottom right;
	}
	50.01% {
		background-position: bottom left;
	}
	100% {
		background-size: 100% 100%;
		background-position: bottom left;
	}
}
*/
/*-------------------- Fin : Animation du surlignage d'un lien au survol de la souris --------------------*/



/*-------------------- Faire vibrer un lien au survol de la souris --------------------*/
/* Fonctionner avec un div ou un p. Ne fonctionne pas avec a ou span */
/*.vibrer:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  
  30%, 50%, 70% {
    transform: translate3d(-2px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(2px, 0, 0);
}*/

/*-------------------- Fin : Faire vibrer un lien au survol de la souris --------------------*/

/*
.image-ronde-bg{
	background-size: contain;
	background-position: 50% 50%; 
	background-image: url(/img/exemple/filter-image.jpg);
	display: inline-block;
	width: 150px; height : 150px;
	border-radius: 50%;
}
*/


/*.image-ronde{
	width : 150px; height : 150px;
	border: none;
	-moz-border-radius : 75px;
	-webkit-border-radius : 75px;
	border-radius : 75px;
}
*/





/* shadow = ombre	*/





.navbar {
	background-color: rgb(226, 166, 145);
	/*	background-color: rgb(247, 233, 229);	*/
	/*	background-color: rgb(248, 242, 239);	*/
	/*	background-color: rgb(123, 175, 189);	*/
	/*	background-color: rgb(217, 233, 234);	*/
}



.navbar-custom {
	height: 100px;
}

/*	Couleur du menu ce fondant dans la barre de menu	*/
.dropdown-menu {
	background-color: rgb(248, 242, 239);
	/*	background-color: rgb(123, 175, 189);	*/
	/*	background-color: rgb(217, 233, 234);	*/
	/*	animation: .5s slideup;	*/
}

.dropdown-menu:active {
	background-color: rgb(248, 242, 239);
	font-weight: bold;
	/*	background-color: rgb(123, 175, 189);	*/
	/*	background-color: rgb(217, 233, 234);	*/
	/*	animation: .5s slideup;	*/
}

/*------------------------------------------------------------------------------------------------------------ Formulaire --------------------------------------------------------------------------------------------------------------*/
/* //////////////////////////////////////////////
Plus d'informations liées à la solution  : 
//////////////////////////////////////////////

https://www.zonecss.fr/faq/description-d-un-element.html#specifier-la-taille-d-un-element-grace-aux-feuilles-de-style-css

https://www.zonecss.fr/proprietes-css/box-sizing-css.html#WJwJqZ00000.codepen
*/
/*
body {font-family: Arial, Helvetica, sans-serif;
  padding: 0px;}
*/

input[type=text], textarea, input[type=email] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  margin-right: 0px;
  margin-left: 0px;
  resize: vertical;
}
label{margin-right: 0px;
  margin-left: 0px;
  width: 100%;}

input[type=submit] {
  background-color: #1255a2;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #1872D9;
}

/*------------------------------------------------------------------------------------------------------------ Fin formulaire --------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------ Lien --------------------------------------------------------------------------------------------------------------*/
/*
a {
	color: black;
	outline: none;
	/*	text-decoration: none
	padding: 2px 1px 0;
}


/*
a:link {
	color: black;
	outline: none;
	/*	text-decoration: none;	
	padding: 2px 1px 0;
}
*/
/*
a:visited {
	
}


/* Quand le visiteur sélectionne le lien */
/*
a:focus 
{
	color: black;
	font-weight: bold;
}



/* Quand le visiteur pointe sur le lien */
/*
a:hover 
{
	color: black;
}
*/


/* Quand le visiteur clique sur le lien */
/*
a:active
{
	color: black;
	background-color: rgb(248, 242, 239);
}
*/

.LienParagraphe {
	text-decoration: underline;
	color: black;
	outline: none;
	/*	text-decoration: none
	padding: 2px 1px 0;	*/
}

.LienParagraphe:hover {
	text-decoration: underline;
	color: red;
}

.LienAdresse {
	color: black;
	text-decoration: none;
}

.LienAdresse:hover {
	color: black;
	text-decoration: underline;
}

.LienMail {
	color: black;
	text-decoration: none
}

.LienMail:hover {
	color: black;
	text-decoration: underline
}


.LienTéléphone {
	color: black;
	text-decoration: none;
}

.LienTéléphone:hover {
	color: black;
	text-decoration: none;
	font-weight: bold;
}

.LienLogo {
	color: black;
	text-decoration: none;
}

.LogoRéseauSocial {
	width: 35px;
}

.LogoTransport {
	width: 20px;
}
/*
.navbar-nav > li > .dropdown-menu a:focus,
.navbar-nav > li > .dropdown-menu a:hover,
.navbar-nav > li > .dropdown-menu a:active
 { background-color: #FF0000; }
*/

/* fonctionne pour le hover, mais pas pour le active */

.navbar-nav > li > .dropdown-menu a:focus,
.navbar-nav > li > .dropdown-menu a:hover {
	background-color: rgb(226, 166, 145);
}
 
 
.activeDropdown {
	background-color: rgb(226, 166, 145);
	font-weight: bold;
}
/*------------------------------------------------------------------------------------------------------------ Fin Lien --------------------------------------------------------------------------------------------------------------*/

/*
.dropdown-menu > .dropdown-item a:active{
	background-color:red;
}

.dropdown-menu > .dropdown-item:active{
	background-color:red;
}


.dropdown-item:focus
.dropdown-item:hover
.dropdown-item:active
 {
	color: red;
	background-color: black;
}

 ul.dropdown-menu li:hover, ul.dropdown-menu li:active {
        background:red;
		color: black;
    }


ul.dropdown-item > li:hover > a, ul.dropdown-item > li.active > a{
        background:black;
    }
*/

/* active = lors du clic */
/*.dropdown-item:active a{
	background-color: rgb(248, 242, 239) !important;
	color: red;
}


a:visited {
  color: purple;
} /* Liens visités */

/*
nav .navbar-nav .dropdown-item:active a{
  color: white !important;
  }*/