/*
Theme Name: Québec Impôt
Theme URI: https://quebecimpot.com/
Author: quebecimpot.com
Description: Thème rapide et optimisé pour le référencement, conçu pour un site d'information fiscale au Québec : estimateur de paie en page d'accueil, table des matières automatique, fil d'Ariane, données structurées (Article, BreadcrumbList, WebSite), balises Open Graph, emplacements publicitaires sans décalage de mise en page et pages légales dans le pied de page.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 7.1
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: quebecimpot
Tags: blog, news, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* ------------------------------------------------------------------
   1. Polices et variables
   ------------------------------------------------------------------ */

@font-face {
	font-family: "Hanken Grotesk";
	src: url("assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url("assets/fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--qi-paper: #f6f8f7;
	--qi-surface: #ffffff;
	--qi-ink: #18262e;
	--qi-muted: #4e5f67;
	--qi-line: #d3dcd8;
	--qi-teal: #0b6b58;
	--qi-teal-ink: #084c3f;
	--qi-teal-wash: #e3f0ec;
	--qi-marker: #f7d154;
	--qi-marker-soft: #fcefb4;

	--qi-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--qi-measure: 44rem;
	--qi-wrap: 74rem;
	--qi-gutter: clamp(1rem, 4vw, 2rem);
	--qi-radius: 6px;
}

/* ------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1.5rem;
}

body {
	margin: 0;
	background: var(--qi-paper);
	color: var(--qi-ink);
	font-family: var(--qi-font);
	font-size: 1.125rem;
	line-height: 1.65;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--qi-teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--qi-teal-ink);
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--qi-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

h1,
h2,
h3,
h4 {
	line-height: 1.2;
	font-weight: 750;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

p {
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

mark {
	background: var(--qi-marker-soft);
	color: inherit;
	padding: 0 0.15em;
}

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

.skip-link:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	z-index: 1000;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.6rem 1rem;
	background: var(--qi-surface);
	color: var(--qi-ink);
	border: 2px solid var(--qi-teal);
}

.qi-wrap {
	width: 100%;
	max-width: var(--qi-wrap);
	margin: 0 auto;
	padding: 0 var(--qi-gutter);
}

/* ------------------------------------------------------------------
   3. En-tête
   ------------------------------------------------------------------ */

.site-header {
	background: var(--qi-surface);
	border-bottom: 1px solid var(--qi-line);
}

.site-header__bar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.25rem;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-right: auto;
	color: var(--qi-ink);
	text-decoration: none;
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.site-brand:hover {
	color: var(--qi-ink);
}

.site-brand__mark {
	flex: none;
	width: 34px;
	height: 34px;
}

.site-brand .custom-logo {
	max-height: 44px;
	width: auto;
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.1rem;
}

.site-nav a {
	color: var(--qi-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.98rem;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_item > a {
	border-bottom-color: var(--qi-teal);
}

.site-nav .sub-menu {
	display: none;
}

.site-search-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--qi-ink);
	border-radius: 50%;
}

.site-search-link:hover {
	background: var(--qi-teal-wash);
	color: var(--qi-ink);
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	color: var(--qi-ink);
	background: none;
	border: 1px solid var(--qi-line);
	border-radius: var(--qi-radius);
	padding: 0.45rem 0.8rem;
	cursor: pointer;
}

@media (max-width: 52rem) {
	.js .nav-toggle {
		display: inline-flex;
	}

	.js .site-nav {
		display: none;
		flex-basis: 100%;
		order: 5;
		padding: 0.5rem 0 1rem;
	}

	.js .site-nav.is-open {
		display: block;
	}

	.site-header__bar {
		flex-wrap: wrap;
		gap: 0.75rem;
		padding: 0.6rem 0;
	}

	.site-nav ul {
		flex-direction: column;
		gap: 0;
	}

	.site-nav a {
		display: block;
		padding: 0.7rem 0;
		border-bottom: 1px solid var(--qi-line);
	}
}

/* ------------------------------------------------------------------
   4. Accueil : estimateur « talon de paie »
   ------------------------------------------------------------------ */

.qi-hero {
	padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
	border-bottom: 1px solid var(--qi-line);
}

.qi-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.qi-hero__title {
	font-size: clamp(2.2rem, 5.2vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.04;
	margin-bottom: 1.25rem;
	max-width: 17ch;
	text-wrap: pretty;
}

.qi-hero__lead {
	color: var(--qi-muted);
	font-size: 1.2rem;
	max-width: 34rem;
	margin-bottom: 2rem;
}

.qi-field {
	display: grid;
	gap: 0.4rem;
	max-width: 24rem;
}

.qi-field label {
	font-weight: 700;
	font-size: 1rem;
}

.qi-money {
	display: flex;
	align-items: stretch;
	background: var(--qi-surface);
	border: 2px solid var(--qi-ink);
	border-radius: var(--qi-radius);
}

.qi-money:focus-within {
	outline: 3px solid var(--qi-marker);
	outline-offset: 2px;
}

.qi-money input {
	flex: 1;
	width: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1.75rem;
	font-weight: 750;
	padding: 0.5rem 0.75rem;
	color: var(--qi-ink);
	font-variant-numeric: tabular-nums;
}

.qi-money input:focus {
	outline: none;
}

.qi-money span {
	display: flex;
	align-items: center;
	padding: 0 0.9rem;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--qi-muted);
	border-left: 1px solid var(--qi-line);
}

.qi-period {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	border: 0;
}

.qi-period legend {
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 0.4rem;
	padding: 0;
}

.qi-period label {
	cursor: pointer;
}

.qi-period input {
	position: absolute;
	opacity: 0;
}

.qi-period label span {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--qi-line);
	border-radius: 999px;
	background: var(--qi-surface);
	font-size: 0.95rem;
	font-weight: 600;
}

