/*
 * baseline.css — Reproduit le rendu actuel de la prod, dans son état avant refonte.
 *
 * Origine historique : ces règles ont été extraites de deux couches qui vivaient
 * en prod côté ancien thème `twentytwentythreebis` (fork de TT3), désormais
 * remplacé par ce thème autonome (cf. ADR-0006). Conservées telles quelles
 * tant que la charte graphique n'a pas réécrit le rendu en theme.json pur.
 *
 *  1. [Olympus] Mapping du plugin Olympus Google Fonts qui n'avait jamais été
 *     porté en theme.json : Raleway sur titres / nav / formulaires, Open Sans
 *     sur contenu et listes. Le body reste en system-font.
 *  2. [TT3bis] Customizer Additional CSS du fork TT3bis (post 5491 en base) :
 *     effets hover (border-bottom au lieu d'underline) et ajustements de marges.
 *
 * Préfixes [Olympus] et [TT3bis] gardés pour pouvoir déconstruire couche par
 * couche au moment de la refonte (charte graphique à venir).
 */


/* ─── [Olympus] Raleway sur logo, tagline, nav, formulaires ───────────────
 * Les titres (h1…h6, donc aussi core/post-title et core/query-title qui rendent
 * une balise de titre) reçoivent Raleway directement depuis theme.json
 * (elements.heading.fontFamily) : rendu identique éditeur/front, sans dépendre
 * de cette feuille. Restent ici les éléments que theme.json ne cible pas par un
 * sélecteur de bloc propre : logo, tagline, navigation, champs de formulaire. */

#site-title, .site-title, #site-title a, .site-title a,
#site-logo, #site-logo a, #logo, #logo a, .logo, .logo a,
.wp-block-site-title, .wp-block-site-title a,
#site-description, .site-description, #site-tagline, .site-tagline,
.wp-block-site-tagline,
.menu, .page_item a, .menu-item a,
.wp-block-navigation, .wp-block-navigation-item__content,
button, .button, input, select, textarea,
.wp-block-button, .wp-block-button__link {
	font-family: "Raleway";
}


/* ─── [Olympus] Open Sans sur contenu, listes, widgets, footer ────────── */

.entry-content, .post-content, .page-content,
.post-excerpt, .entry-summary, .entry-excerpt,
.widget-area, .widget, .sidebar, #sidebar,
footer, .footer, #footer, .site-footer, #site-footer,
.entry-content p, .entry-content ol, .entry-content ul,
.entry-content dl, .entry-content dt,
.widget_text,
ul, ol, ul li, ol li, li {
	font-family: "Open Sans";
}


/* ─── Open Sans par défaut sur tous les paragraphes ───────────────────────
 * Le body est en system-font (theme.json), mais on veut Open Sans dès qu'il
 * y a du texte courant. Couvre aussi les <p> issus de blocs dynamiques comme
 * wp:term-description, qui ne portent pas la classe .entry-content et
 * n'étaient donc pas pris par la règle Olympus ci-dessus.
 */
p {
	font-family: "Open Sans";
}


/* ─── [TT3bis] Effets hover : border-bottom au lieu d'underline ───────── */

/* Logo : on garde le border-bottom historique au survol. */
.wp-block-site-title a:hover {
	border-bottom: 2px solid;
	text-decoration: none;
}

/* H1 de la page de Une : la couleur (corail) porte le survol, pas de filet. */
h1 a:hover {
	text-decoration: none;
}

h2.wp-block-heading a:hover {
	text-decoration: none;
}


/* ─── [TT3bis] Marges sur les extraits ────────────────────────────────── */

p.wp-block-post-excerpt__excerpt {
	margin-top: 0;
}

div.wp-block-post-excerpt {
	margin-top: 1.2em;
}


/* ─── Couleur de hover sur la navigation principale ───────────────────── */

/* Survol corail (Corail = Action) : le menu révèle l'action comme tous les
   liens-titres du site. Remplace l'ancien survol lime hérité de TT3bis. */
.wp-block-navigation__container a:hover {
	color: var(--wp--preset--color--lien) !important;
	text-decoration: none;
}


/* ─── Section Médiation scientifique (blocs dynamiques leroncier/vih-titre et
 *     leroncier/vih-articles, qui partagent la classe wrapper .mediation-vih) ──
 * Le rendu vient de render_callback (pas de blocs wp:post-*), donc rien n'est
 * hérité automatiquement : on reproduit ici le style des autres sections
 * (titre 6rem Raleway teal, méta date, grille 3 colonnes façon JDR sans image).
 */

/* Sur l'accueil, le bloc titre et le bloc articles se suivent comme deux
   wrappers .mediation-vih distincts. On annule le block-gap du layout entre eux
   pour retrouver l'écart d'origine, gouverné par la marge basse de l'accroche. */
.mediation-vih + .mediation-vih {
	margin-block-start: 0;
}

