/* ============================================================
   TerraTrack — Composants
   ============================================================ */

/* ── Barre de progression « Gardien » ──────────────────────── */
.guardian-bar{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:9998;
  background:transparent;pointer-events:none;
}
.guardian-bar > i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--tt-moss),var(--tt-leaf));
  box-shadow:0 0 12px var(--tt-leaf-glow);
  transform-origin:left;
}
.rank-toast{
  position:fixed;right:24px;bottom:24px;transform:translateY(140%);
  z-index:9999;background:var(--tt-surface-85);-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--tt-hairline);border-radius:var(--radius-pill);
  padding:.4rem 1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tt-leaf);pointer-events:none;
  box-shadow:var(--shadow-float);opacity:0;
}
@media (max-width:680px){.rank-toast{display:none}}

/* ── Navigation pilule ─────────────────────────────────────── */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  z-index:9000;width:min(1180px,calc(100% - 28px));
  transition:transform .35s var(--ease-out);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem .6rem .5rem 1.1rem;
  background:rgba(9,17,13,.72);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--tt-white-10);border-radius:var(--radius-pill);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:padding .3s var(--ease-out),background .3s;
}
.nav.scrolled .nav-inner{background:rgba(9,17,13,.9);padding-block:.42rem}
.nav-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-rounded);font-weight:900;font-size:1.02rem;letter-spacing:-.01em}
.nav-brand .brand-icon{width:30px;height:30px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08)}
.nav-brand .g{color:var(--tt-leaf)}
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a{
  font-size:.86rem;font-weight:500;color:var(--text-secondary);
  padding:.5rem .8rem;border-radius:var(--radius-pill);transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--text-primary);background:var(--tt-white-08)}
.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--tt-leaf);background:var(--tt-leaf-faint)}
.nav-actions{display:flex;align-items:center;gap:.5rem}
.nav-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--tt-leaf);color:var(--tt-forest-deep);font-weight:700;font-size:.86rem;
  padding:.6rem 1.05rem;border-radius:var(--radius-pill);box-shadow:var(--glow-leaf);
  transition:transform .18s var(--ease-spring),box-shadow .2s;
  white-space:nowrap;
}
.nav-cta:hover{transform:scale(1.03)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--tt-forest-deep);position:relative}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--tt-forest-deep);animation:ping 1.8s var(--ease-out) infinite}
.nav-cta-label{display:inline-flex!important;align-items:center}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}
.nav-brand,.nav-cta,.nav-burger{min-height:44px}
.nav a,.nav button{-webkit-tap-highlight-color:transparent}
.nav .nav-pressed{animation:nav-press .3s var(--ease-spring) both}
@keyframes nav-press{
  0%{transform:scale(1);filter:brightness(1)}
  42%{transform:scale(.9);filter:brightness(1.35)}
  72%{transform:scale(1.04);filter:brightness(1.12)}
  100%{transform:scale(1);filter:brightness(1)}
}
@media (prefers-reduced-motion:reduce){.nav .nav-pressed{animation:none}}
/* Burger un peu plus grand (48px) et nettement écarté du CTA : plus de clic involontaire. */
.nav-burger{display:none;width:48px;height:48px;flex:none;border-radius:50%;background:var(--tt-white-08);border:1px solid var(--tt-white-10);align-items:center;justify-content:center}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{content:"";display:block;width:20px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform .3s,opacity .2s}
.nav-burger span{position:relative}
.nav-burger span::before{position:absolute;top:-6.5px}
.nav-burger span::after{position:absolute;top:6.5px}
.nav-burger.open span{background:transparent}
.nav-burger.open span::before{top:0;transform:rotate(45deg)}
.nav-burger.open span::after{top:0;transform:rotate(-45deg)}

/* Menu plein écran mobile.
   Centrage SÛR : marges auto plutôt que justify-content:center — quand les liens dépassent
   (paysage, petits écrans), rien n'est coupé et le menu défile au lieu de rendre le 1er lien
   inatteignable. Réserve aussi la hauteur de la pilule de nav (la croix reste toujours cliquable). */
.mobile-menu{
  position:fixed;inset:0;z-index:8999;background:var(--bg-tropical);
  display:flex;flex-direction:column;justify-content:flex-start;gap:.4rem;
  padding:calc(var(--nav-h) + env(safe-area-inset-top) + 1.4rem) var(--page-x) calc(env(safe-area-inset-bottom) + 1.6rem);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease-out),visibility .32s;
}
.mobile-menu[hidden]{display:none}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a:first-of-type{margin-top:auto}
.mobile-menu a:last-of-type{margin-bottom:auto}
.mobile-menu a{
  display:flex;align-items:center;min-height:48px;
  font-family:var(--font-display);font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.9rem,min(9.5vw,7.6vh),3.4rem);
  color:var(--text-primary);letter-spacing:-.01em;line-height:1.1;
}
.mobile-menu a .idx{font-family:var(--font-mono);font-size:.8rem;color:var(--tt-leaf);align-self:flex-start;margin-top:.35em;margin-right:.6rem;letter-spacing:.1em}