.qi-period input:checked + span {
	background: var(--qi-ink);
	border-color: var(--qi-ink);
	color: #fff;
}

.qi-period input:focus-visible + span {
	outline: 3px solid var(--qi-teal);
	outline-offset: 2px;
}

/* Le talon : bord perforé, lignes pointillées, net surligné */
.qi-stub {
	position: relative;
	background: var(--qi-surface);
	border: 1px solid var(--qi-line);
	padding: 2.25rem clamp(1.25rem, 3vw, 2rem) 1.5rem;
	box-shadow: 0 1px 0 var(--qi-line), 0 18px 40px -28px rgba(24, 38, 46, 0.45);
	transform: rotate(0.6deg);
}

.qi-stub::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 12px;
	background: radial-gradient(circle at 8px 0, var(--qi-paper) 5px, transparent 5.5px) 0 0 / 16px 12px repeat-x;
}

.qi-stub__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.95rem;
	color: var(--qi-muted);
	padding-bottom: 0.75rem;
	margin-bottom: 0.5rem;
	border-bottom: 2px solid var(--qi-ink);
}

.qi-stub__head strong {
	color: var(--qi-ink);
}

.qi-stub dl {
	margin: 0;
}

.qi-stub__row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.4rem 0;
	font-size: 1.02rem;
}

.qi-stub__row dt {
	flex: 1;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	white-space: nowrap;
}

.qi-stub__row dt::after {
	content: "";
	flex: 1;
	min-width: 1rem;
	border-bottom: 2px dotted var(--qi-line);
}

.qi-stub__row dd {
	margin: 0;
	white-space: nowrap;
	font-weight: 600;
}

.qi-stub__row--minus dd::before {
	content: "− ";
	color: var(--qi-muted);
}

.qi-stub__net {
	margin-top: 0.75rem;
	padding-top: 0.9rem;
	border-top: 2px solid var(--qi-ink);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
}

.qi-stub__net span {
	font-weight: 700;
}

.qi-stub__net output {
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	background: linear-gradient(transparent 55%, var(--qi-marker) 55%, var(--qi-marker) 92%, transparent 92%);
	padding: 0 0.1em;
}

.qi-stub__foot {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	color: var(--qi-muted);
}

.qi-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding: 0.7rem 1.2rem;
	background: var(--qi-teal);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border-radius: var(--qi-radius);
}

.qi-button:hover {
	background: var(--qi-teal-ink);
	color: #fff;
	text-decoration: none;
}

@media (max-width: 52rem) {
	.qi-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.qi-hero__title {
		max-width: none;
	}

	.qi-stub {
		transform: none;
	}
}

