/* ------------------------------- */
/* CSS by Armadiyo (Nov. 2016)    */
/* www.armadiyo.com                */
/* ------------------------------- */

@font-face {
  font-family: 'VistaSansOT-Medium';
  src: url('../fonts/VistaSansOT-Medium.eot?#iefix') format('embedded-opentype'),  url('../fonts/VistaSansOT-Medium.otf')  format('opentype'),
         url('../fonts/VistaSansOT-Medium.woff') format('woff'), url('../fonts/VistaSansOT-Medium.ttf')  format('truetype'), url('../fonts/VistaSansOT-Medium.svg#VistaSansOT-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'VistaSansOT-Book';
  src: url('../fonts/VistaSansOT-Book.eot?#iefix') format('embedded-opentype'),  url('../fonts/VistaSansOT-Book.otf')  format('opentype'),
         url('../fonts/VistaSansOT-Book.woff') format('woff'), url('../fonts/VistaSansOT-Book.ttf')  format('truetype'), url('../fonts/VistaSansOT-Book.svg#VistaSansOT-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

* { 
  padding:0;
  margin:0;
  font-family:'VistaSansOT-Book';
  -webkit-font-smoothing: antialiased;
}  
    
body {
    background: #ffffff;
}

a {
    color: #414343;
    text-decoration: none;
    cursor: pointer;
}

a:focus {
    outline: thin dotted;
}
a:link,
a:visited,
a:hover,
a:active {
    outline: none
}
a:active,
a:hover {
    color: #fea104;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-weight: normal;
    margin: 0px;
}
h1 {
    margin-top: 90px;
    font-size: 46px;
    color: #284646;
}
h2 {
    font-family: 'VistaSansOT-Medium';
    font-size: 24px;
    color: #fff;
}
h3{
    font-size: 24px;
    line-height: 30px;
    color: #284646;
}
h4{
    font-size: 20px;
    line-height: 26px;
    color: #284646;
    margin-top: 10px;
}
.medium36{
    font-family: 'VistaSansOT-Medium';
    font-size: 36px;
    line-height: 36px;
}
b,
strong {
    font-weight: 700;
}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.clear{clear:both;}

.floatLeft{float:left;}
.floatRight{float:right;}
.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}

.span12 {width: 100%;}
.span11 {width: 91.66%;}
.span10 {width: 83.33%;}
.span9 {width: 75%;}
.span8 {width: 65.34%;}
.span7 {width: 58.33%;}
.span6 {width: 50%;}
.span5 {width: 41.66%;}
.span4 {width: 30.66%;}
.span3 {width: 25%;}
.span2 {width: 13.33%;}
.span1 {width: 8.33%;}
.span05 {width: 4.16%;}
.span03 {width: 3%;}
.w100{width: 100%;}
.h100{height: 100%;}
.invisible{display: none;}
#page{
  width: 100%;
  height: 100%;
  vertical-align: top;  
  margin:0px auto 0px auto;
  position: relative;
  /*min-height: 850px;*/
}
.dbonly{display: none;}

/* --------------------------------------------------------------------------------------------------- */
/* FORMULAIRES                                                                                              */
/* --------------------------------------------------------------------------------------------------- */
input{
    font-size: 24px;
    line-height: 24px;
    color: #284646;
    padding: 5px;
    text-align:center;
    width: 400px;
}
textarea{
    font-size: 18px;
    line-height: 20px;
    color: #284646;
    padding: 10px 20px;
    text-align:left;
    width: 50%;
    height: 90px;
}
.suggestionList ul{
    list-style: none;
    display: inline-block;
    margin: 20px auto 0px auto;
}
.suggestionList ul li{
    margin: 5px 10px ;
    min-width: 220px;
    width: 31%;
    height: 55px;
    line-height: 55px;
    list-style-type: none;
    color:#284646;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
    position: relative;
    float: left;
    -webkit-box-shadow: -4px 4px 0px 0px rgba(171,180,180,1);
    -moz-box-shadow: -4px 4px 0px 0px rgba(171,180,180,1);
    box-shadow: -4px 4px 0px 0px rgba(171,180,180,1);
    -webkit-transition:-webkit-all 100ms;
    transition:all 100ms;
    border-radius: 8px;
}
.suggestionList ul li:nth-child(5n){
    background-color: rgba(92,162,162,0.2);
}
.suggestionList ul li:nth-child(5n+1){
    background-color: rgba(92,162,162,0.4);
}
.suggestionList ul li:nth-child(5n+2){
    background-color: rgba(92,162,162,0.6);
}
.suggestionList ul li:nth-child(5n+3){
    background-color: rgba(92,162,162,0.8);
}
.suggestionList ul li:nth-child(5n+4){
    background-color: rgba(92,162,162,1);
}
.quartiers .suggestionList ul li{
    line-height: 55px;
}
.quartiers .suggestionList ul li p{
    font-size: 12px;
    line-height: 14px;
    display:inline-block;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------------------------------- */
/* HEADER                                                                                              */
/* --------------------------------------------------------------------------------------------------- */
header{
    width: 100%;
    height: 201px;
    background: url('../../images/header-bg.png') repeat-x top center #fff;
    background-size: contain;
    z-index: 10;
}
.header-main{
    max-width: 1200px;
    margin: auto;
    text-align: center;
}
.header-main .logo-cndp{
    width: 55%;
    max-width: 527px;
    height: auto;
}
.header-main .logo-cpdp{
    width: 44%;
    max-width: 374px;
    height: auto;
}

/* --------------------------------------------------------------------------------------------------- */
/* FOOTER                                                                                              */
/* --------------------------------------------------------------------------------------------------- */
footer{
    z-index: 1;
    width: 100%;
    /*position: absolute;
    bottom: 0px;*/
}
.footer-main{
    position: relative;
    max-width: 1200px;
    height: 130px;
    margin: 0px auto 30px auto;
    background: url('../../images/footer-bulles.png') no-repeat 145px bottom;
}
.footer-main ul{
    position: absolute;
    right: 0px;
    bottom: -5px;
    list-style: none;
    list-style-type: none;
}
.footer-main ul li{
    float: left;
    vertical-align: bottom;
    line-height: 30px;
    font-size: 16px;
}
.footer-main ul li:nth-child(0n+1){
    color: #494b4b;
    margin-right: 25px;
}
.footer-main ul li:nth-child(0n+2){
    color: #494b4b;
    margin-right: 5px;
}
.footer-main ul li:nth-child(0n+3){
    margin-right: 155px;
}

/* --------------------------------------------------------------------------------------------------- */
/* INTERIEUR                                                                                           */
/* --------------------------------------------------------------------------------------------------- */
.interieur{
    z-index: 5;
    max-width: 1200px;
    margin: 20px auto 15px auto;
    position: relative;
    text-align: center;
}
.erreur,.erreur2{
    font-size: 16px;
    color: red;
}
.legende{
    font-size: 14px;
    opacity: 0.8;
    font-style: italic;
}
.bouton{
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    text-align: left;
    box-shadow: 3px 3px 0px 3px rgba(158, 166, 165, 0.95);
    -moz-box-shadow: 3px 3px 0px 3px rgba(158, 166, 165, 0.95);
    -webkit-box-shadow: 3px 3px 0px 3px rgba(158, 166, 165, 0.95);
    -webkit-transition:-webkit-transform 100ms;
    transition:transform 100ms;
    cursor: pointer;
}
.bouton:hover{
    -webkit-transform:scale(.95);
    transform:scale(.95);    
}

/* --------------------------------------------------------------------------------------------------- */
/* Page Accueil                                                                                        */
/* --------------------------------------------------------------------------------------------------- */
.choix-questionnaire{
    list-style: none;
    list-style-type: none;
    display: inline-block;
    margin-top: 20px;
}
.choix-questionnaire li{
    float: left;
    margin: 0px 35px 20px 35px;
}
.choix-questionnaire li:nth-child(0n+1) .bouton{
    background-color: #fea104;
    width: 260px;
    height: 85px;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    padding: 4% 4%;
}
.choix-questionnaire li:nth-child(0n+2) .bouton{
    background-color: #fea104;
    width: 390px;
    height: 110px;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    padding: 4% 4%;
}
.choix-questionnaire li .bouton img{
    float: left;
}
.choix-questionnaire li .bouton p{
    margin-left: 15px;
    margin-top: 15px;
    float: left;
}
.choix-questionnaire li .bouton p:after{
    clear:both;
}

/* --------------------------------------------------------------------------------------------------- */
/* Barre de progression                                                                                */
/* --------------------------------------------------------------------------------------------------- */
.barre-progression{
    position: relative;
    width: 480px;
    height: 12px;
    background-color: #c5dadb;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 0px auto 50px auto;
}
.barre-progression-etat{
    position: relative;
    width: 0;
    height: 12px;
    background-color: #859e9b;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;    
}
.barre-progression-valeur{
    position: absolute;
    top: 12px;
    right: -12px;
    color: #859e9b;
    font-size: 16px;
}

/* --------------------------------------------------------------------------------------------------- */
/* Navigation Question                                                                                       */
/* --------------------------------------------------------------------------------------------------- */
.navigation{
    display: inline-block;
    margin: 20px auto 0px auto;
}
.navigation ul{
    list-style: none;
}
.navigation ul li{
    float: left;
    margin: 0px 50px;
    width: 120px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    border: 1px solid #3c5656;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px; 
    font-size: 14px;
    color: #3c5656;
    text-transform: uppercase;
    text-align: center;
}
.navigation ul li:nth-child(0n+1){
    background:url("../../images/navigation-fleche-gauche-norm.png") no-repeat;
    background-position: 15px 50%;
    -webkit-transition:-webkit-all 100ms;
    transition:all 100ms;
    text-align: right;
    padding-right: 20px;
}
.navigation ul li:nth-child(0n+1):hover{
    background:url("../../images/navigation-fleche-gauche-surv.png") no-repeat;
    background-position: 5px 50%;
}
.navigation ul li:nth-child(0n+2){
    background:url("../../images/navigation-fleche-droite-norm.png") no-repeat;
    background-position: 102px 50%;
    -webkit-transition:-webkit-all 100ms;
    transition:all 100ms;
    text-align: left;
    padding-left: 20px;
}
.navigation ul li:nth-child(0n+2):hover{
    background:url("../../images/navigation-fleche-droite-surv.png") no-repeat;
    background-position: 112px 50%;
}
.inactif{
    opacity: 0.5;
}
.inactif:hover{
    background:url("../../images/navigation-fleche-droite-norm.png") no-repeat !important;
    background-position: 102px 50% !important;
}
.btn{
    margin: 0px 50px;
    width: 500px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    border: 1px solid #3c5656;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px; 
    font-size: 14px;
    color: #3c5656;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
}

/* --------------------------------------------------------------------------------------------------- */
/* Page Question                                                                                       */
/* --------------------------------------------------------------------------------------------------- */
.titre-thematique{
    list-style-type: none;
    display: inline-block;
    margin: auto;
    border-radius:8px;
    background-color: #fea104;
}
.titre-thematique li{
    height: 45px;
    line-height: 45px;
    float: left;
    position:relative;
    text-transform: uppercase;
}
.titre-thematique li h2{
    font-family: 'VistaSansOT-Book';
}
.titre-thematique li img{
    vertical-align: middle;
}
.titre-thematique li:nth-child(0n+1){
    padding: 0px 15px 0px 15px;
}
.titre-thematique li:nth-child(0n+2):before{
    content:'';
    display: inline-block;
    width: 2px;
    height: 35px;
    background-color: #ffffff;
    position:absolute;
    top:5px;
    left:0px;
}
.titre-thematique li:nth-child(0n+2){
    padding: 0px 15px 0px 15px;
}

.question{
    margin: 40px auto 0px auto;
    width: 75%;
    text-align: center;
}
.reponse{
    margin: 50px auto 50px auto;
    text-align: center;
    position: relative;
}

/* Réponse : type choix sexe */
.choix_sexe{
    list-style-type: none;
    display: inline-block;
    position: relative;
    margin:auto;
}
.choix_sexe li{
    margin: 0px 8px;
    width: 130px;
    height: 160px;
    list-style-type: none;
    cursor: pointer;
    text-align: center;
    position: relative;
    float: left;
    -webkit-transition:-webkit-all 100ms;
    transition:all 100ms;
}
.choix_sexe li:hover{
    -webkit-transform:scale(.95);
    transform:scale(.95); 
}


/* Réponse : type choix unique */
.choix_unique{
    list-style-type: none;
    display: inline-block;
    position: relative;
    margin:auto;
    /*height: 80px;*/
}
.choix_unique .choix_little{
    font-size: 14px !important;
}
.choix_unique .choix_big{
    height: auto;
    padding: 10px;
    min-height: 45px;
}
.choix_unique .choix_big p{
    font-size: 14px !important;
    line-height: 16px;
    vertical-align: middle;
}
.choix_unique li{
    margin: 0px 8px;
    width: 190px;
    height: 55px;
    line-height: 55px;
    list-style-type: none;
    color:#284646;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
    position: relative;
    float: left;
    -webkit-box-shadow: -4px 4px 0px 0px rgba(171,180,180,1);
    -moz-box-shadow: -4px 4px 0px 0px rgba(171,180,180,1);
    box-shadow: -4px 4px 0px 0px rgba(171,180,180,1);
    -webkit-transition:-webkit-all 100ms;
    transition:all 100ms;  
    border-radius: 8px;
}
.choix_unique li:hover{
    -webkit-box-shadow: inset 0px 6px 0px 0px rgba(254,161,4,1);
    -moz-box-shadow: inset 0px 6px 0px 0px rgba(254,161,4,1);
    box-shadow: inset 0px 6px 0px 0px rgba(254,161,4,1);
    -webkit-transform:scale(.95);
    transform:scale(.95); 
}
.choix_unique_clic{
    -webkit-box-shadow: inset 0px 6px 0px 0px rgba(254,161,4,1) !important;
    -moz-box-shadow: inset 0px 6px 0px 0px rgba(254,161,4,1) !important;
    box-shadow: inset 0px 6px 0px 0px rgba(254,161,4,1) !important;
    -webkit-transform:scale(1) !important;
    transform:scale(1) !important; 
}
.choix_unique li:nth-child(0n+1){
    background-color: rgba(92,162,162,0.2);
}
.choix_unique li:nth-child(0n+2){
    background-color: rgba(92,162,162,0.4);
}
.choix_unique li:nth-child(0n+3){
    background-color: rgba(92,162,162,0.6);
}
.choix_unique li:nth-child(0n+4){
    background-color: rgba(92,162,162,0.8);
}
.choix_unique li:nth-child(0n+5){
    background-color: rgba(92,162,162,1);
}
.choix_unique li:nth-child(0n+6){
    background-color: rgba(92,162,162,1);
}
.choix_unique li:nth-child(0n+7){
    background-color: rgba(92,162,162,1);
}


/* Réponse : type ligne de metro */
.choix_station{
    width: 96%;
    height: 350px;

    list-style-type: none;
    display: inline-block;
    position: relative;
    margin: 0px auto 0px auto;
    margin-left: 4%;
    /*height: 80px;*/
}
.choix_station:after{
    position: absolute;
    top: 7px;
    left: 3%;
    background: #bebbbb;
    width: 83%;
    content:' ';
    display:block;
    height: 4px;
    z-index: 8;
}
.choix_station li{
    width: 2.7%;
    list-style-type: none;
    color:#5ea2a3;
    cursor: pointer;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    position: relative;
    float: left;
    z-index: 9;
    margin-bottom: 20px;
    padding: 30px 1.5% 0px 0px;
}
.choix_station li p{
    font-size: 16px;
    color:#5ea2a3;
    width: 350px;   
    text-align: left;
    position: absolute;
    left: -145px;
    top: 195px;    
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.choix_station li:before {
   content: '';
   color: #359cc5;
   font-size: 15px;
   font-family: 'VistaSansOT-Book';
   width: 15px;
   height: 15px;
   background-color: #5ea2a3;
   -moz-border-radius: 15px; 
   -webkit-border-radius: 15px; 
   border-radius: 15px;
   position: absolute;
   left: 50%;
   top: 0px;
   display: block;
   box-shadow: -1px 1px 0px 2px rgba(158, 166, 165, 0.95);
   -moz-box-shadow: -1px 1px 0px 2px rgba(158, 166, 165, 0.95);
   -webkit-box-shadow: -1px 1px 0px 2px rgba(158, 166, 165, 0.95);
   -webkit-transition:-webkit-transform 100ms;
   transition:transform 100ms;
}
.choix_station li:hover::before {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

.choix_station li.active{font-size:12px;line-height: 14px; color: #000000;}
.choix_station li.active:before{border: 1px solid #000000;}
.choix_station li .coche{
    background: url('../../images/coche.png');
    width: 50px;
    height: 49px;
    position: absolute;
    top: -32px;
    left: 40%;
    display: none;
}

/* Réponse : type choix multiple */
.choix_multiple{
    width: 90%;
    list-style-type: none;
    display: inline-block;
    position: relative;
    margin: 0px auto 0px auto;
    margin-left: 10%;
    /*height: 80px;*/
}

.choix_multiple li{
    width: 43%;
    height: 40px;
    padding-left: 5%;
    margin-right: 2%;
    list-style-type: none;
    color:#5ea2a3;
    cursor: pointer;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    position: relative;
    float: left;
    z-index: 9;
    margin-bottom: 25px;
}
.choix_multiple_2cols li{
    width: 300px;
}
.choix_multiple li:before {
   content: '';
   color: #359cc5;
   font-size: 15px;
   font-family: 'VistaSansOT-Book';
   width: 25px;
   height: 25px;
   background-color: #5ea2a3;
   -moz-border-radius: 25px; 
   -webkit-border-radius: 25px; 
   border-radius: 25px;
   position: absolute;
   left: 0px;
   top: 0px;
   display: block;
   box-shadow: -1px 1px 0px 2px rgba(158, 166, 165, 0.95);
   -moz-box-shadow: -1px 1px 0px 2px rgba(158, 166, 165, 0.95);
   -webkit-box-shadow: -1px 1px 0px 2px rgba(158, 166, 165, 0.95);
   -webkit-transition:-webkit-transform 100ms;
   transition:transform 100ms;
}
.choix_multiple li:hover::before {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

.choix_multiple li.active{font-size:12px;line-height: 14px; color: #000000;}
.choix_multiple li.active:before{border: 1px solid #000000;}
.choix_multiple li .coche{
    background: url('../../images/coche.png');
    width: 50px;
    height: 49px;
    position: absolute;
    top: -22px;
    left: 0px;
    display: none;
}

/* Réponse : type notation */
.notation{
    list-style-type: none;
    display: inline-block;
    position: relative;
    margin: 50px auto 0px auto;
    height: 80px;
}
.notation:after{
    position: absolute;
    top: -40px;
    left: 60px;
    background: #bebbbb;
    width: 480px;
    content:' ';
    display:block;
    height: 4px;
    z-index: 8;
}
.notation-3dots:after{
    width: 240px !important;
}
.notation-3dots li:nth-last-child(0n+1) {
    margin-left: 0px !important;
}
.notation li{
    width: 120px;
    height: 80px;
    list-style-type: none;
    color:#5ea2a3;
    cursor: pointer;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    position: relative;
    float: left;
    z-index: 9;
}
.notation li:before {
   content: '';
   color: #359cc5;
   font-size: 15px;
   font-family: 'VistaSansOT-Book';
   width: 25px;
   height: 25px;
   background-color: #5ea2a3;
   -moz-border-radius: 25px; 
   -webkit-border-radius: 25px; 
   border-radius: 25px;
   position: absolute;
   left: 50px;
   top: -50px;
   display: block;
   box-shadow: -1px 1px 0px 2px rgba(158, 166, 165, 0.95);
   -moz-box-shadow: -1px 1px 0px 2px rgba(158, 166, 165, 0.95);
   -webkit-box-shadow: -1px 1px 0px 2px rgba(158, 166, 165, 0.95);
   -webkit-transition:-webkit-transform 100ms;
   transition:transform 100ms;
}
.notation li:hover::before {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}
.notation li:nth-last-child(0n+1) {
    margin-left: 50px;
}
.notation li.active{font-size:12px;line-height: 14px; color: #000000;}
.notation li.active:before{border: 1px solid #000000;}
.coche{
    background: url('../../images/coche.png');
    width: 50px;
    height: 49px;
    position: absolute;
    top: -70px;
    left: 45px;
    display: none;
}


.carte{
    position: relative;
    width: 350px;
    height: 398px;
    background: url('../../images/carte-quartiers.png') no-repeat center center;
    margin: 20px auto 0px auto;
}
.dot{
    position: absolute;
    width: 45px;
    height: 45px;
    line-height: 43px;
    -moz-border-radius: 45px; 
    -webkit-border-radius: 45px; 
    border-radius: 45px;
    font-size: 20px;
    color: #fff;
    background-color: #565655;
    text-align: center;
    cursor: pointer;
}
.dot:hover{
    background-color: #fea104;
}
#dot-1{left: 174px;top: 160px;}
#dot-2{left: 115px;top: 211px;}
#dot-3{left: 148px;top: 82px;}
#dot-4{left: 227px;top: 135px;}
#dot-5{left: 211px;top: 275px;}
#dot-6{left: 47px;top: 242px;}

.draggable{
    cursor: pointer;
    display: block;
    width: 300px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #565655;
    border-radius: 3px;
    margin:auto;
    font-size: 16px;
    margin:0px 10px 20px 10px;
}
.dropzone {
    width: 300px;
    height: 30px;
    line-height: 30px;
    border: 1px dashed #565655;
    border-radius: 3px;
    font-size: 16px;
    text-align: center;
    margin:auto;
    margin:0px 10px 20px 10px;
}



/* --------------------------------------------------------------------------------------------------- */
/* Responsive                                                                                          */
/* --------------------------------------------------------------------------------------------------- */

/* Smaller screens & really big devices (landscape mode) */
@media all and (max-width: 1160px) {
    .header-main,.interieur,.footer-main{
        width: 1000px;
    }
    #page{
        min-height: 768px;
    }
}

/* Large devices in portrait mode */
@media all and (max-width: 990px) {
    .header-main, .interieur, .footer-main{
        width: 100%;
    }
    .floatLeft, .floatRight{
        float: none;
    } 
    #page{
        min-height: auto;
    }
    h1{margin-top: 40px;font-size: 34px;}
    h3{font-size: 20px;padding: 0px 5%;}
    h4{font-size: 18px;padding: 0px 10%;}
    /* Footer */
    footer{position: relative;}
    .footer-main{background: transparent;height: auto;text-align: center;}
    .footer-main ul{position: relative;padding:0;width: 80%;margin:auto;}
    .footer-main li{float: none;width: 100%;text-align: center;}

    /* Interieur */
    .choix-questionnaire{margin-top: 30px;}
    .choix-questionnaire li{
        float: none;
        width: 100%;
        text-align: center;
        margin: 0px auto 20px auto;
    }
    .choix-questionnaire li:nth-child(0n+1) .bouton,
    .choix-questionnaire li:nth-child(0n+2) .bouton{
        width: 90%;
        /*height: auto;*/
        height: 70px;
        text-align: left;
    }
    /*
    .choix-questionnaire li:nth-child(0n+1) .bouton img,
    .choix-questionnaire li:nth-child(0n+2) .bouton img,
    .choix-questionnaire li:nth-child(0n+1) .bouton p,
    .choix-questionnaire li:nth-child(0n+2) .bouton p{
        float: none;
    }*/
    .choix-questionnaire li:nth-child(0n+1) .bouton img,
    .choix-questionnaire li:nth-child(0n+2) .bouton img{
        width: 20%;
    }

    .choix-questionnaire li:nth-child(0n+1) .bouton p,
    .choix-questionnaire li:nth-child(0n+2) .bouton p{
        font-size: 16px;
        line-height: 20px;
    }
    .medium36{
        font-size: 24px;
    }
    .suggestionList ul li{
        width: 45%;
        min-width: 200px;
    }
}

/* Smaller devices & regular smartphones */
@media all and (max-width: 770px) {
    .dn{
        display: none;
    }
    .dbonly{
        display: block;
    }
    .span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9,.span10,.span11,.span12{
        width: 100%;
    }
    .barre-progression{
        width: 90%;
    }
    .titre-thematique{
        width: 100%;
    }
    .titre-thematique li{
        height: auto;
        line-height: 1;
        text-align: center;
        width: 96%;
        float: none;
        padding:2% !important;
        margin:0 !important;
    }
    .titre-thematique li:nth-child(0n+2):before{
        display: none;
    }
    .titre-thematique li img{
        max-height: 71px;
    }
    .question{
        width: 100%;
    }
    input{
        font-size: 24px;
        line-height: 24px;
        width: 90%;
    }
    .navigation ul li{
        margin: 0 5px;
        width: 110px;
        margin-bottom: 20px !important;
    } 
    .choix_unique, .choix_multiple{
        height: auto;
    }
    .choix_unique li{
        float: none;
        margin-bottom: 20px;
    }
    .choix_multiple{
        width: 90%;
    }
    .choix_multiple li,
    .choix_multiple_2cols li{
        width: 40%;
    }
    .choix_multiple li{
        padding-left: 5%;
        margin-bottom: 10px;
    }
    
    .notation li{
        width: 100px;
    }
    .notation:after{
        width: 400px;
    }
    .notation-3dots:after{
        width: 200px !important;
    }
}

@media all and (max-width: 740px) {
    header{
        height: auto !important;
        
    }
    .titre-thematique{
        width: 90%;
    }
    #page .texte{
        width: 90% !important;
    }
    .invisible{
        display: inline-block;
    }
    .header-main .logo-cndp{
        display: none;
    }
    .header-main .logo-cpdp{
        width: 100%;
        max-width: 374px;
    }
    .notation{height: auto;margin: 10px 0px 40px 0px;}
    .notation:after{display: none;}
    .notation li{
        width: 100%;
        min-width: 200px;
        margin: 0px 8px 10px 8px;
        height: 55px;
        line-height: 55px;
        list-style-type: none;
        color:#284646;
        cursor: pointer;
        font-size: 20px;
        text-align: center;
        position: relative;
        float: none;
        -webkit-box-shadow: -4px 4px 0px 0px rgba(171,180,180,1);
        -moz-box-shadow: -4px 4px 0px 0px rgba(171,180,180,1);
        box-shadow: -4px 4px 0px 0px rgba(171,180,180,1);
        -webkit-transition:-webkit-all 100ms;
        transition:all 100ms; 

    }
    .notation li:before{
        display: none;
    }
    .notation li:nth-last-child(0n+1){
        margin-left: 8px;
    }
    .notation-3dots li:nth-last-child(0n+1) {
        margin-left: 8px !important;
    }
    .notation li:nth-child(0n+1){
        background-color: rgba(92,162,162,0.2);
    }
    .notation li:nth-child(0n+2){
        background-color: rgba(92,162,162,0.4);
    }
    .notation li:nth-child(0n+3){
        background-color: rgba(92,162,162,0.6);
    }
    .notation li:nth-child(0n+4){
        background-color: rgba(92,162,162,0.8);
    }
    .notation li:nth-child(0n+5){
        background-color: rgba(92,162,162,0.9);
    }
    .notation li:nth-child(0n+6){
        margin-top: 20px;
        background-color: rgba(92,162,162,1);
    }    
    .coche{
        top: 0px;
        left: 0px;
    }
    .notation .coche{
        top: 0px;
        left: 0px;
        width: 100%;
        border-top: 6px solid #fea104;
        background: transparent !important;
    }    

    .choix_multiple li{
        padding-left: 10%;
    }
    .choix_multiple_2cols li{
        width: 70%;
    }

    .suggestionList ul li{
        width: 95%;
        min-width: 200px;
    }

    .choix_station{
        width: 70%;
        height: auto;
        margin-left: 30%;
    }
    .choix_station:after{
        position: absolute;
        top: 5px;
        left: 5px;
        background: #bebbbb;
        width: 4px;
        content:' ';
        display:block;
        height: 95%;
        z-index: 8;
    }
    .choix_station li{
        float: none;
        width: auto;
        height: auto;
    }
    .choix_station li p{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        left: 40px;
        top: -5px;
        width: auto;
    }
    .choix_station li:before{
        left: 0px;
    }
    .choix_station li .coche{
        left: -8px;
    }
    .btn{
        max-width: 500px;
        width: 90%;
        height: auto;
        font-size: 14px;
        line-height: 20px;
        margin:0;
    }

}

@media all and (max-width: 350px) {
    .carte{
        width: 100%;
    }
    .carte img{
        width: 100%;
    }
}

/* Question notation special ipad landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .dnonly{
        display: none;
    }
    .dbonly{
        display: block;
    }
}