/* Base */
:root { --bg: #f8fafc; --panel: #ffffff; --muted: #64748b; --text: #334155; --primary: #60a5fa; --primary-2: #93c5fd; --ring: rgba(147,197,253,.3); --card: #ffffff; --ok: #60a5fa; --warn: #f59e0b; --err: #ef4444; }
* { box-sizing: border-box }
html, body { height: 100% }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #e0e7ff 100%); line-height:1.6 }
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }
.container { width: min(1200px, 92%); margin-inline: auto }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.1rem; border-radius: .75rem; border:1px solid transparent; transition: .2s ease; font-weight:600 }
.btn-sm { padding:.55rem .8rem; border-radius: .6rem; font-weight:600 }
.btn-lg { padding:1.05rem 1.3rem; font-size:1.05rem }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 10px 30px -10px var(--ring); color:#ffffff }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -12px var(--ring); color:#ffffff !important }
.btn-success { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.3); color:#ffffff }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -12px rgba(16, 185, 129, 0.4); color:#ffffff !important }
.btn-outline { border-color: rgba(96,165,250,.3); color: var(--text); background: transparent }
.btn-outline:hover { border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.05) }

/* Header */
.site-header { position: sticky; top:0; z-index:50; backdrop-filter: saturate(1.2) blur(10px); background: rgba(255,255,255,.95); border-bottom:1px solid rgba(96,165,250,.15); box-shadow: 0 2px 8px rgba(96,165,250,.08) }
.site-header .container { display:flex; align-items:center; gap:1rem; padding: .9rem 0 }
.logo { font-weight:800; letter-spacing:.2px; color: var(--text) }
.logo span { color: var(--primary) }
.main-nav { margin-left:auto; display:flex; gap:1rem; align-items:center }
.main-nav a { padding:.5rem .7rem; border-radius:.6rem; color: var(--muted) }
.main-nav a:hover { color: var(--primary); background: rgba(96,165,250,.08) }
.main-nav a.btn:hover { color: #ffffff !important; background: none }
.nav-toggle { display:none; margin-left:auto; background:transparent; border:0; color:var(--text); font-size:1.5rem }
/* Improve header CTA contrast */
.site-header .btn-primary { color: #ffffff !important; text-shadow: none }
.site-header .btn-primary:hover,
.site-header .btn-primary:focus,
.site-header .btn-primary:focus-visible { color: #ffffff !important; text-shadow: none; background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important }

/* Hero */
.hero { position:relative; overflow:hidden; padding: 5rem 0 3rem }
.hero .container { display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:center }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height:1.1; margin:0 0 1rem; color: var(--text) }
.lead { color: var(--muted); margin:0 0 1.3rem; font-size:1.05rem }
.cta-group { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem }
.trust-list { display:flex; gap:1.1rem; color: var(--muted); font-size:.95rem; flex-wrap:wrap }
.gradient { background: linear-gradient(90deg, var(--primary), var(--primary-2)); -webkit-background-clip: text; background-clip: text; color: transparent }
.hero-media .mockup-grid { display:grid; grid-template-columns: 1fr 1fr; gap: .8rem; transform: rotate(-2deg) }
.hero-media img { border-radius: .8rem; border:1px solid rgba(96,165,250,.15); background: #f8f9fc; box-shadow: 0 4px 12px rgba(96,165,250,.1) }
.hero-bg { position:absolute; inset:-10% -10% auto -10%; height: 380px; background: radial-gradient(500px 200px at 20% 10%, rgba(96,165,250,.08), transparent 60%), radial-gradient(400px 180px at 80% 0%, rgba(147,197,253,.06), transparent 60%); pointer-events:none }

/* Sections */
section { padding: 3.5rem 0; border-top:1px solid rgba(96,165,250,.08) }
h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin:0 0 1.8rem; color: var(--text) }

/* Benefit Cards (Section Pourquoi) */
.benefit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.2);
}

/* Profession Cards (Section Pour qui) */
.profession-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15);
}

.profession-card {
  cursor: default;
}

/* Animations révélation */
.reveal {
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive pour les nouvelles sections */
@media (max-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .professions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr !important;
  }
  .professions-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Features */
.feature-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem }
.card { background: var(--card); border:1px solid rgba(96,165,250,.12); border-radius:.9rem; padding:1.1rem; transition:.2s ease; box-shadow: 0 2px 8px rgba(96,165,250,.05) }
.card:hover { transform: translateY(-2px); border-color: rgba(96,165,250,.3); box-shadow: 0 8px 20px rgba(96,165,250,.12) }
.card h3 { margin:.1rem 0 .4rem; font-size:1.05rem; color: var(--text) }
.card p { margin:0; color: var(--muted) }

/* Gallery */
.gallery { display:grid; grid-template-columns: repeat(4, 1fr); gap: .8rem }
.gallery figure { margin:0; background: var(--card); border:1px solid rgba(96,165,250,.12); border-radius:.8rem; overflow:hidden; box-shadow: 0 2px 8px rgba(96,165,250,.05) }
.gallery figcaption { padding:.6rem .8rem; color: var(--muted); font-size:.9rem; border-top:1px solid rgba(96,165,250,.08) }
.gallery img { width:100%; height:220px; object-fit:cover }

