/* Flore — Thèmes du site 1.4.0
   ---------------------------------------------------------------------------
   « Feuillage », le thème du site, tiré du logo, et trois chartes de
   rechange offertes au lecteur — l'aquarelle d'origine, l'herbier, l'atelier.

   CE QUE CETTE FEUILLE FAIT, ET CE QU'ELLE NE FAIT PAS

   Elle ne redessine rien : elle redonne d'autres valeurs aux variables que
   l'habillage aquarelle a déjà posées, et elle remplace les quatre traits
   peints par des filets tracés. Toute la mise en page, tous les sélecteurs,
   toute la mécanique restent ceux de l'habillage. C'est la raison pour
   laquelle un thème tient en soixante lignes et non en trois mille.

   LES NOMS DE VARIABLES SONT CEUX DE L'AQUARELLE, ET ILS MENTENT UN PEU

   « --flore-violet » ne vaut plus un violet dans « Herbier » : il y vaut un
   vert. Le nom dit la PLACE — le pigment dominant, celui des liens et des
   boutons —, pas la couleur. Les renommer aurait voulu dire réécrire les
   trente-quatre kilo-octets de la feuille aquarelle, pour un gain de
   vocabulaire et un risque de fourche. La place de chaque variable est donc
   rappelée en face de chaque valeur ci-dessous.

     --flore-papier         le fond de page
     --flore-violet         le pigment dominant : liens, boutons, barre
     --flore-violet-fonce   les titres, le texte fort, le menu
     --flore-violet-pale    les filets et les fonds de survol
     --flore-violet-survol  le fond plein d'un bouton survolé
     --flore-rose           le cadre de focus au clavier — et lui seul
     --flore-encre          le texte courant
     --flore-orange         la note d'appui : encadrés, citations, tableaux
     --flore-orange-pale    le fond des en-têtes de tableau
     --flore-orange-filet   les bordures de cellules
     --flore-orange-fond    le fond d'un encadré
     --flore-orange-clair   la note d'appui quand le fond est le pigment plein

   LA SPÉCIFICITÉ, ET POURQUOI ELLE EST CE QU'ELLE EST

   Les valeurs de nuit de l'habillage et de la feuille des titres sont écrites
   en dur — le violet clair du menu, celui des titres, celui des nuages. Une
   variable redéfinie ne les atteint pas. Elles sont donc reprises en fin de
   feuille, sous « html.flore-th-herbier.flore-nuit:root:root » et son jumeau
   « atelier », qui valent une classe de plus que « html.flore-nuit:root:root » :
   le cran suffit, et aucun !important n'est nécessaire.

   Les deux thèmes sont NOMMÉS, et non désignés par « tout sauf l'aquarelle ».
   La négation aurait été plus courte et fausse : quand le choix du thème est
   décoché dans les réglages, l'amorce ne pose aucune classe de thème, et
   « :not(.flore-th-aquarelle) » y serait vrai — un site en aquarelle aurait
   reçu les reprises. Le prix de l'exactitude est une ligne de plus à ajouter
   ici le jour où un quatrième thème apparaîtra.
   --------------------------------------------------------------------------- */


/* ===========================================================================
   1. FEUILLAGE — le thème du site, celui qu'on voit par défaut.

   Toutes ses valeurs sont relevées dans le fichier du logo, aucune n'est
   choisie : le vert du lettrage pour les titres, le rose des pétales pour les
   liens, le vert de la feuille pour l'appui, le vert du disque pour ce qui
   encadre. Le logo dit déjà que la fleur attire et que le feuillage porte ;
   la charte ne fait que le répéter.

   Les traits peints de l'aquarelle cèdent la place au trait à la branche du
   logo — le même dessin, découpé dans le fichier, jamais redessiné. Le filet
   et le contour des feuilles y font la même épaisseur, 5 px sur 2100 : c'est
   ce qui permet au rameau de prolonger la ligne au lieu de s'y poser.
   =========================================================================== */

