/* Page « Nos imprimés » : bandeau vidéo, filtres, grille de cartes.
   Les règles de base (.r-motif, .r-motifs-index, .seq) restent dans refonte.css. */

/* ---- Bandeau vidéo (en-tête de page) ---- */
.imp-tete { position: relative; overflow: hidden; isolation: isolate; background: #FCFBFA; }
.imp-tete__fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.imp-tete__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(252, 251, 250, .78) 0%, rgba(252, 251, 250, .66) 60%, rgba(252, 251, 250, .9) 100%);
}
@media (prefers-reduced-motion: reduce) { .imp-tete__fond { display: none; } }

/* ---- Filtres par produit ---- */
.imp-filtres {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-top: 2.25rem; padding-inline: var(--sp-gutter);
}
.imp-filtres button {
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--r-ink, #2B2B2B);
  border: 1px solid var(--r-ink, #2B2B2B);
  transition: background .25s ease, color .25s ease;
}
.imp-filtres button:hover { background: var(--r-ink, #2B2B2B); color: #FCFBFA; }
.imp-filtres button[aria-pressed="true"] { background: var(--r-ink, #2B2B2B); color: #FCFBFA; }
.imp-filtres button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ---- Titres de famille ---- */
.imp-famille {
  max-width: var(--w-max); margin: 3.5rem auto 1.75rem;
  padding-inline: var(--sp-gutter); text-align: center;
}
.imp-famille[hidden] { display: none; }

/* ---- Grille de cartes ---- */
.imp-grille { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.imp-grille[hidden] { display: none; }
@media (min-width: 40rem) { .imp-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .imp-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.imp-grille > .r-section { padding-block: 0; background: var(--r-bg-pure, #fff); border-radius: 1.25rem; }
.imp-grille > .r-section > .wrap { padding: 1.25rem; }
.imp-grille > section[hidden] { display: none; }
.imp-grille .r-motif { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.imp-grille .r-motif__vues:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Liens de chaque imprimé : quatre pastilles teintées par la carte, accessoires en ligne discrète. */
.imp-grille .r-motif__cta { display: block; }
.imp-pastilles { display: flex; flex-wrap: wrap; gap: .5rem; }
/* La pastille prend la couleur pleine de la carte (--arc, la suite violet, menthe,
   corail, jaune, rose). Le texte est encre, sauf sur le violet où il passe en blanc. */
.imp-grille .imp-pastille {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border-radius: 999px; border: 0;
  background: var(--arc, #6128FF); color: var(--pastille-texte, var(--r-ink));
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
.imp-grille > section:nth-child(5n + 1) { --pastille-texte: #FFFFFF; }
.imp-grille .imp-pastille::after {
  content: "→"; display: inline-block; line-height: 1;
  transition: transform .25s ease;
}
.imp-grille .r-motif__cta .imp-pastille:hover { background: var(--arc, #6128FF); color: var(--pastille-texte, var(--r-ink)); }
.imp-grille .imp-pastille:hover { box-shadow: inset 0 0 0 2px var(--r-ink), 0 0 0 2px var(--r-bg-pure); transform: translateY(-1px); }
.imp-grille .imp-pastille:hover::after { transform: translateX(3px); }
.imp-grille .imp-pastille:focus-visible { outline: 2px solid var(--encre, #6128FF); outline-offset: 3px; }

.imp-accessoires {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem;
  margin-top: 1rem; font-size: var(--fs-sm); color: var(--r-ink-soft, #5a5652);
}
.imp-accessoires > span { width: 100%; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.imp-grille .imp-accessoires a {
  padding: 0; border: 0; border-radius: 0; background: none; display: inline;
  color: inherit; text-decoration: underline; text-decoration-color: var(--encre, #6128FF); text-underline-offset: 3px;
}
.imp-grille .imp-accessoires a:hover { background: none; border: 0; color: var(--r-ink, #141312); }

/* L'index d'ancres masque les pastilles dont la fiche est filtrée. */
.r-motifs-index a[hidden] { display: none; }