/* Styles déplacés depuis templates/index.html — même ordre de chargement qu'avant */

@keyframes hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim {
  opacity: 0;
  animation: hero-in 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero-anim { opacity: 1; animation: none; }
}


/* ── Transparent navbar over hero ─────────────────────────────────── */

/* Hero glisse sous le header (barre de recherche + navbar de 80px) */
.lc-hero { margin-top: calc(-80px - var(--lc-topbar-h)); }
.lc-hero-content { padding-top: calc(80px + var(--lc-topbar-h)); }

/* Niveau 1 (recherche) transparent sur le hero, recherche façon « verre » */
.lc-header:not(.lc-header--opaque) .lc-topbar { background: transparent; }
.lc-header:not(.lc-header--opaque) .lc-topsearch {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lc-header:not(.lc-header--opaque) .lc-topsearch:focus-within { border-color: rgba(255,255,255,.55); }
.lc-header:not(.lc-header--opaque) .lc-topsearch-icon,
.lc-header:not(.lc-header--opaque) .lc-topsearch-input { color: #fff; }
.lc-header:not(.lc-header--opaque) .lc-topsearch-input::placeholder { color: rgba(255,255,255,.72); }
.lc-header:not(.lc-header--opaque) .lc-theme-toggle { color: #fff; border-color: rgba(255,255,255,.3); background: transparent; }
.lc-header:not(.lc-header--opaque) .lc-theme-toggle:hover { background: rgba(255,255,255,.12); }

/* Transition appliquée sur toutes les pages qui chargent ce bloc */
.lc-navbar {
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* État transparent — avant le premier scroll */
.lc-navbar:not(.lc-navbar--opaque) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Liens nav */
.lc-navbar:not(.lc-navbar--opaque) .nav-link          { color: rgba(255,255,255,.88) !important; }
.lc-navbar:not(.lc-navbar--opaque) .nav-link:hover,
.lc-navbar:not(.lc-navbar--opaque) .nav-link.active    { background: rgba(255,255,255,.12); color: #fff !important; }

/* Icônes rondes (panier, cœur, compte) */
.lc-navbar:not(.lc-navbar--opaque) .lc-icon-btn        { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.25); }
.lc-navbar:not(.lc-navbar--opaque) .lc-icon-btn:hover  { background: rgba(255,255,255,.12); color: #fff; }

/* Bouton user (plus large, même traitement) */
.lc-navbar:not(.lc-navbar--opaque) .lc-user-btn        { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.25); }

/* Bouton recherche : même contour clair que les autres icônes sur transparent, rose sur opaque */
.lc-navbar:not(.lc-navbar--opaque) .lc-search-trigger {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.88);
}
.lc-navbar:not(.lc-navbar--opaque) .lc-search-trigger:hover { background: rgba(255,255,255,.12); }

/* Logo → version claire (N et arc en blanc) sur le hero sombre, version normale une fois opaque */
.lc-navbar:not(.lc-navbar--opaque) .logo-on-light { display: none; }
.lc-navbar:not(.lc-navbar--opaque) .logo-on-dark  { display: inline-block; }
.lc-navbar:not(.lc-navbar--opaque) .lc-brand { color: #fff !important; }

/* Hamburger mobile */
.lc-navbar:not(.lc-navbar--opaque) .navbar-toggler        { border-color: rgba(255,255,255,.35); }
.lc-navbar:not(.lc-navbar--opaque) .navbar-toggler-icon   { filter: invert(1); }
[data-theme="dark"] .lc-navbar:not(.lc-navbar--opaque) .navbar-toggler-icon { filter: none; } /* icône déjà claire */

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lc-navbar { transition: none; }
}

/* Messages Django : flottants sous la navbar, hors du flux — ne cassent pas le hero */
.lc-messages-bar {
  position: fixed;
  top: calc(80px + var(--lc-topbar-h));
  left: 0;
  right: 0;
  z-index: 1025;
  pointer-events: none;
}
.lc-messages-bar .lc-alert {
  pointer-events: auto;
}

/* ── Chiffres clés : carte qui chevauche le bas du hero ──────────── */
/* Premier écran = photo + carte entière : la photo est raccourcie de la partie
   de la carte qui dépasse en dessous (hauteur de la carte − chevauchement) + une marge. */
:root {
  --stats-overlap: 80px;     /* partie de la carte posée sur la photo */
  --stats-below:   125px;    /* partie sous la photo (carte ≈ 205px) */
  --stats-gap:     24px;     /* espace entre la carte et le bas de l'écran */
}
.lc-hero {
  min-height: calc(100vh - var(--stats-below) - var(--stats-gap));
  min-height: calc(100svh - var(--stats-below) - var(--stats-gap));
}
.lc-hero-content { padding-bottom: calc(var(--stats-overlap) + 40px); }  /* les boutons ne touchent pas la carte */
.lc-stats-band {
  position: relative;
  z-index: 5;
  background: transparent;
  border: none;
  padding: 0;
  margin-top: calc(-1 * var(--stats-overlap));
}
/* Écrans d'ordinateur peu hauts (portable 13", barre d'onglets) : titre plus compact */
@media (min-width: 992px) and (max-height: 780px) {
  .lc-hero-title { font-size: 64px; }
}
@media (min-width: 992px) and (max-height: 680px) {
  .lc-hero-title { font-size: 52px; }
}
.lc-stats-card {
  background: var(--ab-canvas);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.05);
  padding: 28px 12px;
}
.stat-count { font-variant-numeric: tabular-nums; }   /* largeur stable pendant le comptage */
@media (min-width: 768px) {
  .lc-stats-card .col-md-3 + .col-md-3 { border-left: 1px solid var(--ab-hairline-soft); }
}
@media (max-width: 767.98px) {
  :root { --stats-overlap: 64px; --stats-below: 238px; --stats-gap: 16px; }  /* carte 2×2 ≈ 302px */
  .lc-stats-card { padding: 16px 8px; border-radius: 16px; }
}

/* Mobile : « Explorer les boutiques » et « Ouvrir ma boutique » l'un sous l'autre, même largeur */
@media (max-width: 575.98px) {
  .lc-hero-actions { flex-direction: column; align-items: stretch !important; }
  .lc-hero-actions > a { width: 100%; justify-content: center; }
}