@charset "UTF-8";
body {
  display: grid;
  justify-self: center;
  overflow-x: hidden;
}

@font-face {
  font-family: "Calli-v21-SemiExpanded";
  src: url(/fonts/Calli-v21-SemiExpanded.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
  font-feature-settings: "liga" 0, "dlig" 0;
}

@font-face {
  font-family: "Calli-v23-SemiExpanded";
  src: url("../fonts/Calli-v23-SemiExpanded.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* .chp {
  box-sizing: border-box;
  border: 1px solid red;
} */
/* .chp.is-on {
  transform: rotate(15deg);
} */

/* .espace {
  border: 10px solid blue;
  margin-bottom: 50%;
  margin-bottom: 50px;
} */

.scroll-container {
  position: relative;
  height: 7100vh;
}

.scroll-container > div {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 100%;
  z-index: 1;
  transition: opacity 0.8s ease-out;
}

svg {
  height: 100%;
  width: 100%;
}

.nuage01 {
  position: relative;
  animation: levitation 3s ease-in-out infinite;
}

.nuage02 {
  position: relative;
  animation: levitation 5s ease-in-out infinite;
}

.nuage03 {
  position: relative;
  animation: levitation 4s ease-in-out infinite;
}

@keyframes levitation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateX(0);
  }
}

.soleil01 {
  transform: translateY(700px);
  transition: transform 3s ease-in-out;
}
.is-on .soleil01 {
  transform: translateY(0);
}

.soleil02 {
  transform: translateX(-650px);
  transition: transform 4s ease-in-out;
}
.is-on .soleil02 {
  transform: translateX(0);
}

.soleil03 {
  transform: translateY(250px);
  transition: transform 3s ease-in-out;
}
.is-on .soleil03 {
  transform: translateX(0);
}
.soleil05 {
  transform: translateY(60px);
  transition: transform 3s ease-in-out;
}
.is-on .soleil05 {
  transform: translateX(0);
}

@keyframes leverSoleil {
  0% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-10%);
  }
}

.soleil04 {
  transform: translateY(200px);
  transition: transform 2s ease-in-out, mask-position 7s ease-in-out 1s; /* décalage de 1s pour le mask */

  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 40%
  );
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 50%);

  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;

  -webkit-mask-position: bottom;
  mask-position: bottom;
}

.is-on .soleil04 {
  transform: translateY(0);

  /* 1 seconde après, le mask se déplace vers le haut = effet de disparition du dégradé */
  -webkit-mask-position: top;
  mask-position: top;
}

@keyframes slideIn {
  0% {
    transform: translateY(50%); /* Départ en haut */
    opacity: 0; /* Invisible */
  }
  100% {
    transform: translateY(0); /* Arrive à sa position finale */
    opacity: 1; /* Complètement visible */
  }
}

.soleil06 {
  opacity: 0;
  transition: opacity 2s ease-in-out, mask-position 7s ease-in-out 1s; /* je laisse mask-position car tu n'as pas dit de l'enlever */

  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 40%
  );
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 20%);

  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;

  -webkit-mask-position: bottom;
  mask-position: bottom;
}

.is-on .soleil06 {
  opacity: 1; /* seulement l'opacité change */
}

.branche01 {
  transform: translate(2px);
  transform-box: fill-box;
}

.fleur00 {
  position: relative;
  transform-origin: 52.82172% 72.38265%;
}
.is-on .fleur00 {
  animation: fleur 6.5s ease-in-out infinite;
}

.fleur01 {
  position: relative;
  transform-origin: 55.9921% 50.55385%;
}
.is-on .fleur01 {
  animation: fleur 6s ease-in-out infinite;
}

.fleur02 {
  position: relative;
  transform-origin: 44.37915% 8.70219%;
}
.is-on .fleur02 {
  animation: fleur 5s ease-in-out infinite;
}

.fleur03 {
  position: relative;
  /* animation: fleur 6s ease-in-out infinite; */
  transform-origin: 86.98312% 10.64695%;
}
.is-on .fleur03 {
  animation: fleur 6.8s ease-in-out infinite;
}

