/* D-B — Carte vin (.wine-card), 2026-08-10 — voir ROADMAP.md et ETAT.md,
   clôture D-B. Mise à jour D-E (2026-08-11) : voir bloc "Mise en page
   archive" en bas de fichier — même fichier, seconde responsabilité.

   Copié verbatim depuis CLAUDE DESIGN/Accueil/Carte des vins - production
   (Gutenberg-ready).html : lignes 138-185 (.wine-card et ses enfants,
   .bottle, .pick-flag, .price, .stock) + lignes 249-250 (écho responsive,
   les deux seules règles reprises du bloc @media(min-width:640px)
   d'origine — le reste de ce bloc, .grid et .why__*, ne concerne pas la
   carte).

   Chargé via le mécanisme par gabarit de functions.php section 8
   (assets/pages/{gabarit-résolu}.css). Gabarit résolu vérifié en direct
   sur /categorie-produit/vins/ : "taxonomy-product-cat". Mécanisme exact
   élucidé en D-E (voir assets/pages/archive-product.css, fichier mort,
   pour le détail) : WC_Template_Loader ne propose jamais archive-product
   comme candidat sur une taxonomy product_cat, retombe sur le fichier du
   PLUGIN taxonomy-product-cat.php (d'où ce nom, capté par le filtre
   template_include) — lequel ne fait qu'un wc_get_template('archive-
   product.php'), lookup séparé qui, lui, trouve woocommerce/archive-
   product.php DANS CE THÈME (ajouté en D-E). D'où : le CONTENU rendu
   vient du fichier du thème, mais le NOM DE GABARIT qui pilote le
   chargement CSS reste "taxonomy-product-cat" — ce fichier-ci, donc.

   Depuis D-E, .wine-card n'est plus émise sur AUCUNE archive catégorie
   (woocommerce/content-product.php bascule sur is_product_category(),
   vins et ateliers confondus — décision Romain de standardiser "la
   cave" en vue WooCommerce native). Les règles .wine-card ci-dessous
   restent donc chargées ici mais inertes sur cette page ; leur seul
   consommateur réel aujourd'hui est la section "Autres cuvées du
   domaine" de single-product.php (chargement explicite et nommé, voir
   functions.php section 8, indépendant du mécanisme par gabarit). */

/*── Carte vin ───────────────────────────────────────────────────────────*/
.wine-card{ background:var(--color-cream); border:var(--border-hair);
  display:grid; grid-template-columns:1fr; overflow:hidden; }
.wine-card[data-focus]{ border-top:3px solid var(--color-ochre); }
.wine-card{ --wine:var(--wine-rouge); } /* défaut, surchargé par data-color */
.wine-card[data-color="rouge"]    { --wine:var(--wine-rouge); }
.wine-card[data-color="blanc"]    { --wine:var(--wine-blanc); }
.wine-card[data-color="rose"]     { --wine:var(--wine-rose); }
.wine-card[data-color="champagne"]{ --wine:var(--wine-champagne); }

.wine-card__media{ background:var(--color-kraft); border-bottom:var(--border-hair);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3);
  padding:var(--space-6) var(--space-3); position:relative; }
.wine-card__num{ position:absolute; top:var(--space-3); left:var(--space-3);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; color:var(--color-ink-3); }
.bottle{ width:46px; height:138px; }
.bottle .glass{ fill:var(--wine); stroke:rgba(31,26,20,.35); stroke-width:1.2; }
.bottle .cap{ fill:var(--color-ink); opacity:.85; }
.bottle .shine{ fill:none; stroke:rgba(255,255,255,.28); stroke-width:2.4; stroke-linecap:round; }
.bottle .label{ fill:var(--color-cream); stroke:rgba(31,26,20,.25); stroke-width:1; }
.bottle .label-line{ fill:rgba(31,26,20,.45); }
.bottle .label-accent{ fill:var(--color-bordeaux); }
.bottle .fizz{ fill:rgba(255,255,255,.6); }
.wine-card__colour{ display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-ink-2); }
.wine-card__colour .dot{ width:9px; height:9px; border-radius:50%; background:var(--wine); border:1px solid rgba(31,26,20,.3); }

