/* ============================================================================ login-theme.css - Charte commune aux TROIS pages de connexion. admin-login.php, espace-login.php et chauffeur-login.php partagent EXACTEMENT cette structure. Une seule chose change d'une page a l'autre : la variable --ac, posee sur par une classe. rouge dore vert POURQUOI CE FICHIER Les trois pages etaient visuellement identiques : meme carte, meme logo dore, meme bouton, et seul un sous-titre gris de 11 px les distinguait. On saisissait ses identifiants sur la mauvaise page sans aucun moyen de s'en apercevoir -- ce qui a coute une heure de recherche sur un mot de passe qui n'avait jamais ete faux. Puis, en les differenciant, elles ont diverge : hauteurs de carte, rayons de bouton et lisere superieur differaient d'une page a l'autre. Ce fichier supprime cette derive : ce qui est commun est ecrit UNE SEULE FOIS. AJOUTER UNE COULEUR : une ligne dans le bloc des trois variantes ci-dessous. ========================================================================= */ :root{ --lg-fond:#09090F; --lg-carte:#0F0F1A; --lg-champ:#161624; --lg-bord:#1D1D2E; --lg-texte:#E0DBD2; --lg-gris:#9C97B0; --lg-f:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif; } /* -- Les trois variantes. C'est la SEULE difference entre les pages. -- */ body.lg-admin { --ac:#DC2626; --ac2:#B91C1C; --acc:#FCA5A5; --act:#fff; } body.lg-ambassadeur { --ac:#FFBA09; --ac2:#FFC93D; --acc:#F5D98A; --act:#09090F; } body.lg-chauffeur { --ac:#00A94F; --ac2:#008C42; --acc:#8FE0B5; --act:#fff; } *{box-sizing:border-box;margin:0;padding:0} body{ background:var(--lg-fond); color:var(--lg-texte); font-family:var(--lg-f); min-height:100vh; display:flex;align-items:center;justify-content:center; padding:1.5rem; -webkit-font-smoothing:antialiased; } /* -- Carte : structure strictement identique sur les trois pages -- */ .lg-box{ background:var(--lg-carte); border:1px solid color-mix(in srgb, var(--ac) 35%, transparent); border-top:5px solid var(--ac); border-radius:14px; padding:36px 34px 40px; max-width:380px;width:100%; box-shadow:0 10px 40px rgba(0,0,0,.5); } /* Repli pour les navigateurs sans color-mix (avant 2023). */ @supports not (color: color-mix(in srgb, red 50%, blue)){ .lg-box{border-color:rgba(255,255,255,.14)} } .lg-logo{ width:48px;height:48px;border-radius:12px;margin:0 auto 18px; background:linear-gradient(135deg,var(--ac),var(--ac2)); display:flex;align-items:center;justify-content:center; font-weight:700;font-size:26px;color:var(--act); } .lg-marque{text-align:center;font-weight:700;font-size:20px;letter-spacing:.04em;color:var(--lg-texte);margin-bottom:5px} /* Bandeau de titre : c'est lui qui dit OU l'on est, sans avoir a le chercher. */ .lg-sub{ display:block;width:fit-content;margin:0 auto 14px; background:var(--ac);color:var(--act); font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; border-radius:20px;padding:7px 16px;text-align:center; } /* Lien vers les autres espaces : porte de sortie immediate en cas d'erreur. */ .lg-autres{text-align:center;font-size:11.5px;color:var(--acc);line-height:1.6;margin-bottom:22px} .lg-autres a{color:var(--acc);font-weight:600} .lg-autres a:hover{text-decoration:underline} .lg-lbl{display:block;font-size:11px;color:var(--lg-gris);letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px;font-weight:600} .lg-box input[type=email], .lg-box input[type=password], .lg-box input[type=text]{ width:100%;background:var(--lg-champ);border:1px solid var(--lg-bord); border-radius:8px;padding:13px 14px; color:var(--lg-texte);font-family:var(--lg-f);font-size:14px;outline:none; transition:border-color .13s; } .lg-box input:focus{border-color:var(--ac)} .lg-box input::placeholder{color:#5E5A70} .lg-champ{margin-bottom:16px} /* Oeil de revelation du mot de passe */ .lg-pwd{position:relative} .lg-pwd input{padding-right:44px} .lg-eye{ position:absolute;right:12px;top:50%;transform:translateY(-50%); background:none;border:none;color:var(--lg-gris);cursor:pointer; width:auto;margin:0;padding:4px;font-size:16px;line-height:1; } .lg-eye:hover{color:var(--ac)} .lg-box button[type=submit]{ width:100%;margin-top:8px;padding:14px;border:none;border-radius:8px; background:var(--ac);color:var(--act); font-family:var(--lg-f);font-weight:700;font-size:14px;letter-spacing:.03em; cursor:pointer;transition:background .13s; } .lg-box button[type=submit]:hover{background:var(--ac2)} .lg-msg{ padding:12px 14px;border-radius:8px;margin-bottom:16px; font-size:13px;line-height:1.55;text-align:center; } .lg-err{background:rgba(207,102,121,.12);border:1px solid rgba(207,102,121,.45);color:#F0A0AD} .lg-info{background:rgba(255,186,9,.1);border:1px solid rgba(255,186,9,.3);color:#E8D9A8} .lg-pied{text-align:center;margin-top:20px;font-size:12.5px;line-height:2} .lg-pied a{color:var(--lg-gris);text-decoration:none;display:block} .lg-pied a:hover{color:var(--ac)} @media(max-width:400px){ .lg-box{padding:30px 22px 34px} }