/* ============================================================
 * modern-public.css — Couche de rajeunissement 2026 pour le site public.
 * S'applique APRÈS happia-fun.css.
 *
 * Stratégie : on garde l'ADN Happia (palette, highlights jaune,
 * hero gros titres, stickers, halo) mais on enlève tout le brutalist
 * 2018 sur les éléments fonctionnels (cards, boutons, pills, eyebrows).
 *
 * Ce qui change :
 *  ─ Cards (.hf-card, .feat, .step, .kpi, .pack-card…) → flat, border 1px crème
 *  ─ Boutons → no offset shadow brutalist au repos, hover doux
 *  ─ Pills/Badges → flat (background pâle) au lieu d'avoir 3px shadow ink
 *  ─ Eyebrows MAJUSCULES → sentence case
 *  ─ Border-radius excessifs (24-32px) → 12-16px max
 *
 * Ce qui reste :
 *  ─ Palette crème + accents (sunny, mint, coral, lavender, rose)
 *  ─ Highlights jaune .hf-hl (signature)
 *  ─ Hero gros titres 80-90px
 *  ─ Animations stickers
 *  ─ Topbar
 * ============================================================ */

/* === Tokens — alias des variables Happia, on ne touche pas à la palette === */
:root {
  --m-radius-card: 12px;
  --m-radius-card-lg: 16px;
  --m-shadow-soft: 0 1px 2px rgba(12,31,78,0.04), 0 1px 3px rgba(12,31,78,0.06);
  --m-shadow-soft-hover: 0 4px 14px rgba(12,31,78,0.06), 0 10px 28px rgba(12,31,78,0.08);
}

/* ============================================================
 * CARDS — flat, plus de border 1.5px ink ni shadow offset
 * ============================================================ */
.hf-card, .hf-card-big {
  border: 1px solid var(--border) !important;
  border-radius: var(--m-radius-card-lg) !important;
  box-shadow: var(--m-shadow-soft) !important;
}

/* Cards tintées : ton plus pastel doux, plus de bordure ink épaisse */
.hf-card.hf-tint-mint    { background: var(--mint-soft) !important; border-color: #BCE9CC !important; }
.hf-card.hf-tint-sunny   { background: #EAF7F1 !important; border-color: #F0E0A8 !important; }
.hf-card.hf-tint-rose    { background: #FFE9EF !important; border-color: #F5C8D2 !important; }
.hf-card.hf-tint-lavender{ background: #EFEAFF !important; border-color: #D5C9F0 !important; }

/* Cards features / steps / kpi / packs / prix / cas client / membres */
.feat, .step, .kpi, .pack-card, .price-card, .case-card,
.product, .ig-card, .feature-card, .founder-card, .member-card, .team-card, .profile-card,
.checklist-item, .addon-card, .arch-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--m-radius-card) !important;
  box-shadow: var(--m-shadow-soft) !important;
  transition: border-color .15s, box-shadow .2s !important;
}
.feat:hover, .step:hover, .kpi:hover, .pack-card:hover, .price-card:hover,
.product:hover, .feature-card:hover, .case-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--m-shadow-soft-hover) !important;
  transform: none !important;
}

/* "Phare" / featured / recommended cards : juste bordure mint épaisse au lieu du gradient */
.feat.phare, .pack-card.featured, .price-card.featured, .price-card.recommended {
  border: 1.5px solid var(--mint) !important;
  background: var(--mint-soft) !important;
  box-shadow: var(--m-shadow-soft) !important;
}

/* ============================================================
 * BOUTONS — flat, sans offset shadow, hover doux
 * ============================================================ */
