:root {
  --bg: #f7f6f4;
  --bg-soft: #f0ede7;
  --panel: #ffffff;
  --border: #e1e4e8;
  /* Bordure des champs de formulaire uniquement (pas les cartes/séparateurs
     décoratifs) : --border seul est à 1.28:1 sur fond blanc, sous le 3:1
     minimum WCAG 1.4.11 pour les limites de composants d'interface. */
  --border-interactive: #8b95a3;
  --text: #111827;
  --muted: #5b6472;
  --accent: #cfa86a;
  --accent-text: #0f2b45;
  --accent-dark: #0f2b45;
  --accent-soft: #f2e6d0;
  --sage: #8ba179;
  --sage-soft: #e6ecdf;
  --gold: #c6a04f;
  --gold-soft: #f5ecd7;
  /* Assombries par rapport à leur teinte d'origine : sur leur propre fond
     "-soft" (badges, messages de statut), les couleurs de départ tombaient
     entre 2.1:1 et 3.95:1, sous le 4.5:1 WCAG pour du texte normal — ces
     nuances restent dans la même famille de teinte mais passent partout
     (≥5:1 sur -soft, ≥5.7:1 sur les fonds --bg/--panel). */
  --ok: #4a6849;
  --ok-soft: #e6efe1;
  --warn: #76602f;
  --warn-soft: #f5ecd7;
  --bad: #98493e;
  --bad-soft: #f8e5e0;
  --shadow: 0 1px 2px rgba(15, 43, 69, 0.06), 0 10px 28px rgba(15, 43, 69, 0.1);
  --shadow-lift: 0 4px 10px rgba(15, 43, 69, 0.12), 0 18px 34px rgba(15, 43, 69, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding-top: 66px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 500px at 15% -10%, var(--bg-soft), transparent),
    var(--bg);
  color: var(--text);
}

.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 24px 128px;
  position: relative;
}

.hero-grid {
  position: relative;
  z-index: 1;
  margin-top: 88px;
}

.hero-copy {
  max-width: 680px;
}

.hero-microcopy {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.hero-lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

.hero-cta-large {
  padding: 16px 32px;
  font-size: 13.5px;
}

.hero-eyebrow {
  display: block;
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.account-bar {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.language-globe {
  font-size: 15px;
  line-height: 1;
}

.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-switcher-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lang-switcher-trigger:hover, .lang-switcher-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.lang-switcher-trigger .user-menu-chevron { width: 9px; height: 9px; }

.lang-switcher-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  z-index: 30;
}

.lang-switcher-dropdown[hidden] { display: none; }

.lang-switcher-item[aria-current="true"] {
  color: var(--accent-dark);
  font-weight: 600;
  background: var(--accent-soft);
}

.account-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-status[hidden] { display: none; }

#account-email {
  color: var(--muted);
  font-weight: 500;
}

.account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-dark);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

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

#account-avatar {
  background: none;
  color: var(--muted);
}

#account-avatar img { border-radius: 50%; }

.account-avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 22px;
}

.header-plan-badge {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.header-plan-badge[hidden] { display: none; }

.user-menu { position: relative; }

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.user-menu-trigger:hover, .user-menu-trigger[aria-expanded="true"] {
  border-color: var(--border);
  background: var(--panel);
}

.user-menu-chevron {
  width: 10px;
  height: 10px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.user-menu-trigger[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); }

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  z-index: 30;
}

.user-menu-dropdown[hidden] { display: none; }

.user-menu-email {
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
  word-break: break-all;
}

.user-menu-email[hidden] { display: none; }

.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.user-menu-item:hover { background: var(--bg-soft); }
.user-menu-item[hidden] { display: none; }

.user-menu-item-danger { color: var(--bad); }

.user-menu-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 0;
}

.profile-plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-photo-row .link-btn {
  cursor: pointer;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.brand-script {
  font-family: "Fraunces", serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-dark);
}

.brand-suffix {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--accent);
}

.hero-title {
  margin: 18px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 700px;
  text-wrap: balance;
}

.hero-features {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: fit-content;
}

.hero-features li {
  color: var(--text);
  font-size: 15.5px;
  font-weight: 500;
  padding-left: 22px;
  position: relative;
}

.hero-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.hero-cta svg { width: 16px; height: 16px; flex-shrink: 0; }

.hero-cta-primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 2px 8px rgba(207, 168, 106, 0.35);
}

.hero-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(207, 168, 106, 0.42); }

.hero-cta-secondary {
  background: var(--panel);
  color: var(--accent-dark);
  border-color: var(--border);
}

.hero-cta-secondary:hover { background: var(--accent-soft); border-color: var(--accent); }

