/*
Theme Name: Repère Patient
Theme URI: https://erreur-medicale.com/
Description: Thème enfant de GeneratePress pour Repère Patient, média documentaire sur les droits du patient et le parcours d'indemnisation après un accident médical. Polices auto-hébergées, aucune requête vers un service tiers.
Author: Repère Patient
Template: generatepress
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: repere-patient
*/

/* =========================================================================
   1. Variables de marque
   ========================================================================= */

:root {
	--rp-encre:  #1E2F52; /* dominante : titres, en-tête, pied de page */
	--rp-brique: #A64B3A; /* accent : liens et boutons UNIQUEMENT */
	--rp-ivoire: #FAFAF8; /* fond de page */
	--rp-plomb:  #4A4F58; /* texte courant */

	--rp-largeur-contenu: 52rem;
	--rp-police-titre: 'Source Serif 4', Cambria, 'Times New Roman', Times, serif;
	--rp-police-corps: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   2. Base : fond, texte courant, mesure de lecture
   ========================================================================= */

body {
	background-color: var(--rp-ivoire);
	color: var(--rp-plomb);
	font-family: var(--rp-police-corps);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* Largeur de contenu. GeneratePress pose .grid-container { max-width: 1200px }
   en CSS inline rattaché au handle « generate-style » ; cette feuille est
   chargée après, elle l'emporte à spécificité égale. */
.grid-container {
	max-width: var(--rp-largeur-contenu);
}

.entry-content > * {
	max-width: 100%;
}

/* =========================================================================
   3. Titres
   ========================================================================= */

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.widget-title {
	font-family: var(--rp-police-titre);
	font-weight: 600;
	color: var(--rp-encre);
	line-height: 1.25;
}

.entry-title a,
.entry-title a:visited {
	color: var(--rp-encre);
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--rp-brique);
}

/* =========================================================================
   4. Liens : brique et soulignés dans le corps de texte
   ========================================================================= */

a {
	color: var(--rp-brique);
}

.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a,
.rp-sources a {
	color: var(--rp-brique);
	text-decoration: underline;
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.16em;
}

.entry-content a:hover,
.entry-content a:focus,
.rp-sources a:hover,
.rp-sources a:focus {
	color: var(--rp-encre);
	text-decoration-thickness: 0.12em;
}

/* Les boutons ne sont pas soulignés, mais restent en brique.
   Le noyau WordPress pose :root :where(.wp-element-button){background:#32373c},
   de spécificité (0,1,0) : un sélecteur d'élément simple perd. On repasse donc
   par :root pour rester au-dessus sans recourir à !important. Les sélecteurs
   d'élément sont cantonnés à #page, pour ne pas déborder sur la barre
   d'administration ni sur les bandeaux d'extensions. */
:root .wp-element-button,
:root .wp-block-button__link,
:root .wp-block-search__button,
:root .button,
:root #page button,
:root #page input[type="button"],
:root #page input[type="reset"],
:root #page input[type="submit"] {
	background-color: var(--rp-brique);
	color: var(--rp-ivoire);
	text-decoration: none;
	border: 0;
}

:root .wp-element-button:hover,
:root .wp-element-button:focus,
:root .wp-block-button__link:hover,
:root .wp-block-button__link:focus,
:root .wp-block-search__button:hover,
:root .wp-block-search__button:focus,
:root .button:hover,
:root .button:focus,
:root #page button:hover,
:root #page button:focus,
:root #page input[type="button"]:hover,
:root #page input[type="reset"]:hover,
:root #page input[type="submit"]:hover,
:root #page input[type="submit"]:focus {
	background-color: var(--rp-encre);
	color: var(--rp-ivoire);
	text-decoration: none;
}

/* Accessibilité : le focus doit rester visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--rp-brique);
	outline-offset: 2px;
}

/* =========================================================================
   5. En-tête et bloc de marque
   ========================================================================= */

