/* ==========================================================================
   SIDI IMMOBILIER — Design System
   Palette : noir chaud + or raffiné | Typo : Fraunces (titres) / Inter (texte)
   ========================================================================== */

/* Polices chargées via <link> dans layout.php (plus rapide que @import) */

:root{
    /* Couleurs — noir chaud + or bijou (premium Bamako / diaspora) */
    --gold:#d4af37;
    --gold-light:#f0d78c;
    --gold-deep:#a8841e;
    --gold-soft:rgba(212,175,55,0.14);
    --bg-dark:#0c0b09;
    --bg-deep:#080706;
    --bg-card:#14120e;
    --surface:rgba(255,255,255,0.06);
    --surface-strong:rgba(255,255,255,0.1);
    --glass:rgba(18,16,14,0.48);
    --glass-strong:rgba(14,12,10,0.62);
    --line:rgba(212,175,55,0.26);
    --line-soft:rgba(255,255,255,0.12);
    --text:#f7f2e8;
    --text-muted:rgba(247,242,232,0.72);
    --text-faint:rgba(247,242,232,0.48);

    /* Typographie */
    --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Rythme + fluidité */
    --radius:18px;
    --radius-lg:26px;
    --shadow-card:0 20px 50px rgba(0,0,0,0.32);
    --ease:cubic-bezier(0.22,1,0.36,1);
    --ease-out:cubic-bezier(0.16,1,0.3,1);
    --dur:0.45s;
    --container:1200px;
}

html{
    scroll-behavior:smooth;
    /* Évite le saut horizontal quand overflow:hidden retire la barre de scroll */
    scrollbar-gutter:stable;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
    background:var(--bg-dark);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    /* Supprime le flash bleu/gris au toucher sur mobile */
    -webkit-tap-highlight-color:transparent;
}

/* Verrouillage scroll menu ouvert — sans décaler le layout */
body.menu-open{
    overflow:hidden;
    overscroll-behavior:none;
}
body.menu-open .navbar{
    /* Empile au-dessus du bouton WhatsApp flottant pendant le menu */
    z-index:10050;
}
body.menu-open .whatsapp-btn{
    visibility:hidden;
    pointer-events:none;
    opacity:0;
}

a, button{
    /* Supprime le délai de 300ms au tap et le double-tap zoom sur les boutons */
    touch-action:manipulation;
}

h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:600;
    line-height:1.15;
    letter-spacing:-0.01em;
}

img{ max-width:100%; }

::selection{ background:var(--gold); color:var(--bg-dark); }

section{
    padding:110px 6%;
    scroll-margin-top:90px;
}

.section-inner,
.stats-grid, .implantations-grid, .process-grid, .pourquoi-grid,
.suivi-container, .remise-gallery, .contact-container, .footer-grid{
    max-width:var(--container);
    margin-left:auto;
    margin-right:auto;
}

/* Icônes SVG inline */
.icon-svg{
    width:1.2em;
    height:1.2em;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    vertical-align:-0.2em;
    flex-shrink:0;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px 6%;
    position:fixed;
    top:0; left:0; right:0;
    width:100%;
    z-index:1000;
    background:transparent;
    transition:background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out);
}

.navbar.scrolled{
    background:var(--glass);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 10px 36px rgba(0,0,0,0.28);
    backdrop-filter:saturate(1.35) blur(18px);
    -webkit-backdrop-filter:saturate(1.35) blur(18px);
}
@media (hover:hover) and (pointer:fine){
    .navbar.scrolled{
        background:rgba(13,12,10,0.52);
        backdrop-filter:saturate(1.45) blur(22px);
        -webkit-backdrop-filter:saturate(1.45) blur(22px);
    }
}

.logo-container{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    z-index:10002;
    position:relative;
    flex-shrink:0;
    min-width:0;
}

.logo-img{
    height:54px;
    width:auto;
    display:block;
    object-fit:contain;
}

.slogan{
    color:var(--gold);
    font-size:11px;
    letter-spacing:0.04em;
    font-weight:500;
    font-style:italic;
    max-width:260px;
    line-height:1.35;
}

.nav-links{
    display:flex;
    list-style:none;
    gap:34px;
    align-items:center;
}

.nav-links a{
    text-decoration:none;
    color:var(--text-muted);
    font-size:14px;
    font-weight:500;
    letter-spacing:0.02em;
    transition:color 0.25s ease;
    position:relative;
    padding:6px 0;
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:100%;
    height:1.5px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.35s var(--ease);
}

.nav-links a:hover,
.nav-links a.active{ color:var(--text); }

.nav-links a:hover::after,
.nav-links a.active::after{ transform:scaleX(1); }

.btn-appel{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    color:var(--bg-dark);
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    padding:11px 26px;
    border-radius:999px;
    font-weight:700;
    font-size:13px;
    line-height:1.35;
    letter-spacing:0.02em;
    transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    box-shadow:0 6px 18px rgba(201,162,39,0.28);
    text-align:center;
}

.btn-appel span{ font-size:13px; font-weight:700; }

.btn-appel:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(201,162,39,0.4);
}

/* Boutons appel/WhatsApp du menu : visibles seulement en mobile */
.nav-mobile-actions{ display:none; list-style:none; }

.menu-burger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    background:transparent;
    border:none;
    cursor:pointer;
    z-index:10003;
    position:relative;
    padding:10px;
    margin:0;
    flex-shrink:0;
    width:46px;
    height:46px;
    -webkit-tap-highlight-color:transparent;
}

.menu-burger span{
    display:block;
    width:26px;
    height:2px;
    background:var(--text);
    border-radius:2px;
    transition:transform 0.3s var(--ease), opacity 0.25s ease;
    transform-origin:center;
    will-change:transform;
}

.menu-burger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-burger.active span:nth-child(2){ opacity:0; transform:scaleX(0); }
.menu-burger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.btn-primary, .btn-secondary,
.btn-primary-large, .btn-secondary-large{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
    padding:15px 34px;
    border-radius:999px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    letter-spacing:0.01em;
    transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s ease, border-color 0.3s ease;
    cursor:pointer;
}

.btn-primary-large, .btn-secondary-large{ padding:17px 40px; font-size:15px; }

.btn-primary, .btn-primary-large{
    background:linear-gradient(135deg, #e0b83a 0%, #f0d78c 55%, #d4af37 100%);
    color:#14110c;
    box-shadow:0 10px 28px rgba(212,175,55,0.38);
    font-weight:700;
}

.btn-primary:hover, .btn-primary-large:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 40px rgba(212,175,55,0.5);
}

.btn-secondary, .btn-secondary-large{
    border:1px solid rgba(240,215,140,0.45);
    color:var(--text);
    background:rgba(12,11,9,0.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.btn-secondary:hover, .btn-secondary-large:hover{
    border-color:var(--gold-light);
    background:rgba(212,175,55,0.14);
    transform:translateY(-2px);
}

.btn-icon{ display:inline-flex; align-items:center; }

.btn-card{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color:var(--bg-dark);
    text-decoration:none;
    padding:11px 22px;
    border-radius:999px;
    font-weight:600;
    font-size:13.5px;
    transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    box-shadow:0 4px 14px rgba(201,162,39,0.22);
}

.btn-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(201,162,39,0.38);
}

.btn-whatsapp{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(37,211,102,0.12);
    border:1px solid rgba(37,211,102,0.35);
    color:#4be585;
    text-decoration:none;
    padding:11px 22px;
    border-radius:999px;
    font-weight:600;
    font-size:13.5px;
    transition:transform 0.3s var(--ease), background 0.3s ease, border-color 0.3s ease;
}

.btn-whatsapp:hover{
    background:rgba(37,211,102,0.2);
    border-color:rgba(37,211,102,0.6);
    transform:translateY(-2px);
}

.btn-retour{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--gold);
    text-decoration:none;
    font-weight:600;
    font-size:15px;
    margin-bottom:40px;
    transition:transform 0.3s var(--ease);
    cursor:pointer;
}

.btn-retour:hover{ transform:translateX(-4px); }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero-new{
    position:relative;
    min-height:100vh;
    /* svh : hauteur réelle visible sur mobile (barre d'adresse iOS/Android) */
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:140px 6% 100px;
    background:url("../images/hero-drone.jpg") center/cover no-repeat;
    overflow:hidden;
}

/* Effet parallaxe fixe uniquement sur desktop : iOS Safari gère mal background-attachment:fixed */
@media (hover:hover) and (pointer:fine) and (min-width:769px){
    .hero-new{ background-attachment:fixed; }
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(13,12,10,0.82) 0%, rgba(13,12,10,0.66) 55%, var(--bg-dark) 100%);
    z-index:2;
}

/* Défilement photos réelles — grande page d'accueil */
.hero-new--slideshow{
    background-image:none;
    background-color:#0a0908;
    padding:120px 6% 88px;
    align-items:flex-end;
}
.hero-slideshow{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}
.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center 40%;
    background-repeat:no-repeat;
    background-color:#0a0908;
    opacity:0;
    transform:scale(1.06);
    transition:opacity 1.25s ease, transform 7.5s ease;
    will-change:opacity, transform;
}
.hero-slide img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 40%;
    display:block;
    border:0;
}
.hero-slide.is-active{
    opacity:1;
    transform:scale(1);
}
.hero-new--slideshow .hero-overlay{
    z-index:2;
    /* Vignette cinéma : les photos respirent au centre, texte lisible en bas */
    background:
        radial-gradient(ellipse 85% 70% at 50% 38%, rgba(8,7,6,0.18) 0%, rgba(8,7,6,0.52) 72%, rgba(8,7,6,0.78) 100%),
        linear-gradient(180deg, rgba(8,7,6,0.42) 0%, rgba(8,7,6,0.12) 32%, rgba(8,7,6,0.28) 55%, rgba(8,7,6,0.88) 100%);
}
.hero-scrim{
    display:none;
}
.hero-new--slideshow .hero-scrim{
    display:block;
    position:absolute;
    left:50%;
    bottom:12%;
    transform:translateX(-50%);
    width:min(920px, 92%);
    height:min(58vh, 520px);
    z-index:2;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 70%, rgba(8,7,6,0.55) 0%, rgba(8,7,6,0.22) 48%, transparent 72%);
}
.hero-new--slideshow .hero-new-content{
    position:relative;
    z-index:3;
    max-width:720px;
    margin:0 auto;
    padding-bottom:28px;
}
.hero-new--slideshow .hero-title{
    text-shadow:0 2px 28px rgba(0,0,0,0.45);
    margin-bottom:18px;
}
.hero-new--slideshow .hero-subtitle{
    text-shadow:0 1px 16px rgba(0,0,0,0.4);
    margin-bottom:14px;
}
.hero-new--slideshow .hero-description{
    max-width:480px;
    margin:0 auto 28px;
    color:rgba(245,240,230,0.82);
    font-size:16px;
    line-height:1.65;
}
.hero-new--slideshow .live-annonces-pill{
    margin-bottom:22px;
}
.hero-new--slideshow .hero-new-buttons{
    margin-bottom:0;
}
.hero-trust{
    margin:28px 0 0;
    color:rgba(245,240,230,0.88);
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-weight:600;
    text-shadow:0 1px 12px rgba(0,0,0,0.45);
}
.hero-slide-dots{
    position:absolute;
    left:50%;
    bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    z-index:4;
    padding:0;
    background:none;
    border:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.hero-slide-dot{
    position:relative;
    width:28px;
    height:3px;
    border-radius:2px;
    border:0;
    padding:0;
    cursor:pointer;
    overflow:hidden;
    background:rgba(255,255,255,0.28);
    transition:background 0.25s ease, width 0.25s ease;
}
.hero-slide-dot::after{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:0;
    background:var(--gold);
    border-radius:inherit;
}
.hero-slide-dot.is-active{
    width:42px;
    background:rgba(255,255,255,0.22);
    transform:none;
    box-shadow:none;
}
.hero-slide-dot.is-active.is-running::after{
    animation:heroProgress var(--hero-interval, 7s) linear forwards;
}
@keyframes heroProgress{
    from{ width:0; }
    to{ width:100%; }
}
@media(max-width:768px){
    .hero-new--slideshow{
        padding:calc(96px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-left, 0px)) calc(64px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-right, 0px));
        align-items:center;
        justify-content:center;
        min-height:100svh;
        min-height:100dvh;
    }
    .hero-new--slideshow .hero-overlay{
        background:
            radial-gradient(ellipse 100% 80% at 50% 30%, rgba(8,7,6,0.22) 0%, rgba(8,7,6,0.55) 70%, rgba(8,7,6,0.82) 100%),
            linear-gradient(180deg, rgba(8,7,6,0.5) 0%, rgba(8,7,6,0.2) 28%, rgba(8,7,6,0.45) 58%, rgba(8,7,6,0.92) 100%);
    }
    .hero-new--slideshow .hero-scrim{
        bottom:6%;
        width:min(100%, 96%);
        height:min(70vh, 520px);
        background:radial-gradient(ellipse at 50% 75%, rgba(8,7,6,0.62) 0%, rgba(8,7,6,0.28) 50%, transparent 74%);
    }
    .hero-new--slideshow .hero-new-content{
        width:100%;
        max-width:440px;
        padding-bottom:36px;
    }
    .hero-slide,
    .hero-slide img{
        background-position:center center;
        object-position:center center;
    }
    .hero-slide-dots{
        bottom:calc(14px + env(safe-area-inset-bottom, 0px));
        gap:8px;
        max-width:calc(100% - 32px);
        flex-wrap:nowrap;
        justify-content:center;
    }
    .hero-slide-dot{
        width:20px;
        min-width:20px;
        height:3px;
        min-height:44px;
        background:transparent;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }
    .hero-slide-dot::before{
        content:"";
        display:block;
        width:100%;
        height:3px;
        border-radius:2px;
        background:rgba(255,255,255,0.32);
    }
    .hero-slide-dot::after{
        top:50%;
        bottom:auto;
        height:3px;
        transform:translateY(-50%);
        z-index:1;
    }
    .hero-slide-dot.is-active{
        width:32px;
        min-width:32px;
        background:transparent;
    }
    .hero-slide-dot.is-active::before{ background:rgba(255,255,255,0.2); }
    .hero-trust{
        font-size:10.5px;
        letter-spacing:0.04em;
        margin-top:18px;
        line-height:1.5;
        max-width:20em;
        margin-left:auto;
        margin-right:auto;
    }
}
@media (prefers-reduced-motion: reduce){
    .hero-slide{ transition:opacity 0.35s ease; transform:none; }
    .hero-slide.is-active{ transform:none; }
    .hero-slide-dot.is-active.is-running::after{ animation:none; width:100%; }
}

