/* ===================== HerCall — main-header.css (clean) =====================
   Scope:
   - Base reset + background
   - Header (brand, nav, buttons, language switch)
   - Main sub-nav pills (desktop)
   - Mobile bottom-nav (<=640px)
   - Footer
   Notes:
   - Mobile rules are consolidated in ONE block at the end.
   ========================================================================== */

/* ── Theme variables ─────────────────────────────────────────────────────── */
:root{
  --hc-bg:#0b0c10;
  --hc-text:#eaeff5;
  --hc-sub:#aab2bf;
  --hc-border:#1f2430;
  --hc-accent:#e1c3a8;

  --hc-fg:#0b0c10;              /* text on light pills */
  --hc-pill:#ffffff;
  --hc-pill-hover:#f9fafb;

  --hc-cta:#ec4899;
  --hc-cta-hover:#db2777;
  --hc-cta-ring:rgba(236,72,153,.45);

  --hc-violet:#8b5cf6;
  --hc-violet-hover:#7c3aed;
  --hc-violet-ring:rgba(139,92,246,.35);

  --hc-gold:#eab308;
  --hc-gold-hover:#ca8a04;
  --hc-gold-ring:darkorange;

  --hc-match:#1d4ed8;
  --hc-match-hover:#1e40af;
  --hc-match-ring:rgba(59,130,246,.55);

  --hc-amber:#f59e0b;

  /* glass veil */
  --veil-rgb:18,21,27;
  --veil-alpha:.72;
  --veil-blur:10px;
  --veil-sat:140%;
}

/* ── Reset minimal ───────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ font-size:100%; }

body{
  margin:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  color:var(--hc-text);
  background:var(--hc-bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans";
}

main{ flex:1 0 auto; min-height:0; }

a{ color:var(--hc-accent); text-underline-offset:2px; }
.small{ font-size:13px; }
.muted{ color:var(--hc-sub); }

/* ── Background image ───────────────────────────────────────────────────── */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  /* ✅ image versionnée via --hc-bg-img (injecté par head_assets/site_header) */
  background:var(--hc-bg-img, url("../../images/Basic-Fond.jpg")) center 22% / cover no-repeat;
  background-attachment:fixed;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:8px;
  top:-40px;
  padding:8px 12px;
  background:#111317;
  color:#eaeff5;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:8px; }

/* ── Header & Footer veil ───────────────────────────────────────────────── */
.site-header,
.site-footer{
  background:rgba(var(--veil-rgb),var(--veil-alpha));
  -webkit-backdrop-filter:saturate(var(--veil-sat)) blur(var(--veil-blur));
  backdrop-filter:saturate(var(--veil-sat)) blur(var(--veil-blur));
  z-index:3;
}

/* Shared container row (header/footer) */
.container.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Header + Footer spacing (desktop) */
.site-header .container.nav-row,
.site-footer .container.nav-row{
  width:100%;
  max-width:75%;
  margin:0 auto;
  padding:12px 18px;
}
/* Flags / language pills */
.lang-switch{ display:flex; gap:8px; margin-left:12px; }
.btn-flag{
  display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18); background:rgba(17,19,23,.35);
  color:var(--hc-text); text-decoration:none; font-weight:600; line-height:1;
  transition:transform .06s, background .15s, border-color .15s, box-shadow .15s;
}
.btn-flag:hover{ transform:translateY(-1px); background:rgba(17,19,23,.45); border-color:rgba(255,255,255,.24); }
.btn-flag.active{ outline:2px solid rgba(225,195,168,.45); outline-offset:1px; }
.btn-flag .flag{ width:18px; height:12px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }
.btn-flag .lang-code{ font-size:12px; letter-spacing:.3px; }

/* Quota chips (hommes) — petits compteurs cliquables vers Premium */
.hc-quota-row{ display:inline-flex; align-items:center; gap:8px; }

