@charset "UTF-8";
/* Menu Elsa Clemente
   ==========================================================================
   Mega-menu desktop, bouton de reservation, panneau mobile plein ecran.

   Le balisage est celui de Divi : ce fichier ne fait que le remettre en page.
   Toutes les animations n'utilisent que `transform` et `opacity`, les deux
   seules proprietes que le navigateur peut composer sans repasser par la mise
   en page ni par la peinture. Aucune ne declenche de reflow.

   Sommaire
     1. Variables
     2. Garde anti-scintillement
     3. Header : defilement, barre de progression
     4. Items de navigation
     5. Mega-menu
     6. Bouton de reservation et icone compte
     7. Menu mobile
     8. Accessibilite et mouvement reduit
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */

:root {
	--ec-nav-brand: #10069f;
	--ec-nav-brand-soft: rgba(16, 6, 159, .06);
	--ec-nav-brand-line: rgba(16, 6, 159, .10);
	/* #f2782e est la couleur reellement rendue par les boutons du site et par
	   le bandeau de contact (mesuree sur la page d'accueil). Le theme enfant
	   declare #fe782e dans tokens.css, mais ce n'est pas ce que voit le
	   visiteur : le menu s'aligne sur l'existant. */
	--ec-nav-accent: #f2782e;
	--ec-nav-accent-dark: #dd651c;
	--ec-nav-ink: #3a3f4a;
	--ec-nav-muted: #7a7f8a;

	/* Le bandeau secondaire orange est masque (voir section 3) : plus rien a
	   compenser en haut du header. La variable est conservee pour que le
	   retablir ne demande qu'une valeur a changer ici et la regle de masquage
	   a retirer. */
	--ec-nav-topbar: 0px;

	/* Courbe unique pour tout le menu : demarrage franc, arrivee amortie. */
	--ec-ease: cubic-bezier(.22, 1, .36, 1);

	/* Progression de lecture, mise a jour par le JS. */
	--ec-progress: 0;

	/* Position du curseur dans le mega-menu, mise a jour par le JS. */
	--ec-mx: 50%;
	--ec-my: 0%;
}

/* 2. Garde anti-scintillement --------------------------------------------- */

/* `ec-menu-init` est presente dans le HTML servi et retiree par le JS au
   premier frame utile. Elle coupe toutes les transitions du header pendant le
   rendu initial : sans elle, le panneau du mega-menu et le menu mobile
   joueraient leur animation d'ouverture au chargement de la page. */
.ec-menu-init #main-header,
.ec-menu-init #top-header,
.ec-menu-init #top-menu .sub-menu,
.ec-menu-init #mobile_menu,
.ec-menu-init #mobile_menu li {
	transition: none !important;
	animation: none !important;
}

/* 3. Header ---------------------------------------------------------------- */

/* Bandeau secondaire orange : masque.
   Il occupait 36 px en permanence pour un telephone, un courriel et un panier.
   Le telephone est repris dans le pied du mega-menu, le panier est remonte
   dans le header a cote du compte, et le courriel reste au pied de page.
   Divi decale le header vers le bas tant que ce bandeau est declare
   (`et_secondary_nav_enabled`) : le `top` doit donc etre repris, et il faut
   deux identifiants pour passer devant `body.et_fixed_nav.et_secondary_nav_enabled #main-header`. */
.ec-menu #top-header {
	display: none;
}

.ec-menu #page-container #main-header {
	top: 0;
}

.ec-menu.admin-bar #page-container #main-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.ec-menu.admin-bar #page-container #main-header {
		top: 46px;
	}
}

.ec-menu #main-header {
	background-color: #fff;
	box-shadow: 0 1px 0 var(--ec-nav-brand-line);
	transition:
		transform .5s var(--ec-ease),
		background-color .35s ease,
		box-shadow .35s ease,
		backdrop-filter .35s ease;
	will-change: transform;
}

.ec-menu #top-header {
	transition: transform .5s var(--ec-ease);
	will-change: transform;
}

/* Page defilee : le bandeau de contact se retracte, le header prend sa place.
   36 px d'espace vertical rendus au contenu, sans que le header ne bouge a
   l'ecran. Le fond passe en verre depoli. */
.ec-menu.ec-scrolled #top-header {
	transform: translateY(-100%);
}

.ec-menu.ec-scrolled #main-header {
	transform: translateY(calc(-1 * var(--ec-nav-topbar)));
	background-color: rgba(255, 255, 255, .85);
	box-shadow: 0 6px 28px -14px rgba(16, 6, 159, .30);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.ec-menu.ec-scrolled #main-header {
		-webkit-backdrop-filter: blur(16px) saturate(180%);
		backdrop-filter: blur(16px) saturate(180%);
	}
}

/* Defilement vers le bas : le header s'efface. Il revient des que l'on
   remonte. Neutralise tant qu'un panneau est ouvert. */
.ec-menu.ec-scrolled.ec-nav-up #main-header {
	transform: translateY(-100px);
}

/* Un panneau ouvert fige le header : il ne doit pas se derober sous le
   curseur. La regle reprend `ec-scrolled` et `ec-nav-up` pour passer devant
   celle qui l'escamote — et pour ne rien deplacer du tout en haut de page,
   ou aucune de ces classes n'est presente. */
.ec-menu.ec-scrolled.ec-nav-up.ec-nav-open #main-header,
.ec-menu.ec-scrolled.ec-nav-up.ec-mobile-open #main-header {
	transform: translateY(calc(-1 * var(--ec-nav-topbar)));
}

/* Panneau mobile ouvert : le header reprend son etat de haut de page.
   Ce n'est pas qu'une question d'allure. Un ancetre porteur d'un `transform`
   ou d'un `will-change: transform` devient le referent des positions fixes de
   ses descendants : tant que le header en a un, le panneau mobile qu'il
   contient ne peut pas couvrir l'ecran, il reste enferme dans le header.
   Les annuler ici rend au panneau le viewport comme reference — et remonte au
   passage le telephone et le courriel, utiles precisement quand le menu est
   ouvert. */
