/* ============================================================================
   Costume Privé Paris — Blog bottom redesign v3 (24/04/2026)
   Plan atomique 10 étapes, validation visuelle entre chaque.
   Spécificité 0,2,1+ partout. Zéro !important.
   ============================================================================ */

:root {
  --cpb-navy: #1a1a2e;
  --cpb-gold: #c9a96e;
  --cpb-gold-soft: #e8d8b8;
  --cpb-cream: #fafaf9;
  --cpb-line: #e8e3d8;
  --cpb-text: #1a1a2e;
  --cpb-muted: #6b6b6b;
}

/* ============================================================================
   ÉTAPE C — Bouton submit commentaire luxe (P0)
   Cible : .ybc_comment_form_blog .blog-submit .button (spécificité 0,3,1)
   Origine bug : detail_post.css:776 → background #2fb5d2 (sky-blue Bootstrap)
   ============================================================================ */
.ybc_comment_form_blog .blog-submit .button,
.ybc-blog-wrapper-comment .blog-submit .button,
.ybc-blog-wrapper-comment input[name="bcsubmit"] {
  background: var(--cpb-navy);
  color: var(--cpb-cream);
  border: 1px solid var(--cpb-gold);
  padding: 14px 32px;
  border-radius: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease, transform 200ms ease;
  box-shadow: none;
  text-shadow: none;
  width: auto;
  height: auto;
  line-height: 1.4;
}

.ybc_comment_form_blog .blog-submit .button:hover,
.ybc-blog-wrapper-comment .blog-submit .button:hover,
.ybc-blog-wrapper-comment input[name="bcsubmit"]:hover {
  background: var(--cpb-gold);
  color: var(--cpb-navy);
  border-color: var(--cpb-gold);
  transform: translateY(-1px);
}

.ybc_comment_form_blog .blog-submit .button:active {
  transform: translateY(0);
}

/* ============================================================================
   ÉTAPE D — Boutons poll Oui/Non luxe (P0)
   Origine bug : detail_post.css:1326 (#dcb5af pink) + 1345 (#30b1a6 teal)
   Cible : .form-polls .polls-title label[for^="polls_post_"] (spéc 0,3,1)
   ============================================================================ */
.form-polls .polls-title label[for^="polls_post_"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  margin: 0 6px;
  background: #ffffff;
  border: 1px solid var(--cpb-line);
  border-radius: 0;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cpb-navy);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  box-shadow: none;
}

/* Bouton Oui : navy + gold au hover */
.form-polls .polls-title label[for="polls_post_1"] {
  background: var(--cpb-navy);
  color: var(--cpb-cream);
  border-color: var(--cpb-navy);
}
.form-polls .polls-title label[for="polls_post_1"]:hover {
  background: var(--cpb-gold);
  color: var(--cpb-navy);
  border-color: var(--cpb-gold);
}

/* Bouton Non : outline navy + navy fill au hover */
.form-polls .polls-title label[for="polls_post_0"] {
  background: transparent;
  color: var(--cpb-navy);
  border-color: var(--cpb-navy);
}
.form-polls .polls-title label[for="polls_post_0"]:hover {
  background: var(--cpb-navy);
  color: var(--cpb-cream);
  border-color: var(--cpb-navy);
}

/* SVG icons des boutons : taille uniforme + couleur héritée */
.form-polls .polls-title label[for^="polls_post_"] svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* Compteurs (0) : opacité légère */
.form-polls .polls-title label[for^="polls_post_"] span[id^="polls_post_helpful_"] {
  font-weight: 400;
  opacity: 0.8;
  margin-left: 4px;
}


/* ============================================================================
   ÉTAPE H — Flèches Slick reposition + redesign luxe (P0)
   Origine bug : detail_post.css:177 top:26px (fixé haut, pas centré)
   Cibles :
     #ybc-blog-related-products .blog-product-list button.slick-arrow (1,1,2)
     .ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow (0,2,2)
     .ybc-blog-related-posts .blog_type_slider button.slick-arrow (0,2,2)
   Natif YBC : 0,1,1 ou 0,2,0 → largement battu.
   ============================================================================ */