.hero-new-content{
    position:relative;
    z-index:3;
    max-width:860px;
    text-align:center;
}

.logo-badge{
    display:inline-flex;
    margin-bottom:34px;
    animation:fadeInDown 0.4s var(--ease) both;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--gold);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.3em;
    text-transform:uppercase;
    margin-bottom:26px;
    animation:fadeInUp 0.4s var(--ease) 0.05s both;
}

.hero-eyebrow::before, .hero-eyebrow::after{
    content:"";
    width:36px;
    height:1px;
    background:var(--line);
}

.hero-title{
    font-size:clamp(48px, 7.5vw, 88px);
    font-weight:600;
    margin-bottom:26px;
    letter-spacing:-0.02em;
    animation:fadeInUp 0.4s var(--ease) 0.08s both;
}

.hero-title .gold{
    color:var(--gold);
    font-style:italic;
}

.hero-subtitle{
    font-family:var(--font-display);
    font-size:clamp(20px, 2.6vw, 27px);
    color:var(--text);
    font-weight:400;
    margin-bottom:18px;
    animation:fadeInUp 0.4s var(--ease) 0.12s both;
}

.hero-description{
    font-size:17px;
    color:var(--text-muted);
    max-width:560px;
    margin:0 auto 44px;
    line-height:1.75;
    animation:fadeInUp 0.4s var(--ease) 0.16s both;
}

.hero-new-buttons{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
    animation:fadeInUp 0.4s var(--ease) 0.2s both;
}

.hero-scroll{
    position:absolute;
    bottom:36px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    color:var(--text-faint);
    animation:scrollHint 2.2s ease-in-out infinite;
}

@keyframes scrollHint{
    0%,100%{ transform:translate(-50%,0); opacity:0.6; }
    50%{ transform:translate(-50%,8px); opacity:1; }
}

@keyframes fadeInDown{
    from{ opacity:0; transform:translateY(-24px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes fadeInUp{
    from{ opacity:0; transform:translateY(24px); }
    to{ opacity:1; transform:translateY(0); }
}

/* ==========================================================================
   TITRES DE SECTION
   ========================================================================== */

.section-header{
    text-align:center;
    margin-bottom:70px;
}

.section-header .surtitle{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:var(--gold);
    font-size:12px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:18px;
}

.section-header .surtitle::before,
.section-header .surtitle::after{
    content:"";
    width:28px;
    height:1px;
    background:var(--line);
}

.section-header h2{
    font-size:clamp(30px, 4vw, 44px);
    font-weight:600;
    margin-bottom:18px;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
}

.section-header .text{
    color:var(--text-muted);
    font-size:16.5px;
    max-width:560px;
    margin:0 auto;
    line-height:1.7;
}

/* ==========================================================================
   CHIFFRES CLÉS
   ========================================================================== */

.stats-new{
    background:var(--bg-deep);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.stat-card{
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    padding:42px 28px;
    text-align:center;
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
}

.stat-card:hover{
    transform:translateY(-6px);
    border-color:var(--line);
}

.stat-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--gold-soft);
    color:var(--gold);
    margin-bottom:22px;
    font-size:24px;
}

.stat-icon .icon-svg{ width:24px; height:24px; }

.stat-number{
    color:var(--text);
    font-size:clamp(38px, 4vw, 52px);
    font-weight:600;
    margin-bottom:10px;
    line-height:1;
}

.stat-label{
    color:var(--text-muted);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-weight:500;
}

/* ==========================================================================
   IMPLANTATIONS
   ========================================================================== */

.implantations{ background:var(--bg-dark); }

.implantations-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.implantation-card{
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    padding:36px 20px;
    text-align:center;
    transition:transform 0.4s var(--ease), border-color 0.4s ease, background 0.4s ease;
}

.implantation-card:hover{
    transform:translateY(-6px);
    border-color:var(--line);
    background:var(--gold-soft);
}

.implantation-flag{ font-size:38px; margin-bottom:16px; line-height:1; }

.implantation-card h3{
    color:var(--text);
    font-size:19px;
    margin-bottom:6px;
}

.implantation-card p{
    color:var(--text-muted);
    font-size:14px;
}

/* ==========================================================================
   CARROUSEL LOGEMENTS
   ========================================================================== */

.catalogue-new{
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.07), transparent 50%),
        var(--bg-deep);
}

/* Photo réelle Bouctou 2 F5 derrière le carrousel */
.catalogue-new--bouctou-bg{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}
.catalogue-new--bouctou-bg::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(180deg, rgba(8,10,14,0.82) 0%, rgba(8,10,14,0.55) 45%, rgba(8,10,14,0.88) 100%),
        url("../images/bouctou-2-f5-reel.jpg?v=2") center 40%/cover no-repeat;
    pointer-events:none;
}
.catalogue-new--bouctou-bg > *{
    position:relative;
    z-index:1;
}
.catalogue-bg-caption{
    margin-top:10px;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(240,215,140,0.75);
}

/* ==========================================================================
   SIDI IMMERSIF — photo réelle derrière + carte 3D devant
   ========================================================================== */
.catalogue-new--sync-bg,
.catalogue-immersif{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:#07080b;
    padding-top:96px;
    padding-bottom:110px;
}
.catalogue-bg-stack{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}
.catalogue-bg-layer{
    position:absolute;
    inset:-8px;
    background-color:#0a0c10;
    background-position:center 42%;
    background-size:cover;
    background-repeat:no-repeat;
    background-image:url("../images/bouctou-2-f5-reel.jpg?v=2");
    filter:blur(2.5px) saturate(1.08) brightness(0.78);
    transform:scale(1.04);
    opacity:0;
    transition:opacity 0.45s ease;
}
.catalogue-bg-layer.is-active{
    opacity:0.95;
}
.catalogue-bg-veil{
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(212,175,55,0.12), transparent 55%),
        linear-gradient(180deg, rgba(7,8,11,0.38) 0%, rgba(7,8,11,0.18) 42%, rgba(7,8,11,0.55) 100%);
}
.catalogue-immersif > *:not(.catalogue-bg-stack){
    position:relative;
    z-index:1;
}
.catalogue-immersif .section-header{
    text-align:center;
    margin-bottom:28px;
}
.catalogue-immersif .section-header h2{
    text-shadow:0 2px 24px rgba(0,0,0,0.45);
}
.catalogue-immersif .section-header .text{
    color:rgba(247,242,232,0.82);
}
.catalogue-bg-caption{
    display:inline-block;
    margin-top:14px;
    padding:8px 14px;
    border-radius:999px;
    font-size:11px;
    letter-spacing:0.10em;
    text-transform:uppercase;
    color:#f0d78c;
    background:rgba(8,10,14,0.55);
    border:1px solid rgba(212,175,55,0.35);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

/* Carte vitrine premium */
.catalogue-immersif .carousel-card-new{
    border:1px solid rgba(212,175,55,0.42);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 18px 50px rgba(0,0,0,0.55),
        0 0 40px rgba(212,175,55,0.08);
    background:linear-gradient(180deg, rgba(22,20,16,0.96), rgba(12,11,9,0.98));
}
.catalogue-immersif .carousel-item.active .carousel-card-new{
    transform:translateY(-6px);
    border-color:rgba(240,215,140,0.65);
    box-shadow:
        0 0 0 1px rgba(240,215,140,0.18) inset,
        0 26px 60px rgba(0,0,0,0.6),
        0 0 48px rgba(212,175,55,0.16);
    transition:transform 0.45s var(--ease), box-shadow 0.45s ease, border-color 0.45s ease;
}
.catalogue-immersif .carousel-card-new img{
    height:56%;
    object-fit:cover;
}
.catalogue-immersif .carousel-overlay-new h3{
    font-family:var(--font-display);
    letter-spacing:0.01em;
}
.catalogue-immersif .carousel-btn{
    background:linear-gradient(145deg, rgba(212,175,55,0.95), rgba(240,215,140,0.85));
    border-color:rgba(240,215,140,0.65);
    color:#1a1408;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}
.catalogue-immersif .carousel-btn:hover{
    background:linear-gradient(145deg, #f5e2a0, #e0b83a);
    color:#1a1408;
    border-color:#f0d78c;
}
.catalogue-immersif .carousel-dot{
    background:rgba(255,255,255,0.25);
    border:1px solid rgba(212,175,55,0.25);
}
.catalogue-immersif .carousel-dot.active{
    background:var(--gold);
    box-shadow:0 0 12px rgba(212,175,55,0.55);
}

/* Bouctou 2 — page immersif */
.bouctou2-page .bouctou2-card{
    border:1px solid rgba(212,175,55,0.4);
    background:
        radial-gradient(ellipse at top right, rgba(212,175,55,0.08), transparent 45%),
        rgba(14,13,11,0.96);
    box-shadow:0 24px 70px rgba(0,0,0,0.4);
}
.bouctou2-page .bouctou2-hero{
    border:2px solid rgba(212,175,55,0.5);
    box-shadow:0 16px 40px rgba(0,0,0,0.35);
}
.bouctou2-page .bouctou2-badge{
    background:linear-gradient(90deg,#d4af37,#f0d78c);
    color:#1a1408;
    box-shadow:0 6px 20px rgba(212,175,55,0.25);
}
.bouctou2-page .plan-image-container img{
    border-color:rgba(212,175,55,0.3);
}

.carousel-container{
    position:relative;
    width:100%;
    max-width:1100px;
    margin:0 auto;
    height:540px;
    perspective:1600px;
    overflow:hidden;
}

.carousel-3d{
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
}

.carousel-item{
    position:absolute;
    width:340px;
    height:460px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) translateZ(-500px);
    transition:transform 0.35s var(--ease), opacity 0.35s var(--ease), z-index 0s;
    opacity:0;
    pointer-events:none;
}

.carousel-item.active{
    transform:translate(-50%,-50%) translateZ(0);
    opacity:1;
    z-index:10;
    pointer-events:auto;
}

.carousel-item.prev{
    transform:translate(-128%,-50%) translateZ(-260px) rotateY(18deg);
    opacity:0.45;
    z-index:5;
}

.carousel-item.next{
    transform:translate(28%,-50%) translateZ(-260px) rotateY(-18deg);
    opacity:0.45;
    z-index:5;
}

.carousel-card-new{
    width:100%;
    height:100%;
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(20,18,15,0.55);
    backdrop-filter:blur(12px) saturate(1.2);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);
    box-shadow:var(--shadow-card);
    display:flex;
    flex-direction:column;
    transition:transform var(--dur, 0.45s) var(--ease-out, var(--ease)), box-shadow var(--dur, 0.45s) ease, border-color 0.35s ease;
}

.carousel-card-new img{
    width:100%;
    height:54%;
    object-fit:cover;
    transition:transform 0.35s var(--ease);
}

.carousel-item.active:hover .carousel-card-new img{ transform:scale(1.06); }

.carousel-overlay-new{
    padding:26px;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px;
}

.carousel-overlay-new h3{
    color:var(--text);
    font-size:24px;
}

.carousel-overlay-new p{
    display:flex;
    align-items:center;
    gap:16px;
    color:var(--text-muted);
    font-size:14px;
}

.carousel-overlay-new p span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.carousel-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    flex-shrink:0;
    position:relative;
    z-index:40;
}
.carousel-buttons .btn-card,
.carousel-buttons .btn-whatsapp{
    position:relative;
    z-index:41;
    pointer-events:auto !important;
}

.carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border-radius:50%;
    border:1px solid rgba(240,215,140,0.55);
    background:linear-gradient(145deg, rgba(212,175,55,0.95), rgba(240,215,140,0.82));
    color:#1a1408;
    font-size:28px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    z-index:120;
    display:flex !important;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:transform 0.35s var(--ease-out, var(--ease)), box-shadow 0.35s ease, background 0.3s ease;
    -webkit-appearance:none;
    appearance:none;
}

.carousel-btn:hover,
.carousel-btn:focus-visible{
    background:linear-gradient(145deg, #f0d78c, #d4af37);
    border-color:rgba(240,215,140,0.9);
    color:#14110c;
    transform:translateY(-50%) scale(1.06);
    box-shadow:0 14px 36px rgba(212,175,55,0.4);
    outline:none;
}

.carousel-btn:active{
    transform:translateY(-50%) scale(0.96);
}

.carousel-btn.prev{ left:8px; }
.carousel-btn.next{ right:8px; }

.carousel-dots{
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:100;
}

.carousel-dot{
    /* Trait fin de 3px mais zone tactile de 15px de haut */
    width:24px;
    height:15px;
    padding:6px 0;
    border-radius:2px;
    background:rgba(255,255,255,0.18);
    background-clip:content-box;
    cursor:pointer;
    transition:all 0.3s ease;
}

.carousel-dot.active{ background:var(--gold); }
.carousel-dot:hover{ background:rgba(201,162,39,0.6); }

/* ==========================================================================
   PROCESSUS
   ========================================================================== */

.avant-apres{ background:var(--bg-dark); }

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.process-grid--four{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.process-card{
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    padding:36px 22px;
    text-align:center;
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
    position:relative;
    counter-increment:process;
}

.process-card:hover{
    transform:translateY(-6px);
    border-color:var(--line);
}

.process-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--gold-soft);
    color:var(--gold);
    margin-bottom:20px;
    font-size:22px;
}

