/* Flore — Habillage aquarelle 1.26.0
   Le lavis du logo passé en fond de site, la palette violette, et la barre de
   progression de lecture. Se retire d'un bloc :
   add_filter( 'flore_bandeau_fond', '__return_false' ); */

:root {
	--flore-papier: #f7f4ec;
	--flore-violet: #7b5aa6;         /* pigment dominant, liens, barre */
	--flore-violet-fonce: #4c3a6b;   /* titres, texte fort */
	--flore-violet-pale: #d6c9e6;    /* filets, fonds de survol */
	--flore-rose: #ad717b;           /* pétales du logo ; cadre de focus clavier */
	--flore-encre: #342f3d;          /* texte courant, teinté violet */

	/* L'orange du gerbera du bandeau — teinte 30°, relevée sur la tuile même.
	   C'est la seule note chaude de l'identité, et c'est elle qui fait lire le
	   violet comme violet. Elle sert à ce qui encadre : encadrés, citations,
	   tableaux. Jamais à un lien, jamais à un état. */
	--flore-orange: #935516;         /* filets et texte d'en-tête — 5,4:1 sur le papier */
	--flore-orange-pale: #f7e6d4;    /* fond d'en-tête de tableau */
	--flore-orange-filet: #dcbb9a;   /* bordures de cellules */
	--flore-orange-fond: rgba(147, 85, 22, 0.10);  /* fond d'encadré, sur le lavis */
	--flore-orange-clair: #ffc561;   /* l'orange quand le fond est violet — poussé vers
	                                    le jaune, le plus loin du violet possible */

	/* Le violet d'un cran plus sombre, celui du survol des carrés du bandeau :
	   c'est le seul fond violet sur lequel l'orange clair tient 4,8:1. Il servait
	   déjà, écrit en dur dans bandeau.css ; il est nommé ici pour que le survol
	   du bouton de recherche soit exactement le même. */
	--flore-violet-survol: #624885;
}

/* La colonne de nuit de la palette.

   Jusqu'à la 1.15.0, seuls les oranges l'avaient. Les violets restaient à leur
   valeur de jour, et personne ne le voyait : le fond de page était crème dans
   les deux modes, du violet sombre sur du crème se lit très bien. La 1.13.0 a
   noirci la page, et ces valeurs se sont retrouvées sur du presque-noir —
   1,7:1 pour la ligne de pied de page, 3,3:1 pour le fil d'Ariane.

   Les valeurs sont celles que le document des couleurs annonçait déjà : elles
   n'étaient écrites nulle part. Elles servent aussi au socle, qui lit
   « var(--flore-violet, …) » et « var(--flore-ici, …) » précisément pour que
   l'habillage puisse le reteindre — sans valeur de nuit, il retombait sur ses
   propres replis, taillés pour le papier.

   Un fond plein ne suit PAS cette colonne : voir les boutons plus bas. */

html.flore-nuit {
	--flore-orange: #db9f62;
	--flore-orange-pale: #2a1f14;
	--flore-orange-filet: #4a3826;
	--flore-orange-fond: rgba(219, 159, 98, 0.10);

	--flore-violet: #9d86c9;        /* 5,7:1 sur le fond de nuit */
	--flore-violet-fonce: #cbb6e6;  /* 9,8:1 — titres, pied de page, menu */
	--flore-ici: #d79aa6;           /* 7,8:1 — « vous êtes là » du socle */
}

/* ---------------------------------------------------------------- le papier */

body {
	background-color: var(--flore-papier);
	background-image: url("fond-aquarelle.webp");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	/* Le lavis reste immobile : la page glisse dessus comme une feuille sur le
	   buvard, et le motif ne se répète jamais, quelle que soit la longueur. */
	background-attachment: fixed;
	color: var(--flore-encre);
}

/* De nuit, on change de feuille — on ne l'éteint pas.

   Le mode nuit du socle noircit bien « background-color », mais le lavis est
   une IMAGE : elle recouvrait la couleur, et la page restait crème sous des
   blocs sombres. Le fond de nuit est donc le même lavis, retourné : le crème
   devient le presque-noir du socle, et le pigment, au lieu de creuser
   l'ombre, remonte vers le violet d'accent. Le motif, sa texture et son
   raccord sont ceux du fichier de jour, pixel pour pixel.

   Le double :root passe devant « html.flore-nuit body », posé par le socle
   dans sa feuille en ligne. --base-2 est sa variable de fond ; la valeur
   écrite derrière est le repli si le socle est absent. */

