/* ═══════════════════════════════════════════════════════════════════
   STYLES PROPRES A REGISTER.html
   ───────────────────────────────────────────────────────────────────
   Ces regles etaient ecrites dans la page. Sorties ici pour etre
   trouvables : 4 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 register.html ── */
.field { margin-bottom: 1.2rem; }
    .field label { display: block; font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: .4rem; }
    .field input, .field select { 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, .field select: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__hint { font-size: .78rem; color: var(--muted); margin-top: .25rem; }
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .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; 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; }
    .btn-back { width: 100%; padding: .75rem; background: transparent; color: var(--muted); border: 1.5px solid #e6e1d8; border-radius: var(--r-btn); font-size: .95rem; font-weight: 500; cursor: pointer; margin-bottom: .75rem; transition: all .15s; }
    .btn-back:hover { border-color: #a6a19a; color: var(--ink); }
    .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; }
    .strength-bar { display: flex; gap: 4px; margin-top: .4rem; }
    .strength-bar span { flex: 1; height: 4px; border-radius: 2px; background: #e6e1d8; transition: background .2s; }
    .strength-bar.s1 span:nth-child(1) { background: #d72331; }
    .strength-bar.s2 span:nth-child(1), .strength-bar.s2 span:nth-child(2) { background: #f97316; }
    .strength-bar.s3 span:nth-child(1), .strength-bar.s3 span:nth-child(2), .strength-bar.s3 span:nth-child(3) { background: #eab308; }
    .strength-bar.s4 span { background: #22c55e; }
    .page { display: none; }
    .page.active { display: block; }
    .success-icon { text-align: center; font-size: 3rem; margin-bottom: 1rem; }
    .steps-bar { display: flex; align-items: flex-start; gap: 0; margin-bottom: 2rem; }
    .step { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .75rem; color: var(--muted); font-weight: 500; }
    .step__dot { width: 26px; height: 26px; border-radius: 50%; background: #f0ede7; border: 2px solid #e6e1d8; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; color: #a6a19a; transition: all .2s; }
    .step.active .step__dot { background: var(--red); border-color: var(--red); color: #fff; }
    .step.done .step__dot { background: #22c55e; border-color: #22c55e; color: #fff; }
    .step.active { color: var(--ink); }
    .step__connector { flex: 1; height: 2px; background: #e6e1d8; margin-top: 13px; }
    .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: 1.5rem; }
    .auth-form-inner .sub a { color: var(--red); font-weight: 500; text-decoration: none; }
    @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }