/* =========================================
   STYLE PROJET : TEXTURE ÉDITORIALE
   ========================================= */

/* NOUVEAU CODE (CORRIGÉ) */
html {
    /* On ne met RIEN ici concernant l'overflow */
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #050505;
    color: white;
    
    /* C'est ICI qu'il faut le mettre, et seulement ici */
    overflow-x: hidden; 
    width: 100%;
}

/* --- CORRECTION DU FOND --- */
.texture-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    
    /* MODIFICATION ICI : On passe de -1 à 0 */
    z-index: 0; 
}

/* --- IMPORTANT : ON FORCE LE CONTENU À PASSER DEVANT --- */
main, footer {
    position: relative;
    z-index: 1; /* Le contenu passe devant l'image (qui est à 0) */
}

/* =========================================
   ANIMATION SPÉCIFIQUE : COLLECTION AFFICHES (Projet 5)
   ========================================= */

/* 1. On cible l'image grâce à sa classe unique "hero-post" */
.hero-post {
    /* On écrase l'animation par défaut (tilt-anim) par la nôtre */
    animation: floatAffiches 6s ease-in-out infinite !important;
    
    /* Optionnel : Ajuste la taille ou la position si besoin ici */
    height: 5vh;
    /* transform-origin: center; */
}

/* 2. On crée les mouvements JUSTE pour cette image */
@keyframes floatAffiches {
    0% {
        /* DÉPART */
        transform: translateY(-50%) rotate(-5deg) scale(1);
    }
    50% {
        /* MILIEU : C'est ici que tu modifies l'amplitude */
        /* Change -30px pour monter/descendre plus */
        /* Change 5deg pour tourner plus ou moins */
        transform: translateY(calc(-50% - 30px)) rotate(5deg) scale(1.05);
    }
    100% {
        /* FIN : Retour au départ */
        transform: translateY(-50%) rotate(-5deg) scale(1);
    }
}

/* =========================================
   HEADER DE NAVIGATION (PROJETS)
   ========================================= */

.project-header {
    /* Positionnement */
    position: absolute; /* Flotte par dessus le fond */
    top: 0;
    left: 0;
    width: 100%;
    
    /* Mise en page Flexbox : Espace gauche et droite */
    display: flex;
    justify-content: space-between; /* Pousse les éléments aux extrémités */
    align-items: center; /* Centre verticalement */
    
    padding: 30px 5vw; /* Marge interne (5vw pour s'aligner avec le reste du site) */
    z-index: 100; /* Toujours au dessus de tout */
    box-sizing: border-box; /* Important pour que le padding ne dépasse pas */
}

/* --- LE BOUTON RETOUR (GAUCHE) --- */
.back-link {
    text-decoration: none;
    color: white;
    font-family: 'Anton', sans-serif; /* Police Titre */
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre la flèche et le texte */
    
    transition: opacity 0.3s ease;
}

.arrow-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease; /* Pour l'animation */
}

/* --- ANIMATION AU SURVOL --- */
.back-link:hover {
    opacity: 0.7; /* Légère transparence */
}

.back-link:hover .arrow-icon {
    transform: translateX(-5px); /* La flèche bouge vers la gauche */
}

/* --- LE NOM (DROITE) --- */
.home-link {
    text-decoration: none;
    color: white;
    font-family: 'Anton', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* RESPONSIVE (Mobile) */
@media (max-width: 768px) {
    .project-header {
        padding: 20px; /* Moins de marge sur petit écran */
    }
    .back-link, .home-link {
        font-size: 1rem; /* Texte un peu plus petit */
    }
}
/* --- SECTION HERO (TITRE GÉANT) --- */
.hero-texture {
    min-height: 80vh; /* Prend une bonne partie de l'écran */
    display: flex;
    align-items: center;
    padding: 0 5vw;
}

.hero-content {
    /* On positionne le titre plutôt vers la gauche, là où l'image est plus sombre */
    max-width: 80%;
}

.project-script-cat {
    font-family: 'Allura', cursive;
    font-size: 3rem;
    color: #ccc; /* Un gris clair pour le script, élégant */
    margin: 0 0 -20px 0; /* Remonte légèrement sur le titre */
    position: relative;
    z-index: 2;
}

.project-giant-title {
    font-family: 'Anton', sans-serif;
    font-size: 15vw; /* ÉNORME comme sur l'accueil */
    line-height: 0.85;
    margin: 0;
    text-transform: uppercase;
    /* Un léger contour transparent pour le style */
    color: white;
    /* Si tu veux l'effet contour uniquement : */
    /* color: transparent; -webkit-text-stroke: 2px white; */
}


/* --- SECTION CONTENU (BLOCS DE VERRE FUMÉ) --- */
.content-texture {
    padding: 100px 5vw;
    display: flex;
    gap: 50px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* --- STYLE VERRE RÉALISTE (Fix Transparence) --- */
.glass-block {
    /* 1. LE SECRET : Au lieu d'une couleur unie, on met un dégradé (Gradient) */
    /* Cela imite la lumière qui tape sur la vitre (un peu plus clair en haut à gauche) */
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.1) 0%,   /* 10% de blanc en haut à gauche */
        rgba(255, 255, 255, 0.02) 100% /* Quasi transparent en bas à droite */
    );
    
    /* 2. Le Flou d'arrière-plan */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); /* Pour Safari */
    
    /* 3. Bordure fine et nette */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* 4. Pas d'arrondis (Style technique) */
    border-radius: 0;
    
    padding: 40px;
    
    /* 5. Ombre par défaut légère pour décoller le verre du fond */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    
    transition: box-shadow 0.4s ease;
}

