/* ==========================
   1. GLOBAL STYLES & Font
   ========================== */
   * {
    margin: 0;

    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;  /* Safari */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Standard */
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Ginger';
    src: url('fonts/Ginger/Ginger.otf') format('opentype');
}

@font-face {
    font-family: 'Gingerbrand';
    src: url('fonts/Gingerbrand/ginger-brand.otf') format('opentype');
}

@font-face {
    font-family: 'Bodini';
    src: url('fonts/Bodini_Moda/BodoniModa-VariableFont_opsz,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Unna';
    src: url('fonts/Unna/Unna-Regular.ttf') format('truetype');
}

::-webkit-scrollbar {
    display: none;
}


/*//////////////////
//LOADER
/////////////////*/

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
}

.loader {
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    opacity: 1;
    visibility: visible;
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    height: 20px; /* Hauteur fixe */
    position: relative; /* Pour stabiliser le contenu */
}

.loader-text {
    display: inline-block;
    opacity: 1;
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}




html, body {
    height: 100%;
    background-color: #0A0A0A;
    font-family: 'Roboto-Medium', sans-serif;
    cursor: none;
}




header {
    display: flex;
    justify-content: space-between;
    border-bottom: 3px solid #0E0E0E; /* Type de bordure ajouté */
    padding-bottom: 16px;
    position: sticky;
    background: rgba(0, 0, 0, 0.2);  /* Légère opacité */
    backdrop-filter: blur(5px);  /* Applique un flou */
    -webkit-backdrop-filter: blur(5px);  /* Pour Safari */
    z-index: 100;  /* Toujours au-dessus des autres éléments */
    transition: background-color 0.3s ease;  /* Transition fluide */
    top: 0;
    overflow: visible;

}


/* ==========================
   2. First Page Style
   ========================== */



.page {
    height: 100vh; /* Prend toute la hauteur de l'écran */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Écarte le header, la section home, et le footer */
    margin-top: -70px;  /* Enlève la place du header */
    opacity: 0;
    transition: opacity 1s ease;

}

.page.visible {
    opacity: 1;
}

.spacer-header {
    margin-top: 70px;
    position: relative; 
}

a {
    text-decoration: none;
    outline: none;
}

header a {

    color: #999999;
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 14px;
    padding-top: 27px;
    padding-right : 42px

}

.a_footer {
    font-size: 14px;
    color: #999999;
    position: relative;
    user-select: none; /*Empêche la sélection de texte sur le curseur*/

}
.footer-nav {
    display: flex;
    align-items: center;
    padding-bottom: 30px;
    justify-content: center;
}

/* Positionnement du header et footer */
header, .footer-nav {

    text-align: center;
    font-size: 14px;
    
}


.footer-nav {
    border-top: 3px solid #0E0E0E; /* Type de bordure ajouté */
    padding-top: 20px;
}

nav {
    display: flex;
    gap: 32px;
}
.theme-toggle {
    position: absolute;
    right: 2.5vw;
    pointer-events: auto;
    background-color: white;
    border-radius: 30px;
    width: 18px;
    border: none;
    height: 18px;
    transition: background-color 0.4s;
}
.a_social {
    position: absolute;
    left: 2.5vw;
    font-size: 14px;
    color: #999999;
}

/* Centrage de la section home */
main {
    flex: 1; /* Prend tout l'espace disponible entre header et footer */
    display: flex;
    justify-content: center;  /* Centre horizontalement */
    align-items: center;      /* Centre verticalement */
}

/* Style interne */
.home {
    display: flex;
    align-items: center;
    gap: 20px; /* Espace entre le texte et l'image */
}

.title_container h1 {
    font-size: 34px;
    text-align: left;
    color: #F8F8F8;
    font-family: 'Roboto-Black';
    margin: 3px;
    margin-left: 4.5rem;
    white-space: nowrap; /* Empêche le retour à la ligne */
}
.hyphens {
    letter-spacing: -7px;  /* Utiliser un espacement en pixels */

}
.photo {
    position: relative;
    z-index: 2;
    filter: grayscale(100%) brightness(1.2);
    border-radius: 15px;
    overflow: hidden;
}
.photo:hover {
    animation: glitch 0.5s infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
        filter: grayscale(100%) brightness(1.2) contrast(100%);
    }
    25% {
        transform: translate(-1px, 1px);
        filter: grayscale(100%) brightness(1.3) contrast(120%);
        opacity: 0.9;
    }
    50% {
        transform: translate(1px, -1px);
        filter: grayscale(100%) brightness(1.2) contrast(90%);
        opacity: 0.95;
    }
    75% {
        transform: translate(-1px, -1px);
        filter: grayscale(100%) brightness(1.4) contrast(110%);
        opacity: 0.9;
    }
    100% {
        transform: translate(0);
        filter: grayscale(100%) brightness(1.2) contrast(100%);
    }
}

