/* ===========================================================================
   Écrans d'authentification Liberty — style "verre dépoli" (glassmorphism)
   Fond vert profond animé de vagues lumineuses, carte translucide floutée,
   champs arrondis, bouton or. 100 % CSS : aucune image à charger (3G-léger).
   ======================================================================== */

:root {
    --vert-nuit:   #071B15;
    --vert-liberty:#0E2A23;
    --vert-clair:  #1E4A3D;
    --or:          #E7B84B;
    --or-clair:    #F5D284;
    --texte-clair: #EAF2EE;
    --texte-doux:  rgba(234, 242, 238, .68);
}

/* ---- Scène ------------------------------------------------------------- */
.auth-corps {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: radial-gradient(120% 90% at 15% 0%, var(--vert-liberty) 0%, var(--vert-nuit) 55%, #04120D 100%);
    color: var(--texte-clair);
    overflow-x: hidden;
    position: relative;
}

.auth-scene {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.5rem 1rem 2.5rem;
}

/* ---- Vagues lumineuses du fond ----------------------------------------- */
.auth-fond { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.auth-fond .vague {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
}
.vague-1 {
    width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax;
    background: radial-gradient(circle at 30% 30%, var(--vert-clair), transparent 65%);
}
.vague-2 {
    width: 55vmax; height: 55vmax; right: -20vmax; bottom: -18vmax;
    background: radial-gradient(circle at 60% 60%, rgba(231, 184, 75, .38), transparent 60%);
}
.vague-3 {
    width: 38vmax; height: 38vmax; right: 8vmax; top: 12vmax;
    background: radial-gradient(circle at 50% 50%, rgba(30, 74, 61, .9), transparent 62%);
    opacity: .4;
}

/* ---- Barre haute discrète ---------------------------------------------- */
.auth-barre {
    position: absolute;
    z-index: 3;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}
.auth-retour {
    color: var(--texte-doux);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s ease;
}
.auth-retour:hover { color: var(--or-clair); }

/* ---- Carte en verre ----------------------------------------------------- */
.auth-carte {
    width: 100%;
    max-width: 430px;
    padding: 2.25rem 1.75rem 2rem;
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 100%);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
}
/* Repli si le flou n'est pas supporté (vieux navigateurs) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .auth-carte { background: rgba(10, 34, 27, .92); }
}
.auth-carte--large { max-width: 560px; }

/* ---- Marque ------------------------------------------------------------- */
.auth-marque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
}
.auth-logo {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    font-size: 1.5rem;
    color: var(--vert-nuit);
    background: linear-gradient(145deg, var(--or-clair), var(--or));
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(231, 184, 75, .35);
}
.auth-nom {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--texte-clair);
}

/* ---- Titres ------------------------------------------------------------- */
.auth-titre {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    text-align: center;
    color: #fff;
    font-size: 1.45rem;
    margin-bottom: .35rem;
}
.auth-sous-titre {
    text-align: center;
    color: var(--texte-doux);
    font-size: .92rem;
    margin-bottom: 1.6rem;
}

/* ---- Champs ------------------------------------------------------------- */
.auth-carte .form-label {
    color: var(--texte-doux);
    font-size: .85rem;
    margin-bottom: .35rem;
}
.auth-carte .form-control,
.auth-carte .form-select {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    color: var(--texte-clair);
    padding: .7rem .95rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-carte .form-control::placeholder { color: rgba(234, 242, 238, .35); }
.auth-carte .form-control:focus,
.auth-carte .form-select:focus {
    background: rgba(255, 255, 255, .10);
    border-color: var(--or);
    box-shadow: 0 0 0 .22rem rgba(231, 184, 75, .18);
    color: #fff;
}
.auth-carte .form-select option { color: #14332A; background: #fff; }
.auth-carte .form-text { color: rgba(234, 242, 238, .5); font-size: .78rem; }
.auth-carte .text-danger { color: #FF9E9E !important; }

/* Autofill : éviter le flash blanc de Chrome sur fond sombre */
.auth-carte input:-webkit-autofill,
.auth-carte input:-webkit-autofill:hover,
.auth-carte input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--texte-clair);
    -webkit-box-shadow: 0 0 0 1000px rgba(20, 51, 42, .92) inset;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--texte-clair);
}

/* ---- Choix du rôle (inscription) : deux pastilles sélectionnables ------- */
.choix-role { display: grid; gap: .6rem; }
.choix-role input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.choix-role .option-role {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .05);
    color: var(--texte-clair);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.choix-role .option-role i { font-size: 1.15rem; color: var(--or-clair); }
