@charset "UTF-8";
/* Fonts */
@font-face {
  font-family: "ebgaramond";
  src: url("../fonts/eb-garamond/ebgaramond08-regular-webfont.woff2") format("woff2"), url("../fonts/eb-garamond/ebgaramond08-regular-webfont.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "SerapionPro";
  src: url("../fonts/serapion/serapion-pro-webfont.woff2") format("woff2"), url("../fonts/serapion/serapion-pro-webfont.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Avara";
  src: url("../fonts/avara/avara-webfont.woff2") format("woff2"), url("../fonts/avara/avara-webfont.woff") format("woff");
  font-display: swap;
}
.footer.pure-u {
  font-family: sans-serif;
}

/* Balises globales */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-size: 1rem;
  border: none;
  width: 100vw;
}

#body {
  overflow-x: hidden;
}

section.pure-u-1 {
  display: flex;
  position: relative;
  overflow: visible;
}

.cadre {
  position: relative;
  width: 100%;
  max-width: 1024px;
}

.marge {
  width: calc(50% - 512px);
}

p {
  position: relative;
}

.footer {
  margin: 0;
  width: 100%;
}

li {
  list-style: none;
}

/* Utility Classes */
/* Tailles du module */
.quart {
  width: 25%;
}

.tiers {
  width: 33, 33333%;
}

.demi {
  width: 50%;
}

.deux-tiers {
  width: 66, 66667%;
}

.trois-quart {
  width: 75%;
}

/* Tailles des paragraphes */
.petits p {
  max-width: 300px;
}

.grands p {
  max-width: 500px;
}

/* Marges */
.margin {
  margin: 3rem;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.margin-vertical {
  margin: 3rem 0;
}

.margin-horizontal {
  margin: 0 3rem;
}

.margin-small {
  margin: 1rem;
}

.padding {
  padding: 3rem;
}

.padding-vertical {
  padding: 3rem 0;
}

.padding-horizontal {
  padding: 0 3rem;
}

.padding-small {
  padding: 1rem;
}

/* Positions */
.left {
  float: left;
}

.right {
  float: right;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

/********/
/* MENU */
/********/
.pure-menu-fixed {
  background-color: unset;
  box-shadow: none;
}

.main-nav a, .main-nav li.premier {
  color: #fff;
}

@media screen and (max-width:48em) {
  .main-nav {
    display: none;
  }
  .open .main-nav {
    display: block;
  }
}

#interactif {
  background-color: rgba(209, 206, 206, 0.6);
}
/******************/
/**************************/
/****  Animations SVG  ****/
/**************************/
/******************/
/***********/
/* Module0 */
/***********/
#module0 {
  height: calc(100vh + 20%);
  font-family: Avara, sans-serif;
  font-weight: bold;
  letter-spacing: 0.92px;
  word-spacing: 0.52px;
}
#module0 #fond {
  position: absolute;
  width: 100%;
  height: 100%;
  /*background-image: url('../images/shattered-island.gif');*/
  background-repeat: repeat;
  background-size: 500px;
  opacity: 0;
  transition: opacity 4s ease-in;
}
#module0 .cadre {
  position: fixed;
  left: calc(50% - 519.5px);
  border: none;
  height: 100vh;
  margin: 0;
  pointer-events: none;
}
#module0 p {
  color: #fff;
  margin: 0;
}
#module0 a {
  color: #fff;
}
#module0 .presentation {
  /*font-family: Library3AM, sans-serif;
  font-size: 15pt;
  line-height: 37px;*/
  position: absolute;
  pointer-events: none;
  left: 5.2%;
  top: 5rem;
  width: 400px;
  height: 225px;
  z-index: 1;
  opacity: 0;
  transition: opacity 4s 1s ease-in;
  /*text-align: center;*/
  padding: 0 10px;
  display: flex;
  background-color: rgba(0, 0, 0, 0.6);
}
#onclick .presentation {
  display: none;
}
#module0 .presentation svg, #module0 .presentation h1 {
  width: 100%;
  /*height: 100%;*/
}
#module0 .presentation #groupe {
  fill-opacity: 0;
  transition: fill-opacity 1s 7s;
}
#module0 .presentation path {
  stroke-width: 0.5;
}
#module0 .presentation text {
  opacity: 0;
  transition: opacity 1s 7s;
}
#module0 .creation {
  opacity: 0;
  /*transition: opacity 1s, font-size 18s, left 18s, top 18s;*/
  position: absolute;
  pointer-events: none;
  font-family: 'Avara', sans-serif;
  font-weight: normal;
  font-size: 15px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
  letter-spacing: 0.92px;
  word-spacing: 0.52px;
  line-height: 1.5;
  text-shadow: 2px 2px 2px #000;
  left: 15%;
  top: 25%;
  color: #fff;
}
#module0 .creation.show {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
/*#module0 .creation:nth-of-type(1) {
  left: 30%;
  top: 55.1%;
}
#module0 .creation:nth-of-type(2) {
  left: 20%;
  top: 62.2%;
}
#module0 .creation:nth-of-type(3) {
  left: 48%;
  top: 61.6%;
}
#module0 .creation:nth-of-type(4) {
  left: 32%;
  top: 68.5%;
}
#module0 .creation:nth-of-type(5) {
  left: 55%;
  top: 73.2%;
}
#module0 .creation:nth-of-type(6) {
  left: 17%;
  top: 67%;
}
#module0 .creation:nth-of-type(7) {
  left: 52%;
  top: 81.9%;
}
#module0 .creation:nth-of-type(8) {
  left: 35%;
  top: 85%;
}
#module0 .creation:nth-of-type(9) {
  left: 60%;
  top: 52%;
}
#module0 .creation:nth-of-type(10) {
  left: 50%;
  top: 90%;
}
#module0 .creation:nth-of-type(11) {
  left: 27%;
  top: 94%;
}
#module0 .creation:nth-of-type(12) {
  left: 20%;
  top: 62.2%;
}*/
#module0 .signature, #module0 .bordsign {
  position: absolute;
  pointer-events: none;
}
#module0 .bordsign {
  bottom: 20px;
  height: 30px;
  border-bottom: solid 1px #fff;
}
#module0 .bordsign.gauche {
  left: 0;
  width: calc(100% - 150px);
}

