@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --bg: #000;
    --panel: #0c0c0c;
    --panel-soft: #0f0f0f;
    --text: #fff;
    --muted: #7d7d7d;
    --border: #2e2e2e;
    --border-soft: #323232;
    --accent: #6ea8fe;
}


.col-mid .pane {
    justify-content: center;
    align-items: center;
    display: flex;
    background: none;
    border: 0;
    padding-top: 0px;
    margin-top: -15px;
}


/* ====== Carte & typographie ====== */
.auth-card {
    width: min(680px, 100%);
    margin: 18px auto 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

.auth-title {
    margin: 0 0 14px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .4px;
}

/* ====== Champs ====== */
.auth-field {
    margin-bottom: 14px;
}

.auth-field label {
    display: block;
    margin: 0 0 8px;
    font-size: .95rem;
    color: #dcdcdc;
}

.auth-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    background: #0f0f0f;
    border: 1px solid var(--border);
    color: var(--text);
}

.auth-input::placeholder {
    color: #8c8c8c;
}

.auth-input:focus {
    outline: none;
    border-color: rgba(110, 168, 254, .45);
    box-shadow: inset 0 0 0 1px rgba(110, 168, 254, .22);
}

/* Messages */
.auth-msg {
    display: block;
    margin-top: 6px;
    font-size: .88rem;
    line-height: 1.2;
    color: #f87171;
}

.auth-msg.ok {
    color: #22c55e;
}

.auth-global {
    min-height: 1.2em;
    margin: 8px 0 10px;
    font-weight: 700;
    color: #f87171;
}

.auth-global.ok {
    color: #22c55e;
}

/* Conditions */
.auth-terms {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    margin: 6px 0 2px;
}

.auth-terms a {
    color: var(--accent);
}

/* ====== Bouton style “rail” (même esprit que ta side-menu) ====== */
.btn-rail {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(180deg, #171717, #101010);
    border: 1px solid rgba(110, 168, 254, .35);
    border-radius: 12px;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    cursor: pointer;
    position: relative;
}

.btn-rail i:first-child {
    width: 22px;
    text-align: center;
}

.btn-rail .chev {
    position: absolute;
    right: 14px;
    opacity: .85;
}

.btn-rail:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #1a1a1a, #0f0f0f);
    box-shadow: inset 0 0 0 1px rgba(110, 168, 254, .22);
}

.btn-rail:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Lien alternatif */
.auth-alt {
    margin: 10px 0 0;
}

.auth-alt a {
    color: var(--accent);
    text-decoration: none;
}

.auth-alt a:hover {
    text-decoration: underline;
}

/* === Version compacte (~ -20% en hauteur) === */
.auth-card{ padding:18px; }                 /* 22 -> 18 */
.auth-title{ margin-bottom:10px; }          /* 12 -> 10 */

.auth-field{ margin-bottom:11px; }          /* 14 -> 11 */
.auth-field label{ margin-bottom:5px; }     /* 6  -> 5  */

.auth-input{
  padding:10px 12px;                        /* 12x14 -> 10x12 */
}

.auth-msg{                                   /* messages sous champ */
  margin-top:4px;                            /* 6 -> 4  */
  font-size:.84rem;                          /* .88 -> .84 */
}
.auth-global{ margin:6px 0 8px; }            /* 8/10 -> 6/8 */

.auth-terms{
  gap:8px;                                   /* 10 -> 8  */
  margin:4px 0 0;                            /* 6 -> 4  */
}
.auth-check{ width:14px; height:14px; }      /* léger shrink */

.btn-rail{
  padding:10px 13px;                         /* 12x16 -> 10x13 */
}