/* ÉtudZen — animations du site
   Toutes les règles dépendent de la classe html.motion, posée dans le <head>
   uniquement si le visiteur n'a pas demandé de réduire les animations. */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Transitions entre les pages (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ez-page-out .35s ease both; }
::view-transition-new(root) { animation: ez-page-in .55s var(--ease) both; }
@keyframes ez-page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes ez-page-in { from { opacity: 0; transform: translateY(14px); } }

html.motion { scroll-behavior: smooth; }
html.motion .reveal.in { animation: none; }

/* Barre de progression de lecture */
.m-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; background: var(--grad-logo); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Apparitions au défilement */
html.motion [data-m] { opacity: 0; transition: opacity .9s var(--ease), transform 1s var(--ease), clip-path 1.2s var(--ease); transition-delay: var(--d, 0ms); }
html.motion [data-m="up"] { transform: translateY(36px); }
html.motion [data-m="left"] { transform: translateX(-44px); }
html.motion [data-m="right"] { transform: translateX(44px); }
html.motion [data-m="zoom"] { transform: scale(.9) translateY(20px); }
html.motion [data-m="mask"] { opacity: 1; clip-path: inset(100% 0 0 0); }
html.motion [data-m].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* Photos : dévoilement + léger zoom arrière, puis parallaxe */
html.motion .photo img { scale: 1.08; transition: scale 1.6s var(--ease); will-change: translate; }
html.motion [data-m="mask"] img { scale: 1.32; }
html.motion [data-m="mask"].is-in img { scale: 1.08; }
html.motion .gallery [data-m="mask"].is-in img { scale: 1; }

/* Titres : soulignement animé des mots mis en valeur */
html.motion h2 .accent { background: linear-gradient(90deg, var(--sky-400), var(--teal-400)) no-repeat 0 100% / 0 .1em; padding-bottom: .04em; transition: background-size 1.1s var(--ease) .45s; }
html.motion .seen h2 .accent, html.motion h2.seen .accent { background-size: 100% .1em; }
html.motion .eyebrow::before { transition: width .9s var(--ease) .2s; }
html.motion [data-m] .eyebrow::before, html.motion .eyebrow[data-m]::before { width: 0; }
html.motion .seen .eyebrow::before, html.motion .eyebrow.seen::before { width: 34px; }

/* Icônes qui se dessinent */
@keyframes ez-draw { from { stroke-dasharray: 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100; stroke-dashoffset: 0; } }
html.motion .seen .badge .ico, html.motion .feature.seen > .ico { animation: ez-draw 1.6s var(--ease) both; animation-delay: calc(var(--d, 0ms) + .25s); }

/* Étapes : pastilles qui rebondissent et pointillés qui se tracent */
@keyframes ez-pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
html.motion .step.seen .badge { animation: ez-pop .8s var(--ease-spring) both; animation-delay: var(--d, 0ms); }
html.motion .step.seen .num { animation: ez-pop .7s var(--ease-spring) both; animation-delay: calc(var(--d, 0ms) + .35s); }
html.motion .step:not(:last-child)::after { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); transition-delay: calc(var(--d, 0ms) + .4s); }
html.motion .step.seen::after { transform: none; }
html.motion .step .badge { transition: transform .4s var(--ease-spring); }
html.motion .step:hover .badge { transform: translateY(-4px) scale(1.06); }

