/* Page de connexion : le formulaire seul, au centre ; logo, lettres et bougainvillier en filigrane derrière. */
.connexion {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem var(--gutter);
    overflow: hidden;
    isolation: isolate;
}

.connexion-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.connexion-fond .lettres-fond span { color: rgba(255, 255, 255, .03); }
.connexion-fond .lettres-fond span:nth-child(even) { color: rgba(211, 17, 127, .07); }
.connexion-fleur {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(92vmin, 820px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(-8deg);
    background: url("/assets/img/bougainvillier.webp") center / contain no-repeat;
    opacity: .14;
    filter: saturate(.9);
}
/* Halo noir derrière le formulaire : la fleur reste visible autour, le formulaire reste lisible */
.connexion::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(560px, 120vw);
    height: min(640px, 110vh);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    z-index: -1;
    pointer-events: none;
}

.connexion-form { width: min(380px, 100%); display: grid; gap: 1.25rem; }
.connexion-logo { width: 120px; height: auto; margin: 0 auto .6rem; }

.mdp { position: relative; }
.mdp .input { padding-right: 3.2rem; }
.mdp .icon-btn { position: absolute; right: 2px; top: 2px; }
.case { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--smoke); cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--magenta); }
.connexion-erreur { padding: .75rem 1rem; border: 1px solid rgba(229, 72, 77, .5); border-radius: var(--radius); background: rgba(229, 72, 77, .1); font-size: .92rem; color: var(--paper); }
.connexion-form .btn { width: 100%; min-height: 52px; margin-top: .2rem; }

@media (max-width: 640px) {
    .connexion-logo { width: 100px; }
    .connexion-fleur { width: 130vmin; opacity: .12; }
}