@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;700&display=swap');

@font-face {
    font-family: 'caviardreams';
    src: url('webfont/caviardreams-webfont.woff2') format('woff2'),
         url('webfont/caviardreams-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'caviardreams';
    src: url('webfont/caviardreamsbold-webfont.woff2') format('woff2'),
         url('webfont/caviardreamsbold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

.mobile {
	display: none;
}

html {
	padding:0;
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	font-size:13px;
	line-height:1.6;
	font-weight: 300;
}

body {
	margin: 0;
}
	
a {
	text-decoration:none;
}

img {
    max-width:100%;
}

p, ul, em {
	margin: 0 0 15px 0;
	padding: 0;
	color: #FFF;
	letter-spacing:1px;
	list-style-type: none;
}

h1, h2, h3, h4, h5, h6, p {
	margin:0;
	padding:0;
	}

h1 { /* titre */
	font-family:'caviardreams', serif;
	font-size:40px;
	color: #C89A02; /* doré */
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	padding: 50px;
}

h2 { /* sous titre */
	font-family:'caviardreams', serif;
	font-size:30px;
	line-height: 1.3;
	color: #FFF;
	font-weight: bold;
	margin-bottom: 20px;
}

#bilans h2, #consultation h2, #temoignages em {
	text-align: center;
	margin-top: -40px;
	display: block;
}

h3 { /* titres li */
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	font-size:14px;
	color: #FFF;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 20px
}

h4 { /* bande */
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	font-size:12px;
	color: #C89A02; /* doré */
	font-weight: normal;
	text-transform: uppercase;
	padding: 0 30px;
}

header {
    overflow:hidden;
}

#menu {
	display: none;
	height:100vh;
	background: rgba(255,255,255,0.98);
	color: #C89A02; /* doré */
}

#bande {
	padding: 10px 30px;
	text-align: center;
	display: flex;
    align-items: center;
    justify-content: space-between;
    background:#FFF;
}

#bande h1 {
	text-transform: uppercase;
	color: #C89A02; /* doré */
	font-size:15px;
	font-weight: bold;
	line-height: 1.3;
	letter-spacing: 0.3px;
	padding: 0;
	margin-bottom: -10px;;
	text-align: center
}

#bande h1 strong {
	font-size:24px;
	display: block;
}

#bande h1 em {
	font-size:10px;
	color: #C89A02; /* doré */
	font-style: normal;
	display: block;
	letter-spacing: 0.3px;
}

#menu .bande  {
	padding: 10px 30px;
	text-align: center;
	display: flex;
    align-items: center;
    justify-content: space-between;
}

#menu .close {
	color: #C89A02; /* doré */
	font-family:'caviardreams', serif;
	font-size:30px;
	font-weight: bold;
}

#menu ul {
	display: flex;
	list-style-type: none;
    flex-direction: column;
    align-items: center;
	height:50vh;
	margin-top: 15vh;
    justify-content: space-evenly;
	text-align: center
}

#menu ul a {
	font-family:'caviardreams', serif;
	font-size:30px;
	line-height: 1.4;
	font-weight: bold;
	text-transform: uppercase;
	color: #C89A02; /* doré */
}

#menu ul li a:hover {
	color: #293656; /* bleu */
}

#menu_top {
    top:0;
	z-index:100;
	position:absolute;
    width: 100%;
	}

#burger {
	margin-right: 65px;
}

.mini-logo {
	height: 50px;
	margin-top: 5px;
}

.floatable {
	position: fixed!important;
	top: 0;
    background:#FFF;
}

.floatable nav {
	padding:25px!important;
}

#bandeau {
    background: url("../images/bandeau-feuilles.jpg");
    background-size: cover;
	text-align: center;
	height:100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#bandeau img {
	width:400px;
	max-width: 70%;
	z-index: 1;
}

#bandeau a {
	position: absolute;
	bottom:30px;
}

section {
	padding: 50px 0 120px 0;
}

#orthoptie, #partenariat {
	background-color: #244A45; /* vert */
}

#orthoptie li {
	padding-left: 20px;
}

#orthoptie li:before {
	content: '- ';
	margin-left: -10px;
}

.feuille1 {
	position:absolute;
	right:0;
	margin-top:-50px;
}

.feuille2 {
	position:absolute;
	right:0;
	margin-top:170px;
}

.split {
	display: flex;
    align-items: center;
}

.split img {
	width: 50%;
}

.split div {
	width: 50%;
	padding:50px;
}

#bilans, #temoignages {
	background-color: #C89A02; /* doré */
   text-align: center;
}

#bilans h1, #temoignages h1 {
	color: #FFF;
}

.feuille3 {
	position:absolute;
	left:-50px;
	margin-top:-350px;
}

.bilan1 {
	text-align: center;
	padding-top: 30px;
}

.bilan1 svg {
	margin: 15px 0 30px 0
}

.oeil svg {
	width: 30%;
}

.bilan2, .bilan3 {
	width: 30%;
	height: 180px;
	margin-top: -350px;
	padding:30px;
}

.bilan4, .bilan5 {
	width: 25%;
	height: 100px;
	margin-top: -175px;
	padding:30px;
}