.wine-card__body{ padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
.pick-flag{ display:inline-flex; align-items:center; gap:var(--space-2); align-self:flex-start;
  border:1.5px solid var(--color-ochre); color:var(--color-ochre); border-radius:var(--radius-sm);
  padding:3px 8px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.pick-flag .icon{ font-size:12px; }
.wine-card h3{ font-size:var(--text-xl); line-height:1.12; font-weight:500; }
.wine-card .cuvee{ font-family:var(--font-display); font-style:italic; font-size:var(--text-md);
  color:var(--color-bordeaux); margin-top:2px; }
.wine-card .meta{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center;
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-ink-3); }
.wine-card .certs{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.wine-card .note{ font-size:var(--text-sm); line-height:1.6; color:var(--color-ink-2); text-wrap:pretty; }
.wine-card__foot{ display:flex; justify-content:space-between; align-items:flex-end;
  padding-top:var(--space-4); margin-top:auto; border-top:var(--border-hair); }
.price{ display:none; } /* affichage piloté par le sélecteur de conditionnement */
.price .fmt{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-ink-3); }
.price .amt{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:500; line-height:1; }
.stock{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-ink-3); text-align:right; }
.stock b{ color:var(--color-ink-2); font-weight:500; }
.wine-card__cta{ display:flex; gap:var(--space-3); margin-top:var(--space-2); }
.wine-card__cta .btn{ flex:1; }

@media (min-width:640px){
  .wine-card{ grid-template-columns:128px 1fr; }             /* média à gauche */
  .wine-card__media{ border-bottom:0; border-right:var(--border-hair); }
}

/*── Mise en page archive (D-E, 2026-08-11) ─────────────────────────────
   #primary (.content-area, grille wc_get_template_part('content',
   'product')) et #secondary (.widget-area, sidebar.php) sont des frères,
   enfants directs de <main id="contenu"> (header.php/footer.php). Sans
   règles ci-dessous ils s'empilent pleine largeur, sans le moindre
   espacement — aucune classe de mise en page pour #primary/#secondary/
   #contenu ailleurs dans le thème. C'était très exactement la plainte
   initiale de Romain sur "la cave" ("les blocs et leurs contenus ne
   s'adaptent pas à la taille de l'écran"). Empilement conservé en
   dessous de 1024px : un empilement propre EST la réponse responsive
   correcte sous ce seuil, seul le desktop a besoin d'une colonne
   latérale séparée. Partagé par construction avec /categorie-produit/
   ateliers/ (même gabarit résolu, même structure). */
body.tax-product_cat #contenu,
body.post-type-archive-product #contenu{ padding:0 var(--gutter); }

.content-area{ padding-block:var(--space-8) var(--space-12); min-width:0; }
.widget-area{ padding-block:0 var(--space-12); }

.widget-area .widget{ margin-bottom:var(--space-8); }
.widget-area .widget-title{ font-family:var(--font-display); font-size:var(--text-lg);
  font-weight:500; margin-bottom:var(--space-4); }

