:root{
  --bg:var(--mx-bg, #333333);
  --panel:var(--mx-panel, #3b3b3b);
  --panel-2:var(--mx-panel2, #303030);
  --line:var(--mx-border, rgba(255,255,255,.13));
  --text:var(--mx-text, #f4f4f4);
  --muted:var(--mx-muted, #c9c9c9);
  --page:var(--mx-bg2, #2b2b2b);
  --accent:var(--mx-accent, #97af1e);
  --accent-2:var(--mx-accent2, #c6df4d);
  --danger:var(--mx-feedback-error, #cf4747);
  --success:var(--mx-feedback-success, #2ea865);
  --shadow:var(--mx-shadow, 0 14px 34px rgba(0,0,0,.28));
  --radius:var(--mx-r2, 20px);
  --radius-sm:var(--mx-r, 14px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top right, rgba(151,175,30,.18), transparent 24%),
    radial-gradient(circle at left 20%, rgba(198,223,77,.08), transparent 18%),
    var(--bg);
  color:#f4f4f1;
}
a{color:inherit}
button,input,select,textarea{font:inherit}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0, 0, 0, 0.2);
  color:var(--text);
  padding:10px 12px;
}
textarea{min-height:92px;resize:vertical}
button{
  border:none;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
}
button:disabled{opacity:.55;cursor:not-allowed}
.page{
  width:min(1420px, calc(100vw - 18px));
  margin:0 auto;
  padding:12px 0 18px;
}
.header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:start;
  margin-bottom:16px;
}
.header__main h1{
  margin:0 0 6px;
  font-size:clamp(1.8rem,3vw,3rem);
  line-height:1.03;
}
.header__main p{
  margin:0;
  color:rgba(255,255,255,.78);
  max-width:76ch;
}
.kicker{
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  color:#c6df4d;
}
.header__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}
.app-shell{
  display:grid;
  grid-template-columns:minmax(420px, 1.06fr) minmax(340px, .94fr);
  gap:12px;
}
.stack{display:grid;gap:16px}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel__hd{
  padding:14px 16px 0;
}
.panel__hd h2,.panel__hd h3{margin:0 0 6px}
.panel__hd p{margin:0;color:var(--muted)}
.panel__bd{padding:14px 16px 16px}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.field{display:grid;gap:6px}
.field label{font-size:.9rem;color:var(--muted)}
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.btn-primary{background:var(--accent);color:#10120a;font-weight:700}
.btn-secondary{background:#ecf4cf;color:#1f2507;border:1px solid rgba(151,175,30,.25)}
.btn-ghost{background:#fff;color:#20201d;border:1px solid var(--line)}
.btn-dark{background:#1f1f1d;color:#fff}
.dropzone{
  border:1.5px dashed rgba(151,175,30,.55);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(198,223,77,.09), rgba(0,0,0,.02));
  padding:14px;
  display:grid;
  gap:14px;
  transition:all 0.2s ease-out;
}
.dropzone.is-over{
  border-color:var(--mx-accent, #97af1e);
  background:linear-gradient(180deg, rgba(198,223,77,.15), rgba(0,0,0,.05));
  transform:scale(1.015);
  box-shadow:0 0 20px rgba(151,175,30,.2);
}
.hidden{display:none !important}
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  border-radius:999px;
  padding:0 12px;
  background:#fff;
  border:1px solid var(--line);
  color:#272723;
  font-size:.86rem;
}
.note{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid #d8d5cd;
  background:#fffefa;
  color:#4b493f;
}
.note--warning{
  background:#fff7eb;
  border-color:#eed9b3;
}
.note--success{
  background:#eef9f1;
  border-color:#cfe8d5;
}
.mode-toggle{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.mode-option{
  flex:1;
  min-width:180px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#fff;
}
.mode-option.is-active{
  border-color:rgba(151,175,30,.72);
  box-shadow: inset 0 0 0 1px rgba(151,175,30,.24);
  background:#f7fbe9;
}
.mode-option h4{margin:0 0 6px}
.mode-option p{margin:0;color:var(--muted);font-size:.92rem}
.targets-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
  margin-bottom:10px;
}
.table-wrap{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:auto;
  background:var(--panel-2);
  max-height:440px;
}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:middle;
  font-size:.92rem;
}
thead th{
  position:sticky;
  top:0;
  background:var(--panel);
  z-index:2;
}
tbody tr:hover{background:rgba(255,255,255,.03)}
td .mini-input, td .mini-select{
  min-width:0;
  width:100%;
  padding:8px 10px;
  font-size:.9rem;
}
.summary-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.summary-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel-2);
  padding:14px;
}
.summary-card span{display:block;color:var(--muted);font-size:.82rem;margin-bottom:6px}
.summary-card strong{font-size:1.5rem}
#preview-map{
  width:100%;
  height:min(56vh,640px);
  border-radius:18px;
  overflow:hidden;
  background:var(--page);
  border:1px solid var(--line);
}
.preview-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.small{font-size:.88rem}
.muted{color:var(--muted)}
.section-sep{
  height:1px;
  background:#e3e0d8;
  margin:16px 0;
}
.logo-line{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.82);
  text-decoration:none;
}
.logo-line img{width:48px;height:48px}
.footer-note{
  color:rgba(255,255,255,.7);
  font-size:.82rem;
  margin-top:14px;
}
@media (max-width: 1200px){
  .app-shell{grid-template-columns:1fr}
  #preview-map{height:42vh}
}
@media (max-width: 760px){
  .page{width:min(100vw - 16px, 100%)}
  .header{grid-template-columns:1fr}
  .header__actions{justify-content:flex-start}
  .grid-2,.grid-3,.summary-grid{grid-template-columns:1fr}
  .targets-controls{grid-template-columns:1fr}
}

button,.btn-primary,.btn-secondary,.btn-ghost,.btn-dark{font-weight:700;min-height:42px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .14s ease, box-shadow .14s ease, background .14s ease}
button:hover,.btn-primary:hover,.btn-secondary:hover,.btn-ghost:hover,.btn-dark:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.14)}
.logo-line img{width:42px;height:42px;object-fit:contain}
@media (max-width:1380px){.app-shell{grid-template-columns:minmax(0,1fr) 360px}.table-wrap{max-height:360px}}
@media (max-width:1100px){.app-shell{grid-template-columns:1fr}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grid-2,.grid-3,.summary-grid{grid-template-columns:1fr}.page{width:min(100vw - 12px,100%)}}


/* v11.3.1 compact tweaks */
.btn-primary,.btn-secondary,.btn-ghost,.btn-dark{min-height:40px;padding:8px 12px;font-weight:700}
.panel__hd{padding:16px 18px 0}.panel__bd{padding:16px 18px 18px}.grid-2,.grid-3{gap:10px}.toolbar{gap:8px}.table-wrap{max-height:380px}.app-shell{grid-template-columns:minmax(430px,1.12fr) minmax(360px,.88fr)}
@media (max-width:1366px){.page{width:min(1480px,calc(100vw - 20px))}.app-shell{grid-template-columns:minmax(410px,1.06fr) minmax(340px,.94fr)}.panel__hd{padding:14px 16px 0}.panel__bd{padding:14px 16px 16px}}


/* v11.3.6 custom preview map */
#preview-map{position:relative;overflow:hidden;background:#101417;touch-action:none}
.pv-tiles,.pv-svg,.pv-empty{position:absolute;inset:0}
.pv-tiles{overflow:hidden}
.pv-tile{position:absolute;width:256px;height:256px;user-select:none;-webkit-user-drag:none;pointer-events:none}
.pv-svg{pointer-events:none}
.pv-path{fill:rgba(198,223,77,.18);stroke:#97af1e;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pv-path.diff-1{fill:rgba(46,168,101,.22);stroke:#2ea865}
.pv-path.diff-3{fill:rgba(207,71,71,.22);stroke:#cf4747}
.pv-path.is-selected{fill:rgba(255,255,255,.08);stroke:#ffffff;stroke-width:2.2}
.pv-empty{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.72);font-size:.95rem;text-align:center;padding:20px;background:linear-gradient(180deg,rgba(16,20,23,.2),rgba(16,20,23,.5))}


/* v11.3.7 — passe UX compacte builder, sans modification du moteur import/preview */
:root{
  --shadow:var(--mx-shadow, 0 14px 34px rgba(0,0,0,.16));
  --radius:var(--mx-r2, 18px);
  --radius-sm:var(--mx-r, 12px);
}

/* Structure générale plus dense pour écran 13 pouces */
.page{
  width:min(1440px, calc(100vw - 14px));
  padding:9px 0 14px;
}
.header{
  align-items:center;
  margin-bottom:10px;
  gap:12px;
}
.header__main h1{
  font-size:clamp(1.45rem,2.2vw,2.25rem);
  margin-bottom:4px;
}
.header__main p{
  font-size:.9rem;
  line-height:1.35;
  max-width:88ch;
}
.kicker{
  margin-bottom:5px;
  font-size:.68rem;
  letter-spacing:.12em;
}
.header__actions{
  gap:8px;
  align-items:center;
}

/* Boutons Manoux / actions : plus nets et professionnels */
.manoux-btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-dark,
button{
  min-height:36px;
  padding:7px 11px;
  border-radius:11px;
  font-size:.88rem;
  font-weight:750;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  letter-spacing:.005em;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.manoux-btn{
  background:#fff;
  color:#20201d;
  border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.manoux-brand-btn{
  background:linear-gradient(180deg,#262622,#191916);
  color:#fff;
  border-color:rgba(255,255,255,.12);
}
.manoux-brand-btn img{
  width:28px;
  height:28px;
  object-fit:contain;
}
.btn-primary{
  background:var(--accent);
  color:#10120a;
  border:1px solid rgba(151,175,30,.12);
  box-shadow:0 8px 18px rgba(151,175,30,.18);
}
.btn-secondary{
  background:#eef6d0;
  color:#1f2507;
  border:1px solid rgba(151,175,30,.26);
}
.btn-ghost{
  background:#fff;
  color:#20201d;
  border:1px solid var(--line);
}
button:hover,
.manoux-btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-dark:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}
button:active,
.manoux-btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-dark:active{
  transform:translateY(0);
}

/* Grille principale : plus compacte, aperçu exploitable à droite */
.app-shell{
  grid-template-columns:minmax(520px,1.18fr) minmax(390px,.82fr);
  gap:10px;
  align-items:start;
}
.stack{
  gap:10px;
}
.panel{
  border-radius:18px;
}
.panel__hd{
  padding:11px 13px 0;
}
.panel__hd h2{
  font-size:1.05rem;
  margin-bottom:3px;
}
.panel__hd h3{
  font-size:1rem;
  margin-bottom:3px;
}
.panel__hd p{
  font-size:.86rem;
  line-height:1.35;
}
.panel__bd{
  padding:11px 13px 13px;
}

/* Champs et blocs */
input,select,textarea{
  min-height:36px;
  padding:7px 10px;
  border-radius:10px;
  font-size:.9rem;
}
textarea{
  min-height:66px;
}
.field{
  gap:4px;
}
.field label{
  font-size:.78rem;
  font-weight:700;
  color:var(--muted);
}
.grid-2,
.grid-3{
  gap:8px;
}
.dropzone{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  padding:11px 12px;
  border-radius:14px;
  gap:10px;
}
.dropzone strong{
  font-size:.94rem;
}
.dropzone .small{
  font-size:.78rem;
}
.toolbar{
  gap:6px;
}
.badges{
  gap:6px;
}
.badge{
  min-height:27px;
  padding:0 9px;
  font-size:.78rem;
}
.section-sep{
  margin:12px 0;
}

/* Cibles/table : densité sans sacrifier la lecture */
.targets-controls{
  grid-template-columns:minmax(0,1fr);
  gap:8px;
}
.table-wrap{
  max-height:315px;
  border-radius:14px;
}
table{
  min-width:720px;
}
th,td{
  padding:6px 8px;
  font-size:.82rem;
}
td .mini-input,
td .mini-select{
  padding:6px 8px;
  font-size:.82rem;
}

/* Résumé et carte de preview */
.summary-grid{
  gap:7px;
}
.summary-card{
  padding:10px;
  border-radius:14px;
}
.summary-card span{
  font-size:.74rem;
  margin-bottom:3px;
}
.summary-card strong{
  font-size:1.22rem;
}
#preview-map{
  height:min(46vh,520px);
  min-height:360px;
  border-radius:16px;
}
.preview-meta{
  gap:6px;
  margin-top:8px;
}

/* Modes plus lisibles et moins hauts */
.mode-toggle{
  gap:8px;
}
.mode-option{
  padding:10px 11px;
  border-radius:14px;
}
.mode-option h4{
  font-size:.96rem;
  margin-bottom:4px;
}
.mode-option p{
  font-size:.8rem;
  line-height:1.32;
}

/* Notes et texte */
.note{
  padding:9px 11px;
  border-radius:12px;
  font-size:.84rem;
  line-height:1.35;
}
.small{
  font-size:.8rem;
}

/* Écrans 13 pouces / laptop */
@media (max-width:1366px){
  .page{
    width:min(100vw - 12px, 1420px);
    padding-top:7px;
  }
  .header{
    margin-bottom:8px;
  }
  .header__main p{
    font-size:.84rem;
  }
  .app-shell{
    grid-template-columns:minmax(500px,1.15fr) minmax(360px,.85fr);
    gap:9px;
  }
  .stack{
    gap:9px;
  }
  .panel__hd{
    padding:10px 12px 0;
  }
  .panel__bd{
    padding:10px 12px 12px;
  }
  #preview-map{
    height:min(43vh,480px);
    min-height:330px;
  }
  .table-wrap{
    max-height:280px;
  }
}

/* Tablettes et petits écrans : on empile proprement */
@media (max-width:1100px){
  .app-shell{
    grid-template-columns:1fr;
  }
  #preview-map{
    height:42vh;
    min-height:340px;
  }
  .targets-controls{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .page{
    width:min(100vw - 10px,100%);
  }
  .header{
    grid-template-columns:1fr;
  }
  .header__actions{
    justify-content:flex-start;
  }
  .dropzone{
    grid-template-columns:1fr;
  }
  .grid-2,
  .grid-3,
  .summary-grid{
    grid-template-columns:1fr;
  }
  #preview-map{
    min-height:320px;
  }
}