/* ==========================================================================
   EKBANKING — ESPACE CLIENT : SUPPLÉMENTS AU DESIGN SYSTEM
   --------------------------------------------------------------------------
   Ce fichier est chargé APRÈS /shared/theme.css et n'ajoute QUE ce qui est
   propre à /app/ : l'écran d'authentification en « split » bancaire, les
   nuances de la carte de solde, la mise en page du formulaire de virement et
   la liste des cartes.

   RÈGLES DE TENUE
   · Aucun token de couleur n'est redéfini ici : tout passe par var(--ek-*).
   · Aucune règle ne duplique le thème (boutons, champs, cartes, tableaux,
     badges, messages, topbar, nav viennent tous de /shared/theme.css).
   · Les sélecteurs s'accrochent aux hooks INVIOLABLES du JS (#accounts,
     #transfer-form, #internal-fields, #external-fields, #cards) et aux
     classes du contrat (.balance-card, .auth-container) — jamais à une
     structure de markup fragile.

   SECTIONS
    1. Écran d'authentification « split »
    2. Panneau de réassurance (aplat vert)
    3. Colonne de formulaire
    4. Carte de solde — nuances client
    5. Formulaire de virement
    6. Liste des cartes
    7. IBAN sur la carte de solde
    8. Consultation des données de carte
    9. Nuances du relevé
   10. Responsive
   11. Bloc compte + documents téléchargeables
   12. Icônes dans les actions du client
   ========================================================================== */


/* ==========================================================================
   1. ÉCRAN D'AUTHENTIFICATION « SPLIT » — login.html + register.html
   Deux colonnes pleine hauteur : réassurance en vert forêt à gauche,
   formulaire sur fond blanc à droite. Sous 900px, tout s'empile.
   ========================================================================== */

body.auth-page {
  background: var(--ek-white);
}

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  /* 100dvh suit la barre d'adresse mobile qui se rétracte : sans elle, le
     panneau vert déborde de la fenêtre au premier défilement sur téléphone.
     Déclaration doublée : un navigateur sans dvh garde la ligne précédente. */
  min-height: 100dvh;
}


/* ==========================================================================
   2. PANNEAU DE RÉASSURANCE — le seul aplat vert de ces pages
   ========================================================================== */

.auth-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ek-sp-5);
  padding: clamp(40px, 7vh, 72px) clamp(28px, 5vw, 64px);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(92, 167, 133, 0.26), transparent 62%),
    var(--ek-green);
  color: var(--ek-on-green-muted);
}

/* La marque est reprise du thème : on ne change que sa couleur sur le vert. */
.auth-aside .brand {
  font-size: 1.35rem;
  color: var(--ek-white);
}
.auth-aside .brand:hover { color: var(--ek-white); }
.auth-aside .brand span { color: var(--ek-on-green-accent); }

/* Accroche configurable (data-ek="tagline") : sur-titre collé au logotype,
   et non un paragraphe de corps de texte — d'où la spécificité qui prend le
   pas sur `.auth-aside p`. Si l'accroche est vide, site-config.js masque
   l'élément en display:none ; rien ne dépend donc de sa présence. */
.auth-aside .auth-tagline {
  max-width: 44ch;
  margin: calc(-1 * var(--ek-sp-3)) 0 0;
  color: var(--ek-on-green-accent);
  font-size: var(--ek-fs-xs);
  font-weight: 500;
  letter-spacing: var(--ek-track-caps);
  text-transform: uppercase;
  line-height: 1.5;
}

.auth-aside h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--ek-white);
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, var(--ek-fs-h2));
  font-weight: 300;
  line-height: 1.22;
}

.auth-aside p {
  max-width: 46ch;
  margin: 0;
  color: var(--ek-on-green-muted);
  font-size: var(--ek-fs-base);
}

/* --- Puces de réassurance : coche menthe, filets discrets --------------- */
.auth-points {
  display: grid;
  gap: var(--ek-sp-3);
  margin: 0;
  padding: var(--ek-sp-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
}
.auth-points li {
  position: relative;
  padding-left: 28px;
  color: var(--ek-white);
  font-size: var(--ek-fs-sm);
  line-height: 1.55;
}
.auth-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ek-on-green-accent);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.55;
}

.auth-legal {
  margin: 0;
  color: var(--ek-on-green-muted);
  font-size: var(--ek-fs-xs);
  letter-spacing: 0.03em;
  line-height: 1.6;
}

