*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh}

header{background:#111827;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
header a{text-decoration:none}
.back{color:#94a3b8;font-size:13px;white-space:nowrap}
.back:hover{color:#fbbf24}

.container{max-width:1100px;margin:0 auto;padding:14px}
h1{font-size:21px;font-weight:800;color:#fbbf24;text-align:center;margin-bottom:3px}
.subtitle{text-align:center;color:#64748b;font-size:13px;margin-bottom:14px}

.progress{display:flex;gap:4px;margin-bottom:12px}
.progress .dot{flex:1;height:4px;border-radius:2px;background:#1e293b;transition:background .3s}
.progress .dot.active{background:#fbbf24}
.progress .dot.done{background:#16a34a}

.work-area{display:grid;gap:14px}
@media(min-width:900px){
  .work-area{grid-template-columns:360px 1fr;align-items:start}
  .preview-panel{position:sticky;top:12px}
}

.preview-panel{background:#111827;border:1px solid #1e293b;border-radius:14px;padding:10px}
.preview-title{font-size:12px;font-weight:700;color:#94a3b8;margin-bottom:8px;text-align:center}
.preview-canvas-box{width:100%;max-width:360px;margin:0 auto;aspect-ratio:3/2;background:#fff;border-radius:8px;overflow:hidden}
.preview-note{font-size:11px;color:#64748b;margin-top:8px;text-align:center;line-height:1.35}

.step-card{background:#111827;border:1px solid #1e293b;border-radius:14px;padding:14px 14px 76px;min-height:430px;position:relative}
.step{display:none}
.step.active{display:block}
.step-title{font-size:16px;font-weight:700;color:#f8fafc;margin-bottom:4px}
.step-desc{font-size:12px;color:#64748b;margin-bottom:12px}

.grid-cadres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:330px;overflow-y:auto;padding-right:3px}
@media(min-width:480px){.grid-cadres{grid-template-columns:repeat(4,1fr)}}
.grid-cadres .item{background:#1e293b;border:2px solid #334155;border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s;aspect-ratio:3/2}
.grid-cadres .item:hover{border-color:#fbbf24}
.grid-cadres .item.selected{border-color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,0.3)}
.grid-cadres .item img{width:100%;height:100%;object-fit:cover}

.grid-illus,.grid-trophees{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;max-height:300px;overflow-y:auto;padding-right:3px}
@media(min-width:480px){.grid-illus,.grid-trophees{grid-template-columns:repeat(5,1fr)}}
.grid-illus .item,.grid-trophees .item{background:#1e293b;border:2px solid #334155;border-radius:10px;padding:6px;cursor:pointer;transition:all .2s;aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:#94a3b8}
.grid-illus .item:hover,.grid-trophees .item:hover{border-color:#fbbf24}
.grid-illus .item.selected,.grid-trophees .item.selected{border-color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,0.3)}
.grid-illus .item img,.grid-trophees .item img{width:100%;height:100%;object-fit:contain}

.grid-fonts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:220px;overflow-y:auto;padding-right:3px}
@media(min-width:480px){.grid-fonts{grid-template-columns:repeat(3,1fr)}}
.grid-fonts .item{background:#1e293b;border:2px solid #334155;border-radius:10px;padding:10px 8px;cursor:pointer;transition:all .2s;text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center}
.grid-fonts .item:hover{border-color:#fbbf24}
.grid-fonts .item.selected{border-color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,0.3)}
.grid-fonts .item span{font-size:18px;color:#f1f5f9}

.color-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.color-row label{font-size:13px;color:#94a3b8;min-width:120px}
.color-row input[type="color"]{width:44px;height:34px;border:none;border-radius:6px;cursor:pointer;background:transparent}
.color-row span{font-size:11px;color:#64748b;font-family:monospace}

.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:12px;font-weight:600;color:#94a3b8;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.form-group input,.select{width:100%;background:#1e293b;border:1px solid #334155;color:#f1f5f9;padding:10px 12px;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s}
.form-group input:focus,.select:focus{border-color:#fbbf24}

.nav-btns{display:flex;gap:10px;margin-top:16px;position:absolute;left:14px;right:14px;bottom:14px}
.btn{flex:1;padding:11px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;border:none;transition:all .2s}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-prev{background:#1e293b;color:#94a3b8;border:1px solid #334155}
.btn-prev:hover{background:#334155}
.btn-next{background:#fbbf24;color:#111}
.btn-next:hover{background:#f59e0b}
.btn-create{background:#16a34a;color:#fff;font-size:15px}
.btn-create:hover{background:#15803d}

.help{font-size:12px;color:#64748b;background:#0f172a;border:1px solid #1e293b;border-radius:10px;padding:9px;margin-bottom:10px;line-height:1.45}
.msg{font-size:12px;margin-top:10px;display:none}
.msg.show{display:block}
.msg.error{color:#fca5a5}
.msg.ok{color:#86efac}

@media(max-width:899px){
  .container{padding:10px}
  .preview-panel{padding:8px}
  .preview-canvas-box{max-width:310px}

  /* Cadres : on garde la hauteur normale */
  .grid-cadres{max-height:230px}

  /* Polices : plus compactes sur smartphone */
  .grid-fonts{grid-template-columns:repeat(3,1fr);max-height:200px}
  .grid-fonts .item{padding:7px 5px;min-height:40px}
  .grid-fonts .item span{font-size:15px}

  /* Illustrations : déjà compactées */
  .grid-illus{grid-template-columns:repeat(4,1fr);max-height:168px}
  .grid-illus .item{padding:4px}

  /* Trophées : compactés séparément, sans toucher aux cadres */
  .grid-trophees{grid-template-columns:repeat(4,1fr);max-height:168px}
  .grid-trophees .item{padding:4px}

  .step-card{padding:12px 12px 72px;min-height:360px}
  .nav-btns{left:12px;right:12px;bottom:12px}
}

@media(max-width:380px){
  .grid-illus{max-height:158px}
  .grid-trophees{max-height:158px}
  .grid-fonts{max-height:190px}
  .grid-fonts .item span{font-size:14px}
}