/**
 * EGMtheme — Section « Activité récente » (le mur de la communauté). Session 371.
 *
 * ⭐ ***CETTE FEUILLE NE PORTE AUCUNE COULEUR EN DUR.*** Toutes les couleurs, toutes les tailles de
 * texte et tous les rayons sont des RÉGLAGES, posés en `style` inline par `EGMtheme_Community`.
 * Ce qui vit ici, c'est la STRUCTURE — ce qui ne se règle pas depuis un écran d'admin : la grille,
 * les axes, les points de rupture. La 370 a payé la leçon inverse sur « Espaces ».
 *
 * 🪤 **Une exception, et elle est le cœur du fichier** : ce qui doit BASCULER (`:hover`, `[hidden]`,
 * l'onglet actif) se déclare ICI, jamais en ligne — ⭐ *une déclaration inline l'emporte sur toute
 * règle de feuille de style, `:hover` comprise*. L'inline ne donne que les VALEURS, via des
 * variables `--egm-community-*` que ces règles-ci consomment.
 *
 * 📐 Mesures relevées sur `IA/Galerie Tizofun trois designs`, section `#feed`, fenêtre 1440 px.
 */

.egmtheme-community {
	width: 100%;
}

/* La rangée : le fil prend deux parts, la colonne de droite une (modèle : 2 1 520 / 1 1 290). */
.egmtheme-community__inner {
	margin: 0 auto;
	/* 1291 — le réglage `section.padding` arrive en variable (en ligne), cf. le téléphone plus bas. */
	padding: var(--egm-community-sec-pad, 44px 32px 64px);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.egmtheme-community__main {
	flex: 2 1 520px;
	min-width: 0;
	/* 📦 R11 (831, audit responsive S733) — LE FIL EST UN CONTENEUR. Sa largeur ne suit pas la
	   fenêtre : 836 px à 900 (seul sur sa ligne), 556 px à 960 (la colonne de droite revient à
	   côté). Ce qui s'adapte DANS le fil (la galerie, les posts) se mesure donc à lui, ⛔ plus à
	   l'écran. `inline-size` : la largeur vient de la rangée flex (`2 1 520px`), jamais du contenu. */
	container: egm-community-feed / inline-size;
}

/* ── L'entête : titre à gauche, onglets poussés à droite ──────────────────────────────────── */

.egmtheme-community__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}

.egmtheme-community__title {
	margin: 0;
	font-weight: 600;
}

.egmtheme-community__tabs {
	display: flex;
	gap: 2px;
	margin-left: auto;
	padding: 3px;
	border-radius: 9px;
}

/*
 * 🪤 374 — LES QUATRE VALEURS DE L'ONGLET SONT DES VARIABLES, POSÉES SUR LE CONTENEUR.
 *
 * ⭐ ***UNE DÉCLARATION EN LIGNE NE PEUT PAS ÊTRE REPRISE PAR UNE FEUILLE.*** Tant que le
 * producteur peignait `background` et `color` **sur chaque bouton**, la règle `.is-active`
 * ci-dessous ne pouvait pas gagner : le premier onglet restait blanc pour toujours et un second
 * s'allumait à côté de lui — deux curseurs, jamais un (signalement porteur, 2026-09-06).
 * ⇒ le producteur ne donne plus que les **valeurs** ; la feuille décide **qui** les porte.
 */
