/*
  Eau de Vigne — Carnet · fiche domaine (archive product_brand)
  D-F, 2026-08-11.

  Mise en page reprise du bloc style de CLAUDE DESIGN/Accueil/Fiche domaine -
  production (Gutenberg-ready).html, réduite aux sections que le gabarit rend
  réellement (hero, récit, galerie, cuvées, appel à l'action). Les règles des
  sections omises faute de données — identité chiffrée, terroir et sa carte,
  culture et vinification, ateliers liés — ne sont pas portées : du CSS mort.

  Trois écarts assumés par rapport à la référence :
  1. dhero-vigneron n'existe pas dans la référence. Elle y met une phrase de
     positionnement rédigée ; on n'en a pas, on affiche le vigneron réel avec
     son étiquette.
  2. dhero-sans-media : la référence suppose toujours une photo. Trois des
     quatre domaines actuels n'en ont pas, le hero doit tenir sur une colonne.
  3. La grille des cuvées est posée ici sur ul.products plutôt que laissée au
     CSS de WooCommerce : le composant carte vin de D-B est en jeu, sa feuille
     (taxonomy-product-cat.css) est chargée en parallèle par functions.php
     section 8, exactement comme pour la fiche vin en D-D.

  Rappel du piège de D-C : jamais une classe en wildcard suivie d'une barre
  oblique dans un commentaire, ici comme en PHP.
*/

/* ── Neutralisation de la mise en page de la boutique ─────────────────────────
   functions.php section 8 charge aussi taxonomy-product-cat.css sur ce gabarit,
   parce que le composant carte vin de D-B y est défini et que les cuvées le
   réutilisent. Cette feuille porte en plus la mise en page de la page boutique
   de D-E : une gouttière sur le conteneur principal, et une disposition en deux
   colonnes au-dessus de 1024px pour poser la sidebar de filtres à côté de la
   grille. Les deux sont fausses ici — la fiche domaine n'a pas de sidebar, et
   ses bandes de couleur doivent aller bord à bord, la gouttière étant déjà
   portée par le conteneur interne de chaque section.

   Constaté en clôture D-F : sans ces deux lignes, les sections s'affichaient
   côte à côte en colonnes au lieu de s'empiler. Neutralisé ici plutôt que
   corrigé dans la feuille de D-E, pour ne pas toucher à une page validée ;
   le sélecteur passe par la classe de body posée par WordPress sur les
   archives de taxonomie, ce qui suffit à battre la spécificité de l'autre
   feuille quel que soit l'ordre de chargement. */
body.tax-product_brand #contenu{ display:block; padding:0; }

@media (min-width:1024px){
  body.tax-product_brand #contenu{ display:block; }
}

/* ── HERO domaine ─────────────────────────────────────────────────────────── */
.dhero{ display:grid; grid-template-columns:1fr; background:var(--color-kraft); border-bottom:var(--border-firm); }
.dhero__media{ position:relative; min-height:320px; margin:0; overflow:hidden; }
.dhero__media img{ display:block; width:100%; height:100%; min-height:320px; object-fit:cover; }
.dhero__type{ padding:var(--space-10) var(--gutter); display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-8); }
.dhero h1{ font-size:var(--text-4xl); line-height:.96; letter-spacing:-.025em; margin:var(--space-5) 0 var(--space-3); }
.dhero__appel{ font-family:var(--font-display); font-style:italic; font-size:var(--text-xl); color:var(--color-bordeaux); margin-bottom:var(--space-4); }
.dhero__vigneron{ display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap;
  font-size:var(--text-lg); line-height:1.5; color:var(--color-ink-2); margin-bottom:var(--space-6); }
.dhero__vigneron .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-ink-3); font-weight:700; }
.dhero__stamps{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.dhero__foot{ padding-top:var(--space-6); border-top:var(--border-firm); display:flex; gap:var(--space-8); align-items:baseline; flex-wrap:wrap; min-height:1px; }
.dhero__foot .stat .v{ font-family:var(--font-display); font-size:var(--text-2xl); line-height:1; }
.dhero__foot .stat .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-ink-3); margin-top:6px; }
.dhero__foot .cta-spacer{ margin-left:auto; }