.ec-menu.ec-mobile-open #main-header {
	transform: none;
	will-change: auto;
}

.ec-menu.ec-mobile-open #top-header {
	transform: none;
}

/* Barre de progression de lecture, collee sous le header. */
.ec-menu #main-header::after {
	content: "";
	position: absolute;
	inset: auto 0 -2px 0;
	height: 2px;
	background: linear-gradient(90deg, var(--ec-nav-brand), var(--ec-nav-accent));
	transform: scaleX(var(--ec-progress));
	transform-origin: 0 50%;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.ec-menu.ec-scrolled #main-header::after {
	opacity: 1;
}

/* 4. Items de navigation --------------------------------------------------- */

/* Divi met `line-height:0` sur la liste et `inline-block` sur les items pour
   son alignement historique. Le passage en flex donne un alignement vertical
   fiable et surtout la propriete `order`, qui sert a renvoyer « Mon compte »
   et le bouton de reservation en fin de barre sans toucher a l'ordre du menu
   dans l'administration. */
.ec-menu #top-menu-nav,
.ec-menu #top-menu {
	line-height: normal;
}

/* Divi construit la hauteur du header en empilant un rembourrage haut sur la
   barre et un rembourrage bas de 30 px sous chaque lien. Ce montage ne permet
   pas de centrer un bouton : la hauteur est donc reprise sur la liste
   elle-meme, ce qui centre tout son contenu d'un coup.
   74 px au repos et 56 px une fois le header fige : les memes valeurs qu'avant
   cette refonte, pour ne pas decaler la page ni fausser les mesures que Divi
   fait en JavaScript pour son header fige. */
/* Le CSS du personnalisateur Divi est mis en file apres celui-ci et impose
   `padding:30px 0 0 0`. Deux identifiants dans le selecteur reglent la
   question quel que soit l'ordre des feuilles. */
.ec-menu #main-header #et-top-navigation {
	padding-top: 0;
}

.ec-menu #et-top-navigation #top-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 74px;
	transition: height .35s var(--ec-ease);
}

.ec-menu .et-fixed-header #et-top-navigation #top-menu {
	height: 56px;
}

.ec-menu #top-menu > li {
	display: block;
	padding-right: 0;
}

/* Deux identifiants dans le selecteur : c'est le minimum pour passer devant
   `.et_header_style_left #et-top-navigation nav>ul>li>a`, qui impose le
   rembourrage bas de 30 px.
   `:not(.ec-cta)` est indispensable : le bouton de reservation est lui aussi
   un lien enfant direct d'un `li` de `#top-menu`, et sans cette exclusion il
   heriterait de la couleur, du rembourrage et du soulignement des entrees de
   menu — ce qui le repeignait en bleu au survol. */
.ec-menu #et-top-navigation #top-menu > li > a:not(.ec-cta) {
	position: relative;
	display: block;
	padding: 9px 13px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ec-nav-brand);
	letter-spacing: -.005em;
	background: none;
	transition: color .25s ease;
}

.ec-menu #et-top-navigation #top-menu > li > a:not(.ec-cta):hover {
	opacity: 1;
	background: none;
	color: var(--ec-nav-brand);
}

/* Soulignement qui s'ouvre depuis le centre, seule marque du survol.
   `scaleX` seul : aucun calcul de mise en page, l'animation tient sur le
   compositeur. */
.ec-menu #top-menu > li > a:not(.ec-cta)::before {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ec-nav-brand), var(--ec-nav-accent));
	transform: scaleX(0);
	transition: transform .4s var(--ec-ease);
}

.ec-menu #top-menu > li > a:not(.ec-cta):hover::before,
.ec-menu #top-menu > li.ec-open > a:not(.ec-cta)::before {
	transform: scaleX(1);
}

/* Page courante : soulignement permanent, en orange. */
.ec-menu #top-menu > li.current-menu-item > a:not(.ec-cta)::before,
.ec-menu #top-menu > li.current-menu-ancestor > a:not(.ec-cta)::before,
.ec-menu #top-menu > li.current_page_item > a:not(.ec-cta)::before {
	background: var(--ec-nav-accent);
	transform: scaleX(1);
}

/* Chevron du mega-menu.
   Le glyphe de la police d'icones de Divi est masque au profit d'un SVG pose
   par PHP : trace net a toutes les tailles, et rotation franche de 180 degres
   a l'ouverture — vers le bas quand le panneau est ferme, vers le haut quand
   il est ouvert. */
.ec-menu #top-menu .menu-item-has-children > a:first-child::after {
	display: none;
}

.ec-menu #et-top-navigation #top-menu > li.menu-item-has-children > a:first-child {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-right: 11px;
}

.ec-menu .ec-chevron {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	opacity: .5;
	transition: transform .42s var(--ec-ease), opacity .25s ease;
}

.ec-menu #top-menu > li.ec-open > a .ec-chevron {
	transform: rotate(180deg);
	opacity: 1;
}

/* 5. Mega-menu ------------------------------------------------------------- */

/* `static` sort l'item du positionnement : le panneau se cale alors sur
   `.container`, donc sur toute la largeur utile du header et non sur la
   largeur du mot « Services ». */
.ec-menu #top-menu > li.ec-mega {
	position: static;
}

