#portfolio_page .nav-links a{
	color: var(--portfolios-nav-links-color);
	text-decoration: none;
	padding: var(--portfolios-nav-links-padding-vert) var(--portfolios-nav-links-padding-horiz);
	border-radius: var(--portfolios-nav-links-radius);
	display: inline-block;
	transition: 0.2s linear;
	position: relative;
}

#portfolio_page .nav-links a{
	transition: 0.2s linear;
} 

/* Mode fond en surbrillance */
#portfolio_page .nav-links--bg .nav-links a:hover,
#portfolio_page .nav-links--bg .nav-links a.active-nav{
	background: var(--portfolios-nav-bg-color);
	opacity: 1;
} 

/* Apparence active optionnelle plus marquée */
#portfolio_page .nav-links--bg .nav-links a.active-nav{
	/* style discret conforme aux autres éléments */
	box-shadow: none;
} 

/* Mode soulignement — soulignement animé via pseudo-élément */
/* Mode soulignement sans padding autour des liens */
#portfolio_page .nav-links--underline .nav-links a{
	padding: 0;
	padding-bottom: 0; /* pas d'espacement autour du lien */
	transition: opacity var(--portfolios-nav-links-transition), color var(--portfolios-nav-links-transition);
}

#portfolio_page .nav-links--underline .nav-links a::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0; /* trait collé au texte */
	height: 2px;
	/* par défaut, on utilise la couleur de hover par défaut ; elle pourra être surchargée selon le mode */
	background: var(--portfolios-nav-links-bg, transparent);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform var(--portfolios-nav-links-transition) ease, background var(--portfolios-nav-links-transition) ease;
	border-radius: var(--portfolios-border-radius-xs);
} 

/* En mode souligné : au survol / actif, le texte ET le trait utilisent la couleur personnalisée nav_button_text_color */
#portfolio_page .nav-links--underline .nav-links a:hover,
#portfolio_page .nav-links--underline .nav-links a.active-nav,
#portfolio_page .nav.nav--underline .nav__list a:hover,
#portfolio_page .nav.nav--underline .nav__list a.active-nav{
	color: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-color)) !important;
} 

#portfolio_page .nav-links--underline .nav-links a:hover::after,
#portfolio_page .nav-links--underline .nav-links a.active-nav::after,
#portfolio_page .nav.nav--underline .nav__list a:hover::after,
#portfolio_page .nav.nav--underline .nav__list a.active-nav::after{
	background: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-bg));
	transform: scaleX(1);
} 

/* Accessibilité : style de focus */
#portfolio_page .nav-links a:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(11,132,255,0.12);
} 

/* Effets de survol/clic : utilisons les transformations/filtres exposés via variables CSS, pas d'attributs */
#portfolio_page .nav .nav__list a:hover,
#portfolio_page .nav-links a:hover{
	transform: var(--portfolios-nav-hover-transform, none);
	filter: var(--portfolios-nav-hover-filter, none);
}
#portfolio_page .nav .nav__list a:active,
#portfolio_page .nav-links a:active,
#portfolio_page .nav .nav__list a:focus{
	transform: var(--portfolios-nav-click-transform, none);
}

/* Assurer une transition pour les transformations */
#portfolio_page .nav .nav__list a,
#portfolio_page .nav-links a{
	transition: transform 0.25s ease, filter 0.25s ease;
} 

/* Règles spécifiques en-tête / pied : forcer l'application des effets même lorsqu'il existe des sélecteurs plus spécifiques */
#portfolio_page #header-nav .nav__list a:hover,
footer.nav .nav__list a:hover{
	transform: var(--portfolios-nav-hover-transform, none) !important;
	filter: var(--portfolios-nav-hover-filter, none) !important;
}
#portfolio_page #header-nav .nav__list a:active,
footer.nav .nav__list a:active,
#portfolio_page #header-nav .nav__list a:focus,
footer.nav .nav__list a:focus{
	transform: var(--portfolios-nav-click-transform, none) !important;
}

/* Ciblage spécifique pour l'en-tête/pied si nécessaire */
#portfolio_page header .nav-links a,
#portfolio_page footer .nav-links a{
 	/* exemple : un peu plus gras dans l'en-tête */
 	font-weight: 500;
}

