/* JIXTER Landing Pages - Styles communs (mobile-first) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:15px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;color:#1a1a1a;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* Layout - mobile base */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
section{padding:48px 0}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:background .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 1px 8px rgba(0,0,0,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.header-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem}
.header-logo img{width:36px;height:36px;border-radius:8px}

/* Nav desktop - masquee sur mobile */
.header-nav{display:none;gap:20px;align-items:center;font-size:.9rem}
.header-nav a{opacity:.7;transition:opacity .2s}
.header-nav a:hover{opacity:1}

/* Hamburger button */
.hamburger-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0;z-index:201}
.hamburger-btn span{display:block;width:24px;height:2px;background:currentColor;position:relative;transition:background .2s}
.hamburger-btn span::before,.hamburger-btn span::after{content:'';display:block;width:24px;height:2px;background:currentColor;position:absolute;left:0;transition:transform .2s}
.hamburger-btn span::before{top:-7px}
.hamburger-btn span::after{top:7px}

/* Mobile overlay nav */
.mobile-nav-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:rgba(0,0,0,.95);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;pointer-events:none;transition:opacity .2s ease-out}
.mobile-nav-overlay.open{opacity:1;pointer-events:auto}
.mobile-nav-overlay a{color:#fff;font-size:1.1rem;opacity:.8;transition:opacity .2s}
.mobile-nav-overlay a:hover{opacity:1}
.mobile-nav-close{position:absolute;top:16px;right:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:#fff;font-size:1.5rem}

/* Hero - mobile base */
.hero{min-height:100vh;display:flex;align-items:flex-start;padding-top:100px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;text-align:center}
.hero-content{max-width:100%}
.hero-icon{width:72px;height:72px;border-radius:16px;margin:0 auto 20px;box-shadow:0 4px 20px rgba(0,0,0,.1)}
.hero-title{font-size:1.8rem;font-weight:800;line-height:1.15;margin-bottom:16px}
.hero-subtitle{font-size:1rem;opacity:.7;margin-bottom:32px;line-height:1.7}
.store-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;flex-direction:column;align-items:center}
.store-badge{height:42px;transition:transform .2s}
.store-badge:hover{transform:scale(1.04)}
.store-badge-disabled{opacity:.5;cursor:default;position:relative}
.store-badge-disabled:hover{transform:none}
.badge-label{font-size:.7rem;text-align:center;opacity:.5;margin-top:4px}
.hero-mockup{display:flex;justify-content:center}
.phone-mockup{max-width:240px;border-radius:32px;box-shadow:0 20px 60px rgba(0,0,0,.15);overflow:hidden}

/* Features - mobile base */
.features-section{background:#f9fafb}
.section-title{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:12px}
.section-subtitle{text-align:center;opacity:.6;margin-bottom:48px;font-size:1.05rem}
.features-grid{display:grid;grid-template-columns:1fr;gap:16px}
.feature-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.feature-icon{font-size:2rem;margin-bottom:16px}
.feature-title{font-size:1.15rem;font-weight:700;margin-bottom:8px}
.feature-desc{font-size:.95rem;opacity:.65;line-height:1.6}

/* Screenshots - mobile base */
.screenshots-section{padding:48px 0}
.screenshots-scroll{display:flex;gap:16px;overflow-x:auto;padding:20px 0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to right,transparent,black 24px,black calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 24px,black calc(100% - 24px),transparent)}
.screenshot-item{flex:0 0 auto;scroll-snap-align:center;text-align:center}
.screenshot-item img{width:180px;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.1)}
.screenshot-caption{font-size:.85rem;opacity:.5;margin-top:12px}

/* CTA */
.cta-section{text-align:center;padding:48px 0}
.cta-title{font-size:1.5rem;font-weight:700;margin-bottom:16px}
.cta-subtitle{opacity:.6;margin-bottom:32px;font-size:1.05rem}

/* Footer - mobile base (empile, centre) */
.site-footer{background:#1a1a1a;color:#fff;padding:40px 0}
.footer-inner{display:flex;flex-direction:column;align-items:center;text-align:center;flex-wrap:wrap;gap:32px}
.footer-brand{opacity:.7;font-size:.9rem}
.footer-links{display:flex;gap:24px;font-size:.85rem;flex-wrap:wrap;justify-content:center}
.footer-links a{opacity:.5;transition:opacity .2s}
.footer-links a:hover{opacity:1}
.footer-apps{font-size:.85rem}
.footer-apps-title{font-weight:600;margin-bottom:8px;opacity:.7}
.footer-apps a{display:block;opacity:.4;margin-bottom:4px;transition:opacity .2s}
.footer-apps a:hover{opacity:.8}
.footer-bottom{text-align:center;margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;opacity:.4}

/* ================================================
   RESPONSIVE - Mobile large (>= 480px)
   ================================================ */
@media(min-width:480px){
  .container{padding:0 20px}
  section{padding:56px 0}
  .screenshots-section{padding:56px 0}
  .cta-section{padding:56px 0}

  .store-badges{flex-direction:row;gap:10px}
  .store-badge{height:44px}

  .features-grid{gap:20px}
  .feature-card{padding:28px}

  .screenshot-item img{width:200px}
  .screenshots-scroll{gap:20px}
}

/* ================================================
   RESPONSIVE - Tablette (>= 768px)
   ================================================ */
@media(min-width:768px){
  html{font-size:16px}
  .container{padding:0 24px}
  section{padding:64px 0}
  .screenshots-section{padding:64px 0}
  .cta-section{padding:64px 0}

  /* Header : afficher nav, masquer hamburger */
  .header-nav{display:flex}
  .hamburger-btn{display:none}

  /* Hero : centrage vertical possible sur tablette */
  .hero{align-items:center;padding-top:80px}
  .hero-grid{text-align:left;gap:40px}
  .hero-content{max-width:640px}
  .hero-icon{margin:0 0 20px}
  .hero-title{font-size:2.2rem}
  .hero-subtitle{font-size:1.05rem}
  .store-badges{justify-content:flex-start}
  .store-badge{height:48px}

  /* Features : 2 colonnes */
  .features-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .feature-card{padding:28px}

  /* Screenshots */
  .screenshot-item img{width:200px}
  .screenshots-scroll{gap:24px;mask-image:none;-webkit-mask-image:none}

  /* Typo */
  .section-title{font-size:1.75rem}
  .cta-title{font-size:1.75rem}

  .phone-mockup{max-width:260px}
}

/* ================================================
   RESPONSIVE - Desktop (>= 1024px)
   ================================================ */
@media(min-width:1024px){
  section{padding:80px 0}
  .screenshots-section{padding:80px 0}
  .cta-section{padding:80px 0}

  /* Hero : 2 colonnes */
  .hero-grid{grid-template-columns:1fr 1fr;gap:60px}

  .hero-title{font-size:2.8rem}
  .hero-subtitle{font-size:1.15rem}

  /* Features */
  .features-grid{gap:32px}
  .feature-card{padding:32px}

  /* Screenshots */
  .screenshot-item img{width:220px}

  /* Typo */
  .section-title{font-size:2rem}
  .cta-title{font-size:2rem}

  .phone-mockup{max-width:300px}

  /* Footer : horizontal */
  .footer-inner{flex-direction:row;justify-content:space-between;align-items:flex-start;text-align:left}
  .footer-links{justify-content:flex-start}
}