/* =========================================================================
   SexFriend — "NIGHT MODE / SWIPE APP" (Spark After Dark)
   main.css : composants home + page profil variant A + tchat + responsive
   ========================================================================= */

/* Garde-fou icônes (au cas où non chargé via critical) */
svg.icon, .icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: currentColor; }

/* Motif partagé : sections sombres avec spark grid + halo */
.hp-section--hero-conversion,
.hp-section--profils,
.hp-section--cta,
.hp-section--cta-secondary { position: relative; }

/* =====================================================================
   LEAD FORM (carton d'inscription de l'app)
   ===================================================================== */
.hp-section__lead-form,
.hp-section__lead-form--embedded {
  position: relative;
  z-index: 2;
}
.hp-section--hero-conversion .hero__inner { align-items: stretch; }

.lead-form {
  position: relative;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-top: 2px solid var(--violet);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--sh-2), 0 0 30px rgba(104,62,204,.18);
  max-width: 460px;
}
.hero--b .lead-form,
.hp-section__lead-form--embedded .lead-form { margin-inline: auto; }

.lead-form__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: var(--sp-4);
}

/* Barre d'onboarding : traits, actif allongé */
.lead-form__step-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-5);
}
.lead-form__step-dot {
  width: 6px; height: 4px;
  border-radius: var(--r-full);
  background: var(--line);
  transition: width .25s ease, background-color .25s ease;
}
.lead-form__step-dot.is-active,
.lead-form__step-dot--active {
  width: 24px;
  background: var(--violet);
}

.lead-form__step { display: none; }
.lead-form__step.is-active { display: block; }

/* Chips genre (radios cachés) */
.lead-form__gender-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.lead-form__gender-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.lead-form__gender-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--sp-2);
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--paper-dim);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-align: center;
  cursor: pointer;
  transition: transform .14s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.lead-form__gender-btn:hover { border-color: var(--violet); color: var(--paper); }
.lead-form__gender-group input[type="radio"]:checked + .lead-form__gender-btn,
.lead-form__gender-btn.is-checked {
  background: var(--violet);
  color: var(--white);
  border-color: var(--violet);
  transform: scale(1.03);
  box-shadow: 0 4px 14px var(--violet-glow);
}

/* Champs */
.form-group { margin-bottom: var(--sp-4); }
.form-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  color: var(--paper-dim);
  margin-bottom: var(--sp-2);
}
.form-input,
.form-select,
.lead-form input.form-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color .18s ease, box-shadow .2s ease;
}
.form-input::placeholder,
.form-select::placeholder { color: var(--paper-faint); }
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: var(--sh-glow);
}
.form-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%), linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-8);
}
.lead-form .btn-block { height: 52px; margin-top: var(--sp-2); }
.lead-form .btn-secondary { margin-top: var(--sp-2); }

/* =====================================================================
   REASSURANCE (3 feature-tiles alignées à gauche)
   ===================================================================== */
.hp-section--reassurance .section { background: var(--ink-800); }
.hp-section--reassurance .section-title { text-align: center; }

.hp-section--reassurance .container > .reassurance-item,
.reassurance-grid {
  display: grid;
}
/* Le DOM place les 3 items directement : on grille le conteneur via règle ciblée */
.hp-section--reassurance .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
.hp-section--reassurance .section-title { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .hp-section--reassurance .container {
    grid-template-columns: repeat(3, 1fr);
  }
  .hp-section--reassurance .section-title { grid-column: 1 / -1; }
}

.reassurance-item {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .22s ease;
}
.reassurance-item:hover {
  transform: translateY(-2px);
  border-color: var(--violet);
  box-shadow: var(--sh-lift);
}
.reassurance-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--ink-600);
  border-radius: var(--r-sm);
  color: var(--violet);
  margin-bottom: var(--sp-3);
}
.reassurance-item__icon svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.reassurance-item__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: var(--sp-2);
}
.reassurance-item__desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--paper-dim);
  line-height: 1.6;
  margin: 0;
}

/* =====================================================================
   CTA (bloc card centré sur noir + halo — jamais bandeau pleine largeur)
   ===================================================================== */
.cta-section {
  position: relative;
  background: var(--ink-900);
  overflow: hidden;
}
.cta-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dot-grid);
  background-size: 22px 22px;
  opacity: .4;
  pointer-events: none;
}
.cta-section .container {
  position: relative;
  z-index: 1;
  max-width: 720px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-bottom: 2px solid var(--pink);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--sh-2), 0 0 40px var(--violet-glow);
}
.cta-section--a .container { border-color: var(--violet); border-bottom-color: var(--pink); }
.cta-section__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--paper);
  margin-bottom: var(--sp-3);
}
.cta-section__desc {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--paper-dim);
  margin-bottom: var(--sp-6);
}
.cta-section__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* =====================================================================
   PROFILS — GRILLE de match-cards (swipe deck)
   ===================================================================== */
.hp-section--profils {
  background: var(--ink-900);
  padding-block: var(--sp-10);
  position: relative;
}
.hp-section--profils::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dot-grid);
  background-size: 22px 22px;
  opacity: .35;
  pointer-events: none;
}
.hp-section__title {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto var(--sp-6);
  padding-inline: var(--sp-5);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  letter-spacing: -.03em;
  color: var(--paper);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.hp-section__title .count,
.hp-section__title span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.listing-grid.listing-grid--annonces {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.card-annonce {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .2s ease, border-color .18s ease, box-shadow .24s ease;
}
.card-annonce:hover {
  transform: translateY(-4px);
  border-color: var(--violet);
  box-shadow: var(--sh-lift);
}
.card-annonce__link { display: block; color: inherit; }
.card-annonce__link:hover { color: inherit; }

.card-annonce__image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-600);
}
.card-annonce__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.card-annonce:hover .card-annonce__image img { transform: scale(1.04); }
.card-annonce__image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,9,24,.72) 0%, transparent 42%);
  pointer-events: none;
}
.card-annonce__photo-count {
  position: absolute;
  top: var(--sp-2); right: var(--sp-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(10,9,24,.7);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 3px 9px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}
.card-annonce__photo-count svg { width: 1em; height: 1em; fill: currentColor; }

.card-annonce__content { padding: 14px; }
.card-annonce__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0 0 var(--sp-2);
}
/* badge "✓ Vérifié" inline */
.card-annonce__title span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--teal);
  color: var(--ink-900);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  line-height: 1.4;
}

