/* Copyright (C) 2026 Sébastien Benech - Alter Ego Conseil */

/*
 * Page de connexion animée Alter & Go (MYUI_LOGIN_ANIME).
 * À gauche un volet vert animé construit par js/login.js, à droite le formulaire
 * natif de Dolibarr restylé sur blanc. Tout est rangé sous body.myui-login :
 * si le script ne tourne pas, la page de connexion d'origine reste intacte.
 */

@font-face{font-family:"MyuiMontserrat";font-style:normal;font-weight:600 800;font-display:swap;
  src:url(../fonts/montserrat-latin.woff2) format("woff2")}

body.myui-login{
  --mu-vert:#237632; --mu-vert-fonce:#1a5a26; --mu-vert-nuit:#164d21; --mu-soleil:#fbb51b; --mu-blanc:#ffffff;
  --mu-encre:#17301f; --mu-gris:#5d6f62; --mu-trait:#d5e2d8; --mu-fond-champ:#f6faf7;
  --mu-display:"MyuiMontserrat", "Montserrat", system-ui, sans-serif;
  --mu-volet:53.5%;
  background:var(--mu-blanc) !important;background-image:none !important;color:var(--mu-encre);margin:0;
}

/* ---------------- volet marque ---------------- */
#myui-marque{display:none}
body.myui-login #myui-marque{display:flex;position:fixed;left:0;top:0;bottom:0;width:var(--mu-volet);z-index:1;
  background:var(--mu-vert);color:var(--mu-blanc);overflow:hidden;
  flex-direction:column;align-items:center;justify-content:flex-end;padding:40px 24px 76px;box-sizing:border-box}
#myui-marque .mu-decor{position:absolute;inset:0;pointer-events:none}

#myui-marque .mu-soleil{position:absolute;top:-70px;right:-70px;width:240px;height:240px}
#myui-marque .mu-rayons{transform-origin:120px 120px;animation:mu-tourne 30s linear infinite}
#myui-marque .mu-coeur{transform-origin:120px 120px;animation:mu-pulse 3s ease-in-out infinite}
@keyframes mu-tourne{to{transform:rotate(360deg)}}
@keyframes mu-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

#myui-marque .mu-nuage{position:absolute;left:0;height:22px;border-radius:99px;background:rgba(255,255,255,.13);animation:mu-derive linear infinite}
#myui-marque .mu-nuage::before,#myui-marque .mu-nuage::after{content:"";position:absolute;bottom:6px;border-radius:50%;background:inherit}
#myui-marque .mu-nuage::before{left:18%;width:38%;aspect-ratio:1}
#myui-marque .mu-nuage::after{left:46%;width:30%;aspect-ratio:1}
@keyframes mu-derive{from{transform:translateX(-160px)}to{transform:translateX(calc(60vw + 160px))}}

#myui-marque .mu-etoile{position:absolute;width:14px;height:14px;fill:var(--mu-soleil);opacity:0;animation:mu-scintille 3.2s ease-in-out infinite}
#myui-marque .mu-etoile.b{fill:var(--mu-blanc)}
@keyframes mu-scintille{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(45deg)}}

#myui-marque .mu-ic{position:absolute;width:44px;height:44px;fill:none;stroke:var(--mu-blanc);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  opacity:.22;transition:opacity .5s ease,stroke .5s ease;animation:mu-flotte 6s ease-in-out infinite}
@keyframes mu-flotte{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(5deg)}}
#myui-marque[data-metier="formation"] .mu-ic.formation,
#myui-marque[data-metier="insertion"] .mu-ic.insertion,
#myui-marque[data-metier="auto-ecole"] .mu-ic.auto-ecole{opacity:.85;stroke:var(--mu-soleil)}

#myui-marque .mu-route{position:absolute;left:0;right:0;bottom:0;height:72px;background:var(--mu-vert-nuit)}
#myui-marque .mu-route::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--mu-soleil);opacity:.85}
#myui-marque .mu-route::after{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 28px,transparent 28px 56px);animation:mu-defile 1.2s linear infinite}
#myui-marque.roule .mu-route::after{animation-duration:.35s}
@keyframes mu-defile{to{background-position:-56px 0}}
#myui-marque .mu-pied{position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;font-size:12px;color:rgba(255,255,255,.65);letter-spacing:.04em}

#myui-marque .mu-logo{container-type:inline-size;width:min(400px,78%,58vh);aspect-ratio:1;position:relative;cursor:pointer;z-index:2}
#myui-marque .mu-logo:focus-visible{outline:3px solid var(--mu-soleil);outline-offset:8px;border-radius:50%}
#myui-marque .mu-face{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
#myui-marque .mu-face.actif{opacity:1}
#myui-marque .mu-face svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#myui-marque .mu-txt{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:5cqw}
#myui-marque .mu-nom{font-family:var(--mu-display);font-weight:800;font-size:11.5cqw;line-height:1;white-space:nowrap}
#myui-marque .mu-dev{font-family:var(--mu-display);font-weight:600;font-size:3.6cqw;letter-spacing:.32em;text-transform:uppercase;margin-top:2.6cqw;padding-left:.32em}
#myui-marque .mu-anneau{fill:none;stroke-width:3.2}
#myui-marque .mu-filet{fill:none;stroke-width:1.2;stroke-dasharray:0 27 216 54 216 27}
#myui-marque .f-formation .mu-disque{fill:var(--mu-vert)} #myui-marque .f-formation .mu-anneau{stroke:var(--mu-soleil)}
#myui-marque .f-formation .mu-nom{color:var(--mu-blanc)} #myui-marque .f-formation .mu-dev{color:var(--mu-soleil)} #myui-marque .f-formation .mu-filet{display:none}
#myui-marque .f-insertion .mu-disque{fill:var(--mu-soleil)} #myui-marque .f-insertion .mu-anneau{stroke:var(--mu-vert)}
#myui-marque .f-insertion .mu-nom{color:var(--mu-blanc);text-shadow:0 1px 3px rgba(0,0,0,.18)} #myui-marque .f-insertion .mu-dev{color:var(--mu-vert)} #myui-marque .f-insertion .mu-filet{stroke:var(--mu-vert)}
#myui-marque .f-auto .mu-disque{fill:var(--mu-blanc)} #myui-marque .f-auto .mu-anneau{stroke:var(--mu-soleil)}
#myui-marque .f-auto .mu-nom{color:var(--mu-vert)} #myui-marque .f-auto .mu-dev{color:var(--mu-soleil)} #myui-marque .f-auto .mu-filet{stroke:var(--mu-vert)}
#myui-marque .mu-ombre{position:absolute;left:22%;right:22%;bottom:-3%;height:5%;border-radius:50%;background:rgba(0,0,0,.18);filter:blur(6px)}
#myui-marque .mu-trait,#myui-marque .mu-poussiere{position:absolute;pointer-events:none}
#myui-marque .mu-trait{height:3px;border-radius:3px;background:rgba(255,255,255,.7)}
#myui-marque .mu-poussiere{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.55)}

