@import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

        body {
            background-color: #050505;
            color: #fff;
            overflow-x: hidden;
        }

        /* Navbar (Solid background for sub-pages) */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 2rem 4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
            color: #fff;
        }

        .logo img {
            height: 120px;
            vertical-align: middle;
            transition: height 0.3s ease;
        }

        /* Burger Menu Icon */
        .burger-container {
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            z-index: 101;
            color: #fff;
        }

        .burger-text {
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: opacity 0.3s ease;
        }

        .burger {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .burger div {
            width: 35px;
            height: 3px;
            background-color: #fff;
            box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
            transition: all 0.4s ease;
        }

        .burger-container.active .burger div:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .burger-container.active .burger div:nth-child(2) {
            opacity: 0;
        }

        .burger-container.active .burger div:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }
        
        .burger-container.active .burger-text {
            opacity: 0; /* Cacher le texte quand le menu est ouvert */
        }

        /* Full Screen Menu Overlay */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(5, 5, 5, 0.85); /* Fond semi-transparent sombre */
            backdrop-filter: blur(25px); /* Ultra moderne effet verre */
            -webkit-backdrop-filter: blur(25px);
            z-index: 99;
            display: flex;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            overflow-y: auto;
        }

        .menu-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* Conteneur principal des liens */
        .menu-links {
            list-style: none;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 2.5rem; /* Espace plus aéré pour la DA */
            padding: 4rem 15vw; /* Plus centré mais aligné à gauche */
            width: 100%;
        }

        .menu-links > li {
            transform: translateX(-30px); /* Transition plus douce */
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .menu-overlay.active .menu-links > li {
            transform: translateX(0);
            opacity: 1;
        }

        /* Cascade d'apparition */
        .menu-links > li:nth-child(1) { transition-delay: 0.15s; }
        .menu-links > li:nth-child(2) { transition-delay: 0.25s; }
        .menu-links > li:nth-child(3) { transition-delay: 0.35s; }
        .menu-links > li:nth-child(4) { transition-delay: 0.45s; }
        .menu-links > li:nth-child(5) { transition-delay: 0.55s; }

        /* Liens Principaux (Niveau 1) - Typo Cinématographique */
        .menu-links > li > a {
            color: #ffffff; /* Plein par défaut */
            -webkit-text-stroke: 1.5px #ffffff;
            text-decoration: none;
            font-size: clamp(3rem, 6vw, 6rem);
            font-family: 'Helvetica Neue', 'Arial Black', Impact, sans-serif; /* Typo plus massive et carrée */
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: 2px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            align-items: center;
        }
        
        /* Numérotation Premium (01, 02...) */
        .menu-links {
            counter-reset: menu-item;
        }
        .menu-links > li {
            counter-increment: menu-item;
        }
        .menu-links > li > a::before {
            content: "0" counter(menu-item) " /";
            font-size: 1rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            -webkit-text-stroke: 0px; /* Pas d'outline sur les chiffres */
            margin-right: 2rem;
            letter-spacing: 4px;
            transform: translateY(-5px);
            transition: color 0.5s ease;
        }

        /* Hover Principal - Devient Transparent (Outline) */
        .menu-links > li > a:hover,
        .has-submenu:hover > a { 
            color: transparent; /* Devient transparent au hover, gardant le contour */
            -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
            letter-spacing: 5px; /* S'écarte très légèrement */
            transform: translateX(15px);
        }
        
        .menu-links > li > a:hover::before,
        .has-submenu:hover > a::before {
            color: #ffffff;
        }

        /* Sous-menus (Vidéos, Photos) */
        .has-submenu {
            position: relative;
        }

        .submenu {
            list-style: none;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 2rem; /* Espace plus large pour laisser respirer l'œil */
            margin-left: max(5vw, 4rem);
            padding-left: 0;
            border-left: none;
        }

        /* Révélation du sous-menu */
        .has-submenu:hover .submenu,
        .has-submenu.mobile-open .submenu {
            max-height: 350px;
            opacity: 1;
            margin-top: 1.5rem;
            margin-bottom: 2rem;
        }

        /* Liens Sous-menus (Design Ultra-Moderne & Cinématographique) */
        .submenu a {
            font-size: 0.8rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4); /* Gris luxueux par défaut */
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            display: inline-flex;
            align-items: center; /* Aligne le tiret d'animation avec le texte */
            text-decoration: none;
            padding: 0.5rem 0;
        }

        /* Dash (tiret) qui va pousser le texte au hover */
        .submenu a::before {
            content: '';
            display: inline-block;
            width: 0;
            height: 2px;
            background-color: #ffffff;
            margin-right: 0;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .submenu a:hover {
            color: #ffffff;
            opacity: 1;
            transform: translateX(10px); /* Le texte avance un peu */
        }

        .submenu a:hover::before {
            width: 20px; /* Le tiret grandit */
            margin-right: 15px; /* Et pousse le texte */
        }

        /* ----- SECTION PHOTOS (PORTFOLIO) ----- */
        .photos-section {
            padding: 12rem 4rem 10rem 4rem; /* Pad top to account for nav */
            min-height: 100vh;
        }

        .section-header {
            margin-bottom: 5rem;
        }

        .section-subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #888;
            margin-bottom: 1rem;
            display: block;
        }

        .section-title {
            font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
            font-size: clamp(3rem, 6vw, 6rem);
            color: #fff;
            text-transform: uppercase;
            line-height: 1.1;
        }

        @keyframes revealCard {
            from {
                opacity: 0;
                transform: translateY(40px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 3rem;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards; /* Le conteneur s'affiche doucement */
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .portfolio-card {
            background-color: #f6f6f6;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #111;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
            opacity: 0;
            animation: revealCard 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
            position: relative;
            overflow: hidden; /* Pour contenir l'image qui s'agrandit */
        }

        .portfolio-card:hover {
            transform: translateY(-8px);
            background-color: #ffffff;
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
            border-color: rgba(0,0,0,0.1);
        }

        /* Cascade de l'animation d'entrée */
        .portfolio-card:nth-child(1) { animation-delay: 0.1s; }
        .portfolio-card:nth-child(2) { animation-delay: 0.2s; }
        .portfolio-card:nth-child(3) { animation-delay: 0.3s; }
        .portfolio-card:nth-child(4) { animation-delay: 0.4s; }
        .portfolio-card:nth-child(5) { animation-delay: 0.5s; }
        .portfolio-card:nth-child(6) { animation-delay: 0.6s; }
        .portfolio-card:nth-child(7) { animation-delay: 0.7s; }

        .portfolio-card {
            background-color: #f6f6f6;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #111;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
            opacity: 0;
            animation: revealCard 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
            position: relative;
            container-type: inline-size; /* Active les requêtes de container pour un clip-path mathématiquement parfait */
            overflow: hidden;
        }

        .portfolio-card:hover {
            transform: translateY(-8px);
            background-color: #ffffff;
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
            border-color: rgba(0,0,0,0.1);
        }

        /* L'espace fantôme qui maintient exactement la structure de la carte sans jamais bouger */
        .portfolio-card::before {
            content: '';
            display: block;
            width: 100%;
            padding-bottom: 62.5%; /* Ratio 16/10 parfait, 100% robuste sur tous navigateurs */
            margin-bottom: 3rem;
        }

        /* Cascade de l'animation d'entrée */
        .portfolio-card:nth-child(1) { animation-delay: 0.1s; }
        .portfolio-card:nth-child(2) { animation-delay: 0.2s; }
        .portfolio-card:nth-child(3) { animation-delay: 0.3s; }
        .portfolio-card:nth-child(4) { animation-delay: 0.4s; }
        .portfolio-card:nth-child(5) { animation-delay: 0.5s; }
        .portfolio-card:nth-child(6) { animation-delay: 0.6s; }
        .portfolio-card:nth-child(7) { animation-delay: 0.7s; }

        .card-image-wrap {
            /* L'image est isolée de la structure pour ne provoquer AUCUN blocage ou saccade */
            position: absolute;
            top: 2.5rem;
            left: 2.5rem;
            right: 2.5rem;
            /* La magie: le padding bottom mathématique gère le ratio (16/10 = 0.625) */
            padding-bottom: calc((100% - 5rem) * 0.625);
            height: 0;
            background-color: #111;
            z-index: 0;
            overflow: hidden;
            transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            border-radius: 0;
        }

        .card-title-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3.5rem;
            position: relative;
            z-index: 2;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }

        /* Au hover, l'image n'a plus aucune restriction de position, elle glisse parfaitement jusqu'aux bords */
        .portfolio-card:hover .card-image-wrap {
            top: 0;
            left: 0;
            right: 0;
            padding-bottom: 0;
            height: 100%;
        }

        /* Le titre n'a plus besoin d'être repoussé puisqu'il est géré par l'espace fantôme */
        .portfolio-card:hover .card-title-wrap * {
            color: #fff;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Pour rester lisible partout */
        }

        /* Au hover, on ajoute un léger voile pour lire le texte */
        .portfolio-card::after {
            content: '';
            position: absolute;
            top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0);
            z-index: 1;
            transition: background 0.6s ease;
            pointer-events: none;
        }
        
        .portfolio-card:hover::after {
            background: rgba(0,0,0,0.4);
        }

        /* Effet Caméra: Les coins de l'autofocus (Viewfinder) */
        .card-image-wrap::before {
            content: '';
            position: absolute;
            top: 25px; left: 25px; right: 25px; bottom: 25px;
            background: 
                linear-gradient(#fff, #fff) 0 0 / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 0 0 / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 100% 0 / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 100% 0 / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 0 100% / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 0 100% / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 100% 100% / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 100% 100% / 2px 20px no-repeat;
            opacity: 0;
            transform: scale(1.1);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 3;
            pointer-events: none;
        }

        .portfolio-card:hover .card-image-wrap::before {
            opacity: 0.9;
            transform: scale(1); /* Les coins se referment sur la cible (focus) */
        }

        /* Effet Caméra: Réticule Central (+) */
        .card-image-wrap::after {
            content: '+';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(2);
            color: transparent;
            font-size: 2.5rem;
            font-weight: 300;
            font-family: monospace;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 4;
            pointer-events: none;
            text-align: center;
            line-height: 1;
        }

        .portfolio-card:hover .card-image-wrap::after {
            color: rgba(255,255,255,0.9);
            transform: translate(-50%, -50%) scale(1);
        }

        @keyframes focusFlash {
            0% { filter: brightness(1) blur(0px); }
            15% { filter: brightness(1.7) blur(1px); }
            100% { filter: brightness(1) blur(0px); }
        }

        .card-image-wrap img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
            transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
            filter: grayscale(0%) contrast(1); /* Couleurs normales par défaut */
            transform: scale(1.02);
            z-index: 1;
        }

        .portfolio-card:hover .card-image-wrap img {
            transform: scale(1.05); /* Zoom très léger derrière toute la carte. */
            animation: focusFlash 0.5s ease-out; /* Léger flash + flou d'obturateur */
        }

        .portfolio-card h3 {
            font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
            font-size: 2.8rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -2px;
            color: #111;
            margin: 0;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform-origin: left center;
            position: relative;
            z-index: 2;
        }

        .card-icon {
            opacity: 0;
            transform: translate(-15px, 15px) rotate(-45deg);
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            font-size: 2rem;
            color: #111;
            font-weight: bold;
            position: relative;
            z-index: 2;
        }

        .portfolio-card:hover .card-icon {
            opacity: 1;
            transform: translate(0, 0) rotate(0deg);
            color: #fff; /* Le texte passe en blanc au survol */
        }

        .portfolio-card:hover h3 {
            transform: translateX(10px);
            letter-spacing: 1px;
            color: #fff; /* Le texte passe en blanc au survol */
        }

        .card-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: auto;
            border-top: 1px solid rgba(0,0,0,0.1);
            padding-top: 1.5rem;
            transition: border-color 0.4s ease;
            position: relative;
            z-index: 2;
        }

        .portfolio-card:hover .card-categories {
            border-top-color: rgba(0,0,0,0.2);
        }

        .cat-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            color: #111;
            font-weight: 500;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform: translateY(0);
        }

        .portfolio-card:hover .cat-item {
            color: #fff;
        }

        /* Animation cascade des tags au survol de la carte */
        .portfolio-card:hover .cat-item:nth-child(1) { transform: translateY(-5px); transition-delay: 0.05s; }
        .portfolio-card:hover .cat-item:nth-child(2) { transform: translateY(-5px); transition-delay: 0.1s; }
        .portfolio-card:hover .cat-item:nth-child(3) { transform: translateY(-5px); transition-delay: 0.15s; }

        .cat-item .dot {
            width: 6px;
            height: 6px;
            background-color: #111;
            border-radius: 50%;
            transition: all 0.4s ease;
        }

        .portfolio-card:hover .cat-item .dot {
            transform: scale(1.5);
            background-color: #fff;
            box-shadow: 0 0 10px rgba(255,255,255,0.8);
        }

        .cat-item .label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            color: #444;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: color 0.4s ease;
        }

        .portfolio-card:hover .cat-item .label {
            color: #fff;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .navbar { padding: 1.5rem; }
            .logo img { height: 80px; }
            .menu-links a { font-size: 2rem; }
            .photos-section { padding: 8rem 1.5rem 6rem; }
            .portfolio-grid { grid-template-columns: 1fr; gap: 2rem; }
            .portfolio-card h3 { font-size: 1.8rem; margin-bottom: 2rem; }
            .card-categories { gap: 1rem; }
            .footer-content { flex-direction: column; gap: 3rem; text-align: center; }
            .footer-brand { align-items: center; }
            .footer-links { flex-direction: column; gap: 1.5rem; align-items: center; margin: 0; }
            .footer-links a { margin: 0; }
            .footer-bottom { flex-direction: column; gap: 10px; }
        }

        /* ----- FOOTER MODERNE ----- */
        .site-footer {
            background-color: #030303;
            padding: 3rem 4rem 1.5rem 4rem; /* Hauteur fortement réduite */
            border-top: 1px solid rgba(255,255,255,0.05);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center; /* Centré verticalement pour plus de proportion */
            max-width: 1600px;
            margin: 0 auto;
        }

        .footer-brand {
            display: flex;
            flex-direction: column;
            gap: 0;
            max-width: 300px;
        }

        .footer-brand img {
            width: 150px; /* Logo très légèrement plus grand pour asseoir le centre */
            height: auto;
            opacity: 0.9;
            transition: opacity 0.4s ease;
        }

        .footer-brand img:hover {
            opacity: 1;
        }

        /* Retire le style tagline inutilisé */

        .footer-links {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }

        .footer-links a {
            color: #fff;
            text-decoration: none;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            position: relative;
            transition: color 0.3s ease;
            padding: 0.5rem 0;
        }

        .footer-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #fff;
            transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .footer-links a:hover {
            color: #fff;
        }

        .footer-links a:hover::after {
            width: 100%;
        }

        .footer-socials {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .social-icon-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px; /* Boutons réseaux plus petits */
            height: 40px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            color: #fff;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .social-icon-box::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            z-index: 0;
        }

        .social-icon-box:hover {
            border-color: #fff;
            transform: translateY(-5px);
        }

        .social-icon-box:hover::before {
            top: 0;
        }

        .social-icon-box svg {
            position: relative;
            z-index: 1;
            transition: stroke 0.4s ease;
            width: 18px; /* Icône SVG plus petite */
            height: 18px;
        }

        .social-icon-box:hover svg {
            stroke: #000;
        }

        .footer-bottom {
            max-width: 1600px;
            margin: 2.5rem auto 0 auto; /* Remonté */
            padding-top: 1.5rem; /* Moins d'espace */
            border-top: 1px solid rgba(255,255,255,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.65rem;
            color: #555;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .footer-bottom-group {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .footer-bottom a {
            color: #555;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-bottom a:hover {
            color: #fff;
        }

        .brand-beyourmoon {
            font-family: 'Limelight', cursive;
            font-size: 0.8rem;
            color: #fff;
            text-transform: none;
            letter-spacing: 1px;
        }
    
    /* --- ABOUT PAGE CUSTOM CSS --- */
    .about-section {
        padding: 15rem 5% 15rem;
max-width: 1400px;
        margin: 0 auto;
        color: #fff;
    }
    .about-header {
        margin-bottom: 2.5rem;
        text-align: left;
    }
    .about-subtitle {
        
        color: rgba(255, 255, 255, 0.4);
        font-size: 1.5rem;
        text-transform: uppercase;
        margin-bottom: 1rem;
        display: block;
        letter-spacing: 5px;
    }
    .about-title {
        font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
        font-size: 5rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -2px;
        margin: 0;
        line-height: 1;
    }
    .about-content-wrapper {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 5rem;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .about-image-wrapper {
        position: relative;
        z-index: 2;
    }
    .about-image {
        width: 100%;
        height: auto;
        border-radius: 2px;
        box-shadow: -20px 20px 0px rgba(255, 255, 255, 0.05);
        transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .about-image:hover {
        transform: translate(10px, -10px);
    }
    .about-text-content {
        font-size: 1.3rem;
        line-height: 1.8;
        color: #ddd;
        text-align: left;
        padding-top: 3rem;
        position: relative;
        z-index: 1;
    }
    .about-text-content p:first-child {
        font-size: 1.6rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 2rem;
    }
    .about-text-content p {
        margin-bottom: 1.5rem;
    }
    .bg-accent {
        position: absolute;
        top: -10%;
        right: -10%;
        font-size: 15rem;
        color: rgba(255,255,255,0.02);
        font-weight: 900;
        z-index: 0;
        pointer-events: none;
        text-transform: uppercase;
        white-space: nowrap;
    }
    @media (max-width: 900px) {
        .about-content-wrapper {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
        .about-text-content {
            padding-top: 0;
            text-align: center;
        }
        .about-image {
            box-shadow: none;
        }
        .bg-accent {
            display: none;
        }
    }
.about-image:hover {
        transform: translate(10px, -10px);
    }
    .about-text-content {
        font-size: 1.3rem;
        line-height: 1.8;
        color: #ddd;
        text-align: left;
        padding-top: 3rem;
        position: relative;
        z-index: 1;
    }
    .about-text-content p:first-child {
        font-size: 1.6rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 2rem;
    }
    .about-text-content p {
        margin-bottom: 1.5rem;
    }
    .bg-accent {
        position: absolute;
        top: -10%;
        right: -10%;
        font-size: 15rem;
        color: rgba(255,255,255,0.02);
        font-weight: 900;
        z-index: 0;
        pointer-events: none;
        text-transform: uppercase;
        white-space: nowrap;
    }
    @media (max-width: 900px) {
    .about-content-wrapper {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 5rem;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .about-image-wrapper {
        position: relative;
        z-index: 2;
    }
    .about-image {
        width: 100%;
        height: auto;
        border-radius: 2px;
        box-shadow: -20px 20px 0px rgba(255, 255, 255, 0.05);
        transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .about-image:hover {
        transform: translate(10px, -10px);
    }
    .about-text-content {
        font-size: 1.3rem;
        line-height: 1.8;
        color: #ddd;
        text-align: left;
        padding-top: 3rem;
        position: relative;
        z-index: 1;
    }
    .about-text-content p:first-child {
        font-size: 1.6rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 2rem;
    }
    .about-text-content p {
        margin-bottom: 1.5rem;
    }
    .bg-accent {
        position: absolute;
        top: -10%;
        right: -10%;
        font-size: 15rem;
        color: rgba(255,255,255,0.02);
        font-weight: 900;
        z-index: 0;
        pointer-events: none;
        text-transform: uppercase;
        white-space: nowrap;
    }
    @media (max-width: 900px) {
        .about-content-wrapper {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
        .about-text-content {
            padding-top: 0;
            text-align: center;
        }
        .about-image {
            box-shadow: none;
        }
        .bg-accent {
            display: none;
        }
    }
.bg-accent {
            display: none;
        }
    }
.media-item:hover img, .media-item:hover video {
        transform: scale(1.05);
    }

    @media (max-width: 900px) {
        .about-title { font-size: 3rem; }
        .about-section { padding: 10rem 20px 8rem; }
    }





    /* About Details & CTA */
    .about-details {
        margin-top: 3rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 2.5rem;
    }
    .detail-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 1rem;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .detail-line {
        width: 40px;
        height: 1px;
        background-color: #fff;
    }
    .about-cta-container {
        margin-top: 3rem;
    }
    .about-cta {
        display: inline-flex;
        align-items: center;
        padding: 1rem 3rem;
        font-size: 1rem;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #000;
        background-color: #fff;
        text-decoration: none;
        font-weight: 600;
        border-radius: 100px;
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
    }
    .about-cta span {
        position: relative;
        z-index: 2;
    }
    .about-cta::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.1);
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 1;
    }
    .about-cta:hover::before {
        transform: translateY(0);
    }
    .about-cta:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(255,255,255,0.2);
    }


    /* About Details & CTA */
    .about-details {
        margin-top: 3rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 2.5rem;
    }
    .detail-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 1rem;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .detail-line {
        width: 40px;
        height: 1px;
        background-color: #fff;
    }
    .about-cta-container {
        margin-top: 3rem;
    }
    .about-cta {
        display: inline-flex;
        align-items: center;
        padding: 1rem 3rem;
        font-size: 1rem;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #000;
        background-color: #fff;
        text-decoration: none;
        font-weight: 600;
        border-radius: 100px;
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
    }
    .about-cta span {
        position: relative;
        z-index: 2;
    }
    .about-cta::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.1);
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 1;
    }
    .about-cta:hover::before {
        transform: translateY(0);
    }
    .about-cta:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(255,255,255,0.2);
    }

    /* --- CUSTOM CURSOR --- */
    body, body * {
        cursor: none !important;
    }
    .cursor-follower {
        position: fixed;
        top: 0; left: 0;
        width: 10px; height: 10px;
        border-radius: 50%;
        background: #fff;
        mix-blend-mode: difference;
        pointer-events: none;
        z-index: 99999;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .cursor-icon {
        opacity: 0;
        transform: scale(0);
    }



        /* Page Transition */
        body {
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .page-transitioning {
            animation: fadeOut 0.5s ease-in forwards !important;
        }
        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-10px); }
        }
    

    @import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

        body {
            background-color: #050505;
            color: #fff;
            overflow-x: hidden;
        }

        /* Navbar (Solid background for sub-pages) */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 2rem 4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
            color: #fff;
        }

        .logo img {
            height: 120px;
            vertical-align: middle;
            transition: height 0.3s ease;
        }

        /* Burger Menu Icon */
        .burger-container {
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            z-index: 101;
            color: #fff;
        }

        .burger-text {
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: opacity 0.3s ease;
        }

        .burger {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .burger div {
            width: 35px;
            height: 3px;
            background-color: #fff;
            box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
            transition: all 0.4s ease;
        }

        .burger-container.active .burger div:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .burger-container.active .burger div:nth-child(2) {
            opacity: 0;
        }

        .burger-container.active .burger div:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }
        
        .burger-container.active .burger-text {
            opacity: 0; /* Cacher le texte quand le menu est ouvert */
        }

        /* Full Screen Menu Overlay */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(5, 5, 5, 0.85); /* Fond semi-transparent sombre */
            backdrop-filter: blur(25px); /* Ultra moderne effet verre */
            -webkit-backdrop-filter: blur(25px);
            z-index: 99;
            display: flex;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            overflow-y: auto;
        }

        .menu-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* Conteneur principal des liens */
        .menu-links {
            list-style: none;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 2.5rem; /* Espace plus aéré pour la DA */
            padding: 4rem 15vw; /* Plus centré mais aligné à gauche */
            width: 100%;
        }

        .menu-links > li {
            transform: translateX(-30px); /* Transition plus douce */
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .menu-overlay.active .menu-links > li {
            transform: translateX(0);
            opacity: 1;
        }

        /* Cascade d'apparition */
        .menu-links > li:nth-child(1) { transition-delay: 0.15s; }
        .menu-links > li:nth-child(2) { transition-delay: 0.25s; }
        .menu-links > li:nth-child(3) { transition-delay: 0.35s; }
        .menu-links > li:nth-child(4) { transition-delay: 0.45s; }
        .menu-links > li:nth-child(5) { transition-delay: 0.55s; }

        /* Liens Principaux (Niveau 1) - Typo Cinématographique */
        .menu-links > li > a {
            color: #ffffff; /* Plein par défaut */
            -webkit-text-stroke: 1.5px #ffffff;
            text-decoration: none;
            font-size: clamp(3rem, 6vw, 6rem);
            font-family: 'Helvetica Neue', 'Arial Black', Impact, sans-serif; /* Typo plus massive et carrée */
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: 2px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            align-items: center;
        }
        
        /* Numérotation Premium (01, 02...) */
        .menu-links {
            counter-reset: menu-item;
        }
        .menu-links > li {
            counter-increment: menu-item;
        }
        .menu-links > li > a::before {
            content: "0" counter(menu-item) " /";
            font-size: 1rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            -webkit-text-stroke: 0px; /* Pas d'outline sur les chiffres */
            margin-right: 2rem;
            letter-spacing: 4px;
            transform: translateY(-5px);
            transition: color 0.5s ease;
        }

        /* Hover Principal - Devient Transparent (Outline) */
        .menu-links > li > a:hover,
        .has-submenu:hover > a { 
            color: transparent; /* Devient transparent au hover, gardant le contour */
            -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
            letter-spacing: 5px; /* S'écarte très légèrement */
            transform: translateX(15px);
        }
        
        .menu-links > li > a:hover::before,
        .has-submenu:hover > a::before {
            color: #ffffff;
        }

        /* Sous-menus (Vidéos, Photos) */
        .has-submenu {
            position: relative;
        }

        .submenu {
            list-style: none;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 2rem; /* Espace plus large pour laisser respirer l'œil */
            margin-left: max(5vw, 4rem);
            padding-left: 0;
            border-left: none;
        }

        /* Révélation du sous-menu */
        .has-submenu:hover .submenu,
        .has-submenu.mobile-open .submenu {
            max-height: 350px;
            opacity: 1;
            margin-top: 1.5rem;
            margin-bottom: 2rem;
        }

        /* Liens Sous-menus (Design Ultra-Moderne & Cinématographique) */
        .submenu a {
            font-size: 0.8rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4); /* Gris luxueux par défaut */
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            display: inline-flex;
            align-items: center; /* Aligne le tiret d'animation avec le texte */
            text-decoration: none;
            padding: 0.5rem 0;
        }

        /* Dash (tiret) qui va pousser le texte au hover */
        .submenu a::before {
            content: '';
            display: inline-block;
            width: 0;
            height: 2px;
            background-color: #ffffff;
            margin-right: 0;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .submenu a:hover {
            color: #ffffff;
            opacity: 1;
            transform: translateX(10px); /* Le texte avance un peu */
        }

        .submenu a:hover::before {
            width: 20px; /* Le tiret grandit */
            margin-right: 15px; /* Et pousse le texte */
        }

        /* ----- SECTION PHOTOS (PORTFOLIO) ----- */
        .photos-section {
            padding: 12rem 4rem 10rem 4rem; /* Pad top to account for nav */
            min-height: 100vh;
        }

        .section-header {
            margin-bottom: 5rem;
        }

        .section-subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #888;
            margin-bottom: 1rem;
            display: block;
        }

        .section-title {
            font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
            font-size: clamp(3rem, 6vw, 6rem);
            color: #fff;
            text-transform: uppercase;
            line-height: 1.1;
        }

        @keyframes revealCard {
            from {
                opacity: 0;
                transform: translateY(40px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 3rem;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards; /* Le conteneur s'affiche doucement */
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .portfolio-card {
            background-color: #f6f6f6;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #111;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
            opacity: 0;
            animation: revealCard 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
            position: relative;
            overflow: hidden; /* Pour contenir l'image qui s'agrandit */
        }

        .portfolio-card:hover {
            transform: translateY(-8px);
            background-color: #ffffff;
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
            border-color: rgba(0,0,0,0.1);
        }

        /* Cascade de l'animation d'entrée */
        .portfolio-card:nth-child(1) { animation-delay: 0.1s; }
        .portfolio-card:nth-child(2) { animation-delay: 0.2s; }
        .portfolio-card:nth-child(3) { animation-delay: 0.3s; }
        .portfolio-card:nth-child(4) { animation-delay: 0.4s; }
        .portfolio-card:nth-child(5) { animation-delay: 0.5s; }
        .portfolio-card:nth-child(6) { animation-delay: 0.6s; }
        .portfolio-card:nth-child(7) { animation-delay: 0.7s; }

        .portfolio-card {
            background-color: #f6f6f6;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #111;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
            opacity: 0;
            animation: revealCard 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
            position: relative;
            container-type: inline-size; /* Active les requêtes de container pour un clip-path mathématiquement parfait */
            overflow: hidden;
        }

        .portfolio-card:hover {
            transform: translateY(-8px);
            background-color: #ffffff;
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
            border-color: rgba(0,0,0,0.1);
        }

        /* L'espace fantôme qui maintient exactement la structure de la carte sans jamais bouger */
        .portfolio-card::before {
            content: '';
            display: block;
            width: 100%;
            padding-bottom: 62.5%; /* Ratio 16/10 parfait, 100% robuste sur tous navigateurs */
            margin-bottom: 3rem;
        }

        /* Cascade de l'animation d'entrée */
        .portfolio-card:nth-child(1) { animation-delay: 0.1s; }
        .portfolio-card:nth-child(2) { animation-delay: 0.2s; }
        .portfolio-card:nth-child(3) { animation-delay: 0.3s; }
        .portfolio-card:nth-child(4) { animation-delay: 0.4s; }
        .portfolio-card:nth-child(5) { animation-delay: 0.5s; }
        .portfolio-card:nth-child(6) { animation-delay: 0.6s; }
        .portfolio-card:nth-child(7) { animation-delay: 0.7s; }

        .card-image-wrap {
            /* L'image est isolée de la structure pour ne provoquer AUCUN blocage ou saccade */
            position: absolute;
            top: 2.5rem;
            left: 2.5rem;
            right: 2.5rem;
            /* La magie: le padding bottom mathématique gère le ratio (16/10 = 0.625) */
            padding-bottom: calc((100% - 5rem) * 0.625);
            height: 0;
            background-color: #111;
            z-index: 0;
            overflow: hidden;
            transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            border-radius: 0;
        }

        .card-title-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3.5rem;
            position: relative;
            z-index: 2;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }

        /* Au hover, l'image n'a plus aucune restriction de position, elle glisse parfaitement jusqu'aux bords */
        .portfolio-card:hover .card-image-wrap {
            top: 0;
            left: 0;
            right: 0;
            padding-bottom: 0;
            height: 100%;
        }

        /* Le titre n'a plus besoin d'être repoussé puisqu'il est géré par l'espace fantôme */
        .portfolio-card:hover .card-title-wrap * {
            color: #fff;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Pour rester lisible partout */
        }

        /* Au hover, on ajoute un léger voile pour lire le texte */
        .portfolio-card::after {
            content: '';
            position: absolute;
            top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0);
            z-index: 1;
            transition: background 0.6s ease;
            pointer-events: none;
        }
        
        .portfolio-card:hover::after {
            background: rgba(0,0,0,0.4);
        }

        /* Effet Caméra: Les coins de l'autofocus (Viewfinder) */
        .card-image-wrap::before {
            content: '';
            position: absolute;
            top: 25px; left: 25px; right: 25px; bottom: 25px;
            background: 
                linear-gradient(#fff, #fff) 0 0 / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 0 0 / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 100% 0 / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 100% 0 / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 0 100% / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 0 100% / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 100% 100% / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 100% 100% / 2px 20px no-repeat;
            opacity: 0;
            transform: scale(1.1);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 3;
            pointer-events: none;
        }

        .portfolio-card:hover .card-image-wrap::before {
            opacity: 0.9;
            transform: scale(1); /* Les coins se referment sur la cible (focus) */
        }

        /* Effet Caméra: Réticule Central (+) */
        .card-image-wrap::after {
            content: '+';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(2);
            color: transparent;
            font-size: 2.5rem;
            font-weight: 300;
            font-family: monospace;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 4;
            pointer-events: none;
            text-align: center;
            line-height: 1;
        }

        .portfolio-card:hover .card-image-wrap::after {
            color: rgba(255,255,255,0.9);
            transform: translate(-50%, -50%) scale(1);
        }

        @keyframes focusFlash {
            0% { filter: brightness(1) blur(0px); }
            15% { filter: brightness(1.7) blur(1px); }
            100% { filter: brightness(1) blur(0px); }
        }

        .card-image-wrap img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
            transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
            filter: grayscale(0%) contrast(1); /* Couleurs normales par défaut */
            transform: scale(1.02);
            z-index: 1;
        }

        .portfolio-card:hover .card-image-wrap img {
            transform: scale(1.05); /* Zoom très léger derrière toute la carte. */
            animation: focusFlash 0.5s ease-out; /* Léger flash + flou d'obturateur */
        }

        .portfolio-card h3 {
            font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
            font-size: 2.8rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -2px;
            color: #111;
            margin: 0;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform-origin: left center;
            position: relative;
            z-index: 2;
        }

        .card-icon {
            opacity: 0;
            transform: translate(-15px, 15px) rotate(-45deg);
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            font-size: 2rem;
            color: #111;
            font-weight: bold;
            position: relative;
            z-index: 2;
        }

        .portfolio-card:hover .card-icon {
            opacity: 1;
            transform: translate(0, 0) rotate(0deg);
            color: #fff; /* Le texte passe en blanc au survol */
        }

        .portfolio-card:hover h3 {
            transform: translateX(10px);
            letter-spacing: 1px;
            color: #fff; /* Le texte passe en blanc au survol */
        }

        .card-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: auto;
            border-top: 1px solid rgba(0,0,0,0.1);
            padding-top: 1.5rem;
            transition: border-color 0.4s ease;
            position: relative;
            z-index: 2;
        }

        .portfolio-card:hover .card-categories {
            border-top-color: rgba(0,0,0,0.2);
        }

        .cat-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            color: #111;
            font-weight: 500;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform: translateY(0);
        }

        .portfolio-card:hover .cat-item {
            color: #fff;
        }

        /* Animation cascade des tags au survol de la carte */
        .portfolio-card:hover .cat-item:nth-child(1) { transform: translateY(-5px); transition-delay: 0.05s; }
        .portfolio-card:hover .cat-item:nth-child(2) { transform: translateY(-5px); transition-delay: 0.1s; }
        .portfolio-card:hover .cat-item:nth-child(3) { transform: translateY(-5px); transition-delay: 0.15s; }

        .cat-item .dot {
            width: 6px;
            height: 6px;
            background-color: #111;
            border-radius: 50%;
            transition: all 0.4s ease;
        }

        .portfolio-card:hover .cat-item .dot {
            transform: scale(1.5);
            background-color: #fff;
            box-shadow: 0 0 10px rgba(255,255,255,0.8);
        }

        .cat-item .label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            color: #444;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: color 0.4s ease;
        }

        .portfolio-card:hover .cat-item .label {
            color: #fff;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .navbar { padding: 1.5rem; }
            .logo img { height: 80px; }
            .menu-links a { font-size: 2rem; }
            .photos-section { padding: 8rem 1.5rem 6rem; }
            .portfolio-grid { grid-template-columns: 1fr; gap: 2rem; }
            .portfolio-card h3 { font-size: 1.8rem; margin-bottom: 2rem; }
            .card-categories { gap: 1rem; }
            .footer-content { flex-direction: column; gap: 3rem; text-align: center; }
            .footer-brand { align-items: center; }
            .footer-links { flex-direction: column; gap: 1.5rem; align-items: center; margin: 0; }
            .footer-links a { margin: 0; }
            .footer-bottom { flex-direction: column; gap: 10px; }
        }

        /* ----- FOOTER MODERNE ----- */
        .site-footer {
            background-color: #030303;
            padding: 3rem 4rem 1.5rem 4rem; /* Hauteur fortement réduite */
            border-top: 1px solid rgba(255,255,255,0.05);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center; /* Centré verticalement pour plus de proportion */
            max-width: 1600px;
            margin: 0 auto;
        }

        .footer-brand {
            display: flex;
            flex-direction: column;
            gap: 0;
            max-width: 300px;
        }

        .footer-brand img {
            width: 150px; /* Logo très légèrement plus grand pour asseoir le centre */
            height: auto;
            opacity: 0.9;
            transition: opacity 0.4s ease;
        }

        .footer-brand img:hover {
            opacity: 1;
        }

        /* Retire le style tagline inutilisé */

        .footer-links {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }

        .footer-links a {
            color: #fff;
            text-decoration: none;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            position: relative;
            transition: color 0.3s ease;
            padding: 0.5rem 0;
        }

        .footer-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #fff;
            transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .footer-links a:hover {
            color: #fff;
        }

        .footer-links a:hover::after {
            width: 100%;
        }

        .footer-socials {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .social-icon-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px; /* Boutons réseaux plus petits */
            height: 40px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            color: #fff;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .social-icon-box::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            z-index: 0;
        }

        .social-icon-box:hover {
            border-color: #fff;
            transform: translateY(-5px);
        }

        .social-icon-box:hover::before {
            top: 0;
        }

        .social-icon-box svg {
            position: relative;
            z-index: 1;
            transition: stroke 0.4s ease;
            width: 18px; /* Icône SVG plus petite */
            height: 18px;
        }

        .social-icon-box:hover svg {
            stroke: #000;
        }

        .footer-bottom {
            max-width: 1600px;
            margin: 2.5rem auto 0 auto; /* Remonté */
            padding-top: 1.5rem; /* Moins d'espace */
            border-top: 1px solid rgba(255,255,255,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.65rem;
            color: #555;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .footer-bottom-group {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .footer-bottom a {
            color: #555;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-bottom a:hover {
            color: #fff;
        }

        .brand-beyourmoon {
            font-family: 'Limelight', cursive;
            font-size: 0.8rem;
            color: #fff;
            text-transform: none;
            letter-spacing: 1px;
        }
    
    /* --- ABOUT PAGE CUSTOM CSS --- */
    .about-section {
        padding: 15rem 5% 15rem;
max-width: 1400px;
        margin: 0 auto;
        color: #fff;
    }
    .about-header {
        margin-bottom: 2.5rem;
        text-align: left;
    }
    .about-subtitle {
        
        color: rgba(255, 255, 255, 0.4);
        font-size: 1.5rem;
        text-transform: uppercase;
        margin-bottom: 1rem;
        display: block;
        letter-spacing: 5px;
    }
    .about-title {
        font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
        font-size: 5rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -2px;
        margin: 0;
        line-height: 1;
    }
    .about-content-wrapper {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 5rem;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .about-image-wrapper {
        position: relative;
        z-index: 2;
    }
    .about-image {
        width: 100%;
        height: auto;
        border-radius: 2px;
        box-shadow: -20px 20px 0px rgba(255, 255, 255, 0.05);
        transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .about-image:hover {
        transform: translate(10px, -10px);
    }
    .about-text-content {
        font-size: 1.3rem;
        line-height: 1.8;
        color: #ddd;
        text-align: left;
        padding-top: 3rem;
        position: relative;
        z-index: 1;
    }
    .about-text-content p:first-child {
        font-size: 1.6rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 2rem;
    }
    .about-text-content p {
        margin-bottom: 1.5rem;
    }
    .bg-accent {
        position: absolute;
        top: -10%;
        right: -10%;
        font-size: 15rem;
        color: rgba(255,255,255,0.02);
        font-weight: 900;
        z-index: 0;
        pointer-events: none;
        text-transform: uppercase;
        white-space: nowrap;
    }
    @media (max-width: 900px) {
        .about-content-wrapper {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
        .about-text-content {
            padding-top: 0;
            text-align: center;
        }
        .about-image {
            box-shadow: none;
        }
        .bg-accent {
            display: none;
        }
    }
.about-image:hover {
        transform: translate(10px, -10px);
    }
    .about-text-content {
        font-size: 1.3rem;
        line-height: 1.8;
        color: #ddd;
        text-align: left;
        padding-top: 3rem;
        position: relative;
        z-index: 1;
    }
    .about-text-content p:first-child {
        font-size: 1.6rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 2rem;
    }
    .about-text-content p {
        margin-bottom: 1.5rem;
    }
    .bg-accent {
        position: absolute;
        top: -10%;
        right: -10%;
        font-size: 15rem;
        color: rgba(255,255,255,0.02);
        font-weight: 900;
        z-index: 0;
        pointer-events: none;
        text-transform: uppercase;
        white-space: nowrap;
    }
    @media (max-width: 900px) {
    .about-content-wrapper {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 5rem;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .about-image-wrapper {
        position: relative;
        z-index: 2;
    }
    .about-image {
        width: 100%;
        height: auto;
        border-radius: 2px;
        box-shadow: -20px 20px 0px rgba(255, 255, 255, 0.05);
        transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .about-image:hover {
        transform: translate(10px, -10px);
    }
    .about-text-content {
        font-size: 1.3rem;
        line-height: 1.8;
        color: #ddd;
        text-align: left;
        padding-top: 3rem;
        position: relative;
        z-index: 1;
    }
    .about-text-content p:first-child {
        font-size: 1.6rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 2rem;
    }
    .about-text-content p {
        margin-bottom: 1.5rem;
    }
    .bg-accent {
        position: absolute;
        top: -10%;
        right: -10%;
        font-size: 15rem;
        color: rgba(255,255,255,0.02);
        font-weight: 900;
        z-index: 0;
        pointer-events: none;
        text-transform: uppercase;
        white-space: nowrap;
    }
    @media (max-width: 900px) {
        .about-content-wrapper {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
        .about-text-content {
            padding-top: 0;
            text-align: center;
        }
        .about-image {
            box-shadow: none;
        }
        .bg-accent {
            display: none;
        }
    }
.bg-accent {
            display: none;
        }
    }
.media-item:hover img, .media-item:hover video {
        transform: scale(1.05);
    }

    @media (max-width: 900px) {
        .about-title { font-size: 3rem; }
        .about-section { padding: 10rem 20px 8rem; }
    }


    /* --- CONTACT PAGE CUSTOM CSS --- */
    .contact-section {
        padding: 15rem 5% 10rem;
        max-width: 1400px;
        margin: 0 auto;
        color: #fff;
    }
    .contact-header {
        margin-bottom: 5rem;
        text-align: center;
    }
    .contact-subtitle {
        color: rgba(255, 255, 255, 0.4);
        font-size: 1.5rem;
        text-transform: uppercase;
        margin-bottom: 1rem;
        display: block;
        letter-spacing: 5px;
    }
    .contact-title {
        font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
        font-size: 5rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -2px;
        margin: 0;
        line-height: 1;
    }
    .contact-content-wrapper {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 6rem;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .contact-info-block {
        display: flex;
        flex-direction: column;
        gap: 3.5rem;
    }
    .info-group {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .info-label {
        font-size: 0.9rem;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .info-text {
        font-size: 1.8rem;
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .info-text:hover {
        color: rgba(255,255,255,0.7);
    }
    
    .social-links-grid {
        display: flex;
        gap: 1.5rem;
        margin-top: 0.5rem;
    }

    /* Modern Form Formsubmit */
    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }
    .input-group {
        position: relative;
    }
    .input-field {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding: 10px 0;
        font-size: 1.2rem;
        color: #fff;
        outline: none;
        transition: border-color 0.3s ease;
        font-family: inherit;
    }
    .input-field:focus {
        border-color: #fff;
    }
    .input-field::placeholder {
        color: transparent;
    }
    .input-label {
        position: absolute;
        top: 10px;
        left: 0;
        color: rgba(255,255,255,0.5);
        font-size: 1.2rem;
        transition: all 0.3s ease;
        pointer-events: none;
    }
    .input-field:focus ~ .input-label,
    .input-field:not(:placeholder-shown) ~ .input-label {
        top: -20px;
        font-size: 0.9rem;
        color: #fff;
    }
    textarea.input-field {
        resize: none;
        min-height: 120px;
    }
    .submit-btn {
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1.2rem 3rem;
        font-size: 1rem;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #000;
        background-color: #fff;
        border: none;
        font-weight: 600;
        border-radius: 100px;
        cursor: pointer;
        transition: all 0.4s ease;
        margin-top: 1rem;
    }
    .submit-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(255,255,255,0.2);
    }
    
    @media (max-width: 900px) {
        .contact-content-wrapper {
            grid-template-columns: 1fr;
            gap: 4rem;
        }
        .contact-title { font-size: 3rem; }
    }

    

        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

        body {
            background-color: rgba(255, 255, 255, 0.6);
            color: #fff;
            overflow-x: hidden;
        }

        /* Hero / Video Slider */
        .hero {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.5s ease-in-out, transform 10s linear;
            transform: scale(1.05);
        }

        .video-container.active {
            opacity: 1;
            transform: scale(1);
            z-index: 1;
        }

        /* Format 16:9 forcé en plein écran (pour éliminer les barres noires) */
        .video-container:not(.mobile) iframe {
            width: 100vw;
            height: 56.25vw; /* 16:9 Aspect Ratio */
            min-height: 100vh;
            min-width: 177.77vh; /* 16:9 Aspect Ratio */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        /* Format personnalisé pour la vidéo mobile (vidéo 1) */
        .video-container.mobile iframe {
            width: 100vw;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        /* Navbar */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 2rem 4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            color: #fff;
            text-shadow: 0px 1px 5px rgba(0,0,0,0.5);
        }

        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
        }

        .logo img {
            height: 120px; /* Logo beaucoup plus gros */
            vertical-align: middle;
            transition: height 0.3s ease;
            filter: drop-shadow(0px 1px 5px rgba(0,0,0,0.5));
        }

        /* Burger Menu Icon */
        .burger-container {
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            z-index: 101;
            color: #fff;
            text-shadow: 0px 1px 5px rgba(0,0,0,0.5);
        }
        
        .burger-text {
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: opacity 0.3s ease;
        }

        .burger {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .burger div {
            width: 35px;
            height: 3px;
            background-color: #fff;
            box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
            transition: all 0.4s ease;
        }

        .burger-container.active .burger div:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .burger-container.active .burger div:nth-child(2) {
            opacity: 0;
        }

        .burger-container.active .burger div:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }
        
        .burger-container.active .burger-text {
            opacity: 0; /* Cacher le texte quand le menu est ouvert */
        }

        /* Full Screen Menu Overlay */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(5, 5, 5, 0.85); /* Fond semi-transparent sombre */
            backdrop-filter: blur(25px); /* Ultra moderne effet verre */
            -webkit-backdrop-filter: blur(25px);
            z-index: 99;
            display: flex;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            overflow-y: auto;
        }

        .menu-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* Conteneur principal des liens */
        .menu-links {
            list-style: none;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 2.5rem; /* Espace plus aéré pour la DA */
            padding: 4rem 15vw; /* Plus centré mais aligné à gauche */
            width: 100%;
        }

        .menu-links > li {
            transform: translateX(-30px); /* Transition plus douce */
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .menu-overlay.active .menu-links > li {
            transform: translateX(0);
            opacity: 1;
        }

        /* Cascade d'apparition */
        .menu-links > li:nth-child(1) { transition-delay: 0.15s; }
        .menu-links > li:nth-child(2) { transition-delay: 0.25s; }
        .menu-links > li:nth-child(3) { transition-delay: 0.35s; }
        .menu-links > li:nth-child(4) { transition-delay: 0.45s; }
        .menu-links > li:nth-child(5) { transition-delay: 0.55s; }

        /* Liens Principaux (Niveau 1) - Typo Cinématographique */
        .menu-links > li > a {
            color: #ffffff; /* Plein par défaut */
            -webkit-text-stroke: 1.5px #ffffff;
            text-decoration: none;
            font-size: clamp(3rem, 6vw, 6rem);
            font-family: 'Helvetica Neue', 'Arial Black', Impact, sans-serif; /* Typo plus massive et carrée */
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: 2px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            align-items: center;
        }
        
        /* Numérotation Premium (01, 02...) */
        .menu-links {
            counter-reset: menu-item;
        }
        .menu-links > li {
            counter-increment: menu-item;
        }
        .menu-links > li > a::before {
            content: "0" counter(menu-item) " /";
            font-size: 1rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            -webkit-text-stroke: 0px; /* Pas d'outline sur les chiffres */
            margin-right: 2rem;
            letter-spacing: 4px;
            transform: translateY(-5px);
            transition: color 0.5s ease;
        }

        /* Hover Principal - Devient Transparent (Outline) */
        .menu-links > li > a:hover,
        .has-submenu:hover > a { 
            color: transparent; /* Devient transparent au hover, gardant le contour */
            -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
            letter-spacing: 5px; /* S'écarte très légèrement */
            transform: translateX(15px);
        }
        
        .menu-links > li > a:hover::before,
        .has-submenu:hover > a::before {
            color: #ffffff;
        }

        /* Sous-menus (Vidéos, Photos) */
        .has-submenu {
            position: relative;
        }

        .submenu {
            list-style: none;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 2rem; /* Espace plus large pour laisser respirer l'œil */
            margin-left: max(5vw, 4rem);
            padding-left: 0;
            border-left: none;
        }

        /* Révélation du sous-menu */
        .has-submenu:hover .submenu,
        .has-submenu.mobile-open .submenu {
            max-height: 350px;
            opacity: 1;
            margin-top: 1.5rem;
            margin-bottom: 2rem;
        }

        /* Liens Sous-menus (Design Ultra-Moderne & Cinématographique) */
        .submenu a {
            font-size: 0.8rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4); /* Gris luxueux par défaut */
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            display: inline-flex;
            align-items: center; /* Aligne le tiret d'animation avec le texte */
            text-decoration: none;
            padding: 0.5rem 0;
        }

        /* Dash (tiret) qui va pousser le texte au hover */
        .submenu a::before {
            content: '';
            display: inline-block;
            width: 0;
            height: 2px;
            background-color: #fff;
            margin-right: 0;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            opacity: 0;
        }

        .submenu a:hover {
            color: #fff; /* Devient blanc pur */
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* Glow lumineux très haut de gamme */
            transform: translateX(3px); /* Petit décalage fluide global */
        }

        /* Le tiret apparaît au milieu de la hauteur et pousse le mot */
        .submenu a:hover::before {
            width: 15px; /* Longueur du tiret */
            margin-right: 12px; /* Dégagement entre le tiret et le mot */
            opacity: 1;
        }

        /* Social Networks Sidebar */
        .socials {
            position: fixed;
            right: 4rem;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3rem;
            z-index: 90;
        }
        
        /* Lignes minimalistes (repères de cadre) */
        .socials::before, .socials::after {
            content: '';
            width: 1px;
            height: 60px;
            background-color: rgba(255, 255, 255, 0.2);
            transition: height 0.5s ease;
        }

        .socials:hover::before, .socials:hover::after {
            height: 30px; /* Les lignes se rétractent sur le focus */
        }

        .socials a {
            color: #fff; /* Opacité à 100% de base */
            text-decoration: none;
            font-size: 0.75rem; /* Plus fin et luxueux */
            font-weight: 400;
            letter-spacing: 4px;
            writing-mode: vertical-rl;
            text-transform: uppercase;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
            transition: all 0.3s ease;
            position: relative;
            padding-left: 8px; /* Espace pour le soulignement */
        }

        /* Ligne de soulignement animée */
        .socials a::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 1px;
            height: 0;
            background-color: #fff;
            transition: height 0.3s ease;
            box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
        }

        .socials a:hover {
            color: #fff;
            opacity: 1;
        }

        .socials a:hover::after {
            height: 100%;
        }

        /* Loader Cinématographique */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #000;
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: fadeOut 1s ease-in-out 3.5s forwards; /* Laissé plus longtemps pour profiter de l'animation */
        }

        .loader-content {
            position: relative;
            padding: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Viseur de caméra (Crop marks) */
        .loader-content::before,
        .loader-content::after {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            border: 2px solid rgba(255, 255, 255, 0.7);
            opacity: 0;
            animation: focusFrame 2s cubic-bezier(0.19, 1, 0.22, 1) 0.2s forwards;
        }

        .loader-content::before {
            top: 0;
            left: 0;
            border-right: none;
            border-bottom: none;
        }

        .loader-content::after {
            bottom: 0;
            right: 0;
            border-left: none;
            border-top: none;
        }

        /* Indicateur REC clignotant */
        .loader-rec {
            position: absolute;
            top: 10px;
            right: 20px;
            color: #ff0000;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 3px;
            opacity: 0;
            font-family: monospace;
            animation: flashRec 1s step-start infinite 0.5s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .loader-rec::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #ff0000;
            border-radius: 50%;
        }

        .loader img {
            height: 250px; /* Logo beaucoup plus gros */
            max-width: 80vw;
            object-fit: contain;
            opacity: 0;
            transform: scale(0.85); /* Mise au point et zoom avant */
            animation: cinematicReveal 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            filter: grayscale(100%) contrast(1.2); /* Look pellicule brut */
        }

        @keyframes focusFrame {
            0% { transform: scale(1.3); opacity: 0; }
            100% { transform: scale(1); opacity: 1; border-color: rgba(255, 255, 255, 1); }
        }

        @keyframes flashRec {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        @keyframes cinematicReveal {
            0% {
                transform: scale(0.8);
                opacity: 0;
                filter: blur(10px) grayscale(100%);
            }
            30% {
                opacity: 1;
                filter: blur(0px) grayscale(100%);
            }
            100% {
                transform: scale(1.05); /* Lent Travelling avant "Dolly-in" */
                opacity: 1;
                filter: blur(0px) grayscale(100%);
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
                visibility: hidden;
            }
        }

        /* Loading Bar intégrée au viseur */
        .loading-bar-container {
            position: absolute;
            bottom: 35px; /* Positionnée exactement dans le cadre de la caméra */
            left: 50%;
            transform: translateX(-50%);
            width: 120px; /* Plus compacte pour faire plus UI caméra */
            height: 2px;
            background: rgba(255, 255, 255, 0.2);
            overflow: hidden;
            opacity: 0;
            animation: fadeInBar 0.5s ease 0.5s forwards;
        }

        .loading-bar {
            width: 0%;
            height: 100%;
            background: #fff;
            animation: loadingProgress 2.5s cubic-bezier(0.7, 0, 0.3, 1) 0.5s forwards;
        }

        @keyframes fadeInBar {
            to { opacity: 1; }
        }

        @keyframes loadingProgress {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        /* Slider Controls */
        .slider-controls {
            position: absolute;
            bottom: 4rem;
            left: 4rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            z-index: 10;
            color: #fff;
            text-shadow: 0px 1px 5px rgba(0,0,0,0.5);
        }

        .slider-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
            transition: transform 0.3s ease, opacity 0.3s ease;
            opacity: 0.5;
            padding: 10px;
        }

        .slider-btn:hover {
            opacity: 1;
            transform: scale(1.2);
        }

        .slide-indicator {
            font-size: 0.85rem;
            letter-spacing: 4px;
            font-weight: 400;
            opacity: 0.9;
        }

        /* Hero Slide Info & CTA (Awwwards Style) */
        #slideInfoContainer {
            position: absolute;
            top: 50%;
            left: 6vw;
            transform: translateY(-50%);
            z-index: 20;
            pointer-events: none;
        }

        .slide-info {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.8s;
        }

        .slide-info.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .slide-subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 1.5rem;
            transform: translateY(20px);
            opacity: 0;
            transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s, opacity 0.8s ease 0.1s;
        }

        .slide-title {
            font-family: 'Helvetica Neue', 'Arial Black', Impact, sans-serif;
            font-size: clamp(2.5rem, 5vw, 5rem); /* Plus petit pour voir la vidéo */
            font-weight: 900;
            line-height: 1.05;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #fff; /* Lettres pleines */
            text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4); /* Ombre pour la lisibilité */
            margin: 0 0 3rem 0;
            transform: translateY(30px);
            opacity: 0;
            transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, opacity 0.8s ease 0.2s;
        }

        /* Hover sur le titre */
        .slide-title:hover {
            text-shadow: 0px 5px 20px rgba(255,255,255,0.6);
            transform: translateX(10px) !important;
            transition: all 0.4s ease;
            cursor: default;
        }

        .slide-info.active .slide-subtitle,
        .slide-info.active .slide-title,
        .slide-info.active .slide-cta {
            transform: translateY(0);
            opacity: 1;
        }

        /* Bouton CTA Ultra Premium (Magnetic/Circle style) */
        .slide-cta {
            display: inline-flex;
            align-items: center;
            gap: 1.5rem;
            text-decoration: none;
            cursor: pointer;
            transform: translateY(40px);
            opacity: 0;
            transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s, opacity 0.8s ease 0.3s;
        }

        .cta-wrap {
            overflow: hidden;
            display: inline-block;
        }

        .cta-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 3px;
            color: #fff;
            text-transform: uppercase;
            display: inline-block;
            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .cta-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            transition: border-color 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
            backdrop-filter: blur(5px);
        }

        .cta-circle::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 100%; height: 0%;
            background-color: #fff;
            transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            z-index: 0;
        }

        .cta-circle .arrow {
            color: #fff;
            font-size: 1.2rem;
            position: relative;
            z-index: 1;
            transition: color 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
            font-family: Arial, sans-serif;
        }

        /* CTA Hover Effects */
        .slide-cta:hover .cta-text {
            transform: translateX(5px);
            color: rgba(255, 255, 255, 0.8);
        }

        .slide-cta:hover .cta-circle {
            border-color: #fff;
            transform: scale(1.15); /* Gonflement doux */
        }

        .slide-cta:hover .cta-circle::after {
            height: 100%; /* Remplissage par le bas fluide */
        }

        .slide-cta:hover .cta-circle .arrow {
            color: rgba(255, 255, 255, 0.6); /* Devient noir sur fond blanc */
            transform: scale(1.1) rotate(-45deg); /* Flèche pointe en haut à droite super stylisée */
        }

        /* Footer Overlay discret */
        .footer-overlay {
            position: absolute;
            bottom: 15px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 0.70rem; /* Très petit */
            color: #fff; /* Blanc forcé */
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); /* Ombre légère pour rester lisible sur fond blanc */
            z-index: 10;
            pointer-events: none; /* Pas d'interférence avec la vidéo */
            letter-spacing: 0.5px;
        }

        .footer-overlay a {
            pointer-events: auto; /* Autorise le clic sur les liens */
            color: #fff;
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

        .footer-overlay a:hover {
            opacity: 0.7;
        }

        .brand-beyourmoon {
            font-family: 'Limelight', sans-serif;
            font-size: 0.75rem; /* Légèrement plus grand pour la lisibilité */
            color: #fff;
            letter-spacing: 1px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .navbar { padding: 1.5rem; }
            .logo img { height: 80px; } /* Ajusté pour tel */
            .socials { display: none; }
            .menu-links a { font-size: 2rem; }
            .slider-controls {
                left: 50%;
                transform: translateX(-50%);
                bottom: 3rem;
            }
        }
    


    /* --- CUSTOM CURSOR --- */
    body, body * {
        cursor: none !important;
    }
    .cursor-follower {
        position: fixed;
        top: 0; left: 0;
        width: 10px; height: 10px;
        border-radius: 50%;
        background: #fff;
        mix-blend-mode: difference;
        pointer-events: none;
        z-index: 99999;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .cursor-icon {
        opacity: 0;
        transform: scale(0);
    }



        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

        body {
            background-color: #050505;
            color: #fff;
            overflow-x: hidden;
        }

        /* Navbar (Solid background for sub-pages) */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 2rem 4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
            color: #fff;
        }

        .logo img {
            height: 120px;
            vertical-align: middle;
            transition: height 0.3s ease;
        }

        /* Burger Menu Icon */
        .burger-container {
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            z-index: 101;
            color: #fff;
        }

        .burger-text {
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: opacity 0.3s ease;
        }

        .burger {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .burger div {
            width: 35px;
            height: 3px;
            background-color: #fff;
            box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
            transition: all 0.4s ease;
        }

        .burger-container.active .burger div:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .burger-container.active .burger div:nth-child(2) {
            opacity: 0;
        }

        .burger-container.active .burger div:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }
        
        .burger-container.active .burger-text {
            opacity: 0; /* Cacher le texte quand le menu est ouvert */
        }

        /* Full Screen Menu Overlay */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(5, 5, 5, 0.85); /* Fond semi-transparent sombre */
            backdrop-filter: blur(25px); /* Ultra moderne effet verre */
            -webkit-backdrop-filter: blur(25px);
            z-index: 99;
            display: flex;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            overflow-y: auto;
        }

        .menu-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* Conteneur principal des liens */
        .menu-links {
            list-style: none;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 2.5rem; /* Espace plus aéré pour la DA */
            padding: 4rem 15vw; /* Plus centré mais aligné à gauche */
            width: 100%;
        }

        .menu-links > li {
            transform: translateX(-30px); /* Transition plus douce */
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .menu-overlay.active .menu-links > li {
            transform: translateX(0);
            opacity: 1;
        }

        /* Cascade d'apparition */
        .menu-links > li:nth-child(1) { transition-delay: 0.15s; }
        .menu-links > li:nth-child(2) { transition-delay: 0.25s; }
        .menu-links > li:nth-child(3) { transition-delay: 0.35s; }
        .menu-links > li:nth-child(4) { transition-delay: 0.45s; }
        .menu-links > li:nth-child(5) { transition-delay: 0.55s; }

        /* Liens Principaux (Niveau 1) - Typo Cinématographique */
        .menu-links > li > a {
            color: #ffffff; /* Plein par défaut */
            -webkit-text-stroke: 1.5px #ffffff;
            text-decoration: none;
            font-size: clamp(3rem, 6vw, 6rem);
            font-family: 'Helvetica Neue', 'Arial Black', Impact, sans-serif; /* Typo plus massive et carrée */
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: 2px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            align-items: center;
        }
        
        /* Numérotation Premium (01, 02...) */
        .menu-links {
            counter-reset: menu-item;
        }
        .menu-links > li {
            counter-increment: menu-item;
        }
        .menu-links > li > a::before {
            content: "0" counter(menu-item) " /";
            font-size: 1rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            -webkit-text-stroke: 0px; /* Pas d'outline sur les chiffres */
            margin-right: 2rem;
            letter-spacing: 4px;
            transform: translateY(-5px);
            transition: color 0.5s ease;
        }

        /* Hover Principal - Devient Transparent (Outline) */
        .menu-links > li > a:hover,
        .has-submenu:hover > a { 
            color: transparent; /* Devient transparent au hover, gardant le contour */
            -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
            letter-spacing: 5px; /* S'écarte très légèrement */
            transform: translateX(15px);
        }
        
        .menu-links > li > a:hover::before,
        .has-submenu:hover > a::before {
            color: #ffffff;
        }

        /* Sous-menus (Vidéos, Photos) */
        .has-submenu {
            position: relative;
        }

        .submenu {
            list-style: none;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 2rem; /* Espace plus large pour laisser respirer l'œil */
            margin-left: max(5vw, 4rem);
            padding-left: 0;
            border-left: none;
        }

        /* Révélation du sous-menu */
        .has-submenu:hover .submenu,
        .has-submenu.mobile-open .submenu {
            max-height: 350px;
            opacity: 1;
            margin-top: 1.5rem;
            margin-bottom: 2rem;
        }

        /* Liens Sous-menus (Design Ultra-Moderne & Cinématographique) */
        .submenu a {
            font-size: 0.8rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4); /* Gris luxueux par défaut */
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            display: inline-flex;
            align-items: center; /* Aligne le tiret d'animation avec le texte */
            text-decoration: none;
            padding: 0.5rem 0;
        }

        /* Dash (tiret) qui va pousser le texte au hover */
        .submenu a::before {
            content: '';
            display: inline-block;
            width: 0;
            height: 2px;
            background-color: #ffffff;
            margin-right: 0;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .submenu a:hover {
            color: #ffffff;
            opacity: 1;
            transform: translateX(10px); /* Le texte avance un peu */
        }

        .submenu a:hover::before {
            width: 20px; /* Le tiret grandit */
            margin-right: 15px; /* Et pousse le texte */
        }

        /* ----- SECTION PHOTOS (PORTFOLIO) ----- */
        .photos-section {
            padding: 12rem 4rem 10rem 4rem; /* Pad top to account for nav */
            min-height: 100vh;
        }

        .section-header {
            margin-bottom: 5rem;
        }

        .section-subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #888;
            margin-bottom: 1rem;
            display: block;
        }

        .section-title {
            font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
            font-size: clamp(3rem, 6vw, 6rem);
            color: #fff;
            text-transform: uppercase;
            line-height: 1.1;
        }

        @keyframes revealCard {
            from {
                opacity: 0;
                transform: translateY(40px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 3rem;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards; /* Le conteneur s'affiche doucement */
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .portfolio-card {
            background-color: #f6f6f6;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #111;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
            opacity: 0;
            animation: revealCard 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
            position: relative;
            overflow: hidden; /* Pour contenir l'image qui s'agrandit */
        }

        .portfolio-card:hover {
            transform: translateY(-8px);
            background-color: #ffffff;
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
            border-color: rgba(0,0,0,0.1);
        }

        /* Cascade de l'animation d'entrée */
        .portfolio-card:nth-child(1) { animation-delay: 0.1s; }
        .portfolio-card:nth-child(2) { animation-delay: 0.2s; }
        .portfolio-card:nth-child(3) { animation-delay: 0.3s; }
        .portfolio-card:nth-child(4) { animation-delay: 0.4s; }
        .portfolio-card:nth-child(5) { animation-delay: 0.5s; }
        .portfolio-card:nth-child(6) { animation-delay: 0.6s; }
        .portfolio-card:nth-child(7) { animation-delay: 0.7s; }

        .portfolio-card {
            background-color: #f6f6f6;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #111;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
            opacity: 0;
            animation: revealCard 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
            position: relative;
            container-type: inline-size; /* Active les requêtes de container pour un clip-path mathématiquement parfait */
            overflow: hidden;
        }

        .portfolio-card:hover {
            transform: translateY(-8px);
            background-color: #ffffff;
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
            border-color: rgba(0,0,0,0.1);
        }

        /* L'espace fantôme qui maintient exactement la structure de la carte sans jamais bouger */
        .portfolio-card::before {
            content: '';
            display: block;
            width: 100%;
            padding-bottom: 62.5%; /* Ratio 16/10 parfait, 100% robuste sur tous navigateurs */
            margin-bottom: 3rem;
        }

        /* Cascade de l'animation d'entrée */
        .portfolio-card:nth-child(1) { animation-delay: 0.1s; }
        .portfolio-card:nth-child(2) { animation-delay: 0.2s; }
        .portfolio-card:nth-child(3) { animation-delay: 0.3s; }
        .portfolio-card:nth-child(4) { animation-delay: 0.4s; }
        .portfolio-card:nth-child(5) { animation-delay: 0.5s; }
        .portfolio-card:nth-child(6) { animation-delay: 0.6s; }
        .portfolio-card:nth-child(7) { animation-delay: 0.7s; }

        .card-image-wrap {
            /* L'image est isolée de la structure pour ne provoquer AUCUN blocage ou saccade */
            position: absolute;
            top: 2.5rem;
            left: 2.5rem;
            right: 2.5rem;
            /* La magie: le padding bottom mathématique gère le ratio (16/10 = 0.625) */
            padding-bottom: calc((100% - 5rem) * 0.625);
            height: 0;
            background-color: #111;
            z-index: 0;
            overflow: hidden;
            transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            border-radius: 0;
        }

        .card-title-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3.5rem;
            position: relative;
            z-index: 2;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }

        /* Au hover, l'image n'a plus aucune restriction de position, elle glisse parfaitement jusqu'aux bords */
        .portfolio-card:hover .card-image-wrap {
            top: 0;
            left: 0;
            right: 0;
            padding-bottom: 0;
            height: 100%;
        }

        /* Le titre n'a plus besoin d'être repoussé puisqu'il est géré par l'espace fantôme */
        .portfolio-card:hover .card-title-wrap * {
            color: #fff;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Pour rester lisible partout */
        }

        /* Au hover, on ajoute un léger voile pour lire le texte */
        .portfolio-card::after {
            content: '';
            position: absolute;
            top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0);
            z-index: 1;
            transition: background 0.6s ease;
            pointer-events: none;
        }
        
        .portfolio-card:hover::after {
            background: rgba(0,0,0,0.4);
        }

        /* Effet Caméra: Les coins de l'autofocus (Viewfinder) */
        .card-image-wrap::before {
            content: '';
            position: absolute;
            top: 25px; left: 25px; right: 25px; bottom: 25px;
            background: 
                linear-gradient(#fff, #fff) 0 0 / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 0 0 / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 100% 0 / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 100% 0 / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 0 100% / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 0 100% / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 100% 100% / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 100% 100% / 2px 20px no-repeat;
            opacity: 0;
            transform: scale(1.1);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 3;
            pointer-events: none;
        }

        .portfolio-card:hover .card-image-wrap::before {
            opacity: 0.9;
            transform: scale(1); /* Les coins se referment sur la cible (focus) */
        }

        /* Effet Caméra: Réticule Central (+) */
        .card-image-wrap::after {
            content: '+';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(2);
            color: transparent;
            font-size: 2.5rem;
            font-weight: 300;
            font-family: monospace;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 4;
            pointer-events: none;
            text-align: center;
            line-height: 1;
        }

        .portfolio-card:hover .card-image-wrap::after {
            color: rgba(255,255,255,0.9);
            transform: translate(-50%, -50%) scale(1);
        }

        @keyframes focusFlash {
            0% { filter: brightness(1) blur(0px); }
            15% { filter: brightness(1.7) blur(1px); }
            100% { filter: brightness(1) blur(0px); }
        }

        .card-image-wrap img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
            transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
            filter: grayscale(0%) contrast(1); /* Couleurs normales par défaut */
            transform: scale(1.02);
            z-index: 1;
        }

        .portfolio-card:hover .card-image-wrap img {
            transform: scale(1.05); /* Zoom très léger derrière toute la carte. */
            animation: focusFlash 0.5s ease-out; /* Léger flash + flou d'obturateur */
        }

        .portfolio-card h3 {
            font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
            font-size: 2.8rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -2px;
            color: #111;
            margin: 0;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform-origin: left center;
            position: relative;
            z-index: 2;
        }

        .card-icon {
            opacity: 0;
            transform: translate(-15px, 15px) rotate(-45deg);
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            font-size: 2rem;
            color: #111;
            font-weight: bold;
            position: relative;
            z-index: 2;
        }

        .portfolio-card:hover .card-icon {
            opacity: 1;
            transform: translate(0, 0) rotate(0deg);
            color: #fff; /* Le texte passe en blanc au survol */
        }

        .portfolio-card:hover h3 {
            transform: translateX(10px);
            letter-spacing: 1px;
            color: #fff; /* Le texte passe en blanc au survol */
        }

        .card-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: auto;
            border-top: 1px solid rgba(0,0,0,0.1);
            padding-top: 1.5rem;
            transition: border-color 0.4s ease;
            position: relative;
            z-index: 2;
        }

        .portfolio-card:hover .card-categories {
            border-top-color: rgba(0,0,0,0.2);
        }

        .cat-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            color: #111;
            font-weight: 500;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform: translateY(0);
        }

        .portfolio-card:hover .cat-item {
            color: #fff;
        }

        /* Animation cascade des tags au survol de la carte */
        .portfolio-card:hover .cat-item:nth-child(1) { transform: translateY(-5px); transition-delay: 0.05s; }
        .portfolio-card:hover .cat-item:nth-child(2) { transform: translateY(-5px); transition-delay: 0.1s; }
        .portfolio-card:hover .cat-item:nth-child(3) { transform: translateY(-5px); transition-delay: 0.15s; }

        .cat-item .dot {
            width: 6px;
            height: 6px;
            background-color: #111;
            border-radius: 50%;
            transition: all 0.4s ease;
        }

        .portfolio-card:hover .cat-item .dot {
            transform: scale(1.5);
            background-color: #fff;
            box-shadow: 0 0 10px rgba(255,255,255,0.8);
        }

        .cat-item .label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            color: #444;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: color 0.4s ease;
        }

        .portfolio-card:hover .cat-item .label {
            color: #fff;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .navbar { padding: 1.5rem; }
            .logo img { height: 80px; }
            .menu-links a { font-size: 2rem; }
            .photos-section { padding: 8rem 1.5rem 6rem; }
            .portfolio-grid { grid-template-columns: 1fr; gap: 2rem; }
            .portfolio-card h3 { font-size: 1.8rem; margin-bottom: 2rem; }
            .card-categories { gap: 1rem; }
            .footer-content { flex-direction: column; gap: 3rem; text-align: center; }
            .footer-brand { align-items: center; }
            .footer-links { flex-direction: column; gap: 1.5rem; align-items: center; margin: 0; }
            .footer-links a { margin: 0; }
            .footer-bottom { flex-direction: column; gap: 10px; }
        }

        /* ----- FOOTER MODERNE ----- */
        .site-footer {
            background-color: #030303;
            padding: 3rem 4rem 1.5rem 4rem; /* Hauteur fortement réduite */
            border-top: 1px solid rgba(255,255,255,0.05);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center; /* Centré verticalement pour plus de proportion */
            max-width: 1600px;
            margin: 0 auto;
        }

        .footer-brand {
            display: flex;
            flex-direction: column;
            gap: 0;
            max-width: 300px;
        }

        .footer-brand img {
            width: 150px; /* Logo très légèrement plus grand pour asseoir le centre */
            height: auto;
            opacity: 0.9;
            transition: opacity 0.4s ease;
        }

        .footer-brand img:hover {
            opacity: 1;
        }

        /* Retire le style tagline inutilisé */

        .footer-links {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }

        .footer-links a {
            color: #fff;
            text-decoration: none;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            position: relative;
            transition: color 0.3s ease;
            padding: 0.5rem 0;
        }

        .footer-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #fff;
            transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .footer-links a:hover {
            color: #fff;
        }

        .footer-links a:hover::after {
            width: 100%;
        }

        .footer-socials {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .social-icon-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px; /* Boutons réseaux plus petits */
            height: 40px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            color: #fff;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .social-icon-box::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            z-index: 0;
        }

        .social-icon-box:hover {
            border-color: #fff;
            transform: translateY(-5px);
        }

        .social-icon-box:hover::before {
            top: 0;
        }

        .social-icon-box svg {
            position: relative;
            z-index: 1;
            transition: stroke 0.4s ease;
            width: 18px; /* Icône SVG plus petite */
            height: 18px;
        }

        .social-icon-box:hover svg {
            stroke: #000;
        }

        .footer-bottom {
            max-width: 1600px;
            margin: 2.5rem auto 0 auto; /* Remonté */
            padding-top: 1.5rem; /* Moins d'espace */
            border-top: 1px solid rgba(255,255,255,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.65rem;
            color: #555;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .footer-bottom-group {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .footer-bottom a {
            color: #555;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-bottom a:hover {
            color: #fff;
        }

        .brand-beyourmoon {
            font-family: 'Limelight', sans-serif;
            font-size: 0.8rem;
            color: #fff;
            text-transform: none;
            letter-spacing: 1px;
        }
    

        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

        body {
            background-color: #050505;
            color: #fff;
            overflow-x: hidden;
        }

        /* Navbar (Solid background for sub-pages) */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 2rem 4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
            color: #fff;
        }

        .logo img {
            height: 120px;
            vertical-align: middle;
            transition: height 0.3s ease;
        }

        /* Burger Menu Icon */
        .burger-container {
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            z-index: 101;
            color: #fff;
        }

        .burger-text {
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: opacity 0.3s ease;
        }

        .burger {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .burger div {
            width: 35px;
            height: 3px;
            background-color: #fff;
            box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
            transition: all 0.4s ease;
        }

        .burger-container.active .burger div:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .burger-container.active .burger div:nth-child(2) {
            opacity: 0;
        }

        .burger-container.active .burger div:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }
        
        .burger-container.active .burger-text {
            opacity: 0; /* Cacher le texte quand le menu est ouvert */
        }

        /* Full Screen Menu Overlay */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(5, 5, 5, 0.85); /* Fond semi-transparent sombre */
            backdrop-filter: blur(25px); /* Ultra moderne effet verre */
            -webkit-backdrop-filter: blur(25px);
            z-index: 99;
            display: flex;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            overflow-y: auto;
        }

        .menu-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* Conteneur principal des liens */
        .menu-links {
            list-style: none;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 2.5rem; /* Espace plus aéré pour la DA */
            padding: 4rem 15vw; /* Plus centré mais aligné à gauche */
            width: 100%;
        }

        .menu-links > li {
            transform: translateX(-30px); /* Transition plus douce */
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .menu-overlay.active .menu-links > li {
            transform: translateX(0);
            opacity: 1;
        }

        /* Cascade d'apparition */
        .menu-links > li:nth-child(1) { transition-delay: 0.15s; }
        .menu-links > li:nth-child(2) { transition-delay: 0.25s; }
        .menu-links > li:nth-child(3) { transition-delay: 0.35s; }
        .menu-links > li:nth-child(4) { transition-delay: 0.45s; }
        .menu-links > li:nth-child(5) { transition-delay: 0.55s; }

        /* Liens Principaux (Niveau 1) - Typo Cinématographique */
        .menu-links > li > a {
            color: #ffffff; /* Plein par défaut */
            -webkit-text-stroke: 1.5px #ffffff;
            text-decoration: none;
            font-size: clamp(3rem, 6vw, 6rem);
            font-family: 'Helvetica Neue', 'Arial Black', Impact, sans-serif; /* Typo plus massive et carrée */
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: 2px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            align-items: center;
        }
        
        /* Numérotation Premium (01, 02...) */
        .menu-links {
            counter-reset: menu-item;
        }
        .menu-links > li {
            counter-increment: menu-item;
        }
        .menu-links > li > a::before {
            content: "0" counter(menu-item) " /";
            font-size: 1rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            -webkit-text-stroke: 0px; /* Pas d'outline sur les chiffres */
            margin-right: 2rem;
            letter-spacing: 4px;
            transform: translateY(-5px);
            transition: color 0.5s ease;
        }

        /* Hover Principal - Devient Transparent (Outline) */
        .menu-links > li > a:hover,
        .has-submenu:hover > a { 
            color: transparent; /* Devient transparent au hover, gardant le contour */
            -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
            letter-spacing: 5px; /* S'écarte très légèrement */
            transform: translateX(15px);
        }
        
        .menu-links > li > a:hover::before,
        .has-submenu:hover > a::before {
            color: #ffffff;
        }

        /* Sous-menus (Vidéos, Photos) */
        .has-submenu {
            position: relative;
        }

        .submenu {
            list-style: none;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 2rem; /* Espace plus large pour laisser respirer l'œil */
            margin-left: max(5vw, 4rem);
            padding-left: 0;
            border-left: none;
        }

        /* Révélation du sous-menu */
        .has-submenu:hover .submenu,
        .has-submenu.mobile-open .submenu {
            max-height: 350px;
            opacity: 1;
            margin-top: 1.5rem;
            margin-bottom: 2rem;
        }

        /* Liens Sous-menus (Design Ultra-Moderne & Cinématographique) */
        .submenu a {
            font-size: 0.8rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4); /* Gris luxueux par défaut */
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            display: inline-flex;
            align-items: center; /* Aligne le tiret d'animation avec le texte */
            text-decoration: none;
            padding: 0.5rem 0;
        }

        /* Dash (tiret) qui va pousser le texte au hover */
        .submenu a::before {
            content: '';
            display: inline-block;
            width: 0;
            height: 2px;
            background-color: #ffffff;
            margin-right: 0;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .submenu a:hover {
            color: #ffffff;
            opacity: 1;
            transform: translateX(10px); /* Le texte avance un peu */
        }

        .submenu a:hover::before {
            width: 20px; /* Le tiret grandit */
            margin-right: 15px; /* Et pousse le texte */
        }

        /* ----- SECTION PHOTOS (PORTFOLIO) ----- */
        .photos-section {
            padding: 12rem 4rem 10rem 4rem; /* Pad top to account for nav */
            min-height: 100vh;
        }

        .section-header {
            margin-bottom: 5rem;
        }

        .section-subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #888;
            margin-bottom: 1rem;
            display: block;
        }

        .section-title {
            font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
            font-size: clamp(3rem, 6vw, 6rem);
            color: #fff;
            text-transform: uppercase;
            line-height: 1.1;
        }

        @keyframes revealCard {
            from {
                opacity: 0;
                transform: translateY(40px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 3rem;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards; /* Le conteneur s'affiche doucement */
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .portfolio-card {
            background-color: #f6f6f6;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #111;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
            opacity: 0;
            animation: revealCard 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
            position: relative;
            overflow: hidden; /* Pour contenir l'image qui s'agrandit */
        }

        .portfolio-card:hover {
            transform: translateY(-8px);
            background-color: #ffffff;
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
            border-color: rgba(0,0,0,0.1);
        }

        /* Cascade de l'animation d'entrée */
        .portfolio-card:nth-child(1) { animation-delay: 0.1s; }
        .portfolio-card:nth-child(2) { animation-delay: 0.2s; }
        .portfolio-card:nth-child(3) { animation-delay: 0.3s; }
        .portfolio-card:nth-child(4) { animation-delay: 0.4s; }
        .portfolio-card:nth-child(5) { animation-delay: 0.5s; }
        .portfolio-card:nth-child(6) { animation-delay: 0.6s; }
        .portfolio-card:nth-child(7) { animation-delay: 0.7s; }

        .portfolio-card {
            background-color: #f6f6f6;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #111;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
            opacity: 0;
            animation: revealCard 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
            position: relative;
            container-type: inline-size; /* Active les requêtes de container pour un clip-path mathématiquement parfait */
            overflow: hidden;
        }

        .portfolio-card:hover {
            transform: translateY(-8px);
            background-color: #ffffff;
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
            border-color: rgba(0,0,0,0.1);
        }

        /* L'espace fantôme qui maintient exactement la structure de la carte sans jamais bouger */
        .portfolio-card::before {
            content: '';
            display: block;
            width: 100%;
            padding-bottom: 62.5%; /* Ratio 16/10 parfait, 100% robuste sur tous navigateurs */
            margin-bottom: 3rem;
        }

        /* Cascade de l'animation d'entrée */
        .portfolio-card:nth-child(1) { animation-delay: 0.1s; }
        .portfolio-card:nth-child(2) { animation-delay: 0.2s; }
        .portfolio-card:nth-child(3) { animation-delay: 0.3s; }
        .portfolio-card:nth-child(4) { animation-delay: 0.4s; }
        .portfolio-card:nth-child(5) { animation-delay: 0.5s; }
        .portfolio-card:nth-child(6) { animation-delay: 0.6s; }
        .portfolio-card:nth-child(7) { animation-delay: 0.7s; }

        .card-image-wrap {
            /* L'image est isolée de la structure pour ne provoquer AUCUN blocage ou saccade */
            position: absolute;
            top: 2.5rem;
            left: 2.5rem;
            right: 2.5rem;
            /* La magie: le padding bottom mathématique gère le ratio (16/10 = 0.625) */
            padding-bottom: calc((100% - 5rem) * 0.625);
            height: 0;
            background-color: #111;
            z-index: 0;
            overflow: hidden;
            transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            border-radius: 0;
        }

        .card-title-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3.5rem;
            position: relative;
            z-index: 2;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }

        /* Au hover, l'image n'a plus aucune restriction de position, elle glisse parfaitement jusqu'aux bords */
        .portfolio-card:hover .card-image-wrap {
            top: 0;
            left: 0;
            right: 0;
            padding-bottom: 0;
            height: 100%;
        }

        /* Le titre n'a plus besoin d'être repoussé puisqu'il est géré par l'espace fantôme */
        .portfolio-card:hover .card-title-wrap * {
            color: #fff;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Pour rester lisible partout */
        }

        /* Au hover, on ajoute un léger voile pour lire le texte */
        .portfolio-card::after {
            content: '';
            position: absolute;
            top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0);
            z-index: 1;
            transition: background 0.6s ease;
            pointer-events: none;
        }
        
        .portfolio-card:hover::after {
            background: rgba(0,0,0,0.4);
        }

        /* Effet Caméra: Les coins de l'autofocus (Viewfinder) */
        .card-image-wrap::before {
            content: '';
            position: absolute;
            top: 25px; left: 25px; right: 25px; bottom: 25px;
            background: 
                linear-gradient(#fff, #fff) 0 0 / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 0 0 / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 100% 0 / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 100% 0 / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 0 100% / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 0 100% / 2px 20px no-repeat,
                linear-gradient(#fff, #fff) 100% 100% / 20px 2px no-repeat,
                linear-gradient(#fff, #fff) 100% 100% / 2px 20px no-repeat;
            opacity: 0;
            transform: scale(1.1);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 3;
            pointer-events: none;
        }

        .portfolio-card:hover .card-image-wrap::before {
            opacity: 0.9;
            transform: scale(1); /* Les coins se referment sur la cible (focus) */
        }

        /* Effet Caméra: Réticule Central (+) */
        .card-image-wrap::after {
            content: '+';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(2);
            color: transparent;
            font-size: 2.5rem;
            font-weight: 300;
            font-family: monospace;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 4;
            pointer-events: none;
            text-align: center;
            line-height: 1;
        }

        .portfolio-card:hover .card-image-wrap::after {
            color: rgba(255,255,255,0.9);
            transform: translate(-50%, -50%) scale(1);
        }

        @keyframes focusFlash {
            0% { filter: brightness(1) blur(0px); }
            15% { filter: brightness(1.7) blur(1px); }
            100% { filter: brightness(1) blur(0px); }
        }

        .card-image-wrap img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
            transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
            filter: grayscale(0%) contrast(1); /* Couleurs normales par défaut */
            transform: scale(1.02);
            z-index: 1;
        }

        .portfolio-card:hover .card-image-wrap img {
            transform: scale(1.05); /* Zoom très léger derrière toute la carte. */
            animation: focusFlash 0.5s ease-out; /* Léger flash + flou d'obturateur */
        }

        .portfolio-card h3 {
            font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
            font-size: 2.8rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -2px;
            color: #111;
            margin: 0;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform-origin: left center;
            position: relative;
            z-index: 2;
        }

        .card-icon {
            opacity: 0;
            transform: translate(-15px, 15px) rotate(-45deg);
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            font-size: 2rem;
            color: #111;
            font-weight: bold;
            position: relative;
            z-index: 2;
        }

        .portfolio-card:hover .card-icon {
            opacity: 1;
            transform: translate(0, 0) rotate(0deg);
            color: #fff; /* Le texte passe en blanc au survol */
        }

        .portfolio-card:hover h3 {
            transform: translateX(10px);
            letter-spacing: 1px;
            color: #fff; /* Le texte passe en blanc au survol */
        }

        .card-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: auto;
            border-top: 1px solid rgba(0,0,0,0.1);
            padding-top: 1.5rem;
            transition: border-color 0.4s ease;
            position: relative;
            z-index: 2;
        }

        .portfolio-card:hover .card-categories {
            border-top-color: rgba(0,0,0,0.2);
        }

        .cat-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            color: #111;
            font-weight: 500;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform: translateY(0);
        }

        .portfolio-card:hover .cat-item {
            color: #fff;
        }

        /* Animation cascade des tags au survol de la carte */
        .portfolio-card:hover .cat-item:nth-child(1) { transform: translateY(-5px); transition-delay: 0.05s; }
        .portfolio-card:hover .cat-item:nth-child(2) { transform: translateY(-5px); transition-delay: 0.1s; }
        .portfolio-card:hover .cat-item:nth-child(3) { transform: translateY(-5px); transition-delay: 0.15s; }

        .cat-item .dot {
            width: 6px;
            height: 6px;
            background-color: #111;
            border-radius: 50%;
            transition: all 0.4s ease;
        }

        .portfolio-card:hover .cat-item .dot {
            transform: scale(1.5);
            background-color: #fff;
            box-shadow: 0 0 10px rgba(255,255,255,0.8);
        }

        .cat-item .label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            color: #444;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            transition: color 0.4s ease;
        }

        .portfolio-card:hover .cat-item .label {
            color: #fff;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .navbar { padding: 1.5rem; }
            .logo img { height: 80px; }
            .menu-links a { font-size: 2rem; }
            .photos-section { padding: 8rem 1.5rem 6rem; }
            .portfolio-grid { grid-template-columns: 1fr; gap: 2rem; }
            .portfolio-card h3 { font-size: 1.8rem; margin-bottom: 2rem; }
            .card-categories { gap: 1rem; }
            .footer-content { flex-direction: column; gap: 3rem; text-align: center; }
            .footer-brand { align-items: center; }
            .footer-links { flex-direction: column; gap: 1.5rem; align-items: center; margin: 0; }
            .footer-links a { margin: 0; }
            .footer-bottom { flex-direction: column; gap: 10px; }
        }

        /* ----- FOOTER MODERNE ----- */
        .site-footer {
            background-color: #030303;
            padding: 3rem 4rem 1.5rem 4rem; /* Hauteur fortement réduite */
            border-top: 1px solid rgba(255,255,255,0.05);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center; /* Centré verticalement pour plus de proportion */
            max-width: 1600px;
            margin: 0 auto;
        }

        .footer-brand {
            display: flex;
            flex-direction: column;
            gap: 0;
            max-width: 300px;
        }

        .footer-brand img {
            width: 150px; /* Logo très légèrement plus grand pour asseoir le centre */
            height: auto;
            opacity: 0.9;
            transition: opacity 0.4s ease;
        }

        .footer-brand img:hover {
            opacity: 1;
        }

        /* Retire le style tagline inutilisé */

        .footer-links {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }

        .footer-links a {
            color: #fff;
            text-decoration: none;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            position: relative;
            transition: color 0.3s ease;
            padding: 0.5rem 0;
        }

        .footer-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #fff;
            transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .footer-links a:hover {
            color: #fff;
        }

        .footer-links a:hover::after {
            width: 100%;
        }

        .footer-socials {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .social-icon-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px; /* Boutons réseaux plus petits */
            height: 40px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            color: #fff;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .social-icon-box::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            z-index: 0;
        }

        .social-icon-box:hover {
            border-color: #fff;
            transform: translateY(-5px);
        }

        .social-icon-box:hover::before {
            top: 0;
        }

        .social-icon-box svg {
            position: relative;
            z-index: 1;
            transition: stroke 0.4s ease;
            width: 18px; /* Icône SVG plus petite */
            height: 18px;
        }

        .social-icon-box:hover svg {
            stroke: #000;
        }

        .footer-bottom {
            max-width: 1600px;
            margin: 2.5rem auto 0 auto; /* Remonté */
            padding-top: 1.5rem; /* Moins d'espace */
            border-top: 1px solid rgba(255,255,255,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.65rem;
            color: #555;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .footer-bottom-group {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .footer-bottom a {
            color: #555;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-bottom a:hover {
            color: #fff;
        }

        .brand-beyourmoon {
            font-family: 'Limelight', sans-serif;
            font-size: 0.8rem;
            color: #fff;
            text-transform: none;
            letter-spacing: 1px;
        }
    
        /* ------ CUSTOM GSAP "ELEGANT SHIFT" (V11) ------ */
        .videos-category-wrapper {
            background-color: #050505;
            min-height: 100vh;
            padding: 140px 5vw 100px 5vw;
        }

        .category-header {
            text-align: center;
            margin-bottom: 80px;
        }

        .mega-title {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2rem, 5vw, 4rem);
            font-weight: 800;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 12px;
            margin-bottom: 20px;
        }

        .category-header p {
            font-family: 'Montserrat', sans-serif;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            letter-spacing: 8px;
            font-size: 0.9rem;
        }
        .category-masonry {
            display: flex;
            flex-direction: row;
            gap: 3rem;
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
            align-items: stretch; /* All columns have same height -> perfect rectangle ! */
        }
        
        .masonry-col {
            display: flex;
            flex-direction: column;
            gap: 3rem;
            flex: 1; /* Outer columns width */
        }
        
        /* Make the middle column wider so the 4 horizontal videos matches the height of the 2 vertical ones */
        .masonry-col:nth-child(2) {
            flex: 1.58;
        }

        @media (max-width: 1024px) {
            .category-masonry { flex-wrap: wrap; }
            .masonry-col { gap: 2rem; min-width: 45%; }
        }
        @media (max-width: 600px) {
            .category-masonry { flex-direction: column; gap: 2rem; }
            .masonry-col { min-width: 100%; }
        }

        .cat-card {
            position: relative;
            display: block; 
            width: 100%;
            /* Make the card stretch vertically to fill natural space, but don't force squash */
            flex: 1; 
            background: #000;
            text-decoration: none;
            border-radius: 4px;
            overflow: hidden;
            cursor: none;
            min-height: 350px; /* Force un minimum décent pour que le texte ne déborde jamais ! */
        }
        
        .cat-card.landscape { aspect-ratio: 16 / 9; }
        .cat-card.portrait { aspect-ratio: 9 / 16; }
        
        /* Enforce absolute positioning content logic properly */
        .cat-card iframe {
            position: absolute;
            top: -10%; left: -10%;
            width: 120%; height: 120%;
            border: none;
            pointer-events: none;
            object-fit: cover;
        }

        .video-wrapper {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            overflow: hidden;
            /* Start fully visible, slightly dark to ensure text is clean */
            filter: grayscale(15%) brightness(0.7);
            transition: filter 0.5s ease;
        }

        .cat-card iframe {
            position: absolute;
            top: -5%; left: -5%;
            width: 110%; height: 110%;
            border: none;
            pointer-events: none;
            object-fit: cover;
        }

        /* An elegant frame that animates in on hover */
        .cat-frame {
            position: absolute;
            top: 15px; left: 15px; bottom: 15px; right: 15px;
            border: 1px solid rgba(255,255,255,0);
            z-index: 3;
            pointer-events: none;
            box-sizing: border-box;
            background: transparent;
        }

        /* Overlay content */
        .cat-content {
            position: absolute;
            bottom: 30px; left: 30px; right: 30px;
            z-index: 5;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            /* overflow supprimé pour ne pas couper le gros texte */
        }

        .cat-number {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 400;
            color: rgba(255,255,255,0.6);
            letter-spacing: 4px;
            margin-bottom: 10px;
        }

        .cat-title-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* The decorative line that expands */
        .cat-line {
            width: 0px;
            height: 2px;
            background-color: #fff;
            display: inline-block;
            margin-right: 0px;
            transition: margin 0.4s ease;
        }

        .cat-title {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            font-weight: 700;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 4px;
            margin: 0;
            /* Constant clear typography, no strokes/tricks */
        }

        .cat-subtitle {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-top: 10px;
            opacity: 0; 
            height: 0; /* Animated by GSAP */
            overflow: hidden;
        }

        /* Custom minimal cursor */
        .cursor-follower {
            position: fixed;
            top: 0; left: 0;
            width: 10px; height: 10px;
            border-radius: 50%;
            background: #fff;
            mix-blend-mode: difference;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .cursor-icon {
            opacity: 0;
            transform: scale(0);
        }

        @media (max-width: 768px) {
            .cat-content { bottom: 20px; left: 20px; right: 20px; }
            .cat-title { font-size: 1.5rem; }
        }


.loader { pointer-events: none !important; }

.loader { pointer-events: none !important; }

.fast-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 999;
    animation: fastFadeOut 0.5s ease-in-out forwards;
    pointer-events: none;
}
@keyframes fastFadeOut {
    0% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

.fast-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 999;
    animation: fastFadeOut 0.5s ease-in-out forwards;
    pointer-events: none;
}
@keyframes fastFadeOut {
    0% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

/* Ultimate Fallback for iframes visibility */
.video-container iframe, .video-thumb-container iframe {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 0 !important;
}












/* ========================================= */
/* FIX MOBILE ACCUEIL & MENU (SUPER FINAL) */
/* ========================================= */
@media (max-width: 768px) {
    /* --- LOADER --- */
    .loader { height: 100vh !important; height: 100dvh !important; }
    .loader-content { padding: 20px !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; display: flex !important; justify-content: center !important; align-items: center !important; }
    .loader img { height: auto !important; max-width: 65vw !important; }
    .loader-rec { top: 40px !important; right: 20px !important; font-size: 0.8rem !important; }
    .loader-content::before, .loader-content::after { width: 40px !important; height: 40px !important; }

    
    /* --- FIX BARRES NOIRES (ASPECT RATIO + SCALE) ET ECRAN NOIR --- */
    .hero { height: 100vh !important; height: 100dvh !important; background: #000 !important; overflow: hidden !important; }
    .video-container {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100vw !important;
        height: 100vh !important; 
        height: 100dvh !important;
        background: #000 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    .video-container iframe {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 100vw !important;
        height: 100vh !important;
        /* Sur-dimensionnement agressif pour tuer les bandes noires Vimeo (2.35, 21:9 etc) */
            transform: translate(-50%, -50%) scale(1.02) !important; /* Zoom très léger (2%) juste pour cacher la bordure fine */
        background: #000 !important;
        opacity: 1 !important;
        pointer-events: none !important;
        z-index: 0 !important;
        object-fit: cover !important;
    }

    /* --- EFFACER MENTIONS LEGALES ACCUEIL --- */
    .footer-overlay {
        display: none !important;
    }

    /* --- MENU OVERLAY ERGONOMIQUE --- */
    .menu-overlay { height: 100vh !important; height: 100dvh !important; padding: 120px 20px 100px 20px !important; align-items: center !important; justify-content: flex-start !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; }
    .menu-links { width: 100% !important; gap: 2.5rem !important; padding-left: 0 !important; align-items: center !important; }
    .menu-links > li { width: 100% !important; text-align: center !important; display: flex; flex-direction: column; align-items: center; }
    .menu-links > li > a { font-size: 2.2rem !important; line-height: 1.2 !important; text-align: center !important; display: inline-block !important; }
    
    .has-submenu > a::after { content: "▾"; font-size: 1.2rem; display: inline-block; margin-left: 10px; vertical-align: middle; opacity: 0.5; transition: transform 0.3s; }
    .has-submenu.mobile-open > a::after { transform: rotate(180deg); }
    
    .submenu {
        position: relative !important;
        left: 0 !important; top: 0 !important; transform: none !important; opacity: 0 !important; height: 0; overflow: hidden; display: flex !important; flex-direction: column; gap: 0 !important; padding-left: 0 !important; margin-top: 0 !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 12px; width: 90% !important; text-align: center !important; transition: all 0.4s ease;
    }
    .has-submenu.mobile-open .submenu { opacity: 1 !important; height: auto !important; padding: 15px 0 !important; margin-top: 1rem !important; gap: 1.2rem !important; }
    .submenu li a { font-size: 1.1rem !important; color: rgba(255,255,255,0.85) !important; display: block !important; padding: 5px 0; }

    /* --- HOMEPAGE TEXTES ET CONTROLES EN BAS A GAUCHE --- */
    
    /* 1) Rendre le conteneur principal statique/absolu mais sans les -50% qui cassent tout */
    #slideInfoContainer {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: auto !important;
        transform: none !important; /* CRUCIAL: Retire la translation translateY(-50%) du desktop */
        pointer-events: none !important;
        display: block !important;
    }

    /* 2) Les textes. Positionnés par rapport au bas */
    .slide-info {
        position: absolute !important;
        top: auto !important;
        bottom: 90px !important;  /* Laisse de la place sous le texte pour le Slider Control */
        left: 0 !important;
        width: 100vw !important;
        padding: 0 20px !important; /* Marge secure pour pas toucher le bord GAUCHE !!! */
        margin: 0 !important;
        transform: none !important;  /* CA ÉTAIT CA LE PROBLEME */
        display: block !important; 
        text-align: left !important;
    }
    
    .slide-subtitle { font-size: 0.85rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 8px !important; letter-spacing: 2px !important; text-align: left !important; }
    .slide-title { font-size: clamp(2.2rem, 8vw, 3rem) !important; line-height: 1.05 !important; white-space: normal !important; word-break: normal !important; hyphens: none !important; margin-bottom: 12px !important; text-align: left !important; }
    
    .slide-cta { display: inline-flex !important; align-items: center !important; margin-top: 5px !important; max-width: 100% !important; pointer-events: auto !important; }
    .cta-text { font-size: 0.95rem !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; text-align: left !important;}
    .cta-wrap { padding-right: 15px !important; flex: 1 1 auto; }
    .cta-circle { flex-shrink: 0 !important; width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; display: flex !important; }
    
    /* 3) Les contrôles Slider Numeros */
    .slider-controls {
        position: absolute !important;
        top: auto !important;
        bottom: 40px !important; /* Plaqué tout en bas */
        right: auto !important;
        left: 20px !important; /* EXACTEMENT ALIGNÉ AVEC LE TEXTE A GAUCHE !  DÉBLOQUE LE COTE COUPÉ */
        gap: 15px !important;
        z-index: 50 !important;
        pointer-events: auto !important;
        display: flex !important;
        transform: none !important;
    }
}

/* --- CUSTOM MOBILE VIDEOS PORTAL (PAGE VIDEOS) --- */
@media (max-width: 768px) {
    .videos-category-wrapper {
        padding: 100px 0 0 0 !important; /* Full edge to edge videos on mobile */
        min-height: 100vh;
        background-color: rgba(255, 255, 255, 0.6);
    }
    .videos-category-wrapper .category-header {
        margin-bottom: 40px !important;
        text-align: center;
        padding: 0 20px;
    }
    .videos-category-wrapper .mega-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        letter-spacing: 4px !important;
        margin-bottom: 10px !important;
    }
    .videos-category-wrapper .category-header p {
        font-size: 0.8rem !important;
        letter-spacing: 4px !important;
    }
    .category-masonry {
        flex-direction: column !important;
        gap: 2px !important; /* Tiny black borders between full width videos */
        width: 100vw !important;
        margin: 0 !important;
        background-color: rgba(255, 255, 255, 0.6);
    }
    .masonry-col {
        gap: 2px !important;
        width: 100% !important;
    }
    .cat-card {
        border-radius: 0 !important; /* Edge to edge */
        width: 100vw !important;
        min-height: 250px !important; /* Ensure enough height */
        aspect-ratio: 16/9 !important; /* Uniform height for horizontal videos */
    }
    
    .cat-frame {
        display: none !important; /* Remove the hover frame for mobile */
    }
    .cat-content {
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
    }
    .cat-title {
        font-size: 1.8rem !important;
        letter-spacing: 2px !important;
    }
    .cat-number {
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 5px !important;
    }
    /* Let's make sure the video filter is visible and not completely dark */
    .video-wrapper {
        filter: grayscale(15%) brightness(0.6) !important; 
    }
    
}

