/* CSS Document */
/*MIN-WIDTH*/
/*X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	#equipe .infirmier:nth-child(2n+1) .equipe-portrait{
		order: 2;
	}

	#equipe .infirmier:nth-child(2n+1) .equipe-txt{
		order: 1;
	}

	#equipe .infirmier:nth-child(2n+1) .equipe-txt .zone-verte{
		order: 1;
	}

	#equipe .infirmier:nth-child(2n+1) .equipe-txt .paragraphe-gris{
		order: 2;
	}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
		#equipe .infirmier:nth-child(2n+1) .equipe-txt .zone-verte{
		order: 2;
	}

	#equipe .infirmier:nth-child(2n+1) .equipe-txt .paragraphe-gris{
		order: 1;
	}
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
}


/*GLE*/
.retour{
	clear: both;
}

img{
	display: block;
	} /*Occupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils sont positionnés (par défaut) l'un sous l'autre.*/

body{
	font-family: "Roboto Slab";
	color: #707070;
	margin-top : 68px;
	overflow-x: hidden; /*supprime l'ascenseur horizontal dû à AOS*/
}

p{
	font-size: 18px;
	margin-bottom: 0px;
	text-align: justify;
}

/*-------------------------HEADER-------------------------*/
.coordonnees{
	line-height: 20px;
	text-align: center;
}
.navbar-light .navbar-nav .nav-link {
    color: #ffffff;
	font-size:18px;
	text-align: center;
	line-height: 18px;
}

#menu-equipe{
	background: #CF4854;
}

#menu-soin{
	background: #6EBFB5;
}

#menu-secteur{
	background: #3D9A80;
}

#menu-info{
	background: #218370;
}

#menu-contact{
	background: #00795A;
}

.navbar-nav li{
	width: 130px;
	display : flex;
	align-items : center;
}

.navbar-nav li a{
	width: 100%;
	text-align : center;
	position: relative;
}

.navbar-nav a:after {    
  background: none repeat scroll 0 0 transparent #fff;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
transform: translateX(-50%);
}

a:hover:after{ 
  width: 50%; 
}

header{
	box-shadow: 0px 15px 10px -15px #111; 
	position : fixed;
	top : 0;
	width: 100%;
	background-color: #ffffff;
	opacity: 0.95;
	z-index: 3;
  }

header p{
	text-align : left;
}

.sticky-top{
	padding: 0px;
}

/*-------------------------NAV----------------------------*/
/*-------------------------MAIN---------------------------*/
/*-------------------------PRESENTATION---------------------------*/
h1{
	font-size: 50px;
	text-align: center;
	padding: 20px 0px;
}

#presentation h2{
	font-size: 35px;
	text-align: center;
	font-weight: bold;
	margin-top: 0px;
}

#presentation h3{
	font-size: 25px;
	text-align: center;
}

#presentation p{
	text-align: center;
	font-size : 20px;
}

#presentation-bas{
	margin-top: -25px;
}

#presentation-bas2{
	display : none;
}

.paragraphe-gris{
	padding : 20px;
}
 
.presentation_logo{
    position: relative;
    overflow: hidden;
}
#presentation {
    padding: 50px 0px;
    position: relative;
    z-index: 2;
}
/* You could use :after - it doesn't really matter */
.presentation_logo:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 18px;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    background-image: url("images/logo-web.png");
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 10%;
}

/*-------------------------EQUIPE---------------------------*/
h2{
	font-size: 45px;
	margin-top: 68px;
}

#equipe h2:after{
	content: "";
	display: inline-block;
	background: #6EBFB5;
	height: 12px;
	width: 40%;
	margin-left: 10px;
}

#equipe h3{
	font-size: 28px;
}

#equipe h3:after {
    content: "";
    display: inline-block;
    background: #D04854;
    height: 16px;
    width: 100%;
}

.zone-verte{
	color : white;
	background-color: #00795A;
	margin-top : 25px;
	margin-bottom : 25px;
	padding-top : 20px;
	padding-bottom: 20px;
}

#equipe p{
	text-align: left;
}


.portrait-inf{
	-webkit-box-shadow: 18px 20px 17px -15px #111; 
	box-shadow: 18px 20px 17px -15px #111;
	max-width: 90%;
}

