@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg: #141210;
  --ink: #141210;
  --paper: #f3ecdd;
  --surface: #1e1a15;
  --surface-soft: #191510;
  --surface-muted: #26221b;
  --text: #f2ece0;
  --text-soft: #b7ac97;
  --text-faint: #9c9182; /* éclairci (audit a11y 2026-07-08) : contraste AA sur --bg */
  --line: rgba(233, 216, 160, 0.14);
  --line-strong: rgba(233, 216, 160, 0.30);
  --accent: #e8d8a0;
  --accent-strong: #c9a227;
  --accent-deep: #e8d8a0;
  --gold: #c9a227;
  --gold-soft: #e8d8a0;
  --success: #7fae83;
  --danger: #d08a84;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, 'Jost'), sans-serif;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
/* Police des BOUTONS / NAV / chrome UI (3e emplacement --font-ui) — appliquée à
   TOUTES les pages publiques (accueil, réservation, boutique, contact, espace client).
   Repli var(--font-ui, var(--font-body, 'Jost')) = strictement rétrocompatible : sans
   police UI choisie, boutons et nav gardent la police de corps actuelle. Sélecteurs de
   classe (spécificité > `button`) → gagnent sur le reset `font: inherit` ci-dessus. */
.main-nav a,
.reserve-btn,
.btn-light, .btn-ghost, .btn-accent, .btn-soft, .btn-outline,
button {
  font-family: var(--font-ui, var(--font-body, 'Jost')), sans-serif;
}

.container {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.header-inner {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
}

.brand {
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.02em;
}
/* Logo du salon (rempli par tenant-theme.js quand branding.logoUrl existe). */
.brand-logo {
  height: 40px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 8px;
}
.brand small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body, 'Jost'), sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.main-nav a {
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}
.main-nav a:hover::after,
.main-nav a.active::after {
  transform: scaleX(1);
}
/* Navigation clavier : le soulignement animé ne suffit pas comme indicateur
   de focus — on ajoute un contour explicite (a11y, polish 2026-07-08). */
.main-nav a:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 4px;
  border-radius: 2px;
}
.main-nav a:focus-visible::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reserve-btn {
  padding: 11px 24px;
  border: 1px solid var(--text);
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: 180ms ease;
}
.reserve-btn:hover {
  background: var(--text);
  color: var(--on-accent, white);
}

.icon-links {
  display: flex;
  align-items: center;
  gap: 14px;
}
.icon-links a {
  font-size: 1rem;
}

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* La photo de couverture (migration 084) est stylée dans `index.html`, la SEULE
   page qui porte un `.hero-media` — et cette page ne charge pas ce fichier.
   L'ancienne règle `.hero-media` vivait ici : elle pointait en dur vers une
   photo de barbier hébergée chez Unsplash et n'était référencée par aucune
   page. Du décor mort, retiré plutôt que déplacé. */
