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

.lf-env {
	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-env { grid-template-columns: 1fr; }
}

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

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

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

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

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

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

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

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

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

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

.lf-env__err {
	padding: 14px;
	border: 1px solid #f0c9cf;
	border-radius: 8px;
	background: #fff6f7;
	color: #8d2130;
}

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

.lf-env__vignette {
	all: unset;
	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-env__vignette:hover { border-color: #ddd; }
.lf-env__vignette.est-actif { border-color: #C41E3A; background: #fff4f5; }
.lf-env__vignette:focus-visible { outline: 2px solid #C41E3A; }

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

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

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

.lf-env__feuille {
	background: #fff;
	border: 1px solid #e3e7ea;
	border-radius: 8px;
	padding: 14px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
}

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

.lf-env__imprimer {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 6px 0 10px;
	padding: 12px 16px;
	border-radius: 9px;
	background: #C41E3A;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	cursor: pointer;
}

.lf-env__imprimer:hover { background: #a81830; }
.lf-env__imprimer:focus-visible { outline: 3px solid #165B33; }

/* ------------------------------------------------------------ l'impression */
/*
 * On masque 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 de la feuille. La visibilite, elle, se reprend proprement sur
 * le seul sous-arbre qu'on veut voir.
 */
@media print {
	body * { visibility: hidden !important; }

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

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

	.lf-env__feuille svg { width: 210mm; height: 297mm; }

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

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