/* Petits écrans : rendre les liens plus adaptés au tactile */
@media (max-width: 640px){
	#portfolio_page .nav-links a{
		padding: 12px 14px;
	}
	#portfolio_page .nav-links--underline .nav-links a::after{ bottom: 10px; left: 14px; right: 14px; }
} 

/* Correspondance des liens */
#portfolio_page .nav .nav__list a,
#portfolio_page .nav__list-item a{
	color: var(--portfolios-text-main-color);
	text-decoration: none;
	padding: var(--portfolios-nav-links-padding-vert) var(--portfolios-nav-links-padding-horiz);
	border-radius: var(--portfolios-nav-links-radius);
	display: inline-block;
	transition: 0.2s linear;
	position: relative;
} 

/* Styles pour les liens configurés comme boutons (nav-link) */
#portfolio_page .nav .nav__list a.nav-link,
#portfolio_page .nav-links a.nav-link {
	/* Par défaut, utiliser la couleur de texte générale du thème */
	color: var(--portfolios-text-main-color);
	background: transparent;
	padding: var(--portfolios-nav-links-padding-vert) var(--portfolios-nav-links-padding-horiz);
	border-radius: var(--portfolios-nav-links-radius);
	transition: background var(--portfolios-nav-links-transition), color var(--portfolios-nav-links-transition);
} 

/* En mode fond : garder texte thème par défaut, appliquer le fond seulement au hover/actif (ou via JS pour l'aperçu) */
#portfolio_page .nav.nav--bg .nav__list a.nav-link,
#portfolio_page .nav-links--bg .nav-links a.nav-link{
	background: transparent;
	color: var(--portfolios-text-main-color);
	/* Bordure présente mais transparente par défaut pour stabiliser la taille */
	border: var(--portfolios-nav-button-border-width, 0px) var(--portfolios-nav-button-border-style, solid) transparent;
	box-sizing: border-box;
	border-radius: var(--portfolios-nav-button-border-radius, var(--portfolios-nav-links-radius));
}  

#portfolio_page .nav.nav--bg .nav__list a.nav-link:not(.footer-title):hover,
#portfolio_page .nav.nav--bg .nav__list a.nav-link:not(.footer-title).active-nav,
#portfolio_page .nav-links--bg .nav-links a.nav-link:not(.footer-title):hover,
#portfolio_page .nav-links--bg .nav-links a.nav-link:not(.footer-title).active-nav,
/* Ajouter les liens sans la classe nav-link (ex : liens de navigation standards) */
#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title):hover,
#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title).active-nav,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title):hover,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title).active-nav{
	background: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-bg));
	color: var(--portfolios-nav-button-hover-text-color, var(--portfolios-nav-button-contrast-color, var(--portfolios-text-main-color, var(--portfolios-nav-links-color)))) !important; /* texte de hover configurable */
	/* Appliquer une bordure configurable (couleur, épaisseur, style) en mode fond */
	border: var(--portfolios-nav-button-border-width, 0px) var(--portfolios-nav-button-border-style, solid) var(--portfolios-nav-button-border-color, var(--portfolios-nav-button-hover-text-color, transparent));
	box-sizing: border-box;
	border-radius: var(--portfolios-nav-links-radius);
	/* Support de l'ombre si configurée */
	box-shadow: var(--portfolios-nav-button-box-shadow, none);
} 

/* Override plus spécifique pour l'en-tête (certaines règles peuvent être plus spécifiques) */
#portfolio_page #arktefakt-header .nav.nav--bg .nav__list a:hover,
#portfolio_page #arktefakt-header .nav.nav--bg .nav__list a.active-nav,
#portfolio_page #arktefakt-header .nav-links--bg .nav-links a:hover,
#portfolio_page #arktefakt-header .nav-links--bg .nav-links a.active-nav{
	box-shadow: var(--portfolios-nav-button-box-shadow, none) !important;
}

/* Si la nav possède la classe nav--underline, retirer le padding des liens */
#portfolio_page .nav.nav--underline .nav__list a,
#portfolio_page .nav.nav--underline .nav__list-item a,
#portfolio_page .nav.nav--underline .nav__list a > * {
	padding: 0 !important;
} 

/* En mode soulignement, laisser 2px de padding en bas pour espacer le texte du trait */
#portfolio_page .nav-links--underline .nav-links a,
#portfolio_page .nav.nav--underline .nav__list a {
	padding-bottom: 2px !important;
} 

