/* ==========================================================================
   SIDI IMMO — Adaptations iPhone / iPad / iOS + Android
   Safe areas, zones tactiles, typo native, tablettes
   ========================================================================== */

:root{
    --safe-top:env(safe-area-inset-top, 0px);
    --safe-right:env(safe-area-inset-right, 0px);
    --safe-bottom:env(safe-area-inset-bottom, 0px);
    --safe-left:env(safe-area-inset-left, 0px);
    --touch-min:44px; /* iOS HIG */
}

/* ---- Détection coarse pointer (téléphones & tablettes tactiles) ---- */
@media (hover:none) and (pointer:coarse){
    :root{ --touch-min:48px; } /* Android Material ~48dp */

    a, button, .btn-primary, .btn-secondary, .btn-primary-large, .btn-secondary-large,
    .btn-card, .btn-whatsapp, .footer-btn, .menu-burger, .carousel-btn,
    .hero-chip, .explore-portal, .nma-call, .nma-wa{
        min-height:var(--touch-min);
    }

    input, select, textarea{
        font-size:16px !important; /* évite le zoom auto iOS */
        border-radius:12px;
    }

    .btn-primary-large,
    .btn-secondary-large{
        padding:14px 22px;
        border-radius:14px;
    }
}

/* ---- Navbar + encoche / Dynamic Island ---- */
.navbar{
    padding-top:calc(14px + var(--safe-top));
    padding-left:calc(20px + var(--safe-left));
    padding-right:calc(20px + var(--safe-right));
}

