@font-face{
  font-family:"Outfit";
  src:url("./assets/outfit.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#f6f8fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#475569;
  --brand:#ffed00;
  --accent:#eaf3ff;
  --danger-bg:#ffecd6;
  --danger-text:#7a3b00;
  --border:#e5e7eb;
  --gap:24px;
  --ok:#075e00;
  --err:#b91c1c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* header */
.hero{padding:24px 16px 0}
.hero-inner{
  max-width:1180px; margin:0 auto; background:var(--brand); color:#000;
  border-radius:16px; padding:24px 32px;
}
.hero h1{margin:0; font-size:28px; font-weight:600;text-transform:uppercase;}

/* layout grille avec zones */
.layout{
  max-width:1180px; margin:24px auto; padding:0 16px;
  display:grid; gap:var(--gap);
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "client article"
    "preview article"
    "cart   cart";
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card h2{margin:0 0 12px; font-size:18px; font-weight:600}

.client{ grid-area: client; }
.preview{ grid-area: preview; }
.article{ grid-area: article; display:flex; flex-direction:column }
.cart{ grid-area: cart; }

/* Grilles internes */
.grid-3{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:12px;
}
.client-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
label{display:flex; flex-direction:column; gap:6px; font-size:14px}
input,select,textarea{
  width:100%; padding:10px 12px; font:inherit;
  border:1px solid var(--border); border-radius:10px; background:#fff; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--accent)}

/* Aide/erreurs */
.hint{
  margin-top:8px; font-size:12px; color:var(--muted);
}
.invalid{ border-color: var(--err) !important; box-shadow:0 0 0 3px rgba(185,28,28,.12) !important; }

/* info tiles */
.info-tile{
  border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#fff; color:var(--muted);
}

/* actions */
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; align-items:center}
button{
  appearance:none; border:1px solid var(--brand); background:var(--brand);
  color:#000; border-radius:10px; padding:10px 16px; font:inherit; cursor:pointer;
}
button:hover{filter:brightness(.95)}
button.ghost{background:#fff; color:#000;border-color:#000;}
button.busy{opacity:.7; cursor:progress;}
.spacer{flex:1}

/* total / badge */
.total-row{margin-top:12px; display:flex; align-items:center; gap:12px}
.total{color:#000; font-weight:700;text-transform:uppercase;}
.badge{background:var(--danger-bg); color:var(--danger-text); border-radius:8px; padding:6px 10px}
.hidden{display:none}

/* canvas */
#previewCanvas{
  width:100%; height:auto; display:block; background:#fff;
  border:1px solid var(--border); border-radius:12px;
  min-height:240px;
}

/* tableau panier */
.cart-table{width:100%; border-collapse:collapse}
.cart-table th, .cart-table td{
  border-bottom:1px solid var(--border); padding:8px 6px; text-align:left; vertical-align:top;
}
.cart-total{margin-top:12px; font-weight:700; color:#000;text-transform:uppercase;}

/* boutons sous le panier */
.cart-actions{
  display:flex; gap:12px; margin-top:16px; flex-wrap:wrap;
}
.cart-actions.centered{
  justify-content:center;
}

/* statut d'envoi */
.send-status{
  margin-top:10px; font-size:14px;
  min-height:1.2em; /* évite le saut de mise en page */
}

/* responsive */
@media (max-width:980px){
  .layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "client"
      "preview"
      "article"
      "cart";
  }
  .grid-3{grid-template-columns:1fr}
  .client-grid{grid-template-columns:1fr}
}