/*
Theme Name: Ouillade 2026
Theme URI: https://www.ouillade.eu/
Author: ouillade.eu
Description: Thème d'actualité pour ouillade.eu. Reprend l'identité du site historique (logo, noir et or, titraille en serif, contenu et colonne de droite) dans une mise en page fluide et responsive, sans jQuery, sans police distante et avec un seul format de vignette.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ouillade
Tags: news, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready
*/

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

:root {
	/* Couleurs reprises de la charte historique. */
	--ink: #141414;
	--ink-soft: #565656;
	--ink-faint: #7b7b7b;
	--paper: #ffffff;
	--paper-alt: #f6f6f5;
	--rule: #d9d9d9;
	--rule-soft: #ececec;
	--accent: #cc0000; /* Rouge des rubriques et des liens. */
	--accent-dark: #9d0000;
	--gold: #f8bc07; /* Or de la marque, réservé aux filets et aux fonds. */
	--gold-ink: #8a6100; /* Déclinaison lisible sur blanc. */
	--slate: #37444a; /* Fond du panneau de tête, repris de l'ancien bandeau. */

	/* Typographie : uniquement des familles présentes sur les appareils.
	   Aucune police n'est téléchargée, donc aucun texte invisible au chargement. */
	--font-title: Georgia, "Times New Roman", Times, serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Échelle fluide : la taille suit la largeur de l'écran entre 360 et 1200 px. */
	--step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
	--step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
	--step-1: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	--step-2: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
	--step-3: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);

	--space: clamp(1rem, 0.8rem + 1vw, 1.75rem);
	--wrap: 1200px;
	--radius: 3px;
}

/* ==========================================================================
   2. Bases
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
}

img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

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

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-title);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.4em;
	text-wrap: balance;
}

p,
ul,
ol,
blockquote,
figure,
table {
	margin: 0 0 1em;
}

blockquote {
	border-left: 3px solid var(--gold);
	margin-left: 0;
	padding-left: var(--space);
	color: var(--ink-soft);
	font-style: italic;
}

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

th,
td {
	border: 1px solid var(--rule);
	padding: 0.4em 0.6em;
	text-align: left;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.6em 1em;
	clip-path: none;
	background: var(--ink);
	color: var(--paper);
}

.wrap {
	width: min(100% - 2 * var(--space), var(--wrap));
	margin-inline: auto;
}

/* ==========================================================================
   3. En-tête du site
   ========================================================================== */

.site-header {
	border-bottom: 1px solid var(--rule);
}

.site-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space);
	padding-block: clamp(0.75rem, 2vw, 1.5rem);
}

.site-logo {
	margin: 0;
	flex: 0 1 auto;
}

.site-logo-img {
	width: auto;
	max-width: min(400px, 70vw);
	height: auto;
}

.site-header-aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-left: auto;
}

.search-form {
	display: flex;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper-alt);
}

.search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	width: clamp(9rem, 20vw, 14rem);
	border: 0;
	background: transparent;
	padding: 0.5em 0.7em;
	font: inherit;
	font-size: var(--step--1);
	color: inherit;
}

.search-form input[type="search"]:focus {
	outline: none;
}

.search-form:focus-within {
	border-color: var(--ink);
}

.search-form button {
	border: 0;
	background: var(--ink);
	color: var(--paper);
	padding: 0.5em 0.9em;
	font: inherit;
	font-size: var(--step--1);
	cursor: pointer;
}

.top-menu-list,
.footer-menu-list,
.site-follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.top-menu-list a,
.footer-menu-list a,
.site-follow a {
	color: var(--ink);
	text-decoration: none;
}

.top-menu-list a:hover,
.footer-menu-list a:hover,
.site-follow a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   4. Navigation principale
   ========================================================================== */

.site-nav {
	border-top: 1px solid var(--rule-soft);
	background: var(--paper);
}

.site-nav-inner {
	position: relative;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.6em;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0.85em 0;
	font: inherit;
	font-size: var(--step--1);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink);
	cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.nav-toggle-bars {
	position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle-bars::before {
	top: -6px;
}

.nav-toggle-bars::after {
	top: 6px;
}

.nav-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-list > li {
	position: relative;
}

.nav-list a {
	display: block;
	padding: 0.85em 1em;
	color: var(--ink);
	font-size: var(--step--1);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.nav-list > li:first-child a {
	padding-left: 0;
}

.nav-list > li > a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.35em;
	background: transparent;
}

.nav-list > li:hover > a::after,
.nav-list > li:focus-within > a::after,
.nav-list > .current-menu-item > a::after,
.nav-list > .current-menu-ancestor > a::after {
	background: var(--gold);
}

/* Sous-menus : ouverts au survol et au clavier, sans JavaScript. */
.nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 14rem;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--rule);
	box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
}

.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu,
.nav-list > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.nav-list .sub-menu a {
	padding: 0.55em 1em;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.nav-list .sub-menu a:hover {
	background: var(--paper-alt);
}

/* ==========================================================================
   5. Bandeau d'information et encadré éditorial
   ========================================================================== */

.site-notice {
	background: var(--ink);
	color: var(--paper);
	font-size: var(--step--1);
	overflow: hidden;
}

.site-notice a {
	color: var(--gold);
}

.site-notice-track {
	padding-block: 0.6em;
	white-space: nowrap;
	animation: ouillade-scroll 32s linear infinite;
}

.site-notice-track > * {
	display: inline;
	margin: 0;
}

.site-notice:hover .site-notice-track,
.site-notice:focus-within .site-notice-track {
	animation-play-state: paused;
}

@keyframes ouillade-scroll {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(-100%);
	}
}

/* Bandeau d'accueil : panorama à gauche, encadré de la rédaction à droite.
   Proportions de l'ancien bloc (620 px d'image pour 330 px de texte), mais en
   colonnes fluides au lieu d'une bande figée à 975x290. */

.hero {
	background: var(--slate);
	color: #fff;
}

.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
	align-items: stretch;
	min-height: 290px;
}

.hero-inner:not(:has(.hero-media)),
.hero-inner:not(:has(.hero-text)) {
	grid-template-columns: minmax(0, 1fr);
}

.hero-media {
	position: relative;
	overflow: hidden;
	background: #263035;
}

.hero-img {
	width: 100%;
	height: 100%;
	min-height: 290px;
	object-fit: cover;
	object-position: center;
}

/* Rotation : les images se superposent, seule l'active est visible. */
.hero-media.is-slider .hero-img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.hero-media.is-slider .hero-img.is-active {
	opacity: 1;
}

.hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 34px;
	height: 54px;
	border: 0;
	background: rgb(0 0 0 / 35%);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.hero-nav:hover,
.hero-nav:focus-visible {
	opacity: 1;
}

.hero-prev {
	left: 0;
}

.hero-next {
	right: 0;
}

.hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1rem, 2.5vw, 1.75rem);
	font-size: var(--step--1);
	line-height: 1.55;
	/* L'encadré d'origine était justifié, mais sur une colonne de cette largeur
	   la justification creuse des blancs et la césure coupe mal (« ré-pond »,
	   « in-vérifiable »). Le fer à gauche reste plus lisible. */
	text-align: left;
}

.hero-title {
	margin-bottom: 0.5em;
	color: #fff;
	font-size: var(--step-0);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.hero-body > :last-child {
	margin-bottom: 0;
}

.hero-body a {
	color: var(--gold);
}

/* Le contenu de l'encadré vient d'un copier-coller Word : tailles en dur
   (font-size: 9px), couleurs figées, et surtout des <h2> employés comme corps
   de texte — c'est ce qui le faisait sortir en gros serif gras. On ramène tous
   les titres à la typographie courante ; le <strong> autour d'AVERTISSEMENT
   suffit à le distinguer. */
.hero-body :is(h1, h2, h3, h4, h5, h6) {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	margin: 0 0 0.9em;
}

.hero-body [style*="font-size"],
.hero-body font {
	font-size: inherit !important;
}

.hero-body [style*="color"],
.hero-body [style*="background"] {
	color: inherit !important;
	background: none !important;
}

.hero-body p:empty,
.hero-body :is(h1, h2, h3, h4, h5, h6):empty {
	display: none;
}

.hero-body > :first-child {
	margin-top: 0;
}

/* ==========================================================================
   6. Gabarit de page
   ========================================================================== */

.site-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	padding-block: clamp(1.25rem, 3vw, 2.5rem);
}

