/* ============================================================
   NEO ENERGIE — Colors & Typography
   ============================================================
   Locked palette per the Brand Bible.
   Fonts:
     - Anton (Google Fonts) — hooks, titles, all CAPS display
     - Helvetica Neue substitute for "Helvetica Hebrew"
       (the brand's Canva-only typeface). Inter is the fallback.
       FLAG: replace with the real Helvetica Hebrew TTF when
       available.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ───── Brand palette (LOCKED — do not invent new colors) ───── */
  --neo-blue-night:      #081A2D;  /* gradient start, fond */
  --neo-blue-marine:     #0D3A66;  /* gradient end, fond */
  --neo-lime:            #CCF407;  /* hooks, CTAs, badges, signature marketing */
  --neo-logo-green:      #0DF578;  /* LOGO ONLY — never used elsewhere */
  --neo-gold:            #FFCC00;  /* very rare, max 1 word per ad */
  --neo-white:           #FFFFFF;  /* primary text */

  /* The signature gradient (90°, blue night → blue marine) */
  --neo-bg-gradient: linear-gradient(90deg, var(--neo-blue-night) 0%, var(--neo-blue-marine) 100%);
  /* Vertical variant used in some ads */
  --neo-bg-gradient-v: linear-gradient(180deg, var(--neo-blue-night) 0%, var(--neo-blue-marine) 100%);

  /* ───── Semantic surfaces ───── */
  --bg:              var(--neo-blue-night);
  --bg-elev:         var(--neo-blue-marine);
  --bg-overlay:      rgba(8, 26, 45, 0.78);   /* readable overlay over photos */
  --bg-overlay-soft: rgba(8, 26, 45, 0.45);

  /* ───── Semantic text ───── */
  --fg:        var(--neo-white);
  --fg-muted:  rgba(255, 255, 255, 0.78);
  --fg-faint:  rgba(255, 255, 255, 0.55);
  --fg-accent: var(--neo-lime);              /* highlight word in a hook */
  --fg-rare:   var(--neo-gold);              /* once per ad max */

  /* ───── Strokes & dividers ───── */
  --hairline:        rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.24);

  /* ───── Bullet circles (signature element) ─────
     Solid lime disc, white glyph inside. */
  --bullet-bg:    var(--neo-lime);
  --bullet-fg:    var(--neo-white);
  --bullet-size:  44px;

  /* ───── Star rating ───── */
  --star: var(--neo-gold);

  /* ───── Type families ───── */
  --font-display: 'Anton', 'Oswald', 'Helvetica Neue', Impact, sans-serif;
  --font-body:    'Helvetica Neue', 'Inter', 'Helvetica', Arial, sans-serif;
  /* TODO: when we get the Helvetica Hebrew TTF, swap --font-body */

  /* ───── Type scale (mobile-first ad context) ───── */
  --fs-hook-xl:  72px;   /* main hook line on a 1080×1350 feed ad */
  --fs-hook-lg:  56px;
  --fs-hook-md:  44px;
  --fs-title:    32px;   /* sub-hook, section title */
  --fs-body-lg:  22px;   /* bullet benefit */
  --fs-body:     18px;
  --fs-caption:  15px;   /* CEE mention, signatures */
  --fs-micro:    13px;

  --lh-display: 0.92;    /* tight, escalier-friendly */
  --lh-tight:   1.05;
  --lh-body:    1.35;

  --tracking-display: 0.005em;
  --tracking-caps:    0.04em;

  /* ───── Spacing (4-pt grid, tuned for ad layouts) ───── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ───── Radii ───── */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ───── Elevation (used sparingly — brand is flat-ish) ───── */
  --shadow-cta:    0 6px 18px rgba(204, 244, 7, 0.25);
  --shadow-card:   0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-photo:  0 12px 40px rgba(0, 0, 0, 0.45);

  /* ───── Motion ───── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-med:  220ms;
}

/* ============================================================
   Base + semantic typography classes
   ============================================================ */

/* Global responsive guardrails — prevent horizontal overflow on mobile.
   overflow-x is set on body only (not html) so that position: sticky
   on the nav keeps working. */
