/* ═══════════════════════════════════════════════════════════════════════════ */
/* UNIS VERS DANYÈLE — Boutique premium · "Édition Sunset Vibrant" · v=8        */
/* Carte blanche refonte 12/10                                                 */
/* Palette : nuit chaude → ambre → coucher de soleil → crème doré              */
/* ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&family=Italiana&display=swap');

/* ─── 0. Fix global : pas de scroll horizontal, scrollbar dorée ───────────── */
html, body{
    overflow-x:hidden !important;
    max-width:100vw !important;
    scroll-behavior:smooth;
}
html{
    scrollbar-width:thin;
    scrollbar-color:#C9A227 rgba(40,18,3,0.4);
}
::-webkit-scrollbar{width:10px;height:0;background:transparent}
::-webkit-scrollbar-track{
    background:linear-gradient(180deg, rgba(15,7,3,0.7) 0%, rgba(74,40,16,0.4) 50%, rgba(245,217,168,0.3) 100%);
    border-radius:6px;
}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, #FFD78A 0%, #FFB800 30%, #C9A227 70%, #8B6914 100%);
    border-radius:6px;
    border:1.5px solid rgba(40,18,3,0.4);
    box-shadow:0 0 8px rgba(255,184,0,0.45), inset 0 1px 0 rgba(255,245,200,0.5);
}
::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, #FFE5A8 0%, #FFC838 30%, #E5B226 70%, #A07840 100%);
    box-shadow:0 0 14px rgba(255,184,0,0.75), inset 0 1px 0 rgba(255,250,220,0.6);
}
*{box-sizing:border-box}
*:not(:focus-visible){outline:none}

/* ─── 1. Fond global : voyage du clair-obscur au crème doré ──────────────── */
body{
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,148,40,0.28) 0%, transparent 60%),
        radial-gradient(circle at 12% 22%, rgba(255,184,0,0.16) 0%, transparent 35%),
        radial-gradient(circle at 88% 78%, rgba(229,85,26,0.16) 0%, transparent 38%),
        linear-gradient(180deg,
            #0A0502 0%,
            #1A0C04 6%,
            #2D1808 14%,
            #4A2810 24%,
            #6F3A18 36%,
            #9A5F28 48%,
            #C58438 58%,
            #E0A958 68%,
            #EFC78A 80%,
            #F5D9A8 90%,
            #FBE8C8 100%) !important;
    background-attachment:scroll !important;
    color:#3a2410 !important;
    font-family:'Montserrat', -apple-system, sans-serif !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:hidden !important;
    min-height:100vh;
    position:relative;
}

/* ─── 2. Texture noise subtile + glow halo doré ──────────────────────────── */
.ss-noise{
    opacity:0.05 !important;
    mix-blend-mode:overlay !important;
    pointer-events:none;
}
.ss-glow{
    background:
        radial-gradient(ellipse 60% 35% at 50% 8%, rgba(255,184,0,0.18) 0%, transparent 70%) !important;
    opacity:1 !important;
    z-index:0 !important;
    pointer-events:none;
}

/* ─── 3. Particules lucioles dorées, plus présentes ──────────────────────── */
.ss-particle{
    color:#FFD78A !important;
    filter:
        drop-shadow(0 0 10px rgba(255,184,0,0.85))
        drop-shadow(0 0 3px rgba(255,220,140,1)) !important;
    opacity:0.75 !important;
}
.ss-particle--xl, .ss-particle--lg{opacity:0.9 !important}
@keyframes ss-rise{
    0%{transform:translate(0,0) rotate(0deg);opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{transform:translate(var(--drift), -100vh) rotate(180deg);opacity:0}
}

/* ─── 4. Hero (bannière) : intégration full-bleed avec voile doré bas ────── */
.ss-hero{
    border-radius:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    position:relative;
    box-shadow:
        0 30px 80px rgba(15,7,3,0.6),
        inset 0 -1px 0 rgba(201,162,39,0.4) !important;
    z-index:1;
}
.ss-hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:120px;
    background:linear-gradient(to bottom,
        transparent 0%,
        rgba(15,7,3,0.15) 35%,
        rgba(15,7,3,0.45) 70%,
        rgba(15,7,3,0.7) 100%);
    pointer-events:none;
    z-index:2;
}
.ss-hero-overlay,
.ss-hero-blend{display:none !important}
.ss-hero-img{
    transition:transform 18s ease-out !important;
    transform:scale(1.0);
}
body:hover .ss-hero-img{transform:scale(1.04)}

