/* ==========================================================================
   HERO — carrousel matières premières
   Thème piloté par JS via les variables --t-* posées sur #heroSection.
   ========================================================================== */
#heroSection {
  --t-1: #2A150C;
  --t-2: #6B3A18;
  --t-3: #170B05;
  --t-accent: #E9B872;
  --t-ink: #FFFFFF;
  --t-glow: 233, 184, 114;

  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #170B05;
  color: var(--t-ink);
  isolation: isolate;
  cursor: grab;
  user-select: none;
}
#heroSection.is-dragging { cursor: grabbing; }
#heroSection a, #heroSection button { cursor: pointer; }

/* ----- Fonds superposés (crossfade) ----- */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero-bg-layer {
  position: absolute;
  inset: -10%;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.hero-bg-layer.is-on { opacity: 1; }

/* Lueur qui respire, ancrée derrière le produit */
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 68% 46%, rgba(var(--t-glow), 0.30), transparent 58%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,0.45), transparent 60%);
  transition: background 1.1s ease;
  animation: heroBreath 9s ease-in-out infinite;
}
@keyframes heroBreath {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* Rayons lents (intensité pilotée par --ray-opacity selon le thème) */
.hero-rays {
  position: absolute;
  top: 50%; left: 68%;
  width: 180vmax; height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  opacity: var(--ray-opacity, 0.12);
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.16) 0deg 6deg, transparent 6deg 26deg,
    rgba(255,255,255,0.10) 26deg 30deg, transparent 30deg 58deg,
    rgba(255,255,255,0.14) 58deg 63deg, transparent 63deg 96deg,
    rgba(255,255,255,0.08) 96deg 101deg, transparent 101deg 140deg,
    rgba(255,255,255,0.13) 140deg 145deg, transparent 145deg 190deg,
    rgba(255,255,255,0.09) 190deg 195deg, transparent 195deg 244deg,
    rgba(255,255,255,0.12) 244deg 249deg, transparent 249deg 300deg,
    rgba(255,255,255,0.10) 300deg 305deg, transparent 305deg 360deg
  );
  mask-image: radial-gradient(closest-side, #000 12%, transparent 68%);
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, transparent 68%);
  animation: heroRays 90s linear infinite;
  transition: opacity 1.1s ease;
}
@keyframes heroRays { to { transform: rotate(360deg); } }

#heroParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Grain fin : casse le dégradé, donne une matière imprimée */
.hero-grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: heroGrain 7s steps(6) infinite;
}
@keyframes heroGrain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -3%); }
  60%  { transform: translate(-3%, -2%); }
  80%  { transform: translate(2%, 4%); }
  100% { transform: translate(0, 0); }
}

/* ----- Grille ----- */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--nav-height) + 2rem) clamp(1rem, 4vw, 3rem) 8rem;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  min-height: 100vh;
  gap: clamp(1.5rem, 4vw, 4rem);
}

#heroContent {
  position: relative;
  z-index: 2;
  color: var(--t-ink);
  transition: color 0.7s ease;
  will-change: transform;
}

/* ----- Typo animée ----- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 0.4rem 1rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: inherit;
}
#heroSection[data-ink="dark"] .hero-badge {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.14);
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t-accent);
  box-shadow: 0 0 0 0 rgba(var(--t-glow), 0.7);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--t-glow), 0.55); }
  70%      { box-shadow: 0 0 0 9px rgba(var(--t-glow), 0); }
}

.hero-fruit-label {
  font-size: clamp(0.68rem, 1.4vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 0.65rem;
  color: inherit;
}

#heroFruitName {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
  color: inherit;
}

/* Hauteur réservée sur 2 lignes, même quand le texte n'en prend qu'une :
   les quatre thèmes ont des textes de longueurs différentes, et sans cette
   réserve le bloc de texte — donc la hauteur du héro — changeait selon le
   thème affiché, jusqu'à cacher les boutons sur mobile. */
#heroTagline {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  opacity: 0.9;
  margin-bottom: 0.9rem;
  color: inherit;
  max-width: 26ch;
  min-height: calc(1.3em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#heroProduct {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  opacity: 0.68;
  margin-bottom: 2.2rem;
  color: inherit;
  min-height: calc(1.5em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Masque de révélation ligne par ligne */
.hero-line { display: block; overflow: hidden; }
.hero-line > i {
  display: block;
  font-style: inherit;
  transform: translateY(105%);
  opacity: 0;
}
.hero-line.is-in > i {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease;
  transition-delay: var(--d, 0ms);
}

/* Lettres du titre : cascade */
#heroFruitName .ch {
  display: inline-block;
  transform: translateY(0.9em) rotate(4deg);
  opacity: 0;
  filter: blur(6px);
}
#heroFruitName.is-in .ch {
  transform: none;
  opacity: 1;
  filter: blur(0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease,
              filter 0.6s ease;
  transition-delay: var(--d, 0ms);
}
#heroFruitName .ch.sp { width: 0.28em; }

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 100px;
  border: 1px solid currentColor;
  color: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.85;
  transition: var(--transition);
}
.btn-ghost:hover { opacity: 1; transform: translateY(-2px); }

