* {
  color: white;
  text-align: justify;
  box-sizing: border-box;
  overflow: visible;
  line-height: 1.7;
  word-break: break-word;
}


body {
  background-color: black;
  margin: 0;
}


a {
  color: rgb(128,128,256);
}

pre {
    white-space: pre-wrap;
}

.contenu-normal {
  padding-left: 16vw;
  padding-right: 16vw;
  padding-bottom: 1vh;
  padding-top: 1vh;
  margin-top: 10px;
  margin-bottom: 10px;
}

.aanimation-reverse {animation-direction: reverse;}

.banniere-principale {
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 15vw;
  padding-top: 10px;
}
.gauche {
  left: 0
}
.droite {
  right: 0
}

.grid-3w {
  display: grid;
  
}


.logo * {
  text-align: center;
  font-family: monospace;
  font-size: 0.75em;
  margin: -10px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.bouton {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.flex.space-between {
  justify-content: space-between;
}

.indent {
  text-indent: 1.5em;
}
.marge-top {margin-top: 3em;}
.marge-top-petit {margin-top: 1em;}
.marge {margin: 3em;}
.marge-moyen {margin: 2em;}
.marge-droite {margin-right: 3em;}
.marge-droite-moyen {margin-right: 2em;}

.padding {
    padding-right: 3em;
    padding-left: 3em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.padding-horizontal-petit {
    padding-right: 1em;
    padding-left: 1em;
}
.padding-top-petit {
    padding-top: 0.5em;
}
.padding-petit {
    padding-right: 1em;
    padding-left: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.no-marge {
    margin: 0;
}


.no-line-height {
    line-height: 0;
}


.absolute {position: absolute;}
.relative {position: relative;}
.fixed {position: fixed;}
.right {right: 0;}
.left {left: 0;}
.bottom {bottom: 0;}

.font-huge {
  font-size: 3em;
  line-height: 1em;
}
.font-greater {
  font-size: 1.5em;
}

/*Contient intégralement son contenu sans plus, et est au-dessus.*/
.container {
  position: relative;
  margin: 0;
  background-color: rgba(0,0,0,0);
}

.largest {
  width: 100%;
  background-color: black;
}
.dummy {
  width: 100px;
  height: 100px;
  background-color: black;
}

.bouton-feu {
  background-image: url("/assets/images/boutons/bouton-feu.gif");
  background-size: cover;
}

.citation-enonce {/*Ce qui est dit par la personne citée*/
  background-image: url("/assets/images/non-boutons/bouton-multicolore.gif");
  background-size: contain;
  background-blend-mode: multiply;
  padding: 5px;
}
.citation-specifications {/*Auteur, date et cie*/
  background-image: url("/assets/images/non-boutons/bouton-marbre-bleu.gif");
  background-size: contain;
  background-blend-mode: multiply;
  padding: 5px;
}
.citation-certificat-fond {/*Catégorie mentionnée au-dessus de chaque citation. Classe à combiner avec fond-*, où '*'=couleur. */
  display: flex;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
  background-image: url("/assets/images/non-boutons/certificat-fond.gif");
  background-size: cover;
  min-height: 46px;
  width: max-content;
  min-width: 47px;
  padding-left: 0;
  padding-right: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-blend-mode: multiply;
}
.citation-certificat-cadre-boule { /*Le carré qui entoure le clou jaune.*/
  display: inline-block;
  vertical-align: center;
  background-image: url("/assets/images/non-boutons/certificat-cadre-boule.gif");
  background-blend-mode: multiply;
  margin-right: 10px;
  width: 47px;
  height: 46px;
}
.citation-certificat-boule { /*clou jaune.*/
  background-image: url("/assets/images/non-boutons/certificat-boule.gif");
  width: 47px;
  height: 46px;

}
/*******************************/
/*Navigation*/
/*******************************/
.navigation-bar-right {
  overflow: visible;
  position: relative;
  margin: 0;
  display: flex;
  justify-content: right;
  align-items: center;
  flex-wrap: wrap;
}

.top-navigation-bar {
  overflow: visible;
  position: relative;
  background-image: url('/assets/images/fonds/fond-obsidienne.gif');
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: rgb(0,60,60);
  z-index: 0;
}
.top-navigation-bar .container {
  margin: 10px;
}
.top-navigation-bar .container div {
  position: relative;
  background-blend-mode: multiply;
  max-width: 200px;
  padding: 5px;
  margin: 0;
  background-color: darkblue;
  text-align: center;
  z-index: -1;
}
@keyframes hover-navigation-animation {
  0%, 100% {
  }
  50% {
    transform: translateY(-10px);
    filter: invert(100%);
  }
}
.top-navigation-bar .container:hover div {
  animation-name: hover-navigation-animation;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}
.top-navigation-bar .container { /*Pour enlever les traitements spéciaux créés par <a>.*/
  text-decoration: none;
}
.top-navigation-bar .container div *:not(.current-link) {
  color: white;
}
.current-link {
  color: red;
}

footer.bottom-buttons {
  margin-left: 88px;
  margin-right: 88px;
  margin-top: 31px;
  margin-bottom: 31px;
  text-align: center;
}
footer.bottom-buttons.no-top-margin {
  margin-top: 0;
}
footer.bottom-buttons.no-bottom-margin {
  margin-bottom: 0;
}

/*******************************/
/*Effets généraux*/
/*******************************/
@keyframes flashy {
  0%, 100% {filter: brightness(60%);}
  50% {filter: brightness(100%);}
}

.flashy {
  animation-name: flashy;
  animation-duration: 0.75s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}
/*******************************/
/*Propriétés générales*/
/*******************************/
.white {color: white;}
.black {color: black;}
.red {color: red;}
.green {color: green;}
.blue {color: blue;}
.darkblue {color: darkblue;}
.orange {color: orange;}
.yellow {color: yellow;}
.magenta {color: magenta;}
.purple {color: purple;}
.fond-white {background-color: white;}
.fond-black {background-color: black;}
.fond-red {background-color: red;}
.fond-blue {background-color: blue;}
.fond-darkblue {background-color: darkblue;}
.fond-blue-transparent {background-color: rgba(0, 0, 256, 0.5);}
.fond-orange {background-color: orange;}
.fond-yellow {background-color: yellow;}
.fond-green {background-color: green;}
.fond-pink {background-color: pink;}
.fond-darksalmon {background-color: darksalmon;}
.fond-pink-transparent {background-color: rgba(256, 192, 203, 0.5);}
.fond-purple {background-color: purple;}
.fond-lime {background-color: lime;}
.fond-lightcoral {background-color: lightcoral;}
.fond-palegoldenrod {background-color:palegoldenrod;}
.fond-gray {background-color: gray;}
.fond-gold {background-color: gold;}

.fond-black-very-transparent {background-color: rgba(0, 0, 0, 0.2);}
.fond-black-tres-transparent {background-color: rgba(0, 0, 0, 0.2);}
.fond-black-transparent {background-color: rgba(0, 0, 0, 0.5);}
.fond-black-peu-transparent {background-color: rgba(0, 0, 0, 0.7);}



.invert {
  filter: invert(1);
}

.transparent {
  filter: opacity(0.5);
}

.center {text-align: center;}


.title-size {height: 140px;}
.top-right {right: 0; top: 0;}


.invisible-a {text-decoration: none}

.z-1 {z-index: 1;}
.z-2 {z-index: 2;}
.z-3 {z-index: 3;}
.z-1000 {z-index: 1000;}