/*═══════════════════════════════════════════════════════════════════════════
  D-D — CSS « fiche vin » (2026-08-11, voir ROADMAP.md et ETAT.md, clôture D-D)
  Copié verbatim depuis CLAUDE DESIGN/Accueil/Vin detail - production
  (Gutenberg-ready).html, lignes 40-235 (bloc <style> complet). Chargé
  automatiquement par functions.php §8 sur le gabarit résolu "single-product"
  (mécanisme déjà en place depuis D-A, aucune modification de functions.php
  nécessaire pour cet enqueue). Quelques règles restent inertes (bandeau
  "coup de cœur", panel Service, section Presse — omis en HTML, voir
  DECISIONS.md) : laissées telles quelles, même précédent qu'en D-B
  (assets/pages/archive-product.css laissé inerte plutôt que supprimé, pas
  d'outil de suppression de fichier sur Z:).
═══════════════════════════════════════════════════════════════════════════*/

/*── BANDEAU « COUP DE CŒUR DE ROMAIN » (ochre = sélection Romain uniquement) ─*/
.pick-banner{ background:var(--color-kraft); padding:var(--space-5) var(--gutter);
  border-top:3px solid var(--color-ochre); border-bottom:3px solid var(--color-ochre);
  display:grid; grid-template-columns:1fr; gap:var(--space-4); align-items:center; }
.pick-banner__label{ display:flex; flex-direction:column; gap:var(--space-2); }
.pick-banner__label .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--color-ochre); font-weight:700; }
.pick-banner__label .no{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:500; color:var(--color-bordeaux); display:flex; align-items:baseline; gap:var(--space-3); }
.pick-banner__label .no em{ font-style:italic; }
.pick-banner__label .no .d{ font-family:var(--font-mono); font-size:11px; color:var(--color-ink-3); letter-spacing:.18em; }
.pick-banner blockquote{ margin:0; }
.pick-banner blockquote p{ font-family:var(--font-display); font-style:italic; font-size:var(--text-xl); line-height:1.3; color:var(--color-bordeaux); margin:0; }
.pick-banner__sign{ display:flex; flex-direction:column; gap:var(--space-2); }
.pick-banner__sign .signature{ font-size:var(--text-2xl); }
.pick-banner__sign a{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-ink-3); text-underline-offset:4px; font-weight:600; }

/*── LAYOUT produit + rail ───────────────────────────────────────────────────*/
.product{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1fr; align-items:start; }
/* radios de pilotage (onglets + conditionnement) masqués mais focusables */
.product > input[type=radio]{ position:absolute; opacity:0; width:1px; height:1px; }

/*── HERO produit ────────────────────────────────────────────────────────────*/
.phero{ display:grid; grid-template-columns:1fr; border-bottom:var(--border-firm); }
.phero__media{ position:relative; min-height:380px; background:var(--color-teal-deep); border:0; }
.phero__media figcaption{ position:absolute; bottom:var(--space-4); left:var(--space-4); right:var(--space-4); background:rgba(35,84,79,.65); color:var(--color-teal-soft); }
.phero__media .watermark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:clamp(80px,18vw,200px); color:rgba(250,244,230,.07); letter-spacing:-.04em; pointer-events:none; }
.phero__info{ padding:var(--space-8) var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.phero__domaine{ font-family:var(--font-display); font-style:italic; font-size:var(--text-lg); color:var(--color-ink-3); margin:var(--space-5) 0 2px; }
/* Le domaine renvoie vers sa fiche interne : discret au repos, souligne au survol. */
.phero__domaine a{ color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent); transition:border-color .18s ease, color .18s ease; }
.phero__domaine a:hover, .phero__domaine a:focus-visible{ color:var(--color-teal-deep); border-bottom-color:currentColor; }
.phero h1{ font-size:var(--text-4xl); line-height:1; letter-spacing:-.025em; }
.phero__year{ font-family:var(--font-mono); font-size:var(--text-xl); color:var(--color-bordeaux); letter-spacing:.04em; margin-top:var(--space-2); }
.phero__verdict{ font-family:var(--font-display); font-style:italic; font-size:var(--text-md); color:var(--color-ink-2); line-height:1.5; margin-top:var(--space-5); text-wrap:pretty; }
.phero__certifs{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-5); }

