/* Effets « interface du futur » (voir fx.js). Désactivés avec « Limiter les animations ». */
/* 1. Lumière qui suit la souris */
.fx-host{position:relative}
.fx-spot{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(100,150,255,.2),transparent 65%)}
.fx-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  padding:1.5px;background:radial-gradient(240px circle at var(--fx-x,50%) var(--fx-y,50%),#4f86ff,rgba(162,139,238,.8) 40%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx-lit>.fx-spot{opacity:1}

/* 2. Message selon l'heure (accueil, sous le bouton de démo) */
.fx-clock{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:3px;width:max-content;max-width:min(100%,360px);margin:20px 0 0;padding:12px 16px;border-radius:16px;
  background:rgba(255,255,255,.88);border:1px solid rgba(214,226,251,.95);box-shadow:0 16px 36px rgba(29,61,128,.12);backdrop-filter:blur(10px);
  font-size:13px;line-height:1.4;color:#3d5078}
.fx-clock[hidden]{display:grid;visibility:hidden}
.fx-clock-head{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2f63ec}
.fx-clock-head strong{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.fx-clock-dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:#3ccf8e}
.fx-clock-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3ccf8e;opacity:0}
.fx-clock-moment{font-weight:600;color:#26385f}
.fx-clock-strong{font-weight:800;color:#2457e6}
.fx-clock::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(120,160,255,.16) 48%,rgba(255,255,255,.7) 52%,transparent 70%);transform:translateX(-120%)}
@media(prefers-reduced-motion:no-preference){
  .fx-clock:not([hidden]){animation:fx-clock-in .7s cubic-bezier(.2,.8,.2,1) .5s both,fx-float 6s ease-in-out 1.2s infinite}
  .fx-clock:not([hidden])::before{animation:fx-sheen 5.5s ease-in-out 1.4s infinite}
  .fx-clock-dot::after{animation:fx-ping 1.8s cubic-bezier(0,0,.2,1) infinite}
  .fx-clock-dot{animation:fx-blink 1.8s ease-in-out infinite}
}
@keyframes fx-clock-in{from{opacity:0;transform:translateY(12px) scale(.96);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes fx-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes fx-sheen{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
@keyframes fx-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
@keyframes fx-blink{0%,100%{opacity:1}50%{opacity:.55}}
@media(max-width:900px){.fx-clock{margin-top:16px;padding:10px 13px;font-size:12px;border-radius:14px}.fx-clock-head{font-size:9.5px}}

/* 4. Titres qui se décodent */
.fx-word{display:inline-block;white-space:nowrap}
.fx-char{display:inline-block;text-align:center;overflow:hidden;vertical-align:bottom}
.fx-char.fx-live{color:#5b8cff;opacity:.85}

/* 5. Boutons magnétiques + contour lumineux tournant */
@property --fx-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.fx-magnet{position:relative;translate:var(--fx-mx,0) var(--fx-my,0);transition:translate .35s cubic-bezier(.2,.8,.2,1),transform .2s ease,box-shadow .2s}
.fx-magnet::after{content:"";position:absolute;inset:-4px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:conic-gradient(from var(--fx-angle),transparent 0 35%,#5b8cff 58%,#8fb2ff 72%,#a28bee 86%,transparent 100%);filter:drop-shadow(0 0 6px rgba(91,140,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx-magnet.fx-near::after{opacity:1;animation:fx-spin 2.4s linear infinite}
@keyframes fx-spin{to{--fx-angle:360deg}}

/* 7. Progression de lecture des guides */
.fx-progress{position:fixed;z-index:60;left:0;right:0;top:0;height:3px;transform:scaleX(0);transform-origin:left center;pointer-events:none;
  background:linear-gradient(90deg,#3478ff,#7aa5ff 60%,#a28bee);box-shadow:0 0 12px rgba(80,130,255,.6)}

/* 8. Relief 3D des tableaux de bord */
.fx-tilt{transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1)}

@media(prefers-reduced-motion:reduce){.fx-spot,.fx-magnet::after{display:none}.fx-magnet,.fx-tilt{translate:none!important;transform:none!important}.fx-clock,.fx-clock-dot,.fx-clock::before,.fx-clock-dot::after{animation:none!important}}
.motion-reduced .fx-spot,.motion-reduced .fx-magnet::after{display:none}
.motion-reduced .fx-magnet,.motion-reduced .fx-tilt{translate:none!important;transform:none!important}
.motion-reduced .fx-clock,.motion-reduced .fx-clock-dot,.motion-reduced .fx-clock::before,.motion-reduced .fx-clock-dot::after{animation:none!important}


/* Chiffres qui défilent */
.fx-count{display:inline-block;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Finitions aux couleurs de Votelia : sélection de texte et barre de défilement */
html{scrollbar-width:thin;scrollbar-color:#a9c0f5 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#b8cbf6;border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#7fa2ef;background-clip:content-box}

/* E-mail copié en un clic */
.fx-toast{position:fixed;z-index:80;left:50%;bottom:24px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:12px 14px 12px 16px;border-radius:16px;
  background:rgba(16,30,72,.94);color:#fff;font-size:14px;line-height:1.4;box-shadow:0 18px 40px rgba(9,20,52,.35);backdrop-filter:blur(8px);
  translate:-50% 20px;opacity:0;pointer-events:none;transition:opacity .25s ease,translate .3s cubic-bezier(.2,.8,.2,1)}
.fx-toast.is-on{opacity:1;translate:-50% 0;pointer-events:auto}
.fx-toast-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:linear-gradient(145deg,#3ccf8e,#1f9e68)}
.fx-toast-icon svg{width:16px;height:16px}
.fx-toast a{flex:none;padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.12);color:#cfe0ff;font-size:12.5px;font-weight:650;white-space:nowrap}
.fx-toast a:hover{background:rgba(255,255,255,.2);color:#fff}
@media(max-width:560px){.fx-toast{flex-wrap:wrap;justify-content:center;text-align:center}}
.motion-reduced .fx-toast{transition:none}

/* Cartes tarifs : pas de déplacement vers la souris, seul le contour lumineux s'allume à l'approche */
.plan-button.fx-magnet{translate:none!important}