/*
Theme Name: Twenty Fifteen Modern
Theme URI: https://miniatures.florianbrochard.fr/
Description: Thème enfant moderne de Twenty Fifteen pour le gestionnaire de collection de figurines : typographie Barlow, cartes arrondies, colonne de gauche allégée, mode sombre automatique.
Author: Florian Brochard
Author URI: https://florianbrochard.fr/
Template: twentyfifteen
Version: 1.4.7
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyfifteen-modern
*/

/*
 * Ce fichier ne contient QUE des surcharges : la feuille du parent est chargée
 * avant lui (voir functions.php). Aucune couleur n'est écrite en dur ailleurs
 * que dans les variables ci-dessous.
 */

/* =====================================================================
 * 1. Polices (hébergées dans le thème : rien n'est demandé à Google)
 *    Texte : Barlow · Titres : Barlow Condensed, en capitales. Sous-ensemble
 *    latin, 6 fichiers woff2 (environ 140 Ko), licence SIL OFL.
 * ================================================================== */

@font-face { font-display: swap; font-family: "Barlow"; font-style: normal; font-weight: 400; src: url("assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Barlow"; font-style: italic; font-weight: 400; src: url("assets/fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Barlow"; font-style: normal; font-weight: 600; src: url("assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Barlow"; font-style: normal; font-weight: 700; src: url("assets/fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; src: url("assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; src: url("assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

/* =====================================================================
 * 2. Variables
 * ================================================================== */

:root {
	--fbm-police: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fbm-police-titre: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

	/* Échelle typographique fluide. Twenty Fifteen règle html à 62,5 % :
	 * on raisonne donc en px, pas en rem. */
	--fbm-t-corps: 17px;
	--fbm-t-h1: clamp(30px, calc(26px + 1.2vw), 40px);
	--fbm-t-h2: clamp(24px, calc(21px + .7vw), 30px);
	--fbm-t-h3: 23px;
	--fbm-t-h4: 20px;

	--fbm-page:    #f3f0ec;
	--fbm-carte:   #ffffff;
	--fbm-texte:   #2b2622;
	--fbm-doux:    #6f665f;
	--fbm-ligne:   rgba(43, 38, 34, .12);
	--fbm-voile:   rgba(43, 38, 34, .04);
	--fbm-accent:  #d92e4d;
	--fbm-accent-fort: #b8233f;
	--fbm-lien:    #b8233f;

	/* Colonne de gauche : le fond vient du Personnaliser, seul le texte est fixé ici. */
	--fbm-cote-texte: #ffffff;

	/* Gabarit : page jusqu'à 1680 px, colonne de gauche 260-320 px, carte de
	 * contenu jusqu'à 1120 px, texte courant limité à 70 caractères. */
	--fbm-page-max: 1680px;
	--fbm-cote: clamp(260px, 26vw, 320px);
	--fbm-carte-max: 1120px;
	--fbm-lecture: 680px; /* largeur de la colonne de lecture (≈ 70 caractères) */
	--fbm-gouttiere: clamp(16px, 3vw, 48px);
	--fbm-interieur: clamp(24px, 4vw, 56px);

	--fbm-rayon: 12px;
	--fbm-ombre: 0 1px 2px rgba(43, 38, 34, .06), 0 10px 28px -14px rgba(43, 38, 34, .22);

	/* Passerelle vers l'extension « Miniatures – Collection » : elle lit ces
	 * variables (cf. collection.css) pour dériver ses paliers d'avancement. */
	--wp--preset--color--accent-1: var(--fbm-accent);
	--wp--preset--color--contrast: var(--fbm-texte);
	--wp--preset--color--base: var(--fbm-carte);
}

@media (prefers-color-scheme: dark) {
	:root {
		--fbm-page:    #1b1816;
		--fbm-carte:   #262220;
		--fbm-texte:   #eee7e0;
		--fbm-doux:    #b3aaa2;
		--fbm-ligne:   rgba(238, 231, 224, .14);
		--fbm-voile:   rgba(238, 231, 224, .05);
		--fbm-accent:  #ff6b85;
		--fbm-accent-fort: #ff8fa2;
		--fbm-lien:    #ff8fa2;
		--fbm-ombre:   0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .6);
		color-scheme: dark;
	}
}

/* =====================================================================
 * 3. Base : typographie, liens, focus
 * ================================================================== */

/* Texte : Barlow. */
body,
button,
input,
select,
textarea,
.main-navigation,
.entry-meta,
.entry-footer,
.widget-title,
.comment-reply-title,
.site-description,
.site-footer {
	font-family: var(--fbm-police);
}

/* Titres : Barlow Condensed. */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.page-title,
.comments-title,
.post-navigation .post-title {
	font-family: var(--fbm-police-titre);
}

html body.custom-background,
html body {
	background-color: var(--fbm-page);
	color: var(--fbm-texte);
}

body { font-size: var(--fbm-t-corps); line-height: 1.6; }
.entry-content,
.entry-summary,
.comment-content { font-size: var(--fbm-t-corps); line-height: 1.65; }

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title { font-weight: 600; letter-spacing: .01em; line-height: 1.15; }

/* Titres principaux en capitales, dans l'esprit des règles de jeu. */
h1, h2,
.site-title,
.entry-title,
.page-title,
.comments-title,
.entry-content h1,
.entry-content h2 { font-weight: 700; text-transform: uppercase; }

/* Échelle des titres : plus sobre que celle de Twenty Fifteen. */
body .entry-title,
body .page-title,
body .entry-content h1,
body .comment-content h1 { font-size: var(--fbm-t-h1); }
body .entry-content h2,
body .comment-content h2,
body .comments-title { font-size: var(--fbm-t-h2); }
body .entry-content h3,
body .comment-content h3 { font-size: var(--fbm-t-h3); }
body .entry-content h4,
body .comment-content h4 { font-size: var(--fbm-t-h4); }
body .entry-content h5,
body .entry-content h6 { font-size: 18px; }
body .entry-content :is(h1, h2, h3, h4, h5, h6) { margin-top: 1.6em; }
body .entry-content > :is(h1, h2):first-child { margin-top: 0; }
body .widget-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; }

.entry-title a,
.entry-title { color: var(--fbm-texte); }

/* Liens du contenu : seuls ceux sans classe, pour ne pas toucher aux blocs de la collection. */
:where(.entry-content, .entry-summary, .comment-content) a:not([class]) {
	color: var(--fbm-lien);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}
:where(.entry-content, .entry-summary, .comment-content) a:not([class]):visited { color: var(--fbm-lien); }
:where(.entry-content, .entry-summary, .comment-content) a:not([class]) { transition: color .15s, text-decoration-color .15s; }
/* Survol : le lien s'éclaircit vers la couleur du texte et son soulignement s'épaissit et prend la couleur d'accent. */
:where(.entry-content, .entry-summary, .comment-content) a:not([class]):is(:hover, :focus-visible),
:where(.entry-content, .entry-summary, .comment-content) a:not([class]):visited:is(:hover, :focus-visible) {
	color: var(--fbm-texte);
	text-decoration-thickness: 2px;
	text-decoration-color: var(--fbm-accent);
}

:focus-visible {
	outline: 2px solid var(--fbm-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* =====================================================================
 * 4. Cartes de contenu
 * ================================================================== */

html body .site,
html body .site-footer { background-color: var(--fbm-page); }

.hentry,
.page-header,
.no-results,
.comments-area,
.post-navigation {
	background-color: var(--fbm-carte);
	border: 1px solid var(--fbm-ligne);
	border-radius: var(--fbm-rayon);
	box-shadow: var(--fbm-ombre);
	color: var(--fbm-texte);
}

.post-navigation { overflow: hidden; }
.post-navigation .post-title,
.post-navigation a { color: var(--fbm-texte); }

.entry-header,
.entry-footer,
.entry-content table th,
.entry-content table td,
.entry-content hr,
.widget,
.comment-list .comment-body { border-color: var(--fbm-ligne); }

.entry-meta,
.entry-meta a,
.entry-footer,
.entry-footer a,
.comment-metadata,
.comment-metadata a { color: var(--fbm-doux); }

.entry-content blockquote { border-left: 3px solid var(--fbm-accent); color: var(--fbm-doux); }
.entry-content code,
.entry-content pre { background: var(--fbm-voile); border-radius: 6px; color: var(--fbm-texte); }

/* Formulaires et boutons. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
	background: var(--fbm-carte);
	border: 1px solid var(--fbm-ligne);
	border-radius: 8px;
	color: var(--fbm-texte);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var(--fbm-accent);
	border-radius: 999px;
	color: #fff;
	transition: background-color .15s;
}
button:hover, button:focus,
input[type="button"]:hover, input[type="button"]:focus,
input[type="reset"]:hover, input[type="reset"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus { background-color: var(--fbm-accent-fort); color: #fff; }

@media (prefers-color-scheme: dark) {
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"] { color: #1b1816; }
	button:hover, button:focus,
	input[type="button"]:hover, input[type="button"]:focus,
	input[type="reset"]:hover, input[type="reset"]:focus,
	input[type="submit"]:hover, input[type="submit"]:focus { color: #1b1816; }
}

/* Pages sans résultat / archives : Twenty Fifteen force un fond blanc sur ces zones. */
html body .page-header,
html body .no-results .page-content,
html body .not-found .page-content { background-color: var(--fbm-carte); color: var(--fbm-texte); }
html body .no-results .page-content { background-color: transparent; }

/* Le pied de page. */
.site-footer,
.site-footer a,
.site-info { color: var(--fbm-doux); }
.site-footer { border-top: 1px solid var(--fbm-ligne); }

/* =====================================================================
 * 5. Colonne de gauche allégée (≥ 955 px)
 *    Reprise de theme-twentyfifteen.css (extension v3.10), avec des bordures
 *    dérivées de la couleur du texte : elles suivent le fond choisi.
 * ================================================================== */

@media (min-width: 955px) {

	body #sidebar #masthead { margin: 0; padding: 32px 32px 0; }
	body #sidebar .site-title { font-size: 24px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; margin: 0; }
	body #sidebar .site-description { font-size: 12.5px; line-height: 1.45; margin: 6px 0 20px; opacity: .95; }

	body #sidebar #secondary { display: flex; flex-direction: column; padding: 0 32px 36px; }
	body #sidebar #site-navigation,
	body #sidebar #social-navigation,
	body #sidebar #widget-area { margin: 0; padding: 0; }

	/* Le menu, serré. */
	body #sidebar #site-navigation { margin-bottom: 22px; }
	body #sidebar .main-navigation ul { list-style: none; margin: 0; padding: 0; }
	body #sidebar .main-navigation li { border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); position: relative; }
	body #sidebar .main-navigation li a {
		border-radius: 6px;
		display: flex;
		font-size: 13.5px;
		font-weight: 700;
		gap: 8px;
		justify-content: space-between;
		line-height: 1.4;
		padding: 7px 8px;
		margin: 0 -8px;
		transition: background-color .15s;
	}
	body #sidebar .main-navigation li a:hover,
	body #sidebar .main-navigation li a:focus { background: rgba(255, 255, 255, .14); }
	body #sidebar .main-navigation .current-menu-item > a,
	body #sidebar .main-navigation .current-menu-ancestor > a { background: rgba(255, 255, 255, .2); }

	/* Les projets restent visibles sous « Projets », avec leur avancement. */
	body #sidebar .main-navigation ul ul {
		background: none;
		border: 0;
		box-shadow: none;
		display: block;
		margin: 0 0 6px;
		max-height: none;
		opacity: 1;
		padding: 0;
		position: static;
		visibility: visible;
	}
	body #sidebar .main-navigation ul ul li { border-top: 0; }
	body #sidebar .main-navigation ul ul a { font-size: 13px; font-weight: 400; padding: 3px 8px 3px 20px; }
	body #sidebar .main-navigation .dropdown-toggle { display: none; }

	/* Blocs de la collection : un filet au-dessus de chacun, texte franc. */
	body #sidebar #widget-area .widget {
		border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
		margin: 0 0 6px;
		padding: 14px 0 4px;
	}
	body #sidebar #widget-area .widget .mini-lateral { margin: 0 0 .6em; }
	body #sidebar #widget-area .widget,
	body #sidebar #widget-area .widget a,
	body #sidebar #widget-area .widget .mini-lateral,
	body #sidebar #widget-area .widget .mini-lateral a { color: var(--fbm-cote-texte); }
	body #sidebar #widget-area .widget .mini-lat-doux { opacity: .9; }

	/* Les réseaux sociaux en pied de colonne, en texte plutôt qu'en icônes. */
	body #sidebar #social-navigation {
		border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
		margin-top: 6px;
		order: 3;
		padding-top: 12px;
	}
	body #sidebar #social-navigation ul { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
	body #sidebar #social-navigation ul::before,
	body #sidebar #social-navigation ul::after { content: none; display: none; }
	body #sidebar #social-navigation li { border: 0; display: block; margin: 0; padding: 0; }
	body #sidebar #social-navigation a {
		color: var(--fbm-cote-texte);
		display: inline;
		font-size: 12.5px;
		height: auto;
		line-height: 1.4;
		padding: 0;
		width: auto;
	}
	body #sidebar #social-navigation a::before { content: none; display: none; }
	body #sidebar #social-navigation a .screen-reader-text {
		clip: auto;
		clip-path: none;
		display: inline;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}

	body #sidebar #widget-area .widget a:hover,
	body #sidebar #widget-area .widget a:focus,
	body #sidebar #social-navigation a:hover,
	body #sidebar #social-navigation a:focus { opacity: .75; }
	body #sidebar #widget-area .widget a,
	body #sidebar #social-navigation a { transition: opacity .15s; }
}

