@charset "utf-8";

/* www.alexandre.cc */

*{
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
	outline: none;
	font-family: "Fira Sans", sans-serif;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
	text-align: inherit;
	line-height: inherit;
	color: inherit;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: none;
}

html, body{
	width: 100%;
	min-height: 100%;
	font-size: 62.5%;
	display: flex;
	background: #fff;
}

img{ max-width: 100%;}

a, button{ color: #D3968A; cursor: pointer;}
a:hover{ color: #333854;}

::selection{ background: #333854; color: #D3968A;}
::-moz-selection{ background: #333854; color: #D3968A;}

input{ -webkit-appearance: none;}






/* HEADER */

header{
	display: flex;
	flex-direction: column;
}

header #logo{
	z-index: 2;
	position: fixed;
	left: 50%;
	top: 0;
	margin: 0 0 0 -960px;
	width: 260px;
	padding: 80px 40px 40px 80px;
}
body.scroll header #logo{
	width: 120px;
	padding: 30px 20px 30px 20px;
	margin-left: -870px;
}

header nav{
	top: 20px;
	left: 20px;
	z-index: 0;
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100vw;
	width: calc(100vw - 40px);
	height: 100vh;
	height: calc(100vh - 40px);
	background: #fff;
	opacity: 0;
}
header.flex nav{
	z-index: 10;
	opacity: 1;
}

header nav a,
header nav p.avec-sous{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 6vh;
	font-weight: 600;
	font-size: 3.6rem;
	line-height: 6vh;
	text-align: center;
	color: #333854;
	cursor: pointer;
}
header nav a#home{ margin: auto auto 0;}
header nav a:hover,
header nav a.actif,
header nav p.avec-sous:hover,
header nav p.actif,
header nav p.rose{
	color: #D3968A;
	border: none;
}
header nav p.avec-sous{
	height: auto;
}
header nav .double{
	display: none;
	flex-direction: row;
	justify-content: center;
}
header nav .actif .double,
header nav .double-flex{
	display: flex;
	color: #D3968A;
}
header nav .double a,
header nav .double span{
	width: auto;
	height: 3vh;
	line-height: 1vh;
	padding: 0 10px;
	font-size: 1.8rem;
	text-transform: uppercase;
}
header nav .double span{
	padding: 0;
	color: #333854;
}

header nav #contacter{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto auto 6vh;
	padding: 30px 50px;
	background: #FBF4F3
}
header nav #contacter span.h2{
	margin: 0 auto;
	font-weight: 600;
	font-size: 2.8rem;
}
header nav #contacter span.h2::after{
	display: flex;
	content: "";
	margin: 20px auto;
	width: 32px;
	height: 4px;
	background: #e9cbc5;
}
header nav #contacter p{
	margin: 0 auto;
	font-size: 1.8rem;
	line-height: 3.2rem;
}
header nav #contacter p.coordonnees{
	display: flex;
	width: 100%;
	justify-content: center;
}
header nav #contacter p.coordonnees{
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 3.2rem;
}
header nav #contacter p.coordonnees a{
	width: auto;
	font-size: 1.8rem;
	font-weight: 600;
	padding-left: 5px;
	height: auto;
	line-height: 3.2rem;
}


/* BURGER*/

