/* Peels — Layout démo
   CSS du site de présentation. N'est PAS distribué avec Peels.
   Certains styles génériques (body grid, nav flex, main container)
   ont vocation à migrer dans peels.css quand stabilisés.
   ════════════════════════════════════════════════════════ */

/* ── Variables démo — concepts non exposés par Peels ──────
   eyebrow : label uppercase, small, tracking large
   display : titre large, weight fort, tracking serré, leading flat */
:root {
  --demo-max:              82rem;
  --demo-wide:             96rem;
  --demo-eyebrow-tracking: 0.08em;
  --demo-display-weight:   900;
  --demo-display-tracking: -0.03em;
  --demo-display-leading:  0.96;
}

/* ── Body — grille page ─────────────────────────────────── */

body {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  background: var(--peels-surface-page);
}

/* ── Header / Nav ───────────────────────────────────────── */

body > header.demo-header {
  background: color-mix(in oklch, var(--peels-surface-page) 88%, transparent);
  border-block-end: 1px solid var(--peels-border-subtle);
  padding-inline: var(--peels-gutter);

  & nav {
    width: min(100%, var(--demo-max));
    margin-inline: auto;
    min-block-size: 3.75rem;
    display: flex;
    align-items: center;
    gap: var(--space-m);
    flex-wrap: wrap;

    & .demo-brand {
      text-decoration: none;
      color: var(--peels-text-body);
      font-size: var(--peels-text-base);
      letter-spacing: -0.02em;
      display: inline-flex;
      align-items: baseline;
      gap: 0.35em;

      & span {
        font-family: var(--peels-font-mono);
        font-size: var(--peels-text-xsmall);
        color: var(--peels-text-accent);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
    }

    & > menu {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s);
      list-style: none;
      margin: 0;
      margin-inline-start: auto;
      padding: 0;

      & a {
        text-decoration: none;
        font-size: var(--peels-text-xsmall);
        font-weight: var(--peels-font-weight-ui);
        color: var(--peels-text-muted);
        padding-block: var(--space-3xs);

        &:hover,
        &[aria-current="page"] {
          color: var(--peels-text-body);
        }
      }
    }

    & .demo-nav-end {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
    }
  }
}

a[data-role="goto"] {
  font-size: var(--peels-text-xsmall);
  font-weight: var(--peels-font-weight-ui);
  color: var(--peels-text-body);
  text-decoration: none;
  border: 1px solid var(--peels-border-subtle);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--peels-component-radius);

  &:hover {
    border-color: var(--peels-border-strong);
    background: var(--peels-surface-hover);
  }
}

/* ── Main — container centré ────────────────────────────── */

body > main {
  width: 100%;
  padding-block-start: 0;
  padding-block-end: var(--peels-gap-section);
  padding-inline: var(--peels-gutter);

  & > * {
    width: 100%;
    max-width: var(--demo-max);
    margin-inline: auto;
  }
}

/* Page shop : pleine largeur */
.shop-page {
  --shop-max: var(--demo-max);
  max-width: none;
  margin-inline: calc(-1 * var(--peels-gutter));
  margin-block-end: calc(-1 * var(--peels-gap-section));
  padding-inline: 0;
}

/* ── Article / Contact ────────────────────────────────────── */

body > main > article > header,
body > main > .contact-page > header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: end;
  padding-block: var(--space-xl);
  border-block-end: 1px solid var(--peels-border-subtle);
  margin-block-end: var(--space-xl);

  @media (width >= 48rem) { grid-template-columns: 1fr 1fr; }

  & hgroup {
    & > p {
      font-size: var(--peels-text-xsmall);
      color: var(--peels-text-accent);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: var(--weight-semibold);
      margin-block-end: var(--space-xs);
    }

    & > h1 {
      font-size: clamp(2.5rem, 6vw, 5rem);
      font-weight: var(--demo-display-weight);
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin: 0;
    }
  }

  & .article-meta {
    font-size: var(--peels-text-xsmall);
    color: var(--peels-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--demo-eyebrow-tracking);
    margin: 0 0 var(--space-s);
  }

  & .article-lead {
    font-size: var(--peels-text-base);
    line-height: var(--peels-leading);
    color: var(--peels-text-muted);
    max-width: 45ch;
    margin: 0;
  }
}

