/* =========================================================================
   pages.css — pages statiques de l'atlas (château, millésime, appellation).
   HTML pur, sans JavaScript : ces pages sont faites pour être indexées,
   partagées et imprimées. Charte CMGC, tokens repris de colors_and_type.css.
   ========================================================================= */

:root {
  --pg-navy: #171B32;
  --pg-navy2: #0A1734;
  --pg-cream: #F7F5EF;
  --pg-beige: #DFDBD2;
  --pg-or: #F99C2A;
  --pg-cognac: #9B601A;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pg-navy);
  color: var(--pg-beige);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pg-or); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ---------- barre haute ---------- */
.pg-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 26px;
  background: rgba(13, 18, 38, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(247, 245, 239, .08);
}
.pg-brand { display: flex; align-items: center; gap: 12px; color: var(--pg-beige); }
.pg-brand span {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
}
.pg-nav { display: flex; align-items: center; gap: 18px; }
.pg-nav a {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(223, 219, 210, .75);
}
.pg-nav a:hover { color: var(--pg-or); text-decoration: none; }
.pg-nav .pg-cta {
  color: var(--pg-navy); background: var(--pg-or);
  padding: 9px 16px; border-radius: 999px; font-weight: 500;
}

/* ---------- conteneur ---------- */
.pg-main { max-width: 980px; margin: 0 auto; padding: 30px 26px 80px; }
.pg-crumbs {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(223, 219, 210, .62);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.pg-crumbs i { font-style: normal; color: rgba(223, 219, 210, .62); }
.pg-crumbs a { color: rgba(223, 219, 210, .7); }

/* ---------- en-tête de page ---------- */
.pg-hero {
  display: grid; grid-template-columns: auto 1fr auto; gap: 26px;
  align-items: center;
  padding-bottom: 30px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(247, 245, 239, .12);
}
.pg-hero.appellation { grid-template-columns: 1fr; }
.pg-seal { width: 86px; height: 86px; object-fit: contain; opacity: .95; }
.pg-bottle { max-height: 210px; width: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.pg-bottle.first { max-height: 240px; }
.pg-overline {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--pg-or); margin-bottom: 10px;
}
h1 {
  font-family: "Forum", serif; font-weight: 400;
  font-size: clamp(28px, 4.4vw, 44px); letter-spacing: .04em;
  color: var(--pg-cream); margin: 0 0 12px; line-height: 1.12;
}
.pg-lede { color: rgba(223, 219, 210, .75); margin: 0 0 16px; max-width: 62ch; }
/* Encépagement du vignoble (fixe, chateau.e / chateau.eb) — barre
   proportionnelle + légende sous le H1. Une barre par couleur si le
   domaine produit à la fois du rouge et du blanc.

   Le même habillage sert à l'assemblage d'un millésime, sur sa page. Les deux
   étaient publiés côte à côte sans légende et se lisaient comme deux versions
   contradictoires d'un même chiffre : .pg-alabel nomme le périmètre, .pg-asrc
   dit d'où il vient et renvoie à l'autre. */
.pg-assemblage { margin: 0 0 16px; max-width: 520px; }
.pg-alabel {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(247, 245, 239, .62); margin: 0 0 8px;
}
.pg-alist + .pg-alabel { margin-top: 4px; }
/* Provenance et périmètre d'une donnée : la ligne qui manquait. Volontairement
   discrète — elle se lit quand on se pose la question, pas avant. */
.pg-asrc {
  font-size: 12.5px; line-height: 1.55; max-width: 72ch;
  color: rgba(223, 219, 210, .62); margin: 10px 0 0;
}
.pg-block .pg-asrc { margin: 14px 0 0; }
/* Phase 1 anglais (18 sept. 2026) : posée par section()/ksp_html() en lang=en
   quand un champ précis retombe sur son texte français faute de traduction —
   même registre que .ec-dossier-note dans components/Encepagement.jsx. */
.pg-fr-only {
  margin: 8px 0 0; font-style: italic; font-size: 11px;
  color: rgba(223, 219, 210, .48);
}
.pg-scope {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 10px; letter-spacing: .08em;
  color: rgba(223, 219, 210, .62);
}
.pg-abar {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  margin-bottom: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.pg-abar span { display: block; height: 100%; }
.pg-alist {
  list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap;
  gap: 5px 16px;
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 11.5px; letter-spacing: .02em; color: rgba(223, 219, 210, .78);
}
.pg-alist:last-child { margin-bottom: 0; }
.pg-alist li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pg-alist i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.pg-garde {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 7px 14px; margin: 0 0 16px;
  background: rgba(249, 156, 42, .08);
  border: 1px solid rgba(249, 156, 42, .3);
  border-radius: 999px;
}
.pg-garde span {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(247, 245, 239, .6);
}
.pg-garde em { font-style: normal; font-family: "Forum", serif; font-size: 15px; color: var(--pg-or); }
.pg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-btn {
  display: inline-flex; align-items: center;
  padding: 11px 20px; border-radius: 999px;
  background: var(--pg-or); color: var(--pg-navy);
  border: 1px solid var(--pg-or);
  font-family: "Lexend Exa", sans-serif; font-weight: 500;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.pg-btn:hover { background: transparent; color: var(--pg-or); text-decoration: none; }
.pg-btn.ghost { background: transparent; color: var(--pg-beige); border-color: rgba(223, 219, 210, .28); }
.pg-btn.ghost:hover { border-color: var(--pg-or); color: var(--pg-or); }

/* ---------- blocs de contenu ---------- */
.pg-block { padding: 26px 0; border-bottom: 1px solid rgba(247, 245, 239, .08); }
.pg-block h2 {
  font-family: "Lexend Exa", sans-serif; font-weight: 400;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--pg-or); margin: 0 0 14px;
}
.pg-block h2 a { color: inherit; }
.pg-count {
  font-family: "Nunito", sans-serif; letter-spacing: 0;
  font-size: 11px; color: rgba(223, 219, 210, .62); margin-left: 6px;
}
.pg-block p { margin: 0 0 12px; max-width: 78ch; color: rgba(247, 245, 239, .82); }
.pg-block p:last-child { margin-bottom: 0; }

/* ---------- arguments de vente (« pourquoi l'acheter ») ----------
   Encadré et non simple bloc : il se lit avant les paragraphes, et le cadre
   est ce qui le distingue d'une section de plus. Pas de bordure basse — elle
   doublerait le cadre. */
.pg-why {
  margin: 24px 0 0; padding: 20px 22px;
  border: 1px solid rgba(249, 156, 42, .22); border-bottom: 1px solid rgba(249, 156, 42, .22);
  border-left: 2px solid var(--pg-or);
  border-radius: 8px; background: rgba(249, 156, 42, .045);
}
.pg-why h2 { margin-top: 0; }
.pg-ksp { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.pg-ksp li {
  position: relative; padding-left: 22px; max-width: 78ch;
  font-size: 14px; line-height: 1.55; color: rgba(247, 245, 239, .78);
}
.pg-ksp li::before {
  content: ""; position: absolute; left: 1px; top: 8px;
  width: 7px; height: 7px; border-radius: 1px;
  transform: rotate(45deg); background: var(--pg-or);
}
.pg-ksp strong {
  display: block; font-family: "Forum", serif; font-weight: 400;
  font-size: 16.5px; line-height: 1.3; color: var(--pg-cream);
}

/* ---------- chiffres ---------- */
/* .pg-specs (superficie, stable) et .pg-specs-millesime (alcool/rendement/
   age, propres a un millesime) partagent le meme habillage visuel : seule la
   donnee qu'elles portent differe, cf. build_pages.py specs_vignoble_html()
   et specs_millesime_html(). */
.pg-specs, .pg-specs-millesime {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; list-style: none; margin: 14px 0 0; padding: 0;
}
.pg-specs li, .pg-specs-millesime li {
  background: var(--pg-navy2); border: 1px solid rgba(247, 245, 239, .1);
  border-left: 2px solid rgba(249, 156, 42, .45);
  border-radius: 5px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 5px;
}
.pg-specs em, .pg-specs-millesime em { font-style: normal; font-family: "Forum", serif; font-size: 19px; color: var(--pg-cream); line-height: 1; }
.pg-specs span, .pg-specs-millesime span {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247, 245, 239, .5);
}

/* ---------- notes critiques ---------- */
.pg-notes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pg-notes li {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 7px 13px; border-radius: 5px;
  background: rgba(247, 245, 239, .05); border: 1px solid rgba(247, 245, 239, .13);
}
.pg-notes span {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 245, 239, .6);
}
.pg-notes em { font-style: normal; font-family: "Forum", serif; font-size: 17px; color: var(--pg-cream); }
.pg-notes i { font-style: normal; font-size: 10px; color: rgba(247, 245, 239, .55); }

/* ---------- tableaux ---------- */
.pg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pg-table th {
  text-align: left; padding: 9px 10px;
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(223, 219, 210, .66);
  border-bottom: 1px solid rgba(223, 219, 210, .18);
}
.pg-table td { padding: 9px 10px; border-bottom: 1px solid rgba(223, 219, 210, .1); vertical-align: top; }
.pg-table td:first-child { font-family: "Forum", serif; font-size: 16px; color: var(--pg-cream); white-space: nowrap; }
.pg-table td span { font-size: 10px; color: rgba(223, 219, 210, .62); }
.pg-table .pg-car { color: rgba(223, 219, 210, .68); }
.pg-table tr:hover td { background: rgba(247, 245, 239, .03); }

/* ---------- listes de châteaux ---------- */
.pg-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pg-cards.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pg-cards a {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 6px;
  background: var(--pg-navy2); border: 1px solid rgba(247, 245, 239, .1);
  color: var(--pg-beige); transition: border-color .25s, background .25s;
}
.pg-cards a:hover { border-color: rgba(249, 156, 42, .5); background: rgba(249, 156, 42, .06); text-decoration: none; }
.pg-card-name { font-family: "Forum", serif; font-size: 15px; color: var(--pg-cream); }
.pg-card-sub {
  width: 100%;
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(223, 219, 210, .62);
}
/* Meilleure note de la critique, sur les vignettes et les pastilles : un
   repère chiffré qui se lit sans ouvrir la fiche. */
.pg-card-note, .pg-sib-note {
  font-style: normal; font-family: "Forum", serif; font-size: 15px;
  line-height: 1; color: var(--pg-or); margin-left: auto;
}
.pg-sib-note { font-size: 13.5px; padding-left: 8px; }
.pg-siblings { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pg-siblings.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pg-siblings a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(247, 245, 239, .04); border: 1px solid rgba(247, 245, 239, .1);
  color: var(--pg-beige); font-size: 13px;
}
.pg-siblings a:hover { border-color: rgba(249, 156, 42, .45); color: var(--pg-cream); text-decoration: none; }
.pg-cuvees { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-cuvees > li {
  padding: 10px 13px; border-radius: 5px;
  background: rgba(247, 245, 239, .04); border: 1px solid rgba(247, 245, 239, .1);
  display: flex; flex-direction: column; gap: 3px;
}
.pg-cuvees strong { font-family: "Forum", serif; font-weight: 400; font-size: 15px; color: var(--pg-cream); }
.pg-cuvees > li > span, .pg-cuvees summary span {
  display: block; margin-top: 2px;
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 12px; letter-spacing: .01em; text-transform: none;
  color: rgba(223, 219, 210, .68);
}
.pg-cuvees > li.pliable { padding: 0; }
.pg-cuvees summary {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 34px 10px 13px; cursor: pointer;
  list-style: none; position: relative;
  transition: background .25s;
}
.pg-cuvees summary::-webkit-details-marker { display: none; }
.pg-cuvees summary::after {
  content: ""; position: absolute; right: 15px; top: 17px;
  width: 7px; height: 7px; border-right: 1px solid rgba(223, 219, 210, .55);
  border-bottom: 1px solid rgba(223, 219, 210, .55);
  transform: rotate(45deg); transition: transform .25s, border-color .25s;
}
.pg-cuvees summary:hover { background: rgba(249, 156, 42, .05); }
.pg-cuvees summary:hover::after { border-color: rgba(249, 156, 42, .8); }
.pg-cuvees details[open] > summary::after { transform: rotate(-135deg); top: 20px; }
.pg-cuvee-ft {
  list-style: none; margin: 0; padding: 0 13px 12px;
  display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.pg-cuvee-ft li {
  display: flex; flex-direction: row; align-items: baseline; gap: 10px;
  padding: 6px 11px; border-radius: 4px;
  background: var(--pg-navy2); border: 1px solid rgba(247, 245, 239, .08);
}
.pg-cuvee-ft li > span {
  min-width: 3.4em;
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 11.5px; letter-spacing: .1em; color: var(--pg-cream);
}
.pg-cuvee-ft li > a { font-size: 12.5px; }

/* ---------- navigation millésimes ---------- */
.pg-yearnav {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  padding: 26px 0 0;
}
.pg-yearnav a {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- pied ---------- */
.pg-foot {
  border-top: 1px solid rgba(247, 245, 239, .1);
  padding: 30px 26px 50px;
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
  max-width: 980px; margin: 0 auto;
  font-size: 12.5px; color: rgba(223, 219, 210, .62);
}
.pg-foot strong { color: var(--pg-cream); font-family: "Forum", serif; font-weight: 400; font-size: 15px; }

@media (max-width: 720px) {
  /* La barre haute portait deja la marque et le bouton de carte ; la croix en
     fait un troisieme, et sur un telephone les trois ne tiennent plus : le nom
     de la marque se cassait sur quatre lignes et le bouton doublait de hauteur.
     Le sceau suffit a identifier le site a cette largeur, le mot part. */
  .pg-brand span { display: none; }
  .pg-top { padding: 10px 14px; gap: 10px; }
  .pg-nav { gap: 10px; }
  .pg-nav .pg-cta { padding: 8px 13px; font-size: 8.5px; letter-spacing: .18em;
                    white-space: nowrap; }
  .pg-hero { grid-template-columns: 1fr; text-align: left; }
  .pg-bottle { max-height: 170px; }
  .pg-nav a:not(.pg-cta) { display: none; }
  .pg-table td:first-child { font-size: 14px; }
  .pg-cuvee-ft { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); padding-inline: 10px; }
  .pg-cuvee-ft li { gap: 7px; padding: 6px 8px; }
  .pg-cuvee-ft li > span { min-width: 0; }
}

/* ---------- tableaux : étroit ---------- */
/* Sous 425 px de viewport, la largeur du tableau est imposée par ses en-têtes,
   pas par son contenu : en capitales 8,5 px à .2em, MILLÉSIME, CARACTÈRE et
   TECHNIQUE pèsent 73 px de min-content chacune, soit 373 px à quatre colonnes
   pour 323 px disponibles. On resserre goutières et interlettrage plutôt que
   d'ajouter un conteneur à défilement : le tableau tient dans la page, et la
   colonne de prose y gagne même en largeur. */
@media (max-width: 480px) {
  .pg-table { font-size: 12.5px; }
  .pg-table th, .pg-table td { padding: 8px 5px; }
  .pg-table th { letter-spacing: .06em; }
  .pg-table td { overflow-wrap: anywhere; }
}

@media print {
  .pg-top, .pg-nav, .pg-actions, .pg-yearnav, .pg-crumbs { display: none; }
  body { background: #fff; color: #222; }
  h1, .pg-card-name, .pg-specs em, .pg-specs-millesime em, .pg-notes em { color: #171B32; }
  .pg-block { border-color: #ddd; }
  .pg-block p { color: #333; }
}

/* ---------- demande commerciale ----------
   Encadré comme les arguments de vente, et pour la même raison : c'est une
   action, pas une section de plus. Le seul chemin commercial des pages était
   une adresse nue en pied de page, sans le nom du domaine qu'on venait de
   lire ; ici le château et le millésime sont déjà dans le message. */
.pg-contact {
  margin: 24px 0 0; padding: 22px 22px 20px;
  border: 1px solid rgba(249, 156, 42, .28);
  border-left: 2px solid var(--pg-or);
  border-radius: 8px; background: rgba(249, 156, 42, .05);
}
.pg-contact h2 { margin-top: 0; }
.pg-contact p { color: rgba(247, 245, 239, .82); max-width: 68ch; }
.pg-contact .pg-actions { margin-top: 16px; }
/* Le numéro garde ses chiffres lisibles : l'interlettrage des boutons en
   capitales rend un téléphone pénible à lire d'un coup d'œil. */
.pg-contact .pg-btn[href^="tel:"] {
  letter-spacing: .1em; text-transform: none; font-size: 12px;
}

/* ---------- kit média ---------- */
.pg-kit-lede { color: rgba(223, 219, 210, .68); max-width: 70ch; }
.pg-kit-grid {
  display: grid; gap: 12px; margin: 16px 0 20px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.pg-kit-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 14px 13px; border-radius: 6px;
  background: var(--pg-navy2); border: 1px solid rgba(247, 245, 239, .1);
  color: var(--pg-beige); text-align: center;
  transition: border-color .25s, transform .25s, background .25s;
}
.pg-kit-tile:hover {
  border-color: rgba(249, 156, 42, .5); background: rgba(249, 156, 42, .06);
  transform: translateY(-2px); text-decoration: none;
}
.pg-kit-tile img {
  height: 96px; width: auto; max-width: 100%; margin: 0 auto 6px;
  object-fit: contain; object-position: center;
}
.pg-kit-tile.logo img { filter: brightness(1.4); }
.pg-kit-name {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pg-cream);
}
.pg-kit-sub { font-size: 11px; color: rgba(223, 219, 210, .62); }
.pg-kit-copy {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pg-copy {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(247, 245, 239, .04); border: 1px solid rgba(247, 245, 239, .14);
  color: var(--pg-beige); font-family: inherit; font-size: 13px;
  transition: border-color .2s, background .2s;
}
.pg-copy:hover { border-color: rgba(249, 156, 42, .5); background: rgba(249, 156, 42, .07); }
.pg-copy i {
  font-style: normal; font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pg-or);
}
.pg-copy.done { border-color: rgba(96, 168, 110, .6); }
.pg-copy.done i { color: #7FD190; }
.pg-actions.kit { margin-top: 4px; }
button.pg-btn { font-family: "Lexend Exa", sans-serif; cursor: pointer; }
.pg-kit-table td:first-child { font-family: inherit; font-size: 13.5px; white-space: normal; }
.pg-yes { color: #7FD190; font-family: "Lexend Exa", sans-serif; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.pg-no { color: rgba(223, 219, 210, .62); }

/* ---------- impression : la page devient une fiche technique ---------- */
@media print {
  @page { margin: 14mm 14mm 16mm; }
  .pg-kit, .pg-yearnav, .pg-siblings, .pg-cards, .pg-foot > div:last-child { display: none !important; }
  .pg-main { max-width: none; padding: 0; }
  .pg-hero { border-color: #ccc; page-break-inside: avoid; }
  .pg-bottle, .pg-bottle.first { max-height: 150px; }
  .pg-overline { color: #9B601A; }
  .pg-block { page-break-inside: avoid; padding: 14px 0; }
  .pg-block h2 { color: #9B601A; font-size: 9px; }
  .pg-specs li, .pg-specs-millesime li, .pg-notes li, .pg-garde { border-color: #ccc; background: none; }
  .pg-why { border-color: #9B601A; background: none; padding: 10px 0 10px 12px; }
  /* Sur papier, le bloc commercial garde son texte : les boutons disparaissent
     avec .pg-actions, mais l'adresse et le téléphone sortent en clair grâce à
     la règle a[href^="http"] plus bas. On y ajoute mailto: et tel:. */
  .pg-contact { border-color: #9B601A; background: none; padding: 10px 0 10px 12px; }
  .pg-asrc { color: #555; }
  .pg-fr-only { color: #777; }
  .pg-scope { color: #555; }
  .pg-ksp li { color: #333; }
  .pg-ksp li::before { background: #9B601A; }
  .pg-ksp strong { color: #171B32; }
  .pg-specs em, .pg-specs-millesime em, .pg-notes em { color: #171B32; }
  .pg-specs span, .pg-specs-millesime span, .pg-notes span { color: #555; }
  .pg-garde em { color: #9B601A; }
  .pg-table td, .pg-table th { border-color: #ddd; color: #333; }
  .pg-table td:first-child { color: #171B32; }
  .pg-foot { color: #555; border-color: #ccc; padding: 12px 0 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; color: #777; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 9px; color: #777; }
  .pg-brand span, .pg-crumbs { display: none; }
}
.pg-kit-n { font-size: 10px; color: rgba(223, 219, 210, .62); }
/* tuile dont le visuel n'a pas répondu : on garde le libellé, pas d'icône cassée */
.pg-kit-tile.noimg::before {
  content: ""; display: block; height: 96px; margin: 0 auto 6px; width: 46px;
  border-radius: 4px 4px 8px 8px;
  background: linear-gradient(180deg, rgba(247,245,239,.05), rgba(247,245,239,.12));
  border: 1px solid rgba(247,245,239,.12);
}

/* ---------- renvoi médiathèque (les visuels ne sont pas en libre-service) ---------- */
.pg-media {
  margin-top: 22px; padding: 16px 18px;
  background: var(--pg-navy2);
  border: 1px solid rgba(247, 245, 239, .1);
  border-left: 2px solid rgba(249, 156, 42, .5);
  border-radius: 6px;
}
.pg-media-title {
  display: block; margin-bottom: 6px;
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--pg-or);
}
.pg-media p { margin: 0 0 14px; color: rgba(223, 219, 210, .72); font-size: 14px; }

/* ---------- étiquette du millésime (vignette, HD sur la médiathèque) ---------- */
.pg-label { margin: 0; }
.pg-label img {
  display: block; width: 100%; max-width: 420px;
  border-radius: 4px;
  background: var(--pg-cream);
  border: 1px solid rgba(247, 245, 239, .14);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .32);
}
.pg-label figcaption {
  margin-top: 10px; max-width: 420px;
  font-size: 12.5px; line-height: 1.55;
  color: rgba(223, 219, 210, .62);
}
.pg-labelblock.noimg { display: none; }

@media print {
  .pg-labelblock { display: none; }
}

/* ---------- planche parcellaire ----------
   Bascule cépages / sols sans une ligne de JavaScript : deux boutons radio
   masqués et le combinateur ~. Ces pages sont faites pour être indexées,
   partagées et imprimées ; y glisser un script pour deux onglets serait payer
   cher une commodité. Sans CSS, les deux planches s'affichent à la suite, ce
   qui reste lisible — c'est le repli, pas un accident.
   Les règles sont structurelles (nth-of-type) et non nominatives : un château
   peut porter jusqu'à six planches, et autant de styles par page serait du
   poids pour rien. */
.pg-planche .pg-lede { margin-bottom: 18px; }
.pl { position: relative; margin: 0 0 10px; }
.pl > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pl-onglets { display: flex; gap: 2px; margin-bottom: 12px; }
.pl-onglets label {
  font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(223, 219, 210, .62); padding: 8px 16px; cursor: pointer;
  border-bottom: 1px solid transparent;
}
.pl-onglets label:hover { color: var(--pg-beige); }
.pl > img { display: block; width: 100%; border-radius: 10px; }
.pl > .pl-v1 { display: none; }
.pl > input:nth-of-type(2):checked ~ .pl-v0 { display: none; }
.pl > input:nth-of-type(2):checked ~ .pl-v1 { display: block; }
.pl > input:nth-of-type(1):checked ~ .pl-onglets label:nth-of-type(1),
.pl > input:nth-of-type(2):checked ~ .pl-onglets label:nth-of-type(2) {
  color: var(--pg-or); border-bottom-color: var(--pg-or);
}
.pl > figcaption { margin-top: 10px; }
.pg-planche .pg-actions { margin: 10px 0 26px; }

/* Le clavier doit pouvoir atteindre les onglets : le bouton radio est masqué,
   c'est donc son étiquette qui doit montrer le focus. */
.pl > input:focus-visible ~ .pl-onglets label { outline: 1px solid var(--pg-or); }

/* ---------- le bloc vivant (planches/planche.js) ----------
   Amélioration progressive : ces règles ne servent que lorsque le script a
   pu monter le bloc. Sans JavaScript, sans WebGL, à l'impression, c'est la
   planche SVG qui reste — et .pl-scene n'existe même pas dans le document. */
.pl-scene { position: relative; border-radius: 10px; overflow: hidden;
            background: var(--pg-navy2); }
/* C'est la carte, et non la scène, qui sert de repère aux éléments flottants :
   sur téléphone la légende repasse en flux sous le canevas, la scène s'allonge,
   et l'échelle comme la rose se retrouvaient posées sur la légende. */
.pl-carte { position: relative; }
.pl-cv { display: block; width: 100%; height: min(64vh, 620px);
         min-height: 380px; cursor: grab; touch-action: none; outline: none; }
.pl-cv.pl-drag { cursor: grabbing; }
/* Dès que l'on zoome, le bloc déborde et le rectangle du canvas le couperait
   net, en plein vignoble. Le voile le fait se dissoudre dans le fond. */
.pl-voile { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right,  var(--pg-navy2), rgba(10,23,52,0) 44px),
    linear-gradient(to left,   var(--pg-navy2), rgba(10,23,52,0) 44px),
    linear-gradient(to bottom, var(--pg-navy2), rgba(10,23,52,0) 32px),
    linear-gradient(to top,    var(--pg-navy2), rgba(10,23,52,0) 32px); }
.pl-flot, .pl-panneau {
  position: absolute; z-index: 3;
  background: rgba(13, 18, 38, .58); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(247, 245, 239, .10); border-radius: 10px; }
.pl-panneau { left: 14px; top: 14px; width: 236px; padding: 14px 16px 4px;
              max-height: calc(100% - 118px); overflow: auto; }
/* Le scroller natif de Windows est un bloc blanc de 17 px qui traverse la
   légende : 6 px, fond transparent, dans les encres de la page. */
.pl-panneau { scrollbar-width: thin;
              scrollbar-color: rgba(223,219,210,.26) transparent; }
.pl-panneau::-webkit-scrollbar { width: 6px; }
.pl-panneau::-webkit-scrollbar-track { background: transparent; }
.pl-panneau::-webkit-scrollbar-thumb { background: rgba(223,219,210,.22);
                                       border-radius: 3px; }
.pl-lab { font-family: "Lexend Exa", sans-serif; font-weight: 300;
          font-size: 8px; letter-spacing: .24em; text-transform: uppercase;
          color: rgba(247, 245, 239, .52); }
.pl-panneau > .pl-lab { display: block; margin-bottom: 12px; }
.pl-chiffres { margin-bottom: 14px; }
.pl-chiffres > div { margin-bottom: 8px; }
.pl-chiffres b { display: block; font-weight: 400; font-size: 15px;
                 color: var(--pg-cream); }
.pl-item { display: flex; gap: 8px; margin-bottom: 12px; font-size: 10px;
           line-height: 1.35; color: rgba(223, 219, 210, .62); }
.pl-item i { flex: 0 0 10px; height: 10px; margin-top: 3px; border-radius: 1px; }
.pl-item b { display: block; font-weight: 400; color: var(--pg-beige); }
.pl-outils { right: 14px; top: 14px; display: flex; gap: 2px; padding: 2px 5px; }
.pl-outils button { font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(223, 219, 210, .62); background: none; border: 0;
  border-bottom: 1px solid transparent; padding: 7px 13px; cursor: pointer; }
.pl-outils button[aria-pressed="true"] { color: var(--pg-or);
  border-bottom-color: var(--pg-or); }
.pl-cap { right: 14px; bottom: 14px; padding: 6px 11px; font-size: 10px;
          color: rgba(223, 219, 210, .5); }
.pl-ech { left: 14px; bottom: 14px; padding: 9px 13px 8px; }
.pl-ech .pl-bar { height: 1px; background: rgba(247,245,239,.52);
                  position: relative; margin-top: 11px; }
.pl-ech .pl-bar u { position: absolute; top: -5px; width: 1px; height: 6px;
                    background: rgba(247,245,239,.52); }
.pl-ech .pl-ticks { display: flex; justify-content: space-between;
                    font-size: 10px; color: rgba(223,219,210,.62);
                    margin-top: 4px; }
.pl-nord { right: 14px; bottom: 56px; padding: 3px; }
/* La pastille est l'ancre, pas le bloc : centrer l'ensemble pastille+nom
   décalait la pastille de la moitié du nom, et le repère semblait glisser au
   zoom et à la rotation. */
.pl-pin { position: absolute; z-index: 2; pointer-events: none;
          display: flex; align-items: center; gap: 7px;
          transform: translate(-5px, -5px); }
.pl-pin i { width: 8px; height: 8px; border-radius: 50%; background: var(--pg-or);
            box-shadow: 0 0 0 3px rgba(23, 27, 50, .75); }
.pl-pin span { font-family: "Lexend Exa", sans-serif; font-weight: 300;
  font-size: 8px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--pg-cream); text-shadow: 0 1px 3px rgba(0,0,0,.9);
  white-space: nowrap; }
.pl-cote { position: absolute; z-index: 2; pointer-events: none;
  transform: translate(-50%, -50%);
  font-family: "Lexend Exa", sans-serif; font-weight: 300; font-size: 8px;
  letter-spacing: .14em; color: rgba(223, 219, 210, .82);
  text-shadow: 0 1px 3px rgba(0,0,0,.95); white-space: nowrap; }
/* Les quartiers du domaine, en vignette sous le bloc. Elles sont rendues a
   une seule echelle au sol : leurs tailles relatives sont vraies, et la
   feuille ne doit donc jamais les egaliser -- c'est le script qui leur donne
   leur largeur, d'un meme facteur pour toutes. */
.pl-quartiers { position: absolute; z-index: 3; left: 50%; bottom: 16px;
  transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; }
/* L'invite passe au-dessus quand il y a une bande de quartiers : centrée en
   bas, elle se retrouvait sous les vignettes. */
.pl-multi .pl-aide { top: 14px; bottom: auto; }
.pl-q { padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; line-height: 0; opacity: .78; transition: opacity .2s; }
.pl-q:hover { opacity: 1; }
.pl-q[aria-current="true"] { opacity: 1; cursor: default; }
.pl-q img { display: block; height: auto; border-radius: 6px;
  outline: 1px solid rgba(247,245,239,.12); outline-offset: -1px; }
.pl-q[aria-current="true"] img { outline: 1px solid var(--pg-or); }
.pl-q > span { position: absolute; left: 5px; top: 4px;
  font-family: "Lexend Exa", sans-serif; font-weight: 300; font-size: 8px;
  letter-spacing: .12em; line-height: 1; color: var(--pg-cream);
  background: rgba(13,18,38,.7); border-radius: 3px; padding: 3px 5px; }
.pl-q[aria-current="true"] > span { color: var(--pg-or); }
.pl-q:focus-visible img { outline: 1px solid var(--pg-or); }

/* L'invite disparaît au premier geste : le bloc tourne déjà tout seul, elle
   ne sert qu'à nommer le geste une fois. */
.pl-aide { position: absolute; z-index: 3; left: 50%; bottom: 16px; margin: 0;
  transform: translateX(-50%); padding: 7px 15px; border-radius: 999px;
  background: rgba(13, 18, 38, .62); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(247, 245, 239, .10);
  font-family: "Lexend Exa", sans-serif; font-weight: 300; font-size: 8.5px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(223, 219, 210, .7); transition: opacity .5s; }
.pl-pris .pl-aide { opacity: 0; }
/* En dessous d'un bloc vraiment large, la bande de vignettes ne tient pas
   entre l'echelle et la rose : elle passe en flux, juste sous la carte. */
@media (max-width: 900px) {
  .pl-quartiers { position: static; transform: none; justify-content: center;
                  padding: 10px 12px 2px; }
}
/* Sur un telephone, rien ne flotte : la scene garde toute la largeur et la
   legende passe dessous, en flux. Superposee, elle mangeait la moitie du bloc
   et se chevauchait avec l'echelle et la rose. */
@media (max-width: 620px) {
  .pl-panneau { position: static; width: auto; max-height: none;
                border-radius: 0 0 10px 10px; border-width: 1px 0 0;
                backdrop-filter: none; -webkit-backdrop-filter: none;
                background: rgba(13, 18, 38, .9); }
  .pl-cv { height: 46vh; min-height: 300px; }
  .pl-outils { top: 10px; right: 10px; }
  .pl-cap { display: none; }
  .pl-ech { left: 10px; bottom: 10px; padding: 7px 10px 6px; }
  .pl-nord { right: 10px; bottom: 10px; }
  /* L'invite passe en haut a gauche : centree en bas, elle chevauchait
     l'echelle des que la scene descendait sous 400 px de large. */
  .pl-aide { left: 10px; bottom: auto; top: 10px; transform: none;
             font-size: 8px; padding: 6px 12px; }
  .pl-cote { font-size: 7px; letter-spacing: .1em; }
  .pl-quartiers { gap: 7px; }
  .pl-multi .pl-aide { top: 10px; }
}

/* ---------- croix de fermeture ----------
   Le visiteur d'une page château vient presque toujours de la carte : la croix
   l'y ramène, et sur le château qu'il regardait. Le lien « Carte interactive »
   de la barre reste, lui, une entrée et non un retour — les deux ne font pas
   le même geste. */
.pg-fermer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: 14px; flex: 0 0 34px;
  border: 1px solid rgba(247, 245, 239, .16); border-radius: 50%;
  color: rgba(223, 219, 210, .72); font-size: 19px; line-height: 1;
  text-decoration: none; transition: color .2s, border-color .2s;
}
.pg-fermer:hover { color: var(--pg-or); border-color: var(--pg-or);
                   text-decoration: none; }
@media print { .pg-fermer { display: none; } }

/* Ecrit ici et non dans la requete des 720 px plus haut : a specificite egale,
   c'est l'ordre du fichier qui tranche, et la regle de base est definie
   au-dessus. */
@media (max-width: 720px) {
  .pg-fermer { margin-left: 8px; width: 32px; height: 32px; flex-basis: 32px;
               font-size: 17px; }
}

/* Une fois le bloc vivant monté, la planche fixe et ses onglets CSS n'ont plus
   lieu d'être — mais ils restent dans le document, puisque c'est eux qui
   servent sans JavaScript, sans WebGL et à l'impression. `display:block` sur
   .pl > img l'emportait sur l'attribut [hidden] : il faut le dire ici. */
.pl.pl-vivant > img,
.pl.pl-vivant > input,
.pl.pl-vivant > .pl-onglets { display: none; }
@media print {
  .pl > .pl-scene { display: none; }
  .pl.pl-vivant > img { display: block; }
}