/* --- CUSTOM MOBILE VIDEOS PORTAL (PAGE VIDEOS) --- */
@media (max-width: 768px) {
    .videos-category-wrapper {
        padding: 100px 0 0 0 !important; /* Full edge to edge videos on mobile */
        min-height: 100vh;
        background-color: rgba(255, 255, 255, 0.6);
    }
    .videos-category-wrapper .category-header {
        margin-bottom: 40px !important;
        text-align: center;
        padding: 0 20px;
    }
    .videos-category-wrapper .mega-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        letter-spacing: 4px !important;
        margin-bottom: 10px !important;
    }
    .videos-category-wrapper .category-header p {
        font-size: 0.8rem !important;
        letter-spacing: 4px !important;
    }
    .category-masonry {
        flex-direction: column !important;
        gap: 2px !important; /* Tiny black borders between full width videos */
        width: 100vw !important;
        margin: 0 !important;
        background-color: rgba(255, 255, 255, 0.6);
    }
    .masonry-col {
        gap: 2px !important;
        width: 100% !important;
    }
    .cat-card {
        border-radius: 0 !important; /* Edge to edge */
        width: 100vw !important;
        min-height: 250px !important; /* Ensure enough height */
        aspect-ratio: 16/9 !important; /* Uniform height for horizontal videos */
    }
    
    .cat-frame {
        display: none !important; /* Remove the hover frame for mobile */
    }
    .cat-content {
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
    }
    .cat-title {
        font-size: 1.8rem !important;
        letter-spacing: 2px !important;
    }
    .cat-number {
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 5px !important;
    }
    /* Let's make sure the video filter is visible and not completely dark */
    .video-wrapper {
        filter: grayscale(15%) brightness(0.6) !important; 
    }
    
}

