/* ============================================================
   VIIR — Accueil animé « De la prairie au sachet »
   Par défaut (sans JavaScript, ou animations réduites) : mise en page
   statique lisible. La classe .hf-actif, posée par js/hero-foin.js,
   transforme la section en scène épinglée pilotée par le défilement.
   ============================================================ */

.hero-foin { position: relative; background: var(--ivoire); }

/* ---------- Contenu commun aux deux modes ---------- */

.hf-chapitre h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.4vw, 3.7rem);
  line-height: 1.06;
  margin: 0 0 1.2rem;
}
.hf-chapitre h2 em { font-style: italic; color: var(--vert-bandeau); }
.hf-chapitre p {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--encre-douce);
  margin: 0;
  max-width: 26rem;
}

/* Numéro d'étape : « 01 ——— LA PRAIRIE » */
.hf-chapitre .hf-num {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.3rem;
}
.hf-num em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--or);
}
.hf-num i { width: 2.6rem; border-top: 1px solid var(--or); opacity: 0.6; }
.hf-num .label { color: var(--vert-bandeau); font-size: 0.62rem; }

/* Étape finale : le produit */
.hf-chapitre-produit h2 em { font-weight: 600; color: var(--encre); }
.hf-cibles {
  display: block;
  color: var(--or);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  margin: -0.3rem 0 1.3rem;
}
.hf-pied {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 1.7rem;
}
.hf-pied img { height: 3rem; width: auto; }
.hf-lien {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--vert-bandeau);
  border-bottom: 1px solid var(--or);
  padding-bottom: 0.3rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.hf-lien:hover { color: var(--encre); border-color: var(--vert-bandeau); }
.hf-chapitre .hf-ouverture {
  margin: 1.7rem 0 0;
  font-family: var(--sans);
  font-size: 0.56rem;
  color: var(--encre-douce);
  opacity: 0.7;
}

.hf-etiquette { position: relative; }
.hf-etiquette svg { width: 100%; height: auto; display: block; }

/* ---------- Mode statique (par défaut) ---------- */

.hero-foin:not(.hf-actif) .hf-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem 5rem;
}
.hero-foin:not(.hf-actif) .hf-canvas,
.hero-foin:not(.hf-actif) .hf-lumiere,
.hero-foin:not(.hf-actif) .hf-rail,
.hero-foin:not(.hf-actif) .hf-indice { display: none; }
.hero-foin:not(.hf-actif) .hf-titre { order: 0; }
.hero-foin:not(.hf-actif) .hf-chapitre {
  order: 1;
  max-width: 36rem;
  margin: 0 auto 3.6rem;
  text-align: center;
}
.hero-foin:not(.hf-actif) .hf-chapitre p { margin-left: auto; margin-right: auto; }
.hero-foin:not(.hf-actif) .hf-num,
.hero-foin:not(.hf-actif) .hf-pied { justify-content: center; }
.hero-foin:not(.hf-actif) .hf-produit { order: 2; width: min(20rem, 80vw); margin: 0 auto 2.6rem; }
.hero-foin:not(.hf-actif) .hf-etiquette { box-shadow: 0 22px 50px -18px rgba(13, 31, 10, 0.45); }
.hero-foin:not(.hf-actif) .hf-chapitre-produit { order: 3; }

/* ---------- Mode animé : scène épinglée ---------- */

/* Longueur de défilement de l'histoire (≈ 3,2 écrans) */
/* Un seul écran : l'histoire se joue toute seule (js/hero-foin.js), le défilement reste normal */
.hero-foin.hf-actif { height: 100vh; height: 100svh; }

.hf-actif .hf-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hf-actif .hf-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hf-actif .hf-canvas-fond { z-index: 1; }
.hf-actif .hf-canvas-avant { z-index: 3; pointer-events: none; }

/* Lumière chaude du séchage (opacité pilotée par le script) */
.hf-actif .hf-lumiere {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 82% 8%, rgba(236, 214, 150, 0.6), rgba(236, 214, 150, 0) 70%),
    linear-gradient(180deg, rgba(238, 222, 176, 0) 45%, rgba(226, 206, 146, 0.32) 100%);
}

/* Titre d'ouverture, au-dessus de la prairie */
.hf-actif .hf-titre {
  position: absolute;
  inset: 0;
  z-index: 4;
  min-height: 0;
  padding: 4.5rem 1.5rem 30svh;
  pointer-events: none;
  will-change: opacity, transform;
}
.hf-actif .hf-titre h1 > span { display: inline-block; }

