@font-face {
  font-family: "circular";
  src: url("../fonts/circular.eot") format("eot"),
    url("../fonts/circular.woff") format("woff"),
    url("../fonts/circular.woff2") format("woff2");
}

@font-face {
  font-family: "comic-sans";
  src: url("../fonts/comic-sans.eot") format("eot"),
    url("../fonts/comic-sans.woff") format("woff"),
    url("../fonts/comic-sans.woff2") format("woff2");
}

@font-face {
  font-family: "genath";
  src: url("../fonts/Genath-Regular.eot") format("eot"),
    url("../fonts/Genath-Regular.woff") format("woff"),
    url("../fonts/Genath-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "zurich";
  src: url("../fonts/ZURCHXK.eot") format("eot"),
    url("../fonts/ZURCHXK.woff") format("woff"),
    url("../fonts/ZURCHXK.woff2") format("woff2");
}

@font-face {
font-family: "dutch";
src: url("../fonts/Dutch.eot") format("eot"),
    url("../fonts/Dutch.woff") format("woff"),
    url("../fonts/Dutch.woff2") format("woff2");
}

@font-face {
	font-family: "HelveticaNeue-Roman";
	src: url("../fonts/HelveticaNeue-Roman.eot") format("eot"),
    url("../fonts/HelveticaNeue-Roman.woff") format("woff"),
    url("../fonts/HelveticaNeue-Roman.woff2") format("woff2");
}

@font-face {
	font-family: "HelveticaNeue-Medium";
	src: url("../fonts/HelveticaNeue-Medium.eot") format("eot"),
    url("../fonts/HelveticaNeue-Medium.woff") format("woff"),
    url("../fonts/HelveticaNeue-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "HelveticaNeue-Bold";
	src: url("../fonts/HelveticaNeue-Bold.eot") format("eot"),
    url("../fonts/HelveticaNeue-Bold.woff") format("woff"),
    url("../fonts/HelveticaNeue-Bold.woff2") format("woff2");
}



html, body {
  overflow: hidden
}

.titre {
  font-size: 5vw;
  font-family: zurich;
  /*height: 15%;*/
  color: white;
  background-color: black;
  /*position: sticky;
  top: 0;*/
  z-index: 1000;
  padding-top: 1rem;
  padding-bottom: 1rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

@media screen and  (min-width: 1023px) and (max-width: 1025px) {
  .titre {
    font-size: 9vw;
  }
}

@media screen and (min-width: 767px) and (max-width: 769px) {
  .titre {
    font-size: 9vw;
  }
}

@media screen and (max-width: 414px) {
  .titre {
    font-size: 10vw;
 
  }
}


.wrapper {
  position: relative;
  width: 100%;
  height: 75vh;
  overflow: hidden;
}


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

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

h2 {
  font-family: zurich;
  color: white;
  text-align: center;
}

/*Bandes rouges
↓↓↓↓↓↓↓↓↓↓↓↓*/

@media screen and (min-width: 415px) and (max-width: 1200px) {
.numero3 {
	height: 20%;
	width: 100%;
	background-color: red;
}
}


.numero {
  width: 100%;
  /*height: -5%;*/
  font-size: 3vw;
  line-height: 1.5em;
  background-color: red;
  color: white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: absolute;
  bottom: 0;
  justify-content: center;
  align-items: center;
  text-align: center;

}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .numero {
    font-size: 3.8vw;
    height: 10%;
    line-height: 1em;
  }
}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .numéro1 {
    font-size: 3.8vw;
    height: 10%;
    line-height: 1.5em;
  }
}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .numéro2 {
    font-size: 3.8vw;
    height: 10%;
    line-height: 1.5em;
  }
}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .numéro3 {
    font-size: 3.8vw;
    height: 10%;
    line-height: 1.5em;
  }
}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .numéro4 {
    font-size: 3.8vw;
    height: 10%;
    line-height: 1.5em;
  }
}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .numéro5 {
    font-size: 3.8vw;
    height: 10%;
    line-height: 1.5em;
  }
}

