/* Accueil v2 (spec 19 §2.1, spec 20 §3.12-3.14, §4). Chargé seulement sur front-page.php. */

/* ---------- Hero : soleil rayé CSS, fleur dedans, palmiers + feuilles ---------- */
.hero-v2 { --bud: min(75vw, 360px); --sun: calc(var(--bud) * .95); --grid: 44px; min-height: 0; display: flex; flex-direction: column; padding: 70px 0 var(--grid); /* header superposé (catalog.css) */
  background: linear-gradient(180deg, #1A0B2E 0%, #2B1250 34%, #6A1B6E 58%, #C2307E 76%, #FF8A3D 90%, #FFC94A 100%); }
.hero-v2 .hero-inner { padding-top: var(--sp-3); padding-bottom: var(--sp-2); }
.hero-v2 .script { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.6rem); }
.hero-v2 h1 { font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.5rem); max-width: 15ch; margin-bottom: var(--sp-3); }
.hero-v2 .lead { margin-bottom: 0; }
.hero-v2 .hero-ctas { margin: var(--sp-4) 0 var(--sp-3); gap: var(--sp-3); }
@media (max-width: 599px) {
  .hero-v2 .hero-ctas { gap: 0 var(--sp-3); margin-bottom: var(--sp-2); }
  .hero-v2 .btn--ghost { --bg: transparent; min-height: 44px; border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; padding: 0 .4rem; }
}
.hero-scene { position: relative; z-index: 1; height: calc(var(--bud) * 1.12); overflow: hidden; pointer-events: none; }
.hero-v2::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--grid); height: 3px; background: var(--c-teal); z-index: 3; } /* horizon */
.hero-sun { position: absolute; left: 50%; bottom: 0; width: var(--sun); aspect-ratio: 1; translate: -50% 22%; border-radius: 50%;
  background: linear-gradient(180deg, #FFC94A 0%, #FF8A3D 55%, #FF4F9A 100%);
  -webkit-mask: linear-gradient(180deg, #000 0 50%, transparent 50% 53%, #000 53% 60%, transparent 60% 64%, #000 64% 70%, transparent 70% 75%, #000 75% 80%, transparent 80% 86%, #000 86%);
          mask: linear-gradient(180deg, #000 0 50%, transparent 50% 53%, #000 53% 60%, transparent 60% 64%, #000 64% 70%, transparent 70% 75%, #000 75% 80%, transparent 80% 86%, #000 86%); }
.hero-scene::before { content: ""; position: absolute; left: 50%; bottom: 0; width: calc(var(--sun) * 1.6); aspect-ratio: 1; translate: -50% 40%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 138, 61, .45), transparent); }
/* Fleur détourée : posée sur l'horizon, devant les bandes (image LCP). */
/* Fleur illustrée (700×800) : grande, devant le soleil et les palmiers, elle déborde du disque vers le haut. aspect-ratio = pas de CLS. */
.hero-bud { position: absolute; z-index: 3; left: 50%; bottom: 0; width: var(--bud); aspect-ratio: 7 / 8; translate: -50% 3%; }
.hero-bud img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 22px rgba(255, 138, 61, .5)) drop-shadow(0 8px 0 rgba(26, 11, 46, .45)); }
/* Repli sans détourage : photo ronde dans le soleil, le blanc du JPG fondu (classe .ph). */
.hero-bud--round { width: calc(var(--sun) * .52); height: auto; z-index: 2; aspect-ratio: 1; bottom: calc(var(--sun) * .1); translate: -50% 0; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--c-night), 0 0 36px -4px rgba(255, 138, 61, .9); }
.hero-bud--round img { filter: none; object-fit: cover; height: 100%; scale: 1.15; }
.palms { position: absolute; bottom: 0; height: 100%; width: auto; max-width: 48%; z-index: 2; }
.palms--l { left: -6%; } .palms--r { right: -6%; }
.hero-v2 .hero-grid { height: var(--grid); }
.leaf-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: leafSway var(--d, 5s) ease-in-out infinite; }
@keyframes leafSway {
  0%, 100% { transform: rotate(0) skewX(0); }
  30% { transform: rotate(var(--a, 5deg)) skewX(-2deg); }
  55% { transform: rotate(calc(var(--a, 5deg) * -.4)) skewX(1deg); }
  75% { transform: rotate(calc(var(--a, 5deg) * .6)) skewX(-1deg); }
}
.palms--r .anim-palm { animation-duration: 8.5s; animation-delay: -2s; }
@media (min-width: 900px) {
  .hero-v2 { --sun: min(36vw, 440px); --grid: 76px; display: block; padding-bottom: 0; }
  /* Desktop : la fleur se règle sur la hauteur de la scène (~68 %), le soleil (64 %) reste derrière, plus bas qu'elle. */
  .hero-v2 .hero-bud:not(.hero-bud--round) { width: auto; height: 68%; max-width: 44vw; left: 52%; }
  .hero-v2 .hero-sun { width: auto; height: 64%; left: 52%; }
  .hero-v2 .hero-inner { padding-top: var(--sp-4); padding-bottom: calc(var(--grid) + var(--sp-4)); }
  .hero-v2 .hero-inner > * { max-width: 560px; }
  .hero-scene { position: absolute; inset: 0 0 var(--grid) 42%; height: auto; }
  .palms { height: 78%; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-v2 .hero-bud:not(.hero-bud--round), .hero-v2 .hero-sun { left: 57%; } /* le texte occupe 560 px : la fleur se décale pour ne pas le toucher */
}

/* Entrée du hero (une fois) ; boucles en pause hors écran (.is-off) ou via le bouton pause (html.is-calm). */
@media (prefers-reduced-motion: no-preference) {
  .hero-v2 .script { animation: rise .8s .1s var(--ease) both; }
  .hero-v2 h1 { animation: rise .9s .25s var(--ease) both; }
  .hero-v2 .lead, .hero-v2 .hero-ctas, .hero-v2 .hero-legal { animation: rise .9s .6s var(--ease) both; }
  .hero-sun { animation: sunRise 1.2s var(--ease) both; }
  .hero-bud { animation: budIn .7s .15s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes sunRise { from { transform: translateY(40%); opacity: 0; } }
@keyframes budIn { from { opacity: .01; transform: scale(.9); } }
.hero-v2.is-off *, html.is-calm .hero-v2 *, html.is-calm .marquee * { animation-play-state: paused !important; }
/* En pause, les entrées (une fois) sautent à leur état final, sinon elles restent figées à opacité 0. */
html.is-calm .hero-v2 :is(.script, h1, .lead, .hero-ctas, .hero-legal, .hero-sun, .hero-bud), html.is-calm .medal-strip li { animation: none; }
.hero-pause { position: absolute; z-index: 4; left: var(--sp-3); bottom: var(--sp-3); width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--c-sand); background: rgba(26, 11, 46, .6); color: var(--c-sand); }
.hero-pause::before { content: ""; position: absolute; inset: 13px 15px; border: solid currentColor; border-width: 0 4px; }
.hero-pause[aria-pressed="true"]::before { inset: 12px 12px 12px 16px; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* ---------- Marquee « fréquence » (repris de .newsbar) ---------- */
.marquee { display: flex; background: var(--c-night); color: var(--c-sand); border-block: 3px solid var(--c-pink); overflow: hidden; font: .8rem/1 var(--f-mono); letter-spacing: .04em; }
.marquee-tag { flex: none; display: grid; place-items: center; padding: .9rem 1rem; background: var(--c-pink); color: var(--c-night); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.marquee-track { display: flex; flex: 1; overflow: hidden; white-space: nowrap; align-items: center; }
.marquee-track p { flex: none; margin: 0; animation: ticker 40s linear infinite; }
.marquee-track span { padding: 0 1.2rem; }
.marquee-track span::before { content: "☀"; color: var(--c-sun); margin-right: 1.2rem; }
.marquee:hover p, .marquee:focus-within p { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-100%); } }
@media (max-width: 599px) { .marquee-tag { font-size: .75rem; padding: .8rem .6rem; } }
@media (prefers-reduced-motion: reduce) { .marquee-track { overflow-x: auto; } .marquee-track p[aria-hidden] { display: none; } }

/* ---------- Médaillon variété (spec 20 §3.12) ---------- */
.medal { position: relative; display: block; aspect-ratio: 1; isolation: isolate; }
.medal-sun { position: absolute; inset: 6%; border-radius: 50%; background: linear-gradient(180deg, var(--v1), var(--v2)); box-shadow: 0 0 0 3px var(--c-night);
  -webkit-mask: linear-gradient(180deg, #000 0 58%, transparent 58% 62%, #000 62% 69%, transparent 69% 74%, #000 74% 81%, transparent 81% 87%, #000 87%);
          mask: linear-gradient(180deg, #000 0 58%, transparent 58% 62%, #000 62% 69%, transparent 69% 74%, #000 74% 81%, transparent 81% 87%, #000 87%); }
/* Photo dans un vrai cercle, fleur entière : l'image remplit le diamètre, sans zoom (la géométrie des cartes vient de catalog.css). */
.medal-photo { position: absolute; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--c-night); background: color-mix(in srgb, var(--v1, #FFC94A) 22%, #fff); transition: transform var(--dur-2, .2s) var(--ease); }
.medal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 50%; transform: scale(1.12); }
.medal-strip .medal-photo { left: 19%; top: 13%; width: 62%; aspect-ratio: 1; }
.medal-flower { position: absolute; z-index: 1; left: 50%; bottom: 12%; width: 80%; height: auto; translate: -50% 0; filter: drop-shadow(0 4px 0 rgba(26, 11, 46, .35)); transition: transform .2s var(--ease); }
.medal::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 11%; height: 3px; background: var(--c-night); z-index: 2; border-radius: 2px; }
a:hover .medal-photo, a:focus-visible .medal-photo, a:hover .medal-flower, a:focus-visible .medal-flower { transform: translateY(-5px) rotate(-3deg); }

/* ---------- Les 8 variétés : bande juste sous le hero ---------- */
.varieties-v2 { background: var(--c-sand); padding: var(--sp-5) 0 var(--sp-4); }
/* Mobile : une rangée au doigt, la 3e médaille coupée invite à faire défiler. */
.medal-strip { list-style: none; margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-4) var(--sp-2); display: grid; grid-auto-flow: column; grid-auto-columns: 116px; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--sp-4); scrollbar-width: thin; }
.medal-strip li { scroll-snap-align: start; }
.medal-strip a { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; text-decoration: none; color: var(--c-ink); border-radius: var(--r-md); padding-bottom: .2rem; }
.medal-strip .medal { width: 112px; }
.medal-strip b { font: italic 800 1.1rem/1.05 var(--f-display); text-transform: uppercase; }
.medal-strip small { font: 700 .76rem/1.2 var(--f-mono); color: var(--c-pink-deep); }
/* Tablette et plus : tout d'un coup d'œil, en 2 rangées équilibrées centrées (9 → 5 + 4, 8 → 4 + 4) ; --cols vient de front-page.php. */
@media (min-width: 768px) {
  .varieties-v2 { padding: var(--sp-7) 0 var(--sp-6); }
  .medal-strip { --gap: clamp(1rem, 2.4vw, 2.5rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5) var(--gap); overflow: visible; margin: 0; padding: 0; }
  .medal-strip li { flex: 0 0 calc((100% - (var(--cols, 4) - 1) * var(--gap)) / var(--cols, 4)); max-width: 210px; }
  .medal-strip .medal { width: 100%; }
  .medal-strip b { font-size: clamp(1.15rem, .8rem + .7vw, 1.5rem); margin-top: var(--sp-1); }
  .medal-strip small { font-size: .82rem; }
}

/* ---------- Échelle des prix au gramme ---------- */
.ladder-sec { background: linear-gradient(160deg, #1A0B2E 0%, #2B1250 100%); }
.ladder-grid { display: grid; gap: var(--sp-6); align-items: center; }
.ladder-note { font: .8rem/1.4 var(--f-mono); color: var(--c-muted-night); }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ladder li { position: relative; display: grid; grid-template-columns: 6.6rem 1fr 7.2rem; align-items: center; gap: var(--sp-3); }
.ladder-fmt { font-size: .78rem; color: var(--c-muted-night); line-height: 1.1; }
.ladder-fmt b { display: block; font: italic 800 1.35rem/1 var(--f-display); color: var(--c-white); }
.ladder-bar { height: 16px; border: 2px solid var(--c-night-3); border-radius: var(--r-pill); overflow: hidden; }
.ladder-bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--g-cta); transform-origin: left; }
.ladder-ppg { font: 700 .95rem/1.1 var(--f-mono); color: var(--c-sun); text-align: right; }
.ladder-ppg em { display: block; font-style: normal; font-size: .72rem; color: var(--c-teal); }
.ladder .is-top .ladder-bar { border-color: var(--c-sun); }
.ladder .sticker { position: absolute; left: 6.6rem; top: -.6rem; margin-left: var(--sp-3); }
@media (min-width: 900px) { .ladder-grid { grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); } }

/* Sticker (spec 20 §3.5) */
.home .sticker { display: inline-block; padding: .2rem .65rem; border: 2px solid var(--c-night); border-radius: var(--r-pill); font: italic 800 .75rem/1 var(--f-display);
  text-transform: uppercase; letter-spacing: .04em; color: var(--c-night); background: var(--c-sun); box-shadow: 3px 3px 0 var(--c-night); transform: rotate(-4deg); }

/* ---------- Pack découverte : visuel IA (pack-bg) ou 8 sachets aux couleurs des variétés ---------- */
.pack-v2 { position: relative; border: 3px solid var(--c-night); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); background: var(--c-night); padding: var(--sp-5); }
.pack-v2.has-bg { padding: 0; aspect-ratio: 3 / 2; }
.pack-bg { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-lg) - 3px); }
.pack-sachets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.pack-sachets li { aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px; border: 2px solid var(--c-night); border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, var(--v1) 0 55%, var(--v2) 55%); color: var(--c-night); font: italic 800 .72rem/1.05 var(--f-display); text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(255, 243, 230, .25); }
.pack-sachets span { font: 400 .58rem/1 var(--f-mono); margin-bottom: 2px; }
.pack-sticker { position: absolute; right: -8px; top: -14px; background: var(--g-cta) !important; }

