body, html {
  margin: 0;
  padding: 0;
}

img {
  border: none;
}

@font-face {
  font-family: 'franklingothic_urwmedium';
  src: url("../fonts/franklingothicurw-med-webfont.woff2") format("woff2"), url("../fonts/franklingothicurw-med-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

::selection {
  background: transparent;
}

::-moz-selection {
  background: transparent;
}

#mar_conteneur {
  max-width: 555px;
  margin: auto;
  font-family: 'franklingothic_urwmedium', arial, helevtica, sans-serif;
  position: relative;
  background: #191919 url(../img/fond.png) repeat;
  background-size: 9px;
  color: #ffffff;
  border: 15px solid #000000;
  box-shadow: inset 0px 0px 20px #000000;
  overflow: hidden;
  box-sizing: border-box;
}

#mar_conteneur img {
  border: none;
  display: inline-block;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: initial;
  width: auto;
}

#mar_conteneur p, #mar_conteneur div {
  line-height: initial;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#mar_conteneur a {
  box-shadow: none !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#mar_conteneur #mar_header {
  padding: 7% 0%;
  box-sizing: border-box;
  text-align: center;
}

#mar_conteneur #mar_logo {
  width: 200px;
  max-width: 50%;
}

#mar_conteneur .mar_titre {
  width: 64%;
  margin: 0% 18% 5% 18%;
  color: #ffffff;
}

#mar_conteneur .mar_texte_encadre {
  font-size: 16px;
  width: 78%;
  margin: 6% 11%;
  background: #000000;
  border: 5px solid #ffe9ab;
  border-radius: 30px;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

#mar_conteneur .mar_texte_encadre p {
  margin: 5%;
}

#mar_conteneur .mar_texte_encadre a {
  color: #ffe9ab;
}

#mar_conteneur .mar_bas_page {
  width: 100%;
  height: 60px;
  background: #000000;
  margin-top: 10px;
}

#mar_conteneur .mar_bas_page div {
  width: 100%;
  height: 100%;
  border-radius: 0 0 30px 30px;
  background: radial-gradient(circle, #ffeecf 0%, #ffe1a4 100%);
}

#mar_conteneur .mar_page {
  display: none;
}

#mar_conteneur #mar_page1 {
  display: block;
}

#mar_conteneur #mar_fil {
  position: absolute;
  width: 12%;
  height: auto;
  right: 19%;
  margin-top: 18%;
}

#mar_conteneur #mar_titre {
  width: 63%;
  height: auto;
  margin: 6% 18.5% 7% 18.5%;
}

#mar_conteneur #mar_bouton_commencer {
  width: 16%;
  height: auto;
  margin: 12% auto 4% auto;
  position: relative;
  cursor: pointer;
}

#mar_conteneur #mar_bouton_commencer img {
  width: 100%;
  height: auto;
  pointer-events: none;
}

#mar_conteneur #mar_bouton_commencer #mar_bouton_volume {
  position: absolute;
  top: 0%;
  left: 0%;
  transform-origin: 50% 32%;
  transform: scaleY(1);
  transition: all 0.3s ease;
}

#mar_conteneur #mar_bouton_commencer #mar_bouton_centre {
  position: absolute;
  top: 0%;
  left: 0%;
  transition: all 0.3s ease;
}

#mar_conteneur #mar_bouton_commencer.active {
  cursor: pointer;
}

#mar_conteneur #mar_bouton_commencer.active #mar_bouton_volume {
  top: 67%;
  transform: scaleY(-1);
}

#mar_conteneur #mar_bouton_commencer.active #mar_bouton_centre {
  top: 67%;
}

#mar_conteneur #mar_conteneur_question {
  min-height: 472px;
}

#mar_conteneur #mar_liste_choix1 {
  text-align: center;
  margin: 3% 0;
}

#mar_conteneur #mar_liste_choix1 .mar_choix {
  width: 28%;
  margin: 0 1%;
}

#mar_conteneur .mar_choix {
  text-align: center;
  padding: 0;
  margin: 0;
  border: 5px solid #ffe9ab;
  cursor: pointer;
  display: inline-block;
  border-radius: 20px;
  background: #000000;
  box-sizing: border-box;
}

