/*
Theme Name:   Les Meilleurs Createurs
Theme URI:    https://lesmeilleurscreateurs.fr
Description:  Thème enfant GeneratePress pour lesmeilleurscreateurs.fr — fond noir, typographie blanche, accents bleus.
Author:       Les Meilleurs Créateurs
Template:     generatepress
Version:      1.0.0
Text Domain:  lmc-child
*/

/* ==========================================================================
   1. Jetons de design
   ========================================================================== */

:root {
	--lmc-ground:    #000000;
	--lmc-surface:   #0A0B0E;
	--lmc-surface-2: #111318;
	--lmc-line:      #22262F;
	--lmc-text:      #FFFFFF;
	--lmc-muted:     #8E95A3;
	--lmc-accent:    #2776FF;
	--lmc-accent-hi: #4E90FF;
	--lmc-gold:      #FFD700;

	--lmc-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--lmc-body:    "Roboto", "Helvetica Neue", Arial, sans-serif;

	--lmc-wrap: 1120px;
}

/* ==========================================================================
   2. Socle
   ========================================================================== */

body {
	background-color: var(--lmc-ground) !important;
	color: var(--lmc-text);
	font-family: var(--lmc-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.site,
.site-content,
#page,
#content,
.separate-containers .site-main,
.separate-containers .inside-article,
.one-container .site-content {
	background-color: transparent;
}

.grid-container {
	max-width: var(--lmc-wrap);
}

/* La démo laissait le conteneur de contenu sans marge intérieure : le texte
   touchait les bords de l'écran. Les bandes .lmc-alt continuent de déborder
   jusqu'aux bords grâce à leur box-shadow. */
.site-content,
.one-container .site-content {
	padding-left: clamp(20px, 4vw, 40px) !important;
	padding-right: clamp(20px, 4vw, 40px) !important;
	padding-bottom: clamp(48px, 7vw, 80px) !important;
}

body:not(.home) .site-content {
	padding-top: clamp(28px, 4vw, 44px);
}

a {
	color: var(--lmc-accent-hi);
}

a:hover,
a:focus {
	color: var(--lmc-accent);
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--lmc-accent);
	outline-offset: 3px;
}

::selection {
	background: var(--lmc-accent);
	color: #fff;
}

/* ==========================================================================
   3. Typographie
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lmc-display);
	color: var(--lmc-text);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(27px, 3.8vw, 40px); }
h3 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.015em; }
h4 { font-size: 19px; }

/* La démo importée colore les titres d'article en #14141a — invisible sur
   fond noir. Ces sélecteurs reprennent la main avec la spécificité qu'il faut. */
.entry-title,
.entry-title a,
.page-title,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: var(--lmc-text) !important;
}

.entry-content p,
.entry-content li {
	color: #D6D9E0;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: 68ch;
}

.entry-content strong { color: var(--lmc-text); font-weight: 700; }

.entry-content ul,
.entry-content ol { padding-left: 1.25em; }

.entry-content li { margin-bottom: 0.5em; }

.entry-content li::marker { color: var(--lmc-accent); }

/* Barre bleue sous les titres de section — la signature visuelle du site.
   S'ajoute en mettant la classe "lmc-titre" sur un titre dans l'éditeur. */
.lmc-titre {
	text-align: center;
}

.lmc-titre::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 22px auto 0;
	background: var(--lmc-accent);
	border-radius: 2px;
}

/* Sur-titre : classe "lmc-eyebrow" sur un paragraphe */
.lmc-eyebrow {
	font-family: var(--lmc-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lmc-accent);
	margin-bottom: 8px;
}

/* Chapô : classe "lmc-lede" */
.lmc-lede {
	font-size: 17.5px;
	color: var(--lmc-muted);
	max-width: 62ch;
}

.lmc-titre + .lmc-lede,
.lmc-lede.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   4. En-tête et navigation
   ========================================================================== */

.site-header {
	background-color: rgba(0, 0, 0, 0.88) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--lmc-line);
}

.site-header .header-image,
.site-logo img {
	max-height: 40px;
	width: auto;
}

.site-branding .main-title,
.site-branding .main-title a {
	font-family: var(--lmc-display);
	font-weight: 900;
	font-size: 18px;
	letter-spacing: -0.02em;
	color: var(--lmc-text);
	text-decoration: none;
}

/* Logo : « Les Meilleurs » en blanc + « Créateurs. » dans un bloc blanc
   incliné. Le bloc est incliné, le texte contre-incliné pour rester droit. */
.lmc-logo {
	margin: 0;
	line-height: 1;
}

/* La disposition vaut pour les deux emplois du logo : cliquable dans
   l'en-tête, simple marque dans le pied de page. Elle ne peut donc pas vivre
   sur « .lmc-logo a » seul — sans conteneur flex, le bloc incliné glisse sous
   le mot qui le précède. */
.lmc-logo a,
.lmc-logo-statique {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	padding-block: 2px;
}

.lmc-logo-word {
	font-family: var(--lmc-display);
	font-weight: 900;
	font-size: 19px;
	letter-spacing: -0.03em;
	color: var(--lmc-text);
	white-space: nowrap;
}

.lmc-logo-box {
	display: inline-block;
	background: var(--lmc-text);
	padding: 6px 13px 7px;
	transform: skewX(-13deg);
	border-radius: 2px;
}

.lmc-logo-box > span {
	display: inline-block;
	transform: skewX(13deg);
	font-family: var(--lmc-display);
	font-weight: 900;
	font-size: 19px;
	letter-spacing: -0.03em;
	color: var(--lmc-ground);
	white-space: nowrap;
}

.lmc-logo a:hover .lmc-logo-box {
	background: var(--lmc-accent);
}

