/* checkin.css — Online Check-in — La Palme d'Azur
   Mobile-first (375px base). DM Sans + premium navy palette.
   Inspiration : Marriott Bonvoy app · Hilton Honors · Four Seasons digital. */

:root {
  /* ── Premium palette ─────────────────────────────────────── */
  --ci-navy:        #1B2A4A;          /* CTA principal, deep navy */
  --ci-navy-h:      #243456;          /* hover CTA (légèrement plus clair) */
  --ci-navy-d:      #14213D;          /* navy plus profond pour gradients */
  --ci-coral:       #E8623D;          /* accent : focus, dot actif */
  --ci-coral-l:     #FEF1EC;          /* halo focus très léger */
  --ci-ink:         #0F172A;          /* texte principal — slate-900 */
  --ci-ink-2:       #475569;          /* texte secondaire — slate-600 */
  --ci-ink-3:       #94A3B8;          /* labels discrets — slate-400 */
  --ci-ink-4:       #CBD5E1;          /* dividers — slate-300 */
  --ci-bg:          #F8FAFC;          /* fond app — slate-50 */
  --ci-bg-2:        #F1F5F9;          /* fond inputs au focus — slate-100 */
  --ci-white:       #FFFFFF;
  --ci-border:      #E2E8F0;          /* slate-200 */
  --ci-border-s:    #EDF2F7;          /* dividers très subtils */

  --ci-green:       #059669;          /* success */
  --ci-green-d:     #047857;
  --ci-green-l:     #ECFDF5;
  --ci-green-bd:    #A7F3D0;

  --ci-amber:       #B45309;
  --ci-amber-l:     #FFFBEB;
  --ci-amber-bd:    #FDE68A;

  --ci-red:         #DC2626;
  --ci-red-l:       #FEF2F2;

  --ci-gold:        #C6A769;

  /* ── Tokens ─────────────────────────────────────────────── */
  --ci-radius-sm:   8px;
  --ci-radius:      12px;
  --ci-radius-lg:   16px;
  --ci-radius-xl:   20px;

  --ci-shadow-xs:   0 1px 2px rgba(15, 23, 42, .04);
  --ci-shadow-sm:   0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --ci-shadow:      0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .05);
  --ci-shadow-md:   0 2px 6px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .08);
  --ci-shadow-cta:  0 1px 2px rgba(27, 42, 74, .12), 0 6px 16px rgba(27, 42, 74, .18);

  --ci-ease:        cubic-bezier(.4, 0, .2, 1);
  --ci-dur:         .2s;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--ci-bg);
  color: var(--ci-ink);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.005em;
  text-rendering: optimizeLegibility;
}
/* Safari iOS : le document ne scrolle jamais (app-shell) -> couper aussi le rebond
   elastique et le pull-to-refresh accidentels (rechargements observes en test 19/07,
   segments passeport -> banniere d'incident grise en haut), et empecher le scroll
   interne de « fuir » vers le document. */
html, body { overscroll-behavior-y: none; }
.ci-main { overscroll-behavior: contain; }

button {
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  letter-spacing: inherit;
}

/* ── Header ─────────────────────────────────────────────────── */
.ci-header {
  background: var(--ci-white);
  border-bottom: 1px solid var(--ci-border-s);
  flex-shrink: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.ci-header__inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.ci-header__brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.ci-header__brand-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ci-ink);
}
.ci-header__brand-dot { color: var(--ci-coral); }
.ci-header__brand-sub {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ci-ink-3);
  margin-top: 3px;
}
.ci-header__badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ci-ink-3);
  flex-shrink: 0;
}
.ci-header__badge svg { width: 13px; height: 13px; color: var(--ci-green); }

/* ── Progress bar — fine, élégante ─────────────────────────── */
.ci-progress {
  background: var(--ci-white);
  border-bottom: 1px solid var(--ci-border-s);
  padding: 0 16px;
  flex-shrink: 0;
}
.ci-progress__inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  padding: 14px 4px 12px;
}
.ci-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  cursor: default;
  min-width: 0;
}
.ci-step-dot__circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #E5E7EB;
  background: var(--ci-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 400;
  color: #C4C9D2;
  transition: all var(--ci-dur) var(--ci-ease);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  letter-spacing: 0;
}
.ci-step-dot__label {
  font-size: 9px;
  color: #C4C9D2;
  font-weight: 400;
  letter-spacing: .005em;
  text-align: center;
  white-space: nowrap;
  padding: 0 2px;
}
.ci-step-dot.active .ci-step-dot__circle {
  border-color: #C94B28;
  background: #FFF5F2;
  color: #C94B28;
  font-weight: 400;
}
.ci-step-dot.active .ci-step-dot__label {
  color: #C94B28;
  font-weight: 400;
}
.ci-step-dot.done .ci-step-dot__circle {
  border-color: #047857;
  background: #F0FDF4;
  color: #047857;
}
.ci-step-dot.done .ci-step-dot__label { color: #C4C9D2; font-weight: 400; }
.ci-progress__line {
  flex: 1;
  height: 1px;
  background: #EDEEF0;
  margin: 0 -2px;
  align-self: flex-start;
  margin-top: 12.5px;
  position: relative;
  z-index: 0;
  border-radius: 2px;
}

/* ── Main content ──────────────────────────────────────────── */
.ci-main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px 28px;
}

/* ── Step transition ────────────────────────────────────────── */
@keyframes ci-step-enter {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
#ci-main > .ci-card {
  animation: ci-step-enter 0.22s ease forwards;
}

/* ── Cards premium ─────────────────────────────────────────── */
.ci-card {
  background: var(--ci-white);
  border-radius: var(--ci-radius-lg);
  box-shadow: var(--ci-shadow);
  padding: 24px 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(226, 232, 240, .4);
}
.ci-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ci-ink);
  margin-bottom: 16px;
  letter-spacing: -.015em;
  line-height: 1.3;
}
.ci-card__subtitle {
  font-size: 13.5px;
  color: var(--ci-ink-2);
  margin-top: -10px;
  margin-bottom: 18px;
  line-height: 1.55;
}

/* ── Récap paiement (smart) — sobre premium : blanc cassé chaud, contour greige, or en seul accent ── */
.ci-recap { background: #FCFBF9; border: 1px solid #ECE7DD; }
.ci-recap__sub { font-size: 13px; color: var(--ci-ink-2); margin-top: -8px; margin-bottom: 18px; line-height: 1.5; }
.ci-recap__list { display: grid; grid-auto-rows: 1fr; gap: 10px; } /* rangées à hauteur ÉGALE quel que soit le wrapping du texte (fix mobile : taxe vs caution) */
.ci-recap__row {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; border: 1px solid #E5E0D6; border-radius: 14px;
  background: #fff; transition: border-color .2s var(--ci-ease), box-shadow .2s var(--ci-ease);
}
.ci-recap__row.is-due:hover { border-color: #C6A769; box-shadow: 0 2px 10px rgba(198, 167, 105, .12); }
.ci-recap__row.is-done { background: #F4F8F4; border-color: #CFE7D4; }
.ci-recap__ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: #F4F1EA; color: var(--ci-navy);
  display: flex; align-items: center; justify-content: center;
}
.ci-recap__row.is-done .ci-recap__ic { background: #fff; color: var(--ci-green); }
.ci-recap__main { flex: 1; min-width: 0; }
.ci-recap__label { font-size: 15px; font-weight: 600; color: var(--ci-ink); line-height: 1.25; }
.ci-recap__note { font-size: 11.5px; color: var(--ci-ink-3); margin-top: 3px; line-height: 1.4; }
.ci-recap__right { text-align: right; white-space: nowrap; padding-left: 6px; }
.ci-recap__amt { font-size: 16px; font-weight: 700; color: var(--ci-ink); }
.ci-recap__amt--done { font-size: 13.5px; font-weight: 600; color: var(--ci-ink-3); }
.ci-recap__badge { font-size: 12px; font-weight: 600; color: var(--ci-green-d); margin-top: 1px; }
.ci-recap__trust {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 18px; font-size: 12px; color: var(--ci-ink-2); font-weight: 500;
}

/* ── Reservation summary ───────────────────────────────────── */
.ci-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.ci-summary-item label {
  font-size: 11px;
  color: var(--ci-ink-3);
  display: block;
  margin-bottom: 3px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ci-summary-item span {
  font-size: 14px;
  font-weight: 600;
  color: var(--ci-ink);
  letter-spacing: -.005em;
}

/* Total banner = paiement déjà validé → vert success */
.ci-total-banner {
  margin-top: 18px;
  background: var(--ci-green-l);
  border: 1px solid var(--ci-green-bd);
  border-radius: var(--ci-radius);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.ci-total-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ci-green);
}
.ci-total-banner__label {
  font-size: 12.5px;
  color: var(--ci-green-d);
  font-weight: 600;
  letter-spacing: .005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ci-total-banner__label::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--ci-green);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.ci-total-banner__amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--ci-green-d);
  letter-spacing: -.02em;
}

/* ── Info CTA card (step 1) ─────────────────────────────────── */
.ci-card--cta {
  background: #FFF5F2;
  border-color: #F8CFC4;
  position: relative;
  overflow: hidden;
}
.ci-card--cta::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ci-coral);
}

/* ── Form fields ────────────────────────────────────────────── */
.ci-form { display: flex; flex-direction: column; gap: 14px; }

.ci-field { display: flex; flex-direction: column; gap: 6px; }

.ci-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ci-ink-2);
  letter-spacing: .005em;
}

.ci-field input,
.ci-field select {
  padding: 13px 14px;
  border: 1.5px solid var(--ci-border);
  border-radius: var(--ci-radius-sm);
  font-size: 16px;          /* ≥ 16px — évite le zoom iOS */
  line-height: 1.3;
  color: var(--ci-ink);
  background: #FAFBFC;
  transition: border-color var(--ci-dur) var(--ci-ease),
              background-color var(--ci-dur) var(--ci-ease),
              box-shadow var(--ci-dur) var(--ci-ease);
  font-family: inherit;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ci-field input::placeholder { color: var(--ci-ink-3); }

.ci-field input:focus,
.ci-field select:focus {
  outline: none;
  border-color: var(--ci-coral);
  background: var(--ci-white);
  box-shadow: 0 0 0 3px var(--ci-coral-l);
}

.ci-field input.error {
  border-color: var(--ci-red);
  background: var(--ci-red-l);
}
.ci-field input.error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.ci-field__error {
  font-size: 12px;
  color: var(--ci-red);
  font-weight: 500;
  margin-top: 1px;
}

/* Custom select arrow */
.ci-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
  cursor: pointer;
}
.ci-field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23E8623D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* date input — supprime l'icône native iOS qui bouge */
.ci-field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}
.ci-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.ci-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(60%) sepia(8%) saturate(450%) hue-rotate(180deg) brightness(90%);
  cursor: pointer;
  opacity: .7;
}

.ci-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .ci-form-row { grid-template-columns: 1fr; }
}

/* ── Traveler block ─────────────────────────────────────────── */
.ci-traveler {
  border: 1.5px solid var(--ci-border);
  border-radius: var(--ci-radius);
  padding: 18px 16px 16px;
  margin-bottom: 12px;
  background: var(--ci-white);
  transition: border-color var(--ci-dur) var(--ci-ease),
              box-shadow var(--ci-dur) var(--ci-ease);
}
.ci-traveler:focus-within {
  border-color: var(--ci-coral);
  box-shadow: 0 0 0 3px var(--ci-coral-l);
}
.ci-traveler__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ci-border-s);
}
.ci-traveler__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ci-ink);
  letter-spacing: -.005em;
}
.ci-traveler__remove {
  background: var(--ci-bg-2);
  border: none;
  color: var(--ci-ink-2);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ci-dur) var(--ci-ease),
              color var(--ci-dur) var(--ci-ease);
}
.ci-traveler__remove:hover,
.ci-traveler__remove:active {
  background: var(--ci-red-l);
  color: var(--ci-red);
}

.ci-add-traveler {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border: 1.5px dashed var(--ci-border);
  border-radius: var(--ci-radius);
  background: var(--ci-white);
  color: var(--ci-navy);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--ci-dur) var(--ci-ease),
              border-color var(--ci-dur) var(--ci-ease),
              color var(--ci-dur) var(--ci-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: -.005em;
}
.ci-add-traveler:hover,
.ci-add-traveler:active {
  background: var(--ci-bg-2);
  border-color: var(--ci-navy);
  color: var(--ci-navy);
}

/* ── Camera UI ──────────────────────────────────────────────── */
.ci-camera-wrap {
  position: relative;
  background: #0A0E18;
  border-radius: var(--ci-radius);
  overflow: hidden;
  aspect-ratio: 3/4;  /* portrait orientation for phone screens */
  max-height: 55vh;   /* visible without scroll on small iPhones */
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.ci-camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* ── KYC Frame Overlay (Phase 4.6) ─────────────────────────────────────
   Aspect-ratio matches real doc type:
   - CR80 (national_id, driving_license): 85.6×54mm = ratio 1.585
   - Passport (ICAO 9303): 125×88mm = ratio 1.42
   State colors:
   - default (white): waiting
   - bad (red): no doc detected / way off
   - close (amber): doc detected, adjust
   - ok (green): perfect, holding for capture
*/
/* ── Phase 4.8 — Fullscreen KYC capture overlay (Ondato / Veriff style) ──
   Edge-to-edge dark immersive capture experience. Premium, sober, ergonomic.
*/
.ci-kyc-fs {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  animation: ci-kyc-fs-in .35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes ci-kyc-fs-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header — overlay on top of video with subtle gradient for legibility */
.ci-kyc-fs__header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: max(env(safe-area-inset-top, 0px), 14px) 18px 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 70%, transparent 100%);
  color: #fff;
}
.ci-kyc-fs__back {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.ci-kyc-fs__back:active { background: rgba(255,255,255,.25); }
.ci-kyc-fs__title { flex: 1; min-width: 0; }
.ci-kyc-fs__type {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
  font-weight: 500;
  line-height: 1;
}
.ci-kyc-fs__side {
  font-size: 17px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* Video — absolute, fills the whole overlay behind everything */
.ci-kyc-fs__video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Phase 4.14 — Bandeau blanc d'instruction (style Ondato) + zone caméra sombre */
.ci-kyc-banner {
  flex: 0 0 auto;
  background: #fff;
  color: #1B263B;
  /* Bandeau compacté (owner 07/07) : titre gris retiré + paddings/marges réduits pour
     libérer de la hauteur et agrandir le cadre. */
  padding: max(env(safe-area-inset-top, 0px), 12px) 18px 8px;
  box-shadow: 0 8px 24px rgba(11, 14, 18, .22);
  position: relative; z-index: 10;
  border-radius: 0 0 24px 24px;
}
.ci-kyc-banner__row { display: flex; align-items: center; gap: 12px; }
.ci-kyc-banner__icon {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(27, 38, 59, .10); background: #FAF7F3; color: #1B263B;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
}
.ci-kyc-banner__step { flex: 1; min-width: 0; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9099A6; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-kyc-banner__instr { font-size: 18px; font-weight: 700; line-height: 1.25; margin-top: 8px; color: #1B263B; letter-spacing: -.01em; text-align: center; }
.ci-kyc-banner__picto { margin-top: 8px; color: var(--ci-coral); display: flex; justify-content: center; }
.ci-kyc-cam {
  position: relative; flex: 1 1 auto; min-height: 0; background: #0a0d11; overflow: hidden;
  /* Conteneur de taille (iOS 16+) : expose la hauteur reelle de la zone camera (cqh) au cadre,
     qui se borne alors en hauteur SANS jamais casser son ratio (fix cadre rogne navigateur in-app). */
  container-type: size;
}

/* Frame KYC — footer (aide + déclencheur) est un FRÈRE flex SOUS la caméra (plus
   d'overlay). Cadre descendu à top:54% pour dégager de l'air sous le bandeau blanc
   (retour owner « cadre collé au bandeau »). Testé sans collision jusqu'à iPhone SE.
   Ratio EXACT conservé (aspect-ratio, jamais max-height). */
.ci-kyc-fs #kyc-frame {
  z-index: 5;
  width: 94%;                /* repli iOS <= 15 (pas de cqh) : comportement actuel */
  width: min(94%, 136cqh);   /* 136cqh/1.585 = hauteur <= 86 % de la zone camera : coins bas jamais rognes */
  aspect-ratio: 1.585;
  top: 54%;
}
/* Passeport = ratio 1.42 (plus haut qu'une carte). À 90% de large il dépasse la zone
   caméra en bas -> coins du bas rognés (retour owner 07/07). On le rétrécit à 80% pour
   qu'il ait la MÊME HAUTEUR que la carte (0.80/1.42 ≈ 0.90/1.585) : il rentre à l'identique,
   ratio EXACT conservé, aucun coin coupé. */
.ci-kyc-fs #kyc-frame.ci-frame--passport {
  aspect-ratio: 1.42;
  /* Owner 19/07 : un passeport (125x88 mm) est physiquement PLUS GRAND qu'une carte
     CR80 -> meme largeur cible que la carte (94 %), donc plus HAUT (ratio 1.42).
     128cqh = hauteur <= 90 % de la zone camera (zero coin rogne) ; top 52 % pour
     preserver ~3 % de marge sous les coins bas. Aucun chevauchement du footer :
     le cadre vit DANS .ci-kyc-cam (overflow hidden), le footer est un FRERE flex. */
  width: 94%;
  width: min(94%, 128cqh);
  top: 52%;
}
/* Compte a rebours aligne sur le cadre passeport (:has = iOS 15.4+ ; sinon reste a 54 %, ecart benin) */
.ci-kyc-fs:has(.ci-frame--passport) #frame-countdown { top: 52%; }
/* Compte à rebours aligné sur le cadre */
.ci-kyc-fs #frame-countdown { top: 54%; }

/* Status pill — haut de la zone caméra */
.ci-kyc-fs #frame-status {
  top: 16px;
  z-index: 6;
}

/* Countdown — bigger and bolder in fullscreen */
.ci-kyc-fs #frame-countdown {
  font-size: 120px;
  z-index: 7;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0,0,0,.6);
}

