/* ================================================================
   VIGNERONS v4 — liste des domaines + fiche vigneron
   Présentation pure. Préfixes : .vg-* (liste), .vgf-* (fiche).
   Chargé uniquement quand $is_vignerons (cf. inc/header.inc.php).
   Tokens repris de css/v4/site.css : encre (#241a12) / or (#b88a3e),
   #F9F5EA (beige), Poppins (titres) / Quicksand (corps) / Dancing Script.
   ================================================================ */

/* Racine de page (posée par index.php : #vignerons-content) */
#vignerons-content { background: #fff; }
.vg-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ============================ LISTE — HERO ============================ */
.vg-hero {
  /* Bascule encre/or : extrémités du dégradé purgées de leur teinte rougeâtre
     (#1a0a0f / #2a1015 lisaient « bordeaux ») → dégradé 100 % encre. */
  background: linear-gradient(135deg, var(--clr-ink-dark) 0%, var(--clr-ink) 50%, var(--clr-ink-dark) 100%);
  padding: 64px 0 56px;
}
.vg-hero-inner { max-width: 680px; }
.vg-hero-eyebrow { font-family: 'Montserrat', cursive; font-size: 22px; color: rgba(255,200,150,0.85); margin-bottom: 10px; }
.vg-hero h1 { font-family: 'Montserrat', Arial, sans-serif; font-size: 38px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 18px; }
.vg-hero p { font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.7; max-width: 540px; }
.vg-hero p .vgh-narrow { display: none; } /* variante mobile (cf. @media 879px) — pas de carte */
.vg-hero-stats { display: flex; gap: 36px; margin-top: 32px; flex-wrap: wrap; }
.vg-stat-num { font-family: 'Montserrat', Arial, sans-serif; font-size: 28px; font-weight: 700; color: #fff; }
.vg-stat-lbl { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }

/* ============================ LISTE — CARTE DES VIGNERONS ============================
   Mode figé : topographique + pastilles proportionnelles (porté de la maquette
   prototypes/maquette-vignerons-desktop.html). Tokens locaux --vg-* (palette
   cartographique chaude), font titre = serif (Cormorant Garamond si dispo,
   sinon Georgia). Desktop → carte ; mobile (<880px) → liste .vg-vlist. */
.vg-mapsection {
  --vg-ink: var(--c-ink); --vg-ink-soft: var(--c-text); --vg-accent: var(--c-ink); --vg-accent-2: var(--c-text);
  --vg-map-bg: var(--c-bg-soft); --vg-panel-bg: var(--c-surface); --vg-panel-line: var(--c-line);
  --vg-frame: var(--c-frame); --vg-divider: var(--c-line); --vg-band: var(--c-ink); --vg-relief: var(--c-frame);
  --vg-title: var(--ff-title);
  --vg-body: var(--ff-body);
  padding: 28px 0 40px; background: var(--c-bg-soft);
}

/* ---- Cadre atlas ---- */
/* Cadre décoratif de la carte SVG : rayons fixes volontaires (esthétique carte), NON pilotés par le cran de rayon. */
.vg-mapsection .atlas { margin: 0 auto; border: 1px solid var(--vg-frame); border-radius: 5px; padding: 9px; background: var(--vg-frame); box-shadow: 0 18px 50px rgba(60,40,20,.20); }
.vg-mapsection .atlas-inner { position: relative; border: 1px solid var(--vg-frame); border-radius: 3px; background: var(--vg-map-bg); }
.vg-map { position: relative; height: 880px; overflow: visible; }
.vg-map .mapclip { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: var(--vg-map-bg); }
.vg-map .map-frame-label { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-family: var(--vg-title); font-style: italic; font-size: 14px; color: var(--vg-ink-soft); letter-spacing: 2px; text-transform: uppercase; z-index: 3; opacity: .8; }
.vg-map .stage { position: absolute; inset: 0; overflow: hidden; }
.vg-map .stage svg.base { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Ruban du Rhône : repère 0..100 (preserveAspectRatio:none) → aligné aux pastilles (%). */
.vg-map .stage svg.river { position: absolute; inset: 0; width: 100%; height: 100%; }

.vg-map .region-band { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--vg-title); font-weight: 600; font-size: 16px; letter-spacing: 5px; text-transform: uppercase; color: var(--vg-band); pointer-events: none; text-shadow: 0 0 4px var(--vg-map-bg), 0 0 4px var(--vg-map-bg), 0 0 4px var(--vg-map-bg); }
.vg-map .region-band.north { top: 14px; }
.vg-map .region-band.south { top: 486px; }
.vg-map .region-divider { position: absolute; left: 9%; right: 9%; border-top: 1px dashed var(--vg-divider); top: 468px; }
.vg-map .city { position: absolute; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 5px; font-family: var(--vg-title); font-size: 13px; color: var(--vg-ink-soft); pointer-events: none; text-shadow: 0 0 4px var(--vg-map-bg), 0 0 4px var(--vg-map-bg), 0 0 3px var(--vg-map-bg); }
.vg-map .city b { width: 5px; height: 5px; border-radius: 50%; background: var(--vg-ink-soft); display: inline-block; }
.vg-map .city.r { flex-direction: row-reverse; }

.vg-map .compass { position: absolute; right: 18px; bottom: 16px; width: 58px; height: 58px; opacity: .65; color: var(--vg-accent-2); z-index: 3; }
.vg-map .legend { position: absolute; left: 18px; bottom: 16px; font-family: var(--vg-title); font-size: 12.5px; color: var(--vg-ink-soft); background: rgba(251,247,236,.82); border: 1px solid var(--vg-divider); padding: 9px 12px; border-radius: 3px; line-height: 1.5; z-index: 3; }
.vg-map .legend .lg-row { display: flex; align-items: center; gap: 7px; }
/* #6 (retour Thomas 02/07) — les pastilles de la légende étaient en encre
   (--vg-accent) alors que les pastilles de la carte sont OR : incohérence de
   lecture. On aligne la légende sur le disque réel (même dégradé or que
   .commune-pin .disk) pour que la légende décrive ce qu'on voit. */
.vg-map .legend .lg-disk { background: radial-gradient(circle at 38% 34%, var(--clr-or), var(--clr-or) 62%, var(--clr-or-dark, var(--clr-or))); border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--vg-body); font-weight: 700; }
.vg-map .legend .d1 { width: 16px; height: 16px; font-size: 8px; }
.vg-map .legend .d2 { width: 30px; height: 30px; font-size: 12px; }

