/* ───────────────────────────────────────────────────────────
   Démonstrateur eIDAS2 — feuille de style globale
   Banque : sobre & institutionnel (bleu/gris)
   Wallet : « ID Wallet » — neutre (graphite) + accent vert « confiance / validé »
   ─────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');

:root {
  /* Banque Démo — inspiration Doxallia (blanc, encre quasi-noire, bleu de confiance) */
  --bank-primary:      #1657c8;
  --bank-primary-700:  #0f3f95;
  --bank-primary-300:  #8fb2ec;
  --bank-accent:       #e8513a;  /* pop corail, usage parcimonieux */
  --bank-bg:           #f4f6f9;
  --bank-surface:      #ffffff;
  --bank-line:         #e6eaf0;
  --bank-ink:          #0e1726;
  --bank-muted:        #56627a;
  --bank-faint:        #8a93a6;
  --bank-ok:           #157a52;
  --bank-soft:         #f3f6fc;

  /* « ID Wallet » — wallet neutre. Jetons historiquement nommés rf-* :
     repris ici en graphite neutre + vert « confiance / validé ». */
  --rf-blue:       #222834;  /* primaire neutre (ex-Bleu France) */
  --rf-blue-700:   #11141b;  /* hover / pressé */
  --rf-red:        #e1000f;  /* conservé uniquement pour le micro-drapeau « émetteur PID » */
  --rf-ink:        #15171c;
  --rf-grey:       #5e6573;
  --rf-line:       #e4e6eb;
  --rf-bg:         #f4f5f8;
  --rf-ok:         #0f8a52;  /* vert confiance / validé */
  --rf-green-soft: #e9f5ee;  /* fond pastille « validé ANSSI » */
  --rf-green-ink:  #0a6b40;
  --rf-scan:       #36c489;  /* accent scan (lisible sur fond sombre) */

  /* Opérateur télécom « Téléo Mobile » (Acte 2 — réutilisation IBAN) */
  --tel-primary:     #7a23c4;
  --tel-primary-700: #5c1796;
  --tel-ink:         #1a1230;
  --tel-muted:       #6a6280;
  --tel-faint:       #9a93ad;
  --tel-line:        #ece7f3;
  --tel-bg:          #f7f5fb;
  --tel-soft:        #f3eefb;
  --tel-ok:          #157a52;

  /* Scène */
  --stage-bg:  #dfe5ec;

  --font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #cfd7e1;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--bank-ink);
}

#root { width: 100%; height: 100vh; overflow: hidden; }

button { font-family: var(--font); cursor: pointer; }

::selection { background: rgba(24,70,127,0.16); }

/* — animations — */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-soft { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes flow-right {
  from { stroke-dashoffset: 28; }
  to   { stroke-dashoffset: 0; }
}
@keyframes flow-left {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 28; }
}
@keyframes rise {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}
@keyframes pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes scanline {
  0%   { top: 8%; }
  100% { top: 88%; }
}
@keyframes ring {
  0%   { transform: scale(.9); opacity: .7; }
  100% { transform: scale(1.8); opacity: 0; }
}
/* — schéma ARF : pastilles voyageuses + halo de focus — */
@keyframes arf-r {
  0%   { left: 2%;  opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}
@keyframes arf-l {
  0%   { left: calc(100% - 8px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 2%; opacity: 0; }
}
@keyframes arf-focus {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232,81,58,.18), 0 14px 30px -18px rgba(232,81,58,.5); }
  50%      { box-shadow: 0 0 0 7px rgba(232,81,58,.10), 0 14px 30px -18px rgba(232,81,58,.5); }
}

.rise { animation: rise .45s cubic-bezier(.2,.7,.3,1) both; }

/* utilitaires scrollbar discrète */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 8px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }