
/* =========================================================
   HOME SPONSORS — CORRECTION STRUCTURELLE V2
   Neutralise les sélecteurs génériques de final.css
   ========================================================= */

.home-sponsors-strip {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 54px 6% !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;

    grid-column: 1 / -1 !important;
    grid-row: auto !important;

    overflow: hidden !important;
}

.home-sponsors-strip-inner {
    display: grid !important;
    position: relative !important;
    float: none !important;

    width: 100% !important;
    max-width: 1280px !important;
    min-width: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    grid-template-columns:
        minmax(190px, 1.4fr)
        repeat(5, minmax(105px, 1fr))
        minmax(190px, auto) !important;

    align-items: center !important;
    justify-content: stretch !important;
    gap: 16px !important;

    transform: none !important;
}

.home-sponsors-strip-title {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    transform: none !important;
}

.home-sponsors-strip .home-sponsors-logo {
    display: flex !important;
    position: relative !important;
    float: none !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 88px !important;

    margin: 0 !important;
    padding: 16px !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 20px !important;
    transform: none !important;
}

.home-sponsors-strip .home-sponsors-logo img {
    display: block !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    max-height: 58px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
}

.home-sponsors-strip .home-sponsors-logo-main img {
    max-height: 76px !important;
}

.home-sponsors-strip .home-sponsors-strip-cta {
    display: inline-flex !important;
    position: relative !important;
    float: none !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    align-items: center !important;
    justify-content: center !important;

    white-space: normal !important;
    text-align: center !important;

    transform: none !important;
}