html.flore-th-feuillage:root:root {
	--flore-papier: #f6f5ef;
	--flore-violet: #96525e;         /* le rose des pétales, assombri — 5,3:1 */
	--flore-violet-fonce: #3c4638;   /* le vert du lettrage — 9,1:1 */
	--flore-violet-pale: #dce0cc;
	--flore-violet-survol: #7c3f4b;
	--flore-rose: #5c6b52;           /* le focus clavier : le vert de la feuille */
	--flore-encre: #333b31;

	--flore-orange: #5c6b52;         /* l'appui : encadrés, tableaux, repère — 5,2:1 */
	--flore-orange-pale: #eaece0;
	--flore-orange-filet: #dce0cc;
	--flore-orange-fond: rgba(159, 166, 133, 0.20);
	--flore-orange-clair: #eaece0;

	--flore-trait: #485648;          /* l'encre du trait, relevée dans le logo */
}

html.flore-th-feuillage.flore-nuit:root:root {
	--flore-violet: #d79aa6;         /* 7,8:1 sur le fond de nuit */
	--flore-violet-fonce: #c3d2ba;   /* 11,4:1 — titres, menu, pied de page */
	--flore-violet-pale: rgba(195, 210, 186, 0.30);
	--flore-violet-survol: #b8808c;
	--flore-rose: #9fb494;

	--flore-orange: #9fb494;         /* 8,1:1 */
	--flore-orange-pale: #1e241b;
	--flore-orange-filet: #39422f;
	--flore-orange-fond: rgba(159, 180, 148, 0.10);
	--flore-orange-clair: #d7e2cc;

	--flore-trait: #9fb494;
}

/* Le lavis n'a pas sa place sous un dessin au trait : les deux gammes se
   gênent. Le papier est uni, dans les trois teintes. */

html.flore-th-feuillage:root:root body,
html.flore-th-feuillage.flore-nuit:root:root body,
html.flore-th-feuillage.flore-sepia:root:root body {
	background-image: none;
}

html.flore-th-feuillage:root:root body {
	background-color: var(--flore-papier);
}

html.flore-th-feuillage.flore-nuit:root:root body {
	background-color: var(--base-2, #141719);
}

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

/* Les traits : celui du logo, en deux longueurs. Sous l'intertitre il se
   termine par la branche ; en séparateur il la porte au centre, comme sous
   le nom dans le logo. La hauteur du bloc fixe l'échelle, donc l'épaisseur
   du trait : 26 px donnent un peu plus de deux pixels. */

html.flore-th-feuillage .entry-content h2::after {
	width: 11em;
	max-width: 100%;
	height: 26px;
	background: url("trait-h2.png") no-repeat left center / auto 100%;
}

html.flore-th-feuillage .entry-title::after,
html.flore-th-feuillage .page-header h1::after {
	height: 30px;
	background: url("trait-h1.png") no-repeat left center / auto 100%;
}

html.flore-th-feuillage hr,
html.flore-th-feuillage .wp-block-separator {
	height: 30px;
	width: 62%;
	background: url("trait-branche.png") no-repeat center / contain;
}

/* Le bord des encadrés reste un filet plein : à cette largeur, un dessin au
   trait ne se lirait pas. Il prend le vert du disque. */

html.flore-th-feuillage blockquote::before,
html.flore-th-feuillage .wp-block-quote::before,
html.flore-th-feuillage .flore-encadre::before,
html.flore-th-feuillage .entry-content .flore-resume::before {
	width: 3px;
	background: #9fa685;
}

html.flore-th-feuillage.flore-nuit:root:root blockquote::before,
html.flore-th-feuillage.flore-nuit:root:root .wp-block-quote::before,
html.flore-th-feuillage.flore-nuit:root:root .flore-encadre::before,
html.flore-th-feuillage.flore-nuit:root:root .entry-content .flore-resume::before {
	background: var(--flore-orange);
}

/* La barre de lecture : le trait du logo, et le rameau à sa pointe.

   La bande passe de 5 à 28 px et devient transparente — on ne voit que le
   trait, deux pixels au milieu. Le rameau a été réduit puis son contour
   redilaté, pour qu'il garde ces deux pixels : réduit simplement, son trait
   serait tombé à 1,2 px et la ligne se serait brisée au raccord. */

html.flore-th-feuillage .flore-progression {
	height: 28px;
	background: none;
}

html.flore-th-feuillage .flore-progression::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 2px;
	transform: translateY(-50%);
	background: var(--flore-violet-pale);
}

