/* ===================== Typographie ===================== */

@font-face {
  font-family: "Redaction70-Bold"; /* nom de la typo*/
  src: url(fonts/Reda/Redaction70-Bold.ttf) format('truetype'); /* TrueType c'est pour les fichiers "font/ttf" (Font MIME Types sur mozilla) */
}
@font-face {
  font-family: "Redaction100-Bold"; /* nom de la typo*/
  src: url(fonts/Reda/Redaction100-Bold.ttf) format('truetype'); /* TrueType c'est pour les fichiers "font/ttf" (Font MIME Types sur mozilla) */
}
@font-face {
  font-family: "InterRegular";
  src: url(fonts/Inter/Inter_18pt-Regular.ttf) format('truetype');
}
@font-face {
  font-family: "InterLight";
  src: url(fonts/Inter/Inter_18pt-Light.ttf) format('truetype');
}
@font-face {
  font-family: "InterMedium";
  src: url(fonts/Inter/Inter_18pt-Medium.ttf) format('truetype');
}
@font-face {
  font-family: "IntersemiBold";
  src: url(fonts/Inter/Inter_18pt-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: "InterThin";
  src: url(fonts/Inter/Inter_18pt-Thin.ttf) format('truetype');
}
@font-face {
  font-family: "InterBlack";
  src: url(fonts/Inter/Inter_18pt-Black.ttf) format('truetype');
}
@font-face {
  font-family: "InterExtraLight";
  src: url(fonts/Inter/Inter_28pt-ExtraLight.ttf) format('truetype');
}

/* ===================== Page entière ===================== */

/*Régle qui s'applique sur toute la page */
* {
  margin: 0; /*Enleve tout les espaces de chaque cotes de l'éléments */
  padding: 0; /*Enleve l'espacemment de remplissage autour de l'élément */ 
  box-sizing: border-box; /*Aide a inclure toutes les marges insérées automatiquement du aux div */
}

/* ===================== Menu ===================== */

/*Reunit "☰" et les "links"*/
.menu{ 
  top: 0; /*Position haut*/
  right: 0; /*Position droit*/
  z-index: 9998; /*Au dessus de tout*/
  width: 0; /*Largeur*/
  height: 0; /*Hauteur*/
  position: fixed; /*Ne bouge pas*/
  transition: background-color 0.4s ease; /*Animation du fond*/
}

/*Reunit "☰" et les "links" quand il est ouvert*/
.menu.active{ 
  width: 100vw;  /* Prend tout l'écran (largeur)*/
  height: 100vh; /* Prend tout l'écran (hauteur)*/
  pointer-events: all; /*Permet de cliquer sur les éléments du menu*/
  background-color: rgba(0, 0, 0, 0.3); /*Fond noir avec faible opacité*/
}

/*La partie qui apparait quand on appuie sur "☰"*/
.menu-links {
  top: 0;
  right: 0;
  width: 50vw; /*Moitié de la largeur de l'écran*/
  height: 100vh; /*Tout l'écran (hauteur)*/
  background: var(--secondary-color); /*Couleur de fond derriere le chapitrage*/
  display: flex;
  flex-direction: column; /*La direction = collones*/
  position: fixed; /*Ne bouge pas*/
  justify-content: center; /*Centrer verticalement*/
  list-style: none; /*Enleve les points que l'on retrouve dans les listes*/
  margin: 0; /*Pas de marge externe*/
  padding: 0; /*Pas de marge interne*/
  transform: translateX(100%); /*caché à droite avec le 100 sur l'axe X (horizontale)*/
  transition: transform 0.4s ease; /*le temps de animation*/
  pointer-events: none; /*Le menu capte pas les clics quand il est fermé */
  opacity: 1; /*Visible*/
}

/*La transition de la partie qui apparait quand on appuie sur "☰"*/
.menu.active .menu-links {
  transform: translateX(0); /*glisse par la droite */
  pointer-events: all; /*On peu cliquer quand il est la*/
}

/*La forme des textes a l'interieure de la partie qui apparait quand on appuie sur "☰"*/
.menu-links li {
  padding: 20px 25px; /*espacement entre chaque boite de textes*/
}

/*L'apparance des textes a l'interieure de la partie qui apparait quand on appuie sur "☰"*/
.menu-links a{
  text-decoration: none; /*enleve le wavy underline*/
  font-family: "Redaction70-Bold"; /*le type de typo*/
  color: var(--primary-color); /*couleur de base de la typo*/
  font-size: 25px; /*taille de police*/
	transition: color 0.3s ease; /*le temps de transition de couleur*/
  cursor: pointer; /*le cursor devient un pointer une fois sur le mot*/
}

/*L'apparence des textes (a l'interieure de la partie qui apparait quand on appuie sur "☰") quand on appuie dessus*/
.menu-links a:hover {
  color: var(--tertiary-color);/*une fois sur le mot il change de couleur*/
}

/*L'apparance du petit hamburger*/
.menu-toggle {
  font-size: 2em; /*Taille*/
  cursor: pointer; /*Apparition d'un curseur*/
  color: var(--primary-color); /*Couleur du toogle*/
  z-index: 9999;
  position: fixed;
  top: 30px;
  right: 30px;
  opacity: 0; /* CLe X est caché au début */
  pointer-events: none; /*Impossible de cliquer dessus quand invisible */
  transition: opacity 0.5s ease; /*Animation d'apparition */
}

.menu-toggle.active-scroll {
  opacity: 1; /*Et il est present maintenant*/
  pointer-events: all; 
}

/*Les paragraphes du menu*/
.menu p{
  color: var(--primary-color);
  font-size: 16px;
  font-family: "InterMedium";
  padding: 0; /*Pour enlever les elements par defauts*/
  border: 0; /*Pour enlever les elements par defauts*/
  background: transparent; /*Pour enlever les elements par defauts*/
  margin: 0; 
  border-radius: 0; /*Pour enlever les elements par defauts*/
  height: auto;
  width: auto;
}
/* ===================== Bar de progression ===================== */

/*Le mouvement de la barre de progression */
@keyframes scaleProgress { /*permet de définir les étapes d'une animation CSS*/
  0% {
    transform: scaleX(0); /*position du début*/
  }
  100% {
    transform: scaleX(1); /*position de fin*/
  }
}

/*La barre de fond de la barre de progression */
.bar {
  position: fixed; /*ne bouga pas pendnat le scroll*/
  bottom: 0; /*position en bas*/
  left: 0; /*position en haut*/
  width: 100vw; /*la largeur du viewport (la zone d'affichage) sur la largeur*/
  height: 15px; /*la hauteur en pixel*/
  background-color: var(--primary-color); /*la couleur de la barre qui défile*/
  z-index: 998;
}

/*la barre (de la barre de progression) qui bouge*/
.progress_bar {
  position: fixed; /*ne bouga pas*/
  bottom: 0; /*position en bas*/
  left: 0; /*position en haut*/
  width: 100vw; /*la largeur du viewport (la zone d'affichage) sur la largeur*/
  height: 15px; /*la hauteur en pixel*/
  transform-origin: 0 50%; /*position d'origine pour la tranformation*/
  background: var(--secondary-color); /*couleur de la ligne*/
  animation: scaleProgress auto linear; /*le progres est auto et lineaire*/
  animation-timeline: scroll(); /*pour que le mouvment se base sur le scroll*/
  z-index: 999;
}

/* ===================== Scroll ===================== */ 

/*Permet de dire que le html et le body on le même scrolling*/
html, body { 
  scroll-snap-type: y mandatory; /*l'axe où il se fait donc la vertical (y)*/
}

/* ===================== Couleur ===================== */

/*Le dégradée avec sa position, les couleurs et le sens*/
.degrader_section { 
background: linear-gradient(180deg,rgba(254, 209, 140, 1) 0%, rgba(252, 171, 40, 1) 50%, rgba(254, 209, 140, 1) 100%);
}

.degrader_section_dialogue, .degrader_section_2 {
  background: linear-gradient(180deg, rgba(254, 209, 140, 1)0%,  rgba(252, 171, 40, 1)  60%, rgba(254, 209, 140, 1) 80%), rgba(252, 171, 40, 1) 100%;
}

.degrader_section_3 {
  background: linear-gradient(180deg, rgba(254, 209, 140, 1) 0%, rgba(252, 171, 40, 1) 30%, rgba(254, 209, 140, 1) 50%, rgba(252, 171, 40, 1) 70%,  rgba(254, 209, 140, 1)  100%)
}

/*Regroupe toute la page*/
body { 
  background: linear-gradient(180deg,rgba(254, 209, 140, 1) 0%, rgba(252, 171, 40, 1) 50%, rgba(254, 209, 140, 1) 100%);
}

:root {
  --primary-color : #7E74FF;
  --secondary-color : #BFCDEC;
  --tertiary-color : #FFB2A7;
  --quaternary-color : #FFFFFF;
  --quinary-color : #FED18C;
  --senary-color : #FCAB28;

}

/* ===================== Boutons ===================== */ 

/*Permet de réaliser le mouvement de rebondissement*/
@keyframes bounce {  
  0%, 100% {
    transform: translateY(0); /*repositionne un élément verticalement (départ)*/
  }
  50% {
    transform: translateY(-10px); /*repositionne un élément verticalement (Le bouton monte)*/
  }
}

.btn_down {
  position: relative; /* on peut le positioner librement */
  width: 100%; /*utilise toute sa taille de base*/
  font-size: 50px; /*change la taille*/
  border: none; /*enleve les bordure*/
  color: var(--primary-color); /*couleur de la fleche*/
  animation: bounce 1.5s infinite ease-in-out; /*type d'animation / vitesse de l'animation / genre d'animation*/ 
  background: transparent; /*enleve la couleur par defaut*/
  margin-top: 5px;
}

.btn_up {
  position: relative; /* on peu tle positioner librement */
  width: 100%; /*utilise toute sa taille de base*/
  font-size: 50px; /*change la taille*/
  border: none; /*enleve les bordure*/
  color: var(--primary-color); /*couleur de la fleche*/
  animation: bounce 1.5s infinite ease-in-out; /*type d'animation / vitesse de l'animation / genre d'animation*/ 
  background: transparent; /*enleve la couleur par defaut*/
  margin-top: 5px;
  opacity: 0; /*Cachée*/
  transition: opacity 0.3s ease; /*Animation*/
}

/*Cache toutes les fleches et textes sauf*/
.carousel_slide h3, 
.carousel_slide .btn_up {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; 
}

/*Ne cache plus toutes les fleches et textes*/
.level0 h3, 
.level0 .btn_up {
  opacity: 1;
  pointer-events: all; 
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.btn_right {
  font-size: 45px; /*change la taille*/
  border: none; /*enleve les bordure*/
  color: var(--primary-color); /*couleur de la fleche*/
  animation: shake 2s ease infinite; /*type d'animation / vitesse de l'animation / genre d'animation*/ 
  background: transparent; /*enleve la couleur par defaut*/
}

.btn_left {
  font-size: 45px; /*change la taille*/
  border: none; /*enleve les bordure*/
  color: var(--primary-color); /*couleur de la fleche*/
  animation: shake 2s ease infinite; /*type d'animation / vitesse de l'animation / genre d'animation*/ 
  background: transparent; /*enleve la couleur par defaut*/
}

/* ===================== Forme de chaque partie ===================== */

.titre_chap {
  height: 100vh;
  min-height: 100vh;
  display: flex; /*devient un conteneur flex*/
  align-items: center; /*centre horizontalement*/
  justify-content: center; /*centre verticalement*/
  text-align: center; /*centre les elemnts a l'interieur des balises*/
}

.intro_chap {
  display: flex; /*devient conteneur flex*/
  justify-content: center; /*centre verticalement*/
  align-items: center; /*centre horizontalement*/
  text-align: center; 
  height: 100vh; 
  flex-direction: column;
}

section {
  height: 100vh;
  min-height: 100vh; /*taille minimum de la hauteur est l'écran entier*/
  display: flex; /*transforme element en container flex horizontal par defaut*/
  align-items: center; /*centre les enfants sur l’axe vertical l’axe secondaire*/
  justify-content: center; /*centre sur l'axe horizontal*/
  scroll-snap-align: center; /*pour savoir ou se positionne le texte et img apres la scroll*/
  text-align: center;
}

section.intro {
  align-items: end; /*se place en bas de la section*/
  height: 100%; /*prend la meme hauteur que son parent*/
}

section.camion {
  align-items: end;
  height: 100%;
}

section.incineration {
  align-items: end;
  height: 100%;
}

section.expedition_illegale {
  align-items: end;
  height: 100%;
}

section.psychologique {
  align-items: end;
  height: 100%;
}

section.psychologique .skip{
  right: 2em;
  display: flex;
  margin-bottom: 4em;
  margin-top: 8em;
}

section.indirecte {
  align-items: end;
  height: 100%;
}

section.indirecte .skip{
  right: 2em;
  display: flex;
  margin-bottom: 4em;
  margin-top: 8em;
}

section.logicielle {
  align-items: end;
  height: 100%;
}

section.logicielle .skip{
  right: 2em;
  display: flex;
  margin-bottom: 4em;
  margin-top: 3em;
}

section.apres-vente {
  align-items: end;
  height: 100%;
}

section.apres-vente .skip{
  right: 2em;
  display: flex;
  margin-bottom: 4em;
  margin-top: 8em;
}

section.fonctionnelle {
  align-items: end;
  height: 100%;
}

section.fonctionnelle .skip{
  right: 2em;
  display: flex;
  margin-bottom: 4em;
  margin-top: 8em;
}

section.camion .skip{
  right: 2em;
  display: flex;
  margin-bottom: 4em;
  margin-top: 8em;
}

section.incineration .skip{
  right: 2em;
  display: flex;
  margin-bottom: 4em;
  margin-top: 8em;
}

section.expedition_illegale .skip{
  right: 2em;
  display: flex;
  margin-bottom: 4em;
  margin-top: 8em;
}

.skip{
  right: 2em;
  display: flex;
  margin-top: 8em;
  margin-bottom: 4em;
  margin-left: 14em;
}

.skip h5{
  margin-top: 20px;
  font-size: 16px;
}

section.poubelle {
  align-items: end;
  height: 100%;
}

.retour{
  left: 2em;
  display: flex;
  margin-bottom: 4em;
  margin-top: 4em;
  cursor: pointer;
}

.retour h5{
  margin-top: 20px;
  margin-left: 10px;
  font-size: 16px;
}

/* ===================== Texte ===================== */

/*titre*/
h1 {
  font-family: "Redaction70-Bold"; /*typo utilisé*/
  color: var(--primary-color); /*couleur*/
  font-size: 55px; /* taille de la typo*/
  margin-bottom: 10px; /*marge du bas*/
}

/*nom prenom et licence*/
h2 {
  font-family: "InterThin";
  color: var(--primary-color);
  font-size: 15px;
  margin-bottom: 10em;
}

/*indication des mouvments*/
h3 {
  font-family: "InterBlack";
  color: var(--primary-color);
  font-size: 16px;
  margin-bottom: 30px;
}

/*titre des parties de le 3e partie*/
h4 {
  font-family: "Redaction70-Bold"; 
  color: var(--primary-color);
  font-size: 25px;
}

/*texte bouton passer*/
h5 {
  font-family: "InterBlack";
  color: var(--primary-color);
  font-size: 20px;
  margin-right: 16px;
}

/*texte*/
p {
  font-family: "InterLight"; /*typo*/
  color: var(--quaternary-color); /*couleur*/
  font-size: 16px; /*taille typo*/
  background: var(--primary-color); /*le fond du texte*/
  padding: 18px; /*espace entre la couleur du fond et le texte*/
  border: 1px solid var(--primary-color); /*le contour pour arrondir les bouts*/
  border-radius: 5px; /*arrondire le bou*/
  text-align: left; /*position du texte*/
  height: auto; /*adaptation auto de la hauteur du texte*/
  width: 330px; /*largeur defini*/
  margin-left: auto; 
  margin-right: auto;  
}

/*La partie de l'intro avec "p" et "a"*/
.teaser_video {
  margin-bottom: 50px;
  margin-top: 20px;
}

/*Forme du lien*/
a {
  color: var(--tertiary-color); /*couleur des mots avec des liens*/
  text-decoration: var(--tertiary-color) wavy underline; /*pour avoir les vagues sous le texte*/
}

/*Forme de la liste*/
li{
  list-style: none; /*Evite les points par default*/
}

.intro_chap h2{
  margin-bottom: 0;
  font-size: 20px;
}

.intro_chap h3{
  font-size: 35px;
}

.carousel_slide h3{
margin: 0;
}

/*Le H3 dans la page 77*/
.page77 h3{
  margin-top: 30px;
}

/*Le H1 dans la page 77*/
.page77 h1{
  font-size: 50px;
}

/* ========================== Img =========================== */

/*Parametre des img par default*/
img {
  width: 100%; /*dit que l'image doit utiliser tout sa taille*/
  max-width: 300px; /*Taille de l'img max en largeur*/
  text-align: center;
  margin-bottom: 0;
}

.page3 img {
  margin-bottom: 30px; /*Espacement en bas*/
  max-width: 220px; 
  object-fit: contain; /*Ne peu pas sortir a partir d'un niveau*/
}

.page4 img{
  margin-bottom: 30px;
  max-width: 250px; 
  object-fit: contain; 
}

.page5 img{
  margin-bottom: 30px;
  max-width: 250px; 
  object-fit: contain; 
}

.page6 img {
  margin-bottom: 30px;
  margin-top: 30px; /*Espacement en haut*/
  max-width: 250px; 
  object-fit: contain; 
}

.page7 img {
  margin-top: 30px;
  object-fit: contain; 
}

.page8 img {
  margin-top: 30px;
  object-fit: contain; 
}

.page9 img {
  margin-bottom: 30px;
  max-width: 200px; 
  object-fit: contain; 
}

.page10 img{
  margin-bottom: 30px;
  max-width: 300px; 
  object-fit: contain; 
}

.page11 img{
  margin-bottom: 30px;
  object-fit: contain; 
}

.page12 img{
  margin-bottom: 30px;
  max-width: 260px; 
  object-fit: contain; 
}

.page13 img {
  margin-bottom: 30px;
  margin-top: 30px;
  max-width: 350px; 
  object-fit: contain; 
}

.page14 img{
  margin-bottom: 30px;
  margin-top: 30px;
  max-width: 350px; 
  object-fit: contain; 
}

.page15 img{
  margin-bottom: 30px;
  margin-top: 30px;
  max-width: 350px; 
  object-fit: contain; 
}

.page17 img{
  margin-bottom: 30px;
  max-width: 220px; 
  object-fit: contain; 
}

.page18 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 240px; 
  object-fit: contain; 
}

.page21_1 img{
  margin-bottom: 30px;
  max-width: 230px; 
}

.page22_1 img{
  margin-top: 30px;
  margin-bottom: 30px;
}

.page23_1 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 230px; 
}

