/* betterweather.cc home pages (quick 261106-ev0), sketch 092 option B.
 *
 * One stylesheet for / and /fr/. No script runs on these pages, so the hero geometry that the
 * sketch measured in script (sizeHero) is written here in container units: .hero is an
 * inline-size container, and everything below sizes from its width w. The vw declaration before
 * each cqw one is the fallback for a browser without container units.
 *
 * The landscape is a 30 second loop of the app's own scene painter. Its last tree trunk sits at
 * row 1341 of the 2560 px wide desktop still and row 1701 of the 804 px wide phone still; the
 * fade starts just under that line so the meadow never fades. Design is dark only, as B was.
 */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0e2025;
  --ink: #f3f7f7;
  --soft: #c8d6d8;
  --fine: #9fb6ba;
  --teal: #0b6e77;
  --teal-2: #33b3be;
  /* The dot colours the app draws on its dark theme (lib/src/theme/app_theme.dart, ConfidenceColors). */
  --ok: #40bf87;
  --mid: #efb84a;
  /* Safari 26 on iOS ignores theme-color and tints the status bar with the page background, while
     the sky under it changes colour through the 30 second loop. So the top of every landscape
     starts at the page colour and eases into the sky over --fade-h. One property holds the
     gradient, so the home hero (.sky::after) and the long-text strip (.top) cannot drift apart. */
  --fade-h: 120px;
  --top-fade: linear-gradient(180deg, var(--bg) 0%, rgba(14, 32, 37, 0.82) 25%,
    rgba(14, 32, 37, 0.45) 55%, rgba(14, 32, 37, 0.15) 82%, rgba(14, 32, 37, 0) 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Figtree", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
img { display: block; max-width: 100%; height: auto; }
a:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
/* With viewport-fit=cover the page runs under the notch in landscape, so the backgrounds (sky,
   teal band, strip) go edge to edge and the text keeps max(its gutter, the inset) from the notch.
   Where the inset is 0 (every browser but a notched iPhone in landscape) this changes nothing.
   The longhands come after the shorthand, so the plain padding stays as the fallback. */
.wrap {
  padding-left: max(40px, env(safe-area-inset-left));
  padding-right: max(40px, env(safe-area-inset-right));
}

/* ---------- nav ---------- */
.nav { display: flex; align-items: center; gap: 18px; padding: 18px 0; color: #fff; }
/* A notched iPhone in portrait reports a top inset: the nav must not sit under the status bar. */
.nav { padding-top: max(18px, env(safe-area-inset-top)); }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 19px; letter-spacing: -0.01em;
  text-decoration: none; color: inherit;
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav .links { margin-left: auto; display: flex; gap: 18px; font-size: 15px; font-weight: 500; }
.nav a { color: inherit; text-decoration: none; opacity: 0.85; }
.nav a:hover { opacity: 1; text-decoration: underline; }

/* ---------- hero: the animated landscape behind the text ---------- */
.hero { container-type: inline-size; background: var(--bg); }
.sky {
  position: relative;
  overflow: hidden;
  background: var(--bg) url(/assets/scene-1280.png) 0 0 / 100% auto no-repeat;
  /* trunk line (1341/2560 of w) + 6 + the 90 px fade */
  min-height: calc(52.3828vw + 96px);
  min-height: calc(52.3828cqw + 96px);
}
.sky > .wrap, .sky > .herotext { position: relative; z-index: 2; }

/* The top fade: above the video (0), below the nav and the text (2). It is ::after, not ::before,
   on purpose: as ::before the phones' shadows below it rounded a few pixels differently (by up to
   2 in 255, measured), as ::after nothing below the fade moves by a single pixel. */
.sky::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: var(--fade-h); background: var(--top-fade);
  z-index: 1; pointer-events: none;
}
.band {
  position: absolute; left: 0; top: 0;
  width: 100%; height: auto;
  aspect-ratio: 2560 / 1762;
  /* The video file is chosen once, when the page loads. A phone or a window turned afterwards keeps
     the other file in the new box, so the video must cover its box and never sit letterboxed in it.
     At equal aspect (a freshly loaded page) cover changes nothing. 84.8% puts row 1701 of the phone
     file, its last tree trunk, on the line the wide layout expects (1341/2560 of the width). */
  object-fit: cover;
  object-position: 50% 84.8%;
  image-rendering: pixelated;
  z-index: 0;
}
/* iOS Low Power Mode blocks autoplay and would draw a start button over the landscape. */
.band::-webkit-media-controls { display: none !important; }
.band::-webkit-media-controls-panel { display: none !important; }
.band::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.bandfade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, rgba(14, 32, 37, 0), var(--bg));
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) { .band { display: none; } }

