/* Peels - Page d'accueil (fr/en)
   Styles propres a la landing. N'est PAS distribue avec Peels.
   S'applique par-dessus peels.css + main.css (chrome doc).
   ================================================== */

:root {
  --home-max:              82rem;
  --home-wide:             96rem;
  --home-eyebrow-tracking: 0.08em;
  --home-display-weight:   900;
  --home-display-tracking: -0.03em;
  --home-display-leading:  0.96;
}

/* Conteneur : neutralise le centrage flex de main.css */
body > main.home-canvas {
  display: block;
  padding-block-start: 0;
  padding-block-end: var(--peels-gap-section);
  padding-inline: var(--peels-gutter);
}

:where(body > main.home-canvas) > * {
  width: 100%;
  max-width: var(--home-max);
  margin-inline: auto;
}

/* ── Accueil — Hero minimaliste ────────────────────────── */

.home-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-l);
  padding-block: var(--space-l);
  text-align: center;

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

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

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

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

  & > small {
    font-family: var(--peels-font-mono);
    font-size: var(--peels-text-xsmall);
    color: var(--peels-text-muted);
  }
}

.home-hero nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
  text-align: center;

  & a {
    font-weight: var(--peels-font-weight-ui);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.3em;
    text-decoration-color: var(--peels-border-subtle);
    transition: text-decoration-color var(--peels-transition-duration-fast), color var(--peels-transition-duration-fast);
  }

  & a:first-of-type {
    color: var(--peels-text-link);
    text-decoration-color: currentColor;
  }

  & a:last-of-type {
    font-size: var(--peels-text-base);
  }

  & a:hover {
    color: var(--peels-text-link);
    text-decoration-color: currentColor;
  }
}

/* ── Sections numérotées (01, 02, 03) ───────────────────── */

.home-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 (sinon la section colle aux bords) */
@media (width >= 48rem) {
  .home-wide {
    max-width: none;
    padding-inline: var(--peels-gutter);
    border-block-start: 1px solid var(--peels-border-subtle);

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

.home-section > header {
  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: 1fr 1fr;
    gap: var(--space-l);
  }

  & h2 {
    font-size: clamp(1.85rem, 3.8vw, 3rem);
    font-weight: var(--home-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;
  }
}

/* ── 01. Les 3 Piliers (grille architecturale continue) ─── */

/* Une carte par ligne : le code vit à côté du texte, la carte a besoin
   de toute la largeur */
.home-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-xs);
}

.home-pillars > article {
  min-inline-size: 0;
  padding: var(--space-l);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  background: var(--peels-surface-page);

  /* Titre à gauche, extrait de code à droite dès que la carte a la place */
  @media (width >= 34rem) {
    
  }

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

  & > 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);
    max-block-size: fit-content;
  }
}

/* ── 02. Éléments en vrac ───────────────────────────────── */

.home-elements,
.home-people {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;

  & li {
    display: inline-block;
    margin: 0 -0.25em;

    &::before,
    &::after {
      content: "·";
      margin-inline: 0.5em;
      color: var(--peels-border-subtle);
    }

    &::before {
      margin-inline-start: 0;
    }

    &::after {
      margin-inline-end: 0;
    }
  }

  & a {
    font-size: var(--peels-text-base);
    color: var(--peels-text-muted);
    text-decoration-color: var(--peels-border-subtle);
    text-underline-offset: 0.25em;
    transition: color var(--peels-transition-duration-fast);

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

  
}
.home-people a {
    font-size: var(--peels-text-xsmall);
  }

/* ── 03. Personnes : titre du mur ──────────────────────── */

.home-section > h2 {
  font-weight: var(--home-display-weight);
  text-align: left;
  margin: 0 0 var(--space-l);
}