@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300&family=Source+Sans+Pro:wght@400;600&display=swap');

body {
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

h1, h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400; /* très léger et poétique */
  letter-spacing: 0.05em; /* léger espacement pour lisibilité */
  margin: 0;
}

em {
  font-style: normal; /* supprime l'italique */
  /*font-weight: bold;*/  /* optionnel, pour accentuer l’importance */
  /*color: #fff;*/       /* tu peux choisir une couleur si tu veux */
}

.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slides {
  position: relative;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texte animé : fade + slide latéral */
.slide-text {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 0%); 
  text-align: center;
  color: #fff;
  opacity: 0;
  filter: blur(3px); /* flou initial */
  transition: opacity 2s ease, transform 2s ease, filter 2s ease;

  
  /* background: rgba(255, 255, 255, 0.2); /* noir semi-transparent 
  padding: 0rem 1rem;
  border-radius: 5px;*/
}

.slide.active .slide-text {
  transform: translate(-50%, -5%); 
  opacity: 1;
  filter: blur(0); /* devient net */
}

  .slide-text h2 { font-size: clamp(1rem, 5vw, 2rem); }

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.3);
  color: #fff;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  font-size: 2rem;
  z-index: 10;
}

.prev { left: 15px; }
.next { right: 15px; }

.prev:hover, .next:hover {
  background: #cccccc;
}

.overlay {
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 20;

  /*background: rgba(255, 255, 255, 0.2); /* noir semi-transparent 
  padding: 0.2rem 2rem 2rem 2rem;
  border-radius: 30px;*/
}

.overlay h1 { font-size: clamp(1.5rem, 6vw, 4rem); margin-bottom: 0.5rem; }
.overlay h2 { font-size: clamp(1rem, 4vw, 2rem); margin-bottom: 1rem; }

.btn {
  display: inline-block;
  padding: 12px 28px;
  background: #cccccc;
  color: #000;
  text-decoration: none;
  border-radius: 30px;
  font-size: 1rem;
  transition: 0.3s;
  animation: btn-bounce 2s infinite; /* animation subtile */
}

.btn:hover { background: #ffffff; }

.overlay .btn {
  margin-top: 20px; /* espace entre le h2 et le bouton */
}

.scroll-indicator {
  position: absolute;       /* place la flèche par rapport à l’écran */
  bottom: 20px;             /* légèrement au-dessus du bas de l’écran */
  left: 50%;
  transform: translateX(-50%) rotate(45deg); /* centrer et orienter */
  width: 24px;
  height: 24px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  z-index: 25;              /* au-dessus de l’overlay */
  animation: bounce 1.5s infinite;
  opacity: 0.8;             /* discrète */
  transition: opacity 0.5s ease; /* disparition / réapparition douce */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0) rotate(45deg); }
  40% { transform: translateX(-50%) translateY(6px) rotate(45deg); }
  60% { transform: translateX(-50%) translateY(3px) rotate(45deg); }
}

/* Keyframes pour vibration subtile */
@keyframes btn-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); } /* très léger rebond */
}

/* Texte SEO sous le slider */
.intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #d1d1d1;
  overflow: hidden; /* masque le glissement initial */
}

.intro-inner {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform;
}

.intro-inner.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro p {
  margin: 0;           /* supprime tout l'espace vertical */
  line-height: 1.6;    /* contrôle l'interligne à l'intérieur du paragraphe */
}

/* Responsive */
@media (max-width: 768px) {
  .slide:nth-child(1) img { object-position: 50% 50%; }
  .slide:nth-child(2) img { object-position: 50% 50%; }
  .slide:nth-child(3) img { object-position: 50% 50%; }
  .slide:nth-child(4) img { object-position: 55% 50%; }
  .slide-text h2 { font-size: 1.2rem; }
  .overlay h1 { font-size: 2rem; }
  .overlay h2 { font-size: 1.2rem; }
  .btn { padding: 10px 20px; font-size: 0.9rem; }

  .scroll-indicator {
    width: 20px;      /* légèrement plus petit que sur desktop */
    height: 20px;
    bottom: 18px;     /* légèrement plus proche du bas */
    border-width: 1.8px;
  }

  .prev, .next { padding: 10px; font-size: 1.8rem; }
  .intro { font-size: 1rem; line-height: 1.5; }   
}

@media (max-width: 480px) {
  .slide:nth-child(1) img { object-position: 50% 50%; }
  .slide:nth-child(2) img { object-position: 45% 50%; }
  .slide:nth-child(3) img { object-position: 40% 50%; }
  .slide:nth-child(4) img { object-position: 65% 50%; }
  .slide-text h2 { font-size: 1rem; }
  .overlay h1 { font-size: 1.5rem; }
  .overlay h2 { font-size: 1rem; }
  .btn { padding: 8px 16px; font-size: 0.9rem; }
  
  .scroll-indicator {
    width: 15px;
    height: 15px;
    bottom: 15px;
    border-width: 1.5px;
  }

  .prev, .next { padding: 8px; font-size: 1.5rem; }
  .intro { font-size: 0.9rem; line-height: 1.4; }
}

/* Paysage mobile : ajustement pour éviter que l'image soit coupée */
@media (min-width: 480px) and (max-width: 1024px) and (orientation: landscape) {
  /* --- SLIDER GENERAL --- */
  .slider {
    position: relative;   /* sert de référence pour le texte et les boutons */
    height: auto;         /* la hauteur suit l’image active */
    min-height: 100vh;    /* au moins hauteur écran */
    overflow: visible;    /* autorise le débordement en bas */
  }

  .slides {
    position: relative;
    height: auto;
  }

  /* --- SLIDES --- */
  .slide {
    position: absolute;    /* superposés */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .slide.active {
    opacity: 1;
    position: relative;    /* seule l’image active prend la place */
  }

  .slide img {
    width: 100%;
    height: auto;          /* pas de crop */
    object-fit: contain;   /* image entière */
    display: block;
  }

  /* --- TEXTE SUR LE SLIDE --- */
  .slide-text {
    position: absolute;
    top: 60%;          /* place le haut de l’élément au milieu du conteneur */
    left: 50%;         /* place la gauche de l’élément au milieu du conteneur */
    transform: translate(-50%, 0%); 
    /* 
      - translateX(-50%) : recule l’élément de la moitié de sa largeur pour le centrer horizontalement 
      - translateY(-50%) : recule l’élément de la moitié de sa hauteur pour le centrer verticalement
      => Résultat : l’élément est parfaitement centré au milieu du slide 
    */
    text-align: center;
    color: #fff;
    opacity: 0;
    filter: blur(3px);
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
    z-index: 15;
    will-change: opacity, transform;
  }

  /* --- BOUTONS PREV/NEXT --- */
  .prev, .next {
    position: absolute;
    top: 50vh;             /* milieu de l’écran */
    transform: translateY(-50%);
    z-index: 10;
  }
  .slide-text h2 { font-size: 1rem; }
  .overlay h1 { font-size: 1.5rem; }
  .overlay h2 { font-size: 1rem; }
  .btn { padding: 8px 16px; font-size: 0.9rem; }
  
  .scroll-indicator {
    width: 15px;
    height: 15px;
    bottom: 15px;
    border-width: 1.5px;
  }

  .prev, .next { padding: 8px; font-size: 1.5rem; }
  .intro { font-size: 0.9rem; line-height: 1.4; }
}



@media (min-width: 1025px) {

  body::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, Edge */
}

  /* --- SLIDER GENERAL --- */
  .slider {
    position: relative;   /* sert de référence pour le texte et les boutons */
    height: auto;         /* la hauteur suit l’image active */
    min-height: 100vh;    /* au moins hauteur écran */
    overflow: visible;    /* autorise le débordement en bas */
  }

  .slides {
    position: relative;
    height: auto;
  }

  /* --- SLIDES --- */
  .slide {
    position: absolute;    /* superposés */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .slide.active {
    opacity: 1;
    position: relative;    /* seule l’image active prend la place */
  }

  .slide img {
    width: 100%;
    height: auto;          /* pas de crop */
    object-fit: contain;   /* image entière */
    display: block;
  }

  /* --- TEXTE SUR LE SLIDE --- */
  .slide-text {
    position: absolute;
    top: 60%;          /* place le haut de l’élément au milieu du conteneur */
    left: 50%;         /* place la gauche de l’élément au milieu du conteneur */
    transform: translate(-50%, 0%); 
    /* 
      - translateX(-50%) : recule l’élément de la moitié de sa largeur pour le centrer horizontalement 
      - translateY(-50%) : recule l’élément de la moitié de sa hauteur pour le centrer verticalement
      => Résultat : l’élément est parfaitement centré au milieu du slide 
    */
    text-align: center;
    color: #fff;
    opacity: 0;
    filter: blur(3px);
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
    z-index: 15;
    will-change: opacity, transform;
  }

  /* --- BOUTONS PREV/NEXT --- */
  .prev, .next {
    position: absolute;
    top: 50vh;             /* milieu de l’écran */
    transform: translateY(-50%);
    z-index: 10;
  }
}