/* ==========================================================
   HEADER & FOOTER PERSO — Kaching Club
   Desktop : reprise fidèle de la maquette kaching-v6.html
   Mobile  : header = logo seul. Navigation déportée dans une
             barre d'onglets fixe façon app, dans le footer.
   Breakpoint aligné sur la maquette d'origine : 680px.
   ========================================================== */

:root{
  --wpchf-black:#0B0D0A;
  --wpchf-white:#FFFFFF;
  --wpchf-off:#F5F5F2;
  --wpchf-muted:#6B7280;
  --wpchf-lime:#C8E600;
  --wpchf-lime-deep:#A8BF00;
  --wpchf-border:#E5E7EB;
  --wpchf-tabbar-height:64px;
}

.wpchf-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ── HEADER ── */
.wpchf-hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  background:rgba(11,13,10,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:'DM Sans',system-ui,sans-serif;
}
.wpchf-logo{display:flex;align-items:center;gap:9px}
.wpchf-logo-k{
  width:36px;height:36px;border-radius:10px;
  background:var(--wpchf-lime);color:var(--wpchf-black);
  display:grid;place-items:center;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;
}
.wpchf-logo-txt{font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;line-height:1.1;color:var(--wpchf-white)}
.wpchf-logo-txt span{display:block;font-weight:400;font-size:11px;opacity:.5;letter-spacing:.03em}

.wpchf-nav-links{display:none;gap:2px;align-items:center;height:100%}
.wpchf-nav-item{position:relative;height:100%;display:flex;align-items:center}
.wpchf-nav-item>a{
  font-size:14px;font-weight:500;
  color:rgba(255,255,255,.65);
  padding:7px 12px;border-radius:7px;
  cursor:pointer;transition:.15s;
  display:flex;align-items:center;gap:4px;
  height:100%;text-decoration:none;
}
.wpchf-nav-item>a:hover,.wpchf-nav-item:hover>a{color:#fff;background:rgba(255,255,255,.06)}
.wpchf-nav-link-simple{height:100%;display:flex;align-items:center}
.wpchf-nav-link-simple a{
  font-size:14px;font-weight:500;
  color:rgba(255,255,255,.65);
  padding:7px 12px;border-radius:7px;
  cursor:pointer;transition:.15s;text-decoration:none;
}
.wpchf-nav-link-simple a:hover{color:#fff;background:rgba(255,255,255,.06)}
.wpchf-chevron{font-size:9px;opacity:.5;transition:transform .2s}
.wpchf-nav-item:hover .wpchf-chevron{transform:rotate(180deg)}

.wpchf-mega{
  position:absolute;top:calc(100% - 2px);left:50%;transform:translateX(-50%);
  background:var(--wpchf-white);
  border:1px solid var(--wpchf-border);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  padding:24px;
  opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s;
  z-index:110;
  min-width:480px;
}
.wpchf-nav-item:hover .wpchf-mega{opacity:1;visibility:visible}
.wpchf-mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.wpchf-mega-col h5{
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;
  color:var(--wpchf-lime-deep);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--wpchf-border);
}
.wpchf-mega-col a{
  display:block;padding:7px 10px;border-radius:8px;
  font-size:13.5px;color:var(--wpchf-black);
  cursor:pointer;transition:.12s;text-decoration:none;
}
.wpchf-mega-col a:hover{background:rgba(200,230,0,.1);color:var(--wpchf-black)}
.wpchf-mega-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--wpchf-border)}
.wpchf-mega-foot a{font-size:13px;font-weight:600;color:var(--wpchf-lime-deep);cursor:pointer;text-decoration:none}
.wpchf-mega.narrow{min-width:320px}
.wpchf-mega.narrow .wpchf-mega-cols{grid-template-columns:1fr}

.wpchf-cta-hdr{
  background:var(--wpchf-lime);color:var(--wpchf-black);
  font-family:'Poppins',sans-serif;font-weight:700;font-size:13.5px;
  padding:9px 18px;border-radius:9px;
  border:none;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:.15s;white-space:nowrap;text-decoration:none;
}
.wpchf-cta-hdr:hover{background:var(--wpchf-lime-deep)}

/* Header mobile : logo seul (pas de nav, pas de CTA — tout est dans la barre d'onglets du footer) */
@media (max-width:679px){
  .wpchf-nav-links,
  .wpchf-cta-hdr{ display:none !important; }
}
@media (min-width:680px){
  .wpchf-nav-links{display:flex}
}