html, body {
  max-width: 100%;
}
body {
  overflow-x: hidden;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Liens : héritent de la couleur du parent (évite le violet/bleu navigateur par défaut) */
a {
  color: inherit;
  text-decoration: none;
}

html, body {
  background: var(--neo-bg-gradient);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / hook — Anton, all caps, escalier */
.neo-hook,
h1.neo {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  font-size: var(--fs-hook-xl);
  color: var(--fg);
  margin: 0;
}
.neo-hook--lg { font-size: var(--fs-hook-lg); }
.neo-hook--md { font-size: var(--fs-hook-md); }

/* The lime-highlight word inside a hook (signature element) */
.neo-hook em,
.neo-accent {
  font-style: normal;
  color: var(--neo-lime);
}

/* Gold — RARE, max 1 word per ad */
.neo-gold-word {
  color: var(--neo-gold);
  font-style: normal;
}

/* Sub-hook / sentence under the hook */
h2.neo,
.neo-subhook {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-title);
  letter-spacing: var(--tracking-caps);
  line-height: var(--lh-tight);
  margin: 0;
}

/* Body copy — Helvetica/Inter */
p, .neo-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}
.neo-body-lg { font-size: var(--fs-body-lg); font-weight: 600; }

/* Eyebrow / caption (the "CEE" mention, signatures, etc.) */
.neo-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* CTA button label */
.neo-cta-label {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ============================================================
   "Restez informé" — social card section (Home v2, LP PAC, LP Pros)
   ============================================================ */
.stay-informed {
  background: var(--neo-bg-gradient);
  padding: 80px 32px;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.stay-informed-card {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(204, 244, 7, 0.45);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
.stay-informed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neo-lime);
  margin: 0 0 14px;
}
.stay-informed-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffffff;
  margin: 0 0 16px;
}
.stay-informed-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 500px;
  margin: 0 auto 32px;
}
.stay-informed-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.stay-informed-social {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--neo-blue-night);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.stay-informed-social svg {
  width: 24px;
  height: 24px;
  display: block;
}
.stay-informed-social:hover,
.stay-informed-social:focus-visible {
  background: var(--neo-lime);
  color: var(--neo-blue-night);
  border-color: var(--neo-lime);
  transform: translateY(-2px);
  outline: none;
}
@media (max-width: 560px) {
  .stay-informed { padding: 64px 20px; }
  .stay-informed-card {
    width: 90%;
    padding: 36px 24px;
    border-radius: 14px;
  }
  .stay-informed-socials { gap: 18px; }
  .stay-informed-social { width: 48px; height: 48px; }
  .stay-informed-social svg { width: 20px; height: 20px; }
  .stay-informed-sub { font-size: 15px; }
}

/* Ancres invisibles : compensation du header sticky lors du scroll ciblé */
.anchor-offset {
  display: block;
  position: relative;
  top: -96px;
  visibility: hidden;
  height: 0;
  width: 0;
  pointer-events: none;
}

/* ───────────── Footer social icons (Instagram / Facebook / LinkedIn) ─────────────
   Toutes les règles sont en !important pour résister à toute media query mobile. */
.foot-socials,
.hv2-foot-socials {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 16px !important;
}
.foot-social,
.hv2-foot-social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 4px !important;
  box-sizing: content-box !important;
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.foot-social svg,
.hv2-foot-social svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  display: block !important;
  fill: currentColor;
}
.foot-social:hover,
.foot-social:focus-visible,
.hv2-foot-social:hover,
.hv2-foot-social:focus-visible {
  color: var(--neo-logo-green) !important;
  outline: none;
}

/* Liens utilitaires bas de footer (Mentions légales, CGV, etc.) */
.foot-bottom a,
.hv2-foot-bottom a {
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
  transition: color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.foot-bottom a:hover,
.foot-bottom a:focus-visible,
.hv2-foot-bottom a:hover,
.hv2-foot-bottom a:focus-visible {
  color: #ffffff !important;
  text-decoration: none !important;
  outline: none;
}

/* ───────────── Toggle Pro/Particuliers (header) ─────────────
   Au repos : wrapper invisible, texte blanc, pas de fond ni bordure
   Au hover/actif : rectangle pill jaune-vert avec texte bleu nuit */
.nav-tabs,
.hv2 .nav-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  width: fit-content;
  margin: 0 auto;
}
.nav-tab,
.hv2 .nav-tab {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: transparent;
  border: 0;
  padding: 10px 24px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.nav-tab:hover,
.nav-tab:focus-visible,
.nav-tab.is-active,
.hv2 .nav-tab:hover,
.hv2 .nav-tab:focus-visible,
.hv2 .nav-tab.is-active {
  background: var(--neo-lime);
  color: var(--neo-blue-night);
  outline: none;
}