/* Messenger School – Login styles (Backpack) Couleurs et réglages à un seul endroit : - Pour changer la palette, modifie les variables :root ci-dessous. - Dark mode auto via prefers-color-scheme + toggle (classe .theme-dark sur ) Hauteur des champs: 44px ; Radius: 10px ; Carte radius: 16px */ :root{ --ms-blue:#0A2B66; /* titres, liens, focus */ --ms-orange:#F58220; /* CTA */ --ms-orange-hover:#E1731C; --ms-bg:#F5F7FB; /* fond clair */ --ms-text:#1B1B18; /* texte foncé */ --ms-border:#E5E7EB; /* bordures */ --ms-error:#B45309; /* message d'erreur */ --ring: 0 0 0 3px rgba(10,43,102,.15); } @media (prefers-color-scheme: dark){ :root{ --ms-bg:#0a0a0a; /* fond global sombre */ --ms-text:#EDEDEC; /* texte sombre */ } } /* === Forcer le look clair sur la page de login, même si le thème global est dark === */ body.ms-login-light{ --ms-bg:#F5F7FB; /* même fond que la landing */ --ms-text:#1B1B18; background:#F5F7FB !important; color:#1B1B18 !important; } /* Carte et champs restent clairs */ body.ms-login-light .ms-card{ background:#fff !important; border-color: var(--ms-border) !important; box-shadow: 0 12px 40px rgba(2,6,23,.08) !important; } body.ms-login-light .ms-input{ background:#fff !important; color:#1B1B18 !important; border-color: var(--ms-border) !important; } /* L’anneau de focus reste bleu et le CTA orange comme prévu */ /* === Fond CLAIR global, mais carte SOMBRE (style landing) === */ body.ms-login-light, body.ms-login-light .page { /* Tabler applique un fond sur .page */ background: #ffffff !important; /* si tu préfères gris clair: #F5F7FB */ color: #1B1B18 !important; } /* Carte sombre */ body.ms-login-light .ms-card{ background: #121212 !important; /* sombre */ color: #EDEDEC !important; border-color: #0f0f0f !important; box-shadow: 0 16px 40px rgba(2,6,23,.25) !important; } /* Titre et liens conservent la charte bleue */ body.ms-login-light .ms-card .ms-title{ color: var(--ms-blue) !important; } body.ms-login-light .ms-link{ color: var(--ms-blue) !important; } /* Champs sombres dans la carte sombre */ body.ms-login-light .ms-input{ background: #1f2937 !important; color: #EDEDEC !important; border-color: #2a2a2a !important; } body.ms-login-light .ms-input::placeholder{ color:#c8c8c8 !important; opacity:1; } body.ms-login-light .ms-input:focus{ border-color: var(--ms-blue) !important; box-shadow: var(--ring) !important; } /* CTA orange */ body.ms-login-light .ms-btn{ background: var(--ms-orange) !important; border-color: var(--ms-orange) !important; color:#fff !important; } body.ms-login-light .ms-btn:hover{ background: var(--ms-orange-hover) !important; } /* Surcharge si l’utilisateur force le dark avec le toggle (classe sur ) */ html.theme-dark{ --ms-bg:#0a0a0a; --ms-text:#EDEDEC; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif; background: var(--ms-bg); color: var(--ms-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ms-wrap{ min-height:100%; display:grid; place-items:center; padding:24px; } .ms-card{ width:100%; max-width:480px; /* 420–480px demandé, ici 480 */ background:#fff; border:1px solid var(--ms-border); border-radius:16px; padding:28px; box-shadow: 0 8px 24px rgba(0,0,0,.06); animation: ms-fade .25s ease-out both; } @media (prefers-color-scheme: dark){ .ms-card{ background:#121212; border-color:#1f1f1f; box-shadow: 0 8px 24px rgba(0,0,0,.35); } } @keyframes ms-fade{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform: translateY(0)} } .ms-logo{ display:block; max-height:72px; margin:0 auto 12px; } .ms-title{ margin:8px 0 18px; text-align:center; font-size:22px; font-weight:700; color:var(--ms-blue); } .ms-subtitle{ text-align:center; font-size:16px; font-weight:600; margin-bottom:18px; } .ms-group{margin-bottom:14px} .ms-label{ display:block; font-size:14px; margin-bottom:6px; } .ms-input{ width:100%; height:44px; padding:10px 12px; border:1px solid var(--ms-border); border-radius:10px; background:transparent; color:inherit; transition: box-shadow .15s, border-color .15s, background-color .15s; } .ms-input::placeholder{opacity:.6} .ms-input:focus{ outline:none; border-color: var(--ms-blue); box-shadow: var(--ring); } .ms-error{ margin-top:6px; font-size:13px; color: var(--ms-error); } .ms-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 16px; } .ms-remember{ display:flex; align-items:center; gap:8px; font-size:14px; } .ms-link{ color: var(--ms-blue); text-decoration:none; } .ms-link:hover{ text-decoration: underline } .ms-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px; border:0; border-radius:12px; font-weight:600; cursor:pointer; background: var(--ms-orange); color:#fff; transition: background-color .15s, transform .02s; } .ms-btn:hover{ background: var(--ms-orange-hover) } .ms-btn:focus{ outline:none; box-shadow: var(--ring) } .ms-btn:active{ transform: translateY(1px) } .ms-btn[disabled]{ opacity:.7; cursor:not-allowed } .ms-spinner{ width:18px; height:18px; display:none; } .ms-btn.loading .ms-spinner{ display:inline-block } .ms-btn.loading .ms-btn-text{ opacity:.85 } .ms-foot{ text-align:center; margin-top:14px; font-size:14px; opacity:.9; } .ms-foot a{ color: var(--ms-blue); text-decoration:none } .ms-foot a:hover{ text-decoration:underline } /* Barre utilitaire entête (logo + toggle thème) */ .ms-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } /* Borders orange quand erreur sur le champ */ .ms-input.is-invalid{ border-color: rgba(245,130,32,.6); } /* Carte en dark : conserver contraste */ @media (prefers-color-scheme: dark){ .ms-input{ background:#0f0f0f; border-color:#2a2a2a; } .ms-input:focus{ background:#111; } } /* Discret “Retour au site” */ .ms-back{ display:block; margin: 8px auto 0; text-align:center; font-size:13px; opacity:.8; } /* Bouton bascule thème (discret) */ .ms-theme-toggle{ border:1px solid var(--ms-border); background:transparent; color:inherit; padding:6px 10px; font-size:13px; border-radius:8px; cursor:pointer; } .ms-theme-toggle:focus{ outline:none; box-shadow: var(--ring) }