/* Banque — teaser Rivabank (identité lime/noir réelle), « Bientôt disponible ». */
.rb-hero {
  --rb-lime: #ccff00; --rb-ink: #0b0d08; --rb-panel: #14170f;
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-6);
  padding: var(--sp-7); margin-bottom: var(--sp-4); border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, #1b2112, var(--rb-ink) 60%); border: 1px solid rgba(204, 255, 0, 0.16);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
.rb-hero__grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: radial-gradient(60% 90% at 15% 0%, rgba(204, 255, 0, 0.14), transparent 60%); }
.rb-hero__text { position: relative; align-self: center; color: #eef3e6; }
.rb-brand { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.rb-mark { width: 26px; height: 26px; }
.rb-brand b { font-weight: 800; }
.rb-badge { display: inline-flex; align-items: center; gap: 6px; margin: var(--sp-4) 0 0; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(204, 255, 0, 0.14); color: var(--rb-lime); font-size: var(--t-xs); font-weight: 700; }
.rb-badge svg { width: 13px; height: 13px; }
.rb-hero__text h1 { margin: 14px 0 8px; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; color: #fff; }
.rb-hero__text h1 span { color: var(--rb-lime); }
.rb-hero__text > p { margin: 0 0 var(--sp-5); max-width: 44ch; color: #b9c4ac; font-size: var(--t-lg); line-height: 1.5; }
.rb-hero__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
/* Bouton « M'avertir au lancement » + animation de clic */
.rb-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 232px; height: 50px; padding: 0 24px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  color: #0b0d08; font-size: var(--t-sm); font-weight: 800; letter-spacing: -0.01em;
  background: linear-gradient(135deg, #d7ff45, #a7e000);
  box-shadow: 0 10px 26px -10px rgba(204, 255, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.3s var(--ease); }
.rb-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(204, 255, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.rb-btn:active { transform: translateY(0) scale(0.97); }
.rb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rb-btn svg { width: 17px; height: 17px; }
.rb-btn__clip { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; }
.rb-btn__ripple { position: absolute; top: 50%; left: 50%; width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 60%); transform: translate(-50%, -50%) scale(0); opacity: 0; }
.rb-btn__ripple.is-on { animation: rb-ripple 0.6s ease-out forwards; }
.rb-btn__spark { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.rb-spk { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
  background: #eaff88; box-shadow: 0 0 8px rgba(204, 255, 0, 0.9); transform: translate(0, 0) scale(0.2); opacity: 0;
  animation: rb-spark 0.66s cubic-bezier(0.16, 1, 0.3, 1) var(--sd, 0ms) forwards; }
.rb-spk--big { width: 9px; height: 9px; margin: -4.5px; background: #ffffff; }
.rb-btn__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.rb-btn__label--done { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: translateY(9px) scale(0.95); }
.rb-btn.is-done .rb-btn__label--idle { opacity: 0; transform: translateY(-9px) scale(0.95); }
.rb-btn.is-done .rb-btn__label--done { opacity: 1; transform: translateY(0) scale(1); }
.rb-btn.is-done { background: linear-gradient(135deg, #b9ff5c, #6fd30a); cursor: default; box-shadow: 0 10px 26px -10px rgba(140, 230, 20, 0.6); }
.rb-btn--punch { animation: rb-punch 0.44s cubic-bezier(0.16, 1, 0.3, 1); }
.rb-btn__bell { transform-origin: 50% 16%; }
.rb-btn__bell.is-ring { animation: rb-ring 0.72s ease; }
.rb-btn__check path { stroke-dasharray: 28; stroke-dashoffset: 28; }
.rb-btn.is-done .rb-btn__check path { animation: rb-draw 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards; }

@keyframes rb-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes rb-spark { 0% { transform: translate(0, 0) scale(0.2); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; } }
@keyframes rb-punch { 0% { transform: scale(1); } 28% { transform: scale(0.93); } 58% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes rb-ring { 0%, 100% { transform: rotate(0); } 12% { transform: rotate(-17deg); } 26% { transform: rotate(14deg); } 40% { transform: rotate(-10deg); } 54% { transform: rotate(7deg); } 70% { transform: rotate(-4deg); } }
@keyframes rb-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rb-btn, .rb-btn * { animation: none !important; } }

/* Visuel : deux iPhones avec les vraies captures */
.rb-hero__visual { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; }
.rb-hero__halo { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(204, 255, 0, 0.22), transparent 70%); filter: blur(10px); }
.rb-phone { position: absolute; margin: 0; width: 230px; aspect-ratio: 250 / 541; border-radius: 34px; padding: 8px; background: linear-gradient(160deg, #26281f, #0a0b08); box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.75), inset 0 0 0 2px rgba(255, 255, 255, 0.05); overflow: hidden; }
.rb-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; display: block; }
.rb-phone__notch { position: absolute; z-index: 2; top: 15px; left: 50%; translate: -50% 0; width: 74px; height: 19px; border-radius: 11px; background: #06070a; }
.rb-phone--front { z-index: 2; transform: rotate(-5deg) translateX(-56px); animation: rb-float 6s var(--ease) infinite alternate; }
.rb-phone--back { z-index: 1; transform: rotate(7deg) translateX(70px) scale(0.96); opacity: 0.96; animation: rb-float 7s var(--ease) infinite alternate-reverse; }
@keyframes rb-float { from { transform: translateY(0) rotate(var(--r, -5deg)) translateX(var(--x, -56px)); } to { transform: translateY(-10px) rotate(var(--r, -5deg)) translateX(var(--x, -56px)); } }
.rb-phone--front { --r: -5deg; --x: -56px; }
.rb-phone--back { --r: 7deg; --x: 70px; }
.rb-stamp { position: absolute; z-index: 3; bottom: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(10, 12, 8, 0.82); border: 1px solid rgba(204, 255, 0, 0.4); color: var(--rb-lime); font-size: var(--t-sm); font-weight: 700; backdrop-filter: blur(8px); }
.rb-stamp svg { width: 14px; height: 14px; }

.rb-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.rb-perk { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--highlight), var(--shadow-card); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: view-in var(--dur) var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.rb-perk__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: var(--sp-3); background: rgba(204, 255, 0, 0.14); color: #7a9400; }
:root[data-theme="dark"] .rb-perk__ic { color: #ccff00; }
.rb-perk__ic svg { width: 20px; height: 20px; }
.rb-perk h3 { margin: 0 0 4px; font-size: var(--t-base); font-weight: 700; }
.rb-perk p { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }

@media (max-width: 920px) {
  .rb-hero { grid-template-columns: 1fr; padding: var(--sp-5); }
  .rb-hero__visual { min-height: 500px; margin-top: var(--sp-4); }
  .rb-perks { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rb-phone { width: 180px; }
  .rb-phone--front { --x: -40px; } .rb-phone--back { --x: 50px; }
}

/* ================= BRANDING IMMERSIF RIVABANK (toute l'app sur /banque) ================= */
:root[data-brand="rivabank"] {
  color-scheme: dark;
  --bg: #090b06;
  --glow-1: rgba(204, 255, 0, 0.16); --glow-2: rgba(170, 220, 0, 0.1); --glow-3: rgba(120, 200, 40, 0.08);
  --blob-a: #aee000; --blob-b: #7bbf00; --blob-c: #3f6b00; --blob-opacity: 0.14;
  --dots: rgba(204, 255, 0, 0.08);
  --panel: rgba(16, 20, 10, 0.62); --header-bg: rgba(9, 11, 6, 0.6);
  --card: rgba(22, 27, 14, 0.6); --card-hover: rgba(30, 37, 18, 0.72);
  --well: rgba(255, 255, 255, 0.03); --hover: rgba(204, 255, 0, 0.08); --chip: rgba(255, 255, 255, 0.08);
  --line: rgba(204, 255, 0, 0.1); --line-strong: rgba(204, 255, 0, 0.2);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --select-bg: #10140b;
  --ink: #eef3e6; --ink-2: #b9c4ac; --muted: #8f9a80; --faint: #5c6650;
  --accent: #ccff00; --accent-strong: #bff000; --accent-soft: rgba(204, 255, 0, 0.14); --accent-ring: rgba(204, 255, 0, 0.4); --accent-ink: #d8ff66;
  --grad-brand: linear-gradient(135deg, #ccff00 0%, #a6e000 100%); --on-accent: #0b0d08;
  --seg-on-bg: #ccff00; --seg-on-ink: #0b0d08; --tab-on: rgba(204, 255, 0, 0.1);
  --avatar-bg: #ccff00; --avatar-ink: #0b0d08;
  --tint-blue: #ccff00; --tint-mint: #9be870; --tint-amber: #e8d84f; --tint-violet: #b6ff5a;
}
/* Transition douce du recoloriage à l'entrée/sortie. */
.side, .header, .nav__link, .nav__label, .user, .brand__txt strong, .brand__txt span,
.search, .icon-btn, .crumbs, .kbd, .page-head h1, .page-head p { transition: background-color .45s ease, border-color .45s ease, color .45s ease; }
:root[data-brand="rivabank"] .rb-perk__ic { color: #ccff00; }

/* Animation d'entrée : portail lime depuis le coin des iPhones. */
.brand-enter { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: #ccff00; animation: brand-enter 850ms var(--ease) forwards; }
@keyframes brand-enter { 0% { clip-path: circle(150% at 82% 16%); } 100% { clip-path: circle(0% at 82% 16%); } }

/* ============ CHOIX DU NIVEAU — fidèle à l'app Rivabank (TierPicker) ============ */
.rb-pick { margin-top: var(--sp-6); }
.rb-pick__head { margin-bottom: var(--sp-5); }
.rb-pick__head h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 1.95rem); font-weight: 800; letter-spacing: -0.03em; }
.rb-pick__head p { margin: 6px 0 0; color: var(--ink-2); font-size: var(--t-base); }
.rb-pick__list { display: grid; gap: 14px; }

/* Une offre : infos à gauche, éventail de cartes à droite */
.rb-opt { position: relative; display: flex; align-items: stretch; gap: 18px; min-height: 172px; overflow: hidden; padding: 20px 22px;
  border-radius: 26px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  animation: view-in var(--dur) var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.rb-opt:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.055); border-color: rgba(204, 255, 0, 0.28); }

.rb-opt__info { min-width: 0; flex: 1; }
.rb-opt__top { display: flex; align-items: center; gap: 9px; }
.rb-opt__name { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #f4f5ee; }
.rb-opt__badge { padding: 2px 9px; border-radius: var(--r-pill); background: rgba(204, 255, 0, 0.14); color: #ccff00; font-size: 11.5px; font-weight: 700; }
.rb-opt__price { display: block; margin-top: 7px; font-size: var(--t-base); font-weight: 700; color: #f4f5ee; }
.rb-opt__perks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.rb-opt__perks li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #a7ad9e; }
.rb-chk { width: 13px; height: 13px; flex: none; color: #ccff00; }

/* Éventail : deux cartes empilées qui s'écartent au survol */
.rb-opt__fan { position: relative; width: 176px; flex: none; align-self: stretch; }
.rb-opt__card { position: absolute; overflow: hidden; border-radius: 10px; transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1); }
.rb-opt__card--back { top: 10px; right: 22px; width: 150px; opacity: 0.82; transform: rotate(-14deg); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7); }
.rb-opt__card--front { top: 50px; right: 0; width: 156px; transform: rotate(6deg); box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.8); }
.rb-opt:hover .rb-opt__card--back { transform: rotate(-18deg); }
.rb-opt:hover .rb-opt__card--front { transform: rotate(10deg); }

.rb-opt__caret { position: absolute; right: 16px; bottom: 18px; color: rgba(255, 255, 255, 0.4); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.rb-opt__caret svg { display: block; width: 16px; height: 16px; }
.rb-opt:hover .rb-opt__caret { transform: translateX(2px); color: rgba(204, 255, 0, 0.8); }

/* La carte — reproduite à l'identique, tout en unités conteneur (cqw) */
.rvcard { container-type: inline-size; position: relative; aspect-ratio: 1.586; border-radius: 14px; overflow: hidden; isolation: isolate;
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.rb-opt__card .rvcard { border-radius: 10px; box-shadow: none; }
.rvcard__pad { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 6cqw; }
.rvc-row { display: flex; justify-content: space-between; }
.rvc-row--top { align-items: flex-start; }
.rvc-row--bot { align-items: flex-end; }

.rv-mark { display: inline-block; flex: none; width: calc(var(--s) * 0.92); height: var(--s); background: var(--c);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 56% 40%, 100% 100%, 52% 100%, 0 37%); }
.rvc-wm { display: inline-flex; align-items: center; gap: 1.4cqw; }
.rvc-wm__t { font-weight: 800; font-size: 5.4cqw; line-height: 1; letter-spacing: -0.045em; }
.rvc-nfc { width: 6cqw; height: 7cqw; opacity: 0.8; }
.rvc-chip { width: 12.6cqw; height: 9.6cqw; }
.rvc-last { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 4.6cqw; letter-spacing: 0.14em; opacity: 0.9; font-variant-numeric: tabular-nums; }
.rvc-tail { text-align: right; line-height: 1; }
.rvc-tail__k { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2.5cqw; letter-spacing: 0.22em; opacity: 0.6; }
.rvc-tail__l { display: block; margin-top: 0.8cqw; font-weight: 800; font-size: 4.6cqw; letter-spacing: -0.02em; text-transform: uppercase; }

/* Couches de fond */
.rvbg { position: absolute; inset: 0; }
.rvbg-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.rvbg-center { position: absolute; inset: 0; display: grid; place-items: center; }
.rv-emboss { position: relative; display: inline-block; }

@media (max-width: 560px) {
  .rb-opt { gap: 10px; padding: 16px 18px; min-height: 150px; }
  .rb-opt__name { font-size: 1.35rem; }
  .rb-opt__fan { width: 120px; }
  .rb-opt__card--back { top: 8px; right: 14px; width: 102px; }
  .rb-opt__card--front { top: 36px; width: 106px; }
  .rb-opt__perks li { font-size: 12.5px; }
}