/**
 * fixeo-artisan-directory-v1.css
 * PHASE 6B.2 — Artisan Card Visual Continuity
 * (replaces Phase 6B.1 version of this file — engine unchanged)
 *
 * Scope: artisans.html directory layer only.
 * Naming: artdir-* prefix for all directory-specific selectors.
 *
 * Visual contract: reproduces the approved FIXEO homepage card language
 * (pvc-card V3B, Phase 5D) under the artdir-* namespace.
 * Zero dependency on #fixeo-homepage-vedette-grid or #artisans-section.
 * Zero `!important` wars with artisan-card-conversion-v1.css.
 * Homepage Phase 5D remains pixel-stable — no shared selectors touched.
 *
 * Architecture decision (6B.2):
 *   Reproduction (not extraction) of homepage card visual primitives.
 *   Shared CSS extraction would require touching artisan-card-conversion-v1.css
 *   selectors scoped to #fixeo-homepage-vedette-grid — regression risk too high.
 *   Directory cards use natural/min-content height (no 360px lock).
 *
 * Structure:
 *   1. Section shell
 *   2. Directory header
 *   3. Filter controls (Ville + Métier selects)
 *   4. Context bar (city/trade pill strip)
 *   5. Result summary
 *   6. Loading state
 *   7. Artisan card — V3B visual contract
 *      7a. Card shell
 *      7b. Card header (avatar + identity)
 *      7c. Avatar — staged fallback, category gradient, badge
 *      7d. Identity (name, city, métier)
 *      7e. Description
 *      7f. Trust rows (inline SVG icons)
 *      7g. Action area (divider + price + CTA + profile link)
 *   8. Empty state
 *   9. Load-more
 *  10. Responsive overrides (mobile / tablet / desktop)
 *  11. Accessibility / motion
 */

/* ── 1. Section shell ─────────────────────────────────────────────── */
#artisan-directory {
  padding: 0 0 48px;
  position: relative;
  z-index: 1;
}

.artdir-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── 2. Directory header ──────────────────────────────────────────── */
.artdir-header {
  padding: 56px 0 32px;
  text-align: center;
}

.artdir-eyebrow {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(131, 58, 180, 0.40);
  color: rgba(167, 110, 255, 0.90);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.artdir-h1 {
  font-size: clamp(1.55rem, 4vw, 2.4rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 14px;
}

.artdir-h1 .artdir-h1-em {
  background: linear-gradient(135deg, #E1306C, #833AB4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.artdir-subtitle {
  font-size: clamp(0.92rem, 1.6vw, 1.02rem);
  color: rgba(232, 234, 240, 0.58);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.60;
}

/* ── 3. Filter controls ───────────────────────────────────────────── */
.artdir-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}

.artdir-control-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1 1 180px;
  max-width: 240px;
}

.artdir-control-label {
  font-size: 0.70rem;
  font-weight: 700;
  color: rgba(232, 234, 240, 0.46);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-left: 2px;
}

.artdir-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(232, 234, 240, 0.90);
  font-family: inherit;
  font-size: 0.90rem;
  font-weight: 600;
  padding: 11px 36px 11px 14px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  min-height: 44px;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgba(255,255,255,0.45)' d='M5.5 8l4.5 4.5L14.5 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}

.artdir-select:hover,
.artdir-select:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background-color: rgba(255, 255, 255, 0.08);
  outline: none;
}

.artdir-select:focus-visible {
  outline: 2px solid rgba(167, 110, 255, 0.60);
  outline-offset: 2px;
}

.artdir-select option {
  background: #1a1a2e;
  color: #e8eaf0;
}

.artdir-controls-reset {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: none;
  color: rgba(232, 234, 240, 0.45);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
  white-space: nowrap;
  align-self: flex-end;
}

.artdir-controls-reset:hover {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(232, 234, 240, 0.75);
}

.artdir-controls-reset:focus-visible {
  outline: 2px solid rgba(167, 110, 255, 0.55);
  outline-offset: 2px;
}

