/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
  max-width: 100%;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

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

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: "Unica One", cursive;
  height: auto;
  min-height: 100vh;
  background: #020038;
  color: #1d1c1d;
  padding: 0;
  overflow-x: hidden;
  /*-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#decor {
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#decor_haut_droite {
  position: absolute;
  right: 0;
  top: 0;
  width: 148px;
  height: 181px;
}

#decor_bas_droite {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 483px;
  height: 316px;
}

#decor_bas_gauche {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  height: 941px;
  max-height: 90%;
}

@media screen and (max-width: 800px) {
  #decor {
    display: none;
  }
}

@media screen and (orientation: portrait) {
  #decor {
    display: none;
  }
}

#conteneur_serie {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.titre_serie {
  font-family: "Nunito Sans", sans-serif;
  text-transform: uppercase;
  color: #020038;
  text-shadow: -1px 0 #FDC400, 0 1px #FDC400, 1px 0 #FDC400, 0 -1px #FDC400;
  text-align: center;
  width: calc(100% - 400px);
  margin: 0px auto;
  padding: 1vh;
  animation: titre_serie 3s 1 ease;
  font-size: min(2em, 4vh);
}

.item {
  margin: 1vh;
  width: 18vh;
  color: #01faec;
}

.item .valeur {
  font-size: 20px;
  font-size: min(20px, 3vh);
  text-align: center;
  margin-bottom: 0.5vh;
  white-space: normal;
  transition: height 0.2s;
}

.item .cercle {
  position: relative;
  width: 18vh;
  height: 18vh;
  border-radius: 50%;
  background: grey;
  text-align: center;
  border: 2px solid #01faec;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  transition: all 0.2s;
}

.item .cercle > img {
  width: 100%;
}

.item .titre {
  font-size: 15px;
  font-size: min(15px, 2.5vh);
  font-family: "Nunito Sans", sans-serif;
  margin-top: 1vh;
  white-space: normal;
  transition: height 0.2s;
}

.item .description {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background-color: rgba(1, 250, 236, 0.7);
  color: #020038;
  font-family: "Nunito Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  padding: 1vh;
  font-size: 2vh;
}

.item.current {
  transition: transform 0.2s;
  color: #ed16d9;
}

.item.current .cercle {
  border-color: #ed16d9;
}

.item.current .description {
  background-color: rgba(237, 22, 217, 0.7);
}

.item.current .valeur {
  opacity: 0;
}

.item.mal_place {
  color: #ff0000;
  animation: item_mal_place 1s 1 ease;
}

.item.mal_place .cercle {
  border-color: #ff0000;
}

.item.mal_place .description {
  background-color: rgba(255, 0, 0, 0.7);
}

@keyframes item_mal_place {
  0%, 75% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.sortable_list,
.sortable_element {
  text-align: center;
}

#conteneur_sortable_list {
  width: 100%;
  animation: conteneur_sortable_list 3s 1 ease;
  padding: 1vh;
  white-space: nowrap;
  display: flex;
  align-items: center;
  flex-flow: column;
  /*&.ok{
        .sortable_list{
            display: flex;
            justify-content: center;  
            //display: table;  
        }
    }*/
}

#conteneur_sortable_list::-webkit-scrollbar {
  opacity: 0;
}

.mobile #conteneur_sortable_list {
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: flex-end;
  flex-flow: column;
}

.mobile #conteneur_sortable_list .sortable_list {
  width: auto;
}

/*$min_font_size : 3vw;
.desktop{

    .nb_item_10 .item{
        max-width: calc(10vw - 2vh - 0.2vh);
        .cercle{
            max-width:  calc(10vw - 2vh - 0.2vh);
            max-height: calc(10vw - 2vh - 0.2vh);
        }    
        .description{
            font-size: unquote("min(0.9vw, 2vh)");
        }
        .valeur {
            font-size: unquote("min(20px, 3vh, 1.7vw)");
        }
        .titre{
            font-size: unquote("min(15px, 2.5vh, 1.2vw)");
        }
    }

    .nb_item_9 .item{
        max-width: calc(11.11vw - 2vh - 0.23vh);
        .cercle{
            max-width:  calc(11.11vw - 2vh - 0.23vh);
            max-height: calc(11.11vw - 2vh - 0.23vh);
        }
        .description{
            font-size: unquote("min(1vw, 2vh)");
        }
        .valeur {
            font-size: unquote("min(20px, 3vh, 1.8vw)");
        }
        .titre{
            font-size: unquote("min(15px, 2.5vh, 1.4vw)");
        }
    }

    .nb_item_8 .item{
        max-width: calc(12.5vw - 2vh - 0.25vh);
        .cercle{
            max-width:  calc(12.5vw - 2vh - 0.25vh);
            max-height: calc(12.5vw - 2vh - 0.25vh);
        }
        .description{
            font-size: unquote("min(1.1vw, 2vh)");
        }
    }

    .nb_item_7 .item{
        max-width: calc(14.3vw - 2vh - 0.29vh);
        .cercle{
            max-width:  calc(14.3vw - 2vh - 0.29vh);
            max-height: calc(14.3vw - 2vh - 0.29vh);
        }
        .description{
            font-size: unquote("min(1.2vw, 2vh)");
        }
    }

    .nb_item_6 .item{
        max-width: calc(16.66vw - 2vh - 0.34vh);
        .cercle{
            max-width:  calc(16.66vw - 2vh - 0.34vh);
            max-height: calc(16.66vw - 2vh - 0.34vh);
        }
        .description{
            font-size: unquote("min(1.5vw, 2vh)");
        }
    }

    .nb_item_5 .item{
        max-width: calc(20vw - 2vh - 0.4vh);
        .cercle{
            max-width:  calc(20vw - 2vh - 0.4vh);
            max-height: calc(20vw - 2vh - 0.4vh);
        }
        .description{
            font-size: unquote("min(1.7vw, 2vh)");
        }
    }

    .nb_item_4 .item{
        max-width: calc(25vw - 2vh - 0.5vh);
        .cercle{
            max-width:  calc(25vw - 2vh - 0.5vh);
            max-height: calc(25vw - 2vh - 0.5vh);
        }
        .description{
            font-size: unquote("min(2vw, 2vh)");
        }
    }

    .nb_item_3 .item{
        max-width: calc(33.33vw - 2vh - 0.67vh);
        .cercle{
            max-width:  calc(33.33vw - 2vh - 0.67vh);
            max-height: calc(33.33vw - 2vh - 0.67vh);
        }
        .description{
            font-size: unquote("min(3vw, 2vh)");
        }
    }

}*/
.conteneur_sortable_list-decor {
  background: url(../img/pointille.png) repeat-x left bottom, url(../img/fleche.png) no-repeat right bottom;
  background-size: auto 3vh;
  width: 100%;
  height: 3vh;
  margin-top: -3vh;
}

