@charset "UTF-8";
/**
 * Escape Gamer — contenu éditorial
 *
 * Articles, archives, pages génériques, résultats de recherche et 404.
 * Chargée uniquement sur ces pages.
 */

/* =========================================================================
   1. En-tête de page
   ====================================================================== */

.eg-page-head {
	background: var(--eg-surface);
	border-bottom: 1px solid var(--eg-hair);
	padding-block: calc(var(--eg-u) * 7) calc(var(--eg-u) * 6);
}

.eg-page-head--dark {
	background: var(--eg-dark);
	border-bottom-color: var(--eg-line);
	color: #EDEAE4;
}

.eg-page-head .eg-kicker {
	display: flex;
	align-items: center;
	gap: 7px;
}

.eg-page-head__h {
	margin: 0;
	max-width: 22ch;
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: clamp(28px, 4.4vw, 46px);
	line-height: 1.05;
	letter-spacing: -.014em;
	text-wrap: balance;
}

.eg-page-head--dark .eg-page-head__h {
	color: #F6F3EE;
}

.eg-page-head__stat {
	margin: 14px 0 0;
	font-family: var(--eg-mono);
	font-size: 13px;
	color: var(--eg-muted);
}

.eg-page-head--dark .eg-page-head__stat {
	color: #8B94A0;
}

.eg-page-head__stat b {
	color: var(--eg-ink);
	font-weight: 700;
}

.eg-page-head--dark .eg-page-head__stat b {
	color: var(--eg-lamp);
}

.eg-page-head__desc {
	margin-top: 16px;
	max-width: 62ch;
	font-size: 16.5px;
	color: var(--eg-ink-2);
}

.eg-page-head--dark .eg-page-head__desc {
	color: #B4BCC7;
}

.eg-page-head__cta {
	margin-top: 26px;
}

/* --- Corps de texte ---------------------------------------------------- */

.eg-prose {
	font-size: 17px;
	line-height: 1.72;
	color: var(--eg-ink-2);
}

.eg-prose > * + * {
	margin-top: 1.15em;
}

.eg-prose h2,
.eg-prose h3,
.eg-prose h4 {
	font-family: var(--eg-display);
	font-weight: 600;
	color: var(--eg-ink);
	line-height: 1.16;
	letter-spacing: -.008em;
	margin-top: 1.9em;
	text-wrap: balance;
}

.eg-prose h2 { font-size: 27px; }
.eg-prose h3 { font-size: 21px; font-weight: 500; }
.eg-prose h4 { font-size: 18px; font-weight: 500; }

.eg-prose a {
	color: var(--eg-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.eg-prose a:hover {
	color: var(--eg-accent-hi);
}

.eg-prose strong,
.eg-prose b {
	color: var(--eg-ink);
	font-weight: 700;
}

.eg-prose img,
.eg-prose iframe,
.eg-prose video {
	max-width: 100%;
	height: auto;
	display: block;
}

.eg-prose figure {
	margin-inline: 0;
}

.eg-prose figcaption {
	margin-top: 8px;
	font-family: var(--eg-mono);
	font-size: 12.5px;
	color: var(--eg-muted);
}

.eg-prose blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--eg-accent);
	font-size: 19px;
	line-height: 1.5;
	color: var(--eg-ink);
}

.eg-prose ul,
.eg-prose ol {
	padding-left: 22px;
}

.eg-prose li + li {
	margin-top: .4em;
}

.eg-prose li::marker {
	color: var(--eg-accent);
}

.eg-prose code {
	font-family: var(--eg-mono);
	font-size: .9em;
	background: var(--eg-surface);
	border: 1px solid var(--eg-hair);
	padding: 1px 5px;
}

.eg-prose pre {
	background: var(--eg-dark);
	color: #DDE3EA;
	padding: 18px 20px;
	overflow-x: auto;
	font-family: var(--eg-mono);
	font-size: 13.5px;
}

.eg-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	display: block;
	overflow-x: auto;
}

.eg-prose th,
.eg-prose td {
	text-align: left;
	padding: 10px 14px 10px 0;
	border-bottom: 1px solid var(--eg-hair);
}

.eg-prose th {
	font-family: var(--eg-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eg-muted);
	font-weight: 400;
}

.eg-prose hr {
	border: none;
	border-top: 1px solid var(--eg-hair-2);
	margin-block: 2.2em;
}


/* --- Chapeau et ornements de lecture ------------------------------------ */

/**
 * Le premier paragraphe d'un article sans extrait rédigé fait office de
 * chapeau. Un cran au-dessus du corps, sans en changer la couleur : le
 * lecteur entre dans le texte au lieu de buter dessus.
 */
.eg-doc__body > p:first-of-type {
	font-size: 19px;
	line-height: 1.6;
	color: var(--eg-ink);
}

/**
 * Les images intercalées débordent légèrement de la colonne de lecture.
 * Elles respirent sans casser le rythme du texte, et restent dans la
 * page sur les écrans étroits.
 */
