/* ========================================= */
/* 1. CONFIGURATION & BASES                  */
/* ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    --scale-blue: #251EAF;
    --scale-pink: #CE0089;
    --scale-white: #ffffff;
    --scale-black: #050520;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--scale-blue);
    color: var(--scale-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ========================================= */
/* 2. EFFETS VISUELS GLOBAUX                 */
/* ========================================= */

.bg-noise {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

.text-stroke {
    -webkit-text-stroke: 2px white;
    color: transparent;
    font-weight: 900;
    letter-spacing: 2px;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spinSlow 10s linear infinite;
}

/* ========================================= */
/* 3. HEADER & NAV                           */
/* ========================================= */
.nav-link {
    position: relative;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.7);
    transition: color 0.3s ease;
}
.nav-link:hover { color: white; }

/* ========================================= */
/* 4. SECTION 1 : HERO                       */
/* ========================================= */
.video-column-wrapper {
    position: relative; height: 120vh; top: -10vh; width: 280px; overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
.video-column { display: flex; flex-direction: column; gap: 20px; width: 100%; }

.scroll-up { animation: scrollUp 30s linear infinite; }
.scroll-down { animation: scrollDown 30s linear infinite; }

@keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes scrollDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }

.video-card-hero {
    border-radius: 50px; overflow: hidden; aspect-ratio: 9/16;
    border: 4px solid var(--scale-pink);
    background: #000;
    transform: translateZ(0);
}

.hero-title { line-height: 0.85; letter-spacing: -0.04em; text-transform: uppercase; }

.btn-pulse::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 3s infinite;
}
@keyframes shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }

/* ========================================= */
/* 5. SECTION 2 : PORTFOLIO                  */
/* ========================================= */
.big-marquee-wrapper {
    position: absolute; top: 50%; left: 0; width: 100%;
    transform: translateY(-50%) rotate(-5deg) scale(1.1); pointer-events: none; z-index: 0;
}
.big-marquee-content {
    white-space: nowrap; font-size: 12vw; font-weight: 900;
    -webkit-text-stroke: 0; color: var(--scale-pink); opacity: 0.7;
    animation: marqueeScroll 30s linear infinite;
}
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.glass-control-bar {
    background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.5rem; border-radius: 999px; display: inline-flex; gap: 0.5rem;
}
.filter-btn-neon {
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.filter-btn-neon:hover { background: rgba(255, 255, 255, 0.1); color: white; transform: translateY(-3px); }
.filter-btn-neon.active { background: var(--scale-pink); border-color: var(--scale-pink); color: white; box-shadow: 0 0 25px var(--scale-pink); transform: scale(1.05); }

.hover-focus-grid:hover .portfolio-card { opacity: 0.4; filter: blur(2px); transform: scale(0.95); }
.hover-focus-grid .portfolio-card:hover { opacity: 1; filter: blur(0); transform: scale(1.05); z-index: 10; border-color: var(--scale-pink); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.logo-marquee { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }

/* ========================================= */
/* 6. SECTION 3 : PROCESS (TRACEUR)          */
/* ========================================= */
.process-line-container { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.05); z-index: 10; }
.process-line-fill { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 0%; background: var(--scale-pink); box-shadow: 0 0 15px var(--scale-pink); z-index: 11; border-radius: 10px; }
.process-line-head { position: absolute; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background: white; border: 4px solid var(--scale-pink); border-radius: 50%; box-shadow: 0 0 20px white; z-index: 12; top: 0%; }

.process-step { position: relative; z-index: 20; margin-bottom: 180px; opacity: 0.1; filter: blur(10px) grayscale(100%); transform: scale(0.9); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.process-step.active { opacity: 1; filter: blur(0px) grayscale(0%); transform: scale(1); }

.concept-card { background: rgba(255,255,255,0.9); color: var(--scale-blue); padding: 1.5rem; border-radius: 1rem; width: 160px; position: absolute; box-shadow: 0 20px 50px rgba(0,0,0,0.5); font-weight: 900; text-transform: uppercase; font-size: 0.9rem; text-align: center; }
.rec-interface { position: relative; border: 2px solid rgba(255,255,255,0.2); border-radius: 20px; overflow: hidden; }
.rec-dot { width: 12px; height: 12px; background: #ff0000; border-radius: 50%; display: inline-block; margin-right: 8px; box-shadow: 0 0 10px #ff0000; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ========================================= */
/* 7. SECTION : MICRO-TROTTOIR (VIRAL)       */
/* ========================================= */
.viral-stream-wrapper {
    display: flex; width: 100%; overflow: hidden; padding: 40px 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.viral-track {
    display: flex; gap: 40px; width: max-content;
    animation: scrollHorizontal 30s linear infinite;
}
.viral-track:hover { animation-play-state: paused; }

@keyframes scrollHorizontal { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.micro-card {
    position: relative; width: 260px; aspect-ratio: 9/16; border-radius: 20px;
    overflow: hidden; border: 4px solid rgba(255, 255, 255, 0.1); background: black;
    transform: skewX(-3deg); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.micro-card:hover {
    transform: skewX(0deg) scale(1.1) rotate(2deg); z-index: 20;
    border-color: var(--scale-pink); box-shadow: 10px 10px 0px var(--scale-pink);
}

.partner-sticker {
    background: linear-gradient(135deg, #FFD700, #FFA500); color: black; font-weight: 900;
    text-transform: uppercase; padding: 0.5rem 1.5rem; transform: rotate(-3deg); display: inline-block;
    border: 2px solid white; box-shadow: 5px 5px 0px rgba(255,255,255,0.5);
    animation: floatSticker 3s ease-in-out infinite;
}
@keyframes floatSticker { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-5px); } }

.views-badge {
    position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px); border-radius: 99px; padding: 4px 10px;
    font-size: 0.7rem; font-weight: bold; color: white; display: flex; align-items: center; gap: 4px;
}

/* ========================================= */
/* 8. SECTION : WALL OF FAME (VERTICAL)      */
/* ========================================= */
.vertical-stream-container {
    height: 1200px; overflow: hidden; position: relative;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.vertical-track {
    display: flex; flex-direction: column; gap: 24px; width: 100%;
}
.scroll-y-up { animation: scrollUp 40s linear infinite; }
.scroll-y-down { animation: scrollDown 40s linear infinite; }

.vertical-stream-container:hover .scroll-y-up,
.vertical-stream-container:hover .scroll-y-down { animation-play-state: paused; }

.showcase-card-vertical {
    position: relative; width: 100%; aspect-ratio: 9/16; border-radius: 30px;
    overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.1); background: black; transition: all 0.3s ease;
}
.showcase-card-vertical:hover {
    border-color: var(--scale-pink); transform: scale(1.02); box-shadow: 0 10px 40px rgba(206, 0, 137, 0.3); z-index: 10;
}
.brand-pill {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 14px; border-radius: 99px;
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 90%;
}

/* ========================================= */
/* 9. SECTION AGENCE (POLAROID)              */
/* ========================================= */
.photo-stack-container { position: relative; width: 100%; height: 500px; display: flex; justify-content: center; align-items: center; }
.polaroid-card {
    position: absolute; width: 280px; height: 340px; background: white; padding: 10px 10px 40px 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); transform-origin: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-radius: 12px; overflow: hidden;
}
.polaroid-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.3s ease; }
.photo-stack-container:hover .polaroid-card { filter: grayscale(0%); }
.photo-stack-container:hover .polaroid-card img { filter: grayscale(0%); }
.photo-stack-container:hover .p-1 { transform: translate(-120px, -20px) rotate(-15deg) scale(1.1); z-index: 10; }
.photo-stack-container:hover .p-2 { transform: translate(0px, -60px) rotate(5deg) scale(1.1); z-index: 20; }
.photo-stack-container:hover .p-3 { transform: translate(120px, 20px) rotate(15deg) scale(1.1); z-index: 30; }

.coffee-ticket {
    background: #fff; color: var(--scale-black); padding: 1.5rem; border-radius: 1rem; position: relative;
    border-left: 2px dashed #ccc; border-right: 2px dashed #ccc;
}
.coffee-ticket::after {
    content: ''; position: absolute; top: 50%; left: 10px; right: 10px; height: 1px; border-top: 2px dashed #000; opacity: 0.1;
}

/* ========================================= */
/* 10. SECTION PACKS (PRICING)                */
/* ========================================= */
.pricing-card {
    background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 2.5rem; padding: 3rem 2rem;
    position: relative; transition: transform 0.1s ease; transform-style: preserve-3d; will-change: transform;
}
.pricing-card:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); }
.pricing-card.featured {
    background: linear-gradient(160deg, rgba(206, 0, 137, 0.1) 0%, rgba(37, 30, 175, 0.2) 100%);
    border: 2px solid var(--scale-pink); box-shadow: 0 0 80px rgba(206, 0, 137, 0.1);
}
.pricing-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); line-height: 1.5; }
.check-icon { flex-shrink: 0; width: 24px; height: 24px; background: white; color: var(--scale-blue); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; }
.pricing-card.featured .check-icon { background: var(--scale-pink); color: white; }
.price-strike { position: relative; display: inline-block; color: rgba(255, 255, 255, 0.4); font-weight: 700; }
.price-strike::after { content: ''; position: absolute; left: -10%; top: 50%; width: 120%; height: 2px; background: var(--scale-pink); transform: rotate(-10deg); }

/* ========================================= */
/* 11. SECTION FAQ & SOCIALS                 */
/* ========================================= */
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; }
.faq-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.faq-question { cursor: pointer; position: relative; padding: 2rem 0; }
.faq-question:hover h3 { color: var(--scale-pink); padding-left: 10px; }
.faq-question h3 { transition: all 0.3s ease; }
.faq-icon { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.faq-item.active .faq-icon { background: var(--scale-pink); border-color: var(--scale-pink); transform: rotate(45deg); color: white; }
.faq-item.active .faq-question h3 { color: var(--scale-pink); }
.faq-answer { height: 0; overflow: hidden; color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; line-height: 1.6; }
.faq-content { padding-bottom: 2rem; }
.faq-list li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.faq-list li::before { content: '→'; position: absolute; left: 0; color: var(--scale-pink); font-weight: bold; }

.social-card {
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.social-card:hover {
    background: rgba(255, 255, 255, 0.1); transform: translateY(-10px) scale(1.02);
    border-color: var(--scale-pink); box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}