/* ---- Pastilles communes (construites par vignerons-carte.js) ---- */
.vg-map .commune-pin { position: absolute; transform: translate(-50%,-50%); cursor: pointer; border: none; background: none; font-family: inherit; padding: 0; z-index: 4; line-height: 0; }
.vg-map .commune-pin .disk { --d: 24px; display: flex; align-items: center; justify-content: center; width: var(--d); height: var(--d); border-radius: 50%; background: radial-gradient(circle at 38% 34%, var(--clr-or), var(--clr-or) 62%, var(--clr-or-dark, var(--clr-or))); border: 2px solid var(--vg-map-bg); box-shadow: 0 0 0 1px rgba(184,138,62,.55), 0 3px 8px rgba(36,26,18,.28); color: #fff; font-family: var(--vg-body); font-weight: 700; font-size: calc(8px + var(--d) * 0.16); transition: transform .15s, box-shadow .15s; position: relative; z-index: 2; }
.vg-map .commune-pin .lblwrap { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0; white-space: nowrap; line-height: 1.05; }
.vg-map .commune-pin[data-side="e"] .lblwrap { left: 100%; margin-left: 9px; align-items: flex-start; text-align: left; }
.vg-map .commune-pin[data-side="w"] .lblwrap { right: 100%; margin-right: 9px; align-items: flex-end; text-align: right; }
.vg-map .commune-pin .lbl { font-family: var(--vg-title); font-weight: 600; font-size: 15px; color: var(--vg-ink); text-shadow: 0 0 4px var(--vg-map-bg), 0 0 4px var(--vg-map-bg), 0 1px 2px var(--vg-map-bg); transition: color .15s; }
.vg-map .commune-pin .cnt { font-family: var(--vg-body); font-size: 9.5px; font-weight: 600; letter-spacing: .4px; color: var(--vg-ink-soft); text-shadow: 0 0 3px var(--vg-map-bg), 0 0 3px var(--vg-map-bg); }
@media (hover: hover) { .vg-map .commune-pin:hover { z-index: 8; } }   /* pt13d — cf. pt11-survol-tactile */
@media (hover: hover) { .vg-map .commune-pin:hover .disk { transform: scale(1.08); box-shadow: 0 0 0 1px rgba(184,138,62,.7), 0 5px 14px rgba(36,26,18,.36); } }   /* pt13d — cf. pt11-survol-tactile */
@media (hover: hover) { .vg-map .commune-pin:hover .lbl { color: var(--clr-or-text); } }   /* pt13d — cf. pt11-survol-tactile */
.vg-map .commune-pin.on { z-index: 9; }
.vg-map .commune-pin.on .disk { transform: scale(1.1); background: radial-gradient(circle at 38% 34%, var(--clr-or), var(--clr-or) 70%, var(--clr-or)); }
.vg-map .commune-pin.on .lbl { color: var(--clr-or-text); }
.vg-map .commune-pin .lblwrap.dim { opacity: 0; transition: opacity .15s; }
/* Labels libres : un nom masqué (declutter) n'est PLUS révélé en place.
   Au survol -> étiquette flottante .floatlbl posée en zone libre (JS).
   Au clic   -> panneau .callout. */
.vg-map .commune-pin:hover .lblwrap.dim, .vg-map .commune-pin.on .lblwrap.dim { opacity: 0; }

/* ---- Étiquette flottante posée en zone libre + trait de rappel ---------- */
.vg-map .floatlbl {
  position: absolute; z-index: 40; display: none; flex-direction: column; align-items: flex-start;
  background: #fffdf9; border: 1px solid var(--vg-band); border-radius: 11px;
  padding: 5px 10px; box-shadow: 0 7px 20px rgba(70,45,20,.18);
  pointer-events: none; white-space: nowrap;
}
.vg-map .floatlbl .fl-nm { font-family: var(--vg-title); font-weight: 700; font-size: 14px; color: var(--vg-ink); line-height: 1.18; }
.vg-map .floatlbl .fl-app { font-family: var(--vg-body); font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--vg-ink-soft); line-height: 1.18; margin-top: 1px; }
.vg-map svg.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 39; overflow: visible; }
.vg-map svg.leaders line { stroke: var(--vg-accent); stroke-width: 1.5; stroke-linecap: round; }
.vg-map svg.leaders circle { fill: var(--vg-accent); }

