html {
}

body {
border : 10px solid #A3A5AC;
border-bottom: none;
margin:0;
margin:auto;
height:100%; 
}


#contenu {
padding-bottom: 100%;
margin:50px 50px 0 50px;
}


#header {
background-color : #A3A5AC;
height: 75px;
font-family: 'proxima_nova_rgbold';
font-size:20px;
color: #000;
padding :20px 30px 0px 0px;
top: 0px;
position: fixed;
width:100%;
margin:auto;
padding-left:5px;
z-index:10;
}

#logo {
width:145px;
height: 35px;

}

#quitter {
float:right;
width:190px;

}

#quitter p{
margin:0;
text-transform: uppercase;
}


#quitter img {
float:right;
width:27px;
height:27px;
}

#quitter a {
text-decoration:none;
font-family: 'proxima_nova_rgbold';
color: #000;
}


#detail{
display:none;
margin:auto;
}

#lesChoix {
/* margin-top:20px;*/
font-family: 'proxima_nova_rgbold';
color: #FFF;

}

.Good {
width:200px;
color:#5E8F3F;
font-family: 'proxima_nova_thextrabold';
}

.Wrong {
color: #CA5654;
width:200px;
font-family: 'proxima_nova_thextrabold';
}

.titre2, .titreIntro {
font-family: 'proxima_nova_thextrabold';
font-size: 30px;
line-height: 1.2;
color: rgb(42, 48, 51);
display:block;
margin:40px 0 0 20px
}

.titre3 {
font-family: 'proxima_nova_rgbold';
line-height: 1.2;
color: rgb(42, 48, 51);
display:block;
margin:20px;
}

.titre2 a {
text-decoration:none;
}

#ResultatComment {
margin-left:20px;
}


/*** Etape ***/

.ContenuEtape {
margin : 20px 15px 0 20px;
}

.ContenuEtape a {
font-family: 'proxima_nova_rgregular' ;
font-weight: bold;
color: rgb(255, 255, 255);
text-decoration : none;
display:block;
padding:8px 0 0 20px;
position:relative;
}

#leSon {
width:200px;
height:30px;
margin-top:20px;
padding-left: 15px;
}


.BoutonEcoute{
border-style: solid;
border-width: 1px;
border-color: rgb(163, 165, 172);
border-radius: 5px;
background-color: rgb(237, 240, 250);
max-width: 400px; 
height: 75px;
background-size: 46px 36px;
background-repeat: no-repeat;
background-image: url("../image/3-Ecranparcours/ico-ecouter@2x.png");
background-position: 20px 20px;
margin-bottom:30px;
}

#Ecoute {
font-family: "Proxima Nova »;
font-size: 20px;
color: rgb(42, 48, 51);
font-weight: bold;
text-transform: uppercase;
padding:2px 0 0 75px;
float:left;
}

.audio-player{
width:200px;
margin:20px 0 0 180px;
}

.btnSuivant {
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: 'proxima_nova_thextrabold';
color: #ffffff;
font-size: 20px;
background: #5E8F3F;
padding: 8px 20px 8px 0px;
border: solid #44682E 1px;
width: 300px;
text-decoration: none;
background-image: url("../image/3-Ecranparcours/ico-suivant@2x.png");
background-size: 11px 20px;
background-repeat: no-repeat;
background-position: 265px 13px;
}

.btnSuivant:hover {
background: #44682E;
background-image: url("../image/3-Ecranparcours/ico-suivant@2x.png");
background-size: 11px 20px;
background-repeat: no-repeat;
background-position: 265px 13px;
}

.btnVF {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: 'proxima_nova_thextrabold';
  color: #ffffff;
  font-size: 20px;
  background: rgb(25, 145, 159);
  padding: 8px 20px 8px 20px;
  border: solid rgb(19, 114, 132) 1px;
  text-decoration: none;
}



.btnVF:hover  {
  background: rgb(19, 114, 132);
  text-decoration: none;
}





.BoutonVert a, {
border-style: solid;
border-width: 1px;
border-color: rgb(68, 104, 46);
border-radius: 5px;
background-color: rgb(94, 143, 63);
height: 47px;
max-width:190px;
}


.BoutonVertSuivant a{
border-style: solid;
border-width: 1px;
border-color: rgb(68, 104, 46);
border-radius: 5px;
background-color: rgb(94, 143, 63);
height: 47px;
margin-left:180px;
width:150px;
background-image: url("../image/3-Ecranparcours/ico-suivant@2x.png");
background-position: 110px 12px;
background-size: 11px 20px;
background-repeat: no-repeat;
}

.BoutonVert a:hover, .BoutonVertRetour a:hover, .BoutonVertSuivant a:hover,#CharlesE .BoutonVertRetour a:hover,#Kelly .BoutonVertRetour a:hover,#Julie .BoutonVertRetour a:hover,.BoutonVertRetourE a:hover {
background-color: rgb(68, 104, 46);
}

.spacer {margin-top:60px}
.Question {font-family:proxima_nova_rgbold; margin-bottom:60px}
.Ancre {display: block; position: relative; top: -80px; visibility: hidden;}



#footer { background:#A3A5AC; bottom:0; left:0; height:10px; position:fixed; width:100%;min-width:425px}


/*Affichage 1000 et plus */
@media all and (min-width: 1000px) {
/* html {overflow: hidden;} */
#contenu {max-width:800px}

}
/* fin affichage 1000etplus */


/*** pour devices en bas de 1000px ***/
@media all and (max-width: 1000px) {
.titre3, .titreIntro {margin-left:10px}
#Ecoute {display:none}
.BoutonEcoute {background-image: none;}
#leSon {padding-left: 75px;}
.audio-player{margin:20px auto}
#contenu {margin-left:10px;margin-right:10px} 
}
/* affichage 1000etmoins */


/*** pour devices en bas de 450px ***/
@media all and (max-width: 450px) {
#quitter {width: 40px;}
#quitter p span {display:none}
#Ecoute {display:none}
.BoutonEcoute {background-image: none;}
#leSon {padding-left: 75px;} 
html {min-width:320px}
.audio-player{margin:20px auto}
.btnSuivant {height:auto;width:auto; padding-left:10px;padding-right:10px}
}


/* fin affichage 450etmoins */



/** les fonts  **/

@font-face {
    font-family: 'proxima_nova_rgbold';
    src: url('proxima_nova_bold-webfont.eot');
    src: url('proxima_nova_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('proxima_nova_bold-webfont.woff2') format('woff2'),
         url('proxima_nova_bold-webfont.woff') format('woff'),
         url('proxima_nova_bold-webfont.ttf') format('truetype'),
         url('proxima_nova_bold-webfont.svg#proxima_nova_rgbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_nova_rgregular';
    src: url('proximanova-regular-webfont.eot');
    src: url('proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('proximanova-regular-webfont.woff2') format('woff2'),
         url('proximanova-regular-webfont.woff') format('woff'),
         url('proximanova-regular-webfont.ttf') format('truetype'),
         url('proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'proxima_nova_thextrabold';
    src: url('proxima_nova_extrabold-webfont.eot');
    src: url('proxima_nova_extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('proxima_nova_extrabold-webfont.woff2') format('woff2'),
         url('proxima_nova_extrabold-webfont.woff') format('woff'),
         url('proxima_nova_extrabold-webfont.ttf') format('truetype'),
         url('proxima_nova_extrabold-webfont.svg#proxima_nova_thextrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}