/**
 * L'article du blog « de nuit » (04/10/2026, demande de David : « que ce soit agréable »), dans la lignée de la liste du
 * blog (`lupeo-ds-blog.css`), des rayons, de la page Contact et des pages d'expertise.
 *
 * ─ Une COUCHE ─────────────────────────────────────────────────────────────────
 * Chargée après `lupeo-ds-pages.css` sur les seuls articles qui passent par `template-parts/article-lupeo.php`
 * (`functions.php` : `lupeo_est_article_nuit()`), portée `body.lp-article-nuit`. Elle ne change QUE l'habillage :
 * le `<h1>`, le fil d'Ariane, les intertitres, le texte, les liens, les images et leurs `alt`, le sommaire, les
 * données structurées et l'ordre des éléments dans le HTML sont ceux d'avant (SEO et GEO inchangés). Seul ajout au
 * gabarit : le portrait de l'auteur à la place de son initiale, décoratif (`alt=""`, le nom est écrit à côté).
 *
 * ─ Ce qui change ──────────────────────────────────────────────────────────────
 *  1. L'en-tête de nuit : fil d'Ariane, rubrique en pastille, titre blanc, chapô, signature en verre.
 *  2. La grande image à cheval sur le bas de la nuit, en carte arrondie.
 *  3. Le sommaire en carte, l'entrée active surlignée ; sur téléphone, une rangée de pastilles qui défile.
 *  4. Le texte : encre plus profonde pour la lecture, un trait vert au-dessus des intertitres, encadrés et tableaux
 *     arrondis, questions fréquentes en accordéon vert pâle.
 *  5. L'encadré de l'auteur en fin d'article avec son portrait.
 *
 * ⚠️ Le tableau large (4 colonnes ou plus) qui déborde à droite de la colonne de lecture est VOULU (demande de David du
 * 30/09/2026) : sa règle, dans `lupeo-ds-pages.css`, n'est pas touchée.
 */

body.lp-article-nuit {
	--ln-nuit: #0A1D18;
	--ln-eclat: #00D36B;
	--ln-menthe: #9FE8C4;
	--ln-texte: #37423D;
	--ln-chev: clamp(44px, 5.6vw, 88px);
	--ln-ombre: 0 1px 2px rgba(10, 29, 24, .06), 0 28px 60px -34px rgba(10, 29, 24, .42);
}

/* =========================================================
   1. L'en-tête de nuit
   ========================================================= */
body.lp-article-nuit .lp-art__tete {
	position: relative;
	isolation: isolate;
	padding-bottom: calc(var(--ln-chev) + clamp(20px, 2.6vw, 36px));
	color: rgba(255, 255, 255, .74);
}

/* Sans grande image : pas de chevauchement à réserver. */
body.lp-article-nuit .lp-art__tete:has(+ .lp-art__corps) {
	padding-bottom: clamp(32px, 4vw, 56px);
}

/* …et le texte ne colle pas au bas de la nuit. */
body.lp-article-nuit .lp-art__tete + .lp-art__corps {
	padding-top: clamp(32px, 4vw, 56px);
}

body.lp-article-nuit .lp-art__tete::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	background:
		radial-gradient(40% 110% at 4% 0%, rgba(0, 211, 107, .20) 0%, rgba(0, 211, 107, 0) 60%),
		radial-gradient(34% 80% at 86% 70%, rgba(0, 168, 150, .22) 0%, rgba(0, 168, 150, 0) 70%),
		var(--ln-nuit);
	pointer-events: none;
}

body.lp-article-nuit .lp-art__tete::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	right: calc(50% - 50vw);
	width: 46vw;
	background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, .04) 0 18px, rgba(255, 255, 255, 0) 18px 64px);
	-webkit-mask-image: radial-gradient(90% 90% at 100% 60%, #000 20%, transparent 75%);
	mask-image: radial-gradient(90% 90% at 100% 60%, #000 20%, transparent 75%);
	pointer-events: none;
}

body.lp-article-nuit .lp-art__tete .ct-breadcrumbs,
body.lp-article-nuit .lp-art__tete .ct-breadcrumbs a {
	color: rgba(255, 255, 255, .55);
}

body.lp-article-nuit .lp-art__tete .ct-breadcrumbs a:hover,
body.lp-article-nuit .lp-art__tete .ct-breadcrumbs a:focus-visible {
	color: var(--ln-menthe);
}

body.lp-article-nuit .lp-art__tete .ct-breadcrumbs > span:not(.last-item)::after {
	color: rgba(255, 255, 255, .28);
}

body.lp-article-nuit .lp-art__tete .ct-breadcrumbs .last-item,
body.lp-article-nuit .lp-art__tete .ct-breadcrumbs .last-item span {
	color: #fff;
}

/* La ligne de méta : la rubrique en pastille verte (quand elle existe), durée et date en mono clair. */
body.lp-article-nuit .lp-art__meta {
	color: rgba(255, 255, 255, .58);
}

body.lp-article-nuit .lp-art__sep {
	color: rgba(255, 255, 255, .28);
}

body.lp-article-nuit .lp-art__meta > span:first-child:nth-last-child(5) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px 6px 11px;
	border: 1px solid rgba(0, 211, 107, .35);
	border-radius: 999px;
	background: rgba(0, 211, 107, .10);
	color: #7CF0B5;
}

