/*
 * Revolucy Mega Menu — Styles front-end
 * Version : 1.0.0
 * Auteur  : Revolucy — https://revolucy.com
 *
 * Couleurs clés (synchronisées avec la charte Revolucy) :
 *   --rmm-blue   : #0818af
 *   --rmm-purple : #9f80ff
 *   --rmm-pink   : #fb0065
 *   --rmm-lime   : #b9ff66
 */

/* ==========================================================================
   Variables CSS
   ========================================================================== */
:root {
	--rmm-blue       : #0818af;
	--rmm-purple     : #9f80ff;
	--rmm-pink       : #fb0065;
	--rmm-lime       : #b9ff66;
	--rmm-panel-bg   : #ffffff;
	--rmm-shadow     : 0 8px 40px rgba(8, 24, 175, 0.10);
	--rmm-border-top : 2px solid var(--rmm-blue);
	--rmm-radius     : 0 0 8px 8px;
	--rmm-transition : 0.2s ease;
	--rmm-font-size  : 14px;
	--rmm-gap        : 28px;
	--rmm-padding    : 28px 32px;
}

/* ==========================================================================
   Élément <li> portant le mega menu
   ========================================================================== */
.rmm-has-mega-menu {
	position : static; /* Ancre repositionnée par le parent nav */
}

/* ==========================================================================
   Lien déclencheur
   ========================================================================== */
.rmm-trigger {
	display     : inline-flex;
	align-items : center;
	gap         : 5px;
	cursor      : pointer;
}

/* Flèche indicatrice */
.rmm-caret {
	display        : inline-block;
	width          : 0;
	height         : 0;
	border-left    : 4px solid transparent;
	border-right   : 4px solid transparent;
	border-top     : 5px solid currentColor;
	transition     : transform var(--rmm-transition);
	flex-shrink    : 0;
}

.rmm-has-mega-menu.rmm-open > .rmm-trigger .rmm-caret,
.rmm-has-mega-menu:focus-within > .rmm-trigger .rmm-caret {
	transform : rotate(180deg);
}

/* ==========================================================================
   Panneau déroulant
   ========================================================================== */
.rmm-panel {
	display    : none;
	position   : absolute;
	top        : 100%;
	left       : 0;
	z-index    : 9999;
	background : var(--rmm-panel-bg);
	box-shadow : var(--rmm-shadow);
	border-top : var(--rmm-border-top);
	border-radius: var(--rmm-radius);
	padding    : var(--rmm-padding);
	box-sizing : border-box;
	animation  : rmmFadeIn 0.15s ease forwards;
}

@keyframes rmmFadeIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* États ouverts */
.rmm-has-mega-menu.rmm-open > .rmm-panel,
.rmm-has-mega-menu:focus-within > .rmm-panel {
	display : block;
}

/* ── Variantes de largeur ───────────────────────── */
.rmm-panel--full {
	left        : 0;
	right       : 0;
	width       : 100vw;
}

.rmm-panel--container {
	min-width : 480px;
	max-width : 960px;
}

.rmm-panel--auto {
	width     : auto;
	min-width : 280px;
}

/* ==========================================================================
   Texte d'introduction
   ========================================================================== */
.rmm-intro {
	font-size     : 13px;
	color         : #666;
	margin-bottom : 20px;
	padding-bottom: 16px;
	border-bottom : 1px solid #eee;
}

/* ==========================================================================
   Grille de colonnes
   ========================================================================== */
.rmm-columns {
	display : grid;
	gap     : var(--rmm-gap);
}

