/* =============================================================
   Reset without guilt
   Le contenu passe aux blocs pg-*. Les deux panneaux de l'outil gardent
   un encadrement: l'un porte les commandes, l'autre le plan genere.
   Les classes .reset-intro, .reset-step*, .reset-reminder et
   .reset-cta-btn sont ecrites par tool-guilt-reset.js: elles doivent
   rester declarees ici.
   ============================================================= */

.hidden { display: none !important; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.btn-full { width: 100%; }

.reset-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
}

/* ---------- Commandes ---------- */
.reset-inputs-panel,
.reset-output-panel {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--dop-border-strong);
  border-radius: var(--dop-radius-xl);
}

.reset-field { margin-bottom: 26px; }

.reset-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--dop-font-body);
  font-weight: 700;
  font-size: var(--dop-fs-sm);
  color: var(--dop-ink-1);
}

.pill-row,
.reset-chaos-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
  padding: 9px 16px;
  border: 1px solid var(--dop-border-strong);
  border-radius: var(--dop-radius-pill);
  background: transparent;
  color: var(--dop-ink-2);
  font-family: var(--dop-font-body);
  font-size: var(--dop-fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dop-dur), border-color var(--dop-dur), background var(--dop-dur);
}

.pill:hover { color: var(--dop-ink-1); border-color: var(--dop-ink-3); }

.pill[aria-pressed="true"] {
  background: var(--dop-primary-soft);
  border-color: var(--dop-primary);
  color: var(--dop-ink-1);
  font-weight: 700;
}

/* Les trois niveaux d'energie gardent leur code couleur semantique:
   c'est une information, pas une decoration. */
.energy-low[aria-pressed="true"] { background: rgba(106, 211, 107, .12); border-color: var(--dop-energy-low); }
.energy-mid[aria-pressed="true"] { background: rgba(255, 207, 92, .12); border-color: var(--dop-energy-mid); }
.energy-high[aria-pressed="true"] { background: rgba(239, 90, 165, .12); border-color: var(--dop-energy-high); }

.chaos-btn { padding: 8px 14px; font-size: var(--dop-fs-2xs); }

/* ---------- Le plan genere ---------- */
.reset-intro {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--dop-rule);
  margin-bottom: 26px;
  color: var(--dop-ink-1);
  font-size: var(--dop-fs-body-lg);
  line-height: var(--dop-lh-normal);
}

.reset-steps { display: grid; margin-bottom: 26px; }

/* Une etape = une ligne filetee, comme .pg-list. */
.reset-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--dop-rule);
}

.reset-step:last-child { border-bottom: 1px solid var(--dop-rule); }
.reset-step-emoji { flex-shrink: 0; font-size: 22px; line-height: 1.2; }
.reset-step-body { flex: 1; min-width: 0; }

.reset-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: var(--dop-fs-body);
  letter-spacing: var(--dop-tracking-tight);
}

.reset-step-time {
  font-family: var(--dop-font-body);
  font-weight: 600;
  font-size: var(--dop-fs-2xs);
  color: var(--dop-primary);
  white-space: nowrap;
}

.reset-step-desc { margin-top: 8px; color: var(--dop-ink-2); font-size: var(--dop-fs-sm); line-height: 1.6; }

.reset-reminder {
  margin-bottom: 24px;
  padding-left: 16px;
  border-left: 2px solid var(--dop-primary);
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-body);
  line-height: var(--dop-lh-normal);
}

.reset-cta-btn { width: 100%; }

@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* Cibles tactiles de 44px: on agrandit la pastille, pas l'espace autour. */
.pill { min-height: 44px; min-width: 44px; }