/* =========================================================================
   BLOG
   =========================================================================

   Feuille de zone du theme enfant Kinthia, sortie de style.css le 18/09/2026.
   Article (layout Woodmart « Article », D-72), archives de categorie, boutons
   de partage, et les deux outils portes de l'ancien blog : pendule et
   compatibilite amoureuse.

   Elle se charge APRES `woodmart-style`, comme style.css : la specificite des
   surcharges en depend (LESSONS WD-20). Les feuilles d'elements de Woodmart
   arrivent plus tard encore, dans le corps de la page (WD-06).
   ====================================================================== */

/* =========================================================================
   Social SHARE buttons converted to <span> — re-apply Woodmart's icon styling
   -------------------------------------------------------------------------
   kin_social_to_buttons() (functions.php) turns Woodmart's share <a> into
   <span role="button" data-kin-share> so no crawlable share link / URL leaks
   into the DOM (blog cards + single-post footer share). But Woodmart scopes
   EVERY social-icon rule to the child selector `.wd-social-icons > a`
   (css/parts/el-social-icons.css + el-social-styles.css): the box, colours,
   background and hover all live on `> a`. A <span> no longer matches, so the
   converted buttons lost their brand background (the glyph stayed
   `--wd-social-color: #FFF` → all-white, invisible on light) and their pointer
   (native to <a>). Mirror the `> a` rules onto `> [data-kin-share]`, reusing
   Woodmart's own custom properties so size/shape/brand colours still cascade
   from the container classes (wd-size-*, wd-shape-*, .social-<network>). Only
   the two styles in use are mirrored: `colored` (single-post footer) and
   `default` (blog cards). Add colored-alt/bordered here if a share block ever
   switches to them. No !important — Woodmart's `> a` rules never match a span,
   so there is nothing to override, only to supply. */
.wd-social-icons > [data-kin-share] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wd-social-size, 40px);
	height: var(--wd-social-size, 40px);
	font-size: var(--wd-social-icon-size, calc(var(--wd-social-size, 40px) / 2.5));
	color: var(--wd-social-color);
	background-color: var(--wd-social-bg, unset);
	box-shadow: var(--wd-social-shadow);
	border: var(--wd-social-brd) var(--wd-social-brd-color);
	border-radius: var(--wd-social-radius);
	line-height: 1;
	cursor: pointer; /* <a href> had it natively; <span> does not. */
}

.wd-social-icons > [data-kin-share]:hover {
	color: var(--wd-social-color-hover, var(--wd-social-color));
	background-color: var(--wd-social-bg-hover, var(--wd-social-bg));
	border-color: var(--wd-social-brd-color-hover, var(--wd-social-brd-color));
	box-shadow: var(--wd-social-shadow-hover);
}

/* `wd-style-default` (blog cards): auto-sized, padded pills — Woodmart puts
   these on `.wd-social-icons.wd-style-default > a`. */
.wd-social-icons.wd-style-default > [data-kin-share] {
	width: auto;
	height: auto;
	padding: var(--wd-social-gap, calc(var(--wd-social-size, 40px) / 6));
	min-width: 24px;
}

/* `wd-style-colored` (single-post footer): brand colour as the background. */
.wd-social-icons.wd-style-colored > [data-kin-share] {
	--wd-social-bg: var(--wd-social-brand-color);
}

/* ---- Breadcrumb of the blog (article + archives) ----
   Rank Math markup (kin_render_breadcrumbs): <nav class="kin-breadcrumb"> with
   plain <a> links and <span class="separator">. Styled neutral — the hero used
   to give it light-on-dark colours it no longer needs inline. The article
   restyles it below (`.kin-article-hero`). */
.kin-breadcrumb {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	color: var(--color-gray-500, #767676);
}

.kin-breadcrumb p {
	margin: 0;
}

.kin-breadcrumb a {
	color: var(--color-gray-500, #767676);
}

.kin-breadcrumb a:hover,
.kin-breadcrumb a:focus-visible {
	color: var(--color-gray-800, #333);
}

.kin-breadcrumb .separator {
	margin: 0 0.4em;
}

/* The current page (last crumb) — slightly stronger, not a link. */
.kin-breadcrumb .last {
	color: var(--color-gray-800, #333);
}

/* =========================================================================
   ARTICLE — maquette « Signature » (refonte-kinthia.com/article-signature.php)
   -------------------------------------------------------------------------
   Layout Woodmart « Article » (#9614, D-72), en blocs natifs ; les pièces
   sans bloc natif sont des codes courts (inc/article.php). Composition :

       titre et informations  |  photographie        .kin-article-hero
       rail : sommaire, écoute | extrait + contenu   .kin-article__layout
       échanges : note et commentaires               .kin-article-echanges
       articles liés                                 .kin-article-suite
       la boutique                                   .kin-article-boutique

   Mobile d'abord, aux paliers de la maquette : 480, 800 et 1100 px (ses
   `max-width`), soit ici des `min-width` à 481, 801 et 1101 px. Sous 801 px,
   une seule colonne : le rail passe au-dessus du texte.

   Le fond ivoire de la page vient du réglage natif « fond des articles »
   (Theme Settings, `blog-post-background`), comme celui des archives produit.
   ========================================================================= */

.single-post {
	--kin-art-ink: #382b3e;
	--kin-art-purple: #64466e;
	--kin-art-line: #dfd9d0;
	--kin-art-lilac: #eee9f0;
	--kin-art-sage: #e9eee5;
	--kin-art-paper: #faf8f3;
	/* Le focus de Woodmart (pointillés, en !important) se règle par ses
	   variables : trait plein prune, décalé, comme la maquette (WD-20). */
	--wd-otl-style: solid;
	--wd-otl-color: var(--kin-art-purple);
	--wd-otl-offset: 4px;
}

/* La colonne de la page : 1440 px au plus, marges de la maquette.
   `flow-root` : la marge d'un premier bloc ne fuit pas au-dessus (WD-57). */
.single-post .wd-content-layout.container {
	display: flow-root;
	max-width: 1440px;
	padding: 0 18px 35px;
}

/* ---- Bandeau : titre et informations, photographie ---- */

/* Woodmart écarte chaque enfant d'un bloc de contenu de 20 px, à une classe
   (WD-47) : les marges des sections de l'article sont donc posées à deux. */
.kin-article-hero.kin-article-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	margin: 0;
}

.kin-article-hero__copy.kin-article-hero__copy {
	align-self: start;
	min-width: 0;
	margin: 0;
}

/* Le fil d'Ariane, au-dessus du bandeau ([kin_fil_ariane]). Maquette #78717a :
   4,45:1 sur l'ivoire, sous le seuil AA, foncé d'un cran. */
.single-post .kin-breadcrumb.kin-breadcrumb {
	margin: 0 0 21px;
	padding-top: 16px;
	font-size: 10px;
	line-height: 1.7;
	color: #6f6872;
}

.single-post .kin-breadcrumb a,
.single-post .kin-breadcrumb .last {
	color: #6f6872;
}

.single-post .kin-breadcrumb .separator {
	margin: 0 0.5em;
}

/* Sur téléphone, le fil s'arrête à la rubrique : le titre suit juste dessous. */
.single-post .kin-breadcrumb .last,
.single-post .kin-breadcrumb .separator:nth-last-child(2) {
	display: none;
}

/* Le titre : bloc natif « Post title » (h1). */
.kin-article__title.kin-article__title {
	margin: 0 0 18px;
}

/* Droit : le réglage « titres des articles » de Woodmart est en italique. */
.kin-article__title .wd-post-title {
	max-width: 600px;
	margin: 0;
	font-family: "Lora", serif;
	font-size: clamp(1.6rem, 4.5vw, 2.125rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.038em;
	color: var(--kin-art-ink);
	text-wrap: balance;
}

/* L'autrice, puis la note ([kin_article_signature]). */
.kin-article-author-rating.kin-article-author-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
}

.kin-article-author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

/* Taille fixée : un avatar mis en cache à une autre taille ne change pas la
   hauteur de la ligne (CLS). */
.kin-article-author__avatar {
	display: block;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.kin-article-author__name {
	min-width: 0;
	font-size: 12px;
	color: #49394f;
}

/* Le nom mène à la page de l'autrice (D-159) : souligné, la couleur seule ne
   suffit pas à distinguer un lien. */
.kin-article-author__lien.kin-article-author__lien {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #b9a9bf;
	text-underline-offset: 3px;
}

.kin-article-author__lien.kin-article-author__lien:hover {
	text-decoration-color: currentColor;
}

/* La note (extension kin-rating) : moyenne sur 5, étoiles, votes. */
.kin-article-hero .kin-rating-display__summary {
	gap: 10px;
	min-height: 56px;
	padding: 8px 10px;
	background-color: var(--kin-art-lilac);
	color: var(--kin-art-purple);
}

.kin-article-hero .kin-rating-display__score {
	padding-right: 10px;
	border-right: 1px solid #d5c9da;
}

.kin-article-hero .kin-rating-display__score strong {
	font-family: "Lora", serif;
	font-size: 23px;
	font-weight: 400;
	line-height: normal;
	color: #5d4167;
}

.kin-article-hero .kin-rating-display__score > span {
	font-size: 11px;
	color: #6f6177;
}

.kin-article-hero .kin-rating-stars {
	font-size: 12px;
	line-height: 1.2;
	color: #b3a4b8;
}

.kin-article-hero .kin-rating-stars__fg {
	color: #785c80;
}

.kin-article-hero :is(.kin-rating-display__count, .kin-rating-display__empty) {
	font-size: 10px;
	line-height: 1.2;
	color: #6c5a75;
}

.kin-article-hero .kin-rating-display__empty {
	font-size: 11px;
	line-height: 1.6;
}

/* Date, temps de lecture, commentaires ([kin_article_infos]). */
.kin-article-infos.kin-article-infos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 14px 0 0;
	padding-top: 15px;
	border-top: 1px solid var(--kin-art-line);
}

.kin-article-infos__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	line-height: 1.6;
	color: #6c6370;
}

.kin-article-infos__item:first-child {
	flex-basis: 100%;
}

.kin-article-infos__icone {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: #8a7690;
}

a.kin-article-infos__item:hover {
	color: var(--kin-art-purple);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* La photographie : bloc natif « Post image ». Angles droits : l'arrondi de
   Woodmart passe par sa variable (`.wd-post-image img`, chargée après nous). */
.kin-article__featured.kin-article__featured {
	--wd-brd-radius: 0;
	margin: 0;
}

/* `block` : Woodmart l'imprime en `inline-block`, posé sur la ligne de base,
   ce qui laissait 7 px de jambage sous la photo. */
.kin-article__featured .wd-post-image {
	display: block;
	height: 100%;
	border-radius: 0;
}

.kin-article__featured img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 400px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* ---- Lecture : le rail, puis l'extrait et le contenu ---- */

.kin-article__layout.kin-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	margin: 32px 0 0;
}

.kin-article__rail.kin-article__rail {
	min-width: 0;
	margin: 0;
}

/* Le sommaire ([kin_article_rail]) : un <details> natif. */
.kin-article-sommaire.kin-article-sommaire {
	margin: 0;
	border-top: 1px solid #b7a8bb;
	border-bottom: 1px solid var(--kin-art-line);
}

.kin-article-sommaire__titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 17px 0;
	font-family: "Lora", serif;
	font-size: 21px;
	font-weight: 400;
	line-height: normal;
	color: var(--kin-art-ink);
	list-style: none;
	cursor: pointer;
}

.kin-article-sommaire__titre::-webkit-details-marker {
	display: none;
}

.kin-article-sommaire__chevron {
	flex: none;
	transition: transform 0.2s ease;
}

.kin-article-sommaire[open] .kin-article-sommaire__chevron {
	transform: rotate(180deg);
}

.kin-article-sommaire nav {
	padding-bottom: 18px;
}

.kin-article-sommaire__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kin-article-sommaire__liste li {
	margin: 0;
}

.kin-article-sommaire__liste a {
	display: block;
	padding: 10px 0 10px 17px;
	border-left: 2px solid #dfd9e0;
	font-size: 12px;
	line-height: 1.65;
	color: #6f6472;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.kin-article-sommaire__liste a:hover,
.kin-article-sommaire__liste a[aria-current] {
	border-left-color: var(--kin-art-purple);
	color: #593d63;
}

/* La progression : masquée sur téléphone (maquette), montrée par kin.js. */
.kin-article-progression {
	display: none;
}

/* L'écoute : seulement si le navigateur sait lire à voix haute (classe
   `kin-tts`, posée dans le <head> avant le premier rendu : rien ne surgit). */
.kin-article-ecoute.kin-article-ecoute {
	display: none;
	margin: 16px 0 0;
	padding: 15px 18px;
	background-color: var(--kin-art-lilac);
}

.kin-tts .kin-article-ecoute.kin-article-ecoute {
	display: block;
}

.kin-article-ecoute__titre.kin-article-ecoute__titre {
	margin: 0 0 13px;
	font-family: "Lora", serif;
	font-size: 16px;
	line-height: normal;
	color: var(--kin-art-ink);
}

/* Le lecteur : deux rangées, lecture et barre, puis les commandes. */
.kin-article-ecoute .kin-audio {
	display: grid;
	grid-template-columns: 36px repeat(5, minmax(0, 1fr));
	align-items: center;
	gap: 10px 4px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.kin-audio__play,
.kin-audio__skip,
.kin-audio__volume {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.kin-article-ecoute .kin-audio__play {
	grid-column: 1;
	grid-row: 1;
	width: 32px;
	height: 32px;
	min-width: 0;
	min-height: 0;
	padding: 6px;
	border: 0;
	border-radius: 50%;
	background-color: var(--kin-art-purple);
	color: #fff;
}

.kin-article-ecoute .kin-audio__play:hover {
	background-color: #513858;
}

/* Icon swap driven by the player state set in kin.js. */
.kin-audio__icon-pause,
.kin-audio[data-state="playing"] .kin-audio__icon-play {
	display: none;
}

.kin-audio[data-state="playing"] .kin-audio__icon-pause {
	display: block;
}

.kin-audio__icon-vol-off,
.kin-audio__volume[aria-pressed="true"] .kin-audio__icon-vol-on {
	display: none;
}

.kin-audio__volume[aria-pressed="true"] .kin-audio__icon-vol-off {
	display: block;
}

.kin-article-ecoute .kin-audio__progress {
	grid-column: 2 / 7;
	grid-row: 1;
	width: auto;
	min-width: 0;
	height: 6px;
	margin-left: 7px;
	border-radius: 3px;
	background-color: #d7cbdc;
	cursor: pointer;
}

.kin-audio__bar {
	width: 0;
	height: 100%;
	border-radius: inherit;
	background-color: var(--kin-art-purple);
}

.kin-article-ecoute .kin-audio__time {
	min-width: 0;
	font-size: 9px;
	font-variant-numeric: tabular-nums; /* digits stop jittering as time ticks */
	white-space: nowrap;
	color: #5f5163;
}

.kin-article-ecoute [data-kin-audio-current] {
	grid-column: 1;
	grid-row: 2;
}

.kin-article-ecoute [data-kin-audio-skip="-1"] {
	grid-column: 2;
	grid-row: 2;
}

.kin-article-ecoute [data-kin-audio-skip="1"] {
	grid-column: 3;
	grid-row: 2;
}

.kin-article-ecoute .kin-audio__speed-wrap {
	grid-column: 4;
	grid-row: 2;
	margin: 0;
}

.kin-article-ecoute .kin-audio__speed {
	width: 39px;
	min-width: 0;
	height: 29px;
	min-height: 0;
	padding: 0 9px 0 1px;
	border: 0;
	background-color: transparent;
	background-position: right 0 center;
	background-size: 8px;
	font-size: 10px;
	color: var(--kin-art-purple);
}

.kin-article-ecoute .kin-audio__volume {
	grid-column: 5;
	grid-row: 2;
}

.kin-article-ecoute [data-kin-audio-duration] {
	grid-column: 6;
	grid-row: 2;
	text-align: right;
}

.kin-article-ecoute :is(.kin-audio__skip, .kin-audio__volume) {
	width: 27px;
	height: 29px;
	min-width: 0;
	min-height: 0;
	padding: 3px;
	color: var(--kin-art-purple);
}

/* Le partage : bloc natif « Social buttons », converti en boutons sans lien
   (kin_share_block_without_links()). Carrés, au trait, prune. */
.kin-article__partage.kin-article__partage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding-top: 17px;
}

/* Page d'outil sans aides de lecture (D-156) : le partage ouvre le rail, rien à
   séparer au-dessus, à aucune largeur (la spécificité l'emporte sur le palier 801). */
.kin-article__rail > .kin-article__partage.kin-article__partage:first-child {
	padding-top: 0;
	border-top: 0;
}

.kin-article__partage-titre.kin-article__partage-titre {
	margin: 0;
	font-size: 10px;
	color: #6c6070;
}

/* Trois classes : Woodmart pose taille et couleurs sur `.wd-social-icons.wd-size-*`
   et `.wd-style-bordered`, dans une feuille chargée après la nôtre (WD-20). */
.kin-article__partage .kin-article__partage-boutons.wd-social-icons {
	--wd-social-size: 32px;
	--wd-social-gap: 5px;
	--wd-social-color: var(--kin-art-purple);
	--wd-social-color-hover: var(--kin-art-purple);
	--wd-social-bg: transparent;
	--wd-social-bg-hover: var(--kin-art-lilac);
	--wd-social-brd: 1px solid;
	--wd-social-brd-color: #d8cedb;
	--wd-social-brd-color-hover: #b7a5be;
	--wd-social-radius: 0;
	flex-wrap: nowrap;
	margin: 0;
}

/* L'introduction (bloc natif « Extrait », D-73), puis le texte. */
.kin-article__lecture.kin-article__lecture {
	min-width: 0;
	max-width: 700px;
	margin: 0 auto;
}

.kin-article__chapo.kin-article__chapo {
	margin: 0 0 24px;
}

.kin-article__chapo p {
	margin: 0 0 24px;
	font-family: "Lora", serif;
	font-size: 19px;
	line-height: 1.7;
	color: #574360;
}

.kin-article__chapo p:last-child {
	margin-bottom: 0;
}

.kin-article__content.kin-article__content {
	margin: 0;
	overflow-wrap: break-word;
	font-size: 15px;
	line-height: 1.9;
	color: #514954;
}

.kin-article__content.kin-article__content > p {
	margin: 0 0 24px;
}

.kin-article__content.kin-article__content h2 {
	margin: 38px 0 24px;
	font-family: "Lora", serif;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.025em;
	color: #423048;
	scroll-margin-top: 112px; /* sous l'en-tête collant (81 px) */
}

/* Les intertitres de niveau 3 (202 dans 18 articles), que la maquette ne
   montre pas : même graisse que les h2, à la demande du client. Sans cette
   règle, ils prenaient celle du réglage Woodmart des titres (600). */
.kin-article__content.kin-article__content h3 {
	font-weight: 400;
}

/* Body links underlined — readability + WCAG (colour is not the only cue). */
.kin-article__content a {
	color: #674770;
	text-decoration: underline;
	text-decoration-color: #b8a5be;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.kin-article__content a:hover,
.kin-article__content a:focus-visible {
	text-decoration-thickness: 2px;
}

.kin-article__content li {
	margin-bottom: 10px;
	padding-left: 4px;
}

.kin-article__content li::marker {
	color: #8c7195;
}

/* La liste de l'introduction (avant le premier intertitre) : un encadré sauge.
   La maquette visait la première liste ; seule celle de l'introduction joue ce
   rôle de résumé (1 article sur 17 qui ont des listes). */
.kin-article__content > ul:first-of-type:not(h2 ~ ul) {
	margin: 30px 0;
	padding: 21px 23px;
	border-left: 2px solid #a8b49f;
	background-color: var(--kin-art-sage);
}

.kin-article__content > ul:first-of-type:not(h2 ~ ul) > li {
	margin: 0;
	padding: 0;
}

.kin-article__content > ul:first-of-type:not(h2 ~ ul) ul {
	margin: 0;
	padding-left: 19px;
}

/* ---- La grille des 24 heures miroirs (bloc HTML partagé, D-154) ----
   Quatre colonnes, six dès 481 px, huit dès 801 px : des rangées toujours
   pleines. Chaque heure est une cible de 44 px. L'heure lue porte
   `aria-current` (inc/article.php) et se lit en plein. */

.kin-hm-grille.kin-hm-grille {
	margin: 45px 0 0;
	padding: 30px 0 0;
	border-top: 1px solid var(--kin-art-line);
}

.kin-hm-grille .kin-hm-grille__titre.kin-hm-grille__titre {
	margin-top: 0;
}

.kin-hm-grille__liste.kin-hm-grille__liste {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kin-hm-grille__liste.kin-hm-grille__liste > li {
	margin: 0;
	padding: 0;
}

.kin-hm-grille__liste.kin-hm-grille__liste a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid #d6cbdc;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: var(--kin-art-purple);
	text-decoration: none;
}

.kin-hm-grille__liste.kin-hm-grille__liste a:hover {
	background-color: var(--kin-art-lilac);
}

.kin-hm-grille__liste.kin-hm-grille__liste a[aria-current="page"] {
	border-color: var(--kin-art-purple);
	background-color: var(--kin-art-purple);
	color: #fff;
}

@media (min-width: 481px) {
	.kin-hm-grille__liste.kin-hm-grille__liste {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (min-width: 801px) {
	.kin-hm-grille__liste.kin-hm-grille__liste {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

/* ---- Échanges : l'invitation, la note, les commentaires ---- */

.kin-article-echanges.kin-article-echanges {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 27px;
	margin: 45px 0 0;
	padding: 27px 23px;
	background-color: var(--kin-art-lilac);
}

.kin-article-echanges > .wp-block-group.wp-block-group {
	margin: 0;
}

.kin-article-echanges__titre.kin-article-echanges__titre {
	margin: 0 0 22px;
	font-family: "Lora", serif;
	font-size: 29px;
	font-weight: 400;
	line-height: 1.25;
	color: #46334e;
}

.kin-article-echanges__titre br {
	display: none;
}

.kin-article-echanges__intro p {
	max-width: 540px;
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: #6a5870;
}

.kin-article-echanges__formulaires {
	min-width: 0;
}

.kin-article-echanges .kin-rating-form {
	margin: 0 0 23px;
	padding: 0 0 23px;
	border: 0;
	border-bottom: 1px solid #d6cbdc;
	border-radius: 0;
	background: none;
}

.kin-article-echanges .kin-rating-form__title {
	margin: 0 0 10px;
	font-family: "Lora", serif;
	font-size: 21px;
	font-weight: 400;
	line-height: normal;
	color: #46334e;
}

.kin-article-echanges .kin-rating-form__description {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.7;
	color: #74657a;
}

.kin-article-echanges .kin-rating-form__row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px 20px;
}

.kin-article-echanges .kin-rating-form__star {
	width: 40px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 26px;
	color: #907d96; /* maquette #b8a9be : 1,86:1, un contrôle en demande 3 */
}

.kin-article-echanges .kin-rating-form__star.is-active,
.kin-article-echanges .kin-rating-form__star:hover:not([disabled]) {
	color: var(--kin-art-purple);
	transform: none;
}

/* Les trois boutons de la section : « Voter », « Écrire un commentaire »,
   « Laisser un commentaire ». Au trait ; plein quand il est actif. */
.kin-article-echanges :is(.kin-rating-form__submit, .kin-comments-reveal, .comment-form .submit) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 44px; /* WCAG 2.2 target size */
	padding: 12px 21px;
	border: 1px solid #b7a5be;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: "Work Sans", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;
	color: var(--kin-art-purple);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kin-article-echanges :is(.kin-rating-form__submit:not(:disabled), .comment-form .submit) {
	border-color: var(--kin-art-purple);
	background-color: var(--kin-art-purple);
	color: #fff;
}

.kin-article-echanges :is(.kin-rating-form__submit:not(:disabled), .comment-form .submit):hover {
	border-color: #513858;
	background-color: #513858;
}

.kin-article-echanges .kin-comments-reveal:hover {
	background-color: #e4dce8;
}

/* Disabled "Voter" (no star picked yet): `pointer` while clickable,
   `not-allowed` while it is not. The theme ships
   `button[disabled] { cursor: default !important }`, so only !important can
   restore it — a documented, surgical override of a rule that is itself
   !important, not a specificity shortcut. */
.kin-rating-form__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed !important;
}

/* `hidden` must win over the flex display above, or the no-JS fallback breaks. */
.kin-comments-reveal[hidden] {
	display: none;
}

/* Le formulaire de commentaires : bloc natif « Post comments form ». */
.kin-article-echanges .comments-area {
	margin: 0;
	padding: 0;
	border: 0;
}

.kin-article-echanges .comment-respond {
	margin: 0;
	padding: 0;
}

.kin-article-echanges .comment-reply-title {
	margin: 0 0 18px;
	font-family: "Lora", serif;
	font-size: 24px;
	font-weight: 400;
	line-height: normal;
}

.kin-article-echanges .comment-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]), textarea) {
	padding: 10px 13px;
	/* Maquette #d2c5d8 : 1,38:1. Le fond du champ se distingue à peine du lilas,
	   c'est donc le bord qui dessine le champ : 3:1 exigés (WCAG 1.4.11). */
	border: 1px solid #8f7f97;
	border-radius: 0;
	background-color: var(--kin-art-paper);
	font-size: 14px;
	line-height: 1.6;
}

.kin-article-echanges .comment-form label {
	font-size: 12px;
	line-height: 1.7;
}

.kin-article-echanges .comment-notes {
	font-size: 11px;
	line-height: 1.7;
	color: #6d5d75;
}

/* ---- La suite : articles liés ---- */

.kin-article-suite.kin-article-suite {
	margin: 45px 0 0;
}

.kin-article-suite__tete.kin-article-suite__tete {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 28px;
}

.kin-article-suite__titre.kin-article-suite__titre {
	margin: 0;
	font-family: "Lora", serif;
	font-size: 31px;
	font-weight: 400;
	line-height: normal;
	color: #423048;
}

/* La rubrique : un faux lien (data-lk-cat, kin.js), le fil d'Ariane portant
   déjà le vrai lien vers cette page. */
.kin-article-rubrique {
	padding-bottom: 5px;
	border-bottom: 1px solid #c3b4c8;
	font-size: 12px;
	color: #725779;
	cursor: pointer;
}

.kin-article-rubrique:hover {
	border-bottom-color: var(--kin-art-purple);
	color: var(--kin-art-purple);
}

/* Colonnes du carrousel : 3 en desktop, 2 en tablette, 1,15 sur téléphone
   (la carte suivante dépasse : on comprend qu'il y en a d'autres).
   Woodmart prints the per-breakpoint column count INLINE on the carousel
   (template-tags.php:1263-1270) from woodmart_get_col_sizes( slides_per_view ).
   For 3 that hardcoded table returns tablet 3 / mobile 1, and the function has
   NO filter and no argument to steer it. Overriding the inline custom
   properties is therefore the only lever, which needs !important (documented
   Woodmart-inline exception, see LESSONS.md). Woodmart's own breakpoints still
   decide WHEN each applies (≤1024px → -md, ≤768.98px → -sm). */
.related-posts-slider .wd-carousel-container,
.related-posts-slider .wd-carousel {
	--wd-col-md: 2 !important; /* tablet ≤1024px */
	--wd-col-sm: 2 !important; /* mobile ≤768.98px */
}

.kin-articles-lies.kin-articles-lies {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Les cartes : angles droits, sans fond ni ombre, texte aligné à gauche. Les
   règles du design « meta-image » de Woodmart tiennent à trois classes. */
.kin-articles-lies.kin-articles-lies .wd-post .wd-post-inner {
	--wd-brd-radius: 0;
	overflow: hidden;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.kin-articles-lies :is(.wd-post, .wd-post-thumb, .wd-post-img, .wd-post-img img) {
	border-radius: 0;
}

.kin-articles-lies.kin-articles-lies .wd-post .wd-post-content {
	padding: 20px 0 10px;
	background: none;
	text-align: start;
}

/* La taille du titre vient d'un réglage du thème, imprimé en ligne
   (`html .post.wd-post:not(.blog-design-small) .wd-entities-title`, 0,4,1) :
   un cran de plus, dans ce carrousel seulement. */
.kin-articles-lies.kin-articles-lies .post.wd-post .wd-entities-title {
	margin-top: 12px;
	font-family: "Lora", serif;
	font-size: 23px;
	font-style: normal; /* le réglage des titres d'articles est en italique */
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.kin-articles-lies .wd-post-meta {
	justify-content: flex-start;
	font-size: 10px;
	color: #6e5f74;
}

.kin-articles-lies .wd-post-cat {
	color: #6b5072;
}

/* ---- La boutique : bandeau sauge ---- */

.kin-article-boutique.kin-article-boutique {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 22px;
	margin: 40px 0 0;
	padding: 28px 25px;
	background-color: var(--kin-art-sage);
}

.kin-article-boutique > .wp-block-group.wp-block-group {
	margin: 0;
}

.kin-article-boutique.kin-article-boutique p {
	margin: 0 0 13px;
	font-size: 12px;
	line-height: 1.8;
	color: #535f4f;
}

.kin-article-boutique__titre.kin-article-boutique__titre {
	margin: 0;
	font-family: "Lora", serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 1.35;
	color: #465342;
}

.kin-article-boutique__titre br {
	display: none;
}

.kin-lien-accueil {
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: 1px solid #87967f;
	font-size: 12px;
	font-weight: 500;
	color: #465342;
}

.kin-lien-accueil:hover {
	border-bottom-color: #465342;
	color: #2f392c;
}

/* ---- Dès 481 px ---- */
@media (min-width: 481px) {
	.single-post .wd-content-layout.container {
		padding: 0 22px 40px;
	}

	.single-post .kin-breadcrumb.kin-breadcrumb {
		margin-bottom: 25px;
		padding-top: 24px;
		font-size: 11px;
	}

	.single-post .kin-breadcrumb .last {
		display: inline;
	}

	.single-post .kin-breadcrumb .separator:nth-last-child(2) {
		display: inline;
	}

	.kin-article__title.kin-article__title {
		margin-bottom: 25px;
	}

	.kin-article-author-rating.kin-article-author-rating {
		gap: 18px;
	}

	.kin-article-author {
		gap: 11px;
	}

	.kin-article__avatar,
	.kin-article-author__avatar {
		width: 40px;
		height: 40px;
	}

	.kin-article-hero .kin-rating-display__summary {
		gap: 13px;
		padding: 10px 14px;
	}

	.kin-article-hero .kin-rating-display__score {
		padding-right: 12px;
	}

	.kin-article-hero .kin-rating-display__score strong {
		font-size: 26px;
	}

	.kin-article-hero .kin-rating-stars {
		font-size: 14px;
	}

	.kin-article-infos.kin-article-infos {
		gap: 10px 19px;
		margin-top: 18px;
	}

	.kin-article-infos__item {
		gap: 7px;
		font-size: 11px;
	}

	.kin-article-infos__item:first-child {
		flex-basis: auto;
	}

	/* L'écoute : titre et lecteur sur une ligne. */
	.kin-tts .kin-article-ecoute.kin-article-ecoute {
		display: flex;
		align-items: center;
		gap: 24px;
	}

	.kin-article-ecoute__titre.kin-article-ecoute__titre {
		flex: none;
		margin: 0;
	}

	.kin-article-ecoute .kin-audio {
		flex: 1;
		max-width: 330px;
		grid-template-columns: 32px repeat(5, minmax(0, 1fr));
	}

	.kin-article__partage.kin-article__partage {
		justify-content: flex-start;
		gap: 20px;
	}

	.kin-article__partage-titre.kin-article__partage-titre {
		font-size: 11px;
	}

	.kin-article__partage .kin-article__partage-boutons.wd-social-icons {
		--wd-social-size: 36px;
		--wd-social-gap: 8px;
	}

	.kin-article__chapo p {
		font-size: 21px;
	}

	.kin-article__content.kin-article__content {
		font-size: 16px;
		line-height: 1.95;
	}

	.kin-article__content.kin-article__content h2 {
		margin-top: 52px;
		font-size: 32px;
	}

	.kin-article__content > ul:first-of-type:not(h2 ~ ul) {
		padding: 24px 30px 20px;
	}

	.kin-article-echanges.kin-article-echanges {
		padding: 35px;
	}

	.kin-article-echanges__titre.kin-article-echanges__titre {
		font-size: 35px;
	}

	.kin-article-echanges .kin-rating-form__title {
		font-size: 22px;
	}

	.kin-article-suite.kin-article-suite {
		margin-top: 74px;
	}

	.kin-articles-lies.kin-articles-lies .post.wd-post .wd-entities-title {
		font-size: 24px;
	}

	.kin-article-boutique.kin-article-boutique {
		grid-template-columns: 1.2fr 1fr;
		gap: 25px;
		margin-top: 68px;
		padding: 32px;
	}
}

/* ---- Téléphone : la carte suivante du carrousel dépasse (1,15 colonne) ---- */
@media (max-width: 480px) {
	.kin-articles-lies .wd-carousel {
		--wd-col-sm: 1.15 !important; /* même exception que ci-dessus */
		--wd-gap-sm: 18px !important;
	}
}

/* ---- Dès 801 px : deux colonnes ---- */
@media (min-width: 801px) {
	.single-post .wd-content-layout.container {
		padding: 0 28px 50px;
	}

	.kin-article-hero.kin-article-hero {
		grid-template-columns: 1fr 1.14fr;
		align-items: stretch;
		gap: 32px;
	}

	/* Article sans image mise en avant : le bloc image n'imprime rien, le titre
	   prend toute la largeur au lieu de laisser une colonne vide. */
	.kin-article-hero.kin-article-hero:not(:has(.kin-article__featured)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.kin-article__title .wd-post-title {
		max-width: none;
	}

	.kin-article__featured.kin-article__featured {
		min-height: 420px;
	}

	.kin-article__featured img {
		height: 100%;
		max-height: 590px;
		aspect-ratio: auto;
		object-position: 40% center;
	}

	.kin-article__layout.kin-article__layout {
		grid-template-columns: 220px minmax(0, 700px);
		justify-content: center;
		align-items: start;
		gap: 42px;
		margin-top: 78px;
	}

	/* Le rail suit la lecture, sous l'en-tête collant (81 px). En CSS, sans
	   script : la colonne collante de Woodmart recalcule tout en JavaScript
	   au défilement (D-72). */
	.kin-article__rail.kin-article__rail {
		position: sticky;
		top: 112px;
		align-self: start;
	}

	.kin-article-sommaire.kin-article-sommaire {
		border-bottom: 0;
	}

	.kin-article-sommaire__titre {
		padding: 20px 0;
		font-size: 23px;
	}

	.kin-article-sommaire nav {
		padding-bottom: 0;
	}

	.kin-article-progression:not([hidden]) {
		display: block;
		margin: 24px 0 30px;
	}

	.kin-article-progression label {
		display: block;
		margin-bottom: 8px;
		font-size: 10px;
		color: #6c6070;
	}

	.kin-article-progression progress {
		display: block;
		width: 100%;
		height: 2px;
		border: 0;
		background-color: #e6e0e8;
		color: #80638a;
		appearance: none;
	}

	.kin-article-progression progress::-webkit-progress-bar {
		background-color: #e6e0e8;
	}

	.kin-article-progression progress::-webkit-progress-value {
		background-color: #80638a;
	}

	.kin-article-progression progress::-moz-progress-bar {
		background-color: #80638a;
	}

	/* L'écoute redevient un encadré, au-dessus du partage. */
	.kin-tts .kin-article-ecoute.kin-article-ecoute {
		display: block;
		margin: 0 0 26px;
		padding: 19px 15px;
	}

	.kin-article-ecoute__titre.kin-article-ecoute__titre {
		margin: 0 0 13px;
	}

	.kin-article-ecoute .kin-audio {
		max-width: none;
	}

	.kin-article__partage.kin-article__partage {
		display: block;
		padding-top: 20px;
		border-top: 1px solid var(--kin-art-line);
	}

	.kin-article__partage-titre.kin-article__partage-titre {
		margin: 0 0 12px;
	}

	.kin-article__lecture.kin-article__lecture {
		margin-inline: 0;
	}

	.kin-article-echanges.kin-article-echanges {
		grid-template-columns: 1fr 1.5fr;
		gap: 40px;
		margin-top: 76px;
	}

	.kin-article-echanges__titre br {
		display: inline;
	}

	.kin-article-echanges__intro p {
		max-width: 290px;
	}

	.kin-article-suite__tete.kin-article-suite__tete {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 24px;
	}

	.kin-article-suite__titre.kin-article-suite__titre {
		font-size: 36px;
	}

	.kin-article-boutique.kin-article-boutique {
		gap: 35px;
	}

	.kin-article-boutique__titre.kin-article-boutique__titre {
		font-size: 30px;
	}

	.kin-article-boutique__titre br {
		display: inline;
	}
}

/* ---- Dès 1101 px ---- */
@media (min-width: 1101px) {
	.single-post .wd-content-layout.container {
		padding: 0 48px 72px;
	}

	.kin-article-hero.kin-article-hero {
		gap: 58px;
	}

	.kin-article__featured.kin-article__featured {
		min-height: 460px;
	}

	.kin-article__layout.kin-article__layout {
		grid-template-columns: 250px minmax(0, 700px);
		gap: 80px;
	}

	.kin-article-echanges.kin-article-echanges {
		gap: 70px;
		padding: 48px 55px;
	}

	.kin-article-boutique.kin-article-boutique {
		gap: 60px;
		padding: 40px 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kin-article-sommaire__chevron,
	.kin-article-sommaire__liste a,
	.kin-article-echanges :is(.kin-rating-form__submit, .kin-comments-reveal, .comment-form .submit) {
		transition: none;
	}
}

/* =========================================================================
   RUBRIQUE DU JOURNAL — maquette « Signature »
   (refonte-kinthia.com/categorie-journal-signature.php)
   -------------------------------------------------------------------------
   Layout Woodmart « Rubrique du journal » (#9615, D-75), en blocs natifs ;
   les pièces sans bloc natif sont des codes courts (inc/journal.php) :

       fil d'Ariane
       titre, chapeau, liens  |  photo              .kin-rubrique-hero
       navigation entre rubriques                   .kin-rubriques
       l'article pilier, puis la grille             .kin-rubrique-articles
       le guide, replié                             .kin-rubrique-guide
       la boutique                                  .kin-rubrique-boutique

   Mobile d'abord, aux paliers de CETTE maquette : 580, 800 et 1100 px (ses
   `max-width`), soit des `min-width` à 581, 801 et 1101 px. Les marges des
   sections sont posées à deux classes (WD-47). Neuf gris de la maquette étaient
   sous l'AA : foncés au plus juste (valeur d'origine en commentaire).
   ========================================================================= */

.category,
.kin-autrice {
	--kin-rub-ink: #48354f;
	--kin-rub-purple: #64466e;
	--kin-rub-line: #dfd9d0;
	--kin-rub-sable: #f0ece5;
	--wd-otl-style: solid;
	--wd-otl-color: var(--kin-rub-purple);
	--wd-otl-offset: 4px;
}

.category .wd-content-layout.container,
.kin-autrice .wd-content-layout.container {
	display: flow-root; /* WD-57 */
	max-width: 1440px;
	padding: 0 18px 35px;
}

.category .kin-breadcrumb.kin-breadcrumb,
.kin-autrice .kin-breadcrumb.kin-breadcrumb {
	margin: 0 0 17px;
	padding-top: 17px;
	font-size: 10px;
	line-height: 1.7;
	color: #6f6872; /* maquette #7d747e : 4,24:1 */
}

.category .kin-breadcrumb a,
.category .kin-breadcrumb .last,
.kin-autrice .kin-breadcrumb a,
.kin-autrice .kin-breadcrumb .last {
	color: inherit;
}

.category .kin-breadcrumb .separator,
.kin-autrice .kin-breadcrumb .separator {
	margin: 0 0.5em;
}

/* ---- Bandeau ---- */

.kin-rubrique-hero.kin-rubrique-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	background-color: #eee9f0;
}

.kin-rubrique-hero__copy.kin-rubrique-hero__copy {
	align-self: center;
	min-width: 0;
	margin: 0;
	padding: 28px 25px;
}

.kin-rubrique-hero__titre.kin-rubrique-hero__titre {
	margin: 0;
}

.kin-rubrique-hero__titre .title {
	max-width: 600px;
	margin: 0 0 18px;
	font-family: "Lora", serif;
	font-size: 29px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -0.025em;
	color: #46314f;
	text-wrap: balance;
}

.kin-rubrique-hero__chapeau.kin-rubrique-hero__chapeau {
	max-width: 465px;
	margin: 0 0 23px;
	font-size: 13px;
	line-height: 1.85;
	color: #77627c; /* maquette #79647e : 4,46:1 */
}

.kin-rubrique-hero__chapeau p {
	margin: 0 0 0.8em;
}

.kin-rubrique-hero__chapeau p:last-child {
	margin-bottom: 0;
}

.kin-rubrique-hero__liens {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 23px;
}

.kin-rubrique-hero__parcourir {
	display: inline-flex;
	padding: 11px 14px;
	background-color: var(--kin-rub-purple);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
}

.kin-rubrique-hero__parcourir:hover {
	background-color: #513858;
	color: #fff;
}

.kin-rubrique-hero__guide {
	padding-bottom: 4px;
	border-bottom: 1px solid #bca9c5;
	font-size: 11px;
	color: #6c5275;
}

/* La photo, sortie de la description : elle remplit sa cellule. */
.kin-rubrique-hero__photo {
	position: relative;
	min-width: 0;
	height: 170px;
	margin: 0;
	overflow: hidden;
}

.kin-rubrique-hero__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 52%;
	border-radius: 0;
}

/* ---- Page de l'autrice (inc/autrice.php, D-159 ; maquette « Signature »
   auteur-signature.php, D-163) ----
   Bandeau (surtitre, titre, biographie, bouton | portrait légendé), histoire,
   livre, écriture, puis ses articles, filtrables par thème. Paliers de la
   maquette : 581, 801 et 1001 px. Trois gris de la maquette remontés pour l'AA
   (valeur d'origine en commentaire). */
.kin-autrice {
	--kin-aut-encre: #382b3e;
	--kin-aut-gris: #796d7c;
	--kin-aut-surtitre: #77637e; /* maquette #806c87 : 3,98:1 sur le lilas */
	--kin-aut-prune: #64466e;
	--kin-aut-ligne: #dfd9d0;
}

.kin-autrice__surtitre.kin-autrice__surtitre {
	margin: 0 0 18px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--kin-aut-surtitre);
}

.kin-autrice__titre.kin-autrice__titre {
	margin: 0 0 18px;
	font-family: "Lora", serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.6px;
	color: var(--kin-aut-encre);
}

.kin-autrice__titre br {
	display: none;
}

.kin-autrice__lien.kin-autrice__lien {
	margin: 0;
}

.kin-autrice__lien a {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding-bottom: 5px;
	border-bottom: 1px solid #b9a9bf;
	font-size: 12px;
	line-height: 1.6;
	color: var(--kin-aut-prune);
}

/* Fil d'Ariane et marges de la maquette (les rubriques ont les leurs). */
body.kin-autrice .kin-breadcrumb.kin-breadcrumb {
	margin: 0 0 20px;
	padding: 18px 0;
	font-size: 11px;
}

@media (max-width: 580px) {
	body.kin-autrice .wd-content-layout.container {
		padding-right: 15px;
		padding-left: 15px;
	}
}

/* Bandeau : sur téléphone, le titre et un petit portrait côte à côte, le reste
   en pleine largeur (la colonne de texte se fond dans la grille). */
.kin-autrice-hero.kin-autrice-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 95px;
	gap: 12px;
	margin: 0 0 20px;
	padding: 27px 20px;
	background-color: #eee9f0;
}

.kin-autrice-hero__copy.kin-autrice-hero__copy {
	display: contents;
}

.kin-autrice-hero .kin-autrice__surtitre {
	grid-column: 1 / -1;
	margin: 0 0 3px;
	font-size: 11px;
}

.kin-autrice-hero__titre.kin-autrice-hero__titre {
	grid-column: 1;
	grid-row: 2;
	align-self: center;
	margin: 0;
	font-family: "Lora", serif;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.8px;
	color: var(--kin-aut-encre);
}

.kin-autrice-hero__photo.kin-autrice-hero__photo {
	grid-column: 2;
	grid-row: 2;
	max-width: 95px;
	margin: 0;
}

.kin-autrice-hero__portrait.kin-autrice-hero__portrait {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 0;
	object-fit: cover;
}

.kin-autrice-hero__legende.kin-autrice-hero__legende {
	display: none;
}

.kin-autrice-hero__chapeau.kin-autrice-hero__chapeau {
	grid-column: 1 / -1;
	max-width: 490px;
	margin: 10px 0 6px;
	font-size: 13px;
	line-height: 1.85;
	color: #6d5c73;
}

.kin-autrice-hero__bouton.kin-autrice-hero__bouton {
	display: inline-flex;
	grid-column: 1 / -1;
	justify-self: start;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	min-height: 46px;
	padding: 11px 16px;
	border: 1px solid var(--kin-aut-prune);
	background-color: var(--kin-aut-prune);
	font-size: 12px;
	line-height: 1.5;
	color: #fff;
}

.kin-autrice-hero__bouton.kin-autrice-hero__bouton:hover {
	background-color: #513858;
	color: #fff;
}

/* Histoire et écriture : titre, puis texte ; deux colonnes dès 801 px. */
.kin-autrice-histoire.kin-autrice-histoire,
.kin-autrice-ecriture.kin-autrice-ecriture {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 25px;
	margin: 0 0 20px;
	padding: 35px 0;
}

.kin-autrice-histoire.kin-autrice-histoire {
	border-bottom: 1px solid var(--kin-aut-ligne);
}

.kin-autrice-ecriture.kin-autrice-ecriture {
	gap: 18px;
}

.kin-autrice-ecriture .kin-autrice__titre {
	margin: 0;
}

.kin-autrice-histoire__tete.kin-autrice-histoire__tete,
.kin-autrice-histoire__texte.kin-autrice-histoire__texte,
.kin-autrice-ecriture__texte.kin-autrice-ecriture__texte {
	margin: 0;
}

.kin-autrice-histoire__texte p,
.kin-autrice-ecriture__texte p {
	margin: 0 0 23px;
	font-size: 13px;
	line-height: 1.9;
	color: #6d626f;
}

.kin-autrice-ecriture__texte p {
	margin-bottom: 17px;
}

.kin-autrice-histoire__texte p:last-child,
.kin-autrice-ecriture__texte p:last-child {
	margin-bottom: 0;
}

.kin-autrice-histoire__texte h3 {
	margin: 27px 0 12px;
	font-family: "Lora", serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--kin-aut-encre);
}

/* Le livre : un encart sable ; le pictogramme (décoratif, en fond) dès 581 px. */
.kin-autrice-livre.kin-autrice-livre {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	margin: 0 0 20px;
	padding: 25px 20px;
	background-color: #f0ece5;
}

.kin-autrice-livre__texte.kin-autrice-livre__texte {
	margin: 0;
}

.kin-autrice-livre .kin-autrice__surtitre {
	margin-bottom: 10px;
}

.kin-autrice-livre__titre.kin-autrice-livre__titre {
	margin: 0 0 13px;
	font-family: "Lora", serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--kin-aut-encre);
}

.kin-autrice-livre__titre cite {
	font-style: normal;
}

.kin-autrice-livre__texte p:not(.kin-autrice__surtitre) {
	max-width: 650px;
	margin: 0;
	font-size: 13px;
	line-height: 1.85;
	color: #736776; /* maquette #756978 : 4,41:1 sur le sable */
}

/* Les articles : titre et nombre, thèmes, grille, « Voir les articles suivants ». */
.kin-autrice .kin-autrice-articles.kin-rubrique-articles {
	margin: 0;
	padding-top: 30px;
	border-top: 1px solid var(--kin-aut-ligne);
	scroll-margin-top: 95px;
}

.kin-autrice-articles__tete.kin-autrice-articles__tete {
	margin: 0 0 15px;
}

.kin-autrice-articles__titre.kin-autrice-articles__titre {
	margin: 0 0 10px;
	font-family: "Lora", serif;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--kin-aut-encre);
}

.kin-autrice-articles__compte.kin-autrice-articles__compte {
	margin: 0;
	font-size: 12px;
	color: var(--kin-aut-gris);
}

.kin-autrice-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 26px;
	border-bottom: 1px solid var(--kin-aut-ligne);
}

