/************************************************************
 * RNF – Sélection Catégories (Front CSS)
 * Fichier : assets/css/rnf-fbc.css
 * Objectif : grille produits + onglets + nav flèches + loader
 ************************************************************/

/* ==========================================================
   0) Variables de thème (couleurs & dimensions)
   ---------------------------------------------------------- */
.rnf-fbc-wrap{
  /* Couleurs de marque Rose&Fly */
  --rnf-accent:          #a14b68;
  --rnf-accent-border:   #7a3b5a;
  --rnf-accent-contrast: #ffffff;

  /* Flèches navigation */
  --rnf-nav-size:   40px;
  --rnf-nav-offset: 25px;

  /* Gutter (espace internes) */
  --rnf-nav-gutter: calc(var(--rnf-nav-size) + var(--rnf-nav-offset) + 6px);

  /* Rythme */
  --rnf-gap-xl: 3rem;
  --rnf-gap-lg: 2.25rem;
  --rnf-gap-md: 1.5rem;
  --rnf-gap-sm: 1rem;

  /* Rose poudré (bouton) */
  --rnf-powder-bg:        #f7e6eb;
  --rnf-powder-bg-hover:  #f3d3df;
  --rnf-powder-border:    #eac9d5;
  --rnf-powder-text:      #a14b68;

  /* === Nouveau : ratio responsive (mobile d’abord) === */
  --rnf-thumb-ratio: 4/5;  /* mobile : portrait doux */
}
/* tablette & desktop : 3/4 (classique produits) */
@media (min-width: 481px){
  .rnf-fbc-wrap{ --rnf-thumb-ratio: 3/4; }
}
/* si tu veux un desktop plus paysage, passe à 4/3 ici */
/* @media (min-width: 1025px){ .rnf-fbc-wrap{ --rnf-thumb-ratio: 4/3; } } */

/* Modificateurs facultatifs par bloc (au besoin) */
.rnf-fbc-wrap.ratio-4-5{ --rnf-thumb-ratio: 4/5; }
.rnf-fbc-wrap.ratio-3-4{ --rnf-thumb-ratio: 3/4; }
.rnf-fbc-wrap.ratio-4-3{ --rnf-thumb-ratio: 4/3; }
.rnf-fbc-wrap.ratio-3-2{ --rnf-thumb-ratio: 3/2; }

/* ==========================================================
   1) Layout général & typo
   ---------------------------------------------------------- */
.rnf-fbc-wrap{ margin: 2.6rem 0; }
.rnf-fbc-heading{
  margin: 0 0 1.2rem 0;
  font-size: clamp(1.6rem, 2vw + 1rem, 3.5rem) !important;
  line-height: 1.2;
  text-align: center;
  font-weight: 600;
  letter-spacing: .01em;
  color: #7e0d0d !important;
}
.rnf-fbc-viewport{ width: 100%; }

/* ==========================================================
   2) Onglets catégories
   ---------------------------------------------------------- */
.rnf-fbc-tabs{
  display: flex; flex-wrap: wrap;
  gap: .6rem; justify-content: center;
  margin: 0 0 1.2rem;
}
.rnf-fbc-tab{
  border: 1px solid #e8e2d7; background: #fff;
  border-radius: 999px; padding: .55rem .95rem;
  cursor: pointer; font-size: .95rem; line-height: 1;
  transition: .2s; color: #4b3a2d;
}
.rnf-fbc-tab.active{ background: #f7e6eb; border-color: #eac9d5; color: var(--rnf-accent); }
@media (max-width:768px){
  .rnf-fbc-tab{ font-size:.9rem; padding:.5rem .85rem; }
}

/* ==========================================================
   3) Grille produits (+ wrapper avec gutter pour flèches)
   ---------------------------------------------------------- */
.rnf-fbc-grid-wrap{
  position: relative;
  padding-left:  var(--rnf-nav-gutter);
  padding-right: var(--rnf-nav-gutter);
  overflow: visible;
}

.rnf-fbc-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--rnf-gap-xl);
}
@media (max-width:1200px){
  .rnf-fbc-grid{ gap: var(--rnf-gap-lg); }
}
@media (max-width:1024px){
  .rnf-fbc-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:768px){
  .rnf-fbc-grid{ grid-template-columns: repeat(2,1fr); gap: var(--rnf-gap-md); }
}
@media (max-width:480px){
  .rnf-fbc-grid{ grid-template-columns: 1fr; gap: var(--rnf-gap-sm); }
}