/* ── Article body (deux colonnes content + aside) ────────── */

.article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  margin-block-end: var(--space-xl);

  & .article-aside { display: none; }

  @media (width >= 52rem) {
    grid-template-columns: minmax(0, 1fr) 16rem;

    & .article-aside { display: block; }
  }
}

.article-aside {
  background: var(--peels-surface-panel);
  padding: var(--space-m);
  font-size: var(--peels-text-small);
  line-height: var(--peels-leading);
  position: sticky;
  top: var(--space-m);

  & p { color: var(--peels-text-muted); margin: 0; }
  & strong { color: var(--peels-text-body); }
  & hr { margin-block: var(--space-s); }
  & ul {
    padding-inline-start: var(--space-m);
    color: var(--peels-text-muted);
    margin: 0;
  }
}

.article-pullquote {
  border: none;
  padding: var(--space-2xl) 0;
  border-block: 2px solid var(--peels-border-strong);
  margin-block: var(--space-2xl);

  & p {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: var(--demo-display-tracking);
    color: var(--peels-text-body);
    max-width: 42ch;
    margin: 0;
  }
}

/* ── Pager (demo-pagination) ────────────────────────────── */

/* Pager : la grille, les paddings, le hover et le séparateur viennent de
   peels-pagination (nav > a[rel]). La démo n'ajoute que son gabarit,
   ses knobs et sa typographie. */
main footer nav[aria-label="Pagination"] {
  --peels-pagination-pager-gap: var(--peels-gap-sm);
  --peels-pagination-pager-padding: var(--peels-gap-component);

  width: min(100%, var(--shop-max, 100%));
  margin-inline: auto;
  margin-block-start: var(--peels-gap-section);

  & a {
    & span:first-child {
      font-size: var(--peels-text-xsmall);
      text-transform: uppercase;
      letter-spacing: var(--demo-eyebrow-tracking);
      color: var(--peels-text-muted);
      font-weight: var(--peels-font-weight-ui);
    }

    & span:last-child {
      font-size: var(--size-step-2);
      font-weight: var(--demo-display-weight);
      line-height: var(--peels-line-height-flat);
      letter-spacing: var(--demo-display-tracking);
    }
  }
}

/* ── Contact ────────────────────────────────────────────── */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;

  @media (width >= 52rem) { grid-template-columns: 1fr 18rem; }
}

.contact-aside {
  background: var(--peels-surface-panel);
  padding: var(--space-m);
  font-size: var(--peels-text-small);
  line-height: var(--peels-leading);
  position: sticky;
  top: var(--space-m);

  & p { color: var(--peels-text-muted); margin: 0; }
  & strong { color: var(--peels-text-body); }
  & hr { margin-block: var(--space-s); }
  & details { --peels-details-margin-block: var(--space-xs) 0; }
  & summary { --peels-details-summary-color: var(--peels-text-body); cursor: pointer; }
  & ul {
    padding-inline-start: var(--space-m);
    color: var(--peels-text-muted);
    margin: var(--space-xs) 0 0;
  }
}

/* ── Shop ───────────────────────────────────────────────── */