.kin-autrice-filtres[hidden] {
	display: none;
}

.kin-autrice-filtres button,
.kin-autrice-filtres button:hover {
	min-height: 44px;
	padding: 10px 0;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
	color: var(--kin-aut-gris);
}

.kin-autrice-filtres button[aria-pressed="true"] {
	border-bottom-color: var(--kin-aut-prune);
	color: var(--kin-aut-prune);
}

/* Les cartes (meta-image, comme les rubriques) : catégorie et date aux deux bouts. */
.kin-autrice .kin-autrice-articles.kin-rubrique-articles .post.wd-post .wd-post-meta {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
}

.kin-autrice .kin-autrice-articles.kin-rubrique-articles .post.wd-post .wd-entities-title {
	font-size: 25px;
}

/* Les espacements de la grille de la maquette, à ses paliers (les rubriques ont les leurs). */
.kin-autrice .kin-rubrique-articles .wd-blog-holder.wd-grid-g {
	gap: 33px;
}

.kin-autrice-articles .kin-rubrique-articles__grille .wd-post[hidden] {
	display: none;
}

.kin-autrice-suite.kin-autrice-suite {
	padding-top: 30px;
	text-align: center;
}

.kin-autrice-suite__etat.kin-autrice-suite__etat {
	margin: 0 0 17px;
	font-size: 12px;
	line-height: normal;
	color: var(--kin-aut-gris);
}

