@charset "UTF-8";
/* ==========================================================================
   Omas Hausrezepte — feuille de style unique du thème
   Mobile-first. Points de rupture : 640px / 900px / 1200px.
   Aucune dépendance externe (police auto-hébergée, pas de CDN, pas de jQuery).

   Refonte « niveau magazine » : échelle typographique affirmée, barre
   supérieure sombre, logo en bloc, mosaïque héro, surtitres à filets,
   cartes riches à badge superposé, bandes de section contrastées.

   Sommaire :
     01. Reset léger
     02. Tokens (:root)
     03. Police Marcellus (@font-face)
     04. Typographie de base
     05. Utilitaires & accessibilité
     06. Layout, titres de section, surtitres
     07. Barre supérieure (.ohr-topbar)
     08. En-tête & logo en bloc (.ohr-brand)
     09. Navigation principale & sous-menus
     10. Recherche
     11. Navigation mobile (burger + panneau)
     12. Fil d'Ariane
     13. Boutons
     14. Mosaïque héro (.ohr-hero-mosaic)
     15. Héros textuel (variante de repli)
     16. Grille de catégories
     17. Cartes d'article
     18. Bandes contrastées & bloc éditorial
     19. Page article (single)
     20. Contenu riche Gutenberg
     21. Ähnliche Beiträge (articles similaires)
     22. Archives de catégorie
     23. Pagination
     24. Page 404
     25. Résultats de recherche
     26. Formulaires (contact, commentaires)
     27. Barre latérale (widgets)
     28. Pied de page
     29. Emplacements publicitaires (.ohr-ad)
     30. Media queries responsive
     31. Préférences système & impression
     32. Bandeau de consentement (.ohr-consent*)
   ========================================================================== */


/* ==========================================================================
   01. Reset léger
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
	margin: 0;
	padding: 0;
}

ul[class],
ol[class] { list-style: none; }

img,
picture,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button { cursor: pointer; }

table {
	border-collapse: collapse;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   02. Tokens — identité visuelle
   ========================================================================== */

:root {
	/* Couleurs de marque (palette validée, ne pas modifier) */
	--c-primary:   #EFE5D8;
	--c-secondary: #FAF7F1;
	--c-text:      #6A4B3C;
	--c-accent:    #8C9A6B;
	--c-hover:     #76845A;
	--c-dark:      #4F372C;
	--c-darker:    #2F211A;
	--c-soft:      #B9AA9A;
	--c-light:     #8C8177;
	--c-shiny:     #E8DDCF;
	--c-glossy:    #F7F2EA;
	--c-white:     #FFFFFF;

	/* Déclinaisons transparentes (dérivées des couleurs ci-dessus) */
	--c-accent-rgb: 140, 154, 107;
	--c-darker-rgb: 47, 33, 26;

	/* Typographie */
	--font-title: "Marcellus", Georgia, "Times New Roman", serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fs-base: 1.0625rem;   /* 17px */
	--lh-base: 1.75;

	/* Échelle typographique fluide — titres serif à interlignage serré */
	--fs-hero:     clamp(2rem,    1.15rem + 3.6vw, 3.2rem);
	--fs-feature:  clamp(1.5rem,  1.05rem + 1.9vw, 2.35rem);
	--fs-page:     clamp(1.9rem,  1.35rem + 2.4vw, 2.85rem);
	--fs-section:  clamp(1.6rem,  1.2rem + 1.7vw,  2.4rem);
	--fs-h3:       clamp(1.25rem, 1.1rem + 0.6vw,  1.55rem);
	--fs-card:     clamp(1.125rem, 1.02rem + 0.4vw, 1.3rem);
	--lh-title: 1.15;
	--lh-title-loose: 1.25;

	/* Petites capitales espacées (surtitres, badges, labels) */
	--ls-caps: 0.12em;
	--ls-caps-wide: 0.18em;

	/* Rythme */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;

	/* Formes */
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 18px;
	--radius-pill: 999px;

	/* Ombres douces (teintées brun, jamais grises) */
	--shadow-sm: 0 1px 2px rgba(47, 33, 26, 0.06);
	--shadow-md: 0 4px 14px rgba(47, 33, 26, 0.09);
	--shadow-lg: 0 10px 30px rgba(47, 33, 26, 0.13);
	--shadow-xl: 0 18px 44px rgba(47, 33, 26, 0.18);
	--shadow-text: 0 2px 12px rgba(47, 33, 26, 0.55);

	/* Voile dégradé des visuels héro / cartes en surimpression */
	--overlay: linear-gradient(
		to top,
		rgba(47, 33, 26, 0.94) 0%,
		rgba(47, 33, 26, 0.78) 24%,
		rgba(47, 33, 26, 0.42) 52%,
		rgba(47, 33, 26, 0.08) 78%,
		rgba(47, 33, 26, 0) 100%
	);

	/* Structure */
	--container: 1180px;
	--gap: 1.5rem;
	--touch: 44px;
	--topbar-h: 40px;

	/* Transitions */
	--t-fast: 0.15s ease;
	--t-base: 0.22s ease;
	--t-slow: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ==========================================================================
   03. Police Marcellus (auto-hébergée, RGPD)
   ========================================================================== */

@font-face {
	font-family: "Marcellus";
	src: url("marcellus.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   04. Typographie de base
   ========================================================================== */

body {
	background-color: var(--c-secondary);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-title);
	font-weight: 400;
	color: var(--c-darker);
	line-height: var(--lh-title-loose);
	letter-spacing: -0.005em;
	margin-bottom: var(--sp-4);
}

h1 {
	font-size: var(--fs-page);
	line-height: var(--lh-title);
}

h2 {
	font-size: var(--fs-section);
	line-height: var(--lh-title);
}

h3 { font-size: var(--fs-h3); }

h4 { font-size: 1.1875rem; }

h5 { font-size: 1.0625rem; }

h6 {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}

p { margin-bottom: var(--sp-5); }

p:last-child,
ul:last-child,
ol:last-child { margin-bottom: 0; }

a {
	color: var(--c-dark);
	text-decoration: underline;
	text-decoration-color: var(--c-accent);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

a:hover,
a:focus {
	color: var(--c-darker);
	text-decoration-color: var(--c-hover);
}

/* Focus visible homogène sur tout le site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--c-hover);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Sur fond sombre, le liseré de focus doit rester lisible */
.ohr-topbar a:focus-visible,
.ohr-footer a:focus-visible,
.ohr-feature:focus-visible,
.ohr-band--dark a:focus-visible,
.ohr-editorial a:focus-visible {
	outline-color: var(--c-primary);
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }

small { font-size: 0.875rem; }

mark {
	background-color: var(--c-shiny);
	color: var(--c-darker);
	padding: 0 var(--sp-1);
	border-radius: 3px;
}

hr {
	border: 0;
	border-top: 1px solid var(--c-shiny);
	margin: var(--sp-6) 0;
}

/* Listes */
ul, ol {
	padding-left: 1.35em;
	margin-bottom: var(--sp-5);
}

ul { list-style: disc; }
ol { list-style: decimal; }

li { margin-bottom: var(--sp-2); }

li > ul,
li > ol {
	margin-top: var(--sp-2);
	margin-bottom: 0;
}

ul::marker,
li::marker { color: var(--c-accent); }

dl { margin-bottom: var(--sp-5); }
dt { font-weight: 700; }
dd { margin-bottom: var(--sp-3); }

/* Citations */
blockquote {
	position: relative;
	margin: var(--sp-6) 0;
	padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
	background-color: var(--c-glossy);
	border-left: 4px solid var(--c-accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-family: var(--font-title);
	font-size: 1.1875rem;
	line-height: 1.55;
	font-style: normal;
	color: var(--c-dark);
}

blockquote p { margin-bottom: var(--sp-3); }

blockquote cite {
	display: block;
	margin-top: var(--sp-3);
	font-family: var(--font-body);
	font-style: normal;
	font-size: 0.8125rem;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}

/* Code */
code, kbd, samp, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9375em;
}

code {
	background-color: var(--c-primary);
	padding: 0.1em 0.4em;
	border-radius: 4px;
}

pre {
	background-color: var(--c-primary);
	padding: var(--sp-4);
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin-bottom: var(--sp-5);
}

pre code {
	background: none;
	padding: 0;
}

/* Tableaux */
.ohr-table-wrap,
.wp-block-table {
	overflow-x: auto;
	margin-bottom: var(--sp-6);
	-webkit-overflow-scrolling: touch;
}

table {
	font-size: 0.9375rem;
	background-color: var(--c-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

caption {
	caption-side: bottom;
	padding-top: var(--sp-3);
	font-size: 0.875rem;
	color: var(--c-light);
	text-align: left;
}

th, td {
	padding: var(--sp-3) var(--sp-4);
	text-align: left;
	border-bottom: 1px solid var(--c-shiny);
	vertical-align: top;
}

thead th {
	background-color: var(--c-primary);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-darker);
	white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background-color: var(--c-glossy); }


/* ==========================================================================
   05. Utilitaires & accessibilité
   ========================================================================== */

.screen-reader-text,
.ohr-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Lien d'évitement */
.ohr-skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-4);
	z-index: 999;
	background-color: var(--c-dark);
	color: var(--c-white);
	padding: var(--sp-3) var(--sp-5);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	text-decoration: none;
	transition: top var(--t-base);
}

.ohr-skip-link:focus {
	top: 0;
	color: var(--c-white);
}

.ohr-hidden { display: none; }

.ohr-text-center { text-align: center; }

/* Étiquette générique en petites capitales espacées */
.ohr-caps {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	line-height: 1.4;
}


/* ==========================================================================
   06. Layout, titres de section, surtitres
   ========================================================================== */

.ohr-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

.ohr-container--narrow { max-width: 760px; }

.ohr-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.ohr-main {
	flex: 1 0 auto;
	padding-block: var(--sp-6);
}

/* Grille contenu + barre latérale (empilée sur mobile) */
.ohr-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-7);
}

.ohr-content-col { min-width: 0; }

/* Séparation verticale entre blocs de page */
.ohr-section { margin-bottom: var(--sp-8); }

.ohr-section:last-child { margin-bottom: 0; }

/* --- Surtitre de section : petites capitales encadrées de filets --- */
.ohr-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-3);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-wide);
	text-transform: uppercase;
	color: var(--c-accent);
	line-height: 1;
}

.ohr-eyebrow::before,
.ohr-eyebrow::after {
	content: "";
	flex: 1 1 auto;
	max-width: 88px;
	height: 1px;
	background-color: var(--c-soft);
	opacity: 0.75;
}

/* Variante alignée à gauche : un seul filet, à droite du texte */
.ohr-eyebrow--start { justify-content: flex-start; }
.ohr-eyebrow--start::before { display: none; }

/* --- En-tête de section --- */
.ohr-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--c-shiny);
}

.ohr-section__title {
	position: relative;
	margin-bottom: 0;
	font-size: var(--fs-section);
	line-height: var(--lh-title);
	color: var(--c-darker);
}

/* Petit trait accent sous le titre, aligné sur le filet de section */
.ohr-section__head .ohr-section__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(-1 * var(--sp-3) - 1px);
	width: 64px;
	height: 3px;
	background-color: var(--c-accent);
	border-radius: 2px;
}

.ohr-section__link {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--t-fast), gap var(--t-fast);
}

.ohr-section__link::after {
	content: " →";
	color: var(--c-accent);
}

.ohr-section__link:hover,
.ohr-section__link:focus-visible { color: var(--c-hover); }

/* En-tête de section centré (surtitre + grand titre) */
.ohr-section__head--center {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: var(--sp-6);
}

.ohr-section__head--center .ohr-section__title::after {
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(-1 * var(--sp-3));
}

.ohr-section__head--center .ohr-section__title { padding-bottom: var(--sp-4); }