.ec-menu #top-menu > li.ec-mega > .sub-menu {
	display: grid;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	width: auto;
	max-width: none;

	/* Le panneau epouse la largeur du header, mais son contenu reste dans une
	   colonne lisible : au-dela de 1180 px le surplus part en rembourrage
	   lateral, ce qui recentre le contenu sans wrapper supplementaire.
	   Necessaire parce que le header du site peut etre regle en pleine largeur
	   (classe `et_fullwidth_nav`), auquel cas des colonnes etirees sur
	   1400 px deviendraient illisibles. */
	padding: 34px max(34px, (100% - 1180px) / 2) 30px;
	gap: 8px 26px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--ec-nav-brand-line);
	border-top: 0;
	border-radius: 20px;
	box-shadow: 0 30px 70px -28px rgba(16, 6, 159, .38), 0 2px 8px -4px rgba(16, 6, 159, .12);

	/* Etat ferme. `visibility` coupe le focus clavier et le survol ; opacity et
	   transform portent l'animation. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-12px) scale(.985);
	transform-origin: 50% 0;
	pointer-events: none;
	transition:
		opacity .38s var(--ec-ease),
		transform .48s var(--ec-ease),
		visibility 0s linear .48s;
	overflow: hidden;
}

.ec-menu #top-menu > li.ec-mega.ec-open > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition:
		opacity .34s var(--ec-ease),
		transform .52s var(--ec-ease),
		visibility 0s linear 0s;
}

/* Divi ouvre ses sous-menus au survol via `.nav li:hover > ul`. Le mega-menu
   est pilote par la classe `ec-open` posee par le JS apres un court delai
   d'intention : cette regle desarme l'ouverture immediate de Divi. */
.ec-menu #top-menu > li.ec-mega:hover > .sub-menu,
.ec-menu #top-menu > li.ec-mega.et-hover > .sub-menu,
.ec-menu #top-menu > li.ec-mega.et-touch-hover > .sub-menu {
	visibility: hidden;
	opacity: 0;
}

.ec-menu #top-menu > li.ec-mega.ec-open:hover > .sub-menu,
.ec-menu #top-menu > li.ec-mega.ec-open.et-hover > .sub-menu,
.ec-menu #top-menu > li.ec-mega.ec-open.et-touch-hover > .sub-menu {
	visibility: visible;
	opacity: 1;
}

/* Halo qui suit le curseur dans le panneau.
   Un seul degrade radial dont le centre est deux variables CSS : le JS n'ecrit
   que deux nombres par image, il ne touche jamais au DOM et le panneau n'est
   ni remis en page ni repeint. */
.ec-menu #top-menu > li.ec-mega > .sub-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		420px circle at var(--ec-mx) var(--ec-my),
		rgba(242, 120, 46, .10),
		rgba(242, 120, 46, 0) 62%
	);
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}

.ec-menu #top-menu > li.ec-mega.ec-open > .sub-menu::before {
	opacity: 1;
}

/* Voile de page.
   Quand le panneau s'ouvre, le reste de la page passe en retrait : legerement
   assombrie au bleu de la marque et floutee. L'oeil n'a plus qu'un endroit ou
   aller.
   C'est un pseudo-element du corps de page, donc zero balise ajoutee. Il se
   glisse entre le contenu (empilement courant) et le header, qui monte a
   99999 : le panneau, qui vit dans le header, reste net au-dessus du voile.
   `visibility` est indispensable a l'etat ferme — une couche transparente mais
   rendue ferait quand meme calculer le flou a chaque image. */
body.ec-menu::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(16, 6, 159, 0);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .42s var(--ec-ease),
		background-color .42s var(--ec-ease),
		backdrop-filter .42s var(--ec-ease),
		visibility 0s linear .42s;
}

body.ec-menu.ec-nav-open::after {
	background: rgba(16, 6, 159, .17);
	-webkit-backdrop-filter: blur(7px) saturate(115%);
	backdrop-filter: blur(7px) saturate(115%);
	opacity: 1;
	visibility: visible;
	transition:
		opacity .42s var(--ec-ease),
		background-color .42s var(--ec-ease),
		backdrop-filter .42s var(--ec-ease),
		visibility 0s linear 0s;
}

/* Sous 980 px le mega-menu n'existe pas : le panneau mobile couvre deja
   l'ecran, un voile en plus ne serait que du calcul perdu. */
@media only screen and (max-width: 980px) {
	body.ec-menu::after {
		display: none;
	}
}

/* Colonnes : 3 piliers plus la carte de reservation. Le nombre de piliers
   vient d'une classe posee cote serveur, la mise en page suit l'ajout ou le
   retrait d'un pilier sans retouche. */
.ec-menu #top-menu > li.ec-mega > .sub-menu {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ec-menu #top-menu > li.ec-mega-2col > .sub-menu {
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(230px, 290px);
}

.ec-menu #top-menu > li.ec-mega-3col > .sub-menu {
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(230px, 290px);
}

.ec-menu #top-menu > li.ec-mega-4col > .sub-menu {
	grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 260px);
}

/* Entree en cascade des colonnes. Le decalage est porte par
   `transition-delay`, pas par une animation : rien ne tourne quand le panneau
   est ferme. */
.ec-menu #top-menu > li.ec-mega > .sub-menu > li {
	position: relative;
	width: auto;
	padding: 0;
	margin: 0;
	float: none;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .4s ease, transform .55s var(--ec-ease);
}

.ec-menu #top-menu > li.ec-mega.ec-open > .sub-menu > li {
	opacity: 1;
	transform: translateY(0);
}

.ec-menu #top-menu > li.ec-mega.ec-open > .sub-menu > li:nth-child(1) { transition-delay: .06s; }
.ec-menu #top-menu > li.ec-mega.ec-open > .sub-menu > li:nth-child(2) { transition-delay: .11s; }
.ec-menu #top-menu > li.ec-mega.ec-open > .sub-menu > li:nth-child(3) { transition-delay: .16s; }
.ec-menu #top-menu > li.ec-mega.ec-open > .sub-menu > li:nth-child(4) { transition-delay: .21s; }
.ec-menu #top-menu > li.ec-mega.ec-open > .sub-menu > li:nth-child(5) { transition-delay: .26s; }

/* Titre de colonne : la page pilier reste cliquable. Le filet orange sous le
   titre donne son assise a la colonne — sans lui, titre, accroche et liste
   flottent les uns sous les autres sans hierarchie lisible. */
.ec-menu #top-menu > li.ec-mega > .sub-menu > li:not(.ec-mega-foot) > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: auto;
	padding: 0 0 9px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ec-nav-brand);
	background: none;
	border-bottom: 0;
	transition: color .25s ease;
}

.ec-menu #top-menu > li.ec-mega > .sub-menu > li:not(.ec-mega-foot) > a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--ec-nav-accent);
	transition: width .4s var(--ec-ease);
}

