/* ── Flag Editor ── */

.flag-editor
{
	user-select:none;
	display:grid;
	grid-template-columns:minmax(190px,300px) minmax(280px,1fr);
	gap:1em;
	align-items:start;
	padding:1em;
	border:1px solid var(--line);
	border-radius:.3rem;
	background:linear-gradient(180deg, var(--theme), rgba(0,25,50,.35));
	box-sizing:border-box;
}

/* ── Stage (canvas) ── */

.flag-stage
{
	position:relative;
	grid-column:1; grid-row:1 / span 8;
	width:100%; aspect-ratio:1; max-width:300px;
	background:#000;
	border:1px solid var(--inline);
	border-radius:.3rem;
	box-shadow:0 0 0 1px rgba(0,0,0,.45), inset 0 0 2em rgba(0,0,0,.5);
	overflow:hidden;
	box-sizing:border-box;
}
.flag-stage canvas { position:absolute; inset:0; width:100%; height:100%; }
.flag-stage .flag-cursor
{
	position:absolute; width:19px; height:19px;
	border:2px solid var(--here); border-radius:50%;
	box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 .7em var(--here);
	transform:translate(-50%,-50%);
	pointer-events:none; opacity:.5; display:none;
}

/* ── Lignes de paramètres ── */

.flag-row
{
	grid-column:2;
	min-height:54px; margin:0; padding:.55em .65em;
	border-radius:.25rem;
	background:rgba(0,40,80,.45);
	border:1px solid var(--line);
	display:grid;
	grid-template-columns: 6.8em 5.8em 5.8em 4.8em 4.8em 6.2em;
	align-items:center; column-gap:.45em;
	box-sizing:border-box;
	transition:background .12s, border-color .12s;
}
.flag-row:hover     { background:var(--theme); border-color:var(--inline); }
.flag-row.alt       { background:rgba(0,80,160,.45); }
.flag-row.alt:hover { background:var(--high); }

.flag-group       { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; }
.flag-group-label { color:var(--here); font-size:82%; line-height:1.1em; font-weight:400; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.35em; opacity:.95; white-space:nowrap; }
.flag-group-line  { display:flex; align-items:center; justify-content:center; gap:.25em; min-height:2.1em; }

/* ── Boutons & chips (base commune) ── */

.flag-btn,
.flag-chip,
.flag-palette-choice
{
	border:1px solid var(--line);
	border-radius:.2rem;
	background:rgba(0,0,0,.25);
	color:white;
	cursor:pointer;
	box-sizing:border-box;
	font-family:inherit;
	transition:background .1s, border-color .1s, opacity .1s;
}
.flag-btn:hover,  .flag-chip:hover,  .flag-palette-choice:hover  { background:var(--high); border-color:var(--here); }
.flag-btn:active, .flag-chip:active, .flag-palette-choice:active { transform:translate(1px,1px); }

.flag-btn { min-width:2.25em; height:2.25em; padding:0 .6em; font-size:105%; line-height:2.1em; text-align:center; }

/* Chips couleur (partagé) */
.flag-chip,
.flag-palette-choice
{
	width:2.25em; height:2.25em; padding:.25em;
	display:flex; align-items:center; justify-content:center;
	appearance:none; -webkit-appearance:none;
	font:inherit; line-height:1;
}
.flag-chip span,
.flag-palette-choice span
{
	display:block; width:100%; height:100%;
	border-radius:.15rem;
	border:1px solid rgba(255,255,255,.2);
	box-shadow:inset 0 0 .6em rgba(0,0,0,.35);
	box-sizing:border-box;
}

/* Bouton clear (X) */
.flag-btn-clear
{
	min-width:1.4em; height:1.4em; padding:0;
	border:none; border-radius:.2rem; background:transparent;
	color:var(--bad); font:700 80%/1.4em inherit; cursor:pointer;
}
.flag-btn-clear:hover { background:var(--red); color:white; }

/* ── Palette ── */

.flag-palette
{
	grid-column:2;
	min-height:48px; margin:0; padding:.55em .65em;
	border-radius:.25rem;
	background:rgba(0,25,50,.55);
	border:1px solid var(--inline);
	display:none; align-items:center; gap:.45em;
	box-sizing:border-box;
}
.flag-palette.visible { display:flex; }
.flag-palette-label   { width:4.5em; text-align:left; font-size:70%; font-weight:300; text-transform:uppercase; color:var(--here); letter-spacing:.04em; }