/* ----- Scène produit ----- */
.hero-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(320px, 46vw, 520px);
  will-change: transform;
}

.hero-halo {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--t-glow), 0.55), rgba(var(--t-glow), 0.12) 45%, transparent 70%);
  filter: blur(28px);
  transition: background 1s ease;
  animation: heroHalo 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroHalo {
  0%, 100% { transform: scale(1)    translateY(0); }
  50%      { transform: scale(1.09) translateY(-10px); }
}

/* Anneau fin qui tourne, façon sceau artisanal */
.hero-ring {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  border-top-color: rgba(var(--t-glow), 0.85);
  border-right-color: transparent;
  animation: heroRing 26s linear infinite;
}
.hero-ring::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.10);
}
@keyframes heroRing { to { transform: rotate(360deg); } }

.hero-media {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.hero-img {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  max-width: var(--img-w, 78%);
  max-height: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(60px) scale(0.86) rotate(5deg);
  filter: blur(14px) drop-shadow(0 30px 45px rgba(0,0,0,0.45));
  will-change: transform, opacity, filter;
  pointer-events: none;
}

/* Entrée : ressort long, sans rebond mécanique */
.hero-img.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: blur(0) drop-shadow(0 30px 45px rgba(0,0,0,0.45));
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s ease,
              filter 0.8s ease;
  animation: heroFloat 8s ease-in-out 1.1s infinite;
}

/* Sortie : s'échappe vers le haut en se dissolvant */
.hero-img.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: translateY(-42px) scale(0.93) rotate(-4deg);
  filter: blur(12px) drop-shadow(0 10px 20px rgba(0,0,0,0.2));
  transition: transform 0.62s cubic-bezier(0.6, 0, 0.9, 0.4),
              opacity 0.5s ease,
              filter 0.5s ease;
  animation: none;
}

@keyframes heroFloat {
  0%, 100% { transform: translate3d(0, 0, 0)      rotate(0deg); }
  33%      { transform: translate3d(6px, -16px, 0) rotate(1.1deg); }
  66%      { transform: translate3d(-5px, 8px, 0)  rotate(-0.9deg); }
}

/* Ombre portée au sol, désynchronisée du flottement */
.hero-ground {
  position: absolute;
  bottom: 4%;
  left: 0; right: 0;
  margin-inline: auto;
  width: 46%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.42), transparent 72%);
  filter: blur(10px);
  animation: heroGround 8s ease-in-out 1.1s infinite;
}
@keyframes heroGround {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  33%      { transform: scale(0.88); opacity: 0.34; }
  66%      { transform: scale(1.05); opacity: 0.56; }
}

/* ----- Navigation ----- */
.hero-nav {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.25rem);
}

.hero-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hero-tab {
  --pad: 0.9rem;
  --p: 0;
  position: relative;
  padding: 0.5rem var(--pad) 0.7rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: inherit;
  opacity: 0.5;
  transition: opacity var(--transition), transform var(--transition);
}
.hero-tab:hover { opacity: 0.85; transform: translateY(-1px); }
.hero-tab.is-active { opacity: 1; }

.hero-tab::after {
  content: "";
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.22;
}
.hero-tab-fill {
  position: absolute;
  left: var(--pad); bottom: 0.35rem;
  width: calc((100% - var(--pad) * 2) * var(--p));
  height: 2px;
  border-radius: 2px;
  background: var(--t-accent);
  box-shadow: 0 0 10px rgba(var(--t-glow), 0.8);
}

.hero-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  transition: var(--transition);
}
.hero-arrow:hover { background: rgba(255,255,255,0.3); transform: scale(1.09); }
#heroSection[data-ink="dark"] .hero-arrow {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.16);
}
#heroSection[data-ink="dark"] .hero-arrow:hover { background: rgba(0,0,0,0.12); }

/* ----- Responsive hero -----
   Sur mobile, le héro occupe une hauteur d'écran fixe (100svh — la plus
   petite hauteur de viewport possible, barre d'adresse comprise) au lieu
   d'un min-height qui pouvait grandir avec le texte. Combiné à la réserve
   de 2 lignes sur la légende et la ligne produit, la hauteur totale ne
   bouge plus d'un thème à l'autre : les boutons restent toujours visibles
   sans avoir à faire défiler la page. */
