/* ═══════════════════════════════════════════
   rochén Hero Slider — v1.4.1
═══════════════════════════════════════════ */

/* ════════════════════════════════════════════
   BASE
════════════════════════════════════════════ */
.rhs-slider {
    --rhs-accent:             #C8622A;
    --overlay-color:          10, 8, 6;
    --overlay-opacity:        0.84;
    --overlay-bottom-opacity: 0.80;

    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #0d0c0a;
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
}

/* ════════════════════════════════════════════
   SLIDES
════════════════════════════════════════════ */
.rhs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity .7s ease;
}
.rhs-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.rhs-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    transform: scale(1.05);
    transition: transform 1.6s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.rhs-slide.active .rhs-bg { transform: scale(1); }

.rhs-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(var(--overlay-color), var(--overlay-opacity)) 0%,
        rgba(var(--overlay-color), calc(var(--overlay-opacity) * .64)) 34%,
        rgba(var(--overlay-color), .18) 62%,
        transparent 100%
    );
}
.rhs-overlay-bottom {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(8,6,4,var(--overlay-bottom-opacity)) 0%, transparent 44%);
}

/* ════════════════════════════════════════════
   CONTENU
════════════════════════════════════════════ */
.rhs-content {
    position: absolute;
    left: 7%;
    top: 50%;
    transform: translateY(-52%);
    z-index: 3;
    max-width: 480px;
    padding-right: 1rem;
}

.rhs-eyebrow,
.rhs-title,
.rhs-desc,
.rhs-cta {
    opacity: 0;
    transition: opacity .5s ease, transform .55s ease;
}
.rhs-eyebrow { transform: translateY(18px); }
.rhs-title   { transform: translateY(32px); }
.rhs-desc    { transform: translateY(20px); }
.rhs-cta     { transform: translateY(16px); }

.rhs-slide.anim-in .rhs-eyebrow { opacity: 1; transform: translateY(0); transition-delay: .35s; }
.rhs-slide.anim-in .rhs-title   { opacity: 1; transform: translateY(0); transition-delay: .48s; }
.rhs-slide.anim-in .rhs-desc    { opacity: 1; transform: translateY(0); transition-delay: .60s; }
.rhs-slide.anim-in .rhs-cta     { opacity: 1; transform: translateY(0); transition-delay: .73s; }

.rhs-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--rhs-accent);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: 20px;
}
.rhs-eyebrow::before {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}

.rhs-title {
    font-size: clamp(2.8rem, 6.5vw, 6.8rem);
    font-weight: 800;
    line-height: .93;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 22px;
    text-shadow: 0 2px 40px rgba(0,0,0,.5);
}

.rhs-desc {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.68;
    color: rgba(243,234,220,.72);
    margin-bottom: 36px;
    max-width: 340px;
}

/* Double sélecteur pour battre les règles globales Elementor */
.rhs-slider .rhs-cta,
.rhs-slider a.rhs-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    background: var(--rhs-accent) !important;
    background-color: var(--rhs-accent) !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 14px 28px 14px 18px;
    text-decoration: none !important;
    border-radius: 0 !important;
    transition: opacity .5s ease, transform .55s ease, background .25s;
}
.rhs-slider .rhs-cta:hover,
.rhs-slider a.rhs-cta:hover { background: #d96f38 !important; background-color: #d96f38 !important; }

.rhs-cta-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .25s, background .25s;
    color: #fff;
}
.rhs-cta-circle svg  { display: block; color: inherit; }
.rhs-cta-circle path { stroke: currentColor; }
.rhs-cta:hover .rhs-cta-circle { border-color: #fff; background: rgba(255,255,255,.15); }

.rhs-slider .rhs-cta-label,
.rhs-slider a.rhs-cta .rhs-cta-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff !important;
}

/* ════════════════════════════════════════════
   VIGNETTES — DESKTOP (bas droite, au-dessus des flèches)
════════════════════════════════════════════ */
.rhs-thumbs {
    position: absolute;
    bottom: 94px;   /* flèches à 32px + hauteur 42px + 20px marge */
    right: 5%;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    gap: 12px;
    z-index: 4;
    align-items: flex-end;
}

.rhs-thumb-card {
    width: 158px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s ease, transform .5s ease, box-shadow .25s;
    flex-shrink: 0;
}
.rhs-thumb-card.thumb-ready { opacity: 1; transform: translateY(0); }
.rhs-thumb-card.thumb-ready:hover {
    box-shadow: 0 14px 48px rgba(0,0,0,.55);
    transform: translateY(-3px);
}

