/* Vitrine publique — s'appuie sur les jetons et les bandes de app.css.
   N'ajoute que ce que l'application ne possède pas déjà. */

.vitrine { background: var(--paper); color: var(--ink); }

/* ─────────────────────────────── en-tête ─────────────────────────────── */
.vhead {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.vhead__bar {
  max-width: var(--shell-wide); margin: 0 auto;
  padding: var(--s-sm) var(--s-md);
  display: flex; align-items: center; gap: var(--s-md);
}
.vmark { display: flex; align-items: center; gap: var(--s-2xs); text-decoration: none; color: inherit; }
.vmark__art { display: block; color: var(--forest); flex: none; }
.vmark__txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.vmark__txt b { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
/* --ink-faint ne donnait que 3,34:1 sur le papier — insuffisant pour du petit texte. */
.vmark__txt span { font-size: var(--text-2xs); color: var(--ink-muted); letter-spacing: .06em; text-transform: uppercase; }

.vnav { display: flex; gap: var(--s-2xs); margin-left: auto; }
.vnav__link {
  padding: .45rem .7rem; border-radius: var(--r-sm);
  color: var(--ink-muted); text-decoration: none; font-size: var(--text-sm);
  white-space: nowrap;
}
.vnav__link:hover { color: var(--ink); background: var(--paper-warm); }
.vnav__link.is-current { color: var(--terra-deep); font-weight: 600; }
.vhead__cta { flex: none; }

/* ────────────────────────────── ouverture ────────────────────────────── */
.vhero { background: var(--paper-warm); border-bottom: 1px solid var(--rule); }
.vhero__in { max-width: 780px; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) var(--s-md); }
.vhero__eyebrow {
  font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase;
  /* --gold-deep ne donnait que 3,75:1 sur le papier chaud ; --wood monte à 6,4:1. */
  color: var(--wood); margin: 0 0 var(--s-sm);
}
.vhero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.1;
  margin: 0 0 var(--s-md); overflow-wrap: anywhere; min-width: 0;
}
.vhero__lede { font-size: var(--text-lg); line-height: 1.65; color: var(--ink-soft); margin: 0 0 var(--s-lg); }
.vhero__actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin: 0; }

/* ──────────────────────────────── titres ─────────────────────────────── */
.vh1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.75rem, 4.4vw, 2.6rem); line-height: 1.15;
  margin: 0 0 var(--s-md); overflow-wrap: anywhere; min-width: 0;
}
.vh2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-2xl); line-height: 1.2;
  margin: var(--s-xl) 0 var(--s-sm); overflow-wrap: anywhere;
}
.vpage > .shell { padding-top: var(--s-xl); }
.vprose { font-size: var(--text-md); line-height: 1.72; color: var(--ink-soft); margin: 0 0 var(--s-md); }
.vprose--caveat {
  border-left: 3px solid var(--gold); padding-left: var(--s-sm);
  color: var(--ink-muted); font-size: var(--text-sm);
}
.vnote { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--s-md) 0 0; }
.vlink { color: var(--terra-deep); font-weight: 600; text-decoration: none; }
.vlink:hover { text-decoration: underline; }
.vcrumb { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--s-md); }
.vcrumb a { color: var(--ink-muted); }
.vcrumb span { margin: 0 .35rem; }

/* ──────────────────────────────── chiffres ───────────────────────────── */
.vfigs {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-md);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.vfigs li { display: flex; flex-direction: column; gap: .15rem; }
.vfigs b {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 600; color: var(--forest); line-height: 1;
}
.vfigs span { font-size: var(--text-sm); color: var(--ink-muted); }

