/* ============================================================================
   Page de connexion — /login/
   ----------------------------------------------------------------------------
   Intégration du mockup de passation (LOGINPAGE_IMPLEMENTATION_HANDOFF.md).

   Tout est scopé sous `.vc-login*` : cette page retire la navigation publique
   et le pied de page, mais elle reste servie par `base.html`, donc par la même
   cascade que le reste du site (Bootstrap + style.css + forum/style.css). Un
   sélecteur d'élément nu ici repeindrait des pages qui n'ont rien à voir.

   ⚠️ Le fond de page N'EST PAS posé sur `body` : `website/css/surfaces.css` est
   la source unique des surfaces de fond du site (verrouillé par
   `website/tests/test_site_header.py:SurfaceHierarchyTests`). Le dégradé du
   mockup est donc peint par une couche dédiée `.vc-login-canvas`, rendue une
   fois par le gabarit.

   Les valeurs viennent des tokens `--vefa-*` (`website/css/tokens.css`), qui
   portent DÉJÀ les couleurs de la spec (primary, accent, textes slate,
   bordures). Les rares teintes du mockup sans token équivalent sont
   déclarées ici en tokens locaux, marquées `hex-ok` (échappatoire prévue par le
   hook pre-commit) : ce sont des valeurs de composition du visuel, pas des
   couleurs de marque à généraliser.
   ========================================================================== */

.vc-login-page {
    --login-story-background: linear-gradient(160deg, #0f6fae 0%, var(--vefa-primary) 67%, #5cb2e8 100%); /* hex-ok */
    /* Fond clair du panneau éditorial en pile mobile. */
    --login-story-background-mobile: linear-gradient(145deg, #eff6ff, #fff7ed); /* hex-ok */
    /* Anneau des pastilles décoratives : lu sur le dégradé, sans équivalent token. */
    --login-face-ring: #4aa3da; /* hex-ok */
    /* Gris slate-700 des libellés — plus soutenu que --vefa-text-muted (slate-600). */
    --login-label: #334155; /* hex-ok */

    --login-button-background: var(--vefa-gradient-cta);
    --login-card-shadow: 0 24px 70px rgba(15, 23, 42, .13);
    --login-button-shadow: 0 10px 24px rgba(52, 152, 219, .25);
    --login-header-height: 98px;
    --login-ease: 150ms cubic-bezier(.22, 1, .36, 1);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--vefa-text);
}

/* Couche de fond plein écran : les deux halos radiaux du mockup posés par-dessus
   le dégradé de marque déjà tokenisé (`--vefa-gradient-hero` vaut exactement la
   3e couche de la spec).

   `fixed` pour couvrir le viewport même quand la page défile (écran peu haut),
   `z-index: -1` pour rester sous tout le contenu sans créer de piège d'empilement.

   ⚠️ Le dégradé est déclaré ICI, pas via un token local de `.vc-login-page` :
   cette couche est un frère de l'en-tête, pas un descendant, et un token défini
   sur `.vc-login-page` s'y résolvait en `none` — fond de page absent, sans la
   moindre erreur (défaut attrapé en mesurant, pas en regardant). */
.vc-login-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 12%, rgba(52, 152, 219, .14), transparent 27%),
        radial-gradient(circle at 88% 82%, rgba(255, 64, 0, .10), transparent 24%),
        var(--vefa-gradient-hero);
}

.vc-login-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

/* ── En-tête minimal ─────────────────────────────────────────────────────── */

.vc-login-header {
    height: var(--login-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vefa-space-4);
}

.vc-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--vefa-text);
    text-decoration: none;
}

.vc-login-brand__mark {
    width: 47px;
    height: 42px;
    display: block;
    flex: none;
    object-fit: contain;
}

.vc-login-brand__word {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.vc-login-brand__vefa { color: var(--vefa-brand-vefa); }
.vc-login-brand__connect { color: var(--vefa-accent); }

.vc-login-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 var(--vefa-space-2);
    color: var(--vefa-text-muted);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    border-radius: var(--vefa-radius-sm);
    transition: color var(--login-ease);
}

.vc-login-back:hover,
.vc-login-back:focus-visible { color: var(--vefa-text); }

.vc-login-back__arrow {
    color: var(--vefa-primary);
    font-size: 16px;
    line-height: 1;
}

/* ── Zone centrale ───────────────────────────────────────────────────────── */

.vc-login {
    min-height: calc(100vh - var(--login-header-height));
    display: grid;
    place-items: center;
    padding: 18px 0 64px;
}

.vc-login__inner { width: 100%; }

/* Bandeau contextuel « Créez un compte pour suivre <programme> » (funnel
   follow) : conservé de la page précédente, re-habillé au nouveau langage. */
