/* anim.css — animations « sobre premium » du site DMS Réunion. Chargé APRÈS style.css (qui reste la maquette figée, jamais modifiée). Principe : l'état masqué ne s'applique que si porte la classe `anim`, posée par un script inline avant le premier paint (pas de flash). Si le JS ne tourne pas, la classe est retirée par sécurité → contenu visible sans JS. On anime uniquement `opacity` et `transform` (composités GPU). Les révélations utilisent `animation` (et non `transition`) pour ne pas écraser les transitions de survol déjà définies dans style.css ; anim.js retire l'animation une fois terminée (classe `done`) afin que les hover `translateY` restent opérationnels. */ :root { --anim-ease: cubic-bezier(.22, .61, .36, 1); --anim-dur: .48s; --anim-rise: 14px; } /* ---------------------------------------------------- CORRECTIFS RESPONSIVE Ces règles ne sont pas des animations : elles corrigent des débordements de la maquette, que l'on ne modifie jamais (style.css reste figé). Volontairement hors de `html.anim` : elles doivent s'appliquer même sans JavaScript. Bloc FEDER du footer : son

est un élément flex sans min-width, il refuse donc de descendre sous sa largeur intrinsèque et faisait déborder la page de ~7 px sous 360 px de large — d'où un scroll horizontal sur iPhone. */ .feder { flex-wrap: wrap; } .feder p { min-width: 0; flex: 1 1 260px; } /* Dépliant « fiche technique complète ». Les fiches transcrites depuis les PDF constructeur font une cinquantaine de lignes : la page n'affiche que l'essentiel et replie le reste ici.

natif, donc sans JavaScript. */ .specplus { margin-top: 14px; border-top: 1px solid var(--line); } .specplus > summary { list-style: none; cursor: pointer; padding: 12px 0 2px; font-family: var(--cond); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); transition: color .2s; } .specplus > summary::-webkit-details-marker { display: none; } .specplus > summary::after { content: "＋"; float: right; font-family: var(--body); font-size: 15px; line-height: 1; color: var(--red); } .specplus[open] > summary::after { content: "−"; } .specplus > summary:hover { color: var(--ink); } .specplus > summary span { text-transform: none; letter-spacing: 0; opacity: .65; } .specplus > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } @keyframes dms-rise { from { opacity: 0; transform: translateY(var(--anim-rise)); } to { opacity: 1; transform: none; } } @keyframes dms-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes dms-slide-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } /* Halo rouge du hero : respiration très lente, à peine perceptible. */ @keyframes dms-halo { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Dérive du mot fantôme en filigrane. */ @keyframes dms-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* ---------------------------------------------------------- 1. RÉVÉLATIONS Blocs de contenu révélés au scroll par anim.js (IntersectionObserver). */ html.anim .sec-head:not(.in), html.anim .grid > .card:not(.in), html.anim .brands > .bc:not(.in), html.anim .stats > .stat:not(.in), html.anim .contact-grid > .cc:not(.in), html.anim .gal > .g:not(.in), html.anim .agal > figure:not(.in), html.anim .team > .tm:not(.in), html.anim .two > div:not(.in), html.anim .cgrid > :not(.in), html.anim .lbody:not(.in), html.anim .band:not(.in) { opacity: 0; } html.anim .sec-head.in, html.anim .grid > .card.in, html.anim .brands > .bc.in, html.anim .stats > .stat.in, html.anim .contact-grid > .cc.in, html.anim .gal > .g.in, html.anim .agal > figure.in, html.anim .team > .tm.in, html.anim .two > div.in, html.anim .cgrid > .in, html.anim .lbody.in, html.anim .band.in { animation: dms-rise var(--anim-dur) var(--anim-ease) var(--d, 0ms) both; } /* Animation terminée : on rend la main au CSS de base (hover, etc.). `!important` volontaire — cette règle de nettoyage doit l'emporter sur toutes les règles de révélation ci-dessus, qui sont plus spécifiques. Sans elle, l'état figé de l'animation écraserait les `transform` de survol de style.css. */ html.anim .done { animation: none !important; } /* ---------------------------------------------------------- 2. HEROS Séquence au chargement (haut de page : pas d'observer nécessaire). L'image du hero est le LCP → opacité seule, sans délai. */ html.anim .hero-copy > *, html.anim .bhero-grid > div:first-child > *, html.anim .mhero-grid > div:first-child > * { animation: dms-rise .5s var(--anim-ease) both; } html.anim .hero-copy > :nth-child(2), html.anim .bhero-grid > div:first-child > :nth-child(2), html.anim .mhero-grid > div:first-child > :nth-child(2) { animation-delay: .07s; } html.anim .hero-copy > :nth-child(3), html.anim .bhero-grid > div:first-child > :nth-child(3), html.anim .mhero-grid > div:first-child > :nth-child(3) { animation-delay: .14s; } html.anim .hero-copy > :nth-child(4), html.anim .bhero-grid > div:first-child > :nth-child(4), html.anim .mhero-grid > div:first-child > :nth-child(4) { animation-delay: .21s; } html.anim .hero-copy > :nth-child(n + 5), html.anim .bhero-grid > div:first-child > :nth-child(n + 5), html.anim .mhero-grid > div:first-child > :nth-child(n + 5) { animation-delay: .28s; } /* Visuels : la moto s'installe (opacité seule pour ne pas retarder le LCP). */ html.anim .hero-img img, html.anim .bhero-img img, html.anim .mhero-img img { animation: dms-fade .7s ease-out both; } html.anim .hero-img .hero-badge { animation: dms-slide-in .5s var(--anim-ease) .34s both; } html.anim .crumb { animation: dms-fade .5s ease-out both; } /* Fonds animés en continu. */ html.anim .waves { animation: dms-halo 10s ease-in-out infinite; } html.anim .hero .ghost, html.anim .bhero .ghost, html.anim .mhero .ghost { animation: dms-drift 16s ease-in-out infinite; } /* ---------------------------------------------------------- 3. DÉTAILS Lignes de la fiche technique et points forts : arrivée en cascade. */ html.anim .spectab tr:not(.in), html.anim .plist li:not(.in) { opacity: 0; } html.anim .spectab tr.in, html.anim .plist li.in { animation: dms-rise .4s var(--anim-ease) var(--d, 0ms) both; } /* Le point du bouton du stagiaire : pulsation discrète (il attend une question). */ html.anim .stg-launch .dot { animation: dms-halo 2.6s ease-in-out infinite; } /* ---------------------------------------------------------- 4. PAGES Fondu natif entre les pages (Chrome/Edge/Safari ; ignoré ailleurs). */ @view-transition { navigation: auto; } /* ---------------------------------------------------------- 5. EN-TÊTE Le header se condense dès que la page défile (classe posée par anim.js). */ /* Le logo garde sa taille au défilement (choix retenu) : seule l'ombre apparaît. */ html.anim header { transition: box-shadow .25s ease, background-color .25s ease; } html.anim.scrolled header { box-shadow: 0 6px 24px rgba(0, 0, 0, .10); } /* Soulignement qui se dessine sous les liens de navigation. */ html.anim nav ul li a { position: relative; } html.anim nav ul li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--anim-ease); } html.anim nav ul li a:hover::after, html.anim nav ul li a.on::after { transform: scaleX(1); } /* ---------------------------------------------------------- 6. PANNEAU CHAT Ouverture glissée plutôt qu'apparition sèche. */ @keyframes dms-panel { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } html.anim .stg-panel.open { animation: dms-panel .28s var(--anim-ease) both; } html.anim .stg-m { animation: dms-rise .32s var(--anim-ease) both; } html.anim .stg-launch { animation: dms-rise .4s var(--anim-ease) .5s both; } /* ---------------------------------------------------------- 7. PARALLAXE Décalage très léger du visuel et du filigrane (anim.js pilote --p). Désactivé sous 860 px, là où les visuels de hero sont déjà masqués. */ @media (min-width: 861px) { /* Amplitudes réglables. Elles sont différenciées car les heros n'ont pas la même hauteur utile : la home fait 86vh (large marge), la page modèle est compacte (20 px de padding) et rognerait le visuel si on poussait autant. Seuls ~60 % de l'amplitude sont réellement vus : au-delà, le hero a quitté l'écran. */ html.anim { --par-hero: 110px; --par-brand: 70px; --par-model: 45px; --par-ghost: -90px; } html.anim .hero-img { transform: translateY(calc(var(--p, 0) * var(--par-hero))); } html.anim .bhero-img { transform: translateY(calc(var(--p, 0) * var(--par-brand))); } html.anim .mhero-img { transform: translateY(calc(var(--p, 0) * var(--par-model))); } html.anim .hero .ghost, html.anim .bhero .ghost, html.anim .mhero .ghost { transform: translateY(calc(var(--p, 0) * var(--par-ghost))); } /* La dérive continue du filigrane cède la place au parallaxe. */ html.anim.parallax .hero .ghost, html.anim.parallax .bhero .ghost, html.anim.parallax .mhero .ghost { animation: none; } } /* ---------------------------------------------------------- ACCESSIBILITÉ Mouvement réduit : tout est neutralisé, rien ne reste masqué. */ @media (prefers-reduced-motion: reduce) { html.anim *, html.anim *::before, html.anim *::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } @view-transition { navigation: none; } } /* ---------------------------------------------------------- IMPRESSION Un bloc pas encore révélé ne doit jamais sortir blanc sur le papier (fiche technique imprimée depuis une page modèle, par exemple). */ @media print { html.anim *, html.anim *::before, html.anim *::after { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ---------------------------------------------------- PIED DE PAGE — CONTACT Le bloc « Nous trouver » alignait quatre lignes de gris identique, dont aucune n'était cliquable : sur mobile, impossible d'appeler la concession depuis le pied de page. Chaque ligne est désormais une action (itinéraire, appel, email) et porte un picto qui la rend identifiable sans lire. */ .fgrid .fitem { display: flex; gap: 10px; align-items: flex-start; color: #9a9aa4; font-size: 14px; margin-bottom: 12px; line-height: 1.5; } .fgrid .fitem svg { flex: 0 0 auto; margin-top: 2px; opacity: .5; transition: opacity .2s; } .fgrid a.fitem:hover { color: var(--red2); } .fgrid a.fitem:hover svg { opacity: 1; } .fgrid a.fitem:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } /* Le téléphone est l'action principale d'une concession : il porte la typo condensée des titres et passe en blanc, pour se détacher des autres lignes. */ .fgrid .ftel { color: #fff; font-family: var(--cond); font-size: 20px; letter-spacing: .02em; } .fgrid .ftel svg { margin-top: 4px; opacity: .7; } /* Horaires : la colonne des jours reste lisible sans tableau. */ .fgrid .fhours { font-size: 13px; color: #86868f; margin-top: 16px; } .fgrid .fhours b { color: #9a9aa4; font-weight: 500; } /* Le picto Facebook vit dans la colonne de marque, sous la signature : un lien social relève de l'identité, pas des coordonnées. Il y trouve aussi l'espace que la colonne « Nous trouver » ne lui offrait plus. */ .fgrid a.fb { display: inline-flex; margin-top: 4px; } .fgrid a.fb svg { display: block; transition: transform .2s var(--anim-ease); } .fgrid a.fb:hover svg { transform: scale(1.12); } .fgrid a.fb:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } /* Zones tactiles au doigt. Rendre ces lignes cliquables ne suffit pas : à 14 px de texte, la cible de l'email ne faisait que 21 px de haut, moitié moins que les ~44 px nécessaires pour être atteinte sans effort au pouce. On rembourre donc verticalement sur petit écran seulement — une souris n'en a pas besoin. */ @media (max-width: 860px) { .fgrid a.fitem { padding: 12px 0; margin-bottom: 0; } .fgrid .fhours { margin-top: 10px; } }