/* base
============================================================= */

@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;
    }
  }
}

/* variables
============================================================= */
: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);
}

/* 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: inline-flex;
    flex-wrap: wrap;
    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;
}

/* 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);
  }
}

/* top
============================================================= */
.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;
  }
}

/* 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;
  }
}

/* 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
============================================================= */
.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;
    flex-wrap: wrap;
    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 {
      display: block;

      &[src$='.svg'] {
        width: clamp(80%, 90%, 100%);
      }

      &.media-center,
      &.media-left,
      &.media-right {
        display: block;
        object-fit: cover;
      }
    }
  }

  .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;
  }
}

/*  spécialité blogrollpage */

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

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

/* 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;
  }
}

/* dc-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;
    }
  }
}

/* dc-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;
  }
}

/* dc-tag, dc-tags
============================================================= */
.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;
    }
  }
}

/* dc-home-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;
  }
}

/* dc-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;
  }
}

/* dc-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;
          }
        }
      }
    }
  }
}

/* dc-404
============================================================= */
.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;
  }
}

/* AuthorMode plugin
============================================================= */
.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 ======================== */
: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);
  }
}