.eg-doc__body > figure,
.eg-doc__body > .wp-block-image {
	width: min(calc(100% + 120px), 100vw - 32px);
	margin-left: 50%;
	transform: translateX(-50%);
	margin-block: 2.2em;
}

.eg-prose > figure img,
.eg-prose > .wp-block-image img {
	width: 100%;
}

.eg-prose figcaption {
	max-width: 68ch;
	margin-inline: auto;
	text-align: center;
}

/* Citation détachée. */
.eg-prose blockquote {
	position: relative;
	margin-block: 1.8em;
	padding: 6px 0 6px 26px;
	border-left: 3px solid var(--eg-lamp);
	font-family: var(--eg-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.38;
	letter-spacing: -.006em;
	color: var(--eg-ink);
}

.eg-prose blockquote p {
	margin: 0;
}

.eg-prose blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--eg-mono);
	font-size: 12px;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--eg-muted);
}

/* Barre de contexte sous le titre. */



/* =========================================================================
   3. Carte d'article
   ====================================================================== */

.eg-post {
	position: relative;
	background: var(--eg-surface);
	border: 1px solid var(--eg-hair);
	transition: border-color .2s, transform .2s, box-shadow .2s;
}

.eg-post:hover {
	border-color: var(--eg-hair-2);
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(20, 24, 30, .09);
}

.eg-post__link {
	display: block;
	height: 100%;
}

.eg-post__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--eg-hair);
}

.eg-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.eg-post:hover .eg-post__media img {
	transform: scale(1.045);
}

/**
 * Voile discret au bas de l'image : la puce de rubrique doit rester
 * lisible quelle que soit la photo qui se trouve derrière.
 */
.eg-post__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(180deg, transparent, rgba(18, 22, 28, .55));
	opacity: 0;
	transition: opacity .25s;
	pointer-events: none;
}

.eg-post__media:has(.eg-post__cat)::after {
	opacity: 1;
}

.eg-post__fallback {
	display: grid;
	place-items: center;
	height: 100%;
	background: var(--eg-dark-2);
	color: rgba(240, 201, 122, .42);
}

.eg-post__fallback-ic {
	font-size: 42px;
	stroke-width: 1.3;
}

.eg-post__body {
	padding: calc(var(--eg-u) * 2.5) calc(var(--eg-u) * 2.75) calc(var(--eg-u) * 3);
}

/* --- Rubrique et date --------------------------------------------------- */

/**
 * La rubrique se pose sur l'image, la date reste dans le corps. Les
 * deux sont issues du même paragraphe : c'est la mise en forme qui les
 * sépare, pas le balisage.
 */
.eg-post__date {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-family: var(--eg-mono);
	font-size: 11px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--eg-muted);
}

/**
 * La puce de rubrique se pose sur l'image, en bas à gauche. Elle vit
 * dans le conteneur du média — et non dans la ligne de date — pour que
 * son ancrage ne dépende d'aucun calcul de hauteur.
 */
.eg-post__cat {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	padding: 5px 10px;
	background: var(--eg-lamp);
	color: var(--eg-dark);
	font-family: var(--eg-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.eg-post__title {
	margin: 0 0 10px;
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: -.004em;
	text-wrap: balance;
	transition: color .16s;
}

.eg-post:hover .eg-post__title {
	color: var(--eg-accent);
}

.eg-post__excerpt {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--eg-muted);
}

/* --- Article mis en avant ----------------------------------------------- */

/**
 * Premier article de la première page seulement. Son image est
 * l'élément LCP de l'index : elle est la seule demandée en priorité
 * haute.
 */
.eg-post--lead {
	margin-bottom: calc(var(--eg-u) * 3.5);
	border-color: var(--eg-hair-2);
}

.eg-post--lead .eg-post__link {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: stretch;
}

.eg-post--lead .eg-post__media {
	aspect-ratio: auto;
	min-height: 360px;
}

.eg-post--lead .eg-post__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: calc(var(--eg-u) * 5.5) calc(var(--eg-u) * 6);
}

.eg-post--lead .eg-post__cat {
	left: 20px;
	bottom: 20px;
	font-size: 11px;
	padding: 6px 12px;
}

.eg-post--lead .eg-post__date {
	margin-bottom: 12px;
}

.eg-post--lead .eg-post__title {
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.014em;
	margin-bottom: 14px;
}

.eg-post--lead .eg-post__excerpt {
	font-size: 16.5px;
	line-height: 1.65;
	max-width: 46ch;
}

.eg-post__more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 24px;
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eg-accent);
	transition: gap .2s;
}

.eg-post--lead:hover .eg-post__more {
	gap: 15px;
}

