html {

}

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


#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;
}


.IntroImage {
max-width:925px;
margin:auto;
padding-top: 20px;
}

.titreIntro{
 margin-top:30px;
}

.titre2, .titreIntro {
font-family: 'proxima_nova_thextrabold';
text-transform: uppercase;
font-size: 30px;
line-height: 1.2;
color: rgb(42, 48, 51);
/* margin-bottom:48px;*/
}

.titre3 {
font-weight: bold;
font-size: 22px;
line-height: 1.2;
color: rgb(42, 48, 51);
display:block;
margin-bottom:20px;
}

.titre2 a {
text-decoration:none;
}

.IntroImage a {
font-family: 'proxima_nova_rgregular' ;
font-weight: bold;
font-size: 36px;
color: rgb(255, 255, 255);
text-decoration : none;
padding-top:125px;
}

.ImgJean {
float:left;
margin:6px 6px 6px 0px;
}
.ImgJean a {
background: url("../image/2-personnages/choix-jean@2x.jpg");
background-size: 300px;
width:300px;
height:300px;
display:block;
padding-left: 110px;
}

.ImgJean a:hover{background: url("../image/2-personnages/choix-jean-hover@2x.jpg"); background-size: 300px;}


.ImgMartha{
float:left;
margin:6px;
}

.ImgMartha a{
background: url("../image/2-personnages/choix-martha@2x.jpg");
background-size: 300px;
width:300px;
height:300px;
display:block;
padding-left: 100px;
 }
.ImgMartha a:hover {background-image: url("../image/2-personnages/choix-martha-hover@2x.jpg");background-size: 300px;}


.ImgCharles {
float:left;
margin: 6px 0px 6px 6px;
}
.ImgCharles a {
background: url("../image/2-personnages/choix-charles@2x.jpg");
background-size: 300px;
width:300px;
height:300px;
display:block;
padding-left: 80px;

}
.ImgCharles a:hover {background-image: url("../image/2-personnages/choix-charles-hover@2x.jpg");background-size: 300px;}

.ImgJulie{
float:left;
margin:6px 6px 6px 0;
}

.ImgJulie a{
background: url("../image/2-personnages/choix-julie@2x.jpg");
background-size: 300px;
width:300px;
height:300px;
display:block;
padding-left: 110px;
}
.ImgJulie a:hover {background-image: url("../image/2-personnages/choix-julie-hover@2x.jpg");background-size: 300px;}


.ImgKelly {
float:left;
margin:6px;
}
.ImgKelly a{
background: url("../image/2-personnages/choix-kelly@2x.jpg");
background-size: 300px;
width:300px;
height:300px;
display:block;
padding-left: 105px;
}
.ImgKelly a:hover {background-image: url("../image/2-personnages/choix-kelly-hover@2x.jpg");background-size: 300px;}

/*** 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;
}


.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;
/*
background-image: url("../image/3-Ecranparcours/ico-suivant@2x.png");
background-position: 240px 15px;
background-size: 11px 20px;
background-repeat: no-repeat;
*/
}

#Kelly .BoutonVert a {
max-width: 270px;
background-image: url("../image/3-Ecranparcours/ico-suivant@2x.png");
background-size: 11px 20px;
background-repeat: no-repeat;
background-position: 235px 13px;
}



#Martha .BoutonVert a{
background-position: 255px 15px;
}

.BoutonVertRetour,.BoutonVertRetourE  {
margin-top:60px;
}

.BoutonVertRetour a,.BoutonVertRetourE a{
border-style: solid;
border-width: 1px;
border-color: #787A7F;
border-radius: 5px;
background-color: #A3A5AC;
height: 47px;
background-image: url("../image/3-Ecranparcours/ico-retour@2x.png");
background-position: 25px 12px;
background-size: 11px 20px;
background-repeat: no-repeat;
padding-left: 60px;
padding-right: 30px;
display:block;
float:left;
}

.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);
}


