/* connection.css — Hees
   - Slide login/register (pattern qui marche)
   - Même hauteur login/register (stretch + card 100%)
   - Google button: dark + bordure rouge (pas de surpiqûre)
   - Sans !important
*/

/* ===== shell ===== */
.auth-shell{
    position: relative;
    width: min(980px, 100%);
    min-height: 680px;
    margin: 0 auto;
}

/* ===== panels ===== */
.auth-panel{
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: stretch; /* ✅ full height */
}

/* La carte prend toute la hauteur => login et register identiques */
.auth-card--panel{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* contenu centré verticalement */
    box-sizing: border-box;
}

/* états */
.auth-panel--signin{
    left: 0;
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition: transform .6s ease-in-out, opacity .6s ease-in-out;
}

.auth-panel--signup{
    left: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition: transform .6s ease-in-out, opacity .6s ease-in-out;
}

/* ===== form spacing ===== */
.auth-form{
    margin-top: 12px;
}

/* 2 cols prénom/nom */
.auth-two-cols{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ===== separator ===== */
.auth-sep{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 12px;
    margin: 14px 0 8px;
}
.auth-sep::before,
.auth-sep::after{
    content:"";
    height: 1px;
    flex: 1;
    background: rgba(0,0,0,.10);
}

/* ===== alert login ===== */
.auth-alert{
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 90, 110, .25);
    background: rgba(255, 90, 110, .10);
}

/* ===== switch text ===== */
.auth-switch{
    margin-top: 12px;
}

/* ===== Google button (Hees dark + border rouge) ===== */
.auth-social{
    margin-top: 12px;
}

.auth-social__btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 14px;
    padding: 12px 14px;
    box-sizing: border-box;
}

/* Ajoute cette classe dans le twig : auth-social__btn--dark */
.auth-social__btn--dark{
    background: rgba(0,0,0,.86);
    color: rgba(255,255,255,.92);

    /* ✅ border rouge “comme d’habitude” */
    border: 1px solid rgba(255, 65, 90, .55);

    font-weight: 900;
    letter-spacing: .01em;

    transition: transform .12s ease, filter .15s ease, box-shadow .18s ease, border-color .15s ease;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.auth-social__btn--dark:hover{
    transform: translateY(-1px);
    filter: brightness(1.03);
    border-color: rgba(255, 65, 90, .75);
    box-shadow: 0 16px 34px rgba(0,0,0,.16);
}

.auth-social__icon{
    width: 18px;
    height: 18px;
    display:block;
}

/* ===== Overlay (message à droite) ===== */
.auth-overlay{
    position:absolute;
    top:0;
    left:50%;
    width:50%;
    height:100%;
    overflow:hidden;
    z-index: 10;
    transition: transform .6s ease-in-out;
}

.auth-overlay__inner{
    position: relative;
    left: -100%;
    width: 200%;
    height: 100%;
    display:flex;
    transform: translateX(0);
    transition: transform .6s ease-in-out;

    /* fond foncé pour éviter de lire “derrière” */
    background: linear-gradient(135deg, rgba(10,10,10,.78), rgba(10,10,10,.60));
}

.auth-overlay__panel{
    width: 50%;
    height: 100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding: 0 44px;
    color: #fff;
    gap: .8rem;
}

.auth-overlay__title{
    margin: 0;
    font-size: 1.9rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.auth-overlay__text{
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: rgba(255,255,255,.85);
    max-width: 28ch;
}

/* ===== Toggle ===== */
.auth-shell.is-signup .auth-panel--signin{
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.auth-shell.is-signup .auth-panel--signup{
    transform: translateX(100%);
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
}

.auth-shell.is-signup .auth-overlay{
    transform: translateX(-100%);
}

.auth-shell.is-signup .auth-overlay__inner{
    transform: translateX(50%);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
    .auth-panel{ width: 100%; }
    .auth-overlay{ display:none; }
    .auth-two-cols{ grid-template-columns: 1fr; }

    .auth-panel--signin{ opacity: 1; pointer-events: auto; transform: none; }
    .auth-panel--signup{ opacity: 0; pointer-events: none; transform: none; }

    .auth-shell.is-signup .auth-panel--signin{ opacity: 0; pointer-events: none; }
    .auth-shell.is-signup .auth-panel--signup{ opacity: 1; pointer-events: auto; }
}