.hero-cta-tertiary {
  background: none;
  color: var(--muted);
  border-color: transparent;
  padding-left: 8px;
  padding-right: 8px;
}

.hero-cta-tertiary:hover { color: var(--accent-dark); }

.header-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.header-nav-links a {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.header-nav-links a:hover { color: var(--text); }

@media (max-width: 720px) {
  .header-nav-links { display: none; }
  /* Sur mobile, la barre de compte ne garde que l'essentiel (langue + menu
     utilisateur) pour que le menu déroulant — seul accès à la déconnexion
     et à la gestion d'abonnement — reste toujours atteignable. */
  #header-plan-badge,
  #my-listings-open,
  #dashboard-open,
  #team-open,
  #moderation-open,
  #no-show-open {
    display: none;
  }
}

.content-section {
  max-width: 1200px;
  margin: 104px auto 0;
  padding: 0 24px;
}

.content-section-inner {
  max-width: 720px;
}

.content-title {
  margin: 10px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}

.content-lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

.intl-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 40px;
  box-shadow: var(--shadow);
}

@media (max-width: 860px) {
  .intl-grid { grid-template-columns: 1fr; padding: 28px; }
  .intl-visual { order: -1; }
}

.flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.flag-row li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.flag-emoji {
  font-size: 18px;
  line-height: 1;
}

.intl-visual {
  position: relative;
}

.intl-globe-canvas {
  display: block;
  width: 100%;
  /* Le globe fixe la taille du canvas au chargement : sans cette limite, après
     une rotation du téléphone ou une fenêtre réduite, il gardait sa largeur
     et élargissait toute la page (783 px sur un écran de 375 px). */
  max-width: 100%;
  height: 280px;
  position: relative;
  z-index: 1;
}

.intl-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 70%;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(207, 168, 106, 0.32), rgba(207, 168, 106, 0) 72%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}

.intl-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 62%;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(207, 168, 106, 0.28);
  background: repeating-linear-gradient(
    90deg,
    rgba(207, 168, 106, 0.18) 0 1px,
    transparent 1px 20px
  );
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

@media (max-width: 780px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
}

.feature-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px;
  background: var(--panel);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

.feature-card-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
}

.feature-card-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.feature-card h3 {
  margin: 0 0 6px;
  font-family: "Fraunces", serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.feature-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.feature-tier-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 999px;
}

.process-steps {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: process-step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 780px) {
  .process-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
}

.process-steps li {
  counter-increment: process-step;
  padding-top: 36px;
  position: relative;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

.process-steps li::before {
  content: counter(process-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-dark);
  color: #fff;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.differentiator-list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.differentiator-list li {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.differentiator-list strong {
  font-family: "Fraunces", serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.differentiator-list span {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.5;
}

.faq-list {
  margin-top: 32px;
  display: grid;
  gap: 16px;
  max-width: 700px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px;
  background: var(--panel);
}

.faq-item summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 4px;
  border-radius: 6px;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

.faq-item p {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text);
  max-width: 62ch;
}

.expert-highlight {
  border: 1px solid var(--accent-dark);
  border-radius: 22px;
  padding: 40px;
  background: var(--panel);
}

.expert-highlight .content-section-inner { max-width: 640px; }

.expert-highlight .hero-cta-large { margin-top: 24px; }

.final-cta {
  text-align: center;
  padding-bottom: 8px;
}

.final-cta .content-title { max-width: none; }

.final-cta .content-lede { margin-left: auto; margin-right: auto; }

.final-cta .hero-cta-large { margin-top: 22px; }

.pricing-panel {
  max-width: 1200px;
  margin: 8px auto 0;
  padding: 18px 24px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  background: var(--panel);
  position: relative;
}

.pricing-card-highlight {
  border-color: var(--accent-dark);
  background: var(--panel);
}

.pricing-card .pricing-current {
  position: absolute;
  top: 16px;
  right: 16px;
}

.pricing-icon {
  width: 32px;
  height: 32px;
}

.pricing-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pricing-name {
  margin: 0;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--text);
}

.pricing-tagline {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

.pricing-card .price {
  margin: 0;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--text);
}

.pricing-price-detail {
  margin: -8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.pricing-btn-note {
  margin: -6px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  align-self: center;
}

.pricing-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}

.pricing-includes {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.pricing-group-title {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.pricing-card .price span {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
}

.pricing-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  color: var(--text);
  width: 100%;
}

.pricing-card ul li { display: flex; gap: 8px; align-items: flex-start; }

.pricing-card ul li::before {
  content: "✓";
  color: var(--accent-dark);
  font-weight: 700;
  flex-shrink: 0;
}

.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--accent-dark);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.pricing-btn,
.pricing-cta-link {
  align-self: stretch;
  justify-content: center;
  padding: 11px 12px;
  font-size: 16px;
  margin-top: 6px;
}