.rhs-thumb-img { width: 100%; height: 114px; overflow: hidden; background: #1a1612; }
.rhs-thumb-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s ease;
}
.rhs-thumb-card.thumb-ready:hover .rhs-thumb-img img { transform: scale(1.07); }

.rhs-thumb-info {
    padding: 10px 13px 12px;
    background: rgba(232,225,214,.92);
    backdrop-filter: blur(14px);
}
.rhs-thumb-material {
    font-size: 9px; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: #8a7a68; margin-bottom: 3px;
}
.rhs-thumb-name { font-size: 14px; font-weight: 700; color: #1E1B16; letter-spacing: -.01em; }

/* ════════════════════════════════════════════
   FLÈCHES (bas droite — tous breakpoints)
════════════════════════════════════════════ */
.rhs-arrows {
    position: absolute;
    bottom: 32px;
    right: 5%;
    left: auto;
    transform: none;
    z-index: 5;
    display: flex;
    gap: 8px;
}

.rhs-arrow-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(243,234,220,.28);
    background: rgba(8,6,4,.45);
    backdrop-filter: blur(10px);
    color: rgba(243,234,220,.82);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s, background .2s, color .2s;
}
.rhs-arrow-btn:hover, .rhs-arrow-btn:focus-visible {
    border-color: rgba(243,234,220,.72);
    background: rgba(8,6,4,.76);
    color: #fff;
    outline: none;
}

/* ════════════════════════════════════════════
   PROGRESS
════════════════════════════════════════════ */
.rhs-prog-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.07);
    z-index: 10;
}
.rhs-prog-fill { height: 100%; background: var(--rhs-accent); width: 0%; will-change: width; }

.rhs-segs {
    position: absolute;
    bottom: 26px;
    left: 7%;
    display: flex;
    gap: 7px;
    z-index: 5;
    align-items: center;
}
.rhs-seg {
    height: 2px; width: 44px;
    background: rgba(243,234,220,.2);
    border-radius: 2px; overflow: hidden;
}
.rhs-seg-fill { height: 100%; background: var(--rhs-accent); width: 0%; }

/* Aperçu éditeur */
.rhs-editor-preview { pointer-events: none; }
.rhs-editor-preview .rhs-bg { background: #1a1a1a !important; }
/* Forcer la visibilité des éléments animés dans l'éditeur */
.rhs-editor-preview .rhs-eyebrow,
.rhs-editor-preview .rhs-title,
.rhs-editor-preview .rhs-desc,
.rhs-editor-preview .rhs-cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* ════════════════════════════════════════════
   TABLETTE ≤ 1024px
   Vignettes : bas droite (identique desktop)
════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .rhs-content    { left: 6%; max-width: 420px; }
    .rhs-title      { font-size: clamp(2.6rem, 7vw, 5rem); }
    .rhs-thumb-card { width: 138px; }
    .rhs-thumb-img  { height: 100px; }
    .rhs-thumb-name { font-size: 13px; }
    .rhs-segs       { left: 6%; }
}


/* ════════════════════════════════════════════
   MOBILE ≤ 767px
   Layout : texte → CTA → vignettes (flux bas)
════════════════════════════════════════════ */
@media (max-width: 767px) {

    .rhs-slider { height: 100vh; height: 100dvh; }

    /* Overlay fort en bas pour lisibilité */
    .rhs-overlay {
        background: linear-gradient(
            180deg,
            rgba(8,6,4,.30) 0%,
            rgba(8,6,4,.10) 20%,
            rgba(8,6,4,.55) 55%,
            rgba(8,6,4,.92) 78%,
            rgba(8,6,4,.99) 100%
        );
    }
    .rhs-overlay-bottom { display: none; }

    /* ── Bloc texte : colonne ancrée en bas (contient aussi les vignettes via JS) ── */
    .rhs-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 52px;
        transform: none;
        max-width: 100%;
        padding: 0 5vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-align: left;
        z-index: 3;
    }

    .rhs-eyebrow {
        font-size: 11px;
        margin-bottom: 10px;
        gap: 10px;
    }
    .rhs-eyebrow::before { width: 20px; }

    .rhs-title {
        font-size: clamp(2.2rem, 10.5vw, 3.6rem);
        line-height: .92;
        margin-bottom: 12px;
        letter-spacing: -.02em;
    }

    .rhs-desc {
        font-size: 13px;
        line-height: 1.55;
        max-width: 100%;
        margin-bottom: 16px;
        color: rgba(243,234,220,.82);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ── CTA ── */
    .rhs-cta {
        display: inline-flex !important;
        width: auto          !important;
        align-items: center;
        gap: 11px;
        padding: 12px 20px 12px 14px;
        background: var(--rhs-accent) !important;
        border-radius: 0;
        margin-bottom: 14px;
        text-decoration: none;
    }
    .rhs-cta-circle { width: 30px; height: 30px; }
    .rhs-cta-label  {
        font-size: 12px;
        letter-spacing: .09em;
        color: #fff !important;
    }

    /* ── Vignettes : dans le flux après CTA (déplacées par JS) ── */
    .rhs-thumbs {
        position: static    !important;
        top: auto           !important;
        bottom: auto        !important;
        left: auto          !important;
        right: auto         !important;
        transform: none     !important;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0;
    }
    .rhs-thumbs::-webkit-scrollbar { display: none; }

    .rhs-thumb-card {
        width: 130px;
        flex-shrink: 0;
    }
    .rhs-thumb-img  { height: 86px; }
    .rhs-thumb-name { font-size: 12px; }

    /* ── Flèches : bas droite ── */
    .rhs-arrows {
        bottom: 12px;
        right: 5vw;
        left: auto !important;
        transform: none !important;
    }
    .rhs-arrow-btn { width: 38px; height: 38px; }

    /* ── Segments : bas gauche ── */
    .rhs-segs {
        bottom: 18px;
        left: 5vw;
        transform: none;
    }
    .rhs-seg { width: 30px; }
}


