/* cartes-compactes r1 (20/09/2026) — Explorer V2, grille de résultats.
   POURQUOI : capture de Stéphane (vue compacte 3 colonnes, thème Transparency) : la méta (pays, « TÉLÉVISION ») coule après
   le titre et change de place d'une carte à l'autre, la pastille horaire des webcams est tronquée, les vignettes sont coupées
   par l'arrondi, le cœur pèse autant que le titre. Ce fichier est ADDITIF : chargé en dernier, il ne réécrit aucune feuille.
   ① Anatomie fixe (vue compacte seulement) : vignette 44 px en retrait, titre sur UNE ligne, puis une rangée méta : puce de
      famille colorée avec icône trait, pays, heure locale ; le cœur a sa colonne (36 px) et le titre ne passe jamais dessous.
   ② Cartes calmes : rayon 12 px, bord 1 px, sans ombre au repos, bord accentué au survol ; cœur en contour discret, plein et
      accent quand il est actif (l'état actif reste celui du module favoris).
   ③ En-têtes de bloc par famille (toutes vues) : posés par index-results r2 comme enfants directs de .results.
   COUPE-CIRCUIT : <html data-cartes-compactes-off> neutralise ① et ② sans retirer le fichier ; ③ suit le script.
   Couleurs de famille : TV bleu (l'accent du site), radio vert, podcast violet, webcam ambre ; contrastes texte/fond ≥ 4,5:1
   mesurés au banc sur les deux thèmes. */
#browse [data-listing-family="tv"]{--fam:#2456c6;--fam-bg:#e8eefc;--fam-icone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='12' rx='2'/><path d='M8 3l4 4 4-4'/></svg>")}
#browse [data-listing-family="radio"]{--fam:#0f766e;--fam-bg:#dff3f0;--fam-icone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='12' rx='2'/><circle cx='8.5' cy='14' r='2.5'/><path d='M14 12h4M14 16h4M6 8l10-4'/></svg>")}
#browse [data-listing-family="podcast"]{--fam:#6d3fc0;--fam-bg:#ece5fb;--fam-icone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='3' width='6' height='11' rx='3'/><path d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/></svg>")}
#browse [data-listing-family="webcam"]{--fam:#9a4407;--fam-bg:#fdefdc;--fam-icone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='13' height='10' rx='2'/><path d='M16 11l5-3v8l-5-3z'/></svg>")}
html[data-theme="dark"] #browse [data-listing-family="tv"]{--fam:#8fb0ff;--fam-bg:#1b2a45}
html[data-theme="dark"] #browse [data-listing-family="radio"]{--fam:#5fd3c5;--fam-bg:#123130}
html[data-theme="dark"] #browse [data-listing-family="podcast"]{--fam:#c4a9ff;--fam-bg:#2a2144}
html[data-theme="dark"] #browse [data-listing-family="webcam"]{--fam:#ffb866;--fam-bg:#3a2a14}

/* ③ En-têtes de bloc (toutes vues) */
#browse .results > .cartes-famille{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-width:0;padding:10px 2px 4px;border-bottom:1px solid var(--line)}
#browse .results > .cartes-famille:first-child{padding-top:0}
#browse .results > .cartes-famille h3{display:inline-flex;align-items:center;gap:8px;margin:0;font:700 12px/1.3 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--fam,var(--accent))}
#browse .results > .cartes-famille h3::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--fam-icone) center/contain no-repeat;mask:var(--fam-icone) center/contain no-repeat}
#browse .results > .cartes-famille .cartes-famille-n{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#browse .results > .cartes-famille a{margin-inline-start:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none;border-radius:6px}
#browse .results > .cartes-famille a::after{content:"\2192";margin-inline-start:5px}
#browse .results > .cartes-famille a:hover{text-decoration:underline}
#browse .results > .cartes-famille a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ① Anatomie fixe, vue compacte */
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card]{grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:center;padding:10px;min-height:66px;border-radius:12px;border:1px solid var(--line);box-shadow:none;--fav2-coeur:36px;--fav2-coeur-marge:10px}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card]:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-visual{width:44px;height:44px;min-height:0;align-self:center;border-radius:10px;overflow:hidden;background:var(--fam-bg,var(--soft));color:var(--fam,var(--accent))}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-visual svg{width:22px;height:22px;opacity:1}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-visual img{width:100%;height:100%;object-fit:cover}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-copy{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:4px;padding:0;padding-inline-end:calc(var(--fav2-coeur-marge,10px) + var(--fav2-coeur,36px) + 6px)}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-copy h3{order:1;flex:1 1 100%;min-width:0;margin:0;display:block;font-size:15px;line-height:1.25;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-copy .label{order:2;flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 7px 2px 6px;border-radius:999px;background:var(--fam-bg,var(--soft));color:var(--fam,var(--accent));font-size:10.5px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;opacity:1}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-copy .label::before{content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:var(--fam-icone) center/contain no-repeat;mask:var(--fam-icone) center/contain no-repeat}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-copy > .muted,html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-copy > .listing-copy-meta{order:3;flex:0 1 auto;min-width:0;max-width:100%;margin:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-copy > .listing-copy-meta{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-copy > .muted:empty{display:none}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card] .listing-copy-meta > .webcam-local-clock{margin:0;padding:1px 7px;font-size:11px;border-color:var(--line)}
/* ② Cartes calmes : le cœur */
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-fav2-id] .fav2-card-heart:not([aria-pressed="true"]){color:var(--muted);border-color:var(--line);background:var(--surface);box-shadow:none}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-fav2-id] .fav2-card-heart:not([aria-pressed="true"]):hover{color:var(--accent);border-color:var(--accent)}
html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-fav2-id] .fav2-card-heart svg{width:16px;height:16px}
@media (prefers-reduced-motion:no-preference){html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .result[data-listing-card],html[data-listing-view="2"]:not([data-cartes-compactes-off]) #browse .fav2-card-heart{transition:border-color .15s,color .15s}}
/* ② Cartes calmes : le thème Transparency (data-style=6) pose rayon 22 px + ombre portée avec une spécificité (1,6,1) ;
   cette règle-ci pèse (1,7,1) pour la vue compacte seulement. Le fond translucide du thème est gardé. */
html[data-style="6"][data-listing-view="2"]:not([data-cartes-compactes-off]):not([data-listing-view="3"]):not([data-listing-view="6"]) #browse .result[data-listing-card]{border-radius:12px;box-shadow:none;border:1px solid var(--line)}
html[data-style="6"][data-listing-view="2"]:not([data-cartes-compactes-off]):not([data-listing-view="3"]):not([data-listing-view="6"]) #browse .result[data-listing-card]:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:none}