/**
 * Racine Gamay — Filtres Vins
 * Styles for the filter bar + custom dropdowns.
 */

.rg-filtres {
  --rg-primary: #722f37;
  --rg-bg: #faf8f5;
  --rg-card-bg: #ffffff;
  --rg-text: #2d2d2d;
  --rg-text-light: #6b6b6b;
  --rg-border: #e2ddd5;
  --rg-radius: 8px;
  --rg-transition: 0.2s ease;
}

/* ─── Filter bar ─── */
.rg-filtres {
  padding: 24px 0;
  margin-bottom: 32px;
}

.rg-filtres__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.rg-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 180px;
  min-width: 150px;
}

.rg-filter-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rg-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── Filter icon ─── */
.rg-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rg-filter-icon svg {
  width: 1em;
  height: 1em;
}

/* ─── Text input ─── */
.rg-filter-group input[type="text"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--rg-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--rg-text);
  background-color: var(--rg-bg);
  transition: border-color var(--rg-transition);
  line-height: 1.4;
  box-sizing: border-box;
}

.rg-filter-group input[type="text"]:focus {
  outline: none;
  border-color: var(--rg-primary);
  box-shadow: 0 0 0 2px rgba(114, 47, 55, 0.15);
}

/* ─── Custom dropdown ─── */
.rg-dropdown {
  position: relative;
}

.rg-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--rg-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--rg-text);
  background-color: var(--rg-bg);
  cursor: pointer;
  transition: border-color var(--rg-transition);
  line-height: 1.4;
  box-sizing: border-box;
  user-select: none;
}

.rg-dropdown__trigger:hover {
  border-color: var(--rg-text-light);
}

.rg-dropdown--open .rg-dropdown__trigger {
  border-color: var(--rg-primary);
  box-shadow: 0 0 0 2px rgba(114, 47, 55, 0.15);
}

.rg-dropdown__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.rg-dropdown__label--placeholder {
  color: var(--rg-text-light);
}

.rg-dropdown__arrow {
  width: 12px;
  height: 12px;
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform var(--rg-transition);
}

.rg-dropdown--open .rg-dropdown__arrow {
  transform: rotate(180deg);
}

/* Panel */
.rg-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--rg-card-bg);
  border: 1px solid var(--rg-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}

.rg-dropdown--open .rg-dropdown__panel {
  display: block;
}

/* Scrollbar */
.rg-dropdown__panel::-webkit-scrollbar {
  width: 6px;
}

.rg-dropdown__panel::-webkit-scrollbar-track {
  background: transparent;
}

.rg-dropdown__panel::-webkit-scrollbar-thumb {
  background: var(--rg-border);
  border-radius: 3px;
}

/* Options */
.rg-dropdown__option {
  display: block;
  width: 100%;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--rg-text);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--rg-transition);
  line-height: 1.4;
}

.rg-dropdown__option:hover {
  background: var(--rg-bg);
}

.rg-dropdown__option--active {
  color: var(--rg-primary);
  font-weight: 600;
  background: rgba(114, 47, 55, 0.06);
}

.rg-dropdown__option--active:hover {
  background: rgba(114, 47, 55, 0.1);
}

.rg-filter-group--actions {
  flex: 0 0 auto;
}

.rg-filter-group--actions:has(.rg-reset-link) {
  padding: 0;
  margin: 0;
  min-width: 0;
  gap: 0;
  align-self: center;
}

.rg-filter-group--wide {
  flex: 1 1 100%;
}

/* ─── Pills (boutons variant) ─── */
.rg-pills {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rg-pills--wrap {
  flex-wrap: wrap;
}

.rg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--rg-border);
  border-radius: 50px;
  background: var(--rg-bg);
  color: var(--rg-text);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--rg-transition);
  white-space: nowrap;
  line-height: 1.4;
}

.rg-pill:hover {
  border-color: var(--rg-text-light);
}

.rg-pill--active {
  background: var(--rg-primary);
  color: #fff;
  border-color: var(--rg-primary);
}

.rg-pill--active:hover {
  border-color: var(--rg-primary);
  opacity: 0.9;
}

/* Color swatches */
.rg-pill--swatch {
  padding-left: 8px;
}

.rg-pill__dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  transition: transform var(--rg-transition), box-shadow var(--rg-transition);
}

.rg-pill--active .rg-pill__dot {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rg-primary);
  border-color: transparent;
}

.rg-pills--color .rg-pill--active {
  background: var(--rg-bg);
  color: var(--rg-primary);
  border-color: var(--rg-primary);
  font-weight: 600;
}

