/* Écran de connexion.
 *
 * Feuille séparée : la CSP tolère `'unsafe-inline'` sur les styles, mais un
 * fichier à part se met en cache avec une empreinte, et se partagera avec les
 * autres écrans de connexion Arven le jour où il y en aura plusieurs.
 *
 * Les valeurs viennent de `tokens.css` (design system « Subtle Gradient »).
 *
 * ⚠️ C'EST LE SEUL ÉCRAN QUI A LE DROIT D'ÊTRE NAVY. Le design system réserve
 * #0d182a « au fond du lockup et aux surfaces qui portent la marque » : une
 * page de connexion est exactement ça, et c'est aussi la seule page qu'on voit
 * avant d'avoir un compte. Partout ailleurs — barre latérale, barre du
 * téléphone, boutons — le navy a disparu au profit du blanc et de l'encre.
 */

body { overflow: auto; background: var(--color-canvas); }

/* La part de largeur du panneau de marque, écrite UNE fois : le formulaire
   prend le reste, et la mention de propriété s'aligne dessus pour se centrer
   sous la marque. Trois valeurs à tenir d'accord si elles étaient recopiées. */
:root { --part-marque: 46%; }

.login-split { display: flex; min-height: 100vh; position: relative; }

.login-brand {
    flex: 1 1 var(--part-marque);
    background: var(--color-brand-navy);
    color: var(--color-on-dark);
    display: flex;
    padding: var(--space-xxl);
    position: relative;
    overflow: hidden;
}

/* ⚠️ LE DÉGRADÉ RADIAL A ÉTÉ SUPPRIMÉ. Il y avait ici un
   `radial-gradient(130% 90% at 100% 0%, …)` qui éclaircissait le coin haut
   droit. Le design system s'appelle « Subtle Gradient » et n'en contient
   pourtant AUCUN — c'est écrit noir sur blanc dans sa documentation : « si
   vous vous surprenez à vouloir un dégradé, vous êtes hors marque ». Aplat
   pur. */

/* La marque est le SEUL contenu du panneau, donc elle est centrée — et non
   plus répartie en haut/milieu/bas comme quand elle encadrait un argumentaire. */
.login-brand-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    position: relative;
    z-index: 1;
}

/* ⚠️ LE LOCKUP OFFICIEL, ET NON LE NOM RECOMPOSÉ. La page posait l'icône
   au-dessus d'un « Arven Distribution » retypographié en Manrope 700. Le
   design system l'interdit explicitement : « ne jamais recomposer “Arven
   Distribution” dans une autre fonte pour imiter le lockup ». Avec la
   disparition des fontes web, ce faux serait devenu system-ui — encore plus
   visible. C'est maintenant l'image fournie par la marque, d'un seul tenant :
   montagne, nom et sous-titre au bon écartement, pour toujours. */
.login-brand-logo {
    width: min(230px, 60%);
    height: auto;
    display: block;
}

/* Hors des deux panneaux dans le HTML, pour n'être écrit qu'une fois : posé
   ici en bas du panneau sombre, remis dans le flux sous le formulaire au
   passage en colonne (voir la requête média). */
.login-copyright {
    position: absolute;
    left: 0;
    /* Largeur du panneau de marque, pas de la page : centrée ainsi, la mention
       tombe sous le lockup plutôt qu'au milieu de l'écran, à cheval sur la
       césure des deux moitiés. */
    width: var(--part-marque);
    bottom: 40px;
    z-index: 2;
    text-align: center;
    font-size: var(--caption-size);
    font-weight: var(--weight-regular);
    color: var(--color-on-dark-soft);
}

.login-panel {
    flex: 1 1 calc(100% - var(--part-marque));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl);
    background: var(--color-canvas);
}
.login-form { width: 100%; max-width: 360px; }

/* En casse normale. C'était du Montserrat capitale à 0,18 em d'approche ; le
   design system emploie la casse normale partout dans le produit. */