/* ------------------------------------------------------------------
   5. Sujets et listes d'articles
   ------------------------------------------------------------------ */

.qi-section {
	padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.qi-section + .qi-section {
	border-top: 1px solid var(--qi-line);
}

.qi-section__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 1.5rem;
}

.qi-topics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 0 3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qi-topic {
	padding: 1.25rem 0 1.5rem;
	border-top: 2px solid var(--qi-ink);
}

.qi-topic h3 {
	font-size: 1.25rem;
	margin-bottom: 0.3rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

.qi-topic h3 a {
	color: var(--qi-ink);
	text-decoration: none;
}

.qi-topic h3 a:hover {
	color: var(--qi-teal);
}

.qi-topic__count {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--qi-muted);
	white-space: nowrap;
}

.qi-topic p {
	color: var(--qi-muted);
	font-size: 1rem;
	margin-bottom: 0.6rem;
}

.qi-topic ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1rem;
}

.qi-topic li {
	padding: 0.3rem 0;
}

.qi-posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qi-post {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--qi-line);
}

.qi-post:first-child {
	padding-top: 0;
}

.qi-post__cat {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--qi-teal);
	text-decoration: none;
}

.qi-post__title {
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	margin: 0.2rem 0 0.4rem;
}

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

.qi-post__title a:hover {
	color: var(--qi-teal);
	text-decoration: underline;
}

.qi-post__excerpt {
	color: var(--qi-muted);
	font-size: 1rem;
	margin-bottom: 0.4rem;
}

.qi-post__date {
	font-size: 0.9rem;
	color: var(--qi-muted);
}

.qi-post__thumb img {
	display: block;
	width: 168px;
	height: 112px;
	object-fit: cover;
	border-radius: var(--qi-radius);
}

@media (max-width: 36rem) {
	.qi-post__thumb img {
		width: 96px;
		height: 72px;
	}
}

.qi-more {
	margin-top: 1.5rem;
	font-weight: 700;
}

/* ------------------------------------------------------------------
   6. Mise en page des articles
   ------------------------------------------------------------------ */

.qi-main {
	padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem);
}

.qi-layout {
	display: grid;
	grid-template-columns: minmax(0, var(--qi-measure)) minmax(0, 18.5rem);
	justify-content: space-between;
	gap: 3.5rem;
}

.qi-layout--single {
	grid-template-columns: minmax(0, var(--qi-measure));
	justify-content: center;
}

@media (max-width: 64rem) {
	.qi-layout {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}

	.qi-sidebar {
		display: none;
	}

	.qi-sidebar--list {
		display: block;
	}
}

.qi-crumbs ol {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	font-size: 0.92rem;
	color: var(--qi-muted);
}

.qi-crumbs li + li::before {
	content: "›";
	margin-right: 0.5rem;
	color: var(--qi-line);
	font-weight: 700;
}

.qi-crumbs a {
	color: var(--qi-muted);
}

.entry-header h1,
.archive-header h1 {
	font-size: clamp(2rem, 4.6vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin-bottom: 0.9rem;
}

.archive-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 2px solid var(--qi-ink);
}

.archive-header__desc {
	color: var(--qi-muted);
	max-width: var(--qi-measure);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	font-size: 0.95rem;
	color: var(--qi-muted);
	padding-bottom: 1.25rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--qi-line);
}

.entry-meta strong {
	color: var(--qi-ink);
	font-weight: 700;
}

.entry-thumb {
	margin: 0 0 2rem;
}

.entry-thumb img {
	display: block;
	width: 100%;
	border-radius: var(--qi-radius);
}

/* Table des matières */
.qi-toc {
	font-size: 0.98rem;
}

.qi-toc__title {
	font-size: 1rem;
	font-weight: 800;
	margin: 0 0 0.6rem;
}

.qi-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.qi-toc li {
	border-left: 2px solid var(--qi-line);
}

.qi-toc a {
	display: block;
	padding: 0.35rem 0 0.35rem 0.9rem;
	color: var(--qi-ink);
	text-decoration: none;
	line-height: 1.35;
}

.qi-toc a:hover,
.qi-toc a[aria-current="true"] {
	color: var(--qi-teal);
}

.qi-toc li:has(a[aria-current="true"]) {
	border-left-color: var(--qi-teal);
}

