/* ── Overrides & nouveaux styles ── */

/* NAV SCROLL */
.nav {
    padding: 2vw 4vw;
    transition: background 0.4s ease, padding 0.4s ease;
}
.nav.scrolled {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.2vw 4vw;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.nav.scrolled .nav-wrapper {
    mix-blend-mode: normal;
    color: #1D1D1F;
}

/* EN COURS SECTION */
.en-cours { padding: 5rem 4vw; background: #FFFFFF; }
.en-cours .works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 420px));
    justify-content: start;
    gap: 2.5vw;
}

/* WORK INFO */
.work-info { padding-top: 0.8vw; display: flex; flex-direction: column; gap: 0.3rem; }
.work-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
.work-meta { font-size: 11px; color: #555; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }

/* BROWSER MOCKUP */
.browser-mockup {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.07);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.work-item:hover .browser-mockup {
    transform: translateY(-6px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.16);
}
.browser-bar {
    background: #f0f0f0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.browser-dots { display: flex; gap: 5px; }
.browser-dots i {
    display: block; width: 10px; height: 10px;
    border-radius: 50%; background: #ddd; font-style: normal;
}
.browser-dots i:nth-child(1) { background: #ff5f56; }
.browser-dots i:nth-child(2) { background: #ffbd2e; }
.browser-dots i:nth-child(3) { background: #27c93f; }
.browser-url {
    flex: 1;
    background: #e3e3e3;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    color: #666;
    text-align: center;
    font-family: 'Inter', sans-serif;
}
.badge-wip {
    background: #FF8DA1; color: #fff;
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; padding: 4px 10px; border-radius: 40px;
    white-space: nowrap;
}
.browser-screen {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9;
}
.browser-screen img {
    width: 100%; height: 100%; object-fit: cover; object-position: top;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-item:hover .browser-screen img { transform: scale(1.03); }
.browser-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.4s ease;
}
.browser-overlay span {
    color: #fff; font-size: 0.9rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.work-item:hover .browser-overlay { opacity: 1; }

/* CONTACT SANS FORMULAIRE */
.contact-info-only {
    display: flex; flex-direction: row; gap: 6vw;
    margin-top: 2vw; flex-wrap: wrap;
}

/* MOBILE */
@media (max-width: 768px) {
    .en-cours { padding: 14vw 6vw; }
    .contact-info-only { flex-direction: column; gap: 8vw; }
}