/* ---- accueil.css ---- */
/* ---------- Page accueil (classes préfixées acc-) ---------- */

/* Hero (fond crème, photo à droite). */
.acc-hero {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: center;
  max-width: 1360px; margin: 0 auto;
}
.acc-hero-titre {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.14;
  font-weight: 500;
}
/* La photo repose sur le bandeau lila sans passer dessous : elle est coupée
   net en bas, la recouvrir en masquait le bas (recette d'Alban, cas 1). */
.acc-hero { padding-bottom: 0; }
.acc-hero .hero-texte { padding-bottom: 48px; }
.acc-hero .hero-visuel { align-self: end; }
.acc-hero .hero-texte { margin-left: 0; }
.acc-hero-titre { margin: 0 0 20px; }
.acc-hero-liste { margin: 0 0 20px; padding-left: 20px; }
.acc-hero-liste li { margin: 4px 0; }
/* Le bas de la photo d'origine n'est pas propre : bande transparente et bouts
   de contour détouré irréguliers sur ses 16 dernières lignes (sur 800 de
   large). Le cadre rogne ce bas (recette d'Alban, notes 55 et 106) : la marge
   négative, en % de la largeur donc proportionnelle à la taille affichée,
   remonte le bas du cadre et `overflow: hidden` coupe la photo net, qui
   touche le bandeau sans espace. Une photo remplacée au BO perd au plus 2 %
   de sa largeur en bas, jamais d'espace ne se rouvre. */
.acc-hero .hero-visuel { overflow: hidden; }
.acc-hero .hero-visuel img { width: 100%; border-radius: 0; margin-bottom: -2%; }

/* Séparateurs décoratifs entre sections. */
.acc-separateur { text-align: center; padding: 24px 20px; }
.acc-separateur img { max-height: 90px; width: auto; }

/* Note 378 d'Alban : l'illustration qui suit « Comment ça marche » passe à
   droite et s'incline, comme le sticker de la bande médias juste en dessous.
   Le retrait suit la largeur de la page, comme les stickers (note 377). */
/* Recette du 02/10/2026 (cas 1, note 411) : ce sticker, que Morgane appelle
   « max de choix », doit être à cheval sur la limite entre « Comment ça
   marche » (blanc cassé) et « Vos jeux préférés » (bleu ciel). Le conteneur
   n'a plus de hauteur : il est posé exactement sur la limite, et le sticker,
   en position absolue, en remonte de la moitié de sa hauteur. Taille, retrait,
   décalage et inclinaison sont les jetons `--sticker-choix-*`
   (`src/site/design-system/jetons-stickers.css`), réglables au panneau. */
.acc-separateur-diversite { position: relative; z-index: 3; height: 0; padding: 0; }
.acc-separateur-diversite img {
  position: absolute; top: 0; max-height: none; height: auto;
  right: clamp(var(--sticker-choix-bord-mini), var(--sticker-choix-bord-fluide), var(--sticker-choix-bord-maxi));
  width: clamp(var(--sticker-choix-largeur-mini), var(--sticker-choix-largeur-fluide), var(--sticker-choix-largeur-maxi));
  transform: translateY(var(--sticker-choix-decalage)) rotate(var(--sticker-choix-rotation));
}

/* Et celle qui précède « Pourquoi la location » se colle au bas de son
   groupe : son image touche le bord inférieur du bloc, sans la gouttière qui
   l'en séparait. */
.acc-separateur-bazar { padding-bottom: 0; }
.acc-separateur-bazar img { display: block; margin: 0 auto; vertical-align: bottom; }

/* Vos jeux préférés du moment (décision n° 167) : les cartes jeu du
   catalogue en rangée qui défile au doigt, comme la maquette HP-01. Le
   fond reste celui de la page : le ciel est aux avis en vidéo. */
.acc-jeux { text-align: center; }
.acc-entete { width: 110px; margin-bottom: 8px; }
.acc-jeux-rangee {
  display: flex; gap: clamp(16px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding: 6px 4px 12px; margin: 0 auto 40px; max-width: 1240px; text-align: left;
}
.acc-jeux-carte { flex: none; width: clamp(200px, 60vw, 250px); scroll-snap-align: start; display: flex; }
.acc-jeux-carte > .cat-carte { width: 100%; }

/* Des marques qu'on adore (décision n° 167) : tuiles photo 5/6 de la
   maquette sur fond jasmin, en piste défilante. Une tuile composée pose la
   photo du jeu phare de la marque sur un fond clair de la charte (le blanc
   de la photo s'y fond) et le logo dans une pastille blanche. */
.acc-marques { text-align: center; background: var(--jasmin); }
.acc-tuile { flex: none; width: clamp(146px, 17vw, 176px); margin-right: clamp(14px, 2.2vw, 26px); }
.acc-tuile-cadre {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 6;
  border-radius: 24px; overflow: hidden; border: 1.5px solid var(--ll-craie-50);
  background: var(--tuile-fond, var(--ll-blanc-200)); transition: border-color .2s, box-shadow .2s;
}
a.acc-tuile-cadre:hover, a.acc-tuile-cadre:focus-visible { border-color: var(--craie); box-shadow: 0 8px 24px var(--ombre); }
a.acc-tuile-cadre:focus-visible { outline: 2px solid var(--craie); outline-offset: 3px; }
.acc-tuile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-tuile-jeu {
  position: absolute; inset: 10% 8% 24%; width: 84%; height: 66%; object-fit: contain; mix-blend-mode: multiply;
}
.acc-tuile-logo {
  position: absolute; left: 10px; bottom: 10px; width: 46%; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: var(--ll-blanc-50); box-shadow: 0 4px 12px var(--ombre); display: flex; align-items: center; justify-content: center;
}
.acc-tuile-logo img { width: 84%; height: 84%; object-fit: contain; }
.acc-tuile-logo span { font-family: var(--police-titre); font-weight: 800; font-size: 14px; padding: 6px; }
.acc-tuile-logo-seul { position: static; width: 64%; }

/* Pistes défilantes de l'accueil (avis en vidéo, tuiles des marques). */
.acc-defilant { overflow: hidden; padding: 8px 0 12px; }
.acc-defilant-piste {
  display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: vit-defile var(--vit-duree, 45s) linear infinite;
}
.acc-defilant:hover .acc-defilant-piste,
.acc-defilant:focus-within .acc-defilant-piste,
.acc-defilant-piste:has(.est-lecture) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .acc-defilant { overflow-x: auto; }
  .acc-defilant-piste { animation: none; }
  .acc-defilant-piste > [data-copie] { display: none; }
}

