/* ==============================================
   CLAUDE DESIGN PACK — Jeux de Rue 2026
   Modernization layer, no breaking changes
   ============================================== */

/* ===== 1. TYPOGRAPHY POLISH ===== */
:root{
    --jdr-primary:#ff2d2d;
    --jdr-primary-light:#ff6b35;
    --jdr-bg-dark:#0b0b10;
    --jdr-bg-card:#13151c;
    --jdr-bg-card-hover:#1a1d29;
    --jdr-border:#1c1f2b;
    --jdr-border-hover:#ff2d2d33;
    --jdr-text:#f1f5f9;
    --jdr-text-muted:#94a3b8;
    --jdr-text-dim:#64748b;
    --jdr-shadow-glow:0 0 30px -10px rgba(255,45,45,.4);
    --jdr-shadow-card:0 4px 20px -8px rgba(0,0,0,.6);
    --jdr-radius:12px;
    --jdr-radius-lg:16px;
}

body{
    color:var(--jdr-text) !important;
    font-feature-settings:"kern","liga","calt";
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{letter-spacing:-.02em;font-weight:800}
h1{line-height:1.1}
h2{line-height:1.2}

/* ===== 2. SCROLLBARS ===== */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:#0d0f14}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--jdr-primary),var(--jdr-primary-light));border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:var(--jdr-primary-light)}
*{scrollbar-width:thin;scrollbar-color:var(--jdr-primary) #0d0f14}

/* ===== 3. SELECTION ===== */
::selection{background:var(--jdr-primary);color:#000}
::-moz-selection{background:var(--jdr-primary);color:#000}

/* ===== 4. CATEGORIES CAROUSEL — modern look ===== */
.categories-swiper .swiper-slide{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
.categories-swiper .swiper-slide:hover{transform:translateY(-4px)}
.categories-swiper a > div{transition:all .3s cubic-bezier(.25,.46,.45,.94) !important}
.categories-swiper a:hover > div{
    box-shadow:var(--jdr-shadow-glow);
    transform:translateY(-2px);
}
.categories-swiper img{transition:transform .5s cubic-bezier(.25,.46,.45,.94) !important}
.categories-swiper a:hover img{transform:scale(1.08) !important}

/* Cat card label gradient overlay */
.categories-swiper a > div::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:60%;
    background:linear-gradient(180deg,transparent 0%,rgba(11,11,16,.9) 100%);
    pointer-events:none;
    z-index:1;
}
.categories-swiper a > div > div:last-child{position:relative;z-index:2}

/* ===== 5. VIDEO CARDS — premium polish ===== */
.vcard-hover{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
.vcard-hover:hover{transform:translateY(-3px)}
.vcard-hover a{
    transition:border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.25,.46,.45,.94) !important;
}
.vcard-hover:hover a{
    border-color:var(--jdr-primary) !important;
    box-shadow:0 10px 40px -10px rgba(255,45,45,.35),0 0 0 1px rgba(255,45,45,.15) !important;
}

/* Smooth thumbnail transition */
.vcard-hover img.hover-thumb{transition:transform .5s cubic-bezier(.25,.46,.45,.94),opacity .3s !important}
.vcard-hover:hover img.hover-thumb{transform:scale(1.05)}

/* Better play button overlay */
.vcard-hover .group-hover\:scale-100{
    transition:all .25s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Badge animation */
.vcard-hover [class*="bg-gradient-to-r"][class*="from-[#ff2d2d]"]{
    animation:badgePulse 2.5s ease-in-out infinite;
}
@keyframes badgePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,45,45,.4)}
    50%{box-shadow:0 0 0 6px rgba(255,45,45,0)}
}

/* ===== 6. NAVIGATION & HEADER — sticky polish ===== */
header,nav.sticky,div.sticky.top-0{
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
}

/* Top promo bar gradient animation */
[class*="bg-gradient-to-r"][class*="from-[#ff2d2d]"]:not(.vcard-hover *):not(.swiper-slide *){
    background-size:200% 100%;
    animation:gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}

/* ===== 7. BUTTONS — micro-interactions ===== */
button,a.btn,[class*="bg-[#ff2d2d]"]:not(.vcard-hover *):not(.categories-swiper *){
    transition:transform .15s cubic-bezier(.25,.46,.45,.94),box-shadow .25s,filter .25s !important;
}
button:active,a.btn:active{transform:translateY(1px) scale(.98)}
button:hover:not(:disabled){filter:brightness(1.1)}

/* ===== 8. SECTION HEADINGS — visual hierarchy ===== */
section > .container > div > h2,
section h2.section-title,
main h2{
    position:relative;
    padding-left:16px;
    margin-bottom:1.5rem;
}
section > .container > div > h2::before,
section h2.section-title::before,
main h2::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:70%;
    background:linear-gradient(180deg,var(--jdr-primary),var(--jdr-primary-light));
    border-radius:2px;
}

/* ===== 9. CARDS — soft elevation ===== */
.bg-\[\#151822\],.bg-\[\#13151c\]{
    background:linear-gradient(180deg,#151822 0%,#0d0f14 100%) !important;
    box-shadow:var(--jdr-shadow-card);
    border:1px solid var(--jdr-border) !important;
    transition:border-color .25s,transform .25s,box-shadow .25s !important;
}
.bg-\[\#151822\]:hover,.bg-\[\#13151c\]:hover{
    border-color:rgba(255,45,45,.3) !important;
}

/* ===== 10. LOADING SKELETONS ===== */
[loading="lazy"]:not([src]),[loading="lazy"][src=""]{
    background:linear-gradient(90deg,#1a1d29 0%,#2a2d39 50%,#1a1d29 100%);
    background-size:200% 100%;
    animation:skeletonLoad 1.5s ease-in-out infinite;
}
@keyframes skeletonLoad{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* ===== 11. PAGE TRANSITIONS ===== */
@media (prefers-reduced-motion: no-preference){
    main,section{
        animation:fadeInUp .5s cubic-bezier(.25,.46,.45,.94) backwards;
    }
    section:nth-child(2){animation-delay:.05s}
    section:nth-child(3){animation-delay:.1s}
    section:nth-child(4){animation-delay:.15s}
}
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(15px)}
    to{opacity:1;transform:translateY(0)}
}

/* ===== 12. FOOTER ENHANCEMENT ===== */
footer{
    background:linear-gradient(180deg,#0d0f14 0%,#000 100%);
    border-top:1px solid var(--jdr-border);
    margin-top:3rem;
    padding-top:3rem;
}
footer a{
    transition:color .2s,padding-left .2s;
    position:relative;
}
footer a:hover{color:var(--jdr-primary-light) !important;padding-left:4px}

/* ===== 13. MOBILE — better thumb-friendly UI ===== */
@media (max-width:640px){
    /* Bigger tap targets */
    button,a.btn,nav a{min-height:44px}

    /* Slightly larger video card text */
    .vcard-hover h3,.vcard-hover .text-sm{font-size:.875rem !important}

    /* Sticky bottom nav improvements */
    nav.fixed.bottom-0,div.fixed.bottom-0{
        backdrop-filter:saturate(180%) blur(20px);
        -webkit-backdrop-filter:saturate(180%) blur(20px);
        background:rgba(11,11,16,.95) !important;
        border-top:1px solid var(--jdr-border) !important;
    }

    /* Carousel touch hint */
    .categories-swiper{
        position:relative;
    }
    .categories-swiper::after{
        content:"";
        position:absolute;
        top:0;right:0;bottom:0;
        width:30px;
        background:linear-gradient(90deg,transparent,var(--jdr-bg-dark));
        pointer-events:none;
        z-index:2;
    }
}

/* ===== 14. FOCUS STATES (accessibility) ===== */
:focus-visible{
    outline:2px solid var(--jdr-primary);
    outline-offset:2px;
    border-radius:4px;
}

/* ===== 15. IMAGE SHARPENING ===== */
img{image-rendering:auto;backface-visibility:hidden}
.aspect-video img,.aspect-\[4\/5\] img{transform:translateZ(0)}

/* ===== 16. GRID GAPS POLISH ===== */
.grid{gap:1rem !important}
@media(min-width:768px){.grid{gap:1.25rem !important}}
@media(min-width:1024px){.grid{gap:1.5rem !important}}

/* ===== 17. TAGS PILLS ===== */
[class*="text-[10px]"][class*="text-[#ff2d2d]"]{
    transition:all .2s !important;
    border-radius:6px !important;
    padding:.15rem .4rem !important;
    background:rgba(255,45,45,.08) !important;
}
[class*="text-[10px]"][class*="text-[#ff2d2d]"]:hover{
    background:rgba(255,45,45,.2) !important;
    transform:translateY(-1px);
}

/* ===== 18. PROMO TOP BAR — modernize ===== */
.bg-gradient-to-r.from-\[\#ff2d2d\].to-\[\#ff6b35\]:first-child{
    font-weight:700;
    letter-spacing:.02em;
}

/* ===== 19. VIDEO COUNT BADGE ===== */
.categories-swiper [class*="text-[#ff2d2d]"][class*="font-bold"]{
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    padding:.25rem .5rem;
    border-radius:6px;
    border:1px solid rgba(255,45,45,.3);
}

/* ===== 20. SEARCH BAR (if present) ===== */
input[type="search"],input[type="text"][placeholder*="echerche"],input[type="text"][placeholder*="earch"]{
    background:var(--jdr-bg-card) !important;
    border:1px solid var(--jdr-border) !important;
    color:var(--jdr-text) !important;
    transition:all .2s !important;
}
input[type="search"]:focus,input[type="text"]:focus{
    border-color:var(--jdr-primary) !important;
    box-shadow:0 0 0 3px rgba(255,45,45,.15) !important;
}

/* ===== 21. PREMIUM BADGE GLOW ===== */
[class*="PREMIUM"],span:has(>svg + text:contains("PREMIUM")){
    text-shadow:0 0 10px rgba(255,107,53,.5);
}

/* ===== 22. HD INDICATOR ===== */
.vcard-hover .text-\[10px\]:not(.text-\[\#ff2d2d\]):not([class*="bg-gradient"]){
    font-weight:600;
    letter-spacing:.05em;
}

/* ===== 23. SMOOTH SCROLL ===== */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== 24. BETTER MODAL BACKDROPS ===== */
.fixed.inset-0[class*="bg-black"]{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

/* ===== 25. PROGRESSIVE IMAGE LOAD ===== */
img{transition:opacity .3s ease-in-out}
img[loading="lazy"]:not(.loaded){opacity:.7}
img[loading="lazy"].loaded,img[loading="lazy"]:not([data-src]){opacity:1}

/* ===== 26. MOBILE BOTTOM NAV — premium glassmorphism ===== */
#mobile-bottom-nav{
    background:linear-gradient(180deg,rgba(11,11,16,.85) 0%,rgba(11,11,16,.98) 100%) !important;
    backdrop-filter:saturate(180%) blur(24px) !important;
    -webkit-backdrop-filter:saturate(180%) blur(24px) !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 -4px 24px -8px rgba(0,0,0,.5);
}
#mobile-bottom-nav a{
    transition:all .25s cubic-bezier(.25,.46,.45,.94) !important;
    position:relative;
}
#mobile-bottom-nav a svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
#mobile-bottom-nav a:hover svg,#mobile-bottom-nav a:active svg{transform:scale(1.15) translateY(-2px)}
#mobile-bottom-nav a.text-\[\#ff2d2d\]::before{
    content:"";
    position:absolute;top:-1px;left:25%;right:25%;
    height:2px;
    background:linear-gradient(90deg,transparent,#ff2d2d,transparent);
    border-radius:2px;
}

/* ===== 27. FOOTER — modern multi-column ===== */
footer{
    background:linear-gradient(180deg,#0d0f14 0%,#000 100%) !important;
    border-top:1px solid var(--jdr-border) !important;
}
footer h3,footer .text-white{color:#fff !important;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem}
footer ul li a,footer .text-zinc-400 a,footer .text-zinc-500 a{
    color:#94a3b8 !important;
    font-size:.875rem;
    transition:all .2s !important;
    display:inline-block;
    position:relative;
}
footer ul li a:hover,footer .text-zinc-400 a:hover{
    color:#ff6b35 !important;
    transform:translateX(3px);
}
footer ul li a::before{
    content:"›";
    position:absolute;left:-12px;top:0;
    opacity:0;
    color:#ff6b35;
    transition:opacity .2s;
}
footer ul li a:hover::before{opacity:1}
footer .container{padding-top:2rem !important;padding-bottom:2rem !important}

/* ===== 28. HEADER — premium sticky polish ===== */
header.sticky,header[class*="sticky"]{
    background:rgba(11,11,16,.85) !important;
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(255,255,255,.06) !important;
}

/* ===== 29. NAVIGATION LINKS hover effect ===== */
nav a{position:relative;transition:color .2s}
nav a:not(.bg-gradient-to-r)::after{
    content:"";
    position:absolute;
    left:50%;right:50%;
    bottom:-4px;
    height:2px;
    background:linear-gradient(90deg,#ff2d2d,#ff6b35);
    border-radius:1px;
    transition:left .3s,right .3s;
}
nav a:not(.bg-gradient-to-r):hover::after{left:0;right:0}

/* ===== 30. BREADCRUMB polish ===== */
nav.text-sm ol{flex-wrap:wrap;gap:.5rem !important;align-items:center}
nav.text-sm ol li{color:#94a3b8;font-size:.875rem;display:inline-flex;align-items:center}
nav.text-sm ol li a{color:#ff6b35 !important;font-weight:500;transition:color .2s}
nav.text-sm ol li a:hover{color:#fff !important}
nav.text-sm ol li:not(:last-child)::after{
    content:"›";
    margin-left:.5rem;
    color:#475569;
}

/* ===== 31. ADD SAFE-AREA padding to fixed bottoms for iPhone notch ===== */
@supports(padding:max(0px)){
    #mobile-bottom-nav,nav.fixed.bottom-0{
        padding-bottom:max(0px,env(safe-area-inset-bottom)) !important;
    }
}

/* ===== 32. MODERN PAGINATION ===== */
.pagination{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    list-style:none;
    padding:0;
    margin:2rem 0;
}
.pagination li{display:inline-flex}
.pagination li a,.pagination li span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 12px;
    border-radius:8px;
    background:#13151c;
    color:#94a3b8;
    border:1px solid #1c1f2b;
    text-decoration:none;
    font-weight:600;
    font-size:.875rem;
    transition:all .2s cubic-bezier(.25,.46,.45,.94);
}
.pagination li a:hover{
    background:rgba(255,45,45,.1);
    color:#fff;
    border-color:#ff2d2d;
    transform:translateY(-1px);
}
.pagination li.active span,.pagination li[aria-current] span{
    background:linear-gradient(135deg,#ff2d2d,#ff6b35) !important;
    color:#fff !important;
    border-color:#ff2d2d !important;
    box-shadow:0 4px 12px -4px rgba(255,45,45,.5);
}
.pagination li.disabled span{opacity:.4;cursor:not-allowed}

/* ===== 33. EMPTY STATE polish ===== */
.text-center.py-20,.text-center.py-12{
    background:#13151c;
    border:1px solid #1c1f2b;
    border-radius:16px;
    padding:3rem 1rem !important;
}