/* ==========================================================================
   RexelGPT Portal — effets visuels (3D, aurora, inclinaison, apparitions)
   Chargé après ui.css. Tout est neutralisé si l'appareil demande moins
   d'animations (prefers-reduced-motion).
   ========================================================================== */

/* ---------- Fond « aurora » animé ---------- */
.fx-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.fx-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform;}
.fx-aurora i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-16vw;background:radial-gradient(circle,#3b82f6 0%,transparent 65%);animation:fxDrift1 26s ease-in-out infinite alternate;}
.fx-aurora i:nth-child(2){width:40vw;height:40vw;right:-14vw;top:10vh;background:radial-gradient(circle,#06b6d4 0%,transparent 65%);animation:fxDrift2 32s ease-in-out infinite alternate;opacity:.35;}
.fx-aurora i:nth-child(3){width:50vw;height:50vw;left:25vw;bottom:-30vw;background:radial-gradient(circle,#8b5cf6 0%,transparent 65%);animation:fxDrift3 38s ease-in-out infinite alternate;opacity:.28;}
body:not(.dark) .fx-aurora i{opacity:.22;}
body:not(.dark) .fx-aurora i:nth-child(3){opacity:.14;}
@keyframes fxDrift1{to{transform:translate(18vw,14vh) scale(1.15);}}
@keyframes fxDrift2{to{transform:translate(-16vw,24vh) scale(.9);}}
@keyframes fxDrift3{to{transform:translate(-14vw,-18vh) scale(1.1);}}
/* fine grille en perspective, visible en mode sombre */
.fx-grid{position:fixed;inset:auto 0 0 0;height:45vh;z-index:0;pointer-events:none;opacity:0;
  background-image:linear-gradient(rgba(120,170,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.16) 1px,transparent 1px);
  background-size:56px 56px;transform:perspective(600px) rotateX(62deg);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%);mask-image:linear-gradient(to top,#000 10%,transparent 90%);
  animation:fxGrid 6s linear infinite;}
body.dark .fx-grid{opacity:1;}
@keyframes fxGrid{to{background-position:0 56px,0 0;}}
.app,.adm-login,.cl-page{position:relative;z-index:1;}
.main{background:transparent;}
body{background:var(--bg) !important;}

/* surfaces légèrement translucides pour laisser vivre le fond */
.card,.card-full,.panel,.tile,.tool,.ns-card,.req,.de-section,.db-section,.adm-login-card,.wrap{
  background:color-mix(in srgb,var(--surface) 86%,transparent) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);}
.sb{background:linear-gradient(180deg,#0a1f44 0%,#071733 100%) !important;}
body.dark .sb{background:linear-gradient(180deg,#081428 0%,#050c19 100%) !important;}

/* ---------- Scènes 3D ---------- */
.fx3d{position:absolute;inset:0;pointer-events:none;}
.fx3d canvas{display:block;width:100% !important;height:100% !important;}
.fx3d-page{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* Accueil : bandeau avec cœur d'énergie 3D */
.home-hero{min-height:240px;isolation:isolate;
  background:radial-gradient(800px 340px at 82% 50%,rgba(56,140,255,.55),transparent 60%),linear-gradient(120deg,#001a3d 0%,#003B7A 48%,#0a62c9 100%) !important;}
.home-hero{flex-direction:column;align-items:flex-start !important;justify-content:center !important;gap:18px !important;padding:34px 34px !important;}
.home-hero>div:not(.fx3d){max-width:min(60%,640px);}
.home-hero .fx3d{left:auto;width:min(46%,560px);z-index:0;}
@media (max-width:720px){ .home-hero>div:not(.fx3d){max-width:none;} .home-hero{padding:24px 20px !important;} }
.home-hero>div:not(.fx3d){z-index:2;}
.home-hero h2{font-size:clamp(26px,3.2vw,38px) !important;letter-spacing:-.03em;
  background:linear-gradient(90deg,#fff 0%,#cfe3ff 50%,#fff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent !important;
  animation:fxShine 6s linear infinite;}
@keyframes fxShine{to{background-position:200% center;}}
@media (max-width:720px){ .home-hero .fx3d{width:100%;opacity:.45;} }

/* ---------- Chiffres clés ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.kpi{position:relative;overflow:hidden;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--sh-sm);}
.kpi small{display:block;font-size:12px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;}
.kpi b{display:block;font:800 30px/1.1 var(--font-head);color:var(--ink);margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kpi b.mono{font:700 18px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;}
.kpi::after{content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,var(--kc,#3b82f6),transparent 70%);opacity:.25;}
@media (max-width:720px){ .kpis{grid-template-columns:1fr 1fr;} .kpi:last-child{grid-column:1/-1;} .kpi b{font-size:24px;} }

/* ---------- Cartes en 3D (inclinaison + reflet) ---------- */
[data-tilt]{transform-style:preserve-3d;will-change:transform;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .25s !important;}
[data-tilt].fx-tilting{transition:transform .06s linear,box-shadow .35s,border-color .25s !important;}
[data-tilt]::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:2;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 45%);}
body.dark [data-tilt]::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(120,170,255,.18),transparent 45%);}
[data-tilt]:hover::before{opacity:1;}
.tile,.tool,.kpi{position:relative;}
.tile:hover{box-shadow:0 24px 50px -18px color-mix(in srgb,var(--tc) 55%,transparent),var(--sh) !important;}
.tile .tile-ic{transform:translateZ(40px);transition:transform .35s;}
.tile b,.tile span{transform:translateZ(22px);}

/* bordure dégradée animée au survol des tuiles */
.tile::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:conic-gradient(from var(--fx-a,0deg),var(--tc),transparent 30%,transparent 70%,var(--tc));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxSpin 4s linear infinite;}
.tile:hover::after{opacity:1;}
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes fxSpin{to{--fx-a:360deg;}}

/* ---------- Apparitions ---------- */
.fx-reveal{opacity:0;transform:translateY(18px) scale(.985);}
.fx-reveal.fx-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--fx-d,0ms);}

/* ---------- Boutons ---------- */
.btn,.ui-btn-primary,.ui-btn-ok,.ui-btn-light,.an-apply,#btn-envoyer{position:relative;overflow:hidden;isolation:isolate;}
.btn::before,.ui-btn-primary::before,.ui-btn-light::before,#btn-envoyer::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s;}
.btn:hover::before,.ui-btn-primary:hover::before,.ui-btn-light:hover::before,#btn-envoyer:hover::before{transform:translateX(120%);}
#btn-envoyer,.ui-btn-light{background-size:200% auto !important;}
#btn-envoyer{background:linear-gradient(110deg,#0057B8,#2f7bff,#00a6ff,#0057B8) !important;background-size:300% auto !important;animation:fxFlow 8s linear infinite;
  box-shadow:0 10px 30px -8px rgba(0,110,255,.6) !important;}
@keyframes fxFlow{to{background-position:300% center;}}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:fxRipple .6s ease-out forwards;}
@keyframes fxRipple{to{transform:scale(1);opacity:0;}}

/* ---------- Barre latérale : indicateur qui glisse ---------- */
.sb-nav{position:relative;}
.fx-pill{position:absolute;left:0;right:0;border-radius:9px;background:linear-gradient(90deg,rgba(77,155,255,.28),rgba(77,155,255,.08));
  box-shadow:inset 0 0 0 1px rgba(120,180,255,.25),0 6px 20px -8px rgba(60,140,255,.6);transition:top .35s cubic-bezier(.2,.8,.2,1),height .35s;pointer-events:none;z-index:0;}
.fx-pill::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#4d9bff;box-shadow:0 0 12px #4d9bff;}
.sb-nav .sb-link{z-index:1;}
.sb-nav.fx-has-pill .sb-link.active{background:transparent;}
.sb-nav.fx-has-pill .sb-link.active::before{display:none;}
.sb-logo{animation:fxFloat 5s ease-in-out infinite;}
@keyframes fxFloat{50%{transform:translateY(-3px) rotate(-3deg);box-shadow:0 12px 24px rgba(0,87,184,.55);}}

/* ---------- Confettis ---------- */
.fx-confetti{position:fixed;inset:0;z-index:10050;pointer-events:none;}

/* ---------- Connexion : carte de verre au-dessus du champ 3D ---------- */
.fx-login body,body.fx-login{background:radial-gradient(1200px 700px at 70% 0%,#0b3a80 0%,#061a3a 45%,#030b1c 100%) !important;}
body.fx-login::before,body.fx-login::after{display:none !important;}
body.fx-login .login-card{background:rgba(255,255,255,.9) !important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 40px 120px -20px rgba(0,30,80,.8),0 0 0 1px rgba(255,255,255,.4) inset !important;}

/* Admin : écran de connexion sur fond sombre animé */
.fx-dark-login{background:radial-gradient(1200px 700px at 70% 0%,#0b3a80 0%,#061a3a 45%,#030b1c 100%) !important;}
.fx-dark-login .adm-login-card{position:relative;z-index:1;background:rgba(255,255,255,.9) !important;color:#0f1b2d;
  box-shadow:0 40px 120px -20px rgba(0,30,80,.8) !important;}
body.dark .fx-dark-login .adm-login-card{background:rgba(17,26,46,.82) !important;color:var(--ink);}
.fx-dark-login .adm-back{color:#5b6b84;}
/* Téléphone : flou de verre coupé (fluidité) */
@media (max-width:720px){
  .card,.card-full,.panel,.tile,.tool,.ns-card,.req,.de-section,.db-section,.kpi{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface) !important;}
  .fx-aurora i{filter:blur(50px);}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-aurora i,.fx-grid,.home-hero h2,#btn-envoyer,.sb-logo,.tile::after{animation:none !important;}
  .fx-reveal{opacity:1;transform:none;}
  [data-tilt]{transform:none !important;}
}