/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: black;
  font-family: Verdana; }
  h1 {
    padding: 10px;
     border-radius: 8px;
     margin: 10 auto;
    background-color: black;
    animation: couleur 3s infinite alternate;
    }
    .h1 {text-align: center; }
    
    .titre { text-align: center;
  background-color: rgba(255, 255, 0, 0.7); /* jaune semi-transparent */
  padding: 10px 20px;   /* espace autour du texte */
  border-radius: 8px;   /* angles arrondis */
  display: inline-block; /* pour que le fond suive seulement le texte */
}



      @keyframes couleur {
         0%   { color: red; }
         50%  { color: blue; }
         100% { color: yellow; }
        }
      
      p {
        color: white; } 
        
        #p1 { color: grey; 
        font-size: 2rem;
        position: fixed;
        bottom: 95px;
        right: 50px; }
        
      
        
      .smiley {
  position: fixed;
  bottom: 10vh;
  right: 5vw;
  width: 200px;
  height: auto;

  display: flex;
  flex-direction: column;     /* yeux en haut, bouche en bas */
  align-items: center;        /* centre horizontalement */
  justify-content: flex-start; /* espace entre yeux et bouche */
  gap: 3px;
}

.face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: -10px; /* espace entre les yeux et la bouche */
}

.eyes {
  display: flex;
  justify-content: center;
  gap: 20%;
  width: 100%;
}

.eyes img {
  width: 30%;
  height: auto;
}

.mouth {
  width: 60%;
  margin-top: -30px;
}

      #div4 {
      left: 0;
      }

      #div5 {
       right: 0;
       transform: scaleX(-1);
      }


       
       #div6 {
         position: fixed;
         bottom: 0px;
         left: -40px;
       }
       
       .center {
  position: fixed;
  top: 50%;      /* place le coin supérieur gauche au milieu */
  left: 50%;
  transform: translate(-50%, -50%); /* décale de moitié la largeur et la hauteur */
  text-align: center;
}

.center img {
  max-width: 80%; 
  height: auto;
}
       
          .foret {
  position: fixed;
  top: 0;
  bottom: 0;       /* occupe toute la hauteur de l’écran */
  width: 50vw;     /* chaque forêt prend la moitié de l’écran */
  height: 70vh;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.foret img {
  width: 110%;   /* étire un peu en largeur */
  height: 70%;  /* étire verticalement */
  object-fit: fill; /* déforme si nécessaire */
}

       
     .traverse {
  display: inline-block;       /* nécessaire pour appliquer la rotation */
  transform: rotate(-15deg);   /* angle en degrés, négatif = penché à gauche */
}
       
       #p2 { color: yellow;
         position: fixed;
         right: 45%;
         bottom: 45%;
       }
  
      .viewport {
  position: fixed;   /* colle à l’écran */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;  /* rien ne peut déborder */
}

#Clown {
  position: absolute;
  transition: opacity 2s;
  opacity: 0; /* départ invisible */
}

#Clown.visible {
  opacity: 1;
}
    
    .clown-falling.tremblotte {
  animation: fall 5s linear forwards, shake 0.3s infinite;
}
    
    .tremblotte {
      display: inline-block;
      animation: shake 0.3s infinite; }
      
      .responsive-img {
  max-width: 80%;
  height: auto;
}
      
@keyframes shake {
      0% { transform: translate(1px, 1px) rotate(0deg); }
      20% { transform: translate(-1px, -2px) rotate(-1deg); }
      40% { transform: translate(-3px, 0px) rotate(1deg); }
      60% { transform: translate(3px, 2px) rotate(0deg); }
      80% { transform: translate(1px, -1px) rotate(1deg); }
      100% { transform: translate(-1px, 2px) rotate(-1deg); }
    }
    
    .defile {
  position: absolute;
  top: 50px;                  /* hauteur où elle passe */
  left: 100%;                 /* commence à droite de l’écran */
  animation: slide 5s linear infinite;
}

@keyframes slide {
  from { transform: translateX(0); }      /* tout à droite */
  to   { transform: translateX(-200vw); } /* traverse et repart de l'autre côté */
}

/* Le conteneur limite la largeur */
.ribambelle-container {
  position: fixed;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: hidden;  /* 🚫 empêche le débordement */
  z-index: 1;
}

/* Placement vertical de chaque conteneur */
.top1    { top: 100px; }
.top2    { top: 0; }
.bottom1 { bottom: 100px; }
.bottom2 { bottom: 0; }

/* La ribambelle défile à l’intérieur */
.ribambelle, .ribambelle2, .ribambelle3, .ribambelle4 {
  width: 200%;
  height: 100%;
  background: url("Clown.png") repeat-x;
  background-size: 100px auto;
}

/* Animations */
.ribambelle   { animation: scroll 10s linear infinite; }
.ribambelle2  { animation: scroll 20s linear infinite; }
.ribambelle3  { animation: scroll-inverse 10s linear infinite; }
.ribambelle4  { animation: scroll-inverse 20s linear infinite; }

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes scroll-inverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
      
      .tourne {
  display: inline-block;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.clown-falling { z-index: 0;
  position: absolute;
  top: -150px;              /* démarre hors de l’écran */
  width: 100px;
  animation: fall 5s linear forwards;
}

@keyframes fall {
  from { top: -150px; }
  to   { top: 100vh; }      /* descend jusqu’en bas de l’écran */
}