.page24_1 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 350px; 
}

.page25_1 img{
  margin-top: 30px;
  margin-bottom: 30px;
}

.page26_1 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page27_1 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page28_1 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page30_1 img{
  margin-bottom: 30px;
  max-width: 220px; 
}


/*Partie 2*/
.page21_2 img{
  margin-bottom: 30px;
  max-width: 230px; 
}

.page22_2 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 250px; 
}

.page23_2 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page24_2 img{
  margin-bottom: 30px;
  max-width: 300px; 
}

.page25_2 img{
  margin-top: 30px;
  margin-bottom: 30px;
}

.page26_2 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page27_2 img{
  margin-bottom: 30px;
  max-width: 300px; 
}

.page28_2 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page30_2 img{
  margin-bottom: 30px;
  max-width: 220px; 
}


/*Partie 3*/
.page21_3 img{
  margin-bottom: 30px;
  max-width: 230px; 
}

.page22_3 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 300px; 
}

.page23_3 img{
  margin-bottom: 30px;
  max-width: 150px; 
}

.page24_3 img{
  margin-bottom: 30px;
  max-width: 300px; 
}

.page25_3 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 350px; 
}

.page26_3 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page27_3 img{
  margin-bottom: 30px;
  max-width: 300px; 
}

.page28_3 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page30_3 img{
  margin-bottom: 30px;
  max-width: 220px; 
}