.rmm-columns--auto { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.rmm-columns--2    { grid-template-columns: repeat(2, 1fr); }
.rmm-columns--3    { grid-template-columns: repeat(3, 1fr); }
.rmm-columns--4    { grid-template-columns: repeat(4, 1fr); }
.rmm-columns--5    { grid-template-columns: repeat(5, 1fr); }
.rmm-columns--6    { grid-template-columns: repeat(6, 1fr); }

/* ==========================================================================
   Colonne
   ========================================================================== */
.rmm-column__title {
	font-size      : 10px;
	font-weight    : 700;
	text-transform : uppercase;
	letter-spacing : 0.1em;
	color          : var(--rmm-purple);
	margin         : 0 0 10px;
	padding-bottom : 8px;
	border-bottom  : 1px solid #f0f0f0;
}

.rmm-column__links {
	list-style : none;
	margin     : 0;
	padding    : 0;
	display    : flex;
	flex-direction: column;
	gap        : 2px;
}

/* ==========================================================================
   Lien individuel
   ========================================================================== */
.rmm-link {
	display         : flex;
	align-items     : flex-start;
	gap             : 10px;
	padding         : 7px 9px;
	border-radius   : 7px;
	text-decoration : none;
	color           : inherit;
	transition      : background var(--rmm-transition), color var(--rmm-transition);
}

.rmm-link:hover,
.rmm-link:focus-visible {
	background : #f2f0ff;
	color      : var(--rmm-blue);
	outline    : none;
}

/* Icône Dashicons */
.rmm-link__icon {
	font-size   : 19px;
	color       : var(--rmm-purple);
	flex-shrink : 0;
	margin-top  : 1px;
	line-height : 1;
}

/* Texte */
.rmm-link__text {
	display        : flex;
	flex-direction : column;
}

.rmm-link__label {
	font-size   : var(--rmm-font-size);
	font-weight : 500;
	line-height : 1.3;
}

.rmm-link__desc {
	font-size   : 12px;
	color       : #888;
	line-height : 1.3;
	margin-top  : 2px;
}

/* ==========================================================================
   CTA bas de panneau
   ========================================================================== */
.rmm-cta {
	margin-top    : 22px;
	padding-top   : 16px;
	border-top    : 1px solid #eee;
}

.rmm-cta__link {
	display         : inline-flex;
	align-items     : center;
	gap             : 6px;
	font-size       : var(--rmm-font-size);
	font-weight     : 600;
	color           : var(--rmm-blue);
	text-decoration : none;
	transition      : gap var(--rmm-transition);
}

.rmm-cta__link:hover { gap: 10px; }

.rmm-cta__link .dashicons {
	font-size : 16px;
	width     : 16px;
	height    : 16px;
}

/* ==========================================================================
   Accessibilité clavier
   ========================================================================== */
.rmm-has-mega-menu:focus-within > .rmm-panel { display: block; }

/* ==========================================================================
   Responsive mobile (≤ 768 px)
   ========================================================================== */
@media (max-width: 768px) {

	.rmm-panel,
	.rmm-panel--full,
	.rmm-panel--container,
	.rmm-panel--auto {
		position     : static;
		width        : 100%;
		min-width    : 0;
		max-width    : none;
		transform    : none;
		box-shadow   : none;
		border-top   : none;
		border-radius: 0;
		padding      : 12px 4px;
		display      : none;
		animation    : none;
	}

	.rmm-has-mega-menu.rmm-open > .rmm-panel { display: block; }

	.rmm-columns {
		grid-template-columns : 1fr !important;
		gap                   : 16px;
	}

	.rmm-panel--full {
		left  : auto;
		right : auto;
	}
}

/* ==========================================================================
   Bloc (image + titre/bouton + sous-catégories)
   ========================================================================== */

/* Séparateur entre blocs empilés dans une même colonne */
.rmm-block + .rmm-block {
	margin-top    : 16px;
	padding-top   : 16px;
	border-top    : 1px solid #f0f0f0;
}

/* ── Image ─────────────────────────────────────────────────── */
.rmm-block__image-wrap {
	position      : relative;
	border-radius : 8px;
	overflow      : hidden;
	margin-bottom : 0;
	line-height   : 0;
}

.rmm-block__image {
	width         : 100%;
	height        : auto;
	display       : block;
	border-radius : 8px;
	transition    : transform 0.3s ease;
	margin-bottom: 10px;
}

.rmm-block__image-wrap:hover .rmm-block__image,
.rmm-block__image-wrap:focus-within .rmm-block__image {
	transform : scale(1.03);
}

.rmm-block__image-link {
	display : block;
}

/* ── Titre bouton (avec image ou sans) ──────────────────────── */
.rmm-block__title-btn {
	display          : flex;
	align-items      : center;
	justify-content  : space-between;
	gap              : 8px;
	width            : 100%;
	padding          : 10px 14px;
	margin-top       : 0;
	background       : #283B2D;
	color            : #ffffff;
	font-size        : 14px;
	font-weight      : 600;
	text-decoration  : none;
	border-radius    : 8px;
	box-sizing       : border-box;
	transition       : background 0.2s ease, gap 0.2s ease;
}

/* Quand il n'y a pas d'image, le bouton est autonome avec ses propres bords */
.rmm-block:not(:has(.rmm-block__image-wrap)) .rmm-block__title-btn {
	border-radius : 8px;
	margin-top    : 0;
}

.rmm-block__title-btn:hover,
.rmm-block__title-btn:focus-visible {
	background : #2e5440;
	outline    : none;
}

.rmm-block__arrow {
	flex-shrink : 0;
	font-size   : 16px;
	transition  : transform 0.2s ease;
}

.rmm-block__title-btn:hover .rmm-block__arrow {
	transform : translateX(3px);
}

/* ── Titre sans lien ─────────────────────────────────────────── */
.rmm-block__title {
	font-size      : 12px;
	font-weight    : 700;
	text-transform : uppercase;
	letter-spacing : 0.08em;
	color          : var(--rmm-purple);
	margin         : 0 0 8px;
}

/* ==========================================================================
   Liste de sous-catégories
   ========================================================================== */
.rmm-subcats {
	list-style : none;
	margin     : 4px 0 0;
	padding    : 0;
	display    : flex;
	flex-direction : column;
}

.rmm-subcats__item {
	display : block;
}

.rmm-subcats__link {
	display          : flex;
	align-items      : center;
	justify-content  : space-between;
	padding          : 5px 6px;
	font-size        : 13px;
	color            : #333;
	text-decoration  : none;
	border-radius    : 5px;
	transition       : background 0.15s ease, color 0.15s ease;
}

.rmm-subcats__link:hover,
.rmm-subcats__link:focus-visible {
	background : #f2f0ff;
	color      : var(--rmm-blue);
	outline    : none;
}

.rmm-subcats__label {
	flex : 1;
}

.rmm-subcats__arrow {
	color       : #aaa;
	font-size   : 12px;
	flex-shrink : 0;
	transition  : transform 0.15s ease, color 0.15s ease;
}

.rmm-subcats__link:hover .rmm-subcats__arrow {
	transform : translateX(2px);
	color     : var(--rmm-blue);
}