/* ---------------- volet accès : formulaire natif restylé ---------------- */
body.myui-login .login_center{margin-left:var(--mu-volet);min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--mu-blanc) !important;background-image:none !important;box-sizing:border-box;padding:48px 32px}
body.myui-login .login_vertical_align{width:min(420px,100%);padding:0;display:block}
body.myui-login .login_table_title,
body.myui-login #login_left,
body.myui-login #login_line1 > br,
body.myui-login #login_line2 > br{display:none}
body.myui-login .login_table{background:none !important;box-shadow:none !important;border:0 !important;padding:0 !important;
  margin:0 !important;width:100% !important;max-width:none !important;opacity:1 !important}
body.myui-login .mu-titre{text-align:left;margin:0 0 26px}
body.myui-login .mu-titre h1{font-family:var(--mu-display);font-weight:800;font-size:30px;letter-spacing:-.02em;margin:0 0 4px;color:var(--mu-encre)}
body.myui-login .mu-titre p{margin:0;font-size:15px;color:var(--mu-gris)}
body.myui-login #login_right{width:100% !important;max-width:none !important;padding:0 !important;margin:0 !important;display:block}
body.myui-login #login_right .tagtable{display:flex;flex-direction:column;gap:14px;width:100%}
body.myui-login .trinputlogin{display:block;margin:0}
body.myui-login .tdinputlogin{display:block !important;position:relative;text-align:left !important;padding:0 !important;margin:0 !important}
body.myui-login .tdinputlogin > .fa-user,
body.myui-login .tdinputlogin > .fa-key{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--mu-gris);margin:0;z-index:1;width:16px;text-align:center}
body.myui-login #username,
body.myui-login #password{width:100% !important;max-width:none !important;height:48px;box-sizing:border-box;margin:0 !important;
  padding:0 44px 0 48px !important;font-size:16px;border:1px solid var(--mu-trait) !important;border-radius:8px;
  background:var(--mu-fond-champ) !important;color:var(--mu-encre)}
body.myui-login #username:focus,
body.myui-login #password:focus{outline:none;border-color:var(--mu-vert) !important;box-shadow:0 0 0 3px rgba(35,118,50,.2);background:var(--mu-blanc) !important}
body.myui-login .login_table #tdpasswordlogin #togglepassword{position:absolute;right:14px;top:0;height:48px;display:flex;align-items:center;color:var(--mu-gris);margin:0;padding:0;cursor:pointer}
body.myui-login #togglepassword .fa{margin:0;line-height:1}
body.myui-login #login_line2{margin-top:20px}
body.myui-login #login-submit-wrapper{margin:0}
body.myui-login #login-submit-wrapper .button{width:100%;height:48px;margin:0;border:0;border-radius:8px;background:var(--mu-vert) !important;
  color:var(--mu-blanc) !important;font-size:16px;font-weight:600;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer;transition:background .2s}
body.myui-login #login-submit-wrapper .button:hover{background:var(--mu-vert-fonce) !important}
body.myui-login #login-submit-wrapper .button:focus-visible{outline:3px solid var(--mu-soleil);outline-offset:2px}
body.myui-login #login_line2 .center{margin-top:16px !important}
body.myui-login a.alogin{color:var(--mu-vert-fonce) !important;font-size:14px;text-decoration:underline}
body.myui-login .login_main_home{max-width:none !important;background:none !important;box-shadow:none !important;color:var(--mu-gris);
  font-size:13px;margin-top:28px;padding:0 !important}
body.myui-login .login_main_home + br{display:none}

@media (max-width:860px){
  body.myui-login #myui-marque{position:relative;width:auto;height:min(400px,58vh);padding:24px 16px 62px}
  body.myui-login #myui-marque .mu-logo{width:min(250px,64%,38vh)}
  body.myui-login #myui-marque .mu-soleil{width:170px;height:170px;top:-55px;right:-55px}
  body.myui-login #myui-marque .mu-ic{width:30px;height:30px}
  body.myui-login #myui-marque .mu-route{height:56px}
  body.myui-login #myui-marque .mu-pied{display:none}
  body.myui-login .login_center{margin-left:0;min-height:0;padding:32px 16px 40px;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  #myui-marque .mu-soleil *,#myui-marque .mu-nuage,#myui-marque .mu-etoile,#myui-marque .mu-ic,#myui-marque .mu-route::after{animation:none !important}
  #myui-marque .mu-etoile{opacity:.6}
}