@charset "utf-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

html, body {
	height: 100%;padding:0;margin:0;
	scroll-behavior: smooth;
}

html, hmtl a{
	width:100%;
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}

body{
	color:#0d302b;
	font-family:'geometriaregular';
}


a{
	text-decoration: none;
	cursor: pointer;
	color:#0d302b;
	-webkit-transition: color 0.1s linear 0s;	
	   -moz-transition: color 0.1s linear 0s;
		 -o-transition: color 0.1s linear 0s;
		    transition: color 0.1s linear 0s;
}

li {list-style-type: none;}

input, textarea, select, button {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
}



header {z-index:99;top:50px; left:200px;right:200px;position:fixed;color:#0d302b;}
header ul {display: inline-block;font-size:1.2em;}
header ul.menu {float: right;text-align: right;}

section {height:auto;width:auto;margin:0 200px;position:relative;text-align:center;}

section#cover {top:0;height:830px;
	background-repeat:no-repeat;
	background-position: center top;
	background-size:contain; }

section#cover.miroir {
	background-image: url(../img/cover.png);}
section#cover.ours {
	background-image: url(../img/3ourscover.png);}

section#livre {padding-top:30px;}
section#livre div.index {padding:100px 0;width:100%;}

section#livre div.left {width:50%;float:left;}
section#livre div.right {width:50%;float:left;}

section#livre div.left img {width:600px;height:auto;        -webkit-transition: all 300ms ease-out 0s;      
           -moz-transition: all 300ms ease-out 0s;
                 -o-transition: all 300ms ease-out 0s;
                    transition: all 300ms ease-out 0s;}
section#livre div.right img {width:600px;height:auto;        -webkit-transition: all 300ms ease-out 0s;      
           -moz-transition: all 300ms ease-out 0s;
                 -o-transition: all 300ms ease-out 0s;
                    transition: all 300ms ease-out 0s;}







section#livre h1 {font-family: 'botera_tferegular_stencil';font-size:2.5em;font-weight: normal;}
section#livre h2 {font-size:1.2em;color:#bcab85;font-weight: normal;margin:10px 0 50px 0;}
section#livre h3 {font-family: 'botera_tferegular_stencil';font-size:2em;font-weight: normal;}
section#livre ul {display: inline-block;width:50%;vertical-align: top;}
section#livre ul.extra {text-align:right;font-family: 'botera_tferegular';font-size:1.3em;padding-right:20px;}
section#livre ul.extra2 {text-align:right;font-family: 'botera_tferegular';font-size:1.3em;padding-right:20px;}
section#livre ul.extra2 li {margin-bottom:10px;}
section#livre ul.descr {text-align:left;font-size:1.2em;color:#bcab85;line-height: 1.4em;padding-left:20px;}
section#livre ul.descr li.tech {text-align:left;font-size:0.8em;line-height: 1.4em;color:#0d302b;}

section#livre ul.miroir {text-align:right;font-family: 'botera_tferegular';font-size:1.3em;padding-right:20px;}
section#livre ul.troisours {text-align:left;font-size:1.2em;color:#bcab85;line-height: 1.4em;padding-left:20px;}
section#livre ul.troisours li.tech {text-align:left;font-size:0.8em;line-height: 1.4em;color:#0d302b;}


button {width:150px;height:150px;border:none;border-radius: 75px;text-align: center;font-family:'geometriaregular';line-height: 1.3em;
        color:#fff;text-transform:uppercase;cursor: pointer;
        -webkit-transition: all 300ms ease-out 0s;      
           -moz-transition: all 300ms ease-out 0s;
                 -o-transition: all 300ms ease-out 0s;
                    transition: all 300ms ease-out 0s;}

button ul {list-style-type: none;}


section#livre img:hover {box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.1);}

section#livre button {margin-top:40px;margin-left: 0px;background-color:#0d302b;text-align: center;}
section#livre button:hover {background-color:#b5a289;}
section#livre button ul {text-align:center;color:#fff;}

section#livre div.index ul li {display: inline-block;}

section#livre div.index button {margin: 40px 10px;border: solid 2px #bcab85;text-align: center;background-color:#fff}
section#livre div.index button ul {text-align:center;color:#bcab85;}
section#livre div.index button:hover {background-color:#0d302b;border:none;}

section#chanson {margin-top:0;height:600px;position:relative;
	background-repeat:no-repeat;
	background-position: center top;
	background-size:contain; }
section#chanson.lievre {
	background-image: url(../img/video.png);}
