/* ============================================================
   RECIPE SCALER — Recettes de mère en fils
   Version : 1.0
   Auteur   : à coller dans votre thème ou plugin
   ============================================================ */

/* ---------- Variables de thème ---------- */
.recipe-scaler {
  --rs-cream:       #FDF6EE;
  --rs-cream-dark:  #F5EBD9;
  --rs-terracotta:  #C4673A;
  --rs-terra-light: #EDD9CB;
  --rs-terra-dark:  #9A4E2A;
  --rs-brown:       #3D2B1F;
  --rs-brown-muted: #7A5C4A;
  --rs-green:       #4A7C59;
  --rs-border:      #E8D5C4;
  --rs-white:       #FFFFFF;
  --rs-shadow:      0 2px 12px rgba(61,43,31,.08);
  --rs-radius:      12px;
  --rs-radius-sm:   8px;
  --rs-font-body:   'Lato', 'Helvetica Neue', Arial, sans-serif;
  --rs-font-display:'Playfair Display', Georgia, serif;
  --rs-transition:  all 0.2s ease;
}

/* ---------- Conteneur principal ---------- */
.recipe-scaler {
  font-family:  var(--rs-font-body);
  background:   var(--rs-cream);
  border:       1px solid var(--rs-border);
  border-radius: 16px;
  padding:      1.75rem;
  max-width:    580px;
  margin:       1.5rem 0;
  box-shadow:   var(--rs-shadow);
}

/* ---------- En-tête de la recette ---------- */
.rs-header {
  display:        flex;
  align-items:    center;
  gap:            12px;
  margin-bottom:  1.25rem;
  padding-bottom: 1rem;
  border-bottom:  1.5px solid var(--rs-border);
}

.rs-header-icon {
  font-size: 30px;
  line-height: 1;
}

.rs-header-title {
  font-family:  var(--rs-font-display);
  font-size:    1.15rem;
  color:        var(--rs-brown);
  font-weight:  600;
  margin:       0 0 2px;
}

.rs-header-meta {
  font-size:      11px;
  color:          var(--rs-brown-muted);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  margin:         0;
}

/* ---------- Panneau de contrôle des portions ---------- */
.rs-control-panel {
  background:    var(--rs-white);
  border:        1px solid var(--rs-border);
  border-radius: var(--rs-radius);
  padding:       1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.rs-label {
  display:        block;
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color:          var(--rs-brown-muted);
  font-weight:    700;
  margin-bottom:  10px;
}

.rs-controls-row {
  display:     flex;
  align-items: center;
  gap:         0;
}

/* Boutons + / - */
.rs-btn {
  width:         42px;
  height:        42px;
  border-radius: 50%;
  border:        1.5px solid var(--rs-terracotta);
  background:    var(--rs-white);
  color:         var(--rs-terracotta);
  font-size:     22px;
  font-weight:   300;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    var(--rs-transition);
  font-family:   var(--rs-font-body);
  line-height:   1;
  padding:       0;
  flex-shrink:   0;
}

.rs-btn:hover  { background: var(--rs-terracotta); color: var(--rs-white); }
.rs-btn:active { transform: scale(0.94); }
.rs-btn:focus-visible {
  outline: 2px solid var(--rs-terracotta);
  outline-offset: 3px;
}

.rs-btn:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}

/* Affichage central */
.rs-portions-display {
  flex:        1;
  text-align:  center;
  padding:     0 8px;
}

.rs-portions-number {
  font-family:  var(--rs-font-display);
  font-size:    2.2rem;
  font-weight:  600;
  color:        var(--rs-brown);
  display:      block;
  line-height:  1;
  transition:   var(--rs-transition);
}

.rs-portions-text {
  font-size:      10px;
  color:          var(--rs-brown-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top:     3px;
}

/* Badge ×ratio */
.rs-ratio-badge {
  font-size:     11px;
  color:         var(--rs-terracotta);
  background:    var(--rs-terra-light);
  padding:       5px 11px;
  border-radius: 20px;
  font-weight:   700;
  letter-spacing: 0.5px;
  white-space:   nowrap;
  flex-shrink:   0;
}

/* Raccourcis rapides */
.rs-quick-btns {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.rs-quick-btn {
  font-size:     11px;
  padding:       5px 13px;
  border-radius: 20px;
  border:        1px solid var(--rs-border);
  background:    var(--rs-white);
  color:         var(--rs-brown-muted);
  cursor:        pointer;
  font-family:   var(--rs-font-body);
  transition:    var(--rs-transition);
}

.rs-quick-btn:hover         { border-color: var(--rs-terracotta); color: var(--rs-terracotta); }
.rs-quick-btn.rs-active     { background: var(--rs-terracotta); color: var(--rs-white); border-color: var(--rs-terracotta); }
.rs-quick-btn:focus-visible { outline: 2px solid var(--rs-terracotta); outline-offset: 2px; }

/* ---------- Section ingrédients ---------- */
.rs-ingredients-section { margin-bottom: 0.5rem; }

.rs-section-title {
  font-family:   var(--rs-font-display);
  font-style:    italic;
  font-size:     0.95rem;
  color:         var(--rs-brown);
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 10px;
}

.rs-section-title::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--rs-border);
}