.ohr-section__intro {
	max-width: 62ch;
	margin-inline: auto;
	margin-bottom: 0;
	font-size: 1rem;
	color: var(--c-text);
}


/* ==========================================================================
   07. Barre supérieure (.ohr-topbar)
   Fine bande sombre : accroche à gauche, liens sociaux à droite.
   Masquée sous 640px pour libérer la hauteur d'écran mobile.
   ========================================================================== */

.ohr-topbar {
	display: none;
	background-color: var(--c-darker);
	color: var(--c-shiny);
	font-size: 0.8125rem;
	line-height: 1.3;
}

.ohr-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: var(--topbar-h);
}

.ohr-topbar__claim {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 0;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Petit losange décoratif devant l'accroche */
.ohr-topbar__claim::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	background-color: var(--c-accent);
	transform: rotate(45deg);
	border-radius: 1px;
}

.ohr-topbar__nav {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-left: auto;
}

.ohr-topbar__links {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohr-topbar__links li { margin: 0; }

.ohr-topbar__links a {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--c-shiny);
	text-decoration: none;
	transition: color var(--t-fast);
}

.ohr-topbar__links a:hover,
.ohr-topbar__links a:focus-visible { color: var(--c-white); }

/* Icônes sociales de la barre supérieure */
.ohr-topbar__social {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohr-topbar__social li { margin: 0; }

.ohr-topbar__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--c-shiny);
	border-radius: 50%;
	text-decoration: none;
	transition: background-color var(--t-fast), color var(--t-fast);
}

.ohr-topbar__social a:hover,
.ohr-topbar__social a:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--c-white);
}

.ohr-topbar__social svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}


/* ==========================================================================
   08. En-tête & logo en bloc (.ohr-brand)
   ========================================================================== */

.ohr-header {
	position: relative;
	z-index: 50;
	background-color: var(--c-primary);
	border-bottom: 1px solid var(--c-shiny);
	box-shadow: var(--shadow-sm);
}

.ohr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 68px;
	padding-block: var(--sp-3);
}

/* --- Bloc de marque : pictogramme + nom sur deux niveaux + baseline --- */
.ohr-brand,
.ohr-branding {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-width: 0;
	text-decoration: none;
}

.ohr-brand__link,
.ohr-branding .custom-logo-link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

/* Logo image : plafonné à 190px de large */
.ohr-brand__logo,
.ohr-branding .custom-logo {
	flex: 0 0 auto;
	width: auto;
	max-width: 190px;
	max-height: 56px;
	object-fit: contain;
}

/* Repli sans logo : carré arrondi en accent avec l'initiale */
.ohr-brand__mark {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--c-accent);
	color: var(--c-white);
	font-family: var(--font-title);
	font-size: 1.375rem;
	line-height: 1;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), var(--shadow-sm);
	transition: background-color var(--t-base), transform var(--t-base);
}

.ohr-brand:hover .ohr-brand__mark,
.ohr-brand__link:focus-visible .ohr-brand__mark {
	background-color: var(--c-hover);
	transform: rotate(-3deg);
}

.ohr-brand__mark svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.ohr-brand__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	gap: 1px;
}

/* Nom du site : deux niveaux typographiques */
.ohr-brand__name,
.ohr-site-title {
	display: block;
	margin: 0;
	font-family: var(--font-title);
	font-size: 1.3125rem;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--c-darker);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ohr-brand__name a,
.ohr-site-title a {
	color: inherit;
	text-decoration: none;
}

.ohr-brand__name a:hover,
.ohr-site-title a:hover { color: var(--c-dark); }

/* Premier niveau : plus petit, en petites capitales espacées */
.ohr-brand__name-top {
	display: block;
	font-size: 0.6875em;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}

/* Second niveau : le mot fort */
.ohr-brand__name-main {
	display: block;
	font-size: 1em;
	color: var(--c-darker);
}

/* Baseline sous le nom, en petites capitales */
.ohr-brand__baseline,
.ohr-site-description {
	display: none;
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps-wide);
	text-transform: uppercase;
	color: var(--c-light);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Actions de droite (recherche + burger) */
.ohr-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}


/* ==========================================================================
   09. Navigation principale & sous-menus
   ========================================================================== */

/* Navigation horizontale — masquée sous 900px */
.ohr-nav { display: none; }

.ohr-menu {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohr-menu li {
	position: relative;
	margin: 0;
}

.ohr-menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--touch);
	padding: var(--sp-2) var(--sp-3);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-dark);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: color var(--t-fast);
}

/* Soulignement animé : se déploie du centre vers les bords */
.ohr-menu > li > a::before {
	content: "";
	position: absolute;
	left: var(--sp-3);
	right: var(--sp-3);
	bottom: 6px;
	height: 2px;
	background-color: var(--c-accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--t-base);
}

.ohr-menu > li > a:hover,
.ohr-menu > li > a:focus-visible { color: var(--c-darker); }

.ohr-menu > li > a:hover::before,
.ohr-menu > li > a:focus-visible::before,
.ohr-menu > li:hover > a::before { transform: scaleX(1); }

/* État actif : soulignement permanent, plus dense */
.ohr-menu > .current-menu-item > a,
.ohr-menu > .current-menu-ancestor > a,
.ohr-menu > .current-menu-parent > a,
.ohr-menu > .current_page_item > a,
.ohr-menu > .current-cat > a { color: var(--c-darker); }

.ohr-menu > .current-menu-item > a::before,
.ohr-menu > .current-menu-ancestor > a::before,
.ohr-menu > .current-menu-parent > a::before,
.ohr-menu > .current_page_item > a::before,
.ohr-menu > .current-cat > a::before {
	transform: scaleX(1);
	height: 3px;
}

/* Flèche des éléments à sous-menu */
.ohr-menu .menu-item-has-children > a::after,
.ohr-menu .cat-item:has(> .children) > a::after {
	content: "";
	width: 0.36em;
	height: 0.36em;
	margin-left: 0.55em;
	border-right: 2px solid var(--c-accent);
	border-bottom: 2px solid var(--c-accent);
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--t-fast);
}

.ohr-menu .menu-item-has-children:hover > a::after,
.ohr-menu .menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(225deg);
}

/* Sous-menus : cartes flottantes, ombre douce, coins arrondis */
.ohr-menu .sub-menu,
.ohr-menu .children {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	z-index: 60;
	display: block;
	min-width: 244px;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}

/* Petit ergot pointant vers l'élément parent */
.ohr-menu > li > .sub-menu::before,
.ohr-menu > li > .children::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 26px;
	width: 10px;
	height: 10px;
	background-color: var(--c-white);
	border-left: 1px solid var(--c-shiny);
	border-top: 1px solid var(--c-shiny);
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
}

.ohr-menu > li:hover > .sub-menu,
.ohr-menu > li:focus-within > .sub-menu,
.ohr-menu > li.is-open > .sub-menu,
.ohr-menu > li:hover > .children,
.ohr-menu > li:focus-within > .children {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Sous-menu de 2e niveau : ouverture latérale */
.ohr-menu .sub-menu .sub-menu,
.ohr-menu .children .children {
	top: -0.5rem;
	left: 100%;
	transform: translateX(8px);
}

.ohr-menu .sub-menu .sub-menu::before,
.ohr-menu .children .children::before { display: none; }

.ohr-menu .sub-menu li:hover > .sub-menu,
.ohr-menu .sub-menu li:focus-within > .sub-menu,
.ohr-menu .children li:hover > .children,
.ohr-menu .children li:focus-within > .children {
	transform: translateX(0);
}

.ohr-menu .sub-menu a,
.ohr-menu .children a {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: var(--sp-2) var(--sp-3);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--c-dark);
	text-decoration: none;
	border-radius: var(--radius-sm);
	white-space: normal;
	transition: background-color var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}

.ohr-menu .sub-menu a:hover,
.ohr-menu .sub-menu a:focus-visible,
.ohr-menu .children a:hover,
.ohr-menu .children a:focus-visible {
	background-color: var(--c-glossy);
	color: var(--c-darker);
	padding-left: var(--sp-4);
}

.ohr-menu .sub-menu .current-menu-item > a {
	background-color: var(--c-glossy);
	color: var(--c-darker);
	box-shadow: inset 2px 0 0 var(--c-accent);
}

.ohr-menu .sub-menu .menu-item-has-children > a::after {
	margin-left: auto;
	transform: rotate(-45deg);
}


/* ==========================================================================
   10. Recherche
   ========================================================================== */

.ohr-search {
	display: flex;
	align-items: center;
	background-color: var(--c-white);
	border: 1px solid var(--c-soft);
	border-radius: var(--radius-pill);
	overflow: hidden;
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.ohr-search:focus-within {
	border-color: var(--c-hover);
	box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), 0.25);
}

.ohr-search__field {
	width: 100%;
	min-width: 0;
	min-height: var(--touch);
	padding: var(--sp-2) var(--sp-4);
	background: none;
	border: 0;
	font-size: 1rem;
	color: var(--c-text);
}

.ohr-search__field::placeholder {
	color: var(--c-light);
	opacity: 1;
}

.ohr-search__field:focus { outline: none; }

.ohr-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--touch);
	height: var(--touch);
	background: none;
	border: 0;
	color: var(--c-dark);
	transition: color var(--t-fast), background-color var(--t-fast);
}

.ohr-search__submit:hover {
	background-color: var(--c-glossy);
	color: var(--c-hover);
}

.ohr-search__submit svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* La recherche de l'en-tête n'apparaît qu'à partir de 900px */
.ohr-header .ohr-search { display: none; }


/* ==========================================================================
   11. Navigation mobile (burger + panneau déroulant)
   ========================================================================== */

.ohr-burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: var(--touch);
	height: var(--touch);
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--c-soft);
	border-radius: var(--radius-sm);
	transition: background-color var(--t-fast), border-color var(--t-fast);
}

.ohr-burger:hover {
	background-color: var(--c-shiny);
	border-color: var(--c-light);
}

.ohr-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--c-dark);
	border-radius: 2px;
	transition: transform var(--t-base), opacity var(--t-fast);
}

.ohr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ohr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ohr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panneau mobile */
.ohr-mobile-panel {
	display: none;
	background-color: var(--c-secondary);
	border-top: 1px solid var(--c-shiny);
	box-shadow: var(--shadow-md);
}

.ohr-mobile-panel.is-open { display: block; }

.ohr-mobile-panel .ohr-container { padding-block: var(--sp-4); }

.ohr-mobile-panel .ohr-search { margin-bottom: var(--sp-4); }

.ohr-mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohr-mobile-menu li { margin: 0; }

.ohr-mobile-menu a {
	display: flex;
	align-items: center;
	min-height: var(--touch);
	padding: var(--sp-3) var(--sp-2);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--c-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--c-shiny);
}

.ohr-mobile-menu a:hover,
.ohr-mobile-menu a:focus-visible { color: var(--c-darker); }

.ohr-mobile-menu .current-menu-item > a {
	color: var(--c-darker);
	box-shadow: inset 3px 0 0 var(--c-accent);
	padding-left: var(--sp-4);
}

/* Rangée titre + bouton d'ouverture du sous-menu */
.ohr-mobile-menu .menu-item-has-children > a {
	border-bottom: 0;
	padding-right: var(--sp-2);
}

.ohr-mobile-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--c-shiny);
}

.ohr-mobile-row > a { flex: 1 1 auto; }

.ohr-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--touch);
	height: var(--touch);
	background: none;
	border: 0;
	color: var(--c-dark);
}

.ohr-submenu-toggle::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid var(--c-accent);
	border-bottom: 2px solid var(--c-accent);
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--t-base);
}

.ohr-submenu-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }

.ohr-mobile-menu .sub-menu,
.ohr-mobile-menu .children {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0 0 var(--sp-2) var(--sp-4);
	background-color: var(--c-glossy);
}

.ohr-mobile-menu .sub-menu.is-open,
.ohr-mobile-menu .children.is-open { display: block; }