/* Indice de défilement : un filet où descend une goutte d'or */
.hf-indice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin: 2.6rem 0 0;
}
.hf-indice .label { font-size: 0.56rem; color: var(--encre-douce); opacity: 0.75; }
.hf-indice i {
  position: relative;
  width: 1px;
  height: 2.8rem;
  background: rgba(138, 122, 74, 0.3);
  overflow: hidden;
}
.hf-indice i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: var(--or);
  animation: hf-goutte 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes hf-goutte { to { top: 100%; } }

/* Apparition du titre, déclenchée quand les polices sont prêtes (.hf-pret) */
.hf-actif .hf-titre .surtitre,
.hf-actif .hf-titre .hero-filets,
.hf-actif .hf-titre h1 > span,
.hf-actif .hf-titre h1 sup,
.hf-actif .hf-titre .soustitre,
.hf-actif .hf-titre .baseline,
.hf-actif .hf-titre .hf-indice { opacity: 0; }

.hf-pret .hf-titre .surtitre { animation: hf-monte 1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hf-pret .hf-titre .hero-filets { animation: hf-filet 1.5s 0.3s cubic-bezier(0.65, 0, 0.35, 1) both; }
.hf-pret .hf-titre h1 > span { animation: hf-lettre 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hf-pret .hf-titre h1 > span:nth-child(1) { animation-delay: 0.45s; }
.hf-pret .hf-titre h1 > span:nth-child(2) { animation-delay: 0.57s; }
.hf-pret .hf-titre h1 > span:nth-child(3) { animation-delay: 0.69s; }
.hf-pret .hf-titre h1 > span:nth-child(4) { animation-delay: 0.81s; }
.hf-pret .hf-titre h1 sup { animation: hf-monte 0.9s 1.25s both; }
.hf-pret .hf-titre .soustitre { animation: hf-monte 1s 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hf-pret .hf-titre .baseline { animation: hf-monte 1.2s 1.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hf-pret .hf-titre .hf-indice { animation: hf-monte 1s 2.4s both; }

@keyframes hf-monte {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes hf-filet {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: none; }
}
@keyframes hf-lettre {
  from { opacity: 0; transform: translateY(0.2em); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Étapes : colonne de gauche, opacité et position pilotées par le script */
.hf-actif .hf-chapitre {
  position: absolute;
  z-index: 4;
  left: clamp(1.5rem, 7vw, 7.5rem);
  top: 21svh;
  max-width: 27rem;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}
/* Halo ivoire discret derrière le texte : lisibilité au-dessus des herbes */
.hf-actif .hf-chapitre::before {
  content: "";
  position: absolute;
  inset: -3rem -4rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(245, 242, 236, 0.92), rgba(245, 242, 236, 0.65) 62%, rgba(245, 242, 236, 0));
}
.hf-actif .hf-chapitre-produit { top: 17svh; }

/* Étiquette produit : à droite, posée au-dessus du lit de foin */
.hf-actif .hf-produit {
  --hf-h: min(58svh, 33rem);
  position: absolute;
  z-index: 2;
  height: var(--hf-h);
  aspect-ratio: 340 / 440;
  right: clamp(2rem, 13vw, 14rem);
  top: calc(50% - var(--hf-h) * 0.56);
  perspective: 1400px;
  pointer-events: none;
}
.hf-actif .hf-etiquette {
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  box-shadow:
    0 2px 5px rgba(13, 13, 8, 0.08),
    0 26px 55px -20px rgba(13, 31, 10, 0.5);
}
.hf-actif .hf-etiquette svg { height: 100%; }

/* Reflet doré qui balaie l'étiquette à son arrivée */
.hf-actif .hf-reflet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 248, 225, 0.7) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 300% 100%;
  background-position: var(--reflet, 100%) 0;
  mix-blend-mode: soft-light;
}

/* Repère de progression, bord droit */
.hf-actif .hf-rail {
  position: absolute;
  z-index: 5;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hf-actif .hf-rail.visible { opacity: 1; }
.hf-rail::before {
  /* Filet vertical qui relie les points */
  content: "";
  position: absolute;
  right: 3.5px;
  top: 4px;
  bottom: 4px;
  border-right: 1px solid rgba(138, 122, 74, 0.35);
}
.hf-rail button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
}
.hf-rail button::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--or);
  border-radius: 50%;
  background: var(--ivoire);
  transition: background 0.3s ease, transform 0.3s ease;
}
.hf-rail button span {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hf-rail button.actif::after { background: var(--or); transform: scale(1.25); }
.hf-rail button.actif span,
.hf-rail button:hover span { opacity: 1; transform: none; }

/* ---------- Écrans étroits ou en portrait : texte en haut, produit en bas ---------- */

@media (max-width: 980px), (orientation: portrait) {
  .hf-actif .hf-titre { padding-bottom: 34svh; }
  .hf-actif .hf-chapitre,
  .hf-actif .hf-chapitre-produit {
    left: 1.5rem;
    right: 1.5rem;
    top: 5.6rem;
    max-width: 34rem;
    margin: 0 auto;
    text-align: center;
  }
  .hf-actif .hf-chapitre p { margin-left: auto; margin-right: auto; }
  .hf-actif .hf-num,
  .hf-actif .hf-pied { justify-content: center; }
  .hf-chapitre h2 { font-size: clamp(2rem, 8.5vw, 3rem); margin-bottom: 0.9rem; }
  .hf-chapitre p { font-size: 1.08rem; }
  .hf-pied { margin: 1rem 0 1.2rem; }
  .hf-pied img { height: 2.4rem; }
  .hf-actif .hf-ouverture { display: none; }
  .hf-actif .hf-rail { display: none; }
  .hf-actif .hf-produit {
    --hf-h: min(36svh, 23rem);
    right: auto;
    left: calc(50% - var(--hf-h) * 0.3864);
    top: auto;
    bottom: 12svh;
  }
}

/* Petits écrans : l'étape produit se resserre pour laisser voir l'étiquette */
@media (max-width: 980px) and (max-height: 780px), (orientation: portrait) and (max-height: 780px) {
  .hf-actif .hf-chapitre-produit .hf-desc { display: none; }
  .hf-actif .hf-chapitre-produit { top: 5rem; }
}

/* ============================================================
   Solution 3 (décision Meven, 07/10/2026) : prairie en fond vivant,
   titre et bouton visibles d'emblée, séquence « du champ au sachet »
   rejouée en boucle dans une vignette. Aucune intro, défilement normal.
   ============================================================ */

.hf-fond > .hf-scene > .hf-chapitre,
.hf-fond > .hf-scene > .hf-produit,
.hf-fond > .hf-scene > .hf-rail,
.hf-fond > .hf-scene > .hf-lumiere,
.hf-fond > .hf-scene > .hf-titre .hf-indice { display: none !important; }

.hf-fond .hf-titre { pointer-events: auto; padding: 5.5rem 1.5rem 36svh; }
.hf-cta { margin-top: 1.9rem; pointer-events: auto; }
.hf-actif .hf-titre .hf-cta { opacity: 0; }
.hf-pret .hf-titre .hf-cta { animation: hf-monte 1s 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* Vignette : la séquence en boucle (7 s), en haut à droite */
.hf-vignette {
  position: absolute;
  right: 6vw;
  top: 15svh;
  width: min(32vw, 28rem);
  z-index: 4;
  opacity: 0;
}
.hf-pret .hf-vignette { animation: hf-monte 1.2s 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hf-ecran {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F3EEDF;
  border: 1px solid var(--or);
  outline: 1px solid rgba(138, 122, 74, 0.4);
  outline-offset: 4px;
  box-shadow: 0 26px 50px -26px rgba(13, 31, 10, 0.45);
}
.hf-legende { text-align: center; margin: 0.8rem 0 0; font-size: 0.56rem; color: var(--or); }
.hf-mini { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; }
.hf-mc {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hf-coupe 7s linear infinite;
}
.hf-mc:nth-child(3n+1) { animation-delay: 0.1s; }
.hf-mc:nth-child(3n+2) { animation-delay: 0.2s; }
@keyframes hf-coupe {
  0%, 22% { transform: rotate(0); stroke: #7AAA45; }
  34%      { transform: rotate(78deg); stroke: #7AAA45; }
  48%      { transform: rotate(78deg); stroke: #C9A24A; }
  88%      { transform: rotate(78deg); stroke: #C9A24A; }
  100%     { transform: rotate(0); stroke: #7AAA45; }
}
.hf-metiq {
  position: absolute;
  left: 50%; top: 50%;
  width: 34%;
  transform: translate(-50%, -46%);
  animation: hf-etiq 7s linear infinite;
  filter: drop-shadow(0 10px 16px rgba(13, 31, 10, 0.3));
}
@keyframes hf-etiq {
  0%, 54% { opacity: 0; transform: translate(-50%, -34%); }
  64%     { opacity: 1; transform: translate(-50%, -46%); }
  90%     { opacity: 1; transform: translate(-50%, -46%); }
  100%    { opacity: 0; transform: translate(-50%, -46%); }
}
.hf-mtxt { position: absolute; left: 0; right: 0; top: 7%; text-align: center; font-size: 0.56rem; color: var(--or); }
.hf-mtxt span { position: absolute; left: 0; right: 0; opacity: 0; animation: hf-mtxt 7s linear infinite; }
.hf-mtxt span:nth-child(2) { animation-delay: 1.6s; }
.hf-mtxt span:nth-child(3) { animation-delay: 3.2s; }
.hf-mtxt span:nth-child(4) { animation-delay: 4.6s; }
@keyframes hf-mtxt { 0% { opacity: 0; } 4% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }

/* Grand écran paysage : le titre à gauche, la vignette à droite */
@media (min-width: 981px) and (orientation: landscape) {
  .hf-fond .hf-titre { align-items: flex-start; text-align: left; padding-left: 7vw; padding-right: 46vw; }
  .hf-fond .hf-titre .hero-filets { width: min(22rem, 36vw); }
  .hf-fond .hf-titre h1 { text-indent: 0; }
}
/* Petit écran ou portrait : vignette sous le titre, posée sur l'herbe */
@media (max-width: 980px), (orientation: portrait) {
  .hf-fond .hf-titre { padding-bottom: 44svh; }
  .hf-vignette { left: 50%; right: auto; top: auto; bottom: 6svh; transform: translateX(-50%); width: min(66vw, 20rem); }
  .hf-pret .hf-vignette { animation-name: hf-monte-centre; }
}
@keyframes hf-monte-centre {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hf-mc, .hf-metiq, .hf-mtxt span { animation: none; }
  .hf-metiq { opacity: 1; }
  .hf-mtxt span:last-child { opacity: 1; }
}

/* ---------- Vignette : le moteur en petit, en boucle (mode « boucle » de js/hero-foin.js) ---------- */

.hf-vignette-scene {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F3EEDF;
  border: 1px solid var(--or);
  outline: 1px solid rgba(138, 122, 74, 0.4);
  outline-offset: 4px;
  box-shadow: 0 26px 50px -26px rgba(13, 31, 10, 0.45);
}
.hf-vignette-scene.hf-actif { height: auto; }
.hf-vignette-scene .hf-scene { position: absolute; inset: 0; height: 100%; overflow: hidden; }
.hf-vignette-scene .hf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hf-vignette-scene .hf-canvas-fond { z-index: 1; }
.hf-vignette-scene .hf-canvas-avant { z-index: 3; pointer-events: none; }
.hf-vignette-scene .hf-chapitre {
  position: absolute;
  z-index: 4;
  left: 0; right: 0;
  top: 7%;
  max-width: none;
  margin: 0;
  text-align: center;
  font-size: 0.56rem;
  color: var(--or);
  opacity: 0;
  visibility: hidden;
}
.hf-vignette-scene .hf-produit {
  position: absolute;
  z-index: 2;
  left: 33%;
  right: auto;
  top: 11%;
  width: 34%;
  height: auto;
  aspect-ratio: 340 / 440;
  perspective: 900px;
}
.hf-vignette-scene .hf-etiquette { width: 100%; height: 100%; }
/* L'ancien habillage SVG de la vignette (tiges simplifiées) n'est plus utilisé */
.hf-ecran, .hf-mini, .hf-mc, .hf-metiq, .hf-mtxt { display: none; }

/* ---------- Essai (Meven, 07/10/2026) : sans herbe animée, une fine bande de foin en bas, légère ---------- */

.hf-sans-herbe > .hf-scene > .hf-canvas { display: none; }
.hf-foin {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  height: 24svh;
  background: url("https://images.pexels.com/photos/34154134/pexels-photo-34154134.jpeg?auto=compress&cs=tinysrgb&w=1600") center 62% / cover no-repeat;
  filter: saturate(0.85);
  opacity: 0;
  /* fondu vers le haut : le foin s'efface dans l'ivoire, sans bord */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.85) 55%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.85) 55%, #000 100%);
  pointer-events: none;
}
.hf-pret .hf-foin { animation: hf-foin-apparait 1.6s 0.3s ease-out both; }
@keyframes hf-foin-apparait { from { opacity: 0; } to { opacity: 0.9; } }
@media (max-width: 980px), (orientation: portrait) { .hf-foin { height: 18svh; } }