/* ---- catalogue.css ---- */
/* ---------- Page /catalogue (préfixe cat-) ----------
   Partagée avec /produit et /marque : la vignette (.cat-carte) et la grille
   sont les mêmes partout, une seule définition à tenir. */

/* Largeur du catalogue sur grand écran (recette d'Alban du 01/10/2026, cas 10,
   note 251 : « en desktop augmenter la largeur max du catalogue »).
   1400 px est la largeur maximale déjà posée par l'en-tête du site
   (`.header-barre` dans site.css) : le catalogue était le seul bloc plus
   étroit que son propre en-tête. Aucune valeur inventée, la grille s'aligne
   enfin sur le logo et le menu. Le bandeau de filtres passe de 250 à 288 px,
   soit les +15 % demandés. Ces variables ne servent qu'au catalogue : les
   pages /produit et /marque gardent leur largeur. */
.cat-bandeau,
.cat-collant-contenu,
.cat-corps {
  --cat-largeur: 1400px;
  --cat-colonne-filtres: 288px;
}
.cat-bandeau {
  background: var(--beige);
  padding: 24px 20px 0;
  max-width: var(--cat-largeur);
  margin: 0 auto;
}
.cat-ariane { font-size: 13px; margin: 0 0 16px; }
.cat-ariane a { font-weight: 700; }
.cat-recherche-titre { font-weight: 700; margin: 0 0 8px; }

/* Barre collante (recette du 25/09/2026, cas 10) : la recherche et le tri
   restent sous l'en-tête du site pendant le défilement. `--cat-haut-entete`
   est la hauteur réelle de l'en-tête, posée par site.js ; 74 px est celle de
   l'en-tête sur écran large, au cas où le script ne tournerait pas. */
.cat-collant {
  position: sticky;
  top: var(--cat-haut-entete, 74px);
  z-index: 40;
  background: var(--beige);
  border-bottom: 1px solid var(--gris-bordure);
}
.cat-collant-contenu {
  max-width: var(--cat-largeur);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-recherche {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}
.cat-recherche input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--gris-bordure);
  border-radius: 999px;
  font-family: var(--police-corps);
  background: var(--blanc);
}
.cat-compteur { margin: 0 0 12px; font-size: 14px; font-weight: 700; }

/* Le bouton « Filtres » ouvre le tiroir, à toutes les largeurs (CA-01). */
.cat-bouton-filtres {
  display: inline-block;
  background: var(--blanc);
  border: 1px solid var(--craie);
  color: var(--craie);
  white-space: nowrap;
}
.cat-bouton-filtres-nb {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--craie); color: var(--blanc);
  font-size: 12px; line-height: 20px; text-align: center;
}

/* Panneau de suggestions, ouvert par site.js sous le champ de recherche. */
.cat-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 16px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ll-craie) 12%, transparent);
  padding: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.cat-suggestions[hidden] { display: none; }
.cat-sug-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 6px 0; color: var(--craie); }
.cat-sug-pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cat-sug-pastille {
  border: 1px solid var(--gris-bordure); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; text-decoration: none;
}
.cat-sug-produits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cat-sug-produit { display: flex; gap: 8px; align-items: center; text-decoration: none; padding: 6px; border-radius: 10px; }
.cat-sug-produit:hover, .cat-sug-produit:focus-visible { background: var(--beige); }
.cat-sug-produit img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.cat-sug-nom { font-weight: 700; font-size: 13px; }
.cat-sug-marque { font-size: 12px; color: var(--craie); }

.cat-corps {
  max-width: var(--cat-largeur);
  margin: 0 auto;
  /* 32 px en bas : un peu d'air entre les dernières vignettes et le pied de
     page quand la pagination est masquée (retouche du cas 10). */
  padding: 16px 20px 32px;
}
.cat-resultats { min-width: 0; }
/* Consolidation des maquettes (cas 243, CA-01) : les filtres vivent dans un
   tiroir à toutes les largeurs, ouvert par le bouton « Filtres » de la barre.
   Sur ordinateur, un panneau de 420 px qui sort de la droite ; en mobile, une
   feuille qui monte du bas (88 % de la hauteur, coins de 32 px, voir plus
   bas). Le panneau est un `popover` HTML : fermé, le navigateur le masque. */
.cat-filtres[popover] { display: none; }
.cat-filtres[popover]:popover-open {
  display: flex; flex-direction: column;
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%); max-width: none;
  height: 100%; max-height: none;
  margin: 0; padding: 0 20px;
  color: inherit;
  border: 0; border-radius: 0;
  background: var(--beige);
  overflow-y: auto; overscroll-behavior: contain;
}
.cat-filtres[popover]::backdrop { background: var(--ombre); }
.cat-filtres .cat-panneau-tete {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1;
  margin: 0 -20px; padding: 14px 20px;
  background: var(--beige); border-bottom: 1px solid var(--gris-bordure);
}
.cat-panneau-titre { margin: 0; font-weight: 700; font-size: 18px; }
.cat-panneau-croix {
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: var(--blanc); color: var(--craie); font-size: 18px; cursor: pointer;
}
.cat-filtres .cat-panneau-pied {
  display: block;
  position: sticky; bottom: 0;
  margin: auto -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--beige); border-top: 1px solid var(--gris-bordure);
}
.cat-panneau-pied .btn { width: 100%; }
/* Pendant que « Voir les N jeux » se recompte (état « chargement » de la
   maquette, non dessiné) : le bouton s'estompe un instant. */
.cat-filtres[aria-busy="true"] .cat-panneau-voir { opacity: .7; }
/* « Tout le catalogue », sous la vitrine (CA-01). */
.cat-tout-titre { margin: 32px 0 8px; font-size: 24px; scroll-margin-top: calc(var(--cat-haut-entete, 74px) + var(--cat-haut-barre, 110px) + 12px); }
/* Panneau des filtres refait d'après la maquette de Morgane (#771,
   `catalogue/03-panneau-filtres`) : rubriques séparées d'un filet, titres en
   Neulis, de vraies cases à cocher d'un formulaire GET. */
.cat-filtres .cat-panneau-titre { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
/* Le `padding-top` d'un `fieldset` se pose sous sa légende : l'air du haut
   de la rubrique est donc porté par la légende elle-même. */
.cat-filtre-groupe { min-width: 0; margin: 0; border: 0; border-bottom: 1px solid var(--gris-bordure); padding: 0 0 18px; }
.cat-filtre-groupe:last-of-type { border-bottom: none; }
.cat-filtre-titre { padding: 18px 0 0; margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 19px; }
.cat-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.cat-options li[hidden] { display: none; }

/* Une case : la vraie case à cocher, puis son libellé, qui reste un lien vers
   la liste avec cette seule case basculée (les robots la suivent, note 590 ;
   sans script, un clic l'applique tout de suite). Avec le script, le lien
   n'est plus qu'un libellé. Couleurs de la charte : coche Ciel, contour Craie. */
.cat-case { display: flex; align-items: flex-start; gap: 12px; padding: 3px 0; cursor: pointer; }
.cat-case input {
  appearance: none; flex: none; display: grid; place-content: center;
  width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--ll-craie-400); border-radius: 5px; background: var(--ll-blanc-50); cursor: pointer;
}
.cat-case input:checked { background: var(--ll-ciel-400); }
.cat-case input:checked::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border: solid var(--ll-craie-400); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.cat-case input:focus-visible, .cat-interrupteur input:focus-visible { outline: 2px solid var(--ll-ciel-500); outline-offset: 2px; }
.cat-case-lien { color: inherit; text-decoration: none; }
/* Le nombre de jeux derrière la case (cas 12). Une case qui ne rendrait rien
   reste cliquable mais s'efface, comme sur un site marchand ordinaire. */
.cat-case-nb { font-weight: 400; opacity: .7; }

/* « Afficher uniquement » : un interrupteur, libellé à gauche. */
.cat-interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; cursor: pointer; }
.cat-interrupteur input {
  appearance: none; flex: none; position: relative;
  width: 44px; height: 26px; margin: 0; border-radius: 999px;
  background: var(--ll-craie-100); cursor: pointer; transition: background .15s;
}
.cat-interrupteur input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--ll-blanc-50);
  transition: transform .15s;
}
.cat-interrupteur input:checked { background: var(--ll-ciel-400); }
.cat-interrupteur input:checked::after { transform: translateX(18px); }

/* « Pour qui ? » et « Quels jeux ? » : des boutons pilules. La case couvre
   toute la pilule, invisible : un clic n'importe où la coche. */