.kin-autrice-suite__etat:empty {
	display: none;
}

.kin-autrice-suite__bouton.kin-autrice-suite__bouton,
.kin-autrice-suite__bouton.kin-autrice-suite__bouton:hover {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	min-height: 46px;
	padding: 12px 22px;
	border: 1px solid var(--kin-aut-prune);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	color: var(--kin-aut-prune);
}

.kin-autrice-suite__bouton.kin-autrice-suite__bouton:hover {
	background: #eee9f0;
}

.kin-autrice-suite__bouton[hidden] {
	display: none;
}

@media (min-width: 581px) {
	body.kin-autrice .kin-breadcrumb.kin-breadcrumb {
		padding: 24px 0;
	}

	.kin-autrice .kin-autrice-articles.kin-rubrique-articles .post.wd-post .wd-entities-title {
		font-size: 22px;
	}

	.kin-autrice .kin-rubrique-articles .wd-blog-holder.wd-grid-g {
		gap: 32px 23px;
	}

	.kin-autrice-hero.kin-autrice-hero {
		grid-template-columns: 1.25fr 1fr;
		gap: 0;
		align-items: center;
		min-height: 440px;
		padding: 0;
	}

	/* Le groupe de blocs reçoit 20 px de marge basse : le texte ne serait plus centré. */
	.kin-autrice-hero__copy.kin-autrice-hero__copy {
		display: block;
		margin: 0;
		padding: 30px;
	}

	.kin-autrice-hero .kin-autrice__surtitre {
		margin-bottom: 18px;
		font-size: 12px;
	}

	.kin-autrice-hero__titre.kin-autrice-hero__titre {
		margin: 0 0 25px;
		font-size: 42px;
		letter-spacing: -1.8px;
	}

	.kin-autrice-hero__chapeau.kin-autrice-hero__chapeau {
		margin: 0 0 28px;
		font-size: 14px;
		line-height: 1.9;
	}

	.kin-autrice-hero__bouton.kin-autrice-hero__bouton {
		padding: 12px 22px;
	}

	.kin-autrice-hero__photo.kin-autrice-hero__photo {
		grid-column: auto;
		grid-row: auto;
		justify-self: center;
		width: 100%;
		max-width: 310px;
		padding: 25px;
	}

	.kin-autrice-hero__legende.kin-autrice-hero__legende {
		display: block;
		margin-top: 15px;
		font-family: "Lora", serif;
		font-size: 22px;
		line-height: normal;
		color: #513d58;
	}

	.kin-autrice-hero__legende.kin-autrice-hero__legende span {
		display: block;
		margin-top: 6px;
		font-family: "Work Sans", sans-serif;
		font-size: 11px;
		line-height: 1.5;
		color: var(--kin-aut-surtitre);
	}

	.kin-autrice-histoire.kin-autrice-histoire,
	.kin-autrice-ecriture.kin-autrice-ecriture {
		padding: 40px 0;
	}

	.kin-autrice-ecriture.kin-autrice-ecriture {
		gap: 25px;
	}

	.kin-autrice__titre.kin-autrice__titre {
		font-size: 34px;
	}

	.kin-autrice-histoire__texte p,
	.kin-autrice-ecriture__texte p {
		font-size: 14px;
		line-height: 1.95;
	}

	.kin-autrice-histoire__texte h3 {
		font-size: 23px;
	}

	.kin-autrice-livre.kin-autrice-livre {
		grid-template-columns: 55px minmax(0, 1fr);
		gap: 24px;
		padding: 30px;
	}

	.kin-autrice-livre.kin-autrice-livre::before {
		content: "";
		width: 55px;
		height: 55px;
		background: url("../img/intentions/expression.svg") center / contain no-repeat;
	}

	.kin-autrice-livre .kin-autrice__lien {
		grid-column: 2;
		justify-self: start;
	}

	.kin-autrice-livre__titre.kin-autrice-livre__titre {
		font-size: 26px;
	}

	.kin-autrice .kin-autrice-articles.kin-rubrique-articles {
		padding-top: 42px;
		scroll-margin-top: 120px;
	}

	.kin-autrice-articles__tete.kin-autrice-articles__tete {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 20px;
		margin-bottom: 24px;
	}

	.kin-autrice-articles__titre.kin-autrice-articles__titre {
		margin: 0;
		font-size: 30px;
	}

	.kin-autrice-filtres {
		gap: 25px;
		margin-bottom: 34px;
	}

	.kin-autrice-filtres button,
	.kin-autrice-filtres button:hover {
		padding: 8px 0 15px;
		font-size: 12px;
	}

	.kin-autrice-suite.kin-autrice-suite {
		padding-top: 43px;
	}
}