/* Chargement : en-tête et héros */
@keyframes ez-down { from { opacity: 0; transform: translateY(-16px); } }
@keyframes ez-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes ez-word { from { transform: translateY(110%) rotate(4deg); } }
@keyframes ez-shimmer { to { background-position: 300% 0; } }
@keyframes ez-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ez-kenburns { from { scale: 1.16; } to { scale: 1.04; } }
html.motion .nav > * { animation: ez-down .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
html.motion .site-header { transition: border-color .2s, box-shadow .2s, transform .45s var(--ease); }
html.motion .site-header.hide { transform: translateY(-100%); }
html.motion .hero-inner > *, html.motion .page-hero .wrap > * { animation: ez-up 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 130ms + 200ms); }
html.motion .hero-inner > h1, html.motion .page-hero .wrap > h1 { animation: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.wi { display: inline-block; }
html.motion .wi { animation: ez-word 1s var(--ease) both; animation-delay: calc(var(--wi, 0) * 55ms + 300ms); }
html.motion h1 .accent .wi { background: linear-gradient(90deg, var(--blue-600), var(--sky-400), var(--teal-400), var(--blue-600)) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ez-word 1s var(--ease) both, ez-shimmer 9s linear infinite; animation-delay: calc(var(--wi, 0) * 55ms + 300ms), 0s; }
html.motion .page-hero h1 .accent .wi { background-image: linear-gradient(90deg, var(--cyan-300), #fff, var(--teal-400), var(--cyan-300)); }
html.motion .hero-media, html.motion .page-hero-media { animation: ez-kenburns 2.6s var(--ease) both; will-change: translate; }
html.motion .hero-sig { animation: ez-write 1.8s cubic-bezier(.65, 0, .35, 1) 1.2s both; }
html.motion .hero-inner { will-change: opacity, translate; }
html.motion .service-row .service-card { transition-duration: .9s, 1s; }

/* Halos lumineux en arrière-plan */
@keyframes ez-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 30px) scale(1.15); } 100% { transform: translate(0, 0) scale(1); } }
html.motion .page-hero::before, html.motion .band::before, html.motion .hero::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; left: -160px; top: -200px; background: radial-gradient(circle, rgba(25, 211, 234, .28), transparent 65%); animation: ez-drift 14s ease-in-out infinite; pointer-events: none; }
html.motion .band::before { left: auto; right: -120px; top: -260px; background: radial-gradient(circle, rgba(32, 178, 233, .3), transparent 65%); animation-duration: 18s; animation-direction: reverse; }
html.motion .hero::before { background: radial-gradient(circle, rgba(32, 178, 233, .16), transparent 65%); }
html.motion .band-media { inset: -90px 55% -90px 0; will-change: translate; }

/* Vague des bandeaux de page qui se trace */
@keyframes ez-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.motion .wave-bottom path[stroke] { stroke-dasharray: 1; animation: ez-trace 2.2s var(--ease) .5s both; }

/* Navigation */
html.motion .nav-logo img { transition: transform .4s var(--ease-spring); }
html.motion .nav-logo:hover img { transform: scale(1.04); }
@media (min-width: 901px) {
  html.motion .nav-links a { position: relative; transition: color .25s; }
  html.motion .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--grad-logo); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
  html.motion .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
}
@keyframes ez-menu { from { opacity: 0; transform: translateY(-10px); } }
html.motion .nav-links.open { animation: ez-menu .35s var(--ease) both; }
html.motion .nav-links.open li { animation: ez-menu .45s var(--ease) both; }
html.motion .nav-links.open li:nth-child(2) { animation-delay: .04s; } html.motion .nav-links.open li:nth-child(3) { animation-delay: .08s; }
html.motion .nav-links.open li:nth-child(4) { animation-delay: .12s; } html.motion .nav-links.open li:nth-child(5) { animation-delay: .16s; }
html.motion .nav-links.open li:nth-child(6) { animation-delay: .2s; } html.motion .nav-links.open li:nth-child(7) { animation-delay: .24s; }
html.motion .nav-links.open li:nth-child(8) { animation-delay: .28s; }

/* Boutons : reflet, flèche qui avance */
html.motion .btn { transition: transform .3s var(--ease), background .2s, box-shadow .3s, color .2s; }
html.motion .btn-primary, html.motion .btn-cyan, html.motion .btn-whatsapp { position: relative; overflow: hidden; isolation: isolate; }
html.motion .btn-primary::after, html.motion .btn-cyan::after, html.motion .btn-whatsapp::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: translateX(-160%) skewX(-18deg); transition: transform .8s var(--ease); pointer-events: none; }
html.motion .btn-primary:hover::after, html.motion .btn-cyan:hover::after, html.motion .btn-whatsapp:hover::after { transform: translateX(260%) skewX(-18deg); }
html.motion .btn-primary:hover { box-shadow: 0 14px 30px rgba(11, 99, 193, .38); }
html.motion .btn .ico, html.motion .card-link .ico, html.motion .service-card .go .ico { transition: translate .35s var(--ease); }
html.motion .btn:hover .ico:last-child:not(:first-child), html.motion .card-link:hover .ico, html.motion .service-card:hover .go .ico { translate: 4px 0; }
html.motion .btn:active { transform: scale(.97); }

