/* ==========================================================================
   FONTES — servies depuis le domaine, jamais depuis un tiers.
   La CSP du projet autorise `style-src 'self'` et `font-src 'self' data:`.
   L'ouvrir a un domaine externe pour du decoratif serait un mauvais echange
   sur un service financier, et chaque visiteur y communiquerait son adresse IP.
   Ces trois declarations sont identiques a celles de site.css : auth.css est
   autonome et ne charge pas site.css.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/fonts/bricolage-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/archivo-var.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-var.woff2') format('woff2');
}

/* ===========================================================================
   DD TRANSFERT — ÉCRANS D'IDENTIFICATION
   ===========================================================================

   Pourquoi un fichier à part plutôt qu'une surcharge de site.css : ces pages
   n'ont ni la structure ni le registre du reste du site. Les mêler obligerait
   à annuler règle après règle, et chaque annulation est une dette.

   LE PARTI PRIS
   -------------
   Un panneau de formulaire sobre, et à côté, la seule chose qui compte
   vraiment pour quelqu'un qui hésite à confier son argent : voir le trajet.
   L'argent part d'Abidjan, il arrive à Montréal, et on le MONTRE au lieu de
   l'écrire.

   L'animation n'est pas là pour décorer. Elle dit « ça circule, ça aboutit »
   en une seconde et demie, ce qu'un paragraphe ne fait pas.

   CONTRASTE
   ---------
   Fond sombre : le gris moyen y devient illisible beaucoup plus vite que sur
   fond clair. Les trois niveaux de texte sont vérifiés, rien ne descend
   sous 5,4:1.
   =========================================================================== */

:root {
    /* Papier chaud a gauche, bloc d encre a droite. Le contraste entre les
       deux panneaux fait le travail que des degrades et des halos tentaient
       de faire auparavant — et il le fait mieux, parce qu il decoupe au lieu
       de diffuser. */
    --a-papier:      #faf7f2;
    --a-papier-2:    #f2ede4;
    --a-blanc:       #ffffff;
    --a-bord:        #e4ded3;
    --a-bord-fort:   #cdc4b5;

    --a-encre:       #14110e;   /* 16,9:1 */
    --a-encre-2:     #595249;   /*  7,1:1 */
    --a-encre-3:     #655e55;   /*  6,1:1 — plancher */

    /* Le panneau de droite, en aplat franc. */
    --a-nuit:        #14110e;
    --a-nuit-2:      #221d18;
    --a-nuit-bord:   #342d25;
    --a-nuit-texte:  #ede8e0;
    --a-nuit-texte-2:#b5aca0;

    /* L aplat orange est vif, le texte orange est profond : lisible en aplat
       et lisible en texte ne demandent pas la meme valeur. */
    --a-orange:      #ff6b1a;
    --a-orange-vif:  #ff8440;
    --a-orange-texte:#b83a08;
    --a-orange-pale: #fdeee3;

    /* Le vert ne dit qu une chose : c est arrive. Jamais un bouton. */
    --a-vert:        #0a7a47;
    --a-vert-vif:    #12a862;
    --a-vert-pale:   #e4f4eb;
    --a-vert-nuit:   #06281a;

    --a-rouge:       #c0271b;
    --a-rouge-pale:  #fbeae8;

    --a-r:           10px;
    --a-r-s:         7px;
}

/* --------------------------------------------------------------- Structure */

body.auth {
    margin: 0;
    min-height: 100vh;
    background: var(--a-papier);
    color: var(--a-encre);
    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

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

.auth-form-panneau {
    display: flex;
    flex-direction: column;
    padding: 28px clamp(22px, 5vw, 64px) 40px;
}

.auth-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(32px, 7vh, 72px);
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--a-encre);
    text-decoration: none;
    font-weight: 650;
    font-size: 16px;
    letter-spacing: -0.02em;
}

.auth-logo svg { width: 28px; height: 28px; }

.auth-liens {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
}

.auth-liens a {
    color: var(--a-encre-3);
    text-decoration: none;
    transition: color .16s ease;
}

.auth-liens a:hover { color: var(--a-encre); }

.auth-corps {
    width: 100%;
    max-width: 392px;
    margin: auto 0;
    padding-bottom: 6vh;
}

