/* ============================================================
   les-infideles.com — main.css — DA "Le Cercle Fermé"
   Cible le DOM figé, override par classes uniquement.
   Aucun or, aucun bordeaux. Seul dégradé = filet violine->rose.
   ============================================================ */

/* ---------- Formulaire générique ---------- */
.form-group {
  margin-bottom: 18px;
}

.form-label,
.email-modal__label,
.lead-form label:not(.lead-form__gender-btn) {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--color-text_light);
  margin-bottom: 8px;
}

.form-select {
  width: 100%;
  padding: .85em 1em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(175,62,204,.14);
}

/* Micro-ligne sous le lead-form */
.lead-form .btn-secondary {
  width: 100%;
}

.lead-form::after {
  content: "Chiffré \00b7 Anonyme \00b7 Sans engagement";
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-text_light);
  text-align: center;
}

/* ============================================================
   RÉASSURANCE — cartes-fiches alignées gauche
   ============================================================ */
.hp-section--reassurance .section {
  background: var(--color-surface-page);
}

.hp-section--reassurance .section-title.text-center {
  text-align: left;
}

.hp-section--reassurance .section-title::after {
  content: "— Pourquoi le cercle";
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--color-primary);
  margin: -6px 0 16px;
}

.hp-section--reassurance .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.hp-section--reassurance .section-title {
  grid-column: 1 / -1;
}

.reassurance-item {
  counter-increment: reassurance;
  position: relative;
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 28px;
  text-align: left;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.hp-section--reassurance .container {
  counter-reset: reassurance;
}

.reassurance-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.reassurance-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-img);
  background: var(--color-surface-alt2);
  margin-bottom: 20px;
}

.reassurance-item__icon svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  stroke: var(--color-primary);
  fill: none;
}

/* Numéro éditorial 01/02/03 — Cormorant italic violine */
.reassurance-item::before {
  content: "0" counter(reassurance);
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-primary);
  line-height: 1;
}

.reassurance-item__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 10px;
  text-align: left;
}

.reassurance-item__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--color-text_light);
  margin: 0;
  text-align: left;
}

/* ============================================================
   CTA ×2 — panneau carte d'accès centré
   ============================================================ */
.hp-section--cta {
  padding-block: clamp(48px, 7vw, 96px);
  background: var(--color-surface-page);
}

.cta-section {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  background: var(--color-ink-dark);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-3);
  padding: clamp(40px, 5vw, 64px);
  overflow: hidden;
}

.cta-section.section {
  padding-block: clamp(40px, 5vw, 64px);
}

/* Halo radial violine + double-filet estampé + liseré haut */
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 90% at 96% 4%, rgba(175,62,204,.10) 0%, rgba(175,62,204,0) 55%);
  pointer-events: none;
}

.cta-section::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(199,123,224,.14);
  border-radius: calc(var(--radius-panel) - 5px);
  pointer-events: none;
}

.cta-section .container {
  position: relative;
  z-index: 1;
  padding-inline: 0;
}

/* Liseré haut violine->rose */
.cta-section {
  border-top: 3px solid transparent;
  background-image:
    var(--gradient-filet),
    linear-gradient(var(--color-ink-dark), var(--color-ink-dark));
  background-origin: border-box;
  background-clip: border-box, padding-box;
}

.cta-section__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.08;
  color: #F4F1F8;
  margin: 0 0 16px;
  text-align: left;
}

.cta-section__title::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: var(--color-primary);
  margin-bottom: 14px;
}

.cta-section__title em,
.cta-section__title i {
  font-style: italic;
  color: var(--color-primary-light);
}

.cta-section__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(244,241,248,.75);
  margin: 0 0 28px;
  text-align: left;
  max-width: 52ch;
}

.cta-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
}

.cta-section .container.text-center {
  text-align: left;
}

/* Variante secondaire — panneau clair, alternance */
.hp-section--cta-secondary .cta-section {
  background: var(--color-surface-alt2);
  background-image:
    var(--gradient-filet),
    linear-gradient(var(--color-surface-alt2), var(--color-surface-alt2));
}

.hp-section--cta-secondary .cta-section::before {
  background: radial-gradient(90% 90% at 96% 4%, rgba(175,62,204,.06) 0%, rgba(175,62,204,0) 55%);
}