.ec-menu #top-menu > li.ec-mega > .sub-menu > li:not(.ec-mega-foot) > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--ec-nav-accent);
	border-right: 2px solid var(--ec-nav-accent);
	transform: rotate(45deg) translateX(-3px);
	opacity: 0;
	transition: transform .35s var(--ec-ease), opacity .25s ease;
}

.ec-menu #top-menu > li.ec-mega > .sub-menu > li:not(.ec-mega-foot) > a:hover {
	background: none;
	opacity: 1;
	color: var(--ec-nav-accent);
}

.ec-menu #top-menu > li.ec-mega > .sub-menu > li:not(.ec-mega-foot) > a:hover::before {
	width: 100%;
}

.ec-menu #top-menu > li.ec-mega > .sub-menu > li:not(.ec-mega-foot) > a:hover::after {
	opacity: 1;
	transform: rotate(45deg) translateX(0);
}

/* Accroche de colonne, produite par le walker. */
/* `min-height` cale le depart des listes sur la meme ligne d'une colonne a
   l'autre, quel que soit le nombre de lignes de l'accroche. Trois lignes a
   12.5 px et 1.5 d'interligne, soit 56 px. */
.ec-menu .ec-mega-blurb {
	margin: 6px 0 12px;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.5;
	min-height: 38px;
	font-weight: 400;
	color: var(--ec-nav-muted);
	max-width: 25ch;
}

/* Sous-sous-menus : deplies a plat dans la colonne. C'est tout l'objet du
   mega-menu, il n'y a plus de second niveau a survoler. */
.ec-menu #top-menu > li.ec-mega > .sub-menu ul.sub-menu {
	display: block;
	position: static;
	width: auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	visibility: visible;
	opacity: 1;
	transform: none;
	animation: none;
	transition: none;
	pointer-events: auto;
}

.ec-menu #top-menu > li.ec-mega > .sub-menu ul.sub-menu > li {
	position: relative;
	width: auto;
	padding: 0;
	margin: 0;
	float: none;
	line-height: normal;
}

/* Le chevron gris pose devant chaque entree est la clef de la lisibilite du
   panneau au repos : sans lui, les listes ne sont qu'une suite de mots poses
   dans du blanc, sans point d'accroche pour l'oeil. Il est present en
   permanence, discret, et ne fait que changer de couleur et avancer au
   survol. Le fond, lui, n'apparait qu'au survol. */
.ec-menu #top-menu > li.ec-mega > .sub-menu ul.sub-menu > li > a {
	position: relative;
	display: block;
	width: auto;
	padding: 7px 10px 7px 22px;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ec-nav-ink);
	background: none;
	transition: color .22s ease;
}

/* Fond au survol pose en pseudo-element : un `transform` sur une couche
   dediee coute moins cher qu'une transition de `background-color` sur le lien
   lui-meme. */
.ec-menu #top-menu > li.ec-mega > .sub-menu ul.sub-menu > li > a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9px;
	background: var(--ec-nav-brand-soft);
	transform: scaleX(.4);
	transform-origin: 0 50%;
	opacity: 0;
	transition: transform .38s var(--ec-ease), opacity .25s ease;
	z-index: -1;
}

/* Chevron permanent. */
.ec-menu #top-menu > li.ec-mega > .sub-menu ul.sub-menu > li > a::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-top: 1.6px solid currentColor;
	border-right: 1.6px solid currentColor;
	border-radius: 1px;
	color: rgba(16, 6, 159, .28);
	transform: rotate(45deg);
	transition: transform .34s var(--ec-ease), color .22s ease;
}

.ec-menu #top-menu > li.ec-mega > .sub-menu ul.sub-menu > li > a:hover {
	opacity: 1;
	background: none;
	color: var(--ec-nav-brand);
}

.ec-menu #top-menu > li.ec-mega > .sub-menu ul.sub-menu > li > a:hover::before {
	opacity: 1;
	transform: scaleX(1);
}

.ec-menu #top-menu > li.ec-mega > .sub-menu ul.sub-menu > li > a:hover::after {
	color: var(--ec-nav-accent);
	transform: rotate(45deg) translate(2px, -2px);
}

/* Page courante dans le mega-menu. */
.ec-menu #top-menu > li.ec-mega .sub-menu li.current-menu-item > a {
	color: var(--ec-nav-brand);
	font-weight: 700;
}

.ec-menu #top-menu > li.ec-mega .sub-menu li.current-menu-item > a::before {
	opacity: 1;
	transform: scaleX(1);
}

/* Carte de reservation, derniere colonne.
   Etiree sur toute la hauteur du panneau : c'est elle qui rattrape le vide
   laisse par les colonnes courtes, et le visage en haut donne au panneau le
   point d'ancrage qui lui manquait. */
.ec-menu .ec-mega-card {
	align-self: stretch;
}

/* Contenu centre : le portrait est centre, un texte cale a gauche a cote de
   lui donnerait un bloc bancal. */
.ec-menu .ec-navcard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	padding: 20px 18px;
	text-align: center;
	border-radius: 16px;
	background: linear-gradient(150deg, #10069f 0%, #2a1ad4 55%, #3b23e6 100%);
	overflow: hidden;
	isolation: isolate;
}

/* Voile lumineux, decale au survol. Purement decoratif. */
.ec-menu .ec-navcard::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -40%;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(242, 120, 46, .5), rgba(242, 120, 46, 0) 68%);
	transform: translate3d(0, 0, 0);
	transition: transform .8s var(--ec-ease);
	pointer-events: none;
	z-index: -1;
}

.ec-menu .ec-navcard:hover::before {
	transform: translate3d(-22px, 22px, 0) scale(1.15);
}

/* Portrait.
   Le disque blanc est dessine ici, plus petit que l'image : le portrait est
   detoure, la tete et le haut des bras debordent donc du disque au lieu d'y
   etre enfermes. C'est ce debordement qui donne sa presence a la carte, une
   photo sagement inscrite dans un rond n'accroche pas l'oeil de la meme
   facon. */
