/* Le CSS de l'arbre SharePeace : la seule définition de ces règles dans tout le projet.
   Chargé par l'accueil (une balise <link> dans son <head>) et par la page du bracelet
   (une poussée dans la pile « styles » du gabarit). Toute modification ici touche les deux. */

/* La couleur du trait a quitté le :root de l'accueil pour venir ici : elle voyage
   désormais avec la règle qui l'utilise. C'est sa seule déclaration du projet — la
   page du bracelet n'a aucune palette sombre, elle ne pouvait pas la fournir. */
:root{--arbre:#F6F8F3}

/* La MÊME règle .branche sert deux fonds opposés. Elle n'a pas à le savoir : c'est la
   variable qu'elle lit qui change, et rien d'autre.
   Mesuré : #F6F8F3 sur le crème #FAEAC9 contraste à 1,11:1 — le minimum absolu étant
   1:1. À 8 % d'opacité l'écart tombe à 3 niveaux sur 255, invisible en plein jour. Sur
   fond clair, il faut un trait SOMBRE ; la page du bracelet redéclare donc « --arbre »
   sur son conteneur, et la cascade fait le reste. Voir branch.blade.php. */
:root{--arbre-fond:#22402F}

.branche{stroke:var(--arbre);stroke-linecap:round;fill:none;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:tracer 1.1s ease-out forwards;animation-delay:var(--d)}
@keyframes tracer{to{stroke-dashoffset:0}}

/* Trois couches, trois rôles distincts :
   .porte-feuille = la POSITION (attribut SVG, ne change jamais)
   .frisson       = le MOUVEMENT (CSS, sur place)
   .feuille       = l'OUVERTURE (CSS, une seule fois)                         */
.porte-feuille{cursor:pointer}
.frisson{transform-box:fill-box;transform-origin:0% 50%;animation:frissonner var(--fd) ease-in-out infinite;animation-delay:var(--fdelai)}
/* La feuille dort 86 % du cycle. Avec des délais très étalés,
   seules quelques feuilles bougent à un instant donné. */
@keyframes frissonner{
  0%,86%,100%{transform:rotate(0deg)}
  90%{transform:rotate(3.2deg)}
  94%{transform:rotate(-2.2deg)}
  97%{transform:rotate(1deg)}
}
.feuille{transform-box:fill-box;transform-origin:0% 50%;transform:scale(0);opacity:0;animation:deplier .85s cubic-bezier(.34,1.45,.5,1) forwards;animation-delay:var(--d);transition:filter .3s}
@keyframes deplier{to{transform:scale(1);opacity:1}}
.porte-feuille:hover .feuille{filter:drop-shadow(0 0 5px rgba(250,233,203,.95))}
#zone-arbre{cursor:pointer}

/* Les sélecteurs sont nommés un à un, et jamais le sélecteur universel que l'accueil
   emploie chez lui : ce fichier est aussi chargé par la page du bracelet, où une règle
   universelle déborderait sur tout le contenu qui ne regarde pas l'arbre. */
@media (prefers-reduced-motion: reduce){
  .branche,.feuille{animation-duration:.01ms!important;animation-delay:0ms!important}
  .frisson{animation:none}
}