.social-footer-bar {
  background-color: #61262A;
  padding: 20px 0;
  margin-bottom: 15px;
}

.social-footer-bar .social-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
  max-width: 100%;
}

.social-footer-bar .social-container a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: transform 0.2s ease;
}

.social-footer-bar .social-container a:hover {
  transform: scale(1.1);
}

.social-footer-bar .social-container img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 480px) {
  .social-footer-bar .social-container {
    gap: 12px;
  }

  .social-footer-bar .social-container a {
    width: 24px;
    height: 24px;
  }

  .social-footer-bar .social-container img {
    width: 100%;
    height: auto;
  }
}

/* ============================================================
   FOOTER COLONNES PHASE 1 (2026-04-22 vinabox-ui-ux-dev)
   Structure cible 4 colonnes desktop, empilé mobile.
   ============================================================ */
.footer-widgets .footer-nav-col {
  font-family: inherit;
}
.footer-widgets .footer-col-title {
  font-size: var(--vb-text-small);
  font-weight: var(--vb-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--vb-ls-wide);
  margin: 0 0 14px 0;
  color: var(--vb-jaune-500); /* or Vinabox */
}
.footer-widgets .footer-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-widgets .footer-link-list li {
  margin-bottom: 8px;
  line-height: var(--vb-lh-normal);
}
.footer-widgets .footer-link-list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-widgets .footer-link-list a:hover,
.footer-widgets .footer-link-list a:focus {
  color: var(--vb-jaune-500);
  text-decoration: underline;
}
/* Copyright propre (remplace le .copyright-bar masqué) */
.site-info .copyright-bar,
.site-info .copyright {
  display: inline-block;
  font-size: var(--vb-text-caption);
  opacity: 0.85;
}

/* =========================================================
   FAQ accordeon - filet de securite pour <details> NON styles
   Reproduit le Bloc 7 du design system (blocs-gutenberg.md)
   pour les contenus generes sans styles inline (flux /actu/).
   :not([style]) = aucun impact sur les <details style="..">
   deja brandes inline (1037 pages au 2026-06-10).
   Applique : 2026-06-10 (article temoin : VinoEuro 8671)
   ========================================================= */
.entry-content details:not([style]) {
  margin-bottom: 10px;
  border: 1px solid #d39c44;
  padding: 10px;
  border-radius: 5px;
}
.entry-content details:not([style]) > summary {
  font-weight: bold;
  color: #61262A;
  cursor: pointer;
}
.entry-content details:not([style]) > p {
  margin-top: 5px;
}

/* =========================================================
   FIX Visual QA 2026-09-02 - titres illisibles sur fond sombre
   Cause : vinabox-base.css impose color:var(--vb-fg,#151311) sur
   h4/h5 et une couleur bordeaux sur h1-h3, ce qui ecrase le
   color:white herite d un conteneur inline a fond fonce
   (ex. bloc "Carignan vs Grenache" du guide carignan : titre
   #151311 sur fond #61262A, illisible).
   Correctif : dans un conteneur qui declare explicitement une
   couleur de texte claire en inline, les titres heritent.
   Reversible : supprimer ce bloc.
   ========================================================= */
.entry-content [style*="color:white"] h1,
.entry-content [style*="color:white"] h2,
.entry-content [style*="color:white"] h3,
.entry-content [style*="color:white"] h4,
.entry-content [style*="color:white"] h5,
.entry-content [style*="color:white"] h6,
.entry-content [style*="color: white"] h1,
.entry-content [style*="color: white"] h2,
.entry-content [style*="color: white"] h3,
.entry-content [style*="color: white"] h4,
.entry-content [style*="color: white"] h5,
.entry-content [style*="color: white"] h6,
.entry-content [style*="color:#fff"] h1,
.entry-content [style*="color:#fff"] h2,
.entry-content [style*="color:#fff"] h3,
.entry-content [style*="color:#fff"] h4,
.entry-content [style*="color:#fff"] h5,
.entry-content [style*="color:#fff"] h6,
.entry-content [style*="color: #fff"] h1,
.entry-content [style*="color: #fff"] h2,
.entry-content [style*="color: #fff"] h3,
.entry-content [style*="color: #fff"] h4,
.entry-content [style*="color: #fff"] h5,
.entry-content [style*="color: #fff"] h6 {
  color: inherit;
}