@charset "utf-8";
/* ============================================================
   ÉCRAN DE CONNEXION — charte V5 (maquette 01)

   Deux panneaux : 52 % pour la marque sur fond de rail, 48 % pour le
   formulaire. Sous 980 px, ils s'empilent.

   TROIS PIÈGES DE CETTE PAGE :

   1. Elle est servie SANS le chrome, par la branche `#app` de template.php.
      Aucune des règles de v5-shell.css ne s'y applique — la bascule de thème,
      en particulier, est rhabillée ici.
   2. `common.css` pose `* { color: var(--color--text) }` : sur le panneau de
      marque, où tout doit être blanc, il faut viser les éléments un par un.
   3. `html, body { overflow: hidden }` de common.css : la page ne défile pas.
      Le panneau de droite porte donc son propre défilement, sinon le formulaire
      sort de l'écran sur un portable de 13 pouces.
   ============================================================ */

/* Le fond de page : plus d'image, la charte peint au jeton. */
body > #app.login {
    background: var(--bg);
    overflow: hidden;
    height: 100vh;
}
body > #app.login > #main {
    height: 100vh;
}

.zlog {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
}

/* ---------- 1. Le panneau de marque ---------- */

.zlog_marque {
    position: relative;
    flex: 1 1 52%;
    min-width: 0;
    overflow: hidden;
    background: var(--rail);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 56px;
}

/* Trois halos flous, en dérive lente. Dans un calque à part : posés sur le
   conteneur de contenu, leur `overflow:hidden` emporterait la mise en page. */
.zlog_halos {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.zlog_halos::before,
.zlog_halos::after,
.zlog_marque::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.zlog_halos::before {
    top: -180px; left: -80px;
    width: 680px; height: 520px;
    background: rgba(61, 139, 255, .34); /* v5-delibere: halo du panneau de marque, pose sur --rail — sombre dans les DEUX themes, donc valeurs sombres de la charte */
    filter: blur(140px);
    animation: zDrift 22s ease-in-out infinite;
}
.zlog_halos::after {
    bottom: -220px; right: -120px;
    width: 620px; height: 520px;
    background: rgba(169, 140, 255, .28); /* v5-delibere: idem */
    filter: blur(150px);
    animation: zDrift 28s ease-in-out infinite reverse;
}
.zlog_marque::before {
    top: 40%; left: 36%;
    width: 420px; height: 340px;
    background: rgba(53, 212, 53, .16); /* v5-delibere: idem */
    filter: blur(150px);
    animation: zDrift 34s ease-in-out infinite;
    z-index: 0;
}

@keyframes zDrift {
    0%   { transform: none; }
    50%  { transform: translate3d(24px, -18px, 0) scale(1.06); }
    100% { transform: none; }
}
/* Trois halos de 500 px en `blur(150px)` qui bougent en boucle, c'est un coût
   de composition permanent — et un déclencheur de gêne pour qui a réglé son
   système sur « réduire les animations ». On les fige alors. */
@media (prefers-reduced-motion: reduce) {
    .zlog_halos::before,
    .zlog_halos::after,
    .zlog_marque::before { animation: none; }
}

.zlog_brand,
.zlog_accroche,
.zlog_pied { position: relative; z-index: 1; }

.zlog_brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.zlog_mono {
    /* 52 + les filets de 1 px : la maquette compte en content-box. */
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 15px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.zlog_mono > img { width: 30px; height: auto; display: block; }

.zlog_brand_nom {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #FFFFFF;
}
.zlog_brand_bas {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}
.zlog_brand_bas > span:first-child {
    font-size: 11.5px;
    color: color-mix(in srgb, var(--on-rail-mid) 90%, transparent);
}
.zlog_v {
    height: 18px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .82);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
}

.zlog_accroche { max-width: 520px; }
.zlog_accroche > h1 {
    margin: 0;
    font-size: 38px;
    font-weight: 300;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: #FFFFFF;
    text-wrap: pretty;
}
.zlog_accroche > h1 > strong { font-weight: 700; color: #FFFFFF; }
.zlog_accroche > p {
    margin: 18px 0 0;
    max-width: 440px;
    font-size: 13.5px;
    line-height: 1.65;
    color: color-mix(in srgb, var(--on-rail-mid) 92%, transparent);
    text-wrap: pretty;
}

.zlog_pied {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.zlog_etat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: color-mix(in srgb, var(--on-rail-mid) 90%, transparent);
}
.zlog_pastille {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35D435; /* v5-delibere: pastille « en ligne » sur le panneau de marque, toujours sombre */
    box-shadow: 0 0 0 3px rgba(53, 212, 53, .2); /* v5-delibere: idem */
}
.zlog_legal { font-size: 11.5px; color: color-mix(in srgb, var(--on-rail-mid) 60%, transparent); }

/* ---------- 2. Le panneau de formulaire ---------- */

.zlog_panneau {
    flex: 1 1 48%;
    min-width: 440px;
    display: flex;
    flex-direction: column;
    padding: 28px 40px 44px;
    overflow-y: auto;
}

/* La bascule de thème, DANS LE FLUX et alignée à droite (charte). Même balisage
   que celle de la barre du haut, mais v5-shell.css ne descend pas jusqu'ici :
   cette page n'a pas de `.block_top`. */
.zlog_panneau > .theme_switch {
    align-self: flex-end;
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--chip);
    /* Toute la capsule bascule le thème (maquette : onClick sur le conteneur). */
    cursor: pointer;
}
.zlog_panneau > .theme_switch > .pill {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-dim);
    font: 600 12.5px var(--font);
    cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.zlog_panneau > .theme_switch > .pill > svg { flex: none; width: 14px; height: 14px; display: block; color: inherit; }
.zlog_panneau > .theme_switch > .pill > span { color: inherit; font-size: 12.5px; }
.zlog_panneau > .theme_switch > .pill.is_on {
    background: var(--surface);
    color: var(--text);
}
/* Sombre : la pastille active est en --surface2 (la maquette), pas --surface. */
:root[data-zt="dark"] .zlog_panneau > .theme_switch > .pill.is_on { background: var(--surface2); }

.zlog_centre {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 24px;
}
.zlog_carte {
    width: 100%;
    max-width: 412px;
    animation: zRise .4s var(--ease) both;
}

.zlog_titre {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text);
}
.zlog_v.accent {
    height: 21px;
    padding: 0 9px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 10.5px;
}
.zlog_sous_titre {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-mid);
    text-wrap: pretty;
}

