/* CercleKit — Menu : barre de navigation maison.
 * Items = lien direct / déroulé / méga menu composable / panneau coulissant.
 * Pointers animés au survol, bascule burger au breakpoint. Tout est piloté par
 * des variables CSS surchargées depuis l'éditeur (class-cercle-menu-widget.php).
 * Rien n'est imposé sur la typo/couleur héritée : les libellés héritent de la
 * cascade CercleKit tant qu'aucune couleur n'est définie dans le panneau. */

.ck-menu {
	--ck-menu-gap: 8px;
	--ck-menu-color: #0b1726;
	--ck-menu-color-h: #d85830;
	--ck-menu-item-bg: transparent;
	--ck-menu-item-bg-h: transparent;
	--ck-menu-item-radius: 6px;

	--ck-menu-ptr-color: #d85830;
	--ck-menu-ptr-weight: 2px;
	--ck-menu-ptr-dur: 250ms;

	--ck-menu-dd-bg: #ffffff;
	--ck-menu-dd-color: #0b1726;
	--ck-menu-dd-color-h: #d85830;
	--ck-menu-dd-w: 220px;
	--ck-menu-dd-radius: 8px;

	--ck-menu-panel-bg: #ffffff;
	--ck-menu-panel-pad: 32px;
	--ck-menu-panel-dur: 350ms;
	--ck-menu-slide-size: 420px;
	--ck-menu-drawer-size: min(360px, 85vw);
	--ck-menu-overlay: rgba(11, 23, 38, 0.5);
	--ck-menu-close-color: #0b1726;
	--ck-menu-close-size: 24px;
	--ck-menu-close-box: 40px;
	--ck-menu-close-radius: 8px;
	--ck-menu-close-bg: transparent;
	--ck-menu-close-top: 14px;
	--ck-menu-close-right: 14px;

	--ck-menu-burger-color: #0b1726;
	--ck-menu-burger-w: 28px;
	--ck-menu-burger-bar: 2px;              /* épaisseur des barres */
	--ck-menu-burger-radius: 2px;           /* arrondi des barres */
	--ck-menu-burger-color-open: #ffffff;   /* couleur de la croix (menu ouvert) */
	--ck-menu-burger-btn-bg: transparent;   /* fond du bouton burger */
	--ck-menu-burger-btn-pad: 6px;          /* marge intérieure du bouton */
	--ck-menu-burger-btn-radius: 0px;       /* arrondi du bouton */
	/* Panneau latéral mobile — vars DÉDIÉES, posées par la section « Burger mobile »
	 * et consommées plus bas avec un fallback vers les vars méga/slide :
	 *   --ck-menu-drawer-panel-bg / --ck-menu-drawer-pad / --ck-menu-drawer-overlay
	 *   --ck-menu-drawer-close-color / --ck-menu-drawer-close-bg / --ck-menu-drawer-close-size
	 * Non déclarées ici volontairement : une var déclarée écraserait le fallback. */

	position: relative;
	display: block;
}
.ck-menu *, .ck-menu *::before, .ck-menu *::after { box-sizing: border-box; }

/* ------------------------------- La barre ------------------------------- */
.ck-menu__nav { display: block; }

.ck-menu__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ck-menu-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-menu__item {
	position: static;
	margin: 0;
	list-style: none;
}
.ck-menu__item--dropdown { position: relative; }
.ck-menu__item--link,
.ck-menu__item--slide { position: relative; }

/* ---- Lien / déclencheur : reset agressif pour neutraliser le style thème ---- */
.ck-menu .ck-menu__link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	background: var(--ck-menu-item-bg) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--ck-menu-item-radius) !important;
	box-shadow: none !important;
	color: var(--ck-menu-color);
	font: inherit;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	text-transform: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	transition: color var(--ck-menu-ptr-dur) ease, background-color var(--ck-menu-ptr-dur) ease;
}
/* FOCUS SOURIS : on REMET la couleur normale.
 * Les items à panneau (déroulé/méga/slide) sont des <button> ; le reset du thème
 * `[type="button"]:focus { color:#fff }` a la MÊME spécificité (0,2,0) que ma base
 * `.ck-menu .ck-menu__link` et charge après → il gagnait. Le focus restant collé
 * après un clic, le libellé passait au blanc et Y RESTAIT (invisible sur un
 * en-tête clair). « Accueil » n'était jamais touché : c'est un <a>, pas un
 * <button>. Sur :hover j'avais déjà une règle en (0,3,0) qui gagnait — d'où un
 * bug qui n'apparaissait qu'au CLIC. Même piège que la croix de fermeture. */
.ck-menu .ck-menu__link:focus {
	color: var(--ck-menu-color) !important;
}
/* Survol / focus clavier / item ouvert : couleur d'accent. Déclarées APRÈS la
 * règle :focus ci-dessus (même spécificité) → elles gagnent quand elles
 * s'appliquent aussi. !important pour verrouiller face au reset du thème. */
.ck-menu .ck-menu__link:hover,
.ck-menu .ck-menu__link:focus-visible,
.ck-menu .ck-menu__item.is-open > .ck-menu__link {
	color: var(--ck-menu-color-h) !important;
	background: var(--ck-menu-item-bg-h) !important;
}
.ck-menu .ck-menu__link:focus-visible { outline: 2px solid var(--ck-menu-ptr-color); outline-offset: 2px; }
.ck-menu__label { position: relative; z-index: 1; }