@media (max-width: 860px) {
	.eg-post--lead .eg-post__link {
		grid-template-columns: 1fr;
	}

	.eg-post--lead .eg-post__media {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.eg-post--lead .eg-post__body {
		padding: calc(var(--eg-u) * 3.5) calc(var(--eg-u) * 3);
	}
}

/* =========================================================================
   3 bis. Rubriques du blog
   ====================================================================== */

.eg-topics {
	background: var(--eg-surface);
	border-bottom: 1px solid var(--eg-hair);
	position: sticky;
	top: 76px;
	z-index: 40;
}

.eg-topics__in {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.eg-topics__in::-webkit-scrollbar {
	display: none;
}

.eg-topic {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 16px 15px;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--eg-muted);
	transition: color .16s, border-color .16s;
}

.eg-topic span {
	font-family: var(--eg-mono);
	font-size: 11px;
	letter-spacing: 0;
	color: var(--eg-hair-2);
	font-variant-numeric: tabular-nums;
}

.eg-topic:hover {
	color: var(--eg-ink);
}

.eg-topic.is-on {
	color: var(--eg-ink);
	border-bottom-color: var(--eg-accent);
}

.eg-topic.is-on span {
	color: var(--eg-accent);
}

/* --- À lire aussi -------------------------------------------------------- */

.eg-related {
	padding-block: calc(var(--eg-u) * 8);
	border-top: 1px solid var(--eg-hair);
	content-visibility: auto;
	contain-intrinsic-size: auto 480px;
}

/* =========================================================================
   4. Résultats de recherche
   ====================================================================== */

.eg-results {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--eg-hair);
}

.eg-result {
	border-bottom: 1px solid var(--eg-hair);
}

.eg-result > a {
	display: block;
	padding: 22px 0;
	transition: padding-left .16s;
}

.eg-result > a:hover {
	padding-left: 10px;
}

.eg-result__type {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 7px;
	font-family: var(--eg-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--eg-muted);
}

.eg-result__note {
	padding: 2px 7px;
	background: var(--eg-dark);
	color: var(--eg-lamp);
	font-variant-numeric: tabular-nums;
}

.eg-result__title {
	margin: 0 0 6px;
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
}

.eg-result__excerpt {
	margin: 0;
	max-width: 74ch;
	font-size: 15px;
	color: var(--eg-muted);
}

/* =========================================================================
   5. Page 404
   ====================================================================== */

.eg-404 {
	background: var(--eg-dark);
	color: #EDEAE4;
	padding-block: calc(var(--eg-u) * 11) calc(var(--eg-u) * 9);
}

.eg-404__h {
	margin: 0 0 16px;
	max-width: 16ch;
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.04;
	letter-spacing: -.016em;
	color: #F6F3EE;
	text-wrap: balance;
}

.eg-404__sub {
	margin: 0 0 30px;
	max-width: 52ch;
	font-size: 18px;
	color: #B4BCC7;
}

.eg-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.eg-404__ghost {
	border-color: #333C49;
	color: #C9D0D9;
}

.eg-404__ghost:hover {
	border-color: var(--eg-lamp);
	color: var(--eg-lamp);
}

.eg-404__block {
	margin-top: calc(var(--eg-u) * 6);
	padding-top: calc(var(--eg-u) * 4);
	border-top: 1px solid var(--eg-line);
}

.eg-404__h2 {
	margin: 0 0 14px;
	font-family: var(--eg-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--eg-lamp);
}

.eg-404__quick {
	margin: 0;
}

/* =========================================================================
   6. Pagination, vides, commentaires
   ====================================================================== */

.eg-pagination,
.eg-sec .navigation.pagination {
	margin-top: calc(var(--eg-u) * 5);
	padding-top: calc(var(--eg-u) * 3);
	border-top: 1px solid var(--eg-hair-2);
}

.eg-pagination .nav-links,
.eg-sec .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.eg-pagination .page-numbers,
.eg-sec .navigation.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--eg-hair-2);
	font-family: var(--eg-mono);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	color: var(--eg-ink-2);
	transition: border-color .16s, background-color .16s, color .16s;
}

.eg-pagination .page-numbers:hover,
.eg-pagination .page-numbers.current,
.eg-sec .navigation.pagination .page-numbers:hover,
.eg-sec .navigation.pagination .page-numbers.current {
	background: var(--eg-accent);
	border-color: var(--eg-accent);
	color: #fff;
}

.eg-pagination .page-numbers.dots {
	border-color: transparent;
}

.eg-empty {
	padding: calc(var(--eg-u) * 6) 0;
	font-size: 17px;
	color: var(--eg-muted);
}

.eg-empty-box {
	max-width: 540px;
	padding: calc(var(--eg-u) * 6) calc(var(--eg-u) * 5);
	background: var(--eg-surface);
	border: 1px solid var(--eg-hair);
	text-align: center;
}

.eg-empty-box__ic {
	font-size: 44px;
	color: var(--eg-hair-2);
	margin-inline: auto;
	margin-bottom: 18px;
	stroke-width: 1.3;
}

.eg-empty-box h2 {
	margin: 0 0 10px;
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 22px;
}