#mar_conteneur .mar_choix p {
  padding: 0 4%;
  margin:1em 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 18px;
}

#mar_conteneur .mar_choix.mar_choisi {
  box-shadow: 0px 0px 5px 1px #ffe9ab;
}

#mar_conteneur .mar_type {
  position: relative;
}

#mar_conteneur .mar_traits {
  position: relative;
  pointer-events: none;
}

#mar_conteneur .mar_trait {
  width: 3px;
  height: 18px;
  margin-left: calc(50% - 2px);
  background: #000000;
  border-radius: 1px;
}

#mar_conteneur .mar_trait.actif {
  background: red;
}

#mar_conteneur #mar_bouton_tourne {
  width: 25%;
  height: auto;
  margin: 4% 37.5%;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

#mar_conteneur .mar_2_choix .mar_trait1 {
  position: absolute;
  left: -10%;
  transform: rotate(-45deg);
}

#mar_conteneur .mar_2_choix .mar_trait2 {
  position: absolute;
  left: 10%;
  transform: rotate(45deg);
}

#mar_conteneur .mar_2_choix .mar_trait3 {
  display: none;
}

#mar_conteneur .mar_2_choix #mar_bouton_tourne.mar_tourne_1 {
  transform: rotate(15deg);
}

#mar_conteneur .mar_2_choix #mar_bouton_tourne.mar_tourne_2 {
  transform: rotate(75deg);
}

#mar_conteneur .mar_3_choix .mar_trait1 {
  position: absolute;
  top: 20px;
  left: -13%;
  transform: rotate(-45deg);
}

#mar_conteneur .mar_3_choix .mar_trait3 {
  position: absolute;
  top: 20px;
  left: 13%;
  transform: rotate(45deg);
}

#mar_conteneur .mar_3_choix .mar_choix:nth-child(2n+1) {
  position: relative;
  top: 30px;
}

#mar_conteneur .mar_3_choix #mar_bouton_tourne.mar_tourne_1 {
  transform: rotate(0deg);
}

#mar_conteneur .mar_3_choix #mar_bouton_tourne.mar_tourne_2 {
  transform: rotate(45deg);
}

#mar_conteneur .mar_3_choix #mar_bouton_tourne.mar_tourne_3 {
  transform: rotate(90deg);
}

#mar_conteneur .mar_conteneur_branchement_jack {
  width: 40%;
  position: relative;
  z-index: 1;
}

#mar_conteneur #mar_branchement_jack {
  width: 100%;
}

#mar_conteneur #mar_liste_choix2 {
  position: absolute;
  width: 88%;
  left: 3%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

#mar_conteneur #mar_liste_choix2 .mar_choix {
  margin: 4% 0;
  width: 100%;
}

#mar_conteneur #mar_cable_jack {
  position: absolute;
  width: 100%;
  height: auto;
  top: 42%;
  left: 54%;
  transition: top 0.2s 0.1s ease, left 0.2s ease;
}

#mar_conteneur #mar_cable_jack.mar_branchement1 {
  top: 19%;
  left: 31.5%;
  transition: top 0.2s ease, left 0.2s 0.1s ease;
}

#mar_conteneur #mar_cable_jack.mar_branchement2 {
  top: 61%;
  left: 31.5%;
  transition: top 0.2s ease, left 0.2s 0.1s ease;
}

#mar_conteneur .clear {
  clear: left;
}

#mar_conteneur #mar_conteneur_progressbar {
  display: none;
  position: relative;
  width: 60%;
  margin: 10% auto 6% auto;
}

#mar_conteneur #mar_progressbar_fond {
  width: 100%;
  height: auto;
}

#mar_conteneur #mar_progressbar_volume {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  transform-origin: 32% 50%;
  transition: all 0.2s ease;
}

#mar_conteneur #mar_progressbar_centre {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  transition: all 0.2s ease;
}

#mar_conteneur #mar_conteneur_input_range {
  width: 30%;
  max-width: 100%;
  margin: auto;
  height: 45%;
  position: absolute;
  z-index: 2;
  top: 39%;
  left: 35%;
}

