/*
 * Koriva · GAB de démonstration. Écrans 800 × 600 d'après la maquette « Koriva · GAB · Parcours » (03/11/2026) :
 * parcours standard KORIVA (colonne publicitaire à gauche) et parcours SIB (écrans de la banque partenaire).
 */
:root {
  --bg-primary: #ffffff;
  --text-primary: #1c1917;
  --text-secondary: #8c8580;
  --text-danger: #b01e28;
  --text-on-accent: #ffffff;
  --surface-secondary: #f4f2ef;
  --accent-primary: #dc3821;
  --brand-aplat: #e0452f;
  --action-secondary: #2457f5;
  --border-input: #d9d4cf;
  --feedback-danger-soft: #f6e8e5;
  --feedback-success-soft: #e3f4ea;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --sib: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  /* Façade du GAB */
  --steel-1: #3b3b42;
  --steel-2: #2a2a30;
  --steel-3: #1d1d22;
  /* Accueil du site */
  --intro-bg: #e9e7e3;
  --intro-ink: #1c1917;
  --intro-muted: #6f6964;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 50% 20%, #34343b 0%, #1a1a1e 70%);
  color: #fff;
  font-family: var(--body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }

.stage[hidden] { display: none; }
.stage { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stage.enter .atm { animation: atm-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes atm-in { from { opacity: 0; translate: 0 40px; } }
.hint { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin: 10px 16px 0; text-align: center; }

/* Le GAB entier est dessiné à 1180 × 1140 et mis à l'échelle de la fenêtre (app.js). */
.atm {
  width: 1180px;
  height: 1140px;
  flex: none;
  transform-origin: center center;
  background: linear-gradient(180deg, var(--steel-1), var(--steel-2) 60%, var(--steel-3));
  border-radius: 36px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 26px 40px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.atm-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 12px; }
.atm-brand { height: 52px; padding: 9px 16px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.atm-top-right { display: flex; align-items: center; gap: 12px; }
.atm-badge { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 14px; border-radius: 999px; }
.change-card { font-size: 14px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.change-card:hover { background: rgba(255, 255, 255, 0.18); }

.atm-face { display: flex; align-items: flex-start; justify-content: center; gap: 18px; }
.screen-bezel { padding: 18px; background: #0c0c0e; border-radius: 22px; box-shadow: inset 0 0 0 2px #000, 0 2px 0 rgba(255, 255, 255, 0.06); }
.screen { position: relative; width: 800px; height: 600px; background: var(--bg-primary); color: var(--text-primary); overflow: hidden; border-radius: 6px; }

/* Touches de fonction physiques, alignées sur les 4 rangées de l'écran (y = 184, 282, 380, 478). */
.fdk-column { position: relative; width: 74px; height: 636px; }
.fdk-key {
  position: absolute;
  left: 4px;
  width: 66px;
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #d9d9df, #a9a9b2);
  box-shadow: 0 4px 0 #6c6c75, 0 6px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}
.fdk-key::after { content: ''; position: absolute; inset: 18px 22px; border-radius: 4px; background: rgba(0, 0, 0, 0.18); }
.fdk-key:active, .fdk-key.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #6c6c75, 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }

.atm-lower { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 6px 40px 0; }
.slots { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.card-slot, .cash-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0; }
.card-slot { cursor: pointer; }
.slot-mouth {
  position: relative;
  width: 170px;
  height: 22px;
  border-radius: 6px;
  background: #050506;
  box-shadow: inset 0 3px 6px #000, 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: visible;
}
.slot-mouth.wide { width: 300px; height: 26px; }
.card-slot.ready .slot-mouth { box-shadow: inset 0 3px 6px #000, 0 0 0 3px rgba(224, 69, 47, 0.9), 0 0 18px rgba(224, 69, 47, 0.7); animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: inset 0 3px 6px #000, 0 0 0 3px rgba(224, 69, 47, 0.35), 0 0 6px rgba(224, 69, 47, 0.3); } }
.slot-label { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.3px; }
.card {
  position: absolute;
  left: 25px;
  bottom: 11px;
  width: 120px;
  height: 76px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3a3f4a, #15171c);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s ease;
}
.atm.mode-sib .card { background: linear-gradient(120deg, #ffb71a, #fb8c1e 55%, #f0591e); }
.card.out { transform: scaleY(1); }
.cash {
  position: absolute;
  left: 40px;
  top: 12px;
  width: 220px;
  height: 0;
  border-radius: 4px;
  background: repeating-linear-gradient(0deg, #c9e4c5 0 6px, #a6cfa0 6px 8px);
  transition: height 0.9s ease;
}
.cash.out { height: 70px; }

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 84px) 150px;
  grid-auto-rows: 62px;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, #26262b, #18181c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.key {
  border: 0;
  border-radius: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  background: linear-gradient(180deg, #e9e9ee, #b8b8c0);
  color: #18181b;
  box-shadow: 0 4px 0 #6c6c75, 0 6px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}
.key.action { font-family: var(--body); font-size: 17px; font-weight: 600; color: #fff; text-align: left; padding-left: 16px; }
.key.annuler { background: linear-gradient(180deg, #e2463a, #b52b21); box-shadow: 0 4px 0 #7d1b14, 0 6px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.key.corriger { background: linear-gradient(180deg, #f4c23d, #d39a12); color: #3a2a00; box-shadow: 0 4px 0 #8f6806, 0 6px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.key.valider { background: linear-gradient(180deg, #2fb26b, #1c8a4d); box-shadow: 0 4px 0 #0f5a31, 0 6px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.key:active, .key.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #6c6c75, 0 2px 5px rgba(0, 0, 0, 0.4); }
.key.blank { visibility: hidden; }

/* ------------------------------------------------------------------ */
/* Parcours standard KORIVA (800 × 600), positions de la maquette        */
/* ------------------------------------------------------------------ */
.screen > * { position: absolute; }

/* Publicité : colonne fixe à gauche, 264 px, photo du kit + aplat vermillon. */
.ad { left: 0; top: 0; width: 264px; height: 600px; overflow: hidden; }
.ad > img { position: absolute; top: 0; height: 100%; width: 340.91%; max-width: none; }
.ad .aplat { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px 22px; background: var(--brand-aplat); margin: 0; color: var(--text-on-accent); font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -0.2px; font-variation-settings: 'opsz' 14; }

.hd { left: 264px; top: 0; width: 536px; height: 88px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; background: var(--bg-primary); }
.hd.full { left: 0; width: 800px; }
.hd .logo { width: 169.36px; height: 44px; }
.lang-pill { display: flex; align-items: center; gap: 8px; padding: 10px 18px 10px 16px; border-radius: 999px; background: var(--surface-secondary); font-size: 15px; font-weight: 500; line-height: 20px; color: var(--text-primary); }
.lang-pill img { width: 17.17px; height: 17.17px; margin: 1.42px; }

.col { left: 288px; width: 488px; margin: 0; text-align: center; }
.col.full { left: 40px; width: 720px; }
.surtitre { top: 98px; font-weight: 700; font-size: 14px; line-height: 18px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-primary); }
.titre { top: 122px; font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 46px; letter-spacing: -0.4px; font-variation-settings: 'opsz' 14; }
.titre.compact { font-size: 34px; line-height: 40px; letter-spacing: -0.3px; }
.titre .accent { color: var(--brand-aplat); }
.consigne { top: 174px; font-size: 22px; line-height: 30px; color: var(--text-secondary); }
.corps { font-size: 18px; line-height: 26px; color: var(--text-secondary); }
.corps-fort { font-size: 18px; font-weight: 700; line-height: 26px; color: var(--text-primary); }

/* Option FDK : 320 × 76 collée au bord droit, chevron vers la touche. */
.fdk {
  left: 480px;
  width: 320px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 20px 0 24px;
  border: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--surface-secondary);
  color: var(--text-primary);
  cursor: pointer;
}
.fdk.secondaire { color: var(--action-secondary); }
.fdk.principal { background: var(--accent-primary); color: var(--text-on-accent); }
.fdk img { width: 28px; height: 28px; flex: none; }
.fdk .label { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 34px; letter-spacing: -0.2px; font-variation-settings: 'opsz' 14; white-space: nowrap; }
.fdk.flash, .tile.flash, .sib-btn.flash { filter: brightness(0.9); }
.row-1 { top: 184px; } .row-2 { top: 282px; } .row-3 { top: 380px; } .row-4 { top: 478px; }

/* 00 · Accueil : fond vermillon uni, textes blancs */
.idle-fond { inset: 0; background: var(--brand-aplat); }
.sur-vermillon { color: #fff; }
.consigne.sur-vermillon, .corps.sur-vermillon { color: rgba(255, 255, 255, 0.82); }
.idle-logo { left: 447px; top: 64px; width: 169.36px; height: 44px; }
.idle-card { left: 480.5px; top: 171px; width: 103px; height: 78px; animation: card-nudge 2.4s ease-in-out infinite; }
@keyframes card-nudge { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -6px; } }
.idle-hit { inset: 0; background: none; border: 0; cursor: pointer; }

/* 03 · Tuiles de montant (2 × 3) */
.tile { width: 236px; height: 84px; border: 0; border-radius: var(--radius-lg); background: var(--surface-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; white-space: nowrap; color: var(--text-primary); }
.tile b { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 36px; letter-spacing: -0.2px; font-variation-settings: 'opsz' 14; }
.tile span { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--text-secondary); }
.tile.autre { background: var(--bg-primary); border: 2px solid var(--border-input); }
.tile.autre span { font-size: 20px; font-weight: 700; line-height: 26px; color: var(--text-primary); }
.tile.c1 { left: 288px; } .tile.c2 { left: 540px; }
.tile.r1 { top: 184px; } .tile.r2 { top: 283px; } .tile.r3 { top: 382px; }

/* 02 · Code, 03b · Montant saisi */
.code-box { left: 362px; top: 240px; width: 340px; height: 72px; border-radius: var(--radius-lg); background: var(--surface-secondary); display: flex; align-items: center; justify-content: center; gap: 20px; }
.code-box.error { background: var(--feedback-danger-soft); }
.code-box img { width: 22px; height: 22px; }
.code-box.error img { animation: shake 0.4s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.s-error { left: 532px; top: 178px; translate: -50% 0; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; line-height: 26px; color: var(--text-danger); white-space: nowrap; }
.s-error img { width: 24px; height: 24px; }
.conseil { left: 532px; top: 332px; translate: -50% 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--text-secondary); white-space: nowrap; }
.conseil img { width: 18px; height: 18px; }
.amount-box { left: 362px; top: 240px; width: 340px; height: 88px; border-radius: var(--radius-lg); background: var(--surface-secondary); border: 2px solid var(--accent-primary); display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 18px 24px; white-space: nowrap; }
.amount-box .value { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 46px; letter-spacing: -0.4px; font-variation-settings: 'opsz' 14; }
.amount-box .value.placeholder { color: #c7c1bc; }
.amount-box .devise { font-size: 18px; line-height: 26px; color: var(--text-secondary); }
.amount-note { left: 288px; width: 488px; top: 340px; margin: 0; text-align: center; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--text-danger); }

/* Traitement (hors maquette) : même gabarit, partie droite. */
.spinner { left: 500px; top: 250px; width: 64px; height: 64px; border-radius: 50%; border: 6px solid var(--surface-secondary); border-top-color: var(--accent-primary); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 04 · QR code à scanner */
.badges-title { left: 40px; top: 254px; margin: 0; white-space: nowrap; }
.badges { left: 40px; top: 290px; display: flex; gap: 12px; align-items: flex-start; }
.badge { width: 140px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.badge img { width: 72px; height: 72px; object-fit: contain; }
.badge b { width: 128px; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--text-primary); }
.badge span { width: 128px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.rewards-line { left: 40px; top: 448px; display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 26px; white-space: nowrap; }
.rewards-line img { width: 24px; height: 24px; }
.mention { left: 40px; top: 492px; width: 420px; margin: 0; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--text-secondary); }
.qr-box { left: 548px; top: 250px; width: 212px; height: 212px; border-radius: var(--radius-xl); border: 2px solid var(--border-input); background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.qr-box svg { width: 172px; height: 172px; display: block; }
.qr-wait { font-size: 14px; line-height: 20px; color: var(--text-secondary); text-align: center; padding: 16px; }

/* Rattachement vu en direct : voile sur l'écran du QR (les deux parcours). */
.linked { inset: 88px 0 0 0; background: rgba(255, 255, 255, 0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; animation: fadein 0.35s ease; color: var(--text-primary); }
.linked.sib { inset: 100px 0 0 0; }
.linked .ok { width: 104px; height: 104px; border-radius: 50%; background: var(--feedback-success-soft); display: flex; align-items: center; justify-content: center; animation: pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.linked .ok i { width: 66px; height: 66px; border-radius: 50%; background: #1f9d57; display: flex; align-items: center; justify-content: center; }
.linked h2 { margin: 6px 0 0; font-family: var(--display); font-size: 40px; line-height: 46px; letter-spacing: -0.4px; }
.linked p { margin: 0; font-size: 22px; line-height: 30px; color: var(--text-secondary); text-align: center; }
@keyframes fadein { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0.4); } }

/* Message bref sur l'écran (démo : choix non disponibles). */
.toast { left: 50%; bottom: 22px; translate: -50% 0; padding: 10px 18px; border-radius: 999px; background: rgba(28, 25, 23, 0.9); color: #fff; font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; animation: toast 2.6s ease both; pointer-events: none; z-index: 5; }
@keyframes toast { 0% { opacity: 0; translate: -50% 8px; } 10%, 85% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ */
/* Parcours SIB : écrans de la banque (reproduction, brouillon)          */
/* ------------------------------------------------------------------ */
.screen.sib { background: #a9b0bd; font-family: var(--sib); }
.sib-fond { inset: 0; background: linear-gradient(180deg, #c3c9d6, #9ea6b4); overflow: hidden; }
.sib-fond .lumiere { position: absolute; left: -20px; top: -50px; width: 840px; height: 580px; max-width: none; }
.sib-fond .traits { position: absolute; left: 0; top: 67.2px; width: 800px; height: 533.4px; opacity: 0.55; max-width: none; }
.sib-afrique { max-width: none; }
.sib-photo { inset: 0; width: 800px; height: 600px; object-fit: cover; }
.sib-hd { left: 0; top: 0; width: 800px; height: 100px; }
.sib-hd > * { position: absolute; }
.sib-hd .bande { left: 0; top: 0; width: 800px; height: 73px; background: #fe8303; }
.sib-hd .sous-zigzag { left: 0; top: 0; width: 800px; height: 100px; }
.sib-hd .nom { right: 38px; top: 10px; margin: 0; font-weight: 700; font-size: 30px; line-height: 32px; color: #000; white-space: nowrap; }
.sib-hd .groupe { left: 496px; top: 46px; margin: 0; font-weight: 700; font-size: 18px; line-height: 18px; color: #000; white-space: nowrap; }
.sib-hd .groupe span { font-weight: 600; color: #fc4a0d; }
.sib-hd .zigzag { left: 25px; top: 56px; width: 145px; height: 42.26px; }
.sib-titre { left: 40px; width: 720px; margin: 0; text-align: center; font-weight: 700; font-size: 34px; line-height: 40px; color: #111; text-shadow: 0 0 6px rgba(255, 255, 255, 0.85); }
.sib-question { left: 40px; width: 720px; margin: 0; text-align: center; font-weight: 600; font-size: 30px; line-height: 36px; color: #111; text-shadow: 0 0 6px rgba(255, 255, 255, 0.85); }

.sib-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 20px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 7px;
  background: linear-gradient(180deg, #46494e, #212123 45%, #19191a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  filter: drop-shadow(0 3px 2.5px rgba(0, 0, 0, 0.35));
  color: #fff;
  cursor: pointer;
  font-family: var(--sib);
}
.sib-btn.gauche { padding: 0 20px 0 16px; }
.sib-btn span { flex: 1 0 0; min-width: 1px; text-align: center; font-weight: 700; font-size: 26px; line-height: 30px; }
.sib-btn.grand span { font-size: 32px; line-height: 36px; }
.sib-btn img { width: 30px; height: 32px; flex: none; }
.sib-btn.sans-carte span { color: #f6a623; }

/* SIB 01 · Accueil */
.sib-etiquette { left: 168px; top: 101px; width: 430px; height: 61px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: linear-gradient(180deg, #ffe21f, #f7d000); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); font-weight: 700; font-size: 29px; line-height: 30px; color: #1a1a1a; white-space: nowrap; }
.sib-encart { left: 350px; top: 343px; width: 439px; height: 163px; border-radius: 10px; background: linear-gradient(180deg, #fff1d2, #fbdda6); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); overflow: hidden; }
.sib-encart > * { position: absolute; }
.sib-encart p { left: 26px; top: 30px; margin: 0; font-weight: 700; font-size: 21px; line-height: 32px; color: #1a1a1a; white-space: nowrap; }
.sib-encart sup { font-size: 13px; vertical-align: baseline; }
.sib-encart .qr { left: 315px; top: 14px; width: 100px; height: 104px; border-radius: 4px; background: #fff; }
.sib-encart .qr img { position: absolute; left: 7px; top: 7px; width: 86px; height: 86px; }
.sib-encart .voir { left: 310px; top: 124px; width: 111px; height: 22px; border-radius: 4px; background: #e8352b; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 9px; line-height: 11px; }
.sib-hit { inset: 0; background: none; border: 0; cursor: pointer; }

/* SIB 02 · Lecteur de carte (la carte remonte dans la fente). */
.sib-lecteur { left: 216px; top: 236px; width: 408px; height: 338px; }
.sib-lecteur svg { display: block; width: 408px; height: 338px; overflow: visible; }
.sib-lecteur .k-card { transition: transform 1s cubic-bezier(0.5, 0, 0.3, 1); }
.sib-lecteur.waiting .k-card { animation: card-bob 1.6s ease-in-out infinite; }
.sib-lecteur.inserting .k-card { transform: translateY(-232px); }
@keyframes card-bob { 50% { transform: translateY(-10px); } }

/* SIB 04 · Code */
.sib-clavier { left: 168px; top: 256px; width: 116px; height: 118px; }
.sib-main { left: 213.6px; top: 330px; width: 140.4px; height: 176px; }
.sib-code { left: 315px; top: 273px; width: 342px; height: 79px; display: flex; align-items: center; justify-content: center; border: 2px solid #e88a00; border-radius: 8px; background: linear-gradient(180deg, #ffbe2e, #f59f00); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); font-weight: 700; font-size: 60px; line-height: 60px; letter-spacing: 4px; color: #111; padding-top: 16px; }
.sib-code.error { animation: shake 0.4s; }

/* SIB 09 · Autre montant (tapé sur le clavier de l'ATM) */
.sib-montant { left: 210px; top: 262px; width: 380px; height: 84px; display: flex; align-items: baseline; justify-content: center; gap: 12px; padding: 14px 0; border: 2px solid #e88a00; border-radius: 8px; background: linear-gradient(180deg, #ffbe2e, #f59f00); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); color: #111; font-weight: 700; white-space: nowrap; overflow: hidden; }
.sib-montant .value { font-size: 52px; line-height: 60px; }
.sib-montant .value.placeholder { opacity: 0.4; }
.sib-montant .devise { font-size: 26px; line-height: 30px; }
.sib-montant.error { animation: shake 0.4s; }
.sib-regle { left: 40px; top: 362px; width: 720px; margin: 0; text-align: center; font-weight: 700; font-size: 22px; line-height: 28px; color: #9b1c12; text-shadow: 0 0 6px rgba(255, 255, 255, 0.85); }

/* SIB 05 · Réveil */
.reveil { left: 314px; top: 282px; width: 206px; height: 200px; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.3)); }
.reveil > * { position: absolute; }
.reveil img { display: block; width: 100%; height: 100%; max-width: none; }
.reveil .n { margin: 0; font-family: var(--body); font-weight: 700; font-size: 15px; line-height: normal; color: #222; text-align: center; white-space: nowrap; }
.reveil .aiguilles { left: 68px; top: 70px; width: 68px; height: 22px; transform-origin: 35px 22px; animation: tick 2.4s steps(8) infinite; }
.reveil .aiguilles img { position: absolute; left: -2px; top: -2px; width: 72px; height: 26.35px; }
@keyframes tick { to { transform: rotate(360deg); } }

/* SIB 08 · Indicateur d'attente */
.sib-attente { left: 320px; top: 328px; width: 160px; height: 160px; animation: spin 1.1s steps(12) infinite; }

/* SIB 10 · Lier à l'appli KORIVA */
.sib-accroche { left: 44px; top: 196px; width: 420px; margin: 0; font-weight: 600; font-size: 26px; line-height: 36px; color: #111; text-shadow: 0 0 6px rgba(255, 255, 255, 0.85); }
.sib-avantages { left: 44px; top: 246px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sib-avantage { display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.72); font-weight: 700; font-size: 24px; line-height: 30px; color: #111; white-space: nowrap; }
.sib-avantage .ico { position: relative; width: 40px; height: 40px; flex: none; }
.sib-avantage .ico img { position: absolute; inset: 0; width: 40px; height: 40px; object-fit: contain; }
.sib-avantage .ico img.historique { left: 5.17px; top: 3.5px; width: 29.66px; height: 31.36px; }
.sib-qr { left: 488px; top: 194px; width: 272px; height: 252px; border-radius: 14px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); overflow: hidden; }
.sib-qr > * { position: absolute; }
.sib-qr .logo { left: 51px; top: 16px; width: 169.36px; height: 44px; }
.sib-qr .qr-zone { left: 50px; top: 70px; width: 172px; height: 172px; display: flex; align-items: center; justify-content: center; }
.sib-qr .qr-zone svg { width: 172px; height: 172px; display: block; }
.sib-mention { left: 488px; top: 456px; width: 272px; margin: 0; text-align: center; font-family: var(--body); font-size: 14px; line-height: 20px; color: #2a2a2a; }

/* ------------------------------------------------------------------ */
/* Accueil du site : fond blanc, logo animé, choix de la carte            */
/* ------------------------------------------------------------------ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: #fff;
  color: var(--intro-ink);
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.intro.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-ui { position: absolute; inset: 0; }

/* Logo : le symbole se dessine, se retourne avec un reflet, bat, puis le nom apparaît (4,1 s). */
.logo-anim { position: absolute; left: 50%; top: var(--logo-cy); width: var(--logo-w); height: var(--logo-h); translate: -50% -50%; display: flex; align-items: center; gap: var(--gap-w); }
.la-mark { flex: none; width: var(--mark-w); height: var(--logo-h); perspective: 500px; }
.la-mark svg, .la-word svg { display: block; width: 100%; height: 100%; overflow: visible; }
.la-word { flex: none; width: var(--word-w); height: var(--logo-h); }
.la-stroke { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0; }
.la-shine { opacity: 0; }
.intro.play .logo-anim { animation: la-rise 4.1s cubic-bezier(0.65, 0, 0.25, 1) both; }
.intro.play .la-mark { animation: la-slide 4.1s cubic-bezier(0.65, 0, 0.25, 1) both; }
.intro.play .la-mark svg { animation: la-flip 4.1s ease-in-out both; }
.intro.play .la-stroke { animation: la-draw 4.1s ease-in-out both; }
.intro.play .la-fill { animation: la-fill 4.1s ease both; }
.intro.play .la-shine { animation: la-shine 4.1s ease-in-out both; }
.intro.play .la-word { animation: la-word 4.1s cubic-bezier(0.65, 0, 0.25, 1) both; }
@keyframes la-rise { 0%, 82% { transform: translateY(var(--rise)) scale(1.6); } 100% { transform: none; } }
@keyframes la-slide { 0%, 56% { transform: translateX(var(--mark-shift)); } 72%, 100% { transform: none; } }
@keyframes la-flip {
  0%, 22% { transform: rotateY(0) scale(1); }
  38% { transform: rotateY(360deg) scale(1); }
  45% { transform: rotateY(360deg) scale(1); }
  50% { transform: rotateY(360deg) scale(1.16); }
  55%, 100% { transform: rotateY(360deg) scale(1); }
}
@keyframes la-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 24% { stroke-dashoffset: 0; opacity: 1; } 34%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes la-fill { 0%, 22% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes la-shine {
  0%, 37.9% { opacity: 0; transform: translateX(0) skewX(-20deg); }
  38% { opacity: 0.7; transform: translateX(0) skewX(-20deg); }
  48% { opacity: 0.7; transform: translateX(84px) skewX(-20deg); }
  48.1%, 100% { opacity: 0; transform: translateX(84px) skewX(-20deg); }
}
@keyframes la-word {
  /* Le nom sort quand le symbole a fini de glisser à gauche. */
  0%, 69% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-14px); }
  70% { opacity: 1; clip-path: inset(0 100% 0 0); transform: translateX(-14px); }
  82%, 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
.intro-mark { position: absolute; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--intro-muted); opacity: 0; animation: rise 0.8s 0.2s ease both; }
.intro-mark.tl { left: 28px; top: 24px; color: var(--intro-ink); font-weight: 600; }
.intro-mark.tr { right: 28px; top: 24px; text-align: right; line-height: 18px; }
.intro-mark.bl { left: 28px; bottom: 22px; }
.intro-mark.br { right: 28px; bottom: 22px; }
.intro-copy { position: absolute; left: 0; right: 0; top: var(--copy-top); text-align: center; padding: 0 16px; }
.intro-copy .kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-primary); }
.intro-copy h1 { margin: 8px 0 6px; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: 'opsz' 48; }
.intro-copy p.sub { margin: 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.4; color: var(--intro-muted); }
.intro-copy > * { opacity: 0; }
.intro.ready .intro-copy > * { animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.intro.ready .intro-copy > :nth-child(2) { animation-delay: 0.08s; }
.intro.ready .intro-copy > :nth-child(3) { animation-delay: 0.16s; }
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

.picks { position: absolute; left: 0; right: 0; top: var(--picks-top); display: flex; justify-content: center; gap: clamp(20px, 4vw, 64px); padding: 0 16px; perspective: 1200px; }
.pick { min-width: var(--card-w); display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--intro-ink); opacity: 0; text-align: center; }
.intro.ready .pick { animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.3s; }
.intro.ready .pick + .pick { animation-delay: 0.42s; }
.pick:focus-visible { outline: none; }
.pick:focus-visible .bank-card { outline: 3px solid var(--accent-primary); outline-offset: 6px; }
.pick .tag { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12px; color: var(--intro-muted); margin-top: 14px; }
.pick b { font-family: var(--display); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
.pick .desc { font-size: 14px; line-height: 1.35; color: var(--intro-muted); }

.bank-card {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 1.586;
  border-radius: calc(var(--card-w) * 0.055);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
  box-shadow: 0 18px 40px -12px rgba(28, 25, 23, 0.45), 0 2px 6px rgba(28, 25, 23, 0.15);
  text-align: left;
}
.pick:hover .bank-card { box-shadow: 0 30px 60px -16px rgba(28, 25, 23, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 60px -10px rgba(224, 69, 47, 0.45); }
.bank-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, 0.35), transparent 60%); mix-blend-mode: soft-light; pointer-events: none; }
.bank-card.std { background: radial-gradient(120% 140% at 0% 0%, #4a505c 0%, #23262d 45%, #121317 100%); color: #f4f2ef; }
.bank-card.std .lines { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 110% 120%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px); }
.bank-card.sib { background: linear-gradient(120deg, #ffb71a 0%, #fb8c1e 55%, #f0591e 100%); color: #1a1a1a; }
.bank-card.sib .eclair { position: absolute; left: 0; bottom: 0; width: 55%; height: 75%; background: #f7a51c; opacity: 0.55; clip-path: polygon(0 34%, 17% 15%, 12% 41%, 30% 25%, 26% 58%, 42% 39%, 38% 67%, 52% 54%, 50% 100%, 0 100%); }
.bank-card .chip { position: absolute; left: 8%; top: 36%; width: 15%; aspect-ratio: 1.25; border-radius: 14%; background: linear-gradient(135deg, #f6d27a, #c8962e); box-shadow: inset 0 0 0 1px rgba(120, 80, 20, 0.45); }
.bank-card .chip::before { content: ''; position: absolute; inset: 30% 0; border-top: 1px solid rgba(120, 80, 20, 0.6); border-bottom: 1px solid rgba(120, 80, 20, 0.6); }
.bank-card .chip::after { content: ''; position: absolute; inset: 0 35%; border-left: 1px solid rgba(120, 80, 20, 0.6); border-right: 1px solid rgba(120, 80, 20, 0.6); }
.bank-card .nfc { position: absolute; left: 26%; top: 38%; width: 7%; aspect-ratio: 1; opacity: 0.75; }
.bank-card .brand { position: absolute; left: 8%; top: 10%; font-family: var(--display); font-weight: 700; font-size: calc(var(--card-w) * 0.058); letter-spacing: 0.02em; }
.bank-card .zig { position: absolute; left: 7%; top: 9%; width: 30%; }
.bank-card .num { position: absolute; left: 8%; bottom: 22%; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: calc(var(--card-w) * 0.052); letter-spacing: 0.12em; opacity: 0.9; }
.bank-card .holder { position: absolute; left: 8%; bottom: 9%; font-size: calc(var(--card-w) * 0.036); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.bank-card .network { position: absolute; right: 7%; bottom: 9%; width: 16%; aspect-ratio: 1.6; }
.bank-card .network i { position: absolute; top: 0; width: 62.5%; height: 100%; border-radius: 50%; }
.bank-card .network i:first-child { left: 0; background: rgba(255, 255, 255, 0.55); }
.bank-card .network i:last-child { right: 0; background: rgba(255, 255, 255, 0.3); }
.bank-card.sib .network i:first-child { background: rgba(26, 26, 26, 0.5); }
.bank-card.sib .network i:last-child { background: rgba(26, 26, 26, 0.25); }
.bank-card .bankname { position: absolute; right: 7%; top: 11%; font-weight: 700; font-size: calc(var(--card-w) * 0.04); text-align: right; line-height: 1.2; }

/* Choix fait : la carte part vers la fente, l'autre s'efface. */
.intro.picked .pick { pointer-events: none; }
.intro.picked .pick:not(.chosen) { animation: fade-away 0.5s ease forwards; }
.pick.chosen { animation: none; opacity: 1; }
.pick.chosen .bank-card { animation: insert 1s cubic-bezier(0.55, 0, 0.3, 1) forwards; }
.pick.chosen > :not(.bank-card) { animation: fade-away 0.3s ease forwards; }
@keyframes fade-away { to { opacity: 0; translate: 0 12px; } }
@keyframes insert {
  0% { transform: rotateX(0) translateY(0) scale(1); }
  30% { transform: rotateX(0) translateY(-24px) scale(1.06); }
  100% { transform: rotateX(68deg) translateY(55vh) scale(0.55); opacity: 0; }
}

@media (max-width: 640px) {
  .picks { flex-direction: column; align-items: center; gap: 22px; }
  .intro-mark.tr, .intro-mark.br, .intro-mark.bl { display: none; }
  .pick .tag { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro *, .stage.enter .atm, .idle-card, .reveil .aiguilles, .sib-attente, .sib-lecteur .k-card { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}