/* Chevron des items à panneau */
/* Triangle par défaut. Les bords dérivent de --ck-menu-caret-size, dont le repli
 * (10px) redonne exactement les 4px/5px d'origine : un menu sans réglage ne bouge pas. */
.ck-menu__caret {
	width: 0; height: 0;
	border-left: calc(var(--ck-menu-caret-size, 10px) * .4) solid transparent;
	border-right: calc(var(--ck-menu-caret-size, 10px) * .4) solid transparent;
	border-top: calc(var(--ck-menu-caret-size, 10px) * .5) solid currentColor;
	margin-left: var(--ck-menu-caret-gap, 0px);
	transition: transform var(--ck-menu-ptr-dur) ease;
	opacity: .8;
}
/* Icône choisie : on annule le triangle (bords + boîte à zéro) et on rend l'icône
 * à la taille demandée. Repli 14px : une icône à 10px serait illisible. */
.ck-menu__caret--icon {
	width: auto; height: auto;
	border: 0;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: var(--ck-menu-caret-size, 14px);
	line-height: 1;
}
.ck-menu__caret--icon svg { width: 1em; height: 1em; fill: currentColor; }
.ck-menu__caret--icon i   { font-size: 1em; line-height: 1; }
.ck-menu__item.is-open > .ck-menu__link .ck-menu__caret { transform: rotate(180deg); }

/* ------------------------------- Pointers ------------------------------- */
/* Souligné */
.ck-menu-ptr-underline .ck-menu__link::after {
	content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px;
	height: var(--ck-menu-ptr-weight); background: var(--ck-menu-ptr-color);
	transform: scaleX(0); transform-origin: left center;
	transition: transform var(--ck-menu-ptr-dur) ease;
}
.ck-menu-ptr-underline .ck-menu__link:hover::after,
.ck-menu-ptr-underline .ck-menu__item.is-open > .ck-menu__link::after { transform: scaleX(1); }

/* Double trait */
.ck-menu-ptr-double .ck-menu__link::before,
.ck-menu-ptr-double .ck-menu__link::after {
	content: ""; position: absolute; left: 8px; right: 8px; height: var(--ck-menu-ptr-weight);
	background: var(--ck-menu-ptr-color); transform: scaleX(0);
	transition: transform var(--ck-menu-ptr-dur) ease;
}
.ck-menu-ptr-double .ck-menu__link::before { top: 4px; transform-origin: right center; }
.ck-menu-ptr-double .ck-menu__link::after  { bottom: 4px; transform-origin: left center; }
.ck-menu-ptr-double .ck-menu__link:hover::before,
.ck-menu-ptr-double .ck-menu__link:hover::after,
.ck-menu-ptr-double .ck-menu__item.is-open > .ck-menu__link::before,
.ck-menu-ptr-double .ck-menu__item.is-open > .ck-menu__link::after { transform: scaleX(1); }

/* Cadre */
.ck-menu-ptr-framed .ck-menu__link::after {
	content: ""; position: absolute; inset: 0; border-radius: var(--ck-menu-item-radius);
	border: var(--ck-menu-ptr-weight) solid var(--ck-menu-ptr-color);
	transform: scale(.8); opacity: 0;
	transition: transform var(--ck-menu-ptr-dur) ease, opacity var(--ck-menu-ptr-dur) ease;
}
.ck-menu-ptr-framed .ck-menu__link:hover::after,
.ck-menu-ptr-framed .ck-menu__item.is-open > .ck-menu__link::after { transform: scale(1); opacity: 1; }

/* Fond */
.ck-menu-ptr-background .ck-menu__link::after {
	content: ""; position: absolute; inset: 0; border-radius: var(--ck-menu-item-radius);
	background: var(--ck-menu-ptr-color); transform: scaleY(0); transform-origin: bottom center;
	transition: transform var(--ck-menu-ptr-dur) ease; z-index: 0;
}
.ck-menu-ptr-background .ck-menu__link:hover::after,
.ck-menu-ptr-background .ck-menu__item.is-open > .ck-menu__link::after { transform: scaleY(1); }
.ck-menu-ptr-background .ck-menu__link:hover,
.ck-menu-ptr-background .ck-menu__item.is-open > .ck-menu__link { color: #fff; }

/* Surbrillance (marqueur derrière le texte) */
.ck-menu-ptr-highlight .ck-menu__label::after {
	content: ""; position: absolute; left: -2px; right: -2px; bottom: 1px; height: 40%;
	background: var(--ck-menu-ptr-color); opacity: .35; z-index: -1;
	transform: scaleX(0); transform-origin: left center;
	transition: transform var(--ck-menu-ptr-dur) ease;
}
.ck-menu-ptr-highlight .ck-menu__link:hover .ck-menu__label::after,
.ck-menu-ptr-highlight .ck-menu__item.is-open > .ck-menu__link .ck-menu__label::after { transform: scaleX(1); }

/* ------------------------------ Déroulé ------------------------------ */
.ck-menu__dropdown {
	position: absolute;
	top: 100%; left: 0;
	min-width: var(--ck-menu-dd-w);
	background: var(--ck-menu-dd-bg);
	border-radius: var(--ck-menu-dd-radius);
	padding: 6px;
	margin-top: 6px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--ck-menu-ptr-dur) ease, transform var(--ck-menu-ptr-dur) ease, visibility var(--ck-menu-ptr-dur) ease;
	z-index: 50;
}
.ck-menu__item--dropdown.is-open > .ck-menu__dropdown {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.ck-menu__dropdown ul { list-style: none; margin: 0; padding: 0; }
.ck-menu .ck-menu__sublink {
	display: block;
	padding: 9px 12px;
	border-radius: calc(var(--ck-menu-dd-radius) - 3px);
	color: var(--ck-menu-dd-color);
	font: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background .15s ease;
}
.ck-menu .ck-menu__sublink:hover,
.ck-menu .ck-menu__sublink:focus-visible {
	color: var(--ck-menu-dd-color-h);
	background: rgba(0, 0, 0, .04);
	outline: none;
}

/* -------------------------- Panneaux (base) -------------------------- */
.ck-menu__panel {
	background: var(--ck-menu-panel-bg);
	opacity: 0; visibility: hidden;
	transition: opacity var(--ck-menu-panel-dur) ease, visibility var(--ck-menu-panel-dur) ease, transform var(--ck-menu-panel-dur) ease;
}
/* Types sans panneau composable : on masque le conteneur (non destructif). */
.ck-menu__item--link .ck-menu__panel,
.ck-menu__item--dropdown .ck-menu__panel { display: none; }

.ck-menu__panel-inner { position: relative; padding: var(--ck-menu-panel-pad); }

/* Croix : masquée par défaut, visible dans les slides + le tiroir mobile. */
.ck-menu__close {
	display: none;
	position: absolute; top: var(--ck-menu-close-top); right: var(--ck-menu-close-right); z-index: 5;
	align-items: center; justify-content: center;
	/* padding en !important, même raison que le burger : un thème qui style
	 * `button` réinjectait du padding autour de la croix (icône décalée dans sa
	 * boîte), impossible à retirer. La taille se règle par la boîte + l'icône. */
	width: var(--ck-menu-close-box); height: var(--ck-menu-close-box); padding: 0 !important; margin: 0;
	background: var(--ck-menu-close-bg) !important; border: 0 !important; box-shadow: none !important;
	border-radius: var(--ck-menu-close-radius);
	/* !important : le reset du thème sur `[type="button"] { color }` a la même
	 * spécificité que `.ck-menu__close` et gagnait par ordre de chargement → la
	 * croix prenait la couleur du thème sur le SITE, alors qu'en ÉDITEUR le
	 * bouton `.ck-menu__edit-close` (qui a déjà !important) restait correct.
	 * D'où l'écart back/front. Même piège que le burger. */
	color: var(--ck-menu-close-color) !important;
	cursor: pointer; line-height: 0;
	-webkit-appearance: none; appearance: none;
	transition: background-color .2s ease, color .2s ease;
}
/* Le SVG suit `currentColor` : on force aussi le stroke pour neutraliser un
 * éventuel `stroke`/`fill` imposé par le thème sur les svg de boutons. */
.ck-menu__close svg { width: var(--ck-menu-close-size); height: var(--ck-menu-close-size); }
.ck-menu__close svg path { stroke: currentColor !important; }
.ck-menu__close:hover {
	background: var(--ck-menu-close-bg-h, var(--ck-menu-close-bg)) !important;
	color: var(--ck-menu-close-color-h, var(--ck-menu-close-color)) !important;
}
.ck-menu__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Croix désactivée (réglage « Croix de fermeture » = Non) : front + éditeur. */
.ck-menu[data-cross="no"] .ck-menu__close,
.ck-menu[data-cross="no"] .ck-menu__edit-close { display: none !important; }

/* Croix du TIROIR mobile masquée à part — interrupteur « Afficher la croix »
 * (Burger mobile › Croix du panneau). Mettre la TAILLE à 0 ne la masquait pas :
 * le bouton gardait sa boîte cliquable (« la croix reste apparente »). Ici on
 * masque le bouton entier, sur le site ET dans l'aperçu éditeur. */
.ck-menu[data-drawer-cross="no"] .ck-menu__item--drawer .ck-menu__panel > .ck-menu__close,
.elementor-editor-active .ck-menu[data-drawer-cross="no"] .ck-edit-drawer .ck-menu__edit-close { display: none !important; }

/* --------------------------- Méga menu --------------------------- */
.ck-menu__item--mega .ck-menu__panel {
	position: absolute;
	top: 100%; left: 0; right: 0;
	margin-top: var(--ck-menu-mega-gap, 6px);
	/* Radius/ombre pilotés par les réglages « Panneaux (méga & slide) ». Les
	 * fallbacks reproduisent l'apparence d'origine tant que rien n'est réglé. */
	border-radius: var(--ck-menu-panel-radius, var(--ck-menu-dd-radius));
	box-shadow: var(--ck-menu-panel-shadow, 0 20px 60px rgba(11, 23, 38, .14));
	transform: translateY(6px);
	z-index: 60;
}
/* PONT DE SURVOL : l'espace entre l'item et le panneau (--ck-menu-mega-gap) est
 * du vide → en descendant vers le méga, la souris quitte l'item, mouseleave part
 * et le panneau se referme avant d'être atteint. Ce ::before, enfant DOM du
 * panneau (donc de l'item), comble le vide et maintient le survol. Il n'existe
 * que panneau ouvert (le panneau fermé est visibility:hidden). */
.ck-menu__item--mega .ck-menu__panel::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 100%;
	height: var(--ck-menu-mega-gap, 6px);
}
/* Pleine largeur (fenêtre) : on étire sur 100vw centré. Radius 0 par défaut
 * (bord à bord), mais réglable via « Arrondi » si l'utilisateur en veut un. */
