*,
*::before,
*::after,
table span {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
table,
table * {
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
}
.listeContainer,
button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
button {
  margin: 0px 10px;
  padding: 1px;
  border: 0px;
  font-weight: bold;
  color: #ddd;
  background-color: #5a226d;
  cursor: pointer;
}
button:focus,
button:active {
  outline: none !important;
}
button:hover {
  background-color: #fafaff;
  color: #110a27;
  border: 1px solid #110a27;
}
button .hide {
  display: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nopointer {
  pointer-events: none;
}
.nopointer,
.nopointer * {
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
}
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
}
html,
body,
main,
#dessin,
#side,
#choix,
#choixListes,
#choixListes > div,
#choixResultCont {
  height: 100%;
  overflow: hidden;
}
@media (max-width: 1300px) {
  #choix > p,
  #choixListes > div > p,
  #choixResult th,
  #choixResultLeg {
    font-size: 85%;
    overflow: hidden;
  }
}
header {
  position: absolute;
  width: 100%;
  height: 60px;
  text-align: center;
  background-image: linear-gradient(to right,#7d6595 50%,#9ea2bf 50%);
  background-size: 100%;
}
header div {
  display: inline-block;
  height: 100%;
  width: 100%;
  max-width: 1850px;
  background-image: url(assets/bandeau.jpg);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
#introContainer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  margin-top: 60px;
  padding-bottom: 60px;
  background-image: url('assets/noirtransparent.png');
  overflow: hidden;
  transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
}
#introContainer.hide {
  width: 0px;
  height: 0px;
  margin-top: 0;
  padding-bottom: 0;
}
#introContainer #intro {
  margin-left: 15%;
  width: 70%;
  max-height: 100%;
  padding-bottom: 10px;
  background-color: #fafaff;
  text-align: center;
  overflow-y: auto;
}
#introContainer #intro > * {
  display: inline-block;
}
#introContainer #intro h1 {
  color: #5a226d;
}
#introContainer #intro .explique {
  width: 80%;
  padding-bottom: 10px;
  border: 4px solid #5a226d;
  color: #110a27;
  font-size: 115%;
  font-weight: bold;
  border-radius: 5px;
}
#introContainer #intro .explique h2 {
  margin: 10px 0;
}
#introContainer #intro p {
  width: 80%;
  margin: 5px auto;
}
#introContainer #intro p.col2 {
  display: table;
}
#introContainer #intro p.col2 .moite {
  display: table-cell;
  width: 50%;
  text-align: left;
}
#introContainer #intro p.col2 .moite img {
  width: 52px;
  background-color: #5a226d;
  margin-right: 5px;
  border: 1px solid #110a27;
  vertical-align: middle;
}
#introContainer #intro #introType {
  width: 60%;
}
#introContainer #intro #introType li {
  margin: 10px;
  padding: 10px;
  border: 1px solid #5a226d;
  color: #110a27;
  background-color: #fafaff;
  list-style: none;
  cursor: pointer;
  border-radius: 5px;
}
#introContainer #intro #introType li:hover {
  background-color: #5a226d;
  color: #fafaff;
}
main {
  position: absolute;
  width: 100%;
}
#dessin,
#side {
  position: relative;
  display: inline-block;
  width: 50%;
  padding-top: 60px;
  vertical-align: top;
  transition: width 0.2s ease-out;
  -webkit-transition: width 0.2s ease-out;
  -moz-transition: width 0.2s ease-out;
  -o-transition: width 0.2s ease-out;
}
#dessin {
  width: 50%;
}
#dessin.p25 {
  width: 25%;
}
#dessin button {
  position: absolute;
  width: 30px;
  height: 30px;
  margin-top: 2%;
  padding: 2.5%;
  border: 1px solid #110a27;
  border-radius: 5px;
  background-color: #5a226d;
  background-size: 100%;
}
#dessin button:hover {
  border-color: #ae98c6;
}
#dessin button.right {
  right: 3%;
}
#dessin button.left {
  left: 3%;
}
#dessin #lacherDessin {
  display: none;
  background-image: url('assets/drop.png');
}
#dessin #winProportion.p25 {
  background-image: url('assets/taille25-75.png');
}
#dessin #winProportion.p50 {
  background-image: url('assets/taille50-50.png');
}
#dessin #winProportion.p25-50 {
  background-image: url('assets/taille25-50.png');
}
#dessin #showIntro {
  top: 120px;
  z-index: 201;
  display: none;
  background-image: url('assets/intro.png');
}
#dessin svg {
  height: 100%;
  width: 100%;
}
#dessin svg #cellule {
  pointer-events: none;
}
#dessin svg .fade,
#dessin svg .fade * {
  fill-opacity: 0.4;
  stroke-opacity: 0.4;
}
#side {
  width: 50%;
}
#side.p75 {
  width: 75%;
}
#selectType {
  position: absolute;
  width: 300%;
  height: 0px;
  z-index: 10;
}
#selectType > * {
  display: inline-block;
  line-height: 0px;
  margin: 0;
  vertical-align: top;
}
#selectType > p {
  position: relative;
  z-index: 1;
}
#selectType > ul {
  position: relative;
  width: 25em;
  padding-left: 2.3em;
  background-color: #555;
}
#selectType > ul::before {
  content: '';
  position: absolute;
  left: 0.66em;
  top: 50%;
  width: 1.1em;
  height: 1.1em;
  margin-top: -0.2em;
  border: 7px solid transparent;
  border-top: 7px solid white;
}
#selectType > ul > li {
  margin: 1px 0;
  padding: 0px 10px;
  line-height: -2px;
  color: white;
  background-color: #7e6896;
  list-style: none;
  cursor: pointer;
}
#selectType > ul.ferme > li + li {
  position: absolute;
  display: none;
}
#side:first-of-type #selectType {
  right: 0px;
  text-align: right;
}
#side:first-of-type #selectType > ul {
  text-align: left;
}
#choix {
  position: relative;
  padding: 0 0 105px 0;
  z-index: 2;
}
#choix.choixMelange {
  padding-bottom: 80px;
}
#choix > p {
  width: 100%;
  margin: 0;
  padding: 0 3%;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: white;
  background-color: #5a226d;
}
#choix #choixListes {
  padding: 0 0 45px 0;
}
#choix #choixListes.choixMelange {
  padding-bottom: 45px;
}
#choix #choixListes #choixMelange {
  width: 100%;
  padding-bottom: 75px;
}
#choix #choixListes #choixMelange > p {
  height: 50px;
}
#choix #choixListes #choixMelange > p .typeName {
  text-transform: lowercase;
}
#choix #choixListes #choixMelange > .listeContainer {
  padding-bottom: 105px;
  overflow-y: scroll;
}
#choix #choixListes #choixMelange > .listeContainer > h3 {
  padding: 7px 10px 3px;
  margin: 0px;
  border-bottom: 5px solid #7e6896;
  color: #110a27;
  letter-spacing: 1px;
  font-family: "Book Antiqua", Palatino, serif;
}
#choix #choixListes #choixMelange > .listeContainer > ul {
  height: auto;
  overflow-y: auto;
}
#choix #choixListes #choixMelange > .choixFiltre {
  width: 100%;
  margin-top: 50px;
}
#choix #choixListes #choixMelange.choixHasard {
  padding-bottom: 50px;
}
#choix #choixListes #choixMelange.choixHasard .listeContainer {
  margin-top: 50px;
}
#choix #choixListes > div {
  position: relative;
  float: left;
  width: 33.333333333%;
}
#choix #choixListes > div > p {
  position: absolute;
  display: table;
  width: 100%;
  margin: 0;
  padding: 0 3%;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: white;
  background-color: #5a226d;
  overflow: hidden;
}
#choix #choixListes > div > p > span {
  display: table-cell;
  vertical-align: middle;
}
#choix #choixListes > div > .choixFiltre {
  height: 25px;
  width: 95%;
  margin-top: 25px;
  padding: 0 10px;
  border: 0;
  background-color: #dcdee8;
  background-image: url('assets/search-filter.png');
  background-repeat: no-repeat;
  background-position: center right;
  background-origin: content-box;
  box-shadow: 1px 1px 3px #918caf inset;
}
#choix #choixListes > div > .listeContainer {
  height: 100%;
  padding-bottom: 80px;
  color: #222;
  background-color: #fafaff;
}
#choix #choixListes > div > .listeContainer > ul {
  height: 100%;
  overflow-y: scroll;
}
#choix #choixListes > div > .listeContainer > ul > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 2.8em;
  padding: 10px 5px 10px 2.8em;
  border-bottom: 1px solid #ddd;
  box-shadow: 0px 0px 3px #d7e1fa inset;
  cursor: default;
}
#choix #choixListes > div > .listeContainer > ul > li::before {
  content: '';
  position: absolute;
  left: 0.8em;
  top: 50%;
  width: 1.1em;
  height: 1.1em;
  margin-top: -0.55em;
  border: 2px solid #5a226d;
}
#choix #choixListes > div > .listeContainer > ul > li:hover {
  background-color: #dcdee8;
}
#choix #choixListes > div > .listeContainer > ul > li.selected {
  color: white;
  background-color: #5a226d;
  box-shadow: none;
}
#choix #choixListes > div > .listeContainer > ul > li.selected::before {
  border: 2px solid #110a27;
  background-color: #110a27;
}
#choix #choixListes > div > .choixunique > ul > li::before {
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.6em;
}
#choix #choixListes > div .btnDeselect {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  border-right: 1px solid #fafaff;
  text-transform: full-width;
}
#choix #choixListes > div .btnDeselect:hover {
  border-color: #5a226d;
}
#choix #choixListes > div .btnDeselect.gris,
#choix #choixListes > div .btnDeselect.gris:hover {
  background-color: #dcdee8;
  color: #918caf;
  border-color: #e5d5eb;
  cursor: default;
}
#choix #choixResultCont {
  position: relative;
  width: 100%;
  padding-bottom: 115px;
  cursor: default;
}
#choix #choixResultCont > div:first-of-type {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
#choix #choixResultCont > div:first-of-type table {
  display: none;
  width: 100%;
  padding: 0 0 45px 0;
  border-collapse: collapse;
}
#choix #choixResultCont > div:first-of-type table tr {
  padding: 0 1%;
  border-bottom: 1px solid #5a226d;
}
#choix #choixResultCont > div:first-of-type table th {
  background-color: #5a226d;
  color: white;
}
#choix #choixResultCont > div:first-of-type table td {
  background-color: #f0eeff;
  padding: 15px 5px;
}
#choix #choixResultCont > div:first-of-type table td:last-of-type {
  text-align: center;
}
#choix #choixResultCont > div:first-of-type table td span {
  display: inline-block;
  width: 100%;
  padding: 0 5px;
}
#choix #choixResultCont > div:first-of-type table td .suppr {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 3px;
  padding: 0;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  color: white;
  border-radius: 10px;
  background-color: #ff5050;
  cursor: pointer;
}
#choix #choixResultCont > div:first-of-type table .chiffre {
  padding: 0;
}
#choix #choixResultCont > div:first-of-type table .corrCol {
  display: none;
}
#choix #choixResultCont #choixResultLeg {
  position: absolute;
  bottom: 45px;
  width: 100%;
  height: 70px;
  border-top: 1px solid black;
}
#choix #choixResultCont #choixResultLeg p {
  margin: 0;
  padding: 0 5px;
  line-height: 23.333333333333px;
}
#choix #choixResultCont #choixResultLeg span {
  padding: 0 5px;
}
#choix #choixResultCont #choixResultLeg .legCorr {
  display: none;
}
#choix #choixResultCont > div:first-of-type .juste,
#choix #choixResultCont > div:first-of-type .juste.faux,
#choix #choixResultCont > div:first-of-type .juste .faux,
#choix #choixResultCont > div:first-of-type .juste .manquant,
#choix #choixResultCont > div:last-of-type .juste,
#choix #choixResultCont > div:last-of-type .juste.faux,
#choix #choixResultCont > div:last-of-type .juste .faux,
#choix #choixResultCont > div:last-of-type .juste .manquant {
  color: #fafaff;
  background-color: #00ae3a;
}
#choix #choixResultCont > div:first-of-type .faux,
#choix #choixResultCont > div:last-of-type .faux {
  color: #d00015;
}
#choix #choixResultCont > div:first-of-type .manquant,
#choix #choixResultCont > div:last-of-type .manquant {
  color: #1500d0;
}
#choix #choixResultCont > div:first-of-type .espace,
#choix #choixResultCont > div:last-of-type .espace {
  padding-left: 20px;
}
#choix #choixResultCont > div:first-of-type .decale,
#choix #choixResultCont > div:last-of-type .decale {
  padding-top: 15px;
}
#choix > *:last-child {
  position: absolute;
  bottom: 80px;
  height: 45px;
  width: 100%;
  padding: 0 5px;
  border-top: 1px solid #110a27;
  background-color: #dcdee8;
}
#choix > *:last-child p {
  display: inline-block;
  line-height: 45px;
  margin: 0;
  vertical-align: middle;
}
#choix > *:last-child button {
  display: none;
  float: right;
  height: 44px;
  width: 44px;
  vertical-align: middle;
}
#choix > *:last-child button img {
  width: 100%;
  height: 100%;
}
footer {
  position: relative;
  height: 80px;
  margin-top: -80px;
  text-align: center;
  background-color: white;
  z-index: 5;
}
footer > * {
  display: inline-block;
  vertical-align: middle;
}
footer > a {
  padding: 7px;
  background-color: #dde;
  text-decoration: none;
  color: black;
}
#altext {
  position: absolute;
  display: none;
  padding: 5px;
  background-color: #fafaff;
  border: 1px solid #dcdee8;
  z-index: 1000;
}