.process-icon .icon-svg{ width:22px; height:22px; }

.process-step{
    position:absolute;
    top:16px;
    right:18px;
    font-family:var(--font-display);
    font-size:13px;
    color:var(--text-faint);
    font-style:italic;
}

.process-card h3{
    color:var(--text);
    font-size:18px;
    margin-bottom:10px;
}

.process-card p{
    color:var(--text-muted);
    font-size:13.5px;
    line-height:1.65;
}

/* ==========================================================================
   POURQUOI NOUS
   ========================================================================== */

.pourquoi{ background:var(--bg-deep); }

.pourquoi-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.pourquoi-grid--three{
    max-width:960px;
    margin-left:auto;
    margin-right:auto;
}

.pourquoi-card{
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    padding:40px 32px;
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
}

.pourquoi-card:hover{
    transform:translateY(-6px);
    border-color:var(--line);
}

.pourquoi-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--gold-soft);
    color:var(--gold);
    margin-bottom:22px;
    font-size:24px;
}

.pourquoi-icon .icon-svg{ width:24px; height:24px; }

.pourquoi-card h3{
    color:var(--text);
    font-size:21px;
    margin-bottom:12px;
}

.pourquoi-card p{
    color:var(--text-muted);
    font-size:15px;
    line-height:1.7;
}

/* ==========================================================================
   SUIVI CHANTIER
   ========================================================================== */

.suivi{ background:var(--bg-dark); }

.suivi-container{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:60px;
    align-items:center;
}

.suivi-demo{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:22px;
    box-shadow:var(--shadow-card);
}

.suivi-screen{
    background:var(--bg-deep);
    border-radius:var(--radius);
    padding:34px;
    border:1px solid var(--line-soft);
}

.suivi-header{
    margin-bottom:30px;
    padding-bottom:22px;
    border-bottom:1px solid var(--line-soft);
}

.suivi-header h3{
    color:var(--text);
    font-size:21px;
    margin-bottom:6px;
}

.suivi-header p{
    color:var(--text-muted);
    font-size:13.5px;
}

.suivi-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:30px;
}

.suivi-stat{
    text-align:center;
    padding:18px 10px;
    background:var(--gold-soft);
    border-radius:14px;
    border:1px solid var(--line-soft);
}

.suivi-stat h4{
    color:var(--gold);
    font-size:26px;
    margin-bottom:4px;
}

.suivi-stat p{
    color:var(--text-muted);
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.suivi-timeline{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.timeline-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:13px 18px;
    background:var(--surface);
    border-radius:12px;
    border:1px solid var(--line-soft);
}

.timeline-item .check{
    color:#5fd97e;
    font-size:16px;
    font-weight:700;
}

.timeline-item .active-dot{
    color:var(--gold);
    font-size:14px;
    animation:pulse 1.8s ease-in-out infinite;
}

@keyframes pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.4; }
}

.timeline-item .dot{
    color:var(--text-faint);
    font-size:14px;
}

.timeline-item p{
    margin:0;
    color:var(--text-muted);
    font-size:14px;
    flex:1;
}

.timeline-item.done{ border-color:rgba(95,217,126,0.22); }
.timeline-item.done p{ color:var(--text); }

.timeline-item.active{
    border-color:rgba(201,162,39,0.4);
    background:var(--gold-soft);
}
.timeline-item.active p{ color:var(--text); }

.suivi-cta{ text-align:left; }

.cta-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    border-radius:16px;
    background:var(--gold-soft);
    color:var(--gold);
    margin-bottom:26px;
    font-size:28px;
}

.cta-icon .icon-svg{ width:28px; height:28px; }

.suivi-cta h3{
    font-size:clamp(26px, 3vw, 34px);
    margin-bottom:16px;
    color:var(--text);
}

.suivi-cta p{
    color:var(--text-muted);
    font-size:16px;
    line-height:1.75;
    margin-bottom:32px;
    max-width:420px;
}

/* ==========================================================================
   REMISE DES CLÉS
   ========================================================================== */

.remise{ background:var(--bg-deep); }

.remise--simple .section-header{ margin-bottom:28px; }
.remise-simple-cta{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    max-width:640px;
    margin:0 auto;
}

.remise-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-bottom:56px;
}

.remise-photo{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    height:320px;
    border:1px solid var(--line-soft);
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
}

.remise-photo:hover{
    transform:translateY(-6px);
    border-color:var(--line);
}

.remise-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.7s var(--ease);
}

.remise-photo:hover img{ transform:scale(1.06); }

.remise-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.25) 45%, transparent 70%);
    padding:26px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.remise-overlay h3{
    color:var(--text);
    font-size:21px;
    margin-bottom:4px;
}

.remise-overlay p{
    color:var(--gold);
    font-size:13.5px;
    letter-spacing:0.04em;
}

.remise-quote{
    text-align:center;
    max-width:820px;
    margin:0 auto;
    padding:56px 48px;
    background:var(--surface);
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    position:relative;
}

.remise-quote::before{
    content:"\201C";
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    font-family:var(--font-display);
    font-size:80px;
    line-height:1;
    color:var(--gold);
    opacity:0.5;
}

.remise-quote .quote{
    font-family:var(--font-display);
    font-size:clamp(19px, 2.4vw, 24px);
    color:var(--text);
    font-style:italic;
    font-weight:400;
    line-height:1.7;
    margin:20px 0 24px;
}

.remise-quote .author{
    color:var(--gold);
    font-size:14px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact{ background:var(--bg-dark); }

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

.contact-card{
    background:var(--surface);
    border:1px solid var(--line-soft);
    padding:44px;
    border-radius:var(--radius-lg);
}

.contact-card h3{
    font-size:24px;
    margin-bottom:30px;
    color:var(--text);
}

.contact-info-item{
    display:flex;
    gap:16px;
    margin-bottom:24px;
    align-items:flex-start;
}

.contact-info-item .icon{
    width:46px;
    height:46px;
    background:var(--gold-soft);
    color:var(--gold);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}

.contact-info-item .icon .icon-svg{ width:20px; height:20px; }

.contact-info-item .text h4{
    font-family:var(--font-body);
    font-size:12px;
    color:var(--text-faint);
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:0.12em;
    font-weight:600;
}

.contact-info-item .text p,
.contact-info-item .text a{
    color:var(--text);
    text-decoration:none;
    font-size:15.5px;
    line-height:1.6;
    transition:color 0.25s ease;
}

.contact-info-item .text a:hover{ color:var(--gold); }

.contact-phones{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.contact-phones li{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}
.contact-phones .is-primary a{
    color:var(--gold);
    font-weight:700;
    font-size:1.05em;
}
.phone-badge{
    display:inline-block;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#1a1508;
    background:var(--gold);
    border-radius:4px;
    padding:2px 7px;
}
.phone-badge--fr{
    background:transparent;
    color:var(--gold);
    border:1px solid var(--line);
}

.footer-phone-main{
    margin:12px 0 6px;
    font-size:0.95rem;
}
.footer-phone-main a{ color:var(--gold); text-decoration:none; }
.footer-phone-main a:hover{ text-decoration:underline; }
.footer-phone-main span{ color:var(--muted); font-size:0.85em; }
.footer-phones{
    list-style:none;
    margin:0 0 16px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.footer-phones li{
    font-size:0.88rem;
    color:var(--muted);
}
.footer-phones a{
    color:inherit;
    text-decoration:none;
}
.footer-phones a:hover{ color:var(--gold); }
.footer-phones span{
    display:inline-block;
    margin-right:6px;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.04em;
    color:var(--gold);
}

.contact-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:32px;
}

.contact-map{
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--line-soft);
    min-height:420px;
    aspect-ratio:4/3;
    background:var(--bg-deep);
}

.contact-map iframe{
    display:block;
    width:100%;
    height:100%;
    min-height:420px;
    border:0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{
    background:var(--bg-deep);
    border-top:1px solid var(--line-soft);
    padding:80px 6% 36px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:60px;
    margin-bottom:56px;
}

.footer-brand img{
    height:56px;
    width:auto;
    margin-bottom:20px;
}

.footer-brand p{
    color:var(--text-muted);
    line-height:1.7;
    font-size:15px;
    max-width:320px;
}

.footer-social{
    display:flex;
    gap:10px;
    margin-top:24px;
}

.footer-social a{
    width:40px;
    height:40px;
    background:var(--surface);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    text-decoration:none;
    font-size:16px;
    transition:all 0.3s ease;
    border:1px solid var(--line-soft);
}

.footer-social a .icon-svg{ width:17px; height:17px; }

.footer-social a.social-fb{
    color:#fff;
    background:#1877F2;
    border-color:#1877F2;
}
.footer-social a.social-tt{
    color:#fff;
    background:#010101;
    border-color:#25F4EE;
    box-shadow:inset 0 0 0 1px #FE2C55;
}
.footer-social a.social-wa{
    color:#fff;
    background:#25D366;
    border-color:#25D366;
}
.footer-social a.social-phone{
    color:#fff;
    background:#0A84FF;
    border-color:#0A84FF;
}
.footer-social a.social-mail{
    color:#fff;
    background:#EA4335;
    border-color:#EA4335;
}

.footer-social a:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}
.footer-social a.social-fb:hover,
.footer-social a.social-tt:hover,
.footer-social a.social-wa:hover,
.footer-social a.social-phone:hover,
.footer-social a.social-mail:hover{
    color:#fff;
}

.footer-col h4{
    font-family:var(--font-body);
    color:var(--text);
    font-size:13px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    margin-bottom:22px;
    font-weight:600;
}

.footer-col ul{ list-style:none; }

.footer-col ul li{
    margin-bottom:12px;
    color:var(--text-muted);
    font-size:14.5px;
}

.footer-col ul li a{
    color:var(--text-muted);
    text-decoration:none;
    font-size:14.5px;
    transition:color 0.25s ease;
}

.footer-col ul li a:hover{ color:var(--gold); }

/* Liens Rapides = boutons clairement cliquables */
.footer-actions-hint{
    color:var(--text-faint);
    font-size:12.5px;
    margin:-10px 0 16px;
}
.footer-actions{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:0;
}
.footer-actions li{ margin:0; }
.footer-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:12px 16px;
    border-radius:12px;
    border:1px solid rgba(201,162,39,0.35);
    background:rgba(255,255,255,0.04);
    color:var(--text) !important;
    font-size:14.5px !important;
    font-weight:600;
    text-decoration:none;
    transition:transform 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
    cursor:pointer;
}
.footer-btn::after{
    content:"→";
    color:var(--gold);
    font-weight:700;
    margin-left:10px;
}
.footer-btn:hover{
    transform:translateY(-2px);
    border-color:var(--gold);
    background:rgba(201,162,39,0.12);
    color:var(--gold-light) !important;
}
.footer-btn--primary{
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    border-color:transparent;
    color:var(--bg-dark) !important;
}
.footer-btn--primary::after{ color:var(--bg-dark); }
.footer-btn--primary:hover{
    filter:brightness(1.05);
    color:var(--bg-dark) !important;
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding-top:28px;
    border-top:1px solid var(--line-soft);
    color:var(--text-faint);
    font-size:13.5px;
    max-width:var(--container);
    margin:0 auto;
}

/* ==========================================================================
   BOUTON WHATSAPP FLOTTANT
   ========================================================================== */

.whatsapp-btn{
    position:fixed;
    right:26px;
    /* safe-area : évite la barre gestuelle iPhone/Android */
    bottom:calc(26px + env(safe-area-inset-bottom, 0px));
    min-width:58px;
    height:58px;
    padding:0 18px 0 14px;
    background:#25D366;
    border-radius:999px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
    z-index:9999;
    box-shadow:0 10px 30px rgba(37,211,102,0.4);
    font-weight:700;
    font-size:14px;
    letter-spacing:0.02em;
    transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.whatsapp-btn .icon-svg{ width:28px; height:28px; fill:currentColor; stroke:none; flex:0 0 auto; }
.whatsapp-btn-label{ white-space:nowrap; }

.whatsapp-btn:hover{
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 14px 40px rgba(37,211,102,0.55);
}

@media(min-width:901px){
    .whatsapp-btn{ padding:0; width:58px; border-radius:50%; }
    .whatsapp-btn-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
}

/* ==========================================================================
   ANIMATIONS SCROLL + TOUCHE CINÉMA (premium, sobre)
   ========================================================================== */

/* Par défaut visible (si JS bloqué / lent). L’animation ne s’active qu’avec <html class="js"> */
.reveal{
    opacity:1;
    transform:none;
    filter:none;
}

.js .reveal{
    opacity:0;
    transform:translate3d(0, 22px, 0);
    filter:none;
    transition:
        opacity 0.55s var(--ease-out, var(--ease)),
        transform 0.55s var(--ease-out, var(--ease));
}

.js .reveal.visible,
.reveal.visible{
    opacity:1;
    transform:translate3d(0, 0, 0);
    filter:none;
    will-change:auto;
}

/* Photos direction + sections À propos : jamais masquées */
.apropos-equipe .reveal,
.leader-card.reveal{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
}

.reveal-stagger .reveal:nth-child(1){ transition-delay:0.02s; }
.reveal-stagger .reveal:nth-child(2){ transition-delay:0.1s; }
.reveal-stagger .reveal:nth-child(3){ transition-delay:0.18s; }
.reveal-stagger .reveal:nth-child(4){ transition-delay:0.26s; }
.reveal-stagger .reveal:nth-child(5){ transition-delay:0.34s; }
.reveal-stagger .reveal:nth-child(6){ transition-delay:0.42s; }

/* Traits or du surtitre qui s’allongent à l’apparition */
.section-header .surtitle::before,
.section-header .surtitle::after{
    transition:width 0.7s var(--ease), background 0.7s ease, opacity 0.5s ease;
}
.section-header.reveal.visible .surtitle::before,
.section-header.reveal.visible .surtitle::after{
    width:48px;
    background:var(--gold);
    opacity:0.9;
}

/* Hero cinéma */
.hero-new--cinematic .hero-ambient{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
}
.hero-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:0.35;
    animation:orbFloat 12s ease-in-out infinite;
}
.hero-orb--a{
    width:min(48vw, 420px);
    height:min(48vw, 420px);
    top:-8%;
    left:-6%;
    background:radial-gradient(circle, rgba(201,162,39,0.45), transparent 70%);
}
.hero-orb--b{
    width:min(40vw, 360px);
    height:min(40vw, 360px);
    right:-4%;
    bottom:10%;
    background:radial-gradient(circle, rgba(227,197,102,0.28), transparent 70%);
    animation-delay:-4s;
}
.hero-shine{
    position:absolute;
    inset:-20%;
    background:linear-gradient(
        115deg,
        transparent 40%,
        rgba(255,255,255,0.04) 48%,
        rgba(201,162,39,0.08) 50%,
        transparent 58%
    );
    animation:heroSweep 9s var(--ease) infinite;
}
@keyframes orbFloat{
    0%,100%{ transform:translate3d(0,0,0) scale(1); }
    50%{ transform:translate3d(18px, 22px, 0) scale(1.06); }
}
@keyframes heroSweep{
    0%{ transform:translate3d(-30%,0,0); opacity:0; }
    20%{ opacity:1; }
    55%{ opacity:0.6; }
    100%{ transform:translate3d(40%,0,0); opacity:0; }
}