/* Pastille d'avancement ajoutée par l'extension dans le menu. */
.mini-menu-pct {
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
	font-size: .85em;
	padding: 0 .55em;
}

/* =====================================================================
 * 6. Largeur du contenu (≥ 955 px)
 *    Twenty Fifteen raisonne en pourcentages : la carte de contenu perd
 *    beaucoup de largeur utile (environ 660 px de texte sur un écran de
 *    1920 px). On passe à un gabarit à valeurs bornées :
 *      - page jusqu'à --fbm-page-max, centrée ;
 *      - colonne de gauche --fbm-cote ;
 *      - carte de contenu jusqu'à --fbm-carte-max, centrée dans sa colonne ;
 *      - marges intérieures fixes (clamp) au lieu de 10 % de la largeur ;
 *      - texte courant limité à --fbm-lecture ; les blocs de la collection,
 *        tableaux et images occupent toute la carte.
 * ================================================================== */

@media (min-width: 955px) {

	/* Le fond de la colonne suit la page centrée : marge gauche + colonne. */
	body:before { width: calc((100% - min(100%, var(--fbm-page-max))) / 2 + var(--fbm-cote)); }
	.site { max-width: var(--fbm-page-max); }

	.sidebar { max-width: var(--fbm-cote); width: var(--fbm-cote); }
	.site-content,
	.site-footer { margin-left: var(--fbm-cote); width: calc(100% - var(--fbm-cote)); }

	.site-main { padding: var(--fbm-gouttiere) 0; }

	/* La carte : largeur bornée, centrée dans la colonne. */
	.hentry,
	.page-header,
	.page-content,
	.comments-area,
	.post-navigation,
	.pagination {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--fbm-carte-max);
		width: calc(100% - 2 * var(--fbm-gouttiere));
	}
	.hentry + .hentry,
	.page-header + .hentry,
	.page-header + .page-content { margin-top: var(--fbm-gouttiere); }

	/* Marges intérieures fixes. */
	.hentry,
	.hentry.has-post-thumbnail { padding-top: var(--fbm-interieur); }
	.entry-header { padding: 0 var(--fbm-interieur); }
	.entry-content,
	.entry-summary { padding: 0 var(--fbm-interieur) var(--fbm-interieur); }
	.entry-footer { padding: 24px var(--fbm-interieur); }
	.page-header { padding: 28px var(--fbm-interieur); }
	.page-content,
	.comments-area { padding: var(--fbm-interieur); }
	.post-navigation a { padding: 24px var(--fbm-interieur); }
	.site-info { margin-inline: auto; max-width: var(--fbm-carte-max); padding: 24px var(--fbm-gouttiere); }

	/* Espacement entre l'article, les commentaires et la navigation : valeur fixe
	   (Twenty Fifteen utilise 8,33 % de la largeur, soit plus de 110 px ici). */
	.comments-area,
	.post-navigation { margin-top: 24px; margin-bottom: 0; }
	.entry-footer { padding-block: 16px; }

	/* Le texte courant garde une longueur de ligne confortable. */
	/* Ligne de lecture limitée seulement pour un texte sans bloc de collection ; sinon le texte suit la largeur des blocs. */
	.hentry .entry-content:not(:has(.mini:not(.mini-article-liens))) > :is(p, ul, ol, dl, blockquote, pre, h1, h2, h3, h4, h5, h6, .wp-block-group:not(.alignwide, .alignfull)) {
		max-width: var(--fbm-lecture);
		margin-inline: auto; /* colonne de lecture centrée dans la carte ; images et blocs restent pleine largeur */
	}
	/* En-tête et pied d'article : même colonne (leur marge intérieure s'ajoute à la largeur). */
	.hentry:not(:has(.mini:not(.mini-article-liens))) > :is(.entry-header, .entry-footer) {
		max-width: calc(var(--fbm-lecture) + 2 * var(--fbm-interieur));
		margin-inline: auto;
	}
}