#ybc-blog-related-products .blog-product-list button.slick-arrow,
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow,
.ybc-blog-related-posts .blog_type_slider button.slick-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: #ffffff;
  border: 1px solid var(--cpb-line);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(26, 26, 46, 0.10);
  z-index: 10;
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 1;
}

#ybc-blog-related-products .blog-product-list button.slick-arrow:hover,
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow:hover,
.ybc-blog-related-posts .blog_type_slider button.slick-arrow:hover {
  background: var(--cpb-gold);
  border-color: var(--cpb-gold);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 8px 22px rgba(201, 169, 110, 0.35);
}

#ybc-blog-related-products .blog-product-list button.slick-arrow::before,
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow::before,
.ybc-blog-related-posts .blog_type_slider button.slick-arrow::before {
  font-family: "slick";
  font-size: 20px;
  color: var(--cpb-navy);
  opacity: 1;
  line-height: 1;
  transition: color 250ms ease;
}

#ybc-blog-related-products .blog-product-list button.slick-arrow:hover::before,
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow:hover::before,
.ybc-blog-related-posts .blog_type_slider button.slick-arrow:hover::before {
  color: #ffffff;
}

/* Positions gauche/droite : offset hors cards pour meilleure visibilite */
#ybc-blog-related-products .blog-product-list button.slick-prev,
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-prev,
.ybc-blog-related-posts .blog_type_slider button.slick-prev {
  left: -24px;
}

#ybc-blog-related-products .blog-product-list button.slick-next,
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-next,
.ybc-blog-related-posts .blog_type_slider button.slick-next {
  right: -24px;
}


/* ============================================================================
   ÉTAPE H — Override !important natif (detail_post.css avait !important sur
   border-radius:0 + autres props slick-arrow). On met !important ciblé sur
   les seules props bloquees.
   ============================================================================ */
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow,
.ybc-blog-related-posts .blog_type_slider button.slick-arrow,
#ybc-blog-related-products .blog-product-list button.slick-arrow {
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  background: #ffffff !important;
  border: 1px solid var(--cpb-line) !important;
  float: none !important;
}


/* ============================================================================
   ÉTAPE H — Fine-tuning vertical : ancrer flèches sur centre VISUEL des cards.
   Le parent slick-slider contient padding+autres → top:50% mal centre.
   Solution : positionner par rapport au slick-list qui contient SEULEMENT
   les slides, via offset top calque CARD VISUAL CENTER.
   ============================================================================ */
.ybc-blog-related-posts .ybc-blog-related-posts-list {
  position: relative !important;
}

.ybc-blog-related-posts .ybc-blog-related-posts-list .slick-list {
  position: relative !important;
}

/* Les arrows sont siblings de slick-list dans le slick-slider parent.
   On les positionne par rapport au slick-slider, mais on offset le top
   pour qu elles soient au centre VISUEL des cards (qui sont DANS slick-list).
   Solution propre : utiliser calc avec slick-list height.
   Mais plus simple : ajuster top/transform pour shifter la moitie de la difference */

/* Via valeur calculee : top de slick-list par rapport au slick-slider est ~0,
   et height de slick-list matche les cards. Donc top:50% de slick-list serait
   le bon centre. On offset notre top calc en gardant translateY -50%. */
.ybc-blog-related-posts .ybc-blog-related-posts-list .slick-list ~ button.slick-arrow,
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow {
  top: calc(50% + 0px) !important;
}

/* Pour produits, meme principe avec selector different */
#ybc-blog-related-products .blog-product-list button.slick-arrow {
  top: calc(50% + 0px) !important;
}


/* ============================================================================
   ÉTAPE H bis — Centrer chevron + decaler arrows hors des cards (24/04)
   Probleme 1 : detail_post.css force le ::before a position:absolute top:8px left:33px
   Probleme 2 : arrows -24px overlap avec premiere/derniere card
   ============================================================================ */