.hp-section--cta-secondary .cta-section::after {
  border-color: rgba(68,48,166,.10);
}

.hp-section--cta-secondary .cta-section__title {
  color: var(--color-text);
}

.hp-section--cta-secondary .cta-section__title::before {
  content: "— L'invitation";
  display: block;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.hp-section--cta-secondary .cta-section__title em,
.hp-section--cta-secondary .cta-section__title i {
  color: var(--color-primary);
}

.hp-section--cta-secondary .cta-section__desc {
  color: var(--color-text_light);
}

/* Bouton CTA secondaire -> indigo plein */
.hp-section--cta-secondary .btn-ghost {
  background: var(--color-secondary);
  color: #FFFFFF;
}

.hp-section--cta-secondary .btn-ghost:hover {
  background: var(--color-primary);
  color: #FFFFFF;
}

/* ============================================================
   FAQ — cartes-panneaux distinctes, chevron custom
   ============================================================ */
.hp-section--faq .section--alt {
  background: var(--color-surface-alt2);
}

.hp-section--faq .section-title.text-center {
  text-align: left;
}

.hp-section--faq .section-title::after {
  content: "— Le pacte de silence, en clair";
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--color-primary);
  margin: -6px 0 16px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}

.faq-item {
  counter-increment: faq;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.faq-list {
  counter-reset: faq;
}

.faq-item[open] {
  border-left: 3px solid var(--color-primary);
  background: #FBFAFD;
}

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 36px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary::before {
  content: "Q.0" counter(faq);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--color-primary);
  flex: none;
}

/* Chevron custom — jamais un + */
.faq-item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-primary);
  border-bottom: 1.5px solid var(--color-primary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq-item__answer {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text_light);
  padding-top: 14px;
}

.faq-item__answer p {
  margin: 0 0 .8em;
}

.faq-item__answer p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   PROFILS — cartes annonce (style A) + card-profil-a (style B)
   ============================================================ */
.hp-section--profils {
  padding-block: clamp(64px, 9vw, 120px);
  background: var(--color-surface-page);
}

.hp-section--profils > .hp-section__title {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: var(--sp-4);
}

.hp-section--profils .hp-section__title::after {
  content: "— Membres du cercle";
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--color-primary);
  margin: -6px 0 0;
}

/* Grille */
.hp-section--profils .card-annonce,
.card-annonce {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.card-annonce:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.card-annonce__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-annonce__image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.card-annonce__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.2);
}

.card-annonce__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,18,58,.55) 0%, rgba(23,18,58,0) 55%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Badge en ligne flottant */
.card-annonce__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  background: rgba(23,18,58,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #FFFFFF;
}

.card-annonce__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
  animation: pulse-glow 2.2s var(--ease) infinite;
}

.card-annonce__content {
  padding: 18px;
}

.card-annonce__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 10px;
}

.card-annonce__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.card-annonce__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--color-surface-alt2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--color-secondary);
}

.card-annonce__tag.--location::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.card-annonce__excerpt {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--color-text_light);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-annonce__excerpt::before { content: "\201C"; }
.card-annonce__excerpt::after  { content: "\201D"; }

/* Style B — card-profil-a : dossier horizontal */
.card-profil-a {
  display: flex;
  align-items: stretch;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 14px;
  position: relative;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.card-profil-a:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.card-profil-a img {
  width: 88px;
  height: 88px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
  filter: grayscale(.2);
}

.card-profil-a::after {
  content: "";
  position: absolute;
  left: 110px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--color-primary);
  opacity: .5;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  background: var(--color-ink-dark);
  color: var(--color-text-on-dark);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-filet);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(56px, 7vw, 80px) var(--gutter) 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

.site-footer__col p {
  margin: 0;
}

.site-footer__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(237,233,245,.6);
  max-width: 34ch;
}

.site-footer__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-primary-light);
  margin: 0 0 18px;
}

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

.site-footer__links a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .9rem;
  color: rgba(237,233,245,.62);
  position: relative;
  transition: color var(--dur) var(--ease);
}

.site-footer__links a:hover {
  color: #FFFFFF;
  border-bottom: 1px solid var(--color-primary);
}

/* Sceau footer sur le 1er col brand */
.site-footer__col:first-child .site-footer__logo-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xs);
  margin-bottom: 18px;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 24px 0 32px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(237,233,245,.4);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
}

