/* Selection /notre-selection-de-plants — hero (1536×640 layered) */

/* Tokens page — hérités par #wrap (pas par le hero sibling seul) */
main:has(.gf-selection-hero-root) {
  --gf-tech-cream: #faf9f6;
  --gf-selection-surface: var(--gf-tech-cream);
}

/* Masquer le bandeau éditeur dupliqué sous le hero code */
main:has(.gf-selection-hero-root) #wrap > section.s_banner {
  display: none !important;
}

.gf-selection-hero-root {
  --gf-green-deep: #183524;
  --gf-green-mid: #225627;
  --gf-green: #2f5a38;
  --gf-selection-cream: #f4ecd8;
  --gf-selection-paper: #faf6ea;
  --gf-selection-gold: #c9a962;
  --gf-selection-prop-badge: rgba(61, 107, 71, 0.55);
  --gf-selection-accent: #d36135;
  --gf-selection-surface: var(--gf-tech-cream, #faf9f6);
  --gf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --font-body: Inter, system-ui, -apple-system, sans-serif;
  --graphic-x: 70%;
  --graphic-y: 44%;
  --graphic-w: 42%;
  --graphic-h: 88%;
  --compass-scale: 0.86;
  --compass-cx: 50%;
  --compass-cy: 50%;
  --compass-shift-x: 0%;
  --compass-shift-y: 0%;
  --graphic-nudge-x: 0%;
  --graphic-nudge-y: 0%;
  --bouquet-scale: 1.05;
  --bouquet-joint: 14.5%;
  --accent-p4-left: 58%;
  --accent-p4-bottom: 30%;
  --accent-p4-width: 14%;
  --accent-p4-r: 38deg;
  --accent-p5-left: 22%;
  --accent-p5-bottom: 32%;
  --accent-p9-left: 62%;
  --accent-p9-bottom: 30%;
  background: var(--gf-selection-surface);
  margin: 0;
}

.gf-selection-hero-root .gf-selection-hero {
  width: 100%;
  aspect-ratio: 1536 / 640;
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
}

.gf-selection-hero-root .gf-selection-hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Même fond de repli que gf-home-v2-hero (visible via opacity photo 0.86) */
  background:
    radial-gradient(circle at 82% 28%, rgba(91, 143, 90, 0.3) 0, transparent 30%),
    radial-gradient(circle at 16% 18%, rgba(218, 170, 81, 0.16) 0, transparent 24%),
    linear-gradient(145deg, #0f2e1e 0%, #143b27 46%, #0b281b 100%);
}

/* Photo rooftop — même post-traitement que gf-home-v2-hero__bg-photo */
.gf-selection-hero-root .gf-selection-hero__bg-photo {
  position: absolute;
  inset: -4%;
  z-index: 0;
  background-image: url("/greenforge_plants/static/src/img/selection/hero/selection-hero-bg-rooftop.png");
  background-size: cover;
  background-position: center 62%;
  filter: blur(3px) saturate(0.95) brightness(0.74);
  transform: scale(1.035);
  opacity: 0.86;
  pointer-events: none;
}

/* Masque vert — calqué sur gf-home-v2-hero::before */
.gf-selection-hero-root .gf-selection-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: normal;
  background:
    linear-gradient(
      90deg,
      rgba(10, 36, 24, 0.88) 0%,
      rgba(13, 48, 31, 0.76) 36%,
      rgba(13, 48, 31, 0.36) 62%,
      rgba(10, 36, 24, 0.18) 100%
    ),
    radial-gradient(circle at 74% 32%, rgba(218, 170, 81, 0.14), transparent 28%),
    radial-gradient(circle at 50% 120%, rgba(250, 246, 234, 0.08), transparent 32%);
}

/* Selection page FAQ: align accordion palette with the hero background */
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image.o_cc1,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image.o_cc2,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image.o_cc3 {
  --background-color: var(--gf-green-deep) !important;
  --o-cc-bg: var(--gf-green-deep) !important;
  background:
    radial-gradient(80% 90% at 75% 30%, rgba(45, 92, 60, 0.55), transparent 65%),
    radial-gradient(60% 80% at 15% 95%, rgba(8, 22, 14, 0.55), transparent 70%),
    linear-gradient(168deg, var(--gf-green-deep) 0%, var(--gf-green-mid) 45%, var(--gf-green) 100%) !important;
  color: var(--gf-selection-paper) !important;
}