.egmtheme-community__tab {
	padding: 7px 14px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font-size: var(--egm-community-tab-fs, 14px);
	color: var(--egm-community-tab-color, #7a6440);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * 🪤 L'onglet actif est un ÉTAT, donc il vit dans la feuille. Le producteur ne pose en ligne que
 * la couleur de repos ; sans cette règle, cliquer un onglet ne changerait rien à l'œil parce que
 * l'inline du premier onglet gagnerait toujours.
 */
.egmtheme-community__tab.is-active {
	background: var(--egm-community-tab-active-bg, #fff);
	color: var(--egm-community-tab-active-color, #0d1024);
}

/* ── Le fil ───────────────────────────────────────────────────────────────────────────────── */

.egmtheme-community__list {
	overflow: hidden;
}

/*
 * 🗂️ 372 — LE SÉLECTEUR DE NATURE CACHE, IL NE SUPPRIME PAS.
 *
 * ⭐ *Un `[hidden]` servi n'est pas un pixel caché* ([[a-served-hidden-attribute-is-not-a-hidden-pixel]]) :
 * la règle d'agent utilisateur tombe dès qu'une règle d'auteur donne un `display` à l'élément —
 * et `article`/`p` en reçoivent un plus haut. Les trois sélecteurs sont donc reposés ici.
 */
.egmtheme-community__post[hidden],
.egmtheme-community__gallery[hidden],
.egmtheme-community__empty[hidden] {
	display: none !important;
}

.egmtheme-community__post:last-of-type {
	border-bottom: 0 !important;
}

/*
 * 🛤️ 612 — CHAQUE PUBLICATION ROULE ENTRE DEUX RAILS, ET TOUT VIT DANS L'ARTICLE.
 * Consigne porteur (18-09) : *45 px vides à gauche et à droite de la section de post pour réduire
 * la largeur d'un post ; puis une ligne verticale grise fine de chaque côté, suivie d'un padding —
 * deux rails discrets de haut en bas ; toutes ces modifs dans `article.egmtheme-community__post`,
 * ⛔ pas en dehors* — puis (12:1x) : *« fais passer la largeur des espaces vides de 45 px à 57 px »*.
 * La géométrie, de l'extérieur vers le texte : **57 px** vides · **1 px** de
 * filet · le retrait du modèle (`--egm-community-post-pad`, 22 px). Les filets sont deux
 * pseudo-éléments absolus qui courent du haut au bas de l'article : posés sur chaque publication,
 * ils se prolongent d'une publication à l'autre (seul le séparateur horizontal les traverse).
 * ⛔ Aucune couleur ici : le producteur sert `--egm-community-rail` (= `feed.border`) en ligne.
 * Dans la carte de 932 px (coque 1360, colonne 332, 1 px de bordure) le texte passe de 886 à
 * **770 px** de large (930 − 2 × (57 + 1 + 22)).
 */
.egmtheme-community__post {
	--egm-community-rail-inset: 57px;
	/* 📦 R11 (831) — le post est le conteneur de SA fiche, de sa ressource et de ses compteurs :
	   la taille lue est sa boîte de contenu (= la largeur de la fiche). */
	container: egm-community-post / inline-size;
	position: relative;
	padding: var(--egm-community-post-pad, 22px)
		calc(var(--egm-community-rail-inset) + 1px + var(--egm-community-post-pad, 22px));
}

.egmtheme-community__post::before,
.egmtheme-community__post::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--egm-community-rail, #e3e5ee);
	pointer-events: none;
}

.egmtheme-community__post::before {
	left: var(--egm-community-rail-inset);
}

.egmtheme-community__post::after {
	right: var(--egm-community-rail-inset);
}

.egmtheme-community__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 13px;
}

.egmtheme-community__avatar {
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

.egmtheme-community__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
}

/*
 * 🏷️ Le logo du site est une MARQUE, pas un portrait : `contain` sur fond blanc.
 * 🪤 `cover` (le défaut ci-dessus, juste pour une photo) rognerait un logo carré-large en cercle
 * et en couperait le mot — ⭐ *un recadrage juste pour un visage est un massacre pour un logo.*
 */
.egmtheme-community__avatar--site {
	object-fit: contain;
	padding: 2px;
	box-shadow: inset 0 0 0 1px rgba(13, 16, 36, 0.08);
	/* ⛔ Aucune couleur ici : le fond du logo est un REGLAGE (`feed.siteAvatarBg`), posé en ligne. */
}

.egmtheme-community__identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.egmtheme-community__name {
	font-weight: 600;
}

.egmtheme-community__meta {
	margin-top: 1px;
}

.egmtheme-community__body {
	margin: 0 0 14px;
	line-height: 1.6;
	text-wrap: pretty;
}

/* ── La carte de ressource ────────────────────────────────────────────────────────────────── */

.egmtheme-community__resource {
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}

/* 🪤 Le survol bascule : il DOIT vivre ici (l'inline poserait la bordure de repos et gagnerait). */
@media (hover: hover) { /* 📱 807 — survol de couleur réservé à la souris (pas collé après un tap) */
.egmtheme-community__resource:hover {
	border-color: var(--egm-community-resource-border-hover, #c6cbdc) !important;
}
}

/*
 * 🖼️ 374 — L'APERÇU D'UNE FICHE EST UN A4 **PORTRAIT**, ET LE MODÈLE DESSINE DU 16/9.
 *
 * Un `object-fit: cover` centré prend donc une **bande du milieu** : ni le titre de la fiche, ni
 * les images du haut, ni les lignes du bas — la partie la moins reconnaissable de la page.
 * ⭐ *Un recadrage sans point d'ancrage garde le centre géométrique, ⛔ jamais le centre
 * d'intérêt.* ⇒ l'ancrage passe en haut : c'est là que vit ce qui identifie une fiche.
 * ⚠️ La netteté, elle, ne se règle pas ici : elle venait de la taille SERVIE (212 px pour une
 * carte de 560) — corrigée côté producteur, `medium_large` + `srcset`.
 */
.egmtheme-community__resource-cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center top;
}

/*
 * 📄 374 (2ᵉ passe) — LE POST D'UNE FICHE : LA PAGE DEBOUT À GAUCHE, LE TEXTE À DROITE.
 *
 * ⭐ ***UNE FORME DE CARTE SUIT LA FORME DE CE QU'ELLE MONTRE.*** Un aperçu de fiche est un A4
 * vertical (707 × 1000) ; le bandeau 16/9 du modèle en jetait les trois quarts. Ici, la hauteur
 * est bornée (réglage `sheetHeight`) et la largeur **obéit au ratio** — la fiche est entière.
 * 📐 `align-items: flex-start` : les deux colonnes commencent en haut, comme le regard.
 */
/*
 * 📐 374 — **LES FILETS TOUCHENT LES BORDS, ET C'EST LE BALISAGE QUI LE PERMET, ⛔ PAS LE STYLE.**
 *
 * > **Consigne porteur :** *« il manque une ligne verticale qui sépare la fiche et les zones de
 * > texte à droite ; puis la ligne horizontale [...] doit partir de cette ligne verticale pour
 * > toucher le contour à droite. »*
 *
 * ⭐ ***UN FILET QUI DOIT ATTEINDRE UN BORD NE PEUT PAS VIVRE À L'INTÉRIEUR D'UN RETRAIT.*** Tant
 * que la carte portait `padding: 16px`, **tout** ce qu'elle contient commençait 16 px trop tard et
 * finissait 16 px trop tôt : aucun trait tracé dedans ne pouvait toucher quoi que ce soit.
 * ⇒ le retrait quitte la carte et descend dans **chaque zone** : la carte redevient un cadre nu,
 *   la colonne de droite porte son filet **gauche** sur toute la hauteur, et le cartouche porte son
 *   filet **haut** sur toute la largeur de cette colonne — c'est-à-dire **de la verticale au bord**.
 * 📐 `align-items: stretch` : sans lui, la colonne ne descend pas jusqu'en bas et sa verticale
 *   s'arrête au milieu.
 */
.egmtheme-community__sheet {
	display: flex;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

.egmtheme-community__sheet-media {
	flex: none;
	display: block;
	/* 📐 L'image garde SON retrait : c'est elle qu'on encadre, ⛔ pas la carte. */
	margin: 16px;
	align-self: flex-start;
	/* ⛔ Aucune largeur : c'est le ratio de l'image qui la donne. La hauteur vient du réglage. */
	border-radius: 8px;
	overflow: hidden;
	/* 🎨 ⛔ Aucune couleur en dur : la loi de la 370 tient toute la feuille. Le fond n'est de
	   toute façon jamais visible — la boîte n'a que la largeur de l'image (`width:auto`). */
	box-shadow: 0 1px 2px rgba(13, 16, 36, 0.06), 0 6px 16px -8px rgba(13, 16, 36, 0.18);
	text-decoration: none;
}

.egmtheme-community__sheet-img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	/* 🖼️ `contain` et non `cover` : ⛔ rien n'est recadré — c'est toute la consigne. */
	object-fit: contain;
}

/*
 * 📐 374 — LA COLONNE DE DROITE A UN HAUT ET UN **PIED**.
 *
 * ⭐ ***UNE IDENTITÉ SE SIGNE EN BAS.*** La description occupe le haut, le cartouche (titre ·
 * matière · niveaux · mention) se pose au **pied**, a la hauteur du bas de la fiche. C'est
 * `space-between` qui le tient — et `align-self: stretch` qui donne a la colonne la hauteur de
 * l'image, ⛔ pas celle de son propre texte.
 * ⭐ *Sans hauteur de reference, `space-between` ne separe rien : il faut lui donner l'espace
 * qu'il est cense repartir.*
 */
.egmtheme-community__sheet-text {
	flex: 1;
	min-width: 0;
	/* 📐 La hauteur de reference reste celle de l'image : c'est elle qui aligne le cartouche. */
	min-height: calc(var(--egm-community-sheet-h, 260px) + 32px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* ✏️ LA VERTICALE demandee par le porteur : elle court sur toute la hauteur de la colonne. */
	border-left: 1px solid var(--egm-community-sheet-rule, transparent);
}

/*
 * 🏷️ Le cartouche est SEPARE du texte par un filet, ⛔ pas seulement par du vide : c'est ce qui le
 * fait lire comme une signature et non comme un dernier paragraphe.
 * ⭐ *Un blanc separe deux blocs ; un filet dit qu'ils ne sont pas de meme nature.*
 * ⛔ Aucune couleur en dur : le filet reprend celui de la carte, pose en variable par le producteur.
 */
.egmtheme-community__sheet-foot {
	display: flex;
	flex-direction: column;
	/* 📐 Le titre et sa mention RESPIRENT (consigne porteur) : 2 px les collaient. */
	gap: 7px;
	padding: 16px 18px;
	border-top: 1px solid var(--egm-community-sheet-rule, transparent);
	/* 🎨 La zone du cartouche est d'un gris un peu plus DENSE que le haut : elle se distingue
	   sans qu'on ait a lui dessiner un cadre. ⛔ Aucune couleur en dur — c'est un reglage. */
	background: var(--egm-community-sheet-foot-bg, transparent);
}

.egmtheme-community__sheet-desc {
	/* 📐 Le retrait vit ICI, ⛔ plus sur la carte : c'est ce qui laisse les filets toucher les bords. */
	margin: 0;
	padding: 16px 18px;
	line-height: 1.6;
	text-wrap: pretty;
}

/*
 * 📐 **LE TITRE DOIT GAGNER L'ŒIL, MÊME EN VENANT APRÈS.** La consigne place la description en
 * premier (c'est elle qui donne envie) et le titre en dessous (c'est lui qui nomme) — mais deux
 * blocs de même graisse à la même taille se lisent comme un seul pavé.
 * ⭐ *Dans une colonne, l'ordre dit la séquence et la GRAISSE dit la hiérarchie : sans la seconde,
 * la première ne se voit pas.*
 */
.egmtheme-community__sheet-title {
	display: block;
	margin-top: 4px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
	text-wrap: pretty;
}

@media (hover: hover) { /* 📱 807 — survol de couleur réservé à la souris (pas collé après un tap) */
.egmtheme-community__sheet-title:hover {
	text-decoration: underline;
}
}

.egmtheme-community__sheet-meta {
	display: block;
	margin-top: -4px;
}

/*
 * 📱 Fiche étroite (≤ 464 px, soit une fenêtre ≤ 600 px quand le fil est seul), la fiche garde sa
 * place à gauche mais rétrécit : la faire passer AU-DESSUS repousserait la description sous la
 * ligne de flottaison sur un téléphone.
 * ⭐ *Une colonne d'image qui devient un bandeau perd la raison pour laquelle elle existait.*
 * 📦 R11 (831) : `@container`, ⛔ plus `@media (max-width: 600px)`. Le seuil 464 est la largeur de
 * la fiche à 600 px de fenêtre (post 534 − 2 × 35 de retrait) : le téléphone rend à l'identique ;
 * ce qui change, c'est la fenêtre 900 → 1100 px où le fil partage sa rangée (fiche 394 px à 960) —
 * elle recevait la fiche de bureau (image 184 px, texte 176 px) et reçoit enfin la compacte.
 */
@container egm-community-post (max-width: 464px) {
	.egmtheme-community__sheet {
		gap: 12px;
		padding: 12px;
	}

	.egmtheme-community__sheet-media {
		height: 170px !important;
	}
}

/*
 * 📱 R11 (831) — SOUS 360 PX DE FICHE, L'IMAGE PASSE AU-DESSUS : MESURÉ, PAS SUPPOSÉ.
 * À 390 px de fenêtre la fiche fait 254 px : image 120 + retraits ⇒ la colonne de texte tombait à
 * **64 px** (un mot par ligne, fiche de **1 090 px** de haut, titre de 27 px de large sous la barre
 * d'onglets). L'arbitrage ci-dessus (« pas au-dessus ») valait tant que le texte gardait une
 * colonne lisible ; en dessous, c'est la colonne qui perd la raison pour laquelle elle existait.
 * ⇒ la fiche se centre au-dessus (hauteur du palier compact, 170 px), le filet vertical devient
 * horizontal. Seuil 359 : jusqu'à une fenêtre de 480 px (fiche 344) l'image monte ; à 520 (fiche
 * 384) et à 960 (fiche 394, fil partagé) elle reste à gauche avec ~220 px de texte.
 */
@container egm-community-post (max-width: 359px) {
	.egmtheme-community__sheet {
		flex-direction: column;
	}

	.egmtheme-community__sheet-media {
		align-self: center;
	}

	.egmtheme-community__sheet-text {
		min-height: 0;
		border-left: 0;
		border-top: 1px solid var(--egm-community-sheet-rule, transparent);
	}
}

.egmtheme-community__resource-body {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
}

.egmtheme-community__resource-text {
	flex: 1;
	min-width: 0;
}

.egmtheme-community__resource-title {
	display: block;
	font-weight: 600;
	text-wrap: pretty;
}

.egmtheme-community__resource-meta {
	display: block;
	margin-top: 4px;
}

.egmtheme-community__resource-cta {
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 14px; /* 🔠 1284 — plancher de lecture (ex-13,5) */
	font-weight: 600;
	white-space: nowrap;
}

/* ── 🎞️ La Smart Gallery intercalée (372) ─────────────────────────────────────────────────── */

/*
 * 📐 Mesures du modèle (`#feed`, bloc « Auteurs mis en avant ») : `padding:20px 58px`, sourcil
 * majuscule à `10.5px/.1em`, fond crème. Les 58 px latéraux ne sont PAS décoratifs : ce sont les
 * couloirs où le module pose ses flèches rondes de 36 px sans mordre sur les cartes.
 * ⛔ Aucune couleur ici : le fond et l'encre du sourcil sont des RÉGLAGES, posés en ligne.
 */
.egmtheme-community__gallery {
	position: relative;
	padding: 20px 58px;
}

.egmtheme-community__gallery-eyebrow {
	margin-bottom: 12px;
	font-size: 12.5px; /* 🔠 1284 — ex-10,5 ; sourcil en MAJUSCULES, lu comme un 14 */
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* 📱 Fil ≤ 576 px (fenêtre ≤ 640 px quand il est seul) : les couloirs des flèches mangeraient la
   carte, elles passent en surimpression. 📦 R11 (831) : mesuré au fil (`@container`), ⛔ plus à la
   fenêtre — à 960 px le fil ne fait que 556 px et gardait ses 2 × 58 px de couloirs. */
@container egm-community-feed (max-width: 576px) {
	.egmtheme-community__gallery {
		padding: 20px 16px;
	}
}

/* ── Les compteurs ────────────────────────────────────────────────────────────────────────── */

.egmtheme-community__counters {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 14px;
}

.egmtheme-community__counter {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: none;
	padding: 0;
	color: inherit;
	font: inherit;
}

/* 👆 1117 — « Partager » (`<button>`) et « Réutiliser » (`<a>`, compte connecté) sont des gestes :
   la main (signalé par le porteur, 02-10). Le ♻️ d'un visiteur reste un `<span>` ⇒ ⛔ pas de main. */
button.egmtheme-community__share,
a.egmtheme-community__reuse {
	cursor: pointer;
}

a.egmtheme-community__reuse {
	text-decoration: none;
}

.egmtheme-community__toggle {
	cursor: pointer;
	font-weight: 600;
}

/*
 * ❤️⭐ 375 — LES DEUX GESTES DU POST.
 * 🎨 ⛔ Aucune couleur ici : les deux teintes actives et la teinte de repos sont des REGLAGES,
 * servis en `style` inline par le producteur — la feuille ne tient que la forme et le mouvement.
 */
.egmtheme-community__react {
	cursor: pointer;
	font-weight: 600;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.egmtheme-community__react[disabled] {
	cursor: progress;
	opacity: 0.55;
}

/*
 * 🕳️ UN COMPTEUR A ZERO N'EST PAS UN COMPTEUR VIDE A COTE DU COEUR : sans cette regle, la
 * gouttiere de 6px du parent resterait, et le coeur porterait un blanc que rien ne remplit.
 * ⭐ *Un espace reserve a une valeur absente se lit comme une valeur perdue.*
 */
.egmtheme-community__react-count:empty {
	display: none;
}

/*
 * ✂️ 375 — LA DESCRIPTION QUI SE REPLIE. ⛔ Aucun script : c'est `<details>` qui deplie, donc
 * cela marche clavier coupe. La feuille ne fait que retirer le triangle natif et basculer
 * laquelle des deux mentions se montre.
 */
.egmtheme-community__desc-head {
	display: block;
	cursor: pointer;
	list-style: none;
}

.egmtheme-community__desc-head::-webkit-details-marker {
	display: none;
}

.egmtheme-community__desc-cta {
	margin-left: 6px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.egmtheme-community__desc:not([open]) .egmtheme-community__desc-cta--open,
.egmtheme-community__desc[open] .egmtheme-community__desc-cta--closed {
	display: none;
}

/*
 * 📐 Le surplus est la SUITE du meme paragraphe : il ne prend ni retrait ni marge haute, sinon
 * deplier casserait la colonne en deux blocs qui ne se lisent plus ensemble.
 */
.egmtheme-community__desc-tail {
	margin: 0;
}

.egmtheme-community__empty,
.egmtheme-community__foot {
	padding: 16px;
	margin: 0;
	text-align: center;
	font-size: 14px; /* 🔠 1284 — ex-13 */
}

.egmtheme-community__more {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
}

/*
 * 💬 L'ancre du fil de réponses. `[hidden]` est reposé ici parce que la règle d'agent utilisateur
 * (`display: none`) tombe dès qu'une règle d'auteur donne un `display` à l'élément — et
 * `.egmtheme-community__thread` en reçoit un plus bas. ⭐ *Un `[hidden]` servi n'est pas un pixel
 * caché* ⇒ [[a-served-hidden-attribute-is-not-a-hidden-pixel]].
 */
.egmtheme-community__thread[hidden] {
	display: none !important;
}

.egmtheme-community__thread {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--egm-community-divider, #f2f3f8);
}

/* ── La colonne de droite ─────────────────────────────────────────────────────────────────── */

/*
 * 📐 611 — LA COLONNE A UN PLAFOND : 330 px, LE MÊME QUE LE RAIL DU CATALOGUE.
 * `1 1 290` seul la laissait GRANDIR d'un tiers du reste : dans la coque de 1360 px du Tiz, elle
 * rendait ~460 px quand le rail de `/catalogue` en fait 330 — les widgets y étaient une fois et
 * demie plus larges que partout ailleurs. Consigne porteur (15-09, redite le 18-09) : *hors les
 * gouttières de la colonne, un widget fait 300 px*. La chaîne, en `border-box` : 330 − 2×1 de
 * bordure − 2×14 de gouttière = **300 px** de widget. Sous 900 px la colonne repasse sous le fil
 * et reprend toute la largeur (le plafond y est levé, voir plus bas).
 * 📐 612/613 (consigne porteur 15:2x, 18-09 : *« la colonne de la page de Tiz doit donc passer à
 * 332 »*) : 330 ⇒ **332**, pour que le CORPS d'un widget (sa bordure de 1 px déduite) fasse 300 px
 * — la pub reçoit ainsi une créative de 300, comme au rail du catalogue (302 − 2 = 300).
 */
.egmtheme-community__aside {
	flex: 1 1 290px;
	max-width: 332px;
	box-sizing: border-box;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 14px;
}

.egmtheme-community__pitch {
	padding: 22px;
	border-radius: 12px;
}

.egmtheme-community__pitch h3 {
	margin: 0 0 9px;
	font-size: 18px; /* 🔠 1284 — ex-16,5 */
	font-weight: 600;
}

.egmtheme-community__pitch p {
	margin: 0 0 18px;
	font-size: 15px; /* 🔠 1284 — ex-14 */
	line-height: 1.6;
	text-wrap: pretty;
}

.egmtheme-community__pitch-cta {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 14px; /* 🔠 1284 — ex-13,5 */
	font-weight: 600;
	text-decoration: none;
	/* ⛔ Aucune couleur ici : fond ET encre viennent du producteur (réglages `pitchBg`/`pitchColor`). */
}

.egmtheme-community__card {
	border-radius: 13px;
	overflow: hidden;
}

/* 📐 372 bis — le sourcil porte une PASTILLE avant son mot (mesure du modèle). */
.egmtheme-community__card-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 16px;
	/* 🏷️ 1529 (porteur) — tous les sourcils de widget = celui des pubs (1528) : 11 px, graisse 400
	   (ex-12,5 px gras, 1284). */
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

/* 🏷️ 1528 (porteur) — le sourcil d'une PUB s'écrit plus petit et en graisse normale (ex-12,5 px
   gras), même valeur que le Hub et `/catalogue`. */
.egmtheme-community__card--ad .egmtheme-community__card-head {
	font-size: 0.6875rem;
	font-weight: 400;
}

.egmtheme-community__card-dot,
.egmtheme-community__card-bullet {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	/* ⛔ Aucune couleur ici : la pastille du sourcil et celles des lignes sont posées en ligne. */
}

.egmtheme-community__card-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	font-size: 14px;
}

.egmtheme-community__card-row:last-child {
	border-bottom: 0 !important;
}

/*
 * 🪤 ⛔ Ne PAS revenir à `span:first-child { flex: 1 }` : depuis la 372 bis, le premier enfant
 * d'une ligne est la PASTILLE (ou le visage). L'ancienne règle l'étirait sur toute la largeur et
 * poussait le libellé hors de la carte. ⭐ *Une règle de position écrite pour un balisage donné
 * devient fausse le jour où le balisage gagne un enfant, et elle le fait EN SILENCE.*
 */
.egmtheme-community__card-label {
	flex: 1;
	min-width: 0;
}

/* Le visage d'un créateur : 34 px dans le modèle, ⛔ pas 38 comme dans le fil. */
.egmtheme-community__card-avatar {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
}

.egmtheme-community__card-avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	font-weight: 600;
}

.egmtheme-community__card-count {
	flex: none;
	font-size: 14px; /* 🔠 1284 — ex-12,5 */
	font-weight: 600;
	white-space: nowrap;
}

/*
 * 👤 374 — LA LIGNE D'UN CRÉATEUR A DEUX ÉTAGES (signalement porteur : *« j'y vois des caractères
 * collés qui rendent la lecture difficile »*).
 *
 * 🪤 **Le balisage était juste, il lui manquait sa feuille.** Deux `<span>` en ligne dans un
 * conteneur `flex` se retrouvent **côte à côte** : « Tizofun Education » et « 543 ressources »
 * se touchaient, puis le tout passait à la ligne n'importe où.
 * ⭐ *Un balisage à deux étages qui n'a pas reçu sa direction de disposition n'a pas d'étages :
 * il a deux voisins.*
 * 📐 Mesures du modèle (l. 555-558) : nom 14 px / 600, contexte 12,5 px, `margin-top:1px`.
 */
.egmtheme-community__card-identity {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.egmtheme-community__card-identity .egmtheme-community__card-label {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	/* 🪤 Un nom long ne doit pas pousser le bouton hors de la carte. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.egmtheme-community__card-meta {
	display: block;
	margin-top: 1px;
	font-size: 14px; /* 🔠 1284 — ex-12,5 */
	line-height: 1.35;
}

/*
 * 📐 La ligne d'un créateur respire un peu plus que celle d'un thème (modèle : 14px 20px).
 * 🪤 Une **classe** posée par le producteur, ⛔ pas un `:has()` : le sélecteur serait plus élégant
 * mais il ferait dépendre une mesure du modèle du support d'un navigateur.
 * ⭐ *Ce que le serveur sait déjà, il le DIT ; il ne le fait pas deviner à la feuille.*
 */
.egmtheme-community__card-row--creator {
	gap: 12px;
	padding: 14px 20px;
}

/*
 * 👤➕ 374 — LE BOUTON « SUIVRE ».
 *
 * 📐 Mesures du modèle : `padding:6px 11px` dans la colonne (l. 560), `7px 13px` sous une
 * publication (l. 425), `border-radius:7px`, 12,5 px / 600.
 * ⛔ Aucune couleur ici : fond, filet et encre viennent du producteur (réglages `follow*`), parce
 * qu'ils **basculent** avec l'état — et un état se déclare là où il change ({@see .is-following}).
 */
.egmtheme-community__follow {
	flex: none;
	padding: 6px 11px;
	border-radius: 7px;
	font-size: 14px; /* 🔠 1284 — ex-12,5 */
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) { /* 📱 807 — survol de couleur réservé à la souris (pas collé après un tap) */
.egmtheme-community__follow:hover {
	filter: brightness(0.97);
}
}

.egmtheme-community__follow[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* Sous une publication, le bouton est un peu plus grand et prend la droite de l'entête. */
.egmtheme-community__author .egmtheme-community__follow {
	margin-left: auto;
	padding: 7px 13px;
	font-size: 14px; /* 🔠 1284 — ex-13 */
}

/*
 * 📐 374 — LE BAS DE LA COLONNE EST COLLANT (modèle l. 537 : `position:sticky; top:93px`).
 * ⚠️ `align-self: flex-start` : sans lui, l'élément est étiré par le `stretch` de la colonne et
 * `sticky` n'a plus aucune marge de manœuvre — il ne colle jamais, sans une erreur.
 */
.egmtheme-community__aside-sticky {
	position: sticky;
	align-self: flex-start;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 📢 La carte publicitaire : son sourcil pousse la mention Premium à droite (modèle l. 541). */
.egmtheme-community__card-note {
	margin-left: auto;
	font-size: 13px; /* 🔠 1284 — ex-11,5 */
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

/*
 * 📢 374 — **LE CRÉNEAU NE GARDE RIEN POUR LUI.**
 *
 * > **Signalement porteur :** *« une fois de plus tu as créé un espace pub avec des espacements
 * > sur les côtés qui empêchent au contenu publicitaire de remplir l'espace alloué. »*
 *
 * Le `padding: 12px` venait du modèle — mais dans le modèle, ce qu'il entoure est un **cadre
 * pointillé de maquette**, pas une créative. Sur une carte de 356 px, il retirait **24 px** de
 * largeur utile à une annonce dont le format est fixe (300 × 250) : la régie ne pouvait plus
 * remplir ce qu'on lui avait promis.
 * ⭐ ***UN EMPLACEMENT PUBLICITAIRE SE MESURE AU PIXEL QU'IL DONNE, ⛔ PAS À CELUI QU'IL
 * DESSINE*** : la marge d'une maquette est un dessin ; dans un créneau, c'est une amputation.
 * ⇒ le créneau est **à fleur de carte**, et la créative s'y étale entièrement.
 */
.egmtheme-community__ad-slot {
	display: block;
	padding: 0;
	line-height: 0; /* ⛔ Aucun blanc fantôme sous une image en ligne. */
}

.egmtheme-community__ad-slot > * {
	display: block;
	width: 100%;
}

.egmtheme-community__ad-slot img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*
 * 📱 Sous 900 px, la colonne de droite passe SOUS le fil.
 * ⚠️ Le point de rupture est celui du contenu, pas celui d'un appareil : à 900 px, `2 1 520` et
 * `1 1 290` ne tiennent plus côte à côte sans que le titre d'une ressource se coupe.
 */
@media (max-width: 900px) {
	.egmtheme-community__main,
	.egmtheme-community__aside {
		flex: 1 1 100%;
	}

	/* 📐 611 — sous le fil, la colonne reprend toute la largeur : le plafond de 330 px ne vaut
	   que côte à côte. */
	.egmtheme-community__aside {
		max-width: none;
	}

	/* 🛤️ 612 — sous 900 px, 57 px vides de chaque côté coûteraient 114 px à un fil qui n'a plus
	   934 px : l'espace vide tombe à 12 px, les rails et le retrait du modèle restent. */
	.egmtheme-community__post {
		--egm-community-rail-inset: 12px;
	}
}

/*
 * 📱 1291/TYPO3 — DÉCISION 4 DU COLLÈGE (OK porteur 06-10, retouche de la consigne 612 des rails).
 * Mesuré à 390 px : section 32 + vide 12 + filet 1 + retrait 22 ⇒ texte des posts sur 254 px (65 %),
 * titre de ressource sur 130 px (4 lignes) à côté de « Réutiliser ».
 * ⇒ section 16 (fenêtre ≤ 512 px = fil ≤ 480 px), vide des rails 0 (filets gardés), retrait 14 ;
 *   et le bouton de la ressource passe SOUS le titre, qui reprend toute la largeur.
 */
@media (max-width: 512px) {
	.egmtheme-community__inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@container egm-community-feed (max-width: 480px) {
	/* 🪤 `--egm-community-post-pad` est posé EN LIGNE par le producteur (réglage `feed.postPadding`) :
	   le redéfinir ici perdrait. On écrit donc le retrait latéral lui-même (filet 1 + retrait 14). */
	.egmtheme-community__post {
		--egm-community-rail-inset: 0px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.egmtheme-community__resource-body {
		flex-wrap: wrap;
	}

	.egmtheme-community__resource-text {
		flex: 1 1 100%;
	}
}

/* 📦 R11 (831) — mesuré au post (fiche ≤ 384 px = fenêtre ≤ 520 px quand le fil est seul). */
@container egm-community-post (max-width: 384px) {
	.egmtheme-community__resource-body {
		flex-wrap: wrap;
	}

	.egmtheme-community__counters {
		gap: 14px;
	}
}

/*
 * 🙂 375 — LA BARRE DE REACTIONS EMOJI DE LA PUBLICATION.
 *
 * ⚠️ Elle est SERVIE par le serveur (lisible sans JavaScript), puis REMPLACEE par le composant du
 * Mur des classes, qui apporte le geste. Les deux etats partagent donc la meme rangee : ces
 * regles habillent le balisage du serveur, et `hub.css` (deja enfile avec l'ilot) habille celui
 * du composant.
 * ⛔ Aucune couleur de marque : le filet de « ma » reaction est pose en ligne par le producteur.
 */
.egmtheme-community__reactions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

.egmtheme-community__reaction {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}

/* 📐 Le composant du Mur arrive avec ses propres classes (`gh-reactions`) : on lui rend le meme
   rythme vertical que la rangee servie, pour que le remplacement ne fasse pas sauter la carte. */
.egmtheme-community__post .gh-reactions {
	margin-top: 14px;
}

/*
 * 👆 R9-bis (831, audit responsive S733 ; ⚖️ D1 porteur : 44 px au doigt, la souris garde sa
 * densité). Mesuré à 390 tactile sur `/` : onglets 34 · partager / répondre 29 × 20 et 84 × 20 ·
 * « voir plus » 21 · appel 40 · note de carte 17 · titre de fiche 39. ⭐ Le POINTEUR décide,
 * ⛔ pas la largeur. `--egm-tap-min` : le jeton public de la cible tactile (repli 44 = la valeur
 * servie tant que le socle public ne le déclare pas). `min-*` : un libellé qui se replie grandit.
 */
@media (pointer: coarse) {
	.egmtheme-community__tab,
	.egmtheme-community__more,
	.egmtheme-community__pitch-cta,
	.egmtheme-community__sheet-title {
		min-height: var(--egm-tap-min, 44px);
		box-sizing: border-box;
	}

	.egmtheme-community__tab,
	.egmtheme-community__pitch-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.egmtheme-community__sheet-title {
		display: flex;
		align-items: center;
	}

	.egmtheme-community__counter {
		min-width: var(--egm-tap-min, 44px);
		min-height: var(--egm-tap-min, 44px);
	}

	.egmtheme-community__card-note {
		display: inline-flex;
		align-items: center;
		min-height: var(--egm-tap-min, 44px);
	}
}