.qi-toc--mobile {
	display: none;
	margin: 0 0 2rem;
	background: var(--qi-surface);
	border: 1px solid var(--qi-line);
	border-radius: var(--qi-radius);
}

.qi-toc--mobile summary {
	cursor: pointer;
	padding: 0.85rem 1rem;
	font-weight: 800;
}

.qi-toc--mobile ol {
	padding: 0 1rem 1rem;
}

@media (max-width: 64rem) {
	.qi-toc--mobile {
		display: block;
	}
}

.qi-sidebar__inner {
	position: sticky;
	top: 1.5rem;
	display: grid;
	gap: 2rem;
}

.qi-sidebar .widget {
	font-size: 0.98rem;
}

.qi-sidebar .widget-title,
.qi-sidebar .wp-block-heading {
	font-size: 1rem;
	font-weight: 800;
}

/* ------------------------------------------------------------------
   7. Contenu des articles
   ------------------------------------------------------------------ */

.entry-content > * {
	margin-top: 0;
	margin-bottom: 1.15em;
}

.entry-content h2 {
	font-size: clamp(1.45rem, 3vw, 1.8rem);
	margin: 2em 0 0.7em;
	padding-top: 0.9rem;
	border-top: 3px solid var(--qi-ink);
	scroll-margin-top: 1.5rem;
}

.entry-content h3 {
	font-size: 1.25rem;
	margin: 1.8em 0 0.5em;
}

.entry-content h4 {
	font-size: 1.1rem;
	margin: 1.5em 0 0.4em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content li {
	margin-bottom: 0.4em;
}

.entry-content li::marker {
	color: var(--qi-teal);
}

.entry-content strong {
	font-weight: 750;
}

.entry-content blockquote {
	margin: 1.5em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 4px solid var(--qi-marker);
	color: var(--qi-ink);
}

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--qi-line);
	margin: 2.5em 0;
}

.entry-content code {
	font-size: 0.92em;
	background: var(--qi-teal-wash);
	padding: 0.1em 0.3em;
	border-radius: 3px;
}

.entry-content img {
	border-radius: var(--qi-radius);
}

.entry-content figcaption,
.wp-element-caption {
	font-size: 0.9rem;
	color: var(--qi-muted);
	margin-top: 0.5rem;
}

/* Tableaux : défilement horizontal sur mobile, chiffres alignés */
.qi-table,
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 1.5em;
}

.qi-table .qi-table,
.wp-block-table .qi-table {
	margin: 0;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.98rem;
	background: var(--qi-surface);
	border: 1px solid var(--qi-line);
}

.entry-content th,
.entry-content td {
	text-align: left;
	vertical-align: top;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--qi-line);
}

.entry-content thead th,
.entry-content tr:first-child th {
	background: var(--qi-ink);
	color: #fff;
	font-weight: 700;
	border-color: var(--qi-ink);
}

.entry-content .wp-block-table thead {
	border-bottom: 0;
}

.entry-content table.has-fixed-layout {
	table-layout: auto;
}

/* Formulaires (calculateurs) */
.entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.entry-content select,
.entry-content textarea,
.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form textarea,
.search-form input[type="search"] {
	font: inherit;
	font-size: 1rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid #9aaaa3;
	border-radius: var(--qi-radius);
	background: var(--qi-surface);
	color: var(--qi-ink);
	max-width: 100%;
}

.entry-content button,
.entry-content input[type="submit"],
.entry-content input[type="button"],
.comment-form input[type="submit"],
.search-form button {
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: var(--qi-radius);
	background: var(--qi-teal);
	color: #fff;
	cursor: pointer;
}

.entry-content button:hover,
.comment-form input[type="submit"]:hover,
.search-form button:hover {
	background: var(--qi-teal-ink);
}