/* Centrer le chevron dans le cercle : reset position natif + flex parent */
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow::before,
.ybc-blog-related-posts .blog_type_slider button.slick-arrow::before,
#ybc-blog-related-products .blog-product-list button.slick-arrow::before {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  line-height: 1 !important;
}

/* Decaler arrows plus a l exterieur pour ne pas chevaucher les cards */
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-prev,
.ybc-blog-related-posts .blog_type_slider button.slick-prev,
#ybc-blog-related-products .blog-product-list button.slick-prev {
  left: -56px !important;
}

.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-next,
.ybc-blog-related-posts .blog_type_slider button.slick-next,
#ybc-blog-related-products .blog-product-list button.slick-next {
  right: -56px !important;
}


/* ============================================================================
   ÉTAPE H ter — Remplacer les chevrons Slick natifs par des SVG inline (24/04)
   Fix : position:relative override avait fait disparaitre les chevrons.
   Solution : injecter chevrons via background-image SVG, masquer le ::before natif.
   ============================================================================ */

/* Masquer le chevron natif YBC */
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow::before,
.ybc-blog-related-posts .blog_type_slider button.slick-arrow::before,
#ybc-blog-related-products .blog-product-list button.slick-arrow::before {
  content: "" !important;
  display: none !important;
}

/* Chevron SVG inline en background centré */
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-prev,
.ybc-blog-related-posts .blog_type_slider button.slick-prev,
#ybc-blog-related-products .blog-product-list button.slick-prev {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231a1a2e%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><polyline points=%2715 18 9 12 15 6%27/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  background-color: #ffffff !important;
}

.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-next,
.ybc-blog-related-posts .blog_type_slider button.slick-next,
#ybc-blog-related-products .blog-product-list button.slick-next {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231a1a2e%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><polyline points=%279 18 15 12 9 6%27/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  background-color: #ffffff !important;
}

/* Hover : chevron passe en cream sur fond gold */
.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-prev:hover,
.ybc-blog-related-posts .blog_type_slider button.slick-prev:hover,
#ybc-blog-related-products .blog-product-list button.slick-prev:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><polyline points=%2715 18 9 12 15 6%27/></svg>") !important;
  background-color: #c9a96e !important;
}

.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-next:hover,
.ybc-blog-related-posts .blog_type_slider button.slick-next:hover,
#ybc-blog-related-products .blog-product-list button.slick-next:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><polyline points=%279 18 15 12 9 6%27/></svg>") !important;
  background-color: #c9a96e !important;
}


/* ============================================================================
   ÉTAPE I — État disabled des fleches Slick (P0)
   Quand Slick atteint un bord (infinite:false), il ajoute .slick-disabled
   sur la fleche concernee. On la grise mais garde visible pour coherence UX.
   ============================================================================ */

.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow.slick-disabled,
.ybc-blog-related-posts .blog_type_slider button.slick-arrow.slick-disabled,
#ybc-blog-related-products .blog-product-list button.slick-arrow.slick-disabled {
  opacity: 0.35 !important;
  cursor: default !important;
  pointer-events: none !important;
  background-color: #ffffff !important;
}

.ybc-blog-related-posts .ybc-blog-related-posts-list button.slick-arrow.slick-disabled:hover,
.ybc-blog-related-posts .blog_type_slider button.slick-arrow.slick-disabled:hover,
#ybc-blog-related-products .blog-product-list button.slick-arrow.slick-disabled:hover {
  background-color: #ffffff !important;
  border-color: var(--cpb-line) !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 6px 18px rgba(26, 26, 46, 0.10) !important;
}


/* ============================================================================
   ÉTAPE F — Description articles 3 lignes (P1)
   Actuellement 1 ligne tronquee. Cible : .blog_description ou
   .ybc_blog_content_block_item_description
   ============================================================================ */

.ybc_blog_content_block_item .blog_description,
.ybc_blog_content_block_item .ybc_blog_content_block_item_description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Raleway", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cpb-muted);
  margin: 0;
  padding: 8px 18px 12px;
  min-height: 60px;
}