.site-header {
	background-color: var(--rp-ivoire);
	border-bottom: 1px solid rgba(30, 47, 82, 0.12);
}

.rp-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}

.rp-brand:hover,
.rp-brand:focus {
	text-decoration: none;
}

.rp-brand-mark {
	display: block;
	flex: 0 0 auto;
}

.rp-brand-mark svg {
	display: block;
	height: 34px;
	width: auto;
}

.rp-wordmark {
	font-family: var(--rp-police-corps);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.1;
	color: var(--rp-plomb);
	white-space: nowrap;
}

.rp-wordmark strong {
	font-family: var(--rp-police-titre);
	font-weight: 600;
	color: var(--rp-encre);
}

/* =========================================================================
   6. Pied de page
   ========================================================================= */

.site-footer {
	background-color: var(--rp-encre);
	color: var(--rp-ivoire);
}

.site-footer a,
.site-footer a:visited {
	color: var(--rp-ivoire);
	text-decoration: underline;
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.16em;
}

.site-footer a:hover,
.site-footer a:focus {
	color: #FFFFFF;
}

/* =========================================================================
   7. Motifs réutilisables (dossier patterns/)
   ========================================================================= */

.rp-sources {
	background-color: var(--rp-ivoire);
	border-left: 3px solid var(--rp-brique);
	padding: 20px;
}

.rp-sources > h3,
.rp-sources h3 {
	font-family: var(--rp-police-titre);
	font-weight: 600;
	color: var(--rp-encre);
	margin-top: 0;
}

.rp-sources ul {
	margin-bottom: 0;
}

.rp-avertissement {
	background-color: #FFFFFF;
	border: 1px solid var(--rp-plomb);
	padding: 16px 20px;
	font-size: 15px;
	line-height: 1.6;
}

.rp-avertissement p {
	margin: 0;
	font-size: 15px;
}

/* Réponse courte, placée juste après le chapô. */
.rp-reponse {
	background-color: #F2F2ED; /* repli si color-mix n'est pas supporté */
	background-color: color-mix(in srgb, var(--rp-ivoire) 94%, var(--rp-encre));
	border-left: 3px solid var(--rp-brique);
	padding: 20px;
}

.rp-reponse p {
	margin: 0;
	font-size: 19px;
	line-height: 1.6;
}

/* Intitulé « En pratique ». C'est un simple libellé, pas un titre de document :
   il reste un paragraphe pour ne pas entrer dans la hiérarchie des titres ni
   dans le sommaire automatique. */