/* Blocs WordPress courants */
.alignwide {
	margin-left: auto;
	margin-right: auto;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.has-small-font-size {
	font-size: 0.95rem;
}

.wp-block-button__link {
	background: var(--qi-teal);
	color: #fff;
	border-radius: var(--qi-radius);
	font-weight: 700;
	text-decoration: none;
}

/* ------------------------------------------------------------------
   8. Publicité (espace réservé = pas de décalage de mise en page)
   ------------------------------------------------------------------ */

.qi-ad {
	margin: 2rem 0;
	text-align: center;
	min-height: 290px;
}

.qi-ad--sidebar {
	min-height: 620px;
	margin: 0;
}

.qi-ad__label {
	display: block;
	font-size: 0.78rem;
	color: var(--qi-muted);
	margin-bottom: 0.35rem;
}

.qi-ad .widget {
	margin: 0;
}

/* ------------------------------------------------------------------
   9. Fin d'article : auteur, articles liés, commentaires
   ------------------------------------------------------------------ */

.qi-author {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	margin: 3rem 0 0;
	padding: 1.5rem;
	background: var(--qi-surface);
	border: 1px solid var(--qi-line);
	border-left: 4px solid var(--qi-teal);
	font-size: 1rem;
}

.qi-author img {
	border-radius: 50%;
}

.qi-author__name {
	font-weight: 800;
	margin: 0 0 0.25rem;
}

.qi-author p:last-child {
	margin-bottom: 0;
}

.qi-related {
	margin-top: 3rem;
}

.qi-related h2 {
	font-size: 1.4rem;
}

.qi-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--qi-ink);
}

.qi-related li {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--qi-line);
}

.qi-related a {
	font-weight: 700;
	color: var(--qi-ink);
	text-decoration: none;
}

.qi-related a:hover {
	color: var(--qi-teal);
	text-decoration: underline;
}

.qi-related span {
	display: block;
	font-size: 0.9rem;
	color: var(--qi-muted);
}

.comments-area {
	margin-top: 3rem;
	font-size: 1rem;
}

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

.comment-list .children {
	list-style: none;
	padding-left: 1.5rem;
}

.comment-body {
	padding: 1rem 0;
	border-bottom: 1px solid var(--qi-line);
}

.comment-meta {
	font-size: 0.9rem;
	color: var(--qi-muted);
}

.comment-author .avatar {
	float: left;
	margin-right: 0.75rem;
	border-radius: 50%;
}

.comment-form label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 100%;
}

/* Pagination */
.pagination .nav-links,
.posts-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.page-numbers {
	display: inline-block;
	min-width: 2.5rem;
	padding: 0.4rem 0.75rem;
	text-align: center;
	border: 1px solid var(--qi-line);
	border-radius: var(--qi-radius);
	background: var(--qi-surface);
	color: var(--qi-ink);
	text-decoration: none;
	font-weight: 600;
}

.page-numbers.current {
	background: var(--qi-ink);
	border-color: var(--qi-ink);
	color: #fff;
}

/* Recherche */
.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 32rem;
}

.search-form label {
	flex: 1;
}

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

/* ------------------------------------------------------------------
   10. Pied de page
   ------------------------------------------------------------------ */

.site-footer {
	background: var(--qi-ink);
	color: #d9e2de;
	font-size: 0.98rem;
	padding: clamp(2.5rem, 6vw, 3.5rem) 0 1.5rem;
}

.site-footer a {
	color: #fff;
}

.site-footer a:hover {
	color: var(--qi-marker);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: 2rem 3rem;
}

.site-footer h2 {
	font-size: 1rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 0.75rem;
}

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

.site-footer li {
	padding: 0.25rem 0;
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 800;
	font-size: 1.15rem;
	color: #fff;
	margin-bottom: 0.75rem;
}

.site-footer__disclaimer {
	color: #b9c7c1;
	max-width: 30rem;
}

.site-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.9rem;
	color: #b9c7c1;
}

@media (max-width: 52rem) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* 404 */
.qi-404 {
	max-width: var(--qi-measure);
}

/* ------------------------------------------------------------------
   11. Préférences
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.qi-sidebar,
	.qi-ad,
	.qi-toc--mobile,
	.qi-related,
	.comments-area {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 12pt;
	}
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin-top: 2rem !important;
	font-size: 0.92rem;
}

@media (max-width: 30rem) {
	.site-brand {
		font-size: 1rem;
		gap: 0.45rem;
	}

	.site-brand__mark {
		width: 28px;
		height: 28px;
	}

	.nav-toggle {
		padding: 0.4rem 0.6rem;
	}

	.site-header__bar {
		gap: 0.4rem;
	}
}