/**
 * S-MegaMenu — styles
 *
 * Toutes les valeurs modifiables sont des variables CSS : surchargez-les
 * dans Divi > Options du thème > CSS personnalisé sans toucher au plugin.
 */

/* ------------------------------------------------------- en-tête + logo */

.smm-header {
	--smm-bar-min-height: 72px;
	--smm-logo-height: 110px;
	--smm-logo-gap: 2rem;
	--smm-logo-height-mobile: 64px;
	--smm-bar-height-sticky: 64px;
	--smm-logo-scale-sticky: 1;
	--smm-resize-duration: 0s;
	--smm-sticky-top: 0px;
	--smm-sticky-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
	--smm-header-padding: 0 2rem;
	--smm-header-max-width: none;
	--smm-tab-bg: transparent;

	position: relative;
	background: var(--smm-tab-bg);
}

.smm-header__inner {
	display: flex;
	align-items: center;
	gap: var(--smm-logo-gap);
	min-height: var(--smm-bar-min-height);
	max-width: var(--smm-header-max-width);
	margin: 0 auto;
	padding: var(--smm-header-padding);
}

.smm-header--logo-right .smm-header__inner {
	flex-direction: row-reverse;
}

.smm-header__logo {
	flex: none;
	display: block;
	line-height: 0;
}

.smm-header__logo-img {
	display: block;
	width: auto;
	height: var(--smm-logo-height);
	max-width: 100%;
}

/* Mode débordant : la barre garde sa hauteur, le logo dépasse en dessous.
   La marge négative annule la hauteur du logo dans le calcul de la barre tout
   en lui conservant sa place horizontale — ce qu'un positionnement absolu
   ferait perdre. */
.smm-header--overhang .smm-header__logo {
	align-self: flex-start;
	position: relative;
	z-index: calc(var(--smm-z, 9999) + 2);
	margin-bottom: calc(var(--smm-bar-min-height) - var(--smm-logo-height));
}

/* Le menu occupe l'espace restant à côté du logo, et toute la hauteur de la
   bande : les rubriques se centrent alors sur la hauteur réelle de l'en-tête,
   et les panneaux s'ouvrent au bas de la bande et non au bas du texte. */
.smm-header .smm {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	display: flex;
}

.smm-header .smm__bar {
	flex: 1 1 auto;
	align-items: center;
}

/* Décalage fin, utile quand la bande blanche vient d'une ligne Divi plus haute
   que l'en-tête du plugin. La marge est doublée : sur un élément étiré et
   centré, une marge de 2X déplace le contenu de X. */
.smm-header .smm__bar {
	margin-top: calc(var(--smm-menu-offset, 0px) * 2);
}

/* ---------------------------------------------------------- défilement */

/* position: sticky plutôt que fixed : l'en-tête garde sa place dans le flux
   en haut de page, donc aucun saut de contenu au moment où il se colle.
   Un ancêtre en overflow: hidden neutraliserait ce comportement. */
