@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --ff-orange:  #FF5E1A;
    --ff-noir:    #0a0a0a;
    --ff-noir2:   #111111;
    --ff-noir3:   #181818;
    --ff-blanc:   #ffffff;
    --ff-gris:    #888888;
    --ff-font:    'Montserrat', sans-serif;
    --ff-font-h:  'Bebas Neue', 'Montserrat', sans-serif;
}

/* ── BASE ── */
html {
    background: var(--ff-noir) !important;
}
body {
    background: var(--ff-noir) !important;
    color: var(--ff-blanc) !important;
    font-family: var(--ff-font) !important;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
a { text-decoration: none !important; }
li, span, td, th { color: var(--ff-blanc) !important; }
p:not(.ff-card-t):not(.ff-card-g) { color: var(--ff-blanc) !important; text-align: justify; }
p.ff-hero-s, .ff-hero-s, .ff-hero-body p, .ff-hero-body .ff-hero-s { text-align: left !important; }
div:not(.ff-card-t):not(.ff-card-g):not(.ct-panel-inner):not(.ct-panel-content):not(.ct-panel-content-inner):not(.ct-panel-actions) { color: var(--ff-blanc) !important; }
h1,h2,h3,h4,h5,h6 { color: var(--ff-blanc) !important; font-family: var(--ff-font) !important; }

/* ── DRAWER MENU MOBILE ── */
#offcanvas.ct-panel {
    background: transparent !important;
}
#offcanvas .ct-panel-inner {
    background: rgba(10,10,10,0.75) !important;
}
#offcanvas .ct-panel-content,
#offcanvas .ct-panel-content-inner {
    background: transparent !important;
}
#offcanvas a.ct-menu-link {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}
#offcanvas a.ct-menu-link:hover,
#offcanvas .current-menu-item a.ct-menu-link {
    color: #FF5E1A !important;
}
#offcanvas .ct-toggle-close svg * {
    fill: #ffffff !important;
}

/* ── HEADER BLOCKSY ── */


/* Logo */
.site-title a,
.site-branding .site-title,
.ct-site-title {
    font-family: var(--ff-font-h) !important;
    font-weight: 900 !important;
    font-size: 17px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--ff-blanc) !important;
}

/* Menu */
.main-navigation a,
.ct-menu > li > a,
nav.main-navigation li a,
.ct-header-navigation a {
    font-family: var(--ff-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.6) !important;
    transition: color 0.2s ease !important;
    padding: 8px 14px !important;
}

.main-navigation a:hover,
.ct-menu > li > a:hover,
.ct-menu > li.current-menu-item > a,
nav.main-navigation li.current-menu-item a {
    color: var(--ff-blanc) !important;
}

/* Icône recherche header */
.ct-toggle-dropdown-appearance,
.ct-search-form button,
[data-id="search-trigger"] {
    color: rgba(255,255,255,0.5) !important;
}
[data-id="search-trigger"]:hover { color: var(--ff-blanc) !important; }

/* ── CONTENU PAGE ── */
.site-content,
.entry-content,
.page-content,
main,
article,
.ct-main-content-container {
    background: var(--ff-noir) !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force suppression padding Blocksy sur toutes les pages internes */
html body .ct-main-content-container,
html body .entry-content,
html body .page-content,
html body article.page,
html body article.post,
html body .ct-container > main,
html body main > .ct-container,
html body .wp-site-blocks > main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Cible le spacing Blocksy injecté via data-vertical-spacing — pages internes uniquement */
html body.page:not(.home) [data-vertical-spacing="top:bottom"],
html body.page:not(.home) [data-vertical-spacing="top"],
html body.page:not(.home) .ct-container-full[data-vertical-spacing] {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* Cache titre de page Blocksy */
.entry-header,
.page-header,
.ct-breadcrumbs,
.ct-meta-elements,
.entry-footer {
    display: none !important;
}

/* ── FOOTER ── */
.site-footer, footer.site-footer {
    background: var(--ff-noir2) !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    color: rgba(255,255,255,0.3) !important;
    font-family: var(--ff-font) !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
}
.site-footer a, footer a { color: rgba(255,255,255,0.4) !important; }
.site-footer a:hover, footer a:hover { color: var(--ff-orange) !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--ff-noir); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
* { scrollbar-color: rgba(255,255,255,0.12) var(--ff-noir); scrollbar-width: thin; }

/* ── HERO ACCUEIL ── */
.ff-home { width: 100%; }

.ff-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 80vh;
    min-height: 480px;
    margin-top: -90px;
    background: #111 top center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ff-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}
/* Desktop : image horizontale visible, portrait cachée */
.ff-hero-img-mobile { display: none; }
.ff-hero-img-desktop { display: block; }

/* Mobile : portrait visible, horizontale cachée */
@media (max-width: 767px) {
    .ff-hero {
        height: 150vw;
        min-height: unset;
        background-position: top center !important;
    }
    .ff-hero-img-desktop { display: none; }
    .ff-hero-img-mobile {
        display: block;
        object-position: center center;
    }
}

.ff-hero-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.4) 30%, transparent 70%);
    pointer-events: none;
}



