/* =====================================================
   DIAPORAMA AUTOMATIQUE
   -----------------------------------------------------
   S'adapte seul :
   - au nombre de photos (le défilement est piloté par
     diaporama-auto.js, chaque photo a le même temps
     d'affichage — pas de calcul à faire)
   - à l'orientation (classes .diaporama-h / .diaporama-v,
     posées automatiquement par le JS selon la 1ère photo)

   Indépendant de .premium-slider/.slider (diaporama de la
   page d'accueil), pour ne rien casser d'existant.
===================================================== */

.diaporama{
    /* Largeur ajustable : change ce pourcentage, soit ici pour
       tous les diaporamas, soit sur un diaporama en particulier
       avec style="--diaporama-width: 50%" dans le HTML. */
    --diaporama-width: 100%;

    /* Hauteur ajustable (optionnel) : par défaut sur "auto", la
       hauteur est calculée automatiquement à partir du format
       réel de la photo (aspect-ratio, posé par le JS). Si tu
       veux forcer une hauteur toi-même, pose par exemple
       style="--diaporama-height: 50vh" sur le HTML — utilise
       vh plutôt que % (une hauteur en % ne fonctionne que si le
       bloc parent a lui-même une hauteur définie, ce qui n'est
       pas le cas ici). Dès que tu poses cette variable, elle
       prend le dessus sur l'aspect-ratio automatique.
    */
    --diaporama-height: auto;

    position:relative;
    overflow:hidden;
    width:var(--diaporama-width);
    height:var(--diaporama-height);
    /* Valeur de secours tant que le JS n'a pas mesuré la vraie
       photo ; remplacée automatiquement ensuite par le ratio
       exact de l'image (voir diaporama-auto.js). Sans effet si
       --diaporama-height est posée. */
    aspect-ratio: 16 / 9;
    margin:1.5em auto;
    border-radius:22px;
    border:1px solid rgba(241,209,138,.35);
    box-shadow:
    0 0 18px rgba(218,165,32,.20),
    inset 0 0 12px rgba(241,209,138,.08);
    background:#111;

    /* Réglages par défaut, modifiables au cas par cas
       avec style="--secondes-par-photo: 4s" sur la div */
    --secondes-par-photo: 3s;
}

.diaporama-track{
    display:flex;
    height:100%;
    transition: transform 0.6s ease;
}

.diaporama-track figure{
    margin:0;
    flex-shrink:0;
}

.diaporama-track img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.diaporama-track figcaption{
    position:absolute;
    bottom:15px;
    left:15px;
    background:rgba(0,0,0,.75);
    color:#f1d18a;
    padding:10px 15px;
    border-radius:12px;
    font-weight:bold;
    border:1px solid rgba(218,165,32,.4);
    z-index:2;
}

.diaporama:hover{
    box-shadow:0 0 18px rgba(218,165,32,.5);
}

/* ---- Orientation horizontale (photos en paysage) : défilement gauche/droite ---- */
.diaporama-h .diaporama-track{
    flex-direction:row;
}
.diaporama-h .diaporama-track figure{
    width:100%;
}

/* ---- Orientation verticale (photos en portrait) : défilement haut/bas ---- */
.diaporama-v .diaporama-track{
    flex-direction:column;
}
.diaporama-v .diaporama-track figure{
    height:100%;
}

/* ---- Téléphone : largeur pleine automatique (horizontal seulement) ----
   Pour les diaporamas horizontaux, la largeur repasse à 100% sur petit
   écran quelle que soit la valeur --diaporama-width choisie pour PC.
   Les diaporamas verticaux, eux, gardent le pourcentage que tu leur
   as donné (utile si tu veux les garder plus petits même en mobile,
   avec par exemple style="--diaporama-width: 50%"). */

@media screen and (max-width:1208px){
    .diaporama-h{
        width: var(--diaporama-width, 50%);
        /* Ajuste la taille diaporama */
    }

    .diaporama-v{
        width: var(--diaporama-width, 50%);
        /* Ajuste la taille diaporama */
    }
}

@media screen and (max-width:768px){
    .diaporama-h{
        width: 100%;
        /* Ajuste la taille diaporama */
    }

    .diaporama-v{
        width: 100%;
        /* Ajuste la taille diaporama */
    }
}