/* Archives — barre de filtres CONDENSEE, sur le motif du mega menu.
   ------------------------------------------------------------------
   POURQUOI (Stephane, 21/09, capture de « Les Archives ») : la barre empilait
   quatre rangees — Trier (4 chips), Epoque (15), Procede (11), Ambiance (6) —
   soit 36 boutons et pres d un demi-ecran AVANT la premiere photo. Sur une page
   dont le sujet EST l image, l outil mangeait l oeuvre.

   LE MOTIF EST CELUI DU SITE, pas une invention : le mega menu de l en-tete
   (<details class="mega-family"><summary>Televisions</summary>) ouvre ses
   panneaux AU CLIC, en HTML natif, sans JavaScript et au clavier. On reprend
   exactement ce geste pour les filtres.

   CE QUE CE FICHIER NE FAIT PAS, et c est deliberé : il ne repeint AUCUNE chip.
   Le declencheur porte lui-meme la classe `chip`, donc il herite du style servi
   — laiton, bleu, ou ce qui viendra ensuite — sans que ce fichier ait a le
   savoir. Une feuille qui redeclare une couleur devient fausse le jour ou la
   palette bouge ; celle-ci ne peut pas.

   REVERSIBLE : retirer le <link> et le <script> rend la barre d origine, les
   quatre rangees etant conservees telles quelles dans le HTML.

   Version: 1.2.0 — 21/09 : le panneau passait DERRIERE les tuiles de clips (barre
   sticky = contexte d empilement ; z-index:40 y vaut 10 dehors). Le conteneur monte
   a 60 le temps de l ouverture, par `:has()` et par une classe posee en JS — deux
   chemins, parce qu un seul serait un point unique de panne.
   Version: 1.2.1 — 21/09 : le panneau etait TRANSPARENT sur clips (`var(--card)` n y
   existe pas). Plancher opaque en dur, puis chaine de replis qui suit le theme.
   Version: 1.2.0 — 21/09 : le panneau passait DERRIERE les tuiles de clips.
   Version: 1.1.1 — 21/09 : le conteneur se nomme `toolbar` sur photos et `filters` sur
   clips — la 1.1.0 ne ciblait que le premier, et sur clips la barre restait empilee a
   107 px avec un panneau decale de 483 px. Attrape au banc, jamais a la relecture : le
   CSS etait juste, il visait simplement une classe que cette page n a pas.
   Version: 1.1.0 — 21/09 (Opus-filtres-photos) : CLIPS rejoint les Archives. Sa page
   porte la meme structure de filtres — paires .flab + .frow avec un id — sous un
   conteneur nomme `filters` au lieu de `toolbar`, avec 107 boutons sur deux rangees
   (68 tendances, 39 pays). Le prefixe devient `:is(photos, clips)` : meme specificite
   qu avant (`:is()` prend celle de son argument le plus fort), donc rien ne bouge cote
   photos, et le module s applique a la page voisine sans y avoir ete recopie.
   Version: 1.0.0 — 21/09 (Opus-filtres-photos) */


/* ⚠ POURQUOI CE PREFIXE `:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv`, ET PAS `#dv` SEUL.
   Mesure du 21/09, banc Chromium sur la chaine SERVIE (14 feuilles) : avec
   `#dv` seul, la barre condensee rendait 156 px au lieu de 34 — le module avait
   l air pose et ne changeait rien. La cause : `heritage-20260918-r2.css`
   declare `:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .toolbar{display:grid;
   grid-template-columns:90px minmax(0,1fr)}` — plus specifique, et charge APRES.
   Les <details> se rangeaient donc sagement dans sa grille a deux colonnes.
   On reprend son prefixe exact et on ajoute `.tb-compact` : un cran de plus,
   dans le meme contexte. Et la feuille est branchee EN DERNIER dans le <head>,
   pour que l ordre ne puisse pas jouer contre nous non plus.
   Le premier banc, lui, avait rendu 34 px : il jugeait la page SANS ces
   feuilles. Un banc qui mesure une page incomplete dit exactement ce qu on
   voulait entendre. */