.fleur04 {
  position: relative;
  transform-origin: 33.66864% 22.90965%;
}
.is-on .fleur04 {
  animation: fleur 6s ease-in-out infinite;
}

.fleur05 {
  position: relative;
  transform-origin: 55.22165% 29.9254%;
}
.is-on .fleur05 {
  animation: fleur 7s ease-in-out infinite;
}

.fleur06 {
  position: relative;
  transform-origin: 46.54461% 80.05818%;
}
.is-on .fleur06 {
  animation: fleur 8s ease-in-out infinite;
}

.fleur07 {
  position: relative;
  transform-origin: 69.49279% 19.70842%;
}
.is-on .fleur07 {
  animation: fleur 8.3s ease-in-out infinite;
}

.fleur08 {
  position: relative;
  transform-origin: 80.57566% 22.3368%;
}
.is-on .fleur08 {
  animation: fleur 8.5s ease-in-out infinite;
}

@keyframes fleur {
  0% {
    transform: scale(0) translate(0, 0);
  }
  30% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1) translate(-200vw, 220vh);
  }
}

.fleur9 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur9 {
  animation: fleurPopDescente 6s ease-in-out forwards;
  animation-iteration-count: infinite;
}
.fleur10 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur10 {
  animation: fleurPopDescente 5s ease-in-out forwards;
  animation-iteration-count: infinite;
}
.fleur11 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur11 {
  animation: fleurPopDescente 4s ease-in-out forwards;
  animation-iteration-count: infinite;
}
.fleur12 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur12 {
  animation: fleurPopDescente 3s ease-in-out forwards;
  animation-iteration-count: infinite;
}
.fleur13 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur13 {
  animation: fleurPopDescente 4.5s ease-in-out forwards;
  animation-iteration-count: infinite;
}

@keyframes fleurPopDescente {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 0;
  }
  20% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(-300px, 1200px);
    opacity: 1;
  }
}
.fleur14 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur14 {
  animation: fleurchp1 5s ease-in-out forwards;
  animation-iteration-count: infinite;
}
.fleur15 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur15 {
  animation: fleurchp1 4.5s ease-in-out forwards;
  animation-iteration-count: infinite;
}
.fleur16 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur16 {
  animation: fleurchp1 4s ease-in-out forwards;
  animation-iteration-count: infinite;
}
.fleur17 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur17 {
  animation: fleurchp1 6s ease-in-out forwards;
  animation-iteration-count: infinite;
}
.fleur18 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
}

.is-on .fleur18 {
  animation: fleurchp1 5.5s ease-in-out forwards;
  animation-iteration-count: infinite;
}

@keyframes fleurchp1 {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 0;
  }
  20% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(400px, 1700px);
    opacity: 1;
  }
}
.fleur19 {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0) translate(0, 0);
  animation: fleurchp3 5.5s ease-in-out forwards;
  animation-iteration-count: infinite;
}

/* Variantes avec délais différents */
.fleur19-1 {
  animation-delay: 0s;
}
.fleur19-2 {
  animation-delay: 1s;
}
.fleur19-3 {
  animation-delay: 2s;
}
.fleur19-4 {
  animation-delay: 3s;
}
.fleur19-5 {
  animation-delay: 4s;
}
.fleur19-6 {
  animation-delay: 5s;
}
.fleur19-7 {
  animation-delay: 6s;
}
.fleur19-8 {
  animation-delay: 7s;
}

@keyframes fleurchp3 {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 0;
  }
  20% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(-400px, 2000px);
    opacity: 1;
  }
}

