/* Flore — Tuiles du bandeau 1.0.0
   ---------------------------------------------------------------------------
   CE QUE CETTE FEUILLE FAIT

   1. Sous « Atelier », elle remplace les six photographies du bandeau par six
      dessins à ligne continue, et donne au bandeau les couleurs de l'atelier.
   2. Sous « Herbier », elle ne touche pas aux photographies — elles y restent
      — mais elle lui donne enfin ses couleurs de bandeau.

   POURQUOI LE POINT 2 EST ICI

   Le bandeau tient ses couleurs dans ses propres variables, et jusqu'ici
   « Feuillage » était le seul thème à les redéfinir. Herbier et Atelier
   héritaient donc du violet du site : la dernière tache de l'ancien habillage,
   sur les huit cases, et la première chose qu'on voit en arrivant.

   POURQUOI UN MASQUE ET NON UNE IMAGE DE REMPLACEMENT

   « content: url() » remplace l'image, mais l'image remplacée a sa couleur
   cuite dedans : il faudrait un jeu de fichiers pour le jour et un autre pour
   la nuit. Un masque, lui, ne donne que la FORME ; la couleur vient de
   « background-color », donc d'une variable du thème. Un seul jeu de dessins,
   la nuit gratuite, et le survol qui change la couleur du trait au lieu
   d'agrandir un dessin — ce qui le recadrerait.

   Le « content » sert quand même, mais à vider : un SVG transparent d'un pixel
   en URI de données, pour que la photographie ne paraisse plus sous le masque.

   CHANGER UN DESSIN

   Chaque case tient en une ligne, et les quatre variantes sont livrées dans le
   même dossier. Pour échanger, il suffit de changer le nom du fichier dans la
   ligne : la ligne de rechange est écrite juste en dessous, en commentaire.
   --------------------------------------------------------------------------- */


/* ===========================================================================
   1. ATELIER — le bandeau de l'établi
   =========================================================================== */

/* Les couleurs du bandeau. L'encre du thème pour le bandeau des libellés, le
   gris froid au survol, la terre cuite pour la page courante. */
html.flore-th-atelier .flore-bandeau {
	--flore-bandeau-violet: 31, 29, 27;      /* #1F1D1B — l'encre de l'atelier */
	--flore-bandeau-violet-vif: #4a4f55;     /* le gris froid, au survol */
	--flore-bandeau-creme: #f2f1ee;          /* le papier */
	--flore-bandeau-rose: #e08a6e;           /* le filet de la page courante */
	--flore-bandeau-orange: #ffc9b3;         /* le libellé survolé — 5,6:1 */
}

/* Le cadre du survol se sépare du libellé : un pêche pâle se voit très bien
   sur une photographie, et plus du tout sur un dessin posé sur le papier. */
html.flore-th-atelier .flore-bandeau__lien::after {
	border-color: var(--flore-violet);       /* terre cuite — 6,2:1 sur le papier */
}

/* Le papier des tuiles suit la teinte. --flore-papier n'est pas redéfini la
   nuit — c'est le fond du socle qui l'est —, d'où la seconde règle. */
html.flore-th-atelier .flore-bandeau__lien {
	background: var(--flore-papier);
}

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

/* Les six dessins. Une ligne par case ; la variante est juste en dessous. */

/* Fleur par fleur — trois tiges sur le bord de l'établi */
html.flore-th-atelier .flore-bandeau__image[src*="/hortensia-mauve-800.webp"] {
	--flore-tuile: url("dessins/fleur-par-fleur.svg");
}
/* Variante : la fleur seule, en plan serré
html.flore-th-atelier .flore-bandeau__image[src*="/hortensia-mauve-800.webp"] {
	--flore-tuile: url("dessins/fleur-seule.svg");
} */

/* Technique et vocabulaire — le sécateur */
html.flore-th-atelier .flore-bandeau__image[src*="/lys-blanc-800.webp"] {
	--flore-tuile: url("dessins/secateur.svg");
}
/* Variante : l'étiquette pendue à la tige
html.flore-th-atelier .flore-bandeau__image[src*="/lys-blanc-800.webp"] {
	--flore-tuile: url("dessins/etiquette.svg");
} */

