/* =========================================================================
   Kadastra — vitrine publique
   =========================================================================
   Reconstruction du handoff de design v5 (« Design brief pour page web »).

   ⚠ Aucune police distante, aucun script tiers, aucune image hors de ce
   dossier. Ce n'est pas une préférence : c'est ce qui dispense cette page de
   bannière cookies. Une seule requête vers un tiers et il faut en ajouter une.

   ⚠ --parcel / --parcel-dark / --amber ne sont PAS décoratives : ce sont les
   couleurs de MAP_COLORS dans l'application (ParcelMap.tsx). La maquette
   proposait #2B63D9 / #1E4FB8 / #E8861E ; son propre chapitre « Tokens » dit de
   reprendre celles de l'application si elles diffèrent. Elles diffèrent.
   ========================================================================= */

:root {
  /* marque */
  --red: #d52b1e;
  --red-dark: #a81f15;
  --coral: #ff7c70;        /* le rouge lisible sur fond sombre */
  --red-pale: #fbe9e6;
  --red-wash: #fcedeb;

  /* neutres */
  --ink: #12151a;
  --grey: #5b616b;
  --bg: #eef0f3;
  --paper: #ffffff;

  /* badge « Dans votre commune » */
  --blue-pale: #e6eefb;
  --blue-text: #23447f;

  /* objets de carte — identiques à MAP_COLORS de l'application */
  --parcel: #2563eb;
  --parcel-dark: #1e3a8a;
  --amber: #d97706;

  /* ⚠ polices présentes sur la machine uniquement */
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;

  /* échelle typographique — abaissée d'un cran par rapport à la maquette, à la
     demande du propriétaire (« le texte est un peu trop gros »). La maquette
     montait à 120px sur l'accroche et 68px sur les titres de section. */
  --t-hero: clamp(34px, 5.2vw, 72px);
  --t-hero-sub: clamp(19px, 2.2vw, 30px);
  --t-h2: clamp(28px, 3.4vw, 46px);
  --t-h2-sm: clamp(26px, 3.1vw, 42px);
  --t-lead: 16px;
  --t-body: 15px;

  /* enveloppe */
  --shell-max: 1480px;
  --gap: 14px;
  --radius-section: 36px;
  --radius-card: 28px;
  --radius-tile: 24px;
  --section-pad: clamp(28px, 5vw, 72px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

/* ⚠ `height: auto` est OBLIGATOIRE ici. Les images portent des attributs
   width/height (bon pour la réservation de place), qui agissent comme des
   valeurs CSS. Poser `width` en CSS sans poser `height` laisse l'attribut
   gouverner la hauteur : l'image s'étire. C'est ce qui déformait la mascotte
   du bas de page. Les règles qui ont besoin d'une hauteur la reposent. */
img { max-width: 100%; height: auto; }

/* ⚠ LES LIENS INTERNES DOIVENT S'ARRÊTER SOUS L'EN-TÊTE, PAS DESSOUS.
   La pilule est `sticky` à 14 px du haut : sans `scroll-margin-top`, un saut
   vers `#formules` ou `#demo` cale le titre de la section DERRIÈRE elle. Vaut
   pour les trois liens de la barre comme pour « Choisissez votre plan ». */
[id] { scroll-margin-top: 78px; }

/* Le défilement doux fait lire le saut comme un déplacement dans la page et
   non comme un changement de page — il est coupé plus bas si le visiteur
   demande moins d'animation. */
html { scroll-behavior: smooth; }

.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ---------- briques partagées ---------- */

.btn {
  display: inline-block;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 28px;
  transition: background .2s, color .2s;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #fff; color: var(--ink); }
.btn-ghost {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  padding: 16px 24px;
}
.btn-ghost:hover { background: rgba(255,255,255,.26); color: #fff; }
.btn-white { background: #fff; color: var(--ink); padding: 15px 26px; font-size: 15px; }
.btn-white:hover { background: var(--red); color: #fff; }

.pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
}
.pill-red { color: var(--red); background: var(--red-pale); }
.pill-solid { color: #fff; background: var(--red); align-self: flex-start; }

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--grey); max-width: 46ch; }
.lead-under-title { margin: 14px 0 34px; font-size: var(--t-lead); }

.section {
  background: var(--paper);
  border-radius: var(--radius-section);
  padding: var(--section-pad);
}
.section-dark { background: var(--ink); color: #fff; }

.section-title {
  margin: 0 0 40px;
  font-weight: 800;
  font-size: var(--t-h2-sm);
  line-height: 1;
  letter-spacing: -.04em;
}

/* la croix suisse, dessinée en CSS — aucune image, aucun caractère exotique */
.swiss-cross {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
  background: var(--red);
  border-radius: 3px;
}
.swiss-cross::before,
.swiss-cross::after { content: ""; position: absolute; background: #fff; }
.swiss-cross::before { left: 6.5px; top: 3.5px; width: 3px; height: 9px; }
.swiss-cross::after  { left: 3.5px; top: 6.5px; width: 9px; height: 3px; }
.swiss-cross-lg { width: 20px; height: 20px; border-radius: 4px; }
.swiss-cross-lg::before { left: 8px; top: 4px; width: 4px; height: 12px; }
.swiss-cross-lg::after  { left: 4px; top: 8px; width: 12px; height: 4px; }

/* ===================== EN-TÊTE ===================== */

.site-header {
  position: sticky;
  top: var(--gap);
  z-index: 30;
  display: flex;
  justify-content: center;
}
.header-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 14px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  box-shadow: 0 8px 30px -12px rgba(18,21,26,.25), 0 0 0 1px rgba(18,21,26,.06);
  flex-wrap: wrap;
  justify-content: center;
}
.brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 800; font-size: 16px;
  margin-right: 10px;
}
.brand img { width: 30px; height: 30px; }
.header-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.header-nav a {
  color: var(--ink); font-size: 14px; font-weight: 600;
  padding: 9px 14px; border-radius: 999px;
  transition: background .2s;
}
.header-nav a:hover { background: var(--bg); color: var(--ink); }
/* ---------- le sélecteur de langue ---------- */
/* ⚠ IL VIT DANS `.header-nav`, ET C'EST CE QUI LUI DONNE SES DEUX PLACEMENTS
   SANS ÊTRE ÉCRIT DEUX FOIS : rangée dans la pilule sur ordinateur, bas du
   panneau déroulant sur téléphone (où `.header-nav` devient ce panneau).
   Le trait qui le sépare des liens de section change donc d'orientation d'un
   point de rupture à l'autre — c'est la seule chose à ajuster plus bas. */
.header-langues {
  display: flex; align-items: center; gap: 2px;
  margin-left: 6px; padding-left: 8px;
  border-left: 1px solid rgba(18,21,26,.14);
}
.header-langues a {
  color: var(--grey);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 7px; border-radius: 8px;
  transition: background .2s, color .2s;
}
.header-langues a:hover { background: var(--bg); color: var(--ink); }
/* ⚠ LA LANGUE COURANTE EST DÉSIGNÉE PAR `data-langue` SUR LE GROUPE, posé par
   le générateur. Le CSS ne peut pas lire `aria-current` pour colorer — si,
   justement, il le peut par sélecteur d'attribut, et c'est ce qu'on fait :
   une seule règle au lieu de trois, et elle ne peut pas se désaccorder de
   l'attribut que lit le lecteur d'écran. */
.header-langues a[aria-current] {
  color: var(--red);
  background: var(--red-wash);
  cursor: default;
}

.btn-login {
  background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px;
  transition: background .2s;
}
.btn-login:hover { background: var(--red); color: #fff; }

/* ---------- le bouton de menu, téléphone seulement ---------- */
/* Caché par défaut : il n'est rendu visible que par le point de rupture 560px.
   Ainsi l'ordinateur et la tablette ne changent pas d'un pixel. */
.header-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px;   /* ⚠ cible tactile : jamais sous 40px */
  padding: 0 10px;
  background: transparent; border: 0; border-radius: 999px;
  cursor: pointer;
}
.header-burger span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .25s, opacity .2s;
}
/* ouvert : les deux barres extrêmes forment une croix, celle du milieu s'efface */
.site-header[data-menu="open"] .header-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header[data-menu="open"] .header-burger span:nth-child(2) { opacity: 0; }
.site-header[data-menu="open"] .header-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===================== HAUT DE PAGE ===================== */

/* ⚠⚠ PLEIN ÉCRAN, ET C'EST UN CORRECTIF. À 68vh, la démonstration était déjà
   dans l'écran à l'arrivée : les testeurs atterrissaient dessus et ne lisaient
   jamais l'accroche. On retranche les deux `--gap` de `.shell` pour que le bas
   du haut de page s'arrête JUSTE avant le pli — le coin arrondi de la section
   suivante dépasse alors de quelques pixels, et c'est lui qui dit qu'il y a
   une suite. Un haut de page qui remplit l'écran au pixel près ne le dit pas.

   ⚠ `svh` ET NON `vh` SUR TÉLÉPHONE : `vh` vaut la hauteur sans les barres du
   navigateur, donc `100vh` déborde toujours et coupe l'appel à l'action.
   La ligne `vh` sert de repli aux navigateurs qui ignorent `svh` ; la seconde
   déclaration écrase la première partout ailleurs. */
.hero {
  position: relative;
  margin-top: -62px;
  min-height: calc(100vh - var(--gap) * 2);
  min-height: calc(100svh - var(--gap) * 2);
  border-radius: var(--radius-section);
  overflow: hidden;
  background: var(--ink);
  display: flex;
  flex-direction: column;
}
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* ⚠ Le voile de la maquette (.35 → .25 → .8) plaçait le texte dans sa zone LA
   PLUS CLAIRE, à 40 % de la hauteur — invisible tant que l'accroche était
   corail, criant dès qu'elle est passée au rouge de marque. Le creux est
   comblé, et un assombrissement radial tient le bloc de texte. */
.hero-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%,
      rgba(12,14,18,.5), rgba(12,14,18,0) 100%),
    linear-gradient(180deg,
      rgba(12,14,18,.45), rgba(12,14,18,.42) 40%, rgba(12,14,18,.85));
}
/* ---------- le radar du flyer, en surimpression ---------- */
/* ⚠ IL EST POSÉ AVANT `.hero-body` DANS LE DOM, ET C'EST CE QUI LE MET DERRIÈRE
   LE TEXTE. Les deux sont positionnés et aucun ne porte de `z-index` : à
   égalité, c'est l'ordre du document qui tranche.

   ⚠ `pointer-events: none` : il couvre tout un coin de l'écran. Sans cette
   ligne il intercepterait les gestes de défilement sur téléphone. */
.hero-radar {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ⚠⚠ A EST VOLONTAIREMENT COUPÉ PAR LE BORD. Son centre est posé à 86 % / 82 %
   et il déborde : c'est `overflow: hidden` de `.hero` qui le tranche. Un radar
   entier, posé bien au milieu de son coin, aurait l'air d'une vignette collée ;
   coupé, il donne l'impression de continuer hors de l'écran.
   ⚠ Le losange rouge qu'il porte tombe à ~18 % de sa largeur à droite du
   centre : vérifier sur capture qu'il ne passe pas sous un bouton avant de
   déplacer ces valeurs. C'est exactement ce qui est arrivé en les centrant. */
.hero-radar-a {
  /* ⚠⚠ LA MARQUE EST MAINTENANT AU CENTRE DU RADAR, ET CELA A CHANGÉ CES DEUX
     VALEURS. Du temps du losange, posé à 18 % de la largeur À DROITE du
     centre, il fallait rentrer le radar à 72 % pour que la marque ne sorte pas
     d'un écran de 390px. La parcelle, elle, est au croisement du réticule :
     le radar peut repartir vers le coin, et il DOIT le faire — à 72 % / 82 %
     la puce « Ka » heurtait la ligne « Conçu et hébergé en Suisse ».
     ⚠⚠ 90 % / 91 % NE SONT PAS DES VALEURS CHOISIES À L'ŒIL. Elles sortent d'un
     balayage mesuré : 24 combinaisons de position et de taille, confrontées sur
     six formats aux boîtes réelles des deux boutons, de l'accroche, du texte,
     de la ligne suisse et du crédit photo. C'est le SEUL couple qui ne touche
     rien de 360px à 1920px — à 94 % la marque sortait du cadre par le bas sur
     les grands écrans, à 86 % la puce heurtait « Conçu et hébergé en Suisse ».
     Les collisions ne se voient qu'à certaines hauteurs : les déplacer sans
     refaire la mesure revient à parier. */
  left: var(--ra-x, 90%);
  top: var(--ra-y, 91%);
  width: var(--ra-w, min(92vmin, 520px));
}

/* ⚠⚠ LE PLAN CADASTRAL EN FILIGRANE, COMME SUR LA PLAQUETTE.
   Trois traitements, et il faut les trois : `grayscale` efface le rouge de la
   route et le vert des vergers, qui juraient avec la photo ; l'opacité basse
   le fait passer DERRIÈRE l'instrument au lieu de rivaliser avec lui ; et le
   masque radial le dissout AVANT le bord du cadre, sans quoi l'image se
   terminait par un rectangle net au milieu de la photo du village.
   ⚠ `-webkit-mask-image` EN PLUS DE `mask-image` : Safari a longtemps exigé le
   préfixe, et c'est le navigateur de la moitié des téléphones. Sans lui, ce
   n'est pas une dégradation discrète — le rectangle revient, visible et laid.
   ⚠ `loading="lazy"` serait une faute ici : l'image est au-dessus de la ligne
   de flottaison. Elle porte `decoding="async"` à la place (voir le HTML). */
/* ⚠⚠ L'ÉCRAN SOMBRE EST CE QUI REND LE PLAN LISIBLE, PAS UN EFFET.
   Premier essai : le plan en nuances de gris posé directement sur la photo,
   comme sur la plaquette où il se détache d'un gris plat. Résultat vu sur
   capture — ses pâtés de maisons se confondaient avec les toits d'Albinen et
   ne donnaient qu'une salissure grise. Deux cartes superposées ne font pas une
   carte. Cet écran lui donne sa propre surface.

   ⚠ C'EST L'ÉCRAN QUI PORTE LE MASQUE, PAS LE PLAN. Le plan fait 200 % de
   large et déborde de toutes parts : un masque posé sur lui serait calculé sur
   SA boîte, pas sur le disque, et se dissoudrait au mauvais endroit.
   Sans dissolution, l'image se termine par un bord net au milieu de la photo.
   ⚠ `-webkit-mask-image` AUTANT QUE `mask-image` : Safari a longtemps exigé le
   préfixe, et c'est le navigateur de la moitié des téléphones. Sans lui ce
   n'est pas une dégradation discrète — le disque net revient, visible et laid. */
.hero-radar-scope {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%,
    rgba(8,11,16,.58) 0 42%, rgba(8,11,16,0) 76%);
  /* ⚠⚠ LE MASQUE EST DÉGRESSIF, PAS SEULEMENT DISSOLVANT, ET C'EST CE QUI
     ARBITRE LE SEUL VRAI COMPROMIS DE CE RADAR. Le plan doit être LISIBLE au
     centre — sans quoi on ne voit pas la maison, et le contour rouge redevient
     la forme arbitraire qu'on lui reprochait — et DISCRET au large, sans quoi
     il couvre tout le coin de la photo d'un damier gris. Essayé uniforme aux
     deux réglages : à .24 la maison disparaît, à .40 le coin est mangé. Un
     palier intermédiaire règle les deux à la fois.
     Repères, en fraction de la ligne du dégradé (origine « farthest-corner »,
     donc 0,707 × côté) : le bord du disque tombe à 70,7 %, et la parcelle ne
     mesure que ~12 %. D'où les paliers 11 / 30 / 50 / 74.
     ⚠ Il porte AUSSI sur le fond sombre, qui est dans le même élément : c'est
     voulu, le cœur de l'écran est plus dense que son pourtour. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    #000 0 11%, rgba(0,0,0,.42) 30%, rgba(0,0,0,.2) 50%, transparent 74%);
          mask-image: radial-gradient(circle at 50% 50%,
    #000 0 11%, rgba(0,0,0,.42) 30%, rgba(0,0,0,.2) 50%, transparent 74%);
}

/* ⚠⚠ LES 200 % SONT UN CALCUL, PAS UN RÉGLAGE À L'ŒIL — ET ILS SONT NOUÉS AU
   POLYGONE ROUGE DU HTML. L'échelle est de 0,75 unité de viewBox par pixel
   d'image : 1600 × 0,75 = 1200 unités, soit 200 % d'un cadre de 600. Le centre
   de l'image (800, 500) est aussi le centre de la parcelle citée, et il est
   posé au centre du radar — d'où le `translate(-50%, -50%)`.
   Changer cette largeur sans refaire le calcul du polygone décolle le contour
   rouge du bâtiment qu'il désigne, SANS la moindre erreur ni trace.
   ⚠ PAS d'`object-fit: cover` : un recadrage automatique rendrait la
   correspondance incalculable. Et `max-width: none` est indispensable, la
   règle globale `img { max-width: 100% }` écraserait sinon les 200 %. */
.hero-radar-plan {
  position: absolute;
  left: 50%; top: 50%;
  width: 200%;            /* hauteur déduite : 1000 × 0,75 = 750 unités = 125 % */
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  /* ⚠ VALEUR DE BASE, QUE LE MASQUE DÉGRESSIF DE `.hero-radar-scope` RABAISSE
     DÈS QU'ON S'ÉLOIGNE DU CENTRE. Elle ne vaut donc PLEINEMENT qu'au cœur de
     l'écran, là où se trouve la maison que le contour rouge désigne — et c'est
     elle qui justifie le contour. Les deux réglages se lisent ensemble. */
  opacity: .62;
  /* ⚠ `invert` APRÈS `grayscale` : le plan est sombre sur fond clair, l'écran
     est sombre. Sans inversion, les bâtiments disparaissent dans le fond et
     seul le vide du plan se voit — l'image exactement à l'envers. */
  /* `contrast(1.25)` : le plan inversé rend un gris mou ; il faut rouvrir
     l'écart entre les emprises de bâtiments et le fond pour que les premières
     se détachent sur l'écran sombre. */
  filter: grayscale(1) invert(1) contrast(1.25);
}

/* `overflow: visible` n'est pas nécessaire : le réticule s'arrête au dernier
   anneau (voir le HTML), pour ne pas barrer le titre. */
.hero-radar svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: none;
  /* ⚠ L'OMBRE PORTÉE N'EST PAS UN EFFET, C'EST CE QUI REND LES TRAITS BLANCS
     LISIBLES. La photo d'Albinen va du bleu sombre des falaises aux toits
     éclairés du village : sans elle, les anneaux disparaissent dès qu'ils
     passent sur une zone claire. Mesuré à l'écran. */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.hero-radar-cross { stroke: rgba(255,255,255,.20); stroke-width: 1.5; }
.hero-radar-ring  { stroke: rgba(255,255,255,.30); stroke-width: 1.5; }
.hero-radar-ring-dash  { stroke-dasharray: 10 9; stroke: rgba(255,255,255,.26); }
.hero-radar-ring-faint { stroke: rgba(255,255,255,.12); }
.hero-radar-echo { fill: rgba(255,255,255,.28); }

/* ⚠ UN CONTOUR, PAS UNE FORME PLEINE : il désigne un bâtiment du plan qui est
   juste dessous, et un aplat le cacherait au lieu de le montrer. Le remplissage
   reste assez léger pour qu'on lise la parcelle à travers.
   ⚠ `paint-order` met le remplissage et le trait AVANT rien d'autre : sans
   lui, sur les moteurs qui l'ignorent, le trait rouge est simplement centré sur
   le contour, ce qui reste correct — c'est une amélioration, pas un prérequis. */
.hero-radar-parcel {
  fill: rgba(213,43,30,.28);
  stroke: var(--red);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: fill stroke;
}

/* ⚠ EN DESSOUS DE 360px DE LARGE, SEULE LA MARQUE S'EFFACE — jamais
   l'instrument, le plan ni le cône, qui portent l'identité de la plaquette.
   À 320×650 le contour touche la ligne « Conçu et hébergé en Suisse » ;
   c'est le seul des dix formats mesurés où il ne tient pas.
   ⚠ UNE SECONDE CONDITION (`max-height: 560px`, le téléphone COUCHÉ) A ÉTÉ
   RETIRÉE AVEC LA PUCE « Ka ». C'était ELLE qui ne tenait pas sur un haut de
   page écrasé, pas le contour. Remesuré après sa suppression : le contour seul
   passe sur les dix formats sauf 320px. Ne pas réintroduire la condition sans
   remesurer — elle priverait les téléphones couchés d'une marque qui y tient. */
@media (max-width: 359px) {
  .hero-radar-parcel { display: none; }
}

/* ⚠⚠ LE CÔNE EST FIGÉ — CHOIX DU PROPRIÉTAIRE (02.10), PAS UN OUBLI.
   Il tournait (`animation: krot 7s linear infinite`) ; l'animation a été
   retirée sur sa demande. Ne pas la remettre sans le lui redemander.

   ⚠ IL RESTE CENTRÉ PAR `inset`, JAMAIS PAR `transform`, ET IL FAUT LE GARDER
   AINSI — c'est ce qui rend la remise en rotation possible d'une seule ligne.
   Écrit `left:50%; top:50%; transform: translate(-50%,-50%)`, il rendait
   l'animation inopérante : `krot` anime `transform` et écrasait donc le
   centrage, le navigateur interpolant d'une translation vers une rotation.
   Le disque rétrécissait et dérivait au lieu de pivoter. Défaut mesuré, pas
   supposé (comparaison à décalage d'animation négatif).
   (9 % = (100 − 82) / 2 ; 82 % suit l'anneau extérieur du SVG, r 246 sur 600.
   Les deux doivent bouger ensemble.)

   ⚠ `from 92deg` ORIENTE LE CÔNE EN HAUT À DROITE, comme sur la plaquette.
   La bande visible du dégradé va de 268° à 360°, soit le quadrant HAUT-GAUCHE
   quand l'origine est à midi ; les 92° la basculent dans le quadrant
   haut-droit. Cet angle fait tourner le cône, et rien d'autre. */
.hero-radar-sweep {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  overflow: hidden;
  background: conic-gradient(from 92deg,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 268deg,
    rgba(255,255,255,.07) 330deg, rgba(255,255,255,.22) 360deg);
}

/* ⚠ SUR GRAND ÉCRAN, LE RADAR S'ÉCARTE DU COIN ET GRANDIT. Trois variables
   bougent ; le texte, lui, reste centré. */
@media (min-width: 900px) {
  .hero {
    --ra-x: 84%; --ra-y: 76%; --ra-w: min(72vmin, 620px);
  }
}

.hero-body {
  position: relative;
  flex: 1;
  pointer-events: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 116px 24px 56px;
  color: #fff;
}
.hero-title {
  margin: 0;
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: .95;
  letter-spacing: -.045em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero-sub {
  margin: 18px 0 0;
  font-weight: 700;
  font-size: var(--t-hero-sub);
  letter-spacing: -.025em;
  /* rouge de marque et non corail — choix du propriétaire. Sur le voile sombre
     du haut de page, #d52b1e tient le contraste exigé pour un grand texte. */
  color: var(--red);
}
.hero-lead {
  margin: 28px auto 0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 42ch;
  color: rgba(255,255,255,.9);
  text-wrap: pretty;
}
.hero-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 36px;
  pointer-events: auto;
}
.hero-swiss {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.85);
}

/* ⚠ attribution CC BY-SA 4.0 — condition de licence, pas une politesse */
.hero-credit {
  position: relative;
  margin: 0;
  padding: 0 20px 14px;
  text-align: right;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}
.hero-credit a { color: rgba(255,255,255,.8); text-decoration: underline; }

/* ===================== DÉMONSTRATION ===================== */

.demo-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px;
  align-items: end;
  margin-bottom: 40px;
}
.demo-head h2 {
  margin: 0; font-weight: 800;
  font-size: var(--t-h2); line-height: 1; letter-spacing: -.04em;
}
.demo-head p {
  margin: 0; font-size: var(--t-lead); line-height: 1.55;
  color: var(--grey); max-width: 44ch; justify-self: end;
  text-wrap: pretty;
}

