/* =========================================================
   Module « Duo visuel (survol) »
   Deux blocs plein écran qui se superposent : le gauche est
   ouvert (78%), le droit réduit (22%). Au survol du bloc de
   droite, l'occupation s'inverse et les titres permutent.
   État piloté par :has(...) (natif) OU par .is-inverted (JS
   de secours ajouté par duo-visuel.js).

   Les images vivent dans un calque .duo-bg de LARGEUR FIXE
   (indépendante de la largeur du bloc) : redimensionner un
   bloc ne fait que rogner l'image, sans la rescaler (pas de
   zoom « cover »). L'image de gauche reste donc fixe ; celle
   de droite se dévoile par un léger balayage gauche -> droite.
   ========================================================= */

.duo-visuel {
    --duo-open: 78%;
    --duo-closed: 22%;
    --duo-bg-w: 80vw;
    /* largeur fixe du calque image (>= largeur ouverte) */
    --duo-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --duo-speed: 0.6s;

    display: flex;
    width: 100%;
    height: 90vh;
    min-height: 480px;
    margin: 0;
    overflow: hidden;
    background: var(--color-primary, #1a1a1a);
}

.duo-visuel .duo-block {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    /* Hauteur portée par les blocs (viewport) : tient même si le thème
       remet la hauteur du conteneur .module en auto. */
    height: 90vh;
    min-height: 480px;
    overflow: hidden;
    transition: flex-basis var(--duo-speed) var(--duo-ease);
}

.duo-visuel .block-left {
    flex-basis: var(--duo-open);
}

.duo-visuel .block-right {
    flex-basis: var(--duo-closed);
    /* Le bloc de droite passe au-dessus (superposition) */
    z-index: 2;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
}

/* --- Calque image de largeur fixe (pas de zoom au redim.) --- */
.duo-visuel .duo-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--duo-bg-w);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Image de gauche : ancrée à gauche -> reste FIXE, simplement rognée */
.duo-visuel .block-left .duo-bg {
    left: 0;
    background-position: center;
}

/* Image de droite : bord gauche FERRÉ à la ligne de séparation.
   Le calque est ancré left:0 (= bord gauche du bloc droit = la séparation) ;
   l'image suit donc le trait de séparation quand le bloc s'ouvre/se ferme. */
.duo-visuel .block-right .duo-bg {
    left: 0;
    right: auto;
    background-position: left center;
}

/* --- Inversion au survol du bloc de droite --- */
.duo-visuel:has(.block-right:hover) .block-left,
.duo-visuel.is-inverted .block-left {
    flex-basis: var(--duo-closed);
}

.duo-visuel:has(.block-right:hover) .block-right,
.duo-visuel.is-inverted .block-right {
    flex-basis: var(--duo-open);
}

/* --- Voile de lisibilité --- */
.duo-visuel .duo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    z-index: 1;
    transition: background var(--duo-speed) var(--duo-ease);
}

/* --- Contenu --- */
.duo-visuel .duo-content {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 3rem clamp(1.5rem, 4vw, 4rem);
    color: #fff;
    z-index: 2;
}

.duo-visuel .duo-title {
    margin: 0;
    color: #fff;
    font-family: var(--font-title, inherit);
    line-height: 1.05;
    /* Wrap figé : la boîte fait toujours 18ch (max-content plafonné), donc la
       découpe des lignes ne dépend PAS de la largeur du bloc. Le retour à la
       ligne initial est conservé, et le rétrécissement au survol ne fait que
       rogner/fondre le titre au lieu de le re-wrapper sur plus de lignes. */
    width: max-content;
    max-width: 18ch;
    transition: opacity var(--duo-speed) var(--duo-ease),
        transform var(--duo-speed) var(--duo-ease);
}

/* Titre gauche visible par défaut, titre droit masqué */
.duo-visuel .block-left .duo-title {
    opacity: 1;
    transform: translateY(0);
}

.duo-visuel .block-right .duo-title {
    opacity: 0;
    transform: translateY(1rem);
}

/* Au survol : le titre droit apparaît, le titre gauche disparaît */
.duo-visuel:has(.block-right:hover) .block-right .duo-title,
.duo-visuel.is-inverted .block-right .duo-title {
    opacity: 1;
    transform: translateY(0);
}

.duo-visuel:has(.block-right:hover) .block-left .duo-title,
.duo-visuel.is-inverted .block-left .duo-title {
    opacity: 0;
    transform: translateY(1rem);
}

/* --- Lien « → Label » --- */
.duo-visuel .duo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.duo-visuel .duo-link::before {
    content: "\2192";
    /* → */
    display: inline-block;
    transition: transform 0.3s var(--duo-ease);
}

.duo-visuel .duo-link:hover * {
    color: var(--color-background);
}

.duo-visuel .duo-link:hover::before {
    transform: translateX(4px);
}

/* =========================================================
   Responsive : empilement vertical, plus d'inversion au survol
   ========================================================= */
@media (max-width: 782px) {
    .duo-visuel {
        flex-direction: column;
        height: auto;
    }

    .duo-visuel .duo-block,
    .duo-visuel:has(.block-right:hover) .duo-block,
    .duo-visuel.is-inverted .duo-block {
        flex-basis: auto;
        height: auto;
        min-height: 60vh;
    }

    .duo-visuel .duo-bg {
        width: 100%;
        left: 0;
        right: auto;
        background-position: center;
    }

    .duo-visuel .block-right {
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
    }

    /* Les deux titres sont visibles en mobile. */
    .duo-visuel .block-right .duo-title,
    .duo-visuel .block-left .duo-title {
        opacity: 1;
        transform: none;
    }
}

/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {

    .duo-visuel .duo-block,
    .duo-visuel .duo-title,
    .duo-visuel .duo-bg,
    .duo-visuel .duo-overlay {
        transition: none;
    }
}