:root {
    --bg-1: #0b1117;
    --bg-2: #0e141b;
    --brand-1: #2B22EE;
    --brand-2: #6c5ce7;
}

/* Ultra-small phones: tighten navbar further (moved to common.css) */
@media (max-width: 360px) {
  .nav-links .search-link { width: 40px; height: 40px; }
}

/* Extra-narrow phones: force-hide Partenariats title */
@media (max-width: 600px) {
  #partenariats-title { display: none !important; }
}

/* Ensure no parent color overrides the gradient fill */
#film7 .fiche-right #film7-title .urbanos-grad {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* box-sizing reset moved to common.css */

body {
    margin: 0;
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
    min-height: 100vh;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent;
}

/* .sr-only moved to common.css */

/* SOLUTION : Bloquer le scroll quand une popup est active */
body:has(.fiche-popup:target) {
    overflow: hidden;
    height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    pointer-events: none;
    z-index: -1;
}

/* Navigation (desktop styles are unified in common.css) */

/* .logo styles are centralized in common.css to keep title identical across pages */

.nav-links { display: flex; gap: 15px; }
.nav-links a { padding: 10px 20px; border-radius: 5px; font-weight: 600; color: #fff; text-decoration: none; transition: all .3s ease; white-space: nowrap; }

.discord-link { background: #2B22EE; }
.discord-link:hover { background: #241DE0; }

.yt-link { background: #FF0000; display: none !important; }
.yt-link:hover { background: #CC0000; }

/* Partenariat button in navbar */
.partner-link { background: #16a34a; }
.partner-link:hover { background: #15803d; }

.search-link { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.search-link:hover { background: rgba(255,255,255,.2); }

/* Desktop/tablet: show loupe.png before the text */
.nav-links .search-link { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.nav-links .search-link::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('loupe.png') no-repeat center / contain;
    filter: none !important;
    opacity: 1 !important;
}

/* Carousel */
.carousel-section { margin: 0 0 60px; overflow: hidden; }

.carousel-container {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 2.25 / 1;
    min-height: 400px;
    overflow: hidden; /* prevent any overflow on all devices */
}

.carousel-slides { display: flex; width: 500%; height: 100%; animation: carousel-auto 25s infinite; margin: 0; padding: 0; gap: 0; will-change: transform; transition: transform .6s ease; }

/* Manual navigation: stop auto animation when user interacts */
.carousel-slides.manual { animation: none !important; }

@keyframes carousel-auto {
    0%, 18% { transform: translateX(0); }
    20%, 38% { transform: translateX(-20%); }
    40%, 58% { transform: translateX(-40%); }
    60%, 78% { transform: translateX(-60%); }
    80%, 98% { transform: translateX(-80%); }
    100% { transform: translateX(0); }
}

.carousel-slide {
    flex: 0 0 20%; /* Chaque slide = 20% de la largeur totale */
    min-width: 20%;
    margin: 0;
    position: relative;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    aspect-ratio: 2.26 / 1;
    transform: translateZ(0); /* GPU compositing */
}

.carousel-slide.alex-focus {
    /* Responsive vertical focus using percentage for desktop/tablet */
    background-position: center 12%;
}

.carousel-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.60) 40%,
        rgba(0, 0, 0, 0.20) 100%
    );
    z-index: 1;
}

.carousel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    z-index: 2;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 30%,
        rgba(0, 0, 0, 0.35) 100%
    );
}

.carousel-title { font-size: 2.5rem; font-weight: 700; color: #fff; margin: 0 0 15px; text-shadow: none; }

.carousel-description { font-size: 1.1rem; color: rgba(255,255,255,.9); line-height: 1.5; margin: 0 0 20px; max-width: 600px; text-shadow: none; }

.carousel-genres { display: flex; gap: 10px; margin: 15px 0 20px; flex-wrap: wrap; align-items: center; }

.carousel-genre-tag { background: rgba(255,255,255,.06); color: #e6eef5; padding: 6px 14px; border-radius: 20px; font-size: .85rem; font-weight: 600; border: 1px solid rgba(255,255,255,.12); backdrop-filter: none; }

/* Inline rating in carousel, placed before genre tags */
.carousel-genres .carousel-rating {
    display: inline-flex;
    align-items: center;
    font-size: 1.3rem; /* slightly larger for better emphasis */
    line-height: 1; /* tight to avoid misalignment */
    font-weight: 600; /* lighter like popup */
    color: #ffffff; /* keep numbers white for readability */
    margin-right: 8px;
}
.carousel-genres .carousel-rating .star {
    color: #FFD54A; /* yellow star */
    margin-right: 4px;
}

.carousel-btn { display: inline-flex; align-items: center; gap: 8px; background: #2B22EE; color: #fff; padding: 12px 24px; border-radius: 5px; text-decoration: none; font-weight: 600; font-size: .95rem; transition: all .3s ease; backdrop-filter: none; border: 1px solid #2B22EE; }

.carousel-btn:hover { background: #241DE0; transform: translateY(-1px); box-shadow: none; }

.carousel-btn::before {
    content: 'ⓘ';
    font-size: 1rem;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
    color: #fff !important;
    filter: none !important;
}

/* Indicateurs de slides */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 3;
    pointer-events: auto; /* enable pointer events on mobile */
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: indicator-cycle 25s infinite;
    border: none; /* in case indicators are buttons in the future */
}

/* When navigating manually, stop indicator animation and show active state */
.carousel-indicators.manual .carousel-indicator { animation: none !important; }
.carousel-indicator.active { background: #2B22EE; transform: scale(1.3); }

.carousel-indicator:nth-child(1) { animation-delay: 0s; }
.carousel-indicator:nth-child(2) { animation-delay: 5s; }
.carousel-indicator:nth-child(3) { animation-delay: 10s; }
.carousel-indicator:nth-child(4) { animation-delay: 15s; }
.carousel-indicator:nth-child(5) { animation-delay: 20s; }

@keyframes indicator-cycle {
    0%, 16% { 
        background: #2B22EE;
        transform: scale(1.3);
    }
    20%, 100% { 
        background: rgba(255, 255, 255, 0.4);
        transform: scale(1);
    }
}

/* Sections */
.section { margin: 50px 0; }

.section h2 { margin: 0 40px 30px; font-size: 32px; font-weight: 700; color: #ffffff; display: inline-block; padding-bottom: 0; border: none; }

/* Grille */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; padding: 0 40px; }

/* Cartes */
.card {
    background: rgba(26,35,50,0.8);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    position: relative; /* enable overlay watermark */
}

.card:hover { 
    transform: scale(1.03);
    border-color: #2B22EE;
    box-shadow: none;
}

.card img { 
    width: 100%; 
    aspect-ratio: 9/12; 
    object-fit: cover; 
    transition: transform 0.3s ease;
}

.card:hover img {
    transform: none;
}

/* Hide film title text on index cards as requested */
.card .card-info span { display: none; }

.stars { 
    color: #2B22EE; 
    font-size: 16px; 
}

/* Base link styles are defined in common.css */

/* Popups avec position fixe et conservation du scroll */
.fiche-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: clamp(12px, 3vw, 20px);
    backdrop-filter: none;
    overscroll-behavior: contain; /* empêche le scroll de fond sur mobile */
}

.fiche-popup:target { 
    display: flex; 
}

.fiche-content {
    width: 100%;
    max-width: 2000px;
    max-height: 95vh;
    background: rgba(26, 35, 50, 0.95);
    border-radius: 16px;
    display: grid;
    gap: 30px;
    padding: 30px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
/* ... */
.fiche-content {
    grid-template-columns: 1fr 1.5fr; /* Layout par défaut pour images portrait */
}

/* Alternative : class CSS pour forcer le layout paysage */
.fiche-content.landscape-layout {
    grid-template-columns: 2fr 1fr;
}

.fiche-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.fiche-content img { 
    width: 100%;
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    border-radius: 12px;
    margin-bottom: 20px;
    object-fit: contain;
}

/* Style spécifique pour les images paysage */
.fiche-content img.landscape {
    max-height: 70vh;
    width: 100%;
    object-fit: cover;
}

.fiche-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px; /* Décalage supplémentaire du texte vers la droite */
}

.fiche-content h3 { 
    margin: 0 0 16px 0; 
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    scroll-margin-top: 12px;
}

/* Per-title font styles */
#film2-title { font-family: inherit; font-size: inherit; }

/* Backrooms Urbanos title base size */
#film7-title {
    font-size: clamp(28px, 5vw, 44px);
}

/* Inline SVG sizing for URBANOS logo */
#film7-title .urbanos-svg { display: inline-block; line-height: 1; }
#film7-title .urbanos-logo { height: 1.10em; width: auto; vertical-align: -0.32em; display: inline-block; }

/* Apply VHS pixel style ONLY to "Backrooms" */
#film7-title .backrooms-vhs {
    font-family: 'VT323', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.08em; /* légèrement plus grand */
    /* Pas de contour */
    -webkit-text-stroke: 0; 
    text-shadow: none; 
}

#film7-title .urbanos-grad {
    display: inline-block;
    font-weight: 800; /* bold look for the second word */
    font-family: 'Luckiest Guy', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* rounded bubbly logo style */
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Three clear bands with top specular highlight for glossy 3D look */
    background: linear-gradient(180deg,
        #ffffff 0%, #ffffff 2%,       /* thin white highlight at the very top */
        #6fe3ff 2%, #6fe3ff 8%,       /* small cyan highlight under the white */
        #28cf63 8%, #28cf63 48%,      /* vivid green band (dominant) */
        #ffe35a 48%, #ffe35a 62%,     /* brighter, thinner yellow band */
        #ff7f10 62%, #ff7a00 100%     /* warm orange to deep orange */
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* show gradient as text fill */
    -webkit-text-fill-color: transparent; /* ensure gradient shows in WebKit/Blink */
    /* Subtle stroke around glyphs for crisp edges (WebKit-capable browsers) */
    -webkit-text-stroke: 0.6px rgba(0,0,0,0.35);
    /* Multi-layer shadow to simulate bevel + soft glow and drop + colored rims */
    text-shadow:
      0 -1px 0 rgba(255,255,255,0.95),   /* crisp top rim highlight */
     -1px -1px 0 rgba(111,227,255,0.85), /* cyan rim top-left */
      0 1px 0 rgba(0,0,0,0.28),          /* inner lower edge */
      0 2px 2px rgba(0,0,0,0.28),        /* subtle depth */
      0 4px 6px rgba(0,0,0,0.38),        /* drop shadow similar to logo */
      0 0 6px rgba(255,165,0,0.22),      /* warm glow */
      1px 1px 0 rgba(255,122,0,0.65);    /* orange rim bottom-right */
}
#film5-title { font-family: 'Anton', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: 1px; }
#film3-title, #film1-title { font-family: 'Cinzel', Georgia, 'Times New Roman', serif; }
#serie1-title { font-family: 'Bevan', Georgia, serif; letter-spacing: 2px; text-transform: uppercase; }
#serie2-title { font-family: 'Rye', Georgia, serif; }
/* Karma: bold and stretched */
#film4-title {
    font-family: 'Anton', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: 900;
    letter-spacing: 1.5px;
    display: inline-block; /* allow transform scaling */
    transform: scaleX(1.35);
    transform-origin: left center;
    text-transform: uppercase;
}

/* Urbanos City: chunky white slab for URBANOS + stylized "city" below */
#film6-title { display: inline-block; line-height: 1; }
#film6-title .urbanos {
    display: inline-block;
    font-family: 'Bevan', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-transform: uppercase;
    font-size: clamp(22px, 4vw, 40px);
    letter-spacing: 1px;
    color: #ffffff;
    /* bold outline/shadow look */
    text-shadow:
      0 2px 0 rgba(0,0,0,0.55),
      0 6px 14px rgba(0,0,0,0.55);
}
#film6-title .city {
    display: inline-block;
    font-family: 'Baloo 2', 'Shrikhand', system-ui, sans-serif;
    font-weight: 800;
    text-transform: lowercase;
    font-size: clamp(22px, 3.8vw, 36px); /* render larger to reduce hinting spikes */
    color: #ffffff;
    margin-left: 8px;
    letter-spacing: -0.2px;
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 0, "dlig" 0, "clig" 0, "calt" 0, "swsh" 0, "kern" 1;
    font-synthesis: none;
    line-height: 1;
    transform: scale(0.86); /* scale down for smoother edges */
    transform-origin: left bottom;
    will-change: transform;
}

/* ===== Specific color treatments ===== */
/* La vie au petit âge: dark red with shadow */
#film1-title {
    color: #8B0000; /* dark red */
    text-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.5);
}
/* Lawless Legend: darker red */
#serie2-title { color: #6E0000; }
/* DEDOUBLEMENT: bluish drop shadow (no outline) */
#film2-title {
    color: #ffffff; /* white */
    font-weight: 800; /* bold */
    font-size: 34px; /* larger */
    text-transform: uppercase;
    /* Soft, bluish shadow inspired by the reference */
    text-shadow:
      0 8px 18px rgba(11, 61, 145, 0.55),  /* main soft drop */
      0 2px 4px rgba(11, 61, 145, 0.45),   /* near shadow */
      0 0 14px rgba(11, 61, 145, 0.30);    /* ambient glow */
}