.coucou {
  transform: translateY(200px);
  transition: transform 0.8s ease-in-out;
  /* viens depuis le bas */
}
.is-on .coucou {
  transform: translateY(0);
}
.coucou2 {
  transform: translateY(100px);
  transition: transform 0.7s ease-in-out;
  /* viens depuis le bas */
}
.is-on .coucou2 {
  transform: translateY(0);
}
.coucou3 {
  transform: translateY(140px);
  transition: transform 1s ease-in-out;
  /* viens depuis le bas */
}
.is-on .coucou3 {
  transform: translateY(0);
}
.coucou4 {
  transform: translateY(140px);
  transition: transform 0.8s ease-in-out;
  /* viens depuis le bas */
}
.is-on .coucou4 {
  transform: translateY(0);
}
.coucou5 {
  transform: translateY(140px);
  transition: transform 0.9s ease-in-out;
  /* viens depuis le bas */
}
.is-on .coucou5 {
  transform: translateY(0);
}
.coucou6 {
  transform: translateY(140px);
  transition: transform 1s ease-in-out;
  /* viens depuis le bas */
}
.is-on .coucou6 {
  transform: translateY(0);
}

.reg00 {
  transform: translateY(150px);
  transition: transform 1s ease-in-out;
}
.is-on .reg00 {
  transform: translateY(0);
}

.reg01 {
  transform: translateY(-200px);
  transition: transform 0.8s ease-in-out;
  /* viens depuis le haut */
}
.is-on .reg01 {
  transform: translateY(0);
}
.reg02 {
  transform: translateX(200px);
  transition: transform 0.8s ease-in-out;
}
.is-on .reg02 {
  transform: translateX(0);
}
.reg03 {
  transform: translateX(200px);
  transition: transform 1s ease-in-out;
  /* vient depuis la droite */
}
.is-on .reg03 {
  transform: translateX(0);
}
.reg04 {
  transform: translateX(-150px);
  transition: transform 0.8s ease-in-out;
  /* vient depuis la gauche */
}
.is-on .reg04 {
  transform: translateX(0);
}
.reg05 {
  transform: translateX(-200px);
  transition: transform 0.9s ease-in-out;
  /* vient depuis la gauche */
}
.is-on .reg05 {
  transform: translateX(0);
}
.reg06 {
  transform: translateX(-49px);
  transition: transform 0.9s ease-in-out;
  /* vient depuis la gauche */
}
.is-on .reg06 {
  transform: translateX(0);
}
.reg07 {
  transform: translateX(-49px);
  transition: transform 1.2s ease-in-out;
  /* vient depuis la gauche */
}
.is-on .reg07 {
  transform: translateX(0);
}
.reg08 {
  transform: translateX(49px);
  transition: transform 1.5s ease-in-out;
  /* vient depuis la droite */
}
.is-on .reg08 {
  transform: translateX(0);
}
.reg082 {
  transform: translateX(49px);
  transition: transform 1.8s ease-in-out;
  /* vient depuis la droite */
}
.is-on .reg082 {
  transform: translateX(0);
}
.reg09 {
  transform: translateX(100px);
  transition: transform 1.5s ease-in-out;
  /* vient depuis la droite */
}
.is-on .reg09 {
  transform: translateX(0);
}

.reg10 {
  transform: translateX(-50px);
  transition: transform 1.2s ease-in-out;
  /* vient depuis la gauche */
}
.is-on .reg10 {
  transform: translateX(0);
}
.reg11 {
  transform: translateX(-50px);
  transition: transform 1.4s ease-in-out;
  /* vient depuis la gauche */
}
.is-on .reg11 {
  transform: translateX(0);
}
.reg12 {
  transform: translateX(-50px);
  transition: transform 1.6s ease-in-out;
  /* vient depuis la gauche */
}
.is-on .reg12 {
  transform: translateX(0);
}

.poisson {
  position: relative;
  animation: poisson 7s ease-in-out infinite;
}

@keyframes poisson {
  0% {
    transform: translateX(-900px);
    opacity: 0;
  }
  50% {
    transform: translateX(-380px) ease-in-out;
    opacity: 1.5;
  }
  100% {
    transform: translateX(400px);
    opacity: 0;
  }
}

.pas01 {
  position: relative;
  animation: pas 3s ease-in infinite;
}
.pas02 {
  position: relative;
  animation: pas 4s ease-in-out infinite;
}
.pas03 {
  position: relative;
  animation: pas 5s ease-in-out infinite;
}
.pas04 {
  position: relative;
  animation: pas 6s ease-in-out infinite;
}
.pas05 {
  position: relative;
  animation: pas 7s ease-in-out infinite;
}
.pas06 {
  position: relative;
  animation: pas 8s ease-in-out infinite;
}

