/* ==========================================================================
   SOUSSI N-D.L.H — Hub site custom styles
   Dark premium theme, glassmorphism, per-pillar accents, micro-animations.
   Loaded after Tailwind CDN; Tailwind utility classes handle layout.
   ========================================================================== */

:root {
  --bg: #131A24;
  --bg-alt: #1B2432;
  --bg-elevated: #232E40;
  --primary: #1e3a5f;
  --primary-light: #3567A6;
  --ink: #FAFBFD;
  --ink-muted: #C7D0DC;
  --border: rgba(255, 255, 255, 0.14);

  --accent-nettoyage: #2DD4BF;
  --accent-demenagement: #e67e22;
  --accent-lavage: #0EA5E9;
  --accent-hygiene: #10B981;

  --whatsapp: #25D366;
}

* { scroll-behavior: smooth; }

html, body {
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Playfair Display', Georgia, serif;
}

::selection { background: var(--accent-lavage); color: #05131c; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2A3644; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #3A4A5C; }

/* ==========================================================================
   Section surfaces
   ========================================================================== */
.section-alt { background: var(--bg-alt); }

.text-muted { color: var(--ink-muted); }

.gradient-text {
  background: linear-gradient(120deg, #7DD3FC, #2DD4BF 45%, #F59E0B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Glassmorphism cards
   ========================================================================== */
.glass-card {
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.glass-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.22);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.065);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
}

/* Pillar accent utilities — set per-card via inline style or data attr */
.pillar-nettoyage { --accent: var(--accent-nettoyage); }
.pillar-demenagement { --accent: var(--accent-demenagement); }
.pillar-lavage { --accent: var(--accent-lavage); }
.pillar-hygiene { --accent: var(--accent-hygiene); }

.accent-ring { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.accent-dot { background: var(--accent); }
.accent-text { color: var(--accent); }
.accent-bg { background: var(--accent); }
.accent-border { border-color: var(--accent); }
.accent-glow { box-shadow: 0 0 40px -8px color-mix(in srgb, var(--accent) 65%, transparent); }

.btn-accent {
  background: var(--accent);
  color: #061019;
  font-weight: 700;
}
.btn-accent:hover { filter: brightness(1.1); }

/* ==========================================================================
   Nav
   ========================================================================== */
#site-nav {
  background: rgba(19, 26, 36, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
#site-nav.nav-solid { background: rgba(19, 26, 36, 0.94); }

.nav-link {
  position: relative;
  color: var(--ink-muted);
  transition: color 0.25s ease;
}
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-lavage), var(--accent-nettoyage));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

#mobile-panel {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
#mobile-panel.open { transform: translateX(0); }

#lang-dropdown, #activities-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
#lang-dropdown.open, #activities-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#activities-toggle .activities-chevron { transition: transform 0.25s ease; }
#activities-toggle.open .activities-chevron { transform: rotate(180deg); }

/* ==========================================================================
   Hero video
   ========================================================================== */
.hero-video-section { background: var(--bg); position: relative !important; }
.hero-video-section video { filter: saturate(1.05) contrast(1.02); }

/* Plain-CSS safety net for full-bleed background video layers: these
   properties duplicate the Tailwind utility classes already on the
   markup (absolute inset-0 w-full h-full object-cover -z-20 / -z-10).
   Tailwind's CDN build generates that CSS in the browser at runtime —
   if that script is slow, blocked, or fails for any visitor, the video
   and its overlay must still render correctly instead of collapsing
   into flat static-flow boxes. Declared !important so it always wins
   regardless of Tailwind's injection timing. */
.hero-bg-video {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: -2 !important;
}
.hero-bg-overlay {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  z-index: -1 !important;
}
.pillar-video-preview {
  position: relative !important;
}
.pillar-video-preview video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hero-title-panel {
  background: linear-gradient(160deg, rgba(19,26,36,0.62), rgba(19,26,36,0.32));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 24px 70px -20px rgba(0,0,0,0.6);
}

/* ==========================================================================
   Drifting gradient orbs
   ========================================================================== */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
  pointer-events: none;
  will-change: transform;
}
@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 20px) scale(0.95); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 30px) scale(1.12); }
}
.orb-a { animation: drift-a 22s ease-in-out infinite; }
.orb-b { animation: drift-b 26s ease-in-out infinite; }

