/* ═══════════ Les catalogues rangés par thème (affiches et bracelets) ═══════════
 *
 * Servie **seulement** sur les collections des affiches et des bracelets (`views/collection.liquid`, quand elle a des
 * thèmes). Écrite pour un téléphone d'abord : neuf visiteurs sur dix y sont, et c'est là que la page
 * d'avant perdait — le texte d'accroche et vingt pastilles d'occasion en rangées empilées poussaient
 * la première affiche à plus de 1 400 px, deux écrans et demi plus bas. Ici la première affiche
 * paraît dans le premier écran, et tout ce qui est « choisir » défile au doigt sur **une** ligne.
 *
 * Aucune couleur écrite ici : tout vient des rôles de la charte (`:root`, `theme.css`).
 *
 * ── Ce qui tient la page ──
 * - **la barre des thèmes** est une ligne qui défile (`scroll-snap`), jamais une grille de
 *   pastilles : cinq rangées de plus ne servent à personne. Sans marge négative : elle élargirait
 *   le document entier. Chaque lien fait 44 px ; une pastille coupée au bord dit qu'il y a autre
 *   chose à voir ;
 * - **les sections** ont une ancre, et `scroll-margin-top` pour qu'un lien d'ancre ne colle pas le
 *   titre au bord de l'écran ;
 * - **le bandeau des occasions** (`.occasions-nav--rangee`) passe lui aussi sur une ligne. Il garde
 *   sa place d'avant la grille — c'est là qu'on s'aperçoit qu'on cherchait un cadeau pour quelqu'un —,
 *   mais ne coûte plus que 90 px au lieu de 400.
 */
.themes-nav { margin: 1.2rem 0 0; }
/* La pastille de recherche : la forme du champ qu'elle ouvre, 44 px de haut — la cible tactile minimale. Elle pousse la
   première affiche de 54 px ; à 320 px, la limite tenue par l'essai des thèmes (800 px) laisse quatre pixels. */
.rech-declencheur {
  display: flex; align-items: center; gap: 1rem; min-height: 4.4rem; margin: 1rem 0 0; padding: 0 1.6rem;
  border: .1rem solid rgba(var(--color-foreground), .3); border-radius: 99rem; background: rgb(var(--creme));
  color: rgb(var(--encre-douce)); font-size: 1.5rem; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.rech-declencheur svg { flex: none; }
.rech-declencheur span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rech-declencheur:hover { border-color: rgb(var(--color-foreground)); }
.rech-declencheur:focus-visible { outline: .2rem solid rgba(var(--color-accent), .8); outline-offset: .2rem; }
@media (min-width: 750px) { .rech-declencheur { max-width: 48rem; } }
/* **Collante sur téléphone** (28 oct. 2026, audit mobile) : la barre défile avec la page, et une fois dans le
   thème des rires on était à 11 000 px d'elle — pour changer de thème il fallait remonter. Collée sous le haut de
   l'écran, elle reste à un tap. Fond opaque (sans lui les cartes passent dessous) et filet. Au-delà de 750 px
   elle se replie en rangées : une barre de trois rangées collée mangerait l'écran, elle reste dans la page. */
@media screen and (max-width: 749px) {
  .themes-nav {
    position: sticky; top: 0; z-index: 5; margin: 1.2rem 0 0;
    background: rgb(var(--color-background)); border-bottom: .1rem solid rgba(var(--color-foreground), .12);
  }
  .themes-nav__liste { padding-bottom: .4rem; }
}
/* Le texte d'accroche sert le référencement et reste lisible, mais il ne repousse plus la première affiche : sur ce catalogue, la barre des thèmes dit déjà ce que la page contient. */
.collection-hero__description--themes { font-size: 1.5rem; line-height: 1.4; }
.collection-hero__description--themes p { margin: 0; }
.themes-nav__titre {
  margin: 0 0 .8rem; font-size: 1.2rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--encre-pale));
}
.themes-nav__liste, .occasions-nav--rangee .occasions-nav__liste {
  /* Le cercle de focus déborde de 4 px : sans ce rembourrage, un conteneur qui défile (`overflow-x`
     coupe aussi en hauteur) le rogne en haut et à gauche du premier lien. */
  list-style: none; margin: 0; padding: .4rem .4rem .6rem; display: flex; flex-wrap: nowrap; gap: .8rem;
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.themes-nav__liste li, .occasions-nav--rangee .occasions-nav__liste li { flex: none; scroll-snap-align: start; }
.themes-nav__lien {
  display: flex; align-items: center; min-height: 4.4rem; padding: 0 1.6rem; white-space: nowrap;
  border: .1rem solid rgba(var(--color-foreground), .25); border-radius: 2.2rem;
  font-size: 1.5rem; font-weight: 600; text-decoration: none; color: rgb(var(--color-foreground));
  background: rgb(var(--creme));
}
.themes-nav__lien:hover { border-color: rgb(var(--color-foreground)); }
/* Le thème en cours (`js/themes.js`) : un fond plein, que la bordure fine des autres ne confond pas. */
.themes-nav__lien[aria-current="true"] { background: rgb(var(--navy)); border-color: rgb(var(--navy)); color: #fff; }
.themes-nav__lien:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }

/* Le bandeau des occasions, sur une ligne, plus discret que les thèmes : on y vient pour un cadeau. */
.occasions-nav--rangee { margin: 1.2rem 0 0; }
.occasions-nav--rangee .occasions-nav__titre { margin: 0 0 .8rem; font-size: 1.2rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--encre-pale)); }
.occasions-nav--rangee .occasions-nav__lien { font-size: 1.4rem; white-space: nowrap; }