body.no-sidebar .site-body {
	grid-template-columns: minmax(0, 1fr);
}

.site-content {
	min-width: 0;
}

.breadcrumb {
	margin-bottom: 0.75rem;
	font-size: var(--step--1);
	color: var(--ink-faint);
}

.breadcrumb a {
	color: var(--ink-faint);
	text-decoration: none;
}

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

.page-header {
	margin-bottom: var(--space);
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--ink);
}

.page-title {
	margin: 0;
	font-size: var(--step-1);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.page-description {
	margin: 0.5em 0 0;
	color: var(--ink-soft);
	font-size: var(--step--1);
}

/* ==========================================================================
   7. Liste d'articles
   ========================================================================== */

.entry-list {
	display: flex;
	flex-direction: column;
}

.entry-summary {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: var(--space);
	padding-block: var(--space);
	border-bottom: 1px solid var(--rule-soft);
}

.entry-summary:first-child {
	padding-top: 0;
}

.entry-summary:not(:has(.entry-thumb-link)) {
	grid-template-columns: minmax(0, 1fr);
}

.entry-thumb-link {
	display: block;
	align-self: start;
}

.entry-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--paper-alt);
	border-radius: var(--radius);
}

.entry-body {
	min-width: 0;
}

.entry-categories {
	margin: 0 0 0.3em;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-faint);
}

.entry-categories a {
	color: var(--accent);
	text-decoration: none;
}

.entry-categories a:hover {
	text-decoration: underline;
}

.entry-summary .entry-title {
	font-size: var(--step-2);
	margin-bottom: 0.25em;
}

.entry-title a {
	color: var(--ink);
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--accent);
}

.entry-meta {
	margin: 0 0 0.6em;
	font-size: var(--step--1);
	color: var(--ink-faint);
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.9em;
}

.entry-meta a {
	color: var(--ink-faint);
}

.entry-excerpt {
	color: var(--ink-soft);
}

.entry-excerpt p:last-child,
.entry-more {
	margin-bottom: 0;
}

.entry-more a {
	font-weight: 600;
	text-decoration: none;
}

.entry-more a:hover {
	text-decoration: underline;
}

.no-results {
	padding: var(--space) 0;
	color: var(--ink-soft);
}

/* ==========================================================================
   8. Article seul
   ========================================================================== */

.entry-single .entry-header {
	margin-bottom: var(--space);
	padding-bottom: var(--space);
	border-bottom: 1px solid var(--rule);
}

.entry-single .entry-title {
	font-size: var(--step-3);
}

.entry-content {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
	line-height: 1.7;
}

.entry-content h2 {
	font-size: var(--step-2);
	margin-top: 1.4em;
}

.entry-content h3 {
	font-size: var(--step-1);
	margin-top: 1.3em;
}

.entry-content img,
.entry-content figure {
	margin-block: 1.2em;
}

.entry-content figure img {
	margin-block: 0;
}

.entry-content .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
	max-width: 50%;
}

.entry-content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
	max-width: 50%;
}

.entry-content .aligncenter {
	margin-inline: auto;
}

.entry-content .wp-caption-text,
.entry-content figcaption {
	font-size: var(--step--1);
	color: var(--ink-faint);
	margin-top: 0.4em;
}

.entry-footer {
	margin-top: var(--space);
	padding-top: var(--space);
	border-top: 1px solid var(--rule);
}

.entry-tags {
	font-size: var(--step--1);
	color: var(--ink-faint);
}

.entry-tags span {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-right: 0.5em;
}