/* Effet split */
.photo:hover::before,
.photo:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    background-size: cover;
    mix-blend-mode: multiply;
    filter: grayscale(100%) brightness(1.2);
    border-radius: 15px;
}

.photo:hover::before {
    transform: translate(-1px, 0);
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 3;
}

.photo:hover::after {
    transform: translate(1px, 0);
    background-color: rgba(128, 128, 128, 0.3);
    z-index: 4;
}
.logo {
    padding-top: 10px;
    padding-left: 42px;
    max-height: 50px;
}

#bg {
    position: absolute;
    top: 70px;
    bottom: 70px;
    left: 0;
    right: 0;
    z-index: 1;
}



   /* ==========================
   3.Page 2
   ========================== */
   
   #horizontal {
    display: flex;
    flex-direction: row;
    width: 200vw;
   }

   .second_page {
    height: 100vh;
    display: flex;
    overflow: visible;

   }
   
   .third_page {
    display: flex;
    overflow: visible;
   }

   .spacer {
        height: 20vh;
    }
 

   .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 8px;
    margin-right: 8px;
    flex-wrap: wrap; /* Permet à l'élément de s'enrouler si nécessaire */
   }




 .title {
    text-align: center ;
    color: transparent;  /* Rend le texte transparent */
    -webkit-text-stroke: 3px #999999;  /* Applique un contour jaune de 3px */
    text-align: center;  /* Centre le texte horizontalement */
    font-size: 4.44vw;
  
    pointer-events: auto; /* Force l'interactivité */

 }
.music, .work {
    font-weight: bold;
    text-transform: uppercase;
}

.music h1, .work h1 {
    line-height: 1.2;
}

.section-music {
    padding-left: 6%;
}

.section-work {
    padding-right: 6%;
}
/* ==========================
   MUSIC SECTION STYLES
   ========================== */


/* ==========================
   VIDEO SECTION STYLES
   ========================== */
   

   
   
   .section-video {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* border: 1px solid red; */
    width: 74.5%;  /* 72.2% de la largeur du parent */
    aspect-ratio: 2.39;  /* Maintient le ratio 2.39:1 */
    }

    .video-player {
    width: 100%;  /* 72.2% de la largeur du parent */
    border-radius: 15px;

    }
    



/* Style du texte au-dessus de la vidéo */
.video-title {
    font-size: 14px;
    font-weight: bold;
    color: #999999;
}
.video-title-span {
    margin-left: 5vw;
}
.video-title-span2 {
    color: #F8F8F8;
}

/* Style du texte en dessous de la vidéo */
.video-footer {
    font-size: 14px;
    color: #F8F8F8; /* Couleur gris clair, vous pouvez ajuster */
}

/* ==========================
   WORK SECTION STYLES
   ========================== */
.work h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.work h1 span {
    margin: 5px 0;
}

/* ==========================
   Service Pages
   ========================== */

.services {

    padding: 0px 9vw;
    padding-top: 200px;
    padding-bottom: 200px;
    height: 100vh;
    color: white;
    display: flex;           /* Ajouté */
    flex-direction: column;  /* Ajouté */
    justify-content: center; /* Ajouté */
}

.section-title {
    font-size: 34px;        /* Modifié */
    font-family: 'Roboto-Black'; /* Ajouté */
}

.services-container {
    display: flex;
    flex-direction: column;  /* Modifié */
    gap: 20px;              /* Ajouté */
    align-content:space-between;
}

.service-item {
    padding-top: 30px;        /* Ajouté */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Ajouté */
    display: flex;          /* Ajouté */
    align-items: flex-start; /* Ajouté */
}

.service-header {
    display: flex;
    justify-content: flex-start;
}

.service-number {
    font-size: 16px;
    opacity: 0.5;          /* Ajouté */
    width: 10%; /* largeur fixe pour le numéro */

}

.service-title {
    font-size: 20px;
    font-weight: bold;     /* Ajouté */
    width: 40%; /* largeur fixe pour le titre */

}

.service-description {
    font-size: 16px;
    /* line-height: 1.6; */
    color: #999999;
    width: 50%;           /* Ajouté */
}


/* ==========================
   Section Contact
   ========================== */
   .contact-section {

    color: white;
    height: 100vh;      
    display: flex;
    flex-direction: column;
}

.header-final {
    font-size: 12px;
    color: #ffffff;
    padding: 0px 9vw;
    margin-top: 3.5vh;    
    text-align: right;
    z-index: 1200;
    position: relative; /* Crée un nouveau contexte d'empilement */
    transform: translateZ(0); /* Force un nouveau contexte de rendu */
    /* Alternativement, vous pouvez utiliser : */
    /* isolation: isolate; */
}