main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .o_colored_level,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .container,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .row,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .col-lg-5,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .col-lg-6,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .accordion,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .accordion-item,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .accordion-body {
  background: transparent !important;
  background-image: none !important;
}

main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image h2,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image h3,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image h4,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image p,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .lead,
main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .text-muted {
  color: var(--gf-selection-paper) !important;
}

main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .accordion-button {
  background: transparent !important;
  color: var(--gf-selection-paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1rem 0.35rem 1rem 0.15rem;
}

main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .accordion-button p {
  margin: 0;
}

main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .accordion-item {
  border: 0 !important;
  border-bottom: 1px solid rgba(201, 169, 98, 0.38) !important;
}

main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .accordion-item:last-child {
  border-bottom: 0 !important;
}

main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .accordion-button:not(.collapsed) {
  background: rgba(250, 246, 234, 0.06) !important;
  color: var(--gf-selection-paper) !important;
}

main:has(.gf-selection-hero-root) #wrap > section.s_accordion_image .accordion-button::after {
  filter: brightness(0) saturate(100%) invert(90%) sepia(21%) saturate(286%) hue-rotate(346deg) brightness(102%) contrast(96%);
}

.gf-selection-hero-root .gf-selection-hero__layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Collines masquées — photo + vague + triangles */
.gf-selection-hero-root .gf-layer--hills-back,
.gf-selection-hero-root .gf-layer--hills-front {
  display: none;
}

.gf-selection-hero-root .gf-layer--wave {
  z-index: 4;
}

.gf-selection-hero-root .gf-layer--triangles {
  z-index: 5;
  transform: translateY(2%);
}

.gf-selection-hero-root .gf-selection-hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gf-selection-hero-root .gf-selection-hero__layer object,
.gf-selection-hero-root .gf-selection-hero__layer svg,
.gf-selection-hero-root .gf-selection-hero__layer img {
  width: 100%;
  height: 100%;
  display: block;
  /* cover + ancrage bas : la vague crème reste au pied du hero quand l'aspect-ratio change */
  object-fit: cover;
  object-position: center bottom;
}

.gf-selection-hero-root .gf-layer--wave object,
.gf-selection-hero-root .gf-layer--wave img,
.gf-selection-hero-root .gf-layer--wave svg {
  object-fit: cover;
  object-position: center bottom;
}

/* Montagnes claires : même teinte que le fond page / home-box (pas de blanc pur). */
.gf-selection-hero-root .gf-layer--hills-front img {
  filter: none;
}

/* Bouquet plants + boussole + arc — cluster centré */
.gf-selection-hero-root .gf-selection-hero__graphic {
  position: absolute;
  left: var(--graphic-x);
  top: var(--graphic-y);
  width: var(--graphic-w);
  height: var(--graphic-h);
  transform: translate(calc(-50% + var(--graphic-nudge-x)), calc(-50% + var(--graphic-nudge-y)));
  z-index: 6;
  pointer-events: none;
}

.gf-selection-hero-root .gf-selection-hero__compass-ring {
  position: absolute;
  left: var(--compass-cx);
  top: var(--compass-cy);
  z-index: 2;
  width: calc(var(--compass-scale) * 100%);
  height: calc(var(--compass-scale) * 100%);
  transform: translate(calc(-50% + var(--compass-shift-x)), calc(-50% + var(--compass-shift-y)));
  transform-origin: 50% 50%;
}

.gf-selection-hero-root .gf-selection-hero__compass-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.95;
  transform-origin: center center;
  will-change: transform, opacity;
}

.gf-selection-hero-root .gf-selection-hero__arc {
  position: absolute;
  left: var(--compass-cx);
  top: var(--compass-cy);
  z-index: 3;
  width: calc(var(--compass-scale) * 112%);
  height: calc(var(--compass-scale) * 112%);
  transform: translate(calc(-50% + var(--compass-shift-x)), calc(-50% + var(--compass-shift-y))) scale(1);
  overflow: visible;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
}

