/* findyourhome.lv — feuille de la page publique
 *
 * MONDE : l'imprimé du kiosque d'État (seed f7cf6e2f).
 * Tout sort du même bureau : trois encres sur carton gris, une grille de
 * cellules, un filet d'encre là où un autre site mettrait une ombre.
 *
 * Les cinq lois, tenues partout dans ce fichier :
 *   1. Trois encres. Rouge = ce sur quoi on agit et ce qui vient d'arriver.
 *      Bleu = ce qui informe et ce qui structure. Noir = le texte. Pas de vert,
 *      pas de quatrième encre, pas de dégradé.
 *   2. La cellule active prend l'encre rouge. C'est la seule façon dont une
 *      chose se dit « choisie » — jamais une ombre, jamais un halo.
 *   3. Angle droit partout. Aucun rayon, aucune ombre portée, rien qui flotte.
 *   4. Aucune photographie. Ce qu'on montre d'une annonce, ce sont ses données.
 *   5. Le seul mouvement est le décalage de repérage : 1 px d'encre qui glisse
 *      quand une cellule s'active, comme une planche mal calée sur la presse.
 */

@import url("tokens.css");

/* ── Socle ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;              /* jamais `hidden` : casserait position: sticky */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  overflow-x: clip;
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Le grotesque étroit ne sert qu'à crier : titres, chiffres, libellés de
   boutons. Il est toujours en capitales, toujours serré. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.002em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--color-second);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  transition: color var(--dur-short) var(--ease-out);
}
a:hover { color: var(--color-accent); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.rule       { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: 0; }
.rule--firm { border-top-width: var(--rule-firm); border-color: var(--color-rule-firm); }

/* Chiffres tabulaires partout où une colonne doit s'aligner à l'œil. */
.figure-num {
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

/* La barre de sections recouvre le haut de la fenêtre : sans cette marge, un
   lien d'ancre déposerait le titre visé DERRIÈRE elle. */
#try, #how, #pricing, #faq, #signup { scroll-margin-top: 5.5rem; }

/* L'étiquette du kiosque : petites capitales espacées, à la machine à écrire.
   Elle nomme une donnée ou une cellule — jamais un titre, un titre porte son
   propre poids. */
.label {
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-second);
}

/* ── Ouverture de section ────────────────────────────────────────────────
   Un bandeau d'encre noire pleine largeur du bloc, le titre posé dessous.
   Même geste à chaque section : c'est le repère qui remplace les intertitres. */

.section-head {
  padding-top: var(--space-md);
  border-top: var(--rule-slab) solid var(--color-ink-strong);
  margin-bottom: var(--space-2xl);
}
.section-head__title {
  font-size: var(--text-2xl);
  max-width: 22ch;
  color: var(--color-ink-strong);
}
.section-head__deck {
  margin-top: var(--space-sm);
  max-width: 52ch;
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--color-muted);
}

/* ── Boutons ─────────────────────────────────────────────────────────────
   Le bouton du kiosque : un aplat d'encre, sa marque à gauche, sa flèche à
   droite. Rien n'est arrondi, rien ne porte d'ombre. Appuyé, l'encre glisse
   d'un pixel — le décalage de repérage. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-firm) solid var(--color-accent-field);
  border-radius: 0;
  background: var(--color-accent-field);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.btn:hover, .btn.is-hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-ink);
}
.btn:active, .btn.is-active { transform: translate(1px, 1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  background-color: var(--color-paper-3);
  border-color: var(--color-rule);
  color: var(--color-neutral);
  cursor: not-allowed;
  transform: none;
}
.btn[data-state="loading"] { background: var(--color-neutral); border-color: var(--color-neutral); cursor: progress; }
.btn[data-state="error"]   { background: var(--color-negative); border-color: var(--color-negative); }
.btn[data-state="success"] { background: var(--color-second-field); border-color: var(--color-second-field); }

.btn--big {
  min-height: 3.75rem;
  padding-inline: var(--space-xl);
  font-size: var(--text-md);
}
.btn__arrow { width: 1.35em; height: 1.35em; flex: none; }

/* Bouton secondaire : le trait d'encre bleue, pas l'aplat. */
.btn--ghost {
  background: transparent;
  color: var(--color-second);
  border-color: var(--color-second);
}
.btn--ghost:hover, .btn--ghost.is-hover {
  background: var(--color-second);
  color: var(--color-accent-ink);
  border-color: var(--color-second);
}

.btn--link {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-second);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  cursor: pointer;
}
.btn--link:hover { color: var(--color-accent); }

/* ── L'enseigne ──────────────────────────────────────────────────────────
   Un aplat d'encre bleue en travers de la page, la marque et le nom dedans.
   C'est le panneau du kiosque : on sait chez qui on est avant d'avoir lu. */

.masthead {
  background: var(--color-accent-field);
  color: var(--color-accent-ink);
  padding-block: var(--space-md);
  border-bottom: var(--rule-slab) solid var(--color-accent-field);
}
.masthead .page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}
.masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  text-decoration: none;
}
.masthead__brand:hover { color: var(--color-accent-ink); }
.brandmark { width: auto; height: 1.7em; flex: none; display: block; }
.dot { color: currentColor; opacity: 0.5; }
.masthead__issue {
  margin-left: auto;
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  opacity: 0.85;
}

/* La barre est SŒUR de l'enseigne, jamais son enfant : un élément collant est
   borné par son parent, et un en-tête qui s'arrête juste dessous emporterait
   la barre au premier défilement. */
.masthead__bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-paper-2);
  border-bottom: var(--rule-firm) solid var(--color-ink-strong);
}
.masthead__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
  min-height: 3.5rem;
}

/* Les langues sont trois cellules accolées. L'active prend l'encre rouge —
   c'est la loi de la cellule active, tenue jusqu'ici. */
.langs { display: flex; align-self: center; border: var(--rule-firm) solid var(--color-ink-strong); }
.lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.5rem;
  padding: var(--space-2xs) var(--space-xs);
  border: 0;
  border-inline-end: var(--rule-hair) solid var(--color-ink-strong);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.lang:last-child { border-inline-end: 0; }
.lang:hover { background-color: var(--color-paper-3); }
.lang[aria-pressed="true"] {
  background: var(--color-accent-field);
  color: var(--color-accent-ink);
}
/* AUCUN CADRE. Le drapeau portait un filet translucide `rgba(0,0,0,.25)` : sur
   du papier il se lisait comme un halo gris mal détouré, et sur la cellule
   carmin il tournait à la bavure. Un vrai filet d'encre a été essayé — à
   20×10px il étrangle le dessin, 1px lui mange un cinquième de la hauteur et
   le drapeau britannique devient une tache. Le drapeau est donc posé nu ; la
   bande blanche du drapeau russe se confond avec le papier, et c'est le prix
   à payer, assumé : le code de langue est écrit juste à côté. */