/* =====================================================================
 * 7. Mode sombre : ce que le Personnaliser fixe en clair
 * ================================================================== */

@media (prefers-color-scheme: dark) {
	html body .hentry { background-color: var(--fbm-carte); }
	html body .hentry .entry-content,
	html body .hentry .entry-title,
	html body .widget-area .widget,
	html body .comment-content { color: var(--fbm-texte); }
	.entry-content table th { background: var(--fbm-voile); }
	img { filter: brightness(.94); }
}

/* =====================================================================
 * 8. Blocs de la collection : respiration entre deux blocs consécutifs
 *    (un thème à blocs le fait avec son « espace entre blocs » ; Twenty
 *    Fifteen non, d'où des titres collés à la légende du bloc précédent).
 * ================================================================== */

.entry-content .mini + .mini,
.entry-content .mini + .wp-block-heading,
.entry-content .wp-block-heading + .mini { margin-top: 32px; }
.entry-content .mini + .wp-block-heading { margin-top: 40px; }

/* =====================================================================
 * 9. Blocs de la collection : corrections de Twenty Fifteen
 *    - html est réglé à 62,5 % : les « rem » de l'extension valent 10 px au
 *      lieu de 16 px, et les tuiles de chiffres devenaient trop étroites ;
 *    - la césure automatique du thème coupait « d'avance-ment » ;
 *    - sur mobile, cinq tuiles sur deux colonnes laissaient une case vide.
 * ================================================================== */

.mini {
	-webkit-hyphens: manual;
	hyphens: manual;
}
.mini-tuiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.mini-tuile-v { font-size: clamp(24px, 5.5vw, 32px); white-space: nowrap; }

/* Au-dessus de 520px : le nombre de colonnes suit le nombre de tuiles (pas de case vide). */
@media (min-width: 521px) {
	.mini-tuiles:has(> .mini-tuile:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.mini-tuiles:has(> .mini-tuile:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.mini-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mini-tuile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =====================================================================
 * 10. Photos : coins arrondis partout, bandeau d'article, catégorie et infos
 * ================================================================== */

:root { --fbm-rayon-photo: 10px; --fbm-sur-accent: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --fbm-sur-accent: #1b1816; } }

/* Les blocs de la collection reprennent le même arrondi. */
.mini { --mini-rayon: 8px; }

/* Bandeau : image pleine largeur en haut de la carte, moins haute. */
.hentry.has-post-thumbnail { padding-top: 0; }
.hentry .post-thumbnail {
	margin: 0;
	overflow: hidden;
	border-radius: var(--fbm-rayon) var(--fbm-rayon) 0 0;
}
.hentry .post-thumbnail img {
	display: block;
	width: 100%;
	max-width: none;
	aspect-ratio: 16 / 5;
	object-fit: cover;
	object-position: 50% 40%;
}
@media (max-width: 600px) {
	.hentry .post-thumbnail img { aspect-ratio: 16 / 8; }
}

/* Catégorie sous l'image. */
.fbm-categorie {
	margin: 0;
	padding: 22px var(--fbm-interieur) 0;
	font-family: var(--fbm-police-titre);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fbm-lien);
}
.fbm-categorie a { color: inherit; box-shadow: none; }
.fbm-categorie a:hover { text-decoration: underline; }
.fbm-categorie + .entry-header { padding-top: 6px; }
.post-thumbnail + .entry-header { padding-top: 28px; }

/* La catégorie suit la colonne du titre. */
@media (min-width: 955px) {
	.hentry:not(:has(.mini:not(.mini-article-liens))) > .fbm-categorie {
		max-width: calc(var(--fbm-lecture) + 2 * var(--fbm-interieur));
		margin-inline: auto;
	}
}

/* Titre : moins d'air avant les infos. */
.single .entry-title { margin-bottom: .5em; }

/* Infos sous le titre. */
.entry-content > .fbm-meta:first-child {
	margin: 0 0 1.6em;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fbm-doux);
}
.fbm-meta a { color: inherit; }
.fbm-meta a:hover { color: var(--fbm-lien); }

/* La date et les catégories sont déjà en haut : on les retire du bas de l'article. */
.single .entry-footer .posted-on,
.single .entry-footer .cat-links { display: none; }

/* Sommaire des articles : un encart dans la colonne de lecture.
   Groupe natif « fbm-sommaire » contenant une liste numérotée de liens vers les titres H2
   (posé par l'ability miniatures/normaliser-sommaires). */
.entry-content .fbm-sommaire {
	max-width: var(--fbm-lecture);
	margin: 1.6em auto;
	padding: 16px 22px 18px;
	border: 1px solid var(--fbm-ligne);
	border-radius: var(--fbm-rayon-photo);
	background: var(--fbm-voile);
}
.entry-content .fbm-sommaire::before {
	content: "Sommaire";
	display: block;
	margin-bottom: 8px;
	font-family: var(--fbm-police-titre);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fbm-doux);
}
.entry-content .fbm-sommaire ol {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fbm-sommaire;
}
.entry-content .fbm-sommaire li {
	counter-increment: fbm-sommaire;
	display: grid;
	grid-template-columns: 1.7em minmax(0, 1fr);
	align-items: baseline;
	margin: 0;
	padding: 4px 0;
	font-size: 16px;
	line-height: 1.4;
}
.entry-content .fbm-sommaire li::before {
	content: counter(fbm-sommaire) ".";
	color: var(--fbm-accent);
	font-family: var(--fbm-police-titre);
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.entry-content .fbm-sommaire a,
.entry-content .fbm-sommaire a:visited {
	color: var(--fbm-texte);
	text-decoration: none;
	border-bottom: 0;
	box-shadow: none;
}
.entry-content .fbm-sommaire a:hover,
.entry-content .fbm-sommaire a:focus-visible {
	color: var(--fbm-lien);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry-content .fbm-sommaire a:focus-visible { outline: 2px solid var(--fbm-accent); outline-offset: 2px; border-radius: 3px; }

/* ==================================================================
 * 11. Survol des liens en mode sombre
 * Twenty Fifteen passe les liens survolés en gris foncé : illisible sur fond sombre.
 * ================================================================== */
@media (prefers-color-scheme: dark) {
	a:hover, a:focus,
	.entry-footer a:hover, .entry-footer a:focus,
	.entry-title a:hover, .entry-title a:focus,
	.image-navigation a:hover, .image-navigation a:focus,
	.comment-navigation a:hover, .comment-navigation a:focus,
	.post-navigation a:hover .post-title, .post-navigation a:focus .post-title,
	.comment-metadata a:hover, .comment-metadata a:focus,
	.comment-reply-link:hover, .comment-reply-link:focus,
	.more-link:hover, .more-link:focus,
	.site-info a:hover, .site-info a:focus,
	.author-link:hover, .author-link:focus,
	.logged-in-as a:hover, .logged-in-as a:focus,
	.pingback .comment-body > a:hover,
	.sticky-post:hover { color: var(--fbm-lien); }

	.widget_calendar tbody a:hover, .widget_calendar tbody a:focus,
	.page-links a:hover, .page-links a:focus {
		background-color: var(--fbm-accent);
		color: #1b1816;
	}
}

/* =====================================================================
 * 12. Listes d'articles (Journal de bord, catégories, étiquettes…)
 *     Grille de fiches compactes ; le contenu complet reste sur la page
 *     de l'article (voir liste-articles.php).
 * ================================================================== */

body.fbm-liste .site-main > .hentry { display: flex; flex-direction: column; overflow: hidden; }
body.fbm-liste .hentry .post-thumbnail { display: block; margin: 0; }
body.fbm-liste .hentry .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
body.fbm-liste .hentry .entry-title { font-size: 24px; line-height: 1.15; margin: 0; }
body.fbm-liste .hentry .entry-title a { color: var(--fbm-texte); }
body.fbm-liste .hentry .entry-title a:hover,
body.fbm-liste .hentry .entry-title a:focus-visible { color: var(--fbm-lien); }
body.fbm-liste .hentry .entry-header { padding: 18px 20px 0; }
body.fbm-liste .hentry .entry-content { padding: 10px 20px 0; flex: 1 1 auto; }
body.fbm-liste .hentry .entry-content p { margin: 0 0 .7em; font-size: 16px; line-height: 1.5; }
body.fbm-liste .hentry .fbm-extrait { color: var(--fbm-doux); }
body.fbm-liste .hentry .fbm-lire-suite a { font-weight: 600; color: var(--fbm-lien); }
body.fbm-liste .hentry .entry-footer { margin: 0; padding: 12px 20px 16px; background: transparent; border: 0; border-top: 1px solid var(--fbm-ligne); font-size: 14px; }
body.fbm-liste .hentry .entry-footer .tags-links,
body.fbm-liste .hentry .entry-footer .comments-link,
body.fbm-liste .hentry .entry-footer .edit-link,
body.fbm-liste .hentry .entry-footer .byline,
body.fbm-liste .hentry .entry-footer .format-icon { display: none; }
body.fbm-liste .hentry .entry-footer .posted-on { margin-right: 8px; }

@media (min-width: 955px) {
	/* Les pseudo-éléments de nettoyage de flottants de Twenty Fifteen deviendraient des cases de la grille. */
	body.fbm-liste .site-main::before,
	body.fbm-liste .site-main::after { display: none; }
	body.fbm-liste .site-main {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: var(--fbm-gouttiere);
		align-items: stretch;
		max-width: var(--fbm-carte-max);
		margin-inline: auto;
		padding-inline: var(--fbm-gouttiere);
	}
	body.fbm-liste .site-main > .hentry {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	/* Premier article : pleine largeur, image à gauche et texte à droite. */
	body.fbm-liste .site-main > article.hentry:first-of-type {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
	}
	body.fbm-liste .site-main > article.hentry:first-of-type .post-thumbnail { grid-column: 1; grid-row: 1 / -1; height: 100%; }
	body.fbm-liste .site-main > article.hentry:first-of-type .post-thumbnail img { height: 100%; aspect-ratio: 16 / 10; }
	body.fbm-liste .site-main > article.hentry:first-of-type .entry-header,
	body.fbm-liste .site-main > article.hentry:first-of-type .entry-content,
	body.fbm-liste .site-main > article.hentry:first-of-type .entry-footer { grid-column: 2; }
	body.fbm-liste .site-main > article.hentry:first-of-type .entry-header { padding: 28px 28px 0; align-self: end; }
	body.fbm-liste .site-main > article.hentry:first-of-type .entry-title { font-size: 34px; }
	body.fbm-liste .site-main > article.hentry:first-of-type .entry-content { padding: 14px 28px 0; }
	body.fbm-liste .site-main > article.hentry:first-of-type .entry-content p { font-size: 17px; }
	body.fbm-liste .site-main > article.hentry:first-of-type .entry-footer { padding: 14px 28px 22px; margin: 0; width: auto; max-width: none; text-align: left; }
	body.fbm-liste .site-main > header:not(.page-header) { grid-column: 1 / -1; align-self: start; margin: 0; padding: 0; }
	body.fbm-liste .site-main > .page-header,
	body.fbm-liste .site-main > .pagination,
	body.fbm-liste .site-main > .no-results,
	body.fbm-liste .site-main > .navigation {
		grid-column: 1 / -1;
		width: auto;
		max-width: none;
		margin: 0;
	}
}

/* Une galerie (piste défilante) après une liste ou un paragraphe : de l'air au-dessus. */
.entry-content :is(ul, ol, p) + .mini-piste { margin-top: 28px; }