/* Animations légères des sites de l'agence (Lyon, Reims, Grenoble, Lille), demandées le 2026-11-06 :
   « quand on arrive sur la bannière, un truc sur l'écriture de “Concevons ensemble un site internet qui vous aide
   à trouver des clients”, et des petites animations légères sur le reste du site ». Exception voulue à la règle
   « aucune animation décorative » des sites clients, pour les seuls sites de l'agence.
   Copie de référence : chaque site la recopie telle quelle dans une feuille chargée dans le <head>.
   Rien n'est masqué sans script : les classes mp-ecrit et mp-anim-monte ne sont posées que par le JavaScript,
   jamais si le visiteur a demandé moins de mouvement. */

/* 1. Accroche de la bannière qui s'écrit lettre après lettre, curseur clignotant au bout.
   Les lettres gardent leur place (opacité seule) : rien ne bouge autour, la ligne ne se recompose pas. */
.mp-ecrit .mp-ecrit__l{position:relative;opacity:0}
.mp-ecrit .mp-ecrit__l.mp-ecrit__vu{opacity:1}
.mp-ecrit .mp-ecrit__curseur::after{content:"";position:absolute;left:100%;top:.12em;bottom:.06em;width:max(2px,.07em);margin-left:.05em;border-radius:1px;background:var(--mp-ecrit-curseur,currentColor);animation:mp-ecrit-clignote 1.05s steps(1) infinite}
@keyframes mp-ecrit-clignote{50%{opacity:0}}

/* 2. Titres de section et cartes qui montent doucement à leur arrivée à l'écran, une seule fois, en léger décalé
   dans une même rangée. Ce qui est à l'écran au chargement n'est jamais animé (rien ne clignote). */
.mp-anim-monte .mp-monte{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.mp-anim-monte .mp-monte.est-monte{opacity:1;transform:none}
@media print{.mp-anim-monte .mp-monte,.mp-ecrit .mp-ecrit__l{opacity:1!important;transform:none!important}}

/* Lyon : curseur dans la couleur du mot « site internet » de l'accroche */
.mpa-banniere__accroche{--mp-ecrit-curseur:var(--nv-mot,#C2A36B)}