.sim { display: flex; flex-direction: column; gap: 20px; }

/* ---- la rangée d'étapes ---- */
.sim-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 6px;
}
/* ⚠⚠ ELLES RESSEMBLENT À DES BOUTONS, ET C'EST UN CORRECTIF DE TESTS.
   Fond transparent, aucune bordure : elles se lisaient comme des libellés, et
   aucun testeur n'a deviné qu'on pouvait les cliquer pour figer la séquence.
   Le fond léger et la bordure ne sont donc pas décoratifs — ils sont la seule
   chose qui dise « ceci se clique » avant qu'on ait essayé. */
.sim-step {
  text-align: left;
  background: rgba(127,127,127,.05);
  border: 1px solid rgba(127,127,127,.18);
  border-radius: 999px;
  padding: 13px 16px;
  cursor: pointer;
  font-family: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 8px;
  transition: background .25s, border-color .25s, transform .25s;
}
.sim-step:hover {
  background: rgba(127,127,127,.14);
  border-color: rgba(127,127,127,.34);
  transform: translateY(-1px);
}
/* ⚠ `:focus-visible` et non `:focus` : au clic de souris, `:focus` laisserait
   un anneau collé sur l'étape qu'on vient de choisir. */
.sim-step:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* La consigne, sous les cinq étapes. Discrète mais pas cachée : c'est elle qui
   porte l'information que le dessin seul n'a pas réussi à faire passer. */
