/*
 * En-tete Metal-X.
 * Mise en page et effets verrouilles ici ; le contenu (logo, menu, libelles) reste editable cote WP.
 * Zero valeur en dur : couleurs / espacements / typos viennent des tokens theme.json (var --wp--preset--*).
 * Tokens de motion centralises dans :root (--mx-transition) pour l'animation ulterieure.
 */

/* --mx-transition est defini une seule fois dans base.css (charte), a partir des tokens de motion. */

/* Corrige la bande blanche par defaut sous l'en-tete et au-dessus du pied (block gap herite). */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-top: 0;
}

/* ---- Metriques de l'en-tete (source unique, consommee par le header fixe et les ancres) ---- */
:root {
	--mx-header-top-h: 56px;            /* hauteur du sur-header (mesuree : padding 16+16 + rangee 24) */
	--mx-header-h: 232px;               /* hauteur totale au repos = sur-header + barre principale */
	--mx-header-main-h-compact: 96px;   /* barre compacte : sous les 100px voulus, bordures comprises */
	--mx-header-logo-compact: 136px;    /* logo compact (ratio 1.43 -> 95px de haut, il cale la barre) */
}

/* La sentinelle est un repere de defilement pose par header.js. Elle fait TOUTE la hauteur de l'en-tete :
   elle ne sort donc de l'ecran qu'au moment ou le haut du hero atteint le haut du navigateur. C'est la
   que la barre bascule en compact, pas avant, sinon une bande vide apparait entre la barre compactee et
   le hero encore en route. Hors flux, invisible. */
.wp-site-blocks > header {
	position: relative;
}

.mx-header__sentinelle {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: var(--mx-header-h);
	pointer-events: none;
}

/* Conteneur global de l'en-tete : les deux bandes s'empilent, pleine largeur, sans ecart. */
.mx-header {
	width: 100%;
	/* Padding lateral fluide, partage sur-header + barre : 104 (>=1320) compresse jusqu'a 32 vers 980
	   (le passage en burger prend le relais en dessous). */
	--mx-header-pad: clamp(32px, calc(32px + 72 * (100vw - 980px) / 340), 104px);
}

.mx-header > * + * {
	margin-block-start: 0;
}

/* ---- Bande utilitaire (sur-header) ---- */
.mx-header__top {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--grey-light);
	padding-block: var(--wp--preset--spacing--30); /* 16 (homogeneise depuis 15) */
	padding-inline: var(--mx-header-pad); /* aligne sur la barre principale */
	column-gap: var(--wp--preset--spacing--40); /* 24 */
}

/* Acces compte : icone decorative en CSS, texte editable. */
.mx-header__account {
	column-gap: var(--wp--preset--spacing--20); /* 8 */
}

.mx-header__account::before {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: url("../icons/icon-account.svg") center / contain no-repeat;
}

.mx-header__account-link {
	margin: 0;
}

.mx-header__account-link a {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs); /* 12 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-light);
	text-decoration: none;
	transition: color var(--mx-transition);
}

.mx-header__account:hover .mx-header__account-link a,
.mx-header__account-link a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* Selecteur de langue : filet vertical + libelle + chevron. */
.mx-header__lang {
	column-gap: var(--wp--preset--spacing--10); /* 4 */
	padding-inline-start: var(--wp--preset--spacing--40); /* 24, homogeneise depuis 29 */
	border-inline-start: 1px solid var(--wp--preset--color--border-light);
}

.mx-header__lang::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: url("../icons/icon-arrow-down.svg") center / 8px no-repeat; /* 8, homogeneise depuis 9x6 */
	transition: transform var(--mx-transition);
}

.mx-header__lang:hover::after {
	transform: translateY(2px);
}

.mx-header__lang-current {
	margin: 0;
}