/* ─────────────────────────── ancêtres, villages ──────────────────────── */
.vancs, .vvills { list-style: none; margin: 0 0 var(--s-lg); padding: 0; display: grid; gap: var(--s-2xs); }
.vvills { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--s-sm); }
.vanc, .vvill {
  background: var(--paper-card); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s-sm) var(--s-md);
  display: flex; flex-direction: column; gap: .2rem;
}
.vanc b, .vvill b { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
.vanc span, .vvill__note { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.5; }
.vvill { border-left: 3px solid var(--gold); }

/* ───────────────────────────────── étapes ────────────────────────────── */
.vsteps { margin: 0 0 var(--s-lg); padding: 0; list-style: none; counter-reset: v; display: grid; gap: var(--s-sm); }
.vsteps li {
  counter-increment: v; position: relative; padding-left: 2.6rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.vsteps li::before {
  content: counter(v); position: absolute; left: 0; top: .05rem;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold-deep);
  font-size: var(--text-sm); font-weight: 600;
}
.vsteps b { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
.vsteps span { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; }

.vdont { margin: 0 0 var(--s-lg); padding-left: 1.1rem; display: grid; gap: .3rem; }
.vdont li { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; }

/* ───────────────────────────────── pied ──────────────────────────────── */
.vfoot { background: var(--forest-deep); color: var(--on-dark); }
.vfoot__in {
  max-width: var(--shell-wide); margin: 0 auto; padding: var(--s-xl) var(--s-md);
  display: flex; flex-wrap: wrap; gap: var(--s-md); align-items: center; justify-content: space-between;
}
.vfoot__note { margin: 0; font-size: var(--text-sm); color: var(--on-dark); max-width: 44ch; line-height: 1.6; }
.vfoot__nav { display: flex; flex-wrap: wrap; gap: var(--s-md); }
.vfoot__nav a { color: var(--on-dark-strong); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.vfoot__nav a:hover { text-decoration: underline; }

/* ──────────────────────────────── mobile ─────────────────────────────── */
@media (max-width: 720px) {
  .vhead__bar { flex-wrap: wrap; row-gap: var(--s-2xs); }
  .vnav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: .15rem; }
  .vnav__link { padding: .4rem .55rem; }
  .vhead__cta { margin-left: auto; }
  .vfoot__in { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────── corrections de lisibilité et de rythme ──────────────
   `.vprose` fixe une couleur d'encre : sur la bande vert profond elle passait
   presque invisible. On rétablit le contraste au lieu de retirer la couleur. */
.vitrine .band--ink .vprose,
.vitrine .band--ink .vnote { color: var(--on-dark); }
.vitrine .band--ink .vprose b { color: var(--on-dark-strong); }
.vitrine .band--ink .vprose--caveat { border-left-color: var(--gold); }

/* `.shell` est dimensionné pour les pages de l'application, qui portent
   davantage de contenu. Dans la vitrine, ce rembourrage laissait de grands
   vides entre les sections. */
.vitrine .band > .shell { padding-top: 0; padding-bottom: 0; }
.vitrine .band { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
.vitrine .vpage > .shell { padding-top: var(--s-lg); padding-bottom: var(--s-2xl); }
.vitrine .vh2:first-child { margin-top: 0; }

/* Le pied est lui-même une bande sombre : une marge au-dessus créait une bande
   claire vide quand la dernière section était déjà sombre. */
.vitrine main > :last-child:not(.band--ink) + .vfoot,
.vitrine .vpage + .vfoot { margin-top: var(--s-xl); }
/* Les fiches de village n'ont pas toutes une note : sans cela, la grille
   étirait les cartes courtes à la hauteur de la plus longue. */
.vitrine .vvills { align-items: start; }

/* Sur une page courte, le pied remontait et laissait du papier en dessous. */
body.vitrine { min-height: 100vh; display: flex; flex-direction: column; }
body.vitrine main { flex: 1 0 auto; }
body.vitrine .vfoot { flex: none; }

/* ════════════════════ Mémoire familiale — récits ════════════════════════
   Trois couches doivent se distinguer d'un regard : ce que la famille sait,
   ce que les archives établissent, ce que personne ne sait encore. */

.rec__type {
  font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--wood); margin: 0 0 var(--s-2xs);
}
.rec__intro {
  font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.6;
  color: var(--ink-soft); margin: 0 0 var(--s-xl);
  padding-bottom: var(--s-md); border-bottom: 1px solid var(--rule);
}
.rec__couche {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600;
  margin: var(--s-2xl) 0 var(--s-sm); padding-bottom: var(--s-2xs);
  border-bottom: 2px solid var(--gold); display: inline-block;
  overflow-wrap: anywhere;
}
.rec__sec { margin: 0 0 var(--s-lg); }
.rec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-sm); }
.rec__head h3 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin: 0;
  overflow-wrap: anywhere;
}
.rec__body p { font-size: var(--text-md); line-height: 1.75; color: var(--ink-soft); margin: var(--s-sm) 0 0; }
.rec__body strong { color: var(--ink); font-weight: 600; }

/* La couche des questions ouvertes se lit comme une marge de carnet. */
.rec__sec--question-ouverte {
  background: var(--gold-soft); border-left: 3px solid var(--gold);
  padding: var(--s-md); border-radius: var(--r-md);
}
.rec__sec--contexte { border-left: 3px solid var(--forest-soft); padding-left: var(--s-md); }

/* Badge de certitude */
.cert {
  font-size: var(--text-2xs); letter-spacing: .04em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor; flex: none;
}
.cert--ok  { color: var(--st-confirmed); }
.cert--pro { color: var(--st-highly); }
.cert--pos { color: var(--st-probable); }
.cert--inc { color: var(--st-uncertain); }
.cert--dis { color: var(--st-disputed); }
.cert--hyp { color: var(--wood); background: var(--paper-raised); }

/* Sources */
.rec__src { margin-top: var(--s-sm); }
.rec__src summary {
  font-size: var(--text-sm); color: var(--ink-muted); cursor: pointer;
  padding: .3rem 0; list-style-position: inside;
}
.rec__src summary:hover { color: var(--terra-deep); }
.srcs { list-style: none; margin: var(--s-2xs) 0 0; padding: 0; display: grid; gap: var(--s-2xs); }
.src {
  display: flex; gap: var(--s-sm); align-items: flex-start;
  background: var(--paper-card); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s-sm);
}
.src__rank {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--text-2xs); font-weight: 600;
  background: var(--forest-soft); color: var(--forest-deep);
}
.src__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.src__body b { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.src__meta, .src__rel { font-size: var(--text-2xs); color: var(--ink-muted); }
.src__quote {
  font-style: italic; font-size: var(--text-sm); color: var(--ink-muted);
  border-left: 2px solid var(--rule-strong); padding-left: var(--s-sm); margin: .2rem 0;
}

/* Questions à la famille */
.quests { margin: 0 0 var(--s-md); padding-left: 1.1rem; display: grid; gap: .35rem; }
.quests li { font-size: var(--text-md); color: var(--ink-soft); line-height: 1.6; }
.rec__aide { margin-top: var(--s-2xl); }
.liens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2xs); }
.liens li { font-size: var(--text-sm); color: var(--ink-soft); }
.liens__k {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted); margin-right: .4rem;
}

