/* =====================================================================
   Sarah Zimbris — animations.css
   Couche d'animation posee PAR-DESSUS site.css (ne remplace rien).
   Charte respectee : rouge #DC2828 (rgba 220,40,40), sobre et premium.
   Tout est desactive si l'utilisateur demande "moins d'animations"
   (prefers-reduced-motion) : voir le bloc en bas de fichier.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A · HERO — entree sobre (page d'accueil uniquement).
   La classe .hero n'existe que sur index.html : le style ne s'applique
   donc qu'a l'accueil. Filet de securite : si ce fichier ne charge pas,
   le hero reste 100% visible (les regles opacity:0 vivent seulement ici).
   --------------------------------------------------------------------- */
.hero .eyebrow,
.hero h1,
.hero .tagline,
.hero .sub,
.hero .cta-row{
  opacity:0;
  transform:translateY(14px);
  animation:heroRise .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero .eyebrow{animation-delay:.05s}
.hero h1{animation-delay:.14s}
.hero .tagline{animation-delay:.24s}
.hero .sub{animation-delay:.32s}
.hero .cta-row{animation-delay:.40s}
@keyframes heroRise{to{opacity:1;transform:none}}

/* Le liseré rouge signature qui se trace du haut vers le bas */
.hero::after{transform-origin:top;animation:heroBar .9s cubic-bezier(.6,.1,.2,1) .1s both}
@keyframes heroBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------------------------------------------------------------------
   B · REVEAL — cascade dans les grilles.
   Le fondu .reveal / .is-visible est deja defini dans site.css.
   Ici on ajoute seulement l'effet d'escalier : sur un conteneur
   .reveal-group, les enfants .reveal apparaissent l'un apres l'autre.
   --------------------------------------------------------------------- */
.reveal-group>.reveal:nth-child(2){transition-delay:.08s}
.reveal-group>.reveal:nth-child(3){transition-delay:.16s}
.reveal-group>.reveal:nth-child(4){transition-delay:.24s}
.reveal-group>.reveal:nth-child(5){transition-delay:.32s}
.reveal-group>.reveal:nth-child(6){transition-delay:.40s}

/* ---------------------------------------------------------------------
   C · SURLIGNEUR ROUGE ANIME — signature de marque.
   Classe DISTINCTE des .hl statiques (on ne touche pas a l'existant).
   A poser sur UN seul mot-cle d'UN titre fort par page. Le surlignage
   se remplit de gauche a droite quand le titre entre a l'ecran.
   --------------------------------------------------------------------- */
.hl-draw{
  background:linear-gradient(rgba(220,40,40,.42), rgba(220,40,40,.42)) no-repeat;
  background-position:0 88%;
  background-size:0% 38%;
  padding:0 .06em;
  transition:background-size .8s cubic-bezier(.6,.2,.1,1) .25s;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hl-draw.is-drawn{background-size:100% 38%}
/* Sur fond noir, le nom garde le rouge intense (comme .hl sur .hero) */
.hero .hl-draw,.home-trust .hl-draw,.dark .hl-draw{background-image:linear-gradient(rgba(220,40,40,.55),rgba(220,40,40,.55))}

/* ---------------------------------------------------------------------
   D · COMPTEURS animes — chiffres cles.
   On anime uniquement les elements portant la classe .count-up.
   Le JS lit le texte, isole le nombre et compte jusqu'a lui en gardant
   le prefixe/suffixe ("400+", "15 ans"). Les libelles sans chiffre
   ("UPF") sont ignores automatiquement.
   --------------------------------------------------------------------- */
.count-up{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------
   E · HEADER INTELLIGENT — la nav se cache en descendant.
   La nav est deja sticky + floutee dans site.css. On ajoute seulement :
   - le glissement vers le haut quand on descend (reapparait en remontant)
   - une ombre douce une fois qu'on a scrolle (repere visuel discret).
   On NE change PAS le fond blanc de la nav (le fond sombre du brief
   jurerait avec le texte sombre existant).
   --------------------------------------------------------------------- */
nav{transition:transform .35s ease, box-shadow .25s ease, background .25s ease}
nav.nav-hidden{transform:translateY(-100%)}
nav.nav-scrolled{box-shadow:0 6px 24px rgba(22,22,22,.08)}

/* ---------------------------------------------------------------------
   F · LIENS — soulignement rouge qui glisse (entre a gauche, sort a droite).
   Applique aux liens de navigation (nav + navigation du pied de page)
   et a la classe utilitaire .link-underline pour un lien de texte.
   --------------------------------------------------------------------- */
.nav-links a,
footer .fnav a,
.link-underline{position:relative}
.nav-links a::after,
footer .fnav a::after,
.link-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--rouge);transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.6,.2,.1,1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
footer .fnav a:hover::after,
footer .fnav a:focus-visible::after,
.link-underline:hover::after,
.link-underline:focus-visible::after{transform:scaleX(1);transform-origin:left}
/* En menu mobile deroulant, pas de trait qui deborde sous chaque ligne */
@media(max-width:760px){.nav-links a::after{display:none}}

/* ---------------------------------------------------------------------
   H · BARRE DE PROGRESSION DE LECTURE — pages longues uniquement.
   Present seulement si la page contient <div class="read-progress">.
   Fin filet rouge en haut, largeur = pourcentage lu. Au-dessus de la nav.
   --------------------------------------------------------------------- */
.read-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--rouge);z-index:70;pointer-events:none;
  transition:width .1s linear;
}

/* ---------------------------------------------------------------------
   Respect de l'accessibilite : "reduire les animations" desactive TOUT.
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero .tagline,.hero .sub,.hero .cta-row{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .hero::after{animation:none!important;transform:none!important}
  .reveal-group>.reveal{transition-delay:0s!important}
  .hl-draw{background-size:100% 38%!important;transition:none!important}
  nav{transition:none!important}
  nav.nav-hidden{transform:none!important}
  .nav-links a::after,footer .fnav a::after,.link-underline::after{transition:none!important}
  .read-progress{transition:none!important}
}