/* Un effet = une classe fx-* sur . Version A = fx-pages fx-menu fx-zoom fx-btn Version B = A + fx-reveal fx-header fx-faq fx-selection Version C = B + fx-entree fx-compteur fx-legendes Mode à la carte : classes posées depuis localStorage (rho-fx). Règle commune : lent (400-700 ms), petit (<= 16 px), une seule courbe. */ /* fx-menu — soulignement animé du menu */ .fx-menu .site-nav a:not([aria-current="page"])::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); } .fx-menu .site-nav a:not([aria-current="page"]):hover::after, .fx-menu .site-nav a:not([aria-current="page"]):focus-visible::after { transform: scaleX(1); } /* fx-zoom — zoom lent des photos au survol */ .fx-zoom .card-img img, .fx-zoom .slide img, .fx-zoom .fiche-img img, .fx-zoom .apropos-img img, .fx-zoom .ev-img img { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .fx-zoom .card:hover .card-img img, .fx-zoom .slide:hover img, .fx-zoom .fiche-img:hover img, .fx-zoom .apropos-img:hover img, .fx-zoom .ev-img:hover img { transform: scale(1.04); } .fx-zoom .apropos-img, .fx-zoom .ev-img { overflow: hidden; } /* fx-btn — boutons vivants */ .fx-btn .btn { transition: background-color 0.2s ease, transform 0.2s ease; } .fx-btn .btn:hover { background: #1d1d1d; transform: translateY(-1px); } .fx-btn .caro-btn { transition: background-color 0.2s ease; } .fx-btn .caro-btn:hover { background: #fff; } /* fx-selection — texte surligné inversé */ .fx-selection ::selection { background: var(--noir); color: var(--blanc); } /* fx-header — fondu échelonné du haut de site au chargement */ @keyframes fadeIn { to { opacity: 1; } } .js .fx-header .annonce, .js .fx-header .site-head .wordmark, .js .fx-header .site-nav a { opacity: 0; animation: fadeIn 0.9s ease forwards; } .js .fx-header .site-nav a:nth-child(1) { animation-delay: 0.05s; } .js .fx-header .site-nav a:nth-child(2) { animation-delay: 0.10s; } .js .fx-header .site-nav a:nth-child(3) { animation-delay: 0.15s; } .js .fx-header .site-nav a:nth-child(4) { animation-delay: 0.20s; } .js .fx-header .site-nav a:nth-child(5) { animation-delay: 0.25s; } /* fx-reveal — apparitions douces au défilement (contenu visible sans JS) */ .js .fx-reveal [data-rev] { opacity: 0; translate: 0 12px; transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .js .fx-reveal [data-rev].rev-in { opacity: 1; translate: 0 0; } /* fx-faq — FAQ animée */ .fx-faq .faq-panel { transition: grid-template-rows 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .fx-faq .mark { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .fx-faq .faq-q[aria-expanded="true"] .mark { transform: rotate(45deg); } /* fx-entree — entrée d'accueil orchestrée */ @keyframes entUp { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } } .js .fx-entree.home .ent { opacity: 0; animation: entUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; animation-delay: var(--d, 0s); } /* fx-compteur — compteur de photos des carrousels */ .fx-compteur .counter { display: block; } /* fx-legendes — lieu des photos d'archives */ .fx-legendes .cap { display: block; opacity: 0; transition: opacity 0.4s ease; } .fx-legendes .slide:hover .cap, .fx-legendes .slide:focus-within .cap { opacity: 1; } @media (hover: none) { .fx-legendes .cap { opacity: 1; } } /* Motion réduite : tout s'éteint */ @media (prefers-reduced-motion: reduce) { [class*="fx-"] *, .caro-track { transition: none !important; animation: none !important; } .js .fx-reveal [data-rev], .js .fx-header .annonce, .js .fx-header .site-head .wordmark, .js .fx-header .site-nav a, .js .fx-entree.home .ent { opacity: 1; translate: 0 0; } }