.mx-header__lang-current a {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	line-height: 1.2;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* ---- Barre principale ---- */
.mx-header__main {
	background-color: var(--wp--preset--color--white);
	border-block: 1px solid var(--wp--preset--color--border-light);
	min-height: 175px; /* cote Figma */
	flex-wrap: nowrap; /* logo et nav restent sur une ligne : on compresse, on ne passe pas l'un sous l'autre */
	padding-inline: var(--mx-header-pad);
	column-gap: clamp(24px, calc(24px + 16 * (100vw - 980px) / 340), 40px); /* 40 -> 24 */
	row-gap: var(--wp--preset--spacing--40);
}

/* Logo : administre via les reglages du site (bloc Site Logo). Largeur figee pour le rythme. */
/* Largeur du logo forcee en CSS avec une specificite superieure au core
   (.wp-block-site-logo img { width:100% }, qui ignore l'attribut de bloc sur un SVG).
   L'attribut {"width":249} du bloc ne sert qu'a cadrer l'editeur ; le CSS fait foi sur le front. */
.mx-header__logo {
	flex: 0 0 auto;
}

.mx-header .mx-header__logo img {
	width: clamp(190px, calc(190px + 59 * (100vw - 980px) / 340), 249px); /* 249 (cote Figma) -> 190 */
	height: auto;
	display: block;
}

/* Navigation : items editables (bloc Navigation), style verrouille. */
.mx-header__nav.wp-block-navigation,
.mx-header__nav .wp-block-navigation__container {
	gap: clamp(20px, calc(20px + 20 * (100vw - 980px) / 340), 40px); /* 40 (homogeneise depuis 44) -> 20 */
}

.mx-header__nav .wp-block-navigation-item__content,
.mx-header__nav .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1;
	letter-spacing: 0.04em; /* 0.64px a 16px */
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.mx-header__nav .wp-block-navigation-item__content {
	transition: color var(--mx-transition);
}

/* Survol / focus des items : bascule vers l'orange de marque. [a confirmer : hover non specifie en maquette] */
.mx-header__nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.mx-header__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--orange-dark);
}

/* Chevron des sous-menus : reprend le meme picto que le sur-header. */
.mx-header__nav .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
.mx-header__nav .wp-block-navigation-submenu__toggle svg {
	fill: currentColor;
}

/* ---- En-tete FIXE + barre compacte au defilement (DESKTOP uniquement) ----
   Choix de mecanique : position:fixed + reserve d'espace, PLUTOT que sticky. En sticky, l'element garde
   sa place dans le flux : reduire la hauteur de la barre en etat compact reduirait aussi cette place et
   tout le contenu remonterait d'un coup (saut de mise en page). En fixed, la reserve est CONSTANTE, donc
   la bascule compact n'a aucun effet sur le flux : zero CLS. */
@media (min-width: 981px) {

	/* Reserve d'espace. Le parent direct du template part fait office de spacer : aucune balise ajoutee,
	   et sa hauteur ne varie JAMAIS (elle vaut toujours l'en-tete au repos). */
	.wp-site-blocks > header {
		min-height: var(--mx-header-h);
	}

	/* L'en-tete est fixe EN PERMANENCE : il occupe toujours le haut du viewport, donc il ne decouvre
	   jamais sa reserve d'espace (c'etait la cause de la bande vide, quand le seuil etait trop bas et
	   qu'une barre de 97px ne remplissait plus une reserve de 232). Consequence voulue : entre le haut
	   de page et le seuil, le hero glisse SOUS l'en-tete au lieu de le pousser. */
	.mx-header {
		position: fixed;
		top: 0;
		inset-inline: 0;
		/* Au-dessus du contenu et des voiles de section. Les modales sont des <dialog> ouvertes en
		   showModal() : elles vivent dans le « top layer », donc toujours au-dessus, sans z-index. */
		z-index: 100;
		transition: transform var(--mx-transition);
	}

	/* Barre d'administration WP (utilisateur connecte) : elle est fixee a top:0, on se cale dessous. */
	body.admin-bar .mx-header {
		top: var(--wp-admin-bar-height, 32px);
	}

	/* Etat compact. Le sur-header sort de l'ecran par le HAUT via une transform seule (aucun impact sur
	   le flux ni sur la hauteur reservee) : la barre principale vient se caler en haut du viewport.
	   La position ne change pas d'un etat a l'autre : les deux etats se rejoignent donc par une simple
	   animation (hauteur de barre, taille du logo, transform), l'en-tete se « transforme » sur place. */
	.mx-header.is-compact {
		transform: translateY( calc( -1 * var(--mx-header-top-h) ) );
	}

	.mx-header__main {
		transition: min-height var(--mx-transition), box-shadow var(--mx-transition);
	}

	.mx-header.is-compact .mx-header__main {
		min-height: var(--mx-header-main-h-compact);
		/* Le logo porte deja son propre blanc : en compact on retire tout le calage vertical,
		   la hauteur de la barre n'est plus donnee que par le logo reduit. */
		padding-block: 0;
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.10 ); /* detache la barre du contenu qui defile dessous */
	}

	/* Masquage au defilement VERS LE BAS : l'en-tete sort entierement par le haut (transform seule, donc
	   toujours zero impact sur le flux). Il revient des que l'on remonte (classe posee par header.js).
	   translateY(-100%) : la valeur suit la hauteur reelle de l'en-tete, rien a tenir a jour. */
	.mx-header.is-compact.is-hidden {
		transform: translateY( -100% );
	}

	.mx-header .mx-header__logo img {
		transition: width var(--mx-transition);
	}

	.mx-header.is-compact .mx-header__logo img {
		width: var(--mx-header-logo-compact);
	}

	/* Clavier : en compact l'en-tete est tronque (sur-header hors ecran) et il peut meme etre entierement
	   masque. Tout focus a l'interieur le redeploie en entier : sinon on focaliserait un element invisible
	   que la page ne peut pas ramener (l'en-tete etant fixe, aucun defilement ne le remonte).
	   Regle placee EN DERNIER : elle doit battre .is-hidden, de meme specificite. */
	.mx-header.is-compact:has( :focus-visible ) {
		transform: none;
	}

	/* Ancres : la cible ne doit pas se retrouver sous la barre fixe. */
	html {
		scroll-padding-top: var(--mx-header-main-h-compact);
	}
}

