/* La vitrine publique — /demo, et rien d'autre.
 *
 * Elle est servie SANS session, et surtout SANS JavaScript : le HTML arrive déjà rempli,
 * écrit par `workers/vitrine.py`. C'est ce qui la rend lisible par un robot d'indexation et
 * par un moteur génératif, qui ne rendent pas le JS — donc c'est ce qui décide de son
 * existence, pas un détail de mise en œuvre.
 *
 * Cette feuille ne définit AUCUNE couleur, AUCUNE police, AUCUN état. Elle arrive après
 * `tokens.css` et `app.css`, et ne pose que le cadre de page : largeur, sections, en-tête,
 * appel à l'action. Tout ce qui a déjà un nom dans l'application le garde ici — `.lv-ok`,
 * `.dot`, `.next`, `.card`, `.btn`, `.badge-state`, `.muted`.
 *
 * C'est ce qui empêche la vitrine de diverger du produit qu'elle montre. Une page de démo
 * qui a ses propres boutons finit par montrer un produit qui n'existe pas — et personne ne
 * s'en aperçoit, puisque les deux marchent très bien chacun de leur côté. Le contrôle
 * `test_classes_css_existent` vérifie que toute classe employée par la page générée existe
 * bien dans `app.css` ou ici : sans lui, cette règle serait un vœu.
 *
 * Même parenté que `web/legal/_style.css`, et pour la même raison : une page de lecture n'a
 * rien à voir avec une interface au pouce, et mélanger les deux ferait grossir la feuille que
 * tout le monde charge pour des règles que presque personne ne voit.
 */

body {
  background: var(--ground);
  color: var(--text);
  /* `--lh-lecture`, comme les pages légales. Les deux surfaces se lisent d'un bout à l'autre
   * et étaient pourtant à deux hauteurs différentes — 1.6 ici, 1.65 là-bas. Personne ne
   * pouvait s'en apercevoir : elles ne se regardent jamais côte à côte. */
  font: var(--w-normal) var(--t5)/var(--lh-lecture) var(--font-body);
  margin: 0;
}

.vit {
  max-width: 52rem;
  margin: 0 auto;
  /* Un rembourrage qui SUIT la largeur, au lieu de sauter à 480 px. `clamp` dit la même
   * chose que la requête qu'il remplace — serré sur un téléphone, à l'aise sur un écran —
   * mais sans décider où se trouve la frontière entre les deux, et sans ajouter un seuil de
   * plus à ceux qu'on vient de retirer de l'application. */
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.25rem) 4rem;
}

/* — l'en-tête : ce qu'est lane, et ce qu'on regarde — */

/* `<header class="vit-head">` est un `<header>`, et `app.css` — que cette page charge aussi —
 * porte une règle sur la BALISE nue : `display: flex; position: sticky; border-bottom`, taillée
 * pour la barre du back-office. Elle atteignait donc la vitrine sans que personne l'ait demandé.
 *
 * Sur un écran large ça passait presque inaperçu ; à 320 px le titre, l'intro, la marque et la
 * date se rangeaient sur UNE ligne et sortaient de l'écran de 121 px — la page défilait de côté.
 * Trouvé par `checks/responsive.mjs`, pas à l'œil : la page « s'affichait correctement ».
 *
 * On rétablit ici plutôt que de restreindre la règle dans `app.css` : celle-ci décrit la barre
 * de l'application, et c'est la vitrine qui vient emprunter la feuille de l'application. */
.vit-head {
  display: block;
  position: static;
  gap: 0;
  padding: 0;
  border-bottom: 0;
  margin-bottom: var(--s6);
}
.vit-head h1 { font: var(--w-gras) var(--t8)/var(--lh-titre) var(--font-head); margin: 0 0 .3em; }
.vit-head p { color: var(--mist); margin: 0 0 var(--s4); max-width: 40rem; }

