/*
  Hero B4 = B3 with the headline whole.
  « Votre fiche Google parle avant vous. » sits whole on top and never moves once it has risen. Below it, on the
  contour field, Anor's fiche floats in on the right and speaks, then his site rises from its « Site web » chip.
  Default CSS = the final static state: no JS and reduced motion get it as is.
  pre.js adds .intro on <html> before first paint when motion is allowed (start state hidden until main.js runs).
*/

body { background: var(--c-white); }

/* The canvas sits above the section grounds and under their content (as in C) */
.stage { position: relative; isolation: isolate; }
.topo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; display: block; pointer-events: none; }
.nav-in, .hero-in, .next-in { position: relative; z-index: 2; }
.hero { position: relative; overflow: clip; }

/* ---------- Nav: wordmark only on phone (the button is in the hero, then in .navfix) ---------- */
.nav { padding-top: env(safe-area-inset-top, 0px); }
.nav-in { padding-block: 14px; }
.wm { flex-direction: row; align-items: center; gap: 10px; }
.nav-cta { display: none; }

/* ---------- Headline, then the scene ---------- */
.hero-in { padding-block: 2px 40px; }
.title-grid {
  /* « Google parle », the widest phone line, is 5.9 em at wdth 78: the poster size always holds 3 lines */
  --fs: min(var(--t-poster), calc((100vw - 32px) / 6));
  display: grid; grid-template-columns: minmax(0, 1fr);
  row-gap: 18px;
}
.hero-h1 { grid-row: 1; margin: 0; font: 500 .8125rem/1.45 var(--f-text); color: var(--muted); text-wrap: balance; }
.hero-title { grid-row: 2; font-size: var(--fs); line-height: 1; hyphens: manual; text-wrap: wrap; position: relative; z-index: 1; }
.win { grid-row: 3; }
.hero-side { grid-row: 4; }

/* One mask per word, rising at load (the clip reaches past the glyphs, so nothing is cut at rest) */
.w { display: inline-block; clip-path: inset(-.3em -.2em -.28em -.2em); }
.wi { display: inline-block; }

/* ---------- The scene: no box, the field shows through, Anor's story stands on its hill ---------- */
.win { position: relative; margin: 8px 0 0; display: flex; align-items: center; }
.win-in { width: 100%; }

/* The composition always spans the content width (sized by width, not by the opening's height):
   the site on the left, the fiche on the right, overlapping. */
.story { position: relative; width: 100%; aspect-ratio: 343 / 170; }
.site { position: absolute; inset: 0; z-index: 1; }
.site img { position: absolute; height: auto; box-shadow: var(--shadow-float); background: var(--card); }
.st-d { left: 7%; top: 3%; width: 58%; border-radius: 10px; }
.st-m { left: 0; bottom: 0; width: 16.5%; border-radius: 9px; }
.is-motion .site img { will-change: transform, opacity; background: none; }

.fiche-pos { position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; width: clamp(198px, 57%, 330px); display: flex; align-items: center; }
.fiche-wrap { width: 100%; }
.fiche {
  border-radius: var(--r-3); padding: 11px 12px 12px;
  box-shadow: var(--shadow-float), 0 0 0 1px color-mix(in srgb, var(--surf-fg) 9%, transparent);
}
/* each line is its own mask (clipped vertically only, so nothing is ever cut sideways) */
.fl { margin: 0; overflow-x: visible; overflow-y: clip; font-size: .8125rem; line-height: 1.35; }
.fl-in { display: inline-block; }
.fl-name { font: normal 1rem/1.1 var(--f-display); font-variation-settings: var(--fv-heading); margin-bottom: 5px; text-wrap: balance; }
.fl:nth-child(2) { color: var(--surf-muted); }
.fl .acc { font-weight: 700; }
/* the 8 px padding (cancelled by negative margins) gives the link a 44 px tap area inside the line's mask */
.fl-chip { margin: 3px -8px -8px; padding: 8px; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 .7rem; border-radius: var(--r-2);
  border: 1.5px solid var(--surf-acc); color: var(--surf-acc); font-weight: 600; font-size: .8125rem; line-height: 1;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-ui-1) var(--ease-ui), color var(--dur-ui-1) var(--ease-ui);
}
.chip::after { content: ""; position: absolute; inset: -8px -6px; }
.chip:focus-visible { outline: 2px solid var(--surf-acc); outline-offset: 3px; }
/* the fiche « taps » its own button just before the site rises from it; hover does the same */
.chip.is-pressed, a.chip:hover { background: var(--surf-acc); color: var(--surf); }

.proof-cap { margin: 10px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--muted); max-width: 46ch; }

