/* Page d'accueil — classes spécifiques non déjà couvertes par marketplace.css
   (qui définit déjà navbar-teranga, wax-strip, store-card, prod-card, cat-pill...).
   Repris du mockup visuel assets/homepage-reference.html. */

.menu-bar{background:var(--primary-light);}
.menu-bar .container-nav{display:flex; gap:4px; flex-wrap:wrap;}
.menu-bar a{color:rgba(255,255,255,0.78); font-size:0.88rem; font-weight:600; padding:11px 16px; display:inline-block;}
.menu-bar a:hover{color:var(--white);}

/* Hero */
.hero{background:var(--primary); position:relative; overflow:hidden; padding:64px 0 56px;}
.hero::before{content:""; position:absolute; top:-120px; right:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,69,0,0.28), transparent 70%);}
.hero::after{content:""; position:absolute; bottom:-160px; left:-80px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(232,163,61,0.22), transparent 70%);}
.hero-inner{max-width:1180px; margin:0 auto; padding:0 20px; position:relative;}
.hero h1{color:var(--white); font-size:2.9rem; font-weight:700; max-width:640px; line-height:1.12; margin:10px 0 0;}
.hero .lead-sub{color:rgba(255,255,255,0.72); font-size:1.08rem; max-width:520px; margin-top:14px;}
.hero .eyebrow{color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;}
.hero-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.stat-strip{display:flex; gap:34px; margin-top:34px; flex-wrap:wrap;}
.stat-strip .num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem; color:var(--white);}
.stat-strip .lbl{font-size:0.78rem; color:rgba(255,255,255,0.55);}

/* Sections */
.home-section{max-width:1180px; margin:0 auto; padding:48px 20px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; gap:10px;}
.section-eyebrow{color:var(--cta); font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; display:block;}
.section-head h2{font-size:1.7rem; font-weight:700; margin:0;}
.see-all{color:var(--primary); font-weight:600; font-size:0.88rem; white-space:nowrap;}
.see-all i{transition:transform 0.15s;}
.see-all:hover i{transform:translateX(3px);}

.home-grid-6{display:grid; grid-template-columns:repeat(6, 1fr); gap:14px;}
.home-grid-4{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
@media (max-width:900px){ .home-grid-6{grid-template-columns:repeat(3, 1fr);} .home-grid-4{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:560px){ .home-grid-6{grid-template-columns:repeat(2, 1fr);} .home-grid-4{grid-template-columns:1fr 1fr;} }

/* Tuiles de catégorie (section "Catégories" de la page d'accueil) — étaient
   utilisées dans index.php sans jamais avoir été définies ici, d'où l'affichage
   cassé (icône énorme non alignée, aucune carte, texte brut). */
.cat-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  background:var(--white); border:1px solid #ECECEC; border-radius:var(--radius);
  padding:22px 14px; color:var(--text); transition:border-color 0.15s, transform 0.15s;
}
.cat-card:hover{border-color:var(--primary); transform:translateY(-2px);}
.cat-card i{
  width:46px; height:46px; border-radius:50%; background:var(--gray);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--cta);
}
.cat-card .cat-name{font-size:0.88rem; font-weight:700; color:var(--text);}
.cat-card .cat-count{font-size:0.76rem; color:var(--text-secondary);}

/* Additions aux cartes boutique/produit déjà stylées dans marketplace.css */
.store-meta{display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--text-secondary); border-top:1px solid #F1F1F1; padding-top:10px; margin-top:10px;}
.store-meta .rating{color:var(--gold); font-weight:700;}
.fav-btn{position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); font-size:0.85rem; border:none; cursor:pointer;}

/* Promo banner */
.promo-banner{background:linear-gradient(120deg, var(--primary) 0%, var(--primary-light) 100%); border-radius:20px; padding:44px; color:var(--white); position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.promo-banner::after{content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(255,69,0,0.3), transparent 70%);}
.promo-banner h2{color:var(--white); margin:6px 0;}