@media (max-width: 900px) {
  #heroSection { min-height: 0; height: 100svh; }

  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    text-align: center;
    min-height: 0;
    height: 100%;
    padding: calc(var(--nav-height) + 0.75rem) clamp(1rem, 4vw, 3rem) 1.5rem;
    gap: clamp(0.5rem, 3vh, 1.25rem);
    align-content: center;
    overflow: hidden;
  }
  #heroContent { order: 2; min-height: 0; }
  .hero-stage  { order: 1; height: clamp(180px, 30vh, 320px); flex-shrink: 0; }
  .hero-actions { justify-content: center; }
  #heroTagline { max-width: none; margin-inline: auto; }
  #heroProduct { margin-bottom: clamp(1rem, 3vh, 2.2rem); }
  .hero-ring   { display: none; }
}

@media (max-width: 600px) {
  .hero-tab { --pad: 0.5rem; font-size: 0.68rem; padding-bottom: 0.65rem; }
  .hero-arrow { display: none; }          /* les onglets suffisent, le balayage aussi */
  .hero-inner { padding-bottom: 1.1rem; }
  .hero-stage { height: clamp(150px, 26vh, 260px); }
  .hero-nav { bottom: 1.1rem; }
  #heroBadgeText { display: none; }       /* la puce seule suffit, gagne une ligne */
}

/* Petits écrans en hauteur (téléphones compacts, mode paysage) : on
   resserre encore pour garantir que tout tienne sans défilement. */
@media (max-width: 900px) and (max-height: 720px) {
  #heroFruitName { font-size: clamp(2.2rem, 8vw, 3.4rem); margin-bottom: 0.4rem; }
  .hero-fruit-label { margin-bottom: 0.35rem; }
  #heroTagline  { font-size: clamp(0.9rem, 2vw, 1.1rem); margin-bottom: 0.5rem; }
  #heroProduct  { margin-bottom: clamp(0.75rem, 2vh, 1.2rem); }
  .hero-badge   { margin-bottom: 0.75rem; }
  .hero-stage   { height: clamp(120px, 22vh, 200px); }
}

/* ----- Accessibilité : mouvement réduit ----- */
@media (prefers-reduced-motion: reduce) {
  #heroSection *,
  #heroSection *::before,
  #heroSection *::after {
    animation: none !important;
    transition-duration: 0.2s !important;
  }
  .hero-img { transform: none; filter: none; }
  #heroParticles, .hero-grain, .hero-rays { display: none; }
}

/* ========== INTRO STRIP ========== */
.intro-strip {
  background: var(--gold);
  color: var(--white);
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
  overflow: hidden;
}

.intro-strip-inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  animation: marquee 20s linear infinite;
  white-space: nowrap;
}

.intro-strip-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  flex-shrink: 0;
}

.intro-strip-item svg { opacity: 0.8; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   EXPLORATEUR DE CATÉGORIES — rail horizontal
   Une rangée d'onglets « univers » au-dessus d'un rail de catégories qui
   défile horizontalement (glisser, flèches, ou molette + Maj). Le rail
   déborde volontairement du conteneur pour suggérer la suite hors écran.
   ========================================================================== */

.cx-tabs-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.cx-tabs-wrap::-webkit-scrollbar { display: none; }

.cx-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  width: max-content;
}

.cx-tab {
  padding: 0.55rem 1.25rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-text);
  background: var(--white);
  border: 2px solid var(--cream-dark);
  white-space: nowrap;
  transition: var(--transition);
}
.cx-tab:hover { border-color: var(--gold); color: var(--black); }
.cx-tab.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  box-shadow: var(--shadow-gold);
}

.cx-rail-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cx-rail {
  flex: 1;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
  padding: 0.25rem clamp(1rem, 4vw, 3rem) 1rem;
  transition: opacity 0.18s ease;

  /* Estompe les bords : suggère qu'il y a plus à découvrir de chaque côté. */
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(1rem, 4vw, 3rem), #000 calc(100% - clamp(1rem, 4vw, 3rem)), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(1rem, 4vw, 3rem), #000 calc(100% - clamp(1rem, 4vw, 3rem)), transparent 100%);
}
.cx-rail::-webkit-scrollbar { display: none; }
.cx-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cx-rail.is-switching { opacity: 0; }

.cx-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  text-decoration: none;
  color: var(--black);
  transition: var(--transition);
  user-select: none;
}
.cx-rail:not(.is-dragging) .cx-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.cx-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background var(--transition), color var(--transition);
}
.cx-card:hover .cx-card-icon {
  transform: translateY(-2px) rotate(-6deg);
  background: var(--gold);
  color: var(--white);
}

.cx-card-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
}