/* Carousel */
.carousel { position: relative; overflow: hidden; border-radius:.8rem; border:1px solid rgba(96,165,250,.12); background: var(--card); box-shadow: 0 4px 12px rgba(96,165,250,.08) }
.carousel { width:min(900px, 90%); margin:0 auto; min-height: 200px; overflow:hidden }
.carousel-track { display:flex; flex-wrap:nowrap; transition: transform .5s ease; will-change: transform }
.carousel-slide { flex: 0 0 100%; user-select:none; border-radius:.9rem; overflow:hidden; border:1px solid rgba(96,165,250,.08) }
.carousel-slide img { display:block; width:100%; height:300px; object-fit:contain; background: var(--panel); padding:.25rem; border-radius:.8rem }
.carousel-caption { text-align:center; padding:.4rem .6rem; color: var(--text); font-weight:600; font-size:1rem }
.carousel-nav { position:absolute; inset:auto 0 10px 0; display:flex; justify-content:center; gap:6px; z-index:2 }
.carousel-dot { width:8px; height:8px; border-radius:50%; background:rgba(100,116,139,.35); border:0 }
.carousel-dot.active { background: var(--primary) }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(96,165,250,.8); color:#fff; border:0; width:40px; height:40px; border-radius:50%; cursor:pointer; z-index:3 }
.carousel-btn.prev { left:10px }
.carousel-btn.next { right:10px }

/* Pricing */
.pricing-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem }
.price-card { position:relative; background: linear-gradient(180deg, #ffffff, #f8f9fc); border:1px solid rgba(96,165,250,.12); border-radius:1rem; padding:1.2rem; box-shadow: 0 4px 12px rgba(96,165,250,.08) }
.pricing-compare { overflow-x:auto; margin-bottom:1.2rem }
.compare { width:100%; border-collapse: collapse; background: var(--card); border:1px solid rgba(96,165,250,.12); border-radius:.8rem }
.compare th, .compare td { padding:.8rem; border-bottom:1px solid rgba(96,165,250,.08); text-align:left }
.compare thead th { position:sticky; top:0; background:#f8f9fc; font-weight:700; color: var(--text) }
.compare-title { margin:.5rem 0 .6rem; font-size:1.05rem; color: var(--text) }
.pricing-notes h3 { margin:.6rem 0; color: var(--text) }
.notes-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem }
.notes-grid > div { background: var(--card); border:1px solid rgba(96,165,250,.12); border-radius:.8rem; padding:.8rem; box-shadow: 0 2px 8px rgba(96,165,250,.05) }
@media (max-width: 960px) {
  .notes-grid { grid-template-columns: 1fr }
}
.price-card .price { font-size:1rem; color: var(--muted) }
.price-card .price span { font-size:2rem; color: var(--text); font-weight:800 }
.price-card ul { margin:.6rem 0 1rem; padding-left:1.2rem; color: var(--muted) }
.price-card.featured { border-color: rgba(96,165,250,.4); box-shadow: 0 16px 48px -20px rgba(96,165,250,.25) }
.badge { position:absolute; top:10px; right:10px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#ffffff; font-weight:700; padding:.25rem .5rem; border-radius:.5rem; font-size:.8rem }
.badge.secondary { background: linear-gradient(135deg, #f59e0b, #f97316); color:#ffffff }
.price-card.highlight-secondary { border-color: rgba(249,115,22,.6); box-shadow: 0 16px 48px -20px rgba(249,115,22,.35) }

/* Testimonials */
.testimonial-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem }
blockquote { margin:0; background: var(--card); border:1px solid rgba(96,165,250,.12); border-radius:.9rem; padding:1rem; color: var(--muted); box-shadow: 0 2px 8px rgba(96,165,250,.05) }
cite { display:block; margin-top:.6rem; color: var(--text); font-style: normal; font-weight:600 }

/* FAQ */
details { background: var(--card); border:1px solid rgba(96,165,250,.12); border-radius:.8rem; padding:.8rem 1rem; margin-bottom:.6rem; box-shadow: 0 2px 8px rgba(96,165,250,.05) }
summary { cursor:pointer; font-weight:600; color: var(--text) }
details[open] { border-color: rgba(96,165,250,.3) }

/* Contact */
.form-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: .8rem }
.form-grid .full { grid-column: 1 / -1 }
label span { display:block; margin-bottom:.35rem; color: var(--text); font-weight: 500 }
input, textarea, select { width:100%; background:#ffffff; border:1px solid rgba(96,165,250,.2); color:var(--text); border-radius:.6rem; padding:.75rem .9rem; outline:none; transition:.2s ease }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring) }
.form-actions { display:flex; align-items:center; gap:.8rem; margin-top:.6rem }
#form-status { color: var(--muted) }

/* Footer */
.site-footer { padding: 2rem 0; border-top:1px solid rgba(96,165,250,.12); color: var(--muted); background: rgba(248,249,252,.8) }
.site-footer .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }

/* Menu Mobile Overlay */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 28px;
  color: var(--text);
  cursor: pointer;
  padding: 5px;
  margin-left: auto;
  z-index: 1001;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--panel);
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateY(0);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 10;
}

.mobile-menu-close {
  background: transparent;
  border: none;
  font-size: 32px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
}

.mobile-menu-nav {
  padding: 2rem 1.5rem;
}

.mobile-menu-link {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.mobile-menu-link:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary);
}

