/*
 * Gallia – Chips de filtre par thème. Rangée horizontale scrollable, sous le
 * bandeau/au-dessus de la grille — voir gallia-filter-chips.php pour le
 * rendu HTML et le contexte (thèmes en union tous-créateurs ou par créateur).
 *
 * Style : forme pilule complète, fond gris clair inactif, #0F0F0F + texte
 * blanc actif (spécifié explicitement, indépendant de toute mesure prise sur
 * youtube.com — voir le tableau mesuré/appliqué du rapport de chantier pour
 * le détail des chips YouTube réelles, plus proches d'un radius modéré que
 * d'une pilule complète dans leur redesign actuel).
 *
 * Correctifs 2026-08-23 (2e passe, retours sur écran réel) : flèche gauche
 * ajoutée (symétrique), fiabilité de recalcul des deux flèches, glissement
 * à la souris, survol des chips qui fonçait vers le gris clair au lieu du
 * noir — voir chips.js pour la logique, commentaires ci-dessous pour le
 * détail CSS de chaque correctif.
 */

.gallia-filter-chips {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 100%;
	margin: 0.75rem 0 1rem;
	/* Défile AVEC le contenu de la page (pas sticky) — comportement YouTube
	   confirmé (la ligne de chips scrolle normalement sous le bandeau fixe). */
}

.gallia-filter-chips-track {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 0.15rem 0.1rem;
	/* Tactile : déjà nativement glissable au doigt avec overflow-x:auto sur
	   les navigateurs mobiles modernes (confirmé, pas recodé) —
	   -webkit-overflow-scrolling ajouté uniquement par précaution pour le
	   momentum scroll sur d'anciennes versions de Safari iOS. Scroll
	   horizontal natif trackpad/molette (shift+molette) déjà fonctionnel
	   nativement sur un conteneur overflow-x:auto, confirmé en testant. */
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	/* Glissement à la souris (voir chips.js) : curseur "grab" au repos,
	   "grabbing" pendant le glissement (classe posée par JS). */
	cursor: grab;
	/* Empêche la sélection de texte accidentelle pendant un glissement
	   souris — comportement natif gênant sur ce genre de composant. */
	user-select: none;
}

.gallia-filter-chips-track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto; /* pendant un glissement actif, suivre le curseur au pixel près, pas d'inertie CSS */
}

.gallia-filter-chips-track::-webkit-scrollbar {
	display: none;
}

.gallia-filter-chip {
	flex: 0 0 auto;
	height: 34px;
	padding: 0 1rem;
	border-radius: 999px;
	border: none;
	background: #F2F2F2;
	color: var(--gallia-black, #0F0F0F);
	font-family: var(--gallia-font);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}

/*
 * 🔴 Bug réel corrigé (correctifs 2026-08-23, 2e passe) : le survol
 * ÉCLAIRCISSAIT légèrement la chip (#F2F2F2 → #E5E5E5, gris sur gris),
 * contre-productif — moins visible qu'au repos. Fonce désormais nettement
 * vers le noir (intermédiaire distinct de l'état actif #0F0F0F, pour
 * garder la sélection lisible séparément du survol). La chip déjà active
 * garde son noir plein constant, insensible au survol (règle dédiée
 * ci-dessous, plus spécifique).
 */
.gallia-filter-chip:hover {
	background: #3A3A3A;
	color: #fff;
}

.gallia-filter-chip.is-active {
	background: var(--gallia-black, #0F0F0F);
	color: #fff;
}

.gallia-filter-chip.is-active:hover {
	background: var(--gallia-black, #0F0F0F);
	color: #fff;
}

.gallia-filter-chips-scroll-btn[hidden] {
	display: none;
}

.gallia-filter-chips-scroll-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	box-sizing: border-box;
	border-radius: 999px;
	border: 1px solid var(--gallia-border, #E4E4E4);
	background: #fff;
	color: var(--gallia-black, #0F0F0F);
	cursor: pointer;
	z-index: 1;
}

.gallia-filter-chips-scroll-btn-right {
	margin-left: 0.4rem;
}

.gallia-filter-chips-scroll-btn-left {
	margin-right: 0.4rem;
}

.gallia-filter-chips-scroll-btn:hover {
	background: #F5F5F5;
	/* 🔴 Bug réel corrigé (correctifs 2026-08-23, 2e passe) : `:hover` compte
	   comme une classe en spécificité CSS — le sélecteur combiné `button:
	   hover` d'Astra (élément + pseudo-classe = 2 composantes) dépassait
	   donc la règle de base .gallia-filter-chips-scroll-btn (1 classe, 1
	   seule composante) pour `border-color` précisément (jamais touché par
	   la règle :hover ci-dessus avant ce correctif, seul le fond l'était) —
	   confirmé en balayant document.styleSheets pendant un clic réel. */
	border-color: var(--gallia-border, #E4E4E4);
}

/*
 * Survol/appui — état plein noir (correctifs 2026-08-23, 4e passe, demandé
 * explicitement : même couleur que la chip sélectionnée). Déclarée APRÈS
 * .gallia-filter-chips-scroll-btn:focus ci-dessus (spécificité identique,
 * 1 classe + 1 pseudo-classe chacune — l'ordre de cascade tranche donc en
 * sa faveur) pour qu'un focus SANS survol (souris déjà repartie après un
 * clic) retombe bien sur l'état normal blanc de la règle :focus, jamais
 * bloqué en noir — c'est précisément le risque d'reproduire le bug des
 * points 1-3 (focus bleu jamais réinitialisé sans clic ailleurs) que ce
 * correctif devait éviter. :active seul (appui tactile, sans :hover
 * possible sur écran tactile) applique le même noir et se réinitialise
 * nativement au relâchement du doigt (touchend), sans JS supplémentaire.
 */
.gallia-filter-chips-scroll-btn:hover,
.gallia-filter-chips-scroll-btn:active {
	background: var(--gallia-black, #0F0F0F);
	border-color: var(--gallia-black, #0F0F0F);
	color: #fff;
}

/*
 * 🔴 Bug réel corrigé (correctifs 2026-08-23, 2e passe — "la flèche
 * disparaît après un clic, réapparaît seulement en cliquant ailleurs") :
 * Astra impose en <style> inline un reset `button:focus { background:
 * bleu; border-color: bleu }` (même famille que le bug des icônes cloche/
 * enveloppe blanches, voir le rapport précédent) — un clic RÉEL (pas un
 * .click() JS synthétique, qui ne reproduit PAS le bug, confirmé en
 * testant les deux) donne le focus au bouton, le fait basculer en bleu, et
 * ce n'est QUE la perte de focus (blur, déclenché par un clic ailleurs)
 * qui restaure l'apparence normale — exactement le symptôme décrit.
 * Neutralisé explicitement ci-dessous, remplacé par un anneau de focus
 * discret et cohérent avec le reste du site (jaune, comme les autres
 * éléments interactifs du header) qui n'affecte ni le fond ni la bordure.
 */
.gallia-filter-chips-scroll-btn:focus {
	background: #fff;
	border-color: var(--gallia-border, #E4E4E4);
}

.gallia-filter-chips-scroll-btn:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: 1px;
}

.gallia-filter-chips-scroll-btn svg {
	width: 18px;
	height: 18px;
}

/* La carte/short masquée par le filtrage — voir chips.js. */
.gallia-filterable-hidden {
	display: none !important;
}