/*
Theme Name:     Demeures
Theme URI:      https://demeures-de-normandie.fr
Description:    Thème du magazine Demeures de Normandie (enfant de Kadence).
Author:         La rédaction
Author URI:     https://demeures-de-normandie.fr
Template:       kadence
Version:        0.2.0
Text Domain:    demeures
*/

/* ---------- Jetons (charte chaux et ardoise) ---------- */
:root {
	--dn-chaux: var(--global-palette8, #F4F1EA);
	--dn-lin: var(--global-palette7, #E8E3D6);
	--dn-surface: var(--global-palette9, #FBFAF6);
	--dn-ardoise: var(--global-palette4, #36424A);
	--dn-ardoise-profonde: var(--global-palette3, #2C363C);
	--dn-attenue: var(--global-palette5, #5E6A70);
	--dn-brique: var(--global-palette1, #A3452F);
	--dn-brique-fonce: var(--global-palette2, #87381F);
	--dn-pommier: var(--global-palette11, #6F8A3A);
	--dn-serif: "Newsreader", Georgia, serif;
	--dn-sans: "Public Sans", Arial, sans-serif;
	--dn-section: clamp(56px, 8vw, 96px);
}

/* ---------- Typographie ---------- */
h1, h2, h3, h4 { letter-spacing: -0.01em; text-wrap: balance; }
.entry-content p, .entry-content li { text-wrap: pretty; }

:where(.entry-content) a:where(:not(.wp-block-button__link)),
.dn-link {
	color: var(--dn-ardoise);
	text-decoration: underline;
	text-decoration-color: var(--dn-brique);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 200ms ease-out, text-decoration-thickness 200ms ease-out;
}
:where(.entry-content) a:where(:not(.wp-block-button__link)):hover,
.dn-link:hover {
	color: var(--dn-brique);
	text-decoration-thickness: 2px;
}

.wp-block-button__link { text-transform: none; letter-spacing: 0; transition: background-color 200ms ease-out; }

.entry-content .wp-block-image figcaption,
.entry-content .wp-element-caption {
	font-family: var(--dn-sans);
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--dn-attenue);
	text-align: left;
	margin-top: 0.6em;
}

/* ---------- Accueil : nom du magazine ---------- */
.dn-masthead { padding-top: clamp(40px, 6vw, 72px); padding-bottom: 8px; }
.dn-masthead .dn-masthead__title {
	font-family: var(--dn-serif);
	font-weight: 500;
	font-size: clamp(2.8rem, 7.4vw, 6.6rem);
	line-height: 0.98;
	letter-spacing: -0.025em;
	color: var(--dn-ardoise-profonde);
	margin: 0;
}
.dn-masthead .dn-masthead__tagline {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: var(--dn-attenue);
	margin: 0.9em 0 0;
	max-width: 44ch;
}

/* ---------- Accueil : dossier du moment ---------- */
.dn-dossier { padding-top: clamp(20px, 3vw, 32px); }
.dn-dossier .dn-dossier__label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--dn-brique);
	margin: 0 0 0.6em;
}
.dn-dossier .dn-dossier__title {
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1.06;
	max-width: 30ch;
	margin: 0;
}
.dn-dossier .dn-dossier__title a { color: inherit; text-decoration: none; }
.dn-dossier .dn-dossier__title a:hover { color: var(--dn-brique); }
.dn-dossier .dn-dossier__intro {
	font-size: clamp(1.1rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	max-width: 60ch;
	margin: 0.9em 0 0;
}
.dn-dossier figure.dn-dossier__photo { margin: clamp(28px, 4vw, 48px) 0 0; }
.dn-dossier .dn-dossier__photo img {
	width: 100%;
	aspect-ratio: 21 / 10;
	object-fit: cover;
	display: block;
}

/* ---------- Accueil : sommaire des rubriques ---------- */
.dn-sommaire {
	background: var(--dn-lin);
	padding: var(--dn-section) 0;
	margin-top: var(--dn-section);
}
.dn-sommaire .dn-sommaire__head { max-width: 40ch; margin: 0 0 clamp(28px, 4vw, 48px); }
.dn-sommaire .dn-sommaire__head h2 { margin: 0 0 0.4em; }
.dn-sommaire .dn-sommaire__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 6vw, 96px);
	row-gap: clamp(28px, 3.5vw, 44px);
}
.dn-sommaire .dn-sommaire__list li { margin: 0; }
.dn-sommaire .dn-sommaire__list a {
	font-family: var(--dn-serif);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	line-height: 1.1;
	color: var(--dn-ardoise-profonde);
	text-decoration: none;
	display: inline-block;
}
.dn-sommaire .dn-sommaire__list a:hover { color: var(--dn-brique); }
.dn-sommaire .dn-sommaire__list span {
	display: block;
	margin-top: 0.45em;
	color: var(--dn-attenue);
	max-width: 46ch;
}

/* ---------- Accueil : derniers articles et à propos ---------- */
.dn-derniers { padding: var(--dn-section) 0 0; }
.dn-derniers .wp-block-post-template { gap: clamp(28px, 3vw, 40px); }
.dn-derniers .wp-block-post-title { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; margin: 0.6em 0 0.3em; }
.dn-derniers .wp-block-post-title a { color: var(--dn-ardoise-profonde); text-decoration: none; }
.dn-derniers .wp-block-post-title a:hover { color: var(--dn-brique); }
.dn-derniers .wp-block-post-terms, .dn-derniers .wp-block-post-date { font-size: 0.9rem; color: var(--dn-attenue); }
.dn-derniers .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; }
.dn-apropos { padding: var(--dn-section) 0; }
.dn-apropos p { font-family: var(--dn-serif); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.4; max-width: 34ch; }

/* ---------- Pages rubriques et articles ---------- */
.archive .page-title, .archive .archive-title { font-family: var(--dn-serif); }
.archive-description { font-size: 1.1rem; max-width: 66ch; }
.single-post .entry-content > p, .single-post .entry-content > ul, .single-post .entry-content > ol { max-width: 680px; }
.single-post .entry-meta, .single-post .entry-taxonomies { font-size: 0.9rem; color: var(--dn-attenue); }
.single-post .post-thumbnail img { aspect-ratio: 21 / 10; object-fit: cover; }
.dn-maj { font-size: 0.9rem; color: var(--dn-attenue); }
.dn-sources { font-size: 0.92rem; color: var(--dn-attenue); }
.dn-sources a { color: var(--dn-attenue); }
.entry-content p.dn-adresse { margin-top: -0.6em; font-size: 0.92rem; color: var(--dn-attenue); }
.dn-encadre { background: var(--dn-lin); padding: clamp(20px, 3vw, 32px); }
.dn-encadre > :first-child { margin-top: 0; }
.dn-encadre > :last-child { margin-bottom: 0; }
.wp-block-table table { border-collapse: collapse; font-size: 0.95rem; }
.wp-block-table th { text-align: left; font-weight: 600; background: var(--dn-lin); }
.wp-block-table td, .wp-block-table th { border: 0; padding: 0.6em 0.8em; }
.wp-block-table tbody tr:nth-child(even) { background: rgba(232, 227, 214, 0.45); }
.wp-block-details { margin: 0 0 1.1em; }
.wp-block-details summary { font-family: var(--dn-serif); font-size: 1.2rem; cursor: pointer; }

/* ---------- Pied de page ---------- */
.site-footer .site-footer-wrap { color: var(--dn-ardoise); }
.site-footer a { color: var(--dn-ardoise); }
.site-footer a:hover { color: var(--dn-brique); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.dn-sommaire .dn-sommaire__list { grid-template-columns: 1fr; }
	.dn-dossier .dn-dossier__photo img { aspect-ratio: 4 / 3; }
	.single-post .post-thumbnail img { aspect-ratio: 4 / 3; }
}

/* ---------- Apparition légère au défilement ---------- */
@keyframes dn-apparition {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.dn-reveal {
			animation: dn-apparition linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}

/* ---------- Conteneur des sections ---------- */
.dn-inner {
	box-sizing: border-box;
	max-width: var(--global-content-width, 1240px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--global-content-edge-padding, 1.5rem);
	padding-right: var(--global-content-edge-padding, 1.5rem);
}
.dn-inner > * { margin-left: 0; margin-right: 0; }
.dn-derniers h2, .dn-apropos h2 { margin-top: 0; }
.dn-section { margin-top: 0; margin-bottom: 0; }

/* ---------- Pied de page : nom et pages ---------- */
.site-footer .dn-footer-brand { font-family: var(--dn-serif); font-size: 1.5rem; line-height: 1.2; color: var(--dn-ardoise-profonde); margin: 0 0 0.3em; }
.site-footer .dn-footer-tagline { color: var(--dn-attenue); margin: 0; }
.site-footer .footer-navigation .menu { gap: 0.4em 1.4em; }
.site-footer .site-middle-footer-wrap { padding-top: clamp(40px, 5vw, 64px); }

/* ---------- Article : en-tête et grande photo ---------- */
.single-post .entry-header .entry-taxonomies,
.single-post .entry-header .entry-taxonomies a { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 0.95rem; color: var(--dn-brique); }
.single-post .entry-header .entry-title { line-height: 1.08; }
.single-post .entry-header .title-entry-excerpt,
.single-post .entry-header .entry-excerpt { font-size: 1.2rem; line-height: 1.55; color: var(--dn-attenue); max-width: 60ch; }
.single-post .kadence-thumbnail-position-below {
	width: min(1180px, calc(100vw - 3rem));
	max-width: none;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.single-post .kadence-thumbnail-position-below figcaption { text-align: left; }
.single-post .entry-content h2 { margin-top: 1.8em; }
.single-post .entry-content h3 { margin-top: 1.4em; }
.single-post .entry-content-wrap figcaption, .single-post .entry-content figcaption { text-align: left; }

/* Archives de rubrique : respiration sous l'en-tête */
.post-archive-hero-section .entry-header { padding-block: clamp(40px, 6vw, 72px); }
.post-archive-hero-section .archive-description { max-width: 68ch; margin-inline: auto; }