/* ============================================================
   HERO SCROLL SLIDER v3 — hss.css
   ============================================================ */

:root {
    --hss-font : 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --hss-ease : cubic-bezier(0.77, 0, 0.175, 1);
    --hss-snap : cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ── */
.hss-hero *, .hss-hero *::before, .hss-hero *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

/* ================================================================
   HERO WRAPPER
================================================================ */
.hss-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: var(--hss-font);
    background: #000;
}

/* ================================================================
   POPUP
================================================================ */
.hss-popup {
    position: absolute;
    inset: 0;
    z-index: 500;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.7s var(--hss-ease);
}
.hss-popup.hss-out  { opacity: 0; pointer-events: none; }
.hss-popup.hss-gone { display: none; }

.hss-popup-text {
    font-family: var(--hss-font);
    font-size: clamp(4rem, 18vw, 14rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    user-select: none;
    animation: hss-popIn 0.6s var(--hss-ease) both;
}
@keyframes hss-popIn {
    from { opacity: 0; transform: scaleX(1.1) translateY(15px); letter-spacing: 0.08em; }
    to   { opacity: 1; transform: scaleX(1)   translateY(0);    letter-spacing: -0.05em; }
}

.hss-popup-line {
    position: absolute;
    bottom: 8vh; left: 50%;
    width: 1px; height: 60px;
    background: rgba(255, 255, 255, 0.25);
    transform-origin: top;
    animation: hss-lineGrow 1.1s var(--hss-ease) 0.5s both;
    transform: translateX(-50%) scaleY(0);
}
@keyframes hss-lineGrow {
    from { transform: translateX(-50%) scaleY(0); }
    to   { transform: translateX(-50%) scaleY(1); }
}

.hss-popup-hint {
    position: absolute;
    bottom: 5vh;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    animation: hss-fadeIn 1s ease 1.2s both;
}
@keyframes hss-fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================
   SLIDES
================================================================ */
.hss-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}
.hss-slide.hss-active { opacity: 1; pointer-events: auto; }

/* Parallax image */
.hss-slide-bg {
    position: absolute;
    inset: -15% 0;
    background-size: cover;
    background-position: center;
    background-color: #111;
    will-change: transform;
}

/* Gradient overlay */
.hss-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.20) 55%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 1;
}

/* ================================================================
   SLIDE CONTENT
================================================================ */
.hss-slide-content {
    position: absolute;
    bottom: clamp(4.5rem, 10vh, 8rem);
    left:   clamp(1.5rem,  5vw, 5rem);
    right:  clamp(5rem,   14vw, 18rem);
    z-index: 2;
    cursor: pointer;
}

/* Category */
.hss-slide-cat {
    display: inline-block;
    font-size: clamp(0.6rem, 1.1vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.75rem;
    /* entrance */
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
    transition:
        opacity   0.5s var(--hss-ease) 0.05s,
        transform 0.5s var(--hss-ease) 0.05s,
        filter    0.5s var(--hss-ease) 0.05s;
}

/* Title */
.hss-slide-title {
    font-family: var(--hss-font);
    font-size: clamp(2rem, 6.5vw, 7rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    max-width: 14ch;
    /* entrance */
    opacity: 0;
    transform: translateY(28px);
    filter: blur(12px);
    transition:
        opacity   0.7s var(--hss-ease) 0.12s,
        transform 0.7s var(--hss-ease) 0.12s,
        filter    0.7s var(--hss-ease) 0.12s;
    will-change: transform, opacity, filter;
}

/* Read more */
.hss-slide-read {
    display: inline-block;
    margin-top: 1.2rem;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0);
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    transition:
        color        0.5s var(--hss-ease) 0.35s,
        border-color 0.5s var(--hss-ease) 0.35s;
}

/* Active state — title-in */
.hss-slide.hss-title-in .hss-slide-cat,
.hss-slide.hss-title-in .hss-slide-title {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.hss-slide.hss-title-in .hss-slide-read {
    color: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ================================================================
   CLICK EXPAND → redirect
================================================================ */
.hss-slide.hss-click-out .hss-slide-title {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: none !important;
    animation: hss-titleExpand 0.7s var(--hss-ease) forwards;
}
.hss-slide.hss-click-out .hss-slide-cat,
.hss-slide.hss-click-out .hss-slide-read {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.hss-slide.hss-click-out .hss-slide-overlay {
    animation: hss-overlayDarken 0.7s ease forwards;
}

@keyframes hss-titleExpand {
    0%   { font-size: clamp(2rem, 6.5vw, 7rem); opacity: 1; }
    60%  { opacity: 1; }
    100% { font-size: clamp(8rem, 25vw, 30rem); transform: translateY(-5vh); opacity: 0; letter-spacing: -0.06em; }
}
@keyframes hss-overlayDarken {
    0%   { background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0.05) 100%); }
    100% { background: rgba(0, 0, 0, 0.88); }
}

/* ================================================================
   UI — TOP RIGHT (compteur)
================================================================ */
.hss-top-right {
    position: absolute;
    top: 1.6rem;
    right: clamp(1.5rem, 3vw, 3.5rem);
    z-index: 100;
}

.hss-slide-idx {
    font-family: var(--hss-font);
    font-weight: 700;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 16px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    line-height: 1;
}
.hss-slide-idx strong {
    color: #fff;
    font-weight: 900;
}
.hss-slide-idx.hss-hidden { display: none; }

/* ================================================================
   UI — PROGRESS %
================================================================ */
.hss-progress {
    position: absolute;
    bottom: clamp(1.5rem, 4vh, 3rem);
    right:  clamp(1.5rem, 3vw, 3.5rem);
    z-index: 100;
    display: flex;
    align-items: baseline;
    gap: 0.1em;
}
.hss-progress.hss-hidden { display: none; }

.hss-pct-num {
    font-family: var(--hss-font);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 5rem);
    text-shadow:
        0 0 20px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(0, 0, 0, 0.6),
        2px 2px 0 rgba(0, 0, 0, 0.95);
    transition: transform 0.15s ease;
    min-width: 3ch;
    text-align: right;
}
.hss-pct-sym {
    font-family: var(--hss-font);
    font-weight: 700;
    font-size: clamp(1.2rem, 2.4vw, 2.4rem);
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
    vertical-align: super;
}

/* ================================================================
   UI — SCROLLBAR LATERALE
================================================================ */
.hss-scrollbar {
    position: absolute;
    right: 0; top: 0;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    z-index: 100;
}
.hss-scrollbar.hss-hidden { display: none; }

.hss-scrollbar-fill {
    width: 100%;
    background: rgba(255, 255, 255, 0.55);
    height: 0%;
    transition: height 0.12s var(--hss-snap);
}

/* ================================================================
   UI — BARRE DE RÉSISTANCE
================================================================ */
.hss-resist-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    z-index: 200;
    pointer-events: none;
}
.hss-resist-bar.hss-hidden { display: none; }

