@layer rebase {
  html,
  body {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.5;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  :focus-visible {
    outline-offset: 2px;
  }

  :target {
    scroll-margin: 3rlh;
  }

  [hidden] {
    display: none;
  }

  [aria-disabled='true' i],
  [disabled] {
    cursor: not-allowed;
  }

  [disabled],
  label:has(input[disabled]) {
    opacity: 0.5;

    [disabled] {
      opacity: 1;
    }
  }

  :where(a[href], area, button, [role='button'], input, label, select, summary, textarea, [tabindex]:not([tabindex*='-'])) {
    cursor: pointer;
    touch-action: manipulation;
  }

  audio,
  canvas,
  progress,
  video,
  iframe {
    display: inline-block;
    vertical-align: baseline;
  }

  audio:not([controls]) {
    display: none;
    block-size: 0;
  }

  figure,
  img {
    display: block;
  }

  figure {
    inline-size: fit-content;
    margin: 0;
  }

  figcaption {
    contain: inline-size;
  }

  img,
  picture {
    border: 0;
    max-inline-size: 100%;
  }

  :is(h1, h2, h3, h4, h5) {
    margin: 0;
    font-weight: normal;
    line-height: 1.2;
  }

  p,
  li {
    text-wrap: pretty;
  }

  a {
    background-color: transparent;
    text-decoration-skip-ink: auto;
    text-underline-offset: 2px;
  }

  abbr {
    text-decoration: none;
    border-block-end: 0;
  }

  abbr[title] {
    border-block-end: 1px dotted;
  }

  b,
  strong {
    font-weight: bold;
  }

  dfn {
    font-style: italic;
  }

  hr {
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    block-size: 0;
    overflow: visible;
    margin-block: 2.5rem;
    box-sizing: content-box;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup {
    inset-block-start: -0.5em;
    margin-inline-start: 0.25em;
  }

  sub {
    bottom: -0.25em;
  }

  svg:not(:root) {
    overflow: hidden;
    fill: currentColor;
  }

  pre {
    overflow: auto;
  }

  code,
  kbd,
  pre,
  samp {
    font-family: monospace;
    font-size: 1em;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    color: inherit;
    font: inherit;
    margin: 0;
  }

  button {
    overflow: visible;
    user-select: auto;
  }

  button,
  select {
    text-transform: none;
  }

  button[disabled],
  html input[disabled] {
    cursor: default;
  }

  button::-moz-focus-inner,
  input::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  input {
    line-height: normal;
  }

  input[type='checkbox'],
  input[type='radio'] {
    box-sizing: border-box;
    padding: 0;
  }

  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    block-size: auto;
  }

  input[type='search'] {
    appearance: textfield;
    -webkit-appearance: textfield;
    box-sizing: content-box;
  }

  input[type='search']::-webkit-search-cancel-button,
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  }

  legend {
    border: 0;
    padding: 0;
  }

  textarea {
    max-inline-size: 100%;
    overflow: auto;
  }

  optgroup {
    font-weight: bold;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  td,
  th {
    padding: 0;
  }

  [tabindex='-1']:focus {
    outline: none !important;
  }

  [role='button'] {
    cursor: pointer;
  }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }

    html {
      interpolate-size: allow-keywords;

      &:focus-within {
        scroll-behavior: smooth;
      }
    }

    :focus-visible {
      transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
    }

    :where(:not(:active)):focus-visible {
      transition-duration: 0.25s;
    }
  }
}

@layer config {
  :root {
    color-scheme: light dark;

    --base-font-size: 1rem;
    --base-line-height: 1.5;

    --font-family-sans-serif:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-family-serif: Georgia, 'Times New Roman', Times, serif;
    --font-family-monospace: ui-monospace, SFMono-Regular, monospace;

    --body-color: #000;
    --body-bg: #fff;

    --gray-1: oklch(0.95 0 0);
    --gray-2: oklch(0.75 0 0);
    --gray-3: oklch(0.65 0 0);
    --gray-4: oklch(0.5 0 0);
    --gray-5: oklch(0.4 0 0);

    --red: #d52125;
    --pink: #aa00aa;
    --paleyellow: #fcedc7;
    --dc-green: #88c200;
    --dc-green2: #689400;

    --post-bg: var(--gray-1);
    --alternate: var(--paleyellow);
    --link: var(--red);
    --link2: var(--pink);
    --credits-bg: var(--gray-1);
    --blockquote: var(--paleyellow);
    --field-border: var(--gray-4);

    --bg-filter: oklch(from var(--body-bg) l c h / 0.4);
    --banner-gradient: linear-gradient(
      to right,
      oklch(from var(--body-bg) l c h / 0.5),
      oklch(from var(--body-bg) l c h / 0.2)
    );

    /* posts without cat or user class nor attribute */
    --post-footer-bg: #ede7e3;
    --default-post-header-bg: oklch(from var(--post-footer-bg) calc(l - 0.07) c h);

    --header-img: url(index.php?tf=img/header/audierne.jpg);
  }
}