.cx-card-count {
  font-size: 0.75rem;
  color: var(--gray-text);
  line-height: 1.4;
}

.cx-arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--cream-dark);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.cx-arrow:hover { border-color: var(--gold); color: var(--gold); transform: scale(1.06); }

/* ========== BANDEAU CAZCHOCO ========== */
.cazchoco-banner {
  background: #1C0D06;
  color: #F7EFE4;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  overflow: hidden;
}

.cazchoco-banner-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.cazchoco-banner-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #E9B872;
  margin-bottom: 0.9rem;
}

.cazchoco-banner-title {
  margin-bottom: 0.6rem;
  line-height: 0;
}
.cazchoco-banner-title img {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4));
}

.cazchoco-banner-baseline {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  margin-bottom: 1rem;
  opacity: 0.9;
}
.cazchoco-banner-baseline em { color: #E8035B; font-style: italic; font-weight: 600; }

.cazchoco-banner-desc {
  font-size: 0.92rem;
  line-height: 1.75;
  opacity: 0.78;
  max-width: 46ch;
  margin-bottom: 1.6rem;
}

.btn-choco-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 100px;
  background: #E8035B;
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 700;
  transition: var(--transition);
}
.btn-choco-inline:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(232,3,91,0.35); }

.cazchoco-banner-media {
  display: flex;
  justify-content: center;
}
.cazchoco-banner-media img {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.5));
  animation: chocoFloat 9s ease-in-out infinite;
}
@keyframes chocoFloat {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(1.4deg); }
}

/* ========== BASKET BANNER ========== */
.basket-banner {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  overflow: hidden;
  position: relative;
}

.basket-banner::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,144,26,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.basket-banner-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--white);
  margin-bottom: 0.75rem;
}

.basket-banner-title span { color: var(--gold); }

.basket-banner p {
  color: rgba(245,240,232,0.7);
  font-size: 0.95rem;
  max-width: 500px;
  line-height: 1.7;
}

.basket-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
  flex-shrink: 0;
}

/* ========== TESTIMONIALS ========== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
}

.testimonial-quote {
  font-size: 3rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.3;
  font-family: var(--font-heading);
  margin-bottom: 0.5rem;
}

.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--black);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.testimonial-role {
  font-size: 0.8rem;
  color: var(--gray-text);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.testimonial-stars svg { width: 14px; height: 14px; }

/* ========== VALUES SECTION ========== */
.values-section {
  background: var(--cream);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.value-item {
  text-align: center;
  padding: 2rem 1rem;
}

.value-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.value-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.value-text {
  font-size: 0.875rem;
  color: var(--gray-text);
  line-height: 1.6;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  .basket-banner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .basket-banner-actions { align-items: center; }
}

@media (max-width: 600px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* ========== AFFINAGE MOBILE (accueil) ========== */
@media (max-width: 768px) {
  /* L'explorateur garde son défilement horizontal sur mobile — c'est
     justement le point : pas de flèches (le doigt suffit), cartes un peu
     plus étroites pour en laisser deviner trois à l'écran. */
  .cx-arrow { display: none; }
  .cx-card { width: 138px; padding: 1.15rem 0.85rem; }
  .cx-card-icon { width: 44px; height: 44px; }
  .cx-card-name { font-size: 0.85rem; }
  .cx-card-count { font-size: 0.7rem; }
  .cx-rail { gap: 0.75rem; }

  /* Bandeau CazChoco empilé */
  .cazchoco-banner-inner { grid-template-columns: 1fr; text-align: center; }
  .cazchoco-banner-text { order: 2; }
  .cazchoco-banner-media { order: 1; }
  .cazchoco-banner-media img { max-width: 190px; }
  .cazchoco-banner-title img { max-width: 240px; }
  .cazchoco-banner-desc { margin-inline: auto; }

  .testimonials-grid { gap: 0.85rem; }
  .basket-banner { padding: 1.75rem 1.25rem; }
}

/* ==========================================================================
   SÉLECTIONS DE L'ACCUEIL — les produits prennent la place que les
   catégories occupaient avant : cartes plus grandes que sur la page listing,
   sous un grand titre centré.
   ========================================================================== */
#selections { margin-top: 0.5rem; }

.selection + .selection { margin-top: 3.5rem; }

.selection-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.selection-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 600;
  color: var(--black);
}

#produitsSection .products-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.75rem;
}
#produitsSection .product-img { aspect-ratio: 1/1; }

@media (max-width: 600px) {
  .selection + .selection { margin-top: 2.5rem; }
  .selection-head { margin-bottom: 1.25rem; }
  .selection-head .btn { width: 100%; justify-content: center; }
  #produitsSection .products-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1rem; }
}