.ec-menu .ec-navcard-photo {
	position: relative;
	display: block;
	width: 100%;
	height: 112px;
	margin: 0 0 10px;
}

.ec-menu .ec-navcard-photo::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 86px;
	height: 86px;
	margin-left: -43px;
	border-radius: 50%;
	background: #fff;
}

.ec-menu .ec-navcard-photo img {
	position: relative;
	display: block;
	width: auto;
	height: 112px;
	margin: 0 auto;
}

.ec-menu .ec-navcard-name {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.ec-menu .ec-navcard-role {
	margin-top: 2px;
	margin-bottom: 12px;
	font-size: 11px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .66);
}

.ec-menu .ec-navcard-title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.ec-menu .ec-navcard-text {
	margin: 0 0 16px;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .74);
}

/* `#top-menu li li a` impose `width:200px` a tout lien de sous-menu : le
   bouton de la carte doit reprendre une largeur libre pour tenir sur une
   ligne. */
.ec-menu #top-menu .ec-navcard-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	margin-top: auto;
	padding: 11px 17px;
	border-radius: 999px;
	background: var(--ec-nav-accent);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .55);
	transition: background-color .25s ease, transform .35s var(--ec-ease);
}

.ec-menu #top-menu .ec-navcard-link:hover {
	background: var(--ec-nav-accent-dark);
	transform: translateY(-2px);
}

/* Les deux boutons pleins restent blancs sur orange, quel que soit l'etat.
   Le `!important` n'est pas un raccourci : le personnalisateur Divi emet
   `.et-fixed-header #top-menu a{color:#10069f!important}` des que le header se
   fige au defilement, et repeignait donc les deux boutons en bleu sur orange
   des les premiers pixels de scroll. Seule une declaration prioritaire de
   specificite superieure peut lui repondre. */
.ec-menu #main-header #top-menu a.ec-cta,
.ec-menu #main-header #top-menu a.ec-cta:link,
.ec-menu #main-header #top-menu a.ec-cta:visited,
.ec-menu #main-header #top-menu a.ec-cta:hover,
.ec-menu #main-header #top-menu a.ec-cta:focus,
.ec-menu #main-header #top-menu a.ec-cta:active,
.ec-menu #main-header #top-menu a.ec-navcard-link,
.ec-menu #main-header #top-menu a.ec-navcard-link:link,
.ec-menu #main-header #top-menu a.ec-navcard-link:visited,
.ec-menu #main-header #top-menu a.ec-navcard-link:hover,
.ec-menu #main-header #top-menu a.ec-navcard-link:focus,
.ec-menu #main-header #top-menu a.ec-navcard-link:active,
.ec-menu #main-header.et-fixed-header #top-menu a.ec-cta,
.ec-menu #main-header.et-fixed-header #top-menu a.ec-navcard-link {
	color: #fff !important;
	opacity: 1;
}

.ec-menu .ec-navcard-arrow {
	flex: none;
	width: 6px;
	height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .35s var(--ec-ease);
}

.ec-menu .ec-navcard-link:hover .ec-navcard-arrow {
	transform: rotate(45deg) translate(2px, -2px);
}

/* Pied du panneau : lieux couverts et telephone.
   Il occupe toute la largeur de la grille et ferme le bloc par un filet — un
   panneau qui s'arrete sur du blanc parait inacheve. */
/* Le selecteur reprend toute la chaine : `#top-menu li{display:inline-block}`
   de Divi l'emporterait sinon, et le pied resterait en bloc avec ses deux
   mentions collees a gauche. */
.ec-menu #top-menu > li.ec-mega > .sub-menu > li.ec-mega-foot {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 22px;
	width: auto;
	margin-top: 22px;
	padding-top: 15px;
	border-top: 1px solid var(--ec-nav-brand-line);
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ec-nav-muted);
}

.ec-menu .ec-foot-places,
.ec-menu #top-menu .ec-mega-foot .ec-foot-phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: auto;
	padding: 0;
	font-size: 12.5px;
	font-weight: 500;
	background: none;
}

.ec-menu .ec-foot-places {
	color: var(--ec-nav-muted);
}

.ec-menu #top-menu .ec-mega-foot .ec-foot-phone {
	font-weight: 700;
	color: var(--ec-nav-brand);
	transition: color .22s ease;
}

.ec-menu #top-menu .ec-mega-foot .ec-foot-phone:hover {
	opacity: 1;
	color: var(--ec-nav-accent);
}

.ec-menu .ec-mega-foot .ec-icon {
	flex: none;
	width: 15px;
	height: 15px;
	opacity: .75;
}

/* 6. Bouton de reservation et icone compte --------------------------------- */

/* `order` remet les deux elements utilitaires en fin de barre quelle que soit
   leur place dans l'administration des menus. */
.ec-menu #top-menu > li.ec-nav-account { order: 90; margin-left: 4px; }
.ec-menu #top-menu > li.ec-nav-cart    { order: 91; margin-left: 2px; }
.ec-menu #top-menu > li.ec-cta-item    { order: 100; margin-left: 8px; }

/* Compteur du panier : affiche uniquement a partir d'un article, PHP ne
   produit rien quand le panier est vide. */
.ec-menu #top-menu > li.ec-nav-cart > a {
	overflow: visible;
}

.ec-menu .ec-cart-count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--ec-nav-accent);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	color: #fff;
	box-shadow: 0 0 0 2px #fff;
}

/* Compte : le libelle cede la place a une icone SVG posee par PHP, dans une
   pastille ronde. Le soulignement des entrees de menu n'a pas de sens sur une
   pastille, il est neutralise. */
.ec-menu #et-top-navigation #top-menu > li.ec-nav-icon > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--ec-nav-brand-line);
	color: var(--ec-nav-brand);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .35s var(--ec-ease);
}

.ec-menu #top-menu > li.ec-nav-icon > a::before {
	display: none;
}

.ec-menu #top-menu > li.ec-nav-icon .ec-icon {
	width: 19px;
	height: 19px;
}

