/* ============================================================
   ZONES DE TEXTE ET MISE EN PAGE  --  ajouts
   ============================================================ */

/* 1. BLOCS COMPACTS -- pas de mot orphelin en fin de bloc.
      Le navigateur equilibre les lignes entre elles au lieu
      de remplir ligne par ligne. */
.wine-details-grid .wine-detail-text,
.wine-details-grid .wine-detail-text p,
.wine-details-grid .wine-list,
.wine-details-grid .wine-list p,
.wine-details-grid h3 {
  text-wrap: balance;
}


/* 2. OEIL / NEZ / BOUCHE SUR UNE SEULE LIGNE
      Seuil a 1200px : la ligne la plus longue du catalogue
      (Cremant Emerite) fait 442px pour une colonne de 330px.
      Sous ~1200px le debordement depasse la moitie du gap
      et le texte mordrait sur le bloc voisin. */
@media (min-width: 1200px) {
  .wine-details-column:first-child
  .wine-detail-block:first-of-type
  .wine-detail-text p:nth-of-type(-n+3) {
    white-space: nowrap;
  }
}


/* 3. ACCORDS ET OCCASIONS : AERER LES ENTREES
      Chaque entree fait 2 lignes ; a 4px de marge les trois
      items se lisaient comme un pave de six lignes.
      18px ~= une hauteur de ligne. */
.wine-details-grid .wine-list p {
  margin: 0 0 18px;
}
.wine-details-grid .wine-list p:last-child {
  margin-bottom: 0;
}


/* 4. TITRE DE MARQUE : CENTRAGE CORRECT SUR DEUX LIGNES
      Neutralise la regle en double plus haut dans la feuille
      (display:block ; line-height:47px), vieille astuce du
      centrage par interligne : elle centre UNE ligne et creuse
      un trou de 47px des qu il y en a deux (titre a 94px).
      On garde les 47px de hauteur reservee, qui alignent les
      titres entre blocs d une meme bande. */

/* Etendu a TOUS les blocs, et non au seul premier du code :
   en bandes, les trois titres d une meme bande doivent avoir
   la meme boite, sinon celui a 47px centre verticalement
   tombe 12px plus bas que ses voisins a 23px -- et le texte
   qui suit decale d autant. 47px = deux lignes a 23px.

   Le selecteur repasse par .wine-details-column pour egaler
   la specificite de la mauvaise regle (0,0,3,1) : a egalite,
   c est la derniere ecrite qui gagne, donc celle-ci. */
.wine-details-grid .wine-details-column .wine-detail-block h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  min-height: 47px;
}


/* 5. DISPOSITION EN BANDES HORIZONTALES
      Avant : 3 colonnes thematiques cote a cote, lues de haut
      en bas, puis retour en haut pour la suivante.
      Apres : chaque theme devient une bande pleine largeur,
      titre au-dessus et ses 3 blocs cote a cote. Lecture de
      gauche a droite, puis on descend. Un seul parcours.

      Aucune modification du HTML : le regroupement existant
      est deja le bon (colonne 1 = Profil + Bon a savoir +
      Notre selection = bande 1).

      Chaque bande gere ses propres hauteurs : plus besoin de
      faire dialoguer trois colonnes independantes.
      Contrepartie : la page est plus haute.

      Limite a 901px : en dessous les colonnes deviennent un
      accordeon depliable, qu on ne touche pas. */