.rg-pills--color .rg-pill--all.rg-pill--active {
  background: var(--rg-primary);
  color: #fff;
}

/* ─── Radio list variant ─── */
.rg-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--rg-border);
  border-radius: var(--rg-radius);
  background: var(--rg-bg);
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.rg-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: calc(var(--rg-radius) - 2px);
  cursor: pointer;
  font-size: 14px;
  color: var(--rg-text);
  transition: background var(--rg-transition);
  line-height: 1.4;
}

.rg-list__item:hover {
  background: var(--rg-card-bg);
}

.rg-list__item--active {
  background: var(--rg-card-bg);
  color: var(--rg-primary);
  font-weight: 600;
}

.rg-list__item input[type="radio"] {
  accent-color: var(--rg-primary);
  margin: 0;
}

/* ─── Number range (min / max) ─── */
.rg-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rg-range__select {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--rg-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--rg-text);
  background-color: var(--rg-bg);
  cursor: pointer;
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color var(--rg-transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}

.rg-range__select:hover {
  border-color: var(--rg-primary);
}

.rg-range__select:focus {
  outline: none;
  border-color: var(--rg-primary);
}

.rg-range__sep {
  color: var(--rg-text-light);
  flex: 0 0 auto;
}

/* ─── Button ─── */
.rg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--rg-transition);
  white-space: nowrap;
  line-height: 1.4;
}

.rg-btn--secondary {
  background: transparent;
  color: var(--rg-text-light);
  border: 1px solid var(--rg-border);
}

.rg-btn--secondary:hover {
  background: var(--rg-bg);
  color: var(--rg-text);
  border-color: var(--rg-text-light);
}

/* ─── Reset as inline text link ─── */
.rg-reset-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--rg-text-light);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--rg-transition);
  line-height: 1.4;
  white-space: nowrap;
}

.rg-reset-link:hover {
  color: var(--rg-primary);
}

/* ─── Small button variant ─── */
.rg-btn--small {
  padding: 6px 14px;
  font-size: 13px;
}

/* ─── Active filter tags ─── */
.rg-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
  justify-content: flex-start;
}

/* Alignment variants */
.rg-tags--left { justify-content: flex-start; }
.rg-tags--center { justify-content: center; }
.rg-tags--right { justify-content: flex-end; }
.rg-tags--space-between { justify-content: space-between; }

.rg-tags__default {
  font-size: 14px;
  color: var(--rg-text);
  font-weight: 600;
}

.rg-tags__list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Tag base (outlined = default) ── */
.rg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--rg-bg);
  border: 1px solid var(--rg-border);
  border-radius: 50px;
  font-size: 13px;
  color: var(--rg-text);
  line-height: 1.3;
  white-space: nowrap;
}

.rg-tag__label {
  font-weight: 600;
  color: var(--rg-text-light);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rg-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  color: var(--rg-text-light);
  cursor: pointer;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  transition: all var(--rg-transition);
}

.rg-tag__remove:hover {
  background: var(--rg-primary);
  color: #fff;
}

/* ── Filled style ── */
.rg-tags--filled .rg-tag {
  background: var(--rg-primary);
  border-color: var(--rg-primary);
  color: #fff;
}

.rg-tags--filled .rg-tag__label {
  color: rgba(255, 255, 255, 0.7);
}

.rg-tags--filled .rg-tag__remove {
  color: rgba(255, 255, 255, 0.6);
}

.rg-tags--filled .rg-tag__remove:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ── Minimal style ── */
.rg-tags--minimal .rg-tag {
  background: none;
  border: none;
  padding: 4px 0;
  gap: 4px;
  font-size: 13px;
  color: var(--rg-text-light);
}

.rg-tags--minimal .rg-tag__label {
  color: var(--rg-text);
}

.rg-tags--minimal .rg-tag__remove {
  color: var(--rg-text-light);
}

.rg-tags--minimal .rg-tag__remove:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--rg-primary);
}

