/*
Theme Name: Bliek Famille
Theme URI: https://bliek.com
Author: Stéphane Bliek
Description: Thème familial sobre, fond bleu sombre, avec un type de contenu « Biographie ».
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: bliek
*/

:root {
	--fond: #0e1726;
	--fond-2: #152238;
	--ligne: #24344f;
	--texte: #e4e8ef;
	--texte-doux: #9aa6b8;
	--accent: #c8a86b;
	--largeur: 1080px;
	--lecture: 680px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.1rem;
	line-height: 1.7;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; }

h1, h2, h3 {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
}

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }

/* En-tête */
.entete { border-bottom: 1px solid var(--ligne); }
.entete .conteneur {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 12px; padding-top: 22px; padding-bottom: 22px;
}
.titre-site {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.6rem; letter-spacing: .04em; color: #fff;
}
.titre-site:hover { text-decoration: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; }
.nav a {
	color: var(--texte-doux); font-family: system-ui, sans-serif;
	font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
}
.nav a:hover, .nav .current-menu-item a, .nav .actif a { color: var(--texte); text-decoration: none; }

/* Accueil */
.intro { padding: 96px 0 72px; text-align: center; }
.intro h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin: 0 0 16px; }
.intro p { color: var(--texte-doux); max-width: 560px; margin: 0 auto; }
.filet { width: 48px; height: 1px; background: var(--accent); margin: 28px auto; border: 0; }

.section-titre {
	font-family: system-ui, sans-serif; font-size: .78rem; letter-spacing: .18em;
	text-transform: uppercase; color: var(--texte-doux); margin: 0 0 24px;
}

/* Grille de biographies */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; padding-bottom: 80px; }
.carte {
	background: var(--fond-2); border: 1px solid var(--ligne); border-radius: 4px;
	overflow: hidden; display: flex; flex-direction: column; color: var(--texte);
	transition: border-color .2s;
}
.carte:hover { border-color: var(--accent); text-decoration: none; }
.carte img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(25%); display: block; }
.carte .sans-image { aspect-ratio: 4 / 5; background: linear-gradient(160deg, #1b2a44, #101b2d); display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", serif; font-size: 3rem; color: var(--ligne); }
.carte-corps { padding: 18px 20px 22px; }
.carte h2 { font-size: 1.45rem; margin: 0 0 4px; }
.dates { color: var(--texte-doux); font-size: .92rem; }

/* Biographie */
.bio { max-width: var(--lecture); margin: 0 auto; padding: 72px 20px 96px; }
.bio-entete { text-align: center; margin-bottom: 48px; }
.bio-entete h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0 0 10px; }
.bio-entete .dates { font-size: 1rem; }
.bio-entete .lieux { color: var(--texte-doux); font-size: .95rem; font-style: italic; }
.portrait { margin: 0 auto 40px; max-width: 360px; }
.portrait img { border: 1px solid var(--ligne); }
.bio-texte p { margin: 0 0 1.3em; }
.bio-texte h2 { font-size: 1.8rem; margin: 2em 0 .6em; }
.bio-texte blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--accent); color: var(--texte-doux); font-style: italic; }
.bio-texte figcaption, .wp-element-caption { color: var(--texte-doux); font-size: .88rem; text-align: center; }
.retour { display: inline-block; margin-top: 48px; font-family: system-ui, sans-serif; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }

/* Pied de page */
.pied { border-top: 1px solid var(--ligne); padding: 32px 0; color: var(--texte-doux); font-size: .85rem; text-align: center; font-family: system-ui, sans-serif; }

.pagination { text-align: center; padding-bottom: 60px; }
.pagination .page-numbers { margin: 0 6px; }

@media (max-width: 600px) {
	.entete .conteneur { flex-direction: column; }
	.intro { padding: 64px 0 48px; }
}