/* ÉTAPE F bis — display:flow-root du theme override mon -webkit-box */
.ybc_blog_content_block_item .blog_description,
.ybc_blog_content_block_item .ybc_blog_content_block_item_description {
  display: -webkit-box !important;
}


/* ============================================================================
   ÉTAPE G — Cards produits associes : hauteurs uniformes + clamp titre (P1)
   Probleme : titre 1 ligne vs 3 lignes -> cards hauteur differente
   Solution : flex column sur right-block + clamp titre h5 a 2 lignes
   ============================================================================ */

/* Force cards en flex column pour aligner */
#ybc-blog-related-products .ajax_block_product .product-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Right-block flex column avec min-height pour homogeneiser */
#ybc-blog-related-products .ajax_block_product .right-block {
  display: flex;
  flex-direction: column;
  min-height: 130px;
  padding: 16px 14px 18px;
  text-align: center;
  flex: 1;
}

/* Titre h5 : clamp 2 lignes max */
#ybc-blog-related-products .ajax_block_product .right-block h5 {
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cpb-navy);
  line-height: 1.4;
  margin: 0 0 12px 0;
  min-height: 36px;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#ybc-blog-related-products .ajax_block_product .right-block h5 a {
  color: inherit;
  text-decoration: none;
}

/* Prix gold accent en bas */
#ybc-blog-related-products .ajax_block_product .right-block .content_price,
#ybc-blog-related-products .ajax_block_product .right-block .price {
  font-family: "Cormorant", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--cpb-gold);
  margin-top: auto;
}


/* ============================================================================
   ÉTAPE B — Titres sections : Cormorant + eyebrow gold + filet (P2)
   Cibles : 3 H4 differents (#ybc-blog-related-products, .ybc_comment_form_blog,
            .ybc-blog-related-posts)
   ATTENTION : NE PAS reutiliser flex stretch qui avait casse le H4 commentaire
   ============================================================================ */

#ybc-blog-related-products > h4.title_blog,
.ybc_comment_form_blog > h4.title_blog,
.ybc-blog-related-posts > h4.title_blog {
  font-family: "Cormorant", Georgia, serif !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 600 !important;
  color: var(--cpb-navy) !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
  height: auto !important;
  max-height: 200px !important;
  line-height: 1.2 !important;
}

/* Eyebrow ::before */
#ybc-blog-related-products > h4.title_blog::before {
  content: "Vous pourriez aussi aimer" !important;
  display: block !important;
  font-family: "Raleway", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--cpb-gold) !important;
  margin: 0 0 14px 0 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

.ybc-blog-related-posts > h4.title_blog::before {
  content: "À explorer aussi" !important;
  display: block !important;
  font-family: "Raleway", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--cpb-gold) !important;
  margin: 0 0 14px 0 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

.ybc_comment_form_blog > h4.title_blog::before {
  content: "Votre voix compte" !important;
  display: block !important;
  font-family: "Raleway", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--cpb-gold) !important;
  margin: 0 0 14px 0 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* Filet gold ::after */
#ybc-blog-related-products > h4.title_blog::after,
.ybc_comment_form_blog > h4.title_blog::after,
.ybc-blog-related-posts > h4.title_blog::after {
  content: "" !important;
  display: block !important;
  width: 48px !important;
  height: 1px !important;
  background: var(--cpb-gold) !important;
  margin: 18px auto 0 !important;
  position: static !important;
}

/* ============================================================================
   ÉTAPE A — Spacing inter-sections (P2)
   ============================================================================ */
#ybc-blog-related-products,
.ybc-blog-wrapper-comment,
.ybc-blog-related-posts,
.form-polls {
  margin-top: 64px !important;
  padding: 48px 0 !important;
}

/* Premier element (form-polls) sans top margin double */
.form-polls {
  margin-top: 32px !important;
}


/* ============================================================================
   ÉTAPE B fix — Le H4 commentaire prend 200px (mon max-height fait office de
   height dans flex parent du theme YBC). Retirer max-height + forcer parent
   en display block pour que H4 prenne taille naturelle.
   ============================================================================ */

.ybc_comment_form_blog {
  display: block !important;
  flex-direction: initial !important;
}

