/* Balisia, les pages publiques : vitrine et textes légaux.
 *
 * Mêmes jetons que l'outil, autre densité. L'outil se lit debout, dehors, une
 * carte sous les yeux ; ces pages se lisent assis, d'une traite. D'où une
 * colonne étroite, un interlignage plus ample et des titres plus grands que
 * dans l'interface.
 *
 * L'or reste un accent, conformément à la charte. La seule surface jaune de la
 * page est la lame d'un indicateur de direction : ce n'est pas un aplat de
 * marque, c'est la représentation de l'objet dont l'outil s'occupe, et sa
 * couleur est celle de la signalisation pédestre suisse.
 */

body.page-publique {
  height: auto;
  background: var(--surface-100);
  font-size: 16px;
  line-height: 26px;
}

.v-bande {
  border-bottom: 1px solid var(--surface-300);
  background: var(--surface-100);
}
.v-bande-interieur, .v-colonne {
  max-width: 940px; margin: 0 auto; padding: 0 var(--space-6);
}
.v-entete-public {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); height: 68px;
}
.v-entete-public .marque-logo { height: 26px; display: block; }
.v-entete-public nav {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  justify-content: flex-end;
}
/* Viser la classe et non le lien : « .v-entete-public nav a » l'emportait sur
   « .v-bouton-entrer », plus spécifique d'un élément, et peignait le bouton
   d'appel en gris sur noir. Mesuré le 29.09.2026 : 2,46:1, sous le seuil de
   4,5:1. Le bouton porte sa propre classe, la règle la contourne désormais. */
.v-entete-public nav a.v-lien-nav {
  color: var(--ink-600); text-decoration: none; font-size: 14px;
}
.v-entete-public nav a.v-lien-nav:hover {
  color: var(--ink-900); text-decoration: underline;
}

.v-bouton-entrer {
  background: var(--ink-900); color: var(--surface-100);
  padding: 9px 18px; border-radius: var(--radius-pill);
  text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.v-bouton-entrer:hover { background: var(--ink-600); }

/* ── L'ouverture ───────────────────────────────────────────────────────────
   Ce que l'on voit d'abord est l'objet du métier : une face d'indicateur de
   direction, avec ses destinations, ses temps de marche et son code. Celle-ci
   n'est pas inventée : c'est la face 9P-PO-R-OSO-1 de Veytaux – Chillon,
   telle qu'elle est posée et telle que Balisia la décrit. */
.v-ouverture {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--space-8); align-items: center;
  padding: 72px var(--space-6) 64px;
}
.v-ouverture h1 {
  font-size: 40px; line-height: 48px; letter-spacing: -0.4px;
  margin: 0 0 var(--space-4);
}
.v-ouverture p { color: var(--ink-600); margin: 0 0 var(--space-6); max-width: 34em; }
.v-ouverture .appel { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }

/* L'appel de l'ouverture porte l'or, celui de l'en-tête reste à l'encre : sur
   un même écran, deux boutons identiques ne disent pas lequel compte. L'or est
   aussi celui du bouton principal de l'outil, ce qui fait le lien entre la
   page et l'application. Texte à l'encre du logo : 9,32:1. */
.v-bouton-appel {
  background: var(--brand-gold); color: var(--ink-900);
  border: 1px solid var(--brand-gold);
  padding: 11px 22px; border-radius: var(--radius-pill);
  text-decoration: none; font-size: 15px; font-weight: 700; white-space: nowrap;
}
.v-bouton-appel:hover { filter: brightness(.95); }

.v-panneau-demo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.v-lame {
  display: flex; align-items: baseline; gap: var(--space-4);
  background: var(--face-lisible); color: #1A1A1A;
  padding: 11px 34px 11px 18px; width: 100%;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  box-shadow: var(--ombre-panneau);
}
.v-lame-nom { font-weight: 700; font-size: 17px; line-height: 22px; }
.v-lame-temps {
  margin-left: auto; font-weight: 700; font-size: 17px;
  padding-right: 6px; white-space: nowrap;
}
.v-lame-mat {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px dashed var(--surface-300);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-400);
}