.cat-pilules { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-pilules-colonne { flex-direction: column; align-items: flex-start; }
.cat-pilule {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; box-sizing: border-box; padding: 4px 18px 4px 5px;
  border: 1.5px solid var(--ll-craie-100); border-radius: 999px; background: var(--ll-blanc-50);
  font-size: 14px; cursor: pointer;
}
.cat-pilule input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cat-pilule:has(input:focus-visible) { outline: 2px solid var(--ll-ciel-500); outline-offset: 2px; }
.cat-pilule.est-cochee, .cat-pilule:has(input:checked) { background: var(--ll-ciel-400); border-color: var(--ll-craie-400); }
.cat-pilule:not(:has(input:checked)) { background: var(--ll-blanc-50); border-color: var(--ll-craie-100); }
.cat-pilule.est-vide { opacity: .45; cursor: default; }
.cat-pilule.est-vide input { cursor: default; }
.cat-pilule-picto, .cat-pilule-initiale {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%; background: var(--ll-framboise-300); font-weight: 700;
}
.cat-pilule-initiale { background: var(--ll-ciel-200); }
.cat-pilule-enfant[data-teinte="1"] .cat-pilule-initiale { background: var(--ll-jasmin-400); }

/* Le bandeau des filtres cochés, sous le titre : « 3 filtres
   sélectionnés », « tout décocher », une pastille à croix par filtre. La
   pastille est le libellé de la case : un clic la décoche, sans script. */
.cat-selection { padding: 16px 0; border-bottom: 1px solid var(--gris-bordure); }
.cat-selection[hidden] { display: none; }
.cat-selection-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cat-selection-nb { margin: 0; font-size: 14px; }
.cat-selection-raz {
  font-size: 14px; font-weight: 700; color: inherit;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--ll-ciel-400);
}
.cat-selection-pastilles { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-sel-pastille {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px;
  border: 1.5px solid var(--ll-craie-400); border-radius: 999px; background: var(--ll-ciel-400);
  font-size: 13px; cursor: pointer;
}
.cat-sel-pastille::before { content: "✓"; font-size: 11px; }
.cat-sel-croix { font-size: 10px; }

/* « Marques » : champ de recherche (montré par le script), six marques, puis
   « Voir toutes les marques (N) ». */
.cat-marques-recherche {
  display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin: 0 0 10px; padding: 10px 18px;
  border: 1.5px solid var(--ll-craie-400); border-radius: 999px; background: var(--ll-blanc-50);
  font-family: inherit; font-size: 14px; color: inherit;
}
.cat-marques-recherche[hidden] { display: none; }
.cat-marques-autres { margin-top: 4px; }
.cat-marques-autres > summary { list-style: none; cursor: pointer; padding: 6px 0; font-size: 14px; font-weight: 700; }
.cat-marques-autres > summary::-webkit-details-marker { display: none; }
.cat-marques-autres[open] > summary { display: none; }
/* Note 265 d'Alban (01/10/2026) : le dernier mot du libellé et son nombre ne
   se séparent pas, pour que « (156) » ne tombe jamais seul sur la ligne
   suivante. Le reste du libellé revient à la ligne normalement. Libellé et
   nombre forment un seul élément flex : la gouttière de `.cat-case` ne
   s'intercale plus entre eux. */
.cat-case-libelle { min-width: 0; }
.cat-case-fin { white-space: nowrap; }
.cat-case.est-vide { opacity: .45; }

/* Le compteur et, à sa droite, le tri (#769) : un menu déroulant plutôt que
   des pastilles. Sans script, le bouton « Trier » l'applique ; le script le
   cache et applique le choix tout de suite. */
.cat-compteur-ligne {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin: 0 0 12px;
}
.cat-compteur-ligne .cat-compteur { margin: 0; }
.cat-tri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.cat-tri-titre { color: var(--ll-craie-300); }
.cat-tri-choix {
  appearance: none; min-height: 40px; box-sizing: border-box; padding: 6px 38px 6px 16px;
  border: 1.5px solid var(--ll-craie-400); border-radius: 999px; color: inherit;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  /* Le chevron, dessiné en deux dégradés de la couleur du texte. */
  background:
    linear-gradient(45deg, transparent 50%, var(--ll-craie-400) 50%) calc(100% - 20px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--ll-craie-400) 50%, transparent 50%) calc(100% - 14px) 50% / 6px 6px no-repeat,
    var(--ll-blanc-50);
}
.cat-tri-choix:focus-visible { outline: 2px solid var(--ll-ciel-500); outline-offset: 2px; }
.cat-tri-envoi { min-height: 40px; padding: 6px 16px; }
.cat-tri-envoi[hidden] { display: none; }

.cat-actifs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; font-size: 12px; }
.cat-puce {
  text-decoration: none; padding: 4px 10px; border-radius: 999px;
  background: var(--beige); border: 1px solid var(--gris-bordure);
}
.cat-puce::after { content: " ✕"; font-size: 10px; }
.cat-puce-raz { background: none; }

.cat-grille {
  /* La grille est une <section> : sans cela, elle hérite des 48 px de marge
     intérieure des sections de site.css, un vide au-dessus des cartes. */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
/* La carte est une colonne (recette du 02/10/2026, cas 243, note 422,
   d'après la maquette `catalogue/`) : photo, puis nom, marque et note
   alignés à gauche, et le bouton d'ajout tout en bas. Les cartes d'une même
   rangée ont la même hauteur (la grille les étire) : poussé par
   `margin-top: auto`, le bouton tombe à la même hauteur sur toute la rangée,
   quelle que soit la longueur du nom. */
.cat-carte {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  padding-bottom: 14px;
  position: relative;
  display: flex; flex-direction: column;
}
.cat-carte-infos { margin-bottom: 12px; }
.cat-carte.est-indisponible { opacity: .72; }
/* Un peu d'air autour de la photo (cas 10 : « la photo touche le bord de la
   carte parfois »). */
.cat-carte-image { display: block; position: relative; padding: 14px 14px 0; }
.cat-carte img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--blanc); display: block; border-radius: 10px; }
.cat-carte-pastille {
  position: absolute; top: 20px; left: 20px;
  background: var(--citron-vert); color: var(--craie);
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}

/* Le poids du jeu (« x2 », « x0,5 ») en pastille ronde en bas à droite de
   la photo, comme la maquette `catalogue/` (recette du 02/10/2026, cas 243,
   note 424). Elle remplace le texte orange sous le bouton (note 279). Fond
   blanc, contour et texte Craie, comme les pastilles « ×2 » de la maquette :
   lisible sur n'importe quelle photo. Ronde : largeur minimale égale à la
   hauteur, et un « x0,5 » plus long s'étire en gélule sans couper le texte. */
.cat-carte-coeff {
  position: absolute; right: 22px; bottom: 8px;
  min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--blanc);
  border: 1px solid var(--craie); color: var(--craie);
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* Le cœur de la liste d'envies, posé sur la photo (cas 10). */
.cat-coeur-form { position: absolute; top: 20px; right: 20px; margin: 0; display: flex; align-items: center; gap: 4px; }
.cat-carte > a.cat-coeur { position: absolute; top: 20px; right: 20px; }
.cat-envie.cat-coeur {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0; padding: 0;
  border-radius: 999px; background: var(--blanc);
  box-shadow: 0 1px 4px var(--ombre);
  color: var(--craie); text-decoration: none;
}
.cat-coeur .cat-coeur-icone { fill: none; stroke: currentColor; stroke-width: 1.8; }
.cat-envie.cat-coeur:hover, .cat-envie.cat-coeur:focus-visible { color: var(--framboise); }
.cat-envie.cat-coeur[aria-pressed="true"] { color: var(--framboise); }
.cat-coeur[aria-pressed="true"] .cat-coeur-icone { fill: currentColor; }
.cat-coeur-form .cat-envie-etat { margin: 0; }
/* Le bouton d'ajout (recette d'Alban du 01/10/2026, cas 10, note 257 : « il
   atteint le bord de sa vignette produit (sans margin) et peut avoir le texte
   qui passe sur 2 lignes »).
   Cause : il héritait de `.btn` ses 28 px de marge intérieure latérale et son
   interlettrage de 1 px, sans marge extérieure. En `inline-block`, « AJOUT À
   MON LIB ET LOU » demandait 231 px ; dès que la colonne descendait sous
   ~260 px (tablette, et désormais le desktop élargi à quatre colonnes), le
   bouton butait sur les bords de la carte et repassait sur deux lignes.
   Correctif : il est aligné exactement sur la photo (mêmes 14 px de marge que
   `.cat-carte-image`), sa marge intérieure et son interlettrage sont réduits,
   et sa taille de police suit la largeur de la carte (`cqw`) pour que le
   libellé complet tienne sur une seule ligne jusqu'à la colonne la plus
   étroite que la grille autorise (220 px). `nowrap` garantit l'unique ligne,
   `max-width` interdit tout débordement hors de la largeur de la photo si un
   libellé plus long est saisi au back office.

   Deux précautions dans le sélecteur :
   - il est scopé à la vignette, parce que le même composant sert le gros
     bouton de la fiche produit, qui n'est pas dans une carte et garde son
     dessin d'origine ;
   - il écarte `.panier-quantite`, le compteur « − n + » que `site.js` pose à
     la suite du bouton en lui recopiant la classe `cat-carte-btn` : il a son
     propre dessin dans site.css.
   Aucune de ces règles ne touche `display`, pour ne pas prendre le pas sur
   `[data-panier-ajout][hidden]` ni sur `.btn.panier-quantite`, qui portent la
   même spécificité. */
.cat-carte { container-type: inline-size; }
.cat-carte > .cat-carte-btn { margin-top: auto; }
.cat-carte > .cat-carte-btn:not(.panier-quantite) {
  margin: auto auto 0;
  max-width: calc(100% - 28px);
  padding: 9px 12px;
  font-size: clamp(10.5px, 4.9cqw, 12px);
  letter-spacing: .4px;
  white-space: nowrap;
  overflow: hidden;
}
/* Le libellé de repli (note 257 : « remplacer si besoin par "AJOUT A MON
   PANIER" ou "COMMANDER" »). Il ne sert que là où la vignette est trop
   étroite pour le libellé complet : les vignettes « Vous aimerez aussi » de
   la fiche produit, dont la grille descend à 170 px. Sur le catalogue, dont
   la colonne ne descend jamais sous 220 px, c'est toujours le libellé
   d'origine qui s'affiche. */
.cat-carte-btn-court { display: none; }
@container (max-width: 205px) {
  .cat-carte .cat-carte-btn-long { display: none; }
  .cat-carte .cat-carte-btn-court { display: inline; }
}
.cat-carte-btn.est-indisponible { opacity: .55; }
.cat-carte-titre { font-size: 14px; margin: 10px 14px 0; font-weight: 700; }
.cat-carte-titre a { text-decoration: none; }
.cat-carte-marque { font-size: 12px; margin: 4px 14px 0; color: var(--craie); }
.cat-carte-marque a { text-decoration: none; }
.cat-carte-note { font-size: 12px; margin: 6px 14px 0; display: flex; gap: 4px; justify-content: flex-start; align-items: center; }
.cat-carte-etoile { color: var(--carotte); font-size: 14px; line-height: 1; }
.cat-carte-stock { font-size: 11px; margin: 6px 14px 0; color: var(--craie); }

/* Composant « Carte Jeu » de la consolidation (12/10/2026) : titre sur deux
   lignes au plus, la note à gauche et l'âge en pastille jasmin à droite, et
   « déjà loué » en bas à gauche de la photo pour une cliente connectée. */
.cat-carte-titre a {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-carte-note .cat-carte-age { margin-left: auto; }
.cat-carte-age {
  font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--craie);
  background: var(--jasmin); border-radius: 999px; padding: 3px 9px;
}
.cat-carte-loue {
  position: absolute; left: 22px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 4px; border-radius: 999px; background: var(--blanc);
  font-size: 11px; color: var(--craie);
}
.cat-carte-loue-picto {
  width: 18px; height: 18px; border-radius: 50%; background: var(--ciel);
  display: inline-flex; align-items: center; justify-content: center;
}

