/* =====================================================================
   LA MAISON DU NIMBA — Espace client : le complément

   L'apparence vient de admin/style.css, chargée juste avant celle-ci.
   Ce fichier ne redéfinit RIEN : il ajoute seulement ce que le tableau
   de bord n'a pas besoin de connaître — la page d'entrée à deux
   colonnes, les reçus, quelques nuances de texte.

   Le jour où le tableau de bord change de teinte, l'espace client change
   avec lui. C'est le but.
   ===================================================================== */

/* --- Petits textes ---------------------------------------------------
   « espace-mot » est la phrase d'explication : plus discrète qu'un
   paragraphe ordinaire, mais pas au point d'être illisible. */
.espace-mot {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gris-doux, #6B756E);
}

.espace-texte {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  white-space: pre-line;   /* les retours à la ligne saisis par l'équipe comptent */
}

.espace-lien-doux {
  margin: 16px 0 0;
  font-size: 13px;
  text-align: center;
}
.espace-lien-doux--pied { margin-top: 26px; }

/* --- Le champ du code à six chiffres ---------------------------------
   Large, espacé, tabulaire : on recopie six chiffres depuis un e-mail,
   souvent d'un appareil à l'autre, et l'on doit voir d'un coup d'œil
   combien on en a déjà tapé. Les chiffres à chasse fixe évitent aussi
   qu'un 1 paraisse plus étroit que le reste. */
.champ-code {
  font-size: 24px !important;
  letter-spacing: .34em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.champ-code::placeholder { letter-spacing: .34em; opacity: .35; }

/* Un bouton qui doit se lire comme un lien : « m'envoyer un nouveau
   code » est une phrase, pas une action à mettre en valeur. */
.lien-nu {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lien-nu:hover { color: var(--or-lisible); }

.espace-renvoi { margin-top: 4px; }

/* Le piège à robots : hors de l'écran, jamais en display:none — un champ
   masqué de cette façon est ignoré par certains robots, et le piège ne
   prend plus rien. */
.champ-cache {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* --- La page d'entrée, à deux colonnes -------------------------------
   Entrer et ouvrir un compte, côte à côte : le second geste ne doit pas
   avoir l'air d'un repli, ni obliger à chercher un lien. */
.connexion--large { align-items: flex-start; padding: 42px 20px; }

.espace-entree {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

/* CES TROIS-LÀ SONT POSÉS SUR LE VERT NUIT, pas sur une carte blanche.
   Le tableau de bord les colore pour l'intérieur de sa carte — encre
   sombre, vert profond — et repris tels quels ils devenaient illisibles
   sur ce fond : « La Maison du Nimba » donnait 1,1:1, le lien de pied
   1,3:1. Mesuré à l'écran, pas supposé. On les remet donc en clair. */
.espace-entree .connexion__marque {
  color: var(--ivoire);
  text-align: center;
}

.espace-entree .connexion__sous {
  color: var(--or);
  text-align: center;
}

.espace-entree .espace-lien-doux--pied a {
  color: var(--ivoire);
  opacity: .78;
}
.espace-entree .espace-lien-doux--pied a:hover { opacity: 1; }

/* Les messages, eux aussi hors carte : le gabarit du tableau de bord les
   dessine sur du papier. */
.espace-entree > .message {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.espace-entree__deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.espace-carte {
  background: #fff;
  border: 1px solid rgba(29, 36, 31, .1);
  padding: 28px 26px 26px;
}

/* La seconde carte est posée en creux : les deux gestes sont offerts,
   mais celui qu'on vient faire neuf fois sur dix est le premier. */
.espace-carte--seconde { background: #FBFAF6; }

.espace-carte h1 {
  margin: 0 0 10px;
  font-size: 22px;
}

.espace-carte .bouton { width: 100%; }

/* --- Une réservation passée ------------------------------------------
   Elle reste lisible — on y revient pour un reçu — mais elle recule. */
.passee td { opacity: .62; }

/* --- Les reçus -------------------------------------------------------
   Repliés par défaut : on en cherche un, rarement tous. */
.recu {
  background: #fff;
  border: 1px solid rgba(29, 36, 31, .1);
  margin-bottom: 12px;
}

.recu__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.recu__tete::-webkit-details-marker { display: none; }
.recu[open] .recu__tete { border-bottom: 1px solid rgba(29, 36, 31, .09); }

.recu__quoi { display: flex; flex-direction: column; gap: 3px; }
.recu__somme { font-weight: 600; white-space: nowrap; }

.recu__corps { padding: 24px 26px 22px; }

.recu__marque {
  margin: 0 0 20px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 21px;
}
.recu__marque small {
  display: block;
  margin-top: 4px;
  font-family: inherit;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris-doux, #6B756E);
}

.recu__lignes { margin: 0; }
.recu__lignes > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(29, 36, 31, .07);
}
.recu__lignes dt {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-doux, #6B756E);
}
.recu__lignes dd { margin: 0; font-size: 14.5px; text-align: right; }

.recu__total { border-bottom: none !important; padding-top: 14px !important; }
.recu__total dd { font-size: 18px; font-weight: 600; }

.recu__pied {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--gris-doux, #6B756E);
}

.recu__actions { margin: 20px 0 0; }

/* Un chiffre qui est un mot — « Fondateur », « Sans terme » — ne peut pas
   garder la taille d'un nombre sans déborder de sa carte. */
.chiffre--mot { font-size: 20px !important; }

/* Le bloc qui ferme le compte : signalé, jamais dramatisé. */
.formulaire--danger { border-left: 3px solid #B8543F; }

/* --- Impression ------------------------------------------------------
   Une seule chose doit sortir de l'imprimante : le reçu ouvert. Le rail,
   les autres reçus et les boutons n'ont rien à y faire. */
@media print {
  .rail, .rail-toggle, .titre-page .actions, .recu__actions,
  .message, .espace-lien-doux { display: none !important; }

  .zone { margin: 0 !important; padding: 0 !important; }
  .recu:not([open]) { display: none; }
  .recu { border: none; }
  .recu__tete { display: none; }
  .recu__corps { padding: 0; }
}