/* Corrections pour le responsive mobile */

/* Ajustement des breakpoints pour une meilleure progression */
@media screen and (max-width: 768px) {
    .navbar-navigation {
        display: none !important;
    }
    
    .hamburger {
        display: flex !important;
    }
}

@media screen and (min-width: 769px) {
    .navbar-navigation {
        display: flex !important;
    }
    
    .hamburger {
        display: none !important;
    }
}

/* Problèmes sur très petits écrans (iPhone SE, etc.) */
@media screen and (max-width: 375px) {
    .section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .image-wrapper._570px-height {
        height: 25vh;
        min-height: 150px;
    }
    
    .image-wrapper._750px-height {
        height: 55vh;
        min-height: 350px;
    }
    
    /* Vidéos sur très petits écrans */
    .video-container video {
        height: 50vh; /* Hauteur réduite sur très petits écrans */
        min-height: 250px;
    }
}

/* Correction pour les éléments en overflow horizontal */
@media screen and (max-width: 768px) {
    .w-slider-mask {
        overflow: hidden;
        width: 100%;
    }
    
    .w-slide {
        width: 100%;
        flex-shrink: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Amélioration des boutons sur mobile */
@media screen and (max-width: 768px) {
    .button {
        min-height: 44px;
        min-width: 44px;
    }
    
    .button:hover {
        transform: none;
    }
    
    .button:active {
        transform: scale(0.98);
    }
}

/* Correction pour les images qui débordent */
@media screen and (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .background-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Correction pour les images du carrousel */
.testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.w-slide img {
    object-fit: cover;
}

/* Masquer le slider des statistiques sur mobile */
@media screen and (max-width: 767px) {
    [data-w-id="2cb3eef7-25d7-8d1a-877a-c83bf266e3b5"] {
        display: none !important;
    }
    
    #button-reserver {
        display: none !important;
    }

    #hero-button {
        display: none !important;
    }

}

/* Navigation mobile améliorée */
@media screen and (max-width: 768px) {
    .projects-v1-info {
        padding: .25rem 0 .25rem;
    }
    .navigation-wrapper {
        gap: 1rem;
    }
    
    .hamburger {
        padding: 0.5rem;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .hamburger-line {
        width: 24px;
        height: 2px;
        background-color: var(--black);
        margin: 3px 0;
        transition: all 0.3s ease;
        display: block;
    }
}

/* Amélioration des formulaires sur mobile */
@media screen and (max-width: 768px) {
    .text-field,
    input,
    textarea,
    select {
        font-size: 16px; /* Évite le zoom automatique sur iOS */
        padding: 12px;
        border-radius: 4px;
    }
    
    .form-block {
        padding: 1.5rem;
        margin: 1rem 0;
    }
}

/* Correction pour les grilles qui débordent */
@media screen and (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .w-row .w-col {
        width: 100% !important;
    }
}

/* Correction pour les vidéos sur mobile */
@media screen and (max-width: 768px) {
    video {
        max-width: 100%;
        height: auto;
    }
    
    /* Vidéos avec hauteur plus grande que largeur sur mobile */
    .video-container video {
        background-color: black;
        width: 100%;
        height: 60vh; /* Hauteur de 60% de la hauteur de l'écran */
        min-height: 300px;
        object-fit: contain;
    }
    
    .w-video iframe,
    .w-video embed,
    .w-video object {
        max-width: 100%;
    }
}