/* ---- Sous-menu deroulant (DESKTOP uniquement : sous 980px on passe en overlay burger) ----
   Panneau gris ultra-clair uni, sans bordure ni ombre (cote Figma « sous-menu »), items Titillium 18 noir
   sur une seule ligne, aeres. On neutralise le style natif WP (fond blanc + filet + paddings d'items).
   Le comportement (openSubmenusOnClick, clavier, aria) n'est pas touche. */
@media (min-width: 981px) {
	/* Selecteur volontairement specifique : WP core pose fond blanc + filet via
	   « .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container » (0,3,0).
	   .mx-header__nav ETANT l'element .wp-block-navigation, on passe a (0,4,0) pour le battre proprement
	   (pas de !important). */
	.mx-header__nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--grey-ultralight);
		border: 0;
		border-radius: 0;
		min-width: 0; /* bat le min-width natif de WP : la largeur suit le plus long libelle */
		padding: var(--wp--preset--spacing--50) 44px; /* 40 / 44 (cotes Figma) */
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20); /* 8 (cote Figma) */
		/* Panneau DECOLLE de la barre de menu (WP le colle a « top: 100% »). Sans risque de survol :
		   les parents sont des <button> (openSubmenusOnClick), le panneau s'ouvre au clic, pas au survol. */
		top: calc(100% + var(--wp--preset--spacing--25)); /* 12, pas de l'echelle le plus proche de « une dizaine » */
	}

	/* Le texte est rendu dans le SPAN .wp-block-navigation-item__label, qui a sa PROPRE regle plus haut
	   (Urbanist 900 / uppercase, commune a tout le menu) : styler le <a> parent ne suffit pas, le span ne
	   l'herite pas. On cible donc les deux. */
	.mx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.mx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		padding: 0; /* le rythme vient du gap, pas des paddings natifs */
		font-family: var(--wp--preset--font-family--titillium);
		font-weight: 400;
		font-size: var(--wp--preset--font-size--lead); /* 18 */
		line-height: 1.2;
		/* Annule l'heritage du menu principal (uppercase + interlettrage) : le sous-menu est en casse
		   normale (cote Figma « sous-menu »). Scope sous-menu uniquement, le menu principal ne bouge pas. */
		text-transform: none;
		letter-spacing: normal;
		text-align: left; /* entrees du sous-menu ferrees a gauche (n'etaient pas alignees) */
		color: var(--wp--preset--color--black);
		white-space: nowrap;
	}

	/* Survol / focus clavier : meme bascule orange que le menu principal. */
	.mx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
	.mx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--orange-dark);
	}
}

