/* ============================================================
   La Guerre du Clic V3 — Éditeur de drapeau PARTAGÉ (composant).
   Copie fidèle des règles de l'atelier du hub (guerre-bed.php),
   mais toutes scopées sous .gb-flag-editor pour ne pas entrer en
   collision avec les .gb-flag d'autres pages (classement = 44x28, etc.).
   @keyframes restent globaux (sans effet de bord).
   ============================================================ */

.gb-flag-editor .gb-flag { position: relative; width: 110px; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid #2a2f48; display: inline-block; vertical-align: middle; }
.gb-flag-editor .gb-flag.banner { width: 96px; height: 62px; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.gb-flag-editor .gb-flag .pattern { position: absolute; inset: 0; }
.gb-flag-editor .gb-flag .emblem { position: absolute; inset: 0; margin: auto; width: 56%; height: 56%; z-index: 1;
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
/* ============================================================
   Éditeur de drapeau — atelier « cockpit HUD » (Élite Dangereuse).
   Aperçu vivant à gauche, contrôles segmentés à droite, micro-interactions fluides.
   ============================================================ */
.gb-flag-editor .fe-flag { display: grid; grid-template-columns: minmax(210px, 280px) 1fr; gap: 18px; align-items: start; max-width: 850px; margin: 8px auto 0; text-align: left; }

/* — Aperçu (centre de gravité) — */
.gb-flag-editor .fe-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px 16px;
  border: 1px solid color-mix(in srgb, #fa6d00 32%, #243049); border-radius: 3px;
  background: radial-gradient(ellipse at 50% -10%, rgba(250,109,0,.12), rgba(8,10,18,.45) 72%), linear-gradient(155deg, rgba(255,255,255,.04), rgba(8,10,18,.3));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.gb-flag-editor .fe-corner { position: absolute; width: 14px; height: 14px; border: 2px solid #fa6d00; opacity: .55; pointer-events: none; }
.gb-flag-editor .fe-corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.gb-flag-editor .fe-corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.gb-flag-editor .fe-stage__tag { font-family: "Chakra Petch", system-ui, sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #5b6a8c; }
.gb-flag-editor .fe-meta { font-family: "Chakra Petch", system-ui, sans-serif; font-size: 12px; color: #9fb0d0; text-align: center; line-height: 1.5; }
.gb-flag-editor .fe-meta strong { color: #ffd9a8; font-weight: 700; }
.gb-flag-editor .fe-save { width: 100%; margin-top: 2px; appearance: none; cursor: pointer; font-family: "Chakra Petch", system-ui, sans-serif;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; color: #1b1f2e;
  background: linear-gradient(180deg, #ffb066, #fa6d00); border: 1px solid #ffd9a8; padding: 11px 12px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: 0 0 14px rgba(250,109,0,.4); transition: filter .15s ease, transform .1s ease, box-shadow .2s ease; }
.gb-flag-editor .fe-save:hover { filter: brightness(1.08); box-shadow: 0 0 22px rgba(250,109,0,.6); }
.gb-flag-editor .fe-save:active { transform: scale(.98); }
.gb-flag-editor .gb-flag.gb-flag-xl { width: 200px; height: 132px; border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.55); transition: background .25s ease; }
.gb-flag-editor .fe-flag .gb-flag .emblem { transition: width .2s ease, height .2s ease, background .2s ease; }

/* — Atelier : navigation segmentée (indicateur glissant) — */
.gb-flag-editor .fe-seg { position: relative; display: grid; grid-template-columns: repeat(var(--seg-n,4), 1fr); padding: 3px;
  background: rgba(8,10,18,.55); border: 1px solid #243049; border-radius: 3px; overflow: hidden; }
.gb-flag-editor .fe-seg__ind { position: absolute; top: 3px; bottom: 3px; left: 3px; z-index: 0; width: calc((100% - 6px) / var(--seg-n,4)); border-radius: 2px;
  background: linear-gradient(180deg, #ff9233, #fa6d00); box-shadow: 0 0 12px rgba(250,109,0,.5);
  transform: translateX(calc(var(--seg-i,0) * 100%)); transition: transform .3s cubic-bezier(.5,0,.2,1); }
.gb-flag-editor .fe-seg__btn { position: relative; z-index: 1; appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: "Chakra Petch", system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: #9fb0d0; padding: 9px 4px; transition: color .25s ease; }
.gb-flag-editor .fe-seg__btn.is-active { color: #1b1f2e; }
.gb-flag-editor .fe-seg__btn:hover:not(.is-active) { color: #fff; }
.gb-flag-editor .fe-panels { margin-top: 16px; }
.gb-flag-editor .fe-field { margin-bottom: 16px; }
.gb-flag-editor .fe-field:last-child { margin-bottom: 0; }
.gb-flag-editor .fe-field__lbl { display: block; font-family: "Chakra Petch", system-ui, sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #6a7aa0; margin-bottom: 8px; }
.gb-flag-editor .fe-field__lbl .val { color: #ffd9a8; font-weight: 700; }
.gb-flag-editor .fe-chips { display: flex; flex-wrap: wrap; }

/* Pastilles de couleur */
.gb-flag-editor .fe-flag .gb-swatches { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin: 0; padding: 0; border: 0; background: none; }
.gb-flag-editor .fe-flag .gb-swatch { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 0; cursor: pointer; position: relative;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); transition: transform .12s ease, box-shadow .15s ease; }
.gb-flag-editor .fe-flag .gb-swatch:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.gb-flag-editor .fe-flag .gb-swatch.sel { box-shadow: 0 0 0 2px #0a0c14, 0 0 0 4px #fa6d00, 0 0 12px rgba(250,109,0,.55); }
.gb-flag-editor .fe-flag .gb-swatch.sel::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }

/* Grille d'emblèmes (tuiles HUD) */
.gb-flag-editor .fe-flag .gb-emblem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 7px; max-height: 210px; overflow-y: auto; margin: 0; padding: 5px; border: 1px solid #243049; border-radius: 3px; background: rgba(8,10,18,.4); }
.gb-flag-editor .fe-flag .gb-emblem-btn { aspect-ratio: 1; width: auto; height: auto; padding: 9px; position: relative; cursor: pointer; border: 1px solid #243049; border-radius: 2px; background: rgba(255,255,255,.02); transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.gb-flag-editor .fe-flag .gb-emblem-btn:hover { border-color: #fa6d00; transform: translateY(-2px); }
.gb-flag-editor .fe-flag .gb-emblem-btn.sel { border-color: #fa6d00; background: color-mix(in srgb, #fa6d00 14%, transparent); box-shadow: 0 0 12px rgba(250,109,0,.35); }
.gb-flag-editor .fe-flag .gb-emblem-btn .em { display: block; width: 100%; height: 100%; background: #cdd6ea; -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; transition: background .15s ease; }
.gb-flag-editor .fe-flag .gb-emblem-btn:hover .em, .gb-flag-editor .fe-flag .gb-emblem-btn.sel .em { background: #ffd9a8; }
.gb-flag-editor .fe-flag .gb-emblem-btn.gb-locked-cos { opacity: .32; cursor: not-allowed; }

/* Puces (motif / bordure / effet) */
.gb-flag-editor .fe-flag .gb-pat-btn { font-family: "Chakra Petch", system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 6px 12px; margin: 0 7px 7px 0; cursor: pointer;
  border: 1px solid #243049; border-radius: 2px; background: rgba(8,10,18,.5); color: #9fb0d0; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.gb-flag-editor .fe-flag .gb-pat-btn:hover { border-color: #fa6d00; color: #fff; }
.gb-flag-editor .fe-flag .gb-pat-btn.sel { border-color: #fa6d00; color: #1b1f2e; background: linear-gradient(180deg, #ff9233, #fa6d00); }
.gb-flag-editor .fe-flag .gb-pat-btn.gb-locked-cos { opacity: .4; cursor: not-allowed; }
.gb-flag-editor .gb-locked-cos { opacity:.4; cursor:not-allowed; }

/* Curseur de taille (HUD) */
.gb-flag-editor .fe-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; cursor: pointer; background: linear-gradient(90deg, #fa6d00, #243049); outline: none; }
.gb-flag-editor .fe-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #ffb066; border: 2px solid #fff; box-shadow: 0 0 10px rgba(250,109,0,.7); cursor: pointer; transition: transform .1s ease; }
.gb-flag-editor .fe-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.gb-flag-editor .fe-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #ffb066; border: 2px solid #fff; box-shadow: 0 0 10px rgba(250,109,0,.7); cursor: pointer; }
.gb-flag-editor .fe-range-ticks { display: flex; justify-content: space-between; margin-top: 5px; font-family: "Chakra Petch", system-ui, sans-serif; font-size: 10px; color: #5b6a8c; }

@media (max-width: 640px) { .gb-flag-editor .fe-flag { grid-template-columns: 1fr; } .gb-flag-editor .gb-flag.gb-flag-xl { width: 170px; height: 112px; } }
@media (prefers-reduced-motion: reduce) { .gb-flag-editor .fe-seg__ind, .gb-flag-editor .gb-flag.gb-flag-xl, .gb-flag-editor .fe-flag .gb-flag .emblem, .gb-flag-editor .fe-save { transition: none; } }

/* --- Masquage des panneaux inactifs --- */
.gb-flag-editor .gb-hidden { display: none; }

/* --- Cosmétiques de drapeau (débloqués par rang) --- */
.gb-flag-editor .gb-bd-liseré_or       { box-shadow: inset 0 0 0 2px #ffcc33; }
.gb-flag-editor .gb-bd-double          { box-shadow: inset 0 0 0 1px #e8e8e8, inset 0 0 0 4px #1b1f2e, inset 0 0 0 5px #e8e8e8; }
.gb-flag-editor .gb-bd-neon            { box-shadow: inset 0 0 0 2px currentColor, 0 0 8px 1px currentColor; color: #2b6cff; }
.gb-flag-editor .gb-bd-couronne_angles { box-shadow: inset 0 0 0 2px #ffcc33; outline: 2px solid #ffcc33; outline-offset: 2px; }
.gb-flag-editor .gb-bd-liseré_argent { box-shadow: inset 0 0 0 2px #c0c0c0; }
.gb-flag-editor .gb-bd-cadre_neon_bleu { box-shadow: inset 0 0 0 2px #2b6cff, 0 0 8px rgba(43,108,255,.7); }
.gb-flag-editor .gb-fx-halo            { box-shadow: 0 0 10px 2px rgba(250,109,0,.7); }
.gb-flag-editor .gb-fx-pulse           { animation: gb-fx-pulse 1.6s ease-in-out infinite; }
@keyframes gb-fx-pulse { 0%,100% { box-shadow: 0 0 6px 1px rgba(250,109,0,.5); } 50% { box-shadow: 0 0 16px 4px rgba(250,109,0,.9); } }
.gb-flag-editor .gb-fx-particules::after { content:''; position:absolute; inset:-3px; border-radius:inherit;
  background: radial-gradient(#fff 1px, transparent 1.5px) 0 0/10px 10px; opacity:.35;
  animation: gb-fx-drift 6s linear infinite; pointer-events:none; }
@keyframes gb-fx-drift { from { background-position: 0 0; } to { background-position: 20px 20px; } }
.gb-flag-editor .gb-fx-degrade_anime   { background-image: linear-gradient(120deg, #fa6d00, #dc3545, #8a4fff, #2b6cff, #fa6d00);
  background-size: 300% 300%; animation: gb-fx-grad 8s ease infinite; }
@keyframes gb-fx-grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.gb-flag-editor .gb-fx-scintillement { animation: gb-fx-scintille 2.2s ease-in-out infinite; }
@keyframes gb-fx-scintille { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.gb-flag-editor .gb-fx-aura_arc { animation: gb-fx-aura 6s linear infinite; }
@keyframes gb-fx-aura {
  0% { box-shadow: 0 0 12px 2px rgba(255,0,0,.6); }
  33% { box-shadow: 0 0 12px 2px rgba(0,255,0,.6); }
  66% { box-shadow: 0 0 12px 2px rgba(0,128,255,.6); }
  100% { box-shadow: 0 0 12px 2px rgba(255,0,0,.6); }
}
/* --- Effets ED ajoutés (débloqués par rang) --- */
.gb-flag-editor .gb-fx-balayage::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.55) 50%, transparent 64%);
  background-size: 250% 100%; animation: gb-fx-balayage 3.2s linear infinite; }
@keyframes gb-fx-balayage { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.gb-flag-editor .gb-fx-givre { animation: gb-fx-givre 1.9s ease-in-out infinite; }
@keyframes gb-fx-givre { 0%,100% { box-shadow: 0 0 6px 1px rgba(90,180,255,.5); } 50% { box-shadow: 0 0 16px 4px rgba(120,220,255,.9); } }
.gb-flag-editor .gb-fx-onde { animation: gb-fx-onde 2.2s ease-out infinite; }
@keyframes gb-fx-onde { 0% { box-shadow: 0 0 0 0 rgba(250,109,0,.55); } 70%,100% { box-shadow: 0 0 0 11px rgba(250,109,0,0); } }
.gb-flag-editor .gb-fx-prisme { animation: gb-fx-prisme 4s linear infinite; }
@keyframes gb-fx-prisme { 0% { filter: hue-rotate(0deg) saturate(1.25); } 100% { filter: hue-rotate(360deg) saturate(1.25); } }