@media (max-width: 768px) { a[href*='contact'] { order: 99 !important; } .category-masonry { display: flex !important; flex-direction: column !important; } .masonry-col { display: contents !important; } }

@media (max-width: 768px) { a[href*='contact'] { order: 99 !important; } .category-masonry { display: flex !important; flex-direction: column !important; } .masonry-col { display: contents !important; } }

/* --- UNIFORM MOBILE VIDEO CARDS --- */
@media (max-width: 768px) {
    
    
    /* Les vidéos horizontales (16:9) doivent être fortement zoomées pour remplir le 4:5 sans bandes noires en haut/bas */
    .cat-card.landscape iframe {
        transform: translate(-50%, -50%) scale(2.2) !important;
        top: 50% !important; left: 50% !important;
        width: 100vw !important; height: 100vh !important; /* Force a base size to scale from */
    }
    
    /* Les vidéos verticales (9:16) doivent être légèrement zoomées pour remplir le 4:5 sans bandes noires sur les côtés */
    .cat-card.portrait iframe {
        transform: translate(-50%, -50%) scale(1.4) !important;
        top: 50% !important; left: 50% !important;
        width: 100vw !important; height: 100vh !important;
    }
    
    /* Exception pour la vidéo de collaboration si c'est du 16:9 */
    a[href*='contact'] iframe {
        transform: translate(-50%, -50%) scale(2.2) !important;
    }
}

