/* ═══════════════════════════════════════════
   theme-v2.css — UI modernisée nounou.nc
   Importé APRÈS les styles inline (override).
   Palette douce, style marketplace rassurant.
   ═══════════════════════════════════════════ */

/* ── 1. VARIABLES GLOBALES ─────────────────
   Redéfinition des custom properties :
   toutes les règles existantes utilisant
   var(--coral), var(--leaf), var(--sand)…
   héritent automatiquement des nouvelles valeurs.
   ─────────────────────────────────────────── */
:root {
  --sand:        #F7F9F8;   /* fond global */
  --coral:       #FF6030;   /* CTA accent — contraste renforcé */
  --coral-light: #FFF0EB;
  --coral-dark:  #CC4A22;
  --leaf:        #2F7D6B;   /* vert secondaire */
  --leaf-light:  #E8F5EF;
  --text:        #2E2E2E;
  --muted:       #6B6B6B;
  --border:      rgba(0,0,0,0.07);
  --white:       #FFFFFF;
  --green:       #4CAF88;
  --green-dark:  #2F7D6B;
  --beige:       #FFF4EC;
}

/* ── 2. FOND GLOBAL ── */
body {
  background-color: #F7F9F8;
}

/* ── 3. HERO — layout 2 zones ────── */
/* Le background est géré par .hero-left dans index.html */

.hero h1 {
  color: #FFFFFF;
  text-shadow: 0 1px 6px rgba(0,0,0,0.22);
}

.hero p {
  color: rgba(255,255,255,0.88);
}

.hero-tag {
  color: #FFFFFF;
}

/* Champ de recherche hero */
.hero .search-box {
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.16);
}

/* ── 4. CARTES NOUNOUS — ombres prononcées ─── */
.nounou-card,
.card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.nounou-card:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.15);
  border-color: #4CAF88;
}

.side-card,
.skeleton-card,
.pub-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* ── 5. BOUTONS ─────────────────────────────── */

/* Primaire coral/orange — contraste renforcé */
.btn-primary,
.voir-plus {
  border-radius: 10px;
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-primary:hover,
.voir-plus:hover {
  background: #d94f22;
  box-shadow: 0 4px 12px rgba(255,96,48,0.35);
}

/* Secondaire outline vert */
.btn-secondary {
  border-radius: 10px;
  border-color: #4CAF88;
  color: #2F7D6B;
}

.btn-secondary:hover {
  background: rgba(76,175,136,0.08);
}

/* Bouton nav */
.nav-btn {
  border-radius: 10px;
  transition: background 0.15s;
}

.nav-btn:hover {
  background: #d94f22;
}

/* Bouton de recherche */
.search-btn,
.search-go {
  border-radius: 9px;
  transition: background 0.15s;
}

.search-btn:hover,
.search-go:hover {
  background: #d94f22;
}

/* Bouton filtres avancés */
.adv-apply {
  border-radius: 9px;
  transition: background 0.15s;
}

.adv-apply:hover {
  background: #d94f22;
}

/* CTA sidebar */
.cta-side-btn,
.cta-nounou-side-btn,
.cta-nounou-mobile-btn {
  border-radius: 9px;
}

/* ── 6. TAGS — fond vert plus visible ────────── */
.tag {
  background: #E8F5EF;
  color: #2F7D6B;
  font-weight: 600;
}

.tag-g {
  background: #D6EFE5;
  color: #226054;
  font-weight: 600;
}

/* ── 7. FILTRES CHIPS / BOUTONS ─────────────── */
.filtre-btn,
.filtre-chip {
  transition: all 0.15s;
}

.filtre-btn.active,
.filtre-chip.active {
  background: #FF6030;
  border-color: #FF6030;
}

.filtre-chip.leaf-chip {
  background: #E8F5EF;
  border-color: #4CAF88;
  color: #2F7D6B;
}

/* ── 8. SECTION COMMENT ÇA MARCHE ────────────
   Fond distinct avec card arrondie et
   espacement généreux.
   ─────────────────────────────────────────── */
.how-section {
  background: #F7F9F8;
  padding-top: 56px;
  padding-bottom: 56px;
}

.how-inner {
  background: rgba(76,175,136,0.12);
  border-radius: 16px;
  padding: 36px 28px;
}

.how-title {
  color: var(--text) !important;
}

.how-sub {
  color: var(--muted) !important;
}

.step-body {
  color: var(--text) !important;
}

.step-title {
  color: var(--text) !important;
}

.step-desc {
  color: var(--muted) !important;
}

.step-num {
  background: rgba(47,125,107,0.15);
  color: #2F7D6B;
}

/* ── 9. SECTION CTA BAS — espacement ─────────── */
.cta-section {
  background: #FFF4EC;
  border-top: none;
  padding-top: 52px;
  padding-bottom: 52px;
}

/* ── 10. SÉPARATIONS ENTRE SECTIONS ─────────── */
.stats-bar {
  border-top: 2px solid rgba(76,175,136,0.15);
  border-bottom: 2px solid rgba(76,175,136,0.15);
}

.partners-section {
  border-top: 2px solid rgba(0,0,0,0.06);
  padding-top: 36px;
  padding-bottom: 36px;
}

/* ── 11. FOOTER ─────────────────────────────── */
footer {
  background: #2F7D6B;
  padding-top: 32px;
  padding-bottom: 32px;
}

.footer-logo {
  color: #FFFFFF;
}

.footer-links a {
  color: rgba(255,255,255,0.6);
}

.footer-links a:hover {
  color: #FFFFFF;
}

/* ── 12. SIDEBAR — icônes pub ───────────────── */
.pub-ico,
.side-pub-ico {
  background: #E8F5EF;
}

/* ── 13. PAGES NOUNOUS — sidebar CTA ────────── */
.cta-nounou-side {
  background: linear-gradient(135deg, #4CAF88, #2F7D6B);
}

.cta-nounou-mobile {
  background: linear-gradient(135deg, #4CAF88, #2F7D6B);
}

/* ── 14. ILLUSTRATIONS DÉCORATIVES PASTELS ──── */
.how-section,
.cta-section {
  position: relative;
  overflow: hidden;
}

.deco-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* how-section (fond vert foncé) */
.deco-how-circle-tr  { width: 120px; height: 120px; top: -20px;  right: 5px;    }
.deco-how-star-bl    { width: 80px;  height: 80px;  bottom: -15px; left: 12px;  }
.deco-how-circle-tl  { width: 60px;  height: 60px;  top: 30px;   left: -15px;   }
.deco-how-heart-br   { width: 70px;  height: 70px;  bottom: 20px; right: 70px;  }

/* cta-section (fond blanc) */
.deco-cta-circle-tl  { width: 100px; height: 100px; top: -30px;  left: -25px;   }
.deco-cta-star-br    { width: 80px;  height: 80px;  bottom: -10px; right: 30px; }
.deco-cta-balloon-tr { width: 50px;  height: 60px;  top: 20px;   right: 100px;  }
.deco-cta-heart-bl   { width: 55px;  height: 55px;  bottom: 25px; left: 90px;   }