@layer common {
  html {
    font-family: var(--font-family-sans-serif);
    font-size: 1rem;
    line-height: var(--base-line-height);
    background-color: var(--body-bg);
    color: var(--body-color);
  }

  body {
    font-size: var(--base-font-size);

    @media screen and (width > 60em) {
      font-size: 1.125rem;
    }
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  /* entêtes de page (archive, category, page) */

  #content-info {
    background: var(--bg-filter);
    margin-block-end: 1.5rem;
    padding-block-end: 0.5rem;
    text-align: center;

    p {
      font-size: clamp(1.125rem, 2vw, 1.25rem);
      margin: 0 0 0.25rem;
    }

    h2 {
      font-family: var(--font-family-serif);
      font-style: italic;
      font-size: clamp(1.5rem, 3vw, 2rem);
      padding-block: 0.25lh;

      &:only-child {
        padding-block: 0.5lh;
      }
    }

    ul {
      display: flex;
      list-style-type: none;
      margin-inline: 0;
      padding-inline: 0;
      justify-content: center;
      gap: 0.5lh 2em;
    }

    .feeds {
      margin: 0;
      gap: 0.5lh 2em;

      a {
        border: none;
      }
    }
  }

  /* séparateurs */

  .chapter-separator {
    overflow: hidden;
    margin-block: 0;
    padding-block: 1em;
    text-align: center;
  }

  .chapter-title {
    overflow: hidden;
    font-weight: normal;
  }

  .chapter-title::before,
  .chapter-title::after {
    position: relative;
    display: inline-block;
    inline-size: 50%;
    block-size: 1px;
    background-color: var(--body-color);
    vertical-align: middle;
    content: '';
  }

  .chapter-title:before {
    right: 1em;
    margin-inline-start: -50%;
  }

  .chapter-title::after {
    left: 1em;
    margin-inline-end: -50%;
  }

  .dc-home .chapter-title {
    margin-block-end: 2rem;
    font-size: 1.25rem;
  }

  /* liens génériques */

  a {
    color: var(--link);
    text-decoration: none;
    transition: 0.3s;

    &:link,
    &:visited {
      border-block-end: 1px solid var(--gray-4);
    }

    &:visited {
      border-block-end-style: dotted;
    }

    &:hover,
    &:active {
      border-block-end: 1px solid var(--link);
    }

    &:focus {
      color: var(--body-bg);
      background-color: var(--link);
    }
  }

  /*  icones */

  .icon {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    margin-block-start: -0.15em;
    margin-inline-end: 0.5rem;
    vertical-align: middle;

    fill: currentColor;
  }

  .icon-rss,
  .icon-dotclear {
    inline-size: 1.25em;
    block-size: 1.25em;
    margin-inline-end: 0.4rem;
  }

  .icon-dotclear {
    margin-inline-start: 0.125rem;
    fill: var(--dc-green);
  }

  .icon-search {
    inline-size: 1.5em;
    block-size: 1.5em;
  }

  .icon-bookmark {
    inline-size: 1.5em;
    block-size: 1.5em;
    aspect-ratio: 1/1;
    margin: 0;
  }

  /*  boutons et formulaires */

  .buttons {
    font-size: 1.25rem;
    text-align: end;
  }

  button,
  .button {
    display: inline-block;
    margin: 0 2px;
    padding: 0.25rem 1rem;
    color: currentColor;
    background-color: var(--post-bg);
    border: 1px solid var(--field-border);
    border-radius: 0.25rem;
    box-shadow: 3px 3px 4px 0 oklch(0 0 0 / 0.15);
    font-size: 1em;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    transition: all 300ms ease;

    user-select: none;

    &:hover {
      transform: scale(1.05);
      border-color: currentColor;
    }

    &:active {
      transform: scale(0.97);
    }
  }

  .submit:not(.widget-footer *) {
    color: var(--body-bg);
    background-color: var(--link2);
    border-color: color-mix(in srgb, oklch(0 0 0) / 0.05, var(--link2));

    &:focus {
      background-color: var(--body-color);
    }
  }

  .preview {
    margin-inline-end: 1rem;
    border-color: var(--link2);
  }

  input,
  textarea {
    display: inline-block; /*  for safari */

    padding: 0.5rem;
    border: 1px solid var(--field-border);

    &:focus {
      border-color: var(--link2);
      box-shadow: 0 0 0 2px rgba(from(var(--link2)) r g b 0.25);
    }
  }

  q::before,
  cite::before {
    content: open-quote;
  }
  q::after,
  cite::after {
    content: close-quote;
  }
  :lang(en),
  article:lang(en) {
    quotes: '“ ' ' ”' '‘' '’';
  }
  :lang(fr),
  article:lang(fr) {
    quotes: '« ' ' »' '‘' '’';
  }
  :lang(es),
  article:lang(es) {
    quotes: '“' '”' '‘' '’';
  }
  :lang(de),
  article:lang(de) {
    quotes: '» ' ' «' '‘' '’';
  }
  :lang(en) > q:not(:lang),
  :lang(en) > cite:not(:lang) {
    quotes: '“ ' ' ”' '‘' '’';
  }
  :lang(fr) > q:not(:lang),
  :lang(fr) > cite:not(:lang) {
    quotes: '« ' ' »' '‘' '’';
  }
  :lang(es) > q:not(:lang),
  :lang(es) > cite:not(:lang) {
    quotes: '“' '”' '‘' '’';
  }
  :lang(de) > q:not(:lang),
  :lang(de) > cite:not(:lang) {
    quotes: '» ' ' «' '‘' '’';
  }

  blockquote {
    background-color: var(--blockquote);
    padding: 0.25em 1em;
  }
}

@layer layout {
  #page {
    max-inline-size: 80em;
    margin: 0 auto;
    padding: 0;

    @media screen and (width > 30em) {
      padding: 0 0.5em;
    }
  }

  #wrapper {
    inline-size: 100%;
    margin: 0 auto;
    padding-inline: 0.25rem;

    @media screen and (width > 40em) {
      min-block-size: 60vh;
    }

    @media screen and (width > 80em) {
      padding-inline: 0.5rem;
    }
  }

  .header {
    min-height: 18dvw;

    @media screen and (width <= 24rem) {
      min-height: 38dvw;
    }
  }

  .banner {
    padding: 0.825em 0.5rem 0.125rem;

    @media screen and (width > 40em) {
      padding: 0.825em 2rem 0.125rem;
    }
  }

  .dc-home-first {
    .header {
      block-size: 42dvw;
    }
  }

  .dc-home-static {
    .header {
      block-size: 33dvw;
    }
  }

  /* header, banner, background & filters */
  body {
    background-image:
      linear-gradient(in oklch to bottom, oklch(from var(--body-bg) l c h / 0.7), transparent), var(--header-img);
    background-repeat: no-repeat;
    background-size: contain;
  }

  .dc-home-first,
  .dc-home-static {
    background-image: var(--header-img);

    .banner {
      background: var(--banner-gradient);
    }
  }
}