.lmc-logo a:hover .lmc-logo-box > span {
	color: var(--lmc-text);
}

/* En-tête mobile : GeneratePress empile la recherche et le bouton de menu
   l'un sous l'autre, ce qui fait monter l'en-tête à 169px. On ramène tout
   sur une seule rangée. */
@media (max-width: 768px) {
	.site-header .inside-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 12px;
		padding: 6px 20px;
	}

	/* La navigation desktop reste dans le DOM à hauteur nulle : avec
	   space-between elle captait la position de droite et le bouton de menu
	   se retrouvait par-dessus le logo. On la masque et on pousse le bouton
	   à droite explicitement. */
	.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper) {
		display: none;
	}

	.site-header .mobile-menu-control-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: auto;
		height: auto;
		flex: 0 0 auto;
		margin-left: auto;
	}

	.site-header .mobile-menu-control-wrapper .menu-bar-items {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.site-header .site-branding { flex: 0 1 auto; min-width: 0; }
	.site-header .site-branding .lmc-logo a { flex-wrap: nowrap; }

	/* Une zone tactile confortable sur le logo sans le grossir. */
	.lmc-logo a { padding-block: 6px; gap: 7px; }

	/* Le bouton de menu et la loupe dictaient la hauteur de l'en-tête : 61px
	   de contenu pour une icône de 20. On les ramène à une cible tactile
	   confortable sans plus. */
	.site-header .menu-toggle,
	.site-header .search-item > a {
		padding-top: 12px;
		padding-bottom: 12px;
		line-height: 1;
	}

	.lmc-logo-word,
	.lmc-logo-box > span { font-size: 15px; }

	.lmc-logo-box { padding: 5px 10px 6px; }
}

@media (max-width: 400px) {
	.lmc-logo-word,
	.lmc-logo-box > span { font-size: 13px; letter-spacing: -0.04em; }

	.lmc-logo a { gap: 5px; }
	.lmc-logo-box { padding: 4px 8px 5px; }
}

.site-description {
	color: var(--lmc-muted);
	font-size: 13px;
}

.main-navigation,
.main-navigation .main-nav ul ul {
	background-color: transparent;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	font-family: var(--lmc-display);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--lmc-text);
}

.main-navigation .main-nav ul li a {
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	background-color: transparent;
	color: var(--lmc-text);
	border-bottom-color: var(--lmc-accent);
}

/* Sous-menus déroulants */
.main-navigation .main-nav ul ul li a {
	background-color: var(--lmc-surface-2);
	border: 0;
	border-left: 2px solid transparent;
	font-size: 14px;
}

.main-navigation .main-nav ul ul li:hover > a {
	background-color: var(--lmc-surface-2);
	border-left-color: var(--lmc-accent);
}

.main-navigation .main-nav ul ul {
	border: 1px solid var(--lmc-line);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
}

/* Le dernier élément du menu devient le bouton bleu.
   Coche "lmc-nav-cta" dans les classes CSS de l'élément de menu. */
.main-navigation .main-nav ul li.lmc-nav-cta > a {
	background: var(--lmc-accent);
	color: #fff;
	border-radius: 5px;
	border-bottom: 0;
	padding-top: 11px;
	padding-bottom: 11px;
	margin-left: 10px;
	line-height: 1;
	box-shadow: 0 0 30px -10px rgba(39, 118, 255, 0.9);
}

.main-navigation .main-nav ul li.lmc-nav-cta:hover > a,
.main-navigation .main-nav ul li.lmc-nav-cta > a:hover {
	background: var(--lmc-accent-hi);
	color: #fff;
	border-bottom: 0;
}

/* Menu mobile */
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
	color: var(--lmc-accent);
	background-color: transparent;
}

/* Panneau coulissant : la démo le laissait en #f7f7fc avec des liens gris —
   un panneau blanc sur un site noir. C'est la navigation principale sur
   téléphone, elle doit suivre la charte. */
#generate-slideout-menu,
#generate-slideout-menu.main-navigation,
.slideout-navigation.main-navigation {
	background-color: var(--lmc-ground);
	border-left: 1px solid var(--lmc-line);
}

#generate-slideout-menu .inside-navigation {
	padding: 12px 0;
}

#generate-slideout-menu .main-nav ul li,
#generate-slideout-menu .slideout-menu li {
	width: 100%;
}

/* Liens en pleine largeur : filets continus, et une zone tactile qui occupe
   toute la ligne plutôt que la seule largeur du texte. */
#generate-slideout-menu .main-nav ul li a,
#generate-slideout-menu .slideout-menu li a {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--lmc-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--lmc-text);
	padding: 18px 24px;
	border-bottom: 1px solid var(--lmc-line);
	border-left: 3px solid transparent;
}

#generate-slideout-menu .main-nav ul li a:hover,
#generate-slideout-menu .main-nav ul li[class*="current-menu-"] > a {
	color: var(--lmc-text);
	background-color: var(--lmc-surface-2);
	border-left-color: var(--lmc-accent);
}

/* Le CTA reste un bouton bleu, y compris dans le panneau. */
#generate-slideout-menu .main-nav ul li.lmc-nav-cta > a {
	background: var(--lmc-accent);
	color: #fff;
	margin: 16px 24px;
	padding: 16px 22px;
	border-radius: 5px;
	border: 0;
	text-align: center;
}

#generate-slideout-menu .main-nav ul li.lmc-nav-cta > a:hover {
	background: var(--lmc-accent-hi);
}

/* Croix de fermeture */
#generate-slideout-menu .slideout-exit,
.slideout-overlay button.slideout-exit {
	color: var(--lmc-text);
	padding: 18px 24px;
}