/* ils en parlent mieux que nous (maquette HP-01, décision n° 167) : fond
   ciel, titre et chiffres en tête, cartes vidéo 9/16 qui défilent. */
.acc-videos { background: var(--ciel); padding: clamp(40px, 6vw, 68px) 0; overflow: hidden; }
.acc-videos-tete {
  max-width: 1240px; margin: 0 auto clamp(20px, 3vw, 32px); padding: 0 clamp(20px, 5vw, 48px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.acc-videos-titre {
  font-family: var(--police-titre); font-weight: 400; font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 10px; max-width: 16ch;
}
.acc-videos-titre em { font-weight: 600; }
.acc-videos-sous-titre { font-size: clamp(15px, 1.7vw, 19px); margin: 0; }
.acc-videos-chiffres { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 30px); }
.acc-videos-chiffre { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acc-videos-nombre {
  font-family: var(--police-titre); font-weight: 800; font-size: clamp(28px, 3.6vw, 38px); line-height: 1; margin: 0;
}
.acc-videos-nombre small { font-size: .5em; font-weight: 700; }
.acc-videos-libelle { margin: 0; font-size: 15px; line-height: 1.4; max-width: 22ch; display: flex; flex-direction: column; gap: 4px; }
.acc-videos-etoiles { color: var(--ll-jasmin-400); letter-spacing: 2px; font-size: 16px; line-height: 1; }
.acc-videos-trait { width: 1.5px; align-self: stretch; background: color-mix(in srgb, var(--craie) 22%, transparent); }
.acc-video { flex: none; width: clamp(180px, 48vw, 220px); margin-right: clamp(12px, 1.6vw, 20px); }
.acc-video-ecran {
  position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden;
  background: var(--ll-ciel-200); transition: box-shadow .2s;
}
.acc-video-ecran:hover { box-shadow: 0 8px 24px var(--ombre); }
.acc-video-ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.acc-video-ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.acc-video-prenom {
  position: absolute; inset: auto 12px 16px; font-family: var(--police-titre); font-weight: 800; font-size: 18px;
}
.acc-video-duree {
  position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; background: var(--ll-blanc-50);
}
.acc-video-lire {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--citron-vert); color: var(--craie);
}
/* Toute la carte lance la vidéo, pas seulement le rond. */
.acc-video-lire::after { content: ""; position: absolute; inset: -12px -12px auto auto; width: 220px; height: 400px; }
.acc-video-ecran:has(.acc-video-lire) { cursor: pointer; }
.acc-video-lire:focus-visible { outline: 2px solid var(--craie); outline-offset: 3px; }
@media (max-width: 680px) {
  .acc-videos-chiffres { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 1.5px minmax(0, 1fr); align-items: start; }
  .acc-videos-chiffre { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Avis Google (fond jasmin). Le sticker « Lib et Lou Family » est à cheval
   sur la limite marques → avis, à gauche, légèrement incliné. */
.acc-avis-bloc { text-align: center; background: var(--jasmin); position: relative; }
/* Note 377 d'Alban : la largeur était figée (200 px, puis 130 px sous 900 px),
   et entre les deux le sticker venait masquer le texte et le contenu au-dessus.
   Largeur et retrait suivent désormais la largeur de la page en continu, sans
   palier : plus de taille qui saute, donc plus de recouvrement. */
/* Les six bornes et les deux transformations passent par des jetons, pour que
   Morgane les règle elle-même au panneau de recette (`/recette/reglages`,
   piste 7) : « le sticker family est trop gros et mord sur les marques » est
   une grandeur, elle n'a pas à coûter une demande et une relecture de CSS.
   Les valeurs par défaut sont dans `src/site/design-system/jetons-stickers.css`
   et sont exactement celles d'avant. */
.acc-sticker-family {
  position: absolute; top: 0; z-index: 3;
  left: clamp(var(--sticker-family-bord-mini), var(--sticker-family-bord-fluide), var(--sticker-family-bord-maxi));
  width: clamp(var(--sticker-family-largeur-mini), var(--sticker-family-largeur-fluide), var(--sticker-family-largeur-maxi));
  transform: translateY(var(--sticker-family-decalage)) rotate(var(--sticker-family-rotation));
}
/* Ticket #436 : sous 800 px, le titre centré est plus large que l'espace laissé
   à droite du sticker, qui en masquait le début. Le titre descend sous le
   sticker, qui garde sa place à cheval sur les marques. */
@media (max-width: 799px) { .acc-avis-bloc { padding-top: 100px; } }
/* Recette du 02/10/2026 (cas 1, note 412) : « les avis clients doivent être
   centrés horizontalement ». La grille à quatre colonnes fixes calait les
   cartes à gauche dès qu'il y en avait moins de quatre, ce qui arrive avec
   les avis synchronisés : seuls ceux notés 4/5 ou plus sont retenus (note 56).
   En rangée souple centrée, une, deux, trois ou quatre cartes gardent la
   largeur d'un quart de rangée et restent au milieu de la page. */
.acc-avis-grille {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
  max-width: 1260px; margin: 0 auto; text-align: left;
}
.acc-avis-grille > .acc-avis { flex: 0 1 calc((100% - 60px) / 4); min-width: 0; }
.acc-avis {
  background: var(--beige); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; min-height: 320px;
}
.acc-avis-tete { display: flex; gap: 12px; align-items: center; }
.acc-avis-tete img { width: 44px; height: 44px; border-radius: 50%; }
.acc-avis-auteur { margin: 0; font-weight: 600; font-size: 13px; }
.acc-etoiles { color: var(--carotte); letter-spacing: 2px; }
.acc-avis-texte {
  font-size: 12px; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7;
}
.acc-avis-ouvert .acc-avis-texte { -webkit-line-clamp: unset; line-clamp: unset; }
.acc-avis-texte p { margin: 0 0 8px; }
.acc-avis-pied {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
}
.acc-avis-plus {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; font-size: 13px; color: var(--craie);
}

/* Nos formules sans engagement : puces de période + cartes inclinées. */
.acc-formules { text-align: center; overflow: hidden; }
.acc-periodes { display: flex; gap: 16px; justify-content: center; margin: 8px 0 48px; }
.acc-periode {
  border: 1px solid transparent; border-radius: 999px; padding: 8px 22px;
  background: var(--jasmin); color: var(--craie); font: inherit; font-size: 14px;
  cursor: pointer;
}
.acc-periode-active { background: var(--blanc); border-color: var(--craie); }
.acc-formules-grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px;
  max-width: 1180px; margin: 0 auto 48px; padding: 24px 0; align-items: center;
}
.acc-formule {
  border-radius: 26px; padding: 34px 28px; aspect-ratio: 1 / 0.96;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  justify-content: center;
}
.acc-formule-1 { background: var(--lila); transform: rotate(-7deg); }
.acc-formule-2 { background: var(--carotte); transform: scale(1.06); }
.acc-formule-3 { background: var(--ciel); transform: rotate(4deg); }
.acc-formule-picto { height: 56px; width: auto; }
.acc-formule-titre {
  margin: 6px 0 0; font-family: var(--police-titre); font-size: 26px; font-weight: 700;
}
.acc-formule-accroche { font-size: 18px; font-weight: 500; margin: 0; }
.acc-formule-desc { font-size: 13px; }
.acc-formule-desc p { margin: 0; }
.acc-formule-prix { margin: 8px 0 0; font-weight: 700; font-size: 22px; }
.acc-bon-plan { font-weight: 400; max-width: 560px; margin: 0 auto 24px; }

/* Les médias aussi craquent pour la loc' (fond lila). Le sticker rose est à
   cheval sur la transition beige → lila, à droite. */
.acc-medias { text-align: center; position: relative; margin-top: 110px; }
/* Il se règle aussi au panneau, par ses jetons `--sticker-medias-*`
   (`src/site/design-system/jetons-stickers.css`). Ce n'est pas le sticker
   « max de choix » : celui-là est l'illustration entre « Comment ça marche »
   et « Vos jeux préférés » (`.acc-separateur-diversite`). */
.acc-sticker-simple {
  position: absolute; top: 0; z-index: 3;
  right: clamp(var(--sticker-medias-bord-mini), var(--sticker-medias-bord-fluide), var(--sticker-medias-bord-maxi));
  width: clamp(var(--sticker-medias-largeur-mini), var(--sticker-medias-largeur-fluide), var(--sticker-medias-largeur-maxi));
  transform: translateY(var(--sticker-medias-decalage)) rotate(var(--sticker-medias-rotation));
}
.acc-medias-defilant .vit-defilant-piste { gap: 56px; }
.acc-medias-defilant img { height: 70px; max-width: 180px; }

/* Bloc « Des questions ? » : accordéon (styles partagés avec la page FAQ). */
.acc-faq-liste {
  max-width: 1200px; margin: 8px auto 32px; text-align: left;
  display: flex; flex-direction: column;
}
.acc-faq-liste .faq-item {
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ll-craie) 35%, transparent);
}
.acc-faq-liste .faq-item summary { padding: 20px 8px; font-weight: 400; font-size: 16px; }
.acc-faq-liste .faq-item[open] summary { background: transparent; }

