/* Configurateur gâteau — Nuage Gourmand */

#cake-configurator {
  font-family: inherit;
  margin: 2rem 0;
  padding: 1.5rem;
  border: 2px solid #e8c4a0;
  border-radius: 12px;
  background: #fffbf7;
}

/* Header */
.cake-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.cake-icon { font-size: 2.5rem; }
.cake-title { font-size: 1.4rem; font-weight: 700; color: #5a3e28; margin: 0; }
.cake-subtitle { color: #888; font-size: .9rem; margin: 0; }

/* Barre de progression */
.cake-progress {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px; margin-bottom: 1.5rem;
}
.cake-step {
  display: flex; flex-direction: column; align-items: center;
  cursor: default; opacity: .45; font-size: .72rem; text-align: center; min-width: 55px;
}
.cake-step.active, .cake-step.done { opacity: 1; }
.cake-step-num {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #c8a07a;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #c8a07a;
}
.cake-step.active .cake-step-num { background: #c8a07a; color: #fff; }
.cake-step.done .cake-step-num { background: #28a745; border-color: #28a745; color: #fff; }
.cake-step-sep { flex: 1; height: 2px; background: #e0cfc0; min-width: 6px; margin-bottom: 14px; }

/* Panneaux */
.cake-panel { display: none; }
.cake-panel.active { display: block; }
.cake-panel-title { font-size: 1.1rem; font-weight: 700; color: #5a3e28; margin-bottom: .75rem; }
.cake-panel-hint { color: #777; font-size: .88rem; margin-bottom: .75rem; }

/* Grille d'options */
.cake-options-grid {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: .5rem;
}
.cake-option-card {
  cursor: pointer;
  border: 2px solid #e0d0c0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  min-width: 110px;
  text-align: center;
}
.cake-option-card input { display: none; }
.cake-option-card:hover { border-color: #c8a07a; }
.cake-option-card.selected { border-color: #c8a07a; background: #fff5ec; box-shadow: 0 0 0 3px rgba(200,160,122,.25); }
.cake-option-card.cake-blocked { opacity: .35; cursor: not-allowed; }
.cake-card-name { font-weight: 600; font-size: .88rem; }
.cake-card-price { font-size: .82rem; color: #c8a07a; margin-top: 2px; }

/* Checkbox cards */
.cake-checkbox-card input[type="checkbox"] { display: none; }
.cake-checkbox-card.selected { border-color: #c8a07a; background: #fff5ec; }

/* Couleurs */
.cake-colors-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: .5rem;
}
.cake-color-card {
  cursor: pointer; border: 2px solid transparent; border-radius: 6px; padding: 3px;
}
.cake-color-card input { display: none; }
.cake-color-card.selected { border-color: #5a3e28; }
.cake-color-swatch {
  display: block; width: 36px; height: 36px; border-radius: 4px;
  border: 1px solid #ccc; font-size: 0; overflow: hidden;
}
.cake-color-card:first-child .cake-color-swatch { font-size: .6rem; width: 50px; text-align: center; line-height: 36px; color: #888; }

/* Barre navigation */
.cake-nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e0d0c0;
  flex-wrap: wrap; gap: 8px;
}
.cake-price-bar { font-size: 1.1rem; }
.cake-price-label { color: #666; }
.cake-price-total { font-weight: 700; color: #c8a07a; font-size: 1.3rem; }
.cake-nav-btns { display: flex; gap: 8px; }
.cake-btn-prev { background: #f8f4f0; color: #5a3e28; border: 1px solid #ccc; }
.cake-btn-next, .cake-btn-add {
  background: #c8a07a; color: #fff; border: none;
  padding: 8px 20px; border-radius: 6px; font-weight: 600;
}
.cake-btn-next:hover, .cake-btn-add:hover { background: #a07a52; }
.cake-btn-add { background: #5a3e28; }

/* Résumé */
#cake-summary { margin-top: 1rem; padding: 1rem; background: #fff5ec; border-radius: 8px; }
.cake-summary-title { font-size: 1rem; font-weight: 700; color: #5a3e28; }
#cake-summary-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .9rem; }
#cake-summary-list dt { font-weight: 600; color: #777; }
#cake-summary-list dd { color: #333; margin: 0; }

/* Feedback */
.cake-feedback { margin-top: 1rem; padding: .75rem 1rem; border-radius: 6px; font-weight: 600; }
.cake-feedback-ok { background: #d4edda; color: #155724; }
.cake-feedback-err { background: #f8d7da; color: #721c24; }

/* Saveurs dynamiques */
.cake-flavor-row .cake-options-grid { flex-wrap: wrap; }

@media (max-width: 576px) {
  .cake-progress { display: none; }
  .cake-options-grid { gap: 6px; }
  .cake-option-card { min-width: 90px; padding: 8px 10px; }
}