.entry-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.entry-share-label {
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-faint);
}

.entry-share .share {
	padding: 0.35em 0.8em;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-size: var(--step--1);
	color: var(--ink);
	text-decoration: none;
}

.entry-share .share:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.entry-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space);
	margin-top: var(--space);
	padding-top: var(--space);
	border-top: 1px solid var(--rule);
}

.entry-nav a {
	text-decoration: none;
	color: var(--ink);
}

.entry-nav-next {
	text-align: right;
}

.entry-nav-label {
	display: block;
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-faint);
}

.entry-nav-title {
	font-family: var(--font-title);
	font-weight: 700;
}

.entry-nav a:hover .entry-nav-title {
	color: var(--accent);
}

/* ==========================================================================
   9. Pagination
   ========================================================================== */

.pagination {
	margin-top: var(--space);
	padding-top: var(--space);
	border-top: 1px solid var(--rule);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: block;
	min-width: 2.4em;
	padding: 0.45em 0.7em;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	text-align: center;
	text-decoration: none;
	color: var(--ink);
	font-size: var(--step--1);
}

.pagination .page-numbers:hover {
	border-color: var(--ink);
}

.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
	font-weight: 700;
}

.pagination .dots {
	border-color: transparent;
}

/* ==========================================================================
   10. Colonne de droite
   ========================================================================== */

.site-sidebar {
	min-width: 0;
	font-size: var(--step--1);
}

.widget {
	margin-bottom: var(--space);
	padding-bottom: var(--space);
	border-bottom: 1px solid var(--rule-soft);
}

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

.widget-title {
	margin-bottom: 0.75em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid var(--gold);
	font-size: var(--step-0);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gold-ink);
}

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

.widget li {
	margin-bottom: 0.5em;
}

.widget a {
	color: var(--ink);
	text-decoration: none;
}

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

/* Widget « articles d'une rubrique ». */
.cat-posts .cat-post-item {
	display: grid;
	gap: 0.15em 0.75rem;
	padding-bottom: 0.75em;
	margin-bottom: 0.75em;
	border-bottom: 1px dotted var(--rule);
}

.cat-posts--with-thumb .cat-post-item {
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: start;
}

/* Dans une liste avec vignettes, les articles qui n'en ont pas reprennent
   toute la largeur au lieu de laisser une colonne vide devant leur titre. */
.cat-posts--with-thumb .cat-post-item:not(:has(.cat-post-thumb)) {
	grid-template-columns: minmax(0, 1fr);
}

.cat-posts .cat-post-item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.cat-post-thumb {
	grid-row: span 3;
}

.cat-post-thumb img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--paper-alt);
}

.cat-post-title {
	font-family: var(--font-title);
	font-weight: 700;
	line-height: 1.3;
}

.cat-post-date {
	color: var(--ink-faint);
	font-size: 0.85em;
}

.cat-post-excerpt {
	margin: 0;
	color: var(--ink-soft);
}

/* Repli des listes trop longues. Le <details> natif fait tout le travail :
   pas de JavaScript, l'état est géré par le navigateur et la bascule du
   libellé se fait en CSS. */
.cat-posts-fold summary {
	display: block;
	list-style: none;
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top: 1px dotted var(--rule);
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* Le triangle par défaut, dans ses deux syntaxes. */
.cat-posts-fold summary::-webkit-details-marker {
	display: none;
}

.cat-posts-fold summary::marker {
	content: "";
}

.cat-posts-fold summary:hover,
.cat-posts-fold summary:focus-visible {
	color: var(--accent-dark);
}

.cat-posts-fold summary::after {
	content: " ›";
	display: inline-block;
	text-decoration: none;
	transform: rotate(90deg);
	transform-origin: center;
}

.cat-posts-fold[open] summary::after {
	transform: rotate(-90deg);
}

.cat-posts-fold .cat-posts-less,
.cat-posts-fold[open] .cat-posts-more {
	display: none;
}

.cat-posts-fold[open] .cat-posts-less {
	display: inline;
}

/* La seconde liste reprend l'espacement de la première. */
.cat-posts-fold > .cat-posts {
	margin-top: 0.75em;
}

/* ==========================================================================
   10 bis. Sondage
   ========================================================================== */

.sondage-question {
	font-family: var(--font-title);
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 0.8em;
}

.sondage-message {
	margin: 0 0 0.8em;
	padding: 0.5em 0.7em;
	background: var(--paper-alt);
	border-left: 3px solid var(--gold);
	font-size: 0.95em;
}

.sondage-choix {
	margin: 0 0 0.9em;
	padding: 0;
	list-style: none;
}

.sondage-choix li {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin-bottom: 0.45em;
}

.sondage-choix input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--accent);
}

