/* ================================================================
   Mintly — identité visuelle et animations (chargé en dernier)
   Violet profond + touche menthe, verre dépoli, mouvements doux.
   ================================================================ */
:root{
  --mint:#5eead4; --mint-d:#14b8a6;
  --brand:linear-gradient(120deg,#c4b5fd 0%,#a78bfa 35%,#5eead4 100%);
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.2,1.35,.4,1);
}
:root[data-theme="nuit"]{--brand:linear-gradient(120deg,#99f6e4,#5eead4 50%,#a78bfa)}
:root[data-theme="clair"]{--mint:#0d9488;--brand:linear-gradient(120deg,#7c3aed,#0d9488)}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* halo menthe discret dans le fond */
body::before{background:
  radial-gradient(ellipse 60% 40% at 85% -5%,rgba(94,234,212,.10),transparent 60%),
  radial-gradient(ellipse 80% 50% at 50% -10%,var(--bg3),transparent 70%),
  linear-gradient(180deg,var(--bg) 0%,var(--bg2) 55%,var(--bg) 100%)}
:root[data-theme="clair"] body::before{background:radial-gradient(ellipse 60% 40% at 85% -5%,rgba(13,148,136,.10),transparent 60%),radial-gradient(ellipse 80% 50% at 50% -10%,var(--bg3),transparent 70%),var(--bg)}

/* barre de défilement */
*{scrollbar-width:thin;scrollbar-color:rgba(var(--glow),.35) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(var(--glow),.3);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--glow),.5)}

/* ---------- Logo Mintly ---------- */
.brand{letter-spacing:-.01em;text-transform:none;font-size:20px;gap:10px}
.brand i{width:30px;height:30px;border-radius:9px;transform:none;box-shadow:none;position:relative;background:none}
.brand i::before,.brand i::after{content:"";position:absolute;width:17px;height:24px;border-radius:5px;top:3px}
.brand i::before{left:2px;background:linear-gradient(160deg,#c4b5fd,#7c3aed);transform:rotate(-12deg);transition:transform .35s var(--spring)}
.brand i::after{left:11px;background:linear-gradient(160deg,#99f6e4,#14b8a6);transform:rotate(10deg);box-shadow:-3px 2px 8px rgba(0,0,0,.35);transition:transform .35s var(--spring)}
.brand:hover i::before{transform:rotate(-20deg) translateX(-2px)}.brand:hover i::after{transform:rotate(18deg) translateX(2px)}
.brand span{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

/* ---------- En-tête : indicateur glissant ---------- */
#nav{position:relative}
#nav .nav-ind{position:absolute;top:0;height:100%;border-radius:10px;background:rgba(var(--glow),.12);box-shadow:inset 0 0 0 1px rgba(var(--glow),.25);
  transition:transform .4s var(--ease),width .4s var(--ease),opacity .2s;pointer-events:none;z-index:0}
#nav a{position:relative;z-index:1}
#nav.has-ind a.on{background:none}
header.top{transition:box-shadow .3s,background .3s}
header.top.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---------- Boutons ---------- */
.btn{position:relative;overflow:hidden;transition:transform .18s var(--spring),box-shadow .2s,border-color .2s,background .2s,color .2s}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.97)}
.btn.primary{background:linear-gradient(135deg,#b9a3ff 0%,var(--accent) 45%,#7c3aed 100%);border-color:transparent;box-shadow:0 6px 20px rgba(var(--glow),.35)}
.btn.primary:hover:not(:disabled){box-shadow:0 10px 28px rgba(var(--glow),.5)}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn.primary:hover::after{transform:translateX(120%)}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:ripple .55s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ---------- Panneaux & tuiles ---------- */
.panel{transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.gcard{transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.gcard:hover{transform:translateY(-6px);border-color:rgba(var(--glow),.45);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 1px rgba(var(--glow),.2),0 0 40px rgba(var(--glow),.15)}
.gcard .cover{transition:transform .4s var(--ease)}
.gcard:hover .cover{transform:scale(1.04) rotate(-1deg)}
.pill.official{background:rgba(94,234,212,.1);color:var(--mint);border-color:rgba(94,234,212,.45)}
input,select,textarea{transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(var(--glow),.15)}
.eyebrow{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%}

/* ---------- Transitions de page ---------- */
#app.page-in>*{animation:pageIn .3s var(--ease) both}
#app.page-in>*:nth-child(2){animation-delay:.05s}#app.page-in>*:nth-child(3){animation-delay:.1s}
#app.page-in>*:nth-child(4){animation-delay:.15s}#app.page-in>*:nth-child(n+5){animation-delay:.2s}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}}
/* entrées en cascade (la variable --i est posée par motion.js) */
.stagger{animation:staggerIn .35s var(--ease) both;animation-delay:calc(min(var(--i,0),8) * 30ms)}
@keyframes staggerIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.seen{opacity:1;transform:none}

/* ---------- Cartes : inclinaison 3D au survol ---------- */
.tilt>.card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out;will-change:transform}
.tilt>.card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:20;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 45%);opacity:var(--glare,0);transition:opacity .2s}

/* ---------- Toasts & fenêtres ---------- */
.toast{animation:toastIn .45s var(--spring)!important;backdrop-filter:blur(10px)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,24px) scale(.9)}}
.modal{animation:modalIn .4s var(--spring)!important}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.94)}}
.modal-bg{animation:fade .25s ease!important}
.menu{animation:menuIn .18s var(--ease)!important;transform-origin:top left}
@keyframes menuIn{from{opacity:0;transform:scale(.95) translateY(-4px)}}

/* ---------- Pièces : petit rebond quand le solde change ---------- */
#coins.bump{animation:bump .5s var(--spring)}
@keyframes bump{40%{transform:scale(1.25);color:var(--mint)}}

/* ---------- Pied de page ---------- */
.site-footer span{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

@media (prefers-reduced-motion:reduce){
  #app.page-in>*,.stagger,.reveal,.tilt>.card{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
}