/* La même largeur de lecture pour TOUT le texte courant, pas seulement l'en-tête. Mesuré à
 * 1440 px sur la page de démonstration : un paragraphe à 792 px et trois précisions à 602,
 * 686 et 746 px — largement au-delà des ~75 caractères où l'œil retrouve encore le début de
 * la ligne suivante. */
.vit p, .vit li { max-width: var(--mesure); }

/* Le `<small>` d'un diagnostic, en bloc — comme `app.css` le fait déjà pour ceux des lignes
 * de l'application. Deux raisons, et la deuxième est la vraie : il suit un `<b>` déjà en
 * bloc, donc il occupe déjà sa propre ligne et rien ne bouge à l'écran ; et `max-width` est
 * ignoré sur un élément `inline`, donc c'est la seule façon de le borner. Le poser sur le
 * bloc parent ne marchait pas non plus : 70 ch s'y mesurent en corps 16 (706 px) alors que
 * le texte est en corps 12 — 111 caractères sous une limite qui en annonçait 70. */
.vit .item small { display: block; max-width: var(--mesure); }

/* La marque du produit observé, à côté de son adresse. On regarde un vrai site, pas une
 * capture : le dire une fois en haut évite de le répéter partout ailleurs. */
.vit-sujet {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.vit-sujet img { width: var(--s6); height: var(--s6); object-fit: contain; border-radius: var(--radius-sm); }
.vit-sujet b { display: block; font: var(--w-fort) var(--t5)/var(--lh-ui) var(--font-body); }
.vit-sujet a { color: var(--accent-ink); font-size: var(--t4); }

/* — la date du relevé —
 * Servie en ABSOLU. `lane-age.js` la rend relative pour les humains ; sans lui, elle reste
 * vraie. Un « il y a 12 minutes » gravé dans un fichier statique ment dès la treizième. */
.vit-date { color: var(--mist); font-size: var(--t4); margin: var(--s4) 0 0; }

/* Le bandeau de péremption. Il est TOUJOURS dans le HTML, masqué par `hidden` ; c'est
 * `lane-age.js` qui le révèle au-delà de trois heures. L'écrire côté worker demanderait de
 * savoir, au moment de la génération, quand la page sera lue. */
.vit-vieux {
  margin: var(--s4) 0 0;
  padding: var(--s4);
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: var(--radius);
  font-size: var(--t4);
}

/* — les sections, une par pilier — */

.vit-pilier { margin-top: var(--s7); }

.vit-pilier h2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: var(--w-fort) var(--t3)/var(--lh-plat) var(--font-head);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mist);
  margin: 0 0 var(--s3);
}

.vit-pilier > p { margin: 0 0 var(--s4); }

/* Les défauts réutilisent `.next` — la même liste que l'application affiche sous
 * « la prochaine action ». Ici les entrées ne mènent nulle part : ce sont des `<div>`, pas
 * des `<a>`. Une vitrine n'a aucun geste à offrir, et un lien mort est pire que pas de lien. */
.vit-pilier .next div.item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lv, var(--line));
  border-radius: var(--radius);
}

.vit-code {
  font: var(--w-moyen) var(--t2)/var(--lh-plat) var(--font-mono);
  color: var(--mist);
  white-space: nowrap;
}

/* — l'appel à l'action, en haut et en bas —
 * Deux fois la même chose, délibérément : en haut pour qui sait déjà, en bas pour qui vient
 * de lire les preuves. C'est là que le clic se gagne. */
.vit-cta {
  margin-top: var(--s7);
  padding: var(--s5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.vit-cta h2 { font: var(--w-gras) var(--t6)/var(--lh-ui) var(--font-head); margin: 0 0 .4em; }
.vit-cta p { color: var(--mist); margin: 0 0 var(--s4); }
.vit-cta .btn { display: inline-block; text-decoration: none; }

.vit-liens {
  margin: var(--s4) 0 0;
  font-size: var(--t4);
  color: var(--mist);
}

.vit-liens a { color: var(--mist); }

.vit-pied {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--t3);
  color: var(--mist);
}