/* ── Les sections ──────────────────────────────────────────────────────── */
.v-section { padding: 56px 0; border-top: 1px solid var(--surface-300); }
.v-section.v-creuse { background: var(--surface-200); }
.v-section h2 { font-size: 27px; line-height: 34px; margin: 0 0 var(--space-3); }
.v-section .v-chapeau { color: var(--ink-600); margin: 0 0 var(--space-8); max-width: 46em; }

.v-volets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-8); }
.v-volet h3 { font-size: 17px; margin: 0 0 6px; }
.v-volet p { margin: 0; color: var(--ink-600); font-size: 15px; line-height: 24px; }
.v-volet .v-rang {
  font-family: var(--font-mono); font-size: 12px; color: var(--brand-gold-ink);
  background: var(--brand-gold); border-radius: var(--radius-sm);
  padding: 1px 6px; margin-right: 8px;
}

/* Les huit étapes SONT une suite : on ne peut pas valider la cinquième avant
   la quatrième. Le numéro porte donc une information, il ne décore pas. */
.v-etapes { counter-reset: etape; display: grid; gap: 2px; }
.v-etape {
  display: grid; grid-template-columns: 26px minmax(9em, 14em) 1fr;
  gap: var(--space-4); align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--surface-300);
}
.v-etape:last-child { border-bottom: none; }
.v-etape::before {
  counter-increment: etape; content: counter(etape);
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-400);
}
.v-etape b { font-weight: 600; }
.v-etape span { color: var(--ink-600); font-size: 15px; }

.v-mandats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: var(--space-6); }
.v-mandat {
  background: var(--surface-100); border: 1px solid var(--surface-300);
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column;
}
/* La galerie d'une référence. Le défilement est celui du navigateur, avec
   accrochage : sans JavaScript la bande reste parcourable au doigt, et les
   flèches et les points ne sont que des commodités posées par-dessus. */
.v-galerie { position: relative; background: var(--surface-200); }
.v-galerie:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; }
.v-galerie-piste {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.v-galerie-piste::-webkit-scrollbar { display: none; }
.v-galerie-piste img {
  flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  display: block; scroll-snap-align: start;
}

.v-galerie-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(25, 23, 21, .62); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.v-galerie:hover .v-galerie-fleche,
.v-galerie:focus-within .v-galerie-fleche { opacity: 1; }
.v-galerie-fleche:hover { background: var(--ink-900); }
.v-galerie-fleche:disabled { opacity: 0 !important; pointer-events: none; }
.v-galerie-avant { left: 8px; }
.v-galerie-apres { right: 8px; }

.v-galerie-points {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
}
.v-galerie-point {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .85); background: rgba(25, 23, 21, .35);
}
.v-galerie-point.actif { background: #fff; }

/* Sur un écran tactile, les flèches ne se révèlent jamais au survol : on les
   laisse visibles. */
@media (hover: none) {
  .v-galerie-fleche { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v-galerie-piste { scroll-behavior: auto; }
}
.v-mandat-texte { padding: var(--space-6); }
.v-mandat-pieces {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--surface-200);
  font-size: 13px; line-height: 21px; color: var(--ink-400);
}
.v-mandat h3 { margin: 0 0 4px; font-size: 16px; }
.v-mandat .v-lieu { color: var(--ink-400); font-size: 13px; margin: 0 0 var(--space-3); }
.v-mandat p { margin: 0; color: var(--ink-600); font-size: 14px; line-height: 23px; }
.v-mandat .v-chiffre {
  display: block; font-size: 30px; line-height: 36px; font-weight: 700;
  margin-bottom: 2px;
}

.v-donnees-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.v-donnees-liste li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); color: var(--ink-600); }
.v-donnees-liste li::before { content: '—'; color: var(--ink-400); }