/* ── Actions ── */

.flag-actions
{
	grid-column:1 / -1;
	display:flex; align-items:center; justify-content:flex-end; gap:.5em;
	margin-top:.25em; padding-top:.75em;
	border-top:1px solid var(--line);
}
.flag-actions a       { display:inline-block; padding:.5em .75em; margin:0; background-color:var(--button); color:var(--black); border-radius:.2rem; font-size:85%; line-height:1.4em; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; }
.flag-actions a:hover { opacity:.85; }
.flag-actions a.flag-reset      { background-color:var(--theme); color:var(--bad); border:1px solid var(--line); }
.flag-actions a.flag-ok         { background-color:var(--high); color:var(--good); border:1px solid var(--inline); }
.flag-actions a.flag-ok.loading { color:white; }

/* ── Alignement premier groupe (grid interne) ── */

.flag-row .flag-group:first-child .flag-group-line
{
	display:grid;
	grid-template-columns:2.25em 2.25em 1.4em;
	gap:.25em; align-items:center; justify-content:center;
}
.flag-row .flag-group:first-child .flag-btn:nth-child(1) { grid-column:1; }
.flag-row .flag-group:first-child .flag-btn:nth-child(2) { grid-column:2; }
.flag-row .flag-group:first-child .flag-btn-clear         { grid-column:3; justify-self:center; }

/* Back : case X fantôme */
.flag-row[data-flag-menu="1"] .flag-group:first-child .flag-group-line::after
{
	content:""; display:block; grid-column:3; width:1.4em; height:1.4em;
}

/* ── Placement par menu ── */

/* Back : Back, Couleur1, Couleur2, Turn */
.flag-row[data-flag-menu="1"] .flag-group:nth-child(1) { grid-column:1; }
.flag-row[data-flag-menu="1"] .flag-group:nth-child(2) { grid-column:2; }
.flag-row[data-flag-menu="1"] .flag-group:nth-child(3) { grid-column:3; }
.flag-row[data-flag-menu="1"] .flag-group:nth-child(4) { grid-column:4; }

/* Shape : Shape, Couleur, Turn, Zoom */
.flag-row[data-flag-menu="2"] .flag-group:nth-child(1) { grid-column:1; }
.flag-row[data-flag-menu="2"] .flag-group:nth-child(2) { grid-column:2; }
.flag-row[data-flag-menu="2"] .flag-group:nth-child(3) { grid-column:4; }
.flag-row[data-flag-menu="2"] .flag-group:nth-child(4) { grid-column:6; }

/* Logo 1 & 2 : Logo, Couleur, Angle, Flip, Spin, Zoom */
.flag-row[data-flag-menu="3"] .flag-group:nth-child(1),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(1) { grid-column:1; }
.flag-row[data-flag-menu="3"] .flag-group:nth-child(2),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(2) { grid-column:2; }
.flag-row[data-flag-menu="3"] .flag-group:nth-child(3),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(3) { grid-column:3; }
.flag-row[data-flag-menu="3"] .flag-group:nth-child(4),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(4) { grid-column:4; }
.flag-row[data-flag-menu="3"] .flag-group:nth-child(5),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(5) { grid-column:5; }
.flag-row[data-flag-menu="3"] .flag-group:nth-child(6),
.flag-row[data-flag-menu="4"] .flag-group:nth-child(6) { grid-column:6; }

/* FX : FX, Turn, Alpha */
.flag-row[data-flag-menu="5"] .flag-group:nth-child(1) { grid-column:1; }
.flag-row[data-flag-menu="5"] .flag-group:nth-child(2) { grid-column:4; }
.flag-row[data-flag-menu="5"] .flag-group:nth-child(3) { grid-column:6; }

/* ── Responsive ── */

@media (max-width:1050px)
{
	.flag-row { grid-template-columns: 6.2em 5.4em 5.4em 4.4em 4.4em 5.8em; column-gap:.3em; }
	.flag-group-label { font-size:78%; }
}
@media (max-width:760px)
{
	.flag-row { display:flex; flex-wrap:wrap; gap:.45em .8em; }
	.flag-group { min-width:4.8em; }
}