/*
 * app-badges.css — the official store badges, one source for every page.
 *
 * WHY (2026-08-02): both apps went live (Android `vosa.learning.app`, iOS
 * id6792677963) and the marketing site never linked to either. This file is the
 * only place badge sizing lives, so the footer, the small "L'application"
 * section, the /app door and the welcome pages can never drift apart, and the
 * guichet homepage can inherit it by linking one stylesheet.
 *
 * ROUTING DOCTRINE (Paul, 2026-08-02): strangers still default to the WEB start
 * (one minute to value; a store download on Kinshasa mobile data before any
 * value is the exact drop the funnel autopsy measured). Nothing in this file
 * belongs above the fold, in an interstitial, or in a redirect. The badges are
 * the CONTINUE, plus a first-class door for people who arrive wanting an app.
 *
 * BRAND GUIDELINES, and how they are met here:
 *   Apple ("Download on the App Store", developer.apple.com/app-store/marketing/
 *   guidelines): artwork used unmodified, straight from Apple's own marketing
 *   tools; minimum on-screen size 40 px; clear space one quarter of the badge
 *   height. Never translate "App Store" and never build our own badge, so the
 *   FR and EN pages each get Apple's own localized artwork.
 *   Google Play ("DISPONIBLE SUR / GET IT ON Google Play"): official localized
 *   artwork, unmodified, clear space one quarter of the badge height.
 *   The smallest badge we can render anywhere is 40 px tall (about 134 px wide
 *   for Play, about 120 px for Apple), the floor built into --badge-size below,
 *   so no viewport can take us under either minimum.
 *
 * CLEAR SPACE is derived, not hand-typed: the gap between the two badges is
 * half a badge height (so each keeps its quarter) and the block reserves a
 * quarter above and below. Change --badge-h on a parent and the clear space
 * follows.
 *
 * The badge PNGs from Google ship with different baked-in margins per locale
 * (the EN one carries its clear space, the FR one does not), so both were
 * trimmed to the badge itself and the clear space is applied here instead.
 */

.appbadges {
  /* A page sets --badge-h. Everything below reads --badge-size, which is that
     height capped so two badges still fit a narrow phone, and floored at 40px
     so we never drop under Apple's stated minimum. Deriving it here rather than
     in a media query matters: a page rule like `.apps .appbadges { --badge-h }`
     outranks any `@media .appbadges` rule in this file, so a media query would
     silently lose and the badges would overflow the phone. */
  --badge-h: 48px;
  --badge-size: max(40px, min(var(--badge-h), 12.5vw));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--badge-size) * 0.5);
  padding: calc(var(--badge-size) * 0.25) 0;
  margin: 0;
}
.appbadges a {
  display: inline-flex;
  line-height: 0;
  border-radius: 9px;
  transition: transform var(--dur-fast) var(--ease);
}
.appbadges a:hover {
  transform: translateY(-2px);
}
.appbadges a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 5px;
}
.appbadges img {
  display: block;
  height: var(--badge-size);
  width: auto;
}