/* =============================================================================
   Pages d'authentification - SGDOME
   =============================================================================

   Connexion, mot de passe oublié, réinitialisation, activation, code OTP,
   connexion superadmin.

   Autonome : ces pages ne chargent plus le gabarit d'administration (36
   feuilles de style, 77 scripts, 1,9 Mo) pour afficher un formulaire de deux
   champs. Elles ne dépendent que de tokens.css et de cette feuille.

   Parti pris : SGDOME autorise des missions à l'étranger. Le panneau bleu
   raconte ce départ - l'illustration de la page apparaît dans un hublot
   d'avion, et les trois temps du circuit (demande, visas, signature) se
   lisent comme un itinéraire. Le ciel clair du hublot donne aussi aux
   illustrations le fond qu'elles attendent : posées à même le bleu, leurs
   parties sombres s'y perdraient.
   ========================================================================== */

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

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

body.auth {
    margin: 0;
    min-height: 100vh;
    font-family: var(--police-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--encre);
    background: var(--papier);
}

.auth img { max-width: 100%; height: auto; }

.auth [hidden] { display: none !important; }

.auth :focus-visible {
    outline: none;
    box-shadow: var(--anneau-focus);
}

/* --- Grille ---------------------------------------------------------------- */

.auth-page {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* --- Panneau : le récit du départ ------------------------------------------ */

.auth-panneau {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    padding: 2.75rem clamp(2rem, 4vw, 3.5rem) 3rem;
    color: #fff;
    background-color: var(--marque);
    /* Une lumière douce venue du côté du hublot */
    background-image: radial-gradient(60rem 40rem at 100% 0%, rgba(255, 255, 255, .08), transparent 60%);
    overflow: hidden;
}

.auth-marque { grid-column: 1 / -1; }

.auth-produit {
    margin: 0;
    font-family: Montserrat, var(--police-sans);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

/* Filet tricolore sous le nom, comme celui du logo du Ministère */
.auth-drapeau {
    display: block;
    width: 4.5rem;
    height: 4px;
    margin: .7rem 0 .75rem;
    border-radius: 2px;
    background: linear-gradient(90deg,
        var(--drapeau-vert) 0 33.33%,
        var(--drapeau-jaune) 33.33% 66.66%,
        var(--drapeau-rouge) 66.66% 100%);
}

.auth-nom-officiel {
    margin: 0;
    max-width: 27rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
}

.auth-recit {
    align-self: center;
    max-width: 30rem;
    padding: 2.5rem 0 1rem;
}

.auth-accroche {
    margin: 0 0 2.25rem;
    font-family: Montserrat, var(--police-sans);
    font-size: clamp(1.625rem, 2.1vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* Le circuit se lit comme un itinéraire : trois escales reliées par un trait
   pointillé. La numérotation dit un ordre réel - c'est le circuit de
   validation de la plateforme. */
.auth-circuit {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.auth-circuit li {
    position: relative;
    padding: 0 0 1.5rem 3rem;
}

.auth-circuit li:last-child { padding-bottom: 0; }

.auth-circuit li::before {
    counter-increment: etape;
    content: counter(etape);
    position: absolute;
    left: 0;
    top: -.15rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--marque-sombre);
    background: var(--or);
    border-radius: 50%;
}

.auth-circuit li::after {
    content: "";
    position: absolute;
    left: calc(1rem - 1px);
    top: 2.1rem;
    bottom: .2rem;
    border-left: 2px dashed rgba(255, 255, 255, .35);
}

.auth-circuit li:last-child::after { display: none; }

.auth-circuit strong {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
}

.auth-circuit span {
    display: block;
    margin-top: .15rem;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .76);
}

/* --- Le hublot ------------------------------------------------------------- */

.auth-hublot {
    align-self: center;
    position: relative;
    width: clamp(13rem, 18vw, 17rem);
    aspect-ratio: 0.58;
    padding: .85rem;
    /* Le cadre : un plastique clair, légèrement bombé */
    background: linear-gradient(160deg, #F5F7FA 0%, #D3DCE7 100%);
    border-radius: 42% / 24%;
    box-shadow:
        0 24px 60px rgba(4, 14, 30, .45),
        inset 0 2px 0 rgba(255, 255, 255, .85),
        inset 0 -3px 6px rgba(18, 41, 75, .12);
}

.auth-hublot-vitre {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 40% / 23%;
    /* Le ciel */
    background: linear-gradient(180deg, #9CC1E6 0%, #CFE0F1 55%, #EEF4FA 100%);
    box-shadow: inset 0 6px 18px rgba(18, 41, 75, .35);
}

/* Quelques nuages, sans image supplémentaire */
.auth-hublot-vitre::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(3.2rem 1.1rem at 30% 20%, rgba(255, 255, 255, .9), transparent 70%),
        radial-gradient(4rem 1.3rem at 74% 31%, rgba(255, 255, 255, .75), transparent 70%),
        radial-gradient(2.6rem .9rem at 58% 12%, rgba(255, 255, 255, .7), transparent 70%);
}

.auth-hublot img {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: auto;
    max-width: none;
    height: 88%;
    transform: translateX(-50%);
}

/* --- Colonne du formulaire ------------------------------------------------- */

.auth-colonne {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.auth-formulaire {
    width: 100%;
    max-width: 28rem;
}

.auth-logo {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin: 0 auto 1.75rem;
}

/* La carte : le seul élément de la page qui se détache du plan, donc le seul
   à porter une ombre. */
.auth-carte {
    padding: 2.25rem 2.25rem 2rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(18, 41, 75, .04), 0 12px 32px rgba(18, 41, 75, .08);
}

.auth-titre {
    margin: 0;
    text-align: center;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--encre);
}

.auth-consigne {
    margin: .5rem 0 1.75rem;
    text-align: center;
    color: var(--encre-attenue);
}

/* overflow-wrap:anywhere ne coupe une adresse que si elle ne tient sur aucune
   ligne ; word-break:break-all la coupait n'importe où, même sans nécessité. */
.auth-consigne strong { color: var(--encre); overflow-wrap: anywhere; }

.auth-sous-carte {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .875rem;
    color: var(--encre-attenue);
}

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

.auth-champ { margin-bottom: 1.25rem; }

.auth-champ-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .4rem;
}

.auth-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--encre);
}

.auth-champ-entete .auth-label { margin-bottom: 0; }

.auth-input {
    display: block;
    width: 100%;
    height: 3rem;
    padding: 0 .875rem;
    font: inherit;
    color: var(--encre);
    background: var(--surface);
    border: 1px solid var(--trait-marque);
    border-radius: var(--rayon-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input::placeholder { color: var(--encre-faible); }

.auth-input:hover { border-color: var(--encre-faible); }

.auth-input:focus {
    outline: none;
    border-color: var(--marque-moyen);
    box-shadow: var(--anneau-focus);
}

.auth-input[readonly] {
    color: var(--encre-attenue);
    background: var(--surface-douce);
    border-color: var(--trait);
}

.auth-input.is-invalid,
.auth-input[aria-invalid="true"] {
    border-color: var(--etat-erreur);
}

.auth-input.is-invalid:focus,
.auth-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .22);
}

.auth-erreur {
    margin: .4rem 0 0;
    font-size: .875rem;
    color: var(--etat-erreur);
}

.auth-erreur:empty { display: none; }

.auth-insecable { white-space: nowrap; }

.auth-aide {
    margin: .4rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--encre-attenue);
}

