/* Jeu 35 ans POLL-FABAIRE sur le shop domainesvinsmoselle.lu
   Barre du haut, bandeau de la page POLL-FABAIRE, bandeau de la fiche produit, badge des vignettes.
   Codes de la landing du jeu : noir velours, or feuille, titre Cormorant Garamond en deux temps (italique or).
   Texte courant dans la typo du site (gotham). Toutes les règles sont préfixées .pf35- pour ne rien toucher au thème,
   sauf les deux retouches de mise en page en fin de fichier. */

.pf35-band, .pf35-bar {
  --pf-ink: #0b0a09;
  --pf-gold: #c9a75e;
  --pf-ivory: #f2ece0;
  --pf-ivory-soft: rgba(242, 236, 224, 0.72);
  --pf-foil: linear-gradient(105deg, #8a6a2f 0%, #e9d39a 38%, #b8954f 55%, #f3e3b3 72%, #9c7a3c 100%);
  --pf-serif: 'Cormorant Garamond', 'miller-display', Georgia, serif;
  --pf-sans: gotham, Montserrat, system-ui, sans-serif;
  box-sizing: border-box;
}
.pf35-band *, .pf35-bar * { box-sizing: border-box; }

/* ---------- Bandeau commun ---------- */
.pf35-band {
  position: relative;
  border-radius: 4px; /* comme les boutons du site */
  margin: 28px 0 8px;
  background: var(--pf-ink);
  color: var(--pf-ivory);
  font-family: var(--pf-sans);
  border: 0;
  overflow: hidden;
}
.pf35-band__logo { display: block; width: 132px; height: auto; max-width: 100%; }
.pf35-band__title {
  margin: 0; font-family: var(--pf-serif); font-weight: 400; font-size: 30px; line-height: 1.08; color: var(--pf-ivory);
}
.pf35-band__title em {
  font-style: italic; background: var(--pf-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 0.06em 0.12em; margin: 0 -0.06em -0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.pf35-band__text { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--pf-ivory); }
.pf35-band__small { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--pf-ivory-soft); letter-spacing: 0.02em; }
.pf35-nowrap { white-space: nowrap; }

/* « Comment participer ? » et bouton (page POLL-FABAIRE) */
.pf35-band__how { margin: 16px 0 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--pf-gold); }
.pf35-band__text--how { margin-top: 4px; }
.pf35-band__actions { margin: 20px 0 0; }
.pf35-band__cta {
  display: inline-block; padding: 12px 22px; border-radius: 4px;
  background: var(--pf-foil); color: #1d1c1f !important; font: 600 14px/1.3 var(--pf-sans); text-decoration: none !important;
  transition: filter 0.2s ease;
}
.pf35-band__cta:hover, .pf35-band__cta:focus-visible { filter: brightness(1.08); }
.pf35-band__cta:focus-visible { outline: 2px solid var(--pf-ivory); outline-offset: 3px; }

/* Grain velours de la landing sur le noir (image passée par --pf-grain dans le style du bandeau) */
.pf35-band::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: var(--pf-grain, none); background-size: 220px; opacity: 0.075; }
.pf35-wide__inner, .pf35-v3 > * { position: relative; z-index: 1; }

/* ---------- Fiche produit : la capsule et son code, puis le texte ---------- */
.pf35-v3 { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; padding: 32px 32px 32px 24px; }
.pf35-v3__cap { justify-self: center; width: 116px !important; height: auto !important; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6)); }
.pf35-v3 .pf35-band__title { font-size: 28px; }
.pf35-v3 .pf35-band__text { margin-top: 10px; font-size: 16px; line-height: 1.55; } /* plus lisible (Julien, 13/11 ; 14 px avant) */
.pf35-v3 .pf35-band__small { margin-top: 12px; font-size: 13px; }

