@charset "UTF-8";

/**
 * icons.css 1.2.0
 * Author: hybrid.
 *
 * SVG sprite icons (base, size variants) and CSS animated icons
 * (expand, close/more, play/pause).
 * Animated icons use ::before/::after pseudo-elements with box-shadow
 * to reproduce glyphs without SVG or images.
 *
 * Animated icons
 * .icon-expand  — hamburger → cross (toggle .expanded on parent)
 * .icon-close   — fixed cross
 * .icon-more    — fixed plus
 * .icon-play    — play → pause (toggle .is-playing/.is-paused on parent)
 *
 * Tokens
 * --icon-stroke-width  stroke width for animated icons (default: var(--stroke-width))
 * --icon-play-offset   optical offset of the play triangle (default: 12.5%)
 *
 * Dependencies
 * --stroke-width   defined in structure.css
 * --duration-fast  defined in animations.css
 * --elastic        defined in animations.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


:root {
	--icon-stroke-width: var(--stroke-width, .125rem);
	--icon-play-offset: 12.5%;
	--icon-play-clip-left:  polygon(0% 0%, 50% 25%, 50% 75%, 0% 100%);
	--icon-play-clip-right: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
	--icon-pause-clip-left:  polygon(0% 0%, 33% 0, 33% 100%, 0% 100%);
	--icon-pause-clip-right: polygon(66% 0, 100% 0, 100% 100%, 66% 100%);
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */


[class^="icon-"].animated .label,
[class^="icon-"].animated .label::before,
[class^="icon-"].animated .label::after {
	transition:
	transform var(--duration-fast) var(--elastic),
	right var(--duration-fast) var(--elastic),
	margin var(--duration-fast) var(--elastic),
	clip-path var(--duration-fast) var(--elastic),
	height var(--duration-fast) var(--elastic),
	width var(--duration-fast) var(--elastic);
}



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== MASK-IMAGE BASE ============================== */


/**
 * Base for ::before pseudo-element icons via mask-image.
 * Each icon selector (.icon-search:before, etc.) is auto-generated
 * in icons-vars.css by tool-icons.php.
 * Works with <span class="icon-search"></span> — same as IcoMoon.
 */

[class^="icon-"], [class*=" icon-"] { display: inline-flex; }

[class^="icon-"]::before, [class*=" icon-"]::before {
	content: "";
	display: inline-block;
	height: 1em;
	aspect-ratio: 1/1;
	background: currentColor;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}


/* ============================== SVG INLINE BASE ============================== */


/**
 * Base for inline SVG icons via get_icon() / the_icon().
 * Supports stroke-width animation and currentColor.
 */

