:root {
    --floatingBarHeight: 56px; 
    --filterBarHeight: 68px;
    --scroll-opacity: 1;
    --hero-header-height: calc(
        (var(--cvh, 1vh) * 100)
        - var(--floatingBarHeight, 56px)
        - var(--filterBarHeight)
        - 1rem
    );
}

@media screen and (min-width: 768px) {
    :root {
        --hero-header-height: 100vw;
    }
}

@media screen and (min-width: 1023px) {
    :root {
        --filterBarHeight: 57px;
        --hero-header-height: 42vw;
    }
}

@media screen and (min-width: 992px) {
    :root {
        --floatingBarHeight: 72px; /* correspond au top:72px de .breadcrumbWrapper en desktop */
    }
}


/* =====================================================================
   VIDEO TILE
   ===================================================================== */

.tile-experience .videoContainer {
    aspect-ratio: .6666666667;
}


/* =====================================================================
   HERO BREAK BLOCK (ex "bloc-rupture")
   ===================================================================== */

.hero-break {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-gap: min(2vw, 32px);
    background: #e8b8b6;
    color: #FFF;
    position: relative;
}

.hero-break span { display: block }

.hero-break .smaller-text { font-size: min(1.125vw, 18px); line-height: 1.3 }
.hero-break .small-text   { font-size: min(1.5vw, 24px);   line-height: 1.3 }
.hero-break .big-text     { font-size: min(3vw, 48px) }
.hero-break .bigger-text  { font-size: min(4vw, 64px) }
.hero-break .l-space      { letter-spacing: .04em } /* corrigé : "4%" n'est pas une unité valide pour letter-spacing */
.hero-break .bold         { font-weight: 500 }
.hero-break .bolder       { font-weight: 600 }
.hero-break .caps         { text-transform: uppercase }

.hero-break a {
    position: absolute;
    bottom: min(4vw, 64px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.hero-break.hide-link a { display: none }

@media (max-width: 767px) {
    .hero-break               { grid-gap: 4vw }
    .hero-break .big-text     { font-size: 5vw }
    .hero-break .smaller-text { font-size: 3vw }
    .hero-break .small-text   { font-size: 3vw }
    .hero-break .bigger-text  { font-size: 7vw }
}


/* =====================================================================
   HEADER TRANSPARENT / LAYOUT
   ===================================================================== */

.main { padding-top: 0 }
.filters__mobile { margin-top: 0; margin-bottom: 0 }

@media screen and (min-width: 1025px) {
    .main { padding-top: 0 }
}

/* Gradient overlay haut de page */
.page:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 300px;
    left: 0;
    top: calc(var(--floatingBarHeight, 56px) - 1px);
    -webkit-mask-image: linear-gradient(to top,
        hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.013) 9.7%, hsla(0,0%,0%,.049) 18.7%,
        hsla(0,0%,0%,.104) 27.2%, hsla(0,0%,0%,.175) 35.1%, hsla(0,0%,0%,.259) 42.6%,
        hsla(0,0%,0%,.352) 49.6%, hsla(0,0%,0%,.45) 56.2%, hsla(0,0%,0%,.55) 62.5%,
        hsla(0,0%,0%,.648) 68.4%, hsla(0,0%,0%,.741) 74.1%, hsla(0,0%,0%,.825) 79.5%,
        hsla(0,0%,0%,.896) 84.8%, hsla(0,0%,0%,.951) 89.9%, hsla(0,0%,0%,.987) 95%,
        hsl(0,0%,0%) 100%);
    pointer-events: none;
    transform: translate3d(0,0,0);
    transition: all .6s;
    z-index: 2;
    background: rgba(0,0,0,.2);
}

.filterBar      { margin-top: 0 !important }
.page-container { margin: 0 auto }
.container      { margin: 0 }


/* =====================================================================
   CATEGORY HEADER
   ===================================================================== */

