/* ============================================================
   MDJLABS — ProField · HERO « Le terrain remonte enfin proprement. »
   Swap namespace (pfh-) + teinte produit (--pf, ambre) du hero
   ProLearn. Le Hero N'EST PAS un
   scrollytelling : c'est l'OUVERTURE, portée par une animation
   d'entrée forte jouée UNE FOIS au chargement (geste signature :
   le wordmark PROLEARN atterrit depuis la profondeur → IMPACT
   tremor + poussière Canvas → le reste du contenu se révèle).
   Fond : amorce d'interface iso. Teinte produit teal --pl ; accent
   phosphore --acc. Version vitrine : CTA de conversion greffés.
   ⚠️ Le bloc `.plx-rail button.is-here { --acc }` de l'atelier a été
   RETIRÉ (non scopé → repeindrait le marqueur actif de toutes les
   scènes de la page assemblée). Le rail reste géré par prolearn-scroll.
   ============================================================ */

/* ============================================================
   SECTION HERO — ≈1 viewport, centré, profondeur iso
   ============================================================ */
.pfh-hero { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; padding: clamp(96px, 14vh, 150px) 0 clamp(60px, 9vh, 110px); overflow: hidden; }
.pfh-hero .ct { position: relative; z-index: 3; }
.pfh-inner { max-width: 1000px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }

/* -- amorce d'interface en perspective iso (fond, réactive au thème) -- */
.pfh-iso { position: absolute; left: 50%; top: 50%; width: min(120vw, 1500px); height: 120vh; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; perspective: 1600px; opacity: .34; }
.pfh-iso .hi-plane { position: absolute; inset: 12% 8%; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-42deg); animation: pfhIsoBreath 16s var(--ease) infinite alternate; }
@keyframes pfhIsoBreath { from { transform: rotateX(57deg) rotateZ(-44deg) translateZ(0); } to { transform: rotateX(52deg) rotateZ(-38deg) translateZ(26px); } }
.pfh-iso .hi-panel { position: absolute; border: 1px solid var(--acc-line); border-radius: var(--r-sm); background: color-mix(in oklab, var(--bg-1) 72%, transparent); box-shadow: 0 30px 70px -34px var(--acc-glow); display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.pfh-iso .hi-a { left: 2%;  top: 6%;  width: 40%; height: 24%; transform: translateZ(70px); }
.pfh-iso .hi-b { right: 4%; top: 2%;  width: 38%; height: 34%; transform: translateZ(38px); }
.pfh-iso .hi-c { left: 8%;  bottom: 8%; width: 34%; height: 30%; transform: translateZ(52px); }
.pfh-iso .hi-d { right: 6%; bottom: 4%; width: 40%; height: 28%; transform: translateZ(20px); }
.pfh-iso .hi-bar { height: 9px; border-radius: 999px; background: var(--acc-soft); }
.pfh-iso .hi-bar.sm { width: 54%; background: var(--line); }
.pfh-iso .hi-dots { display: flex; gap: 7px; margin-top: auto; }
.pfh-iso .hi-dots i { width: 9px; height: 9px; border-radius: 999px; background: var(--line-strong); }
.pfh-iso .hi-dots i:first-child { background: var(--acc); box-shadow: 0 0 8px var(--acc-glow); }
.pfh-iso .hi-spark { display: flex; align-items: flex-end; gap: 8px; height: 100%; }
.pfh-iso .hi-spark i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(var(--acc), var(--acc-soft)); opacity: .82; }
.pfh-iso .hi-ring { width: 46px; height: 46px; border-radius: 999px; border: 3px solid var(--acc-line); border-top-color: var(--acc); }
.pfh-iso .hi-line { height: 8px; border-radius: 999px; background: var(--line); }
.pfh-iso .hi-line.sm { width: 60%; }
.pfh-iso .hi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; height: 100%; }
.pfh-iso .hi-grid i { border-radius: var(--r-xs); background: var(--bg-2); }
.pfh-iso .hi-grid i:nth-child(3n) { background: var(--acc-soft); }
@media (max-width: 820px) { .pfh-iso { opacity: .18; } }