.slideout-overlay {
	background-color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
	.main-navigation .main-nav ul li a {
		border-bottom: 1px solid var(--lmc-line);
	}

	.main-navigation .main-nav ul li.lmc-nav-cta > a {
		margin: 10px 20px;
		text-align: center;
	}
}

/* ==========================================================================
   5. Boutons
   ========================================================================== */

.wp-block-button__link,
.gb-button,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-search__button {
	font-family: var(--lmc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	background-color: var(--lmc-accent);
	color: #fff;
	border: 2px solid transparent;
	border-radius: 5px;
	padding: 17px 30px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	box-shadow: 0 0 34px -8px rgba(39, 118, 255, 0.85);
}

.wp-block-button__link:hover,
.gb-button:hover,
button:hover,
.button:hover,
input[type="submit"]:hover {
	background-color: var(--lmc-accent-hi);
	color: #fff;
	transform: translateY(-2px);
}

/* Le site a été livré avec une démo GeneratePress dont le theme.json impose
   ses propres couleurs de boutons via `:root :where(.wp-element-button, …)`.
   Ces règles-ci sont volontairement plus spécifiques pour reprendre la main
   sur les seules déclarations qui portent l'identité visuelle. */
.wp-block-button > .wp-block-button__link,
.wp-block-button > .wp-block-button__link.wp-element-button,
.entry-content .wp-block-button__link {
	background-color: var(--lmc-accent);
	color: #fff;
	border-color: transparent;
}

.wp-block-button > .wp-block-button__link:hover,
.wp-block-button > .wp-block-button__link.wp-element-button:hover,
.entry-content .wp-block-button__link:hover {
	background-color: var(--lmc-accent-hi);
	color: #fff;
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--lmc-text);
	border-color: var(--lmc-line);
	box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--lmc-text);
	border-color: var(--lmc-accent);
}

/* Bouton secondaire : style "Contour" dans l'éditeur, ou classe lmc-btn-ghost */
.wp-block-button.is-style-outline .wp-block-button__link,
.lmc-btn-ghost .wp-block-button__link,
.gb-button.lmc-btn-ghost {
	background-color: transparent;
	color: var(--lmc-text);
	border-color: var(--lmc-line);
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.lmc-btn-ghost .wp-block-button__link:hover,
.gb-button.lmc-btn-ghost:hover {
	background-color: transparent;
	color: var(--lmc-text);
	border-color: var(--lmc-accent);
}

.wp-block-buttons {
	gap: 14px;
}

/* ==========================================================================
   6. Blocs de contenu
   ========================================================================== */

/* La démo applique un padding de 72px 24px à tous les conteneurs internes de
   blocs Groupe. Il s'ajoutait au nôtre : chaque section portait 124px de vide
   en haut comme en bas. On le neutralise et on pilote l'espacement depuis
   .lmc-section uniquement. */
.entry-content .wp-block-group__inner-container {
	padding: 0;
}

/* Espacement vertical des sections : classe "lmc-section" sur un groupe */
.lmc-section {
	padding-top: clamp(34px, 4.5vw, 58px);
	padding-bottom: clamp(34px, 4.5vw, 58px);
}

/* Le héros ouvre la page, juste sous l'en-tête : il respire moins par le haut
   que les sections suivantes, sinon l'écran d'accueil s'ouvre sur du vide. */
.home .entry-content > .lmc-section:first-child {
	padding-top: clamp(26px, 3vw, 44px);
	/* Compense l'espace repris au-dessus des marques, pour que le bloc suivant
	   ne descende pas. */
	padding-bottom: clamp(18px, 2.2vw, 30px);
}

/* Section alternée pleine largeur : classe "lmc-alt".
   Le fond déborde jusqu'aux bords de l'écran sans avoir à passer la page en
   pleine largeur dans GeneratePress — le box-shadow peint la zone hors
   conteneur, le clip-path l'empêche de dépasser en hauteur. */
.lmc-alt {
	background-color: var(--lmc-surface);
	border: 1px solid var(--lmc-line);
	border-radius: 14px;
	padding-left: clamp(18px, 3vw, 40px);
	padding-right: clamp(18px, 3vw, 40px);
}

/* Carte : classe "lmc-card" sur un groupe */
.lmc-card {
	background-color: var(--lmc-surface-2);
	border: 1px solid var(--lmc-line);
	border-radius: 8px;
	padding: 32px 30px;
}

/* Deux cartes côte à côte doivent faire la même hauteur, quelle que soit la
   longueur des textes : les colonnes s'étirent, la carte remplit sa colonne,
   et les boutons se calent en bas. L'égalité survit à une réécriture. */
.wp-block-columns:not(.is-not-stacked-on-mobile) {
	align-items: stretch;
}

.wp-block-column > .lmc-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.lmc-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.lmc-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 20px;
}

/* Carte mise en avant (le parcours MYM) : "lmc-card lmc-card-primary" */
.lmc-card-primary {
	border-color: rgba(39, 118, 255, 0.55);
	background-image: linear-gradient(180deg, rgba(39, 118, 255, 0.09), transparent 55%);
}

/* Héros de page d'atterrissage : classe "lmc-hero".
   Argumentaire centré et bouton visible sans défiler. Le titre de page de
   GeneratePress se masque automatiquement en sa présence (voir functions.php). */
.lmc-hero {
	margin-top: calc(-1 * clamp(28px, 4vw, 44px));
	padding-bottom: clamp(30px, 4vw, 48px);
	border-bottom: 1px solid var(--lmc-line);
	margin-bottom: clamp(30px, 4vw, 46px);
}

/* Rythme interne resserré : sur un portable de 900px de haut, l'espacement par
   défaut suffisait à repousser le bouton sous la ligne de flottaison. */