.sortable_list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 100%;
  white-space: nowrap;
}

.sortable_list.animate {
  transition: all 0.3s ease-in-out;
}

.sortable_list .item {
  position: relative;
  padding-bottom: 2vh;
  transform-origin: 50% 100%;
  transition: all 0.2s;
  display: inline-block;
  vertical-align: middle;
  z-index: 0;
}

.sortable_list .item:after {
  content: " ";
  display: inline-block;
  position: absolute;
  bottom: -2px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #01faec;
  background: #020038;
}

.sortable_list .item:hover .description {
  opacity: 1;
}

.desktop .sortable_list .item:not(.mal_place):hover {
  transform: scale(1.1);
}

#conteneur_sortable_element {
  position: relative;
  padding: 1vh;
}

#conteneur_sortable_element .fleche {
  position: absolute;
  top: 0;
  width: 10vh;
  transform: rotate(0deg);
  transition: all 0.2s ease 0.5s;
}

#conteneur_sortable_element #fleche_gauche {
  left: calc(50% - 22vh);
  transform-origin: 100% 0;
  animation: fleche_gauche 1.5s 1.5s 1 ease both;
}

#conteneur_sortable_element #fleche_droite {
  right: calc(50% - 22vh);
  transform-origin: 0 0;
  animation: fleche_droite 1.5s 1.5s 1 ease both;
}

#conteneur_sortable_element.en_cours .fleche {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.0s linear 0.2s;
}

#conteneur_sortable_element.en_cours #fleche_gauche {
  transform: rotate(-25deg);
}

#conteneur_sortable_element.en_cours #fleche_droite {
  transform: rotate(25deg);
}

#conteneur_sortable_element.resultat .fleche {
  opacity: 0;
}

.sortable_element {
  height: 21vh;
  margin: 1vh;
  animation: sortable_element 1.5s 1.5s 1 ease both;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
}

.sortable_element .item {
  position: absolute;
  touch-action: none;
  width: 21vh;
  margin: 0;
  cursor: grab;
  display: inline-block;
}

.sortable_element .item:not(.current) {
  display: none;
}

.sortable_element .item.current {
  z-index: 999;
  top: 0;
  animation: current_sortable_element 0.2s 1 ease;
  left: calc(50% - 10.5vh);
}

.sortable_element .cercle {
  width: 21vh;
  height: 21vh;
  border-radius: 50%;
  cursor: grab;
}

.sortable_element .cercle img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.sortable_element .cercle .drag-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.sortable_element .valeur {
  display: none;
}

.sortable_element .titre {
  display: none;
}

@keyframes current_sortable_element {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.ui-sortable-placeholder {
  width: 21vh;
  display: block;
  position: relative;
  animation: placeholder 0.1s 1 ease;
}

.ui-sortable-placeholder.off {
  animation: placeholder 0.1s 1 ease;
}

@keyframes placeholder {
  0% {
    width: 0vh;
  }
  100% {
    width: 21vh;
  }
}

@keyframes placeholder-off {
  0% {
    width: 21vh;
  }
  100% {
    width: 0vh;
  }
}

#zone_score {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 160px;
}

#cadre_score {
  border: 2px solid #ed16d9;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #ed16d9, 0 0 10px 0 #ed16d9, inset 0 0 5px 0 #ed16d9;
}

#cadre_score label {
  position: absolute;
  top: -10px;
  right: 8%;
  font-family: "Nunito Sans", sans-serif;
  text-transform: uppercase;
  color: #020038;
  background-color: #020038;
  padding: 0px 5px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: -1px 0 #ed16d9, 0 1px #ed16d9, 1px 0 #ed16d9, 0 -1px #ed16d9;
}

#cadre_score span {
  font-size: 50px;
  color: #ed16d9;
  display: block;
  text-align: center;
}