/* ── RÉCIT ────────────────────────────────────────────────────────────────── */
.recit__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-10); align-items:start; margin-top:var(--space-8); }
.recit h2{ font-size:var(--text-3xl); line-height:1.08; margin-bottom:var(--space-8); max-width:24ch; }
.recit h2 em{ font-style:italic; color:var(--color-bordeaux); }
.recit__body{ font-size:var(--text-md); line-height:1.7; color:var(--color-ink-2); display:flex; flex-direction:column; gap:var(--space-5); }
.recit__body p{ max-width:68ch; text-wrap:pretty; }

/* ── GALERIE (bande teal) ─────────────────────────────────────────────────── */
.gallery__head{ display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:baseline; margin-top:var(--space-6); }
.gallery h2{ font-size:var(--text-4xl); line-height:1; }
.gallery h2 em{ font-style:italic; color:var(--color-teal-soft); }
.gallery__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-top:var(--space-8); }
.gallery__grid figure{ margin:0; aspect-ratio:4 / 3; overflow:hidden; background:rgba(250,244,230,.08); }
.gallery__grid img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ── CUVÉES ───────────────────────────────────────────────────────────────── */
.cuvees__head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-8); }
.cuvees__head h2{ font-size:var(--text-4xl); line-height:1; margin-top:var(--space-5); }
.cuvees__head h2 em{ font-style:italic; color:var(--color-bordeaux); }
.cuvees ul.products{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.cuvees ul.products::before,
.cuvees ul.products::after{ content:none; }
/* La largeur des éléments de la boucle doit battre la règle du CSS coeur de
   WooCommerce, qui met chaque produit en pourcentage flottant hérité d'une
   grille en float — 22,05% de la piste, soit une carte de 91px de large au
   lieu de 413px. Constaté en clôture D-F. Le préfixe de body ajoute la
   spécificité manquante sans toucher au CSS de WooCommerce. */
body.tax-product_brand .cuvees ul.products > li.product{ margin:0; padding:0; width:auto; float:none; list-style:none; }
.cuvees .woocommerce-pagination{ margin-top:var(--space-8); }
.cuvees .woocommerce-pagination ul{ display:flex; gap:var(--space-2); list-style:none; margin:0; padding:0; }
.cuvees .woocommerce-pagination a,
.cuvees .woocommerce-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:38px;
  border:var(--border-hair); background:var(--color-cream); font-family:var(--font-mono); font-size:var(--text-xs); text-decoration:none; color:var(--color-ink); }
.cuvees .woocommerce-pagination .current{ background:var(--color-ink); color:var(--color-cream); }

/* ── APPEL À L'ACTION ─────────────────────────────────────────────────────── */
.dom-cta__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:center; }
.dom-cta h2{ font-size:var(--text-4xl); line-height:1; margin:var(--space-5) 0 var(--space-5); }
.dom-cta h2 em{ font-style:italic; color:var(--color-bordeaux); }
.dom-cta p{ font-size:var(--text-md); line-height:1.6; color:var(--color-ink-2); max-width:36rem; }
.dom-cta__actions{ display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start; }

/* ── RESPONSIVE — 640 / 768 / 1024 ────────────────────────────────────────── */
@media (min-width:640px){
  .gallery__grid{ grid-template-columns:repeat(3,1fr); }
}

/* Deux colonnes au maximum pour les cuvées, pas trois ni quatre : la carte
   vin de D-B pose son visuel sur une colonne fixe de 128px et n'a plus assez
   de place pour son pied de prix en dessous d'environ 600px de large — les
   libellés de conditionnement et l'état du stock passent à la ligne au milieu
   d'un mot. Vérifié à la capture de clôture D-F. Un domaine a de toute façon
   un petit nombre de cuvées. */
@media (min-width:900px){
  .cuvees ul.products{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:768px){
  .dhero{ grid-template-columns:5fr 4fr; }
  .dhero__media img{ min-height:520px; }
  .dhero--sans-media{ grid-template-columns:1fr; }
  .recit__grid{ grid-template-columns:8fr 4fr; }
  .gallery__head{ grid-template-columns:7fr 5fr; }
  .dom-cta__grid{ grid-template-columns:7fr 5fr; }
  .dom-cta__actions{ flex-direction:column; align-items:stretch; }
}
@media (min-width:1024px){
  .gallery__grid{ grid-template-columns:repeat(4,1fr); }
}