/* Restaurant Les Vénètes - Excursions */

.rlve,
.rlve * {
    box-sizing: border-box;
}

.rlve {
    --rlve-active-width: 65%;
    --rlve-visible: 4;
    --rlve-height: 640px;
    --rlve-gap: 8px;
    --rlve-duration: 700ms;
    --rlve-overlay-start: rgba(0, 0, 0, 0);
    --rlve-overlay-end: rgba(0, 0, 0, 0.75);
    --rlve-overlay-height: 65%;
    --rlve-inactive-veil: rgba(0, 0, 0, 0.15);
    --rlve-arrow-offset: 24px;
    --rlve-ease: cubic-bezier(0.65, 0, 0.35, 1);

    position: relative;
    width: 100%;
}

/* ── Track ──────────────────────────────────────────────────────── */
.rlve-track {
    position: relative;
    display: flex;
    width: 100%;
    height: var(--rlve-height);
    gap: var(--rlve-gap);
    overflow: hidden;
}

/* ── Card ───────────────────────────────────────────────────────── */
/* Default flex values so the widget displays correctly EVEN BEFORE JS runs
   (important for the Elementor editor preview where cards are added dynamically
   and JS init happens after the first paint). JS overrides these with exact
   inline `flex-basis` values once it initializes.

   Inactive cards: flex 1 (each takes 1 share of remaining space)
   Active card: flex 6 (~6x wider than an inactive)
   With 1 active + 3 inactives = total 9 shares → active ~67%, inactive ~11% each.
*/
.rlve-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    opacity: 1;
    transition: flex-basis var(--rlve-duration) var(--rlve-ease),
                width        var(--rlve-duration) var(--rlve-ease),
                opacity      var(--rlve-duration) var(--rlve-ease),
                margin       var(--rlve-duration) var(--rlve-ease);
    will-change: flex-basis, width, opacity;
    outline: none;
}

.rlve-card.is-active {
    flex: 6 1 0;
    cursor: default;
}

.rlve-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 0 0 5px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.rlve-card.is-hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}

.rlve-card.is-hidden .rlve-vtitle-cell,
.rlve-card.is-hidden .rlve-active-content {
    opacity: 0;
}

/* ── Image ──────────────────────────────────────────────────────── */
.rlve-card-image {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden;
    z-index: 0;
}

/* Force image to cover the card — !important to defeat theme rules like
   `img { max-width: 100%; height: auto; }` that would shrink the image. */
.rlve-card-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    /* object-position is set via Elementor control — no !important here */
    /* Subtle scale + slow pan on active to give the photo presence */
    transform: scale(1.02);
    transition: transform calc(var(--rlve-duration) * 2) var(--rlve-ease);
}

.rlve-card.is-active .rlve-card-image img {
    transform: scale(1);
}

/* ── Veil over inactive cards ───────────────────────────────────── */
.rlve-veil {
    position: absolute;
    inset: 0;
    background: var(--rlve-inactive-veil);
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--rlve-duration) var(--rlve-ease);
    z-index: 1;
}

.rlve-card.is-active .rlve-veil {
    opacity: 0;
}

/* ── Bottom gradient overlay on active ──────────────────────────── */
.rlve-overlay {
    position: absolute;
    inset: auto 0 0 0;
    height: var(--rlve-overlay-height);
    background: linear-gradient(to bottom, var(--rlve-overlay-start), var(--rlve-overlay-end));
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--rlve-duration) var(--rlve-ease);
    z-index: 2;
}

.rlve-card.is-active .rlve-overlay {
    opacity: 1;
}

/* ── Vertical title (visible on inactive cards) ─────────────────── */
/* Uses writing-mode for native vertical text — no fragile rotation math.
   The cell flexes to anchor the text at the bottom; the inner text element
   rotates 180deg so reading is bottom-up. */
.rlve-vtitle-cell {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    padding: 24px 6px;

    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: flex-end;     /* anchor at bottom (where reading starts) */

    opacity: 1;
    transition: opacity calc(var(--rlve-duration) * 0.5) var(--rlve-ease);
}

.rlve-title-vertical {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);   /* reads bottom-to-top */

    color: #fff;
    font: inherit;
    font-size: 20px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;

    /* In writing-mode: vertical-rl, "max-height" caps the inline (vertical) extent.
       Combined with overflow:hidden on the cell, very long titles get clipped
       safely instead of overflowing the card. */
    max-height: 100%;
    overflow: hidden;
}