/* Champ mot de passe avec bouton d'affichage */
.auth-mdp { position: relative; }

.auth-mdp .auth-input { padding-right: 3rem; }

.auth-bascule {
    position: absolute;
    top: 50%;
    right: .375rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--encre-attenue);
    background: none;
    border: 0;
    border-radius: var(--rayon-sm);
    cursor: pointer;
}

.auth-bascule:hover { color: var(--encre); background: var(--surface-douce); }

.auth-bascule svg { width: 1.25rem; height: 1.25rem; }

.auth-bascule .icone-masquer { display: none; }
.auth-bascule[aria-pressed="true"] .icone-afficher { display: none; }
.auth-bascule[aria-pressed="true"] .icone-masquer { display: block; }

/* Code à usage unique */
.auth-input--code {
    height: 3.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-left: 1.25rem;
}

/* --- Liens ----------------------------------------------------------------- */

.auth-lien {
    font-size: .875rem;
    font-weight: 600;
    color: var(--marque);
    text-decoration: none;
}

.auth-lien:hover { color: var(--marque-moyen); text-decoration: underline; }

/* Bouton qui se présente comme un lien (renvoi du code) */
.auth-lien-bouton {
    padding: 0;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--marque);
    background: none;
    border: 0;
    cursor: pointer;
}

