@import url(accueil.css);
@import url(aPropos.css);
@import url(mesFormations.css);
@import url(accompagnements.css);
@import url(blog.css);
@import url(cgu.css);
@import url(mentionLegale.css);
@import url(popUp.css);
@import url(newsletter.css);
@import url(politiqueConfidentialité.css);
@import url(article.css);
@import url(commentaire.css);
@import url(pipiHorsLitiere.css);
@import url(chatAgressif.css);
@import url(cohabitationChat.css);




/* Générale */

*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
figure > img {
	width: 100%;
}
a{
	text-decoration: none;
}
:root{
	--mali:'Mali', cursive;
	--indie:'Indie Flower', cursive;
	--texturina: 'Texturina', serif;
	--arapey: 'Arapey', serif;
	--akaya: "Akaya Kanadaka", serif;
	--work: "Work Sans", sans-serif;
	--montserrat: "Montserrat Alternates", sans-serif;
	--merriweather: "Merriweather", serif;
	--roboto: "Roboto", sans-serif;
	--noir: #110D0C;
	--blanc: white;
	--bleu: #5b89a6;
	--bleuNuit: #B89982;
	--orange: #DA7B67;
	--saumon: #F0C59D;
	--beige: #e4ded8;
}
.titre {
    width: 100%;
	font-family: var(--merriweather);
	/* font-family: var(--texturina); */
	font-size: 4rem;
	text-align: center;
	padding: 3% 0;
}

/**************************************************** HEADER *************************************************************************/

/* Logo */

header {
	width: 100%;
	background-color: white;
}

header > figure {
	width: 50%;
	margin: 0px auto;
}

header > figure > a > img {
	width: 100%;
}

/* Nav */

header > nav {
	width: 100%;
	background-color: var(--bleu);
}
header > nav > #burger {
	width: 95%;
	height: 50px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin: 0 auto;
	padding-left: 0;
}
header > nav > #burger > li {
	list-style: none;
	font-family: var(--texturina);
	padding: .5%;
	width: max-content;
	text-align: center;
	font-size: 1.2rem;
}
header > nav > #burger > li:hover , 
header > nav > #burger > li:focus {
	background-color: #718c9d;
}
header > nav > #burger > li > a {
	color: white;
}
header > nav > #burger > #liGenant {
	position: relative;
}
header > nav > #burger > #liGenant > .sousNav {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	background-color: var(--bleu);
	list-style: none;
	margin: 0;
	padding: 5%;
	width: 150%;
}
header > nav > #burger > #liGenant:hover > .sousNav {
	display: block;
}
header > nav > #burger > #liGenant > .sousNav > li {
	text-align: center;
	padding: 5% 0;
}
header > nav > #burger > #liGenant > .sousNav > li:hover, header > nav > #burger > #liGenant > .sousNav > li:focus {
	background-color: #718c9d;
}
header > nav > #burger > #liGenant > .sousNav > li > a {
	color: var(--blanc);	
}
header > nav > #burger > #liPrevention {
	position: relative;
}
header > nav > #burger > #liPrevention > .sousNav {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	background-color: var(--bleu);
	list-style: none;
	margin: 0;
	padding: 5%;	
	width: 150%;
}
header > nav > #burger > #liPrevention:hover > .sousNav {
	display: block;
}
header > nav > #burger > #liPrevention > .sousNav > li {
	text-align: center;
	padding: 10% 0;
}
header > nav > #burger > #liPrevention > .sousNav > li:hover, header > nav > #burger > #liPrevention > .sousNav > li:focus {
	background-color: #718c9d;
}
header > nav > #burger > #liPrevention > .sousNav > li > a {
	color: var(--blanc);	
}
header > nav > figure > a[href="#burger"] > img , #burger > li:first-child {
  display: none;
}

/********************************************* Formulaire *********************************************************************************/

.labelHarmonichat {
	color: var(--orange);
	margin-left: 25%;
}
  
.inputHarmonichat {
	width: 50%;
	margin: 0 auto;
}

/********************************************* Bouton *********************************************************************************/


.boutonBO{
	background-color: var(--orange);
}
.boutonBO > a {
	color: white;
}
.boutonModif{
	background-color: var(--bleu);
}
.boutonModif > a {
	color: white;
}

/********************************************* Carrousel *********************************************************************************/

.carrousel {
	width: 30%;
	margin: 5% auto;
}
.carousel-item > img {
	width: 100%;
}

  
/********************************************* Contact *********************************************************************************/

#infoPratique {
	width: 100%;
}

#infoPratique > figure {
	width: 20%;
	margin: 0px auto;
}