.card-annonce__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-2);
}
.card-annonce__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 3px 9px;
  font-size: 12px;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}
.card-annonce__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .02em;
  border: 1px solid var(--line);
}
.card-annonce__badge-dot {
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: var(--paper-faint);
  flex: 0 0 auto;
}
.card-annonce__badge--online { color: var(--teal); }
.card-annonce__badge--online .card-annonce__badge-dot {
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(48,166,166,.6);
  animation: sf-pulse 1.8s infinite;
}
.card-annonce__badge--recent { color: var(--amber); }
.card-annonce__badge--recent .card-annonce__badge-dot { background: var(--amber); }
.card-annonce__badge--offline { color: var(--paper-faint); }
.card-annonce__badge--offline .card-annonce__badge-dot { background: var(--paper-faint); }

.card-annonce__excerpt {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-dim);
  margin: var(--sp-2) 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   CITIES
   ===================================================================== */
.hp-section--cities {
  background: var(--ink-800);
}
.hp-section--cities:empty { display: none; }
.hp-section--cities .container { padding-block: var(--sp-8); }

/* =====================================================================
   FAQ (cards accordéon)
   ===================================================================== */
.hp-section--faq .section--alt { background: var(--ink-800); }
.hp-section--faq .section-title { text-align: center; }
.faq-list {
  max-width: 760px;
  margin-inline: auto;
}
.faq-item {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .18s ease;
}
.faq-item > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 18px var(--sp-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -.01em;
  color: var(--paper);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--paper-dim);
  transition: transform .22s ease, color .18s ease;
  flex: 0 0 auto;
}
.faq-item > summary:hover {
  color: var(--paper);
  background: var(--ink-600);
}
.faq-item[open] {
  border-color: var(--violet);
}
.faq-item[open] > summary {
  color: var(--violet-bright);
  border-left: 3px solid var(--violet);
  padding-left: calc(var(--sp-5) - 3px);
}
.faq-item[open] > summary::after {
  transform: rotate(45deg);
  color: var(--violet);
}
.faq-item__answer {
  padding: 0 var(--sp-5) 18px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-dim);
}
.faq-item__answer p { margin: 0 0 var(--sp-3); }
.faq-item__answer p:last-child { margin-bottom: 0; }

/* =====================================================================
   FOOTER (app footer sobre, dense)
   ===================================================================== */
.site-footer {
  position: relative;
  background: var(--ink-900);
  border-top: 1px solid var(--line);
  color: var(--paper-dim);
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--violet);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-5);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-8);
}
.site-footer__col h3,
.site-footer__col h4,
.site-footer__col strong,
.site-footer__col-title {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: var(--paper-dim);
  margin: 0 0 var(--sp-4);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__col a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--paper-faint);
  transition: color .18s ease, transform .18s ease;
  display: inline-block;
}
.site-footer__col a:hover {
  color: var(--paper);
  transform: translateX(3px);
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.site-footer__logo-icon {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--violet);
  color: var(--white);
  padding: 5px;
}
.site-footer__baseline {
  font-size: 14px;
  color: var(--paper-dim);
  margin-bottom: var(--sp-3);
  max-width: 34ch;
}
.site-footer__badge-18 {
  display: inline-flex;
  align-items: center;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--paper-dim);
}
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--paper-faint);
}
.site-footer__bottom a { color: var(--paper-faint); }
.site-footer__bottom a:hover { color: var(--paper); }
.site-footer__bottom-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* =====================================================================
   STICKY CTA BAR
   ===================================================================== */
.sticky-cta-bar,
.sticky-cta-bar--dark {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--ink-700);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0,0,0,.5);
  transition: transform .3s ease;
}
.sticky-cta-bar.is-hidden { transform: translateY(110%); }
.sticky-cta-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.sticky-cta-bar__btn { flex: 1 1 auto; max-width: 420px; }
.sticky-cta-bar__close {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--paper-dim);
  font-size: 1.1rem;
  line-height: 1;
  transition: color .18s ease, border-color .18s ease;
}
.sticky-cta-bar__close:hover { color: var(--paper); border-color: var(--violet); }

/* =====================================================================
   CONSENT BANNER (caché par défaut)
   ===================================================================== */
.consent-banner {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: var(--ink-800);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(0,0,0,.55);
}
.consent-banner.is-visible { display: block; }
.consent-banner__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.consent-banner__text {
  font-size: var(--fs-sm);
  color: var(--paper-dim);
  max-width: 62ch;
  margin: 0;
}
.consent-banner__text a { color: var(--violet-bright); }
.consent-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* =====================================================================
   EMAIL MODALES (#emailModal / #bannerEmailModal) — cachées par défaut
   ===================================================================== */
.email-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(10,9,24,.85);
  backdrop-filter: blur(6px);
}
.email-modal[aria-hidden="false"] { display: flex; }
.email-modal__panel,
.email-modal__content {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-top: 2px solid var(--violet);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-2), 0 0 40px var(--violet-glow);
}
.email-modal__title,
.email-modal h2,
.email-modal h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: var(--sp-3);
}
.email-modal p {
  font-size: var(--fs-sm);
  color: var(--paper-dim);
  margin-bottom: var(--sp-4);
}
.email-modal .form-input { margin-bottom: var(--sp-3); }
.email-modal__close {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--paper-dim);
  font-size: 1.1rem;
  line-height: 1;
  transition: color .18s ease, border-color .18s ease;
}
.email-modal__close:hover { color: var(--paper); border-color: var(--violet); }

