/* ============================================================
   WEB PUBLIC — Styles globaux spécifiques à l'interface
   Import : après shared/css/tokens + base + components + layout
   ============================================================ */

/* ── Badges de statut de commande ───────────────────────────── */
[data-status="draft"]                { background: var(--gray-100); color: var(--gray-600); }
[data-status="pending_confirmation"] { background: var(--status-pending-bg); color: var(--status-pending-text); }
[data-status="confirmed"]            { background: var(--status-progress-bg); color: var(--status-progress-text); }
[data-status="picked_up"],
[data-status="sorting"],
[data-status="washing"],
[data-status="drying"],
[data-status="ironing"],
[data-status="quality_check"]        { background: var(--status-progress-bg); color: var(--status-progress-text); }
[data-status="ready"]                { background: var(--status-success-bg); color: var(--status-success-text); }
[data-status="out_for_delivery"]     { background: var(--status-info-bg); color: var(--status-info-text); }
[data-status="delivered"]            { background: var(--status-success-bg); color: var(--status-success-text); }
[data-status="cancelled"]            { background: var(--status-error-bg); color: var(--status-error-text); }
[data-status="disputed"]             { background: var(--status-error-bg); color: var(--status-error-text); }

/* ── Typographie page ────────────────────────────────────────── */
.page-hero-title  { font-size: clamp(1.875rem, 5vw, 3rem); }
.page-title       { font-size: var(--text-h2); }

/* ── Grilles de services / produits ──────────────────────────── */
.services-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-6); }
.products-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-5); }

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
}

/* ── Étapes visuelles (parcours en N étapes) ─────────────────── */
.steps-row   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.step        { text-align: center; }
.step-number {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-h4);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-4);
}
.step h3 { font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.step p  { font-size: var(--text-small); color: var(--gray-500); line-height: var(--lh-relaxed); }

@media (max-width: 768px) {
  .steps-row { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ── Avantages ───────────────────────────────────────────────── */
.avantage {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.avantage-icon {
  width: 52px; height: 52px;
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.avantage h4 { font-family: var(--font-heading); font-weight: var(--fw-semibold); margin-bottom: 4px; }
.avantage p  { font-size: var(--text-small); color: var(--gray-500); line-height: var(--lh-relaxed); }

/* ── Témoignages ─────────────────────────────────────────────── */
.temoignage-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.stars       { color: #f59e0b; font-size: 1.1rem; margin-bottom: var(--sp-3); }
.quote       { font-size: var(--text-small); font-style: italic; color: var(--gray-700); line-height: var(--lh-relaxed); margin-bottom: var(--sp-4); }
.quote-author { display: flex; align-items: center; gap: var(--sp-3); }
.quote-name  { font-weight: var(--fw-semibold); font-size: var(--text-small); }
.quote-since { font-size: var(--text-caption); color: var(--gray-400); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-item        { border-bottom: 1px solid var(--gray-200); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  cursor: pointer;
  font-weight: var(--fw-medium);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--color-text);
  gap: var(--sp-4);
  transition: color var(--t-fast);
}
.faq-question:hover { color: var(--color-primary); }
.faq-icon { font-size: 1.2rem; transition: transform var(--t-fast); flex-shrink: 0; color: var(--gray-400); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); color: var(--color-primary); }
.faq-answer {
  font-size: var(--text-small);
  color: var(--gray-600);
  line-height: var(--lh-relaxed);
  padding-bottom: var(--sp-4);
  display: none;
}
.faq-item.is-open .faq-answer { display: block; }

/* ── Bandeau CTA ─────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.cta-banner h2 { font-size: var(--text-h3); margin-bottom: var(--sp-2); color: var(--color-white); }
.cta-banner p  { opacity: .85; }

/* ── Barre de suivi rapide ───────────────────────────────────── */
.quick-track {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  max-width: 600px;
}
.quick-track label { font-weight: var(--fw-semibold); font-size: var(--text-small); white-space: nowrap; color: var(--color-text); }
.quick-track .form-input { flex: 1; min-width: 180px; }

/* ── Sections alternées ──────────────────────────────────────── */
.section-alt { background: var(--gray-100); }
.section-dark { background: var(--color-primary); color: var(--color-white); }
.section-dark .section-title    { color: var(--color-white); }
.section-dark .section-subtitle { color: rgba(255,255,255,.7); }
.section-dark .step h3 { color: var(--color-white); }
.section-dark .step p  { color: rgba(255,255,255,.65); }
.section-dark .step-number {
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  color: var(--color-white);
}

/* ── Responsive global WP ────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-banner { flex-direction: column; text-align: center; }
  .quick-track { padding: var(--sp-4) var(--sp-5); }
}

@media (max-width: 480px) {
  /* Page hero commun à WP-02 → WP-13 */
  .page-hero { padding: var(--sp-8) 0 var(--sp-6); }
  .page-hero-title { font-size: clamp(1.5rem, 8vw, 2rem); }

  /* Suivi rapide */
  .quick-track { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .quick-track label { white-space: normal; }
  .quick-track .form-input { min-width: 0; width: 100%; }

  /* Témoignages */
  .temoignage-card { padding: var(--sp-4); }
}

/* ── Notification dot ────────────────────────────────────────── */
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  position: absolute;
  top: 6px; right: 6px;
}