/* listing-premier-ecran r2 — la liste des resultats visible des le chargement (Explorer V2, toutes familles).
 *
 * POURQUOI. Capture + consigne de Stephane, 25/09/2026 22h53 (iPhone, Chrome, « Le monde par les webcams »,
 * recherche « Animaux & Zoo », 157 resultats, la premiere carte coupee au bas de l'ecran) : « Supprime ce qui
 * est trace et reduit la taille de ce qui est entoure pour que le listing puisse se voir des le chargement de
 * page .. pour toutes les pages avec les listing ».
 *   - trace   = les quatre liens nav.seo-discover (Televisions a regarder, Radios a ecouter, Podcasts a
 *               decouvrir, Webcams et fenetres sur le monde) : ils doublent les onglets de l'en-tete.
 *   - entoure = la carte de recherche (titre, phrase, libelle, champ, bouton, Filtres) et la bande
 *               « Mes fiches recentes · Presentation · Resultats ».
 * Mesure au miroir de la page servie le 25/09 15h34 (393 x 670, theme Transparence) : premiere carte a 1005 px,
 * soit 335 px SOUS le bas de l'ecran ; carte de recherche 375 px, liens 222 px, bande 154 px.
 *
 * CE QUE LA FEUILLE FAIT, et rien d'autre : elle ne touche ni l'en-tete du site, ni les cartes de resultats, ni
 * aucune couleur (jour et nuit restent ceux de l'habillage choisi). L'Explorer est la seule page qui porte ce bloc
 * (#browse) : Televisions, Radios, Podcasts, Webcams et « Tous les medias » en sont les cinq variantes.
 *   1. toutes largeurs : les quatre liens sont retires de l'ecran ; « Mes fiches recentes » et « Presentation »
 *      partagent une ligne (le tiroir ouvert reprend toute la largeur).
 *   2. bureau et tablette (>= 541 px) : la carte garde sa composition, ses blancs se resserrent (22 px en haut et
 *      en bas au lieu de 28 a 32, 16 px entre ses rangees au lieu de 20 a 24).
 *   3. telephone (<= 540 px) : carte de recherche resserree (titre 22 px, phrase 13 px, champ et bouton sur une
 *      ligne, cibles tactiles gardees a 44 px, filtres replies derriere le bouton « Filtres » dans TOUS les
 *      habillages), libelles « Rechercher dans le catalogue », « Presentation » et
 *      titre « Resultats » masques A L'ECRAN SEULEMENT (lus par les lecteurs d'ecran : le compte « N resultats »
 *      dit la meme chose en clair) ; la phrase d'accroche s'efface.
 *   4. robuste aux deux lots vus en preproduction le 25/09 (selecteur de presentation en icones, ligne de tri
 *      « A-Z · Mieux notees · Plus vues ») : libelle du selecteur masque a l'ecran, marges du tri resserrees.
 *
 * SPECIFICITE. Six habillages (0, 3, 6, 9, cristal, annees80) redefinissent la carte en (1,2,1). Le prefixe
 * `html:root:not([data-premier-ecran-off]) body #browse` vaut (1,2,2) : la feuille gagne sans !important, quel que
 * soit l'ordre de chargement. Coupe-circuit : l'attribut data-premier-ecran-off sur <html> rend la page d'avant ;
 * retrait complet = retirer la balise <link> (job de retour).
 *
 * VERSIONS
 *   r1 (25/09/2026, Opus-listing-ecran) : premiere version (preproduction : ce3fa6a746d4, 23h49). La sonde de
 *      preproduction l'a mise en defaut sur un seul cas : premiere carte a 633 px au lieu de 522, parce que la
 *      preproduction porte deux lots de plus que la production (selecteur en icones avec son libelle sur une ligne
 *      a part, ligne de tri). Tout le reste etait vert (liens retires, carte 203 px, bande sur une ligne).
 *   r2 (25/09/2026, Opus-listing-ecran) : libelle du selecteur en icones masque a l'ecran (lu par les lecteurs
 *      d'ecran : aria-labelledby), marges du tri resserrees, phrase d'accroche masquee sur tout telephone (et plus
 *      seulement sur les ecrans courts).
 */

/* 1. Les quatre liens barres : retires de l'ecran des listings. */
html:root:not([data-premier-ecran-off]) body #browse > nav.seo-discover{display:none}

/* 2. « Mes fiches recentes » et « Presentation » sur la meme ligne. Le tiroir ferme flotte au debut de la ligne ;
   la barre de presentation (conteneur flex, donc hors des flottants) se range a cote s'il reste la place, dessous
   sinon : aucune langue ne peut provoquer de chevauchement. */
html:root:not([data-premier-ecran-off]) body #browse > details.seo-recent{margin:0}
html:root:not([data-premier-ecran-off]) body #browse > details.seo-recent:not([open]){float:left;float:inline-start;max-width:62%;margin-inline-end:12px}
html:root:not([data-premier-ecran-off]) body #browse > details.seo-recent > summary{padding-block:10px;line-height:24px;cursor:pointer}
html:root:not([data-premier-ecran-off]) body #browse > .listing-toolbar{margin:0 0 10px;min-height:44px;align-items:center;justify-content:flex-end}
html:root:not([data-premier-ecran-off]) body #browse > .listing-toolbar ~ *{clear:both}