/* =========================================================================
   PAGE PROFIL — variant A
   ========================================================================= */
.single-profil,
.single-profil--a {
  background: var(--ink-900);
  position: relative;
}
.single-profil::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dot-grid);
  background-size: 22px 22px;
  opacity: .3;
  pointer-events: none;
}

/* Breadcrumbs (fil inline) */
.breadcrumbs {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-5) 0;
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: var(--fs-sm);
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  color: var(--paper-dim);
}
.breadcrumbs__item:not(:last-child)::after {
  content: "›";
  margin: 0 var(--sp-2);
  color: var(--paper-faint);
}
.breadcrumbs__item a { color: var(--paper-dim); }
.breadcrumbs__item a:hover { color: var(--violet-bright); }
.breadcrumbs__item:last-child { color: var(--paper); }

/* Layout */
.single-profil__page-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-10);
}
.single-profil__main { min-width: 0; }
.single-profil__sidebar { display: none; }

/* Card principale */
.single-profil__card {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-2);
  margin-bottom: var(--sp-6);
}
.single-profil__top {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
}
.single-profil__photo {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  max-width: 40%;
}
.single-profil__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.single-profil__badge {
  position: absolute;
  left: var(--sp-2); bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .03em;
  border: 1px solid rgba(10,9,24,.3);
  backdrop-filter: blur(4px);
}
.single-profil__badge-dot {
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: currentColor;
  flex: 0 0 auto;
}
.single-profil__badge--online { background: rgba(48,166,166,.16); color: var(--teal); }
.single-profil__badge--online .single-profil__badge-dot {
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(48,166,166,.6);
  animation: sf-pulse 1.8s infinite;
}
.single-profil__badge--recent { background: rgba(245,166,35,.15); color: var(--amber); }
.single-profil__badge--offline { background: rgba(110,106,143,.18); color: var(--paper-dim); }
.single-profil__badge--dispo { background: rgba(224,71,156,.16); color: var(--pink); }

.single-profil__info { flex: 1 1 auto; min-width: 0; }
.single-profil__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 var(--sp-1);
}
.single-profil__handle {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--paper-faint);
  margin: 0 0 var(--sp-4);
}
.single-profil__meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.single-profil__meta-item { display: inline-flex; }
.single-profil__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}
.single-profil__tag--distance {
  color: var(--violet-bright);
  border-color: var(--violet);
  background: rgba(104,62,204,.14);
}
.single-profil__social-proof,
.single-profil__viewers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--teal);
  margin-bottom: var(--sp-4);
}
.single-profil__social-proof svg { width: 1em; height: 1em; fill: currentColor; }
.single-profil__desc-courte {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--paper);
  line-height: 1.6;
  margin: 0;
}

/* Desc SEO */
.single-profil__desc,
.single-profil__desc.content-area {
  font-family: var(--font-body);
  color: var(--paper-dim);
  line-height: 1.7;
  max-width: 68ch;
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.single-profil__desc h2,
.single-profil__desc h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--paper);
  margin-top: var(--sp-5);
}
.single-profil__desc p { margin-bottom: var(--sp-4); }
.single-profil__desc a { color: var(--violet-bright); }

/* Related links */
.single-profil__related-links {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.single-profil__related-links strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: var(--paper-dim);
  margin-bottom: var(--sp-3);
}
.single-profil__links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.single-profil__links-list a {
  display: inline-flex;
  align-items: center;
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: var(--fs-sm);
  color: var(--paper-dim);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.single-profil__links-list a:hover {
  border-color: var(--violet);
  color: var(--paper);
  background: var(--ink-700);
}

/* =====================================================================
   CHAT (messagerie d'app — profil en ligne)
   ===================================================================== */
.chat {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  display: flex;
  flex-direction: column;
  max-height: 620px;
}
.chat__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-800);
  border-bottom: 1px solid var(--line);
}
.chat__header-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 42px; height: 42px;
}
.chat__avatar-img {
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 1px solid var(--line);
}
.chat__header-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 12px; height: 12px;
  border-radius: var(--r-full);
  background: var(--teal);
  border: 2px solid var(--ink-800);
  box-shadow: 0 0 0 0 rgba(48,166,166,.6);
  animation: sf-pulse 1.8s infinite;
}
.chat__header-info { display: flex; flex-direction: column; gap: 1px; }
.chat__header-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--paper);
}
.chat__header-status {
  font-size: 12px;
  color: var(--teal);
}
.chat__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-4);
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 260px;
}
.chat__bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  word-wrap: break-word;
}
.chat__bubble--profil {
  align-self: flex-start;
  background: var(--ink-600);
  color: var(--paper);
  border-bottom-left-radius: 2px;
}
.chat__bubble--user {
  align-self: flex-end;
  background: var(--violet);
  color: var(--white);
  border-bottom-right-radius: 2px;
  box-shadow: 0 2px 12px var(--violet-glow);
}
.chat__typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ink-600);
  border-bottom-left-radius: 2px;
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.chat__typing-dot {
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: var(--paper-dim);
  animation: sf-typing 1.3s infinite ease-in-out;
}
.chat__typing-dot:nth-child(2) { animation-delay: .18s; }
.chat__typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes sf-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.chat__input-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-800);
  border-top: 1px solid var(--line);
}
.chat__input {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 var(--sp-4);
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  transition: border-color .18s ease, box-shadow .2s ease;
}
.chat__input::placeholder { color: var(--paper-faint); }
.chat__input:focus { outline: none; border-color: var(--violet); box-shadow: var(--sh-glow); }
.chat__send {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--violet);
  border: none;
  border-radius: var(--r-sm);
  color: var(--white);
  transition: background-color .18s ease, box-shadow .2s ease;
}
.chat__send svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.chat__send:hover { background: var(--violet-bright); box-shadow: 0 4px 16px var(--violet-glow); }