.ck-menu-mega-full .ck-menu__item--mega .ck-menu__panel {
	left: 50%; right: auto; width: 100vw; margin-left: -50vw;
	border-radius: var(--ck-menu-panel-radius, 0);
}
/* Panneau coulissant : arrondi réglable aussi (0 par défaut). */
.ck-menu__item--slide:not(.ck-menu__item--drawer) .ck-menu__panel {
	border-radius: var(--ck-menu-panel-radius, 0);
}
.ck-menu__item--mega.is-open > .ck-menu__panel {
	opacity: 1; visibility: visible; transform: translateY(0);
}

/* --- Animations d'ouverture du méga menu (réglage « Animation d'ouverture ») ---
 * La transition (opacity/transform) est portée par .ck-menu__panel ; ici on ne
 * définit que l'état FERMÉ (point de départ) et l'état OUVERT (point d'arrivée).
 * La vitesse suit le réglage « Vitesse d'ouverture » (--ck-menu-panel-dur). */
/* AUCUNE : apparition nette, instantanée. Pas de transition du tout — donc pas
 * de fondu non plus (l'opacité de la règle de base saute de 0 à 1). */
.ck-menu-megafx-none .ck-menu__item--mega .ck-menu__panel {
	transform: none;
	transition: none !important;
}
.ck-menu-megafx-none .ck-menu__item--mega.is-open > .ck-menu__panel { transform: none; }

/* FONDU : opacité seule, aucun déplacement. */
.ck-menu-megafx-fade .ck-menu__item--mega .ck-menu__panel { transform: none; }
.ck-menu-megafx-fade .ck-menu__item--mega.is-open > .ck-menu__panel { transform: none; }

/* GLISSEMENT : le panneau se déroule vers le bas, depuis le bas de l'en-tête.
 * opacity:1 → volontairement AUCUN fondu, c'est la hauteur qui s'anime.
 *
 * ⚠ NE PAS revenir à `clip-path` ici (c'était la v4.2.208-212) : un
 * `clip-path: inset(0)` découpe l'élément à sa BORDER-BOX, or une box-shadow est
 * peinte EN DEHORS de cette box → l'ombre était intégralement rasée sur le site,
 * alors qu'en éditeur le panneau révélé n'a pas de clip et l'affichait → écart
 * back/front incompréhensible. Et on ne peut pas élargir la découpe : le
 * navigateur RAMÈNE les insets négatifs à 0 (`inset(0 -400px …)` → `inset(0px)`).
 *
 * `overflow:hidden` + `max-height`, lui, ne coupe que le CONTENU : l'ombre propre
 * du panneau est conservée et suit la boîte qui grandit. Vérifié en rendu réel. */
.ck-menu-megafx-slide .ck-menu__item--mega .ck-menu__panel {
	opacity: 1;
	transform: none;
	clip-path: none;
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--ck-menu-panel-dur) ease, visibility var(--ck-menu-panel-dur) ease;
}
.ck-menu-megafx-slide .ck-menu__item--mega.is-open > .ck-menu__panel {
	transform: none;
	/* Borne haute du déroulé : doit dépasser la hauteur réelle du panneau.
	 * Réglable via « Hauteur max du déroulé » si le méga est très haut. */
	max-height: var(--ck-menu-mega-maxh, 600px);
}

/* --------------------------- Panneau coulissant --------------------------- */
/* Voile plein écran quand un slide est ouvert. */
.ck-menu__item--slide.is-open::before {
	content: ""; position: fixed; inset: 0; z-index: 99998;
	background: var(--ck-menu-overlay);
	opacity: 1;
	animation: ck-menu-fade var(--ck-menu-panel-dur) ease;
}
@keyframes ck-menu-fade { from { opacity: 0; } to { opacity: 1; } }

/* Tiroir mobile composable : son voile est DÉJÀ porté par la racine
 * (.ck-menu.is-mobile.is-drawer-open::before, plus bas, qui lit
 * --ck-menu-drawer-overlay). Le tiroir étant AUSSI un item slide, il peignait
 * EN PLUS le voile slide ci-dessus (--ck-menu-overlay) : DEUX voiles empilés.
 * Résultat, régler « Voile du tiroir » ne changeait rien de visible — la
 * couleur choisie passait sous la couche slide restée sombre. On coupe le voile
 * slide POUR LE TIROIR : reste le seul voile racine, celui qu'on règle. */
.ck-menu__item--drawer.is-open::before { display: none; }

.ck-menu__item--slide .ck-menu__panel {
	position: fixed;
	z-index: 99999;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: 0 0 60px rgba(11, 23, 38, .25);
}
.ck-menu__item--slide .ck-menu__panel > .ck-menu__close { display: inline-flex; }

/* Directions (fermé → ouvert) */
.ck-menu__item--slide[data-slide-dir="right"] .ck-menu__panel { top: 0; right: 0; height: 100%; width: var(--ck-menu-slide-size); max-width: 100vw; transform: translateX(100%); }
.ck-menu__item--slide[data-slide-dir="left"]  .ck-menu__panel { top: 0; left: 0;  height: 100%; width: var(--ck-menu-slide-size); max-width: 100vw; transform: translateX(-100%); }
.ck-menu__item--slide[data-slide-dir="top"]   .ck-menu__panel { top: 0; left: 0;  width: 100%;  height: var(--ck-menu-slide-size); max-height: 100vh; transform: translateY(-100%); }
.ck-menu__item--slide[data-slide-dir="bottom"] .ck-menu__panel { bottom: 0; left: 0; width: 100%; height: var(--ck-menu-slide-size); max-height: 100vh; transform: translateY(100%); }
.ck-menu__item--slide[data-slide-dir="full"]  .ck-menu__panel { inset: 0; width: 100%; height: 100%; transform: none; opacity: 0; }