html.flore-th-feuillage .flore-progression__jauge {
	position: relative;
	background: none;
}

html.flore-th-feuillage .flore-progression__jauge::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 2px;
	transform: translateY(-50%);
	background: var(--flore-trait);
}

html.flore-th-feuillage .flore-progression__jauge::after {
	content: "";
	position: absolute;
	top: 0;
	right: -31px;
	width: 34px;
	height: 100%;
	background: url("pointe-28.png") no-repeat left center / contain;
}

html.flore-th-feuillage.flore-nuit:root:root .flore-progression__jauge::after {
	filter: brightness(1.9) saturate(0.6);
}

/* Le bandeau : ses couleurs sont écrites chez lui, en variables locales. Le
   vert du lettrage au repos, un vert plus clair au survol, et le rose des
   pétales pour le libellé survolé — la fleur qui s'éclaire sur le feuillage,
   ce que le logo montre déjà. 5,1:1. */

html.flore-th-feuillage .flore-bandeau {
	--flore-bandeau-violet: 60, 70, 56;
	--flore-bandeau-violet-vif: #475440;
	--flore-bandeau-creme: #f6f5ef;
	--flore-bandeau-rose: #d79aa6;
	--flore-bandeau-orange: #edc3cb;
}


/* ===========================================================================
   2. AQUARELLE — le thème du site, celui qu'on voit par défaut.
   Rien n'est écrit ici : ses règles sont celles de la feuille de l'habillage,
   qui n'a pas bougé. Elle reste offerte au lecteur.
   La classe « flore-th-aquarelle » est tout de même posée sur <html> : une
   classe toujours présente se lit dans l'inspecteur, se teste d'une ligne, et
   le jour où le thème par défaut devra être repeint autrement, il aura déjà
   son crochet.
   =========================================================================== */


/* ===========================================================================
   3. HERBIER — la planche du botaniste.
   Papier ivoire sans lavis, encre vert sombre, filets tracés à la règle.
   L'accent tient 5,9:1 sur le papier, les titres 9,4:1, l'ocre 5,3:1 sur les
   en-têtes de tableau — mesuré à l'écran, et corrigé d'un cran pour cela.
   =========================================================================== */

html.flore-th-herbier:root:root {
	--flore-papier: #fbfaf5;
	--flore-violet: #3f6b4a;
	--flore-violet-fonce: #2c4a34;
	--flore-violet-pale: #cfdcc9;
	--flore-violet-survol: #35583d;
	--flore-rose: #9c4a34;
	--flore-encre: #2a2e28;

	--flore-orange: #7a5c18;
	--flore-orange-pale: #f1ead6;
	--flore-orange-filet: #d8c79b;
	--flore-orange-fond: rgba(122, 92, 24, 0.09);
	--flore-orange-clair: #f0d28a;
}

html.flore-th-herbier.flore-nuit:root:root {
	--flore-violet: #7fb68c;        /* 7,8:1 sur le fond de nuit */
	--flore-violet-fonce: #bddcc4;  /* 11:1 — titres, menu, pied de page */
	--flore-violet-pale: rgba(189, 220, 196, 0.30);
	--flore-violet-survol: #5c9169;
	--flore-rose: #e0a08e;

	--flore-orange: #d9be79;
	--flore-orange-pale: #241f12;
	--flore-orange-filet: #46402a;
	--flore-orange-fond: rgba(217, 190, 121, 0.10);
}

/* Le lavis d'aquarelle n'a rien à faire sur une planche d'herbier : le papier
   est uni, dans les trois teintes. */

html.flore-th-herbier:root:root body,
html.flore-th-herbier.flore-nuit:root:root body,
html.flore-th-herbier.flore-sepia:root:root body {
	background-image: none;
}

html.flore-th-herbier:root:root body {
	background-color: var(--flore-papier);
}

/* La nuit et le sépia gardent le fond que le socle leur donne : sans ces
   deux lignes, la couleur du papier ci-dessus — qui ne nomme aucune teinte —
   s'appliquait aussi la nuit, et le texte clair se retrouvait sur l'ivoire.
   Relevé à l'essai : 1,05:1 sur le titre d'article. */