/* ---------- 3. Le formulaire ---------- */

.zlog_form,
.zlog_vue[data-vue="forgot"],
.zlog_vue[data-vue="sent"] {
    display: flex;
    flex-direction: column;
}
.zlog_form { margin-top: 28px; }

/* Bannière d'erreur en tête du formulaire (maquette : violet, jamais rouge —
   l'erreur de connexion n'est pas une alerte). Rendue par login-v5.js. */
.zlog_erreur {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--violet-soft);
    border: 1px solid var(--violet);
    animation: zPopIn .16s ease-out both;
}
.zlog_erreur[hidden] { display: none; }
.zlog_erreur > svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.zlog_erreur > span {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
    text-wrap: pretty;
}

.zlog_label {
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.zlog_vue[data-vue="forgot"] .zlog_label { margin-top: 28px; }
/* Vue « forgot » : 16 px entre le champ et le bouton (gap de la colonne), puis
   20 px (gap 16 + 4) jusqu'au lien de retour. Vue « sent » : 18 px. */
.zlog_vue[data-vue="forgot"] .zlog_submit { margin-top: 16px; }
.zlog_vue[data-vue="forgot"] .zlog_retour { margin-top: 20px; }
.zlog_vue[data-vue="sent"] .zlog_submit { margin-top: 18px; }

/* Le champ : c'est le CONTENEUR qui porte la bordure et le fond, l'input est
   transparent dedans. C'est ce qui permet de loger l'icône à gauche et l'œil à
   droite sans bricoler de padding. */
.zlog_champ {
    display: flex;
    align-items: center;
    gap: 11px;
    /* 48 + les filets : la maquette compte en content-box, elle rend 50. */
    height: 50px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color .16s var(--ease);
}
.zlog_champ:focus-within { border-color: var(--accent); }
/* Champ en erreur : le filet passe au violet (bannière .zlog_erreur). */
.zlog_champ.is_erreur { border-color: var(--violet); }
.zlog_champ > i {
    flex: none;
    width: 16px;
    text-align: center;
    font-size: 16px;
    color: var(--text-dim);
    transition: color .16s var(--ease);
}
.zlog_champ:focus-within > i { color: var(--accent); }
/* Glyphes SVG de la maquette (enveloppe 16, cadenas 16) : le trait suit la
   couleur du champ (repos --text-dim, focus --accent). */
.zlog_champ > svg {
    flex: none;
    width: 16px;
    height: 16px;
    display: block;
    color: var(--text-dim);
    transition: color .16s var(--ease);
}
.zlog_champ:focus-within > svg { color: var(--accent); }
/* `common.css` pose `* { color }` : stroke="currentColor" se résoudrait sur
   l'encre pleine des enfants du <svg> au lieu de celle du <svg>. */
.zlog svg * { color: inherit; }

/* `formulaire.css` reprend TOUS les <input> en (0,1,1) et termine ses
   déclarations par `!important` : sans `!important` ici, l'input reprend son
   fond, sa bordure et sa hauteur, et ressort d'un cadre qu'il devrait remplir. */
/* `body.login` DEVANT, ET CE N'EST PAS DU ZÈLE. v5-components.css reprend tous
   les champs en (0,2,2) et en `!important` ; `.zlog_champ > input` ne pèse que
   (0,2,1) et perdait, `!important` compris. Avec le préfixe on égalise, et
   c'est le RANG qui tranche : les CSS de page sont chargés après les
   composants. */
body.login .zlog_champ > input,
body.login .zlog_champ > input.text,
body.login .zlog_champ > input.password {
    flex: 1;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    /* Le retrait natif d'un <input> (1px 2px) : la maquette ne le remet pas à 0. */
    padding: 1px 2px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 13.5px;
    color: var(--text) !important;
}
body.login .zlog_champ > input::placeholder { color: var(--text-dim); opacity: 1; }
/* Mot de passe : l'interlettrage tient aussi une fois révélé (type=text). */
.zlog_champ > input[type="password"],
.zlog_champ > input[data-revele] { letter-spacing: .04em; }

.zlog_oeil {
    flex: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-dim);
    transition: background .14s var(--ease), color .14s var(--ease);
}
/* `common.css` pose `* { color }` : sans ceci le glyphe garde l'encre pleine et
   ignore l'état de son conteneur (repos --text-dim, survol --accent). */