.ohr-mobile-menu .sub-menu a,
.ohr-mobile-menu .children a {
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0;
	border-bottom: 1px solid rgba(185, 170, 154, 0.35);
}

.ohr-mobile-menu .sub-menu .sub-menu { padding-left: var(--sp-4); }


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

.ohr-breadcrumb {
	padding-block: var(--sp-3);
	font-size: 0.8125rem;
	color: var(--c-light);
}

.ohr-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohr-breadcrumb li {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
}

.ohr-breadcrumb li + li::before {
	content: "›";
	color: var(--c-soft);
}

.ohr-breadcrumb a {
	color: var(--c-text);
	text-decoration: none;
}

.ohr-breadcrumb a:hover { text-decoration: underline; }

.ohr-breadcrumb [aria-current="page"] { color: var(--c-light); }


/* ==========================================================================
   13. Boutons
   ========================================================================== */

.ohr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--touch);
	padding: var(--sp-3) var(--sp-6);
	background-color: var(--c-dark);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--c-dark);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	transition: background-color var(--t-fast), border-color var(--t-fast),
		color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.ohr-btn:hover,
.ohr-btn:focus-visible {
	background-color: var(--c-darker);
	border-color: var(--c-darker);
	color: var(--c-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.ohr-btn--ghost {
	background-color: transparent;
	color: var(--c-dark);
	border-color: var(--c-dark);
	box-shadow: none;
}

.ohr-btn--ghost:hover,
.ohr-btn--ghost:focus-visible {
	background-color: var(--c-dark);
	color: var(--c-white);
}

.ohr-btn--accent {
	background-color: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-white);
}

.ohr-btn--accent:hover,
.ohr-btn--accent:focus-visible {
	background-color: var(--c-hover);
	border-color: var(--c-hover);
}

/* Bouton clair, pour les fonds sombres */
.ohr-btn--light {
	background-color: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-darker);
}

.ohr-btn--light:hover,
.ohr-btn--light:focus-visible {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-darker);
}

.ohr-btn--sm {
	min-height: 38px;
	padding: var(--sp-2) var(--sp-4);
	font-size: 0.75rem;
}


/* ==========================================================================
   14. Mosaïque héro (.ohr-hero-mosaic)
   Une grande une + deux cartes secondaires empilées à droite.
   ========================================================================== */

.ohr-hero-mosaic {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin-bottom: var(--sp-8);
}

.ohr-hero-mosaic__side {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	min-width: 0;
}

/* --- Carte en surimpression (grande une et cartes secondaires) --- */
.ohr-feature {
	position: relative;
	display: block;
	min-width: 0;
	background-color: var(--c-dark);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--c-white);
	box-shadow: var(--shadow-md);
	isolation: isolate;
	transition: box-shadow var(--t-base), transform var(--t-base);
}

.ohr-feature:hover,
.ohr-feature:focus-within {
	box-shadow: var(--shadow-xl);
	transform: translateY(-2px);
}

.ohr-feature__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	background-color: var(--c-primary);
	overflow: hidden;
	margin: 0;
}

.ohr-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow);
}

/* Voile dégradé sombre depuis le bas */
.ohr-feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--overlay);
	pointer-events: none;
}

.ohr-feature:hover .ohr-feature__media img,
.ohr-feature:focus-within .ohr-feature__media img { transform: scale(1.06); }

/* Contenu posé en bas de l'image */
.ohr-feature__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: var(--sp-4);
	pointer-events: none;
}

.ohr-feature__body > * { pointer-events: auto; }

/* Badge de catégorie coloré sur fond translucide */
.ohr-feature__cat,
.ohr-badge {
	display: inline-block;
	margin-bottom: var(--sp-3);
	padding: 5px var(--sp-3);
	background-color: rgba(var(--c-accent-rgb), 0.92);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-pill);
	backdrop-filter: blur(4px);
	transition: background-color var(--t-fast);
}

.ohr-feature__cat:hover,
.ohr-feature__cat:focus-visible {
	background-color: var(--c-hover);
	color: var(--c-white);
}

.ohr-feature__title {
	margin-bottom: var(--sp-2);
	font-family: var(--font-title);
	font-size: var(--fs-feature);
	font-weight: 400;
	line-height: var(--lh-title);
	color: var(--c-white);
	text-shadow: var(--shadow-text);
}

.ohr-feature__title a {
	color: inherit;
	text-decoration: none;
}

.ohr-feature__title a:hover,
.ohr-feature__title a:focus-visible {
	color: var(--c-white);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.6);
	text-underline-offset: 4px;
}

.ohr-feature__excerpt {
	display: none;
	max-width: 54ch;
	margin-bottom: var(--sp-3);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 8px rgba(var(--c-darker-rgb), 0.5);
}

.ohr-feature__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	margin-bottom: 0;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 8px rgba(var(--c-darker-rgb), 0.5);
}

.ohr-feature__meta a {
	color: inherit;
	text-decoration: none;
}

/* Séparateur discret entre deux méta */
.ohr-feature__meta > * + *::before {
	content: "·";
	margin-right: var(--sp-3);
	color: rgba(255, 255, 255, 0.5);
}

/* Le lien enveloppe toute la carte : il doit rester dans le flux
   pour que l'image donne sa hauteur, et NE PAS masquer le texte. */
.ohr-feature__link {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

/* --- Variante compacte : cartes de droite --- */
.ohr-feature--small .ohr-feature__media { aspect-ratio: 16 / 10; }

.ohr-feature--small .ohr-feature__body { padding: var(--sp-3) var(--sp-4); }

.ohr-feature--small .ohr-feature__title {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
	line-height: 1.25;
}

.ohr-feature--small .ohr-feature__cat {
	margin-bottom: var(--sp-2);
	padding: 3px var(--sp-2);
	font-size: 0.625rem;
}

.ohr-feature--small .ohr-feature__excerpt { display: none !important; }


/* ==========================================================================
   15. Héros textuel (variante de repli, sans image de une)
   ========================================================================== */

.ohr-hero {
	position: relative;
	margin-bottom: var(--sp-8);
	padding: var(--sp-7) var(--sp-5);
	background-color: var(--c-primary);
	background-image: radial-gradient(
		circle at 82% 18%,
		rgba(var(--c-accent-rgb), 0.14) 0%,
		rgba(var(--c-accent-rgb), 0) 58%
	);
	border-radius: var(--radius-xl);
	text-align: center;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.ohr-hero__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-wide);
	text-transform: uppercase;
	color: var(--c-hover);
}

.ohr-hero__eyebrow::before,
.ohr-hero__eyebrow::after {
	content: "";
	width: 40px;
	height: 1px;
	background-color: var(--c-soft);
}

.ohr-hero__title {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-hero);
	line-height: var(--lh-title);
	letter-spacing: -0.015em;
	color: var(--c-darker);
}

.ohr-hero__text {
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: var(--sp-6);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--c-text);
}

.ohr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
}


/* ==========================================================================
   16. Grille de catégories
   ========================================================================== */

.ohr-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-4);
}

.ohr-cat-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--sp-3);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	text-align: center;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.ohr-cat-card:hover,
.ohr-cat-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--c-accent);
	box-shadow: var(--shadow-md);
}

/* Vignette de rubrique (image du dernier article publié) */
.ohr-cat-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--sp-3);
	background-color: var(--c-primary);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.ohr-cat-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow);
}

.ohr-cat-card:hover .ohr-cat-card__media img { transform: scale(1.07); }

.ohr-cat-card__title {
	display: block;
	margin-bottom: 2px;
	font-family: var(--font-title);
	font-size: 1.0625rem;
	line-height: 1.25;
	color: var(--c-darker);
}

.ohr-cat-card__count {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}


/* ==========================================================================
   17. Cartes d'article
   ========================================================================== */

.ohr-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}

.ohr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.ohr-card:hover,
.ohr-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--c-soft);
	box-shadow: var(--shadow-lg);
}

/* Média en ratio 4/3 constant */
.ohr-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--c-primary);
	overflow: hidden;
}

.ohr-card__media img,
.ohr-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow);
}

.ohr-card:hover .ohr-card__media img,
.ohr-card:focus-within .ohr-card__media img { transform: scale(1.06); }

/* Léger assombrissement en bas de l'image, pour asseoir le badge */
.ohr-card__media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 45%;
	background: linear-gradient(to top, rgba(var(--c-darker-rgb), 0.42), rgba(var(--c-darker-rgb), 0));
	opacity: 0;
	transition: opacity var(--t-base);
	pointer-events: none;
}

/* Le voile n'apparaît que si un badge est réellement posé sur l'image */
.ohr-card__media:has(.ohr-card__cat)::after { opacity: 1; }

.ohr-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--sp-4) var(--sp-4) var(--sp-4);
}

/* Badge de catégorie — version pastille dans le corps de la carte */
.ohr-card__cat {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: var(--sp-3);
	padding: 4px var(--sp-3);
	background-color: var(--c-glossy);
	color: var(--c-hover);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-pill);
	transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.ohr-card__cat:hover,
.ohr-card__cat:focus-visible {
	background-color: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-white);
}

/* Badge de catégorie — version superposée en bas à gauche de l'image */
.ohr-card__media .ohr-card__cat {
	position: absolute;
	bottom: var(--sp-3);
	left: var(--sp-3);
	z-index: 2;
	margin-bottom: 0;
	background-color: rgba(var(--c-accent-rgb), 0.94);
	border-color: transparent;
	color: var(--c-white);
	box-shadow: 0 2px 10px rgba(var(--c-darker-rgb), 0.3);
	backdrop-filter: blur(4px);
}

.ohr-card__media .ohr-card__cat:hover,
.ohr-card__media .ohr-card__cat:focus-visible { background-color: var(--c-hover); }

.ohr-card__title {
	margin-bottom: var(--sp-2);
	font-family: var(--font-title);
	font-size: var(--fs-card);
	font-weight: 400;
	line-height: 1.28;
	color: var(--c-darker);
}

.ohr-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--c-accent), var(--c-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--t-base), color var(--t-fast);
}

.ohr-card:hover .ohr-card__title a,
.ohr-card__title a:hover,
.ohr-card__title a:focus-visible {
	color: var(--c-dark);
	background-size: 100% 1px;
}

.ohr-card__excerpt {
	margin-bottom: var(--sp-4);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--c-text);
}

.ohr-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--c-glossy);
}

.ohr-card__meta,
.ohr-meta {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}

.ohr-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
}

.ohr-meta a {
	color: var(--c-light);
	text-decoration: none;
}

.ohr-meta a:hover {
	color: var(--c-text);
	text-decoration: underline;
}

/* Lien « Weiterlesen » */
.ohr-more {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-hover);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--t-fast);
}

.ohr-more::after {
	content: " →";
	display: inline-block;
	transition: transform var(--t-fast);
}

.ohr-more:hover,
.ohr-more:focus-visible { color: var(--c-darker); }

.ohr-more:hover::after { transform: translateX(3px); }

/* Variante horizontale (archives, résultats de recherche) */
.ohr-card--row .ohr-card__media { aspect-ratio: 4 / 3; }

/* Carte compacte, sans image : listes secondaires */
.ohr-card--plain .ohr-card__media { display: none; }


/* ==========================================================================
   18. Bandes contrastées & bloc éditorial
   ========================================================================== */

/* Bande pleine largeur qui rompt le rythme de la page */
.ohr-band {
	margin-block: var(--sp-8);
	padding-block: var(--sp-7);
	border-radius: var(--radius-xl);
}

.ohr-band--dark {
	background-color: var(--c-dark);
	color: var(--c-primary);
}

.ohr-band--dark .ohr-section__title,
.ohr-band--dark h2,
.ohr-band--dark h3 { color: var(--c-white); }

.ohr-band--dark .ohr-eyebrow { color: var(--c-shiny); }

