/* Reset Css  - https://piccalil.li/blog/a-more-modern-css-reset/*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}


#canvas{
 
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Base */

body {
  font-family: sans-serif;
  background-color: #222;
}

.description,
.final {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1080px;
  width: 1980px;
  background-color: gray;
}

.container {
  display: flex;
}

.container2 {
  display: flex;
  flex-direction: row;
  width: 100%; /* Ajustez si nécessaire */
  height: 100vh; /* Ajustez si nécessaire */
  position: relative; /* Pour éviter qu'il sorte du flux */
}

.panel {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1920px;
  height: 1080px;
}


.panel2 {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1920px;
  height: 1080px;
}
.panel--red {
  background-color: red;
}

.panel--blue {
  background-color: blue;
}

.panel--purple {
  background-color: purple;
}

.panel--green {
  background-color: green;
}

.box {
  width: 100px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  background-color: white;
  border-radius: 8px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
  will-change: transform;
}
.box.active {
  background-color: orange;
  border: 2px solid white;
}



.panel--intro{
  background: url("Assets/Intro.svg");
}

.panel--musee1{
  background: url("Assets/MuseePart1-V2.svg");
}
.panel--musee2{
  background: url("Assets/MuseePart2.svg");
}
.panel--musee3{
  background: url("Assets/MuseePart3.svg");
}


.panel--cinema1{
  background: url("Assets/CinemaPart1.svg");
  z-index: 100;
}
.panel--cinema2{
  background: url("Assets/CinemaPart2.svg");
}

.panel--biblio1{
  background: url("Assets/BiblioPart1.svg");
}

.panel--biblio2{
  background: url("Assets/BiblioPart2.svg");
}

.panel--biblio3{
  background: url("Assets/BiblioPart3.svg");
}


.panel--ecole{
  background: url("Assets/Salledeclasse.svg");
}

.panel--covid1{
  background: url("Assets/ChuteCovidV3-1.svg");
}
.panel--covid2{
  background: url("Assets/ChuteCovidV3-2.svg");
}
.panel--covid3{
  background: url("Assets/ChuteCovidV2-3.svg");
}

.panel--chambre1{
  background: url("Assets/Chambre1.svg");
}

.panel--museeafter{
  background: url("Assets/Museeafter3.svg");
}
.panel--cinemaafter{
  background: url("Assets/CinemaAfter2.svg");
}
.panel--parc{
  background: url("Assets/Parc.svg");
}

.panel--cirque{
  background: url("Assets/Cirque.svg");
}
.panel--biblioafter{
  background: url("Assets/BiblioAfter.svg");
}

.animation{
  animation: fadeIn 2s ease 0s 1 normal forwards;
}

@keyframes fadeIn {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: translateY(-250px);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0);
	}

	55% {
		animation-timing-function: ease-in;
		transform: translateY(-65px);
	}

	72% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	81% {
		animation-timing-function: ease-in;
		transform: translateY(-28px);
	}

	90% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	95% {
		animation-timing-function: ease-in;
		transform: translateY(-8px);
	}

	100% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}
}

.intro__text{
  display: flex;
  flex-direction: column;
  color: #2F7E7E;
  font-size: 5rem;
  position: absolute;
  top: 10rem;
  left: 60rem;
 
}
.intro__cloud{
  display: flex;
  position: absolute;
  top: 4rem;
  right: 0rem;
}