/* Tablette */
@media (max-width: 1100px) {

    .home-sponsors-strip {
        width: 100% !important;
        max-width: none !important;
        padding: 48px 5% !important;
    }

    .home-sponsors-strip-inner {
        width: 100% !important;
        max-width: 920px !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .home-sponsors-strip-title,
    .home-sponsors-strip-cta {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        text-align: center !important;
    }

    .home-sponsors-logo-main {
        grid-column: auto !important;
    }
}

/* Mobile */
@media (max-width: 700px) {

    .home-sponsors-strip {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 42px 16px !important;

        left: 0 !important;
        right: 0 !important;
    }

    .home-sponsors-strip-inner {
        display: grid !important;

        width: 100% !important;
        max-width: 520px !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .home-sponsors-strip-title {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        text-align: center !important;
    }

    .home-sponsors-strip .home-sponsors-logo {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 96px !important;

        padding: 12px !important;
        border-radius: 16px !important;
    }

    .home-sponsors-strip .home-sponsors-logo-main {
        grid-column: 1 / -1 !important;
    }

    .home-sponsors-strip .home-sponsors-logo img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 56px !important;
    }

    .home-sponsors-strip .home-sponsors-logo-main img {
        max-height: 82px !important;
    }

    .home-sponsors-strip .home-sponsors-strip-cta {
        grid-column: 1 / -1 !important;
        justify-self: center !important;

        width: auto !important;
        max-width: 100% !important;

        margin-top: 10px !important;
    }
}

/* Petit mobile */
@media (max-width: 420px) {

    .home-sponsors-strip {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .home-sponsors-strip-inner {
        grid-template-columns: 1fr !important;
        max-width: 380px !important;
    }

    .home-sponsors-strip-title,
    .home-sponsors-strip .home-sponsors-logo-main,
    .home-sponsors-strip .home-sponsors-strip-cta {
        grid-column: 1 !important;
    }

    .home-sponsors-strip .home-sponsors-logo {
        min-height: 98px !important;
    }
}

/* =========================================================
   ARTIST CINEMA — MOBILE STRUCTURAL FIX
   Correction du layout 50/50 visible sur iPhone
   ========================================================= */

@media (max-width: 720px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body > main,
    main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Section complète */
    .artist-cinema {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    /* Tous les conteneurs structurels internes */
    .artist-cinema > div,
    .artist-cinema [class*="inner"],
    .artist-cinema [class*="grid"],
    .artist-cinema [class*="layout"],
    .artist-cinema [class*="stage"],
    .artist-cinema [class*="wrapper"] {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;

        transform: none !important;
    }

    /* Zone image */
    .artist-cinema figure,
    .artist-cinema [class*="media"],
    .artist-cinema [class*="visual"],
    .artist-cinema [class*="image"],
    .artist-cinema [class*="photo"] {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        inset: auto !important;

        overflow: visible !important;
        transform: none !important;
    }

    /* Photo entière, sans découpe verticale */
    .artist-cinema img {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        inset: auto !important;

        object-fit: contain !important;
        object-position: center top !important;

        transform: none !important;
    }

    /* Zone texte sous la photo */
    .artist-cinema [class*="content"],
    .artist-cinema [class*="copy"],
    .artist-cinema [class*="text"],
    .artist-cinema [class*="body"] {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 38px 22px 46px !important;

        inset: auto !important;

        transform: none !important;
        overflow: visible !important;
    }

    .artist-cinema h1,
    .artist-cinema h2,
    .artist-cinema h3,
    .artist-cinema p,
    .artist-cinema span {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .artist-cinema h2,
    .artist-cinema h3 {
        font-size: clamp(38px, 12vw, 58px) !important;
        line-height: .94 !important;
    }

    .artist-cinema p {
        font-size: 18px !important;
        line-height: 1.65 !important;
    }
}

/* Très petit mobile */
@media (max-width: 390px) {

    .artist-cinema [class*="content"],
    .artist-cinema [class*="copy"],
    .artist-cinema [class*="text"],
    .artist-cinema [class*="body"] {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .artist-cinema h2,
    .artist-cinema h3 {
        font-size: clamp(34px, 11vw, 48px) !important;
    }

    .artist-cinema p {
        font-size: 17px !important;
    }
}

/* =========================================================
   HEADER — MOBILE WIDTH FIX
   ========================================================= */

@media (max-width: 720px) {

    .site-header,
    header.site-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        left: 0 !important;
        right: 0 !important;

        margin: 0 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;

        transform: none !important;
    }

    .site-header nav {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .site-header nav > a:not(.header-lang-v4):not(.header-sponsor-v4) {
        display: none !important;
    }

    .header-actions-v4 {
        display: flex !important;
        width: auto !important;
        max-width: calc(100% - 150px) !important;
        min-width: 0 !important;

        margin-left: auto !important;
        gap: 8px !important;
    }

    .header-actions-v4 > a {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   DIRECTION ARTISTIQUE — COMPAGNIE SHAYLA
   CORRECTION MOBILE V1
   ========================================================= */

@media (max-width: 720px) {

    section.shayla-direction-block {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 48px 18px !important;

        overflow: visible !important;
        isolation: isolate !important;
    }

    section.shayla-direction-block::before,
    section.shayla-direction-block::after {
        pointer-events: none !important;
    }

    section.shayla-direction-block > div {
        display: flex !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 0 !important;

        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;

        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;

        transform: none !important;
    }

    section.shayla-direction-block > div > * {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        inset: auto !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

    /* Zone photo */
    section.shayla-direction-block figure,
    section.shayla-direction-block [class*="media"],
    section.shayla-direction-block [class*="visual"],
    section.shayla-direction-block [class*="photo"],
    section.shayla-direction-block [class*="image"] {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 0 30px !important;
        padding: 0 !important;

        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

    /* Photo principale */
    section.shayla-direction-block img:not([src*="logo"]):not([src*="Logo"]):not([src*="shayla-logo"]):not([src*="Shayla-logo"]) {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;

        object-fit: contain !important;
        object-position: center top !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

    /* Logo Shayla */
    section.shayla-direction-block img[src*="logo"],
    section.shayla-direction-block img[src*="Logo"],
    section.shayla-direction-block img[src*="shayla"],
    section.shayla-direction-block img[alt*="Shayla"],
    section.shayla-direction-block img[alt*="SHAYLA"] {
        display: block !important;
        position: relative !important;

        width: auto !important;
        max-width: min(72%, 260px) !important;

        height: auto !important;
        max-height: 150px !important;

        margin: 0 0 24px !important;

        object-fit: contain !important;
        object-position: left center !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

    /* Zone éditoriale */
    section.shayla-direction-block [class*="content"],
    section.shayla-direction-block [class*="copy"],
    section.shayla-direction-block [class*="text"],
    section.shayla-direction-block [class*="body"],
    section.shayla-direction-block [class*="editorial"] {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;
        transform: none !important;
    }

    section.shayla-direction-block p,
    section.shayla-direction-block h1,
    section.shayla-direction-block h2,
    section.shayla-direction-block h3,
    section.shayla-direction-block h4,
    section.shayla-direction-block strong,
    section.shayla-direction-block span,
    section.shayla-direction-block a {
        position: relative !important;

        width: auto !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        opacity: 1 !important;
        visibility: visible !important;

        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;

        transform: none !important;
    }

    /* Direction artistique · Compagnie Shayla */
    section.shayla-direction-block p:first-of-type,
    section.shayla-direction-block [class*="kicker"],
    section.shayla-direction-block [class*="eyebrow"],
    section.shayla-direction-block [class*="label"] {
        display: block !important;

        margin: 0 0 14px !important;

        color: #d8b36b !important;

        font-size: 12px !important;
        line-height: 1.5 !important;
        letter-spacing: .18em !important;
        text-transform: uppercase !important;
    }

    /* Titre Shayla */
    section.shayla-direction-block h2,
    section.shayla-direction-block h3 {
        display: block !important;

        margin: 0 0 18px !important;

        color: #f7f1e8 !important;

        font-size: clamp(46px, 15vw, 72px) !important;
        line-height: .92 !important;
        letter-spacing: -.035em !important;
        font-weight: 400 !important;
    }

    /* Sous-titre */
    section.shayla-direction-block h2 + p,
    section.shayla-direction-block h3 + p,
    section.shayla-direction-block [class*="lead"],
    section.shayla-direction-block [class*="subtitle"] {
        margin: 0 0 24px !important;

        color: #f1e8db !important;

        font-size: 22px !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;
    }

    /* Paragraphes */
    section.shayla-direction-block p {
        display: block !important;

        margin-top: 0 !important;
        margin-bottom: 20px !important;

        color: rgba(247, 241, 232, .82) !important;

        font-size: 17px !important;
        line-height: 1.7 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    /* Bouton vers shayla.be */
    section.shayla-direction-block a {
        display: inline-flex !important;
        position: relative !important;

        width: auto !important;
        max-width: 100% !important;
        min-height: 52px !important;

        margin: 10px 0 0 !important;
        padding: 14px 22px !important;

        align-items: center !important;
        justify-content: center !important;

        border: 1px solid rgba(216, 179, 107, .65) !important;
        border-radius: 999px !important;

        background: rgba(216, 179, 107, .08) !important;
        color: #e5c47e !important;

        font-size: 13px !important;
        line-height: 1.35 !important;
        letter-spacing: .07em !important;
        text-align: center !important;
        text-decoration: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;
        transform: none !important;
    }
}

@media (max-width: 390px) {
}

/* =========================================================
   SHAYLA DIRECTION — MOBILE VISIBILITY FORCE V5
   Le contenu existe mais est masqué par le layout/animations
   ========================================================= */

@media screen and (max-width: 720px) {

    html body section.shayla-direction-block {
        display: block !important;
        position: relative !important;
        isolation: isolate !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 48px 18px !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /*
     * Neutralise les animations et les placements absolus
     * qui laissent les contenus invisibles sur Safari mobile.
     */
    html body section.shayla-direction-block *,
    html body section.shayla-direction-block [data-reveal],
    html body section.shayla-direction-block [data-animate],
    html body section.shayla-direction-block .reveal,
    html body section.shayla-direction-block .reveal-item,
    html body section.shayla-direction-block .is-reveal,
    html body section.shayla-direction-block .fade-up,
    html body section.shayla-direction-block .fade-in {
        opacity: 1 !important;
        visibility: visible !important;

        animation: none !important;
        transition: none !important;
        transform: none !important;

        filter: none !important;
        clip-path: none !important;
        mask: none !important;
    }

    /*
     * Tous les blocs retrouvent le flux normal.
     * Cela empêche le texte et le logo de rester derrière la photo.
     */
    html body section.shayla-direction-block div,
    html body section.shayla-direction-block article,
    html body section.shayla-direction-block figure,
    html body section.shayla-direction-block header {
        position: static !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

    /*
     * Le conteneur principal devient une colonne mobile.
     */
    html body section.shayla-direction-block > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        width: 100% !important;
        max-width: 560px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    /*
     * La photo ne doit plus recouvrir le contenu.
     */
    html body section.shayla-direction-block figure {
        display: block !important;
        order: 1 !important;

        margin: 0 0 32px !important;

        z-index: 1 !important;
    }

    html body section.shayla-direction-block figure img,
    html body section.shayla-direction-block img {
        position: static !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

    /*
     * Photo principale.
     */
    html body section.shayla-direction-block figure > img:first-child {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        object-fit: contain !important;
        object-position: center top !important;
    }

    /*
     * Tous les blocs autres que la photo passent au-dessus.
     */
    html body section.shayla-direction-block > div > :not(figure) {
        order: 2 !important;
        position: static !important;

        z-index: 10 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    /*
     * Logo Shayla.
     */
    html body section.shayla-direction-block img[alt*="Shayla"],
    html body section.shayla-direction-block img[alt*="SHAYLA"],
    html body section.shayla-direction-block img[src*="shayla"],
    html body section.shayla-direction-block img[src*="Shayla"],
    html body section.shayla-direction-block img[src*="logo"] {
        display: block !important;
        position: static !important;

        width: auto !important;
        max-width: 250px !important;

        height: auto !important;
        max-height: 140px !important;

        margin: 0 0 24px !important;

        object-fit: contain !important;
        object-position: left center !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 20 !important;
    }

    /*
     * Textes.
     */
    html body section.shayla-direction-block h1,
    html body section.shayla-direction-block h2,
    html body section.shayla-direction-block h3,
    html body section.shayla-direction-block h4,
    html body section.shayla-direction-block p,
    html body section.shayla-direction-block strong,
    html body section.shayla-direction-block span {
        display: block !important;
        position: static !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        color: #f5efe7 !important;

        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;

        z-index: 20 !important;
    }

    html body section.shayla-direction-block h2,
    html body section.shayla-direction-block h3 {
        margin: 0 0 20px !important;

        font-size: clamp(42px, 13vw, 66px) !important;
        line-height: .95 !important;
        letter-spacing: -.035em !important;
        font-weight: 400 !important;
    }

    html body section.shayla-direction-block p {
        margin: 0 0 20px !important;

        font-size: 17px !important;
        line-height: 1.65 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
    }

    /*
     * Le premier petit texte reste le kicker doré.
     */
    html body section.shayla-direction-block p:first-of-type {
        margin-bottom: 14px !important;

        color: #d9b46c !important;

        font-size: 12px !important;
        line-height: 1.5 !important;
        letter-spacing: .16em !important;
        text-transform: uppercase !important;
    }

    /*
     * Bouton Shayla.
     */
    html body section.shayla-direction-block a {
        display: inline-flex !important;
        position: static !important;

        width: auto !important;
        max-width: 100% !important;
        min-height: 54px !important;

        margin: 12px 0 0 !important;
        padding: 15px 24px !important;

        align-items: center !important;
        justify-content: center !important;

        border: 1px solid rgba(217, 180, 108, .72) !important;
        border-radius: 999px !important;

        background: rgba(217, 180, 108, .10) !important;
        color: #e7c77f !important;

        font-size: 13px !important;
        line-height: 1.3 !important;
        letter-spacing: .06em !important;
        text-align: center !important;
        text-decoration: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 30 !important;
    }

    /*
     * Les pseudo-éléments décoratifs ne doivent pas recouvrir le texte.
     */
    html body section.shayla-direction-block::before,
    html body section.shayla-direction-block::after,
    html body section.shayla-direction-block *::before,
    html body section.shayla-direction-block *::after {
        pointer-events: none !important;
    }
}

@media screen and (max-width: 390px) {
}