.hero-new--cinematic .hero-eyebrow{ animation-duration:0.7s; animation-delay:0.08s; }
.hero-new--cinematic .hero-title{ animation-duration:0.85s; animation-delay:0.18s; }
.hero-new--cinematic .hero-subtitle{ animation-duration:0.8s; animation-delay:0.32s; }
.hero-new--cinematic .hero-description{ animation-duration:0.8s; animation-delay:0.42s; }
.hero-new--cinematic .live-annonces-pill{ animation:fadeInUp 0.75s var(--ease) 0.5s both; }
.hero-new--cinematic .hero-new-buttons{ animation-duration:0.8s; animation-delay:0.58s; }
.hero-new--cinematic .hero-chips{ animation:fadeInUp 0.75s var(--ease) 0.7s both; }

.gold-shimmer{
    background:linear-gradient(
        105deg,
        var(--gold) 0%,
        var(--gold-light) 35%,
        #fff6d6 50%,
        var(--gold-light) 65%,
        var(--gold) 100%
    );
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
    animation:goldShimmer 4.5s ease-in-out infinite;
}
@keyframes goldShimmer{
    0%,100%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
}

.hero-chip{
    transition:transform 0.35s var(--ease), border-color 0.35s ease, background 0.35s ease;
}
.hero-chip:hover{
    transform:translateY(-3px);
    border-color:rgba(201,162,39,0.45);
    background:rgba(201,162,39,0.1);
}

/* Cartes : légère élévation + lueur or au hover (déjà proche design) */
.stat-card,
.pourquoi-card{
    transition:transform 0.4s var(--ease), border-color 0.35s ease, box-shadow 0.4s var(--ease);
}
.stat-card:hover,
.pourquoi-card:hover{
    transform:translateY(-8px);
    border-color:rgba(201,162,39,0.35);
    box-shadow:0 18px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,162,39,0.08);
}

/* Boutons aimantés (JS ajoute --mx/--my) */
.btn-primary-large.magnetic,
.btn-secondary-large.magnetic{
    transition:transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
    will-change:transform;
}

/* Accélère le rendu des sections hors écran */
.stats-new,
.avant-apres,
.suivi,
.pourquoi,
.remise,
.contact,
.cta-band,
.apropos-projets,
.apropos-equipe,
.diaspora-section{
    content-visibility:auto;
    contain-intrinsic-size:1px 720px;
}

/* Orbs un peu plus discrets sur slideshow (photos déjà riches) */
.hero-new--slideshow .hero-orb{ opacity:0.22; }
.hero-new--slideshow .hero-shine{ opacity:0.7; }

@media (prefers-reduced-motion: reduce){
    .hero-orb,
    .hero-shine,
    .gold-shimmer,
    .hero-new--cinematic .hero-eyebrow,
    .hero-new--cinematic .hero-title,
    .hero-new--cinematic .hero-subtitle,
    .hero-new--cinematic .hero-description,
    .hero-new--cinematic .live-annonces-pill,
    .hero-new--cinematic .hero-new-buttons,
    .hero-new--cinematic .hero-chips{
        animation:none !important;
    }
    .gold-shimmer{
        background:none;
        color:var(--gold) !important;
        -webkit-background-clip:unset;
        background-clip:unset;
    }
    .reveal{
        filter:none;
        transform:none;
        opacity:1;
        transition:none;
    }
}

/* ==========================================================================
   COMPATIBILITÉ — anciennes classes utilisées par les autres pages
   ========================================================================== */

.hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    padding:140px 6% 80px;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    /* Image locale : le site ne depend d'aucune banque d'images externe. */
    background:url("../images/hero-drone.jpg") center/cover no-repeat;
    z-index:-3;
    background-color:var(--bg-card);
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to right, rgba(13,12,10,0.85) 0%, rgba(13,12,10,0.55) 60%, rgba(13,12,10,0.3) 100%);
    z-index:-2;
}

.hero-content{ position:relative; z-index:2; max-width:700px; }

.hero h1{
    font-size:clamp(44px, 7vw, 84px);
    margin-bottom:26px;
    font-weight:600;
}

.hero h1 .gold, .gold{ color:var(--gold); }

.description{
    font-size:18px;
    color:var(--text-muted);
    margin-bottom:40px;
    line-height:1.75;
    max-width:600px;
}

.hero-buttons{ display:flex; gap:16px; flex-wrap:wrap; }

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    padding:100px 6%;
    background:var(--bg-deep);
}

.stat-box{
    text-align:center;
    background:var(--surface);
    padding:34px 20px;
    border-radius:var(--radius);
    border:1px solid var(--line-soft);
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
    min-height:130px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.stat-box:hover{ transform:translateY(-6px); border-color:var(--line); }

.stat-box h2{ color:var(--gold); font-size:44px; margin-bottom:8px; }

.stat-box p{
    color:var(--text-muted);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.12em;
}

.departements{ background:var(--bg-deep); }

.departement-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.departement-card{
    position:relative;
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line-soft);
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
    cursor:pointer;
}

.departement-card:hover{ transform:translateY(-6px); border-color:var(--line); }

.departement-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:transform 0.7s var(--ease);
}

.departement-card:hover img{ transform:scale(1.06); }

.departement-card .card-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(10,9,8,0.95), rgba(10,9,8,0.35) 50%, transparent);
}

.departement-card .card-info{
    position:absolute;
    bottom:0; left:0; right:0;
    padding:28px 24px;
}

.departement-card .card-info h3{
    color:var(--gold);
    font-size:19px;
    margin-bottom:10px;
}

.departement-card .card-info p{
    color:var(--text-muted);
    line-height:1.6;
    font-size:14px;
}

.catalogue{ background:var(--bg-dark); }

.logements-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.logement-card{
    position:relative;
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line-soft);
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
}

.logement-card:hover{ transform:translateY(-6px); border-color:var(--line); }

.logement-card .img-container{ position:relative; overflow:hidden; }

.logement-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    transition:transform 0.7s var(--ease);
}

.logement-card:hover img{ transform:scale(1.06); }

.logement-card .img-container .tag{
    position:absolute;
    top:16px;
    right:16px;
    background:var(--gold);
    color:var(--bg-dark);
    padding:5px 14px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.06em;
}

.logement-card .logement-info{ padding:26px; }

.logement-card .logement-info h3{
    font-size:21px;
    margin-bottom:10px;
    color:var(--text);
}

.logement-card .logement-info .specs{
    display:flex;
    gap:18px;
    margin-bottom:22px;
    color:var(--text-muted);
    font-size:13.5px;
}

.logement-card .logement-info .specs span{
    display:flex;
    align-items:center;
    gap:6px;
}

.realisations{ background:var(--bg-deep); }

.realisations-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.realisation-card{
    background:var(--surface);
    padding:40px 30px;
    border-radius:var(--radius);
    border:1px solid var(--line-soft);
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
    text-align:center;
}

.realisation-card:hover{ transform:translateY(-6px); border-color:var(--line); }

.realisation-card .icon{
    width:60px;
    height:60px;
    background:var(--gold-soft);
    color:var(--gold);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 22px;
    font-size:26px;
}

.realisation-card h3{
    color:var(--gold);
    font-size:20px;
    margin-bottom:12px;
}

.realisation-card p{ color:var(--text-muted); line-height:1.7; font-size:14.5px; }

.about{ background:var(--bg-dark); }

.about-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    max-width:var(--container);
    margin:0 auto;
}

.about-text h2{ font-size:clamp(30px, 4vw, 42px); margin-bottom:22px; }

.about-text .about-desc{
    color:var(--text-muted);
    font-size:16px;
    line-height:1.8;
    margin-bottom:32px;
}

.about-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.feature{ display:flex; gap:14px; align-items:flex-start; }

.feature .dot{
    width:8px;
    height:8px;
    background:var(--gold);
    border-radius:50%;
    margin-top:8px;
    flex-shrink:0;
}

.feature p{ color:var(--text-muted); font-size:14.5px; }

.about-image{ position:relative; }

.about-image img{
    width:100%;
    border-radius:var(--radius-lg);
    border:1px solid var(--line-soft);
}

.about-image .badge-img{
    position:absolute;
    bottom:24px;
    left:24px;
    background:rgba(13,12,10,0.88);
    backdrop-filter:blur(12px);
    padding:22px 26px;
    border-radius:var(--radius);
    border:1px solid var(--line);
}

.about-image .badge-img h4{
    color:var(--gold);
    font-size:28px;
    margin-bottom:4px;
}

.about-image .badge-img p{ color:var(--text-muted); font-size:13px; }

.galerie-3d{ background:var(--bg-dark); }

.gallery-container{
    display:flex;
    justify-content:center;
    gap:32px;
    flex-wrap:wrap;
    perspective:1000px;
}

.gallery-item{ width:320px; height:420px; }

.gallery-card{
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
    transition:transform 0.8s var(--ease);
}

.gallery-item:hover .gallery-card{ transform:rotateY(180deg); }

.gallery-front, .gallery-back{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--line);
}

.gallery-front img{ width:100%; height:100%; object-fit:cover; }

.gallery-back{
    background:var(--bg-card);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:40px 30px;
    transform:rotateY(180deg);
    color:var(--text);
    text-align:center;
}

.gallery-back h3{ font-size:26px; color:var(--gold); margin-bottom:14px; }

.gallery-back p{ font-size:16px; margin-bottom:26px; color:var(--text-muted); }

/* Anciennes classes hero premium (login/pages secondaires) */
.premium-card{
    background:var(--surface);
    backdrop-filter:blur(16px);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:34px 30px;
    box-shadow:var(--shadow-card);
}

.premium-title{ font-size:24px; margin-bottom:24px; color:var(--text); }
.premium-advantages{ display:flex; flex-direction:column; gap:13px; margin-bottom:26px; }
.advantage{ display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:14.5px; }
.check{ color:var(--gold); font-weight:700; }
.premium-stats{
    background:var(--gold-soft);
    border-radius:14px;
    padding:18px 22px;
    margin-bottom:22px;
    border:1px solid var(--line);
}
.big-number{ font-size:38px; font-weight:700; color:var(--gold); font-family:var(--font-display); }
.label{ color:var(--text-muted); font-size:14px; }
.stars{ color:var(--gold); font-size:18px; letter-spacing:3px; }
.rating-text{ color:var(--text); font-size:15px; font-weight:600; }

/* ==========================================================================
   HERO — CHIPS DE CONFIANCE
   ========================================================================== */

.hero-chips{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:44px;
    animation:fadeInUp 0.9s var(--ease) 0.8s both;
}

.hero-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 18px;
    border-radius:999px;
    background:rgba(13,12,10,0.55);
    backdrop-filter:blur(12px);
    border:1px solid var(--line);
    color:var(--text-muted);
    font-size:13.5px;
    font-weight:500;
}

.hero-chip strong{ color:var(--gold); font-weight:700; }

/* ==========================================================================
   SECTION VIDÉOS DRONE
   ========================================================================== */

.drone-section{ background:var(--bg-deep); }

.drone-section[hidden]{ display:none; }

.drone-featured,
.drone-grid{
    max-width:var(--container);
    margin-left:auto;
    margin-right:auto;
}

.drone-featured{
    margin-bottom:24px;
}

.drone-featured video,
.drone-video video{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    background:var(--bg-card);
    box-shadow:var(--shadow-card);
}

.drone-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.drone-video[hidden]{ display:none; }

@media(max-width:768px){
    .drone-grid{ grid-template-columns:1fr; gap:16px; }
}

/* ==========================================================================
   BANDEAU CTA FINAL
   ========================================================================== */

.cta-band{
    position:relative;
    background:url("../images/cta-drone.jpg") center/cover no-repeat;
    padding:130px 6%;
    overflow:hidden;
}

.cta-band::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, rgba(10,9,8,0.94) 30%, rgba(10,9,8,0.72) 100%);
}

.cta-band-inner{
    position:relative;
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.cta-band .surtitle{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:var(--gold);
    font-size:12px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:20px;
}

.cta-band h2{
    font-size:clamp(32px, 4.5vw, 52px);
    margin-bottom:20px;
}

.cta-band h2 .gold{ font-style:italic; }

.cta-band p{
    color:var(--text-muted);
    font-size:17px;
    line-height:1.75;
    margin-bottom:40px;
}

.cta-band-buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

/* ==========================================================================
   PAGES LOGEMENTS (fiches détaillées)
   ========================================================================== */

.logement-detail-section{
    padding:150px 6% 110px;
    background:var(--bg-dark);
    min-height:100vh;
}

.logement-detail-card{
    background:var(--surface);
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    padding:44px;
    max-width:1100px;
    margin:0 auto;
    box-shadow:var(--shadow-card);
}

.logement-hero{
    position:relative;
    height:480px;
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:48px;
}

.logement-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(10,9,8,0.25) 0%, transparent 35%, rgba(10,9,8,0.92) 100%);
}

