:root {
    --bg: #0d0d0d;
    --white: #ffffff;
    --grey: #888888;
    --transition-smooth: cubic-bezier(0.8, 0, 0.1, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--white);
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    overflow: hidden; /* Bloque le scroll pendant le preloader */
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --- Preloader --- */
.preloader {
    position: fixed; inset: 0; background: #000; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}
.preloader-content { position: relative; width: 100%; text-align: center; }
.welcome-message {
    font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.3em;
    font-weight: 300; opacity: 0; position: absolute; width: 100%;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
/* --- Preloader Animé (Nouveau Style) --- */
.preloader-sequence {
    position: relative; 
    width: 380px; 
    height: 480px; 
    margin: 0 auto; 
    opacity: 0; 
    overflow: hidden; /* Garde les images bien dans le cadre */
}

.preloader-sequence img {
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%;
    object-fit: cover;
    /* Le secret : on cache l'image en la rognant à 100% par le bas */
    clip-path: inset(100% 0 0 0); 
    /* On la zoome un peu pour créer un effet de recul au reveal */
    transform: scale(1.3); 
}

/* --- Navigation --- */
/* --- Navigation --- */
.main-nav {
    position: fixed; 
    top: 0; 
    width: 100%; 
    display: flex;
    justify-content: space-between; 
    padding: 40px 60px; 
    z-index: 100; 
    opacity: 0;
    /* On ajoute une transition pour que le changement soit fluide */
    transition: padding 0.4s ease, background-color 0.4s ease;
}

/* NOUVEAU : La classe qui s'activera quand on scroll */
.main-nav.scrolled {
    background-color: rgba(13, 13, 13, 0.85); /* Fond noir presque opaque */
    backdrop-filter: blur(10px); /* Effet de flou sur ce qu'il y a derrière (très design) */
    -webkit-backdrop-filter: blur(10px); /* Pour Safari */
    padding: 20px 60px; /* On réduit la hauteur pour que ça prenne moins de place */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Petite ligne très subtile en bas */
}
.nav-logo { font-weight: 900; letter-spacing: -1px; text-transform: uppercase; }
.nav-menu a {
    color: var(--white); text-decoration: none; margin-left: 30px;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.6;
    transition: opacity 0.3s;
}
.nav-menu a:hover { opacity: 1; }

/* --- Hero Section --- */
.hero-stage {
    height: 100vh; display: flex; justify-content: center;
    align-items: center; position: relative;
}
.visual-item {
    position: absolute; width: 350px; height: 480px; background-size: cover;
    background-position: center; top: 50%; left: 50%; filter: brightness(0.5);
}
.v-1 { background-image: url('img/Work2.webp'); transform: translate(-65%, calc(-50% - 20px)) rotate(-6deg); }
.v-2 { background-image: url('img/Work1.webp'); transform: translate(-35%, calc(-45% - 20px)) rotate(4deg); }

.hero-headline {
    position: relative; z-index: 10; font-size: 9vw; line-height: 0.85;
    font-weight: 900; letter-spacing: -0.05em; text-transform: uppercase;
    text-shadow: 0 0 50px rgba(0,0,0,0.8); text-align: center;
}

/* --- About (Texte blanc) --- */
.about-block {
    padding: 20px 60px 40px; text-align: center;
    display: flex; justify-content: center;
}
.about-text {
    font-size: 20px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.6;
    font-weight: 400;
}

/* --- Section Projets --- */
.projects-section { padding: 100px 60px; }

.section-title {
    text-align: center; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.5em; color: var(--grey); margin-bottom: 100px;
}

.project-card {
    display: block; position: relative; width: 100%; height: 160px;
    margin-bottom: 2px; overflow: hidden; text-decoration: none; cursor: pointer;
}

/* --- La bonne méthode pour le défilement --- */
.scrolling-bg-layer { 
    position: absolute; 
    inset: 0; 
    z-index: 1;
    overflow: hidden; 
}

.track { 
    display: flex; 
    height: 100%; 
    width: max-content; /* LE SECRET EST ICI : La piste s'adapte à la vraie taille des images */
}

.track img { 
    height: 100%; 
    width: auto; /* L'image garde ses vraies proportions */
    object-fit: cover; 
    flex-shrink: 0; /* EMPÊCHE le navigateur d'écraser les images */
}

/* --- Rideaux --- */
.curtain {
    position: absolute; left: 0; width: 100%; height: 50.1%;
    background-color: var(--white); z-index: 5;
    transition: transform 0.8s var(--transition-smooth);
}
.curtain.top { top: 0; }
.curtain.bottom { bottom: 0; }

.project-card:hover .curtain.top { transform: translateY(-100%); }
.project-card:hover .curtain.bottom { transform: translateY(100%); }

/* --- Textes des Projets --- */
.project-info-layer {
    position: absolute; inset: 0; z-index: 10; display: flex;
    justify-content: space-between; align-items: center;
    padding: 0 60px; color: #000;
    transition: opacity 0.3s ease;
}

.project-card:hover .project-info-layer { opacity: 0; }

.info-center { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.software-tag { display: flex; align-items: center; gap: 15px; min-width: 160px; justify-content: flex-end; }

/* * RETRAIT DU FILTRE BRIGHTNESS ICI
 * Les icônes s'afficheront désormais dans leurs couleurs originales ! 
 */
.software-icon { height: 24px; }

/* --- Bouton View More (Behance) --- */
.view-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 100px; /* Laisse un bel espace après le dernier projet */
    padding-bottom: 50px;
}

.view-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 45px;
    border: 1px solid var(--grey); /* Contour gris discret */
    color: var(--white);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.25em;
    text-decoration: none;
    border-radius: 100px; /* Effet pilule arrondi */
    transition: all 0.4s var(--transition-smooth);
}

.arrow {
    font-size: 16px;
    transition: transform 0.4s var(--transition-smooth);
}

/* L'animation au survol */
.view-more-btn:hover {
    background-color: var(--white);
    color: #000;
    border-color: var(--white);
    transform: translateY(-5px); /* Fait légèrement monter le bouton */
}

/* Fait bouger la petite flèche en diagonale au survol */
.view-more-btn:hover .arrow {
    transform: translate(4px, -4px);
}

/* =========================================
   FOOTER / CONTACT
   ========================================= */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Ligne fine et discrète */
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--grey);
}