/*Partie 4*/
.page21_4 img{
  margin-bottom: 30px;
  max-width: 230px; 
}

.page22_4 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page23_4 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page24_4 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page25_4 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 350px; 
}

.page26_4 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page27_4 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page28_4 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page30_4 img{
  margin-bottom: 30px;
  max-width: 220px; 
}


/*Partie 5*/
.page21_5 img{
  margin-bottom: 30px;
  max-width: 250px; 
}

.page22_5 img{
  margin-bottom: 30px;
  max-width: 300px; 
}

.page23_5 img{
  margin-bottom: 30px;
  max-width: 250px; 
}

.page24_5 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page25_5 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 300px; 
}

.page26_5 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page27_5 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page28_5 img{
  margin-bottom: 30px;
  max-width: 350px; 
}

.page30_5 img{
  margin-bottom: 30px;
  max-width: 220px; 
}


.page35 img{
  margin-bottom: 30px;
  max-width: 250px; 
}

.page36 img{
  margin-bottom: 30px;
  max-width: 300px; 
}

.page37 img{
  margin-bottom: 30px;
  max-width: 300px; 
}

.page40 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 320px; 
}

.page41 img{
  max-width: 320px; 
}

.page43 img{
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 320px; 
}

.page44 img{
  margin-bottom: 30px;
  max-width: 200px; 
}