/* Liste des récits */
.cartes {
  list-style: none; margin: 0 0 var(--s-xl); padding: 0; display: grid; gap: var(--s-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); align-items: start;
}
.carte a {
  display: flex; flex-direction: column; gap: .3rem; height: 100%;
  background: var(--paper-card); border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md); padding: var(--s-md);
  text-decoration: none; color: inherit;
}
.carte a:hover { border-color: var(--gold); background: var(--paper-raised); }
.carte b { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; overflow-wrap: anywhere; }
.carte__intro { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.55; }
.carte__sujets { font-size: var(--text-2xs); color: var(--ink-muted); }
.carte--draft a { border-left-color: var(--rule-strong); }
.carte__etat {
  align-self: flex-start; font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-muted);
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: .1rem .45rem;
}
.vvill__lien { font-size: var(--text-sm); margin-top: .3rem; }

/* --ink-faint ne donne que 3,34:1 sur le papier : insuffisant pour du texte,
   même petit. Il n'est plus employé comme couleur de texte dans la vitrine. */

/* ════════════════════ Images patrimoniales ══════════════════════════════
   Une feuille d'archive : le cliché posé sur du papier, la légende dans un
   cartouche sous un filet. Le cartouche porte toujours la portée de l'image —
   c'est lui qui interdit de croire qu'on regarde le village lui-même. */

.fig { margin: var(--s-lg) 0; }
.fig img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--paper-warm);
  border: 1px solid var(--rule); border-bottom: none;
}
.fig--hero { margin: var(--s-lg) 0 var(--s-xl); }
.fig__cap {
  display: flex; flex-direction: column; gap: .22rem;
  background: var(--paper-card);
  border: 1px solid var(--rule); border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: var(--s-sm) var(--s-md);
}
.fig__role, .fig__portee {
  font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase;
  align-self: flex-start;
}
.fig__role { color: var(--wood); }
.fig__portee {
  border-radius: 999px; padding: .1rem .5rem; border: 1px solid currentColor;
}
.fig__portee--contexte { color: var(--st-uncertain); }
.fig__portee--lieu { color: var(--st-confirmed); }
.fig__titre {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  overflow-wrap: anywhere;
}
.fig__legende { font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted); }
.fig__legende strong { color: var(--ink); font-weight: 600; }
.fig__credit {
  font-size: var(--text-2xs); line-height: 1.5; color: var(--ink-muted);
  padding-top: .25rem; border-top: 1px solid var(--rule); margin-top: .2rem;
  overflow-wrap: anywhere;
}
.fig__credit a { color: var(--terra-deep); }

/* Vignette d'une carte de récit ou de village. */
.vign {
  display: block; width: 100%; height: auto; max-width: 100%;
  object-fit: cover; border-radius: var(--r-sm);
  border: 1px solid var(--rule); margin-bottom: var(--s-2xs);
  background: var(--paper-warm);
}
.carte a { padding-top: var(--s-sm); }

/* Bandeau patrimonial discret sur l'accueil. */
.bandeau {
  margin: 0 0 var(--s-lg); border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper-card);
}
.bandeau img {
  display: block; width: 100%; height: auto; max-width: 100%;
  aspect-ratio: 1600/420; object-fit: cover; object-position: center 62%;
}
.bandeau__cap {
  display: block; font-size: var(--text-2xs); color: var(--ink-muted);
  padding: .45rem var(--s-md); border-top: 1px solid var(--rule);
  overflow-wrap: anywhere;
}
.bandeau__cap a { color: var(--terra-deep); }

@media (max-width: 600px) {
  .fig__cap { padding: var(--s-sm); }
  .bandeau img { aspect-ratio: 3/2; }
}