#burger{
	z-index: 10;
	top: 0;
	right: 50%;
	margin: 0 -1000px 0 0;
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100px;
	height: 100px;
	padding: 2px 38px 0 32px;
}
.ouvrir{ background: #fff;}
.ouvrir:hover,
.fermer{ background: #E9CBC5;}
.fermer:hover{ background: #D3968A;}

button span{
	width: 30px;
	height: 4px;
	margin: auto auto 5px;
}
button span.deux{ margin-top: 0;}
button span.trois{ margin: 0 auto auto;}

button.ouvrir:hover span{
	width: 26px;
	height: 5px;
	-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
button.ouvrir:hover span.deux{
	margin: -9px auto auto;
	-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

button.ouvrir:hover span.trois,
button.fermer span.trois{ display: none;}

button.fermer span{
	-ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}

button.fermer span.deux{
	margin: -9px auto auto;
	-ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg);
}

button.ouvrir span,
button.fermer span{ background: #333854;}

#burger strong{
	top: 0;
	position: fixed;
	width: 100px;
	height: 80px;
	margin: 20px 0 0 -132px;
	color: #fff;
	line-height: 64px;
	font-weight: 600;
	font-size: 1.8rem;
	text-align: center;
	text-transform: uppercase;
	background: #333854;
}
body.home #burger strong{ background: none;}
body.scroll #burger strong{ background: #333854;}
header.flex #burger strong,
body.scroll header #burger strong,
body.scroll header.flex #burger strong{
	margin-top: 0;
	height: 100px;
	line-height: 100px;
}





/* FOOTER */

footer{
	z-index: 9;
	position: relative;
	display: flex;
	justify-content: center;
	left: -20px;
	bottom: 0;
	width: 100vw;
	height: 50px;
	background: #fff;
}
footer p{
	margin: auto;
	font-size: 1.6rem;
	font-weight: 400;
}
footer p a{
	color: #333854;
	border-bottom: 1px solid #fff;
}
footer p a:hover{
	color: #D3968A;
	border-bottom: 1px solid #D3968A;
}
footer p span{
	margin: auto 8px;
}

footer a#alexandre{
	display: flex;
	justify-content: center;
	position: absolute;
	right: 20px;
	bottom: 0;
	width: 50px;
	height: 50px;
	opacity: 0.33;
}
footer a#alexandre:hover{ opacity: 1;}
footer a#alexandre img{
	margin: auto;
	width: 24px;
}



/* BORDURES */

#bordures{
	z-index: 9;
	position: fixed;
}
#bordures div{
	top: 0;
	left: 50vw;
	margin: 0 0 0 -1000px;
	position: fixed;
	width: 100vw;
	max-width: 2000px;
	height: 20px;
	background: #fff;
}
#bordures div.rose{
	background: #FBF4F3;
}
#bordures div#bottom{ top: auto; bottom: 0;}
#bordures div#left,
#bordures div#right{
	width: 20px;
	height: 100vh;
}
#bordures div#right{
	left: auto;
	right: 50%;
	margin: 0 -1000px 0 0;
}


/* CONTENT */

section#content{
	margin: 0 auto;
	width: 100%;
	padding: 20px 20px 0;
	font-weight: 300;
	font-size: 1.8rem;
	line-height: 2.6rem;
	color: #333854;
	text-align: left;
	background: rgba(255, 255, 255, 0.55);
	overflow: hidden;
}
section#content, header{ max-width: 2000px;}
body.home section#content{ padding: 0;}

section.content{
	padding: 20px;
}







/* ACCUEIL */

section#accueil{
	z-index: 1;
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	background: #333854;
}

section#accueil article{
	display: flex;
	width: 23%;
	height: 100vh;
	padding-bottom: 40px;
}
section#accueil article#introduction{
	display: flex;
	flex-direction: column;
	width: 31%;
	min-width: 560px;
	padding: 200px 40px 40px;
	color: #fff;
}

section#accueil article#introduction h1{
	margin: auto 0 0;
	font-weight: 600;
	font-style: italic;
	font-size: 3.2rem;
	line-height: 4.2rem;
}
section#accueil article#introduction .sous-titre{
	margin: 5px 0 60px;
	font-style: italic;
	font-size: 1.85rem;
	line-height: 2.6rem;
	color: #dba89d;
}

section#accueil article#introduction p{
	font-size: 1.7rem;
	line-height: 2.6rem;
	padding-bottom: 2.6rem;
}
section#accueil article#introduction h2{
	font-size: 2.1rem;
	font-weight: 700;
	padding: 1.4rem 0;
}
section#accueil article#introduction p a{
	margin: 1.4rem 0 2.8rem;
}

section#accueil article div{
	display: flex;
	flex-direction: column;
	margin: 0;
	width: 100%;
	height: 100%;
	padding: 20px 30px 40px;
    background: linear-gradient(rgba(51, 56, 84, 0) 0%, rgba(51, 56, 84, 0) 50%, rgba(51, 56, 84, 0.46) 80%, rgba(51, 56, 84, 0.46) 100%);
}
section#accueil article:hover div{ background: linear-gradient(rgba(51, 56, 84, 0) 0%, rgba(51, 56, 84, 0.33) 40%, rgba(51, 56, 84, 0.95) 66%, rgba(51, 56, 84, 0.95) 100%);}
section#accueil article div h2{
	width: 100%;
	margin: auto 0 40px;
	font-weight: 700;
	font-size: 2.6rem;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}
