/**
 * Flore — Le jeu des saisons. Version 1.11.1.
 *
 * Deux pigments lus dans l'habillage, --flore-violet et --flore-orange ; tout le reste s'en
 * déduit, et les chartes Herbier et Atelier repeignent le jeu sans une ligne de plus. Chaque
 * état d'un mois se lit aussi sans la couleur : un signe s'ajoute au libellé.
 */

.flore-sai {
	--fs-violet: var(--flore-violet, #7b5aa6);
	--fs-accent: var(--flore-orange, #935516);
	--fs-pale: var(--flore-violet-pale, #d6c9e6);
	--fs-fond: #ffffff;
	--fs-case: #fffdf8;
	--fs-encre: var(--contrast, #2e2838);
	--fs-doux: var(--contrast-2, #5c5266);
	--fs-faux: #b3261e;
	--fs-choisi: var(--fs-violet);
	--fs-choisi-texte: #ffffff;
	--fs-trop-fond: color-mix(in srgb, var(--fs-faux) 10%, var(--fs-fond));
	--fs-oublie-fond: color-mix(in srgb, var(--fs-violet) 10%, var(--fs-fond));
	--fs-neutre: color-mix(in srgb, var(--fs-encre) 9%, var(--fs-fond));
	--fs-cadre: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-fond));
}

html.flore-sepia .flore-sai {
	--fs-fond: #f6eee0;
	--fs-case: #f8f2e7;
}

html.flore-nuit .flore-sai {
	--fs-violet: #cbb6e6;
	--fs-accent: #db9f62;
	--fs-pale: #4b4457;
	--fs-fond: #1c1f21;
	--fs-case: #1d2023;
	--fs-encre: #eceff2;
	--fs-doux: #b9b3c2;
	--fs-faux: #ff8f85;
	--fs-choisi-texte: #1b1622;
}

html.flore-th-herbier.flore-nuit .flore-sai,
html.flore-th-atelier.flore-nuit .flore-sai {
	--fs-violet: var(--flore-violet, #cbb6e6);
	--fs-accent: var(--flore-orange, #db9f62);
	--fs-pale: var(--flore-violet-pale, #4b4457);
}

html.flore-contraste:not(.flore-nuit) .flore-sai {
	--fs-encre: #000000;
	--fs-doux: #2e2838;
}

/* --- ce que le thème et l'habillage imposent aux titres et aux paragraphes ----------------
   Sur le site, un h2 de contenu prend 3,2 em de marge et un trait aquarelle dessous, un
   paragraphe 1,45 em de marge : dans la carte du jeu, rien de cela. Sélecteurs volontairement
   forts — ceux du site pèsent (0,3,1). */

.flore-sai .flore-sai__jeu h2.flore-sai__nom,
.flore-sai .flore-sai__jeu h2.flore-sai__total {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.flore-sai .flore-sai__jeu h2.flore-sai__nom::before,
.flore-sai .flore-sai__jeu h2.flore-sai__nom::after,
.flore-sai .flore-sai__jeu h2.flore-sai__total::before,
.flore-sai .flore-sai__jeu h2.flore-sai__total::after {
	content: none;
	display: none;
}

.flore-sai .flore-sai__jeu p {
	margin: 0 0 .55rem;
}

.flore-sai .flore-sai__jeu p.flore-sai__latin {
	margin: .1rem 0 0;
}

.flore-sai .flore-sai__jeu p.flore-sai__consigne {
	margin: .35rem 0 0;
}

.flore-sai .flore-sai__jeu p.flore-sai__verdict {
	margin: .2rem 0 .4rem;
}

.flore-sai .flore-sai__jeu p.flore-sai__bilan-pieges {
	margin: 0 0 .8rem;
}

.flore-sai .flore-sai__jeu p.flore-sai__annonce {
	margin: -1px;
}

.flore-sai .flore-sai__jeu ul.flore-sai__legende {
	margin: 0 0 .7rem;
	padding: 0;
	list-style: none;
}

.flore-sai .flore-sai__jeu .flore-sai__legende li {
	margin: 0;
}

/* --- sans script ------------------------------------------------------------------------ */

.flore-sai--actif .flore-sai__sansjs {
	display: none;
}

.flore-sai__sansjs {
	padding: .7rem .9rem;
	border-left: 3px solid var(--fs-pale);
	font-size: .95rem;
}

/* --- la scène --------------------------------------------------------------------------- */

.flore-sai__jeu {
	container-type: inline-size;
	margin: 1.2rem 0 2rem;
	padding: 1rem 1rem 1.2rem;
	border: 1px solid var(--fs-pale);
	border-radius: 14px;
	background: var(--fs-cadre);
	color: var(--fs-encre);
	scroll-margin-top: 5rem;
}

.flore-sai__tete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .2rem .8rem;
	font-size: .9rem;
	color: var(--fs-doux);
}

.flore-sai__rang {
	font-weight: 700;
	letter-spacing: .02em;
}

.flore-sai__barre {
	flex: 1 0 100%;
	height: 4px;
	margin-top: .35rem;
	border-radius: 2px;
	background: var(--fs-pale);
	overflow: hidden;
}

.flore-sai__plein {
	display: block;
	height: 100%;
	background: var(--fs-accent);
	transition: width .3s ease;
}

/* --- la fleur --------------------------------------------------------------------------- */

.flore-sai__carte {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 1rem 0 .9rem;
}

.flore-sai__vignette {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.6rem;
	height: 4.6rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fs-case);
	border: 1px solid var(--fs-pale);
	color: var(--fs-violet);
}

.flore-sai__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flore-sai__vignette svg {
	width: 62%;
	height: 62%;
}

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

.flore-sai .flore-sai__nom {
	margin: 0;
	font-size: 1.45rem;
	line-height: 1.15;
	color: var(--fs-encre);
}

.flore-sai .flore-sai__nom:focus {
	outline: none;
}

.flore-sai__latin {
	margin: .1rem 0 0;
	font-style: italic;
	color: var(--fs-doux);
}

.flore-sai__consigne {
	margin: .35rem 0 0;
	font-size: .9rem;
	line-height: 1.35;
	color: var(--fs-doux);
}

/* --- les douze mois --------------------------------------------------------------------- */

.flore-sai__mois {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .4rem;
	margin: 0 0 .9rem;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

@container (min-width: 780px) {
	.flore-sai__mois {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

@container (max-width: 330px) {
	.flore-sai__mois {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.flore-sai .flore-sai__m {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 3.4rem;
	margin: 0;
	padding: .35rem .15rem;
	border: 1px solid var(--fs-pale);
	border-radius: 10px;
	background: var(--fs-case);
	color: var(--fs-encre);
	font: inherit;
	line-height: 1.1;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.flore-sai .flore-sai__m:hover {
	border-color: var(--fs-accent);
	background: var(--fs-case);
	color: var(--fs-encre);
}

.flore-sai .flore-sai__m:focus-visible {
	outline: 2px solid var(--fs-accent);
	outline-offset: 2px;
}

.flore-sai__abr {
	font-size: .95rem;
	font-weight: 600;
}

.flore-sai__rdv {
	margin-top: .15rem;
	font-size: .64rem;
	letter-spacing: .01em;
	color: var(--fs-accent);
	text-align: center;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.flore-sai .flore-sai__m[aria-pressed="true"] {
	border-color: var(--fs-choisi);
	background: var(--fs-choisi);
	color: var(--fs-choisi-texte);
}

.flore-sai .flore-sai__m[aria-pressed="true"] .flore-sai__rdv {
	color: inherit;
	opacity: .85;
}

/* Après validation : chaque mois dit ce qu'il était, par sa couleur et par un signe. Ces règles
   passent devant l'état « coché », qui a la même force et vient avant. */
.flore-sai__mois--corrige .flore-sai__m {
	cursor: default;
}

.flore-sai .flore-sai__mois--corrige .flore-sai__m:hover {
	border-color: var(--fs-pale);
}

.flore-sai__mois--corrige .flore-sai__m::after {
	position: absolute;
	top: .12rem;
	right: .3rem;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
}

.flore-sai .flore-sai__mois--corrige .flore-sai__m--juste,
.flore-sai .flore-sai__mois--corrige .flore-sai__m--juste:hover {
	border-color: var(--fs-violet);
	background: var(--fs-violet);
	color: var(--fs-choisi-texte);
}

.flore-sai__m--juste::after {
	content: "✓";
}

.flore-sai .flore-sai__mois--corrige .flore-sai__m--oublie,
.flore-sai .flore-sai__mois--corrige .flore-sai__m--oublie:hover {
	border: 2px dashed var(--fs-violet);
	background: var(--fs-oublie-fond);
	color: var(--fs-encre);
}

.flore-sai__m--oublie::after {
	content: "+";
	color: var(--fs-violet);
}

.flore-sai .flore-sai__mois--corrige .flore-sai__m--trop,
.flore-sai .flore-sai__mois--corrige .flore-sai__m--trop:hover {
	border: 2px solid var(--fs-faux);
	background: var(--fs-trop-fond);
	color: var(--fs-encre);
}

.flore-sai__m--trop .flore-sai__abr {
	text-decoration: line-through;
	text-decoration-color: var(--fs-faux);
	text-decoration-thickness: 2px;
}

.flore-sai__m--trop::after {
	content: "✕";
	color: var(--fs-faux);
}

.flore-sai .flore-sai__mois--corrige .flore-sai__m--rien,
.flore-sai .flore-sai__mois--corrige .flore-sai__m--rien:hover {
	background: transparent;
	color: var(--fs-doux);
}

.flore-sai .flore-sai__mois--corrige .flore-sai__m--neutre,
.flore-sai .flore-sai__mois--corrige .flore-sai__m--neutre:hover {
	border-color: var(--fs-pale);
	background: repeating-linear-gradient(135deg, var(--fs-neutre) 0 5px, transparent 5px 10px);
	color: var(--fs-doux);
}

.flore-sai__m--neutre::after {
	content: "–";
}

.flore-sai .flore-sai__mois--corrige .flore-sai__rdv {
	color: inherit;
	opacity: .8;
}

.flore-sai__m--piege {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-faux) 30%, transparent);
}

/* Le point du mois le plus fort. */
.flore-sai__m--pic::before,
.flore-sai__point {
	content: "";
	display: inline-block;
	width: .42rem;
	height: .42rem;
	border-radius: 50%;
	background: var(--fs-accent);
}

.flore-sai__m--pic::before {
	position: absolute;
	top: .3rem;
	left: .3rem;
}

.flore-sai__m--juste.flore-sai__m--pic::before {
	background: var(--fs-choisi-texte);
}

/* --- les actions ------------------------------------------------------------------------ */

.flore-sai__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: .8rem;
}

.flore-sai .flore-sai__bouton {
	display: inline-block;
	margin: 0;
	padding: .55rem 1.1rem;
	border: 1px solid var(--fs-pale);
	border-radius: 999px;
	background: transparent;
	color: var(--fs-encre);
	font: inherit;
	font-size: .98rem;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}

.flore-sai .flore-sai__bouton:hover,
.flore-sai .flore-sai__bouton:focus-visible {
	border-color: var(--fs-accent);
	background: transparent;
	color: var(--fs-encre);
}

.flore-sai .flore-sai__bouton--principal,
.flore-sai .flore-sai__bouton--principal:hover,
.flore-sai .flore-sai__bouton--principal:focus-visible {
	border-color: var(--fs-violet);
	background: var(--fs-violet);
	color: var(--fs-choisi-texte);
}

.flore-sai .flore-sai__bouton--principal:focus-visible {
	outline: 2px solid var(--fs-accent);
	outline-offset: 2px;
}

.flore-sai .flore-sai__bouton:disabled {
	opacity: .45;
	cursor: not-allowed;
}

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

/* --- la réponse ------------------------------------------------------------------------- */

.flore-sai__resultat {
	margin-top: .2rem;
	font-size: .97rem;
	line-height: 1.5;
}

.flore-sai__resultat p {
	margin: 0 0 .55rem;
}

.flore-sai__points strong {
	font-size: 1.2rem;
	color: var(--fs-violet);
}

html.flore-nuit .flore-sai__points strong {
	color: var(--fs-violet);
}

.flore-sai__legende {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem 1rem;
	margin: 0 0 .7rem;
	padding: 0;
	list-style: none;
	font-size: .82rem;
	color: var(--fs-doux);
}

.flore-sai__cle {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
}

.flore-sai__pastille {
	display: inline-block;
	width: .95rem;
	height: .8rem;
	border-radius: 3px;
	border: 1px solid var(--fs-pale);
}

.flore-sai__cle--juste .flore-sai__pastille {
	background: var(--fs-violet);
	border-color: var(--fs-violet);
}

.flore-sai__cle--oublie .flore-sai__pastille {
	border: 2px dashed var(--fs-violet);
	background: var(--fs-oublie-fond);
}

.flore-sai__cle--trop .flore-sai__pastille {
	border: 2px solid var(--fs-faux);
	background: var(--fs-trop-fond);
}

.flore-sai__cle--neutre .flore-sai__pastille {
	background: repeating-linear-gradient(135deg, var(--fs-neutre) 0 3px, transparent 3px 6px);
}

.flore-sai__piege,
.flore-sai__discute {
	margin: .2rem 0 .7rem;
	padding: .6rem .8rem .1rem;
	border-left: 3px solid var(--fs-accent);
	border-radius: 0 8px 8px 0;
	background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-fond));
}

.flore-sai__piege--tombe {
	border-left-color: var(--fs-faux);
	background: var(--fs-trop-fond);
}

.flore-sai__discute {
	border-left-color: var(--fs-pale);
	background: var(--fs-case);
}

.flore-sai .flore-sai__sources {
	font-size: .82rem;
	color: var(--fs-doux);
}

.flore-sai__note {
	font-style: italic;
}

.flore-sai__certitude {
	font-size: .88rem;
	color: var(--fs-doux);
}

.flore-sai__lien a {
	font-weight: 600;
}

/* --- le bilan --------------------------------------------------------------------------- */

.flore-sai__fin {
	margin-top: .8rem;
}

.flore-sai .flore-sai__total {
	margin: 0;
	font-size: 2rem;
	line-height: 1.1;
	color: var(--fs-violet);
}

.flore-sai .flore-sai__total:focus {
	outline: none;
}

.flore-sai__verdict {
	margin: .2rem 0 .4rem;
	font-size: 1.1rem;
}

.flore-sai__bilan-pieges {
	margin: 0 0 .8rem;
	color: var(--fs-doux);
}

.flore-sai__recap-cadre {
	overflow-x: auto;
}

.flore-sai__recap {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: .95rem;
}

.flore-sai__recap th,
.flore-sai__recap td {
	padding: .4rem .5rem;
	border-bottom: 1px solid var(--fs-pale);
	text-align: left;
	vertical-align: baseline;
}

.flore-sai__recap thead th {
	font-size: .8rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--fs-doux);
}

.flore-sai__recap tbody th {
	font-weight: 600;
}

.flore-sai .flore-sai__recap-points {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.flore-sai__marque {
	display: inline-block;
	margin-left: .4rem;
	padding: 0 .4rem;
	border-radius: 999px;
	background: var(--fs-trop-fond);
	color: var(--fs-faux);
	font-size: .72rem;
	font-weight: 600;
	vertical-align: .1em;
}

/* --- les pièges expliqués --------------------------------------------------------------- */

.flore-sai__pieges {
	margin: 1.2rem 0;
	padding: .6rem .9rem;
	border: 1px solid var(--fs-pale);
	border-radius: 10px;
}

.flore-sai__pieges summary {
	cursor: pointer;
	font-weight: 600;
}

.flore-sai__pieges dl {
	margin: .8rem 0 0;
}

.flore-sai__pieges dt {
	margin-top: .7rem;
	font-weight: 700;
}

.flore-sai .flore-sai__pieges dd {
	margin: .2rem 0 0;
	padding: 0;
}

.flore-sai__pieges .flore-sai__sources {
	display: block;
	margin-top: .2rem;
}

@container (max-width: 420px) {
	.flore-sai__vignette {
		width: 3.6rem;
		height: 3.6rem;
	}

	.flore-sai .flore-sai__nom {
		font-size: 1.25rem;
	}

	.flore-sai .flore-sai__m {
		min-height: 3.1rem;
	}

	.flore-sai__abr {
		font-size: .86rem;
	}

	.flore-sai__rdv {
		font-size: .58rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flore-sai__plein {
		transition: none;
	}
}

@media print {
	.flore-sai__jeu {
		display: none;
	}

	.flore-sai__pieges {
		border: 0;
		padding: 0;
	}
}