/**
 * Créateur — direction « Jetons », sur fond d'encre.
 *
 * Une seule logique de mise en page. Chaque bande a une hauteur connue, et le
 * côté du chandail est ce qui reste de l'écran : de l'arithmétique, pas des
 * `vh` empilés — une grille en `vh` grandit aussi vite que l'écran et le total
 * ne converge jamais.
 *
 * Le cadre du chandail doit épouser la photo au pixel : la zone d'impression
 * est positionnée en pourcentage de ce cadre, donc un `object-fit: contain`
 * dans une boîte plus grande décalerait le texte imprimé.
 */

.mg-jetons {
	/* Budget vertical, mesuré sur la page réelle. Changer une bande ? Changer
	   son chiffre ici, sinon le chandail ment sur la place qui lui reste. */
	--mg-hero: 6.5rem;
	--mg-polices: 12.5rem;
	--mg-emoji: 8rem;
	--mg-actions: 6rem;
	--mg-air: 8rem;

	/* Surfaces de l'éditeur sur l'encre du hero. */
	--mg-fond: #17171a;
	--mg-fond-creux: #0f0f11;
	--mg-trait: rgba(247, 246, 241, 0.16);
	--mg-trait-fort: rgba(247, 246, 241, 0.34);
	--mg-texte: #f7f6f1;
	--mg-terne: rgba(247, 246, 241, 0.55);
}

/* La page entière porte l'encre : l'éditeur est la page, pas un encart dedans. */
body.mg-prelancement { background: var(--ink); color: var(--paper); }

body.mg-prelancement .mg-pre__sombre { background: transparent; }

/* -------------------------------------------------------------------------
 * Les <select> restent la source de vérité : hors de l'écran, dans l'arbre.
 * ---------------------------------------------------------------------- */

.mg-jetons .creator__select.mg-cache {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mg-jetons .creator__fontpicker[hidden],
.mg-jetons .creator__field[hidden],
.mg-jetons .creator__emojibtn[hidden],
.mg-bande__colonne[hidden],
.mg-jetons .creator__fontlist[hidden],
.mg-jetons__groupe--polices[hidden] {
	/* `display: grid` bat l'attribut `hidden`, qui n'agit que par un
	   `display: none` dans la feuille du navigateur. */
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Jetons
 * ---------------------------------------------------------------------- */

.mg-jetons .creator__field-label,
.mg-jetons .creator__field > label,
.mg-jetons .creator__colors legend {
	color: var(--mg-terne);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mg-jetons__groupe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.35rem;
}

.mg-jeton {
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.4rem 0.8rem;
	min-height: 38px;
	border: 1px solid var(--mg-trait);
	border-radius: 999px;
	background: transparent;
	color: var(--mg-texte);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.mg-jeton:hover { border-color: var(--mg-trait-fort); }
.mg-jeton--vetement {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding-left: 0.6rem;
}

.mg-jeton__icone {
	width: 1.35em;
	height: 1.35em;
	flex: none;
}

.mg-jeton:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

.mg-jeton[aria-checked="true"] {
	background: var(--acid);
	border-color: var(--acid);
	color: var(--ink);
}

/* -------------------------------------------------------------------------
 * Bandes : police au-dessus du chandail, emoji en dessous
 * ---------------------------------------------------------------------- */

/* Le thème centre ses éléments de grille (`justify-items: center`), donc une
   bande se dimensionnait à son contenu et restait à 241 px dans une colonne de
   350 : les grilles tombaient à une seule colonne. Elles doivent s'étirer. */
.mg-jetons .creator { justify-items: stretch; }

.mg-jetons .mg-bande {
	grid-column: 1 / -1;
	width: 100%;
	justify-self: stretch;
}

.mg-bande__boite { width: 100%; }

.mg-scene {
	max-width: 62rem;
	margin: 0 auto;
	width: 100%;
	padding: 0.9rem;
	border: 1px solid var(--mg-trait);
	border-radius: var(--radius);
	background: var(--mg-fond);
}



.mg-bande__boite {
	max-width: 62rem;
	margin: 0 auto;
	padding: 0.55rem 0.8rem 0.7rem;
	border: 1px solid var(--mg-trait);
	border-radius: var(--radius);
	background: var(--mg-fond);
	display: grid;
	gap: 0.45rem;
}

.mg-bande__titre {
	margin: 0;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mg-terne);
	text-align: center;
}

.mg-onglets { display: flex; gap: 0.35rem; justify-content: center; }

/* Onglets et taille sur une seule ligne. */
.mg-bande__tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 1.1rem;
}

.mg-ligne__taille {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mg-ligne__taille[hidden] { display: none !important; }

.mg-ligne__taille .mg-jetons__groupe { margin-top: 0; }

.mg-ligne__etiq {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--mg-terne);
	white-space: nowrap;
}

.mg-bande__etiq {
	display: block;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--mg-terne);
	text-align: center;
}

