/*
 * Comparateur de groupes : deux panneaux plein cadre superposés, chacun
 * révélé via clip-path selon --split-position (0-100%, pilotée par
 * view.js). Aucun des deux panneaux ne change réellement de taille : on
 * ne fait que déplacer la zone visible, ce qui évite tout effet
 * d'écrasement de l'image pendant le drag.
 */

.group-compare {
    background: var(--chirripo-color-bg, #0D0D0D);
    color: var(--chirripo-color-text, #f5f5f5);
    padding: var(--chirripo-space-xl, 6rem) 0;
}

.group-compare .section-header {
    max-width: 640px;
    margin: 0 auto var(--chirripo-space-lg, 3rem);
    padding: 0 10%;
    text-align: center;
}

.group-compare__stage {
    position: relative;
    overflow: hidden;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    height: var(--group-compare-height, clamp(360px, 55vw, 640px));
    border-radius: 8px;
    touch-action: pan-y;
    /*
     * Le drag horizontal traverse texte et logos : sans ce blocage, le
     * navigateur interprète le geste comme une sélection de texte (ou, sur
     * les images, un début de glisser-déposer natif) plutôt que comme
     * l'interaction avec la poignée. -webkit-user-drag ci-dessous complète
     * ça pour les <img> (user-select ne suffit pas à bloquer leur ghost
     * drag natif) ; view.js ajoute un dragstart preventDefault en renfort
     * pour les navigateurs qui ignorent cette propriété.
     */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.group-compare__stage img {
    -webkit-user-drag: none;
    user-drag: none;
}

.group-compare__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.group-compare__panel--left {
    left: 0;
    width: var(--split-position);
}

.group-compare__panel--right {
    right: 0;
    width: calc(100% - var(--split-position));
}

.group-compare__stage:not(.is-dragging) .group-compare__panel {
    transition: width 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.group-compare__media,
.group-compare__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.group-compare__image {
    object-fit: cover;
    display: block;
}

.group-compare__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    transition: background 0.4s ease-in-out;
}

.group-compare__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--chirripo-space-lg, 3rem) 8%;
}

.group-compare__logo {
    max-width: 320px;
    max-height: 35%;
    width: auto;
    height: auto;
    flex-shrink: 0;
    transition: max-width 0.4s ease-in-out, max-height 0.4s ease-in-out;
}

.group-compare__details {
    flex: 0 0 0;
    max-width: 42ch;
    margin-left: 0;
    overflow: hidden;
    color: #fff;
    font-family: var(--chirripo-font-body, sans-serif);
    /* --details-opacity : posée par view.js (updateTextOpacity), combine la
       distance au split centré et la largeur réelle du panneau — transition
       courte pour lisser les mises à jour successives (drag, polling pendant
       la transition CSS des flèches) sans à-coup ni clignotement. */
    opacity: var(--details-opacity, 0);
    transform: translateY(8px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    pointer-events: none;
}

.group-compare__title {
    margin: 0 0 0.5em;
    font-family: var(--chirripo-font-display, serif);
    font-size: 1.3rem;
    text-transform: uppercase;
}

.group-compare__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.group-compare__text p {
    margin: 0 0 1em;
}

.group-compare__text p:last-child {
    margin-bottom: 0;
}

.group-compare__cta {
    display: inline-flex;
    align-items: center;
    justify-content: end;
    gap: 0.5em;
    width: 100%;
    margin-top: 1.25em;
    color: #fff;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.group-compare__cta .cta-arrow {
    flex-shrink: 0;
}

/* -- État actif : le panneau ouvert passe en logo + texte côte à côte -- */
.group-compare.is-left-active .group-compare__panel--left .group-compare__scrim,
.group-compare.is-right-active .group-compare__panel--right .group-compare__scrim {
    background: rgba(0, 0, 0, 0.85);
}

.group-compare.is-left-active .group-compare__panel--left .group-compare__content,
.group-compare.is-right-active .group-compare__panel--right .group-compare__content {
    justify-content: center;
}

/*
 * .is-text-visible (view.js, updateTextOpacity) : posée en continu sur
 * chaque panneau dès que son opacité calculée dépasse 0 — jamais les deux
 * côtés en même temps, puisque leurs largeurs sont complémentaires (une
 * grandit quand l'autre rétrécit). --details-opacity gère déjà le fondu
 * continu (voir la règle de base ci-dessus) ; ici on ne fait que
 * débloquer la mise en page (largeur, marge, débordement, clics) une fois
 * qu'il y a effectivement quelque chose à voir.
 */
.group-compare__panel.is-text-visible .group-compare__details {
    flex: 0 1 auto;
    margin-left: var(--chirripo-space-lg, 3rem);
    overflow: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Panneau réduit à une mince bande : on masque son propre logo/texte pour
   ne pas les faire chevaucher avec le panneau ouvert. */
.group-compare.is-left-active .group-compare__panel--right .group-compare__content,
.group-compare.is-right-active .group-compare__panel--left .group-compare__content {
    opacity: 0;
}

/* -- Poignée centrale -- */
.group-compare__handle {
    position: absolute;
    top: 50%;
    left: var(--split-position);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0.7em;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    color: #fff;
    cursor: grab;
    touch-action: pan-y;
}

.group-compare__stage:not(.is-dragging) .group-compare__handle {
    transition: left 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.group-compare__handle {
    transform: translate(-50%, -50%);
}

.group-compare__stage.is-dragging .group-compare__handle {
    cursor: grabbing;
}

.group-compare__handle-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid #fff;
    background: none;
    cursor: pointer;
}

.group-compare__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

.group-compare__handle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* -- Curseur "DRAG" qui suit le pointeur (desktop uniquement) -- */
.group-compare__drag-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, transform 0.08s linear;
}

.group-compare__stage.is-hovering .group-compare__drag-cursor {
    opacity: 1;
}

.group-compare__stage.is-hovering {
    cursor: none;
}

.group-compare__panel a,
.group-compare__handle {
    cursor: pointer;
}

.group-compare__footer-text {
    max-width: 640px;
    margin: var(--chirripo-space-lg, 3rem) auto 0;
    padding: 0 10%;
    color: var(--chirripo-color-text-muted, #9a9a9a);
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}

@media (hover: none) {
    .group-compare__drag-cursor {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .group-compare__panel,
    .group-compare__handle,
    .group-compare__content,
    .group-compare__details {
        transition: none !important;
    }
}

@media (max-width: 768px) {

    /*
     * Plus de split/drag sur mobile : les deux groupes sont empilés en
     * pleine largeur, chacun avec son propre état actif/inactif au tap
     * (posé par view.js via .is-active sur le panneau, un seul à la fois -
     * accordéon). La poignée centrale n'a plus de rôle ici.
     *
     * Le logo ne doit JAMAIS bouger entre les deux états. Technique :
     * .group-compare__content devient une grille à 2 lignes -  la ligne 1
     * (logo) a une taille FIXE, identique inactif/actif (calc() sur la
     * hauteur cible, jamais sur --split-position ni sur un pourcentage du
     * conteneur) ; seule la ligne 2 (description) anime sa taille via
     * grid-template-rows 0fr -> 1fr (accordéon CSS pur, sans mesure JS de
     * hauteur). Le logo est donc toujours centré dans une ligne 1 dont les
     * dimensions ne dépendent jamais du contenu de la ligne 2.
     */
    .group-compare__stage {
        display: flex;
        flex-direction: column;
        gap: var(--chirripo-space-sm, 0.75rem);
        width: 100%;
        height: auto;
        border-radius: 0;
        touch-action: auto;
    }

    .group-compare__panel {
        position: relative;
        top: auto;
        bottom: auto;
        border-radius: 8px;
    }

    .group-compare__panel--left,
    .group-compare__panel--right {
        left: auto;
        right: auto;
        width: 100%;
    }

    .group-compare__handle,
    .group-compare__drag-cursor {
        display: none;
    }

    .group-compare .section-header,
    .group-compare__footer-text {
        padding: 0 var(--chirripo-space-md, 1.5rem);
    }

    .group-compare__content {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-rows: calc(var(--group-compare-height-mobile, clamp(280px, 90vw, 380px)) - (2 * var(--chirripo-space-md, 1.5rem))) 0fr;
        justify-items: center;
        padding: var(--chirripo-space-md, 1.5rem);
        text-align: center;
        transition: grid-template-rows 650ms ease-in-out;
    }

    .group-compare__panel.is-active .group-compare__content {
        grid-template-rows: calc(var(--group-compare-height-mobile, clamp(280px, 90vw, 380px)) - (2 * var(--chirripo-space-md, 1.5rem))) 1fr;
    }

    .group-compare__logo {
        grid-row: 1;
        align-self: center;
        max-height: 80px;
    }

    .group-compare__panel.is-active .group-compare__scrim {
        background: rgba(0, 0, 0, 0.55);
    }

    .group-compare__details {
        grid-row: 2;
        min-height: 0;
        margin-top: 0;
        max-width: 32ch;
        transition: opacity 650ms ease-in-out, transform 650ms ease-in-out, margin-top 650ms ease-in-out;
    }

    .group-compare__panel.is-active .group-compare__details {
        margin-top: 0;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .group-compare__cta {
        justify-content: center;
    }
}