/* Générateurs de maquettes : formulaire à gauche, aperçu en direct à droite (au-dessus sur téléphone) */
.tool-hero:has(.mq) { overflow: clip; } /* laisse l'aperçu suivre le défilement */
.tool-box.mq { max-width: 1040px; grid-template-columns: minmax(0, 1fr) minmax(0, 372px); gap: 16px 24px; align-items: start; }
.tool-box.mq-g-carte, .tool-box.mq-g-scene { max-width: 1140px; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
.mq-avert { grid-column: 1 / -1; padding: 11px 14px; border-radius: 12px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.5; color: var(--text); }
.mq-form { grid-column: 1; grid-row: 2; display: grid; gap: 14px; min-width: 0; }
.mq-vue { grid-column: 2; grid-row: 2; position: sticky; top: 88px; display: grid; gap: 10px; justify-items: center; min-width: 0; text-align: center; }
.tool-box.mq-g-scene .mq-form, .tool-box.mq-g-scene .mq-vue { grid-row: 1; }

.mq-cadre { width: 100%; }
.mq-toile { display: block; width: 100%; height: auto; margin: 0 auto; }
.mq-tel { max-width: 340px; padding: 10px; border-radius: 46px; background: #17181d; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 26px 44px -26px rgba(12, 12, 24, .65); }
.mq-tel .mq-toile { border-radius: 36px; }
.mq-carte { overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 18px 34px -24px rgba(12, 12, 24, .4); }
.mq-scene { user-select: none; }
.mq-scene .mq-toile { width: auto; max-width: 100% !important; max-height: 640px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); background: repeating-conic-gradient(#d9dae2 0 25%, #f3f3f7 0 50%) 0 0 / 22px 22px; }
.mq-scene.glisse .mq-toile { touch-action: none; cursor: grab; }
.mq-scene.glisse.prise .mq-toile { cursor: grabbing; }

/* Boutons à choix unique */
.mq-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 13px; background: var(--soft); justify-self: start; }
.mq-seg button { min-height: 36px; padding: 0 13px; border-radius: 10px; font: 500 14px/1.2 var(--body); color: var(--muted); transition: background .2s, color .2s; }
.mq-seg button:hover { color: var(--ink); }
.mq-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(12, 12, 24, .2); }
.mq-rang { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.mq-rang > .lab { flex: 0 1 auto; min-width: 0; }
.mq-rang > label.lab { flex: 1 1 170px; }
.mq-rang > .tick { min-height: 44px; }
.mq-quatre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mq-def { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text); }
.mq-coul { flex: none; width: 52px; height: 44px; }

/* Liste des messages et des participants */
.mq-bloc { display: grid; gap: 10px; }
.mq-titre { font: 600 16px/1.3 var(--head); color: var(--ink); }
.mq-msgs { display: grid; gap: 8px; }
.mq-msg { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: var(--soft); }
.mq-msg-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mq-msg-haut .mq-seg { background: #fff; box-shadow: 0 0 0 1px var(--line); padding: 3px; }
.mq-msg-haut .mq-seg button { min-height: 32px; padding: 0 11px; }
.mq-msg-haut .mq-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.mq-msg-acts { display: flex; gap: 2px; margin-left: auto; }
.mq-msg .ib:hover { background: #fff; }
.inp.mq-pt { width: 96px; height: 40px; padding: 0 10px; font-size: 15px; }
.inp.mq-sel { width: auto; max-width: 180px; padding-right: 6px; }
.inp.mq-zone { min-height: 0; padding: 10px 12px; font-size: 16px; line-height: 1.4; }
.inp.mq-grande { min-height: 110px; }
.mq-auteur { display: flex; flex-wrap: wrap; align-items: center; }
.mq-auteur .mq-coul { width: 44px; height: 40px; padding: 4px; }
.inp.mq-nom { flex: 1 1 120px; width: auto; min-width: 0; }
.mq-msg-haut .inp.mq-pt[placeholder="Date"] { flex: 1 1 90px; width: auto; max-width: 200px; }

@media (max-width: 980px) {
  .tool-box.mq, .tool-box.mq-g-carte, .tool-box.mq-g-scene { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
  .mq-form, .mq-vue, .tool-box.mq-g-scene .mq-form, .tool-box.mq-g-scene .mq-vue { grid-column: 1; grid-row: auto; }
  .mq-vue { position: static; }
  .mq-tel { max-width: 290px; }
  .mq-scene .mq-toile { max-height: 520px; }
}
@media (max-width: 600px) {
  .mq-tel { max-width: 250px; padding: 8px; border-radius: 38px; }
  .mq-tel .mq-toile { border-radius: 30px; }
  .mq-quatre { grid-template-columns: 1fr 1fr; }
  .mq-scene .mq-toile { max-height: 440px; }
}
.mq-form > .acts:has(> [hidden]:only-child) { display: none; }