.eg-empty-box p {
	margin: 0 auto 24px;
	max-width: 42ch;
	font-size: 15px;
	color: var(--eg-muted);
}

.eg-comments {
	padding-bottom: calc(var(--eg-u) * 7);
}

.eg-comments .comment-reply-title,
.eg-comments .comments-title {
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: 22px;
}

.eg-comments input[type="text"],
.eg-comments input[type="email"],
.eg-comments input[type="url"],
.eg-comments textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--eg-hair-2);
	border-radius: 0;
	background: var(--eg-surface);
	font-family: var(--eg-body);
	font-size: 15px;
}

.eg-comments input:focus,
.eg-comments textarea:focus {
	outline: none;
	border-color: var(--eg-accent);
}

.eg-comments input[type="submit"] {
	padding: 12px 22px;
	border: none;
	border-radius: 0;
	background: var(--eg-accent);
	color: #fff;
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

.eg-comments input[type="submit"]:hover {
	background: var(--eg-accent-hi);
}

/* =========================================================================
   6 bis. Page hors Elementor
   ====================================================================== */

.eg-page .eg-page-head {
	background: var(--eg-surface);
	border-bottom: 1px solid var(--eg-hair);
}

.eg-page .eg-page-head__h {
	max-width: 26ch;
}


.eg-pages {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 2em;
	padding-top: 1.2em;
	border-top: 1px solid var(--eg-hair);
	font-family: var(--eg-mono);
	font-size: 12.5px;
	color: var(--eg-muted);
}

.eg-pages a {
	padding: 3px 9px;
	border: 1px solid var(--eg-hair-2);
	color: var(--eg-ink-2);
}

.eg-pages a:hover {
	border-color: var(--eg-accent);
	color: var(--eg-accent);
}

/* =========================================================================
   6 ter. Aperçus d'articles rendus par MyListing
   ====================================================================== */

/**
 * Le widget « fil d'actualité » du thème parent est utilisé sur des
 * pages Elementor que nous ne reconstruisons pas. Son balisage lui
 * appartient ; on l'aligne simplement sur la carte d'article du blog,
 * pour que les deux ne cohabitent pas en se contredisant.
 */
.post-preview,
.blog-feed-widget .post-preview {
	background: var(--eg-surface);
	border: 1px solid var(--eg-hair);
	border-radius: 0;
	box-shadow: none;
	transition: border-color .18s, transform .18s;
}

.post-preview:hover {
	border-color: var(--eg-hair-2);
	transform: translateY(-2px);
}

.post-preview .pp-image,
.post-preview .post-preview-image {
	aspect-ratio: 16 / 10;
	background: var(--eg-hair);
	overflow: hidden;
}

.post-preview .pp-image img,
.post-preview .post-preview-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-preview h3,
.post-preview h4,
.post-preview .post-preview-title {
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.22;
	color: var(--eg-ink);
}

.post-preview .post-preview-date,
.post-preview .pp-date {
	font-family: var(--eg-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eg-muted);
}

/* =========================================================================
   6 quater. Profil d'auteur
   ====================================================================== */

/**
 * La page d'auteur reste rendue par le thème parent : elle embarque
 * l'onglet des annonces de l'utilisateur et son formulaire de contact,
 * que reconstruire ferait perdre. On l'habille seulement.
 */
.user-profile-cover {
	position: relative;
	aspect-ratio: 21 / 9;
	min-height: 260px;
	max-height: 420px;
	overflow: hidden;
	background: var(--eg-dark-2);
}

.user-profile-cover .profile-name h1,
.user-profile-cover .listing-main-info h1 {
	font-family: var(--eg-display);
	font-weight: 600;
	letter-spacing: -.012em;
	color: #F6F3EE;
}

/* =========================================================================
   7. Pages génériques du thème parent
   ====================================================================== */

/**
 * Les pages construites avec Elementor gardent leur propre mise en page.
 * On n'intervient que sur les sections que MyListing rend lui-même, pour
 * que les contenus hérités ne détonnent pas avec le reste.
 */
.i-section {
	background: transparent;
}

.i-section .case27-primary-text {
	font-family: var(--eg-display);
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--eg-ink);
}

.c27-content-wrapper {
	font-size: 17px;
	line-height: 1.72;
	color: var(--eg-ink-2);
}

.c27-content-wrapper a {
	color: var(--eg-accent);
}


/* =========================================================================
   8. Article : la salle liée, le partage, le rythme de lecture
   ====================================================================== */

/**
 * La fiche citée par l'article.
 *
 * Elle déborde volontairement de la colonne de lecture : c'est le seul
 * bloc de la page qui le fasse, et cette rupture signale qu'on quitte le
 * texte pour une destination.
 */
.eg-liee {
	max-width: 860px;
	margin: calc(var(--eg-u) * 5) auto calc(var(--eg-u) * 4);
	padding-inline: calc(var(--eg-u) * 3.25);
}

