/* ============================================================
   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); }

/* Garde-fou: pas de scroll horizontal parasite sur mobile */
html, body { overflow-x: hidden; }

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

/* ── Finition visuelle premium (pages publiques) ─────────────── */
.topbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px) saturate(140%);
}

.topbar-nav a {
  position: relative;
}

.topbar-nav a::after {
  content: "";
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-normal);
}

.topbar-nav a:hover::after,
.topbar-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.hero {
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  top: -180px;
  right: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150,199,150,.24) 0%, rgba(150,199,150,0) 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  max-width: 760px;
}

.hero-actions .btn {
  box-shadow: var(--shadow-sm);
}

.section {
  position: relative;
}

.section-head {
  display: grid;
  gap: var(--sp-2);
}

.section-title {
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: clamp(.98rem, 1.9vw, 1.06rem);
}

.card {
  border: 1px solid rgba(19,50,51,.08);
}

.card-hover:not(.card-service) {
  transition: box-shadow var(--t-normal), transform var(--t-normal), border-color var(--t-fast);
}

.card-hover:not(.card-service):hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(150,199,150,.7);
}

.services-grid .card-service {
  min-height: 100%;
}

.section-cta {
  margin-top: var(--sp-10);
}

.footer-address {
  font-style: normal;
}

/* ── Harmonisation premium des pages internes ────────────────── */
body.front-site:not(.front-home) {
  background: linear-gradient(180deg, #f3f6f5 0, #f6f8f7 180px, var(--color-bg) 620px);
}

body.front-site:not(.front-home) .hero {
  border-bottom: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}

body.front-site:not(.front-home) .hero-content {
  max-width: 820px;
}

body.front-site:not(.front-home) .hero-desc {
  max-width: 720px;
}

body.front-site:not(.front-home) .section-head {
  margin-bottom: var(--sp-7);
}

body.front-site:not(.front-home) .card {
  border: 1px solid rgba(19,50,51,.08);
}

body.front-site:not(.front-home) .card.card-body {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,251,249,.98));
}

body.front-site:not(.front-home) .faq-list.card {
  box-shadow: var(--shadow-md);
}

/* Form pages */
.form-note {
  margin-top: var(--sp-2);
  color: var(--gray-500);
}

.form-alert-wrap {
  margin-top: var(--sp-4);
}

.form-stack {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}

.form-grid {
  gap: var(--sp-4);
}

.form-alert-card {
  margin-bottom: var(--sp-4);
  border-left: 4px solid var(--color-accent);
}

.form-alert-card p {
  margin: 0;
  color: var(--color-accent-dark);
  font-weight: var(--fw-semibold);
}

.form-alert-card.is-error {
  border-left-color: var(--color-danger);
}

.form-alert-card.is-error p {
  margin-bottom: var(--sp-2);
  color: var(--color-danger-dark);
}

.form-alert-list {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--color-danger-dark);
  display: grid;
  gap: 6px;
}

.contact-details {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}

/* Detail pages */
.detail-card {
  position: relative;
  overflow: hidden;
}

.detail-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-secondary), var(--color-accent));
}

.content-text {
  margin-top: var(--sp-3);
  color: var(--gray-600);
  line-height: var(--lh-relaxed);
}

.content-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
  color: var(--gray-600);
}

.content-list a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Legal, privacy, confirmation */
.policy-card {
  display: grid;
  gap: var(--sp-4);
}

.policy-card h3 {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.policy-card p {
  color: var(--gray-600);
}

.confirm-card {
  text-align: center;
  display: grid;
  gap: var(--sp-4);
}

.confirm-icon {
  margin-inline: auto;
}

.confirm-title {
  font-size: var(--text-h2);
}

.confirm-actions {
  flex-wrap: wrap;
}

/* Catalogue cards */
.catalog-page .card-service .btn {
  margin-top: auto;
}

/* Public page finishers */
.pro-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.pro-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.pro-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(19,50,51,.08);
}

.pro-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150,199,150,.22), rgba(150,199,150,0));
  pointer-events: none;
}

.pro-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary-light), rgba(150,199,150,.26));
  border: 1px solid rgba(19,50,51,.12);
  margin-bottom: var(--sp-3);
}

.pro-card p {
  color: var(--gray-600);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

.pro-grid-3 > *,
.pro-grid-2 > *,
.metric-grid > * {
  min-width: 0;
}

.metric-card {
  text-align: center;
  border: 1px solid rgba(19,50,51,.08);
}

.metric-value {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.metric-label {
  margin-top: var(--sp-1);
  font-size: var(--text-small);
  color: var(--gray-600);
}

.pro-list {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

.pro-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--gray-600);
}

.pro-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-dark);
}

.service-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.service-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: var(--fw-semibold);
  color: var(--gray-700);
  background: rgba(247,247,245,.95);
  border: 1px solid var(--gray-200);
}