.auth-lien-bouton:hover { color: var(--marque-moyen); text-decoration: underline; }

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

.auth-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    height: 3.25rem;
    margin-top: .5rem;
    padding: 0 1.25rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--marque-sombre);
    border: 0;
    border-radius: var(--rayon-md);
    cursor: pointer;
    transition: background-color .15s ease;
}

.auth-bouton:hover { background: var(--marque); }

/* Désactivé en attente d'une condition (case à cocher) : on le dit.
   En cours d'envoi, le rouage suffit à le dire, le curseur l'accompagne. */
.auth-bouton:disabled { cursor: not-allowed; opacity: .5; }
.auth-bouton.en-cours { cursor: progress; opacity: .8; }

.auth-bouton--secondaire {
    color: var(--marque-sombre);
    background: var(--surface);
    border: 1px solid var(--trait-marque);
    margin-top: .75rem;
}

.auth-bouton--secondaire:hover { background: var(--surface-douce); }

/* --- Consentement ---------------------------------------------------------- */

.auth-garanties {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.auth-garanties li {
    position: relative;
    padding: .55rem 0 .55rem 2rem;
    font-size: .9375rem;
    line-height: 1.5;
    border-top: 1px solid var(--trait);
}

.auth-garanties li:first-child { border-top: 0; }

/* Coche dessinée en CSS : pas d'icône à charger */
.auth-garanties li::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: .95rem;
    width: .5rem;
    height: .85rem;
    border: solid var(--marque);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.auth-case {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding: .9rem 1rem;
    font-size: .9375rem;
    line-height: 1.5;
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-sm);
    cursor: pointer;
}

.auth-case input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: .1rem 0 0;
    accent-color: var(--marque-sombre);
    cursor: pointer;
}

.auth-bouton svg { width: 1.25rem; height: 1.25rem; flex: none; }

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

.auth-alerte {
    margin: 0 0 1.25rem;
    padding: .875rem 1rem;
    font-size: .9375rem;
    line-height: 1.5;
    border: 1px solid;
    border-radius: var(--rayon-sm);
}

.auth-alerte ul { margin: .25rem 0 0; padding-left: 1.1rem; }

.auth-alerte--succes {
    color: #14532D;
    background: var(--etat-succes-voile);
    border-color: #B7DCC4;
}

.auth-alerte--erreur {
    color: #7A1A12;
    background: var(--etat-erreur-voile);
    border-color: #F1C0BB;
}

.auth-alerte--info {
    color: #0B4466;
    background: var(--etat-info-voile);
    border-color: #BBD7EA;
}

/* --- Pied de carte --------------------------------------------------------- */

.auth-anti-robot { margin: .25rem 0 1rem; display: flex; justify-content: center; }

.auth-pied {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .875rem;
    color: var(--encre-attenue);
}

.auth-note {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--trait);
    text-align: center;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--encre-attenue);
}

/* --- Indicateur de chargement du bouton ------------------------------------ */