.vc-login__banner {
    display: flex;
    align-items: flex-start;
    gap: var(--vefa-space-3);
    margin-bottom: var(--vefa-space-5);
    padding: 16px 20px;
    border: 1px solid var(--vefa-border);
    border-left: 4px solid var(--vefa-accent);
    border-radius: var(--vefa-radius-lg);
    background: var(--vefa-surface-glass-strong);
    box-shadow: var(--vefa-shadow-sm);
}

.vc-login__banner-icon {
    margin-top: 2px;
    color: var(--vefa-accent);
}

.vc-login__banner strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.vc-login__banner span {
    display: block;
    margin-top: 4px;
    color: var(--vefa-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.vc-login__card {
    width: 100%;
    min-height: 650px;
    display: grid;
    grid-template-columns: 46% 54%;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 28px;
    background: var(--vefa-bg);
    box-shadow: var(--login-card-shadow);
}

/* ── Panneau éditorial ───────────────────────────────────────────────────── */

.vc-login__story {
    position: relative;
    overflow: hidden;
    padding: 66px 58px;
    background: var(--login-story-background);
    color: var(--vefa-text-on-dark);
}

.vc-login__story::before,
.vc-login__story::after {
    content: "";
    position: absolute;
    border-radius: var(--vefa-radius-pill);
    background: rgba(255, 255, 255, .09);
}

.vc-login__story::before { width: 360px; height: 360px; top: -170px; right: -180px; }
.vc-login__story::after { width: 250px; height: 250px; bottom: -140px; left: -90px; }

.vc-login__eyebrow {
    position: relative;
    z-index: 1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.vc-login__dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--vefa-accent);
    box-shadow: 0 0 0 6px rgba(255, 64, 0, .18);
}

.vc-login__promise {
    position: relative;
    z-index: 1;
    margin: 26px 0 18px;
    max-width: 410px;
    font-family: var(--title-font-family, Charter, "Bitstream Charter", "PT Serif", Georgia, serif);
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.03;
    letter-spacing: -.035em;
    font-weight: 650;
    color: var(--vefa-text-on-dark);
}

.vc-login__lede {
    position: relative;
    z-index: 1;
    max-width: 390px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-family: var(--body-font-family, "Source Serif Pro", Charter, Georgia, serif);
    font-size: 18px;
    line-height: 1.58;
}

.vc-login__proof {
    position: relative;
    z-index: 1;
    margin-top: 54px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .11);
    backdrop-filter: blur(8px);
}

.vc-login__faces { display: flex; align-items: center; }

.vc-login__face {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-right: -7px;
    border: 3px solid var(--login-face-ring);
    border-radius: 50%;
    color: var(--vefa-text);
    background: var(--vefa-bg);
    font-weight: 800;
    font-size: 11px;
}

.vc-login__face:nth-child(2) { background: #fff7ed; color: #c2410c; } /* hex-ok */
.vc-login__face:nth-child(3) { background: #ecfdf5; color: #047857; } /* hex-ok */

.vc-login__proof-title {
    display: block;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 700;
}

.vc-login__proof-text {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
    line-height: 1.45;
}

/* ── Panneau formulaire ──────────────────────────────────────────────────── */

.vc-login__form-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 62px 74px;
}

.vc-login__form-inner {
    width: 100%;
    max-width: 490px;
    margin: 0 auto;
}

.vc-login__title {
    margin: 0;
    font-family: var(--title-font-family, Charter, "Bitstream Charter", "PT Serif", Georgia, serif);
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -.025em;
    font-weight: 650;
    color: var(--vefa-text);
}

.vc-login__intro {
    margin: 10px 0 32px;
    color: var(--vefa-text-muted);
    font-size: 16px;
    line-height: 1.55;
}

.vc-login__label {
    display: block;
    margin: 0 0 9px;
    color: var(--login-label);
    font-weight: 700;
    font-size: 14px;
}

/* Le lien de récupération est affiché à droite du libellé « Mot de passe »
   (mockup) mais déclaré APRÈS le champ dans le DOM : l'ordre clavier imposé
   par la spec est identifiant → mot de passe → afficher/masquer → récupération
   → connexion. Une rangée flex label+lien le placerait avant le champ. */
.vc-login__field--password {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label forgot"
        "control control";
    align-items: center;
}

.vc-login__field--password .vc-login__label { grid-area: label; }
.vc-login__field--password .vc-login__control { grid-area: control; }

.vc-login__field--password .vc-login__forgot {
    grid-area: forgot;
    justify-self: end;
}

/* Cible tactile : la spec impose 44px de haut à toute action. Le lien est
   visuellement fin (20px) et aligné sur le libellé ; on agrandit sa ZONE de
   clic sans toucher à la mise en page, en compensant la hauteur par des marges
   négatives (mesuré : le champ reste à la même position qu'avec un lien nu). */
.vc-login__forgot {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -12px 0 -3px;
    color: var(--vefa-primary-dark);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.vc-login__forgot:hover { text-decoration: underline; }

.vc-login__field { margin-bottom: 19px; }
.vc-login__control { position: relative; }

.vc-login__input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    color: var(--vefa-text);
    background: var(--vefa-bg);
    border: 1px solid var(--vefa-border-strong);
    border-radius: var(--vefa-radius-md);
    outline: none;
    font: inherit;
    font-size: 16px;
    transition: border-color var(--login-ease), box-shadow var(--login-ease);
}

.vc-login__input::placeholder { color: var(--vefa-text-subtle); }
.vc-login__input:hover { border-color: var(--vefa-text-subtle); }

.vc-login__input:focus {
    border-color: var(--vefa-primary);
    box-shadow: 0 0 0 4px rgba(52, 152, 219, .13);
}

.vc-login__input:disabled {
    background: var(--vefa-bg-muted);
    color: var(--vefa-text-subtle);
    cursor: not-allowed;
}

.vc-login__input--password { padding-right: 52px; }

.vc-login__input[aria-invalid="true"] {
    border-color: var(--vefa-danger);
    box-shadow: 0 0 0 4px var(--vefa-danger-soft);
}

/* Bouton afficher / masquer le mot de passe. */
.vc-login__reveal {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--vefa-radius-sm);
    background: transparent;
    color: var(--vefa-text-subtle);
    cursor: pointer;
    transition: color var(--login-ease);
}