@media (min-width: 801px) {
	.kin-autrice-hero__copy.kin-autrice-hero__copy {
		padding: 35px;
	}

	.kin-autrice-hero__titre.kin-autrice-hero__titre {
		font-size: clamp(42px, 4.3vw, 62px);
	}

	.kin-autrice-hero__photo.kin-autrice-hero__photo {
		max-width: 350px;
		padding: 35px;
	}

	.kin-autrice-hero__legende.kin-autrice-hero__legende {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
	}

	.kin-autrice-hero__legende.kin-autrice-hero__legende span {
		margin-top: 0;
		text-align: right;
	}

	.kin-autrice-histoire.kin-autrice-histoire,
	.kin-autrice-ecriture.kin-autrice-ecriture {
		grid-template-columns: 0.9fr 1.2fr;
		gap: 45px;
	}

	.kin-autrice-histoire .kin-autrice__titre {
		margin-bottom: 28px;
	}

	.kin-autrice__titre br {
		display: inline;
	}

	.kin-autrice-articles__titre.kin-autrice-articles__titre {
		font-size: 34px;
	}
}

@media (min-width: 1001px) {
	.kin-autrice .kin-autrice-articles.kin-rubrique-articles .post.wd-post .wd-entities-title {
		font-size: 24px;
	}

	.kin-autrice .kin-rubrique-articles .wd-blog-holder.wd-grid-g {
		gap: 43px 30px;
	}

	.kin-autrice-hero__copy.kin-autrice-hero__copy {
		padding: 44px 60px;
	}

	.kin-autrice-hero__photo.kin-autrice-hero__photo {
		max-width: 400px;
		padding: 40px 60px 35px 25px;
	}

	.kin-autrice-histoire.kin-autrice-histoire {
		gap: 100px;
		padding: 70px 0 55px;
	}

	.kin-autrice-ecriture.kin-autrice-ecriture {
		gap: 100px;
		padding: 55px 0 65px;
	}

	.kin-autrice-livre.kin-autrice-livre {
		grid-template-columns: 80px minmax(0, 1fr) auto;
		gap: 35px;
		padding: 32px 38px;
	}

	.kin-autrice-livre.kin-autrice-livre::before {
		width: 70px;
		height: 70px;
	}

	.kin-autrice-livre .kin-autrice__lien {
		grid-column: auto;
		white-space: nowrap;
	}
}