.mobile-menu-divider {
  height: 1px;
  background: rgba(102, 126, 234, 0.1);
  margin: 1.5rem 0;
}

.mobile-menu-lang {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.mobile-lang-btn {
  flex: 1;
  padding: 0.8rem;
  text-align: center;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  background: rgba(102, 126, 234, 0.05);
  border: 1px solid rgba(102, 126, 234, 0.2);
  font-size: 0.9rem;
  transition: all 0.2s;
  font-weight: 500;
}

.mobile-lang-btn:hover,
.mobile-lang-btn.active {
  background: rgba(102, 126, 234, 0.15);
  border-color: var(--primary);
  color: var(--primary);
}

.mobile-menu-login {
  display: block;
  margin-top: 1.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Responsive */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr }
  .gallery { grid-template-columns: 1fr 1fr }
  .pricing-grid, .testimonial-grid { grid-template-columns: 1fr }
  .form-grid { grid-template-columns: 1fr }
  .checkout-card { padding: 1.5rem; max-width: 95% }
  .checkout-card .form-grid { grid-template-columns: 1fr }
  .checkout-card h3 { font-size: 1.1rem }
  
  /* Cacher menu desktop, afficher burger */
  .desktop-nav { display:none !important }
  .mobile-menu-toggle { display:block !important }
}

/* Reveal on scroll */
.reveal { opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease }
.reveal.in { opacity:1; transform: translateY(0) }

/* Lightbox */
.lightbox { position: fixed; inset:0; display:grid; place-items:center; z-index:100; }
.lightbox[hidden] { display:none }
.lightbox-backdrop { position:absolute; inset:0; background: rgba(96,165,250,.2); backdrop-filter: blur(8px); z-index: 1 }
.lightbox-img { position:relative; width:auto; height:auto; max-width:92vw; max-height:76vh; border-radius:.8rem; box-shadow: 0 20px 60px rgba(96,165,250,.3); border:1px solid rgba(96,165,250,.2); image-rendering:auto; z-index: 2; background: var(--panel) }
.lightbox-caption { position:absolute; bottom:calc(10% + 8px); left:50%; transform:translateX(-50%); background: rgba(96,165,250,.9); color:#fff; padding:.35rem .6rem; border-radius:.5rem; z-index:3; font-weight:600 }
.lightbox-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(96,165,250,.8); color:#fff; border:0; width:48px; height:48px; border-radius:50%; cursor:pointer; z-index:3 }
.lightbox-prev { left:16px }
.lightbox-next { right:16px }
.lightbox-close { position:absolute; top:12px; right:12px; background:rgba(96,165,250,.8); color:#fff; border:0; width:40px; height:40px; border-radius:50%; font-size:24px; line-height:40px; cursor:pointer; z-index: 3 }

/* Checkout Modal */
.checkout-modal { position:fixed; inset:0; background:rgba(96,165,250,.15); backdrop-filter: blur(8px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem }
.checkout-backdrop { position:absolute; inset:0 }
.checkout-card { background:#ffffff; padding:2.5rem; border-radius:12px; max-width:700px; width:100%; position:relative; border:1px solid rgba(96,165,250,.2); max-height:90vh; overflow-y:auto; box-shadow: 0 20px 60px rgba(96,165,250,.3) }
.checkout-close { position:absolute; top:1rem; right:1rem; background:none; border:none; color:#333; font-size:1.5rem; cursor:pointer; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .2s }
.checkout-close:hover { background:#ecfdf5 }
.checkout-card h3 { color:#333; margin-bottom:1rem; font-size:1.35rem; text-align: center; font-weight: 700 }
.checkout-card p { color:#64748b; margin-bottom:1.5rem; font-size: 0.95rem }
.checkout-card .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem }
.checkout-card .form-grid .full { grid-column:1/-1 }
.checkout-card label { display:block }
.checkout-card label span { display:block; color:#333; font-weight:500; margin-bottom:.5rem; font-size:.9rem }
.checkout-card input { width:100%; padding:.75rem; border:1px solid rgba(96,165,250,.2); border-radius:.5rem; background:#ffffff; color:#333; font-size:.9rem }
.checkout-card input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring) }
.checkout-card .form-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.checkout-card #checkout-status { color:#64748b; font-size:.9rem }
.checkout-card .form-section { margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(96,165,250,.15) }
.checkout-card .form-section:last-of-type { border-bottom: none; margin-bottom: 1rem }
.checkout-card .form-section h4 { display: flex; align-items: center; gap: 0.5rem; color: #333 }