.contact-container {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: auto 0;          /* Centre verticalement le container */
    justify-content: space-between;
    padding: 0px 9vw;
}
.contact-left {
    width: 25%;                      /* Largeur fixe */
}

.contact-text {
    font-size: 1.5rem;
    line-height: 1.4; 
    max-height: 80px;
    object-fit: contain;
    /* Meilleur espacement des lignes */
}

.photo_end {
    height: auto;
    object-fit: contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.contact-links {
    /* width: 25%;                     Largeur fixe */
    display: flex;
    gap: 40px;
    max-height: 80px;

}

.contact-links-column {
    display: flex;
    flex-direction: column;
    gap: 1vh;                      /* Plus d'espace entre les liens */
}

.contact-links a {
    color: #999999;
    font-size: 1.125rem;
    transition: color 0.3s ease;
    text-align: left;              /* Aligne le texte à gauche */
}

.contact-links a:hover {
    color: white;
}






/* Augmentation de la taille uniquement pour les SVG */
.scroller__inner img[src$=".svg"] {
    height: 30px; /* +5px pour les SVG uniquement */
}


.scroller__inner img {
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Filtre par défaut pour tous les logos */
}
.scroller__inner img[src$="Steinberg.svg"] {
    filter: none;
}
.scroller__inner img[src$="Hise.png"] {
    height: 50px;
    position: relative;
    top: -8px;
}

.scroller__inner img[src$="Max.png"] {
    height: 55px;
    position: relative;
    top: -8px;
}

.scroller__inner img[src$="Fabfilter.png"] {
    height: 50px;
    position: relative;
    top: -5px;
}

.scroller__inner img[src$="Izotope.png"] {
    height: 45px;
    position: relative;
    top: -6px;
}
.scroller__inner img[src$="Wwise.png"] {
    height: 50px;
    position: relative;
    top: -5px;
}


.scroller__inner img[src*="UnrealEngine"] {
    height: 50px !important;
    position: relative;
    top: -5px;
}
.scroller__inner img[src*="Ableton"] {
    height: 25px
}
/* Exclusion du filtre pour les logos spécifiques */
.scroller__inner img[alt="Hise Logo"],
.scroller__inner img[alt="Max Logo"] {
    filter: none;
}

.scroller {
    margin-top: 20px;
    padding: 0px 9vw;
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 20%,
      white 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
}


@keyframes scroll {
    to {
      transform: translate(calc(-50% - 4rem));
    }
}

.scroller__inner,
.scroller__inner li {
    list-style: none; /* Supprime les marqueurs de liste */
    margin: 0; /* Supprime la marge par défaut */
}

.scroller-title {
    font-size: 12px;
    text-align: left;    
    color: #ffffff;
    -webkit-mask: none !important;
    mask: none !important;
    position: relative; /* Crée un nouveau contexte d'empilement */
    z-index: 1; /* S'assure que le texte reste au-dessus du mask */
}

.scroller-container {
    padding-top: 10vh;
}





/* ==========================
   2. CURSOR STYLES
   ========================== */

    .cursor {
        width: 40px;
        height:40px;
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: transparent;
        transform: translate(-50%, -50%) scale(1);  /* Démarre à 0 */
        transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
        transition: 0.01s; /*Pour avoir la velocité du curseur-spot*/
        pointer-events: none;
        border: 1px solid #a3a7ac;
        /* z-index: 15; */
    }
    /* Couche interne pour l'effet de background */
    .cursor-inner {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: transparent;
        transform: scale(0);  /* Départ à 0 */
        transition: transform 0.5s ease-out, background-color .5s ease-out , border-color .5s ease-out ; /* Le délai permet d'attendre un peu avant que le fond et la bordure changent */
    }

    .cursor-spot{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #9ba9ba;
        position: fixed;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        transition: 0s;
        transition: background-color 0.3s ease, transform 0.2s ease-out;
        /* z-index: 15; */
    }
    .cursor, .cursor-spot {
        user-select: none; /*Empêche la sélection de texte sur le curseur*/
        pointer-events: none;  /* Important */
        z-index: 1100;  /* Plus élevé que le header */
    }

    .cursor.hovered .cursor-inner {
        transform: scale(1);  /* Agrandissement */
        background-color: rgba(153, 153, 153, 0.5);  /* Gris avec 50% d'opacité */

    }
    .cursor.hovered {

        transition: transform .5s ease-out, background-color .5s ease-out;


    }


    /* ==========================
   3.INITIALISATION LENY
   ========================== */

html.lenis, html.lenis body {
    height: auto;
 }
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
.a {
    cursor: none;  /* Cache la main sur les liens */
}




/*//////////////////////
FOOTER
///////////////////////*/

.contact-footer {
    display: flex;
    align-items: center;
    padding: 30px 0vw;
    justify-content: space-between;
    border-top: 3px solid #0E0E0E;
    width: 100%;         /* Prend toute la largeur */
    color: #999999;
    
}

.made-by {
    margin-left: 50px;

}

.made-by span {
    color: red; /* Pour le coeur */
}



.back-to-top:hover {
    opacity: 0.8;
}

.arrow-up {
    width: 12px;
    height: 12px;
    border-left: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    transform: rotate(45deg);
    display: inline-block;
    margin-left: 1vw;
    margin-bottom: -5px;
    margin-right: 50px;
}



/*//////////////////////
VIDEO
///////////////////////*/
.video-block {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    pointer-events: auto;
    border-radius: 15px;
}

.thumbnail-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    overflow: hidden;
    pointer-events: auto;
    cursor: none;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    transform: scale(1.1);  /* Augmenté à 1.1 pour un zoom plus visible */
    will-change: transform;

}