/* Par défaut : soulignement animé pour la navigation de l'en-tête */
#portfolio_page .nav .nav__list a::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-bg, transparent));
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform var(--portfolios-nav-links-transition) ease, background var(--portfolios-nav-links-transition) ease;
	border-radius: var(--portfolios-border-radius-xs);
}

#portfolio_page .nav .nav__list a:hover::after,
#portfolio_page .nav .nav__list a.active-nav::after{
	transform: scaleX(1);
} 

#portfolio_page .content-article a:not(:is(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a)),
#portfolio_page .content-article p a:not(:is(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a)),
#portfolio_page #subtitle-article a,
#portfolio_page #subtitle-article p a,
#portfolio_page #theme-visualiser .content-article a:not(:is(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a)),
#portfolio_page #theme-visualiser .content-article p a:not(:is(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a)),
#portfolio_page #theme-visualiser #subtitle-article a,
#portfolio_page #theme-visualiser #subtitle-article p a,
#portfolio_page .content-article a[style],
#portfolio_page #theme-visualiser .content-article a[style],
#portfolio_page #subtitle-article a[style],
#portfolio_page #theme-visualiser #subtitle-article a[style]{
	color: var(--folio-button-background-color) !important;
	display: inline-block !important;
	vertical-align: baseline !important;
	padding-bottom: 0px !important;
	margin-left: 5px !important;
	margin-right: 5px !important;
	border-bottom: 2px solid var(--folio-button-background-color) !important;
	text-decoration: none !important;
	background: transparent !important;
	box-shadow: none !important;
	transition: color 0.15s ease !important;
	line-height: auto !important;
}

#portfolio_page .content-article a:not(:is(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a))::after,
#portfolio_page .content-article p a:not(:is(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a))::after,
#portfolio_page #subtitle-article a::after,
#portfolio_page #subtitle-article p a::after{
	content: "¶" !important;
	margin-left: 5px !important;
	margin-right: 5px !important;
	color: inherit !important;
}

#portfolio_page .content-article a:not(:is(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a)):hover,
#portfolio_page #subtitle-article a:hover{
	opacity: 0.9 !important;
	color: var(--folio-button-background-color) !important;
	border-bottom: 2px solid var(--folio-button-background-color) !important;
	text-decoration: none !important;
}


#portfolio_page footer .footer-title::after,
#portfolio_page .nav .nav__list a.footer-title::after,
#portfolio_page .nav-links a.footer-title::after{
    content: none !important;
    display: none !important;
    background: none !important;
    transition: none !important;
} 

/* Disable hover / active / focus effects */
#portfolio_page footer .footer-title,
#portfolio_page .nav .nav__list a.footer-title,
#portfolio_page .nav-links a.footer-title{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    color: inherit !important;
} 

#portfolio_page footer .footer-title:hover,
#portfolio_page .nav .nav__list a.footer-title:hover,
#portfolio_page .nav-links a.footer-title:hover,
#portfolio_page footer .footer-title:active,
#portfolio_page .nav .nav__list a.footer-title:active,
#portfolio_page .nav-links a.footer-title:active,
#portfolio_page footer .footer-title:focus,
#portfolio_page .nav .nav__list a.footer-title:focus,
#portfolio_page .nav-links a.footer-title:focus{
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    color: inherit !important;
    background: none !important;
    box-shadow: none !important;
} 

/* Footer override: ne pas appliquer d'effets de transformation sur les titres de footer */
#portfolio_page footer.nav .nav__list a.footer-title:hover,
#portfolio_page footer.nav .nav__list a.footer-title{
    transform: none !important;
    filter: none !important;
    transition: none !important;
} 

#portfolio_page footer.nav .nav__list a.footer-title:active,
#portfolio_page footer.nav .nav__list a.footer-title:focus{
    transform: none !important;
} 

/* Ensure nav--bg / nav-links modes do not affect footer titles */
#portfolio_page .nav.nav--bg .nav__list a.footer-title:hover,
#portfolio_page .nav-links--bg .nav-links a.footer-title:hover,
#portfolio_page .nav.nav--bg .nav__list a.footer-title.active-nav,
#portfolio_page .nav-links--bg .nav-links a.footer-title.active-nav{
    background: none !important;
    color: inherit !important;
    box-shadow: none !important;
    border: none !important;
} 

/* Désactiver le pseudo-élément de soulignement lorsque la nav utilise le fond */
#portfolio_page .nav.nav--bg .nav__list a::after,
#portfolio_page .nav.nav--bg .nav__list a:hover::after,
#portfolio_page .nav.nav--bg .nav__list a.active-nav::after,
#portfolio_page .nav-links--bg .nav-links a::after,
#portfolio_page .nav-links--bg .nav-links a:hover::after,
#portfolio_page .nav-links--bg .nav-links a.active-nav::after{
	display: none !important;
	content: none !important;
} 

/* Appliquer une bordure (style + largeur) par défaut mais transparente pour les liens en mode fond */
#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title),
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title){
	border: var(--portfolios-nav-button-border-width, 0px) var(--portfolios-nav-button-border-style, solid) transparent;
	box-sizing: border-box;
	border-radius: var(--portfolios-nav-button-border-radius, var(--portfolios-nav-links-radius));
} 

/* Si vous préférez le fond en surbrillance, ajoutez `nav--bg` à l'élément nav */

/* Si vous préférez le fond en surbrillance, ajoutez `nav--bg` à l'élément nav */
#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title):hover,
#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title).active-nav,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title):hover,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title).active-nav{
	/* Utilise la couleur de texte configurée pour les boutons comme couleur de fond (on abandonne le champ bg) */
	background: var(--portfolios-nav-button-text-color);
	/* Appliquer la couleur de texte de hover pour les liens (exclut .footer-title) */
	color: var(--portfolios-nav-button-hover-text-color, var(--portfolios-nav-button-contrast-color, var(--portfolios-text-main-color))) !important;
	opacity: 1;
		/* Bordure configurable (couleur, épaisseur, style) pour les boutons en mode fond */
		border: var(--portfolios-nav-button-border-width, 0px) var(--portfolios-nav-button-border-style, solid) var(--portfolios-nav-button-border-color, var(--portfolios-nav-button-hover-text-color, transparent));
		box-sizing: border-box;
		border-radius: var(--portfolios-nav-links-radius);
}

#portfolio_page .nav .nav__list a.footer-title:hover,
#portfolio_page .nav-links a.footer-title:hover,
#portfolio_page .nav.nav--bg .nav__list a.footer-title:hover,
#portfolio_page .nav-links--bg .nav-links a.footer-title:hover{
	color: var(--portfolios-text-main-color) !important;
	background: transparent !important;
	border: none !important;
} 

/* Override: forcer la couleur hover/active quand l'ID #arktefakt-header est présent */
#portfolio_page #arktefakt-header .nav.nav--underline .nav__list a:hover,
#portfolio_page #arktefakt-header .nav.nav--underline .nav__list a.active-nav,
#portfolio_page #arktefakt-header .nav-links--underline .nav-links a:hover,
#portfolio_page #arktefakt-header .nav-links--underline .nav-links a.active-nav{
  color: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-color)) !important;
} 

#portfolio_page #arktefakt-header .nav.nav--underline .nav__list a:hover::after,
#portfolio_page #arktefakt-header .nav.nav--underline .nav__list a.active-nav::after,
#portfolio_page #arktefakt-header .nav-links--underline .nav-links a:hover::after,
#portfolio_page #arktefakt-header .nav-links--underline .nav-links a.active-nav::after{
  background: var(--portfolios-nav-button-text-color) !important;
  transform: scaleX(1);
}

/* Forcer l'arrondi des liens dans l'en-tête et le pied de page (version publique) */
#portfolio_page #header-nav .nav__list a,
#portfolio_page footer.nav .nav__list a,
#portfolio_page .nav .nav__list a,
#portfolio_page .nav-links a{
  border-radius: var(--portfolios-nav-links-radius) !important;
  overflow: visible !important;
}