.mediation-vih .mediation-vih__titre {
	margin-top: 0;
	/* Même écart titre → contenu que les sections natives (block-gap du thème).
	   Sans ça, le <h2> à 6rem garderait sa marge basse par défaut (~5rem) et
	   l'image des extraits serait bien plus bas que dans ÉCRITS / JDR. */
	margin-bottom: var(--wp--preset--spacing--30, 1.5rem);
	/* Titre de section : typo et graisse du menu (Raleway 700, capitales), à une
	   taille moyenne (entre le menu et l'ancien grand titre). Fluide pour ne pas
	   déborder sur petit écran (le libellé « Médiation scientifique » est long). */
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.mediation-vih .mediation-vih__titre a {
	/* Vert profond : titre de section, aligné sur les bandes natives de la home
	   (ÉCRITS, JDR, Podcasts, blog). Distinct du teal des titres de carte. */
	color: var(--wp--preset--color--titre-fonce, #3d7d14);
	text-decoration: none;
}

.mediation-vih .mediation-vih__titre a:hover {
	color: #ff5f5f;
}

.mediation-vih .mediation-vih__accroche {
	max-width: 50rem;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
	font-family: "Raleway";
	font-weight: 200;
}

.mediation-vih .mediation-vih__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 600px) {
	.mediation-vih .mediation-vih__grille {
		grid-template-columns: 1fr;
	}
}

/* Rythme vertical de la carte calqué à l'identique sur les sections ÉCRITS /
   JDR. On reprend leurs valeurs exactes : 1.25rem image → titre (marge haute
   de core/post-title dans theme.json), 0.25em titre → date (marge basse posée
   sur post-title dans les gabarits), 1.2em date → chapô (règle TT3bis sur
   .wp-block-post-excerpt ci-dessus). */
.mediation-vih .mediation-vih__article > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Même écart uniforme (1rem) entre chaque élément que les cartes natives
   (cf. section 4 cartes), pour que les cartes Médiation aient le même rythme. */
.mediation-vih .mediation-vih__media + .mediation-vih__article-titre {
	margin-top: 1rem;
}

.mediation-vih .mediation-vih__article-titre + .mediation-vih__date {
	/* Même resserrement optique titre → méta que les cartes natives. */
	margin-top: 0.75rem;
}

.mediation-vih .mediation-vih__date + .mediation-vih__extrait,
.mediation-vih .mediation-vih__article-titre + .mediation-vih__extrait {
	margin-top: 1rem;
}

.mediation-vih .mediation-vih__media {
	display: block;
}

.mediation-vih .mediation-vih__media img {
	display: block;
	width: 100%;
	/* Même proportion figée que les cartes natives (cf. section cartes d'article). */
	aspect-ratio: 2 / 1;
	height: auto;
	object-fit: cover;
	border-radius: 7px;
}

.mediation-vih .mediation-vih__article-titre {
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	font-weight: 700;
}

.mediation-vih .mediation-vih__article-titre a {
	/* Titre de carte en quasi-noir, comme les cartes natives (core/post-title
	   passé en encre forte) : la hiérarchie passe par la graisse, pas la couleur. */
	color: var(--wp--preset--color--contrast, #1d1a16);
	text-decoration: none;
}

.mediation-vih .mediation-vih__article-titre a:hover {
	color: #ff5f5f;
}

.mediation-vih .mediation-vih__date {
	display: block;
	font-family: "Raleway";
	font-weight: 300;
	font-size: 1rem;
	/* Même méta quasi-noir (70 %) que les dates des cartes natives. */
	color: var(--wp--preset--color--meta-encre, #635f58);
}


/* ─── [Refonte] Responsive des grilles de sections ────────────────────────
 * Les grilles natives wp:query de la home utilisent columnCount (2 ou 3
 * colonnes fixes) : sans média query, WordPress les laisse en N colonnes même
 * sur mobile, où les cartes deviennent illisibles. On les replie en une seule
 * colonne sous 600px, comme le fait déjà le bloc médiation ci-dessus.
 */
@media (max-width: 600px) {
	.wp-block-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* Les titres d'article peuvent contenir des mots longs : on autorise la
   césure pour éviter tout débordement horizontal sur écran étroit. */
.wp-block-post-title {
	overflow-wrap: break-word;
}

/* Titres des cartes d'article de l'accueil en gras 700, comme le logo (limité
   à .home : les listings gardent la graisse fine de core/post-title). */
.home .wp-block-post-title {
	font-weight: 700;
}

/* ─── [Refonte] Couleur des grands titres de Page et d'Archive ────────────
   Le bloc query-title (catégorie, auteur, date, recherche) et le titre des
   Pages n'ont pas de couleur propre : ils héritent sinon de la couleur de titre
   par défaut du thème (vert profond), ce qui laissait la page catégorie en vert.
   On les neutralise vers le teal foncé structurel, et sur les archives de
   catégorie on prolonge la couleur de la section correspondante de l'accueil
   (même identité chromatique). Préfixe `body` pour passer devant la couleur
   d'élément héritée de theme.json. */
body .wp-block-query-title,
body.page .wp-block-post-title {
	color: var(--wp--preset--color--accent-fonce);
}
body.category-jdr .wp-block-query-title {
	color: var(--wp--preset--color--titre-jeu);
}
body.category-podcasts .wp-block-query-title {
	color: var(--wp--preset--color--titre-podcast);
}

/* ─── [Refonte] Chapô de description d'archive (core/term-description) ──────
   Le bloc reste alignwide : son bord gauche s'aligne sur le grand titre de
   l'archive. On borne la mesure sur le PARAGRAPHE intérieur (pas sur le
   conteneur) : cela évite de lutter contre le centrage auto du layout
   constrained (les marges auto de .alignwide gagneraient en spécificité et
   recentreraient le bloc) et garde le texte calé à gauche sous le titre. Sans
   cette borne, la ligne s'étirait jusqu'à wideSize (1200px, ~150 caractères)
   dès qu'on dépassait la largeur mobile. Traitement en chapô éditorial :
   Raleway fin, pour une hiérarchie par contraste de graisse avec le titre
   capitales 700 (The Graisse Fait Foi Rule). Le bloc natif ne rend rien quand
   la description du terme est vide : aucun masquage à gérer. */
.wp-block-term-description p {
	max-width: 62ch;        /* mesure lisible (~520px), bornée sur le paragraphe */
	font-family: "Raleway"; /* surcharge la règle générique `p { Open Sans }` */
	font-weight: 300;
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
	line-height: 1.6;
	color: var(--wp--preset--color--texte);
}

/* Survol corail sur les titres d'article de la page d'accueil (à la une en h2,
   titres de section en h3). Le theme.json ne change que le soulignement au
   survol ; on aligne ici la couleur sur l'accent d'action corail, comme les
   titres de section. Limité à .home pour ne pas affecter les autres gabarits. */
.home .wp-block-post-title a:hover {
	color: var(--wp--preset--color--lien);
}

/* Flèche « → » après les titres d'article de la section Blog de la home. Le
   bloc core/post-title n'a pas d'option pour suffixer du texte : on ajoute la
   flèche en ::after sur le lien existant (post-title isLink), elle fait donc
   partie du lien vers l'article. Scopée à .section-blog (classe posée sur la
   bande Blog dans home.html) pour ne pas toucher les autres sections.
   La flèche reste corail quel que soit l'état du lien (lien, visité, survol,
   actif) : c'est un signal d'action constant, pas un accent de survol. */
.section-blog .wp-block-post-title a::after {
	content: " →";
	color: var(--wp--preset--color--lien);
}

/* Flèche corail dans le H1 de la page de Une : même règle d'action constante.
   Le <span> est posé dans home.html pour pouvoir colorer la flèche
   indépendamment du reste du texte du lien. */
h1 a .fleche-corail,
h1 a:link .fleche-corail,
h1 a:visited .fleche-corail,
h1 a:hover .fleche-corail,
h1 a:active .fleche-corail {
	color: var(--wp--preset--color--lien);
}


/* ─── [Refonte] Extrait de carte cliquable (lien-fantôme) ─────────────────
   La flèche « → » du bloc post-excerpt (le « more-link », déjà un <a> vers
   l'article) voit son ::after s'étendre pour couvrir tout le bloc extrait :
   cliquer n'importe où sur l'extrait mène à l'article. Le TEXTE de l'extrait
   n'est pas un lien (pas de survol, pas de corail) : il garde sa couleur
   d'encre. Seule la flèche reste corail (signal d'action). Même technique pour
   la carte du bloc Médiation, dont la flèche .mediation-vih__lire est un <a>. */
.wp-block-post-excerpt,
.mediation-vih .mediation-vih__extrait {
	position: relative;
}
.wp-block-post-excerpt__more-link::after,
.mediation-vih .mediation-vih__lire::after {
	content: "";
	position: absolute;
	inset: 0;
}


/* ─── [Refonte] Titre d'intro de la home (.intro-hero) ──────────────────────
   Seule animation d'entrée du site : « Je m'appelle Charles » est affiché
   d'emblée (texte statique du lien), puis seuls les mots de « et je raconte des
   histoires → » se révèlent en fondu + montée légère. Plus de surlignage lime.
   Exception assumée au « plat par principe », documentée dans DESIGN.md.
   Repli complet en prefers-reduced-motion. Les mots animés sont des <span
   class="intro-hero__mot"> posés dans home.html. */
.intro-hero .intro-hero__mot {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.4em);
	animation: introHeroRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes introHeroRise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.intro-hero .intro-hero__mot {
		opacity: 1;
		transform: none;
		animation: none;
	}
}


/* ─── [Refonte] Bannière focus de la home (article épinglé en pleine largeur) ─
   Bloc « À la une » : une ou plusieurs bannières wp:cover pleine largeur, image
   à la une en fond, lavis tonal accentué en dégradé vers le bas (géré par le
   customGradient du bloc) portant le texte clair. Le dégradé monte fort dans la
   moitié basse pour tenir le contraste du titre sur n'importe quelle image, sans
   plaque ni bandeau. Plat par principe (aucune ombre, aucun filet).
   Le texte est ramené dans la colonne wide pour s'aligner sur les sections. */
.home .focus-query {
	/* Aucune marge : la bannière est collée à la première section (ÉCRITS). */
	margin-block: 0;
}

/* Cover en flex colonne : l'inner-container (flex:1) remplit toute la hauteur de
   la bannière, sans dépendre d'un height:100% (le cover n'a qu'un min-height, pas
   de hauteur définie, donc le pourcentage ne se résoudrait pas). */
.home .focus-banniere {
	margin-block: 0;
	display: flex;
	flex-direction: column;
}

/* L'inner-container occupe toute la hauteur et pousse le titre en bas à gauche ;
   le titre, en largeur « wide », s'aligne sur les titres de section, et le
   lien-fantôme du titre peut couvrir tout le cover. */
.home .focus-banniere .wp-block-cover__inner-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	/* Plus d'air sous le titre (padding bas) qu'au-dessus du bloc. */
	padding-top: clamp(1.5rem, 4vw, 3rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
	/* Gutter latéral = padding racine du thème, pour caler le bord du texte sur
	   les titres de section sur petit écran. */
	padding-inline: var(--wp--style--root--padding-right, clamp(1.5rem, 5vw, 2rem));
}

/* Titre ramené à la largeur « wide » centrée, exactement comme les titres de
   section (h2 alignwide) : bords gauches alignés. */
.home .focus-banniere .wp-block-cover__inner-container > .alignwide {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Plusieurs articles épinglés : aucun écart entre les bannières empilées. Les
   covers sont dans des <li> du post-template ; on neutralise le gap de flux. */
.home .focus-query .wp-block-post-template {
	gap: 0;
}
.home .focus-query .wp-block-post-template > * {
	margin-block: 0;
}

/* Toute la bannière cliquable : le lien du titre (post-title isLink) étend un
   ::before transparent sur tout le cover. Survoler n'importe où mène à l'article
   et colore le titre en corail (règle .home .wp-block-post-title a:hover). */
.home .focus-banniere .wp-block-post-title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Flèche « → » corail après le titre du focus, comme ailleurs (signal d'action
   constant, quel que soit l'état du lien). */
.home .focus-banniere .wp-block-post-title a::after {
	content: " →";
	color: var(--wp--preset--color--lien);
}

/* Focus clavier visible du titre-lien : contour crème posé sur le bas de la
   bannière, là où le dégradé est le plus sombre (repère franc au clavier, là où
   le seul recolorage au survol ne suffisait pas). */
.home .focus-banniere .wp-block-post-title a:focus-visible {
	outline: 3px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}

/* Sur mobile, la bannière focus prend trop de hauteur (58vh = presque tout
   l'écran avant de voir le contenu). On la divise par deux (29vh). Le !important
   est nécessaire car le bloc cover pose min-height en style inline. */
@media (max-width: 600px) {
	.home .focus-banniere {
		min-height: 29vh !important;
	}
}

/* Sur tablette (601–1024 px), valeurs intermédiaires entre mobile et desktop :
   - le hero (clamp ...9vw...6rem) grimpe trop vite, on plafonne le pas viewport
     et la borne haute pour le contenir ;
   - les bannières focus passent de 58vh à 32vh : en portrait tablette le viewport
     est haut (≈1133px), donc 42vh restait trop imposant pour deux bannières
     empilées ; 32vh reste un peu plus généreux que les 29vh du mobile.
   !important car hero et min-height sont posés en style inline par les blocs. */
@media (min-width: 601px) and (max-width: 1024px) {
	.home .intro-hero {
		font-size: clamp(2.5rem, 6vw, 4rem) !important;
	}
	.home .focus-banniere {
		min-height: 32vh !important;
	}
}

/* Menu de navigation en hamburger jusqu'à la tablette (≤1024px). Le bloc
   core/navigation ne replie le menu en overlay (bouton hamburger) que sous
   600px : entre 600 et 1024px les liens s'affichent inline et débordent sur
   deux lignes. On étend le comportement mobile à toute la plage 601–1024px en
   surchargeant les règles @media (min-width:600px) de core : on masque le menu
   inline (tant qu'il n'est pas ouvert) et on réaffiche le bouton hamburger.
   Sélecteurs préfixés par body pour primer sur core quel que soit l'ordre de
   chargement des feuilles. Au-dessus de 1024px, le menu inline reprend. */
@media (min-width: 601px) and (max-width: 1024px) {
	/* Menu inline masqué tant que l'overlay n'est pas ouvert (revient à l'état
	   mobile : position fixe, display:none) ; .is-menu-open rétablit l'overlay. */
	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	/* Bouton hamburger réaffiché. */
	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* ─── [Refonte] Pied de page : signature d'atelier ──────────────────────── */

/* Footer collé au contenu : aucune bande crème au-dessus ni en dessous.
   - margin-bottom 0 sur les <main> de listing supprime la bande au-dessus
     (ils portaient une marge basse spacing|50) ; no-op sur les autres gabarits.
   - margin-top 0 sur le footer annule le block-gap racine entre <main> et lui.
   - margin-bottom négatif (= padding bas racine, via la variable générée par
     useRootPaddingAwareAlignments) tire le footer pleine largeur sur la bande
     crème laissée sous lui par le padding bas de .wp-site-blocks. */
.wp-site-blocks > main {
  margin-bottom: 0;
}
.wp-site-blocks > footer {
  margin-top: 0;
  margin-bottom: calc(-1 * var(--wp--style--root--padding-bottom, 0px));
}

/* Filet 1px du pied de page : on neutralise la hauteur générée par le bloc
   wp:separator en mode "background color" (par défaut ~1px ou plus selon le
   thème), pour obtenir un filet horizontal net en teal-gris. */
.site-footer .wp-block-separator.has-background {
	height: 1px;
	border: 0;
	opacity: 0.5;
}

/* Lien social : couleur teal d'atelier, hover corail (Corail = Action). */
.site-footer .wp-block-social-link {
	background: transparent !important;
	color: var(--wp--preset--color--accent);
}
.site-footer .wp-block-social-link a {
	color: currentColor;
}
.site-footer .wp-block-social-link:hover,
.site-footer .wp-block-social-link:focus-within {
	color: var(--wp--preset--color--lien);
	transform: none;
}

/* Replis responsives du pied de page : on n'empile les deux colonnes 60/40
   (Suivre/Écrire sous la signature) que sur mobile (≤600px), au même seuil que
   le menu hamburger. La ligne utilitaire reste en flex-wrap. */
@media (max-width: 600px) {
	.site-footer .wp-block-columns {
		flex-wrap: wrap;
	}
	.site-footer .wp-block-column[style*="60%"],
	.site-footer .wp-block-column[style*="40%"] {
		flex-basis: 100% !important;
	}
}

/* Sur tablette (601–781px), WordPress empile par défaut les colonnes : sous
   782px il force flex-wrap:wrap (la 2e colonne tombe à la ligne) et
   flex-basis:100%. On rétablit le côte-à-côte comme sur grand écran :
   - nowrap sur le conteneur pour empêcher le passage à la ligne (sinon le gap
     fait dépasser 60%+40% de 100% et la 2e colonne se replie) ;
   - rapport 60/40 restauré sur chaque colonne.
   !important + spécificité (.site-footer) pour primer sur les règles core. */
@media (min-width: 601px) and (max-width: 781px) {
	.site-footer .wp-block-columns {
		flex-wrap: nowrap !important;
	}
	.site-footer .wp-block-columns > .wp-block-column[style*="60%"] {
		flex-basis: 60% !important;
	}
	.site-footer .wp-block-columns > .wp-block-column[style*="40%"] {
		flex-basis: 40% !important;
	}
}


/* ─── [Refonte] Recherche : loupe (header), grand champ (footer, page) ──── */

/* Loupe-recherche dans l'en-tête : bouton-icône teal. Au clic, le champ se
   déploie en popup positionné en absolu sous le bouton (et non en éviction
   inline qui décalerait la navigation). Le toggle (aria-hidden true ↔ false),
   ainsi que la fermeture ESC et clic-extérieur, sont gérés par view.js du
   bloc core/search, automatiquement enqueué par WordPress quand le bloc est
   rendu en mode button-only. Hover/focus corail (Corail = Action). */
.header-loupe {
	position: relative;
	margin: 0;
}
.header-loupe .wp-block-search__inside-wrapper {
	position: relative;
	gap: 0;
}
.header-loupe .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border: 0;
	padding: 0.35rem 0.5rem;
	min-width: 0;
	transition: color 0.2s ease;
}
.header-loupe .wp-block-search__button:hover,
.header-loupe .wp-block-search__button:focus {
	color: var(--wp--preset--color--lien);
}
.header-loupe .wp-block-search__button svg {
	fill: currentColor;
	width: 1.25rem;
	height: 1.25rem;
}
/* Le champ devient un popup ancré à droite du bouton-loupe, hors flux : il
   n'entraîne plus le menu. Quand WP met aria-hidden="true" sur l'input, on le
   masque ; sinon, il s'affiche en popup. */
.header-loupe .wp-block-search__input {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	width: clamp(16rem, 32vw, 24rem);
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 6px;
	padding: 0.65rem 0.9rem;
	font-family: "Open Sans";
	font-size: 1rem;
	color: var(--wp--preset--color--texte);
	z-index: 50;
}
.header-loupe .wp-block-search__input[aria-hidden="true"] {
	display: none;
}
.header-loupe .wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
.header-loupe .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--meta-doux);
	opacity: 1;
}

/* Champ de recherche pleine largeur du pied de page : sobre, calme, posé.
   L'icône loupe est à droite, dans le champ. */
.footer-search {
	margin-inline: 0;
}
.footer-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--meta-doux);
	background: var(--wp--preset--color--base);
	border-radius: 7px;
	padding: 0;
	transition: border-color 0.2s ease;
}
.footer-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent);
}
.footer-search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 1rem 1.25rem;
	font-family: "Raleway";
	font-weight: 300;
	font-size: 1.125rem;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--texte);
}
.footer-search .wp-block-search__input:focus {
	outline: none;
}
.footer-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--meta-doux);
	opacity: 1;
	font-weight: 300;
}
.footer-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border: 0;
	padding: 0 1rem;
	transition: color 0.2s ease;
}
.footer-search .wp-block-search__button:hover,
.footer-search .wp-block-search__button:focus {
	color: var(--wp--preset--color--lien);
}
.footer-search .wp-block-search__button svg {
	fill: currentColor;
}