.sim-hint {
  margin: -8px 0 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--grey);
}
/* ⚠ UN CURSEUR, PAS UNE PASTILLE. Premier essai : une forme en goutte faite de
   `border-radius` — elle se lisait comme un point décoratif et n'évoquait rien.
   Le tracé explicite dit « ceci se clique » sans qu'on ait à le deviner.
   SVG en ligne : pas de fichier, pas de police d'icônes, pas de requête. */
.sim-hint-mark {
  flex: none;
  width: 12px; height: 16px;
  fill: var(--red);
}
.sim-step-label {
  display: flex; gap: 10px; align-items: baseline;
  opacity: .55; transition: opacity .3s;
}
.sim-step-n { font-size: 20px; font-weight: 800; line-height: 1; color: var(--red); }
.sim-step strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.sim-step-bar {
  display: block; height: 3px; border-radius: 2px;
  background: rgba(127,127,127,.22); overflow: hidden;
}
.sim-step-fill { display: block; height: 100%; background: var(--red); width: 0; }

/* ⚠⚠ CHAQUE ÉTAPE EST DÉSIGNÉE PAR SON ATTRIBUT `data-go`, JAMAIS PAR SA
   POSITION. Ces règles s'écrivaient en `nth-of-type`, qui compte les frères de
   MÊME BALISE : elles fonctionnaient par chance, aucun autre `<button>` ne
   vivant dans `.sim-steps`. En ajouter un (une pause, un lien) aurait décalé
   toute la numérotation **sans la moindre erreur ni trace**, et l'étape
   courante aurait désigné sa voisine. C'est exactement le défaut rencontré sur
   la promenade le 01.10. Les boutons portaient déjà `data-go` pour le clic :
   on s'en sert aussi pour l'affichage, et le lien devient explicite. */