.flag { width: 1.25rem; height: 0.625rem; flex: none; }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.masthead__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--rule-slab) solid transparent;
}
.masthead__nav a:hover { color: var(--color-accent); }
.masthead__nav a[aria-current="true"] { border-bottom-color: var(--color-accent-field); color: var(--color-ink-strong); }

.masthead__actions { display: flex; align-items: center; gap: var(--space-md); }
.masthead__actions .btn {
  min-height: 2.75rem;
  padding-inline: var(--space-md);
  font-size: var(--text-sm);
}

@media (max-width: 60rem) {
  .masthead__nav { display: none; }
  .masthead__row { gap: var(--space-sm); justify-content: space-between; }
}

/* ── Le héros ────────────────────────────────────────────────────────────
   À gauche la promesse, en gros grotesque bleu. À droite ce que le service
   produit vraiment : le bon d'alerte, imprimé comme une étiquette de kiosque.
   Pas une capture d'écran, pas une photo — l'objet lui-même. */

.hero { padding-block: var(--space-2xl) var(--space-3xl); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-3xl);
  align-items: start;
}

.hero__title {
  font-size: var(--text-display);
  line-height: 0.94;
  letter-spacing: -0.005em;
  color: var(--color-second);
  text-wrap: balance;
}
/* Le membre de phrase qui porte la promesse est imprimé à l'encre rouge, pas
   surligné : sur du carton, un aplat pâle derrière du texte se lit comme une
   tache d'humidité. */
.hero__title .mark { color: var(--color-accent); }

.hero__lede {
  margin-top: var(--space-lg);
  max-width: 46ch;
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--color-ink);
}

.hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Les trois pas ne sont plus une bande de trois cases sous le bon d'alerte :
   ce sont les trois temps du mode d'emploi, portés par son relevé. Un pas
   qu'on voit se faire vaut mieux qu'un pas qu'on lit. */

.hero__note {
  margin-top: var(--space-md);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

/* ── Le bon d'alerte ─────────────────────────────────────────────────────
   Il n'est plus posé tout fait dans le héros : il est ce que le mode d'emploi
   FABRIQUE, et il vit maintenant dans l'écran du téléphone (`.sheet__*`, plus
   bas). Les règles `.sample__*` qui le composaient ici n'avaient plus de
   porteur — aucune page ne les appelait — et sont parties avec lui. Les clés
   de traduction, elles, n'ont pas bougé : `sample.flag`, `sample.title`,
   `sample.meta`, `sample.delta` sont toujours ce que le bon affiche. */

/* ── Le mode d'emploi ────────────────────────────────────────────────────
   Le bon d'alerte ne se pose plus tout fait dans le héros : on le voit
   arriver. Trois temps dans un téléphone — on règle, on range, ça s'ouvre.

   POURQUOI DES ARRONDIS ICI, ET NULLE PART AILLEURS. Première version : un
   téléphone dessiné à angles droits pour respecter la loi du monde. Verdict
   du client : « pas réaliste » — et c'est juste. Un appareil est un OBJET
   REPRÉSENTÉ, pas un composant de l'interface : il a le droit d'avoir la
   forme d'un téléphone, comme la photographie d'une façade a le droit
   d'avoir des courbes. Tous les rayons de ce bloc sont écrits en dur et
   vivent sous `.phone` ; les jetons `--radius-*` valent toujours 0, et
   l'app DANS l'écran reste à angles droits — c'est notre produit qui s'y
   affiche, pas celui d'un autre.

   GÉOMÉTRIE FIXE. 17rem × 35rem, le rapport d'un iPhone. Rien n'est en %
   ni en vw : les trois temps se calent au pixel les uns sur les autres
   (la notification de l'acte 2 et celle de l'acte 3 doivent coïncider
   exactement), et 17rem tient dans 320px de large avec ses marges. */

.demo { margin: 0; }

.phone {
  position: relative;
  width: 17rem;
  height: 35rem;
  padding: 0.4rem;
  border: 1px solid #3a3a44;
  border-radius: 2.4rem;
  background-color: #15151b;              /* le châssis */
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2.05rem;
  background-color: var(--color-paper-2);
}

/* La pilule, la barre d'état et l'indicateur de bas d'écran sont COMMUNS aux
   trois temps : ce sont les organes de l'appareil, pas de l'écran. */
.island {
  position: absolute;
  z-index: 4;
  top: 0.5rem;
  left: 50%;
  width: 4.4rem;
  height: 1.15rem;
  margin-left: -2.2rem;
  border-radius: 999px;
  background-color: #000;
}
.bar {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.15rem;
  padding: 0.55rem 1.05rem 0;
  font-family: var(--font-figure);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-ink-strong);
}
.bar__i { display: flex; align-items: center; gap: 0.25rem; }
.bar__i svg { height: 0.625rem; width: auto; }
.home {
  position: absolute;
  z-index: 4;
  bottom: 0.45rem;
  left: 50%;
  width: 5.5rem;
  height: 0.25rem;
  margin-left: -2.75rem;
  border-radius: 999px;
  background-color: var(--color-ink-strong);
  opacity: 0.3;
}
/* Sur l'écran verrouillé, le chrome passe au blanc — comme sur un vrai
   appareil, il prend la couleur qui se lit sur ce qu'il y a dessous. */
