/*
 * Club Canin — les petits messages des brouillons (inc/brouillons.php), en
 * tête des formulaires de contact et d'inscription.
 *
 * Discrets : une ligne de texte courant sur un fond à peine teinté, qui ne
 * bouscule rien. La note « vos réponses ne sont pas gardées » se ferme d'une
 * croix ; « vos réponses vous attendaient » propose de tout effacer.
 */

.kahel-brouillon:not(:has(> :not([hidden]))) {
	display: none;
}

.kahel-brouillon {
	margin: 0 0 24px;
}

.kahel-brouillon-message {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px 12px 12px;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.55;
	animation: kahel-brouillon-entree 520ms var(--wp--custom--motion--ease) both;
}

.kahel-brouillon-message[hidden] {
	display: none;
}

.kahel-brouillon-message.is-note {
	background: rgba(255, 208, 166, 0.28);
	box-shadow: inset 0 0 0 1px rgba(244, 122, 31, 0.18);
}

.kahel-brouillon-message.is-retrouve {
	align-items: center;
	background: rgba(85, 122, 70, 0.1);
	box-shadow: inset 0 0 0 1px rgba(85, 122, 70, 0.22);
	color: var(--wp--preset--color--ink);
}

.kahel-brouillon-picto {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--ink);
	rotate: -14deg;
}

.is-retrouve .kahel-brouillon-picto {
	background: var(--wp--preset--color--leaf);
	color: var(--wp--preset--color--cream);
}

.kahel-brouillon-picto .kahel-picto,
.kahel-brouillon-picto svg {
	width: 15px;
	height: 15px;
}

.kahel-brouillon-corps {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	min-width: 0;
}

.kahel-brouillon .kahel-brouillon-corps .kahel-brouillon-texte {
	flex: 1 1 260px;
}

.kahel-brouillon .kahel-brouillon-texte {
	flex: 1 1 auto;
	margin: 3px 0 0;
	font-size: inherit;
	line-height: inherit;
}

.kahel-brouillon .is-retrouve .kahel-brouillon-texte {
	margin-top: 0;
	font-weight: 600;
}

.kahel-brouillon-fermer,
.kahel-brouillon-effacer,
.kahel-brouillon-accepter {
	flex: 0 0 auto;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.kahel-brouillon-fermer {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--muted);
	font-size: 18px;
	line-height: 1;
	transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease), color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}

.kahel-brouillon-fermer:is(:hover, :focus-visible) {
	background: rgba(36, 23, 15, 0.08);
	color: var(--wp--preset--color--ink);
	outline: none;
}

.kahel-brouillon-effacer {
	padding: 6px 12px;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--weight--strong);
	white-space: nowrap;
	transition: box-shadow var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease), color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}

/* « Accepter les cookies » : le même orange que le bouton du bandeau. */
.kahel-brouillon-accepter {
	padding: 7px 14px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--weight--strong);
	white-space: nowrap;
	transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease), color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}

.kahel-brouillon-accepter:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--orange-deep);
	color: var(--wp--preset--color--cream);
	outline: none;
	transform: translateY(-1px);
}

.kahel-brouillon-accepter:focus-visible {
	box-shadow: var(--wp--preset--shadow--focus);
}

.kahel-brouillon-effacer:is(:hover, :focus-visible) {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--orange);
	color: var(--wp--preset--color--orange-deep);
	outline: none;
}

@keyframes kahel-brouillon-entree {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kahel-brouillon-message {
		animation: none;
	}
}

@media (max-width: 480px) {
	.kahel-brouillon-message.is-retrouve {
		flex-wrap: wrap;
	}

	.kahel-brouillon-message.is-retrouve .kahel-brouillon-texte {
		flex-basis: calc(100% - 40px);
	}

	.kahel-brouillon-effacer {
		margin-left: 38px;
	}
}