/* Même traitement pour le champ de recherche en tête de la page de résultats
   (template search.html), pour que les trois points d'accès soient cohérents. */
.page-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--meta-doux);
	background: var(--wp--preset--color--base);
	border-radius: 7px;
	padding: 0;
	transition: border-color 0.2s ease;
}
.page-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent);
}
.page-search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 1.1rem 1.25rem;
	font-family: "Raleway";
	font-weight: 300;
	font-size: 1.25rem;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--texte);
}
.page-search .wp-block-search__input:focus {
	outline: none;
}
.page-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--meta-doux);
	opacity: 1;
	font-weight: 300;
}
.page-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border: 0;
	padding: 0 1rem;
	transition: color 0.2s ease;
}
.page-search .wp-block-search__button:hover,
.page-search .wp-block-search__button:focus {
	color: var(--wp--preset--color--lien);
}
.page-search .wp-block-search__button svg {
	fill: currentColor;
}


/* ─── [Refonte] Cartes d'article : image, titre et méta sur petit écran ────
 * Ajustements responsives des grilles de cartes (accueil + listings), pensées
 * au départ pour le grand écran.
 */

/* 1. Proportion d'image figée et identique à tous les écrans. Le bloc impose en
 *    style inline height:max(15vw, 30vh) sur TROIS éléments (la <figure>, le <a>
 *    et l'<img>) : ce mélange vw/vh donne des ratios différents selon le viewport
 *    (et la <figure>, restée plus haute que l'<img> recadrée, créait un vide sous
 *    l'image). On neutralise la hauteur sur les trois et on fige sur l'<img> le
 *    ratio 2:1, qui est celui de la section Écrits en rendu desktop (mesuré ~2,03
 *    sur écran MacBook). Appliqué à TOUS les écrans pour qu'ils soient identiques.
 *    !important car les hauteurs sont posées en style inline par le bloc. */
