.content-slider-wrapper {
  position: relative;
  max-width: 1800px;
  border-radius: 12px;
  overflow: hidden;
}

.content-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1800 / 430; /* Typical banner ratio */
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45), inset 0 0 16px rgba(255,255,255,0.12);
}

.content-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%; /* S'assure de prendre toute la hauteur du wrapper */
  align-items: stretch; /* Force les enfants à s'étirer */
}

.content-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.content-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 100%;
  display: block; /* AJOUTE CECI pour supprimer l'espace sous l'image */
  vertical-align: middle; /* Sécurité supplémentaire */
}
.content-prev, .content-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: white; /* On définit une base blanche */
  mix-blend-mode: difference; /* C'est la ligne magique */
  background: transparent; 
  backdrop-filter: none; 
  box-shadow: none;
}
}
.content-prev:hover, .content-next:hover {
  transform: translateY(-55%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 0 18px rgba(255,255,255,0.2);
}
.content-prev { left: 10px; }
.content-next { right: 10px; }

/* Conteneur principal gérant l'alignement */
.dual-carousel-layout {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* Un à gauche, un à droite */
  align-items: center;
  width: 100%;
  max-width: 1800px; /* Aligné sur votre max-width existant */
  gap: 20px;
}

.custom-slider-block {
  flex: 1; /* Les deux sliders prennent la même largeur */
  max-width: 500px; /* Limite pour garder un format 4:5 élégant */
  position: relative;
  margin-bottom: 3em;
}

.slider-viewport {
  position: relative;
  aspect-ratio: 4 / 5; /* Format demandé */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
  background: #111;
}

.slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.slider-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 100%;
  transition: opacity 0.5s ease; /* Transition simple et propre */
}

/* Boutons de navigation (Mix-blend-mode comme votre slider existant) */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 10;
  mix-blend-mode: difference; /* Garde le style de votre fichier ads.css */
}

.slider-nav.prev { left: 10px; }
.slider-nav.next { right: 10px; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .dual-carousel-layout {
    flex-direction: column; /* L'un sur l'autre sur mobile/tablette */
    gap: 0px;
  }
  .slider-title {
    margin-top: 0em; !important
  }
  
  .custom-slider-block {
    width: 100%;
    max-width: 400px; /* Taille adaptée pour le mobile */
  }
}
h4 {
        font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  color: var(--font);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: 2em
    }
    h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: justify;
  margin-bottom: 1em;
  font-size: 1.2em;
  color: var(--font);
    }

.mailing-slider-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.mailing-slider {
  position: relative;
  width: 100%;
  max-width: 475px;
  margin: 0 auto;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
}

.mailing-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Animation du glissement */
  align-items: flex-start;
}

.mailing-track img {
  width: 100%;
  max-width: 475px;
  flex: 0 0 100%;
  height: auto;
  display: block;
}

.mailing-track img.active {
  display: block; /* Seule l'image active occupe de l'espace */
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
  :root[data-theme="light"]
{
  --main-logo-blob: rgb(254, 97, 76);
}
 :root[data-theme="dark"]
{
  --main-logo-blob: rgb(255, 255, 255);
}
.twitch-blobs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  pointer-events: none;
  z-index: 0;
}

.twitch-blob {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 38%, #fed949 0%, #fe614c 52%, transparent 75%);
}

#twitch-blob-1 {
  width: 55vw;
  left: 5%;
  top: 85%;       /* haut gauche */
  opacity: 0.30;
  filter: blur(4px) url(#twitch-blob-filter-1);
  animation: twitch-drift-1 20s ease-in-out infinite;
}

#twitch-blob-2 {
  width: 35vw;
  left: 85%;
  top: 138%;      /* haut droite */
  opacity: 0.22;
  filter: blur(5px) url(#twitch-blob-filter-2);
  animation: twitch-drift-2 26s ease-in-out -6s infinite;
}

#twitch-blob-3 {
  width: 45vw;
  left: 20%;
  top: 256%;      /* milieu gauche */
  opacity: 0.20;
  filter: blur(6px) url(#twitch-blob-filter-3);
  animation: twitch-drift-3 22s ease-in-out -11s infinite;
}

#twitch-blob-4 {
  width: 50vw;
  left: 78%;
  bottom: 100%;      
  opacity: 0.18;
  filter: blur(7px)url(#twitch-blob-filter-4);
  animation: twitch-drift-4 28s ease-in-out -4s infinite;
}

#twitch-blob-5 {
  width: 40vw;
  left: 35%;
  bottom: 20%;      /* bas centre */
  opacity: 0.22;
  filter: blur(4px) url(#twitch-blob-filter-5);
  animation: twitch-drift-1 18s ease-in-out -9s infinite;
}

@keyframes twitch-drift-1 {
  0%   { translate: 0px 0px; }
  20%  { translate: 8px -5px; }
  40%  { translate: -6px 9px; }
  60%  { translate: 10px 4px; }
  80%  { translate: -5px -8px; }
  100% { translate: 0px 0px; }
}
@keyframes twitch-drift-2 {
  0%   { translate: 0px 0px; }
  25%  { translate: -9px 6px; }
  50%  { translate: 7px -10px; }
  75%  { translate: -4px 8px; }
  100% { translate: 0px 0px; }
}
@keyframes twitch-drift-3 {
  0%   { translate: 0px 0px; }
  30%  { translate: 9px 5px; }
  55%  { translate: -8px -6px; }
  80%  { translate: 5px 10px; }
  100% { translate: 0px 0px; }
}
@keyframes twitch-drift-4 {
  0%   { translate: 0px 0px; }
  20%  { translate: -6px -9px; }
  45%  { translate: 10px 4px; }
  70%  { translate: -5px 7px; }
  100% { translate: 0px 0px; }
}
body {
  overflow-x: hidden;
}
@media (max-width: 768px) {
  .twitch-blobs {
    overflow-x: hidden;
  }
}