/* ==========================================================================
   Scroll reveal animations
   ========================================================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }

/* ==========================================================================
   Floating WhatsApp CTA (desktop)
   ========================================================================== */
#float-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 40;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--whatsapp);
  box-shadow: 0 10px 30px -6px rgba(37, 211, 102, 0.6);
}
#float-whatsapp::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid var(--whatsapp);
  opacity: 0.6;
  animation: pulse-ring 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.7; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ==========================================================================
   Sticky mobile CTA bar
   ========================================================================== */
#sticky-mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: rgba(19, 26, 36, 0.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   Floating social fan menu (bottom-left)
   ========================================================================== */
#social-fan {
  position: fixed;
  left: 20px;
  bottom: 28px;
  z-index: 39;
}
#social-fan .fan-toggle {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--primary-light);
  border: 1px solid var(--border);
  transition: transform 0.35s ease, background 0.3s ease;
}
#social-fan.open .fan-toggle { transform: rotate(135deg); background: #B91C1C; }
#social-fan .fan-item {
  position: absolute;
  left: 0;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(0) scale(0.5);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;
  pointer-events: none;
  border: 1px solid var(--border);
}
#social-fan.open .fan-item {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
#social-fan.open .fan-item:nth-child(1) { transition-delay: 0.03s; }
#social-fan.open .fan-item:nth-child(2) { transition-delay: 0.08s; }
#social-fan.open .fan-item:nth-child(3) { transition-delay: 0.13s; }
#social-fan .fan-item.item-1 { bottom: 64px; }
#social-fan .fan-item.item-2 { bottom: 120px; }
#social-fan .fan-item.item-3 { bottom: 176px; }
#social-fan:not(.open) .fan-item { bottom: 0 !important; }

@media (min-width: 768px) {
  #social-fan { bottom: 28px; }
}
@media (max-width: 767px) {
  #social-fan { bottom: 92px; left: 16px; }
  #float-whatsapp { display: none; }
}

/* ==========================================================================
   RTL (Arabic)
   ========================================================================== */
html[dir="rtl"] #social-fan { left: auto; right: 16px; }
html[dir="rtl"] #social-fan .fan-item { left: auto; right: 0; }
html[dir="rtl"] #float-whatsapp { right: auto; left: 24px; }
html[dir="rtl"] .nav-link::after { left: auto; right: 0; }

/* ==========================================================================
   Misc
   ========================================================================== */
.badge-chip {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
}

input, textarea, select {
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid var(--border);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-lavage);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.faq-item[open] summary .faq-icon { transform: rotate(45deg); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ==========================================================================
   Client-type marquee — generic, non-nominative
   SOUSSI has no verified/authorized client logos to display, so real
   company logos are never used here (trademark/misleading-advertising
   risk). Instead: a looping row of generic client-type badges (office,
   residence, shop, warehouse). The list is duplicated once in the DOM and
   the track scrolls -50% for a seamless right-to-left loop. Fully
   dark-glass themed like the rest of the site — no light card needed
   since there's no image with baked-in light backgrounds to accommodate.
   ========================================================================== */
.client-marquee-wrap { position: relative; }
.client-marquee { overflow: hidden; padding: 0.5rem 0; }
.client-marquee-inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: logo-marquee-scroll 26s linear infinite;
}
.client-marquee:hover .client-marquee-inner { animation-play-state: paused; }
/* Real client logos sit on a small white chip each — most of these brand
   marks are colored/dark and designed for a light surface, so a chip per
   logo (rather than one big card) keeps every logo readable regardless of
   its own palette while staying visually light-touch on the dark page. */