.pricing-current {
  align-self: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-soft);
  padding: 6px 14px;
  border-radius: 999px;
}

.pricing-current[hidden] { display: none; }

.review-badge {
  color: var(--warn);
  background: var(--warn-soft);
  cursor: help;
}

.pricing-usage {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.pricing-usage[hidden] { display: none; }
.pricing-usage.full { color: var(--bad); font-weight: 600; }

.feature-locked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: 16px;
  color: var(--muted);
}

.feature-locked[hidden] { display: none; }

.feature-locked a {
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
}

.feature-locked a:hover { text-decoration: underline; }

.pricing-status {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 500;
}

.pricing-status[hidden] { display: none; }
.pricing-status.error { color: var(--bad); }
.pricing-status.loading { color: var(--muted); }

#market-estimate {
  margin: -8px 0 14px;
  font-weight: 500;
}

.layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 20px auto 48px;
  padding: 0 24px;
  align-items: start;
}

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 30px;
  box-shadow: var(--shadow);
}

h2 {
  margin-top: 0;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 19px;
}
.subtitle { margin: 0 0 24px; color: var(--muted); font-size: 16px; }

form label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 14px;
}

form label[hidden] { display: none; }

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
}
form input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  accent-color: var(--accent);
}
form input[type="checkbox"]:hover,
form input[type="checkbox"]:focus {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}

.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

form input, form select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 1px solid var(--border-interactive);
  border-radius: 14px;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form input:hover, form select:hover { border-color: #d9bfae; }

.phone-input-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.phone-input-row select, .phone-input-row input {
  margin-top: 0;
}

.phone-country-select {
  flex: 0 0 auto;
  width: 96px;
  padding-left: 10px;
  padding-right: 6px;
}

.phone-input-row input { flex: 1 1 auto; min-width: 0; }

form input[type="file"][hidden] { display: none; }

.pays-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
}

.pays-suggestions[hidden] { display: none; }

.pays-suggestions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
}

.pays-suggestions li:hover, .pays-suggestions li.active {
  background: var(--bg-soft);
}
.pays-suggestions li[aria-current="true"] { color: var(--accent-dark); font-weight: 600; background: var(--accent-soft); }

.suggestion-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.suggestion-flag {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.suggestion-premium-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

form input:focus, form select:focus {
  outline: none;
  /* border-color seul (14.46:1 sur blanc) porte la conformité WCAG 1.4.11 ;
     l'ancien box-shadow en --accent-soft n'atteignait que 1.23:1, quasi
     invisible pour un utilisateur malvoyant naviguant au clavier. */
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(15, 43, 69, 0.25);
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 16px;
  margin: 0 0 18px;
  padding: 14px 14px 16px;
}

legend {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 0 6px;
}

/* Sections du formulaire principal : un simple séparateur haut et un
   intitulé discret plutôt qu'un encadré supplémentaire, pour ne pas
   empiler les bordures avec les sous-blocs (ex : Points forts). */
.form-section {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 32px;
}

.form-section:first-of-type { margin-top: 0; }

.form-section-title {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

#points-forts-presets {
  margin: 0 0 12px;
}

.point-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.point-row input { flex: 1; }

.point-row button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  padding: 0 10px;
  color: var(--bad);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.point-row button:hover { background: var(--bad-soft); border-color: var(--bad); }

#add-point {
  background: none;
  border: 1px dashed #d9bfae;
  border-radius: 12px;
  padding: 7px 12px;
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#add-point:hover { background: var(--accent-soft); border-color: var(--accent); }

#submit-btn {
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border: none;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(207, 168, 106, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

#submit-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
#submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(207, 168, 106, 0.42); }
#submit-btn:active:not(:disabled) { transform: translateY(0); }

#status { margin-top: 12px; font-size: 16px; }
#status.error { color: var(--bad); }
#status.loading { color: var(--muted); }

#result-empty { color: var(--muted); font-size: 16px; }

.quality {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.badge {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.badge.ok { color: var(--ok); background: var(--ok-soft); }
.badge.warn { color: var(--warn); background: var(--warn-soft); }
.badge.bad { color: var(--bad); background: var(--bad-soft); }

.badge.privileged-badge { color: var(--accent-dark); background: var(--accent-soft); }
.badge.privileged-badge::before { content: "★ "; }

.short { color: var(--muted); }
.short.error { color: var(--bad); }

.reservation-listing-title { font-size: 19px; font-weight: 700; margin: 0 0 2px; color: var(--text); }
.reservation-status-line { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.reservation-status-line.reservation-status-ok { color: var(--ok); }
.reservation-status-line.reservation-status-warn { color: var(--warn); }
.reservation-status-line.reservation-status-bad { color: var(--bad); }

details {
  border-top: 1px solid var(--border);
  padding: 12px 0;
}

summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}

summary:hover { color: var(--accent-dark); }

.fiche-preview {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-top: 10px;
  background: var(--bg-soft);
}

.fiche-preview .prix {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 4px 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.fiche-technique-titre, .reseaux-sociaux-titre, .script-video-titre, .resume-investisseur-titre {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 20px 0 8px;
}

.resume-investisseur {
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

.fiche-technique {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.fiche-technique th, .fiche-technique td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.fiche-technique th {
  width: 40%;
  color: var(--muted);
  font-weight: 600;
}

.reseaux-sociaux, .script-video {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  white-space: pre-line;
}

.prix-converti {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px 10px;
}

.prix-converti-preview {
  display: inline-block;
  margin: -6px 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 12px;
}

.prix-converti-preview[hidden] { display: none; }

.map-frame {
  width: 100%;
  height: 260px;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.reference {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.publish-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 4px 0 16px;
  background: var(--bg-soft);
}

.publish-criteria { margin-bottom: 12px; font-size: 12.5px; color: var(--muted); }
.publish-criteria summary { cursor: pointer; font-weight: 600; color: var(--text); }
.publish-criteria p { margin: 8px 0 6px; }
.publish-criteria ul { margin: 0; padding-left: 18px; }
.publish-criteria li { margin-bottom: 4px; }

#publish-listing-result p { margin: 0 0 6px; font-size: 16px; color: var(--muted); }

#publish-listing-result a {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 16px;
  word-break: break-all;
}

#publish-listing-result[hidden] { display: none; }

.photos-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.photos-preview img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.videos-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.videos-preview video {
  width: 180px;
  height: 110px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #000;
}

.visite-virtuelle, .live-call { margin: 4px 0 12px; }

.visite-virtuelle a, .live-call a {
  color: var(--accent-dark);
  font-weight: 500;
  font-size: 16px;
}

.live-call a::before { content: "🔴 "; }

.fiche-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.fiche-photos img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
}

.fiche-videos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.fiche-videos video {
  width: 200px;
  height: 120px;
  border-radius: 10px;
  background: #000;
}

pre {
  white-space: pre-wrap;
  font-size: 16px;
  background: var(--bg-soft);
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
}

.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 40px;
  display: flex;
  /* Retour à la ligne : sur un écran de 320 px, « Juridische vermeldingen »
     ou « Impressum » ne tenaient plus sur la même ligne que le copyright et
     l'adresse, et élargissaient toute la page. */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 12px;
}

/* .link-btn impose sa propre taille (16px) et son propre poids (500),
   pensés pour un bouton d'action isolé — ici, à côté du texte de copyright
   à 12px du footer, ça créait un contraste de taille qui n'a pas de sens
   dans ce contexte : mêmes réglages que le texte voisin. */
.site-footer .link-btn {
  font-size: 12px;
  font-weight: 400;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.link-btn:hover { color: var(--accent-dark); }

#account-bar .link-btn {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.file-choose-btn {
  display: inline-block;
  margin: 2px 0 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
}

.doc-import-box {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px dashed var(--accent);
  border-radius: 14px;
  background: var(--accent-soft);
  text-align: center;
}

.doc-import-box .file-choose-btn {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.doc-import-status {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.doc-import-filename {
  font-weight: 600;
  color: var(--accent-dark);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(55, 42, 36, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
}

.modal-overlay[hidden] { display: none; }
/* tabindex="-1" reçoit le focus programmatique à l'ouverture (pour que le
   lecteur d'écran annonce la boîte de dialogue et que le focus clavier
   quitte le déclencheur), mais l'anneau de focus par défaut du navigateur
   sur tout le fond semi-transparent serait disgracieux et inutile. */
.modal-overlay:focus { outline: none; }

.modal-panel {
  background: var(--panel);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  width: 560px;
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.modal-body p { margin: 0 0 14px; }
.modal-body strong { font-family: "Inter", sans-serif; font-weight: 700; }

.account-modal-panel { width: 380px; }

.account-form {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.account-form label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}

.account-form input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 1px solid var(--border-interactive);
  border-radius: 14px;
  font-size: 16px;
  color: var(--text);
  background: #fff;
}

.account-form input:focus {
  outline: none;
  /* border-color seul (14.46:1 sur blanc) porte la conformité WCAG 1.4.11 ;
     l'ancien box-shadow en --accent-soft n'atteignait que 1.23:1, quasi
     invisible pour un utilisateur malvoyant naviguant au clavier. */
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(15, 43, 69, 0.25);
}

.account-submit { width: 100%; justify-content: center; }

.account-form[hidden] { display: none; }

.profile-section-title {
  margin: 4px 0 -4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

#profile-entreprise-fields .profile-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.required-mark {
  color: #c0392b;
  margin-left: 2px;
}

.profile-required-note {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.password-field { position: relative; }

.password-field input { padding-right: 44px; }

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 3px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px;
  opacity: 0.6;
}

.password-toggle:hover { opacity: 1; }

.account-toggle { align-self: center; }

.account-forgot-link {
  align-self: flex-end;
  margin-top: -6px;
  font-size: 12px;
}

#account-email-label[hidden], #account-password-label[hidden], .account-forgot-link[hidden] { display: none; }
#prix-nuit-label[hidden] { display: none; }
#langue-field-label[hidden] { display: none; }
#type-bien-presets-pro[hidden] { display: none; }

.account-error { color: var(--bad); font-size: 16px; margin: 0; }
.account-info { color: var(--ok); font-size: 16px; margin: 0; }

/* Liens vers les pages légales dans les petites mentions (inscription,
   abonnement) : couleur du texte, soulignés pour rester repérables. */
.subscribe-terms a {
  color: inherit;
  text-decoration: underline;
}

.subscribe-terms-links { margin-top: 6px; }

.account-terms-note { margin: 0; }

.site-footer .link-btn[aria-current="page"] { color: var(--accent-dark); }

/* Pages légales : un long texte lu d'un bout à l'autre, d'où une colonne
   plus étroite qu'ailleurs et un interlignage aéré. */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.legal-note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

.legal-document {
  line-height: 1.65;
  overflow-wrap: break-word;
}

.legal-document h2 {
  font-size: 18px;
  margin: 32px 0 10px;
}

.legal-document p { margin: 0 0 14px; }
.legal-document ul { margin: 0 0 14px; padding-inline-start: 22px; }
.legal-document li { margin-bottom: 8px; }
.legal-document a { color: var(--accent-dark); }
.legal-updated { color: var(--muted); font-size: 14px; }

@media (max-width: 600px) {
  .legal-document { padding: 22px 18px; }
  .legal-document h2 { font-size: 16px; }
}

.modal-disclaimer {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.chat-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent-dark);
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.chat-toggle svg { width: 26px; height: 26px; }
.chat-toggle .chat-icon-stroke { stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; fill: none; }
.chat-toggle .chat-icon-dot { fill: #fff; }

.chat-toggle:hover { transform: translateY(-2px) scale(1.04); }

.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 48px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 40;
}

.chat-panel[hidden], .chat-toggle[hidden] { display: none; }

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--accent-dark);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
}

.chat-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

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

#chat-langue-select {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  padding: 3px 6px;
  cursor: pointer;
}

#chat-langue-select option { color: var(--text); }

#chat-lang-switcher-trigger {
  padding: 3px 9px 3px 7px;
  gap: 5px;
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

#chat-lang-switcher-trigger:hover, #chat-lang-switcher-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
}

#chat-lang-switcher-trigger .language-globe { font-size: 12px; }
#chat-lang-switcher-trigger .user-menu-chevron { width: 8px; height: 8px; color: #fff; }

#chat-lang-switcher-dropdown {
  min-width: 150px;
  left: auto;
  right: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
}

#chat-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}

#chat-close:hover { background: rgba(255, 255, 255, 0.15); }

/* .chat-header button { color: #fff } a une spécificité plus forte que
   .user-menu-item : sans cette règle, le texte des options non
   sélectionnées reste blanc sur fond blanc, donc invisible. */
#chat-lang-switcher-dropdown .user-menu-item {
  color: var(--text);
  font-size: 13.5px;
  padding: 7px 10px;
}

.chat-email-tool-btn {
  width: 100%;
  padding: 8px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

.chat-email-tool-btn[hidden] { display: none; }

.email-tool-panel {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.email-tool-panel[hidden] { display: none; }

.email-tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 2px;
}

.email-tool-header button {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
}

.email-tool-panel label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

.email-tool-panel input,
.email-tool-panel select,
.email-tool-panel textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  border: 1px solid var(--border-interactive);
  border-radius: 8px;
  font-size: 12.5px;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: #fff;
  resize: vertical;
}

.email-tool-panel input:focus,
.email-tool-panel select:focus,
.email-tool-panel textarea:focus {
  outline: none;
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 2px rgba(15, 43, 69, 0.25);
}

#email-draft-btn, #email-send-btn {
  align-self: flex-start;
}

.email-review-note {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

.email-tool-status {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.email-tool-status[hidden] { display: none; }
.email-tool-status.error { color: var(--bad); }
.email-tool-status.success { color: var(--ok); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-soft);
}

.chat-messages[hidden] { display: none; }

.chat-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.chat-msg-assistant {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

#chat-greeting { max-width: 96%; }

.chat-msg-user {
  align-self: flex-end;
  background: var(--accent-dark);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-legal-notice {
  align-self: stretch;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12.5px;
  line-height: 1.4;
  font-style: italic;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.chat-form[hidden] { display: none; }

.chat-attach-btn {
  font-size: 16px;
}

.chat-attachment-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12px;
  color: var(--muted);
}

.chat-attachment-preview[hidden] { display: none; }

.chat-attachment-preview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-attachment-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  width: auto;
  height: auto;
}

.chat-form input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border-interactive);
  border-radius: 14px;
  font-size: 16px;
  color: var(--text);
  background: #fff;
}

.chat-form input:focus {
  outline: none;
  /* border-color seul (14.46:1 sur blanc) porte la conformité WCAG 1.4.11 ;
     l'ancien box-shadow en --accent-soft n'atteignait que 1.23:1, quasi
     invisible pour un utilisateur malvoyant naviguant au clavier. */
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(15, 43, 69, 0.25);
}

.chat-form button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent-dark);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.chat-form button:hover { background: var(--accent); color: var(--accent-text); }