.auth-corps h1 {
    font-family: "Bricolage", "Archivo", sans-serif;
    margin: 0 0 10px;
    font-size: clamp(27px, 3.6vw, 36px);
    font-weight: 650;
    /* Interlettrage négatif : c'est ce qui sépare une grotesque de presse
       d'une sans-serif de formulaire. */
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.auth-sous-titre {
    margin: 0 0 30px;
    color: var(--a-encre-2);
    font-size: 15px;
    line-height: 1.55;
}

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

.auth-champ, .champ { margin-bottom: 17px; }

.auth-champ label, .champ label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--a-encre-2);
}

.auth-champ input, .champ input,
.auth-champ select, .champ select {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    background: var(--a-blanc);
    border: 1.5px solid var(--a-bord);
    border-radius: var(--a-r-s);
    color: var(--a-encre);
    font-size: 15px;
    font-family: inherit;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.auth-champ input::placeholder, .champ input::placeholder { color: var(--a-encre-3); }

.auth-champ input:hover, .champ input:hover { border-color: var(--a-bord-fort); }

/* L'anneau de focus est de la couleur d'action et bien visible. Un focus
   discret est un focus inutile pour qui navigue au clavier. */
.auth-champ input:focus, .champ input:focus,
.auth-champ select:focus, .champ select:focus {
    outline: none;
    border-color: var(--a-orange);
    background: var(--a-blanc);
    box-shadow: 0 0 0 3px rgb(255 107 26 / 0.16);
}

.auth-champ input[aria-invalid="true"], .champ input[aria-invalid="true"] {
    border-color: var(--a-rouge);
    background: var(--a-rouge-pale);
}

.auth-erreur-champ, .erreur-champ {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--a-rouge);
}