/* ─── Count ─── */
.rg-filtres__count {
  margin-top: 16px;
  font-size: 14px;
  color: var(--rg-text-light);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
 * Mobile / tablet: floating button + full-screen modal
 * ═══════════════════════════════════════════════════════════════ */

.rg-filtres-root {
  --rg-primary: #722f37;
  --rg-bg: #faf8f5;
  --rg-card-bg: #ffffff;
  --rg-text: #2d2d2d;
  --rg-text-light: #6b6b6b;
  --rg-border: #e2ddd5;
  --rg-radius: 8px;
}

/* Floating button: hidden on desktop */
.rg-filtres-fab {
  position: fixed;
  bottom: 24px;
  z-index: 9998;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  border-radius: 50px;
  background: var(--gcid-secondary-color, #592b5f) !important;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  line-height: 1.2;
  font-family: inherit;
}

.rg-filtres-root--fab-right .rg-filtres-fab { right: 24px; }
.rg-filtres-root--fab-left  .rg-filtres-fab { left: 24px; }

.rg-filtres-fab:hover,
.rg-filtres-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  outline: none;
}

.rg-filtres-fab__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rg-filtres-fab__label {
  white-space: nowrap;
}

.rg-filtres-fab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.rg-filtres-fab__count[hidden] { display: none; }

/* Modal: hidden by default, shown when .rg-filtres-modal--open is added.
 * Anchored to the bottom of the viewport (bottom sheet pattern) so it
 * never collides with a fixed/sticky site header. */
.rg-filtres-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(30, 20, 20, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-sizing: border-box;
  animation: rg-modal-fade 0.18s ease;
}

.rg-filtres-modal--open {
  display: flex;
}

@keyframes rg-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rg-modal-slide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.rg-filtres-modal__dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90%;
  max-height: 90vh;
  background: var(--rg-card-bg);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  animation: rg-modal-slide 0.22s ease;
}

.rg-filtres-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rg-border);
  background: var(--rg-card-bg);
}

.rg-filtres-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--rg-text);
}

.rg-filtres-modal__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.rg-filtres-modal__reset {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--rg-border);
  border-radius: 50px;
  color: var(--rg-text-light);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.3;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.rg-filtres-modal__reset:hover,
.rg-filtres-modal__reset:focus-visible {
  color: var(--rg-primary);
  border-color: var(--rg-primary);
  background: var(--rg-bg);
  outline: none;
}

.rg-filtres-modal__reset[hidden] { display: none; }

.rg-filtres-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--rg-text);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.rg-filtres-modal__close:hover,
.rg-filtres-modal__close:focus-visible {
  background: var(--rg-bg);
  outline: none;
}

.rg-filtres-modal__close svg {
  width: 20px;
  height: 20px;
}

.rg-filtres-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 24px;
  background: var(--rg-card-bg);
}

.rg-filtres-modal__footer {
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--rg-border);
  background: var(--rg-card-bg);
}