/* Make all popup titles large and consistent like DEDOUBLEMENT */
#film1-title,
#film2-title,
#film3-title,
#film4-title,
#film5-title,
#film6-title,
#serie1-title,
#serie2-title {
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.1;
    display: inline-block;
    min-width: 12ch; /* approx width of 'DEDOUBLEMENT' */
    text-align: left;
}
/* Ensure nested spans inherit unified size */
#film6-title .urbanos,
#film6-title .city,
#film5-title .trailer-word,
#film5-title .batman-word,
#serie1-title .al,
#serie1-title .ex { font-size: 1em; }

/* Alex: AL green, EX pink */
#serie1-title .al { color: #9CFF00; }
#serie1-title .ex { color: #ff69b4; }
/* Trailer Batman: 'Trailer' white, 'Batman' red */
#film5-title .trailer-word { color: #ffffff; }
#film5-title .batman-word { color: #ff2a2a; font-weight: 800; }

/* Card title styles removed per request */

.fiche-content p { 
    margin: 15px 0; 
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    text-align: justify;
}

.rating-genres {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.fiche-content .stars { 
    font-size: 20px;
    margin: 0;
    color: #ffffff;
}

.fiche-content .stars::first-letter {
    color: #FFD54A; /* warm yellow */
}

.genres {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}

.genre-tag {
    background: rgba(255, 255, 255, 0.06);
    color: #e6eef5;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
}

.button-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-top: 12px;
    margin-top: 16px;
    background: transparent;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.button {
    background: #2B22EE;
    border-radius: 5px;
    padding: 12px 24px;
    color: #fff;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    min-height: 44px;
}

.button:hover { 
    transform: translateY(-1px);
    box-shadow: none;
}

.close-btn { 
    background: #ff4444;
}

.close-btn:hover { 
    background: #cc0000;
    box-shadow: none;
}

/* Position the close button at the top-right of popup content */
.fiche-content .top-right-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

/* Style pour empêcher le scroll vers le haut lors de la fermeture */
html {
    scroll-behavior: auto; /* disable smooth to avoid animated jump after closing popup */
}

/* Responsive mobile */
@media (max-width: 768px) {
    /* Footer on mobile: visible, stacked lines, left aligned, tight padding */
    .footer { 
        display: block; 
        padding: 16px; 
        margin-top: 30px; 
        background: #000; 
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .footer .footer-inner {
        display: grid;
        grid-template-columns: 1fr; /* one column */
        row-gap: 10px;
        align-items: start;
        max-width: 100%;
        margin: 0; /* stick to edges */
    }
    .footer .footer-inner > div:first-child {
        justify-self: start;
        text-align: left; /* first line: text */
    }
    .footer .footer-actions {
        justify-self: start;
        text-align: left; /* second line: buttons */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .footer .footer-actions a {
        margin-left: 0 !important; /* override inline margins */
    }
    .footer .footer-actions .button {
        padding: 10px 14px;
        border-radius: 8px;
        margin-left: 0 !important; /* remove extra gaps on first button per inline styles */
    }

    /* Banderole (mobile layout unified in common.css) */
    /* Hide partenariat button on mobile */
    .nav-links .partner-link { display: none; }
    .nav-links a { padding: 8px 12px; font-size: 14px; width: auto; flex: 0 0 auto; }
    .nav-links a:not([href*="youtu"]) { padding: 6px 10px; }
    .nav-links .search-link { 
        padding: 10px; 
        font-size: 16px; 
        background: #434344 !important; 
        border-radius: 5px; 
        width: 44px; 
        height: 44px; 
        border: 1px solid #3a3a3b; 
        box-shadow: 0 2px 6px rgba(0,0,0,0.25); 
        margin-left: auto !important; 
    } /* Darker grey button on mobile */
    .nav-links .search-link { 
        text-indent: -9999px; 
        overflow: hidden; 
        position: relative; 
    }
    /* Mobile: hide text and center the image icon */
    .nav-links .search-link::before { 
        content: ''; 
        position: absolute; 
        left: 50%; 
        top: 50%; 
        transform: translate(-50%, -50%); 
        width: 24px; 
        height: 24px; 
        background: url('loupe.png') no-repeat center / contain; 
        filter: none !important; 
        opacity: 1 !important; 
    }
    /* Title overflow rules are handled in common.css */

    /* Show and enable carousel on mobile */
    .carousel-section { display: block; margin: 0 0 40px; }
    .carousel-container { overflow: hidden; }
    .carousel-slides { animation: carousel-auto 25s infinite; will-change: transform; backface-visibility: hidden; transform: translate3d(0,0,0); }
    .carousel-slide { transform: translateZ(0); background-image: initial; }
    /* Alex slide mobile tweak: keep head/torso visible on small screens */
    .carousel-slide.alex-focus { background-position: center 22%; }
    /* Prevent subpixel gaps/rounding on some mobile browsers */
    .carousel-slides, .carousel-slide { 
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .carousel-container { min-height: 220px; }
    .carousel-content { padding: 16px; }
    .carousel-title { font-size: 1.4rem; }
    .carousel-description { display: none; }

    /* Footer: stack actions under text on mobile (one column) */
    .footer .footer-inner {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 10px;
        align-items: start;
    }
    .footer .footer-actions {
        justify-self: stretch;
        text-align: left;
        display: flex;
        flex-direction: column; /* force buttons below each other */
        gap: 8px;
        width: 100%;
        margin-left: 0 !important;
    }
    .footer .footer-actions .button {
        width: 100%; /* full width buttons on mobile */
        margin-left: 0 !important;
    }
    /* Neutralize desktop float that could affect footer text on mobile */
    .footer .footer-inner > div:nth-child(2) > span { float: none; }
    .carousel-genres { gap: 4px; margin: 8px 0 10px; }
    /* Hide genres in carousel on mobile to save space, keep rating visible */
    .carousel-genres .carousel-genre-tag { display: none !important; }
    .carousel-genres .carousel-rating { font-size: 1.25rem; }
    /* Replace dots by arrows on mobile */
    .carousel-indicators { display: none !important; }
    .carousel-arrows { 
        display: inline-flex; 
        position: absolute; 
        bottom: calc(8px + env(safe-area-inset-bottom)); 
        right: 12px; 
        gap: 8px; 
        pointer-events: auto; 
    }
    /* Phone/tablet: hide Partenariats title entirely and tighten spacing */
    #partenariats-title { display: none !important; }
    #partenariats .fiche-right > h3#partenariats-title { display: none !important; }
    body.is-mobile #partenariats .fiche-right > h3#partenariats-title { display: none !important; }
    #partenariats .fiche-right > p:first-of-type { margin-top: 0 !important; }
    .carousel-arrow { 
        width: 48px; 
        height: 48px; 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        background: rgba(0, 0, 0, 0.5); /* fond translucide noir */
        color: #ffffff; /* flèches blanches via currentColor */
        border-radius: 5px; 
        border: 1px solid rgba(255,255,255,0.18);
        -webkit-tap-highlight-color: transparent; 
    }
    /* Remove blue outline on mobile tap/click */
    .carousel-arrow:focus,
    .carousel-arrow:focus-visible,
    .carousel-arrow:active { outline: none !important; box-shadow: none !important; }

    .section { margin: 30px 0; }
    .section h2 { margin: 0 16px 16px; font-size: 24px; color: #2B22EE; }
    /* Smaller cards on mobile grids */
    .grid { padding: 0 16px; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    /* Rails padding on mobile */
    .rail { 
        padding: 0; 
        /* Smaller cards in rails on mobile */
        grid-auto-columns: clamp(120px, 42vw, 180px);
        gap: 12px;
        scroll-snap-type: none !important;   /* force disable snapping on mobile */
        scroll-padding-left: 0 !important;   /* ensure first card aligns exactly at left */
        scroll-padding-inline-start: 0 !important;
    }
    /* Also disable snap alignment on children for mobile */
    .rail > .card, .rail > * {
        scroll-snap-align: none !important;
        scroll-margin: 0 !important;
        scroll-margin-inline-start: 0 !important;
    }
    /* Keep consistent alignment for all sections: no extra left padding on mobile */

    /* Ensure rating text (including /5) stays white on mobile */
    .rating-genres .stars,
    .fiche-content .stars { color: #ffffff !important; }

    .fiche-popup { 
        padding-left: max(12px, env(safe-area-inset-left)); 
        padding-right: max(12px, env(safe-area-inset-right)); 
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        min-height: 100svh; /* compat meilleurs barres d'adresse mobiles */
        align-items: center;
    }

    /* Popup: centrage strict du conteneur */
    .fiche-content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "content";
        width: 100%;
        max-width: 95vw;
        max-height: min(90svh, 90dvh);
        padding: 20px;
        justify-items: center;
        align-items: start;
        gap: 16px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
    }
    
    .fiche-left { 
        align-items: center; 
        width: 100%; 
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .fiche-content img { 
        display: block; 
        margin: 0 auto 16px; 
        max-width: 90%;
        max-height: 50svh; 
        height: auto;
        border-radius: 12px;
    }
    
    .fiche-right {
        padding-left: 0;
        text-align: center;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .fiche-content h3 { 
        text-align: center !important; 
        margin: 0 0 12px 0;
        width: 100%;
        color: inherit; /* allow per-title colors */
        display: block;            /* ensure full-width block for centering */
        min-width: 0;              /* remove desktop min-width constraint */
        margin-left: auto;         /* explicit center safety */
        margin-right: auto;        /* explicit center safety */
    }
    /* Neutralize left-biased transforms on mobile to keep visual centering */
    #film4-title { 
        transform: none; 
        transform-origin: center center; 
    }
    
    .fiche-content p { 
        text-align: center; 
        margin: 0 auto 16px;
        max-width: 400px;
        line-height: 1.5;
    }
    
    .rating-genres { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 12px; 
        flex-wrap: wrap;
        width: 100%;
        margin: 0 auto 16px;
    }
    
    .rating-genres .stars { 
        display: inline-block; 
        font-size: 18px;
        margin: 0;
        color: #2B22EE;
    }
    
    .genres { 
        display: flex; 
        gap: 8px; 
        justify-content: center; 
        flex-wrap: wrap;
        align-items: center;
    }
    
    .genre-tag { 
        font-size: 13px; 
        padding: 4px 10px;
        white-space: nowrap;
    }
    
    .button-group { 
        display: flex; 
        gap: 12px; 
        flex-wrap: wrap;
        justify-content: center; 
        width: 100%;
        margin: 16px auto 0;
        padding-top: 16px;
    }
    
    .button { 
        flex: 1 1 auto;
        max-width: 200px;
        min-width: 120px;
        text-align: center; 
        padding: 14px 20px; 
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Neutralize system dark mode: keep site appearance unchanged in dark mode */
@media (prefers-color-scheme: dark) {
    :root { color-scheme: light; }
}

/* Amélioration des performances */
@media (prefers-reduced-motion: reduce) {
    .carousel-slides {
        animation: none;
    }
    
    .carousel-indicator {
        animation: none;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Footer */
.footer {
    margin-top: 60px;
    padding: 32px 40px;
    background: #000;
    color: #8fa3b8;
    border-top: 1px solid rgba(255,255,255,0.16); /* thin white delimiter */
}
.footer .footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}
.footer .footer-actions { justify-self: end; text-align: right; }
.footer a { color: #c8d4e0; text-decoration: none; }
.footer a:hover { color: #fff; }

/* Header extras (menu, search, avatar) */
.search { display: none; }

/* Small Discord button to replace avatar */
.discord-mini { display: none; width: 36px; height: 36px; border-radius: 50%; background: #5865F2; border: 1px solid rgba(255,255,255,0.18); color: #fff; font-weight: 800; align-items: center; justify-content: center; text-decoration: none; }
.discord-mini:hover { filter: brightness(0.95); }
/* Desktop: show full nav (links + search), keep only one external button */
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .search { display: none; }
  .discord-mini { display: none; }
}
/* Ensure any yt link in nav stays hidden if present */
nav[aria-label="Navigation principale"] .yt-link { display: none !important; }

/* Rails (rows like Netflix) */
/* Base layout for all viewports (keeps cards correctly sized on mobile) */
.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(180px, 18vw, 240px);
    gap: 18px;
    overflow-x: auto;
    overflow-y: visible; /* allow hover lift without clipping */
    overscroll-behavior-x: contain;
}
/* Desktop-only: add side paddings + enable snapping */
@media (min-width: 769px) {
  .rail {
      padding: 0 40px;
      scroll-snap-type: inline mandatory; /* enable snapping on desktop only */
  }
}
.rail::-webkit-scrollbar { height: 10px; }
.rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
@media (min-width: 769px) {
  .rail > .card { scroll-snap-align: start; }
}

  /* Global scrollbar styles provided by common.css */

  /* Card hover actions */
  .card { position: relative; }
  .card-actions {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.75) 100%);
    opacity: 0;
    transition: opacity .25s ease;
}
.card:hover .card-actions { opacity: 1; }
.carousel-arrow:focus { outline: 2px solid #2B22EE; outline-offset: 2px; }
.carousel-arrow:hover { background: rgba(0,0,0,0.7); transform: translateY(-1px); }
.carousel-arrow svg { width: 24px; height: 24px; display: block; }
.quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #2B22EE;
    border: 1px solid #2B22EE;
    color: #fff;
    padding: 10px 14px;
    }
    /* Ensure any yt link in nav stays hidden if present */
    nav[aria-label="Navigation principale"] .yt-link { display: none !important; }

    /* Rails (rows like Netflix) - desktop only duplication */
    @media (min-width: 769px) {
        .rail {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: clamp(180px, 18vw, 240px);
            gap: 18px;
            padding: 0 40px;
            overflow-x: auto;
            overflow-y: visible; /* allow hover lift without clipping */
            overscroll-behavior-x: contain;
            scroll-snap-type: inline mandatory; /* desktop only */
        }
        .rail::-webkit-scrollbar { height: 10px; }
        .rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
        .rail > .card { scroll-snap-align: start; }
    }

    /* Card hover actions */
    .card { position: relative; }
    .card-actions {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.75) 100%);
        opacity: 0;
        transition: opacity .25s ease;
    }
    .card:hover .card-actions { opacity: 1; }
    .quick-btn:hover { background: #241DE0; }

    /* Mobile overrides for rails (use grid like before) */
 

     /* Subtle animated gradient background */
     body {
         background: radial-gradient(1200px 600px at 10% -10%, rgba(43,34,238,0.18), transparent 60%),
                     radial-gradient(1000px 700px at 100% 10%, rgba(108,92,231,0.18), transparent 60%),
                     linear-gradient(180deg, var(--bg-2), var(--bg-1));
     }
     
     /* ===== Visual Enhancements (Index) ===== */
    /* Section titles: plain white, no underline */
    .section h2 {
        border: none;
        color: #ffffff;
    }

    /* Card polish */
    .card {
        background: linear-gradient(180deg, rgba(26,35,50,0.65), rgba(26,35,50,0.9));
        box-shadow:
          0 10px 30px rgba(0,0,0,0.35),
          inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 38px rgba(0,0,0,0.45);
    }
    .card img { will-change: transform; }

     /* Buttons */
     .carousel-btn,
     .quick-btn,
     .button {
         background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
         border: 1px solid rgba(255,255,255,0.14);
         box-shadow: 0 10px 20px rgba(43,34,238,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
     }
     .carousel-btn:hover,
     .quick-btn:hover,
     .button:hover {
         filter: brightness(0.95);
         transform: translateY(-1px);
     }

     /* Keep partenariat button green even when using .button styles */
     .button.partner-link {
         background: #16a34a !important;
         border: 1px solid rgba(255,255,255,0.14);
         box-shadow: 0 10px 20px rgba(22,163,74,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
     }
     .button.partner-link:hover {
         background: #15803d !important;
         filter: brightness(0.98);
     }

     /* Discord footer button (blue) */
     .button.discord-btn {
         background: #5865F2 !important; /* Discord brand */
         border: 1px solid rgba(255,255,255,0.14);
         box-shadow: 0 10px 20px rgba(88,101,242,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
     }
     .button.discord-btn:hover {
         background: #4752C4 !important;
         filter: brightness(0.98);
     }
     .button.discord-btn svg {
         width: 35px;
         height: 35px;
         display: inline-block;
         vertical-align: middle;
     }

     /* YouTube footer button (red) */
     .button.youtube-btn {
         background: #FF0000 !important; /* YouTube brand */
         border: 1px solid rgba(255,255,255,0.14);
         box-shadow: 0 10px 20px rgba(255,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
     }
     .button.youtube-btn:hover {
         background: #CC0000 !important;
         filter: brightness(0.98);
     }
     .button.youtube-btn svg {
         width: 30px;
         height: 30px;
         display: inline-block;
         vertical-align: middle;
         position: relative;
         top: -2px; /* slightly up */
     }

     /* Footer buttons aligned to the right while keeping original layout */
     .footer .footer-inner > div:nth-child(2) { text-align: right; }
     .footer .footer-inner > div:nth-child(2) > span { float: left; }
     .footer .footer-inner > div:nth-child(2)::after { content: ""; display: table; clear: both; }

     /* Prevent cards from being clipped on hover translateY in all sections */
    .section .rail { padding-top: 10px; }

     /* Focus-visible ring */
     :where(a, button, .quick-btn, input, [tabindex]):focus-visible {
         outline: 2px solid rgba(99,102,241,0.9);
         outline-offset: 2px;
         box-shadow: 0 0 0 6px rgba(99,102,241,0.25);
     }

     /* Smoother transitions */
    * { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }

    /* Category label via data-type attribute for new genre sections */
    .card .card-info::before { margin-right: 8px; }
    .card .card-info[data-type="film"]::before { content: "Film"; }
    .card .card-info[data-type="serie"]::before { content: "Série"; }
    .card .card-info[data-type="trailer"]::before { content: "Trailer"; }

    /* Improve legibility for 'Trailer' in film5 title: keep lowercase and use a font with distinct 'i' dot */
    #film5-title .trailer-word {
        text-transform: none !important;
        font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
        letter-spacing: 0.3px;
    }