/* Domaine de Mély — feuille de style unique.
Deux caractères : Cormorant Garamond (titres et nom) et Newsreader (texte), tous deux sous
licence SIL OFL. Les images sont déclarées une fois en variables CSS et
posées par app.js sur les ![]()
. */
@font-face{font-family:Newsreader;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Newsreader;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/newsreader-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Newsreader;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/newsreader-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Newsreader;font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-italic.woff2) format('woff2')}
/* Cormorant Garamond, choisi par Loïc : le nom et tous les titres.
Sous-ensemble latin des statiques Medium et SemiBold de material/. SIL OFL. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
:root{
/* Les ![]()
portent leur src dans le HTML : il ne reste ici que
l’image employée comme masque CSS, que le HTML ne peut pas porter. */
/* l'oiseau doré du logo, sans le nom, tiré du PDF de Loïc par
tools/cut-bird.py. Une image et non un masque : un masque écraserait
le dégradé d'or. Le même en tête et sur l'accueil (D-076). */
--i-logo-oiseau:url(assets/logo-oiseau-or.webp)
}
/*{{FONTS}}*/
/*{{IMGVARS}}*/
/* ── base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#0e0f11;color:#e9e7e2;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid #ffb300;outline-offset:2px}
/* the rig must never widen the page it is reviewing: it scrolls inside itself */
font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8b8f96;white-space:nowrap}
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 28px}
[hidden]{display:none!important}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
}
#d-vol{
/* the whole page from two inks, plus the gold the domaine already
uses as a hairline on its labels. No third ground colour. */
--ink:#2A2520; --paper:#EFE8D3; --paper-deep:#E5DCC2;
--ink-soft:#6B6154; --rule:#C9BFA3; --gold:#A98526;
/* L'or du logo, relevé sur le fichier de Loïc. Distinct de --gold,
qui reste le filet : 6.40 sur l'encre de la barre, 1.75 sur le
papier — donc réservé aux fonds sombres, comme --gold. */
--or:#CDA249;
--on-ink:rgba(239,232,211,.74); /* muted type ON the ink ground */
--hair:rgba(239,232,211,.16); /* hairlines ON the ink ground */
/* Offset the sticky header sits below. It existed for the review rig that
used to sit above the page; standalone there is nothing above it, so it
is 0. At 44px the header stuck a band below the top and the page
scrolled through the gap. */
--rig:0px;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
/* La gouttière respire avec la fenêtre au lieu de rester à 24px : serrée
sur un téléphone, large sur un grand écran. Au-delà de 1240px ce sont
les marges automatiques de .wrap qui prennent le relais. */
--gutter:clamp(20px,3vw,48px);
background:var(--ink);color:var(--paper);
font-family:Newsreader,Georgia,serif;font-size:16.5px;line-height:1.65;
}
#d-vol .wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
#d-vol [id]{scroll-margin-top:calc(var(--rig) + 56px)}
/* Titres en capitales, comme le nom du domaine dans son logo. */
#d-vol h1,#d-vol h2,#d-vol h3{margin:0;font-family:"Cormorant Garamond",Garamond,Georgia,serif;
font-weight:600;text-transform:uppercase;letter-spacing:.055em}
#d-vol p{margin:0 0 var(--s4)}
#d-vol .tag{font-size:11.5px;letter-spacing:.2em;font-variant-numeric:tabular-nums;
text-transform:uppercase;color:var(--ink-soft)}
#d-vol .v-descent .tag{color:var(--on-ink)}
/* a sentence set in 10px caps is a sentence nobody reads; the caveats
that are prose get prose treatment */
#d-vol .v-note{font-size:12.5px;line-height:1.65;color:var(--ink-soft);max-width:56ch}
/* slim header, contact and order reachable from the first view.
It stays ink over both grounds, so it stitches the two halves. */
#d-vol .v-top{position:sticky;top:var(--rig);z-index:40;background:var(--ink);
border-bottom:1px solid var(--hair)}
/* The bar's ink runs to the glass — .v-top is full width — but its contents stay
in the page container, so the lockup sits directly above the section titles and
the nav above their right edge. One vertical edge down the whole page. This is
the navbar structure Bootstrap and Tailwind both ship by default. */
#d-vol .v-top .wrap{display:flex;align-items:center;gap:var(--s5);padding-top:11px;padding-bottom:11px}
#d-vol .v-home{display:flex;align-items:center;gap:var(--s4);text-decoration:none;flex:none}
/* La barre est en papier, comme l'oiseau et le nom de l'accueil. Une
seule encre sur toute la première vue. Le survol baisse l'opacité du lien
entier plutôt que de virer à une autre couleur : le papier est déjà l'encre
la plus claire de la palette, il n'y a pas plus haut où aller sans sortir
des deux encres. */
#d-vol .v-home:hover{opacity:.72}
/* Le même oiseau doré que sur l'accueil. L'or est licite ici : la barre est
un fond sombre (6.4 sur l'encre). */
#d-vol .v-mark{display:block;width:44px;height:30px;flex:none;
background:var(--i-logo-oiseau) center/contain no-repeat}
#d-vol .v-word{font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-size:12px;letter-spacing:.22em;
text-transform:uppercase;white-space:nowrap;color:var(--paper)}
#d-vol .v-top nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5)}
#d-vol .v-top nav a{font-size:12.5px;letter-spacing:.12em;
text-transform:uppercase;text-decoration:none;color:var(--on-ink)}
#d-vol .v-top nav a:hover{color:var(--paper)}
/* Le bouton à trois traits. Absent au-dessus de 760px, où les liens tiennent
tous dans la barre. */
#d-vol .v-burger{display:none;flex:none;width:40px;height:32px;padding:8px 8px;
background:none;border:0;cursor:pointer}
#d-vol .v-burger span{display:block;height:1.5px;background:var(--on-ink);
transition:transform .22s ease,opacity .18s ease}
#d-vol .v-burger span + span{margin-top:5px}
#d-vol .v-burger:hover span{background:var(--paper)}
/* ouvert : les trois traits deviennent une croix */
#d-vol .v-burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#d-vol .v-burger[aria-expanded=true] span:nth-child(2){opacity:0}
#d-vol .v-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* the descent: one pinned image field, four holds */
#d-vol .v-descent{position:relative}
/* the pin must not eat a screen of flow, or stage 1 starts below the fold */
/* lvh, pas svh. svh est la hauteur quand les barres du navigateur sont
déployées ; dès que Safari replie la sienne au défilement, la fenêtre visible
grandit et une image dimensionnée en svh ne touche plus le bas de l'écran. Le
fond d'encre apparaît alors sous elle — invisible à l'oeil nu, parce que le bas
du voile est déjà presque de la même encre, mais bien présent. lvh est la plus
grande des deux : l'image couvre dans les deux états, et le débord passe sous
la barre du navigateur quand celle-ci est là. Les étapes restent en svh, ce
sont elles qui donnent sa longueur au défilement. */
#d-vol .v-pin{position:sticky;top:var(--rig);height:calc(100lvh - var(--rig));overflow:hidden;
margin-bottom:calc(var(--rig) - 100lvh)}
#d-vol .v-layer{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
#d-vol .v-layer.on{opacity:1}
#d-vol .v-layer img{width:100%;height:100%;object-fit:cover}
/* the scrim is the ink, not a neutral black: it warms the photographs
into the same family as the paper.
Deepened through the middle. It used to thin out to .14 around a
quarter of the way down — exactly where the accueil lockup sits — and an
oval pool was painted behind the lockup to make up the difference. The pool
darkened one spot on one stage, which read as dirt on the photograph and, as
it sat on the scrolling stage while the image is pinned, slid across a still
frame. This carries the same darkening on the layer that was already there,
full width, vertical, and identical on all four photographs, so the images
stay one family and nothing travels. The stops below are what the contrast
check (test/hero-contrast.py) passes at. */
#d-vol .v-pin::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(42,37,32,.42) 0%,rgba(42,37,32,.42) 14%,
rgba(42,37,32,.61) 34%,rgba(42,37,32,.72) 54%,rgba(42,37,32,.90) 76%,
rgba(42,37,32,.97) 100%)}
#d-vol .v-stage{position:relative;z-index:2;min-height:calc(100svh - var(--rig));
display:grid;align-content:end;padding:var(--s8) 0 calc(var(--top-h) + var(--s7))}
/* .wrap carries margin:0 auto, and auto margins switch OFF grid stretch, so
inside these grid stages the wrap shrink-wrapped its own text and centred
itself: every stage landed on a different left edge depending on how long
its sentence was. width:100% restores the stretch and lets max-width do
the centring, putting the stages on the same grid as everything else. */
#d-vol .v-stage > .wrap{width:100%}
/* The stages sit one header-height (51px) lower than the pinned image, because
.v-top takes flow space at the top of the descent while the pin is sticky
above it. Bottom padding has to pay that offset back, or the text sits
lower on screen than it measures. */
#d-vol{--top-h:51px}
/* The accueil sits in the middle of the screen, not on its floor. The stages
start one header-height lower than the pinned image (.v-top takes flow space
while the pin is sticky above it), so centring inside the stage box would
land --top-h below the true centre of the viewport: the bottom padding
carries twice that offset to pay it back. */
#d-vol .v-stage--first{align-content:center;
padding:var(--s6) 0 calc(var(--s6) + var(--top-h) * 2)}
/* No pool behind the lockup. It used to darken an oval here so the
accueil would read against the horizon; it greyed the lake and the coteau,
and because it sat on the stage — which scrolls — while the photograph is
pinned, it slid across a still image and left a visible halo on the way
down. The legibility now comes from the photograph itself, whose highlights
were compressed at source: see tools/regrade-territoire.py. The wrap keeps
its stacking context so the type stays above the pinned image. */
#d-vol .v-stage--first > .wrap{position:relative;z-index:1}
#d-vol .v-stage h2{font-size:clamp(21px,3.2vw,38px);line-height:1.18;color:var(--paper);
margin-bottom:var(--s4)}
#d-vol .v-stage p{font-size:17px;line-height:1.62;max-width:46ch;color:rgba(239,232,211,.94);
margin-bottom:var(--s3);text-shadow:0 1px 3px rgba(16,12,9,.60),0 0 18px rgba(16,12,9,.35)}
#d-vol .v-descent .tag{text-shadow:0 1px 3px rgba(16,12,9,.60)}
#d-vol .v-stage h1,#d-vol .v-stage h2{text-shadow:0 1px 4px rgba(16,12,9,.45)}
#d-vol .v-stage--first h1{font-size:clamp(26px,min(4.5vw,7vh),52px);line-height:1.14;color:var(--paper)}
/* L'accueil : l'oiseau du logo en pièce maîtresse, le nom composé dessous.
L'oiseau est doré, en image ; dimensionné en vh autant qu'en vw, l'écran
BAS étant la contrainte qui mord pour le contraste sur la photographie. */
/* Le nom et l'appellation forment UN bloc de titre ; l'oiseau est un autre
objet. L’écart sous l’oiseau est donc le plus grand des deux, et non
l'inverse. Mesuré encre à encre sur les pixels peints, pas de boîte à boîte :
le masque porte du vide en bas et le texte porte son interligne, si bien que
les écarts de boîte trompent l'oeil — la hiérarchie se mesure à l'encre. */
#d-vol .v-hero{display:grid;justify-items:center;text-align:center;gap:var(--s3)}
#d-vol .v-lockup{margin:0;display:grid;justify-items:center;
gap:clamp(20px,4.6vh,44px);line-height:0}
/* Aucune ombre portée : une drop-shadow se calcule sur l'alpha rectangulaire
et non sur le dessin masqué, et peignait un rectangle gris sur iPhone. */
#d-vol .v-etq-wrap{display:block;width:clamp(228px,min(37vw,45vh),440px)}
#d-vol .v-etq-hero{display:block;width:100%;aspect-ratio:463/320;
background:var(--i-logo-oiseau) center/contain no-repeat}
/* Le nom reste en papier : l'or composé en texte ne tient pas le contraste sur
la photographie, l'oiseau doré si, parce qu'il est une image. */
#d-vol .v-name{display:block;font-family:"Cormorant Garamond",Garamond,Georgia,serif;
font-weight:600;font-size:clamp(23px,min(4.4vw,6.2vh),49px);
letter-spacing:.035em;text-transform:uppercase;line-height:1.1;color:var(--paper);
text-shadow:0 1px 4px rgba(16,12,9,.55),0 0 22px rgba(16,12,9,.45)}
/* Rien en plus du gap de .v-hero : ce margin s'y ajoutait, portant l'écart de
boîte à 40 et l'écart optique à 54, deux fois celui du dessus. */
#d-vol .v-stage--first .tag{margin:0}
/* ── the engraving, carried over from 01 ──────────────────────────────
The domaine has run a coherent design system for years without anyone
noticing: one engraved plate, re-inked per wine. Not a picture of the label
here, and not a card either: the plate's own vignette struck straight onto
the photograph with nothing behind it. The asset is an alpha mask, opaque
where the engraving's INK is, so painting through it in paper puts the
linework in cream and hands the drawing's white ground to the photograph.
The engraving looks down the rows to the lake, which is the view the page
is descending through, so the ground it borrows is its own.
The shadow sits on the wrapper, not on the masked element: filter is
applied BEFORE mask on the same element, so a drop-shadow there would
trace the element's rectangle instead of the linework. Two chained
shadows, a tight one to cut each line off the photograph and a wide soft
one to sink the plate into it. Sized in vh, not vw, so a short laptop
screen shrinks it rather than shoving the signature under the
instruments. */
/* ── the landing: everything after the descent is paper ─────────────── */
#d-vol .v-flat{position:relative;z-index:5;background:var(--paper);color:var(--ink)}
#d-vol .v-sec{padding:var(--s9) 0;border-bottom:1px solid var(--rule)}
#d-vol .v-sec h2{font-size:clamp(19px,2.5vw,31px);margin-bottom:var(--s6)}
#d-vol .v-list{list-style:none;margin:0;padding:0}
/* Quatre colonnes : le nom, le texte, le prix, le carton. La description était
auparavant empilée sous le nom dans une cellule large de 825px alors qu'elle
est mesurée à 54ch, soit 351px : 474px restaient vides à droite de chacune des
cinq lignes pendant que le texte descendait sur quatre lignes. */
/* Colonnes de prix à largeur fixe, et non auto : chaque est sa propre
grille, donc une colonne auto se dimensionne ligne par ligne et « CHF 10.50 »
ne tombe pas au même endroit que « CHF 16.— ». Fixe plus aligné à droite, les
cinq prix descendent sur une seule verticale. */
#d-vol .v-list li{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) 88px 96px;
gap:var(--s2) var(--s6);align-items:start;padding:var(--s5) 0;border-top:1px solid var(--rule)}
#d-vol .v-list .nm{grid-column:1;grid-row:1/span 2}
#d-vol .v-list .wd{grid-column:2;grid-row:1;margin-top:0;max-width:62ch}
#d-vol .v-list .v-etiq{grid-column:2;grid-row:2}
#d-vol .v-list .pr{grid-column:3;grid-row:1;text-align:right}
#d-vol .v-list .pc{grid-column:4;grid-row:1;text-align:right}
/* Filets entre les vins seulement : ni au-dessus du premier, ni sous le dernier,
où ils doublaient la note des bouteilles et le filet de fin de section. Les
marges qu'ils justifiaient tombent avec eux. */
#d-vol .v-list li:first-child{border-top:0;padding-top:0}
#d-vol .v-list li:last-child{padding-bottom:0}
#d-vol .v-list .nm{font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-size:17px;font-weight:500;
text-transform:uppercase;letter-spacing:.05em}
#d-vol .v-list .nm em{display:block;font-family:Newsreader,Georgia,serif;font-style:normal;font-size:12.5px;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
#d-vol .v-list .pr{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
#d-vol .v-list .pc{font-size:14px;color:var(--ink-soft);
font-variant-numeric:tabular-nums;white-space:nowrap}
/* Rupture de stock : sous les prix, le prix reste lisible. */
#d-vol .v-list .v-out{grid-column:3/5;grid-row:2;text-align:right;font-size:11.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
#d-vol .v-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}
#d-vol .v-split--plan{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
#d-vol .v-split img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
/* Blueline note: at 50/50 the prose ran to uncomfortable line lengths and the
two columns finished 20px apart, which is what read as odd. 5/7 gives the
text a sane measure and brings the two natural heights close together;
align-items:end lands the baselines of the column on the foot of the photo.
Scoped to #v-domaine — #v-parcelles shares .v-split and was not in the note. */
#d-vol #v-domaine .v-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}
/* La mosaïque occupe toute la hauteur de la colonne de texte, du premier
paragraphe à la signature : le bloc s'aligne en haut et en bas (D-079). Quatre
photos verticales ; colonnes 2:1:1, de sorte que la grande (Loïc) et les deux
petites gardent presque leur format naturel, seule celle du lac est recadrée
en largeur. Chaque image s'ouvre dans la visionneuse. */
#d-vol #v-domaine .v-dom{row-gap:var(--s5);align-items:stretch}
#d-vol .v-dom-text{grid-column:1;grid-row:1}
#d-vol .v-dom-text p:last-child{margin-bottom:0}
#d-vol .v-dom-sign{grid-column:1;grid-row:2}
#d-vol .v-dom-sign p:last-child{margin-bottom:0}
#d-vol .v-mosaic{grid-column:2;grid-row:1 / span 2;display:grid;gap:12px;
grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;min-height:360px}
#d-vol .v-mosaic figure{margin:0;position:relative;overflow:hidden}
#d-vol .v-mosaic .v-zoom{position:absolute;inset:0}
#d-vol .v-mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border:1px solid var(--rule)}
#d-vol .v-mos-a{grid-column:1;grid-row:1 / span 2}
#d-vol .v-mos-a img{object-position:50% 40%}
#d-vol .v-mos-b{grid-column:2 / span 2;grid-row:1}
#d-vol .v-mos-b img{object-position:50% 52%}
#d-vol .v-mos-c{grid-column:2;grid-row:2}
#d-vol .v-mos-c img{object-position:40% 60%}
#d-vol .v-mos-d{grid-column:3;grid-row:2}
#d-vol .v-mos-d img{object-position:60% 50%}
#d-vol .v-mark-q{border-left:1px solid var(--gold);padding-left:var(--s4);color:var(--ink);
font-size:15px;line-height:1.65}
#d-vol .v-list .wd{display:block;font-size:13px;line-height:1.65;color:var(--ink-soft);
margin-top:9px;max-width:54ch}
#d-vol .v-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s7)}
#d-vol .v-grid dt{font-size:11.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s3)}
#d-vol .v-grid dd{margin:0;font-size:15px;line-height:1.8}
#d-vol .v-empty{border:1px solid var(--rule);padding:var(--s5);color:var(--ink-soft);font-size:13.5px}
/* Loïc's own QGIS sheets: the two Vinzel-Bursins views share a frame and a
scale, and the Mont-sur-Rolle sheet follows. Shown side by side:
the legend baked into the raster goes small at half width, but the page
sets out the cépages in its own type just above, and what the sheets are
here to show is the shape and the colour on the orthophoto. */
#d-vol .v-maps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s7)}
#d-vol .v-maps figure{margin:0}
#d-vol .v-maps img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
#d-vol .v-maps figcaption{margin-top:var(--s3);font-size:12.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-soft)}
#d-vol .v-maps figcaption b{font-weight:400;color:var(--ink)}
/* the range, photographed: one frame, one wire, the bottle changed out.
The same engraving sits on all three labels in a different ink, which is
the domaine's design system caught on camera rather than described. */
/* La note collait à la rangée grâce à une marge négative en style en ligne, qui
annulait exactement le margin-bottom ci-dessous. Un style en ligne ne se laisse
pas reprendre par une media query, et les chevrons doivent tenir entre les deux
sur téléphone : les deux marges deviennent des règles, sans rien de négatif. */
#d-vol .v-bottles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-bottom:0}
#d-vol .v-bottles-note{margin:0 0 var(--s8)}
/* Deux tiers d'écran par bouteille sur téléphone : les deux suivantes sont hors
champ et rien ne le disait. Les chevrons reprennent le trait de ceux des
« mentions d'étiquette » — un carré de bordure tourné, pas une police d'icônes.
app.js décide de les montrer en mesurant le débordement réel, donc ils ne
paraissent jamais sur la grille à trois colonnes, où il n'y a rien à faire
défiler. */
#d-vol .v-bottles-nav{display:flex;justify-content:flex-end;gap:var(--s3);
margin:var(--s4) 0 var(--s5)}
#d-vol .v-bottles-nav[hidden]{display:none}
#d-vol .v-bnav{width:44px;height:44px;padding:0;background:none;cursor:pointer;
border:1px solid var(--rule);display:inline-flex;align-items:center;justify-content:center;
transition:border-color .18s,opacity .18s}
#d-vol .v-bnav::before{content:"";width:7px;height:7px;
border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
#d-vol .v-bnav[data-dir="-1"]::before{transform:rotate(135deg) translate(-1px,-1px)}
#d-vol .v-bnav[data-dir="1"]::before{transform:rotate(-45deg) translate(-1px,-1px)}
#d-vol .v-bnav:hover{border-color:var(--ink)}
#d-vol .v-bnav[disabled]{opacity:.28;cursor:default;border-color:var(--rule)}
/* Bouteilles et cartes s'agrandissent. Chaque image est un lien vers son
fichier : sans script il l'ouvre seul, avec, app.js ouvre cette visionneuse.
Les cartes pointent vers une version 2600 px, chargée seulement à l'ouverture. */
#d-vol .v-zoom{display:block;cursor:zoom-in}
#d-vol .v-zoom:hover img{opacity:.92}
#d-vol .v-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
margin:0;padding:0;border:0;background:rgba(42,37,32,.985);color:var(--paper)}
#d-vol .v-lb::backdrop{background:transparent}
#d-vol .v-lb[open]{display:grid;grid-template-rows:1fr auto;place-items:center}
#d-vol .v-lb figure{margin:0;display:grid;justify-items:center;gap:var(--s3);
padding:56px 64px var(--s4);max-width:100%;min-height:0}
#d-vol .v-lb img{display:block;max-width:min(100%,1600px);max-height:calc(100svh - 150px);
width:auto;height:auto;object-fit:contain;cursor:zoom-out}
#d-vol .v-lb figcaption{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--on-ink);text-align:center}
#d-vol .v-lb figcaption b{font-weight:400;color:var(--paper)}
#d-vol .v-lb-n{font-size:11.5px;letter-spacing:.14em;color:var(--on-ink);padding-bottom:var(--s4)}
#d-vol .v-lb button{position:absolute;width:44px;height:44px;padding:0;cursor:pointer;
background:rgba(42,37,32,.6);border:1px solid var(--hair);color:var(--paper);
display:inline-flex;align-items:center;justify-content:center;transition:border-color .18s}
#d-vol .v-lb button:hover{border-color:var(--paper)}
#d-vol .v-lb-x{top:var(--s4);right:var(--s4)}
#d-vol .v-lb-x::before,#d-vol .v-lb-x::after{content:"";position:absolute;width:16px;height:1px;
background:var(--paper);transform:rotate(45deg)}
#d-vol .v-lb-x::after{transform:rotate(-45deg)}
#d-vol .v-lb-p,#d-vol .v-lb-s{top:50%;margin-top:-22px}
#d-vol .v-lb-p{left:var(--s4)}
#d-vol .v-lb-s{right:var(--s4)}
#d-vol .v-lb-p::before,#d-vol .v-lb-s::before{content:"";width:8px;height:8px;
border-right:1px solid var(--paper);border-bottom:1px solid var(--paper)}
#d-vol .v-lb-p::before{transform:rotate(135deg) translate(-1px,-1px)}
#d-vol .v-lb-s::before{transform:rotate(-45deg) translate(-1px,-1px)}
#d-vol .v-lb button[hidden]{display:none}
@media (max-width:760px){
#d-vol .v-lb figure{padding:64px var(--s3) var(--s3)}
#d-vol .v-lb img{max-height:calc(100svh - 170px)}
#d-vol .v-lb-p,#d-vol .v-lb-s{top:auto;bottom:var(--s3);margin-top:0}
}
#d-vol .v-bottles figure{margin:0}
#d-vol .v-bottles img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
#d-vol .v-bottles figcaption{margin-top:var(--s3);font-size:12.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-soft)}
#d-vol .v-bottles figcaption b{font-weight:400;color:var(--ink)}
#d-vol .v-key{list-style:none;margin:var(--s5) 0 0;padding:0}
/* À côté du paragraphe, le filet du haut se pose sur la ligne des capitales de
sa première ligne, et non sur sa boîte : 6 px, soit la demi-interligne mesurée
du Newsreader à 16.5/1.65. Sur téléphone la liste passe dessous et reprend sa marge. */
#d-vol #v-parcelles .v-key{margin-top:6px}
#d-vol .v-key li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
gap:var(--s2) var(--s4);padding:7px 0;border-top:1px solid var(--rule);font-size:13.5px}
#d-vol .v-key li:last-child{border-bottom:1px solid var(--rule)}
#d-vol .v-key b{font-weight:400}
#d-vol .v-key span{font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink-soft);text-align:right}
/* Les planches cadastrales, repliées. Elles portent les légendes
Arial de QGIS, qui jurent avec la page, et occupent beaucoup de hauteur pour
une information que peu de visiteurs cherchent — mais que ceux qui la
cherchent veulent entière. Repliées, elles cessent d'imposer leur graphisme
sans rien perdre. */
#d-vol .v-cartes{margin-top:var(--s7)}
#d-vol .v-cartes > summary{cursor:pointer;list-style:none;display:inline-flex;
align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-soft);border:1px solid var(--rule);padding:11px var(--s5)}
#d-vol .v-cartes > summary::-webkit-details-marker{display:none}
#d-vol .v-cartes > summary::after{content:"";width:6px;height:6px;flex:none;
border-right:1px solid currentColor;border-bottom:1px solid currentColor;
transform:rotate(45deg) translate(-1px,-2px);transition:transform .2s ease}
#d-vol .v-cartes[open] > summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
#d-vol .v-cartes > summary:hover{color:var(--ink);border-color:var(--ink)}
#d-vol .v-cartes .v-maps{margin-top:var(--s5)}
/* Les mentions obligatoires de la partie 9g, repliées derrière un chevron.
La loi demande qu'elles soient accessibles avant l'achat, pas qu'elles soient
lues : les tenir dépliées ajoutait deux lignes à chacun des cinq vins pour un
texte que personne ne lit avant d'en avoir besoin. */
#d-vol .v-list .v-etiq{margin-top:var(--s3);font-variant-numeric:tabular-nums}
#d-vol .v-list .v-etiq > summary{cursor:pointer;list-style:none;display:inline-flex;
align-items:center;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft)}
#d-vol .v-list .v-etiq > summary::-webkit-details-marker{display:none}
#d-vol .v-list .v-etiq > summary::after{content:"";width:5px;height:5px;flex:none;
border-right:1px solid currentColor;border-bottom:1px solid currentColor;
transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease}
#d-vol .v-list .v-etiq[open] > summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
#d-vol .v-list .v-etiq > summary:hover{color:var(--ink)}
#d-vol .v-list .v-etiq p{font-size:11.5px;line-height:1.6;color:var(--ink-soft);
margin:var(--s2) 0 0;max-width:54ch}
/* le pied de page mène désormais aux trois textes */
#d-vol .v-fine a{color:var(--on-ink);text-decoration:underline;
text-underline-offset:2px;text-decoration-thickness:1px}
#d-vol .v-fine a:hover{color:var(--paper)}
/* the fine print goes back to ink, bookending the bar at the top */
#d-vol .v-fine{position:relative;z-index:5;background:var(--ink);color:var(--on-ink);
padding:var(--s7) 0 var(--s8);font-size:11.5px;line-height:1.85}
#d-vol .v-fine a{color:var(--on-ink)}
@media (max-width:760px){
#d-vol .v-split,#d-vol .v-split--plan,#d-vol .v-maps{grid-template-columns:1fr;gap:var(--s6)}
/* three bottles at a third of a phone are 108px of nothing, so the range
becomes a swipeable strip instead */
#d-vol .v-bottles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:66%;
overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s2)}
#d-vol .v-bottles figure{scroll-snap-align:start}
#d-vol .v-list li{grid-template-columns:1fr auto}
/* Le prix et le carton restent ensemble en haut à droite ; le texte et le
chevron passent dessous sur toute la largeur. */
#d-vol .v-list .nm{grid-column:1;grid-row:1/span 2}
#d-vol .v-list .pr{grid-column:2;grid-row:1;text-align:right}
#d-vol .v-list .pc{grid-column:2;grid-row:2;text-align:right}
#d-vol .v-list .v-out{grid-column:1/-1;grid-row:5;text-align:left}
#d-vol .v-list .wd{grid-column:1/-1;grid-row:3;max-width:none}
#d-vol .v-list .v-etiq{grid-column:1/-1;grid-row:4}
/* Sur un téléphone la barre garde le faucon, le numéro et le bouton ; les
cinq liens passent derrière, dans un panneau qui se déplie sous la barre.
Le wordmark cède la place, le nom est juste en dessous de toute façon. */
#d-vol .v-word{display:none}
#d-vol .v-burger{display:block}
#d-vol .v-burger{margin-left:auto}
#d-vol .v-top nav{position:absolute;left:0;right:0;top:100%;
flex-direction:column;align-items:stretch;gap:0;
background:var(--ink);border-bottom:1px solid var(--hair);
max-height:0;overflow:hidden;visibility:hidden;
transition:max-height .26s ease,visibility 0s linear .26s}
#d-vol .v-top nav[data-open]{max-height:70svh;visibility:visible;overflow-y:auto;
transition:max-height .26s ease,visibility 0s}
#d-vol .v-top nav a{padding:15px var(--gutter);font-size:14px;letter-spacing:.14em;
border-top:1px solid var(--hair)}
/* la barre est le repère de position du panneau */
#d-vol .v-top{position:sticky}
#d-vol .v-top .wrap{position:relative}
/* Le titre porte déjà l'échelle ; l'appellation doit rester en dessous d'elle.
À 11.5px avec .2em de chasse elle occupait presque toute la largeur d'un
téléphone et pesait autant que le nom. */
#d-vol .v-stage--first .tag{font-size:9.5px;letter-spacing:.12em}
/* #v-domaine porte un 5fr/7fr plus spécifique que la règle générique
ci-dessus : sans cette ligne il gagne aussi sur téléphone et écrase le
texte dans une colonne de 145px. */
#d-vol #v-domaine .v-split{grid-template-columns:1fr}
/* une seule colonne : la photo reprend sa place et ses proportions entre le
texte et la citation */
#d-vol .v-dom-text,#d-vol .v-dom-fig,#d-vol .v-dom-sign{grid-column:1;grid-row:auto}
/* Sur téléphone, la mosaïque devient une bande qu'on fait glisser, comme les
bouteilles (D-085) : même largeur de 66 %, même format 2:3, mêmes chevrons. */
#d-vol .v-mosaic{min-height:0;grid-template-columns:none;grid-template-rows:none;
grid-auto-flow:column;grid-auto-columns:66%;gap:var(--s5);overflow-x:auto;
scroll-snap-type:x mandatory;padding-bottom:var(--s2)}
#d-vol .v-mosaic figure{grid-column:auto;grid-row:auto;aspect-ratio:2/3;scroll-snap-align:start}
#d-vol .v-mosaic img{object-position:50% 40%}
#d-vol .v-dom-nav{grid-column:1;margin:0}
#d-vol #v-parcelles .v-key{margin-top:var(--s5)}
}
@media (prefers-reduced-motion:reduce){
#d-vol .v-layer{transition:none}
}