.v-pied-public {
  border-top: 1px solid var(--surface-300); background: var(--surface-200);
  padding: var(--space-8) 0; font-size: 14px; color: var(--ink-600);
}
.v-pied-public .v-colonne { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.v-pied-public a { color: var(--ink-600); }
.v-pied-public nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }

/* ── Les pages de texte ────────────────────────────────────────────────── */
.v-texte-legal { max-width: 720px; margin: 0 auto; padding: 56px var(--space-6) 72px; }
.v-texte-legal h1 { font-size: 32px; line-height: 40px; margin: 0 0 var(--space-2); }
.v-texte-legal .v-mise-a-jour { color: var(--ink-400); font-size: 14px; margin: 0 0 var(--space-8); }
.v-texte-legal h2 { font-size: 20px; line-height: 27px; margin: var(--space-8) 0 var(--space-3); }
.v-texte-legal h3 { font-size: 16px; margin: var(--space-6) 0 var(--space-2); }
.v-texte-legal p, .v-texte-legal li { color: var(--ink-600); }
.v-texte-legal ul { padding-left: 1.1em; }
.v-texte-legal li { margin-bottom: 6px; }
.v-texte-legal table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; font-size: 15px; }
.v-texte-legal th, .v-texte-legal td {
  text-align: left; vertical-align: top; padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--surface-300);
}
.v-texte-legal th { color: var(--ink-900); font-weight: 600; }
.v-texte-legal td { color: var(--ink-600); }

/* Cinq entrées et un bouton ne tiennent plus sous 1040 px : les liens de
   navigation s'effacent avant que l'en-tête ne déborde, le bouton reste. */
@media (max-width: 1040px) {
  .v-entete-public nav a.v-lien-nav { display: none; }
}

@media (max-width: 820px) {
  .v-ouverture { grid-template-columns: 1fr;
                 padding: 40px var(--space-6) 48px; gap: var(--space-8); }
  .v-ouverture h1 { font-size: 31px; line-height: 39px; }
  .v-volets, .v-mandats { grid-template-columns: minmax(0, 1fr); }
  .v-etape { grid-template-columns: 22px 1fr; }
  .v-etape span { grid-column: 2; }
  .v-entete-public nav a.v-lien-nav { display: none; }
  .v-section { padding: 40px 0; }
}

/* La barre d'acceptation des conditions, à la première connexion.
   Elle reste au pied de l'écran : le texte se lit en entier, mais on ne perd
   jamais de vue ce que l'on est en train d'accepter. */
