/* Guide d'installation (page d'accueil et application) */
.ig-wrap { position: fixed; inset: 0; z-index: 200; display: grid; place-items: end center; padding: 0; background: rgba(10, 22, 18, .45); opacity: 0; transition: opacity .2s; }
.ig-wrap.in { opacity: 1; }
.ig {
  position: relative; width: min(440px, 100%); max-height: 92dvh; overflow-y: auto; padding: 28px 22px calc(22px + env(safe-area-inset-bottom));
  background: #fff; color: #14211c; border-radius: 22px 22px 0 0; font: 15px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); text-align: center;
}
@media (min-width: 600px) { .ig-wrap { place-items: center; padding: 16px; } .ig { border-radius: 20px; } }
.ig-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f0f2f1; color: #3a4541; cursor: pointer; display: grid; place-items: center; }
.ig-x svg, .ig-banner .ig-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ig-logo { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 15px; box-shadow: 0 0 0 1px #e3e9e6; }
.ig h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.ig-intro { margin: 0 0 14px; color: #5a6b64; }
.ig-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.ig-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f4f7f5; }
.ig-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #22634d; color: #fff; font-size: 13px; font-weight: 700; }
.ig-ic { flex: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; background: #fff; color: #0a7aff; box-shadow: 0 0 0 1px #e3e9e6; }
.ig-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ig-ic circle { fill: currentColor; stroke: none; }
.ig-add { font-weight: 600; font-size: 14px; color: #0a7aff; }
.ig-t { display: grid; gap: 2px; }
.ig-t small { color: #6b7a74; font-size: 13px; }
.ig-mock { display: flex; justify-content: space-around; align-items: center; margin: 16px 0 4px; padding: 10px 6px; border-radius: 16px; background: #f2f2f7; color: #8e8e93; font-size: 20px; }
.ig-mock .ig-hl { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #0a7aff; background: #fff; box-shadow: 0 0 0 3px rgba(10, 122, 255, .35); }
.ig-mock svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ig-arrow { margin: 0; font-size: 13px; color: #0a7aff; }
.ig-outro { margin: 14px 0 16px; color: #5a6b64; font-size: 14px; }
.ig-ok { width: 100%; height: 48px; border: 0; border-radius: 999px; background: #22634d; color: #fff; font: 600 16px inherit; cursor: pointer; }

/* Bandeau d'installation */
.ig-banner {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--ig-bottom, 12px) + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 10px; border-radius: 18px; background: #fff; color: #14211c;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 12px 30px rgba(0, 0, 0, .16); font: 14px/1.3 -apple-system, system-ui, sans-serif;
  transform: translateY(140%); transition: transform .25s ease;
}
.ig-banner.in { transform: none; }
.ig-banner img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.ig-banner span { flex: 1; display: grid; min-width: 0; }
.ig-banner small { color: #6b7a74; }
.ig-banner .ig-go { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #22634d; color: #fff; font-weight: 600; cursor: pointer; }
.ig-banner .ig-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: #6b7a74; cursor: pointer; display: grid; place-items: center; }