.site-footer__bottom::after {
  content: "Navigation confidentielle \00b7 aucune trace sur votre relevé";
  color: rgba(237,233,245,.4);
}

/* ============================================================
   STICKY CTA BAR
   ============================================================ */
.sticky-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
}

.sticky-cta-bar--dark {
  background: rgba(23,18,58,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid transparent;
  background-image:
    var(--gradient-filet),
    linear-gradient(rgba(23,18,58,.92), rgba(23,18,58,.92));
  background-origin: border-box;
  background-clip: border-box, padding-box;
}

.sticky-cta-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.sticky-cta-bar__btn {
  background: var(--color-primary);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--radius-sm);
}

.sticky-cta-bar__btn:hover {
  background: #FFFFFF;
  color: var(--color-ink-dark);
}

.sticky-cta-bar__close {
  width: 34px;
  height: 34px;
  flex: none;
  background: transparent;
  border: 0;
  color: rgba(237,233,245,.7);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.sticky-cta-bar__close:hover {
  color: #FFFFFF;
  background: rgba(255,255,255,.08);
}

.sticky-cta-bar__close::before {
  content: "\00d7";
}

/* ============================================================
   MODAL EMAIL
   ============================================================ */
.email-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.email-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23,18,58,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.email-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-3);
  padding: clamp(28px, 4vw, 40px);
  overflow: hidden;
}

.email-modal__box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-filet);
}

.email-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--color-text_light);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.email-modal__close:hover {
  color: var(--color-primary);
  background: var(--color-surface-alt2);
}

.email-modal__close::before {
  content: "\00d7";
}

.email-modal__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 10px;
  padding-right: 24px;
}

.email-modal__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--color-text_light);
  margin: 0 0 20px;
}

.email-modal__form {
  display: flex;
  flex-direction: column;
}

.email-modal__input {
  width: 100%;
  padding: .85em 1em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.email-modal__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(175,62,204,.14);
}

.email-modal__error {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--color-accent);
  margin: -6px 0 12px;
}

/* Submit -> indigo plein carré (override du gradient) */
.email-modal__submit {
  width: 100%;
  background: var(--color-secondary);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--radius-sm);
}

.email-modal__submit:hover {
  background: var(--color-primary);
  color: #FFFFFF;
}

.email-modal__legal {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-tertiary);
  margin: 14px 0 0;
  text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .site-footer__col:nth-child(4) {
    grid-column: 2 / -1;
  }
  .hp-section--profils .card-annonce,
  .hp-section--reassurance .container {
    /* grilles gérées plus bas */
  }
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__media {
    order: -1;
    max-width: 420px;
  }
  .hero__inner::before {
    font-size: 15rem;
  }
}

@media (max-width: 768px) {
  .site-header__nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    padding: 96px 32px 32px;
    background: linear-gradient(180deg, var(--color-ink-dark) 0%, var(--color-ink-dark-2) 100%);
    box-shadow: var(--shadow-3);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
  }
  .site-header__nav.is-open,
  .site-header__nav[aria-expanded="true"],
  .site-header__nav[data-open="true"] {
    transform: translateX(0);
  }
  .site-header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .menu-toggle {
    display: flex;
  }
  .hp-section--reassurance .container {
    grid-template-columns: 1fr;
  }
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .site-footer__col:first-child {
    grid-column: 1 / -1;
  }
  .cta-section__actions,
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-section__actions .btn,
  .hero__actions .btn {
    width: 100%;
  }
  .card-profil-a {
    flex-direction: column;
  }
  .card-profil-a::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .hero__inner {
    padding: 24px;
  }
  .lead-form__gender-group {
    grid-template-columns: 1fr;
  }
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .sticky-cta-bar__inner {
    flex-wrap: wrap;
  }
  .sticky-cta-bar__btn {
    flex: 1;
  }
}

/* Profils grille — appliquée quand les cartes existent */
.hp-section--profils .card-annonce,
.hp-section--profils .card-profil-a {
  margin-inline: auto;
}