.cat-vide { padding: 40px 0; text-align: center; color: var(--craie); }
.cat-pagination {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  padding: 28px 0 56px; flex-wrap: wrap;
}
.cat-pagination-position { font-size: 13px; color: var(--craie); }

/* ---------- Page /produit (préfixe pt-) ---------- */
.pt-tete { max-width: 1180px; margin: 0 auto; padding: 20px 20px 0; }
.pt-retour { font-size: 13px; margin: 0 0 12px; }
.pt-haut {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
}
.pt-galerie { background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: 16px; padding: 16px; }
.pt-galerie img { width: 100%; height: auto; object-fit: contain; display: block; }
.pt-galerie-vide { aspect-ratio: 3 / 2; }
.pt-titre { font-size: 28px; margin: 0; }
.pt-marque { margin: 4px 0 10px; color: var(--craie); }
.pt-note { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 0 0 12px; }
.pt-note-nb { color: var(--craie); }
.pt-etiquettes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 14px; }
.pt-etiquettes a {
  display: inline-block; font-size: 12px; padding: 4px 10px;
  border: 1px solid var(--gris-bordure); border-radius: 999px; text-decoration: none;
}
.pt-age { font-weight: 700; margin: 0 0 6px; }
.pt-stock { font-size: 13px; margin: 0 0 14px; }
.pt-stock.est-dispo { color: var(--citron-fonce); }
.pt-stock.est-indispo { color: var(--craie); }
.pt-ajout { margin-top: 18px; }
.pt-ajout-titre { font-weight: 700; margin: 0 0 8px; }
.pt-liens-compte { font-size: 14px; margin: 10px 0 0; }

.pt-encart, .pt-avis-equipe, .pt-accordeons, .pt-avis-bloc, .pt-similaires, .pt-garanties, .mq-texte {
  max-width: 1180px; margin: 32px auto 0; padding: 0 20px;
}
.pt-encart {
  background: var(--beige); border-radius: 16px;
  max-width: 1140px; padding: 24px;
}
.pt-encart ul { margin: 12px 0 18px; padding-left: 20px; }
.pt-accordeon { border-bottom: 1px solid var(--gris-bordure); padding: 12px 0; }
.pt-accordeon summary { font-weight: 700; cursor: pointer; }
.pt-accordeon dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 0; }
.pt-accordeon dt { font-weight: 700; }
.pt-accordeon dd { margin: 0; }
.pt-avis-soustitre { color: var(--craie); margin: 0 0 12px; }
.pt-avis-tris { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: 13px; }
.pt-avis-tri { text-decoration: none; padding: 5px 12px; border: 1px solid var(--gris-bordure); border-radius: 999px; }
.pt-avis-tri.est-actif { background: var(--craie); color: var(--blanc); border-color: transparent; }
.pt-avis-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.pt-avis {
  background: var(--blanc); border: 1px solid var(--gris-bordure);
  border-radius: 16px; padding: 16px;
}
.pt-avis-date { font-size: 12px; color: var(--craie); margin: 6px 0; }
.pt-avis-texte { margin: 0; }
.pt-similaires .cat-grille { margin-bottom: 20px; }
.pt-garanties ul {
  list-style: none; padding: 0; margin: 0 0 56px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  font-size: 13px; color: var(--craie);
}

/* ---------- Page /marque (préfixe mq-) ---------- */
.mq-tete { max-width: 1180px; margin: 0 auto; padding: 20px 20px 8px; text-align: center; }
.mq-logo { max-width: 180px; height: auto; margin: 0 auto 12px; display: block; }
.mq-chapo { max-width: 720px; margin: 0 auto; }
.mq-texte { padding-bottom: 56px; }

@media (max-width: 860px) {
  .pt-haut { grid-template-columns: 1fr; }
  .cat-sug-produits { grid-template-columns: 1fr; }

  /* Mobile (cas 10) : la barre ne garde que la recherche et le bouton
     « Filtres ». Le tri est à droite du compteur (#769). */
  .cat-recherche-envoi { display: none; }
  .cat-recherche input { padding: 10px 14px; }
}

/* Jusqu'à 960 px (maquette du panneau, #771) : le tiroir devient une feuille
   pleine largeur qui monte du bas, 88 % de la hauteur et coins de 32 px. */