@-webkit-keyframes cosmo {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes cosmo {
  to {
    stroke-dashoffset: 0;
  }
}
#module0.anim #fond {
  /*background-image: url("../images/shattered-island.gif");*/
  opacity: 1;
}
#module0.anim .presentation {
  opacity: 1;
}
#module0.anim path {
  -webkit-animation: cosmo 6s 1s linear forwards;
  animation: cosmo 6s 1s linear forwards;
}
#module0.anim #groupe {
  fill-opacity: 1;
}
#module0.anim text {
  opacity: 1;
}

/*****************/
/* Module0 Isolé */
/*****************/
#body {
  overflow-y: hidden;
}

#module0 {
  background-color: #000;
  height: 100%;
}

#module0 .cadre {
  left: calc(50% - 512px);
}

#onclick {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.86);
  z-index: 0;
  top: 110%;
}

#onclick .cadre {
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  max-width: 1024px;
}

.conteneur-legende {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  top:100%;
}

.conteneur-legende.montre {
  opacity: 1;
  pointer-events: auto;
  top: unset;
}

.images, .legende {
  margin: 1rem;
}

.images {
  position: relative;
  /*top: 40px;*/
  z-index: auto;
  width: 300px;
  background: none;
  overflow: hidden;
}

.images .boite {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: auto;
  /*scroll-snap-type: y mandatory;*/
}
.bouton-anim {
  display: none;
}
.boite img {
  position: absolute;
  width: 100%;
}

.legende {
  display: block;
  color: #fff;
  font-family: ebgaramond, sans-serif;
  font-size: 1.06rem;
  letter-spacing: 0.015em;
  word-spacing: 0.001em;
  -webkit-font-kerning: normal;
  font-kerning: normal;
  font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1;
  line-height: 1.2;
  position: relative;
  width: 500px;
}
.legende .lien a, .legende .lien {
  color: #fff;
  text-decoration: none;
  font-family: SerapionPro, sans-serif;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.014em;
}
.legende a:hover {
  text-decoration: underline;
}

.lien a {
  pointer-events: none;
}

.montre .lien a {
  pointer-events: auto;
}

.legende .sortie {
  right: 0;
  top: -50px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
}
.legende .sortie svg {
  width: 25px;
}

.legende .sortie:hover path {
  fill: #c21b07;
}

/* Animation apparition des légendes */
@-webkit-keyframes apparait {
  to {
    opacity: 1;
  }
}
@keyframes apparait {
  to {
    opacity: 1;
  }
}
.lien, .legende p, .images {
  opacity: 0;
}


.start .lien {
  -webkit-animation: apparait 1.5s linear forwards;
  animation: apparait 1.5s linear forwards;
}

.start .legende p {
  -webkit-animation: apparait 1.5s 1s linear forwards;
  animation: apparait 1.5s 1s linear forwards;
}
.start .legende p:nth-of-type(1) {
  -webkit-animation: apparait 1.5s linear forwards;
  animation: apparait 1.5s linear forwards;
}

.start .images {
  -webkit-animation: apparait 1.5s 2s linear forwards;
  animation: apparait 1.5s 2s linear forwards;
}

/***************/
/* SCREENSHOTS */
/***************/
@-webkit-keyframes coel {
  0% {
    opacity: 1;
  }
  16.66% {
    opacity: 1;
  }
  16.67% {
    opacity: 0;
  }
}
@keyframes coel {
  0% {
    opacity: 1;
  }
  19.9% {
    opacity: 1;
  }
  20.01% {
    opacity: 0;
  }
}
@-webkit-keyframes coellast {
  0% {
    opacity: 1;
  }
  28.6% {
    opacity: 1;
  }
  28.61% {
    opacity: 0;
  }
}
@keyframes coellast {
  0% {
    opacity: 1;
  }
  28.6% {
    opacity: 1;
  }
  28.61% {
    opacity: 0;
  }
}
.association-les-coelitaires-et-mailodie_img .boite {
  height: 140px;
}
.association-les-coelitaires-et-mailodie_img .boite img {
  opacity: 0;
}
.association-les-coelitaires-et-mailodie_img .boite img.anim {
  -webkit-animation: coel 10s 3s linear infinite;
          animation: coel 10s 3s linear infinite;
}


@-webkit-keyframes sauvage1 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  12.51% {
    opacity: 0;
  }
}


