/* Extrait tel quel de design/revelation.html (design validé). */
/* Décision Cherif (retouche) : sur cette page, la bannière défile avec le contenu au lieu de rester collée en haut — elle gênait l'immersion de la révélation. */
  .fictif-banner { position: static; }
  body { background: var(--sim-bg); color: var(--sim-ink); min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
  [hidden] { display: none !important; }
  .wrap { margin: 0 auto; max-width: 480px; padding-bottom: var(--sp-8); }

  /* Accueil façon Wave : fond indigo plein, carte bleu ciel + cadre QR, feuille blanche aux coins très arrondis, grille 2x4 */
  .home { background: var(--wv-bg); color: #fff; padding: var(--sp-3) var(--gutter) 0; position: relative; }
  .home .row1 { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); }
  .gear { background: none; border: 0; color: #fff; width: var(--tap); height: var(--tap); display: grid; place-items: center; margin-left: calc(-1 * var(--sp-3)); }
  .gear .i { width: 26px; height: 26px; fill: currentColor; stroke: none; }
  .brand { font: 800 var(--fs-sm) var(--font-display); letter-spacing: .02em; opacity: .9; display: flex; gap: var(--sp-2); align-items: center; }
  .balrow { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 56px; }
  .bal { font: 700 var(--fs-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
  .dots { display: flex; gap: 10px; } .dots i { width: 13px; height: 13px; border-radius: 50%; background: #fff; }
  .eye { background: none; border: 0; color: #fff; width: var(--tap); height: var(--tap); display: grid; place-items: center; }
  .eye .i { width: 28px; height: 28px; stroke-width: 2.2; }
  .who { text-align: center; font-size: var(--fs-xs); opacity: .85; margin: 0 0 var(--sp-4); }
  .wcard { background: var(--wv-card); border-radius: var(--r-xl); padding: var(--sp-4); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; position: relative; z-index: 1; margin-bottom: -48px;
    background-image: repeating-linear-gradient(135deg, var(--wv-card-pat) 0 9px, transparent 9px 26px); }
  .qrframe { grid-column: 2; background: #fff; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3) var(--sp-2); display: grid; justify-items: center; gap: var(--sp-1); }
  .qrframe svg.qr { width: 132px; height: 132px; display: block; }
  .scan { display: inline-flex; align-items: center; gap: var(--sp-2); font: 700 var(--fs-sm) var(--font-text); color: #000; background: none; border: 0; min-height: var(--tap); margin-bottom: calc(-1 * var(--sp-2)); }
  .scan .i { stroke-width: 2; }
  .mascot { grid-column: 3; justify-self: end; width: 40px; height: 40px; border-radius: 50%; background: var(--sim-navy); color: var(--wv-card); display: grid; place-items: center; }
  .mascot .i { width: 24px; height: 24px; stroke-width: 2.4; }
  .sheet { background: var(--sim-card); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 64px var(--gutter) var(--sp-4); margin: 0 calc(-1 * var(--gutter)); position: relative; z-index: 0; }
  .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4) var(--sp-1); }
  .q { display: grid; justify-items: center; gap: var(--sp-2); background: none; border: 0; font-weight: 500; font-size: var(--fs-xs); color: #000; min-height: var(--tap); }
  .q .c { width: 56px; height: 56px; border-radius: var(--r-full); display: grid; place-items: center; transition: transform var(--dur-fast) var(--ease-out); }
  .q .c svg { width: 28px; height: 28px; }
  .q:active .c { transform: scale(.94); }
  .sep { height: 12px; background: var(--wv-sep); margin: var(--sp-4) calc(-1 * var(--sp-0, 0px)); }
  .hist { background: var(--sim-card); padding: 0 var(--gutter); }
  .tx { list-style: none; margin: 0; padding: 0; }
  .tx li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) 0 var(--sp-3); }
  .tx .t { min-width: 0; } .tx .t b { display: block; font-weight: 500; font-size: var(--fs-md); color: var(--wv-title); overflow-wrap: anywhere; line-height: 1.25; }
  .tx .t span { color: #5f6368; font-size: var(--fs-sm); }
  .tx .a { font: 500 var(--fs-md) var(--font-text); color: var(--wv-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tx li.fraud { background: #fdecea; margin: 0 calc(-1 * var(--gutter)); padding: var(--sp-4) var(--gutter) var(--sp-3); border-left: 4px solid var(--sim-out); }
  .tx li.fraud .t b, .tx li.fraud .a { color: var(--sim-out); font-weight: 700; }
  .fakenote { margin: var(--sp-2) 0 var(--sp-4); padding: var(--sp-3); border-radius: var(--r-md); background: var(--banner-bg); color: var(--banner-ink); font-weight: 700; font-size: var(--fs-sm); }
  .steps { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); align-items: center; margin: 0 var(--gutter); background: var(--sim-card); border: 1px solid var(--sim-line); border-radius: var(--r-lg); padding: var(--sp-4); }
  .steps div { display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--sim-muted); }
  .steps b { font: 700 var(--fs-lg) var(--font-display); color: var(--sim-ink); font-variant-numeric: tabular-nums; }
  .steps .after b { color: var(--sim-out); } .steps .arrow { color: var(--sim-muted); }

  .stage { margin: var(--sp-6) var(--gutter) 0; background: var(--sim-navy); color: #fff; border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); min-height: 340px; display: grid; align-content: center; gap: var(--sp-5); position: relative; }
  .msg { font: 700 var(--fs-lg)/1.3 var(--font-display); opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); padding-left: var(--sp-4); border-left: 4px solid var(--sim-sky); }
  .msg.on { opacity: 1; transform: none; }
  .msg.last { border-color: var(--sim-yellow); }
  .replay { justify-self: start; min-height: var(--tap); padding: 0 var(--sp-4); background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / .5); border-radius: var(--r-full); display: inline-flex; gap: var(--sp-2); align-items: center; }
  @media (hover: hover) { .replay:hover { background: rgb(255 255 255 / .12); } }

  .sec { margin: var(--sp-6) var(--gutter) 0; display: grid; gap: var(--sp-3); }
  .sec h2 { margin: 0 0 var(--sp-2); font: 800 var(--fs-lg) var(--font-display); }
  .sms { background: var(--sim-card); border: 2px dashed var(--sim-orange); border-radius: var(--r-lg); padding: var(--sp-5); display: grid; gap: var(--sp-3); }
  .sms .flag { justify-self: start; background: var(--sim-orange); color: #fff; font: 800 var(--fs-xs) var(--font-text); letter-spacing: .1em; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); }
  .sms .bubble { background: var(--sim-bg); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm); }
  .sms small { color: var(--sim-muted); }
  dl { margin: 0; display: grid; gap: var(--sp-2); }
  dt { font-weight: 700; color: var(--sim-navy); } dd { margin: 0 0 var(--sp-2); color: var(--sim-muted); }
  .gl { background: var(--sim-card); border-radius: var(--r-lg); padding: var(--sp-5); border: 1px solid var(--sim-line); }
  .safe { background: var(--sim-sky-soft); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; gap: var(--sp-3); align-items: flex-start; border: 2px solid var(--sim-sky); }
  .safe .i { width: 32px; height: 32px; color: var(--sim-navy); }
  .safe p { margin: 0; font-weight: 600; }
  @media (min-width: 768px) { .wrap { max-width: 560px; } }

/* Ajout d'intégration (mêmes tokens) : bandeau de connexion perdue */
.conn-note { position: sticky; top: var(--banner-h); z-index: 49; padding: var(--sp-3) var(--gutter); background: var(--sim-navy); color: #fff; font-weight: 600; font-size: var(--fs-sm); text-align: center; }