@media (min-width:1024px){
  body.tax-product_cat #contenu,
  body.post-type-archive-product #contenu{ display:flex; align-items:flex-start; gap:var(--space-10); }
  .content-area{ flex:1 1 auto; }
  .widget-area{ flex:0 0 260px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   EDV-FILTRES-CAVE-V1 (2026-08-29) — Facettes de /categorie-produit/vins/.
   Conception : FILTRES-CAVE.md, section 4. Rendu HTML : edv_filtres_vins_
   sidebar() dans functions.php (§13), appelée par woocommerce/archive-
   product.php à la place de do_action('woocommerce_sidebar') sur cette
   seule catégorie — sidebar.php et le reste de cette feuille (voir plus
   haut, bloc "Mise en page archive" D-E) ne sont pas touchés.

   Réutilise le motif visuel des puces de l'archive ateliers (.chip /
   .filtres-actifs de archive-ateliers.css : padding, radius-pill, teal-
   deep pour l'état actif) sous un AUTRE espace de noms (edv-filtres-*),
   dans une feuille différente — comme demandé par le document de
   conception (§4, point 5) : même recette, pas le même fichier.

   #secondary.edv-filtres-vins RÉUTILISE la colonne .widget-area déjà
   posée par D-E plus haut dans ce fichier (260px dès 1024px, empilée en
   dessous) : ce bloc EST cette colonne sur la catégorie vins, pas un
   élément de plus à côté. Sous 1024px, elle devient un tiroir en push-
   out : bouton "Filtrer" collant + fond + tiroir, tous les trois en
   position fixed (donc hors du flux normal, sans effet sur la mise en
   page de #primary, empilée ou non) et pilotés par une case à cocher
   masquée (#edv-filtres-bascule, attribut HTML hidden) + le sélecteur
   général frère (~) — même technique que le filtrage CSS pur des
   ateliers (§12 A-3), ici pour un état d'AFFICHAGE seulement : le
   filtrage lui-même reste un aller-retour serveur (functions.php §13).
   ═══════════════════════════════════════════════════════════════════════ */

/*── Bouton "Filtrer" collant et fond du tiroir : mobile uniquement ──────*/
.edv-filtres-bouton,
.edv-filtres-fond,
.edv-filtres-bascule{ display:none; }

@media (max-width:1023px){
  .edv-filtres-bascule{
    display:block; position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .edv-filtres-bascule:focus-visible ~ .edv-filtres-bouton{ outline:var(--focus-ring); outline-offset:var(--focus-offset); }

  .edv-filtres-bouton{
    display:flex; align-items:center; justify-content:center; gap:var(--space-2);
    position:fixed; z-index:60; left:var(--space-4); right:var(--space-4); bottom:var(--space-4);
    padding:var(--space-3) var(--space-5); border-radius:var(--radius-pill);
    background:var(--color-teal-deep); color:var(--color-cream);
    font-family:var(--font-mono); font-size:var(--text-sm); font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; text-align:center;
    box-shadow:0 4px 16px rgba(31,26,20,.28); cursor:pointer;
  }
  .edv-filtres-bouton__n{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:1.6em; padding:0 var(--space-2); border-radius:var(--radius-pill);
    background:rgba(255,255,255,.22);
  }

  .edv-filtres-fond{
    display:block; position:fixed; inset:0; z-index:55; background:rgba(31,26,20,.45);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }

  #secondary.edv-filtres-vins{
    position:fixed; z-index:58; top:0; right:0; bottom:0; width:min(340px,86vw);
    background:var(--color-cream); padding:var(--space-6) var(--space-5) var(--space-8);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s;
  }

  .edv-filtres-bascule:checked ~ .edv-filtres-fond{ opacity:1; pointer-events:auto; }
  .edv-filtres-bascule:checked ~ #secondary.edv-filtres-vins{ transform:translateX(0); visibility:visible; transition:transform .25s ease, visibility 0s linear 0s; }
  .edv-filtres-bascule:checked ~ .edv-filtres-bouton{ display:none; } /* le tiroir ouvert a déjà sa propre fermeture (✕) */
}

/*── Entête du tiroir (compteur total + fermeture) : mobile uniquement —
    sur desktop le compteur vit déjà dans le fil WooCommerce natif
    (woocommerce_result_count()) au-dessus de la grille ────────────────*/
.edv-filtres-entete{ display:none; }

@media (max-width:1023px){
  .edv-filtres-entete{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
    margin-bottom:var(--space-5);
  }
  .edv-filtres-total{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:500; }
  .edv-filtres-fermer{
    display:flex; align-items:center; justify-content:center;
    width:2em; height:2em; border:var(--border-hair); border-radius:50%;
    color:var(--color-ink-2); cursor:pointer; flex:none;
  }
}

/*── Filtres actifs : même recette que .filtres-actifs de l'archive
    ateliers (padding, radius-pill, teal-deep), espace de noms distinct ──*/
.edv-filtres-actifs{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
  margin-bottom:var(--space-6);
}
.edv-filtres-actifs__item{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); border:var(--border-hair); border-radius:var(--radius-pill);
  font-size:var(--text-sm); line-height:1.2; color:var(--color-ink-2); text-decoration:none;
}
.edv-filtres-actifs__item:hover{ border-color:var(--color-line); color:var(--color-ink); }
.edv-filtres-actifs__reset{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-teal-deep); text-decoration:none;
}
.edv-filtres-actifs__reset:hover{ text-decoration:underline; }

/*── Sous-titre de sous-groupe (styles groupés par couleur) et note de
    précision (prix : "prix unitaire, carton de 6") ───────────────────*/
.edv-filtres-note{
  font-size:var(--text-xs); color:var(--color-ink-3); margin:calc(var(--space-4) * -1) 0 var(--space-3);
}
.edv-filtres-sousgroupe{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-ink-3); margin:var(--space-4) 0 var(--space-2);
}
.edv-filtres-sousgroupe:first-child{ margin-top:0; }

.edv-filtres-liste{ list-style:none; margin:0; padding:0; }
.edv-filtres-liste li + li{ margin-top:2px; }

/*── Case à cocher rendue comme un lien : cocher/décocher est un aller-
    retour serveur (nouvelle URL), jamais une vraie <input> (§4 point 4) ──*/
.edv-filtres-case{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-2); margin:0 calc(var(--space-2) * -1);
  border-radius:var(--radius-sm); color:var(--color-ink-2); text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.edv-filtres-case:hover{ background:var(--color-kraft); color:var(--color-ink); }
.edv-filtres-case__coche{
  flex:none; width:16px; height:16px; border:var(--border-hair); border-radius:4px;
  background:var(--color-cream); position:relative;
}
.edv-filtres-case.is-active .edv-filtres-case__coche{
  background:var(--color-teal-deep); border-color:var(--color-teal-deep);
}
.edv-filtres-case.is-active .edv-filtres-case__coche::after{
  content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid var(--color-cream); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.edv-filtres-case__nom{ flex:1 1 auto; font-size:var(--text-sm); }
.edv-filtres-case.is-active .edv-filtres-case__nom{ color:var(--color-ink); font-weight:500; }
.edv-filtres-case__n{
  flex:none; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-ink-3);
}

/*── Recherche dans la liste des domaines ─────────────────────────────*/
.edv-filtres-recherche{
  display:block; width:100%; margin-bottom:var(--space-3);
  padding:var(--space-2) var(--space-3); border:var(--border-hair); border-radius:var(--radius-sm);
  font-size:var(--text-sm); background:var(--color-cream); color:var(--color-ink);
}
.edv-filtres-recherche:focus{ outline:2px solid var(--color-teal-deep); outline-offset:1px; }


/* ═══════════════════════════════════════════════════════════════════════
   EDV-FILTRES-CAVE-V2 (2026-08-30) — Couleur→Style et Pays→Région→Domaine
   en arbres repliés par défaut (<details>/<summary> natifs), à la place
   des rendus à plat de FILTRES-CAVE-V1 ci-dessus (§13.6/§13.11 de
   functions.php, corrigés) — arbitrage de Romain le 2026-08-30 sur
   FILTRES-CAVE.md §3.2 et §3.4. Le calcul (comptage, masquage) ne change
   pas ; seul l'habillage de la même .edv-filtres-case (case à cocher
   rendue en lien, voir ci-dessus) change pour se nicher dans un noeud
   d'arbre. Zéro JavaScript pour l'ouverture/repli : <summary> gère ça
   nativement, au clavier comme à la souris. La recherche de domaine
   (.edv-filtres-recherche, ci-dessus) est réutilisée telle quelle,
   simplement désormais possible en plusieurs exemplaires simultanés (un
   par région dépliée) plutôt qu'un seul pour tout le catalogue.
   ═══════════════════════════════════════════════════════════════════════ */

.edv-arbre{ margin:0; }

/*── <summary> : la ligne cliquable qui déplie/replie. Le triangle par
    défaut du navigateur est masqué (trois techniques cumulées pour
    couvrir Chrome/Edge, Safari et Firefox) et remplacé par notre propre
    chevron ; le reste de la ligne (case à cocher + nom + compteur) reste
    un <a>, donc un clic dessus filtre au lieu de (re)plier ────────────*/
.edv-arbre__resume{
  display:flex; align-items:center; list-style:none; cursor:pointer;
}
.edv-arbre__resume::-webkit-details-marker{ display:none; }
.edv-arbre__resume::marker{ content:""; display:none; }
.edv-arbre__resume:focus-visible{
  outline:2px solid var(--color-teal-deep); outline-offset:2px; border-radius:var(--radius-sm);
}
.edv-arbre__resume .edv-filtres-case{ flex:1 1 auto; min-width:0; }

/*── Chevron : triangle CSS pur (bordures), ▸ replié / ▾ déplié. 6px et
    space-3 sont la même paire de valeurs que la marge de compensation de
    .edv-arbre__sansenfant plus bas -- à modifier ensemble si la taille
    du chevron change un jour ──────────────────────────────────────────*/
.edv-arbre__chevron{
  flex:none; width:0; height:0; margin-right:var(--space-3);
  border-style:solid; border-width:5px 0 5px 6px;
  border-color:transparent transparent transparent var(--color-ink-3);
  transition:transform .15s ease;
}
.edv-arbre[open] > .edv-arbre__resume .edv-arbre__chevron{
  transform:rotate(90deg);
}

/*── Enfants d'un noeud d'arbre : même liste que .edv-filtres-liste
    (réutilisée via la double classe dans le HTML), avec un retrait pour
    marquer la profondeur -- se cumule naturellement à chaque niveau
    (région sous pays, domaine sous région) ───────────────────────────*/
.edv-arbre__enfants{
  padding-left:var(--space-5);
  margin-top:var(--space-2);
}

/*── Recherche de domaine : légèrement détachée du résumé qui la précède
    (le space-3 du bas vient déjà de la règle V1 ci-dessus) ────────────*/
.edv-arbre > .edv-filtres-recherche{ margin-top:var(--space-2); }

/*── Noeud sans enfant restant (0 ou 1 après co-filtrage, garde-fou
    13.6) : simple case, pas de <details>. Le retrait à gauche aligne
    quand même son nom sur celui des noeuds dépliables voisins ─────────*/
.edv-arbre__sansenfant{
  margin-left:calc(6px + var(--space-3));
}


/* ═══════════════════════════════════════════════════════════════════════
   EDV-VINS-DU-MOIS-V1 (2026-08-31) — bloc « Les vins du mois »,
   /categorie-produit/vins/. Rendu PHP : edv_vins_du_mois_render() dans
   functions.php, accroché sur woocommerce_before_main_content (priorité
   5) -- avant .content-area, donc troisième frère flex de #contenu (voir
   le bloc "Mise en page archive (D-E, 2026-08-11)" plus haut dans ce
   fichier, et la contrainte n°6 du prompt de ce lot).

   La règle D-E #contenu{ display:flex } (dès 1024px, plus haut) ne
   prévoyait que 2 enfants (.content-area + .widget-area, largeurs qui
   tiennent toujours sur une seule ligne) : flex-wrap n'était donc jamais
   nécessaire jusqu'ici. Ce lot ajoute un 3e enfant (.vins-du-mois,
   flex:0 0 100%) qui déborde systématiquement -- d'où flex-wrap:wrap
   ci-dessous, posé sur #contenu SANS toucher la règle D-E existante
   (même sélecteur, nouvelle règle, cascade par-dessus sans rien retirer :
   #contenu reste display:flex, align-items:flex-start, gap:var(--space-10)
   comme avant, il gagne seulement la capacité de passer à la ligne).
   Résultat : ce bloc occupe sa propre ligne pleine largeur, .content-area
   et .widget-area passent à la ligne suivante et gardent leur disposition
   à deux colonnes exactement comme avant (leurs flex-basis propres ne
   changent pas). Sous 1024px, #contenu n'est pas flex : ce bloc s'empile
   normalement à son emplacement dans le DOM (avant .content-area) --
   comportement par défaut du navigateur, aucune règle supplémentaire.

   .chip / .chip:hover ci-dessous copient VERBATIM .themes-nav .chip /
   .themes-nav .chip:hover (archive-ateliers.css, mêmes tokens), sous le
   sélecteur .vins-du-mois .chip : cette feuille n'a pas .themes-nav
   (page différente, feuille non chargée ici) -- contrainte n°7 du
   prompt. .chip__n et .chip.is-active ne sont pas repris : ce lien n'est
   jamais un état actif/inactif à bascule, et le compte réel est déjà
   dans la phrase (edv_texte('cave.vinsdumois.rebond')), un badge séparé
   serait redondant.

   Le reste des tokens (couleur, nom, domaine, prix, note) reprend les
   mêmes choix que .wine-card plus haut dans ce fichier (police, taille,
   couleur) -- cohérence avec la grille produit juste en dessous de ce
   bloc sur la même page, pas une redéfinition de composant.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width:1024px){
  body.tax-product_cat #contenu,
  body.post-type-archive-product #contenu{ flex-wrap:wrap; }
  .vins-du-mois{ flex:0 0 100%; }
}

.vins-du-mois{ padding-block:var(--space-10) 0; }

.vins-du-mois__liste{
  list-style:none; margin:var(--space-6) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--space-8);
}

@media (min-width:640px){
  .vins-du-mois__liste{ flex-direction:row; flex-wrap:wrap; gap:var(--space-6); }
  .vins-du-mois__carte{ flex:1 1 220px; min-width:0; }
}

.vins-du-mois__carte{
  display:flex; flex-direction:column; gap:var(--space-3);
}

.vins-du-mois__num{
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-ink-3);
}

.vins-du-mois__media{
  display:block; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--color-kraft);
}
.vins-du-mois__media img{ display:block; width:100%; height:auto; }

.vins-du-mois__corps{ display:flex; flex-direction:column; gap:var(--space-2); }

.vins-du-mois__couleur{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-ink-2); margin:0;
}

.vins-du-mois__nom{ font-size:var(--text-lg); font-weight:500; line-height:1.2; margin:0; }
.vins-du-mois__nom a{ color:inherit; text-decoration:none; }
.vins-du-mois__nom a:hover{ text-decoration:underline; }

.vins-du-mois__domaine{
  font-family:var(--font-display); font-style:italic; font-size:var(--text-md);
  color:var(--color-bordeaux); margin:0;
}

.vins-du-mois__prix{
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:500; margin:0;
}

.vins-du-mois__note{
  font-size:var(--text-sm); line-height:1.6; color:var(--color-ink-2); margin:0;
}

/*── .chip copié verbatim depuis .themes-nav .chip / .themes-nav .chip:hover
    (archive-ateliers.css), sous .vins-du-mois .chip -- voir note en tête
    de bloc ci-dessus ───────────────────────────────────────────────────*/
.vins-du-mois .chip{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); border:var(--border-hair);
  border-radius:var(--radius-pill); font-size:var(--text-sm); line-height:1.2;
  text-decoration:none; color:var(--color-ink-2); background:transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.vins-du-mois .chip:hover{ border-color:var(--color-line); color:var(--color-ink); }

.vins-du-mois__rebond{ align-self:flex-start; margin-top:var(--space-2); }


/* ═══════════════════════════════════════════════════════════════════════
   EDV-FILTRES-CAVE-V3 (2026-08-31) — La colonne de filtres passe À GAUCHE
   de la grille et devient collante. Arbitrage de Romain du 2026-08-31.

   Constat mesuré avant d'écrire une ligne : <main id="contenu"> est un
   conteneur flex en ligne qui passe à la ligne (flex-wrap:wrap, gap 44px),
   et #secondary y est le DERNIER enfant, après #primary qui occupe toute
   la largeur — la colonne se retrouvait donc empilée sous les vins, tout
   en bas de page. Le commentaire de V1 supposait une colonne « déjà posée
   par D-E » : D-E pose bien une largeur (260px) mais aucun placement.
   C'est ce placement qui manquait, et rien d'autre — aucun HTML n'a besoin
   de changer, l'ordre visuel se règle avec `order`.

   `order` plutôt que `grid-template-areas` volontairement : le bloc « Les
   vins du mois » n'est pas toujours là (0 vin coché = section absente), et
   un ordre relatif reste juste dans les deux cas là où des lignes de grille
   nommées se décaleraient.

   Sous 1024px, rien ne change : le tiroir en push-out de V1 (bouton
   « Filtrer » collant + fond + tiroir en position fixed) reste seul maître.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Hauteur du header collant (.site-header, position:sticky, top:0 —
     mesurée à 111px le 2026-08-31) + une respiration. Une seule valeur à
     retoucher si le header change de gabarit. */
  --edv-filtres-haut: 7.5rem;
}