.mg-onglet {
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	padding: 0.28rem 0.95rem;
	min-height: 32px;
	border: 1px solid var(--mg-trait);
	border-radius: 999px;
	background: transparent;
	color: var(--mg-texte);
	cursor: pointer;
}

.mg-onglet[aria-selected="true"] {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

.mg-onglet:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

/* Hauteur FIXE : c'est ce qui rend le budget vertical calculable. */
.mg-jetons .mg-bande--polices .creator__fontlist,
.mg-jetons .mg-bande--polices .mg-jetons__groupe--polices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
	gap: 0.3rem;
	height: 6.4rem;
	max-height: 6.4rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 0.3rem;
	border: 1px solid var(--mg-trait);
	border-radius: var(--radius);
	background: var(--mg-fond-creux);
	position: static;
	width: auto;
	box-shadow: none;
}

.mg-jetons .mg-bande--polices .creator__fontlist li { list-style: none; margin: 0; }

/* Scopé aux grilles de polices : sans ça, les jetons de taille posés dans le
   même bandeau héritaient du `width: 100%` et s'empilaient un par ligne. */
.mg-jetons .creator__fontoption,
.mg-jetons .mg-bande--polices .mg-jetons__groupe--polices .mg-jeton {
	width: 100%;
	min-height: 36px;
	padding: 0.35rem 0.3rem;
	border-radius: var(--radius);
	border: 1px solid transparent;
	background: transparent;
	color: var(--mg-texte);
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.mg-jetons .creator__fontoption:hover,
.mg-jetons .mg-bande--polices .mg-jetons__groupe--polices .mg-jeton:hover { border-color: var(--mg-trait-fort); }

.mg-jetons .creator__fontoption.is-active,
.mg-jetons .mg-bande--polices .mg-jetons__groupe--polices .mg-jeton[aria-checked="true"] {
	background: var(--acid);
	border-color: var(--acid);
	color: var(--ink);
}

/* Les 120 emoji que la police d'impression sait rendre. */
.mg-emoji {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
	gap: 0.3rem;
	height: 5.8rem;
	max-height: 5.8rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 0.3rem;
	border: 1px solid var(--mg-trait);
	border-radius: var(--radius);
	background: var(--mg-fond-creux);
}

.mg-emoji__btn {
	font-size: 1.25rem;
	line-height: 1;
	padding: 0.3rem;
	min-height: 36px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	cursor: pointer;
}

.mg-emoji__btn:hover { border-color: var(--mg-trait-fort); }
.mg-emoji__btn:focus-visible { outline: 2px solid var(--acid); outline-offset: 1px; }

/* -------------------------------------------------------------------------
 * Couleurs
 * ---------------------------------------------------------------------- */

/* Un cadre dans un cadre ne dit rien de plus : les palettes vivent
   maintenant dans le tableau, elles n'ont plus besoin du leur. */
.mg-jetons .creator__colors {
	border: 0;
	padding: 0;
	background: transparent;
}

.mg-jetons .creator__colors + .creator__colors { margin-top: 0.9rem; }

/* Sans le cadre du fieldset, la légende n'a plus de bordure où se poser : elle
   retombait sur la première rangée de pastilles. */
.mg-jetons .creator__colors legend {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 0.4rem;
}

/* Le nom du coloris vit dans la légende : sans retour, on lisait
   « COULEURBlack ». */
.mg-jetons .creator__colors legend b {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mg-texte);
}

