/* Thème des pages d'authentification v2 (connexion, inscription, mot de passe oublié,
 * réinitialisation, espace client).
 *
 * Extrait du <style> de apps/site/templates/security/_auth_theme.html.twig : ces 166 lignes
 * étaient réinjectées dans le HTML à CHAQUE chargement des 6 pages concernées, sans pouvoir
 * être mises en cache par le navigateur. En feuille séparée, elles ne sont téléchargées
 * qu'une fois. Le CSS n'a par ailleurs pas sa place dans un template.
 *
 * Chargée à la position exacte de l'ancien <style> pour conserver l'ordre de cascade. */

.fm-auth {
    position: relative; overflow: hidden;
    align-items: center; display: flex; justify-content: center;
    min-height: 100vh; min-height: 100dvh;
    padding: clamp(1rem, 4vw, 2.5rem); font-family: 'Poppins', sans-serif; color: #3A2A1A;
    background:
        radial-gradient(1200px 560px at 50% -12%, #FDECCB 0%, rgba(251,232,195,0) 60%),
        linear-gradient(180deg, #F8E9C9 0%, #ECD3A4 100%);
}
.fm-auth::before, .fm-auth::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(72px); z-index: 0; pointer-events: none;
}
.fm-auth::before { width: 46vmax; max-width: 480px; aspect-ratio: 1; background: #E9B84B; opacity: .5; top: -12%; right: -8%; }
.fm-auth::after  { width: 42vmax; max-width: 440px; aspect-ratio: 1; background: #7A1F2B; opacity: .26; bottom: -14%; left: -10%; }

.fm-card {
    position: relative; z-index: 1; overflow: hidden;
    background: #FFFDF8; border: 1px solid rgba(122,31,43,.10);
    border-radius: clamp(20px, 3vw, 28px);
    box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 42px 90px -32px rgba(90,58,34,.5), 0 12px 30px -18px rgba(90,58,34,.4);
    max-width: 31rem; width: 100%;
    padding: clamp(1.9rem, 5vw, 3.2rem) clamp(1.4rem, 4.5vw, 3rem);
    animation: fmUp .5s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes fmUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fm-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 2;
    background: linear-gradient(90deg, #7A1F2B 0%, #A83246 45%, #E3B23C 100%);
}
.fm-card-wide { max-width: 50rem; }

/* ---------- Mise en page 2 colonnes (desktop) ---------- */
.fm-card.fm-split { max-width: 62rem; padding: 0; }
.fm-split { display: grid; grid-template-columns: 1fr; }
.fm-split::before { display: none; }               /* le liseré est remplacé par le panneau marque */
.fm-hero {
    position: relative; color: #F7E7C6;
    background: linear-gradient(160deg, #7A1F2B 0%, #591320 100%);
    padding: clamp(1.7rem, 4vw, 2.8rem);
    display: flex; flex-direction: column; justify-content: center; gap: .9rem;
}
.fm-hero::after { /* liseré doré en haut du panneau marque */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, #E3B23C, #A83246);
}
.fm-hero .fm-logo { background: rgba(251,232,195,.14); box-shadow: 0 10px 26px rgba(0,0,0,.25), 0 0 0 5px rgba(246,206,91,.28); margin-bottom: .4rem; }
.fm-hero-title { font-family: 'Rye', cursive; color: #fff; margin: 0; line-height: 1.15; font-size: clamp(1.5rem, 3.6vw, 2rem); }
.fm-hero-sub { color: #F3DCB2; margin: 0; font-size: clamp(.9rem, 2.4vw, .98rem); }
.fm-hero-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .65rem; }
.fm-hero-list li { display: flex; align-items: center; gap: .65rem; font-size: .93rem; color: #F7E7C6; }
.fm-hero-list i { color: #EBC15B; width: 1.1rem; text-align: center; }
.fm-panel { padding: clamp(1.9rem, 5vw, 3rem) clamp(1.4rem, 4.5vw, 2.6rem); }
@media (min-width: 860px) {
    .fm-split { grid-template-columns: .82fr 1.18fr; }
}
@media (max-width: 859px) {
    .fm-hero { text-align: center; align-items: center; padding: clamp(1.6rem, 6vw, 2.2rem); }
    .fm-hero-list { display: none; }               /* mobile : hero compact, on va droit au formulaire */
}

.fm-logo {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: clamp(88px, 22vw, 112px); height: clamp(88px, 22vw, 112px);
    border-radius: clamp(18px, 4vw, 26px); background: #FBE8C3; margin-bottom: clamp(1rem, 3vw, 1.6rem);
    box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 0 5px rgba(246,206,91,.6);
}
.fm-logo img { width: clamp(56px, 14vw, 72px); height: clamp(56px, 14vw, 72px); object-fit: contain; }
.fm-brand { color: #7A1F2B; font-family: 'Rye', cursive; }
.fm-title { color: #7A1F2B; font-family: 'Rye', cursive; letter-spacing: .5px; font-size: clamp(1.7rem, 6vw, 2.3rem); margin: 0; line-height: 1.15; }
.fm-sub { color: #8a6d4a; margin: .5rem 0 clamp(1.3rem, 4vw, 1.9rem); font-size: clamp(.9rem, 2.6vw, .98rem); }
.fm-label {
    color: #7A1F2B; display: block; font-size: .8rem; font-weight: 600;
    letter-spacing: .3px; margin-bottom: .4rem; text-transform: uppercase;
}
.fm-input {
    background: #FFFEFB; border: 1px solid #E3D3B3; border-radius: 14px; color: #3A2A1A;
    display: block; padding: .9rem 1rem; width: 100%; font-size: 16px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.fm-input-icon + .fm-input { padding-left: 2.7rem; }
.fm-input:focus { background: #fff; border-color: #7A1F2B; box-shadow: 0 0 0 .22rem rgba(122,31,43,.16); outline: none; }
.fm-input::placeholder { color: #bfae90; }
.fm-input-icon { color: #b08a5a; left: 1rem; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); }

/* ---------- Champ mot de passe : œil afficher/masquer ---------- */
.fm-pass { position: relative; }
.fm-pass .fm-input { padding-right: 2.9rem; }
.fm-pass-toggle {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #b08a5a; cursor: pointer; padding: .45rem .55rem;
    font-size: 1rem; border-radius: 10px; line-height: 1;
}
.fm-pass-toggle:hover { color: #7A1F2B; background: rgba(122,31,43,.06); }

/* ---------- Jauge de robustesse ---------- */
.fm-strength { display: flex; gap: 5px; margin-top: .5rem; }
.fm-strength span { height: 5px; flex: 1; border-radius: 3px; background: #E7DCC9; transition: background .2s ease; }
.fm-strength-label { font-size: .78rem; color: #8a6d4a; margin-top: .3rem; min-height: 1rem; }

.fm-btn {
    position: relative; align-items: center; background: linear-gradient(135deg, #8A2433 0%, #6E1A26 100%); border: none;
    border-radius: 999px; color: #FBE8C3; cursor: pointer; display: flex; font-weight: 700; font-size: 1rem; gap: .5rem;
    justify-content: center; padding: 1rem 1.5rem; width: 100%;
    box-shadow: 0 14px 28px -10px rgba(122,31,43,.6); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.fm-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 18px 34px -12px rgba(122,31,43,.72); color: #fff; }
.fm-btn:active { transform: translateY(0); }
.fm-btn.is-loading { color: transparent !important; pointer-events: none; }
.fm-btn.is-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 1.15em; height: 1.15em; margin: -.575em 0 0 -.575em;
    border: 2px solid rgba(251,232,195,.45); border-top-color: #FBE8C3; border-radius: 50%; animation: fmSpin .6s linear infinite;
}
@keyframes fmSpin { to { transform: rotate(360deg); } }
.fm-btn-ghost {
    align-items: center; background: #FBE8C3; border: 1px solid rgba(122,31,43,.25); border-radius: 999px;
    color: #7A1F2B; display: inline-flex; font-weight: 600; font-size: 1rem; justify-content: center;
    padding: 1rem 1.5rem; text-decoration: none; transition: background .2s ease; width: 100%;
}
.fm-btn-ghost:hover { background: #F3DCB2; color: #641722; text-decoration: none; }

.fm-links { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.5rem; font-size: .92rem; flex-wrap: wrap; }
.fm-link { color: #7A1F2B; font-weight: 600; text-decoration: none; }
.fm-link:hover { color: #641722; text-decoration: underline; }
.fm-register, .fm-signin { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid #EFD8AC; text-align: center; color: #8a6d4a; font-size: .94rem; }
.fm-register a, .fm-signin a { color: #7A1F2B; font-weight: 700; text-decoration: none; }
.fm-register a:hover, .fm-signin a:hover { text-decoration: underline; }
.register-form, .register-form input, .register-form select, .register-form button { font-family: 'Poppins', sans-serif; }
.fm-err { color: #B23B3B; font-size: .82rem; margin-top: .25rem; }
.fm-alert { border-radius: 14px; font-size: .92rem; margin-bottom: 1rem; padding: .8rem 1rem; text-align: center; }
.fm-alert-error { background: #FBE3E3; border: 1px solid #E2A1A1; color: #8A2222; }
.fm-alert-ok { background: #E4F4E6; border: 1px solid #9CCFA3; color: #1F5A2A; }
.fm-alert-info { background: #FBE8C3; border: 1px solid #E3B23C; color: #7A1F2B; font-weight: 600; }

/* ---------- Réassurance ---------- */
.fm-trust { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.1rem; color: #8a6d4a; font-size: .82rem; }
.fm-trust i { color: #2E7D32; }

/* Mode invité : consulter la carte sans compte */
.fm-guest { margin-top: 1.4rem; }
.fm-guest-sep { border-top: 1px solid #E7DCC9; margin: 1.2rem 0 1rem; position: relative; text-align: center; }
.fm-guest-sep span { background: #FFFDF8; color: #9A8C77; font-size: .8rem; padding: 0 .7rem; position: relative; top: -.65rem; }
.fm-guest-title { color: #7A1F2B; font-size: .95rem; font-weight: 600; margin: 0 0 .7rem; text-align: center; }
.fm-guest-btns { display: flex; gap: .6rem; }
.fm-guest-btn {
    align-items: center; background: #FFF; border: 1.5px solid #E3B23C; border-radius: 14px;
    color: #7A1F2B; display: flex; flex: 1; font-size: .9rem; font-weight: 600;
    justify-content: center; padding: .75rem .5rem; text-decoration: none; transition: all .15s;
}
.fm-guest-btn:hover { background: #FBE8C3; text-decoration: none; transform: translateY(-1px); }
.fm-guest-note { color: #9A8C77; font-size: .8rem; margin: .6rem 0 0; text-align: center; }

/* ---------- Accessibilité : focus clavier visible ---------- */
.fm-input:focus-visible, .fm-btn:focus-visible, .fm-btn-ghost:focus-visible, .fm-link:focus-visible,
.fm-guest-btn:focus-visible, .fm-pass-toggle:focus-visible, .fm-register a:focus-visible, .fm-signin a:focus-visible {
    outline: 3px solid rgba(122,31,43,.4); outline-offset: 2px;
}

@media (max-width: 640px) {
    .fm-guest-btns { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .fm-card { animation: none; }
    .fm-btn, .fm-guest-btn, .fm-input { transition: none; }
}

/* --- Helpers de mise en page (migrés depuis les style="" inline des pages auth, Phase 3) --- */
.fm-row       { margin-bottom: 1rem; }
.fm-row--sm   { margin-bottom: 1.3rem; }
.fm-row--lg   { margin-bottom: 1.5rem; }
.fm-center    { text-align: center; }
.fm-input-wrap { position: relative; }
.fm-hidden    { display: none; }
.fm-alert--spaced { margin: 1.3rem 0; }
.fm-links--center { justify-content: center; }