:root {
    --t-color: #f2f2f2;
}

/*responsive phone*/
@media screen and (max-width: 884px) {

    .header {
        margin: 0 50px;
    }

    .about_img-phone {
        display: block;
        max-width: 150px;
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    
    /*.header_nav {
        display: none;
    }*/

    .hero_section {
        background: url(../assets/img/banner.jpg) no-repeat center center fixed;
        background-size: cover;
    }

    h1 {
        font-size: 3.5em;
        text-align: center;
    }

    .menu_toggle {
        display: flex;
        color: var(--t-color);
    }

    .nav_list {
        gap: 20px;
    }

    .hero_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about_content {
        justify-content: center;
        margin-top: 25px;
    }

    .about_img {
        display: none;
        max-width: 0;
    }

    .reveal_about {
        opacity: 0;
        transform: translateY(-40px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
      
    .reveal_about.visible {
        opacity: 1;
        transform: translateX(0);
    }
    
    .reveal_about-img {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
      
    .reveal_about-img.visible {
        opacity: 1;
        transform: translateX(0);
    }

    .div-p_c {
        margin-right: 0;
    }

    .p_c {
        font-size: 1.5em;
        text-align: center;
        margin: 0;
    }

    .carousel-track {
        margin: 50px 0 20px 0;
    }

    .carousel-track img {
        width: 200px;
        height: auto;
    }

    .carousel-container {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 50%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 10%, black 50%, transparent 100%);
    }

    .t-menu {
        margin-top: 180px;
    }

    .fp {
        flex-wrap: wrap;
        flex-direction: column;
        gap: 15px;
    }

    hr {
        margin: 0 5vh 3vh 5vh;
        border: none;
        height: 2px;
        background: linear-gradient(-45deg, transparent, #808080, transparent);
    }

    .fh2 {
        text-align: center;
        font-size: 1.9em !important;
    }

    .nnl {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nnl-l {
        gap: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Masquer le menu toggle par défaut */
.menu_toggle,
.mobile_nav {
  display: none;
}

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
    }
    
    .header {
        margin: 0 25px;
    }

    .menu_toggle {
        display: block;
        position: fixed;
        right: 25px;
        z-index: 1001;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }

    .menu_toggle svg {
        width: 100%;
        height: 100%;
        color: var(--t-color);
        transition: opacity 0.3s ease;
    }

    .close_icon {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
    }

    .menu_toggle.active .burger_icon {
        opacity: 0;
        pointer-events: none;
    }

    .menu_toggle.active .close_icon {
        opacity: 1;
        pointer-events: all;
    }

    .mobile_nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background-color: rgba(16, 16, 16, 1);
        backdrop-filter: blur(10px);
        transform: translateY(-100%);
        transition: transform 0.6s ease;
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }

    .no-scroll {
        overflow: hidden;
        height: 100vh;
    }
    

    .mobile_nav.active {
        transform: translateY(0);
    }

    .mobile_nav_list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 40px;
        text-align: center;
        padding: 0;
    }

    .mobile_nav_list li a {
        font-family: var(--f-title);
        color: var(--t-color);
        font-size: 2em;
        text-decoration: none;
        transition: color 0.3s;
    }

    .mobile_nav_list li a:hover {
        color: #c58030;
    }

    /* Masquer le menu desktop sur téléphone */
    .header_nav {
        display: none !important;
    }
}