*{box-sizing:border-box;margin:0;padding:0}:root{--vh:100vh;--keyboard-h:0px}body{font-family:'Segoe UI',sans-serif;background:#f4f7fb;color:#263445;min-height:100vh}header{background:#ffffff;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #dbe3ec}.brand{display:flex;align-items:center;text-decoration:none}.brand img{display:block;max-height:44px;width:auto;max-width:260px}.header-spacer{width:55px}.back{color:#64748b;text-decoration:none;font-size:13px}.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}.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:#ffffff;border:1px solid #dbe3ec;border-radius:14px;padding:10px;box-shadow:0 8px 22px rgba(15,23,42,.06)}.preview-title{font-size:12px;font-weight:700;color:#64748b;margin-bottom:8px;text-align:center}.preview-canvas-box{width:100%;max-width:360px;margin:0 auto;aspect-ratio:3/2;background:transparent;border-radius:8px;overflow:hidden}.preview-canvas-box canvas,.preview-canvas-box .canvas-container{display:block!important;margin:0!important;padding:0!important}.step-card{background:#ffffff;border:1px solid #dbe3ec;border-radius:14px;padding:14px;height:480px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 22px rgba(15,23,42,.06)}.step{display:none;height:100%;min-height:0}.step.active{display:flex;flex-direction:column;min-height:0;overflow:hidden}.step-title{font-size:16px;font-weight:700;color:#223047;margin-bottom:4px;flex-shrink:0}.step-desc{font-size:12px;color:#738296;margin-bottom:12px;flex-shrink:0}.grid-cadres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;min-height:0;overflow-y:auto;padding-right:3px;align-content:start;grid-auto-rows:max-content}@media(min-width:480px){.grid-cadres{grid-template-columns:repeat(4,1fr)}}.grid-cadres .item{background:#f8fafc;border:2px solid #d7e0ea;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:3/2}.grid-cadres .item:hover,.grid-cadres .item.selected{border-color:#fbbf24}.grid-cadres .item.selected{box-shadow:0 0 12px rgba(251,191,36,.3)}.grid-cadres img{width:100%;height:100%;object-fit:cover}.grid-illus{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;flex:1;min-height:0;overflow-y:auto;padding-right:3px;align-content:start;grid-auto-rows:max-content}@media(min-width:480px){.grid-illus{grid-template-columns:repeat(5,1fr)}}.grid-illus .item{background:#f8fafc;border:2px solid #d7e0ea;border-radius:10px;padding:6px;cursor:pointer;aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:#64748b}.grid-illus .item:hover,.grid-illus .item.selected{border-color:#fbbf24}.grid-illus .item.selected{box-shadow:0 0 12px rgba(251,191,36,.3)}.grid-illus img{width:100%;height:100%;object-fit:contain}.grid-fonts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;flex:1;min-height:0;overflow-y:auto;padding-right:3px;align-content:start;grid-auto-rows:max-content}@media(min-width:480px){.grid-fonts{grid-template-columns:repeat(3,1fr)}}.grid-fonts .item{background:#f8fafc;border:2px solid #d7e0ea;border-radius:10px;padding:10px 8px;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center}.grid-fonts .item:hover,.grid-fonts .item.selected{border-color:#fbbf24}.grid-fonts .item.selected{box-shadow:0 0 12px rgba(251,191,36,.3)}.grid-fonts .item span{font-size:17px;color:#334155}.step-body{flex:1;min-height:0;overflow-y:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:#334155 transparent}.form-group{margin-bottom:11px}.form-group label{display:block;font-size:12px;font-weight:600;color:#64748b;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}.form-group input,.form-group textarea,.select{width:100%;background:#ffffff;border:1px solid #cfd8e3;color:#243244;padding:9px 11px;border-radius:8px;font:inherit;font-size:14px;outline:none}.form-group textarea{resize:vertical;min-height:58px}.form-group input:focus,.form-group textarea:focus,.select:focus{border-color:#fbbf24}.nav-btns{display:flex;gap:10px;margin-top:auto;padding-top:14px;flex-shrink:0}.btn{flex:1;padding:11px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;border:none;text-decoration:none;text-align:center}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-prev{background:#f1f5f9;color:#64748b;border:1px solid #d2dbe6}.btn-next{background:#fbbf24;color:#111}.btn-create{background:#16a34a;color:#fff;font-size:15px}.btn-accueil{display:none}.msg{font-size:12px;margin-top:8px;display:none}.msg.show{display:block}.msg.error{color:#fca5a5}.color-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:8px 0 12px}.color-preset{appearance:none;border:1px solid #d3dce7;background:#ffffff;color:#334155;border-radius:12px;padding:8px 6px 7px;cursor:pointer;min-width:0}.color-preset.selected{border-color:#fbbf24;box-shadow:0 0 0 2px rgba(251,191,36,.16)}.preset-preview{position:relative;display:block;height:26px;margin:0 1px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.38);overflow:hidden}.preset-accent{position:absolute;bottom:4px;width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.72)}.preset-accent:nth-child(1){left:5px}.preset-accent:nth-child(2){right:5px}.preset-name{display:block;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.colors-switch{text-align:center;margin:6px 0}.colors-switch button{border:0;background:transparent;color:#fbbf24;font:inherit;font-weight:700;cursor:pointer;padding:8px}.custom-colors-list{display:grid;gap:8px}.custom-color-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:45px;padding:0 4px}.custom-color-row label{color:#475569;font-size:14px}.custom-color-picker input[data-coloris]{width:54px;height:38px;border-radius:9px;border:1px solid #cbd5e1;background:#ffffff;color:transparent;font-size:0}.illus-search-field{position:relative}.illus-search-input{padding-right:38px}.illus-search-clear{position:absolute;top:50%;right:9px;transform:translateY(-50%);width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#64748b;font-size:20px;display:none;align-items:center;justify-content:center;cursor:pointer}.illus-search-clear.visible{display:flex}.illus-search-status{min-height:18px;margin-top:4px;color:#64748b;font-size:12px}.loading-icon{font-size:48px;margin-bottom:16px}.loading-title{color:#334155;font-size:16px;font-weight:600;margin:0 0 24px}.loading-track{width:min(260px,75vw);height:6px;background:#d9e2ec;border-radius:999px;overflow:hidden}#loading-screen{position:fixed;inset:0;background:#f4f7fb;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100000;transition:opacity .35s}#loading-bar{height:100%;width:0;background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:999px}#loading-msg{color:#64748b;font-size:12px;margin:10px 0 0}@media(max-width:899px){body{height:var(--vh);min-height:0;overflow:hidden;display:flex;flex-direction:column}header{display:none}.btn-accueil{display:block}.container{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;padding:10px}h1,.subtitle,.progress{flex-shrink:0}.work-area{flex:1;min-height:0;grid-template-rows:auto minmax(0,1fr)}.preview-panel{padding:8px;flex-shrink:0}.preview-canvas-box{width:auto;max-width:100%;height:clamp(145px,calc(var(--vh)*.23),205px)}.step-card{padding:12px;height:100%;min-height:0}.grid-fonts{grid-template-columns:repeat(3,1fr)}.grid-fonts .item{padding:7px 5px;min-height:40px}.grid-fonts .item span{font-size:14px}.grid-illus{grid-template-columns:repeat(4,1fr)}.color-presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body.keyboard-open{height:auto;min-height:calc(var(--vh) + var(--keyboard-h) + 90px);overflow-y:auto}body.keyboard-open .container{flex:0 0 var(--vh);height:var(--vh);min-height:var(--vh)}}@media(max-width:899px) and (max-height:700px){h1{font-size:18px}.subtitle{display:none}}@media (orientation:landscape) and (max-height:600px) and (max-width:950px) and (hover:none) and (pointer:coarse){body:not(.keyboard-open){overflow:hidden!important}body:not(.keyboard-open)::before{content:"↻\A\ATournez votre téléphone\A\APour créer votre carte cadeau, utilisez le mode portrait.";position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:32px;background:#f4f7fb;color:#334155;text-align:center;white-space:pre-line;font-size:18px;font-weight:700;line-height:1.5}}

.grid-cadres .item.none{display:flex;align-items:center;justify-content:center;padding:8px;font-size:13px;font-weight:700;color:#64748b;background:#f1f5f9}


/* === THEME CARTES-CADEAUX : palette du site === */
:root{
  --cc-ink:#3d3140;
  --cc-muted:#786b7c;
  --cc-paper:#fffdfb;
  --cc-cream:#fff6ef;
  --cc-pink:#e85f8f;
  --cc-pink-dark:#c84273;
  --cc-lav:#8b78c7;
  --cc-mint:#85c7b0;
  --cc-line:#eadfe5;
  --cc-shadow:0 14px 35px rgba(89,59,76,.11);
}

body{
  background:
    radial-gradient(circle at 12% 8%,rgba(232,95,143,.055),transparent 28%),
    radial-gradient(circle at 88% 88%,rgba(139,120,199,.045),transparent 30%),
    linear-gradient(180deg,#fffdfb 0%,#fffafc 100%);
  color:var(--cc-ink);
}

header{
  background:#fff;
  border-bottom:1px solid var(--cc-line);
}
.brand img{max-height:58px}
.back{color:var(--cc-muted)}
.back:hover{color:var(--cc-pink-dark)}

h1{
  color:var(--cc-ink);
  font-family:Georgia,'Times New Roman',serif;
}
.subtitle,.preview-title,.step-desc,.illus-search-status{color:var(--cc-muted)}

.progress .dot{background:#f1e7ec}
.progress .dot.active{background:var(--cc-pink)}
.progress .dot.done{background:var(--cc-mint)}

.preview-panel,.step-card{
  background:#fff;
  border:1px solid var(--cc-line);
  box-shadow:var(--cc-shadow);
}
.step-title{
  color:var(--cc-ink);
  font-family:Georgia,'Times New Roman',serif;
}

.grid-cadres .item,
.grid-illus .item,
.grid-fonts .item{
  background:#fffafc;
  border-color:#e6d8df;
  color:var(--cc-muted);
}
.grid-fonts .item span{color:var(--cc-ink)}
.grid-cadres .item:hover,.grid-cadres .item.selected,
.grid-illus .item:hover,.grid-illus .item.selected,
.grid-fonts .item:hover,.grid-fonts .item.selected{
  border-color:var(--cc-pink);
}
.grid-cadres .item.selected,
.grid-illus .item.selected,
.grid-fonts .item.selected{
  box-shadow:0 0 0 2px rgba(232,95,143,.12),0 7px 18px rgba(89,59,76,.08);
}
.grid-cadres .item.none{background:var(--cc-cream);color:var(--cc-muted)}

.form-group label{color:var(--cc-muted)}
.form-group input,.form-group textarea,.select{
  background:#fff;
  border-color:#dbcbd2;
  color:var(--cc-ink);
}
.form-group input:focus,.form-group textarea:focus,.select:focus{
  border-color:var(--cc-pink);
  box-shadow:0 0 0 3px rgba(232,95,143,.09);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:#aa9eaa}

.btn-prev{
  background:#fff;
  color:var(--cc-muted);
  border-color:var(--cc-line);
}
.btn-prev:hover{background:var(--cc-cream)}
.btn-next{
  background:var(--cc-pink);
  color:#fff;
}
.btn-next:hover{background:var(--cc-pink-dark)}
.btn-create{
  background:var(--cc-mint);
  color:#233a32;
}
.btn-create:hover{filter:brightness(.94)}

.color-preset{
  background:#fff;
  border-color:var(--cc-line);
  color:var(--cc-ink);
}
.color-preset.selected{
  border-color:var(--cc-pink);
  box-shadow:0 0 0 2px rgba(232,95,143,.12);
}
.colors-switch button{color:var(--cc-pink-dark)}
.custom-color-row label{color:var(--cc-muted)}
.custom-color-picker input[data-coloris]{background:#fff;border-color:#dbcbd2}

.illus-search-clear{color:var(--cc-muted)}
.loading-title{color:var(--cc-ink)}
#loading-screen{background:var(--cc-paper)}
.loading-track{background:#f1e7ec}
#loading-bar{background:linear-gradient(90deg,var(--cc-pink),var(--cc-lav))}
#loading-msg{color:var(--cc-muted)}

@media (orientation:landscape) and (max-height:600px) and (max-width:950px) and (hover:none) and (pointer:coarse){
  body:not(.keyboard-open)::before{
    background:var(--cc-paper);
    color:var(--cc-ink);
  }
}


/* === AJUSTEMENT VISUEL : panneau créateur moins blanc === */
.step-card{
  background:
    radial-gradient(circle at 100% 0,rgba(139,120,199,.055),transparent 28%),
    radial-gradient(circle at 0 100%,rgba(232,95,143,.06),transparent 30%),
    linear-gradient(135deg,#fff7fa 0%,#fff6ef 100%);
  border-color:#ead7df;
}

.preview-panel{
  background:linear-gradient(180deg,#fff 0%,#fffafc 100%);
}

.grid-cadres .item,
.grid-illus .item,
.grid-fonts .item,
.color-preset{
  background:rgba(255,255,255,.88);
}

.grid-cadres .item.none{
  background:#fff1f5;
}

.step-body{
  scrollbar-color:#d9bdc9 transparent;
}

.nav-btns{
  border-top:1px solid rgba(218,190,202,.55);
  margin-top:10px;
  padding-top:14px;
}

.btn-next{
  box-shadow:0 7px 18px rgba(232,95,143,.18);
}