@layer header {
  .header {
    a {
      &:link,
      &:visited {
        border-block-end: 1px solid transparent;
        color: var(--body-color);
      }

      &:hover,
      &:active,
      &:visited:hover,
      &:visited:active {
        border-block-end-color: var(--link);
      }

      &:focus {
        background-color: var(--link);
        color: #fff;
      }
    }
  }

  /*  lien d'accès rapide */

  .skip-links {
    margin: 0;
    padding-inline: 0 0.5rem;
    list-style: none;
    font-size: 0.875rem;
    text-align: end;

    > li {
      display: inline-block;

      &:not(:last-child) {
        margin-inline-end: 0;
      }
    }

    a {
      padding: 0 0.125rem;
    }

    @media screen and (width <= 23em) {
      padding-right: 0.25em;
      font-size: 0.8rem;
    }
  }

  .dc-home-first {
    .skip-links {
      > li:first-child {
        margin-inline-end: -0.25rem;
      }
    }
  }

  .site-title {
    margin: 0;
    line-height: 1.25;
    font-size: 1.75rem;
    font-family: var(--font-family-serif);
    font-weight: normal;

    @media screen and (width > 23em) {
      font-size: 2rem;
    }

    @media screen and (width > 60em) {
      font-size: 3rem;
    }
  }

  .site-baseline {
    margin-block-start: 0;

    @media screen and (width < 24em) {
      display: none;
    }

    @media screen and (width > 60em) {
      font-size: 1.5rem;
    }
  }
}

@layer footer {
  .footer {
    overflow: hidden;
    margin-block-start: 4rem;

    a {
      &:link,
      &:visited {
        border-block-end: 1px solid transparent;
        color: var(--body-color);
      }

      &:hover,
      &:active,
      &:visited:hover,
      &:visited:active {
        border-block-end-color: var(--link);
      }

      &:focus {
        background-color: var(--link);
        color: var(--body-bg);
      }
    }

    ul {
      padding-left: 0;
      list-style: none;
      margin: 0 auto;
    }

    h2 {
      margin: 0 0 0.5rem;
      font-size: 1.5rem;
    }

    h3 {
      margin: 1rem 0 0;
      font-family: var(--font-family-serif);
      font-size: 1.5rem;
      font-weight: normal;
    }
  }

  .footer-top {
    padding: 1rem 0.5rem;
    background: var(--body-bg) var(--header-img) center no-repeat;
    background-size: cover;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;

    @media screen and (width > 30em) {
      padding: 1rem;
    }

    @media screen and (width > 60em) {
      margin: 1rem 3rem;
      padding: 1rem 2rem;
    }

    .container {
      padding: 0.5rem;
      background-color: var(--bg-filter);
    }

    p {
      margin-block-start: 0;
    }

    .simple-menu {
      display: flex;
      flex-wrap: wrap;
      gap: 2em;
      justify-content: center;
      list-style: none;
      text-transform: uppercase;
    }
  }

  .footer-search {
    max-inline-size: 40em;
    margin: 2rem 0.5em 0;
    line-height: 2;

    @media screen and (width > 60em) {
      margin: 3rem auto 0;
    }

    h2.search-title {
      margin-block-end: 0.5rem;
      font-size: 1.125rem;
    }

    .search-form .input-search-group {
      display: flex;
      margin: 0;

      input,
      button {
        border: 1px solid rgba(147, 128, 108, 0.5);
      }

      input[type='search'] {
        display: block;
        padding: 0.5em;
        flex: 1;
        background-color: var(--body-bg);
      }

      .button {
        display: block;
        margin-inline-start: 0;
        inline-size: 5em;
        border-radius: 0 0.25em 0.25em 0;
      }
    }
  }

  .footer-bottom {
    inline-size: 100%;
    margin-block: 0.5lh 2lh;
    padding: 0.5rem;
    line-height: 1.25;

    @media screen and (width > 40em) {
      display: flex;
      flex-wrap: wrap;
      gap: 0 3%;
      justify-content: space-between;
    }

    #search {
      display: none;
    }

    .widget,
    .widget-footer {
      inline-size: 100%;

      @media screen and (40em < width < 60em) {
        inline-size: clamp(17em, 47%, 100%);
      }

      @media screen and (width >= 60em) {
        inline-size: clamp(17em, 31%, 100%);
      }
    }

    .widget:not(:has(summary)) {
      padding: 0.5lh 0.5em;
      margin-block-start: 0.5lh;
      border: 1px solid var(--gray-4);
    }

    .widget-footer {
      padding-block: 0.5rem;
      border-block-end: 1px solid var(--gray-4);

      h4 {
        font-size: 1em;
        font-weight: bold;
        margin-block: 1em;
      }

      & > summary {
        list-style-type: none /* pour Safari */;
        position: relative;
        anchor-name: --summary;
        margin: 1rem 0 0;
        font-family: var(--font-family-serif);
        font-size: 1.25rem;
        font-weight: normal;
        padding-inline-start: 2rem;

        &:hover {
          cursor: pointer;
        }

        &::marker {
          content: '';
        }

        &::before,
        &::after {
          content: '';
          border-block-start: 3px solid;
          block-size: 0;
          inline-size: 1rem;

          inset-block-start: 50%;
          inset-inline-start: 0;

          position: absolute;
          position-anchor: --summary;
        }

        &::after {
          transform: rotate(90deg);
          transform-origin: 50%;
        }
      }

      details summary {
        margin-block-end: 0.5lh;

        &:hover {
          cursor: pointer;
        }
      }

      details details summary {
        margin-block-end: 0.5lh;

        &::marker {
          content: normal;
        }
      }

      ul {
        margin: 0;
        padding: 0 0 0 1em;

        li:not(:first-child) {
          padding-block-start: 0.5em;
        }

        li ul {
          padding-block-start: 0.5em;
          list-style-type: square;

          li::marker {
            color: var(--link2);
          }
        }
      }
    }

    .widget-footer[open] {
      margin-block-end: 2rem;
      padding-block-end: 1.5rem;

      & > summary {
        margin-block-end: 1rem;
        padding-block-end: 0.25rem;
        border-block-end: 1px solid var(--gray-3);
      }

      & > summary::after {
        transform: rotate(0deg);
      }
    }
  }

  .feeds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5lh 2rem;
    justify-content: center;
    padding: 0.5lh;

    li a {
      white-space: pre;
    }
  }

  .footer-custom {
    margin-block: 2rem 0;
    padding: 0.5rem;
    background-color: var(--post-bg);
    border-block-start: 1px solid var(--gray-3);
    font-family: var(--font-family-serif);
    text-align: center;

    .syndicate {
      display: none;
    }

    .widget {
      max-inline-size: 40em;
      margin-inline: auto;
    }

    a:link,
    a:visited {
      border-block-end-color: var(--gray-3);
    }
  }

  .footer-credits {
    margin: 0;
    padding: 0.5rem;
    background-color: var(--post-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    a:link,
    a:visited {
      border-block-end-color: var(--gray-3);
    }

    > p {
      margin: 0;
    }

    @media screen and (width > 30em) {
      flex-direction: row;
      padding-block-end: 3.5em;

      justify-content: space-between;

      .legal {
        text-align: end;
      }
    }

    @media screen and (width > 60em) {
      padding: 1rem;
    }
  }
}