.vc-login__reveal:hover { color: var(--vefa-text-muted); }

/* ── Alerte serveur ──────────────────────────────────────────────────────── */

.vc-login__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 19px;
    padding: 12px 14px;
    border: 1px solid var(--vefa-danger);
    border-radius: var(--vefa-radius-md);
    background: var(--vefa-danger-soft);
    color: var(--vefa-danger);
    font-size: 14px;
    line-height: 1.45;
}

.vc-login__alert:focus-visible { outline: 3px solid var(--vefa-danger); outline-offset: 2px; }
.vc-login__alert--info { border-color: var(--vefa-primary); background: var(--vefa-primary-soft); color: var(--vefa-primary-darker); }
.vc-login__alert--success { border-color: var(--vefa-success); background: var(--vefa-success-soft); color: var(--vefa-success); }
.vc-login__alert-icon { margin-top: 2px; flex: none; }
.vc-login__alert-text { margin: 0; }
.vc-login__alert-text + .vc-login__alert-text { margin-top: 6px; }

/* ── Action principale ───────────────────────────────────────────────────── */

.vc-login__submit {
    width: 100%;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: var(--vefa-radius-md);
    color: var(--vefa-text-on-primary);
    background: var(--login-button-background);
    box-shadow: var(--login-button-shadow);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--login-ease), box-shadow var(--login-ease), background var(--login-ease);
}

.vc-login__submit:hover {
    background: linear-gradient(135deg, var(--vefa-primary-dark) 0%, var(--vefa-primary-darker) 100%);
    transform: translateY(-1px);
}

.vc-login__submit:active {
    transform: none;
    box-shadow: 0 4px 12px rgba(52, 152, 219, .2);
}

.vc-login__submit:disabled,
.vc-login__submit[aria-disabled="true"] {
    cursor: progress;
    opacity: .82;
    transform: none;
    box-shadow: none;
}

.vc-login__spinner {
    width: 16px;
    height: 16px;
    flex: none;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: var(--vefa-text-on-primary);
    border-radius: 50%;
    animation: vc-login-spin .7s linear infinite;
}

@keyframes vc-login-spin { to { transform: rotate(360deg); } }

/* ── Séparateur + fournisseurs ───────────────────────────────────────────── */

.vc-login__divider {
    display: flex;
    gap: 13px;
    align-items: center;
    margin: 26px 0 19px;
    color: var(--vefa-text-subtle);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.vc-login__divider::before,
.vc-login__divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--vefa-border);
}

.vc-login__socials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vc-login__social {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--login-label);
    background: var(--vefa-bg);
    border: 1px solid var(--vefa-border);
    border-radius: var(--vefa-radius-md);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: background var(--login-ease), border-color var(--login-ease);
}

.vc-login__social:hover {
    background: var(--vefa-bg-soft);
    border-color: var(--vefa-border-strong);
    color: var(--login-label);
}

.vc-login__social svg { width: 18px; height: 18px; flex: none; }

/* ── Bas de formulaire ───────────────────────────────────────────────────── */

.vc-login__signup {
    margin: 29px 0 0;
    text-align: center;
    color: var(--vefa-text-muted);
    font-size: 14px;
}