.ybc_comment_form_blog > h4.title_blog {
  max-height: none !important;
  height: auto !important;
  flex: initial !important;
  align-self: auto !important;
}


/* ============================================================================
   ÉTAPE B fix bis — ::before du H4 commentaire prend 655px (theme YBC le force).
   Override avec height auto sur ::before/::after.
   ============================================================================ */

#ybc-blog-related-products > h4.title_blog::before,
.ybc_comment_form_blog > h4.title_blog::before,
.ybc-blog-related-posts > h4.title_blog::before {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#ybc-blog-related-products > h4.title_blog::after,
.ybc_comment_form_blog > h4.title_blog::after,
.ybc-blog-related-posts > h4.title_blog::after {
  height: 1px !important;
  min-height: 0 !important;
  max-height: 1px !important;
}


/* ============================================================================
   ÉTAPE B fix final — Retirer les ::before (eyebrows) qui sont forces a
   655px par le theme YBC (bug irreductible meme avec !important).
   On garde juste Cormorant titre + filet gold ::after.
   ============================================================================ */

#ybc-blog-related-products > h4.title_blog::before,
.ybc_comment_form_blog > h4.title_blog::before,
.ybc-blog-related-posts > h4.title_blog::before {
  content: none !important;
  display: none !important;
}


/* ============================================================================
   ÉTAPE B fix nuclear — Force display:table sur le H4 commentaire qui ignore
   tous les height:auto. Le display:table calcule la hauteur differemment et
   ignore les hauteurs fantomes.
   ============================================================================ */

.ybc_comment_form_blog > h4.title_blog {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}


/* ============================================================================
   ÉTAPE G2 — Card hover : shadow + image zoom SANS flicker
   ANTI-FLICKER : zero transform sur la card. Box-shadow seulement.
   Image scale: contenue par overflow:hidden parent + position:absolute.
   ============================================================================ */

/* Cards produits : transition box-shadow */
#ybc-blog-related-products .ajax_block_product {
  transition: box-shadow 350ms ease, border-color 350ms ease;
  cursor: pointer;
}

#ybc-blog-related-products .ajax_block_product:hover {
  box-shadow: 0 14px 40px rgba(26, 26, 46, 0.12);
}

/* Image scale au hover : sur img seule, contenue par left-block overflow:hidden */
#ybc-blog-related-products .ajax_block_product .left-block {
  overflow: hidden;
}

#ybc-blog-related-products .ajax_block_product .left-block img {
  transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}

#ybc-blog-related-products .ajax_block_product:hover .left-block img {
  transform: scale(1.05);
}

/* Cards articles similaires : meme pattern */
.ybc_blog_content_block_item {
  transition: box-shadow 350ms ease, border-color 350ms ease;
}

.ybc_blog_content_block_item:hover {
  box-shadow: 0 14px 40px rgba(26, 26, 46, 0.12);
}

.ybc_blog_content_block_item > a.ybc_item_img,
.ybc_blog_content_block_item > a.ybc_item_img_ladyload {
  overflow: hidden;
}

.ybc_blog_content_block_item img {
  transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}

.ybc_blog_content_block_item:hover img {
  transform: scale(1.05);
}


/* ============================================================================
   ÉTAPE G3 — Card borders refinees : transparent au repos, gold-soft au hover
   ============================================================================ */

#ybc-blog-related-products .ajax_block_product,
.ybc_blog_content_block_item {
  border: 1px solid transparent !important;
  background: #ffffff;
  border-radius: 4px;
}

#ybc-blog-related-products .ajax_block_product:hover,
.ybc_blog_content_block_item:hover {
  border-color: var(--cpb-gold-soft) !important;
}


/* ============================================================================
   ÉTAPE G4 — CTA reveal au hover : "Voir le produit" / "Lire l article"
   Injection via pseudo-element ::after sur la card produit (et article).
   Au repos : invisible (opacity 0). Au hover : fade in + slide up.
   ============================================================================ */

/* Setup : card en position relative pour ancrer le CTA */
#ybc-blog-related-products .ajax_block_product {
  position: relative !important;
}

