/* Vayanji — pages tutoriel autonomes : install.php (ajout à l'écran d'accueil)
   ET guide.php (le mode d'emploi du Conteur). Même structure « étapes numérotées +
   maquette SVG », donc une seule feuille.
   Autonome : ne dépend ni de app.css ni de landing.css. Mobile-first.
   Typo Lora vendorée en local (jamais de police distante : la politique de
   confidentialité affirme que les polices sont auto-hébergées). */

@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #faf8f3;
  --card: #fffdf9;
  --ink: #1a1a1a;
  --muted: #6b6862;
  --wood: #c6a47b;
  --spark: #c2853a;
  --spark-pale: #f5e9d8;
  --deep: #101a16;
  --green: #2e5741;
  --green-pale: #e8efe9;
  --line: rgba(26, 26, 26, .08);
  --serif: 'Lora', Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.iw { max-width: 620px; margin: 0 auto; padding: 0 22px; }

/* ================= En-tête : le POURQUOI avant le comment ================= */
/* ⚠️ Trois valeurs s'additionnent sous le titre : sa marge basse, le padding bas de
   l'en-tête et la marge haute de .i-why. Pour régler cet écart, les regarder ensemble. */
.i-head { text-align: center; padding: 26px 0 0; }
.i-brand {
  font-family: var(--sans);
  font-size: 13px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 26px;
}
.i-back {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--spark); text-decoration: none;
  font-size: 14px; margin-bottom: 18px;
}
.i-back:hover { text-decoration: underline; }
.i-head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 30px; line-height: 1.25;
  margin: 0;
}

/* Le halo d'étincelle : on bascule dans un moment, on ne remplit pas un formulaire. */
.i-why {
  position: relative;
  background: var(--deep);
  color: #ece9e2;
  border-radius: 20px;
  padding: 26px 24px;
  margin: 22px 0 30px;
  text-align: center;
  overflow: hidden;
}
.i-why::before {
  content: '';
  position: absolute; left: 50%; top: -40%;
  width: 320px; height: 320px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(194, 133, 58, .30), rgba(194, 133, 58, 0) 70%);
  pointer-events: none;
}
.i-why p { position: relative; margin: 0 0 12px; }
.i-why p:last-child { margin-bottom: 0; }
.i-why .i-why-lead { font-family: var(--serif); font-size: 19px; line-height: 1.5; }

/* La notification, montrée telle qu'elle arrivera. */
.i-notif {
  position: relative;
  background: var(--card);
  color: var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 18px auto 16px;
  max-width: 340px;
  text-align: left;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}
.i-notif-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--muted); margin-bottom: 5px;
}
.i-notif-dot {
  width: 15px; height: 15px; border-radius: 4px;
  background: var(--wood); flex: none;
}
.i-notif-app { letter-spacing: .06em; text-transform: uppercase; }
.i-notif-time { margin-left: auto; }
.i-notif-title { font-weight: 600; font-size: 14.5px; }
.i-notif-body { font-size: 13.5px; color: var(--muted); }

/* ================= Onglets iPhone / Android ================= */
.i-tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; }
.i-tab {
  flex: 1 1 0; max-width: 200px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card);
  font-family: var(--sans); font-size: 15px; color: var(--muted);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.i-tab svg { width: 19px; height: 19px; flex: none; }
.i-tab:hover { color: var(--ink); }
.i-tab.is-active {
  border-color: var(--spark);
  background: var(--spark-pale);
  color: var(--spark);
}
.i-panel { display: none; }
.i-panel.is-active { display: block; }

/* ================= Les étapes ================= */
.i-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 14px;
  display: flex; gap: 16px; align-items: flex-start;
}
.i-num {
  flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--spark-pale); color: var(--spark);
  font-family: var(--serif); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.i-body { flex: 1; min-width: 0; }
.i-body h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 19px; line-height: 1.3; margin: 2px 0 6px;
}
.i-body > p { font-size: 15px; color: var(--muted); margin: 0 0 12px; }
.i-body strong { color: var(--ink); font-weight: 600; }

.i-shot {
  background: var(--cream);
  border-radius: 12px;
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
}
.i-shot svg { width: 100%; max-width: 280px; height: auto; }

.i-tip {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--green-pale);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px;
}
.i-tip span { flex: none; line-height: 1.2; }
.i-tip p { margin: 0; font-size: 14px; }
.i-tip strong { color: var(--green); }

/* ================= L'arrivée ================= */
.i-done {
  background: linear-gradient(160deg, var(--spark-pale), var(--card));
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  margin-top: 20px;
}
.i-done h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 21px; margin: 0 0 8px;
}
.i-done p { margin: 0; font-size: 15px; color: var(--muted); }

/* Affiché seulement si la page est ouverte DEPUIS l'app déjà installée. */
.i-already { display: none; }
body.is-standalone .i-already { display: block; }
body.is-standalone .i-tabs,
body.is-standalone .i-panel { display: none; }

.i-foot { text-align: center; padding: 30px 0 46px; }
.i-cta {
  display: inline-block;
  padding: 14px 40px;
  border: 1px solid var(--spark); border-radius: 999px;
  background: transparent; color: var(--spark);
  font-size: 16px; letter-spacing: .04em; text-decoration: none;
}
.i-cta:hover { background: var(--spark-pale); }

@media (min-width: 620px) {
  .i-head h1 { font-size: 36px; }
  .i-why .i-why-lead { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .i-tab { transition: none; }
}