/* ============================================================ educfive — page de connexion (/login) UNIQUEMENT. Chargée APRÈS tokens.css par public/login.html et par lui seul. Ne pas référencer depuis une autre page : les surcharges de ci-dessous sont volontairement globales dans le contexte de cette page. Reprend de /root/ref-design/login-educfive.html : disposition en carte deux colonnes, panneau de marque, hiérarchie des champs, espacements, palette et bascule responsive à 700 px. Familles typographiques conservées (Fraunces + IBM Plex Sans), servies localement depuis /assets/fonts/ — aucun appel réseau tiers. ============================================================ */ /* Les @font-face (Fraunces + IBM Plex Sans, fichiers locaux) sont déclarés dans theme-educfive.css, chargé juste avant cette feuille. */ /* ---- Palette de la référence. Noms distincts de ceux de tokens.css (--bleu, --ink…) : aucune collision, tokens.css reste intact. ---- */ :root{ --accent:#185FA5; --accent-hover:#0C447C; --accent-bg:#E6F1FB; --accent-text:#0C447C; --lg-text:#1A1A18; --lg-text-2:#5F5E5A; --lg-text-3:#8A8880; --lg-border:#E3E1DA; --lg-page:#F7F6F2; --lg-card:#FFFFFF; --lg-danger:#A32D2D; --lg-danger-bg:#FCEBEB; --lg-danger-bd:#F0C4C4; /* État de succès : absent de la référence, dérivé dans le même registre désaturé pour le message « Connexion réussie » du script existant. */ --lg-ok:#2E6B4F; --lg-ok-bg:#E9F3ED; --lg-ok-bd:#C3DDCE; --lg-radius:8px; --lg-radius-card:12px; } html,body{height:100%} body{ margin:0; background:var(--lg-page); color:var(--lg-text); font-family:var(--font-sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; display:flex; min-height:100vh; min-height:100svh; padding:24px 16px; } .card{ /* margin:auto centre sur les deux axes SANS rogner le haut si le contenu dépasse la hauteur de l'écran — contrairement à align-items:center. */ margin:auto; width:100%; max-width:880px; background:var(--lg-card); border:0.5px solid var(--lg-border); border-radius:var(--lg-radius-card); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; } /* ---- Panneau de marque ---- */ .brand{ background:var(--accent-bg); color:var(--accent-text); padding:40px 36px; display:flex; flex-direction:column; justify-content:space-between; } .brand-head{display:flex;align-items:center;gap:12px;margin-bottom:28px} .mark{ width:44px;height:44px;flex:none; border-radius:10px; background:var(--accent); color:#fff; display:flex;align-items:center;justify-content:center; } .mark svg{width:22px;height:22px} .brand-name{margin:0;font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-0.01em;color:var(--accent-text)} .brand-sub{margin:0;font-size:12px;color:var(--accent)} .brand-lead{margin:0 0 28px;font-size:14px;max-width:30ch} .brand-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:13px} .brand-list li{display:flex;align-items:center;gap:10px} .brand-list svg{width:17px;height:17px;flex:none;stroke:var(--accent)} .brand-foot{margin:32px 0 0;font-size:11px;color:var(--accent);letter-spacing:0.04em} /* ---- Panneau formulaire ---- */ .panel{padding:40px 36px} .panel .back{ display:inline-block;margin-bottom:20px; font-size:13px;color:var(--lg-text-2);text-decoration:none; } .panel .back:hover{color:var(--accent);text-decoration:underline} .panel h1{ margin:0 0 4px;font-family:var(--font-display); font-size:20px;font-weight:500;letter-spacing:-0.01em;color:var(--lg-text); } .panel .lead{margin:0 0 28px;font-size:13px;color:var(--lg-text-2)} .panel form{margin:0} .field{margin-bottom:16px} .field label,.panel label{ display:block;font-size:13px;font-weight:400;color:var(--lg-text-2); margin-bottom:6px;letter-spacing:0; } .panel .input{ width:100%;height:40px; padding:0 12px; font-size:15px;font-family:inherit;color:var(--lg-text); background:#fff; border:0.5px solid var(--lg-border); border-radius:var(--lg-radius); box-shadow:none; transition:border-color .12s ease, box-shadow .12s ease; } .panel .input::placeholder{color:var(--lg-text-3)} .panel .input:hover{border-color:#CFCCC3} .panel .input:focus, .panel .input:focus-visible, .panel a:focus-visible, .panel button:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(24,95,165,.18); } .panel a:focus-visible{border-radius:4px} /* Œil « afficher / masquer » : injecté par /assets/pw-eye.js, qui pose ses styles en INLINE (position, taille, couleur). On ne modifie pas ce script — seule la couleur est réalignée sur la palette, d'où le !important, requis pour l'emporter sur les styles inline posés par les gestionnaires de survol. */ .pw-eye-wrap{position:relative;display:block} .pw-eye-btn{color:var(--lg-text-3) !important;border-radius:6px !important} .pw-eye-btn:hover{color:var(--lg-text-2) !important;background:#F1EFE8 !important} /* flex-wrap : sous 380 px de colonne, le lien passe proprement sous la note au lieu de se couper en deux au milieu de « Parent : réinitialiser ». */ .row{display:flex;align-items:baseline;justify-content:space-between;gap:8px 12px;margin:0 0 24px;flex-wrap:wrap} .row-note{font-size:13px;color:var(--lg-text-2)} .link{font-size:13px;color:var(--accent);text-decoration:none;white-space:nowrap} .link:hover{color:var(--accent-hover);text-decoration:underline} .panel .submit{ width:100%;height:40px; background:var(--accent);color:#fff; border:none;border-radius:var(--lg-radius); font-size:15px;font-family:inherit;font-weight:500; cursor:pointer; transition:background .12s ease, transform .06s ease; } .panel .submit:hover{background:var(--accent-hover)} .panel .submit:active{transform:scale(.99)} .panel .submit:disabled{opacity:.6;cursor:not-allowed;transform:none} /* Message d'état. Le script inline existant bascule className entre 'msg', 'msg err' et 'msg ok' : les trois états sont couverts ici, 'msg' seul restant masqué. */ .msg{display:none;margin:0 0 20px;padding:10px 12px;border-radius:var(--lg-radius);font-size:13px} .msg.err{display:block;background:var(--lg-danger-bg);color:var(--lg-danger);border:0.5px solid var(--lg-danger-bd)} .msg.ok{display:block;background:var(--lg-ok-bg);color:var(--lg-ok);border:0.5px solid var(--lg-ok-bd)} /* Bouton d'installation PWA. /assets/pwa-install.js le masque par style.display='none' et le réaffiche par style.display='' — c'est-à-dire en RENDANT LA MAIN à la feuille de style. Le display doit donc être défini ici, sinon le retombe en inline et ignore width:100%. */ #pwaInstall{ display:flex; width:100%;margin-top:12px; padding:0 14px;height:40px; align-items:center;justify-content:center;gap:6px; background:#fff;color:var(--accent); border:0.5px solid var(--lg-border);border-radius:var(--lg-radius); font-size:14px;font-weight:500;text-decoration:none;text-align:center; } #pwaInstall:hover{border-color:var(--accent);background:var(--accent-bg)} .help{ margin:24px 0 0;padding-top:20px; border-top:0.5px solid var(--lg-border); font-size:12px;color:var(--lg-text-3); display:flex;align-items:flex-start;gap:8px; } .help svg{width:15px;height:15px;flex:none;margin-top:2px;stroke:var(--lg-text-3)} .panel .mini{margin:12px 0 0;font-size:12px;color:var(--lg-text-3)} .panel .mini a{color:var(--accent);text-decoration:none} .panel .mini a:hover{text-decoration:underline} .panel .legal{margin-top:16px;font-size:11px;line-height:1.6;color:var(--lg-text-3)} /* ---- Mobile : sous 700 px le panneau de marque se réduit au bandeau logo ---- */ @media (max-width:700px){ body{padding:0;display:block} .card{margin:0;max-width:none;border:none;border-radius:0;grid-template-columns:1fr;min-height:100vh;min-height:100svh} .brand{padding:24px 20px} .brand-head{margin-bottom:0} .brand-lead,.brand-list,.brand-foot{display:none} .panel{padding:28px 20px 40px} } @media (prefers-reduced-motion:reduce){ *{transition:none !important} }