@keyframes sauvage1 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  12.51% {
    opacity: 0;
  }
}
@-webkit-keyframes sauvage2 {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 0;
  }
  12.51% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  25.01% {
    opacity: 0;
  }
}
@keyframes sauvage2 {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 0;
  }
  12.51% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  25.01% {
    opacity: 0;
  }
}
@-webkit-keyframes sauvage3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  25.01% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  37.51% {
    opacity: 0;
  }
}
@keyframes sauvage3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  25.01% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  37.51% {
    opacity: 0;
  }
}
@-webkit-keyframes sauvage4 {
  0% {
    top: 0;
    opacity: 0;
  }
  35.5% {
    top: 0;
    opacity: 0;
  }
  37.5% {
    top: 0;
    opacity: 1;
  }
  67.5% {
    top: -630px;
    opacity: 1;
  }
  67.51% {
    top: -630px;
    opacity: 0;
  }
  69.5% {
    top: 0;
    opacity: 0;
  }
}
@keyframes sauvage4 {
  0% {
    top: 0;
    opacity: 0;
  }
  35.5% {
    top: 0;
    opacity: 0;
  }
  37.5% {
    top: 0;
    opacity: 1;
  }
  67.5% {
    top: -630px;
    opacity: 1;
  }
  67.51% {
    top: -630px;
    opacity: 0;
  }
  69.5% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes sauvagelast {
  0% {
    opacity: 0;
  }
  65.5% {
    opacity: 0;
  }
  67.51% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  82% {
    opacity: 0;
  }
}
@keyframes sauvagelast {
  0% {
    opacity: 0;
  }
  65.5% {
    opacity: 0;
  }
  67.51% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  82% {
    opacity: 0;
  }
}
.naturellement-sauvage_img .boite {
  height: 200px;
}

.naturellement-sauvage_img .boite img {
  opacity: 0;
}

.naturellement-sauvage_img .boite picture:nth-of-type(1) img.anim {
  -webkit-animation: sauvage1 16s 3s ease-in-out infinite;
          animation: sauvage1 16s 3s ease-in-out infinite;
}
.naturellement-sauvage_img .boite picture:nth-of-type(2) img.anim {
  -webkit-animation: sauvage2 16s 3s ease-in-out infinite;
          animation: sauvage2 16s 3s ease-in-out infinite;
}
.naturellement-sauvage_img .boite picture:nth-of-type(3) img.anim {
  -webkit-animation: sauvage3 16s 3s ease-in-out infinite;
          animation: sauvage3 16s 3s ease-in-out infinite;
}
.naturellement-sauvage_img .boite picture:nth-of-type(4) img.anim {
  -webkit-animation: sauvage4 16s 3s ease-in-out infinite;
          animation: sauvage4 16s 3s ease-in-out infinite;
}
.naturellement-sauvage_img .boite picture:last-child img.anim {
  -webkit-animation: sauvagelast 16s 3s ease-in-out infinite;
          animation: sauvagelast 16s 3s ease-in-out infinite;
}


@-webkit-keyframes mdp1 {
  0% {
    opacity: 1;
    top: 0;
  }
  14.28% {
    opacity: 1;
    top: -150px;
  }
  16.21% {
    top: 0;
    opacity: 0;
  }
}
@keyframes mdp1 {
  0% {
    opacity: 1;
    top: 0;
  }
  14.28% {
    opacity: 1;
    top: -150px;
  }
  16.21% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes mdp2 {
  12.2% {
    top: 0;
    opacity: 0;
  }
  14.29% {
    opacity: 1;
    top: 0;
  }
  39.28% {
    opacity: 1;
    top: -350px;
  }
  41.31% {
    top: 0;
    opacity: 0;
  }
}
@keyframes mdp2 {
  12.2% {
    top: 0;
    opacity: 0;
  }
  14.29% {
    opacity: 1;
    top: 0;
  }
  39.28% {
    opacity: 1;
    top: -350px;
  }
  41.31% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes mdp3 {
  37.3% {
    top: 0;
    opacity: 0;
  }
  39.29% {
    opacity: 1;
    top: 0;
  }
  53.57% {
    opacity: 1;
    top: -185px;
  }
  55.51% {
    top: 0;
    opacity: 0;
  }
}
@keyframes mdp3 {
  37.3% {
    top: 0;
    opacity: 0;
  }
  39.29% {
    opacity: 1;
    top: 0;
  }
  53.57% {
    opacity: 1;
    top: -185px;
  }
  55.51% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes mdp4 {
  51.6% {
    top: 0;
    opacity: 0;
  }
  53.58% {
    opacity: 1;
    top: 0;
  }
  75% {
    opacity: 1;
    top: -290px;
  }
  77% {
    opacity: 0;
  }
}
@keyframes mdp4 {
  51.6% {
    top: 0;
    opacity: 0;
  }
  53.58% {
    opacity: 1;
    top: 0;
  }
  75% {
    opacity: 1;
    top: -290px;
  }
  77% {
    opacity: 0;
  }
}
@-webkit-keyframes mdp5 {
  73.2% {
    opacity: 0;
  }
  75.01% {
    opacity: 1;
  }
  85.71% {
    opacity: 1;
  }
  87.4% {
    opacity: 0;
  }
}
@keyframes mdp5 {
  73.2% {
    opacity: 0;
  }
  75.01% {
    opacity: 1;
  }
  85.71% {
    opacity: 1;
  }
  87.4% {
    opacity: 0;
  }
}
.mots-de-passage_img .boite {
  height: 205px;
}

.mots-de-passage_img .boite img {
  opacity: 0;
}

.mots-de-passage_img .boite picture:nth-of-type(1) img.anim {
  -webkit-animation: mdp1 18s 3s ease-in-out infinite;
  animation: mdp1 18s 3s ease-in-out infinite;
}

.mots-de-passage_img .boite picture:nth-of-type(2) img.anim {
  -webkit-animation: mdp2 18s 3s ease-in-out infinite;
  animation: mdp2 18s 3s ease-in-out infinite;
}

.mots-de-passage_img .boite picture:nth-of-type(3) img.anim {
  -webkit-animation: mdp3 18s 3s ease-in-out infinite;
  animation: mdp3 18s 3s ease-in-out infinite;
}

.mots-de-passage_img .boite picture:nth-of-type(4) img.anim {
  -webkit-animation: mdp4 18s 3s ease-in-out infinite;
  animation: mdp4 18s 3s ease-in-out infinite;
}

.mots-de-passage_img .boite picture:nth-of-type(5) img.anim {
  -webkit-animation: mdp5 18s 3s linear infinite;
  animation: mdp5 18s 3s linear infinite;
}

@-webkit-keyframes ethik1 {
  0% {
    opacity: 1;
  }
  6.25% {
    opacity: 1;
  }
  6.26% {
    opacity: 0;
  }
}
@keyframes ethik1 {
  0% {
    opacity: 1;
  }
  6.25% {
    opacity: 1;
  }
  6.26% {
    opacity: 0;
  }
}
@-webkit-keyframes ethik1last {
  0% {
    opacity: 1;
  }
  16.33% {
    opacity: 1;
  }
  16.34% {
    opacity: 0;
  }
}
@keyframes ethik1last {
  0% {
    opacity: 1;
  }
  16.33% {
    opacity: 1;
  }
  16.34% {
    opacity: 0;
  }
}
.cabinet-dethikmologie_img .boite {
  height: 202px;
}

.cabinet-dethikmologie_img .boite img {
  opacity: 0;
}

.cabinet-dethikmologie_img .boite img.anim {
  -webkit-animation: ethik1 16s 3s linear infinite;
  animation: ethik1 16s 3s linear infinite;
}

@-webkit-keyframes hyper {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  12.51% {
    opacity: 0;
  }
}
@keyframes hyper {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  12.51% {
    opacity: 0;
  }
}
@-webkit-keyframes hyperlast {
  0% {
    opacity: 1;
  }
  28.6% {
    opacity: 1;
  }
  28.61% {
    opacity: 0;
  }
}
@keyframes hyperlast {
  0% {
    opacity: 1;
  }
  28.6% {
    opacity: 1;
  }
  28.61% {
    opacity: 0;
  }
}
.hypertheses_img .boite {
  height: 140px;
}

.hypertheses_img .boite img {
  opacity: 0;
}

.hypertheses_img .boite img.anim {
  -webkit-animation: hyper 8s 3s linear infinite;
  animation: hyper 8s 3s linear infinite;
}

@-webkit-keyframes laura1 {
  0% {
    opacity: 1;
  }
  4.18% {
    opacity: 1;
  }
  4.5% {
    opacity: 0;
  }
}
@keyframes laura1 {
  0% {
    opacity: 1;
  }
  4.18% {
    opacity: 1;
  }
  4.5% {
    opacity: 0;
  }
}
@-webkit-keyframes laura2 {
  0.51% {
    top: 0;
    opacity: 1;
  }
  25.02% {
    top: -780px;
    opacity: 1;
  }
  27% {
    opacity: 0;
  }
}
@keyframes laura2 {
  0.51% {
    top: 0;
    opacity: 1;
  }
  25.02% {
    top: -780px;
    opacity: 1;
  }
  27% {
    opacity: 0;
  }
}
@-webkit-keyframes laura3 {
  19.25% {
    opacity: 0;
  }
  20.84% {
    opacity: 1;
  }
  33.34% {
    opacity: 1;
  }
  33.35% {
    opacity: 0;
  }
}
@keyframes laura3 {
  19.25% {
    opacity: 0;
  }
  20.84% {
    opacity: 1;
  }
  33.34% {
    opacity: 1;
  }
  33.35% {
    opacity: 0;
  }
}
@-webkit-keyframes laura4 {
  24.7% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  31.27% {
    opacity: 1;
  }
  31.37% {
    opacity: 0;
  }
}
@keyframes laura4 {
  24.7% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  31.27% {
    opacity: 1;
  }
  31.37% {
    opacity: 0;
  }
}
@-webkit-keyframes laura5 {
  27% {
    opacity: 0;
  }
  27.01% {
    opacity: 1;
  }
  33.34% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
}
@keyframes laura5 {
  27% {
    opacity: 0;
  }
  27.01% {
    opacity: 1;
  }
  33.34% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
}
.lauradiy-le-bienvivant_img .boite {
  height: 225px;
}

.lauradiy-le-bienvivant_img .boite img {
  opacity: 0;
}

.lauradiy-le-bienvivant_img .boite img.anim {
  -webkit-animation: laura1 24s 3s linear infinite;
  animation: laura1 24s 3s linear infinite;
}

.lauradiy-le-bienvivant_img .boite picture:nth-of-type(12) img.anim {
  -webkit-animation: laura2 24s 3s ease-in-out infinite;
  animation: laura2 24s 3s ease-in-out infinite;
}

.lauradiy-le-bienvivant_img .boite picture:nth-of-type(13) img.anim {
  -webkit-animation: laura3 24s 3s ease-in-out infinite;
  animation: laura3 24s 3s ease-in-out infinite;
}

.lauradiy-le-bienvivant_img .boite picture:nth-of-type(14) img.anim {
  -webkit-animation: laura4 24s 3s linear infinite;
  animation: laura4 24s 3s linear infinite;
}

.lauradiy-le-bienvivant_img .boite picture:nth-of-type(15) img.anim {
  -webkit-animation: laura5 24s 3s linear infinite;
  animation: laura5 24s 3s linear infinite;
}

@-webkit-keyframes palais1 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  12.51% {
    opacity: 0;
  }
}
@keyframes palais1 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  12.51% {
    opacity: 0;
  }
}
@-webkit-keyframes palais2 {
  11.5% {
    top: 0;
    opacity: 0;
  }
  12.5% {
    top: 0;
    opacity: 1;
  }
  68.75% {
    opacity: 1;
    top: -1470px;
  }
  68.76% {
    opacity: 0;
  }
}
@keyframes palais2 {
  11.5% {
    top: 0;
    opacity: 0;
  }
  12.5% {
    top: 0;
    opacity: 1;
  }
  68.75% {
    opacity: 1;
    top: -1470px;
  }
  68.76% {
    opacity: 0;
  }
}
@-webkit-keyframes palais3 {
  68.75% {
    opacity: 0;
  }
  68.76% {
    opacity: 1;
  }
  78.13% {
    opacity: 1;
  }
  78.14% {
    opacity: 0;
  }
}
@keyframes palais3 {
  68.75% {
    opacity: 0;
  }
  68.76% {
    opacity: 1;
  }
  78.13% {
    opacity: 1;
  }
  78.14% {
    opacity: 0;
  }
}
@-webkit-keyframes palais4 {
  78.13% {
    opacity: 0;
  }
  78.14% {
    opacity: 1;
  }
  87.52% {
    opacity: 1;
  }
  87.53% {
    opacity: 0;
  }
}
@keyframes palais4 {
  78.13% {
    opacity: 0;
  }
  78.14% {
    opacity: 1;
  }
  87.52% {
    opacity: 1;
  }
  87.53% {
    opacity: 0;
  }
}
.palais-du-corbeau_img .boite {
  height: 280px;
}

.palais-du-corbeau_img .boite img {
  opacity: 0;
}

.palais-du-corbeau_img .boite picture:nth-of-type(1) img.anim {
  -webkit-animation: palais1 16s 3s linear infinite;
  animation: palais1 16s 3s linear infinite;
}

.palais-du-corbeau_img .boite picture:nth-of-type(2) img.anim {
  -webkit-animation: palais2 16s 3s ease-in-out infinite;
  animation: palais2 16s 3s ease-in-out infinite;
}

.palais-du-corbeau_img .boite picture:nth-of-type(3) img.anim {
  -webkit-animation: palais3 16s 3s linear infinite;
  animation: palais3 16s 3s linear infinite;
}

.palais-du-corbeau_img .boite picture:nth-of-type(4) img.anim {
  -webkit-animation: palais4 16s 3s linear infinite;
  animation: palais4 16s 3s linear infinite;
}

@-webkit-keyframes drama {
  2.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  17.7% {
    opacity: 0;
  }
}
@keyframes drama {
  2.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  17.7% {
    opacity: 0;
  }
}
@-webkit-keyframes dramalast {
  2.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
@keyframes dramalast {
  2.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
.sociologie-dramaturgique_img .boite {
  height: 140px;
}

.sociologie-dramaturgique_img .boite img {
  opacity: 0;
}

.sociologie-dramaturgique_img .boite img.anim {
  -webkit-animation: drama 20s 3s linear infinite;
  animation: drama 20s 3s linear infinite;
}

.sociologie-dramaturgique_img .boite img.anim:last-of-type {
  -webkit-animation: dramalast 20s 3s linear infinite;
  animation: dramalast 20s 3s linear infinite;
}

@-webkit-keyframes eris {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  10.01% {
    opacity: 0;
  }
}
@keyframes eris {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  10.01% {
    opacity: 0;
  }
}
@-webkit-keyframes erislast {
  0% {
    top: 0;
    opacity: 1;
  }
  16.67% {
    top: -110px;
    opacity: 1;
  }
  18.5% {
    opacity: 0;
  }
}
@keyframes erislast {
  0% {
    top: 0;
    opacity: 1;
  }
  16.67% {
    top: -110px;
    opacity: 1;
  }
  18.5% {
    opacity: 0;
  }
}
.eristique_img .boite {
  height: 140px;
}

.eristique_img .boite img {
  opacity: 0;
}

.eristique_img .boite img.anim {
  -webkit-animation: eris 15s 3s linear infinite;
  animation: eris 15s 3s linear infinite;
}

.eristique_img .boite picture:last-of-type img.anim {
  -webkit-animation: erislast 15s 3s ease-in-out infinite;
  animation: erislast 15s 3s ease-in-out infinite;
}

@-webkit-keyframes lukaz1 {
  0% {
    opacity: 1;
    top: 0;
  }
  18.2% {
    opacity: 1;
    top: -227px;
  }
  19.21% {
    top: 0;
    opacity: 0;
  }
}
@keyframes lukaz1 {
  0% {
    opacity: 1;
    top: 0;
  }
  18.2% {
    opacity: 1;
    top: -227px;
  }
  19.21% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes lukaz2 {
  16.2% {
    top: 0;
    opacity: 0;
  }
  18.21% {
    opacity: 1;
    top: 0;
  }
  45.5% {
    opacity: 1;
    top: -542px;
  }
  45.51% {
    top: 0;
    opacity: 0;
  }
}
@keyframes lukaz2 {
  16.2% {
    top: 0;
    opacity: 0;
  }
  18.21% {
    opacity: 1;
    top: 0;
  }
  45.5% {
    opacity: 1;
    top: -542px;
  }
  45.51% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes lukaz3 {
  40.5% {
    top: 0;
    opacity: 0;
  }
  45.51% {
    opacity: 1;
    top: 0;
  }
  72.8% {
    opacity: 1;
    top: -631px;
  }
  72.81% {
    top: 0;
    opacity: 0;
  }
}
@keyframes lukaz3 {
  40.5% {
    top: 0;
    opacity: 0;
  }
  45.51% {
    opacity: 1;
    top: 0;
  }
  72.8% {
    opacity: 1;
    top: -631px;
  }
  72.81% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes lukaz4 {
  67.8% {
    top: 0;
    opacity: 0;
  }
  72.81% {
    opacity: 1;
    top: 0;
  }
  91.4% {
    opacity: 1;
    top: -227px;
  }
  92.4% {
    opacity: 0;
  }
}
@keyframes lukaz4 {
  67.8% {
    top: 0;
    opacity: 0;
  }
  72.81% {
    opacity: 1;
    top: 0;
  }
  91.4% {
    opacity: 1;
    top: -227px;
  }
  92.4% {
    opacity: 0;
  }
}
.lukaz_img .boite {
  height: 250px;
}

.lukaz_img .boite img {
  opacity: 0;
}

.lukaz_img .boite picture:nth-of-type(1) img.anim {
  -webkit-animation: lukaz1 22s 3s ease-in-out infinite;
  animation: lukaz1 22s 3s ease-in-out infinite;
}

.lukaz_img .boite picture:nth-of-type(2) img.anim {
  -webkit-animation: lukaz2 22s 3s ease-in-out infinite;
  animation: lukaz2 22s 3s ease-in-out infinite;
}

.lukaz_img .boite picture:nth-of-type(3) img.anim {
  -webkit-animation: lukaz3 22s 3s ease-in-out infinite;
  animation: lukaz3 22s 3s ease-in-out infinite;
}

.lukaz_img .boite picture:nth-of-type(4) img.anim {
  -webkit-animation: lukaz4 22s 3s ease-in-out infinite;
  animation: lukaz4 22s 3s ease-in-out infinite;
}

@-webkit-keyframes adv1 {
  4% {
    opacity: 1;
  }
  11.54% {
    opacity: 1;
  }
  15.55% {
    opacity: 0;
  }
}
@keyframes adv1 {
  4% {
    opacity: 1;
  }
  11.54% {
    opacity: 1;
  }
  15.55% {
    opacity: 0;
  }
}
@-webkit-keyframes adv2 {
  8.54% {
    opacity: 0;
  }
  12.55% {
    opacity: 1;
  }
  23.09% {
    opacity: 1;
  }
  27.1% {
    opacity: 0;
  }
}
@keyframes adv2 {
  8.54% {
    opacity: 0;
  }
  12.55% {
    opacity: 1;
  }
  23.09% {
    opacity: 1;
  }
  27.1% {
    opacity: 0;
  }
}
@-webkit-keyframes adv3 {
  20.1% {
    opacity: 0;
  }
  23.09% {
    top: 0;
  }
  24.1% {
    opacity: 1;
  }
  44.17% {
    opacity: 1;
    top: -225px;
  }
  47.18% {
    opacity: 0;
  }
}
@keyframes adv3 {
  20.1% {
    opacity: 0;
  }
  23.09% {
    top: 0;
  }
  24.1% {
    opacity: 1;
  }
  44.17% {
    opacity: 1;
    top: -225px;
  }
  47.18% {
    opacity: 0;
  }
}
@-webkit-keyframes adv4 {
  40.18% {
    opacity: 0;
  }
  44.17% {
    top: 0;
  }
  45.18% {
    opacity: 1;
  }
  84.63% {
    opacity: 1;
    top: -790px;
  }
  88.64% {
    opacity: 0;
  }
}
@keyframes adv4 {
  40.18% {
    opacity: 0;
  }
  44.17% {
    top: 0;
  }
  45.18% {
    opacity: 1;
  }
  84.63% {
    opacity: 1;
    top: -790px;
  }
  88.64% {
    opacity: 0;
  }
}
.adventice_img .boite {
  height: 205px;
}

.adventice_img .boite img {
  opacity: 0;
}

.adventice_img .boite picture:nth-of-type(1) img.anim {
  -webkit-animation: adv1 20s 3s linear infinite;
  animation: adv1 20s 3s linear infinite;
}

.adventice_img .boite picture:nth-of-type(2) img.anim {
  -webkit-animation: adv2 20s 3s linear infinite;
  animation: adv2 20s 3s linear infinite;
}

.adventice_img .boite picture:nth-of-type(3) img.anim {
  -webkit-animation: adv3 20s 3s ease-in-out infinite;
  animation: adv3 20s 3s ease-in-out infinite;
}

.adventice_img .boite picture:nth-of-type(4) img.anim {
  -webkit-animation: adv4 20s 3s ease-in-out infinite;
  animation: adv4 20s 3s ease-in-out infinite;
}

@-webkit-keyframes simple {
  0% {
    opacity: 1;
  }
  5.88% {
    opacity: 1;
  }
  5.89% {
    opacity: 0;
  }
}
@keyframes simple {
  0% {
    opacity: 1;
  }
  5.88% {
    opacity: 1;
  }
  5.89% {
    opacity: 0;
  }
}
@-webkit-keyframes simpleavantlast {
  0% {
    opacity: 1;
  }
  8.82% {
    opacity: 1;
  }
  8.83% {
    opacity: 0;
  }
}
@keyframes simpleavantlast {
  0% {
    opacity: 1;
  }
  8.82% {
    opacity: 1;
  }
  8.83% {
    opacity: 0;
  }
}
@-webkit-keyframes simplelast {
  0% {
    top: 0;
    opacity: 0;
  }
  2.94% {
    top: 0;
    opacity: 1;
  }
  17.64% {
    top: -262px;
    opacity: 1;
  }
  17.65% {
    opacity: 0;
  }
}
@keyframes simplelast {
  0% {
    top: 0;
    opacity: 0;
  }
  2.94% {
    top: 0;
    opacity: 1;
  }
  17.64% {
    top: -262px;
    opacity: 1;
  }
  17.65% {
    opacity: 0;
  }
}
.ethikmologie-simple_img .boite {
  height: 140px;
}

.ethikmologie-simple_img .boite img {
  opacity: 0;
}

.ethikmologie-simple_img .boite img.anim {
  -webkit-animation: simple 17s 3s linear infinite;
  animation: simple 17s 3s linear infinite;
}

.ethikmologie-simple_img .boite picture:nth-of-type(12) img.anim {
  -webkit-animation: simpleavantlast 17s 3s linear infinite;
  animation: simpleavantlast 17s 3s linear infinite;
}

.ethikmologie-simple_img .boite picture:last-of-type img.anim {
  -webkit-animation: simplelast 17s 3s ease-in-out infinite;
  animation: simplelast 17s 3s ease-in-out infinite;
}



@-webkit-keyframes obra1 {
  2% {
    opacity: 1;
    top: 0;
  }
  33.2% {
    opacity: 1;
    top: -1376px;
  }
  33.21% {
    top: 0;
    opacity: 0;
  }
}
@keyframes obra1 {
  2% {
    opacity: 1;
    top: 0;
  }
  33.2% {
    opacity: 1;
    top: -1376px;
  }
  33.21% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes obra2 {
  29.5% {
    top: 0;
    opacity: 0;
  }
  33.21% {
    opacity: 1;
    top: 0;
  }
  66.8% {
    opacity: 1;
    top: -1401px;
  }
  68.8% {
    opacity: 0;
    top: -1401px;
  }
  68.81% {
    top: 0;
    opacity: 0;
  }
}
@keyframes obra2 {
  29.5% {
    top: 0;
    opacity: 0;
  }
  33.21% {
    opacity: 1;
    top: 0;
  }
  66.8% {
    opacity: 1;
    top: -1401px;
  }
  68.8% {
    opacity: 0;
    top: -1401px;
  }
  68.81% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes obra3 {
  64.8% {
    top: 0;
    opacity: 0;
  }
  66.81% {
    opacity: 1;
    top: 0;
  }
  95.4% {
    opacity: 1;
    top: -1401px;
  }
  98% {
    opacity: 0;
  }
}
@keyframes obra3 {
  64.8% {
    top: 0;
    opacity: 0;
  }
  66.81% {
    opacity: 1;
    top: 0;
  }
  95.4% {
    opacity: 1;
    top: -1401px;
  }
  98% {
    opacity: 0;
  }
}
.obra_img .boite {
  height: 250px;
}
.obra_img .boite img {
  opacity: 0;
}

.obra_img .boite picture:nth-of-type(1) img.anim {
  -webkit-animation: obra1 22s 3s ease-in-out infinite;
  animation: obra1 30s 3s ease-in-out infinite;
}
.obra_img .boite picture:nth-of-type(2) img.anim {
  -webkit-animation: obra2 22s 3s ease-in-out infinite;
  animation: obra2 30s 3s ease-in-out infinite;
}
.obra_img .boite picture:nth-of-type(3) img.anim {
  -webkit-animation: obra3 22s 3s ease-in-out infinite;
  animation: obra3 30s 3s ease-in-out infinite;
}


@-webkit-keyframes yogalaura1 {
  2% {
    opacity: 1;
    top: 0;
  }
  27.2% {
    opacity: 1;
    top: -1376px;
  }
  33.21% {
    top: 0;
    opacity: 0;
  }
}
@keyframes yogalaura1 {
  2% {
    opacity: 1;
    top: 0;
  }
  22.2% {
    opacity: 1;
    top: -312px;
  }
  27.21% {
    top: -312px;
    opacity: 0;
  }
  27.22% {
    top: 0;
    opacity: 0;
  }
}
@-webkit-keyframes yogalaura2 {
  2.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  17.7% {
    opacity: 0;
  }
}
@keyframes yogalaura2 {
  22.5% {
    opacity: 0;
  }
  25.21% {
    opacity: 1;
  }
  41.87% {
    opacity: 1;
  }
  41.88% {
    opacity: 0;
  }
}
@-webkit-keyframes yogalaura3 {
  0% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
@keyframes yogalaura3 {
  41.87% {
    opacity: 0;
  }
  41.88% {
    opacity: 1;
  }
  57.54% {
    opacity: 1;
  }
  57.55% {
    opacity: 0;
  }
}
@-webkit-keyframes yogalaura4 {
  0% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
@keyframes yogalaura4 {
  57.54% {
    opacity: 0;
  }
  57.55% {
    opacity: 1;
  }
  74.21% {
    opacity: 1;
  }
  74.22% {
    opacity: 0;
  }
}
@-webkit-keyframes yogalaura5 {
  0% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
@keyframes yogalaura5 {
  74.21% {
    opacity: 0;
  }
  74.22% {
    opacity: 1;
  }
  90.88% {
    opacity: 1;
  }
  92% {
    opacity: 0;
  }
}
.yoga-avec-laura_img .boite {
  height: 316px;
}
.yoga-avec-laura_img .boite img {
  opacity: 0;
}

.yoga-avec-laura_img .boite picture:nth-of-type(1) img.anim {
  -webkit-animation: yogalaura1 20s 3s linear infinite;
  animation: yogalaura1 18s 3s ease-in-out infinite;
}
.yoga-avec-laura_img .boite picture:nth-of-type(2) img.anim {
  -webkit-animation: yogalaura2 20s 3s linear infinite;
  animation: yogalaura2 18s 3s linear infinite;
}
.yoga-avec-laura_img .boite picture:nth-of-type(3) img.anim {
  -webkit-animation: yogalaura3 20s 3s linear infinite;
  animation: yogalaura3 18s 3s linear infinite;
}
.yoga-avec-laura_img .boite picture:nth-of-type(4) img.anim {
  -webkit-animation: yogalaura4 20s 3s linear infinite;
  animation: yogalaura4 18s 3s linear infinite;
}
.yoga-avec-laura_img .boite picture:nth-of-type(5) img.anim {
  -webkit-animation: yogalaura5 20s 3s linear infinite;
  animation: yogalaura5 18s 3s linear infinite;
}


/*@keyframes archifirst {
  0% {
    transform: translate(-165px, -45px);
  }
  2.5% {
    opacity: 1;
  }
  7.5% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(0, -90px);
  }
  22.5% {
    transform: translate(-330px, -90px);
  }
  30% {
    opacity: 1;
    transform: translate(-330px, 0);
  }
  35% {
    opacity: 0;
    transform: translate(0);
  }
}*/
@keyframes archifirst {
  0% {
    transform: translate(-50px, -50px);
  }
  2.5% {
    opacity: 1;
  }
  7.5% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(0, -100px);
  }
  22.5% {
    transform: translate(-100px, -100px);
  }
  30% {
    opacity: 1;
    transform: translate(-100px, 0);
  }
  35% {
    opacity: 0;
    transform: translate(0);
  }
}

@-webkit-keyframes archi {
  2.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  17.7% {
    opacity: 0;
  }
}
@keyframes archi {
  2.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  17.7% {
    opacity: 0;
  }
}
@-webkit-keyframes archilast {
  2.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
@keyframes archilast {
  2.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}

.archifictions_img .boite {
  height: 239px;
}
.archifictions_img .boite img {
  opacity: 0;
}

.archifictions_img .boite img.img-first.anim {
  width: unset;
  -webkit-animation: archifirst 20s 3s linear infinite;
  animation: archifirst 20s 3s linear infinite;
}
.archifictions_img .boite img.anim:not(.img-first) {
  -webkit-animation: archi 20s 3s linear infinite;
  animation: archi 20s linear infinite;
}
.archifictions_img .boite picture:last-of-type img.anim {
  -webkit-animation: archilast 20s 3s linear infinite;
  animation: archilast 20s linear infinite;
}



@-webkit-keyframes acanthefirst {
  0% {
    transform: translate(-75px, -106px);
  }
  3% {
    opacity: 1;
  }
  15% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(0, -206px);
  }
  45% {
    transform: translate(-150px, -206px);
  }
  60% {
    opacity: 1;
    transform: translate(-150px, 0);
  }
  65% {
    opacity: 0;
    transform: translate(0);
  }
}
@keyframes acanthefirst {
  0% {
    transform: translate(-75px, -106px);
  }
  3% {
    opacity: 1;
  }
  15% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(0, -206px);
  }
  45% {
    transform: translate(-150px, -206px);
  }
  60% {
    opacity: 1;
    transform: translate(-150px, 0);
  }
  65% {
    opacity: 0;
    transform: translate(0);
  }
}
@-webkit-keyframes acanthe {
  0% {
    opacity: 0;
    top: 0;
  }
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
    top: 0;
  }
  90% {
    opacity: 1;
    top: -457px;
  }
  95% {
    opacity: 0;
  }
}
@keyframes acanthe {
  0% {
    opacity: 0;
    top: 0;
  }
  60% {
    opacity: 0;
  }
  65% {
    opacity: 1;
    top: 0;
  }
  90% {
    opacity: 1;
    top: -457px;
  }
  95% {
    opacity: 0;
  }
}

.acanthe_img .boite {
  height: 350px;
}
.acanthe_img .boite img {
  opacity: 0;
}

.acanthe_img .boite img.img-first.anim {
  width: unset;
  -webkit-animation: acanthefirst 14s 3s linear infinite;
  animation: acanthefirst 14s 3s linear infinite;
}
.acanthe_img .boite img.anim:not(.img-first) {
  -webkit-animation: acanthe 14s 3s linear infinite;
  animation: acanthe 14s 3s ease-in-out infinite;
}



@-webkit-keyframes servpub {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  10.01% {
    opacity: 0;
  }
}
@keyframes servpub {
  0% {
    opacity: 0;
  }
  2.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  22.5% {
    opacity: 0;
  }
}
.services-publiques_img .boite {
  height: 246px;
}

.services-publiques_img .boite img {
  opacity: 0;
}

.services-publiques_img .boite img.anim {
  -webkit-animation: servpub 10.5s 3s linear infinite;
  animation: servpub 10.5s 3s linear infinite;
}



@-webkit-keyframes hypno {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  10.01% {
    opacity: 0;
  }
}
@keyframes hypno {
  0% {
    opacity: 0;
  }
  2.5% {
    opacity: 1;
    left: 0;
  }
  30% {
    opacity: 1;
    left: -150px;
  }
  32.5% {
    opacity: 0;
  }
}
.hypnosoma_img .boite {
  height: 246px;
}

.hypnosoma_img .boite img {
  opacity: 0;
  width: unset;
}

.hypnosoma_img .boite img.anim {
  -webkit-animation: hypno 16s 3s ease-in-out infinite;
  animation: hypno 16s 3s ease-in-out infinite;
}



.forum-des-reves-tetus_img .boite {
  height: 225px;
}
.forum-des-reves-tetus_img img.anim {
  opacity: 1;
}



.rmg_img .boite {
  height: 220px;
}
.rmg_img .boite img.anim {
  opacity: 1;
  transition: opacity .3s;
}




/*****************/
/* MEDIA QUERIES */
/*****************/
/*.phone .custom-wrapper {
  height: 2rem;
  background-color: rgba(39, 40, 48, 0.9);
}*/

.phone #module0 #fond {
  background-size: 280px;
}

.phone #module0 .presentation {
  top: 2rem;
}

@media screen and (max-width: 1024px) {
  #module0 .cadre, #module0 #onclick {
    left: 0;
  }
}
@media only screen and (max-width: 863px) {
  .conteneur-legende {
    padding-top: 150px;
    height: 100%;
    overflow: hidden;
  }

  .conteneur-legende.montre {
    overflow: auto;
  }

  .images {
    top: 0;
  }

  .legende {
    position: static;
    width: 80%;
    max-width: 500px;
    padding-bottom: 6rem;
  }

  .legende .lien {
    position: absolute;
    top: 75px;
  }

  .legende .sortie {
    top: 25px;
    right: 10px;
  }
}
.firefox .phone .legende {
  padding-bottom: 7rem;
}


@media only screen and (max-width: 768px) {
  #module0 .presentation {
    left: 20px;
    width: 320px;
    height: 180px;
  }
  /*#module0 .creation:nth-of-type(1) {
    left: 30%;
    top: 50%;
  }
  #module0 .creation:nth-of-type(2) {
    left: 10%;
    top: 57%;
  }
  #module0 .creation:nth-of-type(3) {
    left: 58%;
    top: 55.5%;
  }
  #module0 .creation:nth-of-type(4) {
    left: 22%;
    top: 63%;
  }
  #module0 .creation:nth-of-type(5) {
    left: 35%;
    top: 70%;
  }
  #module0 .creation:nth-of-type(6) {
    left: 16%;
    top: 75%;
  }
  #module0 .creation:nth-of-type(7) {
    left: 28%;
    top: 82%;
  }
  #module0 .creation:nth-of-type(8) {
    left: 50%;
    top: 85%;
  }
  #module0 .creation:nth-of-type(9) {
    left: 20%;
    top: 90%;
  }
  #module0 .creation:nth-of-type(10) {
    left: 20%;
    top: 43%;
  }
  #module0 .creation:nth-of-type(11) {
    left: 30%;
    top: 50%;
  }
  #module0 .creation:nth-of-type(12) {
    left: 10%;
    top: 57%;
  }*/
  #module0 .bordsign.gauche {
    left: 5px;
    width: calc(100% - 5px - 150px);
  }

  #onclick .cadre {
    align-items: baseline;
  }
}