/* Habillage de marque Élixir pour les pages d'authentification (login, mot de passe
   oublié, réinitialisation, vérification d'email). Split-screen : panneau marque
   mauve/fuchsia à bokeh + diagonale à gauche, formulaire épuré à droite. */

:root {
    --elx-deep: #5e2b7e;
    --elx-mid: #9c2c8a;
    --elx-fuchsia: #c64b8c;
    --elx-ink: #4a2a52;
    --elx-soft: #f7f1f8;
}

* { box-sizing: border-box; }

body.elx-auth {
    margin: 0;
    min-height: 100vh;
    font-family: 'Raleway', system-ui, sans-serif;
    color: var(--elx-ink);
    background: var(--elx-soft);
}

.elx-split { display: flex; min-height: 100vh; }

/* ── Panneau marque (gauche) ── */
.elx-brand {
    position: relative;
    flex: 0 0 46%;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .30), transparent 22%),
        radial-gradient(circle at 78% 14%, rgba(255, 209, 138, .35), transparent 16%),
        radial-gradient(circle at 30% 70%, rgba(255, 180, 220, .30), transparent 20%),
        radial-gradient(circle at 86% 64%, rgba(255, 255, 255, .22), transparent 18%),
        radial-gradient(circle at 60% 88%, rgba(214, 51, 132, .30), transparent 24%),
        linear-gradient(155deg, var(--elx-deep) 0%, var(--elx-mid) 52%, var(--elx-fuchsia) 100%);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.elx-brand__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 48px 9% 48px 6%;
    color: #fff;
}

.elx-brand__logo {
    width: 188px;
    max-width: 60%;
    filter: brightness(0) invert(1); /* logo noir transparent → blanc */
    opacity: .97;
    margin-bottom: 34px;
}

.elx-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    line-height: 1.25;
    margin: 0 0 22px;
    letter-spacing: .3px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}

.elx-words {
    font-size: .72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    opacity: .92;
    margin: 0;
}

.elx-words::before {
    content: "";
    display: block;
    width: 54px;
    height: 1px;
    background: rgba(255, 255, 255, .6);
    margin: 0 auto 18px;
}

/* ── Panneau formulaire / contenu (droite) ── */
.elx-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
    position: relative;
}

.elx-form__inner { width: 100%; max-width: 380px; }

.elx-form h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 2.5rem;
    color: var(--elx-mid);
    margin: 0 0 4px;
}

.elx-form .subtitle { font-size: .92rem; color: #8a7790; margin: 0 0 30px; }

.elx-field { position: relative; margin-bottom: 16px; }

.elx-field i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #b79cc0;
    font-size: 1.05rem;
}

.elx-field input {
    width: 100%;
    padding: 14px 16px 14px 46px;
    border: 1.5px solid #e7dced;
    border-radius: 12px;
    background: #fff;
    font-size: .95rem;
    font-family: inherit;
    color: var(--elx-ink);
    transition: border-color .2s, box-shadow .2s;
}

.elx-field input::placeholder { color: #b8a6c0; }

.elx-field input:focus {
    outline: none;
    border-color: var(--elx-fuchsia);
    box-shadow: 0 0 0 4px rgba(198, 75, 140, .12);
}

.elx-btn {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 14px;
    margin-top: 8px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(135deg, var(--elx-mid), var(--elx-fuchsia));
    box-shadow: 0 8px 22px rgba(156, 44, 138, .28);
    transition: transform .15s, box-shadow .2s, filter .2s;
}

.elx-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(156, 44, 138, .36);
    filter: brightness(1.04);
}

.elx-forgot {
    display: block;
    text-align: center;
    margin-top: 22px;
    font-size: .85rem;
    color: var(--elx-mid);
    text-decoration: none;
    transition: color .2s;
}

.elx-forgot:hover { color: var(--elx-fuchsia); text-decoration: underline; }

.elx-alert {
    border-radius: 10px;
    padding: 11px 14px;
    font-size: .87rem;
    margin-bottom: 18px;
    border: 1px solid transparent;
}

.elx-alert--error { background: #fde8ef; border-color: #f5c2d5; color: #a3245a; }
.elx-alert--ok { background: #e7f6ec; border-color: #bfe5cc; color: #176c3a; }

/* ── Page de résultat (vérification d'email) ── */
.elx-result__icon { font-size: 3.4rem; line-height: 1; margin-bottom: 12px; }
.elx-result__icon--ok { color: #2fa66a; }
.elx-result__icon--fail { color: #d6336c; }

.elx-foot {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .72rem;
    color: #b3a2bb;
    letter-spacing: .3px;
}

/* ── Responsive ── */
@media (max-width: 880px) {
    .elx-split { flex-direction: column; }
    .elx-brand {
        flex: none;
        min-height: 270px;
        clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }
    .elx-brand__inner { padding: 40px 24px; }
    .elx-brand__logo { width: 140px; margin-bottom: 22px; }
    .elx-form { padding: 36px 22px 64px; }
    .elx-foot { position: static; margin-top: 30px; }
}