.page45 img{
  margin-bottom: 30px;
  margin-top: 30px;
  max-width: 200px; 
}

.page47 img{
  margin-bottom: 30px;
  margin-top: 30px;
  max-width: 350px; 
}

.page48 img{
  margin-bottom: 30px;
  margin-top: 30px;
  max-width: 350px; 
}

.page49 img {
  width: 200px; 
  margin-bottom: 30px;
}

.page50 img {
  width: 200px; 
  margin-bottom: 30px;
  margin-top: 30px;
}

.page51 img {
  width: 300px; 
  margin-bottom: 30px;
  margin-top: 30px;
}

.page54 img {
  width: 350px; 
  margin-bottom: 30px;
  margin-top: 30px;
}

.page55 img{
  width: 350px; 
  margin-bottom: 30px;
}

.page56 img{
  width: 350px; 
  margin-bottom: 30px;
}

.page57 img{
  width: 350px; 
  margin-bottom: 30px;
}

.page58 img{
  width: 350px; 
  margin-bottom: 30px;
} 

.page59 img{
  width: 350px; 
  margin-bottom: 30px;
} 

.page60 img{
  width: 350px; 
  margin-bottom: 30px;
} 

.page61 img{
  width: 350px; 
  margin-bottom: 30px;
} 

.page62 img{
  width: 350px; 
  margin-bottom: 30px;
} 

