/**
 * Flore — Mots mêlés des fleurs. Version 1.13.0.
 *
 * Complète mots.css (choix des grilles, barre, boutons, solution), dont il reprend les
 * variables. Les sélecteurs commencent par .flore-mots--meles : les règles du thème sur les
 * titres, paragraphes, champs et boutons du contenu pèsent plus lourd qu'une seule classe.
 */

.flore-mots--meles {
	--mm-t0: #8f6fc0;
	--mm-t1: #d0873f;
	--mm-t2: #6f9a5b;
	--mm-t3: #c76b8f;
	--mm-t4: #5b86b5;
	--mm-t5: #c9a13b;
	--mm-opacite: .36;
	--mm-reste: color-mix(in srgb, var(--fm-accent) 20%, var(--fm-fond));
}

html.flore-nuit .flore-mots--meles {
	--mm-t0: #b59ad9;
	--mm-t1: #e0a468;
	--mm-t2: #93bd7f;
	--mm-t3: #de94b2;
	--mm-t4: #8cb0d8;
	--mm-t5: #d8bb67;
	--mm-opacite: .42;
	--mm-reste: color-mix(in srgb, var(--fm-accent) 32%, var(--fm-fond));
}

/* --- la grille et la liste ------------------------------------------------------------ */

.flore-mots--meles .mm-jeu {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: .25rem 2rem;
	margin: .75rem 0 0;
}

/* Pas de --fm-w ici : la classe fm-cN de la grille le donne, et une règle plus lourde
   l'écraserait (toutes les grilles passeraient à dix colonnes). */
.flore-mots--meles .mm-plateau {
	container-type: inline-size;
	box-sizing: border-box;
	flex: 1 1 19rem;
	width: 100%;
	max-width: calc(var(--fm-w) * 46px + 20px);
	margin: 0;
}

.flore-mots--meles .fm-solution .mm-plateau {
	max-width: calc(var(--fm-w) * 34px + 20px);
	margin: .6rem auto .4rem;
}

.flore-mots--meles .mm-grille {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--fm-w), 1fr);
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px;
	border: 2px solid var(--fm-trait);
	border-radius: 12px;
	background: var(--fm-case);
	color: var(--fm-encre);
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.flore-mots--meles.flore-mots--actif .mm-grille:not(.mm-grille--solution) {
	touch-action: none;
	cursor: pointer;
}

.flore-mots--meles .mm-grille:focus {
	outline: none;
}

.flore-mots--meles .mm-grille:focus-visible {
	outline: 3px solid var(--fm-accent);
	outline-offset: 2px;
}