.eg-liee__lien {
	display: grid;
	grid-template-columns: 260px 1fr;
	background: var(--eg-dark);
	color: #EDEAE4;
	transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s;
}

.eg-liee__lien:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(20, 24, 30, .22);
}

.eg-liee__media {
	position: relative;
	min-height: 190px;
	background: var(--eg-dark-2) center / cover no-repeat;
}

.eg-liee__vide {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(240, 201, 122, .4);
}

.eg-liee__vide-ic {
	font-size: 52px;
	stroke-width: 1.2;
}

.eg-liee__note {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: baseline;
	gap: 2px;
	padding: 7px 12px 6px;
	background: var(--eg-lamp);
	color: var(--eg-dark);
	font-family: var(--eg-display);
	font-variant-numeric: tabular-nums;
}

.eg-liee__note b {
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
}

.eg-liee__note i {
	font-style: normal;
	font-size: 11px;
	opacity: .72;
}

.eg-liee__corps {
	padding: calc(var(--eg-u) * 3.25) calc(var(--eg-u) * 3.75);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.eg-liee__sur {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-family: var(--eg-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--eg-lamp);
}

.eg-liee__titre {
	margin: 0 0 10px;
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: clamp(20px, 2.4vw, 27px);
	line-height: 1.12;
	letter-spacing: -.01em;
	color: #F6F3EE;
	text-wrap: balance;
}

.eg-liee__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0 0 18px;
	font-size: 13.5px;
	color: #8B94A0;
}

.eg-liee__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.eg-liee__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eg-lamp);
	transition: gap .2s;
}

.eg-liee__lien:hover .eg-liee__cta {
	gap: 15px;
}

@media (max-width: 700px) {
	.eg-liee__lien {
		grid-template-columns: 1fr;
	}

	.eg-liee__media {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}

/* --- Partage -------------------------------------------------------------- */

.eg-partage {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 720px;
	margin-inline: auto;
	padding: 0 calc(var(--eg-u) * 3.25) calc(var(--eg-u) * 4);
}

.eg-partage__lbl {
	margin-right: 6px;
	font-family: var(--eg-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--eg-muted);
}

.eg-partage a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	font-size: 16px;
	border: 1px solid var(--eg-hair-2);
	color: var(--eg-ink-2);
	transition: border-color .16s, color .16s, transform .16s;
}

.eg-partage a:hover {
	border-color: var(--eg-accent);
	color: var(--eg-accent);
	transform: translateY(-2px);
}

/* --- Rythme de lecture ---------------------------------------------------- */

/**
 * Lettrine sur le premier paragraphe.
 *
 * Ces articles n'ont ni chapeau ni intertitre : rien ne marque l'entrée
 * dans le texte. La lettrine donne ce point de départ sans exiger que
 * la rédaction change quoi que ce soit.
 */

/**
 * Sections héritées du thème.
 *
 * Certains articles embarquent des blocs .pf-head / .pf-body produits
 * par MyListing : ce sont les rubriques du test — Accueil, Scénario,
 * Décors. Sans mise en forme, elles se confondaient avec le corps du
 * texte et l'article paraissait sans structure.
 */
.eg-prose .pf-head {
	margin-top: 2em;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--eg-hair-2);
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.16;
	color: var(--eg-ink);
}

.eg-prose .pf-body {
	margin-top: .9em;
}

/* Le titre de section ne doit pas hériter de la lettrine. */
.eg-prose .pf-body > p:first-child::first-letter {
	float: none;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
}

/* =========================================================================
   9. Gabarit d'article
   ====================================================================== */

.eg-doc {
	--eg-doc-rail: 210px;
	--eg-doc-col: 700px;
}

/* --- Ouverture ------------------------------------------------------------ */

/**
 * Sans image, le bandeau reprend l'aplat sombre de l'accueil. Avec
 * image, celle-ci devient le fond et le titre se pose dessus.
 *
 * Dans les deux cas la hauteur est fixée d'avance : l'image ne peut
 * donc pas déplacer le titre en arrivant.
 */
.eg-doc__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(300px, 42vh, 460px);
	background: var(--eg-dark);
	overflow: hidden;
	isolation: isolate;
}

.eg-doc__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.eg-doc__voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(18, 22, 28, .40) 0%, rgba(18, 22, 28, .10) 30%, rgba(18, 22, 28, .78) 72%, rgba(18, 22, 28, .96) 100%),
		linear-gradient(90deg, rgba(18, 22, 28, .70) 0%, rgba(18, 22, 28, .10) 62%);
}