.rs-ingredients-list {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.rs-ingredient-item {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 13px;
  background:    var(--rs-white);
  border-radius: var(--rs-radius-sm);
  border:        1px solid var(--rs-border);
  font-size:     0.9rem;
  color:         var(--rs-brown);
  transition:    border-color 0.2s;
}

.rs-ingredient-item:hover { border-color: var(--rs-terracotta); }

.rs-bullet {
  width:      7px;
  height:     7px;
  border-radius: 50%;
  background: var(--rs-terracotta);
  flex-shrink: 0;
}

/* Quantité — cœur de la mise à l'échelle */
.rs-ingredient-item .qty {
  font-weight: 700;
  color:       var(--rs-terra-dark);
  min-width:   42px;
  font-size:   1rem;
  transition:  color 0.25s, transform 0.15s;
  flex-shrink: 0;
}

/* Animation flash lors d'une mise à jour */
.rs-ingredient-item .qty.qty-updated {
  color:     var(--rs-green);
  transform: scale(1.08);
}

.rs-unit {
  color:      var(--rs-brown-muted);
  font-size:  0.82rem;
  flex-shrink: 0;
}

.rs-name {
  flex: 1;
}

/* Étiquette "au goût" */
.rs-note-tag {
  font-size:     10px;
  background:    var(--rs-cream-dark);
  color:         var(--rs-brown-muted);
  padding:       3px 8px;
  border-radius: 10px;
  border:        1px solid var(--rs-border);
  font-style:    italic;
  flex-shrink:   0;
}

/* ---------- Texte de recette (mise à l'échelle optionnelle) ---------- */
.rs-recipe-text .qty {
  font-weight:   700;
  color:         var(--rs-terra-dark);
  transition:    color 0.25s;
}

.rs-recipe-text .qty.qty-updated {
  color: var(--rs-green);
}

/* ---------- Responsive mobile ---------- */
@media (max-width: 480px) {
  .recipe-scaler {
    padding:       1.25rem;
    border-radius: 12px;
    margin:        1rem 0;
  }

  .rs-btn {
    width:  38px;
    height: 38px;
    font-size: 20px;
  }

  .rs-portions-number { font-size: 1.8rem; }

  .rs-quick-btns { gap: 5px; }

  .rs-quick-btn { padding: 4px 10px; font-size: 10px; }

  .rs-sugar-btns { gap: 5px; }

  .rs-sugar-btn { padding: 5px 10px; font-size: 10px; }
}

/* ============================================================
   [v1.1] RÉDUCTEUR DE SUCRE
   Ces règles s'ajoutent au CSS existant sans rien modifier.
   ============================================================ */

/* ---------- Variables sucre ---------- */
.recipe-scaler {
  --rs-sugar:        #B07D2A;
  --rs-sugar-light:  #FFF8EC;
  --rs-sugar-border: #F0D9A0;
  --rs-sugar-dark:   #8A5F1A;
}

/* ---------- Panneau sucre ---------- */
.rs-sugar-panel {
  background:    var(--rs-sugar-light);
  border:        1px solid var(--rs-sugar-border);
  border-radius: var(--rs-radius);
  padding:       1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.rs-sugar-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  margin-bottom:   10px;
  flex-wrap:       wrap;
}

/* Libellé "🍬 Niveau de sucre" */
.rs-sugar-label {
  display:        block;
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color:          var(--rs-sugar);
  font-weight:    700;
}

/* Notice dynamique "Recette allégée…" */
.rs-sugar-notice {
  font-size:   11px;
  color:       var(--rs-sugar-dark);
  font-style:  italic;
  animation:   rs-fadein 0.3s ease;
}

@keyframes rs-fadein {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Boutons de niveau de sucre ---------- */
.rs-sugar-btns {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
}

.rs-sugar-btn {
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-size:     11px;
  padding:       6px 13px;
  border-radius: 20px;
  border:        1px solid var(--rs-sugar-border);
  background:    var(--rs-white);
  color:         var(--rs-brown-muted);
  cursor:        pointer;
  font-family:   var(--rs-font-body);
  transition:    var(--rs-transition);
}

.rs-sugar-btn:hover {
  border-color: var(--rs-sugar);
  color:        var(--rs-sugar);
}

.rs-sugar-btn.rs-sugar-active {
  background:   var(--rs-sugar);
  color:        var(--rs-white);
  border-color: var(--rs-sugar);
}

.rs-sugar-btn:focus-visible {
  outline:        2px solid var(--rs-sugar);
  outline-offset: 2px;
}

/* Indicateur coloré dans le bouton */
.rs-sugar-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}

/* ---------- Badge 🍬 sur les ingrédients sucrés ---------- */
/*
 * Ajouté automatiquement par _autoMarkSugarIngredients()
 * ou manuellement via .rs-sugar-tag en HTML.
 */
.rs-sugar-tag {
  font-size:     10px;
  background:    var(--rs-sugar-light);
  color:         var(--rs-sugar);
  padding:       2px 7px;
  border-radius: 10px;
  border:        1px solid var(--rs-sugar-border);
  flex-shrink:   0;
  cursor:        default;
}

/* Légère surbrillance de la rangée pour les ingrédients sucrés */
.rs-ingredient-item:has(.rs-sugar-tag) {
  border-color: var(--rs-sugar-border);
}

/* Animation spécifique pour les quantités sucrées mises à jour */
.rs-ingredient-item .qty[data-sugar="true"].qty-updated {
  color: var(--rs-sugar-dark);
}