/* FEDA skin for the Kolosili login (kolosili.ml/jsp/kolosili_login.jsp), BR73.
   Mohamed 13 Oct 17:56 (option B: patch the delivered page on VM 700, like VSS; reuse the VSS skin; time-box half a day).
   Direction A v4: the untinted haul-road photo, overlay strong behind the text and light over the road; the vendor's
   form panel becomes FEDA's white card. French on the login. Nothing about the form changes: every field name, the
   action UserLogin.jsp, the hidden fields and the vendor scripts (password encryption) stay as delivered.
   Hidden: the supplier block (« Powered by … », its phone and e-mail: ledger rule 11), the supplier's app panel,
   the 50-language picker (French first; the time-box keeps one language), the vendor's slider and its claim.
   Install (OPS, ~/kolosili-skin.sh, at Mohamed's go): copy this folder to the web root as /feda/ and add one line last in
   the page's <head>: <link rel="stylesheet" href="/feda/feda-kolosili.css">. Re-apply after any Kolosili update. */
@font-face{font-family:FedaPoppins;font-weight:600;src:url(poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:FedaInter;font-weight:400;src:url(inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:FedaInter;font-weight:600;src:url(inter-latin-600-normal.woff2) format("woff2")}
body{font-family:FedaInter,Arial,sans-serif!important;min-height:100vh}

/* ---- background: the photo full bleed, overlay strong behind the text, light over the haul road ---- */
#img-holder{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
  background:linear-gradient(180deg,rgba(3,35,79,0) calc(100% - 140px),rgba(3,35,79,.55)),
             linear-gradient(90deg,rgba(3,35,79,.90) 0,rgba(3,35,79,.82) 660px,rgba(3,35,79,0) 1000px)!important}
/* ---- the slider (Mohamed 14 Oct 11:03 C soft ramp; 15 Oct 14:00 six slides, below): 9 s each, a 54 s cycle.
   Photo 1 is the page's own background; layer A shows photos 2, 4 and 6 and layer B photos 3 and 5 above it; a layer only
   changes its photo while it is hidden or covered (tools/slider6.py). The layers sit under #img-holder (the vendor's z-index -1), so the wash stays on top.
   Reduced motion: no animation, the first photo only. ---- */
html{background:url(slide-1.jpg) center/cover no-repeat fixed #03234F!important;min-height:100%}
body{background:transparent!important}
html::before,html::after{content:"";position:fixed;inset:0;z-index:-2;background:center/cover no-repeat;opacity:0;pointer-events:none}
/* the slider (Mohamed 15 Oct 14:00, row 14:02): six slides, surface and underground alternating, 9 s each, a 54 s cycle
   (tools/slider6.py): 2 aerial · jumbo · 6 quarry · loader · 7 haul truck · decline. Photos: Pexels License (Tomo, LekePOV,
   Radwan Menzer), Unsplash License (Arno van Rensburg, Ricardo Gomez Angel), and slide-2: Photo: Dylan McFarlane /
   University of Exeter, CC BY 2.0 (https://creativecommons.org/licenses/by/2.0/), via Wikimedia Commons. Modified: unit
   number blurred, cropped and scaled. Markings blurred on every photo (signin/photos-sous-terre/SOURCES.md). */
html::before{background-image:url(slide-2.jpg);animation:fedaSlideA 54s infinite}
html::after{background-image:url(slide-3.jpg);animation:fedaSlideB 54s infinite}
@keyframes fedaSlideA{0%,15%{opacity:0;background-image:url(slide-2.jpg)}17.96%,41.65%{opacity:1;background-image:url(slide-2.jpg)}41.67%,74.98%{opacity:1;background-image:url(slide-4.jpg)}75%,97.04%{opacity:1;background-image:url(slide-6.jpg)}100%{opacity:0;background-image:url(slide-6.jpg)}}
@keyframes fedaSlideB{0%,31.67%{opacity:0;background-image:url(slide-3.jpg)}34.63%,48.33%{opacity:1;background-image:url(slide-3.jpg)}51.3%,58.31%{opacity:0;background-image:url(slide-3.jpg)}58.33%,65%{opacity:0;background-image:url(slide-5.jpg)}67.96%,81.67%{opacity:1;background-image:url(slide-5.jpg)}84.63%,100%{opacity:0;background-image:url(slide-5.jpg)}}
@media (prefers-reduced-motion:reduce){html::before,html::after{animation:none;opacity:0}}
#img-holder img{display:none!important}

/* ---- left panel: eyebrow, claim, lead, the two points, footer (free pseudo-elements; the vendor's text is hidden) ---- */
body::before{content:"KOLOSILI BY FEDA · ESPACE SÉCURISÉ";position:fixed;left:90px;top:calc(50vh - 196px);z-index:3;font:600 12px FedaInter,Arial;letter-spacing:.16em;color:#FFB27A;padding-left:40px;background:linear-gradient(#FD6500,#FD6500) left center/28px 2px no-repeat}
body::after{content:"Le suivi de votre flotte, dans un même espace.";position:fixed;left:90px;top:calc(50vh - 163px);z-index:3;width:min(600px,calc(100vw - 692px));font:600 44px/1.12 FedaPoppins,Arial;color:#fff;text-wrap:balance}
#img-holder::before{content:"Connectez-vous avec votre compte Kolosili : positions, trajets et rapports de vos véhicules.";position:fixed;left:90px;top:calc(50vh - 51px);z-index:3;width:min(470px,calc(100vw - 692px));font:400 16px/1.5 FedaInter,Arial;color:#D5DEEB}
#img-holder::after{content:"Accès réservé aux comptes autorisés";position:fixed;left:90px;top:calc(50vh + 21px);z-index:3;padding-left:34px;font:600 14.5px/1.4 FedaInter,Arial;color:#fff;background:no-repeat 0 0/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB27A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.main-box-container::before{content:"Une équipe pour vous aider";position:fixed;left:90px;top:calc(50vh + 61px);z-index:3;padding-left:34px;font:600 14.5px/1.4 FedaInter,Arial;color:#fff;background:no-repeat 0 0/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB27A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}
.main-box-container::after{content:"(+223)\00a0 61\00a0 00\00a0 00\00a0 12 · (+223)\00a0 74\00a0 91\00a0 00\00a0 00 · contact@feda\2011it.com";position:fixed;left:124px;top:calc(50vh + 85px);z-index:3;font:400 13.5px/1.45 FedaInter,Arial;color:#C9D5E8}
.about-container::after{content:"© 2026 FEDA IT Consulting SARL · Bamako, Mali";position:fixed;left:90px;bottom:26px;font:400 12.5px FedaInter,Arial;color:#C9D2DE;white-space:nowrap}

/* ---- the vendor's right panel becomes FEDA's white card (centred without a transform) ---- */
.form-main-container{position:fixed!important;right:90px!important;left:auto!important;top:0!important;bottom:0!important;margin:auto 0!important;
  width:448px!important;height:fit-content!important;max-height:calc(100vh - 40px);background:#fff!important;border-radius:18px;border-top:4px solid #FD6500;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);padding:36px 40px 30px!important;z-index:4;display:block!important;box-sizing:border-box;overflow:visible}
.form-main-container *{box-sizing:border-box}
.form-main-container > img.logo-container{display:block;height:46px!important;width:auto!important;max-width:100%;margin:0 0 20px!important}
.form-main-container .main-container{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
.form-main-container .main-container > img.logo-container{display:none!important}
#login_form,#fgpwd_main{margin:0!important}
#login_form h3{font-size:0!important;margin:0 0 20px!important;line-height:0}
#login_form h3::after{content:"Connexion Kolosili";font:600 26px/1.25 FedaPoppins,Arial;color:#0B1220}
#login_form > p{display:none!important}
#login_form .form-group{position:relative;margin:0 0 16px!important}
#login_form .usernamefd::before,#login_form .passwordfd::before{display:block;font:600 13px FedaInter,Arial;color:#1C2024;margin:0 0 6px}
#login_form .usernamefd::before{content:"Identifiant"}
#login_form .passwordfd::before{content:"Mot de passe"}
#login_form .usernamefd label,#login_form .passwordfd label{display:none!important}
#login_form .form-control{height:46px!important;background:#F4F4F7!important;border:1px solid #D9D9E0!important;border-radius:10px!important;box-shadow:none!important;padding:0 14px!important;font:400 15px FedaInter,Arial!important;color:#1C2024!important}
#login_form .form-control:focus{border-color:#05367B!important;box-shadow:0 0 0 2px rgba(5,54,123,.25)!important}
#login_form .form-control::placeholder{color:transparent!important}
#login_form .field-icon{top:auto!important;bottom:12px}
.btn-forget{font-size:0!important;text-decoration:none!important}
/* the server's answer (vendor scripts fill .invalid-login): styled, never replaced; it may be a success or a notice, not only
   an error (REVIEW-2 BR73 r1 M1), so it stays in the vendor's words and in a neutral colour */
.form-main-container .invalid-login{font:600 13px/1.45 FedaInter,Arial!important;color:#1C2024!important;background:#F4F4F7;border-left:3px solid #05367B;border-radius:6px;padding:8px 12px!important;margin:0 0 14px!important;text-align:left!important}
#login_form .btn-forget::after{content:"Mot de passe oublié ?";font:600 13.5px FedaInter,Arial;color:#05367B}
.btn-main{width:100%!important;height:50px!important;border-radius:12px!important;background:#05367B!important;border-color:#05367B!important;font-size:0!important;margin-top:6px}
.btn-main:hover{background:#04285C!important;border-color:#04285C!important}
#login_form .btn-main::after{content:"Se connecter";font:600 15px FedaInter,Arial;color:#fff}
#login_form::after{content:"Aide : contact@feda\2011it.com · (+223)\00a0 61\00a0 00\00a0 00\00a0 12 · (+223)\00a0 74\00a0 91\00a0 00\00a0 00";display:block;margin-top:18px;text-align:center;font:400 13px/1.5 FedaInter,Arial;color:#60646C}
/* the forgot-password form, same card */
#fgpwd_main .header-main{font-size:0!important;margin:0 0 12px!important}
#fgpwd_main .header-main::after{content:"Mot de passe oublié";font:600 24px/1.25 FedaPoppins,Arial;color:#0B1220}
#fgpwd_main > p{font-size:0!important;margin:0 0 16px!important}
#fgpwd_main > p::after{content:"Indiquez votre identifiant pour réinitialiser votre mot de passe.";font:400 14px/1.5 FedaInter,Arial;color:#60646C}
#fgpwd_main .usernamefd::before{content:"Identifiant";display:block;font:600 13px FedaInter,Arial;color:#1C2024;margin:0 0 6px}
#fgpwd_main .usernamefd label{display:none!important}
#fgpwd_main .btn-forget::after{content:"Annuler";font:600 13.5px FedaInter,Arial;color:#05367B}
#fgpwd_main .btn-main::after{content:"Envoyer";font:600 15px FedaInter,Arial;color:#fff}

/* ---- hidden: the supplier block, the supplier's app panel, the language picker ---- */
.power-by-container,.application-main-container,.about-lang-container,#dropdown-overlay,.dropdown,.qr-code-container,.appstore-container,.trakzee-app{display:none!important}
.about-container{position:static!important;height:0!important;margin:0!important;padding:0!important}
#fgpwd_main[style*="none"]{display:none!important}
.form-main-container .main-container{min-height:0!important;height:auto!important}

/* the claim is two lines at 1440, so the block under it sits 49px higher; under 1200px it wraps to three, so the lower positions return */
@media (max-width:1199px){body::after{font-size:34px}#img-holder::before{top:calc(50vh - 2px)}#img-holder::after{top:calc(50vh + 70px)}.main-box-container::before{top:calc(50vh + 110px)}.main-box-container::after{top:calc(50vh + 134px)}}
/* ---- narrow screens: claim on top, the card in the page flow, footer under it ---- */
@media (max-width:1100px){#img-holder::before,#img-holder::after,.main-box-container::before,.main-box-container::after{display:none}}
@media (max-width:820px){
 #img-holder{background:linear-gradient(180deg,rgba(11,45,107,.25) 0,rgba(11,45,107,.25) 200px,#0B2D6B 200px)!important}   /* ORCH's phone: a photo strip, then solid navy (as Authentik) */
 body{padding:0 18px 70px}
 body::before{position:absolute;left:18px;top:224px;content:"KOLOSILI BY FEDA"}
 body::after{position:absolute;left:18px;right:18px;top:252px;width:auto;font-size:28px}
 .form-main-container{position:relative!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;margin:382px 0 0!important;padding:28px 22px!important;max-height:none}
 .about-container::after{position:absolute;left:0;right:0;bottom:-44px;text-align:center;color:#FFFFFF;width:fit-content;margin:0 auto;padding:4px 12px;border-radius:999px;background:rgba(3,35,79,.72)}}   /* row 18:30: the phone photo is lighter (.30); the copyright sits on its own navy pill (it moves with the card; #C9D2DE was 4.2:1 bare) */