/*
Theme Name: WPMS - IRIHS
Theme URI: 
Author: Pole Numérique - IRIHS
Author URI: 
Description: 
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: neve-fse
Text Domain: wpms-irihs
Tags: 
*/

/* === Carrousel Gutenberg (corrigé) === */

/* Conteneur principal du carrousel */
.carrousel {
  position: relative;
  width: 100%;          /* on reste dans la largeur de la zone de contenu */
  overflow: hidden;
  height: 380px;
}

/* Piste contenant les slides */
.carrousel-images {
  display: flex;
  width: 300%;          /* 3 slides -> 3 x 100% de .carrousel */
  height: 100%;
  animation: carrouselSlide 9s infinite;
  animation-timing-function: ease-in-out;
}

/* Chaque image (slide) */
.carrousel-images img {
  width: 100%;          /* chaque image prend 100% de la largeur du carrousel */
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Animation : on travaille en pourcentage du conteneur, pas en vw */
@keyframes carrouselSlide {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(0); }

  33.33% { transform: translateX(-100%); }
  63.33% { transform: translateX(-100%); }

  66.66% { transform: translateX(-200%); }
  96.66% { transform: translateX(-200%); }

  100% { transform: translateX(0); }
}

/* Pause au survol (desktop) */
.carrousel:hover .carrousel-images {
  animation-play-state: paused;
}

/* ---- Flèches de navigation ---- */

.carrousel-precedent,
.carrousel-suivant {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  font-size: 20px;
  line-height: 1;
}

/* Position gauche / droite */
.carrousel-precedent {
  left: 15px;
}

.carrousel-suivant {
  right: 15px;
}

/* Effet hover sur flèches */
.carrousel-precedent:hover,
.carrousel-suivant:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .carrousel {
    height: 260px;
  }
}