/* LOCCA Réservation - Style glassmorphism cohérent */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0f;
  --bg2:#13131f;
  --gold:#c9a961;
  --gold-light:#e8d4a0;
  --text:#f4f4f8;
  --text-dim:#a0a0b0;
  --glass:rgba(255,255,255,0.06);
  --glass-border:rgba(201,169,97,0.2);
}
html,body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;min-height:100vh;overflow-x:hidden}

/* Aurora background */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(201,169,97,0.15), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(120,80,200,0.12), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(40,80,180,0.08), transparent 60%),
    var(--bg);
  animation:aurora 20s ease infinite;
}
@keyframes aurora{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.1) rotate(2deg)}
}

/* Header */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 5%;
  background:rgba(10,10,15,0.5);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  display:flex;justify-content:space-between;align-items:center;
}
.nav .logo{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none;letter-spacing:2px}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center}
.nav-links a{color:var(--text);text-decoration:none;font-size:.95rem;transition:.3s}
.nav-links a:hover{color:var(--gold)}
.btn-nav{padding:10px 20px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#0a0a0f!important;border-radius:30px;font-weight:600}
.burger{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(10,10,15,0.95);backdrop-filter:blur(20px);flex-direction:column;padding:20px;gap:16px;border-bottom:1px solid var(--glass-border)}
  .nav-links.open{display:flex}
  .burger{display:block}
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:120px 5% 60px}
.page-title{font-size:clamp(2rem,5vw,3rem);background:linear-gradient(135deg,#fff,var(--gold-light));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px;letter-spacing:1px}
.page-sub{color:var(--text-dim);margin-bottom:40px;font-size:1rem}

/* Glass cards */
.glass{
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:24px;
}

/* Filtres */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filter-btn{padding:10px 18px;background:var(--glass);border:1px solid var(--glass-border);color:var(--text);border-radius:30px;cursor:pointer;font-size:.9rem;transition:.3s;backdrop-filter:blur(10px)}
.filter-btn:hover,.filter-btn.active{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#0a0a0f;border-color:transparent}

/* Grid véhicules */
.vehicules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.vehicule-card{
  background:var(--glass);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:20px;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
  cursor:pointer;
}
.vehicule-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(201,169,97,0.2)}
.vehicule-card img{width:100%;height:200px;object-fit:cover;transition:.5s}
.vehicule-card:hover img{transform:scale(1.08)}
.vehicule-card .body{padding:20px}
.vehicule-card h3{font-size:1.25rem;margin-bottom:6px}
.vehicule-card .cat{display:inline-block;font-size:.75rem;padding:4px 10px;background:rgba(201,169,97,0.15);color:var(--gold-light);border-radius:20px;margin-bottom:10px;letter-spacing:1px}
.vehicule-card .desc{color:var(--text-dim);font-size:.9rem;margin-bottom:14px}
.vehicule-card .price{font-size:1.5rem;font-weight:700;color:var(--gold);margin-bottom:14px}
.vehicule-card .price span{font-size:.85rem;color:var(--text-dim);font-weight:400}
.btn-primary{display:block;width:100%;text-align:center;padding:12px 20px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#0a0a0f;border:none;border-radius:12px;font-weight:600;cursor:pointer;text-decoration:none;font-size:1rem;transition:.3s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(201,169,97,0.4)}
.btn-secondary{display:inline-block;padding:10px 18px;background:var(--glass);border:1px solid var(--glass-border);color:var(--text);border-radius:10px;text-decoration:none;font-size:.9rem;cursor:pointer}
.btn-secondary:hover{background:rgba(201,169,97,0.1);border-color:var(--gold)}

/* Modal réservation */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal.open{display:flex}
.modal-content{background:linear-gradient(135deg,rgba(20,20,30,0.95),rgba(30,20,40,0.95));backdrop-filter:blur(30px);border:1px solid var(--glass-border);border-radius:20px;padding:32px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto}
.modal-content h2{margin-bottom:8px;color:var(--gold-light)}
.modal-content .sub{color:var(--text-dim);margin-bottom:24px;font-size:.9rem}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.85rem;color:var(--text-dim);margin-bottom:6px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:10px;color:var(--text);font-size:16px;font-family:inherit}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--gold)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.total-display{padding:16px;background:rgba(201,169,97,0.1);border:1px solid var(--gold);border-radius:12px;text-align:center;margin:16px 0;font-size:1.1rem}
.total-display strong{color:var(--gold);font-size:1.5rem}
.close-btn{position:absolute;top:16px;right:20px;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{max-width:400px;width:100%}
.login-box h1{text-align:center;margin-bottom:8px;background:linear-gradient(135deg,#fff,var(--gold-light));-webkit-background-clip:text;color:transparent}
.login-box .sub{text-align:center;color:var(--text-dim);margin-bottom:24px}
.alert{padding:12px;border-radius:10px;margin-bottom:16px;font-size:.9rem}
.alert-error{background:rgba(220,50,50,0.15);border:1px solid rgba(220,50,50,0.3);color:#ff9090}
.alert-success{background:rgba(50,180,100,0.15);border:1px solid rgba(50,180,100,0.3);color:#9eff9e}

/* Admin */
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
@media(max-width:900px){.admin-layout{grid-template-columns:1fr}}
.sidebar{background:rgba(15,15,25,0.7);backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);padding:30px 20px}
.sidebar h2{color:var(--gold-light);margin-bottom:30px;font-size:1.2rem}
.sidebar a{display:block;padding:12px 16px;color:var(--text-dim);text-decoration:none;border-radius:10px;margin-bottom:6px;font-size:.95rem;transition:.3s}
.sidebar a:hover,.sidebar a.active{background:rgba(201,169,97,0.15);color:var(--gold-light)}
.main{padding:30px 5%}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:30px}
.stat-card{padding:20px;background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:16px}
.stat-card .label{color:var(--text-dim);font-size:.85rem;margin-bottom:4px}
.stat-card .value{font-size:2rem;font-weight:700;color:var(--gold-light)}
table{width:100%;border-collapse:collapse;background:var(--glass);backdrop-filter:blur(20px);border-radius:16px;overflow:hidden}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.06);font-size:.9rem}
th{background:rgba(255,255,255,0.04);color:var(--gold-light);font-weight:600;font-size:.8rem;letter-spacing:1px;text-transform:uppercase}
.statut{padding:5px 12px;border-radius:20px;font-size:.75rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;display:inline-block}
.statut-en_attente{background:rgba(220,180,50,0.15);color:#ffd966;border:1px solid rgba(220,180,50,0.3)}
.statut-confirmee{background:rgba(50,180,100,0.15);color:#9eff9e;border:1px solid rgba(50,180,100,0.3)}
.statut-en_cours{background:rgba(80,140,230,0.15);color:#9ec6ff;border:1px solid rgba(80,140,230,0.3)}
.statut-terminee{background:rgba(150,150,160,0.15);color:#c0c0c8;border:1px solid rgba(150,150,160,0.3)}
.statut-annulee{background:rgba(220,50,50,0.15);color:#ff9090;border:1px solid rgba(220,50,50,0.3)}
.actions-cell{display:flex;gap:6px;flex-wrap:wrap}
.action-btn{padding:6px 10px;border:none;border-radius:8px;cursor:pointer;font-size:.75rem;font-weight:600}
.btn-confirm{background:rgba(50,180,100,0.2);color:#9eff9e}
.btn-cancel{background:rgba(220,50,50,0.2);color:#ff9090}
.btn-start{background:rgba(80,140,230,0.2);color:#9ec6ff}
.btn-end{background:rgba(150,150,160,0.2);color:#c0c0c8}
.table-wrap{overflow-x:auto;border-radius:16px}

/* Calendrier */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:20px}
.cal-day-name{text-align:center;font-size:.75rem;color:var(--text-dim);padding:8px;text-transform:uppercase;letter-spacing:1px}
.cal-day{aspect-ratio:1;padding:8px;background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;font-size:.85rem;position:relative;min-height:60px}
.cal-day.has-reservation{background:rgba(201,169,97,0.15);border-color:var(--gold)}
.cal-day .num{font-weight:600;color:var(--gold-light)}
.cal-day .count{font-size:.7rem;color:var(--text-dim);margin-top:4px}
.cal-day.other-month{opacity:.3}
.cal-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cal-nav h3{color:var(--gold-light)}

.empty{text-align:center;padding:60px 20px;color:var(--text-dim)}
.flash{padding:14px;border-radius:12px;margin-bottom:20px;background:rgba(50,180,100,0.15);border:1px solid rgba(50,180,100,0.3);color:#9eff9e}

@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
  .container{padding-top:100px}
  table{font-size:.8rem}
  th,td{padding:10px 8px}
}