/* La courbe « Trois modes d'intervention » — animation au défilement.
   Le SVG était servi en <img> : il est désormais posé en ligne par
   hf-courbe.php, ce qui permet d'animer le tracé et les trois pastilles.

   Règle de sûreté : l'état d'attente (tout masqué) n'est appliqué que sous
   .hf-courbe--prete, classe posée par le script. Sans JavaScript, la figure
   reste complète et immobile — rien ne disparaît. */

.hf-courbe{
  display:block;width:100%;max-width:680px;height:auto;
}
.hf-courbe__ombre{opacity:.5}

/* Les transformations SVG se calent sur la boîte de l'élément, pas sur
   l'origine du repère : sans transform-box, tout part du coin haut-gauche. */
.hf-courbe__pastille,.hf-courbe__num,.hf-courbe__titre,
.hf-courbe__sous,.hf-courbe__halo{
  transform-box:fill-box;transform-origin:center;
}

/* Décalage propre à chaque étape : la pastille arrive quand le trait
   l'atteint. */
.hf-courbe__etape--1{--d:.00s}
.hf-courbe__etape--2{--d:.50s}
.hf-courbe__etape--3{--d:1.00s}

/* ── État d'attente ──────────────────────────────────────────────────────── */
.hf-courbe--prete .hf-courbe__pastille,
.hf-courbe--prete .hf-courbe__num{opacity:0;transform:scale(.5)}
.hf-courbe--prete .hf-courbe__titre,
.hf-courbe--prete .hf-courbe__sous{opacity:0;transform:translateY(9px)}
.hf-courbe--prete .hf-courbe__halo{opacity:0}

.hf-courbe--prete .hf-courbe__trait{
  transition:stroke-dashoffset 1.7s cubic-bezier(.65,0,.35,1);
}
.hf-courbe--prete .hf-courbe__pastille,
.hf-courbe--prete .hf-courbe__num{
  transition:opacity .4s ease,transform .55s cubic-bezier(.34,1.36,.52,1);
  transition-delay:calc(var(--d, 0s) + .30s);
}
.hf-courbe--prete .hf-courbe__titre{
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--d, 0s) + .46s);
}
.hf-courbe--prete .hf-courbe__sous{
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--d, 0s) + .54s);
}

/* ── Déclenchement ───────────────────────────────────────────────────────── */
/* Le script pose la longueur du tracé en style en ligne : il faut !important
   pour la ramener à zéro depuis la feuille. */
.hf-courbe.est-anime .hf-courbe__trait{stroke-dashoffset:0 !important}
.hf-courbe.est-anime .hf-courbe__pastille,
.hf-courbe.est-anime .hf-courbe__num{opacity:1;transform:scale(1)}
.hf-courbe.est-anime .hf-courbe__titre,
.hf-courbe.est-anime .hf-courbe__sous{opacity:1;transform:translateY(0)}
.hf-courbe.est-anime .hf-courbe__halo{
  animation:hf-courbe-halo 1s ease-out calc(var(--d, 0s) + .30s) 1 both;
}
@keyframes hf-courbe-halo{
  from{opacity:.85;transform:scale(1)}
  to{opacity:0;transform:scale(1.85)}
}

/* ── Mouvement réduit ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hf-courbe .hf-courbe__trait{stroke-dashoffset:0 !important;transition:none !important}
  .hf-courbe .hf-courbe__pastille,.hf-courbe .hf-courbe__num,
  .hf-courbe .hf-courbe__titre,.hf-courbe .hf-courbe__sous{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .hf-courbe .hf-courbe__halo{animation:none !important;opacity:0 !important}
}