@media screen and (max-width: 414px) {
  .numero {
    font-size: 5vw;
    height: 10%;
    line-height: 1em;
  }
}

/*Solutions
↓↓↓↓↓↓↓↓↓*/
.explicatione {
  font-family: zurich;
  font-size: 2.5vw;
  line-height: 1em;
  color: rgb(255, 255, 255);
}

@media screen and (min-width:767px) and (max-width: 769px) {
  .explicatione {
    font-size: 30px;
  }
}

@media screen and (min-width:1023px) and (max-width: 1025px) {
  .explicatione {
    font-size: 40px;
  }
}

@media screen and (max-width: 1022px) {
  .explicatione {
    font-size: 3vw;
  }
}

@media screen and (max-width: 414px) {
  .explicatione {
    font-size: 17px;
  }
}

@media screen and (max-width: 320px) {
  .explicatione {
    font-size: 13px;
  }
}

.explicationes {
  font-family: zurich;
  font-size: 1.5vw;
  line-height: 20px;
  color: rgb(255, 255, 255);
  transition: color 1s;
}

@media screen and (max-width: 1024px) {
  .explicationes {
    font-size: 3vw;
  }
}

@media screen and (max-width: 414px) {
  .explicationes {
    font-size: 15px;
  }
}

.explicationes:hover {
  color: rgb(0, 0, 0);
}

.explicationen {
  line-height: 20px;
  font-size: 1.5vw;
  color: rgb(255, 255, 255);
  transition: color 1s;
}

@media screen and (max-width: 1024px) {
  .explicationen {
    font-size: 3vw;
  }
}

@media screen and (max-width: 414px) {
  .explicationen {
    font-size: 15px;
  }
}

.explicationen:hover {
  color: rgb(0, 0, 0);
}

.suivant {
  font-family: zurich;
  /*font-size: 1.5vw;*/
  color: rgb(255, 255, 255);
  transition: color 1s;
}

.suivant:hover {
  color: rgb(0, 0, 0);
}

.navig { 
	position: relative;
	top: 2;
	font-size: 2vw;
	line-height: 0.5em;
}

@media screen and (min-width:767px) and (max-width: 769px) {
  .navig {
    font-size: 30px;
  }
}

@media screen and (min-width:1023px) and (max-width: 1025px) {
  .navig {
    font-size: 40px;
  }
}

@media screen and (max-width: 1022px) {
  .navig {
    font-size: 3vw;
    line-height: 1em;
  }
}

@media screen and (max-width: 414px) {
  .navig {
    font-size: 17px;
  }
}