.ohr-band--dark .ohr-eyebrow::before,
.ohr-band--dark .ohr-eyebrow::after { background-color: rgba(255, 255, 255, 0.35); }

.ohr-band--dark .ohr-section__head { border-bottom-color: rgba(255, 255, 255, 0.18); }

.ohr-band--dark .ohr-section__link { color: var(--c-primary); }

.ohr-band--accent {
	background-color: var(--c-accent);
	color: var(--c-white);
}

.ohr-band--accent .ohr-section__title,
.ohr-band--accent h2 { color: var(--c-white); }

.ohr-band--accent .ohr-eyebrow { color: rgba(255, 255, 255, 0.85); }

.ohr-band--soft { background-color: var(--c-primary); }

/* --- Bloc éditorial (persona Margarete) : fond sombre, portrait rond --- */
.ohr-editorial {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	align-items: center;
	padding: var(--sp-6) var(--sp-5);
	background-color: var(--c-dark);
	background-image: radial-gradient(
		circle at 12% 20%,
		rgba(var(--c-accent-rgb), 0.22) 0%,
		rgba(var(--c-accent-rgb), 0) 55%
	);
	border: 0;
	border-radius: var(--radius-xl);
	color: var(--c-primary);
	box-shadow: var(--shadow-md);
}

.ohr-editorial__avatar {
	display: block;
	width: 116px;
	height: 116px;
	margin-inline: auto;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 8px 22px rgba(var(--c-darker-rgb), 0.35);
	background-color: var(--c-primary);
}

/* Repli sans photo : cercle neutre pour préserver la grille */
span.ohr-editorial__avatar {
	display: block;
	background-color: var(--c-soft);
}

.ohr-editorial__body { text-align: center; }

.ohr-editorial__eyebrow {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-wide);
	text-transform: uppercase;
	color: var(--c-shiny);
	opacity: 0.9;
}

.ohr-editorial__title {
	margin-bottom: var(--sp-3);
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.9rem);
	line-height: var(--lh-title);
	color: var(--c-white);
}

.ohr-editorial__text {
	max-width: 62ch;
	margin-inline: auto;
	margin-bottom: var(--sp-5);
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.86);
}

.ohr-editorial__signature {
	display: block;
	margin-bottom: var(--sp-4);
	font-family: var(--font-title);
	font-size: 1.375rem;
	color: var(--c-shiny);
}

.ohr-editorial p:last-child { margin-bottom: 0; }

/* Le bouton fantôme devient clair sur ce fond sombre */
.ohr-editorial .ohr-btn,
.ohr-band--dark .ohr-btn {
	background-color: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-darker);
}

.ohr-editorial .ohr-btn:hover,
.ohr-editorial .ohr-btn:focus-visible,
.ohr-band--dark .ohr-btn:hover,
.ohr-band--dark .ohr-btn:focus-visible {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-darker);
}

.ohr-editorial .ohr-btn--ghost,
.ohr-band--dark .ohr-btn--ghost {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--c-white);
}

.ohr-editorial .ohr-btn--ghost:hover,
.ohr-editorial .ohr-btn--ghost:focus-visible,
.ohr-band--dark .ohr-btn--ghost:hover,
.ohr-band--dark .ohr-btn--ghost:focus-visible {
	background-color: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-darker);
}


/* ==========================================================================
   19. Page article (single)
   ========================================================================== */

.ohr-entry {
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	padding: var(--sp-5) var(--sp-4);
	box-shadow: var(--shadow-sm);
}

.ohr-entry__header { margin-bottom: var(--sp-5); }

.ohr-entry__cat {
	display: inline-block;
	margin-bottom: var(--sp-4);
	padding: 5px var(--sp-4);
	background-color: var(--c-accent);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-pill);
	transition: background-color var(--t-fast);
}

.ohr-entry__cat:hover,
.ohr-entry__cat:focus-visible {
	background-color: var(--c-hover);
	color: var(--c-white);
}

.ohr-entry__title {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-page);
	line-height: var(--lh-title);
	letter-spacing: -0.012em;
	color: var(--c-darker);
}

.ohr-entry__lead {
	max-width: 68ch;
	margin-bottom: var(--sp-4);
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--c-text);
}

.ohr-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--c-shiny);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}

.ohr-entry__meta a {
	color: var(--c-text);
	text-decoration: none;
}

.ohr-entry__meta a:hover { text-decoration: underline; }

.ohr-entry__thumb {
	margin-bottom: var(--sp-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--c-primary);
	box-shadow: var(--shadow-sm);
}

.ohr-entry__thumb img {
	width: 100%;
	height: auto;
}

.ohr-entry__thumb figcaption {
	padding: var(--sp-2) var(--sp-3);
	font-size: 0.8125rem;
	color: var(--c-light);
	text-align: center;
}

/* Pied d'article : tags + partage */
.ohr-entry__footer {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-shiny);
}

.ohr-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohr-tags li { margin: 0; }

.ohr-tags a {
	display: inline-block;
	padding: var(--sp-1) var(--sp-3);
	background-color: var(--c-glossy);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	color: var(--c-dark);
	text-decoration: none;
	transition: background-color var(--t-fast), border-color var(--t-fast);
}

.ohr-tags a:hover {
	background-color: var(--c-primary);
	border-color: var(--c-soft);
}

/* Navigation article précédent / suivant */
.ohr-post-nav {
	display: grid;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

.ohr-post-nav a {
	display: block;
	padding: var(--sp-4) var(--sp-5);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.ohr-post-nav a:hover {
	border-color: var(--c-accent);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.ohr-post-nav__label {
	display: block;
	margin-bottom: var(--sp-1);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-accent);
}

.ohr-post-nav__title {
	display: block;
	font-family: var(--font-title);
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--c-darker);
}

.ohr-post-nav--next { text-align: right; }


/* ==========================================================================
   20. Contenu riche (Gutenberg + éditeur classique)
   ========================================================================== */

.ohr-content {
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

.ohr-content h2 {
	margin-top: var(--sp-8);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	line-height: var(--lh-title);
	border-bottom: 1px solid var(--c-shiny);
}

.ohr-content h2:first-child { margin-top: 0; }

.ohr-content h3 {
	margin-top: var(--sp-6);
	margin-bottom: var(--sp-3);
	font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
}

.ohr-content h4 {
	margin-top: var(--sp-5);
	margin-bottom: var(--sp-3);
	font-size: 1.125rem;
}

.ohr-content ul,
.ohr-content ol { margin-bottom: var(--sp-5); }

.ohr-content li { margin-bottom: var(--sp-2); }

.ohr-content a { font-weight: 600; }

/* Images et figures */
.ohr-content figure,
.ohr-content .wp-block-image { margin: var(--sp-6) 0; }

.ohr-content .wp-block-image img,
.ohr-content figure img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.ohr-content figcaption,
.ohr-content .wp-element-caption,
.ohr-content .wp-caption-text {
	margin-top: var(--sp-2);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--c-light);
	text-align: center;
}

.ohr-content .wp-block-image.is-style-rounded img { border-radius: 50%; }

/* Alignements WordPress */
.ohr-content .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.ohr-content .alignleft,
.ohr-content .alignright {
	display: block;
	margin-inline: auto;
}

.ohr-content .alignwide,
.ohr-content .alignfull { margin-inline: 0; }

/* Galeries */
.ohr-content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3);
	margin: var(--sp-6) 0;
}

.ohr-content .wp-block-gallery figure { margin: 0; }

.ohr-content .wp-block-gallery img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Blocs divers */
.ohr-content .wp-block-quote { margin: var(--sp-6) 0; }

.ohr-content .wp-block-separator {
	max-width: 120px;
	margin: var(--sp-7) auto;
	border-top: 2px solid var(--c-accent);
}

.ohr-content .wp-block-button__link {
	display: inline-block;
	min-height: var(--touch);
	padding: var(--sp-3) var(--sp-6);
	background-color: var(--c-dark);
	color: var(--c-white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-pill);
}

.ohr-content .wp-block-button__link:hover { background-color: var(--c-darker); }

.ohr-content .wp-block-embed iframe,
.ohr-content .wp-block-embed video {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--radius-md);
}

/* Encadré « bon à savoir » / Kostenbox */
.ohr-note {
	margin: var(--sp-6) 0;
	padding: var(--sp-5);
	background-color: var(--c-glossy);
	border: 1px solid var(--c-shiny);
	border-left: 4px solid var(--c-accent);
	border-radius: var(--radius-md);
	font-size: 1rem;
}

.ohr-note__title {
	margin-bottom: var(--sp-2);
	font-family: var(--font-title);
	font-size: 1.125rem;
	color: var(--c-darker);
}


/* ==========================================================================
   21. Ähnliche Beiträge
   ========================================================================== */

.ohr-related {
	margin-top: var(--sp-8);
	padding: var(--sp-6) var(--sp-4);
	background-color: var(--c-primary);
	border-radius: var(--radius-xl);
}

.ohr-related__title {
	margin-bottom: var(--sp-5);
	padding-bottom: var(--sp-3);
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.85rem);
	line-height: var(--lh-title);
	border-bottom: 1px solid var(--c-soft);
}

.ohr-related .ohr-grid { gap: var(--sp-4); }

.ohr-related .ohr-card { border-color: var(--c-soft); }


/* ==========================================================================
   22. Archives de catégorie
   ========================================================================== */

.ohr-page-header {
	margin-bottom: var(--sp-7);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-shiny);
}

.ohr-page-header__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-page);
	line-height: var(--lh-title);
	letter-spacing: -0.012em;
	color: var(--c-darker);
}

.ohr-page-header__desc {
	max-width: 68ch;
	margin-bottom: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--c-text);
}

.ohr-page-header__count {
	display: block;
	margin-top: var(--sp-3);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}

/* Sous-catégories listées en pastilles */
.ohr-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: var(--sp-5) 0 0;
	padding: 0;
}

.ohr-subcats li { margin: 0; }

.ohr-subcats a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: var(--sp-1) var(--sp-4);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--c-dark);
	text-decoration: none;
	transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.ohr-subcats a:hover,
.ohr-subcats a:focus-visible {
	background-color: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-white);
}

.ohr-subcats--center { justify-content: center; }


/* ==========================================================================
   23. Pagination
   ========================================================================== */

.ohr-pagination {
	margin-top: var(--sp-8);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-shiny);
}

.ohr-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
}

.ohr-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--touch);
	min-height: var(--touch);
	padding: 0 var(--sp-3);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-sm);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--c-dark);
	text-decoration: none;
	transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.ohr-pagination a.page-numbers:hover,
.ohr-pagination a.page-numbers:focus-visible {
	background-color: var(--c-shiny);
	border-color: var(--c-soft);
}

.ohr-pagination .page-numbers.current {
	background-color: var(--c-dark);
	border-color: var(--c-dark);
	color: var(--c-white);
}

.ohr-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
	color: var(--c-light);
}

/* Pagination interne d'un article découpé en plusieurs pages */
.ohr-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
	font-size: 0.9375rem;
}

.ohr-page-links a,
.ohr-page-links > span > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--sp-2);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--c-dark);
}

.ohr-page-links a:hover { background-color: var(--c-shiny); }


/* ==========================================================================
   24. Page 404
   ========================================================================== */

.ohr-404 {
	max-width: 680px;
	margin-inline: auto;
	padding: var(--sp-8) var(--sp-4);
	text-align: center;
}

.ohr-404__code {
	margin-bottom: var(--sp-3);
	font-family: var(--font-title);
	font-size: clamp(4rem, 2rem + 10vw, 7rem);
	line-height: 1;
	color: var(--c-soft);
}

.ohr-404__title {
	margin-bottom: var(--sp-3);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

.ohr-404__text {
	margin-bottom: var(--sp-6);
	color: var(--c-text);
}

.ohr-404 .ohr-search {
	max-width: 420px;
	margin: 0 auto var(--sp-6);
}

.ohr-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
}