.hc-quota-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(17,19,23,.35);
  color:var(--hc-text);
  text-decoration:none;
  font-weight:750;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  transition:transform .06s, background .15s, border-color .15s, box-shadow .15s;
}
.hc-quota-chip:hover{
  transform:translateY(-1px);
  background:rgba(17,19,23,.45);
  border-color:rgba(255,255,255,.24);
}
.hc-quota-chip .hc-quota-ico{
  width:16px;
  height:16px;
  fill:currentColor;
  opacity:.92;
}
.hc-quota-chip[data-level="warn"]{
  border-color:rgba(245,158,11,.45);
  background:rgba(245,158,11,.12);
}
.hc-quota-chip[data-level="zero"]{
  border-color:rgba(239,68,68,.45);
  background:rgba(239,68,68,.12);
}
.hc-quota-chip[data-level="premium"]{
  border-color:rgba(234,179,8,.45);
  background:rgba(234,179,8,.12);
}

/* ── Brand ──────────────────────────────────────────────────────────────── */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.brand-mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(26,31,41,.92);
  border:1px solid rgba(255,255,255,.22);
  color:var(--hc-accent);
  font-weight:800;
  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
.brand-mark.sm{
  width:28px;
  height:28px;
  font-size:12px;
}
.brand-name{
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  letter-spacing:.3px;
}

/* Header tuned (bigger logo) */
.site-header .brand-mark{
  width:48px;
  height:48px;
  border-radius:12px;
  font-size:22px;
  font-weight:800;
  letter-spacing:.4px;
  background:
    linear-gradient(180deg, rgba(34,40,54,.95), rgba(20,24,32,.95)),
    rgba(26,31,41,.92);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 12px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 8px 18px rgba(0,0,0,.25) inset;
}
.site-header .brand-name{
  font-size:24px;
  font-weight:800;
  letter-spacing:.35px;
  text-shadow:
    0 2px 10px rgba(0,0,0,.45),
    0 0 1px rgba(255,255,255,.35);
}

/* ── Top nav ────────────────────────────────────────────────────────────── */
.nav{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav a{
  color:#eaeff5;
  text-decoration:none;
  font-weight:600;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  padding:12px 16px;
  border-radius:10px;
  border:1px solid var(--hc-border);
  background:#1a1f29;
  color:var(--hc-text);
  text-decoration:none;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition: transform .06s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover{
  background:#222838;
  border-color:#2a3241;
  transform:translateY(-1px);
}

.btn-primary{
  background:#2a2435;
  border-color:#3a2f49;
}
.btn-primary:hover{
  background:#3a2f49;
  border-color:#4b3b61;
}



/* ── Header buttons (isolated from page-level .btn styles) ─────────────── */
.hbtn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(17,19,23,.35);
  color:var(--hc-text);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  line-height:1;
  transition:transform .06s, background .15s, border-color .15s, box-shadow .15s;
}
.hbtn:hover{
  transform:translateY(-1px);
  background:rgba(17,19,23,.45);
  border-color:rgba(255,255,255,.24);
}

.hbtn-primary{
  background:#2a2435;
  border-color:#3a2f49;
}
.hbtn-primary:hover{
  background:#3a2f49;
  border-color:#4b3b61;
}

.hbtn-ghost{
  background:transparent;
  border-color:rgba(148,163,184,.28);
}
.hbtn-ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(148,163,184,.40);
}

.hbtn:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(225,195,168,.35);
  border-radius:999px;
}
.btn2{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.28);
  background:transparent;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition: transform .06s, border-color .15s, background .15s, box-shadow .15s;
}
.btn2:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(148,163,184,.40);
  transform:translateY(-1px);
}

/* Focus accessibility */
a:focus-visible,
.btn:focus-visible,
.btn2:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(225,195,168,.35);
  border-radius:10px;
}