/* Entre mobile et tablette, les cinq liens ne tiennent pas encore dans la pilule. */
@media (max-width:740px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-actions{gap:.85rem}
  .nav.down{transform:translateX(-50%) translateY(calc(-100% - 24px))}
  /* Menu ouvert : la nav ne se rétracte JAMAIS, sinon la croix de fermeture part hors écran.
     (Filet CSS ; shared.js empêche déjà d'ajouter .down menu ouvert.) */
  body.menu-open .nav.down{transform:translateX(-50%)}
}

/* ── Boutons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.5rem;border-radius:var(--radius-card);font-weight:700;
  transition:transform .18s var(--ease-spring),opacity .18s,box-shadow .2s;
}
.btn:active{transform:scale(var(--press-scale));opacity:var(--press-opacity)}
.btn-primary{background:var(--tt-leaf);color:var(--tt-forest-deep);box-shadow:var(--glow-leaf)}
.btn-primary:hover{box-shadow:var(--glow-leaf-lg)}
.btn-xl{font-size:clamp(1rem,1.5vw,1.2rem);padding:1.15rem 2rem;border-radius:var(--radius-card)}
.btn-ghost{background:var(--tt-white-08);color:var(--text-primary);border:1px solid rgba(255,255,255,.38)}
.btn-ghost:hover{background:var(--tt-white-14)}
.day .btn-ghost{background:rgba(10,20,15,.06);color:var(--ink-on-light);border-color:rgba(14,57,43,.65)}
.link-underline{position:relative;color:var(--text-primary);font-weight:600}
.link-underline::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:var(--tt-leaf);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.link-underline:hover::after{transform:scaleX(1)}

.cta-note{display:block;margin-top:.7rem;color:var(--text-tertiary);font-size:.86rem}
.status-pill{
  display:inline-flex;align-items:center;gap:.45rem;width:max-content;
  padding:.42rem .8rem;border-radius:var(--radius-pill);
  background:var(--tt-leaf-faint);border:1px solid var(--tt-hairline);
  color:var(--tt-leaf);font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 12px var(--tt-leaf-glow)}
.mail-action{word-break:break-word}

/* ── Cartes dark glass (restent sombres même sur clair) ─────── */
.glass{
  background:linear-gradient(160deg,rgba(18,29,23,.82),rgba(9,17,13,.68));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--tt-hairline);border-radius:var(--radius-card);
  box-shadow:0 18px 46px rgba(0,0,0,.26);color:var(--text-primary);
}
.day .glass{box-shadow:0 20px 50px rgba(10,20,15,.18)}

/* ── Chips / badges pilule ─────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .85rem;border-radius:var(--radius-pill);
  background:var(--tt-white-08);border:1px solid var(--tt-white-10);
  font-size:.82rem;font-weight:600;color:var(--text-secondary);
}
.chip svg{width:15px;height:15px;color:var(--tt-leaf)}
.day .chip{background:rgba(10,20,15,.05);border-color:rgba(10,20,15,.12);color:var(--ink-on-light-soft)}
.badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .7rem;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}
.badge-leaf{background:var(--tt-leaf-soft);color:var(--tt-leaf);border:1px solid var(--tt-hairline)}
.badge-rare{background:rgba(255,255,255,.1);color:var(--text-secondary)}
.badge-reg{background:rgba(219,56,41,.16);color:#ff8b7f;border:1px solid rgba(219,56,41,.3)}

/* ── Écran d'app SANS châssis : juste la capture, rayon doux + ombre.
     Le « téléphone virtuel » (contours/encoche/reflet) est supprimé. ── */
.device{position:relative;width:100%;max-width:300px;aspect-ratio:295/638}
.device .screen{
  position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:var(--tt-ink);
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.35);
}
.device .screen picture{display:block;width:100%;height:100%}
.device .screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.device .island,.device .glare{display:none}
.day .device .screen{box-shadow:0 30px 70px rgba(10,20,15,.28),0 6px 18px rgba(10,20,15,.18)}

/* Particules discrètes autour des écrans (posées par shared.js, figées en reduced-motion) */
.particles{position:absolute;inset:-12%;pointer-events:none;z-index:-1}
.particles i{position:absolute;border-radius:50%;background:var(--tt-leaf);opacity:.35;filter:blur(.5px)}
.particles i.em{background:var(--tt-moss);opacity:.3}
@media (prefers-reduced-motion:reduce){.particles{display:none}}