html.flore-nuit:root:root body {
	background-color: var(--base-2, #141719);
	background-image: url("fond-aquarelle-nuit.webp");
}

/* En sépia, pas de troisième fichier : le lavis de jour passe SOUS la teinte
   du papier. « multiply » garde le motif et lui donne la couleur du fond —
   c'est exactement ce que fait un lavis sur un papier teinté. Sans cette
   règle, le sépia ne se voyait nulle part sur le fond de page. */

html.flore-sepia:root:root body {
	background-color: var(--base-2, #efe7d8);
	background-blend-mode: multiply;
}

/* Les conteneurs du thème sont pleins par défaut : blancs le jour, gris
   ardoise la nuit. On les efface pour que le papier traverse toute la page.

   Le double :root n'est pas une précaution, c'est la correction : ces
   sélecteurs sont ceux de GeneratePress, qui les pose dans sa feuille EN
   LIGNE — servie après les extensions. À spécificité égale, l'ordre de
   chargement tranchait, et il tranchait pour lui : cette règle n'a rien
   effacé depuis la 1.0.0. On reprend donc ses sélecteurs mot pour mot,
   précédés de :root:root.

   Les sous-menus déroulants (.main-navigation ul ul) n'y sont pas, et c'est
   voulu : eux flottent au-dessus du texte et gardent leur fond plein. */

:root:root .site-header,
:root:root .main-navigation,
:root:root .separate-containers .inside-article,
:root:root .separate-containers .comments-area,
:root:root .separate-containers .page-header,
:root:root .separate-containers .paging-navigation,
:root:root .separate-containers .inside-page-header,
:root:root .separate-containers .site-main > *,
:root:root .inside-page-header,
:root:root .one-container .container,
:root:root .one-container .site-content,
:root:root .site-content,
:root:root .site-footer,
:root:root .footer-widgets,
:root:root .inside-footer-widgets,
:root:root .sidebar .widget,
:root:root .widget-area .widget {
	background-color: transparent;
}

/* ------------------------------------------------------------- le logo

   Le fichier du logo porte un fond blanc plein. Une fois les conteneurs
   effacés, c'était le seul rectangle blanc de la page — et de nuit, sur le
   fond sombre, il crevait l'écran.

   Rien n'est retouché dans l'image : c'est le mode de fusion qui fait le
   détourage, et il le fait au pixel près, sans détourer un logo à la main.

   DE JOUR ET EN SÉPIA — « multiply ». Le blanc multiplié par le papier donne
   le papier : le fond du fichier disparaît exactement, le lavis passe sous la
   marque, et l'encre foncée du nom ne bouge pas d'un ton.

   DE NUIT — le même détourage, en trois temps. « invert » retourne les
   clartés : le fond blanc devient noir, l'encre foncée du nom devient claire.
   « hue-rotate(180deg) » rend aux couleurs leur teinte, que l'inversion avait
   fait basculer de l'autre côté de la roue : le disque reste sauge, les
   coquelicots restent roses. « screen » efface alors le noir comme
   « multiply » effaçait le blanc. Les traits du dessin passent du noir au
   clair — sur un fond sombre, c'est le sens d'un dessin au trait.

   C'est une solution de tenue, pas la bonne : le vrai remède est un second
   fichier, la marque re-encrée pour le fond sombre. Le jour où il existe,
   ces deux lignes de nuit tombent et laissent la place à un échange d'image. */

:root:root .site-logo img,
:root:root .site-header img.header-image {
	mix-blend-mode: multiply;
}

html.flore-nuit:root:root .site-logo img,
html.flore-nuit:root:root .site-header img.header-image {
	mix-blend-mode: screen;
	filter: invert(1) hue-rotate(180deg);
}

/* Sans fond plein, il faut autre chose pour séparer l'en-tête du contenu. */
.site-header,
.main-navigation {
	border-bottom: 1px solid var(--flore-violet-pale);
}

.site-footer {
	border-top: 1px solid var(--flore-violet-pale);
	color: var(--flore-violet-fonce);
}

/* ------------------------------------------------------------ le violet */

h1,
h2,
h3,
h4,
.entry-title,
.entry-title a {
	color: var(--flore-violet-fonce);
}

a {
	color: var(--flore-violet);
	text-decoration-color: var(--flore-violet-pale);
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--flore-violet-fonce);
	text-decoration-color: currentColor;
}

/* ------------------------------------- les liens des blocs de colonne

   Dans un bloc de colonne, les liens sont des lignes de liste : ils se suivent,
   ils sont tous des liens, et souligner chacun d'eux ne distingue rien — cinq
   traits sous cinq titres pour dire cinq fois la même chose. Le soulignement
   redevient ce qu'il est ailleurs : la marque du survol.

   La couleur suffit au repos. Elle ne va pas seule pour autant : le curseur, la
   position en liste et le survol disent chacun leur part, et le cadre rose du
   focus reste la voie du clavier.

   Les blocs du socle — sommaire de la page, sommaire de la rubrique — le
   faisaient déjà, chacun pour soi. « Articles récents » et « Commentaires
   récents » sont des blocs natifs : personne ne l'avait écrit pour eux, et ils
   gardaient le soulignement du navigateur. La règle est écrite une fois, ici,
   pour tous les blocs de la colonne et du pied.

   LES DEUX ÉTATS PASSENT PAR LE MÊME DOUBLE :root. Écrire le repos ici et
   laisser le survol aux feuilles du socle donnerait le repos gagnant — plus
   spécifique — et le survol ne soulignerait plus rien nulle part. */

:root:root .widget a {
	text-decoration: none;
}

:root:root .widget a:hover,
:root:root .widget a:focus {
	text-decoration: underline;
	text-decoration-color: currentColor;
}

/* Le nuage fait exception : ses mots marquent le survol d'un filet posé sous
   la ligne de base, pas d'un soulignement. Les deux ensemble tracent deux
   traits. */

:root:root .widget .flore-nuage a:hover,
:root:root .widget .flore-nuage a:focus {
	text-decoration: none;
}

/* ------------------------------------------------------- le menu texte

   Trois entrées, les outils. Elles ne suivaient pas la charte : gris du thème,
   corps 15 px, et un filet rose sous l'entrée courante.

   GeneratePress pose ses couleurs de menu en style en ligne, sur un sélecteur
   plus spécifique que « .main-navigation a » — la règle d'ici ne passait donc
   jamais. On se place au même niveau, et le double :root suffit à trancher
   sans recourir à !important, quel que soit l'ordre de chargement. */

:root:root .main-navigation .main-nav ul li a {
	color: var(--flore-violet-fonce);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-decoration: none;
}

:root:root .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
:root:root .main-navigation .main-nav ul li a:focus-visible {
	color: var(--flore-violet);
	background-color: transparent;
	text-decoration: none;
}

/* Où l'on est : le gras, et rien d'autre. Le filet rose que pose le socle sous
   l'entrée courante est retiré ici — deux marqueurs pour une même information
   en font un de trop, et un soulignement dans un menu de trois liens se lit
   comme une décoration, pas comme un repère. */

:root:root .main-navigation .main-nav ul li[class*="current-menu-"] > a,
:root:root .main-navigation .main-nav ul li[class*="current_page_"] > a {
	color: var(--flore-violet-fonce);
	font-weight: 700;
	background-color: transparent;
	box-shadow: none;
	text-decoration: none;
}

/* De nuit, le violet foncé tombe sous le seuil : même clarté que les titres. */

html.flore-nuit:root:root .main-navigation .main-nav ul li a {
	color: #cbb6e6;
}

html.flore-nuit:root:root .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a {
	color: #e4d8f3;
}

html.flore-nuit:root:root .main-navigation .main-nav ul li[class*="current-menu-"] > a,
html.flore-nuit:root:root .main-navigation .main-nav ul li[class*="current_page_"] > a {
	color: #e4d8f3;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--flore-rose);
	outline-offset: 2px;
}

::selection {
	background: var(--flore-violet-pale);
	color: var(--flore-violet-fonce);
}

.wp-block-button__link,
.button,
button.button {
	background-color: var(--flore-violet);
	color: var(--flore-papier);
	border-radius: 2px;
}

.wp-block-button__link:hover,
.button:hover {
	background-color: var(--flore-violet-fonce);
	color: var(--flore-papier);
}

/* Un bouton plein ne suit pas la colonne de nuit : c'est son FOND qui porte le
   violet, et le texte est le papier. Éclaircir le fond ferait du crème sur du
   mauve — 2,9:1. Il garde donc les violets du jour, où le papier tient 4,9:1
   au repos et 6,9:1 au survol. Le bouton de recherche suit la même règle ; son
   survol, lui, est déjà écrit en dur plus bas (violet sombre et orange clair)
   et ne dépend d'aucune variable de la colonne. */

html.flore-nuit .wp-block-button__link,
html.flore-nuit .button,
html.flore-nuit button.button,
html.flore-nuit:root:root form[role="search"] button[type="submit"],
html.flore-nuit:root:root form[role="search"] .search-submit {
	background-color: #7b5aa6;
	color: var(--flore-papier);
}

html.flore-nuit .wp-block-button__link:hover,
html.flore-nuit .button:hover {
	background-color: #624885;
	color: var(--flore-papier);
}

/* --------------------------------------------------------- la recherche

   La barre de recherche sortait telle que WordPress et GeneratePress la
   posent, sans une couleur de la charte : bouton anthracite #32373C — la
   couleur par défaut de wp-element-button —, champ au gris du thème, angles
   vifs, et un champ plus étroit que son bouton.

   La grammaire des couleurs s'applique : le bouton mène quelque part, il est
   donc violet ; le survol reprend celui des carrés du bandeau, violet sombre
   et libellé orange clair ; le cadre de focus reste le rose d'état, posé plus
   haut par la règle :focus-visible commune.

   Les sélecteurs passent par form[role="search"] : le champ du thème et celui
   du bloc sont ainsi couverts par une seule règle. Le double :root est là pour
   la même raison qu'ailleurs — GeneratePress pose ses couleurs de formulaire
   en style en ligne, à spécificité égale il passerait devant. */

/* Le libellé se lit comme un titre de colonne, dans la police des titres. */
.wp-block-search__label {
	display: block;
	margin-bottom: 0.45em;
	font-family: "Fraunces Flore", Georgia, "Iowan Old Style", "Times New Roman", serif;
	font-weight: 500;
	font-size: 1.15rem;
	font-optical-sizing: auto;
	font-synthesis-weight: none;
	letter-spacing: -0.005em;
	color: var(--flore-violet-fonce);
}

html.flore-nuit .wp-block-search__label {
	color: #cbb6e6;
}

/* Le champ : le fond opaque de ce qui doit rester lisible sur le lavis — le
   même que les tableaux —, un filet violet pâle, et l'encre du texte. */
:root:root form[role="search"] input[type="search"] {
	flex: 1 1 0%;
	min-width: 0;
	padding: 0.55em 0.85em;
	border: 1px solid var(--flore-violet-pale);
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.74);
	color: var(--flore-encre);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

:root:root form[role="search"] input[type="search"]:focus {
	border-color: var(--flore-violet);
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--flore-encre);
}