@media (min-width: 901px) {

  /* les bandes s empilent */
  .wine-details-grid {
    display: block;
  }

  /* chaque theme devient une bande : titre pleine largeur,
     puis ses 3 blocs cote a cote */
  .wine-details-column {
    display: grid;
    /* minmax(0,1fr) et non 1fr : sinon la largeur minimale du
       contenu (lignes en nowrap, mots longs) fait gonfler un
       bloc au detriment des autres. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 130px;
    align-items: start;
    height: auto;
    justify-content: initial;
    margin-bottom: 90px;
  }

  .wine-details-column:last-child {
    margin-bottom: 0;
  }

  .wine-details-column > h2 {
    grid-column: 1 / -1;
    margin-bottom: 40px;
  }

  /* l espacement vertical est desormais porte par la bande */
  .wine-details-grid .wine-detail-block {
    margin-bottom: 0;
  }
}


/* 6. TAILLE DES ICONES ET LIGNE DE BASE COMMUNE
      Deux variables pilotent la taille ET l alignement : pour
      redimensionner, il suffit de les changer ici.
      Tailles d origine 100px / 126px, portees a 120 / 150 --
      environ +20%, rapport conserve (1,25 contre 1,26).

      Alignement : les icones sont calees en haut du bloc, donc
      une icone plus grande repousserait son titre plus bas que
      ses voisines. On reserve une piste a la hauteur de la plus
      grande et on pose les petites dessus : elles s alignent
      par le bas, et tous les titres demarrent a la meme hauteur.
      Le decalage est calcule (--icone-large moins --icone) et
      non plus code en dur : il suit les variables.

      !important est necessaire pour passer devant les regles
      d origine .wine-icon et .wine-icon-large, qui en usent. */
.wine-details-grid {
  --icone: 120px;
  --icone-large: 150px;
}

.wine-details-grid .wine-detail-block > .wine-icon {
  max-width: var(--icone) !important;
  height: var(--icone) !important;
  margin-top: calc(var(--icone-large) - var(--icone));
}

.wine-details-grid .wine-detail-block > .wine-icon-large {
  max-width: var(--icone-large) !important;
  height: var(--icone-large) !important;
  margin-top: 0;
}


/* 7. ORDRE DES BLOCS DANS CHAQUE BANDE
      Le bloc central de chaque bande est le 1er du code ;
      les deux autres se repartissent a gauche et a droite.

        bande 1  gauche Notre selection | milieu Profil
                 sensoriel | droite Bon a savoir
        bande 2  gauche Accords | milieu Autour de la table
                 | droite Occasions
        bande 3  gauche Vignoble | milieu la marque
                 | droite De la vigne au verre

      grid-row: 2 est indispensable : sans lui, le placement
      automatique de la grille refuse de revenir en arriere
      (mode sparse) et renvoie a la ligne suivante tout bloc
      dont la colonne est situee avant le curseur.

      A savoir : cet ordre est purement visuel. L ordre du
      code reste inchange, donc la lecture au clavier et au
      lecteur d ecran suit toujours l ordre d origine. Pour
      que les deux coincident il faudrait deplacer les blocs
      dans le HTML -- ce qui changerait aussi l ordre sur
      mobile, ou l accordeon suit le code. */
@media (min-width: 901px) {

  .wine-details-column > .wine-detail-block {
    grid-row: 2;
  }

  /* le 1er bloc du code va au centre, dans les trois bandes */
  .wine-details-column > .wine-detail-block:nth-of-type(1) {
    grid-column: 2;
  }

  /* bande 1 : Bon a savoir a droite, Notre selection a gauche */
  .wine-details-column:nth-child(1) > .wine-detail-block:nth-of-type(2) {
    grid-column: 3;
  }
  .wine-details-column:nth-child(1) > .wine-detail-block:nth-of-type(3) {
    grid-column: 1;
  }

  /* bandes 2 et 3 : 2e bloc a gauche, 3e a droite */
  .wine-details-column:nth-child(2) > .wine-detail-block:nth-of-type(2),
  .wine-details-column:nth-child(3) > .wine-detail-block:nth-of-type(2) {
    grid-column: 1;
  }
  .wine-details-column:nth-child(2) > .wine-detail-block:nth-of-type(3),
  .wine-details-column:nth-child(3) > .wine-detail-block:nth-of-type(3) {
    grid-column: 3;
  }
}





/* ============================================================
   11. MENU IVOIRE SUR LES FICHES PRODUIT
   Reprise des 28 regles de l etat mmv-scrolled du site, avec
   .mmv-scrolled remplace par .single-product. Generees depuis
   la feuille de styles, pas recopiees.
   L ombre portee a ete retiree : le menu de l accueil n en a
   pas, et la consigne est le meme menu, en brun.
   ============================================================ */
body.ast-theme-transparent-header.single-product #masthead .ast-above-header-bar,
body.ast-theme-transparent-header.single-product #masthead .ast-above-header-wrap {
  background-color: rgb(255, 251, 240) !important;
}