@media (max-width: 480px) {
  .chat-panel {
    width: calc(100vw - 32px);
    right: 16px;
    bottom: 16px;
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
  }
}

/* Page publique d'annonce (/l/{slug}) */

.listing-page[hidden] { display: none; }

.listing-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 24px;
}

.listing-photos img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
}

.listing-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 24px;
  align-items: start;
}

@media (max-width: 860px) {
  .listing-layout { grid-template-columns: 1fr; }
}

.listing-main .reference { margin-bottom: 8px; }

.listing-main h1 {
  margin: 0 0 6px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 32px);
  color: var(--text);
}

.listing-price {
  margin: 0 0 4px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--accent-dark);
}

.listing-map {
  display: block;
  width: 100%;
  height: 380px;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.listing-map[hidden] { display: none; }

.form-map-preview {
  height: 520px;
  margin-bottom: 20px;
}

#listing-map-unavailable { color: var(--muted); margin: 10px 0; }
#listing-map-unavailable[hidden] { display: none; }

.resume-investisseur-block[hidden] { display: none; }

.resume-investisseur-block {
  margin: 18px 0;
}

.resume-investisseur-block .resume-investisseur-titre {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 8px;
}

.resume-investisseur-block .resume-investisseur {
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.listing-description {
  margin: 18px 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-line;
}

.listing-points {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  color: var(--muted);
}

.listing-points li::before { content: "✓ "; color: var(--sage); font-weight: 700; }

.listing-booking[hidden] { display: none; }
.listing-reviews[hidden] { display: none; }

.listing-reservation-link {
  grid-column: 1 / -1;
  margin: -12px 0 0;
}
.listing-reservation-link[hidden] { display: none; }

.listing-reservation-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.listing-reservation-link a::after { content: "↗"; font-weight: 400; }
.listing-reservation-link a:hover { background: var(--accent); color: var(--accent-text); }

.review-row {
  border-top: 1px solid var(--border);
  padding: 10px 0;
  font-size: 16px;
}

.review-row:first-of-type { border-top: none; padding-top: 0; }

.review-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.review-row-top strong { font-size: 16px; }

.review-stars { color: var(--warn); letter-spacing: 1px; }

#reviews-summary { color: var(--muted); margin: 4px 0 12px; }

/* Page de recherche d'espaces professionnels */

.search-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.search-page #invite-establishment-box {
  margin: 20px 0 24px;
}

.search-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.search-form label { flex: 1; min-width: 180px; margin-bottom: 0; }

.search-form .hero-cta { flex-shrink: 0; }

#search-results-count { color: var(--muted); margin: 0 0 14px; }

.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.search-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

.search-card:hover { transform: translateY(-2px); }

.search-card img, .search-card-placeholder {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: var(--bg-soft);
}

.search-card-body { padding: 14px 16px; }

.search-card-body strong { display: block; font-size: 16px; margin-bottom: 4px; }

.search-card-body .short { margin: 0 0 4px; font-size: 12px; }

.search-card-price { font-weight: 700; color: var(--accent-dark); margin: 4px 0; font-size: 16px; }

.search-card-reservation {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.search-card-reservation::after { content: "↗"; font-weight: 400; }
.search-card-reservation:hover { background: var(--accent); color: var(--accent-text); }

#search-no-results[hidden] { display: none; }

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.calendar-nav button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 16px;
}

.calendar-nav button:hover { background: var(--accent-soft); }

.calendar-nav span {
  font-size: 16px;
  font-weight: 650;
  text-transform: capitalize;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendar-day-label {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-weight: 650;
  padding: 4px 0;
}

.calendar-cell {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.calendar-cell:hover:not(:disabled) { border-color: var(--accent); }

.calendar-cell-disabled {
  color: var(--muted);
  background: var(--bg-soft);
  text-decoration: line-through;
  cursor: not-allowed;
}

.calendar-cell-selected, .calendar-cell-in-range {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}

.calendar-legend {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.dot-booked { background: var(--bg-soft); border: 1px solid var(--border); }
.dot-selected { background: var(--accent); margin-left: 10px; }

.date-range-label { position: relative; }

.date-range-trigger {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  text-align: left;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.date-range-trigger:hover { border-color: #d9bfae; }

.date-range-trigger.active {
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(15, 43, 69, 0.25);
}

.calendar-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: 300px;
  margin: 4px 0 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.calendar-popup[hidden] { display: none; }

#selected-dates-info[hidden], #booking-form[hidden] { display: none; }

.booking-status { margin-top: 10px; font-size: 16px; }
.booking-status.error { color: var(--bad); }
.booking-status[hidden] { display: none; }

#booking-confirmation[hidden] { display: none; }
#booking-confirmation p { font-size: 16px; margin: 0 0 12px; }
#booking-confirmation .hero-cta { margin: 0 8px 8px 0; }

#listing-not-found[hidden] { display: none; }
#listing-not-found { text-align: center; margin: 60px auto; }

/* Modale "Mes annonces publiées" */

.my-listings-panel { width: 640px; }

.listing-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.listing-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.listing-card-top strong { font-size: 16px; }

.listing-card .short { margin: 4px 0 10px; }

.booking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 16px;
  flex-wrap: wrap;
}

.booking-row:first-of-type { border-top: none; padding-top: 0; }

.booking-row .booking-guest { color: var(--text); font-weight: 600; }
.booking-row .booking-dates { color: var(--muted); }
.booking-row .booking-links a { margin-left: 8px; font-size: 12px; }

.listing-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.listing-stats-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.listing-stats-item strong {
  font-family: "Fraunces", serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.listing-stats-item span {
  font-size: 11.5px;
  color: var(--muted);
}

.listing-stats-languages {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.listing-stats-languages-title {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.listing-stats-lang-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 16px;
  color: var(--text);
}

.dashboard-listings {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.dashboard-listing-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 16px;
  color: var(--text);
  border-top: 1px solid var(--border);
}

.dashboard-listing-row:first-of-type { border-top: none; }

.dashboard-listing-row span:first-child {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-listing-row span:last-child {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
}

.translation-row {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 16px;
}
.translation-row:first-of-type { border-top: none; padding-top: 0; }
.translation-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.translation-row .booking-guest { color: var(--text); font-weight: 600; }
.translation-row .booking-dates { color: var(--muted); }
.translation-row .booking-links { display: flex; flex-wrap: wrap; gap: 4px; }
.translation-content {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-soft);
  border-radius: 8px;
}
.translation-content p { margin: 0 0 6px; }
.translation-content ul { margin: 0; padding-left: 18px; }

/* Boîte de motif obligatoire (rejet d'annonce, bannissement, signalement) :
   une vraie zone de saisie et un vrai bouton, pas des éléments HTML nus —
   ce sont des actions sérieuses et irréversibles, l'interface doit le
   refléter au même niveau de soin que le reste du site. Autonome (ne
   dépend pas de .translation-content) pour être réutilisable partout. */
.reason-box {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg-soft);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reason-box[hidden] { display: none; }

.reason-box input[type="text"],
.reason-box textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-interactive);
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--panel);
  resize: vertical;
}

.reason-box textarea { min-height: 84px; }

.reason-box input[type="text"]::placeholder,
.reason-box textarea::placeholder { color: var(--muted); }

.reason-box input[type="text"]:focus,
.reason-box textarea:focus {
  outline: none;
  /* border-color seul (14.46:1 sur blanc) porte la conformité WCAG 1.4.11 ;
     l'ancien box-shadow en --accent-soft n'atteignait que 1.23:1, quasi
     invisible pour un utilisateur malvoyant naviguant au clavier. */
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(15, 43, 69, 0.25);
}

.reason-box-btn {
  align-self: flex-start;
  padding: 11px 22px;
  border: none;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s ease;
}

.reason-box-btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.reason-box-btn-danger {
  background: var(--bad);
  color: #fff;
  box-shadow: 0 2px 8px rgba(179, 87, 74, 0.32);
}
.reason-box-btn-danger:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(179, 87, 74, 0.4); }

.reason-box-btn-neutral {
  background: var(--accent-dark);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 43, 69, 0.25);
}
.reason-box-btn-neutral:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 43, 69, 0.32); }