/* ---- Etat « page courante » ----
   Marquage pose par WordPress (current-menu-item / current-menu-ancestor, plus aria-current="page" sur le
   lien) et complete par inc/menu-etat-actif.php pour les pages descendantes absentes du menu.
   L'etat actif est DISTINCT du survol : le survol ajoute un filet qui grandit sous l'entree (anim.css),
   l'etat actif est une bascule de COULEUR permanente, sans filet. Survoler l'entree courante ajoute donc
   le filet par-dessus l'orange, les deux etats restent lisibles separement.
   Le libelle est dans un span .wp-block-navigation-item__label qui porte sa propre couleur : on cible le
   lien ET le span (le span n'herite pas de la couleur du lien, cf. correctif du sous-menu ci-dessus).
   Section placee APRES le bloc sous-menu : a specificite egale, c'est la derniere regle qui gagne. */
.mx-header__nav .current-menu-item > .wp-block-navigation-item__content,
.mx-header__nav .current-menu-ancestor > .wp-block-navigation-item__content,
.mx-header__nav .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.mx-header__nav .current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	color: var(--wp--preset--color--orange-dark);
}

/* ---- Responsive : bascule en menu overlay (burger) sous 980px ----
   La nav compressee ne tient plus au-dela ; on passe en burger (au lieu du 600px natif de WP). */
@media (max-width: 980px) {
	.mx-header {
		--mx-header-pad: var(--wp--preset--spacing--40); /* 24 */
	}

	.mx-header__main {
		justify-content: space-between;
		min-height: 120px;
	}

	.mx-header .mx-header__logo img {
		width: 160px;
	}

	/* Affiche le bouton burger et masque le menu inline (rendu en overlay seulement une fois ouvert). */
	.mx-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.mx-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	/* Burger a 3 lignes (convention), cible tactile 44px. Le bouton natif WP rend un SVG a 2 lignes :
	   on le masque et on peint icon-menu.svg (3 lignes) en masque teinte, ce qui laisse choisir la couleur
	   (grey-dark sur la barre blanche) quel que soit le fill du fichier. */
	.mx-header__nav .wp-block-navigation__responsive-container-open {
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.mx-header__nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.mx-header__nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		width: 28px;
		height: 28px;
		background-color: var(--wp--preset--color--grey-dark);
		-webkit-mask: url("../icons/icon-menu.svg") center / contain no-repeat;
		mask: url("../icons/icon-menu.svg") center / contain no-repeat;
	}
}

/* ---- Overlay burger retravaille (mobile/tablette) : liste aeree, ferree a gauche, filets separateurs,
   croix 44px. Le style natif WP centrait les items sans separation. ---- */
@media (max-width: 980px) {

	/* Croix de fermeture : cible 44px, coin haut-droit confortable au pouce. */
	.mx-header__nav .wp-block-navigation__responsive-container-close {
		top: var(--wp--preset--spacing--40); /* 24 */
		right: var(--wp--preset--spacing--40); /* 24 */
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.mx-header__nav .wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
	}

	/* Zone de contenu : on reserve le haut pour la croix (marge augmentee pour eloigner la 1re entree et
	   son chevron de la croix -> pas de miss-clic entre les deux), padding lateral homogene.
	   Selecteur qualifie .wp-block-navigation (0,4,0) pour battre le padding-top natif de WP core
	   (calc(24px + 2rem) = 56px, qui laissait la 1re entree trop haut, contre la croix). */
	.mx-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding: 96px var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); /* 96 (etait 72) / 24 / 40 */
	}

	/* Liste : colonne pleine largeur, ferree a gauche (au lieu du centrage natif « items-justified-center »).
	   width:100% force la pleine largeur meme si WP centre la liste en flex-item (align-items du parent). */
	.mx-header__nav .is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
		gap: 0;
	}

	/* Entrees de premier niveau : pleine largeur + filet separateur en bas. */
	.mx-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		border-block-end: 1px solid var(--wp--preset--color--grey-light);
	}

	/* Libelles ferres a gauche, cible tactile 44px, rythme aere. */
	.mx-header__nav .is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px;
		padding-block: var(--wp--preset--spacing--30); /* 16 */
		text-align: left;
	}

	.mx-header__nav .is-menu-open .wp-block-navigation-item__label {
		text-align: left;
	}
}