/* Pousse le contenu sous le header fixe (même logique que la maquette).
   !important volontaire : évite que les styles de mise en page d'Astra
   (souvent plus spécifiques) ne repassent par-dessus cette contrainte
   structurelle — sans ça, le header fixe peut cacher le haut du contenu. */
html body{padding-top:64px !important;}

/* ── FOOTER (contenu classique — identique à la maquette) ── */
.wpchf-footer{background:var(--wpchf-black);border-top:1px solid rgba(255,255,255,.06);padding:64px 0 0;color:var(--wpchf-white);font-family:'DM Sans',system-ui,sans-serif}
.wpchf-foot-top{display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:48px}
.wpchf-foot-brand{max-width:300px}
.wpchf-foot-brand .wpchf-logo{margin-bottom:16px}
.wpchf-foot-brand p{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.6}
.wpchf-foot-socials{display:flex;gap:10px;margin-top:18px}
.wpchf-foot-socials a{
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;font-size:15px;
  color:rgba(255,255,255,.5);cursor:pointer;transition:.15s;text-decoration:none;
}
.wpchf-foot-socials a:hover{background:rgba(200,230,0,.12);color:var(--wpchf-lime);border-color:rgba(200,230,0,.3)}
.wpchf-foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.wpchf-foot-col h5{
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.35);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:14px;
}
.wpchf-foot-col a{display:block;font-size:13.5px;color:rgba(255,255,255,.6);padding:5px 0;cursor:pointer;transition:.15s;text-decoration:none}
.wpchf-foot-col a:hover{color:var(--wpchf-lime)}
.wpchf-foot-legal{
  border-top:1px solid rgba(255,255,255,.06);
  padding:20px 0;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:12px;color:rgba(255,255,255,.3);
}
.wpchf-foot-legal a{color:rgba(255,255,255,.3);cursor:pointer;transition:.12s;text-decoration:none}
.wpchf-foot-legal a:hover{color:rgba(255,255,255,.6)}
.wpchf-foot-legal .sep{opacity:.3}

@media(min-width:680px){
  .wpchf-foot-cols{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:900px){
  .wpchf-foot-top{grid-template-columns:1.2fr 2fr;gap:60px}
}

/* Sur mobile, la barre d'onglets fixe prend de la place en bas :
   on ajoute de la marge pour que le footer classique ne soit jamais caché dessous. */
html body.wpchf-has-tabbar{
  padding-bottom:calc(var(--wpchf-tabbar-height) + 12px) !important;
  padding-bottom:calc(var(--wpchf-tabbar-height) + 12px + env(safe-area-inset-bottom)) !important;
}
@media (min-width:680px){
  html body.wpchf-has-tabbar{padding-bottom:0 !important}
}

/* ── BARRE D'ONGLETS MOBILE (façon app) ──
   4 onglets + 1 CTA central mis en avant. Visible uniquement < 680px. */
.wpchf-tabbar{
  display:none;
}
@media (max-width:679px){
  .wpchf-tabbar{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:100;
    height:var(--wpchf-tabbar-height);
    background:rgba(11,13,10,.96);
    backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.08);
    padding-bottom:env(safe-area-inset-bottom);
  }
}
.wpchf-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  color:rgba(255,255,255,.55);
  text-decoration:none;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:10.5px;font-weight:500;
  transition:color .15s;
}
.wpchf-tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.wpchf-tab.is-active{color:var(--wpchf-lime)}
.wpchf-tab:active{color:var(--wpchf-lime)}

/* CTA central : la zone la plus mise en avant, en pastille relevée */
.wpchf-tab-cta-wrap{
  position:relative;
  /* place le 3e onglet (position centrale) — voir markup du template */
}
.wpchf-tab-cta{
  position:absolute;
  left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  width:112px;height:60px;
  padding:0 6px;
  background:var(--wpchf-lime);color:var(--wpchf-black);
  border-radius:18px;
  box-shadow:0 8px 20px rgba(200,230,0,.35), 0 2px 6px rgba(0,0,0,.25);
  text-decoration:none;
  text-align:center;
  transition:transform .15s, box-shadow .15s;
}
.wpchf-tab-cta svg{width:16px;height:16px;stroke:var(--wpchf-black);fill:none;stroke-width:2;flex-shrink:0}
.wpchf-tab-cta span{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:9.5px;line-height:1.15;
}
.wpchf-tab-cta:active{transform:translateX(-50%) scale(.96)}