/* Pourquoi la location de jouet ? (fond ciel). */
.acc-pourquoi {
  background: var(--ciel);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
.acc-pourquoi-texte { max-width: 520px; margin-left: auto; }
.acc-pourquoi-texte .titre-section, .acc-pourquoi-texte .sous-titre-section { text-align: left; }
.acc-pourquoi-desc { margin-bottom: 20px; }
.acc-pourquoi-photo { border-radius: 24px; display: block; width: 100%; }
/* Sur desktop, seule la photo de droite s'affiche (une seule photo, comme
   l'original) : la version mobile reste masquée malgré le display:block ci-dessus. */
.acc-pourquoi .seul-mobile { display: none; }
.acc-pourquoi .btn { border: none; cursor: pointer; }

/* Popup « Notre manifeste ». */
.acc-manifeste {
  border: none; border-radius: 20px; padding: 28px; max-width: 640px;
  background: var(--beige); color: var(--craie);
}
.acc-manifeste::backdrop { background: color-mix(in srgb, var(--ll-craie) 50%, transparent); }
.acc-manifeste-tete {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.acc-manifeste-tete h2 { font-family: var(--police-titre); margin: 0; }
.acc-manifeste-croix {
  background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer;
  color: inherit; padding: 4px;
}
.acc-manifeste-texte { font-size: 13px; margin-bottom: 20px; max-height: 55vh; overflow: auto; }
.acc-manifeste .btn { border: none; cursor: pointer; }

/* Réassurance (fond jasmin). */
.acc-reassurance { background: var(--jasmin); }
.acc-reassurance-texte { font-weight: 400; font-size: 12px; }

/* ---------- Adaptation mobile ---------- */
@media (max-width: 900px) {
  .acc-hero, .acc-pourquoi { grid-template-columns: 1fr; }
  .acc-formule { transform: none; aspect-ratio: auto; }
  .acc-formule-2 { transform: none; }
  .acc-medias { margin-top: 80px; }
  .acc-avis-grille { gap: 12px; }
  .acc-avis-grille > .acc-avis { flex-basis: 100%; }
  /* Cartes d'avis compactes en téléphone (recette d'Alban, cas 4) : plus de
     hauteur minimale, quatre lignes de texte avant « voir plus ». */
  .acc-avis { min-height: 0; padding: 14px 16px; gap: 8px; border-radius: 14px; }
  .acc-avis-tete img, .acc-avis-tete .acc-avis-initiale { width: 32px; height: 32px; }
  .acc-avis-texte { -webkit-line-clamp: 4; line-clamp: 4; }
  .acc-avis-texte p { margin-bottom: 4px; }
  .acc-hero .hero-texte { padding-bottom: 0; }
  .acc-periodes { gap: 8px; flex-wrap: wrap; }
  .acc-periode { padding: 8px 14px; }
  .acc-formules-grille { grid-template-columns: 1fr; }
  .acc-pourquoi-texte { margin-left: 0; }
  .acc-pourquoi .seul-mobile { display: block; margin-bottom: 16px; }
  .acc-pourquoi-photo-desktop { display: none; }
}

.acc-notes-externes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 24px auto; }
.acc-note-externe { margin: 0; font-weight: 600; }
/* Avis récupérés par API (ticket #157) : texte brut, retours à la ligne gardés. */
.acc-avis-texte-brut { white-space: pre-line; }
.acc-avis-auteur a { color: inherit; }
.acc-avis-date { display: block; font-weight: 400; font-size: 11px; opacity: .75; }
.acc-avis-titre { margin: 0; font-weight: 600; font-size: 13px; }
.acc-avis-source { margin: 0; font-size: 11px; }
.acc-avis-source a, .acc-note-externe a { color: inherit; }

/* Maquette HP-01 (cas 243, note 971 d'Alban, 15/10/2026). */
/* Hero : « circulent » en italique sur sa vague, « sourires » en gras. */
.acc-hero-titre .mot-decore { font-style: italic; }
.acc-hero-titre strong { font-weight: 800; }

/* Bandeau d'indicateurs chiffrés (ticket #627) : le chiffre en gras, son
   libellé dessous, une pastille citron vert entre deux indicateurs. Il
   défile en 32 s et s'arrête au survol, comme la maquette. */
.bandeau-indicateurs { padding: 26px 0; }
.bandeau-indicateurs .bandeau-piste { gap: 0; animation-duration: 40s; }
.bandeau-indicateurs:hover .bandeau-piste { animation-play-state: paused; }
.bandeau-indicateur { gap: clamp(18px, 3.5vw, 52px); padding-right: clamp(18px, 3.5vw, 52px); letter-spacing: normal; }
.bandeau-indicateur-texte { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.bandeau-indicateur strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.5vw, 28px); line-height: 1; }
.bandeau-indicateur-texte span { font-family: var(--font-sans); font-weight: 400; font-size: clamp(12px, 1.3vw, 14px); line-height: 1.2; }

/* Puces de période : la période choisie en ciel, cochée ; les autres claires. */
.acc-periode { background: var(--ll-blanc-100); border-color: var(--ll-craie-50); }
.acc-periode-active { background: var(--ll-ciel-400); border-color: var(--ll-craie-400); }
.acc-periode-active::before { content: "✓ "; }

/* ---- blog.css ---- */
/* ---------- Page /blog (préfixe blog-) ---------- */
.blog-recherche {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 8px;
}
.blog-recherche form { flex: 1 1 420px; }
.blog-recherche input {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--gris-bordure);
  border-radius: 6px;
  font-family: var(--police-corps);
  font-size: 14px;
  color: var(--craie);
  background: var(--blanc);
}
.blog-recherche input::placeholder { color: color-mix(in srgb, var(--ll-craie) 55%, transparent); }
.blog-tri {
  flex: 0 1 246px;
  position: relative;
  padding: 11px 32px 11px 16px;
  border: 1px solid var(--gris-bordure);
  border-radius: 6px;
  background: var(--blanc);
  font-size: 14px;
  color: color-mix(in srgb, var(--ll-craie) 75%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-tri::after {
  content: "\2304";
  position: absolute;
  right: 12px;
  top: 45%;
  transform: translateY(-50%);
  font-size: 13px;
  color: color-mix(in srgb, var(--ll-craie) 60%, transparent);
}
.blog-entete {
  text-align: center;
  padding: 36px 20px 24px;
}
.blog-entete h1 {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.blog-entete p {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 20px;
  margin: 0;
}

/* --- Article à la une + deux vignettes secondaires --- */
.blog-une {
  display: grid;
  grid-template-columns: 1fr 412px;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 0;
}
.blog-une-grande {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  min-height: 408px;
  text-decoration: none;
  color: var(--craie);
}
.blog-une-grande > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-une-carte {
  position: relative;
  margin: 200px 66px 22px 20px;
  background: var(--blanc);
  border-radius: 14px;
  padding: 18px 22px 16px;
}
.blog-une-carte h2 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 10px;
}
.blog-une-carte p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; }
.blog-une-carte .blog-tags { margin: 0; }
.blog-une-secondaires {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.blog-une-vignette {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}
.blog-une-vignette img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  display: block;
}
.blog-une-points {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 16px 0 4px;
}
.blog-une-points span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ll-craie) 45%, transparent);
}
.blog-une-points .blog-point-actif {
  width: 44px;
  height: 8px;
  background: var(--craie);
}