.experience-top .experience-category-categoryTitle {
    height: var(--hero-header-height);
    max-height: calc(
        (var(--cvh, 1vh) * 100)
        - var(--floatingBarHeight, 56px)
        - var(--filterBarHeight)
        - 5rem
    );
    padding: 0 0 2rem;
    display: flex;
    align-items: flex-end;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
}

@media (min-width: 1025px) {
    .experience-top .experience-category-categoryTitle {
        padding: 0 0 min(5vw, 80px);
        max-height: calc(100vh - var(--floatingBarHeight, 56px) - var(--filterBarHeight) - 3rem);
    }
}


/* =====================================================================
   BACKGROUND IMAGE / VIDEO
   ===================================================================== */

#heroBackgroundImage,
#heroBackgroundVideo {
    width: 100%;
    clip: rect(0, auto, auto, 0);
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    aspect-ratio: 4/5;
    height: 100%;
    max-height: 100%;
    transform: unset !important;
    opacity: 1 !important;
    transition: unset !important;
    pointer-events: none;
}

#heroBackgroundImage img,
#heroBackgroundVideo img {
    min-height: unset;
    height: calc(var(--hero-header-height) + 6vw);
    max-height: calc(100vh - var(--floatingBarHeight, 56px) - var(--filterBarHeight) - 3rem);
    transform: translate3d(0,0,0);
}

#heroBackgroundImage > *,
#heroBackgroundVideo > * {
    width: 100%;
    height: 100%;
}

#heroBackgroundImage:after,
#heroBackgroundVideo:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: -1px;
    -webkit-mask-image: linear-gradient(to bottom,
        hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.013) 9.7%, hsla(0,0%,0%,.049) 18.7%,
        hsla(0,0%,0%,.104) 27.2%, hsla(0,0%,0%,.175) 35.1%, hsla(0,0%,0%,.259) 42.6%,
        hsla(0,0%,0%,.352) 49.6%, hsla(0,0%,0%,.45) 56.2%, hsla(0,0%,0%,.55) 62.5%,
        hsla(0,0%,0%,.648) 68.4%, hsla(0,0%,0%,.741) 74.1%, hsla(0,0%,0%,.825) 79.5%,
        hsla(0,0%,0%,.896) 84.8%, hsla(0,0%,0%,.951) 89.9%, hsla(0,0%,0%,.987) 95%,
        hsl(0,0%,0%) 100%);
    pointer-events: none;
    transform: translate3d(0,0,0);
    transition: all .6s;
    z-index: 1;
}

@media screen and (max-width: 1024px) {
    #heroBackgroundImage img {
        height: calc(var(--hero-header-height) + 20vw);
    }
}


/* =====================================================================
   FONT-FACE ROSLINDALE
   ===================================================================== */

