/* Disable selection almost everywhere (keep forms usable) */
:root { -webkit-tap-highlight-color: transparent; }
body, body *:not(input):not(textarea):not(select) {
  -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
img, a img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* Optional: watermark overlay to discourage screenshots of images */
.watermark::after{
  content:"© Marifat"; position:fixed; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.06) 0 40px,
    rgba(0,0,0,.06) 40px 80px
  );
  mix-blend-mode: overlay;
}


/* =============== THEME GLOBAL =============== */
:root{
  --bg: #0e1122;
  --bg-2: #171a2b;
  --text: #e7e9f1;
  --muted: #b7bfd3;
  --muted-2: #9aa2b8;
  --accent: #ffd24d;           /* or #ffd54f */
  --accent-2: #ff6aa9;         /* rose bouton */
  --card: #111528;
  --border: rgba(255,255,255,.06);
  --shadow: 0 10px 35px rgba(0,0,0,.45);
}

/* Light mode (optionnel) */
body.light-mode{
  --bg:#f6f7fb; --bg-2:#ffffff; --text:#141824; --muted:#4b5266; --muted-2:#6c7286;
  --card:#ffffff; --border:rgba(10,10,10,.08);
}

/* Fond global, identique sur toute la page (plus de bande différente en haut) */
html, body{
  background:
    radial-gradient(1200px 600px at 50% 120%, rgba(255, 95, 162,.08), transparent 60%),
    radial-gradient(1000px 500px at 10% -10%, rgba(255, 210, 77,.08), transparent 50%),
    radial-gradient(900px 450px at 90% 0%, rgba(109, 120, 255,.08), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, #101329 60%, var(--bg) 100%);
  color: var(--text);
}

/* Petites bulles décoratives réutilisables */
.floating-elements{ pointer-events:none; position:absolute; inset:0; z-index:0; }
.bubble{
  position:absolute; width:42px; height:42px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
  box-shadow: 0 0 0 2px rgba(255,210,77,.08) inset;
  animation: bubbleFloat 7s ease-in-out infinite, bubblePulse 4s ease-in-out infinite;
  opacity:.8; filter: blur(.3px);
}
@keyframes bubbleFloat{
  0%,100%{ transform: translate(var(--x), calc(var(--y) + 0px)); }
  50%    { transform: translate(var(--x), calc(var(--y) - 22px)); }
}
@keyframes bubblePulse{ 0%,100%{transform: scale(1)} 50%{transform: scale(1.06)} }

/* =============== NAVBAR =============== */
.navbar{
  position: sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 22px;
  background: rgba(10,12,23,.35);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.logo{ font-weight:800; letter-spacing:.3px; color: var(--text); }
.logo a{ color:inherit; text-decoration:none; }

.navbar ul{ display:flex; gap:22px; align-items:center; }
.navbar a{
  color: var(--muted); text-decoration:none; font-weight:600; transition: .18s ease;
}
.navbar a:hover{ color: var(--text); text-decoration:none; }

/* Hamburger = invisible en desktop */
.hamburger{ display:none; font-size:24px; cursor:pointer; }

/* Bouton dark/light en haut à droite */
.mode-toggle{
  position: fixed; top:12px; right:16px; z-index:1100;
  background: var(--accent); color:#1d1a2b;
  border:none; border-radius:10px; padding:9px 12px; font-weight:700; cursor:pointer;
  box-shadow: var(--shadow); transition: transform .15s ease;
}
.mode-toggle:hover{ transform: translateY(-1px); }

/* =============== HERO & CTA =============== */
.hero{ position:relative; min-height: 68vh; display:flex; align-items:center; justify-content:center; z-index:1; }
.hero-content{ text-align:center; max-width: 900px; margin: 0 auto; }
.hero h1{ font-size: clamp(34px, 5vw, 56px); line-height:1.1; letter-spacing:.4px; text-shadow: 0 6px 26px rgba(0,0,0,.35); }
.hero p{ color: var(--muted-2); margin: 14px auto 22px; max-width: 720px; }

.cta-btn{
  display:inline-block; border:0; border-radius:12px; padding:14px 22px;
  background: var(--accent); color:#1d1a2b; font-weight:800; text-decoration:none;
  box-shadow: 0 12px 28px rgba(255,210,77,.25);
  transition: transform .12s ease, box-shadow .2s ease;
}
.cta-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px rgba(255,210,77,.35); text-decoration:none; }

.badge-new{
  display:inline-block; margin-top:12px; border-radius:12px; padding:12px 18px;
  background: var(--accent-2); color:#fff; font-weight:800; text-decoration:none;
  box-shadow: 0 16px 34px rgba(255,106,169,.35);
}
.badge-new:hover{ text-decoration:none; filter: brightness(1.05); }

/* =============== LISTE D'OFFRES =============== */
#results-container{ max-width:1200px; margin:0 auto; padding: 0 16px; }
.result-card{
  background: #0f1428; color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px; padding:18px; box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
#loadMoreBtn{ display:block; margin: 26px auto 48px; }

/* =============== A PROPOS =============== */
.about-section{
  display:grid; grid-template-columns: 1.15fr .85fr; gap: 40px;
  align-items:center; max-width: 1100px; margin: 40px auto 12px; padding: 24px 16px;
}
.about-text h2{ font-size: clamp(22px, 3.4vw, 28px); margin-bottom:10px; }
.about-text p{ color: var(--muted-2); }
.about-image img{
  width:100%; max-width: 480px; border-radius:16px; display:block; margin-left:auto;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* =============== STATS =============== */
.stats-section{
  background: rgba(10,12,23,.35); backdrop-filter: blur(4px);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 36px 12px; display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
.stat{ text-align:center; }
.stat span{ display:block; font-size: 40px; font-weight:800; color:#32e67f; }

/* =============== CHATBOT POPUP =============== */
#chatbot{
  position: fixed; right: 20px; bottom: 20px; width: 340px;
  background: #131831; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  color: var(--text); overflow:hidden; z-index: 1200;
}
#chatbot-header{
  background: var(--accent); color:#1d1a2b; font-weight:800;
  padding: 10px 12px; position:relative;
}
#close-chatbot{
  position:absolute; right:10px; top:6px; background:transparent; border:0;
  font-size:20px; cursor:pointer; color:#1d1a2b; font-weight:900;
}
#chatbot-body{ padding:12px; background:#0f1428; height: 190px; overflow:auto; }
#chatbot-footer{ padding:10px; background:#0f1428; border-top:1px solid var(--border); }
#chatbot textarea{
  width:100%; min-height:70px; border-radius:10px; border:1px solid var(--border);
  background:#111834; color:var(--text); padding:10px; resize:vertical;
}
#open-chatbot{ display:none; } /* on garde le popup direct */

/* =============== FOOTER =============== */
.footer{
  margin-top: 40px;
  border-top: 1px solid var(--border);
  padding: 26px 16px 40px;
  background: transparent; text-align:center; color: var(--muted);
}
.footer-logo-slogan{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:8px; }
.footer-logo{ width:64px; height:auto; border-radius:10px; box-shadow: var(--shadow); }
.footer ul{ list-style:none; display:flex; gap:18px; justify-content:center; padding: 8px 0 0; margin:0; }
.footer a{ color: var(--muted); text-decoration:none; }
.footer a:hover{ color: var(--text); text-decoration:none; }

/* =============== GENERIQUES =============== */
a{ text-decoration:none; }
a:hover{ text-decoration:none; }
button, .btn{ text-decoration:none; }

/* Responsive */
@media (max-width: 1000px){
  .about-section{ grid-template-columns: 1fr; }
  .about-image img{ margin: 0 auto; }
}
@media (max-width: 880px){
  .navbar ul{ display:none; }
  .navbar ul.active{
    display:flex; flex-direction:column; position:absolute; right:14px; top:58px;
    background: rgba(10,12,23,.95); border:1px solid var(--border); border-radius:12px;
    padding: 12px; gap:12px;
  }
  .hamburger{ display:block; color: var(--text); }
}