/* ============================================================
   JET ATLAS — base.css  (v3.2 Luxe Cream Paper · no red)
   Encre noire en CTA primaire, lime micro-accent, or pour prestige.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ja-cream);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ja-cream);
  color: var(--ja-ink-soft);
  font-family: var(--ja-font-body);
  font-weight: 400;
  font-size: var(--ja-body-size);
  line-height: var(--ja-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

/* ---------- Lien base — souligné lime au survol ------------- */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ja-paper-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition:
    color var(--ja-duration-base) var(--ja-ease),
    text-decoration-color var(--ja-duration-base) var(--ja-ease);
}
a:hover {
  color: var(--ja-ink);
  text-decoration-color: var(--ja-lime);
  text-decoration-thickness: 2px;
}

/* ---------- Typographie ------------------------------------- */
h1, h2 {
  font-family: var(--ja-font-display);
  margin: 0 0 0.5em;
  color: var(--ja-ink);
}
h1 {
  font-weight: 500;
  font-size: var(--ja-h1);
  line-height: var(--ja-leading-display);
  letter-spacing: -0.015em;
}
h2 {
  font-weight: 500;
  font-size: var(--ja-h2);
  line-height: var(--ja-leading-h2);
  letter-spacing: -0.005em;
}
h3 {
  font-family: var(--ja-font-interface);
  font-weight: 500;
  font-size: var(--ja-h3);
  line-height: 1.3;
  letter-spacing: var(--ja-tracking-h3);
  margin: 0 0 0.6em;
  color: var(--ja-ink);
}
h4, h5, h6 {
  font-family: var(--ja-font-interface);
  font-weight: 600;
  margin: 0 0 0.6em;
  color: var(--ja-ink);
}

p {
  margin: 0 0 1em;
  color: var(--ja-ink-soft);
}

.ja-label {
  font-family: var(--ja-font-interface);
  font-weight: 600;
  font-size: var(--ja-label-size);
  letter-spacing: var(--ja-tracking-label);
  text-transform: uppercase;
  color: var(--ja-gold);
}

.ja-price {
  font-family: var(--ja-font-data);
  font-weight: 700;
  font-size: var(--ja-price-size);
  color: var(--ja-ink);
  letter-spacing: -0.01em;
}

/* ---------- Sélection / focus — lime brand ------------------ */
::selection {
  background: var(--ja-lime);
  color: var(--ja-ink);
}

:focus-visible {
  outline: 2px solid var(--ja-lime);
  outline-offset: 3px;
  border-radius: var(--ja-radius-sm);
}

/* ---------- A11y helper ------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important; top: 1rem; left: 1rem;
  width: auto; height: auto; clip: auto;
  padding: .5rem 1rem;
  background: var(--ja-paper);
  color: var(--ja-ink);
  border-radius: var(--ja-radius-md);
  box-shadow: var(--ja-shadow);
  z-index: 9999;
}

/* ---------- Container --------------------------------------- */
.ja-container {
  width: min(100% - 2 * var(--ja-gutter), var(--ja-container));
  margin-inline: auto;
}

.ja-section { padding-block: clamp(4rem, 8vw, 8rem); }

/* ============================================================
   LOGO — SVG mono inline ou PNG colorisé
   ============================================================ */
.ja-logo {
  display: inline-block;
  color: var(--ja-ink);
  transition:
    color var(--ja-duration-base) var(--ja-ease),
    filter var(--ja-duration-base) var(--ja-ease);
}
.ja-logo svg { width: auto; height: 100%; display: block; }
.ja-logo:hover {
  filter: drop-shadow(0 6px 18px rgba(10, 10, 10, 0.18));
}

/* ============================================================
   GLASSMORPHISM — light recipes
   ============================================================ */
.ja-glass {
  background: var(--ja-glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--ja-glass-border);
  border-radius: var(--ja-radius-lg);
  box-shadow: var(--ja-shadow);
  transition:
    transform var(--ja-duration-base) var(--ja-ease),
    border-color var(--ja-duration-base) var(--ja-ease),
    box-shadow var(--ja-duration-base) var(--ja-ease);
}
.ja-glass:hover {
  transform: translateY(-4px);
  border-color: var(--ja-glass-border-hover);
  box-shadow: var(--ja-shadow-lg);
}

