/*
 * Écran de connexion — Questionnaire ODLV
 *
 * Feuille autonome : cette page ne charge ni Bootstrap ni le thème général.
 * Elle n'en avait besoin que pour deux champs et un bouton, au prix de
 * plusieurs centaines de kilo-octets et d'un balisage impossible à rendre
 * conforme.
 *
 * Parti pris : la signalétique des transports — Parisine (la typographie
 * maison, déjà livrée avec le site), géométrie franche, filet de couleur en
 * tête de panneau, aplats sans effet superflu.
 *
 * Contrastes vérifiés (WCAG 2.1 AA, RGAA 3.2) :
 *   texte principal   #1b2126 sur #ffffff  15,9:1
 *   étiquettes        #4a5157 sur #ffffff   8,1:1
 *   texte secondaire  #6b7378 sur #ffffff   4,8:1
 *   bouton            #ffffff sur #2f5a86   7,2:1
 *   message d'erreur  #b02a37 sur #ffffff   6,5:1
 *   bordure de champ  #6f787e sur #ffffff   4,5:1  (minimum requis 3:1)
 */

@font-face {
    font-family: "parisine";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ParisineOffice-Regular.ttf") format("truetype");
}

:root {
    --bleu:        #4d7db3;
    --bleu-fonce:  #2f5a86;
    --bleu-nuit:   #1f3f5f;
    --encre:       #1b2126;
    --gris-texte:  #4a5157;
    --gris-doux:   #6b7378;
    --bord:        #6f787e;
    --bord-tenu:   #dfe3e6;
    --fond:        #f4f5f3;
    --surface:     #ffffff;
    --rouge:       #b02a37;
    --rouge-fond:  #fbf0f1;
    --vert:        #1f6b45;
    --vert-fond:   #eff6f2;

    --rayon: 3px;
    --transition: 140ms cubic-bezier(0.2, 0, 0.2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    /* `dvh` tient compte de la barre d'adresse mobile ; repli sur `vh` au-dessus. */
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;

    font-family: "Lato", "Open Sans", sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--gris-texte);

    background-color: var(--fond);
    /* Hachure diagonale très discrète : une texture de plan, pas un motif. */
    background-image:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(77, 125, 179, 0.10), transparent 70%),
        repeating-linear-gradient(
            135deg,
            rgba(31, 63, 95, 0.022) 0 1px,
            transparent 1px 9px
        );
}

/* --------------------------------------------------------------------------
   Marque
   -------------------------------------------------------------------------- */

.connexion {
    width: 100%;
    max-width: 27rem;
}

.connexion-marque {
    text-align: center;
    margin-bottom: 1.75rem;
}

.connexion-logo {
    display: block;
    width: auto;
    height: 50px;
    margin: 0 auto 0.875rem;
}

.connexion-surtitre {
    margin: 0 0 0.25rem;
    font-family: "Oswald", "Lato", sans-serif;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gris-doux);
}

.connexion-titre {
    margin: 0;
    font-family: "parisine", "Muli", sans-serif;
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--encre);
}

/* --------------------------------------------------------------------------
   Panneau
   -------------------------------------------------------------------------- */

.connexion-panneau {
    background: var(--surface);
    border: 1px solid var(--bord-tenu);
    /* Le filet de tête : la ligne colorée d'un panneau de quai. */
    border-top: 4px solid var(--bleu);
    border-radius: var(--rayon);
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 18px 40px -28px rgba(27, 33, 38, 0.45);
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.connexion-messages {
    margin-bottom: 1.25rem;
}

.connexion-messages:focus {
    outline: none;
}

.connexion-messages .alert {
    margin: 0 0 0.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 0 var(--rayon) var(--rayon) 0;
    font-size: 0.9375rem;
}

.connexion-messages .alert:last-child {
    margin-bottom: 0;
}

.connexion-messages .alert-danger,
.connexion-messages .alert-warning {
    color: var(--rouge);
    background: var(--rouge-fond);
    border-color: rgba(176, 42, 55, 0.22);
    border-left-color: var(--rouge);
}

.connexion-messages .alert-success {
    color: var(--vert);
    background: var(--vert-fond);
    border-color: rgba(31, 107, 69, 0.22);
    border-left-color: var(--vert);
}

.connexion-messages .alert-info {
    color: var(--bleu-nuit);
    background: #eef3f8;
    border-color: rgba(47, 90, 134, 0.22);
    border-left-color: var(--bleu-fonce);
}

/* --------------------------------------------------------------------------
   Champs
   -------------------------------------------------------------------------- */

.champ + .champ {
    margin-top: 1.125rem;
}

.champ-etiquette {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--gris-texte);
}