/* --- Étiquettes de catégorie (jasmin) --- */
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tag {
  display: inline-block;
  background: var(--jasmin);
  color: var(--craie);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.3;
}

/* --- Grille d'articles et colonne latérale ---
   En desktop, « Les plus consultés » et « Suivez nos actus » forment une
   colonne verticale à droite de la grille ; en dessous de 1100 px, ils passent
   sous la grille. Ils ne s'intercalent plus entre la une et les articles, ni
   entre une recherche et ses résultats (recette d'Alban du 25/09/2026). */
.blog-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: start;
}
.blog-corps .blog-articles { padding-left: 0; padding-right: 0; max-width: none; margin: 0; }
.blog-lateral {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 0 48px;
  position: sticky;
  top: 110px;
}
.blog-lateral .blog-instagram { padding: 28px 22px 30px; }
.blog-lateral .blog-instagram h2 { font-size: 22px; }
.blog-lateral .blog-instagram p { margin-bottom: 20px; font-size: 14px; }
.blog-lateral .blog-top-liste li { gap: 16px; padding: 12px 0; }
.blog-lateral .blog-top-liste a { font-size: 14px; }
.blog-lateral .blog-top-numero { font-size: 24px; }

/* --- Filtres en pastilles (catégorie, tri), comme le tri du catalogue --- */
.blog-filtres {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.blog-filtre { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.blog-filtre-titre { font-weight: 700; margin-right: 4px; }
.blog-pastille {
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--gris-bordure);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--craie);
  white-space: nowrap;
}
.blog-pastille:hover, .blog-pastille:focus-visible { background: var(--beige); }
.blog-pastille.est-actif { background: var(--craie); color: var(--blanc); border-color: transparent; }
.blog-pastille-nb { opacity: 0.6; font-size: 12px; }

.blog-top h2 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 23px;
  margin: 0 0 20px;
}
.blog-top-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-top-liste li {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--gris-bordure);
}
.blog-top-liste a {
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
  color: var(--craie);
}
.blog-top-liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-top-numero {
  font-family: var(--police-titre);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--carotte);
  flex: none;
  min-width: 24px;
}
.blog-instagram {
  background: var(--ciel);
  border-radius: 22px;
  padding: 56px 70px 60px;
  text-align: center;
}
.blog-instagram h2 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 10px;
}
.blog-instagram p { margin: 0 0 36px; font-size: 16px; }
.blog-instagram img { width: 100%; max-width: 560px; display: block; margin: 0 auto; }

/* --- Grille d'articles --- */
.blog-articles {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}
.blog-articles-titre {
  font-size: 34px;
  margin: 0 0 48px;
}
.blog-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.blog-carte {
  background: var(--blanc);
  border: 1px solid color-mix(in srgb, var(--ll-craie) 55%, transparent);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: var(--craie);
  display: flex;
  flex-direction: column;
}
.blog-carte img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-carte-corps { padding: 14px 12px 20px; display: flex; flex-direction: column; gap: 12px; }
.blog-carte h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}
.blog-carte-resume { margin: 0; font-size: 14px; line-height: 1.55; }

/* --- Pagination visuelle --- */
.blog-pagination {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 44px 0 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 15px;
}
.blog-page-active { color: var(--ciel); }
.blog-page-fleche { font-size: 20px; line-height: 1; }


/* ---------- Blog servi depuis la base (ticket #97) ---------- */

/* La recherche est un vrai formulaire : champ, catégorie et bouton sur la
   même ligne, et il fonctionne sans JavaScript (method="get" vers /blog). */
.blog-recherche form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.blog-recherche input[type="search"] { flex: 1 1 260px; width: auto; }
/* Le champ et sa croix : après une recherche validée, la croix ramène à la
   liste sans la recherche, catégorie et tri gardés (recette du 25/09/2026).
   La croix native du navigateur est masquée pour ne pas en montrer deux. */