/* --- UNIFORM MOBILE VIDEO CARDS --- */
@media (max-width: 768px) {
    .cat-card.portrait, .cat-card.landscape {
        aspect-ratio: 4/5 !important; /* Format vertical élégant type Instagram pour TOUT le monde */
        min-height: auto !important;
    }
    
    /* Les vidéos horizontales (16:9) doivent être fortement zoomées pour remplir le 4:5 sans bandes noires en haut/bas */
    .cat-card.landscape iframe {
        transform: translate(-50%, -50%) scale(2.2) !important;
        top: 50% !important; left: 50% !important;
        width: 100vw !important; height: 100vh !important; /* Force a base size to scale from */
    }
    
    /* Les vidéos verticales (9:16) doivent être légèrement zoomées pour remplir le 4:5 sans bandes noires sur les côtés */
    .cat-card.portrait iframe {
        transform: translate(-50%, -50%) scale(1.4) !important;
        top: 50% !important; left: 50% !important;
        width: 100vw !important; height: 100vh !important;
    }
    
    /* Exception pour la vidéo de collaboration si c'est du 16:9 */
    a[href*='contact'] iframe {
        transform: translate(-50%, -50%) scale(2.2) !important;
    }
}

/* --- EXPLICIT LOGICAL ORDER FOR VIDEOS ON MOBILE --- */
@media (max-width: 768px) {
    .category-masonry {
        display: flex !important;
        flex-direction: column !important;
    }
    .masonry-col {
        display: contents !important; 
    }
    a[href*='/videos/lifestyle'] { order: 1 !important; }
    a[href*='/videos/dentaire'] { order: 2 !important; }
    a[href*='/videos/musique'] { order: 3 !important; }
    a[href*='/videos/voiture'] { order: 4 !important; }
    a[href*='/videos/sport'] { order: 5 !important; }
    a[href*='/videos/voyage'] { order: 6 !important; }
    a[href*='/videos/evenements'] { order: 7 !important; }
    a[href*='/contact'] { order: 8 !important; }
}

