/* ==========================================================================
   JR Properties — Rubrique éditoriale « Le blog »
   --------------------------------------------------------------------------
   Chargée UNIQUEMENT sur la landing, les archives et les articles
   (voir jrp_blog_enqueue). Les 11 pages existantes ne reçoivent pas un octet
   de ce fichier.

   ISOLATION. Deux garde-fous, volontairement redondants :
     1. le chargement conditionnel ci-dessus ;
     2. toutes les règles sont portées soit par une classe racine
        (.jr-blog / .jr-article, posées sur #main), soit par le préfixe
        .jr-blog-, qui n'existe nulle part ailleurs dans le thème (vérifié).
   Aucun sélecteur de balise nu. Aucune règle ne peut fuir sur une autre page.

   VALEURS. Rien n'est inventé : tout est repris de custom.css et documenté dans
   blog-tokens.md.
     eucalyptus #33443B · calcaire #F7F4EE · sauge #8B9D77 · sauge claire #C6D6B0
     vert pâle #E7EAE0 · blanc #FFFFFF · encre #2E2E2A · encre atténuée #5F5D56
     Prata = grands titres · Instrument Sans = tout le reste
     rayon carte 16px · rayon bouton 10px · focus 2px sauge, offset 3px
   ========================================================================== */


/* ==========================================================================
   0. CONTENEURS ET LARGEURS DE LECTURE
   --------------------------------------------------------------------------
   Deux largeurs, et la différence est intentionnelle : on ne lit pas une liste
   comme on lit un article. La landing respire à 1240px (trois cartes à l'aise),
   l'article se resserre à 1100px, la largeur déjà retenue pour les pages
   légales, qui est la seule référence de texte long du site.
   ========================================================================== */
.jr-blog { --jr-blog-max: 1240px; }
.jr-article  { --jr-blog-max: 1100px; }

/* Bannière collée au header, corps collé au footer (même traitement que les
   6 gabarits JR). overflow-x: clip = garde anti-débordement du full-bleed. */
.content-area.jr-blog-page,
.content-area.jr-article-page {
	margin-top: 0;
	margin-bottom: 0;
	overflow-x: clip;
}


/* ==========================================================================
   1. BANNIÈRE (.jr-blog-hero) — landing, archives et articles
   --------------------------------------------------------------------------
   Aplat eucalyptus plutôt qu'une photo : la rubrique n'a pas de visuel propre,
   et en inventer un aurait voulu dire ajouter un asset au thème pour un rendu
   qui ne serait pas plus juste. Même parti que la bannière des pages légales.
   ========================================================================== */
.jr-blog-hero {
	background-color: #33443B;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* padding-top généreux : le contenu passe SOUS l'en-tête transparent fixe. */
	padding-top: clamp(8.5rem, 15vh, 12rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	box-sizing: border-box;
}
.jr-blog-hero__inner {
	max-width: var(--jr-blog-max, 1100px);
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2rem);
}
.jr-blog-hero__title {
	margin: 0;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: #F7F4EE;
	max-width: 20ch;
}
.jr-blog-hero__lead {
	max-width: 58ch;
	margin: 1.25rem 0 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.65;
	color: rgba(247, 244, 238, 0.85);
}

/* Le surtitre partagé (.jr-eyebrow) est centré partout ailleurs sur le site.
   Il ne se recale à gauche que DANS LA BANNIÈRE, où le titre l'est aussi.
   Le surtitre du bloc de conversion, lui, reste centré : c'est le même bloc que
   sur la page Propriétaires, il doit avoir exactement le même rendu. */
.jr-blog-hero .jr-eyebrow {
	justify-content: flex-start;
}


/* ==========================================================================
   2. FIL D'ARIANE (.jr-blog-ariane)
   --------------------------------------------------------------------------
   Premier fil d'Ariane du site (SEO-003, action 21). Posé sur fond eucalyptus,
   donc en calcaire atténué, avec la sauge claire #C6D6B0 au survol — la sauge
   standard ne passerait pas le contraste AA sur ce fond.
   ========================================================================== */