.footer-left span {
    opacity: 0.6;
}

.footer-right {
    display: flex;
    gap: 30px;
}

.footer-right a {
    color: var(--white);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.3s var(--transition-smooth);
}

.footer-right a:hover {
    opacity: 1;
}

/* =========================================
   VERSION MOBILE & TABLETTE (Responsive)
   ========================================= */
@media (max-width: 768px) {
    
    /* Preloader Mobile */
    .welcome-message { font-size: 0.9rem; padding: 0 20px; }
    .preloader-sequence { width: 260px; height: 360px; }
    
    /* Nav Mobile */
    .main-nav { padding: 25px 20px; }
    .main-nav.scrolled { padding: 15px 20px; }
    .nav-logo { font-size: 16px; }
    .nav-menu a { margin-left: 15px; font-size: 10px; }
    
    /* Hero Mobile */
    .hero-headline { font-size: 15vw; }
    .visual-item { width: 240px; height: 340px; }
    
    /* About Mobile */
    .about-block { padding: 20px 20px 40px; }
    .about-text { font-size: 16px; }
    
    /* Projets Mobile */
    .projects-section { padding: 60px 20px; }
    .section-title { margin-bottom: 60px; }
    
    /* On augmente légèrement la hauteur de la carte sur mobile pour que le texte empilé respire */
    .project-card { height: 180px; } 
    
    /* On empile les infos (Date, Titre, Logiciel) verticalement au centre */
    .project-info-layer { 
        flex-direction: column; 
        justify-content: center; 
        gap: 12px; 
        padding: 0 20px; 
        text-align: center;
    }
    
    .info-center { font-size: 22px; }
    
    /* On centre le tag du logiciel */
    .software-tag { justify-content: center; min-width: auto; }
    .software-icon { height: 30px; }

    /* Bouton Behance Mobile */
    .view-more-wrapper { margin-top: 60px; padding-bottom: 20px; }
    .view-more-btn { padding: 15px 30px; font-size: 10px; width: 100%; justify-content: center; }

    /* Footer Mobile */
    .site-footer {
        flex-direction: column;
        gap: 25px;
        padding: 40px 20px;
        text-align: center;
    }
    
    .footer-right {
        justify-content: center;
        flex-wrap: wrap; /* Permet aux liens de passer à la ligne si besoin */
        gap: 20px;
    }
}