.reason-box-btn-centered { align-self: center; padding: 13px 34px; min-width: 220px; }

/* File "Signalements d'absence" : les deux actions de décision (valider /
   refuser) sont la première chose vue, à poids égal, avant le motif. */
.no-show-decision {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.no-show-decision[hidden] { display: none; }

.no-show-decision .reason-box-btn {
  flex: 1;
  text-align: center;
}

.reason-box-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.reason-box-required {
  color: var(--bad);
  margin-left: 3px;
  font-weight: 700;
}

.reason-box-back-btn {
  align-self: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.8;
}
.reason-box-back-btn:hover { opacity: 1; }

/* Lien "Voir la preuve" : doit se reconnaître comme un lien au premier
   coup d'œil, pas se confondre avec le texte d'information au-dessus. */
.proof-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.proof-link svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Modale "Mon équipe" */

.team-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 16px;
  flex-wrap: wrap;
}

.team-member-row:first-of-type { border-top: none; padding-top: 0; }

#team-seat-count { color: var(--muted); margin: 4px 0 10px; }

.team-invite-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.team-invite-form label { flex: 1; min-width: 200px; }

.team-invite-form .account-submit { width: auto; padding: 10px 18px; }

#team-invite-status[hidden] { display: none; }
#team-invite-result[hidden] { display: none; }

