/* Bordereaux du Lutin. Tout est prefixe .lf-bdx pour ne rien renverser dans
   le theme GeneratePress, et rien ne sort de ce fichier. */

/* Polices du modele « Livraison de lutin », livrees avec le plugin et
   allegees aux caracteres latins : Luckiest Guy (Apache 2.0), Patrick Hand
   (OFL). Licences dans fonts/. */
@font-face {
	font-family: "Luckiest Guy";
	src: url("../fonts/LuckiestGuy.woff2") format("woff2");
	font-display: block;
}

@font-face {
	font-family: "Patrick Hand";
	src: url("../fonts/PatrickHand.woff2") format("woff2");
	font-display: block;
}

.lf-bdx {
	display: grid;
	grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	margin: 28px 0;
	font-family: Quicksand, "Helvetica Neue", Arial, sans-serif;
	color: #23282d;
}

@media (max-width: 860px) {
	.lf-bdx { grid-template-columns: 1fr; }
	.lf-bdx__scene { order: -1; position: static !important; }
}

/* ------------------------------------------------------------- le panneau */
.lf-bdx__bloc {
	border: 1px solid #e3e7ea;
	border-radius: 10px;
	padding: 14px 16px 16px;
	margin: 0 0 14px;
	background: #fff;
	min-width: 0;
}

.lf-bdx__bloc legend {
	font-weight: 700;
	font-size: 15px;
	color: #CB151F;
	padding: 0 6px;
}

.lf-bdx__champ { display: block; margin: 0 0 10px; }

.lf-bdx__champ span {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: #5a6672;
	margin: 0 0 3px;
}

.lf-bdx__champ input,
.lf-bdx__champ select,
.lf-bdx__champ textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 9px;
	border: 1px solid #ccd3d9;
	border-radius: 7px;
	font: inherit;
	font-size: 14px;
	background: #fff;
}

.lf-bdx__champ textarea { resize: vertical; min-height: 64px; }

.lf-bdx__champ input:focus,
.lf-bdx__champ select:focus,
.lf-bdx__champ textarea:focus {
	outline: 2px solid #CB151F;
	outline-offset: 1px;
	border-color: #CB151F;
}

.lf-bdx__bascule {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 9px;
	font-size: 14px;
	cursor: pointer;
}

.lf-bdx__aide {
	font-size: 12px;
	line-height: 1.45;
	color: #7a828a;
	margin: 0 0 10px;
}

.lf-bdx__attente { font-size: 13px; color: #7a828a; margin: 6px 0; }

.lf-bdx__noscript {
	padding: 14px;
	border: 1px solid #f0c9cf;
	border-radius: 8px;
	background: #fff6f7;
	font-size: 14px;
}

/* ---------------------------------------------------------------- grilles */
.lf-bdx__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 6px;
	max-height: 232px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid #eef1f3;
	border-radius: 8px;
	background: #fafbfc;
}

.lf-bdx__vignette {
	all: unset;
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 3px;
	border: 2px solid transparent;
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
}

.lf-bdx__vignette:hover { border-color: #ddd; }
.lf-bdx__vignette.est-actif { border-color: #CB151F; background: #fff4f5; }
.lf-bdx__vignette:focus-visible { outline: 2px solid #CB151F; }

.lf-bdx__vignette img,
.lf-bdx__vignette svg {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.lf-bdx__vignette svg { width: 100%; }

.lf-bdx__vignette span { font-size: 10px; color: #7a828a; text-align: center; }

.lf-bdx__vignette b {
	position: absolute;
	top: -5px; right: -5px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #CB151F;
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

/* ---------------------------------------------------------------- la scene */
.lf-bdx__scene { position: sticky; top: 16px; }

.lf-bdx__zoom {
	background: #f4f1ea;
	border-radius: 10px;
	padding: 18px;
	box-shadow: inset 0 0 0 1px #e8e1d2;
}

.lf-bdx__zoom svg {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .14);
}

.lf-bdx__zoom.est-portrait svg { max-width: 360px; }

.lf-bdx__imprimer {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 14px 0 8px;
	padding: 13px 16px;
	border-radius: 999px;
	background: #CB151F;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	cursor: pointer;
}

.lf-bdx__imprimer:hover { background: #9E1018; }
.lf-bdx__imprimer:focus-visible { outline: 3px solid #2A672F; }

.lf-bdx__apercu-feuille {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
}

.lf-bdx__feuille {
	flex: 0 0 120px;
	background: #fff;
	box-shadow: 0 1px 8px rgba(0, 0, 0, .15);
}

.lf-bdx__feuille svg { display: block; width: 100%; height: auto; }

.lf-bdx__legende { margin: 0; font-size: 13px; color: #5a6672; }

/* ------------------------------------------------------------ l'impression */
/* Masquer par VISIBILITY et pas par display : un theme WordPress pose des
   marges et des positions partout, et display:none sur les ancetres casse la
   mise en page. Les motifs SVG de l'apercu restent ainsi definis. */
@media print {
	body * { visibility: hidden !important; }

	.lf-bdx__feuille,
	.lf-bdx__feuille * { visibility: visible !important; }

	.lf-bdx__feuille {
		position: absolute !important;
		left: 0; top: 0;
		width: 210mm !important;
		margin: 0; padding: 0;
		box-shadow: none;
	}

	.lf-bdx__feuille svg { width: 210mm !important; height: 297mm !important; }

	.lf-bdx__panneau { display: none !important; }

	@page { size: A4 portrait; margin: 0; }
}