@font-face {
  font-family: "Funnel Display";
  src: url("../fonts/funnel-display-var.woff2?v=2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Asap";
  src: url("../fonts/asap-var.woff2?v=2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --eau: #DCEBE4;
  --blanc: #FFFFFF;
  --encre: #10261B;
  --pin: #2F6036;
  --gris: #4C6155;
  --profond: #173D28;
  --carte-eau: #CFE3DD;
  --vase: #B9BFA6;
  --marge: clamp(16px, 4.5vw, 64px);
  --entete-h: 72px;
  --regle-h: 132px;
  --tete-depasse: 22px;
  --titre: "Funnel Display", "Arial Narrow", sans-serif;
  --texte: "Asap", "Segoe UI", sans-serif;
  --courbe: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 1023px) {
  :root { --entete-h: 64px; --regle-h: calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) {
  :root { --entete-h: 56px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  :root { --regle-h: calc(56px + env(safe-area-inset-bottom)); }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--eau);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding: calc(var(--entete-h) + var(--demobar-offset, 0px)) 0 calc(var(--regle-h) + var(--tete-depasse) + 16px);
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--eau);
  color: var(--encre);
  font: 400 17px/1.45 var(--texte);
  padding-bottom: var(--regle-h);
  overflow-x: clip;
}
h1, h2, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.chiffres, time { font-variant-numeric: tabular-nums; }

.evitement {
  position: fixed; z-index: 100;
  top: calc(var(--demobar-offset, 0px) + 8px); left: max(8px, env(safe-area-inset-left));
  min-height: 44px; padding: 12px 18px;
  background: var(--encre); color: #fff; font-weight: 600; text-decoration: none;
  transform: translateY(calc(-100% - 60px));
}
.evitement:focus { transform: none; outline: 2px solid #fff; outline-offset: -4px; }

.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 96px; pointer-events: none; }

.scene {
  position: relative;
  min-height: calc(100svh - var(--entete-h) - var(--regle-h));
}

.tendance { width: 12px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--courbe); }
.tendance.descend { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}