/* l'étape courante */
.sim[data-step="0"] .sim-step[data-go="0"],
.sim[data-step="1"] .sim-step[data-go="1"],
.sim[data-step="2"] .sim-step[data-go="2"],
.sim[data-step="3"] .sim-step[data-go="3"],
.sim[data-step="4"] .sim-step[data-go="4"] {
  /* ⚠ Plus marquée que l'état `:hover` des autres (.14), sans quoi survoler
     une étape voisine la ferait passer pour l'étape courante. */
  background: rgba(127,127,127,.16);
  border-color: rgba(213,43,30,.45);
}

.sim[data-step="0"] .sim-step[data-go="0"] .sim-step-label,
.sim[data-step="1"] .sim-step[data-go="1"] .sim-step-label,
.sim[data-step="2"] .sim-step[data-go="2"] .sim-step-label,
.sim[data-step="3"] .sim-step[data-go="3"] .sim-step-label,
.sim[data-step="4"] .sim-step[data-go="4"] .sim-step-label { opacity: 1; }

/* étapes déjà parcourues : barre pleine. Énumérées une à une — `nth-of-type`
   savait dire « jusqu'à la n-ième », un attribut ne le sait pas. Le gain de
   robustesse vaut largement ces dix lignes. */
.sim[data-step="1"] .sim-step[data-go="0"] .sim-step-fill,
.sim[data-step="2"] .sim-step[data-go="0"] .sim-step-fill,
.sim[data-step="2"] .sim-step[data-go="1"] .sim-step-fill,
.sim[data-step="3"] .sim-step[data-go="0"] .sim-step-fill,
.sim[data-step="3"] .sim-step[data-go="1"] .sim-step-fill,
.sim[data-step="3"] .sim-step[data-go="2"] .sim-step-fill,
.sim[data-step="4"] .sim-step[data-go="0"] .sim-step-fill,
.sim[data-step="4"] .sim-step[data-go="1"] .sim-step-fill,
.sim[data-step="4"] .sim-step[data-go="2"] .sim-step-fill,
.sim[data-step="4"] .sim-step[data-go="3"] .sim-step-fill { width: 100%; }

/* étape courante : barre pilotée par --fill (seule valeur continue du script) */
.sim[data-step="0"] .sim-step[data-go="0"] .sim-step-fill,
.sim[data-step="1"] .sim-step[data-go="1"] .sim-step-fill,
.sim[data-step="2"] .sim-step[data-go="2"] .sim-step-fill,
.sim[data-step="3"] .sim-step[data-go="3"] .sim-step-fill,
.sim[data-step="4"] .sim-step[data-go="4"] .sim-step-fill { width: var(--fill, 0%); }