.blog-recherche-champ { position: relative; flex: 1 1 260px; display: flex; min-width: 0; }
.blog-recherche-champ input[type="search"] { flex: 1 1 auto; width: 100%; padding-right: 44px; }
.blog-recherche-champ input[type="search"]::-webkit-search-cancel-button { display: none; }
.blog-recherche-effacer {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; text-decoration: none; color: var(--craie);
}
.blog-recherche-effacer:hover, .blog-recherche-effacer:focus-visible { background: var(--beige); }
.blog-recherche select {
  flex: 0 1 246px;
  padding: 11px 16px;
  border: 1px solid var(--gris-bordure);
  border-radius: 6px;
  background: var(--blanc);
  font-family: var(--police-corps);
  font-size: 14px;
  color: var(--craie);
}
.blog-recherche .formulaire-message { flex: 1 1 100%; }
.blog-resultats { text-align: center; font-size: 14px; opacity: 0.8; margin: 0 0 18px; }

/* Pagination : les numéros sont des liens, la page courante n'en est pas un. */
.blog-page { color: inherit; text-decoration: none; }
.blog-page:hover { text-decoration: underline; }
.blog-page-active { color: var(--ciel); }
.blog-page-fleche { color: inherit; text-decoration: none; }
.blog-page-fleche-inactive { opacity: 0.3; }
.blog-page-ellipse { opacity: 0.5; }
.blog-tag { text-decoration: none; color: inherit; }

/* ---------- Page d'un article (/article/<slug>) ---------- */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 8px;
}
.article-fil { font-size: 14px; margin-bottom: 20px; }
.article-tete h1 {
  font-family: var(--police-titre);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin: 0 0 12px;
}
.article-meta { font-size: 14px; opacity: 0.75; margin: 0 0 12px; }
.article-couverture {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 24px auto;
  border-radius: 16px;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Le corps vient de l'éditeur Bubble : la feuille de style tient la
   typographie, les articles n'en portent aucune. */
.article-corps { font-size: 17px; line-height: 1.7; }
.article-corps h2,
.article-corps h3,
.article-corps h4 {
  font-family: var(--police-titre);
  line-height: 1.25;
  margin: 2em 0 0.6em;
}
.article-corps h2 { font-size: 26px; }
.article-corps h3 { font-size: 21px; }
.article-corps h4 { font-size: 18px; }
.article-corps p { margin: 0 0 1.1em; }
.article-corps ul, .article-corps ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.article-corps li { margin-bottom: 0.4em; }
.article-corps img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.4em 0; }
.article-corps a { color: inherit; }

/* Commentaires modérés. */
.article-commentaires { max-width: 760px; margin: 0 auto; }
.article-commentaires-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.article-commentaire {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 14px;
  padding: 16px 18px;
}
.article-commentaire-auteur { margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.article-commentaire-auteur span { font-weight: 400; opacity: 0.7; }
.article-commentaire-texte { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }

/* Initiale en place de photo, pour un avis client sans image. */
.acc-avis-initiale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--jasmin);
  font-family: var(--police-titre);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .blog-corps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .blog-lateral {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    padding-top: 0;
  }
}
@media (max-width: 960px) {
  .blog-une { grid-template-columns: 1fr; }
  .blog-une-secondaires { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .blog-une-carte { margin: 200px 20px 22px; }
  .blog-grille { grid-template-columns: repeat(2, 1fr); }
}
/* En mobile, les pastilles de catégorie défilent sur une ligne plutôt que
   d'occuper un demi-écran avant le premier article. */
@media (max-width: 640px) {
  .blog-lateral { grid-template-columns: 1fr; }
  .blog-filtre {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 2px 20px;
  }
  .blog-filtre::-webkit-scrollbar { display: none; }
  .blog-filtre-titre { flex: none; }
}
@media (max-width: 560px) {
  .blog-grille { grid-template-columns: 1fr; }
  .blog-une-secondaires { grid-template-columns: 1fr; }
  .blog-instagram { padding: 32px 24px; }
}

/* Réponses de Lib et Lou sous un commentaire (note 323 du 02/10/2026) : en
   retrait, avec un filet de rappel, et sans jamais ressembler au commentaire
   d'un lecteur. */
.article-commentaire-reponses {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--citron-vert);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.article-commentaire-reponse .article-commentaire-auteur { color: var(--craie); }
@media (max-width: 640px) {
  .article-commentaire-reponses { padding-left: 12px; }
}

/* ---- 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; }

/* ---- faq.css ---- */
/* ---------- Page FAQ ---------- */

/* Hero « Vos questions / Nos réponses » avec recherche. */
.faq-hero { text-align: center; padding-top: 64px; padding-bottom: 24px; }
.faq-titre {
  font-family: var(--police-titre); font-weight: 400;
  font-size: clamp(44px, 5.7vw, 80px); line-height: 1.1; margin: 0;
}
.faq-sous-titre {
  font-family: var(--police-titre); font-weight: 500; font-size: 28px;
  line-height: 1.2; margin: 0 0 28px;
}
.faq-recherche {
  position: relative; max-width: 900px; margin: 0 auto;
}
.faq-recherche input {
  width: 100%; height: 60px; padding: 0 76px 0 18px; border-radius: 10px;
  border: 1px solid var(--craie); background: var(--blanc);
  font-family: var(--police-corps); font-size: 14px; color: var(--craie);
}
.faq-recherche input:focus { outline: 2px solid var(--citron-vert); }
.faq-recherche-loupe {
  position: absolute; top: 0; right: 0; width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jasmin); border-radius: 0 10px 10px 0;
  border: 1px solid var(--craie); border-left: none; color: var(--craie);
}