/* ── Language switch ────────────────────────────────────────────────────── */
.lang-switch{
  display:flex;
  gap:8px;
  margin-left:12px;
}
.btn-flag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(17,19,23,.35);
  color:var(--hc-text);
  text-decoration:none;
  font-weight:600;
  line-height:1;
  transition: transform .06s, background .15s, border-color .15s, box-shadow .15s;
}
.btn-flag:hover{
  transform:translateY(-1px);
  background:rgba(17,19,23,.45);
  border-color:rgba(255,255,255,.24);
}
.btn-flag.active{
  outline:2px solid rgba(225,195,168,.45);
  outline-offset:1px;
}
.btn-flag .flag{
  width:18px;
  height:12px;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}
.btn-flag .lang-code{
  font-size:12px;
  letter-spacing:.3px;
}

/* ── Sub-nav (main_nav.php) ─────────────────────────────────────────────── */
.hc-subnav-wrap{
	margin-top:10px;
  position:sticky;
  top:60px;
  z-index:60;
  background:transparent;
  border:0;
  backdrop-filter:none;
}
.hc-subnav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:12px 0;
  overflow:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.pill-wrap{
  position:relative;
  display:inline-block;
}
.hc-subnav .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  line-height:1;
  text-decoration:none;
  border:1px solid var(--hc-border);
  background:var(--hc-pill);
  color:var(--hc-fg);
  font-weight:700;
  box-shadow:none;
  transition:.16s ease;
  transition-property:transform, background, color, border-color, box-shadow;
  white-space:nowrap;
}
.hc-subnav .pill svg{
  width:18px;
  height:18px;
  fill:currentColor;
  opacity:.95;
}
.hc-subnav .badge{
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:9px;
  background:#ef4444;
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* Initiatives: double badges (proposals + interests) */
.hc-subnav .badge-stack{
  display:inline-flex;
  gap:4px;
  margin-left:6px;
  align-items:center;
}
.hc-subnav .badge--soft{
  background:rgba(148,163,184,.28);
  color:#fff;
}

/* Applications: quota badge (remaining/weekly) */
.hc-subnav .badge--quota{
  background:rgba(255,255,255,.14);
  color:currentColor;
  border:1px solid rgba(255,255,255,.18);
  font-weight:800;
  letter-spacing:.2px;
}
.hc-subnav .badge--quota[data-level="warn"]{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.28);
}
.hc-subnav .badge--quota[data-level="zero"]{
  background:rgba(239,68,68,.22);
  border-color:rgba(239,68,68,.30);
}
.hc-subnav .badge--quota[data-level="premium"]{
  background:rgba(232,121,249,.18);
  border-color:rgba(232,121,249,.32);
}

.hc-subnav .pill:hover{
  background:var(--hc-pill-hover);
  border-color:#94a3b8;
  box-shadow:
    0 0 0 1px rgba(148,163,184,.85),
    0 0 0 4px rgba(148,163,184,.28);
  transform:translateY(-1px);
}

/* active (neutral tabs) */
.hc-subnav .pill.is-active:not(.pill-cta):not(.pill-violet):not(.pill-discover):not(.pill-apps):not(.pill-matches):not(.pill-initiative){
  background:#111827;
  color:#fff;
  border-color:#111827;
  box-shadow:
    0 0 0 2px rgba(15,23,42,.3),
    0 0 0 5px rgba(148,163,184,.35);
  transform:translateY(-1px) scale(1.03);
}

/* CTA rose */
.hc-subnav .pill-cta{
  background:var(--hc-cta);
  border-color:var(--hc-cta);
  color:#fff;
  border-radius:12px;
}
.hc-subnav .pill-cta:hover{
  background:var(--hc-cta-hover);
  border-color:var(--hc-cta-hover);
  box-shadow:
    0 0 0 1px rgba(236,72,153,.9),
    0 0 0 4px var(--hc-cta-ring);
}
.hc-subnav .pill-cta.is-active{
  background:var(--hc-cta-hover);
  border-color:var(--hc-cta-hover);
  box-shadow:
    0 0 0 2px rgba(15,23,42,.3),
    0 0 0 5px var(--hc-cta-ring);
  transform:translateY(-1px) scale(1.03);
}

