/*
 * « Quelle fleur choisir ? »
 *
 * Un tableau de comparaison se lit en colonnes : les lignes doivent donc être
 * calmes et les en-têtes visibles. Les couleurs viennent de l'habillage quand
 * elles existent, avec un repli en dur.
 */

.flore-cmp {
	--cmp-encre: var(--flore-titre, #3e2a57);
	--cmp-accent: var(--flore-orange, #935516);
	--cmp-papier: var(--flore-fond, #f7f4ec);
	--cmp-trait: rgba(62, 42, 87, 0.16);

	margin: 1.6rem 0;
}

.flore-cmp-invite { font-size: 0.95rem; opacity: 0.8; }

/* Un tableau large est le seul élément autorisé à défiler de côté. */
.flore-cmp-defile { overflow-x: auto; }

.flore-cmp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.flore-cmp-table th,
.flore-cmp-table td {
	padding: 0.5rem 0.6rem 0.5rem 0;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--cmp-trait);
}

.flore-cmp-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--cmp-papier);
	border-bottom: 2px solid var(--cmp-trait);
	white-space: nowrap;
}

.flore-cmp-table thead a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	text-decoration: none;
	color: var(--cmp-encre);
	font-weight: 700;
}

.flore-cmp-table thead a:hover,
.flore-cmp-table thead a:focus-visible { color: var(--cmp-accent); }

.flore-cmp-fleche { font-size: 0.78em; opacity: 0.45; }
.flore-cmp-table th[aria-sort]:not([aria-sort="none"]) .flore-cmp-fleche { opacity: 1; color: var(--cmp-accent); }

.flore-cmp-table tbody tr:hover { background: rgba(147, 85, 22, 0.05); }

/* La première colonne : la vignette et les deux noms. */
.flore-cmp-fleur a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}

.flore-cmp-vignette img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 3px;
}

.flore-cmp-noms strong { display: block; }
.flore-cmp-noms em { display: block; font-size: 0.82em; opacity: 0.65; font-style: italic; }

.flore-cmp-fleur a:hover strong,
.flore-cmp-fleur a:focus-visible strong { color: var(--cmp-accent); text-decoration: underline; }

/* La toxicité se lit d'un coup d'œil, sans que la couleur soit seule à le dire :
   le mot est écrit en toutes lettres dans la case. */
.flore-cmp-secu { white-space: nowrap; }
.flore-cmp-secu--danger { font-weight: 700; }
.flore-cmp-secu--danger::before,
.flore-cmp-secu--modere::before,
.flore-cmp-secu--bulbe::before {
	content: "";
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	vertical-align: 0.02em;
}
.flore-cmp-secu--danger::before { background: #a3342c; }
.flore-cmp-secu--modere::before { background: #b8862f; }
.flore-cmp-secu--bulbe::before { background: #8a7a3f; }

.flore-cmp-note { font-size: 0.88rem; opacity: 0.8; margin-top: 0.9rem; }

@media (max-width: 700px) {
	.flore-cmp-table { font-size: 0.86rem; }
	.flore-cmp-vignette img { width: 38px; height: 38px; }
	.flore-cmp-noms em { display: none; }
}

@media print {
	.flore-cmp-table thead th { position: static; }
	.flore-cmp-vignette { display: none; }
}