/* ==========================================================================
   prop_list — Style de liste : one_line
   Affiche les cartes sur une seule ligne horizontale avec défilement.
   Les flèches de navigation (scroll-arrow) sont gérées via one_line.js.
   Les surcharges par variation de style utilisent la classe ajoutée sur
   <main id="page"> par index.php (ex: main.cana, main[class*="14-18"]).
   ========================================================================== */

/* --- Conteneur : overflow caché, position relative pour les flèches absolues --- */
.prop-cards-container.one_line {
    position: relative;
    overflow: hidden;
}

/* --- Liste de cartes : défilement horizontal sans retour à la ligne --- */
.prop-cards-list.one_line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / Edge legacy */
    width: 100%;
    align-items: flex-start;
}

/* Masquer la scrollbar native (Chrome / Safari) */
.prop-cards-list.one_line::-webkit-scrollbar {
    display: none;
}

/* Les cartes gardent leur taille originale */
.prop-cards-list.one_line > * {
    flex-shrink: 0;
}

/* --- Flèches de défilement (superposées, positionnement absolu) --- */
.prop-cards-container.one_line .scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #000;
    color: #000;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    opacity: 0;              /* masquées par défaut ; one_line.js gère l'affichage */
    transition: opacity 0.2s ease;
    z-index: 10;
}

.prop-cards-container.one_line .arrow-prev {
    left: 10%;
}

.prop-cards-container.one_line .arrow-next {
    right: 10%;
}

/* --- Surcharges par variation de style --- */

main.cana .prop-cards-container.one_line .scroll-arrow {
    color: #bb2018;
}

main[class*="14-18"] .prop-cards-container.one_line .scroll-arrow {
    color: #000000;
}