.bar, .home { transition: color 160ms linear, background-color 160ms linear; }
.demo[data-act="1"] .bar { color: #fff; }
.demo[data-act="1"] .home { background-color: #fff; opacity: 0.8; }
.demo[data-act="2"] .bar,
.demo[data-act="2"] .home { transition-delay: 520ms; }

.act {
  position: absolute;
  inset: 0;
  display: none;
  padding-top: 2.15rem;
}
.act.is-on { display: block; }
.act--app.is-on { display: flex; flex-direction: column; }
html.js .act--app.is-on,
html.js .act--lock.is-on { animation: register var(--dur-medium) var(--ease-out) both; }

/* Sans JS, l'appareil montre sa fin — le bon d'alerte ouvert, ce qu'il y
   avait ici avant —, et le relevé perd son « vous êtes ici ». */
html:not(.js) .act.is-on { display: none; }
html:not(.js) .act--open { display: block; }
html:not(.js) .note--going { display: none; }
html:not(.js) .demo__fill { transform: scaleX(1); }
html:not(.js) .demo__seg { cursor: default; }
html:not(.js) .demo__seg.is-on .demo__lab,
html:not(.js) .demo__seg.is-on .demo__n { color: var(--color-muted); }

/* Un battement entre quand son heure arrive (`data-at`, en ms, dans le HTML).
   Les cellules du formulaire, elles, sont là dès le début : leur battement
   les fait passer à l'encre, il ne les fait pas entrer. */
.beat { opacity: 0; }
.beat.is-live { opacity: 1; animation: register var(--dur-medium) var(--ease-out) both; }
html:not(.js) .beat { opacity: 1; }
.cue { display: none; }

/* ACTE 1 — l'app. Angles droits, deux encres : c'est notre produit. */
.act--app { background-color: var(--color-paper-2); }
.app__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  background-color: var(--color-accent-field);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}
.app__mark { width: 0.95rem; height: auto; }
/* Marge basse de l'appareil : sans elle, le bouton passait sous l'indicateur
   de bas d'écran — la zone qu'aucune app ne remplit. */
.app__body { flex: 1; display: flex; flex-direction: column; padding: 0.7rem 0.7rem 1.5rem; }

.pf__lab {
  margin-bottom: 0.25rem;
  font-family: var(--font-figure);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-second);
}
.pf__lab + * { margin-bottom: 0.7rem; }
.pf__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pchip {
  display: inline-block;
  padding: 0.25rem 0.4rem;
  border: var(--rule-firm) solid var(--color-ink-strong);
  background-color: var(--color-paper);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-ink-strong);
}
/* La cellule choisie prend l'encre ET son décalage de repérage — la règle du
   monde, à l'échelle de l'écran. */
.pchip.is-live {
  background-color: var(--color-accent-field);
  color: var(--color-accent-ink);
  transform: translate(1px, 1px);
}
.pf__row { display: flex; align-items: center; gap: 0.3rem; }
.pf__box {
  flex: 1 1 0;
  min-width: 0;
  min-height: 1.5rem;
  padding: 0.2rem 0.4rem;
  border: var(--rule-firm) solid var(--color-ink-strong);
  background-color: var(--color-paper);
  font-family: var(--font-figure);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-ink-strong);
}
.pf__dash { width: 0.5rem; height: var(--rule-firm); background-color: var(--color-ink-strong); }
.pf__go {
  margin-top: auto;
  padding: 0.5rem;
  background-color: var(--color-accent-field);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-accent-ink);
}
.pf__go.is-live { background-color: var(--color-accent-strong); transform: translate(1px, 1px); }
/* Le pavé de confirmation d'un téléphone : arrondi, sombre, posé au-dessus de
   l'indicateur de bas d'écran, et il dit ce que l'enregistrement vient
   d'allumer — « enregistré » se lisait déjà sur le bouton. */
.toast {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 3.7rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.75rem;
  background-color: rgba(21, 21, 27, 0.92);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.25;
  text-align: center;
  color: var(--color-paper);
}

/* ACTE 2 — l'écran verrouillé. La façade d'Alberta iela, assombrie : une vue
   de Rīga du domaine public, jamais la photo d'une annonce. */
.act--lock,
.act--open {
  background-image: url("img/lock-480.jpg");
  background-size: cover;
  background-position: center;
}
.act--lock::before,
.act--open::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(8, 8, 12, 0.42);
}
.lock__date,
.lock__clock {
  position: relative;
  text-align: center;
  color: #fff;
}
.lock__date {
  margin-top: 3.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.lock__clock {
  margin-top: 0.1rem;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* La notification. Elle occupe la MÊME place dans les deux derniers temps :
   c'est cette immobilité qui fait la couture entre l'écran verrouillé et la
   feuille ouverte. Ne pas déplacer l'une sans l'autre. */
.note {
  position: absolute;
  z-index: 2;
  left: 0.55rem;
  right: 0.55rem;
  top: 11.25rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.4rem;
  row-gap: 0.1rem;
  padding: 0.5rem 0.6rem 0.55rem;
  border-radius: 1rem;
  background-color: rgba(252, 252, 250, 0.95);
}
.note__icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.42rem;
  background-color: var(--color-accent-field);
}
.note__icon img { width: 0.95rem; height: auto; }
.note__who {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.note__when {
  font-family: var(--font-figure);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral);
}
.note__what {
  grid-column: 1 / -1;
  margin-top: 0.15rem;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--color-ink-strong);
}
.note__sum {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--color-ink);
}
/* Le geste de l'appareil, pas celui du site : une notification tombe. */
@keyframes drop {
  from { opacity: 0; transform: translateY(-0.7rem); }
  to   { opacity: 1; transform: none; }
}
.note.beat.is-live { animation: drop 380ms var(--ease-out) both; }

/* ACTE 3 — on touche la notification : elle s'ouvre en plein écran. La copie
   posée dessous s'efface pendant que la feuille grandit depuis son cadre. */
@keyframes fade-out { to { opacity: 0; } }
@keyframes unfold {
  from { top: 11.25rem; left: 0.55rem; right: 0.55rem; height: 5.3rem; border-radius: 1rem; }
  to   { top: 0; left: 0; right: 0; height: 100%; border-radius: 0; }
}
.note--going { animation: fade-out 260ms var(--ease-out) 120ms both; }
.sheet {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper-2);
}
.beat[data-open].is-live { opacity: 1; animation: unfold 520ms var(--ease-out) both; }
.sheet__bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2.5rem 0.7rem 0.45rem;
  border-bottom: var(--rule-firm) solid var(--color-ink-strong);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-strong);
}
.sheet__back { width: 0.9rem; height: 0.9rem; color: var(--color-accent); }
.sheet__body { flex: 1; display: flex; flex-direction: column; padding: 0.7rem 0.7rem 1.5rem; }
.sheet__flag {
  align-self: flex-start;
  padding: 0.15rem 0.35rem;
  background-color: var(--color-accent-field);
  font-family: var(--font-figure);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}
.sheet__title {
  margin-top: 0.55rem;
  font-size: 1.3125rem;
  line-height: 1.05;
  color: var(--color-ink-strong);
}
.sheet__meta {
  margin-top: 0.3rem;
  font-family: var(--font-figure);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--color-muted);
}
.sheet__price {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-figure);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-ink-strong);
}
.sheet__delta {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-muted);
}
.sheet__delta .figure-num { font-weight: 700; color: var(--color-accent); }
.sheet__why {
  margin-top: 0.8rem;
  padding: 0.45rem 0.55rem;
  border: var(--rule-firm) solid var(--color-ink-strong);
  background-color: var(--color-paper);
}
.sheet__why-l {
  display: block;
  font-family: var(--font-figure);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-second);
}
.sheet__why-v {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-figure);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-ink-strong);
}
.sheet__go {
  margin-top: auto;
  padding: 0.65rem;
  background-color: var(--color-accent-field);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-accent-ink);
}
.sheet__go.is-live { background-color: var(--color-accent-strong); transform: translate(1px, 1px); }