.ck-menu__item--slide.is-open > .ck-menu__panel { opacity: 1; visibility: visible; transform: none; }

/* --- Animations d'ouverture du panneau coulissant (réglage « Animation ») ---
 * Le tiroir mobile est exclu : il a sa propre section de réglages.
 * Par défaut (« Glissement »), le panneau part hors écran selon sa direction
 * (translateX/Y ci-dessus) — on ne touche à rien. Les deux autres modes
 * neutralisent ce déplacement : le panneau reste à sa position finale et c'est
 * l'opacité (fondu) ou rien du tout (aucune) qui gère l'apparition.
 * PAS de clip-path ici : il raserait la box-shadow (cf. méga, v4.2.213). */
.ck-menu-slidefx-none .ck-menu__item--slide:not(.ck-menu__item--drawer) .ck-menu__panel {
	transform: none;
	transition: none !important;
}
.ck-menu-slidefx-fade .ck-menu__item--slide:not(.ck-menu__item--drawer) .ck-menu__panel {
	transform: none;
}

/* Verrou de défilement */
/* Verrou de défilement — UNIQUEMENT sur <html>.
 * ⚠ NE PAS remettre `body` ici : avec la barre d'admin WP (`html{margin-top:32px}`),
 * mettre overflow:hidden sur html ET body en même temps crée un contexte de
 * formatage qui casse la fusion des marges → toute la page (et donc le menu)
 * descendait de 32px à l'ouverture d'un panneau. Mesuré : html seul = 0 décalage,
 * body seul = 0, les deux = +32px. html seul suffit : c'est lui qui porte le
 * défilement du viewport. */
html.ck-menu-lock { overflow: hidden !important; touch-action: none; }

/* ------------------------------- Burger ------------------------------- */
/* !important : le reset du thème (`[type="button"]{display:inline-block}`) a la
 * même spécificité que `.ck-menu__burger` et gagnait par ordre de chargement →
 * le burger s'affichait même en desktop. On force donc son affichage. */
.ck-menu__burger {
	display: none !important;
	align-items: center; justify-content: center;
	/* padding en !important, comme background/border ci-dessous : un thème qui
	 * style `button` (ex. `.elementor button{padding:…}`, spécificité 0,1,1)
	 * battait sinon `.ck-menu__burger` (0,1,0) et réinjectait du padding que le
	 * contrôle « Marge intérieure du bouton » ne pouvait plus retirer. */
	width: auto; height: auto; padding: var(--ck-menu-burger-btn-pad) !important; margin: 0;
	background: var(--ck-menu-burger-btn-bg) !important; border: 0 !important; box-shadow: none !important;
	border-radius: var(--ck-menu-burger-btn-radius);
	color: var(--ck-menu-burger-color);
	cursor: pointer; line-height: 0;
	-webkit-appearance: none; appearance: none;
	position: relative; z-index: 100001;
}
.ck-menu__burger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ck-menu__bars {
	position: relative; display: block;
	width: var(--ck-menu-burger-w);
	height: calc(var(--ck-menu-burger-w) * 0.62);
}
.ck-menu__bars i {
	/* couleur via la variable (pas currentColor) : sinon le reset du thème
	 * `[type="button"]{color}` écrase la couleur du bouton et teinte les barres. */
	position: absolute; left: 0; width: 100%; height: var(--ck-menu-burger-bar);
	background: var(--ck-menu-burger-color); border-radius: var(--ck-menu-burger-radius);
	transition: transform var(--ck-menu-panel-dur) ease, opacity calc(var(--ck-menu-panel-dur) * .6) ease, background-color var(--ck-menu-panel-dur) ease;
}
.ck-menu__bars i:nth-child(1) { top: 0; }
.ck-menu__bars i:nth-child(2) { top: 50%; transform: translateY(-50%); }
.ck-menu__bars i:nth-child(3) { bottom: 0; }
.ck-menu.is-drawer-open .ck-menu__bars i { background: var(--ck-menu-burger-color-open); }
.ck-menu.is-drawer-open .ck-menu__burger { color: var(--ck-menu-burger-color-open); }
.ck-menu.is-drawer-open .ck-menu__bars i:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.ck-menu.is-drawer-open .ck-menu__bars i:nth-child(2) { opacity: 0; }
.ck-menu.is-drawer-open .ck-menu__bars i:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* --------- REPLI HISTORIQUE : la barre se replie en tiroir off-canvas ---------
 * ⚠ Ce bloc ne sert QUE de filet pour un menu qui n'a pas (encore) sa zone burger
 * composable : menu créé avant 4.2.203 et jamais rouvert dans l'éditeur (donc pas
 * encore amorcé). Dès qu'une zone existe, `.ck-menu--has-drawer-zone` neutralise
 * tout ça plus bas et c'est le panneau composable qui s'ouvre.
 * Ne PAS y ajouter de réglages : le fond est figé ici, l'ancienne variable
 * --ck-menu-drawer-bg n'était plus posée par aucun contrôle (retirée en 4.2.222). */