/* =====================================================================
   CONTACT CARD (profil hors ligne)
   ===================================================================== */
.single-profil__contact-card {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-2);
}
.single-profil__contact-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.single-profil__contact-avatar {
  width: 46px; height: 46px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--ink-600);
  flex: 0 0 auto;
}
.single-profil__contact-who { display: flex; flex-direction: column; gap: 1px; }
.single-profil__contact-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--paper);
}
.single-profil__contact-offline {
  font-size: 12px;
  color: var(--paper-faint);
}
.single-profil__contact-prompt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--paper-dim);
  margin-bottom: var(--sp-4);
}
.single-profil__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.single-profil__textarea {
  width: 100%;
  min-height: 110px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  resize: vertical;
  transition: border-color .18s ease, box-shadow .2s ease;
}
.single-profil__textarea::placeholder { color: var(--paper-faint); }
.single-profil__textarea:focus { outline: none; border-color: var(--violet); box-shadow: var(--sh-glow); }
.single-profil__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.single-profil__chips-label {
  font-size: 12px;
  color: var(--paper-faint);
}
.single-profil__chip {
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--paper-dim);
  transition: border-color .18s ease, color .18s ease;
}
.single-profil__chip:hover { border-color: var(--violet); color: var(--paper); }
.single-profil__submit { width: 100%; height: 52px; }

/* =====================================================================
   MAILLAGE (titre section + all-link ; cartes inline non touchées)
   ===================================================================== */
