/* Décor des bords : une plante en pot sur son tuteur, centrée dans chaque marge.
   À gauche une Monstera variegata, à droite un Philodendron gloriosum (dessins SVG dans le HTML, classe « decor »).
   Elles poussent à l'ouverture de la page (la tige se dessine, les feuilles se déplient une à une), puis se balancent doucement.
   Affichées seulement quand il reste assez de place à côté du contenu (écrans larges). */
.decor{display:none}
@media (min-width:1340px){
  /* la boîte occupe toute la marge (12 px d'écart de chaque côté) et le dessin est centré dedans (xMidYMax dans le HTML) */
  .decor{display:block;position:fixed;bottom:0;z-index:0;pointer-events:none;overflow:visible;
    height:100vh;width:calc((100vw - 1120px) / 2 - 24px)}
  .monstera{left:12px}
  .gloriosum{right:12px}
}
/* Couleurs (variables de theme.css).
   Les parties des feuilles sont sans « .decor » devant : chaque feuille est recopiée par <use>,
   et Chrome colore ces copies à part, où « .decor .limbe » ne trouve plus .decor (feuilles noires sinon). */
/* Monstera */
.limbe{fill:var(--leaf)}
.jeune{fill:var(--leaf-new)}
.panache{fill:var(--leaf-var)}  /* blanc crème de la panachure (variegata) */
.marbre{fill:var(--leaf-mint)}   /* vert pâle entre le vert et le blanc */
.nervure{fill:none;stroke:var(--leaf-vein);stroke-width:1.6;stroke-linecap:round}
.nervure-laterale{stroke-width:.9;opacity:.6}
.bord{fill:none;stroke:var(--leaf-vein);stroke-width:2.4;stroke-linejoin:round} /* à moitié caché par la découpe : ≈ 1,2 visible */
.bord-fente{stroke-width:10.4;stroke-linecap:round} /* fentes larges de 8 : il reste ≈ 1,2 de liseré de chaque côté */
.lavis{fill:var(--leaf-light);opacity:.55}  /* zones de vert plus clair, effet aquarelle */
/* stries de la marbrure (l'épaisseur est donnée sur chaque trait dans le HTML) */
.strie,.strie-pale,.strie-verte{fill:none;stroke-linecap:round}
.strie{stroke:var(--leaf-var)}
.strie-pale{stroke:var(--leaf-mint)}
.strie-verte{stroke:var(--leaf)}
/* Gloriosum : feuilles veloutées vert sombre, nervures blanches */
.velours{fill:var(--velvet)}
.velours-clair{fill:var(--velvet-light)}
.nervure-glo{fill:none;stroke:var(--velvet-vein);stroke-width:1.3;stroke-linecap:round;opacity:.85}
.nervure-glo-centre{stroke-width:2.8;opacity:1}
.bord-glo{fill:none;stroke:var(--velvet-vein);stroke-width:2;opacity:.45} /* liseré pâle du bord (moitié intérieure visible) */
/* Tige, pétioles, racines, tuteurs, pots */
.decor .petiole,.decor .tige{fill:none;stroke:var(--stem);stroke-linecap:round}
.decor .petiole{stroke-width:3.5}
.decor .tige{stroke-width:6}
.decor .racine{fill:none;stroke:var(--root);stroke-width:1.6;stroke-linecap:round}
.decor .tuteur{fill:var(--pole)}
.decor .fibre{fill:none;stroke:var(--pole-fibre);stroke-width:.9;stroke-linecap:round}
.decor .tuteur-mousse{fill:var(--moss-pole)}
.decor .filet{fill:none;stroke:var(--mesh);stroke-width:.7}
.decor .pot{fill:var(--pot)}
.decor .bord-pot{fill:var(--pot-rim)}
.decor .pot-sombre{fill:var(--pot-dark)}
.decor .cote{stroke:var(--pot-dark-rib);stroke-width:2.2}
.decor .bord-pot-sombre{fill:var(--pot-dark-rib)}

/* Pousse : la tige, les racines aériennes et les pétioles se dessinent (--t = durée), chaque feuille se déplie à son tour (--d = délai) */
/* « both » + opacité 0 au départ : en attendant son tour, un trait caché à bout arrondi laisserait un point visible */
.decor .trace{stroke-dasharray:1;stroke-dashoffset:1;animation:fe-trace var(--t,6s) linear var(--d,.8s) both}
.decor .pousse{animation:fe-deplie 1.4s cubic-bezier(.2,.8,.3,1) var(--d,0s) both}
.decor .balance{animation:fe-balance var(--b,7s) ease-in-out calc(var(--d,0s) + 1.4s) infinite alternate}
@keyframes fe-trace{from{stroke-dashoffset:1;opacity:0} 1%{opacity:1} to{stroke-dashoffset:0;opacity:1}}
@keyframes fe-deplie{from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:none;opacity:1}}
@keyframes fe-balance{from{transform:rotate(-2.5deg)} to{transform:rotate(2.5deg)}}
/* Animations réduites (réglage de l'appareil) : les plantes sont affichées directement, sans mouvement */
@media (prefers-reduced-motion: reduce){
  .decor .trace{animation:none;stroke-dashoffset:0}
  .decor .pousse,.decor .balance{animation:none}
}