.page66 img {
  width: 350px; 
  margin-bottom: 30px;
}

.page67 img {
  width: 350px; 
  margin-bottom: 30px;
}

.page68 img {
  width: 350px; 
  margin-bottom: 30px;
}

.page69 img {
  width: 350px; 
  margin-bottom: 30px;
}
/* ==================== Dialogue ================ */

.dialogue {
  position: relative;
}

.step {
  height: 100vh;
  scroll-snap-align: center;
}

/*Conteneur sticky qui groupe toutes les bulles */
.bulles_conteneur {
  position: sticky;
  top: 0;
  height: 100vh;/* prend toute la hauteur */
  display: flex;
  flex-direction: column;
  align-items: center; /* centre horizontalement */
  justify-content: center; /* centre verticalement */
  z-index: 10;
  pointer-events: none; /*bulles ne bloquent pas le scroll ni les clics*/
}

.bulle_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: sticky;
  z-index: 10;
  transition: top 0.5s ease; /*top animé */
  overflow: visible; /*bulles peuvent dépasser sans être coupées*/
}

.bulle {
  position: relative;
  display: flex;
  align-items: center;
}

/*Position de base : cachée sous l'écran */
.image_sticky_wrapper {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  z-index: 50;
  pointer-events: none;
  transform: translateY(100%); /* Cachée en bas */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#fille-dialogue {
    transition: transform 0.6s ease-in-out;
}

