/* ===========================================================================
   G&G Hosting Service — authentification
   ===========================================================================
   Connexion, création de compte, réinitialisation du mot de passe, second
   facteur. Chargée par le hook, par-dessus gg-sombre.css.

   Pourquoi une feuille à part plutôt que public.css : ces pages ont une
   mise en page propre — une carte étroite et centrée, sans barre latérale
   ni fil d'Ariane utile — qui ne ressemble à aucune autre.
   =========================================================================== */


/* ===========================================================================
   1. La carte
   ===========================================================================
   gg-sombre.css rend `.card` transparente : c'est voulu pour les pages
   éditoriales, où le contenu porte sa propre surface. Ici la carte EST le
   contenu, et doit donc se détacher du fond.
   =========================================================================== */
.gg-auth {
    display: block;
    max-width: 480px;
    margin: clamp(16px, 4vw, 48px) auto;
}
.gg-auth__w {
    max-width: 480px;
}

body .gg-auth__c {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
}
.gg-auth__b {
    padding: clamp(22px, 4vw, 36px);
}
.gg-auth__f {
    padding: 16px clamp(22px, 4vw, 36px);
    background: var(--gg-surface-2);
    border-top: 1px solid var(--gg-line);
    font-size: .85rem;
    color: var(--gg-muted);                    /* 6,85 sur #2E2E2E */
}

.gg-auth__h {
    margin-bottom: 22px;
}
.gg-auth__t {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -.02em;
    color: var(--gg-text);                     /* 16,03 */
    margin: 0;
}
.gg-auth__s {
    margin: 6px 0 22px;
    font-size: .88rem;
    color: var(--gg-muted);                    /* 8,08 */
}


/* ===========================================================================
   2. Les champs
   ===========================================================================
   Le parent emploie `.input-group-merge` : une icône dans un
   `.input-group-prepend` soudée au champ. On garde le balisage et on
   repeint.
   =========================================================================== */
.gg-auth label,
.gg-reg label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--f-head);
    font-weight: 600;
    font-size: .85rem;
    color: var(--gg-text);
}
.gg-auth .form-group,
.gg-reg .form-group {
    margin-bottom: 18px;
}

.gg-auth .form-control,
.gg-reg .form-control,
.gg-reg .field {
    background-color: var(--gg-ground);
    border: 1px solid var(--gg-line);
    color: var(--gg-text);                     /* 17,40 */
    height: auto;
    padding: 11px 14px;
}
.gg-auth .form-control::placeholder,
.gg-reg .form-control::placeholder,
.gg-reg .field::placeholder {
    /* #8A8A8A sur #1A1A1A : 4,52 — recalculé pour CE fond. */
    color: #8A8A8A;
    opacity: 1;
}
.gg-auth .form-control:focus,
.gg-reg .form-control:focus,
.gg-reg .field:focus {
    background-color: var(--gg-ground);
    border-color: #FF6C3A;
    color: var(--gg-text);
    box-shadow: 0 0 0 3px rgba(255, 108, 58, .26);
}

/* L'icône soudée au champ. */
.gg-auth .input-group-text {
    background-color: var(--gg-surface-2);
    border: 1px solid var(--gg-line);
    border-right: 0;
    color: var(--gg-faint);                    /* 4,88 sur #2E2E2E */
}
.gg-auth .input-group-merge .form-control {
    border-left: 0;
}
/* Le bouton « afficher le mot de passe ». Sa classe .btn-reveal-pw est un
   crochet du JavaScript du thème — on ne la touche pas, seulement sa
   peinture, déjà posée par la règle .btn-default de gg-sombre.css. */
.gg-auth .btn-reveal-pw {
    border-left: 0;
}

/* Ligne « Mot de passe … mot de passe oublié ? » */
.gg-auth__lab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.gg-auth__oubli {
    font-size: .8rem;
    white-space: nowrap;
}


/* ===========================================================================
   3. Les actions
   ===========================================================================
   Le parent met le bouton dans un `.float-left` et la case « se souvenir »
   dans un `.text-right` qui le suit : deux mécanismes de placement
   différents pour une même rangée. À l'étroit, la case passait sous le
   bouton tout en restant collée à droite. Une rangée flex se replie
   proprement.
   =========================================================================== */
.gg-auth__act {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 4px;
}
.gg-auth__mem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-weight: 400;
    font-size: .85rem;
    color: var(--gg-muted);                    /* 8,08 */
    cursor: pointer;
}
.gg-auth__mem input {
    margin: 0;
}

.gg-auth__cap {
    margin: 4px 0 18px;
}
/* Le second facteur : {$challenge} est du HTML produit par le module, dont
   le contenu nous échappe. On lui donne seulement de l'air. */
.gg-auth__def {
    margin-bottom: 16px;
}


/* ===========================================================================
   4. Le code de secours
   ===========================================================================
   Affiché une seule fois. Le parent le met dans une .alert-warning — du
   jaune d'avertissement pour une information qu'il faut au contraire
   recopier avec soin.
   =========================================================================== */
.gg-auth__secret {
    margin: 16px 0;
    padding: 18px 16px;
    background: var(--gg-ground);
    border: 1px dashed #FF6C3A;
    border-radius: 8px;
    text-align: center;
}
.gg-auth__secret code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 1.3rem;
    letter-spacing: .14em;
    color: var(--gg-text);                     /* 17,40 */
    background: none;
    padding: 0;
    /* Sélectionnable d'un geste : le lecteur va le recopier. */
    user-select: all;
}
.gg-auth__note {
    font-size: .82rem;
    line-height: 1.55;
    color: var(--gg-muted);
    text-align: center;
}
.gg-auth__code {
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}


/* ===========================================================================
   5. Création de compte
   ===========================================================================
   Formulaire large à plusieurs cartes, pas une carte étroite : il ne porte
   donc pas .gg-auth. Seules ses surfaces sont reprises.
   =========================================================================== */
body .gg-reg .card {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 9px;
}
body .gg-reg .card-body {
    padding: 22px;
}
.gg-reg .card-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--gg-text);
    margin-bottom: 18px;
}
.gg-reg select.field,
.gg-reg select.form-control {
    background-color: var(--gg-ground);
    border: 1px solid var(--gg-line);
    color: var(--gg-text);
}
/* Les cases à cocher d'acceptation : la cible doit être le libellé entier,
   pas la case de 13 px. */
.gg-reg .form-check-label,
.gg-reg label > input[type="checkbox"] {
    cursor: pointer;
}
.gg-reg .form-check-label {
    font-weight: 400;
    color: var(--gg-muted);
}


/* ===========================================================================
   6. Adaptations mobiles
   =========================================================================== */
@media (max-width: 575px) {
    .gg-auth {
        margin: 12px auto;
    }
    .gg-auth__act {
        /* Le bouton d'abord et pleine largeur : c'est l'action attendue. */
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .gg-auth__act .btn {
        width: 100%;
    }
    .gg-auth__mem {
        justify-content: center;
    }
    .gg-auth__secret code {
        font-size: 1.1rem;
        letter-spacing: .1em;
    }
}