/* Phuc Labs — Visual foundations (V2.1A-1)
   Shared design tokens + hero system, extracted from the per-page inline
   <style> blocks that previously duplicated this CSS on every page.
   Loaded via <link rel="stylesheet" href="/assets/css/visual-foundations.css">
   on the legacy-copied header+hero routes migrated in this subphase.

   Scope: color tokens, the two hero variants (commercial / editorial),
   focus-visible affordances for nav-brand/lang-btn/menu-toggle, and a
   prefers-reduced-motion guard for the hero entrance animation.
   Page-specific CSS (pricing cards, testimonials, portfolio galleries,
   per-page hero size/padding overrides, mobile-menu JS, etc.) stays inline
   per page and is intentionally NOT duplicated here. */

:root{
  /* Color tokens (verbatim from production) */
  --bg:#0E1524;
  --bg2:#162033;
  --blue:#1A6FFF;
  --cyan:#37B6D9;
  --white:#E7ECF6;
  --muted:#9AA8C2;
  --border:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.05);
  --card2:rgba(255,255,255,.045);
  --shadow:0 24px 80px rgba(0,0,0,.42);

  /* Hero typography/spacing tokens (V2.1A-1) */
  --hero-h1-size:clamp(2.35rem,1.8rem + 2.4vw,3.85rem);
  --hero-h1-size-mobile:clamp(2.25rem,10vw,2.55rem);
  --hero-line-height:1.04;
  --hero-line-height-mobile:1.08;
  --hero-max-width-mobile:340px;
  --hero-pad:112px 40px 68px;
  --hero-pad-mobile:90px 20px 46px;

  /* Focus-visible token (V2.1A-1) */
  --focus-ring:2px solid var(--cyan);
  --focus-ring-offset:3px;

}

/* ---------------------------------------------------------------------
   Hero system — commercial variant
   Used on: homepage, Prestations/Services, all commercial offer pages,
   all IA pages. Ratified values below are reused verbatim from current
   production CSS (do not re-derive).
   The combined variant selectors deliberately outrank the route-local
   #hero/.hero-h1 rules loaded later in the document. Otherwise those stale
   declarations defeat the shared mobile max-width and typography tokens.
   --------------------------------------------------------------------- */
#hero.hero-commercial{
  min-height:84vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--hero-pad);
  overflow:hidden;
}
.hero-commercial .hero-h1{
  font-family:"Outfit",sans-serif;
  font-weight:800;
  font-size:var(--hero-h1-size);
  line-height:var(--hero-line-height);
  letter-spacing:.01em;
  margin-bottom:18px;
  animation:fadeUp .8s .15s ease both;
}
.hero-commercial .hero-h1 .ac{
  background:linear-gradient(130deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------------------------------------------------------------------
   Hero system — editorial variant
   Used on: À propos / About, Réalisations / Portfolio, the Guide,
   Ressources /articles/, and the merci/thank-you confirmation page.
   Looser line-height, narrower max-width, lighter vertical padding than
   the commercial hero (these are content pages, not full-viewport
   conversion moments). max-width:760px is a first pass, not yet
   pixel-perfect ratified — chosen to prevent overflow while staying
   visually balanced with the commercial hero scale.
   --------------------------------------------------------------------- */
.page-hero.hero-editorial{
  padding:96px 40px 56px;
  overflow:hidden;
}
.hero-editorial .hero-h1--editorial{
  font-family:"Outfit",sans-serif;
  font-weight:800;
  font-size:var(--hero-h1-size);
  line-height:1.1;
  letter-spacing:.01em;
  margin-bottom:18px;
  max-width:760px;
  animation:fadeUp .8s .15s ease both;
}
.hero-editorial .hero-h1--editorial .ac{
  background:linear-gradient(130deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

@media(max-width:900px){
  #hero.hero-commercial{
    min-height:auto;
    padding:var(--hero-pad-mobile);
  }
  .hero-commercial .hero-h1{
    font-size:var(--hero-h1-size-mobile);
    line-height:var(--hero-line-height-mobile);
    margin:0 auto 16px;
    width:100%;
    max-width:var(--hero-max-width-mobile);
    overflow-wrap:break-word;
  }
  .page-hero.hero-editorial{
    padding:80px 20px 40px;
  }
  .hero-editorial .hero-h1--editorial{
    font-size:var(--hero-h1-size-mobile);
    line-height:1.15;
    max-width:100%;
  }
}

/* ---------------------------------------------------------------------
   Focus-visible: keyboard navigation affordances (V2.1A-1)
   These selectors previously relied on browser-default focus rings only.
   --------------------------------------------------------------------- */
.nav-brand:focus-visible,
.lang-btn:focus-visible,
.menu-toggle:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}

/* ---------------------------------------------------------------------
   Reduced motion: neutralize the hero entrance animation only.
   Per-page IntersectionObserver scroll-reveal JS is out of scope here.
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .hero-commercial .hero-h1,
  .hero-editorial .hero-h1--editorial{
    animation:none;
  }
}