#mar_conteneur input[type=range] {
  position: absolute;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  top: 0px;
  background: transparent;
  outline: none;
}

#mar_conteneur input[type=range]:focus {
  outline: none;
}

#mar_conteneur input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 130px;
  cursor: pointer;
  background: rgba(0, 255, 255, 0);
  border: none;
  outline: none;
  opacity: 0;
}

#mar_conteneur input[type=range]::-webkit-slider-thumb {
  height: 130px;
  width: 33%;
  background: rgba(255, 0, 0, 0);
  cursor: pointer;
  -webkit-appearance: none;
  outline: none;
  opacity: 0;
}

#mar_conteneur input[type=range]::-moz-range-track {
  width: 100%;
  height: 130px;
  cursor: pointer;
  background: rgba(0, 255, 255, 0);
  outline: none;
}

#mar_conteneur input[type=range]::-moz-range-thumb {
  height: 130px;
  width: 33%;
  background: rgba(255, 0, 0, 0);
  border: none;
  cursor: pointer;
  outline: none;
}

#mar_conteneur input[type=range]::-ms-track {
  width: 100%;
  height: 130px;
  cursor: pointer;
  background: rgba(0, 255, 255, 0);
  border-color: transparent;
  border-width: 0;
  color: transparent;
  outline: none;
}

#mar_conteneur input[type=range]::-ms-fill-lower {
  background: transparent;
  border: none;
  outline: none;
}

#mar_conteneur input[type=range]::-ms-fill-upper {
  background: transparent;
  border: none;
  outline: none;
}

#mar_conteneur input[type=range]::-ms-thumb {
  height: 130px;
  width: 33%;
  background: rgba(255, 0, 0, 0);
  border: none;
  cursor: pointer;
  outline: none;
}

#mar_conteneur input[type=range]::-ms-tooltip {
  display: none;
}

#mar_conteneur .mar_2_choix input[type=range]::-webkit-slider-thumb {
  width: 50%;
}

#mar_conteneur .mar_2_choix input[type=range]::-moz-range-thumb {
  width: 50%;
}

#mar_conteneur .mar_2_choix input[type=range]::-ms-thumb {
  width: 50%;
}

#mar_conteneur #mar_titre_resultat {
  width: 60%;
  margin: 0% 20% 1% 20%;
}

#mar_conteneur #mar_resultat_profil {
  margin-top: 0%;
  line-height: initial;
}

#mar_conteneur #mar_image_resultat {
  width: 44%;
  height: auto;
  margin: 0 28%;
}

@media screen and (max-width: 555px) {
  #mar_conteneur .mar_texte_encadre {
    border-width: 1vw;
  }
  #mar_conteneur .mar_choix {
    border-radius: 4vw;
    border-width: 1vw;
  }
  #mar_conteneur .mar_choix p {
    font-size: 2.8vw;
    line-height: 3vw;
  }
  #mar_conteneur .mar_trait {
    width: 0.5vw;
    height: 3.24vw;
  }
  #mar_conteneur .mar_3_choix .mar_trait1 {
    top: 3.6vw;
  }
  #mar_conteneur .mar_3_choix .mar_trait3 {
    top: 3.6vw;
  }
  #mar_conteneur .mar_3_choix .mar_choix:nth-child(2n+1) {
    top: 5.4vw;
  }
  #mar_conteneur .mar_bas_page {
    height: 11vw;
  }
  #mar_conteneur #mar_conteneur_question {
    min-height: 98vw;
  }
  #mar_conteneur input[type=range]::-webkit-slider-runnable-track {
    height: 26vw;
  }
  #mar_conteneur input[type=range]::-webkit-slider-thumb {
    height: 26vw;
  }
  #mar_conteneur input[type=range]::-moz-range-track {
    height: 26vw;
  }
  #mar_conteneur input[type=range]::-moz-range-thumb {
    height: 26vw;
  }
  #mar_conteneur input[type=range]::-ms-track {
    height: 26vw;
  }
  #mar_conteneur input[type=range]::-ms-thumb {
    height: 26vw;
  }
}

@media screen and (max-width: 400px) {
  #mar_conteneur .mar_texte_encadre {
    font-size: 4vw;
  }
}