.login-eyebrow {
    display: block;
    font-size: var(--caption-size);
    font-weight: var(--caption-weight);
    color: var(--color-text-muted);
}

.login-form h1 {
    font-size: var(--display-sm-size);
    font-weight: var(--display-sm-weight);
    line-height: var(--display-sm-leading);
    letter-spacing: var(--display-sm-tracking);
    color: var(--color-ink);
    margin: var(--space-xs) 0 6px;
}
.login-sub { font-size: var(--body-sm-size); color: var(--color-text-muted); margin-bottom: var(--space-xl); }

.login-form label {
    display: block;
    font-size: var(--caption-size);
    font-weight: var(--caption-weight);
    color: var(--color-ink);
    margin: 0 0 6px;
}

/* Champs du système : 40px, blancs, filet. Le focus épaissit le filet jusqu'à
   l'encre — c'est le seul changement d'état qu'un champ documente. Ils étaient
   sur fond gris sans bordure, ce qui les faisait lire comme des pastilles. */
.login-form input {
    width: 100%;
    box-sizing: border-box;
    height: var(--control-height);
    padding: 0 var(--input-padding-x);
    margin-bottom: var(--space-md);
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--body-sm-size);
    color: var(--color-ink);
    transition: var(--transition-press);
}
.login-form input:focus {
    outline: none;
    border-color: var(--color-ink);
    border-width: 1.5px;
    padding: 0 13.5px;   /* compense l'épaississement : le texte ne bouge pas */
}
.login-form input::placeholder { color: var(--color-text-muted-soft); }

/* L'action primaire : encre pleine. Elle s'assombrit à l'APPUI et pas au
   survol — c'est tout le vocabulaire d'interaction du système. */
.login-form button {
    width: 100%;
    height: 44px;
    margin-top: var(--space-xs);
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--button-size);
    font-weight: var(--button-weight);
    line-height: var(--button-leading);
    cursor: pointer;
    transition: var(--transition-press);
}
.login-form button:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }

.login-error {
    background: var(--tint-error);
    border: 1px solid var(--line-error);
    color: var(--ink-error);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--body-sm-size);
    margin-bottom: var(--space-md);
    line-height: 1.45;
}
/* ⚠️ LA REMONTÉE NE VAUT QU'APRÈS UN CHAMP. Elle compense les 16px de marge
   basse d'un `input` pour coller la note à ce qu'elle explique. Appliquée
   partout, elle faisait passer la note SOUS le bouton de 44px qui la précédait
   sur l'écran d'inscription — le texte était littéralement recouvert. */
.login-hint {
    font-size: var(--caption-size);
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
    margin: var(--space-sm) 0 var(--space-md);
    line-height: 1.45;
}
.login-form input + .login-hint { margin-top: -10px; }

/* ⚠️ LE PANNEAU DE MARQUE ÉTAIT `display: none` SOUS 860 px. Sur téléphone —
   c'est-à-dire là où l'outil est le plus consulté — la page de connexion
   n'affichait donc AUCUN logo : un formulaire nu sur fond blanc, sans rien qui
   dise chez qui on se connecte. Il devient un bandeau en haut plutôt que de
   disparaître. */
@media (max-width: 860px) {
    .login-split { flex-direction: column; }
    .login-brand {
        flex: none;
        padding: var(--space-xl) var(--space-lg);
        justify-content: center;
    }
    .login-brand-logo { width: 132px; }

    .login-panel { flex: 1 0 auto; padding: var(--space-xl) var(--space-lg); align-items: flex-start; }

    /* Remise dans le flux, sous le formulaire : en haut, collée au logo, une
       mention de propriété se lirait comme un sous-titre de la marque. */
    .login-copyright {
        position: static;
        width: auto;          /* la largeur du panneau navy n'a plus de sens en colonne */
        order: 3;
        padding: var(--space-xxs) var(--space-lg) var(--space-lg);
        color: var(--color-text-muted);
    }
}
@media (max-width: 480px) { .login-panel { padding: var(--space-xl) var(--space-lg); } }