@import "snippet.css";
.marker {
  background-color: yellow;
}

code {
  color: green;
}

hr {
  background-color: #66afe9;
}
hr.style-two {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-four {
  height: 12px;
  border: 0;
  box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

#navbar #logo {
  width: 64px;
}
#navbar #progression {
  float: right;
  width: calc(100% - 76px);
  height: 64px;
  padding-right: 60px;
  white-space: nowrap;
  overflow-x: hidden;
}
#navbar #progression .node {
  position: relative;
  bottom: -37px;
  height: 4px;
  width: 4px;
  display: inline-block;
  overflow: visible;
}
#navbar #progression .node .texte {
  position: absolute;
  top: -1.3vw;
  font-size: 11px;
  transform-origin: bottom left;
}
#navbar #progression .node .texte.actif {
  color: red;
}
#navbar #progression .edge {
  width: 100px;
  position: relative;
  bottom: -35.5px;
  height: 1px;
  display: inline-block;
}
#navbar #progression .prg_new.texte {
  top: -1.9vw;
  color: #fe7a15;
  font-weight: bold;
}
#navbar #progression .prg_new.node {
  height: 8px;
  width: 8px;
  bottom: -39px;
  background-color: #fe7a15;
  border: 2px solid #aaaa00;
}
#navbar #progression .prg_new.edge {
  background-color: yellow;
  border: 2px solid #aaaa00;
  bottom: -36.5px;
}
#navbar #progression .prg_last.texte, #navbar #progression .prg_past.texte {
  top: -1.9vw;
}
#navbar #progression .prg_last.node, #navbar #progression .prg_past.node {
  height: 6px;
  width: 6px;
  bottom: -37.6px;
  background-color: green;
  border: 2px solid green;
}
#navbar #progression .prg_last.edge, #navbar #progression .prg_past.edge {
  background-color: green;
  border: 1.2px solid green;
  bottom: -35.9px;
}

#prg_button.passe {
  background-color: #aaaaaa;
  color: white;
}
#prg_button.ante {
  background-color: #2d6e64;
  color: white;
  cursor: pointer;
}
#prg_button.ante:hover {
  background-color: #4f8f86;
}
#prg_button.now {
  background-color: #fe7a15;
  color: white;
  cursor: pointer;
}
#prg_button.now:hover {
  background-color: #ff9c37;
}
#prg_button.futur {
  background-color: #aaaaaa;
  color: white;
}

.snippet a {
  cursor: pointer;
}

blockquote {
  overflow-x: auto;
}

.menu-icon {
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: #052b23;
  cursor: pointer;
  z-index: 100;
}
.menu-icon span {
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  top: calc(50% - 1px);
  left: calc(50% - 10px);
  background-color: #fff;
}
.menu-icon span::before, .menu-icon span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #fff;
  transition: transform 3s;
}
.menu-icon span::before {
  transform: translateY(-6px);
}
.menu-icon span::after {
  transform: translateY(6px);
}
.menu-icon:hover span::before {
  transform: translateY(-8px);
}
.menu-icon:hover span::after {
  transform: translateY(8px);
}
.menu-icon.menu-icon-cross span::before, .menu-icon.menu-icon-cross span::after {
  width: 20px;
}
.menu-icon.menu-icon-cross.is-opened span::before {
  width: 10px;
  transform: translateY(-2.5px) rotate(-30deg);
}
.menu-icon.menu-icon-cross.is-opened span::after {
  width: 10px;
  transform: translateY(2.5px) rotate(30deg);
}

.splitter {
  text-align: justify;
}
.splitter#time-line {
  float: left;
  margin: 80px 0 0 10px;
  width: 0;
  max-height: calc(92vh - 58px);
  overflow-y: auto;
}
.splitter#contenu {
  float: right;
  margin: 80px 10px 32px;
  width: 100%;
  --tw-shadow: 0 25px 50px -12px rgba(128, 128, 128, 0.35) !important;
}
.splitter#contenu #fonction {
  margin-left: 24px;
  padding-bottom: 14px;
}
.splitter#contenu #fonction #vacances {
  position: absolute;
  right: 15px;
  width: 200px;
  transform: translateY(-2.5px) rotate(-20deg);
  opacity: 0.95;
  box-shadow: 1px 2px 5px 1px rgba(80, 80, 80, 0.7);
}

.ui-accordion-header {
  color: white;
  border: black 1px solid;
  border-radius: 0.4em;
  margin-bottom: 0.2em;
  cursor: pointer;
}
.ui-accordion-header.ui-accordion-header-active {
  background: #0d5c8c;
}
.ui-accordion-header.ui-accordion-header-active:hover {
  background: #2f7eae;
}
.ui-accordion-header.ui-accordion-header-collapsed {
  background: #2f7eae;
}
.ui-accordion-header.ui-accordion-header-collapsed:hover {
  background: #0d5c8c;
}
.ui-accordion-header.depth-2.ui-accordion-header-active {
  background: #ff8400;
}
.ui-accordion-header.depth-2.ui-accordion-header-active:hover {
  background: #ff9944;
}
.ui-accordion-header.depth-2.ui-accordion-header-collapsed {
  background: #ff9944;
}
.ui-accordion-header.depth-2.ui-accordion-header-collapsed:hover {
  background: #ff8400;
}

.time-block .fonction:last-child {
  border: none;
  margin-top: 0.7px;
}
.time-block .fonction:last-child.gauche {
  border-right: none;
}
.time-block .fonction:last-child.droite {
  border-left: none;
}
.time-block .fonction:last-child.fonction:first-child {
  margin-top: -0.2em;
  border-top: 0.3em solid sandybrown;
  border-radius: 0;
}
.time-block .fonction {
  border-top: 0.3em solid sandybrown;
  border-bottom: 0.3em solid sandybrown;
  margin-top: -0.29em;
  cursor: pointer;
}
.time-block .fonction.gauche {
  border-right: 0.3em solid sandybrown;
  margin-left: 0.35em;
  border-radius: 0 0.6em 0.6em 0;
}
.time-block .fonction.droite {
  border-left: 0.3em solid sandybrown;
  margin-right: 0.35em;
  border-radius: 0.6em 0 0 0.6em;
}
.time-block .fonction p {
  font-size: 0.4em;
}
.time-block .fonction article {
  position: relative;
  background-color: #b3d4fc;
  padding: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 0.3em;
  box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.7);
}
.time-block .fonction article:hover {
  background-color: #d5f6fe;
}
.time-block .fonction article .crochet {
  border-radius: 0.3em;
  border: 1px solid white;
  position: absolute;
  background: #d94a0a;
  width: 0.5em;
  height: 1.2em;
  top: -0.8em;
}
.time-block .fonction article .crochet.gauch {
  left: 2em;
}
.time-block .fonction article .crochet.droit {
  right: 2em;
}
.time-block .fonction article.actif {
  background-color: #f0c674;
  border: #fe7a15 2px solid;
}
.time-block .fonction article.actif:hover {
  background-color: #f2e896;
}