/*
 Theme Name:   Aventure
 Template:     Divi
*/

/* Personnalisations CSS */

/* Inverser l'ordre des colonnes sur tablette et mobile */
@media (max-width: 980px) {
  .reverse {
    display: flex !important;
    flex-direction: column-reverse;
  }
}

/* Reglage probleme marge bouton carrousel divi pixel */
.dipi_carousel_child .dipi-carousel-item-desc {
    margin-bottom: 0px !important;
}

.dipi_carousel_child .dipi-carousel-item-content {
    padding: 15px !important;
}

/* ======================================================
   DOUBLE MARQUEE – VERSION FINALE PRO
   ====================================================== */

:root{
  --space: 24px; /* 🔥 espace UNIQUE : boutons + lignes */
}

/* Conteneur global */
.double-marquee{

  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: var(--space); /* même espace que les boutons */
}

/* Ligne marquee */
.marquee{
  position: relative;
  overflow: hidden;
  display: flex;
}

/* Track (dupliquée pour boucle parfaite) */
.marquee__track{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
  animation-name: marquee-move;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  padding-right: var(--space); /* respiration boucle */
}

/* VITESSES */
.marquee--slow .marquee__track{
  animation-duration: 60s;
}
.marquee--slower .marquee__track{
  animation-duration: 80s;
}

/* Espacement ENTRE les boutons */
.marquee__track > *{
  margin-right: var(--space);
}
.marquee__track > *:last-child{
  margin-right: 0;
}

/* Style des boutons */
.marquee span{
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  font-size: 14px;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Animation (même sens pour les deux lignes) */
@keyframes marquee-move{
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Fondu noir sur les côtés */
.marquee{
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}


/* Listes à puces */
.liste li + li {
    margin-top: 20px;
}


/* Espacement au-dessus de chaque puce */
.liste2 li {
    margin-top: 20px;
}