.hf-btn-primary {
  background: var(--mint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 26px !important;
  box-shadow: none !important;
  transition: background .15s, transform .08s !important;
}
.hf-btn-primary:hover {
  background: var(--mint-dark) !important;
  transform: none !important;
  box-shadow: 0 4px 14px rgba(25,206,132,0.32) !important;
  color: #fff !important;
}

.hf-btn-ghost {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  padding: 13px 22px !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s !important;
}
.hf-btn-ghost:hover {
  background: var(--cream-2) !important;
  border-color: var(--ink) !important;
  transform: none !important;
  box-shadow: none !important;
}

.hf-btn-ink {
  background: var(--ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 14px 26px !important;
  box-shadow: none !important;
  transition: background .15s !important;
}
.hf-btn-ink:hover {
  background: #1B2D5E !important;
  transform: none !important;
  box-shadow: 0 4px 14px rgba(12,31,78,0.18) !important;
  color: #fff !important;
}

/* Mid-CTA card (le gros encart vert au milieu de page) : sobre */
.hf-midcta-card {
  border: 1.5px solid var(--mint) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px -8px rgba(25,206,132,0.28) !important;
}
.hf-midcta-card .hf-btn-white {
  box-shadow: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.hf-midcta-card .hf-btn-white:hover {
  transform: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10) !important;
}

/* Topbar CTA */
.hf-topbar .hf-cta {
  background: var(--ink) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
  transition: background .15s !important;
}
.hf-topbar .hf-cta:hover {
  background: #1B2D5E !important;
  transform: none !important;
  box-shadow: 0 4px 14px rgba(12,31,78,0.18) !important;
}

/* ============================================================
 * PILLS / BADGES / EYEBROWS — flat, sentence case
 * ============================================================ */
.hf-pill {
  border: 1px solid var(--border-strong) !important;
  border-radius: 99px !important;
  padding: 7px 14px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  box-shadow: none !important;
  background: #fff !important;
}
.hf-pill.hf-pill-mint    { background: var(--mint-soft) !important; border-color: #BCE9CC !important; }
.hf-pill.hf-pill-sunny   { background: #EAF7F1 !important; border-color: #F0E0A8 !important; }
.hf-pill.hf-pill-rose    { background: #FFE9EF !important; border-color: #F5C8D2 !important; }
.hf-pill.hf-pill-lavender{ background: #EFEAFF !important; border-color: #D5C9F0 !important; }

/* Hero badge (eyebrow au-dessus du H1) */
.hf-hero .hf-badge {
  border: 1px solid var(--border-strong) !important;
  border-radius: 99px !important;
  padding: 7px 14px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

/* Eyebrow / section intro */
.hf-eyebrow {
  letter-spacing: 0.4px !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  background: var(--mint-soft) !important;
  color: var(--mint-dark) !important;
  border-radius: 99px !important;
  padding: 4px 11px !important;
}

/* ============================================================
 * MAJUSCULES marketing → sentence case
 * On garde uppercase pour les vrais eyebrows (.hf-eyebrow, .nav-label),
 * mais on les retire des labels, badges, titres de section internes.
 * ============================================================ */
.feat .badge,
.pack-card .badge,
.price-card .badge,
.price-card .ribbon,
.kpi .lbl,
.kpi .em,
.step .em,
.proof-head .eyebrow,
.features h2 + .sub,
.process .sub,
.stat-card .lab {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* ============================================================
 * SECTION HEADINGS — légèrement allégés
 * ============================================================ */
.hf-section-h, .features h2, .proof-head h2, .process h2, .final h2 {
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
}

/* ============================================================
 * TÉMOIGNAGE — stat card moins clinique
 * ============================================================ */
.testimonial .stat-card {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.testimonial .stat-card .lab {
  letter-spacing: 0.4px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
.testimonial .stat-card .big {
  font-weight: 500 !important;
}

/* ============================================================
 * FOOTER — un poil moins MAJUSCULES sur les sous-titres
 * ============================================================ */
.hf-footer h4, footer h4 {
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  font-size: 12px !important;
}

/* ============================================================
 * INPUTS — sur les pages avec formulaire (commande, audit-gratuit)
 * ============================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="search"],
input[type="number"], textarea, select {
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  background: #fff !important;
  font-size: 14.5px !important;
  font-family: var(--font, inherit) !important;
  color: var(--ink) !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--mint) !important;
  box-shadow: 0 0 0 3px rgba(25,206,132,0.18) !important;
}

/* Form labels — sentence case sobre */
form label, .form-row label, .form-section label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: var(--ink-2) !important;
  margin-bottom: 6px !important;
}

/* ============================================================
 * BLOG — cards d'articles + post-meta
 * ============================================================ */
.blog-card, .post-card, .article-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--m-radius-card) !important;
  box-shadow: var(--m-shadow-soft) !important;
  transition: border-color .15s, box-shadow .2s !important;
}
.blog-card:hover, .post-card:hover, .article-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--m-shadow-soft-hover) !important;
  transform: none !important;
}
.post-meta, .article-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}