.eg-doc__grille {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .14;
	background-image:
		linear-gradient(#3C4756 1px, transparent 1px),
		linear-gradient(90deg, #3C4756 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(70% 70% at 18% 30%, #000, transparent 74%);
	mask-image: radial-gradient(70% 70% at 18% 30%, #000, transparent 74%);
}

.eg-doc__hero-in {
	position: relative;
	width: 100%;
	max-width: var(--eg-wrap);
	margin-inline: auto;
	padding: calc(var(--eg-u) * 7) calc(var(--eg-u) * 3.25) calc(var(--eg-u) * 5.5);
}

.eg-doc__fil {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-family: var(--eg-mono);
	font-size: 11.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #A6AEBA;
}

.eg-doc__fil a {
	color: var(--eg-lamp);
}

.eg-doc__fil i {
	width: 22px;
	height: 1px;
	background: #4E5867;
}

.eg-doc__h {
	margin: 0;
	max-width: 20ch;
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: clamp(30px, 4.6vw, 56px);
	line-height: 1.02;
	letter-spacing: -.018em;
	color: #F6F3EE;
	text-wrap: balance;
}

.eg-doc__lede {
	margin: 18px 0 0;
	max-width: 54ch;
	font-size: 18.5px;
	line-height: 1.5;
	color: #C3CAD4;
}

/* --- Deux colonnes -------------------------------------------------------- */

.eg-doc__grid {
	display: grid;
	grid-template-columns: var(--eg-doc-rail) minmax(0, var(--eg-doc-col)) 1fr;
	gap: calc(var(--eg-u) * 6);
	max-width: var(--eg-wrap);
	margin-inline: auto;
	padding: calc(var(--eg-u) * 6) calc(var(--eg-u) * 3.25);
}

/**
 * La colonne d'appui reste à l'écran pendant la lecture. Elle porte ce
 * qu'on veut pouvoir consulter à tout moment — durée, signature, partage
 * — sans avoir à remonter.
 */
.eg-doc__rail-in {
	position: sticky;
	top: 100px;
}

.eg-doc__faits {
	margin: 0 0 26px;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--eg-hair);
}

.eg-doc__faits > div + div {
	margin-top: 14px;
}

.eg-doc__faits dt {
	font-family: var(--eg-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--eg-muted);
}

.eg-doc__faits dd {
	margin: 4px 0 0;
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 16px;
	color: var(--eg-ink);
}

.eg-doc__body {
	padding: 0;
	max-width: none;
}

.eg-doc__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 26px;
}

.eg-doc__tags a {
	padding: 4px 10px;
	border: 1px solid var(--eg-hair-2);
	font-size: 12.5px;
	color: var(--eg-ink-2);
}

.eg-doc__tags a:hover {
	border-color: var(--eg-accent);
	color: var(--eg-accent);
}

/* Le partage passe en colonne dans le rail. */
.eg-doc__rail .eg-partage {
	flex-wrap: wrap;
	max-width: none;
	margin: 0;
	padding: 0;
}

.eg-doc__rail .eg-partage__lbl {
	flex: 1 0 100%;
	margin: 0 0 10px;
}

@media (max-width: 1080px) {
	.eg-doc__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--eg-u) * 4);
		max-width: 820px;
	}

	.eg-doc__rail-in {
		position: static;
	}

	.eg-doc__faits {
		display: flex;
		flex-wrap: wrap;
		gap: 26px;
		margin-bottom: 20px;
	}

	.eg-doc__faits > div + div {
		margin-top: 0;
	}
}

/* --- Navigation d'article ------------------------------------------------- */

.eg-doc__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	max-width: var(--eg-wrap);
	margin: 0 auto calc(var(--eg-u) * 7);
	background: var(--eg-hair);
	border: 1px solid var(--eg-hair);
}

.eg-doc__nav-item {
	background: var(--eg-surface);
	padding: 22px 26px;
	transition: background-color .16s;
}

.eg-doc__nav-item:hover {
	background: var(--eg-accent-soft);
}

.eg-doc__nav-item--next {
	text-align: right;
}

.eg-doc__nav-lbl {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-family: var(--eg-mono);
	font-size: 10.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--eg-muted);
}

.eg-doc__nav-item--next .eg-doc__nav-lbl {
	justify-content: flex-end;
}

.eg-doc__nav-ic {
	font-size: 12px;
	transition: transform .18s;
}

.eg-doc__nav-ic--prev {
	transform: rotate(180deg);
}

.eg-doc__nav-item:hover .eg-doc__nav-ic {
	transform: translateX(3px);
}

.eg-doc__nav-item:hover .eg-doc__nav-ic--prev {
	transform: rotate(180deg) translateX(3px);
}

.eg-doc__nav-t {
	font-family: var(--eg-display);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.22;
	color: var(--eg-ink);
}

@media (max-width: 640px) {
	.eg-doc__nav {
		grid-template-columns: 1fr;
	}

	.eg-doc__nav-item--next,
	.eg-doc__nav-item--next .eg-doc__nav-lbl {
		text-align: left;
		justify-content: flex-start;
	}
}

/* La lettrine s'applique au nouveau corps. */
.eg-doc__body > p:first-of-type::first-letter {
	float: left;
	margin: 6px 12px 0 0;
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: 64px;
	line-height: .82;
	color: var(--eg-accent);
}