form[role="search"] input[type="search"]::placeholder {
	color: var(--flore-encre);
	opacity: 0.7;
}

html.flore-nuit:root:root form[role="search"] input[type="search"] {
	border-color: rgba(203, 182, 230, 0.32);
	background-color: rgba(255, 255, 255, 0.06);
	color: #dfe3e7;
}

html.flore-nuit:root:root form[role="search"] input[type="search"]:focus {
	border-color: #9d86c9;
	background-color: rgba(255, 255, 255, 0.10);
	color: #dfe3e7;
}

html.flore-nuit form[role="search"] input[type="search"]::placeholder {
	color: #dfe3e7;
	opacity: 0.7;
}

/* Le bouton : violet plein dans les deux modes — un bouton rempli se lit de la
   même façon sur le papier et sur le fond de nuit. */
:root:root form[role="search"] button[type="submit"],
:root:root form[role="search"] .search-submit {
	flex: 0 0 auto;
	padding: 0.55em 1.1em;
	border: 1px solid transparent;
	border-radius: 2px;
	background-color: var(--flore-violet);
	color: var(--flore-papier);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

:root:root form[role="search"] button[type="submit"]:hover,
:root:root form[role="search"] button[type="submit"]:focus-visible,
:root:root form[role="search"] .search-submit:hover,
:root:root form[role="search"] .search-submit:focus-visible {
	background-color: var(--flore-violet-survol);
	color: var(--flore-orange-clair);
}

/* Dans la colonne, le champ et le bouton côte à côte se partageaient 280 px :
   134 pour l'un, 136 pour l'autre. Le champ prend toute la ligne, le bouton
   passe dessous. Sur la largeur d'un article, ils restent côte à côte. */
:root:root .widget-area .wp-block-search__inside-wrapper {
	flex-wrap: wrap;
	row-gap: 0.5em;
}

:root:root .widget-area form[role="search"] input[type="search"] {
	flex: 1 1 100%;
}

:root:root .widget-area .wp-block-search__button {
	margin-left: 0;
}

/* ------------------------------------------------- le trait de pinceau */

/* Un vrai coup de pinceau sous les intertitres, pas un trait de règle. */
.entry-content h2 {
	position: relative;
	padding-bottom: 0.42em;
}

.entry-content h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 3.2em;
	height: 0.34em;
	background: url("trait-aquarelle.webp") no-repeat left center / 100% 100%;
}