.hss-resist-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    width: 0%;
    opacity: 0;
    transition: width 0.08s linear, opacity 0.3s ease;
}

/* ================================================================
   RESPONSIVE MOBILE
================================================================ */
@media (max-width: 768px) {
    .hss-pct-num { font-size: clamp(3rem, 15vw, 6rem); }
    .hss-slide-title { font-size: clamp(1.8rem, 9vw, 3.5rem); }
    .hss-slide-content {
        left: 1.25rem;
        right: 5rem;
        bottom: 5.5rem;
    }
}

/* ================================================================
   ELEMENTOR EDITOR — désactive les comportements interactifs
================================================================ */
.elementor-editor-active .hss-popup       { display: none !important; }
.elementor-editor-active .hss-slide       { opacity: 0.12 !important; pointer-events: none; }
.elementor-editor-active .hss-slide:first-of-type { opacity: 1 !important; }
.elementor-editor-active .hss-slide-title { opacity: 1 !important; filter: none !important; transform: none !important; }
.elementor-editor-active .hss-slide-cat  { opacity: 1 !important; filter: none !important; transform: none !important; }
.elementor-editor-active .hss-slide-read { color: rgba(255,255,255,0.55) !important; border-color: rgba(255,255,255,0.3) !important; }

/* ── Garantir la cliquabilité du contenu sur le slide actif ── */
.hss-slide.hss-active .hss-slide-content {
    pointer-events: auto;
    cursor: pointer;
}
.hss-slide.hss-active .hss-slide-title {
    pointer-events: auto;
    cursor: pointer;
}
/* Le slide non-actif ne reçoit aucun clic */
.hss-slide:not(.hss-active) .hss-slide-content,
.hss-slide:not(.hss-active) .hss-slide-title {
    pointer-events: none;
}

/* ================================================================
   SLIDE CTA — "Tous les travaux"
   Pas d'animation expand, fond noir par défaut, style distinct
================================================================ */
.hss-slide.hss-cta .hss-slide-bg {
    background-color: #0a0a0a;
}

/* Titre CTA : plus grand, différent visuellement */
.hss-slide.hss-cta .hss-cta-title {
    font-size: clamp(2.5rem, 8vw, 9rem);
    letter-spacing: -0.05em;
    line-height: 1;
    border-bottom: 2px solid rgba(255,255,255,0.6);
    padding-bottom: 0.15em;
    display: inline-block;
    max-width: none;
}

/* Label CTA : style légèrement différent */
.hss-slide.hss-cta .hss-cta-label {
    letter-spacing: 0.3em;
    opacity: 0.5;
}

/* Curseur pointer explicite */
.hss-slide.hss-cta .hss-slide-content {
    cursor: pointer;
}

/* Hover subtle sur le CTA */
.hss-slide.hss-cta.hss-active:hover .hss-cta-title {
    border-color: rgba(255,255,255,1);
}