/* The bottom padding is the fade zone the phone row climbs into (margin-top below), so the row
   never lands on the text when the text is taller than the landscape (a tablet width). */
.herotext { text-align: center; padding-top: 30px; padding-bottom: 96px; }
h1 {
  font-size: 72px; line-height: 1; letter-spacing: -0.03em; margin: 0 0 18px; font-weight: 800;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}
.lede {
  font-size: 21px; line-height: 1.5; max-width: 32em; margin: 0 auto 26px;
  text-shadow: 0 1px 14px rgba(10, 30, 40, 0.35);
}
/* Before launch the store line is plain information, not a button (owner 2026-11-06): no box,
   no link, no pointer, no Apple logo. At launch it is replaced by Apple's official badge. */
.store-soon {
  display: block; margin: 0 auto;
  font-size: 18px; font-weight: 600; line-height: 1.4;
  text-shadow: 0 1px 14px rgba(10, 30, 40, 0.35);
}
.price {
  font-size: 14px; line-height: 1.5; color: #fff; max-width: 36em; margin: 12px auto 0;
  text-shadow: 0 1px 10px rgba(10, 30, 40, 0.55);
}

/* ---------- the ground: three phones standing on the landscape ---------- */
.ground { position: relative; z-index: 2; display: flow-root; }
.phones {
  display: flex; justify-content: center; align-items: flex-end; gap: 28px;
  margin-top: -96px; padding-bottom: 40px;
}
.phone {
  width: 250px; min-width: 0; border-radius: 40px; padding: 9px;
  background: #0d1416; box-shadow: 0 30px 50px rgba(0, 0, 0, 0.35);
}
.phone:nth-child(2) { width: 270px; }
.phone img { border-radius: 32px; width: 100%; }