/* Suggestions pendant la frappe : les questions dont le titre ou la réponse
   contient tous les mots tapés. */
.faq-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  margin: 0; padding: 6px; list-style: none; text-align: left;
  background: var(--blanc); border: 1px solid var(--craie); border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ll-craie) 15%, transparent);
  max-height: 340px; overflow-y: auto;
}
.faq-suggestions [role="option"] {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.faq-suggestions [role="option"]:hover,
.faq-suggestions [role="option"][aria-selected="true"] { background: var(--beige); }
.faq-suggestion-titre { font-size: 14px; font-weight: 700; }
.faq-suggestion-categorie { font-size: 12px; opacity: 0.7; }

/* Catégories en pastilles (recette d'Alban du 25/09/2026) : en desktop, une
   rangée centrée qui passe à la ligne ; en mobile, une seule ligne qui défile
   sans barre de défilement visible. */
.faq-categories { text-align: center; padding-top: 24px; padding-bottom: 8px; }
.faq-bloc-titre {
  font-family: var(--police-corps); font-size: 22px; font-weight: 700;
  text-align: center; margin: 0 0 24px;
}
.faq-cartes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  max-width: 1400px; margin: 20px auto 0; padding: 4px 20px 16px;
}
.faq-carte {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px; background: var(--blanc);
  border: 1px solid var(--craie); border-radius: 999px; text-decoration: none;
}
.faq-carte:hover, .faq-carte:focus-visible { background: var(--jasmin); }
.faq-carte-icone { width: 24px; height: 24px; color: var(--craie); flex: none; }
.faq-carte-icone svg { width: 100%; height: 100%; }
.faq-carte-nom {
  font-family: var(--police-titre); font-size: 15px; font-weight: 700;
  line-height: 1.2; white-space: nowrap;
}
@media (max-width: 640px) {
  .faq-cartes {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    scroll-snap-type: x proximity; scrollbar-width: none; gap: 10px;
  }
  .faq-cartes::-webkit-scrollbar { display: none; }
  .faq-carte { scroll-snap-align: start; }
}

/* Questions les plus fréquentes. */
.faq-frequentes { text-align: center; padding-top: 40px; }
.faq-frequentes-liste { max-width: 1200px; margin: 0 auto 24px; text-align: left; }
.faq-frequente {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--gris-bordure); padding: 16px 8px;
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.faq-frequente:last-of-type { border-bottom: 1px solid var(--gris-bordure); }
.faq-frequente svg { flex: none; }
.faq-voir-tout {
  font-family: var(--police-corps); font-size: 16px; font-weight: 600;
  color: var(--craie); background: none; border: none; cursor: pointer;
  padding: 8px 0; margin-top: 8px;
}

/* Une catégorie = titre + description + accordéons. La marge de défilement
   laisse la place de l'en-tête collant : sans elle, le titre de la catégorie
   visée arrivait dessous. */
.faq-categorie { padding-top: 32px; padding-bottom: 16px; scroll-margin-top: 90px; }
.faq-item, #faq-toutes { scroll-margin-top: 110px; }
.faq-categorie .titre-section, .faq-categorie .sous-titre-section { text-align: center; }
.faq-liste { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--blanc); border-radius: 16px;
  border: 1px solid var(--gris-bordure); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 16px 20px;
  font-weight: 700; font-size: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex: none; width: 16px; height: 16px; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: var(--craie); border-radius: 2px;
  transition: transform 0.2s ease;
}
.faq-plus::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-plus::after { transform: scaleY(0); }
.faq-item[open] summary { background: color-mix(in srgb, var(--ll-jasmin) 35%, transparent); }
.faq-reponse { padding: 4px 20px 18px; font-size: 13px; }
.faq-reponse p { margin: 0 0 10px; }
.faq-reponse p:last-child { margin-bottom: 0; }

