/* ========================================
   OPTIMISATION MOBILE - PAGE D'ACCUEIL
   ======================================== */

/* Hero Section Mobile */
@media (max-width: 767.98px) {
    /* Hero général */
    .sg-hero {
        min-height: 40vh !important;
        padding: 40px 0 !important;
        margin-bottom: 24px !important;
    }

    /* Titre hero plus petit sur mobile */
    .sg-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Sous-titre hero */
    .sg-hero-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Boutons hero - Stack vertical */
    .sg-hero-content .d-flex {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .sg-hero-content .btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }

    /* Carousel hero - caché sur mobile pour libérer l'espace */
    .sg-hero-carousel {
        display: none !important;
    }

    .sg-carousel-image img {
        max-height: 250px;
        object-fit: cover;
    }

    /* Formulaire de recherche - Full width sur mobile */
    #sg-search-float {
        position: static !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        padding: 0 15px;
    }

    #sg-search-float .bg-white {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    /* Champs de recherche en colonne */
    #sg-search-float .col-md-3 {
        margin-bottom: 12px;
    }

    #sg-search-float label {
        font-size: 0.875rem;
        margin-bottom: 6px;
    }

    #sg-search-float .form-select,
    #sg-search-float .btn {
        font-size: 0.9rem;
        padding: 12px 16px;
    }

    /* Progress indicators - Caché sur mobile */
    .sg-hero-progress {
        display: none !important;
    }

    /* Navigation arrows carousel - Plus petits */
    .sg-carousel-prev,
    .sg-carousel-next {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }
}

/* Section Biens en vedette - Mobile */
@media (max-width: 767.98px) {
    .sg-section {
        padding: 40px 0 !important;
    }

    .sg-section-title h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .sg-section-subtitle {
        font-size: 0.9rem !important;
    }

    /* Grid responsive */
    .sg-grid-3 {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Cards de propriétés */
    .sg-property-card-compact {
        margin-bottom: 0 !important;
    }

    .sg-property-image-container {
        height: 220px !important;
    }

    .sg-property-compact-info {
        padding: 16px !important;
    }

    .sg-property-title {
        font-size: 1.1rem !important;
    }

    .sg-property-price {
        font-size: 1rem !important;
    }

    .sg-property-actions-inline {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start !important;
    }

    .sg-btn-compact {
        width: 100%;
        justify-content: center;
    }
}

/* Section Services - Mobile */
@media (max-width: 767.98px) {
    .svc-card {
        padding: 20px !important;
        margin-bottom: 16px;
    }

    .svc-icon {
        width: 54px !important;
        height: 54px !important;
        font-size: 1.3rem !important;
    }

    .svc-title {
        font-size: 1.15rem !important;
        margin: 10px 0 8px !important;
    }

    .svc-desc {
        font-size: 0.9rem !important;
    }

    /* Services en une colonne sur mobile */
    .sg-section .row.g-4 > [class*="col-"] {
        margin-bottom: 16px;
    }
}

/* Témoignages - Mobile */
@media (max-width: 767.98px) {
    .sg-card {
        margin-bottom: 20px;
    }

    .sg-card-body {
        padding: 20px !important;
    }

    .sg-card-body p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .sg-card-body h6 {
        font-size: 0.95rem;
    }
}

/* Section Contact - Mobile */
@media (max-width: 767.98px) {
    #contact {
        padding: 40px 0 !important;
    }

    #contact h2 {
        font-size: 1.6rem !important;
        margin-bottom: 1rem !important;
    }

    #contact .lead {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }

    #contact .col-md-6 {
        margin-bottom: 20px;
    }

    #contact .bg-white {
        padding: 24px !important;
        margin-top: 24px;
    }

    #contact h4 {
        font-size: 1.2rem !important;
    }
}

/* Modal - Mobile */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 10px !important;
    }

    .modal-content {
        border-radius: 16px !important;
    }

    .modal-header {
        padding: 16px 20px !important;
    }

    .modal-body {
        padding: 20px !important;
    }

    .modal-title {
        font-size: 1.1rem !important;
    }

    .modal-body .col-md-6 {
        margin-bottom: 12px;
    }

    .sg-form-control {
        font-size: 0.95rem !important;
        padding: 12px 16px !important;
    }

    .modal-footer {
        padding: 16px 20px !important;
        flex-direction: column;
        gap: 10px;
    }

    .modal-footer .sg-btn {
        width: 100%;
        margin: 0 !important;
    }
}

/* Boutons généraux - Mobile */
@media (max-width: 767.98px) {
    .sg-btn-large,
    .btn-lg {
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
    }

    .sg-btn {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
}

/* Amélioration de la lisibilité sur mobile */
@media (max-width: 767.98px) {
    body {
        font-size: 14px !important;
    }

    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
    }

    /* Espacements réduits */
    .mb-4,
    .my-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-5,
    .my-5 {
        margin-bottom: 2rem !important;
    }

    .pt-5,
    .py-5 {
        padding-top: 2rem !important;
    }

    .pb-5,
    .py-5 {
        padding-bottom: 2rem !important;
    }
}

/* Touch-friendly - Zones de clic plus grandes */
@media (max-width: 767.98px) {
    a,
    button,
    .btn,
    .sg-carousel-dot {
        min-height: 44px;
        min-width: 44px;
    }

    /* Dots du carousel */
    .sg-carousel-dots {
        gap: 8px;
        padding: 10px 0;
    }

    .sg-carousel-dot {
        width: 10px !important;
        height: 10px !important;
    }
}

/* Performance - Réduire les animations sur mobile */
@media (max-width: 767.98px) {
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }

    .sg-hero-slide {
        animation: none !important;
    }

    /* Désactiver Ken Burns sur mobile pour performance */
    @keyframes sg-kenburns {
        0%, 100% {
            transform: scale(1) translate3d(0, 0, 0);
        }
    }
}

/* Carousel mobile - Swipe gestures friendly */
@media (max-width: 767.98px) {
    .sg-carousel-container {
        touch-action: pan-y pinch-zoom;
    }

    .sg-carousel-slide {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Fix overflow sur mobile */
@media (max-width: 767.98px) {
    body {
        overflow-x: hidden !important;
    }

    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Images responsive */
@media (max-width: 767.98px) {
    img {
        max-width: 100%;
        height: auto;
    }

    .img-fluid {
        width: 100%;
    }
}

/* Amélioration des cards sur très petits écrans */
@media (max-width: 375px) {
    .sg-hero-title {
        font-size: 1.5rem !important;
    }

    .svc-card {
        padding: 16px !important;
    }

    .sg-card-body {
        padding: 16px !important;
    }

    .modal-body {
        padding: 16px !important;
    }
}

/* Landscape mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .sg-hero {
        min-height: 70vh !important;
    }

    .sg-hero-carousel {
        max-height: 200px;
    }
}

/* Dark mode - Optionnel */
@media (prefers-color-scheme: dark) and (max-width: 767.98px) {
    .bg-white {
        background-color: #1a1a1a !important;
    }

    .sg-form-control {
        background-color: #2a2a2a !important;
        border-color: #3a3a3a !important;
        color: #fff !important;
    }
}

/* Amélioration du contraste pour accessibilité */
@media (max-width: 767.98px) {
    .text-muted,
    .sg-text-gray {
        color: #666 !important;
    }

    /* Assurer une bonne lisibilité */
    .sg-hero-content {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}