.is-on .pas {
  animation: pas 0s;
}

@keyframes pas {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.trace {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3500;
}

.is-on .trace {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3500;
  animation: dessine 6s ease-in-out infinite, fadeout 6.2s ease-in-out infinite;
}
.trace2 {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3500;
}

.is-on .trace2 {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3500;
  animation: dessine 7s ease-in-out infinite, fadeout 7.2s ease-in-out infinite;
}

@keyframes dessine {
  0% {
    stroke-dashoffset: 3500; /* Le tracé est complètement masqué */
  }
  70% {
    stroke-dashoffset: 0; /* Le tracé est complètement dessiné */
  }
  100% {
    stroke-dashoffset: 0; /* Le tracé reste visible à la fin */
  }
}

@keyframes fadeout {
  0% {
    opacity: 0.7; /* Le tracé est visible pendant le dessin */
  }
  70% {
    opacity: 1; /* Le tracé est visible pendant le dessin */
  }
  100% {
    opacity: 0; /* Le tracé disparaît après le dessin */
  }
}

/* .riviere {
  fill: #d0ecf2;
  animation: fadePath 4s ease-in-out infinite alternate;
}

@keyframes fadePath {
  from {
    fill-opacity: 1;
  }
  to {
    fill-opacity: 0.1;
  }
} */

.riviere {
  width: 100%;
  height: 600px;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2234 2500'><path fill='%23d0ecf2' d='M51.16,638.35l711.82,166.94c35.02,8.28,35.23,58.05.28,66.62l-185.42,45.48c-29.96,7.35-35.71,47.44-9.03,62.92l555.91,322.54c28.06,16.28,19.88,58.83-12.22,63.54l-846.65,124.27c-37.59,5.52-39.6,59-2.54,67.33l661.6,148.76c32.75,7.36,36.48,52.55,5.37,65.18L0,2234.36l2234-.36-970.04-571.94c-31.1-8.75-33.92-51.74-4.23-64.47l853.8-86.78c27.38-11.74,27.76-50.42.62-62.71l-956.95-445.12c-27.39-12.39-26.68-51.53,1.14-62.93l1024.85-301.71H51.16Z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Masque vertical noir -> transparent */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* Valeur par défaut */
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;

  /* Transition fluide sur mask-size */
  transition: -webkit-mask-size 3s ease-in-out;
  transition: mask-size 3s ease-in-out;
}

/* Quand .is-on est présent → on change simplement mask-size */
.is-on .riviere {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.oeilDistor01 {
  filter: blur(100px) contrast(5);
  transform: scale(1.01);
  transition: all 0.3s ease;
  animation: waveDistort 5s ease-in-out infinite;
}
.oeilDistor02 {
  filter: blur(300px) contrast(10);
  transform: scale(1.01);
  transition: all 0.3s ease;
  animation: waveDistort 7s ease-in-out infinite;
}

@keyframes waveDistort {
  0%,
  100% {
    transform: scale(1.01) skewX(0.5deg);
    filter: blur(0.5px);
  }
  50% {
    transform: scale(1.015) skewX(1deg);
    filter: blur(1.2px);
  }
}

.globe {
  transform: translateX(-100px); /* décalé vers la gauche au départ */
  transition: transform 2s ease-in-out;
}

.is-on .globe {
  transform: translateX(0); /* revient à sa position normale */
}

.correctionMonta01 {
  transform: translateY(-2px);
  transform-box: fill-box;
}

.feuille01 {
  opacity: 0;
  transform: translateY(0);
  transition: transform 1s ease-in-out, opacity 3s ease-in-out;
}
.is-on .feuille01 {
  opacity: 1;
  transform: translateY(-100px);
}
.feuille02 {
  opacity: 0;
  transform: translateY(0);
  transition: transform 1.5s ease-in-out, opacity 3s ease-in-out;
}
.is-on .feuille02 {
  opacity: 1;
  transform: translateY(-100px);
}
.feuille03 {
  opacity: 0;
  transform: translateY(0);
  transition: transform 2s ease-in-out, opacity 3s ease-in-out;
}
.is-on .feuille03 {
  opacity: 1;
  transform: translateY(-100px);
}
.feuille04 {
  opacity: 0;
  transform: translateY(0);
  transition: transform 0.5s ease-in-out, opacity 3s ease-in-out;
}
.is-on .feuille04 {
  opacity: 1;
  transform: translateY(-100px);
}
.feuille05 {
  opacity: 0;
  transform: translateY(0);
  transition: transform 2.5s ease-in-out, opacity 3s ease-in-out;
}
.is-on .feuille05 {
  opacity: 1;
  transform: translateY(-100px);
}

.pluie01 {
  opacity: 0;
  transform: translateY(0);
  transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
}
.is-on .pluie01 {
  opacity: 1;
  transform: translateY(100px);
}
.pluie02 {
  opacity: 0;
  transform: translateY(0);
  transition: transform 1.8s ease-in-out, opacity 1.4s ease-in-out;
}
.is-on .pluie02 {
  opacity: 1;
  transform: translateY(100px);
}
.pluie03 {
  opacity: 0;
  transform: translateY(0);
  transition: transform 1s ease-in-out, opacity 1.7s ease-in-out;
}
.is-on .pluie03 {
  opacity: 1;
  transform: translateY(100px);
}

.pluie04 {
  opacity: 0;
  transform: translate(0px, 0px); /* départ en haut */
  transition: transform 1.5s ease-in-out, opacity 1.6s ease-in-out;
}

.is-on .pluie04 {
  opacity: 1;
  transform: translate(-20px, 20px); /* va vers la gauche (-X) et en bas (+Y) */
  /* pluie diagonale gauche */
}
.pluie05 {
  opacity: 0;
  transform: translate(0px, 0px); /* départ en haut */
  transition: transform 2s ease-in-out, opacity 1.5s ease-in-out;
}

.is-on .pluie05 {
  opacity: 1;
  transform: translate(-20px, 30px); /* va vers la gauche (-X) et en bas (+Y) */
  /* pluie diagonale gauche */
}

.perso-move00 {
  transform: translateX(0);
  transition: transform 1s ease-in-out;
}
.is-on .perso-move00 {
  transform: translateX(50px);
}
.perso-move01 {
  transform: translateX(0);
  transition: transform 1s ease-in-out;
}
.is-on .perso-move01 {
  transform: translateX(70px);
}
.perso-move02 {
  transform: translateX(0);
  transition: transform 1.7s ease-in-out;
}
.is-on .perso-move02 {
  transform: translateX(200px);
}
.perso-move03 {
  transform: translateX(0);
  transition: transform 2.1s ease-in-out;
}
.is-on .perso-move03 {
  transform: translateX(190px);
}
.perso-move04 {
  transform: translateY(0);
  transition: transform 2.1s ease-in-out;
}
.is-on .perso-move04 {
  transform: translateY(350px);
}
.perso-move05 {
  transform: translateX(0);
  transition: transform 2.5s ease-in-out;
}
.is-on .perso-move05 {
  transform: translateX(150px);
}

.porte01 {
  transform: translateX(0);
  transition: transform 2s ease-in-out;
}
.is-on .porte01 {
  transform: translateX(50px);
}
.porte02 {
  transform: translateX(0);
  transition: transform 2s ease-in-out;
}
.is-on .porte02 {
  transform: translateX(-50px);
}

/* Par défaut pas d'animation */
.xplosion1,
.xplosion2 {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.7s ease-in-out;
  /* État de base */
  transform: rotate(0deg);
}

/* Quand is-on est présent, on applique la rotation */
.is-on .xplosion1 {
  transform: rotate(10deg);
}

.is-on .xplosion2 {
  transform: rotate(-15deg);
}

.canon {
  transition: transform 1s ease-in-out;
  transform: translate(0, 0);
}

.is-on .canon {
  transform: translate(
    100px,
    -10px
  ); /* vers la droite (40px) et un peu vers le haut (-20px) */
}

.barredrapeau {
  transform: translateY(100px);
  transition: transform 1s ease-in-out, -webkit-mask-position 1.5s ease-in-out,
    mask-position 1.5s ease-in-out, stroke 1s ease-in-out;

  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 40%,
    rgba(0, 0, 0, 0) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 40%,
    rgba(0, 0, 0, 0) 90%,
    rgba(0, 0, 0, 0) 100%
  );

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-position: top;
  mask-position: top;

  stroke: transparent; /* contour invisible au départ */
}

.is-on .barredrapeau {
  transform: translateY(0);
  -webkit-mask-position: bottom;
  mask-position: bottom;

  stroke: black; /* contour visible quand actif */
}
.barredrapeau2 {
  transform: translateY(100px);
  transition: transform 1.3s ease-in-out, -webkit-mask-position 1.5s ease-in-out,
    mask-position 1.5s ease-in-out, stroke 1s ease-in-out;

  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 40%,
    rgba(0, 0, 0, 0) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 40%,
    rgba(0, 0, 0, 0) 90%,
    rgba(0, 0, 0, 0) 100%
  );

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-position: top;
  mask-position: top;

  stroke: transparent; /* contour invisible au départ */
}

