/**
 * Le calendrier des fleurs.
 * Aucune couleur de fond en dur : la page hérite du registre choisi par le
 * lecteur (jour, sépia, nuit) et le tableau suit avec currentColor.
 */

.flore-cal {
	--fc-accent: var(--accent, #7a5b86);
	--fc-trait: rgba(128, 128, 128, 0.35);
	--fc-doux: rgba(128, 128, 128, 0.12);
	margin: 2rem 0;
	font-size: 0.95rem;
}

.flore-cal__titre {
	margin: 0 0 0.75rem;
	font-weight: 600;
}

/* --- Filtres --- */

.flore-cal__filtres {
	border: 1px solid var(--fc-trait);
	border-radius: 6px;
	padding: 0.85rem 1rem 0.6rem;
	margin-bottom: 1rem;
}

.flore-cal__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
}

.flore-cal__etiquette {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
	margin-right: 0.4rem;
}

.flore-cal__choix {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.flore-cal__jeton {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 1px solid var(--fc-trait);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.2;
	padding: 0.3rem 0.7rem;
	cursor: pointer;
}

.flore-cal__jeton:hover {
	border-color: currentColor;
}

.flore-cal__jeton.is-actif {
	background: var(--fc-accent);
	border-color: var(--fc-accent);
	color: #fff;
}

.flore-cal__jeton--maintenant {
	font-style: italic;
}

.flore-cal__ligne--selects {
	gap: 0.9rem;
	align-items: flex-end;
}

.flore-cal__ligne--actions {
	gap: 0.6rem;
	align-items: center;
	margin-bottom: 0.2rem;
}

.flore-cal__champ {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.flore-cal__champ select,
.flore-cal__champ input {
	font: inherit;
	font-size: 0.9rem;
	padding: 0.3rem 0.4rem;
	border: 1px solid var(--fc-trait);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	max-width: 15rem;
}

.flore-cal__champ--recherche input {
	min-width: 12rem;
}

.flore-cal__case {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.88rem;
}

.flore-cal__raz,
.flore-cal__imprimer,
.flore-cal__csv {
	border: 1px solid var(--fc-trait);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	padding: 0.35rem 0.7rem;
	cursor: pointer;
}

.flore-cal__raz:hover,
.flore-cal__imprimer:hover,
.flore-cal__csv:hover {
	border-color: currentColor;
}

.flore-cal__compte {
	margin: 0;
	margin-left: auto;
	font-size: 0.85rem;
	opacity: 0.75;
}

/* --- Pastilles de couleur --- */

.flore-cal__pastille {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.25);
	vertical-align: -0.05em;
	margin-right: 0.25em;
	flex: none;
}

.flore-cal__pastille--blanc { background: #ffffff; }
.flore-cal__pastille--creme { background: #f3e5c8; }
.flore-cal__pastille--jaune { background: #f2c230; }
.flore-cal__pastille--orange { background: #e8862a; }
.flore-cal__pastille--rouge { background: #c02b32; }
.flore-cal__pastille--rose { background: #eda3bd; }
.flore-cal__pastille--fuchsia { background: #c2247e; }
.flore-cal__pastille--mauve { background: #b79bd0; }
.flore-cal__pastille--violet { background: #6b3fa0; }
.flore-cal__pastille--bleu { background: #3a6ea5; }
.flore-cal__pastille--vert { background: #5d8c46; }
.flore-cal__pastille--chocolat { background: #6b4636; }
.flore-cal__pastille--bicolore {
	background: linear-gradient(135deg, #f2c230 0 50%, #c02b32 50% 100%);
}

.flore-cal__jeton.is-actif .flore-cal__pastille {
	border-color: rgba(255, 255, 255, 0.6);
}

/* --- Tableau --- */

.flore-cal__cadre {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.flore-cal__table {
	width: 100%;
	min-width: 58rem;
	border-collapse: collapse;
}

.flore-cal__caption {
	caption-side: top;
	text-align: left;
	font-size: 0.85rem;
	opacity: 0.75;
	padding-bottom: 0.5rem;
}

.flore-cal__table th,
.flore-cal__table td {
	border-bottom: 1px solid var(--fc-trait);
	padding: 0.5rem 0.6rem;
	text-align: left;
	vertical-align: top;
}

.flore-cal__table thead th {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom-width: 2px;
	white-space: nowrap;
}

.flore-cal__tri {
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-transform: inherit;
	letter-spacing: inherit;
}

.flore-cal__tri::after {
	content: " ↕";
	opacity: 0.4;
}

.flore-cal__table th[aria-sort="ascending"] .flore-cal__tri::after {
	content: " ↑";
	opacity: 1;
}

.flore-cal__table th[aria-sort="descending"] .flore-cal__tri::after {
	content: " ↓";
	opacity: 1;
}

.flore-cal__table tbody tr:hover {
	background: var(--fc-doux);
}

.flore-cal__fleur {
	white-space: nowrap;
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
}

.flore-cal__vignette {
	flex: none;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fc-trait);
	border-radius: 4px;
	overflow: hidden;
	opacity: 0.85;
}

.flore-cal__vignette img {
	width: 34px;
	height: 34px;
	object-fit: cover;
	display: block;
}

.flore-cal__silhouette {
	opacity: 0.7;
}

.flore-cal__identite {
	min-width: 0;
}

.flore-cal__nom {
	display: block;
	font-weight: 600;
}

.flore-cal__latin {
	display: block;
	font-style: italic;
	font-size: 0.8rem;
	/* 1.17.0 : plus d'opacité. La couleur du lien donne 4,85:1 sur le fond de la
	   ligne ; à 70 % d'opacité elle tombait vers 3:1, sous le seuil de 4,5:1 pour un
	   texte de cette taille. L'italique et la taille suffisent à le mettre en retrait. */
}

.flore-cal__role {
	display: inline-block;
	margin-top: 0.2rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid var(--fc-trait);
	border-radius: 3px;
	padding: 0 0.35em;
	/* 1.17.0 : plus d'opacité, même raison que le nom latin. */
	cursor: help;
}

.flore-cal__remplace {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	opacity: 0.85;
	font-style: italic;
}

/* --- Frise des douze mois, cliquable --- */

.flore-cal__frise {
	display: inline-flex;
	gap: 1px;
}

.flore-cal__case-mois {
	width: 1.35em;
	height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-size: 0.7rem;
	color: inherit;
	background: transparent;
	border: 1px solid var(--fc-trait);
	opacity: 0.45;
	cursor: pointer;
	padding: 0;
}

.flore-cal__case-mois:hover {
	outline: 1px solid currentColor;
	opacity: 1;
}

.flore-cal__case-mois.is-dispo {
	background: color-mix(in srgb, var(--fc-accent) 25%, transparent);
	border-color: color-mix(in srgb, var(--fc-accent) 45%, transparent);
	opacity: 1;
}

.flore-cal__case-mois.is-pic {
	background: var(--fc-accent);
	border-color: var(--fc-accent);
	color: #fff;
	font-weight: 600;
}

.flore-cal__saison-txt {
	display: block;
	font-size: 0.8rem;
	opacity: 0.75;
	margin-top: 0.2rem;
}

.flore-cal__couleurs {
	max-width: 11rem;
}

.flore-cal__pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
	margin-bottom: 0.25rem;
}

.flore-cal__pastilles .flore-cal__pastille {
	margin-right: 0;
	width: 0.85em;
	height: 0.85em;
}

.flore-cal__couleurs-txt {
	display: block;
	font-size: 0.8rem;
	opacity: 0.8;
	line-height: 1.35;
}

.flore-cal__court {
	display: none;
}

.flore-cal__vase {
	white-space: nowrap;
}

.flore-cal__note {
	max-width: 22rem;
	font-size: 0.88rem;
}

/* --- Badges --- */

.flore-cal__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 0.3rem;
}

.flore-cal__badge {
	display: inline-block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid var(--fc-trait);
	border-radius: 3px;
	padding: 0 0.35em;
	white-space: nowrap;
	cursor: help;
}

.flore-cal__badge--danger {
	border-color: #c02b32;
	color: #c02b32;
	font-weight: 600;
}

.flore-cal__badge--modere,
.flore-cal__badge--bulbe {
	border-color: #b06a1e;
	color: #b06a1e;
}

.flore-cal__badge--sans-risque,
.flore-cal__badge--sechage {
	opacity: 0.75;
}

.flore-cal__securite-note {
	display: block;
	margin-top: 0.25rem;
	opacity: 0.85;
}

.flore-cal__doute {
	display: inline-block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid var(--fc-trait);
	border-radius: 3px;
	padding: 0 0.3em;
	opacity: 0.8;
	white-space: nowrap;
}

.flore-cal__vide {
	padding: 1.2rem 0;
	font-style: italic;
}

.flore-cal__legende {
	margin-top: 0.8rem;
	font-size: 0.85rem;
	opacity: 0.8;
}

.flore-cal__legende--risque {
	margin-top: 0.4rem;
}

.flore-cal__ligne-espece[hidden] {
	display: none;
}

/* --- Écran étroit : le tableau devient une pile de fiches --- */

@media (max-width: 780px) {
	.flore-cal__cadre {
		overflow-x: visible;
	}

	.flore-cal__table,
	.flore-cal__table tbody,
	.flore-cal__table tr,
	.flore-cal__table td,
	.flore-cal__table th {
		display: block;
		width: auto;
	}

	/* 1.17.0 : le socle enveloppe chaque tableau dans .flore-tscroll et lui donne
	   « min-width: 32em » avec un sélecteur plus fort (.flore-tscroll > table) que
	   celui-ci. Sur téléphone, les fiches gardaient donc 438 px de large dans un
	   cadre de 260 à 370 px : coupées à droite, à faire défiler de côté. */
	.flore-cal__table,
	.flore-tscroll > .flore-cal__table {
		min-width: 0;
	}

	.flore-cal__caption {
		display: block;
		width: 100%;
	}

	.flore-cal__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.flore-cal__table tbody tr {
		border: 1px solid var(--fc-trait);
		border-radius: 6px;
		padding: 0.6rem 0.8rem;
		margin-bottom: 0.8rem;
	}

	.flore-cal__table tbody th,
	.flore-cal__table tbody td {
		border: 0;
		padding: 0.15rem 0;
	}

	.flore-cal__fleur {
		white-space: normal;
		border-bottom: 1px solid var(--fc-trait) !important;
		padding-bottom: 0.35rem !important;
		margin-bottom: 0.35rem;
	}

	.flore-cal__table tbody td[data-label]::before {
		content: attr(data-label) " · ";
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		opacity: 0.6;
	}

	.flore-cal__couleurs,
	.flore-cal__note {
		max-width: none;
	}

	.flore-cal__pastilles {
		display: inline-flex;
		vertical-align: -0.15em;
		margin-bottom: 0;
		margin-right: 0.3rem;
	}

	.flore-cal__couleurs-txt {
		display: inline;
	}

	.flore-cal__saison-txt {
		display: inline;
		margin-left: 0.4rem;
	}

	.flore-cal__badges {
		display: inline-flex;
		margin-bottom: 0;
	}
}

@media (max-width: 600px) {
	.flore-cal__ligne--selects {
		gap: 0.6rem;
	}

	.flore-cal__champ select,
	.flore-cal__champ input {
		max-width: 100%;
	}

	/* Mois abrégés, couleurs en pastilles seules : la barre tient en trois lignes. */
	.flore-cal__jeton .flore-cal__long {
		display: none;
	}

	.flore-cal__jeton .flore-cal__court {
		display: inline;
	}

	.flore-cal__jeton--couleur {
		padding: 0.35rem;
	}

	.flore-cal__jeton--couleur .flore-cal__pastille {
		margin-right: 0;
		width: 1em;
		height: 1em;
	}

	.flore-cal__compte {
		margin-left: 0;
		width: 100%;
	}
}

/* --- Écrans tactiles (1.17.0) --- */

@media (pointer: coarse) {
	/* Sous 16 px, Safari sur iPhone agrandit la page au focus d'un champ. */
	.flore-cal__champ select,
	.flore-cal__champ input {
		font-size: max(16px, 1rem);
	}
}

/* La frise mesurait 15 × 17 px par mois : trop petit pour un doigt, et six cents
   cibles collées les unes aux autres. Sur écran tactile étroit, elle prend la
   largeur de la fiche et chaque mois partage cette largeur, à 1,6 rem de haut. Les
   jetons des mois, en tête du calendrier, restent la commande complète. */
@media (pointer: coarse) and (max-width: 780px) {
	.flore-cal__frise {
		display: flex;
		width: 100%;
		max-width: 26rem;
		margin: 0.2rem 0;
	}

	.flore-cal__case-mois {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: 1.6rem;
	}

	.flore-cal__saison-txt {
		display: block;
		margin-left: 0;
	}
}

/* --- Impression --- */

@media print {
	.flore-cal__filtres,
	.flore-cal__tri::after {
		display: none;
	}

	.flore-cal__cadre {
		overflow: visible;
	}

	.flore-cal__table {
		min-width: 0;
		font-size: 0.72rem;
	}

	.flore-cal__case-mois {
		border-color: #999;
	}

	.flore-cal__case-mois.is-dispo {
		background: #d9d9d9;
	}

	.flore-cal__case-mois.is-pic {
		background: #6b6b6b;
		color: #fff;
	}

	.flore-cal__table tbody tr {
		break-inside: avoid;
	}
}

/* --- Bloc « en ce moment » --- */

.flore-mois {
	--fc-accent: var(--accent, #7a5b86);
	--fc-trait: rgba(128, 128, 128, 0.35);
	border: 1px solid var(--fc-trait);
	border-left: 3px solid var(--fc-accent);
	border-radius: 4px;
	padding: 0.9rem 1.1rem;
	margin: 1.8rem 0;
	font-size: 0.95rem;
}

.flore-mois__titre {
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.flore-mois__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.flore-mois__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.25rem 0;
}

.flore-mois__pastilles {
	display: inline-flex;
	gap: 0.12rem;
	flex: none;
}

.flore-mois__pastilles .flore-cal__pastille {
	margin-right: 0;
	width: 0.7em;
	height: 0.7em;
}

.flore-mois__nom {
	font-weight: 600;
}

.flore-mois__detail {
	font-size: 0.85rem;
	opacity: 0.75;
}

.flore-mois__risque {
	color: #c02b32;
}

.flore-mois__lien {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
}

@media print {
	.flore-mois {
		break-inside: avoid;
	}
}

/* --- Bande des douze mois --- */

.flore-bande {
	--fc-accent: var(--accent, #7a5b86);
	--fc-trait: rgba(128, 128, 128, 0.35);
	margin: 1.6rem 0;
}

.flore-bande__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.flore-bande__item {
	margin: 0;
}

.flore-bande__lien {
	display: inline-block;
	border: 1px solid var(--fc-trait);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	font-size: 0.85rem;
	text-decoration: none;
	color: inherit;
}

a.flore-bande__lien:hover {
	border-color: currentColor;
}

.flore-bande__lien.is-mois-courant {
	border-style: dashed;
}

.flore-bande__lien.is-actuel {
	background: var(--fc-accent);
	border-color: var(--fc-accent);
	color: #fff;
}


/* Les silhouettes des fiches : la palette des planches dessinees du site.
   Posé le 9 septembre 2026. Le violet et son fond pâle pour les pétales,
   le rose sourd pour les cœurs et les baies, la sauge pour les tiges et
   les feuilles. Les classes sont portées par les formes elles-mêmes,
   dans inc/images.php. */

.flore-cal__silhouette {
	stroke-width: 1.1;
}

.flore-cal__silhouette .fl-tige {
	fill: none;
	stroke: #8f9d84;
}

.flore-cal__silhouette .fl-feuille {
	fill: #cbd5bb;
	stroke: #8f9d84;
}

.flore-cal__silhouette .fl-petale {
	fill: #cdbde8;
	stroke: #6f5a90;
}

.flore-cal__silhouette .fl-coeur {
	fill: #bf8f98;
	stroke: #a3737d;
}