.auth-rouage {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-tourne .7s linear infinite;
}

@keyframes auth-tourne { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .auth-rouage { animation-duration: 2s; }
    .auth-input, .auth-bouton { transition: none; }
}

/* --- Écrans plus étroits --------------------------------------------------- */

/* Portables de 1024 px : le hublot et le récit ne tiennent plus côte à côte.
   Le récit, qui porte l'information, reste. */
@media (max-width: 71.99rem) {
    .auth-panneau { grid-template-columns: minmax(0, 1fr); }
    .auth-hublot { display: none; }
}

/* Tablette et téléphone : le panneau devient un bandeau compact au-dessus du
   formulaire. L'agent sait où il se trouve, sans faire défiler un aplat bleu
   avant d'atteindre le formulaire. */
@media (max-width: 61.99rem) {
    .auth-page { grid-template-columns: 1fr; }

    .auth-panneau {
        display: block;
        padding: 1.5rem 1.25rem 1.5rem;
    }

    .auth-drapeau { margin-bottom: 0; }
    .auth-nom-officiel,
    .auth-recit { display: none; }

    .auth-colonne { align-items: flex-start; padding: 1.75rem 1rem 3rem; }

    .auth-carte { padding: 1.75rem 1.25rem 1.5rem; }

    .auth-logo { max-width: 18rem; margin-bottom: 1.5rem; }
}

/* --- Liens vers les pages légales, sous la carte ---------------------------- */

.auth-liens-legaux {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.25rem;
    margin: 1.25rem 0 0;
    font-size: .8125rem;
}
.auth-liens-legaux a { color: var(--encre-attenue); text-decoration: none; }
.auth-liens-legaux a:hover, .auth-liens-legaux a:focus-visible { color: var(--marque); text-decoration: underline; }

/* Choix du profil (délégation de saisie) */
.profils { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
.profils__groupe {
    margin: .7rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #8a92a3;
}
.profil-choix {
    position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
    padding: .85rem 1rem; border: 1px solid #d8dee6; border-radius: 14px;
    background: #fff; cursor: pointer; font: inherit; color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}
.profil-choix:hover { border-color: #1f4a7c; background: #f8fafd; box-shadow: 0 8px 20px -10px rgba(18, 41, 75, .35); transform: translateY(-1px); }
.profil-choix:hover .profil-choix__fleche { color: #1f4a7c; transform: translateX(2px); }
.profil-choix:focus-visible { outline: 3px solid rgba(31, 74, 124, .35); outline-offset: 2px; }
.profil-choix--dernier { border-color: #1f4a7c; box-shadow: inset 3px 0 0 #1f4a7c; }
.profil-choix__avatar {
    flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: #fff4dc; color: #8a5200; font-weight: 700; letter-spacing: .02em;
}
.profil-choix__avatar--moi { background: #e8eef5; color: #12294b; }
.profil-choix__texte { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.profil-choix__ligne { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.profil-choix__ligne strong { color: #1d2330; }
.profil-choix__texte small { color: #5b6475; font-size: .82rem; overflow-wrap: anywhere; }
.profil-choix__badge {
    padding: .1rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
    background: #e8eef5; color: #12294b;
}
.profil-choix__meta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .25rem; font-size: .76rem; color: #8a92a3; }
.profil-choix__compte { padding: .05rem .5rem; border-radius: 999px; background: #eef1f6; color: #5b6475; font-weight: 600; }
.profil-choix__compte--actif { background: #fff4dc; color: #8a5200; }
.profil-choix__fleche { flex: none; color: #b8c2cf; transition: color .15s, transform .15s; display: grid; }
.profils__aide { margin: 1.1rem 0 0; font-size: .8rem; line-height: 1.5; color: #5b6475; text-align: center; }
.profils__sortie { margin: .8rem 0 0; text-align: center; }
.profils__sortie .auth-lien { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .profil-choix, .profil-choix__fleche { transition: none; } .profil-choix:hover { transform: none; } }