.pointe {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent var(--primary-color) transparent transparent;
  flex-shrink: 0; /* ne rétrécit pas */
}

.pointe.gauche {
  order: -1; /* se place avant le texte */
  border-width: 10px 15px 10px 0;
  border-color: transparent var(--primary-color) transparent transparent;
}

.pointe.droite {
  order: 1; /* se place après le texte */
  border-width: 10px 0 10px 15px; /*bordure de chaque cote*/
  border-color: transparent transparent transparent var(--primary-color);
}


/* ==================== Carousel ==================== */

/*img, btw et textes*/
.carousel_container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden; /*ecache ce qui depasse sans le changer*/
}

/*toutes les slides*/
.carousel_track {
  position: relative;
  width: 160px; /* Largeur de la slide centrale */
  height: 570px;
  margin-bottom: 7em;
}

/*les textes*/
.carousel_container p { 
  position: absolute; /*positionnement libre*/
  align-items: center;
  text-align: center;
  bottom: 0;
  margin-bottom: 3em;
  text-align: left;
}

/*la liste*/
.carousel_track li {
  text-decoration: none; /*enleve le wavy underline*/
  list-style: none; /*enleve les points que l'on retrouve dans les listes*/
  margin: 0;
  padding: 0;
}

/*les slides*/
.carousel_slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  display: flex;     
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
}