#infoPratique > figure > figcaption {
    margin: 5%;
}
#infoPratique > figure > figcaption > h2 {
	color: gold;
	text-decoration: underline;
	text-align: center;
	font-family: 'Mali', cursive;
	font-size: 1.4rem;

}
#infoPratique > section {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 2% 0px;
}

#infoPratique > section > div {
	width: 33%;
	text-align: center;
}

#infoPratique > section > div > h3 {
	text-align: center;
	font-size: 2rem;
	color: #5b89a6;
	font-family: 'Indie Flower', cursive;
	margin: 5% 0px;
}

#horaires {
	display: flex;
	flex-direction: column;
	justify-content:center;
}

#horaires > table {
	width: 80%;
	margin: 0px auto;
}

#horaires > table > tbody > tr > th {
	float: left;
}
#horaires > table > tbody > tr > td {
	float: right;
}

#contact {
	display: flex;
	flex-direction: column;
}

#contact > p {
	width: 100%;
	margin: 2% 0px;
}

#contact > p > a {
	color: #5b89a6;
	margin-left: 1%;
}

#contact > #logoSociaux {
	display: flex;
	justify-content: center;
	margin: 2% 0px;
}

#contact > #logoSociaux > figure {
	width: 15%;
	margin: 0 5%;
}

#contact > #logoSociaux > figure > a > img {
	width: 100%;
}

#zoneInter > iframe {
	width: 80%
}

/* Déroulement accompagnement */
#deroulRDV > article {
    width: 80%;
    margin: 5% auto;
    padding: 5%;
}
#deroulRDV > article {
    background-color: var(--saumon);
}
#deroulRDV > article > .titre {
    font-size: 2.5rem;
}
#deroulRDV > article > h2 {
    font-family: var(--akaya);
}
#deroulRDV > article > h2:nth-of-type(3) { 
    margin-top: 2%;
}
#deroulRDV > article > p {
    font-family: var(--arapey);
}
#deroulRDV > article > ul {
    list-style: none;
    padding: 0;
}
#deroulRDV > article > ul > li {
    font-family: var(--arapey);
}
#deroulRDV > p {
    text-align: center;
}
/****************************************************** Footer ***************************************************************/

footer{
	text-align: center;
	background-color: #DA7B67;
	color: white;
	padding:5vh 0vw;
}

footer > p > a {
	color: var(--blanc);
}

.footerBO {
	width: 80%;
	margin: 5% auto;
}

.footerBO > ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	list-style: none;
	justify-content: space-around;
}

.footerBO > ul > li {
	text-align: center;
}

.footerBO > ul > li > a {
	text-decoration: none;	
}
/********************************************* Média query 768px ************************************************************************/
@media screen and ( max-width:1111px) {  
	#contact > p:nth-of-type(2){
		font-size: .8rem;
	}
}
@media screen and ( max-width:880px) {  

	#infoPratique > section {	
		flex-wrap: wrap;	
	}
	#infoPratique > section > div:nth-of-type(2) {
		width: 100%;
	}
	#infoPratique > section > div:nth-of-type(1),
	#infoPratique > section > div:nth-of-type(3) {
		width: 50%;
	}
	#contact{
		order:1;
	}
	#horaires{
		order: 2;
	}
	#zoneInter{
		order: 3;
	}
	#contact > #logoSociaux > figure{
		width: 10%;
	}
}
/* Limite des tablettes */ 
@media screen and ( max-width:768px) {  
	/* Gestion du lien MENU */
	header > nav {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		background-color: var(--blanc);
	}
	/* On affiche le lien burger */
	header > nav > figure {
		width: 15%;
		margin: 0 auto;
	}
	header > nav > figure > a[href="#burger"] > img {
		display: block;
	    width: 100%;
		margin: 0 auto;
	}
	/* Affichage du li X qui est le premier li du ul burger*/
	#burger > li:first-child {
	    display: block;
	}
	/* Gestion de burger */
	header > nav > #burger {
	    position: fixed;
		z-index: 2000000;
	    top: revert;
	    height: 80vh;
	    width: 100%;
	    background: var(--bleu);
	    display: flex;
	    flex-direction: column;justify-content: inherit;
	    align-items: center;
	}
	header > nav > #burger > li {
		width: 100%;
		padding-left: 20%;
		text-align: inherit;
		font-size: 1.5rem;
	}

	/* Quand le lien burger n'est pas cliqué ou on clique sur un autre lien de la page */
	header > nav > #burger:not(:target) {
		right: 100%;
		transition: right 1s ease-in-out;
	}
	
	/* Quand le lien burger est cliqué */
	header > nav > #burger:target {
		right: 0;
		transition: right 1s ease-in-out;
	}
	header > nav > #burger > #liGenant > .sousNav, header > nav > #burger > #liPrevention > .sousNav {
		position: static;
		display: block;
		width: 90%;
	}
	header > nav > #burger > #liGenant > .sousNav > li, header > nav > #burger > #liPrevention > .sousNav > li{
		padding: 0;
		padding-left: 5%;
		width: 100%;
		text-align: inherit;
		border-left: 1px white solid;

	}
	#contact > p:nth-of-type(2){
		font-size: 1rem;
	}
}

