:root {
      --ink: #17243d;
      --muted: #64738d;
      --navy: #0c1b38;
      --blue: #2868e8;
      --cyan: #59d4ed;
      --line: #dce5f1;
      --soft: #f4f8ff;
      --white: #fff;
      --shadow: 0 22px 56px rgba(18, 42, 86, .11);
      --radius: 24px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: Inter, Arial, Helvetica, sans-serif;
      line-height: 1.65;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; }
    .container { width: min(1160px, calc(100% - 44px)); margin-inline: auto; }
    .hero {
      position: relative;
      overflow: hidden;
      padding: 72px 0 78px;
      color: #fff;
      background:
        radial-gradient(circle at 82% 15%, rgba(76,181,255,.2), transparent 31%),
        linear-gradient(125deg, #09162d 0%, #112b55 58%, #173c72 100%);
    }
    .hero::after {
      position: absolute;
      right: -150px;
      bottom: -260px;
      width: 480px;
      height: 480px;
      border: 1px solid rgba(115,205,255,.22);
      border-radius: 50%;
      box-shadow: 0 0 0 38px rgba(115,205,255,.04), 0 0 0 78px rgba(115,205,255,.035);
      content: "";
      pointer-events: none;
    }
    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      align-items: center;
      gap: 54px;
    }
    .brandline, .eyebrow, .kicker, .mini-label {
      text-transform: uppercase;
      font-weight: 800;
    }
    .brandline {
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 0 0 24px;
      color: #a9d9ff;
      font-size: 12px;
      letter-spacing: .15em;
    }
    .brandmark {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border: 1px solid rgba(133,216,255,.7);
      border-radius: 11px;
      color: #74deff;
      font-size: 17px;
    }
    .eyebrow { margin: 0 0 14px; color: #77dafa; font-size: 12px; letter-spacing: .18em; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 700px; margin-bottom: 20px; font-size: clamp(38px, 5vw, 62px); line-height: 1.05; letter-spacing: -.045em; }
    h2 { margin-bottom: 14px; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.035em; }
    h3 { line-height: 1.25; }
    .hero-subtitle { max-width: 590px; margin-bottom: 24px; color: #d8e7ff; font-size: 19px; }
    .wavelengths { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
    .wavelengths span { padding: 8px 13px; border: 1px solid rgba(171,218,255,.36); border-radius: 999px; background: rgba(255,255,255,.07); color: #f0f7ff; font-size: 14px; font-weight: 700; }
    .hero-copy { max-width: 570px; margin-bottom: 26px; color: #c7d6ec; font-size: 15px; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 21px;
      border-radius: 999px;
      background: linear-gradient(90deg, #3c7eff, #53c9ed);
      box-shadow: 0 12px 28px rgba(45,135,237,.25);
      color: #081a38;
      font-weight: 800;
      text-decoration: none;
      transition: transform .2s ease;
    }
    .button:hover { transform: translateY(-2px); }

    /* Chaque visuel est une image HTML standard avec une URL publique remplaçable.
       Les dimensions sont des ratios d’affichage ; object-fit: contain évite toute déformation. */
    .image-slot {
      position: relative;
      overflow: hidden;
      margin: 0;
      border: 1px solid rgba(198,226,255,.55);
      border-radius: 20px;
      background: linear-gradient(135deg, #eef5ff, #dceaff 55%, #effaff);
    }
    .image-slot img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center; }
    .image-slot img[hidden] { display: none; }
    .image-size { position: absolute; z-index: 3; right: 11px; bottom: 11px; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 4px 14px rgba(18,42,86,.13); color: #405b7e; font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
    .image-placeholder { position: absolute; z-index: 2; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; background: linear-gradient(145deg,#f7faff,#e5effb); color: #405b7e; font-size: 13px; text-align: center; }
    .image-placeholder[hidden] { display: none !important; }
    .image-placeholder strong { color: #2463eb; font-size: 15px; }
    .image-placeholder span { max-width: 280px; }
    .image-slot--4x3 { aspect-ratio: 4 / 3; }
    .image-slot--portrait { aspect-ratio: 4 / 5; }
    .image-slot--case { aspect-ratio: 3 / 2; }
    .hero-image { padding: 12px; border: 1px solid rgba(198,226,255,.22); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: 0 30px 70px rgba(0,0,0,.25); }
    .hero-image .image-slot { border-color: transparent; border-radius: 19px; background: radial-gradient(circle at 50% 38%, #f5fbff, #cce5ff 66%, #e5f7ff); }
    .hero-image figcaption { padding: 10px 4px 0; color: #bdd6f7; font-size: 12px; }
    .section { padding: 84px 0; }
    .section.soft { background: var(--soft); }
    .section.dark { background: var(--navy); color: #fff; }
    .section-heading { max-width: 760px; margin-bottom: 36px; }
    .kicker { margin-bottom: 10px; color: var(--blue); font-size: 12px; letter-spacing: .16em; }
    .dark .kicker { color: #77dafa; }
    .section-intro { max-width: 720px; margin: 0; color: var(--muted); font-size: 17px; }
    .dark .section-intro { color: #bfcee4; }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 44px; }
    .copy p { color: var(--muted); }
    .dark .copy p { color: #c5d4e8; }
    .copy strong { color: var(--ink); }
    .dark .copy strong { color: #fff; }
    .principle-visual { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
    .principle-visual .image-slot { border: 0; background: #f4f8ff; }
    .wave-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
    .wave-card { padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
    .wave-card b { display: block; margin-bottom: 7px; color: var(--blue); font-size: 22px; line-height: 1.1; }
    .wave-card span { color: var(--muted); font-size: 13px; }
    .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .detail-card { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: 0 14px 36px rgba(18,42,86,.06); }
    .detail-card .image-slot { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #f1f6fc; }
    .detail-text { padding: 21px; }
    .mini-label { margin-bottom: 8px; color: var(--blue); font-size: 11px; letter-spacing: .12em; }
    .detail-text h3 { margin-bottom: 8px; font-size: 19px; }
    .detail-text p { margin: 0; color: var(--muted); font-size: 14px; }
    .parameter-layout { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 32px; }
    .parameter-layout .spec-card { width: 100%; max-width: 920px; margin-inline: auto; }
    .spec-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
    .spec-card h3 { margin-bottom: 16px; font-size: 22px; }
    .spec-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .spec-table th, .spec-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
    .spec-table th { width: 42%; color: var(--muted); font-size: 14px; font-weight: 600; }
    .spec-table td { font-size: 14px; font-weight: 700; }
    .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
    .spec-note { margin: 20px 0 0; padding: 14px 16px; border-radius: 14px; background: #f1f6ff; color: #52627c; font-size: 13px; }
    .before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .ba-card { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: var(--shadow); }
    .ba-card .image-slot { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #edf3fa; }
    .ba-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; font-size: 13px; font-weight: 800; }
    .ba-label span { color: var(--muted); font-weight: 600; }
    .results-note { margin: 20px 0 0; color: var(--muted); font-size: 13px; }
    .faq-layout { display: grid; grid-template-columns: 1.08fr .92fr; align-items: start; gap: 36px; }
    .faq-list { display: grid; gap: 11px; }
    details { padding: 0 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
    summary { position: relative; padding: 17px 34px 17px 0; cursor: pointer; font-weight: 750; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { position: absolute; top: 12px; right: 0; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #edf4ff; color: var(--blue); content: "+"; font-size: 18px; }
    details[open] summary::after { content: "−"; }
    details p { margin: 0; padding: 0 0 17px; color: var(--muted); font-size: 14px; }
    .faq-photo { border-radius: var(--radius); background: #deebff; box-shadow: var(--shadow); }
    .cta { position: relative; overflow: hidden; padding: 58px 0; background: linear-gradient(120deg, #0c1c39, #153e77); color: #fff; }
    .cta::after { position: absolute; top: -100px; right: 8%; width: 330px; height: 330px; border: 1px solid rgba(105,216,255,.2); border-radius: 50%; box-shadow: 0 0 0 30px rgba(105,216,255,.04), 0 0 0 62px rgba(105,216,255,.03); content: ""; }
    .cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
    .cta h2 { margin-bottom: 9px; font-size: clamp(27px, 3.4vw, 39px); }
    .cta p { margin-bottom: 0; color: #c5d7f2; }
    .cta .button { white-space: nowrap; }
    footer { padding: 23px 0; background: #08152b; color: #b5c5dd; font-size: 12px; text-align: center; }
    footer a { color: #b7d4ff; text-decoration: none; }
    @media (max-width: 900px) {
      .hero-grid, .two-col, .parameter-layout, .faq-layout { grid-template-columns: 1fr; }
      .hero-grid { gap: 32px; }
      .detail-grid { grid-template-columns: repeat(2, 1fr); }
      .faq-photo { max-width: 560px; }
    }
    @media (max-width: 620px) {
      .container { width: min(100% - 30px, 560px); }
      .hero { padding: 46px 0 54px; }
      .section { padding: 62px 0; }
      .hero-bottom { align-items: flex-start; }
      .detail-grid, .before-after, .wave-cards { grid-template-columns: 1fr; }
      .spec-card { padding: 21px; }
      .spec-table th, .spec-table td { padding: 11px 8px 11px 0; font-size: 13px; }
      .ba-label { align-items: flex-start; flex-direction: column; gap: 3px; }
      .cta-inner { align-items: flex-start; flex-direction: column; }
    }