/* ==========================================================================
   TALENT GN — Design référence (inspiré ComeUp, charte renforcée)
   Charte : Bleu/Teal (confiance, digital), Jaune (créativité), Blanc (clarté)
   + identité Guinée (rouge, jaune, vert en accents)
   ========================================================================== */

:root {
  /* Charte principale */
  --tg-teal: #14b8a6;
  --tg-teal-dark: #0d9488;
  --tg-teal-light: #2dd4bf;
  --tg-teal-glow: rgba(20, 184, 166, 0.35);
  --tg-yellow: #facc15;
  --tg-yellow-soft: #fde047;
  --tg-white: #ffffff;
  --tg-white-soft: #f1f5f9;
  --tg-black: #0a0f1a;
  --tg-surface: #0f172a;
  --tg-surface-elevated: #1e293b;
  --tg-border: #334155;
  --tg-muted: #64748b;
  --tg-muted-light: #94a3b8;
  /* Guinée */
  --gn-red: #dc2626;
  --gn-yellow: #eab308;
  --gn-green: #16a34a;
  /* UI */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 9999px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition: 0.2s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tg-white-soft);
  background: var(--tg-black);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

/* Médias : ne débordent pas du conteneur */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

pre,
code {
  max-width: 100%;
}

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  max-width: 100%;
  background: #0e1624;
  border-bottom: 1px solid rgba(51, 65, 85, 0.8);
  overflow: visible; /* laisse les dropdowns déborder sous le header */
}

.header-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.header-back-global {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: -4px;
  margin-right: -4px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--tg-muted-light, #cbd5e1);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.header-back-global:hover {
  color: var(--tg-white-soft, #f1f5f9);
  background: rgba(255, 255, 255, 0.1);
}

.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.logo img {
  display: block;
  height: 38px;
  width: auto;
  transition: opacity var(--transition);
}

.logo:hover img {
  opacity: 0.9;
}

.search-form-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 540px;
}

.search-form {
  display: flex;
  align-items: center;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.search-suggestions.is-open {
  opacity: 1;
  visibility: visible;
}

.search-suggestions[hidden] {
  display: none !important;
}

.search-suggestions.is-open[hidden] {
  display: block !important;
}

.search-suggestions-group {
  padding: 8px 0;
  border-bottom: 1px solid var(--tg-border);
}

.search-suggestions-group:last-child {
  border-bottom: 0;
}

.search-suggestions-label {
  display: block;
  padding: 6px 14px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tg-muted);
}

.search-suggestions-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-suggestions-item {
  display: block;
  padding: 10px 14px;
  color: var(--tg-white-soft);
  text-decoration: none;
  font-size: 14px;
  transition: background var(--transition), color var(--transition);
}

.search-suggestions-item:hover {
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-teal-light);
}

.search-suggestions-empty {
  padding: 16px 14px;
  font-size: 14px;
  color: var(--tg-muted);
}

.search-form:focus-within {
  border-color: var(--tg-teal);
  box-shadow: 0 0 0 3px var(--tg-teal-glow);
}

.search-form input {
  flex: 1;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: var(--tg-white);
  font-size: 16px;
  font-family: inherit;
}

.search-form input::placeholder {
  color: var(--tg-muted);
}

.search-form input:focus {
  outline: none;
}

.btn-search {
  padding: 12px 16px;
  border: 0;
  background: var(--tg-teal);
  color: var(--tg-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.btn-search:hover {
  background: var(--tg-teal-light);
}

/* Langue et Connexion tout à droite */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--tg-white-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
}

.icon-btn:hover {
  background: var(--tg-surface-elevated);
  color: var(--tg-teal-light);
}

/* Langue : même design que l'icône profil (rond, blanc) */
.lang-dropdown .lang-trigger .avatar.icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-white-soft);
}

.lang-dropdown .lang-trigger:hover .avatar.icon-only {
  color: var(--tg-teal-light);
}

.lang-dropdown-form {
  margin: 0;
}

.lang-dropdown-form .dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}

.lang-dropdown-form .dropdown-item:hover {
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-teal-light);
}

.lang-dropdown-form .dropdown-item.is-active {
  color: var(--tg-teal-light);
  font-weight: 600;
}

.lang-check {
  margin-left: 4px;
  opacity: 0.9;
}

.icon-btn.profile .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-teal), var(--tg-teal-dark));
  color: var(--tg-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Dropdown profil (Connexion / Inscription) */
.profile-dropdown {
  position: relative;
}

.header-inner {
  overflow: visible;
}

.profile-trigger {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

.profile-trigger .avatar.icon-only {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tg-surface-elevated);
  color: var(--tg-muted-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

.profile-trigger:hover .avatar.icon-only {
  background: var(--tg-border);
  color: var(--tg-teal-light);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 300;
}

.dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 10px 14px;
  color: var(--tg-white-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}

.dropdown-item:hover {
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-teal-light);
}

.dropdown-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--tg-border);
}

/* Dropdown compte connecté : avatar 32px (photo Google limitée) */
.account-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.account-trigger .avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tg-teal), var(--tg-teal-dark));
  color: var(--tg-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.account-trigger .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.account-trigger:hover .avatar {
  filter: brightness(1.1);
}

/* S'assurer que le dropdown compte est bien visible */
.account-dropdown .dropdown-menu,
#account-dropdown-menu {
  z-index: 350;
}

.lang-dropdown .dropdown-menu {
  right: 0;
  left: auto;
  min-width: 140px;
}

/* Alerte « Complétez votre profil » */
.profile-incomplete-alert {
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.15), rgba(20, 184, 166, 0.08));
  border-bottom: 1px solid rgba(250, 204, 21, 0.3);
  padding: 12px 28px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.profile-incomplete-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-incomplete-text {
  font-size: 14px;
  color: var(--tg-white-soft);
}

.profile-incomplete-alert .btn-sm {
  flex-shrink: 0;
}

/* Sur les pages à fond clair (plp-page, etc.) : bannière avec fond opaque */
body.plp-page .profile-incomplete-alert {
  background: linear-gradient(90deg, #1e3a2e, #0f2a2a);
  border-bottom: 1px solid rgba(20,184,166,.35);
}
body.plp-page .profile-incomplete-text {
  color: #d1fae5;
}

/* Modales Connexion / Inscription */
body.modal-open,
body.drawer-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-overlay[hidden] {
  display: none !important;
}

.modal-overlay:not([hidden]).is-open {
  display: flex;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  max-height: min(90dvh, 92vh);
  overflow-y: auto;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px 24px;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--tg-muted-light);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.modal-close:hover {
  background: var(--tg-surface);
  color: var(--tg-white);
}

.modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--tg-white);
}

.modal-subtitle {
  font-size: 14px;
  color: var(--tg-muted);
  margin: 0 0 20px;
}

.modal-box--wide {
  max-width: 640px;
}

/* Modale plein écran (aperçu Markdown des modèles de service) */
.modal-overlay--fullscreen {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.modal-fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  max-height: 100dvh;
  background: var(--tg-surface-elevated);
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

.modal-fullscreen-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--tg-border);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, var(--tg-surface-elevated) 100%);
}

.modal-fullscreen-header-text {
  min-width: 0;
  flex: 1;
}

.modal-fullscreen-kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tg-teal);
}

.modal-fullscreen-title {
  margin: 0;
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  font-weight: 700;
  color: var(--tg-white-soft);
  line-height: 1.25;
}

.modal-fullscreen-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 4px;
  padding: 4px 10px;
}

.modal-fullscreen-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -8px 0 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tg-muted-light);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.modal-fullscreen-close:hover {
  background: var(--tg-surface);
  color: var(--tg-white);
  border-color: var(--tg-border);
}

.modal-fullscreen-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-fullscreen-body-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.modal-fullscreen-body-inner::-webkit-scrollbar {
  width: 8px;
}

.modal-fullscreen-body-inner::-webkit-scrollbar-track {
  background: transparent;
}

.modal-fullscreen-body-inner::-webkit-scrollbar-thumb {
  background: var(--tg-border);
  border-radius: 4px;
}

.tpl-preview-modal-paper {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 5vw, 48px);
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
}

/* ── Override profile-markdown for modal reading mode ── */
.tpl-preview-modal-md.profile-markdown {
  font-size: clamp(0.92rem, 1.5vw, 1.02rem);
  line-height: 1.7;
  color: var(--tg-white-soft);
}

.tpl-preview-modal-md.profile-markdown h1 {
  font-size: clamp(1.4rem, 3.5vw, 1.75rem);
  font-weight: 800;
  padding-bottom: 0.45em;
  margin-top: 0;
  margin-bottom: 0.75em;
  border-bottom: 2px solid rgba(20, 184, 166, 0.35);
  background: linear-gradient(90deg, var(--tg-white) 60%, var(--tg-teal-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tpl-preview-modal-md.profile-markdown h2 {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.6em;
  color: var(--tg-white);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tpl-preview-modal-md.profile-markdown h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--tg-teal);
  border-radius: 2px;
  flex-shrink: 0;
}

.tpl-preview-modal-md.profile-markdown h3 {
  font-size: clamp(0.98rem, 2vw, 1.1rem);
  font-weight: 700;
  margin-top: 1.5em;
  color: var(--tg-teal-light);
}

.tpl-preview-modal-md.profile-markdown p {
  margin: 0 0 1em;
  color: var(--tg-white-soft);
}

.tpl-preview-modal-md.profile-markdown ul,
.tpl-preview-modal-md.profile-markdown ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}
.tpl-preview-modal-md.profile-markdown li {
  margin: 0.3em 0;
  line-height: 1.65;
  color: var(--tg-white-soft);
}
.tpl-preview-modal-md.profile-markdown li > ul,
.tpl-preview-modal-md.profile-markdown li > ol {
  margin: 0.3em 0 0.3em;
}

.tpl-preview-modal-md.profile-markdown strong {
  color: var(--tg-white);
  font-weight: 700;
}

.tpl-preview-modal-md.profile-markdown em {
  color: var(--tg-muted-light);
  font-style: italic;
}

.tpl-preview-modal-md.profile-markdown hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, var(--tg-border), rgba(20,184,166,.3), var(--tg-border));
  margin: 1.8em 0;
}

.tpl-preview-modal-md.profile-markdown blockquote {
  margin: 1.2em 0;
  padding: 0.9em 1.1em;
  border-left: 3px solid var(--tg-teal);
  background: linear-gradient(90deg, rgba(20,184,166,.07), transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tpl-preview-modal-md.profile-markdown blockquote p {
  margin: 0;
  color: var(--tg-teal-light);
  font-style: italic;
}

.tpl-preview-modal-md.profile-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: .91rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tpl-preview-modal-md.profile-markdown th {
  background: rgba(20,184,166,.16);
  color: var(--tg-teal-light);
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid rgba(20,184,166,.3);
}
.tpl-preview-modal-md.profile-markdown td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--tg-border);
  color: var(--tg-white-soft);
}
.tpl-preview-modal-md.profile-markdown tr:last-child td {
  border-bottom: none;
}
.tpl-preview-modal-md.profile-markdown tr:nth-child(even) td {
  background: rgba(255,255,255,.025);
}

.tpl-preview-modal-md.profile-markdown code {
  background: rgba(20,184,166,.09);
  color: var(--tg-teal-light);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: .88em;
  font-family: ui-monospace, Menlo, monospace;
  border: 1px solid rgba(20,184,166,.18);
}

.tpl-preview-modal-md.profile-markdown pre {
  margin: 1.2em 0;
  padding: 18px 20px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.tpl-preview-modal-md.profile-markdown pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--tg-teal-light);
  font-size: .88rem;
  line-height: 1.6;
}

.tpl-preview-modal-md.profile-markdown a {
  color: var(--tg-teal-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Animated entrance for modal content */
.modal-overlay--fullscreen.is-open .tpl-preview-modal-paper {
  animation: paperSlideIn .22s ease-out;
}
@keyframes paperSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-fullscreen-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--tg-border);
  background: var(--tg-surface);
}

.modal-fullscreen-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 480px) {
  .modal-fullscreen-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .modal-fullscreen-footer .btn-primary,
  .modal-fullscreen-footer .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Champ avec icône d'aide (ex. Description Markdown) */
.label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.markdown-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--tg-border);
  border-radius: 50%;
  background: var(--tg-surface);
  color: var(--tg-muted-light);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.markdown-help-trigger:hover {
  border-color: var(--tg-teal);
  color: var(--tg-teal);
  background: var(--tg-surface-elevated);
}

/* Contenu modal aide Markdown */
.markdown-help-section {
  margin-bottom: 20px;
}

.markdown-help-section:last-child {
  margin-bottom: 0;
}

.markdown-help-h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--tg-white-soft);
}

.markdown-help-hint {
  font-size: 13px;
  color: var(--tg-muted);
  margin: 0 0 8px;
}

.markdown-help-list {
  margin: 0 0 16px;
  padding-left: 1.2em;
  font-size: 14px;
  color: var(--tg-muted-light);
}

.markdown-help-list li {
  margin-bottom: 4px;
}

.markdown-help-pre {
  margin: 0 0 16px;
  padding: 14px;
  background: var(--tg-bg);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tg-muted-light);
  white-space: pre-wrap;
  word-break: break-word;
}

.markdown-help-pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.markdown-help-preview {
  padding: 14px;
  background: var(--tg-bg);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.auth-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--tg-border);
  background: var(--tg-surface);
  color: var(--tg-white-soft);
  transition: background var(--transition), border-color var(--transition);
}

.auth-btn:hover {
  background: var(--tg-border);
  border-color: var(--tg-muted);
}

.auth-google { border-color: rgba(255,255,255,0.15); }
.auth-google:hover { border-color: #ea4335; background: rgba(234, 67, 53, 0.06); }

/* Google Sign-In : fond clair + texte foncé (guidelines sur modales sombres) */
.modal-overlay .auth-google {
  background: #fff;
  color: #1f1f1f;
  border-color: #747775;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.modal-overlay .auth-google:hover {
  background: #f8f9fa;
  border-color: #5f6368;
  color: #1f1f1f;
}
.auth-linkedin:hover { border-color: #0a66c2; background: rgba(10, 102, 194, 0.1); }

.auth-icon {
  flex-shrink: 0;
  display: block;
}

.auth-divider {
  text-align: center;
  font-size: 13px;
  color: var(--tg-muted);
  margin: 0 0 16px;
}

.auth-form .form-group {
  margin-bottom: 14px;
}

.auth-form .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--tg-muted-light);
  margin-bottom: 6px;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.form-label-row label { margin-bottom: 0; }
.form-label-link {
  font-size: 12px;
  color: var(--tg-teal-light);
  text-decoration: none;
}
.form-label-link:hover { text-decoration: underline; }

.auth-form .form-group input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  background: var(--tg-surface);
  color: var(--tg-white);
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--transition);
}

.auth-form .form-group input:focus {
  outline: none;
  border-color: var(--tg-teal);
}

.auth-form .btn-block {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
}

/* ── Lien d'activation : déclencheur ── */
.auth-resend-trigger-row {
  margin-top: 18px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--tg-muted, #94a3b8);
}
.auth-link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  color: var(--tg-teal, #2dd4bf);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-link-btn:hover { color: #5eead4; }

/* ── Vue renvoi d'activation ── */
.auth-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--tg-muted, #94a3b8);
  margin-bottom: 20px;
}
.auth-back-btn:hover { color: #e2e8f0; }
.auth-resend-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(45,212,191,.1);
  border: 2px solid rgba(45,212,191,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
  color: var(--tg-teal, #2dd4bf);
}
.auth-resend-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--tg-muted, #94a3b8);
  line-height: 1.4;
}

/* ----- Main ----- */
.site-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@supports (overflow: clip) {
  .site-main {
    overflow-x: clip;
  }
}

/* ----- Pages Compte (Mon profil, Mes services, etc.) ----- */
.compte-page {
  padding: 32px 28px 64px;
  max-width: 100%;
  box-sizing: border-box;
}

.compte-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
}

.compte-nav {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.compte-nav-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}

.compte-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compte-nav-link {
  display: block;
  padding: 10px 14px;
  color: var(--tg-white-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.compte-nav-link:hover {
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-teal-light);
}

.compte-nav-link.is-active {
  background: rgba(20, 184, 166, 0.18);
  color: var(--tg-teal-light);
}

.compte-nav-link--logout {
  color: #f87171;
  display: flex;
  align-items: center;
  gap: 8px;
}
.compte-nav-link--logout:hover {
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

.compte-nav-divider {
  height: 1px;
  background: var(--tg-border);
  margin: 12px 0;
  list-style: none;
}

/* ── Layout compte unifié (toutes les pages /compte/) ─────────────── */
/*
 * Deux patterns coexistent historiquement :
 *   OLD: .compte-page > .compte-inner > .compte-content
 *   NEW: .compte-layout > .compte-main
 * On définit ici les alias NEW pour unifier sans casser l'ancien.
 */
.compte-layout {
  padding: 32px 28px 64px;
  min-height: calc(100vh - 72px);
  max-width: 100%;
  box-sizing: border-box;
}

.compte-layout > .compte-nav,
.compte-layout > aside.compte-nav {
  /* Le nav reste sticky via .compte-nav déjà défini */
}

/* Grille 2-col : nav (220px) + contenu (1fr) */
.compte-layout {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding: 32px 28px 64px;
}

.compte-main {
  min-width: 0; /* évite overflow dans grid */
}

/* Titre de page (alias de .compte-heading) */
.compte-title {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 800;
  color: var(--tg-white);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.compte-subtitle {
  margin: 0 0 28px;
  color: var(--tg-muted-light);
  font-size: 14px;
  line-height: 1.5;
}

/* En-tête de section (title + action button côte à côte) */
.compte-section-header {
  margin-bottom: 24px;
}

/* Responsive : mobile sidebar collapse */
@media (max-width: 860px) {
  .compte-layout {
    grid-template-columns: 1fr;
    padding: 20px 16px 48px;
    gap: 24px;
  }
  .compte-layout .compte-nav {
    position: static;
  }
}

/* ── Badges & états vides globaux ─────────────────────────────────── */
.page-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--tg-teal);
  color: var(--tg-black);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 8px;
}

.empty-card {
  text-align: center;
  padding: 56px 24px 40px;
  background: var(--tg-surface-elevated);
  border: 1px dashed var(--tg-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.empty-card svg { opacity: .4; }

.empty-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tg-white);
}

.empty-card-sub {
  margin: 0;
  font-size: 14px;
  color: var(--tg-muted-light);
  line-height: 1.5;
  max-width: 360px;
}

.compte-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--tg-teal);
  color: var(--tg-black);
  vertical-align: middle;
}

.icon-btn-notifications {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 999px;
  background: var(--tg-teal);
  color: var(--tg-black);
  pointer-events: none;
}

.menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--tg-teal);
  color: var(--tg-black);
}

.site-messages {
  position: sticky;
  top: var(--header-height, 68px);
  z-index: 900;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 28px 0;
  box-sizing: border-box;
}

.site-message {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
}

.site-message--success {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.site-message--error {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.site-message--warning {
  background: rgba(250, 204, 21, 0.1);
  color: #fde047;
  border: 1px solid rgba(250, 204, 21, 0.25);
}

.site-message--info {
  background: rgba(20, 184, 166, 0.1);
  color: var(--tg-teal-light);
  border: 1px solid rgba(20, 184, 166, 0.25);
}

.compte-section-header--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.notifications-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tg-border);
}

.notification-item--unread {
  background: rgba(20, 184, 166, 0.04);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: var(--radius-sm);
}

.notification-item-link,
.notification-item-text {
  color: var(--tg-white-soft);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
}

.notification-item-link:hover {
  color: var(--tg-teal-light);
}

.notification-item-time {
  display: block;
  font-size: 12px;
  margin-top: 6px;
}

.notification-item-action {
  flex-shrink: 0;
}

.btn-text {
  background: none;
  border: none;
  color: var(--tg-teal-light);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 0;
}

.btn-text:hover {
  text-decoration: underline;
}

.notifications-empty {
  padding: 48px 24px;
}

.demande-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.demande-decision-form {
  margin: 0;
}

.demande-waiting-note,
.demande-closed-note {
  margin-top: 12px;
  font-size: 14px;
}

.historique-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.historique-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tg-border);
}

.historique-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  flex: 1;
}

.historique-link:hover .historique-title {
  color: var(--tg-teal-light);
}

.historique-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--tg-surface-elevated);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.historique-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.historique-thumb--round {
  border-radius: 50%;
}

.historique-placeholder {
  font-size: 13px;
  font-weight: 700;
  color: var(--tg-muted);
}

.historique-title {
  display: block;
  font-weight: 600;
  color: var(--tg-white);
  font-size: 15px;
}

.historique-sub {
  display: block;
  font-size: 13px;
  margin-top: 2px;
}

.historique-time {
  font-size: 12px;
  flex-shrink: 0;
}

.service-detail-plan-own {
  display: block;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
}

.compte-content {
  min-width: 0;
}

.compte-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 12px;
}

.compte-placeholder {
  text-align: center;
  padding: 48px 24px;
}

.compte-placeholder-icon {
  display: block;
  font-size: 3rem;
  color: var(--tg-teal);
  opacity: 0.7;
  margin-bottom: 16px;
}

.compte-placeholder-text {
  font-size: 1.05rem;
  color: var(--tg-muted-light);
  margin: 0 0 24px;
}

.compte-intro {
  font-size: 1.05rem;
  color: var(--tg-muted-light);
  line-height: 1.6;
  margin: 0;
}

/* ----- Mes services ----- */
.mes-services-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.mes-services-header .compte-heading {
  margin: 0 0 8px;
}

.mes-services-header .compte-intro {
  margin: 0;
}

.mes-services-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mes-services-add-icon {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
}

.mes-services-empty-state {
  padding: 48px 28px;
  text-align: center;
  background: var(--tg-surface);
  border: 1px dashed var(--tg-border);
  border-radius: var(--radius);
}

.mes-services-empty-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tg-white-soft);
  margin: 0 0 12px;
}

.mes-services-empty-state p:last-of-type {
  margin: 0 0 20px;
  color: var(--tg-muted-light);
}

/* ----- Demandes & Messages ----- */
.demandes-empty,
.demandes-list {
  margin-top: 24px;
}

.demandes-empty {
  padding: 32px 24px;
  text-align: center;
  background: var(--tg-surface);
  border: 1px dashed var(--tg-border);
  border-radius: var(--radius);
}

.demandes-empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tg-white-soft);
  margin: 0 0 12px;
}

.demandes-empty p {
  margin: 0 0 20px;
  color: var(--tg-muted-light);
}

.demandes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demande-card {
  margin: 0;
}

.demande-card-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.demande-card-link:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.demande-card-main {
  flex: 1;
  min-width: 0;
}

.demande-card-service {
  font-weight: 600;
  color: var(--tg-teal-light);
  display: block;
  margin-bottom: 4px;
}

.demande-card-parties {
  font-size: 14px;
  color: var(--tg-muted-light);
}

.demande-card-preview {
  font-size: 14px;
  color: var(--tg-muted);
  margin: 8px 0 0;
  line-height: 1.4;
}

.demande-card-last {
  font-size: 12px;
  color: var(--tg-muted);
  margin: 4px 0 0;
}

.demande-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.demande-card-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

.demande-card-status--pending {
  background: rgba(251, 191, 36, 0.2);
  color: var(--tg-yellow-soft);
}

.demande-card-status--accepted {
  background: rgba(20, 184, 166, 0.2);
  color: var(--tg-teal-light);
}

.demande-card-status--declined {
  background: rgba(100, 116, 139, 0.25);
  color: var(--tg-muted-light);
}

.demande-card-date {
  font-size: 12px;
  color: var(--tg-muted);
}

/* Détail demande (conversation type chat) */
.demande-detail-content {
  max-width: 720px;
}

.demande-detail-header {
  margin-bottom: 24px;
}

.demande-detail-meta {
  margin-top: 12px;
  font-size: 14px;
  color: var(--tg-muted-light);
}

.demande-detail-service a {
  color: var(--tg-teal);
  text-decoration: none;
}

.demande-detail-service a:hover {
  color: var(--tg-teal-light);
}

.demande-detail-status {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.demande-detail-status--pending { background: rgba(251, 191, 36, 0.2); color: var(--tg-yellow-soft); }
.demande-detail-status--accepted { background: rgba(20, 184, 166, 0.2); color: var(--tg-teal-light); }
.demande-detail-status--declined { background: rgba(100, 116, 139, 0.25); color: var(--tg-muted-light); }

.demande-detail-actions {
  margin-top: 16px;
}

.demande-detail-actions .btn-primary {
  display: inline-flex;
}

.demande-detail-paid {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-teal-light);
}

.demande-chat-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  background: var(--tg-surface);
  overflow: hidden;
  min-height: 320px;
  max-height: min(70vh, 640px);
}

.demande-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.demande-chat-messages .chat-msg {
  max-width: min(85%, 520px);
}

.demande-chat-initial .chat-msg-body {
  white-space: pre-wrap;
  word-break: break-word;
}

.demande-initial-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tg-teal);
  margin-bottom: 8px;
}

.demande-initial-subject {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--tg-white-soft);
}

.demande-initial-extra {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.demande-chat-composer {
  flex-shrink: 0;
  padding: 16px;
  border-top: 1px solid var(--tg-border);
  background: var(--tg-surface-elevated);
}

.demande-reply-error {
  margin: 0 0 10px;
}

.demande-reply-form textarea.demande-reply-textarea,
.demande-reply-form textarea.input-field.textarea {
  width: 100%;
  min-height: 88px;
  max-height: 200px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  background: var(--tg-surface);
  color: var(--tg-white-soft);
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.demande-reply-form textarea:focus {
  outline: none;
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.demande-reply-actions {
  display: flex;
  justify-content: flex-end;
}

.demande-reply-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 540px) {
  .demande-chat-panel {
    max-height: none;
    min-height: 280px;
    border-radius: var(--radius-sm);
  }

  .demande-chat-messages .chat-msg {
    max-width: 92%;
  }
}

/* ----- Checkout / Paiement ----- */
.checkout-content {
  max-width: 720px;
}

.checkout-header {
  margin-bottom: 28px;
}

.checkout-intro {
  margin-top: 8px;
  font-size: 15px;
  color: var(--tg-muted-light);
  line-height: 1.5;
}

.checkout-layout {
  display: grid;
  gap: 28px;
}

@media (min-width: 640px) {
  .checkout-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.checkout-recap {
  padding: 24px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
}

.checkout-recap-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--tg-white);
}

.checkout-recap-service a {
  color: var(--tg-teal);
  text-decoration: none;
  font-weight: 600;
}

.checkout-recap-service a:hover {
  color: var(--tg-teal-light);
}

.checkout-recap-provider {
  display: block;
  font-size: 14px;
  color: var(--tg-muted-light);
  margin-top: 6px;
}

.checkout-recap-dl {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--tg-border);
  font-size: 14px;
}

.checkout-recap-dl dt {
  color: var(--tg-muted-light);
  margin-top: 10px;
}

.checkout-recap-dl dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--tg-white-soft);
}

.checkout-recap-dl .checkout-total {
  font-size: 1.1rem;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tg-border);
}

.checkout-recap-dl dd.checkout-total {
  color: var(--tg-teal-light);
}

.checkout-form-section {
  padding: 24px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
}

.checkout-form-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--tg-white);
}

.checkout-form-note {
  font-size: 14px;
  color: var(--tg-muted-light);
  margin-bottom: 20px;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.payment-method-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition);
}

.payment-method-option:has(input:checked) {
  border-color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.08);
}

.payment-method-label {
  font-weight: 500;
  color: var(--tg-white-soft);
}

.checkout-actions .btn-lg {
  padding: 16px 24px;
  font-size: 16px;
  width: 100%;
}

.checkout-disclaimer {
  margin-top: 12px;
  font-size: 13px;
  color: var(--tg-muted);
}

/* ----- Confirmation paiement ----- */
.payment-success-content {
  max-width: 520px;
  margin: 0 auto;
}

.payment-success-box {
  padding: 40px 32px;
  text-align: center;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
}

.payment-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.2);
  border-radius: 50%;
}

.payment-success-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--tg-white);
}

.payment-success-text {
  font-size: 15px;
  color: var(--tg-muted-light);
  margin: 0 0 12px;
  line-height: 1.5;
}

.payment-success-note {
  font-size: 14px;
  color: var(--tg-muted);
  margin: 20px 0 24px;
  padding: 16px;
  background: var(--tg-surface);
  border-radius: var(--radius-sm);
}

.payment-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.demande-form .form-row .form-group.full-width {
  grid-column: 1 / -1;
}

.mes-services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mes-services-card {
  display: flex;
  gap: 24px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
}

.mes-services-card:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.mes-services-card-thumb {
  flex-shrink: 0;
  width: 200px;
  display: block;
  background: var(--tg-black);
}

.mes-services-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/10;
  display: block;
}

.mes-services-card-thumb-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--tg-surface-elevated) 0%, var(--tg-border) 100%);
}

.mes-services-card-thumb {
  position: relative;
}

.mes-services-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.mes-services-card-badge--draft {
  background: var(--tg-muted);
  color: var(--tg-white-soft);
}

.mes-services-card-badge--published {
  background: var(--tg-teal);
  color: var(--tg-black);
}

.mes-services-card-badge--featured {
  background: var(--tg-yellow);
  color: var(--tg-black);
}

.mes-services-card-body {
  flex: 1;
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mes-services-card-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 13px;
}

.mes-services-card-status-label {
  color: var(--tg-muted);
  font-weight: 500;
}

.mes-services-card-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

.mes-services-card-status--published {
  background: rgba(20, 184, 166, 0.2);
  color: var(--tg-teal-light);
}

.mes-services-card-status--draft {
  background: rgba(100, 116, 139, 0.25);
  color: var(--tg-muted-light);
}

.mes-services-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.mes-services-card-title a {
  color: var(--tg-white-soft);
  text-decoration: none;
}

.mes-services-card-title a:hover {
  color: var(--tg-teal-light);
}

.mes-services-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--tg-muted-light);
  margin: 0;
}

.mes-services-card-category {
  color: var(--tg-teal);
}

.mes-services-card-price {
  font-weight: 600;
  color: var(--tg-teal);
}

.mes-services-card-stats {
  font-size: 13px;
  color: var(--tg-muted);
  margin: 0;
}

.mes-services-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}

.mes-services-card-edit-hint {
  font-size: 12px;
  color: var(--tg-muted);
}

.service-create-header {
  margin-bottom: 20px;
}

/* Utilitaire accessibilité */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- En-tête page formulaire service ----- */
.compte-content--form .service-form-page-header {
  margin-bottom: 32px;
}

.service-form-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.service-form-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.service-form-page-intro {
  font-size: 15px;
  color: var(--tg-muted-light);
  margin: 0;
  line-height: 1.5;
}

/* ----- Formulaire service : sections en cartes ----- */
.compte-content .service-form {
  max-width: 780px;
}

.service-form-section {
  margin-bottom: 28px;
  padding: 28px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.service-form-section + .service-form-section {
  margin-top: 0;
}

.service-form-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tg-white);
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--tg-teal);
}

.service-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.service-form .form-row:last-of-type {
  margin-bottom: 0;
}

.service-form .form-row.single {
  grid-template-columns: 1fr;
}

.service-form .form-row .form-group.full-width {
  grid-column: 1 / -1;
}

.service-form .form-group {
  margin-bottom: 0;
}

/* Bloc domaine : checkbox "Créer un domaine" + select ou champ nom */
.service-form-domain-block {
  margin-bottom: 8px;
}

.service-form-create-domain-toggle {
  margin-bottom: 16px;
}

.service-form-domain-hidden {
  display: none !important;
}

.service-form-section-desc {
  font-size: 14px;
  color: var(--tg-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

/* Callout "à l'étape suivante" (création) */
.service-form-callout {
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid rgba(20, 184, 166, 0.35);
  border-radius: var(--radius-sm);
}

.service-form-callout p {
  margin: 0;
  font-size: 14px;
  color: var(--tg-muted-light);
}

.service-form-callout strong {
  color: var(--tg-teal-light);
}

.service-form-section--media .service-form-section-title {
  margin-bottom: 12px;
}

.service-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-muted-light);
  margin-bottom: 8px;
}

.service-form .input-field,
.service-form input[type="text"],
.service-form input[type="number"],
.service-form input[type="url"],
.service-form select,
.service-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  background: var(--tg-surface);
  color: var(--tg-white-soft);
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}

.service-form .input-field:focus,
.service-form input:focus,
.service-form select:focus,
.service-form textarea:focus {
  outline: none;
  border-color: var(--tg-teal);
  box-shadow: 0 0 0 3px var(--tg-teal-glow);
}

.service-form .textarea,
.service-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Zone upload image de couverture */
.service-form-cover-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 24px;
  border: 2px dashed var(--tg-border);
  border-radius: var(--radius-sm);
  background: var(--tg-surface);
  transition: border-color var(--transition), background var(--transition);
}

.service-form-cover-zone:hover {
  border-color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.06);
}

.service-form-cover-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.service-form-cover-zone-text {
  font-size: 14px;
  color: var(--tg-muted);
  pointer-events: none;
}

.service-form-cover-zone-text em {
  color: var(--tg-teal);
  font-style: normal;
  font-weight: 600;
}

.service-form-cover-current,
.service-form-cover-preview {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  border: 1px solid var(--tg-border);
  display: block;
}

.service-form-cover-preview[src=""] {
  display: none !important;
}

.service-form-cover-zone {
  position: relative;
}

.service-form-cover-zone.has-preview .service-form-cover-zone-text {
  display: none;
}

/* Statut publication (Brouillon / Publié) */
.service-form-section--status {
  background: rgba(20, 184, 166, 0.06);
  border-color: rgba(20, 184, 166, 0.25);
}

.service-form-status-block {
  margin: 0;
}

.service-form-status-toggle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tg-white-soft);
}

.service-form-status-hint {
  font-size: 13px;
  color: var(--tg-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* Zone multi-fichiers (médias) */
.service-media-multi-zone {
  position: relative;
  min-height: 100px;
  padding: 24px;
  border: 2px dashed var(--tg-teal);
  border-radius: var(--radius-sm);
  background: rgba(20, 184, 166, 0.06);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), background var(--transition);
}

.service-media-multi-zone:hover {
  background: rgba(20, 184, 166, 0.1);
  border-color: var(--tg-teal-light);
}

.service-media-multi-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.service-media-multi-text {
  font-size: 14px;
  color: var(--tg-muted-light);
  pointer-events: none;
}

.service-media-multi-text em {
  color: var(--tg-teal);
  font-style: normal;
  font-weight: 600;
}

.service-media-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--tg-surface-elevated);
  color: var(--tg-muted-light);
  margin-bottom: 8px;
  grid-column: 1 / -1;
}

.service-form .input-file,
.service-form input[type="file"] {
  padding: 10px 0;
  color: var(--tg-muted-light);
  font-size: 14px;
}

.service-form .input-checkbox,
.service-form input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--tg-teal);
}

.service-form .form-error {
  font-size: 13px;
  color: #f87171;
  margin-top: 8px;
}

.service-form .form-hint {
  font-size: 13px;
  color: var(--tg-muted);
  margin-top: 8px;
  margin-bottom: 0;
}

.service-form .form-hint code {
  background: var(--tg-surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* Section visibilité (toggle) : compacte */
.service-form-section--toggle {
  padding: 18px 24px;
}

.service-form-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: var(--tg-white-soft);
}

.service-form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

/* Choices.js : select domaine unique avec recherche (thème sombre)
   !important pour primer sur le CSS par défaut de choices.min.css (fond blanc) */
.service-form-domain-select-wrap .choices__inner,
.service-form-categories-wrap .choices__inner {
  background: var(--tg-surface) !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--radius-sm);
  color: var(--tg-white-soft) !important;
  min-height: 44px;
}

.service-form-domain-select-wrap .choices__inner .choices__list--single .choices__item,
.service-form-categories-wrap .choices__inner .choices__list--single .choices__item {
  color: var(--tg-white-soft) !important;
}

.service-form-domain-select-wrap .choices__input,
.service-form-categories-wrap .choices__input {
  background: transparent !important;
  color: var(--tg-white-soft) !important;
}

.service-form-domain-select-wrap .choices__input::placeholder,
.service-form-categories-wrap .choices__input::placeholder {
  color: var(--tg-muted) !important;
}

.service-form-domain-select-wrap .choices__list--dropdown,
.service-form-categories-wrap .choices__list--dropdown {
  background: var(--tg-surface-elevated) !important;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
}

.service-form-domain-select-wrap .choices__list--dropdown .choices__item--selectable,
.service-form-categories-wrap .choices__list--dropdown .choices__item--selectable {
  color: var(--tg-white-soft) !important;
}

.service-form-domain-select-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted,
.service-form-categories-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--tg-teal-glow) !important;
  color: var(--tg-teal-light) !important;
}

.service-form-domain-select-wrap .choices__item--choice,
.service-form-categories-wrap .choices__item--choice {
  color: var(--tg-muted-light) !important;
}

.service-form-domain-select-wrap .choices__item--choice.is-selected,
.service-form-categories-wrap .choices__item--choice.is-selected {
  color: var(--tg-teal-light) !important;
}

.service-form-domain-select-wrap .choices__button,
.service-form-categories-wrap .choices__button {
  border-color: var(--tg-muted);
  opacity: 0.8;
}

.service-form-domain-select-wrap .choices__button:hover,
.service-form-categories-wrap .choices__button:hover {
  opacity: 1;
  border-color: var(--tg-teal);
}

/* Barre d'actions */
.service-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 24px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.service-media-formset,
.service-plan-formset {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-form-section .form-hint {
  margin-bottom: 16px;
}

.service-form-add-row {
  margin-top: 8px;
  margin-bottom: 0;
}

.service-form-add-btn {
  border-style: dashed;
  color: var(--tg-teal);
}

.service-form-add-btn:hover {
  border-color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.1);
  color: var(--tg-teal-light);
}

/* Fichiers associés : tuiles minimales (preview + supprimer) */
.service-media-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.service-media-tile {
  position: relative;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.service-media-tile-preview {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-black);
  position: relative;
}

.service-media-tile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-media-tile-icon {
  font-size: 2rem;
  color: var(--tg-muted);
}

.service-media-tile-type {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  color: var(--tg-white-soft);
}

/* Supprimer : petit bloc en haut à droite de la tuile (fichiers associés uniquement) */
.service-media-tile .service-media-tile-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--tg-muted-light);
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  z-index: 2;
}

.service-media-tile .service-media-tile-delete:hover {
  color: #f87171;
  background: rgba(0, 0, 0, 0.75);
}

.service-media-tile .service-media-tile-delete input,
.service-media-tile-delete input {
  margin: 0;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.service-media-tile .service-media-tile-replace {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tg-white-soft);
  cursor: pointer;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 6px;
  max-width: calc(100% - 16px);
  text-align: center;
}

.service-media-tile .service-media-tile-replace:hover {
  background: rgba(13, 148, 136, 0.75);
}

.service-media-tile .service-media-tile-replace input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  font-size: 0;
}

/* Réutilisé dans les plans : reste en ligne */
.service-plan-card .service-media-tile-delete {
  position: static;
  display: inline-flex;
  padding: 0;
  background: transparent;
  font-size: 13px;
}

.service-plan-card .service-media-tile-delete:hover {
  background: transparent;
}

.service-media-tile-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Aperçu des fichiers sélectionnés (avant envoi) */
.service-media-pending-previews {
  margin-top: 20px;
}

.service-media-pending-title {
  font-size: 14px;
  color: var(--tg-teal-light);
  margin: 0 0 12px;
  font-weight: 500;
}

.service-media-pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.service-media-pending-tile {
  padding-bottom: 0;
}

.service-media-pending-tile .service-media-tile-preview {
  min-height: 120px;
}

.service-media-pending-tile .service-media-tile-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

.service-media-pending-filename {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--tg-muted-light);
  background: var(--tg-surface);
  border-top: 1px solid var(--tg-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Plans : une carte par plan */
.service-form-section--plans .service-form-section-desc {
  margin-bottom: 20px;
}

.service-plan-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-plan-card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 20px;
}

.service-plan-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.service-plan-card-name {
  flex: 1;
  min-width: 160px;
}

.service-plan-card-name input {
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  background: var(--tg-surface-elevated);
  color: var(--tg-white-soft);
}

.service-plan-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.service-plan-card-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.service-plan-card-field input,
.service-plan-card-field select {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  background: var(--tg-surface-elevated);
  color: var(--tg-white-soft);
  max-width: 100px;
}

.service-plan-card-body {
  margin-top: 0;
}

.service-plan-card-body textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  background: var(--tg-surface-elevated);
  color: var(--tg-white-soft);
  resize: vertical;
}

.service-plan-card-delivery input {
  max-width: 70px;
}

.service-plan-unit {
  margin-left: 2px;
  color: var(--tg-muted);
  font-size: 13px;
}

.service-plan-recommended {
  margin: 0;
  font-size: 13px;
}

.service-plan-card-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

.service-media-row,
.service-plan-row {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
}

.service-media-row {
  grid-template-columns: 1fr 1fr 120px 60px auto auto;
  align-items: end;
}

.service-plan-row {
  grid-template-columns: 1fr 70px 100px 70px auto 50px auto;
  align-items: start;
}

.service-plan-row .full-width {
  grid-column: 1 / -1;
}

.service-media-row .form-group,
.service-plan-row .form-group {
  margin: 0;
}

.service-media-row label,
.service-plan-row label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--tg-muted-light);
  margin-bottom: 6px;
}

.service-media-row .input-field,
.service-media-row input,
.service-media-row select,
.service-media-row textarea,
.service-plan-row .input-field,
.service-plan-row input,
.service-plan-row select,
.service-plan-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  background: var(--tg-surface);
  color: var(--tg-white-soft);
  font-size: 14px;
  box-sizing: border-box;
}

.service-media-row input[type="checkbox"],
.service-plan-row input[type="checkbox"] {
  width: auto;
}

@media (max-width: 768px) {
  .service-form-section {
    padding: 18px;
  }
  .service-form .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-form-page-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 900px) {
  .service-media-row {
    grid-template-columns: 1fr 1fr;
  }
  .service-media-card-fields {
    grid-template-columns: 1fr;
  }
  .service-plan-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .mes-services-card {
    flex-direction: column;
  }
  .mes-services-card-thumb {
    width: 100%;
  }
  .mes-services-header {
    flex-direction: column;
  }
}

/* ----- Dashboard compte (tableau de bord) ----- */
.compte-dashboard .compte-content {
  max-width: 900px;
}

.dashboard-header {
  margin-bottom: 28px;
}

.dashboard-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 4px;
}

.dashboard-greeting {
  font-size: 1rem;
  color: var(--tg-muted-light);
  margin: 0;
}

.dashboard-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.12), rgba(20, 184, 166, 0.06));
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: var(--radius);
  margin-bottom: 28px;
}

.dashboard-alert-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 204, 21, 0.2);
  color: var(--tg-yellow);
  font-weight: 700;
  font-size: 1.25rem;
  border-radius: 50%;
}

.dashboard-alert strong {
  display: block;
  color: var(--tg-white);
  font-size: 1rem;
  margin-bottom: 4px;
}

.dashboard-alert p {
  font-size: 0.9rem;
  color: var(--tg-muted-light);
  margin: 0;
}

.dashboard-alert .btn-sm {
  margin-left: auto;
  flex-shrink: 0;
}

.dashboard-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 14px;
}

.dashboard-stats {
  margin-bottom: 32px;
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.dashboard-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.dashboard-stat-card:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.12);
  transform: translateY(-2px);
}

.dashboard-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tg-teal-light);
  line-height: 1.2;
}

.dashboard-stat-label {
  font-size: 0.85rem;
  color: var(--tg-muted-light);
  margin-top: 4px;
}

.dashboard-actions {
  margin-bottom: 32px;
}

.dashboard-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.dashboard-action-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.dashboard-action-card:hover {
  border-color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.06);
  box-shadow: 0 4px 20px rgba(20, 184, 166, 0.1);
}

.dashboard-action-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 184, 166, 0.15);
  color: var(--tg-teal-light);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.dashboard-action-card:hover .dashboard-action-icon {
  background: rgba(20, 184, 166, 0.25);
}

.dashboard-action-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tg-white);
  margin-bottom: 4px;
}

.dashboard-action-desc {
  font-size: 0.85rem;
  color: var(--tg-muted-light);
  line-height: 1.4;
}

.dashboard-recent {
  margin-bottom: 24px;
}

.dashboard-recent-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.dashboard-recent-item {
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  margin-bottom: 8px;
  transition: border-color var(--transition);
}

.dashboard-recent-item:hover {
  border-color: var(--tg-teal);
}

.dashboard-recent-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tg-white-soft);
}

.dashboard-recent-meta {
  font-size: 0.8rem;
  color: var(--tg-muted);
  margin-top: 4px;
}

@media (max-width: 768px) {
  .dashboard-alert {
    flex-wrap: wrap;
  }
  .dashboard-alert .btn-sm {
    margin-left: 0;
    width: 100%;
  }
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* Formulaire profil : couverture, champs, suggestions */
.profile-cover {
  position: relative;
  height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--tg-teal) 0%, var(--tg-teal-dark) 50%, #0f766e 100%);
}

.profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-cover-upload {
  position: absolute;
  bottom: 12px;
  right: 12px;
}

.profile-cover-upload input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.profile-section {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.profile-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tg-white);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tg-border);
  display: flex;
  align-items: center;
  gap: 7px;
}

.profile-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.profile-form .form-row.single {
  grid-template-columns: 1fr;
}

.profile-form .form-group {
  margin-bottom: 16px;
}

.profile-form .form-group:last-child {
  margin-bottom: 0;
}

.profile-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--tg-muted-light);
  margin-bottom: 6px;
}

.profile-form .input-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  background: var(--tg-surface);
  color: var(--tg-white);
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--transition);
}

.profile-form .input-field:focus {
  outline: none;
  border-color: var(--tg-teal);
}

.profile-form .textarea {
  min-height: 120px;
  resize: vertical;
}

/* Pills / tags (domaines, compétences) */
.profile-tags-wrap {
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  background: var(--tg-surface);
  padding: 10px 12px;
  min-height: 48px;
}

.profile-tags-wrap--skills {
  overflow: visible;
}

.profile-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.profile-tags-list:empty {
  margin-bottom: 0;
}

.profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(20, 184, 166, 0.2);
  color: var(--tg-teal-light);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-pill);
}

.profile-tag button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
}

.profile-tag button:hover {
  opacity: 1;
}

.profile-tags-input-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  z-index: 1;
}

/* Zone compétences : suggestions au-dessus de tout (header, sections, etc.) */
.profile-tags-wrap--skills .profile-tags-input-wrap {
  width: 100%;
  z-index: 10001;
}

.profile-tags-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px dashed var(--tg-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tg-white-soft);
  font-size: 14px;
}

.profile-tags-input::placeholder {
  color: var(--tg-muted);
}

.profile-tags-input:focus {
  outline: none;
  border-color: var(--tg-teal);
}

.profile-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  min-width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 10000;
}

/* Par défaut : s'ouvre en dessous */
.profile-suggestions {
  top: 100%;
  margin-top: 4px;
}

.profile-suggestions-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: none;
  border: 0;
  color: var(--tg-white-soft);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En section compétences, on laisse le texte s'afficher en entier */
.profile-tags-wrap--skills .profile-suggestions-item {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding: 12px 16px;
  line-height: 1.4;
}

.profile-suggestions-item:hover {
  background: rgba(20, 184, 166, 0.15);
  color: var(--tg-teal-light);
}

/* Suggestions compétences : s'ouvrent AU-DESSUS de l'input pour être bien visibles */
.profile-tags-wrap--skills .profile-suggestions {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 280px;
  font-size: 14px;
  z-index: 10002;
}

.profile-suggestions--compact {
  max-height: 280px;
  overflow-y: auto;
  font-size: 14px;
}

.profile-suggestions-item--custom {
  color: var(--tg-muted-light);
}

.profile-tags-input--compact {
  width: 100%;
  min-width: 200px;
  max-width: 100%;
  box-sizing: border-box;
}

.diploma-form-row {
  display: grid;
  grid-template-columns: 1fr auto auto 120px 80px;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.diploma-form-row .form-group {
  margin: 0;
}

.diploma-form-row label {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  .diploma-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.public-profile-diplomas {
  margin: 0;
  padding-left: 1.2em;
}

.public-profile-diplomas li {
  margin-bottom: 6px;
}

.profile-diploma-ref {
  color: var(--tg-muted);
  font-size: 0.95em;
}

.profile-diploma-link {
  color: var(--tg-teal);
  text-decoration: none;
}

.profile-diploma-link:hover {
  text-decoration: underline;
}

.profile-reviews-section {
  margin-top: 24px;
}

.profile-reviews-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.profile-reviews-stat {
  font-size: 15px;
  color: var(--tg-muted-light);
}

.profile-reviews-stat--positive { color: var(--gn-green); }
.profile-reviews-stat--negative { color: var(--gn-red); }
.profile-reviews-stat--stars { color: var(--tg-yellow); }

.profile-review-form-wrap {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
}

.profile-review-form-title {
  font-size: 1rem;
  margin: 0 0 16px;
}

.profile-review-type {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.profile-review-type-option {
  cursor: pointer;
  font-size: 15px;
}

.profile-reviews-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-review-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--tg-border);
}

.profile-review-item:last-child {
  border-bottom: none;
}

.profile-review-author {
  font-weight: 600;
  margin-right: 8px;
}

.profile-review-type-badge {
  font-size: 13px;
  margin-right: 8px;
}

.profile-review-item--positive .profile-review-type-badge { color: var(--gn-green); }
.profile-review-item--negative .profile-review-type-badge { color: var(--gn-red); }

.profile-review-rating {
  color: var(--tg-muted);
  font-size: 13px;
  margin-right: 8px;
}

.profile-review-date {
  color: var(--tg-muted);
  font-size: 12px;
}

.profile-review-comment {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--tg-muted-light);
}

.profile-form .btn-primary {
  margin-top: 8px;
}

.profile-edit-header,
.profile-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.profile-edit-header .compte-heading,
.profile-view-header .compte-heading {
  margin: 0;
}

.profile-view-cover.profile-cover {
  margin-bottom: 0;
}

.profile-view-cover.profile-cover:not(:has(img)) {
  min-height: 160px;
}

.profile-view-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 28px;
  margin-top: -60px;
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
}

.profile-view-avatar {
  margin-bottom: 12px;
}

.profile-view-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--tg-teal), var(--tg-teal-dark));
  color: var(--tg-black);
  overflow: hidden;
}

.profile-view-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-view-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 6px;
}

.profile-view-headline {
  font-size: 1.05rem;
  color: var(--tg-teal-light);
  margin: 0 0 12px;
}

.profile-view-bio {
  font-size: 1rem;
  color: var(--tg-white-soft);
  line-height: 1.6;
  margin: 0 0 16px;
}

.profile-view-contact {
  padding-top: 12px;
  border-top: 1px solid var(--tg-border);
}

.profile-view-contact .profile-view-meta {
  margin-bottom: 6px;
}

.profile-view-meta {
  font-size: 0.95rem;
  color: var(--tg-muted-light);
  margin: 0 0 8px;
}

.profile-view-empty {
  color: var(--tg-muted);
  font-style: italic;
}

.profile-view-empty-block {
  color: var(--tg-muted);
  font-style: italic;
  margin: 0;
}

.profile-stats-inline .profile-section-title {
  margin-bottom: 12px;
}

.profile-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
}

.profile-stat {
  font-size: 0.9rem;
  color: var(--tg-white-soft);
}

.profile-stat strong {
  color: var(--tg-muted-light);
  font-weight: 500;
}

.profile-badge-verified {
  color: var(--tg-teal-light);
  font-style: normal;
  font-weight: 600;
}

.profile-view-actions {
  margin-top: 24px;
}

.profile-form .form-error {
  font-size: 13px;
  color: #f87171;
  margin-top: 6px;
}

.profile-form .form-hint {
  font-size: 13px;
  color: var(--tg-muted);
  margin-top: 8px;
  margin-bottom: 0;
}

.profile-form .form-hint code {
  background: var(--tg-surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.profile-md-input {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.profile-md-preview-wrap {
  margin-top: 20px;
  padding: 20px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
}

.profile-md-preview-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
}

/* Rendu Markdown du profil (tableaux, titres, listes, code, etc.) */
.profile-markdown {
  color: var(--tg-white-soft);
  font-size: 15px;
  line-height: 1.65;
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.profile-markdown-empty {
  color: var(--tg-muted);
  font-style: italic;
  margin: 0;
}

.profile-markdown h1,
.profile-markdown h2,
.profile-markdown h3,
.profile-markdown h4,
.profile-markdown h5,
.profile-markdown h6 {
  color: var(--tg-white);
  font-weight: 700;
  margin: 1.25em 0 0.5em;
  line-height: 1.3;
}

.profile-markdown h1 { font-size: 1.5rem; }
.profile-markdown h2 { font-size: 1.3rem; }
.profile-markdown h3 { font-size: 1.15rem; }
.profile-markdown h4 { font-size: 1.05rem; }
.profile-markdown h5 { font-size: 1rem; }
.profile-markdown h6 { font-size: 0.95rem; }

.profile-markdown p {
  margin: 0 0 1em;
}

.profile-markdown ul,
.profile-markdown ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.profile-markdown li {
  margin: 0.25em 0;
}

.profile-markdown blockquote {
  margin: 1em 0;
  padding: 0.5em 0 0.5em 1em;
  border-left: 4px solid var(--tg-teal);
  background: rgba(20, 184, 166, 0.08);
  color: var(--tg-muted-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.profile-markdown code {
  background: var(--tg-surface-elevated);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, Menlo, monospace;
}

.profile-markdown pre {
  margin: 1em 0;
  padding: 16px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.profile-markdown pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
}

.profile-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 14px;
}

.profile-markdown th,
.profile-markdown td {
  border: 1px solid var(--tg-border);
  padding: 10px 14px;
  text-align: left;
}

.profile-markdown th {
  background: rgba(20, 184, 166, 0.15);
  color: var(--tg-teal-light);
  font-weight: 600;
}

.profile-markdown tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

.profile-markdown a {
  color: var(--tg-teal-light);
  text-decoration: none;
}

.profile-markdown a:hover {
  text-decoration: underline;
}

.profile-markdown hr {
  border: 0;
  height: 1px;
  background: var(--tg-border);
  margin: 1.5em 0;
}

/* Images & vidéos dans le Markdown (profil prestataire, fiches services) */
.profile-markdown img,
.profile-markdown video,
.sdp-markdown img,
.sdp-markdown video {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0.75em 0;
  box-sizing: border-box;
}
.profile-markdown video,
.sdp-markdown video {
  max-height: min(420px, 72vh);
  background: rgba(15, 23, 42, 0.5);
}
.profile-markdown img,
.sdp-markdown img {
  max-height: min(520px, 78vh);
  object-fit: contain;
}

@media (max-width: 768px) {
  .compte-inner {
    grid-template-columns: 1fr;
  }
  .compte-nav {
    position: static;
  }
  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-links {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .profile-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* ----- Page d'accueil : sections organisées (type ComeUp) ----- */
.home-section {
  width: 100%;
}

.home-section .section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  .home-section .section-inner {
    overflow-x: clip;
  }
}

/* Sections en fond blanc (alternance visuelle) */
.section-bg-white {
  background: #fff;
}

.section-bg-white .section-title {
  color: var(--tg-black);
}

.section-bg-white .section-subtitle {
  color: #475569;
}

/* Cartes services sur fond blanc */
.section-bg-white .service-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.section-bg-white .service-card:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 12px 32px rgba(20, 184, 166, 0.15), 0 0 0 1px rgba(20, 184, 166, 0.2);
}

.section-bg-white .service-card .thumb {
  background: #f1f5f9;
}

.section-bg-white .home-service-carousel-viewport {
  background: #f1f5f9;
}

.section-bg-white .home-carousel-btn {
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
}

.section-bg-white .home-carousel-btn:hover {
  background: var(--tg-teal);
  color: #0f172a;
}

.section-bg-white .service-card .provider .name,
.section-bg-white .service-card h3 {
  color: #0f172a;
}

.section-bg-white .service-card .price {
  color: var(--tg-teal);
}

.section-bg-white .service-card .price-note {
  color: #64748b;
}

.section-bg-white .service-card-desc {
  color: #64748b;
}

/* Catégories (Explorez par domaine) sur fond blanc */
.section-bg-white.category-spotlight {
  background: #fff;
}

.section-bg-white .category-spotlight-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.section-bg-white .category-spotlight-card:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.12);
}

.section-bg-white .category-spotlight-title {
  color: #0f172a;
}

.section-bg-white .category-spotlight-title strong {
  color: var(--tg-teal);
}

.section-bg-white .category-spotlight-desc {
  color: #64748b;
}

.section-bg-white .category-mini-service {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
}

.section-bg-white .category-mini-service:hover {
  background: rgba(20, 184, 166, 0.08);
  color: var(--tg-teal);
  border-color: rgba(20, 184, 166, 0.3);
}

.section-bg-white .category-mini-service .price {
  color: var(--tg-teal);
}

/* Confiance (logos) sur fond blanc */
.section-bg-white.trust-section {
  border-top-color: #e2e8f0;
}

.section-bg-white.trust-section .section-title {
  color: #64748b;
}

.section-bg-white .trust-logos .placeholder {
  color: #94a3b8;
}

/* Témoignages sur fond blanc */
.section-bg-white.testimonials {
  background: #fff;
}

.section-bg-white.testimonials .section-header h2 {
  color: #0f172a;
  text-wrap: balance;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-bg-white.testimonials .section-header h2 strong {
  color: var(--tg-teal);
}

.section-bg-white.testimonials .section-subtitle {
  color: #64748b;
  text-align: center;
}

.section-bg-white .testimonial-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.section-bg-white .testimonial-card p {
  color: #475569;
}

.section-bg-white .testimonial-card .author {
  color: var(--tg-teal);
}

.section-bg-white .empty-state {
  color: #64748b;
}

.section-bg-white .empty-state p {
  color: #475569;
}

/* ----- Hero premium (accueil) — fond avancé, confiance ----- */
.hero {
  position: relative;
  text-align: center;
  padding: 64px 24px 72px;
  overflow: hidden;
}

.hero-premium {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 96px;
}

/* Couches de fond */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% -30%, rgba(20, 184, 166, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 90% 20%, rgba(20, 184, 166, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse 70% 50% at 10% 80%, rgba(20, 184, 166, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(15, 23, 42, 0.4) 0%, transparent 70%);
}

.hero-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: hero-glow-pulse 8s ease-in-out infinite;
}

.hero-bg-glow-1 {
  width: 400px;
  height: 400px;
  background: rgba(20, 184, 166, 0.15);
  top: -120px;
  left: 50%;
  margin-left: -200px;
}

.hero-bg-glow-2 {
  width: 300px;
  height: 300px;
  background: rgba(20, 184, 166, 0.1);
  top: 30%;
  right: -80px;
  animation-delay: -2s;
}

.hero-bg-glow-3 {
  width: 280px;
  height: 280px;
  background: rgba(20, 184, 166, 0.08);
  bottom: -60px;
  left: -60px;
  animation-delay: -4s;
}

@keyframes hero-glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.hero-bg-glow-2 { animation-name: hero-glow-pulse-2; }
.hero-bg-glow-3 { animation-name: hero-glow-pulse-3; }

@keyframes hero-glow-pulse-2 {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.55; }
}

@keyframes hero-glow-pulse-3 {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.45; }
}

/* Grille subtile */
.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 184, 166, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Motif circuit / connexion */
.hero-bg-circuit {
  position: absolute;
  inset: 0;
  opacity: 0.6;
}

.hero-bg-circuit svg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: var(--tg-teal);
}

/* Texture légère */
.hero-bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Contenu */
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: max(0px, env(safe-area-inset-left, 0px));
  padding-right: max(0px, env(safe-area-inset-right, 0px));
}

.hero-badge {
  display: inline-block;
  padding: 8px 18px;
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tg-teal-light);
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: var(--radius-pill);
}

.hero-title {
  font-size: clamp(2.4rem, 6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--tg-white);
  letter-spacing: -0.03em;
}

.hero-title strong {
  color: var(--tg-teal-light);
  font-weight: 700;
  position: relative;
}

.hero-tagline {
  font-size: 1.25rem;
  color: var(--tg-muted-light);
  margin: 0 0 16px;
  line-height: 1.55;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.hero-trust-line {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--tg-muted);
  margin: 0 auto 32px;
  max-width: 560px;
  opacity: 0.92;
}

/* Barre de recherche hero — style glass */
.hero-search-box {
  max-width: 600px;
  margin: 0 auto 32px;
}

.hero-search-form {
  display: flex;
  align-items: center;
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.hero-search-form:focus-within {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(20, 184, 166, 0.2), 0 0 40px rgba(20, 184, 166, 0.08);
}

.hero-search-form input {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  color: var(--tg-white);
  font-size: 16px;
  font-family: inherit;
}

.hero-search-form input::placeholder {
  color: var(--tg-muted);
}

.hero-search-form .btn-search {
  padding: 14px 18px;
}

/* Liens rapides */
.hero-quick-searches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
}

.hero-quick-label {
  font-size: 13px;
  color: var(--tg-muted);
  margin-right: 4px;
}

.hero-quick-searches a {
  padding: 10px 20px;
  background: rgba(30, 41, 59, 0.5);
  color: var(--tg-muted-light);
  text-decoration: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(51, 65, 85, 0.4);
  backdrop-filter: blur(8px);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.hero-quick-searches a:hover {
  background: rgba(20, 184, 166, 0.15);
  color: var(--tg-teal-light);
  border-color: rgba(20, 184, 166, 0.35);
}

/* Rétrocompatibilité si pas hero-premium */
.hero .search-box { max-width: 580px; margin: 0 auto 28px; }
.hero .search-box .search-form { max-width: none; box-shadow: var(--shadow-md); }
.quick-searches { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.quick-searches a { padding: 10px 20px; background: var(--tg-surface-elevated); color: var(--tg-muted-light); text-decoration: none; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; border: 1px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.quick-searches a:hover { background: rgba(20, 184, 166, 0.12); color: var(--tg-teal-light); border-color: rgba(20, 184, 166, 0.3); }

/* ----- Sections communes ----- */
.section {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 56px 28px 64px;
  box-sizing: border-box;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  .section {
    overflow-x: clip;
  }
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--tg-white);
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--tg-muted);
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Grille services (cartes type ComeUp) ----- */
.services-section {
  padding: 56px 0 64px;
}

.services-section .section-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  min-width: 0;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  .services-section .section-inner {
    overflow-x: clip;
  }
}

.services-section .section-title {
  margin-bottom: 28px;
  position: relative;
  padding-bottom: 14px;
}

.services-section .section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--tg-teal);
  border-radius: 2px;
}

.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.section-head-row .section-title {
  margin-bottom: 0;
}

.section-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--tg-teal-light);
  text-decoration: none;
  transition: color var(--transition);
}

.section-link:hover {
  color: var(--tg-teal);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 28px;
}

/* ----- Défilement horizontal (accueil) ----- */
.home-scroll-h {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-left: calc(-1 * max(28px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(28px, env(safe-area-inset-right, 0px)));
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
  max-width: 100%;
  box-sizing: border-box;
  /* Scrollbar invisible sur mobile, fine sur desktop */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.home-scroll-h::-webkit-scrollbar { display: none; }

/* Sur desktop uniquement : scrollbar fine visible */
@media (min-width: 1025px) {
  .home-scroll-h {
    scrollbar-width: thin;
    scrollbar-color: var(--tg-border) transparent;
  }
  .home-scroll-h::-webkit-scrollbar { display: block; height: 4px; }
  .home-scroll-h::-webkit-scrollbar-track { background: transparent; }
  .home-scroll-h::-webkit-scrollbar-thumb { background: var(--tg-border); border-radius: 4px; }
}

.home-scroll-h.scroll-snap {
  scroll-snap-type: x mandatory;
}

.home-scroll-inner {
  display: flex;
  gap: 20px;
  padding-bottom: 4px; /* réduit : pas besoin de place pour scrollbar sur mobile */
  width: max-content;
}

.home-scroll-h .home-card {
  flex: 0 0 auto;
  width: min(300px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px));
  max-width: 100%;
  scroll-snap-align: start;
}

.home-scroll-h .service-card.home-card {
  min-height: 0;
}

/* ── Carte service accueil : carrousel médias, liens sans soulignement ── */
.service-card-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

a.service-card-body-link,
a.service-card-thumb-single {
  text-decoration: none;
  color: inherit;
  display: block;
}

a.service-card-body-link:hover,
a.service-card-body-link:focus-visible,
a.service-card-thumb-single:hover,
a.service-card-thumb-single:focus-visible {
  text-decoration: none;
}

.service-card-body-link .service-card-title,
.service-card-body-link .service-card-desc,
.service-card-body-link .price,
.service-card-body-link .provider .name {
  text-decoration: none;
}

.service-card-thumb-single .thumb {
  margin: 0;
}

.service-card-thumb-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}

.service-card-thumb-badges .badge {
  position: static;
  padding: 5px 12px;
  background: var(--tg-teal);
  color: var(--tg-black);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.service-card-thumb-badges .badge-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12px;
}

.service-card-thumb-badges .badge-featured {
  background: var(--tg-yellow);
  color: var(--tg-black);
}

.home-service-carousel {
  position: relative;
}

.home-service-carousel-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tg-surface);
}

.home-service-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.38s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.home-service-carousel-slide {
  flex: 0 0 100%;
  height: 100%;
}

.home-service-carousel-slide img,
.home-service-carousel-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.service-card:hover .home-service-carousel-slide img {
  transform: scale(1.04);
}

.service-card-thumb-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

.home-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background var(--transition), color var(--transition);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.home-service-carousel:hover .home-carousel-btn,
.home-service-carousel:focus-within .home-carousel-btn {
  opacity: 1;
}

@media (hover: none) {
  .home-carousel-btn {
    opacity: 1;
  }
}

.home-carousel-btn:hover {
  background: var(--tg-teal);
  color: var(--tg-black);
}

.home-carousel-btn--prev {
  left: 8px;
}

.home-carousel-btn--next {
  right: 8px;
}

.home-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 3;
  pointer-events: none;
}

.home-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  transition: background 0.2s, transform 0.2s;
}

.home-carousel-dot.is-active {
  background: var(--tg-teal);
  transform: scale(1.2);
}

/* Profils accueil : pas de soulignement sur le texte */
a.provider-card-link,
a.profile-card-home {
  text-decoration: none;
  color: inherit;
}

a.provider-card-link:hover,
a.provider-card-link:focus-visible,
a.profile-card-home:hover,
a.profile-card-home:focus-visible {
  text-decoration: none;
}

.provider-card-link .provider-card-headline,
.provider-card-link .provider-card-bio,
.profile-card-home .profile-card-headline,
.profile-card-home .profile-card-bio {
  text-decoration: none;
}

.provider-card-img {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
  transition: box-shadow var(--transition), transform var(--transition);
}

.provider-card-home:hover .provider-card-img {
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.45);
}

.service-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  border-color: var(--tg-teal);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(20, 184, 166, 0.2);
}

.service-card .thumb {
  aspect-ratio: 16/9;
  background: var(--tg-surface);
  position: relative;
  overflow: hidden;
}

.service-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.service-card:hover .thumb img {
  transform: scale(1.04);
}

.service-card .thumb .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  background: var(--tg-teal);
  color: var(--tg-black);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.service-card .thumb .badge.sponsored {
  background: var(--tg-yellow);
  color: var(--tg-black);
}

.service-card .body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card .provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.service-card .provider {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.service-card .provider .avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
  flex-shrink: 0;
}

.service-card .provider .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-card .rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-yellow);
  flex-shrink: 0;
}

.service-card .rating svg {
  width: 14px;
  height: 14px;
}

.service-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.35;
  color: var(--tg-white);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-card-desc {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tg-muted-light);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

.service-card-desc--compact {
  -webkit-line-clamp: 2;
  font-size: 0.78rem;
  margin-bottom: 10px;
}

.service-card .price {
  font-size: 16px;
  font-weight: 700;
  color: var(--tg-teal-light);
  margin-top: auto;
}

.service-card .price-note {
  font-size: 12px;
  color: var(--tg-muted);
  font-weight: 400;
  margin-top: 2px;
}

/* ----- Bande stats de confiance (accueil) ----- */
.home-trust-band {
  padding: 0;
  border-top: 1px solid var(--tg-border);
  border-bottom: 1px solid var(--tg-border);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.04) 0%, rgba(20, 184, 166, 0.01) 100%);
}

.trust-band-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  flex-wrap: wrap;
}

.trust-band-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 36px;
  text-align: center;
  flex: 1 1 auto;
  min-width: 120px;
}

.trust-band-num {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--tg-teal-light);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.trust-band-label {
  font-size: 0.8rem;
  color: var(--tg-muted-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.trust-band-sep {
  width: 1px;
  height: 40px;
  background: var(--tg-border);
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 600px) {
  .trust-band-inner {
    gap: 0;
    padding: 0 12px;
  }
  .trust-band-sep { display: none; }
  .trust-band-item {
    padding: 18px 16px;
    min-width: 80px;
    flex: 1 1 45%;
  }
  .trust-band-num { font-size: 1.5rem; }
  .trust-band-label { font-size: 0.7rem; white-space: normal; }
}

/* ----- Comment ça marche (accueil) ----- */
.how-it-works-section {
  padding: 56px 0 64px;
}

.how-it-works-section .section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.how-step {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 28px 24px;
}

.how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.2);
  color: var(--tg-teal-light);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
}

.how-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--tg-white);
}

.how-step-text {
  margin: 0;
  font-size: 15px;
  color: var(--tg-muted-light);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .how-it-works-grid {
    grid-template-columns: 1fr;
  }
}

/* ----- CTA bloc ----- */
.section-cta-block {
  padding-top: 0;
  padding-bottom: 64px;
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
}

.section-cta-block .section-inner {
  padding-left: 0;
  padding-right: 0;
}

.cta-block {
  background: linear-gradient(135deg, var(--tg-surface-elevated) 0%, var(--tg-surface) 100%);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 48px 40px;
  text-align: center;
}

.cta-block h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--tg-white);
}

.cta-block p {
  color: var(--tg-muted-light);
  margin: 0 0 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--tg-teal);
  color: var(--tg-black);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.btn-primary:hover {
  background: var(--tg-teal-light);
  transform: translateY(-1px);
}

/* ── Spinner & états de chargement ── */
@keyframes tg-spin { to { transform: rotate(360deg); } }

.tg-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tg-spin .65s linear infinite;
  flex-shrink: 0;
}

.btn-primary .tg-spinner { border-top-color: var(--tg-black); border-color: rgba(0,0,0,.2); border-top-color: var(--tg-black); }

.btn-primary.is-loading,
.btn-secondary.is-loading,
.btn-primary[disabled],
.btn-secondary[disabled] {
  opacity: .65;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-loading-wrap { display: inline-flex; align-items: center; gap: 8px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: transparent;
  color: var(--tg-teal-light);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tg-teal);
  transition: background var(--transition), color var(--transition);
}

.btn-secondary:hover {
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-white);
}

.section-cta {
  text-align: center;
  margin-top: 32px;
}

.btn-secondary.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

/* ----- Sections par catégorie (Nos freelances en…) ----- */
.category-spotlight {
  padding: 56px 0 64px;
  background: var(--tg-surface);
}

.category-spotlight .section-title {
  margin-bottom: 8px;
}

.category-spotlight .section-subtitle {
  margin-bottom: 36px;
}

.category-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.category-spotlight-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.category-spotlight-card:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.category-spotlight-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--tg-white);
  line-height: 1.3;
}

.category-spotlight-title strong {
  color: var(--tg-teal-light);
}

.category-spotlight-desc {
  font-size: 0.95rem;
  color: var(--tg-muted-light);
  margin: 0 0 20px;
  line-height: 1.5;
}

.category-spotlight-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.category-mini-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--tg-surface);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--tg-white-soft);
  font-size: 14px;
  transition: background var(--transition), color var(--transition);
}

.category-mini-service:hover {
  background: rgba(20, 184, 166, 0.1);
  color: var(--tg-teal-light);
}

.category-mini-service .name {
  flex: 1;
  margin-right: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-mini-service .price {
  font-weight: 600;
  color: var(--tg-teal-light);
  flex-shrink: 0;
}

/* ----- Explorez par domaine (accueil dynamique) ----- */
.section-bg-alt {
  background: var(--tg-surface);
}

.explore-domains {
  padding: 56px 0 64px;
}

.explore-domains .section-title {
  margin-bottom: 8px;
}

.explore-domains .section-subtitle {
  margin-bottom: 40px;
  color: var(--tg-muted-light);
}

.explore-domains-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.domain-block {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--tg-border);
}

.domain-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.domain-block-header {
  margin-bottom: 24px;
}

.domain-block-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--tg-white);
}

.domain-block-title strong {
  color: var(--tg-teal-light);
}

.domain-block-desc {
  font-size: 0.95rem;
  color: var(--tg-muted-light);
  margin: 0 0 12px;
  line-height: 1.5;
}

.domain-block-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-teal-light);
  text-decoration: none;
  transition: color var(--transition);
}

.domain-block-link:hover {
  color: var(--tg-teal);
}

.domain-services-wrap,
.domain-profiles-wrap {
  margin-bottom: 28px;
}

.domain-services-wrap:last-child,
.domain-profiles-wrap:last-child {
  margin-bottom: 0;
}

.domain-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tg-muted);
  margin-bottom: 14px;
}

.domain-scroll {
  margin-left: calc(-1 * max(28px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(28px, env(safe-area-inset-right, 0px)));
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.domain-scroll .home-card {
  width: min(280px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px));
  max-width: 100%;
}

/* Grille profils (défilement vertical = grille) */
.home-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 20px;
}

.providers-grid-home > *,
.home-profiles-grid > * {
  min-width: 0;
}

.profile-card-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.profile-card-home:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.15);
  transform: translateY(-2px);
}

.profile-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tg-surface);
  margin-bottom: 12px;
  flex-shrink: 0;
  transition: box-shadow var(--transition), transform var(--transition);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.profile-card-home:hover .profile-card-avatar {
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.45);
}

.profile-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-card-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tg-teal-light);
  background: rgba(20, 184, 166, 0.15);
}

.profile-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.profile-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--tg-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-headline {
  font-size: 13px;
  color: var(--tg-muted-light);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-card-bio {
  font-size: 12px;
  line-height: 1.45;
  color: var(--tg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.profile-card-rating {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-yellow);
  margin-top: 4px;
}

/* ----- Confiance (logos partenaires) ----- */
.trust-section {
  padding-top: 56px;
  padding-bottom: 64px;
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--tg-border);
}

.trust-section .section-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.trust-section .section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.trust-section .trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

.trust-logos .placeholder {
  font-size: 14px;
  color: var(--tg-muted);
  font-style: italic;
}

/* ----- Témoignages ----- */
.testimonials {
  background: var(--tg-surface);
  padding-top: 56px;
  padding-bottom: 64px;
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
}

.testimonials .section-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.testimonials .section-header {
  text-align: center;
}

.testimonials .section-header h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 auto 8px;
  text-align: center;
  text-wrap: balance;
  max-width: 28ch;
}

.testimonials .section-header h2 strong {
  color: var(--tg-teal-light);
}

.testimonials .section-subtitle {
  margin-bottom: 0;
}

.testimonial-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 420px;
  margin: 0 auto;
}

.testimonial-card p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tg-white-soft);
  margin: 0 0 20px;
  font-style: italic;
}

.testimonial-card .author {
  font-weight: 600;
  color: var(--tg-teal-light);
  font-size: 14px;
}

/* ----- Hero CTA group & social proof ----- */
.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 28px 0 20px;
}
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  background: transparent;
  color: var(--tg-teal-light);
  border: 1px solid rgba(20, 184, 166, 0.35);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}
.btn-hero-outline:hover {
  background: rgba(20, 184, 166, 0.08);
  border-color: var(--tg-teal);
  color: var(--tg-teal);
}
.hero-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.hero-proof-avatars { display: flex; }
.hero-avatar-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--tg-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-left: -8px;
}
.hero-avatar-dot:first-child { margin-left: 0; }
.hero-proof-text { font-size: 13px; color: var(--tg-muted-light); }
.btn-lg { padding: 16px 32px; font-size: 16px; }

/* ----- Why TALENT GN section ----- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.why-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color var(--transition), transform var(--transition);
}
.why-card:hover { border-color: var(--tg-teal); transform: translateY(-2px); }
.why-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--tg-teal);
}
.why-card h3 { font-size: 1rem; font-weight: 700; color: var(--tg-white); margin: 0 0 8px; }
.why-card p { font-size: 0.875rem; color: var(--tg-muted-light); line-height: 1.6; margin: 0; }

/* ----- Enhanced CTA block ----- */
.section-cta-block--enhanced .cta-block {
  background: linear-gradient(135deg, rgba(20,184,166,0.12) 0%, rgba(15,23,42,0.8) 100%);
  border-color: rgba(20, 184, 166, 0.3);
  position: relative;
  overflow: hidden;
}
.section-cta-block--enhanced .cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(20,184,166,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.cta-badge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(20, 184, 166, 0.15);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tg-teal-light);
  margin-bottom: 16px;
}
.cta-btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  position: relative;
}
.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: transparent;
  color: var(--tg-white-soft);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}
.btn-cta-outline:hover { border-color: var(--tg-teal); color: var(--tg-teal-light); }

/* ----- Testimonials grid v2 ----- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.testimonial-card--v2 {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--transition), transform var(--transition);
}
.testimonial-card--v2:hover { border-color: rgba(20, 184, 166, 0.35); transform: translateY(-2px); }
.testimonial-stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; }
.testimonial-card--v2 p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tg-white-soft);
  font-style: italic;
  margin: 0;
  flex: 1;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 0.875rem; color: var(--tg-white); }
.testimonial-author .muted { font-size: 0.78rem; }

@media (max-width: 640px) {
  .hero-cta-group { flex-direction: column; gap: 12px; }
  .cta-btn-group { flex-direction: column; gap: 10px; }
  .why-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .btn-lg { padding: 14px 24px; font-size: 15px; }
}

/* ----- Identité Guinée (points drapeau) ----- */
.flag-dots {
  display: inline-flex;
  gap: 6px;
  margin-top: 8px;
}

.flag-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.flag-dots .r { background: var(--gn-red); }
.flag-dots .y { background: var(--gn-yellow); }
.flag-dots .g { background: var(--gn-green); }

/* ----- Footer ----- */
.site-footer {
  background: #0e1623;
  border-top: 1px solid rgba(51, 65, 85, 0.8);
  padding: 32px 28px;
  margin-top: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.footer-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  box-sizing: border-box;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer .slogan {
  font-size: 15px;
  color: var(--tg-muted);
  margin: 0;
}

.site-footer .slogan strong {
  color: var(--tg-muted-light);
}

.site-footer .footer-links {
  display: flex;
  gap: 24px;
}

.site-footer .footer-links a {
  color: var(--tg-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition);
}

.site-footer .footer-links a:hover {
  color: var(--tg-teal-light);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tg-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color .15s;
}
.footer-contact-item:hover { color: var(--tg-teal-light); }

/* ----- Page recherche (fond blanc, type ComeUp) ----- */
:root {
  --search-bg: #f8fafc;
  --search-card-bg: #ffffff;
  --search-border: #e2e8f0;
  --search-text: #0f172a;
  --search-muted: #64748b;
}

.page-search-layout {
  background: var(--search-bg);
  min-height: 60vh;
  padding-bottom: 48px;
}

.search-layout-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.search-page-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--search-muted);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.search-header {
  padding: 20px 0 0;
  border-bottom: 1px solid var(--search-border);
}

.search-header-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-header-input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  border: 1px solid var(--search-border);
  border-radius: var(--radius-sm);
  background: var(--search-card-bg);
  color: var(--search-text);
  font-size: 15px;
  font-family: inherit;
}

.search-header-input:focus {
  outline: none;
  border-color: var(--tg-teal);
  box-shadow: 0 0 0 2px var(--tg-teal-glow);
}

.search-sort {
  padding: 10px 14px;
  border: 1px solid var(--search-border);
  border-radius: var(--radius-sm);
  background: var(--search-card-bg);
  color: var(--search-text);
  font-size: 14px;
  font-family: inherit;
  min-width: 160px;
}

.search-sort:focus {
  outline: none;
  border-color: var(--tg-teal);
}

/* Filtres rapides (catégories + domaines) sous la barre de recherche */
.search-quick-filters {
  padding: 16px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.search-quick-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-quick-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--search-muted);
}

.search-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.search-pill {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--search-text);
  background: var(--search-card-bg);
  border: 1px solid var(--search-border);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.search-pill:hover {
  border-color: var(--tg-teal);
  color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.06);
}

.search-pill-active {
  background: var(--tg-teal);
  border-color: var(--tg-teal);
  color: #fff;
}

.search-pill-active:hover {
  background: var(--tg-teal-dark);
  border-color: var(--tg-teal-dark);
  color: #fff;
}

.search-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding-top: 24px;
  align-items: start;
}

.search-sidebar {
  position: sticky;
  top: 80px;
  background: var(--search-card-bg);
  border: 1px solid var(--search-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.filter-group {
  margin-bottom: 20px;
}

.filter-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--search-muted);
  margin: 0 0 8px;
}

.filter-select,
.filter-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--search-border);
  border-radius: 8px;
  background: var(--search-card-bg);
  color: var(--search-text);
  font-size: 14px;
  font-family: inherit;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--tg-teal);
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-row .filter-input {
  flex: 1;
}

.filter-sep {
  color: var(--search-muted);
  font-size: 14px;
}

.search-sidebar .btn-block {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 0;
}

.search-main {
  min-width: 0;
}

.search-results-head {
  margin-bottom: 20px;
}

.search-results-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--search-text);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.search-results-count {
  font-size: 14px;
  color: var(--search-muted);
  margin: 0;
}

.search-results-order-note {
  font-size: 12px;
  color: var(--search-muted);
  margin: 6px 0 0;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.search-card {
  background: var(--search-card-bg);
  border: 1px solid var(--search-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-card:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.12);
}

.search-card-provider-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: opacity 0.15s;
}

.search-card-provider-link:hover {
  opacity: 0.9;
}

.search-card-provider-link .search-card-name {
  color: var(--tg-teal);
}

.search-card-title a {
  color: inherit;
  text-decoration: none;
}

.search-card-title a:hover {
  color: var(--tg-teal);
}

.search-card-thumb {
  aspect-ratio: 16/9;
  background: var(--search-border);
  position: relative;
  overflow: hidden;
}

.search-card-thumb img,
.search-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-card-thumb--carousel > .search-card-carousel-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.search-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

/* Carousel sur les cartes recherche */
.search-card-thumb--carousel {
  position: relative;
}

.search-card-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.search-card-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
}

.search-card-carousel-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--search-border);
}

.search-card-carousel-item img,
.search-card-carousel-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-card-carousel-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.search-card-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0.85;
  transition: opacity 0.2s, background 0.2s;
}

.search-card-carousel-btn:hover {
  opacity: 1;
  background: #fff;
}

.search-card-carousel-btn:focus {
  outline: 2px solid var(--tg-teal);
  outline-offset: 2px;
}

.search-card-carousel-btn-prev {
  left: 8px;
}

.search-card-carousel-btn-prev::after {
  content: '';
  width: 10px;
  height: 10px;
  border-left: 2px solid #334155;
  border-bottom: 2px solid #334155;
  transform: rotate(45deg);
  margin-left: 4px;
}

.search-card-carousel-btn-next {
  right: 8px;
}

.search-card-carousel-btn-next::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid #334155;
  border-top: 2px solid #334155;
  transform: rotate(45deg);
  margin-right: 4px;
}

.search-card-carousel-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  z-index: 2;
}

.search-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: var(--tg-teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  z-index: 3;
}

.search-card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.search-card-provider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  min-width: 0;
}

.search-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tg-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.search-card-avatar .search-card-avatar-img,
.search-card-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.search-card-avatar .search-card-avatar-img {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--tg-teal);
  color: #fff;
}

.search-card-provider-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.search-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--search-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-card-headline {
  font-size: 11px;
  color: var(--search-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.search-card-rating {
  font-size: 13px;
  color: var(--tg-yellow);
  font-weight: 600;
  margin-bottom: 8px;
}

.search-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 6px;
  line-height: 1.35;
  color: var(--search-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.search-card-category {
  font-size: 12px;
  color: var(--search-muted);
  margin: 0 0 10px;
  line-height: 1.3;
}

.search-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.search-card-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--tg-teal);
}

.search-card-delivery {
  font-size: 12px;
  color: var(--search-muted);
}

.search-empty {
  text-align: center;
  padding: 56px 32px;
  background: var(--search-card-bg);
  border: 1px solid var(--search-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.search-empty-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--search-text);
  margin: 0 0 12px;
}

.search-empty p {
  margin: 0 0 20px;
  color: var(--search-muted);
  font-size: 1.05rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.search-empty .btn-secondary,
.search-empty .btn-primary {
  margin: 0 6px;
}

/* Section prestataires sans offre (Titre / Accroche, profil) */
.search-providers-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--search-border);
}

.search-providers-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--search-text);
  margin: 0 0 6px;
}

.search-providers-intro {
  font-size: 14px;
  color: var(--search-muted);
  margin: 0 0 20px;
}

.search-card-provider-only {
  cursor: pointer;
  min-height: 120px;
  text-decoration: none;
  color: inherit;
}

.search-card-provider-only .search-card-bio {
  font-size: 13px;
  color: var(--search-muted);
  margin: 8px 0 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-card-no-offer {
  font-size: 12px;
  color: var(--tg-teal);
  margin: 10px 0 0;
  font-weight: 600;
}

/* ----- Préférences de visibilité (compte) ----- */
.preferences-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.preferences-item {
  margin-bottom: 12px;
}

.preferences-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 500;
}

.preferences-label input.visibility-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--tg-teal);
}

.preferences-label-text {
  font-size: 1rem;
}

/* ----- Profil public prestataire ----- */
.public-profile-page {
  padding: 0 0 64px;
  min-height: 50vh;
}

.public-profile-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.public-profile-cover {
  border-radius: 0;
  margin-bottom: 0;
  max-height: 280px;
  overflow: hidden;
}

.public-profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-profile-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  align-items: start;
  margin-top: -48px;
  position: relative;
  z-index: 2;
}

.public-profile-body--single {
  grid-template-columns: 1fr;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.public-profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.public-profile-card {
  margin-top: 0;
  flex-shrink: 0;
}

.public-profile-sidebar-section {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 20px;
}

.public-profile-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.public-profile-main .profile-section {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 24px;
}

@media (max-width: 900px) {
  .public-profile-body {
    grid-template-columns: 1fr;
    margin-top: -32px;
  }
  .public-profile-sidebar {
    order: 1;
  }
  .public-profile-main {
    order: 2;
  }
}

.public-profile-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.public-profile-service-card {
  display: flex;
  flex-direction: column;
  background: var(--search-card-bg, #fff);
  border: 1px solid var(--search-border, #e2e8f0);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.public-profile-service-card:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.1);
}

.public-profile-service-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.public-profile-service-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

.public-profile-service-body {
  padding: 14px;
}

.public-profile-service-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
}

.public-profile-service-cat {
  font-size: 12px;
  color: var(--search-muted, #64748b);
  margin: 0 0 8px;
}

.public-profile-service-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-teal);
  margin: 0;
}

/* ----- Page détail service (type ComeUp) ----- */
/* ==========================================================================
   Service Detail Page v2 (sdp-*)
   ========================================================================== */

/* ── Page wrapper ── */
.sdp-page {
  padding: 20px 20px 100px;
  min-height: 60vh;
}

.sdp-inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* ── Breadcrumb ── */
.sdp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--tg-muted);
  margin-bottom: 20px;
}
.sdp-breadcrumb a {
  color: var(--tg-muted-light);
  text-decoration: none;
  transition: color var(--transition);
}
.sdp-breadcrumb a:hover { color: var(--tg-teal-light); }
.sdp-breadcrumb-current { color: var(--tg-white-soft); }

/* ── Title bar ── */
.sdp-title-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sdp-title-left { flex: 1; min-width: 0; }

.sdp-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(20,184,166,0.12);
  border: 1px solid rgba(20,184,166,0.3);
  color: var(--tg-teal-light);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.sdp-category-link {
  display: inline-block;
  font-size: 13px;
  color: var(--tg-teal);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color var(--transition);
}
.sdp-category-link:hover { color: var(--tg-teal-light); }

.sdp-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--tg-white);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.sdp-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.sdp-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--tg-white-soft);
}
.sdp-rating strong { color: #facc15; }
.sdp-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--tg-muted-light);
}
.sdp-meta-muted { color: var(--tg-muted); }

.sdp-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* ── Action buttons (fav, share) ── */
.sdp-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tg-border);
  background: var(--tg-surface-elevated);
  color: var(--tg-muted-light);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.sdp-action-btn:hover {
  border-color: var(--tg-muted);
  color: var(--tg-white-soft);
  background: rgba(255,255,255,0.04);
}
.sdp-action-btn.is-favorited {
  color: #f87171;
  border-color: rgba(248,113,113,0.35);
  background: rgba(248,113,113,0.07);
}
.sdp-action-btn--danger { color: var(--tg-muted); }
.sdp-action-btn--danger:hover { color: #f87171; border-color: rgba(248,113,113,0.35); }

/* ── Layout ── */
.sdp-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: start;
}

/* ── Gallery ── */
.sdp-gallery { margin-bottom: 28px; }

.sdp-carousel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tg-black);
  border: 1px solid var(--tg-border);
  /* Hauteur fixe adaptative : images toujours bien cadrées */
  height: 420px;
  max-height: 60vh;
}

.sdp-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

.sdp-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--tg-black);
}

/* Images : cover pour remplir le cadre, centré */
.sdp-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sdp-media-video {
  width: 100%;
  height: 100%;
  position: relative;
}
.sdp-media-video iframe,
.sdp-media-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.sdp-carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 10px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  color: var(--tg-white-soft);
  font-size: 12px;
}

.sdp-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(10,15,26,0.75);
  backdrop-filter: blur(8px);
  color: var(--tg-white-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.sdp-carousel-arrow:hover {
  background: var(--tg-teal);
  border-color: var(--tg-teal);
  color: var(--tg-black);
}
.sdp-carousel-arrow--prev { left: 12px; }
.sdp-carousel-arrow--next { right: 12px; }

.sdp-carousel-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(10,15,26,0.7);
  backdrop-filter: blur(6px);
  color: var(--tg-white-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Thumbnails strip */
.sdp-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tg-border) transparent;
  padding-bottom: 4px;
}

.sdp-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--tg-surface-elevated);
  cursor: pointer;
  transition: border-color var(--transition), opacity var(--transition);
  padding: 0;
  opacity: 0.6;
}
.sdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sdp-thumb.is-active {
  border-color: var(--tg-teal);
  opacity: 1;
}
.sdp-thumb:hover { opacity: 0.85; }

.sdp-thumb-video-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--tg-teal-light);
}

/* Cover fallback */
.sdp-cover {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  border: 1px solid var(--tg-border);
}
.sdp-cover img {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ── Provider card (inline in main) ── */
.sdp-provider-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--tg-border);
  background: var(--tg-surface-elevated);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.sdp-provider-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.sdp-provider-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.sdp-provider-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.sdp-provider-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--tg-surface-elevated);
}

.sdp-provider-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.sdp-provider-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--tg-white);
}

.sdp-premium-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #0a0f1a;
  letter-spacing: 0.04em;
}

.sdp-provider-headline {
  font-size: 13px;
  color: var(--tg-muted-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sdp-provider-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--tg-white-soft);
}

.sdp-provider-profile-btn {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-teal-light);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.sdp-provider-profile-btn:hover { color: var(--tg-teal); }

/* ── Sections ── */
.sdp-section {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--tg-border);
}
.sdp-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.sdp-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 18px;
}
.sdp-section-title svg { color: var(--tg-teal); flex-shrink: 0; }

.sdp-short-desc {
  font-size: 1rem;
  color: var(--tg-muted-light);
  line-height: 1.7;
  margin: 0;
}

.sdp-markdown { font-size: 15px; line-height: 1.75; color: var(--tg-white-soft); }

/* Tags */
.sdp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sdp-tag {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tg-border);
  background: var(--tg-surface-elevated);
  color: var(--tg-muted-light);
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--transition), color var(--transition);
}
.sdp-tag:hover { border-color: var(--tg-teal); color: var(--tg-teal-light); }

/* ── Plans ── */
.sdp-plans-section { border-bottom: none; }

.sdp-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

.sdp-plan {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--tg-border);
  background: var(--tg-surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.sdp-plan:hover {
  border-color: var(--tg-muted);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.sdp-plan--recommended {
  border-color: var(--tg-teal);
  box-shadow: 0 0 0 1px rgba(20,184,166,0.3), 0 8px 28px rgba(20,184,166,0.1);
}
.sdp-plan--recommended:hover { transform: translateY(-3px); }

.sdp-plan-top-badge {
  background: linear-gradient(90deg, var(--tg-teal-dark), var(--tg-teal));
  color: var(--tg-black);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 7px 12px;
  letter-spacing: 0.04em;
}

.sdp-plan-header {
  padding: 20px 20px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sdp-plan-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--tg-white);
}

.sdp-plan-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tg-teal);
  margin: 0;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.sdp-plan-price span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tg-muted-light);
}

.sdp-plan-delivery {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  font-size: 13px;
  color: var(--tg-muted);
}
.sdp-plan-delivery svg { color: var(--tg-teal); flex-shrink: 0; }

.sdp-plan-desc {
  padding: 0 20px;
  font-size: 13.5px;
  color: var(--tg-muted-light);
  line-height: 1.6;
  flex: 1;
}
.sdp-plan-desc ul { margin: 0.5em 0; padding-left: 1.4em; }
.sdp-plan-desc li { margin-bottom: 4px; }

.sdp-plan-cta {
  margin: 0 20px 20px;
  text-align: center;
}

.sdp-plan-own {
  display: block;
  margin: 0 20px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--tg-muted);
  font-style: italic;
}

/* ── Sidebar ── */
.sdp-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sdp-sidebar-card {
  border-radius: var(--radius);
  border: 1px solid var(--tg-border);
  background: var(--tg-surface);
  overflow: hidden;
}

/* CTA card */
.sdp-cta-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sdp-sidebar-price {
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--tg-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sdp-sidebar-price-label {
  font-size: 12px;
  color: var(--tg-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sdp-sidebar-price-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--tg-white);
  letter-spacing: -0.03em;
}
.sdp-sidebar-price-currency {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tg-teal-light);
}

.sdp-sidebar-delivery {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 22px;
  font-size: 13px;
  color: var(--tg-muted-light);
  border-bottom: 1px solid var(--tg-border);
}
.sdp-sidebar-delivery svg { color: var(--tg-teal); }

.sdp-cta-main, .sdp-cta-msg {
  margin: 16px 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 12px;
  letter-spacing: -0.01em;
}
.sdp-cta-msg { margin-top: 10px; }
.sdp-cta-msg-form { margin: 10px 16px 0; }
.sdp-cta-msg-form .sdp-cta-msg { margin: 0; }

/* ── Trust seals ── */
.sdp-trust-seals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--tg-border);
  margin-top: 4px;
}
.sdp-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--tg-muted-light);
}
.sdp-trust-item svg { color: var(--tg-teal); flex-shrink: 0; }

.sdp-sidebar-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  flex-wrap: wrap;
}
.sdp-sidebar-actions .sdp-action-btn {
  flex: 1;
  justify-content: center;
  min-width: 0;
}

/* Provider sidebar card */
.sdp-provider-sidebar-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sdp-sidebar-provider-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--tg-border);
  transition: background var(--transition);
}
.sdp-sidebar-provider-link:hover { background: rgba(255,255,255,0.02); }

.sdp-sidebar-provider-avatar-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.sdp-sidebar-provider-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.sdp-provider-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--tg-surface);
}

.sdp-sidebar-provider-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sdp-sidebar-provider-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 14px;
  color: var(--tg-white);
}
.sdp-sidebar-provider-headline {
  font-size: 12px;
  color: var(--tg-muted-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sdp-sidebar-provider-stats {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--tg-border);
}
.sdp-pstat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 10px;
  border-right: 1px solid var(--tg-border);
  text-align: center;
}
.sdp-pstat:last-child { border-right: none; }
.sdp-pstat-val {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-white-soft);
}
.sdp-pstat-label {
  font-size: 11px;
  color: var(--tg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sdp-sidebar-profile-link {
  display: block;
  text-align: center;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-teal-light);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.sdp-sidebar-profile-link:hover {
  color: var(--tg-teal);
  background: rgba(20,184,166,0.04);
}

/* ── Mobile sticky CTA ── */
.sdp-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 12px 16px;
  background: var(--tg-surface-elevated);
  border-top: 1px solid var(--tg-border);
  backdrop-filter: blur(12px);
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.sdp-mobile-cta.is-hidden { display: none !important; }
.sdp-mobile-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--tg-teal-light);
  white-space: nowrap;
  flex-shrink: 0;
}
.sdp-mobile-btn { flex: 1; text-align: center; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .sdp-layout {
    grid-template-columns: 1fr;
  }
  .sdp-sidebar {
    position: static;
    order: -1; /* sidebar avant main sur tablet */
  }
}

@media (max-width: 768px) {
  .sdp-page { padding: 14px 14px 80px; }
  .sdp-title { font-size: 1.35rem; }
  .sdp-carousel { height: 260px; max-height: 50vw; min-height: 180px; }
  .sdp-provider-card { padding: 12px 14px; }
  .sdp-thumb { width: 58px; height: 42px; }
  .sdp-plans-grid { grid-template-columns: 1fr; }
  .sdp-layout { gap: 20px; }
  .sdp-mobile-cta { display: flex; }
  .sdp-sidebar { display: none; } /* caché sur mobile : sticky CTA suffit */
}

@media (max-width: 480px) {
  .sdp-title-actions { display: none; } /* actions dans la sidebar mobile CTA */
  .sdp-meta-row { gap: 10px; }
  .sdp-provider-card { flex-direction: column; align-items: flex-start; }
}

/* ── Ancien CSS conservé pour retro-compat (pages encore sur ancien template) ── */
.service-detail-page {
  padding: 24px 20px 64px;
  min-height: 60vh;
}

.service-detail-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.service-detail-header {
  margin-bottom: 24px;
}

.service-detail-category {
  margin: 0 0 8px;
  font-size: 14px;
}

.service-detail-category a {
  color: var(--tg-teal);
  text-decoration: none;
}

.service-detail-category a:hover {
  text-decoration: underline;
}

.service-detail-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.3;
  color: var(--tg-white-soft);
}

.service-detail-provider-line {
  margin: 0;
}

.service-detail-provider-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tg-muted-light);
  font-size: 15px;
  transition: color var(--transition);
}

.service-detail-provider-link:hover {
  color: var(--tg-teal-light);
}

.service-detail-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.service-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 900px) {
  .service-detail-layout {
    grid-template-columns: 1fr;
  }
}

.service-detail-gallery {
  margin-bottom: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
}

.service-detail-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  max-height: 480px;
  overflow: hidden;
}

.service-detail-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
}

.service-detail-carousel-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.service-detail-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--tg-black);
}

.service-detail-media-video {
  width: 100%;
  height: 100%;
  position: relative;
}

.service-detail-media-video iframe,
.service-detail-media-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.service-detail-carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: var(--tg-white-soft);
  font-size: 13px;
}

.service-detail-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--tg-border);
  background: rgba(15, 23, 42, 0.9);
  color: var(--tg-white-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
  z-index: 2;
}

.service-detail-carousel-btn:hover {
  background: var(--tg-surface-elevated);
  border-color: var(--tg-teal);
  color: var(--tg-teal-light);
}

.service-detail-carousel-btn-prev { left: 12px; }
.service-detail-carousel-btn-next { right: 12px; }

.service-detail-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

.service-detail-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.service-detail-carousel-dot:hover,
.service-detail-carousel-dot.active {
  background: var(--tg-white-soft);
}

.service-detail-carousel-dot.active {
  transform: scale(1.2);
}

.service-detail-cover {
  margin-bottom: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
}

.service-detail-cover img {
  width: 100%;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.service-detail-short-desc {
  font-size: 1.05rem;
  color: var(--tg-muted-light);
  margin: 0 0 28px;
  line-height: 1.6;
}

.service-detail-section-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--tg-white-soft);
}

.service-detail-description {
  margin-bottom: 32px;
}

.service-detail-markdown {
  margin: 0;
}

.service-detail-plans {
  margin-bottom: 32px;
}

.service-detail-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.service-detail-plan-card {
  position: relative;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--tg-border);
  background: var(--tg-surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.service-detail-plan-card:hover {
  border-color: var(--tg-muted);
  box-shadow: var(--shadow-sm);
}

.service-detail-plan-card--recommended {
  border-color: var(--tg-teal);
  box-shadow: 0 0 0 1px var(--tg-teal);
}

.service-detail-plan-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tg-teal-light);
}

.service-detail-plan-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--tg-white-soft);
}

.service-detail-plan-delivery {
  font-size: 13px;
  color: var(--tg-muted);
  margin: 0;
}

.service-detail-plan-desc {
  font-size: 14px;
  color: var(--tg-muted-light);
  margin: 0;
  flex: 1;
}

.service-detail-plan-desc ul,
.service-detail-plan-desc ol {
  margin: 0.25em 0;
  padding-left: 1.2em;
}

.service-detail-plan-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tg-teal);
  margin: 0;
}

.service-detail-plan-cta {
  display: inline-block;
  text-align: center;
  margin-top: 4px;
}

.service-detail-sidebar {
  position: sticky;
  top: 90px;
}

.service-detail-sidebar-card {
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--tg-border);
  background: var(--tg-surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-detail-price-from {
  font-size: 1.1rem;
  color: var(--tg-muted-light);
  margin: 0;
}

.service-detail-price-from strong {
  color: var(--tg-teal);
  font-size: 1.25rem;
}

.service-detail-sidebar-provider {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tg-white-soft);
  font-weight: 500;
  transition: color var(--transition);
}

.service-detail-sidebar-provider:hover {
  color: var(--tg-teal-light);
}

.service-detail-sidebar-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.service-detail-sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail-sidebar-cta {
  margin-top: 8px;
}

/* ----- Page Aide ----- */
.help-page {
  padding: 32px 24px 64px;
  min-height: 60vh;
}

.help-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

.help-nav {
  position: sticky;
  top: 100px;
}

.help-nav-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}

.help-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.help-nav-link {
  display: block;
  padding: 10px 14px;
  color: var(--tg-white-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.help-nav-link:hover {
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-teal-light);
}

.help-content {
  min-width: 0;
}

.help-main-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 12px;
}

.help-intro {
  font-size: 1.05rem;
  color: var(--tg-muted-light);
  line-height: 1.6;
  margin: 0 0 32px;
}

.help-section {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--tg-border);
}

.help-section:last-of-type {
  border-bottom: 0;
}

.help-section-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tg-teal-light);
  margin: 0 0 16px;
  padding-top: 8px;
}

.help-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tg-white);
  margin: 24px 0 12px;
}

.help-section p,
.help-section ul {
  color: var(--tg-white-soft);
  line-height: 1.65;
  margin: 0 0 12px;
}

.help-section ul {
  padding-left: 1.5em;
  margin-bottom: 16px;
}

.help-section li {
  margin-bottom: 6px;
}

.help-section a {
  color: var(--tg-teal-light);
  text-decoration: underline;
}

.help-section a:hover {
  color: var(--tg-teal);
}

.help-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.help-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--tg-text) !important;
  transition: border-color .15s, background .15s;
}
.help-contact-item:hover {
  border-color: var(--tg-teal);
  background: var(--tg-surface-hover, rgba(20,184,166,.05));
}
.help-contact-item svg { color: var(--tg-teal-light); flex-shrink: 0; }
.help-contact-item div { display: flex; flex-direction: column; gap: 2px; }
.help-contact-item strong { font-size: 14px; font-weight: 600; }
.help-contact-item span { font-size: 15px; color: var(--tg-teal-light); }

.help-example {
  margin: 20px 0;
}

.help-example-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tg-muted);
  margin: 0 0 8px;
}

.help-code {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tg-muted-light);
  overflow-x: auto;
  margin: 0;
  white-space: pre-wrap;
}

.help-rendered {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 20px;
  font-size: 0.95rem;
  color: var(--tg-white-soft);
}

.help-rendered h1 { font-size: 1.4rem; margin: 0 0 12px; }
.help-rendered h2 { font-size: 1.15rem; margin: 16px 0 8px; }
.help-rendered p { margin: 0 0 8px; }
.help-rendered ul { padding-left: 1.5em; margin: 0 0 12px; }
.help-rendered table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.help-rendered th,
.help-rendered td { border: 1px solid var(--tg-border); padding: 8px 12px; text-align: left; }

.help-section code {
  background: rgba(20, 184, 166, 0.15);
  color: var(--tg-teal-light);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

@media (max-width: 768px) {
  .help-inner {
    grid-template-columns: 1fr;
  }
  .help-nav {
    position: static;
  }
  .help-nav-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
  }
}

/* ----- Pages légales ----- */
.legal-inner {
  grid-template-columns: 200px 1fr;
}

.legal-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 100px;
}

.legal-nav a {
  display: block;
  padding: 10px 14px;
  color: var(--tg-white-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.legal-nav a:hover {
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-teal-light);
}

.legal-nav a.is-active {
  border-color: rgba(20, 184, 166, 0.35);
  background: rgba(20, 184, 166, 0.08);
  color: var(--tg-teal-light);
}

.legal-content .legal-lead {
  font-size: 1.05rem;
  color: var(--tg-muted-light);
  line-height: 1.65;
  margin: 0 0 28px;
}

.legal-content .legal-section {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--tg-border);
}

.legal-content .legal-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.legal-content .legal-section h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tg-teal-light);
  margin: 0 0 12px;
}

.legal-content .legal-section p,
.legal-content .legal-section li {
  color: var(--tg-muted-light);
  line-height: 1.65;
  margin: 0 0 10px;
}

.legal-content .legal-section ul {
  margin: 0 0 12px;
  padding-left: 1.35em;
}

.legal-content .legal-section .legal-note {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--tg-muted);
}

@media (max-width: 768px) {
  .legal-inner {
    grid-template-columns: 1fr;
  }

  .legal-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
  }

  .legal-nav a {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ----- Pages erreur (404 / 500) ----- */
.error-page {
  padding: 64px 24px 96px;
  max-width: 520px;
  margin: 0 auto;
}

.error-page .error-code {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--tg-teal);
  letter-spacing: -0.04em;
  opacity: 0.85;
}

.error-page .error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 12px;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

/* ----- Empty state ----- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--tg-muted);
}

.empty-state p {
  margin: 0 0 16px;
  font-size: 1.05rem;
}

/* ----- Responsive : tablette (1024px), mobile (768px), smartphone (480px) ----- */

/* Tablette */
@media (max-width: 1024px) {
  .search-layout-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .search-body {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }
  .search-results-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .category-spotlight-grid {
    grid-template-columns: 1fr;
  }
  .header-inner {
    padding: 12px 20px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .header-inner {
    flex-wrap: wrap;
    padding: 12px 16px;
  }
  .header-actions {
    order: 2;
  }
  .search-form-wrap {
    order: 3;
    max-width: none;
  }
  .search-form {
    order: 3;
    width: 100%;
    max-width: none;
  }
  .hero {
    padding-top: 48px;
    padding-bottom: 56px;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .hero-premium {
    min-height: 60vh;
    padding-top: 56px;
    padding-bottom: 72px;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .hero-badge {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 14px;
  }
  .hero-title {
    font-size: clamp(2rem, 5vw, 2.75rem);
  }
  .hero-quick-label {
    width: 100%;
    margin-right: 0;
    margin-bottom: 4px;
  }
  .section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .home-section .section-inner,
  .services-section .section-inner {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .home-scroll-h {
    margin-left: calc(-1 * max(20px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(20px, env(safe-area-inset-right, 0px)));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .domain-scroll {
    margin-left: calc(-1 * max(20px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(20px, env(safe-area-inset-right, 0px)));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .home-scroll-h .home-card {
    width: min(300px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px));
  }
  .domain-scroll .home-card {
    width: min(280px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px));
  }
  .section-head-row {
    align-items: flex-start;
    gap: 12px;
  }
  .section-head-row .section-link {
    flex-shrink: 0;
  }
  .home-carousel-btn {
    width: 40px;
    height: 40px;
  }
  .trust-section {
    padding-top: 48px;
    padding-bottom: 56px;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .testimonials {
    padding-top: 48px;
    padding-bottom: 56px;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .services-section {
    padding: 44px 0 52px;
  }
  .trending-section,
  .featured-providers-section,
  .how-it-works-section {
    padding: 44px 0 52px;
  }
  .explore-domains {
    padding: 40px 0 48px;
  }
  .explore-domains-list {
    gap: 36px;
  }
  .domain-block {
    padding-bottom: 32px;
  }
  .home-profiles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .profile-card-home {
    padding: 20px 12px;
  }
  .profile-card-avatar {
    width: 56px;
    height: 56px;
  }
  .profile-card-initial {
    font-size: 1.35rem;
  }
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .category-spotlight-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .category-spotlight {
    padding: 40px 0 48px;
  }
  .section-cta-block {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .cta-block {
    padding-top: 36px;
    padding-bottom: 36px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
  .search-layout-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .search-header {
    padding-top: 16px;
  }
  .search-header-form {
    flex-direction: column;
    align-items: stretch;
  }
  .search-header-input {
    min-width: 0;
  }
  .search-sort {
    min-width: 0;
  }
  .search-quick-filters {
    padding: 12px 0 16px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .search-quick-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 8px;
    padding-bottom: 4px;
  }
  .search-quick-pills::-webkit-scrollbar {
    height: 4px;
  }
  .search-quick-pills::-webkit-scrollbar-thumb {
    background: var(--search-border);
    border-radius: 4px;
  }
  .search-pill {
    flex-shrink: 0;
  }
  .search-body {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 20px;
  }
  .search-sidebar {
    position: static;
  }
  .search-results-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Smartphone (petit écran) */
@media (max-width: 480px) {
  .header-inner {
    padding: 10px 12px;
    gap: 8px;
  }
  .logo {
    flex-shrink: 0;
  }
  .logo img {
    height: 36px;
  }
  .hero-premium {
    min-height: 55vh;
    padding-top: 40px;
    padding-bottom: 56px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .hero {
    padding-top: 40px;
    padding-bottom: 48px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .hero-title {
    font-size: 1.75rem;
  }
  .hero-tagline {
    font-size: 1.05rem;
  }
  .hero-search-form input {
    font-size: 16px;
    min-width: 0;
  }
  .home-section .section-inner,
  .services-section .section-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .home-scroll-h {
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .domain-scroll {
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .home-scroll-h .home-card {
    width: min(300px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px));
  }
  .domain-scroll .home-card {
    width: min(280px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px));
  }
  .section-head-row {
    flex-direction: column;
    align-items: stretch;
  }
  .section-head-row .section-link {
    align-self: flex-start;
  }
  .providers-grid-home {
    grid-template-columns: 1fr;
  }
  .home-profiles-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .section-cta-block {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .cta-block {
    padding-top: 28px;
    padding-bottom: 28px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .cta-block h2 {
    font-size: 1.25rem;
  }
  .trust-section {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .testimonials {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .domain-block-title,
  .domain-block-desc {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .provider-card-name,
  .provider-card-headline,
  .provider-card-bio {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .service-card .body {
    padding: 16px 14px;
  }
  .how-step {
    padding: 22px 18px;
  }
  .search-layout-inner {
    padding-left: 12px;
    padding-right: 12px;
  }
  .search-quick-filters {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .search-pill {
    padding: 6px 14px;
    font-size: 12px;
  }
  .search-card-body {
    padding: 14px;
  }
  .search-card-title {
    font-size: 0.95rem;
  }
  .page-search-layout {
    padding-bottom: 32px;
  }
}

/* ==========================================================================
   NOUVELLES SECTIONS HOME : Tendances + Prestataires vedette
   ========================================================================== */

.section-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-title-group--row {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.section-accent-dash {
  flex-shrink: 0;
  width: 4px;
  height: 1.35em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tg-teal) 0%, #16a34a 100%);
  box-shadow: 0 0 14px rgba(20, 184, 166, 0.35);
}

.section-head-row--with-accent .section-title-group--row .section-title {
  margin-bottom: 0;
}

.section-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tg-yellow);
}

.trending-section {
  background: var(--tg-surface);
  padding: 56px 0 64px;
}

.featured-providers-section {
  padding: 56px 0 64px;
}

/* Grille prestataires vedette (home) */
.providers-grid-home {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.provider-card-home {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 20px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.provider-card-home:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 8px 28px rgba(20, 184, 166, 0.12);
  transform: translateY(-2px);
}

.provider-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.provider-card-avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.provider-card-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tg-border);
}

.provider-card-initial {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-teal), var(--tg-teal-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
}

.verified-badge,
.premium-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  border: 2px solid var(--tg-black);
}

.verified-badge {
  background: var(--tg-teal);
  color: #fff;
}

.premium-badge {
  background: var(--tg-yellow);
  color: #000;
}

.provider-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.provider-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tg-white);
}

.provider-card-headline {
  font-size: 0.78rem;
  color: var(--tg-muted-light);
  line-height: 1.3;
}

.provider-card-bio {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--tg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.provider-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--tg-muted-light);
  margin-top: 4px;
}

.provider-card-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--tg-yellow);
  font-weight: 600;
}

.provider-card-city {
  color: var(--tg-muted);
}

.review-count {
  color: var(--tg-muted);
  font-weight: 400;
}

/* Bouton favori (service et provider) */
.btn-fav-service,
.btn-fav-provider {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--tg-border);
  color: var(--tg-muted-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
  z-index: 10;
}

.btn-fav-service {
  top: 10px;
  right: 10px;
}

.btn-fav-provider {
  position: relative;
  top: unset;
  right: unset;
  align-self: flex-end;
  margin-top: auto;
}

.btn-fav-service:hover,
.btn-fav-provider:hover {
  color: #f87171;
  border-color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  transform: scale(1.08);
}

.btn-fav-service.is-favorited,
.btn-fav-provider.is-favorited {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.08);
}

/* Le service-card doit être relative pour le btn-fav-service */
.service-card {
  position: relative;
}

/* Thumbnail placeholder */
.thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--tg-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-muted);
}

/* ==========================================================================
   PAGE PRESTATAIRES (providers_list.html) — annuaire premium
   ========================================================================== */

/* En-têtes partagés (categories_list, etc.) */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--tg-white);
  margin: 8px 0 4px;
}

.page-subtitle {
  color: var(--tg-muted-light);
  margin: 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--tg-muted);
}

.breadcrumb a {
  color: var(--tg-teal);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Filtres génériques (autres pages) */
.filters-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  color: var(--tg-white);
  font-size: 0.9rem;
  font-family: var(--font);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.filter-input:focus {
  outline: none;
  border-color: var(--tg-teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.filter-input::placeholder {
  color: var(--tg-muted);
}

.filter-select {
  padding: 10px 14px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  color: var(--tg-white);
  font-size: 0.9rem;
  font-family: var(--font);
  cursor: pointer;
  min-width: 160px;
  transition: border-color var(--transition);
}

.filter-select:focus {
  outline: none;
  border-color: var(--tg-teal);
}

.filter-select option {
  background: var(--tg-surface-elevated);
  color: var(--tg-white);
}

.filter-checkboxes {
  display: flex;
  gap: 14px;
}

.filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--tg-muted-light);
  cursor: pointer;
  user-select: none;
}

.filter-check input[type="checkbox"] {
  accent-color: var(--tg-teal);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* --- Annuaire prestataires + catégories (même squelette) --- */
.providers-directory,
.categories-directory {
  width: 100%;
  min-width: 0;
}

.providers-directory .section-inner,
.categories-directory .section-inner {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

.directory-page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 52px) 0 clamp(44px, 7vw, 56px);
  margin-bottom: 0;
  border-bottom: 1px solid var(--tg-border);
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(20, 184, 166, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, var(--tg-black) 100%);
}

.directory-page-hero__mesh {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.directory-page-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.5;
}

.directory-page-hero__glow--1 {
  width: 280px;
  height: 280px;
  background: rgba(20, 184, 166, 0.35);
  top: -80px;
  right: 10%;
}

.directory-page-hero__glow--2 {
  width: 200px;
  height: 200px;
  background: rgba(59, 130, 246, 0.12);
  bottom: -60px;
  left: 5%;
}

.directory-page-hero__inner {
  position: relative;
  z-index: 1;
}

.directory-page-hero__crumb {
  margin-bottom: 12px;
  color: var(--tg-muted);
}

.directory-page-hero__crumb a {
  color: var(--tg-teal-light);
}

.directory-page-hero__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.directory-page-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--tg-white);
  line-height: 1.15;
}

.directory-page-hero__lead {
  font-size: clamp(1rem, 2.2vw, 1.08rem);
  color: var(--tg-muted-light);
  margin: 0;
  max-width: 580px;
  line-height: 1.6;
}

.directory-page-hero__note {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--tg-muted);
  max-width: 580px;
  line-height: 1.5;
}

.directory-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}

.directory-page-hero__btn {
  white-space: nowrap;
}

.providers-directory__inner,
.categories-directory__inner {
  padding-top: 36px;
  padding-bottom: clamp(72px, 12vw, 96px);
}

/* Panneau filtres */
.providers-filters {
  background: rgba(30, 41, 59, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  padding: 22px 24px 20px;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.providers-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.providers-filters__row--secondary {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tg-border);
  justify-content: space-between;
}

.providers-filters__search {
  position: relative;
  flex: 1 1 220px;
  min-width: min(100%, 200px);
}

.providers-filters__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tg-muted);
  pointer-events: none;
}

.providers-filters__input {
  width: 100%;
  padding: 12px 14px 12px 44px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  color: var(--tg-white);
  font-size: 0.9375rem;
  font-family: var(--font);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}

.providers-filters__input--city {
  padding-left: 14px;
  flex: 0 1 160px;
  min-width: 120px;
}

.providers-filters__input:focus {
  outline: none;
  border-color: var(--tg-teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.providers-filters__input::placeholder {
  color: var(--tg-muted);
}

.providers-filters__select {
  padding: 12px 14px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  color: var(--tg-white);
  font-size: 0.9rem;
  font-family: var(--font);
  cursor: pointer;
  min-width: 160px;
  flex: 0 1 auto;
  transition: border-color var(--transition);
}

.providers-filters__select:focus {
  outline: none;
  border-color: var(--tg-teal);
}

.providers-filters__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--tg-muted-light);
  cursor: pointer;
  user-select: none;
}

.providers-filters__check input {
  accent-color: var(--tg-teal);
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.providers-filters__submit-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Grille cartes */
.providers-directory-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: clamp(18px, 2.5vw, 26px);
}

.providers-directory-grid__cell {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.provider-dir-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, rgba(30, 41, 59, 0.72) 0%, var(--tg-surface) 46%);
  border: 1px solid var(--tg-border);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  position: relative;
}

.provider-dir-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tg-teal), var(--tg-teal-dark), rgba(20, 184, 166, 0.35));
  opacity: 0.9;
  pointer-events: none;
}

.provider-dir-card:hover {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(20, 184, 166, 0.14);
  transform: translateY(-4px);
}

.provider-dir-card__main {
  display: flex;
  gap: 20px;
  padding: 26px 24px 20px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-height: 0;
}

.provider-dir-card__visual {
  position: relative;
  flex-shrink: 0;
}

.provider-dir-card__avatar-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(145deg, rgba(20, 184, 166, 0.9), rgba(15, 118, 110, 0.45));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.provider-dir-card__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--tg-black);
  box-sizing: border-box;
  background: var(--tg-surface-elevated);
}

.provider-dir-card__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.125rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, var(--tg-teal), var(--tg-teal-dark));
}

.provider-dir-card__status-badges {
  position: absolute;
  bottom: 2px;
  right: -4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.provider-dir-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  border: 2px solid var(--tg-black);
  line-height: 1;
}

.provider-dir-badge--verified {
  background: var(--tg-teal);
  color: #fff;
}

.provider-dir-badge--premium {
  background: var(--tg-yellow);
  color: #000;
}

.provider-dir-badge--online {
  width: 12px;
  height: 12px;
  background: var(--gn-green);
  border: 2px solid var(--tg-black);
}

.provider-dir-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.provider-dir-card__name {
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 0;
  color: var(--tg-white);
  letter-spacing: -0.02em;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.provider-dir-card__domain {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tg-teal-light);
  line-height: 1.4;
}

.provider-dir-card__domain-icon {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.9;
}

.provider-dir-card__domain-text {
  flex: 1;
  min-width: 0;
}

.provider-dir-card__domain-sep {
  margin: 0 0.35em;
  opacity: 0.55;
}

.provider-dir-card__tagline {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tg-muted-light);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.provider-dir-card__bio {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--tg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.provider-dir-card__bio--muted {
  font-style: italic;
  opacity: 0.85;
  -webkit-line-clamp: 2;
}

.provider-dir-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.8rem;
}

.provider-dir-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tg-muted-light);
}

.provider-dir-card__meta-item--rating {
  color: var(--tg-yellow);
  font-weight: 600;
}

.provider-dir-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--tg-border);
  background: rgba(0, 0, 0, 0.18);
}

.provider-dir-card__cta {
  flex: 1;
  justify-content: center;
  text-align: center;
}

.provider-dir-card__fav.btn-fav-provider {
  position: static;
  align-self: center;
  margin-top: 0;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.providers-directory-empty__icon {
  color: var(--tg-muted);
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .directory-page-hero {
    padding: 28px 0 40px;
  }

  .providers-filters {
    padding: 18px 18px 16px;
    margin-bottom: 24px;
  }

  .directory-page-hero__head {
    flex-direction: column;
    align-items: stretch;
  }

  .directory-page-hero__actions {
    flex-direction: column;
  }

  .directory-page-hero__actions .directory-page-hero__btn {
    width: 100%;
    justify-content: center;
  }

  .providers-filters__row--secondary {
    flex-direction: column;
    align-items: stretch;
  }

  .providers-filters__submit-wrap {
    margin-left: 0;
  }

  .provider-dir-card__main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 20px 18px;
  }

  .provider-dir-card__footer {
    padding: 14px 20px 18px;
  }

  .provider-dir-card__content {
    align-items: center;
  }

  .provider-dir-card__domain {
    justify-content: center;
    text-align: center;
  }

  .provider-dir-card__meta {
    justify-content: center;
  }

  .provider-dir-card__status-badges {
    right: 0;
    bottom: 0;
    flex-direction: row;
  }
}

/* ==========================================================================
   SUBNAV (navigation secondaire sous le header)
   ========================================================================== */

.site-subnav {
  background: var(--tg-surface);
  border-bottom: 1px solid var(--tg-border);
  position: sticky;
  top: var(--header-height, 68px);
  z-index: 90;
}

.site-subnav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.site-subnav-inner::-webkit-scrollbar {
  display: none;
}

.site-subnav-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tg-muted-light);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.site-subnav-link:hover {
  color: var(--tg-white);
  border-bottom-color: rgba(20, 184, 166, 0.4);
}

.site-subnav-link.is-active {
  color: var(--tg-teal);
  border-bottom-color: var(--tg-teal);
}

/* ==========================================================================
   PAGE PRESTATAIRES — providers_list.html
   ========================================================================== */

.providers-page {
  min-height: 60vh;
}

/* ---- Hero ---- */
.providers-hero {
  background: linear-gradient(160deg, rgba(20,184,166,0.09) 0%, transparent 60%);
  border-bottom: 1px solid var(--tg-border);
  padding: 36px 0 28px;
}

.providers-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.providers-hero-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--tg-white);
  margin: 0 0 4px;
  line-height: 1.15;
}

.providers-hero-sub {
  color: var(--tg-muted-light);
  margin: 0;
  font-size: 0.95rem;
}

.providers-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

/* ---- Conteneur principal ---- */
.providers-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

/* ---- Barre de filtres ---- */
.providers-filters {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.providers-filters-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.providers-filter-search {
  flex: 1 1 200px;
  min-width: 0;
}

.providers-filter-city {
  width: 150px;
  flex-shrink: 0;
}

.providers-filter-sort {
  width: 160px;
  flex-shrink: 0;
}

.providers-filter-checks {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.filter-check-icon--verified { color: var(--tg-teal); }
.filter-check-icon--premium  { color: var(--tg-yellow); }

/* Filtres actifs */
.providers-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--tg-border);
}

.providers-active-label {
  font-size: 0.75rem;
  color: var(--tg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(20, 184, 166, 0.09);
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 9999px;
  font-size: 0.77rem;
  color: var(--tg-teal-light);
  white-space: nowrap;
}

.active-filter-tag--premium {
  background: rgba(250,204,21,0.08);
  border-color: rgba(250,204,21,0.28);
  color: var(--tg-yellow);
}

/* ---- Grille prestataires ---- */
.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
}

/* ============================================================
   PCARD — carte prestataire
   ============================================================ */

.pcard {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}

.pcard:hover {
  border-color: rgba(20, 184, 166, 0.4);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px);
}

/* -- En-tête carte prestataire : avatar + badges + fav -- */
.pcard-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 16px 0;
}

.pcard-head-right {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}

.pcard-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pcard-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
}

.pcard-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 3px solid var(--tg-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.pcard-avatar-initial {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-teal), var(--tg-teal-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.pcard-online-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--tg-surface-elevated);
}

body.providers-page-light .pcard-online-dot {
  border-color: #fff;
}

.pcard-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.pcard-badge--verified { background: rgba(20,184,166,0.9);  color: #fff; }
.pcard-badge--premium  { background: rgba(250,204,21,0.95); color: #000; }

/* bouton favori (haut gauche) */
.pcard-fav-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pcard-fav-btn:hover {
  background: rgba(0,0,0,0.75);
  color: #f87171;
  transform: scale(1.12);
}

.pcard-fav-btn.is-favorited {
  color: #f87171;
  background: rgba(248,113,113,0.18);
}

/* -- corps de la carte -- */
.pcard-body {
  flex: 1;
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pcard-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.pcard-name {
  font-size: 0.975rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.pcard-name-link {
  color: inherit;
  text-decoration: none;
}

.pcard-name-link:hover { color: var(--tg-teal); }

.pcard-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #facc15;
  flex-shrink: 0;
  margin-top: 1px;
}

.pcard-rating-count {
  color: var(--tg-muted);
  font-weight: 400;
  font-size: 0.75rem;
}

.pcard-headline {
  font-size: 0.83rem;
  color: var(--tg-muted-light);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.77rem;
  color: var(--tg-muted);
}

.pcard-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pcard-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.pcard-skill-tag {
  padding: 3px 9px;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.17);
  border-radius: 9999px;
  font-size: 0.71rem;
  color: var(--tg-teal-light);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pcard-skill-tag:hover {
  background: rgba(20, 184, 166, 0.16);
  border-color: rgba(20, 184, 166, 0.35);
}

/* -- pied de carte -- */
.pcard-footer {
  padding: 11px 16px;
  border-top: 1px solid var(--tg-border);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 0 0 var(--radius) var(--radius);
}

.pcard-btn-profile {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  padding: 7px 12px;
}

body.providers-page-light .pcard-btn-profile {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  border: none;
}

body.providers-page-light .pcard-btn-msg {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

body.providers-page-light .pcard-btn-msg:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.pcard-btn-msg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tg-border);
  background: transparent;
  color: var(--tg-muted-light);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.pcard-btn-msg:hover {
  border-color: var(--tg-teal);
  color: var(--tg-teal);
  background: rgba(20,184,166,0.08);
}

.pcard-msg-form {
  display: contents;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .providers-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .providers-hero { padding: 24px 0 20px; }
  .providers-hero-inner { padding: 0 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .providers-hero-title { font-size: 1.5rem; }
  .providers-hero-cta { align-self: stretch; justify-content: center; }

  .providers-body { padding: 20px 16px 48px; }

  .providers-filters { padding: 14px 14px; margin-bottom: 18px; }
  .providers-filters-row { gap: 8px; }
  .providers-filter-city { display: none; }
  .providers-filter-sort { width: 140px; }

  .providers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pcard-avatar-wrap { width: 54px; height: 54px; }
  .pcard-avatar, .pcard-avatar-initial { width: 54px; height: 54px; font-size: 1.3rem; }
  .pcard-head { padding: 14px 12px 0; gap: 10px; }
  .pcard-body { padding: 10px 12px 10px; gap: 6px; }
  .pcard-name { font-size: 0.88rem; }
  .pcard-headline { font-size: 0.77rem; -webkit-line-clamp: 1; }
  .pcard-meta { display: none; }
  .pcard-skills { display: none; }
  .pcard-footer { padding: 9px 12px; }
  .pcard-btn-profile { font-size: 0.78rem; padding: 6px 8px; }
  .pcard-btn-msg { width: 30px; height: 30px; }

  .site-subnav-link { padding: 9px 10px; font-size: 0.82rem; gap: 5px; }
}

@media (max-width: 420px) {
  .providers-grid { grid-template-columns: 1fr; }
  .providers-filter-sort { display: none; }
  .providers-filter-checks { gap: 10px; }
  .pcard-meta { display: flex; }
  .pcard-skills { display: flex; }
  .pcard-body { padding: 12px 14px 12px; }
}

/* ==========================================================================
   PAGE CATÉGORIES (categories_list.html) — alignée annuaire prestataires
   ========================================================================== */

.categories-directory-grid {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2.5vw, 26px);
}

.categories-directory-grid__cell {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.category-dir-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-height: 100%;
  padding: 24px 22px 24px 24px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(168deg, rgba(30, 41, 59, 0.72) 0%, var(--tg-surface) 48%);
  border: 1px solid var(--tg-border);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.category-dir-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tg-teal), var(--tg-teal-dark), rgba(20, 184, 166, 0.35));
  opacity: 0.9;
  pointer-events: none;
}

.category-dir-card:hover {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(20, 184, 166, 0.14);
  transform: translateY(-4px);
}

.category-dir-card__icon-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.22);
  color: var(--tg-teal-light);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.category-dir-card__emoji {
  font-size: 1.65rem;
  line-height: 1;
}

.category-dir-card__svg {
  flex-shrink: 0;
}

.category-dir-card__body {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}

.category-dir-card__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.category-dir-card__desc {
  font-size: 0.875rem;
  color: var(--tg-muted-light);
  margin: 0 0 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-dir-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.category-dir-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tg-muted-light);
}

.category-dir-card__stat--muted {
  font-style: italic;
  opacity: 0.85;
}

.category-dir-card__chevron {
  flex-shrink: 0;
  align-self: center;
  color: var(--tg-teal);
  opacity: 0.35;
  transition: opacity var(--transition), transform var(--transition);
}

.category-dir-card:hover .category-dir-card__chevron {
  opacity: 1;
  transform: translateX(4px);
}

.categories-directory-empty__icon {
  color: var(--tg-muted);
  margin-bottom: 8px;
}

.categories-directory-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 8px;
  padding: clamp(28px, 5vw, 40px) clamp(24px, 4vw, 36px);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.14) 0%, rgba(20, 184, 166, 0.05) 100%);
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.categories-directory-cta__text {
  flex: 1;
  min-width: min(100%, 280px);
}

.categories-directory-cta__title {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 700;
  color: var(--tg-white);
}

.categories-directory-cta__lead {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tg-muted-light);
  line-height: 1.55;
  max-width: 520px;
}

.categories-directory-cta__btn {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .category-dir-card {
    flex-direction: column;
    align-items: stretch;
    padding: 22px 20px;
  }

  .category-dir-card__icon-wrap {
    width: 52px;
    height: 52px;
  }

  .category-dir-card__chevron {
    display: none;
  }

  .categories-directory-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .categories-directory-cta__lead {
    margin-left: auto;
    margin-right: auto;
  }

  .categories-directory-cta__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .providers-directory .section-inner,
  .categories-directory .section-inner {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }

  .providers-directory__inner,
  .categories-directory__inner {
    padding-top: 28px;
    padding-bottom: 64px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE CATÉGORIES — nouveau design (cat-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Palette de couleurs par index (6 couleurs cyclées) */
.cat-card--c1 .cat-card-cover { background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%); }
.cat-card--c2 .cat-card-cover { background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%); }
.cat-card--c3 .cat-card-cover { background: linear-gradient(135deg, #dc2626 0%, #f97316 100%); }
.cat-card--c4 .cat-card-cover { background: linear-gradient(135deg, #059669 0%, #0d9488 100%); }
.cat-card--c5 .cat-card-cover { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }
.cat-card--c6 .cat-card-cover { background: linear-gradient(135deg, #db2777 0%, #9333ea 100%); }

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.cat-wrap {
  min-height: 100vh;
  background: var(--tg-bg, #0a0f1a);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.cat-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 64px) 0 clamp(36px, 5vw, 52px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cat-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.cat-hero-glow {
  position: absolute; border-radius: 50%; filter: blur(90px);
}
.cat-hero-glow--1 {
  width: 320px; height: 320px;
  background: rgba(20,184,166,.28);
  top: -100px; right: 8%;
}
.cat-hero-glow--2 {
  width: 220px; height: 220px;
  background: rgba(99,102,241,.15);
  bottom: -60px; left: 4%;
}
.cat-hero-inner {
  position: relative; z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 max(24px, env(safe-area-inset-left, 0px));
}
.cat-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #64748b;
  margin-bottom: 18px;
}
.cat-breadcrumb a { color: var(--tg-teal-light, #14b8a6); text-decoration: none; }
.cat-breadcrumb a:hover { text-decoration: underline; }
.cat-hero-content {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.cat-hero-title {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 800; letter-spacing: -.03em;
  color: #f1f5f9; margin: 0 0 10px;
}
.cat-hero-sub {
  font-size: 1rem; color: #94a3b8;
  margin: 0; line-height: 1.55;
}
.cat-hero-sub strong { color: #e2e8f0; }
.cat-hero-actions {
  display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
}

/* ── Boutons hero ────────────────────────────────────────────────────────── */
.cat-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
  white-space: nowrap; border: none;
}
.cat-btn--primary {
  background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(13,148,136,.3);
}
.cat-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(13,148,136,.4);
  color: #fff;
}
.cat-btn--secondary {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: #cbd5e1;
}
.cat-btn--secondary:hover {
  background: rgba(255,255,255,.12);
  color: #f1f5f9;
  transform: translateY(-2px);
}

/* ── Barre de recherche hero ─────────────────────────────────────────────── */
.cat-search-wrap {
  position: relative;
  max-width: 480px;
}
.cat-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #64748b; pointer-events: none;
}
.cat-search-input {
  width: 100%; padding: 11px 16px 11px 42px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: #f1f5f9; font-size: 14px; font-family: inherit;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
  box-sizing: border-box;
}
.cat-search-input::placeholder { color: #475569; }
.cat-search-input:focus {
  border-color: rgba(20,184,166,.5);
  box-shadow: 0 0 0 3px rgba(20,184,166,.1);
  background: rgba(255,255,255,.1);
}

/* ── Corps ───────────────────────────────────────────────────────────────── */
.cat-body {
  max-width: 1280px; margin: 0 auto;
  padding: 40px max(24px, env(safe-area-inset-left, 0px)) 80px;
}

/* ── Grille ──────────────────────────────────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

/* ── Carte catégorie ─────────────────────────────────────────────────────── */
.cat-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .22s, box-shadow .22s, border-color .22s;
  position: relative;
}
.cat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(20,184,166,.35);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(20,184,166,.12);
}

/* Cover */
.cat-card-cover {
  position: relative; height: 96px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-card-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.15);
}
.cat-card-icon-wrap {
  position: relative; z-index: 1;
  width: 56px; height: 56px;
  background: rgba(255,255,255,.18);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.cat-card-emoji { font-size: 1.7rem; line-height: 1; }
.cat-card-svg { color: #fff; }

/* Body */
.cat-card-body {
  flex: 1; padding: 16px 18px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.cat-card-name {
  font-size: 1rem; font-weight: 700;
  color: #f1f5f9; margin: 0;
  line-height: 1.25;
}
.cat-card:hover .cat-card-name { color: #5eead4; }
.cat-card-desc {
  font-size: 12.5px; color: #64748b;
  margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stats */
.cat-card-stats {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 4px;
}
.cat-card-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #94a3b8;
}
.cat-card-stat strong { color: #e2e8f0; font-weight: 700; }
.cat-card-stat svg { color: #64748b; flex-shrink: 0; }
.cat-card-stat--muted { color: #475569; font-style: italic; }

/* Footer CTA */
.cat-card-footer {
  padding: 10px 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.15);
}
.cat-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: #5eead4;
  transition: gap .18s;
}
.cat-card:hover .cat-card-cta { gap: 10px; }
.cat-card-cta svg { color: #5eead4; }

/* ── Aucun résultat (filtre) ─────────────────────────────────────────────── */
.cat-no-result {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 60px 24px; text-align: center;
  color: #64748b;
}
.cat-no-result p { margin: 0; font-size: 15px; }
.cat-no-result button {
  padding: 8px 20px; border-radius: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #94a3b8; font-size: 13px; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.cat-no-result button:hover { background: rgba(255,255,255,.12); color: #f1f5f9; }

/* ── État vide ───────────────────────────────────────────────────────────── */
.cat-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 80px 24px; text-align: center; color: #64748b;
}
.cat-empty h3 { font-size: 1.1rem; font-weight: 700; color: #cbd5e1; margin: 0; }
.cat-empty p { margin: 0; font-size: 14px; }

/* ── Bannière Rejoindre ──────────────────────────────────────────────────── */
.cat-join-banner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: clamp(24px, 4vw, 36px) clamp(20px, 3vw, 32px);
  background: linear-gradient(135deg, rgba(13,148,136,.14) 0%, rgba(8,145,178,.08) 100%);
  border: 1px solid rgba(20,184,166,.25);
  border-radius: 18px; margin-top: 12px;
}
.cat-join-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: rgba(20,184,166,.15);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #14b8a6;
}
.cat-join-text { flex: 1; min-width: min(100%, 260px); }
.cat-join-title {
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  font-weight: 700; color: #f1f5f9; margin: 0 0 6px;
}
.cat-join-lead {
  font-size: 14px; color: #94a3b8; margin: 0; line-height: 1.55;
}
.cat-join-cta { flex-shrink: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cat-hero-content { flex-direction: column; align-items: flex-start; }
  .cat-hero-actions { width: 100%; }
  .cat-hero-actions .cat-btn { flex: 1; justify-content: center; }
  .cat-search-wrap { max-width: 100%; }
  .cat-join-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cat-join-cta { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: 1fr; gap: 12px; }
  .cat-card-cover { height: 80px; }
  .cat-hero-title { font-size: 1.6rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   FIN PAGE CATÉGORIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   HOME V2  (h2-*)  —  design moderne inspiré ComeUp
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables locales ───────────────────────────────────────────────────── */
.h2-section-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

/* ── En-têtes de section ─────────────────────────────────────────────────── */
.h2-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.h2-section-head--center {
  flex-direction: column; align-items: center; text-align: center;
}
.h2-section-title {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 800; letter-spacing: -.03em;
  color: #f1f5f9; margin: 0 0 4px;
}
.h2-section-title em { font-style: normal; color: var(--tg-teal-light, #14b8a6); }
.h2-section-sub {
  font-size: 15px; color: #64748b; margin: 0; line-height: 1.5;
}
.h2-section-sub--center { max-width: 520px; }
.h2-link-all {
  font-size: 13.5px; font-weight: 600; color: #14b8a6;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: color .15s;
}
.h2-link-all:hover { color: #5eead4; }
.h2-section-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 6px;
}
.h2-section-badge--gold { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.h2-section-badge--teal { background: rgba(20,184,166,.12); color: #14b8a6; border: 1px solid rgba(20,184,166,.25); }
.h2-section-badge--purple { background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.25); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.h2-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 48px 24px; color: #475569; text-align: center;
}
.h2-empty p { margin: 0; font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════════
   1. HERO
   ══════════════════════════════════════════════════════════════════════ */
.h2-hero {
  position: relative; overflow: hidden;
  padding: clamp(60px, 8vw, 100px) 0 clamp(56px, 8vw, 96px);
  background: var(--tg-bg, #0a0f1a);
}
.h2-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.h2-glow {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: .6;
}
.h2-glow--1 {
  width: 480px; height: 480px;
  background: rgba(20,184,166,.22);
  top: -160px; right: -80px;
}
.h2-glow--2 {
  width: 360px; height: 360px;
  background: rgba(59,130,246,.12);
  bottom: -80px; left: -60px;
}
.h2-glow--3 {
  width: 240px; height: 240px;
  background: rgba(139,92,246,.1);
  top: 30%; left: 40%;
}
.h2-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

.h2-hero-inner {
  position: relative; z-index: 2;
  max-width: 1260px; margin: 0 auto;
  padding: 0 max(24px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}

/* Colonne gauche */
.h2-hero-left { max-width: 580px; }
.h2-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 100px;
  background: rgba(20,184,166,.1); border: 1px solid rgba(20,184,166,.25);
  color: #5eead4; font-size: 12.5px; font-weight: 600;
  letter-spacing: .03em; margin-bottom: 20px;
}
.h2-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 8px #14b8a6;
  animation: h2-pulse 2s ease-in-out infinite;
}
@keyframes h2-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.3); }
}
.h2-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800; letter-spacing: -.04em;
  line-height: 1.1; color: #f1f5f9; margin: 0 0 18px;
}
.h2-hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, #14b8a6 0%, #38bdf8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.h2-hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  color: #94a3b8; line-height: 1.6; margin: 0 0 28px;
  max-width: 500px;
}

/* Barre de recherche */
.h2-search-form { margin-bottom: 20px; }
.h2-search-inner {
  display: flex; align-items: center;
  background: rgba(255,255,255,.06); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  transition: border-color .2s, box-shadow .2s;
}
.h2-search-inner:focus-within {
  border-color: rgba(20,184,166,.5);
  box-shadow: 0 8px 40px rgba(0,0,0,.3), 0 0 0 3px rgba(20,184,166,.15);
}
.h2-search-icon {
  margin-left: 16px; color: #64748b; flex-shrink: 0; pointer-events: none;
}
.h2-search-input {
  flex: 1; min-width: 0; padding: 16px 14px;
  background: transparent; border: none; outline: none;
  color: #f1f5f9; font-size: 15px; font-family: inherit;
}
.h2-search-input::placeholder { color: #475569; }
.h2-search-btn {
  padding: 13px 22px; margin: 4px; border-radius: 10px;
  background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
  color: #fff; border: none; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: opacity .18s, transform .18s;
}
.h2-search-btn:hover { opacity: .9; transform: translateY(-1px); }

/* Chips */
.h2-chips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-bottom: 28px;
}
.h2-chips-label { font-size: 13px; color: #475569; font-weight: 500; }
.h2-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8; font-size: 13px; text-decoration: none;
  transition: background .18s, border-color .18s, color .18s;
}
.h2-chip:hover {
  background: rgba(20,184,166,.1); border-color: rgba(20,184,166,.3);
  color: #5eead4;
}

/* Social proof */
.h2-proof { display: flex; align-items: center; gap: 12px; }
.h2-proof-avatars { display: flex; }
.h2-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  border: 2px solid var(--tg-bg, #0a0f1a);
  margin-left: -8px;
}
.h2-av:first-child { margin-left: 0; }
.h2-av--img { object-fit: cover; flex-shrink: 0; }
.h2-proof-text { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #64748b; }
.h2-proof-stars { color: #f59e0b; font-size: 12px; letter-spacing: 1px; }

/* Colonne droite — cartes flottantes */
.h2-hero-right { position: relative; height: 380px; display: flex; align-items: center; justify-content: center; }
.h2-float-stack { position: relative; width: 320px; height: 340px; }

.h2-float-card {
  position: absolute;
  background: rgba(15,23,42,.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.h2-float-card--main {
  width: 280px; left: 50%; transform: translateX(-50%);
  top: 60px; z-index: 3;
  animation: h2-float 4s ease-in-out infinite;
}
.h2-float-card--top {
  width: 220px; right: -20px; top: 0; z-index: 2; opacity: .85;
  animation: h2-float 4s ease-in-out infinite .8s;
}
.h2-float-card--bottom {
  width: 220px; left: -20px; bottom: 0; z-index: 2; opacity: .85;
  animation: h2-float 4s ease-in-out infinite 1.6s;
}
@keyframes h2-float {
  0%,100% { transform: translateY(0) translateX(var(--tx, 0)); }
  50%     { transform: translateY(-8px) translateX(var(--tx, 0)); }
}
.h2-float-card--main { --tx: -50%; }

.h2-fc-cover { height: 60px; }
.h2-fc-cover--teal  { background: linear-gradient(135deg,#0f766e,#0891b2); }
.h2-fc-cover--purple{ background: linear-gradient(135deg,#7c3aed,#6366f1); }
.h2-fc-cover--orange{ background: linear-gradient(135deg,#dc2626,#f97316); }
.h2-fc-cover--img   { background-size: cover; background-position: center; }
.h2-fc-body {
  padding: 12px 14px 10px;
  display: flex; gap: 10px; align-items: flex-start;
}
.h2-fc-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.h2-fc-avatar span {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.h2-fc-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.h2-fc-rating--new { color: #14b8a6; }
.h2-fc-info { display: flex; flex-direction: column; gap: 3px; }
.h2-fc-title { font-size: 12.5px; font-weight: 700; color: #f1f5f9; line-height: 1.3; }
.h2-fc-sub   { font-size: 11px; color: #64748b; }
.h2-fc-sub strong { color: #14b8a6; }
.h2-fc-footer {
  padding: 8px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between;
}
.h2-fc-rating { font-size: 11.5px; color: #f59e0b; font-weight: 600; }
.h2-fc-reviews { color: #64748b; font-weight: 400; }
.h2-fc-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(20,184,166,.15); color: #14b8a6;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Badges flottants */
.h2-float-badge {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 100px;
  background: rgba(15,23,42,.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px; font-weight: 600; color: #f1f5f9;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  white-space: nowrap;
  animation: h2-float 4s ease-in-out infinite 2s;
}
.h2-float-badge--order { top: 20px; left: 0; }
.h2-float-badge--order svg { color: #22c55e; }
.h2-float-badge--active { bottom: 20px; right: 0; }
.h2-badge-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  flex-shrink: 0;
  animation: h2-pulse 1.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════
   2. STATS BAND
   ══════════════════════════════════════════════════════════════════════ */
.h2-stats-band {
  background: rgba(255,255,255,.025);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.h2-stats-inner {
  max-width: 900px; margin: 0 auto;
  padding: 0 max(24px, env(safe-area-inset-left,0px));
  display: flex; align-items: stretch; flex-wrap: wrap;
}
.h2-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 28px 32px; flex: 1 1 auto; min-width: 120px;
  text-align: center;
}
.h2-stat svg { color: #14b8a6; margin-bottom: 4px; }
.h2-stat-num {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 900; color: #f1f5f9;
  letter-spacing: -.04em; line-height: 1;
}
.h2-stat-lbl {
  font-size: 11.5px; color: #64748b;
  font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
}
.h2-stat-sep {
  width: 1px; background: rgba(255,255,255,.08);
  margin: 20px 0; align-self: stretch;
}

/* ══════════════════════════════════════════════════════════════════════
   3. CATÉGORIES VISUELLES
   ══════════════════════════════════════════════════════════════════════ */
.h2-cats-section {
  padding: 64px 0 56px;
  background: var(--tg-bg, #0a0f1a);
}
.h2-cats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
/* Couleurs par cycle */
.h2-cat-card--c1 .h2-cat-icon-ring { background: rgba(13,148,136,.15); border-color: rgba(13,148,136,.3); color: #14b8a6; }
.h2-cat-card--c2 .h2-cat-icon-ring { background: rgba(124,58,237,.15); border-color: rgba(124,58,237,.3); color: #a78bfa; }
.h2-cat-card--c3 .h2-cat-icon-ring { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.25); color: #f87171; }
.h2-cat-card--c4 .h2-cat-icon-ring { background: rgba(5,150,105,.15); border-color: rgba(5,150,105,.3); color: #34d399; }
.h2-cat-card--c5 .h2-cat-icon-ring { background: rgba(217,119,6,.15); border-color: rgba(217,119,6,.3); color: #fbbf24; }
.h2-cat-card--c6 .h2-cat-icon-ring { background: rgba(219,39,119,.12); border-color: rgba(219,39,119,.25); color: #f472b6; }
.h2-cat-card--c1:hover { border-color: rgba(13,148,136,.35); }
.h2-cat-card--c2:hover { border-color: rgba(124,58,237,.35); }
.h2-cat-card--c3:hover { border-color: rgba(220,38,38,.3); }
.h2-cat-card--c4:hover { border-color: rgba(5,150,105,.35); }
.h2-cat-card--c5:hover { border-color: rgba(217,119,6,.35); }
.h2-cat-card--c6:hover { border-color: rgba(219,39,119,.3); }

.h2-cat-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 20px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
  text-align: center;
}
.h2-cat-card:hover {
  background: rgba(255,255,255,.06);
  transform: translateY(-3px);
}
.h2-cat-icon-ring {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid; flex-shrink: 0;
  transition: transform .2s;
}
.h2-cat-card:hover .h2-cat-icon-ring { transform: scale(1.08); }
.h2-cat-emoji { font-size: 1.5rem; line-height: 1; }
.h2-cat-name {
  font-size: 12.5px; font-weight: 600; color: #cbd5e1;
  line-height: 1.3;
  transition: color .18s;
}
.h2-cat-card:hover .h2-cat-name { color: #f1f5f9; }
.h2-cat-arrow {
  color: #334155; transition: color .18s, transform .18s;
}
.h2-cat-card:hover .h2-cat-arrow {
  color: #14b8a6; transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════════════
   4 & 5. SECTIONS SERVICES
   ══════════════════════════════════════════════════════════════════════ */
.h2-services-section {
  padding: 56px 0;
  background: var(--tg-bg, #0a0f1a);
}
.h2-services-section--alt {
  background: rgba(255,255,255,.015);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ══════════════════════════════════════════════════════════════════════
   6. PRESTATAIRES EN VEDETTE
   ══════════════════════════════════════════════════════════════════════ */
.h2-providers-section { padding: 56px 0; }
.h2-providers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.h2-provider-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.h2-provider-card:hover {
  border-color: rgba(20,184,166,.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
.h2-provider-link {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px; text-decoration: none;
}
.h2-provider-avatar-wrap { position: relative; flex-shrink: 0; }
.h2-provider-img {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,.1);
}
.h2-provider-initial {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg,#0d9488,#0891b2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
}
.h2-provider-verified {
  position: absolute; bottom: -2px; right: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #22c55e; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--tg-bg, #0a0f1a);
}
.h2-provider-premium {
  position: absolute; top: -4px; right: -4px;
  font-size: 9px; color: #f59e0b;
  background: rgba(245,158,11,.2); border-radius: 50%;
  width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
}
.h2-provider-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.h2-provider-name {
  font-size: 14px; font-weight: 700; color: #f1f5f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h2-provider-headline {
  font-size: 12px; color: #64748b; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h2-provider-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.h2-provider-rating {
  display: flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; color: #f59e0b;
}
.h2-provider-rating span { color: #64748b; font-weight: 400; }
.h2-provider-city {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: #475569;
}
.h2-fav-btn {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: #64748b; cursor: pointer;
  transition: background .15s, color .15s;
}
.h2-fav-btn:hover, .h2-fav-btn.is-faved { background: rgba(239,68,68,.1); color: #ef4444; border-color: rgba(239,68,68,.3); }

/* ══════════════════════════════════════════════════════════════════════
   7. COMMENT ÇA MARCHE
   ══════════════════════════════════════════════════════════════════════ */
.h2-how-section {
  position: relative; padding: 72px 0;
  background: rgba(255,255,255,.015);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
}
.h2-how-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(20,184,166,.05) 0%, transparent 65%);
}
.h2-how-grid {
  display: flex; align-items: flex-start;
  justify-content: center; gap: 0;
}
.h2-how-step {
  flex: 1; max-width: 280px;
  text-align: center; padding: 0 20px;
  position: relative; z-index: 1;
}
.h2-how-connector {
  flex-shrink: 0; margin-top: 46px; opacity: .7;
  display: flex; align-items: center; justify-content: center;
}
.h2-how-icon {
  width: 72px; height: 72px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  transition: transform .2s;
}
.h2-how-step:hover .h2-how-icon { transform: translateY(-4px) scale(1.05); }
.h2-how-icon--teal   { background: rgba(20,184,166,.12); border: 1px solid rgba(20,184,166,.25); color: #14b8a6; }
.h2-how-icon--blue   { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25); color: #60a5fa; }
.h2-how-icon--purple { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); color: #a78bfa; }
.h2-how-num {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  color: #475569; text-transform: uppercase; margin-bottom: 10px;
}
.h2-how-title {
  font-size: 1.05rem; font-weight: 700; color: #f1f5f9;
  margin: 0 0 10px; line-height: 1.3;
}
.h2-how-text {
  font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;
}
.h2-how-text strong { color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════════════
   8. POURQUOI
   ══════════════════════════════════════════════════════════════════════ */
.h2-why-section { padding: 72px 0; }
.h2-why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.h2-why-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; padding: 28px 24px;
  transition: border-color .2s, transform .2s;
}
.h2-why-card:hover { border-color: rgba(20,184,166,.25); transform: translateY(-3px); }
.h2-why-card h3 { font-size: 1rem; font-weight: 700; color: #f1f5f9; margin: 14px 0 8px; }
.h2-why-card p  { font-size: 14px; color: #64748b; margin: 0; line-height: 1.6; }
.h2-why-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.h2-why-icon--teal   { background: rgba(20,184,166,.12); border: 1px solid rgba(20,184,166,.2); color: #14b8a6; }
.h2-why-icon--blue   { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.2); color: #60a5fa; }
.h2-why-icon--orange { background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.2); color: #fb923c; }
.h2-why-icon--purple { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.2); color: #a78bfa; }

/* ══════════════════════════════════════════════════════════════════════
   9. EXPLORER PAR DOMAINE (existant — wrapper )
   ══════════════════════════════════════════════════════════════════════ */
.h2-explore-section { padding: 56px 0 64px; }

/* ══════════════════════════════════════════════════════════════════════
   10. TÉMOIGNAGES
   ══════════════════════════════════════════════════════════════════════ */
.h2-testimonials-section {
  padding: 72px 0;
  background: rgba(255,255,255,.015);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.h2-testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; align-items: stretch;
}
.h2-testi {
  position: relative;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 28px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .2s, transform .2s;
}
.h2-testi:hover { border-color: rgba(20,184,166,.2); transform: translateY(-3px); }
.h2-testi--featured {
  background: linear-gradient(135deg, rgba(20,184,166,.07) 0%, rgba(8,145,178,.04) 100%);
  border-color: rgba(20,184,166,.2);
  transform: scale(1.02);
}
.h2-testi--featured:hover { transform: scale(1.02) translateY(-3px); }
.h2-testi-quote {
  font-size: 4rem; line-height: .8; color: rgba(20,184,166,.25);
  font-family: Georgia, serif; font-weight: 700;
  position: absolute; top: 14px; left: 20px;
  pointer-events: none;
}
.h2-testi-stars { color: #f59e0b; font-size: 14px; letter-spacing: 2px; }
.h2-testi p {
  font-size: 14.5px; color: #94a3b8;
  line-height: 1.65; margin: 0; flex: 1;
  padding-top: 4px;
}
.h2-testi-author { display: flex; align-items: center; gap: 10px; }
.h2-testi-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
}
.h2-testi-author div { display: flex; flex-direction: column; }
.h2-testi-author strong { font-size: 13.5px; color: #f1f5f9; }
.h2-testi-author span  { font-size: 12px; color: #475569; }

/* ══════════════════════════════════════════════════════════════════════
   11. CTA FINAL
   ══════════════════════════════════════════════════════════════════════ */
.h2-cta-section {
  position: relative; overflow: hidden;
  padding: clamp(64px, 8vw, 96px) 0;
  background: var(--tg-bg, #0a0f1a);
}
.h2-cta-bg { position: absolute; inset: 0; pointer-events: none; }
.h2-cta-glow {
  position: absolute; border-radius: 50%; filter: blur(100px);
}
.h2-cta-glow--1 {
  width: 500px; height: 400px;
  background: rgba(13,148,136,.18);
  top: -100px; left: -80px;
}
.h2-cta-glow--2 {
  width: 400px; height: 300px;
  background: rgba(8,145,178,.15);
  bottom: -80px; right: -60px;
}
.h2-cta-inner {
  position: relative; z-index: 1;
  max-width: 640px; margin: 0 auto;
  padding: 0 max(24px, env(safe-area-inset-left,0px));
  text-align: center;
}
.h2-cta-eyebrow {
  display: inline-block; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #14b8a6;
}
.h2-cta-title {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800; letter-spacing: -.04em;
  color: #f1f5f9; margin: 0 0 16px; line-height: 1.15;
}
.h2-cta-title strong { color: #14b8a6; }
.h2-cta-sub {
  font-size: 16px; color: #64748b; margin: 0 0 36px;
  line-height: 1.6; max-width: 480px; margin-left: auto; margin-right: auto;
}
.h2-cta-btns {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 0;
}
.h2-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 12px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.h2-cta-btn--primary {
  background: linear-gradient(135deg,#0d9488 0%,#0891b2 100%);
  color: #fff;
  box-shadow: 0 6px 24px rgba(13,148,136,.35);
}
.h2-cta-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(13,148,136,.45);
  color: #fff;
}
.h2-cta-btn--outline {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: #cbd5e1;
}
.h2-cta-btn--outline:hover {
  background: rgba(255,255,255,.1);
  color: #f1f5f9;
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .h2-cats-grid { grid-template-columns: repeat(4, 1fr); }
  .h2-why-grid  { grid-template-columns: repeat(2, 1fr); }
  .h2-providers-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .h2-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .h2-hero-right { display: none; }
  .h2-hero-left  { max-width: 100%; }
  .h2-how-grid { flex-direction: column; align-items: center; gap: 32px; }
  .h2-how-connector { transform: rotate(90deg); margin: 0; }
  .h2-how-step { max-width: 100%; padding: 0; }
  .h2-testimonials-grid { grid-template-columns: 1fr; gap: 14px; }
  .h2-testi--featured { transform: none; }
}
@media (max-width: 760px) {
  .h2-cats-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .h2-providers-grid { grid-template-columns: repeat(2, 1fr); }
  .h2-why-grid { grid-template-columns: 1fr; }
  .h2-stat-sep { display: none; }
  .h2-stats-inner { gap: 0; }
  .h2-stat { padding: 20px 16px; }
  .h2-cta-btns { flex-direction: column; width: 100%; }
  .h2-cta-btn { width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
  .h2-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .h2-providers-grid { grid-template-columns: 1fr; }
  .h2-hero-title { font-size: 2rem; }
  .h2-search-btn { padding: 10px 14px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN HOME V2
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM PARTAGÉ — composants communs à toutes les pages publiques
   Utilisation : tg-page-hero, tg-breadcrumb, tg-page-section-head
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Max-width universel 1260px ──────────────────────────────────────────── */
.sdp-inner            { max-width: 1260px; }
.public-profile-inner { max-width: 1260px; }
.srp-topbar-inner,
.srp-body-inner       { max-width: 1260px; }

/* ── Fil d'Ariane partagé ────────────────────────────────────────────────── */
.tg-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 5px; font-size: 13px; color: #64748b;
  margin-bottom: 16px;
}
.tg-breadcrumb a {
  color: #64748b; text-decoration: none;
  transition: color .15s;
}
.tg-breadcrumb a:hover { color: #14b8a6; }
.tg-breadcrumb-sep {
  display: flex; align-items: center; color: #334155;
}
.tg-breadcrumb-current { color: #94a3b8; }
/* breadcrumb on light-theme pages */
.plp-page .tg-breadcrumb,
.srp-page-light .tg-breadcrumb { color: #475569; }
.plp-page .tg-breadcrumb a,
.srp-page-light .tg-breadcrumb a { color: #475569; }
.plp-page .tg-breadcrumb-sep,
.srp-page-light .tg-breadcrumb-sep { color: #94a3b8; }
.plp-page .tg-breadcrumb-current,
.srp-page-light .tg-breadcrumb-current { color: #0f172a; font-weight: 500; }

/* ── Hero de page partagé ────────────────────────────────────────────────── */
.tg-page-hero {
  position: relative; overflow: hidden;
  padding: clamp(32px, 4.5vw, 48px) max(24px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: var(--tg-bg, #0a0f1a);
}
.tg-page-hero-glow {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.tg-page-hero-glow--1 {
  width: 300px; height: 300px;
  background: rgba(20,184,166,.15);
  top: -80px; right: 5%; opacity: .7;
}
.tg-page-hero-inner {
  max-width: 1260px; margin: 0 auto; position: relative; z-index: 1;
}
.tg-page-hero-title {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800; letter-spacing: -.03em;
  color: #f1f5f9; margin: 0 0 8px; line-height: 1.2;
}
.tg-page-hero-sub {
  font-size: 15px; color: #64748b; margin: 0; line-height: 1.55;
}
.tg-page-hero-sub strong { color: #e2e8f0; }
.tg-page-hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.tg-page-hero-actions {
  display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
}

/* ── Section header partagé ──────────────────────────────────────────────── */
.tg-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.tg-section-title {
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  font-weight: 800; letter-spacing: -.03em;
  color: #f1f5f9; margin: 0;
}
.tg-section-sub {
  font-size: 14px; color: #64748b; margin: 6px 0 0; line-height: 1.5;
}
.tg-link-all {
  font-size: 13px; font-weight: 600; color: #14b8a6;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.tg-link-all:hover { color: #5eead4; }

/* ── Badge de section partagé ────────────────────────────────────────────── */
.tg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 6px;
}
.tg-badge--teal   { background: rgba(20,184,166,.12); color: #14b8a6; border: 1px solid rgba(20,184,166,.25); }
.tg-badge--gold   { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
.tg-badge--purple { background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.25); }

/* ── Page wrapper partagé ────────────────────────────────────────────────── */
.tg-page-body {
  max-width: 1260px; margin: 0 auto;
  padding: 36px max(24px, env(safe-area-inset-left, 0px)) 72px;
}

/* ── Responsive breadcrumb / hero ────────────────────────────────────────── */
@media (max-width: 760px) {
  .tg-page-hero-row { flex-direction: column; align-items: flex-start; }
  .tg-page-hero-actions { width: 100%; }
  .tg-page-hero-actions a { flex: 1; justify-content: center; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   FIN DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* CTA inline */
.cta-block-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.05));
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: var(--radius);
}

.cta-block-text h2 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}

.cta-block-text p {
  margin: 0;
  color: var(--tg-muted-light);
}

/* ==========================================================================
   PAGE FAVORIS (compte/favoris.html)
   ========================================================================== */

.tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--tg-border);
  margin-bottom: 24px;
}

.tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--tg-muted-light);
  font-size: 0.92rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition), border-color var(--transition);
}

.tab-btn:hover {
  color: var(--tg-white);
}

.tab-btn.is-active {
  color: var(--tg-teal);
  border-bottom-color: var(--tg-teal);
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--tg-surface-elevated);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tg-muted-light);
}

.tab-btn.is-active .tab-count {
  background: rgba(20, 184, 166, 0.15);
  color: var(--tg-teal);
}

.fav-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.fav-card {
  width: auto !important;
  flex-shrink: unset !important;
}

/* Liste prestataires favoris */
.fav-providers-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fav-provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}

.fav-provider-row:hover {
  border-color: rgba(20, 184, 166, 0.3);
}

.fav-provider-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.provider-avatar-sm {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-teal), var(--tg-teal-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.provider-avatar-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fav-provider-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fav-provider-name {
  font-weight: 600;
  color: var(--tg-white);
  font-size: 0.92rem;
}

.fav-provider-headline {
  font-size: 0.82rem;
}

.fav-provider-meta {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
}

.rating-sm {
  color: var(--tg-yellow);
  font-weight: 600;
}

/* Liste récemment consultés */
.recently-viewed-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rv-row {
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition);
}

.rv-row:hover {
  border-color: rgba(20, 184, 166, 0.3);
}

.rv-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  background: var(--tg-surface);
}

.rv-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tg-surface-elevated);
}

.rv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rv-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tg-teal), var(--tg-teal-dark));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.rv-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rv-type {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rv-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tg-white);
}

.rv-meta {
  font-size: 0.8rem;
}

.rv-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tg-teal);
  white-space: nowrap;
}

/* Utilitaires */
.muted { color: var(--tg-muted-light); }

@keyframes fav-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.fav-pulse {
  animation: fav-pulse 0.35s ease;
}

.empty-state-lg {
  padding: 60px 20px;
}

/* Responsive nouvelles pages */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-title {
    font-size: 1.5rem;
  }

  .filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-checkboxes {
    flex-wrap: wrap;
  }

  .providers-directory-grid,
  .categories-directory-grid {
    grid-template-columns: 1fr;
  }

  .providers-grid-home {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  }

  .cta-block-inline {
    flex-direction: column;
    text-align: center;
  }

  .tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
    white-space: nowrap;
    padding: 10px 14px;
  }
}

/* ==========================================================================
   COMMANDES, CHECKOUT, WALLET, KYC, AVIS, BADGES
   ========================================================================== */

/* --- Badges de confiance profil --- */
.profile-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.profile-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
}

.trust-badge--verified {
  background: rgba(20, 184, 166, 0.15);
  color: var(--tg-teal);
  border: 1px solid rgba(20, 184, 166, 0.3);
}

.trust-badge--premium {
  background: rgba(250, 204, 21, 0.15);
  color: var(--tg-yellow);
  border: 1px solid rgba(250, 204, 21, 0.3);
}

.trust-badge--available {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
  border: 1px solid rgba(22, 163, 74, 0.3);
  font-size: 0.7rem;
}

.btn-fav-profile {
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  color: var(--tg-muted-light);
  font-size: 0.85rem;
  font-family: var(--font);
  cursor: pointer;
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.btn-fav-profile:hover,
.btn-fav-profile.is-favorited {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.06);
}

.btn-report-link {
  background: none;
  border: none;
  color: var(--tg-muted);
  font-size: 0.78rem;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 0;
  transition: color var(--transition);
}

.btn-report-link:hover { color: #f87171; }

.service-detail-report-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0;
  padding-top: 4px;
}

/* --- Avis redesignés --- */
.reviews-stats-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tg-border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.reviews-rating-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}

.rating-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--tg-white);
  line-height: 1;
}

.rating-stars-row {
  display: flex;
  gap: 2px;
}

.reviews-sentiment {
  display: flex;
  gap: 16px;
}

.sentiment-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}

.sentiment-item--positive { color: #4ade80; }
.sentiment-item--negative { color: #f87171; }

.review-form-card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.review-form-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.review-type-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.review-type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  color: var(--tg-muted-light);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all var(--transition);
  user-select: none;
}

.review-type-btn input[type="radio"] { display: none; }
.review-type-btn:hover { border-color: var(--tg-teal); color: var(--tg-teal); }
.review-type-btn.is-selected { border-color: #4ade80; background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.review-type-btn.is-selected-neg { border-color: #f87171; background: rgba(248, 113, 113, 0.08); color: #f87171; }

.star-rating-input {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}

.star-label {
  cursor: pointer;
  transition: transform var(--transition);
}

.star-label:hover { transform: scale(1.15); }
.star-label input { display: none; }
.star-svg { transition: fill var(--transition); }

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-left: 3px solid var(--tg-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  transition: border-color var(--transition);
}

.review-card--positive { border-left-color: #4ade80; }
.review-card--negative { border-left-color: #f87171; }

.review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-teal), var(--tg-teal-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.review-author-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tg-white);
  display: block;
}

.review-date {
  font-size: 0.78rem;
  display: block;
}

.review-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.review-sentiment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.review-sentiment--pos { background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.review-sentiment--neg { background: rgba(248, 113, 113, 0.08); color: #f87171; }

.review-stars { display: flex; gap: 2px; }
.review-comment { font-size: 0.88rem; color: var(--tg-white-soft); line-height: 1.5; margin: 0; }

.reviews-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tg-muted-light);
  vertical-align: middle;
}
.review-dimensions { flex: 1; min-width: 200px; max-width: 360px; }
.review-dim-row {
  display: grid;
  grid-template-columns: 110px 1fr 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.82rem;
}
.review-dim-label { color: var(--tg-muted-light); }
.review-dim-bar {
  height: 6px;
  background: var(--tg-surface-elevated);
  border-radius: 3px;
  overflow: hidden;
}
.review-dim-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tg-teal), #2dd4bf);
  border-radius: 3px;
  min-width: 0;
}
.review-dim-score { font-weight: 700; color: var(--tg-white); text-align: right; }
.review-pending-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.review-pending-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
  color: var(--tg-white-soft);
  flex: 1;
}
.review-verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #4ade80;
  margin-left: 6px;
}
.review-stars-global { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.review-rating-num { margin-left: 6px; font-weight: 700; font-size: 0.9rem; color: #facc15; }
.review-scores-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.review-score-tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--tg-surface-elevated);
  color: var(--tg-muted-light);
  border: 1px solid var(--tg-border);
}
.review-reply {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--tg-surface-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--tg-border);
}
.review-reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  margin-bottom: 8px;
  color: var(--tg-teal);
}
.review-reply-text { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--tg-white-soft); }
.review-reply-form { margin-top: 10px; }
.review-reply-input { margin-top: 8px; }
.review-reply-input[hidden] { display: none !important; }
.trust-badge--level {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.35);
}
.trust-badge--top {
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.35);
}

/* --- Commandes --- */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-row {
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  transition: border-color var(--transition);
}

.order-row:hover { border-color: rgba(20, 184, 166, 0.3); }

.order-row-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.order-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 60px;
}

.order-hash {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg-teal);
}

.order-date { font-size: 0.75rem; }

.order-info { flex: 1; min-width: 0; }

.order-service-title {
  display: block;
  font-weight: 600;
  color: var(--tg-white);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.order-service-title:hover { color: var(--tg-teal); }

.order-parties { font-size: 0.82rem; }

.order-row-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.order-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg-white);
}

.order-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.order-badge {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
}

.order-badge--pending { background: rgba(250, 204, 21, 0.15); color: var(--tg-yellow); }
.order-badge--paid { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.order-badge--failed,
.order-badge--cancelled { background: rgba(248, 113, 113, 0.1); color: #f87171; }
.order-badge--refunded { background: rgba(148, 163, 184, 0.1); color: var(--tg-muted-light); }
.order-badge--delivery-in_progress { background: rgba(96, 165, 250, 0.1); color: #60a5fa; }
.order-badge--delivery-delivered { background: rgba(250, 204, 21, 0.12); color: var(--tg-yellow); }
.order-badge--delivery-completed { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.order-badge--delivery-disputed { background: rgba(248, 113, 113, 0.1); color: #f87171; }
.order-badge--escrow { background: rgba(20, 184, 166, 0.12); color: var(--tg-teal); }
.order-badge--released { background: rgba(74, 222, 128, 0.12); color: #4ade80; }

.order-actions { display: flex; gap: 8px; }

/* --- Détail commande --- */
.order-detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 16px;
}

.order-timeline-card,
.order-actions-card,
.order-pending-card,
.order-recap-card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.order-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.order-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--tg-border);
}

.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  position: relative;
  z-index: 1;
}

.timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tg-surface);
  border: 2px solid var(--tg-border);
  flex-shrink: 0;
  margin-top: 2px;
  transition: background var(--transition), border-color var(--transition);
}

.timeline-step.is-done .timeline-dot {
  background: var(--tg-teal);
  border-color: var(--tg-teal);
}

.timeline-step.is-active .timeline-dot {
  background: var(--tg-yellow);
  border-color: var(--tg-yellow);
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.2);
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.timeline-content strong { font-size: 0.9rem; color: var(--tg-white); }
.timeline-content .muted { font-size: 0.8rem; }

.timeline-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 4px;
  align-self: flex-start;
}

.timeline-badge--paid { background: rgba(20, 184, 166, 0.15); color: var(--tg-teal); }
.timeline-badge--done { background: rgba(74, 222, 128, 0.12); color: #4ade80; }

.order-action-buttons { display: flex; flex-direction: column; gap: 10px; }
.inline-form { display: contents; }

.action-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.4;
}

.action-alert--info {
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  color: #93c5fd;
}

.btn-success { background: #16a34a !important; }
.btn-success:hover { background: #15803d !important; }

.btn-danger {
  background: #dc2626;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition);
  text-decoration: none;
}

.btn-danger:hover { background: #b91c1c; }
.btn-danger.btn-block { width: 100%; justify-content: center; }

.dispute-info { padding: 12px 14px; background: rgba(248, 113, 113, 0.06); border: 1px solid rgba(248, 113, 113, 0.2); border-radius: var(--radius-sm); }
.dispute-badge { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; background: rgba(248, 113, 113, 0.1); color: #f87171; }

.order-pending-card {
  text-align: center;
  padding: 32px 24px;
}

.pending-icon { font-size: 2.5rem; margin-bottom: 12px; }
.order-pending-card h3 { margin: 0 0 12px; font-size: 1.1rem; }

.payment-ref {
  display: inline-block;
  font-family: monospace;
  font-size: 1.2rem;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  margin: 8px 0;
  letter-spacing: 0.1em;
  color: var(--tg-teal);
}

.payment-instructions {
  text-align: left;
  background: var(--tg-surface-elevated);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 16px 0;
}

.payment-instructions ol {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.recap-dl { list-style: none; padding: 0; margin: 16px 0; }
.recap-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.88rem; border-bottom: 1px solid rgba(51, 65, 85, 0.5); }
.recap-row dt { color: var(--tg-muted-light); }
.recap-row dd { font-weight: 500; }
.recap-row--total { border-bottom: none; padding-top: 12px; font-size: 1rem; }
.recap-row--total dt, .recap-row--total dd { font-weight: 700; color: var(--tg-white); }

.recap-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  border-top: 2px solid var(--tg-teal);
  margin-top: 8px;
}

.recap-payment-method {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--tg-muted-light);
  margin-top: 10px;
}

.escrow-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 12px;
}

.escrow-badge--held { background: rgba(20, 184, 166, 0.12); color: var(--tg-teal); border: 1px solid rgba(20, 184, 166, 0.2); }
.escrow-badge--released { background: rgba(74, 222, 128, 0.1); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); }

.order-service-link { color: var(--tg-teal); text-decoration: none; font-weight: 600; display: block; margin-bottom: 14px; }
.order-service-link:hover { text-decoration: underline; }
.order-conversation-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }

@media (max-width: 900px) {
  .order-detail-layout { grid-template-columns: 1fr; }
}

/* --- Paiement en attente --- */
.payment-pending-box {
  max-width: 560px;
  margin: 40px auto;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
}

.payment-method-icon { font-size: 3rem; margin-bottom: 12px; }
.pending-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; }
.pending-amount { font-size: 1.3rem; color: var(--tg-teal); margin-bottom: 20px; }

.pending-reference { margin: 16px 0; }
.reference-code {
  display: inline-block;
  font-family: monospace;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--tg-teal);
  background: var(--tg-surface-elevated);
  border: 2px dashed var(--tg-teal);
  border-radius: var(--radius-sm);
  padding: 10px 24px;
  margin: 8px 0;
}

.pending-hint { font-size: 0.82rem; margin-top: 6px; }

.pending-instructions {
  background: var(--tg-surface-elevated);
  border-radius: var(--radius);
  padding: 20px;
  text-align: left;
  margin: 20px 0;
}

.pending-instructions h2 { font-size: 0.95rem; font-weight: 700; margin-bottom: 14px; }

.instructions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.instructions-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tg-teal);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.pending-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin: 20px 0 16px; }
.pending-security { font-size: 0.78rem; color: var(--tg-muted); display: flex; align-items: center; justify-content: center; gap: 6px; }

/* --- Checkout amélioré --- */
.checkout-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 10px 20px;
  background: rgba(20, 184, 166, 0.06);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.checkout-trust-bar span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--tg-teal);
}

.checkout-service-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.checkout-service-img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.checkout-service-title {
  font-weight: 600;
  color: var(--tg-white);
  text-decoration: none;
  display: block;
  margin-bottom: 2px;
}

.checkout-service-title:hover { color: var(--tg-teal); }

.checkout-recap-dl { padding: 0; margin: 0; }
.recap-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.88rem; border-bottom: 1px solid rgba(51, 65, 85, 0.4); }
.recap-row dt { color: var(--tg-muted-light); }
.recap-row dd { font-weight: 500; }
.recap-row--total { border-bottom: none; border-top: 2px solid var(--tg-teal); margin-top: 4px; padding-top: 12px; font-size: 1rem; }
.recap-row--total dt, .recap-row--total dd { font-weight: 800; color: var(--tg-white); }

.escrow-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(20, 184, 166, 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--tg-teal);
  line-height: 1.4;
}

.payment-methods-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.payment-method-card {
  display: block;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tg-border);
  background: var(--tg-surface-elevated);
  transition: border-color var(--transition), background var(--transition);
}

.payment-method-card input[type="radio"] { display: none; }

.payment-method-card.is-selected {
  border-color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.06);
}

.payment-method-card--soon {
  opacity: 0.6;
  cursor: not-allowed;
}

.payment-method-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.payment-method-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.payment-method-name { font-weight: 600; font-size: 0.95rem; display: block; }
.payment-method-sub { font-size: 0.78rem; }

.payment-method-check {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tg-teal);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.payment-method-card.is-selected .payment-method-check { display: flex; }

.soon-badge {
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(148, 163, 184, 0.15);
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  color: var(--tg-muted-light);
}

.phone-field-wrap { margin-top: 4px; }
.checkout-disclaimer { font-size: 0.8rem; margin-top: 12px; line-height: 1.4; }

/* --- Wallet --- */
.wallet-balance-card {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(20, 184, 166, 0.05));
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.wallet-balance-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-teal);
  flex-shrink: 0;
}

.wallet-balance-info { flex: 1; }
.wallet-balance-label { font-size: 0.82rem; color: var(--tg-muted-light); display: block; margin-bottom: 4px; }
.wallet-balance-amount { font-size: 2rem; font-weight: 800; color: var(--tg-white); }
.wallet-currency { font-size: 1rem; font-weight: 600; color: var(--tg-teal); }

.wallet-info-row {
  margin-bottom: 24px;
}

.wallet-info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(20, 184, 166, 0.05);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--tg-teal);
  line-height: 1.4;
}

.wallet-transactions-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transaction-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}

.transaction-row:hover { border-color: rgba(20, 184, 166, 0.2); }

.tx-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tx-icon--credit { background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.tx-icon--debit { background: rgba(248, 113, 113, 0.08); color: #f87171; }

.tx-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tx-description { font-size: 0.9rem; font-weight: 500; color: var(--tg-white); }
.tx-date, .tx-order { font-size: 0.78rem; }

.tx-amount {
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.tx-amount--credit { color: #4ade80; }
.tx-amount--debit { color: #f87171; }

/* --- KYC --- */
.kyc-status-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  border: 1px solid;
}

.kyc-status--pending { background: rgba(250, 204, 21, 0.06); border-color: rgba(250, 204, 21, 0.2); }
.kyc-status--approved { background: rgba(74, 222, 128, 0.06); border-color: rgba(74, 222, 128, 0.2); }
.kyc-status--rejected { background: rgba(248, 113, 113, 0.06); border-color: rgba(248, 113, 113, 0.2); }

.kyc-status-icon { flex-shrink: 0; }
.kyc-status--pending .kyc-status-icon { color: var(--tg-yellow); }
.kyc-status--approved .kyc-status-icon { color: #4ade80; }
.kyc-status--rejected .kyc-status-icon { color: #f87171; }

.kyc-status-info { display: flex; flex-direction: column; gap: 4px; }
.kyc-status-info strong { font-size: 1rem; }
.kyc-rejection-reason { margin-top: 8px; padding: 10px; background: rgba(248, 113, 113, 0.08); border-radius: var(--radius-sm); font-size: 0.85rem; color: #f87171; }

.kyc-why { margin-bottom: 28px; }
.kyc-why h2 { font-size: 1rem; font-weight: 700; margin-bottom: 14px; }

.kyc-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.kyc-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.kyc-benefit-icon { font-size: 1rem; flex-shrink: 0; }

.id-type-choices { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }

.id-type-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
  transition: border-color var(--transition), background var(--transition);
}

.id-type-option:has(input:checked) {
  border-color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.08);
}

.kyc-uploads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.file-upload-zone {
  position: relative;
  border: 2px dashed var(--tg-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition);
  cursor: pointer;
  overflow: hidden;
}

.file-upload-zone:hover { border-color: var(--tg-teal); background: rgba(20, 184, 166, 0.04); }

.file-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  color: var(--tg-muted-light);
  font-size: 0.85rem;
  pointer-events: none;
}

.kyc-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(20, 184, 166, 0.05);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--tg-muted-light);
  line-height: 1.4;
  margin-bottom: 20px;
}

/* --- Dispute --- */
.dispute-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(250, 204, 21, 0.07);
  border: 1px solid rgba(250, 204, 21, 0.2);
  border-radius: var(--radius-sm);
  color: var(--tg-yellow-soft);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 24px;
}

.dispute-info-box strong { display: block; margin-bottom: 4px; }
.dispute-form { max-width: 600px; }

/* --- Alertes génériques --- */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.alert-error { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.2); color: #f87171; }
.alert-success { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.2); color: #4ade80; }

/* Bouton block */
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 13px 24px; font-size: 1rem; }

/* Modal small */
.modal-box--sm { max-width: 460px; }

@media (max-width: 768px) {
  .order-row { flex-direction: column; align-items: flex-start; }
  .order-row-right { width: 100%; justify-content: space-between; }
  .wallet-balance-card { flex-direction: column; text-align: center; align-items: center; }
  .checkout-layout { flex-direction: column; }
  .kyc-uploads-grid { grid-template-columns: 1fr; }
  .reviews-stats-bar { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Page recherche /search (srp-*) — expérience claire, niveau marketplace pro
   ========================================================================== */

/* Header / footer : même thème sombre que l’accueil ; fond clair uniquement dans .srp-layout */
body.srp-page-light .site-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Jeton « dark » réassignés sous la zone recherche pour fond clair + texte foncé */
body.srp-page-light .srp-layout {
  flex: 1;
  background: linear-gradient(165deg, #fafbfc 0%, #f0f2f5 38%, #e8ebf0 100%);
  color: #0f172a;
  --tg-surface: #ffffff;
  --tg-surface-elevated: #ffffff;
  --tg-border: #e2e8f0;
  --tg-white: #0f172a;
  --tg-white-soft: #334155;
  --tg-muted: #64748b;
  --tg-muted-light: #64748b;
  --tg-teal: #0d9488;
  --tg-teal-dark: #0f766e;
  --tg-teal-light: #0f766e;
  --tg-teal-glow: rgba(13, 148, 136, 0.22);
  --radius: 16px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 10px 36px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.12);
}

body.srp-page-light .srp-body {
  background: transparent;
}

body.srp-page-light .srp-pills-bar {
  background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%);
  border-bottom-color: rgba(15, 23, 42, 0.07);
}

body.srp-page-light .srp-topbar {
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
}

body.srp-page-light .srp-searchbar-wrap {
  background: #f8fafc;
  border-color: #cbd5e1;
}

body.srp-page-light .srp-searchbar-wrap:focus-within {
  background: #fff;
  border-color: #0d9488;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.14);
}

body.srp-page-light .srp-searchbar-clear:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
}

body.srp-page-light .srp-pill {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.srp-page-light .srp-pill--active {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.14), rgba(13, 148, 136, 0.08));
  color: #0f766e;
  border-color: #0d9488;
  font-weight: 600;
}

body.srp-page-light .srp-sidebar {
  background: #fff;
  box-shadow: 0 4px 28px rgba(15, 23, 42, 0.06);
  border-color: #e2e8f0;
}

body.srp-page-light .srp-filter-toggle-btn {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}

body.srp-page-light .srp-filter-select,
body.srp-page-light .srp-filter-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.srp-page-light .srp-filter-select:focus,
body.srp-page-light .srp-filter-input:focus {
  background: #fff;
}

body.srp-page-light .srp-budget-preset {
  background: #fff;
}

body.srp-page-light .srp-delivery-btn,
body.srp-page-light .srp-rating-option {
  background: #fff;
}

body.srp-page-light .srp-results-title {
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

body.srp-page-light .srp-results-count {
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
}

.srp-results-lead {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--tg-muted-light);
  max-width: 52rem;
}

body.srp-page-light .srp-results-lead {
  color: #64748b;
}

body.srp-page-light .srp-card {
  border-color: #e8ecf0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  border-radius: 18px;
  overflow: hidden;
}

body.srp-page-light .srp-card:hover {
  border-color: rgba(13, 148, 136, 0.45);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(13, 148, 136, 0.12);
  transform: translateY(-4px);
}

body.srp-page-light .srp-card-thumb {
  background: linear-gradient(145deg, #f1f5f9, #e8edf3);
}

body.srp-page-light .srp-card-title a {
  color: #0f172a;
}

body.srp-page-light .srp-card-title a:hover {
  color: #0d9488;
}

body.srp-page-light .srp-card-body {
  padding: 18px 18px 16px;
}

body.srp-page-light .srp-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.srp-page-light .srp-tag {
  background: #f1f5f9;
  color: #475569;
}

body.srp-page-light .srp-pagination {
  border-top-color: #e2e8f0;
}

body.srp-page-light .srp-page-num {
  background: #fff;
  border-color: #e2e8f0;
  color: #475569;
}

body.srp-page-light .srp-page-num.is-current {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  border-color: transparent;
}

body.srp-page-light .srp-popular-card {
  background: #fff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

body.srp-page-light .srp-popular-card-title {
  color: #0f172a;
}

body.srp-page-light .srp-carousel-btn {
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
}

body.srp-page-light .srp-carousel-btn:hover {
  background: #0d9488;
  color: #fff;
}

body.srp-page-light .srp-card-fav {
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
}

body.srp-page-light .srp-card-fav:hover {
  background: rgba(13, 148, 136, 0.85);
  color: #fff;
}

body.srp-page-light .srp-filter-badge {
  color: #fff;
}

body.srp-page-light .srp-empty {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
}

body.srp-page-light .srp-empty-title {
  color: #0f172a;
}

body.srp-page-light .srp-empty-sub {
  color: #64748b;
}

body.srp-page-light .srp-sort-select {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.srp-page-light .srp-sort-select:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}

.srp-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.srp-topbar {
  background: var(--tg-surface);
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
  padding: 16px 0;
}

.srp-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.srp-searchbar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.srp-searchbar-wrap {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 0 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.srp-searchbar-wrap:focus-within {
  border-color: var(--tg-teal);
  box-shadow: 0 0 0 2px var(--tg-teal-glow);
}

.srp-searchbar-icon {
  flex-shrink: 0;
  color: var(--tg-muted);
}

.srp-searchbar-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--tg-white-soft);
  font-size: 16px;
  padding: 12px 0;
  outline: none;
  font-family: var(--font);
}

.srp-searchbar-input::placeholder {
  color: var(--tg-muted);
}

.srp-searchbar-clear {
  display: flex;
  color: var(--tg-muted-light);
  padding: 4px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}

.srp-searchbar-clear:hover {
  color: var(--tg-white);
  background: rgba(255, 255, 255, 0.06);
}

.srp-searchbar-btn {
  padding: 12px 22px;
  flex-shrink: 0;
}

.srp-pills-bar {
  background: var(--tg-black);
  border-bottom: 1px solid rgba(51, 65, 85, 0.4);
  padding: 12px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.srp-pills-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.srp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.srp-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--tg-muted-light);
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.srp-pill:hover {
  border-color: var(--tg-teal);
  color: var(--tg-teal-light);
}

.srp-pill--active {
  background: rgba(20, 184, 166, 0.15);
  border-color: var(--tg-teal);
  color: var(--tg-teal-light);
}

.srp-body {
  flex: 1;
  background: var(--tg-black);
}

.srp-body-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

/* Sidebar : drawer fixe sur tous les écrans (masqué par défaut) */
.srp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 92vw);
  max-height: none;
  z-index: 260;
  background: var(--tg-surface-elevated);
  border-right: 1px solid var(--tg-border);
  border-radius: 0;
  padding: 0;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.srp-sidebar.is-open {
  transform: translateX(0);
  box-shadow: 8px 0 48px rgba(0, 0, 0, 0.35);
}

/* Contenu sidebar : padding interne + header close */
.srp-sidebar-inner {
  padding: 20px;
  padding-top: 0;
}

.srp-sidebar-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--tg-border);
  position: sticky;
  top: 0;
  background: var(--tg-surface-elevated);
  z-index: 1;
}

.srp-sidebar-close {
  background: none;
  border: none;
  color: var(--tg-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
.srp-sidebar-close:hover { color: var(--tg-white); background: var(--tg-hover); }

/* Light theme sidebar */
body.srp-page-light .srp-sidebar {
  background: #fff;
  border-color: #e2e8f0;
}
body.srp-page-light .srp-sidebar-topbar {
  background: #fff;
  border-color: #e2e8f0;
}
body.srp-page-light .srp-sidebar-close { color: #64748b; }
body.srp-page-light .srp-sidebar-close:hover { background: #f1f5f9; color: #0f172a; }

.srp-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tg-border);
}

.srp-sidebar-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg-white);
  display: flex;
  align-items: center;
  gap: 8px;
}

.srp-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--tg-teal);
  color: var(--tg-black);
  border-radius: var(--radius-pill);
}

.srp-reset-filters {
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-teal-light);
  text-decoration: none;
}

.srp-reset-filters:hover {
  text-decoration: underline;
}

.srp-filter-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.srp-filter-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.srp-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tg-white-soft);
}

.srp-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.srp-toggle-track {
  width: 36px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--tg-border);
  flex-shrink: 0;
  position: relative;
  transition: background var(--transition);
}

.srp-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tg-white-soft);
  transition: transform var(--transition);
}

.srp-toggle-input:checked + .srp-toggle-track {
  background: var(--tg-teal);
}

.srp-toggle-input:checked + .srp-toggle-track::after {
  transform: translateX(16px);
}

.srp-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.srp-avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.srp-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.srp-filter-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tg-muted);
}

.srp-filter-select,
.srp-filter-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  color: var(--tg-white-soft);
  font-size: 14px;
  font-family: var(--font);
  transition: border-color var(--transition);
}

.srp-filter-select:focus,
.srp-filter-input:focus {
  outline: none;
  border-color: var(--tg-teal);
}

.srp-filter-input--mt {
  margin-top: 6px;
}

.srp-price-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.srp-price-range .srp-filter-input {
  flex: 1;
  min-width: 0;
}

.srp-price-sep {
  color: var(--tg-muted);
  flex-shrink: 0;
}

.srp-budget-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.srp-budget-preset {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  color: var(--tg-muted-light);
  cursor: pointer;
  font-family: var(--font);
  transition: border-color var(--transition), color var(--transition);
}

.srp-budget-preset:hover {
  border-color: var(--tg-teal);
  color: var(--tg-teal-light);
}

.srp-delivery-btns,
.srp-rating-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.srp-delivery-btn,
.srp-rating-option {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  color: var(--tg-muted-light);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.srp-delivery-btn:has(input:checked),
.srp-delivery-btn.is-active,
.srp-rating-option:has(input:checked),
.srp-rating-option.is-active {
  border-color: var(--tg-teal);
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-teal-light);
}

.srp-apply-btn {
  margin-top: 4px;
}

.srp-main {
  min-width: 0;
}

.srp-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.srp-results-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tg-white);
  line-height: 1.25;
}

.srp-results-title em {
  font-style: normal;
  color: var(--tg-teal-light);
}

.srp-results-count {
  margin: 0;
  font-size: 14px;
  color: var(--tg-muted-light);
}

.srp-results-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.srp-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  color: var(--tg-white-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}

.srp-filter-toggle-btn:hover,
.srp-filter-toggle-btn.is-active {
  border-color: var(--tg-teal);
  color: var(--tg-teal);
  background: rgba(20, 184, 166, .07);
}

body.srp-page-light .srp-filter-toggle-btn {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}
body.srp-page-light .srp-filter-toggle-btn:hover,
body.srp-page-light .srp-filter-toggle-btn.is-active {
  border-color: #0d9488;
  color: #0d9488;
  background: rgba(13, 148, 136, .06);
}

.srp-sort-select {
  padding: 10px 36px 10px 12px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  color: var(--tg-white-soft);
  font-size: 14px;
  font-family: var(--font);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.srp-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.srp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--tg-teal-light);
}

.srp-chip-remove {
  color: var(--tg-muted-light);
  text-decoration: none;
  font-weight: 700;
  padding: 0 2px;
  line-height: 1;
}

.srp-chip-remove:hover {
  color: var(--tg-white);
}

.srp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.srp-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.srp-card:hover {
  border-color: rgba(20, 184, 166, 0.45);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.srp-card-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--tg-surface);
  overflow: hidden;
}

.srp-card-thumb img,
.srp-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.srp-card-thumb--carousel .srp-carousel {
  height: 100%;
}

.srp-carousel {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.srp-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
}

.srp-carousel-item {
  flex: 0 0 100%;
  height: 100%;
}

.srp-carousel-item img,
.srp-carousel-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.srp-carousel-play {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--tg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  pointer-events: none;
}

.srp-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 15, 26, 0.75);
  color: var(--tg-white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.srp-carousel-btn:hover {
  background: var(--tg-teal);
  color: var(--tg-black);
}

.srp-carousel-btn--prev {
  left: 8px;
}

.srp-carousel-btn--next {
  right: 8px;
}

.srp-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}

.srp-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.srp-carousel-dot.is-active {
  background: var(--tg-teal);
}

.srp-card-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-muted);
}

.srp-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 1;
}

.srp-badge {
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 6px;
}

.srp-badge--featured {
  background: var(--tg-yellow);
  color: var(--tg-black);
}

.srp-badge--premium {
  background: var(--tg-teal);
  color: var(--tg-black);
}

.srp-card-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(10, 15, 26, 0.65);
  color: var(--tg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--transition), transform var(--transition);
}

.srp-card-fav:hover {
  background: rgba(20, 184, 166, 0.35);
  transform: scale(1.06);
}

.srp-card-fav.is-active {
  color: #f472b6;
}

.srp-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.srp-card-provider {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tg-border);
  margin-bottom: 2px;
}

body.srp-page-light .srp-card-provider {
  border-bottom-color: #f1f5f9;
}

.srp-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tg-surface);
}

.srp-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.srp-card-provider-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.srp-card-provider-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-white-soft);
}

.srp-verified-icon {
  color: var(--tg-teal);
  display: inline-flex;
}

.srp-available-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.srp-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.srp-stars {
  color: var(--tg-yellow);
}

.srp-card-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.srp-card-title a {
  color: var(--tg-white);
  text-decoration: none;
}

.srp-card-title a:hover {
  color: var(--tg-teal-light);
}

.srp-card-desc {
  margin: -2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tg-muted-light);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.srp-page-light .srp-card-desc {
  color: #64748b;
}

.srp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.srp-tag {
  font-size: 11px;
  padding: 4px 8px;
  background: var(--tg-surface);
  border-radius: 6px;
  color: var(--tg-muted-light);
}

.srp-tag--delivery {
  color: var(--tg-teal-light);
}

.srp-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.srp-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.srp-price-from {
  font-size: 11px;
}

.srp-price-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tg-teal-light);
}

body.srp-page-light .srp-price-val {
  color: #0d9488;
  font-size: 1.2rem;
}

body.srp-page-light .srp-price-from {
  color: #94a3b8;
}

body.srp-page-light .srp-price-currency {
  color: #64748b;
  font-weight: 600;
}

body.srp-page-light .srp-card-cta {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s;
}

body.srp-page-light .srp-card-cta:hover {
  opacity: .88;
  color: #fff;
}

.srp-price-currency {
  font-size: 12px;
  color: var(--tg-muted-light);
}

.srp-card-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-teal-light);
  text-decoration: none;
  white-space: nowrap;
}

.srp-card-cta:hover {
  color: var(--tg-teal);
}

.srp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--tg-border);
}

.srp-page-btn {
  color: var(--tg-teal-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.srp-page-btn:hover {
  text-decoration: underline;
}

.srp-page-nums {
  display: flex;
  align-items: center;
  gap: 6px;
}

.srp-page-num {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--tg-muted-light);
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
}

a.srp-page-num:hover {
  border-color: var(--tg-teal);
  color: var(--tg-teal-light);
}

.srp-page-num.is-current {
  background: var(--tg-teal);
  color: var(--tg-black);
  border-color: var(--tg-teal);
}

.srp-page-ellipsis {
  color: var(--tg-muted);
  padding: 0 4px;
}

.srp-empty {
  text-align: center;
  padding: 48px 24px 32px;
  max-width: 480px;
  margin: 0 auto;
}

.srp-empty-title {
  margin: 20px 0 10px;
  font-size: 1.25rem;
  color: var(--tg-white);
}

.srp-empty-sub {
  margin: 0 0 24px;
  color: var(--tg-muted-light);
  line-height: 1.5;
}

.srp-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
}

.srp-empty-suggestions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--tg-border);
}

.srp-empty-suggestions-title {
  font-size: 14px;
  color: var(--tg-muted-light);
  margin: 0 0 14px;
}

.srp-empty-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.srp-empty-cat-pill {
  padding: 8px 14px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--tg-teal-light);
  text-decoration: none;
}

.srp-empty-cat-pill:hover {
  border-color: var(--tg-teal);
}

/* ── Bande prestataires dans la recherche ───────────────────────────────── */
.srp-pstrip-section {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--tg-border);
}

.srp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.srp-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg-white);
  letter-spacing: -.01em;
}

body.srp-page-light .srp-section-title { color: #1e293b; }

body.providers-page-light .srp-section-title {
  color: #1e293b;
}

body.srp-page-light .srp-pstrip-section {
  border-bottom-color: #e8ecf0;
}

.srp-section-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-teal-light);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: .85;
  transition: opacity .15s;
}
.srp-section-more:hover { opacity: 1; text-decoration: underline; }

/* Scroll horizontal */
.srp-pstrip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; /* espace pour la scrollbar masquée */
  scrollbar-width: none;
}
.srp-pstrip::-webkit-scrollbar { display: none; }

/* Carte prestataire dans la recherche — avatar + nom + domaine + description */
.srp-pchip {
  flex: 0 0 210px;
  scroll-snap-align: start;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.srp-pchip:hover {
  border-color: rgba(20,184,166,.5);
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
body.srp-page-light .srp-pchip { background: #fff; }
body.srp-page-light .srp-pchip:hover { box-shadow: 0 6px 20px rgba(15,23,42,.12); }

.srp-pchip-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}
.srp-pchip-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 2px solid var(--tg-border);
}
.srp-pchip-initial {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-teal), var(--tg-teal-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}
.srp-pchip-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--tg-surface-elevated);
}
body.srp-page-light .srp-pchip-dot { border-color: #fff; }

.srp-pchip-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.srp-pchip-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.srp-pchip-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--tg-white-soft);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.srp-page-light .srp-pchip-name { color: #0f172a; }

.srp-pchip-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.srp-pchip-cat {
  font-size: 10.5px;
  padding: 2px 7px;
  background: rgba(20,184,166,.1);
  border: 1px solid rgba(20,184,166,.2);
  border-radius: 20px;
  color: var(--tg-teal-light);
  white-space: nowrap;
}
body.srp-page-light .srp-pchip-cat { background: rgba(13,148,136,.08); border-color: rgba(13,148,136,.2); color: #0d9488; }

.srp-pchip-desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--tg-muted-light);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.srp-page-light .srp-pchip-desc { color: #64748b; }

.srp-pchip-rating {
  font-size: 11px;
  color: #facc15;
  font-weight: 700;
}
.srp-pchip-rcount { color: var(--tg-muted); font-weight: 400; }

.srp-popular-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--tg-border);
}

.srp-popular-title {
  margin: 0 0 20px;
  font-size: 1.15rem;
  color: var(--tg-white);
}

.srp-popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.srp-popular-card {
  display: block;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), transform var(--transition);
}

.srp-popular-card:hover {
  border-color: var(--tg-teal);
  transform: translateY(-2px);
}

.srp-popular-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.srp-popular-card-img-empty {
  aspect-ratio: 4 / 3;
  background: var(--tg-surface);
}

.srp-popular-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.srp-popular-card-cat {
  font-size: 11px;
}

.srp-popular-card-desc {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--tg-muted-light);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.srp-page-light .srp-popular-card-desc {
  color: #64748b;
}

.srp-popular-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-white-soft);
  line-height: 1.3;
}

.srp-popular-card-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-teal-light);
}

.srp-sidebar-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 250;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.srp-sidebar-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop: permanent sidebar in layout grid */
@media (min-width: 1024px) {
  .srp-body-inner {
    display: grid;
    grid-template-columns: 268px 1fr;
    gap: 32px;
    align-items: start;
  }
  .srp-sidebar {
    position: sticky !important;
    top: 76px;
    transform: none !important;
    width: auto;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    border-right: 0;
    border-radius: var(--radius);
    border: 1px solid var(--tg-border);
    box-shadow: none;
  }
  .srp-sidebar-close,
  .srp-sidebar-overlay {
    display: none !important;
  }
  .srp-filter-toggle-btn {
    display: none !important;
  }
  body.srp-page-light .srp-sidebar {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 8px rgba(15,23,42,0.06);
  }
}

/* ── Providers page — light theme ─────────────────────────────────────── */
body.providers-page-light {
  background: #f2f4f7;
}

body.providers-page-light .providers-hero {
  background: #fff;
  border-bottom: 1px solid #e8ecf2;
}

body.providers-page-light .providers-hero-title,
body.providers-page-light .providers-hero-sub {
  color: #0f172a;
}

body.providers-page-light .providers-hero-sub {
  color: #64748b;
}

body.providers-page-light .providers-body {
  background: transparent;
}

body.providers-page-light .providers-filters {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05);
}

body.providers-page-light .filter-input,
body.providers-page-light .filter-select {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.providers-page-light .pcard {
  background: #fff;
  border-color: #e8ecf0;
  box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}

body.providers-page-light .pcard:hover {
  border-color: rgba(13,148,136,0.4);
  box-shadow: 0 12px 32px rgba(15,23,42,0.1);
}

body.providers-page-light .pcard-name-link {
  color: #0f172a;
}

body.providers-page-light .pcard-name-link:hover {
  color: #0d9488;
}

body.providers-page-light .pcard-headline {
  color: #64748b;
}

body.providers-page-light .pcard-skill-tag {
  background: rgba(13,148,136,0.08);
  border-color: rgba(13,148,136,0.2);
  color: #0d9488;
}

body.providers-page-light .pcard-footer {
  border-top-color: #f1f5f9;
  background: #fafbfc;
}

body.providers-page-light .pcard-meta-item {
  color: #64748b;
}

body.providers-page-light .pcard-avatar {
  border-color: #e2e8f0;
}

body.providers-page-light .active-filter-tag {
  background: rgba(13,148,136,0.08);
  border-color: rgba(13,148,136,0.2);
  color: #0d9488;
}

body.providers-page-light .providers-grid .empty-state {
  background: #fff;
  color: #0f172a;
}

/* ── SRP — Responsive (mobile-first) ─────────────────────────────────── */

@media (max-width: 1280px) {
  .srp-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media (max-width: 900px) {
  .srp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .srp-topbar-inner,
  .srp-pills-bar-inner,
  .srp-body-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 540px) {
  .srp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .srp-card-body {
    padding: 12px 12px 10px;
  }

  .srp-card-title {
    font-size: 0.875rem;
  }

  .srp-topbar-inner,
  .srp-pills-bar-inner,
  .srp-body-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .srp-searchbar {
    gap: 8px;
  }

  .srp-searchbar-btn {
    padding: 10px 16px;
    font-size: 14px;
  }

  .srp-results-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .srp-results-controls {
    width: 100%;
    justify-content: space-between;
  }

  .srp-sort-select {
    flex: 1;
  }

  .srp-body-inner {
    padding-top: 16px;
    padding-bottom: 32px;
  }
}

@media (max-width: 360px) {
  .srp-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── Global utility: btn-block ─────────────────────────────────────── */
.btn-block {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   Messagerie temps réel + Notifications (inbox-*, chat-*, notif-*, tgn-toast-*)
   ========================================================================== */

/* ── Nav badge caché ────────────────────────────────────────────────── */
.notification-badge.is-hidden,
.menu-badge.is-hidden { display: none; }

.icon-btn-messages { position: relative; }

/* ── Inbox ──────────────────────────────────────────────────────────── */
.inbox-wrap {
  max-width: 680px;
  margin: 0 auto;
  /* Fond légèrement élevé pour délimiter l'inbox */
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.inbox-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--tg-border);
  background: var(--tg-surface-elevated);
}

.inbox-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tg-white);
}

.inbox-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--tg-teal);
  color: var(--tg-black);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.inbox-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.inbox-item {
  overflow: hidden;
  transition: background var(--transition);
  border-bottom: 1px solid var(--tg-border);
  position: relative;
}

.inbox-item:last-child {
  border-bottom: none;
}

.inbox-item--unread {
  background: rgba(20, 184, 166, 0.05);
}

/* Trait vertical teal gauche sur items non lus */
.inbox-item--unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tg-teal);
}

.inbox-item-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition);
}

.inbox-item-link:hover {
  background: rgba(255,255,255,0.03);
}

.inbox-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
}

.inbox-avatar img,
.inbox-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.inbox-avatar-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--tg-black);
}

.inbox-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tg-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--tg-muted);
}

.inbox-item-body {
  flex: 1;
  min-width: 0;
}

.inbox-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.inbox-item-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--tg-white-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-item-time {
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.inbox-item-preview {
  font-size: 13px;
  color: var(--tg-muted-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-item-context {
  color: var(--tg-teal-light);
  margin-right: 4px;
}

.inbox-item-last--bold {
  font-weight: 600;
  color: var(--tg-white-soft);
}

.inbox-unread-dot {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--tg-teal);
  color: var(--tg-black);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inbox-empty {
  text-align: center;
  padding: 56px 24px 48px;
}

.inbox-empty-title {
  margin: 16px 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tg-white);
}

.inbox-empty-sub {
  margin: 0 0 24px;
  line-height: 1.5;
}

/* ── Chat ────────────────────────────────────────────────────────────── */
/* Layout pleine hauteur pour la page conversation (supprime le padding vertical du compte-layout) */
.compte-layout--chat {
  padding-top: 0;
  padding-bottom: 0;
  height: calc(100vh - 72px);
  height: calc(100dvh - 72px);
  overflow: hidden;
  align-items: stretch;
}

.compte-layout--chat .compte-main {
  height: 100%;
  overflow: hidden;
}

.compte-layout--chat .chat-wrap {
  height: 100%;
  max-height: 100%;
}

.chat-main {
  padding: 0;
  overflow: hidden;
}

.chat-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 72px);
  height: calc(100dvh - 72px);
  max-width: 780px;
  margin: 0 auto;
  background: var(--tg-surface);
  border-left: 1px solid var(--tg-border);
  border-right: 1px solid var(--tg-border);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tg-border);
  background: var(--tg-surface-elevated);
  flex-shrink: 0;
}

.chat-back {
  color: var(--tg-muted-light);
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}

.chat-back:hover {
  color: var(--tg-white);
  background: rgba(255,255,255,0.06);
}

.chat-header-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
}

.chat-header-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-header-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--tg-surface-elevated);
}

.chat-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-header-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--tg-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-sub {
  font-size: 12px;
}

.chat-header-actions {
  flex-shrink: 0;
}

.chat-context-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid rgba(20, 184, 166, 0.2);
  font-size: 12px;
  color: var(--tg-teal-light);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.chat-context-link {
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  max-width: 75%;
}

.chat-msg--me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg--other {
  align-self: flex-start;
}

.chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tg-surface-elevated);
}

.chat-msg-avatar-img,
.chat-msg-avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--tg-teal-light);
  background: rgba(20, 184, 166, 0.15);
  overflow: hidden;
  flex-shrink: 0;
}

.chat-msg-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.chat-msg-bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-msg--me .chat-msg-bubble {
  align-items: flex-end;
}

.chat-msg-body {
  margin: 0;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-msg--me .chat-msg-body {
  background: var(--tg-teal);
  color: var(--tg-black);
  border-bottom-right-radius: 4px;
}

.chat-msg--other .chat-msg-body {
  background: var(--tg-surface-elevated);
  color: var(--tg-white-soft);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--tg-border);
}

.chat-msg-time {
  font-size: 11px;
  padding: 0 4px;
}

.chat-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 10px 14px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 18px;
  width: fit-content;
}

.chat-typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tg-muted);
  animation: typing-bounce 1.2s infinite;
}

.chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

.chat-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--tg-muted-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.chat-input-bar {
  border-top: 1px solid var(--tg-border);
  padding: 12px 16px;
  background: var(--tg-surface-elevated);
  flex-shrink: 0;
}

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.chat-input {
  flex: 1;
  min-width: 0;
  resize: none;
  overflow-y: hidden;
  border: 1px solid var(--tg-border);
  border-radius: 20px;
  background: var(--tg-surface);
  color: var(--tg-white-soft);
  font-size: 16px;
  font-family: var(--font);
  padding: 10px 16px;
  line-height: 1.45;
  min-height: 44px;
  max-height: 200px;
  transition: border-color var(--transition), height .1s ease;
  box-sizing: border-box;
}

.chat-input:focus {
  outline: none;
  border-color: var(--tg-teal);
}

.chat-input::placeholder {
  color: var(--tg-muted);
}

.chat-send-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--tg-teal);
  color: var(--tg-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  transition: background var(--transition), transform var(--transition);
}
.chat-send-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.chat-send-btn:hover {
  background: var(--tg-teal-dark);
  transform: scale(1.05);
}

/* ── @ Mention dropdown ─────────────────────────────────────────────── */
.chat-mention-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  overflow: hidden;
  z-index: 200;
  max-height: 240px;
  overflow-y: auto;
}

.chat-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: 0;
  color: var(--tg-white-soft);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}
.chat-mention-item:hover,
.chat-mention-item.is-active {
  background: rgba(255,255,255,.06);
}

.chat-mention-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-mention-av--letter {
  background: var(--tg-teal);
  color: var(--tg-black);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-mention-type-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.chat-mention-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-mention-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--tg-teal-light);
  background: rgba(20,184,166,.12);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* ── @ mention link dans les bulles ─────────────────────────────────── */
.chat-msg-body .chat-mention-link {
  color: var(--tg-teal-light);
  font-weight: 600;
  text-decoration: none;
}
.chat-msg-body .chat-mention-link:hover {
  text-decoration: underline;
}

/* Conteneur input-bar doit être en position relative pour le dropdown */
.chat-input-bar {
  position: relative;
}

/* ── Chat file attachment ───────────────────────────────────────────── */
.chat-attach-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--tg-border);
  background: transparent;
  color: var(--tg-muted-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
}
.chat-attach-btn:hover { border-color: var(--tg-teal); color: var(--tg-teal); }

.chat-attach-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(20,184,166,0.08);
  border: 1px solid rgba(20,184,166,0.25);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--tg-teal-light);
}
.chat-attach-clear {
  background: none;
  border: none;
  color: var(--tg-muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  margin-left: auto;
}
.chat-attach-clear:hover { color: var(--tg-red, #ef4444); }

.chat-msg-img-link { display: block; margin-top: 6px; }
.chat-msg-img {
  max-width: min(100%, 360px);
  max-height: min(260px, 50vh);
  width: auto;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(15, 23, 42, 0.35);
  display: block;
}
.chat-msg-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(20,184,166,0.1);
  border: 1px solid rgba(20,184,166,0.2);
  border-radius: 8px;
  color: var(--tg-teal-light);
  font-size: 13px;
  text-decoration: none;
  margin-top: 6px;
  transition: background var(--transition);
  word-break: break-all;
}
.chat-msg-file-link:hover { background: rgba(20,184,166,0.18); }

/* ── Inbox search ───────────────────────────────────────────────────── */
.inbox-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tg-border);
  background: var(--tg-surface);
}

.inbox-search-icon {
  color: var(--tg-muted);
  flex-shrink: 0;
}

.inbox-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--tg-white-soft);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  padding: 4px 0;
  min-width: 0;
}

.inbox-search-input::placeholder {
  color: var(--tg-muted);
}

/* ── Chat date separator ─────────────────────────────────────────────── */
.chat-date-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  color: var(--tg-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-date-sep::before,
.chat-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tg-border);
}

/* ── Chat input wrap + char counter ─────────────────────────────────── */
.chat-input-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.chat-char-count {
  font-size: 11px;
  color: var(--tg-muted);
  text-align: right;
  padding: 2px 4px 0;
  height: 14px;
  line-height: 1;
}

.chat-char-count--warn {
  color: #f59e0b;
}

/* ── Section badge featured (Services en vedette) ────────────────────── */
.section-badge-label--featured {
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
  color: var(--tg-teal-light);
}

/* ── Notification center ─────────────────────────────────────────────── */
.notif-badge-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--tg-teal);
  color: var(--tg-black);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
}

.notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  position: relative;
}

.notif-item--unread {
  background: rgba(20, 184, 166, 0.05);
}

.notif-item:hover {
  background: var(--tg-surface-elevated);
}

.notif-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-item-text {
  font-size: 14px;
  color: var(--tg-white-soft);
  line-height: 1.4;
  text-decoration: none;
}

a.notif-item-text:hover {
  color: var(--tg-teal-light);
}

.notif-item-time {
  font-size: 12px;
}

.notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tg-teal);
  flex-shrink: 0;
  margin-top: 4px;
}

.notif-empty {
  text-align: center;
  padding: 56px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.notif-empty-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tg-white);
}

/* ── Toast notification push ─────────────────────────────────────────── */
.tgn-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: 24px;
  z-index: 9999;
  max-width: min(360px, calc(100% - 48px));
  width: auto;
  margin-left: auto;
  background: var(--tg-surface-elevated);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.tgn-toast--entering {
  transform: translateY(20px);
  opacity: 0;
}

.tgn-toast--leaving {
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
}

.tgn-toast-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

.tgn-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.15);
  color: var(--tg-teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tgn-toast-content {
  flex: 1;
  min-width: 0;
}

.tgn-toast-title {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-white);
}

.tgn-toast-body {
  margin: 0;
  font-size: 13px;
  color: var(--tg-muted-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tgn-toast-close {
  background: none;
  border: none;
  color: var(--tg-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
}

.tgn-toast-close:hover { color: var(--tg-white); }

/* ── Responsive chat ─────────────────────────────────────────────────── */
/* Mobile : remplace la grille par une colonne flex pour que le nav + chat
   s'empilent proprement dans la hauteur disponible sans clipper l'input. */
@media (max-width: 860px) {
  .compte-layout--chat {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 56px);
    padding: 0;
    gap: 0;
  }

  .compte-layout--chat > .compte-nav {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .compte-layout--chat > .compte-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .compte-layout--chat .chat-wrap {
    height: 100%;
    border-left: 0;
    border-right: 0;
  }
}

@media (max-width: 768px) {
  .chat-wrap {
    border-left: 0;
    border-right: 0;
  }

  .chat-msg {
    max-width: 90%;
  }

  .tgn-toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
  }
}

/* ==========================================================================
   Dashboard (db-*), Commandes (order-card, obadge), Wallet (wallet-hero),
   KYC redesign (kyc-*), Historique (histo-*), Shared utilities
   ========================================================================== */

/* ── Dashboard ───────────────────────────────────────────────────────── */
.db-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

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

.db-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tg-surface-elevated);
  border: 2px solid var(--tg-teal);
}

.db-avatar-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
}

.db-welcome {
  margin: 0 0 4px;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800;
  color: var(--tg-white);
}

.db-role {
  margin: 0;
  font-size: 13px;
}

.db-verified { color: var(--tg-teal-light); font-weight: 600; }
.db-premium  { color: var(--tg-yellow); font-weight: 700; }

.db-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.2);
  border-radius: var(--radius);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.db-alert-icon {
  color: var(--tg-yellow);
  flex-shrink: 0;
  margin-top: 2px;
}

.db-alert-body {
  flex: 1;
  min-width: 0;
}

.db-alert-body strong {
  display: block;
  font-size: 15px;
  color: var(--tg-white);
  margin-bottom: 4px;
}

.db-alert-body p {
  margin: 0 0 10px;
  font-size: 13px;
}

.db-alert--teal {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.25);
}
.db-alert--teal .db-alert-icon {
  color: var(--tg-teal);
}

.db-progress-bar {
  height: 4px;
  background: rgba(250, 204, 21, 0.15);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.db-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tg-teal), var(--tg-yellow));
  border-radius: 4px;
  transition: width 0.6s ease;
}

.db-progress-label { font-size: 11px; }

/* Stats grid */
.db-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}

.db-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.db-stat:hover {
  border-color: var(--tg-teal);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.db-stat--wallet { background: linear-gradient(135deg, rgba(20,184,166,.08), rgba(20,184,166,.04)); }

.db-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.db-stat-icon--orders   { background: rgba(99, 102, 241, .14); color: #a5b4fc; }
.db-stat-icon--demandes { background: rgba(249, 115, 22, .12); color: #fdba74; }
.db-stat-icon--messages { background: rgba(20, 184, 166, .14); color: var(--tg-teal-light); }
.db-stat-icon--services { background: rgba(34, 197, 94, .12);  color: #86efac; }
.db-stat-icon--wallet   { background: rgba(250, 204, 21, .12); color: var(--tg-yellow); }

.db-stat-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.db-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--tg-white);
  line-height: 1;
}

.db-stat-label { font-size: 12px; color: var(--tg-muted-light); font-weight: 500; }

.db-stat-sub { font-size: 11px; font-weight: 600; }
.db-stat-sub--warn { color: var(--tg-yellow); }
.db-stat-sub--info { color: var(--tg-teal-light); }

/* Dashboard sections */
.db-section { margin-bottom: 36px; }

.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.db-section-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tg-white);
}

.db-section-link {
  font-size: 13px;
  color: var(--tg-teal-light);
  text-decoration: none;
  font-weight: 600;
}

.db-section-link:hover { text-decoration: underline; }

/* Services list in dashboard */
.db-services-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-service-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.db-service-row:hover { background: var(--tg-surface-elevated); }

.db-service-thumb {
  width: 52px;
  height: 38px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tg-surface);
}

.db-service-thumb img { width: 100%; height: 100%; object-fit: cover; }
.db-service-thumb-empty { width: 100%; height: 100%; }

.db-service-info { flex: 1; min-width: 0; }

.db-service-title {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--tg-white-soft);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-service-title:hover { color: var(--tg-teal-light); }

.db-service-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: 2px;
}

.db-service-price { font-weight: 600; color: var(--tg-teal-light); }

.db-service-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.db-service-views { font-size: 12px; }

.db-service-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Status pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.status-pill--active  { background: rgba(34,197,94,.14); color: #86efac; }
.status-pill--draft   { background: rgba(148,163,184,.12); color: #94a3b8; }

/* Quick links */
.db-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.db-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--tg-white-soft);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.db-quick-link:hover { border-color: var(--tg-teal); color: var(--tg-teal-light); background: rgba(20,184,166,.06); }
.db-quick-link--verified { border-color: rgba(20,184,166,.4); color: var(--tg-teal-light); }

/* ── Order cards (commandes) ──────────────────────────────────────── */
.orders-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ofilter-btn {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tg-border);
  background: var(--tg-surface-elevated);
  color: var(--tg-muted-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.ofilter-btn:hover { border-color: var(--tg-teal); color: var(--tg-teal-light); }
.ofilter-btn.is-active { background: rgba(20,184,166,.14); border-color: var(--tg-teal); color: var(--tg-teal-light); }

.orders-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.order-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.order-card:hover { border-color: rgba(20,184,166,.35); box-shadow: var(--shadow-sm); }
.order-card--paid  { border-left: 3px solid rgba(34,197,94,.5); }
.order-card--pending { border-left: 3px solid rgba(250,204,21,.5); }
.order-card--failed,
.order-card--cancelled { border-left: 3px solid rgba(239,68,68,.4); }

.order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  flex-wrap: wrap;
}

.order-card-id { display: flex; align-items: baseline; gap: 8px; }
.order-card-hash { font-weight: 800; color: var(--tg-white); font-size: 15px; }
.order-card-date { font-size: 12px; }

.order-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* Badge obadge */
.obadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.obadge--pending  { background: rgba(250,204,21,.12); color: var(--tg-yellow); border: 1px solid rgba(250,204,21,.25); }
.obadge--paid     { background: rgba(34,197,94,.1);   color: #86efac;          border: 1px solid rgba(34,197,94,.25); }
.obadge--failed,
.obadge--cancelled { background: rgba(239,68,68,.1); color: #fca5a5;           border: 1px solid rgba(239,68,68,.2); }
.obadge--refunded { background: rgba(148,163,184,.1); color: #94a3b8;          border: 1px solid rgba(148,163,184,.2); }
.obadge--delivery-in_progress { background: rgba(99,102,241,.1); color: #a5b4fc; border: 1px solid rgba(99,102,241,.2); }
.obadge--delivery-delivered   { background: rgba(20,184,166,.1); color: var(--tg-teal-light); border: 1px solid rgba(20,184,166,.2); }
.obadge--delivery-completed   { background: rgba(34,197,94,.1);  color: #86efac; border: 1px solid rgba(34,197,94,.2); }
.obadge--delivery-disputed    { background: rgba(239,68,68,.1);  color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }
.obadge--escrow   { background: rgba(250,204,21,.08); color: var(--tg-yellow); border: 1px solid rgba(250,204,21,.2); }
.obadge--released { background: rgba(20,184,166,.1);  color: var(--tg-teal-light); border: 1px solid rgba(20,184,166,.2); }

.order-card-body  { padding: 0 18px 10px; }
.order-card-parties { padding: 0 18px 10px; font-size: 13px; }

.order-card-service-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 6px 0;
}

.order-card-service-img {
  width: 56px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.order-card-service-img-empty {
  width: 56px;
  height: 40px;
  background: var(--tg-surface);
  border-radius: 8px;
  flex-shrink: 0;
}

.order-card-service-info { display: flex; flex-direction: column; gap: 2px; }
.order-card-service-title { font-weight: 600; font-size: 14px; color: var(--tg-white-soft); }
.order-card-service-cat   { font-size: 12px; }

.order-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--tg-border);
  flex-wrap: wrap;
}

.order-card-amount { display: flex; align-items: baseline; gap: 5px; }
.order-card-amount-val { font-size: 1.15rem; font-weight: 800; color: var(--tg-white); }
.order-card-amount-cur { font-size: 12px; }
.order-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Wallet redesign ──────────────────────────────────────────────── */
/* Bannière bientôt disponible */
.wallet-coming-soon {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(250, 204, 21, 0.07);
  border: 1px solid rgba(250, 204, 21, 0.25);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.wallet-cs-icon {
  flex-shrink: 0;
  color: var(--tg-yellow);
  margin-top: 2px;
}
.wallet-cs-body { flex: 1; min-width: 0; }
.wallet-cs-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-yellow);
  margin: 0 0 4px;
}
.wallet-cs-text {
  font-size: 13px;
  color: var(--tg-muted-light);
  margin: 0;
  line-height: 1.5;
}

.wallet-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(20,184,166,.12) 0%, rgba(20,184,166,.04) 100%);
  border: 1px solid rgba(20,184,166,.25);
  border-radius: var(--radius);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.wallet-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(20,184,166,.18);
  color: var(--tg-teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wallet-hero-info { flex: 1; min-width: 0; }
.wallet-hero-label { display: block; font-size: 12px; color: var(--tg-muted-light); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }

.wallet-hero-amount { display: flex; align-items: baseline; gap: 8px; }
.wallet-hero-value  { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: var(--tg-white); letter-spacing: -0.03em; }
.wallet-hero-currency { font-size: 1rem; color: var(--tg-muted-light); font-weight: 500; }

.wallet-escrow-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(20,184,166,.06);
  border: 1px solid rgba(20,184,166,.15);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--tg-muted-light);
  line-height: 1.5;
  margin-bottom: 32px;
}

.wallet-transactions-wrap { }
.wallet-tx-title { margin: 0 0 16px; font-size: 1rem; font-weight: 700; color: var(--tg-white); }

.wallet-tx-list { display: flex; flex-direction: column; gap: 2px; }

.wallet-tx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.wallet-tx-row:hover { background: var(--tg-surface-elevated); }

.wallet-tx-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wallet-tx-icon--credit { background: rgba(34,197,94,.12); color: #86efac; }
.wallet-tx-icon--debit  { background: rgba(239,68,68,.1);  color: #fca5a5; }

.wallet-tx-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wallet-tx-desc { font-size: 14px; color: var(--tg-white-soft); font-weight: 500; }
.wallet-tx-date { font-size: 12px; }

.wallet-tx-amount { font-size: 15px; font-weight: 700; flex-shrink: 0; }
.wallet-tx-amount--credit { color: #86efac; }
.wallet-tx-amount--debit  { color: #fca5a5; }

/* ── KYC redesign ─────────────────────────────────────────────────── */
.kyc-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius);
  margin-bottom: 28px;
}

.kyc-status-banner--approved { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); }
.kyc-status-banner--pending  { background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.2); }
.kyc-status-banner--rejected { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); }

.kyc-status-banner--approved .kyc-status-banner-icon { color: #86efac; }
.kyc-status-banner--pending  .kyc-status-banner-icon { color: var(--tg-yellow); }
.kyc-status-banner--rejected .kyc-status-banner-icon { color: #fca5a5; }

.kyc-status-banner-body { display: flex; flex-direction: column; gap: 4px; }
.kyc-status-banner-body strong { font-size: 15px; color: var(--tg-white); }
.kyc-rejection-reason { margin-top: 8px; font-size: 13px; color: #fca5a5; }

.kyc-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.kyc-benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--tg-white-soft);
}

.kyc-benefit-icon { font-size: 16px; flex-shrink: 0; }

.kyc-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}

.kyc-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tg-muted);
}

.kyc-step.is-active { color: var(--tg-teal-light); }

.kyc-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tg-surface-elevated);
  border: 2px solid var(--tg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.kyc-step.is-active .kyc-step-dot {
  background: var(--tg-teal);
  border-color: var(--tg-teal);
  color: var(--tg-black);
}

.kyc-step-line {
  flex: 1;
  height: 2px;
  background: var(--tg-border);
  min-width: 24px;
}

.kyc-form { display: flex; flex-direction: column; gap: 28px; }

.kyc-section { display: flex; flex-direction: column; gap: 14px; }

.kyc-section-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-white);
}

.kyc-id-types { display: flex; flex-wrap: wrap; gap: 10px; }

.kyc-id-option { cursor: pointer; }

.kyc-id-option-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--tg-white-soft);
  transition: border-color var(--transition), background var(--transition);
}

.kyc-id-option.is-selected .kyc-id-option-body,
.kyc-id-option:has(input:checked) .kyc-id-option-body {
  border-color: var(--tg-teal);
  background: rgba(20,184,166,.1);
  color: var(--tg-teal-light);
}

.kyc-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.kyc-upload-slot {
  border: 2px dashed var(--tg-border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
  cursor: pointer;
}

.kyc-upload-slot:hover { border-color: var(--tg-teal); }
.kyc-upload-slot.has-file { border-color: rgba(34,197,94,.5); border-style: solid; }
.kyc-upload-slot--selfie { grid-column: 1 / -1; }

.kyc-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  cursor: pointer;
  text-align: center;
  color: var(--tg-muted-light);
}

.kyc-upload-title { font-size: 14px; font-weight: 600; color: var(--tg-white-soft); }
.kyc-upload-sub   { font-size: 11px; }
.kyc-upload-file-name { font-size: 12px; color: var(--tg-teal-light); word-break: break-all; }

.kyc-file-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.kyc-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--tg-muted-light);
  line-height: 1.5;
}

.kyc-selfie-hint { font-size: 13px; margin-bottom: 12px; }

/* ── KYC — nouvelles sections ─────────────────────────────────────── */

/* Badge pills rouge (vérifié) et vert (pro certifié) */
.kyc-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.kyc-badge-pill--verified {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border: 1px solid rgba(220, 38, 38, 0.3);
}
.kyc-badge-pill--pro {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
  border: 1px solid rgba(22, 163, 74, 0.3);
}

/* Explication des deux badges */
.kyc-badges-explain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.kyc-badge-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kyc-badge-card.is-active {
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.05);
}
.kyc-badge-card--verified.is-active { border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.05); }
.kyc-badge-desc { font-size: 13px; color: var(--tg-muted-light); margin: 0; line-height: 1.5; }
.kyc-badge-obtained { font-size: 12px; font-weight: 600; color: #4ade80; }
.kyc-badge-pending-lbl { font-size: 12px; color: var(--tg-muted); font-style: italic; }

/* Flash messages */
.kyc-flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.kyc-flash--success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: #86efac; }
.kyc-flash--error   { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: #fca5a5; }
.kyc-flash--warning { background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.2); color: var(--tg-yellow); }

/* État : approuvé */
.kyc-approved-card {
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.kyc-approved-icon { color: #86efac; }
.kyc-approved-title { font-size: 1.3rem; font-weight: 700; color: var(--tg-white); margin: 0; }
.kyc-approved-sub { font-size: 14px; color: var(--tg-muted-light); margin: 0; max-width: 440px; line-height: 1.6; }
.kyc-approved-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Récap dossier soumis */
.kyc-dossier-recap {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kyc-dossier-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-white);
  margin: 0;
}
.kyc-dossier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.kyc-dossier-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--tg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--tg-border);
}
.kyc-dossier-label { font-size: 11px; color: var(--tg-muted); text-transform: uppercase; letter-spacing: .05em; }
.kyc-dossier-value { font-size: 13px; font-weight: 500; color: var(--tg-white-soft); }
.kyc-dossier-value--file { color: var(--tg-teal-light); display: flex; align-items: center; gap: 5px; }

.kyc-edit-toggle { align-self: flex-start; }
.kyc-edit-form-wrap { margin-top: 4px; }

/* Resoumission */
.kyc-resubmit-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tg-white);
  margin: 0 0 4px;
}
.kyc-resubmit-hint { font-size: 13px; margin-bottom: 4px; }
.kyc-rejection-action { font-size: 13px; color: var(--tg-yellow); margin-top: 6px; }

/* Badges sur les cartes prestataire — rouge pour vérifié, vert pour pro */
.pcard-badge--verified {
  background: rgba(220, 38, 38, 0.85) !important;
  color: #fff !important;
}
.pcard-badge--premium {
  background: rgba(22, 163, 74, 0.9) !important;
  color: #fff !important;
}

/* Badges light-theme */
body.providers-page-light .pcard-badge--verified {
  background: #dc2626 !important;
  color: #fff !important;
}
body.providers-page-light .pcard-badge--premium {
  background: #16a34a !important;
  color: #fff !important;
}

@media (max-width: 640px) {
  .kyc-badges-explain { grid-template-columns: 1fr; }
  .kyc-dossier-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Historique ───────────────────────────────────────────────────── */
.histo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.histo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.histo-row:hover { background: var(--tg-surface-elevated); }

.histo-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.histo-thumb {
  width: 56px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tg-surface-elevated);
}

.histo-thumb--round { border-radius: 50%; width: 40px; height: 40px; }
.histo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.histo-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--tg-teal-light); background: rgba(20,184,166,.12); font-size: 14px; }

.histo-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.histo-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(20,184,166,.12);
  color: var(--tg-teal-light);
  width: fit-content;
}

.histo-type-badge--provider { background: rgba(99,102,241,.12); color: #a5b4fc; }

.histo-title { font-size: 14px; font-weight: 600; color: var(--tg-white-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.histo-sub   { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.histo-time  { font-size: 12px; white-space: nowrap; flex-shrink: 0; }

/* ── Buttons extra sizes ──────────────────────────────────────────── */
.btn-xs {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  border: 1px solid var(--tg-border);
  background: transparent;
  color: var(--tg-muted-light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--transition), color var(--transition);
}

.btn-xs:hover { border-color: var(--tg-teal); color: var(--tg-teal-light); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tg-border);
  background: transparent;
  color: var(--tg-muted-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.btn-ghost:hover { border-color: var(--tg-teal); color: var(--tg-teal-light); }

/* ── Service template picker ─────────────────────────────────────────────── */

/* Tip bar */
.tpl-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(20,184,166,.06);
  border: 1px solid rgba(20,184,166,.2);
  border-radius: var(--radius-sm);
  font-size: .83rem;
  color: var(--tg-muted-light);
  margin-bottom: 20px;
}
.tpl-tip svg { color: var(--tg-teal); flex-shrink: 0; margin-top: 1px; }
.tpl-tip strong { color: var(--tg-white-soft); }

/* Partir de zéro */
.tpl-blank-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--tg-surface);
  border: 1.5px dashed rgba(20,184,166,.5);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  margin-bottom: 24px;
  transition: background var(--transition), border-color var(--transition);
}
.tpl-blank-card:hover { background: rgba(20,184,166,.06); border-color: var(--tg-teal); }
.tpl-blank-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(20,184,166,.12);
  color: var(--tg-teal);
  flex-shrink: 0;
}
.tpl-blank-body { flex: 1; min-width: 0; }
.tpl-blank-title { font-size: .95rem; font-weight: 700; color: var(--tg-white-soft); display: block; }
.tpl-blank-sub { font-size: .83rem; color: var(--tg-muted); margin-top: 2px; }
.tpl-blank-arrow { color: var(--tg-teal); flex-shrink: 0; }

/* Section label */
.tpl-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tg-muted);
  margin-bottom: 14px;
}
.tpl-count-badge {
  background: rgba(20,184,166,.15);
  color: var(--tg-teal);
  font-size: .68rem;
  font-weight: 800;
  border-radius: 20px;
  padding: 1px 7px;
  letter-spacing: 0;
  text-transform: none;
}

/* Template grid */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* Template card */
.tpl-card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.tpl-card:hover {
  border-color: rgba(20,184,166,.4);
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
  transform: translateY(-2px);
}

.tpl-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tpl-card-icon { font-size: 1.75rem; line-height: 1; flex-shrink: 0; }
.tpl-card-meta { display: flex; flex-direction: column; gap: 5px; }
.tpl-card-name { font-size: .93rem; font-weight: 700; color: var(--tg-white-soft); line-height: 1.3; }
.tpl-card-tag {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tg-teal);
  background: rgba(20,184,166,.12);
  border: 1px solid rgba(20,184,166,.2);
  border-radius: 4px;
  padding: 2px 7px;
  width: fit-content;
}
.tpl-card-desc {
  font-size: .82rem;
  color: var(--tg-muted);
  line-height: 1.55;
  margin: 0;
}

/* Actions row */
.tpl-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}
.tpl-use-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-ghost--active {
  border-color: var(--tg-teal) !important;
  color: var(--tg-teal-light) !important;
  background: rgba(20,184,166,.1) !important;
}

@media (max-width: 700px) {
  .tpl-grid { grid-template-columns: 1fr; }
  .tpl-blank-card { flex-wrap: wrap; }
}

/* ── Bouton Suivre (profil prestataire) ─────────────────────────────────── */
.btn-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 16px;
  margin-top: 8px;
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tg-muted-light);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
}
.btn-follow:hover {
  border-color: var(--tg-teal);
  color: var(--tg-teal-light);
  background: rgba(20,184,166,.06);
}
.btn-follow.is-following {
  border-color: rgba(20,184,166,.4);
  color: var(--tg-teal);
  background: rgba(20,184,166,.1);
}
.btn-follow.is-following:hover {
  border-color: #ef4444;
  color: #f87171;
  background: rgba(239,68,68,.07);
}
.btn-follow-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: rgba(20,184,166,.15);
  color: var(--tg-teal);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 2px;
}

/* ── Email verification banner ───────────────────────────────────────────── */
.email-verify-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #1a2744;
  border-top: 2px solid var(--tg-teal);
  color: var(--tg-white-soft);
  font-size: 13.5px;
  flex-wrap: wrap;
}
.email-verify-banner svg {
  flex-shrink: 0;
  color: var(--tg-teal);
}
.email-verify-link {
  color: var(--tg-teal-light);
  text-decoration: underline;
  font-weight: 600;
  white-space: nowrap;
}
.email-verify-link:hover { color: var(--tg-yellow); }
.email-verify-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--tg-muted-light);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background var(--transition);
}
.email-verify-close:hover { background: rgba(255,255,255,.1); color: var(--tg-white); }

/* ── Auth page (email verification sent / success) ───────────────────────── */
.auth-page-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}
.auth-page-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 48px 40px 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.auth-page-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 28px;
}
.auth-page-icon--mail { background: rgba(20,184,166,.12); color: var(--tg-teal); }
.auth-page-icon--success { background: rgba(22,163,74,.12); color: #4ade80; }
.auth-page-card h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 10px;
}
.auth-page-card p {
  color: var(--tg-muted-light);
  font-size: 14.5px;
  margin: 0 0 28px;
  line-height: 1.6;
}
.auth-page-card strong { color: var(--tg-white-soft); }
.auth-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  margin-bottom: 28px;
}
.auth-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.auth-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(20,184,166,.15);
  color: var(--tg-teal);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-step p {
  margin: 0;
  font-size: 13.5px;
  color: var(--tg-muted-light);
}
.auth-page-divider {
  border: none;
  border-top: 1px solid var(--tg-border);
  margin: 24px 0;
}
.auth-page-tip {
  font-size: 12px;
  color: var(--tg-muted);
  margin: 0;
  text-align: left;
}
.auth-page-tip strong { color: var(--tg-muted-light); }

/* ── Signup form helpers ─────────────────────────────────────────────────── */
.form-required {
  color: #f87171;
  font-size: 11px;
  margin-left: 2px;
}
.form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.form-input-wrap input {
  flex: 1;
  padding-right: 40px !important;
}
.form-toggle-pw {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tg-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
.form-toggle-pw:hover { color: var(--tg-teal-light); }

/* Password strength bar */
.pw-strength {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  margin-top: 6px;
  overflow: hidden;
}
.pw-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.3s ease, background 0.3s ease;
  background: var(--tg-muted);
}
.pw-strength-fill--weak   { background: #ef4444; }
.pw-strength-fill--fair   { background: #f59e0b; }
.pw-strength-fill--good   { background: #3b82f6; }
.pw-strength-fill--strong { background: #22c55e; }

/* Auth divider around "ou" */
.auth-divider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}
.auth-divider-wrap::before,
.auth-divider-wrap::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tg-border);
}
.auth-divider-wrap .auth-divider {
  font-size: 12px;
  color: var(--tg-muted);
  white-space: nowrap;
}

/* Terms text in signup */
.auth-terms {
  font-size: 12px;
  color: var(--tg-muted);
  margin: 12px 0;
  text-align: center;
  line-height: 1.5;
}
.auth-terms a {
  color: var(--tg-teal-light);
  text-decoration: underline;
}
.auth-terms a:hover { color: var(--tg-yellow); }

/* hCaptcha dark theme adjustment */
.h-captcha { margin: 4px 0; }

.hcaptcha-signup-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--tg-muted);
}

.hcaptcha-dev-hint {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.25);
  color: var(--tg-yellow-soft);
  font-size: 12px;
}

@media (max-width: 500px) {
  .auth-page-card { padding: 32px 20px 28px; }
  .email-verify-banner { flex-direction: column; align-items: flex-start; }
  .email-verify-close { margin-left: 0; }
}

/* ==========================================================================
   RESPONSIVE MOBILE — Section consolidée (smartphones 90 % des utilisateurs)
   Breakpoints : 900px (tablette) · 768px (mobile large) · 540px (mobile) · 400px (petit)
   ========================================================================== */

/* ── 0. Conteneurs globaux : jamais plus larges que l'écran ────────────── */
.section-inner,
.header-inner,
.footer-inner,
.profile-incomplete-inner,
.compte-layout,
.compte-inner,
.compte-page {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.section-inner,
.compte-inner,
.compte-main {
  min-width: 0;
}

.profile-incomplete-inner {
  min-width: 0;
}

/* Marges négatives des carrousels : supprimées sur mobile pour éviter le débordement horizontal */
@media (max-width: 768px) {
  .section-inner > .home-scroll-h,
  .section-inner > .domain-scroll {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
  }
}

/* ── 1. Inputs/Selects/Textareas — 16px min pour éviter le zoom iOS ────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
  font-size: 16px;
}

/* Cibles tactiles : min 44px (sans .compte-nav-link — nav compte Perso dense sur mobile via @860px) */
.btn-primary,
.btn-secondary,
.btn-sm,
.dropdown-item,
.icon-btn,
.auth-btn {
  min-height: 44px;
}
.icon-btn { min-width: 44px; }

/* ── 2. Tables — overflow horizontal scrollable ────────────────────────── */
.profile-markdown table,
.help-rendered table,
.tpl-preview-modal-md table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  width: 100%;
}

/* ── 3. Header ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Ligne 1 : logo + actions ; ligne 2 : barre de recherche pleine largeur */
  .header-inner {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 10px;
  }
  .logo { flex-shrink: 0; }
  .header-actions {
    margin-left: auto;
    gap: 4px;
  }
  .search-form-wrap {
    order: 3;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}

@media (max-width: 400px) {
  .header-inner { padding: 8px max(10px, env(safe-area-inset-left, 0px)) 8px max(10px, env(safe-area-inset-right, 0px)); gap: 6px; }
  .logo { flex-shrink: 0; }
  .logo img { height: 34px; }
  /* Cibles tactiles ≥ 40px (équilibre place / ergonomie) */
  .icon-btn { min-width: 40px; min-height: 40px; width: 40px; height: 40px; padding: 0 8px; }
  /* Masquer les icônes secondaires sur très petit écran pour préserver le logo */
  .icon-btn-talents { display: none !important; }
  .search-form input { padding: 11px 14px; font-size: 16px; }
}

/* ── 4. Compte — sidebar nav → tabs horizontaux sur mobile ────────────── */
@media (max-width: 860px) {
  .compte-layout,
  .compte-inner {
    grid-template-columns: 1fr;
    padding: 16px 14px 48px;
    gap: 0;
  }

  .compte-nav {
    position: static;
    width: 100%;
    border-bottom: 1px solid var(--tg-border);
    margin-bottom: 14px;
    padding-bottom: 2px;
  }

  .compte-nav--entreprise-shell {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-title { display: none; } /* masqué sauf bloc entreprise (mobile vertical) */

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-links {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--tg-border) transparent;
  }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-links::-webkit-scrollbar { height: 3px; }
  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-links::-webkit-scrollbar-thumb {
    background: var(--tg-border);
    border-radius: 3px;
  }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-link {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 6px;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.15 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Groupe accordéon « entreprise » : ne pas prendre toute une ligne de hauteur */
  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-group {
    flex-shrink: 0;
    width: auto;
    max-width: none;
  }
  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-group-toggle {
    width: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.15;
    border-radius: 6px;
  }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-divider {
    /* Séparateur invisible sur horizontal */
    width: 1px;
    height: 14px;
    margin: auto 3px;
    background: var(--tg-border);
    flex-shrink: 0;
  }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-link--logout {
    margin-left: 4px;
  }

  /* Bascule Perso / Entreprise — compact sur mobile (lisible sans sur-hauteur) */
  .compte-workspace-bar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 3px;
    gap: 4px;
    border-radius: 10px;
    padding-left: max(3px, env(safe-area-inset-left, 0px));
    padding-right: max(3px, env(safe-area-inset-right, 0px));
  }
  .compte-workspace-pill {
    min-height: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }

  /* Mode entreprise mobile : même principe que Perso — bandeau horizontal scrollable, liens courts */
  .compte-nav--entreprise-shell .compte-nav-title {
    display: none;
  }
  .compte-nav--entreprise-shell .compte-nav-links--enterprise {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--tg-border) transparent;
    gap: 2px;
    padding-bottom: 4px;
    width: 100%;
  }
  .compte-nav--entreprise-shell .compte-nav-links--enterprise::-webkit-scrollbar {
    height: 3px;
  }
  .compte-nav--entreprise-shell .compte-nav-links--enterprise::-webkit-scrollbar-thumb {
    background: var(--tg-border);
    border-radius: 3px;
  }
  .compte-nav--entreprise-shell .compte-nav-links--enterprise .compte-nav-link {
    flex-shrink: 0;
    width: auto;
    box-sizing: border-box;
    white-space: nowrap;
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 8px !important;
    justify-content: flex-start;
    line-height: 1.15 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
  }
  .compte-nav--entreprise-shell .compte-nav-links--enterprise .compte-nav-link--soft {
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  .compte-nav--entreprise-shell .compte-nav-links--enterprise .compte-nav-link svg {
    width: 13px;
    height: 13px;
  }
  .compte-nav--entreprise-shell .compte-nav-links--enterprise .compte-nav-divider {
    width: 1px;
    height: 14px;
    margin: auto 3px;
    flex-shrink: 0;
    align-self: center;
    background: var(--tg-border);
  }
  .compte-nav--entreprise-shell .compte-nav-micro-hint {
    display: none;
  }
  .compte-nav--entreprise-shell .compte-nav-enterprise-head {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom-width: 1px;
  }
  .compte-nav--entreprise-shell .compte-nav-identity {
    margin-bottom: 4px;
    gap: 6px;
    align-items: center;
  }
  .compte-nav--entreprise-shell .compte-nav-id-avatar,
  .compte-nav--entreprise-shell .compte-nav-id-avatar--placeholder {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }
  .compte-nav--entreprise-shell .compte-nav-id-avatar--placeholder {
    font-size: 0.85rem;
  }
  .compte-nav--entreprise-shell .compte-nav-id-name {
    font-size: 12px;
    line-height: 1.15;
  }
  .compte-nav--entreprise-shell .compte-nav-id-company {
    white-space: normal;
    line-height: 1.25;
    font-size: 10px;
    max-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Page content */
  .compte-main,
  .compte-content,
  .compte-page .compte-content {
    min-width: 0;
    width: 100%;
  }

  /* Titres de page */
  .compte-title { font-size: 1.35rem; }
  .compte-subtitle { font-size: 13px; margin-bottom: 20px; }
}

/* ── 5. Modales — bottom-sheet sur smartphone ──────────────────────────── */
@media (max-width: 540px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-box,
  .modal-box--wide {
    max-width: 100%;
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 92vh;
    padding: 24px 20px 32px;
    /* Indicateur de drag */
    background: var(--tg-surface-elevated);
  }

  .modal-box::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--tg-border);
    border-radius: 2px;
    margin: 0 auto 20px;
  }

  .modal-title { font-size: 1.2rem; }

  .auth-social { flex-direction: column; gap: 10px; }
  .auth-btn { width: 100%; }
}

/* ── 6. Formulaires — responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  /* Service form — rows complexes → colonne unique */
  .service-media-row {
    grid-template-columns: 1fr !important;
  }

  .service-plan-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Diplômes */
  .diploma-form-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .service-plan-row,
  .diploma-form-row {
    grid-template-columns: 1fr !important;
  }

  .service-form-section { padding: 14px; }

  .checkout-content { padding: 0; }
}

/* ── 7. Cards & Grids ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* 3-col → 1-col */
  .how-it-works-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Dashboard stats */
  .dashboard-stats-grid,
  .dashboard-cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  /* Commandes */
  .commandes-grid,
  .commande-cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Wallet */
  .wallet-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .dashboard-stats-grid,
  .dashboard-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 8. Service template picker — mobile ───────────────────────────────── */
@media (max-width: 640px) {
  .tpl-grid { grid-template-columns: 1fr; gap: 12px; }
  .tpl-blank-card { flex-direction: column; align-items: flex-start; }
}

/* ── 9. Modal plein écran (template preview) — mobile ─────────────────── */
@media (max-width: 640px) {
  .modal-fullscreen {
    border-radius: 0;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
  }
  .modal-fullscreen-header { padding: 12px 14px; }
  .modal-fullscreen-body { padding: 16px; }
  .modal-fullscreen-footer { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .modal-fullscreen-footer .btn-primary,
  .modal-fullscreen-footer .btn-secondary { width: 100%; justify-content: center; }
}

/* ── 10. Page profil prestataire — mobile ──────────────────────────────── */
@media (max-width: 640px) {
  .public-profile-cover { min-height: 140px; }
  .public-profile-header { padding: 0 14px 20px; }
  .public-profile-avatar-wrap { width: 72px; height: 72px; }
  .public-profile-name { font-size: 1.3rem; }
  .public-profile-headline { font-size: 13px; }
  .public-profile-services-grid { grid-template-columns: 1fr; }
  /* Le padding horizontal est déjà porté par .public-profile-inner */
  .public-profile-body { padding: 0 0 36px; }
}

/* ── 11. Page service (détail) — mobile ────────────────────────────────── */
@media (max-width: 640px) {
  .service-detail-section { padding: 0 14px 40px; }
  .service-detail-sidebar-card { padding: 16px; }
  .service-detail-price { font-size: 1.6rem; }
  .service-detail-carousel { aspect-ratio: 4/3; }
  .service-plan-tabs { overflow-x: auto; white-space: nowrap; }
}

/* ── 12. Inbox & Messagerie — mobile ───────────────────────────────────── */
@media (max-width: 768px) {
  .inbox-layout {
    grid-template-columns: 1fr !important;
  }
  .conversation-list-col {
    border-right: none;
    border-bottom: 1px solid var(--tg-border);
  }
}

@media (max-width: 640px) {
  .chat-header { padding: 10px 14px; }
  .chat-messages { padding: 12px; }
  .chat-composer { padding: 10px 12px; }
  .chat-msg-body { font-size: 14px; }
  .chat-msg { max-width: 88%; }
}

/* ── 13. Page recherche — mobile ───────────────────────────────────────── */
@media (max-width: 640px) {
  .search-sidebar {
    padding: 14px;
  }
  .search-results-grid {
    grid-template-columns: 1fr !important;
  }
  .search-header { padding-top: 12px; }
}

/* ── 14. Footer — mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 24px max(16px, env(safe-area-inset-left, 0px)) 24px max(16px, env(safe-area-inset-right, 0px));
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
  }
  .footer-links a { font-size: 13px; }
  .site-footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

/* ── 15. Alertes et bannières — mobile ────────────────────────────────── */
@media (max-width: 640px) {
  .profile-incomplete-alert { padding: 10px 14px; }
  .profile-incomplete-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-messages { padding: 0 12px; }
  .site-message { padding: 12px 14px; font-size: 13.5px; }
}

/* ── 16. Compte dashboard — mobile ────────────────────────────────────── */
@media (max-width: 640px) {
  .dashboard-header { margin-bottom: 18px; }
  .dashboard-title { font-size: 1.4rem; }
  .dashboard-quick-actions { flex-direction: column; gap: 10px; }
  .dashboard-quick-actions .btn-primary,
  .dashboard-quick-actions .btn-secondary { width: 100%; }

  .provider-dashboard-grid { grid-template-columns: 1fr !important; }
  .client-dashboard-grid  { grid-template-columns: 1fr !important; }
}

/* ── 17. Commande détail / checkout — mobile ───────────────────────────── */
@media (max-width: 640px) {
  .commande-detail-grid { grid-template-columns: 1fr !important; }
  .commande-detail-sidebar { position: static !important; }
  .checkout-payment-methods { flex-direction: column; gap: 10px; }
  .checkout-payment-btn { width: 100%; }
  .payment-recap { padding: 16px; }
}

/* ── 18. Notifications — mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .notif-item { padding: 12px 14px; gap: 10px; }
  .notif-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .notif-text { font-size: 13.5px; }
}

/* ── 19. KYC & Wallet — mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .kyc-status-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wallet-balance-card { padding: 20px; }
  .wallet-balance-amount { font-size: 2rem; }
  .wallet-transactions { padding: 0; }
  .wallet-tx-row { padding: 12px 0; flex-wrap: wrap; }
}

/* ── 20. Page aide — mobile ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .help-layout { grid-template-columns: 1fr !important; }
  .help-nav { position: static !important; }
  .help-nav-links { flex-direction: row; overflow-x: auto; white-space: nowrap; gap: 4px; }
}

/* ── 21. Dropdown menus — mobile ──────────────────────────────────────── */

/* Backdrop du tiroir compte */
.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 599;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.nav-drawer-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Header du tiroir */
.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--tg-border);
  margin-bottom: 6px;
  position: sticky;
  top: 0;
  background: var(--tg-surface-elevated);
  z-index: 1;
}
.nav-drawer-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--tg-border);
  background: transparent;
  color: var(--tg-white-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.nav-drawer-close:hover {
  background: var(--tg-border);
  color: var(--tg-white);
}

/* ── Compte dropdown → tiroir depuis la gauche sur mobile ──
   Le menu est téléporté sous <body> par JS pour échapper au
   stacking context créé par backdrop-filter sur .site-header.
   On cible donc #account-dropdown-menu directement.          ── */
@media (max-width: 768px) {
  #account-dropdown-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: min(300px, 88vw);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    min-width: 0;
    border-radius: 0 20px 20px 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 max(24px, env(safe-area-inset-bottom, 24px));
    box-shadow: 6px 0 48px rgba(0, 0, 0, 0.5);
    z-index: 600;
    transform: translateX(-110%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease, visibility 0.3s;
  }
  #account-dropdown-menu.is-open {
    transform: translateX(0);
  }
  #account-dropdown-menu .dropdown-item {
    padding: 15px 20px;
    font-size: 15px;
    border-radius: 0;
  }
  #account-dropdown-menu .dropdown-divider {
    margin: 4px 0;
  }
}

/* ── Lang et profil anon → bottom-sheet léger ── */
@media (max-width: 540px) {
  .lang-dropdown .dropdown-menu,
  .profile-dropdown .dropdown-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    border-radius: 16px 16px 0 0;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 500;
    padding: 12px 0 env(safe-area-inset-bottom, 20px);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.2s;
  }
  .lang-dropdown .dropdown-menu.is-open,
  .profile-dropdown .dropdown-menu.is-open {
    transform: translateY(0);
  }
  .lang-dropdown .dropdown-menu .dropdown-item,
  .profile-dropdown .dropdown-menu .dropdown-item {
    padding: 14px 20px;
    font-size: 15px;
  }
}

/* ── 22. Email verify banner & auth pages — petit écran ─────────────────  */
@media (max-width: 500px) {
  .auth-page-card { padding: 28px 16px 24px; }
  .email-verify-banner { flex-direction: column; align-items: flex-start; padding: 10px 14px; }
  .email-verify-close { margin-left: 0; align-self: flex-end; margin-top: 2px; }
}

/* ── 23. Utilitaires généraux ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Empêche le débordement dans les grilles complexes */
  [class*="-grid"],
  [class*="-layout"],
  [class*="-row"]:not(.form-row) {
    min-width: 0;
  }

  /* Texte tronqué adapté */
  .text-truncate-mobile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Boutons pleine largeur sur mobile */
  .btn-block-mobile {
    display: flex;
    width: 100%;
  }

  /* Espacement section réduit (pas .services-section : l’accueil gère le padding via .section-inner) */
  .section {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
}

/* Marges négatives (recherche) : dernier mot pour éviter tout scroll horizontal */
@media (max-width: 768px) {
  .search-quick-filters {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Padding sécurité iOS (safe-area) */
.site-main {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ==========================================================================
   MOBILE FIRST — Correctifs responsive smartphone (90 % des utilisateurs)
   Accueil + Page de résultats de recherche (SRP)
   ========================================================================== */

/* ── 1. Comment ça marche : 2 colonnes sur tablette avant de passer à 1 ── */
@media (min-width: 541px) and (max-width: 900px) {
  .how-it-works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 2. Accueil : espacement vertical des sections réduit sur smartphone ── */
@media (max-width: 480px) {
  /* Sections principales */
  .services-section { padding-top: 32px; padding-bottom: 40px; }
  .explore-domains  { padding-top: 28px; padding-bottom: 36px; }
  .category-spotlight { padding-top: 28px; padding-bottom: 36px; }

  /* Section témoignages : vertical + horizontal */
  .testimonials {
    padding-top: 28px;
    padding-bottom: 36px;
    /* horizontal déjà à 16px dans le bloc 480px existant */
  }

  /* Section confiance (logos) */
  .trust-section {
    padding-top: 24px;
    padding-bottom: 32px;
    /* horizontal déjà à 16px dans le bloc 480px existant */
  }

  /* CTA : réduction du bas */
  .section-cta-block { padding-bottom: 40px; }

  /* En-tête de section (titre + sous-titre) : moins d'espace sous le titre */
  .section-header { margin-bottom: 28px; }

  /* Témoignage unique : padding réduit */
  .testimonial-card { padding: 20px; }

  /* Tagline hero très petits écrans */
  .hero-tagline { font-size: 1rem; }
  .hero-trust-line { font-size: 0.875rem; }
}

/* ── 3. Très petits écrans (≤ 390 px) : hero pills plus compactes ── */
@media (max-width: 390px) {
  .hero-quick-searches a {
    padding: 7px 13px;
    font-size: 13px;
  }
  .hero-badge {
    font-size: 11px;
    padding: 6px 12px;
  }
  .hero-trust-line { display: none; } /* masqué pour gagner de la place */
}

/* ── 4. SRP : barre de recherche sur très petits écrans ── */
@media (max-width: 480px) {
  /* Supprime le min-width pour éviter le débordement */
  .srp-searchbar-wrap { min-width: 0; }

  /* Bouton "Rechercher" plus compact */
  .srp-searchbar-btn {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* ── 5. SRP : topbar / pills inner padding sur 360 px ── */
@media (max-width: 380px) {
  .srp-topbar-inner,
  .srp-pills-bar-inner,
  .srp-body-inner {
    padding-left: 10px;
    padding-right: 10px;
  }
  .srp-grid { gap: 10px; }
}

/* ── 6. Review dimensions : ajustement grille label+bar sur petits écrans ── */
@media (max-width: 480px) {
  .review-dimensions { min-width: 0; }
  .review-dim-row {
    grid-template-columns: 90px 1fr 26px;
    font-size: 0.78rem;
  }
}

/* ── 7. Sections home sans padding propre : réduit sur phone ── */
@media (max-width: 480px) {
  .featured-providers-section { padding-top: 32px; padding-bottom: 40px; }
  .trending-section { padding-top: 32px; padding-bottom: 40px; }
  .how-it-works-section { padding-top: 32px; padding-bottom: 40px; }
  .provider-card-home { padding: 16px 14px 12px; }
}

/* ── 8. Section "Vous aimerez aussi" (SRP) : espacement réduit ── */
@media (max-width: 480px) {
  .srp-youmightlike-section {
    margin-top: 28px;
    padding-top: 20px;
  }
}

/* ── 9. Grille services profil public : 1 colonne sur 480 px ── */
@media (max-width: 480px) {
  .public-profile-services-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 10. Barre de pills SRP : toujours en scroll horizontal, jamais en wrap ── */
/* flex-wrap: nowrap permet le défilement horizontal via le parent srp-pills-bar */
.srp-pills { flex-wrap: nowrap; }

.site-header {
  padding-top: env(safe-area-inset-top, 0);
}

/* Scroll horizontal natif sur les listes de tags/pills */
.search-quick-pills,
.categories-pills,
.skills-pills {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.search-quick-pills > *,
.categories-pills > *,
.skills-pills > * {
  scroll-snap-align: start;
}

/* ── Impression : cacher éléments inutiles ─────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .compte-nav,
  .email-verify-banner,
  .profile-incomplete-alert { display: none; }
  .compte-layout { grid-template-columns: 1fr; }
  body { color: #000; background: #fff; }
}

/* ── Modal inscription — erreurs, succès, champs ───────────────────────── */

/* Erreurs globales dans le modal */
.signup-errors {
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #fca5a5;
  font-size: 13.5px;
  line-height: 1.5;
}
.signup-errors p { margin: 0 0 4px; }
.signup-errors p:last-child { margin: 0; }

/* Erreur sous un champ */
.form-field-error {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: #f87171;
  line-height: 1.4;
}

/* Input en état d'erreur */
.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .2) !important;
}

/* Ligne nom / prénom côte à côte */
.signup-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .signup-name-row { grid-template-columns: 1fr; gap: 0; }
}

/* Vue succès */
.signup-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(20, 184, 166, .12);
  color: var(--tg-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.signup-success-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 0;
  text-align: left;
}

.signup-success-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--tg-muted-light);
  line-height: 1.5;
}

.signup-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(20, 184, 166, .15);
  color: var(--tg-teal);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTEUR DE RECHERCHE AVANCÉ — Autocomplete, Filtres sauvegardés, You Might Like
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Autocomplete dropdown ── */
.srp-autocomplete {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  z-index: 200;
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.srp-autocomplete::-webkit-scrollbar { width: 4px; }
.srp-autocomplete::-webkit-scrollbar-thumb { background: var(--tg-border); border-radius: 2px; }

.srp-ac-group { padding: 8px 0 4px; }
.srp-ac-group + .srp-ac-group { border-top: 1px solid var(--tg-border); }
.srp-ac-group-label {
  padding: 0 14px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tg-muted);
}
.srp-ac-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--tg-text);
  text-decoration: none;
  transition: background .12s;
  cursor: pointer;
}
.srp-ac-item:hover, .srp-ac-item:focus { background: var(--tg-hover); outline: none; }
.srp-ac-item--syn { color: var(--tg-teal); font-style: italic; }
.srp-ac-icon { font-size: 15px; }
.srp-ac-sub { margin-left: auto; font-size: 11px; color: var(--tg-muted); white-space: nowrap; }

/* Wrapper relatif pour le dropdown */
#srp-searchbar-wrap { position: relative; flex: 1; }

/* ── Filtres sauvegardés ── */
.srp-saved-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tg-border);
}
.srp-saved-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.srp-saved-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.srp-save-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tg-teal);
  background: none;
  border: 1px solid var(--tg-teal);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.srp-save-btn:hover { background: rgba(20,184,166,.1); }

.srp-saved-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.srp-saved-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  transition: background .12s;
}
.srp-saved-item:hover { background: var(--tg-hover); }
.srp-saved-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  font-size: 13px;
  color: var(--tg-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srp-saved-delete {
  background: none;
  border: none;
  color: var(--tg-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.srp-saved-delete:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.srp-saved-empty { font-size: 12px; color: var(--tg-muted); margin: 4px 0 0; }

/* Popup sauvegarder */
.srp-save-popup {
  margin-top: 10px;
  padding: 12px;
  background: var(--tg-bg);
  border: 1px solid var(--tg-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.srp-save-popup-actions {
  display: flex;
  gap: 8px;
}
.srp-save-popup-actions .btn-primary,
.srp-save-popup-actions .btn-secondary {
  flex: 1;
  font-size: 13px;
  padding: 7px 12px;
}

/* ── Vous aimerez aussi ── */
.srp-youmightlike-section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--tg-border);
}
.srp-youmightlike-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--tg-text);
  margin: 0 0 4px;
}
.srp-youmightlike-title svg { color: #ec4899; }
.srp-youmightlike-sub {
  font-size: 13px;
  margin: 0 0 16px;
}

/* ── Responsive autocomplete ── */
@media (max-width: 540px) {
  .srp-autocomplete {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    border-bottom: none;
  }
  .srp-saved-section { margin-top: 16px; padding-top: 14px; }
  .srp-youmightlike-title { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SRP — Design amélioré grille 4 colonnes + sidebar drawer
   ═══════════════════════════════════════════════════════════════════════════ */

/* Résultats : hint synonymes */
.srp-synonym-hint {
  font-size: 12px;
  color: var(--tg-muted);
  font-style: italic;
  margin-left: 4px;
}

/* Résultats count + titre */
.srp-results-title {
  font-size: 1.25rem;
  margin: 0 0 4px;
}
.srp-results-count {
  font-size: 13px;
  color: var(--tg-muted);
  margin: 0;
}
.srp-results-count strong { color: var(--tg-teal-light); }

body.srp-page-light .srp-results-count { color: #64748b; }
body.srp-page-light .srp-results-count strong { color: #0d9488; }
body.srp-page-light .srp-synonym-hint { color: #94a3b8; }

/* Carte : layout compact pour 4 colonnes */
.srp-card-body {
  padding: 14px 14px 12px;
}
.srp-card-title {
  font-size: 0.9375rem;
  line-height: 1.4;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.srp-card-title a {
  text-decoration: none;
  color: var(--tg-text);
}

/* Thumbnail ratio compact */
.srp-card-thumb {
  aspect-ratio: 16 / 9;
}

/* Badge niveau sur la carte */
.srp-card-level-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  line-height: 1.4;
}
body.srp-page-light .srp-card-level-badge { background: rgba(255,255,255,.85); color: #0f172a; }

/* Barre de scroll pills plus fluide */
.srp-pills-bar {
  scrollbar-width: none;
}
.srp-pills-bar::-webkit-scrollbar { display: none; }

/* Sidebar : séparation des sections du formulaire */
.srp-sidebar-inner .srp-filter-group {
  padding-top: 16px;
}
.srp-sidebar-inner .srp-filter-toggles {
  padding-top: 16px;
}

/* Desktop : largeur max de la sidebar */
@media (min-width: 901px) {
  .srp-sidebar {
    width: min(300px, 92vw);
  }
}

/* Résultats : main prend toute la largeur */
.srp-main {
  width: 100%;
}

/* Mobile : cartes — titre encore plus compact */
@media (max-width: 540px) {
  .srp-card-title {
    font-size: 0.8125rem;
  }
  .srp-card-body {
    padding: 10px 10px 8px;
  }
  .srp-card-provider {
    font-size: 11px;
  }
  .srp-card-price {
    font-size: 12px;
  }
  .srp-results-title {
    font-size: 1.125rem;
  }
  .srp-results-head {
    margin-bottom: 14px;
  }
}

/* ==========================================================================
   Bannière consentement cookies (RGPD-friendly)
   ========================================================================== */

.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  padding: max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}

.cookie-consent-banner[hidden] {
  display: none !important;
}

.cookie-consent-banner__inner {
  pointer-events: auto;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 20px 22px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--tg-border);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(20, 184, 166, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cookie-consent-banner__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg-white);
}

.cookie-consent-banner__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tg-muted-light);
  max-width: 640px;
}

.cookie-consent-banner__desc a {
  color: var(--tg-teal-light);
  font-weight: 600;
  white-space: nowrap;
}

.cookie-consent-banner__manage {
  margin: 12px 0 0;
  font-size: 0.8125rem;
}

.cookie-consent-banner__linklike {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--tg-teal-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cookie-consent-banner__linklike:hover {
  color: var(--tg-white);
}

.cookie-consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-consent-banner__noscript {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--tg-muted);
  pointer-events: auto;
}

.cookie-consent-banner__noscript a {
  color: var(--tg-teal-light);
}

@media (max-width: 540px) {
  .cookie-consent-banner__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    border-radius: 12px 12px 0 0;
  }

  .cookie-consent-banner__actions .btn-sm {
    flex: 1;
    justify-content: center;
  }
}

/* ==========================================================================
   ComeUp-style refinements — search & providers
   ========================================================================== */

/* ── Page backgrounds ── */
body.srp-page-light .srp-body { background: #f2f4f7; }
body.srp-page-light .srp-body-inner { padding-top: 24px; }

/* ── Card service : provider row plus compact ── */
body.srp-page-light .srp-card-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
body.srp-page-light .srp-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.srp-page-light .srp-card-provider-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.srp-page-light .srp-card-provider {
  padding-bottom: 6px;
}

/* ── Card service : rating + tags plus nets ── */
body.srp-page-light .srp-card-rating {
  font-size: 12.5px;
  color: #334155;
  gap: 3px;
}
body.srp-page-light .srp-stars { font-size: 13px; }
body.srp-page-light .srp-rating-val { font-weight: 700; color: #1e293b; }
body.srp-page-light .srp-rating-count { color: #94a3b8; font-size: 12px; }

/* ── Card footer propre ── */
body.srp-page-light .srp-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  align-items: center;
}
body.srp-page-light .srp-card-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.srp-page-light .srp-price-from {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
}
body.srp-page-light .srp-price-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0d9488;
  line-height: 1;
}
body.srp-page-light .srp-price-currency {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  align-self: flex-end;
  padding-bottom: 2px;
}

/* ── Sidebar sticky : fond blanc, séparateurs propres ── */
@media (min-width: 1024px) {
  body.srp-page-light .srp-sidebar {
    border-color: #e2e8f0;
    box-shadow: 0 1px 6px rgba(15,23,42,0.05);
  }
  body.srp-page-light .srp-sidebar-topbar {
    border-bottom-color: #f1f5f9;
  }
  body.srp-page-light .srp-filter-group + .srp-filter-group {
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
    padding-top: 4px;
  }
}

/* ── Providers page : grille + fond ── */
body.providers-page-light .providers-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
  body.providers-page-light .providers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  body.providers-page-light .providers-grid {
    grid-template-columns: 1fr;
  }
}

/* ── pcard light : avatar border propre ── */
body.providers-page-light .pcard-avatar {
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}
body.providers-page-light .pcard-avatar-initial {
  box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}
body.providers-page-light .pcard-badge--verified {
  background: rgba(13,148,136,0.12);
  color: #0d9488;
}
body.providers-page-light .pcard-badge--premium {
  background: rgba(250,204,21,0.15);
  color: #b45309;
}
body.providers-page-light .pcard-fav-btn {
  color: #94a3b8;
  background: transparent;
  border: 1px solid #e2e8f0;
}
body.providers-page-light .pcard-fav-btn:hover {
  color: #ef4444;
  border-color: #fca5a5;
  background: #fff1f2;
}
body.providers-page-light .pcard-fav-btn.is-favorited {
  color: #ef4444;
  border-color: #fca5a5;
  background: #fff1f2;
}
body.providers-page-light .pcard-rating {
  color: #f59e0b;
}
body.providers-page-light .pcard-rating-count { color: #94a3b8; }
body.providers-page-light .pcard-skill-tag:hover {
  background: rgba(13,148,136,0.15);
  color: #0f766e;
}
body.providers-page-light .pcard-head {
  padding-bottom: 0;
}

/* ── Providers hero light ── */
body.providers-page-light .providers-hero {
  padding: 40px 0 32px;
}
body.providers-page-light .providers-hero-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #0f172a;
}
body.providers-page-light .providers-hero-sub {
  font-size: 1.05rem;
  color: #64748b;
}

/* ── Providers filters bar light ── */
body.providers-page-light .providers-filters {
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 28px;
}
body.providers-page-light .filter-input,
body.providers-page-light .filter-select {
  border-radius: 8px;
}

/* ── srp-pchip light (provider strip in search) ── */
body.srp-page-light .srp-pstrip-section {
  background: #fff;
  border-radius: 16px;
  padding: 20px 20px 16px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 1px 6px rgba(15,23,42,0.04);
  margin-bottom: 28px;
}
body.srp-page-light .srp-pchip {
  background: #f8fafc;
  border-color: #e8ecf0;
}
body.srp-page-light .srp-pchip:hover {
  background: #fff;
  border-color: rgba(13,148,136,0.35);
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}
body.srp-page-light .srp-pchip-name { color: #0f172a; }
body.srp-page-light .srp-pchip-desc { color: #64748b; }

/* ==========================================================================
   Profil prestataire public — refonte v2 (marketplace premium)
   ========================================================================== */

body.public-provider-profile {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(20, 184, 166, 0.14) 0%, transparent 55%),
    var(--tg-black);
}

.public-profile-page--v2 {
  padding-bottom: 80px;
}

.public-profile-page--v2 .public-profile-inner {
  padding-top: 0;
}

.public-profile-page--v2 .public-profile-hero {
  margin-left: -24px;
  margin-right: -24px;
  width: calc(100% + 48px);
  position: relative;
}

.public-profile-cover--v2 {
  position: relative;
  min-height: 200px;
  max-height: 300px;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 45%, #0f172a 100%);
}

.public-profile-cover--v2:not(:has(img)) {
  min-height: 180px;
}

.public-profile-cover--v2 img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 300px;
  object-fit: cover;
  display: block;
}

.public-profile-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.1) 0%,
    rgba(15, 23, 42, 0.55) 55%,
    rgba(15, 23, 42, 0.92) 100%
  );
  pointer-events: none;
}

.public-profile-cover-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.06) 48%,
    transparent 56%
  );
  pointer-events: none;
}

.public-profile-page--v2 .public-profile-body {
  margin-top: -56px;
  gap: 28px 36px;
}

.public-profile-card--v2 {
  padding: 28px 26px 26px;
  background: rgba(30, 41, 59, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.15),
    0 24px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (min-width: 901px) {
  .public-profile-sidebar .public-profile-card--v2 {
    position: sticky;
    top: 96px;
  }
}

.public-profile-page--v2 .profile-view-avatar-img {
  width: 88px;
  height: 88px;
  font-size: 2rem;
  border: 3px solid rgba(20, 184, 166, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.public-profile-page--v2 .profile-view-name {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.public-profile-quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 16px 0 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.pp-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pp-stat-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--tg-teal-light);
  letter-spacing: -0.02em;
}

.pp-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tg-muted);
}

.pp-stat--location {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  flex-basis: 100%;
}

.pp-stat-value--icon {
  color: var(--tg-muted-light);
  flex-shrink: 0;
  margin-top: 1px;
}

.pp-stat--location .pp-stat-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tg-white-soft);
}

.public-profile-section--v2,
.public-profile-sidebar-section--v2 {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(30, 41, 59, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 26px 28px;
}

.public-profile-sidebar-section--v2 {
  padding: 20px 22px;
}

.profile-section-title--v2 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  position: relative;
}

.profile-section-title--v2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tg-teal), rgba(20, 184, 166, 0.2));
}

.public-profile-services-grid--v2 {
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.public-profile-service-card--v2 {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.public-profile-service-card--v2:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 184, 166, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(20, 184, 166, 0.15);
}

.public-profile-service-card--v2 .public-profile-service-img {
  aspect-ratio: 16 / 10;
}

.public-profile-service-from {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tg-muted);
  margin-right: 4px;
}

.public-profile-page--v2 .reviews-stats-bar {
  background: rgba(15, 23, 42, 0.55);
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

@media (max-width: 900px) {
  .public-profile-page--v2 {
    overflow-x: clip;
  }
  .public-profile-page--v2 .public-profile-hero {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }
  .public-profile-page--v2 .public-profile-body {
    margin-top: -40px;
  }
}

/* ==========================================================================
   Recherche (SRP) — refonte v2
   ========================================================================== */

.srp-layout--v2 {
  position: relative;
}

.srp-topbar--v2 {
  position: relative;
  border-bottom: none;
  padding: 20px 0 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 12px 40px rgba(15, 23, 42, 0.06);
}

body.theme-dark.srp-page-light .srp-topbar--v2 {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

.srp-topbar-glow {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(900px, 90vw);
  height: 120px;
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 184, 166, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.srp-page--v2 .srp-searchbar-wrap {
  border-radius: 999px;
  padding: 4px 18px 4px 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.srp-page--v2 .srp-searchbar-input {
  padding: 14px 0;
  font-size: 16px;
}

.srp-page--v2 .srp-searchbar-btn {
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.srp-pills-bar--v2 {
  background: #fff;
  border-bottom: 1px solid #e8ecf0;
  padding: 14px 0 16px;
}

.srp-pills--v2 {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.srp-pills--v2 .srp-pill {
  scroll-snap-align: start;
  flex-shrink: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  border: 1px solid #e8ecf0;
  background: #f8fafc;
}

.srp-pills--v2 .srp-pill--active {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18) 0%, rgba(13, 148, 136, 0.12) 100%);
  border-color: rgba(13, 148, 136, 0.45);
  color: #0f766e;
}

body.srp-page--v2.srp-page-light .srp-body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(20, 184, 166, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #eef2f7 0%, #f8fafc 32%, #f1f5f9 100%);
}

.srp-results-head--v2 {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 8px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  align-items: flex-end;
}

.srp-results-head--v2 .srp-results-title {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}

body.srp-page-light .srp-pstrip-section.srp-pstrip-section--v2 {
  border: 1px solid #e8ecf0;
  border-bottom: 1px solid #e8ecf0;
  background: #fff;
  border-radius: 18px;
  padding: 18px 18px 14px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.srp-pstrip-section--v2 .srp-section-head {
  margin-bottom: 12px;
}

.srp-pstrip-section--v2 .srp-section-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.srp-grid--v2 {
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.srp-card--v2 {
  border-radius: 18px;
  border: 1px solid #e8ecf0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

body.srp-page-light .srp-card--v2:hover {
  border-color: rgba(13, 148, 136, 0.35);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  transform: translateY(-4px);
}

.srp-card--v2 .srp-card-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 0;
}

.srp-card--v2 .srp-card-body {
  padding: 16px 18px 18px;
  gap: 10px;
}

.srp-card--v2 .srp-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.srp-card--v2 .srp-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.srp-card--v2 .srp-card-cta {
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
}

.srp-card--v2 .srp-card-cta:hover {
  background: #0d9488;
  color: #fff;
}

@media (max-width: 640px) {
  .srp-results-head--v2 {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .srp-page--v2 .srp-searchbar {
    flex-direction: column;
  }
  .srp-page--v2 .srp-searchbar-btn {
    width: 100%;
  }
}

/* ==========================================================================
   RESPONSIVE — passe smartphone complète (safe-area, overflow, grilles)
   ========================================================================== */

@media (max-width: 768px) {
  .site-main {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .header-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .site-subnav-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .public-profile-inner {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  .providers-body {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .service-detail-page {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .srp-results-controls {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }

  .srp-filter-toggle-btn {
    min-height: 44px;
  }

  .pcard-btn-msg {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  /* Hero profil v2 : marges négatives → risque de scroll horizontal */
  .public-profile-page--v2 {
    overflow-x: clip;
  }

  .public-profile-page--v2 .public-profile-hero {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .public-profile-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .public-profile-cover--v2 {
    border-radius: 0 0 16px 16px;
    min-height: 160px;
    max-height: 220px;
  }

  .public-profile-page--v2 .public-profile-body {
    margin-top: -32px;
  }

  .public-profile-card--v2 {
    padding: 20px 16px 18px;
  }

  .public-profile-section--v2,
  .public-profile-sidebar-section--v2 {
    padding: 18px 16px;
  }

  .public-profile-services-grid--v2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Recherche v2 : marges cohérentes avec encoche / barre d’accueil */
  body.srp-page--v2 .srp-topbar-inner,
  body.srp-page--v2 .srp-pills-bar--v2 .srp-pills-bar-inner,
  body.srp-page--v2 .srp-body-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .srp-results-head--v2 {
    padding: 14px 14px;
  }

  .srp-results-head--v2 .srp-results-controls {
    width: 100%;
  }

  .srp-sort-wrap {
    flex: 1;
    min-width: 0;
  }

  .srp-sort-select {
    width: 100%;
    min-height: 44px;
  }

  body.srp-page-light .srp-grid--v2 {
    gap: 14px;
    grid-template-columns: 1fr;
  }

  .srp-pstrip {
    gap: 10px;
    padding-bottom: 8px;
  }

  .srp-pchip {
    flex: 0 0 150px;
  }

  .providers-hero-inner {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  .providers-filters-row .btn-primary,
  .providers-filters-row .btn-ghost {
    min-height: 44px;
  }
}

/* Très petits écrans : une colonne stricte pour la grille SRP classique */
@media (max-width: 380px) {
  .srp-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Onboarding — première connexion post-inscription
   ========================================================================== */

body.onboarding-page {
  background: linear-gradient(135deg, #0a0f1a 0%, #0f1f2e 50%, #0a1628 100%);
  min-height: 100vh;
}

.onboarding-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 60px;
  gap: 0;
}

.onboarding-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.onboarding-logo {
  font-size: 1.6rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.onboarding-logo-tg { color: var(--tg-white); }
.onboarding-logo-gn { color: var(--tg-teal-light); }

.onboarding-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.onboarding-step {
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 500;
  color: var(--tg-muted);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 5px;
}

.onboarding-step.is-done {
  color: var(--tg-teal-light);
  background: rgba(20, 184, 166, 0.12);
}

.onboarding-step.is-active {
  color: var(--tg-white);
  background: rgba(20, 184, 166, 0.2);
  border: 1px solid rgba(20, 184, 166, 0.3);
}

.onboarding-step-sep {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--tg-border);
}

.onboarding-card {
  width: 100%;
  max-width: 480px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}

.onboarding-card-header {
  padding: 32px 32px 24px;
  text-align: center;
  border-bottom: 1px solid var(--tg-border);
  background: linear-gradient(180deg, rgba(20,184,166,0.06) 0%, transparent 100%);
}

.onboarding-wave-icon {
  display: inline-flex;
  margin-bottom: 12px;
}

.onboarding-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tg-white);
  margin: 0 0 10px;
  line-height: 1.3;
}

.onboarding-subtitle {
  font-size: 14px;
  color: var(--tg-muted-light);
  margin: 0;
  line-height: 1.5;
}

.onboarding-subtitle strong {
  color: var(--tg-teal-light);
}

.onboarding-messages {
  padding: 0 24px;
  margin-top: 16px;
}

.onboarding-msg {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 8px;
}

.onboarding-msg--error { background: rgba(220,38,38,0.1); color: #fca5a5; border: 1px solid rgba(220,38,38,0.25); }
.onboarding-msg--success { background: rgba(20,184,166,0.1); color: var(--tg-teal-light); border: 1px solid rgba(20,184,166,0.25); }
.onboarding-msg--info { background: rgba(99,102,241,0.1); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.25); }
.onboarding-msg--warning { background: rgba(250,204,21,0.1); color: var(--tg-yellow); border: 1px solid rgba(250,204,21,0.25); }

.onboarding-form {
  padding: 28px 32px;
}

/* Avatar upload (onboarding) */
.onboarding-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.onboarding-avatar-ring {
  position: relative;
  width: 88px;
  height: 88px;
}

.onboarding-avatar-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--tg-teal);
  background: var(--tg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.onboarding-avatar-initial {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tg-teal-light);
  line-height: 1;
}

.onboarding-avatar-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tg-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--tg-surface-elevated);
  transition: background var(--transition), transform var(--transition);
}

.onboarding-avatar-btn:hover {
  background: var(--tg-teal-dark);
  transform: scale(1.1);
}

.onboarding-avatar-hint {
  font-size: 12px;
  color: var(--tg-muted);
  margin: 0;
}

/* Fields */
.onboarding-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.onboarding-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.onboarding-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onboarding-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--tg-muted-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.onboarding-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--tg-muted);
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 999px;
}

.onboarding-field-icon-wrap {
  position: relative;
}

.onboarding-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tg-muted);
  pointer-events: none;
}

.input-field--with-icon {
  padding-left: 36px !important;
}

/* Perks */
.onboarding-perks {
  background: rgba(20, 184, 166, 0.06);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 24px;
}

.onboarding-perks-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-muted-light);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.onboarding-perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.onboarding-perks-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--tg-white-soft);
  line-height: 1.4;
}

.onboarding-perks-list li svg {
  color: var(--tg-teal-light);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Actions */
.onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-btn-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.onboarding-btn-skip {
  background: none;
  border: none;
  color: var(--tg-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  padding: 8px;
  transition: color var(--transition);
}

.onboarding-btn-skip:hover {
  color: var(--tg-muted-light);
}

.onboarding-footer-note {
  margin-top: 20px;
  font-size: 12px;
  color: var(--tg-muted);
  text-align: center;
}

.onboarding-footer-note a {
  color: var(--tg-teal-light);
}

@media (max-width: 520px) {
  .onboarding-card-header { padding: 24px 20px 20px; }
  .onboarding-form { padding: 24px 20px; }
  .onboarding-field-row { grid-template-columns: 1fr; }
  .onboarding-steps { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================================
   ONBOARDING — Page complétion profil (ob-*)
   Design split : aside gauche + formulaire droit — thème sombre TalentGN
   ============================================================================ */

/* ── Page ─────────────────────────────────────────────────────────────────── */
body.ob-page {
  background: #060d1a;
  min-height: 100vh;
}

.ob-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 360px 1fr;
}

/* ── Aside gauche ─────────────────────────────────────────────────────────── */
.ob-aside {
  background: linear-gradient(180deg, #0c1a2e 0%, #0a1220 100%);
  border-right: 1px solid rgba(255,255,255,.07);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ob-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 48px;
}
.ob-logo-talent { color: #fff; }
.ob-logo-gn { color: var(--tg-teal-light); }

.ob-aside-body { flex: 1; }

.ob-aside-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
}
.ob-aside-sub {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 32px;
  line-height: 1.6;
}

/* Avantages */
.ob-benefits {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ob-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ob-benefit-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(20,184,166,.1);
  border: 1px solid rgba(20,184,166,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--tg-teal-light);
}
.ob-benefit strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 3px;
}
.ob-benefit p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.ob-aside-footer {
  font-size: 12px;
  color: #475569;
  margin-top: 40px;
}
.ob-aside-footer a { color: var(--tg-teal-light); text-decoration: none; }
.ob-aside-footer a:hover { text-decoration: underline; }

/* ── Main (formulaire) ────────────────────────────────────────────────────── */
.ob-main {
  background: #080e1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  min-height: 100vh;
}

/* Étapes */
.ob-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
}
.ob-step {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ob-step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.12);
  color: #64748b;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ob-step-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #475569;
}
.ob-step--done .ob-step-dot {
  background: rgba(20,184,166,.15);
  border-color: rgba(20,184,166,.4);
  color: var(--tg-teal-light);
}
.ob-step--done .ob-step-label { color: var(--tg-teal-light); }
.ob-step--active .ob-step-dot {
  background: var(--tg-teal);
  border-color: var(--tg-teal);
  color: #fff;
}
.ob-step--active .ob-step-label { color: #e2e8f0; font-weight: 600; }
.ob-step-line {
  width: 40px; height: 1.5px;
  background: rgba(255,255,255,.08);
  margin: 0 4px;
  flex-shrink: 0;
}
.ob-step-line--done { background: rgba(20,184,166,.35); }

/* Card formulaire */
.ob-card {
  width: 100%;
  max-width: 480px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ob-card-header {
  padding: 28px 32px 0;
  text-align: center;
}
.ob-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0 0 6px;
}
.ob-card-sub {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
}
.ob-card-sub strong { color: var(--tg-teal-light); font-weight: 600; }

/* Alertes */
.ob-alerts {
  padding: 0 28px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.ob-alert--error   { background: rgba(220,38,38,.1);  border: 1px solid rgba(220,38,38,.25);  color: #fca5a5; }
.ob-alert--success { background: rgba(20,184,166,.1); border: 1px solid rgba(20,184,166,.25); color: var(--tg-teal-light); }
.ob-alert--warning { background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.2); color: #fde047; }
.ob-alert--info    { background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2);  color: #93c5fd; }
.ob-alert svg { flex-shrink: 0; margin-top: 1px; }

/* Formulaire */
.ob-form {
  padding: 24px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Section avatar ────────────────────────────────────────────────────────── */
.ob-avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
}
.ob-avatar-ring {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
}
.ob-avatar-preview {
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--tg-teal);
  background: rgba(20,184,166,.1);
  display: flex; align-items: center; justify-content: center;
}
.ob-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.ob-avatar-initial {
  font-size: 1.8rem; font-weight: 800;
  color: var(--tg-teal-light);
  line-height: 1;
}
.ob-avatar-label {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--tg-teal);
  border: 2px solid #0f172a;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background .15s, transform .15s;
}
.ob-avatar-label:hover { background: var(--tg-teal-dark); transform: scale(1.1); }
.ob-avatar-hint {
  font-size: 13.5px; font-weight: 600; color: #e2e8f0; margin: 0 0 2px;
}
.ob-avatar-opt {
  font-size: 12px; color: #475569; margin: 0;
}

/* ── Champs ────────────────────────────────────────────────────────────────── */
.ob-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ob-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ob-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
}
.ob-required {
  color: var(--tg-teal-light);
  font-size: 14px;
  line-height: 1;
}
.ob-optional {
  font-size: 11px;
  font-weight: 400;
  color: #475569;
  margin-left: 4px;
}

/* Input avec icône */
.ob-input-wrap {
  position: relative;
}
.ob-input-icon {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: #475569;
  pointer-events: none;
  transition: color .15s;
}
.ob-input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #f1f5f9;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
  box-sizing: border-box;
}
.ob-input::placeholder { color: #334155; }
.ob-input:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.ob-input:focus {
  border-color: var(--tg-teal);
  background: rgba(20,184,166,.05);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
  color: #fff;
}
.ob-input:focus + .ob-input-icon,
.ob-input-wrap:focus-within .ob-input-icon { color: var(--tg-teal-light); }

/* ── Boutons d'action ──────────────────────────────────────────────────────── */
.ob-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.ob-btn-save {
  width: 100%;
  padding: 13px 20px;
  background: var(--tg-teal);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 4px 20px rgba(20,184,166,.25);
}
.ob-btn-save:hover {
  background: var(--tg-teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(20,184,166,.35);
}
.ob-btn-save:active { transform: translateY(0); }
.ob-btn-skip {
  background: none;
  border: none;
  color: #475569;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  padding: 8px;
  transition: color .15s;
}
.ob-btn-skip:hover { color: #94a3b8; }

/* ── Select ──────────────────────────────────────────────────────────────── */
.ob-input-wrap--select {
  position: relative;
}
.ob-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}
.ob-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #64748b;
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
.ob-textarea-wrap {
  position: relative;
}
.ob-textarea {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #f1f5f9;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  min-height: 96px;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
}
.ob-textarea::placeholder { color: #475569; }
.ob-textarea:focus {
  outline: none;
  border-color: rgba(20,184,166,.55);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
  background: rgba(255,255,255,.09);
}

/* ── Field hint ──────────────────────────────────────────────────────────── */
.ob-field-hint {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
}
.ob-field-hint--right {
  text-align: right;
}

/* Note de bas de page */
.ob-bottom-note {
  margin-top: 20px;
  font-size: 12px;
  color: #334155;
  text-align: center;
}
.ob-bottom-note a { color: var(--tg-teal-light); text-decoration: none; }
.ob-bottom-note a:hover { text-decoration: underline; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ob-wrap { grid-template-columns: 1fr; }
  .ob-aside { display: none; }
  .ob-main { padding: 32px 16px 48px; min-height: auto; }
}
@media (max-width: 600px) {
  .ob-steps { gap: 0; }
  .ob-step-line { width: 24px; }
  .ob-step-label { display: none; }
  .ob-step--active .ob-step-label { display: block; }
  .ob-card { border-radius: 14px; }
  .ob-card-header { padding: 22px 20px 0; }
  .ob-card-title { font-size: 1.15rem; }
  .ob-form { padding: 18px 20px 24px; gap: 16px; }
  .ob-field-row { grid-template-columns: 1fr; gap: 16px; }
  .ob-avatar-section { flex-direction: column; text-align: center; padding: 14px; }
  .ob-btn-save { font-size: 14px; padding: 12px 16px; }
}
@media (max-width: 380px) {
  .ob-main { padding: 20px 12px 36px; }
  .ob-card-header { padding: 18px 16px 0; }
  .ob-form { padding: 16px 16px 20px; }
  .ob-input { font-size: 16px; } /* évite zoom iOS */
}

/* ==========================================================================
   Profile — Avatar upload dans la page Modifier mon profil
   ========================================================================== */

.profile-avatar-section .profile-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-section-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--tg-muted);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-avatar-upload-wrap {
  position: relative;
  flex-shrink: 0;
  width: 84px;
  height: 84px;
}

.profile-avatar-upload-preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--tg-border);
  background: var(--tg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition);
}

.profile-avatar-upload-wrap:hover .profile-avatar-upload-preview {
  border-color: var(--tg-teal);
}

.profile-avatar-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.profile-avatar-initial {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--tg-teal-light);
  line-height: 1;
}

.profile-avatar-upload-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tg-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--tg-surface-elevated);
  transition: background var(--transition);
}

.profile-avatar-upload-btn:hover { background: var(--tg-teal-dark); }

.profile-avatar-upload-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-avatar-upload-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--tg-white);
  margin: 0;
}

.profile-avatar-upload-hint {
  font-size: 12px;
  color: var(--tg-muted);
  margin: 0;
  line-height: 1.5;
}

/* Masquer le champ file natif mais garder accessible */
#id_avatar { display: none; }

/* Rappel KYC sur l'édition du profil prestataire */
.profile-kyc-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: var(--radius);
}
.profile-kyc-banner-icon { flex-shrink: 0; color: #60a5fa; margin-top: 2px; }
.profile-kyc-banner-body { flex: 1; min-width: 0; }
.profile-kyc-banner-body strong { display: block; font-size: 13px; margin-bottom: 4px; color: var(--tg-white-soft); }
.profile-kyc-banner-body p { margin: 0; font-size: 13px; line-height: 1.45; }
.profile-kyc-banner-cta { flex-shrink: 0; align-self: center; white-space: nowrap; }
@media (max-width: 620px) {
  .profile-kyc-banner { flex-wrap: wrap; }
  .profile-kyc-banner-cta { width: 100%; justify-content: center; text-align: center; }
}

/* Profile completion bar */
.profile-completion-bar {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.profile-completion-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-muted-light);
  margin-bottom: 10px;
}

.profile-completion-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-teal-light);
}

.profile-completion-track {
  height: 6px;
  background: var(--tg-surface);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.profile-completion-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tg-teal), var(--tg-teal-light));
  border-radius: 999px;
  transition: width 0.6s ease;
}

.profile-completion-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pcc-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--tg-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--tg-border);
}

.pcc-item.is-done {
  color: var(--tg-teal-light);
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.2);
}

.profile-cover-mini {
  padding-top: 4px;
}

/* ==========================================================================
   iOS — prevent auto-zoom on input focus (font-size must be >= 16px)
   ========================================================================== */

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   SRP v2 — Sidebar drawer masquée par défaut sur TOUS les écrans
   (remplace le layout 2 colonnes desktop qui montrait toujours la sidebar)
   ========================================================================== */

/* Annule le grid 2 colonnes du desktop pour la page v2 */
body.srp-page--v2 .srp-body-inner {
  display: block !important;
  padding-top: 24px;
}

/* Sidebar : toujours un drawer fixe, cachée par défaut */
body.srp-page--v2 .srp-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: min(380px, 94vw) !important;
  max-height: none !important;
  z-index: 260 !important;
  background: #fff !important;
  border: none !important;
  border-right: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-shadow: none !important;
}
body.srp-page--v2 .srp-sidebar::-webkit-scrollbar { display: none; }

body.srp-page--v2 .srp-sidebar.is-open {
  transform: translateX(0) !important;
  box-shadow: 12px 0 60px rgba(15, 23, 42, 0.16) !important;
}

/* Toujours afficher le bouton fermer et l'overlay */
body.srp-page--v2 .srp-sidebar-close {
  display: flex !important;
}
body.srp-page--v2 .srp-sidebar-overlay {
  display: block !important;
}

/* Toujours afficher le bouton "Filtres" (masqué par défaut sur desktop) */
body.srp-page--v2 .srp-filter-toggle-btn {
  display: inline-flex !important;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  color: #334155;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
}
body.srp-page--v2 .srp-filter-toggle-btn:hover,
body.srp-page--v2 .srp-filter-toggle-btn.is-active {
  border-color: #0d9488;
  color: #0d9488;
  background: rgba(13, 148, 136, 0.06);
  box-shadow: 0 2px 12px rgba(13, 148, 136, 0.18);
}

/* Le main prend toute la largeur disponible */
body.srp-page--v2 .srp-main {
  width: 100%;
  max-width: 100%;
}

/* Topbar sidebar — thème clair */
body.srp-page--v2 .srp-sidebar-topbar {
  background: #fff;
  border-bottom: 1px solid #e8ecf0;
}
body.srp-page--v2 .srp-sidebar-close {
  color: #64748b;
}
body.srp-page--v2 .srp-sidebar-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}
body.srp-page--v2 .srp-sidebar-title {
  color: #0f172a;
}

/* ==========================================================================
   SRP v2 — Pills bar : scrollbar invisible (Edge / Chrome / Firefox)
   ========================================================================== */

/* La scrollbar de la barre de pills est cachée dans tous les navigateurs */
.srp-pills--v2 {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.srp-pills--v2::-webkit-scrollbar {
  display: none !important;
}

/* Fondu sur la droite pour signaler qu'il y a plus de catégories */
.srp-pills-bar--v2 {
  position: relative;
}
.srp-pills-bar--v2::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  background: linear-gradient(to right, transparent, #fff);
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   SRP v2 — Améliorations visuelles pills / catégories
   ========================================================================== */

/* Pills plus compactes et lisibles */
.srp-pills--v2 .srp-pill {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border-color: #e2e8f0;
  transition: border-color 0.16s, color 0.16s, background 0.16s, box-shadow 0.16s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.srp-pills--v2 .srp-pill:hover {
  border-color: #94a3b8;
  color: #0f172a;
  background: #f1f5f9;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.srp-pills--v2 .srp-pill--active {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(13, 148, 136, 0.08) 100%);
  border-color: #0d9488;
  color: #0d9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.18);
}

/* ==========================================================================
   SRP v2 — REFONTE CARDS (ComeUp-inspired, design premium)
   ========================================================================== */

/* ── Grille : 4 colonnes desktop / 2 tablette / 1 smartphone ─────────── */
body.srp-page--v2 .srp-grid--v2 {
  display: grid;
  grid-template-columns: 1fr;          /* smartphone : 1 colonne */
  gap: 14px;
  margin-top: 4px;
}
@media (min-width: 768px) {
  body.srp-page--v2 .srp-grid--v2 {
    grid-template-columns: repeat(2, 1fr);  /* tablette : 2 colonnes */
    gap: 18px;
  }
}
@media (min-width: 1024px) {
  body.srp-page--v2 .srp-grid--v2 {
    grid-template-columns: repeat(4, 1fr);  /* desktop : 4 colonnes */
    gap: 20px;
  }
}
@media (min-width: 1400px) {
  body.srp-page--v2 .srp-grid--v2 {
    gap: 22px;
  }
}

/* ── Card container ───────────────────────────────────────────────────── */
body.srp-page--v2 .srp-card--v2 {
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.22s ease,
              border-color 0.18s ease;
  cursor: pointer;
  position: relative;
}
body.srp-page--v2 .srp-card--v2:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(15,23,42,.13), 0 4px 12px rgba(15,23,42,.07);
  border-color: rgba(13,148,136,.4);
}

body.srp-page--v2 .srp-card--v2:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.13), 0 0 0 1.5px rgba(13, 148, 136, 0.22);
  border-color: rgba(13, 148, 136, 0.3);
}

/* ── Thumbnail ─────────────────────────────────────────────────────────── */
body.srp-page--v2 .srp-card--v2 .srp-card-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, #f1f5f9 0%, #e8edf3 100%);
}

body.srp-page--v2 .srp-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body.srp-page--v2 .srp-card--v2:hover .srp-card-thumb-img {
  transform: scale(1.07);
}

/* Hover overlay "Voir le service" */
.srp-card-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 148, 136, 0.72) 0%, rgba(15, 23, 42, 0.15) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18px;
  opacity: 0;
  transition: opacity 0.22s ease;
  text-decoration: none;
  z-index: 3;
}

/* Carousel prev/next + dots au-dessus de l’overlay « Voir le service » (sinon clic = fiche) */
body.srp-page--v2 .srp-card-thumb--carousel .srp-carousel-btn,
body.srp-page--v2 .srp-card-thumb--carousel .srp-carousel-dots {
  z-index: 7;
  pointer-events: auto;
}
body.srp-page--v2 .srp-card--v2:hover .srp-card-thumb-overlay {
  opacity: 1;
}
.srp-card-thumb-cta-label {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Badge "Délai de livraison" sur la thumbnail */
.srp-card-delivery-pill {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  z-index: 4;
  line-height: 1.2;
  pointer-events: none;
}

/* Favori — toujours visible en opaque, propre, au-dessus de l'overlay */
body.srp-page--v2 .srp-card--v2 .srp-card-fav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #94a3b8;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: transform 0.18s, color 0.18s, background 0.18s;
  z-index: 5;
}
body.srp-page--v2 .srp-card--v2 .srp-card-fav:hover {
  background: #fff;
  color: #f43f5e;
  transform: scale(1.12);
}
body.srp-page--v2 .srp-card--v2 .srp-card-fav.is-active {
  color: #f43f5e;
  background: #fff5f6;
}

/* Badges featured/premium */
body.srp-page--v2 .srp-card--v2 .srp-badge--featured {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #451a03;
  font-size: 10.5px;
  border-radius: 999px;
  padding: 3px 9px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}
body.srp-page--v2 .srp-card--v2 .srp-badge--premium {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #fff;
  font-size: 10.5px;
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.35);
}

/* ── Card body ─────────────────────────────────────────────────────────── */
body.srp-page--v2 .srp-card--v2 .srp-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* ── Seller row (prestataire) ─────────────────────────────────────────── */
.srp-card-seller {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  min-width: 0;
}
.srp-card-seller:hover .srp-card-seller-name {
  color: #0d9488;
}

.srp-card-seller-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ccfbf1, #a7f3d0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #0d9488;
  border: 1.5px solid #e2e8f0;
}
.srp-card-seller-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.srp-card-seller-name {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  transition: color 0.15s;
}

.srp-card-seller-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.srp-card-seller-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* ── Title ─────────────────────────────────────────────────────────────── */
body.srp-page--v2 .srp-card--v2 .srp-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.srp-page--v2 .srp-card--v2 .srp-card-title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.15s;
}
body.srp-page--v2 .srp-card--v2 .srp-card-title a:hover {
  color: #0d9488;
}

/* ── Card description ──────────────────────────────────────────────────── */
body.srp-page--v2 .srp-card--v2 .srp-card-desc {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Stars rating ──────────────────────────────────────────────────────── */
.srp-card-stars-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
}

/* Étoiles visuelles (superposition empty/filled avec CSS custom property) */
.srp-stars-wrap {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: 14px;
  letter-spacing: 0;
  unicode-bidi: bidi-override;
  direction: ltr;
}
.srp-stars-empty {
  color: #d1d5db;
  display: block;
  white-space: nowrap;
}
.srp-stars-fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f59e0b;
  display: block;
  /* La largeur = (rating / 5) × 100% via CSS custom property --r */
  width: calc(var(--r, 0) / 5 * 100%);
}

.srp-stars-score {
  font-weight: 700;
  color: #f59e0b;
  font-size: 13px;
}
.srp-stars-count {
  color: #94a3b8;
  font-size: 12px;
}

/* ── Footer : prix + commandes ─────────────────────────────────────────── */
.srp-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.srp-card-price-block {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex-shrink: 0;
  min-width: 0;
}
.srp-price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.srp-price-label {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.srp-price-amount {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0d9488;
  letter-spacing: -0.03em;
}
.srp-price-cur {
  font-size: 0.68em;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0;
}
/* Compteur de commandes */
.srp-card-orders {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
}
.srp-card-orders svg { color: #cbd5e1; }

.srp-card-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}
.srp-card-views svg {
  flex-shrink: 0;
  color: #cbd5e1;
}

/* ── Provider strip (bande horizontale de prestataires) ────────────────── */
body.srp-page-light .srp-pstrip-section.srp-pstrip-section--v2 {
  background: linear-gradient(135deg, #f8fafc 0%, #fff 60%);
  border: 1px solid #e8ecf0;
  border-radius: 18px;
  padding: 20px 20px 16px;
  margin-bottom: 26px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

body.srp-page--v2 .srp-pchip {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 20px 14px 16px;
  border-radius: 16px;
  border: 1px solid #e8ecf0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.05);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.srp-page--v2 .srp-pchip:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
  border-color: rgba(13,148,136,.3);
}
/* Avatar centré */
body.srp-page--v2 .srp-pchip-av-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
body.srp-page--v2 .srp-pchip-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #e2e8f0;
}
body.srp-page--v2 .srp-pchip-initial {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg,#0d9488,#0891b2);
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.srp-page--v2 .srp-pchip-dot {
  position: absolute;
  bottom: 3px; right: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}
/* Corps */
body.srp-page--v2 .srp-pchip-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body.srp-page--v2 .srp-pchip-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
body.srp-page--v2 .srp-pchip-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
body.srp-page--v2 .srp-pchip-cat {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(13,148,136,.08);
  color: #0d9488;
  border-radius: 999px;
  padding: 2px 8px;
  margin-top: 2px;
}
body.srp-page--v2 .srp-pchip-headline {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
  margin: 3px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.srp-page--v2 .srp-pchip-foot {
  margin-top: 6px;
}
body.srp-page--v2 .srp-pchip-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
}
body.srp-page--v2 .srp-pchip-rcount {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
}
body.srp-page--v2 .srp-pchip-new {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

/* ── Results head v2 ────────────────────────────────────────────────────── */
body.srp-page--v2 .srp-results-head--v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

body.srp-page--v2 .srp-results-meta .srp-results-title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  margin-bottom: 2px;
}
body.srp-page--v2 .srp-results-meta .srp-results-title em {
  color: #0d9488;
  font-style: normal;
}
body.srp-page--v2 .srp-results-count {
  font-size: 13px;
  color: #64748b;
  font-weight: 400;
}
body.srp-page--v2 .srp-results-count strong {
  font-weight: 700;
  color: #0d9488;
}

/* ── Sort select ────────────────────────────────────────────────────────── */
body.srp-page--v2 .srp-sort-select {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  color: #334155;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 34px 9px 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  transition: border-color 0.15s;
}
body.srp-page--v2 .srp-sort-select:focus {
  border-color: #0d9488;
  outline: none;
}

/* ── Active filters chips ───────────────────────────────────────────────── */
body.srp-page--v2 .srp-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
body.srp-page--v2 .srp-chip {
  background: rgba(13, 148, 136, 0.08);
  border: 1.5px solid rgba(13, 148, 136, 0.3);
  color: #0d9488;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
}
body.srp-page--v2 .srp-chip-remove {
  color: #0d9488;
  opacity: 0.6;
  margin-left: 4px;
  text-decoration: none;
  font-weight: 700;
}
body.srp-page--v2 .srp-chip-remove:hover { opacity: 1; }

/* ── Pagination premium ─────────────────────────────────────────────────── */
body.srp-page--v2 .srp-pagination {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #e8ecf0;
  gap: 8px;
}
body.srp-page--v2 .srp-page-btn {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  padding: 10px 20px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
body.srp-page--v2 .srp-page-btn:hover {
  border-color: #0d9488;
  color: #0d9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.15);
}
body.srp-page--v2 .srp-page-nums {
  display: flex;
  gap: 6px;
  align-items: center;
}
body.srp-page--v2 .srp-page-num {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: all 0.15s;
}
body.srp-page--v2 .srp-page-num:hover {
  border-color: #0d9488;
  color: #0d9488;
}
body.srp-page--v2 .srp-page-num.is-current {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

/* ── Empty state premium ────────────────────────────────────────────────── */
/* ── Empty state – page search V2 ──────────────────────────────────────── */
body.srp-page--v2 .srp-empty {
  text-align: center;
  padding: 64px 24px 48px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e8ecf0;
  max-width: 680px;
  margin: 0 auto;
}

/* Illustration */
body.srp-page--v2 .srp-empty-illus {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

/* Titre */
body.srp-page--v2 .srp-empty-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0 0 10px;
}
body.srp-page--v2 .srp-empty-query {
  color: #0d9488;
}

/* Sous-titre */
body.srp-page--v2 .srp-empty-sub {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Boutons */
body.srp-page--v2 .srp-empty-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
body.srp-page--v2 .srp-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s;
}
body.srp-page--v2 .srp-empty-btn--primary {
  background: #0d9488;
  color: #fff;
}
body.srp-page--v2 .srp-empty-btn--primary:hover {
  background: #0f766e;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(13,148,136,.22);
}
body.srp-page--v2 .srp-empty-btn--ghost {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid #e2e8f0;
}
body.srp-page--v2 .srp-empty-btn--ghost:hover {
  border-color: #0d9488;
  color: #0d9488;
}

/* Catégories */
body.srp-page--v2 .srp-empty-cats-block {
  border-top: 1px solid #f0f4f8;
  padding-top: 28px;
  margin-bottom: 28px;
}
body.srp-page--v2 .srp-empty-cats-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 14px;
}
body.srp-page--v2 .srp-empty-cats-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
body.srp-page--v2 .srp-empty-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: all 0.15s;
}
body.srp-page--v2 .srp-empty-cat-pill:hover {
  border-color: #0d9488;
  color: #0d9488;
  background: rgba(13, 148, 136, 0.06);
  transform: translateY(-1px);
}

/* CTA prestataire */
body.srp-page--v2 .srp-empty-cta-provider {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #f0fdf9 0%, #f8fafc 100%);
  border: 1.5px solid #ccfbf1;
  border-radius: 16px;
  padding: 16px 20px;
  text-align: left;
  margin-top: 12px;
}
body.srp-page--v2 .srp-empty-cta-provider > svg {
  flex-shrink: 0;
  color: #0d9488;
}
body.srp-page--v2 .srp-empty-cta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.srp-page--v2 .srp-empty-cta-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
body.srp-page--v2 .srp-empty-cta-text span {
  font-size: 13px;
  color: #64748b;
}
body.srp-page--v2 .srp-empty-cta-link {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #0d9488;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 16px;
  background: #fff;
  border: 1.5px solid #0d9488;
  border-radius: 999px;
  transition: all 0.15s;
}
body.srp-page--v2 .srp-empty-cta-link:hover {
  background: #0d9488;
  color: #fff;
}
@media (max-width: 480px) {
  body.srp-page--v2 .srp-empty-cta-provider {
    flex-direction: column;
    text-align: center;
  }
  body.srp-page--v2 .srp-empty-cta-text {
    align-items: center;
  }
}

/* Badge pill dans le bouton Filtres */
.srp-filter-badge--pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  background: #0d9488;
  color: #fff;
  border-radius: 999px;
  margin-left: 4px;
}

/* ── Synonym hint ───────────────────────────────────────────────────────── */
body.srp-page--v2 .srp-synonym-hint {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

/* ── Section prestataires / section populaires ──────────────────────────── */
body.srp-page--v2 .srp-popular-section,
body.srp-page--v2 .srp-youmightlike-section {
  margin-top: 40px;
}
body.srp-page--v2 .srp-popular-title,
body.srp-page--v2 .srp-youmightlike-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

/* ── Mobile responsive pour les cards v2 ────────────────────────────────── */
@media (max-width: 540px) {
  body.srp-page--v2 .srp-grid--v2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.srp-page--v2 .srp-card--v2 .srp-card-body {
    padding: 11px 12px 12px;
    gap: 5px;
  }
  body.srp-page--v2 .srp-card--v2 .srp-card-title {
    font-size: 13px;
  }
  .srp-price-amount {
    font-size: 0.95rem;
  }
  body.srp-page--v2 .srp-results-head--v2 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px;
  }
  body.srp-page--v2 .srp-results-controls {
    width: 100%;
    justify-content: space-between;
  }
  body.srp-page--v2 .srp-sort-select {
    flex: 1;
    min-width: 0;
  }
}
@media (max-width: 360px) {
  body.srp-page--v2 .srp-grid--v2 {
    grid-template-columns: 1fr;
  }
}

/* Séparateurs entre groupes de filtres dans le drawer v2 */
body.srp-page--v2 .srp-filter-group + .srp-filter-group {
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
  padding-top: 4px;
}
body.srp-page--v2 .srp-saved-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e8ecf0;
}

/* Icône dans les pills */
.srp-pill-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

/* Grille v2 — définie dans le bloc "REFONTE CARDS" ci-dessus */

/* ==========================================================================
   SRP v2 — SIDEBAR FILTER FORM (design premium, thème clair)
   ========================================================================== */

/* Groupes de filtres */
.srp-fgroup {
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
}
.srp-fgroup:first-child { padding-top: 4px; }
.srp-fgroup:last-of-type { border-bottom: none; }

/* Label de groupe */
.srp-fgroup-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toggle switches */
.srp-ftoggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 0;
}
.srp-ftoggle-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  line-height: 1.3;
}
.srp-favail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  flex-shrink: 0;
}

/* Select */
.srp-fselect {
  width: 100%;
  padding: 10px 34px 10px 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  color: #334155;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.srp-fselect:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
  background-color: #fff;
}

/* Inputs texte/number */
.srp-finput {
  width: 100%;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  color: #334155;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.srp-finput:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
  background-color: #fff;
}
.srp-finput::placeholder { color: #94a3b8; }
.srp-finput--mt { margin-top: 8px; }

/* Price range */
.srp-price-range-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.srp-price-range-wrap .srp-finput {
  flex: 1;
  min-width: 0;
}
.srp-price-sep {
  color: #94a3b8;
  font-weight: 600;
  flex-shrink: 0;
}

/* Budget presets */
.srp-fpresets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.srp-fpreset {
  flex: 1;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
  text-align: center;
}
.srp-fpreset:hover {
  border-color: #0d9488;
  color: #0d9488;
  background: rgba(13, 148, 136, 0.06);
}

/* Delivery radio grid */
.srp-fradio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.srp-fradio {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  user-select: none;
}
.srp-fradio:hover {
  border-color: #94a3b8;
  color: #0f172a;
}
.srp-fradio.is-active {
  background: rgba(13, 148, 136, 0.1);
  border-color: #0d9488;
  color: #0d9488;
}

/* Rating list */
.srp-frating-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.srp-frating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.srp-frating:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.srp-frating.is-active {
  background: rgba(13, 148, 136, 0.06);
  border-color: rgba(13, 148, 136, 0.3);
}
.srp-frating-stars {
  font-size: 14px;
  letter-spacing: 1px;
  /* Couleur dégradée selon --r (0 à 5) via un hack CSS) */
  background: linear-gradient(to right, #f59e0b calc(var(--r, 0) / 5 * 100%), #d1d5db calc(var(--r, 0) / 5 * 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.srp-frating-val {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  margin-left: auto;
}
.srp-frating.is-active .srp-frating-val {
  color: #0d9488;
}

/* Bouton Appliquer */
.srp-fapply-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 13px 20px;
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3);
  transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
}
.srp-fapply-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.38);
}
.srp-fapply-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

/* ==========================================================================
   SRP v2 — DOMAINE GRID (catégories visuelles quand pas de résultats actifs)
   ========================================================================== */

.srp-domain-browse {
  margin-bottom: 32px;
}
.srp-domain-browse-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.srp-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 12px;
}
.srp-domain-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px;
  background: #fff;
  border: 1.5px solid #e8ecf0;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.2s ease;
  min-height: 90px;
}
.srp-domain-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1), 0 0 0 1.5px rgba(13, 148, 136, 0.2);
  border-color: rgba(13, 148, 136, 0.3);
}
.srp-domain-icon {
  font-size: 28px;
  line-height: 1;
  display: block;
}
.srp-domain-default-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(13, 148, 136, 0.08));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d9488;
}
.srp-domain-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  text-align: center;
  line-height: 1.3;
}
.srp-domain-card:hover .srp-domain-name {
  color: #0d9488;
}

/* ==========================================================================
   SRP v2 — TOPBAR SEARCH (version améliorée)
   ========================================================================== */

/* Glow topbar v2 plus prononcé */
body.srp-page--v2 .srp-topbar--v2 {
  padding: 22px 0 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06),
              0 8px 32px rgba(15, 23, 42, 0.05);
}

/* Wrap searchbar avec ombre portée */
body.srp-page--v2 .srp-page--v2 .srp-searchbar-wrap,
body.srp-page--v2 .srp-searchbar-wrap {
  border-radius: 999px;
  padding: 6px 18px 6px 18px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.srp-page--v2 .srp-searchbar-wrap:focus-within {
  border-color: #0d9488;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.12), 0 4px 20px rgba(13, 148, 136, 0.1);
}

/* Bouton recherche */
body.srp-page--v2 .srp-searchbar-btn {
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3);
  transition: transform 0.18s, box-shadow 0.18s;
}
body.srp-page--v2 .srp-searchbar-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4);
}

/* Input recherche */
body.srp-page--v2 .srp-searchbar-input {
  padding: 13px 0;
  font-size: 16px;
  color: #0f172a;
}
body.srp-page--v2 .srp-searchbar-input::placeholder {
  color: #94a3b8;
}

/* ==========================================================================
   SRP v2 — PILLS BAR (finitions premium)
   ========================================================================== */

body.srp-page--v2 .srp-pills-bar--v2 {
  background: #fff;
  border-bottom: 1px solid #edf0f4;
  padding: 12px 0 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}

body.srp-page--v2 .srp-pills--v2 {
  gap: 8px;
  padding-bottom: 2px;
}

body.srp-page--v2 .srp-pills--v2 .srp-pill {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  white-space: nowrap;
  transition: border-color 0.16s, color 0.16s, background 0.16s,
              transform 0.16s, box-shadow 0.16s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.srp-page--v2 .srp-pills--v2 .srp-pill:hover {
  border-color: #94a3b8;
  color: #0f172a;
  background: #f1f5f9;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}
body.srp-page--v2 .srp-pills--v2 .srp-pill--active {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(13, 148, 136, 0.06) 100%);
  border-color: #0d9488;
  color: #0d9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.18);
}

/* Fondu droite de la pills bar */
body.srp-page--v2 .srp-pills-bar--v2::after {
  background: linear-gradient(to right, transparent, #fff 80%);
  width: 72px;
}

/* ==========================================================================
   SRP v2 — BODY BACKGROUND (gradient premium)
   ========================================================================== */

body.srp-page--v2.srp-page-light .srp-body {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(20, 184, 166, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #f2f5f9 0%, #f8fafc 40%, #f2f4f7 100%);
}

body.srp-page--v2 .srp-body-inner {
  padding-top: 28px;
  padding-bottom: 72px;
}

/* ==========================================================================
   SRP v2 — MOBILE FINITIONS
   ========================================================================== */

@media (max-width: 768px) {
  body.srp-page--v2 .srp-body-inner {
    padding: 16px 16px 60px;
  }
  body.srp-page--v2 .srp-domain-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .srp-domain-card {
    padding: 14px 10px;
    min-height: 80px;
  }
  .srp-domain-icon { font-size: 24px; }
  .srp-domain-name { font-size: 11.5px; }
  body.srp-page--v2 .srp-results-head--v2 {
    padding: 14px 14px;
  }
}

@media (max-width: 480px) {
  body.srp-page--v2 .srp-domain-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  body.srp-page--v2 .srp-grid--v2 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body.srp-page--v2 .srp-card--v2 .srp-card-body {
    padding: 10px 11px 12px;
    gap: 5px;
  }
  body.srp-page--v2 .srp-card--v2 .srp-card-title {
    font-size: 12.5px;
    line-height: 1.4;
  }
  .srp-card-seller-name { font-size: 11px; }
  .srp-price-amount { font-size: 0.92rem; }
  body.srp-page--v2 .srp-filter-toggle-btn {
    padding: 9px 14px;
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  body.srp-page--v2 .srp-grid--v2 {
    grid-template-columns: 1fr;
  }
  body.srp-page--v2 .srp-domain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   SRP v2 — AUTOCOMPLETE PREMIUM
   ========================================================================== */

body.srp-page--v2 .srp-autocomplete {
  border-radius: 16px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  margin-top: 6px;
  overflow: hidden;
}
body.srp-page--v2 .srp-ac-group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  padding: 10px 14px 4px;
}
body.srp-page--v2 .srp-ac-item {
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
}
body.srp-page--v2 .srp-ac-item:hover {
  background: #f8fafc;
  color: #0d9488;
}
body.srp-page--v2 .srp-ac-sub {
  color: #94a3b8;
  font-size: 12px;
  margin-left: auto;
}

/* ==========================================================================
   SRP v2 — SAVED SEARCHES section
   ========================================================================== */

body.srp-page--v2 .srp-saved-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.srp-page--v2 .srp-save-btn {
  font-size: 12px;
  font-weight: 600;
  color: #0d9488;
  background: rgba(13, 148, 136, 0.08);
  border: 1.5px solid rgba(13, 148, 136, 0.25);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
body.srp-page--v2 .srp-save-btn:hover {
  background: rgba(13, 148, 136, 0.14);
}
body.srp-page--v2 .srp-saved-link {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
body.srp-page--v2 .srp-saved-link:hover {
  background: #f8fafc;
  color: #0d9488;
}
body.srp-page--v2 .srp-saved-delete {
  color: #cbd5e1;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}
body.srp-page--v2 .srp-saved-delete:hover {
  color: #f43f5e;
  background: #fff1f2;
}

/* ==========================================================================
   SRP v2 — PROVIDER STRIP (pstrip) finitions
   ========================================================================== */

body.srp-page--v2 .srp-pstrip {
  gap: 12px;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.srp-page--v2 .srp-pstrip::-webkit-scrollbar { display: none; }

body.srp-page--v2 .srp-pchip-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
body.srp-page--v2 .srp-pchip-cat {
  font-size: 11px;
  background: rgba(13, 148, 136, 0.08);
  color: #0d9488;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 600;
}
body.srp-page--v2 .srp-pchip-rating {
  font-size: 12.5px;
  font-weight: 700;
  color: #f59e0b;
}
body.srp-page--v2 .srp-pchip-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.srp-page--v2 .srp-section-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.srp-page--v2 .srp-section-more {
  font-size: 13px;
  font-weight: 600;
  color: #0d9488;
  text-decoration: none;
  padding: 6px 12px;
  background: rgba(13, 148, 136, 0.08);
  border-radius: 999px;
  transition: background 0.15s;
}
body.srp-page--v2 .srp-section-more:hover {
  background: rgba(13, 148, 136, 0.14);
}

/* ==========================================================================
   SRP v2 — SAVE POPUP premium
   ========================================================================== */

body.srp-page--v2 .srp-save-popup {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
}
body.srp-page--v2 .srp-save-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
body.srp-page--v2 .srp-save-confirm {
  flex: 1;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
}
body.srp-page--v2 .srp-save-cancel {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  color: #64748b;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  font-family: inherit;
}
body.srp-page--v2 .srp-saved-empty {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  padding: 12px 0 4px;
}

/* ==========================================================================
   SRP v2 — SIDEBAR SCROLLBAR et finitions globales
   ========================================================================== */

/* S'assure que le formulaire de filtres v2 utilise les bons sélecteurs legacy */
/* (fallback pour anciens sélecteurs qui pourraient encore exister) */
body.srp-page--v2 .srp-filter-form { gap: 0; }
body.srp-page--v2 .srp-filter-group { padding: 16px 0; border-bottom: 1px solid #f1f5f9; }
body.srp-page--v2 .srp-filter-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
body.srp-page--v2 .srp-filter-select,
body.srp-page--v2 .srp-filter-input {
  border-radius: 10px;
  font-size: 13.5px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
}
body.srp-page--v2 .srp-filter-select:focus,
body.srp-page--v2 .srp-filter-input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
  background: #fff;
  outline: none;
}
body.srp-page--v2 .srp-budget-preset,
body.srp-page--v2 .srp-delivery-btn,
body.srp-page--v2 .srp-rating-option {
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  cursor: pointer;
  font-family: inherit;
}
body.srp-page--v2 .srp-budget-preset:hover,
body.srp-page--v2 .srp-delivery-btn:hover,
body.srp-page--v2 .srp-rating-option:hover {
  border-color: #94a3b8;
  color: #0f172a;
}
body.srp-page--v2 .srp-delivery-btn.is-active,
body.srp-page--v2 .srp-rating-option.is-active {
  background: rgba(13, 148, 136, 0.1);
  border-color: #0d9488;
  color: #0d9488;
}
body.srp-page--v2 .srp-apply-btn {
  border-radius: 12px;
  padding: 13px 20px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
  margin-top: 8px;
}


/* ============================================================
   SKELETON LOADERS & CARD ENTRANCE ANIMATIONS
   Perceived performance: fade-in stagger on search cards,
   shimmer placeholders during navigation/filter submit.
   ============================================================ */

/* ── Card entrance animation ─────────────────────────────── */
@keyframes srp-card-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.srp-page--v2 .srp-grid--v2 .srp-card--v2 {
  animation: srp-card-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(1)  { animation-delay: 0.03s; }
body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(2)  { animation-delay: 0.07s; }
body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(3)  { animation-delay: 0.11s; }
body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(4)  { animation-delay: 0.15s; }
body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(5)  { animation-delay: 0.18s; }
body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(6)  { animation-delay: 0.21s; }
body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(7)  { animation-delay: 0.24s; }
body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(8)  { animation-delay: 0.27s; }
body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(n+9){ animation-delay: 0.30s; }

/* ── Shimmer keyframe ────────────────────────────────────── */
@keyframes srp-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* ── Skeleton card component ─────────────────────────────── */
.srp-skeleton-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.srp-skeleton-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 50%, #f1f5f9 75%);
  background-size: 600px 100%;
  animation: srp-shimmer 1.4s ease infinite;
}

.srp-skeleton-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.srp-skeleton-avatar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.srp-skeleton-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 50%, #f1f5f9 75%);
  background-size: 600px 100%;
  animation: srp-shimmer 1.4s ease infinite;
  flex-shrink: 0;
}

.srp-skeleton-line {
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 50%, #f1f5f9 75%);
  background-size: 600px 100%;
  animation: srp-shimmer 1.4s ease infinite;
}

.srp-skeleton-line--short { width: 45%; }
.srp-skeleton-line--med   { width: 70%; }
.srp-skeleton-line--long  { width: 90%; }

.srp-skeleton-title {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 50%, #f1f5f9 75%);
  background-size: 600px 100%;
  animation: srp-shimmer 1.4s ease infinite;
}

.srp-skeleton-foot {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid #f1f5f9;
}

.srp-skeleton-pill {
  height: 22px;
  width: 70px;
  border-radius: 99px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 50%, #f1f5f9 75%);
  background-size: 600px 100%;
  animation: srp-shimmer 1.4s ease infinite;
}

/* ── Skeleton grid wrapper ───────────────────────────────── */
.srp-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  padding: 0;
}

/* Skeleton grid is shown by JS when navigating; hidden by default */
.srp-skeleton-grid {
  display: none;
}
.srp-results-wrap.is-loading .srp-skeleton-grid {
  display: grid;
}
.srp-results-wrap.is-loading .srp-grid--v2 {
  visibility: hidden;
  position: absolute;
}

/* ── content-visibility for offscreen cards (beyond first grid row) ── */
body.srp-page--v2 .srp-grid--v2 .srp-card--v2:nth-child(n+9) {
  content-visibility: auto;
  contain-intrinsic-size: 0 380px;
}

/* ── results-wrap transition ─────────────────────────────── */
.srp-results-wrap {
  position: relative;
}


/* ============================================================
   ESPACE ENTREPRISE (company dashboard + profile)
   ============================================================ */

/* ── Company header ── */
.co-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  background: var(--tg-surface-elevated);
  border-radius: 16px;
  border: 1px solid var(--tg-border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.co-header-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }

.co-logo-wrap {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.co-logo-img { width: 100%; height: 100%; object-fit: cover; }
.co-logo-initial {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0d9488;
  letter-spacing: -0.02em;
}

.co-header-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.co-header-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.co-name { font-size: 1.3rem; font-weight: 800; color: var(--tg-white); margin: 0; }
.co-meta { font-size: 13px; color: var(--tg-muted-light); display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }

.co-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}
.co-badge--verified { background: rgba(13,148,136,0.1); color: #0d9488; }
.co-badge--premium { background: rgba(245,158,11,0.12); color: #b45309; }

/* ── Quick actions grid ── */
.co-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.co-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.co-action-card:hover {
  border-color: var(--tg-teal);
  box-shadow: 0 4px 16px rgba(20,184,166,0.12);
  transform: translateY(-2px);
}
.co-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #64748b;
}
.co-action-icon--search { background: rgba(13,148,136,0.1); color: #0d9488; }
.co-action-icon--talents { background: rgba(99,102,241,0.1); color: #6366f1; }
.co-action-icon--requests { background: rgba(245,158,11,0.1); color: #d97706; }
.co-action-icon--messages { background: rgba(59,130,246,0.1); color: #3b82f6; }

.co-action-body { flex: 1; min-width: 0; }
.co-action-title { display: block; font-size: 14px; font-weight: 700; color: var(--tg-white-soft); }
.co-action-desc { display: block; font-size: 12px; color: var(--tg-muted-light); margin-top: 1px; }
.co-action-arrow { color: var(--tg-border); flex-shrink: 0; }

/* ── Requests list ── */
.co-requests-list { display: flex; flex-direction: column; gap: 8px; }
.co-request-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.co-request-row:hover { border-color: var(--tg-teal); background: rgba(20,184,166,0.04); }

.co-request-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--tg-muted-light);
}
.co-request-avatar img { width: 100%; height: 100%; object-fit: cover; }
.co-request-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.co-request-name { font-size: 14px; font-weight: 600; color: var(--tg-white-soft); }
.co-request-subject { font-size: 12px; }
.co-request-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.co-request-date { font-size: 11px; }

/* ── Premium CTA ── */
.co-premium-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(20,184,166,0.07) 0%, rgba(99,102,241,0.07) 100%);
  border: 1px solid rgba(20,184,166,0.2);
  border-radius: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.co-premium-cta-icon {
  font-size: 2rem;
  flex-shrink: 0;
  color: var(--tg-yellow);
}
.co-premium-cta-body { flex: 1; min-width: 200px; }
.co-premium-cta-body h3 { font-size: 15px; font-weight: 700; color: var(--tg-white); margin: 0 0 4px; }

/* ── Company profile form ── */
.co-profile-form .profile-section { background: var(--tg-surface-elevated); border: 1px solid var(--tg-border); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.co-profile-form { max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.co-media-row { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 24px; align-items: start; max-width: 100%; }

.co-logo-field, .co-cover-field { display: flex; flex-direction: column; gap: 10px; }
.profile-section-sublabel { font-size: 12px; font-weight: 600; color: #475569; }

.co-logo-preview {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  background: var(--tg-surface);
  border: 2px dashed var(--tg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--tg-muted);
}
.co-logo-preview img { width: 100%; height: 100%; object-fit: cover; }

.co-cover-preview {
  height: 120px;
  border-radius: 12px;
  background: var(--tg-surface);
  border: 2px dashed var(--tg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--tg-muted);
  font-size: 13px;
  gap: 8px;
}
.co-cover-preview img { width: 100%; height: 100%; object-fit: cover; }

.co-upload-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* hide raw file inputs */
.co-profile-form input[type="file"] { display: none; }

/* ── Activation page ── */
.co-activate-hero {
  text-align: center;
  padding: 40px 24px 32px;
}
.co-activate-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(20,184,166,0.12);
  color: var(--tg-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.co-activate-title { font-size: 1.6rem; font-weight: 800; color: var(--tg-white); margin: 0 0 10px; }
.co-activate-desc { font-size: 15px; color: var(--tg-muted-light); max-width: 480px; margin: 0 auto 20px; }
.co-activate-perks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 4px; }
.co-perk { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--tg-white-soft); }

/* ── Activation form wrapper ── */
.co-activate-form-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ── profile-grid-2 : grille 2 colonnes (desktop) ── */
.profile-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* ── form-control : style unifié pour les champs Django ── */
.form-control {
  width: 100%;
  padding: 11px 14px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-sm, 10px);
  color: var(--tg-white);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--tg-teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
.form-control::placeholder { color: var(--tg-muted); }
select.form-control { cursor: pointer; }
textarea.form-control { min-height: 110px; resize: vertical; }

/* ── form-group dans co-activate-form-wrap ── */
.co-activate-form-wrap .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.co-activate-form-wrap .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-muted-light);
  letter-spacing: 0.01em;
}
.co-activate-form-wrap .form-group .required {
  color: #f87171;
  margin-left: 2px;
}
.co-activate-form-wrap .form-field-error {
  font-size: 12px;
  color: #f87171;
  margin: 2px 0 0;
}

/* Section card du formulaire */
.co-activate-form-wrap .profile-section {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

/* Erreurs globales */
.co-activate-form-wrap .form-errors {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.co-activate-form-wrap .form-error-msg {
  font-size: 13px;
  color: #f87171;
  margin: 0;
}

/* Bouton submit */
.co-activate-form-wrap .btn-primary.btn-block {
  margin-top: 8px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  gap: 8px;
}

/* Nav link company */
.compte-nav-link--company { color: #0d9488 !important; font-weight: 700; }

/* Mobile */
@media (max-width: 600px) {
  .co-header { padding: 16px; }
  .co-logo-wrap { width: 48px; height: 48px; }
  .co-name { font-size: 1.1rem; }
  .co-quick-actions { grid-template-columns: 1fr; }
  .co-media-row { grid-template-columns: 1fr; }
  .profile-grid-2 { grid-template-columns: 1fr; }
  .co-activate-form-wrap { padding: 0 12px 40px; }
  .co-activate-form-wrap .profile-section { padding: 16px; }
  .co-activate-title { font-size: 1.3rem; }
}


/* ============================================================
   RESPONSIVE MOBILE — CORRECTIONS GLOBALES v2
   Audit complet : P0-P3 résolus, 5 breakpoints standards.
   Breakpoints : 480px | 640px | 768px | 900px | 1024px
   ============================================================ */

/* ── CSS custom property hauteur header ── */
:root {
  --header-height: 68px;
}
@media (max-width: 768px) {
  :root { --header-height: 116px; } /* header 2 lignes sur mobile */
}
@media (max-width: 480px) {
  :root { --header-height: 108px; }
}

/* ── Scroll lock quand sidebar ouverte ── */
body.sidebar-open,
body.tg-page-loader-active {
  overflow: hidden;
  touch-action: none;
}

/* ================================================================
   HEADER — Consolidation des règles dispersées
   ================================================================ */
@media (max-width: 768px) {
  .header-inner {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 8px;
  }
  .logo { flex-shrink: 0; }
  .search-form-wrap {
    order: 3;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .header-actions {
    margin-left: auto;
    gap: 4px;
  }
  /* Tous les inputs dans le header ≥ 16px pour éviter zoom iOS */
  .search-form input,
  .hero-search-input {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .header-inner { padding: 8px 12px; gap: 6px; }
  .logo img { height: 34px; }
  .icon-btn { min-width: 40px; min-height: 44px; padding: 0 6px; }
  .icon-btn-talents { display: none !important; }
}

/* ================================================================
   ACCOUNT LAYOUT — Corrections gaps, compte-nav
   ================================================================ */
@media (max-width: 860px) {
  /* Gap between nav and content */
  .compte-layout,
  .compte-inner {
    gap: 0;
  }
  .compte-nav {
    margin-bottom: 20px;
  }
  /* Nav horizontal scroll — touch targets (mode perso seulement) */
  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-links {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-links::-webkit-scrollbar { display: none; }
}

/* ================================================================
   DASHBOARD STATS — Force 1 colonne sous 400px
   ================================================================ */
@media (max-width: 400px) {
  .db-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   MODALS — Bottom sheet sur petits écrans
   ================================================================ */
@media (max-width: 540px) {
  .modal-overlay {
    align-items: flex-end;
  }
  .modal-box {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: min(92dvh, 92vh);
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .modal-box--wide { max-width: 100%; }
}

/* ================================================================
   HOMEPAGE — Sections, cards, hero
   ================================================================ */
@media (max-width: 768px) {
  /* Hero */
  .hero-premium { min-height: 55vh; padding: 60px 20px 48px; }
  .hero-title { font-size: clamp(1.5rem, 6vw, 2.4rem); }
  .hero-subtitle { font-size: clamp(0.9rem, 3.5vw, 1.1rem); }

  /* Sections */
  .section-inner { padding: 0 16px; }
  .section-head-row { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Provider cards home — 3 colonnes sur tablette */
  .providers-grid-home {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .provider-card-home { padding: 16px 14px 12px; }
}

@media (max-width: 480px) {
  .hero-premium { padding: 48px 16px 40px; }
  .hero-cta-group { flex-direction: column; width: 100%; }
  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-secondary { width: 100%; justify-content: center; }

  /* Provider cards home — 2 colonnes compactes sur petits écrans */
  .providers-grid-home {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Featured provider card : reste une vraie card verticale */
  .provider-card-home {
    display: flex;
    flex-direction: column;
    padding: 14px 12px 10px;
    gap: 8px;
    align-items: stretch;
  }
  .provider-card-link {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .provider-card-avatar-wrap { width: 52px; height: 52px; }
  .provider-card-img { width: 52px; height: 52px; }
  .provider-card-initial { width: 52px; height: 52px; font-size: 1.2rem; }
  .provider-card-name { font-size: 13px; }
  .provider-card-headline { font-size: 11px; }
  .provider-card-bio { display: none; } /* masqué pour gagner de la place */
  .btn-fav-provider { align-self: flex-end; margin-top: auto; }
}

/* ================================================================
   SEARCH RESULTS PAGE — SRP v2 mobile
   ================================================================ */
@media (max-width: 768px) {
  /* Topbar search */
  .srp-searchbar-wrap { border-radius: 12px; }
  .srp-pills-bar { padding: 0 14px; }

  /* 1 colonne sur smartphone */
  body.srp-page--v2 .srp-grid--v2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Card typography réduite */
  body.srp-page--v2 .srp-card-title {
    font-size: 13px;
  }
  body.srp-page--v2 .srp-price-amount {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  /* 1 colonne sur très petits écrans */
  body.srp-page--v2 .srp-grid--v2 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Sidebar pleine largeur */
  body.srp-page--v2 .srp-sidebar {
    width: 100vw !important;
  }
  /* Topbar compact */
  .srp-topbar { padding: 10px 14px; gap: 8px; }
  .srp-results-head { flex-wrap: wrap; gap: 8px; }
  .srp-sort-wrap { width: 100%; }
  .srp-fselect, .srp-sort-select { width: 100%; }
}

/* ================================================================
   SERVICE DETAIL — Layout mobile
   ================================================================ */
@media (max-width: 768px) {
  .service-detail-layout {
    grid-template-columns: 1fr !important;
  }
  .service-detail-aside {
    order: -1; /* Sticky order card en haut sur mobile */
    position: static !important;
  }
  .service-detail-gallery {
    border-radius: 12px;
    overflow: hidden;
  }
}

/* ================================================================
   MESSAGING — Inbox + Conversation
   ================================================================ */
@media (max-width: 768px) {
  /* Inbox list pleine largeur */
  .inbox-layout { grid-template-columns: 1fr; }
  .inbox-thread-preview { padding: 12px 14px; }

  /* Barre de saisie chat — padding safe-area iOS */
  .chat-form {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }
  .chat-input { font-size: 16px; line-height: 1.4; }

  /* Messages */
  .chat-msg { max-width: 88%; }
  .chat-msg-body { font-size: 14.5px; }
}

@media (max-width: 480px) {
  .chat-msg { max-width: 94%; }
  /* Chat header compact */
  .chat-header { padding: 10px 12px; }
  .chat-header-name { font-size: 15px; }
}

/* ================================================================
   COMPTE — Commandes, wallet, demandes
   ================================================================ */
@media (max-width: 640px) {
  /* Table → cards (commandes) */
  .orders-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Cards demandes */
  .demande-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .demande-row-actions { width: 100%; display: flex; gap: 8px; }
  .demande-row-actions .btn-sm { flex: 1; justify-content: center; }

  /* Wallet */
  .wallet-balance-card { padding: 20px 16px; }
  .wallet-balance-amount { font-size: 2rem; }
  .wallet-actions { flex-direction: column; }
  .wallet-actions .btn-primary,
  .wallet-actions .btn-secondary { width: 100%; }
}

/* ================================================================
   PROVIDER PROFILE — Layout public
   ================================================================ */
@media (max-width: 768px) {
  .provider-profile-layout { grid-template-columns: 1fr !important; gap: 0; }
  .provider-profile-aside { position: static !important; order: -1; }
  .provider-cover { height: 160px; border-radius: 0; }
  .provider-avatar-wrap { width: 72px; height: 72px; margin-top: -36px; }
  .provider-name { font-size: 1.3rem; }
}

/* ================================================================
   FORMS — Inputs, selects, textarea mobile
   ================================================================ */
@media (max-width: 768px) {
  /* Éviter zoom iOS sur TOUS les champs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Grille 2 colonnes → 1 colonne */
  .profile-grid-2,
  .co-quick-actions {
    grid-template-columns: 1fr;
  }

  /* Boutons pleine largeur */
  .profile-form-actions {
    flex-direction: column;
  }
  .profile-form-actions .btn-primary,
  .profile-form-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   FOOTER — Mobile
   ================================================================ */
@media (max-width: 768px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px;
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .site-footer-inner { grid-template-columns: 1fr !important; }
  .footer-brand { grid-column: auto; }
}

/* ================================================================
   SAFE AREA — Notch / Home indicator iOS
   ================================================================ */
.site-header .header-inner {
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}

@media (max-width: 768px) {
  .site-header .header-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .chat-form {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* ================================================================
   ACCESSIBILITY — Focus visible sur mobile
   ================================================================ */
@media (max-width: 768px) {
  :focus-visible {
    outline: 3px solid #0d9488;
    outline-offset: 2px;
    border-radius: 4px;
  }
  button, a, input, select, textarea {
    -webkit-tap-highlight-color: rgba(13, 148, 136, 0.15);
  }
}

/* ================================================================
   CARTES SERVICE — min-width safe sur 320 px
   ================================================================ */
@media (max-width: 400px) {
  /* Réduire la largeur minimum des cartes pour les très petits écrans */
  .home-scroll-inner .service-card { min-width: min(260px, 80vw); }
  /* Hero — texte pas trop petit */
  .hero-title { font-size: clamp(1.4rem, 7vw, 2.5rem); }
  .hero-tagline { font-size: 0.9rem; }
  .hero-trust-line { display: none; }
  /* Barre de recherche hero */
  .hero-search-box { padding: 0 4px; }
}

/* ================================================================
   INBOX — Améliorations mobile
   ================================================================ */
@media (max-width: 540px) {
  .inbox-wrap { padding: 0; }
  .inbox-header { padding: 14px 16px 10px; }
  .inbox-item-link { padding: 12px 14px; gap: 10px; }
  .inbox-avatar { width: 40px; height: 40px; }
  .inbox-item-name { font-size: 14px; }
  .inbox-item-time { font-size: 11px; }
  .inbox-item-last { font-size: 13px; }
  .inbox-item-context { font-size: 12px; }
  /* Bulle de compteur non lus */
  .inbox-unread-dot { min-width: 18px; height: 18px; font-size: 11px; }
}

/* ================================================================
   FICHE SERVICE — mobile
   ================================================================ */
@media (max-width: 480px) {
  .service-detail-header { padding: 20px 16px 16px; }
  .service-detail-title { font-size: 1.2rem; }
  .service-detail-plans-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   MODAL (login/signup) — très petits écrans
   ================================================================ */
@media (max-width: 420px) {
  .modal-box { padding: 20px 16px; margin: 8px; border-radius: 14px; }
  .modal-title { font-size: 1.15rem; }
  .signup-name-row { flex-direction: column; }
  .auth-btn { font-size: 13px; padding: 10px 14px; }
}

/* ================================================================
   CO DASHBOARD (Entreprise) — mobile
   ================================================================ */
@media (max-width: 640px) {
  .co-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .co-header .btn-secondary { width: 100%; justify-content: center; }
  .co-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .co-quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .co-stats-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   COMPTE PAGES — Fix double-padding mobile (OLD pattern)
   .compte-page a padding: 32px 28px mais .compte-inner reçoit
   déjà padding: 16px 14px à ≤860px — le cumul écrase l'écran.
   ================================================================ */
@media (max-width: 860px) {
  .compte-page {
    padding: 0;
  }
}

/* ================================================================
   COMPTE — Contenu pages : paddings compacts sur petits écrans
   ================================================================ */
@media (max-width: 540px) {
  /* Sections profil */
  .profile-section {
    padding: 14px;
    margin-bottom: 14px;
  }
  /* Card de vue profil */
  .profile-view-card {
    padding: 16px;
    margin-top: -40px;
  }
  /* Card service dans la liste "Mes services" */
  .mes-services-card-body {
    padding: 14px;
    gap: 8px;
  }
  /* En-tête page mes-services */
  .mes-services-header {
    gap: 12px;
    margin-bottom: 16px;
  }
  /* Carte demande */
  .demande-card-link {
    padding: 14px;
  }
  /* Heading et intro compte */
  .compte-heading { font-size: 1.25rem; }
  .compte-intro   { font-size: 0.9rem; }
  /* Cover bannière profil */
  .profile-cover,
  .profile-view-cover { height: 110px !important; }
  /* Avatar upload row — compact */
  .profile-avatar-upload-row { gap: 14px; }
}


/* ================================================================
   COMPTE — Responsive mobile complet (/compte/* toutes les pages)
   Couverture : 768px · 640px · 480px
   ================================================================ */

/* ── 768px : tablettes et grands téléphones ──────────────────────── */
@media (max-width: 768px) {

  /* ----- Dashboard ----- */
  .dashboard-header { margin-bottom: 18px; }
  .dashboard-title  { font-size: 1.4rem; }
  .dashboard-greeting { font-size: 0.9rem; }
  .dashboard-alert  { padding: 14px 16px; gap: 12px; }
  .dashboard-stat-card  { padding: 16px 12px; }
  .dashboard-stat-value { font-size: 1.5rem; }
  .dashboard-action-card { padding: 16px; }
  .dashboard-action-icon { width: 38px; height: 38px; margin-bottom: 10px; }
  .dashboard-recent-item { padding: 12px 14px; }

  /* ----- Commandes ----- */
  .order-card-header  { padding: 12px 14px 8px; }
  .order-card-body    { padding: 0 14px 8px; }
  .order-card-parties { padding: 0 14px 8px; }
  .order-card-footer  { padding: 10px 14px 12px; }
  .order-card-service-link { gap: 10px; }

  /* ----- Wallet ----- */
  .wallet-hero         { padding: 16px 18px; gap: 14px; }
  .wallet-hero-value   { font-size: 2rem; }
  .wallet-balance-card { padding: 18px 16px; }
  .wallet-tx-row       { padding: 11px 12px; gap: 10px; }
  .transaction-row     { padding: 11px 12px; gap: 10px; }
  .wallet-tx-icon, .tx-icon { width: 34px; height: 34px; }

  /* ----- KYC ----- */
  .kyc-status-card   { padding: 14px 16px; gap: 12px; }
  .kyc-benefits-grid { grid-template-columns: 1fr 1fr; }
  .file-upload-label { padding: 22px 16px; }

  /* ----- Notifications ----- */
  .notif-item      { padding: 12px 14px; gap: 10px; }
  .notif-item-icon { width: 34px; height: 34px; }

  /* ----- Historique ----- */
  .historique-row  { gap: 12px; padding: 12px 0; }
  .historique-link { gap: 10px; }
  .historique-thumb { width: 44px; height: 44px; }
  .historique-title { font-size: 14px; }

  /* ----- Favoris ----- */
  .fav-provider-row  { padding: 12px 14px; gap: 10px; }
  .fav-provider-link { gap: 10px; }
  .provider-avatar-sm { width: 38px; height: 38px; }
}

/* ── 640px : smartphones standard ───────────────────────────────── */
@media (max-width: 640px) {

  /* Layout — padding latéral réduit (complète la règle à 860px) */
  .compte-layout,
  .compte-inner {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* ----- Dashboard ----- */
  .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dashboard-stat-card  { padding: 14px 8px; }
  .dashboard-stat-value { font-size: 1.35rem; }
  .dashboard-actions-grid { grid-template-columns: 1fr; gap: 8px; }
  /* Action card en ligne (icône + texte côte à côte) */
  .dashboard-action-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px;
  }
  .dashboard-action-icon { margin-bottom: 0; flex-shrink: 0; }

  /* ----- Commandes — barre de filtres scrollable ----- */
  .orders-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    margin-bottom: 16px;
  }
  .orders-filter-bar::-webkit-scrollbar { display: none; }
  .ofilter-btn { flex-shrink: 0; white-space: nowrap; }

  /* ----- Wallet ----- */
  .wallet-hero         { flex-direction: column; align-items: flex-start; }
  .wallet-hero-icon    { width: 44px; height: 44px; }
  .wallet-coming-soon  { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wallet-escrow-note  { padding: 10px 12px; font-size: 12px; }

  /* ----- KYC ----- */
  .kyc-uploads             { grid-template-columns: 1fr; }
  .kyc-form                { gap: 18px; }
  .kyc-benefits-grid       { grid-template-columns: 1fr; }
  .id-type-choices         { gap: 8px; }
  .id-type-option          { padding: 8px 10px; font-size: 0.82rem; }

  /* ----- Préférences ----- */
  .preferences-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .preferences-label { width: 100%; }

  /* ----- Demande detail ----- */
  .demande-detail-meta { flex-direction: column; gap: 6px; }
}

/* ── 480px : petits smartphones ─────────────────────────────────── */
@media (max-width: 480px) {

  /* Layout — padding minimal */
  .compte-layout,
  .compte-inner {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* ----- Dashboard ----- */
  .dashboard-recent-item { padding: 10px 12px; }
  .dashboard-stats-grid  { gap: 8px; }

  /* ----- Commandes — footer en colonne ----- */
  .order-card-header  { flex-direction: column; align-items: flex-start; gap: 6px; }
  .order-card-footer  { flex-direction: column; align-items: flex-start; gap: 8px; }
  .order-card-actions { width: 100%; flex-wrap: wrap; }
  .order-card-actions .btn-primary,
  .order-card-actions .btn-secondary {
    flex: 1;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
  .order-card-service-link { gap: 8px; }
  .order-card-service-img,
  .order-card-service-img-empty { width: 44px; height: 32px; }

  /* ----- Wallet ----- */
  .wallet-balance-card  { flex-direction: column; align-items: flex-start; }
  .wallet-balance-amount { font-size: 1.6rem; }
  .wallet-hero-value    { font-size: 1.75rem; }
  .wallet-hero          { padding: 14px; }
  .wallet-tx-row        { gap: 8px; padding: 10px; }
  .wallet-tx-icon       { width: 30px; height: 30px; }
  .wallet-tx-desc       { font-size: 13px; }
  .wallet-tx-amount     { font-size: 13px; }

  /* ----- KYC ----- */
  .kyc-status-card      { flex-direction: column; gap: 10px; }
  .file-upload-label    { padding: 18px 14px; font-size: 0.8rem; }
  .kyc-upload-slot      { padding: 0; }
  .kyc-upload-label     { padding: 16px; }

  /* ----- Notifications ----- */
  .notif-item-icon  { width: 30px; height: 30px; }
  .notif-item-text  { font-size: 13px; }
  .notif-item-time  { font-size: 11px; }

  /* ----- Historique ----- */
  .historique-thumb  { width: 38px; height: 38px; }
  .historique-title  { font-size: 13px; }
  .historique-sub    { font-size: 12px; }
  .historique-time   { font-size: 11px; }

  /* ----- Favoris ----- */
  .fav-provider-row  { padding: 10px 12px; }
  .provider-avatar-sm { width: 34px; height: 34px; }

  /* ----- Preferences ----- */
  .preferences-list { gap: 4px; }

  /* ----- Boutons d'action fullwidth sur tout petit écran ----- */
  .compte-main .btn-primary,
  .compte-content .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .mes-services-add-btn { width: 100%; justify-content: center; }
}

/* ================================================================
   ██████  RESPONSIVE MOBILE DÉFINITIF — TalentGN V2
   Couvre TOUTES les pages /compte/* et pages publiques.
   Breakpoints : 860px | 768px | 640px | 480px | 380px
   Règle d'or : aucun élément ne doit dépasser 100vw.
   ================================================================ */

/* ── 0. Anti-overflow global (garde-fou ultime) ──────────────────── */
* { min-width: 0; }

.site-main,
.compte-layout,
.compte-inner,
.compte-page,
.compte-main,
.compte-content {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* ── 1. Header ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-header { padding: 0; }

  .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 14px;
    gap: 8px;
  }

  /* Logo + actions sur ligne 1, barre de recherche sur ligne 2 */
  .logo { flex: 0 0 auto; }
  .header-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 4px; }

  .search-form-wrap {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .search-form {
    width: 100%;
    border-radius: 10px;
  }

  /* Subnav scroll horizontal */
  .site-subnav-inner {
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-subnav-inner::-webkit-scrollbar { display: none; }
  .site-subnav-link { display: inline-flex; padding: 10px 12px; white-space: nowrap; }
}

@media (max-width: 400px) {
  .header-inner { padding: 8px 10px; }
  .logo img { height: 30px; }
  .icon-btn { min-width: 38px; min-height: 40px; padding: 0 5px; }
  /* Masquer icônes moins critiques */
  .icon-btn-talents { display: none !important; }
}

/* ── 2. Compte layout : nav → tabs horizontaux ───────────────────── */
@media (max-width: 860px) {
  .compte-layout,
  .compte-inner,
  .compte-page {
    display: block;
    padding: 0 14px 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .compte-nav {
    position: static;
    width: 100%;
    border-bottom: 1px solid var(--tg-border);
    margin-bottom: 12px;
    padding-bottom: 2px;
    overflow: visible;
  }

  .compte-nav--entreprise-shell {
    margin-bottom: 8px !important;
  }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-title { display: none; }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding-bottom: 4px;
  }
  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-links::-webkit-scrollbar { display: none; }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-link {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 6px;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.15 !important;
  }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-group {
    flex-shrink: 0;
    width: auto;
  }
  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-group-toggle {
    width: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    line-height: 1.15;
    border-radius: 6px;
  }

  .compte-nav:not(.compte-nav--entreprise-shell) .compte-nav-divider {
    width: 1px;
    height: 14px;
    background: var(--tg-border);
    flex-shrink: 0;
    align-self: center;
    margin: 0 3px;
  }

  .compte-main,
  .compte-content {
    width: 100%;
    min-width: 0;
    padding: 0;
  }
}

@media (max-width: 640px) {
  .compte-layout,
  .compte-inner,
  .compte-page { padding: 0 10px 36px; }
}

@media (max-width: 480px) {
  .compte-layout,
  .compte-inner,
  .compte-page { padding: 0 8px 32px; }
}

/* ── 3. Dashboard ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header dashboard */
  .db-header {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
  }
  .db-header-left { gap: 12px; }
  .db-welcome { font-size: 1.15rem; }
  .db-header > .btn-primary { width: 100%; justify-content: center; }

  /* Stats : 2 colonnes sur mobile */
  .db-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .db-stat { padding: 14px 12px; gap: 10px; }
  .db-stat-value { font-size: 1.4rem; }
  .db-stat-icon { width: 36px; height: 36px; }

  /* Alerte profil incomplet */
  .db-alert { flex-wrap: wrap; gap: 10px; padding: 14px; }
  .db-alert > .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }

  /* Ligne service dans le dashboard */
  .db-service-row {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
  }
  .db-service-info { flex: 1 1 60%; min-width: 0; }
  .db-service-status { flex: 0 0 auto; }
  .db-service-actions { flex: 0 0 100%; justify-content: flex-end; }

  /* Quick links : 2 colonnes */
  .db-quick-links { grid-template-columns: repeat(2, 1fr); }
  .db-quick-link { padding: 12px 14px; }
}

@media (max-width: 480px) {
  .db-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .db-stat { padding: 12px 10px; }
  .db-stat-value { font-size: 1.3rem; }

  /* Quick links : 2 colonnes compactes */
  .db-quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .db-quick-link { font-size: 13px; padding: 10px 12px; }
}

@media (max-width: 360px) {
  .db-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .db-quick-links { grid-template-columns: 1fr; }
}

/* ── 4. Mes services ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mes-services-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }
  .mes-services-add-btn { width: 100%; justify-content: center; }

  .mes-services-card {
    flex-direction: column;
    gap: 0;
  }
  .mes-services-card-thumb {
    width: 100%;
    height: 160px;
    border-radius: 10px 10px 0 0;
  }
  .mes-services-card-body {
    padding: 14px;
    border-top: 1px solid var(--tg-border);
  }
  .mes-services-card-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .mes-services-card-actions .btn-sm,
  .mes-services-card-actions .btn-secondary {
    flex: 1;
    justify-content: center;
    min-width: 80px;
  }
}

/* ── 5. Profil (compte/profil) ───────────────────────────────────── */
@media (max-width: 768px) {
  .profile-view-card { margin: 0 0 16px; border-radius: 12px; }
  .profile-cover,
  .profile-view-cover { height: 120px; border-radius: 12px 12px 0 0; }
  .profile-view-cover + .profile-view-body { padding-top: 10px; }

  .profile-form { gap: 14px; }
  .profile-form .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .profile-section { padding: 16px; margin-bottom: 14px; }
  .profile-avatar-upload-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .profile-form-actions {
    flex-direction: column;
    gap: 10px;
  }
  .profile-form-actions .btn-primary,
  .profile-form-actions .btn-secondary { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .profile-cover,
  .profile-view-cover { height: 100px; }
  .profile-avatar-wrap { width: 72px; height: 72px; margin-top: -36px; }
  .profile-avatar-img { width: 72px; height: 72px; }
}

/* ── 6. Formulaire service (créer / modifier) ────────────────────── */
@media (max-width: 768px) {
  .service-form .form-row { grid-template-columns: 1fr; gap: 12px; }
  .service-plan-row { flex-direction: column; gap: 10px; }
  .service-media-row { grid-template-columns: 1fr; }
  .service-form-actions {
    flex-direction: column;
    gap: 10px;
  }
  .service-form-actions .btn-primary,
  .service-form-actions .btn-secondary { width: 100%; justify-content: center; }
}

/* ── 7. Commandes ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .orders-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .orders-filter-bar::-webkit-scrollbar { display: none; }
  .ofilter-btn { flex-shrink: 0; }

  .order-card { margin-bottom: 14px; }
  .order-card-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px 8px; }
  .order-card-footer { flex-direction: column; gap: 10px; align-items: flex-start; padding: 10px 14px 12px; }
  .order-card-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .order-card-actions .btn-primary,
  .order-card-actions .btn-secondary { flex: 1; min-width: 0; justify-content: center; }

  .orders-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
}

@media (max-width: 480px) {
  .order-card-service-link { flex-direction: column; align-items: flex-start; gap: 8px; }
  .order-card-service-img,
  .order-card-service-img-empty { width: 100%; height: 80px; border-radius: 8px; }
}

/* ── 8. Messagerie (inbox + conversation) ────────────────────────── */
@media (max-width: 768px) {
  .inbox-layout { grid-template-columns: 1fr; }
  .inbox-wrap { padding: 0; border-radius: 10px; }
  .inbox-header { padding: 14px 16px; }
  .inbox-item-link { padding: 12px 14px; gap: 10px; }
  .inbox-avatar { width: 42px; height: 42px; }
  .inbox-item-name { font-size: 14px; }
  .inbox-item-last { font-size: 13px; }
}

@media (max-width: 860px) {
  /* Chat : pleine hauteur sur mobile */
  .compte-layout--chat {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-height, 68px));
    padding: 0;
    gap: 0;
  }
  .compte-layout--chat > .compte-nav { flex-shrink: 0; margin-bottom: 0; }
  .compte-layout--chat > .compte-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }
  .compte-layout--chat .chat-wrap { height: 100%; border-left: 0; border-right: 0; border-radius: 0; }

  .chat-form {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }
  .chat-input { font-size: 16px !important; }
  .chat-msg { max-width: 90%; }
}

/* ── 9. Favoris ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .fav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fav-tabs::-webkit-scrollbar { display: none; }
  .fav-tab { flex-shrink: 0; }

  .fav-services-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fav-provider-row { padding: 12px 14px; gap: 10px; }
}

@media (max-width: 480px) {
  .fav-services-grid { grid-template-columns: 1fr; }
}

/* ── 10. Historique ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .historique-row { gap: 10px; padding: 12px 0; }
  .historique-thumb { width: 44px; height: 44px; flex-shrink: 0; }
  .historique-title { font-size: 13.5px; }
  .historique-sub { font-size: 12px; }
  .historique-time { font-size: 11px; }
}

/* ── 11. Notifications ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .notif-list { gap: 0; }
  .notif-item { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .notif-item-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .notif-item-text { font-size: 13.5px; }
  .notif-item-time { font-size: 11px; }
  .notif-item-actions { margin-top: 6px; flex-wrap: wrap; gap: 8px; }
}

/* ── 12. Wallet ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wallet-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .wallet-hero-value { font-size: 1.9rem; }
  .wallet-balance-card { padding: 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .wallet-balance-amount { font-size: 1.8rem; }
  .wallet-actions { flex-direction: column; gap: 10px; }
  .wallet-actions .btn-primary,
  .wallet-actions .btn-secondary { width: 100%; justify-content: center; }
  .wallet-tx-row,
  .transaction-row { padding: 10px 12px; gap: 10px; }
  .wallet-tx-icon, .tx-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .wallet-coming-soon { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wallet-coming-soon .btn-primary { width: 100%; justify-content: center; }
}

/* ── 13. KYC ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kyc-benefits-grid { grid-template-columns: 1fr; }
  .kyc-uploads { grid-template-columns: 1fr; }
  .kyc-status-card { flex-direction: column; gap: 12px; padding: 14px; }
  .kyc-status-card > .btn-primary { width: 100%; justify-content: center; }
  .file-upload-label { padding: 20px 14px; }
  .id-type-choices { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ── 14. Préférences ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .preferences-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .preferences-toggle { align-self: flex-start; }
}

/* ── 15. Demandes ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .demande-card-link { padding: 14px; gap: 12px; }
  .demande-detail-meta { flex-direction: column; gap: 6px; }
  .demande-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .demande-row-actions { width: 100%; display: flex; gap: 8px; }
  .demande-row-actions .btn-sm { flex: 1; justify-content: center; }
}

/* ── 16. Espace entreprise ───────────────────────────────────────── */
@media (max-width: 768px) {
  .co-activate-form-wrap { padding: 0 0 40px; }
  .profile-grid-2 { grid-template-columns: 1fr; gap: 12px; }

  .co-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .co-header .btn-secondary,
  .co-header .btn-primary { width: 100%; justify-content: center; }

  .co-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .co-quick-actions { grid-template-columns: 1fr; gap: 10px; }
  .co-requests-list { gap: 8px; }
  .co-action-card { padding: 14px; }
  .co-media-row { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 480px) {
  .co-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .co-activate-title { font-size: 1.25rem; }
  .co-activate-perks { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── 17. Fiche de service (pages publiques) ──────────────────────── */
@media (max-width: 768px) {
  .service-detail-layout { grid-template-columns: 1fr !important; gap: 20px; }
  .service-detail-aside { position: static !important; order: -1; }
  .service-detail-header { padding: 18px 14px 14px; }
  .service-detail-title { font-size: 1.15rem; }
  .service-detail-plans-grid { grid-template-columns: 1fr; }
  .service-detail-gallery { border-radius: 10px; }
  .service-plan-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .service-plan-tabs::-webkit-scrollbar { display: none; }
  .service-plan-tab { flex-shrink: 0; }
}

/* ── 18. Profil prestataire public ───────────────────────────────── */
@media (max-width: 768px) {
  .provider-profile-layout { grid-template-columns: 1fr !important; gap: 0; }
  .provider-profile-aside { position: static !important; order: -1; }
  .provider-cover { height: 140px; border-radius: 0; }
  .provider-avatar-wrap { width: 68px; height: 68px; margin-top: -34px; }
  .provider-name { font-size: 1.2rem; }
  .provider-services-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

@media (max-width: 480px) {
  .provider-services-grid { grid-template-columns: 1fr; }
}

/* ── 19. Recherche (SRP) ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .srp-pills-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 12px;
    -webkit-overflow-scrolling: touch;
  }
  .srp-pills-bar::-webkit-scrollbar { display: none; }
  .srp-pill { flex-shrink: 0; }

  .srp-results-head { flex-wrap: wrap; gap: 8px; }
  .srp-sort-wrap { width: 100%; }
  .srp-fselect, .srp-sort-select { width: 100%; }
}

@media (max-width: 640px) {
  body.srp-page--v2 .srp-grid--v2 { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 480px) {
  body.srp-page--v2 .srp-grid--v2 { grid-template-columns: 1fr; gap: 10px; }
  body.srp-page--v2 .srp-sidebar { width: 100vw !important; }
  .srp-topbar { padding: 10px 12px; gap: 8px; }
}

/* ── 20. Modals (bottom-sheet sur mobile) ────────────────────────── */
@media (max-width: 540px) {
  .modal-overlay { align-items: flex-end; }
  .modal-box {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: min(92dvh, 92vh);
    overflow-y: auto;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .modal-box--wide { max-width: 100%; }
  .modal-title { font-size: 1.15rem; }
  .signup-name-row { flex-direction: column; gap: 12px; }
  .auth-btn { font-size: 13px; padding: 10px 14px; }
}

/* ── 21. Footer ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px 32px;
    text-align: center;
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
  }
  .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

/* ── 22. iOS safe area (notch / home indicator) ──────────────────── */
.site-header { padding-top: env(safe-area-inset-top, 0px); }
.site-main { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 768px) {
  .site-header .header-inner {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .compte-layout,
  .compte-inner,
  .compte-page {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
}

/* ── 23. Éviter zoom iOS sur tous les inputs ─────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  textarea,
  select,
  .form-control { font-size: 16px !important; }
}

/* ── 24. Boutons pleine largeur sur petits écrans ────────────────── */
@media (max-width: 480px) {
  .compte-main .btn-primary:not(.btn-xs):not(.btn-sm),
  .compte-content .btn-primary:not(.btn-xs):not(.btn-sm),
  .co-activate-form-wrap .btn-primary { width: 100%; justify-content: center; }
}

/* ── 25. Images et médias : ne jamais dépasser le conteneur ─────── */
img, video, iframe, embed { max-width: 100% !important; height: auto; }
table { width: 100%; overflow-x: auto; display: block; }
pre { overflow-x: auto; }

/* ── 26. Accessibilité tactile : cibles min 44px (sans nav compte horizontal) ─ */
@media (max-width: 768px) {
  .btn-primary, .btn-secondary, .btn-sm, .icon-btn,
  .dropdown-item, .auth-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn-xs { min-height: 32px; }
}

/* ================================================================
   HOMEPAGE — Carrousels & Prestataires vedette (mobile définitif)
   ================================================================ */

/* ── Scrollbar cachée sur tous les carrousels (mobile + tablette) ── */
@media (max-width: 1024px) {
  .home-scroll-h,
  .domain-scroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .home-scroll-h::-webkit-scrollbar,
  .domain-scroll::-webkit-scrollbar { display: none !important; }

  /* Padding-bottom réduit (il était là pour la scrollbar) */
  .home-scroll-inner { padding-bottom: 4px; }
}

/* ── Marges négatives corrigées sur mobile (évitent l'overflow) ──── */
@media (max-width: 768px) {
  .home-scroll-h {
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  /* Taille des cartes service dans le carrousel */
  .home-scroll-h .home-card,
  .home-scroll-h .service-card {
    width: min(240px, calc(80vw));
  }
  /* Section inner sans padding additionnel */
  .home-section .section-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  /* Trust band : wrap sur petits écrans */
  .trust-band-inner { flex-wrap: wrap; gap: 12px 24px; justify-content: center; }
  .trust-band-sep { display: none; }
  /* Séparateur sections */
  .section-head-row { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .section-link { white-space: nowrap; }
}

@media (max-width: 480px) {
  .home-scroll-h {
    margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px)));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  /* Cartes service : 78% de la largeur écran */
  .home-scroll-h .home-card,
  .home-scroll-h .service-card {
    width: calc(78vw);
    min-width: 200px;
    max-width: 280px;
  }
}

/* ── Grille prestataires vedette : responsive propre ──────────────── */
@media (max-width: 900px) {
  .providers-grid-home {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .providers-grid-home {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* Cards : verticales compactes */
  .provider-card-home {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 12px 10px;
    gap: 8px;
    align-items: stretch;
  }
  .provider-card-link {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px;
  }
  .provider-card-avatar-wrap { width: 52px; height: 52px; margin: 0 auto; }
  .provider-card-img,
  .provider-card-initial { width: 52px; height: 52px; }
  .provider-card-name { font-size: 13px; font-weight: 700; }
  .provider-card-headline { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .provider-card-bio { display: none; }
  .provider-card-meta { gap: 4px; flex-wrap: wrap; justify-content: center; }
  .provider-card-rating { font-size: 11px; }
  .provider-card-city { font-size: 11px; }
  .btn-fav-provider { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; }
}

@media (max-width: 360px) {
  .providers-grid-home { grid-template-columns: 1fr; }
  .provider-card-home {
    flex-direction: row !important;
    padding: 12px;
    gap: 12px;
    align-items: center;
  }
  .provider-card-link {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 10px;
  }
  .provider-card-avatar-wrap { width: 44px; height: 44px; flex-shrink: 0; margin: 0; }
  .provider-card-img,
  .provider-card-initial { width: 44px; height: 44px; }
  .provider-card-bio { display: none; }
  .provider-card-info { text-align: left; }
}

/* ── Quick searches héro : scroll horizontal sur mobile ─────────── */
@media (max-width: 600px) {
  .hero-quick-searches {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 90%, transparent);
  }
  .hero-quick-searches::-webkit-scrollbar { display: none; }
  .hero-quick-searches a { flex-shrink: 0; }
  .hero-quick-label { flex-shrink: 0; }
}

/* ── How it works : 1 colonne sur mobile ─────────────────────────── */
@media (max-width: 600px) {
  .how-it-works-grid { grid-template-columns: 1fr; gap: 16px; }
  .how-step { padding: 16px 14px; }
}

/* ── CTA block : stack vertical ──────────────────────────────────── */
@media (max-width: 600px) {
  .cta-block { padding: 28px 20px; text-align: center; }
  .cta-block h2 { font-size: 1.2rem; }
  .cta-block .btn-primary { width: 100%; justify-content: center; }
}

/* ================================================================
   PAGINATION — Page prestataires (fond clair)
   ================================================================ */
.providers-pagination {
  margin: 32px auto 0;
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

/* Sur fond clair (providers-page), adapter les couleurs */
.providers-page .srp-pagination,
.providers-page .providers-pagination {
  border-top-color: #e2e8f0;
}
.providers-page .srp-page-num {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
}
.providers-page .srp-page-num:hover {
  border-color: #0d9488;
  color: #0d9488;
}
.providers-page .srp-page-num.is-current {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  border-color: transparent;
  color: #fff;
}
.providers-page .srp-page-btn {
  color: #0d9488;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.providers-page .srp-page-btn:hover {
  border-color: #0d9488;
  box-shadow: 0 2px 8px rgba(13,148,136,0.15);
}
.providers-page .srp-page-ellipsis {
  color: #94a3b8;
  padding: 0 4px;
}

/* Pagination responsive */
@media (max-width: 480px) {
  .srp-pagination,
  .providers-pagination {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .srp-page-btn { padding: 8px 12px; font-size: 13px; }
  .srp-page-num { min-width: 34px; height: 34px; font-size: 13px; }
}

/* ================================================================
   GALERIE SERVICE DETAIL — image bien cadrée
   ================================================================ */
/* Miniatures (thumbs) */
.sdp-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sdp-thumbs::-webkit-scrollbar { display: none; }

.sdp-thumb {
  flex-shrink: 0;
  width: 68px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: opacity 0.15s, border-color 0.15s;
  background: var(--tg-surface);
}
.sdp-thumb.is-active { border-color: var(--tg-teal); opacity: 1; }
.sdp-thumb:hover { opacity: 0.9; }
.sdp-thumb img,
.sdp-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 768px) {
  .sdp-gallery { margin-bottom: 16px; }
  .sdp-carousel { height: 220px; max-height: 55vw; min-height: 160px; }
  .sdp-carousel-arrow { width: 32px; height: 32px; }
  .sdp-thumbs { gap: 6px; margin-top: 8px; }
  .sdp-thumb { width: 52px; height: 38px; }
}

@media (max-width: 480px) {
  .sdp-carousel { height: 200px; max-height: 60vw; }
  .sdp-thumb { width: 44px; height: 32px; }
}

/* ============================================================================
   PAGE LISTE PRESTATAIRES — Thème clair (fond blanc), design professionnel
   ============================================================================ */

/* Variables locales overrides (thème clair) */
.plp-page {
  --plp-bg:          #f1f5f9;
  --plp-surface:     #ffffff;
  --plp-border:      #e2e8f0;
  --plp-border-soft: #f1f5f9;
  --plp-text:        #0f172a;
  --plp-text-muted:  #64748b;
  --plp-text-light:  #94a3b8;
  --plp-teal:        #0d9488;
  --plp-teal-light:  #14b8a6;
  --plp-teal-bg:     rgba(13,148,136,.07);
  --plp-teal-border: rgba(13,148,136,.2);
  --plp-shadow-sm:   0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
  --plp-shadow-md:   0 4px 16px rgba(15,23,42,.1), 0 2px 6px rgba(15,23,42,.07);
  --plp-shadow-lg:   0 8px 32px rgba(15,23,42,.13);
  /* Le fond clair reste sur .plp-wrap uniquement — pas sur le body entier
     pour éviter l'espace blanc entre le contenu et le footer sombre. */
}

/* ── Layout global ──────────────────────────────────────────────────────── */
.plp-wrap {
  min-height: 70vh;
  background: var(--plp-bg);
}

/* ── Barre de filtres (en-tête unifié) ─────────────────────────────────── */
.plp-filters-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--plp-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 6px rgba(15,23,42,.07);
}
.plp-filters {
  max-width: 1260px;
  margin: 0 auto;
  padding: 12px 24px;
}
/* ── Titre intégré dans la barre ── */
.plp-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--plp-border-soft);
  margin-bottom: 10px;
}
.plp-header-left { display: flex; flex-direction: column; gap: 2px; }
.plp-header-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.plp-header-count {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
}
.plp-header-count strong { color: var(--plp-teal); font-weight: 700; }
.plp-filters-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Champ recherche */
.plp-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
}
.plp-search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.plp-search-input {
  width: 100%;
  padding: 9px 34px 9px 38px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  color: #0f172a;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.plp-search-input::placeholder { color: #94a3b8; }
.plp-search-input:focus {
  border-color: var(--plp-teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13,148,136,.1);
}
.plp-search-clear {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: #94a3b8; cursor: pointer;
  display: flex; align-items: center;
  padding: 4px;
  transition: color .15s;
}
.plp-search-clear:hover { color: #475569; }

/* Selects & inputs filtres */
.plp-select, .plp-input {
  padding: 9px 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  color: #0f172a;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .15s;
}
.plp-select:focus, .plp-input:focus { border-color: var(--plp-teal); background: #fff; }
.plp-input--city { flex: 0 1 140px; }
.plp-select--sort { flex: 0 1 190px; }

/* Checkboxes pill */
.plp-checks { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.plp-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 100px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  font-size: 12.5px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.plp-check input { display: none; }
.plp-check:hover { border-color: var(--plp-teal); color: var(--plp-teal); }
.plp-check.is-on {
  border-color: var(--plp-teal);
  background: rgba(13,148,136,.07);
  color: var(--plp-teal);
  font-weight: 600;
}
.plp-check svg { flex-shrink: 0; }

/* Boutons filtres */
.plp-filter-btns { display: flex; gap: 6px; align-items: center; }
.plp-btn-filter {
  padding: 8px 18px;
  background: var(--plp-teal);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
  display: inline-flex; align-items: center;
}
.plp-btn-filter:hover { background: var(--plp-teal-light); transform: translateY(-1px); color: #fff; }
.plp-btn-reset {
  padding: 8px 14px;
  background: transparent;
  color: #64748b;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s;
  display: inline-flex; align-items: center;
}
.plp-btn-reset:hover { border-color: #94a3b8; color: #334155; }

/* Tags actifs */
.plp-active-tags {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; padding-top: 8px;
}
.plp-active-label { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.plp-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 100px;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  font-size: 12px; color: #475569;
}
.plp-tag--teal { background: rgba(13,148,136,.08); border-color: rgba(13,148,136,.25); color: var(--plp-teal); font-weight: 600; }
.plp-tag--gold { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); color: #b45309; font-weight: 600; }

/* ── Corps principal ────────────────────────────────────────────────────── */
.plp-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 56px;
}
.plp-results-bar {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tg-border);
}
.plp-results-count { font-size: 13px; color: var(--tg-muted); }
.plp-results-count strong { color: var(--tg-white); font-weight: 700; }

/* ── Grille ────────────────────────────────────────────────────────────── */
.plp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ════════════════════════════════════════════════════════════════════════
   CARTE PRESTATAIRE — Thème blanc, centrée (photo · nom · domaine · note · vues)
   ════════════════════════════════════════════════════════════════════════ */

/* Grille */
.plp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ── Carte ────────────────────────────────────────────────────────────── */
.plc {
  background: #fff;
  border: 1px solid var(--plp-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .22s, transform .22s, border-color .22s;
  position: relative;
}
.plc:hover {
  box-shadow: var(--plp-shadow-lg);
  transform: translateY(-3px);
  border-color: rgba(13,148,136,.3);
}
.plc--premium {
  border-color: rgba(245,158,11,.3);
}
.plc--premium:hover {
  border-color: rgba(245,158,11,.5);
  box-shadow: 0 8px 28px rgba(245,158,11,.12);
}

/* ── Couverture ───────────────────────────────────────────────────────── */
.plc-cover-zone {
  position: relative;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
}
.plc-cover-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.plc:hover .plc-cover-img { transform: scale(1.06); }

.plc-cover-grad { width: 100%; height: 100%; }
/* Palettes sobres sur fond clair */
.plc-cg--1 { background: linear-gradient(135deg, #0d4f6e 0%, #0e8fa0 100%); }
.plc-cg--2 { background: linear-gradient(135deg, #134e4a 0%, #0f766e 100%); }
.plc-cg--3 { background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%); }
.plc-cg--4 { background: linear-gradient(135deg, #3b0764 0%, #7c3aed 100%); }
.plc-cg--5 { background: linear-gradient(135deg, #1a1e3c 0%, #0369a1 100%); }

/* Favori */
.plc-fav-btn {
  position: absolute;
  top: 9px; right: 9px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,.85);
  border: none; border-radius: 50%;
  color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  backdrop-filter: blur(4px);
  transition: background .15s, color .15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.plc-fav-btn:hover { background: #fff; color: #ef4444; }
.plc-fav-btn.is-faved { background: #fff3f3; color: #ef4444; }

/* Badge disponible */
.plc-avail {
  position: absolute;
  bottom: 8px; left: 8px;
  padding: 3px 9px;
  background: #16a34a;
  border-radius: 100px;
  font-size: 10px; font-weight: 700;
  color: #fff;
  letter-spacing: .03em;
  z-index: 3;
}

/* ── Photo ────────────────────────────────────────────────────────────── */
.plc-photo-zone {
  display: flex;
  justify-content: center;
}
.plc-photo-wrap {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  margin-top: -40px;
  box-shadow: 0 2px 12px rgba(15,23,42,.15);
  flex-shrink: 0;
  z-index: 4;
}
.plc-photo {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.plc-photo-initial {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--plp-teal) 0%, #14b8a6 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; font-weight: 800;
  letter-spacing: -.03em;
}
/* Badge vérifié */
.plc-verified-badge {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--plp-teal);
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 1px 4px rgba(13,148,136,.4);
}

/* ── Corps ────────────────────────────────────────────────────────────── */
.plc-body {
  flex: 1;
  padding: 10px 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* 1. Nom */
.plc-name {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  max-width: 100%;
}
.plc-name-link {
  color: inherit; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
  display: inline-block;
}
.plc-name-link:hover { color: var(--plp-teal); }
.plc-badge-pro {
  display: inline-block;
  padding: 1px 7px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  font-size: 10px; font-weight: 700;
  color: #92400e;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* 2. Domaine */
.plc-domain {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  background: var(--plp-teal-bg);
  border: 1px solid var(--plp-teal-border);
  border-radius: 100px;
  font-size: 12px; font-weight: 600;
  color: var(--plp-teal);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .15s;
}
.plc-domain:hover { background: rgba(13,148,136,.12); color: #0d9488; }
.plc-domain--plain {
  color: #64748b;
  background: #f8fafc;
  border-color: #e2e8f0;
  font-weight: 500;
  margin: 0;
}

/* Ligne domaine + accroche */
.plc-domain-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 24px;
}
.plc-headline {
  font-size: 12.5px;
  color: #475569;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
  text-align: center;
  max-width: 100%;
}

/* Bio courte */
.plc-bio {
  font-size: 12px;
  color: #64748b;
  line-height: 1.55;
  text-align: center;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.1em;
}

/* 3. Note */
.plc-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 2px;
}
.plc-stars { display: flex; align-items: center; gap: 1px; }
.plc-rating-score {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}
.plc-rating-reviews {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 400;
}
.plc-rating-none {
  font-size: 12px;
  color: #cbd5e1;
  font-style: italic;
}

/* 4. Métriques (services · commandes · vues · ville) */
.plc-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 7px 0 3px;
  width: 100%;
  border-top: 1px solid #f1f5f9;
  margin-top: 2px;
}
.plc-metric {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  position: relative;
}
.plc-metric + .plc-metric::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: #e2e8f0;
}
.plc-metric svg { color: #94a3b8; flex-shrink: 0; }
.plc-metric-val {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}
.plc-metric-lbl {
  font-size: 11.5px;
  font-weight: 400;
  color: #94a3b8;
}
.plc-metric--services .plc-metric-val { color: var(--plp-teal); }
.plc-metric--services svg { color: var(--plp-teal); }
.plc-metric--location {
  gap: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.plc-metric--location svg { color: #94a3b8; }

/* Tags catégories secondaires */
.plc-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
}
.plc-tag {
  padding: 2px 8px;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.plc-tag:hover { border-color: var(--plp-teal); color: var(--plp-teal); }

/* ── Pied de carte ─────────────────────────────────────────────────────── */
.plc-footer {
  padding: 12px 16px;
  border-top: 1px solid #f1f5f9;
  background: #fafafa;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plc-cta-primary {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
  color: #fff;
  border-radius: 9px;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
  transition: background .15s, transform .1s;
  display: block;
}
.plc-cta-primary:hover { background: var(--plp-teal-light); transform: translateY(-1px); color: #fff; }
.plc-cta-msg {
  width: 36px; height: 36px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  color: #64748b;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.plc-cta-msg:hover { border-color: var(--plp-teal); color: var(--plp-teal); background: var(--plp-teal-bg); }

/* ── Zone vide ─────────────────────────────────────────────────────────── */
.plp-empty {
  text-align: center;
  padding: 72px 24px;
  color: #94a3b8;
}
.plp-empty svg { color: #cbd5e1; margin-bottom: 16px; }
.plp-empty h3 { font-size: 1.15rem; font-weight: 700; color: #334155; margin: 0 0 8px; }
.plp-empty p { color: #64748b; margin: 0 0 20px; }

/* Compteur résultats */
.plp-results-bar { border-bottom: 1px solid var(--plp-border); margin-bottom: 20px; padding-bottom: 12px; }
.plp-results-count { font-size: 13px; color: #64748b; margin: 0; }
.plp-results-count strong { color: #0f172a; font-weight: 700; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.plp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--plp-border);
}
.plp-page-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px;
  background: #fff;
  border: 1.5px solid var(--plp-border);
  border-radius: 9px;
  font-size: 13px; font-weight: 600;
  color: var(--plp-teal);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.plp-page-btn:hover { border-color: var(--plp-teal); box-shadow: 0 2px 8px rgba(13,148,136,.12); }
.plp-page-nums { display: flex; align-items: center; gap: 4px; }
.plp-page-num {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-size: 13px; font-weight: 600;
  background: #fff;
  border: 1.5px solid var(--plp-border);
  color: #475569;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.plp-page-num:hover { border-color: var(--plp-teal); color: var(--plp-teal); }
.plp-page-num--cur {
  background: var(--plp-teal);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}
.plp-page-ellipsis { color: #cbd5e1; padding: 0 4px; font-size: 14px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .plp-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 900px) {
  .plp-header-title { font-size: 1.15rem; }
  .plp-header-row { padding-bottom: 8px; margin-bottom: 8px; }
  .plp-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .plp-filters { padding: 10px 16px; }
  .plp-body { padding: 18px 16px 40px; }
  .plp-input--city { display: none; }
  .plp-select--sort { flex: 0 1 155px; }
}
@media (max-width: 600px) {
  .plp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .plp-header-title { font-size: 1.05rem; }
  .plp-header-count { display: none; }
  .plp-filters-row { gap: 6px; }
  .plp-select--sort { display: none; }
  .plp-body { padding: 12px 12px 32px; }
  .plc-cover-zone { height: 62px; }
  .plc-photo-wrap { width: 64px; height: 64px; margin-top: -32px; }
  .plc-photo, .plc-photo-initial { width: 64px; height: 64px; font-size: 1.5rem; }
  .plc-verified-badge { width: 18px; height: 18px; }
  .plc-body { padding: 10px 12px 12px; gap: 5px; }
  .plc-name { font-size: 0.88rem; }
  .plc-name-link { max-width: 130px; }
  .plc-domain { font-size: 11px; padding: 3px 9px; }
  .plc-rating-score { font-size: 0.85rem; }
  .plc-stars svg { width: 11px; height: 11px; }
  .plc-metrics { gap: 8px; padding-top: 7px; }
  .plc-metric-val { font-size: 0.82rem; }
  .plc-metric-lbl { font-size: 8.5px; }
  .plc-tags { display: none; }
  .plc-footer { padding: 9px 10px; gap: 6px; }
  .plc-cta-primary { font-size: 12px; padding: 8px 0; }
  .plc-cta-msg { width: 32px; height: 32px; }
  .plp-page-btn { padding: 7px 12px; font-size: 12px; }
  .plp-page-num { width: 32px; height: 32px; font-size: 12px; }
}
@media (max-width: 380px) {
  .plp-grid { grid-template-columns: 1fr; }
  .plc-cover-zone { height: 70px; }
  .plc-photo-wrap { width: 72px; height: 72px; margin-top: -36px; }
  .plc-photo, .plc-photo-initial { width: 72px; height: 72px; font-size: 1.7rem; }
  .plc-name-link { max-width: 200px; }
  .plc-tags { display: flex; }
}

/* ── Bouton retour mobile (pages /compte/*) ──────────────────────────── */
.compte-back-btn {
  display: none;
}
@media (max-width: 860px) {
  .compte-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tg-surface-elevated);
    border: 1px solid var(--tg-border);
    color: var(--tg-muted-light);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color var(--transition), background var(--transition);
  }
  .compte-back-btn:hover {
    color: var(--tg-white);
    background: rgba(255,255,255,0.08);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTREPRISE — WIZARD D'ACTIVATION
═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout shell (aside + main) ────────────────────────────────────────── */
.co-wiz-shell {
  display: flex;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

.co-wiz-aside {
  width: 360px;
  flex-shrink: 0;
  background: linear-gradient(160deg, #0f2942 0%, #0a1628 60%, #071120 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.co-wiz-aside-inner {
  padding: 48px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
}

/* Brand */
.co-wiz-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.co-wiz-brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(13,148,136,0.18);
  color: #2dd4bf;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-wiz-brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tg-white);
  letter-spacing: -0.01em;
}
.co-wiz-brand-name em {
  font-style: normal;
  color: #2dd4bf;
}

/* Aside title */
.co-wiz-aside-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--tg-white);
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.co-wiz-aside-title span {
  background: linear-gradient(135deg, #2dd4bf, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.co-wiz-aside-sub {
  font-size: 14px;
  color: var(--tg-muted-light);
  line-height: 1.6;
  margin: 0 0 32px;
}

/* Benefits list */
.co-wiz-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.co-wiz-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.co-wiz-benefit-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-wiz-benefit-icon--blue  { background: rgba(99,102,241,0.15); color: #818cf8; }
.co-wiz-benefit-icon--teal  { background: rgba(13,148,136,0.15); color: #2dd4bf; }
.co-wiz-benefit-icon--purple{ background: rgba(168,85,247,0.15);  color: #c084fc; }
.co-wiz-benefit-icon--orange{ background: rgba(249,115,22,0.15);  color: #fb923c; }
.co-wiz-benefit strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-white);
  line-height: 1.3;
}
.co-wiz-benefit span {
  font-size: 12px;
  color: var(--tg-muted-light);
}

/* Testimonial */
.co-wiz-testimonial {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 16px;
  margin-top: auto;
}
.co-wiz-testimonial-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(13,148,136,0.2);
  color: #2dd4bf;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-wiz-testimonial-body p {
  font-size: 13px;
  color: var(--tg-white-soft);
  line-height: 1.5;
  margin: 0 0 6px;
  font-style: italic;
}
.co-wiz-testimonial-body span {
  font-size: 11px;
  color: var(--tg-muted);
}

/* ── Main form zone ──────────────────────────────────────────────────────── */
.co-wiz-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #0a0f1a;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px 64px;
}
.co-wiz-form-wrap {
  width: 100%;
  max-width: 580px;
}

/* ── Stepper ─────────────────────────────────────────────────────────────── */
.co-wiz-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 36px;
}
.co-wiz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.co-wiz-step-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tg-surface-elevated);
  border: 2px solid var(--tg-border);
  color: var(--tg-muted);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.co-wiz-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tg-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s;
}
.co-wiz-step--active .co-wiz-step-dot {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(13,148,136,0.2);
}
.co-wiz-step--active .co-wiz-step-label {
  color: #2dd4bf;
}
.co-wiz-step--done .co-wiz-step-dot {
  background: rgba(13,148,136,0.15);
  border-color: #0d9488;
  color: #0d9488;
}
.co-wiz-step--done .co-wiz-step-label {
  color: #0d9488;
}
.co-wiz-step-line {
  flex: 1;
  height: 2px;
  background: var(--tg-border);
  margin: 0 8px;
  margin-bottom: 22px;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.co-wiz-panel {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.co-wiz-panel--hidden { display: none !important; }

.co-wiz-panel-head {
  margin-bottom: 4px;
}
.co-wiz-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tg-white);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.co-wiz-panel-title svg { color: #0d9488; flex-shrink: 0; }
.co-wiz-panel-sub {
  font-size: 14px;
  color: var(--tg-muted-light);
  margin: 0;
}

.co-wiz-errors {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 4px;
}
.co-wiz-errors p { font-size: 13px; color: #f87171; margin: 0; }

/* ── co-field : champ premium avec icône ─────────────────────────────────── */
.co-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.co-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.co-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-muted-light);
  letter-spacing: 0.01em;
}
.co-field-required { color: #f87171; margin-left: 2px; }
.co-field-hint {
  font-size: 12px;
  color: var(--tg-muted);
  margin: 0;
  line-height: 1.5;
}
/* Wizard activation — Quittus / quittance import feedback */
.co-doc-upload-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.09);
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-sizing: border-box;
}
.co-doc-upload-banner[hidden] {
  display: none !important;
}
.co-doc-upload-banner-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-doc-upload-banner-body {
  min-width: 0;
  flex: 1;
}
.co-doc-upload-banner-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #6ee7b7;
  margin: 0 0 4px;
}
.co-doc-upload-banner-name {
  display: block;
  font-size: 13px;
  color: var(--tg-text);
  word-break: break-word;
  line-height: 1.35;
}
.co-doc-upload-banner-size {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--tg-muted);
}
.co-doc-upload-banner-size:empty {
  display: none;
}

/* Wrapper avec icône */
.co-field-input-wrap {
  position: relative;
}
.co-field-input-wrap--icon .co-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tg-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.co-field-input-wrap--icon input,
.co-field-input-wrap--icon select {
  padding-left: 40px !important;
}

/* Caret for select */
.co-field-input-wrap--select .co-field-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tg-muted);
  pointer-events: none;
}

/* Inputs and selects within co-field use form-control class */
.co-field .form-control {
  width: 100%;
  padding: 12px 14px;
  background: var(--tg-surface);
  border: 1.5px solid var(--tg-border);
  border-radius: 12px;
  color: var(--tg-white);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.co-field .form-control:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18);
  background: rgba(13,148,136,0.04);
}
.co-field .form-control::placeholder { color: var(--tg-muted); }
.co-field select.form-control { cursor: pointer; }
.co-field--error .form-control {
  border-color: #f87171 !important;
}
.co-field-error {
  font-size: 12px;
  color: #f87171;
  margin: 0;
}

/* Textarea wrapper with char count */
.co-field-textarea-wrap {
  position: relative;
}
.co-field-textarea-wrap .form-control {
  padding-bottom: 28px;
  min-height: 130px;
  resize: vertical;
}
.co-field-char-count {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 11px;
  color: var(--tg-muted);
  pointer-events: none;
}
.co-field-char-count--warn { color: #fb923c; }

/* Logo upload zone */
.co-logo-upload-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.co-logo-preview {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  background: var(--tg-surface);
  border: 2px dashed var(--tg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.18s;
}
.co-logo-preview:hover { border-color: #0d9488; }
#co-logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--tg-muted);
  text-align: center;
  font-size: 11px;
}
.co-logo-upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Hide native file inputs in wizard */
.co-logo-upload-zone input[type="file"],
.co-cover-upload-zone input[type="file"],
.co-wiz-doc-row input[type="file"],
.co-activate-form-wrap input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Hero preview activation */
.co-wiz-cover-hero {
  position: relative;
  margin-bottom: 36px;
  border-radius: 16px;
  overflow: visible;
}
.co-wiz-cover-hero-banner {
  height: 120px;
  border-radius: 14px;
  background: linear-gradient(120deg, #0f766e 0%, #042f2e 45%, #0c4a6e 100%);
  position: relative;
  overflow: hidden;
}
.co-wiz-cover-hero-banner-ph {
  position: absolute;
  inset: 0;
  opacity: .35;
  background: repeating-linear-gradient(
    -12deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,0.06) 10px,
    rgba(255,255,255,0.06) 20px
  );
}
#co-cover-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
#co-cover-banner-img.co-wiz-preview-live {
  opacity: 1 !important;
  pointer-events: none;
}
.co-wiz-cover-hero-brand {
  position: absolute;
  left: 22px;
  bottom: -24px;
  z-index: 2;
}
.co-wiz-cover-hero-logo.co-logo-preview {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--tg-surface-elevated);
  border: 3px solid var(--tg-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.co-wiz-cover-hero-logo #co-logo-hero-ph {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-muted);
}
#co-logo-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#co-logo-hero-img.co-wiz-preview-live {
  opacity: 1 !important;
}

/* Logo grande vignette — superposition pour aperçu fichier */
.co-activate-page #co-logo-preview.co-logo-preview--xl {
  position: relative;
}
.co-activate-page #co-logo-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.co-activate-page #co-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.co-activate-page #co-logo-img.co-wiz-preview-live {
  opacity: 1 !important;
}

/* Étape visuelle : grille bannière + logo */
.co-wiz-visuels-duo {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 640px) {
  .co-wiz-visuels-duo {
    grid-template-columns: 1fr;
  }
}
.co-wiz-visuels-pane {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--tg-border);
  border-radius: 16px;
  padding: 18px;
}
.co-wiz-visuels-pane-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2dd4bf;
}
.co-cover-upload-zone--stacked {
  flex-direction: column !important;
  align-items: stretch !important;
}
.co-cover-preview-wrap--wide {
  width: 100% !important;
  aspect-ratio: 21 / 7;
  min-height: 100px;
}
.co-logo-upload-zone--solo {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 12px;
}
.co-logo-upload-zone--solo .co-logo-preview--xl {
  width: 120px;
  height: 120px;
}

/* Inline cover picker */
.co-cover-upload-zone {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}
.co-cover-preview-wrap {
  width: 140px;
  aspect-ratio: 3 / 1;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--tg-surface);
  border: 2px dashed var(--tg-border);
  overflow: hidden;
  position: relative;
}
.co-cover-preview-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -10deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.04) 8px,
    rgba(255,255,255,0.04) 16px
  );
}
.co-cover-preview-ph {
  display: block;
  position: absolute;
  inset: 0;
}
#co-cover-inline-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#co-cover-inline-img.co-wiz-preview-live {
  opacity: 1 !important;
}
.co-cover-upload-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  justify-content: center;
}
.co-upload-zone--droppable-hover {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.25);
}

/* Legal box step 3 */
.co-wiz-legal-box {
  padding: 16px 18px;
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 14px;
}
.co-wiz-legal-lead {
  font-size: 13px;
  color: var(--tg-muted-light);
  line-height: 1.55;
  margin: 0 0 16px;
}
.co-wiz-legal-lead strong { color: var(--tg-white); }
.co-wiz-legal-box .co-wiz-legal-title {
  margin-top: 0;
}
.co-wiz-legal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-white);
}
.co-wiz-legal-title svg { color: #818cf8; flex-shrink: 0; }

/* Dashboard avec bannière */
.co-dashboard-hero {
  position: relative;
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--tg-border);
  background: var(--tg-surface-elevated);
}
.co-dashboard-cover {
  height: 112px;
  background-size: cover;
  background-position: center center;
}
.co-dashboard-cover--empty {
  background: linear-gradient(110deg, #0f766e 0%, #082f49 55%, #1e293b 100%);
}
.co-dashboard-hero > .co-header {
  margin-bottom: 0;
  margin-top: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--tg-border);
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 32px;
  background: var(--tg-surface-elevated);
}

/* Sidebar : bascule compte perso / entreprise */
.compte-workspace-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  border: 1px solid var(--tg-border);
}
.compte-workspace-pill {
  flex: 1;
  text-align: center;
  padding: 7px 6px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  color: var(--tg-muted-light);
  transition: background 0.15s, color 0.15s;
}
.compte-workspace-pill:hover {
  color: var(--tg-white);
  background: rgba(255,255,255,0.06);
}
.compte-workspace-pill.is-active {
  background: rgba(13,148,136,0.22);
  color: #2dd4bf;
}

/* Sidebar mode entreprise uniquement (menu dédié, avatar utilisateur) */
.compte-nav--entreprise-shell {
  border-radius: 14px;
  padding-top: 4px;
}
.compte-nav--entreprise-shell .compte-nav-title {
  margin-top: 6px;
}
.compte-nav-enterprise-head {
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--tg-border);
}
.compte-nav-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.compte-nav-id-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.compte-nav-id-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.compte-nav-id-avatar--placeholder {
  font-size: 1.05rem;
  font-weight: 800;
  color: #2dd4bf;
  background: rgba(13,148,136,0.12);
}
.compte-nav-id-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compte-nav-id-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-white);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compte-nav-id-company {
  font-size: 12px;
  color: var(--tg-muted-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compte-nav-links--enterprise .compte-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.compte-nav-links--enterprise .compte-nav-link svg {
  flex-shrink: 0;
  opacity: 0.88;
}
.compte-nav-links--enterprise .compte-nav-link--logout {
  display: flex !important;
}
.compte-workspace-bar--narrow {
  margin-bottom: 0 !important;
}
.compte-nav-micro-hint {
  font-size: 11px;
  line-height: 1.45;
  padding: 2px 14px 10px;
  margin: 0;
  color: var(--tg-muted);
}
.compte-nav-link--soft {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tg-muted-light) !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.compte-nav-link--soft:hover {
  color: var(--tg-white-soft) !important;
}
.compte-nav-link--soft.is-active {
  background: transparent !important;
  color: var(--tg-muted-light) !important;
}

/* ── Summary box ─────────────────────────────────────────────────────────── */
.co-wiz-summary {
  background: rgba(13,148,136,0.07);
  border: 1px solid rgba(13,148,136,0.2);
  border-radius: 14px;
  padding: 16px 20px;
}
.co-wiz-summary-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2dd4bf;
  margin: 0 0 12px;
}
.co-wiz-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.co-wiz-summary-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.co-wiz-summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tg-muted);
}
.co-wiz-summary-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-white);
}

/* ── Checkbox accept ─────────────────────────────────────────────────────── */
.co-wiz-accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--tg-muted-light);
  cursor: pointer;
  line-height: 1.5;
}
.co-wiz-accept input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #0d9488;
  cursor: pointer;
}
.co-wiz-accept a { color: #2dd4bf; }

/* ── Nav buttons ─────────────────────────────────────────────────────────── */
.co-wiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--tg-border);
}
.co-wiz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.18s;
  text-decoration: none;
}
.co-wiz-btn--next {
  background: #0d9488;
  color: #fff;
}
.co-wiz-btn--next:hover {
  background: #0f766e;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,148,136,0.3);
}
.co-wiz-btn--submit {
  background: linear-gradient(135deg, #0d9488, #0ea5e9);
  color: #fff;
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 14px;
}
.co-wiz-btn--submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(13,148,136,0.35);
}
.co-wiz-btn--submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.co-wiz-btn--ghost {
  background: transparent;
  color: var(--tg-muted-light);
  border: 1.5px solid var(--tg-border);
}
.co-wiz-btn--ghost:hover {
  border-color: var(--tg-teal);
  color: var(--tg-teal-light);
}
.co-wiz-btn--outline {
  background: transparent;
  color: var(--tg-muted-light);
  border: 1.5px solid var(--tg-border);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 10px;
}
.co-wiz-btn--outline:hover {
  border-color: #0d9488;
  color: #2dd4bf;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTREPRISE — DASHBOARD — COMPOSANTS ADDITIONNELS
═══════════════════════════════════════════════════════════════════════════ */

/* ── Bannière vérification ───────────────────────────────────────────────── */
.co-verify-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  margin-bottom: 24px;
  border: 1.5px solid;
}
.co-verify-banner--unverified {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.25);
}
.co-verify-banner--pending {
  background: rgba(251,191,36,0.08);
  border-color: rgba(251,191,36,0.25);
}
.co-verify-banner--verified {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.25);
}
.co-verify-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-verify-banner--unverified .co-verify-icon { background: rgba(99,102,241,0.15); color: #818cf8; }
.co-verify-banner--pending    .co-verify-icon { background: rgba(251,191,36,0.15); color: #fbbf24; }
.co-verify-banner--verified   .co-verify-icon { background: rgba(16,185,129,0.15); color: #10b981; }
.co-verify-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.co-verify-body strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-white);
}
.co-verify-body span {
  font-size: 13px;
  color: var(--tg-muted-light);
}
.co-verify-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.15s;
  background: rgba(255,255,255,0.07);
  color: var(--tg-white);
  border: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}
.co-verify-cta:hover {
  background: rgba(255,255,255,0.12);
}

/* ── Services grid dans dashboard entreprise ─────────────────────────────── */
.co-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.co-svc-card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
}
.co-svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.co-svc-thumb {
  height: 100px;
  overflow: hidden;
  background: var(--tg-surface-elevated);
}
.co-svc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-svc-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-svc-body {
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.co-svc-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
}
.co-svc-status--active { background: rgba(16,185,129,0.15); color: #10b981; }
.co-svc-status--draft  { background: rgba(148,163,184,0.15); color: #94a3b8; }
.co-svc-status--paused { background: rgba(251,191,36,0.15); color: #fbbf24; }
.co-svc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-white);
  margin: 2px 0 0;
  line-height: 1.35;
}
.co-svc-price {
  font-size: 12px;
  color: var(--tg-teal-light);
  font-weight: 600;
}
.co-svc-actions {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--tg-border);
}
.co-svc-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  color: var(--tg-muted-light);
  text-decoration: none;
  transition: all 0.15s;
  border-right: 1px solid var(--tg-border);
}
.co-svc-action-btn:last-child { border-right: none; }
.co-svc-action-btn:hover { background: rgba(255,255,255,0.05); color: var(--tg-white); }

.co-see-all-link {
  font-size: 13px;
  font-weight: 600;
  color: #2dd4bf;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 8px;
}
.co-see-all-link:hover { text-decoration: underline; }

/* Empty services placeholder */
.co-empty-services {
  text-align: center;
  padding: 36px 20px;
  border: 2px dashed var(--tg-border);
  border-radius: 16px;
}
.co-empty-services-illus {
  margin-bottom: 16px;
}
.co-empty-services-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--tg-white-soft);
  margin: 0 0 16px;
}
.co-empty-services-hint {
  font-size: 12px;
  margin-top: 10px;
}
.co-empty-services-hint a { color: #2dd4bf; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — WIZARD MOBILE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .co-wiz-shell { flex-direction: column; }
  .co-wiz-aside {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .co-wiz-aside-inner { padding: 28px 20px; }
  .co-wiz-aside-title { font-size: 1.3rem; }
  .co-wiz-testimonial { display: none; }
  .co-wiz-main { padding: 28px 16px 48px; }
  .co-wiz-panel { padding: 24px 20px; }
}
@media (max-width: 600px) {
  .co-field-row { grid-template-columns: 1fr; }
  .co-wiz-stepper .co-wiz-step-label { display: none; }
  .co-wiz-step-dot { width: 28px; height: 28px; font-size: 12px; }
  .co-wiz-benefits { gap: 12px; }
  .co-verify-banner { flex-wrap: wrap; }
  .co-services-grid { grid-template-columns: repeat(2, 1fr); }
  .co-wiz-panel { gap: 16px; }
  .co-wiz-btn--submit { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — SEARCH TABS (Services / Prestataires / Entreprises / Catégories)
═══════════════════════════════════════════════════════════════════════════ */

.h2-stabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.h2-stab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
.h2-stab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.15s;
}
.h2-stab:hover {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

/* Icône colorée */
.h2-stab-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.h2-stab:hover .h2-stab-icon { transform: scale(1.1); }

.h2-stab-icon--teal   { background: rgba(13,148,136,0.2);  color: #2dd4bf; }
.h2-stab-icon--blue   { background: rgba(59,130,246,0.2);  color: #60a5fa; }
.h2-stab-icon--purple { background: rgba(139,92,246,0.2);  color: #c084fc; }
.h2-stab-icon--orange { background: rgba(249,115,22,0.2);  color: #fb923c; }

.h2-stab-label { line-height: 1; }

/* État actif par mode */
.h2-stab--active {
  color: #fff !important;
  border-color: rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.08) !important;
}
.h2-stab--active[data-mode="services"]     { border-color: rgba(13,148,136,0.5) !important; background: rgba(13,148,136,0.14) !important; }
.h2-stab--active[data-mode="prestataires"] { border-color: rgba(59,130,246,0.5) !important; background: rgba(59,130,246,0.12) !important; }
.h2-stab--active[data-mode="entreprises"]  { border-color: rgba(139,92,246,0.5) !important; background: rgba(139,92,246,0.12) !important; }
.h2-stab--active[data-mode="categories"]   { border-color: rgba(249,115,22,0.5) !important; background: rgba(249,115,22,0.12) !important; }

/* Icône active plus lumineuse */
.h2-stab--active .h2-stab-icon--teal   { background: rgba(13,148,136,0.3); }
.h2-stab--active .h2-stab-icon--blue   { background: rgba(59,130,246,0.3); }
.h2-stab--active .h2-stab-icon--purple { background: rgba(139,92,246,0.3); }
.h2-stab--active .h2-stab-icon--orange { background: rgba(249,115,22,0.3); }

@media (max-width: 480px) {
  .h2-stabs { gap: 6px; }
  .h2-stab { padding: 8px 12px 8px 8px; font-size: 12px; }
  .h2-stab-icon { width: 24px; height: 24px; border-radius: 6px; }
  .h2-stab-icon svg { width: 13px; height: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANNUAIRE ENTREPRISES — /entreprises/
═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.cpl-hero {
  background: linear-gradient(160deg, #0f2942 0%, #0a1628 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 48px 0 36px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}
.cpl-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  box-sizing: border-box;
}
.cpl-hero-text {
  min-width: 0;
}
.cpl-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #2dd4bf;
  background: rgba(13,148,136,0.12);
  border: 1px solid rgba(13,148,136,0.25);
  border-radius: 999px;
  padding: 5px 12px;
  width: fit-content;
}
.cpl-hero-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--tg-white);
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cpl-hero-title span {
  background: linear-gradient(135deg, #2dd4bf, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cpl-hero-sub {
  font-size: 15px;
  color: var(--tg-muted-light);
  margin: 12px 0 18px;
  line-height: 1.45;
}

/* Search bar */
.cpl-search-form {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cpl-search-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s;
  min-width: 0;
}
.cpl-search-inner:focus-within {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
}
.cpl-search-icon {
  flex-shrink: 0;
  color: var(--tg-muted);
  margin: 0 12px;
}
.cpl-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--tg-white);
  font-size: 15px;
  padding: 14px 0;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.cpl-search-input::placeholder { color: var(--tg-muted); }
.cpl-search-btn {
  padding: 12px 22px;
  background: #0d9488;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.cpl-search-btn:hover { background: #0f766e; }

/* Sector pills */
.cpl-sector-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.cpl-sector-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-muted-light);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.cpl-sector-pill:hover {
  border-color: rgba(13,148,136,0.4);
  color: #2dd4bf;
}
.cpl-sector-pill--active {
  background: rgba(13,148,136,0.15);
  border-color: #0d9488;
  color: #2dd4bf;
}

/* ── Content wrap ── */
.cpl-wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: clip;
}
.cpl-results-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 24px;
  min-width: 0;
  max-width: 100%;
}
.cpl-results-count {
  font-size: 14px;
  color: var(--tg-muted-light);
  min-width: 0;
  overflow-wrap: anywhere;
}
.cpl-results-count strong { color: var(--tg-white); font-weight: 700; }
.cpl-results-count em { font-style: italic; color: #2dd4bf; }
.cpl-reset-link { font-size: 13px; color: #2dd4bf; text-decoration: none; }
.cpl-reset-link:hover { text-decoration: underline; }
.cpl-sort-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--tg-muted);
  line-height: 1.45;
}

/* ── Cards grid ── */
.cpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  margin-bottom: 36px;
  min-width: 0;
}
.cpl-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.cpl-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  border-color: rgba(13,148,136,0.3);
}

/* Cover */
.cpl-card-cover {
  position: relative;
  height: 90px;
  overflow: hidden;
}
.cpl-card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cpl-card-cover-fallback {
  position: absolute;
  inset: 0;
}
.cpl-card-cover-fallback .cpl-card-cover-img {
  display: block;
}
.cpl-card-cover-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.42), rgba(14, 165, 233, 0.38));
}
.cpl-card-cover-fallback[data-sector="finance"]::after {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.48), rgba(79, 70, 229, 0.42));
}
.cpl-card-cover-fallback[data-sector="health"]::after {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.48), rgba(21, 128, 61, 0.42));
}
.cpl-card-cover-fallback[data-sector="tech"]::after {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.48), rgba(13, 148, 136, 0.42));
}
.cpl-card-cover-fallback[data-sector="education"]::after {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.45), rgba(99, 102, 241, 0.4));
}
.cpl-card-cover-fallback[data-sector="trade"]::after {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.45), rgba(245, 158, 11, 0.38));
}
.cpl-card-cover-fallback[data-sector="media"]::after {
  background: linear-gradient(135deg, rgba(219, 39, 119, 0.45), rgba(147, 51, 234, 0.4));
}
.cpl-card-cover-fallback[data-sector="ngo"]::after {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.45), rgba(234, 88, 12, 0.4));
}
.cpl-card-cover-fallback[data-sector="government"]::after {
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.5), rgba(30, 64, 175, 0.42));
}
.cpl-card-cover-fallback[data-sector="other"]::after {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.4), rgba(59, 130, 246, 0.38));
}
.cpl-card-cover-gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d9488, #0ea5e9);
}
.cpl-card-cover-gradient[data-sector="finance"] { background: linear-gradient(135deg, #1d4ed8, #4f46e5); }
.cpl-card-cover-gradient[data-sector="health"]  { background: linear-gradient(135deg, #16a34a, #15803d); }
.cpl-card-cover-gradient[data-sector="tech"]    { background: linear-gradient(135deg, #0891b2, #0d9488); }
.cpl-card-cover-gradient[data-sector="media"]   { background: linear-gradient(135deg, #db2777, #9333ea); }
.cpl-card-cover-gradient[data-sector="ngo"]     { background: linear-gradient(135deg, #f59e0b, #ea580c); }

.cpl-card-badges {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}
.cpl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.cpl-badge--verified {
  background: rgba(16,185,129,0.9);
  color: #fff;
}
.cpl-badge--premium {
  background: rgba(251,191,36,0.9);
  color: #1a1a1a;
}

/* Logo flottant */
.cpl-card-logo-wrap {
  margin: -24px 0 0 16px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 3px solid var(--tg-surface-elevated);
  overflow: hidden;
  background: var(--tg-surface);
  flex-shrink: 0;
}
.cpl-card-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cpl-card-logo-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #2dd4bf;
  background: linear-gradient(135deg, rgba(13,148,136,0.2), rgba(14,165,233,0.2));
}

/* Card body */
.cpl-card-body {
  padding: 10px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cpl-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--tg-white);
  letter-spacing: -0.01em;
  margin: 0;
}
.cpl-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cpl-card-sector {
  font-size: 12px;
  font-weight: 600;
  color: #2dd4bf;
  background: rgba(13,148,136,0.1);
  padding: 2px 8px;
  border-radius: 999px;
}
.cpl-card-city {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--tg-muted-light);
}
.cpl-card-desc {
  font-size: 13px;
  color: var(--tg-muted-light);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.cpl-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--tg-muted-light);
}
.cpl-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--tg-teal-light);
}
.cpl-card-stat svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.cpl-card-www {
  font-size: 11px;
  margin: 8px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  word-break: break-all;
}
.cpl-card-www svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.6;
}
.cpl-card-contact {
  font-size: 11px;
  margin: 4px 0 0;
  line-height: 1.35;
  word-break: break-word;
}

.cpl-card-footer {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--tg-muted);
  padding-top: 8px;
  border-top: 1px solid var(--tg-border);
  margin-top: auto;
}
.cpl-card-size, .cpl-card-year {
  font-weight: 600;
}

/* Pagination */
.cpl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 0;
}
.cpl-page-btn {
  padding: 9px 18px;
  border-radius: 10px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  color: var(--tg-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
}
.cpl-page-btn:hover { border-color: #0d9488; color: #2dd4bf; }
.cpl-page-info { font-size: 13px; color: var(--tg-muted-light); }

/* Empty state */
.cpl-empty {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cpl-empty-title { font-size: 1.3rem; font-weight: 800; color: var(--tg-white); margin: 0; }
.cpl-empty-sub { font-size: 14px; color: var(--tg-muted-light); margin: 0; }
.cpl-empty-sub a { color: #2dd4bf; }

/* CTA banner */
.cpl-cta-banner {
  background: linear-gradient(135deg, #0f2942, #0a1628);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 40px 24px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}
.cpl-cta-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.cpl-cta-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(13,148,136,0.15);
  color: #2dd4bf;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cpl-cta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cpl-cta-text strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--tg-white);
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cpl-cta-text span {
  font-size: 14px;
  color: var(--tg-muted-light);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cpl-cta-btn {
  flex-shrink: 0;
  padding: 12px 24px;
  background: #0d9488;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
  text-align: center;
  box-sizing: border-box;
  max-width: 100%;
}
.cpl-cta-btn:hover {
  background: #0f766e;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,148,136,0.3);
}

@media (max-width: 640px) {
  .cpl-cta-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .cpl-cta-icon {
    align-self: flex-start;
  }
  .cpl-cta-btn {
    width: 100%;
    white-space: normal;
    flex-shrink: 1;
    padding: 14px 18px;
  }
}

@media (max-width: 520px) {
  .cpl-hero {
    padding: 32px 0 28px;
  }
  .cpl-hero-inner {
    padding: 0 16px;
    gap: 16px;
  }
  .cpl-wrap {
    padding: 24px 16px 48px;
  }
  .cpl-cta-banner {
    padding: 28px 16px;
  }
  .cpl-search-inner {
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
  }
  .cpl-search-icon {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    pointer-events: none;
  }
  .cpl-search-input {
    padding: 14px 16px;
    width: 100%;
  }
  .cpl-search-btn {
    width: 100%;
    padding: 14px 16px;
    border-radius: 0 0 12px 12px;
  }
  .cpl-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}

body.cpl-page .site-main {
  max-width: 100%;
  overflow-x: clip;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFIL PUBLIC ENTREPRISE — /entreprise/<slug>/
═══════════════════════════════════════════════════════════════════════════ */
.cpp-cover-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.cpp-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cpp-cover-fallback {
  position: absolute;
  inset: 0;
}
.cpp-cover-fallback .cpp-cover-img {
  display: block;
}
.cpp-cover-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.38), rgba(14, 165, 233, 0.32));
}
.cpp-cover-fallback[data-sector="finance"]::after {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.42), rgba(79, 70, 229, 0.38));
}
.cpp-cover-fallback[data-sector="health"]::after {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.42), rgba(21, 128, 61, 0.36));
}
.cpp-cover-fallback[data-sector="tech"]::after {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.42), rgba(13, 148, 136, 0.36));
}
.cpp-cover-fallback[data-sector="education"]::after {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(99, 102, 241, 0.35));
}
.cpp-cover-fallback[data-sector="trade"]::after {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.4), rgba(245, 158, 11, 0.34));
}
.cpp-cover-fallback[data-sector="media"]::after {
  background: linear-gradient(135deg, rgba(219, 39, 119, 0.4), rgba(147, 51, 234, 0.35));
}
.cpp-cover-fallback[data-sector="ngo"]::after {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(234, 88, 12, 0.35));
}
.cpp-cover-fallback[data-sector="government"]::after {
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.45), rgba(30, 64, 175, 0.38));
}
.cpp-cover-fallback[data-sector="other"]::after {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.36), rgba(59, 130, 246, 0.32));
}
.cpp-cover-gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d9488, #0ea5e9);
}
.cpp-cover-gradient[data-sector="finance"] { background: linear-gradient(135deg, #1d4ed8, #4f46e5); }
.cpp-cover-gradient[data-sector="health"]  { background: linear-gradient(135deg, #16a34a, #15803d); }
.cpp-cover-gradient[data-sector="media"]   { background: linear-gradient(135deg, #db2777, #9333ea); }
.cpp-cover-gradient[data-sector="ngo"]     { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.cpp-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(10,15,26,0.7) 100%);
}

/* Layout */
.cpp-layout {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px 64px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

/* Identity block */
.cpp-identity {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--tg-border);
  margin-bottom: 24px;
  margin-top: -40px;
  position: relative;
  z-index: 1;
}
.cpp-logo-wrap {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  border: 3px solid var(--tg-black);
  overflow: hidden;
  background: var(--tg-surface-elevated);
  flex-shrink: 0;
}
.cpp-logo { width: 100%; height: 100%; object-fit: cover; }
.cpp-logo-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #2dd4bf;
  background: linear-gradient(135deg, rgba(13,148,136,0.2), rgba(14,165,233,0.2));
}
.cpp-identity-info { padding-top: 36px; }
.cpp-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.cpp-name {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--tg-white);
  letter-spacing: -0.03em;
  margin: 0;
}
.cpp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.cpp-badge--verified { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.cpp-badge--premium  { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.cpp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cpp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--tg-muted-light);
}
.cpp-meta-item svg { color: var(--tg-muted); }

/* Tabs */
.cpp-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--tg-border);
  margin-bottom: 28px;
}
.cpp-tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-muted-light);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.cpp-tab:hover { color: var(--tg-white); }
.cpp-tab--active {
  color: #2dd4bf;
  border-bottom-color: #0d9488;
}

/* Tab panels */
.cpp-tab-panel { display: block; }
.cpp-tab-panel--hidden { display: none !important; }

/* Description */
.cpp-section-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--tg-white);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.cpp-description-text {
  font-size: 15px;
  color: var(--tg-muted-light);
  line-height: 1.7;
}
.cpp-description-text img,
.cpp-description-text video {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 0.65em 0;
  display: block;
  box-sizing: border-box;
}
.cpp-description-text video {
  max-height: min(360px, 65vh);
  background: rgba(15, 23, 42, 0.45);
}
.cpp-description-text img {
  max-height: min(480px, 75vh);
  object-fit: contain;
}
.cpp-description { margin-bottom: 32px; }

/* Featured services */
.cpp-featured-services { margin-bottom: 32px; }
.cpp-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cpp-svc-grid--full { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cpp-svc-card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}
.cpp-svc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.cpp-svc-img { width: 100%; height: 110px; object-fit: cover; display: block; }
.cpp-svc-img-empty { height: 110px; background: var(--tg-surface-elevated); }
.cpp-svc-body { padding: 12px; }
.cpp-svc-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tg-teal); }
.cpp-svc-title { font-size: 13px; font-weight: 600; color: var(--tg-white); margin: 4px 0; line-height: 1.35; }
.cpp-svc-price { font-size: 12px; color: var(--tg-muted-light); }
.cpp-see-more-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #2dd4bf;
  background: none;
  border: 1px dashed rgba(13,148,136,0.3);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.cpp-see-more-btn:hover { background: rgba(13,148,136,0.07); }

/* Contact */
.cpp-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.cpp-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  padding: 14px;
}
.cpp-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(13,148,136,0.12);
  color: #2dd4bf;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cpp-contact-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpp-contact-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tg-muted); }
.cpp-contact-val { font-size: 13px; color: var(--tg-white); text-decoration: none; word-break: break-all; }
.cpp-contact-val:hover { color: #2dd4bf; }
.cpp-socials { display: flex; gap: 10px; grid-column: 1 / -1; }
.cpp-social-link {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--tg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-muted-light);
  text-decoration: none;
  transition: all 0.15s;
}
.cpp-social-link--facebook:hover { background: #166fe5; border-color: #166fe5; color: #fff; }
.cpp-social-link--linkedin:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.cpp-social-link--twitter:hover  { background: #1a91da; border-color: #1a91da; color: #fff; }
.cpp-social-link--instagram:hover { background: #db2777; border-color: #db2777; color: #fff; }
.cpp-contact-cta { margin-top: 8px; }
.cpp-empty { text-align: center; padding: 40px; color: var(--tg-muted-light); }
.cpp-empty a { color: #2dd4bf; margin-top: 12px; display: inline-block; }

/* Sidebar */
.cpp-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 80px;
}
.cpp-sidebar-card {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 16px;
  padding: 20px;
}
.cpp-sidebar-card--cta {
  background: linear-gradient(135deg, rgba(13,148,136,0.1), rgba(14,165,233,0.08));
  border-color: rgba(13,148,136,0.25);
}
.cpp-sidebar-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tg-muted);
  margin: 0 0 14px;
}
.cpp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cpp-stat { text-align: center; }
.cpp-stat-val { display: block; font-size: 1.4rem; font-weight: 900; color: var(--tg-white); letter-spacing: -0.04em; }
.cpp-stat-label { font-size: 11px; color: var(--tg-muted); }
.cpp-sidebar-cta-title { font-size: 15px; font-weight: 800; color: var(--tg-white); margin: 0 0 6px; }
.cpp-sidebar-cta-sub { font-size: 13px; color: var(--tg-muted-light); margin: 0 0 16px; line-height: 1.5; }
.cpp-trust-seals { display: flex; flex-direction: column; gap: 10px; }
.cpp-trust-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tg-muted-light); }

/* ── Nav sous-menu entreprise ── */
.compte-nav-group { }
.compte-nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-muted-light);
  border-radius: 8px;
  text-align: left;
  transition: all 0.15s;
}
.compte-nav-group-toggle:hover {
  background: rgba(255,255,255,0.05);
  color: var(--tg-white);
}
.compte-nav-group-icon { display: flex; align-items: center; color: #2dd4bf; }
.compte-nav-group-caret { margin-left: auto; transition: transform 0.2s; }
.compte-nav-group--open .compte-nav-group-caret { transform: rotate(180deg); }
.compte-nav-group-items {
  display: none;
  padding-left: 12px;
  border-left: 2px solid rgba(13,148,136,0.2);
  margin: 4px 0 4px 20px;
}
.compte-nav-group--open .compte-nav-group-items { display: block; }
.compte-nav-link--sub {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  padding: 8px 10px !important;
  color: var(--tg-muted-light) !important;
}
.compte-nav-link--sub.is-active { color: #2dd4bf !important; background: rgba(13,148,136,0.08) !important; }
.compte-nav-badge--green { background: rgba(16,185,129,0.2); color: #10b981; }

/* ── Co-filter tabs (demandes/commandes entreprise) ── */
.co-filter-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--tg-border);
  padding-bottom: 0;
}
.co-filter-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tg-muted-light);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}
.co-filter-tab:hover { color: var(--tg-white); }
.co-filter-tab--active { color: #2dd4bf; border-bottom-color: #0d9488; }

/* ── Co list table (rows for requests/orders) ── */
.co-list-table { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.co-list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.co-list-row:hover { border-color: rgba(13,148,136,0.3); background: rgba(13,148,136,0.04); }
.co-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(13,148,136,0.15);
  color: #2dd4bf;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.co-list-avatar img { width: 100%; height: 100%; object-fit: cover; }
.co-list-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-list-name { font-size: 14px; font-weight: 600; color: var(--tg-white); }
.co-list-sub { font-size: 12px; }
.co-list-service { flex: 1; min-width: 0; }
.co-list-price { font-size: 14px; color: var(--tg-white); white-space: nowrap; }
.co-list-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.co-list-date { font-size: 12px; }

.co-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--tg-muted-light);
}
.co-page-btn {
  padding: 8px 14px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  color: var(--tg-white);
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.15s;
}
.co-page-btn:hover { border-color: #0d9488; color: #2dd4bf; }

.co-empty-state {
  text-align: center;
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--tg-muted-light);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cpp-layout { grid-template-columns: 1fr; }
  .cpp-sidebar { position: static; }
  .cpp-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .cpp-contact-grid { grid-template-columns: 1fr; }
  .cpl-grid { grid-template-columns: repeat(2, 1fr); }
  .cpl-cta-inner { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .cpp-identity { flex-direction: column; gap: 12px; }
  .cpp-identity-info { padding-top: 0; }
  .cpp-cover-wrap { height: 140px; }
  .cpl-hero-title { font-size: 1.5rem; }
  .cpl-grid { grid-template-columns: 1fr; }
  .h2-search-tabs { flex-wrap: wrap; }
  .cpp-svc-grid { grid-template-columns: 1fr; }
  .co-list-row { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFIL ENTREPRISE — SECTIONS cop-*
═══════════════════════════════════════════════════════════════════════════ */

/* Section card */
.cop-section {
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Section header */
.cop-section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--tg-border);
}
.cop-section-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cop-section-icon--teal   { background: rgba(13,148,136,0.15);  color: #2dd4bf; }
.cop-section-icon--blue   { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.cop-section-icon--green  { background: rgba(16,185,129,0.15);  color: #10b981; }
.cop-section-icon--pink   { background: rgba(236,72,153,0.15);  color: #f472b6; }
.cop-section-icon--purple { background: rgba(139,92,246,0.15);  color: #c084fc; }
.cop-section-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--tg-white);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cop-section-sub {
  font-size: 13px;
  color: var(--tg-muted-light);
  margin: 0;
  line-height: 1.5;
}

/* Badge optionnel */
.cop-badge-optional {
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(148,163,184,0.12);
  color: var(--tg-muted);
  border: 1px solid rgba(148,163,184,0.2);
  vertical-align: middle;
}

/* ── Profil entreprise : grille médias (autres écrans) ── */
.co-media-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 100%;
}

/* ── Identité visuelle — refonte (profil entreprise) ── */
.cop-section--visuel {
  background: linear-gradient(
    155deg,
    rgba(13, 148, 136, 0.07) 0%,
    rgba(15, 23, 42, 0.35) 42%,
    var(--tg-surface-elevated) 100%
  );
  border-color: rgba(13, 148, 136, 0.28);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.22);
  overflow-x: clip;
  max-width: 100%;
}
.cop-section-head-text {
  flex: 1;
  min-width: 0;
}

.cop-visuel-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 960px) {
  .cop-visuel-grid {
    grid-template-columns: 1fr;
  }
}

.cop-visuel-card {
  position: relative;
  padding: 20px 20px 22px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.cop-visuel-card--logo {
  background: linear-gradient(160deg, rgba(13, 148, 136, 0.08) 0%, rgba(15, 23, 42, 0.5) 100%);
}
.cop-visuel-card--cover {
  background: linear-gradient(160deg, rgba(59, 130, 246, 0.06) 0%, rgba(15, 23, 42, 0.5) 100%);
  border-color: rgba(59, 130, 246, 0.15);
}

.cop-visuel-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.cop-visuel-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(13, 148, 136, 0.18);
  color: #5eead4;
}
.cop-visuel-card--cover .cop-visuel-card-icon {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
.cop-visuel-card-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--tg-white);
  letter-spacing: -0.02em;
}
.cop-visuel-card-head .cop-badge-optional {
  margin-top: 4px;
  display: inline-flex;
}
.cop-visuel-card-hint {
  font-size: 12px;
  color: var(--tg-muted);
  line-height: 1.45;
  margin: 0 0 16px;
  padding-left: 52px;
}
@media (max-width: 520px) {
  .cop-visuel-card-hint {
    padding-left: 0;
  }
}

/* Logo zone profil */
.cop-logo-zone--profil {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.cop-logo-preview--profil {
  position: relative;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 2px dashed rgba(148, 163, 184, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cop-logo-preview--profil:hover {
  border-color: rgba(45, 212, 191, 0.55);
  box-shadow: 0 14px 36px rgba(13, 148, 136, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cop-visuel-ph--logo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--tg-muted);
  text-align: center;
  padding: 12px;
  z-index: 1;
}
.cop-visuel-ph--logo svg {
  opacity: 0.45;
}
.cop-visuel-ph-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.cop-visuel-img--logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.cop-visuel-img--logo.cop-visuel-img--visible {
  opacity: 1 !important;
}

/* Cover profil */
.cop-cover-zone--profil {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cop-cover-preview--profil {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 8;
  min-height: 120px;
  border-radius: 16px;
  background: linear-gradient(
    125deg,
    #0f766e 0%,
    #0e7490 38%,
    #1e3a5f 100%
  );
  border: 2px dashed rgba(255, 255, 255, 0.18);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s;
}
.cop-cover-preview--profil:hover {
  border-color: rgba(147, 197, 253, 0.45);
}

.cop-visuel-ph--cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  z-index: 1;
  background: repeating-linear-gradient(
    -8deg,
    transparent,
    transparent 14px,
    rgba(255, 255, 255, 0.03) 14px,
    rgba(255, 255, 255, 0.03) 28px
  );
}
.cop-visuel-ph--cover svg {
  opacity: 0.65;
  color: rgba(255, 255, 255, 0.85);
}
.cop-visuel-ph--cover .cop-visuel-ph-label {
  color: #e2e8f0;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
.cop-visuel-ph-sub {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.65);
  max-width: 240px;
  line-height: 1.4;
}

.cop-visuel-img--cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cop-visuel-img--cover.cop-visuel-img--visible {
  opacity: 1 !important;
}

/* Boutons identité visuelle */
.cop-visuel-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.cop-cover-actions--profil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.cop-visuel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}
.cop-visuel-btn--primary {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  border-color: rgba(45, 212, 191, 0.35);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}
.cop-visuel-btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.cop-visuel-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.25);
}
.cop-visuel-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.35);
}

.cop-visuel-remove {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 2px 2px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.95);
  cursor: pointer;
  user-select: none;
  word-break: break-word;
}
.cop-visuel-remove:hover .cop-visuel-remove-text {
  color: #fca5a5;
}
.cop-visuel-remove-cb {
  flex-shrink: 0;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: #f87171;
}
.cop-visuel-remove-text {
  color: inherit;
  transition: color 0.15s ease;
}

@media (max-width: 520px) {
  .cop-visuel-actions .cop-visuel-btn--primary {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .cop-cover-actions--profil {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
  }
  .cop-cover-actions--profil .cop-visuel-btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}
@media (min-width: 521px) {
  .cop-cover-actions--profil .cop-visuel-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Legacy zones (si utilisées ailleurs) */
.cop-logo-zone:not(.cop-logo-zone--profil) {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cop-logo-preview:not(.cop-logo-preview--profil) {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  background: var(--tg-surface);
  border: 2px dashed var(--tg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.18s;
}
.cop-logo-preview:not(.cop-logo-preview--profil):hover {
  border-color: #0d9488;
}
.cop-cover-preview:not(.cop-cover-preview--profil) {
  width: 100%;
  height: 100px;
  border-radius: 12px;
  background: var(--tg-surface);
  border: 2px dashed var(--tg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  transition: border-color 0.18s;
}
.cop-cover-preview:not(.cop-cover-preview--profil):hover {
  border-color: #0d9488;
}
.cop-cover-actions:not(.cop-cover-actions--profil) {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Certification section ── */
.cop-section--cert {
  border-color: rgba(139,92,246,0.2);
  background: linear-gradient(160deg, rgba(139,92,246,0.04) 0%, var(--tg-surface-elevated) 60%);
  overflow-x: clip;
  max-width: 100%;
}
.cop-section--cert .co-field-row {
  min-width: 0;
  max-width: 100%;
}
.cop-section--cert .co-field {
  min-width: 0;
}
.cop-section--cert .form-control {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Status badge in title */
.cop-cert-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.cop-cert-status--verified { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.cop-cert-status--pending  { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.cop-cert-status--none     { background: rgba(148,163,184,0.1); color: var(--tg-muted); border: 1px solid rgba(148,163,184,0.2); }

/* Bannière état certification */
.cop-cert-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.cop-cert-banner--ok {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  color: #6ee7b7;
}
.cop-cert-banner--ok > svg { color: #10b981; flex-shrink:0; margin-top:2px; }
.cop-cert-banner--pending {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.25);
  color: #fde68a;
}
.cop-cert-banner--pending > svg { color: #fbbf24; flex-shrink:0; margin-top:2px; }
.cop-cert-banner--info {
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  color: var(--tg-muted-light);
}
.cop-cert-banner--info > svg { color: #818cf8; flex-shrink:0; margin-top:2px; }
.cop-cert-banner div { display: flex; flex-direction: column; gap: 2px; }
.cop-cert-banner strong { color: var(--tg-white); font-weight: 700; }

/* Documents grid */
.cop-docs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  max-width: 100%;
  min-width: 0;
}
.cop-doc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--tg-surface);
  border: 1.5px dashed var(--tg-border);
  border-radius: 14px;
  transition: border-color 0.18s;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.cop-doc-card--uploaded {
  border-style: solid;
  border-color: rgba(13,148,136,0.35);
  background: rgba(13,148,136,0.04);
}
.cop-doc-card:hover { border-color: rgba(139,92,246,0.4); }

.cop-doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(139,92,246,0.12);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cop-doc-card--uploaded .cop-doc-icon { background: rgba(13,148,136,0.12); color: #2dd4bf; }

.cop-doc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cop-doc-name { font-size: 14px; font-weight: 700; color: var(--tg-white); }
.cop-doc-desc { font-size: 12px; color: var(--tg-muted-light); }
.cop-doc-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #2dd4bf;
  text-decoration: none;
  margin-top: 4px;
  max-width: 100%;
  word-break: break-word;
}
.cop-doc-view:hover { text-decoration: underline; }

.cop-doc-upload { display: flex; flex-direction: column; gap: 6px; }
.cop-doc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #10b981;
}
.cop-doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(139,92,246,0.1);
  border: 1.5px solid rgba(139,92,246,0.3);
  color: #c084fc;
  transition: all 0.15s;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cop-doc-btn:hover { background: rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.5); color: var(--tg-white); }
.cop-doc-hint { font-size: 11px; color: var(--tg-muted); margin: 0; }

.cop-doc-remove.cop-visuel-remove {
  margin-top: 2px;
}

@media (max-width: 520px) {
  .cop-doc-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* Message confidentialité */
.cop-cert-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tg-muted);
  line-height: 1.5;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px solid var(--tg-border);
}
.cop-cert-privacy svg { flex-shrink: 0; color: var(--tg-muted); }

/* Responsive */
@media (max-width: 700px) {
  .co-media-row { grid-template-columns: 1fr; }
  .cop-docs-grid { grid-template-columns: 1fr; }
  .cop-section { padding: 20px 16px; }
}
@media (max-width: 480px) {
  .cop-cover-preview:not(.cop-cover-preview--profil) {
    height: 72px;
  }
}

/* ==========================================================================
   CHAT — Corrections layout (desktop + mobile)
   ========================================================================== */

/* ── Desktop : chaîne de hauteur fiable ──────────────────────────────────── */
.compte-layout--chat {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  height: calc(100dvh - 72px) !important;
  min-height: unset !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

/* Séparateur vertical entre nav et chat */
.compte-layout--chat > .compte-nav {
  border-right: 1px solid var(--tg-border);
  overflow-y: auto;
  height: 100%;
}

.compte-layout--chat .compte-main {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.compte-layout--chat .chat-wrap {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

/* Empêche la zone de messages de dépasser la hauteur du conteneur flex */
.compte-layout--chat .chat-messages {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Header horizontal garanti */
.chat-header {
  flex-wrap: nowrap !important;
  overflow: hidden;
}

.chat-header-info {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden;
}

/* ── Mobile (≤ 767px) : nav cachée, chat plein écran ─────────────────────── */
@media (max-width: 767px) {
  .compte-layout--chat {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - 56px) !important;
    grid-template-columns: unset !important;
  }

  /* Masquer la sidebar nav dans le chat : le bouton retour du header suffit */
  .compte-layout--chat > .compte-nav {
    display: none !important;
  }

  .compte-layout--chat .compte-main {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .compte-layout--chat .chat-wrap {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Header compact mais toujours horizontal */
  .chat-header {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* Masquer "Voir le profil" sur très petits écrans pour libérer de l'espace */
  .chat-header-actions {
    display: none;
  }

  .chat-input-bar {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }
}