/* ---- la barre : une seule ligne, elle defile si l ecran est etroit ---- */
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv :is(.toolbar,.filters).tb-compact{
	display:flex; flex-wrap:wrap; align-items:center; gap:8px;
	margin:10px 0 2px; padding:0;
}

/* ---- le declencheur ---- */
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop{position:relative}

:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop>summary.chip{
	display:inline-flex; align-items:center; gap:7px;
	cursor:pointer; list-style:none; white-space:nowrap;
	/* PLANCHER de cible, jamais un plafond : `min-height` garantit une hauteur
	   confortable quelle que soit la feuille qui peint `.chip`, et s efface si
	   celle-ci est deja plus genereuse. Mesure du banc sans la feuille servie :
	   28,5 px — sous le seuil, et c est la cible la plus utilisee de la page. */
	min-height:34px;
}
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop>summary.chip::-webkit-details-marker{display:none}
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop>summary.chip::marker{content:""}

/* l intitule de la famille : meme graphie que l ancien .flab, en plus petit */
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop-k{
	font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
	opacity:.72;
}
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop-v{
	font-weight:650;
	/* 24ch : « ★ Les mieux conservées » fait 22 caracteres — a 15ch il rendait
	   « ★ Les mieux c… », vu a la capture du banc. L ellipse reste la, pour le
	   jour ou un libelle plus long arrivera. */
	max-width:24ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* chevron en trait — pas d emoji dans l interface */
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop>summary.chip::after{
	content:""; width:6px; height:6px; margin-left:1px; align-self:center;
	border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
	transform:translateY(-2px) rotate(45deg);
	transition:transform .16s ease;
}
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop[open]>summary.chip::after{transform:translateY(1px) rotate(-135deg)}

/* ---- le panneau ----
   CENTRE sur le MILIEU de son declencheur (regle gravee du 10/08 : left =
   ancre.left + ancre.width/2 - panneau.width/2). En CSS pur, `left:50%` +
   `translateX(-50%)` donne exactement ce calcul, sans JavaScript et sans
   replacement visible. Le JS ne fait ensuite QUE la bornure aux bords de la
   fenetre, et seulement si elle est necessaire. */
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop-p{
	position:absolute; z-index:40; top:calc(100% + 7px);
	left:50%; transform:translateX(-50%);
	width:max-content; max-width:min(560px, calc(100vw - 24px));
	padding:12px 13px 11px;
	/* FOND OPAQUE, ET IL DOIT LE RESTER SUR TOUTE PAGE.
	   Paye le 21/09 sur clips : `background:var(--card)` y rendait le panneau
	   ENTIEREMENT TRANSPARENT — ce jeton n existe que dans le module de photos.
	   Une declaration invalide ne casse rien de visible : elle est simplement
	   ignoree, et on lit les tuiles video a travers le panneau. Trois controles
	   l ont manque (elementFromPoint repondait « degage », a juste titre : le
	   panneau EST au-dessus, il est transparent). La mesure qui a tranche est
	   celle des PIXELS : 41,8 % de la zone rendait sombre.
	   D ou le plancher en dur PUIS la chaine de replis : la premiere declaration
	   tient si tout le reste echoue, la seconde suit le theme de la page. */
	background-color:#fbf5e6;
	background-color:var(--card, var(--bg2, var(--bg, #fbf5e6)));
	border:1px solid rgba(20,24,50,.14);
	border:1px solid var(--line, rgba(20,24,50,.14)); border-radius:14px;
	box-shadow:0 18px 44px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.18);
}
/* decalage applique par le JS quand le panneau sortirait de l ecran */
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop-p[style*="--fpop-dx"]{
	transform:translateX(calc(-50% + var(--fpop-dx)));
}

/* dans le panneau, les chips passent a la ligne : on voit TOUTES les options
   d un coup. Un defilement horizontal cache la moitie des epoques. */
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop-p .frow{
	display:flex; flex-wrap:wrap; gap:7px; overflow:visible; padding:0;
	/* la valeur en dur reste le plancher si le JS ne tourne pas ; `--fpop-max`,
	   pose a l ouverture, donne l espace reellement disponible sous le declencheur */
	max-height:min(52vh, 420px);
	max-height:min(var(--fpop-max, 52vh), 420px); overflow-y:auto;
}

/* ---- LE PANNEAU RESTE AU-DESSUS DE LA GALERIE ----
   ⚠ CE N EST PAS le correctif du defaut vu sur clips le 21/09 — celui-la etait un
   fond transparent, repare plus haut. J ai d abord cru a l empilement et pose ce
   bloc : la mesure au pixel l a dementi (41,8 % de sombre, identique avec z=60 et
   avec z=9999). Il est garde parce qu il repond a un risque REEL et distinct : la
   barre de clips est `position:sticky; z-index:10`, donc elle cree un contexte
   d empilement, et le `z-index:40` du panneau n y vaut que 10 vis-a-vis du reste
   de la page. Un contenu a z superieur passerait devant.
   On eleve LE TEMPS DE L OUVERTURE, jamais en permanence : un z-index haut qui
   reste passerait devant l en-tete collant du site. Deux chemins (`:has()` et une
   classe posee en JS) parce qu un seul serait un point unique de panne. */
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv :is(.toolbar,.filters).tb-compact:has(.fpop[open]),
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv :is(.toolbar,.filters).tb-compact.fpop-ouvert{
	z-index:60;
}

/* le compteur reste au bout de la barre */
:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv :is(.toolbar,.filters).tb-compact .gcount{margin:0 0 0 auto; align-self:center}

/* ---- telephone : le panneau devient une feuille pleine largeur ----
   EXCEPTION AU CENTRAGE, et elle est documentee (regle du 10/08) : sous 620 px,
   un panneau de 460 px centre sur une icone de bord sortirait de l ecran quoi
   qu on fasse. Il prend donc toute la largeur de la barre. */
@media (max-width:620px){
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv :is(.toolbar,.filters).tb-compact{
		/* deux colonnes egales : a l essai, les quatre pilules tombaient 3 + 1,
		   avec un vide a droite et une derniere cible orpheline. En 2x2 la
		   hauteur est la meme, chaque cible est plus large sous le doigt, et la
		   barre se lit comme un bloc. */
		display:grid; grid-template-columns:1fr 1fr; gap:6px;
	}
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop>summary.chip{
		width:100%; justify-content:center;
	}
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop>summary.chip{min-height:44px}
	/* Sur telephone, la barre ne dit QUE ce qui est actif : un declencheur au
	   neutre montre sa famille seule (« Epoque »), un declencheur actif montre
	   son choix (« Epoque · Annees 1860 »). Mesure : 117 px de barre en montrant
	   tout, une seule ligne en ne montrant que l utile — et le regard tombe sur
	   les filtres qui changent quelque chose. */
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop>summary.chip:not(.on) .fpop-v{display:none}
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop-v{max-width:11ch}
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop{position:static}
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop-p,
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop-p[style*="--fpop-dx"]{
		position:absolute; left:0; right:0; width:auto; max-width:none;
		transform:none;
	}
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) :is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact{position:relative}
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv :is(.toolbar,.filters).tb-compact .gcount{margin:2px 0 0; width:100%}
}

/* ---- sans JavaScript, tout fonctionne encore ----
   <details> s ouvre nativement ; seules la valeur affichee et la fermeture
   automatique manquent. Aucun filtre n est perdu. */
@media (prefers-reduced-motion:reduce){
	:is(main[data-decouvrir="photos"],main[data-decouvrir="clips"]) #dv .tb-compact .fpop>summary.chip::after{transition:none}
}