/*Début wrapper 1
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.point1 {
  font-size: 3vw;
  font-family: HelveticaNeue-Roman;
  padding-left: 15%;
  padding-right: 15%;
  line-height: 1.4em;
  display: block;
  top: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -webkit-transform: translateY(-50%);
}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .point1 {
    font-size: 4vw;
    text-align: center;
    padding-left: 25%;
  }
}

@media screen and (max-width: 800px) {
  .point1 {
    text-align: center;
    padding-left: 35%;

  }
}


@media screen and (max-width: 415px) {
  .point1 {
    font-size: 6vw;
    position: absolute;
    width: 60%;
    top: 45%;
    text-align: center;
    padding-left: 25%;
  }
}

@media screen and (max-width: 376px) {
  .point1 {
    font-size: 5.5vw;
  }
}


.point1bis {
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 60px;
  background-color: red;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  padding: 0 20%;
  box-sizing: border-box;
}

.colonne {
  column-count: 2;
  column-gap: 2.2em;
}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .colonne {
    column-count: 1;
    text-align: center;
  }
}

@media screen and (max-width: 800px) {
  .colonne {
    column-count: 1;
    text-align: center;
  }
}

@media screen and (max-width: 414px) {
  .colonne {
    column-count: 1;
    text-align: center;
  }
}

.img1 {
  cursor: url(../images/seche_Cheveux.png) 50 20, auto;
  max-width: 100%;
  height: auto;
}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .fond {
    background-image: url(../images/seche_Cheveux.png), url(../images/Assiette.png),
    url(../images/Arrosoir.png), url(../images/fourchette.png),
    url(../images/couteau.png), url(../images/cuillere.png),
    url(../images/parapluie.png), url(../images/tasse.png),
    url(../images/thermomètre.png), url(../images/pile.png),
    url(../images/escalier.png), url(../images/carafe.png),
    url(../images/bol.png), url(../images/lampe.png);
    ;
    background-position: 200 200, 70 800, 600 700, 300 450, 200 590, 450 550, 450 400, 50 100, 100 350, 320 50,
    650 20, 550 202, 300 300, 700 330;
    background-repeat: no-repeat;
    position: absolute;
  }
}

@media screen and (min-width: 767px) and (max-width: 769px) {
  .fond {
    background-image: url(../images/seche_Cheveux.png), url(../images/Assiette.png),
    url(../images/Arrosoir.png), url(../images/fourchette.png),
    url(../images/couteau.png), url(../images/cuillere.png),
    url(../images/parapluie.png), url(../images/tasse.png),
    url(../images/thermomètre.png), url(../images/pile.png),
    url(../images/escalier.png), url(../images/carafe.png),
    url(../images/bol.png), url(../images/lampe.png);
    ;
    background-position: 200 20, 70 550, 450 500, 300 450, 200 400, 350 360, 450 300, 50 100, 150 250, 300 130,
    450 20, 400 102, 300 300, 40 350;
    background-repeat: no-repeat;
    position: absolute;
  }
}

@media screen and (max-width: 414px) {
  .fond {
    background-image: url(../images/seche_Cheveux.png), url(../images/Assiette.png),
    url(../images/Arrosoir.png), url(../images/fourchette.png),
    url(../images/couteau.png), url(../images/cuillere.png),
    url(../images/parapluie.png), url(../images/tasse.png),
    url(../images/thermomètre.png), url(../images/pile.png),
    url(../images/escalier.png), url(../images/carafe.png),
    url(../images/bol.png), url(../images/lampe.png);
    ;
    background-position: 0 20, 100 50, 30 100, 330 250, 300 80, 120 360, 300 350, 200 100, 150 250, 50 330,
    250 300, 80 202, 300 200, 20 250;
    background-repeat: no-repeat;
    position: absolute;
  }
}

@media screen and (min-width: 413px) and (max-width: 415px) {
  .fond {
    background-image: url(../images/seche_Cheveux.png), url(../images/Assiette.png),
    url(../images/Arrosoir.png), url(../images/fourchette.png),
    url(../images/couteau.png), url(../images/cuillere.png),
    url(../images/parapluie.png), url(../images/tasse.png),
    url(../images/thermomètre.png), url(../images/pile.png),
    url(../images/escalier.png), url(../images/carafe.png),
    url(../images/bol.png), url(../images/lampe.png);
    ;
    background-position: 0 20, 100 50, 30 100, 330 250, 300 80, 120 360, 300 350, 200 100, 150 250, 50 400,
    250 300, 80 202, 300 200, 20 250;
    background-repeat: no-repeat;
    position: absolute;
  }
}

@media screen and (min-width: 374px) and (max-width: 376px) {
  .fond {
    background-image: url(../images/seche_Cheveux.png), url(../images/Assiette.png),
    url(../images/Arrosoir.png), url(../images/fourchette.png),
    url(../images/couteau.png), url(../images/cuillere.png),
    url(../images/parapluie.png), url(../images/tasse.png),
    url(../images/thermomètre.png), url(../images/pile.png),
    url(../images/escalier.png), url(../images/carafe.png),
    url(../images/bol.png), url(../images/lampe.png);
    ;
    background-position: 0 20, 100 50, 30 100, 170 10, 270 0, 150 360, 250 350, 200 100, 150 250, 50 330,
    250 300, 80 202, 240 200, 20 250;
    background-repeat: no-repeat;
    position: absolute;
  }
}

@media screen and (min-width: 319px) and (max-width: 321px) {
  .fond {
    background-image: url(../images/seche_Cheveux.png), url(../images/Assiette.png),
    url(../images/Arrosoir.png), url(../images/fourchette.png),
    url(../images/couteau.png), url(../images/cuillere.png),
    url(../images/parapluie.png), url(../images/tasse.png),
    url(../images/thermomètre.png), url(../images/pile.png),
    url(../images/escalier.png), url(../images/carafe.png),
    url(../images/bol.png), url(../images/lampe.png);
    ;
    background-position: 0 20, 100 50, 30 100, 155 5, 210 0, 170 250, 140 280, 200 100, 130 130, 25 260,
    220 300, 80 202, 210 200, 20 150;
    background-repeat: no-repeat;
    position: absolute;
  }
}

.img2 {
  cursor: url(../images/Assiette.png) 50 20, auto;
  height: 2vw;
}

.img3 {
  cursor: url(../images/Arrosoir.png) 70 40, auto;
  height: 2vw;
}

.img4 {
  cursor: url(../images/fourchette.png) 50 40, auto;
  height: 2vw;
}

.img5 {
  cursor: url(../images/couteau.png) 50 40, auto;
  height: 2vw;
}

.img6 {
  cursor: url(../images/cuillere.png) 50 25, auto;
  height: 2vw;
}

.img7 {
  cursor: url(../images/parapluie.png) 50 40, auto;
  height: 2vw;
}

.img8 {
  cursor: url(../images/tasse.png) 40 40, auto;
  height: 2vw;
}

.img9 {
  cursor: url(../images/thermomètre.png) 45 40, auto;
  height: 2vw;
}

.img10 {
  cursor: url(../images/pile.png) 50 40, auto;
  height: 2vw;
}

.img11 {
  cursor: url(../images/escalier.png) 40 20, auto;
  height: 2vw;
}

.img12 {
  cursor: url(../images/carafe.png) 50 40, auto;
  height: 2vw;
}

.img13 {
  cursor: url(../images/bol.png) 40 40, auto;
  height: 2vw;
}

.img14 {
  cursor: url(../images/lampe.png) 30 40, auto;
  height: 2vw;
}

.deter {
  font-family: HelveticaNeue-Bold;
}


/*↑↑↑↑↑↑↑↑↑↑↑↑↑
Fin Wrapper 1

Début Wrapper 2
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.sec2 {
  padding-top: 25vh;
}

.point2 {
  font-size: 3.5vw;
  font-family: circular;
  padding-left: 10%;
  padding-right: 10%;
  top: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -webkit-transform: translateY(-50%);
}

@media screen and (min-width:1023px) and (max-width: 1025px) {
  .point2 {
    font-size: 5vw;
  }
}

@media screen and (max-width: 1000px) {
  .point2 {
    font-size: 5vw;
  }
}


@media screen and (max-width: 414px) {
  .point2 {
    font-size: 6.5vw;
    position: absolute;
    top: 45%;
  }
}

.point2bis {
   display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 60px;
  background-color: red;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  padding: 0 20%;
  box-sizing: border-box;
}

.message2 {
  display: flex;
  text-align: justify;
}



@media screen and (max-width: 1024px) {
  .message2 {
    text-align: left;
  }
}

.nomme {
  color: rgb(250, 250, 250);
  transition: color 1s;
}

.nomme:hover {
  color: rgb(0, 0, 0);
}

@media screen and (max-width: 1024px) {
  .nomme {
    color: rgb(0, 0, 0);
    opacity: 0%;
    animation-name: transi;
    animation-duration: 3s;
  animation-iteration-count: infinite;
  }
}

@keyframes transi {
  0% {
    opacity: : 0%;
  }

  50% {
    opacity: 100%;
  }

  100% {
    opacity: 0%;
  }
}


.nom {
  color: rgb(100, 100, 100);
}

.pronom {
  color: rgb(100, 100, 100);
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑
Fin Wrapper 2

Début Wrapper 3
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.point3 {
  font-family: dutch;
  font-size: 7vw;
}


.point3bis {
 display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 60px;
  background-color: red;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  padding: 0 20%;
  box-sizing: border-box;
  overflow: scroll;
}

.message3 {
  display: flex;
  text-align: justify;
}

@media screen and (max-width: 1024px) {
  .message3 {
    text-align: left;
  }
}

.grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media screen and (min-width: 1023px) and (max-width: 1025px) {
  .grid {
    height: 97.5%;
  }
}

@media screen and (min-width: 767px) and (max-width: 769px) {
  .grid {
    height: 97.5%;
  }
}

@media screen and (max-width: 414px) {
  .grid {
    height: 97.5%;
  }
}

.row {
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  display: flex;
  height: 33.333333333333333%;
  transition: height 0.5s ease-in-out;
}

@media screen and (max-width: 414px) {
  .row {
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    height: 33.33%;
  }
}

.row:hover {
  height: 50%;
}

.row {
  height: 33.333%;
  flex: 1 1 auto;
}

.column {
	font-family: dutch;
  font-size: 1vw;
  border-left: solid 1px black;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20%;
  transition: width 0.5s ease-in-out;
   overflow: scroll; 
}

.gras {
	font-weight: bold;
}

.column.column--no-resize {
  width: 25%;
  flex: 0 0 auto;
}

.column.column--no-resize:hover {
  width: 25%;
}

.column:hover {
  width: 50%;
}

.column span {
  font-size: 4.5vw;
  text-align: center;
}

@media screen and (max-width: 414px) {
  .column span {
    font-size: 6vw;
  }
}

.column p {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  font-size: 1.5vw;
  text-align: center;
  height: 0;
}

@media screen and (max-width: 1024px) {
  .column p {
    opacity: 100;
    font-size: 2vw;
  }
}

@media screen and (max-width: 414px) {
  .column p {
    opacity: 100;
    font-size: 3vw;
    padding-left: 2%;
    padding-right: 2%;
  }
}


.column:hover p {
  opacity: 1;
}

.column p span {
	opacity: 0%;
	font-size: 1.5vw;
	text-align: center;
}

.transparent{
opacity: 0%;
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑
Fin Wrapper 3

Début Wrapper 4
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.point4 {
  font-size: 2.9vw;
  font-family: comic-sans;
  top: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -webkit-transform: translateY(-50%);
  padding-left: 10%;
  padding-right: 10%;
  line-height: 1.2em;
}


@media screen and (min-width:1023px)  and (max-width: 1025px) {
  .point4 {
    font-size: 6vw;
  }
}

@media screen and (max-width: 1023px) {
  .point4 {
    font-size: 5vw;
  }
}

@media screen and (min-width:767px)  and (max-width: 769px) {
  .point4 {
    font-size: 6.5vw;
  }
}

@media screen and (max-width: 414px) {
  .point4 {
    font-size: 7vw;
    position: absolute;
    top: 45%;
  }
}

.point4bis {
   display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 60px;
  background-color: red;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  padding: 0 20%;
  box-sizing: border-box;
}

.message4 {
  display: flex;
  text-align: justify;
}

@media screen and (max-width: 1024px) {
  .message4 {
    text-align: left;
  }
}

@media screen and (max-width: 1024px) {
  .accord1:after {
  animation-name: animated-content;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  }
}

@media screen and (max-width: 1024px) {
  .accord2:after {
  animation-name: animated-contentdeux;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  }
}

@media screen and (max-width: 1024px) {
  .accord3:after {
  animation-name: animated-contenttrois;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  }
}


.accord:after {
  content: '_';
  color: rgb(100, 100, 100);
}

.accord1:hover:after {
  animation-name: animated-content;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  color: black;
}

.accord2:hover:after {
  animation-name: animated-contentdeux;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  color: black;
}

.accord3:hover:after {
  animation-name: animated-contenttrois;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  color: black;
}

@keyframes animated-content {
  0% {
    content: 'e'
  }

  25% {
    content: 'x'
  }

  50% {
    content: 's'
  }

  75% {
    content: 'es'
  }

  100% {
    content: 'e'
  }
}

@keyframes animated-contentdeux {
  0% {
    content: 'Elle'
  }

  10% {
    content: 'Il'
  }

  20% {
    content: 'Im'
  }

  30% {
    content: 'Ul'
  }

  40% {
    content: 'Iel'
  }

  50% {
    content: 'Em'
  }

  60% {
    content: 'Ul'
  }

  70% {
    content: 'Ille'
  }

  80% {
    content: 'El'
  }

  90% {
    content: 'Iel'
  }

  100% {
    content: 'Elle'
  }
}

@keyframes animated-contenttrois {
  0% {
    content: 'Eux'
  }

  18% {
    content: 'Elles'
  }

  36% {
    content: 'Ils'
  }

  54% {
    content: 'Lo'
  }

  72% {
    content: 'Lu'
  }

  90% {
    content: 'Li'
  }

  100% {
    content: 'Eux'
  }
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑
Fin Wrapper 4

Début Wrapper 5
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.point5 {
  font-family: genath;
  line-height: 3em;
  padding-left: 10% padding-right:10%;
  height: 75vh;
}

@media screen and (max-width: 414px) {
  .point5 {
    position: absolute;
    top: 15.5%;
  }
}

@media screen and (min-height:812px) and (max-width: 375px) {
  .point5 {
    position: absolute;
    top: 13%;
  }
}


.point5bis {
   display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 60px;
  background-color: red;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  padding: 0 20%;
  box-sizing: border-box;
}

.message5 {
  display: flex;
  text-align: justify;
}

@media screen and (max-width: 1024px) {
  .message5 {
    text-align: left;
  }
}

.ligne {
  text-align: center;
  font-family: genath;
  font-size: 5vw;
  line-height: 2em;
}

.ligne1 {
  border: 0.1vw solid black;
  height: 20px;
  border-radius: 25%;
  background-color: white;
}

@media screen and (max-width: 1024px) {
  .ligne {
    font-size: 12vw;
  }
}

.Majuscules {
  color: grey;
}


/*.Majuscules:hover {
  font-size: 0;
  color: black;
}

.Majuscules:hover:after {
  content: attr(data-hover);
  font-size: 5vw;
}*/