/* Bannière d'invitation d'équipe */

.team-join-banner {
  max-width: 640px;
  margin: 0 auto 12px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 16px;
  text-align: center;
}

.team-join-banner-error { background: var(--bad-soft); color: var(--bad); }

#team-join-banner[hidden] { display: none; }

/* Page de gestion de l'abonnement */

.billing-hero { padding-bottom: 8px; }

.billing-title { margin-bottom: 4px; }

.billing-page {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.billing-back-link { align-self: flex-start; }

.billing-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.billing-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.billing-plan-name {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--accent-dark);
}

.billing-plan-price {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.billing-next-date, .billing-cancel-scheduled {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

.billing-cancel-scheduled { color: var(--warn); }

.account-deletion-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.billing-danger-link { align-self: flex-start; color: var(--bad); }
.billing-danger-link:hover { color: var(--bad); opacity: 0.75; }

.billing-tier-switch { align-self: flex-start; }
.billing-tier-switch .link-btn { color: var(--accent-dark); }
.billing-tier-switch .link-btn[hidden] { display: none; }

.billing-inline-confirm {
  background: var(--bg-soft);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.billing-inline-confirm[hidden] { display: none; }

.billing-inline-confirm p { margin: 0; font-size: 16px; color: var(--text); }
.billing-no-refund-note { color: var(--muted) !important; font-size: 12px !important; }

.billing-pause-duration {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}

.billing-pause-duration select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 1px solid var(--border-interactive);
  border-radius: 14px;
  font-size: 16px;
  color: var(--text);
  background: #fff;
}

.billing-inline-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.billing-cta-danger {
  background: var(--bad);
  color: #fff;
  box-shadow: none;
}
.billing-cta-danger:hover { transform: none; box-shadow: 0 4px 10px rgba(179, 87, 74, 0.3); }

.billing-payment-row { margin: 0; }

.billing-payment-text {
  margin: 0;
  font-size: 16px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.billing-info-row { margin: 0; font-size: 16px; color: var(--text); }
.billing-info-row span:first-child { color: var(--muted); }

#billing-info-edit-open { align-self: flex-start; margin-top: 2px; }

.billing-modal-actions { margin-top: 16px; }

#billing-payment-element { margin: 16px 0 4px; }

.subscribe-modal-panel { width: 420px; }

.subscribe-subtitle {
  margin: 4px 0 24px;
  color: var(--muted);
  font-size: 16px;
}

.subscribe-section { margin-bottom: 20px; }

.subscribe-section-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.subscribe-email {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 16px;
}

#new-sub-payment-element { margin-top: 2px; }

.subscribe-reassurance {
  margin: 20px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 13px;
  text-align: center;
}

.subscribe-terms {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

#billing-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
#billing-empty[hidden] { display: none; }

.billing-empty-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.billing-empty-plan {
  flex: 1 1 220px;
  align-items: stretch;
}

.billing-empty-plan .billing-subscribe-btn {
  width: 100%;
  margin-top: auto;
}