.ff-hero-body {
    position: absolute;
    bottom: 180px;
    left: 0;
    right: 0;
    padding: 0 5%;
    z-index: 2;
    isolation: isolate;
}

.ff-hero-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 16px;
}

.ff-tag-g {
    font-family: var(--ff-font);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff !important;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 14px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9) !important;
}

.ff-tag-m {
    font-family: var(--ff-font);
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.7) !important;
    letter-spacing: 1px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9) !important;
    padding-left: 4px;
}
.ff-tag-m::before {
    content: '·';
    margin-right: 8px;
    opacity: 1;
    color: rgba(255,255,255,0.6) !important;
    font-size: 18px;
}

.ff-hero-t {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(4rem, 7vw, 7.5rem) !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 0.88 !important;
    margin: 0 0 8px !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.8), 0 4px 40px rgba(0,0,0,0.6) !important;
}

.ff-hero-s {
    font-family: var(--ff-font);
    font-size: 16px;
    font-weight: 400;
    color: #ffffff !important;
    line-height: 1.5;
    margin: 0 0 14px !important;
    max-width: 31vw;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    text-shadow: 0 1px 8px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.7) !important;
}

.ff-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #0a0a0a !important;
    font-family: var(--ff-font);
    font-size: 12px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    transition: background 0.25s ease, color 0.25s ease;
    width: fit-content;
    margin-top: 0;
}
.ff-hero-cta:hover {
    background: #FF5E1A !important;
    color: #ffffff !important;
}

/* ── SECTION NOUVEAUTÉS — superposition sur le hero ── */
.ff-home {
    position: relative;
}

.ff-section {
    position: relative;
    margin-top: -160px;
    padding: 0 5% 72px;
    z-index: 10;

}

.ff-section-lbl {
    font-family: var(--ff-font);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 20px !important;
    padding-top: 32px;
    text-align: left;
}

/* ── GRILLE FILMS ── */
.ff-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px 14px;
    align-items: start;
}

@media (max-width: 1200px) { .ff-grid { grid-template-columns: repeat(5,1fr); } }
@media (max-width: 960px)  { .ff-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 680px)  { .ff-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 480px)  { .ff-grid { grid-template-columns: repeat(2,1fr); gap: 14px 10px; } }

.ff-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none !important;
    cursor: pointer;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.ff-poster {
    position: relative;
    width: 100%;
    padding-top: 150%;
    border-radius: 4px;
    overflow: hidden !important;
    background: var(--ff-noir3);
    flex-shrink: 0;
}

.ff-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    display: block;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}

.ff-card:hover .ff-poster img { transform: scale(1.06); }

.ff-poster-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 4px;.ff-card:hover .ff-poster-shade { opacity: 1; }

.ff-no-img, .ff-no-poster {
    width: 100%;
    height: 100%;
    background: var(--ff-noir3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ff-card-t {
    font-family: var(--ff-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 8px 0 0 0 !important;
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
    padding: 0 2px !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    letter-spacing: 0.2px !important;
    line-height: 1.3 !important;
    height: 2.6em !important;
}

.ff-card-g {
    font-family: var(--ff-font) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.35) !important;
    margin: 0 !important;
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
    padding: 0 2px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* ── OVERLAY TRAILER ── */
.ff-trailer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.96);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.ff-trailer-overlay.ff-ov-on { opacity: 1; pointer-events: all; }

.ff-ov-inner {
    width: 90vw;
    max-width: 1200px;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.9);
}
.ff-ov-inner iframe { width: 100%; height: 100%; border: none; display: block; }

.ff-ov-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.65);
    font-size: 17px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.ff-ov-close:hover { background: rgba(255,255,255,0.14); color: var(--ff-blanc); }

/* ── CATALOGUE ── */
.ff-cat-wrap { padding: 20px 5% 80px; }

.ff-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
}