.mg-jetons .creator__swatches { gap: 0.4rem; }

/* Une seule taille de pastille : deux tailles dans le même panneau donnaient
   deux systèmes pour un seul geste. */
.mg-jetons .creator__swatches {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.3rem;
}

.mg-jetons .creator__swatch {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	min-width: 0;
	border-radius: var(--radius);
	border: 1px solid var(--mg-trait-fort);
}

.mg-jetons .creator__swatch.is-active { box-shadow: 0 0 0 2px var(--mg-fond), 0 0 0 4px var(--acid); }

/* Vingt encres sur quatre colonnes font cinq rangées, et cette colonne
   commandait la hauteur de toute la rangée du chandail — plus haute que le
   chandail lui-même. Sept colonnes, trois rangées, et c'est le vêtement qui
   redevient l'élément le plus grand de l'écran. */
.mg-jetons .creator__swatches--ink { grid-template-columns: repeat(5, 1fr); }



.mg-jetons .creator__colorname,
.mg-jetons .creator__inkname { color: var(--mg-texte); }

.mg-jetons .creator__hint { color: var(--mg-terne); }

/* -------------------------------------------------------------------------
 * Disposition
 * ---------------------------------------------------------------------- */

@media (min-width: 901px) {
	.mg-jetons .creator {
		gap: 1rem;
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"polices"
			"scene"
			"emoji"
			"actions";
	}

	.mg-jetons .mg-bande--polices { grid-area: polices; }
	.mg-jetons .mg-scene { grid-area: scene; }
	.mg-jetons .mg-bande--emoji { grid-area: emoji; }

	/* Le tableau reprend la largeur des bandes : trois panneaux alignés sur la
	   même colonne se lisent comme un seul objet. */
	.mg-scene {
		display: grid;
		grid-template-columns: 13rem minmax(0, 1fr) 13rem;
		gap: 1rem;
		align-items: center;
	}

	/* Les trois blocs portent encore les zones nommées du thème (garments,
	   stage, colors). Ces noms n'existent pas dans le tableau : le navigateur
	   les place alors n'importe où et les palettes atterrissaient par-dessus le
	   chandail. On les repose à la main. */
	.mg-scene > * { grid-area: auto; }

	/* Les deux colonnes commencent à la même hauteur : décalées, elles ont
	   l'air d'un accident plutôt que d'une intention. */
	.mg-scene .creator__side--garments { grid-column: 1; align-self: start; }
	.mg-scene .creator__stage { grid-column: 2; }
	.mg-scene .creator__side--colors { grid-column: 3; align-self: start; }

	/* Le côté du carré = ce qui reste de l'écran une fois le reste retiré. */
	.mg-jetons .creator__shirt {
		width: min(
			100%,
			calc(100dvh - var(--mg-hero) - var(--mg-polices) - var(--mg-emoji) - var(--mg-actions) - var(--mg-air))
		);
		min-width: 18rem;
		margin-inline: auto;
	}

	.mg-jetons .creator__stage { min-width: 0; }
}