/* Modification du sélecteur pour cibler directement l'image */
.thumbnail-container:hover img {
    transform: scale(1);
}

/* Pour déboguer, ajoutons une couleur de fond temporaire */
.thumbnail-container:hover {
    background-color: rgba(255,255,255,0.1); /* Optionnel, pour vérifier que le hover fonctionne */
}

.video-playing .thumbnail-container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
    pointer-events: auto;
    opacity: 0;  /* Commence invisible */
    transition: opacity 0.3s ease;  /* Ajoute une transition douce */
}

.video-block:hover .video-controls {
    opacity: 1;  /* Devient visible au survol */
}

/* Optionnel : pour garder les contrôles visibles pendant l'interaction */
.video-controls:hover {
    opacity: 1;
}

.play-pause, .volume {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    z-index: 10;
    position: relative;
    pointer-events: auto;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    position: relative;
    padding:3px 0;
}

.progress {
    height: 6px;
    background: white;
    width: 0%;
    border-radius: 4px;
}

.volume-container {
    display: flex;
    align-items: center;
    position: relative;
}

.volume-slider {
    width: 0;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
    transition: width 0.3s ease;
    margin-left: 10px;
}

.volume-container:hover .volume-slider,
.volume-slider.active {
    width: 100px;
}

.volume-progress {
    width: 100%;
    height: 100%;
    background: white;
    transform-origin: left;
}

/* Zone de clic étendue pour la barre de progression */
.progress-bar::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    bottom: -10px;
    cursor: pointer;
}

/* Ajoutez ces styles pour le pourcentage */
.loading-percentage {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: white;
    font-size: 3rem;
    font-family: monospace;  /* Pour un style numérique */
}

/* Styles pour les liens et popups */
.nav-link {
    position: relative;
    text-decoration: none;
    font-size: 14px;
    color: #999999;
    position: relative;
    user-select: none; /*Empêche la sélection de texte sur le curseur*/
}

.popup {
    position: absolute;
    background: #000;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%);
}

.popup-top {
    bottom: auto;
    top: -40px;
}

.popup-top::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000;
}

.popup-bottom {
    top: auto;
    bottom: -40px;
}

.popup-bottom::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #000;
}

.nav-link:hover .popup-top {
    opacity: 1;
    visibility: visible;
    top: -35px;
}

.nav-link:hover .popup-bottom {
    opacity: 1;
    visibility: visible;
    bottom: -35px;
}

.nav-link-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-link {
    position: relative;
  
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    outline: none;
    display: inline-block;
}

.popup {
    position: absolute;
    background: #000;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
}

.popup-bottom {
    top: auto;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.popup-bottom::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #000;
    border-top: none;
}

/* Important : ajout de la règle de hover spécifique */
.nav-link:hover .popup-bottom {
    opacity: 1;
    visibility: visible;
    bottom: -35px;
}






/*********************************************************************/
/************************ DEBUT RESPONSIVE TEL ***********************/
/********************************************************************/
.nav-link-container2 {
    display: none;
}

.mobile-menu {
    display: none;
}

/* Style pour le menu mobile ouvert */
.mobile-menu {
    display: none;
}

.mobile-menu-content {
    display: none;
}

/* Cacher les flèches par défaut */
.scroll-arrow-mobile {
    display: none;
}
.section-title-mobile {
    display: none;
}
.divider-container-mobile {
    display: none;
}



/********PREMIERE PAGE **************/