/* La salle liée s'aligne sur la colonne de lecture. */
.eg-doc .eg-liee {
	max-width: var(--eg-wrap);
	padding-inline: calc(var(--eg-u) * 3.25);
	margin-bottom: calc(var(--eg-u) * 6);
}

/**
 * Page sans colonne d'appui.
 *
 * Une page n'a ni durée de lecture ni signature : la grille se réduit à
 * la colonne de texte, centrée.
 */
.eg-doc--page .eg-doc__grid {
	grid-template-columns: minmax(0, var(--eg-doc-col));
	justify-content: center;
}

.eg-doc--page .eg-doc__h {
	max-width: 24ch;
}

/* --- La plaque du bandeau ------------------------------------------------- */

/**
 * Un dégradé ne suffit pas.
 *
 * Sur une photo de salle — souvent claire, contrastée, avec des visages
 * et des objets partout — aucun voile n'assure une lisibilité constante :
 * le titre se perd dès qu'une zone claire passe dessous.
 *
 * On pose donc une plaque opaque sous le texte. Elle ne dépend d'aucune
 * caractéristique de l'image, donc le titre reste lisible quelle que soit
 * la photo — y compris celles qui seront ajoutées demain.
 *
 * Elle est aussi un objet graphique en soi : un carton posé sur la
 * photographie, décalé vers le bas, comme une légende d'exposition.
 */
.eg-doc__plaque {
	max-width: 40rem;
	padding: calc(var(--eg-u) * 3.5) calc(var(--eg-u) * 4);
	background: rgba(18, 22, 28, .90);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border-left: 3px solid var(--eg-lamp);
	box-shadow: 0 22px 50px rgba(0, 0, 0, .34);
}

.eg-doc__plaque .eg-doc__h {
	max-width: none;
	font-size: clamp(27px, 3.5vw, 44px);
}

.eg-doc__plaque .eg-doc__lede {
	max-width: none;
	font-size: 17px;
	margin-top: 14px;
}

.eg-doc__plaque .eg-doc__fil {
	margin-bottom: 12px;
}

/**
 * Sans image, la plaque n'a plus lieu d'être : le bandeau est déjà
 * sombre et uniforme. On la rend transparente pour éviter un carton
 * sombre sur fond sombre.
 */
.eg-doc:not(.eg-doc--illustre) .eg-doc__plaque {
	max-width: 46rem;
	padding-inline: 0;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-left: none;
	box-shadow: none;
}

@media (max-width: 640px) {
	.eg-doc__plaque {
		padding: calc(var(--eg-u) * 2.75) calc(var(--eg-u) * 2.5);
	}
}


/* =========================================================================
   10. Équipe
   ====================================================================== */

/**
 * Remplacement de la grille d'AWSM Team Pro.
 *
 * Le portrait passe devant. C'est ce qui distingue les membres — les
 * noms, eux, se ressemblent tous typographiquement — et ces photos
 * racontent quelque chose : un couple, une fratrie, une équipe.
 *
 * La bio s'ouvre au clic, dans un <details> natif : le navigateur gère
 * l'ouverture, le clavier et les lecteurs d'écran, sans une ligne de
 * JavaScript ni les 170 Ko de l'extension.
 */
.eg-equipe {
	margin-block: calc(var(--eg-u) * 4) calc(var(--eg-u) * 6);
}

.eg-equipe__h {
	margin: 0 0 calc(var(--eg-u) * 3);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--eg-hair-2);
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: clamp(21px, 2.8vw, 28px);
	letter-spacing: -.01em;
	color: var(--eg-ink);
}

.eg-equipe__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: calc(var(--eg-u) * 3);
	align-items: start;
}

.eg-membre {
	background: transparent;
	border: none;
}

.eg-membre__tete {
	display: block;
	cursor: pointer;
	list-style: none;
}

.eg-membre__tete::-webkit-details-marker {
	display: none;
}

/* --- Le portrait ---------------------------------------------------------- */

.eg-membre__photo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--eg-dark-2) center / cover no-repeat;
	overflow: hidden;
	filter: grayscale(1) contrast(1.06);
	transition: filter .3s ease;
}

/**
 * Un filet doré se déploie depuis le bas au survol. Discret, mais il
 * signale que la carte est cliquable sans ajouter d'ornement permanent.
 */
.eg-membre__photo::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--eg-lamp);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.eg-membre:hover .eg-membre__photo,
.eg-membre[open] .eg-membre__photo {
	filter: none;
}

.eg-membre:hover .eg-membre__photo::after,
.eg-membre[open] .eg-membre__photo::after {
	transform: scaleX(1);
}

.eg-membre__initiale {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: 54px;
	color: var(--eg-lamp);
}