/* ---- la fenêtre d'application ---- */
.sim-window {
  background: #fff; color: #1a1817;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(26,24,23,.45), 0 0 0 1px rgba(26,24,23,.08);
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.sim-chrome {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 16px; border-bottom: 1px solid #ece8e2;
}
.sim-chrome-brand { display: flex; align-items: center; gap: 10px; }
.sim-chrome-brand img { width: 28px; height: 28px; display: block; }
.sim-chrome-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.sim-chrome-brand strong { font-size: 13px; }
.sim-chrome-brand small { font-size: 11px; color: #8a847c; }

.sim-tabs { display: flex; gap: 4px; font-size: 13px; }
.sim-tab { padding: 7px 12px; border-radius: 9px; transition: background .3s, color .3s; }
.sim-tab-parcels { background: var(--red-wash); color: var(--red); }
.sim-tab-alerts {
  background: transparent; color: #1a1817;
  display: flex; align-items: center; gap: 6px;
}
.sim[data-step="4"] .sim-tab-parcels { background: transparent; color: #1a1817; }
.sim[data-step="4"] .sim-tab-alerts { background: var(--red-wash); color: var(--red); }

.sim-badge {
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center; padding: 0 5px;
  transform: scale(0);
  transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.sim.is-matched .sim-badge { transform: scale(1); }

.sim-body { display: grid; grid-template-columns: minmax(190px, 270px) minmax(0, 1fr); }

/* ---- le panneau latéral ---- */
/* ⚠⚠ LES PANNEAUX SONT EMPILÉS EN GRILLE, PAS EN POSITIONNEMENT ABSOLU — ET
   C'EST CE QUI CORRIGE UN DÉFAUT SILENCIEUX. En `position: absolute`, ils ne
   donnaient AUCUNE hauteur à ce conteneur, dont la taille venait donc d'un
   `min-height: 270px` écrit dans le point de rupture. Sur téléphone, le
   panneau « Ajouter une parcelle » réclame 261px et n'en recevait que 234
   (270 moins les marges) : le bouton « Enregistrer » était coupé, sans erreur
   et sans trace.
   Placés dans la MÊME cellule de grille, les panneaux se superposent comme
   avant — fondu et glissement inchangés — mais le conteneur reprend la hauteur
   du plus haut d'entre eux. Le nombre magique disparaît, et le défaut ne peut
   plus revenir quel que soit le contenu ajouté. */
.sim-side {
  position: relative;
  display: grid;
  padding: 18px;              /* remplace l'`inset: 18px` des panneaux */
  border-right: 1px solid #ece8e2;
  font-size: 13px;
  overflow: hidden;
}
.sim-panel {
  grid-area: 1 / 1;           /* tous dans la même cellule → ils se superposent */
  align-self: start;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s, transform .45s;
  pointer-events: none;
}
/* les panneaux déjà passés sortent par le haut */
.sim[data-step="1"] .sim-panel[data-panel="0"],
.sim[data-step="2"] .sim-panel[data-panel="0"],
.sim[data-step="2"] .sim-panel[data-panel="1"],
.sim[data-step="3"] .sim-panel[data-panel="0"],
.sim[data-step="3"] .sim-panel[data-panel="1"],
.sim[data-step="3"] .sim-panel[data-panel="2"],
.sim[data-step="4"] .sim-panel[data-panel="0"],
.sim[data-step="4"] .sim-panel[data-panel="1"],
.sim[data-step="4"] .sim-panel[data-panel="2"],
.sim[data-step="4"] .sim-panel[data-panel="3"] { transform: translateY(-14px); }

.sim[data-step="0"] .sim-panel[data-panel="0"],
.sim[data-step="1"] .sim-panel[data-panel="1"],
.sim[data-step="2"] .sim-panel[data-panel="2"],
.sim[data-step="3"] .sim-panel[data-panel="3"],
.sim[data-step="4"] .sim-panel[data-panel="4"] { opacity: 1; transform: translateY(0); }

.sim-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: #8a847c; text-transform: uppercase;
}
.sim-eyebrow-xs { font-size: 10px; }
.sim-panel label { display: flex; flex-direction: column; gap: 5px; }
.sim-field { border: 1px solid #ddd8d1; border-radius: 8px; padding: 9px 11px; }
.sim-field-active {
  border: 1.5px solid var(--red);
  box-shadow: 0 0 0 3px rgba(213,43,30,.12);
  min-height: 38px;
}
.sim-caret { color: var(--red); animation: kblink 1s step-end infinite; }
.sim-submit {
  align-self: flex-start;
  background: var(--red); color: #fff;
  padding: 9px 14px; border-radius: 8px; font-weight: 600;
  transition: background .3s;
}
.sim.is-submitting .sim-submit { background: var(--red-dark); }

.sim-ok { background: #eef6ee; color: #2d6a35; border-radius: 10px; padding: 11px 12px; }
.sim-card {
  border: 1.5px solid var(--red); border-radius: 12px;
  padding: 13px; background: #fdf5f4;
  display: flex; flex-direction: column; gap: 5px;
}
.sim-card strong { font-size: 14px; }
.sim-card span { font-size: 12px; color: #8a847c; }

.sim-count { font-size: 52px; font-weight: 800; line-height: 1; }
.sim-count-label { color: #8a847c; margin-top: -6px; }
.sim-note { color: #6a645c; line-height: 1.5; }

.sim-hit {
  border-radius: 12px; padding: 13px; background: #fbf1e3;
  display: flex; gap: 10px; align-items: flex-start;
}
.sim-hit-mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--amber); color: #fff; font-weight: 700;
  display: grid; place-items: center;
}
.sim-hit span:last-child { line-height: 1.45; }

.sim-meta { font-size: 12px; color: #8a847c; }
.sim-quote {
  border-left: 2px solid #ece8e2; padding-left: 11px;
  display: flex; flex-direction: column; gap: 7px;
}
.sim-quote strong { font-size: 14px; line-height: 1.3; }
.sim-deadline { font-size: 12px; line-height: 1.45; }
.sim-deadline strong { color: #9a4a0e; font-size: 12px; }
.sim-links { display: flex; gap: 12px; font-size: 12px; color: var(--red); }

/* ---- la carte ---- */
.sim-map {
  position: relative;
  aspect-ratio: 1.6;
  overflow: hidden;
  background: #f7f6f2;
}
.sim-basemap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sim-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.sim-ring {
  fill: rgba(217,119,6,.08);
  stroke: var(--amber); stroke-width: 4; stroke-dasharray: 18 12;
  transform-box: view-box; transform-origin: 800px 500px;
  transform: scale(.001);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), fill .5s, stroke .5s;
}
.sim.is-selected .sim-ring { transform: scale(1); }
.sim.is-saved .sim-ring { fill: rgba(37,99,235,.10); stroke: var(--parcel); }

.sim-parcel {
  fill: rgba(217,119,6,.35); stroke: var(--amber); stroke-width: 4;
  opacity: 0; transition: opacity .4s, fill .5s, stroke .5s;
}
.sim.is-selected .sim-parcel { opacity: 1; }
.sim.is-saved .sim-parcel { fill: rgba(37,99,235,.35); stroke: var(--parcel-dark); }

.sim-target {
  fill: rgba(217,119,6,.22); stroke: var(--amber); stroke-width: 3;
  opacity: 0; transition: opacity .4s;
}
.sim.is-matched .sim-target { opacity: 1; }

.sim-radar {
  position: absolute; left: 50%; top: 50%;
  width: 36.25%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .5s;
}
.sim.is-scanning .sim-radar { opacity: 1; }
.sim-radar span {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg,
    rgba(37,99,235,0) 0deg, rgba(37,99,235,0) 270deg,
    rgba(37,99,235,.18) 335deg, rgba(37,99,235,.55) 360deg);
  animation: krot 2.4s linear infinite;
}

.sim-ka {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -112%) scale(0);
  transform-origin: 50% 100%;
  transition: transform .45s cubic-bezier(.3,1.6,.5,1);
}
.sim.is-saved .sim-ka { transform: translate(-50%, -112%) scale(1); }
.sim-ka-head {
  display: block;
  background: var(--red); color: #fff;
  font-weight: 700; font-size: 12px;
  padding: 5px 8px; border-radius: 7px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.sim-ka-tip {
  display: block; width: 0; height: 0; margin: 0 auto;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--red);
}

.sim-pin {
  position: absolute; left: 56.4%; top: 38.6%;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: var(--amber); color: #fff;
  font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
  border: 2px solid #fff;
  transform: scale(0);
  transition: transform .4s cubic-bezier(.3,1.6,.5,1);
}
.sim.is-matched .sim-pin { transform: scale(1); animation: kping 1.4s ease-out infinite; }

.sim-mascot {
  position: absolute; right: -3%; bottom: -8%;
  width: 38%; max-width: 300px; height: auto;
  opacity: 0; transform: translateY(30%);
  transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.3));
  pointer-events: none;
}
.sim.is-scanning .sim-mascot { opacity: 1; transform: translateY(0); }

.sim-mail {
  position: absolute; right: 14px; top: 14px;
  width: min(360px, calc(100% - 28px));
  background: #fff; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.45);
  display: flex; gap: 11px;
  opacity: 0; transform: translateY(-20px);
  transition: opacity .45s, transform .5s cubic-bezier(.2,.8,.2,1);
}
.sim.is-notified .sim-mail { opacity: 1; transform: translateY(0); }
.sim-mail img { width: 32px; height: 32px; flex: none; }
.sim-mail-text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.sim-mail-from { display: flex; justify-content: space-between; gap: 8px; color: #8a847c; }
.sim-mail-from strong { color: #1a1817; }
.sim-mail-title { font-size: 13px; }
.sim-mail-body { color: #6a645c; }

.sim-fiction {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 10px; background: rgba(255,255,255,.85);
  padding: 2px 7px; border-radius: 5px;
}

.sim-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-play,
.sim-restart {
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(127,127,127,.35);
  background: transparent; color: inherit; cursor: pointer;
  transition: background .2s;
}
.sim-play:hover,
.sim-restart:hover { background: var(--bg); }

/* ===================== CE QU'ON SURVEILLE ===================== */

/* ⚠ DANS LE DOM, LE TEXTE VIENT AVANT LA PROMENADE, ET C'EST VOULU.
   L'inverse donnait, dès que la grille se replie, la carte de la simulation
   suivie de la carte de la promenade — deux images très proches à la file,
   sans un mot entre elles. Le texte d'abord vaut aussi pour un lecteur
   d'écran, qui suit l'ordre du DOM et non l'ordre visuel.

   ⚠⚠ LE SEUIL EST ÉCRIT, PLUS DÉDUIT. Cette grille s'exprimait en
   `repeat(auto-fit, minmax(min(100%, 400px), 1fr))` : son point de repli
   ÉMERGEAIT du 400px, des rembourrages en `clamp()` et de la gouttière —
   mesuré entre 980 et 1000px, mais imprévisible sur le papier et mouvant au
   moindre changement de rembourrage. Or c'est au MÊME endroit qu'il faut
   rendre sa place à la promenade (`order`). Deux seuils déduits séparément
   auraient dérivé l'un de l'autre en silence, et le bureau se serait retrouvé
   un jour avec le texte à gauche sans que rien ne le signale. Une seule
   valeur, un seul endroit. */
.section-watch {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (min-width: 1000px) {
  .section-watch { grid-template-columns: 1fr 1fr; }
  /* côte à côte : la promenade reprend la colonne de gauche, comme avant */
  .section-watch > .balade { order: -1; }
}
.watch-text h2 {
  margin: 18px 0 0;
  font-weight: 800; font-size: var(--t-h2-sm);
  line-height: 1; letter-spacing: -.04em;
  text-wrap: balance;
}
.watch-text .lead { margin: 20px 0 0; }

.watch-list { margin-top: 36px; border-top: 2px solid var(--ink); }
.watch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid rgba(18,21,26,.12);
}
.watch-row strong {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
}
.tag {
  justify-self: end;
  font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
}
.tag-parcel { background: var(--red); color: #fff; }
.tag-commune { background: var(--blue-pale); color: var(--blue-text); }
.watch-desc { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; color: var(--grey); }

/* ===================== LA PROMENADE =====================
   Kadastra parcourt la carte fictive et s'arrête sur quatre publications. Le
   script ne pose que `data-stop` (0→3) et trois classes ; les POSITIONS DES
   ARRÊTS vivent ici, en un seul endroit, parce qu'elles servent à la fois à
   l'épingle et au marcheur. Les déplacer, c'est quatre nombres à changer. */

.balade {
  position: relative;
  width: 100%; max-width: 540px;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 32px;
  overflow: hidden;
  background: #f7f6f2;
  box-shadow: 0 0 0 1px rgba(18,21,26,.08);
  color: var(--ink);

  --s0x: 22%;   --s0y: 26%;
  --s1x: 76%;   --s1y: 72%;
  --s2x: 24%;   --s2y: 72%;   /* ⚠ 80 % passait sous la fiche, qui le masquait */
  --s3x: 60.3%; --s3y: 38.6%;
}
.balade-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.balade-fade {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(247,246,242,0) 45%, rgba(247,246,242,.55) 100%);
}
.balade-ring {
  position: absolute; left: 50%; top: 50%;
  width: 58%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2.5px dashed var(--parcel);
  background: rgba(37,99,235,.07);
}
.balade-parcel {
  position: absolute; left: 50%; top: 50%;
  width: 6.5%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-35deg);
  background: rgba(37,99,235,.35);
  border: 2px solid var(--parcel-dark);
}
.balade-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -190%);
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 4px 7px; border-radius: 6px;
}

/* les épingles : posées au fur et à mesure du parcours.
   ⚠ L'ordre de superposition est EXPLICITE : sans lui, l'épingle de l'arrêt
   courant passe sous le marcheur, qui a justement les pieds dessus — on ne
   voyait qu'un croissant du repère au moment où il compte le plus. */
.balade-pin {
  position: absolute; z-index: 2;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .3s;
}
.balade-pin-cold { background: #9aa0a8; }
.balade-pin-commune { background: var(--parcel); }
.balade-pin-hot { background: var(--amber); }

/* ⚠⚠ CHAQUE ÉPINGLE NOMME SON ARRÊT (`data-at`), ON NE COMPTE PAS LES FRÈRES.
   `nth-of-type` compte les frères de MÊME BALISE, pas de même classe : comme
   l'étiquette « 1234 » est elle aussi un <span> et qu'elle les précède, elle
   décalait toute la numérotation d'un cran — les trois premières épingles
   prenaient la position de la suivante et l'épingle d'alerte n'en recevait
   aucune. Sans erreur, sans trace. Ajouter un élément avant les épingles ne
   peut plus rien casser. */
.balade-pin[data-at="0"] { left: var(--s0x); top: var(--s0y); }
.balade-pin[data-at="1"] { left: var(--s1x); top: var(--s1y); }
.balade-pin[data-at="2"] { left: var(--s2x); top: var(--s2y); }
.balade-pin[data-at="3"] { left: var(--s3x); top: var(--s3y); }

/* les arrêts déjà visités gardent leur épingle */
.balade[data-stop="1"] .balade-pin[data-at="0"],
.balade[data-stop="2"] .balade-pin[data-at="0"],
.balade[data-stop="2"] .balade-pin[data-at="1"],
.balade[data-stop="3"] .balade-pin[data-at="0"],
.balade[data-stop="3"] .balade-pin[data-at="1"],
.balade[data-stop="3"] .balade-pin[data-at="2"] { opacity: 1; }

/* l'arrêt courant ne pose la sienne qu'une fois le marcheur arrivé */
.balade.is-arrived[data-stop="0"] .balade-pin[data-at="0"],
.balade.is-arrived[data-stop="1"] .balade-pin[data-at="1"],
.balade.is-arrived[data-stop="2"] .balade-pin[data-at="2"],
.balade.is-arrived[data-stop="3"] .balade-pin[data-at="3"] { opacity: 1; }

/* ⚠⚠ L'ÉPINGLE D'ALERTE EST LE SUJET DE TOUTE LA SCÈNE. Plus grosse que les
   autres, et la seule à passer AU-DESSUS du marcheur : c'est ce qu'il vient de
   trouver qui compte, pas lui. Deux battements simultanés — l'onde qui s'écarte
   (box-shadow) et le repère qui respire (transform) — parce que l'onde seule
   est invisible sur une capture et faible au coin de l'œil. */
.balade-pin-hot {
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-width: 3px;
}
.balade.is-arrived[data-stop="3"] .balade-pin-hot {
  z-index: 5;
  animation: kbping 1.4s ease-out infinite,
             kbthrob 1.4s ease-in-out infinite;
}

/* le marcheur */
.balade-walker {
  position: absolute; z-index: 3;
  width: 30%; height: auto;
  /* ⚠ -100 % et non -88 % : le marcheur se tient AU-DESSUS de son repère,
     il ne marche pas dessus. À -88 % le bas de la feuille recouvrait
     l'épingle d'alerte — celle qu'on vient justement regarder. L'ombre est
     allégée pour la même raison : à 14 px elle tombait pile sur le repère. */
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  transition: left 1.1s cubic-bezier(.45,0,.2,1), top 1.1s cubic-bezier(.45,0,.2,1);
  filter: drop-shadow(0 7px 9px rgba(0,0,0,.22));
  pointer-events: none;
}
.balade[data-stop="0"] .balade-walker { left: var(--s0x); top: var(--s0y); }
.balade[data-stop="1"] .balade-walker { left: var(--s1x); top: var(--s1y); }
.balade[data-stop="2"] .balade-walker { left: var(--s2x); top: var(--s2y); }
.balade[data-stop="3"] .balade-walker { left: var(--s3x); top: var(--s3y); }
.balade.is-walking .balade-walker { animation: kbwalk .55s ease-in-out infinite; }

/* la fiche de la publication examinée */
.balade-card {
  position: absolute; left: 5%; right: 5%; bottom: 5%;
  background: #fff; border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 18px 36px -14px rgba(18,21,26,.4);
  z-index: 4;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1);
}
.balade.is-card .balade-card { opacity: 1; transform: translateY(0); }

.balade-head { display: flex; align-items: center; gap: 10px; }
.balade-bo {
  flex: none; width: 34px; height: 40px;
  border-radius: 4px; background: #f7f3ea; border: 1px solid #e2dcd0;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  padding: 4px; gap: 2px;
}
.balade-bo strong { font-size: 10px; line-height: 1; }
.balade-bo i { display: block; width: 100%; height: 2px; background: #c9c2b6; }
.balade-bo i:first-of-type { background: var(--red); }
.balade-bo i:last-of-type { width: 70%; }

/* les quatre fiches occupent la même case : une seule est visible */
.balade-texts { display: grid; min-width: 0; }
.balade-slide {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  opacity: 0; transition: opacity .3s;
}
.balade-slide em {
  font-style: normal;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #8a847c;
}
.balade-slide strong { font-size: 13px; line-height: 1.25; }

.balade-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 12px; color: var(--grey);
}
.balade-verdicts { display: grid; }
.balade-verdict {
  grid-area: 1 / 1; justify-self: end;
  font-weight: 800; font-size: 12px;
  padding: 5px 10px; border-radius: 999px;
  white-space: nowrap;
  opacity: 0; transform: scale(.6);
  transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.v-cold { background: var(--bg); color: var(--grey); }
.v-commune { background: var(--blue-pale); color: var(--blue-text); }
.v-hot { background: var(--red); color: #fff; }

.balade[data-stop="0"] .balade-slide[data-card="0"],
.balade[data-stop="1"] .balade-slide[data-card="1"],
.balade[data-stop="2"] .balade-slide[data-card="2"],
.balade[data-stop="3"] .balade-slide[data-card="3"] { opacity: 1; }

.balade.is-verdict[data-stop="0"] .balade-verdict[data-card="0"],
.balade.is-verdict[data-stop="1"] .balade-verdict[data-card="1"],
.balade.is-verdict[data-stop="2"] .balade-verdict[data-card="2"],
.balade.is-verdict[data-stop="3"] .balade-verdict[data-card="3"] { opacity: 1; transform: scale(1); }

/* ===================== POURQUOI ===================== */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--gap);
}
/* ⚠ PLUS DE `min-height` ICI — c'était un 240px en dur, indifférent à la
   longueur du texte. Avec des libellés courts, la tuile gardait sa taille et
   le vide s'installait sous le numéro : « des tuiles énormes par rapport au
   texte ». Même défaut, même famille que le `min-height: 270px` qui coupait le
   bouton « Enregistrer » dans la simulation : une hauteur décidée d'avance
   plutôt que déduite du contenu.
   ⚠ `margin-top: auto` sur le titre est CONSERVÉ et devient utile : la grille
   égalise déjà la hauteur des tuiles d'une même rangée, et il aligne leurs
   textes sur le bas quelle que soit la longueur. C'est lui qui fait le travail
   que le `min-height` croyait faire. */
.why-card {
  background: var(--bg); border-radius: var(--radius-card);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.why-n {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--red); color: #fff; font-weight: 800;
  display: grid; place-items: center;
}
.why-card strong {
  margin-top: auto;
  font-size: 18px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15;
}
.why-card span:last-child { font-size: 14px; line-height: 1.5; color: var(--grey); }

/* ===================== PRIX (tarification du 18.10) =====================
   Une carte rouge (le choix et le montant) et le tableau des paliers. Le
   montant EN GRAND est le total annuel, celui qui est prélevé ; le mensuel
   n'est qu'une aide à la lecture, en plus petit. */

.tarif {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gap);
  /* Les deux cartes partent du même bord haut et finissent ensemble. */
  align-items: stretch;
}
.tarif-carte {
  background: var(--red); color: #fff;
  border-radius: var(--radius-card);
  padding: 30px;
  display: flex; flex-direction: column; gap: 14px;
}
.tarif-carte p { margin: 0; }
/* L'essai gratuit se lit en premier : c'est ce que le visiteur engage
   aujourd'hui (0 CHF). Les conditions détaillées suivent plus bas. */
.tarif-badge {
  align-self: flex-start;
  background: #fff; color: var(--red);
  border-radius: 999px; padding: 8px 16px;
  font-size: 18px; font-weight: 800; letter-spacing: -.01em;
}
.tarif-echeancier {
  background: rgba(255,255,255,.14);
  border-radius: 12px; padding: 12px 14px;
  font-size: 15px; font-weight: 700; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.tarif-label { font-size: 18px; font-weight: 800; }
.tarif-select {
  align-self: flex-start;
  min-width: 120px; padding: 10px 14px;
  border: 0; border-radius: 12px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: 20px; font-weight: 800;
}
.tarif-select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.tarif-total {
  font-size: clamp(40px, 6vw, 56px); font-weight: 800;
  letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarif-total small { font-size: 16px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.85); }
.tarif-mensuel { font-size: 17px; font-weight: 700; }
.tarif-suivante,
.tarif-essai { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.88); }
.tarif-essai { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.3); }
.tarif-form { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tarif-label-email { font-size: 14px; font-weight: 700; }
.tarif-email {
  padding: 12px 14px; border: 0; border-radius: 12px;
  background: #fff; color: var(--ink); font: inherit;
}
.tarif-email:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.tarif-btn {
  flex: 1;
  text-align: center; padding: 15px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer;
  transition: background .2s, color .2s;
}
.tarif-btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.tarif-btn:disabled { cursor: default; opacity: .75; }

.tarif-grille {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  background: #fff; border: 1px solid var(--bg);
  border-radius: var(--radius-card);
  padding: 30px;
}
.tarif-grille-titre { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
/* ⚠ Le tableau défile dans son cadre sur téléphone, jamais la page entière. */
.tarif-table {
  display: block; overflow-x: auto;
  border-collapse: collapse;
  font-size: 15px; font-variant-numeric: tabular-nums;
}
.tarif-table th,
.tarif-table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--bg); }
.tarif-table th[scope="row"],
.tarif-table thead th:first-child { text-align: left; }
.tarif-table th[scope="row"] { white-space: nowrap; }
.tarif-table thead th { font-size: 13px; font-weight: 700; color: var(--grey); vertical-align: bottom; }
.tarif-table tr[data-courant] { background: var(--red-wash); }
.tarif-table tr[data-courant] th,
.tarif-table tr[data-courant] td { font-weight: 800; }
.tarif-pro { margin: 0; margin-top: auto; color: var(--grey); }
/* Téléphone : les quatre colonnes doivent tenir sans défiler à 360 px. */
@media (max-width: 560px) {
  .tarif-carte, .tarif-grille { padding: 20px; }
  .tarif-table { font-size: 14px; }
  .tarif-table th,
  .tarif-table td { padding: 7px 6px; }
  .tarif-table thead th { font-size: 12px; }
}

/* ===================== PRO ===================== */

.section-pro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.pro-text { display: flex; flex-direction: column; gap: 18px; }
.pro-text h2 {
  margin: 0; font-weight: 800;
  font-size: clamp(25px, 2.8vw, 40px);
  line-height: 1.05; letter-spacing: -.04em;
  text-wrap: balance;
}
.pro-text p {
  margin: 0; font-size: var(--t-lead); line-height: 1.6;
  color: rgba(255,255,255,.78); max-width: 46ch; text-wrap: pretty;
}
.pro-text .btn-white { align-self: flex-start; margin-top: 8px; }
.pro-text .pro-terms {
  align-self: flex-start; font-size: 14px;
  color: rgba(255,255,255,.78); text-decoration: underline; text-underline-offset: 3px;
}
.pro-text .pro-terms:hover { color: #fff; }
.pro-tiles { display: flex; flex-direction: column; gap: 10px; }
.pro-tile {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-tile);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.pro-tile strong { font-size: 16px; font-weight: 800; }
.pro-tile span { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7); }

/* ===================== BANDEAU SUISSE ===================== */

.swiss-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--paper); border-radius: 999px;
  font-size: 13px; color: var(--grey); text-align: center;
}
.swiss-bar strong { color: var(--ink); }

