.
Actif uniquement pendant les fenêtres où le joueur se déplace réellement
(mêmes % que rally-move-*-anim) ; jambes au repos (0deg ajouté) le reste
du temps, pendant qu'il sert/frappe/attend. Deux jambes en opposition de
phase = une vraie alternance de pas, pas juste un "glissement". */
/* Réaligné sur les nouvelles fenêtres de déplacement (rally-move-*-anim
ci-dessus, avancées pour anticiper) — sinon les pas se déclenchaient sur
d'anciens repères et n'étaient plus synchronisés avec le vrai pas. */
/* Foulée quasi continue entre CHAQUE frappe (et pas seulement pendant le
grand déplacement de zone) : le joueur reprend un petit jeu de jambes dès
la fin d'une frappe pour anticiper le replacement fond-de-court/filet,
au lieu de rester planté jusqu'au début du prochain déplacement. Chaque
fenêtre [frappe→frappe suivante] a son propre trio de pas, qui s'arrête
juste avant l'impact (pieds au sol au moment de frapper). */
@keyframes rally-legs-a-stride {
0%, 2.5% { transform: rotate(0deg); }
11.7% { transform: rotate(16deg); }
21% { transform: rotate(-12deg); }
30.2% { transform: rotate(16deg); }
39.4%, 42.9% { transform: rotate(0deg); }
48.2% { transform: rotate(16deg); }
53.4% { transform: rotate(-12deg); }
58.7% { transform: rotate(16deg); }
63.9%, 67.2% { transform: rotate(0deg); }
75% { transform: rotate(16deg); }
82.8% { transform: rotate(-12deg); }
90.5% { transform: rotate(16deg); }
98.3%, 100% { transform: rotate(0deg); }
}
@keyframes rally-legs-a-stride-alt {
0%, 2.5% { transform: rotate(0deg); }
11.7% { transform: rotate(-16deg); }
21% { transform: rotate(12deg); }
30.2% { transform: rotate(-16deg); }
39.4%, 42.9% { transform: rotate(0deg); }
48.2% { transform: rotate(-16deg); }
53.4% { transform: rotate(12deg); }
58.7% { transform: rotate(-16deg); }
63.9%, 67.2% { transform: rotate(0deg); }
75% { transform: rotate(-16deg); }
82.8% { transform: rotate(12deg); }
90.5% { transform: rotate(-16deg); }
98.3%, 100% { transform: rotate(0deg); }
}
@keyframes rally-legs-b-stride {
0%, 1.1% { transform: rotate(0deg); }
5.3% { transform: rotate(16deg); }
9.6% { transform: rotate(-12deg); }
13.8% { transform: rotate(16deg); }
18%, 21.2% { transform: rotate(0deg); }
29.6% { transform: rotate(16deg); }
38% { transform: rotate(-12deg); }
46.4% { transform: rotate(16deg); }
54.8%, 58.1% { transform: rotate(0deg); }
63.4% { transform: rotate(16deg); }
68.7% { transform: rotate(-12deg); }
74% { transform: rotate(16deg); }
79.3%, 81.6% { transform: rotate(0deg); }
86% { transform: rotate(16deg); }
90.3% { transform: rotate(-12deg); }
94.7% { transform: rotate(16deg); }
99%, 100% { transform: rotate(0deg); }
}
@keyframes rally-legs-b-stride-alt {
0%, 1.1% { transform: rotate(0deg); }
5.3% { transform: rotate(-16deg); }
9.6% { transform: rotate(12deg); }
13.8% { transform: rotate(-16deg); }
18%, 21.2% { transform: rotate(0deg); }
29.6% { transform: rotate(-16deg); }
38% { transform: rotate(12deg); }
46.4% { transform: rotate(-16deg); }
54.8%, 58.1% { transform: rotate(0deg); }
63.4% { transform: rotate(-16deg); }
68.7% { transform: rotate(12deg); }
74% { transform: rotate(-16deg); }
79.3%, 81.6% { transform: rotate(0deg); }
86% { transform: rotate(-16deg); }
90.3% { transform: rotate(12deg); }
94.7% { transform: rotate(-16deg); }
99%, 100% { transform: rotate(0deg); }
}
.rally-leg-a1, .rally-leg-a2, .rally-leg-b1, .rally-leg-b2 { transform: rotate(0deg); }
.rally-active .rally-leg-a1 { animation: rally-legs-a-stride 13s linear infinite paused; animation-play-state: running; }
.rally-active .rally-leg-a2 { animation: rally-legs-a-stride-alt 13s linear infinite paused; animation-play-state: running; }
.rally-active .rally-leg-b1 { animation: rally-legs-b-stride 13s linear infinite paused; animation-play-state: running; }
.rally-active .rally-leg-b2 { animation: rally-legs-b-stride-alt 13s linear infinite paused; animation-play-state: running; }
/* Même bascule que les bras/déplacements : un point sur deux, chaque joueur
marche sur le tempo de l'autre (voir plus haut pour le pourquoi). */
.rally-active.rally-swap .rally-leg-a1 { animation-name: rally-legs-b-stride; }
.rally-active.rally-swap .rally-leg-a2 { animation-name: rally-legs-b-stride-alt; }
.rally-active.rally-swap .rally-leg-b1 { animation-name: rally-legs-a-stride; }
.rally-active.rally-swap .rally-leg-b2 { animation-name: rally-legs-a-stride-alt; }
@media (prefers-reduced-motion: reduce) {
.rally-shuttle, .rally-shuttle-trail,
.rally-forearm.rally-arm-a, .rally-forearm.rally-arm-b,
.rally-upperarm.rally-arm-a, .rally-upperarm.rally-arm-b,
.rally-move-a, .rally-move-b,
.rally-leg-a1, .rally-leg-a2, .rally-leg-b1, .rally-leg-b2 { animation: none !important; }
}
.site-footer .footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
margin-bottom: 24px;
}
.site-footer h4 { color: #fff; font-size: 1rem; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 16px;
font-size: 0.82rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
color: rgba(255,255,255,0.6);
}
.footer-bottom a { color: rgba(255,255,255,0.6); }
/* --- Flash messages --- */
.flash {
padding: 14px 18px;
border-radius: var(--radius-sm);
margin-bottom: 20px;
font-weight: 600;
}
.flash-success { background: rgba(31,157,85,0.12); color: var(--color-success); }
.flash-error { background: rgba(192,57,43,0.12); color: var(--color-danger); }
/* --- Forms (public + admin) --- */
label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--color-primary); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="time"], input[type="file"], select, textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.96rem;
margin-bottom: 16px;
}
textarea { min-height: 120px; }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 200px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; margin: 0; }
/* Pour une case à cocher seule DANS UNE CELLULE DE TABLEAU (| ) : jamais
.checkbox-row ici — un display:flex sur un | lui fait perdre son
display:table-cell et casse l'alignement des colonnes avec les autres
lignes. Un simple centrage suffit, la cellule reste une vraie cellule. */
.td-checkbox { text-align: center; vertical-align: middle; }
.td-checkbox input { margin: 0; }
/* --- Apparition au défilement (progressive enhancement) ---
Par défaut le contenu est toujours visible : le masquage n'est activé que
par main.js (classe .js-reveal posée sur ) quand IntersectionObserver
est dispo et que l'utilisateur n'a pas demandé "prefers-reduced-motion".
Sans JS (ou moteur trop ancien), rien ne disparaît jamais. */
.js-reveal .reveal {
opacity: 0;
/* Volontairement lent (le retour utilisateur : "ça charge trop vite, je
n'ai pas le temps de le voir") : 1.6s, largement au-dessus des 0.2-0.4s
habituels, pour qu'on voie clairement le mouvement même en défilant
vite. ease-out : départ franc, arrivée en douceur. Inclut box-shadow/
border-color pour ne pas écraser (plus grande spécificité que
.card/.tarif-card/.partenaire-chip) leur propre transition au survol. */
transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Direction d'arrivée : main.js tire l'une de ces classes au hasard pour
chaque bloc (par-dessus .reveal), pour que les apparitions ne soient pas
toutes identiques. Le point de départ (translation/rotation) ci-dessous ;
.is-visible (3 classes, donc plus spécifique) ramène tout à l'état final. */
.js-reveal .reveal-bottom { transform: translateY(46px); }
.js-reveal .reveal-top { transform: translateY(-46px); }
.js-reveal .reveal-left { transform: translateX(-56px); }
.js-reveal .reveal-right { transform: translateX(56px); }
.js-reveal .reveal-flip { transform: perspective(700px) rotateY(90deg); }
.js-reveal .reveal.is-visible {
opacity: 1;
transform: none;
}
@media (max-width: 780px) {
.nav-toggle { display: inline-block; }
/* Le menu ouvert est un panneau détaché (position:absolute), pas un bloc
empilé dans le header (l'ancienne approche, avec order:3 + flex-wrap,
agrandissait la boîte du header lui-même — dès que cette boîte dépassait
la hauteur de l'écran, position:sticky décrochait et le menu défilait
normalement au lieu de rester collé en haut). Ici le header garde une
hauteur fixe et minime (juste le logo + le bouton), donc il reste
toujours bien accroché ; le panneau se contente de s'ancrer juste
en dessous (.site-header, sticky, sert de repère de positionnement). */
.main-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg);
border-top: 1px solid var(--color-border);
box-shadow: 0 12px 24px rgba(11,79,108,0.15);
max-height: calc(100vh - 70px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 49;
}
.main-nav.is-open { display: block; }
.main-nav ul { flex-direction: column; padding: 8px 16px 16px; }
}
|