/* Générateur de coloriage de prénom.
   Tout est préfixé .icp pour ne rien toucher au design du site. */

.icp { margin: 28px 0; }
.icp__titre { margin: 0 0 18px; }

.icp__grille { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.icp__reglages { flex: 1 1 300px; min-width: 280px; }
.icp__apercu { flex: 0 1 340px; min-width: 260px; }

.icp__champ { display: block; margin: 0 0 18px; }
.icp__champ > span {
	display: block; margin-bottom: 7px; font-weight: 700; font-size: .95rem;
}

.icp__prenom, .icp__phrase {
	width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 1.05rem;
	border: 2px solid #d5dbe4; border-radius: 10px; background: #fff;
}
.icp__prenom:focus, .icp__phrase:focus { outline: 2px solid #2A7BB5; border-color: #2A7BB5; }

.icp__polices, .icp__meps { display: flex; flex-wrap: wrap; gap: 8px; }
.icp__police, .icp__mep, .icp__fond, .icp__bouton {
	cursor: pointer; font: inherit; border-radius: 10px; border: 2px solid #d5dbe4; background: #fff;
}
.icp__police, .icp__mep { padding: 9px 14px; }
.icp__police { font-size: 1.15rem; line-height: 1.2; }
.icp__police.est-actif, .icp__mep.est-actif, .icp__fond.est-actif {
	border-color: #2A7BB5; box-shadow: 0 0 0 3px rgba(42,123,181,.18);
}

.icp__fonds {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 8px; max-height: 260px; overflow-y: auto; padding: 3px;
}
.icp__fond { padding: 3px; line-height: 0; }
.icp__fond img { width: 100%; height: auto; display: block; border-radius: 6px; }

/* Aperçu : proportions A4 */
.icp__page {
	position: relative; aspect-ratio: 210 / 297; background: #fff;
	border: 2px solid #16346B; border-radius: 12px; padding: 12px;
	display: flex; flex-direction: column; gap: 8px; overflow: hidden;
}
.icp__page.est-inverse { flex-direction: column-reverse; }

.icp__cartouche {
	border: 2px solid #16346B; border-radius: 9px; padding: 8px 10px;
	text-align: center; flex: 0 0 auto; background: #fff;
}
.icp__cartouche.est-seul { margin: auto 0; padding: 26px 10px; }

.icp__vphrase { font-size: 1rem; line-height: 1.25; color: #16346B; }
.icp__vprenom {
	font-size: 2rem; line-height: 1.2; color: #16346B;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icp__cartouche.est-seul .icp__vprenom { font-size: 3.1rem; }
.icp__vprenom.est-vide { opacity: .35; }

.icp__vdessin { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
.icp__vdessin img { max-width: 100%; max-height: 100%; object-fit: contain; }

.icp__note { font-size: .82rem; opacity: .7; margin: 9px 0 12px; }
.icp__bouton {
	width: 100%; padding: 14px 18px; font-size: 1.05rem; font-weight: 700;
	color: #fff; background: #E8813A; border-color: #E8813A;
}
.icp__bouton:hover { filter: brightness(1.06); }
.icp__bouton:disabled { opacity: .6; cursor: default; }
.icp__erreur { color: #b3261e; font-size: .9rem; margin: 9px 0 0; min-height: 1em; }

@media (max-width: 600px) {
	.icp__grille { gap: 20px; }
	.icp__apercu { flex: 1 1 100%; }
}