.contact-meta {
  display: grid;
  gap: var(--sp-3);
}

.contact-meta-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  background: rgba(247,247,245,.82);
  border: 1px solid rgba(19,50,51,.08);
}

.contact-meta-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.contact-meta-item p {
  margin: 0;
  color: var(--gray-600);
  font-size: var(--text-small);
}

.contact-meta-item a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-meta-item strong {
  color: var(--color-primary);
}

.page-cta-inline {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ── Home: Expertises & Realisations ─────────────────────────── */
.expertise-intro {
  margin-bottom: var(--sp-6);
  border-left: 4px solid var(--color-secondary);
  background: linear-gradient(120deg, rgba(150,199,150,.12), rgba(232,227,218,.35));
}

.expertise-intro p + p {
  margin-top: var(--sp-4);
}

.expertise-group-head {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-5);
}

.expertise-group-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.expertises-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.expertise-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(19,50,51,.08);
}

.expertise-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
}

.expertise-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150,199,150,.24), rgba(150,199,150,0));
  opacity: 0;
  transition: opacity var(--t-normal), transform var(--t-normal);
  transform: scale(.8);
  pointer-events: none;
}

.expertise-card-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.expertise-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.18rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary-light), rgba(150,199,150,.28));
  border: 1px solid rgba(19,50,51,.12);
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}

.expertise-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  background: rgba(247,247,245,.92);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.expertise-card-desc {
  color: var(--gray-600);
  font-size: .96rem;
  line-height: 1.72;
}

.expertises-page .expertise-card {
  transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-fast);
  will-change: transform;
}

.expertises-page .expertise-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(84,120,103,.36);
}

.expertises-page .expertise-card:hover::after {
  opacity: 1;
  transform: scale(1);
}

.expertises-page .expertise-card:hover .expertise-icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 18px rgba(15,43,45,.15);
}

.expertises-page .expertise-card:hover .expertise-badge {
  border-color: rgba(84,120,103,.45);
  color: var(--color-primary);
  background: rgba(232,227,218,.78);
}

.expertises-page .expertise-icon {
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.expertises-page .expertise-group-title {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

.expertises-page .expertise-group-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
}

.expertise-conclusion {
  margin-top: var(--sp-6);
  border-top: 4px solid var(--color-accent-light);
}

.expertise-conclusion-actions {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@keyframes wpFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-content > * {
    opacity: 0;
    animation: wpFadeUp .55s cubic-bezier(.22,.61,.36,1) both;
  }

  .hero-content > *:nth-child(1) { animation-delay: .04s; }
  .hero-content > *:nth-child(2) { animation-delay: .1s; }
  .hero-content > *:nth-child(3) { animation-delay: .18s; }
  .hero-content > *:nth-child(4) { animation-delay: .26s; }

  .section-head,
  .cta-banner {
    animation: wpFadeUp .6s ease both;
  }

  @keyframes expertiseReveal {
    from {
      opacity: 0;
      transform: translateY(14px) scale(.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes expertiseIconBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }

  .expertises-page .expertises-grid .expertise-card {
    opacity: 0;
    animation: expertiseReveal .58s cubic-bezier(.22,.61,.36,1) both;
  }

  .expertises-page .expertises-grid .expertise-card:nth-child(1) { animation-delay: .04s; }
  .expertises-page .expertises-grid .expertise-card:nth-child(2) { animation-delay: .10s; }
  .expertises-page .expertises-grid .expertise-card:nth-child(3) { animation-delay: .16s; }
  .expertises-page .expertises-grid .expertise-card:nth-child(4) { animation-delay: .22s; }
  .expertises-page .expertises-grid .expertise-card:nth-child(5) { animation-delay: .28s; }
  .expertises-page .expertises-grid .expertise-card:nth-child(6) { animation-delay: .34s; }

  .expertises-page .expertise-card .expertise-icon {
    animation: expertiseIconBob 5s ease-in-out infinite;
  }

  body.front-site:not(.front-home) .section > .container {
    opacity: 0;
    animation: wpFadeUp .54s ease both;
  }

  body.front-site:not(.front-home) .section:nth-of-type(2) > .container { animation-delay: .04s; }
  body.front-site:not(.front-home) .section:nth-of-type(3) > .container { animation-delay: .1s; }
  body.front-site:not(.front-home) .section:nth-of-type(4) > .container { animation-delay: .16s; }
}

/* ── 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); }
  .expertises-grid { grid-template-columns: 1fr; }
  .expertise-group-head { margin-top: var(--sp-6); }
  .detail-card::before { width: 4px; }
  .pro-grid-3,
  .pro-grid-2,
  .metric-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .pro-grid-3,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@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); }
  .hero::after { width: 300px; top: -120px; right: -120px; }

  /* 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;
}