html.flore-th-herbier.flore-nuit:root:root body {
	background-color: var(--base-2, #141719);
}

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

/* Les traits : un double filet sous les intertitres — la ligne et son ombre
   d'une planche gravée —, un filet court en séparateur, une barre pleine le
   long des encadrés. */

html.flore-th-herbier .entry-content h2::after {
	width: 2.6em;
	height: 4px;
	background: linear-gradient(
		var(--flore-violet) 0 1px,
		transparent 1px 3px,
		var(--flore-violet) 3px 4px
	);
}

html.flore-th-herbier hr,
html.flore-th-herbier .wp-block-separator {
	height: 1px;
	width: 42%;
	background: var(--flore-violet-pale);
}

html.flore-th-herbier blockquote::before,
html.flore-th-herbier .wp-block-quote::before,
html.flore-th-herbier .flore-encadre::before,
html.flore-th-herbier .entry-content .flore-resume::before {
	width: 2px;
	background: var(--flore-orange);
}

html.flore-th-herbier .flore-progression__jauge {
	background: var(--flore-violet);
}


/* ===========================================================================
   4. ATELIER — l'établi du fleuriste.
   Papier gris clair, encre noire, une seule couleur chaude, des traits
   francs et des angles vifs. Le thème de qui trouve l'aquarelle chargée.
   L'accent tient 5,6:1, les titres 14,9:1.
   =========================================================================== */

html.flore-th-atelier:root:root {
	--flore-papier: #f2f1ee;
	--flore-violet: #a4402a;
	--flore-violet-fonce: #1f1d1b;
	--flore-violet-pale: #dad6cf;
	--flore-violet-survol: #86321f;
	--flore-rose: #2f6e8f;          /* le focus tranche sur la terre cuite */
	--flore-encre: #1f1d1b;

	--flore-orange: #4a4f55;        /* la note d'appui est ici un gris froid :
	                                   la couleur chaude est déjà l'accent, et
	                                   deux chaudes ne se distingueraient plus */
	--flore-orange-pale: #e4e2dd;
	--flore-orange-filet: #bfbcb5;
	--flore-orange-fond: rgba(74, 79, 85, 0.07);
	--flore-orange-clair: #f0c9b8;
}

html.flore-th-atelier.flore-nuit:root:root {
	--flore-violet: #e08a6e;        /* 7,0:1 sur le fond de nuit */
	--flore-violet-fonce: #efebe6;  /* 14:1 */
	--flore-violet-pale: rgba(239, 235, 230, 0.26);
	--flore-violet-survol: #b96a51;
	--flore-rose: #7fb6d6;

	--flore-orange: #aeb6be;
	--flore-orange-pale: #22262a;
	--flore-orange-filet: #414852;
	--flore-orange-fond: rgba(174, 182, 190, 0.08);
}

html.flore-th-atelier:root:root body,
html.flore-th-atelier.flore-nuit:root:root body,
html.flore-th-atelier.flore-sepia:root:root body {
	background-image: none;
}

html.flore-th-atelier:root:root body {
	background-color: var(--flore-papier);
}

/* La nuit et le sépia gardent le fond que le socle leur donne : sans ces
   deux lignes, la couleur du papier ci-dessus — qui ne nomme aucune teinte —
   s'appliquait aussi la nuit, et le texte clair se retrouvait sur l'ivoire.
   Relevé à l'essai : 1,05:1 sur le titre d'article. */

html.flore-th-atelier.flore-nuit:root:root body {
	background-color: var(--base-2, #141719);
}

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

/* Les traits : francs, courts, d'aplomb. */

html.flore-th-atelier .entry-content h2::after {
	width: 2.2em;
	height: 3px;
	background: var(--flore-violet);
}

html.flore-th-atelier hr,
html.flore-th-atelier .wp-block-separator {
	height: 2px;
	width: 100%;
	background: var(--flore-violet-fonce);
	opacity: 0.5;
}

html.flore-th-atelier blockquote::before,
html.flore-th-atelier .wp-block-quote::before,
html.flore-th-atelier .flore-encadre::before,
html.flore-th-atelier .entry-content .flore-resume::before {
	width: 4px;
	background: var(--flore-orange);
}

html.flore-th-atelier .flore-progression__jauge {
	background: var(--flore-violet);
}

/* Les angles vifs : c'est l'autre moitié de la charte des traits. */

html.flore-th-atelier:root:root .wp-block-button__link,
html.flore-th-atelier:root:root .button,
html.flore-th-atelier:root:root button.button,
html.flore-th-atelier:root:root form[role="search"] input[type="search"],
html.flore-th-atelier:root:root form[role="search"] button[type="submit"],
html.flore-th-atelier:root:root form[role="search"] .search-submit,
html.flore-th-atelier:root:root .entry-content figure.wp-block-image img,
html.flore-th-atelier:root:root .entry-content .flore-pieces .flore-piece a,
html.flore-th-atelier:root:root .entry-content .flore-pieces .flore-piece img,
html.flore-th-atelier:root:root .entry-content .flore-vignette img {
	border-radius: 0;
}


/* ===========================================================================
   4. CE QUE LES DEUX THÈMES DOIVENT REPRENDRE
   Les valeurs écrites en dur, que redéfinir une variable n'atteint pas.
   Toutes sont des valeurs de NUIT : de jour, l'habillage et la feuille des
   titres passent déjà par les variables, et suivent donc le thème seuls.

   Chaque règle nomme les deux thèmes, l'un après l'autre, sur des lignes
   distinctes. C'est verbeux, et c'est le prix d'une négation écartée : voir
   la note de spécificité en tête de feuille.
   =========================================================================== */

/* Les variables dérivées de la feuille des titres. De jour elles pointent sur
   les variables du thème ; de nuit elles étaient écrites en violet clair. *
/

html.flore-th-herbier.flore-nuit:root:root,
/

html.flore-th-feuillage.flore-nuit:root:root,
html.flore-th-atelier.flore-nuit:root:root {
	--accent: var(--flore-violet);
	--flore-accent-actif: var(--flore-violet-fonce);
	--flore-titre: var(--flore-violet-fonce);
	--flore-nuage-mot: var(--contrast, #dfe3e7);
	--flore-nuage-fort: var(--flore-violet-fonce);
	--flore-nuage-appui: var(--flore-violet);
}

/* Le menu principal, de nuit. *
/

html.flore-th-herbier.flore-nuit:root:root .main-navigation .main-nav ul li a,
/

html.flore-th-feuillage.flore-nuit:root:root .main-navigation .main-nav ul li a,
html.flore-th-atelier.flore-nuit:root:root .main-navigation .main-nav ul li a,
html.flore-th-herbier.flore-nuit:root:root .menu-toggle,
html.flore-th-feuillage.flore-nuit:root:root .menu-toggle,
html.flore-th-atelier.flore-nuit:root:root .menu-toggle,
html.flore-th-herbier.flore-nuit:root:root .main-navigation .menu-bar-items,
html.flore-th-feuillage.flore-nuit:root:root .main-navigation .menu-bar-items,
html.flore-th-atelier.flore-nuit:root:root .main-navigation .menu-bar-items {
	color: var(--flore-violet-fonce);
}
html.flore-th-herbier.flore-nuit:root:root .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
html.flore-th-feuillage.flore-nuit:root:root .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
html.flore-th-atelier.flore-nuit:root:root .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
html.flore-th-herbier.flore-nuit:root:root .main-navigation .main-nav ul li[class*="current-menu-"] > a,
html.flore-th-feuillage.flore-nuit:root:root .main-navigation .main-nav ul li[class*="current-menu-"] > a,
html.flore-th-atelier.flore-nuit:root:root .main-navigation .main-nav ul li[class*="current-menu-"] > a,
html.flore-th-herbier.flore-nuit:root:root .main-navigation .main-nav ul li[class*="current_page_"] > a,
html.flore-th-feuillage.flore-nuit:root:root .main-navigation .main-nav ul li[class*="current_page_"] > a,
html.flore-th-atelier.flore-nuit:root:root .main-navigation .main-nav ul li[class*="current_page_"] > a {
	color: var(--flore-violet-fonce);
	background-color: transparent;
}

/* Le libellé de la barre de recherche, de nuit. *
/

html.flore-th-herbier.flore-nuit:root:root .wp-block-search__label,
/

html.flore-th-feuillage.flore-nuit:root:root .wp-block-search__label,
html.flore-th-atelier.flore-nuit:root:root .wp-block-search__label {
	color: var(--flore-titre);
}

/* Les boutons pleins, de nuit : l'habillage y garde les violets du jour,
   parce qu'un fond plein ne suit pas la colonne de nuit — le raisonnement
   vaut pour tous les thèmes, seule la valeur change. Le texte devient le fond
   de page : un blanc sur un accent clair ne se lirait pas. *
/

html.flore-th-herbier.flore-nuit:root:root .wp-block-button__link,
/

html.flore-th-feuillage.flore-nuit:root:root .wp-block-button__link,
html.flore-th-atelier.flore-nuit:root:root .wp-block-button__link,
html.flore-th-herbier.flore-nuit:root:root .button,
html.flore-th-feuillage.flore-nuit:root:root .button,
html.flore-th-atelier.flore-nuit:root:root .button,
html.flore-th-herbier.flore-nuit:root:root button.button,
html.flore-th-feuillage.flore-nuit:root:root button.button,
html.flore-th-atelier.flore-nuit:root:root button.button,
html.flore-th-herbier.flore-nuit:root:root form[role="search"] button[type="submit"],
html.flore-th-feuillage.flore-nuit:root:root form[role="search"] button[type="submit"],
html.flore-th-atelier.flore-nuit:root:root form[role="search"] button[type="submit"],
html.flore-th-herbier.flore-nuit:root:root form[role="search"] .search-submit,
html.flore-th-feuillage.flore-nuit:root:root form[role="search"] .search-submit,
html.flore-th-atelier.flore-nuit:root:root form[role="search"] .search-submit {
	background-color: var(--flore-violet);
	color: var(--base-2, #14171a);
}
html.flore-th-herbier.flore-nuit:root:root .wp-block-button__link:hover,
html.flore-th-feuillage.flore-nuit:root:root .wp-block-button__link:hover,
html.flore-th-atelier.flore-nuit:root:root .wp-block-button__link:hover,
html.flore-th-herbier.flore-nuit:root:root .button:hover,
html.flore-th-feuillage.flore-nuit:root:root .button:hover,
html.flore-th-atelier.flore-nuit:root:root .button:hover,
html.flore-th-herbier.flore-nuit:root:root form[role="search"] button[type="submit"]:hover,
html.flore-th-feuillage.flore-nuit:root:root form[role="search"] button[type="submit"]:hover,
html.flore-th-atelier.flore-nuit:root:root form[role="search"] button[type="submit"]:hover,
html.flore-th-herbier.flore-nuit:root:root form[role="search"] button[type="submit"]:focus-visible,
html.flore-th-feuillage.flore-nuit:root:root form[role="search"] button[type="submit"]:focus-visible,
html.flore-th-atelier.flore-nuit:root:root form[role="search"] button[type="submit"]:focus-visible {
	background-color: var(--flore-violet-survol);
	color: var(--base-2, #14171a);
}

/* De jour, le survol du bouton de recherche passait par l'orange clair du
   bandeau, qui n'a de sens que sur un fond violet. *
/

html.flore-th-herbier:root:root form[role="search"] button[type="submit"]:hover,
/

html.flore-th-feuillage:root:root form[role="search"] button[type="submit"]:hover,
html.flore-th-atelier:root:root form[role="search"] button[type="submit"]:hover,
html.flore-th-herbier:root:root form[role="search"] button[type="submit"]:focus-visible,
html.flore-th-feuillage:root:root form[role="search"] button[type="submit"]:focus-visible,
html.flore-th-atelier:root:root form[role="search"] button[type="submit"]:focus-visible,
html.flore-th-herbier:root:root form[role="search"] .search-submit:hover,
html.flore-th-feuillage:root:root form[role="search"] .search-submit:hover,
html.flore-th-atelier:root:root form[role="search"] .search-submit:hover {
	background-color: var(--flore-violet-survol);
	color: var(--flore-papier);
}

/* Le champ de recherche, de nuit : ses filets étaient un violet clair
   translucide, écrit en dur. *
/

html.flore-th-herbier.flore-nuit:root:root form[role="search"] input[type="search"],
/

html.flore-th-feuillage.flore-nuit:root:root form[role="search"] input[type="search"],
html.flore-th-atelier.flore-nuit:root:root form[role="search"] input[type="search"] {
	border-color: var(--flore-violet-pale);
}
html.flore-th-herbier.flore-nuit:root:root form[role="search"] input[type="search"]:focus,
html.flore-th-feuillage.flore-nuit:root:root form[role="search"] input[type="search"]:focus,
html.flore-th-atelier.flore-nuit:root:root form[role="search"] input[type="search"]:focus {
	border-color: var(--flore-violet);
}

/* Le survol d'un lien du contenu : l'habillage lui donne la note d'appui, et
   la règle passe par la variable, donc elle suit. Mais elle ajoute un
   demi-pixel de graisse au trait, ce qui, sur un thème à traits francs,
   appuie deux fois la même chose. L'atelier s'en passe. */

html.flore-th-atelier .site a:not(.flore-bandeau__lien):hover,
html.flore-th-atelier .site a:not(.flore-bandeau__lien):focus-visible {
	-webkit-text-stroke: 0;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Les tuiles du bandeau restent des photographies dans les trois thèmes :
   c'est le menu principal du site, et une photographie n'a pas de charte de
   couleur. Seul son survol, écrit en dur dans la feuille du bandeau, garde
   le violet — c'est le dernier endroit du site où le thème ne passe pas, et
   il est nommé ici pour qu'on sache où le trouver. */


/* ===========================================================================
   5. LES DEUX TUILES DU BANDEAU

   Six tuiles du bandeau sont des photographies : elles ne suivent aucune
   charte, et c'est voulu. Les deux autres — le nom du site et le logo — sont
   dessinées, et celles-là appartiennent bien à une charte. Elles étaient
   posées sur un lavis d'aquarelle violet et le restaient sous les quatre
   thèmes : c'est la seule chose du site qui trahissait le thème choisi, et
   elle est la première qu'on voit.

   Le lavis est déposé : fond uni dans le papier du thème, le lettrage du
   logo à l'encre du thème, et sous lui le filet à la branche — le même
   dessin que sous le nom dans le logo, à la même largeur que lui. Le trait,
   réduit, a été redilaté pour garder son épaisseur. La tuile du logo, elle,
   garde le symbole tel quel sur ce même fond uni : un thème repeint son
   papier, jamais un logo.

   « content » sur une image la remplace sans toucher au balisage : le
   bandeau reste ce qu'il est, le texte de remplacement reste lu. Le srcset
   ne s'applique plus à une image remplacée — la variante 400 est donc servie
   par une requête de média, sous la largeur où le bandeau passe à quatre
   colonnes. */

html.flore-th-feuillage .flore-bandeau__image[src*="/nom-800.webp"] {
	content: url("nom-feuillage-800.webp");
}

html.flore-th-feuillage .flore-bandeau__image[src*="/logo-800.webp"] {
	content: url("logo-feuillage-800.webp");
}

html.flore-th-herbier .flore-bandeau__image[src*="/nom-800.webp"] {
	content: url("nom-herbier-800.webp");
}

html.flore-th-herbier .flore-bandeau__image[src*="/logo-800.webp"] {
	content: url("logo-herbier-800.webp");
}

html.flore-th-atelier .flore-bandeau__image[src*="/nom-800.webp"] {
	content: url("nom-atelier-800.webp");
}

html.flore-th-atelier .flore-bandeau__image[src*="/logo-800.webp"] {
	content: url("logo-atelier-800.webp");
}

@media (max-width: 600px) {
	html.flore-th-feuillage .flore-bandeau__image[src*="/nom-800.webp"] {
		content: url("nom-feuillage-400.webp");
	}

	html.flore-th-feuillage .flore-bandeau__image[src*="/logo-800.webp"] {
		content: url("logo-feuillage-400.webp");
	}

	html.flore-th-herbier .flore-bandeau__image[src*="/nom-800.webp"] {
		content: url("nom-herbier-400.webp");
	}

	html.flore-th-herbier .flore-bandeau__image[src*="/logo-800.webp"] {
		content: url("logo-herbier-400.webp");
	}

	html.flore-th-atelier .flore-bandeau__image[src*="/nom-800.webp"] {
		content: url("nom-atelier-400.webp");
	}

	html.flore-th-atelier .flore-bandeau__image[src*="/logo-800.webp"] {
		content: url("logo-atelier-400.webp");
	}
}