/* Le vert éteint l'anneau de focus vert : on bascule en or, comme le thème
   le fait pour la topbar admin et la carte de solde. */
.auth-aside :focus-visible {
  outline-color: var(--ek-gold);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25);
}


/* ==========================================================================
   3. COLONNE DE FORMULAIRE
   .auth-container du thème est une CARTE flottante (430px, bordure, ombre,
   titre-logotype centré). Dans le split, elle devient une simple colonne :
   on neutralise le cadre et on repasse le titre à gauche, en poids léger.
   ========================================================================== */

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vh, 64px) clamp(20px, 4vw, 56px);
  background: var(--ek-white);
}

.auth-split .auth-container {
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Ici le <h1> n'est plus le logotype (il vit dans le panneau vert) : c'est
   un vrai titre de page, léger et aligné à gauche. */
.auth-split .auth-container h1 {
  margin: 0 0 var(--ek-sp-2);
  color: var(--ek-ink);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.005em;
  text-align: left;
}

.auth-split .auth-container > p,
.auth-split .auth-container .hint { text-align: left; }

.auth-sub {
  margin: 0;
  color: var(--ek-gray);
  font-size: var(--ek-fs-sm);
}

.auth-split .auth-container form { margin-top: var(--ek-sp-5); }

/* Séparation nette entre le formulaire et le renvoi « Pas encore de compte » */
.auth-alt {
  margin-top: var(--ek-sp-5);
  padding-top: var(--ek-sp-4);
  border-top: 1px solid var(--ek-line);
}

/* Ces renvois (« Ouvrir un compte », « Se connecter ») sont la seule issue de
   la page pour qui s'est trompé d'écran : au doigt, ils doivent se viser.
   inline-flex + min-height plutôt qu'un padding sur un lien en ligne, dont la
   zone cliquable ne suit pas la boîte de padding verticale. */
@media (pointer: coarse) {
  .auth-alt a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ==========================================================================
   4. CARTE DE SOLDE — nuances propres à l'espace client
   Le fond vert, l'amount et l'account-number viennent du thème. On n'ajoute
   ici que la mise en grille des comptes et un liseré or de lecture.
   ========================================================================== */

/* minmax(min(300px, 100%), 1fr) et non minmax(300px, 1fr) : le plancher de
   300px est un MINIMUM DUR. Dans la colonne de 288px d'un téléphone de 320px,
   il produisait une piste de 300px — 32px de trop — et c'est la PAGE entière
   qui se mettait à défiler horizontalement, pas la grille. */
#accounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--ek-sp-4);
  margin-bottom: var(--ek-sp-5);
}
#accounts > .balance-card,
#accounts .account-block > .balance-card { margin-bottom: 0; }

.balance-card {
  position: relative;
  overflow: hidden;
}
/* Filet or vertical : rappel d'accent Saham, sans ombre ni dégradé lourd. */
.balance-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ek-gold-warm);
}
/* Voile menthe très discret, purement décoratif. */
.balance-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(92, 167, 133, 0.16);
  pointer-events: none;
}
.balance-card > * { position: relative; z-index: 1; }


/* ==========================================================================
   5. FORMULAIRE DE VIREMENT — #transfer-form
   Colonne de lecture confortable, et regroupement visuel des champs
   conditionnels (#internal-fields / #external-fields), dont le display est
   piloté EN LIGNE par le script : on ne touche donc jamais à leur display.
   ========================================================================== */

#transfer-form { max-width: 560px; }

#transfer-form #internal-fields,
#transfer-form #external-fields {
  margin-top: var(--ek-sp-4);
  padding: var(--ek-sp-2) var(--ek-sp-4) var(--ek-sp-4);
  background: var(--ek-cream-soft);
  border: 1px solid var(--ek-line-soft);
  border-radius: var(--ek-r-field);
}

#transfer-form .hint {
  margin-top: var(--ek-sp-3);
  text-align: center;
}


/* ==========================================================================
   6. LISTE DES CARTES — #cards
   ========================================================================== */

#cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--ek-sp-4);
}
#cards > .card { margin-bottom: 0; gap: var(--ek-sp-4); }
/* Numéro masqué : chasse fixe pour aligner les puces et les 4 derniers chiffres. */
#cards .card > div:first-child > div:first-child {
  font-variant-numeric: tabular-nums;
  color: var(--ek-green);
}


/* ==========================================================================
   7. IBAN SUR LA CARTE DE SOLDE — dashboard.html
   L'IBAN vit à l'intérieur de l'aplat vert : ses teintes viennent donc des
   tokens « sur vert » (--ek-on-green-*), et les seuls rgba() employés sont
   des voiles blancs, comme partout ailleurs sur cette surface.
   ========================================================================== */

