/* ==========================================================================
   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; }
}

/* ==========================================================================
   TABLETTE UNIQUEMENT (768 - 1199 px, 27 oct. 2026) : FILTRES CENTRES DANS L'ECRAN
   --------------------------------------------------------------------------
   Sur tablette la barre (icone grille / VIDEO / ACTIVATION / DIGITAL / AI) etait collee a gauche : le theme impose "justify-content: flex-start" sur
   .portfolio-filter-wrapper (css/style.css) et les regles de centrage de css/udt_media_queries.css sont neutralisees (media 99999px).
   Ici : le bandeau (pleine largeur, 40 px de marge de chaque cote) centre son contenu, et le bloc de filtres est centre dans le bandeau : l'ensemble
   (icone grille comprise) est donc au milieu de l'ecran. Fonctionne aussi quand la barre est collee en haut au defilement (.is-stuck : meme largeur).
   Desktop (>= 1200 px) et mobile (<= 767 px) : AUCUN changement (cette regle n'existe qu'entre 768 et 1199 px).
   POUR RETIRER : supprimer ce bloc.
   ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
	html body .portfolio-filter-wrapper {
		justify-content: center;
		text-align: center;
	}
	html body .portfolio-filter-wrapper .mech-filters {
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}
}