/* Mes rendez-vous (violet) */
.hc-subnav .pill.pill-violet{
  background:var(--hc-violet);
  border-color:var(--hc-violet);
  color:#fff;
}
.hc-subnav .pill.pill-violet:hover{
  background:var(--hc-violet-hover);
  border-color:var(--hc-violet-hover);
  box-shadow:
    0 0 0 1px rgba(129,140,248,.9),
    0 0 0 4px var(--hc-violet-ring);
}
.hc-subnav .pill.pill-violet.is-active{
  background:var(--hc-violet-hover);
  border-color:var(--hc-violet-hover);
  box-shadow:
    0 0 0 2px rgba(15,23,42,.3),
    0 0 0 5px var(--hc-violet-ring);
  transform:translateY(-1px) scale(1.03);
}

/* Discover (gold) */
.hc-subnav .pill.pill-discover{
  background:var(--hc-gold-ring);
  color:#fff;
}
.hc-subnav .pill.pill-discover:hover{
  box-shadow:
    0 0 0 1px rgba(234,179,8,.9),
    0 0 0 4px var(--hc-gold);
}
.hc-subnav .pill.pill-discover.is-active{
  box-shadow:
    0 0 0 2px rgba(15,23,42,.25),
    0 0 0 5px var(--hc-gold);
  transform:translateY(-1px) scale(1.03);
}

/* Applications (violet gradient) */
.hc-subnav .pill.pill-apps{
  background-image:
    radial-gradient(circle at 0% 0%, rgba(196,181,253,0.22), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(221,214,254,0.26), transparent 55%),
    linear-gradient(145deg, rgba(139,92,246,0.96), rgba(76,29,149,0.98));
  border-color:#4c1d95;
  color:#f5f3ff;
}
.hc-subnav .pill.pill-apps:hover{
  border-color:#5b21b6;
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.95),
    0 0 0 4px var(--hc-violet-ring);
}
.hc-subnav .pill.pill-apps.is-active{
  border-color:#5b21b6;
  box-shadow:
    0 0 0 2px rgba(15,23,42,0.35),
    0 0 0 5px var(--hc-violet-ring);
  transform:translateY(-1px) scale(1.03);
}

/* Matchs (blue gradient) */
.hc-subnav .pill.pill-matches{
  background-image:
    radial-gradient(circle at 0% 0%, rgba(147, 197, 253, 0.2), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(165, 180, 252, 0.25), transparent 55%),
    linear-gradient(145deg, rgba(37, 99, 235, 0.95), rgba(15, 23, 42, 0.98));
  border-color:#111827;
  color:#e5edff;
}
.hc-subnav .pill.pill-matches:hover{
  border-color:var(--hc-match-hover);
  box-shadow:
    0 0 0 1px rgba(129,140,248,.95),
    0 0 0 4px var(--hc-match-ring);
}
.hc-subnav .pill.pill-matches.is-active{
  border-color:var(--hc-match-hover);
  box-shadow:
    0 0 0 2px rgba(15,23,42,.35),
    0 0 0 5px var(--hc-match-ring);
  transform:translateY(-1px) scale(1.03);
}


/* Modération (amber) */
.hc-subnav .pill.pill-moderation{
  background:#111827;
  border-color:rgba(245,158,11,.55);
  color:#fff;
}
.hc-subnav .pill.pill-moderation:hover{
  border-color:rgba(245,158,11,.85);
  box-shadow:
    0 0 0 1px rgba(245,158,11,.9),
    0 0 0 4px rgba(245,158,11,.25);
}
.hc-subnav .pill.pill-moderation.is-active{
  border-color:rgba(245,158,11,.9);
  box-shadow:
    0 0 0 2px rgba(15,23,42,.3),
    0 0 0 5px rgba(245,158,11,.30);
  transform:translateY(-1px) scale(1.03);
}

/* Bottom nav moderation */
.hc-bottom-nav__item.nav-moderation{ color:rgba(245,158,11,.95); }
.hc-bottom-nav__item.nav-moderation.is-active{
  color:#fff;
  background:rgba(245,158,11,.22);
  border-color:rgba(245,158,11,.45);
}

