:root{
    --bg1: #1c04f0;
    --bg2: #3e62a5;
    --glass-bg: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.18);
    --accent: #DAD7FF;
    --muted: rgba(255,255,255,0.88);
    --text-strong: #F8F9FF;
    --glass-strong: rgba(255,255,255,0.12);
    --max-width: 1200px;
    --shadow-strong: rgba(0,0,0,0.28);
    --radius-lg: 18px;
    --glass-blur: 10px;
    --accent-2: #FFD6F0;
    --ui-bg: rgba(255,255,255,0.03);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.03), transparent 10%), linear-gradient(135deg,var(--bg1),var(--bg2));
    color:var(--text-strong);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    line-height:1.48;
  }
html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

.background-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* derrière tout */
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.03), transparent 10%), linear-gradient(135deg,var(--bg1),var(--bg2)) center/cover no-repeat fixed;
}

  /* --- Liquid animated background --- */
  .liquid-bg{ 
    position:fixed; 
    inset:0; 
    z-index:0; 
    pointer-events:none; 
    overflow:hidden; 
    filter: blur(28px) saturate(120%); 
    mix-blend-mode: overlay; 
    opacity:0.95; 
}
  .liquid-bg svg{ 
    width:150%; 
    height:150%; 
    transform:translate(-12%,-8%); 
}

  /* container central */
  .wrap{ 
    position:relative; 
    z-index:6; 
    max-width:var(--max-width); 
    margin:0 auto; 
    padding:120px 28px 80px; }

  /* nav */
  nav{ position:fixed; top:16px; left:50%; transform:translateX(-50%); width:calc(100% - 56px); max-width:var(--max-width); display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-radius:14px; background: var(--ui-bg); backdrop-filter: blur(var(--glass-blur)) saturate(110%); border:1px solid var(--glass-border); z-index:50; transition:transform .28s ease, background .28s ease, box-shadow .28s ease; }
  nav.scrolled{ transform:translateX(-50%) translateY(-6px) scale(.99); background: rgba(255,255,255,0.045); box-shadow: 0 6px 20px var(--shadow-strong); }

  .logo{ display:flex; gap:12px; align-items:center; }
  .logo img{ height:44px; width:auto; border-radius:10px; padding:6px; background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
  .logo h3{ font-size:18px; margin:0; font-weight:800; letter-spacing:0.5px; color:var(--text-strong); }

  .menu{ display:flex; gap:18px; align-items:center; }
  .menu a{ color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; opacity:0.98; padding:8px 10px; border-radius:10px; transition:all .18s ease; }
  .menu a:hover, .menu a:focus{ color:var(--text-strong); background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); transform:translateY(-3px); }
  .cta-quote{ padding:8px 12px; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06); font-weight:700; }

  /* theme toggle */
  .theme-toggle{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:6px; border-radius:8px; }

  /* Header hero */
  .hero{ display:grid; grid-template-columns: 1fr 460px; gap:28px; align-items:center; margin-top:6vh; }
  .hero-left{ padding:34px; border-radius:var(--radius-lg); background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
  .kicker{ font-size:13px; color:var(--muted); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
  .hero-left h1{ font-size:44px; line-height:1.02; margin:0 0 14px; color:var(--text-strong); }
  .hero-left p{ color:rgba(255,255,255,0.92); font-size:16px; margin-bottom:18px; max-width:680px; }
  .hero-cta{ display:flex; gap:12px; align-items:center; }

  .btn{ padding:12px 20px; border-radius:999px; border:none; cursor:pointer; font-weight:700; background:linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)); color:var(--text-strong); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,0.14); transition:transform .18s ease, box-shadow .18s ease; }
  .btn.secondary{ background:transparent; border:1px solid rgba(255,255,255,0.08); }
  .btn:hover{ transform:translateY(-6px); box-shadow: 0 16px 44px rgba(92,75,255,0.16); }

  /* hero right image card */
  .hero-card{ border-radius:var(--radius-lg); overflow:hidden; position:relative; min-height:340px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--glass-border); backdrop-filter: blur(6px); }
  .hero-card img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.4); transition:transform .6s ease; }
  .hero-card:hover img{ transform:scale(1.4) translateY(-6px); }

  /* sections */
  section{ margin:52px 0; display:block; position:relative; z-index:2; }
  section .section-inner{ padding:28px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px solid var(--glass-border); backdrop-filter: blur(8px); box-shadow: 0 8px 26px rgba(0,0,0,0.12); }
  section h2{ margin:6px 0 14px; font-size:28px; color:var(--text-strong); }
  section p.lead{ margin:6px 0 14px; font-size:18px; color:var(--muted); }

  /* services grid - interactive modal triggers */
  .services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:14px; }
  .service{ border-radius:14px; overflow:hidden; min-height:220px; position:relative; transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s; cursor:pointer; }
  .service .bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:contrast(1.02) saturate(1.05) brightness(.9); transform-origin:center; transition:transform .6s ease, filter .3s ease; }
  .service .overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.45)); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; gap:8px; color:#fff; }
  .service h4{ margin:0; font-size:18px; font-weight:800; text-shadow: 0 6px 20px rgba(0,0,0,0.4); }
  .service p{ margin:0; font-size:13px; color:rgba(255,255,255,0.95); }
  .service:hover{ transform:translateY(-10px); box-shadow:0 30px 60px rgba(0,0,0,0.36) }
  .service:hover .bg{ transform:scale(1.08) rotate(0.6deg); filter:brightness(1); }

  /* cards grid */
  .cards-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:14px; }
  .card{ padding:18px; border-radius:14px; display:flex; gap:14px; align-items:flex-start; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px solid var(--glass-border); }
  .icon-wrap{ min-width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06); }
  .card h3{ margin:0; font-size:16px; }
  .card p{ margin:6px 0 0; color:var(--muted); font-size:14px; }

  /* contact small */
  .contact-grid{ display:grid; grid-template-columns:1fr 380px; gap:18px; align-items:start; }
  .form{ display:flex; flex-direction:column; gap:12px; }
  input, textarea{ padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); color:var(--text-strong); outline:none; resize:vertical; }
  input::placeholder, textarea::placeholder{ color:rgba(255,255,255,0.6) }
  .small-note{ font-size:13px; color:var(--muted); }

  footer{ text-align:center; margin-top:34px; padding:28px; color:var(--muted); font-size:13px; }

  /* modal */
  .modal-backdrop{ 
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,0.45); 
    display:none; 
    align-items:center; 
    justify-content:center; 
    z-index:120; 
    background: rgba(141, 141, 141, 0.4); /* fond assombri */
    backdrop-filter: blur(12px); /* flou d’arrière-plan ajouté */
}
  .modal{ 
    width:clamp(320px, 72vw, 880px); 
    border-radius:12px; 
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
    border:1px solid rgba(255,255,255,0.06); 
    padding:18px; box-shadow: 0 30px 70px rgba(0,0,0,0.4); 
    transform:translateY(8px); 
    transition:all .28s ease; 
}
  .modal.show{ transform:translateY(0); }
  .modal .modal-body{ display:grid; grid-template-columns: 1fr 320px; gap:18px; }
  .modal img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
  .modal .close{ background:transparent; border:none; color:var(--muted); font-weight:700; font-size:18px; cursor:pointer; }

  /* back to top */
  .to-top{ position:fixed; right:18px; bottom:18px; z-index:60; width:54px; height:54px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06); cursor:pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }

  /* subtle entrance */
  .reveal{ opacity:0; transform:translateY(12px); transition:all .8s cubic-bezier(.2,.9,.3,1) }
  .reveal.show{ opacity:1; transform:translateY(0) }

  /* responsive */
  @media(max-width:1100px){ .hero{ grid-template-columns:1fr 380px; } }
  @media(max-width:980px){ .hero{ grid-template-columns:1fr; } .contact-grid{ grid-template-columns:1fr; } nav{ left:12px; transform:none; width:calc(100% - 24px); } .services-grid{ grid-template-columns:repeat(2,1fr);} .modal .modal-body{ grid-template-columns:1fr; } }
  @media(max-width:640px){ .services-grid{ grid-template-columns:1fr;} .wrap{ padding:84px 16px 60px; } }

  /* accessibility: focus styles */
  a:focus, button:focus, input:focus{ outline:3px solid rgba(165,155,255,0.18); outline-offset:3px; }

  /* reduce motion */
  @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }
  /* Burger menu */
.burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 3px;
  background: var(--text-strong);
  border-radius: 2px;
}

/* Menu mobile */
@media(max-width:980px){
  .menu {
    position: fixed;
    top: 72px; /* sous le nav */
    right: -100%; /* caché par défaut */
    flex-direction: column;
    background: var(--ui-bg);
    border-radius: 12px;
    padding: 20px;
    gap: 12px;
    transition: right 0.3s ease;
    width: 220px;
  }
  nav {
    left:12px !important;
    transform:none !important;
    width:calc(100% - 24px) !important;
  }
  .menu.active {
    right: 12px;
  }
  .burger {
    display: flex;
  }
}
      .approach-toggle {
        flex: 1 1 90px;
        background: rgba(255,255,255,0.05);
        border-radius: 12px;
        padding: 12px;
        text-align: center;
        cursor: pointer;
        transition: transform 0.3s ease, background 0.3s ease;
      }
      .approach-toggle:hover {
        transform: scale(1.1);
        background: rgba(255,255,255,0.1);
      }
      .approach-toggle .number {
        font-size: 22px;
        font-weight: bold;
        color:var(--muted);
      }
      .approach-toggle .label {
        margin-top: 4px;
        font-size: 14px;
        color: var(--muted);
      }