/* ==========================================================================
   25. Résultats de recherche
   ========================================================================== */

.ohr-search-page__form {
	max-width: 520px;
	margin-bottom: var(--sp-6);
}

.ohr-search-summary {
	margin-bottom: var(--sp-5);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}

.ohr-search-summary strong { color: var(--c-dark); }

.ohr-no-results {
	padding: var(--sp-7) var(--sp-5);
	background-color: var(--c-glossy);
	border: 1px dashed var(--c-soft);
	border-radius: var(--radius-lg);
	text-align: center;
}

.ohr-no-results__title {
	margin-bottom: var(--sp-3);
	font-size: 1.375rem;
}


/* ==========================================================================
   26. Formulaires (contact, commentaires)
   ========================================================================== */

.ohr-form {
	max-width: 640px;
	padding: var(--sp-5) var(--sp-4);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.ohr-field { margin-bottom: var(--sp-5); }

.ohr-label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-dark);
}

.ohr-label .ohr-required { color: #A5482F; }

.ohr-input,
.ohr-textarea,
.ohr-select {
	width: 100%;
	min-height: var(--touch);
	padding: var(--sp-3) var(--sp-4);
	background-color: var(--c-secondary);
	border: 1px solid var(--c-soft);
	border-radius: var(--radius-md);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--c-text);
	transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}

.ohr-textarea {
	min-height: 160px;
	resize: vertical;
}

.ohr-input::placeholder,
.ohr-textarea::placeholder {
	color: var(--c-light);
	opacity: 1;
}

.ohr-input:focus,
.ohr-textarea:focus,
.ohr-select:focus {
	outline: none;
	background-color: var(--c-white);
	border-color: var(--c-hover);
	box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), 0.25);
}

.ohr-input[aria-invalid="true"],
.ohr-textarea[aria-invalid="true"] { border-color: #A5482F; }

.ohr-field__hint {
	display: block;
	margin-top: var(--sp-2);
	font-size: 0.8125rem;
	color: var(--c-light);
}

.ohr-field__error {
	display: block;
	margin-top: var(--sp-2);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #A5482F;
}

/* Case à cocher (consentement RGPD) */
.ohr-check {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: 0.9375rem;
}

.ohr-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	accent-color: var(--c-accent);
}

/* Piège à robots — invisible mais hors flux */
.ohr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Messages de succès / erreur */
.ohr-notice {
	margin-bottom: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius-md);
	border-left: 4px solid;
	font-size: 1rem;
}

.ohr-notice--success {
	background-color: #EEF2E4;
	border-color: var(--c-hover);
	color: #3D4A29;
}

.ohr-notice--error {
	background-color: #F7EAE6;
	border-color: #A5482F;
	color: #7A3322;
}

.ohr-notice__title {
	margin-bottom: var(--sp-1);
	font-family: var(--font-title);
	font-size: 1.0625rem;
	color: inherit;
}

/* Commentaires (si activés) */
.ohr-comments { margin-top: var(--sp-8); }

.ohr-comments__title {
	margin-bottom: var(--sp-5);
	font-size: 1.5rem;
}

.ohr-comment-list {
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0;
}

.ohr-comment-list li { margin-bottom: var(--sp-4); }

.ohr-comment {
	padding: var(--sp-4) var(--sp-5);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-md);
}

.ohr-comment__meta {
	margin-bottom: var(--sp-2);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}

/* Page contact */
.ohr-contact { max-width: 720px; }


/* ==========================================================================
   27. Barre latérale (widgets)
   ========================================================================== */

.ohr-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	min-width: 0;
}

.ohr-widget {
	padding: var(--sp-5) var(--sp-4);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.ohr-widget__title,
.ohr-widget .widget-title {
	position: relative;
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-darker);
	border-bottom: 1px solid var(--c-shiny);
}

.ohr-widget__title::after,
.ohr-widget .widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 42px;
	height: 2px;
	background-color: var(--c-accent);
}

.ohr-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohr-widget li {
	margin: 0;
	border-bottom: 1px solid var(--c-glossy);
}

.ohr-widget li:last-child { border-bottom: 0; }

.ohr-widget li a {
	display: flex;
	align-items: center;
	min-height: var(--touch);
	padding: var(--sp-2) 0;
	font-size: 0.9375rem;
	color: var(--c-dark);
	text-decoration: none;
	transition: color var(--t-fast), padding-left var(--t-fast);
}

.ohr-widget li a:hover,
.ohr-widget li a:focus-visible {
	color: var(--c-hover);
	padding-left: var(--sp-2);
}

/* Liste « Neueste Beiträge » avec vignette */
.ohr-mini-post {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
}

.ohr-mini-post__thumb {
	flex: 0 0 auto;
	width: 76px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sm);
	object-fit: cover;
	background-color: var(--c-primary);
}

.ohr-mini-post__title {
	font-family: var(--font-title);
	font-size: 1rem;
	line-height: 1.3;
	color: var(--c-darker);
	text-decoration: none;
}

.ohr-mini-post__title:hover { color: var(--c-dark); text-decoration: underline; }

.ohr-mini-post__date {
	display: block;
	margin-top: 3px;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-light);
}

/* Barre latérale collante à partir du grand écran */
.ohr-sidebar__sticky { position: static; }


/* ==========================================================================
   28. Pied de page
   ========================================================================== */

.ohr-footer {
	flex: 0 0 auto;
	margin-top: var(--sp-8);
	background-color: var(--c-dark);
	color: var(--c-primary);
}

.ohr-footer a {
	color: var(--c-primary);
	text-decoration: none;
}

.ohr-footer a:hover,
.ohr-footer a:focus-visible {
	color: var(--c-white);
	text-decoration: underline;
}

.ohr-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
	padding-block: var(--sp-7);
}

.ohr-footer__title {
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-2);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-white);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.ohr-footer__text {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-shiny);
}

.ohr-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohr-footer__col li { margin: 0; }

.ohr-footer__col li a {
	display: flex;
	align-items: center;
	min-height: var(--touch);
	font-size: 0.9375rem;
	transition: padding-left var(--t-fast);
}

.ohr-footer__col li a:hover { padding-left: var(--sp-2); }

/* Réseaux sociaux */
.ohr-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	list-style: none;
	margin: var(--sp-5) 0 0;
	padding: 0;
}

.ohr-social li { margin: 0; }

.ohr-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--touch);
	height: var(--touch);
	background-color: rgba(255, 255, 255, 0.10);
	border-radius: 50%;
	transition: background-color var(--t-fast), transform var(--t-fast);
}

.ohr-social a:hover,
.ohr-social a:focus-visible {
	background-color: var(--c-accent);
	transform: translateY(-2px);
}

.ohr-social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Bandeau bas + menu légal */
.ohr-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-block: var(--sp-4);
	background-color: var(--c-darker);
}

.ohr-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	text-align: center;
}

.ohr-legal-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2) var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohr-legal-menu li { margin: 0; }

.ohr-legal-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ohr-copyright {
	font-size: 0.75rem;
	color: var(--c-soft);
}


/* ==========================================================================
   29. Emplacements publicitaires (.ohr-ad)
   Rendu par ohr_ad_slot() : conteneur absent tant que l'option est vide.
   Hauteur réservée pour éviter le décalage de mise en page (CLS).
   ========================================================================== */

.ohr-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	margin-block: var(--sp-7);
	padding: var(--sp-3) var(--sp-2);
	background-color: transparent;
	border: 0;
	border-top: 1px solid var(--c-shiny);
	border-bottom: 1px solid var(--c-shiny);
	border-radius: 0;
	overflow: hidden;
	text-align: center;
}

/* Sécurité : rien à afficher => pas de bloc ni de hauteur réservée */
.ohr-ad:empty,
.ohr-ad.is-empty {
	display: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Label « Anzeige » — discret, en tout petit, au-dessus de l'annonce */
.ohr-ad__label {
	display: block;
	width: 100%;
	margin-bottom: var(--sp-3);
	font-family: var(--font-body);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: var(--ls-caps-wide);
	text-transform: uppercase;
	color: var(--c-soft);
	line-height: 1;
}

.ohr-ad.is-empty .ohr-ad__label { display: none; }

.ohr-ad__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.ohr-ad__inner ins,
.ohr-ad__inner iframe,
.ohr-ad__inner img {
	max-width: 100%;
	margin-inline: auto;
}

/* Variantes par emplacement */
.ohr-ad--after-title {
	margin-top: var(--sp-5);
	margin-bottom: var(--sp-6);
	min-height: 250px;
}

.ohr-ad--in-article { margin-block: var(--sp-8); }

.ohr-ad--after-content { margin-bottom: var(--sp-5); }

.ohr-ad--sidebar {
	min-height: 280px;
	margin-block: 0;
	padding: var(--sp-3);
	background-color: var(--c-glossy);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
}


/* ==========================================================================
   30. Responsive
   ========================================================================== */

/* ---------- ≥ 640px : petites tablettes ---------- */
@media (min-width: 640px) {

	.ohr-container { padding-inline: var(--sp-5); }

	.ohr-main { padding-block: var(--sp-7); }

	/* La barre supérieure apparaît */
	.ohr-topbar { display: block; }

	/* Le bloc de marque gagne sa baseline */
	.ohr-brand__baseline,
	.ohr-site-description { display: block; }

	.ohr-brand__name,
	.ohr-site-title { font-size: 1.5rem; }

	.ohr-header__inner { min-height: 76px; }

	/* Mosaïque héro : la grande une garde son ratio, les petites s'alignent */
	.ohr-hero-mosaic__side { grid-template-columns: repeat(2, 1fr); }

	.ohr-feature__body { padding: var(--sp-5); }

	.ohr-feature--small .ohr-feature__body { padding: var(--sp-4); }

	.ohr-hero { padding: var(--sp-8) var(--sp-6); }

	.ohr-cat-grid { grid-template-columns: repeat(3, 1fr); }

	.ohr-grid { grid-template-columns: repeat(2, 1fr); }

	.ohr-entry { padding: var(--sp-6) var(--sp-5); }

	.ohr-form { padding: var(--sp-6) var(--sp-5); }

	.ohr-related { padding: var(--sp-7) var(--sp-5); }

	.ohr-post-nav { grid-template-columns: repeat(2, 1fr); }

	.ohr-footer__cols { grid-template-columns: repeat(2, 1fr); }

	.ohr-footer__bottom-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.ohr-legal-menu { justify-content: flex-start; }

	/* Bloc éditorial : portrait à gauche, texte à droite */
	.ohr-editorial {
		grid-template-columns: 140px 1fr;
		gap: var(--sp-6);
		padding: var(--sp-7) var(--sp-6);
	}

	.ohr-editorial__avatar {
		width: 140px;
		height: 140px;
	}

	.ohr-editorial__body { text-align: left; }

	.ohr-editorial__text { margin-inline: 0; }

	/* Carte horizontale sur les listes d'archives */
	.ohr-card--row {
		flex-direction: row;
		align-items: stretch;
	}

	.ohr-card--row .ohr-card__media {
		flex: 0 0 38%;
		aspect-ratio: auto;
	}

	.ohr-card--row .ohr-card__body { padding: var(--sp-5); }

	.ohr-band { padding-inline: var(--sp-5); }
}

/* ---------- ≥ 900px : passage au bureau ---------- */
@media (min-width: 900px) {

	/* Navigation horizontale, burger masqué */
	.ohr-nav { display: block; }

	.ohr-burger { display: none; }

	.ohr-mobile-panel,
	.ohr-mobile-panel.is-open { display: none; }

	.ohr-header .ohr-search {
		display: flex;
		width: 210px;
	}

	.ohr-header__inner {
		flex-wrap: wrap;
		min-height: 88px;
		padding-block: var(--sp-4);
	}

	.ohr-brand__logo,
	.ohr-branding .custom-logo { max-height: 64px; }

	.ohr-brand__name,
	.ohr-site-title { font-size: 1.75rem; }

	.ohr-brand__mark {
		width: 52px;
		height: 52px;
		font-size: 1.625rem;
		border-radius: 14px;
	}

	.ohr-brand__baseline,
	.ohr-site-description { font-size: 0.6875rem; }

	/* Mosaïque héro : 2fr / 1fr, deux cartes empilées à droite */
	.ohr-hero-mosaic {
		grid-template-columns: 2fr 1fr;
		gap: var(--sp-5);
	}

	.ohr-hero-mosaic__side {
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr;
		gap: var(--sp-5);
	}

	/* La grande une occupe toute la hauteur de la colonne */
	.ohr-hero-mosaic > .ohr-feature { height: 100%; }

	.ohr-hero-mosaic > .ohr-feature .ohr-feature__media { height: 100%; }

	.ohr-feature--small { height: 100%; }

	.ohr-feature--small .ohr-feature__media {
		height: 100%;
		aspect-ratio: auto;
		min-height: 180px;
	}

	.ohr-feature__excerpt { display: block; }

	.ohr-feature__body { padding: var(--sp-6); }

	.ohr-feature--small .ohr-feature__body { padding: var(--sp-4); }

	/* Grille contenu + sidebar */
	.ohr-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--sp-6);
	}

	.ohr-sidebar__sticky {
		position: sticky;
		top: var(--sp-5);
	}

	.ohr-grid { grid-template-columns: repeat(3, 1fr); }

	.ohr-grid--2 { grid-template-columns: repeat(2, 1fr); }

	.ohr-grid--4 { grid-template-columns: repeat(4, 1fr); }

	.ohr-cat-grid { grid-template-columns: repeat(6, 1fr); }

	.ohr-content { font-size: 1.125rem; }

	.ohr-content .wp-block-gallery { grid-template-columns: repeat(3, 1fr); }

	.ohr-entry { padding: var(--sp-7) var(--sp-6); }

	.ohr-band { padding: var(--sp-8) var(--sp-6); }

	.ohr-footer__cols { grid-template-columns: 2fr 1fr 1fr; }

	/* Publicités : hauteurs adaptées au bureau */
	.ohr-ad { min-height: 120px; }

	.ohr-ad--after-title { min-height: 120px; }

	.ohr-ad--in-article { min-height: 280px; }

	.ohr-ad--sidebar { min-height: 600px; }
}