.theme { margin: 3rem 0 0; scroll-margin-top: 8.4rem; }
@media screen and (min-width: 750px) { .theme { scroll-margin-top: 1.6rem; } }
/* Le titre et le compte sur une ligne : un écran de téléphone ne peut pas payer deux lignes d'en-tête par thème. */
.theme__entete { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem 1.2rem; }
.theme__titre { margin: 0; font-size: 2.4rem; line-height: 1.2; }
.theme__compte { margin: 0; font-size: 1.3rem; color: rgb(var(--encre-pale)); }
.theme__intro { margin: .8rem 0 1.4rem; font-size: 1.5rem; line-height: 1.5; color: rgb(var(--encre-douce)); max-width: 72rem; }
.theme .product-grid { margin-top: 0; }
/* Deux lignes de titre au plus, et la place de deux lignes réservée : les prix tombent à la même hauteur d'une carte à
   l'autre. Le titre entier est dans la fiche ; la carte n'a que sa première partie (`titre_court`). */
.theme .card__heading { min-height: 2.8em; }
.theme .card__heading a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Au-delà d'un téléphone la place existe : les rangées se replient en lignes, les thèmes en une
   rangée, et le titre de section grandit. */
@media screen and (min-width: 750px) {
  .themes-nav__liste, .occasions-nav--rangee .occasions-nav__liste { flex-wrap: wrap; overflow: visible; padding: .4rem .4rem 0; }
  .theme { margin-top: 6rem; }
  .theme__titre { font-size: 3rem; }
  .theme__intro { font-size: 1.8rem; margin-bottom: 2rem; }
}

/* Le texte long d'un catalogue (« ce qu'il faut savoir »), après les thèmes et avant les questions. */
.collection__apropos { margin: 5rem 0 0; max-width: 78rem; }
.collection__apropos-titre { margin: 0 0 1rem; font-size: 2.2rem; line-height: 1.25; }
.collection__apropos .rte p { margin: 0 0 1.2rem; font-size: 1.5rem; line-height: 1.55; color: rgb(var(--encre-douce)); }
@media screen and (min-width: 750px) { .collection__apropos .rte p { font-size: 1.7rem; } }