/* Le « plus » se pose sur le portrait, en pastille. */
.eg-membre__plus {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	background: rgba(18, 22, 28, .78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color .2s;
}

.eg-membre[open] .eg-membre__plus {
	background: var(--eg-lamp);
}

.eg-membre__plus::before,
.eg-membre__plus::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	height: 1.8px;
	background: var(--eg-lamp);
	transition: transform .26s cubic-bezier(.2, .8, .2, 1), background-color .2s;
}

.eg-membre__plus::after {
	transform: rotate(90deg);
}

.eg-membre[open] .eg-membre__plus::before,
.eg-membre[open] .eg-membre__plus::after {
	background: var(--eg-dark);
}

.eg-membre[open] .eg-membre__plus::after {
	transform: rotate(0deg);
}

/* --- Le nom --------------------------------------------------------------- */

.eg-membre__txt {
	display: block;
	padding-top: 14px;
}

.eg-membre__nom {
	display: block;
	font-family: var(--eg-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.16;
	letter-spacing: -.004em;
	color: var(--eg-ink);
	text-wrap: balance;
	transition: color .16s;
}

.eg-membre:hover .eg-membre__nom {
	color: var(--eg-accent);
}

.eg-membre__accroche {
	display: block;
	margin-top: 5px;
	font-size: 13.5px;
	font-style: italic;
	line-height: 1.4;
	color: var(--eg-muted);
}

/* --- La bio --------------------------------------------------------------- */

/**
 * Fiche ouverte.
 *
 * Le <details> n'est délibérément PAS un conteneur de grille.
 *
 * Chrome enveloppe désormais tout ce qui suit le <summary> dans une
 * boîte interne (::details-content). Un « display: contents » sur le
 * summary ne suffit donc plus : la bio n'est jamais un véritable élément
 * de grille, et se retrouve rendue dans la première colonne quelle que
 * soit la colonne qu'on lui assigne.
 *
 * La mise en page se fait donc à l'intérieur du summary — portrait et
 * nom côte à côte — et la bio s'écoule en dessous, simplement décalée
 * pour s'aligner sur le nom. Aucune dépendance au fonctionnement interne
 * de <details>.
 */
.eg-membre[open] {
	grid-column: 1 / -1;
	padding: calc(var(--eg-u) * 3);
	background: var(--eg-surface);
	border: 1px solid var(--eg-hair);
}

.eg-membre[open] .eg-membre__tete {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: calc(var(--eg-u) * 3.5);
	align-items: center;
}

.eg-membre[open] .eg-membre__txt {
	padding-top: 0;
}

.eg-membre[open] .eg-membre__nom {
	font-size: clamp(21px, 2.4vw, 27px);
	color: var(--eg-ink);
}

.eg-membre[open] .eg-membre__accroche {
	margin-top: 8px;
	font-size: 15px;
}

.eg-membre__bio {
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--eg-ink-2);
}

.eg-membre[open] .eg-membre__bio {
	margin: calc(var(--eg-u) * 3) 0 0 calc(210px + var(--eg-u) * 3.5);
	max-width: 68ch;
}

.eg-membre__bio p {
	margin: 0 0 .85em;
}

.eg-membre__bio p:last-child {
	margin-bottom: 0;
}

@media (max-width: 760px) {
	.eg-membre[open] .eg-membre__tete {
		grid-template-columns: 130px minmax(0, 1fr);
		gap: calc(var(--eg-u) * 2);
	}

	.eg-membre[open] .eg-membre__bio {
		margin-left: 0;
	}
}

@media (max-width: 620px) {
	.eg-equipe__grille {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: calc(var(--eg-u) * 2.25);
	}

	.eg-membre[open] {
		padding: calc(var(--eg-u) * 2);
	}
}

/* Les intertitres du contenu, centrés par l'éditeur, restent centrés. */
.eg-prose h2[style*="center"] {
	margin-top: 2.2em;
}

/* 2.32.8 : le sommaire des articles */
.eg-sommaire { margin: 0 0 28px; padding: 16px 20px 14px; background: var(--eg-surface, #fff); border: 1.5px solid var(--eg-hair, #E4E0D9); box-shadow: 0 6px 0 var(--eg-hair, #E4E0D9); }
.eg-sommaire__titre { margin: 0 0 8px; font-family: var(--eg-mono, "Courier Prime", monospace); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--eg-warm, #B76E12); }
.eg-sommaire ol { margin: 0; padding: 0 0 0 22px; columns: 2; column-gap: 28px; font-size: 15px; line-height: 1.45; }
.eg-sommaire li { margin: 0 0 6px; break-inside: avoid; }
.eg-sommaire a { color: var(--eg-ink, #14181E); text-decoration: none; border-bottom: 1px solid var(--eg-hair-2, #CFC9BF); }
.eg-sommaire a:hover { color: var(--eg-warm, #B76E12); border-color: currentColor; }
.eg-prose h2[id] { scroll-margin-top: 90px; }
@media (max-width: 640px) { .eg-sommaire ol { columns: 1; } }