.ff-fil-l {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Dropdown custom — insensible aux overrides Blocksy */
.ff-dd {
    position: relative;
    display: inline-block;
}

.ff-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    font-family: var(--ff-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 155px;
    justify-content: space-between;
    transition: border-color 0.2s, background 0.2s;
    box-shadow: none;
    outline: none;
    width: auto;
    height: auto;
    line-height: 1.4;
}
.ff-dd-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; }
.ff-dd-btn svg { color: rgba(255,255,255,0.4); flex-shrink: 0; transition: transform 0.2s; stroke: currentColor; }
.ff-dd.ff-dd-open .ff-dd-btn { border-color: rgba(255,255,255,0.25); }
.ff-dd.ff-dd-open .ff-dd-btn svg { transform: rotate(180deg); }

.ff-dd-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.ff-dd.ff-dd-open .ff-dd-menu { display: block; }

.ff-dd-item {
    padding: 9px 14px;
    font-family: var(--ff-font);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.ff-dd-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ff-dd-item.ff-dd-active { color: #FF5E1A; font-weight: 700; }

.ff-cnt {
    font-family: var(--ff-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25) !important;
    white-space: nowrap;
    padding-left: 4px;
}

.ff-srch-w {
    position: relative;
    display: flex;
    align-items: center;
}

.ff-srch-w svg {
    position: absolute;
    left: 12px;
    color: rgba(255,255,255,0.3) !important;
    pointer-events: none;
}

.ff-srch-w input {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.85) !important;
    font-family: var(--ff-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 10px 14px 10px 36px !important;
    border-radius: 6px !important;
    width: 220px !important;
    max-width: 220px !important;
    box-shadow: none !important;
    transition: border-color 0.2s, background 0.2s !important;
}
.ff-srch-w input::placeholder { color: rgba(255,255,255,0.25) !important; }
.ff-srch-w input:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.15) !important; }
.ff-srch-w input:focus { outline: none !important; border-color: rgba(255,255,255,0.25) !important; box-shadow: none !important; }

/* Grille catalogue 5 colonnes */
.ff-cat-wrap .ff-grid {
    grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 1100px) { .ff-cat-wrap .ff-grid { grid-template-columns: repeat(4,1fr) !important; } }