.rp-reponse .rp-reponse-titre {
	font-family: var(--rp-police-titre);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	color: var(--rp-encre);
	margin: 0 0 0.5em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Tableau à trois colonnes. */
.rp-tableau {
	overflow-x: auto; /* défilement horizontal sur mobile */
}

.rp-tableau table {
	width: 100%;
	min-width: 32rem; /* en deçà, le tableau défile au lieu de s'écraser */
	border-collapse: collapse;
}

.rp-tableau th,
.rp-tableau td {
	border: 1px solid rgba(74, 79, 88, 0.2); /* var(--rp-plomb) à 20 % */
	border: 1px solid color-mix(in srgb, var(--rp-plomb) 20%, transparent);
	padding: 0.6em 0.8em;
	text-align: left;
	vertical-align: top;
}

.rp-tableau thead th {
	background-color: var(--rp-encre);
	color: var(--rp-ivoire);
	font-family: var(--rp-police-titre);
	font-weight: 600;
}

.rp-tableau tbody tr:nth-child(even) {
	background-color: #F2F2ED;
	background-color: color-mix(in srgb, var(--rp-ivoire) 94%, var(--rp-encre));
}

/* =========================================================================
   8. Date de mise à jour, sur la ligne de signature
   ========================================================================= */

/* La ligne de méta d'en-tête ne porte plus que la signature et cette date :
   la date native de GeneratePress est retirée côté PHP pour ne pas en
   afficher deux. */
.entry-header .entry-meta {
	font-size: 15px;
	color: var(--rp-plomb);
}

.entry-header .entry-meta .rp-maj {
	font-size: 15px;
	color: var(--rp-plomb);
}

.entry-header .entry-meta .rp-maj::before {
	content: "·";
	margin: 0 0.5em;
}

/* =========================================================================
   9. Sommaire automatique
   ========================================================================= */

.rp-sommaire {
	background-color: #F2F2ED;
	background-color: color-mix(in srgb, var(--rp-ivoire) 94%, var(--rp-encre));
	border: 1px solid rgba(74, 79, 88, 0.2);
	border: 1px solid color-mix(in srgb, var(--rp-plomb) 20%, transparent);
	padding: 20px;
	margin: 0 0 2em;
}

.rp-sommaire-titre {
	font-family: var(--rp-police-titre);
	font-weight: 600;
	font-size: 19px;
	color: var(--rp-encre);
	margin: 0 0 0.6em;
}

.rp-sommaire ol {
	margin: 0;
	padding-left: 1.4em;
}

.rp-sommaire li {
	margin-bottom: 0.3em;
}

.rp-sommaire a {
	color: var(--rp-brique);
	text-decoration: underline;
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.16em;
}

/* ---------------------------------------------------------------------------
   4. Page d'accueil et pied de page de contenu
   Les blocs sont des blocs natifs ; la mise en forme est portée ici, par des
   classes, pour que la palette reste définie à un seul endroit.
   --------------------------------------------------------------------------- */

/* GeneratePress rend les blocs .alignfull avec max-width: 100vw. Le conteneur
   #page est limité à la largeur de lecture : il rognerait le bandeau au tiers
   de la page. Le rognage est donc porté par la racine et par le corps, ce qui
   laisse le bandeau aller d'un bord à l'autre tout en absorbant les quelques
   pixels que 100vw ajoute lorsque la barre de défilement verticale est
   présente. overflow-x: clip ne crée pas de conteneur de défilement,
   contrairement à overflow: hidden. */
html,
body {
	overflow-x: clip;
}

.rp-bandeau {
	background-color: var(--rp-encre);
	color: var(--rp-ivoire);
	padding: 3.5rem 0 3rem;
	margin-bottom: 3rem;
}

.rp-bandeau > * {
	max-width: calc(var(--rp-largeur-contenu) + 40px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

.rp-bandeau h1 {
	color: var(--rp-ivoire);
	margin: 0 0 0.6rem;
	font-size: 2.6rem;
	line-height: 1.15;
}

.rp-baseline {
	font-family: var(--rp-police-titre);
	font-size: 1.3rem;
	line-height: 1.4;
	margin: 0 0 1.75rem;
	color: var(--rp-ivoire);
}

.rp-bandeau p:last-child {
	margin-bottom: 0;
	color: var(--rp-ivoire);
	opacity: 0.88;
}

/* Cartes des trois piliers. Le fond ivoire demandé est celui du corps de page :
   un filet fin sur les trois autres côtés garde la carte visible. */
.rp-piliers {
	margin-bottom: 3rem;
}

.rp-piliers .wp-block-column {
	background-color: var(--rp-ivoire);
	border: 1px solid rgba(74, 79, 88, 0.16);
	border-left: 3px solid var(--rp-brique);
	padding: 1.25rem 1.25rem 1.1rem;
}

.rp-piliers h3 {
	margin-top: 0;
	margin-bottom: 0.6rem;
	font-size: 1.05rem;
	line-height: 1.35;
}

.rp-piliers h3 a {
	text-decoration: none;
	background-image: none;
}

.rp-piliers h3 a:hover,
.rp-piliers h3 a:focus {
	text-decoration: underline;
}

.rp-piliers p:last-child {
	margin-bottom: 0;
	font-size: 0.95rem;
}

/* Les cinq entrées du site */
.rp-entrees {
	list-style: none;
	margin: 0 0 3rem;
	padding: 0;
}

.rp-entrees li {
	border-top: 1px solid rgba(74, 79, 88, 0.16);
	padding: 0.9rem 0;
	line-height: 1.55;
}

.rp-entrees li:last-child {
	border-bottom: 1px solid rgba(74, 79, 88, 0.16);
}

.rp-entrees a {
	font-family: var(--rp-police-titre);
	font-weight: 600;
	text-decoration: none;
	background-image: none;
}

.rp-entrees a:hover,
.rp-entrees a:focus {
	text-decoration: underline;
}

/* Publications récentes */
.rp-recents .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rp-recents .wp-block-post {
	border-top: 1px solid rgba(74, 79, 88, 0.16);
	padding: 0.9rem 0;
}

.rp-recents .wp-block-post:last-child {
	border-bottom: 1px solid rgba(74, 79, 88, 0.16);
}

.rp-recents .wp-block-post-title {
	margin: 0 0 0.2rem;
	font-size: 1.05rem;
	line-height: 1.35;
}

.rp-recents .wp-block-post-title a {
	text-decoration: none;
	background-image: none;
}

.rp-recents .wp-block-post-title a:hover,
.rp-recents .wp-block-post-title a:focus {
	text-decoration: underline;
}

.rp-recents .wp-block-post-date {
	margin: 0;
	font-size: 0.85rem;
	color: var(--rp-plomb);
}

.rp-recents {
	margin-bottom: 3rem;
}

/* Bloc « Qui écrit ce site » : plomb à faible opacité */
.rp-methode {
	background-color: rgba(74, 79, 88, 0.07);
	border-left: 3px solid rgba(74, 79, 88, 0.3);
	padding: 1.75rem 1.5rem 1.5rem;
	margin: 0 0 1rem;
}

.rp-methode h2 {
	margin-top: 0;
	font-size: 1.25rem;
}

.rp-methode p:last-child {
	margin-bottom: 0;
}

/* Pied de page à trois colonnes, rendu par les zones de widgets du thème */
.site-footer .footer-widgets {
	background-color: var(--rp-encre);
	color: var(--rp-ivoire);
	padding: 3rem 0 2rem;
}

.site-footer .footer-widgets .widget-title,
.rp-pied-titre {
	font-family: var(--rp-police-titre);
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rp-ivoire);
	margin: 0 0 0.9rem;
}

.rp-pied-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rp-pied-liste li {
	margin-bottom: 0.45rem;
	font-size: 0.95rem;
	line-height: 1.45;
}

.site-footer .footer-widgets a,
.site-footer .footer-widgets a:visited {
	color: var(--rp-ivoire);
	text-decoration: none;
	background-image: none;
}

.site-footer .footer-widgets a:hover,
.site-footer .footer-widgets a:focus {
	text-decoration: underline;
}

/* Page Contact : mention placée au-dessus du formulaire */
.rp-mention-formulaire {
	background-color: rgba(166, 75, 58, 0.07);
	border-left: 3px solid var(--rp-brique);
	padding: 1.1rem 1.25rem;
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 2rem;
}

/* Formulaire Contact Form 7 */
.wpcf7 label {
	display: block;
	font-weight: 600;
	margin-bottom: 1.25rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 0.35rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid rgba(74, 79, 88, 0.4);
	background-color: #fff;
	font-family: var(--rp-police-corps);
	font-size: 1rem;
	font-weight: 400;
	color: var(--rp-plomb);
}

.wpcf7 textarea {
	min-height: 12rem;
}

.wpcf7 .wpcf7-acceptance label {
	font-weight: 400;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.95rem;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.wpcf7 .wpcf7-list-item {
	margin: 0;
}

/* Champ leurre du formulaire de contact. Il est retiré du flux et placé hors
   de l'écran plutôt que masqué par display: none, que certains robots savent
   reconnaître. Il n'est atteignable ni au clavier ni par un lecteur d'écran :
   seul un robot le remplit, et se signale. */
.rp-verif {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Champs à compléter par le propriétaire du site */
.rp-a-remplir {
	font-family: var(--rp-police-corps);
	background-color: rgba(166, 75, 58, 0.1);
	padding: 0.1em 0.35em;
}

/* Petits écrans */
@media (max-width: 768px) {
	.rp-bandeau {
		padding: 2.5rem 0 2.25rem;
		margin-bottom: 2.25rem;
	}

	.rp-bandeau h1 {
		font-size: 2rem;
	}

	.rp-baseline {
		font-size: 1.1rem;
	}

	.rp-methode {
		padding: 1.25rem 1.1rem 1.1rem;
	}
}

/* En-tête : la marque à gauche, les entrées en pastilles à droite, un filet
   brique en bas. Le conteneur n'est plus limité à la largeur de lecture : il
   occupe la fenêtre, avec une marge latérale qui suit l'écran. Le pied de page
   reçoit la même marge, pour que les deux s'alignent sur les mêmes bords. */
.site-header {
	border-bottom: 2px solid var(--rp-brique);
}

.site-header .inside-header {
	max-width: none;
	padding: 1.85rem clamp(1.25rem, 5vw, 4.5rem);
}

.site-header .site-branding-container {
	flex: 0 0 auto;
	padding: 0;
}

.site-header .main-navigation {
	background-color: transparent;
}

.site-header .main-navigation .inside-navigation {
	max-width: none;
	padding: 0;
}

.site-footer .footer-widgets-container,
.site-footer .inside-site-info {
	max-width: none;
	padding-left: clamp(1.25rem, 5vw, 4.5rem);
	padding-right: clamp(1.25rem, 5vw, 4.5rem);
}

/* Menu à bouton. La navigation dépliée doit occuper toute la largeur sous la
   marque : sans cela, la disposition en ligne de l'en-tête la comprime. */
@media (max-width: 768px) {
	.site-header .inside-header {
		flex-wrap: wrap;
		row-gap: 0.75rem;
		padding-top: 1.35rem;
		padding-bottom: 1.35rem;
	}

	.site-header .main-navigation {
		flex: 0 0 auto;
		width: auto;
		margin-left: auto;
	}

	.site-header .main-navigation .menu-toggle {
		width: auto;
		padding-left: 0.6rem;
		padding-right: 0.6rem;
	}

	/* Déplié, le menu prend toute la largeur sous la marque. */
	.site-header .main-navigation.toggled {
		flex: 1 1 100%;
		width: 100%;
		margin-left: 0;
	}
}

/* Navigation déployée : les entrées prennent la forme de pastilles. */
@media (min-width: 769px) {
	.site-header .inside-header {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		column-gap: 2rem;
	}

	.site-header .main-navigation {
		flex: 0 1 auto;
		min-width: 0;
		margin-left: auto;
	}

	.main-navigation .main-nav > ul {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0.45rem;
	}

	.main-navigation .main-nav ul li a {
		padding: 0.6rem 0.95rem;
		line-height: 1;
		font-size: 0.7rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		border-radius: 999px;
		background-color: rgba(30, 47, 82, 0.06);
		color: var(--rp-encre);
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.main-navigation .main-nav ul li a:hover,
	.main-navigation .main-nav ul li a:focus {
		background-color: rgba(166, 75, 58, 0.12);
		color: var(--rp-brique);
	}

	.main-navigation .main-nav ul li.current-menu-item > a,
	.main-navigation .main-nav ul li.current_page_item > a {
		background-color: var(--rp-encre);
		color: var(--rp-ivoire);
	}
}

/* Entre le menu à bouton et l'écran large, les six pastilles ne tiennent plus
   à droite de la marque : elles passent sous elle, sur toute la largeur, ce
   qui évite un empilement en escalier contre le bord droit. */
@media (min-width: 769px) and (max-width: 1279px) {
	.site-header .inside-header {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 1.1rem;
	}

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

	.main-navigation .main-nav > ul {
		justify-content: flex-start;
	}
}

/* Page d'accueil : ce n'est pas un article, elle n'a pas de mesure de lecture
   à tenir. Son conteneur reprend le cadre de l'en-tête et du pied de page, si
   bien que la marque, le titre du bandeau, les sections et les colonnes du
   pied partent tous du même bord, et que les deux bandes vides des côtés
   disparaissent. Les articles et les quatre autres pages gardent la colonne de
   46 rem, qui est leur mesure de lecture. */
.home #page,
.home .inside-article {
	max-width: none;
}

.home .inside-article {
	padding-top: 0;
	padding-left: clamp(1.25rem, 5vw, 4.5rem);
	padding-right: clamp(1.25rem, 5vw, 4.5rem);
}

/* Le bandeau se cale sur les bords du conteneur plutôt que sur 100vw : il va
   d'un bord à l'autre sans le décalage d'une demi-barre de défilement, et son
   contenu s'aligne au pixel près sur celui des sections. */
.home .entry-content .alignfull {
	margin-left: calc(-1 * clamp(1.25rem, 5vw, 4.5rem));
	margin-right: calc(-1 * clamp(1.25rem, 5vw, 4.5rem));
	width: auto;
	max-width: none;
}

.home .rp-bandeau > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: clamp(1.25rem, 5vw, 4.5rem);
	padding-right: clamp(1.25rem, 5vw, 4.5rem);
}

/* Sur écran large, les paragraphes gardent une longueur de ligne lisible. */
.home .rp-bandeau p:last-child {
	max-width: 48rem;
}

/* Le bloc « Qui écrit ce site » est un groupe : WordPress enveloppe son
   contenu dans un conteneur contraint à la largeur de contenu du thème. Sur la
   page d'accueil, ce conteneur suit la largeur du bloc, et c'est le paragraphe
   qui porte la longueur de ligne. */
.home .rp-methode .wp-block-group__inner-container {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.home .rp-methode p {
	max-width: 56rem;
	margin-left: 0;
	margin-right: 0;
}

/* Ligne de bas de page. Le réglage du thème lui donne un fond blanc alors que
   le texte et les liens du pied de page sont en ivoire : la ligne était donc
   illisible. Elle reprend le fond encre du reste du pied de page. */
.site-footer .site-info {
	background-color: var(--rp-encre);
	color: var(--rp-ivoire);
}

/* Listes d'articles — archives de catégorie et « Publications récentes ».

   Grille de cartes : l'image en tête, le titre dessous, la date en dernier.
   Les cartes d'un même rang partagent leur hauteur — la grille s'en charge,
   sans hauteur fixe et donc sans troncature de titre. */

.rp-recents .wp-block-post-template,
.archive .site-main,
.blog .site-main,
.search .site-main {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

/* L'en-tête d'archive, la pagination et l'absence de résultat traversent la
   grille au lieu d'occuper une cellule. */
.archive .site-main > .page-header,
.blog .site-main > .page-header,
.search .site-main > .page-header,
.archive .site-main > .paging-navigation,
.blog .site-main > .paging-navigation,
.search .site-main > .paging-navigation,
.archive .site-main > .no-results,
.blog .site-main > .no-results,
.search .site-main > .no-results {
	grid-column: 1 / -1;
}

.rp-recents .wp-block-post,
.archive .site-main > article,
.blog .site-main > article,
.search .site-main > article {
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.rp-recents .wp-block-post,
.rp-recents .wp-block-post:last-child {
	position: relative;
	flex-direction: column;
	background-color: var(--rp-ivoire);
	border: 1px solid rgba(74, 79, 88, 0.12);
	border-top: 1px solid rgba(74, 79, 88, 0.12);
	margin: 0;
	padding: 0;
}

.archive .inside-article,
.blog .inside-article,
.search .inside-article {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	background-color: var(--rp-ivoire);
	border: 1px solid rgba(74, 79, 88, 0.12);
}

/* Ordre dans la carte : l'image, puis le titre et la date. */
.archive .inside-article > .post-image,
.blog .inside-article > .post-image,
.search .inside-article > .post-image {
	order: 1;
	margin: 0;
}

.archive .inside-article > .entry-header,
.blog .inside-article > .entry-header,
.search .inside-article > .entry-header {
	order: 2;
	padding: 16px;
}

/* La carte ne porte que ces trois éléments : le résumé, les catégories de pied
   et la signature sortent de la vue de liste. */
.archive .entry-summary,
.blog .entry-summary,
.search .entry-summary,
.archive .inside-article > footer.entry-meta,
.blog .inside-article > footer.entry-meta,
.search .inside-article > footer.entry-meta,
.archive .entry-header .entry-meta .byline,
.blog .entry-header .entry-meta .byline,
.search .entry-header .entry-meta .byline {
	display: none;
}

/* L'image occupe toute la largeur de la carte, au rapport de la source. */
.rp-recents .wp-block-post-featured-image,
.archive .post-image,
.blog .post-image,
.search .post-image {
	width: 100%;
	margin: 0;
}

.rp-recents .wp-block-post-featured-image img,
.archive .post-image img,
.blog .post-image img,
.search .post-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

/* Le titre porte l'information : il est en encre, pas en brique. */
.rp-recents .wp-block-post-title,
.archive .entry-title,
.blog .entry-title,
.search .entry-title {
	font-family: var(--rp-police-titre);
	font-size: 18px;
	line-height: 1.3;
	margin: 0 0 0.4rem;
}

.rp-recents .wp-block-post-title {
	margin: 16px 16px 0.4rem;
}

.rp-recents .wp-block-post-title a,
.rp-recents .wp-block-post-title a:visited,
.archive .entry-title a,
.archive .entry-title a:visited,
.blog .entry-title a,
.blog .entry-title a:visited,
.search .entry-title a {
	color: var(--rp-encre);
	text-decoration: none;
	background-image: none;
}

.rp-recents .wp-block-post-title a:hover,
.rp-recents .wp-block-post-title a:focus,
.archive .entry-title a:hover,
.archive .entry-title a:focus,
.blog .entry-title a:hover,
.search .entry-title a:hover {
	text-decoration: underline;
}

.rp-recents .wp-block-post-date {
	margin: 0 16px 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rp-plomb);
}

.archive .entry-header .entry-meta,
.blog .entry-header .entry-meta,
.search .entry-header .entry-meta {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rp-plomb);
}

/* Toute la carte est cliquable : le lien du titre s'étend sur la carte. Le lien
   de l'image mène au même article, il passe simplement dessous. */
.rp-recents .wp-block-post-title a::after,
.archive .entry-title a::after,
.blog .entry-title a::after,
.search .entry-title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

@media (max-width: 899px) {
	.rp-recents .wp-block-post-template,
	.archive .site-main,
	.blog .site-main,
	.search .site-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.rp-recents .wp-block-post-template,
	.archive .site-main,
	.blog .site-main,
	.search .site-main {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* La signature étant masquée en vue de liste, le point médian qui la séparait
   de la date n'a plus rien à séparer. Il reste sur la page de l'article. */
.archive .entry-header .entry-meta .rp-maj::before,
.blog .entry-header .entry-meta .rp-maj::before,
.search .entry-header .entry-meta .rp-maj::before {
	content: none;
}

/* ---------------------------------------------------------------------------
   5. Article : bloc blanc élargi, colonne de lecture conservée

   Le fond blanc de l'article est porté par .inside-article — règle
   GeneratePress « .separate-containers .inside-article », rembourrage de 40 px.
   C'est donc lui qui s'élargit, à 64rem plus ce rembourrage, et non le tableau
   qui en sort. Le texte garde sa mesure de lecture de 52rem, centré dans ce
   bloc ; seuls les tableaux occupent toute la largeur intérieure, ce qui leur
   laisse les 40 px de rembourrage de chaque côté.
   --------------------------------------------------------------------------- */
.single #page {
	max-width: calc(64rem + 80px);
}

/* En-tête et pied d'article s'alignent sur la colonne de texte. */
.single .inside-article > .entry-header,
.single .inside-article > footer.entry-meta {
	max-width: 52rem;
	margin-left: auto;
	margin-right: auto;
}

/* Le corps : texte, sommaire et blocs de motif restent à la mesure de lecture. */
.single .entry-content > * {
	max-width: 52rem;
	margin-left: auto;
	margin-right: auto;
}

/* Seule exception : le tableau prend toute la largeur intérieure du bloc
   blanc. Il ne le déborde jamais, et son défilement horizontal reste porté
   par overflow-x: auto sur les écrans étroits. */
.single .entry-content > .rp-tableau {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Sous 769 px, GeneratePress ramène le rembourrage de l'article à 30 px. Le
   tableau viendrait alors à 30 px du bord du cadre : on le tient à 32. */
@media (max-width: 768px) {
	.single .inside-article {
		padding: 32px;
	}
}

/* ---------------------------------------------------------------------------
   6. Bandeau d'accueil : photo de fond

   Le voile est un dégradé horizontal d'encre : dense là où le texte se pose,
   il s'allège vers la droite pour laisser voir la photo. Sur les écrans où le
   texte occupe toute la largeur, ce dégradé ne protège plus rien : il devient
   alors uniforme, et plus dense.
   --------------------------------------------------------------------------- */
.home .rp-bandeau {
	padding-top: 6.5rem;
	padding-bottom: 6rem;
	background-image:
		/* Arrêts en pixels et non en pourcentage : le bloc de texte a une largeur
		   fixe, le voile doit rester dense jusqu'à son bord quelle que soit la
		   fenêtre. En pourcentage, le contraste tombait à 2,4:1 à 900 px. */
		linear-gradient(90deg,
			rgba(30, 47, 82, 0.94) 0,
			rgba(30, 47, 82, 0.90) 880px,
			rgba(30, 47, 82, 0.45) 1500px,
			rgba(30, 47, 82, 0.30) 100%),
		url("/wp-content/uploads/2026/08/bandeau-accueil.webp");
	background-size: cover, cover;
	background-position: center, center right;
	background-repeat: no-repeat;
}

@media (max-width: 900px) {
	.home .rp-bandeau {
		padding-top: 3rem;
		padding-bottom: 2.75rem;
		background-image:
			linear-gradient(rgba(30, 47, 82, 0.9), rgba(30, 47, 82, 0.9)),
			url("/wp-content/uploads/2026/08/bandeau-accueil.webp");
	}
}

/* Quatrième colonne du pied de page : les derniers articles publiés, rendus
   par le bloc natif. La liste reprend la mise en forme des trois autres. */
.site-footer .footer-widgets .rp-pied-recents {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .footer-widgets .rp-pied-recents li {
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
	line-height: 1.45;
}

.site-footer .footer-widgets .rp-pied-recents li:last-child {
	margin-bottom: 0;
}

/* Les quatre colonnes du pied de page tombent sous 260 px dès que la fenêtre
   descend sous 1100 px, et les titres d’articles y passent sur quatre lignes.
   Elles se répartissent alors sur deux rangs. En dessous de 769 px, le thème
   les empile déjà de lui-même : on le laisse faire. */
@media (min-width: 769px) and (max-width: 1099px) {
	.site-footer .inside-footer-widgets {
		flex-wrap: wrap;
	}

	.site-footer .inside-footer-widgets > div {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.site-footer .inside-footer-widgets > div:nth-child(n + 3) {
		margin-top: 2.5rem;
	}
}