.wp-block-post-featured-image,
.wp-block-post-featured-image a,
.wp-block-post-featured-image img {
	height: auto !important;
}
.wp-block-post-featured-image img {
	aspect-ratio: 2 / 1;
	width: 100%;
	object-fit: cover;
}

/* 2. Titres de carte réduits sur mobile uniquement. Sur grand écran, les titres
 *    gardent leur taille de preset, qui varie selon le nombre de colonnes
 *    (x-large pour les sections à 2 colonnes — Écrits, listings ; large pour les
 *    sections à 3 colonnes — JDR, Blog, Podcasts), conformément à DESIGN.md. Sur
 *    mobile la grille passe à 1 colonne : on ramène alors les deux presets à une
 *    seule taille intermédiaire (1.35rem), nettement sous les titres de section
 *    (1.75rem gras capitales) pour la hiérarchie, sans écraser le titre.
 *    On cible les classes de taille de preset (has-large / has-x-large) que
 *    portent UNIQUEMENT les titres de carte : les grands titres (bannière focus,
 *    titres de section, h1 d'article et de page, titre de requête) utilisent un
 *    font-size inline en clamp, sans ces classes, donc ne sont pas touchés.
 *    !important car WordPress génère ces classes de preset avec !important. */
@media (max-width: 600px) {
	.wp-block-post-title.has-large-font-size,
	.wp-block-post-title.has-x-large-font-size {
		font-size: 1.6rem !important;
	}
}