/* Down direction: text reads top-to-bottom, anchor at top */
.rlve-vtitle-down .rlve-vtitle-cell    { align-items: flex-start; }
.rlve-vtitle-down .rlve-title-vertical { transform: rotate(0deg); }

/* Fade out vertical title on the active card */
.rlve-card.is-active .rlve-vtitle-cell { opacity: 0; }

/* ── Active content panel ───────────────────────────────────────── */
.rlve-active-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 4;
    padding: 40px;
    color: #fff;
    pointer-events: none;
}

.rlve-card.is-active .rlve-active-content {
    pointer-events: auto;
}

.rlve-active-content-inner {
    max-width: 75%;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity calc(var(--rlve-duration) * 0.7) var(--rlve-ease) calc(var(--rlve-duration) * 0.3),
                transform calc(var(--rlve-duration) * 0.7) var(--rlve-ease) calc(var(--rlve-duration) * 0.3);
}

.rlve-card.is-active .rlve-active-content-inner {
    opacity: 1;
    transform: translateY(0);
}

/* ── Typography (with font: inherit so Elementor controls work) ─ */
.rlve-title-horizontal {
    margin: 0 0 16px;
    color: #fff;
    font: inherit;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 400;
}

.rlve-description {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.92);
    font: inherit;
    font-size: 15px;
    line-height: 1.55;
}

.rlve-recommendation {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.85);
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
}

.rlve-reco-label {
    color: #fff;
    font-weight: 500;
}

/* ── Button ─────────────────────────────────────────────────────── */
.rlve-button {
    display: inline-block;
    padding: 14px 28px;
    color: #fff;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 250ms ease,
                color            250ms ease,
                border-color     250ms ease,
                transform        250ms ease;
}

.rlve-button:hover {
    color: #1a1a1a;
    background: #fff;
    border-color: #fff;
}

.rlve-button:active {
    transform: translateY(1px);
}

/* ── Arrows ─────────────────────────────────────────────────────── */
.rlve-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.rlve-arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1;
    /* font-size is set by the Elementor "Taille du bouton" control via a
       proportional calc — driving the FA icon size automatically. */
    transition: background-color 250ms ease,
                color            250ms ease,
                border-color     250ms ease,
                transform        250ms ease;
}

.rlve-arrow:hover {
    color: #1a1a1a;
    background: #fff;
    border-color: #fff;
}

.rlve-arrow:active {
    transform: scale(0.96);
}

.rlve-arrow svg {
    /* Fill the button entirely. With preserveAspectRatio (default "xMidYMid meet")
       the SVG keeps its native ratio and letterboxes inside the button — same
       behaviour as the offres-du-moment plugin. */
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
    stroke: currentColor;
    pointer-events: none;
}

