/* Les blocs qui arrivent chacun de leur côté.
   Chaque bloc marqué .arrive entre par le côté de son RÔLE : un titre descend, un texte court s'agrandit en fondu,
   un bouton monte, une photo arrive du côté. Les cartes d'une rangée [data-cascade] se suivent.
   Doux : 40 à 60 px, 0,9 s, une cascade de 0,18 s. Sans JavaScript, tout reste visible
   (la classe .js n'est posée que par arrive.js) ; en mouvement réduit, rien ne bouge. */
.js .arrive{opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*.18s);will-change:opacity,transform}
.js .arrive[data-de="haut"]{transform:translateY(-48px)}
.js .arrive[data-de="bas"]{transform:translateY(48px)}
.js .arrive[data-de="gauche"]{transform:translateX(-56px)}
.js .arrive[data-de="droite"]{transform:translateX(56px)}
.js .arrive[data-de="pres"]{transform:scale(.9)}
/* Au téléphone, une entrée par le côté se fait par le bas : la photo n'est pas coupée par le bord, et la page ne glisse pas de côté. */
@media (max-width:40rem){.js .arrive[data-de="gauche"],.js .arrive[data-de="droite"]{transform:translateY(40px)}}
.js .arrive.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .arrive,.js .arrive[data-de]{opacity:1;transform:none;transition:none}}   /* [data-de] : aussi fort que la règle de direction, et posé après elle */