:root{
  --rf-rose: #a14b68;        /* rose &fly */
  --rf-rose-dark: #8a3f59;   /* hover */
  --rf-gold: #d4af37;        /* accent */
  --rf-ink: #2a2430;         /* texte principal */
  --rf-muted: #6b6670;       /* texte secondaire */
  --rf-bg-soft: #fff6f9;     /* fond doux */
  --rf-ring: rgba(161,75,104,.25);
  --rf-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* ===========================
   Carte générale
   =========================== */
.rfgjv-card{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:center;
  padding:18px;
  margin:15px auto 50px;
  width:45%;
  height:500px;                 /* hauteur carte */
  border:1px solid rgba(161,75,104,.12);
  border-radius:20px;
  background:#fff;
  box-shadow: var(--rf-shadow);
}

/* ===========================
   Conteneur image FIXE
   - Empêche les débordements
   =========================== */
.rfgjv-media{
  position:relative;
  width:100%;
  max-width:360px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;              /* 🔒 no overflow */
  background: var(--rf-bg-soft);
  box-shadow: 0 6px 18px rgba(161,75,104,.08);
  aspect-ratio: 3 / 4;          /* fixe la “hauteur” visuelle (changeable) */
}

.rfgjv-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;             /* remplit sans dépasser */
  object-position:center;
  border-radius:0;              /* déjà géré par le conteneur */
}

/* (legacy) Compat si l’img n’est pas dans .rfgjv-media */
.rfgjv-card > img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
}

/* ===========================
   Contenu texte
   =========================== */
.rfgjv-content h3{
  margin:0 0 10px;
  font-size:1.6rem;
  line-height:1.25;
  color: var(--rf-ink);
}
.rfgjv-content p{
  margin:0 0 16px;
  color: var(--rf-muted);
  font-size:1rem;
}

/* ===========================
   Bouton Rose&Fly
   =========================== */
.rfgjv-btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:999px;
  background: var(--rf-rose);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow: 0 6px 16px rgba(161,75,104,.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.rfgjv-btn:hover{
  background: var(--rf-rose-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(161,75,104,.28);
}
.rfgjv-btn:focus-visible{
  outline:2px solid var(--rf-gold);
  outline-offset:2px;
  box-shadow: 0 0 0 4px var(--rf-ring);
}

/* ===========================
   Slider
   =========================== */
.rfgjv-slider{
  position:relative;
  border-radius:16px;
  overflow:hidden;              /* 🔒 no overflow */
  background: var(--rf-bg-soft);
  height:100%;                  /* occupe la hauteur dispo (ex: dans .rfgjv-media) */
}

.rfgjv-slides{
  position:relative;
  width:100%;
  height:100%;
}

.rfgjv-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .4s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rfgjv-slide.is-active{
  opacity:1;                    /* pas de largeur fixe -> s’adapte au conteneur */
}

/* Nav */
.rfgjv-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background: var(--rf-rose);
  color:pink;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(161,75,104,.25);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rfgjv-nav:hover{
  background: var(--rf-rose-dark);
  transform: translateY(-50%) scale(1.05);
  box-shadow:0 6px 16px rgba(161,75,104,.3);
}
.rfgjv-nav:focus-visible{
  outline:2px solid var(--rf-gold);
  outline-offset:2px;
  box-shadow: 0 0 0 4px var(--rf-ring);
}
.rfgjv-prev{ left:10px; }
.rfgjv-next{ right:10px; }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px){
  .rfgjv-card{
    width:90%;
    grid-template-columns: 1fr 1fr;
    height:auto;                /* laisse respirer sur tablette */
  }
}

@media (max-width: 768px){
  .rfgjv-card{
    grid-template-columns:1fr;
    width:100%;
    height:auto;
    padding:16px;
    gap:14px;
  }
  .rfgjv-media{
    max-width:100%;
    aspect-ratio: 4 / 5;        /* un poil plus haut sur mobile */
  }
}
/* Le slider occupe l'entier de la zone image fixe */
.rfgjv-media > .rfgjv-slider{ height:100%; }
.rfgjv-slide img{ width:100%; height:100%; object-fit:cover; }

/* Cache la nav si une seule image */
.rfgjv-slider[data-has-single="true"] .rfgjv-nav{ display:none; }