/* ─── 5. Profil créateur : avatar + nom magnifiques ──────────────────────── */
.ss-profile{
    margin-top:-80px !important;
    position:relative;
    z-index:5;
    text-align:center;
    padding:0 1.5rem;
}
.ss-avatar{
    width:144px !important;
    height:144px !important;
    border:0 !important;
    border-radius:50%;
    background:linear-gradient(135deg, #FFE5A8, #FFB800, #C9A227) !important;
    padding:4px !important;
    box-shadow:
        0 0 0 1px rgba(40,18,3,0.5),
        0 0 0 8px rgba(15,7,3,0.45),
        0 0 30px 6px rgba(255,184,0,0.45),
        0 18px 50px rgba(15,7,3,0.55),
        inset 0 0 0 2px rgba(255,245,200,0.6) !important;
    animation:ssDanyAvatarFloat 7s ease-in-out infinite, ssDanyAvatarGlow 4s ease-in-out infinite !important;
    object-fit:cover;
}
@keyframes ssDanyAvatarFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
}
@keyframes ssDanyAvatarGlow{
    0%,100%{filter:drop-shadow(0 0 12px rgba(255,184,0,0.35))}
    50%{filter:drop-shadow(0 0 28px rgba(255,184,0,0.7))}
}

.ss-creator-name{
    font-family:'Italiana', 'Cormorant Garamond', serif !important;
    font-weight:400 !important;
    font-style:normal !important;
    letter-spacing:0.03em !important;
    font-size:clamp(2.6rem, 7vw, 4.4rem) !important;
    line-height:1.05 !important;
    margin:1.6rem auto 0.6rem !important;
    background:linear-gradient(135deg,
        #FFE5A8 0%,
        #FFD78A 20%,
        #FFB800 45%,
        #FF8A2C 70%,
        #FFB800 85%,
        #FFE5A8 100%) !important;
    background-size:200% 100% !important;
    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    background-clip:text !important;
    animation:ssDanyShimmer 8s linear infinite !important;
    filter:drop-shadow(0 2px 12px rgba(255,184,0,0.35)) drop-shadow(0 1px 1px rgba(0,0,0,0.4));
    text-shadow:none !important;
}
@keyframes ssDanyShimmer{
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
}

.ss-creator-bio{
    font-family:'Cormorant Garamond', serif !important;
    font-style:italic !important;
    font-weight:400 !important;
    color:#FFE5A8 !important;
    font-size:clamp(15px, 1.7vw, 19px) !important;
    letter-spacing:0.04em !important;
    opacity:0.85 !important;
    margin-top:4px !important;
    position:relative;
    display:inline-block;
    padding:0 1.2rem;
}
.ss-creator-bio::before,
.ss-creator-bio::after{
    content:"·";
    color:#C9A227;
    opacity:0.7;
    margin:0 0.7rem;
    font-size:1.2em;
}

/* ─── 6. Main contenant le compteur, filtre, grille ──────────────────────── */
.ss-main{
    position:relative;
    z-index:3;
    max-width:1300px !important;
    margin:0 auto !important;
    padding:3rem 2rem 0 !important;
}
.ss-divider{
    background:linear-gradient(90deg,
        transparent 0%,
        rgba(255,184,0,0.5) 30%,
        rgba(255,229,168,0.9) 50%,
        rgba(255,184,0,0.5) 70%,
        transparent 100%) !important;
    height:1px !important;
    margin:2.5rem auto 1.2rem !important;
    max-width:280px !important;
    box-shadow:0 0 10px rgba(255,184,0,0.4);
}
.ss-count{
    font-family:'Montserrat', sans-serif !important;
    font-size:10.5px !important;
    letter-spacing:0.5em !important;
    text-transform:uppercase !important;
    color:#FFD78A !important;
    opacity:0.85 !important;
    font-weight:600 !important;
    text-align:center !important;
    margin:0 auto 2.4rem !important;
    text-shadow:0 1px 8px rgba(255,184,0,0.3);
}

/* ─── 7. Filtre univers (si visible) : pills dorées ──────────────────────── */
.ss-uni-filter{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0.6rem;
    margin:0 auto 2rem;
    padding:0 1rem;
}
.ss-uni-btn{
    background:rgba(255,245,220,0.10) !important;
    border:1px solid rgba(255,184,0,0.35) !important;
    color:#FFE5A8 !important;
    font-family:'Montserrat', sans-serif !important;
    font-size:11px !important;
    letter-spacing:0.12em !important;
    text-transform:uppercase !important;
    font-weight:600 !important;
    padding:9px 18px !important;
    border-radius:24px !important;
    backdrop-filter:blur(8px);
    transition:all 320ms cubic-bezier(0.4,0,0.2,1) !important;
    cursor:pointer;
}
.ss-uni-btn:hover{
    background:rgba(255,184,0,0.18) !important;
    border-color:rgba(255,184,0,0.7) !important;
    color:#FFF6D8 !important;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(255,184,0,0.3);
}
.ss-uni-btn--active{
    background:linear-gradient(135deg, #FFB800 0%, #FF8A2C 100%) !important;
    border-color:rgba(255,229,168,0.6) !important;
    color:#1a0c03 !important;
    font-weight:700 !important;
    box-shadow:
        0 8px 24px rgba(255,138,44,0.45),
        inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* ─── 8. Grille cartes ───────────────────────────────────────────────────── */
.ss-cards{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap:1.8rem !important;
    margin-bottom:4rem !important;
}

/* ─── 9. Cartes : verre fumé crème, bordure or, élévation 3D ─────────────── */
.ss-card{
    background:linear-gradient(155deg,
        rgba(255,248,232,0.94) 0%,
        rgba(255,235,200,0.92) 100%) !important;
    border:1px solid rgba(201,162,39,0.45) !important;
    border-radius:22px !important;
    box-shadow:
        0 0 0 1px rgba(255,229,168,0.25),
        0 12px 36px rgba(15,7,3,0.35),
        0 4px 12px rgba(74,40,16,0.25),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
    overflow:hidden !important;
    position:relative;
    transition:
        transform 450ms cubic-bezier(0.4,0,0.2,1),
        box-shadow 450ms cubic-bezier(0.4,0,0.2,1),
        border-color 350ms !important;
    backdrop-filter:blur(8px);
    text-decoration:none !important;
}
.ss-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, transparent 0%, transparent 45%, rgba(255,229,168,0.18) 50%, transparent 55%, transparent 100%);
    background-size:200% 200%;
    background-position:-100% -100%;
    transition:background-position 700ms ease;
    pointer-events:none;
    border-radius:inherit;
    opacity:0;
}
.ss-card:hover::before{
    background-position:100% 100%;
    opacity:1;
}
.ss-card:hover{
    transform:translateY(-8px) scale(1.015) !important;
    border-color:rgba(255,184,0,0.75) !important;
    box-shadow:
        0 0 0 1px rgba(255,229,168,0.5),
        0 24px 60px rgba(15,7,3,0.5),
        0 10px 24px rgba(255,138,44,0.25),
        inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

.ss-card__visual{
    border-bottom:1px solid rgba(201,162,39,0.25) !important;
    position:relative;
    aspect-ratio:16/10 !important;
    overflow:hidden !important;
    background:rgba(15,7,3,0.05);
}
.ss-card__thumb{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transition:transform 800ms cubic-bezier(0.4,0,0.2,1) !important;
}
.ss-card:hover .ss-card__thumb{
    transform:scale(1.07) !important;
}
.ss-card__thumb-overlay{
    background:linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(15,7,3,0.18) 100%) !important;
}

.ss-card__body{
    padding:1.4rem 1.5rem 1.5rem !important;
    display:flex;
    flex-direction:column;
    gap:0.65rem;
}
.ss-card__badge{
    background:linear-gradient(135deg, rgba(255,184,0,0.20), rgba(229,85,26,0.14)) !important;
    color:#7A4420 !important;
    border:1px solid rgba(201,162,39,0.4) !important;
    font-family:'Montserrat', sans-serif !important;
    font-size:9.5px !important;
    letter-spacing:0.16em !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    padding:5px 12px !important;
    border-radius:20px !important;
    display:inline-flex !important;
    align-self:flex-start !important;
    width:auto !important;
    backdrop-filter:blur(6px);
}
.ss-card__title{
    font-family:'Cormorant Garamond', serif !important;
    font-weight:600 !important;
    color:#2D1A08 !important;
    letter-spacing:0.005em !important;
    line-height:1.18 !important;
    font-size:1.45rem !important;
    margin:0.2rem 0 0 !important;
}
.ss-card__desc{
    color:#6B4520 !important;
    font-family:'Montserrat', sans-serif !important;
    font-weight:400 !important;
    font-size:0.86rem !important;
    line-height:1.55 !important;
    opacity:0.88 !important;
    margin:0 !important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.ss-card__footer{
    margin-top:0.8rem !important;
    padding-top:1rem !important;
    border-top:1px dashed rgba(201,162,39,0.32) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:1rem !important;
}
.ss-card__price{
    font-family:'Cormorant Garamond', serif !important;
    font-weight:700 !important;
    background:linear-gradient(135deg, #E5551A 0%, #C9A227 100%) !important;
    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    background-clip:text !important;
    font-size:1.45rem !important;
    letter-spacing:-0.01em !important;
    line-height:1 !important;
}
.ss-card__price--free{
    background:linear-gradient(135deg, #C9A227, #FFB800) !important;
    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    background-clip:text !important;
    font-style:italic !important;
}
.ss-card__cta{
    background:linear-gradient(135deg, #FF8A2C 0%, #E5551A 100%) !important;
    color:#FFF8E8 !important;
    border:none !important;
    font-family:'Montserrat', sans-serif !important;
    font-size:0.74rem !important;
    font-weight:700 !important;
    letter-spacing:0.14em !important;
    text-transform:uppercase !important;
    padding:11px 22px !important;
    border-radius:24px !important;
    box-shadow:
        0 6px 18px rgba(229,85,26,0.4),
        inset 0 1px 0 rgba(255,255,255,0.32) !important;
    transition:all 320ms cubic-bezier(0.4,0,0.2,1) !important;
    position:relative;
    overflow:hidden;
    text-decoration:none !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:0.4rem !important;
    white-space:nowrap;
}
.ss-card__cta::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transform:translateX(-100%);
    transition:transform 700ms ease;
}
.ss-card:hover .ss-card__cta{
    box-shadow:
        0 12px 30px rgba(229,85,26,0.55),
        inset 0 1px 0 rgba(255,255,255,0.42) !important;
    transform:translateX(3px);
}
.ss-card:hover .ss-card__cta::after{
    transform:translateX(100%);
}

/* VSL hint */
.ss-card__vsl-hint{
    background:linear-gradient(135deg, rgba(15,7,3,0.7), rgba(229,85,26,0.85)) !important;
    color:#FFE5A8 !important;
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,184,0,0.5) !important;
}

/* ─── 10. Réseaux sociaux footer ────────────────────────────────────────── */
.ss-social-footer{
    border-top:none !important;
    padding:3rem 1rem 1.5rem !important;
    position:relative;
    margin-top:2rem !important;
}
.ss-social-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:60%;
    max-width:380px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,162,39,0.5), transparent);
}
.ss-social-mask{
    width:54px !important;
    height:54px !important;
    color:#E5551A !important;
    background:rgba(255,248,232,0.85) !important;
    border-radius:50% !important;
    box-shadow:
        0 4px 14px rgba(15,7,3,0.25),
        inset 0 1px 0 rgba(255,255,255,0.7) !important;
    transition:all 320ms cubic-bezier(0.4,0,0.2,1) !important;
}
.ss-social-mask:hover{
    color:#FFF8E8 !important;
    background:linear-gradient(135deg, #FF8A2C, #E5551A) !important;
    transform:translateY(-4px) scale(1.12) !important;
    box-shadow:
        0 12px 28px rgba(229,85,26,0.45),
        inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
.ss-social-mask svg{width:26px !important;height:26px !important}

/* ─── 11. Footer crédits ─────────────────────────────────────────────────── */
footer{
    border-top:none !important;
    background:transparent !important;
    padding:2rem 1.5rem 2.5rem !important;
    position:relative;
}
footer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:80%;
    max-width:600px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(139,90,31,0.35), transparent);
}
footer > div > div:first-child > span:first-child{
    color:#5C3818 !important;
    opacity:0.75 !important;
    font-family:'Cormorant Garamond', serif !important;
    font-style:italic !important;
    font-size:1.1rem !important;
}
footer > div > div:first-child > span:nth-child(2){
    color:rgba(74,40,16,0.55) !important;
}
footer a{
    color:#9A5F28 !important;
    transition:color 250ms ease;
}
footer a:hover{
    color:#E5551A !important;
}
footer a[href*="legales"], footer a[href*="cgv"], footer a[href*="confidentialite"]{
    color:rgba(74,40,16,0.55) !important;
    font-family:'Montserrat', sans-serif !important;
}
footer a[href*="legales"]:hover, footer a[href*="cgv"]:hover, footer a[href*="confidentialite"]:hover{
    color:#7A4420 !important;
}
footer > div > div:last-child{
    color:rgba(74,40,16,0.5) !important;
    font-family:'Montserrat', sans-serif !important;
    font-size:0.72rem !important;
    letter-spacing:0.1em;
}