.jr-blog-ariane {
	margin: 0 0 1.25rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 13px;
	line-height: 1.5;
}
.jr-blog-ariane__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jr-blog-ariane__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
}
.jr-blog-ariane__link {
	color: rgba(247, 244, 238, 0.72);
	text-decoration: none;
	transition: color 0.25s ease;
}
.jr-blog-ariane__link:hover,
.jr-blog-ariane__link:focus-visible {
	color: #C6D6B0;
	text-decoration: underline;
}
.jr-blog-ariane__sep {
	color: rgba(247, 244, 238, 0.38);
}
.jr-blog-ariane__current {
	color: #F7F4EE;
	font-weight: 600;
	/* Un titre d'article peut être long : on le laisse revenir à la ligne
	   plutôt que de casser la bannière. */
	overflow-wrap: anywhere;
}


/* ==========================================================================
   3. CORPS (.jr-blog-body)
   ========================================================================== */
.jr-blog-body {
	background-color: #F7F4EE;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2rem) clamp(4rem, 8vw, 6rem);
	box-sizing: border-box;
}
.jr-blog-body__inner {
	max-width: var(--jr-blog-max, 1100px);
	margin: 0 auto;
}


/* ==========================================================================
   4. FILTRES PAR THÈME (.jr-blog-filtres)
   --------------------------------------------------------------------------
   De vrais liens vers de vraies archives, présentés en pastilles. L'entrée
   active est pleine (eucalyptus), les autres sont en contour.
   ========================================================================== */
.jr-blog-filtres {
	margin: 0 0 clamp(2rem, 4vw, 2.75rem);
}
.jr-blog-filtres__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jr-blog-filtres__list li {
	margin: 0;
}
.jr-blog-filtre {
	display: inline-block;
	padding: 0.55rem 1.15rem;
	border: 1px solid rgba(51, 68, 59, 0.18);
	border-radius: 999px;
	background-color: transparent;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #33443B;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.jr-blog-filtre:hover {
	background-color: #E7EAE0;
	border-color: rgba(51, 68, 59, 0.28);
}
.jr-blog-filtre.is-active {
	background-color: #33443B;
	border-color: #33443B;
	color: #F7F4EE;
}


/* ==========================================================================
   5. GRILLE (.jr-blog-grid)
   --------------------------------------------------------------------------
   Trois colonnes, puis deux, puis une (voir le bloc responsive). La mise en
   avant occupe toute la largeur de la grille.
   ========================================================================== */
.jr-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 2.5vw, 2.25rem);
	align-items: stretch;
}
.jr-blog-grid__cell {
	display: flex;
	min-width: 0;
}
.jr-blog-grid__cell--une {
	grid-column: 1 / -1;
}


/* ==========================================================================
   6. CARTE D'ARTICLE (.jr-blog-card)
   --------------------------------------------------------------------------
   Reprise stricte des valeurs de .jr-prop__card (cartes de biens de l'accueil) :
   fond calcaire, bordure eucalyptus à 6 %, rayon 16px, ombre douce, léger
   soulèvement au survol, photo qui zoome. Un seul lien, en recouvrement.
   ========================================================================== */
.jr-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #FFFFFF;
	border: 1px solid rgba(51, 68, 59, 0.06);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(46, 46, 42, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.jr-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(46, 46, 42, 0.14);
}
.jr-blog-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
	border-radius: 16px;
	-webkit-tap-highlight-color: transparent;
}
.jr-blog-card__overlay:focus-visible {
	outline: 2px solid #8B9D77;
	outline-offset: 3px;
}

/* Visuel : ratio 16/10 sur la grille, cover, zoom léger au survol. */
.jr-blog-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: #E7EAE0;
}
.jr-blog-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.jr-blog-card:hover .jr-blog-card__media img {
	transform: scale(1.05);
}

.jr-blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: clamp(1.25rem, 2vw, 1.6rem);
}