/* Même règle de cible tactile que le lien de récupération : le padding grandit
   la zone de clic, la marge négative annule son effet sur la hauteur de ligne. */
.vc-login__signup a,
.vc-login__help a {
    display: inline-block;
    padding: 14px 6px;
    margin: -14px -6px;
}

.vc-login__signup a {
    color: var(--vefa-accent);
    text-decoration: none;
    font-weight: 800;
}

.vc-login__signup a:hover { text-decoration: underline; }

/* Aide secondaire discrète : le backend ne distingue pas « compte non activé »
   d'un mot de passe faux (et ne doit pas le révéler), le lien de renvoi
   d'activation est donc proposé ici sans encombrer la vue par défaut. */
.vc-login__help {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--vefa-text-subtle);
}

.vc-login__help a {
    color: var(--vefa-text-muted);
    text-decoration: underline;
}

/* ── Focus clavier ───────────────────────────────────────────────────────── */

.vc-login-page a:focus-visible,
.vc-login-page button:focus-visible {
    outline: 3px solid var(--vefa-primary);
    outline-offset: 2px;
    border-radius: var(--vefa-radius-sm);
}

.vc-login__input:focus-visible { outline: none; }

/* ── Responsive ──────────────────────────────────────────────────────────────
   ⚠️ ÉCART ASSUMÉ À LA SPEC, sur une contradiction interne de celle-ci :
   § Responsive annonce « point de bascule : 760px », mais § Critères de
   validation exige « à 768 × 1024, la mise en page choisit la version colonne ».
   768 > 760 : les deux ne peuvent pas être vrais.

   Mesuré à 768px en deux colonnes : la colonne formulaire tombe à 236px de
   largeur utile, sous le plancher de 280px que la spec pose elle-même. La
   bascule est donc portée à 900px — les tablettes (768, 834) passent en colonne,
   les deux références visuelles (390 et 1440) sont inchangées.
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .vc-login-page { --login-header-height: 78px; }

    .vc-login-shell { width: min(calc(100% - 32px), 520px); }

    .vc-login-brand__mark { width: 38px; height: 34px; }
    .vc-login-brand__word { font-size: 20px; }

    /* Le libellé disparaît visuellement, seule la flèche reste — le nom
       accessible du lien reste porté par `aria-label` côté gabarit. */
    .vc-login-back__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .vc-login-back { gap: 0; min-width: 44px; justify-content: flex-end; }
    .vc-login-back__arrow { font-size: 22px; }

    .vc-login { align-items: start; padding: 12px 0 34px; min-height: 0; }

    .vc-login__card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 20px;
    }

    .vc-login__story {
        order: 2;
        padding: 28px 26px;
        background: var(--login-story-background-mobile);
        color: var(--vefa-text);
    }

    .vc-login__story::before,
    .vc-login__story::after,
    .vc-login__eyebrow,
    .vc-login__proof { display: none; }

    .vc-login__promise {
        margin: 0 0 9px;
        font-size: 25px;
        line-height: 1.15;
        color: var(--vefa-primary-darker);
    }

    .vc-login__lede {
        color: var(--vefa-text-muted);
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
    }

    .vc-login__form-side { order: 1; padding: 34px 26px 30px; }
    .vc-login__title { font-size: 32px; }
    .vc-login__intro { margin-bottom: 25px; font-size: 14px; }
    .vc-login__input { height: 50px; }
    .vc-login__socials { grid-template-columns: 1fr; }
    .vc-login__signup { margin-top: 23px; }
}

/* Bande intermédiaire : en deux colonnes sous 1180px, le conteneur n'a plus la
   largeur de référence et les paddings du mockup (74px) mangeraient le champ.
   On les resserre pour tenir une largeur utile confortable jusqu'à la taille de
   référence, où les valeurs du mockup reprennent la main. */
@media (min-width: 901px) and (max-width: 1120px) {
    .vc-login__form-side { padding: 48px 40px; }
    .vc-login__story { padding: 48px 40px; }
}

/* Très petits écrans. Budget contraint par la spec : « aucun élément du
   formulaire ne doit passer sous 280px de largeur utile sur un viewport de
   320px ». Il reste donc 40px à répartir entre la marge du conteneur, la
   bordure de la carte et le padding du panneau : 8px de marge par côté + 1px de
   bordure + 10px de padding = 282px utiles. ⚠️ La bordure de 1px de chaque côté
   compte — l'oublier ramenait la largeur utile à 278px, sous le plancher, sans
   rien casser de visible. */
@media (max-width: 360px) {
    .vc-login-shell { width: calc(100% - 16px); }
    .vc-login__form-side { padding: 26px 10px 24px; }
    .vc-login__story { padding: 22px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .vc-login-page *,
    .vc-login-page *::before,
    .vc-login-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .vc-login__submit:hover { transform: none; }
}