.gf-selection-hero-root .gf-selection-hero__bouquet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  z-index: 4;
  transform: translateX(-50%) scale(var(--bouquet-scale));
  transform-origin: 50% 86%;
  filter: drop-shadow(0 16px 24px rgba(8, 22, 14, 0.32));
}

.gf-selection-hero-root .gf-selection-hero__plant-wrap {
  position: absolute;
  transform-origin: center bottom;
}

.gf-selection-hero-root .gf-selection-hero__plant {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center bottom;
}

/*
 * Mockup v685 — éventail marqué (V ouvert) : chou visible au centre comme le modèle
 */
.gf-selection-hero-root .gf-selection-hero__plant-wrap--p1 {
  --plant-r: 0deg;
  left: 50%;
  bottom: calc(var(--bouquet-joint) + 10%);
  width: 52%;
  z-index: 1;
  transform: translateX(-50%) rotate(var(--plant-r));
}

.gf-selection-hero-root .gf-selection-hero__plant-wrap--p5 {
  --plant-r: -20deg;
  left: var(--accent-p5-left);
  bottom: var(--accent-p5-bottom);
  width: 12%;
  z-index: 2;
  transform-origin: 68% 92%;
  transform: rotate(var(--plant-r));
}

.gf-selection-hero-root .gf-selection-hero__plant-wrap--p9 {
  --plant-r: 22deg;
  left: var(--accent-p9-left);
  bottom: var(--accent-p9-bottom);
  width: 18%;
  z-index: 2;
  transform-origin: 42% 88%;
  transform: rotate(var(--plant-r));
}

.gf-selection-hero-root .gf-selection-hero__plant-wrap--p7 {
  --plant-r: -26deg;
  --plant-shift: -23%;
  left: 50%;
  bottom: var(--bouquet-joint);
  width: 34%;
  z-index: 3;
  transform: translateX(calc(-50% + var(--plant-shift))) rotate(var(--plant-r));
}

.gf-selection-hero-root .gf-selection-hero__plant-wrap--p8 {
  --plant-r: 18deg;
  --plant-shift: 12%;
  left: 50%;
  bottom: calc(var(--bouquet-joint) - 1%);
  width: 32%;
  z-index: 4;
  transform: translateX(calc(-50% + var(--plant-shift))) rotate(var(--plant-r));
}

.gf-selection-hero-root .gf-selection-hero__plant-wrap--p8r {
  --plant-r: 30deg;
  --plant-shift: 26%;
  left: 50%;
  bottom: calc(var(--bouquet-joint) + 0.5%);
  width: 27%;
  z-index: 5;
  transform: translateX(calc(-50% + var(--plant-shift))) rotate(var(--plant-r));
}

.gf-selection-hero-root .gf-selection-hero__plant-wrap--p8r .gf-selection-hero__plant {
  transform: scaleX(-1);
}

.gf-selection-hero-root .gf-selection-hero__plant-wrap--p4 {
  --plant-r: var(--accent-p4-r);
  left: var(--accent-p4-left);
  bottom: var(--accent-p4-bottom);
  width: var(--accent-p4-width);
  z-index: 6;
  transform-origin: 42% 88%;
  transform: rotate(var(--plant-r));
}

.gf-selection-hero-root .gf-selection-hero__plant-wrap--p2 {
  --plant-r: 6deg;
  --plant-shift: -1%;
  left: 50%;
  bottom: calc(var(--bouquet-joint) + 0.8%);
  width: 30%;
  z-index: 7;
  transform: translateX(calc(-50% + var(--plant-shift))) rotate(var(--plant-r));
}

.gf-selection-hero-root .gf-selection-hero__copy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(1.1rem, calc((100% - min(100%, 1280px)) / 2 + clamp(2rem, 5vw, 4.5rem)));
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(36rem, calc(100% - 2.2rem));
  max-width: 40rem;
  color: var(--gf-selection-paper);
  pointer-events: none;
  padding: clamp(2rem, 5vw, 3rem) 1.25rem clamp(6.5rem, 18vw, 10rem) 0;
  box-sizing: border-box;
  transform: translateY(-5%);
}