#points_gagnes {
  color: #ed16d9;
  font-size: 50px;
  position: relative;
  width: 74%;
  text-align: right;
  opacity: 0;
}

#points_gagnes.anim {
  animation: points_gagnes 1s 1 linear;
}

@keyframes points_gagnes {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(-70px);
    opacity: 0;
  }
}

#zone_combo {
  position: relative;
  top: -15px;
  font-size: 20px;
  color: #FDC400;
  text-align: center;
  opacity: 0;
  transform: scale(0);
  transition: 0.8s cubic-bezier(0.17, 0.67, 0.24, 1.49);
}

#zone_combo #combo {
  font-size: 35px;
  position: relative;
  top: 5px;
}

#zone_combo.visible {
  opacity: 1;
  transform: scale(1);
}

#timer {
  position: relative;
  width: 100px;
  height: 100px;
  max-width: 10vh;
  max-height: 10vh;
  border-radius: 50%;
  margin: auto;
  text-align: center;
  animation: timer 3s 1 ease;
}

#timer .pointille {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  border: 2px dotted #01faec;
}

#timer .minute {
  border-radius: 50%;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  width: 102%;
  height: 102%;
  left: -1%;
  top: -1%;
  overflow: hidden;
  position: absolute;
}

#timer .minute .hand {
  float: left;
  height: 100%;
  width: 50%;
  overflow: hidden;
  position: relative;
}

#timer .minute .hand span {
  height: 100%;
  width: 100%;
  background-color: #020038;
  display: block;
  position: absolute;
  transform: rotate(-180deg);
}

#timer .minute .hand #spin1 {
  transform-origin: 100% 50%;
  animation: spin1_1 1s 0.5s linear both;
}

#timer .minute .hand #spin2 {
  transform-origin: 0% 50%;
  animation: spin2_1 1s 0.5s 1 linear both;
}

#timer .face {
  border-radius: 50%;
  background-color: #020038;
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  text-align: center;
  display: flex;
  align-items: center;
}

#timer .face span {
  color: #ed16d9;
  font-family: "Unica One", cursive;
  font-size: 50px;
  text-align: center;
  width: 100%;
}

#timer.anim .minute .hand span {
  background-color: #ed16d9;
  transform: rotate(0deg);
}

#timer.anim .minute .hand #spin1 {
  animation: spin1 60s 1 linear;
}

#timer.anim .minute .hand #spin2 {
  animation: spin2 60s 1 linear;
}

#timer.stop {
  animation: none !important;
}

#timer.stop #spin1, #timer.stop #spin2 {
  animation-play-state: paused !important;
}

#timer.rouge {
  animation: timer_rouge 1s infinite linear;
}

#timer.rouge .minute .hand span {
  background-color: #ff0000;
}

#timer.rouge .face span {
  color: #ff0000;
}

@media screen and (max-height: 700px) {
  #timer .face span {
    font-size: 7vh;
  }
}

@keyframes timer_rouge {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(0.8);
  }
  40%, 100% {
    transform: scale(1);
  }
}

@keyframes titre_serie {
  0% {
    opacity: 0;
  }
  20%, 100% {
    opacity: 1;
  }
}

@keyframes timer {
  0%, 10% {
    opacity: 0;
  }
  30%, 100% {
    opacity: 1;
  }
}

@keyframes spin1_1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes spin2_1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes conteneur_sortable_list {
  0%, 30% {
    width: 30%;
    opacity: 0;
  }
  50%, 100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes sortable_element {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  30% {
    transform: scale(1.1);
    opacity: 1;
  }
  40%, 100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fleche_gauche {
  0%, 30% {
    transform: rotate(-25deg);
    opacity: 0;
  }
  50%, 100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes fleche_droite {
  0%, 30% {
    transform: rotate(25deg);
    opacity: 0;
  }
  50%, 100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes compteur {
  0%, 50% {
    opacity: 0;
  }
  70%, 100% {
    opacity: 1;
  }
}

@keyframes description {
  0%, 70% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}

@keyframes spin1 {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#compteur {
  font-size: 40px;
  font-size: min(40px, 5vh);
  text-align: center;
  color: #01faec;
  animation: compteur 1.5s 1.5s 1 ease both;
}

#description {
  font-size: 15px;
  font-size: min(15px, 2vh);
  text-align: center;
  color: #ed16d9;
  font-family: "Nunito Sans", sans-serif;
  animation: description 1.5s 1.5s 1 ease both;
}

#description .titre {
  text-transform: uppercase;
}

#message {
  text-align: center;
  position: relative;
  font-size: 4vh;
  margin: 2vh 0;
  height: 4vh;
  font-family: Damion;
}

#message > div {
  display: none;
  position: absolute;
  width: 100%;
}

#message > div.visible {
  display: block;
  opacity: 0;
  animation: message 1.5s ease normal;
}

.mobile #message {
  margin: 2vh 0 0 0;
}

#message_reussi {
  color: #01faec;
  text-shadow: #01faec 0px 0px 10px;
}

#message_rate {
  color: #ed16d9;
  text-shadow: #ed16d9 0px 0px 10px;
}

