/*
   Pages hors de l'application : connexion et parcours « mot de passe oublié » (RG-013, RG-016).
   Chargée après les feuilles du DS (ds/colors_and_type.css, ds/product.css) ; variables du DS seulement.
   Les tokens de marque par éditeur (--brand…) restent dans le style de chaque gabarit : ce sont des données.

   Sources (conception-ui 84882b7) : LinkEat.Maquettes/wwwroot/css/ecrans.css l. 107-133 (.cnx*, .mdp-*),
   LinkEat.DesignSystem/wwwroot/css/composants.css l. 230-241 (.le-auth-*, AuthTagHelper),
   2-Design System/maquettes/Lien expiré.html (pastille de 48 px, titre et texte groupés).
*/

/* Comme _Application : une vue autonome reprend la règle [hidden] et le box-sizing de la page. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; }

/*
   Classes .le-auth-* du paquet LinkEat.DesignSystem (composants.css) absentes de la livraison servie
   (wwwroot/css/ds/, 2026-10-09) : mêmes déclarations, à retirer au passage au paquet (LinkEatGo#44).
*/
.le-auth-body form { display: contents; }
.le-auth-head h1[tabindex]:focus-visible { outline: none; }
.le-auth a.le-btn { box-sizing: border-box; }
.le-auth-logo-name {
    font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4);
    font-weight: 600; color: var(--fg-1);
}
.le-auth-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-sunken); color: var(--fg-2);
}
.le-auth-icon--success { background: var(--success-50); color: var(--success-600); }
.le-auth-head--icon { display: flex; flex-direction: column; gap: var(--sp-2); }
.le-auth-head--icon p { margin: 0; }

/*
   Nouveau mot de passe (RG-013), ecrans.css l. 124-133 : bouton œil accolé au champ, règles cochées par le
   serveur (coche si respectée, rond vide sinon ; le rond de 13 px est la valeur de la maquette validée).
*/
.mdp-champ { display: flex; align-items: flex-end; gap: var(--sp-2); }
.mdp-champ > .le-field { flex: 1; min-width: 0; }
.mdp-regles-zone { display: contents; }
.mdp-regles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.mdp-regle {
    display: flex; align-items: center; gap: var(--sp-2);
    font: 400 var(--fs-small)/var(--lh-small) var(--font-text); color: var(--fg-muted);
}
.mdp-regle-icone { display: inline-flex; flex: none; }
.mdp-regle-rond { width: 13px; height: 13px; margin: 1.5px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: content-box; }
.mdp-regle--ok { color: var(--success-600); }

/*
   Connexion (RG-016), ecrans.css l. 107-121 : accroche de la maquette validée à gauche du formulaire, sous le
   formulaire sous 900 px (palier du DS, .le-auth-aside--below). Valeurs en pixels de la maquette remplacées par
   les variables du DS (56 px = --sp-7 + --sp-2). Le surtitre garde la classe DS .le-eyebrow--brand (spec, « Écartés »).
*/
.cnx .le-auth-aside {
    order: -1; background: var(--bg-sunken); color: var(--fg-1); justify-content: space-between;
    gap: var(--sp-6); padding: clamp(var(--sp-6), 5vw, calc(var(--sp-7) + var(--sp-2)));
    border-right: 1px solid var(--border-subtle);
}
.cnx .le-auth-main { background: var(--bg-0); }
.cnx .le-auth-card { border: 0; box-shadow: none; background: transparent; padding: 0; }
.cnx .le-auth-logo img { object-fit: contain; }
.cnx-accroche { max-width: 460px; margin-top: auto; margin-bottom: auto; }
.cnx-accroche .le-eyebrow { margin: 0 0 var(--sp-4); }
.cnx-titre {
    margin: 0 0 var(--sp-4); font: 600 clamp(var(--fs-h2), 3.4vw, var(--fs-h1))/1.2 var(--font-display);
    letter-spacing: -.02em; text-wrap: balance;
}
.cnx-titre strong { font-weight: 800; }
.cnx-texte { margin: 0; font: 400 var(--fs-body)/var(--lh-body) var(--font-text); }
.cnx-chiffres { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: 0; }
.cnx-chiffres dd { margin: 0; font: 800 var(--fs-h3)/var(--lh-h3) var(--font-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cnx-chiffres dt { font: 400 var(--fs-small)/var(--lh-small) var(--font-text); color: var(--ink-500); }
.cnx-oubli { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }

/* Visuel multiprise (gardé, Q5) entre l'accroche et les chiffres ; 200 px : hauteur minimale reprise de l'écran d'origine. */
.cnx-visuel { flex: 1 1 0; min-height: 200px; display: flex; justify-content: center; align-items: center; }
.cnx-visuel img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Au-dessus de 900 px, la page tient dans la hauteur d'écran, sans défilement (gardé, Q5). */
@media (min-width: 901px) {
    .cnx { height: 100vh; height: 100dvh; overflow: hidden; }
    .cnx .le-auth-aside, .cnx-visuel { min-height: 0; }
}
@media (max-width: 900px) {
    .cnx .le-auth-aside {
        order: 0; border-right: 0; border-top: 1px solid var(--border-subtle);
        padding: var(--sp-5) var(--sp-4);
    }
}