/* ==========================================================
   4) Boutons de navigation (flèches)
   ---------------------------------------------------------- */
.rnf-fbc-nav{
  position: absolute;
  top: 30%; transform: translateY(-50%);
  width: var(--rnf-nav-size); height: var(--rnf-nav-size);
  border-radius: 999px;
  border: 1px solid #eac9d5;
  background: #f7e6eb;
  color: var(--rnf-accent);
  font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  cursor: pointer; z-index: 2;
  transition: filter .2s ease, transform .2s ease;
}
.rnf-fbc-nav.rnf-left{  left:  var(--rnf-nav-offset); }
.rnf-fbc-nav.rnf-right{ right: var(--rnf-nav-offset); }
.rnf-fbc-nav:hover{ filter: brightness(.92); }
.rnf-fbc-nav:active{ transform: translateY(-50%) scale(.98); }
.rnf-fbc-nav:focus{ outline: 2px solid rgba(0,0,0,.15); outline-offset: 2px; }

/* Mobile : flèches + petites et gutter ajusté */
@media (max-width:768px){
  .rnf-fbc-wrap{
    --rnf-nav-size:   36px;
    --rnf-nav-offset: 8px;
    --rnf-nav-gutter: calc(var(--rnf-nav-size) + var(--rnf-nav-offset) + 4px);
  }
}
@media (max-width:480px){
  .rnf-fbc-nav{ top: 26%; font-size: 18px; }
}

/* ==========================================================
   5) Carte produit (article)
   ---------------------------------------------------------- */
.rnf-fbc-item{
  display: flex; flex-direction: column; align-items: center;
}

/* Vignette (ratio responsive) */
.rnf-fbc-thumb{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: var(--rnf-thumb-ratio) !important; /* ← was 1/1 */
  overflow: hidden !important;
  border-radius: 10px !important;
  border: 1px solid #e8e2d7 !important;
  background: #fff !important;
  isolation: isolate !important;
  line-height: 0; font-size: 0;
}

/* Titre & prix */
.rnf-fbc-title{
  margin: .8rem 0 .35rem;
  font-size: clamp(.92rem, 1vw + .6rem, 1.05rem) !important;
  font-weight: 600; text-align: center; color: #2b2112;
}
.rnf-fbc-title a{ color: inherit; text-decoration: none; }

