/**
 * Styles spécifiques au plugin iLucid - Domaine viticole.
 *
 * Ce fichier est chargé APRÈS la CSS du thème (dépendance sur le handle
 * `custom`), ce qui permet de surcharger les règles du thème à spécificité
 * égale et de définir tous les styles propres aux éléments injectés par
 * les hooks du plugin (préfixe .dv-).
 *
 * Le thème iLucid v2 reste 100 % générique et ne contient aucune règle
 * métier viticole. Tout ce qui est spécifique vit ici.
 *
 * @package iLucid_DomaineViticole
 */

/* ───────────────────────────────────────────────
 * Card catalogue — éléments injectés par dv-shop-hooks
 * ───────────────────────────────────────────────
 * Les hooks du plugin injectent plusieurs éléments dans les cards de la
 * boucle catalogue WooCommerce (description, AOC, cépages, potentiel de
 * garde, badge type de vin, label bio). Ils sont stylés ici.
 */

/* Millésime en inline à côté du titre sur la card catalogue.
 * Injecté dans le <h2 class="woocommerce-loop-product__title"> par la
 * fonction dv_afficher_titre_loop_cuvee(). Style discret gris, plus
 * petit que le titre, collé avec une fine séparation. */
.ilucid-products .ilucid-product-card .dv-loop-millesime {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.8em;
  font-weight: 500;
  color: #6b7280;
  vertical-align: baseline;
}

/* Description courte WooCommerce sous le titre, affichée en entier.
 * L'homogénéité visuelle des cards est assurée par le CSS grid du thème
 * (chaque rangée étire ses cards à la hauteur de la plus haute). */
.ilucid-products .ilucid-product-card .dv-loop-description {
  padding: 0.5rem 1.25rem 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #4b5563;
}
.ilucid-products .ilucid-product-card .dv-loop-description p {
  margin: 0;
}

/* AOC, cépages, potentiel de garde : icône à gauche alignée en haut,
 * texte à droite qui peut s'étendre sur plusieurs lignes. */
.ilucid-products .ilucid-product-card .dv-aoc-boucle,
.ilucid-products .ilucid-product-card .dv-cepages-boucle,
.ilucid-products .ilucid-product-card .dv-garde-boucle {
  padding: 0 1.25rem;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}
.ilucid-products .ilucid-product-card .dv-aoc-boucle {
  margin-top: 0.75rem;
}

/* Container de l'icône SVG à gauche du texte meta */
.ilucid-products .ilucid-product-card .dv-loop-meta-icon {
  display: inline-flex;
  align-items: flex-start;
  flex-shrink: 0;
  color: var(--color-primary);
  /* Compense la x-height des glyphes pour un centrage optique parfait
   * avec la première ligne de texte. */
  margin-top: 0.1rem;
}

/* Badge "Type de vin" en overlay top-left de l'image.
 * Couleur de fond par défaut (fond clair translucide), surchargée plus bas
 * par les règles [data-type="..."] pour chaque type de vin. */
.ilucid-products .ilucid-product-card .dv-badge-type-vin {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  z-index: 10;
  padding: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0.375rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
}

/* Pile de labels de certification (Agriculture bio, Biodynamie Demeter,
 * Biodynamie Biodyvin, Vin méthode nature) en overlay top-right de l'image.
 * Chaque label est empilé verticalement avec 10px entre chaque.
 * Largeur fixe pour que tous les logos aient la même taille quelle que soit
 * leur ratio d'origine. */
