/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 14-10-2026-hover-color */
/* Fusion des styles boutons : structure/button.css + design/themes/basic/buttons.css */

/* Boutons dynamiques du portfolio */
.folio_button, .folio-button {
	/* Couleur du texte : une seule déclaration (protégée), l'état la change par --_pf-button-color.
	   Les couleurs de survol / clic ne pouvaient pas l'emporter sur un !important. */
	color: var(--_pf-button-color, var(--portfolios-button-text-color, #fff));
	background-color: var(--portfolios-button-background-color, #222);
	background-image: var(--portfolios-button-gradient, none);
	border: var(--portfolios-button-border-width, 0px) var(--portfolios-button-border-type, solid) var(--portfolios-button-border-color, #222);
	border-radius: var(--portfolios-button-radius, 0px);
	padding: var(--portfolios-button-padding-y, 10px) var(--portfolios-button-padding-x, 24px);
	transition: box-shadow 0.2s, border 0.2s, background 0.2s, color 0.2s, filter 0.18s, transform 0.18s;
	box-shadow: var(--portfolios-button-box-shadow, none);
	font-family: var(--portfolios-button-font-family, inherit);
	font-size: var(--portfolios-button-font-size, 1rem);
	font-weight: var(--portfolios-button-font-weight, 500);
	letter-spacing: var(--portfolios-button-letter-spacing, normal);
	text-transform: none;
	cursor: var(--portfolios-button-cursor, pointer);
	opacity: var(--portfolios-button-opacity, 1);
	display: inline-block;
	align-items: center;
	gap: var(--portfolios-button-gap, 0.5em);
	outline: var(--portfolios-button-outline-width, 0px) var(--portfolios-button-outline-style, solid) var(--portfolios-button-outline-color, transparent);
	filter: brightness(100%);
	justify-content: center;
	max-width: max-content;
}

.folio_button svg, .folio-button svg {
    width: 15px;
}

.folio_button.gradient, .folio-button.gradient {
	background-color: var(--portfolios-button-background-color, #222);
	background-image: var(--portfolios-button-gradient, none);
}
.folio_button.shadow, .folio-button.shadow {
	border: none;
	box-shadow: 0px 2px 10px 0px var(--portfolios-button-border-color, #222);
}
.folio_button.glow, .folio-button.glow {
	box-shadow: var(--portfolios-button-glow, 0 0 8px 2px var(--portfolios-button-border-color, #ff0));
}
.folio_button:hover, .folio-button:hover,
.folio_button:focus-visible, .folio-button:focus-visible {
	--_pf-button-color: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
	background: var(--portfolios-button-hover-background);
	box-shadow: var(--portfolios-button-hover-box-shadow, var(--portfolios-button-box-shadow));
	transform: var(--portfolios-button-hover-transform, none);
	filter: var(--portfolios-button-hover-filter, brightness(100%));
}
.folio_button:active, .folio-button:active {
	--_pf-button-color: var(--portfolios-button-click-text-color, var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff)));
	background: var(--portfolios-button-click-background, var(--portfolios-button-hover-background));
	box-shadow: var(--portfolios-button-click-effect, none);
	transform: var(--portfolios-button-click-transform, scale(0.95));
	filter: var(--portfolios-button-hover-filter, brightness(100%));
}
.folio_button:disabled, .folio-button:disabled {
	opacity: var(--portfolios-button-disabled-opacity, 0.5);
	cursor: not-allowed;
}

/* Effets avancés réutilisables */
.button-gradient {
    background: linear-gradient(90deg, #ff6600, #ffcc00);
}
.button-hover-translate:hover {
    transform: translateY(-4px);
    transition: transform 0.2s;
}
.button-hover-scale:hover {
    transform: scale(1.08);
    transition: transform 0.2s;
}
.button-hover-rotate:hover {
    transform: rotate(-3deg);
    transition: transform 0.2s;
}
.button-hover-invert:hover {
    filter: invert(1);
    transition: filter 0.2s;
}
.button-click-down:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}

/* Accueil (#hero) : le bloc texte peut imposer couleur / fond ; on réapplique le thème bouton. */
#portfolio_page #hero #title-home a.folio_button,
#portfolio_page #hero #title-home a.folio-button {
	background-color: var(--portfolios-button-background-color, #222);
	background-image: var(--portfolios-button-gradient, none);
	color: var(--portfolios-button-text-color, #fff);
	border-color: var(--portfolios-button-border-color, #222);
}
#portfolio_page #hero #title-home a.folio_button:hover,
#portfolio_page #hero #title-home a.folio-button:hover {
	color: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
	background: var(--portfolios-button-hover-background, var(--portfolios-button-background-color, #333));
}

/* Thème des boutons (button_theme : Plein, Contour, Fond au survol, Souligné, Texte seul).
   Les --portfolios-button-th-* sont calculées dans la portée des variables (render_css_vars.php)
   à partir des réglages précis : on les redistribue ici sur les variables lues par les règles
   ci-dessus. Repli sur les alias --folio-button-* (valeurs héritées, sans cycle). */
.folio_button, .folio-button {
	--portfolios-button-background-color: var(--portfolios-button-th-bg, var(--folio-button-background-color, #222));
	--portfolios-button-gradient: var(--portfolios-button-th-image, var(--folio-button-gradient, none));
	--portfolios-button-text-color: var(--portfolios-button-th-color, var(--folio-button-text-color, #fff));
	--portfolios-button-border-width: var(--portfolios-button-th-border-width, var(--folio-button-border-width, 0px));
	--portfolios-button-border-type: var(--portfolios-button-th-border-style, var(--folio-button-border-type, solid));
	--portfolios-button-padding-x: var(--portfolios-button-th-padding-x, var(--folio-button-padding-x, 24px));
	--portfolios-button-hover-background: var(--portfolios-button-th-hover-bg, var(--folio-button-hover-background));
	--portfolios-button-hover-text-color: var(--portfolios-button-th-hover-color, var(--folio-button-hover-text-color));
	--portfolios-button-click-background: var(--portfolios-button-th-click-bg, var(--folio-button-click-background));
	--portfolios-button-click-text-color: var(--portfolios-button-th-click-color, var(--folio-button-click-text-color));
	text-decoration-line: var(--portfolios-button-th-deco, none);
	text-decoration-thickness: var(--portfolios-button-th-underline-width, 2px);
	text-underline-offset: 0.3em;
}

/* --- Lien Contact du header en bouton (réglage « Lien Contact », lot E3) ---------------------------------
   header.php pose .folio_button sur le lien Contact du menu. Les règles des liens du menu (links.css,
   links-menus.css : marge, arrondi, fond, contour, ombre, trait souligné, souvent en !important) ne doivent pas
   l'habiller : on remet celui des boutons. Contour, ombre et reflet propres à un thème : --pf-button-th-border /
   --pf-button-th-shadow / --pf-button-th-image (Brutal, Verre), sinon ceux des réglages des boutons. */
#portfolio_page #header #header-nav .nav__list a.nav__contact.folio_button {
	color: var(--_pf-button-color, var(--portfolios-button-text-color, #fff));
	padding: var(--portfolios-button-padding-y, 10px) var(--portfolios-button-padding-x, 24px);
	border: var(--pf-button-th-border, var(--portfolios-button-border-width, 0px) var(--portfolios-button-border-type, solid) var(--portfolios-button-border-color, #222));
	border-radius: var(--portfolios-button-radius, 0px);
	background-color: var(--portfolios-button-background-color, #222);
	background-image: var(--pf-button-th-image, var(--portfolios-button-gradient, none));
	box-shadow: var(--pf-button-th-shadow, var(--portfolios-button-box-shadow, none));
	font-size: var(--portfolios-button-font-size, 1rem);
	font-weight: var(--portfolios-button-font-weight, 500);
	text-decoration: none;
}

#portfolio_page #header #header-nav .nav__list a.nav__contact.folio_button:is(:hover, :focus-visible) {
	background-color: var(--portfolios-button-hover-background, var(--portfolios-button-background-color, #222));
	box-shadow: var(--pf-button-th-shadow, var(--portfolios-button-hover-box-shadow, var(--portfolios-button-box-shadow, none)));
}

#portfolio_page #header #header-nav .nav__list a.nav__contact.folio_button::after {
	content: none;
}
}