body.ast-theme-transparent-header.single-product #masthead .ast-site-title-wrap,
body.ast-theme-transparent-header.single-product #masthead .ast-site-title-wrap a,
body.ast-theme-transparent-header.single-product #masthead .main-header-menu .menu-link,
body.ast-theme-transparent-header.single-product #masthead .main-header-menu > .menu-item > a,
body.ast-theme-transparent-header.single-product #masthead .ast-custom-button-link {
  color:rgb(46, 36, 23) !important;
  border-color:rgb(46, 36, 23) !important;
}

body.ast-theme-transparent-header.single-product .site-logo-img .custom-logo {
  opacity: 0;
}

body.ast-theme-transparent-header.single-product .site-logo-img .mmv-logo-scrolled {
  opacity: 1;
}

body.ast-theme-transparent-header.single-product #masthead .ast-custom-button {
  background-color: transparent !important;
  color:rgb(46, 36, 23) !important;
  border: 1px solid rgb(46, 36, 23) !important;
}

body.ast-theme-transparent-header.single-product #masthead .ast-custom-button-link {
  color:rgb(46, 36, 23) !important;
}

body.ast-theme-transparent-header.single-product .mmv-lang-orig {
  opacity: 0;
}

body.ast-theme-transparent-header.single-product .mmv-lang-scrolled {
  opacity: 1;
}

body.ast-theme-transparent-header.single-product .mmv-arrow {
  color:rgb(73, 53, 24) !important;
}

.ast-theme-transparent-header:not(.single-product) #masthead .ast-above-header-bar {
  padding-top: 12px !important;
}

.ast-theme-transparent-header.single-product #masthead .ast-above-header-bar {
  padding-top: 6px !important;
}

body.ast-theme-transparent-header.single-product #masthead .ast-header-woo-cart .astra-icon svg {
  opacity: 0;
}

body.ast-theme-transparent-header.single-product #masthead .ast-header-woo-cart .astra-icon::before {
  opacity: 1;
}

.ast-theme-transparent-header:not(.single-product) #masthead .main-header-menu .sub-menu {
  min-width: 220px;
  background: transparent !important;
  border-width: medium !important;
  border-style: none !important;
  border-color:currentcolor !important;
  border-image: none !important;
  box-shadow: none !important;
  width: auto !important;
  top: 100% !important;
  margin-top: 12px !important;
  left: 0px !important;
}

.ast-theme-transparent-header:not(.single-product) #masthead .main-header-menu .sub-menu .menu-item {
  display: block;
}

.ast-theme-transparent-header:not(.single-product) #masthead .main-header-menu .sub-menu .menu-link {
  white-space: nowrap;
  color:rgb(255, 251, 240) !important;
  text-transform: none !important;
  font-family: Alegreya, Georgia, serif !important;
  font-variant: normal !important;
  letter-spacing: normal !important;
  padding: 0.55em 0px !important;
  margin: 0px !important;
  border-bottom: 1px solid rgba(255, 251, 240, 0.4) !important;
}

.ast-theme-transparent-header:not(.single-product) #masthead .main-header-menu .sub-menu .menu-item:last-child .menu-link {
  border-bottom-width: medium !important;
  border-bottom-style: none !important;
  border-bottom-color:currentcolor !important;
}

.ast-theme-transparent-header:not(.single-product) #masthead .main-header-menu > .menu-item:hover > .menu-link {
  color:rgb(255, 251, 240) !important;
}

body.ast-theme-transparent-header.single-product #masthead .main-header-menu > .menu-item:hover > .menu-link {
  color:rgb(46, 36, 23) !important;
}

.ast-theme-transparent-header:not(.single-product) #masthead .main-header-menu .sub-menu .menu-link {
  opacity: 0.85;
  transition: opacity 0.25s, color 0.25s;
}

.ast-theme-transparent-header:not(.single-product) #masthead .main-header-menu .sub-menu .menu-link:hover {
  opacity: 1 !important;
}

