/* ==========================================================================
   Monde Apicole — Hero premium (porté du design "MondeApicole1").
   100 % CLOISONNÉ sous .heroxp : tokens locaux + keyframes préfixés hx-.
   N'affecte aucun autre style du site. Garde la carte produit dynamique
   (#heroCard*) et la note (#heroRating*), ainsi que les clés data-i18n.
   ========================================================================== */

.heroxp {
  /* Tokens locaux (valeurs "clair" du design source) */
  --honey:#F9BC38; --honey-2:#F0A21E; --honey-3:#FFD46B;
  --ink:#0B0B0A;
  --bg:#FFFBF2; --surface:#FFFFFF; --surface-2:#FFF8E8;
  --text:#14120E; --muted:#7A705C; --border:#EFE3C6;
  --glow:rgb(249 188 56 / .45);
  --shadow-c:rgb(122 80 0 / .18);
  --grad-honey:linear-gradient(135deg,#FFD46B 0%,#F9BC38 45%,#F0A21E 100%);
  --hex:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M0 8.08L14 0l14 8.08v16.17L14 32.33 0 24.25zM14 32.33V48.5' fill='none' stroke='%23F9BC38' stroke-opacity='.28' stroke-width='1'/%3E%3C/svg%3E");
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font-display:"Montserrat","Segoe UI",system-ui,sans-serif;

  position:relative; overflow:clip;
  padding-block:calc(80px + clamp(1rem,3vw,2.5rem)) clamp(4rem,8vw,6rem);
  background:
    radial-gradient(50% 60% at 78% 45%, var(--glow), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgb(249 188 56 / .14), transparent 70%),
    var(--bg);
}
.heroxp::before {
  content:""; position:absolute; inset:0; background:var(--pattern); pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 80% at 75% 40%, #000 10%, transparent 75%);
  mask-image:radial-gradient(70% 80% at 75% 40%, #000 10%, transparent 75%);
}

/* ---------- Icônes ---------- */
.heroxp .i { width:1em; height:1em; display:inline-block; vertical-align:middle;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Layout ---------- */
.heroxp .container { width:min(100% - 2.5rem, 1240px); margin-inline:auto; }
.heroxp .hero-content { position:relative; display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center; gap:clamp(2rem,4vw,4rem); }

/* ---------- Copie (texte) ---------- */
.heroxp .pill {
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:.4rem .9rem .4rem .45rem; font:700 .78rem/1 var(--font-display); color:var(--text);
  box-shadow:0 2px 10px -4px var(--shadow-c);
}
.heroxp .pill b { display:inline-grid; place-items:center; width:24px; height:26px;
  clip-path:var(--hex); background:var(--grad-honey); }
.heroxp .pill b .i { width:14px; height:14px; color:var(--ink); }

.heroxp .hero-title {
  font:800 clamp(2.3rem,5.2vw,4.3rem)/1.04 var(--font-display);
  letter-spacing:-.02em; color:var(--text); margin:1.2rem 0 1.3rem; text-transform:none;
}
.heroxp .hero-title em { font-style:normal; position:relative; white-space:nowrap; }
.heroxp .hero-title em span {
  background:var(--grad-honey); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.heroxp .hero-title em::after {
  content:""; position:absolute; left:0; right:0; bottom:.02em; height:.14em; z-index:-1;
  background:var(--grad-honey); opacity:.4; border-radius:999px; transform-origin:left;
  animation:hx-underline 1.4s .4s var(--ease) both;
}
.heroxp .hero-desc { font-size:clamp(1rem,1.4vw,1.1rem); color:var(--muted);
  max-width:48ch; line-height:1.65; margin:0 0 1.9rem; }

.heroxp .hero-cta { display:flex; flex-wrap:wrap; gap:.9rem; }
.heroxp .btn {
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; text-decoration:none;
  font:700 .95rem/1 var(--font-display); border-radius:999px; padding:.85rem 1.4rem;
  border:1px solid transparent; color:var(--ink);
  transition:transform .3s var(--spring), box-shadow .3s, border-color .3s, background .3s;
}
.heroxp .btn-lg { padding:1rem 1.75rem; font-size:1rem; }
.heroxp .btn-primary { background:var(--grad-honey); color:var(--ink);
  box-shadow:0 16px 32px -14px rgb(240 162 30 / .85); }
.heroxp .btn-primary:hover { transform:translateY(-2px); box-shadow:0 20px 40px -14px rgb(240 162 30 / .95); }
.heroxp .btn-outline { background:var(--surface); color:var(--text); border-color:var(--border); }
.heroxp .btn-outline:hover { border-color:var(--honey); transform:translateY(-2px); }
.heroxp .btn .i { width:18px; height:18px; }

.heroxp .hero-stats {
  display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.5rem);
  margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--border);
}
.heroxp .hero-stats .stat-item { display:flex; flex-direction:column; gap:.1rem; }
.heroxp .stat-number { font:800 clamp(1.5rem,2.4vw,2rem)/1 var(--font-display); color:var(--text); }
.heroxp .stat-label { font-size:.82rem; color:var(--muted); }

@keyframes hx-underline { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* ==========================================================================
   SCÈNE 3D « filet de miel » (porté de hero.css, préfixé .heroxp / hx-)
   ========================================================================== */
.heroxp .hero-stage {
  position:relative; width:min(100%,560px); aspect-ratio:1; margin-inline:auto;
  perspective:1300px; container-type:inline-size;
}
.heroxp .scene {
  --rx:0deg; --ry:0deg;
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform 1s var(--ease);
}
.heroxp .sway { position:absolute; inset:0; transform-style:preserve-3d;
  animation:hx-sway 12s ease-in-out infinite alternate; }
.heroxp .stage-glow {
  position:absolute; inset:10%; border-radius:50%;
  background:radial-gradient(circle, var(--glow), transparent 68%); filter:blur(10px);
  transform:translateZ(-240px); animation:hx-breathe 6s ease-in-out infinite;
}
.heroxp .tilt-zones { position:absolute; inset:-4%; z-index:5; display:grid;
  grid-template:repeat(3,1fr) / repeat(3,1fr); }
.heroxp .hero-stage:has(.tz:nth-child(-n+3):hover) .scene { --rx:8deg; }
.heroxp .hero-stage:has(.tz:nth-child(n+7):hover) .scene { --rx:-8deg; }
.heroxp .hero-stage:has(.tz:nth-child(3n+1):hover) .scene { --ry:-10deg; }
.heroxp .hero-stage:has(.tz:nth-child(3n):hover) .scene { --ry:10deg; }
.heroxp .hero-stage:has(.tz:hover) .sway { animation-play-state:paused; }

.heroxp .comb { position:absolute; left:50%; top:40%; width:0; height:0; transform-style:preserve-3d;
  transform:translateZ(-150px); animation:hx-comb-sway 14s ease-in-out infinite alternate; }
.heroxp .cell { position:absolute; width:21cqw; aspect-ratio:.866;
  left:calc(var(--x) * 22.3cqw - 10.5cqw); top:calc(var(--y) * 19.3cqw - 12.12cqw);
  clip-path:var(--hex); background:linear-gradient(160deg,#FFD46B,#C98200); }
.heroxp .cell b { position:absolute; inset:6%; clip-path:var(--hex); overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #2A2620, #0B0B0A 75%); }
.heroxp .cell b::before { content:""; position:absolute; inset:0; background:var(--pattern); opacity:.35; }
.heroxp .cell b::after { content:""; position:absolute; inset:0;
  background:linear-gradient(#FFE08A,#F9BC38 18%,#E39410 70%,#B86F00);
  box-shadow:inset 0 3px 0 rgb(255 245 215 / .7);
  transform:translateY(var(--f)); animation:hx-cell-fill 7s var(--d,0s) ease-in-out infinite alternate; }

.heroxp .pot-shadow { position:absolute; left:20%; width:60%; bottom:0; height:9%;
  background:radial-gradient(closest-side, rgb(0 0 0 / .32), transparent); transform:translateZ(0); }
.heroxp .pot { position:absolute; left:25%; bottom:4%; width:50%; transform:translateZ(30px);
  filter:drop-shadow(0 26px 24px rgb(0 0 0 / .3)); }
.heroxp .pot-drip { position:absolute; left:35.7%; top:61.6%; width:1.3cqw; height:1.3cqw; margin-left:-.65cqw;
  background:radial-gradient(circle at 35% 30%, #FFF1C2, #F9BC38 50%, #D98B10);
  border-radius:0 50% 50% 50%; transform:translateZ(31px) rotate(45deg) scale(0);
  animation:hx-pot-drip 5s 1s ease-in infinite; }

.heroxp .pour { position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(64px); }
.heroxp .dipper { position:absolute; left:33.8%; top:1%; width:54%;
  transform-origin:30% 95.4%; animation:hx-dip-rock 5s ease-in-out infinite alternate;
  filter:drop-shadow(0 18px 14px rgb(0 0 0 / .28)); }
.heroxp .stream { position:absolute; left:50%; top:20.5%; width:2.2cqw; height:29%; margin-left:-1.1cqw;
  clip-path:polygon(0 0, 100% 0, 72% 100%, 28% 100%); transform-origin:50% 0;
  background:linear-gradient(90deg,#7A4300,#D98B10 16%,#FFD46B 38%,#FFF4D0 47%,#FFC93C 62%,#C98200 84%,#7A4300);
  animation:hx-stream-wob 1.7s ease-in-out infinite alternate; }
.heroxp .stream::after { content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, transparent 0 16px, rgb(255 250 232 / .55) 16px 20px, transparent 20px 36px);
  animation:hx-flow .45s linear infinite; }

.heroxp .coil { position:absolute; left:50%; top:53.1%; width:0; height:0; transform-style:preserve-3d; }
.heroxp .coil::before { content:""; position:absolute; left:-6cqw; top:-2cqw; width:12cqw; height:3.2cqw; border-radius:50%;
  background:radial-gradient(60% 70% at 50% 35%, #FFE6A0, #F9BC38 55%, #D98B10 90%, transparent); }
.heroxp .coil i { --y:0cqw; --s:1;
  position:absolute; left:-4.2cqw; top:-4.2cqw; width:8.4cqw; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(#FFF0C0,#F9BC38 22%,#B86F00 48%,#F0A21E 74%,#FFF0C0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 1.25cqw), #000 calc(100% - 1.2cqw));
  mask:radial-gradient(farthest-side, transparent calc(100% - 1.25cqw), #000 calc(100% - 1.2cqw));
  transform:translateY(var(--y)) rotateX(74deg) rotateZ(0deg) scale(var(--s));
  animation:hx-coil 2.4s linear infinite; }
.heroxp .coil i:nth-child(1) { --y:-3.6cqw; --s:.45; }
.heroxp .coil i:nth-child(2) { --y:-2.9cqw; --s:.6; animation-delay:-.4s; }
.heroxp .coil i:nth-child(3) { --y:-2.2cqw; --s:.75; animation-delay:-.8s; }
.heroxp .coil i:nth-child(4) { --y:-1.5cqw; --s:.9; animation-delay:-1.2s; }
.heroxp .coil i:nth-child(5) { --y:-.8cqw; --s:1.05; animation-delay:-1.6s; }
.heroxp .coil i:nth-child(6) { --y:-.1cqw; --s:1.2; animation-delay:-2s; }

.heroxp .ripple { position:absolute; left:50%; top:53.1%; width:10cqw; height:1.9cqw; margin:-.95cqw 0 0 -5cqw;
  border-radius:50%; border:2px solid rgb(255 243 209 / .75); opacity:0; animation:hx-ripple 2.4s ease-out infinite; }
.heroxp .ripple.r2 { animation-delay:-1.2s; }
.heroxp .ripple.r3 { left:44.2%; top:51%; width:5cqw; height:1cqw; margin:-.5cqw 0 0 -2.5cqw; animation:hx-ripple-drop 3.6s .6s ease-out infinite; }
.heroxp .fall { position:absolute; left:44.2%; top:17.6%; width:1.5cqw; height:1.5cqw; margin-left:-.75cqw;
  background:radial-gradient(circle at 35% 30%, #FFF1C2, #F9BC38 50%, #C98200);
  border-radius:0 50% 50% 50%; transform:translateY(0) rotate(45deg) scale(0); animation:hx-fall 3.6s .6s infinite; }

.heroxp .float-card {
  position:absolute; z-index:6; display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem .7rem .7rem;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 30px 50px -25px var(--shadow-c), 0 0 0 1px rgb(249 188 56 / .1);
  transform:translateZ(var(--z)); animation:hx-bob 6s ease-in-out infinite; white-space:nowrap;
}
.heroxp .float-card.fc-1 { text-decoration:none; }
.heroxp .float-card img { width:46px; height:46px; border-radius:12px; background:var(--surface-2); }
.heroxp .float-card #heroCardImg { display:grid; place-items:center; width:46px; height:46px;
  border-radius:12px; background:var(--surface-2); font-size:1.9rem; line-height:1; overflow:hidden; flex-shrink:0; }
.heroxp .float-card strong { display:block; font:700 .9rem/1.2 var(--font-display); color:var(--text); }
.heroxp .float-card small, .heroxp .float-card #heroCardCat { color:var(--muted); font-size:.76rem; display:block; }
.heroxp .float-card .price strong { font-size:.95rem; color:var(--text); }
.heroxp .float-card .hex-ico { width:40px; height:44px; }
.heroxp .float-card .hex-ico .i { width:20px; height:20px; }
.heroxp .fc-1 { --z:110px; top:4%; left:-6%; cursor:pointer; }
.heroxp .fc-2 { --z:170px; top:31%; right:0; animation-delay:-2s; }
.heroxp .fc-3 { --z:90px; bottom:3%; left:-7%; animation-delay:-4s; }

.heroxp .hex-ico { display:grid; place-items:center; width:40px; height:44px; clip-path:var(--hex);
  background:var(--grad-honey); flex-shrink:0; }
.heroxp .hex-ico.dark { background:var(--ink); }
.heroxp .hex-ico .i { color:var(--ink); }
.heroxp .hex-ico.dark .i { color:var(--honey); }
.heroxp .stars { color:#F0A21E; letter-spacing:1px; }

.heroxp .fhex { position:absolute; width:var(--s); aspect-ratio:.866; clip-path:var(--hex);
  background:var(--grad-honey); transform:translateZ(var(--z)); animation:hx-bob 7s ease-in-out infinite; }
.heroxp .fhex.dark { background:var(--ink); }
.heroxp .fhex.ghost { background:rgb(249 188 56 / .25); }
.heroxp .fh-2 { --s:26px; --z:220px; bottom:30%; left:8%; animation-delay:-3s; }
.heroxp .fh-3 { --s:64px; --z:-80px; bottom:12%; right:10%; animation-delay:-5s; }
.heroxp .fh-4 { --s:22px; --z:140px; top:30%; left:10%; }

.heroxp .bee-fly { position:absolute; top:0; left:0; z-index:4; width:52px; pointer-events:none;
  offset-path:path("M 90 150 C 220 -10, 470 40, 500 210 S 360 540, 160 470 S -30 260, 90 150");
  offset-rotate:auto 90deg; animation:hx-fly 13s linear infinite;
  filter:drop-shadow(0 10px 8px rgb(0 0 0 / .25)); }

/* ---------- Keyframes ---------- */
@keyframes hx-sway { from { transform:rotateY(-9deg) rotateX(2deg); } to { transform:rotateY(9deg) rotateX(-2deg); } }
@keyframes hx-comb-sway { from { transform:translateZ(-150px) rotateY(-8deg); } to { transform:translateZ(-150px) rotateY(8deg); } }
@keyframes hx-cell-fill { to { transform:translateY(calc(var(--f) - 28%)); } }
@keyframes hx-dip-rock { from { rotate:-3deg; } to { rotate:3deg; } }
@keyframes hx-stream-wob { from { transform:skewX(-1.4deg); } to { transform:skewX(1.4deg); } }
@keyframes hx-flow { to { background-position:0 36px; } }
@keyframes hx-coil {
  0% { opacity:0; transform:translateY(-4.4cqw) rotateX(74deg) rotateZ(0deg) scale(.3); }
  12%,80% { opacity:1; }
  100% { opacity:0; transform:translateY(.4cqw) rotateX(74deg) rotateZ(-360deg) scale(1.45); }
}
@keyframes hx-ripple { 0% { opacity:.8; transform:scale(.8); } 100% { opacity:0; transform:scale(3.2); } }
@keyframes hx-ripple-drop {
  0%,66% { opacity:0; transform:scale(.3); }
  68% { opacity:.9; transform:scale(.4); }
  100% { opacity:0; transform:scale(2.4); }
}
@keyframes hx-fall {
  0% { transform:translateY(0) rotate(45deg) scale(0); opacity:1; }
  40% { transform:translateY(0) rotate(45deg) scale(1); animation-timing-function:cubic-bezier(.55,0,1,.45); }
  66% { transform:translateY(33cqw) rotate(45deg) scale(.9); opacity:1; }
  68%,100% { transform:translateY(33cqw) rotate(45deg) scale(0); opacity:0; }
}
@keyframes hx-pot-drip {
  0% { transform:translateZ(31px) translateY(0) rotate(45deg) scale(0); opacity:1; }
  30% { transform:translateZ(31px) translateY(0) rotate(45deg) scale(1); }
  85% { transform:translateZ(31px) translateY(8cqw) rotate(45deg) scale(.85); opacity:1; }
  100% { transform:translateZ(31px) translateY(9cqw) rotate(45deg) scale(.6); opacity:0; }
}
@keyframes hx-bob { 0%,100% { transform:translateZ(var(--z)) translateY(0); } 50% { transform:translateZ(var(--z)) translateY(-16px); } }
@keyframes hx-fly { to { offset-distance:100%; } }
@keyframes hx-breathe { 0%,100% { opacity:.7; scale:1; } 50% { opacity:1; scale:1.08; } }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .heroxp .hero-content { grid-template-columns:1fr; }
  .heroxp .hero-stage { order:2; width:min(100%,420px); }
}
@media (max-width:640px) {
  .heroxp .hero-stage { perspective:1000px; }
  .heroxp .float-card { padding:.5rem .7rem .5rem .5rem; gap:.55rem; }
  .heroxp .float-card img, .heroxp .float-card #heroCardImg { width:38px; height:38px; font-size:1.6rem; }
  .heroxp .fc-1 { left:0; top:3%; } .heroxp .fc-3 { left:-2%; bottom:0; } .heroxp .fc-2 { display:none; }
  .heroxp .bee-fly { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .heroxp .coil i { animation:none !important; }
  .heroxp .fall, .heroxp .ripple, .heroxp .pot-drip, .heroxp .bee-fly { display:none; }
  .heroxp .sway, .heroxp .comb, .heroxp .stage-glow { animation:none !important; }
}