/* ==========================================================================
   AutoGo — home.css
   Styles spécifiques à la page d'accueil (hero notamment).
   ========================================================================== */

.hero{padding:calc(var(--nav-h) + 48px) 0 80px;overflow:hidden;position:relative}
.hero::before{
  content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(234,108,47,.10),transparent 70%);z-index:0;
}
.hero-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;position:relative;z-index:1}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr;gap:40px}}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--heading);font-weight:600;
  font-size:.82rem;color:var(--primary);background:rgba(27,42,74,.06);padding:8px 16px;border-radius:999px;margin-bottom:22px;
}
.hero-eyebrow-pulse{width:8px;height:8px;border-radius:50%;background:var(--success);position:relative}
.hero-eyebrow-pulse::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--success);
  animation:pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}

.hero-headline{font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.06;margin-bottom:22px}
.hero-headline em{color:var(--accent);font-style:normal}
.hero-lede{font-size:1.08rem;color:var(--mid);max-width:520px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.hero-visual{position:relative}
.hero-visual-box{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);display:block}
.hero-visual-box i{font-size:6rem}
.hero-visual-badge{
  position:absolute;bottom:-18px;left:24px;background:#fff;border-radius:999px;padding:10px 20px;
  box-shadow:var(--shadow-lg);font-family:var(--heading);font-weight:700;font-size:.85rem;
  display:flex;align-items:center;gap:8px;color:var(--dark);
}
.hero-visual-badge i{color:var(--success);font-size:1rem}

@media (max-width:900px){
  .hero{padding-top:calc(var(--nav-h) + 32px);padding-bottom:56px}
  /* aspect-ratio volontairement identique au desktop (4/3, le ratio natif de
     la photo) — un ratio différent (ex. 16/10) forcerait object-fit:cover à
     recadrer le haut/bas de la voiture pour remplir une forme plus large. */
}

/* ---- Réseaux sociaux (vraies publications intégrées) ---- */
.social-embed-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;
  max-width:1020px;margin:0 auto;
}
.social-embed-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;justify-content:center;padding:2px;
}
.social-embed-card blockquote.tiktok-embed{margin:0 auto}

@media (max-width:900px){
  /* Slider horizontal au lieu de l'empilement vertical continu — swipe entre
     les publications, une carte à la fois (avec un aperçu de la suivante). */
  .social-embed-grid{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:16px;margin:0 -24px;padding:0 24px 8px;
    scrollbar-width:none;
  }
  .social-embed-grid::-webkit-scrollbar{display:none}
  .social-embed-card{
    scroll-snap-align:center;flex:0 0 82%;max-width:340px;
  }
}