/* decouverte-huit-20260920-r1.css : « Poursuivre la decouverte » en HUIT suggestions visibles au lieu de six.
   POURQUOI. Stephane, 20/09/2026, capture de la fiche franceinfo (/explorer/#media/v1-188), la section
   « Poursuivre la decouverte » en 3 colonnes x 2 rangees : « met 8 plutot que 6 ici ».
   CE QUE C'EST. Le remplacant de decouverte-six-20260919-r1.css (Astra, 19/09 : six suggestions dans la largeur
   du lecteur, visuel carre), recopie a l'identique sauf la largeur large. La page ne charge que l'une des deux
   feuilles ; revenir a six = remettre l'ancienne balise (sauvegarde explorer/index.html.avant-dechuit1-<stamp>,
   lot decouverte-huit-r1 de v2-retour-arriere.sh).
   CE QUI CHANGE, et rien d'autre :
   - composant >= 740 px : 4 colonnes x 2 rangees (8) au lieu de 3 x 2 (6). Une tuile fait (largeur - 36 px) / 4,
     soit 178 px a la largeur du lecteur de la capture (~750 px). Pour que le titre garde deux lignes lisibles, le
     visuel carre passe de 80 a 60 px entre 740 et 999 px (texte : 98 px au lieu de 78) ; il retrouve 80 px des
     1000 px, ou une tuile a quatre colonnes retrouve la largeur (>= 241 px) qu'elle avait a trois.
   - composant < 740 px : inchange (1 colonne x 3 rangees sous 500 px ; 2 x 3 entre 500 et 739 px).
   Le script (related-20260917-compact-r1.js) fournit toujours 12 suggestions : une page de 8, puis les 4 suivantes.
   Historique : r1, 20/09/2026 (Fable-huit), premiere version. */
#detail .related-strip{container-type:inline-size;container-name:related}
#detail .related-row{grid-template-rows:repeat(3,88px);grid-auto-columns:100%;gap:12px;padding-inline:0}
#detail .related-row>.result{grid-template-columns:80px minmax(0,1fr);height:88px;min-height:88px}
#detail .related-row .listing-visual>svg{width:30px;height:30px}
#detail .related-row .logo-x img{padding:7px;object-fit:contain}
#detail .related-row .listing-copy,#detail .related-row>.result[data-fav2-id] .listing-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:8px 10px;align-content:center}
#detail .related-row .listing-copy h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.3;font-size:14px;max-height:2.6em;overflow:hidden}
#detail .related-row .listing-copy .muted{padding-inline-end:34px;font-size:12px;min-height:16px}
#detail .related-row .listing-copy .label{display:none}
#detail .related-row>.result[data-fav2-id] .fav2-card-heart{top:auto;bottom:5px;inset-inline-end:5px;width:30px;height:30px;min-width:30px;min-height:30px}
@container related (min-width:500px){#detail .related-row{grid-auto-columns:calc((100% - 12px)/2)}}
@container related (min-width:740px){#detail .related-row{grid-template-rows:repeat(2,88px);grid-auto-columns:calc((100% - 36px)/4)}#detail .related-row>.result{grid-template-columns:60px minmax(0,1fr)}#detail .related-row .listing-visual>svg{width:24px;height:24px}#detail .related-row .logo-x img{padding:5px}}
@container related (min-width:1000px){#detail .related-row>.result{grid-template-columns:80px minmax(0,1fr)}#detail .related-row .listing-visual>svg{width:30px;height:30px}#detail .related-row .logo-x img{padding:7px}}
@media(pointer:coarse){#detail .related-row>.result[data-fav2-id] .fav2-card-heart{width:44px;height:44px;min-width:44px;min-height:44px;bottom:0;inset-inline-end:0}#detail .related-row .listing-copy .muted{padding-inline-end:40px}#detail .related-row .listing-copy h3{padding-inline-end:34px}}