/* Générateur de QR codes : même vert que le reste du site */
#features.qr-section { padding-top: 1em; }
.qr-section [hidden] { display: none !important; }

.qr-onglets { display: flex; justify-content: center; gap: .6em; margin: 0 0 1.2em 0; flex-wrap: wrap; }
.qr-onglet {
	font: inherit; padding: .55em 1.6em; border-radius: 2em; cursor: pointer; -webkit-appearance: none; appearance: none;
	border: 2px solid #e5e5e5; color: #878787 !important; background: #fff !important; text-shadow: none; width: auto !important;
	transition: background-color .25s, border-color .25s, color .25s;
}
.qr-onglet:hover { border-color: #5cc79a; color: #16855a !important; }
.qr-onglet.actif, .qr-onglet.actif:hover { background: #16855a !important; border-color: #16855a; color: #fff !important; }

.qr-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2em; align-items: start; max-width: 70em; margin: 0 auto; }
.qr-carte { background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em; padding: 1.4em; text-align: left; }
.qr-apercu { text-align: center; }
.qr-multi { max-width: 70em; margin: 0 auto; }

.qr-etiquette { display: block; margin: .9em 0 .3em 0; font-size: .85em; color: #878787; }
.qr-saisie .qr-etiquette:first-child { margin-top: 0; }
.qr-carte input[type="text"], .qr-carte select, .qr-carte textarea {
	width: 100%; font: inherit; padding: .5em .7em; border: 2px solid #e5e5e5; border-radius: .6em; background: #fff; color: #555; box-sizing: border-box;
}
.qr-carte textarea { resize: vertical; min-height: 5em; }
.qr-carte input:focus, .qr-carte select:focus, .qr-carte textarea:focus { outline: none; border-color: #16855a; }
.qr-info { min-height: 1.4em; margin: .4em 0 0 0; font-size: .85em; color: #878787; }
.qr-reglages { display: flex; gap: 1.5em; flex-wrap: wrap; align-items: flex-start; }
.qr-reglages > div:last-child { flex: 1 1 12em; }

.qr-couleurs { display: flex; gap: .5em; padding-top: .2em; }
.qr-couleur {
	width: 2.2em !important; height: 2.2em; padding: 0 !important; border-radius: 50%; cursor: pointer; background: var(--c) !important;
	border: 3px solid #fff !important; box-shadow: 0 0 0 2px #e5e5e5; -webkit-appearance: none; appearance: none;
}
.qr-couleur:hover { box-shadow: 0 0 0 2px #5cc79a; }
.qr-couleur.actif { box-shadow: 0 0 0 3px #16855a; }

.qr-cadre { display: inline-block; background: #fff; border: 2px solid #e5e5e5; border-radius: .8em; padding: .6em; line-height: 0; }
.qr-cadre canvas { width: min(320px, 70vw); height: auto; max-width: 100%; }
.qr-cadre.plein { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0; }
.qr-cadre.plein canvas { width: auto; height: auto; max-width: 90vw; max-height: 80vh; }
.qr-cadre.plein::after { content: attr(data-leg); display: block; margin-top: .6em; font: 700 2.2rem/1.2 'Fredoka', 'Nunito', sans-serif; color: #222; }
.qr-legende { margin: .6em 0 0 0; font-weight: 700; color: #222; min-height: 1.4em; word-break: break-word; }
.qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin-top: 1em; }
.qr-actions .button { margin: 0; width: auto !important; }
.qr-actions .button[disabled] { opacity: .45; cursor: default; }
.qr-ok { min-height: 1.4em; margin: .8em 0 0 0; color: #16855a; font-weight: 700; font-size: .9em; }
.qr-rgpd { margin: 1.4em 0 0 0; font-size: .8em; color: #878787; text-align: center; }

.qr-planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: 1em; margin-top: 1em; }
.qr-planche figure { margin: 0; text-align: center; border: 2px solid #e5e5e5; border-radius: .8em; padding: .6em; }
.qr-planche canvas { width: 100%; height: auto; display: block; }
.qr-planche figcaption { margin-top: .4em; font-weight: 700; font-size: .9em; color: #222; word-break: break-word; }

@media screen and (max-width: 736px) {
	.qr-grille { grid-template-columns: minmax(0, 1fr); }
	.qr-actions .button { padding: 0 1.4em; }
}


/* Impression */
@media print {
	#header, #banner, #footer, #nav, .qr-onglets, .qr-rgpd, .qr-actions, .qr-info, .qr-ok { display: none !important; }
	#features.qr-section { padding: 0 !important; }
	body.qr-impression-multi .qr-multi > *:not(.qr-planche) { display: none !important; }
	body.qr-impression-multi .qr-multi { border: 0; padding: 0; }
	body:not(.qr-mode-multi) .qr-saisie { display: none !important; }
	body:not(.qr-mode-multi) .qr-grille { display: block; }
	body:not(.qr-mode-multi) .qr-apercu { border: 0; text-align: center; }
	body:not(.qr-mode-multi) .qr-cadre canvas { width: 14cm; }
	.qr-planche { grid-template-columns: repeat(3, 1fr); }
	.qr-planche figure { break-inside: avoid; }
}