.gf-selection-hero-root .gf-selection-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gf-selection-gold);
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(1rem);
}

.gf-selection-hero-root .gf-selection-hero__eyebrow-line {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.gf-selection-hero-root .gf-selection-hero__eyebrow-text {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.gf-selection-hero-root .gf-selection-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 3.95rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.gf-selection-hero-root .gf-selection-hero__title-line,
.gf-selection-hero-root .gf-selection-hero__title-break {
  display: block;
}

.gf-selection-hero-root .gf-selection-hero__title-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.25rem);
}

.gf-selection-hero-root .gf-selection-hero__title-word em {
  font-style: italic;
  font-weight: 500;
}

.gf-selection-hero-root .gf-selection-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 32rem;
  color: rgba(250, 246, 234, 0.92);
  opacity: 0;
  transform: translateY(1rem);
}

.gf-selection-hero-root .gf-selection-hero__subtitle b {
  color: var(--gf-selection-paper);
  font-weight: 500;
}

/* Liseret doré animé sous le mot accentué du titre */
.gf-selection-hero-root .gf-selection-hero__title-em {
  position: relative;
  font-style: italic;
  font-weight: 500;
  color: #fff;
  display: inline-block;
  text-shadow: 0 0 18px rgba(250, 246, 234, 0.2);
}

.gf-selection-hero-root .gf-selection-hero__title-em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 0.055em;
  border-radius: 2px;
  background: var(--gf-selection-gold);
  transform-origin: left;
  transform: scaleX(0);
}

/* 3 arguments — alignés sur gf-home-v2-hero__badges */
.gf-selection-hero-root .gf-selection-hero__props {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 40rem;
}

.gf-selection-hero-root .gf-selection-hero__prop {
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 700;
  line-height: 1.25;
  color: rgba(250, 246, 234, 0.96);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(1rem);
}

.gf-selection-hero-root .gf-selection-hero__prop-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  margin-top: 0.02rem;
  border-radius: 0;
  background: transparent;
}

.gf-selection-hero-root .gf-selection-hero__prop-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.24));
}

@media (prefers-reduced-motion: no-preference) {
  /* Première frame = keyframe « from » (évite le saut au lancement, cf. home hero) */
  .gf-selection-hero-root .gf-selection-hero__compass-img {
    opacity: 0;
    transform: scale(0.96);
  }

  .gf-selection-hero-root .gf-selection-hero__arc {
    opacity: 0;
    transform: translate(calc(-50% + var(--compass-shift-x)), calc(-50% + var(--compass-shift-y))) scale(0.96);
  }

  .gf-selection-hero-root .gf-selection-hero__plant {
    opacity: 0;
    transform: translateY(1.35rem) scale(0.94);
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p1 .gf-selection-hero__plant {
    animation: gf-selection-plant-in 900ms 200ms var(--gf-ease-out) both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p5 .gf-selection-hero__plant {
    animation: gf-selection-plant-in 900ms 240ms var(--gf-ease-out) both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p9 .gf-selection-hero__plant {
    animation: gf-selection-plant-in 900ms 260ms var(--gf-ease-out) both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p7 .gf-selection-hero__plant {
    animation: gf-selection-plant-in 900ms 280ms var(--gf-ease-out) both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p8 .gf-selection-hero__plant {
    animation: gf-selection-plant-in 900ms 320ms var(--gf-ease-out) both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p8r .gf-selection-hero__plant {
    animation: gf-selection-plant-in-flip 900ms 360ms var(--gf-ease-out) both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p2 .gf-selection-hero__plant {
    animation: gf-selection-plant-in 900ms 420ms var(--gf-ease-out) both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p4 .gf-selection-hero__plant {
    animation: gf-selection-plant-in 900ms 480ms var(--gf-ease-out) both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p5,
  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p9,
  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p4 {
    animation: gf-selection-leaf-sway var(--plant-sway-dur, 5.8s) var(--plant-sway-delay, 1.15s) ease-in-out infinite;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p1 {
    animation: gf-selection-leaf-sway-center var(--plant-sway-dur, 7.2s) var(--plant-sway-delay, 1.05s) ease-in-out infinite;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p7,
  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p8,
  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p8r {
    animation: gf-selection-leaf-sway-shift var(--plant-sway-dur, 6.2s) var(--plant-sway-delay, 1.2s) ease-in-out infinite;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__plant-wrap--p2 {
    animation: gf-selection-leaf-sway-shift var(--plant-sway-dur, 5.2s) var(--plant-sway-delay, 1.32s) ease-in-out infinite;
  }

  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p5 { --plant-sway-dur: 5.6s; --plant-sway-delay: 1.18s; }
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p9 { --plant-sway-dur: 6.8s; --plant-sway-delay: 1.22s; }
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p7 { --plant-sway-dur: 6.4s; --plant-sway-delay: 1.12s; }
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p8 { --plant-sway-dur: 6s; --plant-sway-delay: 1.15s; }
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p8r { --plant-sway-dur: 5.8s; --plant-sway-delay: 1.25s; }
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p2 { --plant-sway-dur: 5.2s; --plant-sway-delay: 1.32s; }
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p4 { --plant-sway-dur: 6.9s; --plant-sway-delay: 1.42s; }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__eyebrow {
    animation: gf-selection-rise 700ms 200ms var(--gf-ease-out) both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__title-word {
    animation: gf-selection-rise 900ms var(--gf-ease-out) forwards;
    animation-delay: var(--word-delay, 300ms);
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__subtitle {
    animation: gf-selection-rise 800ms 850ms var(--gf-ease-out) forwards;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__prop {
    animation: gf-selection-rise 700ms var(--gf-ease-out) forwards;
    animation-delay: var(--prop-delay, 1000ms);
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__title-em::after {
    animation: gf-selection-underline-in 850ms 1150ms var(--gf-ease-out) forwards;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-layer--triangles {
    animation: gf-selection-triangles-rise 900ms var(--gf-ease-out) 60ms both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-layer--wave {
    animation: gf-selection-wave-rise 1100ms var(--gf-ease-out) 200ms both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-layer--hills-back,
  .gf-selection-hero-root .gf-selection-hero--animate .gf-layer--hills-front {
    animation: gf-selection-hills-rise 900ms var(--gf-ease-out) 0.15s both;
  }

  .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__arc {
    animation: gf-selection-arc-rise 1000ms var(--gf-ease-out) 140ms both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gf-selection-hero-root .gf-selection-hero__bouquet {
    opacity: 1 !important;
    transform: translateX(-50%) scale(var(--bouquet-scale)) !important;
    animation: none !important;
  }

  .gf-selection-hero-root .gf-selection-hero__plant {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .gf-selection-hero-root .gf-selection-hero__plant-wrap {
    animation: none !important;
  }

  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p1 {
    transform: translateX(-50%) rotate(var(--plant-r)) !important;
  }

  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p7,
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p8,
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p8r,
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p2 {
    transform: translateX(calc(-50% + var(--plant-shift, 0%))) rotate(var(--plant-r)) !important;
  }

  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p8r .gf-selection-hero__plant {
    transform: scaleX(-1) !important;
  }

  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p5,
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p9,
  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p4 {
    transform: rotate(var(--plant-r)) !important;
  }

  .gf-selection-hero-root .gf-selection-hero__eyebrow,
  .gf-selection-hero-root .gf-selection-hero__title-word,
  .gf-selection-hero-root .gf-selection-hero__subtitle,
  .gf-selection-hero-root .gf-selection-hero__prop {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .gf-selection-hero-root .gf-selection-hero__title-em::after {
    transform: scaleX(1);
  }

  .gf-selection-hero-root .gf-selection-hero__compass-img {
    opacity: 0.95 !important;
    transform: none !important;
    animation: none !important;
  }

  .gf-selection-hero-root .gf-selection-hero__arc {
    opacity: 1 !important;
    transform: translate(calc(-50% + var(--compass-shift-x)), calc(-50% + var(--compass-shift-y))) !important;
    animation: none !important;
  }
}

@media (min-width: 992px) {
  .gf-selection-hero-root .gf-selection-hero {
    aspect-ratio: auto;
    min-height: clamp(560px, 66vw, 720px);
  }

  .gf-selection-hero-root .gf-selection-hero__copy {
    width: min(40rem, 46%);
    padding: 3rem 2rem 7.5rem 0;
    transform: translateY(-6%);
  }
}

@media (max-width: 991.98px) {
  .gf-selection-hero-root {
    --graphic-x: 70%;
    --graphic-y: 44%;
    --graphic-w: 44%;
    --compass-scale: 0.78;
    --bouquet-scale: 0.92;
  }
}

@media (max-width: 575.98px) {
  .gf-selection-hero-root {
    /* Cluster centré + agrandi (calqué sur le visuel centré du hero home) */
    --graphic-x: 50%;
    --graphic-y: 70%;
    --graphic-w: 88%;
    --graphic-h: 82%;
    --graphic-nudge-x: 0%;
    --graphic-nudge-y: 0%;
    --mobile-compass-top: 70%;
    --compass-scale: 0.86;
    --bouquet-scale: 1.02;
    /* Cluster ancré par le bas avec une marge fixe (pas de rognage selon la hauteur) */
    --graphic-bottom: 1.5rem;
    /* Accents calés sur la couronne du chou — même offset que desktop (~+5% vs p1) */
    --accent-p4-left: 50%;
    --accent-p4-bottom: 27%;
    --accent-p4-width: 10%;
    --accent-p4-r: 30deg;
    --accent-p5-left: 30%;
    --accent-p5-bottom: 29.5%;
    --accent-p9-left: 50%;
    --accent-p9-bottom: 26.5%;
    margin-bottom: 0;
    background: var(--gf-selection-surface);
  }

  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p5 {
    left: var(--accent-p5-left);
    bottom: var(--accent-p5-bottom);
    width: 9%;
    z-index: 3;
    --plant-r: -18deg;
    transform-origin: 72% 94%;
    transform: rotate(var(--plant-r));
  }

  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p9 {
    left: var(--accent-p9-left);
    bottom: var(--accent-p9-bottom);
    width: 20%;
    z-index: 2;
    --plant-r: 20deg;
    transform-origin: 6% 94%;
    transform: rotate(var(--plant-r));
  }

  .gf-selection-hero-root .gf-selection-hero__plant-wrap--p4 {
    left: var(--accent-p4-left);
    bottom: var(--accent-p4-bottom);
    width: var(--accent-p4-width);
    z-index: 0;
    --plant-r: var(--accent-p4-r);
    transform-origin: 18% 98%;
    transform: rotate(var(--plant-r));
  }

  /* Centre boussole = masse visuelle du bouquet (chou + kales) */
  .gf-selection-hero-root .gf-selection-hero__compass-ring {
    top: var(--mobile-compass-top);
    bottom: auto;
    left: 50%;
    width: 94%;
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
  }

  .gf-selection-hero-root .gf-selection-hero__arc {
    top: var(--mobile-compass-top);
    bottom: auto;
    left: 50%;
    width: 105%;
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  @media (prefers-reduced-motion: no-preference) {
    .gf-selection-hero-root .gf-selection-hero__arc {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.96);
    }

    .gf-selection-hero-root .gf-selection-hero--animate .gf-selection-hero__arc {
      animation: gf-selection-arc-rise-mobile 1000ms var(--gf-ease-out) 140ms both;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gf-selection-hero-root .gf-selection-hero__arc {
      transform: translate(-50%, -50%) scale(1) !important;
    }
  }

  .gf-selection-hero-root .gf-selection-hero {
    aspect-ratio: auto;
    min-height: clamp(46rem, 200vw, 60rem);
  }

  /* Ancrage bas + marge fixe du bord : le bas de l'animation ne dépend plus de la hauteur */
  .gf-selection-hero-root .gf-selection-hero__graphic {
    top: auto;
    bottom: var(--graphic-bottom, 1.5rem);
    transform: translate(calc(-50% + var(--graphic-nudge-x)), var(--graphic-nudge-y));
  }

  .gf-selection-hero-root .gf-selection-hero__copy {
    inset: 0;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    padding: 2rem 1.1rem 5.5rem;
    transform: translateY(0);
  }

  .gf-selection-hero-root .gf-selection-hero__title {
    font-size: clamp(2.05rem, 12vw, 3.05rem);
  }

  .gf-selection-hero-root .gf-selection-hero__subtitle {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .gf-selection-hero-root .gf-selection-hero__props {
    gap: 0.65rem;
  }

  .gf-selection-hero-root .gf-selection-hero__prop {
    font-size: 0.92rem;
    line-height: 1.25;
  }

  .gf-selection-hero-root .gf-selection-hero__prop-icon {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    min-height: 1.6rem;
    margin-top: 0.04rem;
  }

  /* Fond vert plein ; le stage crème sous les montagnes = section plants suivante. */
  .gf-selection-hero-root .gf-selection-hero__stage {
    background: var(--gf-selection-surface);
  }

  .gf-selection-hero-root .gf-selection-hero__bg {
    inset: 0;
  }

  /* Photo bg : pas de collines ; triangles ancrés en bas */
  .gf-selection-hero-root .gf-layer--hills-back,
  .gf-selection-hero-root .gf-layer--hills-front {
    display: none;
  }

  .gf-selection-hero-root .gf-layer--triangles {
    top: auto;
    bottom: 0;
    height: auto;
    transform: translateY(2.5%);
  }

  .gf-selection-hero-root .gf-layer--triangles img {
    height: auto;
    object-fit: contain;
  }
}

main:has(.gf-selection-hero-root) #wrap {
  background-color: var(--gf-selection-surface, #faf9f6);
}

@keyframes gf-selection-plant-in {
  from {
    opacity: 0;
    transform: translateY(1.35rem) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gf-selection-leaf-sway {
  0%,
  100% {
    transform: rotate(var(--plant-r)) translateY(0);
  }
  50% {
    transform: rotate(calc(var(--plant-r) + 1deg)) translateY(-0.25rem);
  }
}

@keyframes gf-selection-leaf-sway-center {
  0%,
  100% {
    transform: translateX(-50%) rotate(var(--plant-r)) translateY(0);
  }
  50% {
    transform: translateX(-50%) rotate(calc(var(--plant-r) + 0.8deg)) translateY(-0.22rem);
  }
}

@keyframes gf-selection-plant-in-flip {
  from {
    opacity: 0;
    transform: scaleX(-1) translateY(1.35rem) scale(0.94);
  }
  to {
    opacity: 1;
    transform: scaleX(-1) translateY(0) scale(1);
  }
}

@keyframes gf-selection-leaf-sway-shift {
  0%,
  100% {
    transform: translateX(calc(-50% + var(--plant-shift, 0%))) rotate(var(--plant-r)) translateY(0);
  }
  50% {
    transform: translateX(calc(-50% + var(--plant-shift, 0%))) rotate(calc(var(--plant-r) + 0.8deg)) translateY(-0.2rem);
  }
}

@keyframes gf-selection-leaf-sway-front {
  0%,
  100% {
    transform: translateX(calc(-50% + 5%)) rotate(var(--plant-r)) translateY(0);
  }
  50% {
    transform: translateX(calc(-50% + 5%)) rotate(calc(var(--plant-r) + 0.7deg)) translateY(-0.2rem);
  }
}

@keyframes gf-selection-leaf-sway-flip {
  0%,
  100% {
    transform: scaleX(-1) rotate(var(--plant-r)) translateY(0);
  }
  50% {
    transform: scaleX(-1) rotate(calc(var(--plant-r) - 0.9deg)) translateY(-0.2rem);
  }
}

@keyframes gf-selection-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gf-selection-underline-in {
  to {
    transform: scaleX(1);
  }
}

@keyframes gf-selection-wave-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gf-selection-wave-slide {
  from {
    opacity: 0;
    transform: translate(48px, 32px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes gf-selection-compass-rise {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 0.95;
    transform: scale(1);
  }
}

@keyframes gf-selection-arc-rise-mobile {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes gf-selection-arc-rise {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--compass-shift-x)), calc(-50% + var(--compass-shift-y))) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(calc(-50% + var(--compass-shift-x)), calc(-50% + var(--compass-shift-y))) scale(1);
  }
}

@keyframes gf-selection-hills-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gf-selection-triangles-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}