@media screen and (min-width: 1024px) {
.Majuscules:hover {
  font-size: 0;
  color: black;
}
}


@media screen and (min-width: 1024px) {
.Majuscules:hover:after {
  content: attr(data-hover);
  font-size: 5vw;
}
}

@media screen and (max-width: 1024px) {
  .Majuscule{
    animation-name: maj;
    animation-duration: 1s;
  animation-iteration-count: infinite;
  }
}

@keyframes maj {
  0% {
    text-transform: lowercase;
  }

  50% {
    text-transform: uppercase;
  }

  100% {
    text-transform: lowercase;
  }
}

@media screen and (max-width: 1024px) {
  .Majuscul {
    animation-name: maij;
    animation-duration: 1s;
  animation-iteration-count: infinite;
  }
}

@keyframes maij {
  0% {
    text-transform: uppercase;
  }

  50% {
    text-transform: lowercase;
  }

  100% {
    text-transform: uppercase;
  }
}


@media screen and (max-width: 414px) {
  .majuscules:hover:after {
    font-size: 10vw;
  }
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑
Fin Wrapper 5


/*jsp à quoi ça sert, très probablement à rien
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
td {
  border: 1px solid;
  padding: 25px;
  text-align: center;
  transition: font-size 2s;
}

td:hover {
  font-size: 200px;
}

.message {
  display: flex;
  text-align: justify;
}

@media screen and (max-width: 1024px) {
  .message{
    text-align: left;
  }
}

@media screen and (max-width: 414px) {
  .message{
    text-align: left;
  }
}

#footer-section {
  z-index: 1000;
}