body.lp-article-nuit .lp-art__meta > span:first-child:nth-last-child(5)::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ln-eclat);
	box-shadow: 0 0 10px rgba(0, 211, 107, .8);
}

/* Le séparateur qui suivrait la pastille de rubrique n'a plus de raison d'être (il restait seul en bout de ligne). */
body.lp-article-nuit .lp-art__meta > span:first-child:nth-last-child(5) + .lp-art__sep {
	display: none;
}

body.lp-article-nuit .lp-art .lp-art__titre {
	color: #fff;
	font-size: clamp(32px, 4.6vw, 62px);
	line-height: 1;
	letter-spacing: -.04em;
}

body.lp-article-nuit .lp-art__lead {
	max-width: 62ch;
	font-size: clamp(17px, 1.4vw, 20px);
	color: rgba(255, 255, 255, .78);
}

/* La signature : une pastille de verre, le portrait à gauche. */
body.lp-article-nuit .lp-art__auteur {
	display: inline-flex;
	padding: 7px 20px 7px 7px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: rgba(255, 255, 255, .7);
}

body.lp-article-nuit .lp-art__auteur strong {
	color: #fff;
}

body.lp-article-nuit .lp-art__auteur-role {
	color: rgba(255, 255, 255, .6);
}

body.lp-article-nuit .lp-art__avatar {
	width: 46px;
	height: 46px;
	background: linear-gradient(135deg, var(--ln-eclat), #00A896);
	color: #06231A;
	font-size: 17px;
}

body.lp-article-nuit .lp-art__avatar--photo {
	overflow: hidden;
	background: #F2F4F3;
	box-shadow: 0 0 0 2px rgba(0, 211, 107, .55);
}

body.lp-article-nuit .lp-art__avatar--photo img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: 50% 18%;
}

/* =========================================================
   2. La grande image, à cheval sur la nuit
   ========================================================= */
body.lp-article-nuit .lp-art__tete + .lp-art__cadre:has(> .lp-art__hero) {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--ln-chev));
}

body.lp-article-nuit .lp-art__hero {
	border: 1px solid rgba(203, 230, 220, .9);
	border-radius: 28px;
	box-shadow: 0 60px 110px -60px rgba(1, 60, 56, .6), 0 2px 6px rgba(10, 15, 13, .05);
}

/* =========================================================
   3. Le sommaire
   ========================================================= */
body.lp-article-nuit .lp-art__toc > nav {
	padding: 20px 12px 12px;
	border: 1px solid var(--lp-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--ln-ombre);
}

body.lp-article-nuit .lp-art__toc-titre {
	padding: 0 10px;
}

body.lp-article-nuit .lp-art__toc-liste {
	border-left: 0;
	gap: 2px;
}

body.lp-article-nuit .lp-art__toc-liste a {
	margin-left: 0;
	padding: 9px 12px;
	border-left: 0;
	border-radius: 11px;
	transition: background-color .15s ease, color .15s ease;
}

body.lp-article-nuit .lp-art__toc-liste a:hover {
	background: var(--lp-green-50);
}

body.lp-article-nuit .lp-art__toc-liste a.is-actif {
	background: var(--lp-green-100);
	color: var(--lp-ink);
	box-shadow: inset 3px 0 0 var(--lp-green-400);
}

body.lp-article-nuit .lp-art__infos {
	border-radius: 16px;
}

/* =========================================================
   4. Le texte
   ========================================================= */
body.lp-article-nuit .lp-art__contenu,
body.lp-article-nuit .lp-art__contenu p,
body.lp-article-nuit .lp-art__contenu li {
	color: var(--ln-texte);
}

body.lp-article-nuit .lp-art__contenu {
	font-size: 17.5px;
}

body.lp-article-nuit .lp-art__contenu p,
body.lp-article-nuit .lp-art__contenu ul li {
	font-size: 17.5px;
}

body.lp-article-nuit .lp-art__contenu strong,
body.lp-article-nuit .lp-art__contenu b {
	color: var(--lp-ink);
}

/* Un trait vert au-dessus de chaque intertitre de section. */
body.lp-article-nuit .lp-art__contenu h2::before,
body.lp-article-nuit .lp-art__section > h2::before {
	content: "";
	display: block;
	width: 36px;
	height: 4px;
	margin: 0 0 14px;
	border-radius: 4px;
	background: var(--ln-eclat);
}

