/* ============================================================
   HAPPIA FUN — Système de design commun (toutes pages publiques)
   À inclure via <link rel="stylesheet" href="/styles/happia-fun.css">
   ============================================================ */

:root {
  color-scheme: light;
  /* Palette crème + accents vifs */
  --cream: #FBF7EF;
  --cream-2: #F5EFE2;
  --cream-3: #EDE5D2;
  --surface: #FFFFFF;
  --ink: #0C1F4E;
  --ink-2: #5C6781;
  --ink-3: #5E6A80;            /* 🆕 RGAA/WCAG AA : #94A0B7 (2,6:1) → #5E6A80 (~5:1, sûr même sur crème) */
  --brand: #0C1F4E;
  --mint: #19CE84;
  --mint-dark: #12a86b;        /* réservé aux ombres/accents décoratifs (contraste non requis) */
  --mint-text: #0E7A52;        /* 🆕 vert pour le TEXTE sur fond clair (AA ~5:1) — ne pas confondre avec --mint-dark */
  --mint-soft: #E6FAF1;
  --coral: #FF7A66;
  --sunny: #D8F0E4;
  --rose: #FFB4C4;
  --lavender: #B8A6FF;
  --border: #EAE4D6;
  --border-strong: #D9D0BB;
  --shadow-md: 0 4px 14px rgba(12,31,78,0.06), 0 10px 30px rgba(12,31,78,0.08);
  --shadow-lg: 0 25px 60px -15px rgba(12,31,78,0.18);
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ============ BASE ============ */
body.happia-fun {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  font-size: 16px;
  margin: 0;
  overflow-x: hidden;
}
.happia-fun *{box-sizing:border-box}
.happia-fun a{color:inherit}
.happia-fun img{max-width:100%;display:block}
.hf-container{max-width:1140px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.hf-container{padding:0 18px}}

/* ============ ANIMATIONS STICKERS ============ */
@keyframes hf-wiggle{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.08)}}
@keyframes hf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes hf-pulse{0%,100%{opacity:0.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes hf-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hf-scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hf-anim-wiggle{animation:hf-wiggle 4s ease-in-out infinite}
.hf-anim-float{animation:hf-float 5s ease-in-out infinite}
.hf-anim-pulse{animation:hf-pulse 3s ease-in-out infinite}
.hf-anim-spin{animation:hf-spin 22s linear infinite}
.hf-sticker{position:absolute;pointer-events:none;user-select:none}

/* ============ TOPBAR ============ */
.hf-topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(251,247,239,0.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.hf-topbar-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.hf-topbar .hf-brand img{height:32px;display:block}
.hf-topbar nav{display:flex;align-items:center;gap:30px}
.hf-topbar nav a{font-size:14.5px;color:var(--ink);text-decoration:none;font-weight:600}
.hf-topbar nav a:hover{color:var(--mint-text)}
.hf-topbar nav a.hf-active{color:var(--mint-text);font-weight:600}
.hf-topbar .hf-cta{
  background:var(--ink);color:white;padding:12px 22px;border-radius:14px;
  font-size:14px;font-weight:500700;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 16px rgba(12,31,78,.12);
  transition:transform .12s, box-shadow .12s;
}
.hf-topbar .hf-cta:hover{transform:translateY(2px);box-shadow:0 10px 24px rgba(12,31,78,.16);color:white}
@media(max-width:820px){.hf-topbar nav a.hf-hide-mobile{display:none}}

/* ============ BOUTONS BRUTALIST ============ */
.hf-btn-primary{
  background:#0E7A52;color:white;
  padding:16px 28px;border-radius:12px;
  font-size:15.5px;font-weight:500;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:none;
  transition:background .12s;
  border:1.5px solid transparent;cursor:pointer;font-family:inherit;
}
.hf-btn-primary:hover{transform:none;background:#0c6644;color:white}
.hf-btn-primary .hf-arrow{transition:transform .2s}
.hf-btn-primary:hover .hf-arrow{transform:translateX(4px)}

.hf-btn-ghost{
  background:white;color:var(--ink);
  padding:15px 24px;border-radius:14px;
  font-size:15px;font-weight:500700;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #E7E3D9;
  box-shadow:0 6px 18px rgba(12,31,78,.06);
  transition:transform .12s, box-shadow .12s;
  font-family:inherit;cursor:pointer;
}
.hf-btn-ghost:hover{transform:translate(2px,2px);box-shadow:0 4px 12px rgba(12,31,78,.06);color:var(--ink)}

.hf-btn-ink{
  background:var(--ink);color:white;
  padding:16px 28px;border-radius:14px;
  font-size:15.5px;font-weight:500800;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 6px 16px rgba(12,31,78,.12);
  transition:transform .12s, box-shadow .12s;
  border:none;cursor:pointer;font-family:inherit;
}
.hf-btn-ink:hover{transform:none;box-shadow:0 10px 24px rgba(12,31,78,.16);color:white}

/* ============ HERO commun ============ */
.hf-hero{padding:80px 0 50px;position:relative;text-align:center}
.hf-hero .hf-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#EAF7F1;border:1px solid rgba(14,122,82,.18);
  padding:9px 18px;border-radius:100px;
  font-size:13.5px;font-weight:500;color:#0E7A52;
  margin-bottom:28px;box-shadow:none;
}
.hf-hero .hf-badge .hf-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(25,206,132,0.25)}
.hf-hero h1{
  font-size:clamp(26px,3vw,40px);
  font-weight:500900;letter-spacing:-0.04em;line-height:1.02;
  margin:0 auto 22px;max-width:920px;
}
.hf-hero .hf-accent{
  background:linear-gradient(135deg, var(--mint) 0%, #14a877 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hf-hero .hf-underline{
  position:relative;display:inline-block;
}
.hf-hero .hf-underline::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:6%;height:18%;
  background:var(--sunny);z-index:-1;border-radius:8px;transform:rotate(-1.5deg);
}
.hf-hero .hf-lead{
  font-size:clamp(16px,1.8vw,19px);
  color:var(--ink-2);max-width:660px;margin:0 auto 32px;
  line-height:1.6;
}
.hf-hero .hf-lead b{color:var(--ink);font-weight:500700}

/* Stickers du hero (positions par défaut) */
.hf-hero .hf-s-1{top:14%;left:7%;width:54px;height:54px;color:var(--mint)}
.hf-hero .hf-s-2{top:20%;right:9%;width:64px;height:64px;color:var(--lavender)}
.hf-hero .hf-s-3{top:50%;left:5%;width:46px;height:46px;color:var(--sunny)}
.hf-hero .hf-s-4{top:54%;right:6%;width:56px;height:56px;color:var(--coral)}
@media(max-width:820px){.hf-hero .hf-sticker{width:36px;height:36px}}
@media(max-width:640px){.hf-hero .hf-sticker{display:none}}

/* Highlight sunny marker (style surligneur jaune) */
.hf-hl{background:var(--sunny);padding:0 3px;border-radius:4px;display:inline;transform:none;font-weight:500}
.hf-hl-rose{background:var(--rose);padding:0 10px;border-radius:8px;display:inline-block;transform:rotate(-1deg)}
.hf-hl-lavender{background:var(--lavender);padding:0 10px;border-radius:8px;display:inline-block;transform:rotate(-1deg);color:var(--ink)}
.hf-hl-mint{background:var(--mint-soft);padding:0 10px;border-radius:8px;display:inline-block;transform:rotate(-1deg);color:var(--mint-text)}

/* Mot barré en coral (style "Le SEO ne suffit plus") */
.hf-strike{position:relative;display:inline-block;color:var(--ink-3)}
.hf-strike::after{content:"";position:absolute;left:-3%;right:-3%;top:48%;height:7px;background:var(--coral);border-radius:8px;transform:rotate(-3deg)}

/* Hero h1 helpers — accent dégradé + souligné sunny */
.hf-accent{background:linear-gradient(135deg, var(--mint) 0%, #14a877 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hf-underline{position:relative;display:inline-block}
.hf-underline::after{content:"";position:absolute;left:-2%;right:-2%;bottom:6%;height:18%;background:var(--sunny);z-index:-1;border-radius:8px;transform:rotate(-1.5deg)}

/* Sparkle inline pour titres */
.hf-spark{display:inline-block;color:var(--sunny);margin:0 4px;vertical-align:middle}
.hf-spark svg{width:1em;height:1em;display:inline}

/* ============ EYEBROW + section heads ============ */
.hf-eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--mint-text);background:var(--mint-soft);padding:6px 14px;border-radius:8px;margin-bottom:18px;
}
.hf-section-h{font-size:clamp(24px,3vw,38px);font-weight:500900;letter-spacing:-0.03em;line-height:1.05;margin:0 0 14px;max-width:820px;margin-left:auto;margin-right:auto}
.hf-section-sub{font-size:17px;color:var(--ink-2);max-width:600px;margin:0 auto;line-height:1.6}

/* ============ CARTES BRUTALIST ============ */
.hf-card{
  background:white;border:1px solid #E7E3D9;
  border-radius:24px;padding:32px;
  box-shadow:0 12px 34px rgba(12,31,78,.07);
  position:relative;
}
.hf-card-big{
  background:white;border:1px solid #E7E3D9;
  border-radius:32px;padding:46px;
  box-shadow:0 16px 40px rgba(12,31,78,.09);
}
.hf-card.hf-tint-mint{background:var(--mint-soft)}
.hf-card.hf-tint-sunny{background:#EAF7F1}
.hf-card.hf-tint-rose{background:#FFE5EB}
.hf-card.hf-tint-lavender{background:#EFEAFF}

/* ============ PILULES ============ */
.hf-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:#EAF7F1;border:1px solid rgba(14,122,82,.18);
  padding:10px 18px;border-radius:100px;
  font-size:14px;font-weight:500;color:#0E7A52;white-space:nowrap;
  box-shadow:none;
}
.hf-pill.hf-pill-mint{background:var(--mint-soft)}
.hf-pill.hf-pill-sunny{background:#EAF7F1}
.hf-pill.hf-pill-rose{background:#FFE5EB}
.hf-pill.hf-pill-lavender{background:#EFEAFF}

/* ============ MARQUEE ============ */
.hf-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,black 6%,black 94%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 6%,black 94%,transparent 100%)}
.hf-marquee-track{display:flex;width:max-content;animation:hf-scroll-left 32s linear infinite;align-items:center;gap:14px}
.hf-marquee:hover .hf-marquee-track{animation-play-state:paused}

/* ============ SECTION HALO (dégradé pastel en fond) ============ */
.hf-halo{position:relative;overflow:hidden}
.hf-halo::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:760px;height:560px;
  background:radial-gradient(ellipse at center,
    rgba(255,201,60,0.42) 0%,
    rgba(255,180,196,0.32) 32%,
    rgba(184,166,255,0.20) 58%,
    transparent 78%);
  filter:blur(40px);pointer-events:none;z-index:0;
}
.hf-halo > *{position:relative;z-index:1}

/* ============ MID CTA (rappel à l'action en cours de page) ============ */
.hf-midcta{padding:70px 0 40px;text-align:center}
.hf-midcta-card{
  max-width:780px;margin:0 auto;
  background:var(--mint);border:1px solid #E7E3D9;
  border-radius:28px;padding:46px 38px;
  box-shadow:0 18px 44px rgba(12,31,78,.10);
  position:relative;overflow:hidden;
}
.hf-midcta-card::before{content:"";position:absolute;top:-40%;right:-15%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%);pointer-events:none}
.hf-midcta-card h3{font-size:clamp(22px,2.8vw,34px);font-weight:500900;letter-spacing:-0.025em;color:white;margin:0 0 14px;line-height:1.05;position:relative}
.hf-midcta-card p{font-size:16.5px;color:rgba(255,255,255,0.94);margin:0 0 26px;max-width:540px;margin-left:auto;margin-right:auto;line-height:1.55;position:relative}
.hf-midcta-card .hf-btn-white{
  background:white;color:var(--ink);
  padding:16px 28px;border-radius:14px;
  font-size:16px;font-weight:500800;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 6px 18px rgba(12,31,78,.14);
  transition:transform .12s, box-shadow .12s;
  position:relative;
}
.hf-midcta-card .hf-btn-white:hover{transform:none;box-shadow:0 10px 26px rgba(12,31,78,.18);color:var(--ink)}

/* ============ FOOTER ============ */
.hf-footer{background:var(--ink);color:rgba(255,255,255,0.7);padding:70px 0 36px;margin-top:40px}
.hf-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:46px;margin-bottom:46px}
@media(max-width:720px){.hf-footer-grid{grid-template-columns:1fr 1fr;gap:34px}}
.hf-footer-brand p{font-size:14px;line-height:1.65;margin:16px 0 0;color:rgba(255,255,255,0.58);max-width:320px}
.hf-footer h4{color:white;font-size:13px;font-weight:500800;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 18px}
.hf-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.hf-footer ul a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:14px}
.hf-footer ul a:hover{color:var(--mint)}
.hf-footer-bottom{border-top:1px solid rgba(255,255,255,0.10);padding-top:26px;font-size:12.5px;color:rgba(255,255,255,0.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}

/* ============ OVERRIDES H1/H2 pour pages internes ============ */
/* Force la typo XXL sur tous les hero des pages avec happia-fun */
body.happia-fun h1{
  font-size:clamp(26px,3vw,40px)!important;
  font-weight:500900;
  letter-spacing:-0.04em!important;
  line-height:1.02!important;
}
body.happia-fun .hero h1,
body.happia-fun section.hero h1,
body.happia-fun .hf-hero h1{
  font-size:clamp(28px,3.2vw,42px)!important;
}
body.happia-fun .hero h2,
body.happia-fun section h2{
  font-weight:500900;
  letter-spacing:-0.035em;
  line-height:1.05;
}
/* Sub paragraph des hero — plus dense */
body.happia-fun .hero .lede,
body.happia-fun .hero .hero-sub,
body.happia-fun .hf-hero .hf-lead{
  font-size:clamp(16px,1.8vw,19px);
  line-height:1.6;
  color:var(--ink-2);
}

/* Boost rapide des boutons CTA hero pour matcher la home */
body.happia-fun .hero a.btn-primary,
body.happia-fun .hero .btn.btn-primary{
  background:#0E7A52!important;
  color:white!important;
  padding:16px 28px!important;
  border-radius:12px!important;
  font-size:15.5px!important;
  font-weight:500!important;
  box-shadow:none!important;
  border:1.5px solid transparent!important;
}

/* Pills hero (badges en haut du H1) — style brutalist */
body.happia-fun .hero .hero-pill,
body.happia-fun .hero .pill,
body.happia-fun .pill{
  background:#EAF7F1!important;
  border:1px solid rgba(14,122,82,.18)!important;
  border-radius:100px!important;
  padding:9px 18px!important;
  font-size:13.5px!important;
  font-weight:500!important;
  color:#0E7A52!important;
  box-shadow:none!important;
  margin-bottom:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}

/* Section heads des pages internes — XXL */
body.happia-fun .section-h,
body.happia-fun section h2{
  font-size:clamp(24px,3vw,38px)!important;
  font-weight:500900;
  letter-spacing:-0.03em!important;
  line-height:1.05!important;
}

/* Exception : H2 à l'intérieur de cards (profils, membres, prix...) restent à taille normale */
body.happia-fun .founder-card h2,
body.happia-fun .member-card h2,
body.happia-fun .team-card h2,
body.happia-fun .profile-card h2,
body.happia-fun .price-card h2,
body.happia-fun .case-card h2,
body.happia-fun .product h2,
body.happia-fun .ig-card h2,
body.happia-fun .feat h2,
body.happia-fun .feature-card h2{
  font-size:clamp(20px,2.5vw,28px)!important;
  letter-spacing:-0.015em!important;
  line-height:1.15!important;
  word-break:normal;
}

/* ============ BACK-OFFICE — overrides pour pages avec sidebar 240px ============ */
/* Les pages /espace-client/ ont .app + sidebar + main, on n'override pas h2 partout
   mais on traite spécifiquement le .page-head h1 et les CTAs */
body.happia-fun .page-head h1{
  font-size:clamp(28px,4vw,38px)!important;
  font-weight:500900;
  letter-spacing:-0.025em!important;
  line-height:1.05!important;
}
/* Boutons CTA principaux du BO : on les rend brutalist (border + shadow décalée) */
body.happia-fun .btn-primary,
body.happia-fun a.btn-primary,
body.happia-fun button.btn-primary{
  background:#0E7A52!important;
  color:white!important;
  border:1.5px solid transparent!important;
  border-radius:12px!important;
  font-weight:500!important;
  box-shadow:none!important;
  transition:background .12s;
}
body.happia-fun .btn-primary:hover,
body.happia-fun a.btn-primary:hover{
  transform:none!important;
  box-shadow:none!important;
  background:#0c6644!important;
  color:white!important;
}
/* Cartes principales du BO : on ajoute un effet brutalist subtil — pas trop pour ne pas casser */
/* (laissé désactivé par défaut, à activer via classe .hf-card-bo si besoin) */

/* Stickers tech inline dans le H1 du back-office */
body.happia-fun .page-head h1 .hf-hl{
  font-size:0.92em;vertical-align:baseline;
}