/* ---------- sections ---------- */
section { padding: 64px 0; }
h2 { font-size: 38px; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 800; line-height: 1.12; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.split p { font-size: 19px; line-height: 1.55; color: var(--soft); margin: 0 0 14px; }
.split p.fine { font-size: 14px; color: var(--fine); }
.legend { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.legend .row { display: flex; gap: 12px; align-items: flex-start; }
.dot { flex: none; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; }
.dot.ok { background: var(--ok); }
.dot.mid { background: var(--mid); }

.tealband { background: var(--teal); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.tile {
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px; padding: 20px;
}
.tile h3 { margin: 0 0 6px; font-size: 18px; }
.tile p { margin: 0; color: #d8e6e8; font-size: 15px; line-height: 1.45; }

.cta { text-align: center; }
.cta h2 { margin-bottom: 22px; }

footer { padding: 36px 0 44px; font-size: 14px; color: var(--fine); }
footer .row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
footer a { color: inherit; }

/* ---------- phone width: the tall 804 px landscape, lifted so the phone rises out of the scene ---------- */
@media (max-width: 700px) {
  .wrap {
    padding: 0 20px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .nav .links .hide-s { display: none; }
  .sky {
    background-image: url(/assets/scene-402.png);
    background-position: 0 calc(-36vw - 40px);
    background-position: 0 calc(-36cqw - 40px);
    /* trunk line (1701/804 of w, less the 0.36w lift and 40 px) + 6 + the 70 px fade */
    min-height: calc(175.5672vw + 36px);
    min-height: calc(175.5672cqw + 36px);
  }
  .band {
    top: calc(-36vw - 40px);
    top: calc(-36cqw - 40px);
    aspect-ratio: 804 / 2062;
  }
  .bandfade { height: 70px; }
  .herotext { padding-top: 18px; padding-bottom: 76px; }
  h1 { font-size: 46px; margin-bottom: 14px; }
  .lede { font-size: 17px; margin-bottom: 20px; }
  .store-soon { font-size: 16px; }
  .phones { margin-top: -76px; padding-bottom: 28px; }
  .phone:nth-child(1), .phone:nth-child(3) { display: none; }
  .phone:nth-child(2) { width: 250px; }
  .split, .tiles { grid-template-columns: 1fr; }
  section { padding: 48px 0; }
  h2 { font-size: 32px; }
}

#how, #comment-ca-marche { scroll-margin-top: 24px; }

/* ---------- long-text pages: privacy policy and support (quick 261106-uar) ----------
 *
 * These four pages (/privacy, /fr/confidentialite, /support, /fr/soutien) carry the home pages'
 * nav and footer on a short, still strip of the landscape, and a readable column for the text.
 * Everything here starts with .top or .prose, so the home pages are untouched.
 *
 * The strip shows the same still as the home hero, cut so that it ends 6 px under the last tree
 * trunk (row 1341 of the 2560 px desktop still, row 1701 of the 804 px phone still) and then
 * runs 60 px of flat meadow that fades into the page. The meadow itself never fades.
 * Strip height H = visible part + 60 px of fade. Offset = H - trunk line - 6 px - 60 px.
 */
.top {
  height: calc(19vw + 160px);
  background:
    var(--top-fade) 0 0 / 100% var(--fade-h) no-repeat,
    linear-gradient(180deg, rgba(14, 32, 37, 0), var(--bg)) 0 100% / 100% 60px no-repeat,
    url(/assets/scene-1280.png) 0 calc(-33.3828vw + 94px) / 100% auto no-repeat var(--bg);
}
.top .nav a[aria-current="page"] {
  opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}

/* The reading column sits in the middle of the page; tables may grow past it on a wide screen. */
.prose {
  max-width: 720px; margin: 0 auto;
  font-size: 17px; line-height: 1.65; color: var(--soft);
  overflow-wrap: break-word;
  padding-bottom: 56px;
}
.prose h1 {
  font-size: 48px; font-weight: 800; line-height: 1.06; letter-spacing: -0.025em;
  color: var(--ink); text-shadow: none; margin: 8px 0 18px;
}
/* The first line under the title: the policy's date reads as a small note, the support page's
   opening sentence reads as an introduction. */
.prose h1 + p { font-size: 20px; line-height: 1.5; color: var(--ink); margin-bottom: 18px; }
.prose h1 + p:has(> strong:first-child) { font-size: 14px; color: var(--fine); letter-spacing: 0.01em; }
.prose h1 + p:has(> strong:first-child) strong { color: var(--fine); font-weight: 600; }
.prose h1 + p:has(> strong:first-child) + p { font-size: 20px; line-height: 1.5; color: var(--ink); }
/* Each section opens under a hairline, so a long page reads as distinct parts. */
.prose h2 {
  font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink); margin: 40px 0 14px; padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  scroll-margin-top: 16px;
}
.prose h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); margin: 30px 0 8px; }
.prose p { margin: 0 0 15px; }
.prose ul { margin: 0 0 15px; padding-left: 1.3em; }
.prose li { margin: 6px 0; padding-left: 4px; }
.prose li::marker { color: var(--teal-2); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--teal-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { color: var(--ink); }
/* The policy's summary list (the first section) stands in a teal card. */
.prose h2:first-of-type + ul {
  margin: 18px 0 8px; padding: 18px 24px 18px 46px;
  background: rgba(11, 110, 119, 0.2); border: 1px solid rgba(51, 179, 190, 0.28);
  border-radius: 18px; color: var(--ink);
}

/* Policy tables. On a wide screen: a boxed table wider than the text column. Narrower: one card
   per row, the first cell as the card's title and every other cell under its column name.
   Four columns squeezed into the text column made rows screens tall. The labels repeat the <th>
   text of each policy table in both languages: a column added to a table needs its label here. */
.prose table { font-size: 15px; line-height: 1.5; margin: 22px 0 26px; color: var(--soft); }
.prose th { text-align: left; }
@media (min-width: 1180px) {
  .prose table {
    width: 1040px; margin-left: -160px;
    border-collapse: separate; border-spacing: 0;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px; overflow: hidden;
  }
  .prose th {
    background: rgba(255, 255, 255, 0.06); color: var(--teal-2);
    font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 14px 18px;
  }
  .prose td {
    vertical-align: top; padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .prose th:first-child { width: 24%; }
  .prose th:nth-child(2) { width: 21%; }
  .prose td:first-child { color: var(--ink); }
}
@media (max-width: 1179px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; }
  .prose thead { display: none; }
  .prose tr {
    margin: 0 0 10px; padding: 14px 18px 12px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
  }
  .prose td { padding: 0; }
  .prose td:first-child { color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.4; }
  .prose td:first-child strong { font-weight: 700; }
  .prose td + td { padding-top: 8px; }
  .prose td + td::before {
    display: block; color: var(--teal-2);
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  }
  .prose table:first-of-type td:nth-child(2)::before { content: "What it receives"; }
  .prose table:first-of-type td:nth-child(3)::before { content: "Why"; }
  .prose table:first-of-type td:nth-child(4)::before { content: "Where"; }
  .prose table:last-of-type td:nth-child(2)::before { content: "How precise"; }
  .prose table:last-of-type td:nth-child(3)::before { content: "How long"; }
  :lang(fr) .prose table:first-of-type td:nth-child(2)::before { content: "Ce qu'il reçoit"; }
  :lang(fr) .prose table:first-of-type td:nth-child(3)::before { content: "Pourquoi"; }
  :lang(fr) .prose table:first-of-type td:nth-child(4)::before { content: "Où"; }
  :lang(fr) .prose table:last-of-type td:nth-child(2)::before { content: "Quelle précision"; }
  :lang(fr) .prose table:last-of-type td:nth-child(3)::before { content: "Combien de temps"; }
}

.top ~ .wrap footer { border-top: 1px solid rgba(255, 255, 255, 0.1); }

@media (max-width: 700px) {
  .top {
    height: calc(40vw + 240px);
    background:
      var(--top-fade) 0 0 / 100% var(--fade-h) no-repeat,
      linear-gradient(180deg, rgba(14, 32, 37, 0), var(--bg)) 0 100% / 100% 60px no-repeat,
      url(/assets/scene-402.png) 0 calc(-171.5672vw + 174px) / 100% auto no-repeat var(--bg);
  }
  .prose { font-size: 16px; line-height: 1.6; }
  .prose h1 { font-size: 36px; }
  .prose h1 + p, .prose h1 + p:has(> strong:first-child) + p { font-size: 18px; }
  .prose h2 { font-size: 24px; margin-top: 36px; padding-top: 28px; }
  .prose h3 { font-size: 18px; }
  .prose h2:first-of-type + ul { padding: 14px 16px 14px 36px; }
  .prose tr { padding: 12px 14px 10px; }
}

@media print {
  html, body { background: #fff; color: #000; }
  .top { height: auto; background: none; }
  .top .nav, .top .nav a, footer, footer a { color: #000; opacity: 1; }
  .prose, .prose h1, .prose h2, .prose h3, .prose strong, .prose a { color: #000; }
  .prose th, .prose td, .prose tr, .prose h2 { border-color: #999; }
}