/* Le libelle reste dans le balisage : invisible a l'oeil sur grand ecran,
   toujours annonce par les lecteurs d'ecran. */
.ec-menu #top-menu > li.ec-nav-icon .ec-account-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ec-menu #et-top-navigation #top-menu > li.ec-nav-icon > a:hover {
	background-color: var(--ec-nav-brand);
	border-color: var(--ec-nav-brand);
	color: #fff;
	transform: translateY(-1px);
}

.ec-menu #et-top-navigation #top-menu > li.ec-nav-icon.current-menu-item > a {
	background-color: var(--ec-nav-brand-soft);
}

/* Bouton de reservation.
   La forme reprend celle des boutons du site : pilule pleine, orange #f2782e,
   texte blanc. Les deux identifiants du premier selecteur lui evitent de se
   faire rehabiller par les regles des entrees de menu. */
.ec-menu #et-top-navigation #top-menu > li > a.ec-cta,
.ec-menu #et-top-navigation .ec-cta,
.ec-menu .ec-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 11px 21px;
	border: 0;
	border-radius: 999px;
	background: var(--ec-nav-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	box-shadow: 0 6px 18px -8px rgba(242, 120, 46, .85);
	transition: transform .35s var(--ec-ease), box-shadow .35s ease, background-color .25s ease;
}

.ec-menu #et-top-navigation #top-menu > li > a.ec-cta:hover,
.ec-menu .ec-cta:hover {
	color: #fff;
	opacity: 1;
	background: var(--ec-nav-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px rgba(242, 120, 46, .95);
}

.ec-menu .ec-cta:active {
	transform: translateY(0);
}

/* Reflet qui traverse le bouton au survol.
   Il se place au-dessus du fond mais sous le libelle : d'ou le `z-index:0`
   ici et la remontee du `span` juste apres. Un `z-index:-1` l'enverrait
   derriere le fond du bouton, ou il ne se verrait pas. */
.ec-menu .ec-cta::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 45%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
	transform: translateX(-160%) skewX(-18deg);
	pointer-events: none;
	z-index: 0;
}

.ec-menu .ec-cta-label {
	position: relative;
	z-index: 1;
}

.ec-menu .ec-cta:hover::before {
	transform: translateX(320%) skewX(-18deg);
	transition: transform .85s var(--ec-ease);
}

/* Barre etroite : le libelle du bouton se raccourcit avant de deborder. */
@media only screen and (min-width: 981px) and (max-width: 1180px) {
	.ec-menu #et-top-navigation #top-menu { gap: 0; }
	.ec-menu #et-top-navigation #top-menu > li > a { padding-left: 9px; padding-right: 9px; font-size: 14px; }
	.ec-menu #et-top-navigation #top-menu > li.menu-item-has-children > a:first-child { padding-right: 27px; }
	.ec-menu #top-menu > li.menu-item-has-children > a:first-child::after { right: 9px; }
	.ec-menu #top-menu > li > a::before { left: 9px; right: 9px; }
	.ec-menu #et-top-navigation .ec-cta { padding: 10px 15px; font-size: 13px; }
}

/* 7. Menu mobile ----------------------------------------------------------- */