/* 2 bis. Espace optique égal au-dessus et au-dessous du titre de carte. Les
 *    titres héritaient de line-height « normal » (variable selon le navigateur) :
 *    le vide de hauteur de ligne fait paraître l'espace sous le titre différent
 *    de celui au-dessus. On fixe d'abord une line-height déterministe (1.2). La
 *    compensation optique (marges haut/bas du titre) est posée plus bas, section
 *    4, calibrée sur les métriques mesurées de Raleway. */
.wp-block-query:not(.focus-query) .wp-block-post-template > li > .wp-block-post-title,
.mediation-vih .mediation-vih__article-titre {
	line-height: 1.2;
}

/* 3. Méta (date / tags) repliable sur mobile. Par défaut la méta est en flex
 *    nowrap (date ★ tags sur une ligne) : quand les tags sont longs ou nombreux
 *    ils débordaient. On autorise le repli, et le script cartes-meta.js pose
 *    `is-wrapped` quand le contenu passe sur plusieurs lignes. Dans ce cas on
 *    empile (date au-dessus des tags) et on retire l'étoile. Vaut partout où la
 *    classe `carte-meta` existe (accueil + listings + article seul). */
@media (max-width: 600px) {
	.carte-meta {
		flex-wrap: wrap;
	}

	.carte-meta.is-wrapped {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.35em;
	}

	/* Écrits / listings : l'étoile est un paragraphe entre la date et les tags ;
	   on la masque une fois replié. Le « · » entre tags reste (ce n'est pas
	   l'étoile visée). */
	.carte-meta.is-wrapped > p {
		display: none;
	}

	/* Tags sur toute la largeur du groupe pour wrapper proprement ligne à ligne
	   plutôt que de déborder. */
	.carte-meta.is-wrapped .wp-block-post-terms {
		align-self: stretch;
	}

	/* Section Blog (accueil) : l'étoile est le séparateur inter-tags. On la masque
	   une fois replié et on redonne un espacement entre les tags (que le séparateur
	   portait). Scopé à .section-blog pour ne pas toucher le « · » des autres. */
	.home .section-blog .carte-meta.is-wrapped .wp-block-post-terms__separator {
		display: none;
	}
	.home .section-blog .carte-meta.is-wrapped .wp-block-post-terms a {
		margin-right: 0.6em;
	}
}