#equipe .infirmier .equipe-txt h3{
	text-align: right;
}

#equipe .infirmier:nth-child(2n+1) .portrait-inf{
	display: block;
	margin-left: auto;
}

/*-------------------------SOIN---------------------------*/
#soin h2:after{
	content: "";
	display: inline-block;
	background: #CF4854;
	height: 12px;
	width: 40%;
	margin-left: 10px;
}

#soin p{
	text-align: center;
	width: 100%;
	margin: auto;
	padding: 10px;
}

#soin .quadri{
	margin-bottom : 15px;
	height: 150px;
}

/*la > ci-dessous permet de cibler uniquement la première div contenue dans #soin .col-3 sans faire hériter les propriétés désirées à ses enfants*/
#soin .quadri>div{
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
	position: relative;
}

#soin p:first-child{
	position: absolute;
	opacity : 1;
}

#soin p:last-child{
	position: absolute;
	opacity: 0;
}

#soin .quadri >div:hover p:first-child{
 	opacity: 0;
}

#soin .quadri >div:hover p:last-child{
 	opacity: 1;
}

#soin .quadri >div:hover{
 	cursor: pointer;
	transform: translateY(-0.25em);
    box-shadow: 0 0 0.5em 0em;
	transition: all 0.4s ease-out;
}

#soin .contour-rose{
	border : solid #CF4854;
	color : #CF4854;
}

#soin .contour-vert-1{
	border : solid #6EBFB5;
	color :#6EBFB5;
}

#soin .contour-vert-2{
	border : solid #3D9A80;	
	color : #3D9A80;
}

#soin .contour-vert-3{
	border : solid #218370;	
	color : #218370;	
}

#soin .contour-vert-4{
	border: solid #00795A;	
	color : #00795A;
}

#soin .fond-rose{
	background-color: #CF4854;
}

#soin .fond-vert-1{
	background-color: #6EBFB5;
}

#soin .fond-vert-2{
	background-color: #3D9A80;
}

#soin .fond-vert-3{
	background-color: #218370;
}

#soin .fond-vert-4{
	background-color: #00795A;
}

.soin-picto-1{
	width : 100%;
	height: 90%;
}

.soin-picto-2{
	width : 100%;
	height: 90%;
}

.soin-picto-3{
	width : 100%;
	height: 90%;	
}

.soin-picto-4{
	width : 100%;
	height: 90%;
}

.texte-reduit{
	font-size : 15px;
	line-height: 120%;
}
/*-------------------------SECTEUR-------------------------*/
#secteur h2:after{
	content: "";
	display: inline-block;
	background: #6EBFB5;
	height: 12px;
	width: 40%;
	margin-left: 10px;
}

#secteur .zone-verte{
	margin-top: 0px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: justify;
}

#secteur p{
	padding : 0px 20px;
}

/*-------------------------INFOS PRATIQUES-------------------------*/
#info h2:after{
	content: "";
	display: inline-block;
	background: #CF4854;
	height: 12px;
	width: 40%;
	margin-left: 10px;
}

#info .col-4 p{
	text-align : center;
	padding: 0px;
	margin-top : 10px;
}

.rectangle-rose-gauche-2{
	padding-top : 58px;
	margin-left : -10px;
}

.sous-col1{
	height:90px;
	display : flex;
}

#info img{
	display: flex;
	align-items: center;
	width:50%;
	margin: auto;

}

.cartes{
	margin: auto;
}
/*-------------------------CONTACT-------------------------*/
#contact a{
	color: white;
}

#contact h2:after{
	content: "";
	display: inline-block;
	background: #6EBFB5;
	height: 12px;
	width: 33%;
	margin-left: 10px;
}

#contact-fond-vert{
	background-color: #00795A;	
	padding: 35px 35px 50px 35px;
	color : #ffffff;
}

#contact-fond-vert .col-11{
	align-items: center;
	display: flex;
}

#contact-fond-vert p{
	padding-left : 10px;
}

.picto-coord{
	width : 100%;
	margin: 5px 0px;
}

#contact .col-1{
	padding: 0px;
}

#contact .col-12 p{
	padding-top : 15px;
	padding-left: 15px;
	text-align: left;
}