@layer navigations {
  #gotop {
    margin: 0;
    text-align: center;
  }

  #breadcrumb {
    display: none;
  }

  .pagination {
    margin-block-end: 1.5rem;
    padding: 0.25rem 1rem;
    border-block: 1px solid var(--gray-5);

    ul {
      padding-left: 0;
      list-style: none;
      margin: 0;

      a {
        &:link,
        &:visited {
          border-block-end: 1px solid transparent;
          color: var(--body-color);
        }

        &:hover,
        &:active,
        &:visited:hover,
        &:visited:active {
          border-block-end-color: var(--link);
        }

        &:focus {
          background-color: var(--link);
          color: #fff;
        }
      }

      > li {
        text-align: center;
      }

      @media screen and (width > 40em) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          flex: 1;
        }

        .current-page {
          text-align: center;
        }

        .prev {
          text-align: start;
        }

        .next {
          text-align: end;
        }
      }
    }

    a {
      display: block;
      padding: 0.125em;
    }

    .current-page {
      padding: 0.125rem;
    }
  }

  .dc-home .pagination {
    margin-block-start: 1.5rem;

    @media screen and (width > 60em) {
      margin-block-start: 3rem;
    }
  }

  .dc-home-static .pagination {
    text-align: center;

    a {
      display: unset;
      font-weight: bold;
      &:link,
      &:visited {
        color: currentColor;
      }
    }
  }

  .dc-archive-month .pagination,
  .dc-post .pagination {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    a {
      font-weight: 600;
    }
  }

  .dc-tag .pagination {
    text-align: center;
    margin-block-end: 3em;

    a {
      border-block-end: none;

      &:hover,
      &:focus {
        background-color: var(--link);
        color: white;
      }
    }
  }

  .dc-archive-month .pagination {
    margin-block: 2lh;
  }
}

