.envelope-picture {
    path[fill="#fff"] {
      fill: var(--ld-background);
    }

    path[fill="#f0f0f0"] {
      fill: color-mix(in oklch, var(--ld-tint-fg) 12%, var(--ld-background));
    }

    path[fill="#daedf7"] {
      fill: color-mix(in oklch, var(--ld-tint-fg) 15%, var(--ld-background));
    }
  }.stream-picture {
    path[fill="#fff"],
    rect[fill="#fff"] {
      fill: var(--ld-background);
    }

    path[fill="#60a7ff"],
    rect[fill="#60a7ff"] {
      fill: var(--ld-lite-fg);
    }

    path[fill="#98d4ff"] {
      fill: var(--ld-top-border-color);
    }

    path[fill="#87bcfc"] {
      fill: color-mix(in oklch, var(--ld-lite-fg) 80%, var(--ld-background));
    }

    path[fill="#e8f1f6"] {
      fill: color-mix(in oklch, var(--ld-lite-fg) 12%, var(--ld-background));
    }

    path[fill="#e9f4fc"] {
      fill: color-mix(in oklch, var(--ld-lite-fg) 12%, var(--ld-background));
    }
  }.latest-episodes {
    background-color: var(--ld-soft-bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-block: 4rem;
    padding-bottom: 1.75rem;
    line-height: 1.35;

    header {
      display: flex;
      align-items: baseline;
      gap: 0.4rem;
      border-bottom: 1px solid var(--ld-lite-fg);
    }

    h3 {
      color: var(--ld-tint-fg);
      font-weight: 400;
      font-size: 0.938rem;
      margin-top: 1rem;
      margin-bottom: 0.34rem;
    }

    .rss-link {
      color: var(--ld-tint-fg);
      font-size: 0.9rem;
      align-self: end;
      margin-bottom: 0.34rem;

      .feed-logo {
        display: block;
        width: 1.25rem;
        height: 1.25rem;
      }
    }

    .latest-newsletter {
      h4 {
        font-size: 1.25rem;
        margin-top: 1rem;
        margin-bottom: 0;
        font-weight: 500;

        a {
          color: inherit;
          text-decoration: none;

          &:hover,
          &:focus-visible {
            text-decoration: underline;
          }
        }
      }

      .when {
        color: var(--ld-tint-fg);
        text-transform: lowercase;
        font-size: 0.875rem;
      }

      p {
        font-size: 0.938rem;
        margin-top: 0.5rem;
        margin-bottom: 0;
        max-width: 22rem;
      }
    }

    .latest-stream .vod {
      margin-top: 1.35rem;
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      column-gap: 1rem;

      :where(> *) {
        grid-column: 2;
      }

      .vod-thumb {
        grid-column: 1;
        grid-row: 1 / span 3;

        img {
          display: block;
          width: auto;
          height: 5.625rem;
          aspect-ratio: 16 / 9;
          border-radius: 0.438rem;
          border: 0 none;
        }
      }

      h4 {
        margin-top: 0;
        margin-bottom: 0.3rem;
        font-size: 0.875rem;
        font-weight: 500;

        grid-column: 2;
        grid-row: 1;

        a {
          color: inherit;
          text-decoration: none;

          &:hover,
          &:focus-visible {
            text-decoration: underline;
          }
        }
      }

      .when {
        font-size: 0.75rem;

        grid-column: 2;
        grid-row: 2;
      }

      .yt-link {
        width: max-content;
        font-size: 0.75rem;
        color: var(--ld-tint-fg);

        grid-column: 2;
        grid-row: 3;
      }
    }

    @media (max-width: 50rem) {
      grid-template-columns: 1fr;
      row-gap: 1rem;
    }
  }.newsletter-example {
    display: contents;
    line-height: 1.2;

    > * {
      grid-column: 1;
      border: 1px solid var(--ld-tint-fg);
      border-width: 0 1px;

      &:first-child {
        min-height: 2rem;
        border-top-width: 1px;
      }

      &:last-child {
        min-height: 2rem;
        border-bottom-width: 1px;
      }
    }

    p,
    li {
      font-size: 0.375rem;
      max-width: 9.75rem;
      margin-inline: auto;
    }

    ul,
    li {
      margin-left: 0;
    }

    .example-edito {
      grid-row: 2;
    }

    .example-tabs {
      grid-row: 3;
    }

    .example-changelog {
      grid-row: 4;
    }

    .example-stan-news {
      grid-row: 5;
    }

    .example-footer {
      grid-row: 6;
    }

    .example-edito::after,
    .example-tabs::after,
    .example-changelog::after,
    .example-stan-news::after {
      content: "";
      display: block;
      margin: 0.8rem auto;
      width: 3rem;
      height: 1px;
      border-bottom: 1px solid var(--ld-lite-fg);
    }

    .example-top-heading {
      font-family: "Fira Code", monospace;
      font-size: 0.625rem;
      margin-top: 0.8rem;
      margin-bottom: 0.3rem;

      strong {
        font-weight: 700;

        &::before {
          content: "lundi.dev";
        }
      }

      span {
        font-size: 0.375rem;
        margin-left: 0.3rem;

        &::before {
          content: "du lundi 23 février 2026";
        }
      }
    }

    .example-edito {
      .example-edito-title {
        font-size: 0.625rem;
        font-weight: 700;
        margin-bottom: 0.3rem;

        &::before {
          content: "Sauvegarder n’est pas un réflexe";
        }
      }

      .lorem-1::before {
        content: "Imaginez. Vous vous réveillez, un lundi matin. Vous démarrez votre ordinateur machinalement, avant d’aller vous faire un café. En revenant avec un mug à la main, le constat est clair autant que votre matinée est fichue : votre disque dur ne fonctionne plus. Kaput.";
      }

      .lorem-2::before {
        content: "Si vous pensez que ça n’arrive qu’aux autres, détrompez-vous. Deux amis ont vécu cette amère expérience récemment. Si l’un d’entre eux était surtout frustré d’avoir perdu un SSD — et de devoir en racheter un nouveau à un prix actuellement exorbitant — mon autre ami a perdu des mois de travail personnel, son prototype de jeu, qu’il développait avec passion durant ses soirées et ses week-ends.";
      }

      .lorem-3::before {
        content: "« Un travail qui n’est sauvegardé que sur ton disque dur n’est pas sauvegardé du tout. » Ça peut sembler être du bon sens pour certains, mais je suis persuadé que nombre d’entre vous sont persuadés que ça ne vaut pas le coup, ou que ça ne peut pas leur arriver. Pourtant, des attaques de rançongiciels (okay, de ransomwares), des vols de matériel, ou tout simplement une panne de disque complètement random, ça arrive, et souvent au pire moment.";
      }

      .lorem-8::before {
        content: "Maintenant qu’on a dit ça, que faire pour s’en prémunir ? Si vous êtes tolérant·e aux risques, l’achat d’un disque dur externe et un rappel dans votre calendrier tous les trois mois, ça peut déjà vous aider : un peu comme un piton à l’escalade, vous ferez une chute, mais elle sera moins longue et moins dévastatrice, quelques mois de travail tout au plus.";
      }

      .lorem-9::before {
        content: "Mais je me permets d’insister : un simple rappel trimestriel et un disque dur externe, stocké loin de votre ordinateur, ça ne respectera peut-être pas les exigences « 2+1 » de votre pote barbu, mais ça a de grandes chances de vous éviter de repartir de zéro.";
      }
    }

    .example-section-title {
      margin-top: 0.2rem;
      font-size: 0.563rem;
    }

    .example-tabs {
      .example-section-title::before {
        content: "Les 5 tabs";
      }

      ul {
        margin: 0;
        font-size: 0.375rem;
      }

      ul li {
        span {
          display: block;
          text-decoration: underline;
          text-decoration-skip-ink: none;
        }
      }

      ul li:nth-child(2n) {
        span::before {
          content: "Atlas Airborne";
        }

        div::before {
          content: "Cillum deserunt dolore id aliquip ea deserunt veniam nostrud dolore incididunt nostrud!";
        }
      }

      ul li:nth-child(2n + 1) {
        span::before {
          content: "Visio, l’outil de visioconférence des agents publics";
        }

        div::before {
          content: "Proident pariatur do et ad occaecat dolore incididunt non do ad cupidatat aliquip mollit sint do aliquip "
            "reprehenderit cillum deserunt dolore id aliquip ea deserunt veniam nostrud dolore incididunt nostrud mollit "
            "velit non ex mollit.";
        }
      }
    }

    .example-changelog .example-section-title::before {
      content: "Le changelog";
    }

    .example-changelog {
      span {
        display: inline;
        margin-right: 0.2rem;
        text-decoration: underline;
        text-decoration-skip-ink: none;
      }

      em {
        font-style: normal;
      }

      li:nth-child(3n) {
        span::before {
          content: "A 600x cost reduction over 7 years";
        }

        em::before {
          content: "Proident pariatur do et ad occaecat dolore incididunt non do ad cupidatat.";
        }
      }

      li:nth-child(3n + 1) {
        span::before {
          content: "Implementing the Temporal proposal in JavaScriptCore";
        }

        em::before {
          content: "Cillum deserunt dolore ea deserunt veniam nostrud dolore incididunt!";
        }
      }

      li:nth-child(3n + 2) {
        span::before {
          content: "Unlocking High-Performance PostgreSQL: Key Memory Optimizations";
        }

        em::before {
          content: "Exercitation consequat cupidatat anim Lorem qui ipsum culpa veniam reprehenderit elit non.";
        }
      }
    }

    .example-stan-news {
      .example-section-title::before {
        content: "Quoi de neuf chez Stan ?";
      }

      .example-stan-news-p::before {
        content: "Et bien Tempoquiz avance ! Bon, pas assez vite à mon goût comme vous pouvez vous en doutez, notamment parce que "
          "je prends du temps pour écrire ce petit texte alors qu’en vrai, tout le monde sait que c’est bien trop petit"
          "pour lire quoi que ce soit.";
      }
    }

    .example-footer {
      padding-bottom: 1rem;

      .example-footer-p::before {
        content: "C’est tout pour cette édition. Serez-vous toujours là dans deux semaines pour lire le prochain épisode ? Sinon, vous pouvez demander à votre agent de vous rappeler de regarder le stream de lundi prochain… en fait, non, venez plutôt suivre ma chaîne Twitch, ça sera plus simple.";
      }

      .example-footprint {
        font-size: 0.313rem;

        &::before {
          content: "lundi.dev est un projet éditorial porté par Stanislas Signoud (Signez) au sein de Paraphe Studio. Vous pouvez vous désabonner de cette newsletter en un clic sur ce lien.";
        }
      }
    }
  }.thank-you-for-your-subscription {
    background-color: var(--ld-soft-bg);
    padding-block: 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2rem;

    .check-icon {
      width: 3rem;
      height: 3rem;
    }

    h2 {
      margin: 0 0 0.75rem 0;
    }

    p {
      font-size: 1.15rem;
      margin: 0;
    }

    p ~ p {
      margin-top: 0.3rem;
    }

    a {
      color: var(--ld-tint-fg);
    }
  }

  .lundi-dev-explanation {
    h2 {
      font-size: 2.1rem;
      font-weight: 400;
      line-height: 1.35;
      max-width: 37rem;
      margin-top: 3.5rem;
      margin-bottom: 3.5rem;

      a {
        color: var(--ld-tint-fg);
        text-decoration: none;

        &:hover,
        &:focus-visible {
          text-decoration: underline;
        }
      }
    }
  }

  .two-kinds-of-lundi-dev {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    padding-left: 0;
    margin-left: 0;

    li {
      display: contents;
    }

    .one-monday {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      place-content: center start;
      padding-bottom: 1rem;
      column-gap: 1rem;
      row-gap: 0.35rem;
      text-wrap: balance;
      text-wrap: pretty;

      .twitch-logo,
      .mail-logo {
        grid-row: 1 / span 2;
        color: var(--ld-tint-fg);
      }

      > span {
        grid-column: 2;
        font-size: 1.25rem;

        strong {
          font-weight: 500;
        }
      }

      > small {
        grid-column: 2;
        font-size: 0.875rem;
      }
    }

    .next-opus del {
      color: var(--ld-tint-fg);
      text-decoration-color: var(--ld-tint-fg);
    }

    .main-link {
      display: grid;
      color: var(--ld-tint-fg);

      a {
        color: inherit;
      }

      > a,
      > button {
        display: grid;
        grid-template-columns: 1fr auto;
        color: inherit;
        font-family: inherit;
        background: unset;
        align-items: center;
        gap: 1rem;
        border: 1px solid var(--ld-tint-fg);
        box-shadow: 0 4px 0 0 var(--ld-tint-fg);
        font-size: 1.25rem;
        padding: 0.6rem 1rem 0.5rem 1rem;
        text-decoration: none;
        margin-bottom: -1px;
        transform: translateY(-1px);
        cursor: pointer;

        strong {
          font-weight: 500;
        }

        &:hover,
        &:focus-visible {
          transform: translateY(-3px);
          box-shadow: 0 6px 0 0 var(--ld-tint-fg);
        }

        &:active {
          transform: translateY(2px);
          box-shadow: 0 2px 0 0 var(--ld-tint-fg);
        }
      }

      small {
        margin-top: 0.5rem;
        font-size: 0.875rem;
        text-align: center;
      }
    }

    @media (max-width: 50rem) {
      grid-template-columns: 1fr;
      row-gap: 0rem;

      .main-link {
        margin-left: 3rem;
        margin-bottom: 3rem;

        > a {
          font-size: 1.15rem;
        }
      }
    }
  }

  .lundi-dev-explanation + .newsletter-explanation {
    margin-top: 4rem;
  }

  .newsletter-explanation {
    line-height: 1.35;
    padding-block: 4rem;

    @media (max-width: 50rem) {
      padding-block: 2rem;
    }

    .envelope-picture-wrapper {
      display: grid;
      margin-top: -4rem;
      margin-left: -0.8rem;
      margin-bottom: -5.5rem;
      color: var(--ld-tint-fg);

      svg {
        transform: rotate(-12deg);
        transform-origin: top left;
        grid-row: 1;
        grid-column: 1;
      }

      &::before,
      &::after {
        grid-row: 1;
        grid-column: 1;

        content: "";
        z-index: 1;
        display: block;
        margin-left: 3rem;
        margin-top: 2rem;
        width: 24rem;
        height: 6rem;
        border: 2px solid transparent;
        border-radius: 1rem;
      }

      &::before {
        background-color: var(--ld-background);
      }

      &::after {
        border: 2px solid var(--ld-tint-fg);

        mask-image: radial-gradient(at top left, white, black 50%, black);
        mask-clip: border-box;
        mask-mode: luminance;
      }

      @media (max-width: 50rem) {
        width: auto;
        margin-top: 0rem;

        svg {
          transform: none;
          margin-top: -2rem;
          align-self: start;
          justify-self: center;
        }

        &::before,
        &::after {
          margin-left: 0;
          border-radius: 0;
        }

        &::after {
          mask-image: radial-gradient(at top center, white, black 50%, black);
        }
      }
    }

    h2 {
      position: relative;
      z-index: 2;
      font-size: 1.625rem;
      font-weight: 400;
      padding-left: 4rem;

      small {
        display: block;
        font-size: 1.125rem;
        margin-bottom: 0.1rem;
      }

      @media (max-width: 50rem) {
        font-size: 1.5rem;
        padding-left: 0;
      }
    }

    .newsletter-content {
      display: grid;
      grid-template-columns: 14rem 7rem 1fr;
      padding-left: 4rem;
      margin-block: 3rem;
      font-size: 1.25rem;

      @media (max-width: 50rem) {
        --newsletter-example-slide-x: calc(14rem - 12dvw);
        margin-left: calc(-1 * var(--newsletter-example-slide-x));
        grid-template-columns: 14rem 0.5rem minmax(1fr, 21rem);
        font-size: 1.15rem;
      }

      .newsletter-content-description {
        display: contents;

        li {
          grid-column: 1 / span 3;
          align-self: center;

          display: grid;
          grid-template-columns: subgrid;

          &::before {
            content: "";
            display: block;
            background-color: var(--ld-tint-fg);
            width: 60%;
            height: 2px;
            justify-self: end;
            align-self: center;
            grid-row: 1;
            grid-column: 1 / span 2;
            margin-right: 0.6rem;
            margin-bottom: 0.2rem;
            box-shadow:
              0 -2px 0 var(--ld-background),
              0 -3px 0 var(--ld-background),
              0 2px 0 var(--ld-background),
              0 3px 0 var(--ld-background);
            z-index: 1;
          }

          &::after {
            content: "";
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 6px;
            margin-bottom: 0.2rem;
            background-color: var(--ld-tint-fg);
            grid-column: 1 / span 2;
            grid-row: 1;
            align-self: center;
            justify-self: end;
            margin-right: calc(60% + 0.6rem);
            box-shadow: 0 0 0 3px var(--ld-background);
          }

          strong,
          p {
            grid-column: 3;
          }

          @media (max-width: 50rem) {
            grid-template-columns: 8rem 1.5rem 1fr;
            margin-left: 6rem;
          }
        }

        .edito-description {
          grid-row: 2;
        }

        .tabs-description {
          grid-row: 3;
        }

        .changelog-description {
          grid-row: 4;
        }

        .stan-news-description {
          grid-row: 5 / span 2;
        }

        strong {
          font-weight: 500;
          margin-bottom: 0.25rem;
        }

        p {
          margin-top: 0.25rem;
        }
      }
    }

    > p {
      font-size: 1.25rem;
      padding-left: 4rem;
      padding-right: 6rem;

      a {
        color: var(--ld-tint-fg);
        text-decoration: none;

        &:hover,
        &:focus-visible {
          text-decoration: underline;
        }
      }

      @media (max-width: 50rem) {
        font-size: 1.15rem;
        padding-inline: 0;
      }
    }
  }

  .stream-explanation {
    padding-block: 4rem;
    margin-bottom: 2rem;
    line-height: 1.35;

    .stream-picture-wrapper {
      display: grid;
      margin-top: -4rem;
      margin-left: -0.8rem;
      margin-bottom: -5.5rem;
      color: var(--ld-tint-fg);

      svg {
        transform: rotate(-12deg);
        transform-origin: top left;
        grid-row: 1;
        grid-column: 1;
      }

      &::before,
      &::after {
        grid-row: 1;
        grid-column: 1;

        content: "";
        z-index: 1;
        display: block;
        margin-left: 3rem;
        margin-top: 2rem;
        width: 24rem;
        height: 6rem;
        border: 2px solid transparent;
        border-radius: 1rem;
      }

      &::before {
        background-color: var(--ld-background);
      }

      &::after {
        border: 2px solid var(--ld-tint-fg);

        mask-image: radial-gradient(at top left, white, black 50%, black);
        mask-clip: border-box;
        mask-mode: luminance;
      }

      @media (max-width: 50rem) {
        width: auto;
        margin-top: 0rem;

        svg {
          transform: none;
          margin-top: -1.5rem;
          align-self: start;
          justify-self: center;
        }

        &::before,
        &::after {
          margin-left: 0;
          border-radius: 0;
        }

        &::after {
          mask-image: radial-gradient(at top center, white, black 50%, black);
        }
      }
    }

    h2 {
      font-size: 1.625rem;
      font-weight: 400;
      padding-left: 4rem;
      position: relative;
      z-index: 2;

      small {
        display: block;
        font-size: 1.125rem;
        margin-bottom: 0.1rem;
      }

      @media (max-width: 50rem) {
        font-size: 1.5rem;
        padding-inline: 0;
      }
    }

    > p {
      font-size: 1.25rem;
      padding-left: 4rem;
      padding-right: 6rem;

      @media (max-width: 50rem) {
        font-size: 1.15rem;
        padding-inline: 0;
      }
    }

    .form-footprint {
      color: var(--ld-tint-fg);
      font-size: 0.75rem;

      a {
        color: inherit;
      }
    }

    > .form-footprint {
      font-size: 0.75rem;
      margin: 0 1.125rem 0.075rem;
      line-height: 1.35;
    }
  }

  .big-twitch-link {
    display: grid;
    width: max-content;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.8rem;
    color: var(--ld-tint-fg);
    background-color: var(--ld-soft-bg);
    line-height: 1.35;
    padding: 0.625rem 1rem 0.563rem;
    border-radius: 1rem;

    .twitch-logo {
      width: 1.188rem;
      height: 1.353rem;
    }

    strong {
      font-weight: 500;
    }
  }

  .newsletter-dialog {
    border: 2px solid var(--ld-tint-fg);
    box-shadow: 0 8px 0 0 var(--ld-tint-fg);
    width: 60rem;
    padding: 1rem 4rem 2rem;
    overflow: visible;
    background-color: var(--ld-background);

    .newsletter-form {
      margin: 0;
    }

    .close-dialog {
      max-width: auto;
      margin-left: auto;
      margin-top: -2.25rem;
      margin-bottom: 2rem;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 0.4rem;
      border: 1px solid var(--ld-tint-fg);
      padding: 0.4rem 0.6rem 0.4rem 0.875rem;
      font-size: 1rem;
      line-height: 1.35;
      font-family: inherit;
      height: max-content;
      color: var(--ld-tint-fg);
      background-color: inherit;
      box-shadow: 0 3px 0 0 var(--ld-tint-fg);

      &:not(:disabled) {
        cursor: pointer;

        transform: translateY(-1px);

        &:hover,
        &:focus-visible {
          transform: translateY(-2px);
          box-shadow: 0 4px 0 0 var(--ld-tint-fg);
        }

        &:active {
          transform: translateY(2px);
          box-shadow: 0 1px 0 0 var(--ld-tint-fg);
        }
      }
    }

    .close-icon {
      width: 1.25rem;
      height: 1.25rem;
    }

    header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      margin-bottom: 0.75rem;
    }

    @media (max-width: 50rem) {
      width: 100dvw;
      max-width: unset;
      margin-inline: 0;
      border-inline-width: 0;
      padding: 1rem 1rem 2rem;
    }
  }