:root{--primary:#1a3c5e;--secondary:#2e86ab;--accent:#f0a500;--success:#28a745;--danger:#dc3545;--warning:#ffc107;--light:#f8f9fa;--dark:#333;--white:#fff;--border:#dee2e6}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:var(--dark);background:#f5f6fa;line-height:1.6}
a{color:var(--secondary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header{background:var(--primary);color:white;padding:15px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.header .container{display:flex;justify-content:space-between;align-items:center}
.logo h1{font-size:22px;color:white}
.logo a{color:white;text-decoration:none;font-size:22px;font-weight:bold}
.logo p{font-size:12px;color:rgba(255,255,255,.7)}
nav{display:flex;align-items:center;gap:20px}
nav a{color:rgba(255,255,255,.85);font-size:15px;transition:color .2s}
nav a:hover,nav a.active{color:white;text-decoration:none}
.btn-login{background:var(--accent);color:var(--dark)!important;padding:8px 18px;border-radius:25px;font-weight:600}
.btn-login:hover{background:#e09400}
.btn-logout{background:rgba(255,255,255,.2);color:white!important;padding:6px 14px;border-radius:20px;font-size:13px}
.welcome{color:rgba(255,255,255,.8);font-size:14px}
.hero{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:white;padding:80px 0;text-align:center}
.hero h2{font-size:42px;margin-bottom:15px}
.hero p{font-size:20px;margin-bottom:30px;opacity:.9}
.hero-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
.btn-primary{background:var(--accent);color:var(--dark);padding:14px 30px;border-radius:30px;font-weight:700;font-size:16px;display:inline-block;transition:transform .2s,box-shadow .2s;border:none;cursor:pointer}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2);text-decoration:none}
.btn-secondary{background:rgba(255,255,255,.2);color:white;padding:14px 30px;border-radius:30px;font-weight:600;font-size:16px;border:2px solid rgba(255,255,255,.5);display:inline-block;transition:all .2s}
.btn-secondary:hover{background:rgba(255,255,255,.3);text-decoration:none;color:white}
.btn-full{width:100%;text-align:center}
section{padding:60px 0}
section h2{font-size:28px;color:var(--primary);margin-bottom:30px;text-align:center}
.biens-disponibles{background:var(--white)}
.biens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:25px}
.bien-card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 3px 15px rgba(0,0,0,.1);transition:transform .2s,box-shadow .2s}
.bien-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.15)}
.bien-card img{width:100%;height:200px;object-fit:cover}
.bien-photo-placeholder{width:100%;height:200px;background:linear-gradient(135deg,#e0e7ef,#c5d3e0);display:flex;align-items:center;justify-content:center;font-size:60px}
.bien-info{padding:20px}
.bien-info h3{color:var(--primary);margin-bottom:10px;font-size:18px}
.bien-adresse{color:#666;font-size:14px;margin-bottom:8px}
.bien-loyer{color:var(--success);font-weight:700;font-size:18px;margin:8px 0}
.bien-charges{color:#888;font-size:13px}
.bien-desc{color:#555;font-size:14px;margin:10px 0}
.btn-voir{display:inline-block;background:var(--primary);color:white!important;padding:8px 20px;border-radius:20px;font-size:14px;margin-top:10px;transition:background .2s}
.btn-voir:hover{background:var(--secondary);text-decoration:none}
.services{background:var(--light)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}
.service-card{background:white;padding:30px;border-radius:12px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.service-card .icon{font-size:40px;display:block;margin-bottom:15px}
.service-card h3{color:var(--primary);margin-bottom:10px}
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--primary),var(--secondary))}
.login-container{background:white;padding:40px;border-radius:15px;width:100%;max-width:420px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.login-header{text-align:center;margin-bottom:30px}
.login-header h1{color:var(--primary);font-size:28px}
.login-header h2{color:#666;font-size:18px;font-weight:normal;margin-top:5px}
.login-form .form-group{margin-bottom:20px}
.login-footer{display:flex;justify-content:center;gap:15px;margin-top:20px;font-size:14px;color:#888}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;color:#555;font-size:14px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 15px;border:2px solid var(--border);border-radius:8px;font-size:15px;transition:border-color .2s;font-family:inherit}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--secondary);outline:none}
.alert-error{background:#f8d7da;color:#721c24;padding:12px 15px;border-radius:8px;border-left:4px solid var(--danger);margin-bottom:20px}
.alert-success{background:#d4edda;color:#155724;padding:12px 15px;border-radius:8px;border-left:4px solid var(--success);margin-bottom:20px}
.alert-info{background:#d1ecf1;color:#0c5460;padding:20px;border-radius:8px;border-left:4px solid var(--secondary)}
.no-data{text-align:center;color:#888;padding:40px;font-size:16px}
.main-content{padding:40px 0;min-height:calc(100vh - 130px)}
.main-content h1{color:var(--primary);margin-bottom:30px;font-size:28px}
.info-card{background:white;padding:25px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:25px}
.info-card h2{color:var(--primary);margin-bottom:15px;font-size:20px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.info-grid div{padding:8px;background:var(--light);border-radius:6px;font-size:14px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:25px}
.stat-card{background:white;padding:20px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);display:flex;align-items:center;gap:15px}
.stat-icon{font-size:36px}
.stat-number{display:block;font-size:24px;font-weight:700;color:var(--primary)}
.stat-label{font-size:13px;color:#888}
.section-card{background:white;padding:25px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.section-card h2{color:var(--primary);margin-bottom:20px;font-size:20px}
.table-responsive{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table th{background:var(--primary);color:white;padding:12px 15px;text-align:left}
.data-table td{padding:12px 15px;border-bottom:1px solid var(--border)}
.data-table tr:hover{background:var(--light)}
.badge{padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}
.badge-paye{background:#d4edda;color:#155724}
.badge-en_attente{background:#fff3cd;color:#856404}
.badge-retard{background:#f8d7da;color:#721c24}
.btn-quittance{background:var(--secondary);color:white!important;padding:5px 12px;border-radius:15px;font-size:12px;white-space:nowrap}
.btn-quittance:hover{background:var(--primary);text-decoration:none}
.text-muted{color:#aaa}
.contact-grid{display:grid;grid-template-columns:1fr 350px;gap:40px}
.contact-info{background:var(--primary);color:white;padding:30px;border-radius:12px;height:fit-content}
.contact-info h2{color:white;margin-bottom:20px}
.contact-item{display:flex;align-items:center;gap:12px;margin-bottom:15px;font-size:15px}
.contact-item .icon{font-size:20px}
.contact-form{background:white;padding:30px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
footer{background:var(--primary);color:rgba(255,255,255,.8);padding:25px 0;text-align:center;margin-top:auto}
footer a{color:rgba(255,255,255,.7)}
.admin-body{background:#f0f2f5}
.admin-sidebar{width:250px;background:var(--primary);min-height:100vh;padding:20px 0;position:fixed}
.admin-sidebar .logo{padding:20px;color:white;font-size:18px;font-weight:bold;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:10px}
.admin-nav a{display:flex;align-items:center;gap:10px;padding:12px 20px;color:rgba(255,255,255,.8);transition:all .2s}
.admin-nav a:hover,.admin-nav a.active{background:rgba(255,255,255,.1);color:white;text-decoration:none}
.admin-main{margin-left:250px;padding:30px}
.admin-header{background:white;padding:20px 30px;margin:-30px -30px 30px;box-shadow:0 2px 5px rgba(0,0,0,.08);display:flex;justify-content:space-between;align-items:center}
.admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}
.admin-card{background:white;padding:25px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.08);text-align:center;border-top:4px solid var(--secondary)}
.admin-card .number{font-size:36px;font-weight:700;color:var(--primary)}
.admin-card .label{color:#888;font-size:14px;margin-top:5px}
.btn-danger{background:var(--danger);color:white;padding:6px 14px;border-radius:6px;font-size:13px;border:none;cursor:pointer}
.btn-success{background:var(--success);color:white;padding:6px 14px;border-radius:6px;font-size:13px;border:none;cursor:pointer}
.btn-sm{padding:5px 12px;font-size:13px;border-radius:5px}
@media(max-width:768px){.hero h2{font-size:28px}nav{display:none}.contact-grid{grid-template-columns:1fr}.admin-sidebar{display:none}.admin-main{margin-left:0}.biens-grid{grid-template-columns:1fr}}