/* Admin (teal) */
.hc-subnav .pill.pill-admin{
  background:#0b2a2a;
  border-color:rgba(45,212,191,.55);
  color:#fff;
}
.hc-subnav .pill.pill-admin:hover{
  border-color:rgba(45,212,191,.85);
  box-shadow:
    0 0 0 1px rgba(45,212,191,.9),
    0 0 0 4px rgba(45,212,191,.22);
}
.hc-subnav .pill.pill-admin.is-active{
  border-color:rgba(45,212,191,.9);
  box-shadow:
    0 0 0 2px rgba(15,23,42,.3),
    0 0 0 5px rgba(45,212,191,.28);
  transform:translateY(-1px) scale(1.03);
}

/* Bottom nav admin */
.hc-bottom-nav__item.nav-admin{ color:rgba(45,212,191,.95); }
.hc-bottom-nav__item.nav-admin.is-active{
  color:#fff;
  background:rgba(45,212,191,.18);
  border-color:rgba(45,212,191,.40);
}

/* Initiative (bordeaux) */
.hc-subnav .pill-initiative{
  background:#5e1224;
  border-color:#7b1e3a;
  color:#fff;
}
.hc-subnav .pill-initiative:hover{
  background:#77152c;
  border-color:#9c2645;
}
.hc-subnav .pill-cta.pill-initiative.is-active{
  background:#8c1b37;
  border-color:#ff6f9d;
  box-shadow:
    0 0 0 2px rgba(15,23,42,.3),
    0 0 0 5px var(--hc-cta-ring);
  transform:translateY(-1px) scale(1.03);
}

/* Popups (bulles) */
.note-pop{
  position:absolute;
  left:50%;
  top:-6px;
  transform:translate(-50%, -100%);
  display:flex;
  gap:6px;
  align-items:center;
  padding:6px 8px;
  border-radius:10px;
  background:#111827;
  color:#fff;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 24px rgba(15,23,42,.6);
  pointer-events:none;
  z-index:1;
  animation: noteFade .35s ease-out;
}
.note-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(15,23,42,.75);
  border:1px solid rgba(148,163,184,.6);
}
.note-ok { color:#10b981; }
.note-ko { color:#ef4444; }
.note-new{ color:var(--hc-amber); }
.note-chip svg{ width:14px; height:14px; }

@keyframes noteFade{
  from{ opacity:0; transform:translate(-50%, -115%); }
  to  { opacity:1; transform:translate(-50%, -100%); }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer-nav .nav-link{
  color:var(--hc-sub);
  text-decoration:none;
  padding:6px 8px;
  border-radius:8px;
}

/* Small inline icon for links (footer/support) */
.nav-link .hc-ico{ width:16px; height:16px; display:inline-block; vertical-align:-3px; margin-right:6px; opacity:.92; }

.footer-nav .nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}

/* ── Bottom nav (PWA) — base (desktop hidden, mobile shown) ─────────────── */
.hc-bottom-nav{ display:none; }

.hc-bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:70;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10, 15, 25, .88);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(148,163,184,.22);
  overflow:hidden;          /* clips the row + mask */
  max-width:100vw;
}

.hc-bottom-nav__row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:0 12px 2px;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.hc-bottom-nav__row::-webkit-scrollbar{ display:none; }

.hc-bottom-nav__item{
  position:relative;
  flex:0 0 auto;
  min-width:76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 8px;
  text-decoration:none;
  color:rgba(226,232,240,.85);
  border-radius:14px;
  background:transparent;
  border:1px solid transparent;
  scroll-snap-align:center;
}
.hc-bottom-nav__item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(148,163,184,.22);
}

.hc-bottom-nav svg,
.hc-bottom-nav__item svg{
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  flex:0 0 auto !important;
  display:block !important;
}

.hc-bottom-nav__item > span{
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}