.ck-menu.is-mobile > .ck-menu__nav {
	position: fixed; z-index: 100000;
	background: #ffffff;
	overflow: auto; -webkit-overflow-scrolling: touch;
	opacity: 0; visibility: hidden;
	transition: transform var(--ck-menu-panel-dur) ease, opacity var(--ck-menu-panel-dur) ease, visibility var(--ck-menu-panel-dur) ease;
	box-shadow: 0 0 60px rgba(11, 23, 38, .25);
}
.ck-menu.is-mobile.is-drawer-open::before {
	content: ""; position: fixed; inset: 0; z-index: 99999;
	background: var(--ck-menu-drawer-overlay, var(--ck-menu-overlay));
}
.ck-menu.is-mobile.is-drawer-open > .ck-menu__nav { opacity: 1; visibility: visible; transform: none; }
.ck-menu.is-mobile > .ck-menu__nav > .ck-menu__close { display: inline-flex; }
/* Desktop : la croix du tiroir ne doit JAMAIS apparaître. !important car le reset
 * du thème `[type="button"]{display:inline-block}` a la même spécificité que la
 * base `.ck-menu__close{display:none}` et gagnait par ordre de chargement. */
.ck-menu:not(.is-mobile) > .ck-menu__nav > .ck-menu__close { display: none !important; }

/* Tiroir : items en colonne */
.ck-menu.is-mobile .ck-menu__bar { flex-direction: column; align-items: stretch; padding: 64px 20px 24px; gap: 2px; }
.ck-menu.is-mobile .ck-menu__item { position: static; width: 100%; }
.ck-menu.is-mobile .ck-menu__link { width: 100% !important; justify-content: space-between; }

/* Déroulés → accordéons inline */
.ck-menu.is-mobile .ck-menu__dropdown {
	position: static; opacity: 1; visibility: visible; transform: none;
	min-width: 0; box-shadow: none; margin: 0; padding: 0 0 0 12px;
	max-height: 0; overflow: hidden; background: transparent;
	transition: max-height var(--ck-menu-panel-dur) ease;
}
.ck-menu.is-mobile .ck-menu__item--dropdown.is-open > .ck-menu__dropdown { max-height: 60vh; }

/* Méga → panneau inline dans le tiroir */
.ck-menu.is-mobile .ck-menu__item--mega .ck-menu__panel {
	position: static; width: auto; margin: 0; left: auto; right: auto;
	box-shadow: none; border-radius: 0; transform: none;
	max-height: 0; overflow: hidden;
	transition: max-height var(--ck-menu-panel-dur) ease, opacity var(--ck-menu-panel-dur) ease;
}
.ck-menu.is-mobile .ck-menu__item--mega.is-open > .ck-menu__panel { max-height: 70vh; opacity: 1; visibility: visible; }
/* Slide : garde son comportement off-canvas dans le tiroir. */

/* Dimensions du tiroir selon la direction choisie. Les positions s'appliquent
 * toujours ; le transform de fermeture UNIQUEMENT quand le tiroir n'est pas ouvert
 * (sinon il écrasait le `transform:none` d'ouverture → tiroir bloqué hors écran). */
.ck-menu.is-mobile.ck-menu--drawer-right  > .ck-menu__nav { top: 0; right: 0; height: 100%; width: var(--ck-menu-drawer-size); }
.ck-menu.is-mobile.ck-menu--drawer-left   > .ck-menu__nav { top: 0; left: 0;  height: 100%; width: var(--ck-menu-drawer-size); }
.ck-menu.is-mobile.ck-menu--drawer-top    > .ck-menu__nav { top: 0; left: 0;  width: 100%;  height: var(--ck-menu-drawer-size); }
.ck-menu.is-mobile.ck-menu--drawer-bottom > .ck-menu__nav { bottom: 0; left: 0; width: 100%; height: var(--ck-menu-drawer-size); }
.ck-menu.is-mobile.ck-menu--drawer-full   > .ck-menu__nav { inset: 0; width: 100%; height: 100%; }

.ck-menu.is-mobile.ck-menu--drawer-right:not(.is-drawer-open)  > .ck-menu__nav { transform: translateX(100%); }
.ck-menu.is-mobile.ck-menu--drawer-left:not(.is-drawer-open)   > .ck-menu__nav { transform: translateX(-100%); }
.ck-menu.is-mobile.ck-menu--drawer-top:not(.is-drawer-open)    > .ck-menu__nav { transform: translateY(-100%); }
.ck-menu.is-mobile.ck-menu--drawer-bottom:not(.is-drawer-open) > .ck-menu__nav { transform: translateY(100%); }

/* Le passage en mode « mobile » (classe .is-mobile) est piloté par le JS via
 * matchMedia selon le breakpoint choisi : le burger n'apparaît qu'à ce moment,
 * jamais en même temps que la barre complète. */
.ck-menu.is-mobile > .ck-menu__burger { display: inline-flex !important; }

/* Position du burger dans son conteneur (gauche / centre / droite).
 * En mobile la racine devient un flex : ses deux enfants sont le burger et le
 * <nav>. Avec une zone burger, le <nav> ne contient plus rien de visible (items
 * masqués, panneau en position:fixed) → il pèse ~0 et c'est bien le burger que
 * justify-content déplace. `text-align` aurait été plus simple mais il HÉRITE :
 * il aurait aussi décalé le contenu composé du tiroir. */