/* La phrase change au moment où ce qu'elle décrit se produit, jamais avant.
   Hauteur réservée : en russe la même phrase prend une ligne de plus, et
   l'appareil ne doit pas sauter d'un temps à l'autre. */
.demo__line {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  min-height: 4.75rem;
  max-width: min(20rem, 100%);
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--color-ink);
  text-wrap: pretty;
}

/* Le relevé : même grammaire que celui de la bande photographique. Il porte
   les trois pas — ce que la liste numérotée disait, il le montre en cours. */
.demo__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-sm);
  width: min(20rem, 100%);
}
.demo__seg {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.demo__seg::before { content: ""; position: absolute; inset: -0.75rem 0; }
.demo__bar { height: var(--rule-slab); background-color: var(--color-rule); overflow: hidden; }
.demo__fill {
  display: block;
  height: 100%;
  background-color: var(--color-accent-field);
  transform: scaleX(0);
  transform-origin: left;
}
.demo__seg.is-past .demo__fill { transform: scaleX(1); }
.demo__seg.is-on .demo__fill { animation: seg-fill var(--demo-dur, 5s) linear both; }
.demo--hold .demo__seg.is-on .demo__fill { animation-play-state: paused; }
.demo__lab {
  display: flex;
  gap: var(--space-2xs);
  font-family: var(--font-figure);
  font-size: clamp(0.5625rem, 2.2vw, 0.6875rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.demo__n { color: var(--color-rule); }
.demo__seg.is-on .demo__lab,
.demo__seg.is-on .demo__n { color: var(--color-accent); }
.demo__seg:hover .demo__bar { background-color: var(--color-paper-3); }
.demo__seg:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

/* Sans animation : rien ne joue, rien ne se remplit. L'appareil montre le
   troisième temps — le bon d'alerte ouvert — et les trois pas restent
   cliquables pour qui veut voir les autres. */
@media (prefers-reduced-motion: reduce) {
  html.js .act.is-on,
  .beat.is-live,
  .note.beat.is-live,
  .note--going,
  .beat[data-open].is-live { animation: none; }
  .beat { opacity: 1; }
  .note--going { display: none; }
  .demo__seg.is-on .demo__fill { animation: none; transform: scaleX(1); }
}

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .demo { display: grid; justify-items: start; }
}

/* ── Les plaques photographiques ─────────────────────────────────────────
   Une photo, dans ce monde, est une plaque imprimée : un filet d'encre autour,
   une légende composée dessous comme sous une illustration de journal. Pas de
   coin arrondi, pas d'ombre portée, pas de texte posé par-dessus.

   Ce sont des vues de Rīga du domaine public, pas des photos d'annonces :
   celles-là appartiennent aux vendeurs de ss.lv et ne seront jamais republiées
   ici. Celles-ci disent où l'on est ; elles ne prétendent pas être un bien à
   vendre. */

.plate { margin: 0; }
.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--rule-firm) solid var(--color-ink-strong);
  /* Le filtre rapproche la photo de l'encre de la page sans la déguiser :
     un rien de contraste, un rien de saturation en moins. */
  filter: saturate(0.88) contrast(1.04);
}
.plate__cap {
  margin-top: var(--space-xs);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.plate--band {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  margin-block: 0 var(--space-3xl);
}
.plate--band img { aspect-ratio: 1600 / 560; object-fit: cover; }

.stages__wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2xl);
  align-items: start;
}
.plate--side img { aspect-ratio: 9 / 8; object-fit: cover; }

@media (max-width: 60rem) {
  .stages__wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .plate--band { margin-bottom: var(--space-2xl); }
  .plate--band img { aspect-ratio: 800 / 300; }
}

/* ── Le bandeau de preuve ────────────────────────────────────────────────
   Aplat d'encre bleue en pleine largeur : quatre chiffres mesurés sur la base,
   séparés par des filets. La page se lit alors comme un imprimé en zones et
   non comme une suite de blocs sur le même fond. */

.proof {
  background: var(--color-second-field);
  color: var(--color-accent-ink);
  padding-block: var(--space-xl);
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.proof__cell {
  padding-inline: var(--space-lg);
  border-inline-start: var(--rule-hair) solid rgba(255,255,255,0.35);
}
.proof__cell:first-child { padding-inline-start: 0; border-inline-start: 0; }
.proof__n {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proof__q {
  margin-top: var(--space-xs);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-accent-ink);
  opacity: 0.9;
}

@media (max-width: 48rem) {
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) 0; }
  .proof__cell:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
}

/* ── L'essai sans compte ─────────────────────────────────────────────────
   La grille du kiosque : on choisit des cellules, la cellule choisie prend
   l'encre rouge, et le présentoir de droite montre ce que ça donne. */

.try { padding-block: var(--space-3xl); }
.try__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.try__grid > *, .try__form > * { min-width: 0; }
.try__form {
  padding: var(--space-lg);
  border: var(--rule-firm) solid var(--color-ink-strong);
  background-color: var(--color-paper-3);
}
@media (min-width: 60.01rem) {
  /* Deux colonnes, et les groupes larges tiennent la ligne entière : la bande
     de commande d'un kiosque, pas une colonne de formulaire qui s'arrête
     500 px avant le bas de sa voisine.

     Le span passe par une CLASSE, plus par `fieldset:nth-child(2)` : le
     formulaire est passé de quatre groupes à sept, et un sélecteur de rang
     désigne un autre groupe à chaque ajout — en silence. */
  .try__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-2xl);
    align-content: start;
  }
  .try__form > .tf--wide { grid-column: 1 / -1; }
}

.try__form fieldset { margin: 0 0 var(--space-lg); padding: 0; border: 0; }
.try__form legend {
  padding: 0;
  margin-bottom: var(--space-xs);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-second);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-firm) solid var(--color-ink-strong);
  background-color: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { background-color: var(--color-paper-3); }
/* La cellule active prend la troisième encre — la loi du monde. */
.chip:has(input:checked) {
  background: var(--color-accent-field);
  border-color: var(--color-accent-field);
  color: var(--color-accent-ink);
  transform: translate(1px, 1px);        /* décalage de repérage */
}
.chip:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.try__hint {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}
.try__more { margin-top: var(--space-2xs); }

/* Le champ qui raccourcit la liste des rajons. Il n'apparaît qu'une fois la
   liste complète ouverte : avant, il n'y a que huit cases et rien à chercher. */
