/* =========================================================
   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: 69%;
    --duo-closed: 31%;
    --duo-bg-w: 80vw;
    /* largeur fixe du calque image (>= largeur ouverte) */
    /* Cadrage vertical des images (background-position Y) : cale le bandeau à
       modillons de Navone sur celui du Farnèse pour faire « l'angle ». */
    --duo-focus-left: 50%;
    --duo-focus-right: 38%;
    --duo-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --duo-speed: 0.6s;

    display: flex;
    width: 100%;
    height: 97vh;
    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: 97vh;
    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 var(--duo-focus-left);
}

/* 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 var(--duo-focus-right);
}

/* --- 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) 65%, 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;
    /* Couvre tout le bloc (contenu calé en bas) : sert de référence au lien étiré. */
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1rem;
    padding: 3rem clamp(1.5rem, 4vw, 4rem) 6rem;
    color: #fff;
    z-index: 2;
}

.duo-visuel .duo-title.title.title-section-2 {
    margin: 0;
    color: #fff;
    font-family: var(--font-title, inherit);
    font-size: 3.75rem;
    font-weight: 300;
    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;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1.5rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Libellés « Palais Farnèse » / « Place Navone » en Spectral 700.
   3 classes pour passer devant `body.wp-theme-nickl .btn` (indus-core). */
.duo-visuel .duo-block .duo-link {
    font-family: var(--font-title);
    font-size: 1.875rem;
    font-weight: 700;
}

/* Lien étiré sur tout le bloc : le survol de la zone = survol du lien,
   donc l'effet existant (flèche + couleur) se déclenche partout.
   position: static pour que le ::after se cale sur .duo-content (plein bloc)
   et non sur le .btn (que le thème positionne). */
.duo-visuel .duo-block .duo-link {
    position: static;
}

.duo-visuel .duo-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.duo-visuel .duo-link::before {
    content: "\2192";
    /* → — épinglé sur --font-general, Spectral n'a pas le glyphe U+2192 */
    font-family: var(--font-general);
    transform: translateX(-10px);
    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(0);
}

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

    .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;
    }
}