/* 4. Rythme interne UNIFORME des cartes : le même écart entre chaque élément
 *    (image → titre → méta → extrait), sur toutes les cartes (accueil + listings)
 *    et tous les écrans. Sans cette règle, les écarts venaient de sources
 *    hétérogènes (marge de theme.json sur le titre = 1.25rem image→titre, styles
 *    inline divers, marge de l'extrait = 1.2em) : le rythme interne était inégal
 *    (titre→méta deux fois plus serré que les autres). On remet à zéro les marges
 *    et paddings verticaux des enfants de carte, puis on pose un seul écart entre
 *    frères. !important pour primer sur les styles inline des gabarits. Le
 *    :not(.focus-query) épargne la bannière à la une (cover sans méta ni extrait). */
.wp-block-query:not(.focus-query) .wp-block-post-template > li > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.wp-block-query:not(.focus-query) .wp-block-post-template > li > * + * {
	margin-top: 1rem !important;
}
/* Compensation optique du titre → méta. Avec un écart égal (1rem) partout, le
   titre paraît avoir moins d'air au-dessus qu'en dessous : la méta est un groupe
   flex aligné en bas, dont l'élément le plus haut (l'étoile, 1.125rem) laisse du
   vide en haut du bloc, vide qui s'ajoute à l'espace perçu sous le titre. On
   resserre donc l'écart titre → méta pour rééquilibrer optiquement. */
