/* ==========================================================================
   NTM DESIGN SYSTEM — Règles communes à toutes les pages NTM
   Ce fichier est chargé sur toutes les pages du site.
   Pour modifier une couleur, une typo ou un bouton : c'est ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   VARIABLES — palette et tokens
   -------------------------------------------------------------------------- */

.ntm-page {
	--ntm-bg:     #eeeced;
	--ntm-white:  #ffffff;
	--ntm-black:  #101010;
	--ntm-grey:   #625f5b;
	--ntm-pink:   #ff1493;
	--ntm-yellow: #ffd600;
	--ntm-green:  #98d800;
	--ntm-line:   rgba(16, 16, 16, 0.36);
	--ntm-shadow: 4px 4px 0 #101010;
}

/* --------------------------------------------------------------------------
   RESET SCOPED — détaché du thème kaala
   -------------------------------------------------------------------------- */

.ntm-page *,
.ntm-page *::before,
.ntm-page *::after {
	box-sizing: border-box;
}

/* Liens : on repart de zéro, sans héritage du thème */
.ntm-page a,
.ntm-page a:hover,
.ntm-page a:visited,
.ntm-page a:focus {
	color: inherit;
	text-decoration: none !important;
}

/* Titres : marge définie ici, police uniquement sur les titres display */
.ntm-page h1,
.ntm-page h2,
.ntm-page h3 {
	margin-top: 0;
}

/* Titres de section/display : Anton majuscule */


.ntm-page .ntm-section h2,
.ntm-page .ntm-final h2 {
	font-family: Anton, Impact, Oswald, sans-serif;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
	text-transform: uppercase;
}

.ntm-page p {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   CONTENEUR
   -------------------------------------------------------------------------- */

.ntm-page {
	/* Harmonisé le 11/07 avec la page d'accueil (#ntm-accueil) et le cadre
	   du forum (#wpforo-wrap) — même formule partout. */
	width: min(1320px, calc(100% - 32px));
	margin: 32px auto;
	background-color: var(--ntm-bg);
	color: var(--ntm-black);
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	border: 3px solid var(--ntm-black);
}

.ntm-wrap {
	width: calc(100% - 80px);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHIE — classes utilitaires
   -------------------------------------------------------------------------- */


.ntm-label,
.ntm-tag,
.ntm-meta {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0;
}

/* Label (petite étiquette rose ou jaune en haut d'une section) */
.ntm-label {
	display: inline-block;
	margin-bottom: 18px;
	padding-bottom: 7px;
	border-bottom: 4px solid var(--ntm-pink);
	color: var(--ntm-pink);
	font-size: 11px;
	line-height: 1.2;
}

/* Mini-label (badge noir sur fond blanc) */


/* Pill (badge coloré inline) */


/* Tag (badge jaune sur les cartes) */
.ntm-tag {
	display: inline-block;
	margin-bottom: 11px;
	padding: 5px 7px;
	border: 1px solid var(--ntm-black);
	background: var(--ntm-yellow);
	font-size: 9px;
	line-height: 1;
}

/* Meta (données compactes : compteurs, dates) */
.ntm-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	white-space: nowrap;
	color: var(--ntm-black);
	font-size: 9px;
	line-height: 1.25;
}

/* --------------------------------------------------------------------------
   BOUTONS
   -------------------------------------------------------------------------- */

.ntm-page .ntm-button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	border: 2px solid var(--ntm-black);
	background: var(--ntm-pink);
	box-shadow: var(--ntm-shadow);
	color: var(--ntm-black);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 14px;
	line-height: 1;
	font-weight: 950;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.ntm-page .ntm-button:hover,
.ntm-page .ntm-button:focus-visible {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--ntm-black);
	background: var(--ntm-yellow);
	color: var(--ntm-black);
}

.ntm-page .ntm-button-secondary {
	background: var(--ntm-white);
}

/* Lien-bouton (rose, flèche) */


