/* Buchra Fidelity — Page de présentation / installation (thème vitrine Café Buchra) */
:root {
  --copper:      #c2761f;
  --copper-lt:   #e0a24e;
  --copper-dk:   #8a530f;
  --copper-pale: #f6e4c8;

  --espresso:   #2a1810;
  --espresso-3: #3a2317;

  --cream:   #fbf6ec;
  --cream-2: #f3e8d6;
  --surface: #ffffff;
  --border:  rgba(58,35,23,.12);
  --border-dk: rgba(58,35,23,.22);

  --text:       #2a1810;
  --text-muted: rgba(42,24,16,.68);

  --success: #059669;
  --radius:  16px;

  --shadow:    0 4px 16px rgba(42,24,16,.1), 0 2px 6px rgba(42,24,16,.06);
  --shadow-lg: 0 16px 44px -12px rgba(42,24,16,.28);
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--cream); color: var(--text); line-height: 1.5; }
h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; }

.wrap { max-width: 560px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; animation: fadeUp .5s var(--transition); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Hero ── */
.hero { text-align: center; padding-bottom: 2rem; }
.hero-icon { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 1.25rem; box-shadow: var(--shadow-lg); }
.hero h1 { font-size: 2.1rem; margin-bottom: .5rem; color: var(--espresso); }
.hero p { color: var(--text-muted); font-size: 1.05rem; }

/* ── Feature grid ── */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 2rem 0; }
.feature { background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--copper); border-radius: var(--radius); padding: 1.25rem 1rem; text-align: center; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition); }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.feature .f-icon { font-size: 1.8rem; display: block; margin-bottom: .5rem; }
.feature h3 { font-size: .95rem; margin-bottom: .25rem; font-family: 'Jost', sans-serif; font-weight: 700; color: var(--espresso); }
.feature p { color: var(--text-muted); font-size: .8rem; }

/* ── Install card ── */
.install-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem 1.5rem; margin-top: 1rem; box-shadow: var(--shadow); }
.install-card h2 { font-size: 1.25rem; margin-bottom: 1rem; text-align: center; color: var(--espresso); }

.btn-install {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem;
  background: var(--copper); color: #fff; border: none; border-radius: 999px;
  font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(194,118,31,.35);
  transition: opacity var(--transition), transform var(--transition);
}
.btn-install:hover { opacity: .92; transform: translateY(-2px); }

/* ── Vidéo tuto installation (iOS) ── */
.install-video {
  margin: 0 0 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--copper);
  box-shadow: var(--shadow-lg);
  background: var(--espresso);
}
.install-video video {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: var(--espresso);
}
.install-video figcaption {
  padding: .7rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  color: var(--copper-pale);
  background: var(--espresso);
}

.steps { list-style: none; counter-reset: step; margin-top: 1rem; }
.steps li { counter-increment: step; display: flex; gap: .8rem; padding: .6rem 0; font-size: .92rem; }
.steps li::before {
  content: counter(step); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--copper); color: #fff; font-weight: 700; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}
.steps b { color: var(--copper-dk); }

.status-banner { display: flex; align-items: center; gap: .6rem; background: rgba(5,150,105,.1); border: 1px solid var(--success); color: var(--success); border-radius: 12px; padding: .9rem 1rem; font-size: .9rem; font-weight: 600; }

.desktop-banner { background: var(--copper-pale); border: 1px solid #eccd94; border-radius: 12px; padding: 1rem; font-size: .9rem; text-align: center; color: var(--copper-dk); }

.continue-link { display: block; text-align: center; margin-top: 1.75rem; color: var(--text-muted); font-size: .85rem; text-decoration: none; transition: color var(--transition); }
.continue-link:hover { color: var(--copper-dk); }

[hidden] { display: none !important; }