/* =========================================================================
   OM Ondele Multiservice — Design System commun
   Partagé par toutes les pages (accueil, services, location, contact).
   ========================================================================= */

:root {
  /* Primaires */
  --navy-deep:   #0D1B3E;
  --navy-mid:    #1A2F5A;
  --navy-light:  #243C6E;

  /* Or marocain */
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-pale:   #F5E6B8;

  /* Fond */
  --bg-page:     #F6F4EF;
  --bg-soft:     #FDFCFA;
  --white:       #FFFFFF;

  /* Verre */
  --glass-bg:     rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.60);
  --glass-shadow: 0 8px 32px rgba(13, 27, 62, 0.10);

  /* Texte */
  --text-body:   #2C3144;
  --text-muted:  #6B7184;

  /* Fonctionnel */
  --whatsapp:      #25D366;
  --whatsapp-dark: #1DA851;
}

/* Empêche tout débordement horizontal (ex. translations AOS fade-left/right)
   sans casser position:sticky — `clip` n'établit pas de conteneur de défilement. */
html {
  overflow-x: clip;
}

body {
  background: var(--bg-page);
  position: relative;
  color: var(--text-body);
  font-family: 'DM Sans', sans-serif;
  overflow-x: clip;
  max-width: 100%;
}

/* Halos de fond */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  z-index: -1;
  pointer-events: none;
}
body::before { /* halo or — haut droit */
  width: 480px; height: 480px; top: -120px; right: -120px;
  background: rgba(201,168,76,.18);
}
body::after { /* halo navy — bas gauche */
  width: 520px; height: 520px; bottom: -160px; left: -140px;
  background: rgba(26,47,90,.12);
}

/* Typographie réutilisable */
.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Composants Glass */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  box-shadow: var(--glass-shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(13, 27, 62, 0.16);
}

/* Boutons */
.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--whatsapp); color: #fff;
  font-family: 'DM Sans', sans-serif; font-weight: 600;
  padding: .875rem 1.75rem; border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .30);
  transition: all .3s ease;
}
.btn-whatsapp:hover {
  background: var(--whatsapp-dark);
  transform: translateY(-2px);
}

.btn-gold-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px solid var(--gold); color: var(--navy-deep);
  background: rgba(255,255,255,.35); backdrop-filter: blur(8px);
  font-weight: 600; padding: .875rem 1.75rem; border-radius: 9999px;
  transition: all .3s ease;
}
.btn-gold-outline:hover {
  background: var(--gold); color: #fff;
}

/* Séparateur décoratif */
.divider-gold { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1.5rem auto; }
.divider-gold .line { width: 64px; height: 1px; background: var(--gold); }
.divider-gold .diamond { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }

/* Badge */
.badge-gold {
  background: var(--gold-pale); color: var(--navy-deep);
  font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  padding: .35rem .9rem; border-radius: 9999px;
  display: inline-block;
}

/* Navbar */
.navbar-glass {
  background: rgba(253, 252, 250, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.5);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.navbar-glass.scrolled {
  background: rgba(253,252,250,.95);
  box-shadow: 0 4px 20px rgba(13, 27, 62, 0.05);
}
.nav-link { position: relative; transition: color .25s; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--gold); transition: width .3s;
}
.nav-link:hover, .nav-link.active { color: var(--navy-deep); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* WhatsApp flottant (présent sur toutes les pages) */
@keyframes pulse-wa {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  50%     { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
}
#wa-float {
  animation: pulse-wa 2.5s infinite;
  opacity: 0; pointer-events: none; transform: translateY(20px) scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease, scale 0.3s ease;
}
#wa-float.visible {
  opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}