@keyframes message {
  0% {
    transform: scale(0.7);
    opacity: 1;
  }
  25%, 85% {
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

#tutoriel {
  width: 295px;
  max-width: 38vh;
  position: absolute;
  right: calc(50% + 27vh);
  margin-top: 30px;
  overflow: hidden;
}

#tutoriel img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
}

#tutoriel #tuto_ou {
  position: relative;
}

#tuto_joystick {
  transform-origin: 20.34% 92.95%;
}

#conteneur_tuto_cadre {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  right: 0%;
}

#tuto_avant {
  transform-origin: 29.5% 6.6%;
}

#tuto_apres {
  transform-origin: 72.5% 6.6%;
}

.anim #tuto_joystick {
  animation: tuto_joystick 3s infinite ease;
}

.anim #tuto_cadre {
  animation: tuto_cadre 1.5s 1 ease;
}

.anim #tuto_avant {
  animation: tuto_avant 1.5s 1 ease;
}

.anim #tuto_apres {
  animation: tuto_apres 1.5s 1 ease;
}

.anim #tuto_rond1 {
  animation: tuto_rond1 3s infinite ease;
}

.anim #tuto_rond2 {
  animation: tuto_rond2 3s infinite ease;
}

.anim #tuto_rond3 {
  animation: tuto_rond3 3s infinite ease;
}

.anim #tuto_rond4 {
  animation: tuto_rond4 3s infinite ease;
}

.anim #tuto_rond5 {
  animation: tuto_rond5 3s infinite ease;
}

.anim #tuto_rond6 {
  animation: tuto_rond6 3s infinite ease;
}

#bouton_fermer_tuto {
  display: none;
  position: absolute;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  color: #020038;
  background-color: #FDC400;
  box-shadow: 0 0 0 1px #FDC400, 0 0 10px 0 #FDC400, inset 0 0 5px 0 #FDC400;
  bottom: 1%;
  font-family: "Nunito Sans", sans-serif;
  width: 60%;
  height: 16%;
  text-transform: uppercase;
  right: 3%;
  cursor: pointer;
}

#bouton_fermer_tuto > span {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  font-size: 17px;
  font-size: min(17px, 3vh);
}

#contenu_tuto {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  font-family: "Nunito Sans", sans-serif;
  text-align: center;
}

#contenu_tuto .consigne {
  color: #ed16d9;
  text-transform: uppercase;
  font-size: 17px;
  font-size: min(17px, 1.9vh);
  font-weight: bold;
  position: absolute;
  padding: 0% 7%;
  top: 16%;
  height: 30%;
  width: 100%;
  display: table;
  animation: tuto_consigne 1.5s 1 ease;
}

#contenu_tuto .consigne > p {
  width: 100%;
  margin: 0;
  display: table-cell;
  vertical-align: middle;
}

#contenu_tuto .texte {
  color: #01faec;
  font-size: 18px;
  font-size: min(18px, 2.5vh);
  position: absolute;
  bottom: 0;
  padding: 0% 10% 25% 10%;
  animation: tuto_texte 1.5s 1 ease;
}

@keyframes tuto_joystick {
  0%, 60% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(30deg);
  }
  90% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes tuto_cadre {
  0%, 40% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}

@keyframes tuto_avant {
  0%, 20% {
    transform: scale(1.2);
    opacity: 0;
  }
  40%, 100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes tuto_apres {
  0%, 30% {
    transform: scale(1.2);
    opacity: 0;
  }
  50%, 100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes tuto_consigne {
  0%, 50% {
    transform: translateY(5%);
    opacity: 0;
  }
  70%, 100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes tuto_texte {
  0%, 70% {
    opacity: 0;
  }
  90%, 100% {
    opacity: 1;
  }
}

@keyframes tuto_rond1 {
  0%, 15% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  25%, 100% {
    opacity: 1;
  }
}

@keyframes tuto_rond5 {
  0%, 25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  35%, 100% {
    opacity: 1;
  }
}

@keyframes tuto_rond3 {
  0%, 35% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  45%, 100% {
    opacity: 1;
  }
}

@keyframes tuto_rond4 {
  0%, 45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  55%, 100% {
    opacity: 1;
  }
}

@keyframes tuto_rond6 {
  0%, 65% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  75%, 100% {
    opacity: 1;
  }
}

@keyframes tuto_rond2 {
  0%, 75% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}

@media screen and (max-width: 1080px) and (min-width: 800px) and (orientation: landscape) {
  #tutoriel {
    width: calc(50% - 24vh);
    right: calc(50% + 24vh);
  }
  #contenu_tuto .consigne {
    font-size: 1.5vw;
    font-size: min(1.5vw, 1.9vh);
  }
  #contenu_tuto .texte {
    font-size: 1.5vw;
    font-size: min(1.5vw, 2.5vh);
  }
}

@media screen and (max-width: 800px) {
  #conteneur_tutoriel {
    width: 100%;
    background: #020038;
    position: absolute;
    z-index: 1;
  }
  #tutoriel {
    right: auto;
    position: relative;
    margin: 2% auto;
  }
  #bouton_fermer_tuto {
    display: table;
  }
  .tuto_rond {
    display: none;
  }
  #conteneur_sortable_element {
    pointer-events: none;
  }
  #conteneur_sortable_element #fleche_gauche {
    opacity: 0;
    animation: none;
  }
  #conteneur_sortable_element #fleche_droite {
    opacity: 0;
    animation: none;
  }
  .sortable_element {
    opacity: 0;
    animation: none;
  }
  #description {
    opacity: 0;
    animation: none;
  }
  #compteur {
    opacity: 0;
    animation: none;
  }
}