/* Ligne de méta : thème (sauge, capitales) + temps de lecture (encre atténuée),
   séparés par une pastille. */
.jr-blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.65rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	line-height: 1.3;
}
.jr-blog-card__cat {
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8B9D77;
}
.jr-blog-card__time {
	color: #5F5D56;
}
.jr-blog-card__cat + .jr-blog-card__time::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 0.5rem;
	border-radius: 50%;
	background-color: #5F5D56;
	vertical-align: middle;
}

.jr-blog-card__title {
	margin: 0 0 0.6rem;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	line-height: 1.25;
	color: #33443B;
	/* Prata ne se coupe pas bien : on autorise la césure des mots très longs
	   plutôt que le débordement de la carte. */
	overflow-wrap: anywhere;
}
.jr-blog-card__excerpt {
	margin: 0 0 1.25rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #5F5D56;
}

/* « Lire l'article » : repère visuel, pas un lien (le recouvrement porte le
   vrai lien). Soulignement qui se déploie et flèche qui glisse, comme sur les
   cartes de biens. */
.jr-blog-card__link {
	align-self: flex-start;
	margin-top: auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #33443B;
	text-decoration: none;
}
.jr-blog-card__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1.5px;
	background-color: #33443B;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}
.jr-blog-card:hover .jr-blog-card__link::after,
.jr-blog-card:focus-within .jr-blog-card__link::after {
	transform: scaleX(1);
}
.jr-blog-card__arrow {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}
.jr-blog-card:hover .jr-blog-card__arrow {
	transform: translateX(3px);
}

/* --- Mise en avant : photo à gauche, texte à droite ----------------------- */
.jr-blog-card--une {
	flex-direction: row;
	align-items: stretch;
}
.jr-blog-card--une .jr-blog-card__media {
	flex: 0 0 52%;
	aspect-ratio: auto;
	min-height: 320px;
}
.jr-blog-card--une .jr-blog-card__body {
	justify-content: center;
	padding: clamp(1.75rem, 3.5vw, 3rem);
}
.jr-blog-card--une .jr-blog-card__title {
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	margin-bottom: 0.85rem;
}
.jr-blog-card--une .jr-blog-card__excerpt {
	font-size: 16px;
}

/* --- Repli sans image à la une --------------------------------------------
   Le repli est un <picture>, et c'est ce qui rend le dimensionnement piégeux :
   sans display explicite, <picture> reste un élément EN LIGNE. Une largeur en
   pourcentage posée sur l'<img> se calcule alors sur une boîte dont la largeur
   dépend de l'image elle-même. Mesuré sur l'article de test à 380px : emblème
   rendu à 29px de large au lieu des 68 attendus, donc quasiment invisible sur
   l'aplat eucalyptus.

   On donne donc une enveloppe qui remplit réellement la tuile, et on dimensionne
   l'emblème en HAUTEUR — la seule dimension stable quand la tuile a un ratio
   imposé. */
.jr-blog-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #33443B;
}
.jr-blog-ph picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
/* Sélecteur volontairement porté à trois éléments (.classe + picture + img) :
   .jr-blog-ph img et .jr-blog-card__media img / .jr-article-cover img ont la
   MÊME spécificité (0,1,1), et l'ordre du fichier décidait donc du gagnant —
   ce qui a effectivement produit un emblème étiré sur toute la largeur de la
   tuile. On sort de l'égalité au lieu de dépendre de l'ordre des sections. */
.jr-blog-ph picture img {
	width: auto;
	height: 48%;
	max-height: 110px;
	aspect-ratio: auto;
	object-fit: contain;
	opacity: 0.9;
}


/* ==========================================================================
   7. ÉTAT VIDE (.jr-blog-empty)
   ========================================================================== */
