/* =====================================================
   WIZBAD DIGITAL — Custom CSS (compléments Tailwind)
   Fonts, loader, nav, modals, WhatsApp float, toast
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ── PALETTE BRAND WIZBAD DIGITAL : Rouge + Bleu (logo) ── */
  --bg:#FFFFFF;
  --em:#E72028;        /* Rouge primaire (logo) */
  --em-dark:#C61820;   /* Rouge hover */
  --em-tint:#FEE2E4;   /* Rouge clair (fond) */
  --or:#29ABE2;        /* Bleu secondaire (logo) */
  --or-light:#4BB9E8;
  --or-tint:#DDF2FB;   /* Bleu clair (fond) */
  --br:#8B5E3C;
  --ink:#1F2937; --ink-light:#4B5563; --ink-muted:#9CA3AF;
  --brd:#E5E7EB; --w:#FFFFFF;
  --ease: cubic-bezier(.25,.46,.45,.94);
  --easePop: cubic-bezier(.34,1.56,.64,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.7; overflow-x: hidden; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--em); border-radius: 3px; }
h1,h2,h3,h4 { font-family: 'Poppins', sans-serif; }
img { max-width: 100%; display: block; }

/* ── BUTTONS (réutilisables, conservés simples) ── */
.btn-em, .btn-or, .btn-out, .btn-ghost, .btn-wa, .btn-sand {
  display:inline-flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif;
  font-size:13px; font-weight:600; padding:10px 20px; border-radius:8px; cursor:pointer;
  border:none; transition: all .25s var(--ease); white-space:nowrap;
}
.btn-em       { background:var(--em); color:#fff; box-shadow: 0 4px 20px rgba(231,32,40,.25); }
.btn-em:hover { background:var(--em-dark); box-shadow: 0 6px 28px rgba(231,32,40,.35); transform: translateY(-2px); }
.btn-or       { background:var(--or); color:#fff; box-shadow: 0 4px 20px rgba(41,171,226,.25); }
.btn-or:hover { background:var(--or-light); transform: translateY(-2px); }
.btn-out      { background:transparent; color:var(--em); border:1.5px solid var(--em); }
.btn-out:hover{ background:var(--em-tint); }
.btn-ghost    { background:transparent; color:var(--ink); border:1.5px solid var(--brd); }
.btn-ghost:hover{ background:#F3F4F6; }
.btn-wa       { background:#25D366; color:#fff; box-shadow: 0 4px 16px rgba(37,211,102,.3); }
.btn-wa:hover { background:#1eba58; transform: translateY(-2px); }
.btn-sand     { background:#EADBC8; color:var(--br); }
.btn-sand:hover{ background:#DEC9A8; }
button:active, .btn-em:active, .btn-or:active, .btn-out:active, .btn-ghost:active, .btn-wa:active, .btn-sand:active { transform: scale(.97); }
.btn-xl { padding: 16px 36px; font-size: 15px; border-radius: 12px; }
.btn-lg { padding: 13px 28px; }
.btn-sm { padding: 7px 14px; font-size: 12px; }

/* ── INPUTS ── */
.input { width:100%; background:var(--w); border:1.5px solid var(--brd); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:14px; padding:12px 16px; border-radius:8px; outline:none;
  transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--em); box-shadow: 0 0 0 3px rgba(231,32,40,.10); }
.input::placeholder { color: var(--ink-muted); }
.input-label { display:block; font-family:'Poppins',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color: var(--ink-light); margin-bottom:8px; }

/* ── NAVBAR ── */
#main-nav.scrolled { background: rgba(255,255,255,.97); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.nav-link { font-size: 13px; font-weight: 500; color: var(--ink-light); cursor: pointer; padding: 4px 0; position: relative; transition: color .2s; }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background: var(--em); border-radius:1px; transition: width .3s var(--ease); }
.nav-link:hover, .nav-link.active { color: var(--em); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.mnl { padding: 13px 16px; font-size: 15px; font-weight: 500; color: var(--ink); border-radius: 8px; transition: all .2s; display:flex; align-items:center; gap:10px; }
.mnl:hover, .mnl.active { background: var(--em-tint); color: var(--em); }
#mobile-nav.open { display: flex !important; }

/* ── LOADER ── */
#page-loader { position: fixed; inset: 0; background: var(--bg); z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; transition: opacity .7s, visibility .7s; }
#page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.ll { font-family: 'Poppins',sans-serif; font-size: 44px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.ll b { color: var(--em); }
.loader-logo { width: auto; height: 84px; max-width: 92vw; }
@media (max-width: 640px) { .loader-logo { height: 64px; } }
.lsub { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-muted); }
.lbw { width: 140px; height: 3px; background: var(--brd); border-radius: 9px; overflow: hidden; }
.lb { height: 100%; width: 0; background: linear-gradient(90deg, var(--em), var(--or)); border-radius: 9px; animation: loadBar 1.6s var(--ease) forwards; }
@keyframes loadBar { to { width: 100%; } }

/* ── TOAST ── */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px); z-index: 9000;
  background: var(--ink); color: #fff; border-radius: 12px; padding: 13px 22px; display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; box-shadow: 0 10px 40px rgba(0,0,0,.18); transition: transform .35s var(--easePop); white-space: nowrap; }
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── WHATSAPP FLOAT ── */
.wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 1500; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.wa-btn { width: 54px; height: 54px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; box-shadow: 0 6px 24px rgba(37,211,102,.4); border: none; position: relative; transition: all .28s var(--easePop); }
.wa-btn:hover { transform: scale(1.1); }
.wa-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: waPulse 2s infinite; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
.wa-tip { background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; padding: 7px 14px; border-radius: 8px;
  white-space: nowrap; opacity: 0; transform: translateX(8px); transition: all .28s; pointer-events: none; }
.wa-float:hover .wa-tip { opacity: 1; transform: translateX(0); }

/* ── MODALS ── */
.moverlay { position: fixed; inset: 0; background: rgba(55,65,81,.6); backdrop-filter: blur(6px); z-index: 5000;
  display: none; align-items: center; justify-content: center; padding: 20px; }
.moverlay.open { display: flex; }
.mbox { background: var(--w); border-radius: 24px; width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.18); animation: mIn .35s var(--easePop); }
@keyframes mIn { from { opacity: 0; transform: scale(.92) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.m-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--brd); display: flex; align-items: center; justify-content: space-between; }
.m-body { padding: 22px 26px 28px; }
.m-close { background: #F3F4F6; border: none; color: var(--ink-light); width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s; }
.m-close:hover { background: var(--brd); color: var(--ink); }

/* ── FOOTER ── */
.footer-title { font-family: 'Poppins',sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--em-tint); margin-bottom: 16px; }
.footer-link { font-size: 13px; color: rgba(255,255,255,.55); cursor: pointer; transition: color .2s; }
.footer-link:hover { color: #fff; }
.footer-social { width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; transition: all .2s; }
.footer-social:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.5); }
.footer-social[aria-label*="Facebook"]:hover  { background:#1877F2; border-color:#1877F2; }
.footer-social[aria-label*="Instagram"]:hover { background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); border-color:transparent; }
.footer-social[aria-label*="WhatsApp"]:hover  { background:#1eba58; border-color:#1eba58; }

/* ── MARQUEE ── */
.marquee-wrap { overflow: hidden; border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd); padding: 14px 0; background: var(--w); }
.marquee-track { display: flex; gap: 40px; animation: marqueeScroll 24s linear infinite; white-space: nowrap; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 12px; font-family: 'Poppins',sans-serif; font-size: 11px;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.marquee-sep { width: 4px; height: 4px; background: var(--em); border-radius: 50%; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── CARD HOVER ── */
.card { background: var(--w); border: 1px solid var(--brd); border-radius: 20px; overflow: hidden;
  transition: all .3s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card:hover { box-shadow: 0 10px 40px rgba(0,0,0,.12); transform: translateY(-4px); border-color: transparent; }

/* ── BADGES ── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 9999px;
  font-family: 'Poppins',sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.badge-em { background: var(--em-tint); color: var(--em); }
.badge-or { background: var(--or-tint); color: var(--or); }
.badge-ok { background: #DCFCE7; color: #15803D; }
.badge-no { background: #FEE2E2; color: #DC2626; }
.badge-sand { background: #EADBC8; color: var(--br); }
.badge-gray { background: #F3F4F6; color: var(--ink-light); }

/* ── FILTER TABS ── */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-tab { padding: 8px 18px; background: var(--w); border: 1.5px solid var(--brd); color: var(--ink-light);
  font-family: 'Poppins',sans-serif; font-size: 12px; font-weight: 500; border-radius: 9999px; cursor: pointer;
  transition: all .22s var(--ease); }
.filter-tab:hover { border-color: var(--em); color: var(--em); }
.filter-tab.active { background: var(--em); border-color: var(--em); color: #fff; }

/* ── BG VARIANTS ── */
.bg-cars      { background: linear-gradient(180deg, var(--em-tint) 0%, var(--bg) 60%); }
.bg-apts      { background: linear-gradient(180deg, var(--or-tint) 0%, var(--bg) 60%); }
.bg-services  { background: linear-gradient(180deg, var(--em-tint) 0%, var(--bg) 60%); }
.bg-portfolio { background: linear-gradient(180deg, var(--or-tint) 0%, var(--bg) 60%); }
.bg-contact   { background: linear-gradient(180deg, var(--em-tint) 0%, var(--bg) 50%); }
.bg-about     { background: linear-gradient(180deg, var(--or-tint) 0%, var(--bg) 60%); }
.bg-hero      { background: linear-gradient(160deg, #FFFFFF 0%, var(--em-tint) 50%, var(--or-tint) 100%); }

/* ── AOS ADJUSTMENTS ── */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }