/* ══════════════════════════════════════════════════════════════
   Transtopia — Landing mobile native (app Capacitor uniquement)
   Tout est scopé sous .app-mobile-landing pour ne jamais impacter
   le site web. Couleurs dark en dur (dérivées de DESIGN.md), donc
   indépendantes du thème clair/sombre du site web.
   Fonts (Space Grotesk + Space Mono) déjà chargées par index.html.
══════════════════════════════════════════════════════════════ */

/* Bascule web / app : masqué par défaut, visible seulement en natif */
.app-mobile-landing { display: none; }
html.is-native-app .app-mobile-landing { display: block; }
html.is-native-app #web-landing { display: none !important; }

.app-mobile-landing {
  --aml-bg:#131314;
  --aml-surface:#161618;
  --aml-surface-low:#1c1b1c;
  --aml-surface-lowest:#0e0e0f;
  --aml-surface-elevated:#1e1e21;
  --aml-surface-high:#2a2a2b;
  --aml-surface-highest:#353436;
  --aml-surface-variant:#353436;
  --aml-text:#f0f0f2;
  --aml-text2:#a3a3aa;
  --aml-primary:#6fde75;
  --aml-on-primary:#002105;
  --aml-border-low:rgba(255,255,255,0.08);
  --aml-border-high:rgba(92,201,58,0.26);
  --aml-grad-a:#2a9d3e;
  --aml-grad-b:#4ab530;
  --aml-warning:#f0c040;

  --aml-margin:16px;
  --aml-card-pad:20px;
  --aml-gutter:12px;

  position:relative;
  z-index:1;
  background:var(--aml-bg);
  color:var(--aml-text);
  font-family:'Space Grotesk',sans-serif;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}

/* reset léger interne */
.app-mobile-landing *{box-sizing:border-box;}
.app-mobile-landing button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* ══ TYPO utilitaires ══ */
.app-mobile-landing .aml-label{
  font-family:'Space Mono',monospace;font-size:11px;line-height:14px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.app-mobile-landing .aml-kpi{
  font-family:'Space Mono',monospace;font-size:24px;line-height:28px;
  font-weight:700;letter-spacing:-.02em;
}
.app-mobile-landing .aml-body{font-size:14px;line-height:20px;color:var(--aml-text2);}
.app-mobile-landing .aml-body-lg{font-size:16px;line-height:24px;font-weight:500;}

/* ══ HEADER ══ */
.app-mobile-landing .aml-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--aml-margin);
  background:rgba(19,19,20,.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--aml-border-low);
}
.app-mobile-landing .aml-logo{display:flex;align-items:center;gap:9px;}
.app-mobile-landing .aml-logo-txt{font-size:18px;font-weight:700;letter-spacing:-.01em;}
.app-mobile-landing .aml-btn-login{
  font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.04em;
  background:var(--aml-primary);color:var(--aml-on-primary);
  padding:9px 16px;border-radius:10px;transition:opacity .15s,transform .12s;
}
.app-mobile-landing .aml-btn-login:active{transform:scale(.96);opacity:.85;}

/* ══ MAIN ══ */
.app-mobile-landing .aml-main{padding-bottom:96px;}
.app-mobile-landing .aml-section{padding:32px var(--aml-margin);}

/* ══ HERO ══ */
.app-mobile-landing .aml-hero{
  padding-top:48px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.app-mobile-landing .aml-hero-logo{
  position:relative;margin-bottom:32px;
  width:120px;height:120px;
  display:flex;align-items:center;justify-content:center;
}
.app-mobile-landing .aml-hero-logo::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:150px;height:150px;
  background:rgba(92,201,58,.18);filter:blur(34px);border-radius:50%;
  pointer-events:none;
}
.app-mobile-landing .aml-hero-logo-img{
  position:relative;width:120px;height:120px;object-fit:contain;display:block;
}
.app-mobile-landing .aml-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(111,222,117,.1);color:var(--aml-primary);
  padding:5px 13px;border-radius:9999px;margin-bottom:24px;
}
.app-mobile-landing .aml-dot{position:relative;width:8px;height:8px;display:inline-flex;}
.app-mobile-landing .aml-dot span{position:absolute;inset:0;border-radius:50%;background:var(--aml-primary);}
.app-mobile-landing .aml-dot .ping{animation:aml-ping 1.4s cubic-bezier(0,0,.2,1) infinite;opacity:.75;}
@keyframes aml-ping{75%,100%{transform:scale(2.2);opacity:0;}}
.app-mobile-landing .aml-h1{
  font-size:27px;line-height:32px;font-weight:700;letter-spacing:-.03em;
  color:var(--aml-text);margin-bottom:16px;
}
.app-mobile-landing .aml-h1 .accent{color:var(--aml-primary);}
.app-mobile-landing .aml-hero-sub{max-width:300px;margin:0 auto 36px;}
.app-mobile-landing .aml-hero-actions{width:100%;display:flex;flex-direction:column;gap:12px;}

/* ══ BOUTONS ══ */
.app-mobile-landing .aml-btn-primary{
  width:100%;padding:16px;border-radius:14px;font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--aml-grad-a) 0%,var(--aml-grad-b) 100%);
  box-shadow:0 10px 24px rgba(92,201,58,.2);transition:transform .1s;
}
.app-mobile-landing .aml-btn-ghost{
  width:100%;padding:16px;border-radius:14px;font-size:16px;font-weight:700;
  color:var(--aml-primary);background:transparent;border:1px solid var(--aml-border-high);
  transition:transform .1s;
}
.app-mobile-landing .haptic:active{transform:scale(.97);}

/* ══ KPI BENTO ══ */
.app-mobile-landing .aml-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--aml-gutter);}
.app-mobile-landing .aml-kpi-card{
  background:var(--aml-surface);border:1px solid var(--aml-border-low);
  border-radius:16px;padding:var(--aml-card-pad);
  display:flex;flex-direction:column;justify-content:space-between;
}
.app-mobile-landing .aml-kpi-card .aml-label{color:var(--aml-text2);}
.app-mobile-landing .aml-kpi-trend{display:flex;align-items:center;gap:4px;font-size:10px;margin-top:4px;color:var(--aml-primary);}
.app-mobile-landing .aml-kpi-trend.muted{color:var(--aml-text2);}
.app-mobile-landing .aml-kpi-trend svg{width:13px;height:13px;}

/* ══ SECTION HEADINGS ══ */
.app-mobile-landing .aml-sec-tag{color:var(--aml-primary);}
.app-mobile-landing .aml-h2{
  font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.02em;
  color:var(--aml-text);margin-top:4px;
}

/* ══ FEATURES ══ */
.app-mobile-landing .aml-feat-list{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.app-mobile-landing .aml-feat{
  background:var(--aml-surface-low);border:1px solid var(--aml-border-low);
  border-radius:18px;padding:24px;display:flex;gap:16px;
}
.app-mobile-landing .aml-feat-ic{
  width:48px;height:48px;flex-shrink:0;border-radius:14px;
  background:rgba(111,222,117,.1);display:flex;align-items:center;justify-content:center;
}
.app-mobile-landing .aml-feat-ic svg{width:24px;height:24px;color:var(--aml-primary);}
.app-mobile-landing .aml-feat h4{font-size:16px;font-weight:700;color:var(--aml-text);margin-bottom:4px;}

/* ══ PRICING ══ */
.app-mobile-landing .aml-plans{display:flex;flex-direction:column;gap:24px;margin-top:24px;}
.app-mobile-landing .aml-plan{
  background:var(--aml-surface);border:1px solid var(--aml-border-low);
  border-radius:24px;padding:24px;position:relative;overflow:hidden;
}
.app-mobile-landing .aml-plan.featured{
  background:var(--aml-surface-highest);border:2px solid var(--aml-border-high);
}
.app-mobile-landing .aml-plan-badge{
  position:absolute;top:0;right:0;background:var(--aml-primary);color:var(--aml-on-primary);
  font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
  padding:5px 13px;border-bottom-left-radius:14px;
}
.app-mobile-landing .aml-plan-price{display:flex;align-items:baseline;gap:4px;margin-top:8px;}
.app-mobile-landing .aml-plan-price .amt{font-size:32px;font-weight:700;color:var(--aml-text);}
.app-mobile-landing .aml-plan-price .per{color:var(--aml-text2);font-size:14px;}
.app-mobile-landing .aml-plan ul{list-style:none;margin:24px 0;display:flex;flex-direction:column;gap:12px;}
.app-mobile-landing .aml-plan li{display:flex;align-items:flex-start;gap:12px;}
.app-mobile-landing .aml-plan li svg{width:18px;height:18px;flex-shrink:0;color:var(--aml-primary);margin-top:1px;}
.app-mobile-landing .aml-plan li span{font-size:14px;line-height:20px;color:var(--aml-text2);}
.app-mobile-landing .aml-plan.featured li span{color:var(--aml-text);}
.app-mobile-landing .aml-plan-note{font-size:10px;text-align:center;color:var(--aml-text2);margin-top:4px;}

/* ══ VERSION / JOURNAL ══ */
.app-mobile-landing .aml-version{border-top:1px solid var(--aml-border-low);}
.app-mobile-landing .aml-version-row{display:flex;gap:16px;}
.app-mobile-landing .aml-version-bar{width:4px;border-radius:9999px;background:var(--aml-primary);flex-shrink:0;}
.app-mobile-landing .aml-version-bar.muted{background:var(--aml-surface-variant);}
.app-mobile-landing .aml-version .aml-label{color:var(--aml-text2);}

/* ══ FOOTER ══ */
.app-mobile-landing .aml-footer{
  background:var(--aml-surface-lowest);border-top:1px solid var(--aml-border-low);
  padding:48px var(--aml-margin) 96px;
  display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;
}
.app-mobile-landing .aml-footer-logo{display:flex;align-items:center;gap:8px;opacity:.7;}
.app-mobile-landing .aml-footer-links{display:flex;gap:24px;}
.app-mobile-landing .aml-footer-links a{color:var(--aml-text2);text-decoration:none;transition:color .2s;}
.app-mobile-landing .aml-footer-links a:active{color:var(--aml-primary);}

/* ══ BOTTOM NAV ══ */
.app-mobile-landing .aml-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-around;align-items:center;height:64px;
  padding:0 16px calc(env(safe-area-inset-bottom,0px));
  background:rgba(32,31,32,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--aml-border-low);
  border-top-left-radius:14px;border-top-right-radius:14px;
}
html:not(.is-native-app) .app-mobile-landing .aml-bottomnav{display:none;}
.app-mobile-landing .aml-navitem{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--aml-text2);padding:4px 12px;border-radius:12px;
  background:none;transition:color .2s;
}
.app-mobile-landing .aml-navitem svg{width:22px;height:22px;}
.app-mobile-landing .aml-navitem .aml-label{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:0;text-transform:none;font-weight:600;}
.app-mobile-landing .aml-navitem.active{color:var(--aml-primary);background:rgba(111,222,117,.1);}

/* ══ REVEAL ══ */
.app-mobile-landing .aml-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s;}
.app-mobile-landing .aml-reveal.shown{opacity:1;transform:none;}

/* ── Pricing aligné sur la grille web (sous-titres, descriptions, lignes off) ── */
.app-mobile-landing .aml-plan-tagline{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.02em;
  color:var(--aml-text2);margin-top:6px;
}
.app-mobile-landing .aml-plan-desc{
  font-size:14px;line-height:20px;color:var(--aml-text2);
  margin-top:16px;padding-top:16px;border-top:1px solid var(--aml-border-low);
}
.app-mobile-landing .aml-plan li strong{color:inherit;font-weight:700;}
.app-mobile-landing .aml-plan li.off svg{color:var(--aml-text2);opacity:.5;}
.app-mobile-landing .aml-plan li.off span{color:var(--aml-text2);opacity:.5;}
.app-mobile-landing .aml-plan.featured li.off span,
.app-mobile-landing .aml-plan.featured li.off svg{opacity:.45;}
.app-mobile-landing .aml-plan-resil{
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.04em;
  text-align:center;color:var(--aml-text2);margin-top:10px;
}