/* FOOTPASS v2 · Onboarding « le Pass ID comme objet à conquérir » */

.ob {
  position: absolute; inset: 0; z-index: 55;
  background: #050506; color: #FAFAFA;
  display: flex; flex-direction: column;
  font-family: 'Inter', -apple-system, sans-serif;
  overflow: hidden;
}
.ob::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 420px 320px at 50% -8%, rgba(255,255,255,0.05), transparent 70%);
}
.ob.ob-exit { animation: obExit 460ms cubic-bezier(0.4,0,1,1) forwards; }
@keyframes obExit { to { opacity: 0; transform: scale(1.04); } }

/* ═══════ HEADER · back + 3 actes ═══════ */
.ob-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 4px 16px 0; min-height: 40px;
}
.ob-back {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.07); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: transform 150ms, background 180ms;
}
.ob-back:active { transform: scale(0.9); }
.ob-back.hidden { visibility: hidden; }
.ob-segs { flex: 1; display: flex; gap: 6px; }
.ob-seg { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; }
/* Progression en vert brand · lisible d'un coup d'œil, pas blanc sur noir */
.ob-seg i { display: block; height: 100%; background: var(--acc-bright, #00C49A); border-radius: 99px; transition: width 420ms cubic-bezier(0.2,0,0,1); }
.ob-actlabel {
  font: 700 9.5px/1 'Orbitron', sans-serif; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5); flex-shrink: 0; min-width: 86px; text-align: right;
}

/* ═══════ STEP SHELL ═══════ */
.ob-step {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  animation: obIn 380ms cubic-bezier(0.2,0,0,1);
}
@keyframes obIn { from { opacity: 0; transform: translateY(16px); } }
/* Clavier iOS dans l'onboarding : glisse depuis le bas comme le vrai */
.ob-kb {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  transform: translateY(105%);
  transition: transform 380ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
.ob-kb.show { transform: translateY(0); }
.ob-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 16px 22px 10px;
  scrollbar-width: none;
}
.ob-body::-webkit-scrollbar { display: none; }
.ob-foot {
  padding: 10px 22px 26px;
  display: flex; flex-direction: column; gap: 11px;
  flex-shrink: 0;
}

/* ═══════ TYPO ═══════ */
.ob-kicker {
  font: 700 8.5px/1 'Orbitron', sans-serif; letter-spacing: 0.28em;
  color: #71717A; margin-bottom: 14px;
}
.ob-kicker.accent { color: var(--acc-bright, #00C49A); }
.ob-h1 {
  font-weight: 900; font-size: 29px; line-height: 1.07;
  letter-spacing: -0.035em; text-wrap: balance; color: #FAFAFA;
}
/* Titre paiement : 2 phrases, chacune sur sa propre ligne (taille ajustée pour tenir) */
.ob-h1-pay { font-size: 22px; line-height: 1.2; text-wrap: normal; }
.ob-sub {
  margin-top: 10px; font-size: 13.5px; line-height: 1.55;
  color: #A1A1AA; text-wrap: pretty;
}
.ob-sub strong { color: #E4E4E7; font-weight: 600; }
/* « 0 CHF aujourd'hui » · argument de réassurance clé, mis en évidence */
.ob-free {
  display: inline-block; font-weight: 700; white-space: nowrap;
  color: var(--acc-bright, #00C49A);
  background: color-mix(in srgb, var(--acc-bright, #00C49A) 14%, transparent);
  padding: 1px 7px; border-radius: 7px;
}
.ob.light .ob-free { color: var(--acc, #00A37E); background: color-mix(in srgb, var(--acc, #00A37E) 12%, transparent); }
.ob-free-wrap { white-space: nowrap; }
.ob-subline { display: inline-block; white-space: nowrap; margin-top: 4px; }

/* ═══════ BUTTONS ═══════ */
.ob-cta {
  height: 52px; width: 100%; border: none; border-radius: 15px;
  background: #fff; color: #0A0A0B;
  font: 700 15px/1 'Inter', sans-serif; letter-spacing: -0.01em;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  transition: transform 150ms, opacity 250ms; flex-shrink: 0;
}
.ob-cta:active { transform: scale(0.97); }
.ob-cta:disabled { opacity: 0.28; cursor: default; }
.ob-cta.ghost { background: rgba(255,255,255,0.08); color: #fff; }
.ob-cta.applepay { background: #000; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
/* Voie express Apple Pay (haut du bloc paiement) */
.ob-applepay {
  width: 100%; height: 50px; margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.16); cursor: pointer;
  background: #000; color: #fff;
  font: 600 14.5px/1 'Inter', sans-serif; letter-spacing: -0.01em;
  transition: transform 150ms, opacity 200ms;
}
.ob-applepay:active { transform: scale(0.98); }
.ob-applepay-label { display: inline-flex; align-items: center; gap: 5px; }
.ob-apple-logo { position: relative; top: -1px; }
.ob-applepay:disabled { opacity: 0.55; cursor: default; }
.ob-applepay .ob-spinner { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }
/* CTA carte = action de marque, vert, distinct du noir Apple Pay */
.ob-cta.start { background: var(--acc, #00A37E); color: #fff; }
.ob-cta.start .ob-spinner { border-color: rgba(255,255,255,0.35); border-top-color: #fff; }
.ob-link {
  background: none; border: none; padding: 4px;
  color: #71717A; font: 500 12.5px/1 'Inter', sans-serif;
  cursor: pointer; align-self: center;
}
.ob-link:active { color: #A1A1AA; }
.ob-link.inline { margin: -6px 0 2px; padding: 8px 0; min-height: 40px; display: inline-flex; align-items: center; align-self: flex-start; color: #A1A1AA; text-decoration: underline; text-underline-offset: 3px; }
.ob-link:disabled { opacity: 0.45; cursor: default; }
.ob-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #56565C; font-size: 10.5px; line-height: 1.4; text-align: center;
}
.ob-note svg { flex-shrink: 0; }
.ob-note .lnk { color: #82828A; text-decoration: underline; text-underline-offset: 2px; }
.ob-note.txt { display: block; }
.ob-toast { font-size: 11px; color: #A1A1AA; text-align: center; animation: obIn 250ms; }

.ob-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(10,10,11,0.25); border-top-color: #0A0A0B;
  animation: obSpin 800ms linear infinite;
}
.ob-cta.applepay .ob-spinner { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }
@keyframes obSpin { to { transform: rotate(360deg); } }

/* ═══════ PASS CARD · passeport numérique du football ═══════ */
.ob-cardwrap { perspective: 900px; }
.ob-card {
  position: relative; width: 100%; aspect-ratio: 1.586; /* format ID-1 · carte d'identité réelle (85,6 × 54 mm) */
  border-radius: 14px; padding: 9px 16px 0;
  background:
    repeating-radial-gradient(circle at 112% -18%, rgba(255,255,255,0.024) 0 1px, transparent 1px 6px),
    linear-gradient(140deg, #222226 0%, #101012 52%, #18181B 100%);
  border: 1px solid rgba(255,255,255,0.13);
  /* Épaisseur physique : arête claire en haut, ombre porteuse en bas, comme une carte en main */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.14),
    inset 0 -1.5px 0 rgba(0,0,0,0.55),
    inset 1px 0 0 rgba(255,255,255,0.05),
    inset -1px 0 0 rgba(0,0,0,0.3),
    0 24px 60px rgba(0,0,0,0.55);
  overflow: hidden; display: flex; flex-direction: column;
}
.ob-card.verified { border-color: color-mix(in srgb, var(--acc) 45%, rgba(255,255,255,0.13)); }
.ob-card .shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(112deg, transparent 32%, rgba(255,255,255,0.13) 46%, transparent 60%);
  transform: translateX(-130%);
}
.ob-card.shimmer .shine { animation: obShine 3.2s ease-in-out infinite; }
@keyframes obShine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
.ob-card-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.ob-card-logo { height: 9px; width: auto; display: block; opacity: 0.92; margin-top: 2px; }
.ob-card-headright { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.ob-card-tier { font: 800 8px/1 'Orbitron', sans-serif; letter-spacing: 0.12em; padding: 4px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.7); }
.ob-card-tier.pro { border: none; background: linear-gradient(135deg, #E8C96A, #A8853A); color: #1a1206; }
.ob-card.gold .ob-card-tier { border-color: rgba(232,201,106,0.45); color: rgba(232,201,106,0.85); }
.ob-card.gold .ob-card-tier.pro { border: none; color: #1a1206; }
/* Puce de contact : colonne de sécurité droite, sous l'en-tête ·
   alignée avec le début des champs, marge nette du bord (norme titres de séjour) */
.ob-card-icao { position: absolute; right: 16px; top: 40px; z-index: 1; display: block; color: rgba(255,255,255,0.55); }
/* Titre du document en haut à gauche : PASS ID, sous-titre à la ligne */
.ob-card-doc { display: flex; flex-direction: column; gap: 2px; }
.ob-card-doctitle {
  font: 600 6.5px/1.3 'Inter', sans-serif; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.78);
  white-space: nowrap;
}
.ob-card-doctitle.main {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.3em; line-height: 1.3;
}
.ob-card-body { position: relative; z-index: 1; display: flex; gap: 12px; margin-top: 4px; flex: 1; min-height: 0; }
.ob-card-photo {
  position: relative; width: 58px; aspect-ratio: 3 / 4; align-self: flex-start; margin-top: 1px; flex-shrink: 0;
  /* Format photo d'identité réglementaire 3:4 · tête + épaules, jamais étirée.
     Centrée verticalement dans sa zone, comme sur une CNI */
  border-radius: 2.5px;
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
}
.ob-card-photo svg, .ob-card-photo img {
  width: 100%; height: 100%; display: block; border-radius: 2.5px; object-fit: cover;
  /* Légère désaturation d'impression sécurisée */
  filter: saturate(0.78) contrast(1.04);
}
.ob-card-mono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 2.5px; background: linear-gradient(155deg, #2A2A30, #161619); font: 800 15px/1 'Inter', sans-serif; letter-spacing: 0.02em; color: #EDEDF2; }
/* Le guilloché de la carte continue PAR-DESSUS la photo · preuve qu'elle est
   imprimée dans la carte et non collée (comme les vraies cartes d'identité) */
.ob-card-photo::after {
  content: ''; position: absolute; inset: 0; border-radius: 2.5px; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 130% -30%, transparent 0 5px, rgba(255,255,255,0.05) 5px 5.8px),
    repeating-radial-gradient(circle at -40% 130%, transparent 0 7px, rgba(255,255,255,0.04) 7px 7.7px);
  /* Encrage léger intégrant la photo à la surface */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 4px rgba(0,0,0,0.25);
}
.ob-card-holo {
  position: absolute; right: -11px; bottom: -11px; width: 32px; height: 32px; border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(150,215,255,0.55), rgba(255,175,220,0.45), rgba(170,255,205,0.5), rgba(150,215,255,0.55));
  mix-blend-mode: screen; opacity: 0.4;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 0 0 7px rgba(255,255,255,0.07);
}
.ob-card.verified .ob-card-holo { opacity: 0.65; }
/* Sceau scan-facial supprimé de la carte · la vérification vit dans la matière
   (guilloché, MRZ, photo fantôme) et dans le badge « Identité vérifiée » sous le titre */
.ob-card-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-card-fields > * { flex-shrink: 0; }
.ob-card-val.empty { color: rgba(255,255,255,0.32); }
/* Code couleur lisible : libellé (question) en doré discret, valeur (réponse) en blanc */
.ob-card-lbl {
  font: 600 5.8px/1 'Inter', sans-serif; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.ob-card.gold .ob-card-lbl { color: rgba(205, 169, 78, 0.85); }
.ob-card-name {
  margin: 0 0 1px; font: 700 12px/1.2 'Inter', sans-serif; letter-spacing: -0.01em; color: #FAFAFA;
  text-shadow: 0 1px 1px rgba(0,0,0,0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-card-name.ph { color: rgba(255,255,255,0.30); letter-spacing: 0.06em; }
.ob-card-cols { display: flex; gap: 16px; }
.ob-card-cols > div { min-width: 0; }
.ob-card-val {
  margin: 0 0 2px; font: 600 8.5px/1.3 'Inter', sans-serif; color: #EDEDF0;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-card-val.club { display: flex; align-items: center; gap: 4px; }
.ob-card-val.club svg { flex-shrink: 0; color: rgba(255,255,255,0.5); }

/* Code d'invitation · émis par le registre du club, clé de Luhn incluse */
/* Faits de l'invitation : qui / quel rôle / quand · lisibles en un balayage */
.ob-inv-facts {
  margin-top: 18px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
  background: #101012; overflow: hidden;
}
.ob-inv-row {
  display: flex; align-items: baseline; gap: 12px; padding: 11px 14px;
}
.ob-inv-row + .ob-inv-row { border-top: 1px solid rgba(255,255,255,0.07); }
.ob-inv-lbl {
  flex-shrink: 0; width: 76px;
  font: 600 9px/1.4 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: #71717A;
}
.ob-inv-val { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ob-inv-val b { font: 650 13.5px/1.25 'Inter', sans-serif; color: #FAFAFA; }
.ob-inv-val em { font: 400 11.5px/1.35 'Inter', sans-serif; font-style: normal; color: #8E8E96; }
.ob-invcode {
  margin-top: 14px; padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.16);
  display: flex; flex-direction: column; gap: 4px;
}
.ob-invcode-lbl {
  font: 600 8px/1 'Inter', sans-serif; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.ob-invcode-val {
  font: 700 15px/1 'SF Mono', ui-monospace, monospace;
  color: var(--acc-bright, #00C49A); letter-spacing: 0.06em;
}
.ob-invcode-meta { font: 500 9.5px/1.4 'Inter', sans-serif; color: #8A8A93; }
/* Coller le lien d'invitation · champ + bouton Coller */
.ob-invpaste { display: flex; gap: 8px; margin-top: 18px; }
.ob-invpaste-input { flex: 1; cursor: text; display: flex; align-items: center; }
.ob-invpaste-val { font: 600 11.5px/1 'SF Mono', ui-monospace, monospace; color: var(--acc-bright, #00C49A); letter-spacing: 0.01em; }
.ob-invpaste-btn {
  flex-shrink: 0; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14);
  background: #1A1A1D; color: #FAFAFA; font: 600 13px/1 'Inter', sans-serif; cursor: pointer;
}
.ob-invpaste-btn:disabled { opacity: 0.35; cursor: default; }
.ob-invpaste-hint { margin-top: 10px; font: 400 11px/1.5 'Inter', sans-serif; color: #71717A; }
.ob-cta.disabled { opacity: 0.4; pointer-events: none; }
.ob-card-crest { width: 11px; height: auto; flex-shrink: 0; display: block; }
.ob-card.gold .ob-card-val.club svg { color: #CDA94E; }
/* Rangée du numéro : pleine largeur, sous la photo et les champs ·
   le numéro court le long du bas comme sur une carte bancaire */
.ob-card-numrow { position: relative; z-index: 1; margin-top: auto; padding-top: 4px; display: flex; align-items: flex-end; justify-content: space-between; gap: 5px; }
/* Numéro embossé · caractères en relief comme sur une carte bancaire */
.ob-card-num {
  margin-top: 3px; font: 700 9.5px/1 'Inter', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 -1px 1px rgba(0,0,0,0.75);
  letter-spacing: 0.08em; color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ob-card-badge {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  white-space: nowrap;
  /* Discret, comme une mention imprimée dans la carte · pas une pastille */
  font: 700 5px/1 'Inter', sans-serif; letter-spacing: 0.22em;
  color: rgba(47, 211, 122, 0.55);
  padding: 0; border-radius: 0; background: none;
}
.ob-card-badge svg { opacity: 0.7; }
.ob-card-badge.off { color: rgba(255,255,255,0.28); background: none; }
/* ── Éléments de sécurité anti-falsification ── */
/* Guilloché : entrelacs fins en fond, comme sur les billets et passeports */
.ob-card-guilloche {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; color: rgba(255,255,255,0.05);
}
.ob-card.gold .ob-card-guilloche { color: rgba(212, 175, 55, 0.07); }
/* Emblème central embossé · logomark masqué, en relief dans la matière de la carte.
   (Le chemin du masque est relatif à CE fichier CSS, donc ../assets/.) */
.ob-card-emblem {
  position: absolute; top: 50%; left: 50%; z-index: 0;
  transform: translate(-50%, -50%);
  width: 11%; aspect-ratio: 3 / 4;
  -webkit-mask: url(../assets/logomark_white.png) center / contain no-repeat;
          mask: url(../assets/logomark_white.png) center / contain no-repeat;
  background: rgba(245, 228, 186, 0.4);
  filter:
    drop-shadow(0 1px 0.6px rgba(0, 0, 0, 0.85))
    drop-shadow(0 -1px 0.6px rgba(255, 255, 255, 0.25));
  pointer-events: none;
}
.ob-card.gold .ob-card-emblem { background: rgba(247, 230, 190, 0.42); }
/* Portrait fantôme : double du portrait en filigrane · fondu dans la carte
   (blend screen : seules les lumières du visage émergent, pas de boîte sombre) */
.ob-card-ghost {
  position: absolute; right: 16px; bottom: 54px; z-index: 0;
  width: 23px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px;
  filter: grayscale(1) brightness(1.45) contrast(1.06);
  mix-blend-mode: screen; opacity: 0.3; pointer-events: none;
}
/* (fil kinégramme retiré) */
/* Bande MRZ · zone de lecture machine, pleine largeur, fond clair comme un vrai passeport */
.ob-card-mrz {
  position: relative; z-index: 1;
  margin: 3px -16px 0; padding: 3px 15px 4px;
  background: linear-gradient(180deg, #EDEDEA, #E2E2DE);
  display: flex; flex-direction: column; gap: 1px;
  font: 600 9.5px/1.3 'SF Mono', ui-monospace, monospace;
  color: #232328; letter-spacing: 0.045em; white-space: nowrap; overflow: hidden;
}
.ob-card.float { animation: obFloat 6s ease-in-out infinite alternate; }
/* Carte droite, bien posée · simple flottement vertical, sans inclinaison */
@keyframes obFloat { from { transform: translateY(3px); } to { transform: translateY(-5px); } }

/* ── Édition or · accents dorés sobres sur Modern Black ── */
.ob-card.gold {
  border-color: rgba(212, 175, 55, 0.5);
  background:
    radial-gradient(120% 90% at 108% -12%, rgba(212, 175, 55, 0.13), transparent 55%),
    repeating-radial-gradient(circle at 112% -18%, rgba(255,255,255,0.024) 0 1px, transparent 1px 6px),
    linear-gradient(140deg, #232019 0%, #101012 52%, #18181B 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(212, 175, 55, 0.07), inset 0 26px 44px -30px rgba(212, 175, 55, 0.18);
}
.ob-card.gold .shine {
  background: linear-gradient(112deg, transparent 32%, rgba(232, 201, 106, 0.17) 46%, transparent 60%);
}
.ob-card.gold .ob-card-icao { color: #CDA94E; }
.ob-card.gold .ob-card-doctitle { color: rgba(226, 197, 123, 0.6); }
.ob-card.gold .ob-card-doctitle.main { color: #E8C96A; }
.ob-card.gold .ob-card-photo::after {
  background:
    repeating-radial-gradient(circle at 130% -30%, transparent 0 5px, rgba(226, 197, 123, 0.07) 5px 5.8px),
    repeating-radial-gradient(circle at -40% 130%, transparent 0 7px, rgba(226, 197, 123, 0.055) 7px 7.7px);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.18), inset 0 1px 4px rgba(0,0,0,0.25);
}
.ob-card.gold .ob-card-holo {
  background: conic-gradient(from 210deg, rgba(244, 222, 150, 0.65), rgba(205, 169, 78, 0.45), rgba(255, 240, 195, 0.6), rgba(244, 222, 150, 0.65));
  opacity: 0.7;
}
.ob-card.gold .ob-card-num { color: rgba(232, 201, 106, 0.95); }
.ob-card.gold .ob-card-mrz { background: linear-gradient(180deg, #F0EADA, #E6DEC8); color: #2A2418; }

/* ═══════ WELCOME ═══════ */
.ob-trialnote {
  text-align: center; font: 600 11px/1 'Inter', sans-serif; letter-spacing: 0.04em;
  color: var(--acc-bright, #00C49A); margin-bottom: 11px;
}
.ob-wel-brand {
  text-align: center; padding-top: 64px;
  font: 800 13px/1 'Orbitron', sans-serif; letter-spacing: 0.36em; text-indent: 0.36em;
  color: #FAFAFA;
}
.ob-wel-brand sup { font-size: 8px; }
.ob-wel-brand img { height: 28px; width: auto; display: inline-block; vertical-align: top; }
.ob-wel-cardzone { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 40px 0; min-height: 0; }
.ob-wel-cardzone .ob-cardwrap { position: relative; z-index: 1; }
/* Filigrane · logomark transparent dans le vide entre la carte et le titre */
.ob-wel-watermark {
  position: absolute; left: 50%; top: 88%;
  transform: translate(-50%, -50%);
  width: 17%; max-width: 70px; height: auto;
  opacity: 0.08; z-index: 0;
  pointer-events: none; user-select: none;
}
.ob-wel-text { text-align: center; padding: 6px 26px 4px; }
.ob-wel-text .ob-h1 { font-size: 27px; }
.ob-wel-proofs { display: flex; justify-content: center; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
/* Lignes scannables et aérées · centrées, sans boîtes ni icônes :
   le mot-clé blanc porte le sens, le complément gris est optionnel */
.ob-wel-rows {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 13px; text-align: center;
}
.ob-wel-row { font: 400 13px/1.45 'Inter', sans-serif; color: #8E8E96; }
.ob-wel-row b { color: #FAFAFA; font-weight: 650; }
.ob-wel-proof {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 10px/1 'Inter', sans-serif; letter-spacing: 0.02em;
  color: #D4D4D8; padding: 6px 10px; border-radius: 99px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.09);
}
.ob-wel-proof svg { color: var(--acc-bright, #00C49A); flex-shrink: 0; }

/* ═══════ SELECT CARDS (rôle, options org) ═══════ */
.ob-cards { display: grid; gap: 10px; margin-top: 20px; }
.ob-cards.two { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.ob-cards.two .ob-selcard { flex-direction: column; align-items: flex-start; gap: 9px; padding: 12px 13px; }
.ob-cards.two .ob-selcard-icon { width: 32px; height: 32px; border-radius: 10px; }
.ob-cards.two .ob-selcard-title { font-size: 13.5px; }
.ob-cards.two .ob-selcard-desc { font-size: 10.5px; line-height: 1.35; }
.ob-selcard {
  display: flex; align-items: center; gap: 13px;
  padding: 14px; border-radius: 16px;
  background: #121214; border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer; text-align: left; color: inherit; width: 100%;
  transition: border-color 200ms, background 200ms, transform 150ms;
  font-family: inherit;
}
.ob-selcard:active { transform: scale(0.98); }
.ob-selcard.sel { border-color: #fff; background: #1A1A1D; }
.ob-selcard-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center; color: #E4E4E7;
}
.ob-selcard.sel .ob-selcard-icon { background: #fff; color: #0A0A0B; }
.ob-selcard-main { flex: 1; min-width: 0; }
.ob-selcard-title { font: 600 14.5px/1.25 'Inter', sans-serif; letter-spacing: -0.01em; }
.ob-selcard-desc { margin-top: 2px; font: 400 11.5px/1.4 'Inter', sans-serif; color: #A1A1AA; }
.ob-selcard-arrow { color: #52525B; flex-shrink: 0; }

/* ═══════ PLANS ═══════ */
.ob-bill {
  display: flex; gap: 3px; padding: 3px; margin: 18px 0 12px;
  background: #121214; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
}
.ob-bill button {
  flex: 1; height: 36px; border: none; border-radius: 9px;
  background: none; color: #A1A1AA;
  font: 600 12.5px/1 'Inter', sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 180ms, color 180ms;
}
.ob-bill button.on { background: #fff; color: #0A0A0B; }
.ob-bill-save {
  font: 700 9px/1 'Inter', sans-serif; padding: 3px 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc-bright);
}
.ob-bill button.on .ob-bill-save { background: color-mix(in srgb, var(--acc) 14%, #fff); color: #045C46; }

.ob-plans { display: grid; gap: 16px; }
.ob-plan {
  position: relative; padding: 14px; border-radius: 16px;
  background: #121214; border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; width: 100%; text-align: left; color: inherit; font-family: inherit;
  transition: border-color 200ms, background 200ms;
}
.ob-plan.sel { border-color: #fff; background: #18181B; }
/* Formule mise en avant (PassPRO) : halo accent permanent, qu'elle soit sélectionnée ou non */
.ob-plan.rec {
  border-color: color-mix(in srgb, var(--acc-bright, #00C49A) 50%, rgba(255,255,255,0.08));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc-bright, #00C49A) 22%, transparent),
              0 18px 40px -22px color-mix(in srgb, var(--acc-bright, #00C49A) 75%, transparent);
}
.ob-plan.rec.sel {
  border-color: var(--acc-bright, #00C49A);
  background: color-mix(in srgb, var(--acc-bright, #00C49A) 7%, #121214);
}
.ob-plan.rec.sel .ob-plan-radio { border-color: var(--acc-bright, #00C49A); }
.ob-plan.rec.sel .ob-plan-radio::after { background: var(--acc-bright, #00C49A); }
.ob-plan-rec {
  position: absolute; top: -9px; right: 14px;
  font: 700 7.5px/1 'Orbitron', sans-serif; letter-spacing: 0.16em;
  padding: 4px 9px 5px; border-radius: 99px;
  background: var(--acc); color: #fff;
}
.ob-plan-head { display: flex; align-items: center; gap: 11px; }
.ob-plan-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 180ms;
}
.ob-plan.sel .ob-plan-radio { border-color: #fff; }
.ob-plan.sel .ob-plan-radio::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff;
}
.ob-plan-main { flex: 1; min-width: 0; }
.ob-plan-name { font: 800 15px/1.2 'Inter', sans-serif; letter-spacing: -0.01em; }
.ob-plan-tag { margin-top: 2px; font: 400 11px/1.3 'Inter', sans-serif; color: #A1A1AA; }
.ob-plan-pricing { text-align: right; flex-shrink: 0; }
.ob-plan-price { font: 800 16px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.ob-plan-per { margin-top: 3px; font: 400 10px/1.2 'Inter', sans-serif; color: #71717A; }
.ob-plan-feats {
  display: grid; gap: 7px; overflow: hidden;
  max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height 320ms cubic-bezier(0.2,0,0,1), opacity 250ms, margin-top 320ms;
}
.ob-plan.sel .ob-plan-feats { max-height: 150px; opacity: 1; margin-top: 13px; }
.ob-feat { display: flex; align-items: center; gap: 8px; font: 400 12px/1.35 'Inter', sans-serif; color: #D4D4D8; }
.ob-feat svg { flex-shrink: 0; color: var(--acc-bright); }

/* ═══════ FIELDS ═══════ */
.ob-fields { display: grid; gap: 13px; margin-top: 20px; }
.ob-fields.cols { grid-template-columns: 1fr 1fr; }
.ob-fieldwrap.full { grid-column: 1 / -1; }
.ob-fieldlabel {
  font: 600 10px/1 'Inter', sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: #71717A; margin-bottom: 7px;
}
.ob-input {
  min-height: 52px; border-radius: 14px;
  background: #121214; border: 1px solid rgba(255,255,255,0.09);
  padding: 8px 15px; display: flex; align-items: center;
  font-size: 15px; letter-spacing: -0.01em; cursor: text;
  transition: border-color 200ms;
  white-space: nowrap; overflow: hidden;
}
.ob-input.typing { border-color: rgba(255,255,255,0.35); }
.ob-input.done { border-color: rgba(255,255,255,0.2); }
.ob-input .ob-ph { color: #52525B; }
.ob-caret {
  display: inline-block; width: 2px; height: 19px; margin-left: 1px;
  background: var(--acc-bright); border-radius: 1px;
  animation: obBlink 1s steps(1) infinite;
}
@keyframes obBlink { 50% { opacity: 0; } }
.ob-fieldhint { margin-top: 7px; font: 400 11px/1.45 'Inter', sans-serif; color: #71717A; }
/* Encart « structure » · discret mais lisible (neutre, pas l'accent) */
.ob-structhint {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 13px; border-radius: 13px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}
.ob-structhint-ic {
  flex-shrink: 0; display: inline-flex; margin-top: 1px;
  color: #A1A1AA;
}
.ob-structhint-txt { font: 400 11.5px/1.5 'Inter', sans-serif; color: #9A9AA2; text-wrap: pretty; }
.ob-structhint-txt strong { color: #E4E4E7; font-weight: 600; }
.ob.light .ob-structhint { background: rgba(15,15,16,0.035); border-color: rgba(15,15,16,0.10); }
.ob.light .ob-structhint-ic { color: #8A8A93; }
.ob.light .ob-structhint-txt { color: #5E5E66; }
.ob.light .ob-structhint-txt strong { color: #1C1C1F; }
/* Incitation email pro · même gris que les notes légales, une seule ligne */
.ob-fieldhint .pro { color: #71717A; font-size: 10px; white-space: nowrap; display: block; }
.ob-fieldhint .pro b { font-weight: 700; }
.ob-field-ok { margin-left: auto; display: inline-flex; flex-shrink: 0; animation: obIn 220ms; }
.ob-eye {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-right: -6px; padding: 0;
  background: none; border: none; color: #71717A; cursor: pointer;
}
.ob-eye:active { color: #FAFAFA; }
.ob-strength { display: flex; gap: 5px; margin-top: 8px; align-items: center; max-width: 230px; }
.ob-strength i { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,0.1); transition: background 200ms; }
.ob-strength i.on { background: var(--acc-bright, #00C49A); }
.ob-strength span { font: 600 10px/1 'Inter', sans-serif; color: var(--acc-bright); margin-left: 4px; }

/* ═══ VÉRIFICATION · timeline d'étapes + résultat ═══ */
.ob-vtl { display: flex; flex-direction: column; margin-top: 20px; }
.ob-vtl-item { display: flex; gap: 13px; }
.ob-vtl-rail { display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; }
.ob-vtl-dot {
  width: 40px; height: 40px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: #EAEAEA; font-style: normal;
}
.ob-vtl-line { flex: 1; width: 1.5px; min-height: 14px; margin: 5px 0; background: rgba(255,255,255,0.12); }
.ob-vtl-main { flex: 1; min-width: 0; padding: 2px 0 16px; }
.ob-vtl-item:last-child .ob-vtl-main { padding-bottom: 0; }
.ob-vtl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ob-vtl-head b { font: 650 13.5px/1.3 'Inter', sans-serif; color: #FAFAFA; }
.ob-vtl-head em {
  flex-shrink: 0; white-space: nowrap; font: 600 9.5px/1 'SF Mono', ui-monospace, monospace; font-style: normal;
  letter-spacing: 0.04em; color: var(--acc-bright, #00C49A);
  padding: 4px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--acc-bright, #00C49A) 10%, transparent);
}
.ob-vtl-desc { display: block; margin-top: 2px; font: 400 11.5px/1.45 'Inter', sans-serif; color: #8E8E96; }
/* ── Résultat de la vérification : un seul parcours Pass ID (inactif → vérifié) ── */
.ob-voutcome {
  margin-top: 22px; padding: 16px 18px 15px; border-radius: 18px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09);
}
.ob-voutcome-top { display: flex; align-items: baseline; justify-content: space-between; }
.ob-voutcome-title {
  font: 600 9px/1 'Inter', sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
  color: #9A9AA2; white-space: nowrap;
}
.ob-voutcome-eta {
  font: 600 10px/1 'SF Mono', ui-monospace, monospace; letter-spacing: 0.02em;
  color: var(--acc-bright, #00C49A);
}
.ob-voutcome-rings { display: flex; align-items: center; margin: 14px 2px 0; }
.ob-vring {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.ob-vring.from { border: 2px dashed rgba(255,255,255,0.28); background: transparent; }
.ob-vring.to {
  background: var(--acc-bright, #00C49A); color: #06140F;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc-bright, #00C49A) 16%, transparent);
}
.ob-vline {
  flex: 1; height: 2px; margin: 0 12px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), var(--acc-bright, #00C49A));
}
.ob-voutcome-labels { display: flex; justify-content: space-between; margin-top: 9px; }
.ob-vlabel { font: 500 11.5px/1 'Inter', sans-serif; color: #8E8E96; }
.ob-vlabel.on { font-weight: 650; color: var(--acc-bright, #00C49A); }

/* ── Garantie de confidentialité · seul le statut « Vérifié » est public ── */
.ob-privacy {
  display: flex; align-items: center; gap: 11px;
  margin-top: 16px; padding: 11px 13px; border-radius: 14px;
  background: color-mix(in srgb, var(--acc-bright, #00C49A) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc-bright, #00C49A) 24%, transparent);
}
.ob-privacy-ic {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in srgb, var(--acc-bright, #00C49A) 16%, transparent);
  color: var(--acc-bright, #00C49A);
}
.ob-privacy-txt { font: 400 11.5px/1.45 'Inter', sans-serif; color: #C8C8CE; }
.ob-privacy-txt b { font-weight: 650; color: #FAFAFA; }

/* ── Trois garanties · comble le vide tout en rassurant ── */
.ob-vchips { display: flex; gap: 8px; margin-top: 16px; }
.ob-vchip {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 6px; border-radius: 11px; white-space: nowrap;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  font: 600 11px/1 'Inter', sans-serif; color: #C8C8CE;
}
.ob-vchip svg { flex-shrink: 0; color: var(--acc-bright, #00C49A); }

/* Vérification · thème clair */
.ob.light .ob-vtl-dot { background: #FFFFFF; border-color: rgba(15,15,16,0.1); color: #2A2A2E; box-shadow: 0 1px 2px rgba(15,15,16,0.04); }
.ob.light .ob-vtl-line { background: rgba(15,15,16,0.12); }
.ob.light .ob-vtl-head b { color: #0F0F10; }
.ob.light .ob-vtl-head em { color: var(--acc, #00A37E); background: color-mix(in srgb, var(--acc, #00A37E) 10%, transparent); }
.ob.light .ob-vtl-desc { color: #6B6B73; }
.ob.light .ob-voutcome { background: #FFFFFF; border-color: rgba(15,15,16,0.09); }
.ob.light .ob-voutcome-title { color: #8A8A93; }
.ob.light .ob-voutcome-eta { color: var(--acc, #00A37E); }
.ob.light .ob-vring.from { border-color: rgba(15,15,16,0.22); }
.ob.light .ob-vring.to { background: var(--acc, #00A37E); color: #FFFFFF; box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc, #00A37E) 14%, transparent); }
.ob.light .ob-vline { background: linear-gradient(90deg, rgba(15,15,16,0.18), var(--acc, #00A37E)); }
.ob.light .ob-vlabel { color: #6B6B73; }
.ob.light .ob-vlabel.on { color: var(--acc, #00A37E); }
.ob.light .ob-privacy {
  background: color-mix(in srgb, var(--acc, #00A37E) 7%, #FFFFFF);
  border-color: color-mix(in srgb, var(--acc, #00A37E) 22%, transparent);
}
.ob.light .ob-privacy-ic { background: color-mix(in srgb, var(--acc, #00A37E) 12%, transparent); color: var(--acc, #00A37E); }
.ob.light .ob-privacy-txt { color: #4A4A52; }
.ob.light .ob-privacy-txt b { color: #0F0F10; }
.ob.light .ob-vchip { background: #FFFFFF; border-color: rgba(15,15,16,0.1); color: #3A3A42; box-shadow: 0 1px 2px rgba(15,15,16,0.03); }
.ob.light .ob-vchip svg { color: var(--acc, #00A37E); }


.ob-tl { position: relative; margin: 20px 0 4px; display: flex; flex-direction: column; gap: 17px; }
.ob-tl::before {
  content: ''; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.05));
}
.ob-tl-item { display: flex; gap: 14px; position: relative; }
.ob-tl-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  background: #18181B; border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; color: #A1A1AA;
}
.ob-tl-item.now .ob-tl-dot { background: var(--acc); border-color: transparent; color: #fff; }
.ob-tl-title { font: 600 13px/1.35 'Inter', sans-serif; }
.ob-tl-title em { font-style: normal; color: #71717A; font-weight: 400; }
.ob-tl-desc { margin-top: 2px; font: 400 11.5px/1.45 'Inter', sans-serif; color: #A1A1AA; }
.ob-tl-desc b { font-weight: 700; color: var(--acc-bright, #00C49A); }
.ob.light .ob-tl-desc b { color: var(--acc, #00A37E); }

.ob-recap {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 13px; margin-top: 18px;  background: #121214; border: 1px solid rgba(255,255,255,0.08);
  font: 500 12.5px/1.4 'Inter', sans-serif;
}
.ob-recap-info { flex: 1; min-width: 0; }
.ob-recap-top { display: flex; align-items: center; gap: 8px; }
.ob-recap-top b { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: #FAFAFA; }
.ob-recap-badge {
  font: 700 9px/1 'Inter', sans-serif; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--acc-bright, #00C49A); background: color-mix(in srgb, var(--acc-bright, #00C49A) 15%, transparent);
  padding: 3px 6px; border-radius: 5px;
}
.ob-recap-price { margin-top: 3px; font-size: 12px; color: #A1A1AA; white-space: nowrap; }
.ob-recap b { font-weight: 700; }
.ob-recap .ob-recap-edit {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--acc-bright, #00C49A); font: 700 11.5px/1 'Inter', sans-serif;
  padding: 5px 4px; text-decoration: underline; text-underline-offset: 2px;
}
.ob-divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
  color: #52525B; font: 500 10.5px/1 'Inter', sans-serif; letter-spacing: 0.06em;
  white-space: nowrap;
}
.ob-divider::before, .ob-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }

/* ═══════ CODE 6 CHIFFRES ═══════ */
.ob-codes { display: flex; gap: 8px; margin-top: 22px; }
.ob-codebox {
  flex: 1; height: 56px; border-radius: 13px;
  background: #121214; border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font: 700 22px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  transition: border-color 150ms;
}
.ob-codebox.filled { border-color: rgba(255,255,255,0.4); animation: obPop 220ms; }
.ob-codebox.ok { border-color: var(--acc); color: var(--acc-bright); }
@keyframes obPop { 50% { transform: scale(1.09); } }
.ob-autofill {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  border-radius: 13px; width: 100%;
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  color: #EAEAEA; font: 500 12.5px/1.3 'Inter', sans-serif; font-family: inherit;
  cursor: pointer; animation: obIn 300ms; text-align: left;
}
.ob-autofill b { color: var(--acc-bright); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.ob-autofill span:first-child { white-space: nowrap; }
.ob-autofill span:last-child { margin-left: auto; font-weight: 700; color: var(--acc-bright); }
.ob-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ob-key {
  height: 46px; border: none; border-radius: 11px;
  background: rgba(255,255,255,0.06); color: #fff;
  font: 600 19px/1 'Inter', sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms, transform 120ms;
}
.ob-key:active { background: rgba(255,255,255,0.14); transform: scale(0.96); }
.ob-key.blank { background: none; cursor: default; }

/* ═══════ ORGANISATION ═══════ */
.ob-results { display: grid; gap: 9px; margin-top: 14px; animation: obIn 300ms; }
.ob-result {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: 14px;
  background: #121214; border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer; width: 100%; text-align: left; color: inherit; font-family: inherit;
  transition: border-color 180ms;
}
.ob-result.sel { border-color: #fff; }
.ob-result-crest {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 'Orbitron', sans-serif; letter-spacing: 0.04em; color: #E4E4E7;
}
.ob-result-name { font: 600 13.5px/1.25 'Inter', sans-serif; }
.ob-result-meta { margin-top: 2px; font: 400 11px/1.3 'Inter', sans-serif; color: #A1A1AA; }
.ob-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ob-chip {
  padding: 10px 15px; border-radius: 99px;
  background: #121214; border: 1px solid rgba(255,255,255,0.1);
  color: #D4D4D8; font: 600 12.5px/1 'Inter', sans-serif; font-family: inherit;
  cursor: pointer; transition: background 180ms, color 180ms, border-color 180ms;
}
.ob-chip.on { background: #fff; color: #0A0A0B; border-color: #fff; }
.ob-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 14px; border-radius: 14px; margin-top: 16px;
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
  font: 400 12.5px/1.5 'Inter', sans-serif; color: #E4E4E7;
  animation: obIn 300ms;
}
.ob-banner svg { flex-shrink: 0; margin-top: 1px; }
.ob-banner b { font-weight: 600; }
.ob-subhead { font: 700 13.5px/1.3 'Inter', sans-serif; margin-top: 22px; letter-spacing: -0.01em; }

/* ═══════ VERIFF ═══════ */
.ob-vrows { display: grid; gap: 9px; margin-top: 20px; }
.ob-vrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: #121214; border: 1px solid rgba(255,255,255,0.07);
}
.ob-vrow-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,0.06); color: #E4E4E7;
  display: flex; align-items: center; justify-content: center;
}
.ob-vrow-title { font: 600 13px/1.3 'Inter', sans-serif; }
.ob-vrow-desc { margin-top: 1px; font: 400 11px/1.35 'Inter', sans-serif; color: #A1A1AA; }
.ob-vrow-soon {
  margin-left: auto; flex-shrink: 0;
  font: 700 7.5px/1 'Orbitron', sans-serif; letter-spacing: 0.14em;
  color: #A1A1AA; background: rgba(255,255,255,0.08);
  padding: 4px 8px 5px; border-radius: 99px;
}
.ob-vrow.soon { opacity: 0.6; }

.ob-scanzone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 10px 0; }
.ob-scan {
  position: relative; width: 236px; height: 150px;
  border-radius: 14px; background: #0E0E10; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.ob-scan.selfie { width: 168px; height: 168px; border-radius: 50%; }
.ob-scan.nfc { width: 168px; height: 168px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: visible; }
.ob-nfc-chip {
  position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: #16161A; border: 1px solid rgba(255,255,255,0.16); color: var(--acc-bright, #00C49A);
}
.ob-nfc-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--acc, #00A37E); opacity: 0;
  animation: obNfcPulse 1.7s ease-out infinite;
}
.ob-nfc-ring.r2 { animation-delay: 0.85s; }
@keyframes obNfcPulse {
  0% { transform: scale(0.42); opacity: 0.85; }
  100% { transform: scale(1.08); opacity: 0; }
}
.ob-scan .sweep {
  position: absolute; left: 7%; right: 7%; height: 2px; top: 12%;
  background: var(--acc-bright);
  box-shadow: 0 0 16px var(--acc);
  animation: obSweep 1.5s ease-in-out infinite alternate;
}
@keyframes obSweep { from { top: 10%; } to { top: 86%; } }
.ob-scan-corner { position: absolute; width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,0.65); }
.ob-scan-corner.tl { top: 9px; left: 9px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.ob-scan-corner.tr { top: 9px; right: 9px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.ob-scan-corner.bl { bottom: 9px; left: 9px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.ob-scan-corner.br { bottom: 9px; right: 9px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
.ob-scan-doc { position: absolute; inset: 22px 20px; display: flex; gap: 12px; align-items: flex-start; opacity: 0.5; }
.ob-scan-face { width: 42px; height: 52px; border-radius: 8px; background: rgba(255,255,255,0.14); flex-shrink: 0; }
.ob-scan-lines { flex: 1; display: grid; gap: 8px; padding-top: 6px; }
.ob-scan-lines i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); }
.ob-scan-lines i:nth-child(2) { width: 70%; }
.ob-scan-lines i:nth-child(3) { width: 50%; }
.ob-scan-head { position: absolute; inset: 26px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.25); animation: obHeadPulse 1.6s ease-in-out infinite; }
@keyframes obHeadPulse { 50% { transform: scale(0.94); border-color: var(--acc); } }
/* ── Scan réel du passeport : page d'identité crédible sous le cadre ── */
.ob-scan-pass {
  position: absolute; inset: 20px 26px; border-radius: 7px; overflow: hidden;
  background: linear-gradient(165deg, #F2EFE6, #E0DBCC);
  display: flex; flex-direction: column;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.ob-pass-band {
  font: 700 6.5px/1 'Inter', sans-serif; letter-spacing: 0.2em;
  color: #7A6F55; padding: 6px 9px 4px;
}
.ob-pass-row { flex: 1; display: flex; gap: 8px; padding: 0 9px; min-height: 0; }
.ob-pass-row img {
  width: 34px; height: 43px; object-fit: cover; border-radius: 2px;
  filter: saturate(0.82) contrast(1.04); align-self: flex-start;
}
.ob-pass-txt { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; min-width: 0; }
.ob-pass-txt i {
  font: 600 4.8px/1.5 'Inter', sans-serif; font-style: normal;
  color: #9A8F75; letter-spacing: 0.1em; text-transform: uppercase;
}
.ob-pass-txt b {
  font: 700 9px/1.3 'Inter', sans-serif; color: #26221A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-pass-mrz {
  background: #FBFAF5; padding: 4px 8px 5px;
  font: 600 7.5px/1.3 'SF Mono', ui-monospace, monospace;
  color: #33302B; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden;
}
/* ── Scan facial réel : flux caméra + ovale de guidage ── */
.ob-selfie-feed {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.12); filter: brightness(0.96);
}
.ob-selfie-oval {
  position: absolute; inset: 16px 30px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--acc-bright, #00C49A) 85%, transparent);
  box-shadow: 0 0 0 220px rgba(5, 5, 6, 0.5);
  animation: obHeadPulse 1.6s ease-in-out infinite;
}
.ob-scan-label { font: 600 13px/1.3 'Inter', sans-serif; text-align: center; }
/* Récapitulatif des contrôles Veriff passés */
.ob-vdone { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.ob-vdone-row {
  display: flex; align-items: center; gap: 9px;
  font: 500 12.5px/1.3 'Inter', sans-serif; color: #D4D4D8;
  animation: obIn 380ms cubic-bezier(0.2,0,0,1) both;
}
.ob-vdone-row:nth-child(2) { animation-delay: 120ms; }
.ob-vdone-row:nth-child(3) { animation-delay: 240ms; }
.ob-vdone-row svg { color: var(--acc-bright, #00C49A); flex-shrink: 0; }
.ob-scan-pct {
  font: 700 11px/1 'Inter', ui-monospace, monospace;
  color: var(--acc-bright); font-variant-numeric: tabular-nums; letter-spacing: 0.1em;
}

/* ═══ Journal de sécurité en direct (scans) ═══ */
.ob-seclog { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; min-height: 64px; }
.ob-seclog span {
  display: flex; align-items: center; gap: 7px;
  font: 500 10.5px/1.2 'SF Mono', ui-monospace, monospace; letter-spacing: 0.03em; color: #8E8E96;
  opacity: 0;
}
.ob-seclog span svg { color: var(--acc-bright, #00C49A); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ob-seclog span { animation: obSecIn 360ms cubic-bezier(0.2, 0, 0, 1) forwards; }
  .ob-seclog span:nth-child(1) { animation-delay: 400ms; }
  .ob-seclog span:nth-child(2) { animation-delay: 1050ms; }
  .ob-seclog span:nth-child(3) { animation-delay: 1700ms; }
}
@media (prefers-reduced-motion: reduce) { .ob-seclog span { opacity: 1; } }
@keyframes obSecIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ═══ NFC · orbite + halo ═══ */
.ob-nfc-orbit {
  position: absolute; inset: -16px; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--acc, #00A37E) 45%, transparent);
  animation: obOrbit 7s linear infinite;
}
@keyframes obOrbit { to { transform: rotate(360deg); } }
.ob-nfc-glow {
  position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc, #00A37E) 30%, transparent), transparent 70%);
  animation: obGlowPulse 1.7s ease-in-out infinite;
}
@keyframes obGlowPulse { 50% { opacity: 0.45; transform: scale(1.18); } }

/* ═══ Identité confirmée · victoire scellée ═══ */
.ob-bigcheck-wrap { position: relative; display: flex; }
.ob-bigcheck-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--acc, #00A37E); opacity: 0;
  animation: obNfcPulse 1.9s ease-out infinite 400ms;
}
.ob-bigcheck-ring.r2 { animation-delay: 1300ms; }
/* Rayons de succès qui jaillissent une fois */
.ob-bigcheck-ray {
  position: absolute; inset: -10px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 16deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 16deg 18deg,
    transparent 18deg 46deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 46deg 48deg,
    transparent 48deg 76deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 76deg 78deg,
    transparent 78deg 106deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 106deg 108deg,
    transparent 108deg 136deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 136deg 138deg,
    transparent 138deg 166deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 166deg 168deg,
    transparent 168deg 196deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 196deg 198deg,
    transparent 198deg 226deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 226deg 228deg,
    transparent 228deg 256deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 256deg 258deg,
    transparent 258deg 286deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 286deg 288deg,
    transparent 288deg 316deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 316deg 318deg,
    transparent 318deg 346deg, color-mix(in srgb, var(--acc-bright, #00C49A) 55%, transparent) 346deg 348deg,
    transparent 348deg);
  -webkit-mask: radial-gradient(circle, #000 38%, transparent 56%);
  mask: radial-gradient(circle, #000 38%, transparent 56%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ob-bigcheck-ray { animation: obRay 900ms ease-out 250ms both; }
}
@keyframes obRay {
  0% { opacity: 0; transform: scale(0.5) rotate(-20deg); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.35) rotate(8deg); }
}
.ob-bigcheck { animation: obCheckPop 520ms cubic-bezier(0.2, 0, 0.2, 1.35) both; }
@keyframes obCheckPop { from { transform: scale(0.4); opacity: 0; } }

/* ═══ Sceau cryptographique · objet de sécurité inviolable ═══ */
.ob-vseal {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px; padding: 13px 15px 12px; border-radius: 15px;
  background: linear-gradient(155deg, #15120B, #0A0907);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #E8C96A;
  box-shadow: inset 0 0 28px rgba(212,175,55,0.06), 0 10px 30px rgba(0,0,0,0.35);
  animation: obSealIn 620ms cubic-bezier(0.2, 0, 0.2, 1.1) 300ms both;
}
@keyframes obSealIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.ob-vseal .ob-card-guilloche {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: rgba(212,175,55,0.5); opacity: 0.16; z-index: 0;
}
/* Balayage doré qui confirme l'intégrité, une fois */
.ob-vseal-scan {
  position: absolute; top: 0; bottom: 0; width: 40%; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(232,201,106,0.18), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ob-vseal-scan { animation: obSealScan 1400ms ease-in-out 900ms 1 both; }
}
@keyframes obSealScan { 0% { left: -45%; } 100% { left: 105%; } }
.ob-vseal-top, .ob-vseal-hash, .ob-vseal-foot { position: relative; z-index: 2; }
.ob-vseal-top { display: flex; align-items: center; gap: 8px; }
.ob-vseal-shield {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,175,55,0.14); color: #E8C96A;
}
.ob-vseal-ttl { flex: 1; font: 700 9px/1 'Orbitron', sans-serif; letter-spacing: 0.2em; color: #E8C96A; }
.ob-vseal-pill {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 4px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--acc-bright, #00C49A) 16%, transparent);
  color: var(--acc-bright, #00C49A);
  font: 700 8px/1 'Orbitron', sans-serif; letter-spacing: 0.12em;
}
.ob-vseal-hash {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px; border-radius: 10px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(212,175,55,0.16);
}
.ob-vseal-lbl { font: 600 8px/1 'Inter', sans-serif; letter-spacing: 0.16em; color: #9C8F6E; }
.ob-vseal-val { font: 600 11.5px/1.3 'SF Mono', ui-monospace, monospace; letter-spacing: 0.04em; color: #F0E2B8; }
.ob-vseal-foot { display: flex; flex-direction: column; gap: 3px; }
.ob-vseal-foot span { display: flex; align-items: center; gap: 5px; font: 400 9.5px/1.3 'Inter', sans-serif; color: #9C8F6E; }
.ob-vseal-foot span svg { color: #9C8F6E; flex-shrink: 0; }
.ob-bigcheck {
  width: 72px; height: 72px; border-radius: 50%;
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
  display: flex; align-items: center; justify-content: center; color: var(--acc-bright);
  animation: obPop 350ms;
}

/* ═══════ REVEAL ═══════ */
.ob-gen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.ob-genring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12); border-top-color: #fff;
  animation: obSpin 850ms linear infinite;
}
.ob-genlabel { font: 500 12px/1 'Inter', ui-monospace, monospace; letter-spacing: 0.06em; color: #A1A1AA; }
.ob-reveal-zone {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-start;
  gap: 14px; padding-top: 20px; min-height: 0;
}
/* La carte est le héros : elle occupe l'espace flexible, centrée entre le titre
   et les rangées d'infos · plus de vides morts en haut et en bas */
.ob-reveal-zone .ob-cardwrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 4px;
}
.ob-reveal-zone .ob-reveal-rows { margin-bottom: 4px; }
.ob-reveal-card { animation: obCardIn 750ms cubic-bezier(0.2,0,0,1); }

/* ═══ VICTOIRE · confettis (une salve, or/vert/blanc) ═══ */
.ob-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.ob-confetti i {
  position: absolute; top: 44%; left: 50%;
  width: 6px; height: 10px; border-radius: 2px;
  background: #D9BC6A; opacity: 0;
}
.ob-confetti i:nth-child(3n) { background: var(--acc-bright, #00C49A); width: 5px; height: 5px; border-radius: 50%; }
.ob-confetti i:nth-child(4n) { background: #FAFAFA; width: 4px; height: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .ob-confetti i { animation: obConfetti 1250ms cubic-bezier(0.15, 0.55, 0.35, 1) 1 both; }
}
@keyframes obConfetti {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.6); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(520deg) scale(1); }
}

/* ═══ PARTAGE · invitation discrète sous la carte ═══ */
.ob-share-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 14px auto 0; padding: 9px 16px; border-radius: 99px;
  background: none; border: 1px solid rgba(255,255,255,0.16); cursor: pointer;
  font: 600 12px/1 'Inter', sans-serif; color: #D4D4D8;
  animation: obIn 500ms 600ms backwards;
}
.ob-share-cta:active { background: rgba(255,255,255,0.06); }
.ob-sheetwrap { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: flex-end; }
.ob-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); animation: obSheetFade 220ms; }
@keyframes obSheetFade { from { opacity: 0; } }
.ob-sheet {
  position: relative; border-radius: 24px 24px 0 0;
  padding: 8px 20px 26px;
  background: #131316; border-top: 1px solid rgba(255,255,255,0.1);
  animation: obSheetUp 320ms cubic-bezier(0.2, 0, 0, 1);
  font-family: 'Inter', sans-serif; color: #FAFAFA;
}
@keyframes obSheetUp { from { transform: translateY(60px); opacity: 0; } }
.ob-grab { display: block; width: 38px; height: 4px; border-radius: 99px; margin: 4px auto 13px; background: rgba(255,255,255,0.18); }
.ob-sheet-title { font: 800 17px/1.2 'Inter', sans-serif; letter-spacing: -0.02em; margin-bottom: 13px; }
/* Aperçu du badge publié · Modern Black + or, comme la carte */
/* Aperçu du badge publié · la vraie carte Pass ID, numéro masqué */
.ob-share-card { margin-bottom: 13px; }
.ob-share-card .ob-card { width: 100%; }
.ob-share-card-cap {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 9px; text-align: center;
  font: 600 10px/1 'SF Mono', ui-monospace, monospace; letter-spacing: 0.06em; color: #9C8F6E;
}
.ob-share-card-cap svg { color: var(--acc-bright, #00C49A); flex-shrink: 0; }
.ob-share-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 16px 15px; margin-bottom: 13px; border-radius: 16px;
  background: linear-gradient(150deg, #1A1610, #0B0A07);
  border: 1px solid rgba(212, 175, 55, 0.35);
}
.ob-share-tile img { height: 22px; width: auto; margin-bottom: 6px; }
.ob-share-tile b { font: 700 11px/1 'Orbitron', sans-serif; letter-spacing: 0.22em; color: #E8C96A; }
.ob-share-tile span { font: 500 12.5px/1.3 'Inter', sans-serif; color: #FAFAFA; margin-top: 3px; }
.ob-share-tile em { font: 500 10.5px/1 'SF Mono', ui-monospace, monospace; font-style: normal; letter-spacing: 0.08em; color: #9C8F6E; margin-top: 4px; }
.ob-share-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-share-pills button {
  flex: 1 1 calc(50% - 8px); height: 42px; border-radius: 12px; cursor: pointer;
  background: #1C1C20; border: 1px solid rgba(255,255,255,0.1);
  font: 600 12.5px/1 'Inter', sans-serif; color: #FAFAFA;
}
.ob-share-pills button:active { background: #26262B; }
.ob-share-pills button.wide { flex: 1 1 100%; background: #FAFAFA; border-color: #FAFAFA; color: #0F0F0F; }
.ob-share-note, .ob-share-done {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; text-align: center;
  font: 400 10.5px/1.45 'Inter', sans-serif; color: #71717A;
}
.ob-share-done { color: var(--acc-bright, #00C49A); font-weight: 600; }

/* Partage · thème clair */
.ob.light .ob-share-cta { border-color: rgba(15,15,16,0.16); color: #3A3A40; }
.ob.light .ob-share-cta:active { background: rgba(15,15,16,0.05); }
.ob.light .ob-sheet { background: #FFFFFF; border-top-color: rgba(15,15,16,0.08); color: #0F0F10; }
.ob.light .ob-grab { background: rgba(15,15,16,0.16); }
.ob.light .ob-share-card-cap { color: #8A8A93; }
.ob.light .ob-share-pills button { background: #F2F2F4; border-color: rgba(15,15,16,0.08); color: #0F0F10; }
.ob.light .ob-share-pills button:active { background: #E8E8EB; }
.ob.light .ob-share-pills button.wide { background: #0F0F10; border-color: #0F0F10; color: #FFFFFF; }
.ob.light .ob-share-note { color: #8A8A93; }
.ob.light .ob-share-done { color: var(--acc, #00A37E); }
@keyframes obCardIn {
  from { opacity: 0; transform: rotateX(32deg) translateY(46px) scale(0.9); }
}
.ob-reveal-rows { display: grid; gap: 8px; animation: obIn 500ms 250ms backwards; }
.ob-reveal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 13px;
  background: #121214; border: 1px solid rgba(255,255,255,0.07);
  font: 500 12.5px/1.4 'Inter', sans-serif; color: #D4D4D8;
}
.ob-reveal-row svg { flex-shrink: 0; }
.ob-reveal-row em { font-style: normal; color: #71717A; }

/* ═══════ INVITATION ═══════ */
/* En-tête invitation : écusson + nom de la structure côte à côte */
.ob-invhead { display: flex; align-items: center; gap: 15px; margin: 18px 0 4px; }
.ob-invhead .ob-crest { margin: 0; flex-shrink: 0; }
.ob-invhead-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ob-invhead-name {
  font: 800 24px/1.05 'Inter', sans-serif; letter-spacing: -0.02em; color: #FAFAFA;
}
.ob-invhead-txt .ob-kicker { margin: 0; }
.ob-crest {
  width: 64px; height: 64px; border-radius: 18px; margin: 18px 0 18px;
  background: linear-gradient(140deg, #222226, #101012);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  font: 800 16px/1 'Orbitron', sans-serif; color: #FAFAFA;
  padding: 11px;
}
/* Écusson réel de la structure invitante */
.ob-crest img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.45));
}
.ob-inviter {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 15px; margin-top: 20px;
  background: #121214; border: 1px solid rgba(255,255,255,0.08);
}
.ob-inviter-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 'Inter', sans-serif; color: #E4E4E7;
}
.ob-inviter-name { font: 600 13px/1.3 'Inter', sans-serif; }
.ob-inviter-role { margin-top: 1px; font: 400 11px/1.3 'Inter', sans-serif; color: #A1A1AA; }
.ob-inviter-msg { margin-top: 14px; font: 400 13px/1.55 'Inter', sans-serif; color: #D4D4D8; font-style: italic; }

/* ═══════ VERSION CLAIRE ═══════ */
/* Le Pass ID, les zones de scan caméra et le clavier gardent leur matière sombre :
   ce sont des objets physiques. Tout le reste passe en clair. */
.ob.light { background: #F6F6F4; color: #0F0F10; }
.ob.light::before {
  background: radial-gradient(ellipse 420px 320px at 50% -8%, rgba(15,15,16,0.045), transparent 70%);
}
/* Sur fond clair, l'accent lisible est le vert profond · pas le vert lumineux */
.ob.light { --acc-bright: var(--acc, #00A37E); }

/* Header */
.ob.light .ob-back { background: rgba(15,15,16,0.06); color: #0F0F10; }
.ob.light .ob-seg { background: rgba(15,15,16,0.1); }
.ob.light .ob-actlabel { color: rgba(15,15,16,0.45); }

/* Typo */
.ob.light .ob-h1 { color: #0F0F10; }
.ob.light .ob-sub { color: #5E5E66; }
.ob.light .ob-sub strong { color: #1C1C1F; }
.ob.light .ob-kicker { color: #8A8A93; }
.ob.light .ob-kicker.accent { color: var(--acc, #00A37E); }

/* Boutons */
.ob.light .ob-cta { background: #0F0F10; color: #fff; }
.ob.light .ob-cta.ghost { background: rgba(15,15,16,0.07); color: #0F0F10; }
.ob.light .ob-cta.applepay { background: #000; color: #fff; border-color: transparent; }
.ob.light .ob-applepay { border-color: transparent; }
.ob.light .ob-cta.start { background: var(--acc, #00A37E); color: #fff; }
.ob.light .ob-spinner { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }
.ob.light .ob-link:active { color: #3F3F46; }
.ob.light .ob-link.inline { color: #52525B; }
.ob.light .ob-note .lnk { color: #52525B; }
.ob.light .ob-toast { color: #5E5E66; }

/* Surfaces · cartes, lignes, récap */
.ob.light .ob-selcard, .ob.light .ob-plan, .ob.light .ob-result,
.ob.light .ob-vrow, .ob.light .ob-recap, .ob.light .ob-reveal-row, .ob.light .ob-inviter {
  background: #FFFFFF; border-color: rgba(15,15,16,0.09);
  box-shadow: 0 1px 2px rgba(15,15,16,0.04);
}
.ob.light .ob-selcard.sel { border-color: #0F0F10; background: #FFFFFF; }
.ob.light .ob-selcard:active { background: #FAFAF9; }
.ob.light .ob-selcard-icon { background: rgba(15,15,16,0.05); color: #2A2A2E; }
.ob.light .ob-selcard.sel .ob-selcard-icon { background: #0F0F10; color: #fff; }
.ob.light .ob-selcard-desc { color: #6B6B73; }
.ob.light .ob-selcard-arrow { color: #B0B0B6; }

/* Plans & facturation */
.ob.light .ob-plan.sel { border-color: #0F0F10; background: #FFFFFF; }
.ob.light .ob-plan.rec { border-color: color-mix(in srgb, var(--acc) 45%, rgba(15,15,16,0.09)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 20%, transparent), 0 16px 36px -22px color-mix(in srgb, var(--acc) 60%, transparent); }
.ob.light .ob-plan.rec.sel { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 5%, #FFFFFF); }
.ob.light .ob-plan.rec.sel .ob-plan-radio { border-color: var(--acc); }
.ob.light .ob-plan.rec.sel .ob-plan-radio::after { background: var(--acc); }
.ob.light .ob-plan-radio { border-color: rgba(15,15,16,0.3); }
.ob.light .ob-plan.sel .ob-plan-radio { border-color: #0F0F10; }
.ob.light .ob-plan.sel .ob-plan-radio::after { background: #0F0F10; }
.ob.light .ob-plan-tag { color: #6B6B73; }
.ob.light .ob-plan-per { color: #8A8A93; }
.ob.light .ob-feat { color: #3A3A40; }
.ob.light .ob-bill { background: rgba(15,15,16,0.05); border-color: rgba(15,15,16,0.05); }
.ob.light .ob-bill button { color: #5E5E66; }
.ob.light .ob-bill button.on { background: #0F0F10; color: #fff; }
.ob.light .ob-bill button.on .ob-bill-save { background: rgba(255,255,255,0.18); color: #fff; }

/* Champs */
.ob.light .ob-input { background: #FFFFFF; border-color: rgba(15,15,16,0.13); }
.ob.light .ob-input.typing { border-color: rgba(15,15,16,0.45); }
.ob.light .ob-input.done { border-color: rgba(15,15,16,0.25); }
.ob.light .ob-input .ob-ph { color: #A6A6AD; }
.ob.light .ob-fieldlabel { color: #8A8A93; }
.ob.light .ob-fieldhint, .ob.light .ob-fieldhint .pro { color: #8A8A93; }
.ob.light .ob-eye { color: #8A8A93; }
.ob.light .ob-eye:active { color: #0F0F10; }
.ob.light .ob-strength i { background: rgba(15,15,16,0.1); }
.ob.light .ob-strength i.on { background: var(--acc, #00A37E); }
.ob.light .ob-strength span { color: var(--acc, #00A37E); }

/* Timeline essai */
.ob.light .ob-tl::before { background: linear-gradient(rgba(15,15,16,0.18), rgba(15,15,16,0.04)); }
.ob.light .ob-tl-dot { background: #FFFFFF; border-color: rgba(15,15,16,0.2); color: #5E5E66; }
.ob.light .ob-tl-item.now .ob-tl-dot { background: var(--acc); border-color: transparent; color: #fff; }
.ob.light .ob-tl-title em { color: #8A8A93; }
.ob.light .ob-tl-desc { color: #6B6B73; }
.ob.light .ob-divider { color: #A6A6AD; }
.ob.light .ob-divider::before, .ob.light .ob-divider::after { background: rgba(15,15,16,0.1); }
.ob.light .ob-recap-top b { color: #0F0F10; }
.ob.light .ob-recap-price { color: #52525B; }
.ob.light .ob-recap .ob-recap-edit { color: var(--acc, #00A37E); }

/* Code 6 chiffres & pavé */
.ob.light .ob-codebox { background: #FFFFFF; border-color: rgba(15,15,16,0.14); }
.ob.light .ob-codebox.filled { border-color: rgba(15,15,16,0.5); }
.ob.light .ob-codebox.ok { border-color: var(--acc); color: var(--acc); }
.ob.light .ob-autofill { color: #2A2A2E; background: color-mix(in srgb, var(--acc) 8%, #FFFFFF); }
.ob.light .ob-key { background: rgba(15,15,16,0.07); color: #0F0F10; }
.ob.light .ob-key:active { background: rgba(15,15,16,0.14); }
.ob.light .ob-key.blank { background: none; }

/* Organisation, chips, bannières */
.ob.light .ob-result.sel { border-color: #0F0F10; }
.ob.light .ob-result-crest { background: rgba(15,15,16,0.06); color: #2A2A2E; }
.ob.light .ob-result-meta { color: #6B6B73; }
.ob.light .ob-chip { background: #FFFFFF; border-color: rgba(15,15,16,0.14); color: #3A3A40; }
.ob.light .ob-chip.on { background: #0F0F10; color: #fff; border-color: #0F0F10; }
.ob.light .ob-banner {
  color: #2A2A2E;
  background: color-mix(in srgb, var(--acc) 8%, #FFFFFF);
  border-color: color-mix(in srgb, var(--acc) 30%, transparent);
}

/* Veriff */
.ob.light .ob-vrow-icon { background: rgba(15,15,16,0.05); color: #2A2A2E; }
.ob.light .ob-vrow-desc { color: #6B6B73; }
.ob.light .ob-vrow-soon { color: #6B6B73; background: rgba(15,15,16,0.07); }
.ob.light .ob-vdone-row { color: #3A3A40; }
.ob.light .ob-seclog span { color: #6B6B73; }
/* Le sceau reste sombre & doré en thème clair · il tranche comme un cachet officiel */

/* Reveal */
.ob.light .ob-genring { border-color: rgba(15,15,16,0.14); border-top-color: #0F0F10; }
.ob.light .ob-genlabel { color: #6B6B73; }
.ob.light .ob-reveal-row { color: #3A3A40; }
.ob.light .ob-reveal-row em { color: #8A8A93; }

/* Welcome */
.ob.light .ob-wel-watermark { opacity: 0.06; }
.ob.light .ob-wel-brand { color: #0F0F10; }
.ob.light .ob-wel-row { color: #6B6B73; }
.ob.light .ob-wel-row b { color: #0F0F10; }
.ob.light .ob-wel-proof { color: #2A2A2E; background: #FFFFFF; border-color: rgba(15,15,16,0.1); }
.ob.light .ob-wel-proof svg { color: var(--acc); }

/* La carte reste sombre · ombre adoucie sur fond clair */
.ob.light .ob-card {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.14),
    inset 0 -1.5px 0 rgba(0,0,0,0.55),
    inset 1px 0 0 rgba(255,255,255,0.05),
    inset -1px 0 0 rgba(0,0,0,0.3),
    0 18px 44px rgba(15,15,16,0.28);
}
.ob.light .ob-card.gold {
  box-shadow: 0 18px 44px rgba(15,15,16,0.28), inset 0 0 0 1px rgba(212, 175, 55, 0.07), inset 0 26px 44px -30px rgba(212, 175, 55, 0.18);
}

/* Invitation */
.ob.light .ob-invhead-name { color: #0F0F10; }
.ob.light .ob-crest {
  background: linear-gradient(140deg, #FFFFFF, #EFEFED);
  border-color: rgba(15,15,16,0.12); color: #0F0F10;
  box-shadow: 0 1px 2px rgba(15,15,16,0.04);
}
.ob.light .ob-crest img { filter: drop-shadow(0 2px 5px rgba(15,15,16,0.2)); }
.ob.light .ob-inv-facts { background: #FFFFFF; border-color: rgba(15,15,16,0.09); box-shadow: 0 1px 2px rgba(15,15,16,0.04); }
.ob.light .ob-inv-row + .ob-inv-row { border-top-color: rgba(15,15,16,0.07); }
.ob.light .ob-inv-lbl { color: #8A8A93; }
.ob.light .ob-inv-val b { color: #0F0F10; }
.ob.light .ob-inv-val em { color: #6B6B73; }
.ob.light .ob-invcode { background: rgba(15,15,16,0.035); border-color: rgba(15,15,16,0.22); }
.ob.light .ob-invcode-lbl { color: rgba(15,15,16,0.4); }
.ob.light .ob-invcode-val { color: var(--acc); }
.ob.light .ob-invcode-meta { color: #8A8A93; }
.ob.light .ob-invpaste-btn { background: #FFFFFF; border-color: rgba(15,15,16,0.16); color: #0F0F10; }
.ob.light .ob-invpaste-val { color: var(--acc); }
.ob.light .ob-invpaste-hint { color: #8A8A93; }
.ob.light .ob-inviter-av { background: rgba(15,15,16,0.06); color: #2A2A2E; }
.ob.light .ob-inviter-role { color: #6B6B73; }
.ob.light .ob-inviter-msg { color: #3A3A40; }
.ob.light .ob-subhead { color: #0F0F10; }