@charset "UTF-8";

/* Thème Simone pour Dotclear 2
-----------------------------------  */
@import url('index.php?tf=/css-base/reset.css') layer(reset);
@import url('index.php?tf=/css-base/dc-base.css') layer(dc-base);

@font-face {
  font-family: 'Atkinson-Hyperlegible-Next';
  font-style: normal;
  font-weight: normal;
  src: url(index.php?tf=fonts/Atkinson-HyperlegibleNext-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'AtkinsonHyperlegible-Next';
  font-style: italic;
  font-weight: normal;
  src: url(index.php?tf=fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Atkinson-Hyperlegible-Next';
  font-style: normal;
  font-weight: bold;
  src: url(index.php?tf=fonts/AtkinsonHyperlegibleNext-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Atkinson-Hyperlegible-Next';
  font-style: italic;
  font-weight: bold;
  src: url(index.php?tf=fonts/Atkinson-HyperlegibleNext-BoldItalic.woff2) format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: normal;
  src: url('index.php?tf=/font/RobotoCondensed-Regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: normal;
  src: url('index.php?tf=/font/RobotoCondensed-Italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: bold;
  src: url('index.php?tf=/font/RobotoCondensed-SemiBold.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: bold;
  src: url('index.php?tf=/font/RobotoCondensed-SemiBoldItalic.woff2') format('woff2');
}

:root {
  /* ------------ colors ------------ */
  --hue: 241;
  --180-hue: calc(var(--hue) + 180);

  --aka-black: oklch(0.22 0.026 var(--hue)); /*     #131b27 */
  --aka-white: oklch(0.99 0.002 var(--180-hue)); /* #fafcfe */
  --palette-1: oklch(0.94 0.026 var(--hue)); /*     #d9edff */
  --palette-2: oklch(0.33 0.102 var(--hue)); /*     #083468 */
  --palette-3: oklch(0.42 0.142 var(--hue)); /*     #024a98 */
  --palette-4: oklch(0.51 0.182 var(--hue)); /*     #0062cb */
  --palette-5: oklch(0.51 0.062 var(--hue)); /*     #4e688a */
  --lt-muted: oklch(0.81 0.05 var(--hue));
  --lt-gray-1: oklch(0.95 0.002 var(--180-hue));
  --lt-gray-2: oklch(0.9 0.004 var(--180-hue));
  --lt-gray-3: oklch(0.9 0.008 var(--180-hue));
  --lt-gray-4: oklch(0.8 0.008 var(--180-hue));

  /* dark theme (--dt-*) */
  --dt-black: oklch(0.3 0.002 var(--180-hue));
  --dt-white: oklch(0.98 0.002 var(--hue));
  --dt-palette-1: oklch(0.4 0.01 var(--hue));
  --dt-palette-2: oklch(0.9 0.04 var(--hue));
  --dt-palette-3: oklch(0.8 0.07 var(--hue));
  --dt-palette-4: oklch(0.7 0.1 var(--hue));
  --dt-palette-5: oklch(0.6 0.13 var(--hue));
  --dt-muted: oklch(0.7 0.02 var(--hue));
  --dt-gray-1: oklch(0.4 0.002 var(--180-hue));
  --dt-gray-2: oklch(0.5 0.004 var(--180-hue));
  --dt-gray-3: oklch(0.6 0.008 var(--180-hue));
  --dt-gray-4: oklch(0.7 0.008 var(--180-hue));

  --body-bg: light-dark(var(--aka-white), var(--dt-black));
  --body-color: light-dark(var(--aka-black), var(--dt-white));
  --secondary-bg: light-dark(var(--palette-1), var(--dt-palette-1));
  --secondary-color: light-dark(var(--aka-black), var(--dt-white));
  --code-bg: light-dark(var(--palette-2), var(--dt-palette-2));
  --code-color: light-dark(var(--aka-white), var(--aka-black));
  --accent-subtle: light-dark(var(--palette-2), var(--dt-palette-2));
  --accent-medium: light-dark(var(--palette-3), var(--dt-palette-3));
  --accent-strong: light-dark(var(--palette-4), var(--dt-palette-4));
  --muted-accent-color: light-dark(var(--lt-muted), var(--dt-muted));
  --gray-1: light-dark(var(--lt-gray-1), var(--dt-gray-1));
  --gray-2: light-dark(var(--lt-gray-2), var(--dt-gray-2));
  --gray-3: light-dark(var(--lt-gray-3), var(--dt-gray-3));
  --gray-4: light-dark(var(--lt-gray-4), var(--dt-gray-4));

  --button-bg: light-dark(var(--gray-1), var(--dt-gray-1));
  --button-border: light-dark(var(--gray-2), var(--dt-gray-2));
  --button-bg-haf: light-dark(var(--gray-3), var(--dt-gray-3));
  --field-border: light-dark(var(--gray-4), var(--dt-gray-4));

  /* ---------- typography ---------- */
  --font-family-sans:
    'AtkinsonHyperlegibleNext', -apple-system, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-serif: georgia, ui-serif, serif;
  --font-family-monospace: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --font-headings: 'Roboto Condensed', 'Arial Narrow', 'Helvetica Narrow', system-ui, sans-serif;

  --fs-grad: 1.25; /* major third */
  --fs-step-0: clamp(0.875em, 0.7917em + 0.3704vw, 1.125em);
  --fs-step-1: calc(var(--fs-step-0) * var(--fs-grad));
  --fs-step-2: calc(var(--fs-step-1) * var(--fs-grad));
  --fs-step-3: calc(var(--fs-step-2) * var(--fs-grad));
  --fs-step-4: calc(var(--fs-step-3) * var(--fs-grad));
  --fs-step-5: calc(var(--fs-step-4) * var(--fs-grad));

  /* ---------- spacers ---------- */
  --spacer: var(--fs-step-0);
  --spacer-s: calc(var(--spacer) / 2);
  --spacer-l: calc(var(--spacer) * 2);
  --spacer-xl: calc(var(--spacer) * 3);

  --max-text-line: calc(44 * var(--fs-step-0));

  /* ---------- other ---------- */
  /* mask icons svg */
  --icon-rss: url(index.php?tf=img/icon/rss.svg);
  --icon-info: url(index.php?tf=img/icon/info.svg);
  --icon-ping: url(index.php?tf=img/icon/ping.svg);
  --icon-dl: url(index.php?tf=img/icon/dl.svg);
}

/* Layout
============================================ */
/* For layout alternatives, see css/ folder */
.page {
  max-inline-size: 90em;
  margin: 0 auto;
  padding: var(--spacer);

  display: grid;
  gap: var(--spacer);
  grid-template-columns: 1fr;
  grid-template-areas:
    'header'
    'main'
    'sidebar'
    'gotop'
    'footer';

  @media screen and (width >= 60em) {
    grid-template-columns: minmax(20em, 1fr) 3fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      'header main'
      'sidebar main'
      'gotop gotop'
      'footer footer';
  }
}
.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.gotop {
  grid-area: gotop;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}
.sidebar .widgets {
  display: grid;
  gap: var(--spacer-l);
  grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));
  margin-block-end: var(--spacer);
}

/* general
============================================ */
html,
body {
  scroll-behavior: smooth;
}

html {
  color-scheme: light dark;

  [data-scheme] {
    transition:
      color 150ms ease-out,
      background-color 200ms ease-out;
  }
}

body {
  font-family: var(--font-family-sans);
  background-color: var(--body-bg);
  color: var(--body-color);

  @media screen and (width >= 1600px) {
    font-size: 1.25em;
  }
}

figcaption {
  font-family: var(--font-family-serif);
  font-style: italic;
  font-size: smaller;
}

ins {
  text-underline-offset: 0.2em;
  text-decoration-style: dashed;
  text-decoration-color: oklch(from var(--body-color) l c h / 0.4);
}

q {
  font-family: var(--font-family-serif);
  font-style: italic;
  font-size: 1.05em;
}

blockquote {
  font-family: var(--font-family-serif);
  font-size: 1.125em;
  margin-inline: var(--spacer-xl) 0;
  padding-inline-start: 1em;
  border-inline-start: 1em solid oklch(from var(--accent-subtle) l c h / 0.4);
}

sup:has(a) {
  margin-inline-start: 0.25em;
  font-weight: bolder;
}

:where(pre:has(code)),
:where(:not(pre)) > code {
  color: var(--code-color);
}
:where(:not(pre)) > code {
  background-color: oklch(from var(--code-bg) l c h / 0.8);
  padding: 0.125em 0.5em;
  border-radius: 0.25em;
  vertical-align: bottom;
}
:where(pre:has(code)) {
  background-color: var(--code-bg);
  line-height: 1.6;
  border-radius: var(--spacer-s);
  padding: var(--spacer);
}

/* links
--------------------------------------------------- */
/* :link, :visited */
a:any-link {
  color: currentColor;
  text-decoration: underline 1px var(--accent-subtle);
}
:where(.site-title, .simple-menu-navigation, .pagination, .post-title, .gotop) {
  a:any-link {
    text-decoration-color: transparent;
  }
}
.site-title {
  a:any-link {
    color: var(--accent-subtle);
  }
}
:is(.post-excerpt, .post-content) {
  a:any-link {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-strong);
  }
  a:hover {
    text-decoration-thickness: 3px;
  }
}

/* :hover, :active, :focus */
a:is(:hover, :active, :focus) {
  color: var(--accent-strong);
  text-decoration-thickness: 3px;
  text-decoration-color: var(--accent-strong);
}

/* specials rules */
.navlinks {
  a {
    text-decoration: none;

    &[aria-hidden] {
      font-family: serif;
      font-size: 4em;
      color: var(--accent-medium);
      line-height: 1rem;
      vertical-align: top;
    }

    &:any-link {
      color: transparent;

      .nextprev-title {
        color: transparent;
        text-underline-offset: 0.7em;
      }
    }

    &:is(:hover, :focus) {
      .nextprev-title {
        color: var(--accent-strong);
        border-bottom: 2px solid var(--accent-strong);
      }
    }
  }
}

.sidebar {
  ul > li {
    a:any-link {
      text-decoration-color: transparent;
    }
    a:hover,
    a:active {
      color: var(--accent-strong);
      text-decoration-color: var(--accent-strong);
    }
  }
}

.gotop a {
  color: currentColor;

  &:is(:hover, :active, :focus) {
    text-decoration-color: transparent;
  }
}

/* classes
-------------------------------------------------------- */
.feeds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacer);
  justify-content: center;
}

/* icons as mask to be easily colored */
.feed::before {
  mask: var(--icon-rss); /* needs to be BEFORE mask-size */
  width: 1em;
  height: 1em;
}
.post-attachments-list li::before {
  mask: var(--icon-dl); /* needs to be BEFORE mask-size */
  width: 1.125em;
  height: 1.125em;
}
.post aside::before {
  mask: var(--icon-info); /* needs to be BEFORE mask-size */
  width: 1.5em;
  height: 1.5em;

  display: inline-block;
  margin-inline-start: calc(var(--spacer) * -1.5);
  color: var(--accent-subtle);
}
.ping .comment-number::before {
  mask: var(--icon-ping); /* needs to be BEFORE mask-size */
  width: 1em;
  height: 1em;
}

.post-attachments-list li,
.feed {
  &::before {
    display: inline-block;
    width: 1em;
    height: 1em;
  }
}

.ping .comment-number::before {
  display: block;
}

/* common for icons as masks */
.post-attachments-list li,
.post aside,
.ping .comment-number,
.feed {
  &::before {
    content: '';
    margin-inline-end: 0.5em;
    background-color: currentColor;
    mask-size: contain;
  }
}

/* top
============================================ */
.header {
  padding: 0.75rem 1.5rem 1rem;
  margin-block-start: 2rem;
  background-color: var(--secondary-bg);
  border-radius: 1em;
  corner-shape: squircle; /* not yet everywhere but subtly pretty */
  border: 1px solid var(--muted-accent-color);
}

.skip-links {
  position: absolute;
  inset-block-start: var(--spacer-s);
  inset-inline-start: var(--spacer);
  margin-block-start: 0;
  line-height: 1.2rem;

  span {
    /* if too long, break between spans, not inside spans */
    white-space: nowrap;
  }
}

@media screen and (width <= 24em) {
  .page {
    /* some space under skip-links on small screens */
    padding-block-start: var(--spacer-l);
  }
}

.site-title {
  margin-block: var(--spacer) 0;
  font-family: var(--font-headings);
  font-size: var(--fs-step-3);
  font-weight: normal;
  text-transform: uppercase;
  text-wrap: balance;
}

.site-baseline {
  font-size: var(--fs-step-0);
}

.simple-menu-navigation {
  /* could have been in the next section */
  margin-block-start: var(--spacer-l);

  ul {
    border-block-start: 1px solid;
  }
  li {
    padding-block: 0.25em;
    border-block-end: 1px solid;
  }
}

/* navigations
============================================ */
.gotop {
  position: sticky;
  width: fit-content;
  padding: 0.25em 1em 0.25em 1.25em;
  left: 90%;
  bottom: 5%;
  border-radius: 0.5em;
  corner-shape: squircle; /* not yet everywhere but subtly pretty */
  background-color: var(--accent-medium);
  color: oklch(from var(--accent-medium) round(1.21 - L) 0 0);
  font-size: var(--fs-step-0);
  border: 2px solid var(--accent-medium);

  &::after {
    content: '⇡';
    padding-inline-start: 1ch;
  }

  &:has(:hover) {
    background-color: oklch(from var(--accent-medium) round(1.21 - L) 0 0);
    color: var(--accent-medium);
  }
}

.breadcrumb {
  text-align: center;
  min-inline-size: 16em;
  max-inline-size: fit-content;
  margin-left: auto;

  position: sticky;
  top: 0;
  margin-block-start: calc(var(--spacer) * -1.5);

  background: var(--secondary-bg);
  padding-block: 0.25em 0.5em;
  padding-inline: 1.5em;
  border-radius: 0 0 0.5em 0.5em;
  border: 1px solid var(--muted-accent-color);
  border-block-start: none;
}

.navlinks {
  margin-block-start: var(--spacer);
  margin-block-end: var(--spacer-l);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 1rem;
  line-height: 1rem;

  [aria-hidden] {
    font-size: var(--fs-step-5);
    color: var(--accent-strong);
    vertical-align: text-top;
  }

  &:last-child {
    margin-block-start: var(--spacer-xl);
  }

  &:not(:has(.prev)) {
    justify-content: flex-end;
  }
}

@media screen and (width <= 40em) {
  .nextprev-title {
    display: none;
  }
}

.navlinks-separator {
  display: none;
}

.pagination {
  text-align: right;

  [aria-hidden] {
    display: none;
  }
  .prev::before {
    display: inline-block;
    content: '← ';
    font-size: var(--fs-step-1);
    margin-inline-end: var(--spacer-s);
    vertical-align: sub;
  }
  .next::after {
    display: inline-block;
    content: ' →';
    font-size: var(--fs-step-1);
    margin-inline-start: var(--spacer-s);
    vertical-align: sub;
  }
}

/* main
============================================ */
.main {
  @media screen and (width >= 60em) {
    padding: var(--spacer-s) var(--spacer-l);
  }

  h2,
  h3,
  h4,
  h5 {
    margin-block: 2rlh 1.25rlh;
    font-family: var(--font-headings);
  }
  h2 {
    font-size: var(--fs-step-3);
    color: var(--accent-strong);
  }
  h3 {
    font-size: var(--fs-step-2);
  }
  h4 {
    font-size: var(--fs-step-1);
  }
  h5 {
    font-size: var(--fs-step-0);
  }
}

.content-info,
.post-excerpt,
.post-content {
  font-size: var(--fs-step-0);
}

.content {
  margin-block-start: var(--spacer-xl);
  line-height: 1.6;
}

.content-info,
.simple header {
  margin-block-start: 2rem;
  text-align: center;
  text-wrap: balance;

  h2 {
    font-size: var(--fs-step-5);
    color: var(--accent-medium);
  }
}

.content-info {
  margin-block-end: calc(var(--spacer) * 4);
}

.entries-counter {
  font-family: var(--font-headings);
  font-size: var(--fs-step-1);
}

/* posts common rules
-------------------------------------------- */
.post {
  max-inline-size: var(--max-text-line);
  margin: 0 auto 4rlh;
}

.post-excerpt {
  margin-block-end: 1em;
}

.post aside {
  padding: var(--spacer-s) var(--spacer-l) var(--spacer);
  border: 1px solid var(--body-color);

  p:first-child {
    margin-block-start: 0;
  }
}

.post details {
  margin-block-end: 0.5lh;

  &[open] {
    border-bottom: 1px dotted;

    summary {
      font-weight: bolder;
    }
  }

  &:has(figure, img) {
    &::after {
      display: block;
      content: '';
      clear: both;
    }
  }
}

.post-content ul,
.post-excerpt ul {
  li::marker {
    font-size: 1.25em;
  }

  li ul {
    padding-inline-start: var(--spacer-l);
    list-style-type: '— ';
  }
}

.post-excerpt hr,
.post-content hr {
  margin-inline: 20%;
  margin-block: var(--spacer-l);
}

.post figure:has(+ figure) {
  margin-block-end: var(--spacer-l);
}

.post figcaption {
  margin-block-start: var(--spacer-s);
}

/* posts, lists (home, category, tag…)
-------------------------------------------- */
.post-day-date {
  margin-block-end: 0.25lh;
  line-height: 1.25rem;
}

.post-day-date + .post-title {
  margin-block-start: 0;
}

.post-title a {
  color: var(--accent-strong);
}

.post-content:has(.post-icon) {
  text-box: trim-both cap alphabetic; /* not yet everywhere but nice! */

  p {
    min-inline-size: 16em;
  }

  img {
    width: clamp(180px, 25%, 240px);
    float: left;
    margin-inline-end: 1em;
    margin-block-end: 0.5em;
  }

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

.ellipsis {
  color: transparent;
  font-size: x-small;
}

.post-read-it {
  font-weight: bolder;
  display: inline-block;

  &::before {
    color: var(--accent-strong);
    content: '• • • ';
  }
}

.post-info,
.post-cat,
.post-tags-list {
  margin-block: 0;
}

.post-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacer-l);
}