.jr-blog-empty {
	background-color: #FFFFFF;
	border: 1px solid rgba(51, 68, 59, 0.06);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.06);
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	font-family: "Instrument Sans", sans-serif;
}
.jr-blog-empty__title {
	margin: 0 0 0.85rem;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.25;
	color: #33443B;
}
.jr-blog-empty__text {
	max-width: 56ch;
	margin: 0 auto 1.75rem;
	font-size: 16px;
	line-height: 1.7;
	color: #5F5D56;
}
.jr-blog-empty__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.75rem;
	margin: 0;
}
.jr-blog-empty__links a {
	font-size: 15px;
	font-weight: 600;
	color: #33443B;
	text-decoration: none;
	border-bottom: 1.5px solid #8B9D77;
	padding-bottom: 2px;
	transition: color 0.25s ease;
}
.jr-blog-empty__links a:hover,
.jr-blog-empty__links a:focus-visible {
	color: #8B9D77;
}


/* ==========================================================================
   8. RENVOIS DE MAILLAGE (.jr-blog-faq, .jr-article-metier)
   ========================================================================== */
.jr-blog-faq,
.jr-article-metier {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
	border-left: 3px solid #8B9D77;
	background-color: #E7EAE0;
	border-radius: 0 12px 12px 0;
}
.jr-blog-faq p,
.jr-article-metier p {
	margin: 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: #2E2E2A;
}
.jr-blog-faq a,
.jr-article-metier a {
	font-weight: 600;
	color: #33443B;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: #8B9D77;
	transition: color 0.25s ease;
}
.jr-blog-faq a:hover,
.jr-blog-faq a:focus-visible,
.jr-article-metier a:hover,
.jr-article-metier a:focus-visible {
	color: #8B9D77;
}


/* ==========================================================================
   9. PAGINATION (.jr-blog-pagination)
   ========================================================================== */
.jr-blog-pagination {
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}
.jr-blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}
.jr-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.9rem;
	border: 1px solid rgba(51, 68, 59, 0.18);
	border-radius: 10px;
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #33443B;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.jr-blog-pagination a.page-numbers:hover {
	background-color: #E7EAE0;
	border-color: rgba(51, 68, 59, 0.28);
}
.jr-blog-pagination .page-numbers.current {
	background-color: #33443B;
	border-color: #33443B;
	color: #F7F4EE;
}
.jr-blog-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding: 0 0.25rem;
	color: #5F5D56;
}


/* ==========================================================================
   10. ARTICLE — MÉTA ET IMAGE À LA UNE
   ========================================================================== */
.jr-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.4rem;
	margin: 1.5rem 0 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(247, 244, 238, 0.72);
}
.jr-article-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.jr-article-meta__item + .jr-article-meta__item::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: rgba(247, 244, 238, 0.45);
}

.jr-article-cover {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	border-radius: 16px;
	overflow: hidden;
	background-color: #E7EAE0;
	box-shadow: 0 14px 38px rgba(46, 46, 42, 0.12);
}
.jr-article-cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* Le repli emblème n'a pas de ratio propre : on le lui impose. L'emblème y est
   un peu plus grand que sur une carte, la tuile étant beaucoup plus large. */
.jr-article-cover .jr-blog-ph {
	aspect-ratio: 16 / 9;
}
.jr-article-cover .jr-blog-ph picture img {
	width: auto;
	height: 44%;
	max-height: 150px;
}
.jr-article-cover__caption {
	padding: 0.75rem clamp(1rem, 2vw, 1.5rem);
	background-color: #FFFFFF;
	font-family: "Instrument Sans", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #5F5D56;
	text-align: center;
}


/* ==========================================================================
   11. ARTICLE — COLONNES ET SOMMAIRE
   --------------------------------------------------------------------------
   Même grille que les pages légales : sommaire sticky à gauche (28 %), contenu
   dans une carte blanche à droite (72 %). Un article de moins de 4 H2 n'a pas
   de sommaire : la carte prend alors toute la largeur.
   ========================================================================== */