@supports (display: grid) {
  .hp-section--profils > .container,
  .hp-section--profils .cards,
  .hp-section--profils .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

/* Réduction d'animation */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   CORRECTIFS PILOTE (états JS + composants manquants)
   ============================================================ */
/* Modale email : cachée par défaut, ouverte via aria-hidden="false" (convention du thème) */
.email-modal{display:none;}
.email-modal[aria-hidden="false"]{display:flex;}
/* Sticky CTA : respecter le masquage JS au scroll */
.sticky-cta-bar{transition:transform var(--dur,.2s) var(--ease,ease);}
.sticky-cta-bar.is-hidden{transform:translateY(110%);}
/* Consent banner : caché par défaut, révélé via .is-visible ; style "cadre app" cohérent */
.consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--color-surface,#fff);
  border-top:1px solid var(--color-border-frame,rgba(68,48,166,.12));box-shadow:var(--shadow-2);
  transform:translateY(120%);transition:transform var(--dur,.22s) var(--ease,ease);}
.consent-banner.is-visible{transform:translateY(0);}
.consent-banner__inner{max-width:var(--container-max,1200px);margin-inline:auto;padding:16px var(--gutter,24px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.consent-banner__text{font-family:var(--font-body);font-size:.9rem;color:var(--color-text-light,#6B6480);line-height:1.6;flex:1;min-width:220px;}
.consent-banner__actions{display:flex;gap:10px;flex-shrink:0;}
/* Grille profils : fallback si les cartes sont enfants directs (section vide pour l'instant) */
.hp-section--profils{padding-block:var(--sp-6,80px);}
.hp-section--profils > .hp-section__title{max-width:var(--container-max,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);}
/* Icône réassurance : neutraliser la double marge (mb-md + marge propre) */
.reassurance-item__icon.mb-md{margin-bottom:0;}

/* Filet CTA/sticky : la technique border-box remplissait tout le panneau -> bande fine correcte */
.cta-section{
  background: linear-gradient(90deg,var(--color-primary),var(--color-accent)) top/100% 3px no-repeat, var(--color-ink-dark) !important;
  border-top:0 !important;
}
.hp-section--cta-secondary .cta-section{
  background: linear-gradient(90deg,var(--color-primary),var(--color-accent)) top/100% 3px no-repeat, var(--color-surface-alt2) !important;
  border-top:0 !important;
}
.sticky-cta-bar--dark{
  background: linear-gradient(90deg,var(--color-primary),var(--color-accent)) top/100% 2px no-repeat, rgba(23,18,58,.94) !important;
  border-top:0 !important;
}

/* ============================================================
   GARDE-FOUS MOBILE — anti-débordement horizontal
   ============================================================ */
html,body{overflow-x:hidden;max-width:100%;}
.site-wrapper,#main{max-width:100%;overflow-x:clip;}
@media (max-width: 760px){
  .hero__inner{grid-template-columns:1fr !important;padding:24px !important;}
  .hero__media{order:-1;max-width:100%;}
  .hero__inner::before{font-size:9rem !important;right:-6% !important;bottom:-10% !important;}
  .hero__title{font-size:clamp(2.1rem,8.5vw,3rem) !important;}
  .hero__content::before{letter-spacing:.12em !important;font-size:.62rem !important;overflow-wrap:anywhere;}
  .hp-section--reassurance .container{grid-template-columns:1fr !important;}
  .hp-section__lead-form--embedded{max-width:100% !important;}
  .cta-section{max-width:100% !important;}
  .section-title,.cta-section__title,.hero__title,.faq-item summary{overflow-wrap:anywhere;}
}

/* ============================================================
   GRILLE PROFILS — le conteneur réel est .listing-grid--annonces
   ============================================================ */
.hp-section--profils > .hp-section__title,
.hp-section--profils > .listing-grid{
  max-width:var(--container-max,1200px);
  margin-inline:auto;
  padding-inline:var(--gutter,24px);
}
.hp-section--profils > .listing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:24px;
  margin-top:28px;
}
@media (max-width:600px){
  .hp-section--profils > .listing-grid{grid-template-columns:1fr;}
}
/* Badge "✓ Vérifié" inline (résidu vert #27ae60) -> violine du site */
.card-annonce__title span{
  background:var(--color-primary) !important;
  color:#fff !important;
}
/* Carte : image un peu moins haute pour un rythme de grille élégant */
.card-annonce__image{aspect-ratio:1/1;}

/* ============================================================
   ICÔNES inline génériques (.icon) — cause de l'icône géante
   ============================================================ */
.icon{width:1.05em;height:1.05em;flex-shrink:0;vertical-align:-.15em;stroke-width:1.75;}
.mt-md{margin-top:16px;}
.mt-lg{margin-top:34px;}

/* ============================================================
   FIL D'ARIANE
   ============================================================ */
.breadcrumbs{padding:22px 0 2px;}
.breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:9px;list-style:none;margin:0;padding:0;
  font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text_light);}
.breadcrumbs__item{display:inline-flex;align-items:center;gap:9px;}
.breadcrumbs__item:not(:last-child)::after{content:"·";color:var(--color-primary);opacity:.7;}
.breadcrumbs__item a{color:var(--color-text_light);text-decoration:none;transition:color var(--dur) var(--ease);}
.breadcrumbs__item a:hover{color:var(--color-primary);}
.breadcrumbs__item:last-child{color:var(--color-secondary);}

/* ============================================================
   PAGE PROFIL — variant B (hero + infos centrées)
   ============================================================ */
main .single-profil{max-width:780px;margin:6px auto 0;}
.single-profil__hero{position:relative;border-radius:var(--radius-panel);overflow:hidden;
  border:1px solid var(--color-border);box-shadow:var(--shadow-3);
  aspect-ratio:3/2;background:var(--color-surface-alt2);}
.single-profil__hero img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:grayscale(.18);}
.single-profil__hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(23,18,58,.45) 0%,rgba(23,18,58,0) 52%);}
.single-profil__status{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:100px;background:rgba(13,11,22,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-family:var(--font-body);font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;}
.profil-status__dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 8px var(--color-primary);}