/* Bottom-nav quota badges (men quotas on Applications / Initiatives / Messages) */
.hc-bottom-nav__badge{
  position:absolute;
  top:6px;
  right:8px;
  z-index:2;
  padding:2px 6px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.2px;
  background:rgba(17,19,23,.62);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.95);
  pointer-events:none;
  max-width:56px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hc-bottom-nav__badge[data-level="warn"]{
  border-color:rgba(245,158,11,.45);
  background:rgba(245,158,11,.14);
}
.hc-bottom-nav__badge[data-level="zero"]{
  border-color:rgba(239,68,68,.45);
  background:rgba(239,68,68,.14);
}
.hc-bottom-nav__badge[data-level="premium"]{
  border-color:rgba(234,179,8,.45);
  background:rgba(234,179,8,.14);
}


/* Active base (neutral) */
.hc-bottom-nav__item.is-active{
  color:#fff;
  background:#111827;
  border-color:rgba(148,163,184,.28);
}

/* Variants (colors like main_nav) */
.hc-bottom-nav__item.nav-discover{ color:rgba(234,179,8,.95); }
.hc-bottom-nav__item.nav-discover.is-active{
  color:#fff;
  background:var(--hc-gold-ring);
  border-color:rgba(234,179,8,.45);
}

.hc-bottom-nav__item.nav-matches{ color:rgba(165,180,252,.95); }
.hc-bottom-nav__item.nav-matches.is-active{
  color:#fff;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(147, 197, 253, 0.2), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(165, 180, 252, 0.25), transparent 55%),
    linear-gradient(145deg, rgba(37, 99, 235, 0.95), rgba(15, 23, 42, 0.98));
  border-color:var(--hc-match-hover);
}

.hc-bottom-nav__item.nav-my_events{ color:rgba(196,181,253,.95); }
.hc-bottom-nav__item.nav-my_events.is-active{
  color:#fff;
  background:var(--hc-violet-hover);
  border-color:rgba(167,139,250,.45);
}

.hc-bottom-nav__item.nav-applications{ color:rgba(221,214,254,.98); }
.hc-bottom-nav__item.nav-applications.is-active{
  color:#f5f3ff;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(196,181,253,0.22), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(221,214,254,0.26), transparent 55%),
    linear-gradient(145deg, rgba(139,92,246,0.96), rgba(76,29,149,0.98));
  border-color:#5b21b6;
}

/* CTA: no border/background at rest */
.hc-bottom-nav__item.is-cta{
  background:transparent !important;
  border-color:transparent !important;
  color:rgba(255,255,255,.92);
}
.hc-bottom-nav__item.is-cta:hover{
  background:rgba(236,72,153,.10) !important;
  border-color:rgba(236,72,153,.22) !important;
}
.hc-bottom-nav__item.is-cta.is-active{
  background:var(--hc-cta-hover) !important;
  border-color:var(--hc-cta-hover) !important;
  color:#fff;
}

/* CTA Initiatives (bordeaux) */
.hc-bottom-nav__item.nav-initiatives.is-cta:hover{
  background:rgba(94,18,36,.22) !important;
  border-color:rgba(255,111,157,.22) !important;
}
.hc-bottom-nav__item.nav-initiatives.is-cta.is-active{
  background:#8c1b37 !important;
  border-color:#ff6f9d !important;
}