.BoutonBleu a{
border-style: solid;
border-width: 1px;
border-color: rgb(19, 114, 132);
border-radius: 5px;
background-color: rgb(25, 145, 159);
height: 47px;
width:200px;
margin-left:180px;
background-image: url("../image/3-Ecranparcours/ico-boite-outils@2x.png");
background-size: 23px 20px;
background-position: 15px 12px;
background-repeat: no-repeat;
padding-left:50px
}

.BoutonBleu a:hover {
background-color: rgb(19, 114, 132);
}

#CharlesE .BoutonBleu a{
margin:35px 0;
}

.BoutonEven {
width:210px;
float:left;
margin:7px 7px 7px 0;
}

.BoutonEven a{
border-style: solid;
border-width: 1px;
border-color: rgb(68, 104, 46);
border-radius: 5px;
background-color: rgb(94, 143, 63);
height: 90px;
background-size: 60px 60px;
background-repeat: no-repeat;
background-position: 10px 13px;
padding: 20px 10px 13px 80px;
line-height: 1.1;
}


.BoutonCouple a{background-image: url("../image/4-Evenementsvie/ico-event-couple@2x.png");}
.BoutonEtranger a{background-image: url("../image/4-Evenementsvie/ico-event-depart@2x.png");}
.BoutonTravail a{background-image: url("../image/4-Evenementsvie/ico-event-perteemploi@2x.png");}
.BoutonArgent a{background-image: url("../image/4-Evenementsvie/ico-event-salaire@2x.png");}
.BoutonPension a{background-image: url("../image/4-Evenementsvie/ico-event-retarder@2x.png");}

.BoutonEven a:hover {background-color: rgb(42, 48, 51);}


.BoutonRouge a{
border-color: rgb(148, 63, 62);
background-color: rgb(202, 86, 84);
height: 47px;
border-style: solid;
border-width: 1px;
border-radius: 5px;
max-width:380px;
background-image: url("../image/3-Ecranparcours/ico-choisir-autre-pers@2x.png");
background-position: 25px 12px;
background-size: 20px 20px;
background-repeat: no-repeat;
padding-left: 65px;
margin:35px 0;
clear:left;
}

.BoutonRouge a:hover {
background-color: rgb(148, 63, 62);
}


.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;} */
.titre2 {margin: 85px 0 0 20px;width: 450px;}
.etape #contenu {margin-left:30px;margin-bottom:-20px}
.ContenuEtape {width:450px;}
.rogne img {position: relative;left: -350px;}
.rogne p {position: relative; width: 50%; height: 875px;overflow: hidden;margin-top:-105px; padding:0;float:right;}
#Julie .rogne img {left: -460px;}
#CharlesE .rogne img {left:-450px;}
#intro #contenu {padding-bottom: 100%;}
}
/* fin affichage 1000etplus */


/*** pour devices en bas de 1000px ***/
@media all and (max-width: 1000px) {
/* .rogne p {margin-top:60px;} */
.ImgCharles {margin-right : 6px;}
.ImgJulie {margin-left:6px;}
.ImgJean {margin-left:6px;}
/** Pour garder le ratio des images **/
#contenu img {display: block;max-width: 100%; max-height: 100%;width: auto;height: auto;}
.etape #contenu {margin-left:0}
.BoutonEven {width:100%;float:none;}
.titre3, .titreIntro {margin-left:10px}
.titre2 {margin:85px 0px 0px 20px}
}
/* 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;} 
/*
.BoutonEcoute {background: none;border:none}
#leSon {padding-left: 75px;} 
#leSon {margin:20px auto 0 auto; display:block}
*/
html {min-width:320px}
.ImgJean, .ImgMartha, .ImgCharles, .ImgJulie, .ImgKelly {margin : 6px 0}
.BoutonVertSuivant a{margin:20px 0;width:auto }
.BoutonBleu a{margin:20px 0;width:auto }
.BoutonVertRetour a{float:none;}
.BoutonRouge a, .BoutonVertRetour a {height:auto}
.audio-player{margin:20px auto}
}


/* 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;

}