/* --- EXPLICIT LOGICAL ORDER FOR VIDEOS ON MOBILE --- */
@media (max-width: 768px) {
    .category-masonry {
        display: flex !important;
        flex-direction: column !important;
    }
    .masonry-col {
        display: contents !important; 
    }
    a[href*='/videos/lifestyle'] { order: 1 !important; }
    a[href*='/videos/dentaire'] { order: 2 !important; }
    a[href*='/videos/musique'] { order: 3 !important; }
    a[href*='/videos/voiture'] { order: 4 !important; }
    a[href*='/videos/sport'] { order: 5 !important; }
    a[href*='/videos/voyage'] { order: 6 !important; }
    a[href*='/videos/evenements'] { order: 7 !important; }
    a[href*='/contact'] { order: 8 !important; }
}

@media (max-width: 768px) {
    .portfolio-card {
        padding: 1rem !important;
    }
    .card-image-wrap {
        top: 1rem !important;
        left: 1rem !important;
        right: 1rem !important;
        padding-bottom: calc((100% - 2rem) * 0.625) !important;
    }
    .portfolio-card:hover .card-image-wrap {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-bottom: 0 !important;
    }
    /* We might need to adjust the title wrap to make room for the new image size if we change the padding */
}

@media (max-width: 768px) {
    .portfolio-card {
        padding: 1rem !important;
    }
    .card-image-wrap {
        top: 1rem !important;
        left: 1rem !important;
        right: 1rem !important;
        padding-bottom: calc((100% - 2rem) * 0.625) !important;
    }
    .portfolio-card:hover .card-image-wrap {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-bottom: 0 !important;
    }
    /* We might need to adjust the title wrap to make room for the new image size if we change the padding */
}

