/* ==========================================================================
   CW Méga-menu — feuille FONCTIONNELLE
   --------------------------------------------------------------------------
   Uniquement ce qui fait marcher le composant : positionnement du panneau,
   ouverture/fermeture, grille des colonnes, bascule en accordéon sur mobile.

   Aucune couleur, aucune typographie, aucun espacement décoratif : tout cela
   relève du thème. Voir assets/exemple-theme.css pour un point de départ.

   Les transitions sont ici : ce sont des durées de comportement, pas de la
   décoration. Leur cadence est réglable par variable. Les propriétés animées
   (couleur, fond, ombre…) n'existent que si le thème les définit ; sans lui
   ces règles ne font simplement rien.

   Note : la bascule mobile est à 1023px et doit rester alignée avec le
   media query (min-width:1024px) utilisé dans assets/front.js.
   ========================================================================== */

.cwmm {
	position: relative;

	/* Cadence par défaut, surchargeable depuis le thème. */
	--cwmm-transition: 180ms cubic-bezier(.2, .6, .3, 1);
	--cwmm-transition-image: 500ms cubic-bezier(.2, .6, .3, 1);
}
.cwmm *,
.cwmm *::before,
.cwmm *::after { box-sizing: border-box; }

.cwmm .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Barre de niveau 1 ---------- */
.cwmm__liste {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* position:static est indispensable : le panneau se cale sur .cwmm. */
.cwmm__item {
	position: static;
	display: flex;
	align-items: stretch;
}

.cwmm__lien,
.cwmm__declencheur {
	display: inline-flex;
	align-items: center;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	transition: color var(--cwmm-transition);
}

.cwmm__chevron {
	flex: none;
	transition: transform var(--cwmm-transition);
}
.cwmm__item--mega.is-open .cwmm__chevron { transform: rotate(180deg); }

/* Cadence des pseudo-éléments décoratifs que le thème peut ajouter
   (filet sous la rubrique ouverte, puce des liens rapides). Sans « content »
   déclaré par le thème, ces règles ne produisent rien. */
.cwmm__lien--mega::after,
.cwmm__declencheur::after { transition: transform var(--cwmm-transition); }
.cwmm__lien-rapide::before { transition: background var(--cwmm-transition); }

/* ---------- Panneau ---------- */
.cwmm__mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 90;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--cwmm-transition),
		transform var(--cwmm-transition),
		visibility var(--cwmm-transition);
}
.cwmm__item--mega.is-open .cwmm__mega {
	opacity: 1;
	visibility: visible;
}

.cwmm__inner { margin-inline: auto; }

/* Le nombre de colonnes est posé en style en ligne par le rendu PHP,
   à partir des seuls blocs actifs et non vides. */
.cwmm__grille {
	display: grid;
	grid-template-columns: repeat(var(--cwmm-cols, 4), minmax(0, 1fr));
}
.cwmm__col {
	grid-column: span var(--cwmm-span, 1);
	min-width: 0;
}

/* ---------- Bloc « Les 4 essentiels » ---------- */
.cwmm__cartes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cwmm__carte {
	display: flex;
	color: inherit;
	text-decoration: none;
	transition: background var(--cwmm-transition);
}
.cwmm__ico {
	display: grid;
	place-items: center;
	flex: none;
	transition:
		background var(--cwmm-transition),
		color var(--cwmm-transition);
}
.cwmm__ico svg { display: block; }
.cwmm__carte-txt { display: block; min-width: 0; }
.cwmm__carte-titre,
.cwmm__carte-desc { display: block; }

/* ---------- Bloc « Accès rapide » ---------- */
.cwmm__liens {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cwmm__lien-rapide {
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	transition:
		background var(--cwmm-transition),
		color var(--cwmm-transition);
}

/* ---------- Bloc « Zoom sur » ---------- */
.cwmm__zoom {
	display: block;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition:
		border-color var(--cwmm-transition),
		box-shadow var(--cwmm-transition);
}
.cwmm__zoom-media {
	display: block;
	overflow: hidden;
}
.cwmm__zoom-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cwmm-transition-image);
}
.cwmm__zoom-corps,
.cwmm__zoom-sur,
.cwmm__zoom-titre { display: block; }
.cwmm__zoom-cta {
	display: inline-flex;
	align-items: center;
}
.cwmm__zoom-cta svg { transition: transform var(--cwmm-transition); }

/* ---------- Bouton d'ouverture mobile ----------
   La géométrie des trois barres est conservée ici : sans elle le bouton
   n'a plus aucun repère visible. La couleur suit currentColor. */
.cwmm__burger {
	display: none;
	align-items: center;
	justify-content: center;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
.cwmm__burger-barres { position: relative; }
.cwmm__burger-barres,
.cwmm__burger-barres::before,
.cwmm__burger-barres::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition:
		transform var(--cwmm-transition),
		background var(--cwmm-transition);
}
.cwmm__burger-barres::before,
.cwmm__burger-barres::after {
	content: "";
	position: absolute;
	left: 0;
}
.cwmm__burger-barres::before { top: -6px; }
.cwmm__burger-barres::after { top: 6px; }
.cwmm__burger[aria-expanded="true"] .cwmm__burger-barres { background: transparent; }
.cwmm__burger[aria-expanded="true"] .cwmm__burger-barres::before { transform: translateY(6px) rotate(45deg); }
.cwmm__burger[aria-expanded="true"] .cwmm__burger-barres::after { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   Mobile : le panneau devient un accordéon dans le flux
   ========================================================= */
@media (max-width: 1023px) {
	.cwmm__burger { display: flex; }

	.cwmm__liste { display: block; }
	.cwmm:not(.is-deploye) .cwmm__liste { display: none; }

	.cwmm__item {
		display: block;
		position: relative;
	}

	.cwmm__lien,
	.cwmm__declencheur { width: 100%; }
	.cwmm__lien--mega { width: auto; }

	/* Quand l'entrée a un lien propre, le chevron est un bouton distinct
	   qu'on décale à droite pour ne pas casser la ligne. */
	.cwmm__declencheur--seul {
		position: absolute;
		right: 0;
		top: 0;
		width: auto;
	}
	.cwmm__declencheur:not(.cwmm__declencheur--seul) { justify-content: space-between; }
	.cwmm__declencheur:not(.cwmm__declencheur--seul) .cwmm__chevron { margin-left: auto; }

	.cwmm__mega {
		position: static;
		opacity: 1;
		visibility: visible;
		display: none;
	}
	.cwmm__item--mega.is-open .cwmm__mega { display: block; }

	.cwmm__grille { grid-template-columns: 1fr; }
	.cwmm__col { grid-column: auto; }
	.cwmm__cartes { grid-template-columns: 1fr; }
}

/* Respect du réglage système de réduction des animations. */
@media (prefers-reduced-motion: reduce) {
	.cwmm,
	.cwmm * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}