.picker { margin-top: var(--space-sm); }
.picker input {
  width: 100%;
  max-width: 22rem;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-firm) solid var(--color-ink-strong);
  border-radius: 0;
  background-color: var(--color-paper-2);
  color: var(--color-ink-strong);
  font-family: var(--font-figure);
  font-size: var(--text-base);
}
.picker input::placeholder { color: var(--color-neutral); }
.picker__none { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
#try-districts { align-items: flex-start; }

.try__form select,
.try__form input[type="number"] {
  width: 100%;
  max-width: 100%;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-firm) solid var(--color-ink-strong);
  border-radius: 0;
  background-color: var(--color-paper-2);
  color: var(--color-ink-strong);
  font-family: var(--font-figure);
  font-size: var(--text-base);
}
.try__form input[type="number"]::placeholder { color: var(--color-neutral); }

/* Un champ nommé : étiquette en petites capitales à la machine à écrire, la
   même langue que les légendes de groupe et que le compte.

   Tout ce bloc est enfermé dans `.try__form`. `.field` est déjà pris plus bas
   par le bandeau d'inscription, qui est posé sur un APLAT CARMIN : son
   `.field label` imprime en `--color-accent-ink`, presque blanc. À égalité de
   spécificité c'est lui qui gagnait, et les étiquettes de l'essai
   disparaissaient dans le carton. Deux composants portent le même nom : c'est
   la portée qui les sépare, pas l'ordre du fichier. */
.try__form .field + .field,
.try__form .row + .field,
.try__form .chips + .row { margin-top: var(--space-md); }
.try__form .field > label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-second);
}
/* Deux champs courts par ligne, un seul dès qu'ils n'ont plus 12 rem : sur un
   écran de 320 px « Platība no (m²) » et « Budžets » ne tiennent pas côte à
   côte sans se rogner. */
.try__form .row { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.try__form .row > .field { flex: 1 1 12rem; min-width: 0; margin-top: 0; }

/* Une case à cocher est un carré d'encre, pas une pastille : le monde n'a
   aucun rayon. La ligne entière sert de cible tactile. */
.try__form .check { display: flex; align-items: center; gap: var(--space-sm); min-height: 2.75rem; }
.try__form .check input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0;
  accent-color: var(--color-accent-field);
}
.try__form .check label { font-size: var(--text-base); color: var(--color-ink); cursor: pointer; }
.try__form .check input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Les mots-clés sont des étiquettes, pas une chaîne « séparez par des
   virgules » : on voit ce qui a été retenu, et une croix le retire. */
.try__form .tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  padding: var(--space-3xs) var(--space-xs);
  border: var(--rule-firm) solid var(--color-ink-strong);
  background-color: var(--color-paper-2);
  cursor: text;
}
.try__form .tags:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.try__form .tags input {
  flex: 1 1 6rem;
  min-width: 5rem;
  min-height: 2.5rem;
  padding: 0 var(--space-2xs);
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-figure);
  font-size: var(--text-base);
  color: var(--color-ink-strong);
}
.try__form .tags input::placeholder { color: var(--color-neutral); }
.try__form .tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-xs);
  background-color: var(--color-accent-field);
  color: var(--color-accent-ink);
  font-family: var(--font-figure);
  font-size: var(--text-sm);
}
.try__form .tag__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;                       /* cible tactile, pas une croix de 8 px */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.try__form .tag__x svg { width: 0.6875rem; height: 0.6875rem; }
.try__form .tag__x:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: -2px; }

/* Le plan auquel appartient un critère, imprimé sur la puce elle-même. Il
   hérite de la couleur du texte : lisible sur le papier comme sur l'aplat
   carmin d'une puce cochée. */
.chip__plan {
  margin-left: var(--space-xs);
  padding: 0 var(--space-3xs);
  border: var(--rule-hair) solid currentColor;
  font-family: var(--font-figure);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Le présentoir : ce que la veille donnerait, imprimé sur une étiquette. */
.try__out {
  padding: var(--space-lg);
  border: var(--rule-firm) solid var(--color-ink-strong);
  background-color: var(--color-paper-2);
}
.try__label {
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-second);
}
.try__n {
  margin-top: var(--space-2xs);
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.try__approx { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 400; }
.try__figure { font-variant-numeric: tabular-nums; }
.try__unit {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  text-transform: none;
  color: var(--color-ink-strong);
}
.try__q { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-neutral); }

.try__cap {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-firm) solid var(--color-ink-strong);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-second);
}

.try__hits { margin-top: var(--space-xs); }
@media (min-width: 60.01rem) {
  /* À pleine largeur, trois annonces en une colonne laissaient le tiers droit
     du panneau vide : elles se rangent en deux colonnes séparées d'un filet. */
  .try__hits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
  .try__hits > li:nth-child(odd) { border-inline-end: var(--rule-hair) solid var(--color-rule); padding-inline-end: var(--space-2xl); }
  .try__out > .try__label, .try__out > .try__n, .try__out > .try__q { max-width: 44ch; }
}
.try__hits > li {
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.try__hits > li:last-child { border-bottom: 0; }

.try__cta { margin-top: var(--space-lg); }
.try__cta .btn { width: 100%; }
.try__fine { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-neutral); }
.try__foot:not(:empty) {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

@media (max-width: 60rem) {
  .try { padding-block: var(--space-2xl); }
}

/* Une annonce : titre, données, prix, écart. Aucune image — ce qui appartient
   au vendeur reste chez le vendeur ; ce qu'on affiche, ce sont des faits. */
.hit__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-ink-strong);
}
.hit__meta {
  margin-top: var(--space-3xs);
  font-family: var(--font-figure);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.hit__price {
  margin-top: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink-strong);
}
/* L'écart à la médiane est un tampon, pas une couleur de plus : encre rouge,
   sur une pastille pâle, comme un prix remisé au kiosque. */
.hit__delta { color: var(--color-accent); font-weight: 700; }
.hit__pct {
  padding: 0 var(--space-2xs);
  background: var(--color-accent-dim);
}
.hit__delta small { font-family: var(--font-body); font-weight: 400; color: var(--color-muted); }
.hit__link { margin-top: var(--space-2xs); }
.hit__link a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ── Ceux qui sont partis ────────────────────────────────────────────────
   Une bande de tirage : cinq plaques sur UNE piste qui glisse, la
   photographie qui traîne derrière la piste comme une feuille mal entraînée
   par la presse, et sous chaque photographie un filet carmin de 5 px — la
   cellule active prend le carmin, c'est la loi du monde.

   Sous la plaque, la durée. C'est elle l'argument de la section, et elle
   était composée au même corps qu'un titre de rubrique ; elle est maintenant
   à l'échelle du titre principal. Les faits se rangent à sa droite, alignés
   sur son pied, comme une ligne de registre en regard d'un folio.

   Rien ici ne défile : la piste est une transformation, pas un conteneur à
   `overflow-x`. C'est la même règle que la barre d'onglets de l'app et que le
   tableau des tarifs — un balayage vertical du doigt n'est jamais tout à fait
   vertical, et tout conteneur défilant lui vole sa composante horizontale.

   `overflow: clip` et non `hidden` : `hidden` fabrique un conteneur défilant
   que la recherche dans la page ou un lecteur d'écran peut décaler
   latéralement, et la piste ne revient jamais d'elle-même. La déclaration
   `hidden` reste au-dessus pour les navigateurs qui ignorent `clip`. */