.single-profil__body{max-width:620px;margin:0 auto;padding:38px 0 64px;text-align:center;}
.single-profil__name{font-family:var(--font-heading);font-weight:600;font-size:clamp(2.4rem,4.4vw,3.5rem);
  line-height:1.04;letter-spacing:-.01em;color:var(--color-text);margin:0 0 20px;}
.single-profil__meta-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:0 0 24px;padding:0;}
.single-profil__meta-item{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border:1px solid var(--color-border);border-radius:100px;background:var(--color-surface-alt2);
  font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.02em;color:var(--color-secondary);}
.single-profil__meta-item .icon{color:var(--color-primary);width:15px;height:15px;}
.single-profil__excerpt{font-family:var(--font-heading);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2.1vw,1.62rem);line-height:1.42;color:var(--color-text_light);
  margin:0 auto 30px;max-width:46ch;}
.single-profil__cta{margin-top:6px;}
.single-profil__desc{max-width:600px;margin:44px auto 0;text-align:left;
  font-family:var(--font-body);font-size:1.03rem;line-height:1.82;color:var(--color-text);}
.single-profil__desc::before{content:"";display:block;width:46px;height:1px;background:var(--color-primary);margin:0 auto 34px;}
.single-profil__desc p{margin:0 0 1.15em;}
@media (max-width:600px){
  .single-profil__hero{aspect-ratio:4/3;}
  .single-profil__body{padding:28px 0 48px;}
}

/* ============================================================
   PAGE PROFIL — VARIANT A (machine RM : chat + form + maillage)
   Design "Le Cercle Fermé"
   ============================================================ */
.single-profil--a{max-width:900px;margin:0 auto;padding-inline:var(--gutter);}
.single-profil--a .breadcrumbs{padding:20px 0 6px;}

.single-profil__page-layout{display:block;padding:0;}
.single-profil__sidebar{display:none;}            /* bannières non configurées */
.single-profil__mobile-banners-section{display:none !important;}
.single-profil__main{width:100%;}