@media screen and (max-width: 768px) {

    .cursor {
        display: none;
    }
    .cursor-spot {
        display: none;
    }
    .logo {
        padding-left: 16px;
    }

    .home {
        flex-direction: column;
        gap: 0px;
        align-items: flex-start;
    }
    #bg {
        display: none;
    }



    /********/
    /*HEADER*/
    /********/
    .nav-link {
        display: none;  /*LAB ON LE METTRA PLUS TARD QUAND E-CO SERA EN LIGNE*/
    }
    .nav-link2 {
        position: static;
        display: block;
        text-align: left;
        order: 2; /* Place About en dernier */
        -webkit-tap-highlight-color: transparent;
        color: #999999;
    }

    .mobile-menu {
        display: inline;
    }
    
    

    
    
    
    
    
    
    /*********/
    /*TITRE */
    /********/
    .home {
        width: 100%;
        padding-bottom: 10vh;
       
    }

    
    .title_container {
        order: -1; /* Place le titre en premier */
        width: 100%;
    }

    .title_container h1 {
        margin-left: 0;
        font-size: 28px; /* Taille réduite pour mobile */
        text-align: left;
    }

    /* Ajustement de la photo */
    .photo {
        width: 100%;
        height: auto;
        max-width: 100%;
        order: 0; /* Place la photo en deuxième */
    }
    /*************/
    /* Footer navigation */
    /*************/
    .footer-nav {
        display: none; /* Cache la navigation du footer */
    }

    header nav {
        display: none; /* Cacher la navigation normale */
    }
    
    /* Ajuster le conteneur principal */
    main {
        overflow-x: hidden;
        width: 100%;
        height: auto !important;
        position: relative !important;
        overflow: visible !important;
        padding: 0px 16px;
        border-bottom: 1px solid rgb(27, 27, 27);
    }

    .footer-nav {
        display: none;
    }

    /* Afficher le menu mobile */
    .mobile-menu {
        display: block;
    }

    /* Rendre le header sticky */
    
    /*****************/
    /*Pop up About*/
    /****************/
    
    /* Ajout du conteneur pour nav-link2 */
    .nav-link-container2 {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Style du nav-link2 */
    .nav-link2 {
        position: relative;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        outline: none;
        display: inline-block;
    }

    /* Popup pour nav-link2 */
    .nav-link2 .popup {
        position: absolute;
        background: #000;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        white-space: nowrap;
        pointer-events: none;
        z-index: 1000;
    }

    /* Position du popup en bas */
    .nav-link2 .popup-bottom {
        top: auto;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Flèche du popup */
    .nav-link2 .popup-bottom::after {
        content: '';
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #000;
        border-top: none;
    }

    /* Affichage au survol */
    .nav-link2:hover .popup-bottom {
        opacity: 1;
        visibility: visible;
        bottom: -35px;
    }




    
    
    


}




















/* Le reste des styles reste inchangé */










@media screen and (max-width: 768px) {
    /* Cacher le footer-nav original */

    /* Style du bouton hamburger */
   
    .nav-link-container2 {
        display: block;
    }
    
    
    .hamburger-menu {
        display: block;
        background: none;
        border: none;
        padding: 15px;
        cursor: none;
        z-index: 1000;
    }

    .hamburger-menu span {
        display: block;
        width: 25px;
        height: 2px;
        background-color: #999999;
        margin: 5px 0;
        transition: 0.3s;
    }

    /* Style du menu mobile ouvert */
    .mobile-menu-content {
        display: none;
        position: absolute;
        top: 60px;
        right: 20px;
        background: #0A0A0A;
        border: 1px solid #1a1a1a;
        border-radius: 4px;
        padding: 10px 0;
        width: 150px;
        z-index: 999;
    }

    .mobile-menu-content.active {
        display: block;
    }

    .mobile-menu-content nav {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mobile-menu-content nav a {
        padding: 12px 20px;
        color: #999999;
        transition: background-color 0.3s;
        text-align: left;
        text-decoration: none;
        position: relative; /* Pour éviter les chevauchements */
        z-index: 1; /* Assure une superposition correcte */
    }
    .a_social {
        left: 0;
    }

    .mobile-menu-content nav a:hover {
        background-color: #1a1a1a;
    }

    /* Suppression des styles qui pourraient causer des chevauchements */
    .mobile-menu-content nav .a_social {
        border-top: none;
        margin-top: 0;
        padding-top: 12px;
    }

    /* Style du hamburger */
    .hamburger-menu {
        display: block;
        background: none;
        border: none;
        padding: 27px 16px 0px 15px;
        cursor: none;
        z-index: 1000;
    }

    .hamburger-menu span {
        display: block;
        width: 25px;
        height: 2px;
        background-color: #999999;
        margin: 5px 0;
        transition: 0.3s;
    }

    /* Animation du hamburger */
    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }


 

    /* Ajuster la position du menu mobile */
    .mobile-menu-content {
        position: fixed;
        top: 70px;
        right: 20px;
        z-index: 1100;
    }

    /* Réorganisation des services */
    
    .services {
        position: relative; /* Nécessaire pour le positionnement absolu de la flèche */
        padding: 0px 16px;
    }
    .service-item-mobile {
        padding: 0px 0px 10px 0px;
    }
    .divider-mobile {
        border-bottom: 1px solid #ffffff;
    }

    .service-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
    }

    .service-number {
        margin-right: 20px;
    }

    /* Force la description en dessous */
    .service-description {
        display: block;
        width: 100%;
    }

    /* Reset des autres styles flex */
    .service-item {
        display: block;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}


/****
glitch
*/

/* Si vous voulez permettre la sélection pour certains éléments spécifiques (comme du texte à copier) */
.selectable {
    -webkit-user-select: text;  /* Safari */
    -ms-user-select: text;      /* IE 10+ */
    user-select: text;          /* Standard */
}

/* Media query pour masquer photo_end au-dessus de 1040px */
@media screen and (max-width: 1040px) {
    
    
    .photo_end {
        display: none;
    }

}

@media screen and (max-width: 600px) {

    .title_container h1 {
        margin: 0px;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 768px) {

    /* Forcer l'affichage vertical */
    #horizontal {
        display: block;
        width: 100vw;
        transform: none !important;
        position: static !important; /* Empêche le positionnement fixe */
    }

 

    /* Ajuster les pages */
    .second_page, 
    .third_page {
        width: 100% !important;
        min-height: 100vh; /* Hauteur minimale au lieu de fixe */
        overflow: visible;
        display: block;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        padding: 50px 16px; /* Ajoute de l'espace vertical */
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgb(27, 27, 27);
    }
        .container {
            margin-left: 0px; 
            margin-right: 0px;
        }    


        /* Désactiver les animations GSAP */
        .gsap-marker-scroller-start,
        .gsap-marker-scroller-end,
        .gsap-marker-start,
        .gsap-marker-end {
            display: none !important;
        }
    






}



    /* Réorganisation du header */
    /* Cacher la navigation normale */
    header nav {
        display: none;
    }


    /* Réorganisation de la section home */









/* Cache/Affiche les versions selon la taille d'écran */
.service-item-mobile {
    display: none;
}
.mobile-showreel-title {
    display: none;
}

/***************************/   
/*******************SERVICES***********/
/***************************/

@media screen and (max-width: 768px) {
    .services-container-mobile {
       position: absolute;
       top: 15vh;
       left: 15px;
       right: 15px;
    }

    .services {
        padding-top: 0px;
        border-bottom: 1px solid rgb(20, 20, 20);
    }

    .section-title-mobile {
        font-size: 34px;
        font-family: 'Roboto-Black';
    }


    .video-title{
        display: none;
    }

    /* OU si ce sont des classes */
    .section-music,
    .section-work {
        display: none !important;
    }
    .section-video {
        width: 100%;
    }
    .mobile-showreel-title {
        display: block;
        color: aliceblue;
    }

    .services-container {
        display: none;
    }
    .service-item {
        display: none; /* Cache la version desktop */
    }

    .service-item-mobile {
        display: block;
    
        border-bottom: 1px solid #ffffff; /* Ajoute la ligne de séparation */
    }

    /* Ajoute une bordure supérieure au premier élément */
    .service-item-mobile:first-child {
        border-top: 1px solid #ffffff;
    }

    .service-header-mobile {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
        justify-content: space-between;
    }

    .service-header-mobile .service-number {
        margin-right: 20px;
    }

    .service-description-mobile {
        display: block;
        width: 100%;
        margin-top: 20px;
    }
    .service-title {
        width: auto;
    }
    /* Reset du pin-spacer */
    .pin-spacer {
        padding: 0 !important;
        height: auto !important;
    }

}



/* Afficher et styler les flèches uniquement en mobile */
@media screen and (max-width: 768px) {
    .scroll-arrow-mobile {
        display: block;
        position: absolute;
        bottom: 14vh;
        left: 50%;
        transform: translateX(-50%);
        color: #dadada;
        font-size: 24px;
        animation: bounce 2s infinite;
        cursor: none;
    }

    .scroller-container{
        display: none;
    }

  
}

/*********************/
/*************************CONTACT*/
/*********************/

@media screen and (max-width: 768px) {
    /*Services*/
    
    .section-title-mobile {
        display: block;
    }
    .divider-container-mobile {
        display: block;
    }
    
    
    
    
    .section-title {
        display: none;
    }
    .divider-container {
        display: none;
    }
    
   
   
   
    .contact-container {
        display:flex;
        flex-direction: column;
        padding: 0px 0vw; 
    
    }
    .contact-left {
        width: auto;
        padding-bottom: 3vh;
    }
    .photo_end {
        display: block;
        position: relative;
        transform: translateX(0%);
        left: 0;
        width: 100%;
        height: 100px; /* ou la hauteur que vous souhaitez maintenir */
        object-fit: fill; /* Force l'étirement */
    }
    .contact-section {
        padding:0 20px
    }
    
    .contact-text {
        max-width: 400px;
    }
    .contact-links {
        padding-top: 3vh;
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 2vh;
    }
    .contact-links-column a::before {
        content: '';
        width: 8px; /* Largeur du carré */
        height: 8px; /* Hauteur du carré */
        background-color: #ffffff; /* Couleur blanche */
        display: inline-block;
        margin-right: 10px; /* Espace entre le carré et le texte */
        vertical-align: middle; /* Alignement vertical */
        margin-bottom: 4px;
    }
    .made-by {
        margin-left: 16px;
    }

    .arrow-up {
        margin-right: 16px;
    }

    .contact-footer {
        margin-left: -16px;  /* Valeur égale au padding du parent */
        margin-right: -16px;
        width: calc(100% + 32px); /* Compense les marges négatives */
    }
    

}.dots {
    display: inline-flex;
    margin-left: 2px;
}

.dot {
    width: 4px;
    height: 4px;
    margin: 0 1px;
    background-color: #F8F8F8;
    border-radius: 50%;
    opacity: 0;
    animation: dotFade 1.5s infinite;
}

.dot:nth-child(2) {
    animation-delay: 0.5s;
}

.dot:nth-child(3) {
    animation-delay: 1s;
}

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

.sound-wave {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    height: 20px;
    position: absolute; /* Position absolue par rapport au loader */
    left: 100%; /* Place juste après le texte */
}

.bar {
    display: inline-block;
    width: 2px;
    height: 2px;
    background-color: #F8F8F8;
    animation: soundWave 1.5s ease-in-out infinite;
}

.bar:nth-child(1) { animation-delay: 0s; }
.bar:nth-child(2) { animation-delay: 0.2s; }
.bar:nth-child(3) { animation-delay: 0.4s; }
.bar:nth-child(4) { animation-delay: 0.6s; }
.bar:nth-child(5) { animation-delay: 0.8s; }

@keyframes soundWave {
    0%, 100% { height: 2px; }
    50% { height: 15px; }
}

/* Dans la section des contrôles vidéo */
.fullscreen {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    z-index: 10;
    position: relative;
    pointer-events: auto;
    margin-left: 10px;
}

/* Style pour le mode plein écran */
.video-block:-webkit-full-screen {
    cursor: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: black;
}

.video-block:fullscreen {
    cursor: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: black;
}

/* Pour Firefox */
.video-block:-moz-full-screen {
    cursor: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: black;
}

/* Pour IE/Edge */
.video-block:-ms-fullscreen {
    cursor: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: black;
}

/* Style pour la vidéo en plein écran */
.video-block:-webkit-full-screen .video-player {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
}

.video-block:fullscreen .video-player {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
}

.video-block:-moz-full-screen .video-player {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
}

.video-block:-ms-fullscreen .video-player {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
}

@media screen and (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    #horizontal {
        display: block !important;
        width: 100vw !important;
        transform: none !important;
        position: static !important;
    }

    .second_page, 
    .third_page {
        width: 100% !important;
        min-height: 100vh;
        overflow: visible;
        display: block;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        padding: 50px 16px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgb(27, 27, 27);
    }

    .container {
        margin-left: 0px; 
        margin-right: 0px;
    }    

    /* Désactiver les animations GSAP */
    .gsap-marker-scroller-start,
    .gsap-marker-scroller-end,
    .gsap-marker-start,
    .gsap-marker-end {
        display: none !important;
    }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    #page {
        margin-bottom: 100vh; /* Ajouter de la marge en bas pour éviter le chevauchement */
    }

     .second_page, 
    .third_page {
        padding: 70px 16px; /* Augmenter le padding pour plus d'espace */
        margin-bottom: 50px; /* Ajouter de la marge en bas pour éviter le chevauchement */
    }

    .services {
        margin-top: 50px; /* Ajouter de la marge en haut pour séparer des sections précédentes */
    }
    .contact-section {
        padding-top: 150px; /* Ajouter de la marge en haut pour séparer des sections précédentes */
    }
    .scroll-arrow-mobile {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .services .scroll-arrow-mobile {
        display: none;
    }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    
    #bg {
        display: none;
    }

    header {
        position: relative !important; /* Désactive le sticky */
        background: none; /* Supprime le fond */
        backdrop-filter: none; /* Supprime l'effet de flou */
        -webkit-backdrop-filter: none;
    }

    .page {
        margin-top: 0; /* Supprime la marge négative qui compensait le header sticky */
    }
}