.ilucid-products .ilucid-product-card .dv-labels-stack {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
/* aspect-ratio: auto, border-radius: 0 et background: transparent neutralisent
 * les règles appliquées par le thème sur .ilucid-product-card img (ratio 3/4,
 * coins arrondis et fond gris clair pour les placeholders). Sans cette
 * neutralisation du background, les logos de certification s'affichent sur
 * un rectangle gris #f3f4f6 au lieu de se fondre dans la photo produit. */
.ilucid-products .ilucid-product-card .dv-labels-stack .dv-label-stack__img {
  display: block;
  width: 64px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

/* Pile de récompenses (médailles/récompenses) en overlay top-left de
 * l'image, empilées verticalement sous le badge « Type de vin ».
 * Largeur fixe 64px pour homogénéiser quelle que soit l'image source. */
.ilucid-products .ilucid-product-card .dv-recompenses-stack {
  position: absolute;
  top: 3rem;
  left: 0.875rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ilucid-products .ilucid-product-card .dv-recompenses-stack .dv-recompense-stack__item {
  display: block;
  width: 64px;
  height: 64px;
  /* position: relative est déjà posée par la règle générique [data-tooltip],
   * nécessaire pour ancrer le pseudo-tooltip ::after au-dessus de l'item. */
}
.ilucid-products .ilucid-product-card .dv-recompenses-stack .dv-recompense-stack__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.ilucid-products .ilucid-product-card .dv-recompenses-stack .dv-recompense-stack__img {
  display: block;
  width: 64px;
  height: 64px;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

/* Badge « +N » affiché en bas de la pile boucle quand le cap à 3 icônes
 * est dépassé. Sobre, contraste suffisant pour rester lisible sur photo
 * produit. position: relative est posée par la règle générique [data-tooltip]. */
.ilucid-products .ilucid-product-card .dv-recompenses-stack .dv-recompense-stack__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 32px;
  background: rgba(17, 24, 39, 0.85);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.375rem;
}

/* ───────────────────────────────────────────────
 * Badge "Type de vin" — couleurs dynamiques par type
 * ───────────────────────────────────────────────
 * L'attribut data-type contient le slug du terme de la taxonomie type_vin.
 * Ces règles surchargent la couleur par défaut ci-dessus selon le type.
 */

.ilucid-products .ilucid-product-card .dv-badge-type-vin[data-type="rouge"] {
    background: #722f37; /* Bordeaux */
    color: #ffffff;
}

.ilucid-products .ilucid-product-card .dv-badge-type-vin[data-type="blanc"] {
    background: #f3e8b6; /* Jaune paille */
    color: #5b4a00;
}

.ilucid-products .ilucid-product-card .dv-badge-type-vin[data-type="rose"],
.ilucid-products .ilucid-product-card .dv-badge-type-vin[data-type="rosé"] {
    background: #e8a5a5; /* Rose pâle */
    color: #5a1a1a;
}

.ilucid-products .ilucid-product-card .dv-badge-type-vin[data-type="petillant-naturel"],
.ilucid-products .ilucid-product-card .dv-badge-type-vin[data-type="pet-nat"] {
    background: #c5d9dc; /* Bleu-gris clair */
    color: #1f3a40;
}

.ilucid-products .ilucid-product-card .dv-badge-type-vin[data-type="effervescent"] {
    background: #d7d7d7; /* Argent */
    color: #2b2b2b;
}

.ilucid-products .ilucid-product-card .dv-badge-type-vin[data-type="vin-doux-naturel"] {
    background: #c88a3a; /* Ambre */
    color: #ffffff;
}

.ilucid-products .ilucid-product-card .dv-badge-type-vin[data-type="vin-de-liqueur"] {
    background: #6d3b12; /* Ambre foncé */
    color: #ffffff;
}

/* ───────────────────────────────────────────────
 * Fiche produit single — millésime inline dans le titre + masquage du dropdown
 * ───────────────────────────────────────────────
 * Injecté dans le <h1 class="product_title"> par la fonction
 * dv_afficher_titre_single_cuvee(). Style discret gris, plus petit que
 * le titre, inline pour rester sur la même ligne. */
.single-product .product_title .dv-single-millesime {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.65em;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 0;
  vertical-align: baseline;
}

/* Masquage de la ligne du dropdown de variation quand une seule valeur
 * est disponible. On masque la row complète du tableau de variations
 * (label + select), pas uniquement le <select>, pour ne pas laisser un
 * libellé orphelin. Le select reste dans le DOM pour que WC puisse
 * initialiser les variations. */
.single-product table.variations tr:has(.dv-variation-dropdown--hidden) {
  display: none;
}

/* ───────────────────────────────────────────────
 * Sections injectées sous la fiche produit
 * ───────────────────────────────────────────────
 * Les hooks dv-product-hooks.php injectent plusieurs <section> sur
 * woocommerce_after_single_product_summary (dégustation, composition,
 * fiche technique, recompenses). Elles utilisent la classe générique
 * .ilucid-product-band du thème pour le fond full-width + inner max-w-7xl,
 * et les classes .ilucid-product-band--light / --muted alternent les
 * couleurs de fond pour un rythme visuel sur la fiche.
 *
 * Les règles ci-dessous ne stylent que le CONTENU spécifique métier de
 * chaque section (grilles, dégustation, assemblage, etc.). Le chrome
 * (fond, padding, largeur, titre) est géré par le thème.
 */

/* Section Dégustation : 3 cards côte à côte (vue / nez / bouche) */
.dv-degustation__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .dv-degustation__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.dv-degustation__item {
  padding: 1.5rem;
  background: #f7f7f7;
  border-left: 4px solid var(--color-accent);
  border-radius: 0.5rem;
}
.ilucid-product-band--muted .dv-degustation__item {
  background: #ffffff;
}
.dv-degustation__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.005em;
}
.dv-degustation__icon {
  display: inline-flex;
  color: var(--color-primary);
}
.dv-degustation__texte {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #374151;
}

/* Accords + Assemblage sous les 3 cards Vue/Nez/Bouche */
/* Accords mets & vins : bloc unique pleine largeur sous les 3 cards */
.dv-degustation__composition {
  margin-top: 2rem;
}
.dv-degustation__composition-item {
  padding: 1.5rem;
  background: #f7f7f7;
  border-left: 4px solid var(--color-primary);
  border-radius: 0.5rem;
}
.ilucid-product-band--muted .dv-degustation__composition-item {
  background: #ffffff;
}
.dv-degustation__composition-label {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #111827;
}
.dv-degustation__composition-texte {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #374151;
}

/* Section Fiche technique : grille 3 colonnes de classifications */
.dv-fiche-technique__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .dv-fiche-technique__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 3rem;
  }
}
.dv-fiche-technique__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e5e7eb;
}
.dv-fiche-technique__label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin: 0;
}
.dv-fiche-technique__value {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
  line-height: 1.4;
}
.dv-fiche-technique__sep {
  color: #d1d5db;
  margin: 0 0.25rem;
}