/* ---------- Page POLL-FABAIRE : aligné sur le conteneur du site (90 %, 1530 px au plus) ---------- */
.pf35-wide { width: 90%; max-width: 1530px; margin: 72px auto 0; }
.pf35-wide__inner { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) minmax(260px, 420px); gap: 40px; align-items: center; padding: 44px; }
.pf35-wide .pf35-band__title { font-size: 32px; }
.pf35-wide .pf35-band__text { font-size: 16px; }
/* reflet qui passe de temps en temps sur l'or feuille du titre */
.pf35-cuvees .pf35-band__title em { background-size: 250% 100%; background-position: 0% 0; animation: pf35-sheen 7s ease-in-out 1.6s infinite; }
@keyframes pf35-sheen { 0%, 70% { background-position: 0% 0; } 100% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .pf35-cuvees .pf35-band__title em { animation: none; } }

/* Logo 35 ANS centré dans sa colonne, avec des éclats sur ses étoiles */
.pf35-logo35 { position: relative; align-self: center; justify-self: center; width: 210px; line-height: 0; }
.pf35-logo35 .pf35-band__logo { width: 100% !important; height: auto !important; margin: 0 !important; }
.pf35-logo35__twinkle { position: absolute; inset: 0; pointer-events: none; }
.pf35-logo35__twinkle i {
  position: absolute; width: var(--s); aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.2); opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0, rgba(255, 246, 220, 0.75) 18%, rgba(255, 236, 190, 0) 46%),
    linear-gradient(90deg, transparent 47%, rgba(255, 250, 235, 0.95) 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255, 250, 235, 0.95) 50%, transparent 53%);
  border-radius: 50%; mix-blend-mode: screen;
  animation-name: pf35-twinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes pf35-twinkle {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
  60% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.85) rotate(60deg); }
}
@media (prefers-reduced-motion: reduce) { .pf35-logo35__twinkle { display: none; } }

/* Défilé des 11 cuvées : toute la hauteur du bloc noir, fondu sur les bords, reflet sous les bouteilles, halo chaud derrière */
.pf35-parade { position: relative; align-self: stretch; overflow: hidden; margin: -44px -44px -44px 0; min-height: 250px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.pf35-parade::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse closest-side at 50% 62%, rgba(201, 167, 94, 0.2), rgba(201, 167, 94, 0.08) 55%, rgba(201, 167, 94, 0) 100%);
}
.pf35-parade__track { position: absolute; left: 0; top: 9%; bottom: 9%; display: flex; align-items: flex-end; gap: 8px; width: max-content; animation: pf35-parade 50s linear infinite; }
.pf35-parade img {
  display: block; height: 100% !important; width: auto !important; max-width: none !important;
  -webkit-box-reflect: below 1px linear-gradient(to bottom, transparent 72%, rgba(255, 255, 255, 0.22));
}
.pf35-parade:hover .pf35-parade__track { animation-play-state: paused; }
@keyframes pf35-parade { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pf35-parade__track { animation: none; } }

/* ---------- Barre du haut, à la place de la barre verte du site ----------
   Toute la barre est un lien vers la page POLL-FABAIRE, et le défilement
   s'arrête au survol (Jérôme, 13/11). */
.pf35-bar { position: relative; display: block; background: var(--pf-ink); color: var(--pf-ivory); font-family: var(--pf-sans); font-size: 15px; height: 50px; overflow: hidden; text-decoration: none !important; }
.pf35-bar:hover, .pf35-bar:focus-visible { color: var(--pf-ivory); }
.pf35-bar:focus-visible { outline: 2px solid var(--pf-gold); outline-offset: -2px; }
.pf35-bar__track { position: absolute; top: 0; left: 0; display: flex; height: 100%; align-items: center; white-space: nowrap; animation: pf35-marquee 90s linear infinite; }
.pf35-bar:hover .pf35-bar__track, .pf35-bar:focus-visible .pf35-bar__track { animation-play-state: paused; }
.pf35-bar__item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; }
.pf35-bar__star { width: 11px; height: 11px; flex: none; }
.pf35-bar strong { font-weight: 600; color: var(--pf-gold); }
.pf35-bar__lien { color: var(--pf-ivory); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pf-gold); text-underline-offset: 4px; }
.pf35-bar:hover .pf35-bar__lien { text-decoration-color: var(--pf-ivory); }
@keyframes pf35-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pf35-bar__track { animation: none; } }

