/* === SLIDER === */
.slider-container {
    position: relative;
    width: min(1024px, calc(100vw - 32px));
    aspect-ratio: 1024 / 530;
    overflow: visible;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    margin: 78px auto 0; /* espace au-dessus pour la légende */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    overflow: visible;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.slide-caption {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    left: auto;
    max-width: 65%;
    padding-right: 14px;
    white-space: normal;
    color: #666;
    font-family: 'Lato', 'Helvetica Neue', sans-serif;
    font-size: 1.4em;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
    text-align: right;
    opacity: 0;
    transition: opacity 0.8s ease;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.slide.active .slide-caption {
    opacity: 1;
    transition-delay: 1s;
}

/* Tant que le contenu n'est pas révélé (pendant le splash), on garde la légende
   de la 1re diapo masquée : elle apparaîtra en fondu APRÈS l'atterrissage, pour
   qu'on la voie arriver et qu'on ait le temps de la lire. */
.page-main:not(.visible) .slide.active .slide-caption {
    opacity: 0;
    transition: none;
}

/* 1re légende : elle apparaît ~2 s après la fin du splash (le temps de respirer,
   puis l'œil est attiré par la légende qui se révèle). Retiré ensuite par JS pour
   rendre aux diapos suivantes leur cadence normale. */
.page-main.intro-caption .slide.active .slide-caption {
    transition-delay: 3s;
}

/* === SLIDER CONTROLS === */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(102,102,102,0.15);
    color: rgba(102,102,102,0.5);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.4s ease;
    z-index: 100;
    opacity: 0.3;
}

.slider-nav:hover {
    background: rgba(201,169,110,0.2);
    color: #c9a96e;
    transform: translateY(-50%) scale(1.02);
    opacity: 1;
}

.prev { left: 15px; }
.next { right: 15px; }

/* Crédit photographe : respire lentement du gris très sombre au gris très
   clair pour rester un peu lisible sur toutes les photos du diaporama */
.slider-container .credits {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 10px;
    text-align: right;
    cursor: pointer;
    z-index: 90;
    transform-origin: bottom right;
    transition: transform 0.35s ease;
    animation: credit-breathe 12s ease-in-out infinite;
}

.slider-container .credits:hover {
    transform: scale(1.3);
}

@keyframes credit-breathe {
    0%, 100% { color: #2b2b2b; }
    50%      { color: #e9e9e9; }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .slider-container {
        margin-top: 64px;
    }

    .slide-caption {
        font-size: 1.15em;
        max-width: 85%;
        padding-right: 10px;
    }

    .slider-nav {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}