/* Post and feedback */
@layer post {
  .post {
    background-color: var(--post-bg);

    h3,
    h4 {
      font-family: var(--font-family-serif);
      font-weight: 500;
    }

    h3 {
      font-size: 1.75em;
    }

    h4 {
      font-size: 1.25em;
    }

    h5 {
      font-family: var(--font-family-serif);
      font-size: 1em;
      font-weight: 600;
    }

    :not(pre) > code {
      background-color: var(--body-bg);
      padding: 2px;
      border: 1px solid var(--gray-3);
    }

    q,
    quote {
      font-family: var(--font-family-serif);
      font-style: italic;
    }
  }

  .simple,
  .post-feedback {
    max-inline-size: 50em;
    margin: 2rem auto;

    @media screen and (width > 40em) {
      margin-block-start: 4rem;
    }
  }

  .simple {
    box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.1);

    :is(h3, h4, h5) {
      margin-block: 1.5lh 0.5lh;
    }

    .post-content h2 {
      font-size: 2em;
      font-family: var(--font-family-serif);
      font-style: italic;
      text-align: center;
      margin-block-start: 3rem;
      text-wrap: balance;
    }

    .post-content {
      /* petits séparateurs (trois astérisques centrés) */
      hr {
        display: block;
        clear: both;
        block-size: 0;
        padding: 0 0 1.5em;
        border: 0;
        font-family: var(--font-family-sans-serif);
        text-align: center;
        font-size: 1.25rem;
        line-height: 1;
      }

      hr::after {
        content: '\273D \273D \273D';
        block-size: 0;
        letter-spacing: 1em;
        color: var(--gray-5);
      }

      pre,
      code {
        font-family: var(--font-family-monospace);
        font-size: 0.875em;
      }

      pre {
        padding: 0.5em 0;
      }

      pre:has(code) {
        background-color: var(--body-bg);
        padding-inline: 0.5em;
      }

      details {
        margin-block: 0.25lh;

        &[open] {
          border-block-end: 1px solid var(--gray-3);
          margin-block-end: 0.5lh;
        }

        &[open] summary {
          font-weight: bold;
        }

        &:after {
          content: '';
          display: block;
          clear: both;
        }

        summary::marker {
          font-size: 1.125em;
        }
      }

      aside {
        border: 1px solid var(--gray-2);
        border-inline-start: clamp(1rem, 5vw, 5rem) solid var(--gray-2);
        padding-inline: clamp(1rem, 2.5vw, 2rem);
      }
    }

    .footnotes {
      margin-block-start: 2.5em;
      padding-block-start: 1em;
      border-block-start: 1px dashed var(--gray-4);
      font-size: 0.925rem;

      h4 {
        font-size: 1.125em;
        font-family: var(--font-family-sans-serif);
        font-weight: 500;
      }
    }

    .post-attachments-list {
      list-style-type: none;
      line-height: 2;
      margin-inline: 0;
    }
  }

  .post-full {
    /*  aka post-excerpt + post-content */

    padding: 0 0.5rem 1rem;

    figure + p {
      margin-block-start: 0;
    }

    @media screen and (width > 40em) {
      padding: 0 7% 2em;
    }

    img {
      box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.1);
      padding: 2%;
      background: white;
    }

    figcaption {
      font-family: var(--font-family-serif);
      font-style: italic;
      font-size: 0.925em;
      background-color: transparent;
      padding: 0.25em 2.5%;
      border-block-start: 0;
    }

    figure.media-center {
      figcaption {
        margin-block-end: 1lh;
      }
    }

    figure.media-left,
    figure.media-right {
      display: table;
      margin-block: 0.5em 1em;

      figcaption {
        display: table-caption;
        caption-side: bottom;
        word-break: break-word;
      }
    }

    .media-left {
      margin-inline: 0 1em;
    }

    .media-right {
      margin-inline: 1em 0;
    }

    .media-left,
    .media-right {
      margin-block-start: 0.5em;
    }

    p:has(.media-left) {
      @media screen and (width < 30em) {
        &::after {
          display: block;
          content: '';
          clear: both;
        }
      }
    }
  }

  /*  entête */

  .post-banner {
    @media screen and (width > 42em) {
      margin-block-end: 3rem;
    }

    @media screen and (width > 60em) {
      margin-block-end: 5rem;
    }

    .post-header {
      inline-size: 100%;
      font-size: 1.125rem;
      text-align: center;
      margin-block-end: 4rem;
      padding: 0.5em 1em;
      display: flex;
      justify-content: space-between;

      @media screen and (width <= 30em) {
        margin-block-end: 1rem;
      }

      @media screen and (width > 30em) {
        padding: 0.5em 1.5em;
        gap: 0.25em;
      }

      .category {
        border: 1px solid;
        border-color: currentColor;
        margin-inline-start: 0.5em;
        padding: 0.25em 0.5em;
        font-size: 0.925em;
        white-space: nowrap;
      }

      .post-permalink {
        padding: 0.125rem;
      }

      .category,
      .post-permalink {
        border-radius: 0.5em;

        a:focus-visible {
          outline: none;
        }
      }

      p {
        margin-block: 0.25lh;
        padding-block: 0.125lh;
      }
    }

    .post-title {
      margin-block: 1rem;
      padding: 0 1rem;
      line-height: 1.25;
      text-align: center;
      font-family: var(--font-family-serif);
      font-size: 2em;
      font-weight: normal;
      font-style: italic;
      text-wrap: balance;

      @media screen and (width <= 42em) {
        font-size: 1.75rem;
        margin-block: 2rem 1rem;
        padding: 0 0.5rem;
      }
    }
  }

  .gallery {
    inline-size: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, clamp(250px, 340px, 100%));
    justify-content: center;
    gap: 2rem 2%;

    &::after {
      content: '';
      display: block;
      clear: both;
    }
  }

  .post-footer {
    clear: both;
    display: flex;
    padding: 0.125lh 2em;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--post-footer-bg);

    .post-tags-list {
      font-size: 1rem;
      display: inline-flex;
      gap: 0.25lh 1em;
      list-style-type: none;
      margin-inline: 0;
      padding: 0;

      a:link,
      a:visited {
        border-block-end-color: transparent;
      }
    }
  }

  /*  spécialité distribution en cartes */
  /*  layout */

  .posts-group {
    inline-size: 100%;
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 3em 3.3%;
    margin-block-end: 3em;

    @media screen and (width <= 40em) {
      flex-direction: column;
    }

    .post {
      position: relative; /*  pour permettre le clic sur toute la zone */
      border-radius: 0.25rem;
      box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.3);
      transition: box-shadow 0.2s ease-in-out;
      overflow-wrap: break-word;

      @media screen and (width > 40em) and (width <= 80em) {
        flex: 0 48.25%;
        overflow: hidden;
      }

      @media screen and (width > 80em) {
        flex: 0 31%;
        overflow: hidden;
      }

      &:hover {
        box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.5);
      }
    }

    .post-header {
      padding: 0.5em 1em 0.5em 1.5em;
      border-radius: 0.25rem 0.25rem 0 0;
      min-block-size: 3lh;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .post-title {
      font-family: var(--font-family-sans-serif);
      padding-block-start: 0.125lh;
      font-size: 1.25em;
      font-weight: 500;
      flex: 1;
    }

    .post-date {
      font-size: 0.875em;
      font-weight: 500;
      margin: 0.25em 0 0 0.5em;
      padding: 2px 0.5em;
      border-radius: 0.25em;
      border: 1px solid;
      inline-size: fit-content;
      block-size: fit-content;
      order: 2;
      text-align: end;
    }

    .post-content {
      padding: 0.25em 1em;
      block-size: auto;

      a {
        &:link,
        &:visited {
          border-block-end: 1px solid transparent;
          color: var(--body-color);
        }
      }

      @media screen and (width > 30em) {
        padding: 0.25em 1.5em;
      }

      a {
        font-weight: 600;
      }

      .arr {
        border-radius: 0.5em;
        padding: 0.125rem 0.5rem;
      }
    }

    .post-content a::after {
      display: block;
      position: absolute;
      content: '';
      inset-block: 0;
      inset-inline: 0;
    }

    .post-content:has(.post-icon-box) {
      display: grid;
      inline-size: 100%;
      block-size: 10lh;
      align-self: center;
      grid-template-rows: 1fr 1.125lh;
    }

    .post-icon-box {
      margin-block-start: 1em;
      margin-inline: auto;
      max-inline-size: 100%;
      text-align: center;
      overflow: hidden;

      img {
        max-block-size: 100%;
      }
    }

    .go-post {
      margin: 0;
      text-align: end;

      span {
        padding: 0.125rem 0.5rem;
        vertical-align: center;
      }
    }
  }

  /*  spécialité contactMe */

  .dc-contactme .post {
    padding: 1rem;

    @media screen and (width > 30em) {
      padding: 1rem 2rem 2rem;
    }
  }
}