/* 3. Bureau et tablette : la carte garde sa composition (titre a gauche, recherche a droite, filtres dessous),
   seuls ses blancs se resserrent. */
@media (min-width:541px){
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel{padding-block:22px;row-gap:16px;margin-bottom:12px}
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel .filters{padding-top:14px}
}

@media (max-width:540px){
  /* 4. Telephone : la carte de recherche, resserree. */
  html:root:not([data-premier-ecran-off]) body #browse{padding-top:10px}
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel{padding:14px 16px;gap:10px;margin-bottom:10px}
  html:root:not([data-premier-ecran-off]) body #browse #explore-title{font-size:22px;line-height:1.15}
  /* la phrase d'accroche s'efface au telephone : le titre dit deja la famille (Televisions, Radios, Podcasts,
     Webcams), et ces deux lignes sont la marge qui garde la premiere carte a l'ecran quand le tri et le selecteur
     en icones (lots en preproduction au 25/09) ajoutent chacun leur rangee */
  html:root:not([data-premier-ecran-off]) body #browse .explore-description{display:none}
  html:root:not([data-premier-ecran-off]) body #browse .search-area > .explore-label,
  html:root:not([data-premier-ecran-off]) body #browse > .listing-toolbar > label,
  html:root:not([data-premier-ecran-off]) body #browse > .listing-toolbar > .listing-toolbar-label,
  html:root:not([data-premier-ecran-off]) body #browse #catalogue-results > h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* Champ et bouton sur une ligne tant que le champ garde 150 px ; en dessous (ecrans de 320 px), le bouton passe
     dessous en pleine largeur. Le facteur 1000 donne au champ tout l'espace libre quand ils partagent la ligne. */
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel #search{flex-wrap:wrap;gap:8px}
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel #query{flex:1000 1 150px;width:auto;min-width:0;height:44px;min-height:44px}
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel #search button{flex:1 0 auto;width:auto;min-height:44px;padding-block:0;padding-inline:16px}
  /* Les filtres (type, pays, langue) replies derriere le bouton « Filtres », dans TOUS les habillages : Transparence,
     Aqua et Cristal le faisaient deja ; Reverie, Pixel et Original laissaient les trois menus deplies (168 px). Le
     bouton existe dans tous les habillages (transparency-20260919-r5.js le cree toujours, masque par defaut). */
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel > .lg-filter-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding-block:8px}
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel > .lg-filter-toggle[aria-expanded="false"] ~ .filters{display:none}
  html:root:not([data-premier-ecran-off]) body #browse > .listing-toolbar select{min-height:44px}
  /* 5. Le compte des resultats, juste au-dessus de la premiere carte. */
  html:root:not([data-premier-ecran-off]) body #browse #catalogue-results{row-gap:4px}
  html:root:not([data-premier-ecran-off]) body #browse #catalogue-results > p[role=status]{margin:0;font-size:13px;line-height:1.35}
  html:root:not([data-premier-ecran-off]) body #browse #catalogue-results > .results{margin-top:6px}
  /* la ligne de tri (A-Z · Mieux notees · Plus vues, lot tri-classement) : ses boutons gardent leurs 40 px, seules
     ses marges se resserrent */
  html:root:not([data-premier-ecran-off]) body #browse #catalogue-results > .tri-classement{margin:2px 0 6px}
}

/* 6. Habit par defaut du bouton « Filtres » pour les habillages qui n'en dessinent pas (Reverie, Pixel, Original) :
   specificite NULLE (:where), donc toute regle d'un habillage le redessine a sa facon ; teintes du theme actif
   (jour et nuit suivent d'eux-memes). */
@media (max-width:540px){
  :where(html:not([data-premier-ecran-off])) :where(#browse .explore-panel > .lg-filter-toggle){padding-inline:14px;border:1px solid var(--line,#d9dfe8);border-radius:12px;background:var(--surface,#fff);color:var(--ink,#152033);font:inherit;font-size:13px;font-weight:650;line-height:1.4;text-align:start;cursor:pointer}
  :where(html:not([data-premier-ecran-off])) :where(#browse .explore-panel > .lg-filter-toggle)::after{content:"\2304";font-size:18px;line-height:1}
  :where(html:not([data-premier-ecran-off])) :where(#browse .explore-panel > .lg-filter-toggle[aria-expanded="true"])::after{transform:rotate(180deg)}
}

/* 7. Ecrans COURTS (telephone de 600 px de haut ou moins : iPhone SE 375 x 553 dans Safari, 320 x 568) : l'en-tete du
   site y prend deja 40 % de la hauteur. La carte se resserre encore : c'est la difference entre voir le debut de la
   liste ou non. */
@media (max-width:540px) and (max-height:600px){
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel{padding-block:12px;gap:8px}
}

/* 8. Ecrans etroits (<= 359 px, iPhone SE de premiere generation) : titre a 20 px pour tenir sur une ligne, bouton
   « Rechercher » plus serre pour garder champ et bouton cote a cote. */
@media (max-width:359px){
  html:root:not([data-premier-ecran-off]) body #browse #explore-title{font-size:20px}
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel #query{flex-basis:130px}
  html:root:not([data-premier-ecran-off]) body #browse .explore-panel #search button{padding-inline:12px;font-size:14px}
}