/* ============================================================
   audit-fixes.css — Sprint 4.3l cycle 5 (2026-05-15)
   3 fixes UX post-audit visuel pages

   1. Share buttons article blog : refonte SVG outline brand
      (couleurs Bootstrap fb/pin/li → outline gold cohérent)
   2. Double titre /rendez-vous : H2 redondant masqué
      (le H1 page-header annonce déjà "Prendre rendez-vous")
   3. Cart wording : géré via xlf direct (pas CSS)
   ============================================================ */

/* ——— FIX 1 : Boutons partage article blog ——— */
.blog-extra-facebook-share .facebook a,
.blog-extra-facebook-share .pinterest a,
.blog-extra-facebook-share .linkedin a,
.blog-extra-facebook-share a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 1px solid var(--cpp-muted-border, #e8e4dc) !important;
  border-radius: 50% !important;
  color: var(--cpp-navy, #1d2a3a) !important;
  text-decoration: none !important;
  transition: all 200ms ease !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.blog-extra-facebook-share a:hover,
.blog-extra-facebook-share a:focus-visible {
  background: var(--cpp-navy, #1d2a3a) !important;
  border-color: var(--cpp-gold, #a17738) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.blog-extra-facebook-share a:focus-visible {
  outline: 2px solid var(--cpp-gold, #a17738) !important;
  outline-offset: 2px !important;
}

/* Hide the original text-hide spans/labels (ybc_blog uses CSS icon classes that break) */
.blog-extra-facebook-share a.text-hide {
  text-indent: 0 !important;
  font-size: 0 !important;
  overflow: hidden;
}

/* Inject SVG icons via background-image (couleur currentColor via mask) */
.blog-extra-facebook-share .facebook a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/></svg>");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.blog-extra-facebook-share .pinterest a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='20' x2='12' y2='4'/><circle cx='12' cy='10' r='5'/><line x1='10' y1='14' x2='13' y2='14'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='20' x2='12' y2='4'/><circle cx='12' cy='10' r='5'/><line x1='10' y1='14' x2='13' y2='14'/></svg>");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.blog-extra-facebook-share .linkedin a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/><rect width='4' height='12' x='2' y='9'/><circle cx='4' cy='4' r='2'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/><rect width='4' height='12' x='2' y='9'/><circle cx='4' cy='4' r='2'/></svg>");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* ——— FIX 2 : Double titre /rendez-vous ——— */
/* Le H1 .page-header annonce déjà "Prendre rendez-vous", le H2 .appointment-title est redondant */
.appointment-form-page .appointment-title,
#appointment-form .appointment-title,
.appointment-title {
  display: none !important;
}

/* Garder le sous-titre visible (Réservez votre créneau...) */
.appointment-form-page .appointment-subtitle,
.appointment-subtitle {
  margin-top: 0 !important;
}

/* ——— FIX MOBILE 375 : RDV button overlap logo ——— */
/* À viewport < 400, le bouton RDV compact chevauche le logo CP centered.
   Solution : cacher RDV sur petits mobiles — le drawer menu burger
   contient déjà "Réserver mon essayage" en CTA. Logo + burger + icons restent. */
@media (max-width: 399.98px) {
  #hv3-mobile-header .hv3-btn-rdv-compact {
    display: none !important;
  }
}

/* À viewport 400-480, garder RDV mais le rapprocher pour éviter overlap */
@media (min-width: 400px) and (max-width: 480px) {
  #hv3-mobile-header .hv3-btn-rdv-compact {
    padding-inline: 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }
}

/* Breadcrumb : éviter double séparateur (parfois Bootstrap injecte un / via ::before) */
nav.breadcrumb .breadcrumb-item + .breadcrumb-item::before,
nav.breadcrumb li + li::before {
  content: "\203A" !important;
}

/* Si Bootstrap a un séparateur par default, on l'enlève sur le premier li */
nav.breadcrumb ol > li:first-child::before {
  content: none !important;
}

/* Sprint 4.3m : Bootstrap breadcrumb-item::after "/" séparateur legacy à supprimer */
nav.breadcrumb li::after,
nav.breadcrumb .breadcrumb-item::after {
  content: none !important;
}

/* ——— Sprint 4.3o : cacher swiper-button-next/prev sur mobile <768px ———
   Bug : sur page produit mobile, hover/tap sur image principale fait apparaître
   un bouton ">" carré navy (next slide swiper). Intrusif sur mobile où le carousel
   doit utiliser swipe gestures natifs.
   Fix : hide les boutons prev/next du swiper en dessous de 768px. */
@media (max-width: 767.98px) {
  .swiper-button-next,
  .swiper-button-prev,
  .swiper-button-inner-next,
  .swiper-button-inner-prev {
    display: none !important;
  }
}