.sondage-choix label {
	cursor: pointer;
}

.sondage-voter {
	border: 0;
	background: var(--ink);
	color: var(--paper);
	padding: 0.5em 1.4em;
	font: inherit;
	font-weight: 600;
	border-radius: var(--radius);
	cursor: pointer;
}

.sondage-voter:hover {
	background: var(--accent);
}

.sondage-lien {
	margin: 0.7em 0 0;
}

.sondage-lien a {
	color: var(--ink-faint);
	font-size: 0.92em;
}

/* Résultats : libellé, barre proportionnelle, pourcentage. */
.sondage-resultats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sondage-resultats li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.1em 0.6em;
	margin-bottom: 0.7em;
}

.sondage-libelle {
	grid-column: 1;
}

.sondage-chiffre {
	grid-column: 2;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sondage-votes {
	color: var(--ink-faint);
}

.sondage-barre {
	grid-column: 1 / -1;
	display: block;
	height: 8px;
	background: var(--rule-soft);
	border-radius: 2px;
	overflow: hidden;
}

.sondage-part {
	display: block;
	height: 100%;
	background: var(--gold);
}

.sondage-total {
	margin: 0.4em 0 0;
	color: var(--ink-faint);
	font-size: 0.92em;
}

/* ==========================================================================
   10 ter. Calendrier des publications
   ========================================================================== */

.calendrier-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 0.5em;
}

.calendrier-mois {
	font-weight: 600;
	text-transform: capitalize;
}

.calendrier-nav a,
.calendrier-nav .is-off {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
	line-height: 1;
}

.calendrier-nav a:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.calendrier-nav .is-off {
	color: var(--rule);
	border-color: var(--rule-soft);
}

.calendrier-grille {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-variant-numeric: tabular-nums;
}

.calendrier-grille th,
.calendrier-grille td {
	border: 0;
	padding: 0;
	text-align: center;
}

.calendrier-grille th {
	padding-bottom: 0.3em;
	font-weight: 600;
	font-size: 0.85em;
	color: var(--ink-faint);
}

.calendrier-grille th abbr {
	text-decoration: none;
	border: 0;
}

.calendrier-grille td {
	height: 2.1em;
	color: var(--ink-faint);
	font-size: 0.92em;
}

.calendrier-grille td.has-posts {
	color: var(--ink);
}

.calendrier-grille td.has-posts a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: var(--radius);
	background: var(--paper-alt);
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.calendrier-grille td.has-posts a:hover,
.calendrier-grille td.has-posts a:focus {
	background: var(--accent);
	color: var(--paper);
}

.calendrier-grille td.is-today {
	outline: 1px solid var(--gold);
	outline-offset: -1px;
	border-radius: var(--radius);
}

.calendrier-total {
	margin: 0.6em 0 0;
	color: var(--ink-faint);
	font-size: 0.92em;
}

/* ==========================================================================
   11. Emplacements publicitaires
   ========================================================================== */

.ad-slot {
	margin-block: var(--space);
	text-align: center;
	/* Réserve un espace minimal pour éviter que la page ne saute
	   quand la régie insère sa bannière. */
	min-height: 90px;
}

.site-sidebar .ad-slot {
	min-height: 250px;
}

.ad-slot .kd_ads_block {
	max-width: 100%;
	margin-inline: auto;
	float: none;
}