/* Preview-specific overrides (simulation / manage) : s'assurer que le mode "soulignage" montre bien la couleur texte et le trait dans l'aperçu */
#portfolio_page #theme-visualiser .nav.nav--underline .nav__list a:hover,
#portfolio_page #theme-visualiser .nav-links--underline .nav-links a:hover,
#portfolio_page #theme-visualiser .nav.nav--underline .nav__list a.active-nav,
#portfolio_page #theme-visualiser .nav-links--underline .nav-links a.active-nav{
  color: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-color)) !important;
}
#portfolio_page #theme-visualiser .nav.nav--underline .nav__list a:hover::after,
#portfolio_page #theme-visualiser .nav-links--underline .nav-links a:hover::after,
#portfolio_page #theme-visualiser .nav.nav--underline .nav__list a.active-nav::after,
#portfolio_page #theme-visualiser .nav-links--underline .nav-links a.active-nav::after{
  background: var(--portfolios-nav-button-text-color) !important;
  transform: scaleX(1) !important;
} 

/* Preview: appliquer les transformations (hover/click) via les variables CSS définies sur #theme-visualiser */
#portfolio_page #theme-visualiser .nav .nav__list a:hover:not(.footer-title),
#portfolio_page #theme-visualiser .nav-links a:hover:not(.footer-title){
	transform: var(--portfolios-nav-hover-transform, none) !important;
	filter: var(--portfolios-nav-hover-filter, none) !important;
}
#portfolio_page #theme-visualiser .nav .nav__list a:active:not(.footer-title),
#portfolio_page #theme-visualiser .nav-links a:active:not(.footer-title),
#portfolio_page #theme-visualiser .nav .nav__list a:focus:not(.footer-title),
#portfolio_page #theme-visualiser .nav-links a:focus:not(.footer-title){
	transform: var(--portfolios-nav-click-transform, none) !important;
}

/* S'assurer que le hover/active conserve l'arrondi */
#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title):hover,
#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title).active-nav,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title):hover,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title).active-nav{
  border-radius: var(--portfolios-nav-links-radius) !important;
} 

/* Assurer que les icônes SVG de la bascule suivent la couleur de hover en mode fond */
#portfolio_page .submenu-toggle-icon svg,
#portfolio_page .submenu-toggle-icon svg *,


#portfolio_page .submenu-toggle-icon svg path,
#portfolio_page .submenu-toggle-icon svg circle,
#portfolio_page .submenu-toggle-icon svg rect,
#portfolio_page .submenu-toggle-icon svg polygon,
#portfolio_page .submenu-toggle-icon svg line,
#portfolio_page .submenu-toggle-icon svg polyline{
	/* Forcer l'utilisation de la couleur courante et la transition */
	fill: currentColor !important;
	stroke: currentColor !important;
	color: inherit !important;
	transition: fill var(--portfolios-nav-links-transition), stroke var(--portfolios-nav-links-transition), color var(--portfolios-nav-links-transition);
} 

#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title):hover .submenu-toggle-icon,
#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title).active-nav .submenu-toggle-icon,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title):hover .submenu-toggle-icon,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title).active-nav .submenu-toggle-icon,
#portfolio_page #theme-visualiser .nav.nav--bg .nav__list a:not(.footer-title):hover .submenu-toggle-icon,
#portfolio_page #theme-visualiser .nav.nav--bg .nav__list a:not(.footer-title).active-nav .submenu-toggle-icon {
	color: var(--portfolios-nav-button-hover-text-color, var(--portfolios-nav-button-contrast-color, var(--portfolios-text-main-color))) !important;
	/* Au cas où le SVG ne respecte pas currentColor, forcer aussi fill/stroke */
	fill: var(--portfolios-nav-button-hover-text-color, var(--portfolios-nav-button-contrast-color, var(--portfolios-text-main-color))) !important;
	stroke: var(--portfolios-nav-button-hover-text-color, var(--portfolios-nav-button-contrast-color, var(--portfolios-text-main-color))) !important;
} 

/* Fallback pour icônes chargées via <img> (rendre visible si possible) */
#portfolio_page .submenu-toggle-icon img {
	display: inline-block;
	max-width: 1em;
	height: 1em;
	vertical-align: middle;
	transition: filter var(--portfolios-nav-links-transition);
} 

#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title):hover .submenu-toggle-icon img,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title):hover .submenu-toggle-icon img,
#portfolio_page .nav.nav--bg .nav__list a:not(.footer-title).active-nav .submenu-toggle-icon img,
#portfolio_page .nav-links--bg .nav-links a:not(.footer-title).active-nav .submenu-toggle-icon img{
	/* Tentative : forcer contraste par inversion si image monochrome (peut ne pas fonctionner selon l'image) */
	filter: brightness(0) saturate(100%) invert(1);
} 