.is-on .barredrapeau2 {
  transform: translateY(0);
  -webkit-mask-position: bottom;
  mask-position: bottom;

  stroke: black; /* contour visible quand actif */
}
.barredrapeau3 {
  transform: translateY(100px);
  transition: transform 1.6s ease-in-out, -webkit-mask-position 1.5s ease-in-out,
    mask-position 1.5s ease-in-out, stroke 1s ease-in-out;

  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 40%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 40%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0) 100%
  );

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-position: top;
  mask-position: top;

  stroke: transparent; /* contour invisible au départ */
}

.is-on .barredrapeau3 {
  transform: translateY(0);
  -webkit-mask-position: bottom;
  mask-position: bottom;

  stroke: black; /* contour visible quand actif */
}

.star {
  transform-origin: center center; /* ou '50% 50%' */
  transform-box: fill-box; /* important pour que transform-origin s'applique bien au path SVG */
  transform: scale(0.5);
  transition: transform 1s ease-in-out;
}

.is-on .star {
  transform: scale(1);
}
.star2 {
  transform-origin: center center; /* ou '50% 50%' */
  transform-box: fill-box; /* important pour que transform-origin s'applique bien au path SVG */
  transform: scale(0.5);
  transition: transform 1.5s ease-in-out;
}

.is-on .star2 {
  transform: scale(1);
}
.star3 {
  transform-origin: center center; /* ou '50% 50%' */
  transform-box: fill-box; /* important pour que transform-origin s'applique bien au path SVG */
  transform: scale(0.5);
  transition: transform 2s ease-in-out;
}