@media(max-width:768px){
    .navbar,
    .navbar.scrolled{
        padding-top:calc(12px + var(--safe-top));
        padding-bottom:12px;
        padding-left:calc(16px + var(--safe-left));
        padding-right:calc(16px + var(--safe-right));
        backdrop-filter:saturate(1.5) blur(20px);
        -webkit-backdrop-filter:saturate(1.5) blur(20px);
        background:rgba(12,11,9,0.55);
        border-bottom:1px solid rgba(255,255,255,0.1);
    }

    .nav-links{
        padding-top:calc(88px + var(--safe-top));
        padding-bottom:calc(28px + var(--safe-bottom));
        padding-left:calc(20px + var(--safe-left));
        padding-right:calc(20px + var(--safe-right));
    }

    .menu-burger{
        width:44px;
        height:44px;
        align-items:center;
        justify-content:center;
    }

    .nav-mobile-actions a{
        min-height:48px;
        border-radius:14px;
    }

    .hero-new,
    .hero-new--cinematic{
        min-height:100svh;
        min-height:100dvh;
        padding-top:calc(96px + var(--safe-top));
        padding-bottom:calc(40px + var(--safe-bottom));
        padding-left:calc(20px + var(--safe-left));
        padding-right:calc(20px + var(--safe-right));
    }

    .hero-new-buttons{
        display:flex;
        flex-direction:column;
        width:100%;
        max-width:420px;
        gap:12px;
    }
    .hero-new-buttons .btn-primary-large,
    .hero-new-buttons .btn-secondary-large{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .hero-chips{
        flex-wrap:wrap;
        justify-content:center;
        gap:8px;
    }

    .carousel-container{
        touch-action:pan-y;
    }

    section{
        padding-left:calc(18px + var(--safe-left));
        padding-right:calc(18px + var(--safe-right));
    }

    .footer{
        padding-bottom:calc(28px + var(--safe-bottom));
        padding-left:calc(18px + var(--safe-left));
        padding-right:calc(18px + var(--safe-right));
    }

    .footer-bottom{
        padding-bottom:calc(8px + var(--safe-bottom));
    }

    .whatsapp-btn,
    .whatsapp-btn--sticky{
        right:calc(12px + var(--safe-right));
        left:auto;
        bottom:calc(14px + var(--safe-bottom));
        width:auto;
        min-width:0;
        height:52px;
        padding:0 16px 0 12px;
        border-radius:999px;
        box-shadow:0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
    }
    .whatsapp-btn-label{
        display:inline !important;
        position:static !important;
        width:auto !important;
        height:auto !important;
        clip:auto !important;
        overflow:visible !important;
        font-size:13px;
    }
    body{ padding-bottom:calc(72px + var(--safe-bottom)); }

    .contact-buttons{
        flex-direction:column;
    }
    .contact-buttons a{
        width:100%;
        justify-content:center;
        min-height:48px;
    }

    .cta-band-buttons{
        flex-direction:column;
        width:100%;
    }
    .cta-band-buttons a{
        width:100%;
        justify-content:center;
    }

    .section-next-actions{
        flex-direction:column;
    }
    .section-next-actions a{
        width:100%;
        justify-content:center;
    }
}

/* ---- iPhone petit (SE / mini) ---- */
@media(max-width:390px){
    .hero-title{ font-size:clamp(2.2rem, 12vw, 2.8rem); }
    .hero-subtitle{ font-size:1.05rem; }
    .explore-portal{ padding:20px 18px; }
    .logo-img{ height:42px; }
}

/* ---- iPad / tablettes ---- */
@media(min-width:768px) and (max-width:1180px){
    .navbar{
        padding-left:calc(24px + var(--safe-left));
        padding-right:calc(24px + var(--safe-right));
    }

    .sidi-explore-grid,
    .sidi-explore-grid--three{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .process-grid,
    .process-grid--four{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .pourquoi-grid--three{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .hero-new-content{
        max-width:640px;
    }

    .contact-container{
        grid-template-columns:1fr 1fr;
        gap:28px;
    }

    .carousel-container{
        height:520px;
    }
}

@media(min-width:769px) and (max-width:900px){
    .menu-burger{ display:flex; }
    .btn-appel{ display:none; }
    .nav-links{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100dvh;
        max-height:100dvh;
        background:rgba(10,9,8,0.98);
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:24px;
        padding:calc(88px + var(--safe-top)) 24px calc(32px + var(--safe-bottom));
        margin:0;
        z-index:10001;
        transform:translate3d(-100%, 0, 0);
        transition:transform 0.4s var(--ease), visibility 0s linear 0.4s;
        visibility:hidden;
        pointer-events:none;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    .nav-links.active{
        transform:translate3d(0, 0, 0);
        visibility:visible;
        pointer-events:auto;
        transition:transform 0.4s var(--ease), visibility 0s linear 0s;
    }
    .nav-links a{
        font-size:18px;
        opacity:0;
        transform:translate3d(0, 12px, 0);
    }
    .nav-links.active a{
        opacity:1;
        transform:translate3d(0, 0, 0);
    }
    .nav-mobile-actions{ display:flex; }
}

/* ---- iOS (Safari) : glass + fluidité ---- */
html.is-ios{
    -webkit-text-size-adjust:100%;
}
html.is-ios body{
    font-family:var(--font-body), -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}
html.is-ios .navbar,
html.is-ios .navbar.scrolled{
    backdrop-filter:saturate(180%) blur(24px) !important;
    -webkit-backdrop-filter:saturate(180%) blur(24px) !important;
    background:rgba(12,11,9,0.42) !important;
}
html.is-ios .btn-primary-large,
html.is-ios .btn-secondary-large,
html.is-ios .explore-portal,
html.is-ios .contact-card,
html.is-ios .process-card,
html.is-ios .pourquoi-card{
    border-radius:18px;
}
html.is-ios .whatsapp-btn{
    border-radius:22px;
}
html.is-ios .nav-mobile-actions a{
    border-radius:14px;
}

/* ---- Android (Chrome) : glass léger + cibles 48dp ---- */
html.is-android{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}
html.is-android body{
    font-family:var(--font-body), Roboto, 'Noto Sans', system-ui, sans-serif;
}
html.is-android .btn-primary-large,
html.is-android .btn-secondary-large,
html.is-android .footer-btn,
html.is-android .explore-portal{
    border-radius:14px;
}
html.is-android .whatsapp-btn{
    border-radius:18px;
    width:58px;
    height:58px;
}
html.is-android .menu-burger{
    width:48px;
    height:48px;
}
html.is-android .navbar,
html.is-android .navbar.scrolled{
    backdrop-filter:blur(16px) saturate(1.3) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.3) !important;
    background:rgba(12,11,9,0.58) !important;
}

/* ---- Mode paysage téléphone ---- */
@media(max-height:500px) and (orientation:landscape){
    .hero-new,
    .hero-new--cinematic{
        min-height:auto;
        padding-top:calc(72px + var(--safe-top));
        padding-bottom:24px;
    }
    .hero-scroll{ display:none; }
    .whatsapp-btn{
        width:48px;
        height:48px;
        bottom:calc(12px + var(--safe-bottom));
    }
}

/* ---- Réduction motion ---- */
@media (prefers-reduced-motion: reduce){
    html.is-ios .navbar,
    html.is-android .navbar,
    html.is-touch .navbar{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        background:rgba(12,11,9,0.92) !important;
    }
    *,
    *::before,
    *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}

/* ==========================================================================
   CORRECTIONS 2026 — Images + anomalies mobile / tablette / iPhone / Android
   ========================================================================== */

/* Empêche le débordement horizontal (anomalie fréquente mobile) */
html, body{
    max-width:100%;
    overflow-x:hidden;
}
img, video, iframe{
    max-width:100%;
    height:auto;
}
svg:not(.icon-svg){
    max-width:100%;
    height:auto;
}
.icon-svg{
    max-width:none;
    flex-shrink:0;
}
.plan-image-container,
.logement-detail-card,
.carousel-container,
.contact-info{
    max-width:100%;
}

/* Images plans / fiches : lisibles sans déborder */
.plan-image-container{
    overflow:hidden;
    border-radius:14px;
}
.plan-image-container img{
    width:100%;
    height:auto;
    max-height:min(88vh, 1200px);
    object-fit:contain;
    display:block;
    background:rgba(0,0,0,0.25);
}
/* Plans métier : jamais bridés trop bas */
.projet-plan-frame img,
.projet-chapter--plan .plan-image-container img{
    max-height:none !important;
    background:transparent;
}

/* Hero logement : ratio stable sur mobile */
.logement-hero{
    background-size:cover !important;
    background-position:center !important;
}

/* Boutons contact des fiches */
.contact-info{
    gap:12px;
}
.contact-info .btn-primary-large,
.contact-info .btn-secondary-large{
    max-width:100%;
}

/* ---- Téléphones ---- */
@media(max-width:768px){
    .catalogue-new--sync-bg{
        padding-left:0;
        padding-right:0;
    }
    .catalogue-new--sync-bg .section-header,
    .catalogue-new--sync-bg .carousel-container{
        padding-left:calc(18px + var(--safe-left));
        padding-right:calc(18px + var(--safe-right));
    }
    .catalogue-bg-layer{
        background-position:center center;
        filter:blur(2px) saturate(1.12) brightness(0.9);
        opacity:0;
    }
    .catalogue-bg-layer.is-active{ opacity:0.95; }
    .catalogue-bg-veil{
        background:linear-gradient(
            180deg,
            rgba(7,8,11,0.32) 0%,
            rgba(7,8,11,0.14) 40%,
            rgba(7,8,11,0.48) 100%
        );
    }
    .catalogue-immersif .carousel-item.active .carousel-card-new{
        transform:translateY(-4px);
    }
    .catalogue-bg-caption{
        font-size:11px;
        line-height:1.4;
        padding:7px 12px;
        max-width:92%;
    }

    .carousel-container{
        height:min(440px, 68vh);
        width:100%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
        touch-action:pan-y;
        padding:0 4px;
    }
    .carousel-item{
        width:min(300px, calc(100vw - 48px));
        height:min(400px, 62vh);
        pointer-events:none;
    }
    .carousel-item.active{
        pointer-events:auto;
        z-index:30;
    }
    .carousel-card-new{
        overflow:hidden !important;
        display:flex !important;
        flex-direction:column !important;
        border-radius:20px !important;
    }
    .carousel-card-new img,
    .catalogue-immersif .carousel-card-new img{
        height:42% !important;
        max-height:160px !important;
        min-height:130px !important;
        object-fit:cover !important;
        object-position:center !important;
        flex-shrink:0 !important;
        width:100% !important;
        border-radius:20px 20px 0 0 !important;
    }
    .carousel-overlay-new{
        padding:14px 14px 16px !important;
        gap:10px !important;
        overflow:hidden !important;
        flex:1 1 auto !important;
        min-height:0 !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-start !important;
        background:linear-gradient(180deg, rgba(18,16,14,0.55), rgba(12,11,9,0.72)) !important;
    }
    .carousel-overlay-new h3{
        font-size:clamp(1.1rem, 4.8vw, 1.3rem) !important;
        margin:0 !important;
        line-height:1.2 !important;
    }
    .carousel-overlay-new p{
        flex-wrap:wrap;
        gap:6px 10px;
        font-size:12px;
        margin:0;
    }
    .carousel-quote{
        font-size:11px !important;
        display:block !important;
        margin:0 !important;
        opacity:0.9;
    }
    .carousel-buttons{
        flex-direction:column !important;
        gap:8px !important;
        margin-top:auto !important;
        flex-shrink:0 !important;
        position:relative;
        z-index:50;
        width:100%;
    }
    .carousel-buttons .btn-card,
    .carousel-buttons .btn-whatsapp{
        width:100% !important;
        justify-content:center !important;
        min-height:44px !important;
        font-size:13px !important;
        padding:12px 14px !important;
        pointer-events:auto !important;
        z-index:51;
        border-radius:999px !important;
    }
    .carousel-btn{
        width:44px !important;
        height:44px !important;
        top:36% !important;
        z-index:80 !important;
        font-size:22px !important;
        background:linear-gradient(145deg, rgba(212,175,55,0.95), rgba(240,215,140,0.85)) !important;
        color:#1a1408 !important;
        border:1px solid rgba(240,215,140,0.65) !important;
        box-shadow:0 8px 22px rgba(0,0,0,0.35) !important;
    }
    .carousel-btn.prev{ left:max(6px, var(--safe-left)) !important; }
    .carousel-btn.next{ right:max(6px, var(--safe-right)) !important; }
    .carousel-dots{
        bottom:8px;
        flex-wrap:wrap;
        justify-content:center;
        gap:8px;
        padding:0 12px;
        z-index:90;
    }

    .logement-detail-section{
        padding-top:calc(100px + var(--safe-top));
        padding-bottom:calc(72px + var(--safe-bottom));
        padding-left:calc(14px + var(--safe-left));
        padding-right:calc(14px + var(--safe-right));
    }
    .logement-detail-card{
        padding:20px 14px;
        border-radius:16px;
    }
    .logement-hero{
        height:auto;
        aspect-ratio:16 / 10;
        min-height:170px;
        max-height:230px;
        margin-bottom:20px;
        border-radius:14px;
    }
    .logement-hero-content{
        left:16px;
        right:16px;
        bottom:16px;
    }
    .logement-hero h1{
        font-size:clamp(1.6rem, 7vw, 2.2rem);
    }
    .logement-hero p{
        font-size:14px;
    }
    .logement-specs-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }
    .spec-item{
        padding:18px 12px;
    }
    .spec-item h3{ font-size:14px; }
    .spec-item p{ font-size:13px; }

    .plan-image-container{
        margin-left:0;
        margin-right:0;
    }
    .plan-image-container img{
        border-radius:12px;
        width:100%;
        max-width:100%;
        height:auto;
        max-height:min(48vh, 320px);
        object-fit:contain;
        background:rgba(0,0,0,0.2);
    }
    .projet-plan-frame{
        max-height:min(58vh, 420px) !important;
        overflow:auto !important;
    }
    .projet-plan-frame img,
    .projet-chapter--plan .plan-image-container img{
        max-height:none !important;
        min-height:0 !important;
    }

    .contact-info{
        flex-direction:column;
        align-items:stretch !important;
    }
    .contact-info .btn-primary-large,
    .contact-info .btn-secondary-large{
        width:100%;
        justify-content:center;
        text-align:center;
        box-sizing:border-box;
    }

    /* Badges Bouctou / Sahel */
    .bouctou2-badge,
    .bouctou1-badge,
    .sahel-badge{
        font-size:11px;
        padding:7px 12px;
        max-width:100%;
        white-space:normal;
        line-height:1.35;
    }

    .sidi-explore-grid,
    .sidi-explore-grid--three{
        grid-template-columns:1fr;
        gap:12px;
    }
    .explore-portal{
        min-height:auto;
    }

    /* WhatsApp flottant : ne masque pas les CTA bas de page */
    .whatsapp-btn{
        z-index:90;
    }
    .logement-detail-section .contact-info,
    .cta-band,
    .footer{
        padding-bottom:calc(28px + 64px + var(--safe-bottom));
    }
}

/* ---- Petits iPhone (SE / mini) ---- */
@media(max-width:390px){
    .carousel-item{
        width:min(236px, calc(100vw - 52px));
        height:330px;
    }
    .carousel-container{ height:390px; }
    .carousel-card-new img{ max-height:130px; height:40%; }
    .carousel-overlay-new h3{ font-size:1.05rem; }
    .logement-hero{
        min-height:150px;
        max-height:200px;
    }
    .logement-specs-grid{
        grid-template-columns:1fr 1fr;
    }
    .catalogue-bg-caption{ font-size:10px; }
    .plan-image-container img{
        max-height:min(42vh, 260px);
    }
}

/* ---- Tablettes ---- */
@media(min-width:768px) and (max-width:1180px){
    .catalogue-bg-veil{
        background:linear-gradient(
            180deg,
            rgba(7,8,11,0.52) 0%,
            rgba(7,8,11,0.30) 45%,
            rgba(7,8,11,0.74) 100%
        );
    }
    .carousel-item{
        width:320px;
        height:450px;
    }
    .logement-hero{
        height:auto;
        aspect-ratio:16 / 9;
        min-height:340px;
        max-height:480px;
    }
    .logement-specs-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
    .plan-image-container img{
        max-height:min(75vh, 820px);
    }
    .contact-info{
        justify-content:center;
    }
}

/* ---- iOS : rendu images + fond carrousel ---- */
html.is-ios .carousel-card-new,
html.is-ios .plan-image-container img,
html.is-ios .logement-hero{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
html.is-ios .catalogue-bg-layer{
    /* évite les bugs de paint iOS sur background-size cover */
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

/* ---- Android : cibles tactiles carrousel ---- */
html.is-android .carousel-btn{
    width:48px;
    height:48px;
}
html.is-android .carousel-dot{
    width:10px;
    height:10px;
}

/* ---- Paysage téléphone : carrousel compact ---- */
@media(max-height:500px) and (orientation:landscape){
    .carousel-container{ height:340px; }
    .carousel-item{ width:220px; height:300px; }
    .catalogue-bg-caption{ display:none; }
    .logement-hero{
        min-height:180px;
        max-height:240px;
    }
}

/* ==========================================================================
   HERO SLIDESHOW — téléphones / tablettes (toutes tailles)
   ========================================================================== */

/* Cibles tactiles + perf sur appareils tactiles */
@media (hover:none) and (pointer:coarse){
    .hero-slide-dot{
        min-height:44px;
        touch-action:manipulation;
    }
    .hero-slide{
        /* Ken Burns plus léger = moins de jank GPU */
        transform:scale(1.03);
        will-change:opacity;
    }
    .hero-slide.is-active{ transform:scale(1); }
    .hero-new--slideshow .live-annonces-pill{
        max-width:100%;
        justify-content:center;
        text-align:center;
        white-space:normal;
        line-height:1.35;
        padding:10px 14px;
    }
}

/* ---- Petits téléphones (SE / mini / ~360–390) ---- */
@media(max-width:390px){
    .hero-new--slideshow{
        padding-top:calc(88px + var(--safe-top));
        padding-bottom:calc(56px + var(--safe-bottom));
    }
    .hero-new--slideshow .hero-eyebrow{
        font-size:10px;
        letter-spacing:0.16em;
        margin-bottom:14px;
        gap:6px;
    }
    .hero-new--slideshow .hero-eyebrow::before,
    .hero-new--slideshow .hero-eyebrow::after{ width:18px; }
    .hero-new--slideshow .hero-title{
        font-size:clamp(2rem, 11.5vw, 2.55rem);
        margin-bottom:10px;
        line-height:1.05;
    }
    .hero-new--slideshow .hero-subtitle{
        font-size:0.98rem;
        margin-bottom:10px;
        line-height:1.35;
    }
    .hero-new--slideshow .hero-description{
        font-size:14px;
        margin-bottom:18px;
        line-height:1.55;
        max-width:18.5em;
    }
    .hero-new--slideshow .live-annonces-pill{
        font-size:12px;
        margin-bottom:14px;
    }
    .hero-new--slideshow .hero-new-buttons{ gap:10px; max-width:100%; }
    .hero-new--slideshow .btn-primary-large,
    .hero-new--slideshow .btn-secondary-large{
        padding:13px 16px;
        font-size:14px;
    }
    .hero-trust{
        font-size:10px;
        margin-top:14px;
        letter-spacing:0.03em;
    }
    .hero-slide-dots{ gap:5px; }
    .hero-slide-dot{ width:16px; min-width:16px; }
    .hero-slide-dot.is-active{ width:28px; min-width:28px; }
}

/* ---- Téléphones standards ---- */
@media(max-width:767px){
    .hero-new--slideshow .hero-title{
        font-size:clamp(2.35rem, 11vw, 3.1rem);
    }
    .hero-new--slideshow .hero-subtitle{
        font-size:clamp(1rem, 3.8vw, 1.2rem);
        padding:0 4px;
    }
    .hero-new--slideshow .hero-description{
        padding:0 2px;
    }
    .hero-new--slideshow .hero-new-buttons{
        width:100%;
        max-width:380px;
        margin-left:auto;
        margin-right:auto;
    }
    .hero-new--slideshow .hero-new-buttons .btn-primary-large,
    .hero-new--slideshow .hero-new-buttons .btn-secondary-large{
        width:100%;
        min-height:48px;
        box-sizing:border-box;
    }
}

/* ---- Grands téléphones / phablettes ---- */
@media(min-width:391px) and (max-width:480px){
    .hero-new--slideshow .hero-new-content{ max-width:400px; }
    .hero-new--slideshow .hero-description{ font-size:15px; }
}

/* ---- Tablettes portrait (iPad mini / Air) ---- */
@media(min-width:768px) and (max-width:1024px) and (orientation:portrait){
    .hero-new--slideshow{
        align-items:flex-end;
        justify-content:center;
        padding:calc(120px + var(--safe-top)) calc(32px + var(--safe-left)) calc(72px + var(--safe-bottom)) calc(32px + var(--safe-right));
        min-height:100svh;
        min-height:100dvh;
    }
    .hero-new--slideshow .hero-new-content{
        max-width:560px;
        padding-bottom:40px;
    }
    .hero-new--slideshow .hero-title{
        font-size:clamp(3.2rem, 7vw, 4.4rem);
    }
    .hero-new--slideshow .hero-subtitle{ font-size:1.35rem; }
    .hero-new--slideshow .hero-description{
        font-size:16.5px;
        max-width:420px;
        margin-bottom:24px;
    }
    .hero-new--slideshow .hero-new-buttons{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        max-width:100%;
        gap:14px;
    }
    .hero-new--slideshow .hero-new-buttons .btn-primary-large,
    .hero-new--slideshow .hero-new-buttons .btn-secondary-large{
        width:auto;
        min-width:200px;
        min-height:48px;
    }
    .hero-slide{ background-position:center 35%; }
    .hero-slide-dots{ bottom:calc(24px + var(--safe-bottom)); }
    .hero-slide-dot{ width:26px; height:3px; min-height:0; }
    .hero-slide-dot.is-active{ width:40px; }
    .hero-trust{ font-size:12px; letter-spacing:0.07em; }
}

/* ---- Tablettes paysage / iPad Pro ---- */
@media(min-width:768px) and (max-width:1366px) and (orientation:landscape){
    .hero-new--slideshow{
        align-items:center;
        padding:calc(88px + var(--safe-top)) calc(40px + var(--safe-left)) calc(48px + var(--safe-bottom)) calc(40px + var(--safe-right));
    }
    .hero-new--slideshow .hero-new-content{
        max-width:640px;
        padding-bottom:20px;
    }
    .hero-new--slideshow .hero-scrim{
        height:min(55vh, 420px);
        bottom:8%;
    }
    .hero-new--slideshow .hero-title{
        font-size:clamp(2.8rem, 5.5vw, 4rem);
        margin-bottom:12px;
    }
    .hero-new--slideshow .hero-subtitle{
        font-size:clamp(1.1rem, 2vw, 1.35rem);
        margin-bottom:10px;
    }
    .hero-new--slideshow .hero-description{
        margin-bottom:18px;
        font-size:15.5px;
    }
    .hero-new--slideshow .live-annonces-pill{ margin-bottom:14px; }
    .hero-new--slideshow .hero-new-buttons{
        flex-direction:row;
        justify-content:center;
        gap:14px;
    }
    .hero-new--slideshow .hero-new-buttons .btn-primary-large,
    .hero-new--slideshow .hero-new-buttons .btn-secondary-large{
        width:auto;
        min-width:190px;
    }
    .hero-trust{ margin-top:18px; }
    .hero-slide-dots{ bottom:calc(18px + var(--safe-bottom)); }
}

/* ---- Paysage téléphone : hero compact lisible ---- */
@media(max-height:500px) and (orientation:landscape){
    .hero-new--slideshow{
        min-height:100svh;
        min-height:100dvh;
        align-items:center;
        justify-content:center;
        padding:calc(64px + var(--safe-top)) calc(20px + var(--safe-left)) calc(36px + var(--safe-bottom)) calc(20px + var(--safe-right));
    }
    .hero-new--slideshow .hero-scrim{
        height:min(90vh, 360px);
        bottom:0;
        opacity:0.9;
    }
    .hero-new--slideshow .hero-eyebrow{ margin-bottom:8px; font-size:10px; }
    .hero-new--slideshow .hero-title{
        font-size:clamp(1.7rem, 6vh, 2.4rem);
        margin-bottom:6px;
    }
    .hero-new--slideshow .hero-subtitle{
        font-size:0.95rem;
        margin-bottom:6px;
    }
    .hero-new--slideshow .hero-description{
        display:none;
    }
    .hero-new--slideshow .live-annonces-pill{
        display:none;
    }
    .hero-trust{ display:none; }
    .hero-new--slideshow .hero-new-content{ padding-bottom:8px; max-width:560px; }
    .hero-new--slideshow .hero-new-buttons{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;
        max-width:100%;
    }
    .hero-new--slideshow .hero-new-buttons .btn-primary-large,
    .hero-new--slideshow .hero-new-buttons .btn-secondary-large{
        width:auto;
        min-width:150px;
        padding:10px 16px;
        min-height:42px;
        font-size:13px;
    }
    .hero-slide-dots{
        bottom:calc(10px + var(--safe-bottom));
        gap:5px;
    }
    .hero-slide-dot{
        width:18px;
        min-width:18px;
        min-height:36px;
    }
    .hero-slide-dot.is-active{ width:28px; min-width:28px; }
}

/* ---- Très petits en hauteur (notch + clavier / fold) ---- */
@media(max-height:680px) and (orientation:portrait) and (max-width:480px){
    .hero-new--slideshow .hero-description{
        font-size:14px;
        margin-bottom:16px;
    }
    .hero-new--slideshow .hero-title{ margin-bottom:8px; }
    .hero-new--slideshow .live-annonces-pill{ margin-bottom:12px; }
    .hero-trust{ margin-top:12px; }
}

/* ---- iOS : paint GPU stable pour le slideshow ---- */
html.is-ios .hero-slideshow,
html.is-ios .hero-slide{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
html.is-ios .hero-slide-dot{
    -webkit-tap-highlight-color:transparent;
}

/* ---- Android : barres de progression un peu plus épaisses ---- */
html.is-android .hero-slide-dot::before,
html.is-android .hero-slide-dot::after{
    height:3.5px;
}
html.is-android .hero-slide-dot{
    -webkit-tap-highlight-color:transparent;
}

/* ==========================================================================
   TÉLÉPHONE — polish images & densité (v2)
   Images plus compactes, pas de débordement, lecture confortable
   ========================================================================== */
@media(max-width:768px){
    /* Anti-débordement global */
    img, video, iframe, svg{
        max-width:100%;
    }
    .plan-image-container,
    .projet-plan-frame,
    .logement-detail-card,
    .carousel-card-new{
        max-width:100%;
        box-sizing:border-box;
    }

    /* Accueil : sections moins aérées */
    .sidi-guide-choice{
        min-height:48px;
        width:100%;
        justify-content:center;
    }
    .sidi-guide-choices{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
    }
    .sidi-guide-choice--wide{
        grid-column:1 / -1;
    }
    .sidi-explore,
    .avant-apres,
    .suivi,
    .pourquoi,
    .contact,
    .cta-band{
        padding-top:48px;
        padding-bottom:48px;
    }
    .section-header h2{
        font-size:clamp(1.35rem, 5.5vw, 1.75rem);
        line-height:1.2;
    }
    .section-header .text{
        font-size:14px;
        line-height:1.5;
    }

    /* Hero accueil : contenu plus compact */
    .hero-new--slideshow{
        min-height:100svh;
        min-height:100dvh;
    }
    .hero-new--slideshow .hero-title{
        font-size:clamp(2rem, 10vw, 2.55rem);
        margin-bottom:8px;
    }
    .hero-new--slideshow .hero-subtitle{
        font-size:1rem;
        margin-bottom:8px;
    }
    .hero-new--slideshow .hero-description{
        font-size:14px;
        line-height:1.45;
        margin-bottom:16px;
        max-width:32ch;
    }

    /* Galerie client chantier */
    .photos-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
    }
    .photo-item{
        aspect-ratio:1 / 1;
        border-radius:10px;
    }

    /* Annonces */
    .annonce-card-photo{
        aspect-ratio:16 / 10;
        max-height:180px;
        overflow:hidden;
    }
    .annonce-card-photo img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    /* À propos / leaders — ne pas écraser le cadre portrait */
    .apropos-hero img,
    .team-photo,
    .dirigeant-photo{
        max-height:220px;
        width:100%;
        object-fit:cover;
    }
    .leader-card .leader-photo img{
        max-height:none;
        width:100%;
        height:100%;
        min-height:240px;
        object-fit:cover;
    }

    /* Diaspora */
    .diaspora-hero{
        min-height:auto;
        padding-top:calc(100px + var(--safe-top));
        padding-bottom:36px;
    }
    .diaspora-hero h1{
        font-size:clamp(1.6rem, 7vw, 2.1rem);
    }

    /* Suivi demo écran */
    .suivi-screen{
        max-width:100%;
        padding:16px;
    }
    .suivi-container{
        grid-template-columns:1fr;
        gap:20px;
    }

    /* Cartes process / pourquoi */
    .process-card,
    .pourquoi-card{
        padding:20px 16px;
    }
    .pourquoi-grid--four,
    .pourquoi-grid--three,
    .process-grid--four{
        grid-template-columns:1fr;
        gap:12px;
    }
    .discreet-proof{
        padding:16px 14px;
        margin-top:28px;
    }
    .voices-anon-grid{
        grid-template-columns:1fr;
        gap:12px;
    }
    .voice-card{
        padding:16px 14px;
    }
    .voice-card p{ font-size:14px; }

    /* Contact map plus basse */
    .contact-map,
    .contact-map iframe{
        min-height:200px;
        height:220px;
        max-height:240px;
        border-radius:14px;
    }

    /* Boutons bas de page + WA flottant */
    .whatsapp-btn{
        width:52px;
        height:52px;
        right:calc(12px + var(--safe-right));
        bottom:calc(14px + var(--safe-bottom));
    }
    .btn-retour{
        display:inline-flex;
        margin-bottom:12px;
        font-size:14px;
    }

    /* Lightbox mobile */
    .lightbox img,
    #lightbox-img{
        max-width:94vw;
        max-height:78vh;
        width:auto;
        height:auto;
        object-fit:contain;
    }

    /* Hover scale désactivé au tactile */
    .carousel-item.active:hover .carousel-card-new img{
        transform:none;
    }
}

/* Landscape téléphone : images encore plus compactes */
@media(max-width:900px) and (orientation:landscape) and (max-height:480px){
    .carousel-container{ height:min(280px, 70vh); }
    .carousel-item{
        width:200px;
        height:240px;
    }
    .carousel-card-new img{
        height:38%;
        max-height:90px;
    }
    .logement-hero{
        max-height:160px;
        min-height:120px;
    }
    .plan-image-container img{
        max-height:50vh;
    }
    .hero-new--slideshow{
        min-height:100svh;
        padding-top:calc(72px + var(--safe-top));
    }
}

/* Mobile — fond villas visible + glass plus transparent / attractif */
@media (max-width: 900px) {
    .hero-orb,
    .hero-shine,
    .hero-dust {
        display: none !important;
    }

    /* Maisons en fond : bien visibles (plus trop sombres) */
    .catalogue-immersif,
    .catalogue-new--sync-bg{
        background:#0e0c0a !important;
    }
    .catalogue-bg-layer {
        filter: blur(2px) saturate(1.15) brightness(0.92) !important;
        transform: scale(1.05) !important;
        opacity: 0 !important;
        transition: opacity 0.45s var(--ease-out, ease) !important;
    }
    .catalogue-bg-layer.is-active {
        opacity: 0.92 !important;
    }
    .catalogue-bg-veil{
        background:
            radial-gradient(ellipse at 50% 40%, rgba(212,175,55,0.14), transparent 58%),
            linear-gradient(
                180deg,
                rgba(7,8,11,0.28) 0%,
                rgba(7,8,11,0.12) 38%,
                rgba(7,8,11,0.42) 100%
            ) !important;
    }
    .catalogue-bg-caption{
        background:rgba(12,11,9,0.35) !important;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,0.14);
    }
    .gold-shimmer {
        animation: none !important;
        background: var(--gold-light) !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        color: var(--gold-light) !important;
    }

    /* Glass fluide — plus transparent pour attirer */
    .explore-portal,
    .process-card,
    .pourquoi-card,
    .contact-card,
    .sidi-guide-card,
    .sidi-compare-card,
    .carousel-card-new,
    .spec-item,
    .leader-card,
    .projet-sheet,
    .logement-detail-card{
        background:rgba(18,16,14,0.32) !important;
        backdrop-filter:blur(16px) saturate(1.35);
        -webkit-backdrop-filter:blur(16px) saturate(1.35);
        border-color:rgba(255,255,255,0.16) !important;
        box-shadow:0 14px 36px rgba(0,0,0,0.22) !important;
        transition:transform 0.4s var(--ease-out, ease), box-shadow 0.4s ease, border-color 0.35s ease, background 0.35s ease;
    }
    .carousel-card-new{
        background:rgba(16,14,12,0.55) !important;
        border:1px solid rgba(240,215,140,0.32) !important;
    }
    .carousel-item.active .carousel-card-new{
        background:rgba(18,15,12,0.62) !important;
        border-color:rgba(240,215,140,0.55) !important;
        box-shadow:0 18px 42px rgba(0,0,0,0.32), 0 0 0 1px rgba(212,175,55,0.25) !important;
    }
    .btn-secondary-large,
    .btn-secondary{
        background:rgba(12,11,9,0.28) !important;
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        border:1px solid rgba(240,215,140,0.45);
    }
    .sidi-proof-strip{
        background:linear-gradient(90deg, rgba(30,61,46,0.38), rgba(30,58,95,0.32), rgba(90,60,20,0.28)) !important;
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }
    .nav-links.active{
        background:rgba(10,9,8,0.58) !important;
        backdrop-filter:saturate(1.5) blur(24px);
        -webkit-backdrop-filter:saturate(1.5) blur(24px);
    }
    .navbar,
    .navbar.scrolled{
        background:rgba(12,11,9,0.4) !important;
        backdrop-filter:saturate(1.55) blur(22px) !important;
        -webkit-backdrop-filter:saturate(1.55) blur(22px) !important;
    }
    .whatsapp-btn{
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        box-shadow:0 10px 28px rgba(37,211,102,0.35), 0 0 0 1px rgba(255,255,255,0.14);
        transition:transform 0.35s var(--ease-out, ease), box-shadow 0.35s ease;
    }
    .section-header h2,
    .catalogue-immersif .section-header h2{
        text-shadow:0 2px 18px rgba(0,0,0,0.55);
    }
    .catalogue-immersif .section-header .text{
        color:rgba(247,242,232,0.92) !important;
        text-shadow:0 1px 10px rgba(0,0,0,0.4);
    }
}

/* PC — transparence + fluidité renforcées */
@media (min-width: 901px) {
    .explore-portal,
    .process-card,
    .pourquoi-card,
    .contact-card,
    .sidi-guide-card,
    .sidi-compare-card,
    .carousel-card-new,
    .spec-item,
    .leader-card,
    .projet-card,
    .condition-card,
    .garantie-card{
        background:rgba(20,18,15,0.42);
        backdrop-filter:blur(18px) saturate(1.3);
        -webkit-backdrop-filter:blur(18px) saturate(1.3);
        border:1px solid rgba(255,255,255,0.1);
        transition:transform 0.5s var(--ease-out, ease), box-shadow 0.5s ease, border-color 0.4s ease, background 0.4s ease;
    }
    .explore-portal:hover,
    .process-card:hover,
    .pourquoi-card:hover,
    .sidi-compare-card:hover,
    .leader-card:hover,
    .carousel-item.active .carousel-card-new{
        transform:translateY(-6px);
        background:rgba(28,24,20,0.5);
        border-color:rgba(240,215,140,0.35);
        box-shadow:0 22px 50px rgba(0,0,0,0.35);
    }
    .btn-secondary-large,
    .btn-secondary{
        background:rgba(12,11,9,0.35);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
    }
    .js .reveal{
        transition:opacity 0.55s var(--ease-out, ease), transform 0.55s var(--ease-out, ease);
    }
}