/* ---- Fiche flottante (callout) ---- */
.vg-map .callout { position: absolute; width: 330px; max-width: 86vw; background: var(--vg-panel-bg); border: 1px solid var(--vg-frame); border-radius: var(--radius-l); box-shadow: 0 16px 44px rgba(60,30,20,.30); padding: 17px 18px 15px; z-index: 30; opacity: 0; pointer-events: none; transform: scale(.9); transition: opacity .15s ease-out, transform .24s cubic-bezier(.2,1.35,.45,1); }
.vg-map .callout.open { opacity: 1; pointer-events: auto; transform: scale(1); }
.vg-map .callout[data-side="above"] { transform-origin: bottom center; }
.vg-map .callout[data-side="below"] { transform-origin: top center; }
.vg-map .callout .tail { position: absolute; left: 50%; width: 17px; height: 17px; background: var(--vg-panel-bg); transform: translateX(-50%) rotate(45deg); }
.vg-map .callout[data-side="above"] .tail { bottom: -9px; border-right: 1px solid var(--vg-frame); border-bottom: 1px solid var(--vg-frame); }
.vg-map .callout[data-side="below"] .tail { top: -9px; border-left: 1px solid var(--vg-frame); border-top: 1px solid var(--vg-frame); }
.vg-map .callout .cl-close { position: absolute; top: 7px; right: 9px; width: 24px; height: 24px; border: none; background: none; font-size: 21px; line-height: 1; color: var(--vg-ink-soft); cursor: pointer; border-radius: 50%; transition: all .15s; }
.vg-map .callout .cl-close:hover { color: var(--clr-or); background: rgba(184,138,62,.07); }
.vg-map .callout h3 { font-family: var(--vg-title); font-weight: 600; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--clr-or-text); margin: 0 0 3px; }
.vg-map .callout .cl-name { font-family: var(--vg-title); font-size: 24px; font-weight: 600; color: var(--vg-ink); line-height: 1.05; margin: 0 30px 1px 0; }
.vg-map .callout .cl-meta { font-size: 11.5px; color: var(--vg-ink-soft); margin-bottom: 9px; }
.vg-map .callout .cl-list { max-height: 296px; overflow: auto; }
.vg-map .callout .drow { text-decoration: none; color: inherit; cursor: pointer; border-bottom: 1px solid var(--vg-panel-line); display: flex; align-items: baseline; gap: 10px; padding: 10px 0 10px 12px; position: relative; }
.vg-map .callout .drow:last-child { border-bottom: none; }
.vg-map .callout .drow::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; background: transparent; transition: background .2s; }
@media (hover: hover) { .vg-map .callout .drow:hover::before { background: var(--vg-accent); } }   /* pt13d — cf. pt11-survol-tactile */
.vg-map .callout .dn { font-family: var(--vg-title); font-weight: 600; font-size: 17px; line-height: 1.1; }
@media (hover: hover) { .vg-map .callout .drow:hover .dn { color: var(--clr-or-text); } }   /* pt13d — cf. pt11-survol-tactile */
.vg-map .callout .dmeta { font-size: 11px; color: var(--vg-ink-soft); margin-top: 1px; }
.vg-map .callout .drow .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vg-map .callout .drow .vins { font-size: 11px; color: var(--vg-ink-soft); font-variant-numeric: tabular-nums; }
.vg-map .callout .arrow { color: var(--vg-accent-2); font-size: 16px; }

