.ConnexionPage {
    min-width: 0;
}

.ConnexionPage svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ConnexionDisposition {
    display: grid;
    min-height: 100svh;
    grid-template-columns: minmax(20rem, 42%) minmax(0, 1fr);
    background: var(--theme-couleur-fond);
}

.ConnexionIdentite {
    position: relative;
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.5rem);
    background: var(--theme-couleur-navigation);
    color: var(--theme-couleur-titre);
}

.ConnexionIdentite::before {
    position: absolute;
    inset: 0;
    background: url("../Index/Index_Fond_Ecran.jpeg") center / cover no-repeat;
    content: "";
    opacity: 0.12;
    pointer-events: none;
}

.ConnexionMarque,
.ConnexionMarqueMobile {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--theme-espace-3);
}

.ConnexionMarqueIcone {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--theme-couleur-focus);
    border-radius: var(--theme-rayon-md);
    background: rgb(255 255 255 / 58%);
    color: var(--theme-couleur-principale);
}

.ConnexionMarqueIcone svg {
    width: 1.45rem;
    height: 1.45rem;
}

.ConnexionMarqueTexte,
.ConnexionMarqueTexte strong,
.ConnexionMarqueTexte small {
    display: block;
    min-width: 0;
}

.ConnexionMarqueTexte strong,
.ConnexionMarqueMobile strong {
    color: var(--theme-couleur-titre);
    font-family: var(--theme-police-titre);
    font-size: var(--theme-taille-titre-sm);
    line-height: 1.1;
}

.ConnexionMarqueTexte small {
    margin-top: var(--theme-espace-1);
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-xs);
}

.ConnexionIntroduction {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    margin-block: var(--theme-espace-16);
}

.ConnexionSurtitre {
    display: flex;
    align-items: center;
    gap: var(--theme-espace-2);
    margin: 0 0 var(--theme-espace-5);
    color: var(--theme-couleur-principale);
    font-size: var(--theme-taille-texte-sm);
    font-weight: 800;
    text-transform: uppercase;
}

.ConnexionSurtitre svg {
    width: 1rem;
    height: 1rem;
}

.ConnexionAccroche {
    max-width: 31rem;
    margin: 0;
    color: var(--theme-couleur-titre);
    font-family: var(--theme-police-titre);
    font-size: 3.75rem;
    font-weight: 500;
    line-height: 1.03;
}

.ConnexionIntroduction > p:last-child {
    max-width: 29rem;
    margin: var(--theme-espace-6) 0 0;
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-lg);
    line-height: 1.7;
}

.ConnexionIdentite blockquote {
    position: relative;
    z-index: 1;
    max-width: 25rem;
    margin: 0;
    color: var(--theme-couleur-principale-survol);
    font-family: var(--theme-police-titre);
    font-size: var(--theme-taille-texte-md);
    font-style: italic;
    line-height: 1.55;
}

.ConnexionPanneau {
    display: grid;
    min-width: 0;
    min-height: 100svh;
    place-items: center;
    padding: var(--theme-espace-12) clamp(var(--theme-espace-6), 7vw, 7rem);
}

.ConnexionMarqueMobile {
    display: none;
}

.ConnexionContenu {
    width: min(100%, 30rem);
}

.ConnexionEntete {
    margin-bottom: var(--theme-espace-8);
}

.ConnexionEntete h1 {
    margin: 0;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    overflow-wrap: anywhere;
}

.ConnexionEntete > p:last-child {
    margin: var(--theme-espace-4) 0 0;
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-md);
    line-height: 1.6;
}

.FormulaireConnexion {
    display: grid;
    gap: var(--theme-espace-5);
}

.FormulaireConnexion .ThemeChamp {
    height: 3.25rem;
    font-size: 1rem;
    box-shadow: var(--theme-ombre-sm);
}

.FormulaireConnexion .ThemeChamp:-webkit-autofill,
.FormulaireConnexion .ThemeChamp:-webkit-autofill:hover,
.FormulaireConnexion .ThemeChamp:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--theme-couleur-texte);
    caret-color: var(--theme-couleur-texte);
    box-shadow: 0 0 0 1000px var(--theme-couleur-surface) inset;
}

.ConnexionLigneEtiquette {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--theme-espace-4);
}

