/* ==========================================================================
   DESIGN SYSTEM - LUXE TECH (DARK MODE)
   ========================================================================== */
:root {
    /* Colors */
    --c-black: #000000;
    --c-dark-pure: #050505; /* Légère nuance pour casser la monotonie */
    --c-border: #161616;     /* La fameuse ligne fine de 1px façon Vercel */
    --c-border-hover: #2A2A2A;
    --c-text-primary: #EDEDED;
    --c-text-muted: #888888;
    --c-white: #FFFFFF;

    /* Fonts */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ==========================================================================
   GLOBAL RESET
   ========================================================================== */
body {
    font-family: var(--font-body);
    background-color: var(--c-black);
    color: var(--c-text-primary);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* Typography Utilities */
.font-space { font-family: var(--font-heading); }
.font-inter { font-family: var(--font-body); }
.tracking-tight { letter-spacing: -0.03em; }
.tracking-wider { letter-spacing: 0.05em; }
.fs-7 { font-size: 0.8rem; }

/* Custom Backgrounds & Layout elements */
.bg-dark-pure { background-color: var(--c-dark-pure) !important; }
.text-muted-grey { color: var(--c-text-muted) !important; }
.section-border-top { border-top: 1px solid var(--c-border); }

.section-padding { padding: 90px 0; }
@media (min-width: 992px) {
    .section-padding { padding: 130px 0; }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Buttons - Luxe Tech Minimalist */
.btn-luxe {
    background-color: var(--c-white);
    color: var(--c-black);
    border: 1px solid var(--c-white);
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
}

.btn-luxe:hover {
    background-color: var(--c-black);
    color: var(--c-white);
    border-color: var(--c-border-hover);
}

.btn-link-luxe {
    color: var(--c-text-primary);
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.btn-link-luxe:hover {
    color: var(--c-white);
}

.btn-link-luxe i {
    transition: transform 0.2s ease;
}

.btn-link-luxe:hover i {
    transform: translate(2px, -2px);
}

/* Navbar Luxe */
.tech-nav {
    transition: background-color 0.2s ease, border-color 0.2s ease;
    padding: 24px 0;
    background-color: transparent;
}

.tech-nav.scrolled {
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    padding: 14px 0;
    border-bottom: 1px solid var(--c-border);
}

.text-dot { color: rgba(255, 255, 255, 0.4); }

.navbar-nav .nav-link {
    color: var(--c-text-muted) !important;
    font-size: 0.95rem;
    font-weight: 400;
    margin: 0 12px;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover, 
.navbar-nav .nav-link:focus {
    color: var(--c-white) !important;
}

/* Badge Contextuel */
.tech-badge {
    background-color: #0A0A0A;
    border: 1px solid var(--c-border);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.85rem;
    color: var(--c-text-primary);
    font-family: var(--font-heading);
}

.badge-dot {
    width: 6px;
    height: 6px;
    background-color: #00FF66; /* Un point vert d'activité serveur discret */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #00FF66;
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    padding-top: 120px;
}

.text-glow {
    background: linear-gradient(180deg, #FFFFFF 0%, #A3A3A3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Cards Luxe Premium (Vercel Style) */
.luxe-card {
    background-color: #050505;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.luxe-card:hover {
    border-color: var(--c-border-hover);
    background-color: #080808;
}

.card-icon-wrapper {
    width: 44px;
    height: 44px;
    background-color: #0A0A0A;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Timeline / Methodology */
.luxe-timeline {
    position: relative;
    padding-left: 2px;
}

.step-num {
    font-size: 0.9rem;
    background-color: #0A0A0A;
    border: 1px solid var(--c-border);
    color: var(--c-white);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Case Studies Cards */
.luxe-work-card {
    background-color: #030303;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.luxe-work-card:hover {
    border-color: var(--c-border-hover);
}

.work-media-placeholder {
    width: 100%;
    height: 280px;
    background-color: #070707;
    border-bottom: 1px solid var(--c-border);
}

/* Footer UI elements */
.footer-link-luxe {
    color: var(--c-text-muted);
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-link-luxe:hover {
    color: var(--c-white);
}

.footer-email-luxe {
    transition: opacity 0.2s ease;
}

.footer-email-luxe:hover {
    opacity: 0.8;
}

.footer-bottom-border {
    border-top: 1px solid var(--c-border);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
.fade-up {
    opacity: 0;
    transform: translateY(15px); /* Animation plus courte et plus haut de gamme */
    transition: opacity 0.6s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.05s; }
.delay-2 { transition-delay: 0.1s; }
.delay-3 { transition-delay: 0.15s; }