.post-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacer);
}

.post-tags-list a::before {
  display: inline;
  content: '# ';
}

.post-cat::before {
  display: inline;
  content: '𐄡 ';
  vertical-align: bottom;
}

footer.post-meta {
  clear: both;
  position: relative;
  padding-block-start: var(--spacer-s);
  margin-block-start: var(--spacer-l);
  line-height: 1.8;

  .post-info {
    font-size: var(--fs-step-0);
  }
}
footer.post-meta::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 20%;
  block-size: 2px;
  background: currentColor;
}

.post-info-co {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacer);
}

.simple .post-taxonomy {
  justify-content: center;
}

/* post displayed alone (context .dc-post)
-------------------------------------------- */
.simple {
  h3 {
    font-size: var(--fs-step-3);
    color: var(--accent-subtle);
  }
  h4 {
    font-size: var(--fs-step-2);
  }
  h5 {
    font-size: var(--fs-step-1);
  }
}

.simple header {
  margin-block-end: calc(var(--spacer) * 3);
}

/* Liste des commentaires */
.post-feedback {
  margin-block-start: var(--spacer-l);

  h3,
  .comments-feed {
    text-align: center;
  }
}

.feedback__comments h3 {
  font-size: var(--fs-step-4);
}

.comments-list {
  line-height: 1.5;
  margin-block-start: var(--spacer-xl);

  & > li {
    margin-block: var(--spacer);
    border-block-end: 1px solid oklch(from var(--body-color) l c h / 0.5);

    &:first-child {
      border-block-start: 1px solid oklch(from var(--body-color) l c h / 0.5);
    }

    @media screen and (width >= 60em) {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(16em, 20%) 1fr;
      gap: var(--spacer-xl);
    }
  }
}