section#accueil article:hover div h2{
	color: #E9CBC5;
}
section#accueil article div p{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	height: 0;
	margin-bottom: 0;
	color: #fff;
	font-size: 1.6rem;
	line-height: 2.4rem;
	overflow: hidden;
}
section#accueil article:hover div p{
	height: auto;
	margin: 0 0 2.4rem;
}
section#accueil article div p a{
	margin: 20px auto 0;
}
section#accueil article:hover div p a{
	color: #E9CBC5;
	border-color: #E9CBC5;
}
section#accueil article div p a:hover{
	color: #fff;
	background: #E9CBC5;
	border-color: #E9CBC5;
}



/* PAGE */

body.page{
	background: rgba(51, 56, 84, 0.07);
}

section#entete{
	z-index: 1;
	position: relative;
	display: flex;
	width: 100%;
	height: 100vh;
	padding: 150px 0 0;
	color: #fff;
	background: #333854;
}

div.contenu{
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
}
div.contenu-moyen{ max-width: 920px;}

div.contenu-photo{
	display: flex;flex-direction: column;
	max-width: 1620px;
	height: 75vh;
	height: calc(65vh - 150px);
}
body.seminaires section#entete div.contenu-photo{ background-position: bottom center;}

section#entete div.contenu-photo .titre{
	display: flex;
	flex-direction: column;
	min-height: 37vh;
	width: 100%;
	margin: auto 0 0;
	padding-bottom: 5vh;
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 76.03%, rgba(0, 0, 0, 0.5) 100%);
}
section#entete div.contenu-photo p.sur-titre{
	display: flex;
	margin: auto auto 0;
	font-weight: 700;
	font-size: 2.4rem;
	letter-spacing: 0.1em;
	text-align: center;
	color: #E9CBC5;
	text-transform: uppercase;
}
section#entete div.contenu-photo p.sur-titre::before,
section#entete div.contenu-photo p.sur-titre::after{
	content: "";
	width: 28px;
	height: 4px;
	margin: auto 20px;
	background: #E9CBC5;
}
section#entete div.contenu-photo h1{
	margin: 20px auto 5vh;
	font-weight: 600;
	font-style: italic;
	font-size: 4.8rem;
	line-height: 5.6rem;
	text-align: center;
}
section#entete div.contenu-photo h1.pas-de-sur-titre{ margin-top: auto;}
section#entete div.contenu-photo p.sous-titre{
	display: flex;
	margin: -30px auto 0;
	font-size: 2.1rem;
	line-height: 3.2rem;
	text-align: center;
}



section#entete .contenu{
	display: flex;
	justify-content: space-between;
	margin: 0 auto auto;
}
section#entete .titre-large{
	width: 45%;
	padding: 12vh 0;
}
body.presentation section#entete .titre-large{
	flex-grow: 1;
	width: 100%;
	padding: 15vh 0 10vh;
	background: rgba(51, 56, 84, 0.33);
}
section#entete .titre-large h1,
body.presentation section#entete .titre-large h1{
	font-weight: 600;
	font-size: 9rem;
	line-height: 8rem;
}
body.presentation section#entete .titre-large h1{
	font-style: normal;
	text-align: center;
}
section#entete .titre-large h1::after{
	display: flex;
	content: "";
	margin: 20px auto 20px 0;
	width: 32px;
	height: 4px;
	background: #d3968a;
}
body.presentation section#entete .titre-large h1::after{ margin-left: auto;}

section#entete .titre-large p{
	font-size: 2.4rem;
	line-height: 4rem;
}
body.presentation section#entete .titre-large p{ text-align: center;}

section#entete #photo{
	width: 45%;
	height: auto;
	min-height: 30vw;
	margin: 0 0 0 auto;
}

section#page{
	z-index: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: -35vh auto 8vh;
	width: 90%;
	max-width: 1620px;
	background: #fff;
	box-shadow: 0px 0px 50px rgba(48, 51, 77, 0.13);
}

body.presentation section#page{
 	margin-top: calc(-100vh + 70vh) !important;
}

section#page .rose{ background: #F8EFEE;}
section#page .rose-clair{ background: #FBF4F3;}

section#page .contenu{ margin: 80px auto 50px;}
section#page .center{ text-align: center;}
section#page .temoignages{ min-height: 25vh;}


