/* ═══════════════════════════════════════════ PUBLIC.CSS — Green Property Public Landing "The Editorial Kinetic" — Architectural Pulse Light-first, with Dark mode support Fonts loaded via in HTML — do NOT use @import here ═══════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box} html{overflow-x:hidden;overflow-y:auto !important} :root{ --pub-bg:#f9f9f9; --pub-surface:#ffffff; --pub-card:#ffffff; --pub-card-alt:#f3f3f3; --pub-border:rgba(193,155,76,.15); --pub-text:#1a1c1c; --pub-text-secondary:#3d2b28; --pub-text-muted:#6b5855; --pub-primary:#2B5C1B; --pub-primary-light:#3A7826; --pub-primary-glow:rgba(43,92,27,.1); --pub-secondary:#C19B4C; --pub-gradient:linear-gradient(135deg,#2B5C1B,#3A7826); --pub-gradient-secondary:linear-gradient(135deg,#C19B4C,#D8B971); --pub-ghost-border:rgba(193,155,76,.2); --pub-radius:12px; --pub-radius-lg:16px; --pub-radius-full:9999px; --pub-shadow:0 4px 24px rgba(0,0,0,.08); --pub-shadow-lg:0 12px 40px rgba(0,0,0,.15); --pub-transition:.25s ease; --pub-chip-bg:#D5EDCC; --pub-chip-text:#0F2409; } body.public-page{font-family:'Work Sans',system-ui,sans-serif;background:var(--pub-bg);color:var(--pub-text); line-height:1.6;overflow-x:hidden !important;overflow-y:visible !important;min-height:100vh} /* ─── FLOATING NAVIGATION PILL — Glassmorphism ─── */ .pub-navbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:1000; padding:10px 24px;border-radius:0.75rem; background:rgba(249,249,249,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:0 4px 40px rgba(26,28,28,.06); transition:all .3s ease;max-width:1160px;width:calc(100% - 48px)} .pub-navbar.scrolled{top:8px;padding:8px 20px;box-shadow:0 8px 32px rgba(26,28,28,.1)} .pub-navbar .container{max-width:100%;margin:0;padding:0;display:flex; align-items:center;justify-content:space-between} .pub-navbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none} .pub-navbar-brand .logo-icon{width:40px;height:40px;background:var(--pub-gradient);border-radius:12px; display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(176,11,22,.2)} .pub-navbar-brand .logo-icon i{color:#FFFFFF;font-size:1.1rem} .pub-navbar-brand span{font-size:1.15rem;font-weight:700;color:var(--pub-text);letter-spacing:-.3px; font-family:'Manrope',sans-serif} .pub-navbar-links{display:flex;align-items:center;gap:8px} .pub-navbar-links a{color:#1a1c1c;text-decoration:none;font-weight:500;font-size:.88rem; padding:8px 16px;border-radius:var(--pub-radius);transition:all var(--pub-transition)} .pub-navbar-links a i{color:var(--pub-text-muted);margin-right:4px} .pub-navbar-links a:hover{color:var(--pub-primary);background:rgba(176,11,22,.05)} .pub-navbar-links a:hover i{color:var(--pub-primary-light)} .pub-navbar-links .btn-cta{background:var(--pub-gradient);color:#FFFFFF !important;padding:9px 20px; border-radius:var(--pub-radius);font-weight:600;box-shadow:0 4px 16px rgba(176,11,22,.2); transition:all var(--pub-transition)} .pub-navbar-links .btn-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(176,11,22,.3); filter:saturate(1.15)} /* Nav toggle buttons */ .nav-toggle-btn{background:rgba(228,190,186,.1);border:1px solid rgba(176,11,22,.15); color:#1a1c1c;cursor:pointer;padding:7px 12px;border-radius:var(--pub-radius); font-size:.85rem;font-family:'Work Sans',sans-serif;transition:all .2s ease; display:flex;align-items:center;gap:4px} .nav-toggle-btn i{color:var(--pub-text-muted)} .nav-toggle-btn:hover{color:var(--pub-primary);border-color:rgba(176,11,22,.25)} .nav-toggle-btn:hover i{color:var(--pub-primary-light)} /* ─── HERO — Editorial, full viewport ─── */ .pub-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative; padding:120px 24px 80px;overflow:visible} .pub-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .pub-hero-bg img.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:brightness(.3) saturate(1.2);opacity:0;animation:heroFade 18s ease-in-out infinite} .hero-slide-1{animation-delay:0s !important} .hero-slide-2{animation-delay:6s !important} .hero-slide-3{animation-delay:12s !important} @keyframes heroFade{0%{opacity:0}8%{opacity:1}33%{opacity:1}41%{opacity:0}100%{opacity:0}} .pub-hero-overlay{position:absolute;inset:0; background:linear-gradient(180deg, rgba(26,28,28,.6) 0%,rgba(26,28,28,.85) 100%);z-index:1} .pub-hero-glow{position:absolute;width:500px;height:500px;border-radius:50%; filter:blur(150px);pointer-events:none;z-index:1} .pub-hero-glow-1{background:rgba(176,11,22,.08);top:-100px;left:10%} .pub-hero-glow-2{background:rgba(168,45,104,.06);bottom:-50px;right:10%} .pub-hero-content{position:relative;z-index:2;text-align:center;max-width:700px} .pub-hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 16px; background:rgba(176,11,22,.1); border:1px solid rgba(176,11,22,.2); border-radius:var(--pub-radius-full); color:var(--pub-primary); font-size:.82rem; font-weight:600; margin-bottom:20px; backdrop-filter:blur(10px); font-family:'Work Sans',sans-serif; -webkit-border-radius:var(--pub-radius-full); -moz-border-radius:var(--pub-radius-full); -ms-border-radius:var(--pub-radius-full); -o-border-radius:var(--pub-radius-full); } .pub-hero-badge i{font-size:.7rem} .pub-hero h1{font-family:'Manrope',sans-serif;font-size:clamp(1.5rem,2vw,3rem);font-weight:800; line-height:1.1;letter-spacing:-0.02em; color:#FFFFFF;margin-bottom:16px} .pub-hero p{color:rgba(255,255,255,.7);font-size:clamp(.8rem,2.5vw,1.25rem);max-width:540px;margin:0 auto 32px;line-height:1.7; font-family:'Work Sans',sans-serif} /* Hero search */ .pub-hero-search{display:flex;gap:10px;max-width:500px;margin:0 auto; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--pub-radius); padding:6px;backdrop-filter:blur(10px)} .pub-hero-search input{flex:1;padding:12px 16px;border:none;background:transparent; color:#FFFFFF;font-size:.92rem;font-family:'Work Sans',sans-serif} .pub-hero-search input::placeholder{color:rgba(255,255,255,.4)} .pub-hero-search input:focus{outline:none} .pub-hero-search button{padding:12px 24px;background:var(--pub-gradient);color:#FFFFFF;border:none; border-radius:var(--pub-radius);font-weight:600;cursor:pointer;transition:all var(--pub-transition); font-size:.88rem;font-family:'Work Sans',sans-serif} .pub-hero-search button:hover{filter:saturate(1.15);transform:translateY(-1px)} .pub-hero-stats{display:flex;justify-content:center;gap:40px;margin-top:40px; background:rgba(0,0,0,.35); padding:16px 32px; border-radius:100px; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.15); width:fit-content; margin-left:auto; margin-right:auto} .pub-hero-stat{text-align:center} .pub-hero-stat .value{font-size:1.6rem;font-weight:700;color:#FFFFFF;font-family:'Manrope',sans-serif; text-shadow:0 2px 4px rgba(0,0,0,.5)} .pub-hero-stat .label{font-size:.85rem;color:rgba(255,255,255,.85); font-weight:500; text-shadow:0 1px 2px rgba(0,0,0,.5)} /* ─── SECTIONS — Breathing layout ─── */ .pub-section{padding:5.5rem 24px} .pub-section .container{max-width:1200px;margin:0 auto} .pub-section-header{text-align:center;margin-bottom:48px} .pub-section-header h2{font-family:'Manrope',sans-serif;font-size:1.8rem;font-weight:700; color:var(--pub-text);margin-bottom:10px;letter-spacing:-0.02em} .pub-section-header p{color:var(--pub-text-secondary);font-size:1rem;max-width:500px;margin:0 auto; font-family:'Work Sans',sans-serif} /* ─── SITE CARDS — No dividers, surface layering ─── */ .pub-sites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px} .pub-site-card{background:var(--pub-card);border-radius:var(--pub-radius-lg); overflow:hidden;transition:all .3s ease;position:relative;box-shadow:0 8px 32px rgba(0,0,0,.08); border: 2px solid rgba(0,0,0,.02);} .pub-site-card:hover{transform:translateY(-4px);box-shadow:0 12px 48px rgba(0,0,0,.15);} .pub-site-card .card-image{position:relative;height:240px;overflow:hidden} .pub-site-card .card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .pub-site-card:hover .card-image img{transform:scale(1.05)} .pub-site-card .card-image .badge-overlay{position:absolute;top:14px;left:14px;display:flex;gap:6px;flex-wrap:wrap} .pub-site-card .card-image .badge-type{padding:5px 12px;border-radius:var(--pub-radius-full); font-size:.75rem;font-weight:600;backdrop-filter:blur(8px)} .badge-vente{background:rgba(43,92,27,.85);color:#FFFFFF} .badge-location{background:rgba(193,155,76,.85);color:#FFFFFF} /* Carousel in cards */ .pub-site-card .carousel{height:240px} .pub-site-card .carousel-inner,.pub-site-card .carousel-item{height:100%} .pub-site-card .carousel-item img{width:100%;height:100%;object-fit:cover} .pub-site-card .carousel-control-prev,.pub-site-card .carousel-control-next{ width:32px;height:32px;background:rgba(26,28,28,.4);border-radius:50%;top:50%; transform:translateY(-50%);opacity:0;transition:opacity .3s} .pub-site-card:hover .carousel-control-prev,.pub-site-card:hover .carousel-control-next{opacity:.8} .pub-site-card .card-body{padding:24px;background:var(--pub-card)} .pub-site-card .card-title{font-family:'Manrope',sans-serif;font-size:1.4rem;font-weight:800; color:var(--pub-text);margin-bottom:8px;letter-spacing:-0.02em} .pub-site-card .card-address{display:flex;align-items:flex-start;gap:6px;color:var(--pub-primary); font-size:.9rem;margin-bottom:14px; font-weight: 500;} .pub-site-card .card-address i{color:var(--pub-primary);font-size:.9rem; margin-top:3px;} .pub-site-card .card-stats{display:flex;gap:16px;color:var(--pub-primary);font-size:.85rem; font-weight: 500; margin-bottom: 20px;} .pub-site-card .card-stats span{display:flex;align-items:center;gap:5px} .pub-site-card .card-stats i{color:var(--pub-secondary);font-size:.85rem} .pub-site-card .card-footer{display:flex;align-items:center;justify-content:space-between; padding:0;background:transparent; margin-top: 10px;} .pub-site-card .card-price{font-size:1.4rem;font-weight:800;color:var(--pub-primary);font-family:'Manrope',sans-serif} .pub-site-card .card-price small{font-size:.85rem;color:var(--pub-primary);font-weight:600} .pub-site-card .btn-details{padding:12px 24px;background:var(--pub-primary); color:#fff;border:none;border-radius:12px; font-weight:600;font-size:.9rem;text-decoration:none;transition:all var(--pub-transition); cursor:pointer;font-family:'Work Sans',sans-serif} .pub-site-card .btn-details:hover{background:var(--pub-primary-light);color:#FFFFFF; box-shadow:0 4px 16px rgba(43,92,27,.2);} /* ─── PROPERTY LISTING ─── */ .pub-properties{display:flex;flex-direction:column;gap:16px} .pub-property-row{display:flex;gap:20px;background:var(--pub-card); border-radius:var(--pub-radius-lg);overflow:hidden;transition:all .3s ease;text-decoration:none; box-shadow:var(--pub-shadow)} .pub-property-row:hover{transform:translateY(-2px);box-shadow:var(--pub-shadow-lg)} .pub-property-row .prop-image{width:220px;min-height:160px;overflow:hidden;flex-shrink:0;position:relative} .pub-property-row .prop-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s; border-radius:var(--pub-radius)} .pub-property-row:hover .prop-image img{transform:scale(1.05)} .btn-voir-photos{position:absolute;bottom:8px;left:50%;transform:translateX(-50%); background:rgba(26,28,28,.6);color:#fff;border:none;padding:4px 12px;border-radius:8px; font-size:.72rem;font-weight:500;cursor:pointer;backdrop-filter:blur(6px); transition:background .2s;white-space:nowrap;font-family:'Work Sans',sans-serif} .btn-voir-photos:hover{background:rgba(176,11,22,.8)} .pub-property-row .prop-info{flex:1;padding:20px;display:flex;flex-direction:column;justify-content:center} .pub-property-row .prop-title{font-family:'Manrope',sans-serif;font-size:1.05rem;font-weight:700; color:var(--pub-text);margin-bottom:6px;letter-spacing:-0.02em} .pub-property-row .prop-meta{color:var(--pub-text-muted);font-size:.85rem;margin-bottom:10px; display:flex;align-items:center;gap:6px} .pub-property-row .prop-meta i{color:var(--pub-secondary)} .pub-property-row .prop-details{display:flex;gap:16px;color:var(--pub-text-secondary);font-size:.85rem} .pub-property-row .prop-details span{display:flex;align-items:center;gap:5px} .pub-property-row .prop-details i{color:var(--pub-primary)} .pub-property-row .prop-price{padding:20px;display:flex;flex-direction:column;align-items:flex-end; justify-content:center;min-width:160px;background:var(--pub-card-alt)} .pub-property-row .prop-price .amount{font-size:1.2rem;font-weight:700;color:var(--pub-primary); font-family:'Manrope',sans-serif} .pub-property-row .prop-price .period{font-size:.8rem;color:var(--pub-text-muted)} .pub-property-row .prop-price .badge-status{margin-top:8px;padding:4px 12px; border-radius:var(--pub-radius-full);font-size:.75rem;font-weight:600} /* ─── PAGINATION ─── */ .pub-pagination{display:flex;justify-content:center;gap:6px;margin-top:40px} .pub-pagination a,.pub-pagination span{display:inline-flex;align-items:center;justify-content:center; min-width:40px;height:40px;padding:0 14px;border-radius:var(--pub-radius);font-size:.88rem; font-weight:500;text-decoration:none;transition:all var(--pub-transition)} .pub-pagination a{color:var(--pub-text-secondary);background:var(--pub-card);box-shadow:var(--pub-shadow)} .pub-pagination a:hover{color:var(--pub-primary);background:var(--pub-primary-glow)} .pub-pagination .current{background:var(--pub-gradient);color:#FFFFFF; box-shadow:0 4px 12px rgba(176,11,22,.2)} /* ─── FOOTER ─── */ .pub-footer{background:var(--pub-card-alt);padding:48px 24px 24px} .pub-footer .container{max-width:1200px;margin:0 auto} .pub-footer-grid{ display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:32px; margin-bottom:32px } .pub-footer-col h4{color:var(--pub-text);font-size:.95rem;font-weight:700;margin-bottom:14px; font-family:'Manrope',sans-serif} .pub-footer-col a{display:block;color:var(--pub-text-muted);text-decoration:none;font-size:.88rem; margin-bottom:8px;transition:color var(--pub-transition)} .pub-footer-col a:hover{color:var(--pub-primary)} .pub-footer-bottom{border-top:none;padding-top:20px;text-align:center; color:var(--pub-text-muted);font-size:.82rem;background:var(--pub-card-alt)} /* ─── FORM INPUTS (modals / contact) ─── */ .public-page .form-control,.public-page textarea.form-control, .public-page select.form-control,.public-page input[type="text"], .public-page input[type="email"],.public-page input[type="tel"]{ background:transparent;border:none;border-bottom:2px solid var(--pub-ghost-border); color:var(--pub-text);border-radius:0;padding:12px 4px;font-size:.92rem; font-family:'Work Sans',sans-serif;width:100%;transition:all var(--pub-transition)} .public-page .form-control:focus,.public-page textarea.form-control:focus, .public-page input:focus{border-bottom-color:var(--pub-primary);outline:none;box-shadow:none} .public-page textarea.form-control{min-height:100px;resize:vertical} /* ─── MESSAGES / ALERTS ─── */ .pub-alert{padding:14px 20px;border-radius:var(--pub-radius);margin-bottom:8px;font-size:.92rem; display:flex;align-items:center;gap:8px} .pub-alert-success{background:rgba(16,185,129,.08);color:#10B981} .pub-alert-error{background:rgba(239,68,68,.08);color:#EF4444} .pub-alert-info{background:rgba(176,11,22,.08);color:var(--pub-primary)} /* ─── DARK MODE ─── */ html.dark-mode body.public-page,body.public-page.dark-mode{ --pub-bg:#121212;--pub-surface:#1e1e1e;--pub-card:#1e1e1e; --pub-card-alt:#252525; --pub-border:rgba(228,205,150,.15);--pub-text:#e6e1e5;--pub-text-secondary:#d7c2bf; --pub-text-muted:#a08c89; --pub-primary:#A2E092;--pub-primary-light:#B7EBB1; --pub-primary-glow:rgba(162,224,146,.1); --pub-secondary:#E4CD96; --pub-gradient:linear-gradient(135deg,#A2E092,#B7EBB1); --pub-gradient-secondary:linear-gradient(135deg,#E4CD96,#F4E5B8); --pub-ghost-border:rgba(228,205,150,.2); --pub-shadow:0 4px 24px rgba(0,0,0,.35); --pub-shadow-lg:0 12px 40px rgba(0,0,0,.45); --pub-chip-bg:#1A3E10;--pub-chip-text:#D5EDCC} html.dark-mode body.public-page .pub-navbar,body.public-page.dark-mode .pub-navbar{ background:rgba(18,18,18,.85)} html.dark-mode body.public-page .pub-navbar.scrolled,body.public-page.dark-mode .pub-navbar.scrolled{ background:rgba(18,18,18,.92)} html.dark-mode body.public-page .pub-navbar-brand span,body.public-page.dark-mode .pub-navbar-brand span{color:#e6e1e5} html.dark-mode body.public-page .pub-hero-overlay,body.public-page.dark-mode .pub-hero-overlay{ background:linear-gradient(180deg,rgba(18,18,18,.5) 0%,rgba(18,18,18,.25) 40%,rgba(18,18,18,.95) 100%)} html.dark-mode body.public-page .pub-footer,body.public-page.dark-mode .pub-footer{background:#1a1a1a} html.dark-mode body.public-page .modal-content,body.public-page.dark-mode .modal-content{background:#1e1e1e !important} html.dark-mode body.public-page .modal-title,body.public-page.dark-mode .modal-title{color:#e6e1e5 !important} html.dark-mode body.public-page .btn-close,body.public-page.dark-mode .btn-close{filter: invert(1) grayscale(100%) brightness(200%);} html.dark-mode body.public-page .nav-toggle-btn,body.public-page.dark-mode .nav-toggle-btn{ background:rgba(83,67,65,.15);border-color:rgba(83,67,65,.25);color:#d7c2bf} html.dark-mode body.public-page .nav-toggle-btn:hover,body.public-page.dark-mode .nav-toggle-btn:hover{ color:#ff897a;border-color:rgba(255,137,122,.25);background:rgba(255,137,122,.08)} /* ═══ DARK MODE — Navbar toggle (hamburger) ═══ */ html.dark-mode body.public-page .pub-navbar-toggle, body.public-page.dark-mode .pub-navbar-toggle{ color:#e6e1e5 !important;border-color:rgba(255,137,122,.3) !important} html.dark-mode body.public-page .pub-navbar-toggle i, body.public-page.dark-mode .pub-navbar-toggle i{ color:var(--pub-text-muted) !important} html.dark-mode body.public-page .pub-navbar-toggle:hover, body.public-page.dark-mode .pub-navbar-toggle:hover{ color:#ff897a !important;background:rgba(255,137,122,.1) !important} /* ═══ DARK MODE — Navbar links (desktop) ═══ */ html.dark-mode body.public-page .pub-navbar-links a, body.public-page.dark-mode .pub-navbar-links a{ color:#e6e1e5 !important} html.dark-mode body.public-page .pub-navbar-links a i, body.public-page.dark-mode .pub-navbar-links a i{ color:var(--pub-text-muted) !important} html.dark-mode body.public-page .pub-navbar-links a:hover, body.public-page.dark-mode .pub-navbar-links a:hover{ color:#ff897a !important;background:rgba(255,137,122,.1) !important} html.dark-mode body.public-page .pub-navbar-links a:hover i, body.public-page.dark-mode .pub-navbar-links a:hover i{ color:#ffb4a8 !important} /* ═══ DARK MODE — Nav toggle buttons ═══ */ html.dark-mode body.public-page .nav-toggle-btn, body.public-page.dark-mode .nav-toggle-btn{ color:#e6e1e5 !important;background:rgba(255,137,122,.08) !important; border-color:rgba(255,137,122,.25) !important} html.dark-mode body.public-page .nav-toggle-btn i, body.public-page.dark-mode .nav-toggle-btn i{ color:var(--pub-text-muted) !important} html.dark-mode body.public-page .nav-toggle-btn:hover, body.public-page.dark-mode .nav-toggle-btn:hover{ color:#ff897a !important;border-color:rgba(255,137,122,.4) !important; background:rgba(255,137,122,.15) !important} /* ═══ DARK MODE — Mobile Sidebar Overlay ═══ */ html.dark-mode body.public-page .mobile-sidebar-overlay, body.public-page.dark-mode .mobile-sidebar-overlay{ background:rgba(0,0,0,.65) !important} /* ═══ DARK MODE — Mobile Sidebar ═══ */ html.dark-mode body.public-page .mobile-sidebar, body.public-page.dark-mode .mobile-sidebar{ background:#2a2a2a !important; border-left:3px solid #ff897a !important; box-shadow:-6px 0 30px rgba(0,0,0,.5) !important} html.dark-mode body.public-page .mobile-sidebar-header, body.public-page.dark-mode .mobile-sidebar-header{ border-bottom:1px solid rgba(255,137,122,.15) !important} html.dark-mode body.public-page .mobile-sidebar-close, body.public-page.dark-mode .mobile-sidebar-close{ color:#d7c2bf !important} html.dark-mode body.public-page .mobile-sidebar-close:hover, body.public-page.dark-mode .mobile-sidebar-close:hover{ color:#ff897a !important} html.dark-mode body.public-page .mobile-sidebar-link, body.public-page.dark-mode .mobile-sidebar-link{ color:#e6e1e5 !important} html.dark-mode body.public-page .mobile-sidebar-link:hover, body.public-page.dark-mode .mobile-sidebar-link:hover{ background:rgba(255,137,122,.12) !important;color:#ff897a !important} html.dark-mode body.public-page .mobile-sidebar-link i, body.public-page.dark-mode .mobile-sidebar-link i{ color:var(--pub-text-muted) !important} html.dark-mode body.public-page .mobile-sidebar-link:hover i, body.public-page.dark-mode .mobile-sidebar-link:hover i{ color:#ffb4a8 !important} html.dark-mode body.public-page .mobile-sidebar-divider, body.public-page.dark-mode .mobile-sidebar-divider{ border-top:1px solid rgba(255,137,122,.12) !important} html.dark-mode body.public-page .mobile-sidebar-footer, body.public-page.dark-mode .mobile-sidebar-footer{ color:#a08c89 !important; border-top:1px solid rgba(255,137,122,.1) !important} /* ─── Search form ─── */ .pub-hero-search-form{max-width:700px;margin:0 auto;position:relative} .search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .search-row-main{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15); border-radius:24px;padding:8px 12px;backdrop-filter:blur(12px)} .search-field{flex:1;min-width:200px;border-right:1px solid rgba(255,255,255,.2);margin-right:10px} .search-field:last-child{border-right:none;margin-right:0} .search-field label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase; letter-spacing:.5px;color:rgba(255,255,255,.8);margin-bottom:2px;padding-left:4px; font-family:'Work Sans',sans-serif} .search-field input,.search-field select{width:100%;border:none;background:transparent; padding:4px;font-size:1rem;color:#FFFFFF;font-family:'Work Sans',sans-serif} .search-field input::placeholder{color:rgba(255,255,255,.6)} .search-field input:focus,.search-field select:focus{outline:none} .search-btn{padding:12px 28px;background:var(--pub-primary);color:#fff;border:none; border-radius:20px;font-weight:600;cursor:pointer; transition:all var(--pub-transition);font-size:.95rem;display:flex;align-items:center;gap:6px; font-family:'Work Sans',sans-serif;white-space:nowrap} .search-btn:hover{filter:saturate(1.15);transform:translateY(-1px)} .search-autocomplete{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:8px; background:var(--pub-card);border-radius:var(--pub-radius); box-shadow:var(--pub-shadow-lg);overflow:hidden} /* View tabs */ .view-tabs{display:flex;gap:8px;margin-top:16px;justify-content:center} .view-tab{background:var(--pub-card);border:1px solid var(--pub-ghost-border); color:var(--pub-text-secondary);padding:8px 16px;border-radius:var(--pub-radius); font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s; font-family:'Work Sans',sans-serif;display:flex;align-items:center;gap:6px} .view-tab:hover{color:var(--pub-primary)} .view-tab.active{background:var(--pub-gradient);color:#fff;border-color:transparent} /* Map styles */ .map-container{height:500px;border-radius:var(--pub-radius-lg);overflow:hidden;position:relative; box-shadow:var(--pub-shadow)} .map-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;background:var(--pub-card)} .map-legend{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:16px; font-size:.82rem;color:var(--pub-text-muted)} /* Mobile sidebar */ .pub-navbar-toggle{display:none;background:transparent;border:1px solid rgba(176,11,22,.15); color:#1a1c1c;font-size:1.2rem;cursor:pointer;padding:6px 10px; border-radius:var(--pub-radius);transition:all .2s} .pub-navbar-toggle i{color:var(--pub-text-muted)} .pub-navbar-toggle:hover{color:var(--pub-primary)} .mobile-sidebar-overlay{position:fixed;inset:0;background:rgba(26,28,28,.45);backdrop-filter:blur(6px); z-index:1001;opacity:0;pointer-events:none;transition:opacity .3s} .mobile-sidebar-overlay.open{opacity:1;pointer-events:auto} .mobile-sidebar{position:fixed;top:0;right:0;bottom:0;width:280px; background:#ffffff; border-left:3px solid var(--pub-primary); z-index:1002;transform:translateX(100%);transition:transform .3s ease; display:flex;flex-direction:column; box-shadow:-6px 0 30px rgba(0,0,0,.12)} .mobile-sidebar.open{transform:translateX(0)} .mobile-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:20px; border-bottom:1px solid rgba(176,11,22,.1)} .mobile-sidebar-brand{display:flex;align-items:center;gap:8px;text-decoration:none} .mobile-sidebar-close{background:transparent;border:none;color:#6b5855; font-size:1.3rem;cursor:pointer;padding:4px;transition:color .2s} .mobile-sidebar-close:hover{color:var(--pub-primary)} .mobile-sidebar-nav{flex:1;padding:0 16px;display:flex;flex-direction:column;gap:4px} .mobile-sidebar-link{display:flex;align-items:center;gap:12px;padding:12px 16px; color:#3d2b28;text-decoration:none;font-size:.9rem;font-weight:500; border-radius:var(--pub-radius);transition:all .2s;font-family:'Work Sans',sans-serif} .mobile-sidebar-link:hover{background:rgba(176,11,22,.07);color:var(--pub-primary)} .mobile-sidebar-link-btn{width:100%;background:transparent;border:none;cursor:pointer;text-align:left} .mobile-sidebar-link i{width:20px;text-align:center;color:var(--pub-text-muted);font-size:1rem} .mobile-sidebar-divider{border:none;border-top:1px solid rgba(176,11,22,.1);margin:8px 0} .mobile-sidebar-footer{padding:16px;text-align:center;font-size:.78rem;color:#6b5855; border-top:1px solid rgba(176,11,22,.08)} /* Scroll reveal animation */ .scroll-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .scroll-reveal.visible{opacity:1;transform:translateY(0)} /* ─── RESPONSIVE ─── */ @media(max-width:992px){ .pub-hero{min-height:80vh;padding:100px 20px 60px} .pub-sites-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .pub-navbar{max-width:100%;width:calc(100% - 24px)} } @media(max-width:768px){ .pub-footer-grid{grid-template-columns:1fr;} .pub-navbar-desktop{display:none !important} .pub-navbar-toggle{display:block} .pub-navbar{top:8px;padding:8px 16px} .pub-hero-stats{gap:12px; padding:12px 16px; border-radius:24px; width:100%} .pub-hero-stats .value{font-size:1.2rem} .pub-hero-stats .label{font-size:.7rem} .pub-property-row{flex-direction:column} .pub-property-row .prop-image{width:100%;height:200px} .pub-property-row .prop-price{flex-direction:row;flex-wrap:wrap;justify-content:space-between; align-items:center;padding:14px 20px;min-width:auto;gap:8px} .pub-property-row .prop-price .amount{font-size:1rem} .pub-property-row .prop-price .btn-details{flex-shrink:0} .pub-sites-grid{grid-template-columns:1fr} .pub-section{padding:48px 16px} } @media(max-width:400px){ .pub-property-row .prop-price{flex-direction:column;align-items:stretch;text-align:center} .pub-property-row .prop-price .btn-details{width:100%} .pub-site-card { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding:1rem; } .pub-site-card .card-address{ display: flex; flex-direction: column; text-align: left; align-items: flex-start; } } @media(max-width:480px){ .pub-hero{min-height:70vh;padding:80px 16px 48px} .pub-hero p{font-size:.92rem} .pub-site-card .card-image,.pub-site-card .carousel{height:180px} .pub-footer-grid{grid-template-columns:1fr 1fr} } /* --- Fichier : static/css/public.css (À ajouter à la fin) --- */ /* ═══════════════════════════════════════════ STYLES PAGE DETAILS PROPRIÉTÉ (Maquette) ═══════════════════════════════════════════ */ .btn-retour-top { background-color: var(--pub-primary); color: white !important; padding: 8px 20px; border-radius: 12px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); transition: all 0.2s ease; } .btn-retour-top:hover { background-color: var(--pub-primary-light); transform: translateY(-2px); } .detail-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2.8rem; color: var(--pub-text); } .detail-info-list p { font-size: 1.1rem; margin-bottom: 8px; color: var(--pub-text); } .detail-info-list .label { color: var(--pub-primary); font-weight: 600; } .detail-price { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2rem; color: var(--pub-primary); } .detail-price .price-period { font-size: 1.2rem; color: var(--pub-text-muted); } .section-heading { font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--pub-primary); font-size: 1.8rem; } .description-text { font-family: 'Work Sans', sans-serif; color: var(--pub-text); font-size: 1.1rem; line-height: 1.8; } /* Grille des images (Bento Box) */ .detail-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; height: 420px; } .main-img-wrapper { height: 100%; border-radius: 20px; overflow: hidden; background: var(--pub-surface); } .main-img { width: 100%; height: 100%; object-fit: cover; } .side-imgs { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; height: 100%; } .side-img-wrapper { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: var(--pub-surface); } .side-img { width: 100%; height: 100%; object-fit: cover; } .placeholder-img { display: flex; align-items: center; justify-content: center; color: var(--pub-text-muted); font-size: 3rem; background: var(--pub-card-alt); } /* Boutons d'action */ .detail-actions .btn-action { padding: 14px 30px; border-radius: 14px; font-weight: 700; font-size: 1.1rem; font-family: 'Manrope', sans-serif; transition: all 0.2s; border: 2px solid var(--pub-primary); text-decoration: none; } .btn-pay { background-color: var(--pub-primary); color: white !important; box-shadow: 0 6px 15px rgba(43, 92, 27, 0.2); } .btn-pay:hover { background-color: var(--pub-primary-light); transform: translateY(-2px); } .btn-contact { background-color: transparent; color: var(--pub-text); } .btn-contact:hover { background-color: var(--pub-primary-glow); transform: translateY(-2px); } /* Carte en bas à droite */ .detail-map { height: 350px; border-radius: 20px; border: 3px solid var(--pub-card); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important; z-index: 1; } /* Dark mode spécifique à cette vue */ html.dark-mode .detail-map { border-color: #252525; } @media (max-width: 992px) { .detail-gallery { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; } .main-img-wrapper { height: 300px; } .side-imgs { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: 150px; } } >>>>>>> Stashed changes