/*
 * Bloc de telechargement du shortcode.
 *
 * Volontairement neutre : le theme du site (ekommart) habille deja les
 * champs de formulaire. On ne pose ici que la mise en page.
 */

.bce-export {
	margin: 0 0 1.5em;
	max-width: 40em;
}

.bce-export__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.bce-export__description {
	margin: 0 0 0.6em;
	font-size: 0.92em;
	opacity: 0.85;
}

.bce-export__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
}

.bce-export__select {
	flex: 1 1 14em;
	min-width: 0;
	max-width: 100%;
}

.bce-export__button {
	flex: 0 0 auto;
}

.bce-export--stacked .bce-export__form {
	flex-direction: column;
	align-items: stretch;
}

.bce-export--stacked .bce-export__select,
.bce-export--stacked .bce-export__button {
	width: 100%;
}

/*
 * Disposition « menu » : inseree dans un <li> de navigation, elle doit se
 * fondre dans le menu et non ressembler a un formulaire pose dedans. On herite
 * donc typographie et couleur du theme, et on neutralise les marges.
 */
.bce-export--menu {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	max-width: none;
	font: inherit;
	color: inherit;
	line-height: inherit;
}

.bce-export--menu .bce-export__label {
	display: inline;
	margin: 0;
	font-weight: inherit;
	white-space: nowrap;
}

.bce-export--menu .bce-export__form {
	display: inline-flex;
	gap: 0;
	margin: 0;
}

.bce-export--menu .bce-export__select {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	max-width: 14em;
	margin: 0;
	padding: 0.1em 1.4em 0.1em 0.4em;
	font: inherit;
	color: inherit;
	line-height: inherit;
	background-color: transparent;
	border: 1px solid currentColor;
	border-radius: 3px;
	cursor: pointer;
}

.bce-export--menu .bce-export__notice {
	padding: 0;
	border: 0;
	font: inherit;
}

.bce-export--align-center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.bce-export--align-center .bce-export__form {
	justify-content: center;
}

.bce-export--align-right {
	margin-left: auto;
	text-align: right;
}

.bce-export--align-right .bce-export__form {
	justify-content: flex-end;
}

.bce-export__updated {
	margin: 0.5em 0 0;
	font-size: 0.85em;
	opacity: 0.7;
}

.bce-export__notice {
	margin: 0;
	padding: 0.8em 1em;
	border-left: 3px solid currentColor;
	opacity: 0.85;
}

@media (max-width: 480px) {
	.bce-export__form {
		flex-direction: column;
		align-items: stretch;
	}

	.bce-export__select,
	.bce-export__button {
		width: 100%;
	}
}

/*
 * Entree de menu signalant une indisponibilite. Visible uniquement par un
 * administrateur : le visiteur, lui, ne voit rien du tout.
 */
.bce-menu-unavailable > a {
	opacity: .65;
	text-decoration: line-through;
	cursor: help;
}

/*
 * Le sous-menu des formats occupe au moins toute la largeur de l'entree
 * parente, plutot que de se dimensionner sur son propre contenu.
 *
 * La declaration est marquee volontairement : Elementor pilote ses sous-menus
 * avec SmartMenus, qui pose « min-width » et « max-width » EN LIGNE sur le
 * ul au moment de l'ouverture. Une regle de feuille de style, meme tres
 * specifique, perdrait contre un style en ligne.
 */
.bce-menu-parent > ul {
	min-width: 100% !important;
}

/*
 * Triangle de sous-menu masque sur notre entree.
 *
 * Elementor ajoute « <span class="sub-arrow"> » au titre de toute entree
 * portant « menu-item-has-children » (nav-menu.php, filtre
 * « nav_menu_item_title »). Or cette classe, nous la posons nous-memes : sans
 * elle, le menu mobile d'Elementor rangeait l'entree parmi ses elements
 * finaux et refermait le panneau au lieu de derouler les formats. Le triangle
 * est donc l'effet de bord d'un correctif, pas une intention de mise en page.
 */
.bce-menu-parent > a .sub-arrow {
	display: none;
}