/* =====================================================================
   VIRONA CONFORT — SECTION « NOS CATÉGORIES »
   ---------------------------------------------------------------------
   Toutes les règles sont confinées sous .vc-catshow (aucun style global).

   Géométrie des cartes (cœur du composant)
     • Unité --u = largeur d'une carte normale, calculée depuis la largeur
       du carrousel (container query units, cqi).
     • Carte normale  : largeur --u        hauteur --u × 2.26
     • Carte en avant : largeur --u × 1.1  hauteur --u × 2.26 + 44 px
       → elle grandit vers le haut (et 8 px vers le bas), sans
         transform: scale() : l'image remplit simplement une carte plus
         grande, le texte garde ses tailles.
     • Toutes les cartes normales sont identiques et alignées sur la
       même ligne de base.

   Points de rupture
     ≥ 1280 px  les 6 cartes visibles, flèches + pastilles
     768–1279   ~3,5 cartes visibles, défilement horizontal (snap)
     < 768      1 carte en avant + voisines qui dépassent, balayage,
                flèches masquées
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. JETONS
   --------------------------------------------------------------------- */
.vc-catshow {
  --cs-ivory: #faf5ee;
  --cs-cream: #f4ebe0;          /* bande des engagements */
  --cs-ink: #2a1d14;            /* titres */
  --cs-text: #5b4a3d;           /* texte courant */
  --cs-taupe: #6f5a4a;          /* surtitre */
  --cs-line: #cdbba8;           /* filets du surtitre */
  --cs-cognac: #9a4c27;         /* « un même savoir-faire » */
  --cs-caramel: #a3623e;        /* icônes */
  --cs-dot: #e4d6c6;
  --cs-dot-active: #6b3a1f;
  --cs-sep: #dccbb8;
  --cs-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cs-sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --cs-gap: 12px;               /* écart entre cartes */
  --cs-ratio: 2.26;             /* hauteur / largeur d'une carte normale */
  --cs-lift: 36px;              /* la carte en avant dépasse vers le haut */
  --cs-drop: 8px;               /* … et légèrement vers le bas */
  --cs-grow: 1.1;               /* largeur relative de la carte en avant */
  --cs-ease: cubic-bezier(.22, .61, .36, 1);
  --cs-duration: 480ms;
}


/* ---------------------------------------------------------------------
   2. SECTION + FOND
   --------------------------------------------------------------------- */
.vc-catshow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 0 0;
  background-color: var(--cs-ivory);
  /* grain très léger (ivoire légèrement texturé) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 50% 0%, #fdfaf5 0%, rgba(253, 250, 245, 0) 70%);
  color: var(--cs-text);
  font-family: var(--cs-serif);
  -webkit-font-smoothing: antialiased;
}
.vc-catshow *, .vc-catshow *::before, .vc-catshow *::after { box-sizing: border-box; }

/* Branches d'olivier floues — coins supérieurs uniquement, décor pur */
.vc-catshow__decor {
  position: absolute; top: -40px; z-index: -1;
  width: clamp(170px, 21vw, 330px); height: auto;
  opacity: .72; pointer-events: none; user-select: none;
}
.vc-catshow__decor--left { left: -46px; }
.vc-catshow__decor--right { right: -46px; }


/* ---------------------------------------------------------------------
   3. EN-TÊTE
   --------------------------------------------------------------------- */
.vc-catshow__header { max-width: 1280px; margin: 0 auto; padding: 0 24px; text-align: center; }
.vc-catshow__eyebrow {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--cs-sans); font-size: 13px; font-weight: 500;
  letter-spacing: .42em; text-transform: uppercase; color: var(--cs-taupe);
}
.vc-catshow__eyebrow span { margin-right: -.42em; }  /* compense l'espacement final */
.vc-catshow__eyebrow::before,
.vc-catshow__eyebrow::after { content: ""; width: 80px; height: 1px; background: var(--cs-line); }

.vc-catshow__title {
  margin: 20px 0 0;
  font-family: var(--cs-serif); font-weight: 500;
  font-size: clamp(34px, 3.75vw, 58px); line-height: 1.12; letter-spacing: -.012em;
  color: var(--cs-ink); text-wrap: balance;
}
.vc-catshow__title em { font-style: italic; font-weight: 400; color: var(--cs-cognac); }
.vc-catshow__lead {
  margin: 14px 0 0;
  font-family: var(--cs-serif); font-size: clamp(16px, 1.45vw, 22px); line-height: 1.5;
  color: var(--cs-text);
}