svg[class^="icon-"], svg[class*=" icon-"] {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

svg[class^="icon-"].filled, svg[class*=" icon-"].filled {
	fill: currentColor;
	stroke: none;
}



/* ==================================================================================================== */
/* ============================================= ANIMATED ============================================= */
/* ==================================================================================================== */


/**
 * Animated icons: expand, close, more, play/pause.
 * The SVG icon is hidden, replaced by pseudo-elements.
 * box-shadow inset simulates the stroke without SVG.
 */


/* ============================== DEFAULT ============================== */

[class^="icon-"].animated {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 1em;
	width: 1em;
	color: inherit;
	text-shadow: inherit;
	transform-origin: center center;
	background: transparent;
	fill: none;
	stroke: none;
}
[class^="icon-"].animated::before,
[class^="icon-"].animated use {
	display: none;
}

[class^="icon-"].animated .label,
[class^="icon-"].animated .label::before,
[class^="icon-"].animated .label::after {
	position: absolute;
	display: block;
	height: var(--icon-stroke-width);
	font-size: inherit !important;
	line-height: inherit;
	color: inherit;
	text-shadow: inherit;
	box-shadow: inset 0 0 0 calc(var(--icon-stroke-width) * 2);
}

[class^="icon-"].animated .label::before,
[class^="icon-"].animated .label::after {
	content: "";
	transform-origin: center center;
}

/* Disable transitions on page load */

.icon-expand.animated,
body.onload .icon-expand.animated .label,
body.onload .icon-expand.animated .label::before,
body.onload .icon-expand.animated .label::after {
	transition: none;
}


/* ============================== EXPAND ============================== */

/* 3 strokes → cross. Toggle via .expanded on parent. */

/* =============== DEFAULT =============== */

.icon-expand.animated .label,
.icon-expand.animated .label::before,
.icon-expand.animated .label::after {
	left: 0;
	width: 1em;
}

.icon-expand.animated .label {
	margin: auto;
	overflow: visible;
}


/* =============== NOT EXPANDED =============== */

.icon-expand.animated .label::before { transform: translate(0, -.375em); }
.icon-expand.animated .label::after { transform: translate(0, .375em); }


/* =============== EXPANDED =============== */

.expanded .icon-expand.animated .label {
	width: 0;
	transform: translate(.5em, 0);
}

.expanded .icon-expand.animated .label::before { transform: translate3d(-50%, 0, 0) rotate(-45deg); }
.expanded .icon-expand.animated .label::after { transform: translate3d(-50%, 0, 0) rotate(45deg); }

.expanded .icon-expand .label::before,
.expanded .icon-expand .label::after {
	transform: translate(-.125em, 0);
	width: 1.289em;
}


/* ============================== CLOSE / MORE ============================== */

.icon-close.animated .label,
.icon-more.animated .label {
	left: 0;
	height: 1em;
	width: 1em;
	box-shadow: none !important;
}

.icon-close.animated .label::before,
.icon-close.animated .label::after,
.icon-more.animated .label::before,
.icon-more.animated .label::after {
	top: 50%;
	left: 50%;
}

.icon-more.animated .label::before,
.icon-more.animated .label::after { width: 1em; }

.icon-close.animated .label::before,
.icon-close.animated .label::after { width: 1.289em; }

.icon-close.animated .label::before { transform: translate(-50%, -50%) rotate(-45deg); }
.icon-close.animated .label::after { transform: translate(-50%, -50%) rotate(45deg); }
.icon-more.animated .label::before { transform: translate(-50%, -50%) rotate(0deg); }
.icon-more.animated .label::after { transform: translate(-50%, -50%) rotate(90deg); }


/* ============================== PLAY / PAUSE ============================== */

/**
 * Via clip-path.
 * Toggle via .is-playing / .is-paused on parent.
 * --icon-play-offset      : décalage optique horizontal du triangle play (default: 7.5%)
 *   Surcharger par contexte : .my-btn { --icon-play-offset: 5%; }
 * --icon-play-clip-left/right, --icon-pause-clip-left/right : consommables dans d'autres fichiers CSS.
 */

.icon-play.animated .label {
	height: 1em;
	width: 1em;
	box-shadow: none;
	margin-left: var(--icon-play-offset);
}

a.is-paused .icon-play.animated .label,
a.is-playing:hover .icon-play.animated .label { margin-left: 0; }

.icon-play.animated .label::before,
.icon-play.animated .label::after {
	height: 1em;
	width: 1em;
	box-shadow: inset 0 0 0 1em;
}

.icon-play.animated .label::before { clip-path: var(--icon-play-clip-left); }
.icon-play.animated .label::after { clip-path: var(--icon-play-clip-right); }


/* ============================== HOVER ============================== */

@media (hover: hover) {

	/* expand */

	a:not(.expanded):hover .icon-expand.animated .label::before { transform: translate(0, -.25em); }
	a:not(.expanded):hover .icon-expand.animated .label::after { transform: translate(0, .25em); }

	a.expanded:hover .icon-expand .label::before,
	a.expanded:hover .icon-expand .label::after { width: 1em; }

	/* more, close */

	a:hover .icon-more.animated .label::before,
	a:hover .icon-more.animated .label::after { width: .75em; }

	a:hover .icon-close.animated .label::before,
	a:hover .icon-close.animated .label::after { width: 1em; }

	/* pause */

	a.is-paused .icon-play.animated .label::before,
	a.is-playing:hover .icon-play.animated .label::before { clip-path: var(--icon-pause-clip-left); }

	a.is-paused .icon-play.animated .label::after,
	a.is-playing:hover .icon-play.animated .label::after { clip-path: var(--icon-pause-clip-right); }
	
	/* play */

	a.is-paused:hover .icon-play.animated .label::before,
	a.is-playing .icon-play.animated .label::before { clip-path: var(--icon-play-clip-left); }

	a.is-paused:hover .icon-play.animated .label::after,
	a.is-playing .icon-play.animated .label::after { clip-path: var(--icon-play-clip-right); }
}

@media (hover: none) {

	/* expand */

	a.hover:not(.expanded) .icon-expand.animated .label::before { transform: translate(0, -.25em); }
	a.hover:not(.expanded) .icon-expand.animated .label::after { transform: translate(0, .25em); }

	a.expanded.hover .icon-expand .label::before,
	a.expanded.hover .icon-expand .label::after { width: 1em; }

	/* more, close */

	a.hover .icon-more.animated .label::before,
	a.hover .icon-more.animated .label::after { width: .75em; }

	a.hover .icon-close.animated .label::before,
	a.hover .icon-close.animated .label::after { width: 1em; }

	/* pause */

	a.is-paused .icon-play.animated .label::before,
	a.is-playing.hover .icon-play.animated .label::before { clip-path: var(--icon-pause-clip-left); }

	a.is-paused .icon-play.animated .label::after,
	a.is-playing.hover .icon-play.animated .label::after { clip-path: var(--icon-pause-clip-right); }

	/* play */

	a.is-paused.hover .icon-play.animated .label::before,
	a.is-playing .icon-play.animated .label::before { clip-path: var(--icon-play-clip-left); }

	a.is-paused.hover .icon-play.animated .label::after,
	a.is-playing .icon-play.animated .label::after { clip-path: var(--icon-play-clip-right); }
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific overrides */