.jr-article-cols {
	display: grid;
	grid-template-columns: minmax(0, 28fr) minmax(0, 72fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.jr-article-cols--seule {
	grid-template-columns: minmax(0, 1fr);
}
.jr-article-toc-wrap {
	position: sticky;
	top: 120px;
}
.jr-article-toc__label {
	margin: 0 0 1rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8B9D77;
}
.jr-article-toc {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	border-left: 2px solid #E7EAE0;
	padding-left: 1rem;
}
.jr-article-toc__link {
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #5F5D56;
	text-decoration: none;
	transition: color 0.25s ease;
}
.jr-article-toc__link:hover,
.jr-article-toc__link:focus-visible {
	color: #33443B;
}
.jr-article-toc__link.is-active {
	color: #33443B;
	font-weight: 600;
}


/* ==========================================================================
   12. ARTICLE — CONTENU RÉDACTIONNEL (.jr-article-content)
   --------------------------------------------------------------------------
   Les valeurs de base (carte blanche, H2 Prata, H3 Instrument Sans 600,
   paragraphes, listes, liens sauge) sont celles de .jr-legal-content, seul
   gabarit de texte long éprouvé du site. Ce qu'un article a en plus et qu'une
   page légale n'avait pas : citation, tableau, image légendée, H4.
   ========================================================================== */
.jr-article-content {
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.06);
	padding: clamp(1.75rem, 4vw, 3rem);
	font-family: "Instrument Sans", sans-serif;
	font-size: 17px;
	color: #2E2E2A;
	line-height: 1.75;
}
.jr-article-content > *:first-child {
	margin-top: 0;
}
.jr-article-content > *:last-child {
	margin-bottom: 0;
}

/* --- Titres ---------------------------------------------------------------
   scroll-margin-top : sans lui, un clic dans le sommaire amène le titre juste
   sous l'en-tête fixe, où il est invisible. */
.jr-article-content h2 {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	line-height: 1.25;
	color: #33443B;
	margin: 2.5rem 0 1rem;
	scroll-margin-top: 110px;
}
/* Cible d'ancre : après un clic dans le sommaire, le focus est déplacé sur le
   titre pour que la tabulation reparte du bon endroit. On garde donc un
   indicateur visible, à la convention du site, plutôt que de l'effacer. */
.jr-article-content h2:focus-visible {
	outline: 2px solid #8B9D77;
	outline-offset: 4px;
	border-radius: 4px;
}
.jr-article-content h3 {
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.4;
	color: #33443B;
	margin: 1.75rem 0 0.6rem;
	scroll-margin-top: 110px;
}
.jr-article-content h4 {
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	color: #2E2E2A;
	margin: 1.5rem 0 0.5rem;
}

/* --- Texte courant --------------------------------------------------------- */
.jr-article-content p {
	margin: 0 0 1.1rem;
}
.jr-article-content strong {
	font-weight: 600;
	color: #2E2E2A;
}
.jr-article-content a {
	color: #8B9D77;
	text-decoration: none;
	transition: color 0.2s ease;
}
.jr-article-content a:hover,
.jr-article-content a:focus-visible {
	text-decoration: underline;
}

/* --- Listes ---------------------------------------------------------------- */
.jr-article-content ul,
.jr-article-content ol {
	margin: 0 0 1.2rem;
	padding-left: 1.35rem;
}
.jr-article-content li {
	margin: 0 0 0.5rem;
}
.jr-article-content li::marker {
	color: #8B9D77;
}

/* --- Citation --------------------------------------------------------------
   Prata, filet sauge à gauche. Pas d'italique : Prata n'a qu'un seul fichier,
   le navigateur en fabriquerait une fausse. */
.jr-article-content blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem clamp(1rem, 2.5vw, 1.6rem);
	border-left: 3px solid #8B9D77;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.1rem, 1.9vw, 1.3rem);
	line-height: 1.5;
	color: #33443B;
}
.jr-article-content blockquote p {
	margin: 0 0 0.6rem;
}
.jr-article-content blockquote p:last-child {
	margin-bottom: 0;
}
.jr-article-content blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: "Instrument Sans", sans-serif;
	font-style: normal;
	font-size: 14px;
	font-weight: 600;
	color: #5F5D56;
}