section#chanson.oursong {
	background-image: url(../img/oursong.png);}




section#chanson button {margin-top:100px;margin-right: 500px;background-color:#b5a289;}
section#chanson button:hover {background-color:#0d302b;}


section#uncarnet {padding-bottom:150px;}

section#uncarnet::before {content:url(../img/uncarnet.svg);
	display: block;
	position: relative;
  	width: 120px;
  	height: 50px;
  	margin: auto;}

section#uncarnet ul {font-size:1.2em;line-height: 1.4em;color:#bcab85;}

section#reseau {background-color: #dcd4b9;padding:100px 200px 50px 200px;margin:0;}

 
section#reseau h3 {width:500px; height:100px; background-color: #dcd4b9; margin:-150px auto 0 auto;position: relative;font-size:1.5em;line-height: 90px;font-weight: lighter;}
section#reseau h4 {font-size:1.2em;line-height: 90px;font-weight: normal;margin-bottom:30px;}
section#reseau ul {display: inline-block;width:50%;vertical-align: top;font-size:1.1em;line-height: 1.4em;}
section#reseau ul.sym1 {text-align:right;padding-right:20px;width:430px;}
section#reseau ul.sym2 {text-align:left;padding-left:20px;width:430px;}
section#reseau ul li.plus {margin-bottom:30px;}



section#contact {background-color: #dcd4b9;padding:50px 200px;margin:0;text-align:center;}


section#contact ul {display:block;}

section#contact button {width:auto;height:80px;font-size:1.1em;background-color:#dcd4b9;text-transform:none;font-weight: 400;cursor: pointer;font-family:'geometriaregular';color:#0d302b;
							border-radius: 0px; border-bottom:solid 1px #dcd4b9;margin:30px 0 40px 0;}

section#contact button:hover {border-bottom:solid 1px #0d302b;}



section#contact ul li.post {text-transform: uppercase;margin:10px 0;font-size:0.9em;}




#contact form {
	margin:50px auto 0px auto;width:500px;
}



#contact input , #contact select , #contact textarea {
	font-size: 18px;width:100%;border:none;border-radius: 2px;padding:15px;background: #f2ece3;margin:0 0 8px 0;font-family: 'geometriaregular', sans-serif;
  color: #0d302b;box-sizing: border-box;border-radius: 3px;font-weight:500;
}



::placeholder {opacity:1;color:#b5a289;}

#contact select::-ms-expand {
  display: none;
 }

#contact .select{
  margin:0;position:relative;
}

#contact .select::after {
	
	content: url("../img/select.svg");
  position: absolute;
  right: 20px;
  top: 15px;
  display: block;
  width:15px;
  height:15px;
}

#contact select option {color:#999;font-family: 'geometriaregular', sans-serif;}
#contact select {color:#b5a289;}
#contact select:valid {color:#0f3642;}

#contact input:invalid , #contact textarea:invalid {
color: #e53f3f;background: #f2ece3;
}

#contact input.button {
	width:300px;height:50px;padding:0 50px;font-size:1em;background-color: #0d302b;text-transform:uppercase;font-weight: 400;cursor: pointer;font-family:'geometriaregular';color:#fff;
	border-radius: 3px; margin:5px 0 20px 0;
	        -webkit-transition: all 300ms ease-out 0s;      
           -moz-transition: all 300ms ease-out 0s;
                 -o-transition: all 300ms ease-out 0s;
                    transition: all 300ms ease-out 0s;
}

#contact input.button:hover , #contact input.reset:hover {
	color: #fff;
	background-color:#b5a289;
}




#contact h3	{font-size:1em;font-weight: 500;font-family:'geometriaregular';text-transform:uppercase;letter-spacing: .3rem; }
#contact h3 span {padding:0px 20px;background-color: #dcd4b9;display: block;width:170px;margin:auto;margin-top:-10px; }


#contact h3::before	{
	content:"";
	display:block;
	background-color: #000;
	width:500px;
	height:1px;
	left:0;
	right:0;
	margin:auto;
	margin-top:8px;
	z-index: 0;
	}


#contact h2 {font-family: 'botera_tferegular_stencil';font-size:2em;font-weight: normal;margin:60px 0 20px 0;}


#contact .made {color:#b5a289;}
#contact .made span {height:15px;width:15px;display:inline-block;background-image: url(../img/coeur.svg);	background-repeat:no-repeat;
	background-position: center 0px;
	background-size:15px;
	margin-top:5px; }


