/* ===== file: /assets/css/components/navbar.css ===== NAVBAR – FINAL & STABLE (NORMAL + ADMIN) ✅ RTL/LTR layout ✅ Dropdowns (services) ✅ UserMenu (#userMenu / #authActions) ✅ Desktop: - logged out = تواصل الآن + تسجيل الدخول - logged in = avatar only + dropdown (تواصل الآن / خروج) ✅ Mobile: - logged out = burger normal - logged in = avatar only, no burger - mobile dropdown = pages + services + logout ✅ Navbar fixe ✅ Logo horizontal pro visible ==================================================== */ :root { --topbar-h: 74px; } .topbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; background: #76cdcd; border-bottom: 1px solid var(--border); /* Pas de backdrop-filter : le fond est opaque (#76cdcd) donc le flou est invisible, MAIS backdrop-filter ferait du .topbar le bloc conteneur de tous ses enfants position:fixed (burger, overlay, menu connecté), qui se retrouveraient calés sur la hauteur du navbar (~74px) au lieu du viewport → panneaux écrasés sur mobile et hauteur cassée sur Safari. */ padding-inline: 12px; /* Police FIXE pour le navbar sur TOUTES les pages et dans toutes les langues. Sans cette ligne, le navbar hérite la police du , qui diffère selon la page (index = Segoe UI via home.css, autres pages en français = Times New Roman par défaut). On force ici la police de la marque pour un navbar strictement identique partout. */ font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; } /* ========================= Layout principal ========================= */ .topbar .container.nav { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; position: relative; /* Navbar identique sur TOUTES les pages (référence : index.html). Le conteneur du navbar occupe toute la largeur, sans max-width ni marge auto, pour que la barre soit uniforme partout. */ max-width: none; /* width:100% écrase un éventuel `width: min(1100px, 92%)` hérité de main.css (chargé sur la page login) qui bridait le navbar et tronquait les liens. */ width: 100%; margin-inline: 0; padding-inline: 0; } /* Sécurité overflow */ .topbar .brand, .topbar .links, .topbar .nav-actions, .topbar .auth-actions { min-width: 0; } /* ========================= BRAND / LOGO ========================= */ .topbar .brand { display: inline-flex; align-items: center; justify-content: flex-end; text-decoration: none; color: #0f172a; min-width: 0; gap: 0; flex: 0 0 auto; width: 160px; max-width: 160px; overflow: visible; } .topbar .brand.brand--logo-only { gap: 0; } .topbar .logo-img, .topbar .brand-logo { display: block; width: 100%; height: 54px; max-width: 100%; object-fit: contain; object-position: right center; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; } html[dir="ltr"] .topbar .logo-img, html[dir="ltr"] .topbar .brand-logo { object-position: left center; } .topbar .brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.15; unicode-bidi: plaintext; } /* ========================= LINKS (desktop) ========================= */ .topbar .links { display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; min-width: 0; margin-inline: auto; flex: 1 1 auto; } /* boutons login + signup + CTA "publier" mobile cachés sur desktop */ .topbar .links .mobile-login-btn, .topbar .links a.mobile-login-btn, .topbar .links .mobile-signup-btn, .topbar .links a.mobile-signup-btn, .topbar .links .mobile-post-ad-btn, .topbar .links a.mobile-post-ad-btn { display: none !important; } /* espace actions */ .topbar .nav-actions { margin-inline-start: 0; } html[dir="rtl"] .topbar .nav-actions { margin-inline-start: 0; margin-inline-end: 16px; } .topbar .links a { padding: 6px 8px; border-radius: 999px; text-decoration: none; color: rgba(15, 23, 42, 0.92); border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } /* LTR (French) — compact navbar to keep everything on one line */ html[dir="ltr"] .topbar .brand { width: clamp(120px, 9vw, 155px); max-width: clamp(120px, 9vw, 155px); } html[dir="ltr"] .topbar .logo-img, html[dir="ltr"] .topbar .brand-logo { height: 54px; } html[dir="ltr"] .topbar .container.nav { gap: 8px; } html[dir="ltr"] .topbar .nav-actions { gap: 8px; margin-inline-start: 0; } html[dir="ltr"] .topbar .links { gap: 4px; } html[dir="ltr"] .topbar .links a { padding: 6px 10px; max-width: none; } html[dir="ltr"] .topbar .post-ad-btn--nav { padding: 9px 12px; font-size: 13px; } .topbar .links a:hover, .topbar .links a.active { background: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.35); color: #0f172a; } /* ========================= ACTIONS ========================= */ .topbar .nav-actions, .topbar .auth-actions { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; flex: 0 0 auto; } .topbar .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 999px; font-weight: 900; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.28); color: #0f172a; backdrop-filter: blur(6px); transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .topbar .btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.38); border-color: rgba(255, 255, 255, 0.7); } /* Bouton « Se connecter » du navbar (rendu par auth.js quand déconnecté) — même style BLEU MARINE que le CTA « Se connecter » de la page signup, pour une cohérence sur toutes les pages. */ .topbar .topbar-login { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; text-decoration: none; color: #ffffff; font-weight: 800; font-size: 13.5px; white-space: nowrap; background: linear-gradient(135deg, #0f766e, #14b8a6); border: 1px solid transparent; box-shadow: 0 8px 20px rgba(15, 118, 110, .3); transition: filter 0.15s ease, transform 0.15s ease; } .topbar .topbar-login:hover, .topbar .topbar-login:focus-visible { filter: brightness(1.08); transform: translateY(-1px); color: #ffffff; background: linear-gradient(135deg, #0f766e, #14b8a6); } /* Remplace l'icône 👤 (personne) rendue par auth.js par l'icône log-in (porte→), identique au CTA « Se connecter » de signup — fait en CSS pour éviter de toucher auth.js (importé sans version → cascade de cache). */ .topbar .topbar-login__icon { display: none; } .topbar .topbar-login::before { content: ""; width: 17px; height: 17px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center / contain no-repeat; } /* Page login : pas de « Se connecter » (on y est déjà). Le CTA orange du navbar est devenu « Créer un compte » (→ signup, dans le HTML de login.html), donc on masque aussi le « Créer un compte » outline en double dans le burger. L'ID #mobileLinks passe DEVANT la règle d'affichage `body.auth-logged-out …`. */ body.login-page .topbar .topbar-login, body.login-page .topbar #mobileLinks .mobile-login-btn, body.login-page .topbar #mobileLinks a.mobile-login-btn, body.login-page .topbar #mobileLinks .mobile-signup-btn, body.login-page .topbar #mobileLinks a.mobile-signup-btn { display: none !important; } /* Page login : « Créer un compte » en BLEU MARINE (pas l'orange de publier). #mobileLinks pour passer devant la règle orange du burger (même spécificité). */ body.login-page .topbar .post-ad-btn--nav, body.login-page .topbar #mobileLinks .mobile-post-ad-btn { background: linear-gradient(135deg, #0f766e, #14b8a6) !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, .3) !important; } body.login-page .topbar .post-ad-btn--nav:hover, body.login-page .topbar #mobileLinks .mobile-post-ad-btn:hover { filter: brightness(1.08); } /* Page signup : symétrique à login. Pas de « Se connecter » discret ni de « Créer un compte » en double (on y est déjà). Le CTA du navbar est devenu « Se connecter » (→ login, dans le HTML de signup.html). On masque donc le topbar-login, le « Se connecter » et le « Créer un compte » outline du burger. */ body.signup-page .topbar .topbar-login, body.signup-page .topbar #mobileLinks .mobile-login-btn, body.signup-page .topbar #mobileLinks a.mobile-login-btn, body.signup-page .topbar #mobileLinks .mobile-signup-btn, body.signup-page .topbar #mobileLinks a.mobile-signup-btn { display: none !important; } /* Page signup : « Se connecter » en BLEU MARINE (même style que le CTA login). */ body.signup-page .topbar .post-ad-btn--nav, body.signup-page .topbar #mobileLinks .mobile-post-ad-btn { background: linear-gradient(135deg, #0f766e, #14b8a6) !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, .3) !important; } body.signup-page .topbar .post-ad-btn--nav:hover, body.signup-page .topbar #mobileLinks .mobile-post-ad-btn:hover { filter: brightness(1.08); } /* Page signup-result (confirmation après inscription) : même logique que signup. CTA navbar = « Se connecter » (→ login). On masque le « Se connecter » discret et le « Créer un compte »/« Se connecter » outline du burger. */ body.sr-page .topbar .topbar-login, body.sr-page .topbar #mobileLinks .mobile-login-btn, body.sr-page .topbar #mobileLinks a.mobile-login-btn, body.sr-page .topbar #mobileLinks .mobile-signup-btn, body.sr-page .topbar #mobileLinks a.mobile-signup-btn { display: none !important; } body.sr-page .topbar .post-ad-btn--nav, body.sr-page .topbar #mobileLinks .mobile-post-ad-btn { background: linear-gradient(135deg, #0f766e, #14b8a6) !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, .3) !important; } body.sr-page .topbar .post-ad-btn--nav:hover, body.sr-page .topbar #mobileLinks .mobile-post-ad-btn:hover { filter: brightness(1.08); } /* Page confirm (confirmation e-mail) : même logique que signup/signup-result. CTA navbar = « Se connecter » (→ login). On masque le « Se connecter » discret et le « Créer un compte »/« Se connecter » outline du burger. */ body.confirm-page .topbar .topbar-login, body.confirm-page .topbar #mobileLinks .mobile-login-btn, body.confirm-page .topbar #mobileLinks a.mobile-login-btn, body.confirm-page .topbar #mobileLinks .mobile-signup-btn, body.confirm-page .topbar #mobileLinks a.mobile-signup-btn { display: none !important; } body.confirm-page .topbar .post-ad-btn--nav, body.confirm-page .topbar #mobileLinks .mobile-post-ad-btn { background: linear-gradient(135deg, #0f766e, #14b8a6) !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, .3) !important; } body.confirm-page .topbar .post-ad-btn--nav:hover, body.confirm-page .topbar #mobileLinks .mobile-post-ad-btn:hover { filter: brightness(1.08); } /* Page forgot-password : même navbar que signup. CTA bleu marine « Se connecter » (→ login), et on masque le « Se connecter » discret + les outlines du burger. On masque AUSSI #userMenu : le flux reset par OTP crée une session (verifyOtp) donc auth.js afficherait l'avatar « connecté » pendant la saisie du nouveau mot de passe — on garde un navbar « déconnecté » cohérent avec un reset. */ body.forgot-page .topbar #userMenu, body.forgot-page .topbar .topbar-login, body.forgot-page .topbar #mobileLinks .mobile-login-btn, body.forgot-page .topbar #mobileLinks a.mobile-login-btn, body.forgot-page .topbar #mobileLinks .mobile-signup-btn, body.forgot-page .topbar #mobileLinks a.mobile-signup-btn { display: none !important; } body.forgot-page .topbar .post-ad-btn--nav, body.forgot-page .topbar #mobileLinks .mobile-post-ad-btn { background: linear-gradient(135deg, #0f766e, #14b8a6) !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, .3) !important; } body.forgot-page .topbar .post-ad-btn--nav:hover, body.forgot-page .topbar #mobileLinks .mobile-post-ad-btn:hover { filter: brightness(1.08); } /* Page reset (flux recovery) : navbar 100 % focalisé. auth.js force déjà l'état déconnecté ; ici on masque « Se connecter », « Créer un compte » ET « Publier une annonce » (desktop + burger) — l'utilisateur réinitialise juste son mot de passe. */ body.reset-page .topbar #userMenu, body.reset-page .topbar .topbar-login, body.reset-page .topbar .post-ad-btn--nav, body.reset-page .topbar #mobileLinks .mobile-login-btn, body.reset-page .topbar #mobileLinks a.mobile-login-btn, body.reset-page .topbar #mobileLinks .mobile-signup-btn, body.reset-page .topbar #mobileLinks a.mobile-signup-btn, body.reset-page .topbar #mobileLinks .mobile-post-ad-btn, body.reset-page .topbar #mobileLinks a.mobile-post-ad-btn { display: none !important; } /* hide offers ONLY on desktop */ @media (min-width: 1367px) { .topbar .offers-btn { display: none !important; } } /* ========================= AUTH STATE HELPERS ========================= */ .desktop-login-fallback { display: inline-flex; } body.auth-logged-in .desktop-login-fallback { display: none !important; } body.auth-logged-in .topbar .nav-actions>.btn.primary, body.auth-logged-in .topbar .nav-actions>a.btn.primary { display: none !important; } /* ========================= LANG CHIP (desktop navbar) ========================= */ .topbar .lang-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.7); cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: #0f172a; white-space: nowrap; backdrop-filter: blur(6px); transition: background 0.16s ease, transform 0.12s ease, border-color 0.16s ease; flex: 0 0 auto; /* Visually place the chip BEFORE the post-ad CTA (between nav links and CTA) without touching the DOM order — keeps the orange "Publier une annonce" button visually isolated next to the avatar/login, and groups lang preference with the navigation cluster. */ order: -1; } .topbar .lang-chip:hover, .topbar .lang-chip:focus-visible { background: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.95); transform: translateY(-1px); } .topbar .lang-chip .lang-flag { display: inline-flex; align-items: center; line-height: 1; } .topbar .lang-chip .lang-flag svg { width: 18px; height: 18px; display: block; border-radius: 50%; } .topbar .lang-chip .lang-label { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; } /* Sélecteur de langue : visible AUSSI sur mobile, directement dans le navbar (et non plus dans le menu burger). Version compacte pour gagner de la place. */ @media (max-width: 1366px) { .topbar .lang-select { order: 0 !important; } .topbar .lang-chip { padding: 6px 7px !important; font-size: 11px !important; gap: 5px !important; } .topbar .lang-chip .lang-flag svg { width: 16px !important; height: 16px !important; } } /* ========================= LANG OPTION (mobile dropdown item) Discrete chip on the end side — signals "current value" not "primary CTA". ========================= */ .lang-option__value { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; background: transparent; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: rgba(15, 23, 42, 0.65); } .lang-option__value .lang-flag { display: inline-flex; align-items: center; line-height: 1; } .lang-option__value .lang-flag svg { width: 16px; height: 16px; display: block; border-radius: 50%; } /* ========================= LANG DROPDOWN (desktop) — clic sur le chip → choix العربية / Français ========================= */ .topbar .lang-select { position: relative; display: inline-flex; } .topbar .lang-chip__caret { font-size: 10px; line-height: 1; opacity: 0.7; transition: transform 0.15s ease; } .topbar .lang-select.is-open .lang-chip__caret { transform: rotate(180deg); } .topbar .lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 170px; padding: 6px; border-radius: 14px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.10); box-shadow: 0 18px 44px rgba(2, 6, 23, 0.20); display: none; flex-direction: column; gap: 2px; z-index: 1200; } .topbar .lang-select.is-open .lang-menu { display: flex; } .topbar .lang-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 14px; font-weight: 700; color: #0f172a; text-align: start; transition: background 0.13s ease; } .topbar .lang-menu__item:hover, .topbar .lang-menu__item:focus-visible { background: rgba(15, 23, 42, 0.06); } .topbar .lang-menu__item.is-active { background: rgba(15, 118, 110, 0.08); } .topbar .lang-menu__flag { display: inline-flex; flex-shrink: 0; } .topbar .lang-menu__flag svg { width: 20px; height: 20px; display: block; border-radius: 50%; } .topbar .lang-menu__name { flex: 1 1 auto; } .topbar .lang-menu__check { flex-shrink: 0; color: #0f766e; opacity: 0; } .topbar .lang-menu__item.is-active .lang-menu__check { opacity: 1; } /* Legacy floating button — fully replaced by chip + option, hide it. */ .lang-float { display: none !important; } /* WhatsApp FAB — uniform polish across all pages. Auto-hide via .is-hidden set by JS on scroll-down; reappears on scroll-up. */ .whatsapp-float, .wa-float { width: 50px !important; height: 50px !important; transition: transform 0.32s ease, opacity 0.28s ease, box-shadow 0.18s ease !important; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.32), 0 2px 6px rgba(15, 23, 42, 0.16) !important; } .whatsapp-float svg, .wa-float svg { width: 22px !important; height: 22px !important; } .whatsapp-float.is-hidden, .wa-float.is-hidden { transform: translateY(150%) scale(0.85); opacity: 0; pointer-events: none; } /* ========================= POST AD BUTTON ========================= */ .topbar .post-ad-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 999px; font-weight: 900; text-decoration: none; border: none; background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); color: #ffffff !important; white-space: nowrap; cursor: pointer; transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35); font-size: inherit; font-family: inherit; } .topbar .post-ad-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 6px 20px rgba(234, 88, 12, 0.48); color: #ffffff !important; } /* Desktop nav-actions button: visible on desktop */ .topbar .post-ad-btn--nav { display: inline-flex; } /* Mobile: icône seule à côté du burger + sélecteur de langue. Le texte « Publier une annonce » est trop long en français pour tenir avec le chip AR/FR, on n'affiche donc que le mégaphone sur mobile. */ @media (max-width: 1366px) { .topbar .post-ad-btn--nav { display: inline-flex !important; order: 1 !important; padding: 9px 11px !important; font-size: 13px !important; min-height: 40px !important; } .topbar .post-ad-btn--nav svg { display: inline-block !important; } .topbar .post-ad-btn--nav > span { display: none !important; } } @media (max-width: 640px) { .topbar .post-ad-btn--nav { padding: 8px 10px !important; min-height: 38px !important; } } /* Mobile + connecté : le bouton « Publier une annonce » est désormais dans le menu déroulant (MON ESPACE) → on masque l'icône orange en double de la barre du haut. Les déconnectés (qui n'ont pas l'entrée dans leur menu) la gardent. */ @media (max-width: 1366px) { body.auth-logged-in .topbar .post-ad-btn--nav { display: none !important; } } /* ========================= CONTACT LINK (in .links) ========================= */ /* Connecté : on cache le contact du navbar UNIQUEMENT sur mobile (il est alors dans le menu utilisateur). Sur desktop, le contact reste visible dans le navbar, juste à côté de "الخدمات العقارية". */ @media (max-width: 1366px) { body.auth-logged-in .topbar .links .contact-link { display: none !important; } } /* Mobile: contact link inside burger now follows the standard item style (set globally on .topbar .links a). No teal override anymore — only visibility + a top divider to separate it visually from the nav group, matching the .user-menu__divider in the logged-in dropdown. */ @media (max-width: 1366px) { body.auth-logged-out .topbar .links .contact-link { display: flex !important; margin-top: 12px; position: relative; } /* Divider line above contact-link — uses ::after so ::before stays available for the .active page-indicator bar (avoids pseudo conflict). */ body.auth-logged-out .topbar .links .contact-link::after { content: ""; position: absolute; top: -9px; left: 2px; right: 2px; height: 1px; background: rgba(15, 23, 42, 0.1); pointer-events: none; } } /* User dropdown item (logged-in) */ .user-menu__item.post-ad-item { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important; color: #ffffff !important; border-color: rgba(234, 88, 12, 0.4) !important; } .user-menu__item.post-ad-item:hover { background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%) !important; border-color: rgba(234, 88, 12, 0.6) !important; color: #ffffff !important; transform: translateY(-1px); } /* ── انشروا إعلانكُم — Publier une annonce (CTA orange, menu mobile connecté) ── */ .user-menu__item--post-ad { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important; color: #ffffff !important; border-color: rgba(234, 88, 12, 0.35) !important; font-weight: 800 !important; letter-spacing: 0.3px; position: relative; overflow: hidden; } .user-menu__item--post-ad::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 60%); pointer-events: none; } .user-menu__item--post-ad:hover { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(234, 88, 12, 0.40) !important; } .user-menu__item--post-ad svg { flex-shrink: 0; } /* ===== Cloche de notifications (utilisateur connecté) ===== */ .notif-bell { position: relative; display: inline-flex; align-items: center; } .notif-bell__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid rgba(15, 23, 42, 0.12); background: #ffffff; color: #0f766e; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .notif-bell__btn:hover { background: #f0fdfa; border-color: #0f766e; } .notif-bell__btn:active { transform: scale(0.95); } .notif-bell__badge { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; } .notif-bell__badge[hidden] { display: none; } .notif-bell__panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: min(340px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 14px; box-shadow: 0 18px 44px rgba(2, 6, 23, 0.18); z-index: 1200; padding: 8px; } .notif-bell__panel[hidden] { display: none; } .notif-bell__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; border-bottom: 1px solid #f1f5f9; margin-bottom: 6px; } .notif-bell__head-title { font-weight: 800; font-size: 14px; color: #0f172a; } .notif-bell__markall { border: none; background: none; color: #0f766e; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; padding: 2px 6px; border-radius: 6px; white-space: nowrap; } @media (hover: hover) { .notif-bell__markall:hover { background: #f0fdfa; text-decoration: underline; } } .notif-bell__empty { text-align: center; color: #94a3b8; font-size: 13px; padding: 22px 8px; } .notif-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; box-sizing: border-box; padding: 10px 8px; border-radius: 10px; text-decoration: none; color: #0f172a; transition: background 0.12s ease; } .notif-item:hover { background: #f8fafc; } .notif-item.is-unread { background: #f0fdfa; } .notif-item__icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; color: #fff; } .notif-item__icon--ok { background: #16a34a; } .notif-item__icon--no { background: #dc2626; } /* Backdrop (mobile) : assombrit sous la navbar, la barre reste nette. Desktop : aucun. */ .notif-bell__backdrop { position: fixed; top: var(--topbar-h, 64px); left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.45); /* Sous la topbar (z-index:1000, qui crée un contexte d'empilement). Sinon le backdrop passe au-dessus du panneau — piégé dans le contexte de la topbar — et intercepte les taps (« Afficher tout » fermait le panneau sur mobile). */ z-index: 999; display: none; } /* Mobile : panneau plein largeur sous la navbar (pro) */ @media (max-width: 1366px) { .notif-bell__backdrop:not([hidden]) { display: block; } .notif-bell__panel { position: fixed; top: calc(var(--topbar-h, 64px) + 6px); inset-inline: 8px; width: auto; max-width: none; max-height: min(72vh, calc(100vh - var(--topbar-h, 64px) - 24px)); border-radius: 16px; z-index: 1200; box-shadow: 0 18px 44px rgba(2, 6, 23, 0.25); animation: notif-slide-down 0.22s ease; } } @keyframes notif-slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .notif-item__body { flex: 1 1 auto; min-width: 0; overflow: hidden; } .notif-item__msg { font-size: 13px; font-weight: 600; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .notif-item__motif { font-size: 12px; color: #b91c1c; margin-top: 3px; } .notif-item__time { font-size: 11px; color: #94a3b8; margin-top: 4px; } .notif-bell__more { display: block; width: 100%; margin-top: 6px; padding: 9px 8px; border: none; border-top: 1px solid #f1f5f9; background: transparent; color: #0f766e; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 0 0 8px 8px; transition: background 0.12s ease; } .notif-bell__more:hover { background: #f0fdfa; } /* ── إعلاناتي — My Ads button ── */ .user-menu__item--my-ads { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important; color: #ffffff !important; border-color: rgba(15, 118, 110, 0.35) !important; font-weight: 700 !important; letter-spacing: 0.3px; position: relative; overflow: hidden; } .user-menu__item--my-ads::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%); pointer-events: none; } .user-menu__item--my-ads:hover { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important; border-color: rgba(59, 130, 246, 0.6) !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 118, 110, 0.35) !important; } .user-menu__item--my-ads svg { opacity: 0.9; } /* ========================= USER MENU ========================= */ .topbar :is(#userMenu, #authActions) { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 clamp(170px, 22vw, 360px); max-width: clamp(170px, 22vw, 360px); overflow: visible; } .topbar :is(#userMenu, #authActions) .user-menu { position: relative; display: flex; align-items: center; min-width: 0; width: 100%; overflow: visible; } .topbar :is(#userMenu, #authActions) .user-menu__trigger { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.28); color: #0f172a; cursor: pointer; line-height: 1.15; white-space: nowrap; width: 100%; max-width: 100%; overflow: hidden; backdrop-filter: blur(6px); transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .topbar :is(#userMenu, #authActions) .user-menu__trigger:hover { background: rgba(255, 255, 255, 0.38); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-1px); } html[dir="rtl"] .topbar :is(#userMenu, #authActions) .user-menu__trigger { flex-direction: row-reverse; } .topbar :is(#userMenu, #authActions) .user-menu__avatar { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #fff; border: 1px solid rgba(15, 23, 42, 0.12); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16); overflow: hidden; } .topbar :is(#userMenu, #authActions) .user-menu__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .topbar :is(#userMenu, #authActions) .user-menu__info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; } html[dir="rtl"] .topbar :is(#userMenu, #authActions) .user-menu__info { align-items: flex-end; text-align: right; } .topbar :is(#userMenu, #authActions) .user-menu__name { font-size: 13px; font-weight: 900; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .topbar :is(#userMenu, #authActions) .user-menu__role { margin-top: 2px; font-size: 11px; font-weight: 800; opacity: 0.75; color: rgba(15, 23, 42, 0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* ========================= USER DROPDOWN ========================= */ .topbar :is(#userMenu, #authActions) .user-menu__dropdown { position: absolute; top: calc(100% + 6px); min-width: 260px; max-width: 280px; background: #fff; color: #0f172a; border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.12); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22); overflow: hidden; display: none; opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; z-index: 200; right: auto; left: auto; } html[dir="ltr"] .topbar :is(#userMenu, #authActions) .user-menu__dropdown { left: 0; right: auto; } html[dir="rtl"] .topbar :is(#userMenu, #authActions) .user-menu__dropdown { right: 0; left: auto; } .topbar :is(#userMenu, #authActions) .user-menu__dropdown.open { display: block; opacity: 1; transform: translateY(0); } .topbar :is(#userMenu, #authActions) .user-menu__dropdown::before { content: ""; position: absolute; top: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-left: 1px solid rgba(15, 23, 42, 0.12); border-top: 1px solid rgba(15, 23, 42, 0.12); } html[dir="rtl"] .topbar :is(#userMenu, #authActions) .user-menu__dropdown::before { right: 20px; } html[dir="ltr"] .topbar :is(#userMenu, #authActions) .user-menu__dropdown::before { left: 20px; } @media (min-width: 1367px) { .topbar :is(#userMenu, #authActions) .user-menu__dropdown { max-width: min(280px, calc(100vw - 24px)); } } .user-menu__header { display: flex; gap: 10px; align-items: center; padding: 12px 12px; background: rgba(15, 23, 42, 0.04); border-bottom: 1px solid rgba(15, 23, 42, 0.1); } html[dir="rtl"] .user-menu__header { flex-direction: row-reverse; } .user-menu__avatar--lg { width: 44px !important; height: 44px !important; } .user-menu__header-text { min-width: 0; display: flex; flex-direction: column; } .user-menu__body { padding: 8px; display: flex; flex-direction: column; gap: 6px; } .user-menu__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 1px solid rgba(15, 23, 42, 0.1); background: #fff; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-decoration: none; color: #0f172a; font-weight: 600; transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease; } .user-menu__item:hover { background: rgba(15, 118, 110, 0.06); border-color: rgba(15, 118, 110, 0.18); transform: translateY(-1px); } .user-menu__item--danger { border-color: rgba(248, 113, 113, 0.55); color: #b91c1c; } .user-menu__item--danger:hover { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.75); } .user-menu__item--success { border-color: rgba(34, 197, 94, 0.45); color: #15803d; } .user-menu__item--success:hover { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.7); } /* corps spécifiques desktop/mobile du dropdown */ .topbar .user-menu__body--desktop { display: flex; flex-direction: column; gap: 6px; } .topbar .user-menu__body--mobile { display: none; } /* mobile services inside user dropdown */ .topbar .user-menu__mobile-services { display: flex; flex-direction: column; gap: 6px; } .topbar .user-menu__mobile-services-menu { display: none; flex-direction: column; gap: 6px; margin-inline-start: 14px; padding-inline-start: 10px; border-inline-start: 2px solid rgba(15, 23, 42, 0.08); } .topbar .user-menu__mobile-services-menu.is-open { display: flex; } .topbar .user-menu__mobile-services-menu .user-menu__item { background: rgba(15, 23, 42, 0.025); border-color: rgba(15, 23, 42, 0.08); font-weight: 600; } .topbar .user-menu__mobile-services-menu .user-menu__item:hover { background: rgba(15, 118, 110, 0.06); border-color: rgba(15, 118, 110, 0.18); } /* Sous-items du menu connecté AVEC badge d'icône coloré (même rendu que le sous-menu Services du burger déconnecté). */ .topbar .user-menu__mobile-services-menu .user-menu__sub-item { justify-content: flex-start; gap: 10px; } .topbar .user-menu__mobile-services-menu .user-menu__sub-item .link-drop-menu__icon { width: 32px; height: 32px; flex: 0 0 auto; } .topbar .user-menu__mobile-services-menu .user-menu__sub-item .link-drop-menu__icon svg { width: 16px; height: 16px; } .topbar .user-menu__services-toggle { justify-content: space-between; font: inherit; font-size: inherit; font-weight: 600; } .topbar .user-menu__services-toggle span { font-size: inherit; font-weight: inherit; } .topbar .user-menu__services-caret { font-size: 14px; line-height: 1; flex: 0 0 auto; display: inline-block; transition: transform 0.2s ease, color 0.2s ease; color: #0f766e; font-weight: 900; } .topbar .user-menu__services-toggle[aria-expanded="true"] .user-menu__services-caret { transform: rotate(180deg); } /* Section labels inside mobile dropdown */ .user-menu__section-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(15, 23, 42, 0.6); padding: 6px 4px 8px; margin-top: 6px; text-align: start; } .user-menu__section-label:first-child { margin-top: 0; padding-top: 2px; } /* Section labels are mobile-only. They sit inside