@media screen and (orientation: portrait) {
  #conteneur_tutoriel {
    width: 100%;
    background: #020038;
    position: absolute;
    z-index: 1;
  }
  #tutoriel {
    right: auto;
    position: relative;
    margin: 2% auto;
  }
  #bouton_fermer_tuto {
    display: table;
  }
  .tuto_rond {
    display: none;
  }
  #conteneur_sortable_element {
    pointer-events: none;
  }
  #conteneur_sortable_element #fleche_gauche {
    opacity: 0;
    animation: none;
  }
  #conteneur_sortable_element #fleche_droite {
    opacity: 0;
    animation: none;
  }
  .sortable_element {
    opacity: 0;
    animation: none;
  }
  #description {
    opacity: 0;
    animation: none;
  }
  #compteur {
    opacity: 0;
    animation: none;
  }
}

.tuto_ferme #conteneur_tutoriel {
  opacity: 0;
  pointer-events: none;
  animation: conteneur_tutoriel 0.2s 1 ease;
}

.tuto_ferme #conteneur_sortable_element {
  pointer-events: all;
}

.tuto_ferme #conteneur_sortable_element #fleche_gauche {
  opacity: 1;
  animation: fleche_gauche 1.5s 1 ease both;
}

.tuto_ferme #conteneur_sortable_element #fleche_droite {
  opacity: 1;
  animation: fleche_droite 1.5s 1 ease both;
}

.tuto_ferme .sortable_element {
  opacity: 1;
  animation: sortable_element 1.5s 1 ease both;
}

.tuto_ferme #description {
  opacity: 1;
  animation: description 1.5s 1 ease both;
}

.tuto_ferme #compteur {
  opacity: 1;
  animation: compteur 1.5s 1 ease both;
}

@keyframes conteneur_tutoriel {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#conteneur_resultat {
  max-width: 728px;
  margin: auto;
  padding: 30px 0;
  display: none;
}

#zone_score_final {
  display: inline-block;
  border: 2px solid #ed16d9;
  padding: 25px 35px;
  border-radius: 10px;
  width: 360px;
  position: relative;
  background-color: #020038;
  box-shadow: 0 0 0 1px #ed16d9, 0 0 10px 0 #ed16d9, inset 0 0 5px 0 #ed16d9;
}

#zone_score_final label {
  position: absolute;
  top: -17px;
  left: 8%;
  font-family: "Nunito Sans", sans-serif;
  text-transform: uppercase;
  color: #020038;
  background-color: #020038;
  padding: 0px 10px 0 12px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: -1px 0 #ed16d9, 0 1px #ed16d9, 1px 0 #ed16d9, 0 -1px #ed16d9;
}

#zone_score_final > div {
  font-family: "Nunito Sans", sans-serif;
  font-size: 25px;
}

#zone_score_final > div p {
  margin: 0 0 10px 0;
}

#zone_score_final > div p.total {
  margin: 0;
}

#zone_score_final > div p.total .label {
  font-weight: bold;
}

#zone_score_final > div .label {
  color: #ed16d9;
  text-align: left;
}

#zone_score_final > div .valeur {
  color: #ed16d9;
  float: right;
}

#zone_boutons {
  width: 280px;
  float: right;
}

.bouton {
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  height: 73px;
  display: table;
  margin-bottom: 12px;
}

.bouton span {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

#bouton_rejouer, #bouton_continuer {
  width: 48%;
  float: left;
  text-decoration: none;
}

#bouton_rejouer {
  border: 2px solid #01faec;
  margin-right: 4%;
  color: #01faec;
  box-shadow: 0 0 0 1px #01faec, 0 0 10px 0 #01faec, inset 0 0 5px 0 #01faec;
}

#bouton_rejouer:hover {
  color: #ed16d9;
  border-color: #ed16d9;
  box-shadow: 0 0 0 1px #ed16d9, 0 0 10px 0 #ed16d9, inset 0 0 5px 0 #ed16d9;
}

#bouton_continuer {
  border: 2px solid #01faec;
  background-color: #01faec;
  color: #020038;
  box-shadow: 0 0 0 1px #01faec, 0 0 10px 0 #01faec, inset 0 0 5px 0 #01faec;
}

#bouton_continuer:hover {
  background-color: #ed16d9;
  border-color: #ed16d9;
  box-shadow: 0 0 0 1px #ed16d9, 0 0 10px 0 #ed16d9, inset 0 0 5px 0 #ed16d9;
}

#bouton_partager {
  width: 100%;
  border: 2px solid #FDC400;
  color: #020038;
  background-color: #FDC400;
  box-shadow: 0 0 0 1px #FDC400, 0 0 10px 0 #FDC400, inset 0 0 5px 0 #FDC400;
  margin-top: 4%;
  cursor: pointer;
}

#bouton_partager:hover {
  background-color: #ed16d9;
  border-color: #ed16d9;
  box-shadow: 0 0 0 1px #ed16d9, 0 0 10px 0 #ed16d9, inset 0 0 5px 0 #ed16d9;
}

@media screen and (max-width: 800px) {
  #conteneur_resultat {
    max-width: 80%;
    width: 360px;
  }
  #zone_score_final {
    max-width: 100%;
  }
  #zone_boutons {
    width: 100%;
    margin: 30px 0;
    float: none;
  }
  #bouton_continuer {
    padding: 7px 0px;
  }
}

@media screen and (max-width: 380px) {
  #zone_score_final > div {
    font-size: 20px;
  }
}

@media screen and (max-width: 700px) {
  .titre_serie {
    width: 40%;
    padding: 2.5%;
  }
  #zone_score {
    width: 23%;
  }
  #cadre_score {
    border-width: 1px;
  }
  #cadre_score label {
    font-size: 3vw;
  }
  #cadre_score #score {
    font-size: 7vw;
  }
  #points_gagnes {
    font-size: 7vw;
  }
  #zone_combo {
    font-size: 3vw;
    top: 0;
  }
  #zone_combo #combo {
    font-size: 7vw;
    top: 1vw;
  }
}

@media screen and (max-width: 700px) and (orientation: portrait) {
  .titre_serie {
    font-size: 4.5vw;
  }
}

#ecran_retourne {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: #020038;
  z-index: 200;
  display: none;
}

#picto_tourne, #picto_tourne_fleche {
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  position: absolute;
}

#picto_tourne {
  background: url(/img/picto_tourne.png) no-repeat center center;
  background-size: contain;
  animation: picto_tourne 3s infinite ease normal;
}

#picto_tourne_fleche {
  background: url(/img/picto_tourne_fleche.png) no-repeat center center;
  background-size: contain;
  animation: picto_tourne_fleche 3s infinite ease normal;
}

@media screen and (orientation: landscape) {
  .mobile#ecran_retourne {
    display: block;
  }
}

@keyframes picto_tourne {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  10%, 20% {
    opacity: 1;
    transform: rotate(0deg);
  }
  60%, 90% {
    opacity: 1;
    transform: rotate(-90deg);
  }
  100% {
    opacity: 0;
    transform: rotate(-90deg);
  }
}

@keyframes picto_tourne_fleche {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  10%, 20% {
    opacity: 1;
    transform: rotate(0deg);
  }
  60%, 100% {
    opacity: 0;
    transform: rotate(-90deg);
  }
}

#conteneur_autres_quiz {
  display: none;
  max-width: 1020px;
  margin: auto;
  text-align: center;
}

#conteneur_autres_quiz::-webkit-scrollbar {
  color: transparent;
}

#conteneur_autres_quiz #liste_serie {
  position: absolute;
  white-space: nowrap;
  padding: 0 10px;
}

.titre_autre_quiz {
  border-bottom: 1px solid #ed16d9;
  text-align: center;
  margin-bottom: 20px;
}

.titre_autre_quiz span {
  color: #ed16d9;
  background-color: #020038;
  position: relative;
  top: 12px;
  font-size: 20px;
  padding: 0 15px;
}

.conteneur_header {
  width: 1480px;
  max-width: 100%;
  margin: auto;
  position: relative;
  padding-top: 1vh;
}

#logo {
  position: absolute;
  max-width: 30%;
  height: auto;
}

@media screen and (max-width: 800px) {
  .header_index #logo {
    position: relative;
  }
}

.boutons_haut_droite {
  position: absolute;
  top: 20px;
  right: 20px;
}

.boutons_haut_droite span {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: 26px 26px;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

.bouton_ml {
  background-image: url(/img/bouton_ml_bleu.svg);
}

.bouton_ml:hover {
  background-image: url(/img/bouton_ml_jaune.svg);
}

#bouton_partage {
  background-image: url(/img/bouton_partage_rose.svg);
}

#bouton_partage:hover {
  background-image: url(/img/bouton_partage_jaune.svg);
}

.lien_facebook {
  background-image: url(/img/facebook_bleu.svg);
}

.lien_facebook:hover {
  background-image: url(/img/facebook_jaune.svg);
}

#titre {
  width: 395px;
  height: 138px;
  margin: auto;
  position: relative;
}

#titre img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

#conteneur_titre_cadre {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.anim #titre_choisissez {
  position: relative !important;
  transform-origin: 50% 19%;
  animation: titre_choisissez 1.5s 1 ease;
}

.anim #titre_unquizz {
  animation: titre_unquizz 1.5s 1 ease;
}

.anim #titre_cadre {
  animation: titre_cadre 1.5s 1 ease;
}

.anim #titre_trait1 {
  transform-origin: 11.4% 41.3%;
  animation: titre_trait1 1.5s 1 ease;
}

.anim #titre_trait2 {
  transform-origin: 11.4% 55.07%;
  animation: titre_trait2 1.5s 1 ease;
}

.anim #titre_trait3 {
  transform-origin: 11.4% 68.84%;
  animation: titre_trait3 1.5s 1 ease;
}

.anim #titre_trait4 {
  transform-origin: 88.6% 25.36%;
  animation: titre_trait3 1.5s 1 ease;
}

.anim #titre_trait5 {
  transform-origin: 88.6% 39.13%;
  animation: titre_trait2 1.5s 1 ease;
}

.anim #titre_trait6 {
  transform-origin: 88.6% 52.9%;
  animation: titre_trait1 1.5s 1 ease;
}