/* ---------- ≥ 1200px : grands écrans ---------- */
@media (min-width: 1200px) {

	.ohr-container { padding-inline: var(--sp-6); }

	.ohr-layout { gap: var(--sp-7); }

	.ohr-menu { gap: var(--sp-2); }

	.ohr-menu > li > a {
		padding: var(--sp-2) var(--sp-4);
		font-size: 0.875rem;
	}

	.ohr-menu > li > a::before {
		left: var(--sp-4);
		right: var(--sp-4);
	}

	.ohr-header .ohr-search { width: 260px; }

	.ohr-hero-mosaic { gap: var(--sp-6); }

	.ohr-hero-mosaic__side { gap: var(--sp-6); }

	.ohr-entry { padding: var(--sp-8) var(--sp-7); }

	.ohr-content {
		font-size: 1.1875rem;
		line-height: 1.8;
	}

	/* Images pleine largeur du contenu autorisées à déborder légèrement */
	.ohr-content .alignwide {
		width: calc(100% + var(--sp-7));
		max-width: none;
		margin-inline: calc(var(--sp-7) / -2);
	}

	.ohr-related .ohr-grid { grid-template-columns: repeat(3, 1fr); }

	.ohr-editorial {
		grid-template-columns: 180px 1fr;
		gap: var(--sp-8);
		padding: var(--sp-8) var(--sp-7);
	}

	.ohr-editorial__avatar {
		width: 180px;
		height: 180px;
	}
}


/* ==========================================================================
   31. Préférences système & impression
   ========================================================================== */

@media (prefers-contrast: more) {

	a { text-decoration-thickness: 2px; }

	.ohr-card,
	.ohr-widget,
	.ohr-entry,
	.ohr-cat-card { border-color: var(--c-light); }

	.ohr-eyebrow::before,
	.ohr-eyebrow::after { background-color: var(--c-text); }

	.ohr-feature__media::after {
		background: linear-gradient(
			to top,
			rgba(47, 33, 26, 0.98) 0%,
			rgba(47, 33, 26, 0.85) 35%,
			rgba(47, 33, 26, 0.4) 70%,
			rgba(47, 33, 26, 0.1) 100%
		);
	}
}

/* Les effets de zoom et d'élévation sont neutralisés si l'utilisateur
   demande moins d'animation (la règle globale ne couvre pas le transform). */
@media (prefers-reduced-motion: reduce) {

	.ohr-card:hover,
	.ohr-card:focus-within,
	.ohr-cat-card:hover,
	.ohr-feature:hover,
	.ohr-feature:focus-within,
	.ohr-btn:hover,
	.ohr-post-nav a:hover,
	.ohr-social a:hover { transform: none; }

	.ohr-card:hover .ohr-card__media img,
	.ohr-cat-card:hover .ohr-cat-card__media img,
	.ohr-feature:hover .ohr-feature__media img { transform: none; }
}


@media print {

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
		line-height: 1.5;
	}

	.ohr-topbar,
	.ohr-header,
	.ohr-mobile-panel,
	.ohr-burger,
	.ohr-nav,
	.ohr-search,
	.ohr-sidebar,
	.ohr-footer,
	.ohr-pagination,
	.ohr-related,
	.ohr-post-nav,
	.ohr-breadcrumb,
	.ohr-ad,
	.ohr-skip-link,
	.ohr-hero-mosaic,
	.ohr-comments { display: none; }

	.ohr-layout { display: block; }

	.ohr-entry {
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.ohr-entry__title { font-size: 20pt; }

	.ohr-entry__cat {
		background: none;
		color: #000;
		padding: 0;
		border: 0;
	}

	.ohr-content h2 { font-size: 15pt; }
	.ohr-content h3 { font-size: 13pt; }

	.ohr-content img {
		max-width: 100%;
		box-shadow: none;
		page-break-inside: avoid;
	}

	h1, h2, h3, h4 { page-break-after: avoid; }

	p, blockquote, table, figure { page-break-inside: avoid; }

	a {
		color: #000;
		text-decoration: underline;
	}

	.ohr-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}


/* ==========================================================================
   32. Bandeau de consentement (CMP maison) — .ohr-consent*
   --------------------------------------------------------------------------
   Barre ancrée en bas, fond clair, ombre douce. Boutons contrastés (brun
   foncé sur blanc = AA large). Le panneau de réglages se déplie dans la
   barre : aucun saut de page, aucune fenêtre modale plein écran.
   ========================================================================== */

.ohr-consent {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
}

.ohr-consent[hidden] { display: none; }

/* Voile discret : la page reste lisible, le dialogue garde la priorité. */
.ohr-consent__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(var(--c-darker-rgb), 0.32);
	opacity: 0;
	pointer-events: auto;
	transition: opacity var(--t-base);
}

.ohr-consent.is-visible .ohr-consent__scrim { opacity: 1; }

.ohr-consent__box {
	position: relative;
	width: 100%;
	max-width: var(--container);
	max-height: 88vh;
	max-height: 88dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 auto;
	padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
	background-color: var(--c-white);
	border-top: 3px solid var(--c-accent);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--shadow-xl);
	pointer-events: auto;
	transform: translateY(14px);
	opacity: 0;
	transition: transform var(--t-slow), opacity var(--t-base);
}

.ohr-consent.is-visible .ohr-consent__box {
	transform: translateY(0);
	opacity: 1;
}

.ohr-consent__box:focus { outline: none; }

.ohr-consent__body { max-width: 74ch; }

/* Surtitre en petites capitales, dans l'esprit des surtitres de section. */
.ohr-consent__kicker {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-wide);
	text-transform: uppercase;
	color: var(--c-hover);
}

.ohr-consent__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-title);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
	line-height: var(--lh-title-loose);
	color: var(--c-darker);
}

.ohr-consent__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--c-text);
}

.ohr-consent__text a {
	color: var(--c-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ohr-consent__text a:hover,
.ohr-consent__text a:focus-visible { color: var(--c-hover); }

/* -- Panneau de réglages ------------------------------------------------- */

.ohr-consent__panel {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-shiny);
}

.ohr-consent__panel[hidden] { display: none; }

.ohr-consent__list {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ohr-consent__item {
	padding: var(--sp-4);
	background-color: var(--c-glossy);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-md);
}

.ohr-consent__item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: 30px;
}

.ohr-consent__item-label {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-darker);
}

/* « Immer aktiv » : mention seule, sans interrupteur (non désactivable). */
.ohr-consent__always {
	flex: 0 0 auto;
	padding: 4px var(--sp-3);
	background-color: var(--c-primary);
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-dark);
}

.ohr-consent__item-desc {
	margin: var(--sp-2) 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--c-text);
}

/* -- Interrupteurs (case à cocher native, habillée) ---------------------- */

.ohr-consent__switch {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
}

.ohr-consent__switch-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ohr-consent__switch-label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.ohr-consent__switch-track {
	position: relative;
	display: block;
	width: 52px;
	height: 30px;
	background-color: var(--c-light);
	border-radius: var(--radius-pill);
	transition: background-color var(--t-base);
}

.ohr-consent__switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	background-color: var(--c-white);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-base);
}

.ohr-consent__switch-input:checked + .ohr-consent__switch-label .ohr-consent__switch-track {
	background-color: var(--c-hover);
}

.ohr-consent__switch-input:checked + .ohr-consent__switch-label .ohr-consent__switch-track::after {
	transform: translateX(22px);
}

.ohr-consent__switch-input:focus-visible + .ohr-consent__switch-label .ohr-consent__switch-track {
	outline: 3px solid var(--c-dark);
	outline-offset: 3px;
}

/* -- Actions ------------------------------------------------------------- */

.ohr-consent__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.ohr-consent__btn { flex: 1 1 100%; }

/* Bouton principal : brun foncé, plein contraste sur fond blanc. */
.ohr-consent__btn--accept {
	background-color: var(--c-dark);
	border-color: var(--c-dark);
	color: var(--c-white);
}

.ohr-consent__btn--accept:hover,
.ohr-consent__btn--accept:focus-visible {
	background-color: var(--c-darker);
	border-color: var(--c-darker);
}

/* « Einstellungen » : lien souligné, pas un troisième bouton plein. */
.ohr-consent__toggle {
	flex: 1 1 100%;
	min-height: var(--touch);
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
	transition: color var(--t-fast);
}

.ohr-consent__toggle:hover,
.ohr-consent__toggle:focus-visible { color: var(--c-hover); }

.ohr-consent__btn--save[hidden] { display: none; }

/* -- Lien permanent « Cookie-Einstellungen » (pied de page) -------------- */

.ohr-consent-link {
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color var(--t-fast);
}

.ohr-consent-link[hidden] { display: none; }

.ohr-consent-link:hover,
.ohr-consent-link:focus-visible { color: var(--c-primary); }

/* -- Paliers ------------------------------------------------------------- */

@media (min-width: 640px) {
	.ohr-consent__box {
		padding: var(--sp-6) var(--sp-6) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
	}

	.ohr-consent__btn {
		flex: 0 0 auto;
		min-width: 200px;
	}

	.ohr-consent__toggle {
		flex: 0 0 auto;
		margin-left: var(--sp-2);
	}
}

@media (min-width: 900px) {
	.ohr-consent__box {
		margin-bottom: var(--sp-5);
		border-radius: var(--radius-lg);
		border-top-width: 4px;
	}

	.ohr-consent__list {
		grid-template-columns: repeat(3, 1fr);
		align-items: start;
	}
}

