/* ==========================================================================
   SANSIL 3D — quote.css
   Parcours de devis : progression, aperçu 3D, paramètres, récapitulatif.
   ========================================================================== */

/* --- Progression ---------------------------------------------------------- */

.stepper {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-6);
  scrollbar-width: thin;
}

.stepper__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: var(--t-xs);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.stepper__num {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.stepper__item[aria-current="step"] { color: var(--c-cyan); border-color: var(--c-cyan-40); }
.stepper__item.is-done { color: var(--c-success); border-color: transparent; background: var(--c-success-12); }

/* --- Étapes --------------------------------------------------------------- */

.step-panel { display: none; }
.step-panel.is-active { display: block; animation: stepIn var(--dur) var(--ease); }

@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .step-panel.is-active { animation: none; }
}

.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
}

/* --- Choix en cartes (profil, matériau, finition) ------------------------- */

.choices {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }

.choice__box {
  display: grid;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.choice input:hover + .choice__box { border-color: var(--c-cyan-40); }
.choice input:checked + .choice__box { border-color: var(--c-cyan); background: var(--c-cyan-08); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--c-cyan); outline-offset: 3px; }
.choice input:disabled + .choice__box { opacity: 0.45; cursor: not-allowed; }

.choice__titre { font-weight: var(--w-semibold); font-size: var(--t-sm); }
.choice__note { font-size: var(--t-xs); color: var(--c-muted); }
.choice__prix { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-cyan); }

/* --- Dépôt de fichier ----------------------------------------------------- */

.file-line {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.file-line__nom { font-weight: var(--w-medium); word-break: break-all; }
.file-line__meta { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-muted); }

/* --- Aperçu 3D ------------------------------------------------------------ */

.viewer {
  position: relative;
  aspect-ratio: 4 / 3;
  background: radial-gradient(70% 70% at 50% 40%, var(--c-viewer-bg), var(--c-bg));
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.viewer canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.viewer canvas:active { cursor: grabbing; }

.viewer__legend {
  position: absolute;
  left: var(--s-3); bottom: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-muted);
  background: var(--c-overlay);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
}

.viewer__legend span { display: inline-flex; align-items: center; gap: 6px; }
.viewer__legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.viewer__etat {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: var(--s-3);
  text-align: center; padding: var(--s-5);
  color: var(--c-muted);
}

/* --- Alertes de faisabilité ---------------------------------------------- */

.alerte {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border-left: 3px solid;
  font-size: var(--t-sm);
}

.alerte--info { background: var(--c-cyan-08); border-color: var(--c-cyan); }
.alerte--avert { background: rgba(255, 176, 32, 0.1); border-color: var(--c-warn); }
.alerte--erreur { background: var(--c-danger-12); border-color: var(--c-danger); }

/* --- Curseur de remplissage ---------------------------------------------- */

.range { width: 100%; accent-color: var(--c-cyan); height: 28px; }

.range-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}

.range-val { font-family: var(--f-mono); color: var(--c-cyan); }

/* --- Récapitulatif -------------------------------------------------------- */

.recap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.recap__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}

.recap__ref { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-muted); }

.recap__rows { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }

.recap__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  font-size: var(--t-sm);
}

.recap__row dt { color: var(--c-muted); }
.recap__row dd { margin: 0; font-family: var(--f-mono); text-align: right; }
.recap__group { border-top: 1px solid var(--c-border); padding-top: var(--s-3); margin-top: var(--s-2); }

.recap__total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
}

.recap__total dt { font-family: var(--f-display); font-size: var(--t-h4); font-weight: var(--w-bold); }
.recap__total dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Panneau d'estimation collant sur grand écran */
.devis-layout { display: grid; gap: var(--s-6); align-items: start; }

@media (min-width: 62rem) {
  .devis-layout { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr); }
  .devis-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* --- Confirmation --------------------------------------------------------- */

.confirm { display: grid; gap: var(--s-5); justify-items: center; text-align: center; padding: var(--s-8) var(--s-4); }

.confirm__icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-success-12);
  color: var(--c-success);
}

/* --- Slicing réel --------------------------------------------------------- */

.slicer {
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.slicer__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: start;
}

.slicer__head h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.slicer__head .hint { max-width: 46ch; }

.slicer__progress { margin-top: var(--s-5); display: grid; gap: var(--s-2); }

.barre {
  height: 6px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.barre__jauge {
  height: 100%;
  width: 0;
  background: var(--grad-accent);
  transition: width var(--dur) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .barre__jauge { transition: none; }
}

/* --- Dépôt de fichier ----------------------------------------------------- */

.depot { display: grid; gap: var(--s-3); }

.depot__tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

.depot__nom { font-weight: var(--w-medium); word-break: break-all; font-size: var(--t-sm); }