@media (max-width: 960px) {
  .cat-filtres[popover]:popover-open {
    inset: auto 0 0 0;
    width: 100%; height: 88%;
    padding: 0 16px;
    border-radius: 32px 32px 0 0;
  }
  .cat-filtres .cat-panneau-tete { margin: 0 -16px; padding: 14px 16px; }
  .cat-filtres .cat-panneau-pied { margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* Les contrôles d’envies restent utilisables sans script. */
.cat-envie {
  display: inline-block;
  margin: 8px 10px 0;
  padding: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.cat-envie[aria-pressed="true"] { font-weight: 700; }
.pt-liens-compte form { display: inline; }

.cat-envie-etat {
  display: inline-block;
  margin: .3rem .35rem .3rem 0;
  padding: .15rem .55rem;
  border-radius: 1rem;
  background: var(--beige);
  color: var(--craie);
  font-size: .8rem;
  font-weight: 600;
}

/* ---------- Catalogue v2 « vitrine éditoriale » (lot L11) ----------
   Mêmes règles que le reste de la feuille : aucune couleur, aucun rayon et
   aucune ombre en dur, uniquement les jetons `--ll-*` du socle (#299). Le
   texte posé sur un aplat de la charte est la Craie, qui tient 4,5 pour 1 sur
   le Ciel, le Jasmin et le Lila. */

/* ---------- Bannières éditoriales ---------- */

.cat-banniere {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  margin: 0 auto 24px;
  padding: 24px;
  max-width: 1200px;
  border-radius: 24px;
}
.cat-banniere-principale { background: var(--ll-ciel-400); }
.cat-banniere-intercalaire { background: var(--ll-jasmin-400); margin-top: 24px; }
.cat-banniere-texte { color: var(--ll-craie); }
.cat-banniere-surtitre {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cat-banniere-titre {
  margin: 0 0 8px;
  font-family: var(--police-titre);
  font-size: 30px;
  line-height: 1.15;
}
.cat-banniere-phrase { margin: 0 0 14px; max-width: 48ch; }
.cat-banniere-visuel img { display: block; width: 100%; border-radius: 18px; }

@media (min-width: 821px) {
  .cat-banniere { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 32px; }
  .cat-banniere-titre { font-size: 40px; }
}

/* ---------- Explorer les catégories ---------- */

.cat-explorer { margin: 0 0 32px; }
.cat-explorer-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.cat-explorer-tete h2 { margin: 0; font-size: 22px; }
.cat-explorer-plus { font-size: 14px; }

.cat-explorer-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* La maquette pose un visuel par catégorie ; ils n'existent pas encore
   (« visuels à fournir », notes.md). En attendant, une pastille de la charte,
   lisible tout de suite, plutôt qu'un cadre gris vide. */
.cat-explorer-lien {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ll-lila-400);
  color: var(--ll-craie);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.cat-explorer-lien:hover { background: var(--ll-ciel-400); }
.cat-explorer-lien:focus-visible { outline: 3px solid var(--ll-ciel-500); outline-offset: 2px; }
/* Note 1031 et ticket #695 : les sélections ouvrent la rangée en tuiles de la
   maquette CA-01 (280 x 112 px, 240 en mobile, coins de 24 px, libellé en
   police de titre sur la gauche, visuel sur les 40 % de droite), dans une
   bande qui défile, au-dessus des pastilles de catégories. Fonds en
   alternance ciel puis lila, comme les deux premières tuiles de la maquette. */
.cat-explorer-tuiles {
  display: flex; gap: 12px; margin: 0 0 14px; padding: 0 0 6px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
}
.cat-explorer-tuiles li { flex: none; scroll-snap-align: start; }
.cat-explorer-lien.cat-explorer-selection {
  position: relative; display: flex; align-items: center; box-sizing: border-box;
  width: 240px; height: 112px; padding: 0 16px; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--ll-craie-50);
  background: var(--ll-ciel-400); color: var(--ll-craie);
  font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.2;
  transition: box-shadow 220ms;
}
.cat-explorer-tuiles li:nth-child(even) .cat-explorer-selection { background: var(--ll-lila-400); }
.cat-explorer-lien.cat-explorer-selection:hover { background: var(--ll-ciel-400); box-shadow: var(--shadow); }
.cat-explorer-tuiles li:nth-child(even) .cat-explorer-selection:hover { background: var(--ll-lila-400); }
.cat-explorer-lien.cat-explorer-selection:active { transform: scale(0.98); }
.cat-explorer-selection-titre { position: relative; z-index: 1; width: 58%; }
.cat-explorer-selection img { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; height: 100%; object-fit: cover; }
@media (min-width: 821px) {
  .cat-explorer-lien.cat-explorer-selection { width: 280px; }
}

/* ---------- Rangées défilantes ---------- */

/* Ticket #717 d'Alban : sans le padding haut du `section` générique, une
   rangée suit le groupe précédent à 80 px au lieu de 128 px. */
/* Ticket #763 de Morgane (« diminue le padding du bas ») : le `section`
   générique laissait 48 px sous chaque rangée, en plus des 32 px de marge. */
.cat-rangee { margin: 0 0 32px; padding-top: 0; padding-bottom: 0; }
.cat-rangee-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.cat-rangee-tete h2 { margin: 0; font-size: 22px; }
.cat-rangee-tout { font-size: 14px; }

/* Le défilement horizontal est en CSS seul : les flèches de la maquette
   demanderaient du JavaScript pour un geste que le doigt, la molette et le
   clavier font déjà. `min-width: 0` sur le conteneur, sans quoi la piste
   impose sa largeur à la page et la grille déborde. */
.cat-resultats { min-width: 0; }
.cat-rangee-piste {
  display: grid;
  grid-auto-flow: column;
  /* 400 px au plus : une rangée d'une ou deux cartes (« Ma liste de
     souhaits » avec un seul jeu) ne les étire plus sur toute la largeur
     (recette d'Alban du 15/10/2026, ticket #639). Au delà de deux cartes,
     rien ne change : elles se partagent la largeur comme avant. */
  grid-auto-columns: minmax(210px, 400px);
  gap: 16px;
  padding: 0 0 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.cat-rangee-piste > .cat-carte { scroll-snap-align: start; margin: 0; }

@media (min-width: 821px) {
  .cat-rangee-piste { grid-auto-columns: minmax(230px, 400px); }
}

/* « Ne plus me proposer ce jeu » : même pastille que le cœur, posée juste à sa
   gauche sur la photo. La maquette range les deux boutons côte à côte en haut
   à droite de la carte. */
.cat-masque-form { position: absolute; top: 20px; right: 64px; margin: 0; }
.cat-masque {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: var(--blanc);
  box-shadow: 0 1px 4px var(--ombre);
  color: var(--craie); cursor: pointer;
}
.cat-masque:hover, .cat-masque:focus-visible { color: var(--ll-carotte-ink); }
/* Déjà masqué : le bouton rend le jeu au catalogue, et le dit par sa couleur
   autant que par son libellé accessible. */
.cat-masque[aria-pressed="true"] { color: var(--ll-carotte-ink); background: var(--ll-carotte-50); }
.cat-masque:focus-visible { outline: 3px solid var(--ll-ciel-500); outline-offset: 2px; }

/* ---------- Carte jeu au plus près de la charte rendue ----------
   Recette d'Alban du 13/10/2026, cas 243, note 701 (lot 1) : valeurs du
   composant « Carte Jeu » de la consolidation (`Composant Carte Jeu.dc.html`).
   Carte arrondie à 24 px (Craie au survol, avec l'ombre de la charte) ; photo
   carrée bord à bord sur Blanc 200, le jeu à 10 % du bord (il ne touche
   jamais la carte, cas 10) ; « nouveau » en pastille Framboise (couleur de
   tag, plus de Citron, qui est celle de l'action) ; cœur dans un rond Blanc
   50 de 34 px ; marque en capitales Craie 200 ; note en gras derrière
   l'étoile de la charte ; âge en pastille Jasmin 400 ; bouton pleine largeur
   de 42 px. */
.cat-carte {
  border-radius: var(--radius-lg); border-color: var(--color-border-card); background: var(--color-bg-raised);
  padding-bottom: 0;
  transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.cat-carte:hover { border-color: var(--ll-craie-400); box-shadow: var(--shadow); }
.cat-carte-image { padding: 0; background: var(--ll-blanc-200); }
.cat-carte img { border-radius: 0; background: transparent; padding: 10%; box-sizing: border-box; mix-blend-mode: multiply; }
.cat-carte-pastille {
  top: 5cqi; left: 5cqi; background: var(--ll-framboise); color: var(--ll-craie-400);
  font-size: clamp(10px, 4.4cqi, 11px); padding: 4px 9px;
}
.cat-coeur-form, .cat-carte > a.cat-coeur { top: 2cqi; right: 2cqi; }
.cat-carte .cat-envie.cat-coeur { width: 34px; height: 34px; background: var(--ll-blanc-50); box-shadow: none; border: 0; }
.cat-carte-coeff { right: 5cqi; bottom: 5cqi; background: var(--ll-lila-400); border: 0; font-size: clamp(11px, 5cqi, 13px); }
.cat-carte-loue { left: 5cqi; bottom: 5cqi; background: var(--ll-blanc-50); font-size: clamp(10px, 4.4cqi, 11px); }
.cat-carte-loue-picto { background: var(--ll-ciel-400); }
.cat-carte-infos { padding: 5.5cqi 5.5cqi 8px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cat-carte-titre { margin: 0; font-size: clamp(13px, 5.8cqi, 15px); line-height: 1.3; }
.cat-carte-marque {
  margin: 0; font-size: clamp(10px, 4.6cqi, 12px); color: var(--ll-craie-200);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-carte-note { margin: 2px 0 0; gap: 4px; font-size: clamp(12px, 5cqi, 13px); font-weight: 700; justify-content: space-between; }
.cat-carte-etoile.stars .star { width: 14px; height: 14px; }
.cat-carte-note > span[aria-hidden="true"]:not(.cat-carte-etoile) { margin-right: auto; }
.cat-carte-age { background: var(--ll-jasmin-400); font-size: clamp(10px, 4.4cqi, 12px); }
.cat-carte-stock { margin: 0; }
/* Aucune de ces règles ne touche `display` : elle passerait devant
   `[data-panier-ajout][hidden]` (voir plus haut). */
.cat-carte > .cat-carte-btn.btn:not(.panier-quantite) {
  margin: auto 5.5cqi 5.5cqi; max-width: none;
  min-height: 42px; box-sizing: border-box; padding: 13px 8px; text-align: center;
  font-size: clamp(11px, 5cqi, 14px); line-height: 16px; letter-spacing: .02em;
}

/* ---------- CA-01 « Jeux et jouets » au plus près de la charte rendue ----------
   Note 701 d'Alban (cas 243, lot 1), page « Catalogue » de la consolidation :
   titre Neulis Regular 30 px ; champ de recherche en capsule de 44 px bordé
   de Craie 50 ; bouton « Filtres » en capsule de 44 px cerclée de Craie 400
   sur 1,5 px, gras 14 px, Blanc 200 au survol ; titres de rangée Neulis
   Regular 24 px, « voir plus » en gras 14 px souligné au survol. */
.cat-titre {
  font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.15;
  margin: 0 0 8px;
}
.cat-ariane { font-size: 12px; color: var(--ll-craie-300); }
.cat-ariane a {
  font-weight: 400; color: var(--ll-craie-400); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--ll-craie-400);
}
/* #777 : un fil d'Ariane se souligne en Craie, jamais en bleu (charte). */
.cat-ariane a:hover { text-decoration-color: var(--ll-craie-200); }
.cat-recherche input {
  min-height: 44px; box-sizing: border-box; padding: 10px 18px;
  border: 1px solid var(--ll-craie-100); background: var(--ll-blanc-100); font-size: 14px;
}
.cat-recherche input:focus { outline: none; border-color: var(--ll-ciel-400); box-shadow: 0 0 0 3px var(--ll-ciel-100); }
.cat-bouton-filtres {
  min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border: 1.5px solid var(--ll-craie-400); background: transparent;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.cat-bouton-filtres:hover { background: var(--ll-blanc-200); }
/* « Retirer filtres » : le même contour que « Filtres », plus voyant que les
   puces qu'il efface (recette d'Alban du 15/10/2026, ticket #675). */
.cat-puce-raz { border: 1.5px solid var(--ll-craie-400); font-weight: 700; }
.cat-puce-raz:hover { background: var(--ll-blanc-200); }
.cat-recherche-envoi { min-height: 44px; }
.cat-explorer-tete h2, .cat-rangee-tete h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2;
}
.cat-explorer-plus, .cat-rangee-tout { font-size: 14px; font-weight: 700; text-decoration: none; }
.cat-explorer-plus:hover, .cat-rangee-tout:hover { text-decoration: underline; }

/* ---------- Recette d'Alban du 15/10/2026 (lot catalogue) ----------
   #504, #539, #626 : le compteur « − n + » qui remplace le bouton d'ajout
   touchait les bords de la vignette (catalogue et « Vous aimerez aussi » de
   la fiche produit). Il prend les mêmes marges que le bouton qu'il remplace,
   donc que le nom du jeu au-dessus, sa hauteur et sa taille de texte, qui
   suit la largeur de la carte : « 1 au panier » tient sur une ligne jusque
   dans les vignettes étroites de la fiche produit. `display` n'est pas
   touché (voir plus haut). */
.cat-carte > .cat-carte-btn.panier-quantite {
  margin: auto 5.5cqi 5.5cqi; min-width: 0; min-height: 42px; box-sizing: border-box;
  gap: 4px; font-size: clamp(11px, 5cqi, 14px); letter-spacing: .02em; white-space: nowrap;
}
.cat-carte > .cat-carte-btn.panier-quantite button { padding: 2px 8px; }
.cat-carte > .cat-carte-btn.panier-quantite .panier-quantite-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 205px) {
  .cat-carte > .cat-carte-btn.panier-quantite { padding: 4px 2px; gap: 2px; }
  .cat-carte > .cat-carte-btn.panier-quantite button { padding: 2px 5px; font-size: 18px; }
}
/* #625 : « Ne plus me proposer ce jeu » suit le cœur depuis qu'il est passé à
   34 px collé à 2cqi du coin (note 701) : même taille, même hauteur, à sa
   gauche, 8 px d'écart. Quand le badge « Déjà loué » occupe la gauche du
   cœur, il descend sous le cœur plutôt que de le recouvrir. */
.cat-carte .cat-masque-form { top: 2cqi; right: calc(2cqi + 34px + 8px); }
.cat-carte:has(.cat-coeur-form .cat-envie-etat) .cat-masque-form { top: calc(2cqi + 34px + 8px); right: 2cqi; }
.cat-carte .cat-masque { width: 34px; height: 34px; background: var(--ll-blanc-50); box-shadow: none; }
.cat-carte .cat-masque[aria-pressed="true"] { background: var(--ll-carotte-50); }
/* Notes 999 et 1000 : un jeu masqué depuis la vignette reste à sa place,
   atténué, l'œil enfoncé, pour qu'on puisse revenir sur le geste tout de
   suite ; il quitte la liste au prochain chargement de la page. */
.cat-carte.est-masquee .cat-carte-image img,
.cat-carte.est-masquee .cat-carte-infos,
.cat-carte.est-masquee > .cat-carte-btn { opacity: .4; }

/* ---- categories-selections.css ---- */
/* Pages catégorie (CA-02) et sélections (CA-03) de la consolidation des
   maquettes, issue #8 (recette d'Alban, cas 243). Les deux reprennent le
   gabarit de liste du catalogue (`catalogue.css`) ; cette feuille n'ajoute que
   ce qui leur est propre, avec des sélecteurs à elles. */

/* ---------- CA-02 : intro de la page catégorie ---------- */
.cat-intro {
  margin: 0 0 8px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ll-craie-400);
}

/* Le message d'une sélection terminée, en tête du catalogue (CA-03). */
.cat-avis-selection {
  margin: 8px 0 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--ll-jasmin-100);
  color: var(--ll-craie-400);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- CA-03 : bannière de la sélection ---------- */
.sel-bandeau { padding-bottom: 8px; }
.sel-banniere {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  padding: 24px 20px;
  border-radius: 32px;
  background: var(--ll-ciel-400);
  color: var(--ll-craie-400);
}
.sel-surtitre {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sel-titre {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
}
.sel-intro { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.5; }
.sel-banniere-visuel img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 24px;
  background: var(--ll-ciel-300);
}

@media (min-width: 821px) {
  .sel-banniere { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 40px; min-height: 280px; }
  .sel-banniere.sans-visuel { grid-template-columns: 1fr; }
  .sel-titre { font-size: 40px; }
}

/* ---- curseur-age.css ---- */
/* Le curseur d'âge à deux poignées (recette d'Alban du 07/10/2026, cas 171,
   note 523). Rendu par `src/ui/curseur-age.ts`, enrichi par
   `src/ui/curseur-age-client.js`. Sans script, seules les deux listes
   s'affichent ; avec, la piste les remplace. */
.curseur-age { --ca-poignee: 24px; display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.curseur-age-resume { margin: 0; font-weight: 700; color: var(--craie); }
.curseur-age.est-vide .curseur-age-resume { font-weight: 400; font-style: italic; color: var(--ll-craie-300); }
.curseur-age-piste {
  position: relative; height: 44px; margin: 22px calc(var(--ca-poignee) / 2) 0;
  touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.curseur-age-rail, .curseur-age-plage {
  position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px;
}
.curseur-age-rail { left: 0; right: 0; background: var(--gris-bordure); }
.curseur-age-plage { background: var(--citron-vert); }
.curseur-age.est-vide .curseur-age-plage { background: transparent; }
.curseur-age-poignee {
  position: absolute; top: 50%; width: var(--ca-poignee); height: var(--ca-poignee);
  margin: calc(var(--ca-poignee) / -2) 0 0 calc(var(--ca-poignee) / -2);
  border-radius: 50%; background: var(--blanc); border: 2px solid var(--craie);
  box-sizing: border-box; z-index: 1; cursor: grab;
}
/* Une zone de toucher de 44 px autour de la pastille de 24 px. */
.curseur-age-poignee::before { content: ""; position: absolute; inset: -10px; }
.curseur-age-poignee.est-devant { z-index: 2; }
.curseur-age-poignee:focus-visible { outline: 3px solid var(--ll-ciel); outline-offset: 2px; }
.curseur-age-bulle {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 12px; line-height: 1.2; padding: 2px 6px; border-radius: 4px;
  background: var(--craie); color: var(--blanc); pointer-events: none;
}
.curseur-age.est-vide .curseur-age-bulle { display: none; }
.curseur-age-graduations {
  position: relative; height: 16px; margin: 0 calc(var(--ca-poignee) / 2);
  font-size: 11px; color: var(--ll-craie-300);
}
/* Une piste étroite (panneau du catalogue, téléphone) ne garde que les
   graduations qui ne se chevauchent pas. */
.curseur-age-graduations { container-type: inline-size; }
@container (max-width: 420px) { .curseur-age-graduations .secondaire { display: none; } }
.curseur-age-graduations span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.curseur-age-graduations span:first-child { transform: none; }
.curseur-age-graduations span:last-child { transform: translateX(-100%); }
.curseur-age-champs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.curseur-age-champs label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.curseur-age.est-enrichi .curseur-age-champs {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- marque.css ---- */
/* Page marque /marque/<slug> (préfixe mq-), recette d'Alban du 25/09/2026 :
   plus de pavé centré, un en-tête de marque puis les jeux par grande catégorie.
   Passe après catalogue.css, qui garde les anciennes règles mq-. */

.mq-tete { text-align: left; padding-bottom: 24px; }
/* Le logo en haut à droite de la présentation (cas 18, note 111 du 26/09) :
   colonne de droite en desktop, flottant à droite en mobile. Sans logo, une
   seule colonne, aucun vide. */
.mq-identite {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "texte logo";
  gap: 32px; align-items: start;
  background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: 16px;
  padding: 28px 32px; margin-top: 8px;
}
.mq-identite.est-sans-logo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte"; }
.mq-presentation { grid-area: texte; }
.mq-logo-cadre { grid-area: logo; display: flex; align-items: flex-start; justify-content: flex-end; }
.mq-logo { max-width: 100%; max-height: 160px; width: auto; height: auto; margin: 0; object-fit: contain; }
.mq-presentation h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.25; }
.mq-presentation .cat-compteur { margin: 0 0 16px; text-align: left; }
.mq-chapo { max-width: 780px; margin: 0; }

.mq-texte-riche { line-height: 1.6; max-width: 780px; }
.mq-texte-riche p { margin: 0 0 .7em; }
.mq-texte-riche h2 { font-size: 20px; margin: 1.2em 0 .4em; }
.mq-texte-riche h3, .mq-texte-riche h4 { font-size: 17px; margin: 1em 0 .4em; }
.mq-texte-riche ul, .mq-texte-riche ol { margin: 0 0 .8em; padding-left: 22px; }
.mq-texte-riche li { margin: 0 0 .25em; }

.mq-plus { margin: 4px 0 0; border-top: 1px solid var(--gris-bordure); padding-top: 12px; }
.mq-plus summary { cursor: pointer; font-weight: 700; }
.mq-plus[open] summary { margin-bottom: 8px; }
.mq-actions { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* Titre réservé aux moteurs et aux lecteurs d'écran : le logo le dit déjà. */
.mq-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* « Trier par » ne colle plus aux vignettes (cas 18). */
.mq-resultats .cat-tri { margin-bottom: 24px; }
/* Le menu déroulant du tri (#769) se range à droite, comme au catalogue. */
.mq-resultats .cat-tri-liste { justify-content: flex-end; }
.mq-tester { text-align: center; margin: 8px 0 0; }

.mq-resultats { max-width: 1180px; margin: 0 auto; padding: 0 20px 56px; }
.mq-groupe { margin: 8px 0 40px; }
.mq-groupe h2 { font-size: 24px; margin: 0 0 16px; }
.mq-groupe-nb { font-size: 16px; font-weight: 400; color: var(--craie); }
.mq-groupe-plus { text-align: center; margin: 20px 0 0; }

@media (max-width: 700px) {
  .mq-identite { display: block; padding: 20px 16px; }
  .mq-identite::after { content: ""; display: block; clear: both; }
  .mq-logo-cadre { float: right; width: 112px; margin: 0 0 8px 12px; }
  .mq-logo { max-height: 80px; }
  .mq-presentation h1 { font-size: 26px; }
}

/* ---- produit.css ---- */
/* Fiche produit /produit/<slug> (préfixe pt-), recette d'Alban du 25/09/2026.
   Les règles de base de la fiche sont encore dans catalogue.css ; celles-ci
   passent après (ordre alphabétique des feuilles) et les complètent. */

.pt-note-nb { color: var(--craie); text-decoration: none; font-size: 13px; }

/* ---------- Carrousel des photos ---------- */
.pt-carrousel { padding: 12px; }
.pt-carrousel-cadre { position: relative; }
.pt-diapos {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  border-radius: 12px;
}
.pt-diapos::-webkit-scrollbar { display: none; }
.pt-diapo { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.pt-diapo img { width: 100%; height: auto; max-height: 460px; object-fit: contain; display: block; }
.pt-carrousel-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gris-bordure); background: var(--blanc); color: var(--craie);
  font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px var(--ombre);
}
.pt-carrousel-fleche.est-precedente { left: 8px; }
.pt-carrousel-fleche.est-suivante { right: 8px; }
.pt-carrousel-fleche:disabled { opacity: .35; cursor: default; }
.pt-vignettes {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin;
}
.pt-vignettes a {
  display: block; border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: var(--blanc);
}
.pt-vignettes a[aria-current="true"] { border-color: var(--framboise); }
.pt-vignettes img { width: 72px; height: 48px; object-fit: contain; display: block; }

/* Note 605 (cas 243) : vignette et diapo de la vidéo de règle (FP-01). */
.pt-vignette-video {
  width: 72px; height: 48px; box-sizing: border-box;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--craie) !important; color: var(--ll-blanc-casse);
  font-size: 11px; font-weight: 700; text-decoration: none; line-height: 1.1;
}
.pt-vignette-video .pt-lecture { width: 20px; height: 20px; }
.pt-diapo-video { align-self: stretch; min-width: 0; }
.pt-video-ecran {
  width: 100%; aspect-ratio: 3 / 2; max-height: 460px; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; border-radius: 12px; text-align: center;
  background: var(--craie); color: var(--ll-blanc-casse);
}
.pt-video-ecran-titre { margin: 0; font-family: var(--police-titre); font-size: 20px; }
.pt-video-lancer {
  display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;
  font-weight: 700; font-size: 15px;
}
.pt-video-lancer .pt-lecture { width: 56px; height: 56px; color: var(--citron-vert); transition: transform .15s; }
.pt-video-lancer:hover .pt-lecture, .pt-video-lancer:focus-visible .pt-lecture { transform: scale(1.08); }
.pt-video-ecran-mention { margin: 0; font-size: 12px; max-width: 36ch; opacity: .85; }
.pt-video-ecran.est-lecture { padding: 0; background: var(--craie); }
.pt-video-ecran iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; display: block; }

/* FP-02 et FP-03 (issue #6 des maquettes) : dernier exemplaire, indisponible. */
.pt-dernier {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--jasmin);
  font-size: 14px; font-weight: 700; color: var(--craie);
}
.pt-indispo {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px;
  padding: 0;
}
.pt-indispo p { margin: 0; }
.pt-indispo-titre { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; }
.pt-indispo-texte { font-size: 13px; line-height: 1.5; }
.pt-indispo-lien { align-self: flex-start; font-size: 13px; color: var(--craie); }
.pt-horloge { flex: none; }
#pt-alternatives { scroll-margin-top: 110px; }

/* ---------- Textes venus de Bubble (convertisseur BBCode) ---------- */
.pt-texte-riche p { margin: 0 0 .6em; }
.pt-texte-riche h3, .pt-texte-riche h4 { font-size: 16px; margin: 1em 0 .4em; }
.pt-texte-riche ul, .pt-texte-riche ol { margin: 0 0 .8em; padding-left: 22px; }
.pt-texte-riche li { margin: 0 0 .25em; }
.pt-description-courte { margin: 0 0 8px; }

/* ---------- Avis : tri sans retour en haut, date à côté de la note ---------- */
#avis, #avis-tris { scroll-margin-top: 110px; }
.pt-avis-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; }
.pt-avis-tete .pt-avis-date { margin: 0; }
@media (min-width: 900px) {
  /* Deux colonnes d'avis : la liste se lit en moitié moins de hauteur. */
  .pt-avis-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
}

/* ---------- Avis : pagination ---------- */
.pt-avis-pages { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 20px 0 0; }
.pt-avis-position { font-size: 13px; color: var(--craie); }

/* ---------- Vous aimerez aussi : cartes plus petites, ordinateur compris ---------- */
.pt-similaires-cta { text-align: center; margin: 0; }
/* #773 : « Vous aimerez aussi » tient sur une seule ligne ; au-delà, les
   cartes défilent à l'horizontale (comme en mobile). */
.pt-similaires-grille {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; overscroll-behavior-x: contain;
}
.pt-similaires-grille .cat-carte { flex: 0 0 max(170px, calc((100% - 5 * 14px) / 6)); scroll-snap-align: start; }
.pt-similaires-grille .cat-carte { font-size: 12px; }
.pt-similaires-grille .cat-carte-titre { font-size: 13px; }
.pt-similaires-grille .cat-carte-image img { max-height: 150px; object-fit: contain; }
.pt-similaires-grille .btn { font-size: 10px; letter-spacing: .5px; padding: 7px 10px; }

/* ---------- Engagements (bandeau jasmin, comme sur libetlou.com) ---------- */
.pt-garanties {
  max-width: none; margin: 56px 0 0; padding: 64px 20px;
  background: var(--jasmin);
}
.pt-garanties ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px;
  text-align: center; color: var(--craie); font-size: 14px;
}
.pt-garantie img { height: 88px; width: auto; display: block; margin: 0 auto; }
.pt-garantie h3 {
  display: inline-block; margin: 18px 0 14px; padding: 8px 20px;
  font-family: var(--police-corps); font-size: 16px; font-weight: 700;
  border: 1.5px solid var(--craie); border-radius: 999px;
}
.pt-garantie p { margin: 0; line-height: 1.5; }

/* ---------- Fenêtre « Donner mon avis » ---------- */
.pt-fenetre-avis {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  border: 0; border-radius: 16px; padding: 28px 24px 20px;
  background: var(--blanc); color: var(--craie);
  box-shadow: 0 12px 40px var(--ombre);
}
.pt-fenetre-avis::backdrop { background: color-mix(in srgb, var(--ll-craie) 45%, transparent); }
.pt-fenetre-avis h2 { font-size: 20px; margin: 0 32px 16px 0; }
.pt-fenetre-fermer { position: absolute; top: 10px; right: 12px; margin: 0; }
.pt-fenetre-fermer button {
  border: 0; background: transparent; color: var(--craie);
  font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.pt-notes { border: 0; margin: 0 0 14px; padding: 0; display: flex; gap: 4px; }
.pt-notes legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.pt-note-choix { cursor: pointer; }
.pt-note-choix input, .pt-lecteur { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.pt-note-choix span[aria-hidden] { font-size: 34px; line-height: 1; color: var(--gris-bordure); transition: color .1s; }
/* L'étoile choisie et toutes celles qui la précèdent se remplissent. */
.pt-note-choix:has(input:checked) span[aria-hidden],
.pt-note-choix:has(~ .pt-note-choix input:checked) span[aria-hidden] { color: var(--carotte); }
.pt-notes:hover .pt-note-choix span[aria-hidden] { color: var(--gris-bordure); }
.pt-notes:hover .pt-note-choix:hover span[aria-hidden],
.pt-notes:hover .pt-note-choix:has(~ .pt-note-choix:hover) span[aria-hidden] { color: var(--carotte); }
.pt-note-choix:has(input:focus-visible) { outline: 2px solid var(--craie); outline-offset: 2px; border-radius: 4px; }
.pt-fenetre-formulaire label[for] { display: block; font-weight: 700; margin-bottom: 6px; }
.pt-fenetre-formulaire textarea {
  width: 100%; box-sizing: border-box; font: inherit; padding: 10px;
  border: 1px solid var(--gris-bordure); border-radius: 10px; background: var(--beige);
}
.pt-fenetre-aide { font-size: 13px; margin: 8px 0 14px; }
.pt-fenetre-erreur { color: var(--framboise); font-weight: 700; margin: 8px 0 0; }

@media (max-width: 860px) {
  .pt-garanties ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-garantie:last-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  /* Vous aimerez aussi : cartes plus petites qui défilent au doigt. */
  .pt-similaires-grille {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding-bottom: 8px; margin: 0 -20px 20px; padding-left: 20px; padding-right: 20px;
    scroll-padding-left: 20px;
  }
  .pt-similaires-grille .cat-carte { flex: 0 0 44%; scroll-snap-align: start; font-size: 13px; }
  .pt-similaires-grille .cat-carte-titre { font-size: 14px; }
  .pt-similaires-grille .btn { font-size: 10px; letter-spacing: .5px; padding: 8px 10px; }
  .pt-garantie h3 { font-size: 14px; padding: 6px 14px; }
  .pt-carrousel-fleche { display: none; }
  .pt-garanties { padding: 48px 16px; }
  .pt-garantie img { height: 64px; }
}

/* Le rappel du coefficient sous le bouton d'ajout (recette d'Alban du
   01/10/2026, cas 52, note 279 : « dans la page produit : centre le texte "cet
   article compte x4" horizontalement par rapport au bouton au dessus et le
   mettre également en orange »). Même phrase que la vignette, le panier et la
   page de commande ; rien quand le coefficient vaut 1.
   Le centrage se fait dans `.pt-ajout-bloc`, une colonne qui ne prend que la
   largeur de son plus large enfant, le bouton : le rappel est donc centré sur
   le bouton lui-même, et non sur la colonne d'informations, qui est bien plus
   large. Le bloc reste aligné à gauche dans le flux (`width: fit-content`), le
   bouton ne change ni de largeur ni de nombre de lignes, et le compteur
   « − n + » que `site.js` insère juste après lui reste dans la même colonne.
   L'orange est `--ll-carotte-ink`, la teinte de texte accessible de la famille
   carotte (note 286) : 5,66 pour 1 sur le fond de la fiche. */
.pt-ajout-bloc {
  display: flex; flex-direction: column; align-items: center;
  width: fit-content;
}
/* Note 371 d'Alban (cas 52) : le rappel était centré sur le groupe « bouton
   d'ajout + cœur », donc décalé par rapport au bouton seul. Il s'aligne
   désormais sur le bord gauche du bouton, et la ligne entière est cadrée à
   gauche plutôt que centrée. */
.pt-coeff {
  margin: 8px 0 0;
  font-size: 13px; font-weight: 700;
  color: var(--ll-carotte-ink);
  text-align: left;
}
.pt-ajout-bloc { text-align: left; }
.pt-ajout-ligne { justify-content: flex-start; }

/* ---------- Fiche produit, lot L12 ----------
   Mêmes règles que le reste de la feuille : aucune couleur, aucun rayon et
   aucune ombre en dur, uniquement les jetons `--ll-*` du socle (#299). */

/* La tranche d'âge passe en pastille sous le titre, comme la maquette la met
   en avant. Le Ciel est le rôle de la mise en évidence dans la charte, et la
   Craie tient 4,5 pour 1 dessus. */
.pt-age-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ll-ciel-400);
  color: var(--ll-craie);
  font-weight: 700;
  font-size: 14px;
}

/* Le bouton d'ajout et le cœur de la liste de souhaits sur une même ligne,
   comme la maquette les pose. */
.pt-ajout-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-ajout-ligne .cat-coeur-form,
.pt-ajout-ligne a.cat-envie.cat-coeur { position: static; }
.pt-ajout-ligne .cat-envie.cat-coeur {
  width: 44px; height: 44px;
  border: 1px solid var(--gris-bordure);
  box-shadow: none;
}

@media (min-width: 861px) {
  /* Ordinateur : la colonne d'infos reste visible au défilement, pour que le
     bouton d'ajout ne parte jamais hors de l'écran pendant qu'on lit la
     galerie et les accordéons. `align-self: start` est indispensable : dans
     une grille, un élément étiré occupe toute la hauteur et `sticky` n'a
     alors plus de course. */
  .pt-infos { position: sticky; top: 16px; align-self: start; }
}

@media (max-width: 860px) {
  /* Mobile : le bloc d'ajout se colle en bas de l'écran, toujours accessible,
     comme la maquette le demande. Il reste dans le flux (`sticky`, pas
     `fixed`) : rien ne passe sous lui, et la page garde sa hauteur réelle. */
  .pt-ajout {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 16px;
    padding: 12px 0 10px;
    background: var(--beige);
    box-shadow: 0 -6px 16px var(--ombre);
  }
  .pt-ajout-titre { margin-top: 0; }
}

/* ---------- Fiche produit : mise en page de la maquette ----------
   Recette du 02/10/2026 (cas 10, note 419) : le lot L12 avait repris les
   détails de la maquette `fiche-produit/` (pastille d'âge, cœur, bouton
   collant) mais pas sa mise en page. Elle est reprise ici, dans l'ordre de la
   maquette : la fiche, la bande rose « ce jeu, sans l'acheter », « Vous
   aimerez aussi » remonté juste dessous, puis « Pourquoi on l'aime » (fond
   lila) à côté de « Tout savoir sur le jeu », et les avis des familles sur
   fond jasmin avec le sticker « Lib et Lou family ». Uniquement des jetons de
   la charte, aucune couleur en dur. */

/* La marque en surtitre, au-dessus du titre. */
.pt-marque {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.pt-marque a { text-decoration: none; }
.pt-titre { margin-bottom: 8px; }
/* Pastille d'âge et catégories sur une même rangée (consolidation FP-01). */
.pt-pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.pt-pastilles .pt-age-pastille, .pt-pastilles .pt-etiquettes { margin: 0; }

/* La bande rose, sur toute la largeur. */
.pt-encart {
  max-width: none; margin: 56px 0 0; padding: 56px 20px;
  border-radius: 0; background: var(--framboise); color: var(--craie);
  text-align: center;
}
.pt-encart h2 {
  font-family: var(--police-titre); font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 12px;
}
.pt-encart .pt-encart-arguments {
  list-style: none; margin: 0 auto 20px; padding: 0; max-width: 620px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px;
}
.pt-encart-arguments li + li::before { content: "·"; margin-right: 14px; }
.pt-encart .pt-encart-garanties {
  list-style: none; margin: 0 auto 24px; padding: 0; max-width: 900px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.pt-encart-garanties li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px 5px 8px; font-size: 13px;
  border: 1px solid var(--craie); border-radius: 999px;
}
.pt-encart-garanties img, .pt-encart-garanties svg { width: 28px; height: 28px; flex: none; object-fit: contain; }
/* #780 : dans la bande d'abonnement, les pictogrammes des garanties restent
   sans couleur (ils gardent la leur dans le bandeau des garanties du bas). */
.pt-encart-garanties img { filter: grayscale(1); }
.pt-encart-lien { margin: 14px 0 0; font-size: 13px; }

/* Groupe Vidéo (décision n° 97) : présent seulement si un lien est saisi. */
.pt-video {
  max-width: 1180px; margin: 32px auto 0; padding: 0 20px; text-align: center;
}
.pt-video h2 { font-family: var(--police-titre); font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 12px; }
.pt-video-bouton { display: inline-flex; align-items: center; gap: 10px; }
.pt-video-picto { flex: none; }
.pt-video-mention { margin: 10px 0 0; font-size: 13px; }

/* « Vous aimerez aussi », juste sous la bande. */
.pt-similaires { margin-top: 48px; }
.pt-similaires h2 { margin: 0 0 16px; }

/* « Pourquoi on l'aime » à côté de « Tout savoir sur le jeu ». */
.pt-milieu {
  max-width: 1180px; margin: 48px auto 0; padding: 32px 20px 0;
  border-top: 1px solid var(--gris-bordure);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.pt-milieu.est-seul { grid-template-columns: 1fr; }
.pt-milieu > .pt-avis-equipe, .pt-milieu > .pt-accordeons { max-width: none; margin: 0; }
.pt-avis-equipe {
  background: var(--lila); border-radius: 16px; padding: 24px;
}
.pt-avis-equipe h2 { font-size: 16px; margin: 0 0 8px; }
.pt-milieu > .pt-accordeons { padding: 0; }
.pt-accordeons h2 { margin: 0 0 8px; }

/* Les avis des familles sur toute la largeur, fond jasmin. */
.pt-avis-bloc {
  position: relative; max-width: none; margin: 64px 0 0;
  padding: 64px max(20px, calc((100% - 1140px) / 2));
  background: var(--jasmin); text-align: center;
}
.pt-avis-bloc h2 { font-family: var(--police-titre); margin: 0 0 4px; }
.pt-avis-bloc .pt-avis-tris { justify-content: center; }
.pt-avis-bloc .pt-avis-liste { text-align: left; }
.pt-avis-bloc .pt-avis-tri { background: var(--blanc); }
.pt-avis-bloc .pt-avis-tri.est-actif { background: var(--craie); }
.pt-avis-bloc .pt-avis-aucun { text-align: center; grid-column: 1 / -1; }
/* Résumé des avis relu par le SAV (décision n° 95), au-dessus des tris. */
.pt-avis-resume {
  max-width: 760px; margin: 20px auto 24px; padding: 20px 24px;
  background: var(--blanc); border-radius: 16px; text-align: left;
}
.pt-avis-resume h3 { font-family: var(--police-titre); font-size: 18px; margin: 0 0 8px; }
.pt-avis-resume-mention { margin: 10px 0 0; font-size: 12px; }

.pt-avis-sticker {
  position: absolute; top: 0; right: clamp(8px, 6vw, 90px);
  width: clamp(80px, 10vw, 140px); height: auto;
  transform: translateY(-45%) rotate(12deg);
}
/* Le bandeau des engagements suit les avis : même fond, un filet les sépare. */
.pt-avis-bloc + .pt-garanties { margin-top: 0; border-top: 1px solid var(--ll-jasmin-500); }

@media (max-width: 860px) {
  .pt-milieu { grid-template-columns: 1fr; gap: 24px; }
  .pt-encart { padding: 40px 16px; }
  .pt-avis-bloc { padding: 56px 16px 40px; }
}

/* ---------- Consolidation des maquettes, écran FP-01 ----------
   Recette d'Alban du 10/10/2026, cas 243 : fil d'Ariane « jeux et jouets ›
   catégorie › jeu », note suivie du nombre d'avis, pastille d'âge cerclée et
   catégories sur fond jasmin, lien « voir la description », accordéons
   marqués + et −, vidéo de règle sous « Pourquoi on l'aime ». Jetons de la
   charte uniquement. */
.pt-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pt-ariane a { font-weight: 400; }
.pt-ariane-sep { color: var(--craie); }
.pt-note-nb { text-decoration: underline; text-underline-offset: 2px; }
.pt-pastilles .pt-age-pastille {
  background: transparent; border: 1px solid var(--craie);
  font-weight: 400; font-size: 13px; padding: 4px 12px;
}
.pt-pastilles .pt-etiquettes a {
  background: var(--jasmin); border-color: var(--jasmin);
  font-size: 13px; padding: 4px 12px;
}
.pt-voir-description { margin: -6px 0 14px; font-size: 13px; }
.pt-accordeon summary {
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.pt-accordeon summary::-webkit-details-marker { display: none; }
.pt-accordeon summary::after { content: "+"; font-weight: 400; }
.pt-accordeon[open] summary::after { content: "−"; }
.pt-milieu-gauche { display: flex; flex-direction: column; gap: 32px; }
.pt-milieu-gauche .pt-video { max-width: none; margin: 0; padding: 0; text-align: left; }
.pt-milieu-gauche > .pt-avis-equipe { max-width: none; margin: 0; }

/* Décision d'Alban n° 135 (cas 243) : la valeur du jeu en magasin sous le
   titre, puis « compris dans votre formule ». Jamais barrée. */
.pt-valeur { margin: 0 0 12px; font-size: 15px; color: var(--craie); }
.pt-valeur-montant { font-weight: 700; }
.pt-valeur-formule { color: var(--citron-fonce); font-weight: 700; }

/* ---------- FP-01 à FP-03 au plus près de la charte rendue ----------
   Recette d'Alban du 13/10/2026, cas 243, note 701 (lot 1) : valeurs relevées
   dans le code de la maquette (`Parcours Boutique.dc.html`, bloc FP-01) avec
   la charte embarquée. Jetons de la charte uniquement.

   Galerie : la photo dans un cadre carré arrondi à 32 px, bordure Craie 50,
   fond Blanc 100, compteur « 1 / 4 » en pastille ; les vignettes de 72 px,
   arrondies à 16 px, sortent du cadre et passent en Craie 400 sur 2 px quand
   elles sont la photo courante (plus de Framboise, couleur de tag). */
.pt-galerie.pt-carrousel { background: none; border: 0; border-radius: 0; padding: 0; }
.pt-carrousel-cadre {
  aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--ll-craie-50); background: var(--ll-blanc-100);
}
.pt-galerie:not(.pt-carrousel) { border-radius: var(--radius-xl); border-color: var(--ll-craie-50); background: var(--ll-blanc-100); }
.pt-diapos { height: 100%; border-radius: 0; }
.pt-diapo img { height: 100%; max-height: none; padding: 8%; box-sizing: border-box; }
.pt-compteur {
  position: absolute; right: 14px; bottom: 14px; z-index: 1;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--ll-blanc-400); font-size: 12px; font-weight: 700;
}
.pt-vignettes { gap: 10px; margin-top: 12px; flex-wrap: wrap; overflow: visible; }
.pt-vignettes a {
  width: 72px; height: 72px; box-sizing: border-box;
  border: 1px solid var(--ll-craie-50); border-radius: var(--radius-md);
  background: var(--ll-blanc-100);
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.pt-vignettes a[aria-current="true"] { border: 2px solid var(--ll-craie-400); }
.pt-vignettes img { width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; }
.pt-vignette-video { width: 72px; height: 72px; border-radius: var(--radius-md); font-size: 12px; gap: 2px; }

/* Fil d'Ariane : 12 px Craie 300, liens soulignés en Craie et jamais en
   bleu (recette design du 16/10/2026, #777, règle inscrite dans
   docs/charte-graphique.md), le jeu courant en gras. */
.pt-ariane { font-size: 12px; color: var(--ll-craie-300); gap: 4px 8px; }
.pt-ariane a {
  color: var(--ll-craie-400); font-weight: 400;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-craie-400);
}
.pt-ariane a:hover, .pt-ariane a:active { text-decoration-color: var(--ll-craie-200); font-weight: 700; }
.pt-ariane [aria-current="page"] { color: var(--ll-craie-400); font-weight: 700; }
.pt-ariane-sep { color: var(--ll-craie-300); }

/* Marque en surtitre Neulis Bold, titre Neulis Regular 26 à 40 px, note. */
.pt-marque { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; margin: 0 0 6px; }
.pt-titre {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; margin: 0 0 6px;
}
.pt-note { gap: 8px; margin: 0 0 18px; }
.pt-note-nb { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* Pastilles : l'âge cerclé de Craie sur 1,5 px avec le pictogramme « enfant »,
   puis les catégories Jasmin, toutes sur la même rangée (la liste des
   catégories ne fait plus bloc : ses éléments rejoignent la rangée). */
.pt-pastilles { gap: 8px; margin: 0 0 18px; }
.pt-pastilles .pt-etiquettes { display: contents; }
.pt-pastilles .pt-age-pastille {
  gap: 6px; padding: 6px 14px 6px 10px;
  border: 1.5px solid var(--ll-craie-400); background: transparent;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.pt-age-picto { flex: none; }
.pt-pastilles .pt-etiquettes a {
  padding: 7px 14px; border: 0; border-radius: var(--radius-pill);
  background: var(--ll-jasmin); font-size: 13px; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-soft);
}
.pt-pastilles .pt-etiquettes a:hover { background: var(--ll-jasmin-400); }

/* Description courte : 15 px, interligne 1,6, 56 caractères au plus. */
.pt-description-courte { font-size: 15px; line-height: 1.6; max-width: 56ch; margin: 0 0 6px; }

/* « Voir la description » : bouton tertiaire de la charte, 13 px. */
.pt-voir-description { margin: -10px 0 18px; font-size: 13px; }
.pt-voir-description a {
  font-weight: 700; color: var(--ll-craie-400);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
.pt-voir-description a:hover { text-decoration-color: var(--ll-ciel-200); }

/* Pastilles d'état FP-02 et FP-03 : horloge de la charte à 20 px. */
.pt-horloge { width: 20px; height: 20px; flex: none; }

/* Ajout : le grand bouton de la charte (`btn--lg`) prend toute la largeur de
   la colonne, le cœur est un rond de 52 px cerclé de Craie 400 sur 1,5 px. */
.pt-ajout-bloc { width: 100%; align-items: stretch; }
.pt-ajout-ligne { flex-wrap: nowrap; gap: 10px; width: 100%; }
.pt-ajout-ligne > .btn {
  flex: 1; min-width: 0;
  font-size: var(--fs-btn-lg); line-height: var(--lh-btn-lg); padding: 16px 24px;
}
.pt-ajout-ligne .cat-envie.cat-coeur {
  width: 52px; height: 52px; flex: none;
  border: 1.5px solid var(--ll-craie-400); background: var(--ll-blanc-400);
}
/* FP-03 : « voir des jeux similaires disponibles » en bouton tertiaire. */
.pt-indispo-lien {
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--ll-ciel-400);
}
.pt-indispo-lien:hover { text-decoration-color: var(--ll-ciel-200); }

/* Bande rose (visiteur) : titre Neulis Regular 26 à 36 px, garanties
   cerclées de Craie sur 1,5 px en gras, grand bouton Jasmin, lien tertiaire. */
.pt-encart h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.15; text-wrap: balance;
}
.pt-encart-garanties li {
  gap: 5px; padding: 4px 9px; border: 1.5px solid var(--ll-craie-400);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pt-encart > .btn { font-size: var(--fs-btn-lg); line-height: var(--lh-btn-lg); padding: 18px 40px; }
.pt-encart-lien a {
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--ll-ciel-400);
}
.pt-encart-lien a:hover { text-decoration-color: var(--ll-ciel-200); }

/* « Vous aimerez aussi » : titre Neulis Regular 22 à 30 px ; sur une bande
   Ciel pleine largeur pour une personne connectée. En mobile, les cartes
   défilent à l'horizontale, 172 px chacune, comme la maquette. */
.pt-similaires h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; margin: 0 0 20px;
}
.pt-similaires.est-bande { max-width: none; margin: 48px 0 0; padding: 56px 20px; background: var(--ll-ciel); }
.pt-similaires.est-bande > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
  .pt-similaires-grille {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 2px 20px 8px; scroll-padding: 0 20px; scrollbar-width: none;
  }
  .pt-similaires-grille > * { flex: none; width: 172px; scroll-snap-align: start; }
  .pt-similaires.est-bande > .pt-similaires-grille { margin-left: -20px; margin-right: -20px; max-width: none; }
}

