/*!
 * NS Portfolio, feuille de style du front.
 * Couleurs : jaune du thème Arter (#FFC107) ; le thème sombre est l'état par défaut de <body>,
 * le thème clair ajoute la classe .light-mode.
 */

/* ---------- Jetons ---------- */
body {
	--ns-accent: #ffc107;
	--ns-accent-text: #ffd24d;
	--ns-ink: #f5f5f5;
	--ns-ink-soft: rgba(245, 245, 245, .74);
	--ns-line: rgba(255, 255, 255, .10);
	--ns-panel: rgba(255, 255, 255, .04);
	--ns-spot-core: rgba(255, 224, 140, .34);
	--ns-spot-halo: rgba(255, 193, 7, .10);
}
body.light-mode {
	--ns-accent-text: #8a6100;
	--ns-ink: #1a1a1a;
	--ns-ink-soft: rgba(26, 26, 26, .72);
	--ns-line: rgba(26, 26, 26, .10);
	--ns-panel: rgba(255, 193, 7, .06);
	--ns-spot-core: rgba(255, 193, 7, .30);
	--ns-spot-halo: rgba(255, 193, 7, .12);
}

/* ---------- 1. Bascule de thème : révélation circulaire ---------- */
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }
html.ns-vt *,
html.ns-vt *::before,
html.ns-vt *::after {
	transition: none !important;
}

/* ---------- 2. Lampe torche ----------
 * Le halo est un pseudo-élément PLACÉ SOUS le contenu de la carte (isolation + z-index -1) :
 * il éclaire le fond sans jamais teinter le texte. Allumage instantané, extinction en 260 ms. */
@property --ns-spot {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}
html {
	--ns-spot: 0;
	transition-property: --ns-spot;
	transition-duration: 260ms;
	transition-timing-function: ease-out;
}
html.ns-spot-on {
	--ns-spot: 1;
	transition-duration: 0s;
}
.ns-halo {
	isolation: isolate;
}
.ns-halo:not([style*="position"]) {
	position: relative;
}
.ns-halo::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
	background:
		radial-gradient(110px circle at var(--ns-mx, -9999px) var(--ns-my, -9999px),
			color-mix(in srgb, var(--ns-spot-core) calc(var(--ns-spot) * 100%), transparent), transparent),
		radial-gradient(420px circle at var(--ns-mx, -9999px) var(--ns-my, -9999px),
			color-mix(in srgb, var(--ns-spot-halo) calc(var(--ns-spot) * 100%), transparent), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
	html { transition-duration: 0s; }
}

/* ---------- 3. Articles de veille : mise en page de lecture ---------- */
.ns-veille-article .single-post-text {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--ns-ink);
	max-width: 760px;
	margin-inline: auto;
	overflow-wrap: break-word;
}
.ns-veille-article .single-post-text p,
.ns-veille-article .single-post-text li {
	color: var(--ns-ink);
	font-size: inherit;
	line-height: inherit;
}
.ns-veille-article .single-post-text p { margin: 0 0 1.1em; }