.ck-menu.is-mobile {
	display: flex;
	align-items: center;
	justify-content: var(--ck-menu-burger-just, flex-start);
}

/* ============ Zone mobile composable (item de type « drawer ») ============ */
/* Réutilise le panneau slide (off-canvas composable), ouvert par le burger.
 * Masquée de la barre desktop, dimensionnée par --ck-menu-drawer-size. */
.ck-menu__item--drawer .ck-menu__panel { --ck-menu-slide-size: var(--ck-menu-drawer-size); }
/* Style DÉDIÉ du panneau latéral mobile (indépendant des méga/slide) : fond,
 * marge et croix propres, avec fallback vers les vars partagées si non réglés. */
.ck-menu__item--drawer .ck-menu__panel { background: var(--ck-menu-drawer-panel-bg, var(--ck-menu-panel-bg)); }
.ck-menu__item--drawer .ck-menu__panel-inner { padding: var(--ck-menu-drawer-pad, var(--ck-menu-panel-pad)); }
.ck-menu__item--drawer .ck-menu__panel > .ck-menu__close {
	color: var(--ck-menu-drawer-close-color, var(--ck-menu-close-color));
	background: var(--ck-menu-drawer-close-bg, var(--ck-menu-close-bg)) !important;
}
.ck-menu__item--drawer .ck-menu__panel > .ck-menu__close svg {
	width: var(--ck-menu-drawer-close-size, var(--ck-menu-close-size));
	height: var(--ck-menu-drawer-close-size, var(--ck-menu-close-size));
}
/* Pas de déclencheur dans la barre sur le site (c'est le burger qui ouvre). */
.ck-menu__item--drawer > .ck-menu__link { display: none !important; }
/* Desktop : l'item n'occupe pas la barre ; présent en mobile pour son panneau. */
.ck-menu__item--drawer { display: none; }
.ck-menu.is-mobile .ck-menu__item--drawer { display: block; }

/* Une zone composable existe → le tiroir NE reflow PAS : le nav reste en place,
 * la barre est masquée, et c'est le panneau de la zone qui s'ouvre. */
.ck-menu--has-drawer-zone.is-mobile > .ck-menu__nav {
	position: static !important; transform: none !important;
	opacity: 1 !important; visibility: visible !important;
	width: auto !important; height: auto !important;
	background: transparent !important; box-shadow: none !important; overflow: visible !important;
}
.ck-menu--has-drawer-zone.is-mobile > .ck-menu__nav > .ck-menu__close { display: none !important; }
.ck-menu--has-drawer-zone.is-mobile .ck-menu__bar { flex-direction: row; padding: 0; }
.ck-menu--has-drawer-zone.is-mobile .ck-menu__bar > .ck-menu__item:not(.ck-menu__item--drawer) { display: none !important; }

/* Éditeur : la zone tiroir ne s'affiche JAMAIS comme un item dans la barre (ni
 * desktop ni mobile). On la compose via le bouton « Éditer le tiroir mobile » ou
 * en cliquant le burger en aperçu mobile — son panneau composable s'ouvre alors. */
.elementor-editor-active .ck-menu__item--drawer > .ck-menu__link { display: none !important; }

/* ------------------------------- Éditeur ------------------------------- */
/* RÉALITÉ ELEMENTOR (constatée dans l'aperçu) : en mode édition, Elementor ne
 * garde PAS les conteneurs enfants là où on les place dans `render()`. Il les
 * HISSE comme enfants directs du `target_container` (.ck-menu__bar), sous forme
 * de `.ck-menu__panel-inner`, à la suite des items et dans le même ordre :
 *   [item0, item1, …, itemN, inner0, inner1, …, innerN]
 *
 * On masque donc TOUS ces conteneurs hissés ; le JS éditeur (cercle-menu-editor.js)
 * révèle celui de l'item cliqué avec son VRAI rendu : le méga menu en overlay
 * ABSOLU sous le conteneur du menu (ne pousse pas le header), pleine largeur ou
 * largeur du menu selon le réglage ; le panneau coulissant en OFF-CANVAS fixe
 * (gauche/droite/haut/bas/plein écran) avec voile. Un bouton de fermeture est
 * injecté pour ressortir. Le front (hors .elementor-editor-active) n'est pas touché. */
.elementor-editor-active .ck-menu__item .ck-menu__panel { display: none !important; }
.elementor-editor-active .ck-menu__item--slide.is-open::before { display: none !important; }
/* Voile du tiroir mobile (z-index 99999) : en ÉDITION il passait par-dessus la
 * zone de dépôt révélée (z-index 99991) → zone « assombrie » et clics/drop bloqués.
 * On le neutralise en éditeur pour pouvoir composer le menu burger. */
.elementor-editor-active .ck-menu.is-mobile.is-drawer-open::before { display: none !important; }
.elementor-editor-active .ck-menu__close { display: none !important; }
.elementor-editor-active .ck-menu__bar > .ck-menu__panel-inner { display: none !important; }

/* Burger en édition : masqué en desktop, VISIBLE en preview mobile/tablette
 * (la classe .is-mobile est posée par le JS éditeur selon la largeur d'aperçu).
 * La croix du tiroir redevient dispo en mobile pour refermer. */
