/* Applique une règle à tous les éléments de la page, ainsi qu'à leurs pseudo-éléments "before" et "after". */
/*La propriété "box-sizing" détermine comment la taille totale d'un élément est calculée et comprend le contenu, le padding et la bordure. */
*,
*:before,
*:after {
  box-sizing: inherit;
}
/*La valeur "border-box" indique que la largeur et la hauteur de l'élément incluent le contenu, les marges et les bordures. 
Cela signifie que si vous définissez une largeur ou une hauteur sur l'élément, les marges et les bordures seront incluses dans ces dimensions, sans augmenter la taille totale de l'élément.*/
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%; /*Pour navigateurs Microsoft. Une valeur de 100% signifie que la taille du texte ne sera pas ajustée.*/
  -webkit-text-size-adjust: 100%; /*navigateurs basés sur WebKit (comme Safari ou Chrome).*/
  overflow-x: hidden; /*Débordement horizontale défini sur "hidden", cela signifie que le contenu qui dépasse à l'horizontale sera caché et ne sera pas visible.*/
}
@font-face {
  font-family: "Nabla";
  src: url("assets/fonts/Nabla-Regular.ttf") format("truetype");
}
body {
  margin: 0;
  font-size: 15px;
  font-family: "Raleway", sans-serif;
}
body,
html {
  height: 100%;
  line-height: 1.8;
}
footer,
header,
nav {
  display: block;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 5px;
  font-weight: 400;
  margin: 10px 0;
}
img {
  vertical-align: middle;
  overflow-clip-margin: content-box;
  overflow: clip;
  border-style: none;
}
p,
label {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
a {
  color: inherit;
  background-color: transparent;
}
.uppercase {
  text-transform: uppercase;
}
a:active,
a:hover {
  outline-width: 0;
}
button {
  text-transform: none;
}
button,
input {
  font: inherit;
  margin: 0;
  overflow: visible;
}
.barre-top {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
}
.nav-bar .bar-item.logo {
  font-family: "Nabla";
  border: 2px solid #616161;
  overflow: hidden;
  border-radius: 50%;
  display: inline-block;
  background-color: #757575;
  margin: 1px 1px 1px 2px;
}
.nav-bar {
  width: 100%;
  overflow: hidden;
  display: inline-block;
}
.text-center .nav-bar {
  display: inline-block;
  width: auto;
}
.nav-bar .bar-item {
  padding: 16px;
  float: left;
  width: auto;
  border: none;
  display: block;
  outline: 0;
}
.nav-bar .bouton-button {
  white-space: normal;
  padding: 16px;
}
.nav-bar:before,
.nav-bar:after {
  content: "";
  display: table;
  clear: both;
}
.text-center {
  text-align: center !important;
}
#espace-wide {
  letter-spacing: 4px;
}
.text-grey {
  color: #757575 !important;
}
.bar-item {
  padding: 8px 16px;
  border: none;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  cursor: pointer;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
}
.contact-block {
  display: block;
  width: 100%;
}
.bouton-button:hover,
.fa-bars:hover {
  color: #000 !important;
  background-color: #ccc !important;
}
.fa-bars {
  padding: 22px 16px !important;
  display: initial !important;
  position: absolute;
  right: 0;
  top: 0;
}
.bouton-button {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: normal;
}
.bouton-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.image-round {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.col-1,
.third,
.quarter {
  float: left;
  width: 100%;
}
.content {
  margin-left: auto;
  margin-right: auto;
}
.modal-content {
  margin: auto;
  background-color: #fff;
  position: relative;
  padding: 0;
  outline: 0;
  width: 600px;
}
@media (max-width: 600px) {
  .modal-content {
    margin: 0 10px;
    width: auto !important;
  }
  .boite-modal {
    padding-top: 30px;
  }
  #nav-small {
    display: none !important;
  }
  .bouton-button {
    width: 100%;
  }
  .nav-bar {
    height: 59px;
  }
  .logo {
    max-height: 95%;
    max-width: auto !important;
    vertical-align: baseline;
  }
}
@media (min-width: 601px) {
  .quarter {
    width: 24.99999%;
  }
  .col-1 {
    width: 49.99999%;
  }
  .third {
    width: 33.33333%;
  }
}
@media (max-width: 992px) and (min-width: 601px) {
  .hide-medium {
    display: none !important;
  }
}
@media (min-width: 993px) {
  .modal-content {
    width: 900px;
  }
  .hide-large {
    display: none !important;
  }
  .col-1.additional {
    width: 24.99999%;
  }
  .l6 {
    width: 49.99999%;
  }
}
.nav-right {
  font-size: 14px;
  float: right;
  margin-top: 4px;
}
.fond-black {
  color: #fff !important;
  background-color: #000 !important;
}
/*Animation donne l'impression d'un glissement vers la gauche.*/
.animate-left {
  position: relative;
  animation: animateleft 0.4s;
}
@keyframes animateleft {
  /*Au point "from", l'élément est initialement positionné 300 pixels à gauche (-300px) de sa position normale et sa transparence (opacité) est de 0, le rendant complètement invisible.*/
  from {
    left: -300px;
    opacity: 0;
  }
  /*Au point "to", l'élément est déplacé vers sa position normale (0) et sa transparence est de 1, ce qui le rend complètement visible.*/
  to {
    left: 0;
    opacity: 1;
  }
}
.ombre-card {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.sidebar {
  height: 100%;
  width: 200px;
  background-color: #fff;
  position: fixed !important;
  z-index: 1;
  overflow: auto;
}
.padding-16 {
  padding: 16px !important;
}
/* Full height image header */
.header-img {
  background-position: center;
  background-size: cover;
  background-image: url("../img/debut.gif");
  min-height: 100%;
  filter: grayscale(50%);
  position: relative;
}
.text-display {
  color: #fff !important;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  -ms-transform: translate(-0%, -50%);
}
.xxxlarge {
  font-size: 64px !important;
}
.xxlarge {
  font-size: 36px !important;
}
.espace-large {
  font-size: 18px !important;
}

.padding-large {
  padding: 12px 24px !important;
  margin-top: 16px !important;
}
.margin-bottom {
  margin-bottom: 16px !important;
}
.semi-opacity,
.hover-opacity:hover {
  opacity: 0.6;
}

.bottom-left {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #757575 !important;
}
.section-container:after,
.section-container:before,
.row-padding:after,
.row-padding:before {
  content: "";
  display: table;
  clear: both;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 128px 16px;
}
.section-container {
  padding: 0.01em 16px;
}
.row-padding,
.row-padding > .third,
.row-padding > .quarter,
.row-padding > .col-1 {
  padding: 0 8px;
}
.light-grey {
  color: #000 !important;
  background-color: #f1f1f1 !important;
}
.light-grey-tag {
  color: #000 !important;
  background-color: #f1f1f1 !important;
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
}
.dark-grey {
  color: #fff !important;
  background-color: #616161 !important;
}
.padding-64 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.hover-shadow:hover {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
.boite-modal {
  z-index: 3;
  display: none;
  padding-top: 100px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
.fermeture-topright {
  position: absolute;
  right: 0;
  top: 0;
}
.modal-transparent {
  background-color: transparent !important;
}
/*Animation crée un effet de zoom qui augmente progressivement la taille de l'élément de 0 à 100%.*/
.animate-zoom {
  animation: animatezoom 0.6s;
}
@keyframes animatezoom {
  /*Commence avec un "transform: scale(0)" (où l'élément est mis à l'échelle à 0)*/
  from {
    transform: scale(0);
  }
  /*Se termine par un "transform: scale(1)" (où l'élément est remis à sa taille normale).*/
  to {
    transform: scale(1);
  }
}
.margin-right {
  margin-right: 16px !important;
}
.semi-grey {
  color: #000 !important;
  background-color: #9e9e9e !important;
}
.margin-16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.list-ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.list-ul li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}
.padding-32 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.box-red {
  color: #fff !important;
  background-color: #f44336 !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.list-ul li:last-child {
  border-bottom: none;
}
#fondWhite {
  color: #000 !important;
  background-color: #fff !important;
}
.padding-24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
/* Form */
.form-border {
  border: 1px solid #ccc !important;
}
.form-input {
  padding: 8px;
  display: block;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
/* Footer */
.xlarge {
  font-size: 24px !important;
}
/* Jeu au hasard */
/* Jeu */
.memory-game {
  display: flex;
  flex-wrap: wrap;
  width: 450px;
}
.card {
  width: 120px;
  height: 120px;
  border: 1px solid black;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: none;
}
.card.flipped img {
  display: block;
}
/* Affichage du message */
.victory-animation {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  z-index: -1;
}
.victory-animation h1.animate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5em;
  font-weight: bold;
  color: #85ff2d;
  text-shadow: 0px 0px 10px #fff;
  opacity: 0;
  animation: victory 3s forwards;
}
@keyframes victory {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.test {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5em;
  font-weight: bold;
  color: #85ff2d !important;
  text-shadow: 0px 0px 10px #fff;
  opacity: 1;
  animation: victory 3s forwards;
}