.logement-hero-content{
    position:absolute;
    bottom:36px;
    left:36px;
    z-index:2;
}

.logement-hero h1{
    font-size:clamp(36px, 5vw, 56px);
    color:var(--text);
    margin-bottom:8px;
}

.logement-hero h1 span{ color:var(--gold); font-style:italic; }

.logement-hero p{
    color:var(--text-muted);
    font-size:17px;
}

.logement-specs-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:18px;
    margin-bottom:36px;
}

.spec-item{
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    padding:28px 20px;
    text-align:center;
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
}

.spec-item:hover{
    transform:translateY(-5px);
    border-color:var(--line);
}

.spec-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--gold-soft);
    font-size:22px;
    margin-bottom:14px;
    line-height:1;
}

.spec-item h3{
    color:var(--gold);
    font-size:16px;
    margin-bottom:4px;
}

.spec-item p{
    color:var(--text-muted);
    font-size:14.5px;
}

.plan-image-container{
    text-align:center;
    margin-bottom:36px;
}

.plan-image-container img{
    width:100%;
    height:auto;
    border-radius:var(--radius);
    border:1px solid var(--line-soft);
    box-shadow:var(--shadow-card);
    object-fit:contain;
}

.contact-info{
    text-align:center;
    margin-top:36px;
    padding-top:28px;
    border-top:1px solid var(--line-soft);
}

.contact-info p{
    color:var(--text-muted);
    font-size:16px;
    margin-bottom:8px;
}

.contact-info a{
    color:var(--gold);
    font-family:var(--font-display);
    font-size:24px;
    font-weight:600;
    text-decoration:none;
    transition:color 0.25s ease;
}

.contact-info a:hover{ color:var(--gold-light); }

/* ==========================================================================
   PAGE DE CONNEXION
   ========================================================================== */

.login-section{
    min-height:100vh;
    min-height:100svh;
    padding:140px 20px 80px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(201,162,39,0.07) 0%, transparent 50%),
        var(--bg-dark);
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-card{
    background:var(--surface);
    padding:44px 40px;
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    max-width:420px;
    width:100%;
    box-shadow:var(--shadow-card);
}

.login-logo{
    text-align:center;
    margin-bottom:26px;
}

.login-logo img{ width:88px; height:auto; }

.login-card h1{
    color:var(--text);
    font-size:26px;
    text-align:center;
    margin-bottom:30px;
}

.form-group{ margin-bottom:20px; }

.form-group label{
    color:var(--text-muted);
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.form-group input{
    width:100%;
    padding:13px 16px;
    background:var(--bg-deep);
    border:1px solid var(--line-soft);
    border-radius:12px;
    color:var(--text);
    /* 16px minimum : en dessous, iOS Safari zoome automatiquement sur le champ */
    font-size:16px;
    font-family:var(--font-body);
    transition:border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-group input:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px var(--gold-soft);
}

.error-message{
    color:#ff8080;
    font-size:14px;
    margin-bottom:20px;
    text-align:center;
    padding:11px;
    background:rgba(255,107,107,0.08);
    border:1px solid rgba(255,107,107,0.25);
    border-radius:12px;
}

.btn-login{
    width:100%;
    padding:15px;
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color:var(--bg-dark);
    border:none;
    border-radius:999px;
    font-size:15px;
    font-weight:700;
    font-family:var(--font-body);
    cursor:pointer;
    transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    box-shadow:0 8px 24px rgba(201,162,39,0.3);
}

.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(201,162,39,0.42);
}

.bio-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:22px 0 16px;
    color:var(--text-faint);
    font-size:13px;
}
.bio-divider::before,
.bio-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line-soft);
}
.btn-bio{
    width:100%;
    padding:14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--text);
    font-family:var(--font-body);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:border-color 0.25s ease, background 0.25s ease;
}
.btn-bio:hover{
    border-color:var(--gold);
    background:var(--gold-soft);
}
.bio-hint{
    margin-top:12px;
    text-align:center;
    color:var(--text-faint);
    font-size:12.5px;
    line-height:1.5;
}
.bio-msg{
    margin-top:12px;
    text-align:center;
    font-size:13.5px;
}
.btn-bio-setup{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    padding:12px 22px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--gold-soft);
    color:var(--gold);
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    font-family:var(--font-body);
}
.btn-bio-setup:hover{ border-color:var(--gold); }

.login-footer{
    margin-top:24px;
    text-align:center;
}

.login-footer p{ color:var(--text-faint); font-size:14px; }

.login-footer a{
    color:var(--gold);
    text-decoration:none;
    font-weight:600;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:1200px){
    .process-grid, .implantations-grid{ grid-template-columns:repeat(2,1fr); }
    .process-grid--four{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .pourquoi-grid{ grid-template-columns:repeat(2,1fr); }
    .stats-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:1100px){
    .departement-grid, .logements-grid, .realisations-grid{ grid-template-columns:repeat(2,1fr); }
    .stats{ grid-template-columns:repeat(2,1fr); }
    .about-container, .contact-container, .footer-grid{ grid-template-columns:1fr; }
    .carousel-container{ height:500px; }
    .carousel-item{ width:310px; height:430px; }
}

@media(max-width:900px){
    .suivi-container{ grid-template-columns:1fr; gap:44px; }
    .suivi-cta{ text-align:center; }
    .suivi-cta p{ margin-left:auto; margin-right:auto; }
    .process-grid, .implantations-grid, .process-grid--four{ grid-template-columns:repeat(2,1fr); }
    .remise-gallery{ grid-template-columns:1fr; }
}

@media(max-width:768px){
    section{ padding:80px 20px; }

    .navbar,
    .navbar.scrolled{
        /* Padding fixe mobile : pas de saut logo/burger au scroll */
        padding:14px 20px;
        background:rgba(13,12,10,0.95);
    }

    .navbar.scrolled{
        border-bottom:1px solid var(--line-soft);
        box-shadow:0 10px 30px rgba(0,0,0,0.35);
    }

    body.menu-open .navbar,
    body.menu-open .navbar.scrolled{
        padding-right:calc(20px + var(--scrollbar-comp, 0px));
    }

    .logo-img{ height:46px; }

    .menu-burger{ display:flex; }

    .nav-links{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        height:100dvh;
        max-height:100dvh;
        background:rgba(10,9,8,0.98);
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:28px;
        padding:88px 20px 32px;
        margin:0;
        z-index:10001;
        /* GPU : translate3d — pas de left (évite reflow / jank) */
        transform:translate3d(-100%, 0, 0);
        transition:transform 0.4s var(--ease), visibility 0s linear 0.4s;
        visibility:hidden;
        pointer-events:none;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        will-change:transform;
        backface-visibility:hidden;
        contain:layout paint;
    }

    .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:19px;
        opacity:0;
        transform:translate3d(0, 12px, 0);
        transition:opacity 0.35s var(--ease), transform 0.35s var(--ease);
    }

    .nav-links.active a{
        opacity:1;
        transform:translate3d(0, 0, 0);
    }

    /* Stagger uniquement à l’ouverture (pas à la fermeture = pas de délai parasite) */
    .nav-links.active:not(.is-closing) li:nth-child(1) a{ transition-delay:0.05s; }
    .nav-links.active:not(.is-closing) li:nth-child(2) a{ transition-delay:0.09s; }
    .nav-links.active:not(.is-closing) li:nth-child(3) a{ transition-delay:0.13s; }
    .nav-links.active:not(.is-closing) li:nth-child(4) a{ transition-delay:0.17s; }
    .nav-links.active:not(.is-closing) li:nth-child(5) a{ transition-delay:0.21s; }
    .nav-links.active:not(.is-closing) li:nth-child(6) a{ transition-delay:0.25s; }
    .nav-links.active:not(.is-closing) li:nth-child(7) a{ transition-delay:0.29s; }
    .nav-links.active:not(.is-closing) li:nth-child(8) a{ transition-delay:0.33s; }

    .nav-links.is-closing a,
    .nav-links.is-closing .nav-mobile-actions{
        transition-delay:0s !important;
    }

    .btn-appel{ display:none; }

    .nav-mobile-actions{
        display:flex;
        flex-direction:column;
        gap:12px;
        width:min(320px, 86%);
        margin-top:20px;
        opacity:0;
        transform:translate3d(0, 12px, 0);
        transition:opacity 0.35s var(--ease), transform 0.35s var(--ease);
    }
    .nav-links.active:not(.is-closing) .nav-mobile-actions{
        opacity:1;
        transform:translate3d(0, 0, 0);
        transition-delay:0.36s;
    }
    .nav-links.active.is-closing .nav-mobile-actions{
        opacity:0;
        transform:translate3d(0, 8px, 0);
    }
    .nav-mobile-actions a{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        padding:14px 18px;
        border-radius:999px;
        font-size:15px !important;
        font-weight:600;
        text-decoration:none;
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    .nav-mobile-actions .nma-call{
        background:var(--gold);
        color:var(--bg-dark);
    }
    .nav-mobile-actions .nma-wa{
        border:1px solid rgba(201,162,39,0.45);
        color:var(--gold-light);
    }

    .hero-new{
        padding:130px 20px 90px;
        background-attachment:scroll;
    }

    .hero-new-buttons{ flex-direction:column; align-items:stretch; }

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

    .stats{ grid-template-columns:1fr; gap:18px; padding:80px 20px; }

    .departement-grid, .logements-grid, .realisations-grid{ grid-template-columns:1fr; }

    .about-features{ grid-template-columns:1fr; }

    .footer-bottom{ flex-direction:column; text-align:center; }

    .footer-grid{ grid-template-columns:1fr; gap:44px; }

    .whatsapp-btn{
        width:auto;
        min-width:52px;
        height:52px;
        right:14px;
        bottom:calc(14px + env(safe-area-inset-bottom, 0px));
        padding:0 14px 0 12px;
        border-radius:999px;
    }

    .carousel-container{ height:480px; }
    .carousel-item{ width:280px; height:410px; }
    .carousel-item.prev, .carousel-item.next{ opacity:0; pointer-events:none; }
    .carousel-btn{ width:44px; height:44px; font-size:22px; }

    .logement-detail-section{ padding:120px 20px 80px; }
    .logement-detail-card{ padding:26px 20px; }
    .logement-hero{ height:320px; }
    .logement-hero-content{ left:22px; bottom:22px; }
    .cta-band{ padding:90px 20px; }
}

@media(max-width:600px){
    .stats-grid, .pourquoi-grid, .process-grid, .process-grid--four, .implantations-grid{ grid-template-columns:1fr; }
    .suivi-stats{ grid-template-columns:repeat(3,1fr); gap:8px; }
    .contact-card{ padding:30px 24px; }
    .remise-quote{ padding:48px 26px; }
    .carousel-buttons{ flex-direction:column; }
    .carousel-buttons .btn-card,
    .carousel-buttons .btn-whatsapp{ width:100%; justify-content:center; }
}

/* ==========================================================================
   PAGE DIASPORA
   ========================================================================== */

.diaspora-hero{
    position:relative;
    min-height:88vh;
    min-height:88svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:150px 6% 100px;
    overflow:hidden;
    text-align:center;
}

.diaspora-hero-bg{
    position:absolute;
    inset:0;
    background:url("../images/apropos/hero-equipe.jpg?v=2") center/cover no-repeat;
    z-index:0;
}

.diaspora-hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(13,12,10,0.88) 0%, rgba(13,12,10,0.72) 50%, var(--bg-dark) 100%);
}

.diaspora-hero-content{
    position:relative;
    z-index:1;
    max-width:820px;
}

.diaspora-hero h1{
    font-size:clamp(34px, 5.5vw, 58px);
    margin:18px 0 22px;
}

.diaspora-trust-chips{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:0 0 28px;
}
.diaspora-trust-chips span{
    padding:8px 14px;
    border:1px solid rgba(201,162,39,0.35);
    border-radius:999px;
    background:rgba(13,12,10,0.45);
    color:var(--gold-light);
    font-size:0.88rem;
    font-weight:600;
    letter-spacing:0.01em;
}

.diaspora-section{
    padding:100px 6%;
    background:var(--bg-dark);
}

.diaspora-section.alt{ background:var(--bg-deep); }

.diaspora-fears,
.diaspora-steps,
.diaspora-benefits{
    display:grid;
    gap:22px;
    max-width:var(--container);
    margin:0 auto;
}

.diaspora-fears{ grid-template-columns:repeat(2,1fr); }
.diaspora-steps{ grid-template-columns:repeat(4,1fr); }
.diaspora-benefits{ grid-template-columns:repeat(3,1fr); }

.diaspora-fear,
.diaspora-step,
.diaspora-benefit{
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    padding:32px 28px;
    transition:transform 0.4s var(--ease), border-color 0.4s ease;
}

.diaspora-fear:hover,
.diaspora-step:hover,
.diaspora-benefit:hover{
    transform:translateY(-5px);
    border-color:var(--line);
}

.diaspora-fear h3,
.diaspora-step h3,
.diaspora-benefit h3{
    color:var(--text);
    font-size:20px;
    margin-bottom:12px;
}

.diaspora-fear p,
.diaspora-step p,
.diaspora-benefit p{
    color:var(--text-muted);
    font-size:15px;
    line-height:1.7;
}

.diaspora-step-num{
    display:block;
    font-family:var(--font-display);
    font-style:italic;
    color:var(--gold);
    font-size:15px;
    margin-bottom:14px;
}

.diaspora-cta-inline{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:48px;
}