@layer feedback {
  .post-feedback {
    a {
      &:link,
      &:visited {
        border-block-end: 1px solid transparent;
        color: var(--link2);
      }

      &:hover,
      &:active,
      &:visited:hover,
      &:visited:active {
        border-block-end-color: var(--link);
      }

      &:focus {
        background-color: var(--link);
        color: #fff;
      }
    }

    margin-block-end: 4rem;

    a:link,
    a:visited {
      border-block-end-color: var(--link2);
    }
  }

  .comments-list {
    padding-left: 0;
    list-style: none;
  }

  .comment,
  .ping {
    margin-block: 2rem;
    padding-inline: 1em;
    border: 1px solid var(--link2);
    border-radius: 0.5em;
    padding-block-end: 0.25em;

    &:not(.odd) {
      margin-inline-start: 10%;
    }

    &.odd {
      margin-inline-end: 10%;
    }

    @media screen and (width > 30em) {
      &:not(.odd) {
        margin-inline-start: 15%;
      }

      &.odd {
        margin-inline-end: 15%;
      }
    }
  }

  .comment.me {
    background-color: var(--alternate);

    a {
      color: oklch(from var(--alternate) round(1.21 - L) 0 0);
    }
  }

  .comment-info {
    font-family: var(--font-family-serif);
  }

  .comment-number {
    display: inline-block;
    inline-size: 3em;
    block-size: 1.5em;
    margin-inline-end: 0.5em;
    text-align: center;
  }

  .ping {
    position: relative;
    padding-right: 1em;
    padding-left: 1em;
    border: 2px solid var(--gray-4);
    font-family: var(--font-family-serif);

    .comment-info {
      font-family: var(--font-family-sans-serif);
    }

    strong {
      font-family: var(--font-family-serif);
      font-style: italic;
    }
  }

  #comments-feed {
    margin-block-end: 4rem;
    text-align: center;
  }

  /*  Formulaire */
  /*  spécificités (le reste est dans common) */

  .comment-form {
    margin-block-end: 4rem;
  }

  .field {
    display: flex;
    line-height: 2;

    flex-wrap: wrap;

    label {
      display: block;
      inline-size: 100%;
      margin-block-end: 0.25em;
      padding-left: 1em;
      background-color: var(--post-bg);
      border: 1px solid var(--field-border);
      white-space: nowrap;

      flex: none;

      @media screen and (width > 40em) {
        inline-size: 15em;
        margin-inline-end: -1px;
        margin-block-end: 0;
      }
    }

    input,
    textarea {
      flex: 1;
    }
  }

  .field-content {
    display: block;
    margin-block-end: 0;
    margin-block-start: 1.5em;

    > div {
      margin-block-end: -1px;
      margin-inline-start: 0;
      padding: 0.125rem;
      border: 1px solid var(--field-border);
    }

    label {
      inline-size: 100%;
      margin-block-end: 1rem;
    }

    textarea {
      overflow: hidden;
      inline-size: 100%;
      line-height: 1.5;
      border-color: var(--field-border);
    }

    .jstElements {
      padding-left: 1rem;
      padding-block-end: 0.5rem;

      button {
        border-color: transparent;

        &:focus,
        &:hover {
          border-color: var(--link2);
        }
      }
    }

    .jstElements.focus {
      padding-left: 1rem;
      padding-block-end: 0.5rem;
      border: 1px solid color-mix(in srgb, black 50%, var(--credits-bg));
      background-color: var(--credits-bg);
    }

    .jstEditor textarea {
      border-color: transparent;
    }
  }

  .remember {
    text-align: end;
    font-size: 1rem;
  }

  .form-help {
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 1rem;
  }

  #ping-url {
    color: var(--gray-5);
    font-family: var(--font-family-monospace);
    font-size: 1rem;
    overflow-wrap: break-word;
  }

  #pr {
    margin-block-end: 2em;
    padding: 1em;
    border: 4px solid transparent;
    box-sizing: border-box;
    background-image:
      linear-gradient(var(--post-bg), var(--post-bg)), linear-gradient(180deg, orange, var(--link2) 50%, orange);
    background-repeat: no-repeat;
    background-size:
      100% 100%,
      100% 200%;
    background-position:
      0 0,
      0 100%;
    background-origin: padding-box, border-box;
    animation: highlight 0.75s infinite alternate;

    .buttons {
      margin-block-end: 0.5rem;
    }
  }

  p#pr {
    padding-block-end: 1em;
    text-align: center;
  }

  @keyframes highlight {
    100% {
      background-position:
        0 0,
        0 0;
    }
  }
}

/* spécificités de contexte */
@layer category {
  .dc-category {
    .content-info__cat-desc {
      font-size: 1.25rem;
      margin-block-end: 2rem;
    }

    .content-info__sub-cat {
      border-block-start: 1px solid var(--gray-3);
      padding-block-start: 0.5lh;

      h3 {
        font-weight: bold;
      }

      ul {
        margin-block: 0.5lh 1lh;
      }

      a {
        font-size: 1.125em;
        color: currentColor;
      }
    }
  }
}

@layer search {
  .dc-search {
    .post-date {
      font-size: 0.875em;
      margin: 0.125em 1em 0 0.25em;
      padding: 2px 0.5em;
      border-radius: 0.25em;
      border: 1px solid;
      inline-size: fit-content;
      block-size: fit-content;
      order: 2;
      text-align: end;
    }

    .content-info {
      .nb-post-page {
        font-size: 1rem;
      }

      p {
        padding-left: 2rem;
      }

      em {
        padding: 0.125rem 0.5rem;
        background-color: yellow;
        color: #000;
      }
    }

    .post {
      margin-block-end: 3rem;
      position: relative;
    }

    .post-header {
      display: block;
      padding: 0.75em 0.5em;

      h3 {
        margin-block: 0;
      }

      p,
      h3 {
        display: inline;
        vertical-align: middle;
      }
    }

    .post-content {
      padding: 0.5rem 1.5rem;
    }

    .post-content a::after {
      display: block;
      position: absolute;
      content: '';
      inset-block: 0;
      inset-inline: 0;
    }
  }
}

@layer tag {
  /*  règles hors celles communes avec _archive.scss */

  .dc-tag {
    #content-info {
      margin-block-end: 2em;
    }

    .tag-desc {
      font-size: 1.125rem;
      margin-block-end: 2em;
    }
  }

  .dc-tags {
    #content-info {
      margin-block-end: 2em;
    }

    .post {
      padding: 4em 2em;
    }

    .post-content {
      columns: 14em;
      gap: 1em;
      column-rule: 1px solid var(--gray-2);
    }

    .post ul {
      margin-block-start: 0;
      line-height: 2.5;
      list-style-type: square;

      a {
        color: currentColor;
      }
    }
  }
}

@layer static {
  .dc-home-static {
    .post-title a:not(:hover, :focus) {
      color: currentColor;
      border-block-end: transparent;
    }

    .post:not(:has(header)) {
      padding-block-start: 2lh;

      .post-excerpt {
        margin-block-end: 2em;
        padding: 0.5rem 1rem;
        background-color: var(--alternate);
        border: 6px double color-mix(in srgb, var(--body-color) 20%, var(--alternate));
        border-radius: 1em;

        a {
          color: color-mix(in srgb, black 10%, var(--link));
        }

        @media screen and (width > 30em) {
          padding: 0.5rem 2rem;
        }
      }
    }
  }

  .post-footer:has(.post-info-co) {
    .post-info,
    .post-tags-list {
      margin-block-end: 0;
    }

    .post-info-co {
      flex-basis: 100%;
      margin-block-start: 0;
      display: flex;
      gap: 1em;
    }
  }
}