.ConnexionLigneEtiquette a {
    flex: 0 0 auto;
    font-size: var(--theme-taille-texte-sm);
    font-weight: 700;
    text-decoration: none;
}

.ConnexionLigneEtiquette a:hover {
    text-decoration: underline;
}

.BoutonAfficherMotPasse:hover {
    background: var(--theme-couleur-principale-claire);
    color: var(--theme-couleur-principale-survol);
}

.IconeOeil {
    width: 1.2rem;
    height: 1.2rem;
}

.IconeOeilPupille {
    fill: currentColor;
    stroke: none;
}

.IconeOeilBarre {
    display: none;
}

.BoutonAfficherMotPasse.Actif .IconeOeilBarre {
    display: inline;
}

.BoutonConnexion {
    justify-content: center;
    min-height: 3.25rem;
    margin-top: var(--theme-espace-1);
    box-shadow: 0 10px 24px rgb(62 118 95 / 17%);
}

.ConnexionMessage {
    display: flex;
    align-items: flex-start;
}

.ConnexionMessageVide {
    display: none;
}

.ConnexionErreur {
    overflow-wrap: anywhere;
}

.ConnexionErreur .ThemeAlerteTexte {
    margin: 0;
}

.ConnexionPied {
    display: grid;
    gap: var(--theme-espace-2);
    margin-top: var(--theme-espace-8);
    border-top: 1px solid var(--theme-couleur-bordure-legere);
    padding-top: var(--theme-espace-6);
    color: var(--theme-couleur-texte-discret);
    font-size: var(--theme-taille-texte-sm);
    line-height: 1.55;
}

.ConnexionPied p {
    margin: 0;
}

.ConnexionPied a {
    font-weight: 700;
}

.RecuperationFormulaire {
    display: grid;
    gap: var(--theme-espace-5);
}

.RecuperationFormulaire .ThemeChamp {
    height: 3.25rem;
    font-size: 1rem;
    box-shadow: var(--theme-ombre-sm);
}

.RecuperationActions {
    display: grid;
    gap: var(--theme-espace-3);
}

.RecuperationActions .ThemeBouton {
    justify-content: center;
    min-height: 3.25rem;
}

.RecuperationMessage {
    margin-bottom: var(--theme-espace-6);
}

.RecuperationMessage .ThemeAlerteTexte {
    margin: 0;
}

.RecuperationEtapes {
    display: grid;
    gap: var(--theme-espace-3);
    margin: var(--theme-espace-6) 0 0;
    padding: 0;
    color: var(--theme-couleur-texte-secondaire);
    font-size: var(--theme-taille-texte-sm);
    line-height: 1.55;
    list-style-position: inside;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ConnexionMarqueIcone {
        background: rgb(255 255 255 / 6%);
    }

    :root:not([data-theme="light"]) .ConnexionIdentite::before {
        opacity: 0.04;
    }
}

:root[data-theme="dark"] .ConnexionMarqueIcone {
    background: rgb(255 255 255 / 6%);
}

:root[data-theme="dark"] .ConnexionIdentite::before {
    opacity: 0.04;
}

@media (max-width: 51.25rem) {
    .ConnexionDisposition {
        display: block;
    }

    .ConnexionIdentite {
        display: none;
    }

    .ConnexionPanneau {
        min-height: 100svh;
        align-content: start;
        padding: var(--theme-espace-5) var(--theme-espace-5) var(--theme-espace-10);
        border-top: var(--theme-espace-3) solid var(--theme-couleur-navigation);
    }

    .ConnexionMarqueMobile {
        display: flex;
        width: min(100%, 30rem);
        margin-bottom: clamp(3rem, 13vh, 6.5rem);
    }

    .ConnexionContenu {
        align-self: start;
    }

    .ConnexionEntete h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 26.25rem) {
    .ConnexionPanneau {
        padding-inline: var(--theme-espace-4);
    }

    .ConnexionMarqueMobile strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ConnexionLigneEtiquette {
        align-items: flex-start;
    }

    .ConnexionLigneEtiquette a {
        max-width: 9rem;
        text-align: right;
    }

    .ConnexionEntete h1 {
        font-size: 2rem;
    }
}

@media (max-height: 45rem) and (max-width: 51.25rem) {
    .ConnexionMarqueMobile {
        margin-bottom: var(--theme-espace-8);
    }

    .ConnexionEntete {
        margin-bottom: var(--theme-espace-6);
    }
}