:root{
      --brand:#0ea5e9;      /* bleu médical */
      --brand2:#5bbdf2;
      --ink:#0b1220;        /* titres */
      --muted:#475569;      /* texte secondaire */
      --bg:#ffffff;
      --card:#f6fafe;
      --line:#e6eef5;
      --radius:20px;
      --shadow:0 10px 35px rgba(14,165,233,.12);
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background:var(--bg); color:var(--ink); line-height:1.7;
    }
    a{color:var(--brand);text-decoration:none}
    .container{max-width:1160px;margin:0 auto;padding:24px}

    /* HERO */
    .hero{
      border-radius:calc(var(--radius) + 6px);
      background:
        radial-gradient(1200px 600px at 80% -10%, #e9f6ff 10%, transparent 40%),
        linear-gradient(180deg,#ffffff 0%, #f9fcff 100%);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero__grid{display:grid;gap:20px;grid-template-columns:1fr;align-items:center;padding:36px 26px}
    .kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:700}
    h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:.4rem 0 1rem}
    .lead{color:var(--muted);font-size:clamp(16px,2.4vw,18px);max-width:65ch}
    .hero__art{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
    .hero__art img{display:block;width:100%}

    /* Badges */
    .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    .badge{
      padding:8px 12px;border-radius:999px;border:1px solid var(--line);
      background:#fff;color:#0b1220;font-weight:600;font-size:.92rem
    }

    /* Sections */
    .section{margin:34px 0}
    .card{
      background:linear-gradient(180deg,#ffffff, #f8fbff);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:22px;
      box-shadow:var(--shadow);
    }

    /* Grid blocs */
    .grid-2{display:grid;gap:22px;grid-template-columns:1fr}
    .grid-3{display:grid;gap:16px;grid-template-columns:1fr}
    .icon{width:28px;height:28px;margin-right:10px;flex:0 0 auto}
    .h2{font-size:22px;margin:0 0 12px;color:var(--ink)}
    .muted{color:var(--muted)}

    /* Specs table */
    table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
    th,td{padding:12px 14px;border-bottom:1px dashed var(--line);text-align:left}
    th{width:42%;color:#0b1220;background:#f9fcff}
    tr:last-child td,tr:last-child th{border-bottom:0}

    /* List stylée */
    .list{list-style:none;padding-left:0;margin:0}
    .list li{padding-left:28px;position:relative;margin:.45rem 0;color:var(--muted)}
    .list li::before{content:"✔";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}

    /* CTA */
    .cta{margin:30px 0;text-align:center;padding:26px;border-radius:24px;background:linear-gradient(90deg, #e8f6ff, #ffffff);border:1px solid var(--line)}
    .btn{
      display:inline-block;margin-top:12px;padding:14px 20px;border-radius:14px;
      background:linear-gradient(180deg, var(--brand), var(--brand2));
      color:#fff;font-weight:700;border:0;box-shadow:0 6px 20px rgba(14,165,233,.25)
    }

    /* Desktop */
    @media (min-width:980px){
      .hero__grid{grid-template-columns:1.1fr .9fr;padding:56px 44px}
      .grid-2{grid-template-columns:1.1fr .9fr}
      .grid-3{grid-template-columns:repeat(3,1fr)}
    }