@charset "utf-8";
/* CSS Document */

    :root{
      --bg:#0b1120;          /* gris bleuté profond */
      --panel:#0f172a;       /* panneau sombre */
      --muted:#94a3b8;       /* texte secondaire */
      --text:#e2e8f0;        /* texte principal */
      --brand:#06b6d4;       /* cyan */
      --brand-2:#22d3ee;     /* cyan clair */
      --accent:#34d399;      /* vert */
      --warn:#f59e0b;        /* orange */
      --danger:#ef4444;      /* rouge */
      --shadow: 0 10px 25px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{margin:0;height:100%;scroll-behavior:smooth}
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(180deg, var(--bg), #0a0f1f 60%, #0b1324);color:var(--text)}
    a{color:var(--brand-2);text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;display:block}
    .container{width:min(1120px, 92%);margin-inline:auto}
    .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.15rem;border-radius:999px;border:1px solid transparent;font-weight:600;letter-spacing:.2px;cursor:pointer;transition:.2s box-shadow,.2s transform,.2s background,.2s color}
    .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#001018;box-shadow:var(--shadow)}
    .btn-primary:hover{transform:translateY(-1px)}
    .btn-ghost{background:transparent;border-color:#334155;color:var(--text)}
    header.site{position:sticky;top:0;z-index:40;backdrop-filter:saturate(180%) blur(10px);background:rgba(11,17,32,.6);border-bottom:1px solid #1f2937}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
    .brand{display:flex;align-items:center;gap:.75rem;font-weight:800}
    .brand .logo{width:42px;height:42px;border-radius:12px;background:conic-gradient(from 180deg,var(--brand),var(--accent),var(--brand-2));box-shadow:0 6px 16px rgba(34,211,238,.35)}
    .brand .name{font-size:1.05rem;letter-spacing:.3px}
    .menu{display:flex;gap:1rem}
    .menu a{padding:.6rem .8rem;border-radius:10px}
    .menu a:hover{background:#0f1a2e}
    .burger{display:none}

    /* Hero */
    .hero{position:relative;padding:6rem 0 4rem;overflow:hidden}
    .hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center}
    .badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #1f2937;background:#0b1426;padding:.35rem .6rem;border-radius:999px;color:var(--muted);font-size:.9rem}
    .badge svg{width:18px;height:18px}
    h1{font-size:clamp(2rem, 5vw, 3.2rem);line-height:1.05;margin:.6rem 0 1rem}
    .lead{color:var(--muted);font-size:1.05rem;max-width:56ch}
    .hero-card{position:relative;background:radial-gradient(1200px 600px at -10% -20%, rgba(34,211,238,.1), transparent 60%), linear-gradient(180deg,#0f172a,#0b1120);border:1px solid #1f2937;border-radius:24px;padding:1rem;box-shadow:var(--shadow)}
    .hero-card img{border-radius:18px}
    .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
    .chip{border:1px solid #1f2937;background:#0a1628;color:#cbd5e1;padding:.35rem .6rem;border-radius:999px;font-size:.85rem}

    /* Sections */
    section{padding:4rem 0;border-top:1px solid #0f1a2e}
    h2{font-size:clamp(1.6rem, 3.6vw, 2.2rem);margin:0 0 1rem}
    .muted{color:var(--muted)}

    /* Services */
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
    .card{background:linear-gradient(180deg,#0f172a,#0c1425);border:1px solid #1f2937;border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
    .card picture{aspect-ratio:16/10;background:#0a1628}
    .card h3{margin:1rem 1rem .25rem;font-size:1.15rem}
    .card p{margin:0 1rem 1rem;color:#cbd5e1}
    .card .tags{display:flex;gap:.5rem;margin:0 1rem 1rem;flex-wrap:wrap}
    .tag{font-size:.8rem;border:1px solid #1f2937;background:#0b172b;border-radius:999px;color:#a3e1ec;padding:.25rem .55rem}

    /* Process */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
    .step{background:#0f172a;border:1px dashed #1f2937;border-radius:16px;padding:1rem}
    .step .n{font-weight:800;color:var(--brand-2)}

    /* Galerie */
    .gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
    .gallery img{aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid #1f2937}

    /* Témoignages */
    .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
    blockquote{margin:0;background:#0f172a;border:1px solid #1f2937;border-radius:16px;padding:1rem;color:#cbd5e1}
    blockquote footer{margin-top:.75rem;color:#9fb3c8}

    /* Contact */
    .contact{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
    .panel{background:#0f172a;border:1px solid #1f2937;border-radius:20px;padding:1rem}
    label{display:block;font-size:.9rem;color:#cbd5e1;margin:.35rem 0}
    input, textarea, select{width:100%;background:#0a1324;color:var(--text);border:1px solid #1f2937;border-radius:12px;padding:.8rem}
    textarea{min-height:120px;resize:vertical}
    .helper{font-size:.8rem;color:#93adc7}

    .cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}

    /* Footer */
    footer{padding:2rem 0;border-top:1px solid #0f1a2e;color:#9fb3c8}

    /* Responsive */
    @media (max-width: 1000px){
      .hero .grid{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr 1fr}
      .steps{grid-template-columns:1fr 1fr}
      .contact{grid-template-columns:1fr}
      .quotes{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 680px){
      .menu{display:none}
      .burger{display:inline-flex;gap:.5rem;align-items:center}
      .cards{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr}
      .quotes{grid-template-columns:1fr}
    }