.lmc-hero .lmc-lede { margin-top: 16px; }
.lmc-hero .lmc-titre::after { margin-top: 16px; }
/* Sur une page à bannière, on resserre tout ce qui la précède : le héros doit
   démarrer haut. La règle « premier enfant sans marge » ajoutée pour les titres
   annulait sa remontée — on l'en exclut ici. */
/* « body.lmc-page-hero » et non « .lmc-page-hero » : à un seul point de
   spécificité près, « body:not(.home) .site-content » l'emportait et imposait
   ses 28px, si bien que cette remontée n'a jamais eu lieu. */
body.lmc-page-hero .site-content { padding-top: 10px; }
.lmc-page-hero .lmc-breadcrumb { margin-bottom: 16px; }
.entry-content > .lmc-hero:first-child { margin-top: calc(-1 * clamp(10px, 2vw, 22px)); }

.lmc-hero .wp-block-buttons { margin-top: 16px; }

/* Marque de la plateforme sous le bouton : comble le vide en fermant le bloc.
   Marque typographique, pas le logo officiel — voir README. */
.lmc-hero-marque {
	display: flex;
	justify-content: center;
	margin-top: 26px;
}

.lmc-hero-marque .marque {
	font-family: var(--lmc-display);
	font-weight: 900;
	font-size: 30px;
	letter-spacing: -.04em;
	color: var(--lmc-text);
	line-height: 1;
}
.lmc-hero .lmc-note { margin-top: 14px; }

.lmc-hero .wp-block-button__link {
	font-size: 17px;
	padding: 19px 34px;
}

/* Arguments : des bénéfices lisibles d'un coup d'œil. */
.lmc-arguments {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 44ch;
	margin: 18px auto 0;
	font-size: 15px;
	color: var(--lmc-muted);
	text-align: left;
}

.lmc-arguments span {
	position: relative;
	padding-left: 24px;
}

.lmc-arguments span::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: -1px;
	color: var(--lmc-accent);
	font-weight: 700;
}

.lmc-arguments strong { color: var(--lmc-text); }

/* Amorce du bouton : la phrase qui dit quoi faire. */
.lmc-cta-amorce {
	margin-top: 20px;
	font-family: var(--lmc-display);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--lmc-text);
}

/* Sur mobile : l'argumentaire et le bouton occupent l'écran visible, le visuel
   passe dessous. Le contenu de la page commence donc sous la ligne de
   flottaison, et le bouton reste dans le premier regard.
   L'unité svh tient compte de la barre d'adresse des navigateurs mobiles. */
@media (max-width: 768px) {
	.lmc-hero {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 112px = en-tête (73) + marge du contenu (10) + fil d'Ariane et sa
		   marge (29) : le bas du héros tombe ainsi au ras de l'écran, quelle
		   que soit la taille du téléphone. À réajuster si la hauteur de
		   l'en-tête change. */
		min-height: calc(100vh - 112px);
		min-height: calc(100svh - 112px);
	}

	/* Sur un écran de téléphone, l'argumentaire complet ne tient pas au-dessus
	   de la ligne de flottaison. On resserre la typographie du héros plutôt que
	   de supprimer des arguments : le bouton doit rester dans le premier regard. */
	/* Le chapeau retiré, le titre venait à 10px du fil d'Ariane. On lui rend
	   la respiration que le chapeau assurait, sans la lui rendre entièrement :
	   le bouton reste plus haut qu'avant. */
	.lmc-hero { padding-top: 16px; }

	.lmc-hero .lmc-titre { font-size: 27px; }

	.lmc-hero .lmc-titre::after { margin-top: 14px; width: 52px; height: 3px; }

	.lmc-hero .lmc-lede {
		font-size: 15px;
		line-height: 1.5;
		margin-top: 12px;
	}

	.lmc-arguments {
		max-width: 32ch;
		font-size: 14px;
		gap: 5px;
		margin-top: 12px;
		line-height: 1.42;
	}

	.lmc-cta-amorce { margin-top: 15px; font-size: 11.5px; }

	.lmc-hero .wp-block-buttons { margin-top: 14px; }

	.lmc-hero .wp-block-button__link {
		width: 100%;
		font-size: 16px;
		padding: 17px 22px;
	}

	.lmc-hero .lmc-note { margin-top: 10px; font-size: 13px; }

	/* La marque ferme le bloc : elle doit rester dans l'écran, sinon elle ne
	   comble plus le vide qu'elle est censée occuper. */
	.lmc-hero-marque { margin-top: 18px; }
	.lmc-hero-marque .marque { font-size: 26px; }
}

/* Halo bleu derrière un bloc héros : classe "lmc-glow" */
.lmc-glow {
	position: relative;
	overflow: hidden;
}

.lmc-glow > * {
	position: relative;
}

.lmc-glow::before {
	content: "";
	position: absolute;
	top: -45%;
	left: 50%;
	transform: translateX(-50%);
	width: 820px;
	height: 520px;
	max-width: 140vw;
	background: radial-gradient(ellipse at center, rgba(39, 118, 255, 0.20), transparent 68%);
	pointer-events: none;
}

/* Calculateur d'objectif — shortcode [lmc_calculateur] */
.lmc-calc {
	background-color: var(--lmc-surface-2);
	border: 1px solid var(--lmc-line);
	border-radius: 10px;
	padding: 26px 24px;
}

.lmc-calc-titre {
	font-family: var(--lmc-display);
	font-weight: 800;
	font-size: 19px;
	color: var(--lmc-text);
	margin: 0 0 18px;
	letter-spacing: -0.015em;
}

.lmc-calc-champs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
}