@media only screen and (max-width: 980px) {

	/* Divi masque le menu principal sous 980 px avec `#top-menu{display:none}`.
	   Les regles de mise en page du bureau portent deux identifiants et
	   passeraient devant : il faut le remasquer explicitement, sans quoi le
	   menu du bureau reste dans le flux et gonfle le header mobile. */
	.ec-menu #et-top-navigation #top-menu {
		display: none;
	}

	/* Header mobile : une seule rangee, logo a gauche, burger a droite. */
	.ec-menu #main-header #et-top-navigation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 64px;
	}

	.ec-menu #main-header .et-fixed-header #et-top-navigation,
	.ec-menu #main-header.et-fixed-header #et-top-navigation {
		height: 56px;
	}

	.ec-menu #main-header #et_mobile_nav_menu {
		float: none;
		margin: 0;
	}

	/* Burger : deux barres dessinees qui se croisent. L'icone ETmodules de
	   Divi est masquee, on ne charge donc plus rien pour elle. */
	.ec-menu .mobile_menu_bar::before,
	.ec-menu .mobile_menu_bar::after {
		display: none;
	}

	.ec-menu #main-header #et-top-navigation .mobile_menu_bar {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		width: auto;
		height: 40px;
		padding: 0;
		cursor: pointer;
	}

	/* Le mot rend le geste explicite. Il est cale a droite, contre les barres,
	   et prend la couleur du panneau une fois celui-ci ouvert. */
	.ec-menu .ec-burger-label {
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .04em;
		line-height: 1;
		color: var(--ec-nav-brand);
		transition: color .3s ease;
	}

	.ec-menu .mobile_nav.opened .ec-burger-label,
	.ec-menu .mobile_nav.ec-closing .ec-burger-label {
		color: #fff;
	}

	.ec-menu .ec-burger-bars {
		position: relative;
		display: block;
		width: 22px;
		height: 16px;
	}

	.ec-menu .ec-burger-line {
		position: absolute;
		left: 0;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: var(--ec-nav-brand);
		transition: transform .45s var(--ec-ease), background-color .3s ease;
	}

	.ec-menu .ec-burger-line:nth-child(1) { top: 4px; }
	.ec-menu .ec-burger-line:nth-child(2) { top: 11px; }

	.ec-menu .mobile_nav.opened .ec-burger-line:nth-child(1) {
		transform: translateY(3.5px) rotate(45deg);
	}

	.ec-menu .mobile_nav.opened .ec-burger-line:nth-child(2) {
		transform: translateY(-3.5px) rotate(-45deg);
	}

	/* Panneau plein ecran. Divi bascule `display` en style inline : on ne
	   touche pas a cette propriete, l'animation passe par opacity/transform. */
	.ec-menu #mobile_menu.et_mobile_menu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: none;
		padding: calc(var(--ec-nav-header-h, 74px) + 14px) 22px calc(22px + env(safe-area-inset-bottom));
		margin: 0;
		background: var(--ec-nav-brand);
		border: 0;
		border-top: 0;
		border-radius: 0;
		box-shadow: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		z-index: 1;
		opacity: 0;
		transform: translateY(-10px);
		transition: opacity .3s ease, transform .45s var(--ec-ease);
	}

	.ec-menu .mobile_nav.opened #mobile_menu.et_mobile_menu {
		opacity: 1;
		transform: translateY(0);
	}

	/* Divi ouvre et ferme le menu mobile avec un `slideDown`/`slideUp` jQuery,
	   qui anime la hauteur depuis zero en ecrivant height, padding, margin et
	   overflow en style inline pendant toute l'animation. Sur un panneau
	   pleine page cela donne un deroulement d'une seconde, et le rembourrage
	   qui degage le header est ecrase au passage.
	   Ces `!important` reprennent la main sur ces styles inline : la hauteur
	   reste celle de l'ecran et l'ouverture est portee par le fondu ci-dessus.
	   Le comportement de Divi reste intact, seule son animation est neutralisee. */
	.ec-menu .mobile_nav.opened #mobile_menu.et_mobile_menu,
	.ec-menu .mobile_nav.ec-closing #mobile_menu.et_mobile_menu {
		height: auto !important;
		margin: 0 !important;
		padding: calc(var(--ec-nav-header-h, 74px) + 14px) 22px calc(22px + env(safe-area-inset-bottom)) !important;
		overflow-y: auto !important;
	}

	/* Fermeture : le JS maintient l'element affiche le temps de l'animation. */
	.ec-menu .mobile_nav.ec-closing #mobile_menu.et_mobile_menu {
		display: block !important;
		opacity: 0;
		transform: translateY(-10px);
	}

	.ec-menu #mobile_menu li {
		padding: 0;
		border: 0;
	}

	.ec-menu #mobile_menu > li {
		border-bottom: 1px solid rgba(255, 255, 255, .13);
	}

	.ec-menu #mobile_menu > li > a {
		padding: 17px 2px;
		border: 0;
		font-size: 21px;
		font-weight: 600;
		line-height: 1.25;
		color: #fff;
		letter-spacing: -.015em;
		background: none;
	}

	.ec-menu #mobile_menu > li.current-menu-item > a,
	.ec-menu #mobile_menu > li.current-menu-ancestor > a {
		color: var(--ec-nav-accent);
	}

	.ec-menu #mobile_menu li a:hover,
	.ec-menu #mobile_menu li a:active {
		background: none;
		opacity: 1;
	}

	/* Entree en cascade des entrees. Une animation, pas une transition : elle
	   se rejoue a chaque ouverture. */
	.ec-menu .mobile_nav.opened #mobile_menu > li {
		animation: ec-menu-in .5s var(--ec-ease) both;
	}

	.ec-menu .mobile_nav.opened #mobile_menu > li:nth-child(1) { animation-delay: .04s; }
	.ec-menu .mobile_nav.opened #mobile_menu > li:nth-child(2) { animation-delay: .08s; }
	.ec-menu .mobile_nav.opened #mobile_menu > li:nth-child(3) { animation-delay: .12s; }
	.ec-menu .mobile_nav.opened #mobile_menu > li:nth-child(4) { animation-delay: .16s; }
	.ec-menu .mobile_nav.opened #mobile_menu > li:nth-child(5) { animation-delay: .20s; }
	.ec-menu .mobile_nav.opened #mobile_menu > li:nth-child(6) { animation-delay: .24s; }
	.ec-menu .mobile_nav.opened #mobile_menu > li:nth-child(7) { animation-delay: .28s; }
	.ec-menu .mobile_nav.opened #mobile_menu > li:nth-child(8) { animation-delay: .32s; }
	.ec-menu .mobile_nav.opened #mobile_menu > li:nth-child(9) { animation-delay: .36s; }

	@keyframes ec-menu-in {
		from { opacity: 0; transform: translateY(16px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* Accordeon.
	   Divi impose `display:block!important` aux sous-menus mobiles : impossible
	   de les replier en jouant sur `display`. Le pli est donc porte par l'item
	   parent, passe en grille de deux lignes — le libelle, puis le sous-menu.
	   Animer la seconde ligne de `0fr` a `1fr` replie et deplie a la hauteur
	   exacte du contenu, sans mesure JS et sans hauteur en dur. */
	.ec-menu #mobile_menu li.menu-item-has-children {
		position: relative;
		display: grid;
		grid-template-rows: auto 0fr;
		transition: grid-template-rows .42s var(--ec-ease);
	}

	.ec-menu #mobile_menu li.menu-item-has-children.ec-open {
		grid-template-rows: auto 1fr;
	}

	.ec-menu #main-header #mobile_menu li.menu-item-has-children > ul.sub-menu {
		display: block !important;
		min-height: 0;
		overflow: hidden;
		padding-left: 0;
		margin: 0;
	}

	.ec-menu #mobile_menu .sub-menu > li > a {
		padding: 11px 2px 11px 14px;
		font-size: 15px;
		font-weight: 500;
		color: rgba(255, 255, 255, .82);
		border: 0;
	}

	/* Titres des piliers dans l'accordeon. */
	.ec-menu #mobile_menu > li > .sub-menu > li > a {
		font-size: 16px;
		font-weight: 700;
		color: #fff;
		padding-left: 14px;
	}

	.ec-menu #mobile_menu > li > .sub-menu > li > .sub-menu > li > a {
		padding-left: 26px;
		font-size: 14.5px;
	}

	/* Bouton d'ouverture d'un niveau, ajoute par le JS. */
	.ec-menu .ec-acc {
		position: absolute;
		top: 4px;
		right: 0;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: rgba(255, 255, 255, .10);
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.ec-menu #mobile_menu > li > .sub-menu > li > .ec-acc {
		top: 0;
		width: 40px;
		height: 40px;
	}

	.ec-menu .ec-acc::before,
	.ec-menu .ec-acc::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 13px;
		height: 2px;
		margin: -1px 0 0 -6.5px;
		border-radius: 2px;
		background: #fff;
		transition: transform .4s var(--ec-ease), opacity .25s ease;
	}

	.ec-menu .ec-acc::after {
		transform: rotate(90deg);
	}

	.ec-menu li.ec-open > .ec-acc::after {
		transform: rotate(0);
		opacity: 0;
	}

	/* Le libelle laisse la place au bouton d'ouverture. */
	.ec-menu #mobile_menu li.menu-item-has-children > a {
		padding-right: 54px;
	}

	/* Accroches, chevron et pied : sans objet dans le panneau mobile. Le
	   chevron du bureau ferait doublon avec le bouton d'ouverture. */
	.ec-menu #mobile_menu .ec-mega-blurb,
	.ec-menu #mobile_menu .ec-chevron,
	.ec-menu #mobile_menu .ec-mega-foot {
		display: none;
	}

	/* Entree « Voir la page … », ajoutee en tete des enfants d'un pilier.
	   Elle est volontairement dessinee autrement que ses voisines : ce n'est
	   pas une prestation de plus dans la liste, c'est le retour vers la page
	   d'ensemble. */
	.ec-menu #mobile_menu li.ec-overview > a {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding-top: 9px;
		padding-bottom: 9px;
		font-size: 13.5px;
		font-weight: 700;
		color: var(--ec-nav-accent);
	}

	.ec-menu #mobile_menu li.ec-overview > a::after {
		content: "";
		width: 5px;
		height: 5px;
		border-top: 1.8px solid currentColor;
		border-right: 1.8px solid currentColor;
		transform: rotate(45deg);
	}

	/* Compte : l'icone reprend sa place a cote du libelle, qui redevient
	   visible — une pastille seule n'aurait aucun sens dans une liste. */
	.ec-menu #mobile_menu > li.ec-nav-icon > a {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.ec-menu #mobile_menu > li.ec-nav-icon .ec-icon {
		flex: none;
		width: 20px;
		height: 20px;
		opacity: .8;
	}

	.ec-menu #mobile_menu .ec-account-label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
	}

	/* Carte de reservation et bouton, en bas du panneau. */
	.ec-menu #mobile_menu > li.ec-cta-item,
	.ec-menu #mobile_menu li.ec-mega-card {
		border-bottom: 0;
		padding-top: 18px;
	}

	.ec-menu #mobile_menu .ec-cta {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 16px 20px;
		font-size: 16px;
	}

	.ec-menu #mobile_menu li.ec-mega-card {
		display: none;
	}

	.ec-menu #mobile_menu > li.ec-cta-item {
		order: 100;
		margin-top: 8px;
	}

	.ec-menu #mobile_menu > li.ec-nav-account > a {
		font-size: 21px;
		color: rgba(255, 255, 255, .82);
	}

	/* Le corps ne defile plus derriere le panneau ouvert. */
	body.ec-menu.ec-mobile-open {
		overflow: hidden;
	}

	html.ec-mobile-lock {
		overflow: hidden;
	}

	/* Le panneau est un descendant du header : il se peint donc a l'interieur
	   du contexte d'empilement de celui-ci, et un z-index eleve le ferait
	   passer devant le logo et le burger, qui sont ses freres. On le laisse
	   sous eux et on remonte les deux reperes dont on a besoin pour refermer. */
	.ec-menu .logo_container,
	.ec-menu #et_mobile_nav_menu .mobile_menu_bar {
		z-index: 3;
	}

	.ec-menu #et_mobile_nav_menu .mobile_menu_bar {
		position: relative;
	}

	/* Le logo et le burger sont aux couleurs de la marque, comme le fond du
	   panneau : sans inversion ils disparaissent dedans. Le logo est une image
	   SVG, `brightness(0) invert(1)` la rend blanche sans avoir a en servir une
	   seconde version. */
	.ec-menu.ec-mobile-open #logo {
		filter: brightness(0) invert(1);
	}

	.ec-menu #logo {
		transition: filter .3s ease;
	}

	.ec-menu .mobile_nav.opened .ec-burger-line,
	.ec-menu .mobile_nav.ec-closing .ec-burger-line {
		background: #fff;
	}
}