hr,
.wp-block-separator {
	height: 22px;
	margin: 2.4em auto;
	border: 0;
	background: url("trait-aquarelle.webp") no-repeat center / 62% 100%;
}

/* Encadrés et citations : un lavis orange, bordé du pinceau orange.
   .flore-resume est l'encadré « En bref » du socle : la règle ne l'attrapait
   pas, il gardait une bordure violette pleine et aucun fond. */
blockquote,
.wp-block-quote,
.flore-encadre,
.entry-content .flore-resume {
	position: relative;
	padding: 1em 1.2em;
	border: 0;
	border-left: 0;
	background: var(--flore-orange-fond);
}

blockquote::before,
.wp-block-quote::before,
.flore-encadre::before,
.entry-content .flore-resume::before {
	content: "";
	position: absolute;
	top: 0.5em;
	bottom: 0.5em;
	left: 0;
	width: 0.28em;
	background: url("trait-orange.webp") no-repeat center / 500% 100%;
}

/* Le titre de l'encadré suit son filet. */

.entry-content .flore-resume > p:first-child,
.entry-content .flore-resume > .flore-resume-t,
blockquote cite,
.wp-block-quote cite {
	color: var(--flore-orange);
}

/* Ce qui doit rester lisible quoi qu'il arrive garde un fond opaque. */
.wp-block-table table,
.entry-content table,
.wp-block-code,
.wp-block-preformatted {
	background-color: rgba(255, 255, 255, 0.74);
}

/* Les cellules portaient deux bordures différentes : violette en tête, noire
   en corps. Une seule maintenant, et elle est orange. */

.wp-block-table th,
.wp-block-table td,
.entry-content table th,
.entry-content table td {
	border: 1px solid var(--flore-orange-filet);
}

.wp-block-table th,
.entry-content table th {
	background-color: var(--flore-orange-pale);
	color: var(--flore-orange);
}