@media screen and ( max-width:712px) { #burger{top:9vh; height: 91vh;} }

@media screen and (max-width: 640px) {
    .titre {font-size: 3rem;}
}
@media screen and (max-width: 500px) {
	.carrousel {
		width: 80%;
	}
	#infoPratique > figure {
		width: 50%;
	}
}
@media screen and (max-width:414px) { /* Limite du galaxy fold */

	header {
		height: 15vh;
	}

	header > figure {
		width: 50%;
		margin: 0px auto;
	}	
	header > a[href="#burger"] {
		width: 20%;
		margin: 0 auto;
		text-transform: uppercase;
		font-size: .8rem;
		text-align: center;
	}
	#burger {
	    position: fixed;
	    top: 10vh;
	    height: 90vh;
	    width: 100%;
	    background-color: #5B89A6;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
		padding: 0;
  	}
	header > nav > #burger > li {
		font-size: .7rem;
	}
	header > nav ul > li {
		width: 100%;
	}
	#infoPratique > figure {
		width: 50%;
	}
	#infoPratique > figure > figcaption > h2 {
		font-size: .7rem;
	}
	#infoPratique > section {		
		flex-direction: column;
	}
	#infoPratique > section > div {
		width: 100%;
		font-size: .7rem;
	}
	#infoPratique > section > div:nth-of-type(1),
	#infoPratique > section > div:nth-of-type(3){
		width: 100%;
	}
	#contact > p {
		font-size: .9rem;
	}
	#contact > p:nth-of-type(2){
		font-size: .8rem;
	}
	footer {
		font-size: .5rem;
	}
}


@media screen and ( max-width:375px) { 

	#contact > p {font-size: .8rem;}
	#contact > p:nth-of-type(3){font-size: .4rem;text-align: center;}
}

@media screen and ( max-width:320px) { 

	#contact > p {
		font-size: .6rem;
	}
	#contact > p:nth-of-type(2){
		font-size: .6rem;
	}
}

@media screen and ( max-width:280px) { 
	#burger {
	    top: 6vh;
	    height: 50vh;
  	}
	.titre {font-size: 1.3rem;}
	
	#infoPratique > figure {
		width: 50%;
	}
	#infoPratique > figure > figcaption > h2 {
		font-size: .5rem;
	}
	#infoPratique > section {		
		flex-direction: column;
	}
	#infoPratique > section > div {
		width: 100%;
		font-size: .5rem;
	}
	#infoPratique > section > div:nth-of-type(1),
	#infoPratique > section > div:nth-of-type(3){
		width: 100%;
	}
	footer {
		font-size: .5rem;
	}
}


/************************************** Média query *************************************/
@media screen and (max-width: 2560px) {
	.titre {font-size: 6rem;}
}
@media screen and (max-width: 1440px) {
	.titre {font-size: 3rem;}
}
@media screen and (max-width: 1280px) {
	.titre {font-size: 3.5rem;}
}
@media screen and (max-width: 1024px) {
	.titre {font-size: 3.2rem;}
}
@media screen and (max-width: 820px) {
	.titre {font-size: 3rem;}
}
@media screen and (max-width: 768px) {
	.titre {font-size: 2.7rem;}
}
@media screen and (max-width: 732px) {
	.titre {font-size: 2.5rem;}
}
@media screen and (max-width: 640px) {
	.titre {font-size: 2.3rem;}
}
@media screen and (max-width: 533px) {
	.titre {font-size: 2.1rem;}
} 
@media screen and (max-width: 414px) {
	.titre {font-size: 2rem;}
}
@media screen and (max-width: 375px) {
	.titre {font-size: 1.9rem;}
}
@media screen and (max-width: 360px) {
	.titre {font-size: 1.7rem;}
}
@media screen and (max-width: 320px) {
	.titre {font-size: 1.5rem;}
}
@media screen and (max-width: 280px) {
	.titre {font-size: 1.3rem;}
}