/* Bas de fiche (maquette FP-01, blocs « fp-desc » et « fp-avis ») :
   - « Pourquoi on l'aime » : encadré Lila arrondi à 32 px, 28 px 32 px,
     titre Comfortaa Bold 15 px, texte 14 px ;
   - titres de section en Neulis Regular, 20 à 28 px (vidéo, « tout savoir ») ;
   - accordéons entre filets Craie 400, intitulés Bold 15 px sur 16 px de
     hauteur, contenu 14 px Craie 300 ;
   - avis sur bande Jasmin 96 / 80 px, titre Neulis Regular 24 à 36 px, tris
     en pastilles Bold 13 px, cartes Blanc cassé arrondies à 24 px. */
.pt-milieu { padding-top: 56px; gap: 48px; border-top: 0; }
.pt-avis-equipe { border-radius: var(--radius-xl); padding: 28px 32px; }
.pt-avis-equipe h2 { font-family: var(--font-sans); font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.pt-avis-equipe p { font-size: 14px; line-height: 1.55; }
.pt-accordeons h2, .pt-video h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; margin: 0 0 16px;
}
.pt-accordeons h2 + .pt-accordeon { border-top: 1px solid var(--ll-craie-400); }
.pt-accordeon { border-bottom: 1px solid var(--ll-craie-400); padding: 0; }
.pt-accordeon summary { padding: 16px 0; font-size: 15px; font-weight: 700; }
.pt-accordeon[open] > :not(summary) { padding-bottom: 16px; font-size: 14px; line-height: 1.6; color: var(--ll-craie-300); }
.pt-video-ecran, .pt-video-ecran iframe { border-radius: var(--radius-xl); }