.elementor-editor-active .ck-menu:not(.is-mobile) .ck-menu__burger { display: none !important; }
.elementor-editor-active .ck-menu.is-mobile > .ck-menu__burger { display: inline-flex !important; }
.elementor-editor-active .ck-menu.is-mobile:not(.ck-menu--has-drawer-zone) > .ck-menu__nav > .ck-menu__close { display: inline-flex !important; }
/* Zone tiroir : en preview mobile, on ne montre QUE le burger — ni la puce de la
 * zone (elle se compose en desktop), ni la croix du nav. */
.elementor-editor-active .ck-menu--has-drawer-zone.is-mobile > .ck-menu__nav > .ck-menu__close { display: none !important; }
.elementor-editor-active .ck-menu.is-mobile .ck-menu__item--drawer > .ck-menu__link { display: none !important; }

/* --- Méga menu : overlay ABSOLU sous le conteneur du menu (pas de reflow) --- */
.elementor-editor-active .ck-menu__bar > .ck-menu__panel-inner.ck-edit-mega {
	display: block !important;
	position: absolute; top: 100%; left: 0; right: 0;
	margin-top: var(--ck-menu-mega-gap, 6px); padding: var(--ck-menu-panel-pad); z-index: 60; min-height: 80px;
	background: var(--ck-menu-panel-bg);
	box-shadow: var(--ck-menu-panel-shadow, 0 20px 60px rgba(11, 23, 38, .14));
	border-radius: var(--ck-menu-panel-radius, var(--ck-menu-dd-radius));
}
/* Option pleine largeur (fenêtre) — même bascule que le front.
 * width en !important : une règle Elementor impose sinon la largeur du conteneur. */
.elementor-editor-active .ck-menu-mega-full .ck-menu__bar > .ck-menu__panel-inner.ck-edit-mega {
	left: 50% !important; right: auto !important; width: 100vw !important; margin-left: -50vw !important;
	border-radius: var(--ck-menu-panel-radius, 0);
}

/* --- Panneau coulissant : OFF-CANVAS fixe (vrai rendu) + voile --- */
.elementor-editor-active .ck-menu.ck-edit-slide-open::after {
	content: ""; position: fixed; inset: 0; z-index: 99990; background: var(--ck-menu-overlay);
}
.elementor-editor-active .ck-menu__bar > .ck-menu__panel-inner.ck-edit-slide {
	display: block !important;
	position: fixed; z-index: 99991; overflow: auto; padding: var(--ck-menu-panel-pad);
	background: var(--ck-menu-panel-bg); box-shadow: 0 0 60px rgba(11, 23, 38, .25);
}
/* Édition du panneau latéral mobile : fond/marge DÉDIÉS (comme sur le site). */
.elementor-editor-active .ck-menu__bar > .ck-menu__panel-inner.ck-edit-drawer {
	background: var(--ck-menu-drawer-panel-bg, var(--ck-menu-panel-bg));
	padding: var(--ck-menu-drawer-pad, var(--ck-menu-panel-pad));
}
.elementor-editor-active .ck-edit-slide.ck-edit-dir-right  { top: 0; right: 0; height: 100% !important; width: var(--ck-menu-slide-size) !important; max-width: 100vw; }
.elementor-editor-active .ck-edit-slide.ck-edit-dir-left   { top: 0; left: 0;  height: 100% !important; width: var(--ck-menu-slide-size) !important; max-width: 100vw; }
.elementor-editor-active .ck-edit-slide.ck-edit-dir-top    { top: 0; left: 0;  width: 100% !important; height: var(--ck-menu-slide-size) !important; max-height: 100vh; }
.elementor-editor-active .ck-edit-slide.ck-edit-dir-bottom { bottom: 0; left: 0; width: 100% !important; height: var(--ck-menu-slide-size) !important; max-height: 100vh; }
.elementor-editor-active .ck-edit-slide.ck-edit-dir-full   { inset: 0; width: 100% !important; height: 100% !important; }
/* Zone mobile en édition : dimensionnée par la largeur du tiroir (pas slide-size). */
.elementor-editor-active .ck-edit-slide.ck-edit-drawer.ck-edit-dir-right,
.elementor-editor-active .ck-edit-slide.ck-edit-drawer.ck-edit-dir-left { width: var(--ck-menu-drawer-size) !important; }
.elementor-editor-active .ck-edit-slide.ck-edit-drawer.ck-edit-dir-top,
.elementor-editor-active .ck-edit-slide.ck-edit-drawer.ck-edit-dir-bottom { height: var(--ck-menu-drawer-size) !important; }

/* Fermeture en édition : la vraie UX, c'est de cliquer EN DEHORS du menu (voile
 * pour les slides, clic hors panneau pour les mégas). On garde en plus une petite
 * croix discrète en haut à droite comme repli. Fixe pour les slides. */
.elementor-editor-active .ck-menu__edit-close {
	position: absolute; top: var(--ck-menu-close-top); right: var(--ck-menu-close-right); z-index: 100002;
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--ck-menu-close-box); height: var(--ck-menu-close-box); padding: 0; margin: 0;
	line-height: 0; color: var(--ck-menu-close-color) !important;
	background: var(--ck-menu-close-bg) !important; border: 0 !important;
	border-radius: var(--ck-menu-close-radius);
	box-shadow: none !important; cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.elementor-editor-active .ck-menu__edit-close svg { width: var(--ck-menu-close-size); height: var(--ck-menu-close-size); }
.elementor-editor-active .ck-menu__edit-close:hover {
	background: var(--ck-menu-close-bg-h, var(--ck-menu-close-bg)) !important;
	color: var(--ck-menu-close-color-h, var(--ck-menu-close-color)) !important;
}