/* Au survol : L'ombre s'intensifie */
.glass-block:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 1);
}

/* Bloc Infos (Colonne gauche) */
.info-block {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-item h3 {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: #999;
    margin-bottom: 10px;
}
.info-item p {
    font-family: 'Anton', sans-serif;
    font-size: 1.5rem;
    margin: 0;
    letter-spacing: 1px;
}

/* Bloc Description (Colonne droite) */
.description-block {
    flex: 2;
    min-width: 350px;
}

.description-block h2 {
    font-family: 'Anton', sans-serif;
    font-size: 3rem;
    margin: 0 0 30px 0;
}

.description-block p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ddd;
    margin-bottom: 25px;
}
.description-block .intro {
    font-size: 1.3rem;
    color: white;
    font-weight: bold;
}

/* =========================================
   SECTION ÉTAPES (STORYTELLING)
   ========================================= */

.steps-section {
    padding: 0 5vw 100px 5vw;
    display: flex;
    flex-direction: column;
    gap: 120px; /* Grand espace entre chaque étape pour aérer */
}

/* La ligne qui contient Texte + Image */
.step-row {
    display: flex;
    align-items: center; /* Centre verticalement le texte par rapport à l'image */
    gap: 80px; /* Espace entre le texte et l'image */
}

/* L'astuce pour inverser le sens (Image à gauche) */
.step-row.reverse {
    flex-direction: row-reverse;
}

/* Gestion de la largeur des colonnes (50% chacune) */
.step-content, .step-visual {
    flex: 1;
    min-width: 300px;
}

/* --- Style spécifique du texte dans les étapes --- */
.step-number {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2); /* Numéro discret en transparence */
    margin-bottom: 10px;
    line-height: 1;
}

.step-content h3 {
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    color: white;
}

.step-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ccc;
    margin: 0;
}

/* --- DIAPORAMA AUTOMATIQUE (FIXE) --- */

.step-visual {
    /* On empile les images */
    display: grid;
    grid-template-areas: "stack"; 
    
    width: 100%;
    
    /* 1. ON FIXE LA HAUTEUR DU CONTENEUR */
    /* Tu as deux choix : */
    /* Choix A : Une hauteur proportionnelle (Recommandé pour être responsive) */
    aspect-ratio: 16 / 9; 
    
    /* Choix B : Une hauteur fixe en pixels (Si tu préfères) */
    /* height: 400px; */ 
    
    /* Finitions */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background: #000; 
    border-radius: 0;
    overflow: hidden;
    
    /* On s'assure que le conteneur ne s'écrase pas sur mobile */
    min-height: 250px; 
}

.slide-img {
    grid-area: stack;
    
    /* 2. L'IMAGE S'ADAPTE AU CONTENEUR */
    width: 100%;
    height: 100%; /* Elle est obligée de prendre toute la hauteur définie au-dessus */
    
    display: block;
    
    /* 3. LE SECRET DU REMPLISSAGE */
    object-fit: cover; /* Zoome dans l'image pour remplir le cadre sans déformer */
    object-position: center; /* Centre l'image */
    
    /* Gestion du fondu */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

/* L'image active */
.slide-img.active {
    opacity: 1;
    z-index: 1;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    .step-row, .step-row.reverse {
        flex-direction: column; /* On empile tout verticalement sur mobile */
        gap: 40px;
    }
    
    /* On change l'ordre pour avoir toujours Image puis Texte (ou l'inverse) sur mobile */
    .step-row.reverse {
        flex-direction: column; 
    }
    
    .steps-section {
        gap: 80px;
    }
}

/* --- SECTION GALERIE --- */
.gallery-texture {
    padding: 0 5vw 100px 5vw;
}

/* L'image principale en grand */
.gallery-texture > img {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    /* Une petite ombre pour la détacher du fond */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.gallery-grid img {
    width: 100%;
    transition: 0.3s;
    filter: grayscale(50%); /* Un peu désaturé par défaut pour l'ambiance */
}
.gallery-grid img:hover {
    filter: grayscale(0%);
    transform: scale(1.02);
}


/* --- NAVIGATION BAS & FOOTER --- */
.bottom-nav {
    padding: 50px 5vw 100px 5vw;
    text-align: center;
}

.back-link-large {
    font-family: 'Anton', sans-serif;
    font-size: 4vw;
    color: transparent;
    -webkit-text-stroke: 1px white; /* Style contour comme tes réseaux */
    text-decoration: none;
    transition: 0.3s;
}
.back-link-large:hover {
    color: white; /* Se remplit au survol */
}

footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    color: #666;
    /* Fond noir uni pour le footer pour finir proprement */
    background: #121212;
}


/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .project-giant-title { font-size: 18vw; }
    .hero-texture { min-height: 60vh; align-items: flex-end; padding-bottom: 50px; }
    .content-texture { flex-direction: column; gap: 30px; padding-top: 50px;}
    .gallery-grid { grid-template-columns: 1fr; }
    .back-link-large { font-size: 8vw; }
}