.rlve-arrow img {
    /* Uploaded SVG sometimes renders as <img> instead of inline svg */
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.rlve-arrow i {
    /* Font Awesome glyph. font-size is set by the arrow_size control to ~55%
       of the button dimensions for a balanced look. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Elementor's <span class="elementor-icon"> wrapper if used by render_icon */
.rlve-arrow .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    background: none;
    padding: 0;
    border: 0;
}

/* ── Arrow positions (when "inside" = overlay on active card) ───── */
.rlve.rlve-arrows-inside .rlve-arrows {
    position: absolute;
}

.rlve.rlve-arrows-inside.rlve-arrows-bottom-left   .rlve-arrows { bottom: var(--rlve-arrow-offset); left:   var(--rlve-arrow-offset); }
.rlve.rlve-arrows-inside.rlve-arrows-bottom-right  .rlve-arrows { bottom: var(--rlve-arrow-offset); right:  var(--rlve-arrow-offset); }
.rlve.rlve-arrows-inside.rlve-arrows-bottom-center .rlve-arrows {
    bottom: var(--rlve-arrow-offset);
    left: 50%;
    transform: translateX(-50%);
}
.rlve.rlve-arrows-inside.rlve-arrows-top-left  .rlve-arrows { top: var(--rlve-arrow-offset); left:  var(--rlve-arrow-offset); }
.rlve.rlve-arrows-inside.rlve-arrows-top-right .rlve-arrows { top: var(--rlve-arrow-offset); right: var(--rlve-arrow-offset); }

.rlve.rlve-arrows-inside.rlve-arrows-sides .rlve-arrows {
    top: 50%;
    left: var(--rlve-arrow-offset);
    right: var(--rlve-arrow-offset);
    transform: translateY(-50%);
    justify-content: space-between;
    pointer-events: none;
}
.rlve.rlve-arrows-inside.rlve-arrows-sides .rlve-arrow {
    pointer-events: auto;
}

/* bottom-sides: prev tout à gauche, next tout à droite, ancré en bas */
.rlve.rlve-arrows-inside.rlve-arrows-bottom-sides .rlve-arrows {
    bottom: var(--rlve-arrow-offset);
    left:   var(--rlve-arrow-offset);
    right:  var(--rlve-arrow-offset);
    justify-content: space-between;
    pointer-events: none;
}
.rlve.rlve-arrows-inside.rlve-arrows-bottom-sides .rlve-arrow {
    pointer-events: auto;
}

/* top-sides: idem mais ancré en haut */
.rlve.rlve-arrows-inside.rlve-arrows-top-sides .rlve-arrows {
    top:   var(--rlve-arrow-offset);
    left:  var(--rlve-arrow-offset);
    right: var(--rlve-arrow-offset);
    justify-content: space-between;
    pointer-events: none;
}
.rlve.rlve-arrows-inside.rlve-arrows-top-sides .rlve-arrow {
    pointer-events: auto;
}

/* ── Arrow position: outside (below the carousel) ───────────────── */
/* Use a flex column on the wrapper so .rlve-track and .rlve-arrows stack
   vertically. Force display:flex with !important to defeat theme overrides. */
.rlve.rlve-arrows-outside {
    display: flex !important;
    flex-direction: column !important;
}

.rlve.rlve-arrows-outside .rlve-arrows {
    position: static !important;
    margin-top: 20px;
    display: flex;
    /* Clear any inset values that might leak from the inside variant */
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    pointer-events: auto;
}

.rlve.rlve-arrows-outside.rlve-arrows-bottom-left   .rlve-arrows { justify-content: flex-start; }
.rlve.rlve-arrows-outside.rlve-arrows-bottom-right  .rlve-arrows { justify-content: flex-end; }
.rlve.rlve-arrows-outside.rlve-arrows-bottom-center .rlve-arrows { justify-content: center; }
.rlve.rlve-arrows-outside.rlve-arrows-bottom-sides  .rlve-arrows { justify-content: space-between; }
/* "sides" doesn't really apply outside — fall back to space-between */
.rlve.rlve-arrows-outside.rlve-arrows-sides .rlve-arrows { justify-content: space-between; }
/* top-* in outside mode: put the bar ABOVE the track */
.rlve.rlve-arrows-outside.rlve-arrows-top-left  .rlve-arrows,
.rlve.rlve-arrows-outside.rlve-arrows-top-right .rlve-arrows,
.rlve.rlve-arrows-outside.rlve-arrows-top-sides .rlve-arrows {
    margin-top: 0;
    margin-bottom: 20px;
    order: -1;
}
.rlve.rlve-arrows-outside.rlve-arrows-top-left  .rlve-arrows { justify-content: flex-start; }
.rlve.rlve-arrows-outside.rlve-arrows-top-right .rlve-arrows { justify-content: flex-end; }
.rlve.rlve-arrows-outside.rlve-arrows-top-sides .rlve-arrows { justify-content: space-between; }

/* ── Editor preview helpers (let Elementor handle resize) ───────── */
.elementor-editor-active .rlve-card,
.elementor-editor-preview .rlve-card {
    transition: flex-basis 400ms var(--rlve-ease), width 400ms var(--rlve-ease);
}

/* ── Mobile fine-tuning ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .rlve-vtitle-cell {
        padding: 14px 4px;
    }
    .rlve-title-vertical {
        font-size: 15px;
    }

    .rlve-active-content-inner {
        max-width: 90%;
    }

    .rlve-arrow {
        width: 38px;
        height: 38px;
    }
}

/* ── Smooth reflow during JS-driven width updates ───────────────── */
.rlve-track[data-anim="off"] .rlve-card {
    transition: none !important;
}