@media (max-width: 800px)  { .ff-cat-wrap .ff-grid { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 540px)  { .ff-cat-wrap .ff-grid { grid-template-columns: repeat(2,1fr) !important; } }

/* ── DIVERS ── */
.ff-empty {
    text-align: center !important;
    padding: 80px 0 !important;
    color: rgba(255,255,255,0.25) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    width: 100% !important;
    display: block !important;
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
}

/* ============================================================
   BLOCKSY OVERRIDES — Maximum specificity
   ============================================================ */

/* Cache le carré blanc (widget area / account) */
.ct-header-widgets,
.ct-header-account,
[data-id="account-menu"],
.ct-woo-cart,
.header-cart,
.blc-widget-area,
.ct-widget-area,
.wp-block-search,
.ct-header [class*="widget"],
.ct-header [class*="account"],
.ct-header [class*="cart"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Header hauteur réduite */
html body .site-header,
html body header.site-header,
html body .ct-header:not(#offcanvas) {
    min-height: 70px !important;
    height: 70px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body .ct-header:not(#offcanvas) [data-row="main"],
html body .ct-header:not(#offcanvas).header-main-layout-1 {
    min-height: 70px !important;
    height: 70px !important;
    padding: 0 40px !important;
}

/* Logo plus grand */
html body .ct-header .site-branding img,
html body .ct-header img,
html body .ct-header .ct-image,
html body header img.ct-image,
html body .site-branding img {
    height: 48px !important;
    width: auto !important;
    max-height: 48px !important;
}

/* Menu couleur orange sur actif + hover, blanc sinon */
html body .ct-header .ct-menu > li > a,
html body .ct-header nav a,
html body .main-navigation li a,
html body header nav a {
    color: rgba(255,255,255,0.7) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', sans-serif !important;
}

html body .ct-header .ct-menu > li > a:hover,
html body .ct-header nav a:hover,
html body .main-navigation li a:hover,
html body header nav a:hover {
    color: #FF5E1A !important;
}

html body .ct-header .ct-menu > li.current-menu-item > a,
html body .main-navigation .current-menu-item > a {
    color: #FF5E1A !important;
}


/* ============================================================
   CORRECTIONS HEADER + MENU + TITRE
   ============================================================ */

/* Header fin mais avec assez de place pour le logo */
html body .site-header,
html body header.site-header,
html body .ct-header {
    min-height: 70px !important;
    height: 70px !important;
    padding: 0 !important;
}

html body .ct-header [data-row="main"],
html body .ct-header .header-main-layout-1,
html body header [data-row="main"] {
    min-height: 70px !important;
    height: 70px !important;
    padding: 0 32px !important;
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
}

/* Logo — force la taille et supprime marges */
html body .ct-header .site-branding,
html body .ct-header [data-id="logo"],
html body header .site-branding {
    display: flex !important;
    align-items: center !important;
    margin: 0 0 0 -2px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

html body .ct-header .site-branding img,
html body .ct-header [data-id="logo"] img,
html body header .custom-logo,
html body header img.custom-logo,
.site-header img {
    height: 58px !important;
    width: auto !important;
    max-height: 58px !important;
    min-height: 58px !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
}

/* Menu blanc + uppercase + page active en orange */
html body .ct-header .ct-menu > li > a,
html body .ct-header nav.main-navigation a,
html body header nav a,
html body .main-navigation li a {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

html body .ct-header .ct-menu > li > a:hover,
html body .ct-header nav.main-navigation a:hover,
html body header nav a:hover,
html body .main-navigation li a:hover,
html body .ct-header .ct-menu > li.current-menu-item > a,
html body .ct-header .ct-menu > li.current-menu-ancestor > a,
html body .main-navigation .current-menu-item > a,
html body .main-navigation .current-menu-ancestor > a {
    color: #FF5E1A !important;
}

/* Titre hero en Bebas Neue */
.ff-hero-t,
.ffs-title,
.ffs-info-title {
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: 4px !important;
    font-weight: 400 !important;
}

/* ============================================================
   BLOCKSY HEADER — classes exactes inspectées
   ============================================================ */

/* Conteneur principal du header */
.ct-header [data-row="middle:boxed"],
.ct-header [data-row="middle\:boxed"],
header .ct-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 100% !important;
}

/* Colonne logo (start) */
.ct-header [data-column="start"],
.ct-header [data-items="primary"],
.ct-header .site-branding {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Logo image — taille forcée */
.ct-header .site-branding img.default-logo,
.ct-header img.default-logo,
header img.default-logo,
.site-logo-container img {
    height: 56px !important;
    width: auto !important;
    max-height: 56px !important;
    max-width: none !important;
}


/* ================================================================
   RESPONSIVE FLUIDE — Tous écrans
   ================================================================ */
/* Note : les grilles utilisent des colonnes fixes définies plus haut
   (.ff-grid : 6 col accueil / .ff-cat-wrap .ff-grid : 5 col catalogue)
   avec leurs propres media queries — pas de auto-fill ici. */
.ff-hero-s {
    font-size: clamp(13px, 1.1vw, 16px) !important;
    max-width: 34vw !important;
}
.ff-hero-body {
    max-width: 34vw !important;
}
.ff-section, .ff-cat-wrap {
    padding-left: clamp(20px, 5%, 80px) !important;
    padding-right: clamp(20px, 5%, 80px) !important;
}


/* Grand écran — plus d'espace synopsis/bouton */
@media (min-width: 1441px) {
    .ff-hero-s {
        margin: 0 0 28px !important;
    }
}

/* Supprime l'espace ajouté par Blocksy avant le contenu de page */
html body .ct-sticky-container,
html body [data-row="middle"][data-transparent-row="yes"] ~ *,
html body .site-main,
html body #main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ================================================================
   RESPONSIVE MOBILE — max 600px
   ================================================================ */
@media (max-width: 767px) {

    /* Affiches — hauteur fixe pour uniformiser */
    .ff-poster {
        aspect-ratio: unset !important;
        width: 100% !important;
        height: 220px !important;
        overflow: hidden !important;
    }
    .ff-poster img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Hero accueil mobile */
    .ff-hero-body {
        max-width: 100% !important;
        padding: 0 5% !important;
        bottom: 180px !important;
    }
    .ff-hero-s {
        max-width: 100% !important;
        -webkit-line-clamp: 3 !important;
        font-size: 13px !important;
    }

    /* Catalogue — filtres + recherche sur une seule ligne */
    .ff-filters {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding-bottom: 16px !important;
        margin-bottom: 20px !important;
    }

    .ff-fil-l {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        flex: 1 !important;
    }

    /* Compteur films — caché sur mobile pour gagner de la place */
    .ff-cnt { display: none !important; }

    /* Barre de recherche — largeur auto */
    .ff-srch-w input {
        width: 120px !important;
        max-width: 120px !important;
        padding: 8px 8px 8px 30px !important;
        font-size: 11px !important;
    }

    /* Dropdowns — plus compacts */
    .ff-dd-btn {
        min-width: auto !important;
        font-size: 10px !important;
        padding: 8px 10px !important;
        letter-spacing: 1px !important;
    }
}