/* ---- Navigation entre rubriques ([kin_rubriques_nav]) ----
   Une piste qui défile, barre masquée, fondu et flèches (kin.js), comme la
   navigation des familles produit. Le filet est porté par le <nav>, que le
   fondu de la liste n'atteint pas. */
.kin-rubriques {
	--kin-rub-fondu: 28px;
	position: relative;
	border-bottom: 1px solid var(--kin-rub-line);
}

.kin-rubriques .kin-rubriques__liste {
	display: flex;
	gap: 23px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	white-space: nowrap;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--kin-rub-fondu);
	scrollbar-width: none;
}

.kin-rubriques .kin-rubriques__liste::-webkit-scrollbar {
	display: none;
}

.kin-rubriques.kin-rubriques--apres .kin-rubriques__liste {
	mask-image: linear-gradient(90deg, #000 calc(100% - var(--kin-rub-fondu)), transparent);
}

.kin-rubriques.kin-rubriques--avant .kin-rubriques__liste {
	mask-image: linear-gradient(90deg, transparent, #000 var(--kin-rub-fondu));
}

.kin-rubriques.kin-rubriques--avant.kin-rubriques--apres .kin-rubriques__liste {
	mask-image: linear-gradient(90deg, transparent, #000 var(--kin-rub-fondu), #000 calc(100% - var(--kin-rub-fondu)), transparent);
}

.kin-rubriques .kin-rubriques__liste > li {
	flex: none;
	margin: 0;
	scroll-snap-align: start;
}

.kin-rubriques .kin-rubriques__liste a {
	display: block;
	padding: 18px 0 16px;
	border-bottom: 2px solid transparent;
	font-size: 11px;
	line-height: 1.4;
	color: #6f6472; /* maquette #807482 : 4,18:1 */
}

.kin-rubriques .kin-rubriques__liste a:hover {
	color: var(--kin-rub-purple);
}

.kin-rubriques .kin-rubriques__liste a[aria-current] {
	border-bottom-color: var(--kin-rub-purple);
	font-weight: 500;
	color: var(--kin-rub-purple);
}

.kin-rubriques .kin-rubriques__fleches {
	display: none;
}

.kin-rubriques .kin-rubriques__fleche {
	position: absolute;
	inset-block-start: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 1px solid #c8bfce;
	border-radius: 50%;
	background-color: #faf8f3;
	font-size: 15px;
	line-height: 1;
	color: #382b3e;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease, border-color 0.2s ease; /* WD-58 */
}

.kin-rubriques .kin-rubriques__fleche--prec {
	inset-inline-start: 0;
}

.kin-rubriques .kin-rubriques__fleche--suiv {
	inset-inline-end: 0;
}

.kin-rubriques .kin-rubriques__fleche--prec > span {
	transform: rotate(180deg);
}

.kin-rubriques .kin-rubriques__fleche:hover {
	border-color: #a596a5;
	background-color: #eee7ef;
}

.kin-rubriques .kin-rubriques__fleche:disabled {
	visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
	.kin-rubriques {
		--kin-rub-fondu: 64px;
	}

	.kin-rubriques .kin-rubriques__fleches:not([hidden]) {
		display: block;
	}
}

/* ---- Les articles ---- */

.kin-rubrique-articles.kin-rubrique-articles {
	--wd-brd-radius: 0; /* photos à angles droits */
	margin: 30px 0 0;
	scroll-margin-top: 110px;
}

/* Rubrique sans article : la boucle n'imprime rien (inc/journal.php), la
   section et son titre se retirent. */
.kin-rubrique-articles.kin-rubrique-articles:not(:has(.wd-post)) {
	display: none;
}

.kin-rubrique-articles__tete.kin-rubrique-articles__tete {
	margin: 0 0 20px;
}

.kin-rubrique-articles__titre.kin-rubrique-articles__titre {
	margin: 0 0 10px;
	font-family: "Lora", serif;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--kin-rub-ink);
}

.kin-rubrique-articles__compte.kin-rubrique-articles__compte {
	margin: 0;
	font-size: 10px;
	white-space: nowrap;
	color: #7c6d81; /* maquette #8a7b8f : 3,73:1 */
}

.kin-rubrique-articles__grille.kin-rubrique-articles__grille {
	margin: 0;
}

/* La grille : les colonnes de la maquette, à SES paliers. Woodmart les pose
   par variables en ligne à ses propres paliers (1024, 768) : on écrit la
   propriété elle-même, qu'aucun style en ligne ne porte. */
.kin-rubrique-articles .wd-blog-holder.wd-grid-g {
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
}

.kin-rubrique-articles .wd-blog-holder > .wd-post {
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Sans fond : Woodmart peint la carte en blanc
   (`.blog-design-meta-image.blog-style-bg .wd-post-inner`, 0,3,0), dans une
   feuille chargée après la nôtre (WD-20) : une classe de plus. La carte à la
   une repose son propre fond plus bas. */
.kin-rubrique-articles .wd-post.blog-style-bg .wd-post-inner {
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.kin-rubrique-articles .wd-post .wd-post-content {
	padding: 19px 0 5px;
	background: transparent;
	text-align: start;
}

/* Taille et style des titres : réglage du thème imprimé en ligne (0,4,1),
   un cran de plus ici. */
.kin-rubrique-articles.kin-rubrique-articles .post.wd-post .wd-entities-title {
	margin: 0;
	font-family: "Lora", serif;
	font-size: 25px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--kin-rub-ink);
	text-wrap: pretty;
}

.kin-rubrique-articles .wd-post-title a {
	color: var(--kin-rub-ink);
}

.kin-rubrique-articles .wd-post-title a:hover {
	color: #795882;
}

.kin-rubrique-articles .wd-post .wd-post-meta {
	font-size: 10px;
	color: #7c6d81; /* maquette #8a7b8f : 3,73:1 */
}

.kin-rubrique-articles .wd-post .wd-post-cat {
	color: #7c6185;
}

/* « Prendre le temps de lire », comme le journal de l'accueil (kin-home.css) :
   un texte, pas un lien, la carte entière est cliquable (data-lk, kin.js). */
.kin-rubrique-articles .wd-post .wd-post-read-more {
	margin-block-start: 0;
}

/* Trois classes : style.css pose la couleur des liens sur
   `.wd-post-read-more.wd-style-link .kin-read-more` (0,3,0). */
.kin-rubrique-articles .wd-post-read-more .kin-read-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-block: 7px;
	border-block-end: 1px solid currentcolor;
	font-size: 9px;
	line-height: 1.5;
	color: var(--kin-rub-ink);
}

.kin-rubrique-articles .wd-post-read-more .kin-read-more::after {
	content: "→";
}

.kin-rubrique-articles .wd-post:hover .kin-read-more {
	color: var(--kin-rub-purple);
}

/* L'article pilier : toute la largeur, photo | texte. */
.kin-rubrique-articles .wd-blog-holder > .wd-post.kin-une {
	grid-column: 1 / -1;
}

.kin-rubrique-articles .wd-post.kin-une > .wd-post-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background-color: var(--kin-rub-sable);
}

.kin-rubrique-articles .wd-post.kin-une .wd-post-thumb {
	height: auto;
	aspect-ratio: 16 / 10;
}

.kin-rubrique-articles .wd-post.kin-une .wd-post-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 25px;
}

.kin-une__etiquette.kin-une__etiquette {
	margin: 0 0 13px;
	font-size: 11px;
	line-height: normal;
	color: #7a6280; /* maquette #88708e : 3,75:1 */
}

.kin-rubrique-articles.kin-rubrique-articles .post.wd-post.kin-une .wd-entities-title {
	margin: 14px 0 18px;
	font-size: 27px;
	line-height: 1.3;
	letter-spacing: -0.023em;
	text-wrap: balance;
}

.kin-une__extrait.kin-une__extrait {
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 1.85;
	color: #726673; /* maquette #7c707d : 3,99:1 */
}

.kin-une__lire {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 28px;
	padding-bottom: 5px;
	border-bottom: 1px solid #bcaebf;
	font-size: 12px;
	font-weight: 500;
	color: #67486f;
	cursor: pointer;
}

/* ---- Le guide ---- */

.kin-rubrique-guide.kin-rubrique-guide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 43px 0 0;
	padding: 28px 25px;
	background-color: var(--kin-rub-sable);
	scroll-margin-top: 110px;
}

/* Page 2, ou description sans texte long : pas de guide, pas de section. */
.kin-rubrique-guide.kin-rubrique-guide:not(:has(.kin-rubrique-guide__details)) {
	display: none;
}