/* Hero : gradient plein écran, overlay bas */
.shop-hero {
  position: relative;
  height: 40vh;
  min-height: 16rem;
  overflow: hidden;

  @media (width >= 48rem) { height: 55vh; min-height: 20rem; }

  & .shop-hero-visual {
    position: absolute;
    inset: 0;
    background: url('https://picsum.photos/seed/abstract-hero/1920/800.jpg') center/cover;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        oklch(0 0 0 / 0.65) 0%,
        oklch(0 0 0 / 0.1) 60%,
        transparent 100%
      );
    }
  }

  & .shop-hero-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-xl) var(--peels-gutter);
    gap: var(--space-xs);
    color: light-dark(white, white);
    width: min(100%, var(--shop-max));
    margin-inline: auto;

    & .shop-eyebrow {
      font-size: var(--peels-text-xsmall);
      text-transform: uppercase;
      letter-spacing: var(--demo-eyebrow-tracking);
      opacity: 0.7;
      margin: 0;
    }

    & h1 {
      font-size: var(--size-step-5);
      font-weight: var(--demo-display-weight);
      line-height: var(--demo-display-leading);
      letter-spacing: var(--demo-display-tracking);
      margin: 0;
      color: inherit;
    }

    & .shop-hero-cta {
      display: inline-block;
      margin-block-start: var(--space-s);
      padding: var(--space-xs) var(--space-m);
      border: 1px solid oklch(1 0 0 / 0.5);
      color: inherit;
      text-decoration: none;
      font-size: var(--peels-text-xsmall);
      font-weight: var(--weight-semibold);
      text-transform: uppercase;
      letter-spacing: var(--demo-eyebrow-tracking);
      width: fit-content;
      transition: background var(--peels-transition-duration-fast), border-color var(--peels-transition-duration-fast);

      &:hover { background: oklch(1 0 0 / 0.15); border-color: oklch(1 0 0); }
    }
  }
}

/* Nav catégories */
.shop-cats {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--peels-surface-page);
  border-block-end: var(--peels-border-width) solid var(--peels-border-subtle);
  overflow-x: auto;
  scrollbar-width: none;

  & ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-inline: var(--peels-gutter);
    white-space: nowrap;
    width: min(100%, var(--shop-max));
    margin-inline: auto;
  }

  & a {
    display: block;
    padding: var(--space-s) var(--space-m);
    font-size: var(--peels-text-xsmall);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--demo-eyebrow-tracking);
    text-decoration: none;
    color: var(--peels-text-muted);
    border-block-end: 2px solid transparent;
    transition: color var(--peels-transition-duration-fast), border-color var(--peels-transition-duration-fast);

    &:hover { color: var(--peels-text-body); }
    &[aria-current] {
      color: var(--peels-text-body);
      border-block-end-color: var(--peels-text-body);
    }
  }
}

/* Grille produits — gap, pas de bordures entre cartes */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
  padding: var(--space-xl) var(--peels-gutter);
  width: min(100%, var(--shop-max));
  margin-inline: auto;

  @media (width >= 32rem) { gap: var(--space-m); }
  @media (width >= 56rem) { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
}

/* Carte produit */
.shop-card {
  display: flex;
  flex-direction: column;
  background: var(--peels-surface-panel);
  border: var(--peels-border-width) solid var(--peels-border-subtle);
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
  transition: border-color var(--peels-transition-duration-fast), box-shadow var(--peels-transition-duration-fast);

  &:hover {
    border-color: var(--peels-border-strong);
    box-shadow: var(--peels-elevation-2);
  }
}

.shop-card-link {
  display: block;
  overflow: hidden;

  &:focus-visible { outline: 2px solid var(--peels-text-accent); outline-offset: -2px; }
}

.shop-card-image {
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--peels-transition-duration-base) var(--peels-transition-easing);

    &:hover { transform: scale(1.05); }
  }
}


.shop-card-body {
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;

  & .shop-card-tag {
    margin: 0;
    font-size: var(--peels-text-xsmall);
    text-transform: uppercase;
    letter-spacing: var(--demo-eyebrow-tracking);
    color: var(--peels-text-muted);
    font-weight: var(--weight-semibold);
  }

  & h2 {
    font-size: var(--peels-text-base);
    font-weight: var(--weight-semibold);
    margin: 0;
    line-height: 1.2;

    & a {
      text-decoration: none;
      color: var(--peels-text-body);

      &::after { content: ""; position: absolute; inset: 0; }
      &:hover { text-decoration: underline; }
    }
  }
}

.shop-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: auto;
  padding-block-start: var(--space-s);

  & button {
    --peels-btn-padding-block: 0;
    --peels-btn-padding-inline: 0;
    --peels-btn-min-height: 2rem;
    --peels-btn-font-scale: 1;

    inline-size: 2rem;
    font-weight: var(--weight-regular);
    flex-shrink: 0;
  }
}