/*── ONGLETS (CSS pur · radios + :has()) ─────────────────────────────────────*/
.tablist{ position:sticky; top:var(--header-h); background:var(--color-cream); border-bottom:var(--border-firm);
  padding:0 var(--gutter); display:flex; gap:var(--space-8); z-index:5; overflow-x:auto; }
.tablist label{ padding:var(--space-5) 0; cursor:pointer; font-size:var(--text-sm); font-weight:600;
  color:var(--color-ink-2); border-bottom:2px solid transparent; white-space:nowrap; letter-spacing:.04em; }
.tablist label:hover{ color:var(--color-ink); }
.panel{ display:none; }
.panel__inner{ padding:var(--space-12) var(--gutter); }
/* activation onglet */
.product:has(#tab-recit:checked)   label[for=tab-recit],
.product:has(#tab-degust:checked)  label[for=tab-degust],
.product:has(#tab-fiche:checked)   label[for=tab-fiche],
.product:has(#tab-accord:checked)  label[for=tab-accord],
.product:has(#tab-service:checked) label[for=tab-service]{ color:var(--color-bordeaux); border-bottom-color:var(--color-bordeaux); }
.product:has(#tab-recit:checked)   .panel--recit,
.product:has(#tab-degust:checked)  .panel--degust,
.product:has(#tab-fiche:checked)   .panel--fiche,
.product:has(#tab-accord:checked)  .panel--accord,
.product:has(#tab-service:checked) .panel--service{ display:block; }
.product:has(#tab-recit:focus-visible)   label[for=tab-recit],
.product:has(#tab-degust:focus-visible)  label[for=tab-degust],
.product:has(#tab-fiche:focus-visible)   label[for=tab-fiche],
.product:has(#tab-accord:focus-visible)  label[for=tab-accord],
.product:has(#tab-service:focus-visible) label[for=tab-service]{ outline:var(--focus-ring); outline-offset:var(--focus-offset); }

/*── SOUS-SECTION en-tête ────────────────────────────────────────────────────*/
.subhead .eyebrow{ margin-bottom:var(--space-5); }
.subhead h2{ font-size:var(--text-3xl); line-height:1.05; margin-bottom:var(--space-6); }
.subhead h2 em{ font-style:italic; color:var(--color-bordeaux); }

/*── RÉCIT : vigneron + terroir ──────────────────────────────────────────────*/
.vigneron__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start; }
.vigneron h2{ font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-4); }
.vigneron h2 em{ font-style:italic; color:var(--color-bordeaux); }
.vigneron__id{ display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-4); }
.vigneron__id div{ display:grid; grid-template-columns:140px 1fr; border-bottom:var(--border-hair); padding-bottom:var(--space-2); }
.vigneron__id dt{ font-family:var(--font-mono); font-size:10px; color:var(--color-ink-3); letter-spacing:.14em; text-transform:uppercase; }
.vigneron__id dd{ margin:0; font-family:var(--font-display); font-size:var(--text-base); }
.vigneron__body p{ font-size:var(--text-md); line-height:1.7; color:var(--color-ink-2); margin-bottom:var(--space-4); text-wrap:pretty; }
.terroir{ border-top:var(--border-hair); }
.terroir__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:center; }
.terroir h2{ font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-5); }
.terroir h2 em{ font-style:italic; color:var(--color-bordeaux); }
.terroir p{ font-size:var(--text-md); line-height:1.7; color:var(--color-ink-2); }
.terroir figure{ margin:0; background:var(--color-kraft); border:var(--border-firm); padding:var(--space-5); }
.terroir figure svg{ display:block; width:100%; }
.terroir figcaption{ margin-top:var(--space-3); font-family:var(--font-mono); font-size:10px; color:var(--color-ink-3); letter-spacing:.14em; text-transform:uppercase; }

/*── DÉGUSTATION ─────────────────────────────────────────────────────────────*/
.degust__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start; }
.degust h2{ font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-5); }
.degust h2 em{ font-style:italic; color:var(--color-bordeaux); }
.profile{ padding:var(--space-5); background:var(--color-cream); border:var(--border-hair); }
.profile .k{ font-family:var(--font-mono); font-size:10px; color:var(--color-ink-3); letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--space-4); }
.profile__row{ display:grid; grid-template-columns:80px 1fr 36px; gap:var(--space-3); align-items:center; margin:var(--space-2) 0; font-size:var(--text-xs); }
.profile__bar{ height:6px; background:var(--color-line-soft); border-radius:var(--radius-pill); position:relative; }
.profile__bar span{ position:absolute; inset:0; background:var(--color-bordeaux); border-radius:var(--radius-pill); }
.profile__val{ font-family:var(--font-mono); font-size:11px; color:var(--color-ink-3); text-align:right; }
.degust__note p{ font-size:var(--text-base); line-height:1.7; color:var(--color-ink-2); margin-bottom:var(--space-4); }
.degust__note .lead{ font-family:var(--font-display); font-weight:500; color:var(--color-bordeaux); margin-right:var(--space-2); }

/*── FICHE TECHNIQUE ─────────────────────────────────────────────────────────*/
.fiche h2{ font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-8); }
.fiche h2 em{ font-style:italic; color:var(--color-bordeaux); }
.fiche__table{ display:grid; grid-template-columns:1fr; border:var(--border-firm); background:var(--color-kraft); }
.fiche__cepages{ padding:var(--space-6); border-bottom:var(--border-firm); }
.fiche__cepages .k{ font-family:var(--font-mono); font-size:10px; color:var(--color-ink-3); letter-spacing:.18em; text-transform:uppercase; margin-bottom:var(--space-2); }
.fiche__cepages .v{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:500; }
.fiche__cell{ padding:var(--space-5) var(--space-6); border-bottom:var(--border-hair); }
.fiche__cell .k{ font-family:var(--font-mono); font-size:10px; color:var(--color-ink-3); letter-spacing:.18em; text-transform:uppercase; margin-bottom:var(--space-2); }
.fiche__cell .v{ font-family:var(--font-display); font-size:var(--text-base); line-height:1.4; }
.fiche__certifs{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6); }

/*── ACCORDS ─────────────────────────────────────────────────────────────────*/
.accords h2{ font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-8); }
.accords h2 em{ font-style:italic; color:var(--color-bordeaux); }
.accords__grid{ display:grid; grid-template-columns:1fr; border:var(--border-firm); }
.accords__grid article{ padding:var(--space-8) var(--space-6); background:var(--color-cream); border-bottom:var(--border-firm); display:flex; flex-direction:column; gap:var(--space-3); }
.accords__grid .n{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-bordeaux); font-weight:700; letter-spacing:.16em; }
.accords__grid h3{ font-size:var(--text-xl); font-weight:500; line-height:1.15; }
.accords__grid .why{ font-family:var(--font-display); font-style:italic; font-size:var(--text-base); color:var(--color-ink-3); line-height:1.35; }

/*── SERVICE ─────────────────────────────────────────────────────────────────*/
.service__grid{ display:grid; grid-template-columns:1fr; border:var(--border-firm); margin-top:var(--space-6); }
.service__grid div{ padding:var(--space-6); background:var(--color-kraft); border-bottom:var(--border-firm); display:flex; flex-direction:column; gap:var(--space-3); }
.service__grid .icon{ font-size:22px; color:var(--color-bordeaux); }
.service__grid .k{ font-family:var(--font-mono); font-size:10px; color:var(--color-ink-3); letter-spacing:.18em; text-transform:uppercase; }
.service__grid .v{ font-family:var(--font-display); font-size:var(--text-md); line-height:1.35; }

/*── PRESSE ──────────────────────────────────────────────────────────────────*/
.press{ padding:var(--space-8) var(--gutter); border-block:var(--border-hair); display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:var(--space-5); }
.press .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--color-ink-3); font-weight:700; }
.press__items{ display:flex; gap:var(--space-8); flex-wrap:wrap; }
.press__items div{ display:flex; flex-direction:column; gap:4px; }
.press__items .score{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:500; color:var(--color-bordeaux); }
.press__items .src{ font-size:var(--text-xs); color:var(--color-ink-2); }

/*── RAIL PANIER (sticky) ────────────────────────────────────────────────────*/
.cart-rail{ background:var(--color-cream); border-top:var(--border-firm); }
.cart-rail__inner{ padding:var(--space-8) var(--gutter); display:flex; flex-direction:column; gap:var(--space-6); }
.cart-rail__stock{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--color-teal-deep); font-family:var(--font-mono); letter-spacing:.08em; }
.cart-rail__stock .led{ width:8px; height:8px; border-radius:50%; background:var(--color-teal-deep); }
.cart-rail__price{ padding:var(--space-5) 0; border-block:var(--border-hair); }
.cart-rail__price .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--color-ink-3); font-weight:700; margin-bottom:var(--space-2); }
.cart-rail__amt{ display:flex; align-items:baseline; gap:var(--space-2); }
.cart-rail__amt .v{ font-family:var(--font-display); font-size:var(--text-4xl); font-weight:400; color:var(--color-bordeaux); letter-spacing:-.02em; line-height:1; }
.cart-rail__amt .u{ font-size:var(--text-sm); color:var(--color-ink-2); }
.cart-rail__sub{ font-size:var(--text-sm); color:var(--color-ink-2); margin-top:var(--space-2); }
.cart-rail__sub .amount{ font-weight:600; color:var(--color-ink); }
.cart-rail__hint{ font-family:var(--font-mono); font-size:12px; color:var(--color-ink-3); margin-top:var(--space-2); }
/* prix piloté par le conditionnement (CSS pur) */
.price-block{ display:none; }
.product:has(#cond-btl:checked) .price-block--btl,
.product:has(#cond-six:checked) .price-block--six,
.product:has(#cond-mag:checked) .price-block--mag{ display:block; }
/* E10 (C5 5.5) : un vin a un seul conditionnement achetable (connu ou
   non) n'a pas de radio de choix (voir single-product.php, la liste des
   .price-block n'a alors qu'un seul enfant) -- l'afficher directement,
   generique quel que soit le libelle. */
.cart-rail__price .price-block:only-child{ display:block; }
.cond-seg{ display:flex; background:var(--color-kraft); border:1px solid var(--color-line-soft); border-radius:var(--radius-pill); padding:4px; gap:4px; }
.cond-seg label{ flex:1; cursor:pointer; border:0; }
.cond-seg label span{ display:flex; align-items:center; justify-content:center; padding:12px 16px; font-size:var(--text-sm); font-weight:600; border-radius:var(--radius-pill); transition:background .18s ease, color .18s ease, box-shadow .18s ease; color:var(--color-ink-2); white-space:nowrap; }
.cond-seg label:hover span{ color:var(--color-ink); }
.product:has(#cond-btl:checked) label[for=cond-btl] span,
.product:has(#cond-six:checked) label[for=cond-six] span,
.product:has(#cond-mag:checked) label[for=cond-mag] span{ background:var(--color-cream); color:var(--color-bordeaux); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.product:has(#cond-btl:focus-visible) label[for=cond-btl] span,
.product:has(#cond-six:focus-visible) label[for=cond-six] span,
.product:has(#cond-mag:focus-visible) label[for=cond-mag] span{ outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.cart-rail__trust{ display:flex; flex-direction:column; gap:var(--space-3); padding-top:var(--space-5); border-top:var(--border-hair); }
.cart-rail__trust div{ display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-xs); color:var(--color-ink-2); line-height:1.4; }
.cart-rail__trust .icon{ font-size:16px; color:var(--color-teal-deep); flex:none; }
/* Rebond vers la fiche domaine, sous le bandeau et non dans la colonne : le
   visiteur qui hesite sur la cuvee doit pouvoir remonter au producteur. */
.cart-rail__autres{ margin:var(--space-4) 0 0; padding-top:var(--space-4); border-top:var(--border-hair); font-size:var(--text-xs); }
.cart-rail__autres a{ color:var(--color-teal-deep); text-decoration:none; font-weight:500; }
.cart-rail__autres a:hover, .cart-rail__autres a:focus-visible{ text-decoration:underline; }

/*── RELATED ─────────────────────────────────────────────────────────────────*/
.related{ background:var(--color-cream); border-top:var(--border-firm); }
.related__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--space-6); gap:var(--space-4); flex-wrap:wrap; }
.related__grid{ display:grid; grid-template-columns:1fr; border-top:var(--border-firm); }
.related a.card{ text-decoration:none; color:inherit; padding:var(--space-6) var(--gutter); display:flex; flex-direction:column; gap:var(--space-3); border-bottom:var(--border-hair); }
.related a.card header{ display:flex; align-items:center; justify-content:space-between; }
.related .y{ font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700; letter-spacing:.16em; color:var(--color-bordeaux); }
.related .p{ font-family:var(--font-display); font-size:var(--text-md); font-weight:500; }
.related h3{ font-size:var(--text-xl); font-weight:500; line-height:1.1; }
.related .cep{ font-family:var(--font-display); font-style:italic; font-size:var(--text-sm); color:var(--color-ink-3); }
.related .more{ margin-top:auto; font-size:var(--text-xs); color:var(--color-bordeaux); font-weight:600; padding-top:var(--space-3); border-top:var(--border-hair); display:inline-flex; align-items:center; gap:var(--space-2); }

/*═══════════════════════════════════════════════════════════════════════════
  (f) RESPONSIVE — 640 / 768 / 1024 / 1280
═══════════════════════════════════════════════════════════════════════════*/
@media (min-width:640px){
  .pick-banner{ grid-template-columns:220px 1fr 200px; gap:var(--space-8); }
  .pick-banner__label{ border-right:var(--border-hair); padding-right:var(--space-6); }
  .pick-banner__sign{ align-items:flex-end; text-align:right; }
  .fiche__table{ grid-template-columns:1fr 1fr; }
  .accords__grid{ grid-template-columns:1fr 1fr; }
  .service__grid{ grid-template-columns:repeat(3,1fr); }
  .related__grid{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:768px){
  .phero{ grid-template-columns:5fr 7fr; }
  .vigneron__grid{ grid-template-columns:5fr 7fr; }
  .terroir__grid{ grid-template-columns:7fr 5fr; }
  .degust__grid{ grid-template-columns:5fr 7fr; }
}
@media (min-width:1024px){
  .product{ grid-template-columns:1fr 380px; }
  .cart-rail{ border-top:0; border-left:var(--border-firm); }
  .cart-rail__inner{ position:sticky; top:var(--header-h); }
}
@supports not selector(:has(*)){
  .panel{ display:block; }
  .price-block--six{ display:block; }
  .price-block--btl{ display:block; }
}

/*═══════════════════════════════════════════════════════════════════════════
  D-D — ajouts, au-delà du verbatim (nécessaires : la référence ne prévoyait
  qu'un placeholder pour la photo produit et un bouton "Ajouter" unique hors
  des blocs de prix ; voir doc-bloc en tête de single-product.php)
═══════════════════════════════════════════════════════════════════════════*/
.phero__media{ overflow:hidden; }
.phero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; }
.price-block .btn{ margin-top:var(--space-4); width:100%; justify-content:center; min-height:48px; font-size:var(--text-base); letter-spacing:.02em; box-shadow:0 2px 6px rgba(112,21,17,.2); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.price-block .btn:hover{ box-shadow:0 4px 12px rgba(112,21,17,.32); transform:translateY(-1px); }
.price-block .btn:active{ transform:translateY(0); box-shadow:0 1px 3px rgba(112,21,17,.2); }

/* -- EDV-FICHE-VIN-OVERFLOW-V1 : debordement horizontal fiche vin (2026-08-20)
   Mesure sur /produit/amigo-de-la-tierra/ (ANALYSE-MAQUETTE2.md #8) :
   - Desktop 1440 : section.related > ul.products.columns-4 rendait a
     1897px dans un conteneur visible de 1412px (barre de defilement
     horizontale, page decalee).
   - Mobile 375 : figure.ph.phero__media debordait a 435px dans un
     viewport de 360px (la page glisse lateralement au doigt).
   Regles defensives ajoutees en fin de fichier : la cascade les fait
   gagner sur ce qui precede sans avoir besoin de connaitre le detail du
   gabarit qui produit ce bloc (jamais lu - voir DECISIONS.md). Le
   mecanisme le plus probable est un track de grille/flex qui ne se
   retrecit pas sous la taille de son contenu (min-width:auto par
   defaut) : min-width:0 est le correctif standard pour ce cas, en plus
   d'un overflow-x:hidden de securite qui ne depend pas de la cause
   exacte.
   ------------------------------------------------------------------------- */

.related.products,
section.related {
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}
.related.products ul.products,
section.related ul.products {
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
	flex-wrap: wrap;
}
.related.products ul.products > li.product,
section.related ul.products > li.product {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

/* Le produit courant est desormais exclu de "Autres cuvees du domaine"
   (voir functions.php, edv_exclude_current_product_from_secondary_queries).
   Si la requete revient vide (domaine a une seule cuvee), la section
   entiere - y compris son titre - est masquee plutot que de laisser un
   bandeau vide. */
.related.products:has(ul.products:empty),
section.related:has(ul.products:empty),
section.related:has(ul:empty) {
	display: none;
}

.phero,
.phero__media,
.ph.phero__media,
figure.phero__media {
	min-width: 0;
}
.phero__media,
.ph.phero__media,
figure.phero__media {
	max-width: 100%;
	overflow: hidden;
}