/* Zone camera ecrasee (barre in-app basse, petit iPhone) : recentrer le cadre.
   Le 54 % servait a aerer sous le bandeau, inutile quand la hauteur manque. */
@container (max-height: 330px) {
  .ci-kyc-fs #kyc-frame, .ci-kyc-fs #kyc-frame.ci-frame--passport,
  .ci-kyc-fs #frame-countdown, .ci-kyc-fs:has(.ci-frame--passport) #frame-countdown { top: 50%; }
}
/* Viewport court (navigateur in-app avec barre basse, iPhone SE, Safari barres deployees) :
   compacter bandeau + footer pour rendre ~55 px a la zone camera (profite aussi a iOS 15 sans cqh). */
@media (max-height: 700px) {
  .ci-kyc-banner__instr { margin-top: 8px; font-size: 16.5px; }
  .ci-kyc-banner__picto { margin-top: 6px; }
  .ci-kyc-banner__picto svg { width: 52px; height: 36px; }
  .ci-kyc-fs__footer { padding-top: 10px; gap: 10px; }
  .ci-kyc-fs__helper { font-size: 12.5px; }
  .ci-kyc-fs__capture { width: 64px; height: 64px; }
  .ci-kyc-fs__capture::before { width: 46px; height: 46px; }
}

/* Footer — FRÈRE flex SOUS la caméra (plus d'overlay → fin du chevauchement
   avec le cadre). Fond plein #0a0d11 = même noir que .ci-kyc-cam → caméra +
   footer se lisent comme une seule zone sombre, cadre coins-seuls flottant dedans. */
.ci-kyc-fs__footer {
  position: relative;
  flex: 0 0 auto;
  z-index: 10;
  padding: 16px 20px max(calc(env(safe-area-inset-bottom, 0px) + 20px), 24px);
  background: #0a0d11;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ci-kyc-fs__helper {
  font-size: 13px;
  color: rgba(255,255,255,.92);
  text-align: center;
  max-width: 280px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ci-kyc-fs__capture {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid rgba(255,255,255,.35);
  background-clip: padding-box;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ci-kyc-fs__capture::before {
  content: '';
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  display: block;
  transition: transform .12s;
}
.ci-kyc-fs__capture:active::before { transform: scale(0.86); }
.ci-kyc-fs__capture:disabled {
  background: rgba(255,255,255,.18);
  cursor: not-allowed;
}
.ci-kyc-fs__capture:disabled::before { background: rgba(255,255,255,.4); }

/* ── Phase 5B.3 — Verification result badges (success / fail) ─────────── */
.ci-verify-check, .ci-verify-fail {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  animation: ci-verify-pop .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ci-verify-check {
  background: linear-gradient(135deg, #10B981, #059669);
  box-shadow: 0 8px 24px rgba(16, 185, 129, .35), 0 0 0 6px rgba(16, 185, 129, .12);
}
.ci-verify-fail {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  box-shadow: 0 8px 24px rgba(220, 38, 38, .35), 0 0 0 6px rgba(220, 38, 38, .12);
}
@keyframes ci-verify-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Phase 4.7 — KYC Doc Type Picker (Ondato/Stripe Identity style) ───────── */
.ci-doc-picker { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ci-doc-pick-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px;
  background: #fff; border: 2px solid var(--ci-border); border-radius: 14px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: all .18s ease;
  position: relative;
}
.ci-doc-pick-card:hover, .ci-doc-pick-card:active {
  border-color: var(--ci-coral);
  background: #FFFBF9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232,98,61,.12);
}
.ci-doc-pick-card__icon {
  width: 56px; height: 56px; flex-shrink: 0;
  background: var(--ci-coral-l); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-coral);
}
.ci-doc-pick-card__icon svg { width: 36px; height: 36px; }
.ci-doc-pick-card__body { flex: 1; min-width: 0; }
.ci-doc-pick-card__label { font-size: 15.5px; font-weight: 700; color: var(--ci-ink); line-height: 1.2; }
.ci-doc-pick-card__sub { font-size: 12.5px; color: var(--ci-ink-2); margin-top: 3px; line-height: 1.3; }
.ci-doc-pick-card__sides {
  font-size: 10.5px; font-weight: 700;
  background: var(--ci-bg); color: var(--ci-ink-2);
  padding: 4px 8px; border-radius: 999px;
  letter-spacing: .04em; text-transform: uppercase;
  flex-shrink: 0;
}
.ci-doc-pick-card__arrow { color: var(--ci-ink-3); flex-shrink: 0; transition: color .18s; }
.ci-doc-pick-card:hover .ci-doc-pick-card__arrow { color: var(--ci-coral); }

.ci-doc-picker__hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ci-ink-3); margin-top: 18px; padding: 0 4px;
  line-height: 1.4;
}
.ci-doc-picker__hint svg { flex-shrink: 0; color: var(--ci-ink-3); }

/* Issue de secours du sélecteur — délibérément discrète (elle ne doit pas concurrencer
   les vraies pièces) mais toujours atteignable : un sélecteur sans issue laisse un client
   dehors, ce qui est arrivé le 03/08/2026. */
.ci-doc-picker__none {
  display: block; margin: 14px auto 0; padding: 6px 4px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--ci-ink-3);
  text-decoration: underline; text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}
.ci-doc-picker__none:hover, .ci-doc-picker__none:focus-visible { color: var(--ci-coral); }

/* ── Phase 4.7 — Capture screen header (face avant/arrière) ────────────── */
.ci-doc-capture-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; padding: 0 4px;
}
.ci-doc-capture-back {
  width: 40px; height: 40px; border-radius: 10px;
  background: #fff; border: 1.5px solid var(--ci-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ci-ink); flex-shrink: 0;
  transition: all .15s;
}
.ci-doc-capture-back:hover { background: var(--ci-bg); border-color: var(--ci-ink-2); }
.ci-doc-capture-header__body { flex: 1; min-width: 0; }
.ci-doc-capture-header__type { font-size: 11.5px; font-weight: 600; color: var(--ci-ink-3); letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.ci-doc-capture-header__side { font-size: 17px; font-weight: 700; color: var(--ci-ink); margin-top: 4px; line-height: 1.2; }

/* KYC-pro frame: large + heavily obscured outside (Stripe Identity / Onfido style) */
.ci-frame {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  aspect-ratio: 1.585;  /* default CR80 */
  /* Coins seuls (rendu KYC pro Stripe Identity / Onfido) — plus de bordure pleine.
     box-sizing:border-box (reset global) → retirer la bordure NE change PAS le rect
     externe lu par getFrameBoundsInCanvas → 0 impact détection. Le masque box-shadow
     et la lueur d'état restent ; l'état est porté par la couleur des coins (currentColor). */
  border: none;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .82);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ci-frame--passport { aspect-ratio: 1.42; }
.ci-frame--bad   { border-color: #DC2626; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .82), 0 0 24px rgba(220, 38, 38, .65); }
.ci-frame--close { border-color: #F59E0B; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .82), 0 0 24px rgba(245, 158, 11, .65); }
.ci-frame--ok    { border-color: #10B981; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .82), 0 0 32px rgba(16, 185, 129, .85); }
/* Pendant le compte à rebours : pulsation de LUEUR uniquement (pas de scale → la
   fenêtre du cadre ne « respire » plus, l'image ne bouge plus — retour 31/05). */
.ci-frame--countdown { animation: ci-frame-pulse 0.55s ease-in-out infinite alternate; }
@keyframes ci-frame-pulse {
  from { box-shadow: 0 0 0 9999px rgba(0,0,0,.82), 0 0 22px rgba(16,185,129,.65); }
  to   { box-shadow: 0 0 0 9999px rgba(0,0,0,.82), 0 0 46px rgba(16,185,129,1); }
}

/* Corner markers — 4 L-shapes positioned at frame corners.
   Agrandis (34px) car seuls repères visuels du cadre depuis le retrait de la bordure. */
.ci-frame__corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: currentColor;
  border-style: solid;
  border-width: 0;
  transition: color .3s ease;
}
.ci-frame { color: rgba(255, 255, 255, .95); }
.ci-frame--bad { color: #DC2626; }
.ci-frame--close { color: #F59E0B; }
.ci-frame--ok { color: #10B981; }
.ci-frame__corner--tl { top: -3px; left: -3px; border-top-width: 4px; border-left-width: 4px; border-radius: 8px 0 0 0; }
.ci-frame__corner--tr { top: -3px; right: -3px; border-top-width: 4px; border-right-width: 4px; border-radius: 0 8px 0 0; }
.ci-frame__corner--bl { bottom: -3px; left: -3px; border-bottom-width: 4px; border-left-width: 4px; border-radius: 0 0 0 8px; }
.ci-frame__corner--br { bottom: -3px; right: -3px; border-bottom-width: 4px; border-right-width: 4px; border-radius: 0 0 8px 0; }

/* Status pill (top of camera-wrap, overlaid) */
.ci-frame-status {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, .88);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px 8px 32px;  /* extra left padding for icon */
  border-radius: 999px;
  letter-spacing: .01em;
  pointer-events: none;
  z-index: 2;
  transition: background .3s ease;
  white-space: nowrap;          /* keep on 1 line */
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-frame-status::before {
  content: '';
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #94A3B8;
  transition: background .3s ease;
}
.ci-frame-status--ok::before  { background: #10B981; box-shadow: 0 0 8px rgba(16,185,129,.7); }
.ci-frame-status--bad::before { background: #DC2626; box-shadow: 0 0 8px rgba(220,38,38,.7); }
.ci-frame-status--ok  { background: rgba(16, 185, 129, .92); }
.ci-frame-status--bad { background: rgba(220, 38, 38, .92); }

/* Countdown overlay (when auto-capture imminent) */
.ci-frame-countdown {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,.5);
  font-family: 'DM Sans', sans-serif;
  z-index: 3;
  pointer-events: none;
  animation: ci-countdown-pop .3s ease-out;
}
@keyframes ci-countdown-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Backward-compat: keep .ci-camera-guide selector available but make it invisible
   so existing pages without the new frame still render OK */
.ci-camera-guide { display: none; }
.ci-camera-label {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .92);
  font-weight: 500;
  letter-spacing: .005em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.ci-camera-preview {
  width: 100%;
  border-radius: var(--ci-radius);
  display: none;
  margin-bottom: 14px;
  border: 1px solid var(--ci-border);
}
.ci-camera-preview.show { display: block; }

.ci-camera-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ci-btn-capture {
  flex: 1;
  min-height: 48px;
  padding: 14px 16px;
  background: var(--ci-navy);
  color: #fff;
  border: none;
  border-radius: var(--ci-radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .015em;
  transition: background-color var(--ci-dur) var(--ci-ease),
              transform .08s var(--ci-ease),
              box-shadow var(--ci-dur) var(--ci-ease);
  box-shadow: var(--ci-shadow-cta);
}
.ci-btn-capture:hover { background: var(--ci-navy-h); }
.ci-btn-capture:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(27, 42, 74, .12);
}
.ci-btn-capture:disabled {
  background: var(--ci-ink-4);
  color: var(--ci-white);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

/* ── Document scan hint (mobile) ───────────────────────────── */
.ci-scan-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 16px;
  background: linear-gradient(180deg, var(--ci-bg-2) 0%, var(--ci-bg) 100%);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  margin-bottom: 14px;
  text-align: center;
}
.ci-scan-hint__text {
  font-size: 13.5px;
  color: var(--ci-ink-2);
  line-height: 1.6;
  max-width: 360px;
}
.ci-scan-hint__text strong { color: var(--ci-ink); font-weight: 600; }

.ci-btn-retake {
  min-height: 48px;
  padding: 13px 20px;
  background: var(--ci-white);
  color: var(--ci-ink);
  border: 1.5px solid var(--ci-border);
  border-radius: var(--ci-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -.005em;
  transition: background-color var(--ci-dur) var(--ci-ease),
              border-color var(--ci-dur) var(--ci-ease);
}
.ci-btn-retake:hover,
.ci-btn-retake:active {
  background: var(--ci-bg-2);
  border-color: var(--ci-ink-3);
}

.ci-upload-fallback {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ci-ink-3);
  line-height: 1.6;
}
.ci-upload-fallback a {
  color: var(--ci-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
}
.ci-upload-fallback a:hover { color: var(--ci-coral); }

/* ── CGV ────────────────────────────────────────────────────── */
/* Étape 4 : carte en colonne flex remplissant la zone visible → la zone CGV est
   le SEUL ascenseur (la page ne scrolle plus, le pavé signature ne capte plus
   le geste de scroll). Tête + bas fixes, CGV au milieu qui grandit. */
.ci-card.ci-step4 {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 200px);
}
.ci-step4__head, .ci-step4__foot { flex: 0 0 auto; }
.ci-step4__foot { margin-top: 14px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.ci-cgv-region { position: relative; flex: 1 1 auto; min-height: 160px; margin: 12px 0 0; }
.ci-cgv-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* le scroll ne « fuit » pas vers la page */
  border: 1.5px solid var(--ci-border);
  border-radius: var(--ci-radius);
  padding: 16px 14px 22px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ci-ink-2);
  background: var(--ci-white);
  scrollbar-width: thin;
  scrollbar-color: var(--ci-coral) #EEF1F5;
}
/* Scrollbar nettement visible (plus large, piste grise, pouce corail) */
.ci-cgv-scroll::-webkit-scrollbar { width: 9px; }
.ci-cgv-scroll::-webkit-scrollbar-track { background: #EEF1F5; border-radius: 9px; margin: 4px; }
.ci-cgv-scroll::-webkit-scrollbar-thumb {
  background: var(--ci-coral);
  border-radius: 9px;
  border: 2px solid #EEF1F5;
}
.ci-cgv-scroll p + p { margin-top: 10px; }
.ci-cgv-scroll strong, .ci-cgv-scroll b { color: var(--ci-ink); font-weight: 600; }

/* Clauses — numéro en pastille corail, titre net, corps lisible */
.ci-cgv-clause { margin-bottom: 14px; }
.ci-cgv-clause:last-child { margin-bottom: 0; }
.ci-cgv-clause__h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ci-ink); margin-bottom: 4px;
}
.ci-cgv-clause__n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ci-coral-l); color: var(--ci-coral);
  font-size: 11px; font-weight: 800;
}
.ci-cgv-clause__b { font-size: 12.5px; line-height: 1.55; color: var(--ci-ink-2); padding-left: 28px; }

/* Fondu bas : signale qu'il reste du contenu à lire */
.ci-cgv-fade {
  position: absolute; left: 1.5px; right: 10px; bottom: 1.5px; height: 44px;
  border-radius: 0 0 var(--ci-radius) var(--ci-radius);
  background: linear-gradient(to top, var(--ci-white) 18%, rgba(255,255,255,0) 100%);
  pointer-events: none; transition: opacity .25s var(--ci-ease);
}
/* Indice « faites défiler » — pilule centrée en bas, disparaît en fin de lecture */
.ci-cgv-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--ci-navy); color: #fff;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15,23,42,.18);
  pointer-events: none; transition: opacity .25s var(--ci-ease);
  animation: ci-cgv-bob 1.6s ease-in-out infinite;
}
@keyframes ci-cgv-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(3px); } }