/* Les cartes d'identité n'ont pas de ligne de tête : leur première colonne
   est l'intitulé, écrit en td. On la traite comme un en-tête de ligne — mais
   seulement là, sinon on colorerait la première colonne des vrais tableaux.
   (Le fond de la question reste à corriger dans les articles : ces cellules
   devraient être des th scope="row".) */

.entry-content table:not(:has(thead)) td:first-child {
	background-color: var(--flore-orange-pale);
	color: var(--flore-orange);
}

html.flore-nuit .wp-block-table table,
html.flore-nuit .entry-content table {
	background-color: rgba(255, 255, 255, 0.05);
}

/* ------------------------------------ les photos qui mènent quelque part

   Le geste des carrés du bandeau, porté au reste du site : une photo qui mène
   quelque part grandit d'un rien sous la souris, et un cadre orange se pose
   autour d'elle. Il sert dans les listes d'articles — accueil, rubriques,
   étiquettes, recherche, auteur — où chaque entrée porte sa photo à la une.

   Il ne se pose QUE sur une image tenue dans un lien : d'où le `> a` partout.
   L'image à la une d'un article ouvert et les photos de la galerie ne sont pas
   cliquables — elles ne bougent pas. Un cadre de survol sur une image qui ne
   mène nulle part serait une promesse que le clic ne tient pas.

   Le cadre prend ici l'orange plein, 5,4:1 sur le papier, et non l'orange clair
   du bandeau, qui n'existe que sur fond violet. La nuit le fait basculer seul :
   la variable vaut #DB9F62 sous html.flore-nuit. */

.post-image:has(> a),
.entry-content figure.wp-block-image:has(> a) {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
}

/* Le cadre est porté par le lien lui-même, et non par la figure qui l'entoure.
   Ce n'est pas un détail de forme : un `:has()` qui doit se rejouer au passage
   de la souris n'est pas rafraîchi de façon fiable — vérifié sur ce site même,
   où la règle s'appliquait au titre et pas à l'image, dans la même page. Le
   survol se pose donc là où il naît, comme sur les carrés du bandeau. */
.post-image > a,
.entry-content figure.wp-block-image > a {
	position: relative;
	display: block;
	line-height: 0;
}

.post-image > a img,
.entry-content figure.wp-block-image > a img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.45s ease;
}

.post-image > a::after,
.entry-content figure.wp-block-image > a::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	border: 3px solid var(--flore-orange);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.post-image > a:hover img,
.entry-content figure.wp-block-image > a:hover img {
	transform: scale(1.08);
}

.post-image > a:hover::after,
.entry-content figure.wp-block-image > a:hover::after {
	opacity: 1;
}

/* Les deux moitiés de la carte se répondent : viser le titre fait bouger la
   photo, viser la photo souligne le titre. Le lecteur apprend d'un côté que
   l'autre mène au même endroit.

   Rien d'autre ne déclenche : ni la date, ni l'extrait, ni les étiquettes. Un
   survol qui s'allume là où rien ne se clique est un survol qui ment — c'est
   pourquoi le `:hover` n'est jamais posé sur l'article entier.

   Ces trois règles sont le seul endroit où le survol passe par `:has()`, et le
   geste ne repose pas sur elles : là où le navigateur ne les rejoue pas, la
   photo et le titre gardent chacun le leur. */
.inside-article:has(.entry-title a:hover) .post-image > a img {
	transform: scale(1.08);
}

.inside-article:has(.entry-title a:hover) .post-image > a::after {
	opacity: 1;
}

/* Le titre survolé se souligne — il ne le faisait pas : le thème sort les
   titres sans soulignement et `a:hover` n'ajoute qu'une couleur. Un lien de
   liste qui ne se signale pas au passage de la souris est le seul lien du site
   dans ce cas. */
.inside-article:has(.post-image > a:hover) .entry-title a,
.inside-article .entry-title a:hover {
	color: var(--flore-accent-actif, var(--flore-violet-fonce));
	text-decoration: underline;
	text-decoration-color: currentColor;
}

/* Au clavier, le cadre rose du focus fait déjà ce travail : on n'en superpose
   pas deux — même règle que les carrés du bandeau. Et comme là-bas, le contour
   posé sur le lien est recouvert par l'image : c'est le ::before qui passe
   au-dessus. */
.post-image > a:focus-visible::after,
.entry-content figure.wp-block-image > a:focus-visible::after {
	opacity: 0;
}

.post-image > a:focus-visible,
.entry-content figure.wp-block-image > a:focus-visible {
	outline: 3px solid var(--flore-rose);
	outline-offset: -3px;
}

.post-image > a:focus-visible::before,
.entry-content figure.wp-block-image > a:focus-visible::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	border: 3px solid var(--flore-rose);
	pointer-events: none;
}

/* Mouvement réduit : le cadre reste — c'est lui qui porte l'information —,
   l'agrandissement et le fondu s'arrêtent. */
@media (prefers-reduced-motion: reduce) {
	.post-image > a img,
	.post-image > a::after,
	.entry-content figure.wp-block-image > a img,
	.entry-content figure.wp-block-image > a::after {
		transition: none;
	}

	.post-image > a:hover img,
	.inside-article:has(.entry-title a:hover) .post-image > a img,
	.entry-content figure.wp-block-image > a:hover img {
		transform: none;
	}
}

/* Sur le papier, ni cadre ni agrandissement : il n'y a pas de souris. */
@media print {
	.post-image > a::after,
	.entry-content figure.wp-block-image > a::after {
		display: none;
	}
}

/* ------------------------------- les blocs du socle qui écrivent en dur

   Le socle teinte ses blocs avec flore_couleur(), #7A5C86, imprimé tel quel
   dans sa feuille en ligne : pas de variable, donc rien que l'habillage puisse
   reteindre. Sur le papier, 5,1:1 ; sur le fond de nuit, 3,2:1.

   Quatre blocs sont concernés — le bouton d'écoute, la signature d'auteur, les
   liens de partage, le bouton du panneau de lecture. Ils reprennent de nuit le
   violet de la colonne, texte et filet ; leurs états pleins retournent le
   couple, fond violet et encre du fond de page, plutôt que le blanc du socle
   qui ne tiendrait pas.

   C'est un rattrapage, et il est nommé comme tel : la vraie correction est que
   le socle passe cette couleur en variable, comme il l'a déjà fait pour le fil
   d'Ariane. Ce jour-là, ce bloc tombe. */

html.flore-nuit .flore-ecoute,
html.flore-nuit .flore-auteur-nom,
html.flore-nuit .flore-partage-lien,
html.flore-nuit .flore-panneau-btn {
	color: var(--flore-violet);
	border-color: var(--flore-violet);
}

html.flore-nuit .flore-auteur,
html.flore-nuit .flore-som-bloc {
	border-left-color: var(--flore-violet);
}