/* Si vous préférez le fond en surbrillance, ajoutez `nav--bg` à l'élément nav */

/* mettre aussi l'underline ::after à la même couleur si on utilise texte comme couleur */
#portfolio_page .nav .nav__list a::after{
	background: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-bg, transparent));
}

/* Focus accessibilité */
#portfolio_page .nav .nav__list a:focus{
 	outline: none;
 	box-shadow: 0 0 0 3px rgba(11,132,255,0.12);
} 

/* Exclure les titres de footer des effets de navigation (hover, underline) */
#portfolio_page .footer-title,
#portfolio_page .footer-title:hover,
#portfolio_page .nav .nav__list a.footer-title,
#portfolio_page .nav-links a.footer-title{
	opacity: 1 !important;
	box-shadow: none !important;
	text-decoration: none !important;
} 

/* Pas de pseudo-élément underline pour les footer-title */
#portfolio_page .nav .nav__list a.footer-title::after,
#portfolio_page .nav-links a.footer-title::after{
	display: none !important;
	content: none !important;
} 

/* Annuler l'ellipsis appliqué globalement (grid.css) pour les liens de navigation
   afin d'éviter l'apparition de "..." lors de l'ouverture des sous-menus. */
#portfolio_page .nav .nav__list a,
#portfolio_page .nav__list-item a,
#portfolio_page .nav-links a {
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: nowrap !important;
} 

/* Sur mobile, autoriser le retour à la ligne pour la lisibilité tactile */
@media (max-width: 990px) {
	#portfolio_page .nav .nav__list a,
	#portfolio_page .nav__list-item a,
	#portfolio_page .nav-links a {
		white-space: normal !important;
	}
}

/* Règles supplémentaires : exclure totalement les éléments .footer-title */
#portfolio_page .footer-title,
#portfolio_page .footer-title *{
	background: transparent !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	text-decoration: none !important;
} 

#portfolio_page .nav .nav__list a.footer-title,
#portfolio_page .nav-links a.footer-title,
#portfolio_page .nav.nav--bg .nav__list a.footer-title,
#portfolio_page .nav-links--bg .nav-links a.footer-title{
	background: transparent !important;
	opacity: 1 !important;
} 

#portfolio_page .nav .nav__list a.footer-title:hover,
#portfolio_page .nav-links a.footer-title:hover{
	background: transparent !important;
	opacity: 1 !important;
} 

#portfolio_page .nav .nav__list a.footer-title::after,
#portfolio_page .nav-links a.footer-title::after,
#portfolio_page .nav.nav--underline .nav__list a.footer-title::after,
#portfolio_page .nav-links--underline .nav-links a.footer-title::after,
#portfolio_page .nav.nav--bg .nav__list a.footer-title::after,
#portfolio_page .nav-links--bg .nav-links a.footer-title::after{
	display: none !important;
	content: none !important;
} 

/* Keep grid items, thumbnail tiles and profile infos links unaffected by global content link rules
   Breadcrumbs are styled independently in design/navigation/breadcrumbs.css */
#portfolio_page .vertical-grid-item a,
#portfolio_page .horizontal-grid-item a,
#portfolio_page .square-grid-item a,
#portfolio_page .thumbnail-tile,
#portfolio_page .thumbnail-tile a,
#portfolio_page .profil-infos a,
#portfolio_page .profil-infos a * {
	/* Do not impose content link decoration/color */
	color: inherit;
	text-decoration: none;
}

/* Boutons thème : ne pas forcer color:inherit ici (spécificité #portfolio_page gagnait sur buttons.css
   et annulait --portfolios-button-text-color / hover). */
#portfolio_page .folio_button,
#portfolio_page .folio-button {
	text-decoration: none;
}

#portfolio_page .folio_button *,
#portfolio_page .folio-button * {
	color: inherit;
	text-decoration: none;
}

/* Pied de page en mode souligné : titres de colonne = trait pleine largeur du texte (pas le padding tactile des liens nav).
   Inclut `.nav__list a.footer-title` : spécificité > règles qui masquent `::after` sur `.nav.nav--underline .nav__list a.footer-title`. */
