/* 1. NOUVEAU CONTENEUR WRAPPER */
.carousel-wrapper {
    /* Le wrapper définit la zone de positionnement des flèches */
    position: relative; 
    
    /* Assure que la largeur du wrapper correspond à la fenêtre */
    max-width: 1200px;
    margin: 0 auto; 
}

/* NOUVEAU : Le Conteneur de Fenêtre (VIEWPORT) */
.carousel-viewport {
    max-width: 1200px; /* Limite la fenêtre à votre taille souhaitée */
    width: 100%;
    margin: 0 auto; /* Centrage */
    overflow: hidden; /* C'est LUI qui cache les cartes qui dépassent */
    margin-top: 20px;
    padding: 0;
    /* Ajoutez une petite marge sous le viewport si nécessaire pour l'espace */
}

/* L'Ancien Conteneur (Le RUBAN de Cartes) */
#suggest-container {
    /* CORRECTION CRITIQUE : Définit la largeur totale du ruban (3 pages x 100%) */
    width: 300%; 
    
    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 */
    margin: 0; /* Pas besoin de centrage, le parent s'en charge */
    
    transition: transform 0.5s ease-in-out; /* Maintenez la transition */
}

/* Les Cartes (INCHANGÉ, mais doit être correct) */
#suggest-container > .carte-article {
    max-width: calc( (100% / 12) - (17.25px / 3) );
    
    box-sizing: border-box; 
    display: flex;
}

/* Conteneur des boutons pour un positionnement flexible (optionnel) */
.carousel-controls {
    display: flex;
    justify-content: center; /* Centre les boutons si nécessaire */
    gap: 20px; /* Espace entre les deux boutons */
    margin-top: 20px; /* Espacement avec le carrousel */
}

/* 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;
    
    /* 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: 35%; /* Centre verticalement */
    /*transform: translateY(-50%); /* Ajustement précis du centrage vertical */
    z-index: 10; /* Assure que les boutons sont au-dessus des cartes */
}

/* Effets de survol */
#prev-btn:hover,
#next-btn:hover {
    background: rgba(211, 5, 70, 0.2); /* Bleu plus foncé au survol */
    transform: scale(1.05);
}

/* 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 */
}