/* ── 4. Context bar (pill strip) ─────────────────────────────────── */
.artdir-context {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.artdir-context.artdir-context--visible {
  display: flex;
}

.artdir-ctx-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(167, 110, 255, 0.10);
  border: 1px solid rgba(167, 110, 255, 0.24);
  color: rgba(167, 110, 255, 0.88);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── 5. Result summary ───────────────────────────────────────────── */
.artdir-summary {
  font-size: 0.82rem;
  color: rgba(232, 234, 240, 0.42);
  text-align: center;
  margin-bottom: 20px;
  min-height: 20px;
  transition: opacity 0.20s;
}

/* ── 6. Loading state ────────────────────────────────────────────── */
#artdir-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 0;
  color: rgba(232, 234, 240, 0.48);
  font-size: 0.88rem;
}

#artdir-loading.artdir-loading--visible {
  display: flex;
}

.artdir-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(167, 110, 255, 0.70);
  border-radius: 50%;
  animation: artdir-spin 0.75s linear infinite;
}

@keyframes artdir-spin {
  to { transform: rotate(360deg); }
}

/* ── 7. Artisan card — V3B visual contract ───────────────────────── */

/* ── 7a. Card shell ─────────────────────────────────────────────── */
#artdir-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.artdir-card {
  /* Glass card — mirrors homepage V3B pvc-card */
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.055), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 20px;
  padding: 22px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: visible; /* allow avatar badge to bleed */
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.artdir-card:active {
  transform: scale(0.99);
}

/* ── 7b. Card header: avatar + identity side by side ─────────────── */
.artdir-card-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* ── 7c. Avatar — staged fallback, category gradient, badge ─────── */
.artdir-avatar {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  min-width: 76px;
  border-radius: 18px;
  overflow: visible; /* badge bleeds */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Default gradient: plomberie blue (overridden by data-category rules) */
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.05),
    0 8px 24px rgba(0,0,0,0.46),
    0 0 20px rgba(255,255,255,0.04);
}