@media (max-width: 900px) {
	.mg-jetons .creator {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"polices"
			"scene"
			"emoji"
			"actions";
		gap: 0.9rem;
	}

	.mg-jetons .creator > * { min-width: 0; }
	.mg-jetons .mg-bande--polices { grid-area: polices; }
	.mg-jetons .mg-scene { grid-area: scene; }
	.mg-jetons .mg-bande--emoji { grid-area: emoji; }

	/* Le premier panneau ne garde que le chandail et le vêtement : le reste
	   part dans les pages. */
	.mg-scene { display: flex; flex-direction: column; gap: 0.8rem; }
	.mg-scene > * { grid-area: auto; }
	.mg-scene .creator__stage { order: -1; }

	/* Trois pages côte à côte, une par écran, calées au doigt. */
	.mg-pages {
		grid-area: emoji;
		/* `overflow: auto` fait défiler mais ne retire PAS les pages hors écran
		   du calcul de largeur du document : il montait à 715 px sur un écran
		   de 400, et tout ce qui se centre en pourcentage — le modal en tête —
		   se centrait sur cette largeur fantôme. `contain: paint` le coupe
		   vraiment. */
		contain: paint;
		display: flex;
		gap: 0.9rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		margin: 0 -1.25rem;
		padding: 0 1.25rem;
	}

	.mg-pages::-webkit-scrollbar { display: none; }

	/* Les trois pages font la même hauteur — celle de la plus grande. Sans ça,
	   le bouton et les pastilles sautaient d'une page à l'autre, et un bouton
	   qui bouge sous le pouce est un bouton qu'on rate. */
	.mg-page {
		flex: 0 0 100%;
		scroll-snap-align: center;
		min-width: 0;
		display: flex;
	}

	.mg-page > * {
		margin: 0;
		flex: 1;
		min-width: 0;
	}

	/* La place gagnée va aux grilles, mais avec un plafond : sans lui, elles
	   s'étirent pour avaler leurs 40 polices et la page dépasse l'écran. */
	.mg-page .mg-bande__boite { display: flex; flex-direction: column; }

	.mg-page .mg-emoji,
	.mg-page .mg-bande--polices .creator__fontlist,
	.mg-page .mg-bande--polices .mg-jetons__groupe--polices {
		flex: 1 1 auto;
		height: auto;
		min-height: 5rem;
		max-height: 17rem;
	}

	/* La colonne des couleurs devient une page : elle reprend l'habit des
	   bandes pour que les trois pages se ressemblent. */
	.mg-page .creator__side--colors {
		padding: 0.55rem 0.8rem 0.7rem;
		border: 1px solid var(--mg-trait);
		border-radius: var(--radius);
		background: var(--mg-fond);
	}

	.mg-page .creator__swatches,
	.mg-page .creator__swatches--ink {
		grid-template-columns: repeat(7, 1fr);
		overflow: visible;
	}

	.mg-points {
		grid-area: actions;
		display: flex;
		gap: 0.35rem;
		justify-content: center;
		margin-top: -0.2rem;
	}

	.mg-point {
		font: inherit;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding: 0.3rem 0.7rem;
		border: 1px solid var(--mg-trait);
		border-radius: 999px;
		background: transparent;
		color: var(--mg-terne);
		cursor: pointer;
	}

	.mg-point[aria-selected="true"] {
		background: var(--paper);
		border-color: var(--paper);
		color: var(--ink);
	}

	.mg-jetons .creator {
		grid-template-areas:
			"scene"
			"emoji"
			"actions"
			"boutons";
	}

	.mg-jetons .creator__actions { grid-area: boutons; }

	.mg-jetons .mg-bande--polices .creator__fontlist,
	.mg-jetons .mg-bande--polices .mg-jetons__groupe--polices {
		grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	}

	/* Pas de largeur fixe : elle se battait avec les colonnes en fractions et
	   poussait la dernière hors du cadre — que le thème coupe avec un
	   `overflow: auto`, d'où la barre de défilement et la colonne tronquée. */
	.mg-jetons .creator__swatch {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		min-width: 0;
	}

	/* Deux rangées, pas quatre. Le titre de la bande disparaît : la pastille du
	   carrousel dit déjà « Police », et le répéter coûtait une rangée entière
	   sur l'écran le plus étroit. */
	.mg-page .mg-bande__titre { display: none; }

	.mg-bande__tete {
		flex-direction: column;
		align-items: center;
		gap: 0.4rem;
	}

	.mg-onglets { flex-wrap: nowrap; }

	.mg-ligne__taille { justify-content: center; flex-wrap: nowrap; }

	.mg-ligne__taille .mg-jetons__groupe { flex-wrap: nowrap; }

	/* Les quatre tailles doivent tenir sur une ligne à 360 px : elles perdent
	   un peu de rembourrage, pas leur zone de touche. */
	.mg-jetons .mg-ligne__taille .mg-jeton {
		font-size: 0.8rem;
		padding: 0.35rem 0.55rem;
		min-height: 36px;
	}
}

.mg-jetons .creator__actions { gap: 0.25rem; padding-block: 0.1rem; }
.mg-jetons .creator__hint { margin: 0.3rem 0 0; font-size: 0.82rem; }