.client-logo-chip {
  height: 4.5rem;
  min-width: 8.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.75;
  filter: grayscale(0.55);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.client-logo-chip:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}
.client-logo-chip img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.client-marquee-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 4rem;
  z-index: 2;
  pointer-events: none;
}
@media (min-width: 640px) { .client-marquee-fade { width: 6rem; } }
.client-marquee-fade-left { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.client-marquee-fade-right { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
html[dir="rtl"] .client-marquee-fade-left { left: auto; right: 0; background: linear-gradient(to left, var(--bg), transparent); }
html[dir="rtl"] .client-marquee-fade-right { right: auto; left: 0; background: linear-gradient(to right, var(--bg), transparent); }
@media (prefers-reduced-motion: reduce) {
  .client-marquee-inner { animation: none; }
}

/* ==========================================================================
   Google reviews widget (beaver.codes) — the widget's own text color is
   light (built for a dark surface), which is why it went unreadable on a
   white card. Sits directly on the page's dark background instead, inside
   the same glass-panel treatment used everywhere else on the site.
   ========================================================================== */
.reviews-skeleton { display: flex; flex-direction: column; gap: 0.85rem; }
.reviews-skeleton-row {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
.reviews-skeleton-row.short { width: 55%; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Root cause (confirmed from the widget's own source): each review card
   is hardcoded to `.beaver-widget_review { background:#fff }` but never
   sets its own text color — so the name/text elements were inheriting
   this page's --ink (near-white) body color, i.e. white text on the
   widget's own white card, regardless of what this site's wrapper looks
   like. It's plain injected HTML (no iframe, no shadow DOM), so this
   override reaches it directly. */
.beaver-widget_review,
.beaver-widget_name,
.beaver-widget_text,
.beaver-widget_author {
  color: #1a1a1a !important;
}

/* ==========================================================================
   Entrance intro (homepage only)
   ========================================================================== */
#site-intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05080c;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 1.1s, filter 1.1s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.4,0,.2,1);
  will-change: opacity, filter, transform;
}
#site-intro.intro-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(14px);
  transform: scale(1.04);
}
#site-intro video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: intro-video-in 6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes intro-video-in {
  from { transform: scale(1.1); opacity: 0.4; }
  15% { opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}
#site-intro .intro-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,8,12,0.7), rgba(5,8,12,0.5) 40%, rgba(5,8,12,0.85));
}
#site-intro .intro-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  padding: 0 1.5rem;
}
#site-intro .intro-logo {
  height: 5.5rem;
  width: auto;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(14,165,233,0.35));
  animation: intro-logo-in 1.2s cubic-bezier(.16,1,.3,1) 0.2s forwards, intro-logo-breathe 3.5s ease-in-out 1.4s infinite;
}
@media (min-width: 640px) { #site-intro .intro-logo { height: 7rem; } }
@keyframes intro-logo-in {
  from { opacity: 0; transform: scale(0.8) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes intro-logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
#site-intro .intro-tagline {
  opacity: 0;
  animation: intro-fade-in 1s cubic-bezier(.16,1,.3,1) 0.9s forwards;
}
@keyframes intro-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
#site-intro .intro-bar {
  width: 13rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  opacity: 0;
  animation: intro-fade-in 1s cubic-bezier(.16,1,.3,1) 1.3s forwards;
}
#site-intro .intro-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-lavage), var(--accent-nettoyage));
  animation: intro-fill 4.6s cubic-bezier(.4,0,.2,1) 1.3s forwards;
}
@keyframes intro-fill { to { width: 100%; } }
#site-intro .intro-skip {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  opacity: 0;
  transition: color 0.25s ease;
  animation: intro-fade-in 1s cubic-bezier(.16,1,.3,1) 1.6s forwards;
}
#site-intro .intro-skip:hover { color: rgba(255,255,255,0.95); }
body.intro-active { overflow: hidden; }