@font-face{
  font-family: "Rosalind Serif";
  font-style: normal;
  font-weight: 700;
  src: url("rosalind-serif-v1-latin-700.eot");
  src: url("rosalind-serif-v1-latin-700.eot?#iefix") format("embedded-opentype"), 
       url("rosalind-serif-v1-latin-700.woff2") format("woff2"), 
       url("rosalind-serif-v1-latin-700.woff") format("woff"), 
       url("rosalind-serif-v1-latin-700.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


/* =====================================================================
   HERO OVERLAY / TITLE / SUBTITLE
   AJOUT : ces classes étaient utilisées dans le HTML mais n'existaient
   dans aucune règle CSS de ce fichier => titre/sous-titre sans style.
   ===================================================================== */

.hero-overlay {
    position: absolute;
    top: 50%;
    right: 8%;
    left: auto;
    transform: translateY(-50%);
    z-index: 100;
    text-align: right;
    max-width: 90%;
}

.hero-title {
    color: #fff;
    font-family: 'Rosalind Serif';
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 0 .5rem;
}

.hero-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}

@media screen and (max-width: 767px) {
    .hero-overlay {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 6rem;
        transform: translateX(-50%);
        width: 90%;
        max-width: none;
        text-align: center;
    }
    .hero-title {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }
    .hero-subtitle {
        font-size: .875rem;
    }
}


/* =====================================================================
   STOREPAGE TITLE
   ===================================================================== */

.storepage .title-categ,
.storepage .hero.onlytitle .title-categ {
    max-width: 100%;
    margin: 0;
    grid-gap: 1rem;
}

.storepage .title-categ > *,
.storepage .hero.onlytitle .title-categ > * {
    text-align: center !important;
}

.storepage .title-categ,
.experience-top .u-color-greyStrong {
    color: #FFF;
}

.storepage .title-categ__description {
    font-family: "Baton Turbo", arial;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
    margin: 0;
}

.storepage .hero {
    z-index: 2;
    grid-gap: 2rem;
}

.storepage .title-categ,
.experience-top .hero-cta-group {
    --bs-gutter-x: 1.5rem;
    padding: 0 calc(var(--bs-gutter-x) * .5);
}

@media (min-width: 767px) {
    .storepage .title-categ > *,
    .storepage .hero.onlytitle .title-categ > * {
        text-align: left !important;
    }

    .storepage .hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .storepage .title-categ,
    .storepage .hero.onlytitle .title-categ {
        text-align: left;
        max-width: 80%;
    }
}

@media (min-width: 1025px) {
    .storepage .title-categ,
    .storepage .hero.onlytitle .title-categ {
        max-width: 60%;
    }

    .storepage .title-categ__description {
        font-size: 1rem;
    }
}


/* =====================================================================
   CATEG HEADING
   ===================================================================== */

.title-categ .categ-heading {
    all: unset;
    display: block;
    line-height: 1;
    font-size: min(3vw, 48px);
    font-weight: 400;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    .title-categ .categ-heading {
        font-size: min(8vw, 48px);
    }
}


/* =====================================================================
   BOUTONS CTA
   ===================================================================== */

.btn-transparent--vanilla {
    font-size: .75rem;
    width: auto !important;
    padding: .25rem 1rem;
    height: 36px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    text-transform: uppercase;
    background: rgba(255,255,255,.1) !important;
    cursor: pointer;
    transition: background .2s;
    border: 1px solid rgba(255,255,255,.2);
    justify-content: center;
    white-space: nowrap;
}

.btn-transparent--vanilla.btn-white {
    color: #000;
    background: #FFF !important;
}

.active-link .btn-transparent--vanilla {
    color: #000;
    background: #FFF !important;
    pointer-events: none;
}

@media screen and (min-width: 1023px) {
    .btn-transparent--vanilla:hover {
        border-color: rgba(255,255,255,1);
    }

    .btn-transparent--vanilla.btn-white:hover {
        background-color: rgba(255,255,255,.5);
    }

    .bloc-123.bloc-text {
        width: 60%;
    }
}


/* =====================================================================
   HERO CTA GROUP (ex "bloc-links")
   ===================================================================== */

.hero-cta-group {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.hero-cta-group .hero-cta {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.5);
    padding: 0.6rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.hero-cta-group .hero-cta:hover {
    background: rgba(255,255,255,.3) !important;
    border-color: rgba(255,255,255,.8);
}

.hero-cta-group .hero-cta.active {
    background: rgba(255,255,255,.3) !important;
    border-color: rgba(255,255,255,.8);
}

@media screen and (max-width: 1023px) {
    .hero-cta-group {
        bottom: 1.5rem;
        left: 0;
        transform: none;
        width: 100%;
        padding: 0 1rem;
        gap: 0.5rem;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hero-cta-group::-webkit-scrollbar { display: none }

    .hero-cta-group .hero-cta {
        padding: 0.5rem 1.25rem;
        font-size: 0.7rem;
        flex-shrink: 0;
    }
}

@media screen and (max-width: 850px) {
    .hero-cta-group {
        justify-content: flex-start;
    }
}


/* =====================================================================
   FREESCROLL
   ===================================================================== */

@media screen and (max-width: 1024px) {
    .freescroll:not(.stop-anim) > * {
        animation-name: shake;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-delay: 2s;
    }

    .freescroll {
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        width: 100%;
    }

    .freescroll > * { flex: none !important }
    .freescroll::-webkit-scrollbar { display: none }

    .freescroll.snap-x-mandatory {
        scroll-snap-type: x mandatory;
    }

    .freescroll.snap-x-mandatory > * {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
}

@keyframes shake {
    0%   { transform: translateX(0) }
    20%  { transform: translateX(-80px) }
    30%  { transform: translateX(30px) }
    40%  { transform: translateX(-20px) }
    50%  { transform: translateX(0) }
    100% { transform: translateX(0) }
}


/* =====================================================================
   BREADCRUMB
   ===================================================================== */

.breadcrumbWrapper {
    position: absolute;
    width: 100%;
    top: 56px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    z-index: 2;
    --bs-gutter-x: 1.5rem;
    padding: 0 calc(var(--bs-gutter-x) * .5);
    margin-top: 1rem !important;
}

.breadcrumb__item a {
    color: rgba(255,255,255,1);
    font-size: .625rem;
    text-transform: uppercase;
}

.breadcrumb__item::before { color: rgba(255,255,255,1) }

.filters__wrapper {
    margin-top: 0;
    border-top: none;
}

@media (min-width: 576px)  { .breadcrumbWrapper { max-width: 540px } }
@media (min-width: 768px)  { .breadcrumbWrapper { max-width: 720px; margin-top: 1rem !important } .breadcrumb__item a { font-size: .75rem } }
@media (min-width: 992px)  { .breadcrumbWrapper { max-width: 960px; top: 72px } }
@media (min-width: 1200px) { .breadcrumbWrapper { max-width: 1140px } }
@media (min-width: 1400px) { .breadcrumbWrapper { max-width: 1320px } }


/* =====================================================================
   CAPSULE
   ===================================================================== */

@media (min-width: 767px) and (max-width: 1440px) {
    .experience-category-categoryTitle .capsule {
        max-width: calc(100% - 10%);
    }
}


/* =====================================================================
   TITRE H1 (masqué visuellement, gardé pour le SEO/accessibilité)
   ===================================================================== */

.experience-category-categoryTitle.experience-component h1.categoryHeader__title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-size: 0 !important;
}


/* =====================================================================
   BLOC-123 FLEX UTILITIES
   ===================================================================== */

.bloc-123.-flex                                    { display: flex }
.bloc-123.-flex.-flex-inline                       { display: inline-flex }
.bloc-123.-flex.-flex-column                       { flex-direction: column }
.bloc-123.-flex.-flex-x-start:not(.-flex-column)   { justify-content: flex-start }
.bloc-123.-flex.-flex-x-space:not(.-flex-column)   { justify-content: space-between }
.bloc-123.-flex.-flex-x-center:not(.-flex-column)  { justify-content: center }
.bloc-123.-flex.-flex-x-end:not(.-flex-column)     { justify-content: flex-end }
.bloc-123.-flex.-flex-y-start:not(.-flex-column)   { align-items: flex-start }
.bloc-123.-flex.-flex-y-center:not(.-flex-column)  { align-items: center }
.bloc-123.-flex.-flex-y-end:not(.-flex-column)     { align-items: flex-end }
.bloc-123.-flex.-flex-column.-flex-x-start         { align-items: flex-start }
.bloc-123.-flex.-flex-column.-flex-x-center        { align-items: center }
.bloc-123.-flex.-flex-column.-flex-x-end           { align-items: flex-end }
.bloc-123.-flex.-flex-column.-flex-y-start         { justify-content: flex-start }
.bloc-123.-flex.-flex-column.-flex-y-center        { justify-content: center }
.bloc-123.-flex.-flex-column.-flex-y-end           { justify-content: flex-end }