/* ═══════════════════════════════════════════════════════════════════
   STYLES PROPRES A LOGIN.html
   ───────────────────────────────────────────────────────────────────
   Ces regles etaient ecrites dans la page. Sorties ici pour etre
   trouvables : 2 Ko de CSS noye dans du HTML ne se relit pas.

   ⚠️ LA POSITION DU <link> DANS LA PAGE EST SIGNIFIANTE. Cette feuille
   est chargee AVANT mobile.css, exactement comme l etaient les blocs
   d origine. Deplacer le lien change qui gagne dans la cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* ── bloc 1/1 de login.html ── */
.field { margin-bottom: 1.2rem; }
    .field label { display: block; font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: .4rem; }
    .field input { width: 100%; padding: .75rem 1rem; border: 1.5px solid #e6e1d8; border-radius: 3px; font-size: .95rem; font-family: inherit; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; background: #fbf9f6; }
    .field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(180, 24, 36,.08); background: #fff; }
    .field input.error { border-color: #d72331; }
    .field__error { font-size: .8rem; color: #d72331; margin-top: .3rem; display: none; }
    .field__error.visible { display: block; }
    .field__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
    .field__row label { margin-bottom: 0; }
    .field__forgot { font-size: .82rem; color: var(--muted); text-decoration: none; }
    .field__forgot:hover { color: var(--red); }
    .field__pw-wrap { position: relative; }
    .field__pw-wrap input { padding-right: 2.8rem; }
    .field__pw-toggle { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--muted); padding: 0; display: flex; align-items: center; }
    .field__pw-toggle:hover { color: var(--ink); }
    .auth-submit { width: 100%; padding: .9rem; background: var(--red); color: #fff; border: none; border-radius: var(--r-btn); font-size: 1rem; font-weight: 600; cursor: pointer; transition: opacity .15s, transform .1s, box-shadow .15s; margin-top: .5rem; letter-spacing: .01em; }
    .auth-submit:hover { opacity: .92; transform: translateY(-1px); box-shadow: var(--sh-red); }
    .auth-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    .auth-divider { text-align: center; color: var(--muted); font-size: .85rem; margin: 1.5rem 0; position: relative; }
    .auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e6e1d8; }
    .auth-divider span { background: #fff; padding: 0 .75rem; position: relative; }
    .alert { border-radius: 3px; padding: .75rem 1rem; font-size: .88rem; margin-bottom: 1.2rem; display: none; }
    .alert.visible { display: block; }
    .alert--error { background: #fbeff0; color: #8d111a; border: 1px solid #eec9cc; }
    .alert--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
    .auth-form-inner h1 { font-size: 1.75rem; font-weight: 600; color: #242628; letter-spacing: -.025em; margin-bottom: .4rem; }
    .auth-form-inner .sub { color: var(--muted); font-size: .9rem; margin-bottom: 2rem; }
    .auth-form-inner .sub a { color: var(--red); font-weight: 500; text-decoration: none; }