.gone { padding-block: var(--space-3xl); }

/* ── Le registre ─────────────────────────────────────────────────────────
   Quatre carrousels ont défilé ici — bannière pleine largeur, plaque cadrée,
   lame d'encre qui balaie, épreuve qui tombe, plus un graphique de durées en
   bas. Tous tournaient autour du même défaut : la PHOTOGRAPHIE était
   l'élément le plus gros de l'écran et elle ne dit rien. Ce n'est pas la
   photo de l'annonce — c'est une vue de Rīga. Faire tourner cinq images sans
   rapport et leur ajouter des commandes, c'était décorer un décor.

   Ce qui a du sens ici, ce sont les CHIFFRES. Le registre les donne tous en
   même temps : cinq durées, cinq quartiers, cinq décotes, rien qui bouge,
   rien à cliquer. La photographie reste, une seule et fixe, à la taille d'une
   illustration — elle plante la rue et ne prétend rien d'autre.

   Elle réutilise `.plate` / `.plate--side`, la plaque des autres sections :
   ce composant existait, et une section de plus n'avait pas à s'en inventer
   un à elle. */

.gone__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2xl);
  align-items: start;
}

.ledger { width: 100%; border-collapse: collapse; }
.ledger th {
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-firm) solid var(--color-ink-strong);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-muted);
}
.ledger th:last-child { text-align: right; }
/* L'intitulé de la première colonne est plus large que la colonne : sans cette
   gouttière il venait toucher le suivant. */
.ledger th:first-child { padding-inline-end: var(--space-lg); }
.ledger td {
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: baseline;
}
.ledger tbody tr:last-child td { border-bottom: 0; }

/* La durée est ce qu'on vient lire : elle a le corps d'un titre et l'encre
   carmin, et la colonne est à largeur FIXE pour que les cinq s'alignent —
   « 20 min » et « 2 h 35 » n'ont pas la même longueur. */
.ledger__t {
  width: 8.5rem;
  padding-inline-end: var(--space-lg);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
/* L'unité est une lettre, pas un chiffre : au même corps elle mangeait la
   moitié de « 1 h 05 » et le nombre cessait d'être un nombre. */
.ledger__unit { font-size: 0.55em; font-weight: 500; letter-spacing: 0.02em; margin-inline: 0.08em; }

.ledger__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-ink-strong);
}
.ledger__meta {
  display: block;
  margin-top: var(--space-3xs);
  font-family: var(--font-figure);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.ledger__pct {
  width: 9rem;
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-figure);
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

/* ── L'impression ────────────────────────────────────────────────────────
   La section s'imprime quand elle arrive : la photographie se dévoile du haut
   vers le bas comme une feuille qui sort, puis les cinq lignes du registre
   tombent l'une après l'autre. Une seule fois, jamais en boucle — ce n'est
   pas un carrousel, c'est une page qui se pose.

   Et les durées S'ÉCOULENT : chaque chiffre monte de zéro à sa valeur, en
   passant par les minutes puis les heures (« 59 min » devient « 1 h 00 »).
   C'est le temps de l'annonce qui défile sous les yeux, et c'est le seul
   compteur du site qui raconte quelque chose. */
@keyframes unveil { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

html.js .gone .plate img { clip-path: inset(0 0 100% 0); }
html.js .gone.is-in .plate img { animation: unveil 760ms var(--ease-out) both; }

html.js .gone .ledger tbody tr { opacity: 0; }
html.js .gone.is-in .ledger tbody tr { animation: register var(--dur-long) var(--ease-out) both; }
/* Le décalage suit la lecture : une ligne toutes les 110ms, la première juste
   après que la photographie a fini de se poser. */
html.js .gone.is-in .ledger tbody tr:nth-child(1) { animation-delay: 380ms; }
html.js .gone.is-in .ledger tbody tr:nth-child(2) { animation-delay: 490ms; }
html.js .gone.is-in .ledger tbody tr:nth-child(3) { animation-delay: 600ms; }
html.js .gone.is-in .ledger tbody tr:nth-child(4) { animation-delay: 710ms; }
html.js .gone.is-in .ledger tbody tr:nth-child(5) { animation-delay: 820ms; }

/* Rien ne s'imprime : tout est là, et les durées portent leur valeur finale. */
@media (prefers-reduced-motion: reduce) {
  html.js .gone .plate img,
  html.js .gone.is-in .plate img { clip-path: none; animation: none; }
  html.js .gone .ledger tbody tr,
  html.js .gone.is-in .ledger tbody tr { opacity: 1; animation: none; }
}

@media (max-width: 60rem) {
  .gone__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .gone { padding-block: var(--space-2xl); }
}

/* Sous 48rem un tableau à trois colonnes se casse : la ligne devient un bloc,
   la durée passe au-dessus, la décote se cale à sa droite. L'en-tête n'a plus
   de colonnes à nommer et sort du rendu — le libellé de la durée est repris
   au-dessus de la première ligne par la légende de section. */
@media (max-width: 48rem) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ledger tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .ledger td { display: block; padding: 0; border: 0; }
  .ledger__t { grid-column: 1; width: auto; padding: 0; }
  .ledger__pct { grid-column: 2; grid-row: 1; width: auto; }
  .ledger__what { grid-column: 1 / -1; }
  .ledger tbody tr:last-child { border-bottom: 0; }
}

/* ── Les quatre étapes ───────────────────────────────────────────────────
   Quatre lignes de registre. Le numéro est une case d'encre bleue, pas un
   cercle : ce monde n'a pas de cercle. */

.stages { padding-block: var(--space-3xl); background-color: var(--color-paper-3); }
.stages__grid { border-top: var(--rule-firm) solid var(--color-ink-strong); }
.stage {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-md) var(--space-lg);
  align-content: start;
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.stage__num {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--color-second-field);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1;
}
.stage__title { grid-column: 2; font-size: var(--text-lg); color: var(--color-ink-strong); }
.stage__body {
  grid-column: 2;
  margin-top: calc(var(--space-md) * -1 + var(--space-2xs));
  max-width: 58ch;
  color: var(--color-muted);
}
.stage__detail {
  grid-column: 2;
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink-strong);
  background-color: var(--color-paper-2);
  font-size: var(--text-sm);
}
.stage__detail dt {
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-second);
}
.stage__detail dd { margin: 0 0 var(--space-sm); color: var(--color-ink); }
.stage__detail dd:last-child { margin-bottom: 0; }

