/* Commande rapide depuis la galerie : aperçu en direct, couleurs et formulaire (fenêtre) */
.dlg {
  --soft: #C3CAE3; --ok: #4BE28A; --err: #FF8A8A; --panel: #070C26;
  width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 1px solid var(--line-2); border-radius: 20px; background: var(--panel); color: var(--paper);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); font-size: 15px; line-height: 1.5;
}
.dlg::backdrop { background: rgba(2, 4, 16, .75); backdrop-filter: blur(4px); }
.dlg__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); max-height: calc(100dvh - 34px); }
.dlg__col { padding: clamp(18px, 3vw, 30px); overflow-y: auto; }
.dlg__col + .dlg__col { border-left: 1px solid var(--line); }
.dlg h2 { font-size: 23px; font-weight: 750; font-variation-settings: "wdth" 115; letter-spacing: -.015em; margin-bottom: 10px; padding-right: 40px; }
.dlg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dlg .ibtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(4, 7, 26, .6); color: var(--soft); cursor: pointer; }
.dlg .ibtn:hover { color: var(--paper); border-color: var(--sky); }
.dlg__close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.dlg .note { font-size: 13.5px; color: var(--mute); }
.dlg .note--err { color: var(--err); }
.dlg .note--ok { color: var(--ok); }
.dlg .reset { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--sky); font-size: 13px; font-weight: 600; padding: 4px 0; cursor: pointer; }
.dlg .reset:hover { color: var(--amber); }
.dlg .stack { display: flex; flex-direction: column; gap: 8px; }
.dlg .btn { font-size: 15px; }

/* Formulaire */
.dlg form { display: flex; flex-direction: column; gap: 14px; }
.dlg .field { display: flex; flex-direction: column; gap: 7px; border: 0; min-width: 0; }
.dlg .field__label { font-size: 13.5px; font-weight: 600; color: var(--sky); }
.dlg .input, .dlg .textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; background: rgba(4, 7, 26, .7); border: 1px solid var(--line-2);
  color: var(--paper); font: inherit; font-size: 14.5px; transition: border-color .2s, box-shadow .2s;
}
.dlg .textarea { resize: vertical; min-height: 74px; }
.dlg .input::placeholder, .dlg .textarea::placeholder { color: #5D6690; }
.dlg .input:focus, .dlg .textarea:focus { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 3px rgba(47, 92, 255, .22); }
.dlg [aria-invalid="true"] { border-color: var(--err); }
.dlg .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dlg .chips span { font-size: 13px; padding: 7px 11px; }
.dlg .check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--soft); cursor: pointer; }
.dlg .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); flex: none; }

/* Récapitulatif */
.dlg .summary { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dlg .summary div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 12px; font-size: 13.5px; }
.dlg .summary div + div { border-top: 1px solid var(--line); }
.dlg .summary dt { color: var(--mute); }
.dlg .summary dd { overflow-wrap: anywhere; }
.dlg .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); vertical-align: -1px; margin-right: 4px; border: 1px solid var(--line-2); }

/* Aperçu en direct */
.qhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; }
.qlive { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--soft); }
.qlive::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4BE28A; box-shadow: 0 0 0 4px rgba(75, 226, 138, .18); }
.qseg { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--line-2); }
.qseg button { border: 0; background: none; color: var(--mute); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 7px; cursor: pointer; }
.qseg button[aria-pressed="true"] { background: var(--night-2); color: var(--paper); }
.qprev { position: relative; height: clamp(260px, 38vh, 400px); border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line-2); }
.qprev[data-device="mobile"] { background: #0B1131; }
.qprev iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; background: #fff; transition: opacity .3s; }
.qprev.is-loading iframe { opacity: 0; }
.qprev__load { position: absolute; inset: 0; display: grid; place-items: center; color: #5D6690; font-size: 14px; }
.qprev:not(.is-loading) .qprev__load { display: none; }

/* Couleurs */
.qh { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--amber); margin: 22px 0 6px; }
.qpals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.qpal { display: flex; flex-direction: column; gap: 5px; padding: 6px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(4, 7, 26, .4); color: var(--soft); font: inherit; font-size: 11.5px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.qpal:hover { border-color: var(--sky); }
.qpal[aria-pressed="true"] { border-color: var(--blue-hi); background: rgba(47, 92, 255, .14); }
.qpal__sw { display: flex; height: 16px; border-radius: 5px; overflow: hidden; }
.qpal__sw i { flex: 1; background: var(--c); }
.qpal span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qroles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 6px; }
.qrole { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(4, 7, 26, .4); cursor: pointer; }
.qrole:hover { border-color: var(--sky); }
.qrole.is-off { opacity: .45; cursor: default; }
.qrole__sw { position: relative; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--c); border: 1px solid var(--line-2); overflow: hidden; }
.qrole__sw input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; }
.qrole__txt { display: flex; flex-direction: column; min-width: 0; }
.qrole__txt b { font-size: 13px; }
.qrole__hex { font-size: 12px; color: var(--mute); font-family: ui-monospace, Consolas, monospace; }
.qrole:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.qmore { margin-top: 14px; }

/* Résultat de l'envoi */
.dlg__done { padding: clamp(28px, 5vw, 56px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; grid-column: 1 / -1; }
.dlg__done .ref { font-size: 26px; font-weight: 800; letter-spacing: .04em; color: var(--amber); }
.dlg__done p { color: var(--soft); max-width: 34em; }
.dlg__done .stack { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.badge-ok { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(75, 226, 138, .15); color: var(--ok); }
.badge-ok svg { width: 30px; height: 30px; stroke-width: 2.4; }
.badge-err { background: rgba(255, 138, 138, .14); color: var(--err); }

@media (max-width: 900px) {
  .dlg__in { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .dlg__col { overflow: visible; }
  .dlg__col + .dlg__col { border-left: 0; border-top: 1px solid var(--line); }
  .dlg .row2 { grid-template-columns: minmax(0, 1fr); }
  .qpals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}