/* Services */
.service-card{background:var(--gray); border-radius:var(--radius); padding:26px 20px; height:100%; display:block; color:var(--text); position:relative; transition:box-shadow 0.15s, transform 0.15s;}
.service-card:hover{box-shadow:0 12px 28px rgba(26,0,51,0.1); transform:translateY(-3px);}
/* Icône principale uniquement (classe dédiée) — auparavant le sélecteur
   ciblait TOUT <i> dans la carte, ce qui transformait aussi les petites
   icônes de la ligne méta (lieu, note) en gros pavés cassés. */
.service-card .service-icon{width:46px; height:46px; background:var(--white); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--cta); font-size:1.25rem; margin-bottom:14px;}
.service-card h3{font-size:1rem; font-weight:700; margin-bottom:6px;}
.service-card p{font-size:0.85rem; color:var(--text-secondary); margin:0;}
.service-card .service-meta{display:flex; align-items:center; justify-content:space-between; font-size:0.78rem; color:var(--text-secondary); border-top:1px solid rgba(0,0,0,0.06); padding-top:10px; margin-top:14px;}
.service-card .service-meta .rating{color:var(--gold); font-weight:700; display:inline-flex; align-items:center; gap:3px;}
.service-card .example-tag{
  position:absolute; top:14px; right:14px; background:var(--white); color:var(--text-secondary);
  font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  padding:3px 8px; border-radius:999px;
}

/* Advantages */
.adv-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; text-align:center;}
@media (max-width:700px){ .adv-grid{grid-template-columns:repeat(2, 1fr);} }
.adv-item i{font-size:1.8rem; color:var(--primary);}
.adv-item h4{font-size:0.95rem; font-weight:700; margin:12px 0 4px;}
.adv-item p{font-size:0.8rem; color:var(--text-secondary); margin:0;}

/* Vendor CTA */
.vendor-cta{background:var(--primary); border-radius:24px; padding:56px 44px; position:relative; overflow:hidden; color:var(--white); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.vendor-cta .wax-strip{position:absolute; bottom:0; left:0; right:0; border-radius:0 0 24px 24px;}
.vendor-cta h2{color:var(--white); margin:6px 0;}

/* Footer (page d'accueil : version étendue, différente de footer-public.php) */
.home-footer{background:var(--primary); color:rgba(255,255,255,0.6); padding:48px 0 22px; font-size:0.86rem;}
.home-footer .container-nav{max-width:1180px; margin:0 auto; padding:0 20px; display:block;}
.home-footer-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
@media (max-width:700px){ .home-footer-grid{grid-template-columns:repeat(2, 1fr);} }
.home-footer h5{color:var(--white); font-size:0.85rem; font-weight:700; margin-bottom:14px;}
.home-footer a{color:rgba(255,255,255,0.6); display:block; margin-bottom:8px;}
.home-footer a:hover{color:var(--white);}
.home-footer-bottom{border-top:1px solid rgba(255,255,255,0.12); margin-top:32px; padding-top:18px; font-size:0.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

.empty-note{color:var(--text-secondary); font-size:0.85rem; padding:20px 0;}

@media (max-width:768px){
  .hero h1{font-size:2.1rem;}
  .stat-strip{gap:20px;}
}

/* ============================================================
   Animations — apparition au scroll (assets/js/reveal.js) + micro-interactions
   sur les cartes déjà stylées ailleurs. Respecte prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal{opacity:0; transform:translateY(18px); transition:opacity 0.5s ease, transform 0.5s ease;}
  .reveal.in-view{opacity:1; transform:translateY(0);}

  .hero h1, .hero .lead-sub, .hero-actions{animation:fadeUp 0.6s ease both;}
  .hero .lead-sub{animation-delay:0.1s;}
  .hero-actions{animation-delay:0.2s;}
  @keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

  .cat-card, .store-card, .prod-card, .service-card{transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;}
  .cat-card:hover, .service-card:hover{box-shadow:0 10px 24px rgba(26,0,51,0.08);}
  .store-card:hover, .prod-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(26,0,51,0.10);}

  .stat-strip .num{animation:popIn 0.5s ease both; animation-delay:0.3s;}
  @keyframes popIn{from{opacity:0; transform:scale(0.85);} to{opacity:1; transform:scale(1);}}

  .btn-cta, .btn-ghost, .see-all{transition:transform 0.15s ease, box-shadow 0.15s ease;}
  .btn-cta:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(255,69,0,0.28);}
}