.hero-panel {
  position: relative;
  z-index: 1;
  max-width: 760px;
  color: white;
  padding: 80px 0 100px;
}
.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.hero-title {
  margin: 0;
  font-size: clamp(3.1rem, 8vw, 5.9rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-weight: 800;
}
.hero-text {
  max-width: 650px;
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.9);
}
.hero-actions {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-light,
.btn-ghost,
.btn-accent,
.btn-soft,
.btn-outline {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease,
    background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.btn-light:hover,
.btn-ghost:hover,
.btn-soft:hover,
.btn-outline:hover { transform: translateY(-2px); }
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(190, 135, 97, 0.36);
}
.btn-light:active,
.btn-ghost:active,
.btn-accent:active,
.btn-soft:active,
.btn-outline:active { transform: translateY(0); }
.btn-light:disabled,
.btn-ghost:disabled,
.btn-accent:disabled,
.btn-soft:disabled,
.btn-outline:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-light {
  background: white;
  color: var(--text);
  border: 1px solid white;
}
.btn-ghost {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.92);
}
.btn-accent {
  background: linear-gradient(180deg, #efb083, #de9467);
  color: var(--on-accent, white);
  border: none;
}
.btn-soft {
  background: #f4ede5;
  color: var(--text);
  border: none;
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}

.section {
  padding: 96px 0;
}
.section-soft {
  background: #fcfbf9;
}
.section-title {
  margin: 0 0 16px;
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
}
.section-intro {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
  line-height: 1.9;
  color: var(--text-soft);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.copy-card {
  padding: 40px;
}
.copy-card h2 {
  margin: 0 0 16px;
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-size: 2.7rem;
  font-weight: 500;
}
.copy-card p {
  margin: 0 0 16px;
  line-height: 1.85;
  color: var(--text-soft);
}

.feature-image {
  min-height: 560px;
  border-radius: 32px;
  background:
    linear-gradient(to top, rgba(12,10,8,0.30), rgba(12,10,8,0.10)),
    url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
}

.values-grid,
.stats-grid,
.cards-grid,
.contact-grid,
.shop-grid {
  display: grid;
  gap: 24px;
}
.values-grid {
  grid-template-columns: repeat(3, 1fr);
}
.value-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px;
}
.value-card h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.value-card p {
  margin: 0;
  line-height: 1.8;
  color: var(--text-soft);
}

.stats-grid {
  margin-top: 6px;
  grid-template-columns: repeat(4, 1fr);
}
.stat-card {
  text-align: center;
  padding: 32px 18px;
  border-top: 1px solid var(--line);
}
.stat-card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.stat-card span {
  font-size: 0.9rem;
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cta-banner {
  border-radius: 32px;
  padding: 54px;
  overflow: hidden;
  background:
    linear-gradient(to right, rgba(12,10,8,0.80), rgba(12,10,8,0.45)),
    url('https://images.unsplash.com/photo-1521490878406-8f953f4c3f96?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
  color: white;
}
.cta-banner h2 {
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.cta-banner p {
  max-width: 730px;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
  margin: 0 0 26px;
}

.page-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  color: white;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(21,16,12,0.34), rgba(21,16,12,0.16)),
    var(--hero-image) center/cover no-repeat;
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  margin: 0;
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-weight: 500;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: 0.01em;
}
.page-hero p {
  max-width: 740px;
  margin-top: 16px;
  line-height: 1.85;
  color: rgba(255,255,255,0.9);
}
/* Variante SANS image (les 4 pages légales) : sans --hero-image, le shorthand
   background du ::before est invalide en entier → bandeau transparent, et le
   blanc pensé « texte sur photo sombre » devenait invisible en thème clair
   (audit 27.07.2026, chantier F). Ici, couleurs du THÈME uniquement : les
   replis = valeurs sombres de :root ; le clair et les palettes tenant les
   redéfinissent (applyReadableText garantit le contraste par construction). */
.page-hero.page-hero--plain {
  color: var(--text, #f2ece0);
  border-bottom: 1px solid var(--line, #2a251f);
}
.page-hero.page-hero--plain::before { content: none; }
.page-hero.page-hero--plain p { color: var(--text-soft, #b7ac97); }

.pricing-shell,
.shop-shell,
.contact-shell {
  padding: 86px 0 104px;
}

.pricing-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 30px;
  align-items: start;
}
.pricing-menu {
  background: white;
  border-radius: 26px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 20px;
}
.pricing-menu button {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #efe7dd;
  text-align: left;
  padding: 20px 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-soft, #3f3933);
}
.pricing-menu button:last-child { border-bottom: none; }
.pricing-menu button.active { color: var(--accent-strong); }

.panel-card {
  background: white;
  border-radius: 26px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 28px;
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f1ebe5;
}
.price-row:last-child { border-bottom: none; }

.price-meta h3 {
  margin: 0 0 8px;
  font-size: 1.06rem;
}
.price-meta p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.94rem;
}
.price-amount {
  font-weight: 800;
  white-space: nowrap;
}

.shop-grid {
  grid-template-columns: repeat(3, 1fr);
}
.product-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 24px;
  text-align: center;
}
.product-image {
  aspect-ratio: 4/4.6;
  border-radius: 18px;
  overflow: hidden;
  background: #faf7f3;
  margin-bottom: 18px;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card h3 {
  margin: 0 0 10px;
  font-size: 1.04rem;
}
.product-card p {
  margin: 0 0 14px;
  line-height: 1.7;
  color: var(--text-soft);
}
.product-price {
  margin-bottom: 18px;
  font-weight: 800;
}

.contact-grid {
  grid-template-columns: 1fr 1fr;
}
.contact-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 34px;
}
.contact-card h2 {
  margin: 0 0 14px;
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-size: 2.5rem;
  font-weight: 500;
}
.contact-lines {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  line-height: 1.85;
  color: var(--text-soft);
}
.form-stack {
  display: grid;
  gap: 16px;
}
.form-stack input,
.form-stack textarea,
.form-stack select {
  width: 100%;
  border: 1px solid #ddd4c8;
  border-radius: 14px;
  padding: 16px 18px;
  background: white;
}
.form-stack textarea {
  min-height: 140px;
  resize: vertical;
}

.site-footer {
  padding: 40px 0 70px;
  background: #fbfaf8;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-inner p {
  margin: 0;
  /* Le pied de page est une SURFACE : son encre est calculée sur son propre
     fond (--footer-muted, posé par tenant-theme.js), pas sur celui du body.
     Sans ça, un fond de pied de page sombre + un body clair = gris sur noir. */
  color: var(--footer-muted, var(--text-soft));
}

.ia-bubble {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
}
.ia-trigger {
  border: none;
  background: #1c1815;
  color: var(--on-accent, white);
  padding: 16px 18px;
  border-radius: 999px;
  box-shadow: 0 18px 38px rgba(0,0,0,0.18);
  font-weight: 700;
  cursor: pointer;
}
.ia-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: min(720px, calc(100vw - 32px));
  background: white;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 24px 70px rgba(0,0,0,0.18);
  display: none;
  overflow: hidden;
  /* Vrai panneau d'outil : quasi la moitié de l'écran, borné à la fenêtre —
     la conversation défile à l'intérieur, la saisie reste visible. */
  height: min(880px, calc(100vh - 96px));
  max-height: min(90vh, calc(100vh - 96px));
}
.ia-panel.open { display: flex; flex-direction: column; }
.ia-head {
  position: relative;
  padding: 16px 48px 16px 20px;
  background: #1f1a16;
  color: var(--text, white);
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.ia-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: var(--text, #fff);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease;
}
.ia-close:hover { background: rgba(255,255,255,0.22); }
.ia-head strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.05rem;
}
.ia-head span {
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.82;
}
/* Identité de Liah : avatar + statut « En ligne » — présentation d'outil. */
.ia-id { display: flex; align-items: center; gap: 12px; }
.ia-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-strong, #c9a227);
  color: var(--on-accent, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  flex: none;
}
.ia-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7fc98b;
  margin-right: 6px;
  vertical-align: 1px;
}
.ia-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.quick-actions button {
  border: 1px solid #e8dfd4;
  background: #faf7f3;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.ia-body textarea {
  min-height: 90px;
  border: 1px solid #ddd4c8;
  border-radius: 14px;
  padding: 14px;
  resize: vertical;
}
.notice {
  padding: 14px 16px;
  border-radius: 14px;
  background: #f7f2eb;
  color: var(--text-soft, #6c5a49);
  font-size: 0.93rem;
}

.booking-steps {
  display: grid;
  gap: 26px;
  margin-top: 50px;
}
.step-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 28px;
}
.step-card h2 {
  margin: 0 0 18px;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.inline-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.time-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.staff-grid button,
.time-grid button {
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid #ddd4c8;
  background: white;
  cursor: pointer;
  font-weight: 600;
}
.staff-grid button.active,
.time-grid button.active {
  background: #1d1b19;
  color: var(--on-accent, white);
  border-color: #1d1b19;
}
.service-summary {
  background: #faf5ef;
  color: var(--text-soft, #6a5a4d);
  border-radius: 16px;
  padding: 18px 20px;
  line-height: 1.8;
}
.hidden { display: none !important; }

@media (max-width: 1100px) {
  .header-inner,
  .pricing-layout,
  .two-col,
  .contact-grid,
  .values-grid,
  .stats-grid,
  .shop-grid,
  .staff-grid,
  .time-grid,
  .inline-grid {
    grid-template-columns: 1fr;
  }
  .header-inner {
    justify-items: center;
    padding: 16px 0;
  }
  .feature-image { min-height: 420px; }
  .price-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .container { width: min(var(--container), calc(100% - 24px)); }
  .hero { min-height: 72vh; }
  .hero-panel { padding: 50px 0 70px; }
  .hero-actions,
  .footer-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-light,
  .btn-ghost,
  .btn-accent,
  .btn-soft,
  .btn-outline {
    width: 100%;
    /* Cible tactile confortable (≥ 48px) : la majorité réserve au téléphone. */
    min-height: 48px;
  }
  /* En-tête mobile : 2 rangées nettes au lieu d'une pile pleine largeur.
     Rangée 1 : flèche + marque | burger. Rangée 2 : langues · panier/compte · Réserver. */
  .header-inner {
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    padding: 10px 0;
    min-height: 0;
  }
  .brand-back-wrap { grid-column: 1; grid-row: 1; min-width: 0; }
  .nav-toggle { grid-column: 2; grid-row: 1; }
  .header-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 2px;
  }
  .header-actions .reserve-btn {
    width: auto;
    /* En dernier (order) + poussé à droite : les icônes panier/compte restent
       sur la même rangée au lieu de passer seules à la ligne. */
    order: 99;
    margin-left: auto;
    min-height: 42px;
    padding: 9px 18px;
    font-size: 0.74rem;
  }
  .brand { font-size: 1.35rem; }
  .brand small { font-size: 0.5rem; letter-spacing: 0.22em; }
  .brand-logo { height: 30px; }
  .section { padding: 74px 0; }
  .copy-card,
  .contact-card,
  .panel-card,
  .step-card {
    padding: 22px;
  }
}

/* --- Ajouts : réservation branchée & boutique dynamique --- */
#booking-service {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ddd4c8;
  border-radius: 14px;
  font-size: 15px;
  background: #fff;
}
.booking-date {
  padding: 12px 16px;
  border: 1px solid #ddd4c8;
  border-radius: 14px;
  font-size: 15px;
  margin-bottom: 16px;
}
.slots-hint {
  color: var(--text-soft, #8a8378);
  font-size: 14px;
  margin: 0;
}
.booking-status { font-size: 14px; }
.booking-status.success { color: #15803d; font-weight: 600; }
.booking-status.error { color: #b91c1c; font-weight: 600; }
.product-stock {
  font-size: 13px;
  color: var(--text-soft, #6b6459);
  margin: 8px 0 14px;
}
.product-stock.is-low { color: #b45309; font-weight: 600; }
.shop-loading {
  color: var(--text-soft, #8a8378);
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 0;
}

/* --- Polish : accessibilité, feedback, widget IA, menu mobile --- */

/* Accessibilité : focus visible cohérent avec la DA */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* Accessibilité : contenu réservé aux lecteurs d'écran (labels invisibles) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accessibilité : lien d'évitement « Aller au contenu » (visible au focus clavier) */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--accent, #e8d8a0);
  color: var(--on-accent, #141210);
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* Champs de formulaire : transition douce au focus */
input,
select,
textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(216, 176, 141, 0.22);
}

/* Cartes : léger soulèvement au survol */
.value-card,
.product-card {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.value-card:hover,
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(30, 22, 15, 0.10);
  border-color: var(--line-strong);
}

/* Toasts / notifications — au-dessus de la bulle IA (même coin) pour ne
   jamais masquer son bouton. Position UNIQUE sur tout le site public. */
.toast-stack {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(340px, calc(100vw - 32px));
}
.toast {
  padding: 14px 18px;
  border-radius: 14px;
  background: #1f1a16;
  color: #fff;
  font-size: 0.92rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #15803d; }
.toast.error { background: #b91c1c; }
.toast.info { background: #1f1a16; }

/* Spinner de chargement */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  vertical-align: middle;
}
.spinner.on-dark { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading { position: relative; opacity: 0.7; pointer-events: none; }
/* Feedback visuel pendant un envoi : les boutons en cours affichent un petit
   spinner intégré (polish 2026-07-08) — évite les doubles clics « au cas où ». */
button.is-loading::after,
.btn-accent.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 700ms linear infinite;
}

/* État vide guidé : au lieu d'une ligne de texte grise, un bloc avec icône,
   explication et action claire (polish 2026-07-08). */
.empty-state {
  text-align: center;
  padding: 36px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.empty-state .empty-icon { font-size: 1.6rem; margin-bottom: 10px; opacity: 0.8; }
.empty-state h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--text);
}
.empty-state p { margin: 0 0 16px; color: var(--text-soft); font-size: 0.92rem; }

/* États de chargement soignés : squelettes shimmer (évitent l'écran qui « saute ») */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-muted);
  border-radius: var(--radius-md, 10px);
  color: transparent !important;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(233, 216, 160, 0.10), transparent);
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}
.skeleton-line { height: 12px; margin: 8px 0; }
.skeleton-line.short { width: 55%; }
.skeleton-block { height: 140px; }
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* Widget IA : fil de conversation */
.ia-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  padding: 14px;
  background: #f7f2ec;
  border-radius: 16px;
  scroll-behavior: smooth;
}
.ia-body .quick-actions,
.ia-body .ia-input-row,
.ia-body .btn-accent { flex: 0 0 auto; }
/* Boutons de réponse rapide proposés par Liah (jours, horaires, oui/non…) :
   ils occupent la barre .quick-actions sous la conversation (classe sugg-mode). */
.quick-actions.sugg-mode button {
  border: 1px solid var(--accent-strong, #c9a227);
  background: #fff;
  color: var(--accent-strong, #8a6d1d);
  font-size: 0.9rem;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.quick-actions.sugg-mode button:hover {
  background: var(--accent-strong, #c9a227);
  color: #fff;
}
/* Confirmation : « Oui » plein vert, « Non » neutre discret. */
.quick-actions.sugg-mode button.ia-yes {
  background: #2e7d4f;
  border-color: #2e7d4f;
  color: #fff;
  font-weight: 600;
}
.quick-actions.sugg-mode button.ia-yes:hover { background: #256a42; border-color: #256a42; }
.quick-actions.sugg-mode button.ia-no {
  background: transparent;
  border-color: #cabfae;
  color: var(--text-soft, #6f665b);
}
.quick-actions.sugg-mode button.ia-no:hover { background: #f3eee7; color: #4a4239; }
.quick-actions.sugg-mode .ia-more {
  border-style: dashed;
  border-color: #cabfae;
  color: var(--text-soft, #8a8177);
  background: transparent;
}
.ia-msg {
  max-width: 90%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 0.98rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.ia-msg.user {
  align-self: flex-end;
  background: var(--accent-strong);
  color: var(--on-accent, #fff);
  border-bottom-right-radius: 4px;
}
.ia-msg.bot {
  align-self: flex-start;
  background: #fff;
  color: var(--text, #241f1a);
  border-bottom-left-radius: 4px;
}
.ia-msg.typing { color: var(--text-faint); font-style: italic; box-shadow: none; }
.ia-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.ia-input-row textarea {
  flex: 1;
  min-height: 46px;
  max-height: 120px;
  min-width: 0;
}
.ia-send {
  border: none;
  background: #1c1815;
  color: var(--on-accent, #fff);
  padding: 0 18px;
  height: 46px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.ia-send:hover { background: #000; transform: translateY(-1px); }
.ia-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Indicateur « Liah écrit… » : trois points animés. */
.ia-typing { display: inline-flex; gap: 5px; align-items: center; min-height: 20px; }
.ia-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: 0.35;
  animation: ia-typing-blink 1.2s infinite ease-in-out;
}
.ia-typing span:nth-child(2) { animation-delay: 0.18s; }
.ia-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ia-typing-blink {
  0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
  35% { opacity: 0.9; transform: translateY(-2px); }
}

/* Carte de confirmation de rendez-vous (réservation faite par l'IA). */
.ia-booking-card {
  align-self: flex-start;
  max-width: 90%;
  padding: 12px 15px;
  border-radius: 14px;
  border: 1px solid var(--accent-strong, #b8860b);
  background: rgba(201, 162, 39, 0.08);
  font-size: 0.9rem;
  line-height: 1.5;
}
.ia-booking-card .ia-bc-title {
  font-weight: 700;
  color: var(--accent-strong, #b8860b);
  margin-bottom: 4px;
}
.ia-booking-card .ia-bc-line { color: var(--text, #241f1a); }

/* Note discrète sous une réponse (mode démo sans clé IA). */
.ia-note {
  align-self: flex-start;
  font-size: 0.72rem;
  opacity: 0.55;
  padding: 0 4px;
}

/* Mobile : le panneau devient une feuille pleine largeur, bornée à l'écran. */
@media (max-width: 520px) {
  .ia-bubble { right: 12px; bottom: 12px; }
  .ia-panel {
    position: fixed;
    left: 12px; right: 12px; bottom: 74px;
    width: auto;
    max-height: min(72vh, calc(100vh - 90px));
  }
}

/* Bouton hamburger (mobile) */
.nav-toggle {
  display: none;
  border: 1px solid var(--line-strong);
  background: #fff;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  position: relative;
  transition: transform 200ms ease, opacity 160ms ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.site-header.nav-open .nav-toggle span { background: transparent; }
.site-header.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* Récap de réservation */
.booking-recap {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #faf7f2;
  padding: 18px 20px;
  margin: 4px 0 18px;
  display: grid;
  gap: 8px;
}
.booking-recap h4 {
  margin: 0 0 4px;
  font-family: var(--font-body, 'Jost'), sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.booking-recap .recap-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.95rem;
}
.booking-recap .recap-row span:first-child { color: var(--text-soft); }
.booking-recap .recap-row span:last-child { font-weight: 600; text-align: right; }
.booking-recap .recap-total {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 10px;
}
.booking-recap.is-empty { color: var(--text-faint); font-size: 0.92rem; }

/* Lignes de tableau admin : survol */
.ws-table tbody tr { transition: background 140ms ease; }
.ws-table tbody tr:hover { background: rgba(216, 176, 141, 0.10); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; justify-self: end; }
  .header-inner {
    grid-template-columns: auto 1fr auto;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.10);
    flex-direction: column;
    /* nowrap + flex-start indispensables : avec le wrap/centrage hérités du
       bureau + max-height 0, les liens débordaient de la fenêtre de clip →
       bande de texte tronqué visible sous l'en-tête (audit mobile 390px). */
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    /* Fermé : aucune épaisseur visible (padding/ombre seulement à l'ouverture). */
    padding: 0;
    border-bottom: none;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
  }
  .site-header.nav-open .main-nav {
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.10);
  }
  .main-nav a {
    padding: 14px 22px;
    text-align: center;
  }
  .main-nav a::after { display: none; }
}

/* ==========================================================================
   Phase 4 — finition DA premium (accents dorés + micro-interactions).
   Bloc additif : n'écrase aucune règle existante, uniquement des raffinements.
   ========================================================================== */

/* Filet doré sous l'eyebrow du hero */
.eyebrow { color: var(--accent); position: relative; padding-bottom: 12px; }
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 2px;
  background: var(--accent);
}

/* Titres de section : petit trait doré centré, signature du salon */
.section-title { position: relative; padding-bottom: 22px; }
.section-title::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 54px; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent-strong), transparent);
}

/* Cartes de valeurs : survol qui soulève et révèle un liseré doré */
.value-card {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 22px 44px rgba(139, 95, 67, 0.12);
}

/* Chiffres clés en chiffre doré + libellé discret */
.stat-card strong { color: var(--accent-deep); }

/* Liste de prix : onglet actif marqué d'une barre dorée, tarif en doré */
.pricing-menu button {
  border-left: 3px solid transparent;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.pricing-menu button:hover { background: #faf6f1; }
.pricing-menu button.active {
  border-left-color: var(--accent-strong);
  background: #faf5ef;
}
.price-amount {
  color: var(--accent-deep);
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.price-row { transition: background 160ms ease; }
.price-row:hover { background: #fbf8f4; }

/* Boutique : cartes produit qui réagissent, image qui zoome doucement */
.product-card {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 24px 46px rgba(139, 95, 67, 0.14);
}
.product-image img { transition: transform 400ms ease; }
.product-card:hover .product-image img { transform: scale(1.05); }

/* Badge de stock lisible (injecté par shop.js) */
.product-stock {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f2ede6;
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.product-stock.is-low {
  background: #f6e6e2;
  color: var(--danger);
}

/* Bandeau CTA : léger grain doré en surimpression pour la profondeur */
.cta-banner { position: relative; }
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(216, 176, 141, 0.28), transparent 55%);
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }

/* Lien de marque : accent doré sur le sous-titre */
.brand small { color: var(--accent-deep); }

/* ==========================================================================
   MAISON CORVEL — peau « luxe sombre & or ».
   Bloc final : re-skinne tous les composants encore codés en clair pour
   aligner les pages secondaires (réservation, boutique, contact, espace
   client…) sur l'identité de la page d'accueil. Placé en dernier → prioritaire.
   ========================================================================== */
/* --------------------------------------------------------------------------
   LISIBILITÉ GARANTIE (chantier 77)
   L'en-tête avait un fond CODÉ EN DUR (rgba(15,13,11,.86)) alors que son texte
   suivait les variables du thème. Dès qu'un salon choisissait un fond clair, on
   obtenait du texte clair sur un header clair → invisible (bug constaté sur
   barbier.localhost).
   Désormais l'en-tête consomme --header-bg / --header-ink / --header-ink-soft,
   que contrast.js CALCULE à partir du fond réellement affiché. Les valeurs de
   repli conservent l'ancien rendu si le JS n'a pas (encore) tourné.
   -------------------------------------------------------------------------- */
.brand { color: var(--header-ink, var(--paper)); }

/* En-tête + navigation */
.site-header {
  background: var(--header-bg, rgba(15, 13, 11, 0.86));
  border-bottom: 1px solid var(--line);
}
.reserve-btn { border-color: var(--accent-strong); color: var(--accent); }
.reserve-btn:hover { background: var(--accent-strong); color: var(--on-accent, var(--ink)); }
.main-nav a { color: var(--header-ink-soft, var(--text-soft)); }
.main-nav a:hover, .main-nav a.active { color: var(--accent); }
.main-nav a::after { background: var(--accent); }

/* Boutons */
.btn-light { background: var(--accent-strong); color: var(--on-accent, var(--ink)); border-color: var(--accent-strong); }
/* Le dégradé était figé en or : un salon en bleu gardait un bouton doré, et le
   texte calculé pour SA couleur devenait faux. Il suit maintenant la marque. */
.btn-accent {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: var(--on-accent, var(--ink));
}
.btn-soft { background: var(--surface-muted); color: var(--text); border: 1px solid var(--line); }
.btn-outline { color: var(--text); border-color: var(--line-strong); }

/* Sections & cartes */
.section-soft { background: var(--surface-soft); }
.card,
.value-card,
.pricing-menu,
.panel-card,
.product-card,
.contact-card,
.step-card { background: var(--surface); border-color: var(--line); }

/* Liste de prix */
.pricing-menu button { color: var(--text-soft); border-bottom-color: var(--line); }
.pricing-menu button:hover { background: rgba(201, 162, 39, 0.08); }
.pricing-menu button.active { color: var(--accent); background: rgba(201, 162, 39, 0.12); }
.price-row { border-bottom-color: var(--line); }
.price-row:hover { background: rgba(255, 255, 255, 0.03); }
.price-amount { color: var(--accent); }

/* Boutique */
.product-image { background: var(--surface-muted); }
.product-stock { background: rgba(201, 162, 39, 0.14); color: var(--text-soft); }
.product-stock.is-low { background: rgba(208, 138, 132, 0.16); color: var(--danger); }

/* Formulaires */
.form-stack input,
.form-stack textarea,
.form-stack select,
#booking-service,
.booking-date,
.ia-body textarea {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--text);
}
.form-stack input::placeholder,
.form-stack textarea::placeholder { color: var(--text-faint); }

/* Listes déroulantes maison (chantier 47) : le menu système du navigateur
   ignorait la DA du salon — bouton + popover 100 % aux couleurs du tenant
   (les variables sont réécrites par tenant-theme.js, donc chaque
   configuration client est suivie automatiquement). */
.uisel-native { display: none !important; }
.uisel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.uisel-btn:hover:not(:disabled), .uisel-btn:focus-visible { border-color: var(--accent-strong); outline: none; }
.uisel-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.uisel-btn .uisel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uisel-btn.is-placeholder .uisel-label { color: var(--text-faint); }
.uisel-caret { flex: none; font-size: 0.7rem; color: var(--accent-strong); }
.uisel-pop {
  position: absolute;
  z-index: 1600;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.uisel-search { padding: 8px; border-bottom: 1px solid var(--line); }
.uisel-search input {
  width: 100%;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 9px 12px;
  font: inherit;
  font-size: 0.88rem;
}
.uisel-list { max-height: 288px; overflow: auto; padding: 6px; display: grid; gap: 2px; }
.uisel-group {
  padding: 8px 10px 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.uisel-opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}
.uisel-opt:hover:not(:disabled), .uisel-opt.is-active { background: var(--surface-muted); }
.uisel-opt.is-sel { background: var(--accent); color: var(--on-accent, #241a10); font-weight: 700; }
.uisel-opt:disabled { opacity: 0.45; cursor: not-allowed; }
.uisel-opt .uisel-opt-sub { flex: none; font-size: 0.78rem; color: var(--text-soft); }
.uisel-opt.is-sel .uisel-opt-sub { color: inherit; opacity: 0.75; }
.uisel-empty { padding: 14px 12px; font-size: 0.85rem; color: var(--text-soft); text-align: center; }
[data-theme="light"] .uisel-opt.is-sel { color: var(--on-accent, #fff); }

/* Réservation : équipe, créneaux, récap */
.staff-grid button,
.time-grid button {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--text);
}
.staff-grid button.active,
.time-grid button.active { background: var(--accent-strong); color: var(--on-accent, var(--ink)); border-color: var(--accent-strong); }
.service-summary { background: var(--surface-muted); color: var(--text-soft); }
.booking-recap { background: var(--surface-muted); }
.slots-hint { color: var(--text-faint); }
.booking-status.success { color: var(--success); }
.booking-status.error { color: var(--danger); }

/* Pied de page */
.site-footer { background: var(--surface-soft); border-top: 1px solid var(--line); }

/* Widget IA (bulle flottante sur les pages publiques) */
.ia-trigger { background: var(--accent-strong); color: var(--on-accent, var(--ink)); }
.ia-panel { background: var(--surface); border: 1px solid var(--line); }
.ia-head { background: var(--surface-muted); border-bottom-color: var(--line); }
.quick-actions button { background: var(--surface-muted); border: 1px solid var(--line); color: var(--text); }
/* Zone de conversation encadrée + bulles contrastées (thème sombre). */
.ia-messages { background: var(--surface-soft); }
.ia-msg { box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.ia-msg.bot { background: var(--surface-muted); color: var(--text); border: 1px solid var(--line); }
.quick-actions.sugg-mode button { background: transparent; color: var(--accent, #d9b64a); border-color: var(--accent-strong); }
.quick-actions.sugg-mode button:hover { background: var(--accent-strong); color: var(--ink, #1c1815); }
.quick-actions.sugg-mode button.ia-yes { background: #2e7d4f; border-color: #2e7d4f; color: #fff; }
.quick-actions.sugg-mode button.ia-yes:hover { background: #38935e; border-color: #38935e; }
.quick-actions.sugg-mode button.ia-no { background: transparent; border-color: var(--line-strong, #4a443c); color: var(--text-soft); }
.quick-actions.sugg-mode button.ia-no:hover { background: var(--surface-muted); color: var(--text); }
.quick-actions.sugg-mode .ia-more { border-color: var(--line-strong, #4a443c); color: var(--text-soft); }
.notice { background: rgba(201, 162, 39, 0.10); color: var(--text-soft); }

/* Menu mobile déroulant */
.nav-toggle { background: var(--surface); border-color: var(--line-strong); }
@media (max-width: 900px) {
  .main-nav { background: var(--surface); }
  .site-header.nav-open .main-nav { border-bottom: 1px solid var(--line); }
}

/* ============================================================
   Assistant de réservation 3 clics (booking wizard)
   ============================================================ */
.booking-hero {
  background: linear-gradient(180deg, var(--surface-soft), var(--bg));
  padding: 88px 0 40px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.booking-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--text);
  margin: 0 0 10px;
}
.booking-hero p { color: var(--text-soft); margin: 0 auto; max-width: 560px; }

.wiz-shell { padding: 32px 0 80px; }

/* --- Barre de progression --- */
.wiz-steps {
  list-style: none;
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 0 0 24px;
  counter-reset: step;
}
.wiz-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  position: relative;
  color: var(--text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: default;
}
.wiz-step .wiz-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--line-strong);
  color: var(--text-faint);
  font-weight: 700;
  transition: all 180ms ease;
}
.wiz-step::after {
  content: "";
  position: absolute;
  top: 21px; left: 60%; right: -40%;
  height: 2px;
  background: var(--line);
}
.wiz-step:last-child::after { display: none; }
.wiz-step.is-active .wiz-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent, #1a1712);
  box-shadow: 0 0 0 4px rgba(201,162,39,0.18);
}
.wiz-step.is-active { color: var(--accent); }
.wiz-step.is-done .wiz-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #1a1712); }
.wiz-step.is-done { cursor: pointer; }
.wiz-step.is-done::after { background: var(--accent); }

/* --- Carte principale --- */
.wiz-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
  min-height: 320px;
}
.wiz-panel[hidden] { display: none; }
.wiz-panel { animation: wizFade 260ms ease; }
@keyframes wizFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wiz-panel-head { margin-bottom: 20px; }
.wiz-panel-head h2 { margin: 6px 0 4px; color: var(--text); font-size: 1.4rem; }
.wiz-sub { color: var(--text-soft); margin: 0; font-size: 0.95rem; }
.wiz-signed {
  margin: 10px 0 0; font-size: 0.9rem; color: var(--gold, #c9a227);
  display: inline-flex; align-items: center; gap: 6px;
}
.wiz-signed::before { content: '✓'; font-weight: 700; }
.wiz-back {
  background: none; border: none;
  color: var(--accent); cursor: pointer;
  font-size: 0.85rem; padding: 0; margin-bottom: 4px;
}
.wiz-back:hover { text-decoration: underline; }
.wiz-loading, .wiz-empty {
  padding: 40px 16px; text-align: center; color: var(--text-soft);
}

/* --- Étape 1 : prestations --- */
.svc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 150ms ease;
}
.chip.is-active { background: var(--gold); color: var(--on-accent, #1a1712); border-color: var(--gold); font-weight: 600; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.svc-card {
  text-align: left;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.svc-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 30px rgba(0,0,0,0.35); }
.svc-cat {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.svc-name { font-size: 1.08rem; font-weight: 600; color: var(--text); }
.svc-desc { font-size: 0.85rem; color: var(--text-soft); margin: 0; line-height: 1.4; }
.svc-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 6px; }
.svc-dur { font-size: 0.82rem; color: var(--text-faint); }
.svc-price { font-size: 1.02rem; font-weight: 700; color: var(--accent); }

/* Fiche prestation riche : photo en tête + badge « options ». */
.svc-card.has-photo { padding: 0; overflow: hidden; }
.svc-card .svc-photo {
  display: block; width: 100%; height: 120px;
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--line);
}
.svc-card .svc-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc-card.has-photo .svc-body { padding: 14px 18px 16px; }
.svc-addon-badge {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold); border: 1px solid var(--gold);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.svc-meta { gap: 8px; }

/* Modale « options » (add-ons) — réutilise l'habillage des fiches profil. */
.addons-head h3 { margin: 0 0 6px; }
.addons-sub { font-size: 0.88rem; color: var(--text-soft); margin: 0 0 14px; line-height: 1.45; }
.addon-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface-muted);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color 150ms ease;
}
.addon-row:hover { border-color: var(--gold); }
.addon-row:has(input:checked) { border-color: var(--gold); background: rgba(201, 162, 39, 0.07); }
.addon-row input { accent-color: var(--gold); width: 17px; height: 17px; flex: none; }
.addon-name { flex: 1; font-weight: 600; color: var(--text); }
.addon-meta { font-size: 0.82rem; color: var(--text-faint); white-space: nowrap; }
.addons-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.addons-total { font-size: 0.85rem; color: var(--text-soft); text-align: left; }
.recap-addon span:first-child { color: var(--text-soft); }

/* --- Étape 2 : équipe --- */
.staff-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.staff-card {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.staff-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 30px rgba(0,0,0,0.35); }
.staff-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.2rem; color: var(--on-accent, #1a1712);
}
.staff-avatar-any { background: linear-gradient(135deg, var(--gold), var(--accent)); color: var(--on-accent, #1a1712); }
.staff-avatar[style*="background-image"] { background-size: cover; background-position: center; }
.staff-name { font-weight: 600; color: var(--text); }
.staff-role { font-size: 0.8rem; color: var(--text-soft); }
.staff-rating { font-size: 0.82rem; color: var(--gold); font-weight: 600; }
.staff-rating em { color: var(--text-soft); font-style: normal; font-weight: 400; }
.staff-specs { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.staff-chip {
  font-size: 0.7rem; color: var(--text-soft);
  background: rgba(201,162,39,0.10); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 8px;
}
.staff-links { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; width: 100%; }
.staff-choose {
  font-size: 0.82rem; font-weight: 600; color: var(--on-accent, #1a1712);
  background: linear-gradient(135deg, var(--gold), var(--accent));
  border-radius: 999px; padding: 6px 12px;
}
.staff-profile-link {
  background: none; border: 1px solid var(--line); color: var(--text-soft);
  border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.staff-profile-link:hover { border-color: var(--gold); color: var(--text); }

/* Fiche profil (modale) */
.profile-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
/* L'attribut [hidden] doit l'emporter sur le display:grid ci-dessus, sinon la
   modale reste affichée même fermée (bouton ✕ / backdrop sans effet). */
.profile-modal[hidden] { display: none; }
.profile-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(2px); }
.profile-dialog {
  position: relative; z-index: 1; width: min(680px, 92vw); max-height: 88vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55); padding: 26px;
  animation: wizFade 220ms ease;
}
.profile-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface-muted);
  color: var(--text-soft); cursor: pointer; font-size: 0.9rem;
}
.profile-close:hover { color: var(--text); border-color: var(--gold); }
.profile-head { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.profile-avatar {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 1.7rem; color: var(--on-accent, #1a1712);
  background-size: cover; background-position: center;
}
.profile-head h3 { margin: 0 0 2px; font-family: var(--font-heading, 'Cormorant Garamond'), serif; font-size: 1.7rem; color: var(--text); }
.profile-title { font-size: 0.85rem; color: var(--text-soft); }
.profile-rating { margin-top: 6px; font-size: 0.9rem; color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
.profile-rating strong { color: var(--gold); }
.profile-norating { color: var(--text-soft); font-style: italic; }
.stars-row .star { color: var(--line); }
.stars-row .star.is-on { color: var(--gold); }
.profile-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.profile-bio { color: var(--text-soft); line-height: 1.55; margin: 0 0 16px; }
.profile-section { margin-top: 18px; }
.profile-section h4 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gold); margin: 0 0 10px;
}
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.portfolio-item { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface-muted); }
.portfolio-item img { display: block; width: 100%; height: 130px; object-fit: cover; }
.portfolio-item figcaption { font-size: 0.72rem; color: var(--text-soft); padding: 6px 8px; }
.profile-reviews { display: flex; flex-direction: column; gap: 12px; }
.profile-review { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; background: var(--surface-muted); }
.profile-review p { margin: 6px 0; color: var(--text); line-height: 1.5; }
.review-meta { font-size: 0.76rem; color: var(--text-soft); }
.profile-foot { margin-top: 22px; text-align: center; }
body.modal-open { overflow: hidden; }

/* --- Étape 3 : date + créneaux --- */
.date-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 10px; margin-bottom: 18px;
  scrollbar-width: thin;
}
.date-pill {
  flex: 0 0 auto;
  min-width: 64px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-soft);
  transition: all 150ms ease;
}
.date-pill:hover { border-color: var(--gold); }
.date-pill.is-active { background: var(--gold); border-color: var(--gold); color: var(--on-accent, #1a1712); }
.dp-wd { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.dp-dm { font-size: 0.92rem; font-weight: 700; }
.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.slot-btn {
  background: var(--surface-muted);
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 0;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}
.slot-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent, #1a1712); transform: translateY(-2px); }
.slots-hint { color: var(--text-soft); padding: 20px 4px; margin: 0; }

/* Prochain dispo */
.next-avail {
  margin-top: 22px; padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.na-title { margin: 0 0 12px; font-weight: 600; color: var(--accent); }
.na-list { display: flex; flex-direction: column; gap: 8px; }
.na-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: pointer; text-align: left;
  color: var(--text);
  transition: all 150ms ease;
}
.na-item:hover { border-color: var(--gold); transform: translateX(3px); }
.na-when { font-weight: 600; }
.na-who { color: var(--text-soft); font-size: 0.85rem; }

/* Liste d'attente (« prévenez-moi si un créneau se libère ») */
.wl-box { margin-top: 14px; }
.wl-open {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; cursor: pointer;
  border: 1px dashed var(--gold);
  border-radius: 999px;
  background: transparent; color: var(--accent);
  font-weight: 600; font-size: 0.92rem;
  transition: all 150ms ease;
}
.wl-open:hover { background: var(--surface-soft); border-style: solid; }
.wl-form {
  margin-top: 12px; padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.wl-sub { margin: 0 0 12px; color: var(--text-soft); font-size: 0.88rem; }
.wl-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (max-width: 720px) { .wl-fields { grid-template-columns: 1fr; } }
.wl-fields input {
  background: var(--surface-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px; width: 100%;
}
.wl-fields input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.wl-submit {
  padding: 10px 18px; cursor: pointer; border: none;
  border-radius: var(--radius-sm);
  background: var(--accent-strong); color: var(--on-accent, var(--ink));
  font-weight: 700; letter-spacing: .02em;
  transition: background 150ms ease, opacity 150ms ease;
}
.wl-submit:hover { background: var(--gold-soft); }
.wl-submit[disabled] { opacity: .55; cursor: default; }
.wl-status { min-height: 18px; margin: 8px 0 0; font-size: 0.85rem; color: var(--text-soft); }
.wl-status.error { color: var(--danger); }
.wl-done { margin: 0; color: var(--success); font-weight: 600; }

/* --- Étape 4 : confirmation --- */
.confirm-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: start; }
.confirm-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 0.85rem; color: var(--text-soft); font-weight: 600; }
.field em { color: var(--text-faint); font-style: normal; font-weight: 400; }
.field input, .field textarea {
  background: var(--surface-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--text);
  font-size: 0.98rem;
  font-family: inherit;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.deposit-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: 16px;
}
.deposit-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.deposit-toggle input { margin-top: 4px; }
.deposit-toggle strong { color: var(--text); }
.deposit-toggle em { display: block; color: var(--text-soft); font-style: normal; font-size: 0.88rem; margin-top: 2px; }
.pay-methods { display: flex; gap: 20px; margin-top: 12px; color: var(--text-soft); }
.first-visit-box {
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  padding: 16px;
}
.first-visit-box .deposit-toggle strong { color: var(--accent); }

/* Connexion express « compte existant » dans le tunnel (2026-07-09).
   Apparaît sous le champ e-mail quand l'adresse a déjà un compte : mot de passe
   + œil « Afficher », pour se connecter sans quitter la réservation. */
.account-login {
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
  padding: 16px;
  display: grid;
  gap: 12px;
  animation: fadeIn 0.25s ease;
}
.account-login-msg { margin: 0; color: var(--text); font-size: 0.92rem; }
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input {
  flex: 1;
  width: 100%;
  padding: 12px 84px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}
.pw-wrap input:focus { outline: none; border-color: var(--gold); }
.pw-toggle {
  position: absolute;
  right: 6px;
  border: none;
  background: transparent;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
}
.pw-toggle:hover { text-decoration: underline; }
.account-login-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.account-login-btn { padding: 10px 20px; }
.account-login-forgot { color: var(--text-soft); font-size: 0.85rem; }
.account-login-status { min-height: 18px; font-size: 0.85rem; color: var(--text-soft); }
.account-login-status.error { color: var(--danger, #c0392b); }

/* --- Zone compte : créer un espace OU continuer en invité --- */
.account-choice {
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
  padding: 16px;
  display: grid;
  gap: 12px;
  animation: fadeIn 0.25s ease;
}
.account-choice-msg { margin: 0; color: var(--text); font-size: 0.92rem; }
.account-choice-tabs { display: flex; gap: 8px; }
.acc-tab {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.acc-tab:hover { border-color: var(--gold); }
.acc-tab.is-active {
  border-color: var(--gold);
  color: var(--text);
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
}
.account-create { display: grid; gap: 10px; }
.acc-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.acc-consent input { width: auto; margin-top: 2px; }
.acc-hint { margin: 0; font-size: 0.82rem; color: var(--text-soft); line-height: 1.4; }
.account-signup-status { min-height: 16px; font-size: 0.85rem; color: var(--text-soft); }
.account-signup-status.error { color: var(--danger, #c0392b); }

.recap-discount span:last-child { color: var(--accent) !important; font-weight: 600; }
.wiz-confirm { width: 100%; margin-top: 4px; }
.wiz-status { min-height: 20px; font-size: 0.9rem; color: var(--text-soft); }
/* Messages de statut lisibles au premier coup d'œil (polish 2026-07-08) :
   fond léger + liseré + icône, au lieu d'un simple texte coloré. Le variant
   « vide » retombe à zéro pour ne pas réserver d'espace inutile. */
.wiz-status.error,
.status.error {
  display: inline-block;
  color: var(--danger);
  background: rgba(208, 138, 132, 0.10);
  border-left: 3px solid var(--danger);
  border-radius: 6px;
  padding: 10px 14px;
}
.wiz-status.error::before,
.status.error::before { content: "⚠ "; }
.wiz-status.success,
.status.success {
  display: inline-block;
  color: var(--success);
  background: rgba(127, 174, 131, 0.10);
  border-left: 3px solid var(--success);
  border-radius: 6px;
  padding: 10px 14px;
}
.wiz-status.success::before,
.status.success::before { content: "✓ "; }
.wiz-status:empty,
.status:empty { padding: 0; border: 0; background: none; }
.wiz-status:empty::before,
.status:empty::before { content: none; }

.confirm-recap {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  position: sticky; top: 20px;
}
.confirm-recap h3 { margin: 0 0 14px; font-size: 1.05rem; color: var(--text); }
.recap-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--text-soft); font-size: 0.92rem; }
.recap-row span:last-child { color: var(--text); text-align: right; font-weight: 500; }
.recap-total { border-bottom: none; margin-top: 6px; padding-top: 12px; }
.recap-total span { font-size: 1.05rem; font-weight: 700; color: var(--accent) !important; }

.booking-pay {
  margin-top: 20px; padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.booking-pay h4 { margin: 0 0 6px; }
.booking-pay p { margin: 0 0 12px; color: var(--text-soft); }

/* --- Écran succès --- */
.wiz-success { text-align: center; padding: 20px; }
.success-mark {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--success); color: var(--on-accent, #12200f);
  display: grid; place-items: center;
  font-size: 2rem; font-weight: 700;
  margin: 0 auto 16px;
  animation: pop 320ms ease;
}
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.wiz-success h2 { color: var(--text); margin: 0 0 18px; }
.success-recap { max-width: 380px; margin: 0 auto 22px; text-align: left; }
.success-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.success-note { color: var(--text-soft); font-size: 0.88rem; margin: 18px auto 0; max-width: 420px; }

/* Produits conseillés après la réservation (reco post-RDV) */
.success-reco { margin: 26px auto 0; max-width: 520px; border-top: 1px solid var(--line); padding-top: 20px; }
.reco-title { font-family: var(--font-heading, 'Cormorant Garamond', Georgia), serif; font-size: 1.3rem; color: var(--text); margin: 0 0 14px; }
.reco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.reco-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.reco-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.reco-thumb { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-sm); background: var(--surface) center/cover no-repeat; }
.reco-name { font-size: 0.85rem; color: var(--text); text-align: center; line-height: 1.3; }
.reco-price { font-family: var(--font-heading, 'Cormorant Garamond', Georgia), serif; font-size: 1.05rem; color: var(--gold); font-weight: 600; }

.wiz-help { text-align: center; margin-top: 22px; color: var(--text-soft); }
.wiz-help a { color: var(--accent); }

/* --- Responsive mobile --- */
@media (max-width: 760px) {
  .booking-hero { padding: 72px 0 30px; }
  .wiz-card { padding: 18px; border-radius: var(--radius-md); }
  .wiz-step .wiz-label { display: none; }
  .wiz-step::after { top: 14px; }
  .confirm-layout { grid-template-columns: 1fr; }
  .confirm-recap { position: static; order: -1; }
  .svc-grid { grid-template-columns: 1fr; }
  .staff-cards { grid-template-columns: repeat(2, 1fr); }
  .time-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Pages légales (mentions, confidentialité, CGV, cookies) + liens de pied
--------------------------------------------------------------------------- */
.legal-shell { padding: 46px 0 72px; }
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content h2 {
  font-family: var(--font-heading, 'Cormorant Garamond', 'Cormorant'), serif; font-weight: 500;
  font-size: 1.5rem; margin: 34px 0 10px; color: var(--gold-soft, #e8d8a0);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.08rem; margin: 20px 0 6px; }
.legal-content p, .legal-content li {
  line-height: 1.75; color: var(--text-soft, #cfc7b8); font-size: .96rem;
}
.legal-content ul { margin: 8px 0 8px 1.1rem; }
.legal-content li { margin: 4px 0; }
.legal-content a { color: var(--gold-soft, #e8d8a0); }
.legal-content .legal-updated { font-size: .84rem; color: var(--muted, #a79f8f); margin-bottom: 22px; }
.legal-content .legal-box {
  border: 1px solid var(--line, rgba(232,216,160,.16)); border-radius: 12px;
  padding: 16px 18px; margin: 16px 0; background: rgba(255,255,255,.02);
}
.legal-content .legal-box strong { color: var(--paper, #f4efe6); }

/* Liens légaux dans le pied de page (toutes pages publiques) */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.footer-legal a {
  /* --footer-muted : encre calculée sur le fond DU PIED DE PAGE. --muted, lui,
     est calculé sur le fond du body — d'où le gris foncé sur noir en mode clair. */
  color: var(--footer-muted, var(--muted, #a79f8f)); font-size: .82rem; text-decoration: none;
  transition: color .15s;
}
.footer-legal a:hover { color: var(--gold-soft, #e8d8a0); text-decoration: underline; }

/* ---- Accessibilité : réduire les animations si la personne le demande ------ */
/* prefers-reduced-motion : on neutralise animations, transitions et défilement
   animé pour les personnes sensibles au mouvement (vestibulaire, vertiges…). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   CHANTIER 41 — MODE CLAIR du site public.
   Le site est sombre/or par défaut (peau « Maison Corvel » ci-dessus, toute
   en variables) : il suffit de redéfinir la palette quand html[data-theme=
   "light"] est posé par theme.js (bouton soleil/lune, choix partagé entre
   les trois étages via localStorage 'colabs_theme').
   Le white-label tenant (tenant-theme.js) garde la priorité : ses styles
   inline sur --bg / --gold gagnent sur ces variables.
   ========================================================================== */
:root[data-theme="light"] {
  --bg: #f6f1e7;
  --ink: #141210;              /* texte posé sur les boutons dorés : reste sombre */
  --paper: #2a251c;            /* nom de marque : encre foncée sur fond clair */
  --surface: #ffffff;
  --surface-soft: #f0e9db;
  --surface-muted: #e9e1d1;
  --text: #26221b;
  --text-soft: #6d6355;
  --text-faint: #6b6153;       /* contraste AA (≥4.5) sur --bg clair et --surface-muted */
  --muted: #6d6355;
  --line: rgba(94, 74, 30, 0.16);
  --line-strong: rgba(94, 74, 30, 0.36);
  --accent: #8f6b14;           /* or foncé : lisible en texte sur fond clair */
  --accent-strong: #c9a227;    /* boutons dorés inchangés (texte --ink sombre) */
  --accent-deep: #8f6b14;
  --gold: #a07d16;
  --gold-soft: #8f6b14;
  --success: #2e7d4f;
  --danger: #b3564e;
  --shadow: 0 24px 60px rgba(70, 55, 25, 0.14);
}

/* Retouches ciblées : les rares couleurs codées en dur pensées pour le sombre. */
[data-theme="light"] .site-header {
  background: rgba(252, 249, 242, 0.92);       /* remplace le bandeau quasi noir */
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .price-row:hover { background: rgba(0, 0, 0, 0.035); }
[data-theme="light"] .legal-content .legal-box { background: rgba(0, 0, 0, 0.025); }
[data-theme="light"] .ia-msg { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); }
[data-theme="light"] .pricing-menu button:hover { background: rgba(143, 107, 20, 0.08); }
[data-theme="light"] .pricing-menu button.active { background: rgba(143, 107, 20, 0.12); color: var(--accent); }
[data-theme="light"] .product-stock { background: rgba(160, 125, 22, 0.14); }
[data-theme="light"] .notice { background: rgba(160, 125, 22, 0.10); }
[data-theme="light"] .btn-accent { color: var(--on-accent, #141210); }
[data-theme="light"] .footer-legal a:hover { color: var(--accent); }

/* En clair, l'or (auto-assombri par theme.js) porte du texte clair, pas sombre. */
[data-theme="light"] .skip-link,
[data-theme="light"] .chip.is-active,
[data-theme="light"] .wiz-step.is-active .wiz-dot,
[data-theme="light"] .wiz-step.is-done .wiz-dot { color: var(--on-accent, #fff); }

/* ==========================================================================
   CHANTIER 72 — EN-TÊTE ANIMÉE AU SCROLL (toutes pages, tous thèmes).
   app.js pose .is-shrunk sur .site-header après ~40 px de défilement :
   barre compacte, logo + marque réduits, verre dépoli mat TEINTÉ DU FOND
   du thème courant (var(--bg) suit le tenant, clair comme sombre).
   Placé en FIN de feuille : gagne sur les règles antérieures de même
   spécificité ([data-theme="light"] .site-header, skin Corvel…).
   ========================================================================== */
.site-header {
  transition: background-color 280ms ease, border-color 280ms ease,
    box-shadow 280ms ease;
}
.header-inner { transition: min-height 280ms ease, padding 280ms ease, gap 280ms ease; }
.brand { transition: font-size 280ms ease; }
.brand-logo { transition: height 280ms ease, max-width 280ms ease; }
.brand small {
  max-height: 1.4em;
  transition: opacity 280ms ease, max-height 280ms ease, margin-top 280ms ease;
}

/* Verre dépoli mat : fond du thème semi-transparent + blur + fine bordure. */
.site-header.is-shrunk {
  background: color-mix(in srgb, var(--bg, #141210) 78%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid color-mix(in srgb, var(--text, #f2ece0) 16%, transparent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}
.site-header.is-shrunk .header-inner { min-height: 58px; gap: 20px; }
.site-header.is-shrunk .brand { font-size: 1.35rem; }
.site-header.is-shrunk .brand-logo { height: 40px; max-width: 110px; }
/* Le sous-titre de marque se replie en douceur : la barre reste basse. */
.site-header.is-shrunk .brand small { opacity: 0; max-height: 0; margin-top: 0; overflow: hidden; }
.site-header.is-shrunk .main-nav { gap: 22px; }
.site-header.is-shrunk .reserve-btn { padding: 8px 18px; }

/* Variante « centre » (logo centré, nav dessous — injectée par
   tenant-theme.js) : resserrée une fois shrunk, sans jamais couvrir le hero. */
body.header-centre .site-header.is-shrunk .header-inner { padding: 6px 0; row-gap: 4px; }

/* Variante « flottant » (header transparent posé sur le hero, en absolute) :
   au scroll elle devient FIXE avec le même verre dépoli — spécificité (0,3,1)
   pour battre la règle injectée body.header-flottant .site-header (0,2,1). */
body.header-flottant .site-header.is-shrunk {
  position: fixed;
  top: var(--banners-h, 0px);
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--bg, #141210) 78%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid color-mix(in srgb, var(--text, #f2ece0) 16%, transparent);
}

/* Mobile : le header à 3 rangées (marque / actions / burger) garde SA
   géométrie — on ne compacte que le padding, le burger reste intact. */
@media (max-width: 900px) {
  .site-header.is-shrunk .header-inner { min-height: 0; gap: 4px 12px; padding: 6px 0; }
  .site-header.is-shrunk .brand { font-size: 1.2rem; }
  .site-header.is-shrunk .brand-logo { height: 26px; }
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse (l'état
   compact s'applique toujours, mais instantanément). */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .header-inner,
  .brand,
  .brand-logo,
  .brand small { transition: none; }
}

/* ===================================================================
   SITE PUBLIC AU DOIGT (2 août 2026). Mesuré sur un iPhone (390 px) avant
   correction : « Réserver » à 38 px de haut, « Réserver → » des prestations
   à 38 px, la bascule de thème à 36 px, les libellés Tarif/Durée à 11,2 px.
   44 px = minimum tactile (Apple HIG, WCAG 2.5.8 « Target Size »).
   16 px sur les champs = seul moyen d'empêcher iOS Safari de zoomer à la
   mise au point ; ce zoom est ce qui fait « sauter » la page pendant la
   saisie du tunnel de réservation.
   =================================================================== */
@media (max-width: 860px) {
  .btn-gold, .btn-outline, .btn-accent, .btn-soft, .reserve-btn, .svc-book,
  .cc-btn, .wiz-back, button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .theme-toggle, .nav-toggle, .cb-inline { min-width: 44px; min-height: 44px; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  /* Plancher de lisibilité : ces étiquettes tombaient à 10,2-11,5 px. */
  .svc-meta, .svc-label, .meta, .muted, .success-note { font-size: .8rem; }
  /* Deux actions collées se touchent au doigt : on écarte et on autorise le
     passage à la ligne plutôt que de laisser deux cibles se frôler. */
  .hero-actions, .svc-actions, .wiz-actions { gap: 12px; flex-wrap: wrap; }
}

/* Plancher de lisibilité, sélecteurs relevés sur les pages réelles (les
   mêmes cas que sur l'accueil : catégorie, durée, rôle, baseline de marque). */
@media (max-width: 860px) {
  /* Sélecteurs repris À L'IDENTIQUE de l'origine : une media query n'ajoute
     aucune spécificité, `.svc-cat` seul perdait contre `.svc .svc-cat`. */
  .svc .svc-cat { font-size: .78rem; }
  .svc .price small { font-size: .78rem; }
  .member .role { font-size: .78rem; }
  .member .specs span { font-size: .76rem; }
  .svc-foot .dur, .svc-modal__fact span, .reserve-btn { font-size: .8rem; }
  .brand small { font-size: .64rem; letter-spacing: .14em; }
  .footer-legal { gap: 10px 16px; }
  .footer-legal a { padding: 8px 0; display: inline-block; }
}