/* Domaine de Mély — feuille de style unique.
Deux caractères : Cinzel (titres) 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:Cinzel;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cinzel-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Cinzel;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cinzel-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Cinzel;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cinzel-latin-600-normal.woff2) format('woff2')}
@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')}
/* Bodoni Moda ne sert QUE au nom sur l'accueil. Le wordmark du domaine est en
The Seasons Bold, dont la licence webfont est séparée de la licence desktop :
le logo reste licite parce qu'il est une image, mais du texte composé demande
un autre caractère. Bodoni est le plus proche relevé sur le fichier de Loïc —
capitale à fort contraste, empattements fins et plats, axe vertical, donc de
genre didone et non trajanesque comme Cinzel. SIL OFL. Voir D-052. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bodoni-moda-latin-700-normal.woff2) format('woff2')}
:root{
/* Depuis D-034 les ![]()
portent leur src dans le HTML : il ne reste ici que
les deux images employées comme masques CSS, que le HTML ne peut pas porter. */
--i-vignette-mask:url(assets/vignette-mask.webp);
/* le vrai logo, doré, fond détouré : image et non masque, un masque
écraserait le dégradé qui fait tout son intérêt */
--i-logo-falcon:url(assets/logo-falcon.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)}
/* Cinzel is a Trajan-genre inscriptional Roman, the closest openly licensed
match to the capitals on the domaine's own bottles. It is capitals-only in
practice, so every title is set in caps and the sizes come down to suit. */
#d-vol h1,#d-vol h2,#d-vol h3{margin:0;font-family:Cinzel,"Trajan Pro",Georgia,serif;
font-weight:500;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}
/* D-054 : la barre est en papier, comme la gravure 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 de D-002. */
#d-vol .v-home:hover{opacity:.72}
/* Le faucon passe d'image à MASQUE, ce qui renverse la note d'origine ici : le
dégradé doré — creux 100,57,56, reflets 255,232,195 — est effectivement
écrasé, et c'est le but. Il ne reste doré nulle part sur la page. L'alpha du
fichier est franc (31.6% opaque, 64.2% transparent, 4.2% de bord), donc le
détourage de D-049/D-050 sert toujours : c'est lui qui donne la silhouette. */
#d-vol .v-mark{display:block;width:44px;height:30px;flex:none;background:var(--paper);
-webkit-mask:var(--i-logo-falcon) center/contain no-repeat;
mask:var(--i-logo-falcon) center/contain no-repeat}
#d-vol .v-word{font-family:Cinzel,"Trajan Pro",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 (D-036). 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 (D-028). 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
probe passes at: see D-028. */
#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 (D-026). 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, D-052 : la gravure du domaine en pièce maîtresse, le nom composé
dessous. Remplace le lockup en images — faucon doré au-dessus du wordmark —
dont le CSS est supprimé plutôt que laissé mort, comme les quatre dispositions
de D-003. Le faucon n'a pas disparu : il tient la barre du haut.
Le masque est opaque là où l'ENCRE de la gravure se trouve, donc le peindre en
papier met le trait en crème et rend le fond blanc du dessin à la photographie.
La gravure regarde les rangs jusqu'au lac, la photographie aussi : le ciel de
l'une est le ciel de l'autre, et la plaque se lit gravée dans l'image plutôt
que posée dessus.
L'ombre est sur l'ENVELOPPE, pas sur l'élément masqué : filter s'applique AVANT
mask sur un même élément, une drop-shadow y tracerait le rectangle au lieu du
trait. Dimensionnée en vh autant qu'en vw, l'écran BAS étant la contrainte qui
mord — et la plaque ne peut pas grandir : elle mesure 3.02 sur 621px de haut
pour un plancher de 3.0. */
/* Le nom et l'appellation forment UN bloc de titre ; la plaque est un autre
objet. L'écart sous la plaque 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
13.66 et 40 de boîte donnaient 25 et 54 à l'oeil — la hiérarchie à l'envers. */
#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}
/* Le masque n'est pas centré sur lui-même : 3.75% de vide à gauche contre 9.69%
à droite. `mask:center` centre donc la BOÎTE, pas la gravure, qui tombait 9px
à gauche de l'axe de la page — sur le plus grand élément de l'écran, cela se
voit. Le décalage vaut la moitié de l'écart des deux vides, et un pourcentage
de transform se résout sur la largeur de l'élément lui-même, donc il tient à
toutes les tailles. Même défaut d'asset que le `margin-top:-2.2%` de la
plaque de Commander, corrigé ici sur l'autre axe. */
/* Aucune ombre portée (D-058). Les deux `drop-shadow` d'ici se calculaient sur
une alpha rectangulaire et non sur la gravure masquée : sur iPhone cela peignait
un rectangle gris franc derrière la plaque, aux bords nets. Même famille de
défaut que le halo de D-029, et une mesure de contraste ne l'aurait pas vu. */
#d-vol .v-etq-wrap{display:block;width:clamp(228px,min(37vw,45vh),440px);
transform:translateX(2.97%)}
#d-vol .v-etq-hero{display:block;width:100%;aspect-ratio:640/553;background:var(--paper);
-webkit-mask:var(--i-vignette-mask) center/contain no-repeat;
mask:var(--i-vignette-mask) center/contain no-repeat}
/* En papier et non en or : l'or du logo mesure 3.0 sur cette photographie, et
D-002 le réserve aux fonds sombres. Le logo doré reste licite parce qu'il est
une image ; un mot composé, non. */
#d-vol .v-name{display:block;font-family:"Bodoni Moda",Didot,"Times New Roman",serif;
font-weight:700;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}
#d-vol .v-list li:last-child{border-bottom:1px solid var(--rule)}
#d-vol .v-list .nm{font-family:Cinzel,"Trajan Pro",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}
#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}
#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 of the same frame at
the same scale, so the pair reads as one comparison. 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:1fr 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(--s7)}
/* 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)}
#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}
#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 trois textes légaux (D-037). Repliés : ils sont obligatoires, pas à lire,
et déplier vaut mieux qu'une page séparée sur un site qui tient en un fichier. */
/* D-059 : les trois textes ne s'ouvrent plus depuis la page, mais depuis les
trois liens du pied, qui sont leur seule entrée. Trois rangées à déplier
suivies d'un pied qui répétait les mêmes trois noms, c'était le même geste
proposé deux fois. Rien de supprimé : la partie 9d et la partie 9h les rendent
obligatoires. Le texte est dans la page, masqué, et `:target` le montre.
Sans `:has` la section vide garderait ses 96px de `.v-sec` et son filet. */
#d-vol .v-legals{display:none;padding-top:var(--s7)}
#d-vol .v-legals:has(.v-legal:target){display:block}
#d-vol .v-legal{display:none}
#d-vol .v-legal:target{display:block;border-top:1px solid var(--rule);
border-bottom:1px solid var(--rule)}
#d-vol .v-legal > h2{font-size:clamp(15px,1.5vw,18px);margin:0;padding:var(--s5) 0}
#d-vol .v-legal h3{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-soft);margin:var(--s6) 0 var(--s3);font-family:Newsreader,Georgia,serif;
font-weight:500}
#d-vol .v-legal p{font-size:14.5px;line-height:1.7;max-width:68ch;margin:0 0 var(--s3)}
#d-vol .v-legal > *:last-child{margin-bottom:var(--s7)}
/* Un crochet non rempli doit se voir depuis la page, pas seulement depuis le
brief : il en reste quatorze, et rien ne doit être publié tant qu'ils sont là. */
#d-vol .v-todo{background:rgba(169,133,38,.18);color:inherit;
border-bottom:1px dashed var(--gold);padding:1px 3px;font-style:italic}
/* Les deux planches cadastrales, repliées (D-044). 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 .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}
}
@media (prefers-reduced-motion:reduce){
#d-vol .v-layer{transition:none}
}