/* ============================================================
   FRENCHFILLER.COM — CSS REFONTE v2.8 — CONSOLIDÉ ET NETTOYÉ
   1. Titres (Cormorant Garamond)
   2. Boutons primaires (or sable)
   3. Footer (noir + accents dorés)
   4. Bouton "Ajouter au panier" (sous le prix sur desktop)
   5. Bandeau info top : beige clair + texte enrichi (gras/souligné/rouge)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');

:root {
  --ff2-noir: #111111;
  --ff2-or: #C9A96E;
  --ff2-or-dark: #A88749;
  --ff2-beige: #F5F1EC;
  --ff2-rouge: #CC0000;
  --ff2-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ========== 1. TITRES ========== */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.page-title, .section-title, .products-section-title,
.product-title, .product-title a, .category-title {
  font-family: var(--ff2-font-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.product-price-and-shipping .price,
.product-price, .current-price, .price.current-price {
  font-family: var(--ff2-font-serif) !important;
  font-weight: 500 !important;
}

/* ========== 2. BOUTONS PRIMAIRES — OR ========== */
.btn-primary, .button-primary, button.btn-primary,
button[type="submit"].btn-primary,
.add-to-cart, .btn.add-to-cart {
  background-color: var(--ff2-or) !important;
  color: var(--ff2-noir) !important;
  border-color: var(--ff2-or) !important;
  border-radius: 0 !important;
}

.btn-primary:hover, .button-primary:hover, button.btn-primary:hover,
.add-to-cart:hover, .btn.add-to-cart:hover {
  background-color: var(--ff2-or-dark) !important;
  color: #FFFFFF !important;
  border-color: var(--ff2-or-dark) !important;
}

/* ========== 3. FOOTER — NOIR ========== */
#footer, .page-footer, .footer-container {
  background-color: var(--ff2-noir) !important;
  color: rgba(255,255,255,0.7) !important;
}

#footer a, .page-footer a, .footer-container a {
  color: rgba(255,255,255,0.7) !important;
}

#footer a:hover, .page-footer a:hover, .footer-container a:hover {
  color: var(--ff2-or) !important;
}

#footer h3, #footer h4, .footer-container h3,
.footer-container h4, .block_newsletter h3 {
  color: var(--ff2-or) !important;
  font-family: var(--ff2-font-serif) !important;
  font-weight: 500 !important;
}

