/* Ecrans de comptes : connexion, inscription, verification, profil.
 *
 * Une seule feuille pour les sept pages : elles partagent la meme carte
 * centree et les memes champs, les dupliquer par ecran garantirait qu'elles
 * divergent a la premiere retouche.
 *
 * Contrairement aux ecrans de jeu, ces pages se remplissent au clavier sur un
 * ordinateur autant qu'au pouce sur un telephone : les champs gardent la
 * hauteur tactile mais le contenu reste etroit et lisible. */

.page-auth {
    max-width: 460px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.page-auth h1 {
    font-size: 24px;
    margin-bottom: 4px;
}

.page-auth .intro {
    color: var(--texte-doux);
    margin: 0 0 18px 0;
}

.bloc-auth {
    margin-top: 14px;
}

.bloc-auth h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texte-doux);
    margin-bottom: 12px;
}

/* Sans cette regle, un element masque par l'attribut `hidden` reste visible
 * des qu'une classe lui impose display: grid ou flex. */
[hidden] {
    display: none !important;
}

/* ------------------------------------------------------------------ champs */

.champ {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.champ label {
    font-size: 14px;
    color: var(--texte-doux);
}

.saisie-texte {
    width: 100%;
    min-height: var(--touche-min);
    padding: 0 12px;
    /* 16px minimum : en dessous, iOS zoome automatiquement sur le champ actif
     * et l'utilisateur se retrouve avec une page decadree. */
    font: inherit;
    font-size: 16px;
    color: var(--texte);
    background: var(--fond-touche);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-touche);
}

.saisie-texte:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.saisie-texte:disabled {
    color: var(--texte-eteint);
    background: #1a2027;
}

.aide {
    margin: 2px 0 0 0;
    font-size: 13px;
    color: var(--texte-eteint);
}

/* ----------------------------------------------------------------- boutons */

.bouton-large {
    width: 100%;
    min-height: 56px;
    font-size: 17px;
    font-weight: 600;
    margin-top: 4px;
}

.bloc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace);
    margin-top: 12px;
}

.bloc-actions button {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 0 14px;
}

.petit {
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
}

/* Lien presente comme un bouton dans une rangee d'actions : sans cela il
 * tomberait en texte souligne au milieu de vraies touches. */
.bloc-actions a.petit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 140px;
    color: var(--texte);
    background: var(--fond-touche);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-touche);
    text-decoration: none;
}

/* ---------------------------------------------------------------- messages */

/* Bandeau persistant, contrairement au toast : un echec de connexion doit
 * rester lisible pendant que l'utilisateur corrige son mot de passe. */
.message {
    margin: 12px 0 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--bordure);
    background: #223039;
    font-size: 15px;
}

.message-erreur { background: #4a1d1d; border-color: #7d2a2a; }
.message-attention { background: #4a3a12; border-color: #7d6320; }
.message-succes { background: #14512f; border-color: #1c6f42; }

/* ------------------------------------------------------------------- liens */

.liens-auth {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--texte-doux);
}

.liens-auth a {
    /* Zone cliquable confortable : ces liens tombent souvent sous le pouce. */
    display: inline-block;
    padding: 6px 4px;
}

/* --------------------------------------------------------------- profil */

.ligne-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bordure);
}

.ligne-info:last-child {
    border-bottom: none;
}

.ligne-info .etiquette {
    color: var(--texte-doux);
    font-size: 14px;
    flex: 0 0 auto;
}

.ligne-info .valeur {
    text-align: right;
    word-break: break-word;
}

/* L'adresse d'affichage se recopie parfois a la main sur une tablette : chasse
 * fixe pour ne pas confondre 0 et O, l ou 1. */
.adresse-affichage {
    display: block;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 15px;
    color: var(--succes);
    background: #0d1216;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0 0 0;
    word-break: break-all;
    /* Le texte du reste des pages n'est pas selectionnable (sans-selection) ;
     * celui-ci doit l'etre, c'est tout l'interet de la carte. */
    user-select: all;
    -webkit-user-select: all;
}

.avertissement {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #7d6320;
    background: #4a3a12;
    font-size: 15px;
}

.avertissement p {
    margin: 0 0 10px 0;
}

/* ------------------------------------------------------------ etat d'attente */

.attente {
    color: var(--texte-doux);
    text-align: center;
    padding: 24px 0;
}