/* ---------------------------------------------------------------------
   4. CARROUSEL
   --------------------------------------------------------------------- */
.vc-catshow__carousel {
  position: relative;
  max-width: 1500px; margin: 4px auto 0; padding: 0 32px;
  container-type: inline-size; container-name: vc-catshow;
}
.vc-catshow__track {
  /* --u : largeur d'une carte normale (6 cartes + 1 carte élargie) */
  --u: min(250px, (100cqi - 5 * var(--cs-gap)) / (5 + var(--cs-grow)));
  list-style: none; margin: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: var(--cs-gap);
  /* place pour la carte qui dépasse et pour les ombres (sinon l'ombre est coupée net) */
  --cs-pad-top: calc(var(--cs-lift) + 14px);
  --cs-pad-bottom: calc(var(--cs-drop) + 56px);
  padding: var(--cs-pad-top) 2px var(--cs-pad-bottom);
  margin-bottom: -34px;            /* récupère l'espace réservé aux ombres */
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.vc-catshow__track::-webkit-scrollbar { display: none; }

.vc-catshow__item {
  flex: 0 0 auto;
  width: var(--u);
  height: calc(var(--u) * var(--cs-ratio));
  margin-bottom: 0;
  scroll-snap-align: center;
  transition:
    width var(--cs-duration) var(--cs-ease),
    height var(--cs-duration) var(--cs-ease),
    margin var(--cs-duration) var(--cs-ease);
}
/* Carte en avant : plus haute (surtout vers le haut) et un peu plus large */
.vc-catshow__item.is-featured {
  width: calc(var(--u) * var(--cs-grow));
  height: calc(var(--u) * var(--cs-ratio) + var(--cs-lift) + var(--cs-drop));
  margin-bottom: calc(var(--cs-drop) * -1);
}


/* ---------------------------------------------------------------------
   5. CARTE CATÉGORIE (lien réel)
   --------------------------------------------------------------------- */
.vc-catcard {
  position: relative; display: block; height: 100%;
  overflow: hidden; border-radius: 14px;
  background: var(--vc-card-fade, #f4e9de);
  color: var(--cs-ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(60, 40, 25, .06), 0 10px 24px -14px rgba(60, 40, 25, .28);
  transition: box-shadow var(--cs-duration) var(--cs-ease), transform 300ms var(--cs-ease);
}
.vc-catshow__item.is-featured .vc-catcard {
  box-shadow: 0 2px 4px rgba(60, 40, 25, .06), 0 26px 48px -20px rgba(60, 40, 25, .42);
}
.vc-catcard__image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--vc-focus, 50% 50%);
  transition: transform 900ms var(--cs-ease);
}
/* Voile de lisibilité : limité au bas de la carte (≈ 28 %), concentré derrière
   le nom et « Découvrir », très transparent vers la photo — le produit reste net */
.vc-catcard::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--vc-card-fade) 90%, transparent) 0%,
    color-mix(in srgb, var(--vc-card-fade) 78%, transparent) 38%,
    color-mix(in srgb, var(--vc-card-fade) 38%, transparent) 70%,
    color-mix(in srgb, var(--vc-card-fade) 0%, transparent) 100%);
  pointer-events: none;
}
.vc-catcard--dark::after {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--vc-card-fade) 86%, transparent) 0%,
    color-mix(in srgb, var(--vc-card-fade) 70%, transparent) 38%,
    color-mix(in srgb, var(--vc-card-fade) 30%, transparent) 70%,
    color-mix(in srgb, var(--vc-card-fade) 0%, transparent) 100%);
}
.vc-catcard__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 14px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.vc-catcard__name {
  font-family: var(--cs-serif); font-weight: 400;
  /* proportionnelle à la largeur de carte normale : identique sur toutes les cartes */
  font-size: clamp(18px, calc(var(--u) * .104), 25px); line-height: 1.15; letter-spacing: -.005em;
  white-space: nowrap;
}
.vc-catcard__cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 0 0 7px;
  border-bottom: 1px solid currentColor;
  font-family: var(--cs-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
}
.vc-catcard__cta svg { flex-shrink: 0; transition: transform 300ms var(--cs-ease); }
.vc-catcard--dark { color: #fbf5ec; }
.vc-catcard--dark .vc-catcard__name { text-shadow: 0 1px 12px rgba(0, 0, 0, .18); }

/* Survol / focus */
.vc-catcard:hover .vc-catcard__image { transform: scale(1.035); }
.vc-catcard:hover .vc-catcard__cta svg { transform: translateX(4px); }
.vc-catcard:focus-visible { outline: 2px solid var(--cs-dot-active); outline-offset: 4px; }


/* ---------------------------------------------------------------------
   6. FLÈCHES + PASTILLES
   --------------------------------------------------------------------- */
.vc-catshow__arrow {
  position: absolute; z-index: 2;
  top: calc(50% + (var(--cs-lift) + 14px - var(--cs-drop) - 22px) / 2);  /* milieu des cartes */
  transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e3d6c7; background: #fffaf4; color: var(--cs-ink);
  box-shadow: 0 6px 18px -8px rgba(60, 40, 25, .35);
  cursor: pointer; transition: background 200ms, box-shadow 200ms;
}
.vc-catshow__arrow:hover { background: #fff; box-shadow: 0 8px 22px -8px rgba(60, 40, 25, .45); }
.vc-catshow__arrow:focus-visible { outline: 2px solid var(--cs-dot-active); outline-offset: 3px; }
.vc-catshow__arrow--prev { left: 6px; }
.vc-catshow__arrow--next { right: 6px; }

.vc-catshow__dots { position: relative; display: flex; justify-content: center; gap: 4px; margin-top: 2px; }
.vc-catshow__dot {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vc-catshow__dot::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cs-dot); transition: background 300ms, transform 300ms;
}
.vc-catshow__dot[aria-current="true"]::before { background: var(--cs-dot-active); }
.vc-catshow__dot:hover::before { transform: scale(1.2); }
.vc-catshow__dot:focus-visible { outline: 2px solid var(--cs-dot-active); outline-offset: -2px; border-radius: 50%; }


/* ---------------------------------------------------------------------
   7. ENGAGEMENTS (4 colonnes)
   --------------------------------------------------------------------- */
.vc-catshow__benefits {
  list-style: none; margin: 30px 0 0; padding: 30px max(24px, calc((100% - 1440px) / 2)) 40px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--cs-cream);
  border-top: 1px solid rgba(205, 187, 168, .35);
}
.vc-benefit {
  position: relative; padding: 0 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.vc-benefit + .vc-benefit::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 6px; width: 1px; background: var(--cs-sep);
}
.vc-benefit__icon { width: 50px; height: 50px; color: var(--cs-caramel); }
.vc-benefit__title {
  margin: 14px 0 0; font-family: var(--cs-serif); font-weight: 500;
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.25; color: var(--cs-ink);
}
.vc-benefit__text {
  margin: 4px 0 0; font-family: var(--cs-serif);
  font-size: clamp(14.5px, 1.2vw, 17.5px); line-height: 1.4; color: var(--cs-taupe);
}