@media (max-width: 40rem) {
  .stage { grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-sm) var(--space-md); }
  .stage__num { width: 2.75rem; height: 2.75rem; font-size: var(--text-md); }
  .stage__body { margin-top: calc(var(--space-sm) * -1 + var(--space-2xs)); }
}

/* ── Les tarifs ──────────────────────────────────────────────────────────
   Une feuille de spécification : trois produits en tête de colonne, une ligne
   par caractéristique. Le plan mis en avant prend l'encre rouge. */

.pricing { padding-block: var(--space-3xl); }
.pricing__wrap { overflow-x: auto; }

/* L'offre de lancement : un cadre d'encre, pas une bannière clignotante. Le
   public visé se méfie de l'urgence fabriquée, et le nombre affiché est réel. */
.launch {
  margin-bottom: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-paper-2);
  border: var(--rule-firm) solid var(--color-accent-field);
}
.launch__body { max-width: 62ch; color: var(--color-ink-strong); }

.pricing__foot {
  margin-top: var(--space-lg);
  max-width: 56ch;
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

.tiers { width: 100%; border-collapse: collapse; min-width: 34rem; }
.tiers th, .tiers td {
  padding: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}
.tiers thead th { border-bottom: var(--rule-firm) solid var(--color-ink-strong); }
.tiers tbody th {
  font-family: var(--font-figure);
  font-weight: 400;
  color: var(--color-muted);
  font-size: var(--text-sm);
  width: 40%;
}
.tiers td { text-align: center; font-size: var(--text-sm); }
.tiers th:first-child, .tiers td:first-child { padding-left: 0; }
.tiers .num { font-family: var(--font-figure); font-variant-numeric: tabular-nums; }

.tier__feature {
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-second);
}
.tier__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tier__price {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink-strong);
}
.tier__per { font-family: var(--font-figure); font-size: var(--text-xs); color: var(--color-neutral); font-weight: 400; }
.tier__badge {
  display: block;
  margin-bottom: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-accent-field);
  color: var(--color-accent-ink);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.tier__row { display: block; white-space: nowrap; }
.tier__was {
  margin-inline-end: var(--space-xs);
  color: var(--color-neutral);
  font-size: var(--text-md);
  font-weight: 400;
  text-decoration-line: line-through;
  text-decoration-color: var(--color-accent-field);
  text-decoration-thickness: 3px;
}
.tier__now { font-size: var(--text-xl); color: var(--color-accent); }
.tier__note {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-figure);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
}

.tier--featured .tier__name { color: var(--color-accent); }
.tiers thead th.tier--featured { box-shadow: inset 0 5px 0 var(--color-accent-field); }
.tiers tfoot td { padding-top: var(--space-lg); border-bottom: 0; text-align: center; }
.tier__pick { width: 100%; max-width: 14rem; }

.yes { color: var(--color-ink-strong); font-weight: 700; }

/* LA PAIRE COCHE / TRAIT DE NIHIL.
   Ce que le plan ne donne pas portait une case vide au trait : un carré noir
   fermé, aussi lourd que la coche, qui attirait l'œil sur ce qu'on n'a PAS et
   se lisait comme une case à cocher qu'on aurait oublié de remplir.

   C'est maintenant une CROIX tracée du même geste que la coche : deux traits
   de 2px à bouts carrés, dans la même boîte de 1rem, mais plus courts qu'elle
   (7,6 unités contre 10,8) et dans une encre plus claire. La coche affirme,
   la croix se retire. Les deux marques forment une paire ; ce ne sont pas
   deux objets différents posés côte à côte.

   Ni emoji, ni cellule laissée vide : une cellule vide ne dit pas « non »,
   elle dit « on a oublié de remplir ». */
.tick,
.nil { width: 1rem; height: 1rem; vertical-align: middle; }
.tick { color: var(--color-second); }
/* Encre intermédiaire : assez lisible pour compter (≥3:1 sur le papier),
   assez retenue pour que la colonne se lise d'abord par ses coches. */
.nil { color: var(--color-neutral); }
.link__arrow { width: 1.1em; height: 1.1em; margin-inline-start: var(--space-2xs); flex: none; }

/* Un plan à la fois sous 48rem. Le sélecteur reprend la forme des cellules de
   l'essai : trois libellés, un seul actif, rien à apprendre. */
.plan-switch { display: none; }
@media (max-width: 48rem) {
  .plan-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--space-lg);
    border: var(--rule-firm) solid var(--color-ink-strong);
  }
  .plan-switch__btn {
    min-height: 2.75rem;
    padding: var(--space-xs) var(--space-2xs);
    border: 0;
    border-inline-end: var(--rule-hair) solid var(--color-ink-strong);
    background-color: var(--color-paper-2);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(0.8125rem, 3.4vw, var(--text-sm));
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--dur-short) var(--ease-out);
  }
  .plan-switch__btn:last-child { border-inline-end: 0; }
  .tier__feature { display: none; }
  .plan-switch__btn[aria-pressed="true"] {
    background: var(--color-accent-field);
    color: var(--color-accent-ink);
  }
  /* Le conteneur ne défile plus : il n'a plus rien à faire défiler, et un
     balayage vertical du doigt n'a plus de piège horizontal à accrocher.
     `fixed` plutôt que la largeur naturelle : sur un écran de 320 px, les
     intitulés russes réclamaient 42 px de plus que la fenêtre. */
  .pricing__wrap { overflow-x: visible; }
  .tiers { min-width: 0; table-layout: fixed; }
  .tiers thead th:first-child { width: 45%; }
  .tiers [data-col] { display: none; }
  .tiers[data-show="free"]   [data-col="free"],
  .tiers[data-show="pro"]    [data-col="pro"],
  .tiers[data-show="agency"] [data-col="agency"] { display: table-cell; }
  .tiers th, .tiers td { padding-inline: var(--space-xs); overflow-wrap: anywhere; }
  .tiers th:first-child, .tiers td:first-child { padding-left: 0; }
  .tier__pick {
    max-width: none;
    padding-inline: var(--space-xs);
    font-size: clamp(0.8125rem, 3.2vw, var(--text-base));
    white-space: normal;
    line-height: 1.2;
  }
}

/* ── Les questions ───────────────────────────────────────────────────────── */