/* Bandeau "Produits similaires" et "Upsells" sur la fiche single :
 * les cards héritent automatiquement de .ilucid-product-card grâce à
 * lld_shop_loop_item_classes() du thème qui ajoute la classe sur TOUS
 * les produits WC (pas seulement la boutique). Toutes les règles
 * .ilucid-products .ilucid-product-card .dv-* définies plus haut dans
 * ce fichier s'appliquent donc automatiquement aux cards related et
 * upsells — aucune duplication de CSS nécessaire. */

/* ───────────────────────────────────────────────
 * Fiche produit single — overlay badge + labels sur l'image
 * ───────────────────────────────────────────────
 * Reprend les styles de la boucle mais scopés sur la galerie WC
 * de la fiche single. */

.single-product .woocommerce-product-gallery .dv-badge-type-vin {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  z-index: 10;
  padding: 0.35rem 0.8rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0.375rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
}

.single-product .woocommerce-product-gallery .dv-labels-stack {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.single-product .woocommerce-product-gallery .dv-labels-stack .dv-label-stack__img {
  display: block;
  width: 72px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

/* Pile de récompenses en overlay top-left, sous le badge « Type de vin ». */
.single-product .woocommerce-product-gallery .dv-recompenses-stack {
  position: absolute;
  top: 3.5rem;
  left: 0.875rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.single-product .woocommerce-product-gallery .dv-recompenses-stack .dv-recompense-stack__item {
  display: block;
  width: 64px;
  height: 64px;
  /* position: relative est déjà posée par la règle générique [data-tooltip],
   * nécessaire pour ancrer le pseudo-tooltip ::after au-dessus de l'item. */
}
.single-product .woocommerce-product-gallery .dv-recompenses-stack .dv-recompense-stack__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.single-product .woocommerce-product-gallery .dv-recompenses-stack .dv-recompense-stack__img {
  display: block;
  width: 64px;
  height: 64px;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

/* Variantes de couleur badge — reprend le vocabulaire des cards */
.single-product .woocommerce-product-gallery .dv-badge-type-vin[data-type="rouge"]              { background: #722f37; color: #ffffff; }
.single-product .woocommerce-product-gallery .dv-badge-type-vin[data-type="blanc"]              { background: #f3e8b6; color: #5b4a00; }
.single-product .woocommerce-product-gallery .dv-badge-type-vin[data-type="rose"],
.single-product .woocommerce-product-gallery .dv-badge-type-vin[data-type="rosé"]               { background: #e8a5a5; color: #5a1a1a; }
.single-product .woocommerce-product-gallery .dv-badge-type-vin[data-type="petillant-naturel"],
.single-product .woocommerce-product-gallery .dv-badge-type-vin[data-type="pet-nat"]            { background: #c5d9dc; color: #1f3a40; }
.single-product .woocommerce-product-gallery .dv-badge-type-vin[data-type="effervescent"]       { background: #d7d7d7; color: #2b2b2b; }
.single-product .woocommerce-product-gallery .dv-badge-type-vin[data-type="vin-doux-naturel"]   { background: #c88a3a; color: #ffffff; }
.single-product .woocommerce-product-gallery .dv-badge-type-vin[data-type="vin-de-liqueur"]     { background: #6d3b12; color: #ffffff; }

/* Bouton téléchargement PDF — inline dans le titre Fiche technique */
.dv-pdf-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 1rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: 0.375rem;
  text-decoration: none;
  vertical-align: middle;
  transition: background-color 0.2s, color 0.2s;
}
.dv-pdf-download-btn:hover,
.dv-pdf-download-btn:focus-visible,
a.dv-pdf-download-btn:hover,
a.dv-pdf-download-btn:focus-visible {
  background: var(--color-primary);
  color: #ffffff;
}
/* Icône SVG (download) suit la couleur du texte au hover */
.dv-pdf-download-btn svg {
  fill: currentColor;
  stroke: currentColor;
  transition: fill 0.2s, stroke 0.2s;
}
.dv-pdf-download-btn:hover svg,
.dv-pdf-download-btn:focus-visible svg {
  fill: #ffffff;
  stroke: #ffffff;
}