@layer page {
  .dc-page {
    .header {
      block-size: auto;
    }

    .header-info {
      visibility: hidden;
    }

    .post-title {
      margin-block-start: 1em;

      @media screen and (width > 30em) {
        margin-block-start: 2em;
      }
    }

    .post-excerpt {
      margin-block-end: 2em;
      padding: 0.5rem 1rem;
      background-color: var(--alternate);
      border: 6px double color-mix(in srgb, black 20%, var(--alternate));
      border-radius: 1em;

      a {
        color: color-mix(in srgb, black 10%, var(--link));
      }

      @media screen and (width > 30em) {
        padding: 0.5rem 2rem;
      }
    }

    .post-banner {
      margin-block-end: 2em;
    }

    h3 {
      font-weight: 600;
    }

    h4 {
      margin-block-start: 2em;
      padding-block-end: 0.5em;
      font-weight: 600;
      color: color-mix(in srgb, var(--body-color) 60%, var(--alternate));
    }

    strong {
      font-weight: 600;
    }

    .post-content ul > li {
      margin-block-end: 0.5em;
    }

    .chapter-separator {
      margin-block: 2em;
    }
  }
}

@layer archive {
  .dc-archive,
  .dc-tag {
    #main {
      @media screen and (width <= 40em) {
        padding: 0;
      }
    }

    .simple {
      max-inline-size: 58em;
      margin-block-start: 1em;
      padding: 1em 0.25em;
      background-color: #fff;

      @media screen and (width > 23em) {
        padding-left: 0.5em;
        padding-right: 0.5em;
      }

      @media screen and (width > 40em) {
        padding-left: 1em;
        padding-right: 1em;
      }

      @media screen and (width > 60em) {
        padding-left: 2em;
        padding-right: 2em;
      }

      @media screen and (width > 80em) {
        padding: 2em;
      }
    }

    h4 {
      margin-block-start: 2rem;
      margin-block-end: 1rem;
      font-family: var(--font-family-sans-serif);
      font-size: 1.125rem;
      font-weight: 600;
      text-align: center;
    }
  }

  .dc-archive {
    h3:not(:first-of-type) {
      margin-block-start: 3lh;
    }

    .post {
      padding-block-end: 0.5lh;
    }

    .fromto {
      text-align: center;
      inline-size: fit-content;
      padding: 0.25em 1em;
      border-radius: 0.25rem;
      border: 1px solid var(--gray-3);
      margin: 0 auto 2rem;
      background-color: var(--post-bg);
    }

    .arch-by-tag {
      flex: 1;

      ul {
        columns: 14em;
        gap: 2rem;
        column-rule: 1px dotted;
        list-style-type: none;
        line-height: 2;
      }
    }

    #more-arch {
      margin-block-end: 3lh;

      .posts-group {
        justify-content: center;

        .post {
          flex: 1;

          ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
            line-height: 2;
            margin-block-end: 1.5lh;

            a:link,
            a:visited {
              color: var(--body-color);
              text-decoration-color: transparent;
            }
          }
        }
      }
    }
  }
}

@layer dc404 {
  .dc-404 {
    background-color: var(--body-bg);

    #main {
      max-inline-size: 34em;
      padding: 2em;
      margin: 3% auto 20%;
      background-color: var(--post-bg);
      border: 1rem solid transparent;
      box-shadow: 0 0.75rem 0.75rem rgba(0, 0, 0, 0.2);
    }

    #main::after {
      content: '';
      display: block;
      inline-size: 100%;
      block-size: 5em;
    }

    #content-info {
      font-size: 1.125em;

      h2 {
        margin-block-end: 1em;
      }
    }

    .content-inner {
      padding: 5% 0;
    }

    #gotop {
      display: none;
    }
  }
}

/* == For AuthorMode plugin == */
@layer authors {
  .dc-authors {
    #main {
      @media screen and (width <= 40em) {
        padding: 0;
      }
    }

    .post {
      margin-block-start: 1lh;

      @media screen and (23em >= width > 40em) {
        margin-block-start: 1.25lh;

        .post-content {
          padding-inline: 0.5em;
        }
      }

      @media screen and (40em >= width > 60em) {
        margin-block-start: 1.5lh;

        .post-content {
          padding-inline: 1em;
        }
      }

      @media screen and (width >= 60em) {
        margin-block-start: 2lh;

        .post-content {
          padding-inline: 2em;
        }
      }

      .post-content {
        min-block-size: 1lh;
      }
    }

    .post-banner,
    .post-header {
      margin: 0;
      align-items: center;
      padding-block: 0;
    }

    .post-banner {
      position: relative;
    }

    .post-title {
      font-size: 1.5em;
    }

    .author-posts {
      border: 1px solid;
      border-radius: 0.5em;

      a {
        padding: 0.125em 0.5em;
        display: block;
      }

      a:link,
      a:visited {
        color: currentColor;
      }

      a:hover,
      a:focus {
        background-color: var(--link);
        color: white;
      }

      a:before {
        display: block;
        position: absolute;
        content: '';
        inset-block: 0;
        inset-inline: 0;
      }

      &:has(:is(:hover, :focus)) {
        background-color: oklch(from var(--specific-color) round(1.21 - L) 0 0);
        color: var(--specific-color, var(--link));
        border-color: var(--specific-color, var(--link));
      }
    }

    .post-content {
      padding: 1em 0.25em;
    }

    .post-footer {
      ul {
        flex: 1;
        margin-inline: 0;
        padding-inline: 0;
        margin-block: 0;
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5lh 2rem;
      }
    }
  }

  .dc-author {
    .post {
      box-shadow: none;
      position: relative; /*  pour permettre le clic sur toute la zone */
      margin-block-end: 3rem;
    }

    .chapter-separator {
      margin-block-end: 0.5em;
    }

    .chapter-title {
      font-size: 2.125rem;
    }

    .content-info-auth {
      padding-block-end: 1em;

      p {
        padding-left: 2rem;
      }
    }

    .all-authors-link {
      a {
        &:link,
        &:visited {
          border-block-end: 1px solid transparent;
          border-color: color-mix(in srgb, white 45%, var(--body-color));
        }

        &:hover,
        &:active,
        &:visited:hover,
        &:visited:active {
          border-color: var(--link);
        }

        &:focus {
          background-color: var(--link);
          color: #fff;
        }
      }
    }

    .post-header {
      p {
        font-size: 0.925rem;
        inline-size: 5em;
        padding-block-start: 0.275rem;
      }

      .title {
        font-size: 1.125em;
        font-style: italic;
        font-weight: normal;

        a {
          color: white;
          border-block-end: transparent;
        }

        & a::after {
          display: block;
          position: absolute;
          content: '';
          inset-block: 0;
          inset-inline: 0;
        }
      }
    }

    .post-content {
      padding: 0.5rem 1.5rem;
    }
  }
}