.comment-info {
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: var(--spacer);
  font-family: var(--font-headings);
  font-weight: bolder;

  span:first-child {
    position: relative;
    background: var(--gray-1);
    padding: 0.5em 0.75em 0;
    font-size: var(--fs-step-0);

    a {
      text-decoration-color: transparent;
    }

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

.comment-content {
  font-family: var(--font-family-serif);
  font-size: var(--fs-step-0);
}

/* forms
============================================ */
input {
  color: var(--body-color);
}

button,
.button,
input[type='submit'] {
  display: inline-block;
  margin: 0 2px;
  padding: 0.25rem 1rem;
  color: currentColor;
  background-color: var(--button-bg);
  border: 1px solid var(--button-border);
  border-radius: 0.25rem;
  box-shadow: 3px 3px 4px 0 oklch(from var(--button-border) l c h / 0.7);
  font-size: 1em;
  font-weight: normal;
  line-height: 2;
  text-align: center;
  white-space: nowrap;
  transition: all 300ms ease;
  user-select: none;

  &:hover {
    transform: scale(1.08);
    background-color: var(--button-bg-haf);
    color: oklch(from var(--button-bg-haf) round(1.21 - L) 0 0);
    border-color: var(--button-border);
  }

  &:active,
  &.active {
    background-color: var(--button-bg-haf);
    text-decoration-color: transparent !important;
    color: oklch(from var(--button-bg-haf) round(1.21 - L) 0 0);
  }
}

button + button {
  margin-left: 0.25em;
}

input[type='search'] {
  flex: 1;
}

button.active {
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-medium);
  border-color: var(--field-border);
}

.comment-form,
.send-ping {
  padding-block-start: var(--spacer);
  margin-block-start: var(--spacer-xl);
  line-height: 2;
  max-inline-size: var(--max-text-line);
  margin: var(--spacer-xl) auto;
}

.comment-form-info {
  label {
    display: block;
  }

  .field {
    display: grid;
    grid-template-columns: 12em 1fr;
  }
}

.comment-form-content {
  max-inline-size: var(--max-text-line);
  margin-inline: auto;

  textarea {
    width: 100%;
    margin-block-start: var(--spacer-s);
  }
}

.remember {
  margin-block: 0;
  text-align: right;
}

.buttons {
  display: flex;
  gap: var(--spacer);
  justify-content: flex-end;

  input[type='submit']:only-child,
  button[type='submit']:only-child {
    background-color: var(--accent-medium);
    color: oklch(from var(--accent-medium) round(1.21 - L) 0 0);
  }
}

.pr {
  padding-inline: var(--spacer);
  border-style: solid;
  border-width: 0.25em;
  border-image: linear-gradient(135deg, var(--accent-strong), var(--secondary-bg)) 1;
}

.ping-url {
  font-family: var(--font-family-monospace);
  text-align: center;
}

/* sidebar and footer
============================================ */
.search p {
  display: flex;
  gap: 0.125em;
}

.sidebar {
  padding-inline-start: 1.5rem;
  h3 {
    font-size: var(--fs-step-0);
  }

  strong {
    font-weight: 500;
  }

  ul > li {
    margin-block-end: 0.5em;

    ul {
      margin-block-start: 0.5em;
      list-style-type: '— ';
    }
  }
}

.widget {
  max-inline-size: var(--max-text-line);
}

.widget > :not(h3) {
  padding-inline: 1rem;
}

.syndicate .feeds {
  justify-content: flex-start;
}

.footer {
  margin-block-start: var(--spacer-l);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 20%;
  block-size: 2px;
  background: currentColor;
}

.footer .widget > * {
  /* quand le layout prévoit le footer en bas),
  on ne veut pas de décalage */
  padding-inline: 0;
}

.poweredby {
  text-align: right;
}

/* dc-whatever
============================================ */
/* dc-home-first */
.site-baseline-home-first {
  font-family: var(--font-family-serif);
  font-size: var(--fs-step-0);
  font-style: italic;
  text-align: right;
  margin-block-end: 3em;
  position: relative;
  padding-block-end: 0.5lh;
}

.site-baseline-home-first::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  inline-size: 5em;
  block-size: max(2px, 0.1em);
  background: currentColor;
}