.smm-header--sticky {
	position: sticky;
	top: var(--smm-sticky-top);
	z-index: calc(var(--smm-z, 9999) + 5);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

/* Hors du haut de page : barre compacte, logo rentré dedans. */
.smm-header--sticky:not([data-scroll="top"]) {
	box-shadow: var(--smm-sticky-shadow);
}

/* Hauteur imposée, et pas seulement minimale : sans cela, un logo réglé à
   100 % ferait grandir la barre jusqu'à sa taille naturelle au lieu de se
   mettre à la hauteur de la barre. */
.smm-header--sticky:not([data-scroll="top"]) .smm-header__inner {
	height: var(--smm-bar-height-sticky);
	min-height: var(--smm-bar-height-sticky);
}

/* Le logo s'étire sur toute la hauteur de la barre : sa taille est alors un
   pourcentage de cette hauteur réelle, et non une valeur en pixels à
   raccorder à la main à chaque changement de hauteur de barre. */
.smm-header--sticky:not([data-scroll="top"]) .smm-header__logo {
	align-self: center;
	margin-bottom: 0;
}

/* Longueur calculée, jamais un pourcentage : un pourcentage se résout contre
   la hauteur du parent, qui n'est pas toujours définie au moment où la barre
   est escamotée — l'image retomberait alors sur sa taille naturelle. */
.smm-header--sticky:not([data-scroll="top"]) .smm-header__logo-img {
	height: calc(var(--smm-bar-height-sticky) * var(--smm-logo-scale-sticky));
	max-height: var(--smm-bar-height-sticky);
	width: auto;
}

/* Le décalage vertical ne vaut que pour l'état de repos : il compense les
   marges inégales de la ligne du constructeur de pages, en haut de page. Une
   fois la barre collée, elle est à elle-même son propre cadre et se centre
   exactement — y reporter le décalage collerait le texte au bord bas. */
.smm-header--sticky:not([data-scroll="top"]) .smm__bar {
	margin-top: 0;
}

/* Repli quand le conteneur est trop court pour que sticky tienne : la barre
   passe en position fixe et une cale de même hauteur prend sa place dans le
   flux, pour que le contenu ne remonte pas de la hauteur de l'en-tête.
   Déclaré après la règle sticky : à spécificité égale, c'est l'ordre qui tranche. */
.smm-header--fixed {
	position: fixed;
	top: var(--smm-sticky-top);
	left: 0;
	right: 0;
	width: auto;
}

.smm-header__spacer {
	flex: none;
}

/* Escamotage vers le haut. La barre reste dans le DOM et garde ses états
   ARIA : elle est seulement déplacée hors de l'écran. */
.smm-header--sticky[data-scroll="unpinned"] {
	transform: translateY(-100%);
	box-shadow: none;
}

/* Le changement de taille est instantané par défaut. Animé, il se poursuit
   pendant que la barre s'escamote, et se termine devant les yeux au moment où
   elle revient : le logo semble s'afficher en grand avant de reprendre sa
   taille. Passer --smm-resize-duration à 0.28s pour retrouver l'animation. */
.smm-header__inner,
.smm-header__logo-img {
	transition:
		min-height var(--smm-resize-duration) ease,
		height var(--smm-resize-duration) ease;
}

@media (prefers-reduced-motion: reduce) {
	.smm-header--sticky,
	.smm-header__inner,
	.smm-header__logo-img {
		transition: none;
	}
}

.smm {
	--smm-max-width: 1400px;
	--smm-bar-height: 4px;
	--smm-bar-gap: 1.5rem;
	--smm-bar-radius: 0;
	--smm-tab-color: #0b0d1f;
	--smm-tab-bg: transparent;
	--smm-tab-weight: 300;
	--smm-tab-weight-strong: 700;
	--smm-underline-height: 2px;
	--smm-panel-text: #ffffff;
	--smm-tab-color-mobile: #222222;
	--smm-panel-padding: 3.5rem 4rem 3rem;
	--smm-columns: 3;
	--smm-column-gap: 4rem;
	--smm-font: inherit;
	--smm-radius: 0;
	--smm-z: 9999;

	position: relative;
	font-family: var(--smm-font);
}

/* L'espace demandé sous la barre ne vaut que là où elle occupe sa place dans le
   flux. En mode transparent le contenu passe volontairement dessous, y ajouter
   une marge décalerait la vidéo d'en-tête. */
.smm-header:not(.smm-header--transparent) {
	margin-bottom: var(--smm-espace-apres, 0);
}

/* ------------------------------------- transparence en haut de page (1.5.2) */

/* La barre sort du flux dès le chargement, sans cale : la vidéo ou l'image
   d'en-tête démarre sous elle et la traverse. Le fond n'apparaît qu'une fois
   la page défilée. Spécificité doublée pour passer devant --sticky. */
.smm-header.smm-header--transparent {
	position: fixed;
	top: var(--smm-sticky-top);
	left: 0;
	right: 0;
	width: auto;
	background: transparent;
	box-shadow: none;
	transition: transform 0.28s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.smm-header.smm-header--transparent[data-scroll="top"] {
	background: transparent;
	box-shadow: none;
}

.smm-header.smm-header--transparent:not([data-scroll="top"]) {
	background: var(--smm-tab-bg-solid, #ffffff);
	box-shadow: var(--smm-sticky-shadow);
}

/* Libellés, chevrons et bouton mobile dans la couleur « haut de page ». */
.smm-header--transparent[data-scroll="top"] .smm {
	--smm-tab-color: var(--smm-top-tab-color, #ffffff);
	--smm-tab-color-mobile: var(--smm-top-tab-color, #ffffff);
}

/* Sur fond transparent, le libellé ne prend pas la couleur de sa rubrique : sur
   une photo, un olive ou un magenta se lit mal et se bat avec l'image. Le texte
   reste dans sa couleur de base, simplement atténué, et c'est le trait coloré
   sous le libellé qui porte tout l'effet de survol.

   Atténuation calculée à partir de la couleur réglée, pour qu'elle suive un
   choix autre que le blanc. La première déclaration sert de repli aux
   navigateurs sans color-mix(). */
.smm-header--transparent[data-scroll="top"] .smm__tab:hover,
.smm-header--transparent[data-scroll="top"] .smm__tab:focus-visible,
.smm-header--transparent[data-scroll="top"] .smm__item[data-open] > .smm__tab {
	color: var(--smm-top-tab-hover, rgba(255, 255, 255, 0.7));
	color: var(--smm-top-tab-hover, color-mix(in srgb, var(--smm-top-tab-color, #ffffff) 70%, transparent));
}

/* Voile facultatif : un dégradé sombre sous la barre rattrape les vidéos
   claires, où du blanc sur blanc deviendrait illisible. Réglé à 0 par défaut. */
.smm-header--transparent[data-scroll="top"]::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(var(--smm-bar-min-height) + var(--smm-veil-extra, 40px));
	background: linear-gradient(to bottom, rgba(0, 0, 0, var(--smm-veil, 0)), transparent);
	pointer-events: none;
}

/* Un panneau ouvert ne change rien au fond : la barre reste transparente tant
   qu'on est en haut de page. Seul le défilement ramène le fond opaque. */

/* Logo de remplacement, en version claire, tant que le fond est transparent. */
.smm-header__logo-img--top {
	display: none;
}

.smm-header--transparent[data-scroll="top"] .smm-header--has-top-logo .smm-header__logo-img--top,
.smm-header--transparent[data-scroll="top"] .smm-header__logo-img--top {
	display: block;
}

.smm-header--transparent[data-scroll="top"] .smm-header__logo--dual .smm-header__logo-img--main {
	display: none;
}


@media (prefers-reduced-motion: reduce) {
	.smm-header.smm-header--transparent {
		transition: none;
	}
}

/* ---------------------------------------------------------------- barre */

.smm__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--smm-bar-justify, flex-start);
	gap: var(--smm-bar-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.smm__item {
	position: static; /* le panneau se positionne sur .smm */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* liseré coloré au-dessus de chaque rubrique */
.smm--no-bars .smm__item::before {
	display: none;
}

.smm__item::before {
	content: "";
	display: block;
	height: var(--smm-bar-height);
	background: var(--smm-c, currentColor);
	border-radius: var(--smm-bar-radius);
	transition: opacity 0.2s ease;
}

.smm__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 1.1rem 0.75rem;
	border: 0;
	background: none;
	color: var(--smm-tab-color);
	font: inherit;
	font-size: 0.95rem;
	font-weight: var(--smm-tab-weight-strong);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease;
}

/* Partie du libellé laissée en graisse normale : « MON » dans « MON VILLAGE ». */
.smm__tab-light {
	font-weight: var(--smm-tab-weight);
}

/* Soulignement de la rubrique survolée ou ouverte, dans sa couleur. */
.smm--underline .smm__tab::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.55rem;
	height: var(--smm-underline-height);
	background: var(--smm-c, currentColor);
	opacity: 0;
	transform: scaleX(0.4);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.smm--underline .smm__tab:hover::after,
.smm--underline .smm__tab:focus-visible::after,
.smm--underline .smm__item[data-open] > .smm__tab::after {
	opacity: 1;
	transform: none;
}

.smm__tab:hover,
.smm__tab:focus-visible,
.smm__item[data-open] > .smm__tab {
	color: var(--smm-c, currentColor);
}

.smm__tab:focus-visible {
	outline: 2px solid var(--smm-tab-color);
	outline-offset: 3px;
}

.smm__chevron {
	flex: none;
	transition: transform 0.25s ease;
}

.smm__item[data-open] .smm__chevron {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------- panneau */

.smm__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--smm-z);
	background: var(--smm-c, #333);
	border-radius: var(--smm-radius);
	overflow: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.smm__panel[hidden] {
	display: none;
}

/* Panneau étendu à toute la largeur de l'écran, même quand le menu n'occupe
   qu'une partie de l'en-tête (à droite d'un logo, par exemple).
   Le décalage et la largeur sont mesurés en JS plutôt que d'utiliser 100vw,
   qui inclut la barre de défilement et provoque un débordement horizontal. */
.smm--full-bleed .smm__panel {
	left: var(--smm-panel-offset, 0);
	right: auto;
	width: var(--smm-panel-width, 100%);
}

.smm__item[data-open] > .smm__panel {
	opacity: 1;
	transform: none;
}

.smm__panel-inner {
	max-width: var(--smm-max-width);
	margin: 0 auto;
	padding: var(--smm-panel-padding);
	color: var(--smm-panel-text);
}

.smm__panel-title {
	margin: 0 0 2.5rem;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--smm-panel-text);
}

.smm__panel-link {
	display: inline-block;
	margin: -1.75rem 0 2rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	text-decoration: underline;
}

.smm__panel-link:hover,
.smm__panel-link:focus-visible {
	color: #fff;
}

/* ------------------------------------------------------------- colonnes */

.smm__cols {
	columns: var(--smm-columns);
	column-gap: var(--smm-column-gap);
}

.smm__group {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 2.75rem;
}

.smm__group-title {
	margin: 0 0 1.25rem;
	padding: 0 0 0.85rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--smm-panel-text);
	position: relative;
}

.smm__group-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.5rem;
	height: 3px;
	background: rgba(255, 255, 255, 0.45);
}

.smm__group-title a {
	color: inherit;
	text-decoration: none;
}

.smm__group-title a:hover,
.smm__group-title a:focus-visible {
	text-decoration: underline;
}

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

.smm__links li {
	margin: 0 0 0.55rem;
	padding: 0;
	list-style: none;
}

.smm__link {
	display: inline-block;
	color: var(--smm-panel-text);
	opacity: 0.94;
	font-size: 1.05rem;
	line-height: 1.4;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.smm__link:hover,
.smm__link:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

.smm__link[aria-current] {
	font-weight: 700;
	text-decoration: underline;
}

/* Focus à l'intérieur du panneau : blanc sur le fond coloré.
   Volontairement limité au panneau — appliqué à toute la barre, il rendrait
   le focus des onglets invisible sur un en-tête blanc. */
.smm__panel :focus-visible {
	outline: 2px solid var(--smm-panel-text);
	outline-offset: 3px;
}

/* --------------------------------------------------- tablette / mobile */
/* Le basculement est piloté par le JS (attribut data-layout) afin de suivre
   exactement le point de bascule choisi dans Apparence > S-MegaMenu. */

.smm-header[data-layout="mobile"] .smm-header__inner {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}

/* En accordéon, un logo débordant chevaucherait les rubriques : il reprend
   sa place dans le flux et une taille adaptée à l'écran. */
.smm-header[data-layout="mobile"] .smm-header__logo {
	align-self: flex-start;
	margin: 1rem 1.25rem;
}

.smm-header[data-layout="mobile"] .smm-header__logo-img {
	height: var(--smm-logo-height-mobile);
}

.smm[data-layout="mobile"] .smm__bar {
	display: block;
	gap: 0;
}

.smm[data-layout="mobile"] .smm__item {
	display: block;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.smm[data-layout="mobile"] .smm__item::before {
	height: 3px;
}

.smm[data-layout="mobile"] .smm__tab {
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	color: var(--smm-tab-color-mobile);
}

.smm[data-layout="mobile"] .smm__panel {
	position: static;
	border-radius: 0;
	opacity: 1;
	transform: none;
	transition: none;
}

.smm[data-layout="mobile"] .smm__panel-inner {
	padding: 2rem 1.25rem 1.5rem;
}

.smm[data-layout="mobile"] .smm__panel-title {
	font-size: 1.4rem;
	margin-bottom: 1.75rem;
}

.smm[data-layout="mobile"] .smm__cols {
	columns: 1;
}

/* --------------------------------------------------------- préférences */

@media (prefers-reduced-motion: reduce) {
	.smm__panel,
	.smm__chevron,
	.smm__tab,
	.smm__link {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.smm__panel {
		border: 1px solid CanvasText;
	}
}