/* ─── 12. Particules bannière (dust) plus subtiles dorées ───────────────── */
.ss-banner-dust .ss-bdp{
    background:radial-gradient(circle, rgba(255,229,168,0.9), rgba(255,184,0,0)) !important;
    filter:drop-shadow(0 0 4px rgba(255,184,0,0.6));
}

/* ─── 13. Responsive : mobile premium ────────────────────────────────────── */
@media (max-width:768px){
    .ss-main{padding:2rem 1.2rem 0 !important}
    .ss-cards{
        grid-template-columns:1fr !important;
        gap:1.4rem !important;
    }
    .ss-avatar{width:120px !important;height:120px !important}
    .ss-profile{margin-top:-60px !important}
    .ss-creator-name{font-size:2.2rem !important;letter-spacing:0.02em !important}
    .ss-creator-bio::before,
    .ss-creator-bio::after{display:none}
    .ss-card{border-radius:18px !important}
    .ss-card__title{font-size:1.3rem !important}
    .ss-card__price{font-size:1.3rem !important}
    .ss-hero::after{height:80px}
    .ss-social-mask{width:48px !important;height:48px !important}
    .ss-social-mask svg{width:22px !important;height:22px !important}
}
@media (max-width:480px){
    .ss-main{padding:1.5rem 0.9rem 0 !important}
    .ss-creator-name{font-size:1.9rem !important}
    .ss-divider{margin:2rem auto 1rem !important}
}

/* ─── 14. Reduce motion : on garde une dignité visuelle ─────────────────── */
@media (prefers-reduced-motion:reduce){
    .ss-avatar{animation:none !important}
    .ss-creator-name{animation:none !important;background-position:50% 50% !important}
    .ss-card, .ss-card__thumb, .ss-card__cta{transition:none !important}
}