/* --- Tableau ---------------------------------------------------------------
   L'éditeur de blocs enveloppe les tableaux dans <figure class="wp-block-table"> :
   c'est ce conteneur qui porte le défilement horizontal. Un tableau large ne
   fait donc jamais déborder la page, y compris à 380px. */
.jr-article-content .wp-block-table {
	margin: 2rem 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.jr-article-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}
.jr-article-content th,
.jr-article-content td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #E7EAE0;
}
.jr-article-content th {
	background-color: #E7EAE0;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #33443B;
	border-bottom-color: rgba(51, 68, 59, 0.18);
	white-space: nowrap;
}
.jr-article-content tbody tr:last-child td {
	border-bottom: none;
}
.jr-article-content .wp-block-table figcaption {
	margin-top: 0.65rem;
	font-size: 13px;
	line-height: 1.5;
	color: #5F5D56;
}

/* --- Images et légendes ----------------------------------------------------- */
.jr-article-content figure {
	margin: 2rem 0;
}
.jr-article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}
.jr-article-content figcaption {
	margin-top: 0.65rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #5F5D56;
	text-align: center;
}

/* --- Divers ----------------------------------------------------------------- */
.jr-article-content hr {
	margin: 2.5rem 0;
	border: none;
	border-top: 1px solid #E7EAE0;
}
.jr-article-content code {
	padding: 0.15em 0.4em;
	border-radius: 4px;
	background-color: #E7EAE0;
	font-size: 0.9em;
}
.jr-article-content pre {
	margin: 2rem 0;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	background-color: #E7EAE0;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
}


/* ==========================================================================
   13. ARTICLES LIÉS (.jr-article-lies)
   ========================================================================== */
.jr-article-lies {
	background-color: #E7EAE0;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2rem);
	box-sizing: border-box;
}
.jr-article-lies__inner {
	max-width: var(--jr-blog-max, 1100px);
	margin: 0 auto;
}
.jr-article-lies__title {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	color: #33443B;
}
/* Les articles liés sont toujours 3 au maximum : la grille reste à 3 colonnes
   même si le contenu principal, lui, est à 1100px. */
.jr-article-lies .jr-blog-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* ==========================================================================
   14. FOCUS CLAVIER
   --------------------------------------------------------------------------
   Kadence pose « hide-focus-outline » sur le <body> : aucun composant du site
   ne s'y fie, chacun redéclare son focus. On fait pareil, avec la convention
   du site (2px sauge, offset 3px), et en sauge claire sur fond eucalyptus.
   ========================================================================== */
.jr-blog a:focus-visible,
.jr-blog button:focus-visible,
.jr-article a:focus-visible,
.jr-article button:focus-visible {
	outline: 2px solid #8B9D77;
	outline-offset: 3px;
	border-radius: 4px;
}
.jr-blog-hero a:focus-visible {
	outline-color: #C6D6B0;
}
.jr-blog-cta-section a:focus-visible {
	outline-color: #C6D6B0;
}


/* ==========================================================================
   15. RESPONSIVE
   --------------------------------------------------------------------------
   Trois bascules, calées sur les seuils déjà employés par custom.css :
   1024px (3 colonnes -> 2), 900px (colonnes d'article -> 1, mise en avant
   empilée), 767px (grille -> 1 colonne, seuil du pack mobile). Le dernier
   bloc traite le cas des très petits écrans, jusqu'à 380px.
   ========================================================================== */

