/* ==========================================================================
   MERYDAR — LE BOUTON DU TÉLÉPHONE
   --------------------------------------------------------------------------
   1.1.0 : il n'y a plus de panneau maison. Le volet est celui de Max Mega
   Menu, habillé par la charte du site. Cette feuille ne dessine donc plus que
   la boîte flottante et ses trois barres, plus le logement du champ de
   recherche à l'intérieur du volet.

   Couleurs et écarts viennent des réglages, par des propriétés posées sur
   :root — changer le rose ne demande pas de réinstaller l'extension.
   ========================================================================== */

.mrd-btel {
	position: fixed;
	top: var(--mrd-btel-haut, 8px);
	left: var(--mrd-btel-cote, 12px);
	z-index: 9990;
	line-height: 0;
}
.admin-bar .mrd-btel { top: calc(46px + var(--mrd-btel-haut, 8px)); }

.mrd-btel .mrd-btel-bouton,
.mrd-btel .mrd-btel-bouton:hover,
.mrd-btel .mrd-btel-bouton:focus,
.mrd-btel .mrd-btel-bouton:active {
	/* `!important` partout : le thème et Elementor habillent tous les `button`
	   du site, et leurs règles l'emportaient — le bouton restait blanc bordé de
	   rose alors que les bonnes couleurs étaient bien posées. Mesuré le 17/09
	   dans un cadre de 390 px. */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 38px !important;
	height: 38px !important;
	background: var(--mrd-btel-fond, #FFFDFB) !important;
	background-image: none !important;
	border: 1px solid var(--mrd-btel-bordure, var(--mrd-btel-trait, #CC3366)) !important;
	border-radius: var(--mrd-btel-rayon, 4px) !important;
	box-shadow: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent !important;
}
.mrd-btel .mrd-btel-bouton:focus-visible {
	outline: 2px solid var(--mrd-btel-trait, #CC3366);
	outline-offset: 2px;
}

/* les trois barres, dessinées : pas d'image, pas de police d'icônes */
.mrd-btel .mrd-btel-barres,
.mrd-btel .mrd-btel-barres::before,
.mrd-btel .mrd-btel-barres::after {
	display: block !important;
	width: 18px !important;
	height: 2px !important;
	border-radius: 1px !important;
	background: var(--mrd-btel-trait, #CC3366) !important;
}
.mrd-btel .mrd-btel-barres { position: relative; }
.mrd-btel .mrd-btel-barres::before,
.mrd-btel .mrd-btel-barres::after { content: ""; position: absolute; left: 0; }
.mrd-btel .mrd-btel-barres::before { top: -6px; }
.mrd-btel .mrd-btel-barres::after  { top: 6px; }

/* --- ce qu'on loge DANS le volet de Mega Menu --- */

ul.mega-menu > li.mrd-btel-volet-recherche {
	display: block;
	padding: 10px 14px;
}
ul.mega-menu > li.mrd-btel-volet-recherche .elementor-widget {
	width: 100%;
	max-width: 100%;
	margin: 0;
}
ul.mega-menu > li.mrd-btel-volet-recherche .elementor-widget-container { width: 100%; }

ul.mega-menu > li.mrd-btel-volet-outil > a.mega-menu-link {
	display: flex;
	align-items: center;
}
/* La pastille : ses couleurs sont RECOPIÉES de celle de l'en-tête au
   chargement (voir habillerPastille dans bouton.js) — celles d'ici ne servent
   que de secours. Le rose tranchait dans le volet. */
ul.mega-menu .mrd-btel-compteur {
	align-self: center;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: 4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--mrd-btel-trait, #CC3366);
	color: #fff;
	font-size: .78rem;
	line-height: 1;
}

/* L'icône reprise de l'en-tête, posée devant le mot */
ul.mega-menu .mrd-btel-volet-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.25em;
	margin-right: .55em;
	font-size: 1em;
	line-height: 1;
}
ul.mega-menu .mrd-btel-volet-icone svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Un bloc d'en-tête qui n'affiche rien ne creuse pas de vide sous la barre */
.elementor-location-header .mrd-btel-bloc-vide {
	height: 0 !important;
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	overflow: hidden !important;
}

/* la colonne que la recherche a quittée ne laisse pas de vide dans la rangée */
/* Une colonne d'en-tête qui n'affiche plus rien — celle que la recherche a
   quittée, celle de la cloche dont le contenu est en position fixe — est mise
   à plat : largeur nulle, mais TOUJOURS DANS LE FLUX. Ni `display:none` (qui
   faisait passer la barre sur deux lignes), ni `position:absolute` (qui
   risquerait d'emporter la cloche avec elle). */
/* Classe répétée : Elementor vise chaque conteneur par son identifiant propre
   (`.elementor-16710 .elementor-element-864d0e0`), soit trois classes. Une règle
   à deux classes, même en `!important`, perd contre lui — mesuré le 17/09 : la
   largeur passait, le `flex` non. On monte donc la spécificité. */
.elementor-location-header .elementor-column.mrd-btel-colonne-videe.mrd-btel-colonne-videe.mrd-btel-colonne-videe,
.elementor-location-header .e-con.mrd-btel-colonne-videe.mrd-btel-colonne-videe.mrd-btel-colonne-videe {
	flex: 0 0 0 !important;
	width: 0 !important;
	--width: 0 !important;
	max-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
}

/* LA RANGÉE DE BOUTONS TIENT SUR UNE LIGNE.
   Cause mesurée, pas devinée : la colonne du menu est réglée à 100 % de
   largeur dans Elementor, et une colonne à 100 % ne peut pas partager sa
   ligne. Au téléphone, la rangée qui porte la barre de bascule devient donc
   une ligne unique, chaque colonne encore pleine prenant une part égale. La
   rangée est désignée par une classe posée en JavaScript sur celle qui
   CONTIENT la barre, jamais par un identifiant Elementor écrit en dur. */
.elementor-location-header .mrd-btel-rangee.mrd-btel-rangee.mrd-btel-rangee {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;   /* CENTER, pas stretch — voir ci-dessous */
	justify-content: center !important;
}

/* `:not(.mrd-btel-colonne-videe)` n'est PAS décoratif : sans lui, cette règle —
   de même spécificité et écrite plus bas — l'emporte sur celle qui met à plat
   les colonnes vides, et celles-ci mangent le tiers gauche de la rangée. */
/* `.elementor-element` et pas `.e-con` : chez Merydar, le conteneur du menu
   porte `e-con-full` SANS `e-con`, il échappait donc à la règle et gardait sa
   largeur propre — 80 px quand ses voisines en faisaient 120. Mesuré le 17/09
   dans le cadre de 390 px. */
/* CORRIGÉ le 17/09 au soir, sur sa demande : « réaligne mes boutons et remets
   les proportions que j'avais avant ».

   Ces colonnes portaient `flex: 1 1 0%` : trois tiers rigoureusement égaux.
   C'était MOI qui imposais ces proportions, pas elle. Ses trois tuiles n'ont
   jamais eu la même largeur, et c'est voulu — « Ma cueillette » est la plus
   large parce qu'elle porte le mot le plus long et le compteur.

   Ce qu'elle demande n'est pas l'égalité des largeurs mais l'ALIGNEMENT :
   une seule ligne, un même axe, une même hauteur. Relevé avant correction,
   dans un cadre de 390 px : COMPTE à y = 100, panier à y = 110 — dix pixels
   de décalage, dus aux marges propres de chaque colonne.

   Donc : les largeurs redeviennent celles qu'elle a réglées dans Elementor,
   les marges verticales sont remises à zéro, et la rangée centre tout le monde
   sur un axe commun. La hauteur, elle, reste égalisée sur la plus haute des
   tuiles — mesurée dans la page, jamais écrite en dur. */
.elementor-location-header .mrd-btel-rangee.mrd-btel-rangee.mrd-btel-rangee > .elementor-element:not(.mrd-btel-colonne-videe),
.elementor-location-header .mrd-btel-rangee.mrd-btel-rangee.mrd-btel-rangee > .elementor-column:not(.mrd-btel-colonne-videe) {
	flex: 0 0 auto !important;
	min-width: 0 !important;
	align-self: center !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.elementor-location-header .mrd-btel-rangee.mrd-btel-rangee.mrd-btel-rangee > .elementor-element:not(.mrd-btel-colonne-videe) > .elementor-widget-wrap,
.elementor-location-header .mrd-btel-rangee.mrd-btel-rangee.mrd-btel-rangee .elementor-widget:not(.mrd-btel-colonne-videe) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	align-self: center !important;
}

/* LA TUILE REMPLIT SA COLONNE.
   Sans ça, la colonne faisait bien son tiers mais le bouton restait à sa
   largeur naturelle au milieu : trois tuiles de largeurs différentes dans
   trois colonnes égales. Et comme les contenus n'ont pas la même hauteur, on
   égalise sur la plus haute — mesurée dans la page, jamais écrite en dur
   (voir egaliserTuiles dans bouton.js). */
/* RETIRÉ le 17/09 au soir : cette règle étirait chaque widget à 100 % de sa
   colonne, ce qui effaçait les largeurs qu'elle avait réglées. Seules restent
   les enveloppes qui, sans elle, se rétrécissent à zéro. */
.elementor-location-header .mrd-btel-rangee .elementor-menu-cart__container,
.elementor-location-header .mrd-btel-rangee .elementor-menu-cart__toggle {
	width: auto !important;
	max-width: none !important;
}

/* La tuile ne remplit PLUS sa colonne : elle garde la largeur qu'elle a. Seule
   la hauteur est mise en commun — c'est ce qu'elle a demandé, et rien de plus. */
.elementor-location-header .mrd-btel-rangee a.elementor-button,
.elementor-location-header .mrd-btel-rangee .elementor-menu-cart__toggle .elementor-button,
.elementor-location-header .mrd-btel-rangee .mega-menu-toggle {
	min-height: var(--mrd-btel-tuile, 0) !important;
	height: var(--mrd-btel-tuile, auto) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.mrd-btel-rangee .elementor-button-text,
.mrd-btel-rangee .mega-toggle-label {
	white-space: nowrap;
}