.account-iban {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ek-sp-2);
  margin-top: var(--ek-sp-2);
  min-width: 0;
}

.account-iban-key {
  font-size: var(--ek-fs-xs);
  font-weight: 500;
  letter-spacing: var(--ek-track-caps);
  text-transform: uppercase;
  color: var(--ek-on-green-muted);
}

/* Chasse fixe : les blocs de 4 doivent s'aligner, et l'IBAN doit rester
   lisible caractère par caractère quand on le recopie. */
.account-iban-val {
  font-family: var(--ek-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ek-fs-sm);
  letter-spacing: 0.04em;
  color: var(--ek-white);
  overflow-wrap: anywhere;
}

/* Mention discrète : ni alarme, ni vide. */
.account-iban-pending {
  font-size: var(--ek-fs-sm);
  font-style: italic;
  color: var(--ek-on-green-muted);
}

/* Bouton fantôme dessiné pour le fond vert : le .btn du thème y perdrait son
   contraste. Aucun token n'est redéfini, seuls des voiles blancs sont posés. */
.iban-copy {
  position: relative;
  flex: 0 0 auto;
  padding: 3px 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--ek-r-pill);
  color: var(--ek-white);
  font-family: inherit;
  font-size: var(--ek-fs-xs);
  font-weight: 500;
  letter-spacing: var(--ek-track-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ek-t-fast), border-color var(--ek-t-fast);
}
.iban-copy:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}
.iban-copy:active { background: rgba(255, 255, 255, 0.3); }

/* Cible tactile : au repos la pilule fait 23px de haut — un doigt la rate.
   Sur écran tactile elle passe au plancher de 44px. Le `min-height` du
   thème (§15 bis, `@media (pointer: coarse) button`) s'applique déjà à ce
   <button> ; on ne fixe ici que la largeur minimale et l'espacement, pour
   que la pilule ne devienne pas un rectangle étiré dans l'aplat vert. */
@media (pointer: coarse) {
  .iban-copy { min-width: 44px; padding: 3px 16px; }
  .account-iban { gap: var(--ek-sp-2) var(--ek-sp-3); }
}


/* ==========================================================================
   8. CONSULTATION DES DONNÉES DE CARTE — cards.html
   Bloc d'actions posé SOUS la carte (jamais sur l'aplat vert) : on reste
   donc sur les boutons du thème, sans retouche de couleur.
   ========================================================================== */

.card-reveal {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-2);
}
.card-reveal[hidden] { display: none; }

.card-reveal-actions {
  flex-wrap: wrap;
  gap: var(--ek-sp-2);
  margin-top: 0;
}
/* Actions serrées : ces boutons accompagnent une carte de 360px au plus. */
.card-reveal-actions .btn {
  padding: 7px 16px;
  font-size: var(--ek-fs-sm);
}
.card-reveal-actions .btn[hidden] { display: none; }

/* Compte à rebours : information de sécurité, discrète mais toujours lisible. */
.card-reveal-timer {
  margin: 0;
  color: var(--ek-gray-strong);
  font-variant-numeric: tabular-nums;
}
.card-reveal-timer[hidden] { display: none; }

.card-reveal .msg { margin: 0; }


/* ==========================================================================
   9. NUANCES DU RELEVÉ — #ledger
   Sens de l'opération porté par la couleur du système (jamais en dur).
   ========================================================================== */

#ledger .ledger-credit,
#ledger .ledger-debit {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
#ledger .ledger-credit { color: var(--ek-ok-ink); }
#ledger .ledger-debit { color: var(--ek-red); }
#ledger .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
#ledger .ledger-note { color: var(--ek-gray); }


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  /* Le panneau de réassurance passe AU-DESSUS du formulaire, en bandeau. */
  .auth-split {
    grid-template-columns: 1fr;
    min-height: 100vh;
  }
  .auth-aside {
    gap: var(--ek-sp-4);
    padding: var(--ek-sp-6) clamp(20px, 5vw, 40px);
  }
  .auth-aside h2 { max-width: none; font-size: 1.5rem; }
  .auth-panel { padding: var(--ek-sp-6) clamp(20px, 5vw, 40px) var(--ek-sp-7); }
  .auth-split .auth-container { max-width: 460px; }
}