/* CTA produit injecte via ::after */
#ybc-blog-related-products .ajax_block_product::after {
  content: "Voir le produit";
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cpb-gold);
  border-bottom: 1px solid var(--cpb-gold);
  padding-bottom: 2px;
  opacity: 0;
  transition: opacity 350ms ease, transform 350ms ease;
  pointer-events: none;
  white-space: nowrap;
}

#ybc-blog-related-products .ajax_block_product:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Espace pour le CTA en bas de la right-block */
#ybc-blog-related-products .ajax_block_product .right-block {
  padding-bottom: 36px !important;
}


/* ============================================================================
   ÉTAPE E — Background poll cream + border-top gold (P1)
   Cible : .form-polls (spec 0,1,0)
   ============================================================================ */

.form-polls {
  background: var(--cpb-cream) !important;
  border: 1px solid var(--cpb-line) !important;
  border-top: 2px solid var(--cpb-gold) !important;
  border-radius: 4px !important;
  padding: 32px !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.form-polls .polls-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.form-polls .polls-title > span:first-child {
  font-family: "Cormorant", Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--cpb-navy) !important;
  margin-right: 8px !important;
}

/* ============================================================================
   ÉTAPE J — Fallback image manquante via pseudo-element :has()
   Cible : .ybc_blog_content_block_item sans a.ybc_item_img
   ============================================================================ */

.ybc_blog_content_block_item:not(:has(a.ybc_item_img)):not(:has(a.ybc_item_img_ladyload))::before {
  content: "CP" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  background: linear-gradient(135deg, var(--cpb-cream) 0%, var(--cpb-gold-soft) 100%) !important;
  font-family: "Cormorant", Georgia, serif !important;
  font-size: 56px !important;
  font-weight: 600 !important;
  color: var(--cpb-gold) !important;
  letter-spacing: 0.06em !important;
  opacity: 0.55 !important;
  flex-shrink: 0 !important;
  border-bottom: 1px solid var(--cpb-line) !important;
  order: -1 !important;
}


/* ============================================================================
   ÉTAPE K — Fix cards produits collees + debordement (24/04 fin journee)
   Probleme 1 : cards margin 0 -> collees ensemble
   Probleme 2 : .blog-product-list deborde de 15px a gauche du wrapper
   Probleme 3 : track display block (pas flex) -> justify-content ignore
   Solution : padding interne sur cards via box-sizing + container centre
   ============================================================================ */

/* Container produits associes : padding lateral pour rentrer dans wrapper */
#ybc-blog-related-products .blog-product-list {
  padding: 0 60px !important;
  margin: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Cards : padding interne via box-sizing pour creer du gap entre cards
   sans casser le calcul de width de Slick */
#ybc-blog-related-products .ajax_block_product {
  padding: 0 12px !important;
  box-sizing: border-box !important;
}

#ybc-blog-related-products .ajax_block_product .product-container {
  border: 1px solid var(--cpb-line) !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* On rebascule les hover effects sur le product-container interne au lieu de la card */
#ybc-blog-related-products .ajax_block_product {
  border: none !important;
  background: transparent !important;
  transition: none !important;
}

#ybc-blog-related-products .ajax_block_product .product-container {
  transition: box-shadow 350ms ease, border-color 350ms ease !important;
}

#ybc-blog-related-products .ajax_block_product:hover .product-container {
  box-shadow: 0 14px 40px rgba(26, 26, 46, 0.12) !important;
  border-color: var(--cpb-gold-soft) !important;
}


/* ============================================================================
   ÉTAPE K bis — Centrer track Slick horizontalement quand peu de produits
   Quand 3 items dans slidesToShow:4, Slick laisse 1 slot vide a droite.
   Solution : forcer track en flex justify-center qui centre les items visibles.
   Si jamais 5+ items, le scroll Slick continuera de fonctionner via les fleches
   (qui seront affichees automatiquement par Slick).
   ============================================================================ */

#ybc-blog-related-products .slick-track {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  margin: 0 auto !important;
  width: 100% !important;
  transform: none !important;
}