.shop-price {
  font-size: var(--peels-text-base);
  font-weight: var(--demo-display-weight);
  letter-spacing: var(--demo-display-tracking);
}

/* Manifeste */
.shop-manifesto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  padding: var(--space-xl) var(--peels-gutter);
  border-block: var(--peels-border-width) solid var(--peels-border-subtle);
  width: min(100%, var(--shop-max));
  margin-inline: auto;

  & p {
    font-size: var(--size-step-3);
    font-weight: var(--demo-display-weight);
    line-height: var(--peels-line-height-flat);
    letter-spacing: var(--demo-display-tracking);
    margin: 0;
  }

  & a {
    font-size: var(--peels-text-xsmall);
    color: var(--peels-text-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--demo-eyebrow-tracking);
    font-weight: var(--weight-semibold);
    white-space: nowrap;

    &:hover { text-decoration: underline; }
  }
}

/* ── Footer ─────────────────────────────────────────────── */

body > footer {
  background: var(--peels-surface-panel);
  border-top: var(--peels-border-width) solid var(--peels-border-subtle);
  padding: var(--space-2xl) var(--peels-gutter);

  & > .footer-inner {
    width: min(100%, var(--demo-max));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);

    @media (width >= 32rem) {
      grid-template-columns: 1fr 1fr;
    }
    @media (width >= 48rem) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  & .footer-brand {
    & strong {
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: var(--demo-display-weight);
      line-height: 0.9;
      letter-spacing: -0.04em;
      display: block;
      margin-block-end: var(--space-s);
    }
    & p {
      font-size: var(--peels-text-small);
      color: var(--peels-text-muted);
      line-height: var(--peels-leading);
      max-width: 28ch;
      margin: 0 0 var(--space-m);
    }
    & small {
      font-size: var(--peels-text-xsmall);
      color: var(--peels-text-muted);
      opacity: 0.6;
    }
  }

  & .footer-links {
    & p {
      font-size: var(--peels-text-xsmall);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--peels-text-muted);
      font-weight: var(--weight-semibold);
      margin: 0 0 var(--space-s);
    }
    & ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);

      & a {
        font-size: var(--peels-text-small);
        color: var(--peels-text-muted);
        text-decoration: none;

        &:hover { color: var(--peels-text-body); }
      }
    }
  }

  & .footer-tech {
    & p {
      font-size: var(--peels-text-xsmall);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--peels-text-muted);
      font-weight: var(--weight-semibold);
      margin: 0 0 var(--space-s);
    }
    & ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);

      & li {
        font-size: var(--peels-text-small);
        color: var(--peels-text-muted);
      }
      & code {
        font-size: 0.9em;
      }
    }
  }
}

/* ── Directions — page de validation RTL / vertical ────── */