@keyframes titre_choisissez {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  20%, 100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes titre_unquizz {
  0%, 20% {
    transform: scale(1.2);
    opacity: 0;
  }
  40%, 100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes titre_cadre {
  0%, 49% {
    opacity: 0;
  }
  50%, 60% {
    opacity: 1;
  }
  61%, 65% {
    opacity: 0;
  }
  66%, 76% {
    opacity: 1;
  }
  77%, 82% {
    opacity: 0;
  }
  83%, 100% {
    opacity: 1;
  }
}

@keyframes titre_trait1 {
  0%, 40% {
    transform: scale(0);
  }
  60%, 100% {
    transform: scale(1);
  }
}

@keyframes titre_trait2 {
  0%, 50% {
    transform: scale(0);
  }
  70%, 100% {
    transform: scale(1);
  }
}

@keyframes titre_trait3 {
  0%, 60% {
    transform: scale(0);
  }
  80%, 100% {
    transform: scale(1);
  }
}

#conteneur_filtre {
  text-align: center;
  position: relative;
  font-family: "Nunito Sans", sans-serif;
  text-transform: uppercase;
  margin: 20px;
}

#conteneur_filtre ul {
  padding: 0;
  margin: 0;
}

#conteneur_filtre ul li {
  display: inline-block;
  margin: 2px;
  color: #01faec;
  border: 1px solid #01faec;
  list-style-type: none;
  border-radius: 15px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  background-color: #020038;
  cursor: pointer;
}

#conteneur_filtre ul li:hover {
  color: #ed16d9;
  border: 1px solid #ed16d9;
}

#conteneur_filtre ul li.select {
  background: #01faec;
  color: #020038;
  border: 1px solid #01faec;
  cursor: default;
}

#conteneur_filtre ul li a {
  text-decoration: none;
  color: inherit;
  padding: 0 15px;
  display: block;
}

#header_select {
  color: #020038;
  border: 1px solid #01faec;
  border-radius: 5px;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  font-size: 15px;
  background: #01faec url(/img/fleche_bas.png) no-repeat 98% 50%;
  background-size: 13px 7px;
  cursor: pointer;
}

.open #header_select {
  background-image: url(/img/fleche_haut.png);
}

@media screen and (min-width: 801px) {
  #header_select {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  #conteneur_filtre ul {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #020038;
    z-index: 1;
  }
  #conteneur_filtre ul li {
    display: block;
    border-radius: 0px;
    margin: 0;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
  }
  #conteneur_filtre ul li:first-child {
    border-radius: 0;
  }
  #conteneur_filtre ul li:last-child {
    border-radius: 0 0 5px 5px;
  }
  #conteneur_filtre.open ul {
    display: block;
  }
  #conteneur_filtre.open #header_select {
    border-radius: 5px 5px 0 0;
  }
}

.conteneur_liste {
  color: #ffffff;
  position: relative;
  width: 100%;
  max-width: 1300px;
  min-height: calc(100vh - 220px);
  text-align: center;
  display: table;
  margin: auto;
}

.conteneur_liste .liste_serie {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5%;
}

#masque_serie:not(.tout) {
  overflow: hidden;
}

#masque_serie.tout {
  height: auto !important;
}

#fleche_bas_index {
  cursor: pointer;
  background: url(/img/fleche_bas_index.png) no-repeat center center;
  width: 80px;
  height: 80px;
  display: inline-block;
}

#fleche_bas_index:hover {
  background-image: url(/img/fleche_bas_index_hover.png);
}

.lien_serie {
  display: inline-block;
  text-decoration: none;
  margin: 15px;
  width: 170px;
}

.lien_serie .image {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50%;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mix-blend-mode: hard-light;
  background-size: cover;
  background-position: center center;
}

.lien_serie .cercle {
  position: relative;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  margin-bottom: 20px;
  background-image: linear-gradient(60deg, #ed16d9, #01faec);
}

.lien_serie .degrade {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(60deg, #ed16d9, #01faec);
  opacity: 0;
  transition: width 0.8s, opacity 0.2s;
}

.lien_serie .jouer {
  position: absolute;
  width: 50%;
  height: auto;
  top: 44%;
  left: 25%;
  opacity: 0;
  transition: opacity 0.2s;
}

.lien_serie .nom {
  display: inline-flex;
  color: #01faec;
  white-space: normal;
}

.lien_serie:hover .nom {
  color: #ed16d9;
}

.lien_serie:hover .degrade {
  width: 600%;
  opacity: 0.8;
}

.lien_serie:hover .jouer {
  opacity: 1;
}

@media screen and (orientation: portrait) {
  .conteneur_liste .liste_serie {
    padding: 0;
  }
}

@media screen and (max-width: 800px) {
  .lien_serie {
    width: calc(33vw - 50px);
  }
  .lien_serie .cercle {
    width: calc(33vw - 50px);
    height: calc(33vw - 50px);
    margin-bottom: 2vw;
  }
  .conteneur_liste {
    min-height: calc(100vh - 310px);
  }
  .conteneur_liste .liste_serie {
    padding: 0;
  }
}

@media screen and (max-width: 500px) {
  .lien_serie {
    width: calc(50vw - 52px);
  }
  .lien_serie .cercle {
    width: calc(50vw - 52px);
    height: calc(50vw - 52px);
    margin-bottom: 2vw;
  }
}

@media screen and (max-width: 395px) {
  #titre {
    width: 100%;
    height: 35vw;
  }
}

.conteneur_footer {
  position: relative;
  text-align: center;
  padding: 20px;
  color: #FDC400;
  font-size: 12px;
  font-family: "Nunito Sans", sans-serif;
}

.lien_ml {
  color: #FDC400;
}

.lien_ml:hover {
  color: #ed16d9;
}

.conteneur_header_404 {
  width: 100%;
  height: 100px;
  text-align: center;
  position: relative;
}

.conteneur_404 {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
  text-align: center;
  display: table;
}

.conteneur_404 .info_404 {
  display: table-cell;
  vertical-align: middle;
}

.conteneur_404 .info_404 h1 {
  font-size: 63px;
  color: #ed16d9;
  margin: 0;
}

.conteneur_404 .info_404 p {
  color: #01faec;
  font-family: "Nunito Sans", sans-serif;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 50px;
}

#bouton_retour_accueil {
  padding: 21px 30px;
  text-decoration: none;
  border: 2px solid #01faec;
  color: #01faec;
  box-shadow: 0 0 0 1px #01faec, 0 0 10px 0 #01faec, inset 0 0 5px 0 #01faec;
  display: inline-block;
}

