/**
 * Widgets du moteur Elementor 4 portés depuis les widgets classiques.
 * Les arcs, la photo et la grappe gardent hero-portrait.css ; ne figure ici que ce qui change.
 */

/*
 * Portrait : la taille vient de la largeur du widget (style « width », responsive dans le
 * moteur 4), plus d'une variable par palier. Le widget est conteneur de requête : le
 * diamètre de la photo vaut sa largeur ramenée à la réserve des flèches, qui n'est pas
 * symétrique (1,4341 à gauche, 1,692 à droite pour le motif de la maquette).
 */
.ep-portrait {
	display: block;
	width: 413px;
	max-width: 100%;
	container-type: inline-size;
}

.ep-portrait > .ep-hero {
	--ep-hero-size: calc(100cqw * 2 / (var(--ep-reach-left) + var(--ep-reach-right)));

	padding:
		calc(var(--ep-hero-size) / 2 * (var(--ep-reach-top) - 1))
		calc(var(--ep-hero-size) / 2 * (var(--ep-reach-right) - 1))
		calc(var(--ep-hero-size) / 2 * (var(--ep-reach-bottom) - 1))
		calc(var(--ep-hero-size) / 2 * (var(--ep-reach-left) - 1));
}

/*
 * Grappe : même principe, le cadre (format 0,9964) suit la largeur du widget et les
 * portraits y sont placés en pourcentage.
 */
.ep-grappe {
	display: block;
	width: 597.6px;
	max-width: 100%;
}

/*
 * Notation : cinq étoiles, la couche pleine est rognée à la proportion de la note.
 */
.ep-notation {
	--ep-etoile: var(--Avis-Etoile-jaune, #fdca69);
	--ep-etoile-vide: var(--Avis-Etoile-vide, rgba(255, 255, 255, .5));

	display: inline-flex;
	gap: var(--ep-etoile-ecart, 5px);
	line-height: 0;
}

.ep-notation__etoile {
	position: relative;
	display: block;
	width: var(--ep-etoile-taille, 17px);
	height: var(--ep-etoile-taille, 17px);
}

.ep-notation__etoile svg {
	display: block;
	width: var(--ep-etoile-taille, 17px);
	height: var(--ep-etoile-taille, 17px);
}

.ep-notation__vide {
	fill: var(--ep-etoile-vide);
}

.ep-notation__plein {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	fill: var(--ep-etoile);
}

/*
 * Menu mobile : portage du menu à quatre Off-Canvas de l'en-tête V26. Cotes relevées sur
 * l'original à 375 px. Les boutons neutralisent le style des <button> du thème parent
 * (bordure et fond #c36 au survol), dont les sélecteurs [type=button]:hover pèsent 0,2,0.
 */
.ep-menu {
	display: block;
}

@media (min-width: 1025px) {
	.ep-menu {
		display: none;
	}
}

.ep-menu .ep-menu__burger,
.ep-menu .ep-menu__fermer,
.ep-menu .ep-menu__lien,
.ep-menu .ep-menu__retour,
.ep-menu .ep-menu__burger:hover,
.ep-menu .ep-menu__fermer:hover,
.ep-menu .ep-menu__lien:hover,
.ep-menu .ep-menu__retour:hover,
.ep-menu .ep-menu__burger:focus,
.ep-menu .ep-menu__fermer:focus,
.ep-menu .ep-menu__lien:focus,
.ep-menu .ep-menu__retour:focus {
	background: none;
	text-decoration: none;
	cursor: pointer;
}

.ep-menu .ep-menu__burger {
	display: block;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: #000;
}

.ep-menu__burger svg,
.ep-menu__fermer svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.ep-menu__voile {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(0, 0, 0, .8);
}

.ep-menu__panneau {
	position: fixed;
	inset: 0;
	z-index: 9999;
	box-sizing: border-box;
	padding: 73px 30px 40px;
	overflow-y: auto;
	background: var(--Primary-Violet, #922859);
	color: #fff;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform .3s ease, visibility 0s linear .3s;
}

.ep-menu__panneau[aria-hidden="false"] {
	visibility: visible;
	transform: none;
	transition: transform .3s ease, visibility 0s;
}

.ep-menu__panneau--sous {
	padding-top: 53px;
}

.ep-menu__bandes {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	height: 8px;
}

.ep-menu__bandes span {
	flex: 1;
}

.ep-menu__bandes span:nth-child(1) { background: #ec5f64; }
.ep-menu__bandes span:nth-child(2) { background: #69b58a; }
.ep-menu__bandes span:nth-child(3) { background: #1776bb; }
.ep-menu__bandes span:nth-child(4) { background: #dc9104; }

.ep-menu .ep-menu__fermer {
	position: absolute;
	top: 18px;
	right: 30px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: #fff;
}

.ep-menu__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ep-menu .ep-menu__lien {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 27px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	border-radius: 0;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	text-align: left;
	white-space: normal;
}

.ep-menu__lien svg,
.ep-menu__retour svg {
	flex: none;
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.ep-menu .ep-menu__retour {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 20px;
	padding: 8px 16px 8px 12px;
	border: 2px solid #fff;
	border-radius: 50px;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
}

.ep-menu-ouvert {
	overflow: hidden;
}