/* ===================== QUESTIONS ===================== */

.section-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 40px;
}
.section-faq .section-title { margin: 0; font-size: var(--t-h2); }
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--bg); border-radius: 22px; }
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  /* ⚠ Rangées resserrées : 16px de rembourrage vertical + 15px de texte font
     une cible tactile d'environ 47px, au-dessus des 44px recommandés. Ne pas
     descendre plus bas. */
  gap: 16px; padding: 16px 18px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; color: var(--ink);
  text-align: left; font-size: 15px; font-weight: 700;
}
.faq-plus {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: grid; place-items: center; font-size: 20px;
  transition: background .25s, color .25s, transform .25s;
}
.faq-q[aria-expanded="true"] .faq-plus {
  background: var(--red); color: #fff; transform: rotate(45deg);
}
.faq-a { display: none; }
.faq-q[aria-expanded="true"] + .faq-a { display: block; }
.faq-a p {
  margin: 0; padding: 0 56px 18px 18px;
  font-size: 14px; line-height: 1.6; color: var(--grey);
}

/* ===================== APPEL FINAL ===================== */

.final {
  border-radius: var(--radius-section);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: center;
}
.final-text { padding: clamp(36px, 6vw, 88px); }
.final-text h2 {
  margin: 0; font-weight: 800;
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: 1; letter-spacing: -.045em;
  text-wrap: balance;
}
.final-text h2 span { color: var(--coral); }
.final-text .btn { margin-top: 36px; }
.final-figure {
  display: flex; justify-content: center; align-self: end;
  padding: 24px 24px 0;
}
.final-figure img { width: 100%; max-width: 380px; height: auto; display: block; margin-bottom: -8%; }