@media (min-width:1024px){

  /* Sans align-items, la colonne s'étire sur toute la hauteur de la grille
     et position:sticky n'a plus aucune marge de manoeuvre : elle collerait
     sans jamais bouger. */
  body.term-vins main#contenu{ align-items:flex-start; }

  /* Pleine largeur au-dessus des deux colonnes. */
  body.term-vins main#contenu > .vins-du-mois{
    order:1; flex:0 0 100%; width:100%;
  }

  body.term-vins main#contenu > #secondary.edv-filtres-vins{
    order:2; flex:0 0 280px; width:280px; align-self:flex-start;
    position:sticky; top:var(--edv-filtres-haut);
    max-height:calc(100vh - var(--edv-filtres-haut) - var(--space-6));
    overflow-y:auto; overscroll-behavior:contain;
    padding-right:var(--space-3);
    scrollbar-width:thin;
  }
  body.term-vins main#contenu > #secondary.edv-filtres-vins::-webkit-scrollbar{ width:6px; }
  body.term-vins main#contenu > #secondary.edv-filtres-vins::-webkit-scrollbar-thumb{
    background:var(--color-line); opacity:.2; border-radius:var(--radius-pill);
  }

  body.term-vins main#contenu > #primary{
    order:3; flex:1 1 0; min-width:0;
  }
}