.faq { padding-block: var(--space-3xl); background-color: var(--color-paper-3); }
.faq .page { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
.faq .section-head { margin-bottom: 0; }
.faq__list { border-top: var(--rule-firm) solid var(--color-ink-strong); }
@media (max-width: 60rem) {
  .faq .page { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
.faq__item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  min-height: 3.5rem;
  padding: var(--space-md) 0;
  border: 0;
  background: none;
  color: var(--color-ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.002em;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
}
.faq__q:hover { color: var(--color-accent); }
.faq__sign {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  background: var(--color-second-field);
  color: var(--color-accent-ink);
  font-family: var(--font-figure);
  font-size: var(--text-base);
  font-weight: 700;
}
.faq__q[aria-expanded="true"] .faq__sign { background: var(--color-accent-field); }
.faq__a {
  display: none;
  padding-bottom: var(--space-lg);
  max-width: var(--measure);
  color: var(--color-muted);
}
.faq__q[aria-expanded="true"] + .faq__a { display: block; }

/* ── L'inscription ───────────────────────────────────────────────────────
   L'encre rouge prend toute la fin de page : c'est la seule chose qui reste
   à faire, et elle occupe une zone entière plutôt qu'un bouton perdu. */

.signup {
  padding-block: var(--space-3xl);
  background: var(--color-accent-field);
  color: var(--color-accent-ink);
}
.signup__title { font-size: var(--text-2xl); max-width: 20ch; }
.signup__lede {
  margin-top: var(--space-md);
  max-width: 52ch;
  font-size: var(--text-md);
  color: var(--color-accent-ink);
}

.form {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
  max-width: 46rem;
}
.field { flex: 1 1 20rem; min-width: 0; }
.field label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}
/* Une case à cocher n'est jamais un champ de saisie pleine largeur. Sans cette
   exclusion, `.field input` attrapait aussi les cases CACHÉES des puces dès
   qu'un groupe de puces entrait dans un `.field` : elles reprenaient 100 % de
   largeur et 3,25 rem de haut, et la page débordait de 214 px sur un écran de
   320. `.chip input` a la même spécificité et vient plus haut dans le
   fichier — c'est l'ordre du fichier qui tranchait, en silence. */
.field input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-firm) solid var(--color-ink-strong);
  border-radius: 0;
  background-color: var(--color-paper-2);
  color: var(--color-ink-strong);
  font-family: var(--font-figure);
  font-size: var(--text-base);
}
.field input:not([type="checkbox"]):not([type="radio"])::placeholder { color: var(--color-neutral); }
.field input:not([type="checkbox"]):not([type="radio"]):focus-visible { outline: 3px solid var(--color-paper-2); outline-offset: 2px; }

/* Sur l'aplat rouge, le bouton passe à l'encre noire : un rouge sur du rouge
   ne serait plus un bouton. */
.signup .btn {
  background: var(--color-ink-strong);
  border-color: var(--color-ink-strong);
  color: var(--color-accent-ink);
}
.signup .btn:hover { background: var(--color-second-field); border-color: var(--color-second-field); }
.signup .btn--link { color: var(--color-accent-ink); }

.form__msg {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-accent-ink);
}
.form__msg[data-state="error"]   { color: var(--color-on-dark-error); font-weight: 700; }
.form__msg[data-state="success"] { color: var(--color-on-dark-ok); font-weight: 700; }

.form__code { flex-basis: 100%; }
.field--code { margin-top: var(--space-md); max-width: 22rem; }

.signup__fine {
  margin-top: var(--space-xl);
  max-width: 60ch;
  font-size: var(--text-sm);
  color: var(--color-accent-ink);
  opacity: 0.9;
}

/* ── Le colophon ─────────────────────────────────────────────────────────── */

.colophon {
  background-color: var(--color-paper-3);
  padding-block: var(--space-2xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.colophon__grid {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-xl);
}
.colophon__grid p + p { margin-top: var(--space-md); }
.colophon strong {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-strong);
}
.colophon__credits { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-neutral); }
.colophon__links {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
}
.colophon__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.colophon__stamp {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-firm) solid var(--color-ink-strong);
  font-family: var(--font-figure);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

@media (max-width: 48rem) {
  .colophon__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* ── Pages légales et contact ────────────────────────────────────────────
   Elles héritent de tout ce qui précède ; seul le corps de texte long a besoin
   d'une mesure et d'un rythme à lui. */

.method__body { max-width: var(--measure); color: var(--color-muted); }
.method__body p + p { margin-top: var(--space-md); }
.legal__body h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
  font-size: var(--text-md);
  color: var(--color-ink-strong);
}
.legal__body ul { margin-top: var(--space-sm); }
.legal__body li { padding-left: var(--space-md); position: relative; }
.legal__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: var(--space-xs);
  height: var(--rule-firm);
  background: var(--color-accent-field);
}
.legal__body li + li { margin-top: var(--space-xs); }

/* ── Le seul mouvement de la page ────────────────────────────────────────
   Une entrée, orchestrée : le bloc arrive avec son encre décalée d'un pixel
   et se cale. C'est le geste d'une presse, pas une animation de site. */

@keyframes register {
  from { opacity: 0; transform: translate(-2px, 3px); }
  to   { opacity: 1; transform: none; }
}
.reveal { animation: register var(--dur-long) var(--ease-out) both; }
.reveal:nth-child(2) { animation-delay: 60ms; }
.reveal:nth-child(3) { animation-delay: 120ms; }
.reveal:nth-child(4) { animation-delay: 180ms; }

/* ── Petits écrans ────────────────────────────────────────────────────────
   Les capitales étroites du monde sont plus larges que le texte qu'elles
   remplacent : en letton, « SĀKT — DIVAS MINŪTES » dépassait de 29 px sur un
   téléphone. Le libellé passe à la ligne dans son cadre plutôt que de sortir. */
@media (max-width: 48rem) {
  .btn { white-space: normal; text-align: center; line-height: 1.15; }
  .hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { width: 100%; }
  .hero__lede { font-size: var(--text-base); }
  .section-head__deck { font-size: var(--text-base); }
  .masthead__signin { padding-inline: var(--space-sm); }
  .masthead__actions { gap: var(--space-xs); }
}
/* Sous 23rem seulement — 320 px et rien d'autre. La barre collante y porte
   trois cellules de langue et deux boutons : 44 px de trop. Le drapeau saute,
   le code de langue reste : c'est lui qui identifie, le drapeau l'illustrait.
   Au-dessus de ce seuil les drapeaux tiennent, et les cellules aussi. */
@media (max-width: 23rem) {
  .masthead__bar .flag { display: none; }
  .masthead__bar .lang { min-width: 2.25rem; justify-content: center; }
}
@media (max-width: 30rem) {
  .masthead__actions .btn { padding-inline: var(--space-sm); font-size: var(--text-xs); }
  .path { grid-template-columns: minmax(0, 1fr); }
  .path li { border-inline-end: 0; border-bottom: var(--rule-hair) solid var(--color-ink-strong); }
  .path li:last-child { border-bottom: 0; }
}