.champ-boite {
    position: relative;
    display: flex;
    align-items: center;
}

.champ-icone {
    position: absolute;
    left: 0.875rem;
    display: flex;
    color: var(--gris-doux);
    pointer-events: none;
}

.champ-saisie {
    width: 100%;
    height: 3.25rem;
    padding: 0 0.875rem 0 2.875rem;

    font-family: inherit;
    font-size: 1rem;
    color: var(--encre);

    background: var(--surface);
    border: 2px solid var(--bord);
    border-radius: var(--rayon);

    transition: border-color var(--transition), background-color var(--transition);
    appearance: none;
}

/* Le bouton d'affichage du mot de passe occupe la droite du champ. */
.champ-saisie--avec-bouton {
    padding-right: 3.25rem;
}

.champ-saisie::placeholder {
    color: transparent;
}

.champ-saisie:hover {
    border-color: var(--gris-texte);
}

.champ-saisie:focus {
    outline: none;
    border-color: var(--bleu-fonce);
    background: #fbfcfd;
}

/* Anneau de focus net, visible au clavier comme à la souris sur les champs. */
.champ-saisie:focus-visible {
    outline: 3px solid var(--bleu-fonce);
    outline-offset: 2px;
}

.champ-boite:focus-within .champ-icone {
    color: var(--bleu-fonce);
}

/* --------------------------------------------------------------------------
   Bouton « afficher le mot de passe » (injecté par login.js)
   -------------------------------------------------------------------------- */

.champ-bascule {
    position: absolute;
    right: 0.3125rem;

    display: flex;
    align-items: center;
    justify-content: center;
    /* 44 px : cible tactile minimale recommandée. */
    width: 2.75rem;
    height: 2.75rem;

    padding: 0;
    color: var(--gris-doux);
    background: none;
    border: 0;
    border-radius: var(--rayon);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition);
}

.champ-bascule:hover {
    color: var(--bleu-fonce);
    background: rgba(47, 90, 134, 0.07);
}

.champ-bascule:focus-visible {
    outline: 3px solid var(--bleu-fonce);
    outline-offset: 1px;
}

.champ-bascule .icone-oeil-barre {
    display: none;
}

.champ-bascule[aria-pressed="true"] {
    color: var(--bleu-fonce);
}

.champ-bascule[aria-pressed="true"] .icone-oeil {
    display: none;
}

.champ-bascule[aria-pressed="true"] .icone-oeil-barre {
    display: block;
}

/* --------------------------------------------------------------------------
   Validation
   -------------------------------------------------------------------------- */

.champ-saisie:user-invalid {
    border-color: var(--rouge);
}

.champ-saisie:user-invalid:focus-visible {
    outline-color: var(--rouge);
}

/* --------------------------------------------------------------------------
   Bouton principal
   -------------------------------------------------------------------------- */

.connexion-valider {
    width: 100%;
    height: 3.25rem;
    margin-top: 1.5rem;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;

    background: var(--bleu-fonce);
    border: 2px solid var(--bleu-fonce);
    border-radius: var(--rayon);
    cursor: pointer;

    transition: background-color var(--transition), border-color var(--transition),
                transform var(--transition);
}

.connexion-valider:hover {
    background: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
}

.connexion-valider:focus-visible {
    outline: 3px solid var(--bleu-fonce);
    outline-offset: 2px;
}

.connexion-valider:active {
    transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Pied
   -------------------------------------------------------------------------- */

.connexion-pied {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--gris-doux);
}

/* --------------------------------------------------------------------------
   Entrée en scène
   -------------------------------------------------------------------------- */

@keyframes apparition {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.connexion-marque,
.connexion-panneau,
.connexion-pied {
    animation: apparition 460ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

.connexion-panneau { animation-delay: 90ms; }
.connexion-pied    { animation-delay: 180ms; }

/* --------------------------------------------------------------------------
   Préférences et supports
   -------------------------------------------------------------------------- */

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

/* Le contour de focus doit rester visible quel que soit le thème système. */
@media (prefers-contrast: more) {
    .champ-saisie {
        border-width: 2px;
        border-color: var(--encre);
    }
}

@media (max-width: 26rem) {
    body {
        padding: 1.5rem 1rem;
    }

    .connexion-panneau {
        padding: 1.5rem 1.125rem 1.25rem;
    }

    .connexion-titre {
        font-size: 1.625rem;
    }
}

@media print {
    body {
        background: none;
    }
}