.lmc-calc-champs label {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13.5px;
	color: var(--lmc-muted);
}

.lmc-calc-champs input {
	width: 100%;
	padding: 13px 34px 13px 14px;
	font-family: var(--lmc-display);
	font-weight: 700;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
}

.lmc-calc-champs em {
	position: absolute;
	right: 14px;
	bottom: 14px;
	font-style: normal;
	font-weight: 700;
	color: var(--lmc-muted);
	pointer-events: none;
}

.lmc-calc-resultat {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--lmc-line);
	font-size: 17px;
	color: #D6D9E0;
}

.lmc-calc-resultat strong {
	color: var(--lmc-accent-hi);
	font-family: var(--lmc-display);
	font-weight: 800;
	font-size: 19px;
}

.lmc-calc-note {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--lmc-muted);
}

.lmc-calc-note strong { color: var(--lmc-text); }

/* Le theme.json de la démo met à zéro les marges des blocs et des titres :
   un encadré suivi d'un H2 se retrouvait collé à lui, sans un pixel d'écart.
   On rend leur respiration aux blocs encadrés du contenu.
   Le héros et les sections de l'accueil sont exclus : ils gèrent déjà la leur. */
.entry-content .lmc-encart,
.entry-content .lmc-calc,
.entry-content .wwc {
	margin-block: clamp(28px, 3.5vw, 40px);
}

.entry-content .lmc-encart:first-child,
.entry-content .wwc:first-child {
	margin-top: 0;
}

/* Encadré d'avertissement / info : classe "lmc-encart" */
.lmc-encart {
	border-left: 3px solid var(--lmc-accent);
	background-color: var(--lmc-surface-2);
	border-radius: 0 6px 6px 0;
	padding: 20px 24px;
}

.lmc-encart p:last-child { margin-bottom: 0; }

/* Ligne de réassurance sous les boutons : un peu d'air, sinon elle colle. */
.lmc-note {
	margin-top: 18px;
	font-size: 14.5px;
	color: var(--lmc-muted);
}

/* Bandeau des plateformes sous le héros.
   Ce sont des marques typographiques, pas les logos officiels : voir README. */
.lmc-plateformes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 5vw, 52px);
	margin-top: 30px;
	/* Les marques doivent flotter au milieu de leur bande, à égale distance du
	   filet au-dessus et du bloc en dessous. Elles collaient au filet. */
	padding-top: clamp(30px, 4vw, 52px);
	border-top: 1px solid var(--lmc-line);
}

.lmc-plateforme {
	font-family: var(--lmc-display);
	font-weight: 900;
	font-size: clamp(25px, 3.2vw, 33px);
	letter-spacing: -0.03em;
	color: #4A505C;
	line-height: 1;
	transition: color 0.15s ease;
}

.lmc-plateformes:hover .lmc-plateforme { color: #6B7280; }

/* Pastilles de données : classe "lmc-fact" sur un paragraphe court */
.lmc-fact {
	display: inline-block;
	font-family: var(--lmc-display);
	font-weight: 600;
	font-size: 13px;
	padding: 7px 12px;
	margin: 0 8px 8px 0;
	border: 1px solid var(--lmc-line);
	border-radius: 100px;
	color: var(--lmc-muted);
}

.lmc-fact strong { color: var(--lmc-text); }

/* ==========================================================================
   7. Tableaux comparatifs
   ========================================================================== */

.wp-block-table,
.entry-content table {
	font-variant-numeric: tabular-nums;
}

.wp-block-table table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--lmc-line);
	border-radius: 8px;
	overflow: hidden;
	font-size: 15px;
}

.wp-block-table th,
.wp-block-table td,
.entry-content th,
.entry-content td {
	padding: 15px 20px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--lmc-line);
	color: #D6D9E0;
}

.wp-block-table thead th,
.entry-content thead th {
	font-family: var(--lmc-display);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background-color: var(--lmc-surface-2);
	color: var(--lmc-text);
}

.wp-block-table thead th:nth-child(2),
.entry-content thead th:nth-child(2) {
	color: var(--lmc-accent-hi);
}

.wp-block-table tbody tr:last-child td,
.entry-content tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table td strong { color: var(--lmc-text); }

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: rgba(255, 255, 255, 0.02);
}

/* Défilement horizontal sur mobile plutôt que débordement de page */
.wp-block-table { overflow-x: auto; }

/* Sur petit écran, on resserre le tableau pour qu'il tienne dans la largeur
   plutôt que d'obliger à le faire défiler. Le défilement reste là en secours. */
@media (max-width: 600px) {
	.wp-block-table th,
	.wp-block-table td,
	.entry-content th,
	.entry-content td {
		padding: 11px 9px;
		font-size: 13.5px;
	}

	.wp-block-table thead th,
	.entry-content thead th {
		font-size: 11.5px;
		letter-spacing: 0.02em;
	}

	/* La première colonne porte l'intitulé : on lui laisse la place. */
	.wp-block-table tbody th:first-child,
	.wp-block-table td:first-child,
	.entry-content tbody th:first-child { width: 38%; }
}

/* Sous 420px il restait 6px de débordement, assez pour faire apparaître une
   barre de défilement sous le tableau. On resserre juste ce qu'il faut. */
@media (max-width: 420px) {
	.wp-block-table th,
	.wp-block-table td,
	.entry-content th,
	.entry-content td {
		padding: 10px 6px;
		font-size: 12.5px;
	}

	.wp-block-table thead th,
	.entry-content thead th { font-size: 10.5px; }
}

/* ==========================================================================
   8. Articles et archives
   ========================================================================== */

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content {
	background-color: transparent;
	padding: 0;
}