/* 8. Accessibilite et mouvement reduit ------------------------------------- */

.ec-menu #top-menu a:focus-visible,
.ec-menu #mobile_menu a:focus-visible,
.ec-menu .ec-acc:focus-visible,
.ec-menu .mobile_menu_bar:focus-visible {
	outline: 2px solid var(--ec-nav-accent);
	outline-offset: 3px;
	border-radius: 8px;
}

.ec-menu #mobile_menu a:focus-visible {
	outline-color: #fff;
}

/* `visibility:hidden` sur le panneau ferme suffit a le sortir de l'ordre de
   tabulation ; cette regle couvre le cas ou une extension le rendrait
   visible sans l'ouvrir. */
.ec-menu #top-menu > li.ec-mega:not(.ec-open) > .sub-menu a {
	pointer-events: none;
}

.ec-menu #top-menu > li.ec-mega.ec-open > .sub-menu a {
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.ec-menu #main-header,
	.ec-menu #top-header,
	.ec-menu #top-menu a,
	.ec-menu #top-menu a::before,
	.ec-menu #top-menu a::after,
	.ec-menu #top-menu .sub-menu,
	.ec-menu #top-menu .sub-menu > li,
	.ec-menu .ec-cta,
	.ec-menu .ec-cta::before,
	.ec-menu .ec-navcard,
	.ec-menu .ec-navcard::before,
	.ec-menu .ec-navcard-link,
	.ec-menu #mobile_menu,
	.ec-menu #mobile_menu > li,
	.ec-menu .ec-burger-line,
	.ec-menu .ec-acc::before,
	.ec-menu .ec-acc::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-delay: 0ms !important;
		transition-delay: 0ms !important;
	}

	.ec-menu #top-menu > li.ec-mega > .sub-menu {
		transform: none;
	}

	.ec-menu #top-menu > li.ec-mega > .sub-menu::before {
		display: none;
	}
}