#portfolio_page footer.nav.nav--underline a.footer-title,
#portfolio_page footer.nav.nav--underline .nav__list a.footer-title {
	display: inline-block !important;
	position: relative;
	padding: 0 !important;
	padding-bottom: 2px !important;
	color: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-color)) !important;
	transition: opacity var(--portfolios-nav-links-transition), color var(--portfolios-nav-links-transition) !important;
	transform: none !important;
	filter: none !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

#portfolio_page footer.nav.nav--underline a.footer-title:hover,
#portfolio_page footer.nav.nav--underline a.footer-title:focus,
#portfolio_page footer.nav.nav--underline a.footer-title:active,
#portfolio_page footer.nav.nav--underline .nav__list a.footer-title:hover,
#portfolio_page footer.nav.nav--underline .nav__list a.footer-title:focus,
#portfolio_page footer.nav.nav--underline .nav__list a.footer-title:active {
	color: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-color)) !important;
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
	background: transparent !important;
	box-shadow: none !important;
}

#portfolio_page footer.nav.nav--underline a.footer-title::after,
#portfolio_page footer.nav.nav--underline .nav__list a.footer-title::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-bg)) !important;
	transform-origin: left center;
	transform: scaleX(1) !important;
	transition: transform var(--portfolios-nav-links-transition) ease, background var(--portfolios-nav-links-transition) ease !important;
	border-radius: var(--portfolios-border-radius-xs);
}

#portfolio_page footer.nav.nav--underline a.footer-title:hover::after,
#portfolio_page footer.nav.nav--underline a.footer-title:focus::after,
#portfolio_page footer.nav.nav--underline a.footer-title:active::after,
#portfolio_page footer.nav.nav--underline .nav__list a.footer-title:hover::after,
#portfolio_page footer.nav.nav--underline .nav__list a.footer-title:focus::after,
#portfolio_page footer.nav.nav--underline .nav__list a.footer-title:active::after {
	background: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-bg)) !important;
	transform: scaleX(1) !important;
}

/* Pied de page en mode fond plein : titres = même vocabulaire visuel que les liens nav (pastille + variables bouton). */
#portfolio_page footer.nav.nav--bg a.footer-title,
#portfolio_page footer.nav.nav--bg .nav__list a.footer-title {
	display: inline-block !important;
	position: relative;
	box-sizing: border-box !important;
	padding: var(--portfolios-nav-links-padding-vert) var(--portfolios-nav-links-padding-horiz) !important;
	border-radius: var(--portfolios-nav-button-border-radius, var(--portfolios-nav-links-radius)) !important;
	background: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-color)) !important;
	color: var(--portfolios-nav-button-hover-text-color, var(--portfolios-nav-button-contrast-color, var(--portfolios-text-main-color))) !important;
	border: var(--portfolios-nav-button-border-width, 0px) var(--portfolios-nav-button-border-style, solid) var(--portfolios-nav-button-border-color, transparent) !important;
	box-shadow: var(--portfolios-nav-button-box-shadow, none) !important;
	transition: background var(--portfolios-nav-links-transition), color var(--portfolios-nav-links-transition), border var(--portfolios-nav-links-transition), box-shadow var(--portfolios-nav-links-transition), filter var(--portfolios-nav-links-transition) !important;
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
	text-decoration: none !important;
}

#portfolio_page footer.nav.nav--bg a.footer-title:hover,
#portfolio_page footer.nav.nav--bg a.footer-title:focus,
#portfolio_page footer.nav.nav--bg a.footer-title:active,
#portfolio_page footer.nav.nav--bg .nav__list a.footer-title:hover,
#portfolio_page footer.nav.nav--bg .nav__list a.footer-title:focus,
#portfolio_page footer.nav.nav--bg .nav__list a.footer-title:active {
	background: var(--portfolios-nav-button-text-color, var(--portfolios-nav-links-color)) !important;
	color: var(--portfolios-nav-button-hover-text-color, var(--portfolios-nav-button-contrast-color, var(--portfolios-text-main-color))) !important;
	border: var(--portfolios-nav-button-border-width, 0px) var(--portfolios-nav-button-border-style, solid) var(--portfolios-nav-button-border-color, var(--portfolios-nav-button-hover-text-color, transparent)) !important;
	box-shadow: var(--portfolios-nav-button-box-shadow, none) !important;
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
}