/* Belvédère — degustation.monchai.fr. Coquille et écrans du parcours de
   dégustation de la Cité du Vin, d'après les quatre maquettes téléphone et les
   CARTES DESIGN. Mobile d'abord (320, 390, 430), puis 768 et 1024 pour un
   écran de démonstration. Aucune origine externe : polices sous static/fonts,
   photo de la voûte et aquarelles sous static/img/tasting. */

:root {
    --bv-creme: #f4efe6;
    --bv-creme-2: #fbf8f2;
    --bv-sable: #e4d9c6;
    --bv-bordeaux: #6e1f2e;
    --bv-bordeaux-2: #4a1420;
    --bv-bordeaux-3: #862a3d;
    --bv-or: #b8945a;
    --bv-or-clair: #d9bf8a;
    --bv-or-vif: #e8c987;
    --bv-or-texte: #7f6230;      /* or lisible sur crème (AA : 4,9:1) */
    --bv-espresso: #2b1d17;
    --bv-texte-2: #62524a;       /* secondaire sur crème (6,4:1) */
    --bv-nuit: #1a1310;
    --bv-nuit-2: #2a1f18;
    --bv-blanc-chaud: #fff7ea;
    --bv-clair-2: #f1e3cd;       /* texte secondaire sur fond sombre */
    --bv-vert: #2f5d3a;
    --bv-rayon: 18px;
    --bv-rayon-sm: 12px;
    --bv-tab-h: 64px;
    --bv-safe: env(safe-area-inset-bottom, 0px);
    --bv-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --bv-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bv-ombre: 0 10px 28px rgba(28, 18, 14, .16), inset 0 1px #fff;
    --bv-gouttiere: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #120d0b; -webkit-text-size-adjust: 100%; }
body.bv {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font: 400 1rem/1.5 var(--bv-sans);
    color: var(--bv-espresso);
    background: var(--bv-nuit);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}
.bv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bv-ico {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.25em;
}
.bv-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--bv-creme-2);
    color: var(--bv-bordeaux);
    font-weight: 500;
    text-decoration: none;
}
.bv-skip:focus { top: 12px; outline: 3px solid var(--bv-or-vif); }
:focus-visible { outline: 3px solid var(--bv-or-vif); outline-offset: 3px; }
.bv-main :focus-visible { outline-color: var(--bv-bordeaux); }
.bv-main:focus { outline: none; }

/* ------------------------------------------------------------- Coquille */
.bv-app {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bv-creme);
}
/* La photo de la voûte et son voile sombre sont posés SUR le héros lui-même,
   pas sur un enfant glissé derrière le texte : un lecteur de contraste (axe)
   ne remonte que les ancêtres, et mesurait le texte crème contre la crème de
   l'application — 1,25:1 au lieu d'un fond nuit. Couleur de repli nuit. */