.ja-paper {
  background: var(--ja-paper);
  border: 1px solid var(--ja-paper-line);
  border-radius: var(--ja-radius-lg);
  box-shadow: var(--ja-shadow-sm);
}

.ja-nav-glass {
  background: rgba(250, 246, 238, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--ja-paper-line);
}

/* ============================================================
   BOUTONS — Ink primaire, lime micro hover, gold prestige
   ============================================================ */
.ja-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--ja-font-interface);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--ja-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--ja-duration-base) var(--ja-ease),
    color      var(--ja-duration-base) var(--ja-ease),
    border-color var(--ja-duration-base) var(--ja-ease),
    transform  var(--ja-duration-base) var(--ja-ease),
    box-shadow var(--ja-duration-base) var(--ja-ease),
    filter     var(--ja-duration-base) var(--ja-ease);
}
.ja-btn:hover { transform: translateY(-2px); }
.ja-btn:active { transform: translateY(0); }

/* Primaire — ink (noir) avec halo lime au survol */
.ja-btn-ink {
  background: var(--ja-grad-ink);
  color: #fff;
  box-shadow: var(--ja-glow-ink);
}
.ja-btn-ink:hover {
  filter: brightness(1.15);
  box-shadow: var(--ja-glow-ink), var(--ja-lime-glow);
}

/* Secondaire — papier outline */
.ja-btn-ghost {
  background: var(--ja-paper);
  color: var(--ja-ink);
  border-color: var(--ja-paper-line-strong);
}
.ja-btn-ghost:hover {
  border-color: var(--ja-ink);
  box-shadow: var(--ja-lime-glow);
}

/* Prestige — or */
.ja-btn-gold {
  background: var(--ja-grad-sun);
  color: var(--ja-ink);
}
.ja-btn-gold:hover { box-shadow: var(--ja-glow-gold); }

/* ============================================================
   LIME ORB — micro pulse ambient
   ============================================================ */
.ja-lime-orb {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ja-lime);
  box-shadow:
    0 0 10px var(--ja-lime-soft),
    0 0 24px var(--ja-lime-soft);
}

/* ============================================================
   ÉTATS INITIAUX pour animations GSAP
   ============================================================ */
.ja-reveal,
.ja-hero-title,
.ja-card { will-change: transform, opacity; }

.js-ready .ja-reveal,
.js-ready .ja-card { opacity: 0; transform: translateY(40px); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-ready .ja-reveal,
  .js-ready .ja-card {
    opacity: 1; transform: none;
  }
}

/* ============================================================
   HEADER — compact height + logo cap + front-page overlay
   ------------------------------------------------------------
   1. Cap the header bar height and the logo so the header stays
      slim (the logo PNG is a tall circular badge otherwise).
   2. On the front page the first section is a full-bleed hero:
      keep the header in normal flow (so Elementor sticky still
      fires the glass on scroll, with NO glass at the top) and
      pull the page content up by the header height so the hero
      fills to the very top with the transparent header over it.
   ============================================================ */
:root { --ja-header-h: 74px; }
@media (max-width: 600px) { :root { --ja-header-h: 60px; } }

/* Fixed, transparent header overlaying content. Out of flow, so the
   front-page hero fills to the very top — no band, no gap. */
.elementor-location-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.elementor-location-header .e-con.e-parent {
  min-height: var(--ja-header-h) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  background: transparent !important;
}
.elementor-location-header .elementor-widget-image img {
  max-height: 46px !important;
  width: auto !important;
}
@media (max-width: 600px) {
  .elementor-location-header .elementor-widget-image img { max-height: 38px !important; }
}

/* Glass once scrolled (class added by nav-scroll.js at >60px). */
.elementor-location-header.is-scrolled {
  background: rgba(250, 246, 238, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(10, 10, 10, 0.08);
  box-shadow: 0 8px 24px -16px rgba(10, 10, 10, 0.12);
}
/* Fade the dark top scrim out once the glass is on. */
.elementor-location-header.is-scrolled .e-con.e-parent::before { opacity: 0 !important; }

/* Inner pages (no full-bleed hero) clear the fixed header. */
body:not(.ja-is-front) .elementor-location-header + [data-elementor-type="wp-page"] {
  padding-top: var(--ja-header-h);
}