/* Ma Récré — public one-pager (anonymous visitor state of web/index.php).
   Distinct register from main.css on purpose: this page speaks to parents
   who haven't logged in yet, not to a family already on the app.
   See docs/marketing/brief_page_accueil_ma_recre.md for the brief behind
   every section below. */

:root {
  --char-jade: #3fa66a;    /* jeux */
  --char-alice: #4fb0e0;   /* apprendre */
  --char-gabriel: #f2b705; /* grandir */
  --char-remi: #ef6f5b;    /* réussir */
  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI Rounded", "Comic Sans MS", sans-serif;
  --font-body: Georgia, "Times New Roman", serif;
}

.landing {
  font-family: var(--font-body);
}

/* 100vw (used by .landing-menu's full-bleed breakout below) is measured
   without the vertical scrollbar's own width, which this long page always
   has — without clipping, that reappears as a few px of horizontal scroll.
   Safe unscoped: this stylesheet only loads on the landing page (see
   web/index.php). */
body {
  overflow-x: hidden;
}

.landing h1,
.landing h2,
.landing .landing-step-title,
.landing .landing-big {
  font-family: var(--font-display);
}

.landing section {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px;
  text-align: center;
}

.landing section + section {
  border-top: 1px solid var(--color-border);
}

/* Intro (description + tagline) — .landing-description reuses .section-title
   (same Baloo 2 heading style as every other section) rather than a one-off
   bold treatment in the body serif, which read as a mismatched font. */

.landing-description {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin-top: 0;
  margin-bottom: 8px;
}

.landing-tagline {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin: 0;
}

.landing-family-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.landing-family-row img {
  height: 130px;
  width: auto;
}

/* Phone: force the 4 kids onto one line — at this height (with plenty of
   gap still) 4 of them fit a 360px-wide screen with room to spare, no
   overlap needed. */
@media (max-width: 480px) {
  .landing-family-row {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .landing-family-row img {
    height: 110px;
  }
}

/* §1 Promesse */

/* Ratio visual — exercice -> étoile -> jeu, in miniature, above the title
   (docs/marketing/brief_visuels_manquants_accueil.md Item 1). Reuses
   existing icons (subject/star/game) rather than a new pictogram. */
.ratio-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.ratio-visual img {
  height: 48px;
  width: auto;
}

.ratio-arrow {
  color: var(--color-text-muted);
  font-size: 1.3rem;
}

.landing-hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--color-primary-dark);
  margin: 0 0 12px;
}

.landing-hero p {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* §2 Boucle exercice -> étoile -> jeu */

.landing-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.landing-step {
  flex: 1 1 200px;
  max-width: 220px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px 18px;
  box-shadow: 0 2px 0 var(--color-border);
}

.landing-step-scene {
  height: 160px;
  width: auto;
  margin: 0 auto 12px;
  display: block;
}

.landing-step-title {
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  margin: 0 0 6px;
}

.landing-step-text {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* §3 Pédagogie — character-accent header (still a plain schoolkid portrait,
   see landing_char_img()) */

.landing-char {
  height: 140px;
  width: auto;
  margin: 0 auto 16px;
  display: block;
}

/* Composited "lp_" and "promesse_" scenes (docs/art/characters/lp/, see
   fiche_cc_integration_habillage_accueil.md) — §5 Jeux, §6 Suivi parental,
   §8 Parrainage, §9 Tarif. Taller than .landing-char since these are full
   scenes (sticker/prop included), not a plain standing portrait. */
.landing-scene {
  height: 220px;
  width: auto;
  margin: 0 auto 16px;
  display: block;
}

/* §9 Tarif — the star sticker sits over lp_accueil.png via CSS instead of
   being pixel-composited into the file: composited, its right edge landed
   past the source canvas's own width and got silently clipped. As a CSS
   overlay it can overflow the wrap freely instead. Position matches where
   the composited version sat before it was reverted: above Alice's
   outstretched hand, scaled from that same pixel spot on the 387x712
   source (0.309 = .landing-scene's 220px display height / 712). */
.landing-scene-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto 16px;
}

.landing-scene-wrap .landing-scene {
  margin: 0;
}

.landing-scene-sticker {
  position: absolute;
  top: 29px;
  left: 81px;
  height: 38px;
  width: auto;
}

/* §6 Suivi parental — the "résultat" tablet/hand image, deliberately
   smaller and after Gabriel in the flow: parent-in-retrait, never the same
   scale/plane as the child illustration above it. */
.landing-control-result {
  height: 70px;
  width: auto;
  margin: 20px auto 0;
  display: block;
}

.landing-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.landing-stat {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: 0.95rem;
}

/* One child at a time (server-picked at random, see $evolutionCharacter) in
   schoolkid costume, shown across the 3 style tranches (a/a_prime/b) side
   by side — illustrates "le style graphique évolue avec l'âge de
   l'enfant". web/assets/js/home.js cross-fades to the next child every few
   seconds (skipped under prefers-reduced-motion — the initial trio just
   stays put, no swap). */
.landing-evolution-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.landing-evolution-row img {
  height: 130px;
  width: auto;
  transition: opacity 0.7s ease;
}

/* Each tranche a bit taller than the last (A -> A' -> B), so the growth
   itself hints at the child getting older, not just the art style. */
.landing-evolution-row img:nth-child(2) {
  height: 140px;
}

.landing-evolution-row img:nth-child(3) {
  height: 150px;
}

.landing-evolution-row.is-fading img {
  opacity: 0;
}

.landing-bullets {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 12px;
  text-align: left;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.landing-bullets li {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 1rem;
}

/* §4 Preuve produit — image carousel (docs/art/screens/carousel_*.png,
   real exercise mockups, not redrawn icons). Slides vary in aspect ratio,
   so the frame is a fixed height with each slide letterboxed via
   object-fit: contain rather than cropped. */

.landing-carousel {
  position: relative;
  max-width: 640px;
  margin: 24px auto 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 0 var(--color-border);
  overflow: hidden;
}

.landing-carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.landing-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 380px;
  object-fit: contain;
  display: block;
  background: var(--color-surface);
}

.landing-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-primary-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.landing-carousel-prev {
  left: 12px;
}

.landing-carousel-next {
  right: 12px;
}

.landing-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 16px;
}

