/* =========================================================
	   PAGE FAQ — CSS spécifique uniquement.
	   Variables, boutons, sections → assets/css/ntm-pages.css
	   ========================================================= */
	@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@600;700;800&family=Oswald:wght@500;700&family=Inter:wght@400;520;620;900&display=swap');

	.wp-block-post-title { display: none !important; }

	/* Ombre du grand cadre principal sur grand écran, comme sur la page Nos Voix
	   (.oasis-voix-page), en rose ici plutôt qu'en jaune. */
	@media (min-width: 641px) {
		.ntm-faq-page {
			box-shadow: 5px 5px 0 var(--ntm-pink);
		}
	}

	.ntm-faq-hero {
		padding: 68px 0 40px;
		border-bottom: 1px solid var(--ntm-line);
	}

	.ntm-faq-hero h1 {
		max-width: 640px;
		margin-bottom: 18px;
		font-family: Anton, Impact, Oswald, sans-serif;
		font-size: clamp(40px, 6.4vw, 62px);
		line-height: 0.96;
		font-weight: 900;
		text-transform: uppercase;
	}

	/* Alignée le 12/08 sur .ot-hero-lead de /les-mots-du-forum/ (même police, taille,
	   couleur) — jusque-là .ntm-lead n'avait aucun style propre ici (hérite du noir
	   et de la taille par défaut du navigateur, pas 16px gris comme sur l'autre page). */
	.ntm-lead {
		color: var(--ntm-grey);
		font-size: 16px;
		line-height: 1.55;
	}

	.ntm-faq-search-wrap {
		max-width: 480px;
		margin-top: 26px;
	}

	.ntm-faq-search-field {
		position: relative;
	}

	.ntm-faq-search-icon {
		position: absolute;
		left: 14px;
		top: 50%;
		width: 18px;
		height: 18px;
		transform: translateY(-50%);
		opacity: 0.35;
		pointer-events: none;
	}

	.ntm-page .ntm-faq-search {
		color-scheme: light;
		width: 100%;
		padding: 14px 16px 14px 44px;
		border: 2px solid var(--ntm-black);
		background-color: var(--ntm-white);
		box-shadow: var(--ntm-shadow);
		color: var(--ntm-black);
		font-family: Inter, sans-serif;
		font-size: 15px;
		font-weight: 620;
		transition: transform 150ms ease, box-shadow 150ms ease;
		-webkit-appearance: none;
		appearance: none;
	}

	.ntm-page .ntm-faq-search::placeholder {
		color: var(--ntm-grey);
		font-weight: 500;
	}

	.ntm-page .ntm-faq-search:focus {
		outline: none;
		transform: translate(2px, 2px);
		box-shadow: 2px 2px 0 var(--ntm-black);
	}

	.ntm-page .ntm-faq-search-count {
		margin-top: 10px !important;
		margin-bottom: 0;
		min-height: 14px;
		color: var(--ntm-grey);
		font-family: "IBM Plex Mono", ui-monospace, monospace;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.ntm-faq-mark {
		background: var(--ntm-yellow);
		padding: 0 2px;
		color: var(--ntm-black);
		font-weight: inherit;
	}

	/* --------------------------------------------------------
	   LAYOUT — sidebar de sections + contenu
	   -------------------------------------------------------- */

	.ntm-faq-layout {
		display: grid;
		grid-template-columns: 220px 1fr;
		align-items: start;
		gap: 48px;
		padding: 40px 0 64px;
	}

	.ntm-faq-nav {
		/* 103px = hauteur du header sticky du site (87px) + 16px de respiration,
		   sinon le header (z-index 9999) recouvre le haut de la sidebar au scroll.
		   min-width:0 est nécessaire car dans une grille, un enfant se dimensionne
		   par défaut sur son contenu (ici la liste de pills horizontale sur mobile) :
		   sans ça, elle pousse toute la page en débordement horizontal. */
		position: sticky;
		top: 103px;
		min-width: 0;
	}

	.ntm-faq-nav-label {
		margin-bottom: 12px;
		padding-bottom: 8px;
		border-bottom: 2px solid var(--ntm-black);
		color: var(--ntm-grey);
		font-family: "IBM Plex Mono", ui-monospace, monospace;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.ntm-faq-mobile-nav-label { display: none; }

	.ntm-faq-nav-list {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ntm-faq-nav-item.is-faq-hidden {
		display: none;
	}

	/* Menu déroulant mobile — alternative aux pills, voir $mobile_nav_mode en PHP.
	   Caché par défaut (desktop) ; affiché uniquement dans la media query 900px
	   ci-dessous, et seulement quand --mobile-select est actif. */
	.ntm-page .ntm-faq-mobile-select {
		display: none;
		width: 100%;
		padding: 10px 12px;
		border: 2px solid var(--ntm-black);
		background: var(--ntm-white);
		color: var(--ntm-black);
		font-family: Inter, sans-serif;
		font-size: 14px;
		font-weight: 620;
	}

	/* Menu mobile "maison" (mode 'custom', voir $mobile_nav_mode en PHP) — même composant
	   que sur /les-mots-du-forum/ : un bouton + une liste stylisée à la main, pour que le
	   menu OUVERT reste dans le style du site au lieu du menu système générique d'un <select>.
	   Caché par défaut (desktop) ; affiché uniquement sous 900px, et seulement en mode 'custom'. */
	.ntm-page .ntm-faq-dropdown { display: none; position: relative; }
	.ntm-page .ntm-faq-dropdown-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		padding: 10px 12px;
		border: 2px solid var(--ntm-black);
		/* Rose pastel très clair, essai du 12/08 (corrigé : dans le bouton, pas autour) —
		   dérivé de --ntm-pink (#ff1493). MARCHE ARRIÈRE : remettre "var(--ntm-white)". */
		background: #fbe6f0;
		color: var(--ntm-black);
		font-family: Inter, sans-serif;
		font-size: 14px;
		font-weight: 620;
		cursor: pointer;
	}
	.ntm-faq-dropdown-trigger:focus-visible { outline: 2px solid var(--ntm-black); outline-offset: 2px; }
	.ntm-faq-dropdown-chevron { flex-shrink: 0; font-size: 12px; transition: transform 120ms ease; }
	.ntm-faq-dropdown[data-faq-open] .ntm-faq-dropdown-chevron { transform: rotate(180deg); }
	.ntm-page .ntm-faq-dropdown-list {
		position: absolute;
		z-index: 20;
		top: calc(100% + 4px);
		left: 0;
		right: 0;
		max-height: 60vh;
		overflow-y: auto;
		margin: 0;
		padding: 6px;
		list-style: none;
		background: var(--ntm-white);
		border: 2px solid var(--ntm-black);
		box-shadow: var(--ntm-shadow);
	}
	.ntm-faq-dropdown-list[hidden] { display: none; }
	.ntm-faq-dropdown-option {
		padding: 10px 8px;
		font-family: Inter, sans-serif;
		font-size: 14px;
		font-weight: 550;
		cursor: pointer;
	}
	.ntm-faq-dropdown-option:hover,
	.ntm-faq-dropdown-option:focus-visible {
		background: var(--accent);
		outline: none;
	}
	.ntm-faq-dropdown-option.is-faq-dropdown-active { font-weight: 800; }
	.ntm-faq-dropdown-option.is-faq-dropdown-active::before { content: "→ "; }

	.ntm-faq-nav-item a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 8px 10px;
		border: 2px solid transparent;
		color: var(--ntm-black);
		font-family: Inter, sans-serif;
		font-size: 13px;
		font-weight: 620;
		line-height: 1.3;
		transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
	}

	.ntm-faq-nav-item a:hover,
	.ntm-faq-nav-item a:focus-visible {
		border-color: var(--ntm-black);
		background: var(--ntm-white);
		box-shadow: 2px 2px 0 var(--ntm-black);
		outline: none;
	}

	.ntm-faq-nav-item.is-faq-active a {
		border-color: var(--ntm-black);
		box-shadow: 2px 2px 0 var(--ntm-black);
		font-weight: 800;
	}

	.ntm-faq-accent-pink.is-faq-active a   { background: var(--ntm-pink); }
	.ntm-faq-accent-yellow.is-faq-active a { background: var(--ntm-yellow); }
	.ntm-faq-accent-green.is-faq-active a  { background: var(--ntm-green); }

	.ntm-faq-nav-count {
		flex-shrink: 0;
		color: var(--ntm-grey);
		font-family: "IBM Plex Mono", ui-monospace, monospace;
		font-size: 10px;
		font-weight: 700;
	}

	.ntm-faq-nav-item.is-faq-active .ntm-faq-nav-count {
		color: var(--ntm-black);
	}

	.ntm-faq-content { min-width: 0; }

	.ntm-faq-no-results {
		display: none;
		padding: 40px 0;
		text-align: center;
	}

	.ntm-faq-no-results-title {
		font-family: Oswald, Inter, sans-serif;
		font-size: 19px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.ntm-faq-no-results-sub {
		margin-top: 8px;
		color: var(--ntm-grey);
		font-size: 14px;
	}

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

	.ntm-faq-section {
		/* même offset que .ntm-faq-nav : évite que le header sticky (87px)
		   masque le haut de la section quand on clique une ancre du sommaire. */
		margin-bottom: 52px;
		scroll-margin-top: 103px;
	}

	.ntm-faq-section:last-child { margin-bottom: 0; }

	.ntm-faq-section.is-faq-empty { display: none; }

	.ntm-faq-section-head {
		display: flex;
		align-items: baseline;
		gap: 12px;
		margin-bottom: 20px;
		padding-bottom: 12px;
		border-bottom: 3px solid var(--ntm-black);
	}

	.ntm-faq-section-num {
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		gap: 8px;
		color: var(--ntm-grey);
		font-family: "IBM Plex Mono", ui-monospace, monospace;
		font-size: 12px;
		font-weight: 800;
	}

	.ntm-faq-section-num::before {
		content: "";
		width: 10px;
		height: 10px;
		border: 2px solid var(--ntm-black);
		background: var(--ntm-black);
	}

	.ntm-faq-accent-pink .ntm-faq-section-num::before   { background: var(--ntm-pink); }
	.ntm-faq-accent-yellow .ntm-faq-section-num::before { background: var(--ntm-yellow); }
	.ntm-faq-accent-green .ntm-faq-section-num::before  { background: var(--ntm-green); }

	.ntm-page .ntm-faq-section-head h2 {
		margin: 0;
		font-family: Oswald, Inter, sans-serif;
		font-size: clamp(17px, 2.2vw, 21px);
		font-weight: 800;
		letter-spacing: 0.01em;
		text-transform: uppercase;
	}

	.ntm-faq-list {
		display: flex;
		flex-direction: column;
		border: 2px solid var(--ntm-black);
		background: var(--ntm-white);
	}

	.ntm-faq-accent-pink .ntm-faq-list   { box-shadow: 4px 4px 0 var(--ntm-pink); }
	.ntm-faq-accent-yellow .ntm-faq-list { box-shadow: 4px 4px 0 var(--ntm-yellow); }
	.ntm-faq-accent-green .ntm-faq-list  { box-shadow: 4px 4px 0 var(--ntm-green); }

	.ntm-faq-item {
		border-bottom: 2px solid var(--ntm-black);
	}

	.ntm-faq-item:last-child { border-bottom: none; }

	.ntm-faq-item.is-faq-hidden { display: none; }

	.ntm-page .ntm-faq-question {
		display: flex;
		width: 100%;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		padding: 18px 20px;
		border: none;
		background: none;
		color: var(--ntm-black);
		font-family: Inter, sans-serif;
		font-size: clamp(15px, 1.8vw, 16px);
		font-weight: 700;
		line-height: 1.32;
		text-align: left;
		cursor: pointer;
		transition: background-color 120ms ease, color 120ms ease;
	}

	.ntm-page .ntm-faq-question:hover {
		background: var(--ntm-bg);
	}

	.ntm-page .ntm-faq-question[aria-expanded="true"] {
		background: var(--ntm-black);
		color: var(--ntm-white);
	}

	.ntm-faq-chevron {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		margin-top: 2px;
		transition: transform 200ms ease, stroke 120ms ease;
	}

	.ntm-page .ntm-faq-question[aria-expanded="true"] .ntm-faq-chevron {
		transform: rotate(180deg);
	}

	.ntm-faq-accent-pink .ntm-faq-question[aria-expanded="true"] .ntm-faq-chevron   { stroke: var(--ntm-pink); }
	.ntm-faq-accent-yellow .ntm-faq-question[aria-expanded="true"] .ntm-faq-chevron { stroke: var(--ntm-yellow); }
	.ntm-faq-accent-green .ntm-faq-question[aria-expanded="true"] .ntm-faq-chevron  { stroke: var(--ntm-green); }

	.ntm-faq-answer {
		max-height: 0;
		overflow: hidden;
		transition: max-height 280ms ease;
	}

	.ntm-faq-answer[aria-hidden="false"] {
		max-height: 1400px;
	}

	.ntm-faq-answer-inner {
		padding: 16px 20px 22px;
		border-top: 2px solid var(--ntm-black);
		color: var(--ntm-black);
		font-size: 14px;
		line-height: 1.62;
		font-weight: 500;
	}

	.ntm-faq-answer-inner p { margin: 0 0 12px; }
	.ntm-faq-answer-inner p:last-child { margin-bottom: 0; }
	.ntm-faq-answer-inner strong { color: var(--ntm-black); }

	.ntm-faq-answer-inner ul {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin: 4px 0 12px;
		padding-left: 0;
		list-style: none;
	}

	.ntm-faq-answer-inner ul li {
		position: relative;
		padding-left: 18px;
	}

	.ntm-faq-answer-inner ul li::before {
		content: "–";
		position: absolute;
		left: 0;
		color: var(--ntm-grey);
		font-weight: 700;
	}

	.ntm-faq-accent-pink .ntm-faq-answer-inner ul li::before   { color: var(--ntm-pink); }
	.ntm-faq-accent-yellow .ntm-faq-answer-inner ul li::before { color: var(--ntm-yellow); }
	.ntm-faq-accent-green .ntm-faq-answer-inner ul li::before  { color: var(--ntm-green); }

	.ntm-faq-page .ntm-final {
		padding-bottom: 100px;
	}

	@media (max-width: 900px) {
		.ntm-faq-layout {
			grid-template-columns: 1fr;
			gap: 24px;
			/* Réduit de 40px (valeur desktop héritée, pas remplacée avant 900px) — la
			   barre "Navigation rapide" avait trop d'espace au-dessus d'elle sur les
			   écrans entre 640 et 900px (retour de Mia le 12/08). */
			padding-top: 20px;
		}

		.ntm-faq-nav {
			/* 87px = hauteur du header sticky du site, sinon la barre de pills
			   se colle sous le header (z-index 9999) et disparaît dessous.
			   Séparation avec le contenu qui défile en dessous : ligne noire épaisse. */
			position: sticky;
			top: 87px;
			z-index: 5;
			padding: 12px 0;
			margin-bottom: 20px;
			background: var(--ntm-bg);
			border-bottom: 3px solid var(--ntm-black);
		}

		.ntm-faq-nav-label { display: none; }

		/* "Navigation rapide" — petit repère au-dessus du menu, essai du 12/08.
		   MARCHE ARRIÈRE : repasser "display: none;" ci-dessous pour le cacher. */
		.ntm-faq-mobile-nav-label {
			display: block;
			margin: 0 0 6px;
			color: var(--ntm-pink);
			font-family: "IBM Plex Mono", ui-monospace, monospace;
			font-size: 10px;
			font-weight: 800;
			letter-spacing: 0.1em;
			text-transform: uppercase;
		}

		.ntm-faq-nav-list {
			flex-direction: row;
			overflow-x: auto;
			gap: 6px;
			padding-bottom: 4px;
			white-space: nowrap;
			scrollbar-width: none;
			-webkit-overflow-scrolling: touch;
		}

		.ntm-faq-nav-list::-webkit-scrollbar { display: none; }

		.ntm-faq-nav-item { flex-shrink: 0; }

		.ntm-faq-nav-item a {
			border: 2px solid var(--ntm-black);
			background: var(--ntm-white);
			padding: 7px 12px;
			font-size: 12px;
		}

		.ntm-faq-nav-count { display: none; }

		/* Bascule pills / select / menu maison — voir $mobile_nav_mode en PHP. */
		.ntm-faq-nav--mobile-select .ntm-faq-nav-list { display: none; }
		.ntm-faq-nav--mobile-select .ntm-faq-mobile-select { display: block; }
		.ntm-faq-nav--mobile-pills .ntm-faq-mobile-select { display: none; }
		.ntm-faq-nav--mobile-custom .ntm-faq-nav-list { display: none; }
		.ntm-faq-nav--mobile-custom .ntm-faq-mobile-select { display: none; }
		.ntm-faq-nav--mobile-custom .ntm-faq-dropdown { display: block; }
	}

	@media (max-width: 640px) {
		.ntm-faq-hero {
			padding-top: 48px;
			padding-bottom: 30px;
		}
		.ntm-faq-layout {
			padding-top: 20px;
		}
	}