/* Bas d'étape 4 compact (signature + case) */
.ci-step4__foot .ci-sig-wrap { margin: 0 0 12px; }
.ci-step4 .ci-sig-canvas { height: 170px; }

/* Coordonnées du réservant (étape voyageurs) */
.ci-traveler__contact { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ci-border); }
.ci-traveler__contact-h {
  font-size: 12.5px; font-weight: 700; color: var(--ci-ink); margin-bottom: 10px;
  letter-spacing: -.005em;
}

.ci-checkbox-wrap {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--ci-border);
  border-radius: var(--ci-radius);
  cursor: pointer;
  background: var(--ci-white);
  transition: border-color var(--ci-dur) var(--ci-ease),
              background-color var(--ci-dur) var(--ci-ease);
  min-height: 56px;
}
.ci-checkbox-wrap:hover { border-color: var(--ci-ink-3); }
.ci-checkbox-wrap + .ci-checkbox-wrap { margin-top: 10px; }
.ci-checkbox-wrap input[type=checkbox] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--ci-coral);
  margin-top: 1px;
  cursor: pointer;
}
.ci-checkbox-wrap span {
  font-size: 13.5px;
  color: var(--ci-ink-2);
  line-height: 1.55;
  letter-spacing: -.005em;
}
.ci-checkbox-wrap.checked {
  border-color: var(--ci-coral);
  background: var(--ci-coral-l);
}
.ci-checkbox-wrap.checked span { color: var(--ci-ink); }

/* ── Signature pad ─────────────────────────────────────────── */
.ci-sig-wrap {
  margin: 20px 0;
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  overflow: hidden;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ci-sig-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--ci-border-s);
}
.ci-sig-label span {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ci-ink);
}
.ci-sig-clear {
  background: none;
  border: 1px solid var(--ci-border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  color: var(--ci-ink-3);
  cursor: pointer;
  font-family: inherit;
}
.ci-sig-clear:hover { border-color: var(--ci-ink-3); color: var(--ci-ink-2); }
.ci-sig-canvas {
  display: block;
  width: 100%;
  height: 160px;
  background: #FAFBFC;
  cursor: crosshair;
  touch-action: none;
}
/* Étape 2 — note « vérifiez/corrigez » + contour corail des champs à compléter */
.ci-step2-verify {
  display: flex; align-items: center; gap: 8px;
  background: rgba(232, 98, 61, 0.06);
  border: 1px solid rgba(232, 98, 61, 0.20);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0 16px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ci-ink-2, #5A6573);
}
.ci-step2-verify svg { color: var(--ci-coral, #E8623D); flex-shrink: 0; }
.ci-field-hint { font-size: 12px; color: var(--ci-ink-3, #8A93A0); margin-top: 4px; line-height: 1.35; }
.ci-field input.ci-input--missing,
.ci-field input.ci-input--missing:focus {
  border-color: var(--ci-coral, #E8623D) !important;
  box-shadow: 0 0 0 3px rgba(232, 98, 61, 0.12);
}

.ci-sig-pad { position: relative; }
.ci-sig-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: #C4C9D2;
  pointer-events: none;
  white-space: nowrap;
}
/* Pavé verrouillé : signature = action explicite (évite les traits accidentels au scroll). */
.ci-sig-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(250, 247, 243, 0.94);
  border: 1.5px dashed var(--ci-coral, #E8623D);
  border-radius: 12px;
  color: var(--ci-coral, #E8623D);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ci-sig-lock:active { background: rgba(232, 98, 61, 0.10); }

/* ── Stripe caution ─────────────────────────────────────────── */
.ci-caution-banner {
  background: var(--ci-amber-l);
  border: 1px solid var(--ci-amber-bd);
  border-radius: var(--ci-radius);
  padding: 14px 16px 14px 18px;
  font-size: 13px;
  color: var(--ci-amber);
  margin-bottom: 20px;
  line-height: 1.55;
  position: relative;
  overflow: hidden;
}
.ci-caution-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ci-amber);
}
.ci-caution-banner strong { font-weight: 700; color: #78350F; }

.ci-caution-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--ci-ink);
  text-align: center;
  margin: 22px 0 6px;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.ci-caution-sub {
  text-align: center;
  font-size: 12.5px;
  color: var(--ci-ink-3);
  margin-bottom: 22px;
  letter-spacing: .005em;
}

#stripe-elements-container {
  margin-bottom: 16px;
  padding: 4px;
  border-radius: var(--ci-radius);
}

/* ── Success screen ────────────────────────────────────────── */
.ci-success {
  text-align: center;
  padding: 24px 0 8px;
}
.ci-success__icon {
  width: 80px;
  height: 80px;
  background: var(--ci-green-l);
  border: 1.5px solid var(--ci-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: ci-success-pop .55s var(--ci-ease) both;
}
@keyframes ci-success-pop {
  0%   { transform: scale(.7); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
.ci-success__greeting {
  font-size: 13px;
  font-weight: 500;
  color: var(--ci-green-d);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ci-success__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--ci-ink);
  margin-bottom: 10px;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.ci-success__sub {
  font-size: 14.5px;
  color: var(--ci-ink-2);
  margin-bottom: 26px;
  line-height: 1.6;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.ci-pin-box {
  background: linear-gradient(140deg, var(--ci-navy-d) 0%, var(--ci-navy) 60%, #2A3A66 100%);
  border-radius: var(--ci-radius-lg);
  padding: 22px 20px 20px;
  text-align: center;
  margin: 0 auto 24px;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(27, 42, 74, .25),
              0 2px 4px rgba(27, 42, 74, .12);
  position: relative;
  overflow: hidden;
}
.ci-pin-box::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(198, 167, 105, .15) 0%, transparent 70%);
  pointer-events: none;
}
.ci-pin-box__label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .14em;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
}
.ci-pin-box__code {
  font-family: 'Roboto Mono', 'SF Mono', 'Courier New', monospace;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #fff;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.ci-pin-box__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  margin-top: 10px;
  letter-spacing: .02em;
  position: relative;
}

.ci-arrival-info {
  background: var(--ci-white);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  padding: 18px 18px 16px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ci-ink-2);
  margin-bottom: 20px;
  box-shadow: var(--ci-shadow-xs);
}
.ci-arrival-info strong { color: var(--ci-ink); font-weight: 600; }
.ci-arrival-info p + p { margin-top: 8px; }

/* ── Footer button ─────────────────────────────────────────── */
.ci-footer {
  flex-shrink: 0;
  width: 100%;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .95);
  border-top: 1px solid var(--ci-border-s);
  box-shadow: 0 -2px 12px rgba(15, 23, 42, .04);
}
.ci-footer__inner {
  max-width: 560px;
  margin: 0 auto;
}

.ci-btn-next {
  width: 100%;
  min-height: 52px;
  padding: 15px 20px;
  background: var(--ci-navy);
  color: #fff;
  border: none;
  border-radius: var(--ci-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .02em;
  transition: background-color var(--ci-dur) var(--ci-ease),
              transform .08s var(--ci-ease),
              box-shadow var(--ci-dur) var(--ci-ease),
              opacity var(--ci-dur) var(--ci-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  box-shadow: var(--ci-shadow-cta);
}
.ci-btn-next:hover { background: var(--ci-navy-h); box-shadow: 0 3px 6px rgba(27, 42, 74, .18), 0 12px 28px rgba(27, 42, 74, .22); }
.ci-btn-next:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(27, 42, 74, .12);
}
.ci-btn-next:disabled {
  background: var(--ci-ink-4);
  color: rgba(255, 255, 255, .9);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}
.ci-btn-next.loading { color: transparent; pointer-events: none; }
.ci-btn-next.loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -9px; margin-left: -9px;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ci-spin .6s linear infinite;
}

@keyframes ci-spin { to { transform: rotate(360deg); } }

/* ── Error / loading screens ───────────────────────────────── */
.ci-error-screen {
  text-align: center;
  padding: 60px 20px;
  max-width: 460px;
  margin: 0 auto;
}
.ci-error-screen h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--ci-ink);
  letter-spacing: -.01em;
}
.ci-error-screen p {
  font-size: 14.5px;
  color: var(--ci-ink-2);
  line-height: 1.6;
}

.ci-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  gap: 18px;
  padding: 40px 20px;
  color: var(--ci-ink-2);
  font-size: 14px;
}
.ci-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--ci-border);
  border-top-color: var(--ci-navy);
  border-radius: 50%;
  animation: ci-spin .8s linear infinite;
}

/* ── Responsive — petits écrans ────────────────────────────── */
@media (max-width: 380px) {
  .ci-progress { padding: 0 12px; }
  .ci-progress__inner { padding: 12px 2px 10px; }
  .ci-step-dot { gap: 5px; }
  .ci-step-dot__circle { width: 22px; height: 22px; font-size: 10px; }
  .ci-step-dot__label { font-size: 9px; }
  .ci-progress__line { margin-top: 11px; }
}

@media (max-width: 340px) {
  .ci-step-dot__label { font-size: 8.5px; letter-spacing: 0; }
  .ci-step-dot__circle { width: 22px; height: 22px; font-size: 10px; }
  .ci-progress__line { margin-top: 10.5px; }
  .ci-card { padding: 20px 16px; }
  .ci-pin-box__code { font-size: 32px; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ci-success__icon { animation: none; }
}

/* ── Print (improbable mais propre) ────────────────────────── */
@media print {
  .ci-footer, .ci-header, .ci-progress { display: none !important; }
  .ci-main { padding: 0; }
  .ci-card { box-shadow: none; border: 1px solid var(--ci-border); }
}

/* ══════════════════════════════════════════════════════════════
   i18n — sélecteur de langue (header)
   ══════════════════════════════════════════════════════════════ */
.ci-header__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ci-lang { position: relative; }
.ci-lang__toggle {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  background: var(--ci-white); border: 1px solid var(--ci-border);
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ci-ink-2);
  transition: border-color var(--ci-dur) var(--ci-ease), background var(--ci-dur) var(--ci-ease);
}
.ci-lang__toggle:hover { border-color: var(--ci-coral); color: var(--ci-ink); }
.ci-lang__toggle svg { color: var(--ci-ink-3); }
.ci-lang__cur { letter-spacing: .04em; }
.ci-lang__caret { transition: transform var(--ci-dur) var(--ci-ease); }
.ci-lang__toggle[aria-expanded="true"] .ci-lang__caret { transform: rotate(180deg); }
.ci-lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 184px; padding: 6px;
  background: var(--ci-white); border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius); box-shadow: var(--ci-shadow-md);
  animation: ci-lang-pop .16s var(--ci-ease);
}
@keyframes ci-lang-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ci-lang__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background var(--ci-dur) var(--ci-ease);
}
.ci-lang__item:hover { background: var(--ci-bg-2); }
.ci-lang__item.is-active { background: var(--ci-coral-l); }
.ci-lang__code {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ci-coral);
  width: 26px; flex-shrink: 0;
}
.ci-lang__name { font-size: 13.5px; font-weight: 500; color: var(--ci-ink); flex: 1; }
.ci-lang__chk { color: var(--ci-coral); flex-shrink: 0; }

@media (max-width: 430px) {
  .ci-header__badge { display: none; }   /* priorité au sélecteur de langue sur petit écran */
}

/* ══════════════════════════════════════════════════════════════
   Écran d'intro réassurance KYC (pattern Stripe Identity / Ondato)
   ══════════════════════════════════════════════════════════════ */
.ci-kyc-intro { text-align: center; }
.ci-kyc-intro__illo { margin: 4px auto 6px; display: flex; justify-content: center; }
.ci-kyc-intro__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--ci-ink);
  margin: 4px 0 0;
}
.ci-kyc-intro__body {
  font-size: 13.5px; line-height: 1.6; color: var(--ci-ink-2);
  max-width: 38ch; margin: 10px auto 20px;
}
.ci-kyc-intro__list {
  text-align: left; max-width: 300px; margin: 0 auto 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.ci-kyc-intro__row { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ci-ink); }
.ci-kyc-intro__ico {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,98,61,.10); color: var(--ci-coral);
}
.ci-kyc-intro__cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; border: 0; border-radius: 14px; padding: 16px;
  font-family: inherit; font-weight: 700; font-size: 15.5px; color: #fff;
  background: var(--ci-navy); cursor: pointer; box-shadow: var(--ci-shadow-cta);
  transition: background var(--ci-dur) var(--ci-ease);
}
.ci-kyc-intro__cta:hover { background: var(--ci-navy-h); }

/* Note langue sur les CGV (texte FR contraignant) */
.ci-cgv-legalnote {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--ci-amber-l); border: 1px solid var(--ci-amber-bd); border-radius: 8px;
  font-size: 12px; line-height: 1.45; color: var(--ci-amber);
}

/* Carte du paiement EN COURS (celle que le bouton « Payer X » va régler) = contour navy premium.
   Les autres cartes dues (ex. caution, réglée en dernier) gardent le style NEUTRE d'origine
   (.ci-recap__row : carte blanche, contour greige) — une seule carte mise en avant à la fois. */
.ci-recap__row.is-active {
  border: 1.5px solid var(--ci-navy);
  background: #fff; /* fond BLANC (pas de tint) : le contour navy = couleur du bouton Payer → le client comprend quelle carte le bouton règle. 1.5px = fin/premium, la COULEUR fait ressortir la carte (pas l'épaisseur). */
  box-shadow: 0 2px 10px rgba(27, 42, 74, .08);
}
/* Cartes dues NON sélectionnées (ex. caution en attente) = liseré GRIS neutre discret → la carte
   à payer MAINTENANT (navy = couleur du bouton) ressort seule ; les payées en vert. */