/* Les chiffres en chasse fixe : un montant doit s'aligner verticalement. */
.auth-champ input[inputmode="numeric"],
.auth-champ input[type="tel"] {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------- Boutons */

.auth-bouton, .bouton, button[type="submit"] {
    width: 100%;
    padding: 14px 20px;
    margin-top: 8px;
    background: var(--a-orange);
    color: #1a0a02;
    border: none;
    border-radius: var(--a-r-s);
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s cubic-bezier(.2,.8,.3,1),
                box-shadow .15s ease;
}

.auth-bouton:hover, .bouton:hover, button[type="submit"]:hover {
    background: var(--a-orange-vif);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -12px rgb(255 107 26 / 0.75);
}

.auth-bouton:active, .bouton:active { transform: translateY(0); }

.auth-bouton[disabled], .bouton[disabled], button[disabled] {
    opacity: .55;
    cursor: progress;
    transform: none;
    box-shadow: none;
}

:focus-visible {
    outline: 2px solid var(--a-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

.auth-bas, .bas-auth {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--a-bord);
    font-size: 14px;
    color: var(--a-encre-3);
}

.auth-bas a, .bas-auth a {
    color: var(--a-orange-texte);
    font-weight: 500;
    text-decoration: none;
}

.auth-bas a:hover, .bas-auth a:hover { text-decoration: underline; }

.auth-oubli {
    display: block;
    margin-top: -8px;
    margin-bottom: 18px;
    text-align: right;
    font-size: 13px;
    color: var(--a-encre-3);
    text-decoration: none;
}

.auth-oubli:hover { color: var(--a-encre-2); }

/* ---------------------------------------------------------------- Alertes */

.auth-alerte, .alerte {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: var(--a-r-s);
    border: 1px solid;
    font-size: 14px;
    line-height: 1.45;
    animation: auth-alerte-entree .3s cubic-bezier(.2,.8,.3,1) both;
}

.auth-alerte-erreur, .alerte-erreur {
    border-color: #e8b4ae;
    background: var(--a-rouge-pale);
    color: #8a1f14;
}

.auth-alerte-succes, .alerte-succes {
    border-color: #a8d8bf;
    background: var(--a-vert-pale);
    color: #065431;
}

@keyframes auth-alerte-entree {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ======================================================================== */
/* PANNEAU DROIT — LE TRAJET DE L'ARGENT                                     */
/* ======================================================================== */

/* Un APLAT, pas une ambiance.

   Avant : trois degrades radiaux superposes, une trame en fondu et un halo
   anime. Pris un par un chacun se defend ; ensemble ils produisent exactement
   la penombre lumineuse qu on retrouve partout, et qui ne veut rien dire.

   Un seul aplat d encre, net, contre le papier du formulaire. Le contraste
   entre les deux panneaux porte toute la composition. */
.auth-scene {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px clamp(28px, 4vw, 64px);
    background: var(--a-nuit);
    color: var(--a-nuit-texte);
}

.auth-scene-contenu { position: relative; z-index: 1; }

.auth-scene h2 {
    font-family: "Bricolage", "Archivo", sans-serif;
    margin: 0 0 12px;
    font-size: clamp(25px, 2.9vw, 36px);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.14;
    max-width: 15ch;
}

.auth-scene h2 .arrivee { color: var(--a-vert-vif); }

.auth-scene p {
    margin: 0 0 34px;
    max-width: 40ch;
    color: var(--a-nuit-texte-2);
    font-size: 15px;
    line-height: 1.6;
}

/* ------------------------------------------------- Carte de démonstration */

/* Posee sur l aplat d encre. Surface opaque et bordure franche : le verre
   depoli (`backdrop-filter`) est l autre reflexe qui fait « genere » — tout
   devient translucide et plus rien n a de bord. */
.auth-devis {
    max-width: 384px;
    padding: 20px 22px;
    background: var(--a-nuit-2);
    border: 1px solid var(--a-nuit-bord);
    border-radius: 12px;
}

.auth-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.auth-ligne + .auth-ligne { margin-top: 11px; }

.auth-ligne .libelle { font-size: 13.5px; color: var(--a-nuit-texte-2); }

.auth-ligne .valeur {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    letter-spacing: -0.02em;
}

.auth-ligne .valeur.gros { font-size: 25px; font-weight: 600; }
.auth-ligne .valeur .devise { font-size: 13px; color: var(--a-nuit-texte-2); font-weight: 400; }
.auth-ligne .valeur.frais { color: var(--a-orange); }

.auth-separateur {
    height: 1px;
    margin: 15px 0;
    background: var(--a-nuit-bord);
}

.auth-recu {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #0a7a4d;
    background: var(--a-vert-nuit);
    border-radius: var(--a-r);
}

.auth-recu .libelle {
    font-size: 12.5px;
    color: var(--a-nuit-texte-2);
    margin-bottom: 3px;
}

.auth-recu .montant {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 600;
    color: var(--a-vert-vif);
    letter-spacing: -0.02em;
}

.auth-recu .montant .devise { font-size: 15px; color: var(--a-vert-vif); }

/* ------------------------------------------------------- Bandeau de confiance */

.auth-confiance {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.auth-puce {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--a-nuit-bord);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--a-nuit-texte-2);
}

.auth-puce svg { width: 13px; height: 13px; flex: none; color: var(--a-vert-vif); }

/* ======================================================================== */
/* ANIMATIONS                                                                */
/* ======================================================================== */

/* Entrée en cascade. Le décalage fait lire l'écran de haut en bas au lieu de
   tout jeter d'un coup. */
@keyframes auth-monte {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.auth-anim { animation: auth-monte .55s cubic-bezier(.2,.75,.3,1) both; }
.auth-d1 { animation-delay: .05s; }
.auth-d2 { animation-delay: .13s; }
.auth-d3 { animation-delay: .21s; }
.auth-d4 { animation-delay: .29s; }
.auth-d5 { animation-delay: .37s; }
.auth-d6 { animation-delay: .45s; }

/* Pulsation du point « arrivé ». Lente : à 2 s on la perçoit comme un
   battement calme, à 0,5 s elle devient une alarme. */
@keyframes auth-pouls {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .55; transform: scale(.86); }
}

.auth-pouls { animation: auth-pouls 2.1s ease-in-out infinite; }

/* ------------------------------------------------------- Accessibilité */
/* Une animation qui ne peut pas être coupée est un défaut, pas un effet.
   Certaines personnes en ont des vertiges ; d'autres la trouvent simplement
   pénible au dixième chargement. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .auth-trajet-mobile { display: none; }
}

/* ======================================================================== */
/* ADAPTATION ÉCRAN ÉTROIT                                                   */
/* ======================================================================== */

/* Sous 980 px le panneau illustré passe SOUS le formulaire, jamais au-dessus.
   Sur un téléphone, quelqu'un qui ouvre « Connexion » veut le champ de saisie
   tout de suite, pas une illustration à faire défiler. */
@media (max-width: 980px) {
    .auth-grille { grid-template-columns: 1fr; }

    .auth-scene {
        border-left: none;
        border-top: 1px solid var(--a-bord);
        padding: 40px clamp(22px, 6vw, 44px) 52px;
    }

    .auth-corps { margin: 0; padding-bottom: 8px; }
    .auth-form-panneau { padding-bottom: 24px; }
}

@media (max-width: 560px) {
    .auth-entete { margin-bottom: 30px; }
    .auth-liens { gap: 14px; font-size: 13px; }
    .auth-scene h2 { font-size: 23px; }
    .auth-devis { padding: 17px 18px; }
}

/* ===========================================================================
   COMPLÉMENTS POUR LES VUES EXISTANTES
   ===========================================================================
   Les quatre formulaires d'identification utilisent déjà des classes
   (`.champ`, `.bouton`, `.pin`…). Les sélecteurs ci-dessus ont été élargis
   pour les reconnaître plutôt que de renommer les vues : un renommage de
   masse sur des gabarits est exactement l'opération qui casse une page sans
   qu'on s'en aperçoive, et ces pages-ci sont la porte d'entrée du service.
   =========================================================================== */

.aide {
    margin: -3px 0 7px;
    font-size: 12.5px;
    color: var(--a-encre-3);
    line-height: 1.45;
}

/* Le champ de code : six chiffres, largement espacés. On les saisit en
   recopiant depuis un SMS ou une application — l'espacement évite de perdre
   sa place en cours de frappe. */
.auth-champ input.pin,
.champ input.pin {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.45em;
    text-indent: 0.45em;   /* compense l'espace ajouté après le dernier chiffre */
    padding: 15px 14px;
}

.langues {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--a-bord);
    border-radius: 999px;
    background: var(--a-papier-2);
}

.langues a {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--a-encre-3);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}