.entry-title a { color: var(--lmc-text); text-decoration: none; }
.entry-title a:hover { color: var(--lmc-accent-hi); }

/* Le theme.json de la démo met à zéro la marge sous le titre de page : le
   premier paragraphe venait coller au H1, très visible sur mobile où le titre
   occupe trois lignes. Les H2 et H3, eux, ont bien leurs 27px. */
.entry-header,
.page-header {
	margin-bottom: clamp(26px, 4vw, 36px);
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-meta,
.entry-meta a {
	color: var(--lmc-muted);
	font-size: 13.5px;
}

.entry-meta a:hover { color: var(--lmc-accent-hi); }

.read-more-container { display: none; }

/* Grille d'articles : à utiliser avec le bloc Articles ou GenerateBlocks Query Loop */
.lmc-post-card {
	display: flex;
	flex-direction: column;
	gap: 11px;
	height: 100%;
	padding: 26px 24px 28px;
	background-color: var(--lmc-surface-2);
	border: 1px solid var(--lmc-line);
	border-radius: 8px;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.lmc-post-card:hover {
	border-color: var(--lmc-accent);
	transform: translateY(-3px);
}

.lmc-post-card h3 { font-size: 19px; }
.lmc-post-card p { color: var(--lmc-muted); font-size: 14.5px; line-height: 1.6; }

/* Images */
img { border-radius: 6px; }
.site-logo img, .lmc-no-radius img { border-radius: 0; }

/* ==========================================================================
   9. Fil d'Ariane
   ========================================================================== */

.lmc-breadcrumb {
	font-size: 13.5px;
	color: var(--lmc-muted);
	margin-bottom: 26px;
}

.lmc-breadcrumb a {
	color: var(--lmc-muted);
	text-decoration: none;
}

.lmc-breadcrumb a:hover {
	color: var(--lmc-accent-hi);
	text-decoration: underline;
}

.lmc-breadcrumb .sep {
	margin: 0 8px;
	color: #4A505C;
}

/* ==========================================================================
   10. Annuaires de profils
   ========================================================================== */

.lmc-profils {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}

.lmc-profil {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	background-color: var(--lmc-surface-2);
	border: 1px solid var(--lmc-line);
	border-radius: 8px;
}

.lmc-profil img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 6px;
	width: 100%;
}

.lmc-profil h3 { font-size: 17px; margin: 0; }
.lmc-profil p { font-size: 14px; color: var(--lmc-muted); margin: 0; }

.lmc-profil .lmc-plateforme {
	align-self: flex-start;
	font-family: var(--lmc-display);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 3px;
	background-color: rgba(39, 118, 255, 0.16);
	color: var(--lmc-accent-hi);
}

/* ==========================================================================
   11. Formulaires
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background-color: var(--lmc-surface-2);
	border: 1px solid var(--lmc-line);
	border-radius: 5px;
	color: var(--lmc-text);
	padding: 13px 15px;
	font-family: var(--lmc-body);
	font-size: 15px;
}

input:focus,
textarea:focus,
select:focus {
	background-color: var(--lmc-surface-2);
	border-color: var(--lmc-accent);
	color: var(--lmc-text);
	outline: none;
}

::placeholder { color: #5C6270; }

label { color: var(--lmc-text); font-size: 14.5px; font-weight: 500; }

/* ==========================================================================
   12. Pied de page
   ========================================================================== */

.site-footer,
.site-info,
.footer-widgets {
	background-color: var(--lmc-surface) !important;
	color: var(--lmc-muted);
	font-size: 14px;
}

/* Le pied de page porte sa propre marge haute : il ne doit jamais dépendre de
   ce que la page au-dessus laisse comme espace, surtout sur les pages courtes. */
.site-footer {
	margin-top: clamp(40px, 6vw, 72px);
	padding-top: clamp(38px, 5vw, 60px);
	border-top: 1px solid var(--lmc-line);
}

.site-footer .widget-title,
.footer-widgets h2,
.footer-widgets h3 {
	font-family: var(--lmc-display);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lmc-text);
	margin-bottom: 14px;
}

.site-footer a,
.site-info a {
	color: var(--lmc-muted);
	text-decoration: none;
}

.site-footer a:hover,
.site-info a:hover {
	color: var(--lmc-text);
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.site-info { border-top: 1px solid var(--lmc-line); }

/* Pied de page complet, injecté par functions.php */
.lmc-footer {
	max-width: var(--lmc-wrap);
	margin: 0 auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

.lmc-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(4, 1fr);
	gap: 34px 26px;
	padding-bottom: 34px;
}

/* line-height explicite : « .lmc-footer-marque p » l'emporterait sinon en
   spécificité avec son 1.6, ce qui étirerait le bloc blanc bien au-delà de la
   hauteur de son texte. Le gap est plus large qu'en en-tête pour compenser
   l'inclinaison, qui mange environ 4 px sur la gauche du bloc. */
.lmc-footer-marque .lmc-logo { margin-bottom: 18px; gap: 12px; line-height: 1; }
.lmc-footer-marque .lmc-logo-word,
.lmc-footer-marque .lmc-logo-box > span { font-size: 16px; }
/* Le rembourrage de l'en-tête est calibré pour du 19px : réduit à l'échelle
   du pied de page, sinon le bloc paraît deux fois trop haut pour son texte. */
.lmc-footer-marque .lmc-logo-box { padding: 5px 11px 6px; }

.lmc-footer-marque p {
	max-width: 34ch;
	margin: 0 0 12px;
	color: var(--lmc-muted);
	font-size: 14px;
	line-height: 1.6;
}

.lmc-footer-contact a {
	font-family: var(--lmc-display);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--lmc-accent-hi);
	text-decoration: none;
	word-break: break-word;
}