/* Style pour le popup email */
.email-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1200;
    justify-content: center;
    align-items: center;
    cursor: none; /* Ajout pour le curseur personnalisé */
}

.email-popup.active {
    display: flex;
}

.email-popup-content {
    background-color: #0A0A0A;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #1a1a1a;
    color: #F8F8F8;
    text-align: center;
    cursor: none; /* Ajout pour le curseur personnalisé */
}

.close-popup {
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: none;
    color: #999999;
    font-size: 20px;
    pointer-events: auto; /* Permet l'interaction tout en gardant le curseur personnalisé */
}

.close-popup:hover {
    color: #F8F8F8;
}

.copy-button {
    background: none;
    border: 1px solid #999999;
    color: #999999;
    padding: 8px 16px;
    border-radius: 4px;
    margin-top: 15px;
    cursor: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    pointer-events: auto; /* Permet l'interaction tout en gardant le curseur personnalisé */
}

.copy-button:hover {
    background-color: #1a1a1a;
    color: #F8F8F8;
    border-color: #F8F8F8;
}

.copy-button.copied {
    background-color: #1a1a1a;
    color: #F8F8F8;
    border-color: #F8F8F8;
}

.copy-button i {
    font-size: 14px;
}

/* Assurer que le curseur reste au-dessus du popup */
.cursor, .cursor-spot {
    z-index: 1300; /* Plus élevé que le z-index du popup */
}

