/* mobile-suggests.css */
.carousel-wrapper {
    position: relative;
}

/* 1. RÉINITIALISATION DU RUBAN (#suggest-container) */
#suggest-container {
    width: 1200%; 
    
    display: flex;
    flex-wrap: nowrap; /* Maintient les 12 cartes sur une seule ligne */
    justify-content: flex-start; /* Important pour l'alignement */
    gap: 23px;
    
    /* Retire les propriétés redondantes ou incorrectes sur le ruban */
    max-width: none; /* Laissez la largeur de 300% s'appliquer */
    
    transition: transform 0.5s ease-in-out; /* Maintenez la transition */
}

/* 2. RÉINITIALISATION DES CARTES (.carte-article) */
#suggest-container > .carte-article {
    /* Largeur complète */
    flex: 0 0 100%; 
    max-width: none; 
    width: 100%;
    
    /* Simuler l'espacement entre les articles */
    margin-bottom: 23px;
    
    /* La hauteur de chaque carte doit être dynamique, mais le JS devra la mesurer */
}

/* 3. RÉACTIVER LA FENÊTRE (.carousel-viewport) */
.carousel-viewport {
    /* Limiter la hauteur pour n'afficher que 3 articles à la fois */
    /* La hauteur exacte sera calculée en JS, mais nous devons limiter le débordement */
    max-height: 1200px; /* Valeur générique, le JS va mesurer */
    overflow: hidden; /* C'est lui qui cache les cartes qui débordent */
    
    /* Réduire le padding de la fenêtre pour le mobile */
    padding: 0 calc((100% - 330px) / 2);
    margin: 20px auto 0;
}

/* Style commun aux deux boutons */
#prev-btn,
#next-btn {
    /* Style de base */
    background-color: rgba(255, 255, 255, 0.5);
    color: #D30546;
    border: 2px solid #D30546;
    cursor: pointer;
    
    /* Taille et forme (cercle) */
    width: 40px; 
    height: 40px; 
    border-radius: 50%; /* Rendre le bouton circulaire */
    padding: 0;
    margin: 0 10px;
    
    /* Centrage de l'icône SVG à l'intérieur du bouton */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Ombre subtile */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.2s, transform 0.2s, opacity 0.2s ease, visibility 0.2s ease;
    
    position: absolute; /* ⬅️ Positionnement par rapport au .carousel-wrapper */
    top: 30%; /* Centre verticalement */
    /*transform: translateY(-50%); /* Ajustement précis du centrage vertical */
    z-index: 10; /* Assure que les boutons sont au-dessus des cartes */
}

/* Style pour les boutons désactivés (quand on est au début/fin) */
#prev-btn:disabled,
#next-btn:disabled {
    opacity: 0; /* ⬅️ Fait disparaître progressivement le bouton (transition animée) */
    visibility: hidden; /* ⬅️ Assure que le bouton n'est plus cliquable une fois transparent */
    background: transparent; /* Optionnel : pour que le fond disparaisse aussi */
    cursor: default; /* Change le curseur */
}

#prev-btn {
    left: 0; /* Alignement à l'extrême gauche du wrapper */
}

#next-btn {
    right: 0; /* Alignement à l'extrême droite du wrapper */
}