/* =====================================================================
   8. RESPONSIVE
   ===================================================================== */

/* ---------- Tablette large et tablette : défilement horizontal ---------- */
@media (max-width: 1279.98px) {
  .vc-catshow { padding-top: 40px; }
  .vc-catshow__carousel { padding: 0 24px; }
  .vc-catshow__track {
    --u: calc((100cqi - 4 * var(--cs-gap)) / 4.4);   /* 1024–1279 : ~4,5 cartes */
    justify-content: flex-start;
    /* permet de centrer la première et la dernière carte */
    padding-inline: calc(50cqi - var(--u) * var(--cs-grow) / 2);
  }
  .vc-catshow__arrow--prev { left: 4px; }
  .vc-catshow__arrow--next { right: 4px; }
  .vc-catshow__arrow { width: 46px; height: 46px; }
  .vc-catshow__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .vc-benefit:nth-child(3)::before { display: none; }
}

/* ---------- Tablette (768–1023) : ~3,5 cartes visibles ---------- */
@media (max-width: 1023.98px) {
  .vc-catshow__track { --u: calc((100cqi - 3 * var(--cs-gap)) / 3.6); }
}

/* ---------- Mobile : une carte en avant, voisines visibles, balayage ---------- */
@media (max-width: 767.98px) {
  .vc-catshow { --cs-lift: 28px; --cs-drop: 6px; --cs-gap: 10px; padding-top: 32px; }
  .vc-catshow__decor { width: 150px; top: -34px; opacity: .45; }
  .vc-catshow__decor--left { left: -58px; }
  .vc-catshow__decor--right { right: -58px; }
  .vc-catshow__header { padding: 0 20px; }
  .vc-catshow__eyebrow { gap: 12px; font-size: 11.5px; }
  .vc-catshow__eyebrow::before, .vc-catshow__eyebrow::after { width: 40px; }
  .vc-catshow__title { margin-top: 16px; font-size: clamp(30px, 8.6vw, 36px); }
  .vc-catshow__title em { display: block; }
  .vc-catshow__lead { font-size: 16px; }
  .vc-catshow__carousel { padding: 0; margin-top: 14px; }
  .vc-catshow__track {
    --u: min(62cqi, 280px);
    padding-inline: calc(50cqi - var(--u) * var(--cs-grow) / 2);
  }
  .vc-catshow__arrow { display: none; }   /* balayage natif à la place */
  .vc-catshow__benefits { margin-top: 22px; padding: 26px 12px 30px; row-gap: 26px; }
  .vc-benefit { padding: 0 10px; }
  .vc-benefit__icon { width: 42px; height: 42px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .vc-catshow__track { scroll-behavior: auto; }
  .vc-catshow__item, .vc-catcard, .vc-catcard__image, .vc-catcard__cta svg, .vc-catshow__dot::before { transition: none; }
  .vc-catcard:hover .vc-catcard__image { transform: none; }
}


/* =====================================================================
   9. INTÉGRATION WORDPRESS — stabilité verticale + 7 cartes
   ---------------------------------------------------------------------
   La carte en avant est plus haute que les autres ; pendant la transition
   (largeur / hauteur / marge animées) la plus haute des cartes passait
   brièvement sous sa hauteur finale, donc la piste raccourcissait de
   ~lift/2 puis regrandissait : toute la page en dessous « sautillait ».
   La piste réserve désormais en permanence la hauteur de la carte en avant
   (carte normale + --cs-lift) + ses marges : la hauteur de la scène ne
   dépend plus de la carte active. Les cartes restent ancrées en bas.
   Sept cartes : la rangée défile ; la première vue reste celle des six
   premières cartes (alignées à gauche, comme avant).
   ===================================================================== */
.vc-catshow__track {
  min-height: calc(var(--u) * var(--cs-ratio) + var(--cs-lift) + var(--cs-pad-top) + var(--cs-pad-bottom));
  overflow-y: hidden;
  justify-content: flex-start;
}


/* =====================================================================
   10. VARIANTE « BANDE DE CARTES » (pages hors accueil)
   ---------------------------------------------------------------------
   Les mêmes cartes, flèches et pastilles que l'accueil, sans titre, sans
   branches d'olivier, sans fond de section et sans bande d'engagements,
   en format compact : cartes plus larges que hautes (le ratio, le dépassement
   de la carte en avant et les espacements sont les seules valeurs qui changent ;
   la mécanique du carrousel est la même). La piste réserve en permanence la
   hauteur de la carte en avant (section 9) : aucun saut de page.
   Aucune règle ci-dessous ne s'applique à la section d'accueil.
   ===================================================================== */
.vc-catshow.vc-catshow--strip {
  --cs-ratio: 1.02;               /* hauteur / largeur d'une carte normale (accueil : 2.26) */
  --cs-lift: 14px;                /* la carte en avant dépasse légèrement */
  --cs-drop: 4px;
  --cs-grow: 1.08;
  --cs-sp-top: 10px;              /* place pour le dépassement et l'ombre du haut */
  --cs-sp-bottom: 30px;           /* place pour l'ombre du bas */
  padding-top: 22px;
  background: none;
}
.vc-catshow--strip .vc-catshow__carousel { margin-top: 0; }
.vc-catshow--strip .vc-catshow__track { --cs-pad-top: var(--cs-sp-top); --cs-pad-bottom: var(--cs-sp-bottom); margin-bottom: 0; }
.vc-catshow--strip .vc-catshow__arrow { top: calc(50% + (var(--cs-sp-top) + var(--cs-lift) - var(--cs-sp-bottom)) / 2); }

/* image : recadrage paysage de la photo portrait, sans déformation (object-fit: cover) */
.vc-catshow--strip .vc-catcard__image { object-position: var(--vc-fx, 50%) 76%; }
/* voile un peu plus haut : le nom et « Découvrir » occupent une plus grande part de la carte */
.vc-catshow--strip .vc-catcard::after { height: 42%; }
.vc-catshow--strip .vc-catcard__body { padding: 0 8px 10px; gap: 6px; }
.vc-catshow--strip .vc-catcard__cta { padding-bottom: 4px; }
.vc-catshow--strip .vc-catshow__dots { margin-top: 0; }

@media (max-width: 767.98px) {
  .vc-catshow.vc-catshow--strip { --cs-lift: 10px; --cs-drop: 3px; --cs-ratio: .96; padding-top: 16px; }
}