/* ActiveFoot PWA parent install + iOS safe area — 2026-06-18 */
:root{
  --af-safe-top: env(safe-area-inset-top, 0px);
  --af-safe-right: env(safe-area-inset-right, 0px);
  --af-safe-bottom: env(safe-area-inset-bottom, 0px);
  --af-safe-left: env(safe-area-inset-left, 0px);
}

/* iOS standalone/PWA: avoid menu/header being hidden by notch/status bar. */
html.af-pwa-standalone body,
body.af-pwa-standalone{
  min-height: 100vh;
  min-height: 100dvh;
}

@supports (padding-top: env(safe-area-inset-top)){
  html.af-pwa-standalone body,
  body.af-pwa-standalone{
    padding-top: var(--af-safe-top);
  }

  html.af-pwa-standalone .site-header,
  body.af-pwa-standalone .site-header{
    padding-top: max(10px, var(--af-safe-top)) !important;
  }

  html.af-pwa-standalone .site-main,
  body.af-pwa-standalone .site-main{
    min-height: calc(100dvh - var(--af-safe-top));
  }

  html.af-pwa-standalone .af-theme-toggle,
  html.af-pwa-standalone .theme-toggle,
  body.af-pwa-standalone .af-theme-toggle,
  body.af-pwa-standalone .theme-toggle{
    bottom: max(12px, calc(var(--af-safe-bottom) + 10px)) !important;
  }
}

.af-pwa-parent-install{
  display:none;
  position:fixed;
  left:calc(14px + var(--af-safe-left));
  right:calc(14px + var(--af-safe-right));
  bottom:calc(14px + var(--af-safe-bottom));
  z-index:9998;
  justify-content:center;
  pointer-events:none;
}

.af-pwa-parent-install__btn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:min(420px, 100%);
  border:1px solid rgba(34,197,94,.45);
  border-radius:999px;
  padding:12px 16px;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#03110a;
  font-family:"Nunito Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:900;
  font-size:14px;
  line-height:1.15;
  box-shadow:0 18px 40px rgba(34,197,94,.28),0 8px 22px rgba(0,0,0,.28);
  text-decoration:none;
  cursor:pointer;
}

.af-pwa-parent-install__btn:active{ transform:translateY(1px); }
.af-pwa-parent-install__btn small{font-weight:800;opacity:.82;}

.af-pwa-parent-install__close{
  pointer-events:auto;
  position:absolute;
  right:max(18px, calc(var(--af-safe-right) + 18px));
  top:-12px;
  width:28px;
  height:28px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;
  background:rgba(15,23,42,.92);
  color:#e5eef7;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

/* Mobile only. The desktop experience should not say “sur mon téléphone”. */
@media (max-width: 820px){
  body.af-pwa-install-eligible .af-pwa-parent-install{display:flex;}
  body.af-pwa-install-eligible{padding-bottom:calc(76px + var(--af-safe-bottom));}
}

@media (min-width: 821px){
  .af-pwa-parent-install{display:none!important;}
}

body.af-pwa-standalone .af-pwa-parent-install,
html.af-pwa-standalone .af-pwa-parent-install,
body.af-pwa-install-hidden .af-pwa-parent-install{
  display:none!important;
}

.af-pwa-sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:10050;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  padding-bottom:max(18px, calc(var(--af-safe-bottom) + 18px));
  background:rgba(2,6,23,.64);
  backdrop-filter:blur(8px);
}

.af-pwa-sheet{
  width:min(520px,100%);
  border:1px solid rgba(148,163,184,.25);
  border-radius:24px;
  background:linear-gradient(180deg,#111827,#0b1220);
  color:#e5eef7;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  font-family:"Nunito Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
}

.af-pwa-sheet__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 10px;
}

.af-pwa-sheet__title{
  margin:0;
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:20px;
  font-weight:900;
  color:#fff;
}

.af-pwa-sheet__close{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.3);
  background:rgba(15,23,42,.7);
  color:#e5eef7;
  font-weight:900;
  cursor:pointer;
}

.af-pwa-sheet__body{padding:0 18px 18px;color:#cbd5e1;font-size:14px;line-height:1.5;}
.af-pwa-sheet__steps{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none;}
.af-pwa-sheet__steps li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(15,23,42,.88);
  border:1px solid rgba(148,163,184,.18);
}
.af-pwa-sheet__num{
  flex:0 0 24px;
  width:24px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#22c55e;
  color:#052e16;
  font-weight:1000;
}
.af-pwa-sheet__hint{
  margin-top:12px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.22);
  color:#d1fae5;
  font-size:13px;
}