/* Pendant l'affichage : la page derrière ne défile pas sous le doigt. */
.ohr-consent-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.ohr-consent__box,
	.ohr-consent__scrim,
	.ohr-consent__switch-track,
	.ohr-consent__switch-track::after {
		transition: none;
	}

	.ohr-consent__box {
		transform: none;
		opacity: 1;
	}
}

@media (forced-colors: active) {
	.ohr-consent__box { border: 1px solid CanvasText; }
	.ohr-consent__switch-track { border: 1px solid CanvasText; }
}

@media print {
	.ohr-consent,
	.ohr-consent-link { display: none !important; }
}

/* =========================================================================
   Kompatibilität: Klassennamen der Templates
   Die Vorlagen nutzen teilweise andere Klassennamen als die Basisregeln.
   Dieser Block schließt die Lücke, ohne bestehende Regeln zu verändern.
   ========================================================================= */

/* --- Hero-Mosaik ------------------------------------------------------- */
.ohr-mosaic {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 0 0 3rem;
}
.ohr-mosaic__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 1.25rem;
	min-height: 0;
}
@media (min-width: 900px) {
	.ohr-mosaic { grid-template-columns: 1.9fr 1fr; }
}

/* Overlay-Inhalt der Aufmacher (Template nutzt __overlay statt __body). */
.ohr-feature__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: clamp(1rem, 2.5vw, 1.75rem);
	pointer-events: none;
}
.ohr-feature__overlay > * { pointer-events: auto; }

.ohr-feature__badge {
	align-self: flex-start;
	display: inline-block;
	width: auto;
	max-width: 100%;
	white-space: nowrap;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--c-accent);
	color: var(--c-white);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.ohr-feature__link {
	position: relative;
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.ohr-feature__link:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

.ohr-feature--lead .ohr-feature__media { aspect-ratio: 16 / 10; }
.ohr-feature--small .ohr-feature__media { aspect-ratio: 16 / 9; }
.ohr-feature--lead .ohr-feature__title { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.ohr-feature--small .ohr-feature__title { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.ohr-feature__meta { color: rgba(255,255,255,.85); font-size: .82rem; }

/* --- Karten ------------------------------------------------------------ */
.ohr-card__thumb { position: relative; display: block; overflow: hidden; }
.ohr-card__thumb .ohr-badge,
.ohr-card__thumb .ohr-card__cat {
	position: absolute;
	left: .75rem;
	bottom: .75rem;
	z-index: 2;
}

/* --- Navigation -------------------------------------------------------- */
.ohr-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--c-shiny);
	border-radius: 10px;
	background: var(--c-white);
	color: var(--c-text);
	cursor: pointer;
}
.ohr-nav-toggle span,
.ohr-nav-toggle__icon {
	display: block; width: 20px; height: 2px;
	background: currentColor; border-radius: 2px; position: relative;
}
.ohr-nav-toggle span::before,
.ohr-nav-toggle__icon::before,
.ohr-nav-toggle span::after,
.ohr-nav-toggle__icon::after {
	content: ""; position: absolute; left: 0; width: 20px; height: 2px;
	background: currentColor; border-radius: 2px;
}
.ohr-nav-toggle span::before, .ohr-nav-toggle__icon::before { top: -6px; }
.ohr-nav-toggle span::after,  .ohr-nav-toggle__icon::after  { top: 6px; }
@media (min-width: 900px) { .ohr-nav-toggle { display: none; } }

.ohr-submenu-toggle__icon {
	display: block; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transform-origin: center;
}
.ohr-topbar__social-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	color: inherit; opacity: .85;
}
.ohr-topbar__social-link:hover { opacity: 1; }
.ohr-mobile-social { display: flex; gap: .5rem; padding: 1rem 0 0; }
@media (min-width: 900px) { .ohr-mobile-social { display: none; } }

/* --- Abschnitte -------------------------------------------------------- */
.ohr-section--band { background: var(--c-primary); padding: 3rem 0; }
.ohr-section__head--stacked { flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.ohr-meta__date { color: var(--c-light); font-size: .82rem; }
.ohr-btn--primary { background: var(--c-dark); color: var(--c-white); border-color: var(--c-dark); }
.ohr-btn--primary:hover, .ohr-btn--primary:focus-visible { background: var(--c-darker); border-color: var(--c-darker); }
.ohr-post-nav--prev { text-align: left; }

/* --- Kontaktformular --------------------------------------------------- */
.ohr-form__row { margin-bottom: 1.25rem; }
.ohr-form__row--check { display: flex; align-items: flex-start; gap: .65rem; }
.ohr-form__row--submit { margin-top: 1.75rem; }
.ohr-form__label {
	display: block; margin-bottom: .4rem;
	font-size: .82rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--c-light);
}
.ohr-form__label--check {
	text-transform: none; letter-spacing: 0; font-weight: 400;
	font-size: .95rem; color: var(--c-text); margin: 0; line-height: 1.6;
}
.ohr-form__required { color: var(--c-accent); }
.ohr-form__input,
.ohr-form__textarea {
	width: 100%;
	padding: .8rem .95rem;
	border: 1px solid var(--c-shiny);
	border-radius: 10px;
	background: var(--c-white);
	color: var(--c-text);
	font: inherit;
	font-size: 1rem;
}
.ohr-form__input:focus,
.ohr-form__textarea:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgba(140,154,107,.25);
}
.ohr-form__textarea { min-height: 190px; resize: vertical; }
.ohr-form__checkbox { width: 20px; height: 20px; margin-top: .2rem; flex: 0 0 auto; accent-color: var(--c-accent); }
.ohr-form__hint { display: block; margin-top: .35rem; font-size: .85rem; color: var(--c-light); }
.ohr-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ohr-form__notice {
	margin: 0 0 1.5rem; padding: 1rem 1.15rem;
	border-radius: 10px; border-left: 4px solid var(--c-accent);
	background: var(--c-glossy); font-size: .97rem;
}
.ohr-form__notice--success { border-left-color: var(--c-accent); }
.ohr-form__notice--error { border-left-color: #B4553F; background: #FBEFEC; }


/* Lesbarkeit der Aufmacher-Titel unabhängig vom Bildmotiv sichern. */
.ohr-feature__overlay::before {
	content: "";
	position: absolute;
	inset: -3.5rem 0 0 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(28,18,13,.88) 0%, rgba(28,18,13,.65) 45%, rgba(28,18,13,0) 100%);
	pointer-events: none;
}
.ohr-feature__title { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.ohr-feature__title a { color: var(--c-white); }

/* =========================================================================
   Feinschliff Kopfbereich: Logo größer, Suche bleibt in einer Zeile
   ========================================================================= */
.ohr-header__inner { flex-wrap: nowrap; gap: 1.5rem; }
.ohr-brand__logo,
.ohr-branding .custom-logo { max-width: 230px; max-height: 68px; }
.ohr-header__inner > .ohr-nav { flex: 1 1 auto; min-width: 0; }
.ohr-search { flex: 0 0 auto; width: clamp(180px, 22vw, 280px); }
.ohr-search__field { min-width: 0; }
@media (max-width: 1100px) {
	.ohr-search { width: 200px; }
}
@media (max-width: 899px) {
	.ohr-header__inner { flex-wrap: wrap; gap: .75rem 1rem; }
	.ohr-search { order: 3; width: 100%; }
	.ohr-brand__logo, .ohr-branding .custom-logo { max-width: 190px; max-height: 56px; }
}

/* Redaktionsporträt sauber rund und gefüllt. */
.ohr-editorial__avatar {
	width: clamp(110px, 14vw, 168px);
	height: clamp(110px, 14vw, 168px);
	border-radius: 50%;
	object-fit: cover;
	background: var(--c-secondary);
	border: 4px solid rgba(255,255,255,.85);
	flex: 0 0 auto;
}

/* =========================================================================
   MARKENAUFTRITT v2 – mehr Kontrast, weniger Beige-in-Beige
   Referenz: rezeptederoma.com (#FBF6EC Grund, #FFFFFF Karten, #2B2018 Text)
   Die bestehenden Variablen werden hier neu belegt, damit alle Regeln
   automatisch mitziehen.
   ========================================================================= */
:root {
	--c-secondary: #FBF7EF;   /* Seitengrund: warmes Creme, heller als zuvor */
	--c-glossy:    #FFFFFF;   /* Flächen, die vorher beige waren, sind jetzt weiß */
	--c-primary:   #F3EADC;   /* Bänder / Abschnittsflächen */
	--c-shiny:     #E6DACA;   /* Rahmen */
	--c-text:      #2B2018;   /* fast schwarzes Braun – klarer Kontrast */
	--c-light:     #6B5A4C;   /* Sekundärtext, weiterhin gut lesbar */
	--c-soft:      #A2907F;
	--c-accent:    #A8432C;   /* kräftiges Terrakotta statt blassem Oliv */
	--c-hover:     #8B3623;
	--c-dark:      #3A2A1F;
	--c-darker:    #241A13;
	--c-olive:     #5E6B44;   /* Oliv bleibt als Zweitfarbe erhalten */
}

/* Karten klar vom Grund abheben ------------------------------------------ */
.ohr-card,
.ohr-widget,
.ohr-cat-card,
.ohr-post-nav a,
.ohr-single__body {
	background: var(--c-white);
	border: 1px solid var(--c-shiny);
	box-shadow: 0 1px 2px rgba(43,32,24,.04), 0 8px 24px -18px rgba(43,32,24,.35);
}
.ohr-card:hover,
.ohr-cat-card:hover {
	border-color: var(--c-soft);
	box-shadow: 0 2px 4px rgba(43,32,24,.06), 0 18px 38px -22px rgba(43,32,24,.45);
}

/* Abschnittswechsel sichtbar machen -------------------------------------- */
.ohr-section--band,
.ohr-band--soft { background: var(--c-primary); }
.ohr-section { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Typografie kräftiger ---------------------------------------------------- */
.ohr-section__title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); color: var(--c-text); }
.ohr-eyebrow { color: var(--c-accent); font-weight: 700; }
.ohr-card__title { font-size: 1.12rem; line-height: 1.35; color: var(--c-text); }
.ohr-card__excerpt { color: var(--c-light); }
.ohr-card__meta, .ohr-meta__date { color: var(--c-soft); }

/* Akzentfarbe konsequent einsetzen ---------------------------------------- */
.ohr-feature__badge,
.ohr-card__cat,
.ohr-badge { background: var(--c-accent); color: var(--c-white); }
a { color: var(--c-hover); }
a:hover, a:focus-visible { color: var(--c-accent); }
.ohr-btn--primary,
.ohr-btn--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }
.ohr-btn--primary:hover, .ohr-btn--accent:hover { background: var(--c-hover); border-color: var(--c-hover); }
.ohr-eyebrow::before, .ohr-eyebrow::after { background: var(--c-shiny); }
.ohr-section__title::after { background: var(--c-accent); }

/* Kopf- und Fußbereich ---------------------------------------------------- */
.ohr-topbar { background: var(--c-darker); }
.ohr-header { background: var(--c-white); border-bottom: 1px solid var(--c-shiny); }
.ohr-nav a { color: var(--c-text); }
.ohr-nav .current-menu-item > a,
.ohr-nav a:hover { color: var(--c-accent); }
.ohr-footer { background: var(--c-darker); }
body { background: var(--c-secondary); color: var(--c-text); }


/* =========================================================================
   SEITE „ÜBER MARGARETE“ (.ohr-about*)
   Gehört zur Vorlage page-uber-margarete.php.
   Aufbau: Vorspann – Porträt + Text – Werte – Arbeitsweise – Zahlen –
   Themen – Kontaktband.
   Mobile-first: alles einspaltig, ab 640px zwei Spalten für Karten,
   ab 900px zweispaltiges Porträt und Kontaktband.
   Nur bestehende Variablen, weiße Karten, feine Rahmen, weiche Schatten.
   ========================================================================= */