.diaspora-note{
    text-align:center;
    color:var(--text-muted);
    max-width:640px;
    margin:40px auto 0;
    font-size:15.5px;
    line-height:1.7;
}

/* ==========================================================================
   ESPACE CLIENT (dashboard)
   ========================================================================== */

.dash-section{
    min-height:100vh;
    min-height:100svh;
    padding:130px 6% 80px;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(201,162,39,0.06) 0%, transparent 45%),
        var(--bg-dark);
}

.dash-wrap{
    max-width:1100px;
    margin:0 auto;
}

.dash-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:36px;
}

.dash-header h1{
    font-size:clamp(28px, 4vw, 38px);
    margin-bottom:8px;
}

.dash-header .welcome{
    color:var(--text-muted);
    font-size:16px;
}

.dash-header .welcome strong{ color:var(--text); }

.btn-logout{
    display:inline-flex;
    align-items:center;
    padding:11px 22px;
    border-radius:999px;
    background:transparent;
    border:1px solid rgba(255,107,107,0.35);
    color:#ff8a8a;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    transition:background 0.25s ease, border-color 0.25s ease;
}

.btn-logout:hover{
    background:rgba(255,107,107,0.1);
    border-color:rgba(255,107,107,0.55);
}

.dash-card{
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-radius:var(--radius-lg);
    padding:32px;
    margin-bottom:22px;
}

.dash-card h2{
    font-size:22px;
    margin-bottom:22px;
    color:var(--text);
}

.dash-pays-form .form-group{ margin-bottom:16px; max-width:420px; }
.dash-pays-filter,
.dash-pays-select{
    width:100%;
    padding:13px 16px;
    background:var(--bg-deep);
    border:1px solid var(--line-soft);
    border-radius:12px;
    color:var(--text);
    font-size:16px;
    font-family:var(--font-body);
}
.dash-pays-filter{ margin-bottom:10px; }
.dash-pays-select{
    height:220px;
}
.dash-pays-select option{
    background:var(--bg-deep);
    color:var(--text);
    padding:6px 4px;
}
.dash-pays-filter:focus,
.dash-pays-select:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px var(--gold-soft);
}
.dash-photos-form .form-group{ max-width:480px; }
.dash-photos-form input[type="file"],
.dash-photos-form input[type="text"]{
    width:100%;
    padding:13px 16px;
    background:var(--bg-deep);
    border:1px solid var(--line-soft);
    border-radius:12px;
    color:var(--text);
    font-size:16px;
    font-family:var(--font-body);
}
.dash-photos-form input[type="file"]:focus,
.dash-photos-form input[type="text"]:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px var(--gold-soft);
}
.alert-success{
    color:#5fd97e;
    font-size:14px;
    text-align:center;
    padding:11px;
    background:rgba(95,217,126,0.08);
    border:1px solid rgba(95,217,126,0.25);
    border-radius:12px;
}

.dash-bridge .welcome{ margin-top:-8px; }
.dash-bridge-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.btn-voir-projet--ghost{
    background:transparent;
    border:1px solid var(--line);
    color:var(--text-muted);
}
.btn-voir-projet--ghost:hover{
    border-color:var(--gold);
    color:var(--gold-light);
}

.dash-meta{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:14px;
    margin-bottom:8px;
}

.dash-meta-item{
    background:var(--bg-deep);
    border:1px solid var(--line-soft);
    border-radius:14px;
    padding:16px 18px;
}

.dash-meta-item span{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--text-faint);
    margin-bottom:6px;
    font-weight:600;
}

.dash-meta-item strong{
    color:var(--text);
    font-size:15px;
    font-weight:600;
}

.projets-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:20px;
}

.projet-card{
    background:var(--bg-deep);
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    padding:26px;
    transition:transform 0.35s var(--ease), border-color 0.35s ease;
}

.projet-card:hover{
    transform:translateY(-4px);
    border-color:var(--line);
}

.projet-card h3{
    color:var(--text);
    font-size:20px;
    margin-bottom:14px;
}

.projet-card .meta-line{
    color:var(--text-muted);
    font-size:14px;
    margin:5px 0;
}

.avancement-bar{
    width:100%;
    height:10px;
    background:rgba(255,255,255,0.08);
    border-radius:999px;
    overflow:hidden;
    margin:16px 0 10px;
}

.avancement-fill{
    height:100%;
    background:linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius:999px;
    min-width:0;
    transition:width 0.6s var(--ease);
}

.avancement-label{
    color:var(--gold);
    font-size:13px;
    font-weight:600;
    margin-bottom:10px;
}

.projet-card .commentaire,
.suivi-commentaire{
    color:var(--text-muted);
    font-size:14px;
    line-height:1.65;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line-soft);
}

.btn-voir-projet{
    display:inline-flex;
    margin-top:18px;
    padding:11px 20px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--gold), var(--gold-light));
    color:var(--bg-dark);
    text-decoration:none;
    font-weight:700;
    font-size:13.5px;
    transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn-voir-projet:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(201,162,39,0.35);
}

.dash-empty{
    color:var(--text-muted);
    font-style:italic;
    padding:20px 0;
}

.suivi-item{
    background:var(--bg-deep);
    border:1px solid var(--line-soft);
    border-left:3px solid var(--gold);
    border-radius:12px;
    padding:18px 20px;
    margin-bottom:12px;
}

.suivi-date{
    color:var(--text-faint);
    font-size:13px;
    margin-bottom:8px;
}

.photos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:14px;
}

.photo-item{
    border-radius:12px;
    overflow:hidden;
    aspect-ratio:4/3;
    background:var(--bg-deep);
    border:1px solid var(--line-soft);
    cursor:pointer;
    transition:border-color 0.3s ease;
}

.photo-item:hover{ border-color:var(--line); }

.photo-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.94);
    z-index:10000;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.lightbox.active{ display:flex; }

.lightbox img{
    max-width:min(920px, 94vw);
    max-height:88vh;
    border-radius:12px;
    border:1px solid var(--line);
}

.lightbox-close{
    position:absolute;
    top:24px;
    right:28px;
    color:var(--text);
    font-size:36px;
    cursor:pointer;
    line-height:1;
}

@media(max-width:900px){
    .diaspora-steps{ grid-template-columns:repeat(2,1fr); }
    .diaspora-benefits{ grid-template-columns:1fr; }
}

@media(max-width:768px){
    .diaspora-fears{ grid-template-columns:1fr; }
    .diaspora-steps{ grid-template-columns:1fr; }
    .diaspora-hero{ padding:130px 20px 80px; }
    .diaspora-section{ padding:80px 20px; }
    .dash-section{ padding:120px 20px 70px; }
    .dash-card{ padding:24px 20px; }
}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
    .reveal{ opacity:1; transform:none; }
    .page-transition{ display:none !important; }
}

/* ==========================================================================
   TRANSITION TYPE CHANGEMENT DE PAGE
   ========================================================================== */
.page-transition{
    position:fixed;
    inset:0;
    z-index:20000;
    pointer-events:none;
    visibility:hidden;
}

.page-transition.is-covering,
.page-transition.is-revealing{
    visibility:visible;
    pointer-events:auto;
}

.page-transition-panel{
    position:absolute;
    inset:0;
    background:
        linear-gradient(145deg, #0a0908 0%, #16130e 45%, #1a160f 100%);
    transform:translateY(100%);
    transition:transform 0.28s cubic-bezier(0.76, 0, 0.24, 1);
}

.page-transition.is-covering .page-transition-panel{
    transform:translateY(0);
}

.page-transition.is-revealing .page-transition-panel{
    transform:translateY(-100%);
    transition-duration:0.32s;
}

.page-transition-brand{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.18s ease, transform 0.18s ease;
    z-index:1;
}

.page-transition.is-covering .page-transition-brand{
    opacity:1;
    transform:translateY(0);
    transition-delay:0.08s;
}

.page-transition.is-revealing .page-transition-brand{
    opacity:0;
    transition-delay:0s;
}

.page-transition-name{
    font-family:var(--font-display);
    font-size:clamp(1.6rem, 4vw, 2.4rem);
    color:#fff;
    letter-spacing:0.04em;
    font-weight:600;
}

.page-transition-name em{
    font-style:normal;
    color:var(--gold-light);
}

.page-transition-line{
    width:56px;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    display:block;
}

body.page-enter,
body.page-enter-active{
    opacity:1 !important;
    transition:none !important;
}

.section-page-in{
    animation:sectionPageIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sectionPageIn{
    from{
        opacity:0.4;
        transform:translateY(18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================================================================
   PAGE À PROPOS — Entreprise & équipe
   ========================================================================== */
.apropos-hero{
    position:relative;
    min-height:min(78vh, 680px);
    display:flex;
    align-items:flex-end;
    padding:160px 6% 80px;
    overflow:hidden;
}

.apropos-hero-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center 25%;
    transform:scale(1.05);
    filter:saturate(1.1) contrast(1.05) brightness(1.1);
    animation:aproposKen 24s var(--ease) infinite alternate;
}

@keyframes aproposKen{
    from{ transform:scale(1.05) translateY(0); }
    to{ transform:scale(1.12) translateY(-2%); }
}

.apropos-hero-veil{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(13,12,10,0.3) 0%, rgba(13,12,10,0.42) 45%, rgba(13,12,10,0.94) 100%),
        radial-gradient(ellipse at 50% 15%, rgba(201,162,39,0.2), transparent 55%);
}

.apropos-hero-slides{
    position:absolute;
    inset:0;
}

.apropos-hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center 30%;
    opacity:0;
    transform:scale(1.05);
    transition:opacity 1.4s ease;
    filter:saturate(1.08) contrast(1.04) brightness(1.06);
}

.apropos-hero-slide.active{
    opacity:1;
    animation:aproposKen 24s var(--ease) infinite alternate;
}

.leaders-grid--four{
    grid-template-columns:repeat(4, 1fr);
}

.leaders-grid--three{
    grid-template-columns:repeat(3, 1fr);
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
}

.leaders-grid--four .leader-body h3,
.leaders-grid--three .leader-body h3{
    font-size:1.15rem;
}

.leader-social{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:14px;
    color:var(--gold-light);
    font-size:0.88rem;
    font-weight:600;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.leader-social:hover{
    color:var(--gold);
    border-bottom-color:rgba(201,162,39,0.5);
}
.leader-social .icon-svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
}

.leader-card--discreet{
    border-color:rgba(212,175,55,0.18);
}
.leader-card--discreet .leader-glow{
    opacity:0.35;
}
.leader-note{
    margin:12px 0 0;
    padding:10px 12px;
    border-radius:12px;
    font-size:12px;
    line-height:1.45;
    letter-spacing:0.02em;
    color:rgba(247,242,232,0.72);
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(212,175,55,0.16);
}

.leader-bio{
    color:var(--text-muted);
    font-size:0.9rem;
    line-height:1.65;
    margin:10px 0 12px;
}

/* ---- Confiance / direction ---- */
.apropos-famille{
    padding:80px 6%;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(201,162,39,0.12), transparent 55%),
        var(--bg-deep);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.apropos-famille-inner{
    max-width:var(--container);
    margin:0 auto;
}
.apropos-famille h2{
    font-size:clamp(1.8rem, 4vw, 2.8rem);
    margin:12px 0 20px;
}
.apropos-famille-lead{
    max-width:720px;
    color:var(--text-muted);
    font-size:1.05rem;
    line-height:1.75;
    margin-bottom:40px;
}
.famille-points{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}
.famille-point{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:28px 24px;
}
.famille-point h3{
    color:var(--gold-light);
    font-size:1.15rem;
    margin-bottom:12px;
}
.famille-point p{
    color:var(--text-muted);
    font-size:0.93rem;
    line-height:1.65;
}
.entreprise-gallery--compact{
    grid-template-columns:1fr;
    max-width:900px;
    margin:0 auto;
    grid-auto-rows:minmax(200px, 28vw);
}
.entreprise-gallery--compact .eg-wide{
    grid-column:auto;
}

@media(max-width:980px){
    .famille-points{ grid-template-columns:1fr; max-width:520px; }
}

.apropos-hero-content{
    position:relative;
    z-index:2;
    max-width:800px;
}

.apropos-hero-content h1{
    font-size:clamp(2.2rem, 5.5vw, 3.8rem);
    margin:14px 0 20px;
    color:#fff;
    text-shadow:0 4px 24px rgba(0,0,0,0.55);
}

.apropos-hero-content .hero-description{
    color:rgba(255,255,255,0.92);
    max-width:620px;
    text-shadow:0 2px 14px rgba(0,0,0,0.45);
}

.apropos-mission{
    background:var(--bg-deep);
}

.apropos-mission-grid{
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:60px;
    align-items:center;
}

.apropos-mission-text h2{
    font-size:clamp(1.8rem, 3.5vw, 2.6rem);
    margin:12px 0 22px;
}

.apropos-mission-text p{
    color:var(--text-muted);
    margin-bottom:16px;
    line-height:1.7;
}

.apropos-mission-text strong{ color:var(--gold-light); }
.apropos-mission-text em{ color:var(--gold-light); font-style:italic; }

.apropos-mission-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.apropos-stat{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 20px;
    text-align:center;
}

.apropos-stat h3{
    font-size:2.2rem;
    color:var(--gold);
    margin-bottom:6px;
}

.apropos-stat p{
    color:var(--text-muted);
    font-size:0.92rem;
}

.apropos-equipe{
    background:#14120f;
}

.apropos-equipe .section-header h2{ color:#fff; }
.apropos-equipe .section-header .text{ color:rgba(255,255,255,0.78); }

.leaders-grid{
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.leader-card{
    background:linear-gradient(165deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
    border:1px solid rgba(201,162,39,0.35);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.leader-card:hover{
    transform:translateY(-8px);
    border-color:rgba(201,162,39,0.65);
    box-shadow:0 28px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,162,39,0.2);
}

.leader-card--featured{
    border-color:rgba(201,162,39,0.55);
    background:linear-gradient(165deg, rgba(201,162,39,0.18), rgba(255,255,255,0.06));
}

.leader-photo{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:#1a1814;
}

.leader-photo img{
    width:100%;
    height:100%;
    min-height:280px;
    object-fit:cover;
    object-position:center top;
    display:block;
    opacity:1 !important;
    visibility:visible !important;
    filter:brightness(1.08) contrast(1.04);
    transition:transform 0.7s var(--ease);
}

.leader-card:hover .leader-photo img{
    transform:scale(1.05);
}

.leader-glow{
    position:absolute;
    inset:auto 0 0 0;
    height:28%;
    background:linear-gradient(180deg, transparent, rgba(20,18,15,0.55));
    pointer-events:none;
}

.leader-body{
    padding:22px 22px 26px;
    background:rgba(28,25,20,0.95);
}

.leader-role{
    color:#f0c95a;
    font-size:13px;
    font-weight:800;
    letter-spacing:0.18em;
    text-transform:uppercase;
    margin-bottom:8px;
}

.leader-body h3{
    font-size:1.4rem;
    margin-bottom:8px;
    color:#ffffff;
}

.leader-traits{
    color:#e3c566;
    font-size:0.95rem;
    font-weight:600;
    margin-bottom:12px;
    letter-spacing:0.02em;
}

.leader-bio{
    color:rgba(255,255,255,0.82);
    font-size:0.98rem;
    line-height:1.55;
}

.apropos-terrain{
    background:#14120f;
    padding-top:0;
}

.apropos-terrain .section-header h2{ color:#fff; }
.apropos-terrain .section-header .text{ color:rgba(255,255,255,0.78); }

.entreprise-gallery{
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:minmax(140px, 18vw);
    gap:12px;
}

.eg-item{
    position:relative;
    border:1px solid rgba(201,162,39,0.28);
    border-radius:16px;
    overflow:hidden;
    padding:0;
    cursor:pointer;
    background:#1a1814;
    isolation:isolate;
}

.eg-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:brightness(1.08);
    transition:transform 0.55s var(--ease), filter 0.55s var(--ease);
}

.eg-item:hover img,
.eg-item:focus-visible img{
    transform:scale(1.06);
    filter:brightness(1.15);
}

.eg-item:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
}

.eg-wide{ grid-column:span 2; grid-row:span 2; }
.eg-tall{ grid-row:span 2; }

.eg-caption{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:2;
    color:#fff;
    font-size:0.9rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-shadow:0 2px 12px rgba(0,0,0,0.85);
    text-align:left;
}

.eg-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.4));
    pointer-events:none;
    opacity:0.75;
}

.apropos-valeurs{
    background:var(--bg-dark);
}

.entreprise-values{
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
}

.entreprise-value{
    padding:24px 20px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
}

.ev-num{
    display:block;
    color:var(--gold);
    font-family:var(--font-display);
    font-size:1rem;
    letter-spacing:0.12em;
    margin-bottom:12px;
}

.entreprise-value h3{
    font-size:1.25rem;
    margin-bottom:10px;
}

.entreprise-value p{
    color:var(--text-muted);
    font-size:0.95rem;
    line-height:1.55;
}

.entreprise-quote{
    margin:56px auto 0;
    max-width:720px;
    text-align:center;
    padding:28px 24px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.entreprise-quote p{
    font-family:var(--font-display);
    font-size:clamp(1.25rem, 2.4vw, 1.75rem);
    color:var(--gold-light);
    font-style:italic;
    line-height:1.4;
}

@media(max-width:980px){
    .apropos-mission-grid{ grid-template-columns:1fr; gap:40px; }
    .leaders-grid, .leaders-grid--four, .leaders-grid--three{ grid-template-columns:1fr 1fr; }
    .leader-card--featured{ grid-column:1 / -1; max-width:420px; margin:0 auto; width:100%; }
    .entreprise-values{ grid-template-columns:1fr 1fr; }
    .entreprise-gallery{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:minmax(140px, 28vw); }
    .eg-wide{ grid-column:span 2; grid-row:span 1; }
    .eg-tall{ grid-row:span 1; }
}

@media(max-width:640px){
    .apropos-hero{ min-height:56vh; padding:130px 20px 56px; }
    .leaders-grid{ grid-template-columns:1fr; }
    .leader-card--featured{ max-width:none; }
    .entreprise-values{ grid-template-columns:1fr; gap:16px; }
    .apropos-mission-stats{ gap:12px; }
    .entreprise-gallery{ grid-template-columns:1fr 1fr; gap:8px; grid-auto-rows:120px; }
    .eg-wide{ grid-column:span 2; }
}

/* ==========================================================================
   À PROPOS — Projets, garanties, conditions d'acquisition
   ========================================================================== */
.apropos-projets{
    background:var(--bg-deep);
}

.projets-grid{
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.projet-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:34px 28px;
    transition:transform 0.45s var(--ease), border-color 0.45s var(--ease);
}

.projet-card:hover{
    transform:translateY(-6px);
    border-color:rgba(201,162,39,0.5);
}

.projet-card--featured{
    background:linear-gradient(165deg, rgba(201,162,39,0.14), rgba(255,255,255,0.03));
    border-color:rgba(201,162,39,0.45);
}

.projet-num{
    font-family:var(--font-display);
    font-size:clamp(2.4rem, 4vw, 3.2rem);
    color:var(--gold);
    font-weight:700;
    line-height:1;
    margin-bottom:14px;
}

.projet-card h3{
    font-size:1.3rem;
    margin-bottom:6px;
}

.projet-lieu{
    color:var(--gold-light);
    font-size:0.9rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin-bottom:12px;
}

.projet-card p:last-child{
    color:var(--text-muted);
    font-size:0.95rem;
    line-height:1.6;
}

.apropos-garanties{
    background:var(--bg-dark);
}

.garanties-grid{
    max-width:860px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.garantie-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:34px 30px;
    text-align:center;
}

.garantie-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--gold-soft);
    border:1px solid var(--line);
    margin-bottom:18px;
}

