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

body {
  margin: 0;
  padding: 0;
}
div {margin: 0}

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

pre {
    white-space: pre-wrap;
    font-size: 1.25em;
}
p {font-size: 1.1em;}
textarea {box-sizing: border-box;}

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

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

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

.grid-3w {
  display: grid;
}

.logo * {
  text-align: center;
  font-family: monospace;
  font-size: 0.75em;
  margin: -10px;
}
.commande-console {
  padding: 2em;
  margin-left: 2em;
  margin-right: 2em;
  font-family: monospace;
  background-color: black;
  color: white
}
.monospace {font-family: monospace;}

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

.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;
  background-size: cover;
}
.no-border {border: none; outline: none}
.normal-font {font: inherit;}
.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;}
.marge-horizontal-moyen {margin-left: 2em; margin-right: 2em;}
.marge-horizontal-big {margin-left: 5em; margin-right: 5em;}
.marge-bottom-bigger-huge {margin-bottom: 60em;}
.no-margin {margin: 0}

.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-padding {padding: 0;}

.no-marge {
    margin: 0;
}


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

.inline-block {display: inline-block;}
.inline {display: inline;}
.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;
}
.font-bigger {
  font-size: 1.5em;
.font-big {font-size: 2em;}
}
.deg30 {
    rotate: 30deg;
}

/*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;
}

.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;
}

.navigation-haut {
  overflow: visible;
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 0;
}
.navigation-haut .container {
  margin: 10px;
}
.navigation-haut .container div {
  position: relative;
  max-width: 200px;
  padding: 5px;
  margin: 0;
  text-align: center;
  z-index: -1;
}
@keyframes hover-navigation-animation {
  0%, 100% {
  }
  50% {
    transform: translateY(-10px);
    filter: invert(100%);
  }
}
.navigation-haut .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;
}
.navigation-haut .container { /*Pour enlever les traitements spéciaux créés par <a>.*/
  text-decoration: none;
}

.bottom-buttons {
  margin-left: 5vw;
  max-width: 80vw;
  text-align: center;
}
.no-top-margin {
  margin-top: 0;
}
.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;
}

.cover {background-size: cover;}
.multiply {background-blend-mode: multiply;}

/*******************************/
/*Fonds liés à une image.*/
/*******************************/
.fond-alien-fractale {background-image: url('/assets/images/fonds/fond-alien-fractale.gif')}
.fond-bandes {background-blend-mode: multiply; background-image: url('/assets/images/fonds/fond-bandes.gif')}
.fond-brique-roche {background-blend-mode: multiply; background-image: url('/assets/images/fonds/fond-brique-roche.jpg')}
.fond-briques {background-blend-mode: multiply; background-image: url('/assets/images/fonds/fond-briques.jpg')}
.fond-carres-disco {background-image: url('/assets/images/fonds/fond-carres-disco.gif')}
.fond-cellules-bleues-diformes {background-image: url('/assets/images/fonds/fond-cellules-bleues-diformes.GIF')}
.fond-coeurs {background-blend-mode: multiply; background-image: url('/assets/images/fonds/fond-coeurs.gif')}
.fond-coeurs-bonbons {background-image: url('/assets/images/fonds/fond-coeurs-bonbons.jpg')}
.fond-ecailles {background-image: url('/assets/images/fonds/fond-ecailles.gif')}
.fond-electronique {background-image: url('/assets/images/fonds/fond-electronique.jpg')}
.fond-elephant {background-image: url('/assets/images/fonds/fond-elephant.gif')}
.fond-etoile {background-image: url('/assets/images/fonds/fond-etoile.gif')}
.fond-fractales {background-image: url('/assets/images/fonds/fond-fractales.gif')}
.fond-lego-fractale {background-image: url('/assets/images/fonds/fond-lego-fractale.GIF')}
.fond-metal-fondu {background-blend-mode: multiply; background-image: url('/assets/images/fonds/fond-metal-fondu.GIF')}
.fond-obsidienne {background-image: url('/assets/images/fonds/fond-obsidienne.gif')}
.fond-retro {background-blend-mode: multiply; background-image: url('/assets/images/fonds/fond-retro.GIF')}
.fond-rose-fleuri {background-blend-mode: multiply; background-image: url('/assets/images/fonds/fond-rose-fleuri.png')}
.fond-smileys {background-blend-mode: multiply; background-image: url('/assets/images/fonds/fond-smileys.gif')}
.fond-tapis {background-blend-mode: multiply; background-image: url('/assets/images/fonds/fond-tapis.jpg')}

.fond-certificat {background-image: url("/assets/images/non-boutons/certificat-fond.gif");}

.bouton-bombe {background-size: cover; background-image: url('/assets/images/boutons/bouton-bombe.gif')}
.bouton-coeur {background-size: cover; background-image: url('/assets/images/boutons/bouton-coeur.gif')}
.bouton-feu {background-size: cover; background-image: url('/assets/images/boutons/bouton-feu.gif')}
.bouton-grille-bleue {background-size: cover; background-image: url('/assets/images/boutons/bouton-grille-bleue.gif')}
.bouton-marbre-orange {background-size: cover; background-image: url('/assets/images/boutons/bouton-marbre-orange.jpg')}
.bouton-metal {background-size: cover; background-image: url('/assets/images/boutons/bouton-metal.jpg')}
.bouton-motifs-jaunes {background-size: cover; background-image: url('/assets/images/boutons/bouton-motifs-jaunes.jpg')}
.bouton-motifs-rouges {background-size: cover; background-image: url('/assets/images/boutons/bouton-motifs-rouges.jpg')}
.bouton-pointille-rose {background-size: cover; background-image: url('/assets/images/boutons/bouton-pointille-rose.jpg')}
.bouton-popsicle {background-size: cover; background-image: url('/assets/images/boutons/bouton-popsicle.jpg')}
.bouton-quoi-de-neuf {background-size: cover; background-image: url('/assets/images/boutons/bouton-quoi-de-neuf.gif')}
.bouton-son {background-size: cover; background-image: url('/assets/images/boutons/bouton-son.gif')}
/*******************************/
/*Propriétés générales*/
/*******************************/
.arc-en-ciel {
    color: transparent;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
    background-clip: text;
}
.white {color: white;}
.black {color: black;}
.red {color: red;}
.red {color: red;}
.green {color: green;}
.blue {color: blue;}
.darkblue {color: darkblue;}
.orange {color: orange;}
.yellow {color: yellow;}
.magenta {color: magenta;}
.purple {color: purple;}
.gray {color: gray;}
.pink {color: pink;}
.a-color {color: rgb(128,128,256);}
.lightgray {color: lightgray;}
.fond-transparent {background-color: transparent}
.fond-white {background-color: white;}
.fond-black {background-color: black;}
.fond-red {background-color: red;}
.fond-darkerred {background-color: rgb(175, 0, 0);}
.fond-darkred {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-lightgray {background-color: lightgray;}
.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;}
.height-medium {height: 80px;}
.w100px {width: 100px;}
.w7vw {width: 7vw;}
.w85vw {width: 85vw;}
.w100vw {width: 100vw;}
.h90px {height: 90px;}
.h100px {height: 100px;}
.h200px {height: 200px;}
.h300px {height: 300px;}
.hinfty {height: 200000em;}
.hauto {resize: vertical;}

/*******************************/
/*Filtres sous hover*/
/*******************************/
.on-hold-brighter:hover {filter: brightness(1.1);}
.on-hold-lot-brighter:hover {filter: brightness(3);}