.rnf-fbc-price{
  font-size: clamp(.95rem, 1vw + .55rem, 1.05rem);
  font-weight: 700; text-align: center;
}
.rnf-fbc-price .amount{ color: #7a3b5a; }
.rnf-fbc-price ins{ background: none; text-decoration: none; }
.rnf-fbc-price del{ opacity: 1; color: #e11d48; margin-right: .4rem; }

/* Badge promo & coup de cœur */
.rnf-fbc-sale-badge,
.rnf-fbc-heart-badge{
  position: absolute; top: 8px; padding: 4px 8px;
  border-radius: 999px; font-size: .78rem; color: #fff; line-height: 1;
}
.rnf-fbc-sale-badge{ left: 8px;  background: #e11d48; }
.rnf-fbc-heart-badge{ right: 8px; background: var(--rnf-accent); }
@media (max-width:480px){
  .rnf-fbc-sale-badge, .rnf-fbc-heart-badge{ font-size:.72rem; padding:3px 7px; top:6px; }
}

/* ==========================================================
   6) Bouton "En voir plus"
   ---------------------------------------------------------- */
.rnf-fbc-more-wrap{
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end; margin-top: .2rem;
}
@media (max-width:768px){ .rnf-fbc-more-wrap{ justify-content: center; } }

.rnf-fbc-more.wp-block-button__link{
  background: var(--rnf-powder-bg) !important;
  color: var(--rnf-powder-text) !important;
  border: 1px solid var(--rnf-powder-border) !important;
  border-radius: 12px !important;
  padding: .7rem 1.1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
.rnf-fbc-more.wp-block-button__link:hover{
  background: var(--rnf-powder-bg-hover) !important;
  border-color: #e4b6c8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}
.rnf-fbc-more.wp-block-button__link:active{
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
.rnf-fbc-more.wp-block-button__link:focus{
  outline: 2px solid rgba(161,75,104,.25) !important;
  outline-offset: 2px !important;
}
@media (max-width: 768px){
  .rnf-fbc-wrap{ --rnf-powder-bg-hover: #efc7d6; }
  .rnf-fbc-more.wp-block-button__link{ width: 180px !important; text-align: center !important; }
}
@media (max-width:480px){
  .rnf-fbc-more.wp-block-button__link{ width: 100% !important; max-width: 260px; }
}

/* ==========================================================
   7) Images : pile + fondu
   ---------------------------------------------------------- */
.rnf-fbc-thumb .rnf-fbc-img{
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
  display: block !important; margin: 0 !important; border: 0 !important;
  box-shadow: none !important;
  transition: opacity .35s ease !important;
  opacity: 1 !important;
}
.rnf-fbc-thumb.rnf-has-rot .rnf-fbc-img{ opacity: 0 !important; }
.rnf-fbc-thumb.rnf-has-rot .rnf-fbc-img.is-active{ opacity: 1 !important; }

/* Corrige interférences thème */
.rnf-fbc-item img.wp-post-image{
  vertical-align: middle !important;
  border: 0 !important; box-shadow: none !important;
  max-width: none !important;
}

/* ==========================================================
   8) Loader : skeleton + spinner
   ---------------------------------------------------------- */
.rnf-fbc-loading{ padding: 1rem; text-align: center; }
.rnf-fbc-spinner{
  width: 32px; height: 32px;
  border: 3px solid #f3f4f6; border-top-color: #ec98b3;
  border-radius: 50%;
  animation: rnfspin .8s linear infinite;
  margin: 12px auto;
}
@keyframes rnfspin{ to{ transform: rotate(360deg); } }

.rnf-fbc-skel-grid{
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: var(--rnf-gap-xl);
}
@media (max-width:1200px){
  .rnf-fbc-skel-grid{ gap: var(--rnf-gap-lg); }
}
@media (max-width:1024px){
  .rnf-fbc-skel-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:768px){
  .rnf-fbc-skel-grid{ grid-template-columns: repeat(2,1fr); gap: var(--rnf-gap-md);}
}
@media (max-width:480px){
  .rnf-fbc-skel-grid{ grid-template-columns: 1fr; gap: var(--rnf-gap-sm); }
}
.rnf-fbc-skel{
  border: 1px solid #e8e2d7; border-radius: 10px;
  padding: 10px; background: #fff;
}
.rnf-fbc-skel .ph{
  display: block; width: 100%; border-radius: 8px;
  background: linear-gradient(90deg,#eee,#f7f2f4,#eee);
  background-size: 200% 100%;
  animation: rnfsheen 1.2s ease-in-out infinite;
}
/* loader aligné sur le ratio responsive */
.rnf-fbc-skel .ph.thumb{ aspect-ratio: var(--rnf-thumb-ratio); margin-bottom: 10px; }
.rnf-fbc-skel .ph.line{ height: 12px; margin: 6px 0; }
@keyframes rnfsheen{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ==========================================================
   9) Slider (glissement fluide entre lots)
   ---------------------------------------------------------- */
.rnf-fbc-slider-viewport{
  position: relative;
  overflow: hidden;
}
.rnf-fbc-slider-viewport .rnf-fbc-grid{
  position: absolute;
  top: 0; left: 0; width: 100%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .rnf-fbc-slider-viewport .rnf-fbc-grid{ transition: none !important; }
}

/* ==========================================================
   10) Ajustements mobiles supplémentaires
   ---------------------------------------------------------- */
@media (max-width:768px){
  .rnf-fbc-thumb{ width: 100% !important; }
  .rnf-fbc-item{ min-width: 0; }
}

/* ==========================================================
   11) Titre produit : ellipsis sur mobile
   ---------------------------------------------------------- */
@media (max-width: 768px){
  .rnf-fbc-title{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    display: block;
  }
}