.bilan6, .bilan7 {
	margin-top:0px;
	width: 30%;
	height: 180px;
	padding:30px;
}

.bilan2 {
	text-align: right;
	float: left
}

.bilan2 svg {
	float: right;
	margin: 10px -135px 0 0
}

.bilan3 {
	text-align: left;
	float: right
}

.bilan3 svg {
	float: left;
	margin: 10px 0 0 -135px 
}

.bilan4 {
	text-align: right;
	float: left
}

.bilan4 svg {
	float: right;
	margin: 10px -75px 0 0
}

.bilan5 {
	text-align: left;
	float: right
}

.bilan5 svg {
	float: left;
	margin: 10px 0 0 -75px 
}

.bilan6 {
	text-align: right;
	float: left
}

.bilan6 svg {
	float: right;
	margin: -70px -130px 0 0
}

.bilan7 {
	text-align: left;
	float: right
}

.bilan7 svg {
	float: left;
	margin: -70px 0 0 -130px 
}

#bilans .bouton {
	clear: both;
	display: block;
	width: 200px;
	margin: 0 auto;
}

#bilans .bouton:hover {
	background-color: #FFF;
	color:#C89A02;
}

.bouton {
	border: 1px solid #FFF;
	padding: 20px 40px;
	color: #FFF;
	font-weight:600;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: inline-block;
	margin-top: 30px;
}

#photos {
	padding: 0;
}

#consultation {
	background-color: #293656; /* bleu */
	margin-top: -10px
}

.feuille4 {
	position:absolute;
	right: 0px;
	margin-top:0px;
}

.feuille5 {
	position:absolute;
	right:0;
	margin-top:130px;
}

#consultation ul {
	display: flex;
    flex-wrap: wrap;
	margin: 0 auto;
}

#consultation li {
	width: calc(100%/3 - 2%);
	padding:1%;
	text-align: center;
}

#consultation li .icone {
	height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*#apropos {
    background: url("../images/bandeau-feuilles.jpg");
    background-size: cover;
	height:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align: center;
	padding:10%;
    display: flex;
}

#apropos svg {
	margin:10px 0;
	cursor: pointer
}

#apropos .cadre {
	background: #212123;
	padding: 30px 80px 80px 80px;
}

#apropos strong {
	text-transform: uppercase;
	font-weight: 600;
	color: #FFF;
	font-size: 16px;
}

#apropos article {
	display: flex;
	text-align: left;
    align-items: center;
}

#apropos .portrait {
	margin-right: 5%;
	flex: 0 0 400px;
}

#apropos .bouton {
	clear: both;
	display: inline-block
}

#apropos .bouton:hover {
	background-color: #FFF;
	color:#212123;
}*/
#apropos {
    background: url("../images/bandeau-feuilles.jpg");
    background-size: cover;
	height:auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align: center;
	padding:10%;
}

#apropos p {
	clear: both;
}

#apropos svg {
	margin: 0 0 -5px 5px;
	cursor: pointer
}

#apropos .team {
    margin: 0 25px;
    width: calc(100% - 50px);
}

#apropos .cadre {
	background: #212123;
	padding: 30px 30px 50px 30px;
	max-width: 1000px
}

#apropos strong {
	text-transform: uppercase;
	font-weight: 600;
	color: #FFF;
	font-size: 16px;
}

#apropos article {
	float: left;
	text-align: left;
	width: calc(50% - 50px);
	padding: 0 25px 25px 25px;
}

#apropos article div img {
	display: inline-block;
	width: 60%;
	margin: 0 20%;
	border-radius: 50%;
}

#apropos .bouton {
	clear: both;
	display: inline-block
}

#apropos .bouton:hover {
	background-color: #FFF;
	color:#212123;
}

#temoignages #temoignages1 { 
  	column-count:3;
  	column-gap:20px;
	margin: 50px auto;
}

#temoignages #temoignages2 {
	display: none
}

#temoignages1 div {
	border: 1px solid #FFF;
	padding: 20px;
	margin-bottom:20px;
	display: grid;
	break-inside: avoid;
	color: #FFF;
	letter-spacing:1px;
	text-align: left;
}

.feuille6 {
	position:absolute;
	left:-50px;
	margin-top:-100px;
}

#infos, #consultation ul, #temoignages #temoignages1 {
	width: 1000px;
	max-width:80%;
}

#infos {
	margin:80px auto;
	display: flex;
	padding: 0;
}

#infos h3, #infos p, #mentions h2, #mentions h3, #mentions p  {
	color: #212123;
	margin: 15px 0;
	line-height: 2;
}

#infos div {
	min-width:30%;
}

#infos .ligne {
	border-left:1px solid #CECECE;
	min-width:1px;
	margin-right:80px;
	margin-left:80px;
	padding: 0;
}

#infos .bouton {
	border-color: #C89A02;
	color: #C89A02;
	margin-top:15px
}

#infos .bouton:hover {
	background-color:#C89A02;
	color: #FFF;
}

footer {
	border-top:1px solid #CECECE;
    text-align: center;
    padding:30px;
	}

footer p, footer a {
	color: #AAA;
}

#mentions {
	display:none;
	text-align:justify;
    padding:100px;
	}