body.ast-theme-transparent-header.single-product #masthead .main-header-menu .sub-menu {
  min-width: 220px;
  background: rgb(255, 251, 240) !important;
  border-width: medium !important;
  border-style: none !important;
  border-color:currentcolor !important;
  border-image: none !important;
  box-shadow: rgba(46, 36, 23, 0.12) 0px 10px 30px !important;
  width: auto !important;
  top: 100% !important;
  margin-top: 12px !important;
  left: 0px !important;
  padding: 14px 22px !important;
}

body.ast-theme-transparent-header.single-product #masthead .main-header-menu .sub-menu .menu-item {
  display: block;
}

body.ast-theme-transparent-header.single-product #masthead .main-header-menu .sub-menu .menu-link {
  white-space: nowrap;
  color:rgb(46, 36, 23) !important;
  text-transform: none !important;
  font-family: Alegreya, Georgia, serif !important;
  font-variant: normal !important;
  letter-spacing: normal !important;
  padding: 0.55em 0px !important;
  margin: 0px !important;
  border-bottom: 1px solid rgba(46, 36, 23, 0.15) !important;
}

body.ast-theme-transparent-header.single-product #masthead .main-header-menu .sub-menu .menu-item:last-child .menu-link {
  border-bottom-width: medium !important;
  border-bottom-style: none !important;
  border-bottom-color:currentcolor !important;
}

body.ast-theme-transparent-header.single-product #masthead .main-header-menu .sub-menu .menu-link {
  opacity: 0.85;
  transition: opacity 0.25s, color 0.25s;
}

body.ast-theme-transparent-header.single-product #masthead .main-header-menu .sub-menu .menu-link:hover {
  opacity: 1 !important;
}

.ast-theme-transparent-header:not(.single-product) .main-header-menu .menu-link,
.ast-theme-transparent-header:not(.single-product) .main-header-menu > a {
  font-size: clamp(11px, -2.65px + 1.481vw, 24px) !important;
}


/* 8. FILETS DE PART ET D AUTRE DES TITRES DE BANDE
      Le titre devient un conteneur flex ; les deux pseudo-
      elements occupent l espace restant a parts egales, ce qui
      centre le texte quelle que soit sa longueur -- de
      A LA DEGUSTATION a LE DOMAINE ET SON VIN.
      L or est celui du site : #B29760, deja utilise pour le
      texte des titres et le filet sous la grille.
      Limite a 901px : en dessous le titre devient l en-tete
      cliquable de l accordeon, avec son chevron, et les filets
      n auraient pas de sens. */
@media (min-width: 901px) {
  .wine-details-column > h2 {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .wine-details-column > h2::before,
  .wine-details-column > h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #B29760;
  }
}


/* 9. RAPPROCHER LE TITRE DE SON ICONE
      L ecart faisait 23px, en deux morceaux :
        - 12px de marge sous l icone
        - ~11px d espace mort, le titre etant centre dans la
          boite de 47px reservee par la regle 4

      Piege : la marge basse de l icone et la marge haute du h3
      FUSIONNENT (fusion des marges verticales). N annuler que
      celle de l icone ne gagne que 2px, celle du h3 prenant
      aussitot le relais. Il faut annuler les deux.

      Resultat : 11px au lieu de 23px, sans toucher a l espace
      sous le titre.

      On ne descend pas plus bas : les 11px restants viennent de
      la boite de 47px, qui reserve la place de deux lignes pour
      que les titres restent alignes entre blocs d une meme
      bande. La localisation, en bande 3, tient justement sur
      deux lignes -- supprimer cette reserve casserait son
      alignement. */
.wine-details-grid .wine-detail-block > .wine-icon {
  margin-bottom: 0;
}

.wine-details-grid .wine-details-column .wine-detail-block h3 {
  /* flex-start et non center : avec le centrage, l ecart
     au-dessus du titre etait du vide residuel, donc variable.
     Un titre d une ligne laissait 11px, un titre de deux lignes
     remplissait la boite et laissait 0 -- le titre touchait son
     icone (mesure -1px en bande 3, ou la localisation tient sur
     deux lignes).
     En calant en haut et en posant une marge explicite, l ecart
     vaut 11px partout, quel que soit le nombre de lignes.
     L alignement des blocs entre eux ne bouge pas : la boite
     garde ses 47px. */
  align-items: flex-start;
  margin-top: 11px;
}