.directions-page {
  max-inline-size: var(--demo-wide);
  margin-inline: auto;
  padding: var(--space-l);

  & > .directions-hero {
    margin-block-end: var(--space-xl);

    & > p:first-child {
      color: var(--peels-text-muted);
      text-transform: uppercase;
      letter-spacing: var(--demo-eyebrow-tracking);
      font-size: var(--peels-text-small);
      margin: 0;
    }
    & > h1 {
      font-weight: var(--demo-display-weight);
      letter-spacing: var(--demo-display-tracking);
      line-height: var(--demo-display-leading);
      margin: var(--space-2xs) 0;
    }
    & > .directions-lead {
      max-inline-size: 62ch;
      color: var(--peels-text-muted);
    }
  }

  /* Trois cartes-interrupteurs : label + radio caché, switch CSS pur */
  & > .dir-mini > input[name="dir-view"] {
    display: none;
  }

  & > .dir-mini {
    display: grid;
    grid-auto-rows: 1fr;
    gap: var(--space-m);
    margin-block-end: var(--space-xl);

    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  & .dir-card {
    display: block;
    padding: var(--space-m);
    border: 1px solid var(--peels-border-subtle);
    border-radius: var(--radius-m);
    background: var(--peels-surface-panel-soft);
    overflow: hidden;
    cursor: pointer;

    & > h2 { margin: 0 0 var(--space-2xs); }
    & > p { margin: 0; }
  }

  /* Carte active : filet accent */
  & .dir-mini:has(#dir-view-fr:checked) .dir-card[for="dir-view-fr"],
  & .dir-mini:has(#dir-view-ar:checked) .dir-card[for="dir-view-ar"],
  & .dir-mini:has(#dir-view-zh:checked) .dir-card[for="dir-view-zh"] {
    border-color: var(--peels-color-highlight);
    box-shadow: inset 0 0 0 1px var(--peels-color-highlight);
  }

  /* Carte verticale : contenu en vertical-rl */
  & .dir-card.dir-vertical {
    writing-mode: vertical-rl;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  /* Panels : un seul visible selon le radio coché */
  & [data-dir-panel] {
    border: 1px solid var(--peels-border-subtle);
    border-radius: var(--radius-m);
    background: var(--peels-surface-page);
    padding: var(--space-l);
  }

  &:has(#dir-view-ar:checked) [data-dir-panel="fr"],
  &:has(#dir-view-zh:checked) [data-dir-panel="fr"],
  &:has(#dir-view-fr:checked) [data-dir-panel="ar"],
  &:has(#dir-view-zh:checked) [data-dir-panel="ar"],
  &:has(#dir-view-fr:checked) [data-dir-panel="zh"],
  &:has(#dir-view-ar:checked) [data-dir-panel="zh"] {
    display: none;
  }

  /* Panels : contenu pleine largeur */
  & .dir-flow {
    max-inline-size: 62ch;
  }

  /* Bloc vertical : la hauteur fixe crée le défilement horizontal */
  & .dir-vertical-page {
    & > .dir-vertical-flow {
      writing-mode: vertical-rl;
      height: 14rem;
      overflow-x: auto;
    }
  }

  /* Liens vers la doc — une ligne discrète */
  & > .dir-links {
    margin-block-start: var(--space-xl);
    color: var(--peels-text-muted);
    font-size: var(--peels-text-small);
  }
}

/* ── Accueil démo (index) — ancien landing de la doc ─────
   Reprend les styles de l'ancienne home.css (commit de1d31d),
   renommés dans l'espace demo-* pour ne plus entrer en conflit
   avec la home de la documentation. */

.demo-hero {
  display: grid;
  grid-template-columns: 1fr;

  @media (width >= 60rem) {
    grid-template-columns: 7fr 5fr;
  }
}

.demo-hero-lead {
  padding-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-l);

  @media (width >= 60rem) {
    padding-block: var(--space-2xl);
    padding-inline-end: var(--space-xl);
    border-inline-end: 1px solid var(--peels-border-subtle);
  }

  & .demo-kicker {
    font-family: var(--peels-font-mono);
    font-size: var(--peels-text-xsmall);
    text-transform: uppercase;
    letter-spacing: var(--demo-eyebrow-tracking);
    color: var(--peels-text-accent);
    margin: 0;
  }

  & h1 {
    font-size: clamp(2.75rem, 6vw, 5.25rem);
    font-weight: var(--demo-display-weight);
    line-height: 0.94;
    letter-spacing: -0.04em;
    color: var(--peels-text-body);
    margin: 0;

    & em {
      font-style: normal;
      color: var(--peels-headings-color);
    }
  }

  & .demo-deck {
    font-size: var(--peels-text-base);
    line-height: var(--peels-leading);
    color: var(--peels-text-muted);
    max-inline-size: 54ch;
    margin: 0;
  }
}

.demo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;

  & a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: var(--space-m);
    font-size: var(--peels-text-xsmall);
    font-weight: var(--peels-font-weight-ui);
    text-decoration: none;
    border-radius: var(--peels-component-radius);
    transition: background-color var(--peels-transition-duration-fast), border-color var(--peels-transition-duration-fast), color var(--peels-transition-duration-fast);
  }

  & .demo-btn-primary {
    background: var(--peels-btn-base);
    color: var(--peels-surface-page);
    border: 1px solid var(--peels-btn-base);

    &:hover {
      background: var(--peels-text-body);
      border-color: var(--peels-text-body);
    }
  }

  & .demo-btn-secondary {
    background: transparent;
    color: var(--peels-text-body);
    border: 1px solid var(--peels-border-subtle);

    &:hover {
      border-color: var(--peels-text-body);
      background: var(--peels-surface-hover);
    }
  }
}

.demo-layer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--peels-border-subtle);
  font-family: var(--peels-font-mono);
  font-size: var(--peels-text-xsmall);

  & > span {
    color: var(--peels-text-accent);
    font-weight: var(--peels-font-weight-ui);
    margin-inline-end: var(--space-3xs);
  }

  & ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;

    & li {
      color: var(--peels-text-muted);
      display: inline-flex;
      align-items: center;
      margin: 0;

      &:not(:last-child)::after {
        content: "→";
        margin-inline: 0.45em;
        opacity: 0.45;
      }
    }
  }
}

.demo-hero-specimen {
  padding-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;

  @media (width >= 60rem) {
    padding-block: var(--space-2xl);
    padding-inline-start: var(--space-xl);
  }

  & .demo-specimen-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block-end: var(--space-xs);
    margin-block-end: var(--space-s);
    border-block-end: 1px solid var(--peels-border-subtle);
    font-size: var(--peels-text-xsmall);
    text-transform: uppercase;
    letter-spacing: var(--demo-eyebrow-tracking);
    color: var(--peels-text-muted);

    & code {
      --peels-code-bg: transparent;
      --peels-code-padding: 0;
      --peels-code-font-size: inherit;

      color: var(--peels-text-accent);
    }
  }
}

.demo-section {
  padding-block: var(--space-2xl);
  border-block-end: 1px solid var(--peels-border-subtle);
}

/* Variante plein cadre : filets bord à bord, contenu plus large —
   seulement quand la page a de la marge */
@media (width >= 48rem) {
  .demo-wide {
    max-width: none;
    margin-inline: calc(-1 * var(--peels-gutter));
    padding-inline: var(--peels-gutter);
    border-block-start: 1px solid var(--peels-border-subtle);

    & > * {
      width: 100%;
      max-width: var(--demo-wide);
      margin-inline: auto;
    }
  }
}

.demo-section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  align-items: end;
  margin-block-end: var(--space-xl);

  @media (width >= 52rem) {
    grid-template-columns: 5rem 1fr 1fr;
    gap: var(--space-l);
  }

  & .demo-section-idx {
    font-family: var(--peels-font-mono);
    font-size: var(--size-step-3);
    font-weight: var(--demo-display-weight);
    line-height: 1;
    color: var(--peels-text-accent);
    letter-spacing: -0.04em;
  }

  & h2 {
    font-size: clamp(1.85rem, 3.8vw, 3rem);
    font-weight: var(--demo-display-weight);
    line-height: 0.96;
    letter-spacing: -0.03em;
    color: var(--peels-text-body);
    margin: 0;
  }

  & p {
    font-size: var(--peels-text-small);
    line-height: var(--peels-leading);
    color: var(--peels-text-muted);
    max-inline-size: 46ch;
    margin: 0;
  }
}

.demo-pillars {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--peels-border-subtle);

  @media (width >= 56rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.demo-pillar {
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  background: var(--peels-surface-page);

  &:not(:last-child) {
    border-block-end: 1px solid var(--peels-border-subtle);

    @media (width >= 56rem) {
      border-block-end: none;
      border-inline-end: 1px solid var(--peels-border-subtle);
    }
  }

  & > header {
    & span {
      display: block;
      font-family: var(--peels-font-mono);
      font-size: var(--peels-text-xsmall);
      text-transform: uppercase;
      letter-spacing: var(--demo-eyebrow-tracking);
      color: var(--peels-text-accent);
      margin-block-end: var(--space-3xs);
    }

    & h3 {
      font-size: var(--size-step-1);
      margin: 0;
      color: var(--peels-text-body);
    }
  }

  & > p {
    font-size: var(--peels-text-small);
    color: var(--peels-text-muted);
    line-height: var(--peels-leading);
    margin: 0;
    flex: 1;
  }

  & > pre {
    --peels-pre-bg: var(--peels-surface-panel);
    --peels-pre-border: 1px solid var(--peels-border-subtle);
    --peels-pre-padding: var(--space-s);

    margin: 0;
    font-size: var(--peels-text-xsmall);
  }
}

.demo-directory {
  border-block-start: 1px solid var(--peels-border-subtle);
}

.demo-dir-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-block-end: 1px solid var(--peels-border-subtle);
  align-items: baseline;
  transition: background-color var(--peels-transition-duration-fast);

  @media (width >= 48rem) {
    grid-template-columns: 18rem 1fr;
    gap: var(--space-xl);
  }

  &:hover {
    background-color: color-mix(in oklch, var(--peels-surface-panel) 50%, transparent);
  }

  & .demo-dir-cat {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);

    & .demo-dir-num {
      font-family: var(--peels-font-mono);
      font-size: var(--peels-text-xsmall);
      color: var(--peels-text-accent);
      font-weight: var(--peels-font-weight-ui);
    }

    & h3 {
      font-size: var(--size-step-1);
      margin: 0;
      line-height: 1.2;

      & a {
        text-decoration: none;
        color: var(--peels-text-body);
        display: inline-flex;
        align-items: baseline;
        gap: var(--space-2xs);

        & span:last-child {
          font-size: 0.8em;
          opacity: 0.35;
          transition: transform var(--peels-transition-duration-fast), opacity var(--peels-transition-duration-fast);
        }

        &:hover {
          color: var(--peels-text-accent);

          & span:last-child {
            opacity: 1;
            transform: translateX(3px);
          }
        }
      }
    }
  }

  & .demo-dir-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-2xs);
    column-gap: 0;

    & li {
      display: inline-flex;
      align-items: center;
      margin: 0;

      &:not(:last-child)::after {
        content: "/";
        margin-inline: 0.55rem;
        color: var(--peels-border-subtle);
        font-family: var(--peels-font-mono);
        font-size: var(--peels-text-xsmall);
      }
    }

    & a {
      font-size: var(--peels-text-small);
      color: var(--peels-text-muted);
      text-decoration: none;
      transition: color var(--peels-transition-duration-fast);

      &:hover {
        color: var(--peels-text-body);
        text-decoration: underline;
      }
    }
  }
}