.bv-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 18px var(--bv-gouttiere) 46px;
    color: var(--bv-blanc-chaud);
    overflow: hidden;
    background-color: var(--bv-nuit);
    /* Déclinaison WebP du fond des maquettes (belvedere-background.png, 2 030 Ko) :
       33 Ko à 720 px pour le téléphone, 54 Ko à 1 024 px pour l'écran — la 4G
       du 8e étage est la contrainte n° 1 de la recette. */
    background-image:
        linear-gradient(180deg, rgba(20, 14, 10, .52) 0%, rgba(20, 14, 10, .28) 32%, rgba(20, 14, 10, .82) 68%, rgba(26, 19, 16, .97) 100%),
        url('../img/tasting/belvedere-fond-720.webp');
    background-position: center, center 28%;
    background-size: auto, cover;
    background-repeat: no-repeat;
}
.bv-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 18px;
}
.bv-marque {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.bv-marque-nom {
    font: 400 1.15rem/1.15 var(--bv-serif);
    letter-spacing: .02em;
    color: var(--bv-blanc-chaud);
    text-decoration: none;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.bv-marque-kicker {
    font: 500 .68rem/1.2 var(--bv-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bv-or-clair);
    text-align: right;
    max-width: 44%;
}
.bv-hero-titre { margin-top: auto; }
.bv-hero--accueil { min-height: min(78vh, 640px); min-height: min(78dvh, 640px); }
.bv-hero--vin { min-height: min(58vh, 520px); min-height: min(58dvh, 520px); }
.bv-hero--compact { min-height: 0; padding-bottom: 40px; }
.bv-hero--message { min-height: min(52vh, 460px); min-height: min(52dvh, 460px); }
.bv-hero--accueil, .bv-hero--message { background-position: center, center 40%; }

.bv-kicker {
    margin: 0 0 6px;
    font: 500 .68rem/1.3 var(--bv-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bv-or-clair);
}
.bv-titre {
    margin: 0;
    font: 400 clamp(2.5rem, 12.5vw, 3.9rem)/1 var(--bv-serif);
    letter-spacing: -.01em;
    color: var(--bv-blanc-chaud);
    text-shadow: 0 2px 22px rgba(0, 0, 0, .38);
    text-wrap: balance;
}
.bv-titre--page { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
.bv-titre--vin { font-size: clamp(2.05rem, 9.5vw, 3rem); line-height: 1.02; }
.bv-sous-titre {
    margin: 8px 0 0;
    font: 400 clamp(1.05rem, 4.6vw, 1.3rem)/1.35 var(--bv-serif);
    color: var(--bv-clair-2);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.bv-filet {
    display: block;
    width: 54px;
    height: 2px;
    margin: 14px 0;
    background: var(--bv-or);
    border-radius: 2px;
}
.bv-filet--sombre { background: var(--bv-or); margin: 6px 0 14px; }
.bv-lead {
    margin: 0;
    max-width: 34ch;
    font-size: .98rem;
    line-height: 1.55;
    color: var(--bv-clair-2);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.bv-retour {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 2px 0 0;
    padding: 6px 10px 6px 4px;
    border-radius: 999px;
    color: var(--bv-clair-2);
    font-size: .9rem;
    text-decoration: none;
}
.bv-retour:hover { color: var(--bv-blanc-chaud); }

.bv-main {
    position: relative;
    z-index: 2;
    flex: 1;
    margin-top: -28px;
    padding: 0 var(--bv-gouttiere) calc(var(--bv-tab-h) + var(--bv-safe) + 28px);
}
.bv-main > * + * { margin-top: 16px; }

/* ------------------------------------------------------------- Boutons */
.bv-actions { display: flex; flex-direction: column; gap: 12px; }
.bv-actions--page { margin-top: 22px; }
.bv-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 500 1.06rem/1.2 var(--bv-serif);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.bv-btn > span { flex: 1; }
.bv-btn .bv-ico { width: 1.35em; height: 1.35em; }
.bv-btn-fleche { opacity: .85; }
.bv-btn:active { transform: translateY(1px); }
.bv-btn--primaire {
    color: var(--bv-blanc-chaud);
    background: linear-gradient(135deg, #7c2438 0%, #5a1626 100%);
    border-color: rgba(217, 191, 138, .6);
    box-shadow: 0 10px 26px rgba(20, 8, 6, .35), inset 0 1px rgba(255, 255, 255, .18);
}
.bv-btn--primaire .bv-ico:first-child { color: var(--bv-or-vif); }
.bv-btn--primaire:hover { background: linear-gradient(135deg, #862a3d 0%, #5f1828 100%); }
.bv-btn--contour {
    color: var(--bv-blanc-chaud);
    background: rgba(26, 19, 16, .55);
    border-color: var(--bv-or-clair);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.bv-btn--contour .bv-ico:first-child { color: var(--bv-or-vif); }
.bv-btn--contour:hover { background: rgba(26, 19, 16, .75); }
.bv-btn--nuit {
    color: var(--bv-blanc-chaud);
    background: #1e1612;
    border-color: rgba(217, 191, 138, .55);
    box-shadow: 0 8px 22px rgba(20, 8, 6, .25);
}
.bv-btn--nuit .bv-ico:first-child { color: var(--bv-or-vif); }
.bv-btn--nuit:hover { background: #2a1f18; }
.bv-btn.is-favori .bv-ico:first-child { fill: var(--bv-or-vif); }
.bv-form-inline { margin: 0; }
.bv-lien {
    color: var(--bv-bordeaux);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bv-lien--clair { color: var(--bv-or-vif); }
.bv-lien--centre { display: block; text-align: center; padding: 8px; }

/* Feuille « Scanner mon verre » : un <details> natif, sans script. */
.bv-sheet > summary { list-style: none; }
.bv-sheet > summary::-webkit-details-marker { display: none; }
.bv-sheet[open] > summary { border-radius: 26px 26px 0 0; border-bottom-color: transparent; }
.bv-sheet-corps {
    margin: 0;
    padding: 14px 20px 18px;
    border: 1px solid var(--bv-or-clair);
    border-top: 0;
    border-radius: 0 0 22px 22px;
    background: rgba(26, 19, 16, .72);
    color: var(--bv-clair-2);
    font-size: .93rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.bv-sheet-corps p { margin: 0 0 10px; }

/* -------------------------------------------------------------- Cartes */
.bv-carte {
    display: block;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: var(--bv-rayon);
    background: linear-gradient(160deg, var(--bv-creme-2) 0%, #f0e9dd 100%);
    box-shadow: var(--bv-ombre);
    color: var(--bv-espresso);
    text-decoration: none;
}
.bv-carte p { margin: 0; }
.bv-carte p + p { margin-top: 8px; }
.bv-h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font: 500 1.3rem/1.2 var(--bv-serif);
    color: var(--bv-bordeaux);
}
.bv-h2 .bv-ico { color: var(--bv-bordeaux); width: 1.2em; height: 1.2em; }
.bv-h2--section { color: var(--bv-espresso); margin-bottom: 0; }
.bv-decouvrir p { color: var(--bv-texte-2); font-size: .95rem; line-height: 1.6; }

/* Trio de l'accueil : Mes vins dégustés / Profil gustatif / Coups de cœur */
.bv-trio { display: grid; grid-template-columns: 1fr; gap: 10px; }
.bv-trio-carte {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr 28px;
    grid-template-areas: 'ico titre fleche' 'ico texte fleche';
    column-gap: 12px;
    align-items: center;
    padding: 14px 14px 14px 16px;
}
.bv-trio-ico { grid-area: ico; width: 28px; height: 28px; color: var(--bv-bordeaux); }
.bv-trio-titre { grid-area: titre; font: 500 1rem/1.2 var(--bv-serif); }
.bv-trio-texte { grid-area: texte; margin-top: 3px; font-size: .78rem; line-height: 1.35; color: var(--bv-texte-2); }
.bv-trio-fleche {
    grid-area: fleche;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--bv-sable);
    color: var(--bv-bordeaux);
}
.bv-trio-fleche .bv-ico { width: 15px; height: 15px; }
.bv-trio-carte:hover { border-color: var(--bv-or-clair); }
@media (min-width: 380px) {
    .bv-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* En colonne : icône, titre, texte alignés en haut, flèche calée en bas
       à droite — les trois cartes gardent la même hauteur quel que soit le
       nombre de lignes de leur titre. */
    .bv-trio-carte {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 14px 12px 12px;
        min-height: 160px;
    }
    .bv-trio-ico { margin-bottom: 6px; }
    .bv-trio-titre { font-size: .98rem; }
    .bv-trio-texte { font-size: .72rem; }
    .bv-trio-fleche { width: 26px; height: 26px; margin-top: auto; align-self: flex-end; padding-top: 0; }
    .bv-trio-texte + .bv-trio-fleche { margin-top: auto; }
    .bv-trio-texte { margin-bottom: 8px; }
}
.bv-note-session { margin: 14px 2px 0; font-size: .8rem; color: var(--bv-texte-2); text-align: center; }

/* ----------------------------------------------------- Liste des vins */
.bv-liste { display: grid; gap: 12px; }
.bv-vin { position: relative; }
.bv-vin-lien {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 24px;
    gap: 14px;
    align-items: center;
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: var(--bv-rayon);
    background: linear-gradient(160deg, var(--bv-creme-2) 0%, #f0e9dd 100%);
    box-shadow: var(--bv-ombre);
    color: var(--bv-espresso);
    text-decoration: none;
}
a.bv-vin-lien:hover { border-color: var(--bv-or-clair); }
.bv-vin-visuel { display: flex; align-items: center; justify-content: center; height: 108px; }
.bv-bouteille { display: block; height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 6px 10px rgba(28, 18, 14, .25)); }
.bv-bouteille--photo { object-fit: contain; }
.bv-vin-texte { min-width: 0; }
.bv-vin-nom { margin: 0; font: 500 1.08rem/1.2 var(--bv-serif); color: var(--bv-espresso); }
.bv-vin-origine { margin: 3px 0 0; font-size: .8rem; color: var(--bv-texte-2); }
/* Pays : un badge au code ISO, aux dimensions réservées — aucun drapeau
   externe, aucune image qui manquerait ; l'emoji drapeau n'existe pas sur
   tous les postes (Windows), il est exclu. */
.bv-pays-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--bv-or);
    border-radius: 999px;
    font: 500 .62rem/1 var(--bv-sans);
    letter-spacing: .08em;
    color: var(--bv-or-texte);
    vertical-align: 1px;
}
.bv-fait .bv-pays-code { color: var(--bv-or-vif); border-color: var(--bv-or-clair); margin-left: 4px; }
.bv-vin-style { margin: 8px 0 0; }
.bv-pastille {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3e3e2;
    color: var(--bv-bordeaux);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .02em;
}
.bv-vin-accroche { margin: 8px 0 0; font-size: .84rem; line-height: 1.4; color: var(--bv-texte-2); }
.bv-vin-mots { margin: 4px 0 0; font-size: .78rem; line-height: 1.35; color: var(--bv-texte-2); }
.bv-vin-mots::first-letter { text-transform: uppercase; }
.bv-vin-etats { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0 0; font-size: .74rem; font-weight: 500; }
.bv-etat { display: inline-flex; align-items: center; gap: 4px; }
.bv-etat--degustee { color: var(--bv-vert); }
.bv-etat--favori { color: var(--bv-bordeaux); }
.bv-etat--favori .bv-ico { fill: var(--bv-bordeaux); }
.bv-vin-fleche { display: inline-flex; color: var(--bv-bordeaux); }
.bv-vin-fleche .bv-ico { width: 20px; height: 20px; }

/* Variante compacte : coups de cœur (profil, partage), défilement horizontal */
.bv-defile {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 46%);
    gap: 12px;
    margin: 0 calc(-1 * var(--bv-gouttiere));
    padding: 6px var(--bv-gouttiere) 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bv-gouttiere);
    -webkit-overflow-scrolling: touch;
}
.bv-defile > * { scroll-snap-align: start; }
.bv-vin--compacte .bv-vin-lien {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 8px;
    height: 100%;
    padding: 14px 12px 12px;
}
.bv-vin--compacte .bv-vin-visuel { height: 92px; }
.bv-vin--compacte .bv-vin-nom { font-size: .98rem; }
.bv-vin--compacte .bv-vin-fleche {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--bv-sable);
}
.bv-vin--compacte .bv-vin-fleche .bv-ico { width: 14px; height: 14px; }
.bv-vin--compacte .bv-vin-etats { position: absolute; top: 10px; right: 12px; margin: 0; }
.bv-vin--compacte .bv-etat span, .bv-vin--compacte .bv-etat--degustee { display: none; }
.bv-vin--compacte .bv-etat--favori { font-size: 0; }
.bv-vin--compacte .bv-etat--favori .bv-ico { width: 20px; height: 20px; }
.bv-vin--compacte .bv-vin-texte { padding-bottom: 26px; }

/* --------------------------------------------------------- Progression */
.bv-progression { margin-top: 4px; }
.bv-progression-texte { margin: 0 0 8px; font: 400 .95rem/1.2 var(--bv-serif); color: var(--bv-clair-2); }
.bv-segments { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bv-segment { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 247, 234, .32); }
.bv-segment.is-done { background: var(--bv-or-clair); }
.bv-segment.is-current { background: var(--bv-bordeaux-3); box-shadow: 0 0 0 1px var(--bv-or-vif); }

/* ------------------------------------------------------ Fiche du vin */
.bv-hero-titre--vin { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 14px; align-items: end; }
.bv-hero-visuel { height: 150px; display: flex; align-items: end; justify-content: center; }
.bv-hero-visuel .bv-bouteille { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.bv-faits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 0;
}
.bv-fait {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas: 'ico dt' 'ico dd';
    column-gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(217, 191, 138, .55);
    border-radius: 14px;
    background: rgba(26, 19, 16, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.bv-fait .bv-ico { grid-area: ico; width: 22px; height: 22px; color: var(--bv-or-vif); }
.bv-fait dt { grid-area: dt; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bv-or-clair); }
.bv-fait dd { grid-area: dd; margin: 0; font: 500 1rem/1.2 var(--bv-serif); color: var(--bv-blanc-chaud); overflow-wrap: anywhere; }
.bv-tags { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bv-tag {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas: 'img titre' 'img detail';
    column-gap: 12px;
    align-items: center;
    padding: 12px 14px;
}
.bv-aquarelle { grid-area: img; width: 52px; height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.bv-tag-titre { grid-area: titre; font: 500 1.02rem/1.2 var(--bv-serif); }
.bv-tag-detail { grid-area: detail; margin-top: 2px; font-size: .78rem; line-height: 1.35; color: var(--bv-texte-2); }
@media (min-width: 380px) {
    .bv-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bv-tag {
        grid-template-columns: 1fr;
        grid-template-areas: 'img' 'titre' 'detail';
        row-gap: 4px;
        padding: 12px 10px;
        text-align: left;
    }
    .bv-aquarelle { width: 48px; height: 48px; }
    .bv-tag-titre { font-size: .98rem; }
    .bv-tag-detail { font-size: .72rem; }
}

/* ------------------------------------------------- Messages et vides */
.bv-message { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; color: var(--bv-texte-2); }
.bv-message-ico { width: 32px; height: 32px; color: var(--bv-bordeaux); }
.bv-vide { text-align: center; color: var(--bv-texte-2); padding: 26px 18px; }
.bv-vide-titre { font: 500 1.15rem/1.3 var(--bv-serif); color: var(--bv-espresso); }
.bv-aparte {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 18px 4px 0;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--bv-texte-2);
}
.bv-aparte .bv-ico { width: 20px; height: 20px; color: var(--bv-or-texte); margin-top: 1px; }

/* -------------------------------------------------- Barre d'onglets */
.bv-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: calc(var(--bv-tab-h) + var(--bv-safe));
    padding: 0 6px var(--bv-safe);
    background: rgba(24, 17, 13, .96);
    border-top: 1px solid rgba(217, 191, 138, .32);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.bv-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: 6px 2px 8px;
    color: #d5c4ab;
    font-size: .72rem;
    letter-spacing: .01em;
    text-decoration: none;
    border-radius: 12px;
}
.bv-tab .bv-ico { width: 22px; height: 22px; }
.bv-tab.is-active { color: var(--bv-or-vif); }
.bv-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bv-or-vif);
}
.bv-tab:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------- Écrans de démo */
/* Écran de démonstration (768 et 1024 px, vidéoprojecteur) : le décor du
   Belvédère occupe tout l'écran, voilé, et le parcours vit dans une colonne
   de 480 px centrée dessus — jamais un cadre de téléphone sur fond noir. */
@media (min-width: 768px) {
    :root { --bv-gouttiere: 22px; }
    html {
        background:
            linear-gradient(180deg, rgba(18, 13, 11, .62), rgba(18, 13, 11, .78)),
            url('../img/tasting/belvedere-fond-1024.webp') center 35% / cover no-repeat fixed #120d0b;
    }
    body.bv { background: transparent; }
    .bv-app {
        max-width: 480px;
        margin: 0 auto;
        box-shadow: 0 0 0 1px rgba(217, 191, 138, .28), 0 30px 90px rgba(0, 0, 0, .6);
    }
    .bv-hero { background-image:
        linear-gradient(180deg, rgba(20, 14, 10, .52) 0%, rgba(20, 14, 10, .28) 32%, rgba(20, 14, 10, .82) 68%, rgba(26, 19, 16, .97) 100%),
        url('../img/tasting/belvedere-fond-1024.webp'); }
    .bv-tabbar {
        left: 50%;
        right: auto;
        width: 480px;
        transform: translateX(-50%);
        border-left: 1px solid rgba(217, 191, 138, .28);
        border-right: 1px solid rgba(217, 191, 138, .28);
    }
    .bv-hero--accueil { min-height: 520px; }
    .bv-hero--vin { min-height: 440px; }
}

@media (prefers-reduced-motion: reduce) {
    .bv-btn { transition: none; }
}
@media print {
    .bv-tabbar, .bv-skip { display: none; }
    .bv-hero { color: var(--bv-espresso); min-height: 0; padding-bottom: 12px; background: #fff; }
    .bv-titre, .bv-sous-titre, .bv-lead, .bv-marque-nom { color: var(--bv-espresso); text-shadow: none; }
    .bv-app { background: #fff; box-shadow: none; }
}