/* Bloc villemont/vignettes — styles venus de sections.css (refonte 1e) */

/* ── Chapters grid ────────────────────────────────────────── */

.chapters-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {

  .chapters-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile : carrousel à swipe horizontal (scroll-snap natif, contenu dans la largeur) */
@media (max-width: 640px) {

  .chapters-grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    scrollbar-width: none;
  }

  .chapters-grid::-webkit-scrollbar { display: none; }

  .chapters-grid > * {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  /* Flèches rondes, bordeaux translucide, centrées sur les images (--arrow-top posé par main.js). */
  .chapters-carousel { position: relative; }

  .carousel-arrow {
    position: absolute; z-index: 2; top: var(--arrow-top, 38%); transform: translateY(-50%);
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--burgundy) 72%, transparent); color: var(--bone);
    box-shadow: 0 2px 10px rgba(var(--ink-rgb), 0.18);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    transition: opacity var(--transition);
  }

  .carousel-arrow[hidden] { display: none; }

  .carousel-arrow--prev { left: 8px; }

  .carousel-arrow--next { right: 8px; }

  .carousel-arrow:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
}

@media (min-width: 641px) {

 .carousel-arrow { display: none; } }

/* ── Accueil — vignettes « L'histoire de Villemont » : typographie du site ── */
.vignette__year { font-size: var(--fs-numeral); margin-bottom: 6px; }

.vignette__desc { font-family: var(--serif); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }