/* __DESIGN_SITE__ */
/* socle filtres (ajouté par design_site.py) */
html:not(#_) .ds-hide{ display: none !important; }
html:not(#_) body[data-ds-filtres="aucun"] .filters{ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-genre"] .filters .filter-btn[data-filter="type"]{ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-age"] .filters .filter-btn[data-filter="age"]{ display: none !important; }
html:not(#_) body[data-ds-filtres="ligne"] .filters{ display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
html:not(#_) body[data-ds-filtres="ligne"] .filters::-webkit-scrollbar{ display: none; }
html:not(#_) body[data-ds-filtres="ligne"] .filters .filter-btn{ flex: 0 0 auto; white-space: nowrap; }
html:not(#_) .filters select.ds-fsel{ appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; padding-right: 2.1em; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='currentColor' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right .7em center; background-size: 12px 8px; }
html:not(#_) .filters .ds-fgroup{ display: contents; }
/* Next : barre React (div.shadow-sm > div.scrollbar-hide > .form-group > select ×2 + bouton Recherche) */
html:not(#_) body[data-ds-filtres="aucun"] div.rounded-lg.shadow-sm:has(> div.scrollbar-hide > div.form-group > select){ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-genre"] div.scrollbar-hide > div.form-group:first-child:has(> select){ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-tri"] div.scrollbar-hide > div.form-group:nth-child(2):has(> select){ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-recherche"] div.scrollbar-hide > div.relative.flex-shrink-0:has(> button){ display: none !important; }
/* Next `chips` : pastilles d'âge construites par design_filtres.js (le select natif est caché) */
html:not(#_) .ds-fnext{ display: flex; gap: 8px; flex-wrap: nowrap; }
html:not(#_) .ds-fnext .ds-fchip{ flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--secondary-color, #999); background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
html:not(#_) .ds-fnext .ds-fchip.active{ background: var(--secondary-color, #18181b); color: #fff; border-color: transparent; }

/* socle menu mobile Astro (ajouté par design_site.py) */
/* 19/09 : la croix du tiroir (label x injecte dans .sidebar-inner) n'etait cachee QUE sous 768 px -> visible en haut
   de la sidebar desktop (3 agents du lot 22 l'ont masquee a la main). Cachee hors tiroir, toutes largeurs. */
html:not(#_) .ds-menu-close{ display: none; }
@media (max-width: 768px) {
  html:not(#_) .ds-burger{ display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 34px; padding: 0 9px; margin-right: 8px; cursor: pointer; border-radius: 8px; color: inherit; flex-shrink: 0; }
  html:not(#_) .ds-burger span{ display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(2){ opacity: 0; }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
  html:not(#_) .ds-menu-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1290; }
  html:not(#_) body:has(#ds-menu:checked) .ds-menu-overlay{ display: block; }
  html:not(#_) .ds-menu-close{ display: none; }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar{ display: block !important; position: fixed !important; top: 0 !important; left: 0; bottom: 0; height: auto !important; width: min(86vw, 340px) !important; max-width: none; margin: 0 !important; padding: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 1300; overflow-y: auto !important; max-height: 100vh; max-height: 100dvh; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 0; box-shadow: 8px 0 30px rgba(0,0,0,.35); }
  html:not(#_) body:has(#ds-menu:checked) .ds-menu-close{ display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sidebar-inner{ height: auto; min-height: 100%; }
  html:not(#_) body:has(#ds-menu:checked){ overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { html:not(#_) .ds-burger span{ transition: none; } }

/* ==========================================================================
   sex-treffen-privat.de — direction « éditorial sombre »
   Encre anthracite, filet or en double ligne (comme un journal), footer en
   colonnes serrées et séparées. Ne touche que la barre latérale (le header
   de ce gabarit Astro), le bandeau mobile et le footer.
   ========================================================================== */

/* --- Palette locale, scopée aux trois zones (ne fuit pas vers le contenu) */
html:not(#_) .sidebar, html:not(#_) .mobile-guest-top, html:not(#_) footer.footer-v3{
  --ed-fond: #16161c;
  --ed-fond-clair: #1e1e26;
  --ed-texte: #e9e6df;
  --ed-att: #a9a4b0;
  --ed-filet: #c9a24b;
}

/* ============================ BARRE LATÉRALE (desktop) ================= */
html:not(#_) .sidebar{
  background: var(--ed-fond);
  border-right: 1px solid #2a2a33;
}
html:not(#_) .sidebar-inner{
  animation: ed-glisse-x .5s ease both;}

/* Logo + double filet, signature de la direction */
html:not(#_) .sb-logo{
  border-bottom: 3px double var(--ed-filet);
  padding-bottom: 14px;
  margin-bottom: 6px;
}
html:not(#_) .sb-logo-text{
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .05em;
  color: var(--ed-texte);
  font-weight: 600;
}
html:not(#_) .sb-logo-dot svg{ color: var(--ed-filet); }

html:not(#_) .sb-section-title span{
  display: inline-block;
  font-family: Georgia, serif;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ed-att);
  border-bottom: 1px solid #34343e;
  padding-bottom: 6px;
}

html:not(#_) .sb-link{
  position: relative;
  color: var(--ed-att);
  transition: color .25s ease;
}
html:not(#_) .sb-link .sb-ico{ opacity: .75; transition: opacity .25s ease; }
html:not(#_) .sb-link::after{
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--ed-filet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
html:not(#_) .sb-link:hover, html:not(#_) .sb-link.active{ color: var(--ed-texte); }
html:not(#_) .sb-link:hover::after, html:not(#_) .sb-link.active::after{ transform: scaleX(1); }
html:not(#_) .sb-link:hover .sb-ico, html:not(#_) .sb-link.active .sb-ico{ opacity: 1; }

html:not(#_) .sb-map-quick-link{
  color: var(--ed-att);
  border: 1px solid #33333d;
  transition: color .2s ease, border-color .2s ease;
}
html:not(#_) .sb-map-quick-link:hover{ color: var(--ed-texte); border-color: var(--ed-filet); }

html:not(#_) .sb-silo-region{ color: var(--ed-att); border-bottom: 1px solid #26262e; }
html:not(#_) .sb-silo-region:hover{ color: var(--ed-texte); }
html:not(#_) .sb-silo-ville{ color: var(--ed-att); transition: color .2s ease; }
html:not(#_) .sb-silo-ville:hover{ color: var(--ed-filet); }

@keyframes ed-glisse-x {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================ BANDEAU MOBILE ============================ */
html:not(#_) .mobile-guest-top{
  background: var(--ed-fond) !important;
  border-bottom: 3px double var(--ed-filet);
  animation: ed-glisse-y .45s ease both;
}
html:not(#_) .mobile-guest-head{ padding-block: 10px; }
html:not(#_) .mobile-guest-brand{
  color: var(--ed-texte) !important;
  font-family: Georgia, serif;
  letter-spacing: .04em;
}
html:not(#_) .mobile-guest-login{
  color: var(--ed-att) !important;
  border: 1px solid #33333d;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color .2s ease, border-color .2s ease;
}
html:not(#_) .mobile-guest-login:hover{ color: var(--ed-texte) !important; border-color: var(--ed-filet); }

html:not(#_) .mobile-guest-cta{ background: var(--ed-fond-clair) !important; }
html:not(#_) .mobile-guest-cta-offer{ color: var(--ed-att) !important; }
html:not(#_) .mobile-guest-cta-kw{ color: var(--ed-texte) !important; font-family: Georgia, serif; }
html:not(#_) .mobile-guest-timer-label{ color: var(--ed-att) !important; }
html:not(#_) .mobile-guest-timer{ color: var(--ed-filet) !important; }
html:not(#_) .mobile-guest-cta-btn{
  background: var(--ed-filet) !important;
  color: #16161c !important;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .mobile-guest-cta-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201, 162, 75, .35);
}

@keyframes ed-glisse-y {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================ FOOTER : colonnes serrées ================= */
html:not(#_) footer.footer-v3{
  background: var(--ed-fond);
  border-top: 3px double var(--ed-filet);
  color: var(--ed-att);
}
html:not(#_) footer.footer-v3 .footer-top{
  border-bottom: 1px solid #262630;
  padding-bottom: 18px;
  margin-bottom: 18px;
}
html:not(#_) footer.footer-v3 .footer-brand h3{
  font-family: Georgia, serif;
  color: var(--ed-texte);
  letter-spacing: .03em;
}
html:not(#_) footer.footer-v3 .footer-brand p, html:not(#_) footer.footer-v3 .footer-newsletter p{ color: var(--ed-att); }
html:not(#_) footer.footer-v3 .btn-primary{
  background: var(--ed-filet);
  color: #16161c;
  border: none;
  transition: transform .2s ease;
}
html:not(#_) footer.footer-v3 .btn-primary:hover{ transform: translateY(-1px); }

html:not(#_) footer.footer-v3 .footer-grid{ gap: 10px 22px; }
html:not(#_) footer.footer-v3 .footer-col + .footer-col{
  border-left: 1px solid #24242e;
  padding-left: 22px;
}
html:not(#_) footer.footer-v3 .footer-col h4{
  font-family: Georgia, serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-texte);
  border-bottom: 1px solid #34343e;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
html:not(#_) footer.footer-v3 .footer-col ul li{ line-height: 1.55; }
html:not(#_) footer.footer-v3 .footer-col a{
  color: var(--ed-att);
  transition: color .2s ease, padding-left .2s ease;
}
html:not(#_) footer.footer-v3 .footer-col a:hover{ color: var(--ed-filet); padding-left: 3px; }

html:not(#_) footer.footer-v3 .footer-bottom{
  border-top: 1px solid #24242e;
  color: var(--ed-att);
  margin-top: 14px;
  padding-top: 12px;
}
html:not(#_) footer.footer-v3 .footer-bottom a{ color: var(--ed-att); }

@media (max-width: 640px) {
  html:not(#_) footer.footer-v3 .footer-col + .footer-col{
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #24242e;
    padding-top: 12px;
  }
}

/* --- Repli sans animation ni transition ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not(#_) .sidebar, html:not(#_) .mobile-guest-top, html:not(#_) .sb-link, html:not(#_) .sb-link::after, html:not(#_) .sb-map-quick-link, html:not(#_) .sb-silo-ville, html:not(#_) .mobile-guest-login, html:not(#_) .mobile-guest-cta-btn, html:not(#_) footer.footer-v3 .btn-primary, html:not(#_) footer.footer-v3 .footer-col a{
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   MISE EN PAGE — villes-bas (recette officielle, copiée telle quelle depuis
   app/design_recettes_v3.css — section « Astro · villes-bas »)
   ========================================================================== */
html:not(#_) body.design-v-villes-bas .container > section.section.ds-villes:first-child{ order: 6; }
html:not(#_) body.design-v-villes-bas div.container.ds-c{ display: flex; flex-direction: column; }
html:not(#_) body.design-v-villes-bas div.container.ds-c > *{ order: 6; }  /* :where() : sinon le :has() gonfle la spécificité au-dessus des règles ciblées (v0, 18/09) */
html:not(#_) body.design-v-villes-bas div.container > .page-header{ order: 0; }  /* pages ville d'un site régional : le H1 reste en tête */
html:not(#_) body.design-v-villes-bas div.container > section.section.ds-profils{ order: 1; }
html:not(#_) body.design-v-villes-bas div.container > .ds-bloc{ order: 2; }
html:not(#_) body.design-v-villes-bas div.container > section.cta-section{ order: 3; }
html:not(#_) body.design-v-villes-bas div.container > section.section.ds-faq{ order: 4; }
html:not(#_) body.design-v-villes-bas div.region-layout{ display: flex; flex-direction: column; }
html:not(#_) body.design-v-villes-bas div.region-layout > aside.region-sidebar{ order: 2; position: static; width: auto; max-width: none; }
html:not(#_) body.design-v-villes-bas div.region-layout > aside.region-sidebar ul.ville-list{ display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   THÈME PROFOND — la même encre anthracite et le même filet or que la barre
   latérale, le bandeau mobile et le footer descendent dans le corps de la
   page : cartes profil, filtres, pagination, bandeau CTA, FAQ, retour en
   haut, pop-ups, barre basse mobile, réassurance native de l'accueil.
   ⚠️ Le corps de page est CLAIR : tout texte tenu par --ed-att/--ed-filet
   reçoit ici un fond sombre posé par cette même feuille (filtres, pagination
   du bas exceptée, cartes, CTA, réassurance, pop-ups, barre du bas) —
   ailleurs (accordéon, numérotation sur fond clair) le texte reste sombre.
   ========================================================================== */

/* Palette redéclarée à la racine : les zones ci-dessous (cartes, CTA, FAQ,
   pop-ups, barre basse mobile...) ne sont pas des descendants de .sidebar,
   .mobile-guest-top ni footer.footer-v3, donc n'héritent pas de leurs
   variables scopées. Mêmes valeurs, portée plus large. */
html:not(#_){
  --ed-fond: #16161c;
  --ed-fond-clair: #1e1e26;
  --ed-texte: #e9e6df;
  --ed-att: #a9a4b0;
  --ed-filet: #c9a24b;
}

/* ---- Réassurance native de l'accueil national (.trust-badges) : restylée,
       jamais doublée d'un second bloc --------------------------------- */
html:not(#_) .trust-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--ed-fond);
  border-top: 3px double var(--ed-filet);
  border-bottom: 3px double var(--ed-filet);
  padding: 14px 4px;
}
html:not(#_) .trust-badges .badge{
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  border-left: 1px solid #2a2a33;
}
html:not(#_) .trust-badges .badge:first-child{ border-left: none; }
html:not(#_) .trust-badges .badge-icon{ filter: grayscale(1) brightness(1.7) sepia(1) hue-rotate(2deg) saturate(3.2); }
html:not(#_) .trust-badges .badge-label{
  font-family: Georgia, "Times New Roman", serif;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-att);
}

/* ---- Cartes profil : même encre que le header, filet or au survol ----- */
html:not(#_) .profile-card{
  background: var(--ed-fond);
  border: 1px solid #2a2a33;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
html:not(#_) .profile-card:hover{
  transform: translateY(-3px);
  border-color: var(--ed-filet);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
html:not(#_) .profile-age{
  background: var(--ed-filet);
  color: var(--ed-fond);
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 3px;
}
html:not(#_) .profile-lock{ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
html:not(#_) .profile-info{ border-top: 1px solid #24242e; }
html:not(#_) .profile-title{
  color: var(--ed-att);
  font-style: italic;
  font-size: .85rem;
}
html:not(#_) .profile-name{
  font-family: Georgia, serif;
  color: var(--ed-texte);
  letter-spacing: .02em;
}
html:not(#_) .profile-ville{
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-att);
  border-top: 1px solid #24242e;
  padding-top: 6px;
  margin-top: 4px;
}
html:not(#_) .profile-footer{ border-top: 1px solid #24242e; }
html:not(#_) .profile-cta{
  color: var(--ed-filet);
  font-family: Georgia, serif;
  font-size: .82rem;
  letter-spacing: .04em;
  transition: color .2s ease;
}
html:not(#_) .profile-card:hover .profile-cta{ color: var(--ed-texte); }

/* ---- Filtres : bandeau sombre encadré du double filet, comme un sommaire */
html:not(#_) .filters{
  background: var(--ed-fond);
  border-top: 3px double var(--ed-filet);
  border-bottom: 1px solid #26262e;
  padding: 12px 14px;
  border-radius: 4px 4px 0 0;
}
html:not(#_) .filter-btn{
  color: var(--ed-att);
  background: transparent;
  border: 1px solid #33333d;
  font-family: Georgia, serif;
  letter-spacing: .03em;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
html:not(#_) .filter-btn:hover{ color: var(--ed-texte); border-color: var(--ed-filet); }
html:not(#_) .filter-btn.active{
  background: var(--ed-filet);
  color: var(--ed-fond);
  border-color: var(--ed-filet);
  font-weight: 700;
}

/* ---- Pagination : reste sur le fond clair de la page, texte sombre,
       accent or au survol / à la page courante (colophon de fin d'article) */
html:not(#_) .pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid #e5e2da;
}
html:not(#_) .pagination-link, html:not(#_) .pagination-current{
  font-family: Georgia, serif;
  color: #57575f;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: color .2s ease, border-color .2s ease;
}
html:not(#_) .pagination-link:hover{ color: var(--ed-fond); border-color: var(--ed-filet); }
html:not(#_) .pagination-current{
  color: var(--ed-fond);
  font-weight: 700;
  border-bottom: 3px double var(--ed-filet);
}
html:not(#_) .pagination-ellipsis{ color: #9a9aa2; }

/* ---- Bandeau CTA de milieu de page ------------------------------------ */
html:not(#_) .cta-section{
  background: var(--ed-fond);
  border-top: 3px double var(--ed-filet);
  border-bottom: 3px double var(--ed-filet);
  border-radius: 4px;
}
html:not(#_) .cta-section h2{
  font-family: Georgia, serif;
  color: var(--ed-texte);
  letter-spacing: .02em;
}
html:not(#_) .cta-section p{ color: var(--ed-att); }
html:not(#_) .cta-section .btn.btn-primary{
  background: var(--ed-filet);
  color: var(--ed-fond);
  border: none;
  font-weight: 700;
  letter-spacing: .03em;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .cta-section .btn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201, 162, 75, .4);
}

/* ---- FAQ / accordéon : rubrique de journal, marqueur en losange or ----- */
html:not(#_) .info-duo-title{
  font-family: Georgia, serif;
  color: var(--ed-fond);
  letter-spacing: .03em;
  border-bottom: 3px double var(--ed-filet);
  padding-bottom: 10px;
}
html:not(#_) .accordion-item{
  border: none;
  border-bottom: 1px solid #e5e2da;
}
html:not(#_) .accordion-item:last-child{ border-bottom: none; }
html:not(#_) .accordion-header{
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}
html:not(#_) .accordion-header::-webkit-details-marker{ display: none; }
html:not(#_) .accordion-q{
  font-family: Georgia, serif;
  color: var(--ed-fond);
  position: relative;
  padding-left: 20px;
}
html:not(#_) .accordion-q::before{
  content: "◆";
  position: absolute;
  left: 0;
  top: .22em;
  color: var(--ed-filet);
  font-size: .68em;
}
html:not(#_) .accordion-item[open] .accordion-q{ color: var(--ed-filet); }
html:not(#_) .accordion-body{
  color: #4b4b55;
  border-left: 1px solid #e5e2da;
  margin-left: 4px;
  padding-left: 16px;
}

/* ---- Retour en haut ----------------------------------------------------- */
html:not(#_) .back-to-top{
  background: var(--ed-fond);
  color: var(--ed-filet);
  border: 1px solid var(--ed-filet);
  font-family: Georgia, serif;
  font-size: 1.15rem;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
html:not(#_) .back-to-top:hover{
  background: var(--ed-filet);
  color: var(--ed-fond);
  transform: translateY(-2px);
}

/* ---- Pop-up profil (#profileModal) : couleurs / bordures / rayons du
       cadre et des boutons seulement — jamais display/position/transform */
html:not(#_) #profileModal .modal-content{
  background: var(--ed-fond);
  border-top: 3px double var(--ed-filet);
  border-radius: 10px;
  color: var(--ed-texte);
}
html:not(#_) #profileModal .modal-close{
  color: var(--ed-att);
  border: 1px solid #33333d;
  border-radius: 50%;
}
html:not(#_) #profileModal .modal-close:hover{ color: var(--ed-texte); border-color: var(--ed-filet); }
html:not(#_) #profileModal .modal-name{ font-family: Georgia, serif; color: var(--ed-texte); }
html:not(#_) #profileModal .modal-nav{
  background: var(--ed-fond);
  color: var(--ed-filet);
  border: 1px solid #33333d;
}
html:not(#_) #profileModal .modal-nav:hover{ border-color: var(--ed-filet); }
html:not(#_) #profileModal .modal-dot{ background: #3a3a45; }
html:not(#_) #profileModal .modal-dot.active{ background: var(--ed-filet); }
html:not(#_) #profileModal .modal-cta-overlay p{ color: var(--ed-texte); }
html:not(#_) #profileModal .btn-cta-overlay{
  background: var(--ed-filet);
  color: var(--ed-fond);
  border: none;
  border-radius: 4px;
  font-weight: 700;
}
html:not(#_) #profileModal .btn-cta-overlay:hover{ background: var(--ed-texte); }

/* ---- Pop-up inscription / connexion : couleurs, bordures, rayons
       seulement — jamais display/position/transform/overflow ----------- */
html:not(#_) .popup-overlay{ background: rgba(22, 22, 28, .82); }
html:not(#_) .popup-card{
  background: var(--ed-fond);
  border-top: 3px double var(--ed-filet);
  border-radius: 10px;
  color: var(--ed-texte);
}
html:not(#_) .popup-close{ color: var(--ed-att); border: 1px solid #33333d; border-radius: 50%; }
html:not(#_) .popup-close:hover{ color: var(--ed-texte); border-color: var(--ed-filet); }
html:not(#_) .popup-icon{ color: var(--ed-filet); }
html:not(#_) .popup-title{ font-family: Georgia, serif; color: var(--ed-texte); }
html:not(#_) .popup-desc{ color: var(--ed-att); }
html:not(#_) .popup-footer{ color: var(--ed-att); border-top: 1px solid #26262e; }
html:not(#_) .popup-footer a{ color: var(--ed-filet); }

/* ---- Age gate : couleurs, bordures, rayons seulement — jamais
       display/position/transform/overflow ------------------------------ */
html:not(#_) .age-gate{ background: rgba(22, 22, 28, .92); }
html:not(#_) .age-gate-modal{
  background: var(--ed-fond);
  border-top: 3px double var(--ed-filet);
  border-radius: 10px;
  color: var(--ed-texte);
}
html:not(#_) .age-gate-modal h2{ font-family: Georgia, serif; color: var(--ed-texte); }
html:not(#_) .age-gate-lead{ color: var(--ed-texte); }
html:not(#_) .age-gate-body, html:not(#_) .age-gate-actions, html:not(#_) .age-gate-footnote{ color: var(--ed-att); }
html:not(#_) .age-gate-link{ color: var(--ed-filet); }
html:not(#_) .age-gate-buttons .btn.btn-primary{
  background: var(--ed-filet);
  color: var(--ed-fond);
  border: none;
  border-radius: 4px;
  font-weight: 700;
}
html:not(#_) .age-gate-buttons .btn.btn-outline{
  background: transparent;
  color: var(--ed-att);
  border: 1px solid #33333d;
  border-radius: 4px;
}

/* ---- Barre basse mobile (barre d'onglets, .bottom-bar/.btab) ----------- */
html:not(#_) .bottom-bar{
  background: var(--ed-fond) !important;
  border-top: 3px double var(--ed-filet);
}
html:not(#_) .btab{ color: var(--ed-att); transition: color .2s ease; }
html:not(#_) .btab .btab-ico{ opacity: .75; transition: opacity .2s ease; }
html:not(#_) .btab-lbl{
  font-family: Georgia, serif;
  font-size: .66rem;
  letter-spacing: .03em;
}
html:not(#_) .btab:hover, html:not(#_) .btab.active{ color: var(--ed-filet); }
html:not(#_) .btab:hover .btab-ico, html:not(#_) .btab.active .btab-ico{ opacity: 1; }

/* --- Repli sans animation ni transition (éléments du thème profond) ---- */
@media (prefers-reduced-motion: reduce) {
  html:not(#_) .profile-card, html:not(#_) .profile-cta, html:not(#_) .filter-btn, html:not(#_) .pagination-link, html:not(#_) .cta-section .btn.btn-primary, html:not(#_) .accordion-header, html:not(#_) .back-to-top, html:not(#_) .btab, html:not(#_) .btab .btab-ico, html:not(#_) #profileModal .modal-close, html:not(#_) .popup-close{
    transition: none !important;
    animation: none !important;
  }
  html:not(#_) .profile-card:hover, html:not(#_) .cta-section .btn.btn-primary:hover, html:not(#_) .back-to-top:hover{
    transform: none !important;
  }
}

/* ==========================================================================
   MENU MOBILE — tiroir de la sidebar sous 768 px. Le socle (case à cocher,
   burger .ds-burger, calque .ds-menu-overlay, bouton .ds-menu-close, tiroir
   plein écran) est posé par l'outil (design_recettes_v3.css) : on n'y touche
   jamais (display/position/transform/overflow des règles :checked restent
   celles du mécanisme). Ici, seulement de la couleur, des pilules et de
   l'espace — même encre anthracite, même filet or que le reste du site.
   ⚠️ .sidebar-inner ne reçoit JAMAIS de `background` ici : sans déclaration,
   l'outil le rend transparent tout seul pour laisser voir le fond posé sur
   .sidebar (desktop comme tiroir) — lui en poser un romprait ce mécanisme.
   ========================================================================== */
@media (max-width: 768px) {
  /* Le burger colore ses trois barres via `background: currentColor` sur un
     `color: inherit` (socle) : on donne donc juste sa couleur à l'ambiance
     du bandeau haut, la même encre claire que la marque du site. */
  html:not(#_) .mobile-guest-head{ color: var(--ed-texte); }

  /* Bouton de fermeture du tiroir (×) : rond sombre, filet or au survol */
  html:not(#_) .ds-menu-close{
    background: var(--ed-fond-clair);
    color: var(--ed-filet);
    border: 1px solid #33333d;
    transition: color .2s ease, border-color .2s ease;
  }
  html:not(#_) .ds-menu-close:hover{ color: var(--ed-texte); border-color: var(--ed-filet); }

  /* Logo du tiroir : marge à droite pour ne jamais passer sous le bouton × */
  html:not(#_) .sidebar .sb-logo{ padding-right: 44px; }

  /* Séparateurs de section : la teinte claire du gabarit se noie sur fond
     sombre, on reprend celle déjà utilisée ailleurs dans cette feuille */
  html:not(#_) .sidebar .sb-section{ border-top-color: #2a2a33; }
  html:not(#_) .sidebar .sb-section-title{ padding: 10px 6px 8px; margin-top: 2px; }
  html:not(#_) .sidebar .sb-section-title span{ font-size: .78rem; }

  /* Pilules de liens : le soulignement au survol du desktop cède la place à
     une carte tactile (fond, bordure, coins ronds, cible ≥ 44 px) */
  html:not(#_) .sidebar .sb-nav{ gap: 8px; margin-bottom: 16px; }
  html:not(#_) .sidebar .sb-link, html:not(#_) .sidebar .sb-map-quick-link, html:not(#_) .sidebar .sb-silo-region, html:not(#_) .sidebar .sb-top-item{
    min-height: 44px;
    padding: 10px 14px;
    margin-bottom: 6px;
    border-radius: 999px;
    border: 1px solid #33333d;
    background: var(--ed-fond-clair);
  }
  html:not(#_) .sidebar .sb-link::after{ display: none; } /* le filet au survol n'a pas de sens au doigt */
  html:not(#_) .sidebar .sb-link:hover, html:not(#_) .sidebar .sb-link.active, html:not(#_) .sidebar .sb-map-quick-link:hover, html:not(#_) .sidebar .sb-silo-region:hover, html:not(#_) .sidebar .sb-top-item:hover{
    background: var(--ed-fond);
    border-color: var(--ed-filet);
  }
  html:not(#_) .sidebar .sb-top-list, html:not(#_) .sidebar .sb-silo-list{ gap: 0; }

  /* Sous-liste des villes d'un canton : mêmes pilules, un ton plus petites */
  html:not(#_) .sidebar .sb-silo-villes{ padding-left: 8px; gap: 4px; }
  html:not(#_) .sidebar .sb-silo-ville, html:not(#_) .sidebar .sb-silo-more{
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 7px 14px;
    margin-bottom: 4px;
    border-radius: 999px;
    border: 1px solid #2a2a33;
  }
  html:not(#_) .sidebar .sb-silo-ville:hover, html:not(#_) .sidebar .sb-silo-more:hover{ border-color: var(--ed-filet); }

  /* CTA d'inscription : seul lien de la nav à sauter aux yeux, plein or */
  html:not(#_) .sidebar .sb-link[href="/register"]{
    background: var(--ed-filet);
    border-color: var(--ed-filet);
    color: var(--ed-fond) !important;
    font-weight: 700;
    justify-content: center;
  }
  html:not(#_) .sidebar .sb-link[href="/register"] .sb-ico{ opacity: 1; }
  html:not(#_) .sidebar .sb-link[href="/register"]:hover{
    background: var(--ed-texte);
    border-color: var(--ed-texte);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html:not(#_) .ds-menu-close, html:not(#_) .sidebar .sb-link, html:not(#_) .sidebar .sb-map-quick-link, html:not(#_) .sidebar .sb-silo-region, html:not(#_) .sidebar .sb-top-item, html:not(#_) .sidebar .sb-silo-ville, html:not(#_) .sidebar .sb-silo-more{
    transition: none !important;
  }
}

/* contraste (audit 18/09) */
html:not(#_) .profile-card .profile-cta{ color: #7a5f1a !important; } html:not(#_) .profile-card .profile-bio, html:not(#_) .profile-card .profile-info p{ color: #c9c4cf !important; }

/* __CONTRASTE_V1 */
/* contraste mesuré < 2.4 (contraste_audit.mjs) : couleur du texte forcée lisible */
@media (min-width: 900px) { html:not(#_) span.sb-logo-text, html:not(#_) span.sb-logo-text a, html:not(#_) span.sb-logo-text span{ color: #151515 !important; } }
@media (min-width: 900px) { html:not(#_) a.sb-link span, html:not(#_) a.sb-link span a, html:not(#_) a.sb-link span span{ color: #151515 !important; } }
@media (min-width: 900px) { html:not(#_) a.sb-map-quick-link span, html:not(#_) a.sb-map-quick-link span a, html:not(#_) a.sb-map-quick-link span span{ color: #151515 !important; } }
@media (min-width: 900px) { html:not(#_) div.sb-section-title span, html:not(#_) div.sb-section-title span a, html:not(#_) div.sb-section-title span span{ color: #151515 !important; } }
@media (min-width: 900px) { html:not(#_) a.sb-silo-region span, html:not(#_) a.sb-silo-region span a, html:not(#_) a.sb-silo-region span span{ color: #151515 !important; } }
@media (min-width: 900px) { html:not(#_) span.badge-label, html:not(#_) span.badge-label a, html:not(#_) span.badge-label span{ color: #151515 !important; } }
@media (max-width: 899px) { html:not(#_) span.badge-label, html:not(#_) span.badge-label a, html:not(#_) span.badge-label span{ color: #151515 !important; } }
@media (max-width: 899px) { html:not(#_) span.sb-logo-text, html:not(#_) span.sb-logo-text a, html:not(#_) span.sb-logo-text span{ color: #151515 !important; } }
@media (max-width: 899px) { html:not(#_) div.sb-section-title span, html:not(#_) div.sb-section-title span a, html:not(#_) div.sb-section-title span span{ color: #151515 !important; } }
/* __END_CONTRASTE_V1 */

/* __FICHE_FIX_V1 (21/09, audit pop-up) : fiche sombre mais puces au fond CLAIR du gabarit (--bg-alt #f4f4f5) avec le texte
   clair du site → puces illisibles ; bandeau sticky des actions blanc (--bg-card). Variables rescopées sur la fiche. */
html:not(#_) #profileModal .modal-content{ --bg-card:var(--ed-fond); --bg-alt:var(--ed-fond-clair); --text:var(--ed-texte); --text-muted:var(--ed-att); --border:#33333d; }
html:not(#_) #profileModal .modal-body h3, html:not(#_) #profileModal .modal-name{ color:var(--ed-texte); }
html:not(#_) #profileModal .modal-meta{ color:var(--ed-filet); }
html:not(#_) #profileModal .modal-bio{ color:var(--ed-texte); }
html:not(#_) #profileModal .modal-body .modal-tag{ background:var(--ed-fond-clair); border:1px solid #3a3a45; color:var(--ed-texte); }
html:not(#_) #profileModal .modal-actions, html:not(#_) #profileModal .modal-actions-sticky{ background:var(--ed-fond); box-shadow:0 1.25rem 0 0 var(--ed-fond); }
html:not(#_) #profileModal .modal-favori{ color:var(--ed-att); }

/* __POPUP_CRO_V1 — fiche profil : blanche, sobre, et réglée pour le clic (23/09, demande de Lucas).
   Posé en fin de la feuille du site : hérite donc de sa palette, et `--cro-accent` est écrit par
   popup_cro_apply.py avec la teinte du site (repli : sa variable primaire).

   Ce que ça change, et pourquoi :
   1. FOND BLANC partout (la fiche était crème, ivoire ou transparente selon les sites) — une surface
      neutre fait ressortir la photo et le bouton, et ne discute pas avec la palette du site.
   2. PHOTO PLAFONNÉE à 42vh sur mobile : elle prenait 400 à 455 px sur un écran de 844 (jusqu'à 54 %),
      ce qui repoussait le bouton à 553 px sur Next. Moins de photo = le bouton remonte dans l'œil.
   3. BOUTON : 54 px, pleine largeur, accent du site, collé en bas de la fiche sur mobile AVEC une marge
      (les puces passaient dessous — défaut mesuré le 19/09 et revu le 22/09).
   4. ANIMATIONS : une ouverture (200 ms), une pression, et UNE seule impulsion du bouton à l'ouverture.
      Rien qui tourne en boucle : sur une page de conversion, le mouvement permanent détourne l'œil.
   Tout est coupé sous prefers-reduced-motion. */

html:not(#_){
  --cro-accent:#7a5f1a;
  --cro-cta-texte:#ffffff;
  --cro-blanc:#ffffff;
  --cro-encre:#14171a;
  --cro-encre-2:#5b656e;
  --cro-trait:#e9ecef;
  --cro-ombre:0 18px 48px -12px rgba(16,20,24,.26);
  --cro-cta-texte:#ffffff;   /* recalculé par site : encre foncée si l'accent est clair (jaune, lime…) */
}

/* ---------- socle commun aux trois gabarits ---------- */
/* ⚠️ Passer le fond au blanc ne suffit pas : les textes de la fiche prennent leur couleur des
   variables du gabarit, réglées pour le fond d'origine (souvent sombre). Sur free-sexkontakt.de la
   bio est ressortie gris pâle sur blanc. On rescope donc les variables SUR la fiche — même remède
   que le 21/09 — et on force la couleur du texte courant. */
html:not(#_) #profileModal .modal-content, html:not(#_) .pm-modal{
  --text:#14171a; --text-muted:#5b656e; --bg:#ffffff; --bg-card:#ffffff; --bg-alt:#f7f8f9; --border:#e9ecef;
  background:var(--cro-blanc) !important;
  color:var(--cro-encre);
  border-radius:16px;
  box-shadow:var(--cro-ombre);
  overflow:hidden;
}
html:not(#_) #profileModal.active .modal-content, html:not(#_) .pm-modal{ animation:cro-entree .2s cubic-bezier(.16,1,.3,1) both; }
@keyframes cro-entree{ from{ opacity:0; transform:translateY(10px) scale(.994); } to{ opacity:1; transform:none; } }

/* le bouton : même dessin partout, quelle que soit la palette du site */
html:not(#_) #profileModal .btn-primary, html:not(#_) #profileModal .modal-contact-btn, html:not(#_) #profileModal .btn-cta-overlay, html:not(#_) .pm-cta button, html:not(#_) .pm-cta a{
  background:var(--cro-accent, var(--primary, #14171a)) !important;
  color:var(--cro-cta-texte, #fff) !important;
  border:0 !important;
  min-height:54px;
  width:100%;
  border-radius:12px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 10px 22px -10px var(--cro-accent, rgba(20,23,26,.6));
  transition:transform .12s ease, filter .12s ease, box-shadow .2s ease;
  cursor:pointer;
}
html:not(#_) #profileModal .btn-primary:hover, html:not(#_) #profileModal .modal-contact-btn:hover, html:not(#_) .pm-cta button:hover, html:not(#_) .pm-cta a:hover{ filter:brightness(1.07); box-shadow:0 14px 26px -10px var(--cro-accent, rgba(20,23,26,.6)); }
html:not(#_) #profileModal .btn-primary:active, html:not(#_) #profileModal .modal-contact-btn:active, html:not(#_) .pm-cta button:active, html:not(#_) .pm-cta a:active{ transform:scale(.985); }
html:not(#_) #profileModal .btn-primary:focus-visible, html:not(#_) .pm-cta button:focus-visible{ outline:3px solid var(--cro-accent, #14171a); outline-offset:3px; }

/* une seule impulsion, au moment où la fiche s'ouvre */
@keyframes cro-pouls{ 0%{ box-shadow:0 10px 22px -10px var(--cro-accent, rgba(20,23,26,.6)), 0 0 0 0 color-mix(in srgb, var(--cro-accent, #14171a) 55%, transparent); }
  70%{ box-shadow:0 10px 22px -10px var(--cro-accent, rgba(20,23,26,.6)), 0 0 0 12px transparent; }
  100%{ box-shadow:0 10px 22px -10px var(--cro-accent, rgba(20,23,26,.6)), 0 0 0 0 transparent; } }
html:not(#_) #profileModal.active .btn-primary, html:not(#_) #profileModal.active .modal-contact-btn, html:not(#_) .pm-modal .pm-cta button{ animation:cro-pouls 1.5s ease-out .45s 2; }

/* ---------- Astro : carrousel + corps ---------- */
html:not(#_) #profileModal .modal-image{ object-fit:cover; }
html:not(#_) #profileModal .modal-body{ background:var(--cro-blanc); padding-bottom:0; }
html:not(#_) #profileModal .modal-name{ color:var(--cro-encre); font-size:22px; letter-spacing:-.01em; }
html:not(#_) #profileModal .modal-meta{ color:var(--cro-encre-2); font-size:13.5px; }
html:not(#_) #profileModal .modal-bio, html:not(#_) #profileModal .modal-bio-wrap p{ color:var(--cro-encre); font-size:15px; line-height:1.55; }
html:not(#_) #profileModal .modal-tag{
  background:#f5f7f8 !important; color:var(--cro-encre-2) !important;
  border:1px solid var(--cro-trait) !important; border-radius:999px; font-size:12px; padding:4px 10px;
}
html:not(#_) #profileModal .modal-tags-label{ color:var(--cro-encre-2) !important; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; }
html:not(#_) #profileModal .modal-close{ background:rgba(255,255,255,.92) !important; color:var(--cro-encre) !important; border-radius:999px; }

/* le texte courant de la fiche, quelle que soit la couleur que lui donnait le gabarit */
html:not(#_) #profileModal .modal-bio, html:not(#_) #profileModal .modal-bio *, html:not(#_) #profileModal .modal-bio-wrap, html:not(#_) #profileModal .modal-bio-wrap *, html:not(#_) #profileModal .modal-body p, html:not(#_) #profileModal .modal-info-value, html:not(#_) #profileModal .modal-infos li, html:not(#_) #profileModal .modal-infos span, html:not(#_) .pm-modal .pm-bio, html:not(#_) .pm-modal .pm-bio p, html:not(#_) .pm-modal .pm-bio div{
  color:var(--cro-encre) !important;
}
html:not(#_) #profileModal .modal-info-label, html:not(#_) #profileModal .modal-infos-label{ color:var(--cro-encre-2) !important; }

/* Un seul bouton doit attirer l'œil : « Favoris » reste accessible mais cesse de rivaliser avec
   « Contacter » (même largeur, même poids visuel = attention partagée, donc moins de clics utiles). */
html:not(#_) #profileModal .modal-actions .btn:not(.btn-primary):not(.modal-contact-btn), html:not(#_) #profileModal .modal-favoris, html:not(#_) #profileModal .btn-favori{
  background:transparent !important;
  color:var(--cro-encre-2) !important;
  border:1px solid var(--cro-trait) !important;
  min-height:42px; font-size:14px; font-weight:500; box-shadow:none !important;
}
/* le corps de la fiche reste sur le blanc : les encarts teintés du site y perdaient la hiérarchie */
html:not(#_) #profileModal .modal-bio-wrap, html:not(#_) #profileModal .modal-body > div[class*="bio"]{
  background:#f7f8f9 !important; border:1px solid var(--cro-trait) !important; border-radius:12px;
}

/* ---------- Next ---------- */
html:not(#_) .pm-modal .pm-head h3{ color:var(--cro-encre) !important; font-size:22px; }
html:not(#_) .pm-modal .pm-bio, html:not(#_) .pm-modal .pm-bio p{ color:var(--cro-encre); }
html:not(#_) .pm-modal .pm-infos .rounded-full{
  background:#f5f7f8 !important; color:var(--cro-encre-2) !important; border:1px solid var(--cro-trait) !important;
}
html:not(#_) .pm-modal .pm-cta{ border-top:1px solid var(--cro-trait) !important; }

/* ---------- mobile : le bouton reste sous la main ---------- */
@media (max-width:768px){
  html:not(#_) #profileModal .modal-carousel, html:not(#_) #profileModal .modal-image, html:not(#_) #profileModal .modal-slide, html:not(#_) .pm-modal .pm-photo, html:not(#_) .pm-modal .pm-media{ max-height:42vh !important; }
  html:not(#_) #profileModal .modal-image{ height:42vh !important; }

  html:not(#_) #profileModal .modal-actions, html:not(#_) .pm-modal .pm-cta{
    position:sticky; bottom:0; z-index:4;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--cro-blanc) 22%) !important;
    padding:14px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    margin-top:8px;
  }
  html:not(#_) #profileModal .modal-tags-block, html:not(#_) .pm-modal .pm-bio{ padding-bottom:6px; }
}

@media (prefers-reduced-motion:reduce){
  html:not(#_) #profileModal.active .modal-content, html:not(#_) .pm-modal, html:not(#_) #profileModal.active .btn-primary, html:not(#_) #profileModal.active .modal-contact-btn, html:not(#_) .pm-modal .pm-cta button{ animation:none !important; }
  html:not(#_) #profileModal .btn-primary, html:not(#_) .pm-cta button{ transition:none !important; }
}
/* __POPUP_CRO_V1_FIN */

/* __SIGNUP_CRO_V1 — pop-up d'inscription : UNE SEULE surface claire (23/09, capture de Lucas).

   Ce qu'elle montrait : un cadre bleu nuit avec, posée dedans, une carte blanche portant le
   formulaire — deux fonds, deux bords, deux ombres pour un seul geste. L'œil doit choisir où
   regarder avant de pouvoir remplir trois champs.

   Ici : une surface blanche unique, du premier pixel du cadre au dernier champ. Le formulaire du
   prestataire perd son propre fond (il devient une partie de la pop-up, pas une pièce rapportée),
   les champs gagnent en hauteur, et le bouton prend la couleur du site sur toute la largeur.
   Moins de bords à lire = moins de friction avant le clic. */

html:not(#_){
  --sg-accent:#7a5f1a;
  --sg-blanc:#ffffff;
  --sg-encre:#14171a;
  --sg-encre-2:#5b656e;
  --sg-trait:#e4e8eb;
  --sg-champ:#fbfcfc;
}

/* le voile : plus sombre et légèrement flouté, pour détacher la pop-up claire du fond du site */
html:not(#_) #signupOverlay, html:not(#_) .signup-overlay, html:not(#_) .popup-overlay{ background:rgba(12,16,20,.62) !important; backdrop-filter:blur(2px); }

/* LA surface — une seule, blanche */
html:not(#_) .signup-popup, html:not(#_) .popup-card, html:not(#_) #signupOverlay > div:not(.signup-overlay):not(.popup-overlay){
  background:var(--sg-blanc) !important;
  color:var(--sg-encre) !important;
  border:0 !important;
  border-radius:18px !important;
  box-shadow:0 24px 60px -16px rgba(10,14,18,.45) !important;
  padding:26px 22px 20px !important;
  animation:sg-entree .2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sg-entree{ from{ opacity:0; transform:translateY(12px) scale(.99); } to{ opacity:1; transform:none; } }

/* Next n'a pas de classe parlante : sa pop-up d'inscription est un `div.fixed.inset-0` qui contient
   un formulaire. On la reconnaît à ça (et pas à son nom), ce qui évite d'attraper la fiche profil. */
/* ⚠️ PAS de :where() ici : il met la spécificité à zéro, et la feuille du site gagne alors avec
   `div.fixed.inset-0 > div.bg-white{border:3px solid …!important}` — c'est ce qui laissait une bordure
   jaune vif autour d'une pop-up censée être d'une seule teinte. */
html:not(#_) div.fixed.inset-0:has(input[type="email"], html:not(#_) form) > div, html:not(#_) div.fixed.inset-0:has(input[type="email"], html:not(#_) form) > div.bg-white{
  background:var(--sg-blanc) !important;
  border:0 !important;
  border-radius:18px !important;
  box-shadow:0 24px 60px -16px rgba(10,14,18,.45) !important;
  padding:0 !important;
}
html:not(#_) div.fixed.inset-0:has(input[type="email"], html:not(#_) form) h1, html:not(#_) div.fixed.inset-0:has(input[type="email"], html:not(#_) form) h2{ font-size:23px !important; line-height:1.2 !important; color:var(--sg-encre) !important; }
html:not(#_) div.fixed.inset-0:has(input[type="email"], html:not(#_) form) input:not([type="checkbox"]):not([type="radio"]){
  min-height:50px !important; font-size:16px !important; border-radius:11px !important;
  border:1px solid var(--sg-trait) !important; background:var(--sg-champ) !important; color:var(--sg-encre) !important;
}
html:not(#_) div.fixed.inset-0:has(input[type="email"], html:not(#_) form) button[type="submit"], html:not(#_) div.fixed.inset-0:has(input[type="email"], html:not(#_) form) form button:not([type="button"]){
  background:var(--sg-accent, #14171a) !important; color:#fff !important; border:0 !important;
  width:100% !important; min-height:54px !important; border-radius:12px !important;
  font-size:16px !important; font-weight:600 !important;
}

/* titres : hiérarchie nette, rien de décoratif entre le titre et le premier champ */
html:not(#_) .signup-header h2, html:not(#_) .popup-title{ color:var(--sg-encre) !important; font-size:23px !important; line-height:1.2; margin:0 0 6px !important; }
html:not(#_) .signup-header p, html:not(#_) .popup-desc{ color:var(--sg-encre-2) !important; font-size:14px !important; margin:0 0 16px !important; }
html:not(#_) .popup-icon{ display:none !important; }   /* l'icône décorative repousse le formulaire vers le bas */

/* le formulaire cesse d'être une carte dans la carte */
html:not(#_) .prelinker-embed, html:not(#_) .popup-prelinker-host, html:not(#_) .popup-prelinker-panel, html:not(#_) .ptprelinker--box, html:not(#_) .ptprelinker-content, html:not(#_) .ptprelinker-content-inner, html:not(#_) .ptprelinker-content-content{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
html:not(#_) .signup-body{ background:transparent !important; padding:0 !important; }

/* champs : plus hauts, bord clair, une seule teinte de fond */
html:not(#_) .ptprelinker-input-group{
  background:var(--sg-champ) !important;
  border:1px solid var(--sg-trait) !important;
  border-radius:11px !important;
  margin-bottom:10px !important;
  overflow:hidden;
}
html:not(#_) .ptprelinker-input-group:focus-within{ border-color:var(--sg-accent, #14171a) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--sg-accent, #14171a) 18%, transparent) !important; }
html:not(#_) .ptprelinker-input-group .ptprelinker-input, html:not(#_) .ptprelinker-input-group .ptprelinker-select{
  background:transparent !important; color:var(--sg-encre) !important;
  min-height:50px !important; font-size:16px !important;   /* 16px : en dessous, iOS zoome au focus */
}
html:not(#_) .ptprelinker-input-group .ptprelinker-input::placeholder{ color:#98a2ab !important; }

/* le bouton : la couleur du site, pleine largeur, seul élément coloré de la pop-up */
html:not(#_) .ptprelinker-buttons input[type="submit"], html:not(#_) .ptprelinker-buttons .ptprelinker-button, html:not(#_) .signup-popup button[type="submit"], html:not(#_) .popup-card button[type="submit"]{
  background:var(--sg-accent, #14171a) !important;
  color:#fff !important;
  border:0 !important;
  width:100% !important;
  min-height:54px !important;
  border-radius:12px !important;
  font-size:16px !important; font-weight:600 !important;
  box-shadow:0 10px 22px -10px var(--sg-accent, rgba(20,23,26,.6)) !important;
  transition:transform .12s ease, filter .12s ease !important;
}
html:not(#_) .ptprelinker-buttons input[type="submit"]:hover, html:not(#_) .ptprelinker-buttons .ptprelinker-button:hover{ filter:brightness(1.07) !important; }
html:not(#_) .ptprelinker-buttons input[type="submit"]:active, html:not(#_) .ptprelinker-buttons .ptprelinker-button:active{ transform:scale(.985) !important; }

/* croix et pied : présents, discrets — ils ne doivent pas concurrencer le bouton */
html:not(#_) .signup-close, html:not(#_) .popup-close{
  background:transparent !important; color:var(--sg-encre-2) !important;
  border:1px solid var(--sg-trait) !important; border-radius:999px !important;
}
html:not(#_) .signup-footer, html:not(#_) .popup-footer{ color:var(--sg-encre-2) !important; font-size:13px !important; border-top:1px solid var(--sg-trait); padding-top:12px !important; margin-top:14px !important; }
html:not(#_) .signup-footer a, html:not(#_) .popup-footer a{ color:var(--sg-accent, #14171a) !important; font-weight:600; }

@media (max-width:768px){
  html:not(#_) .signup-popup, html:not(#_) .popup-card{ padding:22px 16px 16px !important; border-radius:16px !important; }
  html:not(#_) .signup-header h2, html:not(#_) .popup-title{ font-size:21px !important; }
}
@media (prefers-reduced-motion:reduce){
  html:not(#_) .signup-popup, html:not(#_) .popup-card{ animation:none !important; }
  html:not(#_) .ptprelinker-buttons input[type="submit"], html:not(#_) .ptprelinker-buttons .ptprelinker-button{ transition:none !important; }
}
/* __SIGNUP_CRO_V1_FIN */

@media (prefers-reduced-motion: reduce){html:not(#_) .sidebar-inner{animation:none !important;transition:none !important;}}
html:not(#_) .sidebar-inner{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.45) transparent;}
/* __END_DESIGN_SITE__ */