/* Désactiver le curseur par défaut sur tout le popup */
.email-popup *,
.email-popup-content *,
.copy-button * {
    cursor: none;
}

.nav-link-behance {
    position: relative;
    text-decoration: none;
    font-size: 14px;
    color: #999999;
    user-select: none;
    outline: none;
    display: inline-block;
}

.nav-link-behance .popup {
    position: absolute;
    background: #000;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%);
}

.nav-link-behance .popup-bottom {
    top: auto;
    bottom: -30px;
}

.nav-link-behance .popup-bottom::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #000;
}

.nav-link-behance:hover .popup-bottom {
    opacity: 1;
    visibility: visible;
    bottom: -35px;
}








/* ////////////////AboutPage//////////////// */

.page1_about {
    width: 100vw;
    height: calc(100vh - 138px);
    position: relative;
    animation: expandFromCenter 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
    clip-path: inset(0 50% 0 50%);
    opacity: 0;
}

@keyframes expandFromCenter {
    0% {
        clip-path: inset(0 50% 0 50%);
        opacity: 0;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.page1_about h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    white-space: nowrap;
    font-family: 'Bodini';
    font-weight: 100;
    color: rgb(248, 248, 248);
    font-size: 9vw;
    line-height: 0.8;
    opacity: 0;
    animation: fadeIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
}

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

.img_about {
    aspect-ratio: 5/3;
    width: 15%;
}


.page1_about h1 br {
    content: "";
    display: block;
    margin-bottom: 0;
}



.composer-text {
    display: inline-block;
    margin-left: 10%; 
    position: relative;
}

.discover-container {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:rgba(255, 255, 255, 0.5);
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.discover-container.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
}

.discover {
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.arrow-discover {
    padding-top: 5px;
    height: 15px;
    filter: invert(100%);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.page2_about {
    padding-top: 69px;
    width: 100vw;
    height: 100vh;
    position: relative; 
}




.page1_about ~ .footer-nav {
    position: fixed;
    bottom: 0;
    z-index: 100;
    background-color: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100vw;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.about-content {
    padding: 0px 10vw;
    color: #ffffff;
    font-size: 16px;
    font-family: 'Unna';
    text-align: center;
    padding-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.about-content.visible {
    opacity: 1;
    transform: translateY(0);
}


.about-content:not(.visible) {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-headline {
    font-size: 12px;
    color: rgb(248, 248, 248);;
}
.separator {
    border-bottom: 1px solid rgb(36, 36, 36);
    width: 80%;  
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 24px;
}

.text-centered {
    text-align: center;
    width: 50%;
    color: #ffffffc7;
    line-height: 140%;
}
.text-highlight {
    color: rgb(175, 182, 206);
    font-weight: 200;
}

.resume-button {
    display: block;
    margin: 30px auto 0;
    padding: 16px 24px;
    background: none;
    border: 1px solid rgb(36, 36, 36);
    color: rgb(248, 248, 248);
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 10px;
    cursor: none;
    position: relative;
    transition: all 0.3s ease;
    
}

.resume-button:hover {
    background-color: #1a1a1a;
   
  
}


@media screen and (max-width: 768px) {
    .resume-button {
        margin: 30px auto 0;
        padding: 10px 20px;
        font-size: 10px;
    }

    .about-content {
        padding: 0px 4vw;
    
    }
    .text-centered {
        padding: 0px 10px;
        width: 100%;
    }

}