/* Appel vers le blog : colonne de texte + 3 articles. */
.faq-blog { padding: 72px 20px; }
.faq-blog-int {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1.05fr));
  gap: 18px; max-width: 1340px; margin: 0 auto; align-items: stretch;
}
.faq-blog-texte {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 30px;
}
.faq-blog-avant { font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.faq-blog-mot {
  font-family: var(--police-titre); font-weight: 400; font-size: 40px;
  line-height: 1.1; margin: 0 0 16px;
}
.faq-blog-desc { font-size: 14px; line-height: 1.4; margin: 0 0 16px; }
.faq-lien-souligne {
  font-family: var(--police-titre); font-size: 14px; letter-spacing: 1px;
  text-decoration: none; border-bottom: 1px solid var(--craie);
  padding-bottom: 4px; width: fit-content;
}
.faq-blog-chevron { margin-top: auto; padding-top: 24px; color: var(--craie); }
.faq-article {
  display: flex; flex-direction: column; border: 1px solid var(--craie);
  border-radius: 20px; padding: 0 0 10px; overflow: hidden;
}
.faq-article img {
  width: 100%; height: 107px; object-fit: cover;
  border-radius: 20px 20px 0 0; display: block;
}
.faq-article h3 {
  font-family: var(--police-titre); font-weight: 500; font-size: 20px;
  line-height: 1.2; margin: 14px 20px 8px;
}
.faq-article-extrait { font-size: 13px; line-height: 1.4; margin: 0 20px 12px; }
.faq-article .faq-lien-souligne { margin: auto 20px 8px; }

@media (max-width: 1000px) {
  .faq-blog-int { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .faq-blog-int { grid-template-columns: 1fr; }
}

/* Recherche sans résultat (A1 de #404) : la page ne reste plus muette. */
.faq-sans-resultat { text-align: center; margin: 24px auto 40px; max-width: 48em; }
.faq-sans-resultat[hidden] { display: none; }

/* ---- vitrine-commune.css ---- */
/* ---------- Blocs partagés de l'accueil et des landings (préfixe vit-) ----------
   Rendu par `src/site/blocs-vitrine.ts`. Ce fichier est concaténé après les
   feuilles des pages (ordre alphabétique) : ses règles communes passent après. */

/* Bandeau de logos qui défile en continu (médias, marques). La piste contient
   deux moitiés identiques et glisse d'une moitié : la boucle ne saute pas. */
.vit-defilant { overflow: hidden; padding: 20px 0; }
.vit-defilant-piste {
  display: flex; align-items: center; gap: 64px; width: max-content;
  margin: 0; padding: 0 32px; list-style: none;
  animation: vit-defile var(--vit-duree, 40s) linear infinite;
}
.vit-defilant:hover .vit-defilant-piste,
.vit-defilant:focus-within .vit-defilant-piste { animation-play-state: paused; }
.vit-defilant-logo { flex: none; }
.vit-defilant-logo a { display: block; border-radius: 8px; }
.vit-defilant-logo a:focus-visible { outline: 2px solid var(--craie); outline-offset: 4px; }
.vit-defilant-logo img {
  display: block; height: 64px; width: auto; max-width: 170px; object-fit: contain;
}
@keyframes vit-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vit-defilant-piste {
    animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 24px 40px;
  }
  .vit-defilant-logo[data-copie] { display: none; }
}
@media (max-width: 560px) {
  .vit-defilant-piste { gap: 40px; }
  .vit-defilant-logo img { height: 48px; max-width: 130px; }
}

/* Pastilles de catégories au-dessus des jeux préférés, comme libetlou.com :
   une rangée qui défile au doigt quand elle dépasse la largeur. */
.vit-pastilles {
  display: flex; gap: 10px; list-style: none; margin: 0 auto 28px; padding: 4px 16px;
  max-width: 1240px; overflow-x: auto; scrollbar-width: none;
  justify-content: safe center;
}
.vit-pastilles::-webkit-scrollbar { display: none; }
.vit-pastilles li { flex: none; }
.vit-pastille {
  display: inline-block; white-space: nowrap; text-decoration: none;
  background: var(--jasmin); color: var(--craie); border-radius: 999px;
  padding: 4px 22px; font-size: 14px; line-height: 1.5;
}
.vit-pastille:hover, .vit-pastille:focus-visible { background: var(--blanc); }

/* Logo Google dans la note d'avis. */
.vit-logo-google { display: inline-block; vertical-align: -3px; margin: 0 2px; }

/* Prix et mensualisation sur deux lignes. */
.vit-prix-tarif, .vit-prix-mensuel { display: block; }
.vit-prix-mensuel { font-size: 0.62em; font-weight: 400; margin-top: 2px; }
.vit-prix-reserve { visibility: hidden; }

/* Blocs de réassurance à 5 groupes (« échanges offerts », « sans engagement »,
   « option d'achat », « casse & usure », « propreté garantie ») : landings
   Montessori, jeux de société et box, accueil et nos-formules (recette
   d'Alban, notes 71 et suivantes). Chaque groupe est une colonne centrée :
   l'image au-dessus de l'étiquette, elle-même au-dessus du texte. Les
   groupes, de largeur fixe, se rangent sur des lignes centrées, la dernière
   ligne comprise, quelle que soit la largeur de l'écran. */
.mm-badges, .jds-badges, .bx-badges, .acc-reassurance .pro-badges, .nf-avantages-liste {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 40px 24px; max-width: 1300px; margin-left: auto; margin-right: auto;
}
.mm-badge, .jds-badge, .bx-badge, .acc-reassurance .badge-reassurance, .nf-avantage {
  flex: 0 1 220px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.mm-badge img, .jds-badge img, .bx-badge img, .acc-reassurance .badge-reassurance img, .nf-avantage img {
  display: block; margin: 0 auto;
}
.mm-badge h3, .jds-badge h3, .bx-badge h3 {
  display: block; width: fit-content; white-space: normal; max-width: 100%; margin-left: auto; margin-right: auto;
}
.mm-badge p, .jds-badge p, .bx-badge p { margin-left: auto; margin-right: auto; }
@media (max-width: 560px) {
  /* Deux groupes par ligne, la cinquième centrée seule. */
  .mm-badges, .jds-badges, .bx-badges, .acc-reassurance .pro-badges, .nf-avantages-liste { gap: 28px 12px; }
  .mm-badge, .jds-badge, .bx-badge, .acc-reassurance .badge-reassurance, .nf-avantage { flex-basis: calc(50% - 6px); }
  .mm-badge img, .jds-badge img, .bx-badge img, .acc-reassurance .badge-reassurance img { height: 64px; }
  .nf-avantage img { width: 80px; height: 80px; }
  .mm-badge h3, .jds-badge h3, .bx-badge h3 { font-size: 14px; padding: 6px 14px; margin: 12px auto 10px; }
  .mm-badge p, .jds-badge p, .bx-badge p { font-size: 12px; margin-top: 0; }
}