/* Section « fruits » – thème matcha (Strawberry Matcha Latte)
   Tout est préfixé .fh pour ne pas toucher au reste du site. */

.fh{
  --fh-bg1:#6d9a3c; --fh-bg2:#2c5420; --fh-bg3:#0a1a08;   /* vert matcha */
  --fh-accent:#ff4d6d;                                      /* fraise */
  --fh-outline:rgba(236,255,200,.42);
  --fh-glow1:rgba(255,255,230,.55); --fh-glow2:rgba(190,230,120,.25);
  --fh-cta-ink:#1d3a14; --fh-sub:#eaf5d3;
  --fh-font:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  --fh-word-size:clamp(80px,20vw,280px);
  position:relative; overflow:hidden; isolation:isolate; padding-top:24px; color:#fff;
  background:radial-gradient(ellipse at 50% 45%, var(--fh-bg1) 0%, var(--fh-bg2) 55%, var(--fh-bg3) 100%);
}
.fh *{box-sizing:border-box}
.fh-stage{
  position:relative; width:min(1100px,100%); margin:0 auto;
  height:min(88vh,780px);
  height:min(88svh,780px);
}

/* mot géant en contour derrière le pot */
.fh-word{
  position:absolute; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none;
  font-family:var(--fh-font); font-size:var(--fh-word-size); letter-spacing:.02em; line-height:1;
  color:transparent; -webkit-text-stroke:2px var(--fh-outline); opacity:.55; white-space:nowrap; text-transform:uppercase;
}
/* lueur derrière le pot */
.fh-glow{
  position:absolute; left:50%; top:46%; width:min(70vw,640px); aspect-ratio:1; z-index:0; opacity:0;
  transform:translate(-50%,-50%); filter:blur(30px);
  background:radial-gradient(circle, var(--fh-glow1) 0%, var(--fh-glow2) 40%, transparent 65%);
}

/* produit au centre */
.fh-tub{
  position:absolute; left:50%; top:48%; width:clamp(150px,20vw,255px); z-index:3; opacity:0;
  transform:translate(-50%,-50%); filter:drop-shadow(0 40px 50px rgba(0,0,0,.55));
}
.fh-tub img,.fh-tub svg,.fh-tub canvas{display:block;width:100%;height:auto}

/* éléments : .fh-fruit (position + entrée) > .fh-par (parallaxe) > .fh-float (flottement) > img */
.fh-fruit{position:absolute;opacity:0;will-change:transform;pointer-events:none}
.fh-par{display:block;transform:translate(calc(var(--fh-mx,0) * var(--fh-d,0) * 2px), calc(var(--fh-my,0) * var(--fh-d,0) * 2px))}
.fh-float{display:block;animation:fh-float 5s ease-in-out infinite alternate}
.fh-fruit img{display:block;width:100%;height:auto}
@keyframes fh-float{
  from{transform:translateY(-9px) rotate(-2.5deg)}
  to{transform:translateY(11px) rotate(2.5deg)}
}

/* thème bleu nuit (style Yava) */
.fh[data-theme="blue"]{
  --fh-bg1:#0b2a6b; --fh-bg2:#04123a; --fh-bg3:#01060f;
  --fh-outline:rgba(255,59,87,.5);
  --fh-glow1:rgba(255,90,110,.45); --fh-glow2:rgba(80,130,255,.22);
  --fh-cta-ink:#04123a; --fh-sub:#c3cdea;
  --fh-word-size:clamp(52px,12vw,176px);
}

/* texte */
.fh-info{position:relative;z-index:6;text-align:center;padding:0 16px 64px;margin-top:-10px}
.fh-info h2{
  margin:0; font-family:var(--fh-font); font-weight:400; letter-spacing:.04em; line-height:1.1;
  font-size:clamp(28px,4.4vw,52px); text-shadow:0 4px 24px rgba(0,0,0,.55);
}
.fh-info p{margin:8px 0 0; color:var(--fh-sub); font-size:clamp(14px,1.6vw,17px); text-shadow:0 2px 12px rgba(0,0,0,.5)}
.fh-cta{
  display:inline-block; margin-top:18px; text-decoration:none; padding:13px 30px; border:0; border-radius:0px; cursor:pointer;
  background:#fff; color:var(--fh-cta-ink);
  font-family:inherit; font-weight:700; font-size:16px; line-height:1;
  transition:transform .2s;
}
.fh-cta:hover{transform:translateY(-2px)}
.fh-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ============================================================
   Section fruits — responsive (tablette + mobile)
   ============================================================ */

/* Appareils tactiles : pas de souris, donc pas de parallaxe */
@media (hover: none) {
  .fh-par { transform: none; }
}

/* ── Tablette ── */
@media (max-width: 992px) {
  .fh { --fh-word-size: clamp(64px, 18vw, 200px); padding-top: 32px; }
  .fh[data-theme="blue"] { --fh-word-size: clamp(48px, 12vw, 140px); }

  .fh-stage {
    height: clamp(460px, 78vh, 640px);
    height: clamp(460px, 78svh, 640px);
  }
  .fh-tub  { width: clamp(150px, 26vw, 220px); }
  .fh-info { padding: 0 28px 64px; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .fh { --fh-word-size: clamp(48px, 17vw, 120px); padding-top: 20px; }
  .fh[data-theme="blue"] { --fh-word-size: clamp(36px, 12vw, 90px); }

  /* Hauteur proportionnelle à la largeur : plus de scène géante sur téléphone */
  .fh-stage { height: clamp(380px, 118vw, 560px); }
  .fh-word  { -webkit-text-stroke-width: 1.5px; }
  .fh-glow  { width: 90vw; filter: blur(22px); }
  .fh-tub   { top: 50%; width: clamp(120px, 38vw, 190px); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .5)); }

  /* Flottement plus discret */
  .fh-float { animation-name: fh-float-sm; }

  .fh-info { margin-top: 0; padding: 0 16px 48px; }
  .fh-info h2 { font-size: clamp(30px, 9vw, 44px); max-width: 16ch; margin-inline: auto; }
  .fh-info p  { font-size: 14px; margin-top: 10px; }

  /* Bouton pleine largeur, cible tactile confortable */
  .fh-cta { display: block; width: 100%; max-width: 360px; margin: 20px auto 0; padding: 16px 24px; font-size: 14px; }
}

@keyframes fh-float-sm {
  from { transform: translateY(-5px) rotate(-1.5deg); }
  to   { transform: translateY(6px)  rotate(1.5deg); }
}

/* ── Petits téléphones ── */
@media (max-width: 380px) {
  .fh-stage { height: clamp(340px, 124vw, 460px); }
  .fh-tub   { width: clamp(110px, 40vw, 150px); }
  .fh-info h2 { font-size: 28px; }
}

/* Mouvement réduit : doit rester EN DERNIER pour l'emporter sur les media queries */
@media (prefers-reduced-motion: reduce) {
  .fh-float { animation: none; }
}