/* Tableau Trio — configurateur */
.tt-configurator{
  --tt-accent:#b07d3a;
  --tt-line:#e3ded4;
  --tt-ink:#2c2620;
  --tt-muted:#6d655b;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);
  gap:26px;
  color:var(--tt-ink);
  font-size:15px;
  line-height:1.5;
}
@media (max-width:820px){ .tt-configurator{ grid-template-columns:1fr; } }

/* Rien ne doit pouvoir élargir la grille au-delà de son conteneur :
   sans cela, un enfant à largeur intrinsèque déborde de l'écran. */
.tt-configurator{ max-width:100%; }
.tt-configurator > *{ min-width:0; }

.tt-stage{ position:relative; min-width:0; max-width:100%; }
.tt-canvas{
  display:block; width:100%; max-width:100%; border-radius:10px;
  background:#efece6; cursor:pointer;
  touch-action:auto;                 /* la page défile tant que l'aperçu n'est pas activé */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.tt-configurator.tt-active .tt-canvas{ touch-action:none; }
.tt-configurator.tt-has-image.tt-active .tt-canvas{ cursor:grab; }
.tt-canvas.tt-grabbing{ cursor:grabbing; }
.tt-canvas.tt-drop{ outline:2px dashed var(--tt-accent); outline-offset:-6px; }

.tt-panel{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.tt-block{ border:1px solid var(--tt-line); border-radius:10px; padding:14px 15px; background:#fff; min-width:0; }
.tt-block > h4{ margin:0 0 10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--tt-muted); font-weight:700; }

/* choix de composition : 1 photo / 3 photos */
.tt-modes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tt-mode{
  display:flex; flex-direction:column; gap:2px; text-align:left;
  padding:10px 11px; border:1px solid var(--tt-line); border-radius:8px;
  background:#fbfaf8; cursor:pointer; color:var(--tt-ink); font:inherit;
}
.tt-mode strong{ font-size:13.5px; }
.tt-mode span{ font-size:11.5px; color:var(--tt-muted); line-height:1.35; }
.tt-mode:hover{ border-color:var(--tt-accent); }
.tt-mode.is-on{ border-color:var(--tt-accent); background:#fdf7ee; box-shadow:inset 0 0 0 1px var(--tt-accent); }

/* liste des photos : vignette, nom du fichier, changer / retirer.
   Sert aussi de sélecteur de pièce en mode 3 photos. */
.tt-photos{ display:flex; flex-direction:column; gap:6px; margin-bottom:11px; }
.tt-photo{
  display:flex; align-items:center; gap:9px; padding:6px 7px;
  border:1px solid var(--tt-line); border-radius:8px; background:#fbfaf8; cursor:pointer;
}
.tt-photo:hover{ border-color:var(--tt-accent); }
.tt-photo.is-on{ border-color:var(--tt-accent); background:#fdf7ee; }
.tt-thumb{
  flex:0 0 auto; width:42px; height:42px; border-radius:6px; overflow:hidden;
  background:#efece6; border:1px solid var(--tt-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--tt-muted); font-size:19px; line-height:1;
}
.tt-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tt-photo-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tt-photo-txt strong{ font-size:13px; }
.tt-photo-txt em{
  font-style:normal; font-size:11.5px; color:var(--tt-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tt-photo-acts{ flex:0 0 auto; display:flex; gap:5px; }
.tt-mini{
  padding:5px 8px; border:1px solid var(--tt-line); border-radius:6px;
  background:#fff; cursor:pointer; font-size:11.5px; color:var(--tt-ink);
  white-space:nowrap;
}
.tt-mini:hover{ border-color:var(--tt-accent); color:var(--tt-accent); }
.tt-mini-del:hover{ border-color:#b34a4a; color:#b34a4a; }

.tt-upload{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:13px 16px; border-radius:8px; cursor:pointer;
  background:var(--tt-accent); color:#fff; font-weight:600; border:0;
  transition:filter .15s ease;
}
.tt-upload:hover{ filter:brightness(1.07); }
.tt-file{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.tt-row{ display:flex; align-items:center; gap:10px; margin:9px 0; }
.tt-row label{ flex:0 0 62px; font-size:13px; color:var(--tt-muted); }
.tt-row input[type=range]{ flex:1; min-width:0; accent-color:var(--tt-accent); }
.tt-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tt-btn{
  flex:1 1 auto; padding:8px 10px; border:1px solid var(--tt-line); background:#fbfaf8;
  border-radius:7px; cursor:pointer; font-size:13px; color:var(--tt-ink);
  white-space:nowrap;
}
.tt-btn:hover{ border-color:var(--tt-accent); color:var(--tt-accent); }

.tt-size{ width:100%; padding:10px; border:1px solid var(--tt-line); border-radius:7px; background:#fff; font-size:15px; }
.tt-dims{ display:block; margin-top:9px; font-weight:600; }
.tt-piece-dims{ display:block; margin-top:3px; font-size:12.5px; color:var(--tt-muted); }
.tt-price{ display:block; margin-top:8px; font-size:20px; font-weight:700; color:var(--tt-accent); }

.tt-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tt-muted); margin-top:10px; }

.tt-notice{
  border-radius:7px; padding:10px 12px; font-size:13.5px; border:1px solid transparent;
  overflow-wrap:anywhere;
}
.tt-notice.tt-ok{ background:#eef7ee; border-color:#c9e3c6; color:#2c5c2c; }
.tt-notice.tt-warn{ background:#fdf6e6; border-color:#efdcae; color:#7a5a12; }
.tt-notice.tt-err{ background:#fdeeee; border-color:#f0c9c9; color:#8a2b2b; }
.tt-hidden{ display:none !important; }

.tt-submit{
  width:100%; padding:15px; border:0; border-radius:8px; cursor:pointer;
  background:var(--tt-ink); color:#fff; font-size:16px; font-weight:700;
}
.tt-submit:disabled{ opacity:.42; cursor:not-allowed; }
.tt-download{
  width:100%; margin-top:9px; padding:12px; border:1px solid var(--tt-line);
  border-radius:8px; background:#fff; cursor:pointer;
  font-size:14.5px; font-weight:600; color:var(--tt-ink);
}
.tt-download:hover:not(:disabled){ border-color:var(--tt-accent); color:var(--tt-accent); }
.tt-download:disabled{ opacity:.42; cursor:not-allowed; }
.tt-qtyrow{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.tt-qty{ width:74px; padding:9px; border:1px solid var(--tt-line); border-radius:7px; }

.tt-progress{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  background:rgba(255,255,255,.92); border-radius:10px; z-index:5;
}
.tt-progress-label{ font-weight:600; }
.tt-progress-bar{ width:min(320px,70%); height:7px; border-radius:99px; background:#e6e1d8; overflow:hidden; }
.tt-progress-bar > span{ display:block; height:100%; width:0; background:var(--tt-accent); transition:width .3s ease; }

.tt-help{ font-size:12.5px; color:var(--tt-muted); margin:8px 0 0; }
.tt-cart-form{ display:none; }

/* --- téléphones : on empile ce qui ne tient plus sur une ligne --- */
@media (max-width:520px){
  .tt-configurator{ gap:18px; font-size:14.5px; }
  .tt-modes{ grid-template-columns:1fr; }
  .tt-photo{ flex-wrap:wrap; row-gap:7px; }
  .tt-photo-txt{ flex:1 1 130px; }
  .tt-photo-acts{ flex:1 0 auto; justify-content:flex-end; }
  .tt-mini{ padding:7px 12px; font-size:12.5px; }
  .tt-row label{ flex:0 0 54px; font-size:12.5px; }
  .tt-btn{ flex:1 1 44%; }
  .tt-block{ padding:12px 12px; }
  .tt-help{ font-size:12px; }
}