/* ---- Rubriques parentes en accordeon (mobile/tablette). Le bouton natif (openSubmenusOnClick) bascule
   deja aria-expanded au tap (WP core) ; on ne fait que refleter cet etat : sous-menu replie par defaut,
   deplie quand aria-expanded=true. Un chevron indique l'etat. ---- */
@media (max-width: 980px) {

	/* Replie par defaut, deplie a l'ouverture. Le bouton et le sous-menu sont freres dans le <li>
	   (un span d'icone les separe), d'ou le combinateur de freres generaux. */
	.mx-header__nav .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
		display: none;
	}

	.mx-header__nav .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: block;
	}

	/* Sous-pages : indentees sous leur rubrique, mais un peu moins qu'avant (24 -> 12, ~10px plus a gauche
	   comme demande), avec un peu d'air en bas pour detacher la derniere sous-entree du filet separateur.
	   Selecteur qualifie .wp-block-navigation (0,4,0) pour battre le padding-left natif de WP core (2rem). */
	.mx-header__nav.wp-block-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container {
		/* padding-LEFT (physique) : WP core pose « padding-left: 2rem » (32) via un selecteur a 5 classes
		   (…-content .has-child .submenu-container), soit (0,5,0). On l'egale en ajoutant .has-child (0,5,0)
		   et notre feuille charge apres core -> on gagne le tie. Physique et non logique (une propriete
		   logique ne bat pas de facon fiable un padding-left physique). Projet LTR. 24 = ~10px plus a gauche. */
		padding-left: var(--wp--preset--spacing--40); /* 24 (etait 32 natif) */
		padding-block-end: var(--wp--preset--spacing--30); /* 16 : plus d'air sous la derniere sous-entree */
	}

	/* Sous-entrees : en REGULAR (les rubriques parentes restent en gras) et rangees resserrees (moins
	   d'espace entre rubrique et sous-rubrique, et entre sous-rubriques). NB : Urbanist n'est charge qu'en
	   700/900, donc font-weight:400 y retomberait sur 700 : on passe en Titillium Web (qui a un vrai 400),
	   comme le sous-menu desktop, pour un rendu reellement regular. */
	.mx-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		min-height: 40px;
		padding-block: var(--wp--preset--spacing--20); /* 8 (etait 16) : rangees plus rapprochees */
	}

	.mx-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.mx-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		font-family: var(--wp--preset--font-family--titillium);
		font-weight: 400;
	}

	/* Indicateur : on masque le chevron natif (position peu fiable) et on pose le notre a droite du
	   libelle parent (masque teinte, couleur maitrisee), qui pivote a l'ouverture. */
	.mx-header__nav .is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}

	/* Chevron positionne en absolu a droite de la rangee (deterministe, pas de distribution flex). */
	.mx-header__nav .is-menu-open .wp-block-navigation-submenu__toggle {
		position: relative;
		padding-inline-end: 28px;
	}

	.mx-header__nav .is-menu-open .wp-block-navigation-submenu__toggle::after {
		content: "";
		position: absolute;
		left: auto; /* neutralise la position statique heritee (sinon la gauche l'emporte) */
		right: 4px;
		top: 50%;
		width: 16px;
		height: 16px;
		background-color: var(--wp--preset--color--grey-dark);
		-webkit-mask: url("../icons/icon-arrow-down.svg") center / contain no-repeat;
		mask: url("../icons/icon-arrow-down.svg") center / contain no-repeat;
		transform: translateY(-50%);
		transition: transform var(--mx-transition);
	}

	.mx-header__nav .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
		transform: translateY(-50%) rotate(180deg);
	}
}

/* Accessibilite : focus visible homogene sur les cibles cliquables de l'en-tete. */
.mx-header a:focus-visible,
.mx-header .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 3px;
}

/* Respect de prefers-reduced-motion : on neutralise les transitions preparees. L'en-tete lui-meme est
   inclus (transform du passage en compact) : la bascule devient INSTANTANEE, mais l'etat compact reste
   bien applique (on supprime l'animation, pas la fonctionnalite). */
@media (prefers-reduced-motion: reduce) {
	.mx-header,
	.mx-header * {
		transition: none !important;
	}
}