/* ---------- Badge « Jeu 35 ans POLL-FABAIRE » : vignettes produit et photo de la fiche ---------- */
.pf35-badge {
  position: absolute; z-index: 5; top: 8px; left: 8px; /* comme .badge--sale ; au-dessus de la photo, que le goulot ne le recouvre pas */
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px;
  background: linear-gradient(105deg, #8a6a2f 0%, #e9d39a 38%, #b8954f 55%, #f3e3b3 72%, #9c7a3c 100%); border: 0; color: #1d1c1f;
  font: 600 12px/1.4 gotham, Montserrat, sans-serif; letter-spacing: 0.01em; white-space: nowrap;
}
.pf35-badge .pf35-bar__star { width: 10px; height: 10px; }
.pf35-badge .pf35-bar__star path { fill: #1d1c1f; }
.badge--sale ~ .pf35-badge { top: 37px; } /* sous « Promotion » */
.pf35-badge--product { top: 12px; left: 12px; font-size: 13px; padding: 4px 9px; } /* photo de la fiche produit, comme .onsale */
.onsale ~ .pf35-badge--product { top: 41px; } /* sous « Promo ! » */

/* ---------- Petits écrans de bureau et tablettes ----------
   Sous 1440 px, les trois colonnes étouffent le texte (deux ou trois mots par
   ligne) : logo et texte côte à côte, défilé des bouteilles en pleine largeur
   dessous. */
@media (max-width: 1439px) {
  .pf35-wide { margin-top: 56px; }
  .pf35-wide__inner { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 32px; padding: 36px; }
  .pf35-wide .pf35-band__title { font-size: 30px; }
  .pf35-logo35 { width: 100%; max-width: 200px; }
  .pf35-parade { grid-column: 1 / -1; align-self: auto; height: 210px; min-height: 0; margin: 4px -36px -36px; }
  .pf35-parade__track { gap: 10px; }
}

@media (max-width: 1023px) {
  .pf35-wide__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 32px; }
  .pf35-logo35 { justify-self: center; max-width: 180px; }
  .pf35-parade { height: 190px; margin: 6px -32px -32px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .pf35-band { margin: 24px 0 4px; }
  .pf35-band__title { font-size: 26px; }
  .pf35-v3 { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  /* La marge auto du bandeau : .pf35-band ci-dessus remet les marges latérales
     à 0, d'où un bandeau collé à gauche et une bande blanche à droite. */
  .pf35-wide { width: 90%; margin: 40px auto 0; }
  .pf35-wide__inner { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; gap: 16px; }
  .pf35-wide .pf35-band__title { font-size: 28px; }
  .pf35-logo35 { width: 160px; justify-self: center; }
  /* Défilé en bas du bloc, bord à bord, comme sur tablette */
  .pf35-parade { order: 0; min-height: 0; height: 160px; margin: 12px -20px -26px; }
  .pf35-parade__track { top: 7%; bottom: 7%; gap: 6px; }
  .pf35-band__cta { display: block; text-align: center; }
  .pf35-bar { font-size: 14px; height: 44px; }
}

/* ---------- Retouches de mise en page autour du bandeau ---------- */
/* Fiche produit : espace autour du bandeau, placé sous la description courte */
.woocommerce-product-details__short-description + .pf35-band { margin: 28px 0 32px; }
/* Page POLL-FABAIRE : autant d'espace au-dessus qu'en dessous du bandeau (72 px, 40 px sur mobile),
   en réduisant la marge du haut de la liste des produits quand elle suit le bandeau */
.pf35-band + .marque-produits { padding-top: 48px !important; }
@media (max-width: 767px) { .pf35-band + .marque-produits { padding-top: 12px !important; } }
/* Fiche produit, hors bandeau : plus de soulignement sous le prix promo.
   Validé par Jérôme le 13/11, limité aux produits variables (le prix des
   produits simples garde le rendu d'origine). */
.single-product .product-type-variable .product__summary ins,
.single-product .product-type-variable .product__summary ins .amount,
.single-product .product-type-variable .product__summary ins bdi { text-decoration: none !important; }