.ntm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ntm-actions-center {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */

.ntm-section {
	padding: 64px 0;
}

.ntm-section-alt {
	background-color: #d0d0d0;
	background-image: none;
	border-top: 1px solid var(--ntm-line);
	border-bottom: 1px solid var(--ntm-line);
}

.ntm-section-head {
	margin-bottom: 34px;
}

.ntm-section-head .ntm-label {
	margin-bottom: 14px;
	color: var(--ntm-grey);
	border-bottom-color: var(--ntm-yellow);
}

/* Titres de sections */
.ntm-page .ntm-section h2 {
	margin-bottom: 0;
	font-size: clamp(33px, 5.4vw, 48px);
}

.ntm-page .ntm-section h3 {
	margin-bottom: 8px;
	font-family: Oswald, Inter, sans-serif;
	font-size: clamp(18px, 2.4vw, 23px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   ANIMATIONS
   -------------------------------------------------------------------------- */

.ntm-reveal {
	opacity: 0;
	transform: translateY(14px);
	animation: ntmReveal 560ms ease forwards;
}

@keyframes ntmReveal {
	to { opacity: 1; transform: translateY(0); }
}

@keyframes ntmTicker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — règles communes
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.ntm-page {
		width: 100%;
	}
	.ntm-wrap {
		width: min(100% - 28px, 660px);
	}
	.ntm-section {
		padding-top: 52px;
		padding-bottom: 52px;
	}
	.ntm-page .ntm-section h2 {
		font-size: clamp(32px, 10vw, 46px);
	}
	.ntm-actions,
	.ntm-actions-center {
		flex-direction: column;
	}
	.ntm-page .ntm-button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   ACCESSIBILITÉ
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ntm-page *,
	.ntm-page *::before,
	.ntm-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.ntm-reveal {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   BANNIÈRE COOKIES (Complianz) — mise en forme NTM + passage au premier plan
   -------------------------------------------------------------------------- */

#cmplz-cookiebanner-container,
#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-manage-consent {
	z-index: 2147483000 !important;
}

#cmplz-cookiebanner-container {
	position: static !important;
	width: auto !important;
	max-width: none !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	position: fixed !important;
	transform: none !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	bottom: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	min-height: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px 20px !important;
	padding: 12px 20px !important;
	background: #101010 !important;
	border: 0 !important;
	border-top: 2px solid #101010 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* On ne force le display QUE quand le plugin lui-même décide d'afficher/masquer
   (classes cmplz-show / cmplz-hidden qu'il gère en JS) — jamais en dur, sinon
   la bannière ne peut plus disparaître après un clic Accepter/Refuser. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show {
	display: flex !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-hidden,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed,
#cmplz-cookiebanner-container .cmplz-cookiebanner[style*="display: none"],
#cmplz-cookiebanner-container .cmplz-cookiebanner[style*="display:none"] {
	display: none !important;
}

#cmplz-cookiebanner-container .cmplz-header,
#cmplz-cookiebanner-container .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-categories,
#cmplz-cookiebanner-container .cmplz-documents {
	display: none !important;
}

#cmplz-cookiebanner-container .cmplz-body {
	display: contents !important;
}

#cmplz-cookiebanner-container .cmplz-message,
#cmplz-cookiebanner-container .cmplz-message p {
	margin: 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

#cmplz-cookiebanner-container .cmplz-buttons {
	position: static !important;
	inset: auto !important;
	float: none !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 18px !important;
}

#cmplz-cookiebanner-container .cmplz-btn {
	position: static !important;
	inset: auto !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 6px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	color: #ffffff !important;
	font-family: "IBM Plex Mono", ui-monospace, monospace !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	white-space: nowrap !important;
}

#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-manage-options {
	display: none !important;
}

#cmplz-cookiebanner-container .cmplz-btn:hover,
#cmplz-cookiebanner-container .cmplz-btn:focus-visible {
	color: #ffd600 !important;
}

#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences {
	color: #ff1493 !important;
}

#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences:hover {
	color: #ffd600 !important;
}

/* Bouton persistant "Gérer le consentement" : toujours repoussé au-dessus de
   la bannière (jamais superposé), sinon il peut intercepter les clics sur
   Accepter/Refuser quand les deux se chevauchent en bas d'écran. */
#cmplz-manage-consent {
	position: fixed !important;
	bottom: 78px !important;
	top: auto !important;
	right: 16px !important;
	left: auto !important;
}

#cmplz-manage-consent .cmplz-btn.manage-consent-1 {
	border: 2px solid #101010 !important;
	border-radius: 0 !important;
	box-shadow: 3px 3px 0 #101010 !important;
	background: #ffd600 !important;
	color: #101010 !important;
	font-family: "IBM Plex Mono", ui-monospace, monospace !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
}

@media (max-width: 640px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		justify-content: flex-start !important;
		padding: 14px 16px !important;
	}
}