/* ==========================================================================
   SIDI IMMO — Version téléphone (site entier)
   Fichier chargé EN DERNIER. Écran ≤ 768px uniquement.
   ========================================================================== */
@media (max-width: 768px){
    html, body{
        max-width:100% !important;
        overflow-x:hidden !important;
    }
    body{
        padding-bottom:calc(76px + var(--safe-bottom, 0px)) !important;
    }
    *, *::before, *::after{ box-sizing:border-box; }

    img, video, iframe, table{
        max-width:100%;
    }
    iframe{ width:100%; }

    .slogan{ display:none !important; }

    /* ---- Menu ---- */
    .navbar,
    .navbar.scrolled{
        padding-top:calc(10px + var(--safe-top, 0px)) !important;
        padding-bottom:10px !important;
        padding-left:calc(14px + var(--safe-left, 0px)) !important;
        padding-right:calc(14px + var(--safe-right, 0px)) !important;
    }
    .logo-img{ height:42px !important; width:auto !important; }
    .menu-burger{
        width:44px !important;
        height:44px !important;
    }
    .nav-mobile-actions{
        width:min(340px, 90%) !important;
    }
    .nav-mobile-actions a{
        min-height:48px !important;
        width:100%;
    }
    .nav-mobile-actions .nma-call{
        background:linear-gradient(90deg,#d4af37,#f0d78c) !important;
        color:#1a1408 !important;
    }

    /* ---- Espacements généraux ---- */
    section:not(.hero-new):not(.diaspora-hero):not(.apropos-hero):not(.logement-detail-section){
        padding-top:44px !important;
        padding-bottom:44px !important;
        padding-left:calc(16px + var(--safe-left, 0px)) !important;
        padding-right:calc(16px + var(--safe-right, 0px)) !important;
    }
    .sidi-explore,
    .cle-story,
    .suivi,
    .pourquoi,
    .contact,
    .cta-band,
    .sidi-guide,
    .sidi-compare,
    .catalogue-new,
    .diaspora-section,
    .annonces-list-section,
    .apropos-projets,
    .apropos-conditions{
        padding-left:calc(16px + var(--safe-left, 0px)) !important;
        padding-right:calc(16px + var(--safe-right, 0px)) !important;
    }
    .section-header h1,
    .section-header h2{
        font-size:clamp(1.4rem, 6.2vw, 1.85rem) !important;
        line-height:1.2 !important;
    }
    .section-header .text,
    .hero-subtitle{
        font-size:15px !important;
        line-height:1.45 !important;
    }

    /* ---- Accueil : hero ---- */
    .hero-new,
    .hero-new--cinematic,
    .hero-new--slideshow{
        min-height:100svh !important;
        min-height:100dvh !important;
        height:auto !important;
        padding:calc(88px + var(--safe-top, 0px)) calc(16px + var(--safe-left, 0px)) calc(28px + var(--safe-bottom, 0px)) calc(16px + var(--safe-right, 0px)) !important;
        display:flex !important;
        align-items:flex-end !important;
        justify-content:center !important;
        background-attachment:scroll !important;
    }
    .hero-new-content{
        width:100% !important;
        max-width:none !important;
        padding-bottom:8px !important;
    }
    .hero-title{
        font-size:clamp(2.05rem, 11vw, 2.7rem) !important;
        line-height:1.05 !important;
        margin-bottom:8px !important;
    }
    .hero-eyebrow{ font-size:11px !important; }
    .hero-new-buttons{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        max-width:none !important;
        gap:10px !important;
    }
    .hero-new-buttons a,
    .hero-new-buttons .btn-primary-large,
    .hero-new-buttons .btn-secondary-large{
        width:100% !important;
        min-height:48px !important;
        justify-content:center !important;
        text-align:center !important;
        box-sizing:border-box !important;
    }
    .hero-trust{
        font-size:12px !important;
        line-height:1.4 !important;
        max-width:100% !important;
    }
    .hero-slide img{
        width:100% !important;
        height:100% !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:cover !important;
        object-position:center 26% !important;
    }
    .hero-slide-dots{
        bottom:calc(10px + var(--safe-bottom, 0px)) !important;
    }
    .sidi-proof-strip{
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:6px 10px !important;
        padding:12px 16px !important;
        font-size:13px !important;
        line-height:1.4 !important;
        text-align:center !important;
    }

    /* ---- Grilles : une colonne ---- */
    .sidi-explore-grid,
    .sidi-explore-grid--three,
    .process-grid,
    .process-grid--four,
    .pourquoi-grid,
    .pourquoi-grid--three,
    .stats,
    .stats-grid,
    .departement-grid,
    .logements-grid,
    .realisations-grid,
    .about-features,
    .about-container,
    .contact-container,
    .footer-grid,
    .projets-grid,
    .diaspora-steps,
    .diaspora-fears,
    .diaspora-benefits,
    .implantations-grid,
    .annonces-grid,
    .leaders-grid,
    .leaders-grid--three,
    .leaders-grid--four,
    .entreprise-values,
    .sidi-compare-grid{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }
    .photos-grid,
    .entreprise-gallery,
    .suivi-stats{
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }
    .explore-portal{
        min-height:0 !important;
        padding:20px 18px !important;
    }
    .explore-portal strong{ font-size:1.2rem !important; }

    /* Cartes lisibles (pas de verre trop transparent) */
    .explore-portal,
    .process-card,
    .pourquoi-card,
    .contact-card,
    .sidi-guide-card,
    .sidi-compare-card,
    .login-card,
    .dash-card,
    .leader-card,
    .projet-card,
    .annonce-card{
        background:rgba(20,18,16,0.92) !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    /* ---- Carrousel villas : une carte, 2 boutons ---- */
    .carousel-container{
        height:500px !important;
        max-height:none !important;
        width:100% !important;
        overflow:hidden !important;
        padding:0 4px 20px !important;
        touch-action:pan-y !important;
    }
    .carousel-3d{ height:470px !important; }
    .carousel-item,
    .carousel-item.active{
        width:min(340px, calc(100vw - 28px)) !important;
        height:450px !important;
        max-height:none !important;
        left:50% !important;
        top:50% !important;
    }
    .carousel-item.active{
        transform:translate(-50%, -50%) translateZ(0) !important;
        opacity:1 !important;
        pointer-events:auto !important;
    }
    .carousel-item.prev,
    .carousel-item.next{
        opacity:0 !important;
        pointer-events:none !important;
        visibility:hidden !important;
    }
    .carousel-card-new{
        overflow:hidden !important;
        background:rgba(18,16,14,0.94) !important;
    }
    .carousel-card-media,
    .carousel-card-new picture{
        flex:0 0 48% !important;
        height:48% !important;
        min-height:180px !important;
    }
    .carousel-card-media img,
    .carousel-card-new img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center 28% !important;
    }
    .carousel-overlay-new{
        padding:12px 14px 14px !important;
        gap:6px !important;
        overflow:visible !important;
        justify-content:flex-start !important;
    }
    .carousel-overlay-new h3{ font-size:1.05rem !important; margin:0 !important; }
    .carousel-overlay-new p{
        font-size:12px !important;
        margin:0 !important;
        max-height:none !important;
        overflow:visible !important;
    }
    .carousel-quote{ font-size:12px !important; margin:4px 0 0 !important; }
    .carousel-buttons{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        gap:8px !important;
        margin-top:auto !important;
        width:100% !important;
    }
    .carousel-buttons .btn-card,
    .carousel-buttons .btn-whatsapp{
        flex:1 1 0 !important;
        width:auto !important;
        min-width:0 !important;
        min-height:44px !important;
        padding:8px 8px !important;
        font-size:12px !important;
        justify-content:center !important;
        white-space:nowrap !important;
    }
    .carousel-btn{
        width:44px !important;
        height:44px !important;
        font-size:22px !important;
    }
    .carousel-btn.prev{ left:2px !important; }
    .carousel-btn.next{ right:2px !important; }
    .carousel-dots{
        position:relative !important;
        bottom:auto !important;
        left:auto !important;
        transform:none !important;
        margin-top:8px;
        justify-content:center;
    }

    /* ---- Guide villa ---- */
    .sidi-guide-choices{
        grid-template-columns:1fr !important;
    }
    .sidi-guide-choice{
        width:100% !important;
        min-height:48px !important;
        justify-content:center !important;
    }
    .sidi-guide-result-actions,
    .sidi-guide-results-actions,
    .section-next-actions,
    .cta-band-buttons,
    .contact-buttons,
    .hero-buttons{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:10px !important;
    }
    .sidi-guide-result-actions a,
    .sidi-guide-results-actions a,
    .section-next-actions a,
    .cta-band-buttons a,
    .contact-buttons a,
    .btn-primary-large,
    .btn-secondary-large{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;
        justify-content:center !important;
        box-sizing:border-box !important;
    }

    /* ---- Contact / footer ---- */
    .contact-card{ padding:22px 16px !important; }
    .contact-map,
    .contact-map iframe{
        min-height:220px !important;
        height:220px !important;
        aspect-ratio:auto !important;
    }
    .footer{
        padding:40px calc(16px + var(--safe-left, 0px)) calc(20px + var(--safe-bottom, 0px)) calc(16px + var(--safe-right, 0px)) !important;
    }
    .footer-actions{ display:flex; flex-direction:column; gap:10px; }
    .footer-btn{ width:100%; min-height:44px; justify-content:center; }
    .footer-phone-number{
        display:flex !important;
        align-items:center;
        justify-content:center;
        min-height:52px;
        padding:12px 14px;
        border-radius:14px;
        background:linear-gradient(90deg,#d4af37,#f0d78c);
        color:#1a1408 !important;
        font-size:18px;
        font-weight:800;
        text-decoration:none !important;
    }
    .footer-social{ justify-content:flex-start; flex-wrap:wrap; }

    .whatsapp-btn,
    .whatsapp-btn--sticky{
        right:calc(12px + var(--safe-right, 0px)) !important;
        bottom:calc(12px + var(--safe-bottom, 0px)) !important;
        height:52px !important;
        z-index:50;
    }

    /* ---- Fiches villas / N'KA ---- */
    .logement-detail-section,
    .dash-section{
        padding-top:calc(80px + var(--safe-top, 0px)) !important;
        padding-left:calc(12px + var(--safe-left, 0px)) !important;
        padding-right:calc(12px + var(--safe-right, 0px)) !important;
        padding-bottom:24px !important;
    }
    .logement-detail-card,
    .projet-sheet{
        padding:14px 12px 18px !important;
        border-radius:16px !important;
        max-width:100% !important;
    }
    .projet-page .logement-hero,
    .logement-hero{
        height:auto !important;
        min-height:36svh !important;
        max-height:none !important;
        aspect-ratio:4 / 3 !important;
        margin-bottom:16px !important;
        background-size:cover !important;
        background-position:center 28% !important;
    }
    .logement-hero-content{
        left:14px !important;
        right:14px !important;
        bottom:14px !important;
    }
    .logement-hero h1{
        font-size:clamp(1.65rem, 8vw, 2.3rem) !important;
    }
    .logement-specs-grid{
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }
    .spec-item{ padding:14px 8px !important; }
    .projet-duo,
    .projet-duo--immersif,
    .projet-duo--plans{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }
    .projet-duo--plans .projet-media img,
    .projet-duo--plans img,
    .projet-chapter--plan img,
    .plan-image-container img,
    .projet-plan-img{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        object-fit:contain !important;
        background:#fff !important;
    }
    .projet-actions--call{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        z-index:70 !important;
        margin:0 !important;
        padding:10px 12px calc(10px + var(--safe-bottom, 0px)) !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
        background:rgba(12,11,9,0.96) !important;
        border-top:1px solid rgba(212,175,55,0.28) !important;
    }
    .projet-actions--call .btn-primary-large,
    .projet-actions--call .btn-secondary-large{
        min-height:48px !important;
        font-size:14px !important;
        padding:12px 8px !important;
    }
    .projet-actions--call .projet-actions-fiche{
        grid-column:1 / -1;
        color:#f0d78c !important;
    }
    body:has(.projet-actions--call){
        padding-bottom:calc(108px + var(--safe-bottom, 0px)) !important;
    }
    body:has(.projet-actions--call) .whatsapp-btn--sticky{
        display:none !important;
    }
    .projet-nav{
        top:calc(54px + var(--safe-top, 0px)) !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
        border-radius:16px !important;
    }
    .projet-nav-list{ flex-wrap:nowrap !important; }
    .projet-nav-list a{
        white-space:nowrap;
        min-height:44px;
    }
    .projet-lightbox{
        padding:56px 8px 16px !important;
        overflow:auto !important;
        align-items:flex-start !important;
    }
    .projet-lightbox img{
        width:100% !important;
        max-width:100% !important;
        max-height:none !important;
        height:auto !important;
        background:#fff !important;
    }

    /* ---- Annonces ---- */
    .annonces-filters{
        grid-template-columns:1fr !important;
        padding:16px !important;
        gap:12px !important;
    }
    .af-actions{ flex-direction:column; align-items:stretch !important; }
    .annonce-card-photo{
        height:auto !important;
        aspect-ratio:16 / 10;
        max-height:none !important;
    }
    .annonce-card-photo img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
    }

    /* ---- Diaspora / À propos ---- */
    .diaspora-hero,
    .apropos-hero{
        min-height:70svh !important;
        padding:calc(110px + var(--safe-top, 0px)) 16px 48px !important;
        background-attachment:scroll !important;
        background-size:cover !important;
        background-position:center 28% !important;
    }
    .diaspora-hero h1,
    .apropos-hero h1{
        font-size:clamp(1.7rem, 8vw, 2.4rem) !important;
    }
    .conditions-photo{
        height:min(46vh, 340px) !important;
    }

    /* ---- Formulaires / espace client ---- */
    .login-card,
    .dash-card{
        padding:22px 16px !important;
        max-width:100% !important;
        margin-left:12px;
        margin-right:12px;
    }
    input, select, textarea, button{
        max-width:100%;
    }
    input, select, textarea{
        font-size:16px !important;
    }

    /* ---- Boutons partout ---- */
    .btn-primary,
    .btn-secondary,
    .btn-card,
    .btn-whatsapp,
    .footer-btn{
        min-height:44px;
    }
}

@media (max-width: 390px){
    .hero-title{ font-size:clamp(1.85rem, 11vw, 2.2rem) !important; }
    .carousel-container{ height:480px !important; }
    .carousel-item,
    .carousel-item.active{ height:430px !important; }
    .logo-img{ height:38px !important; }
}