.is-on .star3 {
  transform: scale(1);
}

.bebe {
  transform-origin: center; /* rotation autour du centre */
  transform-box: fill-box; /* pour les éléments SVG */
  transform: rotate(0deg); /* état de base */
  transition: transform 2s ease-in-out; /* rotation lente */
}

.is-on .bebe {
  transform: rotate(40deg); /* fait une rotation complète */
}

.bird {
  transform: translate(-49px, 0); /* départ décalé à gauche */
  transition: transform 1.2s ease-in-out;
}

.is-on .bird {
  transform: translate(100px, -100px); /* va en haut à droite */
}

.plumedroite {
  transform: translate(-49px, 0); /* départ décalé à gauche */
  transition: transform 1.2s ease-in-out;
}

.is-on .plumedroite {
  transform: translate(100px, 100px); /* va en bas à droite */
}
.plumedroite2 {
  transform: translate(-49px, 0); /* départ décalé à gauche */
  transition: transform 1.3s ease-in-out;
}

.is-on .plumedroite2 {
  transform: translate(100px, -100px); /* va en bas à droite */
}

.plumegauche {
  transform: translate(-49px, 0); /* position de départ */
  transition: transform 1.2s ease-in-out;
}

.is-on .plumegauche {
  transform: translate(-100px, 100px); /* en bas à gauche */
}
.plumegauche2 {
  transform: translate(-49px, 0); /* position de départ */
  transition: transform 1.2s ease-in-out;
}

