/* mot_de_passe_oublie.php — styles sortis de la page le 06/11/2026 */
:root { --cyan:#00B7BC; --cyan-d:#00767a; --bord:#cdd8d8; --txt:#1f2933; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
       background:#eef4f4; color:var(--txt); font-family:"Segoe UI",Tahoma,Arial,sans-serif; padding:20px; }
.card { width:100%; max-width:420px; background:#fff; border:1px solid #e4ecec; border-radius:14px;
        box-shadow:0 10px 30px rgba(11,59,61,.08); padding:26px 24px; }
h1 { font-size:1.25rem; margin:0 0 4px; color:#0b3b3d; }
.sub { margin:0 0 18px; color:#5b6b6c; font-size:.9rem; }
.icon-main { font-size:40px; color:var(--cyan); display:block; margin:0 auto 6px; text-align:center; width:100%; }
.field { margin-bottom:14px; }
label { display:block; font-size:.85rem; font-weight:600; color:#33484a; margin-bottom:5px; }
input[type=email], input[type=text] { width:100%; padding:11px 12px; border:1px solid var(--bord);
        border-radius:8px; font:inherit; }
input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,183,188,.18); }
.code-input { text-align:center; letter-spacing:10px; font-size:1.5rem; font-family:monospace; }
button { width:100%; padding:12px; border:0; border-radius:8px; background:var(--cyan); color:#fff;
         font:inherit; font-weight:700; cursor:pointer; display:inline-flex; align-items:center;
         justify-content:center; gap:6px; }
button:hover { background:#009aa0; }
.msg { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:8px; font-size:.86rem; margin-bottom:16px; }
.msg .material-symbols-outlined { font-size:19px; }
.msg.success { background:#e7f7ef; color:#146c2e; }
.msg.error   { background:#fdecea; color:#b23b32; }
.links { text-align:center; margin-top:16px; }
.links a { color:var(--cyan-d); font-size:.85rem; text-decoration:none; }
.steps { display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.dot { width:9px; height:9px; border-radius:50%; background:#d3e0e0; }
.dot.on { background:var(--cyan); }
.dot.done { background:#7fd4d6; }

/* classes utilitaires (ex-attributs style="" de la page) : !important = même priorité qu'un attribut style */
.u-fs-16{ font-size:16px !important; }
.u-va-middle{ vertical-align:middle !important; }