.landing-carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
}

.landing-carousel-dots button[aria-current="true"] {
  background: var(--color-primary);
}

/* §3/§7/§8 pictogram accents (docs/art/UI, docs/marketing/brief_visuels_manquants_accueil.md) */

.landing-icon {
  height: 64px;
  width: auto;
  margin: 0 auto 16px;
  display: block;
}

/* §7 Confiance / données */

.landing-trust {
  background: var(--color-primary-dark);
  color: #fdf6e9;
}

/* The shield icon is navy on transparent — invisible on this section's own
   navy background without forcing it to white first. */
.landing-trust .landing-icon {
  filter: brightness(0) invert(1);
}

.landing-trust .section-title {
  color: #fdf6e9;
}

.landing-trust p {
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto;
}

/* §8 Parrainage */

.landing-referral p {
  font-size: 1.1rem;
  max-width: 520px;
  margin: 0 auto;
}

/* §9 Accès / tarif */

.landing-pricing {
  padding-bottom: 72px;
}

.landing-pricing p {
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  max-width: 480px;
  margin: 0 auto 24px;
}

/* Menu CTA row (shared with app top-bar via .top-bar / .btn in main.css) */

/* Full-bleed breakout: the header needs more width than .page's 960px cap
   to fit the logo, the anchor nav and the buttons on one row — everything
   else on the page stays within that cap, just this row spans the
   viewport. The logo/nav/buttons stay clustered together in the center
   (justify-content: center, no flex-grow on .landing-nav below) rather
   than spread out to the row's own far edges. */
.landing-menu {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Flat 24px gutter (matching .page's own), not aligned to .page's 960px
     column — the whole point of the breakout is the *extra* width beyond
     that column, to fit the logo/nav/buttons on one row. */
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  justify-content: center;
  gap: 28px;
}

/* Header logo: 2x its normal size at the top of the page, shrinking down to
   normal (--logo-scale: 1, set by web/assets/js/home.js as the visitor
   scrolls the first 160px) while the header stays pinned via .landing-menu
   above — a shrinking sticky header. --logo-scale defaults to 2 (its value
   before home.js's first paint) so there's no flash of the small size. */
.landing-menu .app-title img {
  height: calc(var(--logo-scale, 2) * 56px);
  transition: height 0.08s linear;
}

/* Tighter than .btn-sm — the header only has so much room to fit the logo,
   the anchor nav and these buttons on one row. */
.landing-menu .top-bar-links {
  gap: 8px;
}

.landing-menu .top-bar-links .btn {
  min-height: 30px;
  padding: 4px 14px;
  font-size: 0.85rem;
  border-width: 7px;
  border-image-width: 7px;
}

/* Anchor nav — same row as the logo and the login/signup buttons (so it
   stays visible via the sticky header above), sized to its own content
   (not flex-grow) so the whole cluster stays tight instead of spreading
   the logo/buttons out to the row's edges. */

.landing-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--font-display);
}

.landing-nav a {
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.landing-nav a:hover {
  text-decoration: underline;
}

/* Phone: only the logo stays put while scrolling — the anchors and buttons
   scroll away with the rest of the page. .landing-menu itself stops being
   the sticky element (position: static, so nav/buttons are ordinary
   in-flow content); the logo instead gets position: fixed, which pins it
   to the viewport regardless of any ancestor's scroll/height, unlike
   position: sticky on a short flex row (which can only stay stuck for as
   long as that short row itself is still on screen) — that mismatch, not
   the shrink-on-scroll animation itself, was what let the logo end up half
   tucked under the mobile browser's own address bar. The logo still starts
   large and shrinks with scroll exactly like desktop (same --logo-scale
   var, untouched here); padding-top is sized for its largest (2x) state so
   nothing sits hidden behind it before that first shrink. */
@media (max-width: 600px) {
  .landing-menu {
    position: static;
    padding-top: 150px;
  }

  .landing-menu .app-title {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    padding: 10px 16px;
    background: var(--color-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }
}