body.lp-article-nuit .lp-art__contenu img {
	border-radius: 18px;
}

/* Encadrés : la règle de la maison porte un liseré vert, l'avertissement reste ambre. */
body.lp-article-nuit .lp-art__contenu blockquote,
body.lp-article-nuit .lp-art__contenu .lupeo-regle {
	padding: 22px 24px;
	border-radius: 18px;
	box-shadow: inset 4px 0 0 var(--ln-eclat);
}

body.lp-article-nuit .lp-art__contenu .lupeo-alerte {
	padding: 20px 22px;
	border-radius: 18px;
}

/* Tableaux : coins plus ronds, ombre légère. */
body.lp-article-nuit .lp-art__contenu .lp-art__table {
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(10, 29, 24, .04), 0 18px 40px -30px rgba(10, 29, 24, .35);
}

/* Questions fréquentes : cartes arrondies, la question ouverte en vert pâle. */
body.lp-article-nuit .lupeo-faq {
	border-radius: 18px;
}

body.lp-article-nuit .lupeo-faq__item {
	transition: background-color .2s ease;
}

body.lp-article-nuit .lupeo-faq__item[open] {
	background: var(--lp-green-50);
}

/* =========================================================
   5. L'encadré de l'auteur, en fin d'article
   ========================================================= */
body.lp-article-nuit .lp-art__colonne .lupeo-auteur {
	position: relative;
	margin: 12px 0 52px;
	padding: 24px 26px 24px 108px;
	border: 1px solid #BEE7D5;
	border-radius: 24px;
	background: var(--lp-green-50);
}

body.lp-article-nuit .lp-art__colonne .lupeo-auteur::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 26px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	/* Le portrait (fichier de l'extension) ; le dégradé vert dessous est le secours si le fichier manque. */
	background:
		url("/wp-content/plugins/lupeo-modules/assets/equipe/benoit-400.webp") 50% 18% / cover no-repeat,
		linear-gradient(135deg, var(--ln-eclat), #00A896);
	box-shadow: 0 0 0 2px rgba(0, 211, 107, .55);
}

body.lp-article-nuit .lp-art__colonne .lupeo-auteur__nom {
	margin: 0 0 8px;
	font-size: 16.5px;
}

body.lp-article-nuit .lp-art__colonne .lupeo-auteur__texte {
	font-size: 15px;
	line-height: 1.65;
	color: var(--lp-ink-2);
}

body.lp-article-nuit .lp-art__colonne .lupeo-auteur__lien {
	margin-top: 12px;
	font-size: 14.5px;
}

/* =========================================================
   Tablette et téléphone
   ========================================================= */
@media (max-width: 1040px) {
	/* Le sommaire devient une rangée de pastilles qui défile ; la durée de lecture est déjà dans l'en-tête. */
	body.lp-article-nuit .lp-art__toc > nav {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	body.lp-article-nuit .lp-art__toc-titre {
		padding: 0;
		margin-bottom: 10px;
	}

	body.lp-article-nuit .lp-art__toc-liste {
		flex-direction: row;
		gap: 8px;
		margin: 0 calc(-1 * var(--lp-gouttiere));
		padding: 0 var(--lp-gouttiere) 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	body.lp-article-nuit .lp-art__toc-liste::-webkit-scrollbar {
		display: none;
	}

	body.lp-article-nuit .lp-art__toc-liste a {
		padding: 9px 14px;
		border: 1px solid var(--lp-line);
		border-radius: 999px;
		background: #fff;
		font-size: 13.5px;
		white-space: nowrap;
	}

	body.lp-article-nuit .lp-art__toc-liste a.is-actif {
		border-color: var(--lp-green-600);
		box-shadow: none;
	}

	body.lp-article-nuit .lp-art__infos {
		display: none;
	}

	body.lp-article-nuit .lp-art__hero {
		border-radius: 22px;
	}
}

@media (max-width: 760px) {
	body.lp-article-nuit {
		--ln-chev: 36px;
	}

	body.lp-article-nuit .lp-art__hero {
		border-radius: 18px;
	}

	body.lp-article-nuit .lp-art__contenu,
	body.lp-article-nuit .lp-art__contenu p,
	body.lp-article-nuit .lp-art__contenu ul li {
		font-size: 17px;
	}

	body.lp-article-nuit .lp-art__colonne .lupeo-auteur {
		padding: 94px 20px 20px;
		border-radius: 20px;
	}

	body.lp-article-nuit .lp-art__colonne .lupeo-auteur::before {
		top: 20px;
		left: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.lp-article-nuit .lp-art__toc-liste a,
	body.lp-article-nuit .lupeo-faq__item {
		transition: none;
	}
}