.wp-block-query:not(.focus-query) .wp-block-post-template > li > .carte-meta {
	margin-top: 0.75rem !important;
}

/* 5. Espace vertical entre les cartes (entre les articles d'une liste). Le gap
 *    de grille (spacing|40) s'applique aux deux axes ; chaque carte portait en
 *    plus un spacer de 30px en bas, retiré lors du nettoyage. On restaure ces
 *    30px sur le seul écart vertical (row-gap), en laissant l'écart horizontal
 *    entre colonnes à spacing|40. Vaut pour toutes les grilles de cartes (accueil
 *    + listings), hors bannière focus. */
.wp-block-query:not(.focus-query) .wp-block-post-template.is-layout-grid {
	row-gap: calc(var(--wp--preset--spacing--40, 3rem) + 30px) !important;
}


/* ─── [Refonte] Bloc Commentaires (page single) ───────────────────────────
 * Harmonisation typographique du fil et du formulaire avec le reste du site.
 * Le markup de bloc (comments.html) traite ce qu'il peut cibler (titres, nom,
 * date) ; restent ici les éléments rendus par WordPress sans bloc propre :
 * titre du formulaire, étiquettes, champs, bouton, liens d'action. Principes
 * appliqués (DESIGN.md) : graisses Raleway lisibles (plus de 100/200 trop
 * fins), dates et métas en méta-encre comme partout, hiérarchie par la graisse
 * et la taille, corail réservé à l'action.
 */

/* Titre du formulaire (« Laisser un commentaire ») : c'est un h3, subordonné au
   h2 « Commentaires ». Raleway 700 en casse normale (titre de contenu, pas une
   bande de section : pas de capitales), en teal foncé (teinte foncée du lavis
   teal du single), au lieu de la graisse 100 illisible héritée auparavant. Même
   échelle fluide que les autres H3 de contenu (clamp), pour rester sous le h2 à
   toutes les largeurs : à taille fixe (large), il dépassait le h2 sur mobile. */
.wp-block-comments .comment-reply-title,
.wp-block-comments #reply-title {
	font-family: "Raleway";
	font-weight: 700;
	font-style: normal;
	text-transform: none;
	font-size: clamp(1.25rem, 3.2vw, 1.6rem);
	letter-spacing: normal;
	color: var(--wp--preset--color--accent-fonce);
}
/* Le « Annuler la réponse » juxtaposé au titre reste un lien d'action discret,
   sans capitales ni grande graisse. */
