/* =========================================================================
   jardin.css — V5 : Hero « jardin »
   -------------------------------------------------------------------------
   Une terre qui s'étend vers la gauche (jusqu'au « F » de Faire), des cailloux,
   des touffes d'herbe qui ondulent au vent, et un arbre plus réaliste.
   La scène est dessinée par assets/js/hero-jardin.js dans .hero-jardin.
   Chargée APRÈS home.css : réutilise ses variables (--soil, --grass…).
   ========================================================================= */

/* Le héros redevient un bloc : le texte en haut, la scène en bande basse.
   padding-bottom réserve la hauteur de la bande (le texte ne la recouvre pas). */
body.home .hero {
  position: relative;
  display: block;
  min-height: 0;
  margin-top: 0;
  padding-block: clamp(18px, 6vh, 64px) clamp(300px, 44vh, 500px);
}
body.home .hero-copy {
  max-width: 660px;
  position: relative;
  z-index: 3;
}

/* La bande « jardin » : pleine largeur, calée en bas du héros. */
.hero-jardin {
  position: absolute;
  left: 50%; bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  height: clamp(300px, 44vh, 500px);
  z-index: 1;
  pointer-events: none;
  overflow: visible;                 /* la couronne peut dépasser vers le haut */
  --wind: 0;                         /* valeur de vent posée image par image en JS */
}
.hero-jardin svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- Sol ---------- */
.jardin-soil-body  { fill: url(#jSoil); }
.jardin-soil-crest { fill: none; stroke: var(--soil-crest); stroke-width: 3; stroke-linecap: round; opacity: .9; }
.jardin-grain      { fill: var(--soil-grain); }

/* ---------- Herbe : ondulation au vent ---------- */
/* .brin-wrap : brise de fond, continue et désynchronisée (CSS).
   .brin      : rafale globale, pilotée par --wind (JS), pivot à la base. */
.brin-wrap {
  transform-box: fill-box; transform-origin: bottom center;
  animation: brise var(--fdur, 4s) ease-in-out var(--fdel, 0s) infinite alternate;
}
.brin {
  transform-box: fill-box; transform-origin: bottom center;
  transform: rotate(calc(var(--wind, 0) * var(--amp, 6deg)));
  fill: none; stroke-linecap: round;
}
@keyframes brise {
  from { transform: rotate(calc(var(--amp, 6deg) * -0.35)); }
  to   { transform: rotate(calc(var(--amp, 6deg) *  0.5)); }
}

/* ---------- Arbre : léger balancement depuis la base + vent ---------- */
.jardin-wind {               /* rafale globale, pivot à la base */
  transform-box: view-box;
  transform: rotate(calc(var(--wind, 0) * 0.9deg));
}
.jardin-sway {               /* respiration lente, pivot à la base */
  transform-box: view-box;
  animation: jsway 8s ease-in-out infinite alternate;
}
@keyframes jsway { from { transform: rotate(-0.5deg); } to { transform: rotate(0.7deg); } }

.jardin-leaf {
  transform-box: fill-box; transform-origin: center;
  transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1));
}

/* Pousse (premier dessin) : révélation de bas en haut + éclosion des feuilles.
   Par défaut (sans .pousse) l'arbre est entièrement visible : aucun risque
   de le rendre invisible si l'animation ne se joue pas. */
.arbre-clip-rect { transform-box: fill-box; transform-origin: center bottom; }
.hero-jardin.pousse .arbre-clip-rect { animation: jreveal 1.7s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-jardin.pousse .jardin-leaf { opacity: 0; animation: jpop .5s ease forwards var(--pdel, 0s); }
@keyframes jreveal { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes jpop { from { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(.2); } to { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); } }

/* ---------- Écorce texturée (nervures/stries) ---------- */
.jardin-vein { fill: none; stroke: rgba(30, 18, 9, 0.42); stroke-linecap: round; }

/* ---------- Lumière tamisée à travers le feuillage ---------- */
/* Pas de mix-blend-mode : combiné au masque de révélation, il créait un
   rectangle visible sur Chrome. Un simple dégradé translucide suffit. */
.jardin-glow {
  opacity: .54;                 /* -10% d'intensité */
  animation: jglow 7s ease-in-out infinite alternate;
}
@keyframes jglow { from { opacity: .405; } to { opacity: .72; } }

/* ---------- Feuilles qui tombent et dérivent ---------- */
/* 3 niveaux imbriqués : chute verticale + opacité, dérive horizontale, rotation. */
.jardin-fall   { animation: jfallY var(--dur, 8s) linear var(--del, 0s) infinite; }
.jardin-fall-x { animation: jfallX var(--swd, 3s) ease-in-out infinite alternate; }
.jardin-fall-r { transform-box: fill-box; transform-origin: center;
                 animation: jfallR calc(var(--swd, 3s) * 2.2) linear infinite; }
@keyframes jfallY {
  0%   { transform: translateY(0); opacity: 0; }
  7%   { opacity: .95; }
  88%  { opacity: .9; }
  100% { transform: translateY(var(--fall, 300px)); opacity: 0; }
}
@keyframes jfallX {
  from { transform: translateX(calc(var(--sway, 20px) * -1)); }
  to   { transform: translateX(var(--sway, 20px)); }
}
@keyframes jfallR { from { transform: rotate(0); } to { transform: rotate(var(--rot, 360deg)); } }

/* ---------- Oiseau discret ---------- */
.jardin-oiseau { animation: joiseau 16s ease-in-out infinite; opacity: 0; }
.jardin-oiseau-bob { animation: jbob 2.4s ease-in-out infinite alternate; }
.jardin-aile { transform-box: fill-box; transform-origin: center; animation: jflap .55s ease-in-out infinite alternate; }
@keyframes joiseau {
  0%        { transform: translate(-60px, var(--y0, 120px)); opacity: 0; }
  5%        { opacity: .95; }
  60%       { transform: translate(var(--w, 800px), var(--y1, 80px)); opacity: .95; }
  66%, 100% { transform: translate(calc(var(--w, 800px) + 70px), var(--y1, 80px)); opacity: 0; }
}
@keyframes jbob { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
@keyframes jflap { from { transform: scaleY(.45); } to { transform: scaleY(1.1); } }

/* ---------- Écureuil : il bouge un peu ---------- */
/* Balancement/respiration de tout l'écureuil (pivot sur les pattes). */
.jardin-sq-idle {
  transform-box: fill-box; transform-origin: 50% 98%;
  animation: jsqidle 3.6s ease-in-out infinite;
}
@keyframes jsqidle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-1.3px) rotate(-1deg); }
  50%      { transform: translateY(0) rotate(0.7deg); }
  75%      { transform: translateY(-0.7px) rotate(-0.4deg); }
}
/* Frétillement de la queue (pivot à sa base). */
.jardin-queue {
  transform-box: fill-box; transform-origin: 33% 96%;
  animation: jqueue 4.5s ease-in-out infinite alternate;
}
@keyframes jqueue { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .jardin-sq-idle, .jardin-queue { animation: none; }
  .brin-wrap, .brin, .jardin-sway, .jardin-wind { animation: none !important; transform: none; }
  .hero-jardin.pousse .arbre-clip-rect { animation: none; transform: none; }
  .hero-jardin.pousse .jardin-leaf { opacity: 1; animation: none; }
  .jardin-glow { animation: none; opacity: .5; }
  .jardin-fall, .jardin-oiseau { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body.home .hero { padding-bottom: clamp(260px, 40vh, 420px); }
  .hero-jardin { height: clamp(260px, 40vh, 420px); }
  body.home .hero-copy { max-width: 600px; }
}