.flore-mots--meles .mm-c {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	min-width: 0;
	border-radius: 50%;
	font-weight: 700;
	font-size: calc((100cqi - 20px) / var(--fm-w) * .5);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

.flore-mots--meles .mm-traits {
	position: absolute;
	z-index: 0;
	top: 8px;
	left: 8px;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	overflow: visible;
	pointer-events: none;
}

.flore-mots--meles .mm-traits line {
	fill: none;
	stroke-width: .76;
	stroke-linecap: round;
	opacity: var(--mm-opacite);
}

.flore-mots--meles .mm-t0 { stroke: var(--mm-t0); }
.flore-mots--meles .mm-t1 { stroke: var(--mm-t1); }
.flore-mots--meles .mm-t2 { stroke: var(--mm-t2); }
.flore-mots--meles .mm-t3 { stroke: var(--mm-t3); }
.flore-mots--meles .mm-t4 { stroke: var(--mm-t4); }
.flore-mots--meles .mm-t5 { stroke: var(--mm-t5); }

/* Un nom dévoilé par l'indice : un trait plus fin, pour qu'on le reconnaisse. */
.flore-mots--meles .mm-traits .mm-t--donne {
	stroke-width: .5;
	stroke-dasharray: .06 .16;
	opacity: .7;
}

.flore-mots--meles .mm-traits .mm-sel {
	stroke: var(--fm-accent);
	stroke-width: .82;
	opacity: .28;
}

.flore-mots--meles .mm-traits .mm-sel--rate {
	stroke: var(--fm-faux);
	opacity: .32;
}

.flore-mots--meles .mm-c.mm-ancre {
	box-shadow: inset 0 0 0 2px var(--fm-accent);
	background: color-mix(in srgb, var(--fm-accent) 18%, transparent);
}

.flore-mots--meles .mm-grille:focus-visible .mm-c.mm-cur {
	box-shadow: inset 0 0 0 2px var(--fm-violet);
}

.flore-mots--meles .mm-grille:focus-visible .mm-c.mm-cur.mm-ancre {
	box-shadow: inset 0 0 0 2px var(--fm-accent), 0 0 0 2px var(--fm-violet);
}

.flore-mots--meles .mm-c.mm-indice {
	box-shadow: inset 0 0 0 2px var(--fm-faux);
	animation: mm-pouls 1.1s ease-in-out 3;
}

@keyframes mm-pouls {
	50% {
		transform: scale(1.18);
	}
}

@media (prefers-reduced-motion: reduce) {
	.flore-mots--meles .mm-c.mm-indice {
		animation: none;
	}
}

/* Tous les noms trouvés : les lettres de la phrase sortent du lot. */
.flore-mots--meles.flore-mots .mm-tous .mm-grille .mm-c:not(.mm-pris),
.flore-mots--meles .mm-grille--solution .mm-reste {
	background: var(--mm-reste);
	box-shadow: inset 0 0 0 1.5px var(--fm-accent);
	color: var(--fm-accent);
}

.flore-mots--meles .mm-grille--solution .mm-pris {
	opacity: .75;
}

.flore-mots--meles .mm-cote {
	flex: 0 1 14rem;
	min-width: 11rem;
}

/* Le socle écrit les marges des h3 du contenu en (0,3,1), après nos feuilles : il faut plus. */
.flore-mots.flore-mots--meles .mm-cote h3.mm-liste__titre,
.flore-mots.flore-mots--meles .mm-mystere h3.mm-mystere__titre {
	margin: .2rem 0 .5rem;
	padding: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.flore-mots--meles ul.mm-liste {
	margin: 0 0 .5rem;
	padding: 0;
	list-style: none;
	columns: 2 6.5rem;
	column-gap: 1.1rem;
}

.flore-mots--meles ul.mm-liste li {
	margin: 0 0 .22rem;
	padding: 0;
	break-inside: avoid;
	font-weight: 600;
	line-height: 1.35;
}

.flore-mots--meles ul.mm-liste li.mm-trouve,
.flore-mots--meles ul.mm-liste li.mm-donne {
	color: var(--contrast-3, #7a7084);
	font-weight: 400;
	text-decoration: line-through;
	text-decoration-color: var(--fm-accent);
	text-decoration-thickness: 2px;
}

.flore-mots--meles ul.mm-liste li.mm-donne {
	font-style: italic;
}

.flore-mots--meles ul.mm-liste li.mm-indice-li {
	color: var(--fm-faux);
}

html.flore-nuit .flore-mots--meles ul.mm-liste li.mm-trouve,
html.flore-nuit .flore-mots--meles ul.mm-liste li.mm-donne {
	color: #9aa1a8;
}

.flore-mots--meles .mm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- la phrase mystère -------------------------------------------------------------------- */

.flore-mots--meles .mm-mystere {
	margin: 1rem 0 .8rem;
	padding: .8rem 1rem .6rem;
	border: 1px solid var(--fm-pale);
	border-left: 3px solid var(--fm-violet);
	border-radius: 14px;
}

.flore-mots--meles p.mm-mystere__consigne {
	margin: 0 0 .6rem;
	font-size: .95rem;
}

.flore-mots--meles .mm-proposer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	margin: 0;
}

.flore-mots--meles .mm-proposer__etiquette {
	flex-basis: 100%;
	margin: 0;
	font-size: .88rem;
	color: var(--contrast-2, #5c5266);
}

.flore-mots--meles input.mm-saisie {
	flex: 1 1 13rem;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	padding: .45rem .7rem;
	border: 1px solid var(--fm-pale);
	border-radius: 8px;
	background: var(--fm-case);
	color: var(--fm-encre);
	font: inherit;
	font-size: 1rem;
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
	box-shadow: none;
}

.flore-mots--meles input.mm-saisie:focus {
	border-color: var(--fm-accent);
	outline: 2px solid color-mix(in srgb, var(--fm-accent) 35%, transparent);
	outline-offset: 0;
	background: var(--fm-case);
	color: var(--fm-encre);
}

.flore-mots--meles input.mm-saisie[readonly] {
	border-color: var(--fm-accent);
	font-weight: 700;
	text-transform: none;
}

.flore-mots--meles p.mm-verdict {
	min-height: 1.35em;
	margin: .45rem 0 0;
	font-size: .95rem;
}

/* Les boutons du contenu ont une couleur de texte imposée par le thème : on la reprend. */
.flore-mots--meles.flore-mots .fm-bouton {
	color: var(--fm-encre);
}

.flore-mots--meles.flore-mots .fm-bouton--principal,
.flore-mots--meles.flore-mots .fm-bouton--principal:hover,
.flore-mots--meles.flore-mots .fm-bouton--principal:focus-visible {
	color: #fff;
}

html.flore-nuit .flore-mots--meles.flore-mots .fm-bouton--principal,
html.flore-nuit .flore-mots--meles.flore-mots .fm-bouton--principal:hover {
	color: #1b1622;
}

.flore-mots--meles.flore-mots .fm-bouton--confirmer {
	color: var(--fm-faux);
}

.flore-mots--meles.flore-mots .fm-bouton:disabled {
	opacity: .45;
	cursor: default;
}

/* --- la fin ----------------------------------------------------------------------------- */

.flore-mots--meles .mm-fin > p,
.flore-mots--meles .mm-fin > ul {
	flex-basis: 100%;
	margin: 0;
	text-align: center;
}

.flore-mots--meles p.mm-phrase {
	margin: .5rem 0 .25rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fm-violet);
}

.flore-mots--meles .mm-fin p.mm-phrase {
	margin: 0;
}

.flore-mots--meles p.mm-explication {
	margin: .2rem 0 .5rem;
	font-size: 1rem;
	line-height: 1.5;
}

.flore-mots--meles .mm-fin p.mm-explication {
	max-width: 36rem;
	margin: 0 auto;
}

.flore-mots--meles .mm-fin p.mm-fin__fleurs,
.flore-mots--meles .mm-fin p.mm-fin__reste {
	font-size: .92rem;
	color: var(--contrast-2, #5c5266);
}

.flore-mots--meles .mm-fin ul.fm-theme--noms {
	justify-content: center;
	margin: 0 0 .3rem;
	padding: 0;
}

html.flore-nuit .flore-mots--meles .mm-fin p.mm-fin__fleurs,
html.flore-nuit .flore-mots--meles .mm-fin p.mm-fin__reste {
	color: #b9c0c7;
}

/* --- écrans étroits ------------------------------------------------------------------------ */

@media (max-width: 36rem) {
	.flore-mots--meles .mm-jeu {
		gap: .25rem;
	}

	.flore-mots--meles .mm-plateau {
		flex-basis: 100%;
	}

	.flore-mots--meles .mm-cote {
		flex: 1 1 100%;
	}

	.flore-mots--meles .mm-grille {
		padding: 5px;
	}

	.flore-mots--meles .mm-traits {
		top: 5px;
		left: 5px;
		width: calc(100% - 10px);
		height: calc(100% - 10px);
	}

	.flore-mots--meles .mm-c {
		font-size: calc((100cqi - 14px) / var(--fm-w) * .54);
	}

	/* En colonnes, un nom long déborde sur le suivant : ici les noms se suivent. */
	.flore-mots--meles ul.mm-liste {
		display: flex;
		flex-wrap: wrap;
		gap: .1rem 1.1rem;
		columns: auto;
	}
}

/* --- impression : la grille vierge, la liste et la consigne ---------------------------------- */

@media print {
	.flore-mots--meles .mm-traits,
	.flore-mots--meles .mm-proposer,
	.flore-mots--meles .mm-verdict,
	.flore-mots--meles .mm-fin {
		display: none !important;
	}

	.flore-mots--meles .mm-c,
	.flore-mots--meles.flore-mots .mm-tous .mm-grille .mm-c:not(.mm-pris) {
		background: #fff !important;
		box-shadow: none !important;
		color: #000 !important;
		animation: none !important;
	}

	.flore-mots--meles ul.mm-liste li {
		color: #000 !important;
		text-decoration: none !important;
		font-style: normal !important;
		font-weight: 600 !important;
	}

	.flore-mots--meles .mm-sr {
		display: none;
	}

	.flore-mots--meles .mm-plateau {
		max-width: 13cm;
	}

	.flore-mots--meles .mm-mystere {
		border: 0;
		padding: 0;
	}
}