#bouton_retour_accueil:hover {
  color: #ed16d9;
  border-color: #ed16d9;
  box-shadow: 0 0 0 1px #ed16d9, 0 0 10px 0 #ed16d9, inset 0 0 5px 0 #ed16d9;
}

.conteneur_header_ml {
  width: 100%;
  height: 100px;
  text-align: center;
  position: relative;
}

.conteneur_ml {
  width: 100%;
  max-width: 800px;
  margin: auto;
  color: #01faec;
  font-family: "Nunito Sans", sans-serif;
  padding: 20px;
  position: relative;
}

.conteneur_ml h1 {
  text-align: center;
}

.conteneur_ml a {
  color: #01faec;
}

.conteneur_ml a:hover {
  color: #ed16d9;
}

.center {
  text-align: center;
}

#intro {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #020038;
}

#lottie_gauche, #lottie_droite {
  position: absolute;
  bottom: 0;
  width: 90vh;
  height: 90vh;
}

#lottie_gauche {
  left: 0;
}

#lottie_droite {
  right: 0;
}

#lottie_logo {
  position: absolute;
  top: 0%;
  width: 80%;
  height: 30%;
  left: 10%;
}

@media screen and (max-aspect-ratio: 980 / 720) {
  #lottie_gauche, #lottie_droite {
    width: 65vw;
    height: 65vw;
  }
}

#partage {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  padding: 15px;
  text-align: center;
  transform: translateY(80px);
  transition: transform 0.2s ease;
}

#partage.visible {
  transform: translateY(0px);
}

#partage ul {
  margin: 0;
  padding: 0;
}

#partage ul li {
  padding: 0;
  margin: 0 5px;
  list-style-type: none;
  display: inline-block;
  background-color: #020038;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  cursor: pointer;
}

#fermer_partage {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px;
  cursor: pointer;
  color: #020038;
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
}

#fermer_partage:hover {
  color: #ed16d9;
}

.lien-bouton {
  cursor: pointer;
  color: #2a3141;
  text-decoration: none;
  line-height: 60px;
  display: block;
  position: relative;
}

.bouton-icone {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: center center;
}

.lien-bouton:hover {
  color: #e90543;
}

.lien-bouton:hover .boutons-copie-lien {
  transform: rotate(0deg);
}

.lien-bouton .texte-bouton {
  line-height: 17px;
  display: inline-block;
  width: calc(100% - 40px);
  padding-top: 13px;
}

.boutons-copie-lien {
  display: inline-block;
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  transition: transform 0.3s;
  float: left;
  transform-origin: 25px 25px;
}

.conteneur_carte .boutons-copie-lien {
  margin-left: 9px;
}

.bouton-lien {
  background-image: url(/img/link_bleu.svg);
}

.bouton-mail {
  background-image: url(/img/mail_bleu.svg);
}

.bouton-facebook {
  background-image: url(/img/facebook_bleu.svg);
}

.bouton-twitter {
  background-image: url(/img/twitter_bleu.svg);
}

.lien-bouton:hover .bouton-lien {
  background-image: url(/img/link_jaune.svg);
}

.lien-bouton:hover .bouton-mail {
  background-image: url(/img/mail_jaune.svg);
}

.lien-bouton:hover .bouton-facebook {
  background-image: url(/img/facebook_jaune.svg);
}

.lien-bouton:hover .bouton-twitter {
  background-image: url(/img/twitter_jaune.svg);
}

.bouton-lien {
  opacity: 1;
  position: relative;
  transform: perspective(600px) rotateY(0deg);
  transition: transform 0.2s 0.2s;
}

.bouton-check {
  background-image: url(/img/check.svg);
  position: absolute;
  top: 0px;
  left: 0px;
  transform: perspective(600px) rotateY(90deg);
  transition: transform 0.2s;
}

.copie .bouton-lien {
  transform: perspective(600px) rotateY(90deg);
  transition: transform 0.2s;
}

.copie .bouton-check {
  transform: perspective(600px) rotateY(0deg);
  transition: transform 0.2s 0.2s;
}

.copie .boutons-copie-lien {
  transform: rotate(0deg);
}