/* ========== 4. CARTE PRODUIT — Bouton "Ajouter au panier" sous le prix (DESKTOP) ========== */
@media (min-width: 992px) {
  .thumbnail-container, .thumbnail-inner {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
  }

  .thumbnail-image-inner {
    position: static !important;
    order: 1 !important;
    width: 100% !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .thumbnail-sidebar-inner {
    position: static !important;
    order: 2 !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #FFFFFF !important;
    padding: 16px 18px !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .thumbnail-sidebar-inner .product-description {
    order: 1 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .thumbnail-sidebar-inner .product-title,
  .thumbnail-sidebar-inner .product-title a {
    order: 1 !important;
    margin-bottom: 10px !important;
  }

  .thumbnail-sidebar-inner .product-price-and-shipping {
    order: 2 !important;
    margin-bottom: 14px !important;
  }

  .thumbnail-sidebar-inner .addtocart-button,
  .addtocart-button {
    position: static !important;
    top: auto !important; right: auto !important;
    left: auto !important; bottom: auto !important;
    transform: none !important;
    order: 3 !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .addtocart-button .btn,
  .addtocart-button .btn-primary,
  .addtocart-button button {
    position: static !important;
    margin: 0 auto !important;
  }
}

/* ========== 5. BANDEAU INFO TOP — Beige clair, contenu remplacé par JS ========== */
#rg_infobar,
#rg_infobar > div,
#rg_infobar .container,
#rg_infobar .row {
  background-color: var(--ff2-beige) !important;
  color: var(--ff2-noir) !important;
  border-bottom: 1px solid #E8E8E8 !important;
}

/* Le contenu original sera remplacé par JS — on n'utilise PLUS de display:none ici */
#rg_infobar .col-xs-12 {
  background-color: var(--ff2-beige) !important;
  padding: 0 !important;
}

/* Style du nouveau contenu injecté par JS (.ff-infobar-content) */
.ff-infobar-content {
  background-color: var(--ff2-beige) !important;
  color: var(--ff2-noir) !important;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  padding: 12px 48px 12px 16px !important; /* padding-right pour la croix */
  font-weight: 500 !important;
  position: relative !important;
}

/* Croix de fermeture du bandeau (v3.4) */
.ff-infobar-close {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: 1px solid var(--ff2-noir, #111) !important;
  border-radius: 50% !important;
  color: var(--ff2-noir, #111) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.7 !important;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease !important;
}

.ff-infobar-close:hover,
.ff-infobar-close:active {
  opacity: 1 !important;
  background: var(--ff2-noir, #111) !important;
  color: var(--ff2-beige, #F5F1EC) !important;
}

.ff-infobar-content strong.ff-phone {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  color: var(--ff2-noir) !important;
}

.ff-infobar-content strong.ff-hours {
  color: var(--ff2-rouge) !important;
  font-weight: 700 !important;
}

@media (max-width: 767px) {
  .ff-infobar-content {
    font-size: 11px !important;
    padding: 10px 44px 10px 12px !important; /* place pour la croix */
    line-height: 1.4 !important;
  }
  .ff-infobar-content strong.ff-phone {
    font-size: 13px !important;
  }
  .ff-infobar-close {
    width: 28px !important;
    height: 28px !important;
    right: 8px !important;
    font-size: 18px !important;
  }
}

/* ============================================================
   FIN v2.8
   ============================================================ */

/* ============================================================
   v3.1 — Popup laissee visible mais facile a fermer
   ============================================================ */

/* La popup s'affiche normalement. La fermeture se fait via :
   - la croix doree (.ff-close-x) injectee par JS
   - un clic sur l'overlay (curseur main)
   - la touche Echap                                              */

.fancybox-bg,
.fancybox-overlay {
  cursor: pointer !important;
}

/* Croix de fermeture — repetee en CSS pour garantir le style meme si JS retarde */
.ff-close-x {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 40px !important;
  height: 40px !important;
  background: #FFFFFF !important;
  border: 2px solid var(--ff2-or, #C9A96E) !important;
  border-radius: 50% !important;
  color: var(--ff2-noir, #111111) !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ff-close-x:hover {
  background: var(--ff2-or, #C9A96E) !important;
  color: #FFFFFF !important;
}

/* Force la visibilite des boutons natifs de fermeture s'ils existent */
#everpspopup_block_center .fancybox-close,
#everpspopup_block_center .fancybox-button--close,
#everpspopup_block_center .fancybox-close-small,
#everpspopup_block_center .close,
[id*="everpspopup_block"] .fancybox-close,
[id*="everpspopup_block"] .fancybox-button--close,
[id*="everpspopup_block"] .fancybox-close-small,
[id*="everpspopup_block"] .close {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 99999 !important;
}

/* Empeche le contenu de deborder de l'ecran (probleme courant qui rendait la croix inatteignable) */
#everpspopup_block_center,
[id*="everpspopup_block"],
.ff-popup-detected {
  max-height: 90vh !important;
  max-width: 95vw !important;
  overflow: auto !important;
}

/* ============================================================
   FIN v3.1
   ============================================================ */

/* ============================================================
   v3.2 — Renforts pour popup auto-detection + bouton FERMER
   ============================================================ */

/* Bouton texte "FERMER" en bas — fallback si la croix n'est pas atteignable */
.ff-close-text {
  position: absolute !important;
  bottom: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--ff2-or, #C9A96E) !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 32px !important;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  z-index: 99998 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  min-height: 48px !important;
  min-width: 160px !important;
}

.ff-close-text:hover,
.ff-close-text:active {
  background: #A88749 !important;
  color: #FFFFFF !important;
}

/* Mobile : croix encore plus grosse, bouton FERMER plus visible */
@media (max-width: 767px) {
  .ff-close-x {
    width: 48px !important;
    height: 48px !important;
    font-size: 30px !important;
    top: 12px !important;
    right: 12px !important;
  }
  .ff-close-text {
    bottom: 20px !important;
    padding: 14px 36px !important;
    font-size: 15px !important;
  }
}

/* Marqueur visuel : popups detectees gardent un padding-bottom pour ne pas masquer le bouton FERMER */
.ff-popup-detected {
  padding-bottom: 80px !important;
}

/* ============================================================
   FIN v3.2
   ============================================================ */