/* =========================================
   SECTION "LOGO LINK" (Chrome Style)
   ========================================= */

.live-link-section {
    padding: 0 5vw 100px 5vw;
}

.logo-link-card {
    display: block;
    position: relative;
    width: 100%;
    /* On donne de l'espace pour que le logo respire */
    padding: 80px 0; 
    
    /* Style du conteneur : Verre sombre */
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0; /* Angles droits bruts */
    
    text-decoration: none;
    overflow: hidden;
    transition: all 0.4s ease;
    
    /* Curseur spécifique pour inciter au clic */
    cursor: pointer;
}

/* --- LE LOGO CHROME --- */
.logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 20px; /* Marge de sécurité sur mobile */
}

.chrome-logo {
    width: 100%;
    max-width: 900px; /* Taille max pour ne pas être trop énorme sur grand écran */
    height: auto;
    display: block;
    
    /* TRANSITIONS & EFFETS */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease;
    
    /* ASTUCE FUSION : Essaie de supprimer le fond gris du logo s'il en a un */
    /* Si le rendu est étrange, supprime la ligne ci-dessous */
    mix-blend-mode: lighten; 
    
    /* Légèrement assombri par défaut pour l'effet "éteint" */
    filter: brightness(0.8) grayscale(20%);
}

/* --- LE PETIT BADGE (L'indice de clic) --- */
.link-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    
    font-family: 'Arial', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #666; /* Discret par défaut */
    
    transition: color 0.3s ease;
}

.badge-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}


/* --- ANIMATION AU SURVOL (HOVER) --- */

/* 1. Le conteneur s'éclaire légèrement */
.logo-link-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

/* 2. Le Logo s'allume et grossit (Effet "Pop") */
.logo-link-card:hover .chrome-logo {
    transform: scale(1.05); 
    
    /* CORRECTION ICI : On met brightness, grayscale ET drop-shadow dans le même 'filter' */
    filter: brightness(1.2) grayscale(0%) drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}

/* 3. Le Badge devient blanc et la flèche bouge */
.logo-link-card:hover .link-badge {
    color: white;
}

.logo-link-card:hover .badge-arrow {
    transform: translate(3px, -3px); /* Mouvement vers le haut-droite */
    color: #ccff00; /* La petite touche vert fluo de ton thème */
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .logo-link-card { padding: 40px 0; }
    .chrome-logo { transform: scale(1.1); } /* Déjà un peu zoomé sur mobile */
}

/* =========================================
   SECTION COMPÉTENCES (Data Grid Style)
   ========================================= */

.skills-section {
    padding: 0 5vw 100px 5vw;
}

.section-title-skills {
    font-family: 'Anton', sans-serif;
    font-size: 4vw;
    color: white;
    margin-bottom: 50px;
    text-transform: uppercase;
    border-left: 5px solid white;
    padding-left: 20px;
    line-height: 1;
}