@media (max-width: 1024px) {
	.jr-blog-grid,
	.jr-article-lies .jr-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	/* Article : une seule colonne, sommaire au-dessus du contenu et non plus
	   collant — exactement le comportement des pages légales. */
	.jr-article-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.5rem, 5vw, 2.5rem);
	}
	.jr-article-toc-wrap {
		position: static;
		top: auto;
	}

	/* Mise en avant : photo au-dessus, texte en dessous. */
	.jr-blog-card--une {
		flex-direction: column;
	}
	.jr-blog-card--une .jr-blog-card__media {
		flex: 0 0 auto;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.jr-blog-grid,
	.jr-article-lies .jr-blog-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Bannière : le titre n'a plus besoin d'être bridé en largeur. */
	.jr-blog-hero__title {
		max-width: none;
	}

	/* Filtres : bande défilante plutôt que retour à la ligne, pour que la
	   barre reste sur une seule ligne et ne repousse pas les articles. */
	.jr-blog-filtres__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 0.35rem;
		scroll-snap-type: x proximity;
	}
	.jr-blog-filtres__list::-webkit-scrollbar {
		display: none;
	}
	.jr-blog-filtres__list li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
	/* Zone tactile confortable, cohérente avec le pack mobile (48px). */
	.jr-blog-filtre {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

@media (max-width: 480px) {
	/* Carte de contenu et cartes d'article : on récupère de la largeur utile
	   en resserrant les paddings intérieurs. La lisibilité prime sur la marge. */
	.jr-article-content {
		padding: 1.25rem 1.1rem;
		font-size: 16px;
	}
	.jr-blog-card__body {
		padding: 1.1rem;
	}
	.jr-blog-empty {
		padding: 1.5rem 1.1rem;
	}
	.jr-blog-faq,
	.jr-article-metier {
		padding: 1rem 1.1rem;
	}
	/* Un tableau à 380px ne tient pas : il défile dans son conteneur, et on le
	   signale par une ombre de bord plutôt que de laisser croire qu'il est
	   complet. */
	.jr-article-content .wp-block-table {
		background:
			linear-gradient(to right, #FFFFFF 30%, rgba(255, 255, 255, 0)),
			linear-gradient(to left, #FFFFFF 30%, rgba(255, 255, 255, 0)) 100% 0,
			radial-gradient(farthest-side at 0 50%, rgba(46, 46, 42, 0.12), rgba(46, 46, 42, 0)),
			radial-gradient(farthest-side at 100% 50%, rgba(46, 46, 42, 0.12), rgba(46, 46, 42, 0)) 100% 0;
		background-repeat: no-repeat;
		background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
		background-attachment: local, local, scroll, scroll;
	}
	.jr-article-content th,
	.jr-article-content td {
		padding: 0.6rem 0.75rem;
	}
	/* Fil d'Ariane : sur un titre d'article long, les 4 échelons prennent trois
	   lignes. On masque l'échelon courant, redondant avec le H1 juste dessous.
	   Le séparateur de l'échelon PRÉCÉDENT doit disparaître avec lui, sinon il
	   reste une barre oblique orpheline en fin de ligne — constaté sur l'article
	   de test. */
	.jr-article .jr-blog-ariane__item:last-child {
		display: none;
	}
	.jr-article .jr-blog-ariane__item:nth-last-child(2) .jr-blog-ariane__sep {
		display: none;
	}
}


/* ==========================================================================
   16. MOUVEMENT RÉDUIT
   --------------------------------------------------------------------------
   Le moteur d'animation (about.js) ne pose aucun état caché en mouvement
   réduit : il n'y a donc rien à neutraliser de ce côté. Restent les
   transitions propres à cette feuille (survols, zoom de photo), qu'on coupe.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.jr-blog-card,
	.jr-blog-card__media img,
	.jr-blog-card__link::after,
	.jr-blog-card__arrow,
	.jr-blog-filtre,
	.jr-blog-pagination .page-numbers,
	.jr-blog-ariane__link,
	.jr-article-toc__link,
	.jr-blog-faq a,
	.jr-article-metier a,
	.jr-article-content a {
		transition: none;
	}
	.jr-blog-card:hover {
		transform: none;
	}
	.jr-blog-card:hover .jr-blog-card__media img {
		transform: none;
	}
	.jr-blog-card:hover .jr-blog-card__arrow {
		transform: none;
	}
	.jr-blog-card:hover .jr-blog-card__link::after,
	.jr-blog-card:focus-within .jr-blog-card__link::after {
		transform: scaleX(1);
	}
}