/* Apply button */
.rg-filtres-apply {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: var(--rg-radius);
  background: var(--rg-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease, background 0.18s ease;
  line-height: 1.3;
  font-family: inherit;
}

.rg-filtres-apply:hover:not([disabled]) {
  opacity: 0.92;
}

.rg-filtres-apply[disabled] {
  background: #dcdcdc;
  color: #888;
  cursor: not-allowed;
}

/* Filter bar when moved inside the modal body */
.rg-filtres-modal__body .rg-filtres {
  padding: 0;
  margin: 0;
}

.rg-filtres-modal__body .rg-filtres__row {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 18px;
  align-items: stretch;
}

.rg-filtres-modal__body .rg-filter-group {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.rg-filtres-modal__body .rg-filter-group--wide {
  flex: 1 1 auto;
}

.rg-filtres-modal__body .rg-filtres__count {
  display: none;
}

/* Body scroll lock helper */
body.rg-filtres-modal-open {
  overflow: hidden;
}

/* ─── Breakpoint: switch to floating button + modal ─── */
@media (max-width: 1025px) {
  .rg-filtres-inline { display: none; }
  .rg-filtres-fab    { display: inline-flex; }

  .rg-filtres {
    padding: 16px 0;
  }
}

/* On desktop, keep modal + FAB hidden even if JS adds classes by mistake */
@media (min-width: 1026px) {
  .rg-filtres-fab,
  .rg-filtres-modal {
    display: none !important;
  }
  body.rg-filtres-modal-open {
    overflow: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Grille de vins [rg_vins]
   Reproduit le design des cartes du catalogue Divi : cartes sur
   degrade blanc, gap 2px laissant voir le fond de section (les
   fins separateurs), bouteille sur cercle couleur, titre Space
   Grotesk, lien domaine Instrument Sans, millesime Happy Monkey.
   Les fonts sont supposees chargees par Divi ; surchargez via les
   variables --rg-font-titre / --rg-font-texte / --rg-font-accent
   (CSS personnalise) si la charte change.
   ═══════════════════════════════════════════════════════════════ */

.rg-vins-grid {
  display: grid;
  grid-template-columns: repeat(var(--rg-vins-cols, 3), 1fr);
  gap: 2px;
}

.rg-vin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start (pas space-between) : une carte sans millesime garde
     son lien domaine sous le titre au lieu de l'envoyer en bas quand
     la rangee est etiree a la hauteur de la carte la plus haute */
  justify-content: flex-start;
  row-gap: 15px;
  padding: 42px 21px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 100%);
  text-align: center;
}

.rg-vin-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.rg-vin-card__link:hover {
  transform: scale(1.02);
}

.rg-vin-card__link:hover .rg-vin-card__title {
  text-decoration: underline;
}

.rg-vin-card__image {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 225px;
}

.rg-vin-card__image img {
  position: relative;
  z-index: 1;
  height: 225px;
  width: auto;
  max-width: none;
}

/* Cercle couleur derriere la bouteille — l'image de fond est posee
   par les regles .rg-couleur-{slug} .rg-couleur-image du plugin */
.rg-vin-card .rg-couleur-image {
  position: absolute;
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  z-index: 0;
}

.rg-vin-card__title {
  margin: 14px 0 0;
  padding: 0 0 10px;
  font-family: var(--rg-font-titre, 'Space Grotesk', ui-sans-serif, sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  /* meme protection que le lien domaine contre la couleur de lien
     globale de Divi (le titre est dans un <a>) */
  color: #4b2632 !important;
}

.rg-vin-card__domaine {
  display: block;
  margin: 0 0 10px;
  font-family: var(--rg-font-texte, 'Instrument Sans', ui-sans-serif, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  /* !important : dans un layout Theme Builder, la couleur de lien
     globale de Divi (verte, selecteur avec #et-boc) bat n'importe
     quelle classe simple — sans cela la couleur varie selon la page */
  color: #4e3b41 !important;
  text-decoration: none;
}

.rg-vin-card__domaine:hover {
  text-decoration: underline;
}

.rg-vin-card__millesime {
  margin: 0;
  padding: 0;
  font-family: var(--rg-font-accent, 'Happy Monkey', cursive);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 1px;
  color: #4e3b41;
}

.rg-vins-vide {
  padding: 30px 0;
  font-family: var(--rg-font-texte, 'Instrument Sans', ui-sans-serif, sans-serif);
  font-size: 14px;
  color: #4e3b41;
  text-align: center;
}

/* Meme comportement responsive que la grille Divi du catalogue */
@media (max-width: 980px) {
  .rg-vins-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Carrousel [rg_vins affichage="carrousel"]
   Meme comportement et meme style que le carrousel maison de la
   page d'accueil : cartes sans fond sur le fond de section, fleches
   fines, points gris (actifs vert lime, fenetre visible).
   ═══════════════════════════════════════════════════════════════ */

.rg-vins-carousel {
  position: relative;
}

.rg-vins-carousel__track {
  display: flex;
  overflow: hidden;
  gap: 40px;
  /* Le defilement horizontal est gere en JS (translateX) : sans ceci le
     navigateur traite le balayage comme un pan de page et fait rebondir
     toute la page (overscroll elastique iOS/Android). */
  touch-action: pan-y;
}

.rg-vins-carousel__track > * {
  flex: 0 0 auto;
}

/* En carrousel les cartes defilent sur le fond de la section,
   comme sur la page d'accueil : ni fond blanc ni padding de grille */
.rg-vins-carousel .rg-vin-card {
  background-image: none;
  padding: 0 0 10px;
}

.rg-vins-carousel__arrow {
  position: absolute;
  top: 112px; /* centre de la bouteille (225px) */
  transform: translateY(-50%);
  z-index: 2;
  border: 0;
  background: none;
  padding: 6px;
  cursor: pointer;
  color: #4e3b41;
  opacity: 0.55;
  transition: opacity 0.2s;
}

.rg-vins-carousel__arrow:hover {
  opacity: 1;
}

.rg-vins-carousel__arrow svg {
  width: 28px;
  height: 28px;
  display: block;
}

.rg-vins-carousel__arrow--prev { left: -44px; }
.rg-vins-carousel__arrow--next { right: -44px; }

/* Pas de place en marge sur les ecrans etroits : fleches rentrees */
@media (max-width: 1330px) {
  .rg-vins-carousel__arrow--prev { left: -8px; }
  .rg-vins-carousel__arrow--next { right: -8px; }
}

.rg-vins-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.rg-vins-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #d1d5db;
  transition: background 0.3s, transform 0.3s;
}

.rg-vins-carousel__dot:hover {
  background: #9ca3af;
}

.rg-vins-carousel__dot--on {
  background: #c8d51e;
  transform: scale(1.25);
}