/* ---- Liste .vg-vlist : vue MOBILE + repli sans JS + SEO (masquée desktop) ---- */
.vg-vlist { display: none; }
.vgl-region-head { position: sticky; top: 0; z-index: 2; background: var(--c-bg-soft); font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--clr-or-text); padding: 12px 4px 8px; border-bottom: 1px solid var(--c-border-struct); margin: 18px 0 0; }
.vgl-row { display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px solid #ececec; color: inherit; text-decoration: none; }
.vgl-row:active { background: #fbf7ec; }
.vgl-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vgl-name { font-family: 'Montserrat', Arial, sans-serif; font-size: 15px; font-weight: 700; color: #333; line-height: 1.2; }
.vgl-meta { font-size: 12px; color: #888; }
.vgl-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vgl-vins { font-size: 11.5px; color: #999; }
.vgl-arrow { color: var(--clr-or); font-size: 20px; }

/* ============================ AILLEURS EN FRANCE + À GÉOLOCALISER ============================ */
.vg-aside-wrap { padding: 0 0 56px; background: #fff; }
.vg-aside-card { background: var(--c-bg-soft); border: 1px solid var(--c-border-struct); border-radius: var(--radius-m); padding: 18px 22px; margin-top: 22px; }
.vg-aside-head { font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--clr-or-text); margin: 0 0 6px; }
.vg-aside-desc { font-size: 12.5px; color: #666; margin: 0 0 13px; line-height: 1.55; }
.vg-ail-list { display: flex; flex-wrap: wrap; gap: 9px; }
.vg-ail-item { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--c-border-struct); border-radius: var(--radius-s); padding: 7px 15px 7px 12px; color: inherit; text-decoration: none; transition: border-color .18s, box-shadow .18s; }
@media (hover: hover) { .vg-ail-item:hover { border-color: var(--clr-or); box-shadow: 0 3px 12px rgba(184,138,62,.10); } }   /* pt13d — cf. pt11-survol-tactile */
.vg-ail-pin { font-size: 13px; }
.vg-ail-nm { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 14px; color: #333; }
.vg-ail-lc { font-size: 11.5px; color: #888; }

/* ============================ FICHE — BREADCRUMB ============================ */
/* Bande crème retirée (refonte fil d'Ariane 2026-06-15) : le wrapper reste un
   simple positionneur, le style est porté par .cc-breadcrumb. */
.vgf-breadcrumb { padding: 12px 0; }

/* ============================ FICHE — DIRECTION A « ÉDITORIAL » ============================
   Port de prototypes/maquette-fiche-domaine.html (renderA). Palette encre/or. */
.vgf-fiche-serif { font-family: 'Montserrat', Georgia, serif; }

.vgf-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #8f6f3e; }

/* HÉRO immersif plein écran */
/* pt1b/0722 — bande 2.2:1 (au lieu de 390px ~3.69:1 qui rognait 64 %). aspect-ratio
   fluide borné : ~654px à 1440 (clampé 620), min 300 protège le mobile. La dérivée
   hero est pré-découpée à 2.2:1 → cover ≈ no-op au ratio nominal. */
.vgf-hero { position: relative; width: 100%; aspect-ratio: 2.2 / 1; min-height: 300px; max-height: 620px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.vgf-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  background-image: linear-gradient(180deg, rgba(20,12,8,.15) 0%, rgba(20,12,8,.78) 88%), var(--vgf-herobg); }
/* Repli sans photo : image de vignes générique (Côtes du Rhône, sol caillouteux).
   Dégradé ASYMÉTRIQUE (scrim) : transparent en haut → sombre seulement en bas. Le
   ciel et les coteaux gardent toute leur lumière, on n'assombrit que la zone du
   texte. La lisibilité du nom est aussi tenue par le text-shadow sur .vgf-hero h1.
   Source Pexels (usage commercial libre, sans attribution requise). */
.vgf-hero-bg--ph {
  /* 1re déclaration = repli universel : navigateurs sans image-set()/type() -> JPEG. */
  background-image: linear-gradient(180deg, rgba(20,12,8,0) 0%, rgba(20,12,8,.04) 60%, rgba(20,12,8,.62) 100%),
    url('/img/v4/hero-vignes-cotes-rhone-2-2.jpg?2');
  /* 2e déclaration = navigateurs modernes : WebP (~40% plus léger) avec repli JPEG
     intégré. Les navigateurs qui ne comprennent pas image-set()/type() ignorent
     cette règle et gardent le JPEG ci-dessus. */
  background-image: linear-gradient(180deg, rgba(20,12,8,0) 0%, rgba(20,12,8,.04) 60%, rgba(20,12,8,.62) 100%),
    image-set(url('/img/v4/hero-vignes-cotes-rhone-2-2.webp') type('image/webp'),
              url('/img/v4/hero-vignes-cotes-rhone-2-2.jpg?2') type('image/jpeg'));
}
.vgf-hero-inner { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px 40px; }
/* .vgf-hero-eyebrow retiré (retour Thomas 20260704 #3) — sur-titre « Vignerons
   de caractère » supprimé du héro producteur, la règle n'a plus d'usage. */
.vgf-hero h1 { font-family: 'Montserrat', Georgia, serif; font-weight: 700; font-size: 38px; line-height: 1.02;
  margin: 8px 0 10px; letter-spacing: .01em; color: #fff;
  /* Ombre portée : tient la lisibilité du nom sur les zones claires de la photo
     (ciel, gravier) sans avoir à assombrir l'image via le scrim. */
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.40); }
.vgf-region { font-size: 14px; color: #f0e6d8; display: flex; align-items: center; gap: 7px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.vgf-region strong { color: #fff; font-weight: 600; }
.vgf-tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.vgf-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 4px 11px;
  border-radius: 999px; background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.3); color: #fff; }
  /* NB : pas de backdrop-filter — il déclenche une bande blanche « fantôme » au
     scroll sur Firefox Android (repaint du compositeur). Opacité du fond montée
     de .14 à .20 pour compenser la perte du flou. */
/* .vgf-tag--hl retiré : le tag bio consommait ce fond vert (multiply + accent or
   du picto maison qui jurait). La certif bio est désormais un verre neutre comme
   ses tags frères, le picto maison « bio » (feuille) portant le signal. */

/* STATBAR sombre */
.vgf-statbar { background: #2c2420; color: #f1e7d8; }
.vgf-statbar-in { max-width: 1080px; margin: 0 auto; padding: 12px 22px; display: flex; flex-wrap: wrap; gap: 14px; }
.vgf-stat { flex: 1; min-width: 120px; text-align: center; border-right: 1px solid #443730; }
.vgf-stat:last-child { border-right: 0; }
.vgf-stat-num { font-family: 'Montserrat', Georgia, serif; font-size: 20px; font-weight: 700; color: #fff; line-height: 1; }
.vgf-stat-lbl { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #b9a890; margin-top: 5px; }

/* RÉCIT centré + lettrine */
.vgf-story { max-width: 680px; margin: 54px auto 0; text-align: center; }
.vgf-story .vgf-eyebrow { display: block; margin-bottom: 10px; }
.vgf-story h2 { font-family: 'Montserrat', Georgia, serif; font-weight: 600; font-size: 34px; margin: 0 0 22px; color: #2c2420; }
.vgf-story-body { text-align: left; font-size: 16px; color: #5c5048; line-height: 1.75; }
.vgf-story-body p + p, .vgf-story-body p + h3 { margin-top: 12px; }
.vgf-story-body p:first-of-type::first-letter { font-family: 'Montserrat', Georgia, serif; font-size: 58px;
  font-weight: 700; float: left; line-height: .78; margin: 6px 12px 0 0; color: var(--clr-or-text); }
.vgf-story-body h3 { font-family: 'Montserrat', Georgia, serif; font-weight: 600; font-size: 22px; color: #2c2420; margin: 26px 0 6px; text-align: left; }
.vgf-empty-soft { background: #fff; border: 1px dashed #e6d9c5; border-radius: var(--radius-m); padding: 20px; text-align: center;
  color: #8a7d70; font-size: 13.5px; font-style: italic; }

/* pt1/0718 — Fiche producteur SANS vin visible : état « cul-de-sac » guidé (message
   + 2 portes de sortie) en remplacement de l'ancien <p.cc-empty> nu. Boutons calqués
   sur .vgf-wines-more-btn (tokens système) ; min-height 44px = cible tactile. */
.vgf-cta-empty { max-width: 560px; margin: 40px auto; }
.vgf-cta-empty .vgf-empty-soft { font-size: 15px; font-style: normal; padding: 26px 20px; }
.vgf-cta-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.vgf-cta-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px;
  border-radius: var(--radius-s); padding: var(--btn-pad-y) var(--btn-pad-x);
  font: var(--btn-weight) var(--btn-font)/1 var(--ff-body); letter-spacing: var(--btn-letter);
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.vgf-cta-btn--primary { background: var(--clr-ink); color: #fff; border: 1.5px solid var(--clr-ink); }
.vgf-cta-btn--primary:hover, .vgf-cta-btn--primary:focus-visible { background: var(--clr-ink-dark); }
.vgf-cta-btn--ghost { background: transparent; color: var(--clr-or-text); border: 1.5px solid var(--clr-or); transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
/* pt2 (retours 26/07) — bouton bordé or de la même famille que .vgf-wines-more-btn, sur la
   MÊME fiche : le laisser basculer en encre aurait fait diverger deux boutons jumeaux.
   Patron --cc-addh-* (site.css, bloc pt4 du 24/07). Le CTA --primary n'est pas concerné :
   il est encre au repos et garde son survol encre foncé (doctrine du bloc pt4). */
.vgf-cta-btn--ghost:hover, .vgf-cta-btn--ghost:focus-visible { background: var(--cc-addh-bg); border-color: var(--cc-addh-bd); color: var(--cc-addh-tx); box-shadow: var(--cc-addh-sh); transform: var(--cc-addh-tr); }

/* BANDEAU appellations & cépages */
.vgf-appband { max-width: 760px; margin: 40px auto 0; text-align: center; }
.vgf-appband .vgf-eyebrow { display: block; margin-bottom: 14px; }
.vgf-appel-tag { display: inline-block; font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: var(--radius-s);
  background: #fff; border: 1px solid #e6d9c5; color: #5c5048; margin: 0 7px 7px 0; }
/* #1 (Thomas 23/06-2) — chips appellation cliquables → page appellation. L'<a> hérite
   du look chip via le sélecteur .vgf-appel-tag ci-dessus ; ici on retire le soulignement
   et on pose l'accent or rationné au survol/focus (tokens système, patron .btn-out:hover). */
a.vgf-appel-tag { text-decoration: none; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
a.vgf-appel-tag:hover, a.vgf-appel-tag:focus-visible { border-color: var(--clr-or); color: var(--clr-or-text); }
.vgf-appband-grapes { margin-top: 12px; }
/* #7 (Thomas 23/06) — cépage distingué de l'appellation sans sous-titre : italique
   léger, teinte beige très atténuée, texte discret, pas de bordure (la bordure reste
   le repère « appellation »). Lit comme un descriptif secondaire, pas comme un glitch. */
.vgf-grape-tag { display: inline-block; font-size: 12px; font-weight: 500; font-style: italic; padding: 4px 10px; border-radius: var(--radius-s);
  background: #faf6ef; color: #8a7d70; margin: 0 6px 6px 0; }

/* SECTION vins */
.vgf-winesec { margin: 60px 0 0; }
.vgf-winesec-head { text-align: center; margin-bottom: 30px; }
.vgf-winesec-title { font-family: 'Montserrat', Georgia, serif; font-weight: 600; font-size: 32px; color: #2c2420; }
.vgf-winesec-sub { color: #8a7d70; font-size: 14px; }
.vgf-wines { margin-top: 4px; }
/* Filet vertical entre cartes = ombre portée de .wine-card → il suit la hauteur de la
   carte. Une dernière carte plus courte (sans ligne cagnotte/prix domaine) laissait un
   trou de filet en bas (retour Thomas R13). On veut étirer la carte à toute la hauteur
   de sa cellule de grille → filet continu.
   display:contents (et NON display:flex) : le <li> ne génère aucune boîte, donc la
   .wine-card devient l'élément de grille DIRECT et l'étirement de la grille
   (align-items:stretch) lui donne la hauteur de la rangée. INDISPENSABLE pour neutraliser
   le style liste hérité « .liste-vins li { height:28px; display:table; border-bottom } » :
   display:flex laissait passer height:28px + border-bottom et écrasait chaque carte à 28px
   (on ne voyait que la capsule). Même pattern que le catalogue et « Du même producteur ».
   La pagination « Afficher plus » masque toujours les <li> via display:none (gagne sur
   display:contents). */
.vgf-wines ul.liste-vins.cc-wine-grid > li { display: contents; }
/* Repli « Afficher plus » (mode vrac, > 8 vins) — calque .vin-related */
.vgf-wines.is-collapsed > ul.liste-vins > li:nth-child(n+9) { display: none; }
.vgf-wines-more { text-align: center; margin-top: 22px; }
.vgf-wines-more-btn { background: transparent; color: var(--clr-or-text); border: 1.5px solid var(--clr-or);
  border-radius: var(--radius-s); padding: var(--btn-pad-y) var(--btn-pad-x); font: var(--btn-weight) var(--btn-font)/1 var(--ff-body); letter-spacing: var(--btn-letter);
  cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }   /* #17 : police 'Inter' intruse → Montserrat + gabarit commun */
/* pt2 (retours 26/07) — LE bouton pointé par les captures de Thomas : « Afficher les N autres
   vins ». Il basculait en encre plein + texte blanc au survol ; Thomas veut « aucun changement
   de couleur, comme les boutons d'ajout au panier quand le panier est vide » = le patron
   --cc-addh-* posé au pt4 du 24/07 (défini dans site.css, piloté par le back-office). */
.vgf-wines-more-btn:hover, .vgf-wines-more-btn:focus-visible { background: var(--cc-addh-bg); border-color: var(--cc-addh-bd); color: var(--cc-addh-tx); box-shadow: var(--cc-addh-sh); transform: var(--cc-addh-tr); }
/* Titre de groupe (disposition = appellation) */
.vgf-wine-group-title { font-family: 'Montserrat', Georgia, serif; font-style: italic; font-size: 22px;
  color: #8f6f3e; margin: 26px 0 12px; display: flex; align-items: center; gap: 12px; }
.vgf-wine-group-title::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }
.vgf-wine-group-title:first-child { margin-top: 0; }

/* VIGNERONS SIMILAIRES (band centré) */
.vgf-simsec { max-width: 880px; margin: 60px auto 0; text-align: center; }
.vgf-simsec .vgf-eyebrow { display: block; margin-bottom: 16px; }
.vgf-sims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vgf-sim { display: flex; align-items: center; gap: 11px; text-align: left; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-m); padding: 12px 14px; color: inherit; text-decoration: none; transition: .15s; }
@media (hover: hover) { .vgf-sim:hover { border-color: #b08c5a; box-shadow: 0 8px 22px rgba(70,45,20,.09); } }   /* pt13d — cf. pt11-survol-tactile */
.vgf-sim-thumb { display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--clr-or); }
.vgf-sim-txt { display: flex; flex-direction: column; }
.vgf-sim-name { font-size: 13px; font-weight: 700; color: #2c2420; }
.vgf-sim-region { font-size: 11.5px; color: #8a7d70; }

/* INFOBAR bas */
.vgf-infobar { margin: 64px 0 0; background: #fff; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.vgf-infobar-in { max-width: 1080px; margin: 0 auto; padding: 34px 22px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.vgf-infocol h4 { font-family: 'Inter', 'Montserrat', Arial, sans-serif; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: #8f6f3e; margin: 0 0 14px; }
.vgf-ident-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--c-line); font-size: 14px; }
.vgf-ident-lbl { color: #8a7d70; } .vgf-ident-val { font-weight: 500; text-align: right; color: #2c2420; }
.vgf-ident-link { color: #8f6f3e; }
.vgf-address { font-size: 14px; color: #5c5048; line-height: 1.9; }
.vgf-address--empty { font-style: italic; color: #8a7d70; }
.vgf-addr-line { display: block; }

/* ================================================================
   RESPONSIVE — liste (partagé) + fiche éditoriale
   ================================================================ */
/* Bascule carte ↔ liste : desktop = carte (atlas), mobile = liste .vg-vlist.
   La carte (positionnement absolu + callout) n'a pas de sens en étroit. */
@media (max-width: 879px) {
  /* Mobile : on masque TOUTE la section carte (atlas + liste géo .vg-vlist).
     L'annuaire A→Z juste en dessous devient l'unique liste → fini la double-liste.
     SEO / no-JS : tous les liens domaines restent rendus côté serveur dans l'annuaire. */
  .vg-mapsection { display: none; }
  /* Le héro parle de « pastilles à cliquer » : hors-sujet sans carte → texte mobile dédié. */
  .vg-hero p .vgh-wide { display: none; }
  .vg-hero p .vgh-narrow { display: inline; }
  /* Sans carte, « X communes cartographiées » n'a plus de sens → masquée sur mobile. */
  .vg-stat--communes { display: none; }
}
@media (max-width: 900px) {
  .vg-hero h1 { font-size: 28px; }
}
@media (max-width: 768px) {
  .vg-hero { padding: 40px 0 36px; }
  .vg-hero-stats { gap: 20px; }
}

/* ============================ FICHE — RESPONSIVE (mobile dédié) ============================ */
@media (max-width: 880px) {
  .vgf-hero { min-height: 260px; max-height: 420px; }
  .vgf-hero h1 { font-size: 34px; }
  .vgf-region { font-size: 13.5px; }
  .vgf-statbar-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
  .vgf-stat { min-width: 0; border-right: 1px solid #443730; border-bottom: 1px solid #443730; padding: 13px 6px; }
  .vgf-stat:nth-child(2n) { border-right: 0; }
  .vgf-stat-num { font-size: 19px; }
  .vgf-stat-lbl { font-size: 9.5px; }
  .vgf-story { margin-top: 30px; }
  .vgf-story h2 { font-size: 27px; }
  .vgf-winesec-title { font-size: 25px; }
  .vgf-sims { grid-template-columns: 1fr; }
  .vgf-infobar-in { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .vgf-hero h1 { font-size: 30px; }
}

/* ============================ LISTE — ANNUAIRE DES DOMAINES ============================
   Sous la carte. Port de prototypes/maquette-vignerons-annuaire-styles.html.
   4 styles pilotés serveur via .style-{compact|souple|editorial|typo}. */
.vg-an-wrap {
  --an-cream:var(--c-surface); --an-paper:var(--c-bg-soft); --an-band:var(--c-line); --an-line:var(--c-line);
  --an-ink:var(--c-ink); --an-muted:var(--c-text); --an-accent:var(--c-ink); --an-bordeaux:var(--c-text-strong);
  background:var(--c-bg-soft); padding:8px 0 60px; color:var(--an-ink);
  font-family:'Montserrat', Arial, sans-serif;
}
.vg-an-wrap .an-head { text-align:center; margin:0 0 22px; }
.vg-an-wrap .an-head h2 { font-family:'Montserrat', Georgia, serif; font-weight:700; font-size:32px; margin:6px 0 6px; color:var(--an-ink); }
.vg-an-wrap .an-head p { margin:0 auto; max-width:560px; color:var(--an-muted); font-size:15px; line-height:1.5; }

.vg-an-wrap .an-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin:0 0 18px; padding:14px 16px; background:var(--an-cream); border:1px solid var(--an-line); border-radius:var(--radius-m); }
.vg-an-wrap .an-search { position:relative; flex:1; min-width:200px; max-width:340px; }
.vg-an-wrap .an-search input { width:100%; font-family:inherit; font-size:14px; color:var(--an-ink); background:var(--an-paper);
  border:1px solid var(--an-band); border-radius:999px; padding:10px 16px 10px 38px; outline:none; transition:.18s; }
.vg-an-wrap .an-search input:focus { border-color:var(--an-accent); box-shadow:0 0 0 3px rgba(176,140,90,.15); }
.vg-an-wrap .an-search svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--an-muted); }
.vg-an-wrap .an-count { font-size:12.5px; color:var(--an-muted); font-weight:600; white-space:nowrap; }

/* A→Z (colonnes) */
.vg-an .an-az { column-width:270px; column-gap:34px; }
.vg-an .an-grp { break-inside:avoid; margin:0 0 16px; }
.vg-an .an-grp .an-ltr { font-family:'Montserrat', Georgia, serif; font-size:24px; font-weight:700; color:var(--an-accent);
  border-bottom:2px solid var(--an-line); padding-bottom:2px; margin:0 0 8px; }
.vg-an .an-row { display:block; text-decoration:none; color:var(--an-ink); border-radius:var(--radius-s); transition:.13s; }
.vg-an .an-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.vg-an .an-nm { font-weight:600; color:var(--an-ink); line-height:1.2; }
/* pt11 (retours 28/07) — survol réservé aux pointeurs qui survolent : en tactile :hover
   se pose au toucher et y reste (« la ligne devient beige selon comment j'effleure »).
   Même traitement sur .cc-ac-row (panneau de recherche), .cart-drawer-item, a.ccr-line… */
@media (hover: hover) {
  .vg-an .an-row:hover { background:var(--an-cream); }
  .vg-an .an-row:hover .an-nm { color:var(--an-bordeaux); }
}
.vg-an .an-ct { color:var(--an-muted); font-weight:600; white-space:nowrap; }

/* chips */
.vg-an .an-apps { display:flex; flex-wrap:wrap; gap:4px; }
.vg-an .an-chip { font-weight:600; color:var(--an-accent); background:var(--c-bg-soft); border:1px solid var(--c-frame); border-radius:999px;
  line-height:1.5; white-space:nowrap; }
.vg-an .an-chip.xtra { display:none; }
.vg-an .an-row.show-all .an-chip.xtra { display:inline-flex; }
.vg-an .an-chip.more { cursor:pointer; color:var(--an-bordeaux); background:color-mix(in srgb, var(--clr-or) 10%, #fff); border-color:color-mix(in srgb, var(--clr-or) 22%, #fff); }
.vg-an .an-row.show-all .an-chip.more { display:none; }
/* texte / typo */
.vg-an .an-apps-txt { color:var(--an-muted); line-height:1.35; }
.vg-an .an-apps-typo { color:var(--an-accent); text-transform:uppercase; letter-spacing:.06em; line-height:1.4; }

/* — style « souple » — */
.vg-an.style-souple .an-row { padding:7px; margin-bottom:2px; }
.vg-an.style-souple .an-nm { font-size:14px; }
.vg-an.style-souple .an-ct { font-size:11px; }
.vg-an.style-souple .an-apps { margin-top:6px; }
.vg-an.style-souple .an-chip { font-size:10.5px; padding:2px 9px; }

/* — style « compact » (défaut) — */
.vg-an.style-compact .an-az { column-width:250px; column-gap:28px; }
.vg-an.style-compact .an-row { padding:3px 6px; margin-bottom:0; }
.vg-an.style-compact .an-nm { font-size:13px; }
.vg-an.style-compact .an-ct { font-size:10.5px; }
.vg-an.style-compact .an-apps { margin-top:3px; }
.vg-an.style-compact .an-chip { font-size:9.5px; padding:1px 7px; }
.vg-an.style-compact .an-grp { margin-bottom:11px; }

/* — style « éditorial » (texte fin, pas de chips) — */
.vg-an.style-editorial .an-row { padding:6px; margin-bottom:1px; }
.vg-an.style-editorial .an-nm { font-size:14px; }
.vg-an.style-editorial .an-ct { font-size:11px; }
.vg-an.style-editorial .an-apps-txt { font-size:12px; margin-top:2px; }

/* — style « typographique » — */
.vg-an.style-typo .an-row { padding:8px 6px; margin-bottom:1px; border-bottom:1px solid #f1ead7; }
.vg-an.style-typo .an-grp .an-ltr { font-size:27px; }
.vg-an.style-typo .an-nm { font-size:14.5px; font-family:'Montserrat', Georgia, serif; font-weight:700; }
.vg-an.style-typo .an-ct { font-size:10.5px; }
.vg-an.style-typo .an-apps-typo { font-size:10px; margin-top:4px; }

/* — section « Ailleurs en France » — */
.vg-an .an-ailleurs { margin-top:40px; padding-top:8px; }
.vg-an .an-ail-head { display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.vg-an .an-ail-head .ttl { font-family:'Montserrat', Georgia, serif; font-weight:700; font-size:22px; color:var(--an-ink); white-space:nowrap; }
.vg-an .an-ail-head .rule { flex:1; height:1px; background:linear-gradient(90deg, var(--an-band), transparent); }
.vg-an .an-ail-head .sub { font-size:12px; color:var(--an-muted); white-space:nowrap; }
.vg-an .an-ailgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:10px; }
.vg-an .an-ail-card { display:flex; gap:11px; align-items:flex-start; text-decoration:none; color:var(--an-ink);
  padding:11px 13px; background:var(--an-cream); border:1px solid var(--an-line); border-radius:var(--radius-m); transition:.15s; }
@media (hover: hover) {   /* pt11 — cf. .an-row ci-dessus */
  .vg-an .an-ail-card:hover { border-color:var(--an-accent); box-shadow:0 5px 14px rgba(70,45,20,.07); }
}
.vg-an .an-ail-pin { flex:none; width:24px; height:24px; border-radius:50%; background:#f3ece0;
  display:flex; align-items:center; justify-content:center; font-size:13px; }
.vg-an .an-ail-body { display:flex; flex-direction:column; min-width:0; }
.vg-an .an-ail-nm { display:block; font-weight:600; font-size:14px; line-height:1.2; }
@media (hover: hover) {   /* pt11 — cf. .an-row ci-dessus */
  .vg-an .an-ail-card:hover .an-ail-nm { color:var(--an-bordeaux); }
}
.vg-an .an-ail-loc { display:block; font-size:11.5px; color:var(--an-muted); margin-top:2px; }
.vg-an .an-ail-app { display:block; font-size:11px; color:var(--an-accent); font-weight:600; margin-top:3px; }

.vg-an .an-empty { text-align:center; color:var(--an-muted); padding:40px; font-size:15px; }

/* — Mobile (sous la liste-repli de la carte) — */
@media (max-width: 880px) {
  .vg-an-wrap { padding:4px 0 48px; }
  .vg-an-wrap .an-head h2 { font-size:27px; }
  /* Barre de recherche collante en haut : tapée n'importe où dans la liste, elle remonte
     au-dessus du clavier au lieu d'être masquée par lui (le header mobile s'efface au scroll). */
  .vg-an-wrap .an-toolbar { position:sticky; top:0; z-index:20; box-shadow:0 3px 12px rgba(60,40,20,.07); }
  .vg-an .an-az { column-width:auto; column-count:1; }
  .vg-an .an-row { padding-top:11px; padding-bottom:11px; min-height:44px; }
  .vg-an.style-compact .an-row,
  .vg-an.style-souple .an-row { padding-top:9px; padding-bottom:9px; min-height:44px; }
  .vg-an .an-apps { row-gap:5px; }
  .vg-an .an-ailgrid { grid-template-columns:1fr; }
  /* En-tête « Ailleurs en France » = [titre] [trait flex:1] [sous-titre]. Le
     sous-titre en white-space:nowrap débordait jusqu'à ~441px sur un écran 390
     → le navigateur dézoomait (viewport rapporté à 441). On le passe sur sa
     propre ligne et on autorise le retour à la ligne. Cf. revue mobile #4. */
  .vg-an .an-ail-head { flex-wrap:wrap; }
  .vg-an .an-ail-head .sub { white-space:normal; flex-basis:100%; }
}