/* ===========================================================================
4 — MOUVEMENT
---------------------------------------------------------------------------
POURQUOI CE FICHIER EST SEPARE
Toutes les animations du site sont ici, et nulle part ailleurs. Le jour
ou le client dit « c'est trop, calmez-moi ca », il y a un seul fichier a
ouvrir — et, a la limite, une seule balise a commenter dans
layout.njk pour tout desactiver d'un coup sans rien casser.
LES TROIS REGLES SUIVIES ICI
1. Une animation doit dire quelque chose de vrai.
Le cartouche monte parce qu'il arrive au premier plan. Les sections
apparaissent l'une apres l'autre parce qu'on les decouvre en
descendant. Une etoile qui scintille ou une balle qui roule sur des
montagnes ne dit rien : ca occupe l'ecran, ca detourne l'oeil du
bouton « Reserver », et ca vieillit tres mal. Elles ont ete
supprimees, ce n'est pas un oubli.
2. On n'anime que `transform` et `opacity`.
Ces deux proprietes sont traitees par le processeur graphique, sans
recalcul de mise en page ni repeinture. Animer `width`, `height`,
`top` ou `margin` force le navigateur a tout recalculer a chaque
image : c'est la cause numero un des animations qui saccadent sur un
telephone d'entree de gamme — c'est-a-dire chez une bonne partie des
visiteurs.
3. Tout est court et amorti.
140 ms pour une reaction (survol), 420 ms pour une arrivee. Au-dela
de 500 ms, l'interface parait lente ; en dessous de 100 ms, le
mouvement n'est pas percu et n'apporte donc rien.
FILET DE SECURITE
La section finale desactive integralement ce fichier si le systeme du
visiteur demande de reduire les animations. Cette section doit rester
la DERNIERE du dernier fichier CSS charge.
=========================================================================== */
/* ---------------------------------------------------------------------------
1. ARRIVEE DE LA PAGE
---------------------------------------------------------------------------
Une sequence orchestree, jamais un empilement d'effets simultanes :
0 ms la photographie se pose (leger dezoom)
120 ms le cartouche monte et apparait
260 ms les donnees courtes s'affichent
Le decalage se lit comme une mise en place, pas comme un chargement lent.
Total : moins d'une seconde.
--------------------------------------------------------------------------- */
@keyframes scene-pose {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
@keyframes monte-et-apparait {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes apparait {
from { opacity: 0; }
to { opacity: 1; }
}
/* Le dezoom porte sur le voile, qui couvre exactement la photo : animer un
`background-image` est impossible, animer un calque par-dessus l'est.
`will-change` previent le navigateur de preparer un calque dedie. */
.scene__voile {
animation: scene-pose 1400ms var(--courbe) both;
will-change: transform;
}
.scene__cartouche {
animation: monte-et-apparait var(--duree-douce) var(--courbe) 120ms both;
}
.scene__cartouche .donnee {
animation: apparait 600ms var(--courbe) 260ms both;
}
/* ---------------------------------------------------------------------------
2. REVELATION AU DEFILEMENT
---------------------------------------------------------------------------
Chaque section se leve legerement quand elle entre dans l'ecran. Une
seule fois : rejouer l'animation en remontant la page est desagreable et
donne l'impression que le site est instable.
POINT CRITIQUE — la garde `html.js`.
L'etat de depart (invisible) n'est applique QUE si JavaScript s'execute :
ui.js pose la classe `js` sur des sa premiere ligne. Sans cette
garde, un visiteur dont le JavaScript est bloque — extension de securite,
reseau coupe en cours de chargement, robot d'indexation — verrait une
page entierement blanche, puisque personne ne viendrait jamais retirer
l'opacite nulle. C'est un accident classique, et il est silencieux :
il ne se voit pas en developpement.
--------------------------------------------------------------------------- */
html.js .a-reveler {
opacity: 0;
transform: translateY(18px);
}
html.js .a-reveler.revele {
opacity: 1;
transform: translateY(0);
transition: opacity var(--duree-douce) var(--courbe),
transform var(--duree-douce) var(--courbe);
}
/* Decalage en cascade a l'interieur d'un groupe (cartes d'avis, vignettes
de la galerie). 60 ms d'ecart : assez pour que l'oeil percoive un ordre,
assez peu pour que l'ensemble reste rapide.
Le decalage s'arrete a la sixieme carte — au-dela, l'attente devient
perceptible et l'effet se retourne contre lui-meme. */
html.js .cascade > *:nth-child(1) { transition-delay: 0ms; }
html.js .cascade > *:nth-child(2) { transition-delay: 60ms; }
html.js .cascade > *:nth-child(3) { transition-delay: 120ms; }
html.js .cascade > *:nth-child(4) { transition-delay: 180ms; }
html.js .cascade > *:nth-child(5) { transition-delay: 240ms; }
html.js .cascade > *:nth-child(n+6) { transition-delay: 300ms; }
/* ---------------------------------------------------------------------------
3. VISIONNEUSE DE PHOTOS
---------------------------------------------------------------------------
Ouverte au clic sur une vignette (voir ui.js). Sans JavaScript, le lien
de la vignette ouvre simplement l'image en pleine page : la galerie reste
utilisable, elle est juste moins confortable.
--------------------------------------------------------------------------- */
/* IMPORTANT — le selecteur porte `[open]`.
Un