@media (max-width: 768px) {
    .portfolio-card::before {
        margin-bottom: 1.5rem !important;
    }
    .card-title-wrap {
        margin-bottom: 2rem !important;
    }
    .card-categories {
        padding-top: 1rem !important;
        gap: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    .portfolio-card::before {
        margin-bottom: 1.5rem !important;
    }
    .card-title-wrap {
        margin-bottom: 2rem !important;
    }
    .card-categories {
        padding-top: 1rem !important;
        gap: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    .photos-section .section-title {
        font-size: 3rem !important; /* Reduction pour eviter que ca deborde */
        word-wrap: break-word;
        hyphens: auto;
    }
}

@media (max-width: 768px) {
    .photos-section .section-title {
        font-size: 3rem !important; /* Reduction pour eviter que ca deborde */
        word-wrap: break-word;
        hyphens: auto;
    }
}

@media (max-width: 480px) {
    .photos-section .section-title {
        font-size: clamp(2rem, 9vw, 3rem) !important; /* Force adjustment for very small screens */
    }
}

@media (max-width: 480px) {
    .photos-section .section-title {
    }
}

@media (max-width: 480px) {
    .photos-section .section-title {
        font-size: clamp(2rem, 10vw, 2.5rem) !important;
        word-break: break-word;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 2rem 1.5rem 1.5rem 1.5rem !important; /* Hauter et largeur reduites */
    }
    .footer-content {
        gap: 2rem !important; /* Moins d'espace vertical entre les elements */
        text-align: center !important;
        align-items: center !important; /* Centrer parfaitement */
    }
    .footer-brand {
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
    }
    .footer-links {
        gap: 1rem !important; /* Liens plus serres */
        align-items: center !important;
        justify-content: center !important;
    }
    .footer-socials {
        justify-content: center !important;
        align-items: center !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        gap: 0.5rem !important; /* Plus serre en bas */
        text-align: center !important;
        align-items: center !important;
        padding-top: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .site-footer {
    }
    .footer-content {
    }
    .footer-brand {
    }
    .footer-links {
    }
    .footer-socials {
    }
    .footer-bottom {
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 2rem 1.5rem 1.5rem 1.5rem !important;
    }
    .footer-content {
        gap: 2rem !important;
        text-align: center !important;
        align-items: center !important;
    }
    .footer-brand {
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
    }
    .footer-links {
        gap: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .footer-socials {
        justify-content: center !important;
        align-items: center !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        gap: 0.5rem !important;
        text-align: center !important;
        align-items: center !important;
        padding-top: 1.5rem !important;
    }
}


/* RESPONSIVE ABOUT & CONTACT FOR MOBILE */
@media (max-width: 768px) {
    /* ABOUT */
    .about-section {
        padding: 8rem 1.5rem 4rem !important; /* Espace vertical réduit, marges 1.5rem */
    }
    .bg-accent {
        font-size: 6rem !important; /* Texte VISION plus petit */
        top: 2% !important;
        left: -2% !important;
        opacity: 0.05 !important;
    }
    .about-content-wrapper {
        grid-template-columns: 1fr !important;
        gap: 3rem !important; /* Moins d'espace entre photo et texte */
    }
    .about-image-wrapper {
        height: 60vh !important; /* Hauteur harmonieuse */
        min-height: 400px !important;
    }
    .about-image {
        border-radius: 4px !important;
    }
    .about-header {
        margin-bottom: 2rem !important;
    }
    .about-title {
        font-size: clamp(3.5rem, 12vw, 4.5rem) !important; /* Titre ajustable */
    }
    .about-text-content {
        font-size: 1.1rem !important;
        padding-top: 0 !important;
    }
    .about-details {
        margin-top: 2rem !important;
        padding-top: 1.5rem !important;
    }
    .detail-item {
        font-size: 0.85rem !important;
        letter-spacing: 1px !important;
    }
    .about-cta-container {
        margin-top: 2.5rem !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important; /* Bouton centré sur mobile c'est stylé */
    }

    /* CONTACT */
    .contact-section {
        padding: 8rem 1.5rem 6rem !important; 
    }
    .contact-header {
        margin-bottom: 3rem !important;
    }
    .contact-title {
        font-size: clamp(3.5rem, 12vw, 4.5rem) !important;
    }
    .contact-content-wrapper {
        grid-template-columns: 1fr !important; /* Titres et formulaire s'empilent */
        gap: 4rem !important;
    }
    .contact-info-block {
        gap: 2rem !important;
        align-items: center !important;
        text-align: center !important; /* Infos de contact centrées */
    }
    .social-links-grid {
        justify-content: center !important;
        margin-top: 1rem !important;
    }
    .contact-form-wrapper {
        padding: 0 !important; 
    }
    .submit-btn {
        width: 100% !important; /* Bouton prend toute la largeur */
    }
}

/* RESPONSIVE ABOUT & CONTACT FOR MOBILE */
@media (max-width: 768px) {
    .about-section {
    }
    .bg-accent {
    }
    .about-content-wrapper {
    }
    .about-image-wrapper {
    }
    .about-image {
    }
    .about-header {
    }
    .about-subtitle {
    }
    .about-title {
    }
    .about-text-content {
    }
    .about-details {
    }
    .detail-item {
    }
    .about-cta-container {
    }

    .contact-section {
    }
    .contact-header {
    }
    .contact-title {
    }
    .contact-content-wrapper {
    }
    .contact-info-block {
    }
    .social-links-grid {
    }
    .contact-form-wrapper {
    }
    .submit-btn {
    }
}

/* RESPONSIVE ABOUT & CONTACT FOR MOBILE */
@media (max-width: 768px) {

}

@media (max-width: 768px) {
    .about-section { padding: 8rem 1.5rem 4rem !important; }
    .bg-accent { font-size: 6rem !important; top: 2% !important; left: -2% !important; opacity: 0.05 !important; }
    .about-content-wrapper { grid-template-columns: 1fr !important; gap: 3rem !important; }
    .about-image-wrapper { height: 60vh !important; min-height: 400px !important; }
    .about-image { border-radius: 4px !important; }
    .about-header, .about-subtitle, .about-title { text-align: center !important; }
    .about-subtitle { display: block !important; }
    .about-title { font-size: clamp(3.5rem, 12vw, 4.5rem) !important; }
    .about-text-content { font-size: 1.1rem !important; padding-top: 0 !important; text-align: center !important; }
    .about-details { margin-top: 2rem !important; padding-top: 1.5rem !important; align-items: center !important; }
    .detail-item { font-size: 0.85rem !important; letter-spacing: 1px !important; }
    .about-cta-container { margin-top: 2.5rem !important; display: flex !important; justify-content: center !important; }

    .contact-section { padding: 8rem 1.5rem 6rem !important; }
    .contact-header { margin-bottom: 3rem !important; }
    .contact-title { font-size: clamp(3.5rem, 12vw, 4.5rem) !important; }
    .contact-content-wrapper { grid-template-columns: 1fr !important; gap: 4rem !important; }
    .contact-info-block { gap: 2rem !important; align-items: center !important; text-align: center !important; }
    .social-links-grid { justify-content: center !important; margin-top: 1rem !important; }
    .contact-form-wrapper { padding: 0 !important; }
    .submit-btn { width: 100% !important; }
}

@media (max-width: 768px) {
    .about-section { padding: 8rem 1.5rem 4rem !important; }
    .bg-accent { font-size: 6rem !important; top: 2% !important; left: -2% !important; opacity: 0.05 !important; }
    .about-content-wrapper { grid-template-columns: 1fr !important; gap: 3rem !important; }
    .about-image-wrapper { height: 60vh !important; min-height: 400px !important; }
    .about-image { border-radius: 4px !important; }
    .about-header, .about-subtitle, .about-title { text-align: center !important; }
    .about-subtitle { display: block !important; }
    .about-title { font-size: clamp(3.5rem, 12vw, 4.5rem) !important; }
    .about-text-content { font-size: 1.1rem !important; padding-top: 0 !important; text-align: center !important; }
    .about-details { margin-top: 2rem !important; padding-top: 1.5rem !important; align-items: center !important; }
    .detail-item { font-size: 0.85rem !important; letter-spacing: 1px !important; }
    .about-cta-container { margin-top: 2.5rem !important; display: flex !important; justify-content: center !important; }

    .contact-section { padding: 8rem 1.5rem 6rem !important; }
    .contact-header { margin-bottom: 3rem !important; }
    .contact-title { font-size: clamp(3.5rem, 12vw, 4.5rem) !important; }
    .contact-content-wrapper { grid-template-columns: 1fr !important; gap: 4rem !important; }
    .contact-info-block { gap: 2rem !important; align-items: center !important; text-align: center !important; }
    .social-links-grid { justify-content: center !important; margin-top: 1rem !important; }
    .contact-form-wrapper { padding: 0 !important; }
    .submit-btn { width: 100% !important; }
}

/* FIX CONTACT OVERFLOW ON MOBILE */
@media (max-width: 768px) {
    .info-text {
    }
    .info-label {
    }
    .info-group {
    }
    .contact-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .input-group {
    }
    .input-field {
    }
    .contact-content-wrapper {
    }
    .contact-section {
    }
}

@media (max-width: 768px) {
    .contact-form textarea {
    }
    .input-label {
    }
    .input-field {
    }
    .input-field:focus ~ .input-label,
    .input-field:valid ~ .input-label {
    }
}

@media (max-width: 768px) {
    .contact-form textarea {
    }
    .input-label {
    }
    .input-field {
    }
    .input-field:focus ~ .input-label,
    .input-field:valid ~ .input-label {
    }
}

@media (max-width: 768px) {
    .contact-form textarea { min-height: 120px !important; border-radius: 0 !important; }
    .input-label { left: 50% !important; transform: translateX(-50%) !important; text-align: center !important; width: 100% !important; display: block !important; }
    .input-field { text-align: center !important; padding-top: 15px !important; padding-bottom: 15px !important; width: 100% !important; border-radius: 0 !important;}
    .input-field:focus ~ .input-label, .input-field:valid ~ .input-label { transform: translate(-50%, -25px) scale(0.85) !important; }
}

/* F!importantX CONTACT MOB!importantLE SPEC!importantF!importantCS */
@media (max-width: 768px) {
    .contact-section {
        padding: 5rem 5% 5rem !important;
    }
    .contact-header {
        margin-bottom: 2rem !important;
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .contact-title {
        font-size: clamp(2.5rem, 10vw, 4rem) !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    .contact-subtitle {
        font-size: 1rem !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .info-text {
        font-size: 0.95rem !important;
        word-break: break-all !important;
        text-align: center !important;
        display: block !important;
    }
    .contact-info-block {
        text-align: center !important;
        margin-bottom: 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .social-links-grid {
        justify-content: center !important;
    }
}


/* Ajustements marges Contact (Mobile) */
@media (max-width: 768px) {
    .contact-section {
    }
    .contact-form {
    }
    .contact-info-block {
    }
}



/* Ajustements marges Contact (Mobile) */
@media (max-width: 768px) {
    .contact-section {
        padding-top: 9rem !important; /* Plus de marge au-dessus pour decoller du menu */
        padding-bottom: 8rem !important; /* Plus d espace en dessous */
    }
    .contact-form {
        gap: 1.5rem !important; /* Moins d espace entre les champs */
        margin-top: 1rem !important;
    }
    .contact-info-block {
        margin-bottom: 1.5rem !important; /* Rapproche lemail du formulaire */
    }
}


html {
    
}

.video-container iframe, .responsive-video {
    
}

iframe {
    color-scheme: dark;
    background: #000;
}

.loader img {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
    background: transparent !important;
}
.loader {
    -webkit-transform: translateZ(0);
}

.loader img {
    
}
.loader {
    
}

.page-transitioning {
    
}

@media (max-width: 768px) {
    .loader img {
        filter: none !important;
        animation: cinematicRevealMobile 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    }
    @keyframes cinematicRevealMobile {
        0% {
            transform: scale(0.8);
            opacity: 0;
        }
        30% {
            opacity: 1;
        }
        100% {
            transform: scale(1.05); /* Lent Travelling avant "Dolly-in" */
            opacity: 1;
        }
    }
}