/* Fichier : css/style-slider.css */
/* VERSION FINALE AVEC CORRECTION DE L'OVERLAP */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap');





/* -------------------------------------------------------------------------- */
/* SLIDER – Nom + Badge promo (Lauren en dessous du nom, visible pour tous)  */
/* -------------------------------------------------------------------------- */

/* utilitaire : caché par défaut (retiré par JS) */
.hidden{ display:none !important; }

/* Conteneur (empile nom puis badge) */
.creator-name-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    margin-bottom:24px;
}

/* Ligne du nom avec traits */
.name-row{ display:flex; align-items:center; gap:12px; }
.name-decorator-line{ width:40px; height:1px; background:#fff; opacity:.4; }
.creator-name-link{
    font-family:"Montserrat",sans-serif;
    font-style:italic;
    font-weight:400;
    font-size:1.5rem;
    color:#fff;
    text-decoration:none;
    transition:opacity .2s ease;
}
.creator-name-link:hover{ opacity:.8; }
.creator-name-link.requires-login{ cursor:not-allowed; }

/* Badge promo (ligne 2) */
.promo-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#e50043;
    color:#fff;
    padding:6px 20px;
    border-radius:20px;
    font-size:.975rem;
    font-weight:600;
    line-height:1.1;
    box-shadow:0 4px 12px rgba(0,0,0,.15);

    position:relative;  /* au-dessus d’éventuels overlays */
    z-index:99999;
}
.promo-badge .icon{ font-size:1rem; line-height:1; }
.promo-badge span:not(.icon){ display:block; text-align:center; }

/* Neutralise d’éventuels voiles ajoutés aux éléments "requires-login" */
.swiper-slide-content.requires-login::after,
.swiper-slide-content.requires-login::before,
.creator-name-link.requires-login::after,
.creator-name-link.requires-login::before{
    content:none !important;
}

/* Option thème clair (si besoin) */
body.light-theme .name-decorator-line{ background:#000; opacity:.3; }
body.light-theme .creator-name-link{ color:#000; }
body.light-theme .promo-badge{ background:#ff0055; color:#fff; }








































/* ============================================= */
/* STYLES GÉNÉRAUX DU SLIDER */
/* ============================================= */
.creator-name-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 20px; 
}

.name-decorator-line { 
    height: 1px; 
    width: 45px; 
    background-color: #ffffff; 
}

#creator-name-display { 
    font-family: 'Poppins', sans-serif; 
    font-size: 32px; 
    font-weight: 300; 
    font-style: italic; 
    text-decoration: none; 
    color: #FFFFFF; 
    transition: color 0.3s ease; 
}

#creator-name-display:hover { 
    color: #CFAF8D; 
}

.swiper-container-wrapper { 
    width: 100%; 
}

.mySwiper { 
    position: relative; 
    width: 100%; 
    max-width: 1024px; 
    margin: 0 auto; 
    /* MODIFIÉ : Ajout de padding horizontal pour donner de l'air aux slides excentrées */
    padding: 10px 40px 15px 40px; 
    box-sizing: border-box; /* Assure que le padding est inclus dans la largeur */
}

/* ============================================= */
/* STYLES DES SLIDES (AVEC FIX OVERLAP) */
/* ============================================= */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    max-width: 450px;
    border-radius: 32px;
    overflow: hidden;
    /* MODIFIÉ : La transition est maintenant sur toutes les slides */
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* La slide active n'a plus besoin de scale, juste l'ombre */
.swiper-slide-active {
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.swiper-slide-content { 
    width: 100%; 
    border-radius: 32px;
    overflow: hidden;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.35;
    /* On enlève le box-shadow d'ici pour le mettre sur la slide active */
    transition: transform 0.3s ease;
}

/* ============================================= */
/* STYLES DE LA PAGINATION (FIX CENTRAGE ET STYLE) */
/* ============================================= */
.creator-slider-container {
    position: relative;
    padding-bottom: 40px; /* Espace pour la pagination positionnée en absolu */
}

.creator-slider-container .swiper-pagination {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    display: flex; /* Utilise flex pour l'alignement et l'espacement des puces */
    gap: 8px; /* Espace entre les puces */
}

/* Style des puces (inactives) */
.creator-slider-container .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Style de la puce active (avec la bonne couleur) */
.creator-slider-container .swiper-pagination-bullet-active {
    width: 25px;
    background-color: #CFAF8D; /* Votre couleur personnalisée */
    opacity: 1;
    border-radius: 10px;
}

/* Règle pour masquer la pagination si nécessaire (inchangée) */
.creator-slider-container.hide-pagination .swiper-pagination {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin-top: 0;
}

/* ============================================= */
/* STYLES RESPONSIVES */
/* ============================================= */
@media (max-width: 767px) {
  .swiper-slide { 
      width: 65%; 
  }
  .swiper-slide img { 
      aspect-ratio: 1 / 1.20; 
  }
  #creator-name-display { 
      font-size: 22px; 
  }
  .name-decorator-line { 
      width: 32px; 
  }
}