.choix-role input[type="radio"]:checked + .option-role {
    border-color: var(--or);
    background: rgba(231, 184, 75, .13);
    box-shadow: 0 0 0 .18rem rgba(231, 184, 75, .15);
}
.choix-role input[type="radio"]:focus-visible + .option-role {
    outline: 2px solid var(--or-clair);
    outline-offset: 2px;
}

/* ---- Bouton principal or ------------------------------------------------ */
.btn-auth {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: .8rem 1rem;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--vert-nuit);
    background: linear-gradient(160deg, var(--or-clair) 0%, var(--or) 100%);
    box-shadow: 0 12px 30px rgba(231, 184, 75, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-auth:hover  { filter: brightness(1.05); transform: translateY(-1px);
                   box-shadow: 0 16px 34px rgba(231, 184, 75, .42), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-auth:active { transform: translateY(0); }

/* ---- Liens -------------------------------------------------------------- */
.auth-lien {
    color: var(--or-clair);
    text-decoration: none;
    font-weight: 600;
}
.auth-lien:hover { color: #fff; text-decoration: underline; }
.auth-pied {
    text-align: center;
    color: var(--texte-doux);
    font-size: .9rem;
}

/* ---- Alertes sur verre --------------------------------------------------- */
.alerte-verre {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--texte-clair);
    border-radius: 14px;
}
.alerte-verre.alert-danger  { border-color: rgba(255, 120, 120, .55); }
.alerte-verre.alert-success { border-color: rgba(120, 220, 160, .55); }

/* ---- Accessibilité : réduire les animations si demandé ------------------ */
@media (prefers-reduced-motion: reduce) {
    .btn-auth { transition: none; }
}

/* ---- Petits écrans ------------------------------------------------------- */
@media (max-width: 400px) {
    .auth-carte { padding: 1.8rem 1.15rem 1.6rem; border-radius: 22px; }
}

/* ---- Œil afficher/masquer le mot de passe -------------------------------- */
.groupe-mdp { position: relative; }
.groupe-mdp .form-control { padding-right: 3rem; }
.basc-mdp {
    position: absolute;
    top: 50%; right: .55rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--texte-doux);
    font-size: 1.05rem;
    padding: .3rem .45rem;
    border-radius: 10px;
    line-height: 1;
    transition: color .15s ease, background .15s ease;
}
.basc-mdp:hover, .basc-mdp:focus-visible { color: var(--or-clair); background: rgba(255,255,255,.08); }

/* ---- Liste des règles du mot de passe (inscription) ----------------------- */
.liste-regles {
    list-style: none;
    padding: .35rem 0 0;
    margin: 0 0 .25rem;
    display: grid;
    gap: .22rem;
}
.liste-regles li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: var(--texte-doux);
    transition: color .15s ease;
}
.liste-regles li i { font-size: .85rem; color: rgba(234,242,238,.4); transition: color .15s ease; }
.liste-regles li.ok    { color: #9BE3B4; }
.liste-regles li.ok i  { color: #7ED89E; }
.liste-regles li.ko    { color: #FFB4B4; }
.liste-regles li.ko i  { color: #FF9E9E; }

/* Petite secousse quand on tente de soumettre un mot de passe invalide */
@keyframes secousse {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}
.secouer { animation: secousse .18s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .secouer { animation: none; } }

/* ---- Liens legaux sous la carte ------------------------------------------ */
.auth-liens-legaux {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 0 1rem 1.5rem;
    margin-top: -1.5rem;
}
.auth-liens-legaux a {
    color: rgba(234, 242, 238, .45);
    font-size: .78rem;
    text-decoration: none;
}
.auth-liens-legaux a:hover { color: var(--or-clair); text-decoration: underline; }

/* ---- Case a cocher d'acceptation (inscription) ---------------------------- */
.acceptation-conditions { display: flex; align-items: flex-start; gap: .6rem; }
.acceptation-conditions .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem; height: 1.15rem;
    margin-top: .18rem;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .35);
}
.acceptation-conditions .form-check-input:checked {
    background-color: var(--or);
    border-color: var(--or);
}
.acceptation-conditions .form-check-input:focus {
    border-color: var(--or);
    box-shadow: 0 0 0 .18rem rgba(231, 184, 75, .18);
}
.acceptation-conditions label {
    color: var(--texte-doux);
    font-size: .85rem;
    line-height: 1.45;
}