/*── Options à zéro : grisées, jamais retirées (arbitrage du 2026-08-31) ──
   Ne concerne que le niveau 1 des deux arbres — les couleurs et les pays.
   Les niveaux plus bas restent masqués à zéro, voir 13.5 dans functions.php. */
.edv-filtres-case.is-vide{
  color:var(--color-ink-3); cursor:default;
}
.edv-filtres-case.is-vide .edv-filtres-case__coche{
  opacity:.4;
}
.edv-filtres-case.is-vide:hover{
  background:none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * EDV-CAVE-VISUEL-V1 (2026-09-01) — /categorie-produit/vins/ uniquement.
 * Voir PROMPT-CAVE-VISUEL.md. Portée par body.term-vins partout : aucune
 * autre catégorie produit n'est concernée par ces règles.
 *
 * Mesuré avant d'écrire (front réel, connecté, 2026-09-01, 1424px) :
 * .vins-du-mois__carte est en flex:1 1 220px SANS plafond dans la feuille
 * d'origine (EDV-VINS-DU-MOIS-V1) : avec 3 vins coches sur 1297px
 * disponibles, chaque carte gonfle a 379px (image 379x379 comprise) et
 * le bloc fait 781px de haut. Cause : flex-grow:1, pas la taille cible.
 * ═══════════════════════════════════════════════════════════════════════
 */

/* --- Volet A : gabarit horizontal a taille FIXE (flex-grow:0), stable
   de 1 a 4 vins coches -- num au-dessus de l'image, texte a droite. --- */
body.term-vins .vins-du-mois { padding-bottom: 24px; }
body.term-vins .vins-du-mois__liste { align-items: flex-start; }
body.term-vins .vins-du-mois__carte {
	display: grid;
	grid-template-columns: 150px 1fr;
	grid-template-areas: "num corps" "media corps";
	column-gap: 14px;
	row-gap: 4px;
	flex: 0 0 auto; /* plus de flex-grow:1 : la carte ne gonfle plus */
	width: 300px;
	max-width: 300px;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__num {
	grid-area: num;
	margin-bottom: 0;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__media {
	grid-area: media;
	width: 150px;
	height: 150px;
	display: block;
	overflow: hidden;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__media img {
	width: 150px !important;
	height: 150px !important;
	max-width: 150px !important;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__corps {
	grid-area: corps;
	display: flex;
	flex-direction: column;
	gap: 3px;
	justify-content: center;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__couleur {
	font-size: 10px;
	line-height: 1.3;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__nom {
	font-size: 15px;
	line-height: 1.2;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__domaine {
	font-size: 12px;
	line-height: 1.3;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__prix {
	font-size: 14px;
	line-height: 1.25;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__note {
	font-size: 11px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 1px;
}
body.term-vins .vins-du-mois__carte .vins-du-mois__rebond {
	font-size: 11px;
	margin-top: 3px;
	padding: 5px 10px;
}

/* --- Volet B : tete de page (fil d'Ariane + H1 + description) rendue en
   pleine largeur par edv_cave_visuel_tete_pleine_largeur() (functions.php,
   meme marqueur) -- meme technique que .vins-du-mois : troisieme enfant
   de #contenu, flex:0 0 100%, order la place avant .vins-du-mois. --- */
body.term-vins #contenu > .edv-cave-tete {
	order: 0;
	flex: 0 0 100%;
	padding: 24px 56px 16px;
}
/* Le <header> d'origine reste dans le flux (rien a y afficher desormais :
   H1 supprime par le filtre woocommerce_show_page_title, description
   deplacee) mais reste dans le DOM -- masque par hygiene, pas pour
   cacher un doublon de contenu visible. */
body.term-vins #primary #main > header.woocommerce-products-header {
	display: none;
}
/* --- Volet C : entete de filtres (.edv-filtres-entete) reutilisee sur
   desktop -- elle existe deja dans le DOM, display:none par defaut et
   display:flex seulement sous 1024px (FILTRES-CAVE-V1). Rien ne change
   sous 1024px : le tiroir mobile garde exactement son etat actuel. --- */
@media (min-width: 1024px) {

	body.term-vins #secondary.edv-filtres-vins .edv-filtres-entete {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		column-gap: 12px;
		row-gap: 6px;
		margin-bottom: 20px;
	}
	/* Titre "Filtrer" : nouveau noeud, sur sa propre ligne (flex 100%) --
	   un cran au-dessus de .widget-title (meme famille, --text-xl au lieu
	   de --text-lg) pour marquer que c'est le titre de toute la colonne,
	   pas celui d'un groupe. */
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-entete__titre {
		flex: 0 0 100%;
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--text-xl);
		font-weight: 500;
		color: var(--color-ink);
	}
	/* Compteur : deuxieme ligne, aligne a gauche -- repasse au second plan
	   (mono/xs, comme .edv-filtres-sousgroupe) maintenant qu'il n'est plus
	   seul dans l'entete. */
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-total {
		margin: 0;
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: .05em;
		color: var(--color-ink-3);
	}
	/* Tout effacer : deuxieme ligne, aligne a droite (justify-content:
	   space-between du parent) -- meme recette que .edv-filtres-actifs__
	   reset (filtres actifs, FILTRES-CAVE-V1). N'existe dans le DOM que
	   si $actifs (voir pair-02). */
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-entete__reset {
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--color-teal-deep);
		text-decoration: none;
	}
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-entete__reset:hover {
		text-decoration: underline;
	}
	/* Croix de fermeture : mobile uniquement, pas de tiroir a fermer ici. */
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-fermer {
		display: none;
	}

	/* Groupes de facettes en <details>/<summary> -- meme idiome que
	   .edv-arbre (FILTRES-CAVE-V2) : triangle CSS pur (meme span, meme
	   classe edv-arbre__chevron dans le HTML), marker natif masque (trois
	   techniques cumulees Chrome/Edge, Safari, Firefox). .widget-title
	   garde sa recette typographique existante (regle .widget-area
	   .widget-title, non qualifiee par balise -- verifie en direct sur le
	   staging) : on n'ajoute ici que le comportement de pli/depli. */
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-groupe > .widget-title {
		display: flex;
		align-items: center;
		cursor: pointer;
		list-style: none;
	}
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-groupe > .widget-title::-webkit-details-marker {
		display: none;
	}
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-groupe > .widget-title::marker {
		content: "";
		display: none;
	}
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-groupe > .widget-title:focus-visible {
		outline: 2px solid var(--color-teal-deep);
		outline-offset: 2px;
		border-radius: var(--radius-sm);
	}
	/* Chevron : reutilise .edv-arbre__chevron telle quelle (triangle CSS
	   deja pose par FILTRES-CAVE-V2). Seule la rotation a l'ouverture est
	   redeclaree ici : celle de V2 est scopee a .edv-arbre, pas a
	   .edv-filtres-groupe. */
	body.term-vins #secondary.edv-filtres-vins .edv-filtres-groupe[open] > .widget-title .edv-arbre__chevron {
		transform: rotate(90deg);
	}
}


.woocommerce ul.products li.product a.button{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:700; font-size:var(--text-sm);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-pill);
  background:transparent; color:var(--color-bordeaux);
  border:1.5px solid var(--color-bordeaux);
  text-decoration:none; min-height:44px;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.woocommerce ul.products li.product a.button:hover{
  background:var(--color-bordeaux); color:var(--color-cream);
  transform:translateY(-1px);
}
.woocommerce ul.products li.product a.button.disabled,
.woocommerce ul.products li.product a.button[aria-disabled="true"]{
  opacity:.45; border-color:var(--color-ink-3); color:var(--color-ink-3);
  background:transparent; cursor:not-allowed; transform:none;
}
/* ═══════════════════════════════════════════════════════════════════════
 * FIN EDV-CAVE-VISUEL-V1 (volets A + B + C)
 * ═══════════════════════════════════════════════════════════════════════
 */