/* ==========================================================================
   Ignite — site vitrine v3 « landing classique, épurée »
   Structure canonique des landing pages d'apps (hero + mockup, 3 étapes,
   galerie, FAQ courte, install PWA) dans l'identité visuelle réelle de l'app :
   fond hsl(24 24% 27%) + dégradé zinc-900 → violet-900/20 → rose-900/20,
   primaire hsl(314 52% 48%), police système (comme l'app).
   ========================================================================== */

:root {
  --primary: hsl(314 52% 48%);
  --primary-hover: hsl(314 52% 43%);
  --primary-soft: #f472b6;           /* pink-400 */
  --violet-soft: #a78bfa;            /* violet-400 */
  --muted: #a1a1aa;                  /* zinc-400 */
  --dim: #71717a;                    /* zinc-500 */
  --card: rgba(39, 39, 42, 0.4);     /* zinc-800/40 */
  --card-strong: rgba(39, 39, 42, 0.55);
  --border: #3f3f46;                 /* zinc-700 */
  --border-soft: rgba(63, 63, 70, 0.6);
  --radius: 0.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  background-color: hsl(24 24% 27%);
  background-image: linear-gradient(135deg, #18181b 0%, rgba(76, 29, 149, 0.2) 50%, rgba(136, 19, 55, 0.2) 100%);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Conteneurs */
.wrap { max-width: 1060px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.wrap-narrow { max-width: 720px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
section { padding-block: clamp(48px, 8vw, 96px); }

/* ----- Nav ----- */
.nav { border-bottom: 1px solid rgba(63, 63, 70, 0.4); }
.nav-inner {
  display: flex; align-items: center; gap: 14px;
  padding-block: 14px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 68px; width: auto; }
.nav-spacer { flex: 1; }
.nav .btn { width: auto; height: 2.4rem; padding: 0 1.1rem; font-size: 0.9rem; }

/* Sélecteur de langue */
.lang-row { display: flex; gap: 4px; }
.lang-btn {
  background: transparent; border: 1px solid transparent; color: var(--dim);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 8px; border-radius: 7px; transition: color .15s, background .15s;
}
.lang-btn:hover { color: var(--muted); }
.lang-btn.active { color: #fff; background: var(--card-strong); border-color: var(--border); }

/* ----- Boutons (style shadcn de l'app) ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 3rem; padding: 0 1.5rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  font-size: 1rem; font-weight: 500; line-height: 1; color: hsl(40 23% 96%);
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: transparent; border-color: var(--border); }
.btn-outline:hover { background: rgba(255, 255, 255, 0.05); }
.btn-destructive { background: #dc2626; }
.btn-destructive:hover { background: #b91c1c; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Hero ----- */
.hero { padding-block: clamp(40px, 7vw, 90px); }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 72px); align-items: center;
}
.hero-title {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 300; letter-spacing: 0.01em; line-height: 1.1;
}
.hero-title .grad {
  background: linear-gradient(100deg, #f472b6 10%, #a855f7 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 400;
}
.hero-lead { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem); margin-top: 1.25rem; max-width: 54ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.cta-note { color: var(--dim); font-size: 0.88rem; margin-top: 0.9rem; }

/* Badges stores */
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 14px; color: var(--muted); font-size: 0.9rem;
}
.badge svg { flex: none; opacity: 0.9; }
.badge .b-name { color: #fff; font-weight: 600; }
.badge .b-soon {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--primary-soft); border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px;
}

/* Cadre téléphone (mockup) */
.phone-frame {
  width: min(320px, 78vw);
  margin-inline: auto;
  border-radius: 44px;
  padding: 12px;
  background: linear-gradient(160deg, #2b2430, #191420);
  border: 1px solid #4b4453;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
.phone-frame img { border-radius: 34px; width: 100%; }
.phone-sm { width: min(240px, 64vw); border-radius: 34px; padding: 9px; }
.phone-sm img { border-radius: 26px; }

/* ----- Sections : titres ----- */
.sec-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300; letter-spacing: 0.01em;
  text-align: center; margin-bottom: clamp(28px, 5vw, 52px);
}

/* ----- How it works : 3 étapes ----- */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.step { text-align: left; }
.step-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 14px;
  background: rgba(190, 24, 93, 0.16);
  border: 1px solid var(--border-soft);
  color: var(--primary-soft);
}
.step h3 { font-size: 1.06rem; font-weight: 600; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.94rem; }

/* ----- Galerie de captures ----- */
.gallery {
  display: flex; gap: clamp(20px, 3vw, 32px);
  justify-content: center; flex-wrap: wrap;
  align-items: flex-start;
}
.gallery-item {
  width: min(240px, 64vw);
  display: flex; flex-direction: column; align-items: center;
}
.gallery-cap {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
  max-width: 26ch;
  line-height: 1.4;
}

/* ----- FAQ ----- */
.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}
.faq summary {
  list-style: none; cursor: pointer;
  padding: 16px 20px;
  font-weight: 500; font-size: 0.98rem;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--dim); transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .a { padding: 0 20px 16px; color: var(--muted); font-size: 0.93rem; }

/* ----- Install (PWA) ----- */
.install-box {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 4px);
  backdrop-filter: blur(4px);
  padding: clamp(24px, 4vw, 40px);
}
.install-intro { color: var(--muted); font-size: 0.94rem; margin-bottom: 1.1rem; }

.tabs { display: flex; gap: 6px; background: var(--card-strong); border-radius: var(--radius); padding: 4px; margin-bottom: 1rem; }
.tab {
  flex: 1; border: 0; background: transparent; color: var(--muted);
  height: 2.4rem; border-radius: calc(var(--radius) - 4px);
  font-size: 0.85rem; font-weight: 600;
  transition: background .15s, color .15s;
}
.tab.active { background: var(--primary); color: #fff; }

.steps { display: none; counter-reset: n; padding: 0; }
.steps.active { display: grid; gap: 10px; }
.steps li { list-style: none; display: flex; gap: 12px; align-items: baseline; color: var(--muted); font-size: 0.93rem; }
.steps li::before {
  counter-increment: n; content: counter(n);
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700;
  transform: translateY(3px);
}
.steps strong { color: #fff; font-weight: 600; }

/* ----- CTA final ----- */
.cta-final { text-align: center; }
.cta-final .btn { width: auto; }

/* ----- Footer ----- */
.site-footer { border-top: 1px solid rgba(63, 63, 70, 0.4); padding: 1.5rem 0 2.5rem; text-align: center; }
.consent-line { color: var(--muted); font-size: 0.8rem; }
.consent-line .open-word { color: var(--primary-soft); text-decoration: underline; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 0.9rem; font-size: 0.85rem; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: #fff; }
.footer-copy { color: var(--dim); font-size: 0.78rem; margin-top: 0.8rem; }

/* ==========================================================================
   Pages internes (suppression de compte, légal) — colonne étroite façon app
   ========================================================================== */
.app { max-width: 28rem; margin-inline: auto; padding: 1.5rem 1rem 0; }

.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; margin-bottom: 1.25rem; }
.back-link:hover { color: #fff; }
.page-title { font-size: 1.6rem; font-weight: 300; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.page-sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.5rem; }

.prose h2 { font-size: 1.02rem; font-weight: 600; color: #fff; margin: 1.4rem 0 0.3rem; }
.prose p { color: var(--muted); font-size: 0.93rem; margin-top: 0.4rem; }
.prose .muted-date { color: var(--dim); font-size: 0.85rem; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.section-title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
.section-title svg { color: var(--primary-soft); }

.app .btn { width: 100%; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field input {
  width: 100%; height: 3rem; padding: 0 14px; font-size: 1rem; font-family: inherit;
  color: #fff; background: rgba(63, 63, 70, 0.5);
  border: 1px solid #52525b; border-radius: calc(var(--radius) - 2px);
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--muted); }
.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px hsl(314 52% 48% / 0.3); }

.form-msg { margin: 4px 0 10px; padding: 12px 14px; border-radius: calc(var(--radius) - 2px); font-size: 0.9rem; display: none; }
.form-msg.show { display: block; }
.form-msg.error { background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(220, 38, 38, 0.45); color: #fda4af; }

.danger-card { border-color: rgba(153, 27, 27, 0.5); background: rgba(69, 10, 10, 0.25); }
.done-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 6px auto 14px;
  display: grid; place-items: center;
  background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.4); color: #6ee7b7;
}

/* ----- Responsive ----- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-lead { margin-inline: auto; }
  .cta-row, .badges { justify-content: center; }
  .steps3 { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .step { text-align: center; }
  .step-icon { margin-inline: auto; }
}
@media (max-width: 520px) {
  .nav-inner { flex-wrap: wrap; padding-block: 10px; row-gap: 8px; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }