/* style.css - design moderne simple */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#0b1220;background:linear-gradient(180deg,#f6f8fb,#ffffff)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:40px 20px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 40px;background:linear-gradient(90deg,#0b1220,#111827);color:#fff}
.brand{font-weight:700;font-size:18px}
.nav a{margin-left:18px;color:rgba(255,255,255,0.9)}
.nav a.active{text-decoration:underline}

/* Hero */
.hero{display:flex;gap:30px;padding:60px 20px;color:#fff}
.hero-left{flex:1}
.hero-right{width:320px}
.hero h1{font-size:38px;line-height:1.05;margin:0 0 16px}
.lead{opacity:0.92;margin-bottom:18px}
.accent{color:#ffb400}
.btn-primary{background:green;color:#ffffff;padding:12px 18px;border-radius:8px;font-weight:700}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.14);color:#fff;padding:10px 14px;border-radius:8px}
.card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 20px rgba(11,17,34,0.06);color:#0b1220}
.mini-title{font-weight:700;margin-bottom:8px}
.mini-row{display:flex;justify-content:space-between;border-top:1px solid #f1f3f5;padding:8px 0}

/* Sections */
.section{padding:40px 20px}
.section-title{font-size:22px;margin-bottom:6px}
.section-sub{color:#475569;margin-bottom:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2 .card img,.grid-3 .card img{width:100%;height:180px;object-fit:cover;border-radius:8px}

/* Service card */
.service-card{display:flex;flex-direction:column}
.service-card .card-body{padding:10px}
.card-actions{display:flex;gap:10px;margin-top:12px}
.btn-small{background:#111827;color:#fff;padding:8px 12px;border-radius:8px}
.btn-interested{background:#ffb400;color:#000;padding:8px 12px;border-radius:8px;border:none}

/* Footer */
.site-footer{display:flex;justify-content:space-between;padding:28px 40px;background:#0b1220;color:#fff}

/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(10,12,20,0.45);z-index:1000}
.modal-panel{max-width:520px;margin:6% auto;padding:18px;position:relative}
.modal-close{position:absolute;right:14px;top:8px;border:none;background:transparent;font-size:22px;cursor:pointer}

/* Table / Admin */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #f1f3f5}
.muted{color:#64748b}
.grid-3 .stat{padding:18px;text-align:center}

/* Buttons */
.btn-ghost{background:transparent;border:1px solid #e2e8f0;padding:10px 14px;border-radius:8px}

/* Small screens */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .hero{flex-direction:column}
  .hero-right{width:100%}
  .topbar{padding:12px}
  .container{padding:20px}
}

.social {
  transition: transform 0.3s ease, color 0.3s ease;
}

.social:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

/* ---------- MENU MOBILE ---------- */

.menu-toggle {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff; /* adapte selon ton header */
  z-index: 1001;
}

/* Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; /* IMPORTANT */
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  z-index: 999;
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Mobile nav behavior */
@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh; /* IMPORTANT */
    background: #000;
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    gap: 8px;
    transition: 0.3s ease;
    z-index: 1000;
    overflow-y: auto; /* pour scroller si besoin */
  }  

  .mobile-nav.active {
    right: 0;
  }

  .mobile-nav .nav-link {
    color: #fff;
    font-size: 18px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    transition: color 0.25s ease, transform 0.2s ease;
  }
  
  /* Effet hover / touch */
  .mobile-nav .nav-link:hover {
    color: #ffb400;
    transform: translateX(4px);
  }
  

  .close-menu {
    display: block;
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 25px;
    padding: 6px 10px;
    border-radius: 8px;
  }
  
  .close-menu:hover {
    background: rgba(255,255,255,0.08);
  }
  
}

/* Desktop */
@media (min-width: 769px) {
  .close-menu {
    display: none;
  }
}