.pt-avis-bloc { padding-top: 96px; padding-bottom: 80px; }
.pt-avis-bloc h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.15;
}
.pt-avis-bloc .pt-avis-soustitre { font-size: 15px; margin: 0 0 28px; }
.pt-avis-bloc .pt-avis-tri {
  padding: 8px 16px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--ll-craie-400); background: var(--ll-blanc-400); color: var(--ll-craie-400);
}
.pt-avis-bloc .pt-avis-tri.est-actif { background: var(--ll-craie-400); color: var(--ll-blanc-400); }
.pt-avis-bloc .pt-avis-liste { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pt-avis-bloc .pt-avis {
  border: 0; border-radius: var(--radius-lg); padding: 22px; background: var(--ll-blanc-400);
  display: flex; flex-direction: column; gap: 8px;
}
.pt-avis-bloc .pt-avis-texte { font-size: 14px; line-height: 1.5; }
.pt-avis-bloc .pt-avis-date { font-size: 12px; color: var(--ll-craie-300); }

/* « Déjà loué le JJ/MM/AA » (décision n° 145 d'Alban) : dans la rangée des
   pastilles, même pictogramme que la pastille des vignettes du catalogue, en
   Ciel, le rôle de la mise en évidence dans la charte. */
.pt-deja-loue {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 6px 14px 6px 6px; border-radius: var(--radius-pill);
  background: var(--ll-ciel-400); color: var(--ll-craie);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.pt-deja-loue .cat-carte-loue-picto { background: var(--blanc); }

/* Article volumineux (recette d'Alban du 15/10/2026, cas 170, note 969) :
   sous le bouton d'ajout, au-dessus du rappel du coefficient, cadré à gauche
   comme lui. Couleur du texte courant : une information, pas une alerte. */
.pt-ajout-bloc .pt-volumineux {
  margin: 8px 0 0;
  font-size: 13px; line-height: 1.4;
  text-align: left;
}

/* Note 1037 (cas 293) : texte de fin de vie d'un jeu « à sortir ». */
.pt-a-sortir {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 10px 16px 10px 12px; border-radius: 16px; background: var(--ll-carotte-50);
  font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--craie);
}

/* Décision n° 169 (cas 293) : un jeu archivé garde sa fiche ; cet encart
   tient la place des boutons de commande et mène aux jeux similaires. */
.pt-archive {
  display: flex; flex-direction: column; gap: 6px; margin: 4px 0 16px;
  padding: 14px 16px; border-radius: 16px; background: var(--blanc); border: 1.5px solid var(--gris-bordure);
}
.pt-archive-texte { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--craie); }
.pt-archive-lien {
  align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--craie);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--ll-ciel-400);
}
.pt-archive-lien:hover { text-decoration-color: var(--ll-ciel-200); }
#pt-similaires, #pt-a-savoir { scroll-margin-top: 110px; }

