/* =========================================================================== Animations d'entrée — version 10 =========================================================================== Un vocabulaire unique pour toutes les pages ajoutées en v10, déclaré en HTML par des attributs `data-anim` plutôt que par des sélecteurs CSS ciblant des classes de contenu. La raison est concrète : l'animation de l'accueil est écrite pour « .prestations .card » et casse dès qu'on touche à la structure. Ici, ajouter un bloc animé ne demande ni CSS ni JavaScript supplémentaire. data-anim="up|fade|left|right|scale|mask" sur l'élément data-anim-group sur un conteneur : ses enfants s'enchaînent data-anim-delay="120" décalage manuel, en ms Le mouvement est à SENS UNIQUE : un bloc entre, puis reste. L'accueil fait repartir ses cartes quand on continue de défiler ; c'est spectaculaire sur une page vitrine, pénible sur une page qu'on lit. Une page prestation ou un article se lisent — le texte ne doit pas bouger sous les yeux. Sans JavaScript, rien n'est masqué : la classe .anim-actif n'est posée sur que si le script tourne (voir anim-v10.js). Le contenu reste donc visible en toutes circonstances. =========================================================================== */ .anim-actif [data-anim] { opacity: 0; will-change: opacity, transform; transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), clip-path 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--anim-delay, 0ms); } /* --- Les effets ---------------------------------------------------------- Volontairement variés : une page entière animée d'un seul mouvement finit par ne plus rien animer du tout — l'œil cesse de le voir au troisième bloc. L'idée est d'associer un effet à une NATURE de contenu, pas à une place dans la page : un titre se dévoile, une carte monte, une image s'ouvre, une liste arrive de côté. Le lecteur ne le formule pas, mais il le sent. ------------------------------------------------------------------------- */ .anim-actif [data-anim='up'] { transform: translateY(26px); } .anim-actif [data-anim='fade'] { transform: none; } .anim-actif [data-anim='left'] { transform: translateX(-30px); } .anim-actif [data-anim='right'] { transform: translateX(30px); } .anim-actif [data-anim='scale'] { transform: scale(0.965); } .anim-actif [data-anim='mask'] { clip-path: inset(0 0 100% 0); opacity: 1; } /* Le voile : le contenu se précise au lieu d'arriver. Pour une image ou un visuel large, où un déplacement ferait bouger toute la mise en page. */ .anim-actif [data-anim='voile'] { filter: blur(9px); transform: scale(1.02); } /* La montée ample, avec une très légère bascule. Réservée aux blocs d'ouverture : trop marquée, elle fatiguerait sur une liste de dix cartes. */ .anim-actif [data-anim='envol'] { transform: translateY(46px) rotate(-0.6deg); } /* Le rideau : le bloc se découvre de la gauche vers la droite. Pour les bandeaux et les séparateurs, qui ont une largeur à raconter. */ .anim-actif [data-anim='rideau'] { clip-path: inset(0 100% 0 0); opacity: 1; } /* La sortie de page : le texte remonte de dessous sa propre ligne, comme un mot qu'on découvre. Pour les titres — le conteneur doit avoir overflow caché, ce que fait .anim-ligne ci-dessous. */ .anim-actif [data-anim='ligne'] { transform: translateY(105%); opacity: 1; } .anim-ligne { overflow: hidden; display: block; } /* Le rebond contenu : arrive légèrement trop petit et se pose. Pour les pastilles, les compteurs, les éléments isolés qu'on veut faire remarquer. */ .anim-actif [data-anim='pose'] { transform: scale(0.8); } .anim-actif [data-anim='pose'].est-visible { animation: animPose 0.62s cubic-bezier(0.34, 1.42, 0.64, 1) var(--anim-delay, 0ms) both; } @keyframes animPose { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* Le basculement : le bloc pivote sur son bord haut. Pour les encadrés et les notes, qui se posent sur le texte plutôt qu'ils n'en font partie. */ .anim-actif [data-anim='bascule'] { transform: perspective(900px) rotateX(-9deg); transform-origin: top center; } .anim-actif [data-anim].est-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: none; } /* L'élément a fini d'entrer : on relâche will-change, qui coûte une couche de composition à conserver indéfiniment sur une page longue. */ .anim-actif [data-anim].anim-finie { will-change: auto; } /* --- Traînée de couleur sous les cartes ---------------------------------- */ /* Reprend l'idée des cartes de l'accueil : un liseré qui se remplit à l'arrivée. La couleur vient de --accent, déjà posée par les gabarits. */ .anim-actif [data-anim-trait] { position: relative; overflow: hidden; } .anim-actif [data-anim-trait]::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent, var(--ocre)); transform: scaleX(0); transform-origin: left; transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--anim-delay, 0ms) + 160ms); } .anim-actif [data-anim-trait].est-visible::after { transform: scaleX(1); } /* --- Compteurs ----------------------------------------------------------- */ .anim-actif [data-compteur] { font-variant-numeric: tabular-nums; } /* --- Survols : un geste par nature de bloc ------------------------------- Là encore, éviter le « tout monte de trois pixels ». Une carte de contenu se soulève, une carte-outil s'éclaire par la gauche, une vignette d'image se rapproche, un lien de liste avance. Quatre gestes distincts pour quatre intentions distinctes. ------------------------------------------------------------------------- */ /* 1. Carte de contenu : elle se soulève et prend la couleur de sa rubrique. */ .ps-carte { transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease; } .ps-carte:hover, .ps-carte:focus-within { transform: translateY(-4px); border-color: var(--accent, var(--ocre)); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32); } /* 2. Carte-outil : un halo entre par la gauche au lieu d'un déplacement. Ces cartes sont grandes ; les faire bouger déplacerait tout le bloc. */ .outil-v10 { transition: border-color 0.28s ease, background 0.28s ease; } .outil-v10::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(232, 162, 61, 0.14), transparent 55%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .outil-v10:hover::before, .outil-v10:focus-visible::before { opacity: 1; } .outil-v10:hover, .outil-v10:focus-visible { border-color: var(--ocre); transform: none; } .outil-v10-num { transition: opacity 0.35s ease, transform 0.35s ease; } .outil-v10:hover .outil-v10-num { opacity: 0.3; transform: translateY(-2px) scale(1.06); } /* 3. Produit et fiche : le liseré gauche s'épaissit, rien ne bouge. Ces blocs contiennent du texte qu'on est en train de lire. */ .fr-produits li { border-left: 2px solid transparent; transition: border-left-color 0.28s ease, border-color 0.28s ease, padding-left 0.28s ease; } .fr-produits li:hover { border-left-color: var(--ocre); padding-left: 1.4rem; } /* 4. Lien de liste : la pastille avance légèrement vers la droite, comme une invitation à suivre. */ .ps-liens-prestations a, .accueil-v10-liens a { transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.24s ease, border-color 0.24s ease; } .ps-liens-prestations a:hover, .ps-liens-prestations a:focus-visible, .accueil-v10-liens a:hover, .accueil-v10-liens a:focus-visible { transform: translateX(3px); } /* 5. Filtres de galerie : le compteur se détache au survol. */ .rl-filtre .rl-compte, .ins-filtre .ins-compte { transition: opacity 0.22s ease; } .rl-filtre:hover .rl-compte, .ins-filtre:hover .ins-compte { opacity: 1; } /* Les étapes : le numéro grossit légèrement quand la ligne est survolée, sans déplacer le texte — un décalage rendrait la lecture désagréable. */ .ps-liste-etapes li .ps-etape-num { transition: transform 0.3s ease, color 0.3s ease; } .ps-liste-etapes li:hover .ps-etape-num { transform: scale(1.14); } /* La FAQ : le contenu se déplie au lieu d'apparaître d'un coup. */ .ps-faq-item[open] .ps-faq-reponse { animation: psDeplier 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes psDeplier { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* --- Respect du réglage système ------------------------------------------ */ /* Tout est neutralisé, y compris l'état initial : sans cette règle, un utilisateur ayant demandé moins d'animations verrait une page vide si le script ne s'exécutait pas. */ @media (prefers-reduced-motion: reduce) { .anim-actif [data-anim], .anim-actif [data-anim].est-visible { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; animation: none !important; } .anim-ligne { overflow: visible; } .anim-actif [data-anim-trait]::after { transform: scaleX(1); transition: none; } .ps-carte, .outil-v10, .outil-v10::before, .outil-v10-num, .fr-produits li, .ps-liens-prestations a, .accueil-v10-liens a, .ps-liste-etapes li .ps-etape-num { transition: none; } .ps-carte:hover, .outil-v10:hover { transform: none; box-shadow: none; } .ps-liens-prestations a:hover, .accueil-v10-liens a:hover { transform: none; } .fr-produits li:hover { padding-left: 1.1rem; } .ps-faq-item[open] .ps-faq-reponse { animation: none; } }