.fond {
  position: absolute; top:0; left:0; z-index:10;
  height: 100%;    
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  opacity: 1;
}
.fond img { height: 100%; width: auto; display: block; }


.start-button {
  position: absolute; top: 50%; left: 50%; z-index: 99999;
  padding: 10px 20px;
  font:400 23px 'Arima',Georgia,serif;
  cursor: pointer;

  background:#075b1f; color:#fff;
  border:none;
  border-radius:10px;

  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));

}
.start-button:hover { background:#0b9e34; }


img {
    /* user-drag: none; /* Safari */
    -webkit-user-drag: none; /* Chrome/Edge */
    user-select: none;     /* empêche la sélection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;  /* optionnel si tu veux désactiver tout clic sur l'image */
}


/* - - - - - - - - - RIDEAU Buissons */
/* - - - - - - - - - RIDEAU Buissons */
/* - - - - - - - - - RIDEAU Buissons */
.rideau-buisson-g-01 {
  position: absolute; top:0%; left:0%; z-index:99990;
  height: 100%;    
  transform-origin: top left;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  pointer-events: none;
  background-color: transparent;
}
.rideau-buisson-g-01 img { height: 100%; width: auto; display: block; }


.rideau-buisson-d-01 {
  position: absolute; top:0%; left:100%; z-index:99990;
  height: 100%;    
  transform-origin: top left;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  pointer-events: none;
  background-color: transparent;

  transform: translateX(-100%) translateY(0%) rotate(0deg);
}
.rideau-buisson-d-01 img { height: 100%; width: auto; display: block; }


.rideau-support {
  position: absolute; top:50%; left:50%; z-index:99900;
  width:100%; height: 100%;    
  transform-origin: top left;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  pointer-events: none;
  background-color: #075b1f;

  transform: translateX(-50%) translateY(-50%) rotate(0deg);
}



/* - - - - - - - - - LIVRE */
/* - - - - - - - - - LIVRE */
/* - - - - - - - - - LIVRE */
/*
#cle-dragdrop {
  position: absolute; top: 53%; left: 32%; z-index: 100;
  width: 4%; height: 12%;
  background-color: rgba(0, 255, 98, 0.5);
  cursor: grab;
}

#serrure-dragdrop {
  position: absolute; top: 44%; left: 60.5%; z-index: 100;
  width: 3%; height: 6%;
  background-color: rgba(0, 255, 98, 0.5);
}

#cover {
  position: absolute; top: 50%; left: 50%;
  width: 30%; height: auto;
  text-align: center;
  transform: translate(-50%) translateY(-50%) rotate(-4deg);
}
#cover img { width:100%; height:auto; }

#cle {
  position: absolute; top: 60%; left: 35%; z-index: -1;
  width: 3%; height: auto;
  transition: 0.25s ease;
  transform-origin: center center;
  transform: translateX(-50%) translateY(-50%) rotate(126deg);
  display: flex;
}
#cle img { width:100%; height:auto; }
*/



.sol {
  position:absolute; top: 380px; left:50px; z-index:100;
  width: 340px; height: 105px;
  background-color: transparent; /* #00ff49ad; */
}

.arbre {
  position:absolute; top: 90px; left:50%; z-index:120;
  width: 300px; height:auto;
  transform: translateX(-50%) translateY(0%) rotate(0deg);
  pointer-events: none;
  opacity:0;
}

.graine-wrapper {
  position: absolute; top: 56.3%; left: -53.8%; z-index: 90000;
  width:12px; height:auto;
  cursor:grab;
  opacity: 0;
}
.graine-wrapper img  { width:100%; height:auto; }


.angelot-vent-wrapper {
  position: absolute; top:23%; left:27%; z-index:100;
  width:200px; height:auto;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  cursor:pointer;
}
.angelot-vent-wrapper img  { width:100%; height:auto; }


.nuage-wrapper {
  position: absolute; 
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.nuage-wrapper img  { width:100%; height:auto; }
.nuage-01 { top:10%; left:30%; z-index:100; width:160px; height:auto; }
.nuage-02 { top: 30%; left: 30%; z-index:100; width: 160px; height:auto; }
.nuage-03 { top:20%; left:6%; z-index:100; width:180px; height:auto; }


.vague-wrapper {
  position: absolute; 
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.vague-wrapper img  { width:100%; height:auto; }

.vague-01-01 { top: 70%; left: 40%; z-index:110; width:100px; height:auto; }
.vague-01-02 { top: 73%; left: 40%; z-index:100; width: 110px; height:auto; opacity:.75; }

.vague-02-01 { top: 50%; left: 18%; z-index:110; width: 80px; height:auto; }
.vague-02-02 { top: 53%; left: 18%; z-index:100; width: 90px; height:auto; opacity:.75; }

.vague-03-01 { top: 90%; left: 70%; z-index:110; width: 90px; height:auto; }
.vague-03-02 { top: 93%; left: 68%; z-index:100; width: 100px; height:auto; opacity:.75; }




/* - - - - - - - - - LOGO */
/* - - - - - - - - - LOGO */
/* - - - - - - - - - LOGO */
.logo-wrapper {
  position: absolute; top:50%; left:50%; z-index:20;
  transition: 0.25s ease;
  transform: translateX(-50%) translateY(-50%) rotate(0deg); 
  opacity: 1;
  display: flex; flex-direction: column; align-items: center;
}

.logo-wrapper .logo {
  transition: 0.25s ease;
  display: flex; align-items: center; justify-content: center;
}
.logo-wrapper .logo img { 
  position: relative; left:-3%;
  width: 60%;  height: auto;  
}

.logo-wrapper .titre {
  font: 600 150% 'Arima',Georgia,serif;
  color:#000;
  text-align: center;
  padding: 20px 0;
  line-height: 130%;
  perspective: 500px;
  box-sizing: border-box;
}




/* - - - - - - - - - OISEAUX */
/* - - - - - - - - - OISEAUX */
/* - - - - - - - - - OISEAUX */

/* - - oiseau-g-01 - - */
/* - - oiseau-g-01 - - */
/* - - oiseau-g-01 - - */
.oiseau-g-01 {
  position: absolute; top:36%; left:20%; height:20%; z-index:900;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform: translate(0%, -50%);
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}
.oiseau-g-01 img { height: 100%; width: auto; display: block; }

.oiseau-g-01 .corps {
  position: absolute; top:0%; left:0%; height:100%; z-index:250;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: center center;
  transform: scale(1) rotate(0deg); 
  animation: oiseau-g-01-corps-anim 4.5s ease-in-out infinite;
}
.oiseau-g-01 .corps img { height: 100%; width: auto; display: block; }

@keyframes oiseau-g-01-corps-anim {
  0%, 100% { transform: scale(1.025) rotate(1deg); }
  50% { transform: scale(1) rotate(-1deg); }
}


.oiseau-g-01 .aile-bas {
  position: absolute; top:36%; left:30%; height:63%; z-index:250;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: top right;
  transform: rotate(0deg); 
}
.oiseau-g-01 .aile-bas img { height: 100%; width: auto; display: block; }


.oiseau-g-01 .aile-haut {
  position: absolute; top:3%; left:6%; height:50%; z-index:240;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: top right;
  transform: rotate(0deg); 
}
.oiseau-g-01 .aile-haut img { height: 100%; width: auto; display: block; }


/* - - oiseau-g-02 - - */
/* - - oiseau-g-02 - - */
/* - - oiseau-g-02 - - */
.oiseau-g-02 {
  position: absolute; top:65%; left:15%; height:25%; z-index:900;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform: translate(0%, -50%);
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}
.oiseau-g-02 img { height: 100%; width: auto; display: block; }

.oiseau-g-02 .corps {
  position: absolute; top:4%; right:4%; height:95%; z-index:250;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: center center;
  transform: rotate(0deg); 
  animation: oiseau-g-02-corps-anim 6s ease-in-out infinite;
}
.oiseau-g-02 .corps img { height: 100%; width: auto; display: block; }

@keyframes oiseau-g-02-corps-anim {
  0%, 100% { transform: scale(1.025) rotate(-1.25deg); }
  50% { transform: scale(1) rotate(1deg); }
}

.oiseau-g-02 .aile-haut {
  position: absolute; top:4%; left:8%; height:28%; z-index:230;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: bottom right;
  transform: rotate(10deg); 
}
.oiseau-g-02 .aile-haut img { height: 100%; width: auto; display: block; }


.oiseau-g-02 .aile-bas {
  position: absolute; top:32%; left:2%; height:18%; z-index:230;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: top right;
  transform: rotate(0deg); 
}
.oiseau-g-02 .aile-bas img { height: 100%; width: auto; display: block; }


/* - - oiseau-d-01- - */
/* - - oiseau-d-01- - */
/* - - oiseau-d-01- - */
.oiseau-d-01 {
  position: absolute; top:48%; left:62%; z-index:900;
  height: 32%;    
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform: translate(0%, -50%);
  cursor:pointer;
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}
.oiseau-d-01 img { height: 100%; width: auto; display: block; }

.oiseau-d-01 .bec-01 {
  position: absolute; top:28%; left:0%; height: 12%; z-index:250;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: bottom right;
  transform: rotate(0deg); 
}
.oiseau-d-01 .bec-01 img { height: 100%; width: auto; display: block; }

.oiseau-d-01 .bec-02 {
  position: absolute; top:37%; left:-1%; height:7%; z-index:250;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: bottom right;
  transform: rotate(0deg); 
}
.oiseau-d-01 .bec-02 img { height: 100%; width: auto; display: block; }

.oiseau-d-01 .corps {
  position: absolute; top:28%; left:7%; height:58%; z-index:240;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: center center;
  transform: rotate(0deg); 
  animation: oiseau-d-01-corps-anim 4s ease-in-out infinite;
}
.oiseau-d-01 .corps img { height: 100%; width: auto; display: block; }

@keyframes oiseau-d-01-corps-anim {
  0%, 100% { transform: scale(1.025) rotate(-0.5deg); }
  50% { transform: scale(1) rotate(0.5deg); }
}

.oiseau-d-01 .pattes {
  position: absolute; top:84%; left:25%; height:15%; z-index:220;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: center center;
  transform: rotate(0deg); 
}
.oiseau-d-01 .pattes img { height: 100%; width: auto; display: block; }

.oiseau-d-01 .queue {
  position: absolute; top:-1%; right:-1%; height: 62%; z-index:230;    
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform-origin: bottom right;
  transform: rotate(0deg); 
  animation: oiseau-d-01-corps-anim 1s ease-in-out infinite;
}
.oiseau-d-01 .queue img { height: 100%; width: auto; display: block; }

@keyframes oiseau-d-01-queue-anim {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}




/* - - - - - - - - - Fleurs */
/* - - - - - - - - - Fleurs */
/* - - - - - - - - - Fleurs */
.fleurs-g-01 {
  position: absolute; top:40%; left:-5%; z-index:500;
  transform: translate(0%, -50%);
  height: 100%;    
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  pointer-events: none; 
  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}
.fleurs-g-01 img { height: 100%; width: auto; display: block; }


.fleurs-g-02 {
  position: absolute; top:40%; left:0%; z-index:250;
  transform: translate(0%, -50%);
  height: 82%;    
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  pointer-events: none; 
  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}
.fleurs-g-02 img { height: 100%; width: auto; display: block; }


.fleurs-d-01 {
  position: absolute; top:50%; left:47%; z-index:500;
  height: 100%;    
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform: translate(0%, -50%);
  pointer-events: none; 
  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}
.fleurs-d-01 img { height: 100%; width: auto; display: block; }


.fleurs-d-02 {
  position: absolute; top:50%; left:44%; z-index:250;
  height: 71%;    
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  transform: translate(0%, -50%);
  pointer-events: none; 
  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}
.fleurs-d-02 img { height: 100%; width: auto; display: block; }










/* - - - - - - - - - Dégradés */
/* - - - - - - - - - Dégradés */
/* - - - - - - - - - Dégradés */
.degrade-g-01 {
  position: absolute; top:50%; left:0%; z-index:3000;
  transform: translate(0%, -50%);
  height: 100%;    
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  pointer-events: none;
}
.degrade-g-01 img { height: 100%; width: auto; display: block; }

.degrade-d-01 {
  position: absolute; top:50%; left:50%; z-index:3000;
  transform: translate(0%, -50%);
  height: 100%;    
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  pointer-events: none;
}
.degrade-d-01 img { height: 100%; width: auto; display: block; }




/* - - - - - - - - - Buissons */
/* - - - - - - - - - Buissons */
/* - - - - - - - - - Buissons */
.buisson-g-01 {
  position: absolute; top:0%; left:0%; z-index:125;
  height: 100%;    
  transform-origin: top left;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}
.buisson-g-01 img { height: 100%; width: auto; display: block; }


.buisson-d-01 {
  position: absolute; top:0%; right:0%; z-index:125;
  height: 100%;    
  transform-origin: top left;
  display: flex; align-items: center; justify-content: center;
  transition: 0.25s ease;
  pointer-events: none;
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}
.buisson-d-01 img { height: 100%; width: auto; display: block; }



/* - - - - - - - - - Feuilles */
/* - - - - - - - - - Feuilles */
/* - - - - - - - - - Feuilles */

/* - - - Feuille Droite */
/* - - - Feuille Droite */
/* - - - Feuille Droite */
.feuilles-d-wrapper {
  position: absolute; top:50%; left:50%; z-index:2000;
  width:100%; height:100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}

.feuille-d-01 {
  position: absolute; top:-6%; left:52%; height:20%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-01 img { height: 100%; width: auto; display: block; }

.feuille-d-02 {
  position: absolute; top:-3%; left:63%; height:17%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-02 img { height: 100%; width: auto; display: block; }


.feuille-d-03 {
  position: absolute; top:-14%; left:75%; height:42%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-03 img { height: 100%; width: auto; display: block; }

.feuille-d-04 {
  position: absolute; top:3%; left:82%; height:16%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-04 img { height: 100%; width: auto; display: block; }

.feuille-d-05 {
  position: absolute; top:28%; left:89%; height:17%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-05 img { height: 100%; width: auto; display: block; }

.feuille-d-06 {
  position: absolute; top:35%; left:89%; height:21%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-06 img { height: 100%; width: auto; display: block; }

.feuille-d-07 {
  position: absolute; top:41%; left:86%; height:33%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-07 img { height: 100%; width: auto; display: block; }

.feuille-d-08 {
  position: absolute; top:75%; left:79%; height:38%; z-index:2010;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-08 img { height: 100%; width: auto; display: block; }

.feuille-d-09 {
  position: absolute; top:79%; left:79%; height:33%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-09 img { height: 100%; width: auto; display: block; }

.feuille-d-10 {
  position: absolute; top:80%; left:68%; height:36%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom left;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-10 img { height: 100%; width: auto; display: block; }

.feuille-d-11 {
  position: absolute; top:74%; left:53%; height:42%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-d-11 img { height: 100%; width: auto; display: block; }


/* - - - Feuille Gauche */
/* - - - Feuille Gauche */
/* - - - Feuille Gauche */
.feuilles-g-wrapper {
  position: absolute; top:50%; left:50%; z-index:2000;
  width:100%; height:100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.45));
}

.feuille-g-01 {
  position: absolute; top:-8%; left:30%; height:27%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-01 img { height: 100%; width: auto; display: block; }


.feuille-g-02 {
  position: absolute; top:-9%; left:19%; height:19%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top left;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-02 img { height: 100%; width: auto; display: block; }

.feuille-g-03 {
  position: absolute; top:-9%; left:10%; height:30%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top left;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-03 img { height: 100%; width: auto; display: block; }

.feuille-g-04 {
  position: absolute; top:-5%; left:-4%; height:20%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top left;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-04 img { height: 100%; width: auto; display: block; }

.feuille-g-05 {
  position: absolute; top:20%; left:-10%; height:33%; z-index:2010;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom left;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-05 img { height: 100%; width: auto; display: block; }

.feuille-g-06 {
  position: absolute; top:43%; left:-5%; height:37%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: top left;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-06 img { height: 100%; width: auto; display: block; }

.feuille-g-07 {
  position: absolute; top:80%; left:2%; height:30%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-07 img { height: 100%; width: auto; display: block; }

.feuille-g-08 {
  position: absolute; top:66%; left:11%; height:44%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-08 img { height: 100%; width: auto; display: block; }

.feuille-g-09 {
  position: absolute; top:76%; left:21%; height:40%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-09 img { height: 100%; width: auto; display: block; }

.feuille-g-10 {
  position: absolute; top:81%; left:35%; height:30%; z-index:2000;
  display: flex; align-items: center; justify-content: center;
  transform-origin: bottom right;
  transform: rotate(0deg); 
  transition: 0.25s ease;
}
.feuille-g-10 img { height: 100%; width: auto; display: block; }