section#page h2{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	font-weight: 600;
	font-size: 3.2rem;
	line-height: 5.6rem;
	text-align: center;
	color: #333854;
}
section#page h2::after{
	content: "";
	display: flex;
	margin: 20px auto 30px;
	width: 32px;
	height: 4px;
	background: #e9cbc5;
}
section#page .rose h2::after{ background: #D3968A;}
section#page p{
	line-height: 2.8rem;
	padding-bottom: 2.8rem;
}
section#page p a{
	color: #333854;
	padding-bottom: 2px;
	border-bottom: 2px solid #E9CBC5;
}
section#page p a:hover{
	color: #D3968A;
}

section#page strong{ font-weight: 600;}

section#page p.portrait{
	display: flex;
	justify-content: center;
}
section#page p.portrait img{
	margin: 0 auto 20px;
	width: 100%;
	max-width: 400px;
}

section#page ul{
	display: flex;
	flex-direction: column;
	padding: 0 0 2.6rem 50px;
}
section#page ul li{
	margin-left: -25px;
	list-style: disc;
	line-height: 3rem;
	padding: 0 0 0.6rem 0.6rem;
}

section#page .ombre{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	margin-bottom: 40px;
	padding: 60px;
	background: #fff;
	box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.08);
}
section#page .ombre img{
	margin: auto auto 40px;
}

section#page blockquote{
	margin: 40px auto;
	padding: 40px 100px;
	background: #F8EFEE;
}
section#page blockquote p{
	padding: 0;
	font-weight: 400;
	font-style: italic;
	font-size: 2.2rem;
	line-height: 3rem;
	text-align: center;
	color: #d3968a;
}

section#page .photos-apres{ padding-bottom: 7.5vw;}
section#page .photos-debut{ padding-top: 0;}

section#page .photos{
	display: flex;
	justify-content: space-between;
	width: 93%;
	margin: -7.5vw auto 0;
}
section#page .photos div{
	width: 28%;
	height: 15vw;
	margin: auto;
}

section#page .float-apres{ padding-bottom: 200px;}

section#page .float{
	display: flex;
	flex-direction: row;
	padding: 0;
	height: 360px;
	margin-top: -180px;
}
section#page .float .photo{
	width: 25%;
	height: auto;
	margin: 0;
}
section#page .float .textes{
	margin: auto 0;
	width: 75%;
	padding: 0 40px;
	text-align: left;
	font-style: italic;
}
section#page .float .textes a{
	color: #D3968A;
	font-weight: 500;
	border-bottom-color: #fff;
	background: none;
}
section#page .float .textes a:hover{
	color: #DEB0A7;
	border-bottom-color: #E9CBC5;
}


/* RÉFÉRENCES */

section#references{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
section#references img{
	height: 8vw;
	max-height: 120px;
	margin: auto 20px;
}


/* TÉMOIGNAGES */

section#temoignages{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
}
section#temoignages article{
	display: flex;
	flex-direction: column;
	margin: 0 auto 40px;
	width: 45%;
	padding: 40px 3vw;
	text-align: left;
	border-radius: 12px;
	background: #fff;
}

section#temoignages article strong{
	width: 100%;
	font-weight: 600;
	font-size: 2.1rem;
	line-height: 3rem;
}
section#temoignages article em{
	width: 100%;
	font-size: 1.8rem;
	line-height: 3.2rem;
}
section#temoignages article p{
	width: 100%;
	padding: 2.1rem 0 0;
	font-style: italic;
	font-size: 1.4rem;
	line-height: 2.6rem;
}


/* LIENS */


section#liens{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
section#liens .lien{
	margin: 0 0.5vw 40px;
	width: 12vw;
	text-align: center;
}
section#liens .lien,
section#liens .lien a{
	display: flex;
	flex-direction: column;
	font-size: 1.8rem;
	font-weight: 500;
	color: #333854;
}
section#liens .lien a:hover{ color: #E9CBC5;}

section#liens .lien .image{
	width: 7vw;
	height: 7vw;
	margin: 0 auto 20px;
	border-radius: 5vw;
	background: #F4E5E2;
}
section#liens .lien .image div{
	width: 7vw;
	height: 7vw;
	border-radius: 5vw;
}
section#liens .lien:hover .image div{ opacity: 0.25;}



/* ACTUALITES */

