/* RESET */ *{ box-sizing:border-box; margin:0; padding:0; } body{ font-family:'Montserrat', Arial, sans-serif; background:#050811; color:#fff; } /* ====================================== MENU — EXACTEMENT COMME ESTIMATION ====================================== */ .topbar{ position:fixed; top:0; width:100%; z-index:1000; background: rgba(15,18,30,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding:18px 30px; } body{ padding-top:75px; } .topbar nav{ display:flex; justify-content:center; gap:30px; } .topbar nav a{ color:#fff; text-decoration:none; font-size:14px; letter-spacing:1px; font-weight:600; text-transform:none; } .topbar nav a:hover{ color:#4da8ff; } .topbar nav a.active{ border-bottom:2px solid #4da8ff; padding-bottom:6px; } /* MOBILE MENU: ligne 1 (4 items) + ligne 2 (Prix&quartiers + Contact) */ @media(max-width:900px){ .topbar{ padding:10px; } .topbar nav{ display:grid; grid-template-columns:repeat(4,1fr); row-gap:8px; column-gap:10px; justify-items:center; align-items:center; } .topbar nav a{ font-size:13px; letter-spacing:1px; white-space:nowrap; } .topbar nav a[href*="prix-immobilier-antibes"]{ grid-column:1/3; } .topbar nav a[href*="contact"]{ grid-column:3/5; } } /* ====================================== HERO ====================================== */ .hero{ position:relative; background:url("antibes.jpg") center/cover no-repeat; /* évite les surprises avec le menu fixed */ min-height: calc(100vh - 75px); } .hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,0.35); pointer-events:none; } /* ====================================== CARTE MATHIEU ====================================== */ .portrait-box{ position:absolute; bottom:70px; left:90px; display:flex; align-items:center; gap:25px; background: rgba(20,35,55,0.9); padding:22px 30px; border-radius:16px; max-width:500px; z-index:2; } .portrait{ width:120px; height:auto; border-radius:0; background:transparent; display:block; } .info h2{ font-size:22px; margin-bottom:5px; } .info p{ font-size:14px; color:#dbe7f3; margin-bottom:6px; } .contact-link{ color:#6fd3ff; text-decoration:none; } .info-instagram{ display:flex; align-items:center; gap:8px; margin-top:6px; } .instagram-logo{ width:18px; height:auto; display:block; } /* ====================================== BLOC EXPERT ====================================== */ .expert-box{ position:absolute; right:90px; bottom:70px; max-width:420px; background: rgba(20,35,55,0.9); padding:28px 32px; border-radius:16px; z-index:2; } .expert-box h2{ font-size:22px; margin-bottom:10px; } .expert-box p{ font-size:14px; color:#dbe7f3; line-height:1.5; margin-bottom:12px; } .cta{ display:flex; flex-direction:column; gap:10px; } .btn{ background:#6fd3ff; color:#003; text-align:center; padding:12px; border-radius:8px; font-weight:700; text-decoration:none; display:block; } /* ====================================== MOBILE HERO (encadrés l’un sous l’autre) ====================================== */ @media(max-width:900px){ .hero{ padding: 25px 0 60px; min-height: calc(100vh - 75px); } .portrait-box, .expert-box{ position:relative; left:auto; right:auto; bottom:auto; margin:20px auto; width:90%; max-width:420px; } .portrait-box{ margin-top:30px; } } /* ====================================== PAGE VENTE — LISTE VERTICALE (1 carte par ligne) IMPORTANT: ne s'applique QUE si ====================================== */ /* container principal (au cas où ton HTML utilise l’un de ces noms) */ body.page-vente .biens-grid, body.page-vente .properties-grid, body.page-vente .cards-grid, body.page-vente .listings, body.page-vente .grid, body.page-vente .cards, body.page-vente .biens{ display:flex !important; flex-direction:column !important; gap:30px !important; align-items:center !important; } /* chaque carte prend une grande largeur */ body.page-vente .bien-card, body.page-vente .property-card, body.page-vente .listing-card, body.page-vente .card, body.page-vente .bien{ width:100% !important; max-width:900px !important; } /* images */ body.page-vente .bien-card img, body.page-vente .property-card img, body.page-vente .listing-card img, body.page-vente .card img, body.page-vente .bien img{ width:100% !important; height:260px !important; object-fit:cover !important; border-radius:14px 14px 0 0 !important; display:block; } /* mobile */ @media (max-width: 900px) { body.page-vente .bien-card, body.page-vente .property-card, body.page-vente .listing-card, body.page-vente .card, body.page-vente .bien{ max-width:100% !important; } body.page-vente .bien-card img, body.page-vente .property-card img, body.page-vente .listing-card img, body.page-vente .card img, body.page-vente .bien img{ height:220px !important; } } /* ==== BIENS DANS LES PAGES QUARTIERS ==== */ .biens-quartier{ display:flex; flex-direction:column; gap:18px; margin:25px 0; } .bien-mini{ display:flex; gap:16px; background: rgba(14,28,58,0.6); border-radius:14px; padding:14px; text-decoration:none; color:white; align-items:center; } .bien-mini img{ width:140px; height:90px; object-fit:cover; border-radius:8px; flex-shrink:0; } /* Empêche les styles globaux d'étirer les images */ .bien-mini img{ max-width:140px !important; }