/* LA GRILLE AUTOMATIQUE */
.skills-grid {
    display: grid;
    /* Crée autant de colonnes que possible (minimum 250px de large) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* LA CARTE COMPÉTENCE */
.skill-card {
    background: rgba(0, 0, 0, 0.4); /* Fond sombre */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Bordure fine tech */
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    
    /* Effet Glassmorphism léger */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Petit numéro décoratif style "Dossier classé" */
.skill-num {
    font-family: 'Arial', sans-serif;
    font-size: 0.8rem;
    color: #555;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.skill-name {
    font-family: 'Anton', sans-serif;
    font-size: 1.5rem;
    color: white;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skill-desc {
    font-family: 'Arial', sans-serif;
    font-size: 0.9rem;
    color: #aaa; /* Gris clair */
    line-height: 1.4;
    margin: 0;
    transition: color 0.3s;
}

/* --- INTERACTION AU SURVOL --- */
.skill-card:hover {
    background: rgba(255, 255, 255, 0.08); /* S'éclaire légèrement */
    border-color: rgba(255, 255, 255, 0.5); /* La bordure brille */
    transform: translateY(-5px); /* Petit flottement */
}

.skill-card:hover .skill-num {
    color: #ccff00; /* Le numéro devient vert fluo (touche de couleur) */
}

.skill-card:hover .skill-desc {
    color: white; /* Le texte devient blanc pur */
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .section-title-skills { font-size: 2rem; }
    .skills-grid { grid-template-columns: 1fr; } /* Une seule colonne sur mobile */
}


/* =========================================
   SECTION LOGICIELS (Tools Stack)
   ========================================= */

.tools-section {
    padding: 0 5vw 100px 5vw;
}

.section-title-tools {
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    letter-spacing: 4px;
    color: #888;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-weight: bold;
}

/* GRILLE FLEXIBLE */
.tools-grid {
    display: flex;
    flex-wrap: wrap; /* Revient à la ligne si pas de place */
    gap: 20px;
}

/* LA CARTE LOGICIEL */
.tool-card {
    /* Largeur fixe pour faire des carrés propres */
    width: 140px; 
    height: 140px;
    
    /* Style Verre Sombre */
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    
    transition: all 0.3s ease;
    cursor: default;
}

/* L'IMAGE DU LOGO */
.tool-card img {
    height: 50px; /* Taille uniforme pour tous les logos */
    width: auto;
    object-fit: contain;
    
    /* DÉSATURATION : Le logo est gris par défaut */
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.4s ease;
}

/* LE NOM DU LOGICIEL */
.tool-name {
    font-family: 'Arial', sans-serif;
    font-size: 0.75rem;
    color: #666;
    font-weight: bold;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* --- EFFET AU SURVOL --- */
.tool-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-5px);
}

/* Le logo retrouve ses couleurs et brille */
.tool-card:hover img {
    filter: grayscale(0%) opacity(1) drop-shadow(0 0 10px rgba(255,255,255,0.2));
    transform: scale(1.1);
}

/* Le texte s'allume en blanc */
.tool-card:hover .tool-name {
    color: white;
}

/* RESPONSIVE */
@media (max-width: 480px) {
    /* Sur très petit écran, on fait 2 par ligne */
    .tool-card {
        width: calc(50% - 10px); 
    }
}

/* =========================================
   SECTION "AUTRES PROJETS" (Bas de page)
   ========================================= */

.more-projects-section {
    padding: 100px 5vw;
    position: relative;
    z-index: 2; /* Passe devant le fond */
    background: linear-gradient(to top, #050505 0%, transparent 100%); /* Fondu noir vers le bas */
}

.more-projects-title {
    font-family: 'Anton', sans-serif;
    font-size: 4vw; /* Un peu plus petit que sur l'accueil */
    color: white;
    margin-bottom: 50px;
    border-left: 5px solid white;
    padding-left: 20px;
    line-height: 1;
    text-transform: uppercase;
}

/* LA GRILLE 2 PAR 2 */
.more-projects-grid {
    display: grid;
    /* C'est ici qu'on force les 2 colonnes */
    grid-template-columns: 1fr 1fr; 
    gap: 30px;
    margin-bottom: 50px;
}

/* STYLE DES CARTES (Identique à l'accueil) */
.project-card {
    position: relative;
    display: block;
    height: 350px; /* Hauteur des vignettes */
    overflow: hidden;
    text-decoration: none;
    /* Bordure fine pour rappeler le thème verre */
    border: 1px solid rgba(255,255,255,0.1); 
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
    filter: grayscale(100%);
}

/* L'Overlay (Texte par dessus) */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.project-overlay h3 {
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    color: white;
    text-transform: uppercase;
    transform: translateY(20px);
    transition: all 0.3s ease;
    margin: 0;
}

.project-overlay p {
    font-family: 'Arial', sans-serif;
    color: #ccc;
    font-size: 0.9rem;
    transform: translateY(20px);
    transition: all 0.3s ease 0.1s;
    margin-top: 10px;
}

/* EFFETS HOVER */
.project-card:hover img {
    transform: scale(1.1);
    filter: grayscale(0%);
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-card:hover h3, 
.project-card:hover p {
    transform: translateY(0);
}

/* BOUTON "VOIR TOUT" */
.center-btn {
    text-align: center;
    margin-top: 40px;
}

.simple-back-link {
    color: white;
    text-decoration: none;
    font-family: 'Anton', sans-serif;
    font-size: 1.2rem;
    border-bottom: 1px solid white;
    padding-bottom: 5px;
    transition: opacity 0.3s;
}
.simple-back-link:hover { opacity: 0.7; }

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    /* Sur mobile, on passe en 1 seule colonne pour que ce soit lisible */
    .more-projects-grid {
        grid-template-columns: 1fr;
        height: auto;
    }
    .more-projects-title {
        font-size: 10vw;
    }
}

/* --- LE VINYLE TOURNANT --- */

/* 1. On sécurise le conteneur parent */
.hero-texture {
    /* Important : permet de positionner le vinyle par rapport à cette section */
    position: relative; 
    /* Important : cache la partie du vinyle qui dépasse à droite (pas de scrollbar horizontale) */
    overflow: hidden; 
}

/* 2. Le style du vinyle */
.hero-vinyl {
    position: absolute;
    top: 50%;
    right: -20%; /* Ajuste selon ton goût */
    height: 85vh; 
    width: auto;
    z-index: 0;
    
    /* On ajoute le curseur pour montrer qu'on peut toucher */
    cursor: grab; 
    
    /* Ombre */
    filter: drop-shadow(-10px 10px 20px rgba(0,0,0,0.5));
    
    /* On garde le centrage vertical initial */
    transform: translateY(-50%) rotate(0deg);
    
    /* Empêche de sélectionner l'image comme du texte quand on drag */
    user-select: none;
    -webkit-user-drag: none;
}

/* Style quand on attrape le vinyle */
.hero-vinyl:active {
    cursor: grabbing;
}

/* On s'assure que le texte passe bien DEVANT le vinyle */
.hero-content {
    position: relative;
    z-index: 2;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .hero-vinyl {
        height: 40vh; /* Plus petit sur mobile */
        right: -20%;  /* Plus caché sur mobile */
        top: 60%;     /* Décalé un peu vers le bas */
    }
}

/* --- STYLE ÉLÉMENT FLOTTANT (Ex: Burger) --- */
.hero-element {
    position: absolute;
    top: 50%;
    right: -8%; /* On le fait dépasser un peu */
    height: 70vh; /* Ajuste la taille */
    width: auto;
    z-index: 0;
    filter: drop-shadow(-20px 20px 30px rgba(0,0,0,0.6)); /* Grosse ombre portée */
}

/* Animation de flottement lent (Haut/Bas) */
.float-anim {
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(-50%) translateY(0px); }
    50% { transform: translateY(-50%) translateY(-30px); } /* Il monte */
    100% { transform: translateY(-50%) translateY(0px); }
}

/* Animation de pulsation lumineuse */
.pulse-anim {
    transform: translateY(-50%); /* Juste centré verticalement */
    animation: neon-pulse 2s infinite alternate;
}

@keyframes neon-pulse {
    0% { 
        filter: drop-shadow(0 0 10px rgba(226, 223, 43, 0.4)); /* Lueur violette faible */
        transform: translateY(-50%) scale(1);
    }
    100% { 
        filter: drop-shadow(0 0 40px rgba(226, 217, 43, 0.9)); /* Lueur violette forte */
        transform: translateY(-50%) scale(1.02);
    }
}

/* Animation de balancier 3D */
.tilt-anim {
    animation: tilting 8s ease-in-out infinite;
}

@keyframes tilting {
    0% { transform: translateY(-50%) rotate(-5deg) scale(1); }
    50% { transform: translateY(-50%) rotate(10deg) scale(1.05); } /* Pivote et zoom un peu */
    100% { transform: translateY(-50%) rotate(-5deg) scale(1); }
}

/* --- RÉGLAGES SPÉCIFIQUES CHAUSSURE --- */
.hero-shoe {
    /* 1. La taille (comme vu précédemment) */
    height: 45vh !important; 
    right: -10% !important;
    
    /* 2. ON DÉFINIT UNE NOUVELLE ANIMATION ICI */
    /* On ignore l'animation "tilt-anim" de base et on utilise "shoe-float" à la place */
    animation: shoe-float 6s ease-in-out infinite;
}

/* 3. DÉFINITION DE L'ANGLE + MIROIR + MOUVEMENT */
@keyframes shoe-float {
    0% {
        /* DÉPART */
        /* scale(-1, 1) = Miroir horizontal (X inversé, Y normal) */
        transform: translateY(-50%) rotate(-25deg) scale(-1, 1);
    }
    50% {
        /* MILIEU : Zoom léger */
        /* scale(-1.05, 1.05) = On garde le miroir (-1.05) et on grossit (1.05) */
        transform: translateY(-50%) rotate(-15deg) scale(-1.05, 1.05);
    }
    100% {
        /* FIN : Retour au départ */
        transform: translateY(-50%) rotate(-25deg) scale(-1, 1);
    }
}

/* --- RÉGLAGES SPÉCIFIQUES MICRO --- */
.hero-mic {
    /* 1. La taille (comme vu précédemment) */
    height: 55vh !important; 
    right: 0% !important;
    
    /* 2. ON DÉFINIT UNE NOUVELLE ANIMATION ICI */
    /* On ignore l'animation "tilt-anim" de base et on utilise "shoe-float" à la place */
    animation: shoe-float 6s ease-in-out infinite;
}

/* =========================================
   ANIMATION SPÉCIFIQUE : BAGUETTES (Projet 6)
   ========================================= */

/* 1. On cible l'image des baguettes */
.hero-bag {
        /* 1. La taille (comme vu précédemment) */
    height: 50vh !important; 
    right: -5% !important;

    /* On applique notre nouvelle animation personnalisée */
    animation: floatBaguettes 6s ease-in-out infinite !important;
    z-index: 10; /* Le titre est à 2, donc 10 passera largement devant */
}

/* 2. On définit le mouvement SANS l'effet miroir */
@keyframes floatBaguettes {
    0% {
        /* DÉPART : On enlève le -1 */
        transform: translateY(-50%) rotate(-5deg) scale(1);
    }
    50% {
        /* MILIEU : Juste le zoom à 1.05 */
        transform: translateY(calc(-50% - 20px)) rotate(5deg) scale(1.05);
    }
    100% {
        /* FIN */
        transform: translateY(-50%) rotate(-5deg) scale(1);
    }
}

/* =========================================
   SECTION VIDÉO (CINÉMA & YOUTUBE)
   ========================================= */

.video-showcase-section {
    padding: 0 5vw 100px 5vw;
    display: flex;
    justify-content: center;
}

/* Le cadre global (Effet Verre) */
.video-container-glass {
    width: 100%;
    max-width: 1200px; /* On limite la largeur pour que ça reste beau sur grand écran */
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    
    /* Petite ombre portée */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* =========================================
   CONTAINER SPÉCIFIQUE POUR VIDÉO VERTICALE
   ========================================= */

/* On cible le container SEULEMENT s'il a la classe "vertical-layout" */
.video-container-glass.vertical-layout {
    /* 1. On réduit la largeur max (au lieu de 1200px) */
    /* 500px suffit pour contenir la vidéo de 400px + les marges */
    max-width: 500px !important; 
    
    /* 2. On s'assure que tout est centré à l'intérieur */
    align-items: center; 
    text-align: center;
    
    /* 3. On ajuste le padding pour que ce soit harmonieux */
    padding: 40px 20px;
}

/* Petit ajustement pour le titre dans ce mode étroit */
.video-container-glass.vertical-layout .video-title {
    border-left: none; /* On enlève la barre à gauche car on va centrer */
    border-bottom: 2px solid white; /* On met la barre en dessous c'est plus joli en vertical */
    padding-left: 0;
    padding-bottom: 15px;
    margin-bottom: 30px;
    text-align: center;
    width: 100%;
}

/* On s'assure que le bouton prend toute la largeur dispo pour être beau */
.video-container-glass.vertical-layout .video-actions {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

.video-title {
    font-family: 'Anton', sans-serif;
    font-size: 3rem;
    color: white;
    margin: 0;
    text-transform: uppercase;
    text-align: left;
    border-left: 4px solid white;
    padding-left: 20px;
    line-height: 1;
}

/* --- LE LECTEUR HTML5 LOCAL --- */

/* On garde le wrapper qui définit le format 16/9 */
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; 
    background: #000; /* Fond noir si la vidéo charge */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px; /* Optionnel : petit arrondi propre */
}

/* Style de la balise vidéo elle-même */
.local-video-player {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* S'assure que la vidéo remplit tout sans bordures noires */
    
    /* On enlève le contour bleu par défaut au clic */
    outline: none;
}

/* =========================================
   VARIATION : VIDÉO VERTICALE (REELS / TIKTOK)
   ========================================= */

.video-wrapper.vertical-mode {
    /* 1. On change le ratio (9/16 au lieu de 16/9) */
    aspect-ratio: 9 / 16 !important; 
    
    /* 2. On limite la largeur pour les écrans d'ordi */
    /* Sinon la vidéo ferait 2 mètres de haut sur un grand écran */
    max-width: 400px; 
    
    /* 3. On centre le bloc horizontalement */
    margin: 0 auto; 
    
    /* 4. Esthétique "Smartphone" */
    border-radius: 20px; /* On arrondit plus les angles */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); /* Belle ombre portée */
}

/* Ajustement du bouton Play pour qu'il reste centré */
.video-wrapper.vertical-mode .custom-play-overlay {
    border-radius: 20px; /* Doit suivre l'arrondi de la vidéo */
}

/* --- LE BOUTON YOUTUBE --- */
.video-actions {
    display: flex;
    justify-content: flex-end; /* Bouton aligné à droite */
}

.yt-external-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    
    padding: 15px 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    
    color: white;
    text-decoration: none;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.yt-icon {
    font-size: 1.2rem;
}

.logo-youtube {
    height: 30px;
}

/* Au survol : Effet YouTube (Bordure Rouge + Fond léger) */
.yt-external-link:hover {
    border-color: #FF0000; /* Rouge YouTube */
    background: rgba(255, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.2); /* Lueur rouge */
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .video-container-glass { padding: 20px; }
    .video-title { font-size: 2rem; }
    .video-actions { justify-content: center; } /* Bouton centré sur mobile */
    .yt-external-link { width: 100%; justify-content: center; }
}

/* --- BOUTON PLAY PERSONNALISÉ --- */

.video-wrapper {
    position: relative; /* Indispensable pour centrer le bouton */
    cursor: pointer; /* Montre qu'on peut cliquer partout sur la vidéo */
}

/* L'Overlay qui contient le bouton */
.custom-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Flexbox pour centrer parfaitement le triangle */
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: rgba(0, 0, 0, 0.3); /* Léger filtre sombre sur l'image poster */
    z-index: 10;
    transition: all 0.3s ease;
}

/* Le Cercle/Bouton */
.play-triangle {
    width: 100px;
    height: 100px;
    
    /* Style Verre */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%; /* Cercle parfait */
    
    /* Centrage du triangle dans le cercle */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Typo du triangle */
    color: white;
    font-size: 3rem;
    padding-left: 10px; /* Petit ajustement optique pour centrer le triangle */
    
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Effet au survol du bloc */
.video-wrapper:hover .play-triangle {
    transform: scale(1.1); /* Le bouton grossit */
    background: rgba(255, 255, 255, 0.2); /* Devient plus blanc */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); /* Lueur */
}

/* Classe utilitaire pour cacher le bouton quand ça joue */
.hidden {
    opacity: 0;
    pointer-events: none; /* Empêche de cliquer dessus quand il est invisible */
}

/* =========================================
   VIGNETTES VIDÉO (SECTION AUTRES PROJETS)
   ========================================= */

/* 1. On sécurise le conteneur (La carte) */
.more-projects-grid .project-card {
    position: relative;       /* Indispensable pour que la vidéo se cale dedans */
    overflow: hidden;         /* Coupe tout ce qui dépasse */
    z-index: 1;
}

/* 2. La Vidéo (Le réglage parfait) */
.more-projects-grid .card-video {
    position: absolute;       /* Se place par dessus le fond */
    top: 0;
    left: 0;
    width: 100%;              /* Prend toute la largeur de la case */
    height: 100%;             /* Prend toute la hauteur de la case */
    
    /* LA MAGIE DU CENTRAGE */
    object-fit: cover;        /* Remplit sans déformer */
    object-position: center center; /* Centre l'image (coupe les bords équitablement) */
    
    z-index: 0;               /* Reste derrière le texte */
    
    /* STYLE GRAPHIQUE */
    filter: grayscale(100%);  /* Gris par défaut */
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* 3. L'Animation au survol */
.more-projects-grid .project-card:hover .card-video {
    transform: scale(1.1);    /* Zoom léger */
    filter: grayscale(0%);    /* Retour de la couleur */
}

/* 4. On s'assure que le texte reste lisible par dessus */
.more-projects-grid .project-overlay {
    position: absolute;
    z-index: 2; /* Devant la vidéo */
    /* Assure-toi que le fond du texte est un peu sombre ou dégradé pour la lisibilité */
}

/* =========================================
   GALERIE MOTION BLUR (UNE PAR UNE)
   ========================================= */

/* --- TITRE DE LA SECTION GALERIE --- */
.gallery-title {
    /* 1. La Police impactante */
    font-family: 'Anton', sans-serif; 
    
    /* 2. La Taille (On passe en mode "Géant") */
    font-size: 4rem; /* C'était sûrement autour de 2rem avant */
    
    /* 3. Le Style */
    color: white;
    text-transform: uppercase; /* Tout en majuscules */
    text-align: center;
    
    /* 4. Les Détails qui font la différence */
    letter-spacing: 4px; /* Espace entre les lettres (Style Cinéma/Luxe) */
    margin-bottom: 60px; /* On éloigne le contenu pour laisser respirer le titre */
    
    /* Optionnel : Une petite lueur blanche diffuse pour faire ressortir le titre */
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

/* --- ADAPTATION MOBILE (Important car 4rem c'est trop gros sur téléphone) --- */
@media (max-width: 768px) {
    .gallery-title {
        font-size: 2.5rem; /* On réduit pour que ça tienne sur l'écran */
        margin-bottom: 40px;
    }
}

.blur-gallery-section {
    padding: 0 0 100px 0;
    text-align: center;
}

/* 1. Le conteneur Glass (Plein écran) */
.blur-carousel {
    position: relative;
    width: 100%;
    height: 300px; /* Hauteur fixe pour l'écran */
    
    /* Style Glass */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    
    overflow: hidden; /* Important : cache les images qui sortent */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. La zone de clic et les Images */
.blur-track {
    width: 100%;
    height: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer; /* Affiche une main pour dire "Clique-moi" */
    z-index: 5; /* S'assure que c'est au-dessus pour recevoir le clic */
}

/* 2. Les Images */
.blur-slide {
    position: absolute; /* Elles sont empilées au même endroit */
    max-width: 60%; /* Marges sur les côtés */
    max-height: 60%; /* Marges en haut/bas */
    
    object-fit: contain; /* L'image entière est visible */
    border-radius: 4px;
    
    opacity: 0; /* Cachée par défaut */
    pointer-events: none;
    
    /* Transition douce si pas d'animation */
    transition: opacity 0.3s ease;
}

/* L'image active est visible */
.blur-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* --- NOUVEAU : LE BLOC D'INFOS EN BAS --- */
.carousel-infos {
    position: absolute;
    bottom: 5px; /* Collé en bas du cadre */
    width: 100%;
    text-align: center;
    pointer-events: none; /* Le clic passe à travers pour aller au carousel */
    z-index: 10;
}

/* 1. L'instruction "Cliquer pour passer" */
.click-hint {
    font-family: 'Arial', sans-serif;
    font-size: 0.75rem; /* Petit et discret */
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 5px; /* Espace entre l'instruction et le compteur */
    text-transform: uppercase;
    
    /* Petite animation pour dire "Je suis vivant" */
    animation: pulseText 2s infinite;
}

@keyframes pulseText {
    0% { opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

/* 3. LES BOUTONS */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.nav-btn:hover {
    background: white;
    color: black;
    border-color: white;
}

.nav-btn.prev { left: 30px; }
.nav-btn.next { right: 30px; }

/* Compteur (1/3) */
.slide-counter {
    position: static;
    bottom: 10px;
    color: white;
    font-family: 'Anton', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* =========================================
   LES ANIMATIONS DE FLOU (MOTION BLUR)
   ========================================= */

/* --- QUAND ON CLIQUE SUR SUIVANT (DROITE) --- */

/* L'image actuelle part vers la GAUCHE */
.blur-out-left {
    animation: moveOutLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes moveOutLeft {
    0% { transform: translateX(0) scale(1); filter: blur(0); opacity: 1; }
    40% { filter: blur(10px); } /* Le flou max pendant le mouvement */
    100% { transform: translateX(-150%) scale(0.9); filter: blur(20px); opacity: 0; }
}

/* La nouvelle image arrive depuis la DROITE */
.blur-in-right {
    animation: moveInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes moveInRight {
    0% { transform: translateX(150%) scale(1.1); filter: blur(20px); opacity: 0; }
    60% { filter: blur(5px); }
    100% { transform: translateX(0) scale(1); filter: blur(0); opacity: 1; }
}

/* --- QUAND ON CLIQUE SUR PRÉCÉDENT (GAUCHE) --- */

/* L'image actuelle part vers la DROITE */
.blur-out-right {
    animation: moveOutRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes moveOutRight {
    0% { transform: translateX(0); filter: blur(0); opacity: 1; }
    40% { filter: blur(10px); }
    100% { transform: translateX(150%); filter: blur(20px); opacity: 0; }
}

/* La nouvelle image arrive depuis la GAUCHE */
.blur-in-left {
    animation: moveInLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes moveInLeft {
    0% { transform: translateX(-150%); filter: blur(20px); opacity: 0; }
    60% { filter: blur(5px); }
    100% { transform: translateX(0); filter: blur(0); opacity: 1; }
}

/* =========================================
   ANIMATION D'APPARITION (SCROLL REVEAL)
   ========================================= */

/* =========================================
   ANIMATION D'APPARITION (CORRIGÉ)
   ========================================= */

/* 1. État initial : Juste invisible et un peu bas */
.reveal {
    opacity: 0;
    transform: translateY(30px); /* 30px suffit, 50px c'est parfois trop */
    
    /* IMPORTANT : On cible uniquement opacity et transform, pas "all" */
    /* Cela évite les conflits avec tes effets de survol sur les cartes */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2. État final : Visible */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Sécurité : Si le Javascript plante ou est lent, on affiche tout quand même */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
/* Optionnel : Ajoute un petit délai pour les éléments qui sont côte à côte */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }