/* =========================================================
   ANIMATION D'ENTRÉE « TF » (2,6 s) — dans le style du site tf-formation.fr
   Sur le fond gris clair du site : le pictogramme du logo se trace puis se remplit, « TF formation » apparaît,
   la pilule bleue inclinée du site (« Rentrée le lundi 7 décembre ») se déploie,
   puis l'écran remonte comme un rideau aux coins arrondis (64 px, comme le hero du site) et la page apparaît.
   L'animation est 100 % CSS (elle démarre au premier affichage) ; intro.js gère le passage au clic / Échap,
   l'apparition du contenu (.tf-reveal) et le retrait de l'écran. Sans JS, l'écran remonte seul à 2,6 s.
   ========================================================= */

#tf-intro{display:none}
html.tf-intro-on #tf-intro{
  /* 64 px de plus que l'écran : les coins arrondis restent cachés sous le bas de l'écran jusqu'à la sortie */
  display:grid;place-items:center;position:fixed;top:0;left:0;right:0;height:calc(100% + 64px);padding-bottom:64px;z-index:10000;overflow:hidden;
  background:#f5f5f5;cursor:pointer;-webkit-tap-highlight-color:transparent;
  border-radius:0 0 64px 64px;will-change:transform;
  animation:tf-curtain 2.6s cubic-bezier(.7,0,.3,1) forwards
}
@keyframes tf-curtain{0%,72%{transform:translateY(0)}100%{transform:translateY(-104%);visibility:hidden}}

#tf-intro .tf-intro__stage{display:flex;flex-direction:column;align-items:center;gap:18px}

/* 1. Pictogramme : tracé (0 → 0,95 s) puis remplissage (0,7 → 1,1 s) */
#tf-intro .tf-intro__mark{width:min(150px,36vw);height:auto;aspect-ratio:34/25;color:#0a1444;
  fill:#0a1444;fill-opacity:0;stroke:#0a1444;stroke-width:.35;stroke-dasharray:1;stroke-dashoffset:1;
  animation:tf-draw 2.6s ease-out forwards}
@keyframes tf-draw{
  0%{stroke-dashoffset:1;fill-opacity:0;transform:scale(.92)}
  36%{stroke-dashoffset:0;fill-opacity:0}
  44%{fill-opacity:1;transform:scale(1)}
  100%{stroke-dashoffset:0;fill-opacity:1;transform:scale(1)}
}

/* 2. « TF formation » (partie texte du logo, sans le pictogramme) : 0,85 → 1,3 s */
#tf-intro .tf-intro__logo{width:min(300px,70vw);height:auto;clip-path:inset(0 0 0 23%);margin-left:calc(min(300px,70vw) * -.23);
  opacity:0;animation:tf-logo 2.6s cubic-bezier(.215,.61,.355,1) forwards}
@keyframes tf-logo{0%,33%{opacity:0;transform:translateY(14px)}50%,100%{opacity:1;transform:none}}

/* 3. Pilule bleue inclinée (le surlignage du site) : 1,25 → 1,75 s */
#tf-intro .tf-intro__pill{margin:4px 0 0;padding:.35em 1em .3em;border-radius:125px;background:#0766ec;color:#fff;white-space:nowrap;
  font-family:"Anybody","Anybody Fallback",sans-serif;font-weight:700;font-size:clamp(17px,4.4vw,24px);
  transform-origin:0 50%;transform:rotate(-2deg) scaleX(0);animation:tf-pill 2.6s cubic-bezier(.215,.61,.355,1) forwards}
@keyframes tf-pill{0%,48%{transform:rotate(-2deg) scaleX(0);color:transparent}64%{transform:rotate(-2deg) scaleX(1);color:transparent}72%,100%{transform:rotate(-2deg) scaleX(1);color:#fff}}

html.tf-intro-lock{overflow:hidden}

/* Apparition du contenu pendant que le rideau remonte (class="tf-reveal", décalage : style="--tf-delay:.1s") */
/* Sécurité : sans intro.js, le contenu réapparaît seul après 2,7 s */
html.tf-intro-on .tf-reveal{opacity:0;transform:translateY(22px);animation:tf-reveal-failsafe .5s 2.7s forwards}
@keyframes tf-reveal-failsafe{to{opacity:1;transform:none}}
html.tf-intro-revealed .tf-reveal{opacity:1;transform:none;animation:none;transition:opacity .7s cubic-bezier(.215,.61,.355,1),transform .7s cubic-bezier(.215,.61,.355,1);transition-delay:calc(.1s + var(--tf-delay,0s))}

@media (prefers-reduced-motion:reduce){#tf-intro{display:none!important}html.tf-intro-on .tf-reveal{opacity:1;transform:none;animation:none}}