.ns-veille-article .single-post-text h2 {
	font-size: clamp(21px, 2.2vw, 25px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--ns-ink);
	margin: 2.4em 0 .8em;
	padding-left: 14px;
	border-left: 4px solid var(--ns-accent);
	scroll-margin-top: 90px;
}
.ns-veille-article .single-post-text h3 {
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ns-accent-text);
	margin: 2em 0 .9em;
}
.ns-veille-article .single-post-text h4,
.ns-veille-article .single-post-text h5 {
	font-size: 17.5px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--ns-ink);
	margin: 1.6em 0 .45em;
}
/* Une actualité = un titre h4 suivi de son paragraphe : on les rassemble visuellement en fiche. */
.ns-veille-article .single-post-text h4 + p {
	padding: 14px 18px;
	border: 1px solid var(--ns-line);
	border-radius: 12px;
	background: var(--ns-panel);
}
.ns-veille-article .single-post-text ul,
.ns-veille-article .single-post-text ol {
	padding-left: 1.3em;
	margin: 0 0 1.2em;
}
.ns-veille-article .single-post-text li { margin: .35em 0; }
.ns-veille-article .single-post-text li::marker { color: var(--ns-accent); }
.ns-veille-article .single-post-text a {
	color: var(--ns-accent-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	word-break: break-word;
}
.ns-veille-article .single-post-text a:hover { text-decoration-thickness: 2px; }
.ns-veille-article .single-post-text strong { color: var(--ns-ink); }
.ns-veille-article .single-post-text code {
	font-size: .9em;
	padding: .1em .35em;
	border-radius: 5px;
	background: var(--ns-panel);
	border: 1px solid var(--ns-line);
}
.ns-veille-article .single-post-text blockquote {
	margin: 1.4em 0;
	padding: 12px 18px;
	border-left: 3px solid var(--ns-accent);
	background: var(--ns-panel);
	border-radius: 0 10px 10px 0;
}

/* En-tête : temps de lecture + sommaire */
.ns-article-head { margin: 0 0 2em; }
.ns-veille-article .single-post-text .ns-reading-time {
	display: inline-block;
	margin: 0 0 1em;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ns-accent-text);
	border: 1px solid color-mix(in srgb, var(--ns-accent) 45%, transparent);
}
.ns-toc {
	padding: 16px 20px;
	border: 1px solid var(--ns-line);
	border-radius: 14px;
	background: var(--ns-panel);
}
.ns-veille-article .single-post-text .ns-toc-title {
	margin: 0 0 .4em;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ns-ink-soft);
}
.ns-veille-article .single-post-text .ns-toc ol {
	margin: 0;
	padding-left: 1.3em;
	columns: 2;
	column-gap: 28px;
}
.ns-veille-article .single-post-text .ns-toc li {
	margin: .2em 0;
	font-size: 14.5px;
	break-inside: avoid;
}
.ns-veille-article .single-post-text .ns-toc a {
	color: var(--ns-ink);
	text-decoration: none;
}
.ns-veille-article .single-post-text .ns-toc a:hover { color: var(--ns-accent-text); text-decoration: underline; }

/* Glossaire en grille de fiches */
.ns-glossary {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	margin: 0 0 1.5em;
}
.ns-veille-article .single-post-text .ns-gterm {
	margin: 0;
	padding: 12px 14px;
	font-size: 14.5px;
	line-height: 1.6;
	border: 1px solid var(--ns-line);
	border-radius: 12px;
	background: var(--ns-panel);
}
.ns-veille-article .single-post-text .ns-gterm strong {
	display: block;
	margin-bottom: 2px;
	color: var(--ns-accent-text);
}

.ns-table-wrap {
	overflow-x: auto;
	margin: 0 0 1.4em;
	border: 1px solid var(--ns-line);
	border-radius: 12px;
}
.ns-table-wrap:focus-visible { outline: 2px solid var(--ns-accent); outline-offset: 2px; }
.ns-table-wrap table { margin: 0; min-width: 520px; }

@media (max-width: 767px) {
	.ns-veille-article .single-post-text { font-size: 16px; line-height: 1.7; }
	.ns-veille-article .single-post-text h2 { font-size: 20px; margin-top: 2em; }
	.ns-veille-article .single-post-text h4 { font-size: 16.5px; }
	.ns-veille-article .single-post-text .ns-toc ol { columns: 1; }
	.ns-veille-article .single-post-text h4 + p { padding: 12px 14px; }
}

/* ---------- Barre d'administration (connecté) ----------
 * Le menu horizontal du thème est fixé avec le même z-index (99999) que la barre d'administration :
 * ses menus déroulants passaient dessous. On la remet au premier plan. */
body.admin-bar #wpadminbar {
	z-index: 2147483647 !important;
}