/* --- Carte profil --- */
.single-profil__card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-3);
  overflow:hidden;
  padding:0;
}
.single-profil__top{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:0;
}
.single-profil__photo{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--color-surface-alt2);}
.single-profil__img{width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:grayscale(.16);}
.single-profil__badge{
  position:absolute;left:14px;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:100px;z-index:2;
  background:rgba(13,11,22,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-family:var(--font-body);font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;
}
.single-profil__badge--online{top:14px;}
.single-profil__badge--recent{top:14px;}
.single-profil__badge--offline{top:14px;}
.single-profil__badge--dispo{top:52px;background:linear-gradient(120deg,var(--color-primary),var(--color-accent));}
.single-profil__badge-dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 8px var(--color-primary);}
.single-profil__badge--offline .single-profil__badge-dot{background:#9a92ad;box-shadow:none;}
.single-profil__badge--dispo .single-profil__badge-dot{background:#fff;box-shadow:none;}

.single-profil__info{padding:30px 30px 26px;display:flex;flex-direction:column;}
.single-profil__name{font-family:var(--font-heading);font-weight:600;font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.04;letter-spacing:-.01em;color:var(--color-text);margin:0;}
.single-profil__handle{color:var(--color-text_light) !important;font-family:var(--font-body);}
.single-profil--a .single-profil__meta-list{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:16px 0 0;padding:0;}
.single-profil--a .single-profil__meta-item{display:inline-flex;padding:0;margin:0;border:0;background:none;}
.single-profil__tag{
  display:inline-flex;align-items:center;padding:7px 15px;border-radius:100px;
  font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  border:1px solid var(--color-border);background:var(--color-surface-alt2);color:var(--color-secondary);
}
.single-profil__tag--age{background:color-mix(in srgb,var(--color-primary) 12%,transparent);border-color:color-mix(in srgb,var(--color-primary) 30%,transparent);color:color-mix(in srgb,var(--color-primary) 65%,var(--color-text));}
.single-profil__desc-courte{font-family:var(--font-heading);font-style:italic;font-size:1.2rem;line-height:1.45;color:var(--color-text_light);margin:18px 0 0;}

/* --- Description (texte SEO) --- */
.single-profil--a .single-profil__desc{
  padding:28px 30px 30px;border-top:1px solid var(--color-border);margin:0;text-align:left;
  font-family:var(--font-body);font-size:1.02rem;line-height:1.8;color:var(--color-text);
}
.single-profil--a .single-profil__desc::before{display:none;}
.single-profil--a .single-profil__desc p{margin:0 0 1.1em;}

/* --- Voir aussi / liens villes --- */
.single-profil__related-links{padding:0 30px 28px;font-family:var(--font-body);font-size:.85rem;color:var(--color-text_light);}
.single-profil__related-links strong{display:block;margin-bottom:8px;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--color-primary);}
.single-profil__links-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.single-profil__links-list a{display:inline-flex;padding:6px 13px;border:1px solid var(--color-border);border-radius:100px;color:var(--color-secondary);font-weight:600;text-decoration:none;transition:all var(--dur) var(--ease);}
.single-profil__links-list a:hover{border-color:var(--color-primary);color:var(--color-primary);}

/* ============================================================
   TCHAT INTERACTIF (profil en ligne) — style messenger
   ============================================================ */
.chat{
  margin-top:22px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-3);
  overflow:hidden;
  display:flex;flex-direction:column;
  max-height:600px;
}
.chat__header{
  display:flex;align-items:center;gap:13px;padding:16px 20px;
  background:linear-gradient(180deg,var(--color-ink-dark) 0%,var(--color-ink-dark-2) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
}
.chat__header::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));}
.chat__header-avatar{position:relative;width:46px;height:46px;flex-shrink:0;}
.chat__avatar-img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1.5px solid color-mix(in srgb,var(--color-primary) 60%,transparent);}
.chat__header-dot{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#39d98a;border:2px solid var(--color-ink-dark);box-shadow:0 0 8px #39d98a;}
.chat__header-info{display:flex;flex-direction:column;gap:2px;}
.chat__header-name{font-family:var(--font-heading);font-weight:600;font-size:1.15rem;color:#F4F1F8;line-height:1;}
.chat__header-status{font-family:var(--font-body);font-size:.72rem;font-weight:600;color:rgba(244,241,248,.62);letter-spacing:.02em;}

.chat__messages{
  flex:1;min-height:280px;max-height:420px;overflow-y:auto;
  padding:22px 18px;display:flex;flex-direction:column;gap:11px;
  background:var(--color-surface-page);
}
.chat__bubble{
  max-width:76%;padding:11px 15px;font-family:var(--font-body);font-size:.94rem;line-height:1.45;
  border-radius:16px;animation:chatIn .28s ease;word-wrap:break-word;
}
@keyframes chatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chat__bubble--profil{
  align-self:flex-start;background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border);border-bottom-left-radius:5px;box-shadow:var(--shadow-1);
}
.chat__bubble--user{
  align-self:flex-end;color:#fff;border-bottom-right-radius:5px;
  background:linear-gradient(135deg,var(--color-secondary),var(--color-primary));
}
.chat__typing{align-self:flex-start;display:inline-flex;gap:4px;padding:13px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;border-bottom-left-radius:5px;}
.chat__typing-dot{width:7px;height:7px;border-radius:50%;background:var(--color-text_light);animation:chatTyping 1.2s infinite;}
.chat__typing-dot:nth-child(2){animation-delay:.2s;}
.chat__typing-dot:nth-child(3){animation-delay:.4s;}
@keyframes chatTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.chat__input-bar{display:flex;gap:10px;padding:14px 16px;background:var(--color-surface);border-top:1px solid var(--color-border);}
.chat__input{
  flex:1;padding:12px 16px;border:1px solid var(--color-border);border-radius:100px;
  font-family:var(--font-body);font-size:.95rem;color:var(--color-text);background:var(--color-input-bg,#FBFAFD);
}
.chat__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 15%,transparent);}
.chat__send{
  flex-shrink:0;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;
  background:linear-gradient(135deg,var(--color-secondary),var(--color-primary));
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.chat__send:hover{transform:translateY(-1px) scale(1.04);box-shadow:0 8px 20px -8px var(--color-primary);}

/* ============================================================
   FORMULAIRE CONTACT (profil hors ligne)
   ============================================================ */
.single-profil__contact-card{
  margin-top:22px;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-panel);box-shadow:var(--shadow-3);padding:26px 26px 28px;position:relative;overflow:hidden;
}
.single-profil__contact-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));}
.single-profil__contact-top{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.single-profil__contact-avatar-img{width:48px;height:48px;border-radius:50%;}
.single-profil__contact-who{display:flex;flex-direction:column;gap:2px;}
.single-profil__contact-name{font-family:var(--font-heading);font-weight:600;font-size:1.2rem;color:var(--color-text);}
.single-profil__contact-offline{font-family:var(--font-body);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text_light);}
.single-profil__contact-prompt{font-family:var(--font-body);font-weight:600;color:var(--color-text);margin:0 0 12px;}
.single-profil__textarea{width:100%;padding:14px 16px;border:1px solid var(--color-border);border-radius:var(--radius-card);font-family:var(--font-body);font-size:.98rem;line-height:1.5;color:var(--color-text);background:var(--color-input-bg,#FBFAFD);resize:vertical;}
.single-profil__textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 15%,transparent);}
.single-profil__chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0;}
.single-profil__chips-label{font-family:var(--font-body);font-size:.8rem;color:var(--color-text_light);}
.single-profil__chip{padding:8px 14px;border:1px solid var(--color-border);border-radius:100px;background:var(--color-surface-alt2);font-family:var(--font-body);font-size:.82rem;color:var(--color-secondary);cursor:pointer;transition:all var(--dur) var(--ease);}
.single-profil__chip:hover,.single-profil__chip.active{border-color:var(--color-primary);color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,transparent);}
.single-profil__submit{margin-top:6px;width:100%;}