.carousel_slide img {
  max-width: 100%;    
  object-fit: contain;
  margin: 0;             
}

.slide_texte {
  text-align: center;
  margin: 30px 0 0 0; /*espacement au millieu*/
  opacity: 0; 
  transition: opacity 0.3s ease;
}

/*visible un fois dans le level0*/
.level0 .slide_texte {
  opacity: 1;                
}

/*Le centre du carrousel*/
.level0 {
  z-index: 10;
}

/*changement de couleur des img*/
/*img_couleur = cachée*/
.carousel_slide .img_couleur {
  display: none;
}

/*img_gris = visible*/
.carousel_slide .img_gris {
  display: block;
}

/*dans level0 img_couleur = visible*/
.level0 .img_couleur {
  display: block;
}

/*dans level0 img_gris = invisible*/
.level0 .img_gris {
  display: none;
}

/*devient cliquable*/
.level1, .level-1, .level2, .level-2 {
  cursor: pointer;
}

.level0 {
  cursor: default;
}

/* Positions 1 et -1 : Juste derrière sur les côtés */
.level1 { transform: translateX(60%) scale(0.9); z-index: 5;}
.level-1 { transform: translateX(-60%) scale(0.9); z-index: 5;}

/* Positions 2 et -2 : Encore plus loin derrière */
.level2 { transform: translateX(100%) scale(0.7); z-index: 2;}
.level-2 { transform: translateX(-100%) scale(0.7); z-index: 2;}

/*Cachée*/
.composant_div {
  display: none;
}

/*Visible*/
.composant_div.active {
  display: block; 
}

.composant_section section {
  scroll-snap-align: start;
  height: 100vh;
}