.ad-slot img,
.ad-slot iframe {
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* ==========================================================================
   12. Commentaires
   ========================================================================== */

.comments {
	margin-top: calc(var(--space) * 1.5);
	padding-top: var(--space);
	border-top: 2px solid var(--ink);
}

.comments-title {
	font-size: var(--step-1);
}

.comment-list,
.comment-list .children {
	list-style: none;
	padding: 0;
}

.comment-list .children {
	margin-left: clamp(0.75rem, 3vw, 2rem);
	padding-left: var(--space);
	border-left: 1px solid var(--rule-soft);
}

.comment-body {
	padding-block: 1rem;
	border-bottom: 1px solid var(--rule-soft);
}

.comment-meta {
	font-size: var(--step--1);
	color: var(--ink-faint);
	margin-bottom: 0.4em;
}

.comment-author img {
	display: inline-block;
	vertical-align: middle;
	border-radius: 50%;
	margin-right: 0.5em;
}

.comment-form label {
	display: block;
	font-size: var(--step--1);
	font-weight: 600;
	margin-bottom: 0.25em;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.55em 0.7em;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font: inherit;
	background: var(--paper);
	color: inherit;
}

.comment-form .submit {
	border: 0;
	background: var(--ink);
	color: var(--paper);
	padding: 0.65em 1.4em;
	font: inherit;
	font-weight: 600;
	border-radius: var(--radius);
	cursor: pointer;
}

.comment-form .submit:hover {
	background: var(--accent);
}

/* ==========================================================================
   13. Pied de page
   ========================================================================== */

.site-footer {
	margin-top: var(--space);
	border-top: 2px solid var(--ink);
	background: var(--paper-alt);
}

.site-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem var(--space);
	padding-block: var(--space);
}

.site-copyright {
	margin: 0;
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.site-copyright a {
	color: var(--ink);
}

/* ==========================================================================
   14. Adaptations aux petits écrans
   ========================================================================== */

@media (max-width: 1000px) {
	.site-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-sidebar {
		border-top: 2px solid var(--ink);
		padding-top: var(--space);
	}
}

@media (max-width: 760px) {
	.site-header-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-header-aside {
		width: 100%;
		margin-left: 0;
	}

	.search-form {
		flex: 1 1 12rem;
	}

	.search-form input[type="search"] {
		width: 100%;
	}

	.nav-toggle {
		display: flex;
	}

	.nav-list {
		display: none;
		flex-direction: column;
		padding-bottom: 0.5rem;
		border-top: 1px solid var(--rule-soft);
	}

	.nav-list.is-open {
		display: flex;
	}

	.nav-list a,
	.nav-list > li:first-child a {
		padding: 0.7em 0;
	}

	.nav-list > li > a::after {
		display: none;
	}

	/* En pile, les sous-menus se déplient dans le flux. */
	.nav-list .sub-menu {
		position: static;
		min-width: 0;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		padding: 0 0 0 1rem;
		display: none;
	}

	.nav-list > li.is-open > .sub-menu,
	.nav-list > li:focus-within > .sub-menu {
		display: block;
	}

	.hero-inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.hero-img {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.hero-media.is-slider {
		aspect-ratio: 16 / 9;
	}

	.hero-text {
		padding-block: 1.25rem;
	}

	.entry-summary {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 1rem;
	}

	.entry-summary .entry-title {
		font-size: var(--step-1);
	}

	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}
}

@media (max-width: 460px) {
	.entry-summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.entry-thumb {
		aspect-ratio: 16 / 9;
	}
}

/* ==========================================================================
   15. Préférences système
   ========================================================================== */

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

	.site-notice-track {
		white-space: normal;
		transform: none;
	}
}

@media print {
	.site-nav,
	.site-notice,
	.hero,
	.site-sidebar,
	.ad-slot,
	.entry-share,
	.entry-nav,
	.comments,
	.pagination,
	.site-header-aside {
		display: none !important;
	}

	body {
		color: #000;
	}
}