/* Abécédaire : finition ordinateur uniquement. */
@media (min-width: 761px) {
  html body.alphabet-page .alphabet-main {
    position: relative !important;
    padding: 64px 20px 90px !important;
    color: #f7f1f6 !important;
    background:
      radial-gradient(circle at 8% 10%, rgba(255, 101, 173, .17), transparent 496px),
      radial-gradient(circle at 92% 42%, rgba(142, 79, 240, .14), transparent 544px),
      linear-gradient(180deg, #07152f 0%, #11183d 48%, #28163c 100%) !important;
  }

  html body.alphabet-page .alphabet-main::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 12, 34, .9), transparent);
  }

  html body.alphabet-page .alphabet-shell {
    position: relative !important;
  }

  html body.alphabet-page .alphabet-intro {
    width: min(900px, 100%) !important;
    margin: 0 auto 32px !important;
    padding: 34px 42px !important;
    border: 1px solid rgba(255, 118, 183, .3) !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgba(21, 35, 75, .94), rgba(43, 23, 63, .94)) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .27) !important;
  }

  html body.alphabet-page .alphabet-intro h2 {
    margin: 9px 0 14px !important;
    color: #fff8f4 !important;
    font-family: var(--police-titres) !important;
    font-size: 49.6px !important;
    line-height: 1.06 !important;
  }

  html body.alphabet-page .alphabet-intro p:last-child {
    margin: 0 !important;
    color: #e7deea !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  html body.alphabet-page .letter-jump {
    top: 94px !important;
    margin-bottom: 30px !important;
    padding: 14px !important;
    border-color: rgba(215, 173, 88, .58) !important;
    background: rgba(6, 18, 47, .97) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35) !important;
  }

  html body.alphabet-page .letter-jump a {
    color: #fff8f4 !important;
    background: rgba(255, 255, 255, .045) !important;
  }

  html body.alphabet-page .letter-jump a:hover,
  html body.alphabet-page .letter-jump a:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, #ed3e8d, #8e4ff0) !important;
  }

  html body.alphabet-page .alphabet-grid {
    gap: 18px !important;
  }

  html body.alphabet-page .letter-card {
    scroll-margin-top: 205px !important;
    border-color: rgba(255, 118, 183, .2) !important;
    background: linear-gradient(145deg, rgba(24, 39, 80, .96), rgba(43, 24, 63, .96)) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24) !important;
  }

  html body.alphabet-page .letter-card:target {
    border-color: #ff76b7 !important;
    box-shadow: 0 0 0 3px rgba(255, 118, 183, .18), 0 21px 48px rgba(0, 0, 0, .34) !important;
  }

  html body.alphabet-page .letter-card:hover {
    border-color: rgba(215, 173, 88, .72) !important;
    box-shadow: 0 21px 48px rgba(0, 0, 0, .34) !important;
  }

  html body.alphabet-page .letter-mark {
    background: linear-gradient(145deg, #253c74, #843266) !important;
  }

  html body.alphabet-page .letter-copy p {
    color: #f1eaf2 !important;
  }

  html body.alphabet-page .letter-copy strong {
    color: #ff76b7 !important;
  }

  html body.alphabet-page .copy-letter {
    border-color: rgba(255, 118, 183, .34) !important;
    color: #ff91c4 !important;
    background: rgba(255, 101, 173, .1) !important;
  }

  html body.alphabet-page .alphabet-share {
    border: 1px solid rgba(215, 173, 88, .35) !important;
  }

  html body.alphabet-page .discover-more a {
    border: 1px solid rgba(255, 118, 183, .22) !important;
    color: #fff8f4 !important;
    background: linear-gradient(145deg, #19294f, #2b193f) !important;
  }

  html body.alphabet-page .discover-more a:hover {
    border-color: rgba(215, 173, 88, .65) !important;
    color: #ff91c4 !important;
  }
}