/* Flore — Habillage aquarelle 1.24.0 : titres et couleur d'accent
   Fraunces (SIL OFL 1.1), instance SOFT 60 / WONK 1, axe optique conservé.
   Servie depuis le site : aucun appel à fonts.googleapis.com.

   Tout le site, pas seulement le corps d'article : le nom du site, les titres
   d'articles en liste, les en-têtes d'archive et de recherche, les titres de
   blocs et de widgets, la page 404, les commentaires. */

@font-face {
	font-family: "Fraunces Flore";
	src: url("fraunces-titres.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0300-0304, U+0308, U+0329, U+2000-206F, U+2074,
		U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Les couleurs --------------------------------------------------------
   Trois déclarations se disputent --accent : GeneratePress pose #1e73be sur
   :root dans son style en ligne, le confort de lecture le reprend en mode
   nuit sous html.flore-nuit. Le double :root passe devant le thème ; la
   variante nuit, qui ajoute html et une classe, repasse devant le socle. */

:root:root {
	--accent: var( --flore-violet, #7B5AA6 );
	--flore-accent-actif: var( --flore-violet-fonce, #4C3A6B );
	--flore-titre: var( --flore-violet-fonce, #4C3A6B );
	--flore-nuage-mot: var( --flore-encre, #342F3D );
	--flore-nuage-fort: var( --flore-violet, #7B5AA6 );
	--flore-nuage-appui: var( --flore-violet-fonce, #4C3A6B );
}

/* Sur le fond de nuit, le violet plein ne tient plus le contraste, ni en
   lien ni en titre. Même teinte, clarté remontée. #9D86C9 est la valeur que
   le confort de lecture avait déjà choisie pour les liens : on la garde. */

html.flore-nuit:root {
	--accent: #9D86C9;
	--flore-accent-actif: #C7B4E4;
	--flore-titre: #CBB6E6;
	--flore-nuage-mot: #DFE3E7;
	--flore-nuage-fort: #C0A6DE;
	/* De nuit, la hiérarchie s'inverse : c'est la clarté qui met en avant.
	   Le rang 4 prend donc le violet le PLUS SOMBRE des deux, #9D86C9 —
	   reprendre --flore-violet-fonce, qui vaut #CBB6E6 la nuit, ferait
	   ressortir le rang 4 plus que le rang 5. */
	--flore-nuage-appui: #9D86C9;
}

a:hover,
a:focus,
a:active {
	color: var( --flore-accent-actif );
}

/* --- La police des titres, partout ---------------------------------------
   Liste développée à dessein : aucune syntaxe récente, et les h1–h4 nus
   couvrent les titres que le thème n'a pas encore inventés. */

h1, h2, h3, h4,
.entry-title,
.page-title,
.main-title,
.site-title,
.widget-title,
.wp-block-heading,
.comments-title,
.comment-reply-title {
	font-family: "Fraunces Flore", Georgia, "Iowan Old Style", "Times New Roman", serif;
	font-weight: 500;
	font-optical-sizing: auto;
	font-synthesis-weight: none;
	letter-spacing: -0.005em;
}

/* La barre d'administration garde la sienne. */

#wpadminbar h1, #wpadminbar h2, #wpadminbar h3, #wpadminbar h4 {
	font-family: inherit;
	letter-spacing: normal;
}

/* L'instance n'a qu'une graisse : un gras dans un titre déclencherait
   sinon un faux gras. */

h1 strong, h2 strong, h3 strong, h4 strong,
.entry-title strong, .wp-block-heading strong {
	font-weight: inherit;
}

/* --- La couleur des titres, partout -------------------------------------- */

h1, h2, h3, h4,
.entry-title,
.page-title,
.main-title,
.widget-title,
.wp-block-heading,
.comments-title,
.comment-reply-title {
	color: var( --flore-titre );
}

/* Un titre d'article en liste est un lien : il prend la couleur des titres,
   pas celle des liens, et ne vire au violet qu'au survol. Le :root double la
   spécificité pour passer devant le thème. */

:root .entry-title a,
:root .entry-title a:visited,
:root .main-title a,
:root .main-title a:visited,
:root .site-title a,
:root .site-title a:visited {
	color: var( --flore-titre );
	text-decoration: none;
}

:root .entry-title a:hover,
:root .entry-title a:focus,
:root .main-title a:hover,
:root .main-title a:focus,
:root .site-title a:hover,
:root .site-title a:focus {
	color: var( --flore-violet, #7B5AA6 );
}

/* Mode nuit : le socle teinte .entry-title, .page-title et .widget-title en
   gris clair sous html.flore-nuit et laisse les autres titres dans le violet
   sombre du jour — illisibles sur le fond de nuit. On reprend l'ensemble,
   d'une seule couleur, avec un cran de spécificité de plus. */

html.flore-nuit:root h1,
html.flore-nuit:root h2,
html.flore-nuit:root h3,
html.flore-nuit:root h4,
html.flore-nuit:root .entry-title,
html.flore-nuit:root .entry-title a,
html.flore-nuit:root .entry-title a:visited,
html.flore-nuit:root .page-title,
html.flore-nuit:root .main-title,
html.flore-nuit:root .main-title a,
html.flore-nuit:root .widget-title,
html.flore-nuit:root .wp-block-heading,
html.flore-nuit:root .comments-title,
html.flore-nuit:root .comment-reply-title {
	color: var( --flore-titre );
}

html.flore-nuit:root .entry-title a:hover,
html.flore-nuit:root .entry-title a:focus,
html.flore-nuit:root .main-title a:hover,
html.flore-nuit:root .main-title a:focus {
	color: var( --flore-accent-actif );
}


/* --- Les nuages de mots ---------------------------------------------------
   Deux crans de violet, et l'encre en dessous. Le rang 5 — le plus lourd,
   celui que le socle met en gras — prend le violet plein ; le rang 4 prend le
   violet des titres, un cran plus sombre ; les rangs 1 à 3 restent à l'encre
   du texte.

   Deux teintes de la MÊME famille, donc toujours un seul message : le poids.
   L'orange aurait porté un troisième message dans un nuage — « ceci encadre »
   et « vous êtes là » lui suffisent — et une couleur qui sert à trois choses
   n'en sert plus à aucune.

   Le poids reste dit trois fois : la taille (0,82 à 1,5 em), la graisse au
   rang 5, la couleur. La couleur est celle qui se lit de plus loin, et c'est
   la seule des trois qui survit à un survol de la page sans lecture.

   Sans ces règles, le nuage était un bloc violet où plus rien ne ressortait,
   et les deux nuages ne se ressemblaient pas : celui de la colonne était
   noir, celui du pied violet.

   Le socle va jusqu'à « .flore-nuage-pied .flore-nuage-t5 » ; le :root ajoute
   le cran qui manque. */

:root .flore-nuage .flore-nuage-m,
:root .flore-nuage .flore-nuage-m:visited {
	color: var( --flore-nuage-mot );
	text-decoration: none;
}

:root .flore-nuage .flore-nuage-t4,
:root .flore-nuage .flore-nuage-t4:visited {
	color: var( --flore-nuage-appui );
}

:root .flore-nuage .flore-nuage-t5,
:root .flore-nuage .flore-nuage-t5:visited {
	color: var( --flore-nuage-fort );
}

/* Rien ne dit qu'un mot de nuage est cliquable tant qu'on ne le survole
   pas : le soulignement le dit au moment utile.

   Le « border-bottom-color » remis à transparent n'est pas de la précaution :
   le socle pose sur .flore-nuage-m un « border-bottom: 1px solid transparent »
   qu'il colore au survol, dans SON accent #7a5c86. Ce trait s'ajoutait au
   soulignement de cette feuille — deux lignes sous le mot, dans deux violets
   voisins mais différents. Une seule ligne suffit, et c'est celle-ci, qui se
   détache du texte de trois pixels. */

:root .flore-nuage .flore-nuage-m:hover,
:root .flore-nuage .flore-nuage-m:focus {
	color: var( --flore-nuage-fort );
	border-bottom-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Les deux libellés portaient deux couleurs différentes. Ce sont des titres :
   ils prennent la couleur des titres. */

:root .flore-nuage .flore-nuage-lib {
	color: var( --flore-titre );
	font-family: "Fraunces Flore", Georgia, "Iowan Old Style", "Times New Roman", serif;
	font-weight: 500;
	font-optical-sizing: auto;
}

/* --- Les titres de bloc de colonne ---------------------------------------
   Trois régimes cohabitaient dans la même colonne, pour la même fonction —
   nommer un bloc :

     — les widgets classiques (le sommaire de rubrique) prenaient les 20 px
       que GeneratePress pose sur « .widget-title » ;
     — les widgets de bloc (articles récents, commentaires récents) prenaient
       les 35 px d'un « h2 » d'article, dans une colonne de 360 px : la même
       taille qu'un intertitre de l'article d'à côté ;
     — le nuage de mots écrivait le sien en petites capitales de 14 px, à 75 %
       d'opacité, dans un « p » — un titre déguisé en légende.

   Une seule charte, pour les quatre : 23 px, la police et la couleur des
   titres, pas de capitales, pleine opacité, la même respiration en dessous.
   23 px et non 20 ou 35 : la colonne se lit à 15,8 px, et un titre de bloc a
   besoin d'un rapport d'environ une fois et demie pour se détacher sans
   prendre le rang d'un intertitre d'article.

   « .flore-nuage-lib » reste visé ici : le socle 1.6.0 ne l'imprime plus dans
   la colonne — le nuage y passe par le titre du widget — mais un socle plus
   ancien continuerait de le faire, et la charte doit tenir dans les deux cas.
   Dans le bandeau de pied de page, où le libellé garde ses petites capitales,
   il n'est pas dans un « .widget » : cette règle ne l'atteint pas. */

:root .widget .widget-title,
:root .widget h2.wp-block-heading,
:root .widget .flore-nuage-lib,
:root .widget-area .wp-block-search__label {
	font-size: 23px;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-transform: none;
	opacity: 1;
	margin: 0 0 0.7em;
	color: var( --flore-titre );
}

/* Le libellé de la barre de recherche est le titre du premier bloc de la
   colonne : il suit la charte comme les autres. Sa taille lui vient de
   l'habillage aquarelle (1,15 rem), qui le sert aussi en largeur d'article,
   où ce n'est plus un titre de bloc — d'où le « .widget-area » : la charte ne
   le reprend que dans la colonne, et les deux feuilles ne se disputent rien.

   Il reste collé à son champ : 0,45 em, la valeur de l'habillage. Un label de
   formulaire n'a pas la respiration d'un titre de liste. */

:root .widget-area .wp-block-search__label {
	margin-bottom: 0.45em;
}

/* --- Réglages fins ------------------------------------------------------- */

h1, .entry-title, .page-title { line-height: 1.2; }
h2, .wp-block-heading { line-height: 1.3; }
h3 { line-height: 1.35; }
h4 { line-height: 1.4; }
.main-title, .site-title { line-height: 1.25; }

/* Chiffres elzéviriens au fil du texte, alignés dans les titres de tête :
   « 10-15 cm » se lit mieux en bas de casse dans un intertitre. */

h2, h3, h4 { font-variant-numeric: oldstyle-nums proportional-nums; }
h1, .entry-title, .page-title, .main-title { font-variant-numeric: lining-nums; }

@media print {
	h1, h2, h3, h4, .entry-title, .page-title { color: #2B2436; }
}