:root{
  --bg:#020617; --panel:#0f1720; --text:#e6eef6; --muted:#9aa4ad; --accent:#4fb3ff; --steel:#0e2a45;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:radial-gradient(1000px 500px at 10% 10%, rgba(79,179,255,0.03), transparent),var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:4rem 1.25rem}
.nav{position:sticky;top:0;backdrop-filter:saturate(120%) blur(6px);background:linear-gradient(180deg, rgba(2,6,23,0.65), rgba(2,6,23,0.45));border-bottom:1px solid rgba(255,255,255,0.02)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:0.75rem 1.25rem}
.brand{display:flex;align-items:center;gap:0.75rem;color:var(--text);text-decoration:none}
.logo{width:44px;height:44px}
.logo-img{width:44px;height:44px;object-fit:contain;display:block}
.brand-text{font-weight:700;letter-spacing:0.4px}
.main-nav{display:flex;gap:1rem}
.main-nav a{color:var(--muted);text-decoration:none;font-weight:600}
.nav-actions{display:flex;align-items:center;gap:0.75rem}
.hamburger{display:none;background:transparent;border:0;color:var(--text);font-size:20px}
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1rem;border-radius:8px;border:1px solid transparent;text-decoration:none;font-weight:700;cursor:pointer;transition:all 220ms ease}
.btn-primary{background:linear-gradient(180deg,var(--steel),rgba(27,58,90,0.85));box-shadow:0 6px 18px rgba(79,179,255,0.04);color:var(--text)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:0.5rem 0.75rem}
.btn-cta{background:linear-gradient(90deg,rgba(79,179,255,0.12),rgba(27,58,90,0.06));border:1px solid rgba(79,179,255,0.08)}
.btn-sm{padding:0.45rem 0.7rem;font-size:0.9rem}
.hero{padding:6rem 0;background:transparent}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.kicker{font-size:0.75rem;color:var(--muted);letter-spacing:1.4px}
h1{font-size:2.4rem;margin:0 0 0.6rem}
.lead{color:var(--muted);max-width:48ch}
.hero-right{position:relative}
.shark-deco{width:100%;height:260px}
.section{padding:4rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.25rem}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:1.25rem;border-radius:10px;border:1px solid rgba(255,255,255,0.02);transition:transform 220ms ease,box-shadow 220ms ease}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(79,179,255,0.04);border-color:rgba(79,179,255,0.06)}
.card .icon{font-size:1.6rem}
.muted{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}
.badge{padding:0.45rem 0.65rem;border-radius:8px;background:rgba(255,255,255,0.02);color:var(--muted);font-weight:700;border:1px solid rgba(255,255,255,0.02)}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.project-card{display:flex;gap:1rem;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:0.8rem;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.thumb{width:120px;height:80px;background:linear-gradient(180deg,rgba(79,179,255,0.04),rgba(27,58,90,0.02));border-radius:6px}
.project-card .meta h3{margin:0}
.tag{font-size:0.8rem;color:var(--muted);margin-left:0.5rem}
.timeline{list-style:none;padding:0;margin:1rem 0;display:grid;gap:1rem}
.timeline li{display:flex;gap:1rem;align-items:flex-start}
.step{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;background:rgba(79,179,255,0.06);color:var(--text);font-weight:800}
.cta{background:linear-gradient(180deg,rgba(79,179,255,0.02),transparent);text-align:center;padding:3rem;border-radius:12px}
.contact .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
label{display:block;color:var(--muted);font-weight:600}
label span{display:block;margin-bottom:0.35rem}
input,textarea,select{width:100%;padding:0.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.01);color:var(--text)}
.full{grid-column:1/-1}
.form-actions{display:flex;gap:1rem;align-items:center;margin-top:1rem}
.footer{border-top:1px solid rgba(255,255,255,0.02);padding:2rem 0;margin-top:2rem}
.foot-inner{display:flex;justify-content:space-between;align-items:center}
.logo-condensed{display:flex;gap:0.75rem;align-items:center}
.foot-links{display:flex;gap:1rem}
.copy{color:var(--muted);margin-top:0.5rem}

/* Logo watermark and repeated placements */
.hero-right{position:relative}
.hero-logo{position:absolute;right:18px;bottom:18px;width:220px;opacity:0.06;pointer-events:none;filter:grayscale(30%) saturate(60%)}
.card{position:relative}
.card::before{content:'';position:absolute;top:10px;right:10px;width:36px;height:36px;background-image:url('img/logo.png');background-repeat:no-repeat;background-size:contain;opacity:0.06;pointer-events:none}
.thumb{background-image:url('img/logo.png');background-repeat:no-repeat;background-position:center;background-size:48%;}
.thumb-img{width:100%;height:100%;object-fit:contain;opacity:0.12;filter:grayscale(40%);border-radius:6px}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .main-nav{display:none}
  .hamburger{display:inline-block}
  .grid-2{grid-template-columns:1fr}
  .contact .form-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
'

$js = @'
// Simple interactions: mobile menu toggle and basic form validation
document.addEventListener('DOMContentLoaded', function(){
  var toggle = document.getElementById('menuToggle');
  var nav = document.getElementById('mainNav');
  toggle && toggle.addEventListener('click', function(){
    var expanded = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded', String(!expanded));
    if(nav){
      nav.style.display = expanded ? 'none' : 'flex';
      nav.style.flexDirection = 'column';
      nav.style.gap = '1rem';
      nav.style.padding = '1rem';
      nav.style.background = 'linear-gradient(180deg, rgba(2,6,23,0.9), rgba(2,6,23,0.95))';
    }
  });

  var form = document.getElementById('contactForm');
  var msg = document.getElementById('formMsg');
  form && form.addEventListener('submit', function(e){
    e.preventDefault();
    var data = new FormData(form);
    var name = data.get('name').toString().trim();
    var email = data.get('email').toString().trim();
    var type = data.get('type').toString().trim();
    var message = data.get('message').toString().trim();
    msg.textContent = '';
    if(!name || !email || !type || !message){
      msg.textContent = 'Veuillez remplir les champs obligatoires.';
      msg.style.color = '#ffb3b3';
      return;
    }
    // Basic email check
    if(!/^\S+@\S+\.\S+$/.test(email)){
      msg.textContent = 'Adresse email invalide.';
      msg.style.color = '#ffb3b3';
      return;
    }
    // Placeholder: no backend — show success and reset
    msg.style.color = '#9fffb3';
    msg.textContent = 'Merci — votre demande a été prise en compte (placeholder).';
    form.reset();
  });

  // smooth in-page links
  document.querySelectorAll('a[href^="#"]').forEach(function(a){
    a.addEventListener('click', function(e){
      var target = document.querySelector(this.getAttribute('href'));
      if(target){
        e.preventDefault();
        var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        if(prefersReduced){ target.scrollIntoView(); }
        else{ window.scrollTo({top: target.offsetTop - 70, behavior: 'smooth'}); }
      }
    });
  });
});