.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #fff;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0%;
  width: 0%;
  height: 0px;

}


.e-mail {display:none;}
#merci h1 {font-family: 'botera_tferegular';font-size:3em;margin:30px 0;font-weight: 500; }
.rgpd {display:block;margin:15px 0 25px 0;font-size:1em;text-transform:none;}


.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #dcd4b9;
  opacity: 0;
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

section#reserver , section#telecharger {margin:0;}
section .frame {width:100%;height:100%;
}
section .frame ul {width:100%;height:auto;position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);}

section#reserver h1 , section#telecharger h1	{font-size:1em;font-weight: 600;text-transform:uppercase;letter-spacing: .3rem;}
section#reserver h2 {font-family: 'botera_tferegular_stencil';font-size:2em;font-weight: normal;margin:20px 0;}
section#telecharger h2 {font-family: 'botera_tferegular';font-size:2em;font-weight: normal;margin:40px 0;}

.frame button {width:auto;height:50px;padding:0 50px;font-size:1em;background-color:#0d302b;text-transform:uppercase;font-weight: 400;cursor: pointer;font-family:'geometriaregular';color:#fff;
							border-radius: 3px; margin:30px 0;}

section#telecharger .frame button {width:300px;height:50px;padding:0 50px; margin:5px 0;}

.frame button.close {width:auto;height:80px;font-size:1em;background-color:rgb(0,0,0,0);text-transform:uppercase;font-weight: 400;cursor: pointer;font-family:'geometriaregular';color:#0d302b;
							border-radius: 0px; border: none;border-bottom:solid 1px #dcd4b9;margin-top:30px;padding:0;}
.frame button.close:hover {border-bottom:solid 1px #0d302b;}



section#chanson-lievre {width:100%;height:100%;margin:0;text-align:left;
	background-repeat:no-repeat;
	background-position: center center;
	background-size:contain; 
	background-image: url(../img/video.png);}


section#chanson-lievre a {width:0;height:0;margin:0;display:block;}

section#chanson-lievre button {margin-top:100px;margin-left: 200px;background-color:#b5a289;}
section#chanson-lievre button:hover {background-color:#0d302b;}


section#oursong {width:100%;height:100%;margin:0;text-align:left;
	background-repeat:no-repeat;
	background-position: center center;
	background-size:contain; 
	background-image: url(../img/screen.png);}


section#oursong a {width:0;height:0;margin:0;display:block;}

section#oursong button {margin-top:100px;margin-left: 200px;background-color:#b5a289;}
section#oursong button:hover {background-color:#0d302b;}

*,
*:after,
*:before {
    box-sizing             : border-box;
    -webkit-box-sizing     : border-box;
    -moz-box-sizing        : border-box;
    -webkit-font-smoothing : antialiased;
    -moz-font-smoothing    : antialiased;
    -o-font-smoothing      : antialiased;
    font-smoothing         : antialiased;
    text-rendering         : optimizeLegibility;

}

.mediPlayer .control {
    opacity        : 0; /* transition: opacity .2s linear; */
    pointer-events : none;
    cursor         : pointer;
}

.mediPlayer .not-started .play, .mediPlayer .paused .play {
    opacity : 1;

}

.mediPlayer .playing .pause {
    opacity : 1;

}

.mediPlayer .playing .play {
    opacity : 0;
}

.mediPlayer .ended .stop {
    opacity        : 1;
    pointer-events : none;
}

.mediPlayer .precache-bar .done {
    opacity : 0;
}

.mediPlayer .not-started .progress-bar, .mediPlayer .ended .progress-bar {
    display : none;
}

.mediPlayer .ended .progress-track {
    stroke-opacity : 1;
}

.mediPlayer .progress-bar,
.mediPlayer .precache-bar {
    transition        : stroke-dashoffset 500ms;

    stroke-dasharray  : 298.1371428256714;
    stroke-dashoffset : 298.1371428256714;
}



.mediPlayer { margin-top:50px;margin-left:500px;cursor: pointer;}

section#chanson-lievre .mediPlayer { position:absolute;bottom:100px;right:200px;cursor: pointer;}
section#chanson-lievre .mediPlayer::before { 
	content:"PLAY";
	position:absolute;
	top:65px;
	left:-60px;

}

section#oursong .mediPlayer { position:absolute;bottom:100px;right:200px;cursor: pointer;}
section#oursong .mediPlayer::before { 
	content:"PLAY";
	position:absolute;
	top:65px;
	left:-60px;

}