/* Inner content clips to rounded square */
.artdir-avatar-img,
.artdir-avatar-initials-wrap {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.artdir-avatar-img {
  object-fit: cover;
  object-position: center top;
  display: block;
}

.artdir-avatar-initials {
  font-size: 1.15rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Avatar silhouette fallback — CSS-drawn figure (no network request) */
.artdir-avatar-silhouette {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.artdir-avatar-silhouette::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
}
.artdir-avatar-silhouette::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 36px;
  border-radius: 26px 26px 0 0;
  background: rgba(255, 255, 255, 0.22);
}

/* Category-specific avatar ring gradient — mirrors T3 in artisan-card-conversion-v1.css */
.artdir-avatar[data-category="plomberie"]     { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.artdir-avatar[data-category="electricite"]   { background: linear-gradient(135deg, #facc15, #f97316); }
.artdir-avatar[data-category="climatisation"] { background: linear-gradient(135deg, #22d3ee, #06b6d4); }
.artdir-avatar[data-category="peinture"]      { background: linear-gradient(135deg, #f472b6, #ec4899); }
.artdir-avatar[data-category="nettoyage"]     { background: linear-gradient(135deg, #34d399, #10b981); }
.artdir-avatar[data-category="menuiserie"]    { background: linear-gradient(135deg, #a16207, #78350f); }
.artdir-avatar[data-category="serrurerie"]    { background: linear-gradient(135deg, #f59e0b, #d97706); }
.artdir-avatar[data-category="maconnerie"]    { background: linear-gradient(135deg, #6b7280, #374151); }
.artdir-avatar[data-category="jardinage"]     { background: linear-gradient(135deg, #84cc16, #16a34a); }
.artdir-avatar[data-category="bricolage"]     { background: linear-gradient(135deg, #f97316, #ea580c); }
.artdir-avatar[data-category="demenagement"]  { background: linear-gradient(135deg, #c084fc, #7c3aed); }
.artdir-avatar[data-category="carrelage"]     { background: linear-gradient(135deg, #94a3b8, #475569); }
.artdir-avatar[data-category="toiture"]       { background: linear-gradient(135deg, #ef4444, #991b1b); }
.artdir-avatar[data-category="vitrerie"]      { background: linear-gradient(135deg, #38bdf8, #0369a1); }
.artdir-avatar[data-category="chauffage"]     { background: linear-gradient(135deg, #fb923c, #dc2626); }
.artdir-avatar[data-category="demenagement"]  { background: linear-gradient(135deg, #c084fc, #7c3aed); }

/* Service badge: métier emoji in bottom-right corner */
.artdir-avatar-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  z-index: 4;
  pointer-events: none;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.50),
    0 0 8px rgba(255, 255, 255, 0.06);
  line-height: 1;
}

/* ── 7d. Identity column ─────────────────────────────────────────── */
.artdir-identity {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.artdir-card-name {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.artdir-meta-line {
  font-size: 0.70rem;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}

/* ── 7e. Description ─────────────────────────────────────────────── */
.artdir-card-desc {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.50;
  margin: 0 0 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── 7f. Trust two-row block — inline SVG icons ─────────────────── */
.artdir-trust {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
}

.artdir-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
}

.artdir-trust-icon {
  flex-shrink: 0;
  line-height: 0;
  font-size: 0;
}

.artdir-trust-icon svg {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.32);
}

/* ── 7g. Action area: divider + price + CTA + profile link ────────── */
.artdir-action {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  margin-top: auto;
}

.artdir-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin-bottom: 13px;
  flex-shrink: 0;
}

/* Price */
.artdir-price {
  margin-bottom: 14px;
  flex-shrink: 0;
}

.artdir-price-amount {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  display: block;
  margin-bottom: 3px;
}

.artdir-price-hint {
  font-size: 0.63rem;
  color: rgba(255, 212, 100, 0.65);
  font-weight: 500;
  line-height: 1.2;
  display: block;
}

/* Primary CTA — orange→magenta, controlled glow (mirrors pvc-btn-v3b) */
.artdir-btn-reserve {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  padding: 11px 18px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.015em;
  background-image: linear-gradient(135deg, #ff5a1f 0%, #d42b69 100%);
  background-color: #d42b69;
  box-shadow:
    0 3px 12px rgba(225, 48, 108, 0.22),
    0 1px 4px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}

.artdir-btn-reserve:hover {
  transform: scale(1.02);
  box-shadow:
    0 5px 18px rgba(225, 48, 108, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.artdir-btn-reserve:active {
  transform: scale(0.97);
}

.artdir-btn-reserve:focus-visible {
  outline: 2px solid rgba(255, 90, 31, 0.60);
  outline-offset: 2px;
}

/* Secondary profile link — quiet text link below primary (mirrors pvc-profile-v3b) */
.artdir-btn-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  min-height: 40px;
  padding: 0 8px;
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.01em;
  border-radius: 8px;
  flex-shrink: 0;
  text-align: center;
}

.artdir-btn-profile:hover {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.artdir-btn-profile:focus-visible {
  outline: 2px solid rgba(255, 90, 31, 0.55);
  outline-offset: 2px;
}

/* ── 8. Empty state ──────────────────────────────────────────────── */
#artdir-empty {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

#artdir-empty.artdir-empty--visible {
  display: block;
}

.artdir-empty-title {
  font-size: 1.10rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
}

.artdir-empty-text {
  font-size: 0.88rem;
  color: rgba(232, 234, 240, 0.52);
  margin: 0 0 22px;
  line-height: 1.55;
}

.artdir-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.artdir-empty-btn-widen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 234, 240, 0.80);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.artdir-empty-btn-widen:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.24);
}

.artdir-empty-btn-rafi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #E1306C, #833AB4);
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(225, 48, 108, 0.22);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.artdir-empty-btn-rafi:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(225, 48, 108, 0.30);
}

/* ── 9. Load more ────────────────────────────────────────────────── */
.artdir-load-more-wrap {
  text-align: center;
  margin-top: 24px;
}

.artdir-btn-load-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 234, 240, 0.72);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.artdir-btn-load-more:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(232, 234, 240, 0.92);
}

.artdir-btn-load-more:focus-visible {
  outline: 2px solid rgba(167, 110, 255, 0.55);
  outline-offset: 2px;
}

.artdir-btn-load-more[hidden] {
  display: none;
}

/* ── 10. Responsive overrides ────────────────────────────────────── */

/* Desktop: 2-column card grid ≥641px */
@media (min-width: 641px) {
  #artdir-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .artdir-header {
    padding: 64px 0 36px;
  }

  .artdir-controls {
    gap: 14px;
  }

  .artdir-control-group {
    flex: 1 1 200px;
    max-width: 260px;
  }

  /* Desktop card hover */
  .artdir-card:hover {
    transform: translateY(-6px) scale(1.008);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
      0 28px 64px rgba(0, 0, 0, 0.50),
      0 0 36px rgba(225, 48, 108, 0.10);
  }
}

/* Desktop: 3-column ≥1060px */
@media (min-width: 1060px) {
  #artdir-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: tighten card layout ≤430px */
@media (max-width: 430px) {
  .artdir-card {
    padding: 18px 16px 14px;
  }

  .artdir-avatar {
    width: 68px;
    height: 68px;
    min-width: 68px;
  }

  .artdir-avatar-img,
  .artdir-avatar-initials-wrap,
  .artdir-avatar-silhouette {
    width: 68px;
    height: 68px;
  }

  .artdir-control-group {
    flex: 1 1 100%;
    max-width: none;
  }

  .artdir-controls-reset {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Very narrow — 320px */
@media (max-width: 340px) {
  .artdir-avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }

  .artdir-avatar-img,
  .artdir-avatar-initials-wrap,
  .artdir-avatar-silhouette {
    width: 60px;
    height: 60px;
  }

  .artdir-card-name {
    font-size: 0.88rem;
  }

  .artdir-card-desc {
    font-size: 0.72rem;
  }

  .artdir-price-amount {
    font-size: 0.96rem;
  }
}

/* ── 11. Accessibility / motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .artdir-spinner {
    animation: none;
    opacity: 0.5;
  }

  .artdir-card,
  .artdir-btn-reserve,
  .artdir-btn-profile,
  .artdir-btn-load-more,
  .artdir-controls-reset,
  .artdir-empty-btn-widen,
  .artdir-empty-btn-rafi {
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ARTISAN CARD PASSPORT V2 — canonical photo / FIXEO ID / truth CTA
   ═══════════════════════════════════════════════════════════════ */
.artdir-card--passport{
  padding:18px 16px 15px;
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 0,rgba(128,100,239,.075),transparent 18rem),
    radial-gradient(circle at 5% 12%,rgba(237,61,145,.055),transparent 15rem),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:0 16px 42px rgba(0,0,0,.16);
}
.artdir-card--passport .artdir-card-header{
  gap:12px;
  margin-bottom:10px;
  align-items:center;
}
.artdir-avatar--passport{
  width:70px;
  height:70px;
  min-width:70px;
  overflow:hidden;
  border-radius:18px;
  background:#111219!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.035);
}
.artdir-avatar--passport .artdir-avatar-img{
  width:70px;
  height:70px;
  border-radius:18px;
  object-fit:cover;
  object-position:center;
}
.artdir-fixeo-id{
  position:relative;
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(145deg,#c93a86,#664ac6 68%,#111219);
  border:1px solid rgba(255,255,255,.11);
  color:#fff;
}
.artdir-fixeo-id--v1{background:linear-gradient(145deg,#d72d80,#6f4cdb 68%,#111219)}
.artdir-fixeo-id--v2{background:linear-gradient(145deg,#be3f98,#4f61df 68%,#111219)}
.artdir-fixeo-id--v3{background:linear-gradient(145deg,#df3d78,#7b4ece 68%,#111219)}
.artdir-fixeo-id--v4{background:linear-gradient(145deg,#a64bb2,#4e5ac7 68%,#111219)}
.artdir-fixeo-id--v5{background:linear-gradient(145deg,#b83f8c,#5148c5 68%,#111219)}
.artdir-fixeo-id strong{
  font-size:1.38rem;
  font-weight:950;
  letter-spacing:-.055em;
  line-height:1;
}
.artdir-fixeo-id small{
  position:absolute;
  left:50%;
  bottom:7px;
  transform:translateX(-50%);
  white-space:nowrap;
  color:rgba(255,255,255,.46);
  font-size:.27rem;
  font-weight:900;
  letter-spacing:.12em;
}
.artdir-fixeo-id-brand{
  position:absolute;
  right:6px;
  top:6px;
  width:13px;
  height:13px;
  display:grid;
  place-items:center;
  border-radius:4px;
  background:linear-gradient(135deg,#ff8a35,#ed3d91 52%,#8064ef);
  color:#fff;
  font-size:.28rem;
  font-weight:950;
}
.artdir-passport-kicker{
  display:block;
  margin-bottom:3px;
  color:#ef6aab;
  font-size:.47rem;
  font-weight:900;
  letter-spacing:.11em;
}
.artdir-card--passport .artdir-card-name{
  font-size:1rem;
  margin-bottom:2px;
}
.artdir-passport-meta{
  color:rgba(255,255,255,.58);
  font-size:.69rem;
  font-weight:650;
}
.artdir-card--passport .artdir-card-desc{
  margin:2px 0 10px;
  color:rgba(255,255,255,.54);
  font-size:.72rem;
  line-height:1.48;
  -webkit-line-clamp:2;
}
.artdir-card-desc--empty{opacity:.68}
.artdir-trust--passport{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 10px;
}
.artdir-trust--passport .artdir-trust-item{
  min-height:27px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.58);
  font-size:.58rem;
}
.artdir-price--truth{
  margin:0 0 10px;
}
.artdir-price--truth .artdir-price-amount{
  margin:0 0 2px;
  color:#f2f3f6;
  font-size:.77rem;
  font-weight:800;
}
.artdir-price--truth .artdir-price-hint{
  color:rgba(255,255,255,.42);
  font-size:.56rem;
}
.artdir-btn-reserve--passport{
  min-height:52px;
  justify-content:flex-start;
  gap:9px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:15px;
  background:
    linear-gradient(135deg,#17181e,#101116) padding-box,
    linear-gradient(100deg,rgba(255,138,53,.68),rgba(237,61,145,.72) 50%,rgba(128,100,239,.68)) border-box;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  text-shadow:none;
}
.artdir-btn-reserve--passport:hover{
  transform:none;
  box-shadow:0 14px 32px rgba(0,0,0,.26);
}
.artdir-btn-reserve--passport .artdir-btn-f{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:linear-gradient(135deg,#ff8a35,#ed3d91 52%,#8064ef);
  font-size:.72rem;
  font-weight:950;
}
.artdir-btn-reserve--passport>b{
  margin-left:auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.055);
  font-size:.8rem;
}
.artdir-card--passport .artdir-btn-profile{
  min-height:34px;
  font-size:.7rem;
  color:rgba(255,255,255,.48);
}
.artdir-card--passport .artdir-divider{
  margin-bottom:10px;
}
@media(max-width:540px){
  .artdir-card--passport{
    padding:15px 13px 13px;
  }
  .artdir-avatar--passport,
  .artdir-avatar--passport .artdir-avatar-img,
  .artdir-fixeo-id{
    width:64px;
    height:64px;
    min-width:64px;
    border-radius:17px;
  }
  .artdir-fixeo-id strong{font-size:1.25rem}
  .artdir-trust--passport .artdir-trust-item{font-size:.54rem}
}


/* ═══════════════════════════════════════════════════════════════
   ANNuaire P0 — targeted booking owns the viewport on artisans.html
   Directory-only safety layer: this stylesheet is not loaded by Homepage.
   ═══════════════════════════════════════════════════════════════ */
body.fixeo-targeted-booking-open .navbar,
body.fixeo-targeted-booking-open .fixeo-gh-shell,
body.fixeo-targeted-booking-open .fixeo-gh-universal-shell,
body.fixeo-targeted-booking-open .fixeo-gh-source-shell,
body.fixeo-targeted-booking-open .fixeo-gh-mobile,
body.fixeo-targeted-booking-open #fixeo-gh-menu-portal,
body.fixeo-targeted-booking-open .fixeo-gh-mobile-bar{
  display:none!important;
}

body.fixeo-targeted-booking-open #fixeo-reservation-backdrop{
  z-index:11990!important;
}

body.fixeo-targeted-booking-open #fixeo-reservation-modal{
  position:fixed!important;
  inset:0!important;
  z-index:12000!important;
}


/* ═══════════════════════════════════════════════════════════════
   ARTISAN PASSPORT V2 — FINAL OPTICAL PASS
   Scope: artisans.html directory only.
   ═══════════════════════════════════════════════════════════════ */

#artdir-grid{
  align-items:stretch;
  gap:18px;
}

.artdir-card--passport{
  isolation:isolate;
  overflow:hidden;
  height:100%;
  padding:18px 16px 14px;
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0,rgba(128,100,239,.10),transparent 15rem),
    radial-gradient(circle at 0 0,rgba(237,61,145,.07),transparent 13rem),
    linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 20px 54px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.artdir-card--passport::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg,#ff8a35 0%,#ed3d91 48%,#8064ef 100%);
  opacity:.72;
}

.artdir-card--passport::after{
  content:"";
  position:absolute;
  z-index:0;
  width:150px;
  height:150px;
  right:-72px;
  top:-82px;
  border-radius:50%;
  background:rgba(128,100,239,.06);
  filter:blur(2px);
  pointer-events:none;
}

.artdir-card--passport > *{
  position:relative;
  z-index:1;
}

.artdir-card--passport .artdir-card-header{
  align-items:center;
  gap:13px;
  margin-bottom:11px;
}

.artdir-card--passport .artdir-identity{
  min-width:0;
  flex:1 1 auto;
}

.artdir-avatar--passport{
  width:72px;
  height:72px;
  min-width:72px;
  border-radius:19px;
  background:#101117!important;
  border:1px solid rgba(255,255,255,.095);
  box-shadow:
    0 12px 28px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.artdir-avatar--passport .artdir-avatar-img,
.artdir-avatar--passport .artdir-fixeo-id{
  width:72px;
  height:72px;
  border-radius:18px;
}

.artdir-card--passport[data-identity-mode="photo"] .artdir-avatar--passport{
  box-shadow:
    0 12px 30px rgba(0,0,0,.34),
    0 0 0 1px rgba(237,61,145,.08);
}

.artdir-passport-kicker{
  margin-bottom:4px;
  color:rgba(244,118,177,.86);
  font-size:.46rem;
  font-weight:900;
  letter-spacing:.135em;
  line-height:1.2;
}

.artdir-card--passport .artdir-card-name{
  max-width:100%;
  margin:0 0 3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f7f7f9;
  font-size:1.03rem;
  font-weight:850;
  letter-spacing:-.025em;
  line-height:1.2;
}

.artdir-passport-meta{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.55);
  font-size:.70rem;
  font-weight:650;
  line-height:1.35;
}

.artdir-passport-status{
  width:max-content;
  max-width:100%;
  min-height:23px;
  margin-top:7px;
  padding:4px 8px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:999px;
  font-size:.54rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.artdir-passport-status--verified{
  color:rgba(160,245,205,.92);
  background:rgba(52,211,153,.07);
  border:1px solid rgba(52,211,153,.16);
}

.artdir-passport-status--claimed{
  color:rgba(214,201,255,.86);
  background:rgba(128,100,239,.07);
  border:1px solid rgba(128,100,239,.15);
}

.artdir-card--passport .artdir-card-desc{
  margin:1px 0 12px;
  min-height:0;
  color:rgba(255,255,255,.50);
  font-size:.72rem;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.artdir-trust--passport{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 12px;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
}

.artdir-trust--passport .artdir-trust-item{
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:rgba(255,255,255,.47);
  font-size:.60rem;
  font-weight:650;
  line-height:1.35;
}

.artdir-trust--passport .artdir-trust-icon{
  width:17px;
  min-width:17px;
  opacity:.74;
}

.artdir-price--truth{
  margin:0 0 11px;
  padding:0;
}

.artdir-price-kicker{
  display:block;
  margin-bottom:4px;
  color:rgba(255,255,255,.28);
  font-size:.46rem;
  font-weight:900;
  letter-spacing:.12em;
}

.artdir-price--truth .artdir-price-amount{
  display:block;
  margin:0 0 2px;
  color:rgba(255,255,255,.88);
  font-size:.76rem;
  font-weight:800;
  line-height:1.35;
}

.artdir-price--truth .artdir-price-hint{
  display:block;
  color:rgba(255,255,255,.40);
  font-size:.57rem;
  font-weight:600;
  line-height:1.35;
}

.artdir-card--passport .artdir-action{
  margin-top:auto;
}

.artdir-card--passport .artdir-divider{
  display:none;
}

.artdir-btn-reserve--passport{
  width:100%;
  min-height:52px;
  padding:8px 9px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  color:#fff;
  border:1px solid transparent;
  border-radius:15px;
  background:
    linear-gradient(135deg,#18191f,#101116) padding-box,
    linear-gradient(100deg,rgba(255,138,53,.78),rgba(237,61,145,.76) 50%,rgba(128,100,239,.76)) border-box;
  box-shadow:
    0 13px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.025);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:-.01em;
}

.artdir-btn-reserve--passport .artdir-btn-f{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}

.artdir-btn-reserve--passport>b{
  margin-left:auto;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:10px;
  color:rgba(255,255,255,.78);
}

.artdir-card--passport .artdir-btn-profile{
  min-height:38px;
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:rgba(255,255,255,.45);
  font-size:.66rem;
  font-weight:700;
  text-decoration:none;
  transition:background .16s ease,color .16s ease;
}

.artdir-card--passport .artdir-btn-profile:hover{
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.035);
}

.artdir-card--passport .artdir-btn-reserve:focus-visible,
.artdir-card--passport .artdir-btn-profile:focus-visible{
  outline:2px solid rgba(237,61,145,.64);
  outline-offset:3px;
}

@media(min-width:641px){
  .artdir-card--passport:hover{
    transform:translateY(-5px);
    border-color:rgba(255,255,255,.14);
    box-shadow:
      0 28px 64px rgba(0,0,0,.30),
      0 0 34px rgba(128,100,239,.055);
  }

  .artdir-card--passport:hover::before{
    opacity:1;
  }

  .artdir-btn-reserve--passport:hover{
    transform:none;
    border-color:transparent;
    box-shadow:
      0 16px 34px rgba(0,0,0,.29),
      0 0 20px rgba(237,61,145,.06);
  }
}

@media(max-width:540px){
  #artdir-grid{
    gap:13px;
  }

  .artdir-card--passport{
    padding:16px 13px 12px;
    border-radius:20px;
  }

  .artdir-card--passport .artdir-card-header{
    gap:11px;
  }

  .artdir-avatar--passport,
  .artdir-avatar--passport .artdir-avatar-img,
  .artdir-avatar--passport .artdir-fixeo-id{
    width:65px;
    height:65px;
    min-width:65px;
    border-radius:17px;
  }

  .artdir-fixeo-id strong{
    font-size:1.26rem;
  }

  .artdir-card--passport .artdir-card-name{
    font-size:.96rem;
  }

  .artdir-passport-meta{
    font-size:.66rem;
  }

  .artdir-passport-status{
    margin-top:6px;
    font-size:.51rem;
  }

  .artdir-trust--passport{
    gap:5px;
    margin-bottom:10px;
    padding:8px 0;
  }

  .artdir-btn-reserve--passport{
    min-height:50px;
  }

  .artdir-card--passport .artdir-btn-profile{
    min-height:36px;
  }
}

@media(max-width:350px){
  .artdir-card--passport{
    padding-left:11px;
    padding-right:11px;
  }

  .artdir-avatar--passport,
  .artdir-avatar--passport .artdir-avatar-img,
  .artdir-avatar--passport .artdir-fixeo-id{
    width:60px;
    height:60px;
    min-width:60px;
  }

  .artdir-passport-kicker{
    font-size:.42rem;
  }

  .artdir-btn-reserve--passport{
    font-size:.70rem;
  }
}