/* Gestes et saisons — la main ouverte */
html.flore-th-atelier .flore-bandeau__image[src*="/pivoine-rose-800.webp"] {
	--flore-tuile: url("dessins/main.svg");
}
/* Variante : la botte liée
html.flore-th-atelier .flore-bandeau__image[src*="/pivoine-rose-800.webp"] {
	--flore-tuile: url("dessins/botte-liee.svg");
} */

/* Tendances et coulisses — les bottes suspendues, tête en bas */
html.flore-th-atelier .flore-bandeau__image[src*="/gerbera-orange-800.webp"] {
	--flore-tuile: url("dessins/bottes-suspendues.svg");
}
/* Variante : le seau de l'atelier
html.flore-th-atelier .flore-bandeau__image[src*="/gerbera-orange-800.webp"] {
	--flore-tuile: url("dessins/seau.svg");
} */

/* Le calendrier — la corolle à douze pétales */
html.flore-th-atelier .flore-bandeau__image[src*="/aster-violet-800.webp"] {
	--flore-tuile: url("dessins/douze-petales.svg");
}

/* Reconnaître une fleur — la loupe dont la tige est le manche */
html.flore-th-atelier .flore-bandeau__image[src*="/lisianthus-rose-800.webp"] {
	--flore-tuile: url("dessins/loupe.svg");
}

/* Ce qui vaut pour les six d'un coup.

   Les deux tuiles dessinées — le nom et le logo — sont écartées : elles sont
   déjà au thème depuis « Flore — Thèmes du site » 1.4.0, et un thème repeint
   son papier, jamais son logo. */
html.flore-th-atelier .flore-bandeau__image[src*="-800.webp"]:not([src*="/nom-"]):not([src*="/logo-"]) {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E");
	background-color: var(--flore-violet-fonce);
	-webkit-mask-image: var(--flore-tuile);
	mask-image: var(--flore-tuile);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.25s ease;
}

/* Un dessin ne se recadre pas : au survol, c'est la couleur du trait qui
   bouge, pas l'échelle.

   Les deux exclusions sont répétées ici, et ce n'est pas de la verbosité :
   « :not() » emprunte la spécificité de son argument, si bien que la règle
   ci-dessus pèse deux crans de plus qu'un simple « :hover ». Sans les
   répéter, le survol ne passait pas — relevé à l'essai — et le nom et le
   logo, eux, se remplissaient d'un aplat de terre cuite. */
html.flore-th-atelier .flore-bandeau__lien:hover .flore-bandeau__image[src*="-800.webp"]:not([src*="/nom-"]):not([src*="/logo-"]),
html.flore-th-atelier .flore-bandeau__lien:focus-visible .flore-bandeau__image[src*="-800.webp"]:not([src*="/nom-"]):not([src*="/logo-"]) {
	transform: none;
	background-color: var(--flore-violet);   /* terre cuite */
}

@media (prefers-reduced-motion: reduce) {
	html.flore-th-atelier .flore-bandeau__image {
		transition: none;
	}
}


/* ===========================================================================
   2. HERBIER — les photographies restent, le violet s'en va

   Les tuiles de l'herbier sont à définir : la planche du botaniste a sa
   convention — le spécimen entier, à plat, avec sa racine et son étiquette —
   et elle mérite mieux qu'une reprise des dessins de l'atelier. En attendant,
   ses photographies gardent leur place ; seul le bandeau des libellés passe à
   sa charte.
   =========================================================================== */

html.flore-th-herbier .flore-bandeau {
	--flore-bandeau-violet: 44, 74, 52;      /* #2C4A34 — le vert sombre des titres */
	--flore-bandeau-violet-vif: #3f6b4a;     /* le vert dominant, au survol */
	--flore-bandeau-creme: #fbfaf5;          /* l'ivoire */
	--flore-bandeau-rose: #d8c79b;           /* le filet de la page courante */
	--flore-bandeau-orange: #f7e3b0;         /* le libellé survolé — 4,9:1 */
}