.demo-demos {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--peels-border-subtle);
  border-left: 1px solid var(--peels-border-subtle);

  @media (width >= 40rem) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width >= 64rem) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.demo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l);
  text-decoration: none;
  color: var(--peels-text-body);
  border-right: 1px solid var(--peels-border-subtle);
  border-bottom: 1px solid var(--peels-border-subtle);
  transition: background-color var(--peels-transition-duration-fast);

  &:hover {
    background-color: var(--peels-surface-panel);

    & .demo-card-go {
      color: var(--peels-text-accent);
      transform: translateX(3px);
    }
  }

  & .demo-card-type {
    font-family: var(--peels-font-mono);
    font-size: var(--peels-text-xsmall);
    text-transform: uppercase;
    letter-spacing: var(--demo-eyebrow-tracking);
    color: var(--peels-text-accent);
  }

  & h3 {
    font-size: var(--size-step-1);
    color: var(--peels-text-body);
    margin: 0;
  }

  & p {
    font-size: var(--peels-text-small);
    color: var(--peels-text-muted);
    line-height: var(--peels-leading);
    margin: 0;
    flex: 1;
  }

  & .demo-card-go {
    margin-block-start: var(--space-s);
    font-size: var(--peels-text-xsmall);
    font-weight: var(--peels-font-weight-ui);
    color: var(--peels-text-body);
    display: inline-block;
    transition: transform var(--peels-transition-duration-fast), color var(--peels-transition-duration-fast);
  }
}