/* Generated by less 2.5.1 */
html,
body {
  height: 100%;
  overflow: hidden;
}
@font-face {
  font-family: tree;
  src: url(images/leaf1.TTF);
  font-weight: bold;
}
body {
  font-family: arial;
  background-color: #300000;
  margin: 0;
  padding: 0;
  color: white;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 16,0 0,16 0,32 32,0 Z m 16,16 -16,16 16,0 0,-8 z" fill-rule="evenodd" fill-opacity=".3"/></svg>');
  background-size: 1.5em 1.5em;
  display: flex;
  justify-content: center;
}
.angle {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 16,0 0,16 0,32 32,0 Z m 16,16 -16,16 16,0 0,-8 z" fill-rule="evenodd" fill-opacity=".3"/></svg>');
}
div.adresses {
  align-self: center;
  background-color: rgba(255, 255, 255, 0.1);
  background-color: #4E3030;
  padding: 1em;
  border-radius: .5em;
  width: 45ch;
  font-size: 1em;
  position: relative;
}
div.adresses h1 {
  font-size: 1.8em;
  margin-top: 0;
  text-align: center;
}
div.adresses h2 {
  font-size: 1em;
  margin-bottom: 0;
}
div.adresses > div > div {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 1em .5em;
  color: black;
  border-radius: .5em;
}
div.adresses > div > div:empty {
  font-style: italic;
}
div.adresses > div > div:empty:before {
  content: "Cliquez sur un fichier";
}
div.adresses input#voir_relative {
  display: none;
}
div.adresses input#voir_relative + label {
  float: right;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 19.212891,0.00195313 C 16.375838,-0.07173064 13.589098,1.3713437 12.070312,4.0019531 l -2,3.4628907 a 2,2 0 0 0 0.732422,2.7324222 2,2 0 0 0 2.732422,-0.7324222 l 2,-3.4628907 c 1.104569,-1.9131705 3.54972,-2.5694132 5.462891,-1.4648437 1.91317,1.1045695 2.569413,3.5516734 1.464844,5.4648436 L 20.154297,14 H 6 c -1.1045695,0 -2,0.895431 -2,2 v 14 c 0,1.104569 0.8954305,2 2,2 h 20 c 1.104569,0 2,-0.895431 2,-2 V 16 c 0,-1.104569 -0.895431,-2 -2,-2 h -1.226562 l 1.154296,-1.998047 C 28.136873,8.1756133 26.824388,3.2814047 22.998047,1.0722656 21.802316,0.38190983 20.50246,0.03544573 19.212891,0.00195313 Z" fill="rgb(255, 255, 255)" /></svg>');
  width: 1.5em;
  height: 1.5em;
  pointer-events: auto;
}
div.adresses input#voir_relative:not(:checked) + label {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 16,2 C 11.581722,2 8,5.581722 8,10 v 4 H 6 a 2,2 0 0 0 -2,2 v 14 a 2,2 0 0 0 2,2 h 20 a 2,2 0 0 0 2,-2 V 16 A 2,2 0 0 0 26,14 H 24 V 10 C 24,5.581722 20.418278,2 16,2 Z m 0,4 c 2.209139,0 4,1.790861 4,4 v 4 h -8 v -4 c 0,-2.209139 1.790861,-4 4,-4 z" fill="rgb(255, 255, 255)" /></svg>');
}
div.adresses input#voir_relative:not(:checked) ~ div {
  color: transparent;
  opacity: .3;
}
div.adresses input#voir_relative:not(:checked) ~ h2 {
  color: rgba(255, 255, 255, 0.3);
}
div.adresses #btnInverser {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 0,20 8.4,17 V 32 H 14 V 0 H 11.2 L 0,18 Z m 32,-8 -8.4,3 V 0 H 18 v 32 h 2.8 L 32,14 Z" fill="rgb(255, 255, 255)" /></svg>');
  width: 1em;
  height: 1em;
  position: absolute;
  right: 1em;
  margin-top: .5em;
  line-height: 0;
  cursor: pointer;
  opacity: .3;
  transition: .5s;
}
div.adresses #btnInverser:hover {
  opacity: 1;
}
div.colonne {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
div.colonne + div.colonne {
  margin-left: 1em;
}
div.colonne > h1 {
  font-family: tree;
  font-size: 4.5em;
  text-align: center;
  line-height: 1;
  margin: 0;
  margin-top: .25em;
  text-shadow: 0 .1em .2em black;
}
div#infos:after {
  content: "";
}
div#btnAlea {
  background-color: #980000;
  background-image: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 100%);
  cursor: pointer;
  color: white;
  text-shadow: 0 -0.1ch black;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
  width: 6em;
  height: 6em;
  text-align: center;
  outline: none;
  user-select: none;
}
div#btnAlea:active {
  background-color: #cc0000;
}
div#arborescence {
  height: 100%;
  color: black;
  font-size: 2.38095238vh;
  line-height: 1em;
}
div#arborescence,
div#arborescence * {
  display: flex;
  flex: 0 0 auto;
}
div#arborescence,
div#arborescence *,
div#arborescence:before,
div#arborescence *:before {
  background-size: 1.5em 1.5em;
  background-repeat: no-repeat;
}
div#arborescence > div.contenu {
  padding: 1em 3em;
  width: 25ch;
  background-color: white;
  flex: 1 0 auto;
}
div#arborescence > div.contenu > div.element {
  background-image: none !important;
}
div#arborescence > div.contenu > div.element > div.nom {
  padding-left: 0;
  margin-left: 0;
}
div#arborescence > div.contenu > div.element > * {
  padding-left: 0;
}
div#arborescence div.element {
  flex-direction: column;
  flex: 1 0 auto;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m15,21 2,0 0,-2 -2,0 z m0,4 2,0 0,-2 -2,0 z m0,4 2,0 0,-2 -2,0 z m0,3 2,0 0,-1 -2,0z m0,-17 2,0 0,2 -2,0z m4,0 2,0 0,2 -2,0z m4,0 2,0 0,2 -2,0z m4,0 2,0 0,2 -2,0z m4,0 1,0 0,2 -1,0z m-16,-4 2,0 0,2 -2,0z m0,-4 2,0 0,2 -2,0z m0,-4 2,0 0,2 -2,0z m0,-3 2,0 0,1 -2,0z" fill-rule="evenodd"/></svg>');
  background-position: left top;
  background-repeat: no-repeat;
}
div#arborescence div.element > * {
  padding-left: 1.5em;
}
div#arborescence div.element > div.nom {
  cursor: pointer;
  align-items: center;
  background-size: 1.5em 1.5em;
  padding-left: 0;
  margin-left: 1.5em;
  border-radius: .25em;
  transition: .5s;
}
div#arborescence div.element > div.nom:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
div#arborescence div.element > div.nom:before {
  content: "";
  flex: 0 0 1.5em;
  width: 1.5em;
  height: 1.5em;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m 26,10 0,17 c 0,1.662 -1.338,3 -3,3 L 9,30 C 7.338,30 6,28.662 6,27 L 6,5 C 6,3.338 7.338,2 9,2 l 9,0 z" fill-rule="evenodd" fill="rgb(162, 206, 240)"/><path d="m 18,2 0,5 c 0,1.662 1.338,3 3,3 l 5,0 C 26,9.169 25.665,8.4192 25.123,7.877 l -5,-5 C 19.581,2.3347 18.831,2 18,2 Z" fill-rule="evenodd" fill="rgb(198, 225, 246)"/></svg>');
  margin-right: .5ch;
}
div#arborescence div.element > div.nom.depart,
div#arborescence div.element > div.nom.arrivee {
  background-repeat: repeat-x;
  animation: gauche 1s infinite linear;
  font-weight: bold;
}
div#arborescence div.element > div.nom.depart {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 0,0 16,16 0,32 8,32 24,16 8,0 0,0 Z M 16,0 32,16 32,8 24,0 16,0 Z m 16,16 -16,16 8,0 8,-8 0,-8 z M 0,8 0,16 0,24 8,16 0,8 Z" transform="rotate(180,16,16)" fill-opacity=".3"/></svg>');
  background-color: #268326;
  color: white;
  animation-name: gauche;
}
div#arborescence div.element > div.nom.arrivee {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 0,0 16,16 0,32 8,32 24,16 8,0 0,0 Z M 16,0 32,16 32,8 24,0 16,0 Z m 16,16 -16,16 8,0 8,-8 0,-8 z M 0,8 0,16 0,24 8,16 0,8 Z" transform="rotate(0,16,16)" fill-opacity=".1"/></svg>');
  background-repeat: repeat-x;
  background-color: #ffff00;
  animation-name: droite;
}
div#arborescence div.element.dossier {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m 15,7 2,0 0,2 -2,0 zm8,8 2,0 0,2 -2,0 zm-8,10 2,0 0,-2 -2,0 zm0,4 2,0 0,-2 -2,0 zm0,3 2,0 0,-1 -2,0 zm-2,-17 0,2 6,0 0,-2 zm14,0 2,0 0,2 -2,0 zm4,0 1,0 0,2 -1,0 zM15,3 l 2,0 0,2 -2,0 zm0,-3 2,0 0,1 -2,0 zm-3,12 8,0 0,8 -8,0 zm-1,-1 10,0 0,10 -10,0 z" fill-rule="evenodd"/></svg>');
  background-position: left top;
  background-repeat: no-repeat;
}
div#arborescence div.element.dossier > div.nom:before {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m 5,6 7,0 2,2 11,0 c 1.662,0 3,1.338 3,3 l 0,14 c 0,1.662 -1.338,3 -3,3 L 5,28 C 3.338,28 2,26.662 2,25 L 2,9 C 2,7.338 3.338,6 5,6 Z" fill="rgb(255, 160, 0)"/><path d="M 10.320312,12 C 9.0978645,12 8.0305802,12.557413 7.7851562,14.181641 L 5.6972656,28 25.679688,28 c 1.635056,0 2.352515,-0.972912 2.535156,-2.181641 L 29.974609,14.181641 C 30.15725,12.972913 29.320105,12 28.097656,12 Z" fill="rgb(255, 202, 40)"/></svg>');
}
div#arborescence div.element.dossier.ferme {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m 15,7 2,0 0,2 -2,0 zm8,8 2,0 0,2 -2,0 zm-8,10 2,0 0,-2 -2,0 zm0,4 2,0 0,-2 -2,0 zm0,3 2,0 0,-1 -2,0 zm0,-19 0,2 -2,0 0,2 2,0 0,2 2,0 0,-2 2,0 0,-2 -2,0 0,-2 zm12,2 2,0 0,2 -2,0 zm4,0 1,0 0,2 -1,0 zM15,3 l 2,0 0,2 -2,0 zm0,-3 2,0 0,1 -2,0 zm-3,12 8,0 0,8 -8,0 zm-1,-1 10,0 0,10 -10,0 z" fill-rule="evenodd"/></svg>');
  background-position: left top;
  background-repeat: no-repeat;
}
div#arborescence div.element.dossier.ferme > div.nom:before {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 2,13 2,9 C 2,7.338 3.338,6 5,6 l 7,0 2,2 11,0 c 1.662,0 3,1.338 3,3 l 0,2 z" fill="rgb(255, 160, 0)"/><path d="m 5,10 20,0 c 1.662,0 3,1.338 3,3 l 0,12 c 0,1.662 -1.338,3 -3,3 L 5,28 C 3.338,28 2,26.662 2,25 L 2,13 c 0,-1.662 1.338,-3 3,-3 z" fill="rgb(255, 202, 40)"/></svg>');
}
div#arborescence div.element.dossier.ferme > div.contenu {
  display: none;
}
div#arborescence div.element > div.contenu {
  flex-direction: column;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m 15,21 2,0 0,-2 -2,0 zm0,4 2,0 0,-2 -2,0 zm0,4 2,0 0,-2 -2,0 zm0,3 2,0 0,-1 -2,0 zm0,-17 2,0 0,2 -2,0 zm0,-4 2,0 0,2 -2,0 zm0,-4 2,0 0,2 -2,0 zm0,-4 2,0 0,2 -2,0 zm0,-3 2,0 0,1 -2,0 z" fill-rule="evenodd"/></svg>');
  background-size: 1.5em 1.5em;
  background-repeat: repeat-y;
  background-position: left top;
}
div#arborescence div.element:last-child {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m15 0h2v1h-2zm0 3h2v2h-2zm0 4h2v2h-2zm0 4h2v2h-2zm16 4h1v2h-1zm-4 0h2v2h-2zm-4 0h2v2h-2zm-4 0h2v2h-2zm-4 0h2v2h-2z" fill-rule="evenodd"/></svg>');
  background-position: left top;
  background-repeat: no-repeat;
}
div#arborescence div.element:last-child.dossier {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m 15,7 2,0 0,2 -2,0 zm8,8 2,0 0,2 -2,0 zm-10,0 0,2 6,0 0,-2 zm14,0 2,0 0,2 -2,0 zm4,0 1,0 0,2 -1,0 zM15,3 l 2,0 0,2 -2,0 zm0,-3 2,0 0,1 -2,0 zm-3,12 8,0 0,8 -8,0 zm-1,-1 10,0 0,10 -10,0 z" fill-rule="evenodd"/></svg>');
  background-position: left top;
  background-repeat: no-repeat;
}
div#arborescence div.element:last-child.dossier > div.contenu {
  background-image: none;
}
@keyframes gauche {
  0% {
    background-position: 0px center;
    zzzbackground-color: red;
  }
  100% {
    background-position: -1.5em center;
    zzzbackground-color: blue;
  }
}
@keyframes droite {
  0% {
    background-position: 0px center;
    zzzbackground-color: red;
  }
  100% {
    background-position: 1.5em center;
    zzzbackground-color: blue;
  }
}