.ci-recap__row.is-due:not(.is-active) { border: 1px solid #E1E3E9; }
.ci-recap__row.is-active:hover { box-shadow: 0 2px 12px rgba(27, 42, 74, .14); }

/* ════ Hub Voyageurs — refonte premium 11/07 (demande owner : look app moderne,
   deep navy + accents violets, sobre). Boutons, statuts-pills, sheet de partage. ════ */

/* Boutons d'invitation : Inviter = navy plein · Renvoyer = ghost navy */
.ci-hubbtn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: 12px; border: 1.5px solid var(--ci-navy);
  background: var(--ci-navy); color: #fff;
  font-size: 13px; font-weight: 650; font-family: inherit; letter-spacing: .01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 10px rgba(27, 42, 74, .18);
}
.ci-hubbtn:hover { background: var(--ci-navy-h); }
.ci-hubbtn:active { transform: scale(.965); }
.ci-hubbtn--ghost { background: #fff; color: var(--ci-navy); box-shadow: none; border-color: #C7CEDC; }
.ci-hubbtn--ghost:hover { background: #F5F7FB; border-color: var(--ci-navy); }
.ci-hubbtn:disabled { opacity: .55; cursor: default; transform: none; }

/* Statuts voyageur en mini-pills teintées (fini le texte coloré brut) */
.ci-pillst {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  line-height: 1.35; letter-spacing: .01em; white-space: nowrap;
}
.ci-pillst--ok      { background: #ECFDF5; color: #047857; }
.ci-pillst--invited { background: #F3EFFF; color: #6D28D9; }
.ci-pillst--opened  { background: #EEF4FF; color: #1D4ED8; }
.ci-pillst--todo    { background: #FFF4EF; color: #C2410C; }
.ci-pillst--wait    { background: #F1F5F9; color: #64748B; }
.ci-pillst--warn    { background: #FEF3C7; color: #B45309; }

/* Gros CTA « Ajouter la pièce de X » : navy premium, moins criard que le corail plein */
.ci-hubnext {
  margin-top: 14px; width: 100%; height: 52px; border: none; border-radius: 14px;
  background: linear-gradient(180deg, var(--ci-navy-h) 0%, var(--ci-navy) 60%);
  color: #fff; font-size: 15px; font-weight: 650; font-family: inherit; letter-spacing: .01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px rgba(20, 33, 61, .22);
  transition: transform .12s ease, box-shadow .18s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.ci-hubnext:hover { box-shadow: 0 8px 22px rgba(20, 33, 61, .30); }
.ci-hubnext:active { transform: scale(.985); }
.ci-hubghost {
  margin-top: 10px; width: 100%; height: 46px; border: 1.5px solid #DFE3EB; border-radius: 13px;
  background: #fff; color: #5A6573; font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .18s, color .18s;
}
.ci-hubghost:hover { border-color: #B9C1CF; color: var(--ci-navy); }
.ci-hubmanage {
  margin-top: 10px; width: 100%; height: 42px; border: 1.5px dashed #D5DAE4; border-radius: 12px;
  background: #FBFCFE; color: #5A6573; font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .18s, color .18s;
}
.ci-hubmanage:hover { border-color: #9AA6BD; color: var(--ci-navy); }

/* ── Sheet de partage (style feuille iOS) ────────────────────────────────── */
.ci-share {
  position: fixed; inset: 0; z-index: 10050; display: flex;
  align-items: flex-end; justify-content: center;
  background: rgba(15, 23, 42, .44);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  animation: ci-share-fade .22s ease both;
}
@keyframes ci-share-fade { from { opacity: 0; } to { opacity: 1; } }
.ci-share__card {
  width: 100%; max-width: 430px; background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 16px);
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .25);
  animation: ci-share-up .34s cubic-bezier(.32, .72, .24, 1.06) both;
}
@keyframes ci-share-up { from { transform: translateY(46px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 560px) {
  .ci-share { align-items: center; padding: 20px; }
  .ci-share__card { border-radius: 24px; padding-bottom: 18px; }
}
.ci-share__grab { width: 38px; height: 4.5px; border-radius: 999px; background: #D8DDE6; margin: 4px auto 12px; }
.ci-share__head { display: flex; align-items: center; gap: 12px; padding: 2px 2px 12px; }
.ci-share__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6D28D9 0%, var(--ci-navy) 100%);
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .03em;
}
.ci-share__who { flex: 1; min-width: 0; }
.ci-share__name { font-size: 16.5px; font-weight: 700; color: var(--ci-ink, #1B263B); line-height: 1.2; }
.ci-share__sub { font-size: 12px; color: #7A8494; line-height: 1.45; margin-top: 3px; }
.ci-share__close {
  width: 32px; height: 32px; border-radius: 50%; border: 0; flex-shrink: 0;
  background: #F1F3F7; color: #5A6573; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.ci-share__close:hover { background: #E6E9F0; }
.ci-share__list { border-top: 1px solid #EEF0F5; }
.ci-share__row {
  width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 13px 4px; border: 0; background: none; text-align: left;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ci-ink, #1B263B);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  border-bottom: 1px solid #F2F4F8; transition: background .14s;
}
.ci-share__row:hover { background: #FAFBFD; }
.ci-share__row:active { background: #F3F5F9; }
.ci-share__row:disabled { opacity: .45; cursor: default; }
.ci-share__ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ci-share__ico--wa    { background: #E7F7EE; color: #128C4B; }
.ci-share__ico--sms   { background: #EEF4FF; color: #1D4ED8; }
.ci-share__ico--mail  { background: #F3EFFF; color: #6D28D9; }
.ci-share__ico--more  { background: #F1F3F7; color: var(--ci-navy); }
.ci-share__ico--copy  { background: #F1F5F9; color: #475569; }
.ci-share__chev { margin-left: auto; color: #C3CAD6; flex-shrink: 0; }
.ci-share__hint { font-size: 11.5px; color: #939CAB; line-height: 1.5; padding: 11px 4px 0; text-align: center; }
.ci-share__loading { display: flex; align-items: center; gap: 9px; padding: 13px 4px; font-size: 13px; color: #7A8494; }
.ci-share__spin {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #E3E7EE; border-top-color: var(--ci-navy);
  animation: ci-share-spin .8s linear infinite;
}
@keyframes ci-share-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ci-share, .ci-share__card { animation: none; }
}

/* ── Surclassement (upsell) étape 4 — Ph3 18/07 : teaser récap + modale premium ── */
/* Teaser surclassement — Option A (owner 18/07) : dégradé BLEU CLAIR sobre de la palette
   (le navy plein reste réservé au bouton « Payer » + carte active). Icône CADEAU (checkin.js).
   Sans or, sobre & premium. « Améliorer votre séjour » inchangé. */
.ci-upg-teaser { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 14px; padding: 16px 18px;
  background: linear-gradient(135deg, #EDF1FA 0%, #DDE6F4 100%); border: 1px solid rgba(63, 81, 122, .65);
  border-radius: 14px; color: #1B263B; text-align: left; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 14px rgba(43,58,90,.10); transition: transform .2s ease, box-shadow .2s ease; }
.ci-upg-teaser:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(43,58,90,.16); }
.ci-upg-teaser__ic { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: #DBE3F3; color: #3F517A; }
.ci-upg-teaser__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ci-upg-teaser__title { font-size: 15px; font-weight: 700; }
.ci-upg-teaser__sub { font-size: 12.5px; color: #5B6478; }
.ci-upg-teaser__sub s { opacity: .6; margin-left: 2px; }
/* CTA à droite (comme le montant des cartes récap) : prix « à partir de X € », ou « OFFERT » si gratuit. */
.ci-upg-teaser__price { flex: none; white-space: nowrap; margin-left: 10px; color: #1B263B; font-weight: 700; font-size: 13.5px; }
.ci-upg-teaser__free { flex: none; white-space: nowrap; margin-left: 10px; color: #1e9e5a; font-weight: 700; }
.ci-upg-teaser__discover { flex: none; white-space: nowrap; margin-left: 10px; color: #3F517A; font-weight: 600; }
.ci-upg-teaser__chev { flex: none; font-size: 24px; color: #7C8AA8; line-height: 1; }
.ci-upgm { position: fixed; inset: 0; z-index: 1200; background: rgba(15,20,32,.55); display: flex; align-items: flex-end;
  justify-content: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ci-upgm__sheet { width: 100%; max-width: 560px; max-height: 92vh; background: #fff; border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; overflow: hidden; animation: ciUpgSlide .28s ease; }
@keyframes ciUpgSlide { from { transform: translateY(28px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) { .ci-upgm { align-items: center; padding: 20px; } .ci-upgm__sheet { border-radius: 18px; } }
.ci-upgm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.ci-upgm__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; color: #1B263B; letter-spacing: .01em; }
.ci-upgm__sub { font-size: 12.5px; color: #6b7280; margin-top: 3px; }
.ci-upgm__excl { display: inline-flex; align-items: center; padding: 3px 10px; margin-bottom: 6px;
  border-radius: 999px; border: 1px solid rgba(198,167,105,.55); background: rgba(198,167,105,.10);
  color: #8a6f3c; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ci-upgm__pitch { font-size: 13.5px; color: #3d4658; line-height: 1.55; margin-top: 6px; }
.ci-upgm__trust { font-size: 11px; color: #9aa0aa; margin-top: 7px; letter-spacing: .01em; }
.ci-upgm__close { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: #F4F1EA;
  color: #1B263B; font-size: 20px; line-height: 1; cursor: pointer; }
.ci-upgm__body { padding: 6px 20px 20px; overflow-y: auto; }
.ci-upgm-card { border: 1px solid #e8e4db; border-radius: 14px; overflow: hidden; margin-bottom: 14px; background: #fff; }
.ci-upgm-card__photo { height: 150px; background-size: cover; background-position: center; }
.ci-upgm-card__body { padding: 13px 15px; }
.ci-upgm-card__name { font-size: 15px; font-weight: 700; color: #1B263B; }
.ci-upgm-card__meta { font-size: 12px; color: #8a8a8a; margin-top: 2px; }
.ci-upgm-card__pct { position: absolute; top: 10px; left: 10px; z-index: 2; background: #E8623D; color: #fff;
  font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 7px; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.ci-upgm-card__desc { font-size: 12.5px; color: #5b6472; line-height: 1.55; margin-top: 9px; }
/* Badges premium duplex (2 niveaux · 2 SdB · 2 WC · 2 terrasses) */
.ci-upgm-feats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ci-upgm-feat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #1B263B 0%, #24344F 100%); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.ci-upgm-feat svg { flex: none; color: #C6A769; }
/* Literie — même rendu que les cartes /reserver (groupée par pièce, icônes) */
.ci-upgm-beds { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; font-size: 12px;
  color: #6b7280; line-height: 1.55; }
.ci-upgm-beds__line { display: flex; align-items: center; gap: 5px; }
.ci-upgm-beds__line svg { flex-shrink: 0; stroke: #4a7f9e; }
.ci-upgm-beds__line em { font-style: normal; font-weight: 600; color: #1B263B; }
/* Chips premium /reserver — données exactes (pers., m², type, vue, clim) */
.ci-upgm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ci-upgm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: #faf7f3; border: 1px solid #eee7db; color: #1B263B; font-size: 11.5px; font-weight: 600; }
.ci-upgm-chip svg { flex: none; opacity: .75; }
.ci-upgm-chip--sea { background: #eef5fb; border-color: #d7e7f5; color: #1d4e79; }
.ci-upgm-chip--panoramic { background: #eef9f4; border-color: #d3eee1; color: #14684a; }
.ci-upgm-chip--pool { background: #eefafd; border-color: #d3eff7; color: #0f6379; }
.ci-upgm-chip--ac { background: #f0f6ff; border-color: #dbe8fb; color: #274f8f; }
.ci-upgm-card__photo { position: relative; }
.ci-upgm-car { position: relative; height: 170px; overflow: hidden; }
.ci-upgm-car::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(27,38,59,0) 60%, rgba(27,38,59,.26) 100%); }
.ci-upgm-car__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ci-upgm-car__track::-webkit-scrollbar { display: none; }
.ci-upgm-car__slide { flex: none; width: 100%; height: 100%; scroll-snap-align: start;
  background-size: cover; background-position: center; }
.ci-upgm-car__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #1B263B; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: background .2s; }
.ci-upgm-car__nav:hover { background: #fff; }
.ci-upgm-car__nav--prev { left: 10px; }
.ci-upgm-car__nav--next { right: 10px; }
.ci-upgm-car__count { position: absolute; right: 10px; bottom: 9px; z-index: 2; background: rgba(15,20,32,.55);
  color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: .03em; }
.ci-upgm-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.ci-upgm-card__old { font-size: 13px; color: #9aa0aa; }
.ci-upgm-card__price { font-size: 18px; font-weight: 800; color: #1B263B; }
.ci-upgm-card__free { font-size: 14px; font-weight: 800; color: #1e9e5a; }
.ci-upgm-card__btn { border: 1.5px solid #E8623D; background: #fff; color: #E8623D; font-weight: 700; font-size: 13.5px;
  padding: 9px 16px; border-radius: 9px; cursor: pointer; font-family: inherit; transition: background .2s, color .2s; }
.ci-upgm-card__btn:hover { background: #E8623D; color: #fff; }
.ci-upgm-pay__title { font-size: 16px; font-weight: 700; color: #1B263B; margin-bottom: 8px; }
.ci-upgm-pay__line { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px;
  background: #faf7f3; border-radius: 10px; font-size: 14px; color: #1B263B; }
.ci-upgm-pay__consent { font-size: 11px; color: #8a8a8a; line-height: 1.5; margin-top: 10px; }
.ci-upgm-pay__err { color: #ef4444; font-size: 13px; margin-top: 8px; }
.ci-upgm-pay__btn { display: block; width: 100%; margin-top: 13px; padding: 13px; border: none; border-radius: 10px;
  background: #E8623D; color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; }
.ci-upgm-pay__btn:disabled { opacity: .5; cursor: default; }
.ci-upgm__back { display: block; width: 100%; margin-top: 9px; padding: 10px; border: none; background: none;
  color: #6b7280; font-size: 13px; cursor: pointer; font-family: inherit; text-decoration: underline; }
.ci-upgm__msg { text-align: center; font-size: 14px; color: #1B263B; padding: 26px 10px 6px; }
.ci-upgm-ok { text-align: center; padding: 18px 6px 6px; }
.ci-upgm-ok__badge { width: 54px; height: 54px; border-radius: 50%; background: #1e9e5a; display: flex;
  align-items: center; justify-content: center; margin: 0 auto 12px; }
.ci-upgm-ok__title { font-size: 18px; font-weight: 700; color: #1B263B; }
.ci-upgm-ok__body { font-size: 13.5px; color: #4b5563; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .ci-upgm__sheet { animation: none; } }

/* ── Carte PARKING (étape 4) — refonte owner 18/07 : carte À PART sous le récap (montre que c'est
   une OPTION), même gabarit qu'une rangée récap / « Améliorer votre séjour ». N'INFLUE PAS sur la
   taille des cartes obligatoires (hors grid .ci-recap__list). Cochée = .is-active (contour navy) →
   le bouton du bas règle le parking (écran plein + wallets). ── */
.ci-park__amt { white-space: nowrap; }
.ci-park__unit { font-size: 11px; font-weight: 500; color: var(--ci-ink-3); margin-left: 2px; }
.ci-park__sub { margin-top: 2px; line-height: 1; white-space: nowrap; }
.ci-park__was { text-decoration: line-through; color: #9a8f7a; font-size: 12px; font-weight: 500; }
.ci-park__pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(232, 98, 61, .12); color: #E8623D; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; vertical-align: middle; }
/* Carte parking = bouton, MÊME gabarit qu'une rangée récap (padding/rayon/bordure identiques). */
.ci-park-card { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; text-align: left;
  width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; margin-top: 10px;
  display: flex; align-items: center; gap: 13px; padding: 15px 16px;
  border: 1px solid #E5E0D6; border-radius: 14px; background: #fff;
  transition: border-color .2s var(--ci-ease), box-shadow .2s var(--ci-ease); }
.ci-park-card:not(.is-active):hover { border-color: #C6A769; box-shadow: 0 2px 10px rgba(198, 167, 105, .12); }
.ci-park-card.is-active { border: 1.5px solid var(--ci-navy); box-shadow: 0 2px 10px rgba(27, 42, 74, .08); }
.ci-park-opt { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: #F4F1EA; color: #8A7F68; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; }
.ci-park-sel { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; }
/* Sélecteur de quantité (2-3 voitures) : − N + compact, navy quand la carte est active. */
.ci-park-step { display: inline-flex; align-items: center; gap: 2px; }
.ci-park-step__btn { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--ci-navy); border-radius: 8px; background: #fff; color: var(--ci-navy);
  font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.ci-park-step__btn:hover { background: var(--ci-navy); color: #fff; }
.ci-park-step__btn:disabled { opacity: .35; cursor: default; background: #fff; color: var(--ci-navy); }
.ci-park-step__n { min-width: 18px; text-align: center; font-size: 15px; font-weight: 700; color: var(--ci-ink); }
/* Écran de paiement parking : lien retour + note sécurité (même sobriété que la taxe). */
.ci-park-back { -webkit-appearance: none; appearance: none; background: none; border: 0; font: inherit;
  font-size: 13px; color: #8A7F68; cursor: pointer; padding: 0 0 10px; }
.ci-park-back:hover { color: var(--ci-ink); }
.ci-park__secure { font-size: 12px; color: #8A7F68; margin-top: 10px; text-align: center; }
/* Parking OFFERT (geste admin) : carte avec badge vert « Offert », prix initial barré, bouton d'acceptation vert. */
.ci-park-card--free { display: block; }
.ci-park-free__row { display: flex; align-items: center; gap: 13px; }
.ci-park-offered { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  background: rgba(30, 158, 90, .12); color: #1e9e5a; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.ci-park-offered svg { flex: 0 0 auto; }
.ci-park__was--free { font-size: 14px; color: #9a8f7a; }
.ci-park__accept { display: block; width: 100%; margin-top: 12px; padding: 12px; border: none; border-radius: 10px;
  background: #1e9e5a; color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .2s var(--ci-ease); }
.ci-park__accept:hover { background: #18854c; }
.ci-park__accept:disabled { opacity: .6; cursor: default; }

/* ═══════════════════ RTL — Arabe (droite→gauche) ═══════════════════
   Activé par <html dir="rtl"> (posé au runtime par CI_LANG.set pour 'ar').
   direction:rtl miroite déjà la plupart des rangées flex/inline ; on ne corrige ici
   QUE ce qui est explicitement ancré à gauche + la police (IBM Plex Sans Arabic, car
   DM Sans et Cormorant Garamond ne couvrent pas l'arabe). */
html[dir="rtl"] { direction: rtl; }
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] select { font-family: 'IBM Plex Sans Arabic', 'DM Sans', system-ui, sans-serif; }
/* Titres premium (Cormorant = latin only) → police arabe */
html[dir="rtl"] .ci-success__title,
html[dir="rtl"] .ci-error-screen h2,
html[dir="rtl"] .ci-kyc-intro__title,
html[dir="rtl"] .ci-upgm__title { font-family: 'IBM Plex Sans Arabic', 'Cormorant Garamond', serif; }
/* Textes explicitement à gauche → à droite */
html[dir="rtl"] .ci-park-card,
html[dir="rtl"] .ci-upg-teaser,
html[dir="rtl"] .ci-share-row { text-align: right; }
/* Colonne prix : ancrée au bord opposé + inversion du padding */
html[dir="rtl"] .ci-recap__right { text-align: left; padding-left: 0; padding-right: 6px; }
/* Puces CGV : retrait à droite */
html[dir="rtl"] .ci-cgv-clause__b { padding-left: 0; padding-right: 28px; }
/* Marges auto (poussée vers un bord) → bord opposé */
html[dir="rtl"] .ci-share__chev { margin-left: 0; margin-right: auto; }
/* Petits badges/pills inline collés au titre → marge de l'autre côté */
html[dir="rtl"] .ci-park-offered,
html[dir="rtl"] .ci-park-opt,
html[dir="rtl"] .ci-upg-teaser__discover,
html[dir="rtl"] .ci-upg-teaser__free { margin-left: 0; margin-right: 8px; }
/* Chevrons / flèches : miroir horizontal (› devient ‹) */
html[dir="rtl"] .ci-upg-teaser__chev,
html[dir="rtl"] .ci-share__chev { display: inline-block; transform: scaleX(-1); }

/* Indice « nom en lettres latines » sous les champs prénom/nom (fiche de police / passeport). */
.ci-latin-hint{ font-size:11.5px; color:#8a7f68; margin:-6px 0 12px; line-height:1.4; }
.ci-latin-hint::before{ content:"✎ "; opacity:.7; }

/* ═══════════════════ IDV2 — refonte saisie identité (flag ?idv2=1) ═══════════════════
   ciCombo (combobox pays cherchable + drapeaux, bottom-sheet mobile) · ciPhone (téléphone
   international E.164) · DOB segmentée JJ/MM/AAAA. Tokens --ci-* existants, cibles ≥48px,
   inputs 16px (anti-zoom iOS). Couche RTL dédiée en fin de section. */

.ci-combo { position: relative; }

.ci-combo__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--ci-border);
  border-radius: var(--ci-radius-sm);
  background: #FAFBFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  font-size: 16px;              /* ≥ 16px — évite le zoom iOS */
  line-height: 1.3;
  font-family: inherit;
  color: var(--ci-ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--ci-dur) var(--ci-ease), box-shadow var(--ci-dur) var(--ci-ease);
}
.ci-combo__btn:focus {
  outline: none;
  border-color: var(--ci-coral);
  background-color: var(--ci-white);
  box-shadow: 0 0 0 3px var(--ci-coral-l);
}
.ci-combo__btn.is-placeholder .ci-combo__txt { color: var(--ci-ink-3); }
.ci-combo__btn.ci-input--missing {
  border-color: var(--ci-coral, #E8623D) !important;
  box-shadow: 0 0 0 3px rgba(232, 98, 61, 0.12);
}
.ci-combo__flag { font-size: 18px; line-height: 1; flex-shrink: 0; }
.ci-combo__txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-combo__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;          /* au moins la largeur du bouton… */
  width: max-content;       /* …et s'élargit au contenu (colonne étroite du form-row) */
  max-width: 340px;         /* repli navigateurs sans min() */
  max-width: min(340px, 92vw);
  background: var(--ci-white);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow-md);
  overflow: hidden;
}
.ci-combo__search { padding: 10px; border-bottom: 1px solid var(--ci-border-s); }
/* Style explicite : la bottom-sheet mobile vit sur <body> (hors .ci-field) → l'input
   n'hérite pas du style de formulaire ; 16px = anti-zoom iOS. */
.ci-combo__search input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ci-border);
  border-radius: var(--ci-radius-sm);
  font-size: 16px;
  line-height: 1.3;
  color: var(--ci-ink);
  background: #FAFBFC;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.ci-combo__search input:focus {
  outline: none;
  border-color: var(--ci-coral);
  background: var(--ci-white);
  box-shadow: 0 0 0 3px var(--ci-coral-l);
}
.ci-combo__list {
  max-height: 290px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
  overscroll-behavior: contain;
}
.ci-combo__group {
  padding: 9px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ci-ink-3);
}
.ci-combo__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--ci-ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ci-combo__opt:hover,
.ci-combo__opt.is-active { background: var(--ci-bg-2); }
.ci-combo__opt[aria-selected="true"] { background: var(--ci-coral-l); font-weight: 600; }
.ci-combo__optname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-combo__dial { margin-left: auto; color: var(--ci-ink-3); font-size: 13px; flex-shrink: 0; }
.ci-combo__empty { padding: 16px 14px; font-size: 13.5px; color: var(--ci-ink-3); text-align: center; }
.ci-combo__backdrop { display: none; }

/* Mobile ≤640px : le panneau devient une bottom-sheet plein-largeur avec backdrop. */
@media (max-width: 640px) {
  .ci-combo__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 998;
  }
  /* Feuille ancrée depuis le HAUT (top:8vh → bottom:0) : la recherche reste tout en haut, AU-DESSUS
     du clavier virtuel — corrige « la fenêtre disparaît quand je tape » (clavier iOS/Android). */
  .ci-combo__panel {
    position: fixed;
    z-index: 999;
    top: 8vh;                                                    /* repli anciens moteurs */
    top: max(8svh, calc(env(safe-area-inset-top, 0px) + 10px));  /* petit viewport : jamais sous la barre haute */
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    border-radius: 16px 16px 0 0;
    border: none;
    display: flex;
    flex-direction: column;
    animation: ciSheetUp .22s var(--ci-ease);
  }
  .ci-combo__list { max-height: none; flex: 1; padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px); }
  /* Recherche épinglée en haut de la feuille (reste visible quand la liste défile / clavier ouvert). */
  .ci-combo__search { padding: 12px 14px; position: sticky; top: 0; background: var(--ci-white); z-index: 2; }
}
/* Verrou de défilement de l'arrière-plan tant qu'une feuille est ouverte (anti-scroll iOS des position:fixed). */
html.ci-combo-lock, html.ci-combo-lock body { overflow: hidden; }
@keyframes ciSheetUp {
  from { transform: translateY(28px); opacity: .55; }
  to   { transform: none; opacity: 1; }
}

/* ── ciPhone — indicatif (ciCombo mode dial) + numéro national, îlot LTR ── */
.ci-phone { display: flex; gap: 8px; direction: ltr; }
.ci-phone__cc { flex: 0 0 118px; }
.ci-phone__cc .ci-combo__btn { padding-left: 12px; gap: 7px; }
.ci-phone__num { flex: 1; min-width: 0; }
/* Le panneau de l'indicatif ne doit pas être limité aux 118px du bouton (desktop). */
@media (min-width: 641px) {
  .ci-phone__cc .ci-combo__panel { width: 320px; max-width: 82vw; right: auto; }
}

/* ── DOB segmentée JJ / MM / AAAA (îlot LTR) ──
   Segments FLEXIBLES (min-width:0) : dans la grille 2 colonnes du .ci-form-row, des bases
   fixes empêcheraient la colonne de rétrécir → débordement de la carte. */
.ci-dob { display: flex; gap: 8px; direction: ltr; }
.ci-dob input { width: auto; text-align: center; padding-left: 6px; padding-right: 6px; }
.ci-dob .ci-dob__d,
.ci-dob .ci-dob__m { flex: 1 1 0; min-width: 0; }
.ci-dob .ci-dob__y { flex: 1.7 1 0; min-width: 0; }
.ci-dob input.error { border-color: var(--ci-red); background: var(--ci-red-l); }
/* Les cellules de grille ont min-width:auto par défaut → les autoriser à rétrécir
   (scopé aux champs IDV2 uniquement, aucune incidence sur le markup legacy). */
.ci-field--dob, .ci-field--nat { min-width: 0; }

/* ── RTL (ar) — le combo suit le sens de lecture ; téléphone + date restent LTR ── */
html[dir="rtl"] .ci-combo__btn {
  text-align: right;
  padding: 11px 14px 11px 38px;
  background-position: left 14px center;
}
html[dir="rtl"] .ci-combo__opt { text-align: right; }
html[dir="rtl"] .ci-combo__dial { margin-left: 0; margin-right: auto; }
/* Panneau ancré au bord droit en RTL (desktop) — la bottom-sheet mobile reste pleine largeur */
@media (min-width: 641px) {
  html[dir="rtl"] .ci-combo__panel { left: auto; right: 0; }
}
/* .ci-phone et .ci-dob portent dir="ltr" inline (îlots) — leurs combobox internes
   restent LTR d'office, aucune règle supplémentaire nécessaire. */


/* ══ Refonte étape 4 Payment (07/2026) — « Finalisez votre arrivée » ═══════════
   Deux grammaires : la carte 1 est une SÉQUENCE (fil vertical, fait → reste → bouton),
   la carte 2 un ENSEMBLE facultatif (filets, actions discrètes). Le CTA du récap est un
   MIROIR inline du bouton footer (#ci-fz-cta) : le footer est masqué sur cet écran. */
.ci-footer--mirrored { display: none; }

.ci-fz { background: #FCFBF9; border: 1px solid #ECE7DD; padding: 22px 20px 20px; }
.ci-fz__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #64748B; margin-bottom: 7px; }
.ci-fz__lead { font-size: 17.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; color: var(--ci-ink); margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.ci-fz__divider { height: 1px; background: #ECE7DD; margin: 16px 0 4px; }

/* Le FIL — rail à gauche, contenus à droite. Fait = coche verte ; reste = anneau. */
.ci-fz__item { position: relative; display: flex; gap: 14px; padding: 14px 0 4px; }
.ci-fz__item + .ci-fz__item { padding-top: 18px; }
.ci-fz__node { position: relative; flex-shrink: 0; width: 26px; }
.ci-fz__dot {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--ci-ink-4);
  transition: border-color .25s var(--ci-ease), background-color .25s var(--ci-ease);
  position: relative; z-index: 1;
}
.ci-fz__item.is-done .ci-fz__dot { background: var(--ci-green); border-color: var(--ci-green); }
.ci-fz__item.is-due.is-active .ci-fz__dot { border-color: var(--ci-navy); }
.ci-fz__item.is-due .ci-fz__dot::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ci-navy);
  opacity: 0; transform: scale(.4);
  transition: opacity .25s var(--ci-ease), transform .25s var(--ci-ease);
}
.ci-fz__seq.s2 .ci-fz__item.is-due.is-active .ci-fz__dot::after { opacity: 1; transform: scale(1); }
.ci-fz__check { width: 13px; height: 13px; display: block; }
.ci-fz__check path {
  stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16;
  transition: stroke-dashoffset .4s var(--ci-ease) .1s;
}
.ci-fz__seq.s1 .ci-fz__item.is-done .ci-fz__check path { stroke-dashoffset: 0; }
.ci-fz__line {
  position: absolute; top: 26px; bottom: -22px; left: 50%; width: 2px; margin-left: -1px;
  background: #ECE7DD; border-radius: 2px; overflow: hidden;
}
.ci-fz__line::after {
  content: ''; position: absolute; inset: 0; background: var(--ci-green);
  transform: scaleY(0); transform-origin: top;
  transition: transform .32s var(--ci-ease);
}
.ci-fz__seq.s2 .ci-fz__item.is-done .ci-fz__line::after { transform: scaleY(1); }
.ci-fz__body { flex: 1; min-width: 0; padding-top: 2px; }
.ci-fz__body--row { display: flex; align-items: flex-start; gap: 10px; }
.ci-fz__main { flex: 1; min-width: 0; }
.ci-fz__titleline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-fz__label { font-size: 15px; font-weight: 600; color: var(--ci-ink); line-height: 1.3; }
.ci-fz__chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--ci-green-d);
  background: var(--ci-green-l); border: 1px solid var(--ci-green-bd);
  border-radius: 999px; padding: 2.5px 9px;
}
.ci-fz__chip svg { width: 10px; height: 10px; }
.ci-fz__note { font-size: 12.5px; color: var(--ci-ink-2); line-height: 1.5; margin-top: 4px; }
.ci-fz__subnote { font-size: 12px; color: #64748B; margin-top: 3px; }
.ci-fz__amount {
  font-size: 26px; font-weight: 700; color: var(--ci-ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; padding-top: 1px;
  opacity: 0; transform: translateY(2px);
  transition: opacity .22s var(--ci-ease), transform .22s var(--ci-ease);
}
.ci-fz__seq.s3 .ci-fz__amount { opacity: 1; transform: translateY(0); }
.ci-fz__amount.is-done { font-size: 14px; font-weight: 600; color: var(--ci-ink-3); }
/* CTA primaire inline : la séquence se termine sur l'action, rien ne s'intercale. */
.ci-fz__cta {
  width: 100%; min-height: 52px; padding: 15px 20px; margin-top: 18px;
  background: var(--ci-navy); color: #fff; border: none; border-radius: var(--ci-radius);
  font-size: 16px; font-weight: 600; letter-spacing: .02em; cursor: pointer; font-family: inherit;
  font-variant-numeric: tabular-nums; position: relative;
  transition: background-color var(--ci-dur) var(--ci-ease), transform .08s var(--ci-ease), box-shadow var(--ci-dur) var(--ci-ease);
  box-shadow: var(--ci-shadow-cta);
}
.ci-fz__cta:hover { background: var(--ci-navy-h); }
.ci-fz__cta:active { transform: translateY(1px); }
.ci-fz__cta:disabled { background: var(--ci-ink-4); color: rgba(255,255,255,.9); cursor: not-allowed; box-shadow: none; }
.ci-fz__cta.loading { color: transparent; pointer-events: none; }
.ci-fz__cta.loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px;
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: ci-spin .6s linear infinite;
}
.ci-fz__cta:focus-visible { outline: 2px solid var(--ci-coral); outline-offset: 2px; }

/* ── Carte 2 « Améliorer mon séjour » : ensemble facultatif, PAS de fil, filets discrets ── */
.ci-up { background: transparent; border: 1px solid var(--ci-ink-4); box-shadow: none; padding: 16px 18px 6px; }
.ci-up__title { font-size: 14.5px; font-weight: 600; color: var(--ci-ink-2); letter-spacing: -.01em; }
.ci-up__sub { font-size: 11.5px; color: #64748B; margin: 2px 0 6px; }
.ci-up__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ci-border-s); }
.ci-up__ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: #F4F1EA; color: var(--ci-ink-2);
  display: flex; align-items: center; justify-content: center;
}
.ci-up__ic svg { width: 16px; height: 16px; }
.ci-up__main { flex: 1; min-width: 0; }
.ci-up__label { font-size: 13.5px; font-weight: 600; color: var(--ci-ink-2); line-height: 1.3; }
.ci-up__right { text-align: right; flex-shrink: 0; }
.ci-up__chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--ci-green-d); }
.ci-up__chip svg { width: 10px; height: 10px; }
.ci-up__amt { font-size: 12px; font-weight: 600; color: var(--ci-ink-3); font-variant-numeric: tabular-nums; margin-top: 1px; }
.ci-up__row.is-paid .ci-up__label { color: #64748B; }

/* Parking dans la carte 2 : mêmes ids/comportement, gabarit rangée discrète. */
.ci-up .ci-park-card {
  border: none; border-top: 1px solid var(--ci-border-s); border-radius: 0;
  background: transparent; box-shadow: none; padding: 12px 0; margin: 0;
}
.ci-up .ci-park-card:hover { border-color: var(--ci-border-s); box-shadow: none; }
.ci-up .ci-park-card.is-active { box-shadow: inset 3px 0 0 var(--ci-navy); padding-left: 12px; }
.ci-up .ci-park-card .ci-recap__ic { width: 30px; height: 30px; border-radius: 9px; background: #F4F1EA; color: var(--ci-ink-2); }
.ci-up .ci-park-card .ci-recap__ic svg { width: 16px; height: 16px; }
.ci-up .ci-park-card .ci-recap__label { font-size: 13.5px; font-weight: 600; color: var(--ci-ink-2); }
.ci-up .ci-park-card .ci-recap__note { font-size: 11px; }
.ci-up .ci-park-card .ci-recap__amt { font-size: 12.5px; font-weight: 600; color: var(--ci-ink-2); }
.ci-up .ci-park-opt { display: none; } /* « Optionnel » : déjà dit par le sous-titre de la carte */

/* Teaser surclassement dans la carte 2 : rangée discrète (plus de carte saillante). */
.ci-up .ci-upg-teaser {
  margin-top: 0; padding: 12px 0; background: transparent; border: none;
  border-top: 1px solid var(--ci-border-s); border-radius: 0; box-shadow: none;
}
.ci-up .ci-upg-teaser:hover { transform: none; box-shadow: none; }
.ci-up .ci-upg-teaser__ic { width: 30px; height: 30px; border-radius: 9px; background: #F4F1EA; color: var(--ci-ink-2); border: none; }
.ci-up .ci-upg-teaser__ic svg { width: 16px; height: 16px; }
.ci-up .ci-upg-teaser__title { font-size: 13.5px; font-weight: 600; color: var(--ci-ink-2); }
.ci-up .ci-upg-teaser__sub { font-size: 11px; color: var(--ci-ink-3); }
.ci-up .ci-upg-teaser__discover { font-size: 12px; font-weight: 600; color: var(--ci-navy); }
.ci-up .ci-upg-teaser__chev { font-size: 18px; color: var(--ci-ink-3); }

/* Entrée services (StayUpsell) dans la carte 2 : plus d'or, plus de reflet animé. */
.ci-up .svc-entry {
  margin-top: 0; padding: 12px 0; background: none; border: none;
  border-top: 1px solid var(--ci-border-s); border-radius: 0; box-shadow: none;
}
.ci-up .svc-entry::after { display: none; animation: none; }
.ci-up .svc-entry:hover { transform: none; box-shadow: none; }
.ci-up .svc-entry__icon { width: 30px; height: 30px; border-radius: 9px; border: none; background: #F4F1EA; color: var(--ci-ink-2); }
.ci-up .svc-entry__icon svg { width: 16px; height: 16px; }
.ci-up .svc-entry__title { display: none; } /* le titre doublonnerait celui de la carte */
.ci-up .svc-entry__sub { font-size: 13px; font-weight: 600; color: var(--ci-ink-2); margin-top: 0; white-space: normal; }
.ci-up .svc-entry__arrow { color: var(--ci-ink-3); font-size: 18px; }

/* RTL (tunnel arabe) : le rail et les alignements suivent la direction. */
html[dir="rtl"] .ci-fz__amount { padding-top: 1px; }
html[dir="rtl"] .ci-up__right { text-align: left; }
html[dir="rtl"] .ci-up .ci-park-card.is-active { box-shadow: inset -3px 0 0 var(--ci-navy); padding-left: 0; padding-right: 12px; }

/* Réduction de mouvement : états finaux rendus directement, zéro mouvement. */
@media (prefers-reduced-motion: reduce) {
  .ci-fz__check path { transition: none; stroke-dashoffset: 0; }
  .ci-fz__line::after { transition: none; }
  .ci-fz__dot, .ci-fz__item.is-due .ci-fz__dot::after, .ci-fz__amount { transition: none; }
}

/* Parking sélectionné : le prix /nuit s'efface (total sur le bouton, quantité sur le stepper). */
.ci-up .ci-park-card.is-active .ci-recap__right { display: none; }

/* ── Parking PAYANT : zone de commande SUR la carte (26/07) ─────────────────
   Le bouton du bas ne change jamais de rail (3 PaymentIntents distincts) : l'add-on
   facultatif porte sa propre action, comme le parking OFFERT (.ci-park__accept).
   Contour navy = hiérarchie sous le CTA plein navy du chemin obligatoire. */
.ci-park-card { flex-wrap: wrap; } /* la zone .ci-park__more passe sous la rangée */
.ci-park__more { display: none; width: 100%; margin-top: 11px; }
.ci-park-card.is-active .ci-park__more { display: block; }
.ci-park__paybtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px; padding: 12px 16px;
  border: 1.5px solid var(--ci-navy); border-radius: 10px; background: #fff; color: var(--ci-navy);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, color .25s ease;
}
.ci-park__paybtn:hover { background: var(--ci-navy); color: #fff; }
.ci-park__paybtn:focus-visible { outline: 2px solid var(--ci-coral); outline-offset: 2px; }
.ci-park__payhint { font-size: 11.5px; color: var(--ci-ink-2); text-align: center; margin-top: 7px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ci-park__paybtn { transition: none; } }


/* ═══════════════════ Step 6 — écran « carte d'accès » (refonte 26/07) ═══════════════════
   Langage visuel repris de la carte de séjour (carte.css) : fond chaud, carte radius 22,
   perforation, carte d'accès navy, entrée en cascade. Accents or de la carte retraduits
   en corail/neutre (règle owner : pas d'or). Aucune dépendance à carte.css/carte.js. */
.ci-body--s6 { background: #faf7f3; }
.ci-main--s6 {
  background-image: radial-gradient(600px 420px at 88% -6%, rgba(232, 98, 61, .07), transparent 70%),
                    radial-gradient(520px 380px at -12% 102%, rgba(27, 42, 74, .06), transparent 70%);
}
.ci-s6 { max-width: 540px; margin: 0 auto; padding: 8px 0 36px; }
.ci-s6-srlive { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ci-s6card {
  background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid #ece8e1;
  box-shadow: 0 1px 2px rgba(27, 38, 59, .06), 0 12px 32px -8px rgba(27, 38, 59, .16),
              0 32px 64px -24px rgba(27, 38, 59, .2);
}
.ci-s6card > * { opacity: 0; animation: ciS6up .55s cubic-bezier(.22, .8, .3, 1) forwards; }
.ci-s6card > :nth-child(1) { animation-delay: .04s; } .ci-s6card > :nth-child(2) { animation-delay: .11s; }
.ci-s6card > :nth-child(3) { animation-delay: .18s; } .ci-s6card > :nth-child(4) { animation-delay: .25s; }
.ci-s6card > :nth-child(5) { animation-delay: .32s; } .ci-s6card > :nth-child(6) { animation-delay: .39s; }
.ci-s6card > :nth-child(7) { animation-delay: .46s; } .ci-s6card > :nth-child(8) { animation-delay: .53s; }
.ci-s6card > :nth-child(9) { animation-delay: .6s; }
@keyframes ciS6up { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }

/* — en-tête confirmation — */
.ci-s6head { text-align: center; padding: 30px 22px 8px; }
.ci-s6head__check {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--ci-green-l); border: 1.5px solid var(--ci-green-bd);
  display: flex; align-items: center; justify-content: center;
  animation: ci-success-pop .55s var(--ci-ease) both;
}
.ci-s6head__greet { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ci-green); margin-bottom: 7px; }
.ci-s6head__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 31px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: #1B263B; margin: 0; }
.ci-s6head__sub { font-size: 13.5px; color: var(--ci-ink-2); line-height: 1.6; max-width: 390px; margin: 10px auto 0; }
.ci-s6head__pill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  background: #faf7f3; border: 1px solid #ece8e1; border-radius: 999px;
  padding: 5px 12px; font-size: 10.5px; font-weight: 700; color: var(--ci-ink-2);
  letter-spacing: .07em; text-transform: uppercase;
}
.ci-s6head__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ci-ink-3); }
.ci-s6head__pill--held { background: var(--ci-amber-l); border-color: var(--ci-amber-bd); color: var(--ci-amber); }
.ci-s6head__pill--held::before { background: var(--ci-amber); }

/* — perforation (signature carte de séjour) — */
.ci-s6tear { position: relative; height: 32px; margin-top: 14px; }
.ci-s6tear::before { content: ""; position: absolute; left: 26px; right: 26px; top: 50%; border-top: 2px dashed #dcd6cc; }
.ci-s6tear i {
  position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%;
  background: #faf7f3; transform: translateY(-50%); box-shadow: inset 0 1px 3px rgba(27, 38, 59, .10);
}
.ci-s6tear i:first-child { left: -12px; } .ci-s6tear i:last-child { right: -12px; }

/* — carte d'accès navy (miroir de .access de la carte de séjour, sans or) — */
.ci-s6access, .ci-s6prep {
  margin: 0 16px; background: linear-gradient(150deg, #22304a, #1B263B 60%); border-radius: 16px;
  padding: 18px 16px 15px; color: #fff; position: relative; overflow: hidden;
}
.ci-s6access::before, .ci-s6prep::before {
  content: ""; position: absolute; top: -40%; right: -20%; width: 210px; height: 210px;
  background: radial-gradient(circle, rgba(232, 98, 61, .14), transparent 65%);
}
html[dir="rtl"] .ci-s6access::before, html[dir="rtl"] .ci-s6prep::before { right: auto; left: -20%; }
.ci-s6access > *, .ci-s6prep > * { position: relative; }
.ci-s6access__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ci-s6lbl { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ci-s6access__badge { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #86efac; display: flex; align-items: center; gap: 5px; }
.ci-s6access__badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #34d399; }
.ci-s6pin { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 14px 0 4px; direction: ltr; }
.ci-s6pin__code {
  font-family: 'Roboto Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: clamp(30px, 9.6vw, 40px); font-weight: 700;
  letter-spacing: .14em; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .25); white-space: nowrap;
}
/* Séparateur de groupement du code : un BLANC, jamais un glyphe. Le code réel fait 8 chiffres
   (4+4) : à .45em le blanc faisait la largeur d'un chiffre et pouvait se lire comme un
   caractère à taper. .18em + le letter-spacing .14em du bloc ≈ .32em d'écart visuel — le
   groupe se voit, rien ne ressemble à un caractère. Ne pas remonter cette valeur. */
/* Separateur du code heros : .07em, valeur VALIDEE PAR LE PROPRIETAIRE apres l avoir vue a
   l ecran (« le grand code est bien, ne le touche pas », 26/07/2026). Trajectoire .18 ->
   .11 -> .07em. Ne pas la « corriger » au motif que le groupement 4+4 serait peu marque :
   c est un choix assume. */
.ci-s6pin__code em { font-style: normal; display: inline-block; width: .07em; }
/* Code écrit dans la phrase de l'étape 3 : lisible et insécable, mais volontairement
   plus discret que le code héros de la carte (36 px) — il informe, il ne domine pas. */
.ci-s6pinlit i { display: inline-block; width: .10em; }  /* separateur resserre (demande owner) */
/* INDIGO (bleu violet) et non or — demande owner. Teinte du bouton « Offrir » du cockpit
   admin (#4F46E5), adoucie pour une page client. La carte est suivie de la carte NAVY du code :
   ferait deux affirmations fortes de suite. Seule l icone cadeau garde l or — un accent
   chaud ne fonctionne que si tout le reste se tait. Ne pas "reharmoniser" en or.
   ══════════ SURCLASSEMENT OFFERT ══════════════════════════════════════════════
   Nouvelle rare : 4 fois sur 240 reservations en 12 mois (1,7 %). C'est cette rarete
   qui autorise l'effet — a ce rythme il ne deviendra jamais du papier peint.

   Palette OR et champagne, jamais corail : dans cet ecran le corail signifie une ACTION,
   or un cadeau n'en est pas une. L'or dit « precieux » sans rien demander.

   Aucun clic pour decouvrir : le client a deja paye, deja signe, deja fini. Une boite a
   ouvrir ajouterait une etape a un ecran dont tout le travail est « voici votre code »,
   et surtout le client qui ne clique pas n'apprendrait JAMAIS qu'il a ete surclasse.
   La bonne nouvelle se donne, elle ne se merite pas. */
/* Visites suivantes : la nouvelle a ete lue, elle devient un simple rappel. Elle ne
   disparait PAS — c'est elle qui explique l'ecart avec la confirmation OTA, et un ecran
   qui se vide tout seul fait douter de ce qu'on y a vu. Elle recule, c'est tout. */
.ci-s6giftline { display: block;
  margin: 0 16px 12px; padding: 6px 10px; border-radius: 8px;
  background: #f7f7fe; border: 1px solid #e6e7fb; font-size: 10.5px; line-height: 1.5; }
/* Le libelle reste inline : il introduit la phrase au lieu de manger une ligne entiere. */
.ci-s6giftline__tag { font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  font-size: 9.5px; color: #4F46E5; }
.ci-s6giftline__tag::after { content: " \00b7 "; letter-spacing: 0; }
.ci-s6giftline__jump { color: #78788f; }
.ci-s6giftline__jump s { color: #a6a6bd; }
.ci-s6giftline__jump b { color: var(--ci-ink); font-weight: 700; }
.ci-s6gift { position: relative; overflow: hidden; margin: 0 16px 14px;
  padding: 15px 16px 14px; border-radius: 14px;
  background: linear-gradient(152deg, #fbfbff 0%, #f1f2fe 55%, #eaecfd 100%);
  border: 1px solid #dcdefb; box-shadow: 0 3px 18px rgba(79, 70, 229, .10); }
.ci-s6gift__ico { width: 34px; height: 34px; margin: 0 auto 6px; line-height: 0;
  filter: drop-shadow(0 3px 6px rgba(198, 167, 105, .45)); }
.ci-s6gift__ico svg { width: 100%; height: 100%; display: block; }
.ci-s6gift__eyebrow { text-align: center; font-size: 10px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: #4F46E5; margin-bottom: 5px; }
.ci-s6gift__title { text-align: center; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px; font-weight: 600; line-height: 1.22; color: var(--ci-ink); margin: 0 0 8px; }
/* Le saut doit etre LISIBLE : sans le point de depart, le cadeau reste abstrait. */
.ci-s6gift__jump { display: flex; align-items: center; justify-content: center;
  gap: 9px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.35; }
.ci-s6gift__from { color: #9a9ab8; text-decoration: line-through; text-decoration-thickness: 1px; }
.ci-s6gift__to { color: var(--ci-ink); font-weight: 700; }
.ci-s6gift__arrow { color: #9d9bf0; flex: none; }
.ci-s6gift__note { text-align: center; font-size: 10.5px; color: #8d8da8; margin-top: 8px; }
/* Balayage de lumiere — meme grammaire que l'icone cadeau de welcome-back.js. */
.ci-s6gift__sh { position: absolute; top: 0; left: -60%; width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.72), transparent);
  transform: skewX(-18deg); pointer-events: none; animation: ci-s6sh 3s ease-in-out 3; }
@keyframes ci-s6sh { 0%, 62% { left: -60%; } 100% { left: 135%; } }
.ci-s6gift--in { animation: ci-s6giftin .72s cubic-bezier(.16, .84, .34, 1) both; }
@keyframes ci-s6giftin { from { opacity: 0; transform: translateY(10px) scale(.975); }
  to { opacity: 1; transform: none; } }

/* Paillettes plein ecran. Uniquement transform + opacity = composite GPU, donc fluide
   sur un telephone milieu de gamme ; `pointer-events:none` pour ne jamais voler un clic,
   et le calque entier est RETIRE du DOM a la fin (rien qui traine). */
.ci-s6sparks { position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  overflow: hidden; contain: strict; }
.ci-s6spark { position: absolute; top: 0; left: 0; will-change: transform;
  animation: ci-s6fall var(--d) var(--del) both; }
/* La matiere vit dans l enfant : le parent ne fait QUE se deplacer, l enfant ne fait QUE
   scintiller. Separer les deux evite qu une animation ecrase l autre. */
/* Etoile a quatre branches : le glyphe du scintillement. C est la forme qui fait lire
   « lumiere » la ou un rectangle fait lire « papier ». */
.ci-s6spark--star { clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%,
  39% 61%, 0% 50%, 39% 39%); }
/* Lueur : une particule qui diffuse autour d elle est percue comme lumineuse. Sans cela,
   meme doree, elle reste un confetti. */
.ci-s6spark--glow { box-shadow: 0 0 7px 1px currentColor; }
/* Plan lointain : plus flou. Combine a une chute plus lente (cote JS), c est ce qui donne
   la profondeur — toutes les paillettes au meme plan donnent une image plate. */
.ci-s6spark--far { filter: blur(1.1px); }
.ci-s6spark > i { display: block; width: 100%; height: 100%; border-radius: inherit;
  will-change: opacity, transform; animation: ci-s6tw var(--tw) ease-in-out var(--twd) infinite; }
/* Scintillement : c est CE clignotement qui distingue une paillette d un confetti. Les
   phases sont decalees au hasard, sinon les 54 paillettes clignotent en choeur — effet
   guirlande de Noel, exactement ce qu on ne veut pas. */
@keyframes ci-s6tw {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .28; transform: scale(.62); } }
/* Jaillissement puis chute. Le point haut (--xm/--ym) est atteint a 24 % : au-dela la
   paillette retombe. Deux courbes distinctes — sortie vive, chute qui s abandonne — parce
   qu une seule courbe sur tout le trajet donne un mouvement de machine. */
@keyframes ci-s6fall {
  0%   { opacity: 0; animation-timing-function: cubic-bezier(.12, .78, .32, 1);
         transform: translate3d(var(--x0), var(--y0), 0) scale(.25) rotate(0deg); }
  9%   { opacity: 1; }
  24%  { animation-timing-function: cubic-bezier(.42, 0, .62, 1);
         transform: translate3d(var(--xm), var(--ym), 0) scale(var(--s)) rotate(var(--rm)); }
  88%  { opacity: 1; }
  100% { opacity: 0;
         transform: translate3d(var(--x1), var(--y1), 0) scale(var(--s)) rotate(var(--rot)); } }

/* Sensibilite au mouvement : la carte reste, l'eclat disparait. Une pluie de particules
   est desagreable, voire nauseeuse, pour une partie reelle des gens. */
@media (prefers-reduced-motion: reduce) {
  .ci-s6sparks { display: none; }
  .ci-s6gift__sh { animation: none; }
  .ci-s6gift--in { animation: none; } }
/* PASTILLE : le code est une valeur a SAISIR, pas un libelle a reconnaitre comme
   « Retrait de cle » ou « Entree ». On le distingue par la FORME plutot que par le poids,
   sinon deux taches differentes se ressemblent et le client hesite. Convention universelle
   du code a recopier (applications bancaires, codes a usage unique).
   JAMAIS de corail ici : dans cet ecran le corail signifie une ACTION. */
.ci-s6pinlit { font-family: 'Roboto Mono', 'SF Mono', Menlo, Consolas, monospace;
  color: var(--ci-ink); font-weight: 700; font-size: 1.02em; letter-spacing: .04em;
  white-space: nowrap; font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr;
  background: #f6f1ea; border: 1px solid #e7dfd4; border-radius: 5px; padding: 1px 6px; }
.ci-s6copy {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1); color: #fff; border-radius: 9px; padding: 8px 11px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; cursor: pointer;
  transition: background-color .25s ease, transform .15s ease;
}
.ci-s6copy:hover { background: rgba(255, 255, 255, .18); }
.ci-s6copy:active { transform: scale(.96); }
.ci-s6copy:focus-visible { outline: 2px solid var(--ci-coral); outline-offset: 2px; }
.ci-s6copy svg { width: 13px; height: 13px; }
.ci-s6copy.is-ok { background: rgba(52, 211, 153, .22); border-color: rgba(52, 211, 153, .5); }
.ci-s6access__apt { text-align: center; font-size: 13.5px; font-weight: 600; color: #fff; margin: 4px 0 2px; letter-spacing: .02em; }
.ci-s6access__apt span { color: rgba(255, 255, 255, .55); font-weight: 500; }
.ci-s6access__hint { font-size: 11px; color: rgba(255, 255, 255, .62); text-align: center; line-height: 1.5; margin-top: 7px; }
/* ══════════ BASCULE APPARTEMENT / TÉLÉCOMMANDE(S) ═══════════════════════════════
   Remplace (28/07/2026) les anciennes lignes .ci-s6access__pk, qui posaient le code
   de la télécommande JUSTE SOUS le PIN héros — deux codes à taper côte à côte, la
   configuration que le constat de terrain du propriétaire interdit. Un seul code est
   désormais visible à la fois. Ne pas revenir à un empilement. */
/* `minmax(96px, 1fr)` et NON `1fr` : une piste `1fr` ne descend pas sous sa largeur
   min-content, donc a 4 onglets (appartement + 3 telecommandes) le controle debordait
   de la carte — mesure faite, .ci-s6access etant en overflow:hidden le 4e onglet etait
   simplement coupe. Ici : 2 onglets remplissent la largeur, au-dela le controle defile
   horizontalement et chaque libelle reste lisible. */
/* Pilule PLEINE (999px) + cadre : exactement le gabarit de .access__seg de la carte de
   séjour, dont cet écran doit être le jumeau. Pictogrammes montés à 18 px (contre 15 sur
   la carte) — c'est le seul écart assumé : ici la bascule est vue une fois, debout devant
   la borne, elle a le droit d'être un cran plus lisible. */
.ci-s6access__seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr);
  gap: 4px; margin: 14px 0 2px; padding: 4px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ci-s6access__seg::-webkit-scrollbar { display: none; }
.ci-s6access__seg-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0;
  padding: 10px 8px; border: 0; border-radius: 999px; background: transparent;
  font: 600 13px/1 inherit; font-family: inherit; letter-spacing: .03em;
  color: rgba(255, 255, 255, .72); cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.ci-s6access__seg-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Les glyphes segKey/segPark sont nus : tout le rendu se décide ici. */
.ci-s6access__seg-btn svg {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ci-s6access__seg-btn.is-on { background: #fff; color: #1B263B; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
/* 3 onglets et plus : le libelle prend toute la place, sinon il s'ellipse. */
.ci-s6access__seg--many .ci-s6access__seg-btn svg { display: none; }
.ci-s6access__slides { overflow: hidden; }
.ci-s6access__track {
  display: flex; transform: translateX(calc(var(--s6i, 0) * -100%));
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
/* En RTL la rangée flex part de la droite : le déplacement change de signe. */
html[dir="rtl"] .ci-s6access__track { transform: translateX(calc(var(--s6i, 0) * 100%)); }
.ci-s6access__slide { flex: 0 0 100%; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .ci-s6access__track { transition: none; } }

/* PERK « arrivée anticipée offerte ».
   FORME : aligné à GAUCHE avec un médaillon. Centré et pleine largeur, il se lisait
   comme un bouton désactivé. Ne pas le re-centrer.
   COULEUR : INDIGO, demande owner (28/07) — se détache mieux du deep blue que le corail,
   qui sur cet écran signifie une ACTION alors qu'un cadeau n'en demande aucune (même
   raisonnement que la carte surclassement plus haut). L'indigo de référence du projet est
   le #4F46E5 du cockpit, mais il est trop sombre SUR du navy : on prend ses déclinaisons
   claires — surface indigo-500, filet et médaillon indigo-400, texte indigo-200 (#C7D2FE,
   ~11:1 sur la surface composée). Ne pas « re-harmoniser » avec le #4F46E5 brut ici. */
.ci-s6access__gift {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(99, 102, 241, .26), rgba(99, 102, 241, .10));
  border: 1px solid rgba(129, 140, 248, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.ci-s6access__gift-ico {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(129, 140, 248, .22); border: 1px solid rgba(165, 180, 252, .35);
  color: #C7D2FE;
}
.ci-s6access__gift-ico svg { width: 18px; height: 18px; }
.ci-s6access__gift-txt { min-width: 0; }
.ci-s6access__gift-t { display: block; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; letter-spacing: .005em; }
.ci-s6access__gift-s { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: #C7D2FE; line-height: 1.35; }
.ci-s6access__pickup {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 6px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: 12.5px; font-weight: 600; color: #7EE2A8; text-align: center;
}
.ci-s6access__pickup svg { width: 13px; height: 13px; flex: none; }
/* display:flex battrait le [hidden] par défaut : la ligne se réduirait à une horloge
   orpheline quand le compte à rebours n'a plus rien à dire (> 48 h) et que le perk
   porte déjà l'heure. */
.ci-s6access__pickup[hidden] { display: none; }
.ci-s6access__cd { color: rgba(255, 255, 255, .6); font-weight: 500; white-space: nowrap; }

/* — attente honnête (access_pending) — */
.ci-s6prep { padding: 20px 20px 18px; }
.ci-s6prep__rows { margin-top: 13px; }
.ci-s6prep__r { display: flex; align-items: flex-start; gap: 11px; padding: 8px 0; font-size: 13.5px; font-weight: 500; }
.ci-s6prep__r + .ci-s6prep__r { border-top: 1px solid rgba(255, 255, 255, .09); }
.ci-s6prep__ok {
  width: 20px; height: 20px; flex: none; border-radius: 50%; background: rgba(52, 211, 153, .16);
  border: 1px solid rgba(52, 211, 153, .45); display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.ci-s6prep__ok svg { width: 10px; height: 10px; }
.ci-s6prep__r--done { color: rgba(255, 255, 255, .82); }
.ci-s6prep__r--now { color: #fff; font-weight: 600; }
.ci-s6sonar { width: 20px; height: 20px; flex: none; position: relative; margin-top: 1px; }
.ci-s6sonar > svg { position: absolute; inset: 3px; width: 14px; height: 14px; }
.ci-s6sonar::before, .ci-s6sonar::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid rgba(232, 98, 61, .55); animation: ciS6sonar 2.1s ease-out infinite;
}
.ci-s6sonar::after { animation-delay: 1.05s; }
@keyframes ciS6sonar { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.ci-s6wave { display: inline-flex; gap: 4px; margin-inline-start: 6px; vertical-align: middle; }
.ci-s6wave i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .85); animation: ciS6wave 1.3s ease-in-out infinite; }
.ci-s6wave i:nth-child(2) { animation-delay: .18s; } .ci-s6wave i:nth-child(3) { animation-delay: .36s; }
@keyframes ciS6wave { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ci-s6prep__note { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .13); font-size: 11.5px; line-height: 1.55; color: rgba(255, 255, 255, .62); text-align: center; }
.ci-s6prep__long {
  margin-top: 12px; padding: 12px 13px; border-radius: 12px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .88);
}
.ci-s6prep__long b { display: block; font-size: 13px; margin-bottom: 3px; color: #fff; }
.ci-s6prep__call {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px;
  background: var(--ci-coral); color: #fff; border: 0; border-radius: 11px; padding: 13px 16px; width: 100%;
  font-size: 14px; font-weight: 700; text-decoration: none; transition: filter .25s ease, transform .15s ease;
}
.ci-s6prep__call:hover { filter: brightness(1.06); }
.ci-s6prep__call:active { transform: scale(.985); }
.ci-s6prep__call:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ci-s6prep__call svg { width: 16px; height: 16px; }

/* — PIN retenu (contrôle d'identité) : statique, sans animation — */
.ci-s6held { margin: 0 16px; background: #fff; border: 1px solid #ece8e1; border-radius: 16px; padding: 20px; box-shadow: var(--ci-shadow-xs); }
.ci-s6held__top { display: flex; gap: 13px; align-items: flex-start; }
.ci-s6held__ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--ci-amber-l);
  border: 1px solid var(--ci-amber-bd); display: flex; align-items: center; justify-content: center;
}
.ci-s6held__ico svg { width: 21px; height: 21px; }
.ci-s6held__title { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; color: var(--ci-ink); }
.ci-s6held__body { font-size: 13px; line-height: 1.6; color: var(--ci-ink-2); }
.ci-s6held__how { margin-top: 14px; padding-top: 13px; border-top: 1px solid #ece8e1; display: flex; flex-direction: column; gap: 9px; }
.ci-s6held__how div { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--ci-ink-2); }
.ci-s6held__how svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ci-s6held__call {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px;
  border: 1.5px solid var(--ci-coral); color: var(--ci-coral); background: #fff; border-radius: 11px;
  padding: 12px 16px; font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.ci-s6held__call:hover { background: var(--ci-coral); color: #fff; }
.ci-s6held__call:focus-visible { outline: 2px solid var(--ci-coral); outline-offset: 2px; }
.ci-s6held__call svg { width: 15px; height: 15px; }

/* — arriver plus tôt (offre : grammaire optionnelle, rangée tappable) — */
.ci-s6early {
  margin: 14px 16px 0; display: flex; align-items: center; gap: 12px; width: calc(100% - 32px);
  background: #faf7f3; border: 1px dashed #ddd3c4; border-radius: 14px; padding: 12px 14px;
  text-align: start; font-family: inherit; cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease;
}
.ci-s6early:hover { border-color: var(--ci-coral); background: #fdf5ef; }
.ci-s6early:focus-visible { outline: 2px solid var(--ci-coral); outline-offset: 2px; }
.ci-s6early__ico { width: 36px; height: 36px; flex: none; border-radius: 10px; background: #fff; border: 1px solid #ece8e1; display: flex; align-items: center; justify-content: center; }
.ci-s6early__ico svg { width: 18px; height: 18px; }
.ci-s6early__tx { flex: 1; min-width: 0; }
.ci-s6early__t { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ci-ink); }
.ci-s6early__s { display: block; font-size: 11.5px; color: var(--ci-ink-2); margin-top: 2px; line-height: 1.4; }
.ci-s6early__arr { flex: none; font-size: 19px; color: var(--ci-coral); font-weight: 600; line-height: 1; }
html[dir="rtl"] .ci-s6early__arr { transform: scaleX(-1); }

/* — procédure Keycafe / infos — */
.ci-s6sec { font-size: 14.5px; font-weight: 700; color: var(--ci-ink); margin-bottom: 8px; }
.ci-s6proc { padding: 20px 16px 4px; }
.ci-s6proc__where { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--ci-ink-2); }
.ci-s6proc__where svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ci-s6steps { list-style: none; margin: 13px 0 0; padding: 0; counter-reset: cis6; }
/* Les 5 etapes sont le coeur operationnel du modal : ce que le client lit debout devant la
   borne, souvent fatigue et a une main. Corps releve a 14.5px et encre densifiee (#334155
   au lieu de --ci-ink-2) pour que leur poids visuel corresponde a leur importance. Les
   libelles en gras restent en --ci-ink : la hierarchie a deux niveaux est conservee, elle
   est seulement remontee d un cran. */
.ci-s6steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: 14px; line-height: 1.55; color: #334155; }
.ci-s6steps li + li { border-top: 1px solid #ece8e1; }
.ci-s6steps li::before {
  counter-increment: cis6; content: counter(cis6); flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid #ece8e1; background: #fff; color: var(--ci-coral); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.ci-s6steps strong { color: var(--ci-ink); font-weight: 600; }
.ci-s6keysnote {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px 13px; background: #fff;
  border: 1px solid var(--ci-border); border-radius: 12px; box-shadow: var(--ci-shadow-xs);
  font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ci-ink);
}
.ci-s6keysnote svg { width: 18px; height: 18px; flex: none; }
.ci-s6gate {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px;
  padding: 11px 13px; background: #faf7f3; border: 1px solid #ece8e1; border-radius: 12px;
}
.ci-s6gate__l { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--ci-ink-2); line-height: 1.35; }
.ci-s6gate__l svg { width: 16px; height: 16px; flex: none; }
.ci-s6gate__code { font-family: 'Roboto Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; letter-spacing: .1em; direction: ltr; white-space: nowrap; color: var(--ci-ink); }
.ci-s6info { padding: 16px 16px 2px; }
.ci-s6info__r { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 13px; line-height: 1.5; color: var(--ci-ink-2); }
.ci-s6info__r + .ci-s6info__r { border-top: 1px solid #ece8e1; }
.ci-s6info__r svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ci-s6info__r b { color: var(--ci-ink); font-weight: 600; }
.ci-s6info__r a { font-weight: 700; color: var(--ci-ink); text-decoration: none; }

/* — conservation : carte de séjour — */
.ci-s6keep { margin: 16px 16px 0; background: linear-gradient(160deg, #fff, #faf6f0); border: 1px solid #ece8e1; border-radius: 16px; padding: 17px 18px; text-align: center; }
.ci-s6keep__rule { width: 40px; height: 1px; background: var(--ci-coral); opacity: .55; margin: 0 auto 11px; }
.ci-s6keep__t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600; color: var(--ci-ink); }
.ci-s6keep__b { font-size: 12.5px; color: var(--ci-ink-2); line-height: 1.6; max-width: 340px; margin: 6px auto 12px; }
.ci-s6keep__btn {
  display: inline-flex; align-items: center; gap: 9px; background: #1B263B; color: #fff; border: 0;
  border-radius: 12px; padding: 12px 20px; font-size: 13px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 20px -8px rgba(27, 38, 59, .4); transition: filter .25s ease, transform .2s ease;
}
.ci-s6keep__btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ci-s6keep__btn:active { transform: scale(.98); }
.ci-s6keep__btn:focus-visible { outline: 2px solid var(--ci-coral); outline-offset: 2px; }
.ci-s6keep__btn svg { width: 16px; height: 16px; }
.ci-s6keep__off { font-size: 10.5px; color: var(--ci-ink-3); margin-top: 9px; }
.ci-s6upsell { padding: 4px 16px 0; }
.ci-s6upsell:empty { display: none; }

/* — pied de carte — */
.ci-s6foot { margin-top: 16px; padding: 14px 16px 17px; border-top: 1px solid #ece8e1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ci-s6foot__addr { font-size: 11px; color: var(--ci-ink-2); line-height: 1.55; }
.ci-s6foot__addr b { color: var(--ci-ink); font-weight: 600; }
.ci-s6foot__tel { font-size: 12.5px; font-weight: 700; color: var(--ci-ink); text-decoration: none; white-space: nowrap; }

/* — toast copie — */
.ci-s6toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 95; pointer-events: none;
  background: #1B263B; color: #fff; font-size: 13px; font-weight: 600; padding: 11px 19px;
  border-radius: 99px; box-shadow: 0 8px 24px rgba(27, 38, 59, .35); animation: ciS6toast .3s ease; white-space: nowrap;
}
@keyframes ciS6toast { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── « Comment récupérer mes clés » : bouton pleine largeur + modal (refonte 26/07) ──────
   Le bloc procédure quitte l'écran : devant la porte, une seule question à la fois. Le
   STANDARD DE CONCEPTION qui justifie chaque choix ci-dessous est commenté dans checkin.js
   (s6HowBtnHtml / s6KeysModalHtml) — le lire avant de « corriger » quoi que ce soit ici.
   .ci-s6proc et .ci-s6keysnote deviennent inutilisés : laissés en place (fichier fragile),
   à purger dans un prochain lot avec la clé i18n proc_keys_note. */

/* Libellés cités : un guillemet n'est JAMAIS orphelin, un libellé de borne ne se coupe jamais. */
.ci-s6steps strong, .ci-s6proc__where strong { white-space: nowrap; }
.ci-s6proc__where strong { color: var(--ci-ink); font-weight: 600; }
.ci-s6gate__l bdi, .ci-s6proc__where bdi, .ci-s6mbox__chk bdi { white-space: nowrap; }

/* — bouton d'ouverture (même gabarit que « arriver plus tôt », plein cadre, tappable) — */
.ci-s6how {
  margin: 20px 16px 0; display: flex; align-items: center; gap: 12px; width: calc(100% - 32px);
  background: #fff; border: 1px solid var(--ci-coral); border-radius: 14px; padding: 13px 14px;
  box-shadow: var(--ci-shadow-xs); text-align: start; font-family: inherit; cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ci-s6how:hover { box-shadow: 0 2px 14px rgba(232, 98, 61, .20); }
.ci-s6how:focus-visible { outline: 2px solid var(--ci-coral); outline-offset: 2px; }
.ci-s6how__ico { width: 36px; height: 36px; flex: none; border-radius: 10px; background: #fdf3ee; border: 1px solid #f6ddd2; display: flex; align-items: center; justify-content: center; }
/* stroke/fill forcés : S6_SVG.segPark est un glyphe NU (c'est le CSS qui le colore).
   Sans ces deux déclarations il s'afficherait en aplat noir sur l'onglet Parking. */
.ci-s6how__ico svg { width: 18px; height: 18px; fill: none; stroke: var(--ci-coral); }
.ci-s6how__t { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ci-ink); line-height: 1.3; }
.ci-s6how__arr { flex: none; font-size: 20px; color: var(--ci-coral); font-weight: 600; line-height: 1; }
html[dir="rtl"] .ci-s6how__arr { transform: scaleX(-1); }

/* — modal « Récupérer vos clés » — */
.ci-s6mroot { position: fixed; inset: 0; z-index: 130; display: none; align-items: flex-end; justify-content: center; }
.ci-s6mroot.is-open { display: flex; }
.ci-s6m__ov { position: absolute; inset: 0; background: rgba(15, 23, 42, .52); opacity: 0; transition: opacity .25s ease; }
.ci-s6mroot.is-in .ci-s6m__ov { opacity: 1; }
.ci-s6m {
  position: relative; width: 100%; max-width: 540px; max-height: 88dvh; display: flex; flex-direction: column;
  background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 48px rgba(15, 23, 42, .28);
  transform: translateY(26px); opacity: 0; transition: transform .25s ease, opacity .25s ease; outline: none;
}
.ci-s6mroot.is-in .ci-s6m { transform: none; opacity: 1; }
.ci-s6m__grab { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 99px; background: #e5ddd1; }
.ci-s6m__hd { display: flex; align-items: center; gap: 10px; padding: 20px 18px 12px; border-bottom: 1px solid #f1ece4; }
.ci-s6m__title { flex: 1; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; font-weight: 600; color: var(--ci-ink); line-height: 1.15; margin: 0; }
html[dir="rtl"] .ci-s6m__title { font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif; font-weight: 700; font-size: 18px; }
.ci-s6m__x {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #ece8e1; background: #fff; color: var(--ci-ink-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background-color .25s ease, color .25s ease;
}
.ci-s6m__x:hover { background: #faf7f3; color: var(--ci-ink); }
.ci-s6m__x:focus-visible { outline: 2px solid var(--ci-coral); outline-offset: 2px; }
.ci-s6m__x svg { width: 15px; height: 15px; }
.ci-s6m__bd { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 18px 24px; }
.ci-s6m__bd > *:first-child { margin-top: 0; }
.ci-s6m__bd .ci-s6proc__where { margin-top: 10px; }
/* Le code du portillon garde SA taille (15px) : aucune surcharge de .ci-s6gate__code ici.
   Voir le bandeau ⛔ dans checkin.js — l'agrandir a déjà provoqué des appels clients. */
.ci-s6m__ph { margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid #ece8e1; background: #f4efe8; }
.ci-s6m__ph img { display: block; width: 100%; height: auto; }
/* — procédure parking (onglet télécommande du modal) — */
.ci-s6pk { margin-top: 16px; padding-top: 14px; border-top: 1px solid #ece8e1; }
/* La photo de l'émetteur est en portrait (760 × 1040) : pleine largeur, elle occuperait
   la moitié de l'écran. On la borne et on la centre, comme dans l'e-mail. */
.ci-s6pk__ph--remote { max-width: 190px; margin-left: auto; margin-right: auto; }
.ci-s6pk__note { margin-top: 11px; font-size: 13.5px; line-height: 1.55; color: #334155; }
.ci-s6pk__note strong, .ci-s6pk__warn strong { color: var(--ci-ink); font-weight: 600; }
/* Hauteur maximale : une contrainte physique qu'on ne découvre pas a la barriere. */
.ci-s6pk__warn {
  margin-top: 11px; padding: 11px 13px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid #d97706;
  font-size: 13px; line-height: 1.55; color: #78350f;
}
.ci-s6pk__t { margin-top: 18px; font-size: 13.5px; font-weight: 700; color: var(--ci-ink); }
.ci-s6pk__cap { margin-top: 10px; }

.ci-s6m__lang {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; padding: 10px 12px;
  background: #faf7f3; border: 1px solid #ece8e1; border-radius: 12px;
  font-size: 11.5px; line-height: 1.5; color: var(--ci-ink-2);
}
.ci-s6m__lang > span:first-child { flex-basis: 100%; }
.ci-s6chip {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--ci-border);
  border-radius: 8px; padding: 3px 9px 3px 4px; font-size: 11.5px; font-weight: 600; color: var(--ci-ink);
  direction: ltr; white-space: nowrap;
}
.ci-s6chip i {
  font-style: normal; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ece8e1; background: #faf7f3;
  color: var(--ci-coral); font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ci-s6mbox { margin-top: 14px; border: 1px solid #ece8e1; border-radius: 14px; background: #fff; box-shadow: var(--ci-shadow-xs); padding: 13px 14px; }
.ci-s6mbox__t { font-size: 12.5px; font-weight: 700; color: var(--ci-ink); margin-bottom: 9px; }
.ci-s6mbox__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ci-s6mbox__chip {
  display: inline-flex; align-items: center; gap: 7px; background: #faf7f3; border: 1px solid #ece8e1;
  border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 700; color: var(--ci-ink);
}
/* stroke forcé : S6_SVG.park porte un blanc en dur (il vit sur la carte navy) et
   serait invisible sur la puce blanche du casier parking. */
.ci-s6mbox__chip svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #E8623D; }
.ci-s6mbox__chip b { font-variant-numeric: tabular-nums; }
.ci-s6mbox__vigik { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ci-ink); line-height: 1.5; }
/* stroke forcé : S6_SVG.lift est en currentColor, il prendrait l'encre du texte et
   jurerait avec le picto vigik (corail en dur). Une seule teinte pour les deux. */
.ci-s6mbox__vigik svg { width: 15px; height: 15px; flex: none; margin-top: 2px; fill: none; stroke: var(--ci-coral); }
/* Note « même code aller/retour » : elle informe, elle ne doit pas concurrencer les
   5 étapes juste au-dessus — d'où le corps réduit et l'encre secondaire. */
.ci-s6mnote { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--ci-ink-2); }
.ci-s6mbox__chk { margin-top: 6px; font-size: 12px; color: var(--ci-ink-2); line-height: 1.55; }
.ci-s6mbox__chk a { color: var(--ci-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Fond non défilant. Le document ne scrolle jamais (app-shell : body{overflow:hidden}), le
   conteneur de défilement est .ci-main → c'est LUI qu'on verrouille. Un overflow:hidden reste
   un conteneur de défilement : la position de lecture est conservée sous le modal. */
.ci-main.ci-s6mlock { overflow-y: hidden; }

html[dir="rtl"] .ci-s6m__bd .ci-s6gate__code { direction: ltr; }

@media (min-width: 700px) {
  .ci-s6mroot { align-items: center; padding: 28px; }
  .ci-s6m { max-width: 470px; border-radius: 22px; max-height: 86vh; box-shadow: 0 24px 80px rgba(15, 23, 42, .35); }
  .ci-s6m__grab { display: none; }
  .ci-s6m__hd { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ci-s6m, .ci-s6m__ov { transition: none; }
  .ci-s6how, .ci-s6m__x { transition: none; }
}

/* — RTL / desktop / reduced-motion — */
html[dir="rtl"] .ci-s6head__title { font-family: 'IBM Plex Sans Arabic', 'Cormorant Garamond', serif; font-weight: 700; font-size: 26px; }
html[dir="rtl"] .ci-s6keep__t { font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif; font-weight: 700; font-size: 16.5px; }
html[dir="rtl"] .ci-s6pin, html[dir="rtl"] .ci-s6gate__code, html[dir="rtl"] .ci-s6foot__tel, html[dir="rtl"] .ci-s6access__pk-c { direction: ltr; }
@media (min-width: 700px) { .ci-s6head__title { font-size: 34px; } .ci-s6 { padding-top: 26px; } }
@media (max-width: 359px) { .ci-s6pin__code { font-size: 33px; } }
@media (prefers-reduced-motion: reduce) {
  .ci-s6card > * { animation: none; opacity: 1; }
  .ci-s6head__check { animation: none; }
  .ci-s6wave i { animation: none; opacity: .85; }
  .ci-s6sonar::before, .ci-s6sonar::after { animation: none; opacity: .25; }
  .ci-s6copy, .ci-s6early, .ci-s6keep__btn, .ci-s6prep__call, .ci-s6held__call { transition: none; }
}
/* Les 5 etapes sont le coeur operationnel du modal : c'est ce que le client lit debout
   devant la borne, souvent fatigue et a une main. Corps releve a 14,5 px et encre
   densifiee a #334155 (au lieu de --ci-ink-2) pour que leur poids visuel corresponde a
   leur importance. Les libelles en gras restent en --ci-ink : la hierarchie a deux
   niveaux est conservee, elle est seulement remontee d un cran. */