/* =========================================================
   Fleurs Ernst — Loader de transition entre pages
   Overlay vert plein écran + rose crème qui se trace.
   Inactif si l'utilisateur préfère les animations réduites.
   ========================================================= */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #234c27;                 /* vert de la marque */
  opacity: 1;
  transition: opacity .5s ease;
}

/* Disparition (ajoutée par le JS quand la page est prête) */
#page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* Apparition (ajoutée au clic sur un lien interne, avant de changer de page) */
#page-loader.is-leaving {
  opacity: 1;
  visibility: visible;
}

.loader__rose {
  width: clamp(110px, 26vw, 170px);
  height: auto;
  overflow: visible;
}

.loader__rose path {
  fill: none;
  stroke: #fbf5ea;                     /* crème */
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* --len est affiné par le JS (longueur réelle de chaque tracé).
     Valeur par défaut élevée pour que la rose soit cachée AVANT le JS
     (évite le flash où elle apparaît en entier). */
  --len: 6000;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

/* L'animation ne démarre qu'une fois les longueurs mesurées par le JS
   (sinon le tracé saute quand --len passe de la valeur par défaut à la vraie). */
.loader__rose.is-ready path {
  animation: roseDraw 2.6s ease-in-out infinite;
}

@keyframes roseDraw {
  0%   { stroke-dashoffset: var(--len); opacity: 1; }
  55%  { stroke-dashoffset: 0;          opacity: 1; }
  80%  { stroke-dashoffset: 0;          opacity: 1; }
  100% { stroke-dashoffset: 0;          opacity: 0; }
}

/* Accessibilité : pas d'animation, on cache simplement le loader tout de suite */
@media (prefers-reduced-motion: reduce) {
  #page-loader { display: none; }
}