/* -- canvas poussière (au-dessus du fond, sous/autour du texte) -- */
.pfh-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* ============================================================
   CONTENU DU HERO
   ============================================================ */
.pfh-eyebrow { font-family: var(--ff-mono); font-size: clamp(10px, 1vw, 12.5px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 clamp(20px, 3.6vh, 34px); text-wrap: balance; }
.pfh-eyebrow .wm { letter-spacing: 0.06em; font-size: 1em; }
.pfh-eyebrow b { color: var(--acc); font-weight: 500; }

.pfh-pain { font-family: var(--ff-mono); font-size: clamp(12px, 1.3vw, 16px); letter-spacing: 0.02em; color: var(--fg-1); margin: 0 0 clamp(20px, 3vh, 30px); }
.pfh-pain::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--danger, #FF7E7E); box-shadow: 0 0 8px var(--danger-soft, rgba(255,126,126,.4)); margin-right: 10px; vertical-align: middle; }

/* -- LE WORDMARK QUI ATTERRIT (héros du geste) -- */
.pfh-wm { margin: 0 0 clamp(14px, 2.4vh, 26px); line-height: 1; will-change: transform, opacity; }
.pfh-wm .wm { font-size: clamp(52px, 12.5vw, 176px); letter-spacing: 0.02em; line-height: 1; text-shadow: 0 0 60px var(--pf-glow); }
.pfh-wm .wm b { color: var(--pf); }

.pfh-triad { font-family: var(--ff-sans); font-size: clamp(28px, 5vw, 66px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; margin: 0 0 clamp(22px, 3.4vh, 36px); color: var(--fg-0); text-wrap: balance; }
.pfh-triad em { font-style: normal; color: var(--pf); text-shadow: 0 0 44px var(--pf-glow); }

.pfh-pitch { max-width: 66ch; margin: 0 0 clamp(28px, 4.2vh, 44px); font-size: clamp(15px, 1.55vw, 20px); line-height: 1.58; color: var(--fg-1); text-wrap: pretty; }
.pfh-pitch b { color: var(--fg-0); font-weight: 600; }

/* -- CTA de conversion (greffés version vitrine) -- */
.pfh-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 clamp(28px, 4.2vh, 44px); }

/* -- bandeau normes (rangée mono discrète) -- */
.pfh-norms { max-width: 860px; margin: 0 0 clamp(30px, 4.6vh, 48px); }
.pfh-norms-lbl { font-family: var(--ff-mono); font-size: clamp(9.5px, .95vw, 11.5px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 14px; text-wrap: balance; }
.pfh-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 8px; }
.pfh-tags li { font-family: var(--ff-mono); font-size: clamp(9px, .92vw, 11px); letter-spacing: 0.06em; color: var(--fg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 9px; background: color-mix(in oklab, var(--bg-1) 60%, transparent); font-feature-settings: "zero","tnum"; }

/* -- bouton « défiler » -- */
.pfh-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: clamp(10px, 1vw, 12px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2); background: none; border: 0; cursor: pointer; padding: 4px; }
.pfh-scroll:hover { color: var(--acc); }
.pfh-scroll:focus-visible { outline: none; color: var(--acc); box-shadow: var(--glow-focus); border-radius: var(--r-sm); }
.pfh-scroll .ring { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--acc-line); display: inline-flex; align-items: center; justify-content: center; color: var(--acc); }
.pfh-scroll:hover .ring { background: var(--acc-soft); box-shadow: 0 0 14px -2px var(--acc-glow); }
.pfh-scroll .ring svg { animation: pfhBob 2.1s var(--ease) infinite; }
@keyframes pfhBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ============================================================
   LE GESTE — états d'animation posés par le JS
   ============================================================ */