.lmc-footer-contact a:hover { text-decoration: underline; }

.lmc-footer-col h2 {
	font-family: var(--lmc-display);
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--lmc-text);
	margin: 0 0 14px;
}

.lmc-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.lmc-footer-col a {
	color: var(--lmc-muted);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.45;
	display: inline-block;
}

.lmc-footer-col a:hover { color: var(--lmc-text); }

@media (max-width: 900px) {
	.lmc-footer-grid { grid-template-columns: 1fr 1fr; }
	.lmc-footer-marque { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
	.lmc-footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Badge 18+ et mention d'affiliation, injectés par functions.php */
.lmc-age {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--lmc-line);
	border-radius: 4px;
	font-family: var(--lmc-display);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--lmc-gold);
}

.lmc-disclosure {
	padding: 22px 0 0;
	border-top: 1px solid var(--lmc-line);
	color: var(--lmc-muted);
	font-size: 13px;
	line-height: 1.65;
}

.lmc-disclosure strong { color: var(--lmc-text); }

/* ==========================================================================
   13. Divers
   ========================================================================== */

.lmc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

hr,
.wp-block-separator {
	border-color: var(--lmc-line);
	background-color: var(--lmc-line);
	opacity: 1;
}

blockquote {
	border-left: 3px solid var(--lmc-accent);
	color: var(--lmc-muted);
	padding-left: 22px;
	font-style: normal;
}

code,
pre {
	background-color: var(--lmc-surface-2);
	color: #D6D9E0;
	border: 1px solid var(--lmc-line);
	border-radius: 4px;
}

.pagination .page-numbers {
	color: var(--lmc-muted);
	border: 1px solid var(--lmc-line);
	border-radius: 4px;
	padding: 8px 14px;
}

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

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   Blog et archives

   La grille vient de l'élément GeneratePress « Loop - Blog and Archives »,
   hérité de la démo : cartes blanches, titres bleus, libellés gris sur fond
   noir. On reprend la main sur les couleurs sans toucher à sa structure, en
   ciblant les classes qu'il génère. Elles sont stables tant que l'élément
   n'est pas recréé de zéro.
   ========================================================================= */

/* Deux colonnes fixes laissaient un trou béant tant qu'il n'y a qu'un article.
   auto-fit fait tenir la carte sur toute la largeur quand elle est seule, et
   repasse à deux ou trois colonnes dès qu'il y en a assez. */
.gb-looper-e8a19db8 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

/* La carte : panneau sombre bordé plutôt que bloc blanc à ombre portée,
   invisible sur fond noir. */
.gb-loop-item-bfca2c91 {
	background: var(--lmc-surface);
	border: 1px solid var(--lmc-line);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: none;
	transition: border-color 0.25s ease;
}

.gb-loop-item-bfca2c91:hover {
	border-color: var(--lmc-accent);
}

.gb-element-aa1e1150 {
	background-color: transparent !important;
}

/* Étiquette de catégorie : bleu sur blanc à l'origine. */
.gb-text-0c87f259 a {
	background-color: rgba(39, 118, 255, 0.12) !important;
	color: var(--lmc-accent-hi) !important;
	border: 1px solid rgba(39, 118, 255, 0.35);
}

.gb-text-0c87f259 a:hover {
	background-color: var(--lmc-accent) !important;
	color: var(--lmc-text) !important;
}