section#actualites{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
}
section#actualites article{
	display: flex;
	flex-direction: column;
	margin: 0 auto 40px;
	width: 45%;
	padding: 50px 3vw;
	text-align: left;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
}
section#actualites article h3{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: 2.1rem;
	text-transform: uppercase;
	font-size: 2.1rem;
	line-height: 2.8rem;
	font-weight: 600;
}
section#actualites article h3::after{
	content: "";
	margin: 18px auto 15px 0;
	width: 24px;
	height: 4px;
	background: #333854;
}
section#actualites article p{
	font-size: 1.6rem;
	line-height: 2.4rem;
}
section#actualites article p a{
	color: #333854;
	border-bottom: 2px solid #E9CBC5;
}



/* CONTACT */

body.contact form{
	display: flex;
	flex-direction: column;
	width: 100%;
}

body.contact form input,
body.contact form textarea{
	max-width: 600px;
	margin: 0 auto 20px;
	width: 100%;
	height: 56px;
	line-height: 56px;
	padding:  0 28px;
	text-align: left;
	background: #fff;
	border-radius: 4px;
}
body.contact form input:hover,
body.contact form textarea:hover,
body.contact form input:focus,
body.contact form textarea:focus{
	font-weight: 400;
}
body.contact form textarea{
	min-height: 200px;
}
body.contact form input.rouge,
body.contact form textarea.rouge{
	color: #d23a22;
	font-weight: 400;
	border: 1px solid rgba(210, 58, 34, 0.33);
}
body.contact form input.rouge:hover,
body.contact form textarea.rouge:hover{ border: 1px solid rgba(210, 58, 34, 0.8);}
body.contact form input[type="submit"]{
	height: 64px;
	line-height: 64px;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	text-align: center;
	background: #333854;

}
body.contact form input[type="submit"]:hover{
	background: #D3968A;
	cursor: pointer;
}

body.contact #message div{
	margin: 0 auto 50px;
	padding: 30px;
	width: 100%;
	max-width: 600px;
	font-weight: 400;
	color: #fff;
	border-radius: 4px;
}
body.contact #message #erreur{ background: #d23a22;}
body.contact #message #ok{ background: #95bd61;}


/* GÉNÉRALES */


.bouton button,
section#accueil article#introduction p a,
section#accueil article div p a{
	display: inline-block;
	height: 60px;
	line-height: 60px;
	padding: 0 30px;
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	color: #d3968a;
	text-transform: uppercase;
	border-radius: 30px;
	border: 1px solid rgba(211, 150, 138, 0.5);
}
.bouton:hover button,
section#accueil article#introduction p a:hover,
section#accueil article div p a:hover{
	color: #fff;
	background: #E9CBC5;
	border-color: #E9CBC5;
}

.background-cover{
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	-webkit-background-size:cover;
}



/* ANIMATION */

a, button, button span, input,
header nav,

section#accueil article div,
section#accueil article p,
section#accueil article h2,
section#liens .lien .image div,

.t50{-webkit-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);-moz-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); -ms-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);}