.kin-rubrique-guide > .wp-block-group.wp-block-group {
	margin: 0;
}

.kin-rubrique-guide__surtitre.kin-rubrique-guide__surtitre {
	margin: 0 0 17px;
	font-size: 11px;
	color: #7b637f; /* maquette #8b738f : 3,61:1 */
}

.kin-rubrique-guide__titre.kin-rubrique-guide__titre {
	margin: 0 0 18px;
	font-family: "Lora", serif;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--kin-rub-ink);
}

.kin-rubrique-guide__titre br {
	display: none;
}

.kin-rubrique-guide__accroche.kin-rubrique-guide__accroche {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: #746777; /* maquette #827585 : 3,69:1 */
}

.kin-rubrique-guide__details {
	align-self: start;
	min-width: 0;
	border-block: 1px solid #c7b9cb;
}

.kin-rubrique-guide__bouton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	font-size: 13px;
	line-height: 1.5;
	color: #614c69;
	list-style: none;
	cursor: pointer;
}

.kin-rubrique-guide__bouton::-webkit-details-marker {
	display: none;
}

.kin-rubrique-guide__bouton > span {
	font-size: 25px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.kin-rubrique-guide__details[open] .kin-rubrique-guide__bouton > span {
	transform: rotate(45deg);
}

.kin-rubrique-guide__texte {
	padding: 10px 0 25px;
	overflow-wrap: break-word;
	font-size: 13px;
	line-height: 1.95;
	color: #62576a;
}

.kin-rubrique-guide__texte :is(h2, h3) {
	font-family: "Lora", serif;
	font-weight: 400;
	color: var(--kin-rub-ink);
}

.kin-rubrique-guide__texte h2 {
	margin: 30px 0 17px;
	font-size: 23px;
	line-height: 1.4;
}

.kin-rubrique-guide__texte a {
	color: var(--kin-rub-purple);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kin-rubrique-guide__texte img {
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

.kin-rubrique-guide__texte .wp-caption {
	max-width: 100%;
	margin: 26px 0;
}

.kin-rubrique-guide__texte .wp-caption-text {
	font-size: 11px;
	line-height: 1.7;
	color: #77637c; /* maquette #87738c : 3,67:1 */
}

/* Les tableaux des heures miroirs (rubrique #189, D-154) : une heure par
   ligne, l'heure seule liée. La table reste une table à toutes les largeurs
   (un `display` changé lui ferait perdre sa sémantique dans VoiceOver) :
   resserrée en mobile, le message prend la place que laissent les autres.
   Sous 360 px, le mot le plus long de chaque colonne ne tient plus : son
   cadre défile (une table de données y est admise, WCAG 1.4.10), au clavier
   aussi (`tabindex`, nommé par la légende). */
.kin-rubrique-guide__texte .kin-hm-cadre {
	margin: 24px 0;
	overflow-x: auto;
}

.kin-rubrique-guide__texte .kin-hm-cadre:focus-visible {
	outline: 2px solid var(--kin-rub-purple);
	outline-offset: 2px;
}

.kin-rubrique-guide__texte .kin-hm-tableau {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 12px;
	line-height: 1.55;
}

.kin-rubrique-guide__texte .kin-hm-tableau caption {
	padding: 0 0 10px;
	text-align: left;
	color: #6a5870;
}

.kin-rubrique-guide__texte .kin-hm-tableau :is(th, td) {
	padding: 9px 6px 9px 0;
	border-bottom: 1px solid #d6cbdc;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
	hyphens: auto;
}

.kin-rubrique-guide__texte .kin-hm-tableau :is(th, td):last-child {
	padding-right: 0;
}

/* Les en-têtes de colonne prendraient le style des tableaux de Woodmart
   (police des titres, 16 px, capitales) : à 320 px, « MESSAGE » ne se coupe
   plus et le tableau déborde de 60 px. */
.kin-rubrique-guide__texte .kin-hm-tableau thead th {
	border-bottom-color: #b9a8bf;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--kin-rub-ink);
}

/* L'heure : la cible du lien remplit la hauteur d'une ligne, 44 px au moins. */
.kin-rubrique-guide__texte .kin-hm-tableau tbody th {
	padding-block: 0;
	font-weight: 500;
	white-space: nowrap;
	hyphens: manual;
	font-variant-numeric: tabular-nums;
}

.kin-rubrique-guide__texte .kin-hm-tableau tbody th a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* ---- La boutique ---- */

.kin-rubrique-boutique.kin-rubrique-boutique {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	margin: 34px 0 0;
	padding: 28px 25px;
	background-color: #e9eee5;
}

.kin-rubrique-boutique > .wp-block-group.wp-block-group {
	margin: 0;
}

.kin-rubrique-boutique.kin-rubrique-boutique p {
	margin: 0 0 15px;
	font-size: 12px;
	line-height: 1.8;
	color: #626f5c; /* maquette #64715e : 4,38:1 */
}

.kin-rubrique-boutique__titre.kin-rubrique-boutique__titre {
	margin: 0;
	font-family: "Lora", serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 1.3;
	color: #485742;
}

.kin-rubrique-boutique__titre br {
	display: none;
}

.kin-rubrique-boutique .kin-lien-accueil {
	display: inline;
	border-bottom-color: #9dab95;
	color: #485742;
}

/* ---- Dès 581 px ---- */
@media (min-width: 581px) {
	.category .wd-content-layout.container,
	.kin-autrice .wd-content-layout.container {
		padding: 0 22px 40px;
	}

	.category .kin-breadcrumb.kin-breadcrumb,
	.kin-autrice .kin-breadcrumb.kin-breadcrumb {
		margin-bottom: 24px;
		padding-top: 24px;
		font-size: 11px;
	}

	.kin-rubrique-hero.kin-rubrique-hero {
		grid-template-columns: 1.15fr 1fr;
		min-height: 340px;
	}

	.kin-rubrique-hero.kin-rubrique-hero:not(:has(.kin-rubrique-hero__photo)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.kin-rubrique-hero__copy.kin-rubrique-hero__copy {
		padding: 27px;
	}

	.kin-rubrique-hero__titre .title {
		margin-bottom: 24px;
		font-size: 30px;
	}

	.kin-rubrique-hero__chapeau.kin-rubrique-hero__chapeau {
		margin-bottom: 27px;
	}

	.kin-rubrique-hero__liens {
		gap: 16px;
	}

	.kin-rubrique-hero__parcourir {
		padding: 12px 20px;
		font-size: 12px;
	}

	.kin-rubrique-hero__guide {
		font-size: 12px;
	}

	.kin-rubrique-hero__photo {
		height: auto;
		min-height: 330px;
	}

	.kin-rubrique-hero__photo img {
		object-position: center;
	}

	.kin-rubriques .kin-rubriques__liste a {
		padding: 23px 0 20px;
	}

	.kin-rubrique-articles.kin-rubrique-articles {
		margin-top: 46px;
	}

	.kin-rubrique-articles__tete.kin-rubrique-articles__tete {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 20px;
		margin-bottom: 27px;
	}

	.kin-rubrique-articles__titre.kin-rubrique-articles__titre {
		margin-bottom: 0;
	}

	.kin-rubrique-articles__compte.kin-rubrique-articles__compte {
		font-size: 11px;
	}

	.kin-rubrique-articles .wd-blog-holder.wd-grid-g {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 22px;
	}

	/* La carte pilier : 43 px sous elle dans la maquette, la grille en donne 32. */
	.kin-rubrique-articles .wd-blog-holder > .wd-post.kin-une {
		margin-bottom: 11px;
	}

	.kin-rubrique-articles .wd-post.kin-une > .wd-post-inner {
		grid-template-columns: 1fr 1fr;
	}

	.kin-rubrique-articles .wd-post.kin-une .wd-post-thumb {
		height: 100%;
		min-height: 330px;
		aspect-ratio: auto;
	}

	.kin-une__etiquette.kin-une__etiquette {
		margin-bottom: 18px;
		font-size: 12px;
	}

	.kin-rubrique-articles.kin-rubrique-articles .post.wd-post.kin-une .wd-entities-title {
		font-size: 25px;
	}

	.kin-une__extrait.kin-une__extrait {
		font-size: 12px;
	}

	.kin-rubrique-articles.kin-rubrique-articles .post.wd-post .wd-entities-title {
		font-size: 23px;
	}

	.kin-rubrique-articles .wd-post-read-more .kin-read-more {
		gap: 8px;
	}

	.kin-rubrique-guide.kin-rubrique-guide {
		gap: 25px;
		margin-top: 64px;
		padding: 35px;
	}

	.kin-rubrique-guide__titre.kin-rubrique-guide__titre {
		font-size: 32px;
	}

	.kin-rubrique-guide__bouton {
		padding: 22px 0;
		font-size: 14px;
	}

	.kin-rubrique-guide__texte {
		font-size: 14px;
	}

	.kin-rubrique-guide__texte h2 {
		font-size: 24px;
	}

	.kin-rubrique-guide__texte .kin-hm-tableau {
		font-size: 13px;
	}

	.kin-rubrique-guide__texte .kin-hm-tableau :is(th, td) {
		padding-right: 16px;
	}

	.kin-rubrique-boutique.kin-rubrique-boutique {
		grid-template-columns: 1.2fr 1fr;
		gap: 25px;
		padding: 35px;
	}

	.kin-rubrique-boutique__titre br {
		display: inline;
	}
}

/* ---- Dès 801 px ---- */
@media (min-width: 801px) {
	.category .wd-content-layout.container,
	.kin-autrice .wd-content-layout.container {
		padding: 0 28px 50px;
	}

	.kin-rubrique-hero.kin-rubrique-hero {
		grid-template-columns: 1.2fr 1fr;
	}

	.kin-rubrique-hero__copy.kin-rubrique-hero__copy {
		padding: 30px;
	}

	.kin-rubrique-hero__titre .title {
		font-size: 36px;
	}

	.kin-rubrique-hero__chapeau.kin-rubrique-hero__chapeau {
		font-size: 14px;
	}

	.kin-rubrique-hero__liens {
		gap: 25px;
	}

	.kin-rubrique-hero__photo {
		min-height: 340px;
	}

	.kin-rubriques .kin-rubriques__liste a {
		font-size: 12px;
	}

	.kin-rubrique-articles__titre.kin-rubrique-articles__titre {
		font-size: 30px;
	}

	.kin-rubrique-articles .wd-blog-holder.wd-grid-g {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kin-rubrique-articles .wd-post.kin-une > .wd-post-inner {
		grid-template-columns: 1.08fr 1fr;
	}

	.kin-rubrique-articles .wd-post.kin-une .wd-post-content {
		padding: 28px;
	}

	.kin-rubrique-articles.kin-rubrique-articles .post.wd-post.kin-une .wd-entities-title {
		font-size: 29px;
	}

	.kin-une__extrait.kin-une__extrait {
		font-size: 13px;
	}

	.kin-rubrique-articles .wd-post-read-more .kin-read-more {
		gap: 18px;
		font-size: 10px;
	}

	.kin-rubrique-guide.kin-rubrique-guide {
		grid-template-columns: 0.8fr 1.2fr;
		gap: 40px;
	}

	.kin-rubrique-guide__titre br {
		display: inline;
	}

	.kin-rubrique-guide__accroche.kin-rubrique-guide__accroche {
		max-width: 300px;
	}

	.kin-rubrique-boutique.kin-rubrique-boutique {
		gap: 40px;
	}

	.kin-rubrique-boutique__titre.kin-rubrique-boutique__titre {
		font-size: 29px;
	}
}

/* ---- Dès 1101 px ---- */
@media (min-width: 1101px) {
	.category .wd-content-layout.container,
	.kin-autrice .wd-content-layout.container {
		padding: 0 48px 72px;
	}

	.kin-rubrique-hero__copy.kin-rubrique-hero__copy {
		padding: 42px 48px;
	}

	.kin-rubrique-hero__titre .title {
		font-size: clamp(30px, 3.05vw, 44px);
	}

	.kin-rubriques .kin-rubriques__liste {
		gap: 27px;
	}

	.kin-rubrique-articles .wd-blog-holder.wd-grid-g {
		gap: 38px 28px;
	}

	.kin-rubrique-articles .wd-blog-holder > .wd-post.kin-une {
		margin-bottom: 5px;
	}

	.kin-rubrique-articles .wd-post.kin-une .wd-post-content {
		padding: 32px 45px;
	}

	.kin-rubrique-articles.kin-rubrique-articles .post.wd-post.kin-une .wd-entities-title {
		font-size: 32px;
	}

	.kin-rubrique-articles.kin-rubrique-articles .post.wd-post .wd-entities-title {
		font-size: 25px;
	}

	.kin-rubrique-guide.kin-rubrique-guide {
		gap: 65px;
		padding: 42px 48px;
	}

	.kin-rubrique-boutique.kin-rubrique-boutique {
		gap: 65px;
		padding: 36px 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kin-rubrique-guide__bouton > span {
		transition: none;
	}
}

/* Défilement doux vers les ancres de la page (« Parcourir les articles »,
   « Lire le guide »), comme la maquette : en CSS, sans script, et seulement si
   le visiteur n'a pas demandé moins d'animations. Limité aux rubriques. Les
   sections visées gardent 110 px sous l'en-tête collant (`scroll-margin-top`). */
@media (prefers-reduced-motion: no-preference) {
	html:has(body.category),
	html:has(body.kin-autrice) {
		scroll-behavior: smooth;
	}
}

/* ---- Cards of the blog: uniform image band + equal card heights ----
   Woodmart's blog cards size themselves from their content, so the image band
   (.wd-post-thumb) and the cards ended up at wildly different heights
   (measured: 50/216/256px and 148/349/389px). The excerpt and the "Continue
   reading" button are already removed at the source (parts_text/parts_btn),
   which leaves image + meta + title. */

/* Uniform image band on EVERY meta-image card — blog list, category grid,
   related posts and the homepage article carousel all share the same
   `.wd-post.blog-design-meta-image` markup, so one design-based selector styles
   them consistently (no per-location scoping).

   `aspect-ratio` rather than a fixed px height: each column is the same width at
   a given breakpoint, so the bands match exactly and still scale between
   breakpoints. The grey shows only for a post with no featured image AND no
   default (kin_default_listing_thumbnail_id normally supplies one). */
.wd-post.blog-design-meta-image .wd-post-thumb {
	position: relative; /* containing block for the absolutely-filled image */
	aspect-ratio: 16 / 10;
	height: auto;
	overflow: hidden;
	background-color: var(--brdcolor-gray-200, #f2f2f2);
}

/* The featured image is a real <img> wrapped in `.wd-post-img` whose height is
   driven by the image, leaving a grey strip below in the taller 16/10 band.
   Stretch the WRAPPER to fill the band and let the image cover it — scoped to
   `.wd-post-img` so the author avatar (another <img> in the thumb) is untouched. */
.wd-post.blog-design-meta-image .wd-post-img {
	position: absolute;
	inset: 0;
	height: auto;
}

.wd-post.blog-design-meta-image .wd-post-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Equal card heights. Making the card a column lets its inner region fill the
   slide/cell, so 1- and 2-line titles no longer change the card height. In a
   grid the cells already stretch; in a carousel we force the track to stretch
   too (`:has()` scopes it to blog carousels — product/testimonial carousels are
   left alone). */
.wd-post.blog-design-meta-image {
	display: flex;
	flex-direction: column;
}

.wd-post.blog-design-meta-image > .wd-post-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.wd-carousel-wrap:has(.blog-design-meta-image) {
	align-items: stretch;
}

.wd-carousel-wrap:has(.blog-design-meta-image) > .wd-carousel-item {
	display: flex;
	align-items: stretch;
	height: auto;
}

.wd-carousel-wrap:has(.blog-design-meta-image) > .wd-carousel-item > .wd-post {
	width: 100%;
}

/* =========================================================================
   Category archive — lean header + description moved below the post grid
   -------------------------------------------------------------------------
   The full-bleed page-title hero is disabled on categories
   (kin_single_post_layout_options); kin_category_archive_header() reprints a
   breadcrumb + H1 at the top of the loop, and the grid is forced to 3 columns.
   Card design already matches "À lire aussi" (meta-image), styled above.
   ========================================================================= */

/* Header block (breadcrumb + title), same rhythm as the single-article top. */
.kin-archive-head {
	margin: 0 0 1.5rem;
}

.kin-archive__title {
	margin: 0.25rem 0 0;
	font-size: clamp(1.6rem, 4vw, 2.125rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* The category archives no longer use this header: they have their own layout
   since 28/09/2026 (« Rubrique du journal », D-75, above). The description is
   split there between the hero and the guide, so the rules that moved it under
   the grid are gone. */

/* =========================================================================
   "Pendule OUI / NON" interactive tool (ported from the old Kinthia blog)
   -------------------------------------------------------------------------
   Behaviour: functions.php (window.kinPendule). Markup: the post content.
   Scoped under `.kin-article__content` so the legacy generic selectors
   (.lw, .btn-heure, #question…) can't collide with Woodmart. Keyframes are
   prefixed `kin-pdl-*` for the same reason. Pendulum colours kept as the
   original; the button adopts the Kinthia brand colour (fallback = original).
   ========================================================================= */

/* Ask button (#bouton / "Poser une autre question") */
.kin-article__content .btn-heure {
	display: inline-block;
	padding: 18px 20px;
	border: none;
	border-radius: 4px;
	background-color: var(--wd-primary-color, #c73572);
	color: #fff;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.45s ease, background-color 0.45s ease, color 0.45s ease;
}

.kin-article__content .btn-heure.btn-fs-13 {
	font-size: 13px;
}

.kin-article__content .btn-heure:hover,
.kin-article__content .btn-heure:focus-visible {
	background-color: #fff;
	color: var(--wd-primary-color, #c73572);
	box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.15);
	text-decoration: none;
}

.kin-article__content #question {
	display: block;
	width: 100%;
	min-height: 90px;
	margin-bottom: 15px;
}

/* Pendulum visual: a swinging line (#d1 .lw) with a pointer (#d2 .lw-triangle) */
.kin-article__content .lw {
	position: relative;
	height: 170px;
	width: 30px;
	margin: 0 auto;
	padding: 10px;
	background: linear-gradient(to right, transparent 24px, #787878 24px, #8b8b8b 26px, transparent 0);
	transform-origin: top center;
	animation: kin-pdl-inactif 2s ease-in-out infinite alternate;
}

/* The pointer is a CHILD of #d1 (.lw): it must ride its parent's rotation as one
   rigid pendulum. Giving it its OWN animation (as the source did) made it
   over-rotate around a different origin, so its lower half visibly detached from
   the line. No animation here — it swings with #d1. */
.kin-article__content .lw-triangle {
	position: relative;
	top: -10px;
	left: -10px;
	height: 220px;
	width: 0;
	padding: 10px;
	background: linear-gradient(to right, transparent 24px, #787878 24px, #8b8b8b 26px, transparent 0);
	transform-origin: top center;
}

.kin-article__content .lw:after {
	content: "";
	display: block;
	position: absolute;
	left: 2px;
	bottom: -25px;
	width: 45px;
	height: 35px;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	background-image: radial-gradient(at 10px 10px, rgb(91 79 113), rgb(91 79 113));
	filter: drop-shadow(-1px 77px 17px rgba(91, 79, 113, 0.22));
}

.kin-article__content .lw-triangle:after {
	content: "";
	display: block;
	position: absolute;
	left: 2px;
	bottom: -25px;
	width: 45px;
	height: 50px;
	border-style: solid;
	border-width: 22px 22px 0 22px;
	border-color: #5b4f71 transparent transparent transparent;
	filter: drop-shadow(-1px 77px 17px rgba(50, 79, 113, 0.1));
}

.kin-article__content .vlr {
	writing-mode: vertical-lr;
}

.kin-article__content #consulterVoyant {
	display: block;
	margin: 15px 0;
	padding: 25px 10px;
	background-color: #5b4f71;
	color: #fff;
}

/* Prefixed keyframes (global — cannot be scoped). kin-pdl-movetriangle is
   deliberately not defined: the pointer swings with its parent. */
@keyframes kin-pdl-move {
	from { transform: rotateZ(-80deg); }
	to   { transform: rotateZ(80deg); }
}

@keyframes kin-pdl-inactif {
	from { transform: rotateZ(-5deg); }
	to   { transform: rotateZ(5deg); }
}

/* =========================================================================
   "Compatibilité amoureuse" numerology calculator (ported from the old blog)
   -------------------------------------------------------------------------
   Behaviour: assets/js/kin-compat-{fr,en}.js (window.kinCompat). Markup: the
   post content (Bootstrap-like classes). Rather than pull in Bootstrap, a
   minimal flex grid covers the few classes the tool uses, scoped to the article
   body so the legacy generic names can't leak into Woodmart.
   ========================================================================= */
.kin-article__content .row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -15px;
}

.kin-article__content [class*="col-lg-"] {
	width: 100%;
	padding-inline: 15px;
}

@media (min-width: 992px) {
	.kin-article__content .col-lg-6 { width: 50%; }
	.kin-article__content .col-lg-12 { width: 100%; }
}

.kin-article__content .form-group {
	margin-bottom: 1rem;
}

.kin-article__content .input-group.mb-3 {
	margin-bottom: 1rem;
}

.kin-article__content .text-center {
	text-align: center;
}

/* Inputs fill their column (Woodmart styles the rest). */
.kin-article__content #firstName1,
.kin-article__content #firstName2,
.kin-article__content #date1,
.kin-article__content #date2 {
	width: 100%;
}

/* Result block shown after "Calculer". */
.kin-article__content .result-comp {
	margin-top: 1.5rem;
	text-align: left;
}

.kin-article__content .result-title {
	margin-bottom: 0.75rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-gray-900, #242424);
}

.kin-article__content .result-description > *:last-child {
	margin-bottom: 0;
}