/* Titre de l'article : blanc, le bleu passe au survol. */
.gb-text-8b8c54c7 a {
	color: var(--lmc-text);
	font-family: var(--lmc-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.gb-text-8b8c54c7 a:hover {
	color: var(--lmc-accent-hi);
}

/* Date. */
.gb-text-4483d13d {
	color: var(--lmc-muted) !important;
}

/* Colonne latérale : intitulés de section. */
.gb-text-c4fc3e7f,
.gb-text-1ada2f36 {
	color: var(--lmc-text) !important;
	font-family: var(--lmc-display);
	border-bottom: 1px solid var(--lmc-line);
	padding-bottom: 10px;
}

/* Liens de la colonne latérale : liste des catégories et derniers articles. */
.gb-element-d80807d5 a,
.gb-element-d80807d5 .wp-block-categories a,
.gb-text-316cff39 a {
	color: var(--lmc-text) !important;
	text-decoration: none;
}

.gb-element-d80807d5 a:hover,
.gb-text-316cff39 a:hover {
	color: var(--lmc-accent-hi) !important;
}

.gb-element-d80807d5 .wp-block-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gb-element-d80807d5 .wp-block-categories li + li {
	margin-top: 8px;
}

/* Appel à l'action de la colonne latérale, à la place du faux formulaire
   d'inscription livré avec la démo. */
.lmc-aside-cta {
	background: var(--lmc-surface-2);
	border: 1px solid var(--lmc-line);
	border-left: 3px solid var(--lmc-accent);
	border-radius: 4px;
	padding: 22px 20px 24px;
}

.lmc-aside-cta .wp-block-group__inner-container { padding: 0; }

.lmc-aside-cta p {
	color: var(--lmc-muted);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 14px;
}

.lmc-aside-cta .lmc-eyebrow { margin-bottom: 10px; }

.lmc-aside-cta-bouton { margin-bottom: 0 !important; }

.lmc-aside-cta-bouton .wp-block-button__link {
	display: block;
	text-align: center;
	font-size: 14.5px;
	padding: 12px 16px;
}

/* Pagination : les libellés « Précédent » et « Suivant ». */
.gb-element-e5fd5654 { margin-top: clamp(32px, 5vw, 56px) !important; }

/* GenerateBlocks imprime sa feuille après celle du thème enfant : à
   spécificité égale, c'est elle qui l'emporte. On préfixe pour reprendre la
   main plutôt que d'empiler un !important de plus. */
@media (max-width: 767px) {
	.site-content .gb-element-386a57ea {
		position: static;
		top: auto;
		margin-top: clamp(36px, 6vw, 56px);
	}
}

/* En-tête d'archive posé par [lmc_titre_archive], dans un bloc HTML brut :
   un bloc paragraphe aurait enfermé le h1 et son div dans un <p>, imbrication
   que le navigateur casse en refermant le paragraphe trop tôt. */
.lmc-entete-archive {
	margin-bottom: clamp(30px, 4vw, 44px);
	padding-bottom: clamp(20px, 3vw, 28px);
	border-bottom: 1px solid var(--lmc-line);
}

.lmc-titre-archive {
	font-family: var(--lmc-display);
	font-weight: 900;
	font-size: clamp(30px, 5vw, 46px);
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--lmc-text);
	margin: 0;
}

.lmc-entete-archive .lmc-lede {
	margin: 14px 0 0;
	max-width: 62ch;
}

/* Tableau sans conteneur propre, posé par le nettoyage des contenus de l'outil
   SEO : il doit défiler dans sa boîte plutôt que faire glisser la page. */
.lmc-tableau {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	margin-block: clamp(24px, 3vw, 34px);
}

.lmc-tableau table { margin: 0; }

/* Bascule d'intention en bas du héros : la sortie discrète pour un visiteur
   venu chercher comment s'abonner, pas comment publier. */
/* « .entry-content p » l'emporte en spécificité : on préfixe pour que le gris
   sourd s'applique et que la sortie reste discrète face au bouton. */
.entry-content .lmc-hero-bascule {
	margin-top: 16px !important;
	font-size: 13px;
	color: var(--lmc-muted);
	line-height: 1.5;
}

.lmc-hero-bascule a {
	color: var(--lmc-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lmc-hero-bascule a:hover {
	color: var(--lmc-accent-hi);
}

/* =========================================================================
   Annuaire de profils

   Un H2 par profil : c'est ce qui permet à la page de se positionner sur les
   pseudos eux-mêmes. La grille reste dans le HTML même filtrée — les cartes
   masquées le sont par l'attribut « hidden », jamais retirées du document.
   ========================================================================= */

.lmc-filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 18px;
	padding: 18px 20px;
	margin-block: clamp(24px, 3vw, 34px);
	background: var(--lmc-surface);
	border: 1px solid var(--lmc-line);
	border-radius: 4px;
}

.lmc-filtre { display: flex; flex-direction: column; gap: 6px; }

.lmc-filtre label {
	font-family: var(--lmc-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--lmc-muted);
}

.lmc-filtre select {
	appearance: none;
	background: var(--lmc-ground) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238E95A3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center/10px;
	border: 1px solid var(--lmc-line);
	border-radius: 3px;
	color: var(--lmc-text);
	font-family: var(--lmc-body);
	font-size: 14.5px;
	padding: 9px 34px 9px 12px;
	min-width: 150px;
}

.lmc-filtre select:focus-visible { outline: 2px solid var(--lmc-accent); outline-offset: 1px; }

.lmc-filtre-raz {
	background: none;
	border: 1px solid var(--lmc-line);
	border-radius: 3px;
	color: var(--lmc-muted);
	cursor: pointer;
	font-family: var(--lmc-body);
	font-size: 14px;
	padding: 10px 14px;
}

.lmc-filtre-raz:hover { color: var(--lmc-text); border-color: var(--lmc-accent); }

.lmc-annuaire {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: 18px;
	margin-block: clamp(24px, 3vw, 34px);
}

.lmc-profil {
	display: flex;
	flex-direction: column;
	background: var(--lmc-surface);
	border: 1px solid var(--lmc-line);
	border-radius: 4px;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.lmc-profil:hover { border-color: var(--lmc-accent); }

.lmc-profil-vignette {
	aspect-ratio: 4 / 3;
	background: var(--lmc-surface-2);
	overflow: hidden;
}

.lmc-profil-vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Pastille typographique, en attendant une photo obtenue du créateur. */
.lmc-profil-initiales {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg,
		hsl(var(--teinte) 42% 16%),
		hsl(calc(var(--teinte) + 28) 38% 9%));
	color: hsl(var(--teinte) 60% 78%);
	font-family: var(--lmc-display);
	font-weight: 900;
	font-size: 40px;
	letter-spacing: -0.03em;
}

.lmc-profil-corps { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }

.entry-content .lmc-profil-nom {
	font-family: var(--lmc-display);
	font-size: 18px !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--lmc-text) !important;
	margin: 0 !important;
}

.entry-content .lmc-profil-nom::after { content: none; }

.entry-content .lmc-profil-meta {
	margin: 0 !important;
	font-size: 13px;
	color: var(--lmc-muted);
}

.entry-content .lmc-profil-resume {
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.5;
	color: #B9BFCC;
}

.lmc-profil-lien {
	margin-top: auto;
	padding-top: 10px;
	font-family: var(--lmc-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--lmc-accent-hi);
	text-decoration: none;
}

.lmc-profil-lien:hover { text-decoration: underline; }

.lmc-annuaire-compte { font-size: 13.5px; color: var(--lmc-muted); }

@media (max-width: 560px) {
	.lmc-annuaire { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.lmc-profil-corps { padding: 12px 12px 14px; }
	.entry-content .lmc-profil-nom { font-size: 15.5px !important; }
	.lmc-profil-initiales { font-size: 30px; }
	.lmc-filtre select { min-width: 0; width: 100%; }
	.lmc-filtre { flex: 1 1 140px; }
}