/* mot-de-passe.html — carte centrée, un seul état visible à la fois.

   Couleurs, typographies, espacements et rayons viennent de
   design-system.css. Le fond reprend celui de login.css pour que les
   deux pages se suivent sans rupture. */

*{box-sizing:border-box;margin:0;padding:0}

body{
    background:
        radial-gradient(circle at top right,rgba(213,173,82,.16),transparent 38%),
        var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-body);
    min-height:100vh;
}

a{color:inherit}

button,input,select{font:inherit}

.auth-page{
    min-height:100vh;
    display:grid;
    grid-template-rows:auto 1fr;
    padding:22px;
}

.auth-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.retour{
    color:var(--color-text-muted);
    font-size:13px;
    text-decoration:none;
}

.retour:hover{color:var(--color-accent-light)}

/* --- La carte ------------------------------------------------------- */

.auth-carte{
    width:100%;
    max-width:440px;
    margin:auto;
    padding:34px 32px;
    background:var(--color-bg-alt);
    border:1px solid var(--color-border);
    border-radius:20px;
    box-shadow:var(--shadow-lg,0 24px 60px rgba(0,0,0,.45));
}

.marque{display:flex;gap:12px;align-items:center;margin-bottom:26px}

.marque-sigle{
    width:46px;height:46px;
    display:grid;place-items:center;
    border-radius:14px;
    background:linear-gradient(135deg,var(--color-accent-light),var(--color-accent));
    color:#111;
    font-weight:900;
    font-size:15px;
}

.marque strong{display:block;font-size:14.5px}

.marque span{color:var(--color-text-muted);font-size:12px}

/* --- États ---------------------------------------------------------- */

/* [hidden] ne suffit pas : .etat pose display:grid, qui l'emporterait.
   On le redit donc explicitement. */
.etat[hidden]{display:none}

.etat{display:grid;gap:14px}

.etat h1{
    font-family:var(--font-heading);
    font-size:23px;
    font-weight:600;
    line-height:1.25;
}

.etat p{color:var(--color-text-muted);font-size:13.5px;line-height:1.65}

/* --- Formulaires ---------------------------------------------------- */

form{display:grid;gap:16px;margin-top:4px}

.champ{display:grid;gap:7px}

.champ label{font-size:12.5px;font-weight:600}

.champ input{
    width:100%;
    padding:12px 14px;
    min-height:44px;
    background:var(--color-bg-elevated);
    color:var(--color-text);
    border:1px solid var(--color-border);
    border-radius:12px;
}

.champ input:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:1px;
    border-color:#d5ad5247;
}

.btn-primary,.btn-secondary{width:100%;text-decoration:none}

/* --- Message -------------------------------------------------------- */

.message{
    margin-top:18px;
    font-size:13px;
    line-height:1.6;
    min-height:20px;
}

.message.succes{color:var(--color-success,#4ade80)}

.message.erreur{color:var(--color-danger)}

/* L'arabe n'a rien à retourner ici : la mise en page suit dir="rtl", et
   la flèche du lien de retour est dans le texte traduit — c'est la
   traduction qui la met dans le bon sens, pas un scaleX qui retournerait
   aussi les lettres. */

@media(max-width:520px){
    .auth-page{padding:16px}
    .auth-carte{padding:28px 20px}
}