/* ============================================================
   MAILLAGE — "Rencontres à [Ville]"
   ============================================================ */
.maillage__title{font-family:var(--font-heading) !important;font-weight:600 !important;font-size:clamp(1.6rem,2.4vw,2.1rem) !important;}
.maillage__all-link:hover{text-decoration:underline !important;}

/* --- Responsive --- */
@media (max-width:720px){
  .single-profil__top{grid-template-columns:1fr;}
  .single-profil__photo{aspect-ratio:4/3;}
  .chat__messages{min-height:240px;}
}

/* ============================================================
   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}
}


/* verso (les-infideles) */
@media(max-width:760px){.hero__media{max-width:340px;margin-inline:auto}.hero__image--placeholder{aspect-ratio:16/10}.hero__content::before{letter-spacing:.1em;font-size:.6rem;overflow-wrap:anywhere}}
.reassurance-item__title{padding-right:44px}
.site-header__cta-btn{white-space:nowrap}


/* 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}}

/* Skip-link : caché sauf au focus clavier (pas de texte parasite en haut de page) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:.6rem 1rem;background:var(--color-primary,#AF3ECC);color:#fff;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---- Page inscription (Le Cercle) ---- */
.register-page{padding:4rem 1rem;background:var(--color-surface_alt,#F8F3F9)}
.register-page__box{max-width:32rem;margin-inline:auto;background:#fff;border:1px solid var(--color-border,#E9E0EB);border-radius:14px;padding:2.4rem 2.2rem;box-shadow:0 24px 60px -30px rgba(68,48,166,.25)}
.register-page__title{font-family:var(--font-heading);font-size:2rem;line-height:1.12;margin:0 0 .5rem;color:var(--color-text)}
.register-page__subtitle{color:var(--color-text_light,#7A7A7A);margin:0 0 1.2rem;font-size:.98rem}
.register-page__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.3rem 0;text-align:center}
.register-page__stat-number{display:block;font-family:var(--font-heading);font-size:1.6rem;font-weight:700;color:var(--color-primary)}
.register-page__stat-label{font-size:.76rem;color:var(--color-text_light);letter-spacing:.04em}
.register-page__promise{font-size:.92rem;color:var(--color-text);border-left:2px solid var(--color-primary);padding-left:.9rem;margin-bottom:1.3rem}
.register-page__promise p{margin:0}
.register-form__label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem;color:var(--color-text)}
.register-form__input{width:100%;padding:.9rem 1rem;border:1px solid var(--color-border);border-radius:10px;font-size:1rem;margin-bottom:1rem;background:#fff;color:var(--color-text)}
.register-form__input:focus{outline:2px solid var(--color-primary);outline-offset:1px}
.register-form__submit{width:100%;padding:1rem;font-size:1.02rem}
.register-page__trust{margin-top:1.3rem;font-size:.8rem;color:var(--color-text_light)}
.register-page__trust p{margin:.25rem 0}
.register-form__legal{margin-top:1rem;font-size:.75rem;color:var(--color-text_light)}
.register-form__legal a{color:var(--color-primary)}
@media(max-width:520px){.register-page{padding:2.2rem .8rem}.register-page__box{padding:1.7rem 1.2rem}}
/* Stat du hero (compteur profils) */
.hero__stat{margin-top:1rem;font-size:.88rem;color:var(--color-text_light)}
.hero__stat-count{font-weight:700;color:var(--color-primary);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 verso ---- */
/* CTA secondaire de la home : doublon → masqué (comme les autres sites) */
.hp-section--cta-secondary{display:none}
/* Croix de fermeture dupliquée (le HTML contient déjà ×) */
.sticky-cta-bar__close::before,.email-modal__close::before{content:none}
/* Texte de la barre sticky illisible sur fond sombre */
.sticky-cta-bar__text{color:var(--color-text-on-dark,#EDE9F5)}
/* Kicker de réassurance : dupliquait le H2 mot pour mot → supprimé */
.hp-section--reassurance .section-title::after{content:none}
/* Kicker FAQ : espace au lieu du chevauchement */
.hp-section--faq .section-title::after{margin:10px 0 16px}
/* Hero : l'illustration remplit son panneau (fini le letterboxing) */
.hero--c .hero__media{overflow:hidden;border-radius:var(--radius-panel)}
.hero--c .hero__image{display:block;width:100%;height:100%;min-height:320px;object-fit:cover}
.hero--c .hero__media::after{content:none}
/* Email du footer lisible */
.site-footer a[href^="mailto"]{color:var(--color-text-on-dark-soft,rgba(237,233,245,.72))}

/* ---- 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}

/* ---- Home : hero et formulaire côte à côte → profils visibles tout de suite ---- */
@media(min-width:980px){
  .hp-section--hero-conversion{display:grid;grid-template-columns:minmax(0,1.15fr) 420px;gap:2rem;align-items:stretch;max-width:1240px;margin-inline:auto;padding:1.6rem 1.2rem 2.2rem}
  .hp-section--hero-conversion .hero--c{height:100%;margin:0;padding:0}
  .hero--c .hero__inner{display:flex;flex-direction:column;gap:1.2rem;height:100%;padding:2rem 2.2rem}
  .hero--c .hero__content{max-width:none}
  .hero--c .hero__media{max-height:210px;min-height:0;margin-top:auto}
  .hero--c .hero__image{height:210px;min-height:0;object-fit:cover}
  .hp-section--hero-conversion .hp-section__lead-form--embedded{margin:0;display:flex}
  .hp-section--hero-conversion .lead-form{width:100%;max-width:none;display:flex;flex-direction:column;justify-content:center}
  .hero__title{font-size:clamp(2.2rem,3.4vw,3rem)}
}