.is-on .plumegauche2 {
  transform: translate(-50px, 100px); /* en bas à gauche */
}
.plumegauche3 {
  transform: translate(-49px, 0); /* position de départ */
  transition: transform 1.2s ease-in-out;
}

.is-on .plumegauche3 {
  transform: translate(-20px, 100px); /* en bas à gauche */
}

.corde {
  transform-origin: left center; /* le bord gauche reste fixe */
  transform: scaleX(1); /* taille normale au départ */
  transition: transform 0.7s ease-in-out;
  opacity: 1; /* pas besoin de transition sur l'opacité si tu veux qu'il reste visible */
}

.is-on .corde {
  transform: scaleX(0.95); /* réduit légèrement vers la gauche */
  /* On garde opacity: 1 pour que ce soit toujours visible */
}
.corde2 {
  transform-origin: right center; /* fixe la partie droite */
  transform: scaleX(1);
  transition: transform 0.7s ease-in-out;
  opacity: 1;
}

.is-on .corde2 {
  transform: scaleX(0.95); /* réduit vers la droite */
}

.disparition {
  opacity: 1; /* totalement visible au départ */
  transform: scale(1); /* taille normale */
  transform-origin: center center; /* reste centré à son point actuel */
  transition: transform 5.5s ease-in-out; /* transition douce */
}

.is-on .disparition {
  opacity: 1; /* devient invisible */
  transform: scale(0); /* réduit à zéro */
}

.peinture {
  opacity: 0;
  transform: translateY(0);
  transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
}

/* Toutes en .is-on prennent transform + opacity */
.is-on .peinture {
  opacity: 1;
  transform: translateY(0px);
}

/* Différents delays uniquement pour l’opacité */
.peinture1 {
  transition-delay: 0s, 0s; /* transform, opacity */
}
.peinture2 {
  transition-delay: 0s, 0.2s;
}
.peinture3 {
  transition-delay: 0s, 0.4s;
}
.peinture4 {
  transition-delay: 0s, 0.6s;
}
.peinture5 {
  transition-delay: 0s, 0.8s;
}
.peinture6 {
  transition-delay: 0s, 1s;
}
.peinture7 {
  transition-delay: 0s, 1.2s;
}
.peinture8 {
  transition-delay: 0s, 1.4s;
}
.peinture9 {
  transition-delay: 0s, 1.8s;
}

.main {
  transform: translateY(50px);
  transition: transform 1s ease-in-out;
  /* viens depuis le bas */
}
.is-on .main {
  transform: translateY(0);
}

.larme {
  transform: translateY(-50px);
  transition: transform 0.8s ease-in-out;
}

/* Animation au déclenchement de .is-on */
.is-on .larme {
  transform: translateY(0);
}

/* Différents delays pour un effet en cascade */
.larme1 {
  transition-delay: 0s;
}
.larme2 {
  transition-delay: 0.2s;
}
.larme3 {
  transition-delay: 0.4s;
}
.larme4 {
  transition-delay: 0.6s;
}

.texte02 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Calli-v23-SemiExpanded", sans-serif;
  text-align: center;
  font-size: 2.5rem;
  opacity: 0;
  transform: translateY(50px);
  transition: none;
  height: 100vh;
  position: relative;
  will-change: opacity, transform;
  overflow: visible;
  line-height: 1.1;
}

@media screen and (max-width: 768px) {
  .texte02 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    font-size: 1.3rem;
    padding: 0 1.5rem;
    transform: translateY(50px);
    max-width: 100%;
    line-height: 1.2;

    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: none;
    text-align: center;
    white-space: normal;
  }

  .scroll-container > div {
    padding: 0 1rem;
  }
}