.garantie-icon .icon-svg{
    width:26px;
    height:26px;
    stroke:var(--gold);
    fill:none;
    stroke-width:1.8;
}

.garantie-card h3{
    font-size:1.25rem;
    margin-bottom:10px;
}

.garantie-card p{
    color:var(--text-muted);
    font-size:0.95rem;
    line-height:1.6;
}

.apropos-conditions{
    background:var(--bg-deep);
}

.conditions-grid{
    max-width:var(--container);
    margin:0 auto 60px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.condition-card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:30px 26px 26px;
}

.condition-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--gold), var(--gold-light));
    color:#0a0908;
    font-weight:800;
    font-size:1.1rem;
    margin-bottom:16px;
}

.condition-card h3{
    font-size:1.2rem;
    margin-bottom:8px;
}

.condition-card p{
    color:var(--text-muted);
    font-size:0.95rem;
    line-height:1.6;
}

.echelonne{
    max-width:var(--container);
    margin:0 auto;
    background:linear-gradient(165deg, rgba(201,162,39,0.08), rgba(255,255,255,0.02));
    border:1px solid rgba(201,162,39,0.3);
    border-radius:var(--radius-lg);
    padding:40px 34px;
}

.echelonne-title{
    font-size:1.35rem;
    margin-bottom:28px;
    text-align:center;
    color:var(--gold-light);
}

.echelonne-steps{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
}

.echelonne-step{
    position:relative;
    padding:22px 18px;
    background:rgba(0,0,0,0.25);
    border:1px solid var(--line);
    border-radius:14px;
}

.echelonne-step--last{
    border-color:rgba(201,162,39,0.55);
    background:rgba(201,162,39,0.1);
}

.echelonne-pct{
    display:block;
    font-family:var(--font-display);
    font-size:2rem;
    font-weight:700;
    color:var(--gold);
    margin-bottom:8px;
    line-height:1;
}

.echelonne-step h4{
    font-size:1.05rem;
    margin-bottom:8px;
    color:var(--text);
}

.echelonne-step p{
    color:var(--text-muted);
    font-size:0.87rem;
    line-height:1.55;
}

@media(max-width:980px){
    .projets-grid{ grid-template-columns:1fr; max-width:520px; }
    .garanties-grid{ grid-template-columns:1fr; max-width:520px; }
    .conditions-grid{ grid-template-columns:1fr; max-width:520px; }
    .echelonne-steps{ grid-template-columns:1fr 1fr; }
}

@media(max-width:640px){
    .echelonne{ padding:28px 20px; }
    .echelonne-steps{ grid-template-columns:1fr; }
}

/* ==========================================================================
   MODULE ANNONCES — plateforme d'annonces vérifiées
   ========================================================================== */
.annonces-hero{
    padding:170px 6% 70px;
    background:
        radial-gradient(ellipse at 75% 10%, rgba(201,162,39,0.14), transparent 55%),
        linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
    border-bottom:1px solid var(--line);
}

.annonces-hero-inner{
    max-width:var(--container);
    margin:0 auto;
}

.annonces-hero h1{
    font-size:clamp(2.1rem, 5vw, 3.4rem);
    margin:14px 0 18px;
}

.annonces-hero-text{
    color:var(--text-muted);
    max-width:640px;
    line-height:1.7;
}

.annonces-hero-actions{
    display:flex;
    align-items:center;
    gap:26px;
    flex-wrap:wrap;
    margin-top:30px;
}

.annonces-verified-note{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--gold-light);
    font-size:0.95rem;
    font-weight:600;
}

.annonces-verified-note .icon-svg{
    width:22px;
    height:22px;
    stroke:var(--gold);
    fill:none;
    stroke-width:1.8;
}

.annonces-quick-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}
.annonces-quick-links a{
    display:inline-flex;
    align-items:center;
    padding:8px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--text-muted);
    text-decoration:none;
    font-size:0.9rem;
    font-weight:600;
    transition:border-color 0.25s, color 0.25s, background 0.25s;
}
.annonces-quick-links a:hover,
.annonces-quick-links a.active{
    border-color:rgba(201,162,39,0.55);
    color:var(--gold-light);
    background:rgba(201,162,39,0.1);
}

/* ---- Filtres de recherche ---- */
.annonces-list-section{
    padding:60px 6% 90px;
    background:var(--bg-dark);
}

.annonces-filters{
    max-width:var(--container);
    margin:0 auto 40px;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:16px;
    align-items:end;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:24px;
}

.af-group label{
    display:block;
    color:var(--gold-light);
    font-size:0.82rem;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    margin-bottom:8px;
}

.af-group label small{
    text-transform:none;
    letter-spacing:0;
    color:var(--text-muted);
    font-weight:400;
}

.af-group input,
.af-group select,
.af-group textarea{
    width:100%;
    padding:12px 14px;
    background:rgba(0,0,0,0.3);
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--text);
    font-size:0.95rem;
}

.af-group select option{
    background:#171512;
    color:var(--text);
}

.af-group input:focus,
.af-group select:focus,
.af-group textarea:focus{
    outline:none;
    border-color:var(--gold);
}

.af-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.af-actions .btn-primary{
    width:100%;
}

.af-reset{
    color:var(--text-muted);
    font-size:0.88rem;
    white-space:nowrap;
}

.annonces-count{
    max-width:var(--container);
    margin:0 auto 22px;
    color:var(--text-muted);
    font-size:0.95rem;
}