@font-face {
  font-family: 'Miso';
  src: url('./fonts/miso-regular.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nexusbold';
  src: url('./fonts/nexusbold-regular.otf');
  font-weight: normal;
  font-style: normal;
}

.fontbase{
  font-family: 'Miso';
  line-height: 0.8;
}

.fontnumber{
  font-family: 'Nexusbold';
  line-height: 0.8;
}

.data_first--number{
  
  font-size: 30em;
  line-height: 0.8;
  
}

.biblio_first--number{
  font-size: 20rem;
  line-height: 0.8;
}

.data_first--musee{
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 2rem;
  left: 30rem;
  color: #B73E4A;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}


.data_first--biblio{
    display: flex;
  flex-direction: row;
  position: absolute;
  top: 10rem;
  left: 40rem;
  color: #524E6D;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  
}
.bob{
  width: 100vw;
  height: 100vh;
  top: 45%;
  left: 5%;
  position: fixed;
  z-index: 100000000000000000000000000000000000;
}

.joconde{
  display: flex;
  position: absolute;
  top: 20rem;
  left: 88.5rem;
}

.data_first--info{
  font-size: 5rem;
  line-height: 0.8;
}

.biblio_first--info{
  font-size: 3rem;
  line-height: 0.8;
}

 .data_2--number{
  font-size: 19rem;
  position: absolute;
  color: #ED6EA7;
  margin-right: 90rem;
  margin-bottom: 18.7rem;
 
}

.data_2--info{
  font-size: 2.5rem;
  position: absolute;
  margin-left: -30rem;
  margin-top: -9rem;
  color: #ED6EA7;
}

.anim1{
  opacity: 0;
}

.anim2{
  opacity: 0;
}

.animetext{
  animation: typing 2s steps(20) forwards, blink 1s step-end infinite;
  opacity: 1;
  transition: ease-in-out 2s;
}

.animetextfade{
  animation: fadeIn 2s ease 0s 1 normal forwards;
  opacity: 1;
  transition: ease-in-out 2s;
}



@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent; }
}

.cinemanim{
  display: flex;
  position: absolute;
 
  right: -60rem;
  
}

.cinema--sign{
  display: flex;
  position: absolute;
  left: 12rem;
  bottom: 35rem;
  font-size: 4rem;
  color: white;
}


.firstLottieBiblio{
  display: flex;
  position: absolute;
  top: 10rem;
  left: 45rem;
}

.secondLottieBiblio{
  display: flex;
  position: absolute;
  top: 2rem;
  left: 71rem;
}

.thirdLottieBiblio{
  display: flex;
  position: absolute;
  top: 0rem;
  left: -5rem;
}

.fourthLottieBiblio{
  display: flex;
  position: absolute;
  top: 15rem;
  left: -5rem;
}

.biblio_graph{
  display: flex;
  position: absolute;
  top: 2rem;

}

/* classes fonctionnelles */
.bobX1 {
  transform: scaleX(1);
}

.bobX-1 {
  transform: scaleX(-1);
}

.bobanimation{
  transition: .3s ease-in-out;

}

.fallingbob{
  transform: translate(35vw,0rem);
}



.musee2_first--number{
  font-size: 25em;
  line-height: 0.8;
}

.musee2_first--info{
  font-size: 1.9rem;
  line-height: 0.8;
}


.museeafter__text-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  left: 22rem;
  top: 12rem;
  gap: 2rem;
  color:#66CCFF ;
}

.ecoleanime{
display: flex;
position: absolute;
top: 5rem;
}


.musee2_second--number {
  font-size: 20em;
  line-height: 0.8;
  position: absolute;
  top: 4rem;
right: 30rem;
}
.musee2_second--info {
  font-size: 3rem;
  line-height: 0.8;
  position: absolute;
  top: 21rem;
  right: 10rem;
}
.museeafter2__text-container{
  display: flex;
  flex-direction: column  ;
  gap: 2rem;
color: #8E2A34;


}


.parc-text{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 2rem;
  left: 10rem;
  color: white;
  gap: 3rem;
}

.parc-number{
  font-size: 13rem;
  font-weight: bolder;
}
.parc-info{
  font-size: 2.5rem;
}

.cirque-text{
  display: flex;
  flex-direction: column;
  position: absolute;
left: 25rem;
top: 24rem;
width: 20rem;
gap: 2rem;
color: #6D4D37;
}

.cirque-info{
  font-size: 2.5rem;
}

.cirque-number{
  font-size: 18rem;

}

.biblioafter-number{
  font-size: 20rem;
  color: #867EA8;
  position: absolute;
  left: 15rem;
  top: 35rem;
}

.lottietv{
  display: flex;
  position: absolute;
  top: 5rem;
  
}