/*
 * Animations du site Mairesia, version allégée (2026-09-28 : « des animations qui font moins laguer »).
 * Uniquement opacity et transform (gérés par la carte graphique), jouées une seule fois :
 * ni flou, ni clip-path animé, ni décor en mouvement permanent, ni barre de progression.
 *   1. arrivée de la bannière au chargement ;
 *   2. apparition des blocs au défilement (montée courte, cascade dans les grilles) ;
 *   3. survols des cartes et des boutons, onde autour du bouton de la bannière.
 * Tout état masqué dépend de .js-anim : sans script ou avec « réduire les animations », la page est nue et lisible.
 */

:root { --mp-doux: cubic-bezier(.22, 1, .36, 1); }

/* ---------- 1. Arrivée de la bannière ---------- */
@keyframes mpEntre { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mpArche { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.js-anim .mpd-accueil-hero .mpd-oeil,
.js-anim .mpd-accueil-hero .mpd-p,
.js-anim .mpd-accueil-hero .mpd-actions,
.js-anim .mpd-accueil-hero .mp-hero2-atouts,
.js-anim .mpd-accueil-hero .mp-hero2-depuis,
.js-anim .mpd-accueil-hero .mp-hero2-note { animation: mpEntre .7s var(--mp-doux) both; }
.js-anim .mpd-accueil-hero .mpd-oeil { animation-delay: .05s; }
.js-anim .mpd-accueil-hero .mpd-p { animation-delay: .2s; }
.js-anim .mpd-accueil-hero .mpd-actions { animation-delay: .32s; }
.js-anim .mpd-accueil-hero .mp-hero2-atouts { animation-delay: .44s; }
.js-anim .mpd-accueil-hero .mp-hero2-depuis { animation-delay: .7s; }
.js-anim .mpd-accueil-hero .mp-hero2-note { animation-delay: .8s; }
.js-anim .mp-hero2 .mp-arche-grande { animation: mpArche .9s var(--mp-doux) .1s both; }
.js-anim .mp-hero2 .mp-arche-petite { animation: mpArche .9s var(--mp-doux) .35s both; }

/* onde discrète autour du bouton de la bannière (petit élément, peu coûteux) */
@keyframes mpOnde { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.15, 1.4); opacity: 0; } }
.mpd-accueil-hero .mpd-cta { position: relative; }
.js-anim .mpd-accueil-hero .mpd-cta::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid #C1705A; animation: mpOnde 3s 1.4s ease-out infinite; pointer-events: none; }

/* ---------- 2. Apparitions au défilement ---------- */
.js-anim .mp-rev, .js-anim .mp-rev-suite > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .7s var(--mp-doux); }
.js-anim .mp-rev.est-vu, .js-anim .mp-rev-suite.est-vu > * { opacity: 1; transform: none; }
.js-anim .mp-rev-gauche { opacity: 0; transform: translateX(-28px); transition: opacity .6s ease, transform .7s var(--mp-doux); }
.js-anim .mp-rev-gauche.est-vu { opacity: 1; transform: none; }

.js-anim .mp-rev-suite.est-vu > :nth-child(2) { transition-delay: .06s; }
.js-anim .mp-rev-suite.est-vu > :nth-child(3) { transition-delay: .12s; }
.js-anim .mp-rev-suite.est-vu > :nth-child(4) { transition-delay: .18s; }
.js-anim .mp-rev-suite.est-vu > :nth-child(5) { transition-delay: .24s; }
.js-anim .mp-rev-suite.est-vu > :nth-child(n+6) { transition-delay: .3s; }
/* une fois arrivés, les éléments retrouvent des survols sans délai */
.js-anim .mp-rev-suite.est-vu.mp-fini > :nth-child(n) { transition: transform .3s ease, border-color .3s ease, background-color .3s ease; transition-delay: 0s; }

/* ---------- 3. Survols ---------- */
.wp-element-button, .mpd-cta, .mpd-cta2, .mp-tarif-resa, .tarifs-resa, .mrs-btn-submit { transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
.wp-element-button:hover, .mpd-cta:hover, .mpd-cta2:hover, .mp-tarif-resa:hover, .tarifs-resa:hover { transform: translateY(-2px); }

.mp-tarif, .mp-etape, .temoignage-card, .mrs-contact-box { transition: transform .3s ease, border-color .3s ease, background-color .3s ease; }
.mp-tarif:hover { transform: translateY(-3px); border-color: #E3C7B8; }
.mp-etape:hover { border-color: #E3C7B8; }
.temoignage-card:hover { transform: translateY(-4px); border-color: #E3C7B8; }
.mrs-contact-box:hover { transform: translateY(-2px); }
.mp-etape-num, .mp-bf-num { transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.mp-etape:hover .mp-etape-num, .mp-bienfaits-liste li:hover .mp-bf-num { transform: rotate(-10deg) scale(1.08); background: #C1705A; color: #FFFFFF; }

.service-card-cover .wp-block-cover:hover, .equipe-card:hover { box-shadow: none !important; }
.service-card-cover .wp-block-cover__image-background { transition: transform .8s var(--mp-doux) !important; }
.service-card-cover .wp-block-cover:hover .wp-block-cover__image-background { transform: scale(1.04); }
.service-card-cover .wp-block-cover__inner-container p:last-child a { display: inline-block; transition: transform .25s ease; }
.service-card-cover .wp-block-cover:hover .wp-block-cover__inner-container p:last-child a { transform: translateX(5px); }