/* ==========================================================================
   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 logo marquee — two-track pattern (not a single max-content-width
   block scrolled by -50%). That approach depends on the browser correctly
   computing `width: max-content` on a flex row with 26 children, which is
   exactly the kind of layout some mobile browsers get wrong or compute
   late — resulting in the animation running against a 0/incorrect width
   and never visibly moving. This version sidesteps that entirely: two
   identical tracks sit side by side in a flex row, each one independently
   translates by -100% of ITSELF (never a shared/computed total width), so
   there's nothing fragile to mis-measure. Same animation on both tracks
   means track 2 is always exactly where track 1 started when it loops,
   so the seam is invisible.
   ========================================================================== */
.client-marquee-wrap { position: relative; }
.client-marquee {
  display: flex;
  overflow: hidden;
  padding: 0.5rem 0;
}
.client-marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-shrink: 0;
  padding-right: 3rem;
  animation: logo-marquee-scroll 22s linear infinite;
}
.client-marquee:hover .client-marquee-track { 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);
}
/* Touch devices have no :hover, so the dimmed/grayscale "at rest" state
   set above would otherwise be permanent on phones — logos would never
   reach the full-color look desktop users get by hovering. Show them at
   full color/opacity by default wherever hover isn't available. */
@media (hover: none) {
  .client-logo-chip {
    opacity: 1;
    filter: grayscale(0);
  }
}
.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(-100%); }
}
.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-track { 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; }