/* ---- Grille d'annonces ---- */
.annonces-grid{
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

.annonce-card{
    display:block;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    text-decoration:none;
    color:var(--text);
    transition:transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.annonce-card:hover{
    transform:translateY(-6px);
    border-color:rgba(201,162,39,0.5);
}

.annonce-card-photo{
    position:relative;
    height:210px;
    background:rgba(0,0,0,0.3);
}

.annonce-card-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.annonce-card-nophoto{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

.annonce-card-nophoto .icon-svg{
    width:44px;
    height:44px;
    stroke:var(--line);
    fill:none;
    stroke-width:1.4;
}

.annonce-badge{
    position:absolute;
    top:14px;
    left:14px;
    padding:5px 13px;
    border-radius:20px;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.annonce-badge--vente{
    background:linear-gradient(135deg, var(--gold), var(--gold-light));
    color:#0a0908;
}

.annonce-badge--location{
    background:rgba(100,181,246,0.9);
    color:#06131f;
}

.annonce-verified{
    position:absolute;
    bottom:14px;
    right:14px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:20px;
    background:rgba(10,9,8,0.82);
    border:1px solid rgba(201,162,39,0.5);
    color:var(--gold-light);
    font-size:0.78rem;
    font-weight:700;
}

.annonce-demo{
    position:absolute;
    bottom:14px;
    right:14px;
    display:inline-flex;
    align-items:center;
    padding:5px 12px;
    border-radius:20px;
    background:rgba(80,90,120,0.9);
    border:1px solid rgba(180,190,220,0.45);
    color:#e8ecff;
    font-size:0.78rem;
    font-weight:700;
}
.annonce-demo--inline{
    position:static;
    margin-left:8px;
}

.annonce-verified .icon-svg{
    width:14px;
    height:14px;
    stroke:var(--gold);
    fill:none;
    stroke-width:2;
}

.annonce-verified--inline{
    position:static;
}

.annonce-card-body{
    padding:22px;
}

.annonce-card-type{
    color:var(--gold-light);
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-bottom:6px;
}

.annonce-card-body h3{
    font-size:1.15rem;
    margin-bottom:10px;
    line-height:1.35;
}

.annonce-card-lieu{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--text-muted);
    font-size:0.9rem;
    margin-bottom:16px;
}

.annonce-card-lieu .icon-svg,
.annonce-card-surface .icon-svg{
    width:15px;
    height:15px;
    stroke:var(--gold);
    fill:none;
    stroke-width:1.8;
    flex-shrink:0;
}

.annonce-card-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    border-top:1px solid var(--line);
    padding-top:16px;
}

.annonce-card-prix{
    color:var(--gold);
    font-weight:800;
    font-size:1.02rem;
}

.annonce-card-surface{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--text-muted);
    font-size:0.88rem;
}

/* ---- État vide ---- */
.annonces-empty{
    max-width:560px;
    margin:0 auto;
    text-align:center;
    padding:70px 24px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
}

.annonces-empty .icon-svg{
    width:52px;
    height:52px;
    stroke:var(--gold);
    fill:none;
    stroke-width:1.4;
    margin-bottom:20px;
}

.annonces-empty h1,
.annonces-empty h2{
    font-size:1.5rem;
    margin-bottom:14px;
}

.annonces-empty p{
    color:var(--text-muted);
    line-height:1.7;
    margin-bottom:14px;
}

.annonces-empty .btn-primary-large{
    margin-top:14px;
}

/* ---- Bande de confiance ---- */
.annonces-trust{
    padding:80px 6%;
    background:var(--bg-deep);
    border-top:1px solid var(--line);
}

.annonces-trust-grid{
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.trust-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:32px 28px;
    text-align:center;
}

.trust-card .icon-svg{
    width:34px;
    height:34px;
    stroke:var(--gold);
    fill:none;
    stroke-width:1.6;
    margin-bottom:16px;
}

.trust-card h3{
    font-size:1.15rem;
    margin-bottom:10px;
}

.trust-card p{
    color:var(--text-muted);
    font-size:0.93rem;
    line-height:1.65;
}

/* ---- Fiche annonce ---- */
.annonce-detail{
    padding:150px 6% 90px;
    background:var(--bg-dark);
}

.annonce-detail-inner{
    max-width:var(--container);
    margin:0 auto;
}

.annonce-breadcrumb{
    color:var(--text-muted);
    font-size:0.9rem;
    margin-bottom:24px;
}

.annonce-breadcrumb a{
    color:var(--gold-light);
}

.annonce-detail-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.annonce-detail-badges{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.annonce-detail-badges .annonce-badge{
    position:static;
}

.annonce-detail-head h1{
    font-size:clamp(1.7rem, 3.6vw, 2.6rem);
    margin-bottom:12px;
}

.annonce-detail-lieu{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-muted);
    flex-wrap:wrap;
}

.annonce-detail-lieu .icon-svg{
    width:16px;
    height:16px;
    stroke:var(--gold);
    fill:none;
    stroke-width:1.8;
}

.annonce-detail-ref{
    color:var(--text-muted);
    font-size:0.82rem;
    border:1px solid var(--line);
    border-radius:20px;
    padding:3px 12px;
}

.annonce-detail-prix{
    font-family:var(--font-display);
    font-size:clamp(1.5rem, 3vw, 2.1rem);
    color:var(--gold);
    font-weight:800;
    white-space:nowrap;
}

.annonce-photos{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin-bottom:44px;
}

.annonce-photo{
    padding:0;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    cursor:zoom-in;
    background:none;
    height:150px;
}

.annonce-photo--main{
    grid-column:span 2;
    grid-row:span 2;
    height:310px;
}

.annonce-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.45s var(--ease);
}

.annonce-photo:hover img{
    transform:scale(1.05);
}

.annonce-detail-grid{
    display:grid;
    grid-template-columns:1.7fr 1fr;
    gap:34px;
    align-items:start;
}

.annonce-detail-main h2{
    font-size:1.3rem;
    margin:26px 0 16px;
    color:var(--gold-light);
}

.annonce-detail-main h2:first-child{
    margin-top:0;
}

.annonce-specs{
    list-style:none;
    padding:0;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
}

.annonce-specs li{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:13px 18px;
    background:var(--surface);
}

.annonce-specs li:nth-child(even){
    background:rgba(0,0,0,0.22);
}

.annonce-specs span{
    color:var(--text-muted);
    font-size:0.92rem;
}

.annonce-description{
    color:var(--text-muted);
    line-height:1.75;
}

.annonce-contact-card{
    position:sticky;
    top:110px;
    background:linear-gradient(165deg, rgba(201,162,39,0.1), rgba(255,255,255,0.02));
    border:1px solid rgba(201,162,39,0.35);
    border-radius:var(--radius-lg);
    padding:28px 24px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.annonce-contact-title{
    font-family:var(--font-display);
    font-size:1.25rem;
    font-weight:700;
}

.annonce-contact-text{
    color:var(--text-muted);
    font-size:0.92rem;
    line-height:1.6;
}

.annonce-contact-note{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color:var(--gold-light);
    font-size:0.83rem;
    line-height:1.55;
    border-top:1px solid var(--line);
    padding-top:16px;
}

.annonce-contact-note .icon-svg{
    width:18px;
    height:18px;
    stroke:var(--gold);
    fill:none;
    stroke-width:1.8;
    flex-shrink:0;
    margin-top:2px;
}

.annonce-back{
    margin-top:44px;
}

.annonce-back a{
    color:var(--gold-light);
    font-weight:600;
}

/* ---- Formulaire de dépôt ---- */
.annonce-deposer .section-header{
    margin-bottom:36px;
}

.annonce-form{
    max-width:860px;
    margin:0 auto;
}

.annonce-form fieldset{
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    background:var(--surface);
    padding:28px;
    margin-bottom:26px;
}

.annonce-form legend{
    padding:0 14px;
    color:var(--gold-light);
    font-family:var(--font-display);
    font-size:1.1rem;
    font-weight:700;
}

.annonce-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.af-group--full{
    grid-column:1 / -1;
}

.annonce-form input[type="file"]{
    padding:10px;
    cursor:pointer;
}

.annonce-form-note{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:18px;
    color:var(--text-muted);
    font-size:0.88rem;
    line-height:1.6;
}

.annonce-form-note .icon-svg{
    width:20px;
    height:20px;
    stroke:var(--gold);
    fill:none;
    stroke-width:1.8;
    flex-shrink:0;
    margin-top:2px;
}

.annonce-form-submit{
    width:100%;
    justify-content:center;
    border:none;
    cursor:pointer;
    font-size:1.02rem;
}

.annonce-form-errors{
    max-width:860px;
    margin:0 auto 26px;
    background:rgba(255,107,107,0.12);
    border:1px solid rgba(255,107,107,0.5);
    border-radius:var(--radius);
    padding:18px 22px;
}

.annonce-form-errors p{
    color:#ff9b9b;
    font-size:0.93rem;
    margin:4px 0;
}

.af-honeypot{
    position:absolute;
    left:-9999px;
    top:-9999px;
    height:0;
    overflow:hidden;
}

/* ---- Responsive ---- */
@media(max-width:1080px){
    .annonces-filters{ grid-template-columns:repeat(3, 1fr); }
    .annonces-grid{ grid-template-columns:1fr 1fr; }
}

@media(max-width:980px){
    .annonce-detail-grid{ grid-template-columns:1fr; }
    .annonce-contact-card{ position:static; }
    .annonces-trust-grid{ grid-template-columns:1fr; max-width:520px; }
    .annonce-photos{ grid-template-columns:1fr 1fr; }
    .annonce-photo--main{ grid-column:span 2; grid-row:span 1; height:260px; }
}

@media(max-width:640px){
    .annonces-hero{ padding:140px 20px 50px; }
    .annonces-list-section{ padding:40px 20px 70px; }
    .annonces-filters{ grid-template-columns:1fr; padding:18px; }
    .annonces-grid{ grid-template-columns:1fr; }
    .annonce-detail{ padding:120px 20px 70px; }
    .annonce-form-grid{ grid-template-columns:1fr; }
    .annonce-form fieldset{ padding:20px 16px; }
    .annonce-photos{ grid-template-columns:1fr; }
    .annonce-photo{ height:200px; }
    .annonce-photo--main{ grid-column:span 1; height:230px; }
}

/* ==========================================================================
   TOUCHES SENIOR — a11y + badge live annonces
   ========================================================================== */
.skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:10000;
    padding:12px 20px;
    background:var(--gold);
    color:#0a0908;
    font-weight:700;
    border-radius:0 0 10px 0;
}
.skip-link:focus{
    left:0;
}

.logo-link{
    display:inline-flex;
    line-height:0;
}

.live-annonces-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:18px 0 8px;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(201,162,39,0.12);
    border:1px solid rgba(201,162,39,0.45);
    color:var(--gold-light);
    font-size:0.92rem;
    font-weight:600;
    text-decoration:none;
    transition:background 0.35s var(--ease), transform 0.35s var(--ease);
}
.live-annonces-pill:hover{
    background:rgba(201,162,39,0.22);
    transform:translateY(-2px);
}
.live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#51cf66;
    box-shadow:0 0 0 0 rgba(81,207,102,0.55);
    animation:livePulse 1.8s ease infinite;
}
@keyframes livePulse{
    0%{ box-shadow:0 0 0 0 rgba(81,207,102,0.55); }
    70%{ box-shadow:0 0 0 10px rgba(81,207,102,0); }
    100%{ box-shadow:0 0 0 0 rgba(81,207,102,0); }
}

@media (prefers-reduced-motion: reduce){
    .live-dot{ animation:none; }
}

/* ==========================================================================
   PARCOURS DÉCOUVERTE (accueil) — portes vers toutes les pages
   ========================================================================== */
.sidi-explore{
    padding:90px 6% 100px;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(212,175,55,0.12), transparent 45%),
        radial-gradient(ellipse at 90% 100%, rgba(212,175,55,0.06), transparent 40%),
        var(--bg-dark);
    border-bottom:1px solid var(--line-soft);
}
.sidi-explore-inner{
    max-width:var(--container);
    margin:0 auto;
}
.sidi-explore-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}
.sidi-explore-grid--three{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}
@media(max-width:900px){
    .sidi-explore-grid--three{ grid-template-columns:1fr; }
}
.explore-portal{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    min-height:210px;
    padding:26px 24px 22px;
    text-decoration:none;
    color:var(--text);
    background:
        linear-gradient(160deg, rgba(212,175,55,0.08), transparent 55%),
        var(--surface-strong);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:transform 0.35s var(--ease), border-color 0.3s ease, box-shadow 0.35s var(--ease);
}
.explore-portal::before{
    content:"";
    position:absolute;
    inset:auto -20% -40% auto;
    width:160px;
    height:160px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(212,175,55,0.18), transparent 70%);
    pointer-events:none;
}
.explore-portal:hover{
    transform:translateY(-6px);
    border-color:rgba(212,175,55,0.55);
    box-shadow:0 22px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,175,55,0.12);
}
.explore-num{
    font-family:var(--font-display);
    font-size:13px;
    letter-spacing:0.18em;
    color:var(--gold);
    opacity:0.85;
}
.explore-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.22em;
    color:var(--text-faint);
    font-weight:600;
}
.explore-portal strong{
    font-family:var(--font-display);
    font-size:1.35rem;
    font-weight:600;
    line-height:1.2;
    margin-top:4px;
}
.explore-portal p{
    color:var(--text-muted);
    font-size:14.5px;
    line-height:1.55;
    flex:1;
}
.explore-go{
    margin-top:10px;
    font-size:13.5px;
    font-weight:700;
    color:var(--gold-light);
    letter-spacing:0.02em;
}
.explore-portal--accent{
    background:
        linear-gradient(145deg, rgba(212,175,55,0.28), rgba(212,175,55,0.06) 55%),
        var(--bg-card);
    border-color:rgba(212,175,55,0.5);
}
.explore-portal--accent .explore-go,
.explore-portal--accent strong{ color:var(--text); }
.explore-portal--accent .explore-go{ color:var(--gold-light); }

.section-next-cta{
    max-width:var(--container);
    margin:48px auto 0;
    text-align:center;
    padding:28px 22px;
    border-radius:var(--radius-lg);
    border:1px solid var(--line-soft);
    background:linear-gradient(180deg, rgba(212,175,55,0.08), transparent);
}
.section-next-cta p{
    color:var(--text-muted);
    margin-bottom:18px;
    font-size:1.05rem;
}
.section-next-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.trust-ribbon{
    padding:70px 6%;
    background:
        linear-gradient(105deg, rgba(12,11,9,0.2), rgba(12,11,9,0.75)),
        radial-gradient(ellipse at 20% 50%, rgba(212,175,55,0.16), transparent 55%),
        var(--bg-deep);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.trust-ribbon-inner{
    max-width:var(--container);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    flex-wrap:wrap;
}
.trust-ribbon-copy{
    flex:1 1 360px;
    max-width:640px;
}
.trust-ribbon-copy .surtitle{
    color:var(--gold);
    font-size:12px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:12px;
}
.trust-ribbon-copy h2{
    font-size:clamp(1.7rem, 3.5vw, 2.4rem);
    margin-bottom:12px;
}
.trust-ribbon-copy p{
    color:var(--text-muted);
    line-height:1.7;
    font-size:1.02rem;
}
.trust-ribbon-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:0 0 auto;
}

@media(max-width:980px){
    .sidi-explore-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width:640px){
    .sidi-explore-grid{ grid-template-columns:1fr; }
    .explore-portal{ min-height:0; }
    .trust-ribbon-actions{ width:100%; }
    .trust-ribbon-actions .btn-primary-large,
    .trust-ribbon-actions .btn-secondary-large{ width:100%; justify-content:center; }
}

/* ---- Pont Accueil → Annonces ---- */
.annonces-bridge{
    padding:80px 6%;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(201,162,39,0.1), transparent 50%),
        var(--bg-deep);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.annonces-bridge-inner{
    max-width:var(--container);
    margin:0 auto;
    text-align:center;
}
.annonces-bridge h2{
    font-size:clamp(1.7rem, 4vw, 2.6rem);
    margin:12px 0 16px;
}
.annonces-bridge .text{
    max-width:620px;
    margin:0 auto 28px;
    color:var(--text-muted);
    line-height:1.7;
}
.annonces-bridge-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
}
.annonces-bridge-note{
    margin-top:22px;
    font-size:0.88rem;
    color:var(--text-faint);
}