/* Cartes : inclinaison 3D et reflet qui suit la souris */
html.motion .service-card, html.motion .card, html.motion .post, html.motion .contact-card { position: relative; }
html.motion .tilt { transition: transform .5s var(--ease), box-shadow .4s; transform-style: preserve-3d; }
html.motion .tilt.tilting { transition: transform .12s linear, box-shadow .4s; box-shadow: 0 22px 50px rgba(12, 27, 76, .18); }
html.motion .tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 45%); }
html.motion .tilt.tilting::after { opacity: 1; }
html.motion .card .badge, html.motion .value .badge, html.motion .service-card .badge, html.motion .contact-card .badge { transition: transform .5s var(--ease-spring), background .3s, color .3s; }
html.motion .card:hover .badge, html.motion .service-card:hover .badge, html.motion .contact-card:hover .badge { transform: rotate(-8deg) scale(1.08); }
html.motion .dest img, html.motion .post img { transition: transform 1s var(--ease); }
html.motion .dest:hover img, html.motion .post:hover img { transform: scale(1.07); }
html.motion .flag { transition: transform .5s var(--ease-spring); }
html.motion .dest:hover .flag { transform: rotate(-6deg) scale(1.12); }
html.motion .feature > .ico { transition: transform .5s var(--ease-spring), color .3s; }
html.motion .feature:hover > .ico { transform: translateY(-5px) scale(1.1); color: var(--blue-600); }
html.motion .fact { transition: transform .4s var(--ease), background .3s; }
html.motion .fact:hover { transform: translateY(-3px); background: var(--ice-100); }

/* Galerie */
html.motion .gallery img { transition: transform 1.2s var(--ease); }
html.motion .gallery figure:hover img { transform: scale(1.07); }
html.motion .gallery figcaption { transition: padding .5s var(--ease); }
html.motion .gallery figure:hover figcaption { padding-bottom: 18px; }

/* FAQ et articles : ouverture fluide */
html.motion .faq details { transition: border-color .3s, box-shadow .3s; }
html.motion .faq details:hover { border-color: var(--sky-400); }
html.motion .faq details[open] { box-shadow: var(--shadow-card); border-color: transparent; }
html.motion .faq summary::after { transition: transform .45s var(--ease), background .3s, color .3s; }
html.motion .faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); background: var(--blue-600); color: #fff; }

/* Formulaire */
html.motion .field label { transition: color .25s; }
html.motion .field:focus-within label { color: var(--blue-600); }
html.motion .field input, html.motion .field select, html.motion .field textarea { transition: border-color .25s, box-shadow .25s; }
html.motion .field input:focus, html.motion .field select:focus, html.motion .field textarea:focus { box-shadow: 0 6px 18px rgba(11, 99, 193, .12); }
html.motion .slots span { transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease-spring); }
html.motion .slots label:hover span { border-color: var(--blue-600); }
html.motion .slots input:checked + span { transform: scale(1.05); }
@keyframes ez-ok { from { opacity: 0; transform: translateY(12px) scale(.98); } }
html.motion .form-ok.show { animation: ez-ok .6s var(--ease) both; }

/* Pied de page */
html.motion .socials a { transition: transform .4s var(--ease-spring), background .3s; }
html.motion .socials a:hover { transform: translateY(-4px); background: var(--blue-600); }
html.motion .site-footer ul a { transition: color .2s, padding .3s var(--ease); }
html.motion .site-footer ul a:hover { padding-left: 4px; }

/* Bouton WhatsApp flottant */
@keyframes ez-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(1.75); opacity: 0; } }
@keyframes ez-float-in { from { transform: scale(0) rotate(-90deg); } }
html.motion .wa-float { animation: ez-float-in .8s var(--ease-spring) 1.4s both; transition: transform .35s var(--ease); }
html.motion .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: ez-pulse 2.4s ease-out 2.4s infinite; }
html.motion .wa-float:hover { transform: scale(1.08); }

/* Retour en haut avec anneau de progression */
.m-top { position: fixed; right: 26px; bottom: 92px; z-index: 59; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; background: #fff; color: var(--navy-900); box-shadow: 0 8px 22px rgba(12, 27, 76, .18); cursor: pointer; display: grid; place-items: center; opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none; transition: opacity .4s, transform .5s var(--ease-spring); }
.m-top.show { opacity: 1; transform: none; pointer-events: auto; }
.m-top:hover { color: var(--blue-600); }
.m-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.m-top circle { fill: none; stroke-width: 3; }
.m-top .track { stroke: var(--ice-100); }
.m-top .bar { stroke: var(--blue-600); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-top .arrow { position: relative; width: 18px; height: 18px; transform: rotate(-90deg); }
@media (max-width: 600px) { .m-top { right: 26px; bottom: 88px; } }