/* ==========================================================================
   FILTRES DU PORTFOLIO : MINIMAL, TEXTE SEUL, NOIR ET BLANC (23 oct. 2026)
   --------------------------------------------------------------------------
   Barre noire, texte Roboto Light 11 px en majuscules, 64 px entre chaque filtre.
   DEUX NIVEAUX DE GRIS seulement (plus de rose, plus de blanc pur) :
     --pf-on  : filtre actif / survol (gris clair, doux)
     --pf-off : filtres inactifs (gris plus sombre)
   "Tous" est remplace par une micro-icone grille 3 x 3 (celle du bouton portfolio du menu) : un SVG en currentColor,
   donc il suit exactement les memes gris que le texte.
   Se charge APRES css/skin.css et css/desktop-menu-toggle.css (qui imposaient fond blanc, rose et 13 px) : sa specificite
   plus forte (html body ...) reprend la main sans !important.
   REGLAGES : les 5 variables juste en dessous.
   POUR REVENIR EN ARRIERE : retirer la ligne <link ... portfolio-filtres-minimal.css> des pages portfolio.html (FR + EN).
   ========================================================================== */
:root {
	--pf-on: #c8c8c8;       /* actif / survol */
	--pf-off: #767676;      /* inactif (4,5:1 sur le noir : lisible) */
	--pf-size: 11px;
	--pf-gap: 64px;         /* espace entre les filtres (28px sur petit ecran, voir plus bas) */
	--pf-weight: 300;       /* Roboto Light */
}

html body .portfolio-filter-wrapper {
	background: #000;
	background-color: #000;
}

html body .portfolio-filter-wrapper .mech-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px var(--pf-gap);
}

html body .portfolio-filter-wrapper .mech-filters a {
	margin: 0;
	padding: 8px 0;
	border: 0;
	display: inline-flex;
	align-items: center;
	font-family: "Roboto", Arial, sans-serif;
	font-size: var(--pf-size);
	font-weight: var(--pf-weight);
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pf-off);
	transition: color .2s ease-in-out;
}

html body .portfolio-filter-wrapper .mech-filters a:hover,
html body .portfolio-filter-wrapper .mech-filters a:focus,
html body .portfolio-filter-wrapper .mech-filters a.active {
	color: var(--pf-on);
}

html body .portfolio-filter-wrapper .mech-filters a:focus-visible {
	outline: 1px solid var(--pf-on);
	outline-offset: 6px;
}

/* micro-icone grille (remplace "Tous") : 3 x 3 points, dessines en currentColor */
html body .portfolio-filter-wrapper .mech-filters a svg {
	display: block;
	width: 12px;
	height: 12px;
	fill: currentColor;
}

@media only screen and (max-width: 700px) {
	:root { --pf-gap: 28px; }
}