/* ===================== PIED DE PAGE ===================== */

.site-footer {
  padding: 20px 24px 28px;
  display: flex; flex-direction: column; gap: 16px;
  font-size: 13px; color: var(--grey);
}
.disclaimer { margin: 0; max-width: 90ch; line-height: 1.6; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
}
.footer-links { display: flex; gap: 20px; }

/* ===================== ANIMATIONS ===================== */

@keyframes krot { to { transform: rotate(360deg); } }
@keyframes kping {
  0% { box-shadow: 0 0 0 0 rgba(217,119,6,.65); }
  100% { box-shadow: 0 0 0 16px rgba(217,119,6,0); }
}
@keyframes kblink { 50% { opacity: 0; } }
@keyframes kbwalk {
  0%, 100% { transform: translate(-50%, -100%) rotate(-3.5deg); }
  50%      { transform: translate(-50%, -103%) rotate(3.5deg); }
}
@keyframes kbping {
  0%   { box-shadow: 0 0 0 0 rgba(217,119,6,.85); }
  100% { box-shadow: 0 0 0 20px rgba(217,119,6,0); }
}
@keyframes kbthrob {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}

/* ===================== ADAPTATIONS ===================== */

@media (max-width: 760px) {
  .sim-body { grid-template-columns: 1fr; }
  /* ⚠ PLUS DE `min-height` ICI : la hauteur vient désormais du plus haut
     panneau (voir l'empilement en grille de `.sim-side`). C'est ce nombre
     magique qui coupait le bouton « Enregistrer ». */
  .sim-side { border-right: 0; border-bottom: 1px solid #ece8e2; }
  .hero-body { padding: 120px 20px 36px; }
  .demo-head p { justify-self: start; }
}

/* ===================== TÉLÉPHONE =====================
   Mesuré à 390 × 844 avant correction : bandeau 173px (20% de l'écran),
   liste d'étapes 385px, étapes + fenêtre = 902px pour 844px d'écran (donc
   jamais les deux ensemble), et 291px utiles sur 390 — 99px, soit le quart
   de la largeur, mangés par deux rembourrages emboîtés. */
@media (max-width: 560px) {

  /* ---- 1. rendre la largeur au contenu ----
     `.shell` et `.section` empilaient leurs rembourrages. On les resserre ;
     les cartes arrondies restent, c'est l'identité graphique. */
  :root {
    --gap: 8px;
    --section-pad: 16px;
    --radius-section: 24px;
  }

  /* ---- 2. le bandeau tient sur UNE rangée ----
     La navigation sort du flux et devient un panneau déroulant. */
  .header-pill { flex-wrap: nowrap; gap: 4px; padding: 6px 6px 6px 12px; }
  .brand { margin-right: 0; }
  .brand span { font-size: 15px; }
  .btn-login { margin-left: auto; font-size: 13px; padding: 9px 14px; }
  .header-burger { display: flex; }

  .header-nav {
    position: absolute;
    top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; flex-wrap: nowrap; gap: 2px;
    padding: 8px;
    /* ⚠ OPAQUE, PAS TRANSLUCIDE. Essayé d'abord en `rgba(255,255,255,.96)`
       comme la pilule : au-dessus de la photo du haut de page, le titre blanc
       transparaissait et les libellés devenaient illisibles. La pilule, elle,
       peut rester translucide : elle ne porte qu'une ligne. */
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 30px -12px rgba(18,21,26,.3), 0 0 0 1px rgba(18,21,26,.06);
    /* ⚠ FERMÉ PAR DÉFAUT, et la règle d'ouverture est PLUS SPÉCIFIQUE
       (`.site-header[data-menu="open"] .header-nav`). Poser `display:none`
       ici et compter sur l'attribut `hidden` du HTML ne marcherait pas : une
       règle d'auteur écrase toujours la feuille du navigateur — piège
       rencontré trois fois sur cette page. */
    display: none;
  }
  .site-header[data-menu="open"] .header-nav { display: flex; }
  .header-pill { position: relative; }
  .header-nav a { padding: 12px 14px; font-size: 15px; }

  /* Le panneau est une colonne : le séparateur du sélecteur passe au-dessus,
     et les trois langues s'étalent sur une rangée au bas du menu. */
  .header-langues {
    margin: 4px 0 0; padding: 8px 6px 2px;
    border-left: 0;
    border-top: 1px solid rgba(18,21,26,.12);
    justify-content: flex-start; gap: 4px;
  }
  .header-langues a { padding: 9px 12px; font-size: 13px; }

  /* ---- 3. les cinq étapes sur une rangée, la courante seule déployée ----
     ⚠⚠ ON NE MASQUE PLUS LES QUATRE AUTRES, ET C'EST UN CORRECTIF DE TESTS.
     Les cinq libellés occupaient 385px ; la réponse d'alors fut de n'afficher
     que l'étape courante (`display: none` sur les quatre autres). Elle a coûté
     cher : sur téléphone il ne restait RIEN à cliquer à l'écran, donc aucun
     moyen de découvrir qu'on pouvait figer la séquence — et aucun moyen de
     naviguer, même en le sachant.

     Elles reviennent toutes, repliées sur leur seul numéro : une rangée de
     cinq pastilles dont la courante s'étire pour porter son libellé. ~60px au
     total, soit la hauteur de l'ancienne solution, et les cinq redeviennent
     des cibles tactiles. La fenêtre de l'application reste visible avec. */
  .sim-steps { display: flex; gap: 6px; align-items: stretch; }
  .sim-step {
    position: relative;      /* ancre le libellé replié, voir plus bas */
    flex: 0 0 auto;
    padding: 10px 12px; gap: 6px;
    min-width: 42px;
    justify-content: center;
  }
  .sim-step-label { justify-content: center; }
  .sim-step-n { font-size: 16px; }
  .sim-step strong { font-size: 14px; }

  /* ⚠ LE LIBELLÉ REPLIÉ EST RETIRÉ DE L'ŒIL, PAS DE L'ARBRE D'ACCESSIBILITÉ.
     `display: none` l'aurait sorti du nom accessible du bouton, qui n'aurait
     plus annoncé que « 3/5 » — une cible sans destination pour qui n'utilise
     pas l'écran. La mise hors champ garde le texte lisible par les lecteurs
     d'écran. C'est aussi pourquoi `.sim-step` est `position: relative` :
     sans ancre, le texte s'échapperait vers le premier parent positionné. */
  .sim-step strong {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* la courante se déploie et occupe toute la largeur restante */
  .sim[data-step="0"] .sim-step[data-go="0"],
  .sim[data-step="1"] .sim-step[data-go="1"],
  .sim[data-step="2"] .sim-step[data-go="2"],
  .sim[data-step="3"] .sim-step[data-go="3"],
  .sim[data-step="4"] .sim-step[data-go="4"] {
    flex: 1 1 auto;
    padding: 10px 14px;
    justify-content: flex-start;
  }
  .sim[data-step="0"] .sim-step[data-go="0"] .sim-step-label,
  .sim[data-step="1"] .sim-step[data-go="1"] .sim-step-label,
  .sim[data-step="2"] .sim-step[data-go="2"] .sim-step-label,
  .sim[data-step="3"] .sim-step[data-go="3"] .sim-step-label,
  .sim[data-step="4"] .sim-step[data-go="4"] .sim-step-label { justify-content: flex-start; }
  .sim[data-step="0"] .sim-step[data-go="0"] strong,
  .sim[data-step="1"] .sim-step[data-go="1"] strong,
  .sim[data-step="2"] .sim-step[data-go="2"] strong,
  .sim[data-step="3"] .sim-step[data-go="3"] strong,
  .sim[data-step="4"] .sim-step[data-go="4"] strong {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .sim-hint { margin-top: -4px; font-size: 12.5px; }

  /* ---- 4. le haut de page, allégé du bandeau à trois rangées ---- */
  .hero-body { padding: 92px 18px 30px; }

  .sim { gap: 12px; }
}

/* ⚠ Exigence du brief : couper le bandeau, le flottement, le radar et la
   pulsation. La lecture automatique est coupée par le script, pas ici. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .balade-walker,
  .sim-radar span,
  .sim.is-matched .sim-pin,
  .balade .balade-pin-hot,
  .sim-caret { animation: none; }
  * { transition-duration: .01ms !important; }
}