/* ════════════════════════════════════════════
   TRÈS PETIT MOBILE ≤ 380px
════════════════════════════════════════════ */
@media (max-width: 380px) {

    .rhs-title {
        font-size: clamp(2rem, 11vw, 2.8rem);
        margin-bottom: 10px;
    }
    .rhs-desc {
        font-size: 12px;
        margin-bottom: 14px;
    }
    .rhs-eyebrow   { font-size: 10px; margin-bottom: 8px; }
    .rhs-cta       { padding: 10px 16px 10px 12px; margin-bottom: 12px; }
    .rhs-cta-label { font-size: 11px; }
    .rhs-cta-circle { width: 26px; height: 26px; }
    .rhs-thumb-card { width: 118px; }
    .rhs-thumb-img  { height: 78px; }
    .rhs-seg { width: 24px; }
    .rhs-segs { gap: 5px; }
}


/* ════════════════════════════════════════════
   PAYSAGE MOBILE ≤ 900px landscape
   Vignettes : haut droite (1 seule)
════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {

    .rhs-overlay {
        background: linear-gradient(
            100deg,
            rgba(8,6,4,.88) 0%,
            rgba(8,6,4,.55) 40%,
            rgba(8,6,4,.15) 70%,
            transparent 100%
        );
    }
    .rhs-overlay-bottom { display: block; }

    .rhs-content {
        left: 5vw;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        max-width: 52%;
        padding: 0 1rem 0 0;
        display: block;
        text-align: left;
    }

    .rhs-eyebrow  { font-size: 11px; margin-bottom: 8px; }
    .rhs-eyebrow::before { width: 20px; }
    .rhs-title    { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: 8px; }
    .rhs-desc     { font-size: 13px; margin-bottom: 12px; max-width: 100%;
                    display: -webkit-box; -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical; overflow: hidden; }
    .rhs-cta      { padding: 9px 18px 9px 12px; gap: 8px; }
    .rhs-cta-label  { font-size: 11px; }
    .rhs-cta-circle { width: 26px; height: 26px; }

    /* 1 seule vignette, haut droite */
    .rhs-thumbs {
        top: 12px    !important;
        bottom: auto !important;
        right: 3%    !important;
        left: auto   !important;
        transform: none !important;
        align-items: flex-start;
        gap: 8px;
    }
    .rhs-thumb-card:not(:first-child) { display: none; }
    .rhs-thumb-card { width: 110px; }
    .rhs-thumb-img  { height: 65px; }
    .rhs-thumb-name { font-size: 11px; }
    .rhs-thumb-material { font-size: 8px; }
    .rhs-thumb-info { padding: 6px 9px 8px; }

    .rhs-arrows {
        bottom: 10px;
        right: 3%;
        left: auto !important;
        transform: none !important;
    }
    .rhs-arrow-btn { width: 34px; height: 34px; }

    .rhs-segs { bottom: 6px; left: 5vw; }
    .rhs-seg  { width: 26px; }
}


/* ════════════════════════════════════════════
   ACCESSIBILITÉ
════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .rhs-slider *, .rhs-slider *::before, .rhs-slider *::after {
        transition-duration: .01ms !important;
        animation-duration:  .01ms !important;
    }
    .rhs-bg { transform: scale(1) !important; }
}

.rhs-arrow-btn:focus-visible,
.rhs-thumb-card:focus-visible,
.rhs-cta:focus-visible {
    outline: 2px solid var(--rhs-accent);
    outline-offset: 3px;
}