/* 10. LOCALISATION : COUPURE COMMUNE / VIGNOBLE
       Le premier point a ete retire des fiches, or c etait le
       repere qui indiquait ou finit la commune. Plutot que de
       reecrire 99 champs, on relit l information la ou elle
       existe deja : acf_origine (Maconnais, Beaujolais, Cote
       Chalonnaise -- verifie rempli sur 20 fiches sur 20).
       Ce span le transporte jusqu au script, sans s afficher. */
.wine-vignoble-ref {
  display: none;
}


/* 11. BANDE DEFILANTE (TEST SUR LES FICHES PRODUIT)
       Posee juste sous l en-tete par le script plus bas.
       Le defilement est sans saut parce que le contenu est
       present en double et que la piste se decale de la moitie
       de sa largeur : au reset, le 2e exemplaire occupe
       exactement la place du 1er.
       La vitesse est une DUREE, pas une cadence : un message
       plus long defilera plus vite a reglage egal. */
.mmv-bandeau {
  --mmv-vitesse: 34s;
  --mmv-hauteur: 30px;
  background: #38352E;
  overflow: hidden;
  height: var(--mmv-hauteur);
  /* hauteur explicite plutot que max-height : la transition
     part et arrive sur des valeurs reelles, donc la courbe est
     reguliere. Avec max-height, l animation parcourt d abord
     du vide et le mouvement parait saccade au demarrage. */
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  will-change: height;
}

/* etat replie, pose par le script au-dela du seuil de defilement */
.mmv-bandeau.est-replie {
  height: 0;
  opacity: 0;
}

.mmv-bandeau__piste {
  display: flex;
  width: max-content;
  animation: mmv-defile var(--mmv-vitesse) linear infinite;
}

.mmv-bandeau:hover .mmv-bandeau__piste {
  animation-play-state: paused;
}

.mmv-bandeau__groupe {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* 5px au lieu de 9 : la hauteur de la bande vient surtout
     d ici. Avec line-height 1.4 sur les items, on passe de
     43px a environ 30px. */
  padding: 5px 0;
}

.mmv-bandeau__item {
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color:#FFFBF0;
  white-space: nowrap;
  padding: 0 34px;
}

.mmv-bandeau__item::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 34px;
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

@keyframes mmv-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* respect du reglage systeme reduire les animations : la bande
   s arrete et le message s affiche fixe et centre */
@media (prefers-reduced-motion: reduce) {
  .mmv-bandeau__piste { animation: none; width: 100%; justify-content: center; }
  .mmv-bandeau__groupe:nth-child(2) { display: none; }
  .mmv-bandeau__item:last-child::after { display: none; }
}


/* 10. APPARITION AU DEFILEMENT ET TRACE DES FILETS

       SECURITE : les regles de masquage sont toutes prefixees
       par .anim-prete, classe posee par le script lui-meme.
       Si le script echoue ou que le navigateur ne sait pas
       observer l entree dans l ecran, la classe n arrive jamais
       et tout reste visible. Masquer en CSS sans ce garde-fou,
       c est risquer une page blanche.

       Les deux effets n animent que transform et opacity : le
       navigateur les traite sans recalculer la mise en page,
       donc le mouvement tient meme sur un telephone modeste.

       Courbe asymetrique (depart rapide, arrivee lente) : le
       mouvement parait assure. Une courbe symetrique fait mou. */
@media (min-width: 901px) {

  /* --- A. les trois blocs d une bande montent en decale --- */
  .wine-details-grid.anim-prete .wine-details-column .wine-detail-block {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s cubic-bezier(0.16, 0.84, 0.44, 1),
                transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
  }

  .wine-details-grid.anim-prete .wine-details-column.est-vue .wine-detail-block {
    opacity: 1;
    transform: none;
  }

  /* 80ms d ecart : l oeil suit une progression au lieu de
     recevoir les trois blocs d un coup */
  .wine-details-grid.anim-prete .wine-details-column.est-vue .wine-detail-block:nth-of-type(2) {
    transition-delay: 0.08s;
  }

  .wine-details-grid.anim-prete .wine-details-column.est-vue .wine-detail-block:nth-of-type(3) {
    transition-delay: 0.16s;
  }

  /* --- B. les filets se tracent depuis le titre vers l exterieur --- */
  .wine-details-grid.anim-prete .wine-details-column > h2::before,
  .wine-details-grid.anim-prete .wine-details-column > h2::after {
    transform: scaleX(0);
    transition: transform 0.85s cubic-bezier(0.16, 0.84, 0.44, 1) 0.1s;
  }

  .wine-details-grid.anim-prete .wine-details-column > h2::before {
    transform-origin: right center;
  }

  .wine-details-grid.anim-prete .wine-details-column > h2::after {
    transform-origin: left center;
  }

  .wine-details-grid.anim-prete .wine-details-column.est-vue > h2::before,
  .wine-details-grid.anim-prete .wine-details-column.est-vue > h2::after {
    transform: scaleX(1);
  }
}

/* Reduire les animations : reglage systeme du visiteur.
   Ce n est pas du confort -- pour les personnes sujettes aux
   vertiges ou aux migraines vestibulaires, une page qui bouge
   est physiquement penible. Tout s affiche, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  .wine-details-grid.anim-prete .wine-details-column .wine-detail-block {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .wine-details-grid.anim-prete .wine-details-column > h2::before,
  .wine-details-grid.anim-prete .wine-details-column > h2::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}


/* 11. SURVOL DES BLOCS (effet C, a l essai)

       L icone monte de 3px et passe de 75% a 100% d opacite.

       scale(var(--icone-echelle)) est repris dans les deux
       etats : l echelle posee par l harmonisation optique doit
       etre conservee, sinon le survol la ferait sauter.
       La valeur de repli 1 sert au cas ou le script n a pas
       encore tourne.

       RESERVE : ces blocs ne sont pas cliquables. Animer au
       survol quelque chose qui ne repond pas au clic laisse
       croire a une action qui n existe pas. A ne garder que si
       les blocs deviennent cliquables. */
@media (hover: hover) and (min-width: 901px) {
  .wine-details-grid .wine-detail-block .wine-icon {
    transform: scale(var(--icone-echelle, 1));
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .wine-details-grid .wine-detail-block:hover .wine-icon {
    opacity: 1;
    transform: scale(var(--icone-echelle, 1)) translateY(-3px);
  }
}

/* hors survol reel (tactile), l echelle doit rester appliquee */
@media not all and (hover: hover) {
  .wine-details-grid .wine-detail-block .wine-icon {
    transform: scale(var(--icone-echelle, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wine-details-grid .wine-detail-block .wine-icon {
    transition: none !important;
  }
}


/* 12. AUTRES CONTENANCES : ETAT DE SURVOL

       Les pastilles sont des liens (a.mdv-contenance-badge),
       donc reellement cliquables : elles meritent un retour
       visuel, contrairement aux blocs de la grille.

       Une regle de survol existait deja mais ne faisait rien --
       elle redeclarait la couleur du texte a l identique. La
       transition, elle, etait deja declaree sur background-color
       et transform : l intention y etait, l etat manquait.

       SPECIFICITE : 4 classes ici contre 2 pour la regle
       d origine (.mdv-contenance-badge:hover). Elle passe donc
       devant sans avoir besoin de !important.

       CONTRASTE : creme #FFFBF0 sur l or fonce #B29760 donne
       4,89:1, au-dessus du seuil de 4,5:1. Le texte reste
       lisible pendant le survol.

       hover: hover -- sans cette condition, sur tablette le
       premier appui declenche l etat de survol qui reste ensuite
       colle jusqu au prochain appui ailleurs. */
@media (hover: hover) {
  .wine-other-formats .mdv-contenances-wrap .mdv-contenance-badge:hover {
    background-color: #B29760;
    transform: translateY(-2px);
  }
}

/* Navigation au clavier : ces liens doivent rester reperables
   sans souris. Le contour est distinct du survol, volontairement. */
.wine-other-formats .mdv-contenance-badge:focus-visible {
  outline: 2px solid #2E2417;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .wine-other-formats .mdv-contenances-wrap .mdv-contenance-badge:hover {
    transform: none;
  }
}