.langues a:hover { color: var(--a-encre); }

.langues a[aria-current="true"] {
    background: var(--a-orange);
    color: #1a0a02;
}

/* Le bouton secondaire ne doit pas rivaliser avec l'action principale. */
.bouton-ligne,
.auth-bouton-secondaire {
    background: transparent;
    color: var(--a-encre);
    border: 1.5px solid var(--a-bord-fort);
    box-shadow: none;
}

.bouton-ligne:hover,
.auth-bouton-secondaire:hover {
    background: transparent;
    border-color: var(--a-encre-3);
    box-shadow: none;
}

/* Le bouton « Afficher » est ajouté par auth.js. Pas de style orphelin :
   si le script ne se charge pas, aucune de ces regles ne s'applique. */
.auth-mdp { position: relative; }

.auth-mdp input { padding-right: 84px; }

.auth-oeil {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    width: auto;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: var(--a-r-s);
    color: var(--a-encre-3);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: none;
}

.auth-oeil:hover {
    background: var(--a-papier-2);
    color: var(--a-encre);
    transform: translateY(-50%);
    box-shadow: none;
}

.auth-trajet { width: 100%; max-width: 440px; margin: 4px 0 26px; height: auto; }

/* ===========================================================================
   DÉBORDEMENT HORIZONTAL À LARGEUR TÉLÉPHONE
   ===========================================================================
   Constaté en mesurant, pas en regardant : a 319 px de large, l'en-tete
   refusait de descendre sous 346 px et poussait toute la page en defilement
   lateral. Logo, liens et selecteur de langue etaient sur une seule ligne
   flex sans autorisation de passer a la ligne.

   Une barre de defilement horizontale sur un ecran de connexion est plus
   qu'un defaut d'esthetique : le champ de saisie sort du cadre et la moitie
   du formulaire devient invisible.
   =========================================================================== */

.auth-entete {
    flex-wrap: wrap;
    row-gap: 14px;
}

.auth-liens { flex-wrap: wrap; row-gap: 10px; }

/* `min-width: 0` sur les enfants d'une grille : sans lui, un element de
   grille refuse de descendre sous la largeur de son contenu, et toute la
   mise en page deborde pour un seul mot trop long. */
.auth-form-panneau,
.auth-scene { min-width: 0; }

.auth-corps,
.auth-devis,
.auth-trajet { max-width: 100%; }

@media (max-width: 420px) {
    /* Le logo seul tient la premiere ligne, les liens passent dessous. */
    .auth-entete { flex-direction: column; align-items: flex-start; }
    .auth-form-panneau { padding-left: 18px; padding-right: 18px; }
    .auth-scene { padding-left: 18px; padding-right: 18px; }
    .auth-liens { gap: 12px; }
}