/* ── Réticule naturaliste — colle aux bords de l'écran, au survol ── */
.reticle{isolation:isolate}
.reticle > .r{position:absolute;width:22px;height:22px;border:2px solid var(--tt-leaf);opacity:0;transition:opacity .3s var(--ease-out),transform .4s var(--ease-out);z-index:6;filter:drop-shadow(0 0 5px var(--tt-leaf-glow));pointer-events:none}
.reticle > .tl{top:12px;left:12px;border-right:0;border-bottom:0;border-top-left-radius:7px;transform:translate(9px,9px)}
.reticle > .tr{top:12px;right:12px;border-left:0;border-bottom:0;border-top-right-radius:7px;transform:translate(-9px,9px)}
.reticle > .bl{bottom:12px;left:12px;border-right:0;border-top:0;border-bottom-left-radius:7px;transform:translate(9px,-9px)}
.reticle > .br{bottom:12px;right:12px;border-left:0;border-top:0;border-bottom-right-radius:7px;transform:translate(-9px,-9px)}
.reticle:hover > .r,.reticle:focus-within > .r{opacity:.95;transform:translate(0,0)}
.feature-media .reticle > .r{display:none}

/* ── Stat tile ─────────────────────────────────────────────── */
.stat{display:flex;flex-direction:column;gap:.2rem}
.stat .v{font-family:var(--font-rounded);font-weight:900;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--text-primary);line-height:1}
.stat .l{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary)}
.stat .v .u{color:var(--tt-bark);font-size:.5em;font-weight:800}

/* ── Barre XP ──────────────────────────────────────────────── */
.xp{height:12px;border-radius:var(--radius-pill);background:var(--tt-white-08);overflow:hidden;border:1px solid var(--tt-white-10)}
.xp > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--tt-moss),var(--tt-leaf));box-shadow:0 0 14px var(--tt-leaf-glow);border-radius:inherit}

/* ── Carte d'offre : forme organique, lisible, animée au survol ───────────── */
.offer{
  display:grid;grid-template-columns:1.05fr .95fr;
  position:relative;border-radius:46px 82px 48px 92px / 48px 66px 52px 74px;overflow:hidden;
  background:linear-gradient(145deg,rgba(18,29,23,.9),rgba(9,17,13,.82));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--tt-hairline);box-shadow:0 28px 70px rgba(0,0,0,.34);
  transition:box-shadow .32s var(--ease-out),border-color .32s var(--ease-out);
}
.offer::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:
  linear-gradient(115deg,rgba(255,255,255,.08),transparent 26%),
  radial-gradient(420px 240px at 74% 16%,rgba(173,255,77,.18),transparent 68%);
  opacity:.75;transform:scale(1);transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.offer:hover{border-color:rgba(173,255,77,.32);box-shadow:0 34px 92px rgba(0,0,0,.42),0 0 0 1px rgba(173,255,77,.08)}
.offer:hover::before{opacity:1;transform:scale(1.025)}
.offer .col{position:relative;z-index:1;padding:clamp(1.8rem,4vw,3.2rem);display:flex;flex-direction:column;gap:1rem}
.offer .col.pro{background:linear-gradient(165deg,rgba(173,255,77,.16),rgba(14,57,43,.48));border-left:1px solid rgba(173,255,77,.18);transition:background .32s var(--ease-out)}
.offer:hover .col.pro{background:linear-gradient(165deg,rgba(173,255,77,.21),rgba(14,57,43,.55))}
.offer .plan{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-tertiary)}
.offer .price{font-family:var(--font-display);font-weight:900;font-stretch:80%;text-transform:uppercase;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:.9;color:var(--text-primary)}
.offer .price .accent{color:var(--tt-leaf)}
.offer ul{display:flex;flex-direction:column;gap:.55rem;margin-top:.4rem}
.offer li{display:flex;gap:.6rem;align-items:flex-start;color:var(--text-secondary);font-size:.98rem}
.offer li svg{width:18px;height:18px;color:var(--tt-leaf);flex:none;margin-top:.2rem}
.offer .cta{margin-top:auto;padding-top:1rem}
.offer .note{font-size:.82rem;color:var(--text-tertiary)}
@media (max-width:860px){.offer{grid-template-columns:1fr;border-radius:34px 58px 34px 64px / 36px 52px 40px 54px}.offer .col.pro{border-left:0;border-top:1px solid var(--tt-hairline)}}