/* état de vol : wordmark loin dans la profondeur, incliné, invisible */
.pfh-hero.is-arming .pfh-wm { transform: perspective(1200px) translate3d(0, -16vh, -1100px) rotateX(42deg) rotateY(-16deg) scale(1.24); opacity: 0; }
/* atterrissage : transition pilotée par le JS (décélération dure en fin) */
.pfh-hero.is-landing .pfh-wm { transition: transform 1000ms cubic-bezier(.16,.9,.28,1), opacity 620ms ease-out; transform: perspective(1200px) translate3d(0,0,0) rotateX(0) rotateY(0) scale(1); opacity: 1; }

/* tremor de la scène à l'impact (secousse brève) */
.pfh-inner.tremor { animation: pfhTremor 460ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes pfhTremor {
  0% { transform: translate3d(0,0,0); }
  12% { transform: translate3d(-5px, 3px, 0) rotate(-.35deg); }
  26% { transform: translate3d(6px, -2px, 0) rotate(.3deg); }
  42% { transform: translate3d(-4px, 2px, 0); }
  58% { transform: translate3d(3px, -1px, 0); }
  74% { transform: translate3d(-2px, 1px, 0); }
  100% { transform: translate3d(0,0,0); }
}
/* léger flash de la lueur du logo à l'atterrissage */
.pfh-wm.impact .wm { animation: pfhFlash 560ms var(--ease) both; }
@keyframes pfhFlash { 0% { text-shadow: 0 0 60px var(--pf-glow); } 22% { text-shadow: 0 0 6px var(--pf-glow), 0 0 120px var(--pf); } 100% { text-shadow: 0 0 60px var(--pf-glow); } }

/* contenu qui se révèle APRÈS l'atterrissage (fondu/montée, staggeré) */
.pfh-reveal { opacity: 0; transform: translateY(22px); }
.pfh-hero.revealed .pfh-reveal { opacity: 1; transform: none; transition: opacity 640ms var(--ease), transform 640ms var(--ease); transition-delay: var(--rd, 0ms); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 700px) {
  .pfh-tags { gap: 6px; }
  .pfh-pitch { font-size: clamp(14px, 4vw, 17px); }
}

/* ============================================================
   ÉCRANS COURTS — le hero (avec CTA greffés) doit tenir dans le viewport :
   wordmark et rythme vertical resserrés
   ============================================================ */
@media (max-height: 820px) {
  .pfh-hero { padding: clamp(66px, 9vh, 96px) 0 clamp(24px, 3.5vh, 48px); }
  .pfh-wm .wm { font-size: clamp(44px, 8.5vw, 104px); }
  .pfh-wm { margin-bottom: clamp(4px, 1.1vh, 12px); }
  .pfh-eyebrow { margin-bottom: clamp(8px, 1.8vh, 16px); }
  .pfh-inner .sol-chip { margin-bottom: clamp(8px, 1.6vh, 14px); }
  .pfh-pain { margin-bottom: clamp(8px, 1.6vh, 14px); }
  .pfh-triad { margin-bottom: clamp(10px, 2vh, 18px); }
  .pfh-pitch { margin-bottom: clamp(10px, 2vh, 20px); }
  .pfh-cta { margin-bottom: clamp(10px, 2vh, 20px); }
  .pfh-norms { margin-bottom: clamp(8px, 1.6vh, 16px); }
}

/* ============================================================
   REPLI — reduced-motion : logo POSÉ d'emblée, contenu visible,
   pas de vol / poussière / tremor. Transitions neutralisées.
   ============================================================ */
html.pfh-still .pfh-wm { transform: none !important; opacity: 1 !important; }
html.pfh-still .pfh-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.pfh-still .pfh-iso .hi-plane { animation: none !important; }
html.pfh-still .pfh-dust { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pfh-iso .hi-plane, .pfh-scroll .ring svg { animation: none !important; }
  .pfh-wm, .pfh-reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
}