/* ---------- Du champ au sachet ---------- */
.field-sec { background: var(--c-sand-2); }
.field-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: step; }
.field-steps li { position: relative; background: var(--c-white); border: 2px solid var(--c-night); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: 4px 4px 0 var(--c-night); counter-increment: step; }
.field-steps li::after { content: "0" counter(step); position: absolute; right: var(--sp-4); top: var(--sp-3); font: italic 800 2.4rem/1 var(--f-display); color: var(--c-sand-2); -webkit-text-stroke: 2px var(--c-night); }
.field-steps .ico { width: 40px; height: 40px; fill: none; stroke: var(--c-pink-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field-steps h3 { margin: var(--sp-3) 0 var(--sp-2); }
.field-steps p { margin: 0; color: var(--c-muted); }
@media (min-width: 900px) { .field-steps { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ : petit soleil à la place du + ---------- */
.home .faq summary { min-height: 48px; align-items: center; }
.home .faq summary::after, .home .faq details[open] summary::after { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c-sun);
  box-shadow: 0 0 0 2px var(--c-night), 0 0 0 5px var(--c-sand), 0 0 0 7px var(--c-orange); transition: transform .3s var(--ease); }
.home .faq details[open] summary::after { transform: scale(.8); background: var(--c-pink); }

/* ---------- Newsletter ---------- */
.news-grid { display: grid; gap: var(--sp-5); align-items: end; }
.news-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Texte sur nuit teintée « ocean » : le dégradé plein (teal → violet) ne tenait pas le contraste AA. */
.newsletter.dark { background: linear-gradient(135deg, rgba(46, 230, 214, .22), rgba(139, 92, 246, .32)), var(--c-night); }
.news-legal { font-size: var(--fs-xs); color: var(--c-muted-night); margin: var(--sp-2) 0 0; }
@media (min-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Entrées au scroll (CSS scroll-driven, sans JS ; repli : visible) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home .section h2, .ladder-sec h2 { animation: wipeIn linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
    .ladder-bar i { animation: barIn linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
    .field-steps li, .pack-sachets li, .home .grid-products > li { animation: cardIn linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}
@media (prefers-reduced-motion: no-preference) { .medal-strip li { animation: rise .6s calc(.4s + var(--i) * 60ms) var(--ease) both; } }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 -20px 0 -20px); opacity: 1; } }
@keyframes barIn { from { transform: scaleX(0); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) rotate(1.4deg) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .hero-pause { display: none; } }