/* #682 (FP-03) : jeu indisponible, bouton Lila « Victime de son succès »
   qui l'ajoute à la liste de souhaits, flèche à droite. Le texte Craie 400
   sur Lila tient 6,2 pour 1. */
.pt-ajout-ligne > .pt-souhait-form { flex: 1; min-width: 0; display: flex; }
.btn.pt-souhait {
  flex: 1; min-width: 0; min-height: 52px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lila); color: var(--craie); text-align: left;
}
.btn.pt-souhait:hover, .btn.pt-souhait:focus-visible { background: var(--ll-lila-300); color: var(--craie); }
.pt-souhait-textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-souhait-haut {
  font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 14px;
  text-transform: none; letter-spacing: 0;
}
.pt-souhait-texte { font-size: 13px; line-height: 16px; letter-spacing: .08em; }
.pt-souhait-fleche { flex: none; }
.pt-souhait .pt-souhait-oui,
.pt-souhait[aria-pressed="true"] .pt-souhait-non { display: none; }
.pt-souhait[aria-pressed="true"] .pt-souhait-oui { display: inline; }

/* Sticker « Loue-moi si tu peux » de la maquette FP-01 (recette d'Alban du
   15/10/2026, ticket #685) : à cheval sur le coin haut gauche de la photo,
   incliné, par-dessus le cadre arrondi qui coupe ce qui dépasse (il est donc
   posé sur `.pt-galerie`, pas dans le cadre). Décor : il ne prend aucun clic. */
.pt-galerie { position: relative; }
.pt-galerie .pt-sticker {
  position: absolute; z-index: 2; top: 16px; left: -10px;
  width: clamp(120px, 30%, 190px); height: auto; padding: 0;
  background: none; mix-blend-mode: normal; object-fit: contain;
  transform: rotate(-14deg); transform-origin: 30% 50%;
  pointer-events: none;
}

/* Décision d'Alban n° 227 : « Me prévenir de son retour », sous le bouton
   violet d'un jeu indisponible, cadré à gauche comme le rappel du coefficient.
   Le style est celui du bouton tertiaire du socle : un lien souligné. */
.pt-alerte-retour { margin: 10px 0 0; align-self: flex-start; }
.pt-alerte-retour .btn-tertiaire { padding: 0; font-size: 14px; }