.ohr-about {
	max-width: 1040px;
	margin-inline: auto;
	padding-block: var(--sp-4) var(--sp-6);
}

.ohr-about > * + * { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

/* --- Vorspann ------------------------------------------------------------ */
.ohr-about__intro {
	max-width: 42rem;
	margin-inline: auto;
	padding-bottom: var(--sp-6);
	border-bottom: 1px solid var(--c-shiny);
	text-align: center;
}

.ohr-about__eyebrow {
	margin-bottom: var(--sp-3);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-wide);
	text-transform: uppercase;
	color: var(--c-accent);
	line-height: 1.2;
}

.ohr-about__eyebrow--light { color: var(--c-shiny); }

.ohr-about__title {
	margin-bottom: var(--sp-4);
	font-family: var(--font-title);
	font-size: var(--fs-page);
	line-height: var(--lh-title);
	color: var(--c-darker);
}

.ohr-about__lead {
	margin-bottom: 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--c-light);
}

/* --- Porträt + Seiteninhalt ---------------------------------------------- */
.ohr-about__portrait {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-xl);
	box-shadow: 0 1px 2px rgba(43, 32, 24, .04), 0 12px 30px -22px rgba(43, 32, 24, .45);
}

.ohr-about__figure { margin: 0; }

.ohr-about__image {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
	border: 1px solid var(--c-shiny);
	box-shadow: var(--shadow-md);
	background-color: var(--c-primary);
}

.ohr-about__caption {
	margin-top: var(--sp-3);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--c-light);
	text-align: center;
}

.ohr-about__text { min-width: 0; }

.ohr-about__subtitle {
	margin-bottom: var(--sp-4);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	line-height: var(--lh-title);
	color: var(--c-darker);
}

/* Transparenzhinweis: ruhiger Kasten mit Akzentkante */
.ohr-about__note {
	margin-bottom: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	background-color: var(--c-primary);
	border-left: 3px solid var(--c-accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--c-text);
}

.ohr-about__note strong { color: var(--c-darker); }

/* Freistehende Variante (außerhalb der weißen Karte) */
.ohr-about__note--wide {
	margin-top: var(--sp-6);
	margin-bottom: 0;
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-left: 3px solid var(--c-accent);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	box-shadow: var(--shadow-sm);
}

/* --- Abschnittsköpfe ------------------------------------------------------ */
.ohr-about__section-head { margin-bottom: var(--sp-6); }

.ohr-about__heading {
	position: relative;
	margin-bottom: 0;
	padding-bottom: var(--sp-3);
	font-family: var(--font-title);
	font-size: var(--fs-section);
	line-height: var(--lh-title);
	color: var(--c-darker);
}

.ohr-about__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background-color: var(--c-accent);
	border-radius: 2px;
}

.ohr-about__section-intro {
	max-width: 62ch;
	margin-top: var(--sp-4);
	margin-bottom: 0;
	font-size: 1rem;
	color: var(--c-light);
}

/* --- Werte ---------------------------------------------------------------- */
.ohr-about__values {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ohr-about__value {
	margin: 0;
	padding: var(--sp-5);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(43, 32, 24, .04), 0 8px 24px -18px rgba(43, 32, 24, .35);
	transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.ohr-about__value:hover {
	border-color: var(--c-soft);
	box-shadow: 0 2px 4px rgba(43, 32, 24, .06), 0 18px 38px -22px rgba(43, 32, 24, .45);
	transform: translateY(-2px);
}

.ohr-about__value-title {
	margin-bottom: var(--sp-3);
	font-family: var(--font-title);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--c-darker);
}

.ohr-about__value-title::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-bottom: var(--sp-3);
	background-color: var(--c-accent);
	border-radius: 2px;
}

.ohr-about__value-text {
	margin-bottom: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-light);
}

/* --- Arbeitsweise (nummerierte Schritte) ---------------------------------- */
.ohr-about__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ohr-about-step;
}

.ohr-about__step {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	margin: 0;
	padding: var(--sp-5);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(43, 32, 24, .04), 0 8px 24px -18px rgba(43, 32, 24, .35);
}

.ohr-about__step-num {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	font-family: var(--font-title);
	font-size: 1.0625rem;
	color: var(--c-accent);
	background-color: var(--c-primary);
	border: 1px solid var(--c-shiny);
	border-radius: 50%;
}

.ohr-about__step-body { min-width: 0; }

.ohr-about__step-title {
	margin-bottom: var(--sp-2);
	font-family: var(--font-title);
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--c-darker);
}

.ohr-about__step-text {
	margin-bottom: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-light);
}

/* --- Zahlen --------------------------------------------------------------- */
.ohr-about__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ohr-about__stat {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	padding: var(--sp-5);
	text-align: center;
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-top: 3px solid var(--c-accent);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(43, 32, 24, .04), 0 8px 24px -18px rgba(43, 32, 24, .35);
}

.ohr-about__stat-value {
	font-family: var(--font-title);
	font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
	line-height: 1.1;
	color: var(--c-darker);
}

.ohr-about__stat-label {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-accent);
}

.ohr-about__stat-note {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--c-light);
}

/* --- Themen (Kategorien) -------------------------------------------------- */
.ohr-about__links {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
}

.ohr-about__links-group {
	padding: var(--sp-5);
	background-color: var(--c-white);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(43, 32, 24, .04), 0 8px 24px -18px rgba(43, 32, 24, .35);
}

.ohr-about__links-title {
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--c-shiny);
	font-family: var(--font-title);
	font-size: 1.3125rem;
	line-height: 1.3;
}

.ohr-about__links-title a {
	color: var(--c-darker);
	text-decoration: none;
}

.ohr-about__links-title a:hover,
.ohr-about__links-title a:focus-visible { color: var(--c-accent); }

.ohr-about__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ohr-about__chips li { margin: 0; }

.ohr-about__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 38px;
	padding: var(--sp-2) var(--sp-4);
	background-color: var(--c-primary);
	border: 1px solid var(--c-shiny);
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--c-dark);
	text-decoration: none;
	transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.ohr-about__chip:hover,
.ohr-about__chip:focus-visible {
	background-color: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-white);
}

.ohr-about__chip-count {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--c-light);
}

.ohr-about__chip:hover .ohr-about__chip-count,
.ohr-about__chip:focus-visible .ohr-about__chip-count { color: rgba(255, 255, 255, .85); }

.ohr-about__links-empty {
	margin-bottom: 0;
	font-size: 0.9375rem;
	color: var(--c-light);
}

/* --- Kontaktband ---------------------------------------------------------- */
.ohr-about__contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	align-items: center;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background-color: var(--c-dark);
	background-image: radial-gradient(
		circle at 12% 20%,
		rgba(var(--c-accent-rgb), .28) 0%,
		rgba(var(--c-accent-rgb), 0) 58%
	);
	border-radius: var(--radius-xl);
	color: var(--c-primary);
	box-shadow: var(--shadow-md);
}

.ohr-about__contact-title {
	margin-bottom: var(--sp-3);
	font-family: var(--font-title);
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.9rem);
	line-height: var(--lh-title);
	color: var(--c-white);
}

.ohr-about__contact-text {
	max-width: 62ch;
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
}

.ohr-about__contact-action { margin-bottom: 0; }

.ohr-about__contact a:focus-visible { outline-color: var(--c-primary); }

/* --- Breakpoints ---------------------------------------------------------- */
@media (min-width: 640px) {
	.ohr-about__values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ohr-about__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ohr-about__step { padding: var(--sp-5) var(--sp-6); }
}

@media (min-width: 900px) {
	.ohr-about__portrait {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		gap: var(--sp-7);
		align-items: start;
	}

	.ohr-about__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ohr-about__contact {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--sp-6);
	}

	.ohr-about__contact-action { justify-self: end; }
}

/* --- Systemeinstellungen & Druck ----------------------------------------- */
@media (prefers-contrast: more) {
	.ohr-about__value,
	.ohr-about__step,
	.ohr-about__stat,
	.ohr-about__links-group,
	.ohr-about__chip { border-color: var(--c-dark); }
}

@media (prefers-reduced-motion: reduce) {
	.ohr-about__value:hover { transform: none; }
}

@media print {
	.ohr-about__contact {
		background: none;
		color: var(--c-text);
		border: 1px solid var(--c-shiny);
	}

	.ohr-about__contact-title,
	.ohr-about__contact-text { color: var(--c-text); }

	.ohr-about__value,
	.ohr-about__step,
	.ohr-about__stat,
	.ohr-about__links-group { box-shadow: none; }
}

/* Facebook sichtbar statt nur als Icon --------------------------------- */
.ohr-topbar__social-link { gap: .4rem; width: auto; padding: 0 .5rem; border-radius: 999px; }
.ohr-topbar__social-link svg { width: 15px; height: 15px; }
.ohr-topbar__social-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 720px) { .ohr-topbar__social-label { display: none; } }

.ohr-footer__follow {
	margin: 1.5rem 0 .5rem;
	font-size: .78rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: rgba(255,255,255,.62);
}
/* Der Button trägt jetzt Text: die runde Icon-Form aus .ohr-social a
   muss deshalb gezielt aufgehoben werden. */
.ohr-social a.ohr-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: .6rem;
	width: auto;
	height: auto;
	min-height: var(--touch);
	padding: .5rem 1.05rem .5rem .8rem;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 999px;
	background-color: rgba(255,255,255,.08);
	color: var(--c-white);
	text-decoration: none;
	font-size: .92rem;
	line-height: 1.2;
	white-space: nowrap;
}
.ohr-social a.ohr-social__link:hover,
.ohr-social a.ohr-social__link:focus-visible {
	background-color: var(--c-accent); border-color: var(--c-accent); color: var(--c-white);
}
.ohr-social a.ohr-social__link span { display: inline-block; }
@media (max-width: 420px) {
	.ohr-social a.ohr-social__link { white-space: normal; }
}
.ohr-social__link svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* =========================================================================
   Autorenkasten unter jedem Beitrag
   ========================================================================= */
.ohr-author {
	display: flex;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	align-items: flex-start;
	margin: 2.5rem 0 0;
	padding: clamp(1.25rem, 3vw, 1.9rem);
	background: var(--c-glossy);
	border: 1px solid var(--c-shiny);
	border-left: 4px solid var(--c-accent);
	border-radius: 14px;
}
.ohr-author__avatar {
	width: 96px; height: 96px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--c-white);
	box-shadow: 0 6px 18px -10px rgba(43,32,24,.5);
}
.ohr-author__body { min-width: 0; }
.ohr-author__eyebrow {
	margin: 0 0 .15rem;
	font-size: .7rem; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--c-accent);
}
.ohr-author__name {
	margin: 0 0 .5rem;
	font-family: var(--font-title, "Marcellus", Georgia, serif);
	font-size: 1.3rem; line-height: 1.2; color: var(--c-text);
}
.ohr-author__bio { margin: 0 0 .9rem; color: var(--c-light); font-size: .97rem; line-height: 1.65; }
.ohr-author__links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; }
.ohr-author__link {
	font-size: .9rem; font-weight: 600;
	color: var(--c-hover); text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.ohr-author__link:hover, .ohr-author__link:focus-visible { color: var(--c-accent); }
.ohr-author__link--muted { color: var(--c-light); font-weight: 400; }
@media (max-width: 599px) {
	.ohr-author { flex-direction: column; align-items: center; text-align: center; }
	.ohr-author__links { justify-content: center; }
}

/* Beitragsbild: Hochformat-Montagen (Vorher/Nachher) nicht beschneiden ---- */
.ohr-entry__thumb {
	display: flex;
	justify-content: center;
	background: var(--c-primary);
	border-radius: 14px;
	overflow: hidden;
}
.ohr-entry__thumb img {
	width: auto;
	max-width: 100%;
	max-height: 640px;
	height: auto;
	object-fit: contain;
}
@media (max-width: 599px) {
	.ohr-entry__thumb img { max-height: 480px; }
}