@media (max-width: 640px) {
  /* Bandeau réduit à l'essentiel : marque + promesse. */
  .auth-aside { gap: var(--ek-sp-3); padding: var(--ek-sp-5) 20px; }
  .auth-aside h2 { font-size: 1.3rem; }
  .auth-aside p,
  .auth-points,
  .auth-legal { display: none; }
  /* …sauf l'accroche : c'est la « promesse » qu'on garde avec la marque.
     Si site-config.js l'a masquée (accroche vide), son display:none EN LIGNE
     l'emporte sur cette règle — le repli reste donc correct. */
  .auth-aside .auth-tagline { display: block; }

  #accounts,
  #cards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Un IBAN fait 27 caractères : sur mobile on resserre la chasse pour qu'il
     tienne sur la même ligne que son intitulé, plutôt que d'empiler trois
     lignes dans la carte de solde. */
  .account-iban-val {
    font-size: var(--ek-fs-xs);
    letter-spacing: 0.02em;
  }
  /* Les actions de carte occupent toute la largeur : deux boutons côte à côte
     à 375px deviennent illisibles. */
  .card-reveal-actions .btn { flex: 1 1 100%; }
}


/* ==========================================================================
   11. BLOC COMPTE + DOCUMENTS TÉLÉCHARGEABLES — dashboard.html
   Un compte est désormais un BLOC : l'aplat vert du solde, puis un panneau
   blanc qui lui est physiquement rattaché (relevé de compte, attestation
   d'IBAN). Le panneau vit HORS du vert : il utilise donc les boutons du
   thème sans la moindre retouche de couleur.
   ========================================================================== */

.account-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Les deux surfaces sont soudées : le bas de la carte de solde et le haut
   du panneau perdent leur arrondi, le filet devient une couture. */
.account-block > .balance-card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.doc-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-3);
  padding: var(--ek-sp-4) var(--ek-sp-5) var(--ek-sp-5);
  background: var(--ek-white);
  border: 1px solid var(--ek-line);
  border-top: 0;
  border-radius: 0 0 var(--ek-r-card) var(--ek-r-card);
}

/* Titre du panneau : icône « document » + libellé, à la taille d'un intitulé
   de section, jamais d'un titre de page. */
.doc-panel .doc-title {
  margin: 0;
  color: var(--ek-green);
  font-size: var(--ek-fs-sm);
  font-weight: 600;
  letter-spacing: var(--ek-track-caps);
  text-transform: uppercase;
}

.doc-panel .doc-field { min-width: 0; }
.doc-panel label { margin-top: 0; }
.doc-panel select,
.doc-panel input[type="date"] { margin-bottom: 0; }

/* Les dates personnalisées n'apparaissent que sur choix explicite : leur
   display est piloté par l'attribut hidden, jamais par une classe. */
.doc-panel .doc-dates[hidden] { display: none; }
.doc-panel .doc-dates { margin: 0; }

.doc-panel .doc-actions { margin-top: var(--ek-sp-2); gap: var(--ek-sp-3); }
/* Les deux téléchargements se partagent la largeur : ils ont le même poids. */
.doc-panel .doc-actions .btn { flex: 1 1 auto; }

/* showMsg() réécrit la classe de l'élément (« msg error »…) : on cible donc
   .msg dans le panneau, jamais la classe de départ. */
.doc-panel .msg { margin: var(--ek-sp-2) 0 0; }
.doc-panel .doc-hint { margin-top: 0; }

@media (max-width: 480px) {
  .doc-panel { padding: var(--ek-sp-4); }
  /* Deux pilules côte à côte sous 480px se coupent en plein mot. */
  .doc-panel .doc-actions .btn { flex: 1 1 100%; }
}


/* ==========================================================================
   12. ICÔNES DANS LES ACTIONS DU CLIENT
   Le thème pose déjà .ek-icon et la gouttière de [data-icon]. On ne règle
   ici que les deux cas où une icône cohabite avec une contrainte de mise
   en page propre à l'espace client.
   ========================================================================== */

/* Bouton pleine largeur (« Envoyer la demande de virement ») : [data-icon]
   le repasse en inline-flex, il faut donc recentrer son contenu. */
#transfer-form button[type="submit"][data-icon] { justify-content: center; }

/* Le bouton « Copier » de l'IBAN vit sur le vert : son icône hérite du blanc
   du bouton, et le libellé est isolé dans un <span> pour que le script
   puisse écrire « Copié » sans effacer le SVG. */
.iban-copy .iban-copy-label { white-space: nowrap; }
.iban-copy .ek-icon { opacity: 0.85; }