.v-barre-acceptation {
  position: sticky; bottom: 0; margin-top: var(--space-8);
  background: var(--surface-100); border-top: 2px solid var(--ink-900);
  box-shadow: var(--ombre-flottant); padding: var(--space-4) 0;
}
.v-barre-acceptation-corps {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.v-barre-acceptation p { margin: 0; font-size: 14px; max-width: 34em; }
.v-barre-acceptation-boutons {
  display: flex; align-items: center; gap: var(--space-4);
}
.v-barre-acceptation .lien-discret { margin-left: 0; }

/* ── Le constat ─────────────────────────────────────────────────────────
   La dérive puis la reprise, comme dans la fiche produit : une ligne qui
   s'emballe, une ligne qui s'ordonne. Rendue en typographie plutôt qu'en
   image, pour rester nette à l'impression et lisible sans couleur. */
.v-derive { margin: var(--space-8) 0; display: grid; gap: var(--space-3); }
.v-derive-ligne {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: 14px;
}
.v-derive-ligne span, .v-derive-ligne strong { position: relative; padding-right: var(--space-6); }
.v-derive-ligne span::after, .v-derive-ligne strong::after {
  content: '→'; position: absolute; right: 6px; opacity: .45;
}
.v-derive-ligne > :last-child::after { content: none; padding-right: 0; }
.v-derive-avant { color: var(--ink-400); }
.v-derive-avant strong { color: var(--danger); }
.v-derive-apres { color: var(--ink-600); }
.v-derive-apres strong {
  color: var(--ink-900); background: var(--brand-gold);
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.v-derive-apres strong::after { content: none; }

.v-constats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.v-constat-photo {
  width: 100%; aspect-ratio: 31 / 20; object-fit: cover; display: block;
  border-radius: var(--radius-md); margin-bottom: var(--space-3);
  background: var(--surface-300);
}
.v-constat h3 { font-size: 16px; margin: 0 0 6px; }
.v-constat p { margin: 0; color: var(--ink-600); font-size: 15px; line-height: 24px; }

/* ── Le signalement, en regard d'un téléphone ──────────────────────────
   Le cadre est dessiné en CSS et non photographié : il tient sa place tant
   qu'aucune capture n'est disponible, et il ne montre rien de faux. */
.v-duo { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; }
/* ── Les captures de l'application ────────────────────────────────────
   Pleine largeur de la colonne : une carte lue à 300 px ne montre rien. La
   légende porte ce qu'il faut regarder, parce qu'un écran d'outil ne se lit
   pas tout seul. */
.v-ecran { margin: 0 0 var(--space-8); }
.v-ecran img {
  width: 100%; height: auto; display: block; border-radius: var(--radius-md);
  border: 1px solid var(--surface-300); box-shadow: var(--ombre-panneau);
  background: var(--surface-200);
}
.v-ecran figcaption {
  margin-top: var(--space-3); color: var(--ink-600);
  font-size: 15px; line-height: 24px; max-width: 46em;
}
.v-ecran figcaption b { color: var(--ink-900); }

.v-telephone { margin: 0; display: flex; flex-direction: column; align-items: center; }
.v-telephone img {
  width: min(260px, 100%); display: block;
  border: 8px solid var(--ink-900); border-radius: 26px;
  box-shadow: var(--ombre-flottant); background: var(--surface-100);
}
.v-telephone figcaption {
  margin-top: var(--space-3); font-size: 13px; color: var(--ink-400);
}

/* ── Les options ──────────────────────────────────────────────────────── */
.v-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.v-option {
  border-left: 3px solid var(--brand-gold); padding-left: var(--space-4);
}
.v-option h3 { font-size: 16px; margin: 0 0 6px; }
.v-option p { margin: 0; color: var(--ink-600); font-size: 15px; line-height: 24px; }

.v-autres {
  margin: var(--space-6) 0 0; color: var(--ink-600); font-size: 15px;
  max-width: 52em;
}

/* ── L'appel final ────────────────────────────────────────────────────── */
.v-appel-final {
  background: var(--ink-900); color: var(--surface-100);
  padding: 64px 0; border-top: 1px solid var(--surface-300);
}
.v-appel-final h2 { font-size: 27px; line-height: 34px; margin: 0 0 var(--space-3); }
.v-appel-final p { color: var(--surface-300); margin: 0 0 var(--space-8); max-width: 44em; }
.v-coordonnees { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.v-coordonnees-detail { display: grid; gap: 4px; font-size: 15px; }
.v-coordonnees-detail div { color: var(--surface-300); }
.v-coordonnees-detail a { color: var(--surface-100); }

/* Le second appel de l'ouverture, discret à côté du bouton d'or. */
.v-lien-appel { color: var(--ink-600); font-size: 14px; }
.v-lien-appel:hover { color: var(--ink-900); }

@media (max-width: 820px) {
  .v-constats, .v-options, .v-mandats { grid-template-columns: minmax(0, 1fr); }
  .v-duo { grid-template-columns: minmax(0, 1fr); }
  .v-appel-final { padding: 44px 0; }
  .v-appel-final h2 { font-size: 22px; line-height: 29px; }
  .v-coordonnees { gap: var(--space-6); }
}