:root {
      --ink: #171717;
      --muted: #68605c;
      --line: #eadfd8;
      --soft: #fff7f2;
      --paper: #fffdfb;
      --rose: #b7344a;
      --rose-dark: #842437;
      --coral: #e9785f;
      --shadow: 0 18px 50px rgba(70, 38, 28, 0.12);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.75;
    }

    a {
      color: var(--rose-dark);
      font-weight: 700;
      text-decoration-color: rgba(183, 52, 74, 0.35);
      text-underline-offset: 4px;
    }

    a:hover {
      color: var(--rose);
      text-decoration-color: currentColor;
    }

    .blog-page {
      overflow: hidden;
    }

    .hero {
      position: relative;
      min-height: 520px;
      display: grid;
      align-items: end;
      padding: 96px 24px 56px;
      color: #fff;
      /* Image hero générée : 1681 x 936 px, ratio proche 16:9 */
      background:
        linear-gradient(90deg, rgba(40, 16, 18, 0.86), rgba(90, 28, 38, 0.66) 48%, rgba(90, 28, 38, 0.28)),
        url("https://upbg103.myueeshop.com/u_file/2605/25/photo/pdtled.png") center/cover;
    }

    .hero-inner {
      width: min(1120px, 100%);
      margin: 0 auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: #ffe1d9;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 34px;
      height: 2px;
      background: var(--coral);
    }

    h1 {
      max-width: 850px;
      margin: 0;
      font-size: clamp(36px, 6vw, 68px);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .hero-summary {
      max-width: 760px;
      margin: 24px 0 0;
      color: #fff3ef;
      font-size: 19px;
    }

    .meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
      color: #ffe7df;
      font-size: 14px;
    }

    .meta-row span {
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
    }

    .content-wrap {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 46px;
      padding: 58px 0 78px;
    }

    .article {
      min-width: 0;
    }

    .article section {
      padding: 8px 0 24px;
      border-bottom: 1px solid var(--line);
    }

    .article section:last-child {
      border-bottom: 0;
    }

    h2 {
      margin: 28px 0 14px;
      font-size: clamp(25px, 3vw, 34px);
      line-height: 1.18;
      letter-spacing: 0;
    }

    h3 {
      margin: 22px 0 8px;
      font-size: 20px;
      line-height: 1.3;
    }

    p {
      margin: 0 0 16px;
      color: #342c29;
      font-size: 17px;
    }

    .lead-box {
      margin: -96px 0 34px;
      padding: 28px;
      border: 1px solid rgba(183, 52, 74, 0.14);
      border-radius: 8px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .lead-box p {
      margin: 0;
      color: #3d302c;
      font-size: 18px;
    }

    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin: 22px 0 4px;
      padding: 0;
      list-style: none;
    }

    .benefit-grid li {
      min-height: 86px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
      color: #2f2825;
      font-weight: 700;
    }

    .callout {
      margin: 26px 0;
      padding: 26px;
      border-left: 5px solid var(--rose);
      border-radius: 8px;
      background: #fff5f1;
    }

    .callout p {
      margin-bottom: 0;
    }

    .cta-panel {
      margin: 34px 0;
      padding: 30px;
      border-radius: 8px;
      background: linear-gradient(135deg, #7f2033, #d85555 58%, #d99b56);
      color: #fff;
      box-shadow: var(--shadow);
    }

    .cta-panel h2,
    .cta-panel p {
      color: #fff;
    }

    .cta-panel h2 {
      margin-top: 0;
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      margin-top: 10px;
      padding: 12px 20px;
      border-radius: 999px;
      background: #fff;
      color: var(--rose-dark);
      font-weight: 800;
      text-decoration: none;
    }

    .sidebar {
      align-self: start;
      position: sticky;
      top: 24px;
    }

    .side-box {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 12px 34px rgba(62, 36, 27, 0.08);
    }

    .side-box + .side-box {
      margin-top: 18px;
    }

    .side-box h2 {
      margin: 0 0 12px;
      font-size: 20px;
    }

    .side-box ul {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
    }

    .side-box li {
      margin: 8px 0;
    }

    .faq-item {
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
    }

    .faq-item:last-child {
      border-bottom: 0;
    }

    .faq-item h3 {
      margin-top: 0;
    }

    @media (max-width: 900px) {
      .hero {
        min-height: 500px;
        padding-top: 72px;
      }

      .content-wrap {
        grid-template-columns: 1fr;
        padding-top: 38px;
      }

      .lead-box {
        margin-top: -78px;
      }

      .sidebar {
        position: static;
      }
    }

    @media (max-width: 640px) {
      .hero {
        min-height: 560px;
        padding: 66px 18px 44px;
      }

      .hero-summary {
        font-size: 17px;
      }

      .lead-box,
      .cta-panel,
      .side-box {
        padding: 22px;
      }

      .benefit-grid {
        grid-template-columns: 1fr;
      }

      p {
        font-size: 16px;
      }
    }