.maillage__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -.03em;
  color: var(--paper);
  max-width: var(--container-max);
  margin: var(--sp-8) auto var(--sp-4);
  padding-inline: var(--sp-5);
}
.maillage__all-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--violet);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--violet-bright);
  transition: background-color .18s ease, color .18s ease, box-shadow .2s ease;
}
.maillage__all-link:hover {
  background: var(--violet);
  color: var(--white);
  box-shadow: 0 4px 16px var(--violet-glow);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .single-profil__page-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .section { padding-block: var(--sp-8); }
  .section-title, .cta-section__title, .hp-section__title,
  .single-profil__name, .maillage__title { font-size: var(--fs-xl); }
  .grid-3 { grid-template-columns: 1fr; }
  .single-profil__top { flex-direction: column; }
  .single-profil__photo { width: 100%; max-width: 320px; }
  .single-profil__card { padding: var(--sp-5); }
  .chat { max-height: none; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .container { padding-inline: var(--sp-4); }
  .lead-form { padding: var(--sp-5); }
  .lead-form__gender-group { grid-template-columns: repeat(2, 1fr); }
  .listing-grid.listing-grid--annonces {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding-inline: var(--sp-4);
  }
  .card-annonce__content { padding: 10px; }
  .cta-section .container { padding: var(--sp-6) var(--sp-4); }
  .cta-section__actions .btn { width: 100%; }
  .hp-section__title { padding-inline: var(--sp-4); }
  .sticky-cta-bar__inner { padding-inline: var(--sp-4); }
  .breadcrumbs { padding-inline: var(--sp-4); }
  .single-profil__page-layout { padding-inline: 0; }
  .email-modal { padding: var(--sp-4); }
}

/* Garde-fou global overflow */
html, body { max-width: 100%; }
/* Correctif réassurance : 3 colonnes égales larges (items étaient rétrécis) */
.hp-section--reassurance .container > .reassurance-item{display:block;min-width:0;}
@media (min-width:760px){
  .hp-section--reassurance .container{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
.reassurance-item__title,.reassurance-item__desc{overflow-wrap:break-word;word-break:normal;}

/* Correctif fort réassurance : conteneur pleine largeur + 3 colonnes égales */
.hp-section--reassurance, .hp-section--reassurance > .section{width:100%;max-width:none;}
.hp-section--reassurance .container{
  width:100% !important; max-width:1180px !important; margin-inline:auto !important;
  display:grid !important; gap:24px !important; align-items:start !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media (max-width:700px){ .hp-section--reassurance .container{grid-template-columns:1fr !important;} }
.hp-section--reassurance .container > .reassurance-item{display:block;min-width:0;width:auto;}

/* VRAI correctif : les items sont dans .grid.grid-3 (wrapper), pas dans .container */
.hp-section--reassurance .container{display:block !important;max-width:1200px;margin-inline:auto;}
.hp-section--reassurance .grid-3, .grid-3{
  display:grid !important; gap:24px;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:start;
}
@media (max-width:700px){ .hp-section--reassurance .grid-3, .grid-3{grid-template-columns:1fr !important;} }

/* ============================================================
   PAGE ARCHIVE / LISTING (profils + villes) — layout auto-thémé
   ============================================================ */
.listing-page{max-width:1200px;margin-inline:auto;padding:26px 20px 66px;}
.listing-page__title{margin:10px 0 4px;}
.listing-page__count{opacity:.7;font-size:.9rem;margin-bottom:26px;font-family:var(--font-body,inherit);}
.listing-page__layout{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start;}
.listing-page__sidebar{display:flex;flex-direction:column;gap:24px;position:sticky;top:84px;}
.listing-page__sidebar-filters,.listing-page__sidebar-cities{display:flex;flex-direction:column;gap:12px;}
.listing-page__sidebar-cities::before{content:"Villes";display:block;font-family:var(--font-body,inherit);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;}
.listing-page__content{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:20px;align-content:start;}
.listing-page__content .listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:20px;}
.city-links{display:flex;flex-wrap:wrap;gap:8px;}
.search-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.search-filters input,.search-filters select{padding:9px 12px;border:1px solid var(--color-border,rgba(128,128,128,.28));border-radius:var(--radius,8px);background:transparent;color:inherit;font:inherit;font-size:.9rem;}
@media(max-width:900px){
  .listing-page__layout{grid-template-columns:1fr;}
  .listing-page__sidebar{position:static;flex-direction:row;flex-wrap:wrap;gap:16px;}
  .listing-page__sidebar-filters,.listing-page__sidebar-cities{flex:1;min-width:220px;}
}
@media(max-width:560px){.listing-page__content,.listing-page__content .listing-grid{grid-template-columns:1fr;}}

/* ============================================================
   POLISH DESIGN — espacements resserrés + grille réassurance
   ============================================================ */
/* Padding vertical des sections : capper les bandeaux géants */
.hp-section > .section, .hp-section > section.section, .section{ padding-block: clamp(34px,4.2vw,60px) !important; }
.hp-section--cta, .hp-section--cta-secondary{ padding-block: clamp(20px,3vw,40px) !important; }
.hp-section--cities{ padding-block: clamp(24px,3vw,42px) !important; }
.hp-section--profils{ padding-block: clamp(30px,3.5vw,52px) !important; }
/* Réassurance : 3 colonnes larges (le wrapper réel est .grid-3, pas .container) */
.hp-section--reassurance .container{ display:block !important; max-width:1200px; margin-inline:auto; }
.hp-section--reassurance .grid-3, .grid-3{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:24px; align-items:stretch;
}
@media(max-width:700px){ .hp-section--reassurance .grid-3, .grid-3{ grid-template-columns:1fr !important; } }
/* Pas de min-height géant qui gonfle hero/CTA */
.hero, .hero__inner, .cta-section, .hp-section{ min-height:auto !important; }
/* Réduire l'espace mort du hero conversion */
.hp-section--hero{ padding-block: clamp(24px,3vw,48px) clamp(30px,4vw,64px) !important; }

/* ===================== AUDIT FIXES — TRANSVERSAL ===================== */
/* 1. Grille archive/listing (cassée sur les 5 sites) */
.listing-page__layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:start}
.listing-page__content{min-width:0}
.listing-grid,.listing-grid--annonces,.listing-grid--full{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;gap:20px}
.listing-grid>*{min-width:0}
@media(max-width:900px){.listing-page__layout{grid-template-columns:1fr}}
/* 2. Hauteurs de cartes égalisées (home + archive) */
.hp-section--profils .listing-grid,.grid-3{align-items:stretch}
.card-annonce{display:flex;flex-direction:column;height:100%}
.card-annonce__link{display:flex;flex-direction:column;height:100%}
.card-annonce__content{flex:1;display:flex;flex-direction:column}
.card-annonce__excerpt{min-height:2.6em}
.reassurance-item{height:100%}
/* 3. CTA dupliqué masqué */
.hp-section--cta-secondary{display:none}
/* 4. Badge "Vérifié" vert -> couleur de marque */
.card-annonce__title span{background:var(--color-primary,#8b2040) !important;color:#fff !important;border-color:transparent !important}
/* 5. Pages villes (WP page) : mesure lisible + lead */
body.page:not(.home) #main.container{max-width:880px}
body.page:not(.home) .lead{font-size:1.13rem;line-height:1.7}
body.page:not(.home) #main.container>p,body.page:not(.home) #main.container>h2{max-width:72ch}
/* 6. Espace pour la sticky bar */
body{padding-bottom:64px}
.sticky-cta-bar__btn{white-space:nowrap}
.sticky-cta-bar__inner{padding-block:12px}
/* 7. Titre sidebar villes -> kicker small-caps */
.listing-page__sidebar .maillage__title,.listing-page__sidebar-cities>*:first-child,.listing-page__sidebar h2,.listing-page__sidebar h3{font-size:.72rem !important;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-body) !important;font-weight:700;color:var(--color-primary);margin:0 0 12px;line-height:1.3}
/* 8. Bande villes home resserrée */
.hp-section--cities{padding-block:clamp(24px,3vw,40px) !important}
/* 9. MOBILE — anti-débordement horizontal */
@media(max-width:760px){
  html,body{overflow-x:hidden}
  #main.container,.container,.single-profil,.listing-page,article,.hero,.hero__inner,.lead-form,.hp-section__lead-form,.cta-section,.card-annonce{max-width:100% !important;box-sizing:border-box}
  body.page:not(.home) #main.container{padding-inline:16px !important}
  .lead-form__gender-group{grid-template-columns:1fr !important}
  h1,h2,.hero__title,.section-title,.single-profil__name,.maillage__title,.listing-page__title,.hp-section__title,.card-annonce__title{overflow-wrap:anywhere;word-break:normal}
}
@media(max-width:560px){
  .listing-grid,.listing-grid--annonces,.listing-grid--full{grid-template-columns:repeat(2,1fr) !important;gap:12px}
  .card-annonce__image{aspect-ratio:3/4}
  .card-annonce__content{padding:10px 12px}
}


/* spark (rencontre-sexfriend) */
.hp-section--hero-conversion .hero__inner,.hero--a .hero__inner{grid-template-columns:1fr !important;max-width:560px;margin-inline:auto}
.hero__media{display:none}
.hero__content .hero__title{font-size:clamp(2.4rem,5vw,3.25rem)}
.reassurance-item__icon{width:48px !important;height:48px !important}
.card-annonce__excerpt{color:#B9B4D4}
.single-profil__desc,.content-area{color:#C7C3E0}
.lead-form__gender-group{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.hero__title{overflow-wrap:anywhere}.lead-form__gender-group{grid-template-columns:1fr !important}}


/* FIX archive variant b : content en block, la grille = .listing-grid */
.listing-page__content{display:block !important}
.listing-page__content>.listing-grid,.listing-grid,.listing-grid--full,.listing-grid--annonces{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;gap:20px}
@media(max-width:560px){.listing-page__content>.listing-grid,.listing-grid,.listing-grid--full,.listing-grid--annonces{grid-template-columns:repeat(2,1fr) !important;gap:12px}}

/* ============================================================
   HEADER DEFAULT — dark app (nav + CTA + hamburger) — spark
   ============================================================ */
.skip-link{position:absolute!important;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;z-index:100000}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;clip:auto;padding:8px 16px;background:var(--color-primary,#683ECC);color:#fff;font-weight:700;border-radius:6px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(18,16,32,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07);}
.site-header--dark{background:rgba(18,16,32,.92);}
.site-header__inner{display:flex;align-items:center;gap:24px;min-height:64px;padding-inline:clamp(16px,3vw,40px);}
.site-header__logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.site-header__logo-icon{width:30px;height:30px;flex-shrink:0;}
.site-header__logo-text{font-family:var(--font-heading,'Sora');font-weight:800;font-size:1.2rem;color:#fff;}
.site-header__logo-accent{color:var(--color-primary,#683ECC);}
.site-header__nav{margin-left:auto;display:flex;align-items:center;gap:26px;}
.site-header__nav-list{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0;}
.site-header__nav-link{font-family:var(--font-body,'DM Sans');font-size:.9rem;font-weight:600;color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap;transition:color .15s ease;}
.site-header__nav-link:hover{color:#fff;}
.site-header__online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#39d98a;margin-right:5px;vertical-align:middle;box-shadow:0 0 8px #39d98a;}
.site-header__cta-btn{white-space:nowrap;}
.site-header__separator{display:none;}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:none;border:0;padding:0;margin-left:auto;cursor:pointer;}
.menu-toggle__bar{position:relative;display:block;width:24px;height:2px;background:#fff;border-radius:2px;margin:0 auto;}
.menu-toggle__bar::before,.menu-toggle__bar::after{content:'';position:absolute;left:0;width:24px;height:2px;background:#fff;border-radius:2px;}
.menu-toggle__bar::before{top:-7px;}.menu-toggle__bar::after{top:7px;}
@media(max-width:768px){
  .menu-toggle{display:flex;}
  .site-header__nav{position:fixed;inset:0 0 0 auto;width:min(82vw,320px);flex-direction:column;align-items:flex-start;gap:10px;padding:88px 28px 28px;background:#14121f;box-shadow:-10px 0 46px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .25s ease;z-index:200;margin-left:0;}
  .site-header__nav.is-open,.site-header__nav[aria-expanded="true"]{transform:translateX(0);}
  .site-header__nav-list{flex-direction:column;align-items:flex-start;gap:20px;}
  .site-header__cta-btn{margin-top:12px;}
}

/* ---- Page inscription (SexFriend) ---- */
.register-page{padding:4rem 1rem;background:var(--ink-900,#0A0918)}
.register-page__box{max-width:30rem;margin-inline:auto;background:var(--ink-700,#1B1832);border:1px solid var(--line,#2C2850);border-top:2px solid var(--violet,#683ECC);border-radius:var(--r-md,10px);padding:2.2rem 2rem;box-shadow:0 0 30px rgba(104,62,204,.18)}
.register-page__title{font-family:var(--font-heading);font-size:1.8rem;line-height:1.12;margin:0 0 .5rem;color:var(--paper,#F4F3FA)}
.register-page__subtitle{color:var(--paper-dim,#A9A4C4);margin:0 0 1.2rem;font-size:.95rem}
.register-page__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.2rem 0;text-align:center}
.register-page__stat-number{display:block;font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--violet-bright,#8A63E8)}
.register-page__stat-label{font-size:.72rem;color:var(--paper-faint,#6E6A8F);letter-spacing:.05em}
.register-page__promise{font-size:.9rem;color:var(--paper-dim,#A9A4C4);border-left:2px solid var(--violet,#683ECC);padding-left:.9rem;margin-bottom:1.2rem}
.register-page__promise p{margin:0}
.register-form__label{display:block;font-size:.82rem;margin-bottom:.4rem;color:var(--paper,#F4F3FA)}
.register-form__input{width:100%;padding:.9rem 1rem;border:1px solid var(--line,#2C2850);border-radius:var(--r-sm,6px);font-size:1rem;margin-bottom:1rem;background:var(--ink-800,#131126);color:var(--paper,#F4F3FA)}
.register-form__input:focus{outline:2px solid var(--violet,#683ECC);outline-offset:1px}
.register-form__submit{width:100%;padding:1rem;font-size:1rem}
.register-page__trust{margin-top:1.2rem;font-size:.78rem;color:var(--paper-faint,#6E6A8F)}
.register-page__trust p{margin:.25rem 0}
.register-form__legal{margin-top:1rem;font-size:.72rem;color:var(--paper-faint,#6E6A8F)}
.register-form__legal a{color:var(--violet-bright,#8A63E8)}
@media(max-width:520px){.register-page{padding:2.2rem .8rem}.register-page__box{padding:1.6rem 1.2rem}}
/* Boutons + stat du hero */
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.2rem}
.hero__stat{margin-top:.9rem;font-size:.84rem;color:var(--paper-dim,#A9A4C4)}
.hero__stat-count{font-weight:700;color:var(--violet-bright,#8A63E8);font-size:1.05em}

/* ---- Pages villes (taxonomy) : grille + entête ---- */
.hp-classifieds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem;margin-top:1.2rem}
.hp-classifieds-header{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 1rem}
.hp-classifieds-header__title{margin:0}
.hp-classifieds-header__count{font-size:.85rem;opacity:.7}
.hp-pagination{display:flex;justify-content:center;gap:.4rem;margin-top:1.6rem}
.hp-pagination .page-numbers{padding:.5rem .85rem;border:1px solid var(--color-border,rgba(128,128,128,.35));border-radius:6px;text-decoration:none}
.hp-pagination .page-numbers.current{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
@media(max-width:600px){.hp-classifieds-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}}

/* ---- Layout pages villes : contenu + sidebar ---- */
.hp-classifieds-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.2rem;align-items:start}
@media(max-width:900px){.hp-classifieds-layout{grid-template-columns:1fr}}
.hp-classifieds-layout__sidebar{display:flex;flex-direction:column;gap:1.4rem}
.sidebar-search__box{background:var(--color-surface_alt,rgba(128,128,128,.08));border:1px solid var(--color-border,rgba(128,128,128,.25));border-radius:10px;padding:1.1rem 1.1rem;color:var(--color-text,inherit)}
.sidebar-search__box-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin:0 0 .7rem;color:var(--color-text,inherit)}
.sidebar-search__city-list{list-style:none;margin:0;padding:0}
.sidebar-search__city-list li{margin:0}
.sidebar-search__city-link{display:flex;justify-content:space-between;align-items:center;padding:.42rem .2rem;text-decoration:none;color:var(--color-text,inherit);border-bottom:1px solid var(--color-border,rgba(128,128,128,.15));font-size:.92rem}
.sidebar-search__city-link:hover .sidebar-search__city-name{color:var(--color-primary)}
.sidebar-search__city-list li:last-child .sidebar-search__city-link{border-bottom:0}
.sidebar-search__city-count{font-size:.78rem;opacity:.6}
.sidebar-search__nearby{display:flex;flex-direction:column;gap:.6rem}
.sidebar-search__nearby-card{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--color-text,inherit)}
.sidebar-search__nearby-img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sidebar-search__nearby-info{display:flex;flex-direction:column;line-height:1.25}
.sidebar-search__nearby-name{font-weight:600;font-size:.9rem}
.sidebar-search__nearby-card:hover .sidebar-search__nearby-name{color:var(--color-primary)}
.sidebar-search__nearby-age{font-size:.76rem;opacity:.6}
.sidebar-search__search-link{display:inline-block;margin-top:.5rem;font-size:.85rem;color:var(--color-primary)}
.sidebar-search__cta{margin-top:.4rem}
.sidebar-banner{margin:0}
.sidebar-banner__img{max-width:100%;height:auto;border-radius:10px;display:block}

/* ---- Correctifs QA transverses ---- */
/* CTA inséré dans la grille d'archive : pleine largeur, un seul exemplaire */
.listing-grid > .cta-section{grid-column:1/-1}
.listing-grid > .cta-section ~ .cta-section{display:none}
.listing-grid > .cta-section .cta-section__title{overflow-wrap:break-word}
/* Tchat : pas de grand vide avant que le JS démarre la conversation */
.chat__messages{min-height:140px !important}
/* Page hub villes : cartes */
.cities-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem;margin-block:1.4rem}
.cities-cards__card{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;padding:1.2rem 1.2rem 1.1rem;border:1px solid var(--color-border,rgba(128,128,128,.28));border-radius:12px;text-decoration:none;color:inherit;background:var(--color-surface_alt,rgba(128,128,128,.06));transition:transform .15s ease,box-shadow .15s ease}
.cities-cards__card:hover{transform:translateY(-2px);box-shadow:0 12px 28px -18px rgba(0,0,0,.45)}
.cities-cards__avatars{display:flex}
.cities-cards__avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--color-surface,#fff);margin-left:-10px}
.cities-cards__avatar:first-child{margin-left:0}
.cities-cards__name{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--color-text,inherit)}
.cities-cards__count{font-size:.82rem;opacity:.65}
.cities-cards__cta{font-size:.85rem;font-weight:600;color:var(--color-primary);margin-top:.2rem}
/* Page 404 propre */
.page-404{max-width:38rem;margin:4rem auto 5rem;text-align:center;padding:0 1rem}
.page-404__title{font-family:var(--font-heading);font-size:clamp(3rem,8vw,5rem);line-height:1;margin:0 0 .6rem;color:var(--color-primary)}
.page-404__text{opacity:.75;margin-bottom:1.4rem}
.page-404 form{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.4rem}
.page-404 input[type="search"],.page-404 input[type="text"]{flex:1;max-width:22rem;padding:.8rem 1rem;border:1px solid var(--color-border,rgba(128,128,128,.35));border-radius:8px}
/* ---- QA spark ---- */
/* Doublon de filtres dans l'archive : ne garder que la barre du haut */
.listing-page__sidebar .search-filters ~ .search-filters{display:none}
.listing-page__content > .search-filters ~ .search-filters{display:none}
/* Cartes ville : vignettes homogènes */
.hp-classifieds-grid .card-annonce__image img{aspect-ratio:1/1;object-fit:cover;width:100%}

/* ---- QA finale transverse ---- */
/* Avatar du widget "En ligne maintenant" : contraint (l'img n'était pas bornée) */
.sidebar-search__nearby-img{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0}
.sidebar-search__nearby-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* Filtres d'archive : rangée compacte stylée (au lieu de selects nus pleine largeur) */
.search-filters{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:1.3rem}
.search-filters select,.search-filters .form-select{flex:0 1 220px;max-width:240px;padding:.65rem .9rem;border:1px solid var(--color-border,rgba(128,128,128,.35));border-radius:8px;background:var(--color-surface,#fff);color:var(--color-text,inherit);font-size:.92rem}
.search-filters button,.search-filters .btn,.search-filters input[type=submit]{flex:0 0 auto}
/* CTA secondaire de home : doublon → caché partout */
.hp-section--cta-secondary{display:none}

/* 14/10/2026 : champ anti-robot du formulaire masqué (il était visible ; rempli par un humain ou par le remplissage automatique du navigateur, le lead était rejeté) */
.lead-form .form-hp{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}

/* ==== 14/10/2026 : accueil, profils visibles sans scroller ====
   Portable 1512x862 : la 1re rangée de photos est entière au-dessus de la barre du bas.
   Mobile : hero compact, 1re rangée de profils, formulaire, puis les autres profils.
   Retour arrière : supprimer ce bloc, ici et dans critical.css (copies d'origine sauvegardées le 14/10). */
@media (min-width:901px){
  body.home.variant-homepage-b .hp-section--hero-conversion{display:grid !important;grid-template-columns:minmax(0,1fr) 420px;gap:32px;align-items:center;max-width:1240px;margin-inline:auto;padding:18px 24px 18px !important}
  body.home.variant-homepage-b .hp-section--hero-conversion > .hero{padding:8px 0 !important;background:transparent !important;overflow:visible !important}
  body.home.variant-homepage-b .hp-section--hero-conversion .hero__inner{max-width:none !important;margin:0 !important;padding:0 !important;display:block !important}
  body.home.variant-homepage-b .hp-section--hero-conversion .hero__content{max-width:none !important;text-align:left !important}
  body.home.variant-homepage-b .hp-section--hero-conversion .hero__title{font-size:clamp(2.2rem,3.2vw,3rem) !important;margin:0 0 12px !important}
  body.home.variant-homepage-b .hp-section--hero-conversion .hero__subtitle{margin:0 !important}
  body.home.variant-homepage-b .hp-section--hero-conversion .hero__actions{justify-content:flex-start !important;margin-top:18px !important}
  body.home.variant-homepage-b .hp-section--hero-conversion .hero__stat{margin:12px 0 0 !important}
  body.home.variant-homepage-b .hp-section--hero-conversion .hp-section__lead-form--embedded{margin:0 !important;padding:0 !important;max-width:none !important}
  body.home.variant-homepage-b .hp-section--hero-conversion .lead-form{margin:0 !important;max-width:none !important;width:100% !important;padding:20px 24px !important}
  body.home.variant-homepage-b .hp-section--profils{padding-top:18px !important}
  body.home.variant-homepage-b .hp-section--profils > .hp-section__title{margin-top:0 !important;margin-bottom:0 !important}
  body.home.variant-homepage-b .hp-section--profils > .listing-grid{margin-top:16px !important}
  body.home.variant-homepage-b .hp-section--hero-conversion .lead-form__step.is-active:has(#lead-email){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px}
  body.home.variant-homepage-b .hp-section--hero-conversion .lead-form__step:has(#lead-email) > :not(.form-group:has(#lead-prenom)):not(.form-group:has(#lead-email)){grid-column:1 / -1}
}
body.home .hp-section--hero-conversion .lead-form__title{margin:0 0 10px !important}
body.home .hp-section--hero-conversion .lead-form__step-indicator{margin-bottom:14px !important}
body.home .hp-section--hero-conversion .lead-form__step.is-active:has(#lead-age){display:grid;grid-template-columns:146px minmax(0,1fr);column-gap:12px}
body.home .hp-section--hero-conversion .lead-form__step:has(#lead-age) > .btn{grid-column:1 / -1}
body.home .hp-section--hero-conversion .lead-form .form-group{margin-bottom:12px !important}
@media (max-width:900px){
  body.home.variant-homepage-b #main{display:grid !important;grid-template-columns:16px minmax(0,1fr) minmax(0,1fr) 16px}
  body.home.variant-homepage-b #main > *{grid-column:1 / -1;min-width:0;order:6}
  body.home.variant-homepage-b .hp-section--hero-conversion,
  body.home.variant-homepage-b .hp-section--profils,
  body.home.variant-homepage-b .hp-section--profils > .listing-grid{display:contents !important}
  body.home.variant-homepage-b .hp-section--hero-conversion > *{grid-column:1 / -1;order:1;min-width:0}
  body.home.variant-homepage-b .hp-section--hero-conversion > .hero{padding:22px 16px 6px !important}
  body.home.variant-homepage-b .hp-section--profils > *{grid-column:2 / 4;order:2;min-width:0}
  body.home.variant-homepage-b .hp-section--profils > .hp-section__title{margin:18px 0 14px !important;max-width:none !important;padding-inline:0 !important}
  body.home.variant-homepage-b .hp-section--profils > .listing-grid > *{order:5;margin:0 0 12px !important;max-width:none !important}
  body.home.variant-homepage-b .hp-section--profils > .listing-grid > :nth-child(-n+2){order:3}
  body.home.variant-homepage-b .hp-section--profils > .listing-grid > :nth-child(odd){grid-column:2;margin-right:6px !important}
  body.home.variant-homepage-b .hp-section--profils > .listing-grid > :nth-child(even){grid-column:3;margin-left:6px !important}
  body.home.variant-homepage-b .hp-section--hero-conversion > .hp-section__lead-form--embedded{order:4;margin:4px 16px 18px !important;padding:0 !important;max-width:none !important}
  body.home.variant-homepage-b .hero__title{font-size:clamp(1.8rem,7.4vw,2.3rem) !important;margin:0 0 10px !important}
  body.home.variant-homepage-b .hero__actions{margin-top:14px !important}
  body.home.variant-homepage-b .hero__stat{margin:10px 0 0 !important}
  body.home.variant-homepage-b .lead-form{padding:20px 18px !important;margin:0 !important;max-width:none !important}
}