#contact .picto-coord-gauche{
	position: relative;
	border-radius: 50%;
	border: #CF4854 5px solid;
	height: 150px;
	width: 150px;
	left: 25%;
}

#contact .texte-picto-coord-gauche{
	color: #707070;
	font-size: 24px;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 10%;
	transform: translateX(-50%);
}

#contact .picto-coord-droite{
	float : left;
}

/*-------------------------FOOTER-------------------------*/
.footer-fond-rose{
	background-color: #CF4854;
	color : #ffffff;
	margin-top: 40px;
}
.footer-fond-rose p{
	font-size : 15px;
	padding: 10px;
	text-align: center;
}

#footer-bas p{
	text-align: center;
	font-size : 15px;
	padding : 30px 0px;
}
/*-------------------------RESPONSIVE---------------------*/
/*X-Small devices (portrait phones, less than 576px)*/
/* No media query for `xs` since this is the default in Bootstrap*/

/*xxl applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399px) { 
}

/*xl applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199px) { 
}

/*lg applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991px) { 
	.navbar-nav li {
    width: 100%;
	}
	
	#presentation img{
		height: 80px;
	}
	
	h1 {
    	font-size: 41px;
	}
	
	#presentation-bas {
    margin-top: -10px;
	}
	
	#presentation h2 {
    	font-size: 32px;
	}
	
	#presentation h3 {
    	font-size: 18px;
	}
	
	#presentation p {
    	font-size: 18px;
	}
	
	h2 {
    	font-size: 28px;
	}	
	
	h3 {
    	font-size: 24px;
	}
	
	p{
		font-size: 15px;
	}
	
	.texte-reduit{
		font-size: 13px;
	}

/*EQUIPE*/
	#equipe .zone-verte{
		margin:0 12px;
		padding: 20px 12px;
	}
	
/*SECTEUR*/
	#secteur p {
		text-align: left;
	}
	
/*CONTACT*/
	#contact .picto-coord-gauche {
    left: 8%;
	}
	
/*FOOTER*/
	.footer-fond-rose p {
		font-size: 10px;
	}
	
	#footer-bas p {
    font-size: 12px;
    padding: 15px 0px;
}
}

/*md applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767px) { 
	.presentation-haut{
		display: none;
	}

	#presentation-bas2{
		display: block;
		margin-top : 20px;
	}
	
	h1{
		font-size: 21px;
	}
	
	h2{
		font-size: 21px;
	}
	
	#presentation h2{
		color: #00795A;
		font-size: 28px;
	}
	
	#presentation-bas {
    	margin-top: 10px;
	}
	
	#equipe h3 {
    	font-size: 18px;
	}
	
	#secteur .zone-verte {
    	margin-top: 10px;
    	margin-bottom: 10px;
	}
	
	#info .col-lg-5 col-md-12{
		margin-top: 15px;
	}
	
	#info .sous-col2{
		margin-bottom: 15px;
	}
	
	.picto-coord-gauche, .picto-coord-droit{
		height: 100px;
		margin-top:20px;
	}
	
	#contact .picto-coord-gauche {
    border: #CF4854 2px solid;
    height: 100px;
    width: 100px;
    left: 50%;
	}
	
	#contact .texte-picto-coord-gauche {
    font-size: 17px;
	}	
}	

/*sm applies to x-small devices (portrait phones, less than 576px)*/
@media screen and (max-width: 575px) { 
	
	#equipe .portrait-inf {
    	height: 150px;
	    margin-bottom: 25px;
	}
	
	#presentation h2 {
    font-size: 24px;
	}
	
	h2 {
    margin-top: 20px;
	}
	
	#equipe h2::after,
	#soin h2::after,
	#secteur h2::after,
	#info h2::after,
	#contact h2::after{
    display: block;
    margin-left: 0px;
	margin-top : 4px;
	height: 5px;
	}
	
	#equipe h3:after{
	height: 10px;
	}
	
	h1{
		background-color: #00795A;
		color: white;
	}
	
	#presentation {
    padding: 70px 0px;
	}
	
	.texte-reduit{
	font-size : 15px;
	line-height: 120%;
	}
}

/*xs` returns only a ruleset and no media query*/