html.flore-nuit .flore-ecoute:hover,
html.flore-nuit .flore-ecoute:focus,
html.flore-nuit .flore-partage-lien:hover,
html.flore-nuit .flore-partage-lien:focus {
	background: var(--flore-violet);
	color: var(--base-2, #141719);
}

/* --------------------------------------------- la barre de progression */

.flore-progression {
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	left: 0;
	height: 5px;
	pointer-events: none;
	background: rgba(214, 201, 230, 0.22);
}

.flore-progression__jauge {
	display: block;
	width: 0;
	height: 100%;
	/* La texture est calée sur la largeur de la fenêtre : la jauge dévoile le
	   coup de pinceau au lieu de l'étirer. */
	background: url("trait-progression.webp") no-repeat left center / 100vw 100%;
}

/* Écrans tactiles : la barre passe sous l'encoche des navigateurs mobiles. */
@supports (top: env(safe-area-inset-top)) {
	.flore-progression {
		top: env(safe-area-inset-top);
	}
}

/* Connecté à l'administration, la barre de lecture ne se voyait pas sur
   ordinateur — et se voyait sur téléphone.

   La barre d'outils de WordPress est fixée en haut, sur 32 px, à z-index
   99999 ; la jauge est à 999 et commence au même endroit : elle passait
   dessous, entièrement. Sous 600 px, WordPress repasse sa barre en position
   absolue — elle défile alors avec la page et découvre la jauge dès qu'on
   descend, ce qui explique qu'un téléphone n'ait jamais montré le défaut.
   Un visiteur, lui, n'a pas cette barre et n'a jamais rien perdu.

   Monter la jauge au-dessus de 99999 reviendrait à passer devant
   l'administration : c'est elle qui doit rester accessible. On descend donc
   la jauge sous elle, aux deux hauteurs que WordPress lui donne. */

body.admin-bar .flore-progression {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .flore-progression {
		top: 46px;
	}
}

/* Sous 600 px la barre d'outils n'est plus fixe : plus rien à contourner. */
@media screen and (max-width: 600px) {
	body.admin-bar .flore-progression {
		top: 0;
	}
}

@supports (top: env(safe-area-inset-top)) {
	body.admin-bar .flore-progression {
		top: calc(env(safe-area-inset-top) + 32px);
	}

	@media screen and (max-width: 782px) {
		body.admin-bar .flore-progression {
			top: calc(env(safe-area-inset-top) + 46px);
		}
	}

	@media screen and (max-width: 600px) {
		body.admin-bar .flore-progression {
			top: env(safe-area-inset-top);
		}
	}
}

/* ------------------------------------------------------------ variantes */

/* iOS gère mal l'arrière-plan fixe : sur petit écran, le lavis défile avec la
   page et se répète, ce que son motif raccordable permet sans couture. */
@media (max-width: 780px) {
	body {
		background-attachment: scroll;
		background-repeat: repeat;
		background-size: 700px auto;
	}
}

/* Certains navigateurs impriment les fonds : celui-ci n'a rien à y faire.
   Les trois sélecteurs répondent aux trois règles de fond posées plus haut —
   sans eux, une page lue en mode nuit s'imprimerait sur fond noir. */
@media print {
	:root:root body,
	html.flore-nuit:root:root body,
	html.flore-sepia:root:root body {
		background-image: none;
		background-color: #fff;
	}

	/* Sur le papier de l'imprimante, le logo n'a rien à détourer ni à
	   retourner : la classe de nuit reste posée sur html, elle ne doit pas
	   suivre jusqu'ici. */
	:root:root .site-logo img,
	:root:root .site-header img.header-image,
	html.flore-nuit:root:root .site-logo img,
	html.flore-nuit:root:root .site-header img.header-image {
		mix-blend-mode: normal;
		filter: none;
	}

	.flore-progression {
		display: none;
	}
}


/* ==================================================================
   Repris du CSS additionnel du thème, le 9 septembre 2026.
   Ces règles y avaient été posées faute de mieux ; le CSS additionnel
   appartient au thème et n'aurait pas survécu à un changement de thème.
   Le calque de protection des photos date du 8 septembre ; le reste,
   du 9. Seule la requête d'impression du calque a été réécrite : son
   texte d'origine a été perdu au déplacement.
   ================================================================== */

/* Photos du site : calque de protection.
   Le calque neutralise le clic droit, l'appui long et le glisser-déposer
   sur les photos ; il ne remplace pas une protection, il ajoute de la
   friction. */

.entry-content figure.wp-block-image {
	position: relative;
}

.entry-content figure.wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Une image placée dans un lien garde son lien : pas de calque au-dessus. */
.entry-content figure.wp-block-image:has(a)::after {
	content: none;
}

.entry-content figure.wp-block-image img {
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* Une image tenue dans un lien — les vignettes de la galerie, qui mènent à la
   fiche de leur fleur — garde le pointeur sur le LIEN, jamais sur l'image :
   le clic gauche suit le lien, le clic droit ouvre le menu du lien, sans
   « Enregistrer l'image sous ». Sans cette ligne, rendre une vignette
   cliquable rouvrirait la copie que le calque ferme. */
.entry-content figure.wp-block-image a img {
	pointer-events: none;
}

@media print {
	.entry-content figure.wp-block-image::after { content: none; }
	.entry-content figure.wp-block-image img { pointer-events: auto; }
}

/* Planche des pièces du métier : six dessins cliquables.
   Le bloc Groupe pose un conteneur intérieur : la grille va sur lui
   quand il existe, sur le groupe lui-même sinon. */

.entry-content .flore-pieces > .wp-block-group__inner-container,
.entry-content .flore-pieces:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem 1.2rem;
	margin: 2rem 0;
}

.entry-content .flore-pieces .flore-piece {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* Les tuiles n'ont pas besoin d'un cadre à elles : une image dans un lien
   porte déjà, partout sur le site, le cadre orange et l'agrandissement au
   survol. On lui donne seulement le même arrondi. */

.entry-content .flore-pieces .flore-piece a {
	display: block;
	border-radius: 8px;
}

.entry-content .flore-pieces .flore-piece > a::after {
	border-radius: 8px;
}

.entry-content .flore-pieces .flore-piece img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.entry-content .flore-pieces .flore-piece figcaption {
	text-align: center;
	margin-top: .5em;
}

@media (max-width: 768px) {
	.entry-content .flore-pieces > .wp-block-group__inner-container,
	.entry-content .flore-pieces:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 430px) {
	.entry-content .flore-pieces > .wp-block-group__inner-container,
	.entry-content .flore-pieces:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: 1fr;
	}
}

/* Vignette de section : le petit dessin qui ouvre une section.
   Elle se pose après le titre ; le titre suivant dégage le flottant. */

.entry-content .flore-vignette {
	float: left;
	width: 88px;
	margin: .1em 1.1rem .5rem 0;
}

.entry-content .flore-vignette img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.entry-content:has(.flore-vignette) h2,
.entry-content:has(.flore-vignette) h3 {
	clear: left;
}

@media (max-width: 600px) {
	.entry-content .flore-vignette {
		width: 64px;
		margin-right: .8rem;
	}
}

/* Encadré « En bref » : marqué au survol, comme les dessins cliquables.
   Le cadre est un contour, pas une bordure : il ne décale rien. */

.flore-resume {
	outline: 3px solid transparent;
	outline-offset: 3px;
	transition: outline-color .18s ease-out;
}

.flore-resume:hover,
.flore-resume:focus-within {
	outline-color: var(--flore-orange);
}

.flore-resume p:not(.flore-resume-t) + p {
	margin-top: .55em;
}

/* ------------------------------------------------------------------
   Le survol d'un lien : la couleur d'accent, et un trait plus appuyé.
   Le trait remplace le gras : un vrai changement de graisse
   recomposerait le paragraphe à chaque survol, et le texte bougerait
   sous la souris. Le bandeau du menu principal garde sa mécanique à
   lui — l'orange y passerait mal sur le violet.
   ------------------------------------------------------------------ */

.site a:not(.flore-bandeau__lien):hover,
.site a:not(.flore-bandeau__lien):focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--flore-orange);
	-webkit-text-stroke: .3px currentColor;
}

/* Les nuages de mots : les plus fréquents portent la couleur.
   Le socle marque désormais la place exacte au classement de fréquence :
   p1 pour les trois premiers mots, p2 pour les suivants — trois en
   colonne, six dans le bandeau de pied de page. Les rangs t1 à t5, eux,
   continuent de ne dire que la taille.
   Au survol, les deux couleurs s'échangent. */

:root .flore-nuage .flore-nuage-m.flore-nuage-p1 {
	color: var(--flore-orange);
	font-weight: 800;
}

:root .flore-nuage .flore-nuage-m.flore-nuage-p2 {
	color: var(--flore-violet);
	font-weight: 800;
}

:root .flore-nuage .flore-nuage-m.flore-nuage-p1:hover,
:root .flore-nuage .flore-nuage-m.flore-nuage-p1:focus-visible {
	color: var(--flore-violet);
	-webkit-text-stroke: 0;
}

:root .flore-nuage .flore-nuage-m.flore-nuage-p2:hover,
:root .flore-nuage .flore-nuage-m.flore-nuage-p2:focus-visible {
	color: var(--flore-orange);
	-webkit-text-stroke: 0;
}

/* Les trois outils, en tête de page : la même règle que les premiers
   mots d'un nuage — orange au repos, violet au survol. */

#primary-menu .menu-item > a {
	color: var(--flore-orange);
	font-weight: 700;
}

#primary-menu .menu-item > a:hover,
#primary-menu .menu-item > a:focus-visible {
	color: var(--flore-violet);
	-webkit-text-stroke: 0;
}

@media (prefers-reduced-motion: reduce) {
	.flore-resume { transition: none; }
}

/* ------------------------------------------------- le plafond des photos */

/* Mesuré le 13 septembre sur le site en ligne : une photo d'article carrée
   prenait la colonne entière — 740 px de côté, soit 82 % de la hauteur d'un
   écran de 900 px, et la totalité d'un écran de portable une fois la barre du
   navigateur retirée. Le lecteur perdait le texte de vue à chaque photo, et
   l'accueil mesurait 12,5 écrans pour dix entrées.

   Le carré n'est pas en cause : c'est la largeur. Le plafond la ramène à
   520 px, centrée dans la colonne — 58 % de l'écran, mesuré après pose.

   Il ne se pose qu'au-dessus de 600 px. Sur téléphone le carré fait 315 px,
   39 % de la hauteur : rien à corriger, et un plafond en pixels y ferait
   maigrir la photo sans raison.

   Le nombre vient de PHP (--flore-photo-max, posé en ligne par
   flore_bandeau_photo_max_style) : le même sert à l'attribut sizes des
   images, qui dit au navigateur quel fichier choisir. Un nombre écrit deux
   fois finit par différer ; le repli ci-dessous ne sert que si l'extension
   est désactivée en laissant sa feuille.

   Les trois endroits où une photo prenait toute la colonne :
     .entry-content > figure.wp-block-image  les photos du corps de l'article
     .featured-image.page-header-image-single  l'image à la une d'un article
     .inside-article > .post-image  les vignettes de l'accueil et des archives

   Le `>` n'est pas décoratif : sans lui, la règle attraperait aussi les
   vignettes de la galerie, qui sont des figure.wp-block-image tenues dans un
   wp-block-gallery, et leur poserait un plafond de 520 px par vignette. */

@media screen and (min-width: 601px) {

	.entry-content > figure.wp-block-image,
	.featured-image.page-header-image-single,
	.inside-article > .post-image {
		max-width: var(--flore-photo-max, 520px);
		margin-left: auto;
		margin-right: auto;
	}
}

/* --------------------------------------------- les rangées de la galerie */

/* La galerie photo était annoncée « quatre colonnes partout, vignettes de
   179 px ». Faux pour douze sections sur vingt-deux : le bloc galerie de
   WordPress est un flex à flex-grow: 1, et une rangée incomplète s'étire
   pour remplir la largeur. Mesuré avant correction : 241 px pour une section
   de trois photos, 366 px pour strelitzia qui en a deux, et 740 px pour
   kalanchoé qui n'en a qu'une — toutes servies avec le fichier de 300 px,
   donc agrandies jusqu'à 2,5 fois. C'était la photo la plus floue du site.

   flex-grow: 0 suffit à garder les quatre colonnes ; la largeur est écrite
   pour ne pas dépendre de la règle de WordPress, qui la calcule sur 50 %
   pour la version à deux colonnes du téléphone. L'écart de gap est celui du
   bloc : trois intervalles à répartir sur quatre vignettes, soit 0,75 gap
   par vignette.

   Sous 600 px, rien : le téléphone garde ses deux colonnes de 153 px, et une
   section d'une seule photo y montre toujours sa vignette en grand — elle y
   est à sa place. */

@media screen and (min-width: 601px) {

	.entry-content .wp-block-gallery.has-nested-images.columns-4 > figure.wp-block-image {
		flex-grow: 0;
		width: calc(25% - var(--wp--style--unstable-gallery-gap, 0.5em) * 0.75);
	}
}