/* ── Desktop/mobile visibility ──────────────────────────────────────────── */
@media (min-width:641px){
  .hc-bottom-nav{ display:none !important; }
  .hc-subnav-wrap{ display:block; }
}
@media (max-width:640px){
  .hc-bottom-nav{ display:block; }
  .hc-subnav-wrap{ display:none !important; } /* main_nav hidden on mobile */
  body.has-bottom-nav{ padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* ── MOBILE (<=640px) — consolidated overrides ──────────────────────────── */
@media (max-width:640px){

  /* prevent horizontal “page shift” */
  html, body{ overflow-x:hidden; }

  /* Header: full width + compact */
  .site-header{
    position:sticky;
    top:0;
    z-index:90;
  }
  .site-header .container.nav-row{
    max-width:100% !important;
    padding:10px 12px !important;
    gap:10px;
  }
  .site-header .brand-mark{
    width:40px;
    height:40px;
    font-size:18px;
    border-radius:12px;
  }
  .site-header .brand-name{ font-size:18px; }
  .site-header .nav{
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  /* if bottom nav exists, top dashboard link is optional */
  body.has-bottom-nav .site-header .nav-link{ display:none; }

  .site-header .btn,
  .site-header .btn2{
    padding:8px 10px;
    border-radius:12px;
    font-size:13px;
  }

  /* Language pills: flags only */
  .site-header .lang-switch{ margin-left:6px; gap:6px; }
  .site-header .btn-flag{ padding:6px; border-radius:12px; }
  .site-header .btn-flag .lang-code{ display:none; }

  /* Subnav pills (desktop) not used on mobile but keep sizes consistent if shown */
  .hc-subnav{ gap:8px; padding:10px 0; }
  .hc-subnav .pill{ padding:8px 12px; font-weight:600; }
  .hc-subnav .pill svg{ width:17px; height:17px; }

  /* Footer: full width + centered stack */
  .site-footer .container.nav-row{
    max-width:100% !important;
    padding:12px 12px !important;
    gap:10px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .site-footer .footer-left{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  .site-footer .brand-mark{
    width:34px;
    height:34px;
    font-size:14px;
    border-radius:12px;
  }
  .site-footer .brand-name{ font-size:16px; }

  .site-footer .footer-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }
  .site-footer .footer-nav .nav-link{
    padding:8px 10px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(148,163,184,.18);
  }
}

/* Ultra small: hide brand-name to save space */
@media (max-width:380px){
  .site-header .brand-name{ display:none; }
}
.hc-toast{
  position:fixed;
  top:14px; left:50%;
  transform:translateX(-50%);
  z-index:9999;
  max-width:min(560px, calc(100% - 24px));
  padding:12px 14px;
  border-radius:14px;
  background:rgba(15,23,42,.95);
  border:1px solid rgba(148,163,184,.35);
  color:#e5e7eb;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}

/* ── Compact page info (purpose & actions) ───────────────────────────────── */
.hc-pageinfo{
  width: min(1120px, 96vw);
  max-width: 100%;
  margin:10px auto 14px;
  padding:0;
}
.hc-pageinfo__details{
  width:100%;
  border:1px solid rgba(148,163,184,.20);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:10px 12px;
  box-sizing:border-box;
}
.hc-pageinfo__summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  min-width:0;
}
.hc-pageinfo__summary::-webkit-details-marker{ display:none; }
.hc-pageinfo__icon{ opacity:.95; flex:0 0 auto; }
.hc-pageinfo__hint{
  color:var(--hc-sub);
  font-weight:650;
  font-size:.98rem;
  line-height:1.25;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(640px, 74vw);
}
.hc-pageinfo__chev{
  opacity:.85;
  transition:transform .18s ease;
  flex:0 0 auto;
}
.hc-pageinfo__details[open] .hc-pageinfo__chev{ transform:rotate(180deg); }
.hc-pageinfo__details[open] .hc-pageinfo__hint{
  white-space:normal;
  max-width:none;
  overflow-wrap:anywhere;
}
.hc-pageinfo__body{
  margin-top:10px;
  text-align:left;
  padding-top:10px;
  border-top:1px dashed rgba(148,163,184,.20);
}
.hc-pageinfo__label{
  color:var(--hc-sub);
  font-size:.88rem;
  font-weight:700;
  margin-bottom:6px;
}
.hc-pageinfo__actions{
  margin:0;
  padding-left:18px;
}
.hc-pageinfo__actions li{
  margin:5px 0;
  color:var(--hc-text);
}
@media (max-width:640px){
  .hc-pageinfo{ margin:8px auto 12px; padding:0; }
  .hc-pageinfo__details{ padding:9px 10px; border-radius:14px; }
  .hc-pageinfo__hint{ font-size:.95rem; max-width:78vw; }
}