.dc-home-first {
  .site-baseline {
    display: none;
  }
}

/* dc-404 ----------- */
.dc-404 .content-inner {
  font-size: var(--fs-step-1);
  text-align: center;
  line-height: 2;
}

/* dc-archive ----------- */
.dc-archive {
  .content-inner {
    font-size: var(--fs-step-0);
    line-height: 1.8;

    @media screen and (width >= 40em) {
      display: grid;
    }

    @media screen and (40em <= width < 60em) {
      grid-template-columns: 1fr 1fr;
    }

    @media screen and (width >= 60em) {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr));
      gap: 3em;
    }
  }
}

.fromto {
  font-family: var(--font-headings);
}

.arch-by-cat li ul {
  list-style-type: '— ';
}

.dc-archive-month {
  .post-info-co {
    display: none;
  }
}

/* dc-tags ----------- */
.post-signature {
  text-align: right;
  font-style: italic;
}

/* dc-tags ----------- */
.dc-tags {
  .content {
    margin: auto;
    font-size: var(--fs-step-0);
    max-inline-size: var(--max-text-line);
  }

  .content-inner .tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-l);
    justify-content: center;
  }

  .content-inner .tags a {
    text-decoration: none;

    /* thx to Temani Afif https://css-shape.com/breadcrumb/ */
    --b: 2px;
    --a: 35deg;
    --c: var(--accent-strong);

    line-height: 2; /* control the height */
    padding-block: 0.5em;
    padding-inline: calc(var(--b) + 0.5em) calc(1lh * tan(var(--a)) + var(--b) / cos(var(--a)));
    position: relative;
    width: fit-content;

    &:hover,
    &:focus {
      --c: oklch(from var(--accent-strong) l c var(--180-hue));
      color: var(--c);
    }
  }

  .content-inner .tags a:before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c);
    clip-path: polygon(
      0 0,
      calc(100% - 0.5lh * tan(var(--a))) 0,
      100% 50%,
      calc(100% - 0.5lh * tan(var(--a))) 100%,
      0 100%,
      0 0,
      var(--b) var(--b),
      var(--b) calc(100% - var(--b)),
      calc(100% - 0.5lh * tan(var(--a)) - var(--b) * (1 / cos(var(--a)) - tan(var(--a)))) calc(100% - var(--b)),
      calc(100% - var(--b) / cos(var(--a))) 50%,
      calc(100% - 0.5lh * tan(var(--a)) - var(--b) * (1 / cos(var(--a)) - tan(var(--a)))) var(--b),
      var(--b) var(--b)
    );
  }
}

/* plugins companions
============================================ */
/* contactMe ----------- */
.dc-contactme .comment-form {
  font-size: var(--fs-step-0);
}

/* BlogrollPage */
.dc-blogroll {
  .content-inner {
    max-inline-size: var(--max-text-line);
    margin: 0 auto;
    text-align: center;
  }
}