/* ---------- Button, link, subline ---------- */
.hero-side { display: flex; flex-direction: column; gap: 20px; margin-top: 4px; }
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; order: -1; }
.hero-btns .btn { padding-inline: 1.1rem; }
.hero-lnk { display: inline-flex; align-items: center; min-height: 44px; }
/* the Menthe that rises on hover always carries Nuit text, on every ground */
.ground .lnk:hover { color: var(--c-nuit); }
.hero-sub { max-width: 36ch; }
/* narrow phones: button and link stay on one row */
@media (max-width: 389.98px) {
  .hero-btns { gap: 8px 14px; }
  .hero-btns .btn { padding-inline: .875rem; }
  .hero-btns .arr { display: none; }
}

/* Start state before main.js runs (no flash of the final layout) */
.intro .wi { transform: translateY(110%); }
.intro .win { visibility: hidden; }
.intro [data-in] { opacity: 0; }

/* ---------- The nav button that comes back after the hero ---------- */
.navfix {
  position: fixed; z-index: 40;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); right: max(16px, env(safe-area-inset-right, 0px));
  opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-ui-2) var(--ease-ui), transform var(--dur-ui-2) var(--ease-ui), visibility 0s linear var(--dur-ui-2);
}
.navfix.is-on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* its 1.5 px border turns into a light hairline (white over the button's own Nuit): it keeps an edge over Nuit cards and
   black grounds, where Nuit on Nuit would vanish */
.navfix .btn-1 { background: var(--b1-bg); color: var(--b1-fg); box-shadow: var(--shadow-float); padding-inline: 1rem; border-color: color-mix(in srgb, var(--c-white) 36%, transparent); }
.navfix .btn-1:hover { background: var(--b1-hi); }
.navfix .btn-1:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Desktop: headline across the width, the opening beside the info column ---------- */
@media (min-width: 960px) {
  /* the page runs wider than --page-max here, so the headline can cross it; the next section follows */
  .page .wrap { max-width: none; padding-left: clamp(16px, 3.4vw, 64px); padding-right: clamp(16px, 3.4vw, 64px); }
  .nav-in { padding-block: 16px; }
  .nav-cta { display: inline-flex; padding-inline: 1rem; }
  .navfix { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); right: max(clamp(16px, 3.4vw, 64px), env(safe-area-inset-right, 0px)); }
  .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .hero-in { flex: 1; display: flex; flex-direction: column; width: 100%; padding-block: 4px 40px; }
  /* desktop: the story centred in the opening, generous, the caption aligned on it */
  .win-in { width: min(100%, calc((100svh - 2 * var(--fs) - 250px) * 2.2)); margin-inline: auto; }
  .story { aspect-ratio: 2.2; }
  .st-d { left: 6%; top: 4%; width: 60%; border-radius: var(--r-3); }
  .st-m { width: 15%; border-radius: 12px; }
  .fiche-pos { width: 37%; }
  .fiche { padding: 22px 24px 24px; }
  .fl { font-size: .9375rem; line-height: 1.45; }
  .fl-name { font-size: clamp(1.375rem, .6rem + 1.1vw, 1.75rem); margin-bottom: 8px; }
  .fl-chip { margin-top: 9px; }
  .chip { min-height: 36px; padding: 0 .95rem; font-size: .9375rem; }

  .title-grid {
    /* « Votre fiche Google » is 8.3 em: at the poster size the headline holds 2 lines; shorter screens shrink it */
    --fs: min(var(--t-poster), calc((100vw - 2 * clamp(16px, 3.4vw, 64px)) / 9.4), calc((100svh - 560px) / 2));
    flex: 1;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 420px);
    grid-template-rows: auto 1fr auto auto 1fr;
    column-gap: clamp(32px, 4vw, 72px); row-gap: 0;
  }
  .hero-title { grid-row: 1; grid-column: 1 / -1; margin-bottom: clamp(16px, 2.2vh, 28px); max-width: 11em; }
  .win { grid-row: 2 / 6; grid-column: 1; margin: 0; }
  .hero-h1 { grid-row: 3; grid-column: 2; margin: 0 0 18px; font-size: .9375rem; max-width: 34ch; }
  .hero-side { grid-row: 4; grid-column: 2; margin: 0; gap: 26px; }

  .hero-sub { font-size: clamp(1.0625rem, .6rem + .6vw, 1.25rem); line-height: 1.45; }
  .hero-btns { order: 0; gap: 12px 26px; }
  .hero-btns .btn { padding-inline: 1.25rem; }
  .proof-cap { font-size: .875rem; margin-top: 14px; max-width: none; }
}