/*
 * Brand theme — aligned on enterEasyParki (enterEasyParki/src/index.css, tailwind.config.ts).
 * Loaded site-wide via menu_site.php and admin/menu_admin.php.
 */

:root {
  --brand-yellow: #fed530;
  --brand-yellow-rgb: 254, 213, 48;
  --brand-ink: #19191d;
  --brand-ink-rgb: 25, 25, 29;
  --brand-surface: #f6f7f9;
  --brand-border: #e9eaee;
  --brand-muted: #6f7280;
  --brand-cream: #fbf3c9;

  --font-display: "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: "Satoshi", "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius: 1rem;
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

/* Base typography — site-wide default, matches enterEasyParki's `body { @apply font-sans }`. */
body {
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

.font-display {
  font-family: var(--font-display);
}

.font-sans {
  font-family: var(--font-sans);
}

.shadow-soft {
  box-shadow:
    0 1px 2px rgb(24 24 27 / 0.04),
    0 10px 30px -16px rgb(24 24 27 / 0.14);
}

.shadow-float {
  box-shadow:
    0 2px 8px rgb(24 24 27 / 0.06),
    0 30px 60px -24px rgb(24 24 27 / 0.28);
}

.gradient-dark {
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(var(--brand-yellow-rgb), 0.14), transparent 60%),
    linear-gradient(160deg, var(--brand-ink) 0%, #212126 55%, #2a2a31 100%);
}

/* ---------- Hero clair (Hero.tsx) ----------
   Le Hero de la reference est passe en theme clair : photo de Paris de jour, voile blanc pour la
   lisibilite du titre en encre, et cartes en relief "2.5D" (ombres empilees, aucun 3D reel). */
.gradient-hero-light {
  background-image:
    radial-gradient(1100px 520px at 88% -12%, rgba(var(--brand-yellow-rgb), 0.14), transparent 62%),
    linear-gradient(170deg, #ffffff 0%, var(--brand-surface) 55%, #ffffff 100%);
}

/* Voile photographique : strictement le minimum pour lire le titre, la photo reste bien visible. */
.hero-veil-light {
  background-image:
    linear-gradient(to bottom, rgb(255 255 255 / 0.32) 0%, rgb(255 255 255 / 0.14) 42%, rgb(255 255 255 / 0.62) 100%),
    radial-gradient(125% 100% at 50% 0%, rgb(255 255 255 / 0.02) 0%, rgb(255 255 255 / 0.12) 58%, rgb(255 255 255 / 0.48) 100%);
}

/* Halo jaune derriere le bloc assistant : respiration tres subtile (opacite seule). */
.hero-spot {
  background-image: radial-gradient(closest-side, rgba(var(--brand-yellow-rgb), 0.34), transparent 100%);
}

.animate-halo {
  animation: brand-halo 6s ease-in-out infinite;
}

@keyframes brand-halo {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Relief 2.5D : la profondeur vient d'ombres douces empilees + d'un liseré interne clair. */
.surface-2_5d {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    inset 0 -1px 0 rgba(var(--brand-ink-rgb), 0.05),
    0 0 0 1px rgba(var(--brand-ink-rgb), 0.07),
    0 0 0 7px rgb(255 255 255 / 0.55),
    0 2px 4px rgba(var(--brand-ink-rgb), 0.05),
    0 16px 30px -16px rgba(var(--brand-ink-rgb), 0.16),
    0 40px 64px -40px rgba(var(--brand-ink-rgb), 0.22);
  transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.surface-2_5d:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgba(var(--brand-ink-rgb), 0.05),
    0 0 0 1px rgba(var(--brand-ink-rgb), 0.14),
    0 0 0 8px rgb(255 255 255 / 0.75),
    0 3px 6px rgba(var(--brand-ink-rgb), 0.07),
    0 22px 38px -16px rgba(var(--brand-ink-rgb), 0.22),
    0 50px 76px -42px rgba(var(--brand-ink-rgb), 0.28);
}

/* Carte focale (bloc assistant) : liseré jaune lumineux, halo proche, profondeur plus marquee. */
.focal-2_5d {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgba(var(--brand-ink-rgb), 0.06),
    0 0 0 1.5px rgba(var(--brand-yellow-rgb), 0.75),
    0 0 0 8px rgba(var(--brand-yellow-rgb), 0.16),
    0 0 26px 2px rgba(var(--brand-yellow-rgb), 0.22),
    0 3px 6px rgba(var(--brand-ink-rgb), 0.06),
    0 22px 44px -18px rgba(var(--brand-ink-rgb), 0.2),
    0 56px 84px -44px rgba(var(--brand-ink-rgb), 0.26);
  transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.focal-2_5d:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 1),
    inset 0 -1px 0 rgba(var(--brand-ink-rgb), 0.06),
    0 0 0 1.5px rgba(var(--brand-yellow-rgb), 1),
    0 0 0 9px rgba(var(--brand-yellow-rgb), 0.22),
    0 0 32px 3px rgba(var(--brand-yellow-rgb), 0.3),
    0 4px 8px rgba(var(--brand-ink-rgb), 0.07),
    0 28px 52px -18px rgba(var(--brand-ink-rgb), 0.24),
    0 64px 92px -46px rgba(var(--brand-ink-rgb), 0.3);
}

.bg-grid-light {
  background-image:
    linear-gradient(to right, rgb(24 24 27 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(24 24 27 / 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

.bg-grid-dark {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 100%);
}

.glow-blob {
  position: absolute;
  border-radius: 999px;
  background: rgba(var(--brand-yellow-rgb), 0.1);
  filter: blur(70px);
  pointer-events: none;
}

.sf-container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .sf-container {
    padding-inline: 1.5rem;
  }
}

.glass {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@keyframes brand-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes brand-pulse-dot {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(var(--brand-yellow-rgb), 0.5);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(var(--brand-yellow-rgb), 0);
  }
}

.animate-float {
  animation: brand-float 6s ease-in-out infinite;
}

.animate-pulse-dot {
  animation: brand-pulse-dot 2.4s ease-out infinite;
}

/* Scroll-reveal — vanilla equivalent of enterEasyParki's <Reveal> (framer-motion) component. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-float,
  .animate-pulse-dot,
  .animate-halo {
    animation: none;
  }
}