/* ------------------------------------------------------------------
   SHEMS — couche d'animation et d'interaction (tout le site)
   Même langage que la page Tarifs : halos bordeaux, reflets, lumière
   qui suit la souris, boutons aimantés, textes qui montent.
   Désactivé si « réduire les animations ». Ne touche pas au showroom 3D.
   ------------------------------------------------------------------ */

/* ---------- Barre de progression de lecture ---------- */
.mo-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--brass), #CC8EA0); opacity: .9; }

/* ---------- Logo : le carré bordeaux s'anime ---------- */
.logo i { transition: transform .6s var(--ease), border-radius .6s var(--ease); }
.logo:hover i { transform: rotate(135deg) scale(1.15); border-radius: 50%; }
.site-header .logo i { animation: mo-blink 6s ease-in-out 1.2s infinite; }
@keyframes mo-blink { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(90deg) scale(1.25); } 94% { transform: rotate(180deg) scale(1); } }
.site-header .logo:hover i { animation: none; }

/* ---------- Bandeaux bordeaux : halos qui dérivent ---------- */
.band { position: relative; overflow: hidden; isolation: isolate; }
.band::before, .band::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.band::before { width: 560px; height: 560px; right: -160px; top: -200px; background: radial-gradient(circle, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 65%); animation: mo-drift 15s ease-in-out infinite alternate; }
.band::after { width: 420px; height: 420px; left: 18%; bottom: -260px; background: radial-gradient(circle, rgba(204, 142, 160, .32), rgba(204, 142, 160, 0) 65%); animation: mo-drift 19s ease-in-out -7s infinite alternate-reverse; }
@keyframes mo-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-70px, 40px, 0) scale(1.15); } }

/* ---------- Lumière qui suit la souris (cartes, étapes, lignes) ---------- */
.mo-glow { position: relative; }
.mo-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brass) 13%, transparent), transparent 70%); }
.band .mo-glow::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .12), transparent 70%); }
.mo-glow:hover::after { opacity: 1; }
.rev-row { transition: background-color .3s, transform .4s var(--ease); }
.rev-row:hover { transform: translateX(6px); }
.rev-row .rev-n { display: inline-block; transition: transform .4s var(--ease); }
.rev-row:hover .rev-n { transform: scale(1.25); }
.qa > div h3, .rev-t { transition: color .25s; }
.qa > div:hover h3, .rev-row:hover .rev-t { color: var(--brass); }

/* ---------- Boutons : aimantés + reflet au survol ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-130%); }
.btn:hover::after { transition: transform .8s var(--ease); transform: translateX(130%); }
.btn.mo-mag:hover { transform: perspective(600px) translate3d(var(--bx, 0px), calc(var(--by, 0px) - 3px), 14px); }
.btn .arr { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

/* ---------- Grands textes : mots qui montent ---------- */
.mo-words .mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.mo-words .mo-w > span { display: inline-block; }
.mo-words.mo-armed .mo-w > span { transform: translateY(105%); }
.mo-words.mo-go .mo-w > span { transform: none; transition: transform .95s var(--ease); transition-delay: calc(var(--i) * 70ms); }

/* ---------- Liens du pied de page : soulignement qui glisse ---------- */
.site-footer nav a { position: relative; width: fit-content; }
.site-footer nav a:hover { text-decoration: none; }
.site-footer nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--brass); transition: right .35s var(--ease); }
.site-footer nav a:hover::after { right: 0; }

/* ---------- Champs de formulaire : halo au focus ---------- */
.field input, .field textarea, .field select { transition: border-color .25s, box-shadow .35s var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 4px var(--brass-soft); }

/* ---------- Écrans tactiles ---------- */
@media (hover: none), (pointer: coarse) {
  .rev-row:hover { transform: none; }
  .btn.mo-mag:hover { transform: none; }
}

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .band::before, .band::after, .site-header .logo i { animation: none !important; }
  .logo:hover i { transform: none; border-radius: 2px; }
  .btn::after { display: none; }
  .rev-row:hover, .btn:hover .arr, .rev-row:hover .rev-n { transform: none; }
  .mo-words.mo-armed .mo-w > span { transform: none; }
  .mo-progress { display: none; }
}

/* ---------- Accueil : mention création de site ---------- */
.hero-site { margin-top: 18px; font-size: var(--fs-sm); color: var(--mineral); }
.hero-site a { color: var(--brass); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.hero-site a:hover { background-size: 100% 1px; }