.launch-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,4vw,3rem);align-items:stretch}
.launch-grid > *{min-width:0}
.contact-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.breeding-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.launch-card{padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;justify-content:space-between;gap:1.3rem}
.launch-card .top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.launch-card .copy{display:flex;flex-direction:column;gap:.65rem}
.launch-card h3{font-family:var(--font-display);font-weight:900;font-stretch:80%;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);line-height:.95}
.launch-card p{color:var(--text-secondary);max-width:42ch}
.waitlist-panel{margin-top:clamp(2.5rem,5vw,4rem)}
.waitlist-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem;max-width:900px}
.wait-card{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.wait-card p{color:var(--text-secondary)}
.wait-card .btn{width:max-content}
.mini-copy{font-size:.86rem;color:var(--text-tertiary)}

/* ── Paliers de partenariat (page Sponsors) ────────────────── */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.tier{background:linear-gradient(160deg,rgba(18,29,23,.92),rgba(9,17,13,.86));border:1px solid var(--flow-edge);border-radius:var(--radius-card);padding:clamp(1.6rem,2.5vw,2.4rem);display:flex;flex-direction:column;gap:.7rem;color:var(--text-primary);position:relative;overflow:hidden;box-shadow:0 16px 42px rgba(10,20,15,.16);transition:box-shadow .28s var(--ease-out),border-color .28s var(--ease-out)}
.tier::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--tt-leaf),rgba(173,255,77,0));opacity:.78;transition:height .28s var(--ease-out),opacity .28s var(--ease-out)}
.tier:hover{border-color:rgba(173,255,77,.28);box-shadow:0 24px 62px rgba(10,20,15,.24)}
.tier:hover::before{height:7px;opacity:1}
.tier.featured{border-color:rgba(173,255,77,.38);box-shadow:0 0 0 1px var(--tt-leaf-soft),0 28px 70px rgba(10,20,15,.22);margin-top:-8px;margin-bottom:8px;padding-top:clamp(3.2rem,4.5vw,4rem)}
.tier-badge{position:absolute;top:1rem;right:1rem;background:var(--tt-leaf);color:var(--tt-forest-deep);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.38rem .8rem;border-radius:var(--radius-pill);font-weight:800;white-space:nowrap;box-shadow:var(--glow-leaf)}
.tier-k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tt-leaf)}
.tier h3{font-family:var(--font-display);font-weight:900;font-stretch:80%;text-transform:uppercase;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:.98;letter-spacing:-.01em}
.tier p{color:var(--text-secondary);font-size:.96rem}
.tier ul{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 1rem}
.tier li{display:flex;gap:.6rem;align-items:flex-start;color:var(--text-secondary);font-size:.92rem}
.tier li svg{width:17px;height:17px;color:var(--tt-leaf);flex:none;margin-top:.15rem}
.tier .btn{margin-top:auto;width:100%;justify-content:center}
.tier .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(173,255,77,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.tier .btn-ghost:hover{background:var(--tt-leaf);color:var(--tt-forest-deep);border-color:var(--tt-leaf);box-shadow:var(--glow-leaf)}
.creator.slot-open{border-style:dashed;opacity:.9}
.creator.slot-open .av{background:var(--tt-white-08);color:var(--tt-leaf)}
@media (max-width:860px){.tiers{grid-template-columns:1fr}.tier.featured{margin-top:0;margin-bottom:0}}

/* Navigation compacte pour les écrans réellement étroits (320–349 px). */
@media (max-width:349px){
  .nav{top:8px;width:calc(100% - 16px)}
  .nav-inner{gap:.35rem;padding:.35rem .4rem}
  .nav-brand{gap:0;min-width:44px;justify-content:center}
  .nav-brand > span{display:none}
  .nav-brand .brand-icon{width:32px;height:32px}
  /* Même à 320px la pilule garde ~100px de jeu : on conserve un burger 48px bien séparé du CTA. */
  .nav-actions{gap:.7rem}
  .nav-cta{padding:.52rem .72rem}
  .nav-cta-label{font-size:0}
  .nav-cta-label::after{content:"Obtenir";font-size:.78rem}
  .nav-burger{width:48px;height:48px}
}

/* ── Voile de transition entre pages (jamais de flash blanc) ── */
.page-fade{position:fixed;inset:0;z-index:10001;background:var(--tt-ink);opacity:0;pointer-events:none}

/* ── Filets / spec-sheet ───────────────────────────────────── */
.sheet{border-top:1px solid var(--tt-white-10)}
.sheet .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--tt-white-10)}
.day .sheet,.day .sheet .row{border-color:rgba(10,20,15,.12)}
.sheet .row .k{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)}
.day .sheet .row .k{color:var(--ink-on-light-mute)}
.sheet .row .val{font-weight:600}