.zlog_oeil > svg { flex: none; width: 15px; height: 15px; display: block; color: inherit; }
.zlog_oeil:hover { background: var(--chip); color: var(--accent); }

.zlog_submit {
    height: 50px;
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    background: var(--accent);
    color: var(--on-accent);
    font: 600 13.5px var(--font);
    cursor: pointer;
    transition: transform .12s var(--ease), box-shadow .16s var(--ease);
}
.zlog_submit > span { color: inherit; font-size: 13.5px; }
.zlog_submit > svg { flex: none; width: 15px; height: 15px; display: block; color: inherit; }
/* La maquette ne pose AUCUNE ombre au survol : le seul retour est le léger soulèvement,
   et seul le bouton de connexion le porte (les boutons pleins des vues forgot / sent
   n'ont ni survol ni appui dans la maquette). */
.zlog_form .zlog_submit:hover { transform: translateY(-1px); }
.zlog_form .zlog_submit:active { transform: none; }
/* Pendant le chargement la maquette garde le curseur main (le bouton n'est qu'un div). */
.zlog_submit[disabled] { background: var(--neutral); cursor: pointer; transform: none; box-shadow: none; }

.zlog_retour {
    margin-top: 14px;
    /* Le bouton natif porte `padding: 1px 6px` : le texte était décalé de 6 px. */
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-mid);
    font: 600 12.5px var(--font);
    line-height: 18px;
    cursor: pointer;
}
/* Aucune règle de survol : la maquette garde --text-mid sur « Revenir à la connexion ». */
/* Étape 2 : le lien « Mot de passe oublié ? » est dans la rangée du libellé du
   champ de mot de passe (login-form.php). Le second, sous le bouton, ne sert qu'à
   l'étape 1, où le champ n'existe pas encore. */
.zlog_form:has(#lost_password) + .zlog_retour { display: none; }

/* ---------- 4. Ce que reload/login-form.php injecte ---------- */
/* Le bloc `#login_next_step` reçoit le champ de mot de passe de l'étape 2, ou
   le formulaire de création de l'étape 3. Il n'existe pas au chargement : ces
   règles ne servent qu'après la validation de l'e-mail. */

#login_next_step:empty { display: none; }
#login_next_step {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    animation: zRise .26s var(--ease) both;
}
/* Rangée « MOT DE PASSE ……… Mot de passe oublié ? » de la maquette. */
#login_next_step .zlog_rangee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
#login_next_step .zlog_rangee > .zlog_label { margin-bottom: 0; }
#login_next_step .lost_password {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}
#login_next_step .title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
}
#login_next_step .field { margin-bottom: 12px; }
#login_next_step .verif_pass {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-dim);
}
#login_next_step .verif_pass span { color: var(--text-mid); font-weight: 600; }

/* ---------- 5. Encarts et pied ---------- */

.zlog_rappel,
.zlog_confirme {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 11.5px;
    line-height: 1.5;
    text-wrap: pretty;
}
.zlog_rappel {
    /* maquette : l'icône est CENTRÉE sur les deux lignes ; 28 px au-dessus
       (colonne gap 16 + margin-top 12) ; gap 9. */
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    background: var(--surface2);
    border: 1px solid var(--line-soft);
    color: var(--text-dim);
}
.zlog_rappel > svg, .zlog_rappel > span { color: inherit; }
.zlog_rappel > svg { flex: none; width: 14px; height: 14px; display: block; }
.zlog_confirme {
    gap: 12px;
    margin-top: 28px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--aqua-soft);
    border: 1px solid var(--aqua);
    font-size: 12.5px;
    color: var(--text);
}
.zlog_confirme > svg { flex: none; width: 17px; height: 17px; display: block; color: var(--aqua-ink); margin-top: 1px; }
.zlog_confirme > span { color: var(--text); font-size: inherit; line-height: 1.55; }