.wp-block-comments .comment-reply-title small {
	font-weight: 300;
	text-transform: none;
	font-size: 1rem;
}

/* Étiquettes du formulaire : Raleway lisible en méta-encre (langage « méta » du
   site, comme les dates et mots-clés). */
.wp-block-comments .comment-form label {
	font-family: "Raleway";
	font-weight: 400;
	font-size: 1rem;
	color: var(--wp--preset--color--meta-encre);
}

/* Champs de saisie : Open Sans pour le confort de frappe d'un texte long
   (le défaut Raleway des champs est réservé aux recherches courtes), bordure
   calme alignée sur les champs de recherche du site. */
.wp-block-comments .comment-form input[type="text"],
.wp-block-comments .comment-form input[type="email"],
.wp-block-comments .comment-form input[type="url"],
.wp-block-comments .comment-form textarea {
	font-family: "Open Sans";
	font-size: 1rem;
	color: var(--wp--preset--color--texte);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--meta-doux);
	border-radius: 7px;
	padding: 0.65rem 0.9rem;
	transition: border-color 0.2s ease;
}
.wp-block-comments .comment-form input:focus,
.wp-block-comments .comment-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}
.wp-block-comments .comment-form input::placeholder,
.wp-block-comments .comment-form textarea::placeholder {
	color: var(--wp--preset--color--meta-doux);
	opacity: 1;
}

/* Mentions du formulaire (consigne, consentement cookies) : méta lisible en
   Open Sans, un cran sous le corps. */
.wp-block-comments .comment-form .comment-notes,
.wp-block-comments .comment-form .comment-form-cookies-consent label {
	font-family: "Open Sans";
	font-weight: 400;
	font-size: 0.95rem;
	color: var(--wp--preset--color--meta-encre);
	text-transform: none;
}

/* Bouton d'envoi : action corail en CONTOUR. Le seul bouton plein du site reste
   le Ko-fi (DESIGN, « Seul bouton plein du site ») ; le contour corail signale
   l'action (Corail = Action) et se remplit au survol. */
.wp-block-comments .comment-form .submit,
.wp-block-comments .form-submit input[type="submit"] {
	font-family: "Raleway";
	font-weight: 400;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--lien);
	background: transparent;
	border: 1px solid var(--wp--preset--color--lien);
	border-radius: 6px;
	padding: 0.6rem 1.4rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-comments .comment-form .submit:hover,
.wp-block-comments .comment-form .submit:focus,
.wp-block-comments .form-submit input[type="submit"]:hover,
.wp-block-comments .form-submit input[type="submit"]:focus {
	background: var(--wp--preset--color--lien);
	color: var(--wp--preset--color--base);
}

/* Contenu d'un commentaire : Open Sans en encre du corps, comme tout texte
   courant lu sur le site. */
.wp-block-comments .wp-block-comment-content {
	font-family: "Open Sans";
	color: var(--wp--preset--color--texte);
}

/* Le paragraphe interne d'un commentaire hérite d'une marge haute de 1.5em
   posée globalement sur core/paragraph (theme.json > styles.blocks). On la
   neutralise ici sans toucher au reste du site : la spécificité (0‑2‑1) suffit
   à battre la règle globale :where(p) (0‑1‑0), sans !important. */
.wp-block-comments .wp-block-comment-content p {
	margin-top: 0;
}

/* Liens d'action du fil (Répondre, Modifier) : Raleway, corail (action),
   petite taille mais lisible. */
.wp-block-comments .wp-block-comment-reply-link a,
.wp-block-comments .wp-block-comment-edit-link a {
	font-family: "Raleway";
	font-weight: 400;
	font-size: 0.95rem;
	color: var(--wp--preset--color--lien);
}


/* ─── [Refonte] Indicateur de focus CLAVIER des champs de saisie ───────────
 * Les champs (commentaire de l'article, recherches) masquent l'outline natif et
 * ne signalaient le focus que par une bordure teal de 1px, trop ténue au clavier
 * (WCAG 2.4.7 « Focus visible » / 1.4.11, exigence d'accessibilité du projet).
 * On rétablit un repère franc, réservé au focus CLAVIER (:focus-visible : rien au
 * clic souris). Un outline, pas une ombre : conforme au principe « Plat, aucune
 * ombre ». La bordure accent posée par les règles ci-dessus subsiste en plus.
 * Côté recherche, l'outline va sur le wrapper bordé (le champ est sans bordure à
 * l'intérieur) via :has(), pour entourer le champ visible et non son intérieur.
 */
.wp-block-comments .comment-form input[type="text"]:focus-visible,
.wp-block-comments .comment-form input[type="email"]:focus-visible,
.wp-block-comments .comment-form input[type="url"]:focus-visible,
.wp-block-comments .comment-form textarea:focus-visible,
.footer-search .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible),
.page-search .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}