/* MAX-WIDTH */

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

	header #logo{
		margin: 0;
		left: 0;
		top: 0;
	}
	body.scroll header #logo{ margin-left: 90px;}

	#bordures div{
		top: 0;
		left: 0;
		margin: 0;
	}
	#bordures div#right{ left: auto; right: 0; margin: 0;}
	#burger{ right: 0; margin: 0;}

	body.presentation section#page{ margin-top: calc(-100vh + 65vh) !important;}
}
@media only screen and (max-width : 1799px) {

}
@media only screen and (max-width : 1699px) {

	section#accueil article#introduction p { line-height: 2.6rem; padding-bottom: 2.6rem;}
}
@media only screen and (max-width : 1599px) {

	html, body{ font-size:62%;}

	body.home header #logo{ width: 250px; padding: 60px 60px 40px 60px;}
	section#accueil article#introduction h1{ font-size: 3rem; line-height: 3.6rem;}
	section#accueil article#introduction .sous-titre { font-size: 1.7rem; line-height: 2.4rem; margin-bottom: 30px;}
	section#accueil article#introduction { padding-left: 30px; padding-right: 30px;}
	section#accueil article#introduction h2 { font-size: 2rem; padding-top: 1rem;}
	section#accueil article#introduction p { font-size: 1.7rem; line-height: 2.4rem; padding-bottom: 2.4rem;}

	section#accueil article div { padding-left: 20px; padding-right: 20px;}
	section#accueil article div p{ font-size: 1.5rem; line-height: 2.1rem;}
}
@media only screen and (max-width : 1499px) {

	html, body{ font-size:61%;}

	body.home header #logo{ width: 240px; padding: 50px 70px 40px 50px;}
	section#accueil article#introduction{ min-width: 38%;}
	section#accueil article#introduction h1{ font-size: 2.8rem; line-height: 3.4rem;}
	section#accueil article#introduction .sous-titre { font-size: 1.6rem; line-height: 2.1rem; margin-bottom: 20px;}
	section#accueil article#introduction { padding-left: 20px; padding-right: 20px;}
	section#accueil article#introduction h2 { font-size: 1.8rem; padding-top: 1rem;}
	section#accueil article#introduction p { font-size: 1.6rem; line-height: 2.3rem; padding-bottom: 2.1rem;}
	section#accueil article div p a{ padding: 20px 20px; text-align: center; height: auto; line-height: 2.1rem;}
}
@media only screen and (max-width : 1399px) {

	html, body{ font-size:60%;}

	section#accueil article#introduction { min-width: 33%;}
	section#accueil article#introduction h1{ font-size: 2.4rem; line-height: 3.2rem;}
	section#accueil article#introduction .sous-titre { margin-bottom: 15px;}
	section#accueil article#introduction h2 { font-size: 1.7rem; padding-top: 0.8rem;}
	section#accueil article#introduction p { font-size: 1.4rem; line-height: 2.1rem; padding-bottom: 1.6rem;}
}
@media only screen and (max-width : 1299px) {

	html, body{ font-size:59%;}

	section#accueil article#introduction p { font-size: 1.35rem; line-height: 2rem; padding-bottom: 1.2rem;}
}
@media only screen and (max-width : 1199px) {

	html, body{ font-size:58%;}

	header #logo{ width: 200px; padding: 60px 40px 40px 40px;}
	section#accueil article div h2{ font-size: 2.4rem;}
	section#accueil article#introduction p { font-size: 1.3rem; line-height: 1.9rem; padding-bottom: 1rem;}

	section#entete{ height: auto; padding-bottom: 30vh;}
	section#entete .titre-large{ padding: 10vh 0 6vh; width: 50%; margin-right: 5%;}
	section#entete .titre-large h1 { font-size: 8rem; line-height: 7rem;}
	section#entete .titre-large p { font-size: 2.1rem; line-height: 3.6rem;}

	section#page{ top: -5vh;}
	body.presentation section#page{ top: 5vh;}
	section#page .contenu { margin: 70px auto 55px;}
	section#entete{ padding-top: 120px;}
	section#entete div.contenu-photo p.sur-titre{ font-size: 2.1rem;}
}
@media only screen and (max-width : 1099px) {

	html, body{ font-size:57%;}
}
@media only screen and (max-width : 999px) {

	html, body{ font-size:56%;}

	body.home header #logo{ width: 200px; padding: 40px 80px 40px 40px;}
	header #logo{ width: 180px; padding: 50px 40px 40px 40px;}
	footer{ height: auto; padding: 20px 5% 0; text-align: center;}

	section#accueil{ flex-wrap: wrap; height: auto; min-height: 100vh;}
	section#accueil article#introduction { width: 100%; min-height: 50vh; height: auto; flex-shrink: 0; padding: 160px 10vw 40px}
	section#accueil article#introduction p em{ padding-right: 12px;}
	section#accueil article{ width: 33.33%; min-height: 50vh; height: auto;}

	section#accueil article#introduction h1,
	section#accueil article#introduction .sous-titre{ text-align: center;}
	section#accueil article#introduction h1 { font-size: 2.8rem; line-height: 3.6rem;}
	section#accueil article#introduction .sous-titre{ font-size: 1.8rem; margin-bottom: 20px;}
	section#accueil article#introduction h2 { font-size: 1.9rem;}
	section#accueil article#introduction p{ font-size: 1.6rem; line-height: 2.4rem; display: flex;}

	section#accueil article{ padding-bottom: 0;}
	section#accueil article div h2{ font-size: 2.1rem; margin-bottom: 20px;}
	section#accueil article div p a{ height: 50px; line-height: 50px; margin: 20px auto 0; padding: 0 30px;}

	section#entete { padding-top: 110px;}
	section#entete .titre-large{ padding: 90px 0 4vh; width: 55%;}
	section#entete .titre-large h1 { font-size: 7rem; line-height: 6rem;}
	section#entete .titre-large p { font-size: 1.9rem; line-height: 3.2rem;}
	section#page h2{ font-size: 3rem; line-height: 4.2rem;}

	section#page .temoignages { min-height: auto;}
	section#temoignages{ justify-content: space-between;}
	section#temoignages article{ width: 47%;}
	section#liens .lien { margin: 0 1vw 40px; width: 15vw;}
	section#liens .lien .image, section#liens .lien .image div { width: 9vw; height: 9vw;}
}
@media only screen and (max-width : 899px) {

	html, body{ font-size:55%;}

	section#page .contenu { margin: 60px auto 40px;}
	section#page h2{ font-size: 3rem;}
}
@media only screen and (max-width : 799px) {

	html, body{ font-size:54%;}

	header nav a{ font-size: 3.2rem;}
	header nav .double a, header nav .double span { font-size: 1.7rem;}
	header nav #contacter{ padding: 25px;}

	section#accueil article#introduction { padding-left: 7.5vw; padding-right: 7.5vw;}
	section#page h2{ font-size: 2.8rem; line-height: 4rem;}
	section#page .ombre { padding: 50px 25px;}

	section#entete .titre-large{ padding: 90px 0 2vh; width: 60%;}
	section#entete .titre-large h1 { font-size: 5.6rem; line-height: 4.8rem;}
	section#entete .titre-large p { font-size: 1.7rem; line-height: 2.8rem;}
	section#entete #photo{ margin-top: 40px;}
	section#entete div.contenu-photo p.sur-titre{ font-size: 1.8rem;}

	section#actualites,
	section#temoignages{ flex-direction: column;}
	section#actualites article,
	section#temoignages article{ width: 75%;}
	section#liens .lien { width: 22vw;}
	section#liens .lien .image, section#liens .lien .image div { width: 12vw; height: 12vw; border-radius: 10vw;}
}
@media only screen and (max-width : 699px) {

	section#actualites article,
	section#temoignages article{ width: 80%;}
}
@media only screen and (max-width : 599px) {

	html, body{ font-size:53%;}

	header nav a, header nav p.avec-sous{ height: 5vh; line-height: 5vh;}
	header nav p.avec-sous,
	header nav a, header nav #contacter span.h2{ font-size: 2.4rem;}
	header nav .double a, header nav .double span { font-size: 1.6rem;}
	header nav #contacter{ padding: 20px; margin-bottom: 20px;}

	body.home header #logo,
	header #logo{ width: 100px; padding: 30px 0 0 30px; margin: 0;}
	header #logo{ padding-top: 25px;}
	body.scroll header #logo{ width: 80px; padding-top: 20px; margin: 0;}

	#burger { width: 80px; height: 80px; padding: 2px 31px 0 25px;}
	button span { width: 24px; height: 3px;  margin: auto auto 4px;}
	#burger strong,
	body.scroll header #burger strong{ width: 80px; height: 70px; margin: 10px 0 0 -105px; line-height: 64px; font-size: 1.6rem;}

	header nav{
		top: 10px;
		left: 10px;
		width: calc(100vw - 20px);
		height: calc(100vh - 20px);
	}

	#bordures div { height: 10px;}
	#bordures div#left, #bordures div#right { width: 10px;}

	section.content{ padding: 10px;}

	section#accueil{ flex-direction: column;}
	section#accueil article#introduction { padding-left: 5vw; padding-right: 5vw;}

	section#accueil article{ width: 100%; min-height: 40vh;}
	section#accueil article div{ margin-top: auto;}

	section#content{ padding: 10px;}
	section#page .contenu { margin: 40px auto 20px;}
	section#page h2{ font-size: 2.6rem; line-height: 3.6rem;}
	section#page .ombre { padding: 40px 20px;}

	section#entete { padding-top: 0;}
	section#entete .contenu{ padding-top: 60px;}
	section#entete div.contenu-photo .titre { background: linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 66%, rgba(0, 0, 0, 0.75) 100%);}

	section#entete div.contenu-photo p.sur-titre{ letter-spacing: normal;}
	section#entete div.contenu-photo p.sur-titre::before, section#entete div.contenu-photo p.sur-titre::after { width: 21px; height: 3px; margin: auto 12px;}
	section#entete .titre-large{ padding: 30px 0 0; margin-top: 0; width: 66%;}
	section#entete .titre-large h1 { font-size: 5.2rem; line-height: 4.6rem;}
	section#entete .titre-large p { font-size: 1.6rem; line-height: 2.4rem;}
	section#entete #photo{ margin-top: 10px;}

	section#page .photos-apres{ padding-bottom: 20vw;}
	section#page .photos{ width: 100%; margin: -20vw 0 0;}
	section#page .photos div { width: 31%; height: 40vw;}

	section#actualites article,
	section#temoignages article{ width: 90%; padding: 30px 5% 15px;}

	section#references img { height: 18vw; max-height: auto; margin: 0 10px;}



	section#liens .lien { width: 40vw;}
	section#liens .lien .image, section#liens .lien .image div { width: 16vw; height: 16vw;}
}
@media only screen and (max-width : 499px) {

	body.home header #logo, header #logo,
	body.scroll header #logo{
		width: 70px;
		padding: 20px 0 0 20px;
	}
	#burger { width: 70px; height: 70px; padding: 2px 26px 0 20px;}
	button span { width: 24px; height: 3px;  margin: auto auto 4px;}
	#burger strong,
	body.scroll header #burger strong,
	header.flex #burger strong,
	body.scroll header.flex #burger strong{ width: 70px; height: 60px; margin: 10px 0 0 -90px; line-height: 53px; font-size: 1.6rem;}
	body.scroll header #burger strong,
	header.flex #burger strong,
	body.scroll header.flex #burger strong{ height: 70px; margin-top: 0; line-height: 64px;}

	section#accueil article#introduction{ padding: 120px 2.5vw 20px;}
	section#accueil article#introduction p{ flex-direction: column;}
	.bouton button, section#accueil article#introduction p a{ flex-grow: 0; width: auto; margin-right: auto;}
	.bouton button, section#accueil article#introduction p a, section#accueil article div p a { height: 50px; line-height: 50px; font-size: 1.3rem; padding: 0 25px;}
	section#accueil article{ min-height: 55vh;}
	section#accueil article div{ padding-top: 40px; padding-bottom: 10px; background: linear-gradient(rgba(51, 56, 84, 0) 0%, rgba(51, 56, 84, 0.66) 100%);}
	section#accueil article:hover div{ padding-top: 80px; background: linear-gradient(rgba(51, 56, 84, 0) 0%, rgba(51, 56, 84, 0.9) 100%);}
	section#accueil article div p{ display: none;}

	div.contenu,
	section#page{ width: 100%;}
	section#entete div.contenu-photo h1{ font-size: 3.2rem; line-height: 3.8rem; padding: 0 5%; margin-top: 5px; margin-bottom: 0;}

	body.presentation section#entete { padding-top: 120px;}
	body.presentation section#entete .contenu{ padding-left: 5%; padding-right: 5%;}

	section#page{ margin-bottom: 40px;}
	section#page div.blanc{ padding-left: 2.5vw; padding-right: 2.5vw;}
	section#page div.rose,
	section#page div.rose-clair{ padding-left: 4vw; padding-right: 4vw;}

	section#page h2 { font-size: 2.1rem; line-height: 3.2rem;}
	section#page h2::after { margin: 10px auto 20px; width: 24px;}

	body.presentation section#entete .contenu { flex-direction: column;}
	section#entete .titre-large{
		width: 100%;
		text-align: center;
		font-size: 3.6rem;
		order: 2;
		padding-bottom: 20px;
	}
	section#entete .titre-large h1::after { margin-left: auto;}

	section#entete div.contenu-photo p.sous-titre,
	section#entete .titre-large p {
		font-size: 1.6rem;
		line-height: 2.4rem;
		text-align: left;
	}
	section#entete div.contenu-photo p.sous-titre{ margin: 10px 5% 0;}
	section#entete #photo{
		order: 1;
		width: 25vh;
		height: 25vh;
		margin: 0 auto 20px;
	}

	section#actualites article,
	section#temoignages article{ width: 100%;}

	section#actualites article h3{ text-align: center; justify-content: center;}
	section#actualites article h3::after { margin-left: auto;}
}
@media only screen and (max-width : 399px) {

	html, body{ font-size:52%;}

}
@media only screen and (max-width : 299px) {

	html, body{ font-size:50%;}
}



@media only screen and (max-height : 749px) {

	header nav a { height: 8.5vh; line-height: 8.5vh;}
	header nav .double a, header nav .double span { height: 4vh; line-height: 1vh;}

	header nav #contacter{
		display: none;
	}
}