.zlog_liens {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
}
/* Pas d'état de survol : dans la maquette le style en ligne de ces liens bat
   `a:hover`, ils ne changent donc jamais de couleur. */
.zlog_liens > a { font-size: 11.5px; color: var(--text-dim); }
.zlog_point {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--line);
}

/* ---------- 6. Sous 980 px ---------- */
/* La charte conçoit à 1 440 et exige 980 au minimum. En dessous, le panneau de
   marque passe au-dessus du formulaire et perd son accroche de 38 px — sur un
   écran de cette largeur, elle mangerait toute la hauteur utile. */
@media (max-width: 979.98px) {
    .zlog { flex-direction: column; }
    .zlog_marque { flex: none; padding: 24px 24px 28px; }
    .zlog_accroche { display: none; }
    .zlog_panneau { min-width: 0; padding: 20px 24px 32px; }
}

/* Le formulaire de première connexion (étape 3) garde son balisage
   `.field > .input > input + i`, avec sa validation en direct. On lui donne la
   forme du champ V5 plutôt que de réécrire son script. */
#login_next_step .field > .input {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 50px; /* même gabarit que .zlog_champ */
    padding: 0 14px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color .16s var(--ease);
}
#login_next_step .field > .input:focus-within { border-color: var(--accent); }
body.login #login_next_step .field > .input > input {
    flex: 1;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1px 2px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 13.5px;
    color: var(--text) !important;
}
#login_next_step .field > .input > i {
    flex: none;
    font-size: 15px;
    color: var(--text-dim);
    cursor: pointer;
}
#login_next_step .field > .input > i:hover { color: var(--accent); }

/* ---------- 7. Deux corrections de cascade ---------- */

/* `[hidden]` est une règle du NAVIGATEUR, à (0,1,0). Les sélecteurs de vue plus
   haut pèsent (0,2,0) et la battaient : les trois vues s'affichaient empilées.
   On rend l'attribut prioritaire plutôt que d'affaiblir les sélecteurs, parce
   que c'est lui qui porte l'état, et que le JS ne manipule que lui. */
.zlog_vue[hidden] { display: none !important; }

/* `common.css` pose `* { font-size: 13px }` : le `<strong>` de l'accroche
   n'hérite donc PAS des 38 px de son titre, il repasse à 13. Même cause pour
   les `<span>` du bas de marque. */
.zlog_accroche > h1 > strong { font-size: inherit; line-height: inherit; }
.zlog_brand_bas > span,
.zlog_etat,
.zlog_legal,
.zlog_liens > a { font-size: 11.5px; }
.zlog_titre { font-size: 26px; }
.zlog_titre > .zlog_v { font-size: 10.5px; }

/* Le repère de focus vit sur le CONTENEUR, pas sur l'input : c'est lui qu'on
   voit. On ne supprime donc pas l'indicateur — on le déplace sur le filet, qui
   passe à --accent (maquette : filet + icône, aucun halo). Un `outline:none` sec
   sur l'input, sans rien à la place, rendrait le formulaire inutilisable sans
   souris. */
body.login .zlog_champ:focus-within,
body.login #login_next_step .field > .input:focus-within {
    border-color: var(--accent);
}
body.login .zlog_champ > input:focus-visible,
body.login #login_next_step .field > .input > input:focus-visible {
    outline: none;
}

/* ---------- Mesures de la maquette 01 (2026-09-23) ----------
   LA SÉPARATION TOMBE À 1 011, PAS À 998. Le prototype compte ses paddings en
   `content-box` : 52 % / 48 % du CONTENU, padding en sus, puis rétrécissement
   proportionnel. En `border-box` (réglage global de la Station) on tombait sur un
   52 / 48 exact, et tout le formulaire, centré dans son panneau, glissait de 6 px.
   Et deux <span> retombaient aux 13 px de common.css : la pastille « V5 » du logo
   (10 px) et le texte de l'encart « Accès réservé » (11,5 px). */
.zlog_marque,
.zlog_panneau { box-sizing: content-box; }
.zlog_brand_bas > .zlog_v { font-size: 10px; }
.zlog_rappel > span { font-size: inherit; }
.zlog_sent_mail { font-size: inherit; color: inherit; overflow-wrap: anywhere; }