/* Améliorations responsive pour mobile et tablette */

/* Règle globale pour éviter les débordements horizontaux */
@media (max-width: 767.98px) {
    * {
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        position: relative;
    }
    
    main, .section, .container, .row, .col-12, .col-md-6 {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Priorité aux boutons du header (au-dessus de l'image qui remonte en mt-n9) */
.section-header-actions {
    position: relative;
    z-index: 10;
}
.section-header .video-btn {
    position: relative;
    z-index: 11;
}

/* Optimisation des boutons du header */
@media (max-width: 767.98px) {
    .section-header .btn {
        width: 100%;
        margin-bottom: 0.75rem;
        margin-left: 0 !important;
    }
    
    .section-header .btn:last-child {
        margin-bottom: 0;
    }
    
    .section-header .d-flex.flex-column .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .section-header .d-flex.flex-column .btn + .btn {
        margin-top: 0.75rem;
    }
    
    .section-header .d-flex.flex-md-row .btn + .btn {
        margin-left: 0.75rem;
        margin-top: 0;
    }
    
    /* Espacement des boutons vidéo sur mobile */
    .section-header .d-flex.flex-column .video-btn {
        width: 100%;
        max-width: 300px;
        margin-bottom: 0.5rem !important;
    }
    
    .section-header .d-flex.flex-column .video-btn:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Réduction de la taille du titre principal sur mobile */
    .display-2 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    /* Réduction du padding sur mobile */
    .section-header {
        padding-bottom: 3rem !important;
    }
    
    .lead {
        font-size: 1rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Optimisation des images dans les sections */
@media (max-width: 767.98px) {
    .section img {
        width: 100%;
        height: auto;
    }
    
    /* Réduction des marges négatives sur mobile */
    .mt-n9, .mt-n12 {
        margin-top: -2rem !important;
    }
}

/* Optimisation des onglets de navigation */
@media (max-width: 767.98px) {
    .nav-tabs {
        flex-direction: column !important;
    }
    
    .nav-tabs .nav-item {
        width: 100%;
        margin-bottom: 0.5rem;
        margin-right: 0 !important;
    }
    
    .nav-tabs .nav-link {
        text-align: center;
        padding: 0.75rem 1rem;
    }
    
    .nav-tabs .nav-link i {
        display: block;
        margin-bottom: 0.25rem;
    }
}

/* Optimisation des cartes de fonctionnalités */
@media (max-width: 991.98px) {
    .col-lg-3 {
        margin-bottom: 2rem;
    }
}

/* Optimisation des témoignages clients */
@media (max-width: 991.98px) {
    .customer-testimonial {
        flex-direction: column;
        align-items: center;
    }
    
    .customer-testimonial img {
        margin-right: 0 !important;
        margin-bottom: 1rem;
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        object-fit: cover;
    }
    
    .customer-testimonial .content {
        width: 100%;
    }
    
    .pt-lg-6 {
        padding-top: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .customer-testimonial img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }
}

/* Optimisation de la section "Pourquoi Agendrop" */
@media (max-width: 991.98px) {
    .row-grid {
        flex-direction: column-reverse;
    }
    
    .col-lg-5, .col-lg-6 {
        margin-bottom: 2rem;
    }
    
    .ml-lg-auto {
        margin-left: 0 !important;
    }
    
    /* Centrer le conteneur des cartes */
    .col-lg-6 .row {
        justify-content: center !important;
    }
    
    /* Amélioration de l'espacement des cartes sur mobile */
    .col-sm-6 {
        margin-bottom: 1.5rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .col-sm-6 .card {
        margin-bottom: 1.5rem !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .pt-lg-5 {
        padding-top: 0 !important;
    }
    
    /* Espacement supplémentaire entre les cartes */
    .card.bg-white.shadow-soft {
        margin-bottom: 2rem !important;
        max-width: 100% !important;
    }
    
    .card .px-3.px-lg-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .card .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

@media (max-width: 767.98px) {
    /* Sur mobile, forcer une seule colonne et centrer */
    .col-lg-6 .row .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 2rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .col-lg-6 .row .col-sm-6 .card {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
    
    /* Espacement uniforme entre toutes les cartes */
    .col-lg-6 .row .col-sm-6 .card.bg-white.shadow-soft {
        margin-bottom: 2rem !important;
    }
    
    /* Dernière carte sans marge en bas */
    .col-lg-6 .row .col-sm-6:last-child .card:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 575.98px) {
    /* Sur très petit mobile, centrer encore plus */
    .col-lg-6 .row {
        justify-content: center !important;
        align-items: center !important;
    }
    
    .col-lg-6 .row .col-sm-6 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .col-lg-6 .row .col-sm-6 .card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Optimisation de la modale vidéo */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 0;
    }
    
    video {
        width: 100%;
        height: auto;
    }
}

/* Optimisation des sections avec images et texte */
@media (max-width: 767.98px) {
    .row.justify-content-between.align-items-center {
        flex-direction: column;
    }
    
    .col-12.col-md-5,
    .col-12.col-md-6 {
        margin-bottom: 1.5rem;
        order: 2;
    }
    
    .col-12.col-md-6:last-child {
        order: 1;
        margin-bottom: 1.5rem;
    }
}

/* Amélioration de la lisibilité sur mobile */
@media (max-width: 767.98px) {
    h1, .h1 {
        font-size: 1.75rem;
    }
    
    h2, .h2 {
        font-size: 1.5rem;
    }
    
    h3, .h3 {
        font-size: 1.25rem;
    }
    
    .display-3 {
        font-size: 2rem !important;
    }
    
    /* Espacement amélioré */
    .mb-4, .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-4, .mt-5 {
        margin-top: 1.5rem !important;
    }
    
    .section-lg {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Optimisation des boutons sur tablette */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section-header .btn {
        display: inline-block;
        margin-bottom: 0.5rem;
    }
    
    .section-header .btn + .btn {
        margin-left: 0.5rem;
    }
}

/* Amélioration du contraste et de la lisibilité */
@media (max-width: 767.98px) {
    .text-muted {
        color: #6c757d !important;
    }
    
    /* Augmentation de l'espacement entre les éléments */
    .card {
        margin-bottom: 1.5rem;
    }
}

/* Optimisation des icônes */
@media (max-width: 767.98px) {
    .icon-lg {
        font-size: 2rem;
    }
    
    .icon-shape {
        width: 3rem;
        height: 3rem;
    }
}

/* Amélioration de l'espacement dans les cartes */
@media (max-width: 767.98px) {
    .card .px-3.px-lg-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .card .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Optimisation des onglets de fonctionnalités */
@media (max-width: 767.98px) {
    .tab-content {
        margin-top: 2rem !important;
    }
    
    .tab-pane img {
        margin-top: 1rem;
    }
}

/* Amélioration de la navigation sur mobile */
@media (max-width: 767.98px) {
    .nav-link span.font-weight-normal {
        font-size: 0.875rem;
    }
}

/* Optimisation des espacements généraux */
@media (max-width: 767.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .mb-lg-6, .mb-lg-7 {
        margin-bottom: 2rem !important;
    }
}

/* Optimisation du formulaire de contact - Règles très spécifiques */
@media (max-width: 767.98px) {
    /* Correction globale pour éviter les débordements */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    /* Correction des marges négatives sur mobile */
    .mt-n8, .mt-n9, .mt-n12, .mt-n13 {
        margin-top: -1rem !important;
    }
    
    /* Correction du container - très spécifique */
    .section .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Correction du row */
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Correction des colonnes */
    .col-12, .col-md-6 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Amélioration de la carte - très spécifique */
    .card.border-light.shadow-soft {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Assurer que le formulaire ne dépasse pas */
    form#contactForm {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Correction des form-group */
    .form-group {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Correction des input-group - règles très fortes */
    .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    .input-group-prepend {
        flex-shrink: 0 !important;
        display: flex !important;
    }
    
    .input-group-text {
        min-width: 45px !important;
        max-width: 45px !important;
        width: 45px !important;
        padding: 0.5rem 0.5rem !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Correction des form-control - règles très fortes */
    .form-control {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Correction spécifique pour les inputs dans input-group */
    .input-group .form-control {
        position: relative !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Correction du select dans input-group */
    .input-group select.form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
    }
    
    /* Correction du textarea */
    textarea.form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        resize: vertical !important;
        min-height: 120px !important;
    }
    
    /* Amélioration des alertes */
    .alert {
        font-size: 0.9rem !important;
        padding: 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .alert strong {
        display: block !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Correction du bouton */
    .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Correction des labels */
    .form-label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Règles ultra-spécifiques pour la page support */
    body main .section .container .row .col-12 .card {
        margin: 0 !important;
        padding: 1rem !important;
    }
    
    body main .section .container .row .col-12 .card .card-body {
        padding: 0.75rem !important;
    }
    
    body main .section .container .row .col-12 .card .card-body form .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    body main .section .container .row .col-12 .card .card-body form .row .col-12,
    body main .section .container .row .col-12 .card .card-body form .row .col-md-6 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Forcer tous les inputs à rester dans les limites */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Correction globale pour éviter les débordements */
@media (max-width: 767.98px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    * {
        box-sizing: border-box;
    }
    
    /* Correction spécifique pour la page support */
    main {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    .section {
        overflow-x: hidden;
    }
}

/* Animation de rebond réduite pour mobile et tablette */
@keyframes bounce-soft {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-2px)
    }
    100% {
        transform: translateY(0)
    }
}

/* Optimisation du preloader sur mobile et tablette */
@media (max-width: 991.98px) {
    .preloader .loader-element {
        overflow: visible !important;
        padding: 5px;
    }
    
    .preloader .loader-element img {
        height: 60px !important;
        max-width: 100%;
        width: auto;
        display: block;
    }
    
    .preloader .loader-element .loader-animated-dot {
        width: 12px !important;
        height: 12px !important;
        right: -30px !important;
        bottom: 0px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10 !important;
        animation: bounce-soft 1s cubic-bezier(.6,-15,.74,.05) infinite !important;
    }
}

@media (max-width: 575.98px) {
    .preloader .loader-element {
        overflow: visible !important;
        padding: 5px;
    }
    
    .preloader .loader-element img {
        height: 50px !important;
        display: block;
    }
    
    .preloader .loader-element .loader-animated-dot {
        width: 10px !important;
        height: 10px !important;
        right: -6px !important;
        bottom: -2px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10 !important;
        animation: bounce-soft 1s cubic-bezier(.6,-12.28,.74,.05) infinite !important;
    }
}

/* Correction du logo dans le footer sur mobile */
@media (max-width: 767.98px) {
    .footer-brand img {
        height: auto !important;
        max-height: 35px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    
    .footer-brand {
        justify-content: center !important;
        margin-bottom: 1rem !important;
    }
    
    .footer .col-lg-4 {
        text-align: center !important;
    }
}

/* Style pour les boutons de choix de vidéo dans la modale */
.video-choice-btn {
    min-width: 200px;
    transition: all 0.3s ease;
}

.video-choice-btn.active {
    opacity: 1;
    transform: scale(1.05);
}

.video-choice-btn:not(.active) {
    opacity: 0.7;
}

@media (max-width: 767.98px) {
    .video-choice-btn {
        width: 100%;
        margin-bottom: 0.75rem;
    }
    
    .video-choice-btn:last-child {
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .video-choice-btn + .video-choice-btn {
        margin-left: 1.5rem;
    }
}

/* Masquer Tawk.to sur mobile et tablette */
@media (max-width: 991.98px) {
    /* Masquer le widget Tawk.to */
    #tawkchat-container,
    iframe[id*="tawk"],
    iframe[src*="tawk.to"],
    #tawkchat-minified-wrapper,
    #tawkchat-minified-container,
    #tawkchat-container iframe,
    [id^="tawk"],
    [class*="tawk"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}