/* ====================== PALETTE ======================== */

/* css front (Anne) -------------------------------------- */
:root {
  /* vibrant */
  --vl: 0.48;
  --vc: 0.15;
  --vh: 155;
  --v-bg: oklch(var(--vl) var(--vc) var(--vh));

  /* muted */
  --ml: 0.75;
  --mc: 0.06;
  --mh: 155;
  --m-bg: oklch(var(--ml) var(--mc) var(--mh));

  /* common */
  --idcat: 0;
  --iduser: 0;

  --step: 55;
}

/* peupler les variables des catégories */
[data-cat_id] {
  --hue: calc(var(--h) + var(--idcat) * var(--step));
  --m-cat-bg: oklch(var(--ml) var(--mc) var(--hue));
  --v-cat-bg: oklch(var(--vl) var(--vc) var(--hue));
}

/* peupler les variables des users */
[data-user_id] {
  --hue: calc(var(--h) + var(--iduser) * var(--step));
  --m-user-bg: oklch(var(--ml) var(--mc) var(--hue));
  --v-user-bg: oklch(var(--vl) var(--vc) var(--hue));
}

/* On installe par défaut:
   distinction : catégorie - tonalité : muted */
.post {
  --l: var(--ml);
  --c: var(--mc);
  --h: var(--mh);
  --specific-color: var(--m-cat-bg);

  --txt: oklch(from var(--specific-color) round(1.21 - L) 0 0);
}

/* utiliser les variables */
.post-header {
  background-color: var(--specific-color, var(--default-post-header-bg));
  color: var(--txt, #000);

  a {
    color: currentColor;
    border-block-end-color: transparent;

    &:is(:hover, :focus) {
      background-color: oklch(from var(--specific-color) round(1.21 - L) 0 0);
      color: var(--specific-color);
    }
  }

  .category,
  .post-permalink {
    &:has(:is(:hover, :focus)) {
      background-color: oklch(from var(--specific-color) round(1.21 - L) 0 0);
      color: var(--specific-color);
      border-color: transparent;
    }
  }
}

.posts-group .post-content a {
  &:hover,
  &:active,
  &:visited:hover,
  &:visited:active,
  &:focus-visible {
    background-color: var(--specific-color, var(--link));
    color: var(--txt, var(--link));
  }
}

/* =================== DARK MODE ===================== */

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --hue-base: 258;

    --body-bg: oklch(0.275 0.019 var(--hue-base)); /* #222831 */

    --post-bg: oklch(0.36 0.015 var(--hue-base)); /* #383d45 */
    --blockquote: oklch(from var(--post-bg) calc(l + 0.1) c h);

    --neutral-hue-base: 78;
    --gray-5: oklch(0.9 0 var(--neutral-hue-base));
    --gray-4: oklch(0.8 0 var(--neutral-hue-base));
    --gray-3: oklch(0.7 0 var(--neutral-hue-base));
    --gray-2: oklch(0.6 0 var(--neutral-hue-base));
    --gray-1: oklch(0.5 0 var(--neutral-hue-base));

    --body-color: oklch(0.96 0.04 var(--neutral-hue-base));

    --link2: #c5b376;
    --link: oklch(0.95 0.15 6);

    --default-post-header-bg: oklch(0.6 0.05 var(--hue-base) / 0.8);
    --post-footer-bg: oklch(0.6 0.05 var(--hue-base) / 0.4);

    --alternate: color-mix(var(--link2), var(--body-bg) 50%);

    [data-cat_id] {
      --m-cat-bg: color-mix(oklch(var(--ml) var(--mc) var(--hue)), var(--body-bg));
      --v-cat-bg: var(--m-cat-bg);
    }

    [data-user_id] {
      --m-user-bg: color-mix(oklch(var(--ml) var(--mc) var(--hue)), var(--body-bg));
      --v-user-bg: var(--m-user-bg);
    }
  }
}

/* == compatibilité plugin Scheme Switcher == */
html.dark {
  --hue-base: 258;

  --body-bg: oklch(0.275 0.019 var(--hue-base)); /* #222831 */

  --post-bg: oklch(0.36 0.015 var(--hue-base)); /* #383d45 */
  --blockquote: oklch(from var(--post-bg) calc(l + 0.1) c h);

  --neutral-hue-base: 78;
  --gray-5: oklch(0.9 0 var(--neutral-hue-base));
  --gray-4: oklch(0.8 0 var(--neutral-hue-base));
  --gray-3: oklch(0.7 0 var(--neutral-hue-base));
  --gray-2: oklch(0.6 0 var(--neutral-hue-base));
  --gray-1: oklch(0.5 0 var(--neutral-hue-base));

  --body-color: oklch(0.96 0.04 var(--neutral-hue-base));

  --link2: #c5b376;
  --link: oklch(0.95 0.15 6);

  --default-post-header-bg: oklch(0.6 0.05 var(--hue-base) / 0.8);
  --post-footer-bg: oklch(0.6 0.05 var(--hue-base) / 0.4);

  --alternate: color-mix(var(--link2), var(--body-bg) 50%);

  [data-cat_id] {
    --m-cat-bg: color-mix(oklch(var(--ml) var(--mc) var(--hue)), var(--body-bg));
    --v-cat-bg: var(--m-cat-bg);
  }

  [data-user_id] {
    --m-user-bg: color-mix(oklch(var(--ml) var(--mc) var(--hue)), var(--body-bg));
    --v-user-bg: var(--m-user-bg);
  }
}