:root{
  --bg:#f7f8fa; --card:#fff; --ink:#2a2e34; --muted:#8d95a1;
  --accent:#2c6dfd; --accent-weak:#e8efff; --border:#e5e7eb;
  --shadow:0 6px 18px rgba(16,24,40,.06); --radius:14px;
}
.fly-wrap{max-width:1100px;margin:40px auto;padding:0 0px;color:var(--ink)}
.fly-panel{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.fly-panel-header{padding:18px 22px;border-bottom:1px solid var(--border);font-weight:700}
.fly-panel-body{padding:22px}
.fly-row{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start;padding:14px 0;border-bottom:1px dashed var(--border)}
.fly-row:last-child{border-bottom:0}
.fly-label{font-weight:700;color:#586074;padding-top:4px}
.fly-options{display:grid;gap:16px}
.fly-article{grid-template-columns:repeat(3,minmax(0,1fr))}
.fly-format{grid-template-columns:repeat(6,minmax(0,1fr))}
.fly-support{grid-template-columns:repeat(5,minmax(0,1fr))}
.fly-opt{position:relative;display:block}
.fly-opt>input{position:absolute;opacity:0;inset:0;cursor:pointer}
.fly-card{border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:.2s ease;min-height:120px}
.fly-card:hover{box-shadow:0 8px 20px rgba(16,24,40,.08);transform:translateY(-1px)}
.fly-opt>input:checked + .fly-card{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.fly-opt>input:disabled + .fly-card{opacity:.45;filter:grayscale(20%);cursor:not-allowed}
.fly-thumb{width:100%;aspect-ratio:16/12;border-radius:12px;overflow:hidden;background:#eef2ff;display:flex;align-items:center;justify-content:center}
.fly-thumb img{width:100%;height:100%;object-fit:cover}
.fly-cap{font-size:12px;color:#5e6778;text-align:center}
.fly-tile{width:100%;background:linear-gradient(180deg,#fafbff,#f3f5fb);border-radius:12px;border:1px solid var(--border);height:88px;display:grid;place-items:center;font-weight:700;color:#4e5563;text-align:center}
.fly-small{height:74px}
.fly-sub{font-size:11px;color:var(--muted);text-align:center;margin-top:6px;min-height:14px}
.fly-paper{width:100%;height:92px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;text-align:center;padding:10px;background:linear-gradient(#fff,#f6f7fb)}
.fly-paper b{display:block;font-size:18px}
.fly-paper span{font-size:13px;color:#616a77}
.fly-badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;padding:3px 6px;border-radius:999px;background:#ff3d60;color:#fff;letter-spacing:.2px}
.fly-tag{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:#0ea5e9;color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px}
.fly-cluster{display:grid;grid-template-columns:repeat(2,220px);gap:16px;margin-top:8px}
.fly-muted{color:var(--muted);font-size:12px;margin-top:8px}
/* --- Segmented toggle (Impression) --- */
.fly-segwrap{display:flex;gap:12px;align-items:center;position:relative}
.fly-help{
  margin-left:8px;width:22px;height:22px;border-radius:50%;
  display:inline-grid;place-items:center;font-weight:700;font-size:12px;
  border:1px solid var(--border);color:#5d6a7a;background:#fff
}
.fly-seg{position:relative;display:inline-block}
.fly-seg input{position:absolute;inset:0;opacity:0;cursor:pointer}
.fly-seg span{
  display:inline-block;padding:10px 18px;border:1.5px solid #2b5de7;
  color:#2b5de7;background:#fff;border-radius:10px;min-width:130px;
  text-align:center;font-weight:600;transition:.18s ease
}
.fly-seg input:checked + span{
  background:#eef3ff;border-color:#2b5de7;box-shadow:0 0 0 2px rgba(44,109,253,.12) inset
}

/* --- Custom select (Quantité) --- */
.fly-select{position:relative;display:inline-block;min-width:220px}
.fly-select select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;padding:10px 40px 10px 14px;border:1px solid var(--border);
  border-radius:10px;background:#fff;font-weight:600;color:#273041;
  line-height:1.2;box-shadow:var(--shadow, 0 2px 8px rgba(16,24,40,.04))
}
.fly-select select:focus{outline:none;border-color:#2c6dfd;box-shadow:0 0 0 3px var(--accent-weak)}
.fly-caret{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #3b4653;
  pointer-events:none
}
.fly-note{margin-top:6px;font-size:12px;color:var(--muted)}

/* responsive */
@media (max-width:1000px){
  .fly-format{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fly-support{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:820px){
  .fly-row{grid-template-columns:1fr;gap:10px}
  .fly-article{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fly-format{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fly-support{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fly-cluster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ================================
   MID-RANGE LAYOUT TUNING
   Targets ~800–1600px wide viewports
   ================================ */

/* General mid-range: 820–1440 */
@media (min-width: 820px) and (max-width: 1440px){

  /* make the whole module a bit narrower & centered */
  .fly-wrap{ max-width: 960px; }

  /* reduce spacing so more fits without feeling cramped */
  .fly-options{ gap: 12px; }

  /* columns per group */
  .fly-article{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fly-format { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fly-support{ grid-template-columns: repeat(4, minmax(0,1fr)); }

  /* cluster (A4 / Devis) side by side */
  .fly-cluster{ grid-template-columns: 1fr 1fr; gap: 14px; }

  /* card sizing tuned for this band */
  .fly-card{ min-height: 130px; padding: 10px; }
  .fly-tile{
    height: 110px;
    font-size: clamp(16px, 2.2vw, 22px); /* scales nicely across this band */
  }
  .fly-sub{ font-size: 12px; }

  /* paper swatches slightly smaller badges */
  .fly-badge{ top: 6px; left: 6px; font-size: 9.5px; padding: 2px 6px; }
  .fly-tag{ bottom: 6px; font-size: 9.5px; padding: 2px 7px; }
}

/* Narrow mid-range: 820–1060
   (some 13" laptops/tablets in landscape) */
@media (min-width: 820px) and (max-width: 1060px){

  .fly-wrap{ max-width: 860px; }

  /* fewer columns to avoid squished cards */
  .fly-article{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fly-format { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fly-support{ grid-template-columns: repeat(3, minmax(0,1fr)); }

  /* stack A4 / Devis if space is tight */
  .fly-cluster{ grid-template-columns: 1fr; }

  .fly-card{ min-height: 126px; }
  .fly-tile{ height: 102px; }
}

/* Wide mid-range: 1440–1600
   (before your “large OK” breakpoint kicks in) */
@media (min-width: 1440px) and (max-width: 1600px){
  .fly-wrap{ max-width: 1080px; }
  .fly-format { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .fly-support{ grid-template-columns: repeat(5, minmax(0,1fr)); }
  .fly-cluster{ grid-template-columns: 1fr 1fr; }
}

@media (max-width:520px){
  .fly-article{grid-template-columns:1fr}
  .fly-format{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fly-support{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fly-cluster{grid-template-columns:1fr}
}