/* __DESIGN_SITE__ */
/* socle filtres (ajouté par design_site.py) */
.ds-hide { display: none !important; }
body[data-ds-filtres="aucun"] .filters { display: none !important; }
body[data-ds-filtres="sans-genre"] .filters .filter-btn[data-filter="type"] { display: none !important; }
body[data-ds-filtres="sans-age"] .filters .filter-btn[data-filter="age"] { display: none !important; }
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; }
body[data-ds-filtres="ligne"] .filters::-webkit-scrollbar { display: none; }
body[data-ds-filtres="ligne"] .filters .filter-btn { flex: 0 0 auto; white-space: nowrap; }
.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; }
.filters .ds-fgroup { display: contents; }
/* Next : barre React (div.shadow-sm > div.scrollbar-hide > .form-group > select ×2 + bouton Recherche) */
body[data-ds-filtres="aucun"] div.rounded-lg.shadow-sm:has(> div.scrollbar-hide > div.form-group > select) { display: none !important; }
body[data-ds-filtres="sans-genre"] div.scrollbar-hide > div.form-group:first-child:has(> select) { display: none !important; }
body[data-ds-filtres="sans-tri"] div.scrollbar-hide > div.form-group:nth-child(2):has(> select) { display: none !important; }
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é) */
.ds-fnext { display: flex; gap: 8px; flex-wrap: nowrap; }
.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; }
.ds-fnext .ds-fchip.active { background: var(--secondary-color, #18181b); color: #fff; border-color: transparent; }

/* socle menu mobile Next (ajouté par design_site.py) */
@media (max-width: 767px) {
  .ds-mburger { position: fixed; top: 12px; left: 10px; z-index: 60; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; background: #18181b; color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
  .ds-mburger span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .ds-moverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; }
  .ds-mdrawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 340px); z-index: 70; overflow-y: auto; background: #fff; color: #18181b; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 8px 0 30px rgba(0,0,0,.3); padding-bottom: 24px; }
  body:has(#ds-mcb:checked) .ds-moverlay { display: block; }
  body:has(#ds-mcb:checked) .ds-mdrawer { transform: none; }
  body:has(#ds-mcb:checked) { overflow: hidden; }
  .ds-mhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.1); font-weight: 700; font-size: 1.05rem; }
  .ds-mclose { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; background: rgba(0,0,0,.06); }
  .ds-msec { padding: 12px 16px 4px; }
  .ds-msec-t { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
  .ds-mlinks { display: flex; flex-wrap: wrap; gap: 8px; }
  .ds-mlink { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: rgba(0,0,0,.03); color: inherit; text-decoration: none; font-size: .9rem; line-height: 1.2; }
  .ds-mnav .ds-mlink { font-weight: 600; }
  .ds-mfoot { padding: 18px 16px 0; }
  .ds-mcta { display: block; width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--secondary-color, #18181b); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
}
@media (min-width: 768px) { .ds-mburger, .ds-mdrawer, .ds-moverlay { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ds-mdrawer { transition: none; } }

/* ==========================================================================
   sexanzeigen-online.de — habillage unique header + footer
   Direction : rouge profond + noir, logo souligné par un trait qui s'étire
   au survol. Ne touche qu'à <header> et <footer> (Tailwind, gabarit Next).
   ========================================================================== */

:root{
  --sx-bg-1:#0b0205;   /* noir profond */
  --sx-bg-2:#3b0512;   /* rouge très sombre, transition */
  --sx-bg-3:#7a0c1e;   /* rouge profond, point chaud du dégradé */
  --sx-accent:#ff4d6d; /* rouge vif — liens, logo, titres (contraste garanti) */
  --sx-accent-2:#d81e3a; /* rouge intermédiaire — liserés, dégradés */
  --sx-fg:#e3d3d5;     /* texte clair chaud, sur fond sombre */
  --sx-muted:#ab8891;  /* texte secondaire (copyright, mentions) */
}

/* ---- Animations ---------------------------------------------------- */
@keyframes sx-header-in{
  from{opacity:0; transform:translateY(-10px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes sx-shimmer{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Chaîne de classes déjà présentes sur le <header> : la spécificité gagne
   sans avoir à réécrire tout Tailwind. Le fond et la bordure inline
   (style="border-bottom-color:…") exigent !important pour être repris. */
header.sticky.top-0.z-50.border-b{
  background:linear-gradient(120deg, var(--sx-bg-1) 0%, var(--sx-bg-2) 55%, var(--sx-bg-3) 100%) !important;
  border-bottom-color:rgba(255,77,109,.35) !important;
  box-shadow:0 2px 18px rgba(0,0,0,.35);
  animation:sx-header-in .6s ease-out both;
}
@media (prefers-reduced-motion: reduce){
  header.sticky.top-0.z-50.border-b{animation:none;}
}

/* Texte et icônes du header : le gabarit prévoit des couleurs différentes
   selon clair/sombre système (text-zinc-700 / dark:text-zinc-300…) ; comme
   le fond devient toujours sombre ici, on impose une couleur claire unique
   pour garantir le contraste dans les deux cas — d'où le !important. */
header.sticky a,
header.sticky button{
  color:var(--sx-fg) !important;
}
header.sticky a:hover,
header.sticky a:focus-visible,
header.sticky button:hover,
header.sticky button:focus-visible{
  color:#fff !important;
}
header.sticky button{
  transition:color .2s ease, transform .2s ease;
}
header.sticky button:hover,
header.sticky button:focus-visible{
  transform:translateY(-1px);
}
header.sticky a:focus-visible,
header.sticky button:focus-visible{
  outline:2px solid var(--sx-accent);
  outline-offset:2px;
  border-radius:4px;
}

/* Cible tactile ≥ 44 px pour les boutons du header (hamburger, espace
   membre, login, recherche) sans toucher à leur position/affichage. */
header.sticky button{
  min-height:44px;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
header.sticky .md\:hidden button{
  min-height:44px;
}

/* Logo : couleur imposée en inline (style="color:#E35D8F") → repris en
   rouge vif de la charte, avec un trait qui s'étire au survol. Uniquement
   sur la version bureau (sans la classe .absolute qui sert au centrage
   mobile) pour ne jamais perturber son positionnement. */
header.sticky a[href="/"]{
  color:var(--sx-accent) !important;
  font-weight:800;
  letter-spacing:.01em;
}
header.sticky a[href="/"]:not(.absolute){
  position:relative;
  display:inline-block;
  padding-bottom:.2rem;
}
header.sticky a[href="/"]:not(.absolute)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:0;
  background:linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
  transition:width .35s ease;
}
header.sticky a[href="/"]:not(.absolute):hover::after,
header.sticky a[href="/"]:not(.absolute):focus-visible::after{
  width:100%;
}
@media (prefers-reduced-motion: reduce){
  header.sticky a[href="/"]:not(.absolute)::after{transition:none;}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer.border-t.bg-zinc-50{
  background:linear-gradient(180deg, var(--sx-bg-1) 0%, #170408 100%) !important;
  border-top-color:rgba(255,77,109,.35) !important;
  position:relative;
  overflow:hidden;
}

/* Liseré animé en tête de footer — fine bande, pas de grande surface,
   dérive lente et sans à-coup ; coupé si mouvement réduit demandé. */
footer.border-t.bg-zinc-50::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,
    var(--sx-bg-1) 0%, var(--sx-accent-2) 25%, var(--sx-accent) 50%,
    var(--sx-accent-2) 75%, var(--sx-bg-1) 100%);
  background-size:200% 100%;
  animation:sx-shimmer 7s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  footer.border-t.bg-zinc-50::before{animation:none; background-position:0 50%;}
}

/* Titres de colonnes : reprend l'accent rouge vif partout (y compris la
   colonne marque, dont la couleur est fixée en inline). */
footer h3{
  color:var(--sx-accent) !important;
}

/* Textes et liens : le gabarit utilise des gris pensés pour un fond clair
   (text-zinc-600/900/500) ; sur fond sombre ils tomberaient sous le seuil
   de contraste, d'où la reprise en !important. */
footer .text-zinc-600,
footer p.text-zinc-600{
  color:var(--sx-fg) !important;
}
footer .text-zinc-500{
  color:var(--sx-muted) !important;
}
footer a{
  transition:color .2s ease;
}
footer a:hover,
footer a:focus-visible{
  color:var(--sx-accent) !important;
  text-decoration-color:var(--sx-accent);
}
footer a:focus-visible{
  outline:2px solid var(--sx-accent);
  outline-offset:2px;
  border-radius:2px;
}

/* Séparateur avant le bas de page (mentions légales) : repris dans la
   même teinte sombre que le reste du footer. */
footer .border-zinc-200{
  border-color:rgba(255,77,109,.2) !important;
}

/* ==========================================================================
   BLOC DE RÉASSURANCE — socle (design_recettes_v3.css, copié tel quel)
   ========================================================================== */
.ds-bloc { margin: 24px 0; padding: 24px; border-radius: 16px; }
.ds-titre { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.25; }
.ds-sous { margin: 0 0 16px; opacity: .85; }
.ds-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ds-item { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: start; }
.ds-ico { grid-row: 1 / 3; width: 28px; height: 28px; }
.ds-ico svg { width: 28px; height: 28px; display: block; }
.ds-item-t { display: block; font-weight: 700; }
.ds-item-p { display: block; font-size: .93rem; opacity: .85; }

/* ==========================================================================
   BLOC DE RÉASSURANCE — habillage (même registre que le header : dégradé
   noir → rouge profond, liseré animé, trait qui s'étire sous le titre).
   ========================================================================== */
.ds-bloc{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, var(--sx-bg-1) 0%, var(--sx-bg-2) 60%, var(--sx-bg-3) 100%) !important;
  border:1px solid rgba(255,77,109,.35);
  box-shadow:0 10px 26px -16px rgba(122,12,30,.55);
}
.ds-bloc::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,
    var(--sx-bg-1) 0%, var(--sx-accent-2) 25%, var(--sx-accent) 50%,
    var(--sx-accent-2) 75%, var(--sx-bg-1) 100%);
  background-size:200% 100%;
  animation:sx-shimmer 7s linear infinite;
}
.ds-titre{
  color:#fff;
  font-weight:800;
  position:relative;
  display:inline-block;
  padding-bottom:.2rem;
}
.ds-titre::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:2px;
  width:42px;
  background:linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
}
.ds-sous{
  color:var(--sx-fg);
  opacity:.92;
  max-width:62ch;
}
.ds-item-t{
  color:var(--sx-accent);
}
.ds-item-p{
  color:var(--sx-fg);
  opacity:.85;
}
.ds-ico{
  color:var(--sx-accent);
  filter:drop-shadow(0 0 6px rgba(255,77,109,.45));
}
.ds-item{
  padding:10px 12px 10px 0;
  border-left:2px solid rgba(255,77,109,.28);
  padding-left:12px;
  transition:border-color .25s ease, transform .25s ease;
}
.ds-item:hover{
  border-left-color:var(--sx-accent);
  transform:translateX(3px);
}

/* ==========================================================================
   THÈME PROFOND — le reste des pages reprend le même registre que le
   header/footer (dégradés noir/rouge, trait qui s'étire, liseré animé).
   ========================================================================== */

/* -- cartes profil (carrousel horizontal, accueil et ville) -- */
.flex-shrink-0.w-40.sm\:w-64.bg-zinc-50,
.flex-shrink-0.w-40.sm\:w-64.dark\:bg-zinc-900{
  background:#fff !important;
  border-color:rgba(216,30,58,.25) !important;
  border-top:3px solid var(--sx-accent) !important;
  border-radius:12px !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.flex-shrink-0.w-40.sm\:w-64.bg-zinc-50:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px -16px rgba(122,12,30,.5);
  border-color:var(--sx-accent) !important;
}
.flex-shrink-0.w-40.sm\:w-64.bg-zinc-50 img{
  border-radius:8px !important;
}
/* badge d'âge : pastille dégradée rouge au lieu du noir translucide */
.flex-shrink-0.w-40.sm\:w-64.bg-zinc-50 .bg-zinc-900\/80{
  background:linear-gradient(135deg, var(--sx-accent-2), var(--sx-accent)) !important;
  color:#fff !important;
  border-radius:999px !important;
  font-weight:700;
  box-shadow:0 2px 8px rgba(122,12,30,.4);
}
.flex-shrink-0.w-40.sm\:w-64.bg-zinc-50 h3{
  color:var(--sx-accent-2);
}
.flex-shrink-0.w-40.sm\:w-64.bg-zinc-50 p.text-zinc-500,
.flex-shrink-0.w-40.sm\:w-64.bg-zinc-50 p.text-zinc-600{
  color:#7a5a5f !important;
}

/* -- barre de tri / recherche au-dessus de la grille -- */
.overflow-x-auto.scrollbar-hide.scroll-smooth select,
.overflow-x-auto.scrollbar-hide.scroll-smooth button{
  border-radius:10px !important;
  border-color:rgba(216,30,58,.35) !important;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.overflow-x-auto.scrollbar-hide.scroll-smooth select:focus{
  border-color:var(--sx-accent) !important;
  outline:none;
}
.overflow-x-auto.scrollbar-hide.scroll-smooth button:hover{
  background:rgba(255,77,109,.08) !important;
  border-color:var(--sx-accent) !important;
  color:var(--sx-accent-2) !important;
}

/* -- bandeau CTA de milieu de page (accueil et ville) : même registre que
   le header, pour que le point de conversion se reconnaisse à l'identité
   du site. Le bouton porte un fond inline (--secondary-color) : !important
   obligatoire pour le reprendre. -- */
section.rounded-2xl.shadow-lg.text-center{
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg, var(--sx-bg-1) 0%, var(--sx-bg-2) 55%, var(--sx-bg-3) 100%) !important;
  border:1px solid rgba(255,77,109,.3);
  box-shadow:0 10px 26px -16px rgba(122,12,30,.55);
}
section.rounded-2xl.shadow-lg.text-center::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,
    var(--sx-bg-1) 0%, var(--sx-accent-2) 25%, var(--sx-accent) 50%,
    var(--sx-accent-2) 75%, var(--sx-bg-1) 100%);
  background-size:200% 100%;
  animation:sx-shimmer 7s linear infinite;
}
section.rounded-2xl.shadow-lg.text-center h2{
  color:#fff !important;
}
section.rounded-2xl.shadow-lg.text-center button{
  background:linear-gradient(135deg, var(--sx-accent-2), var(--sx-accent)) !important;
  color:#fff !important;
  border-radius:999px !important;
  box-shadow:0 8px 20px -8px rgba(122,12,30,.65);
  transition:transform .2s ease, box-shadow .2s ease;
}
section.rounded-2xl.shadow-lg.text-center button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -8px rgba(122,12,30,.75);
}

/* -- FAQ / accordéon -- */
section.shadow-lg:has(> div.space-y-0){
  border:1px solid rgba(216,30,58,.2);
}
section.shadow-lg:has(> div.space-y-0) h2{
  color:var(--sx-accent-2);
}
section.shadow-lg:has(> div.space-y-0) div.space-y-0 > div{
  border-color:rgba(216,30,58,.18) !important;
}
section.shadow-lg:has(> div.space-y-0) div.space-y-0 button:hover{
  background:rgba(255,77,109,.06) !important;
}
section.shadow-lg:has(> div.space-y-0) div.space-y-0 h3{
  color:#3b0512;
}
section.shadow-lg:has(> div.space-y-0) div.space-y-0 svg{
  color:var(--sx-accent) !important;
}

/* -- texte SEO (intro / paragraphes) -- */
section:has(> div.prose) h2{
  color:var(--sx-accent-2);
}
section:has(> div.prose) a{
  color:var(--sx-accent-2) !important;
  text-decoration-color:rgba(216,30,58,.4);
}
section:has(> div.prose) a:hover{
  color:var(--sx-accent) !important;
}

/* -- « Nach Bundesland » (recherche + liste, y compris rendu client) :
   même trait qui s'étire que le logo du header, sur les liens. -- */
section#departements{
  border:1px solid rgba(216,30,58,.2);
}
section#departements h2{
  color:var(--sx-accent-2);
}
section#departements input{
  border-radius:10px !important;
  border-color:rgba(216,30,58,.3) !important;
}
section#departements input:focus{
  border-color:var(--sx-accent) !important;
  outline:none;
}
section#departements a{
  position:relative;
  display:inline-block;
  transition:color .2s ease;
}
section#departements a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  height:2px;
  width:0;
  background:linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
  transition:width .3s ease;
}
section#departements a:hover{
  color:var(--sx-accent-2) !important;
}
section#departements a:hover::after{
  width:100%;
}

/* -- Top 20 Städte + Städte in der Nähe (chips à liseré gauche) -- */
nav[aria-label] a[style*="border-left"]{
  border-left-color:var(--sx-accent) !important;
  border-radius:8px;
  transition:background-color .2s ease, color .2s ease, transform .15s ease;
}
nav[aria-label] a[style*="border-left"]:hover{
  background:rgba(255,77,109,.08) !important;
  color:var(--sx-accent-2) !important;
  transform:translateX(2px);
}

/* -- bouton retour en haut : fond noir/blanc inline → repris en dégradé
   rouge de la charte -- */
button.fixed.bottom-6.right-6{
  background:linear-gradient(135deg, var(--sx-accent-2), var(--sx-accent)) !important;
  color:#fff !important;
  box-shadow:0 8px 20px -8px rgba(122,12,30,.6);
  transition:transform .2s ease, box-shadow .2s ease;
}
button.fixed.bottom-6.right-6:hover{
  transform:translateY(-2px);
}

/* -- age gate / pop-up d'inscription (prelinker) : couleurs, bordures et
   rayons seulement — jamais display/position/transform/overflow. -- */
.fixed.inset-0 .rounded-2xl,
.fixed.inset-0 .rounded-xl{
  border:1px solid rgba(216,30,58,.25);
}
.fixed.inset-0 button{
  border-radius:999px;
}
.prelinker-embed input,
.prelinker-embed select{
  border-radius:10px !important;
  border-color:rgba(216,30,58,.35) !important;
}
.prelinker-embed input:focus,
.prelinker-embed select:focus{
  border-color:var(--sx-accent) !important;
  outline:none;
}
.prelinker-embed button{
  background:linear-gradient(135deg, var(--sx-accent-2), var(--sx-accent)) !important;
  color:#fff !important;
  border-radius:999px !important;
}

/* -- bandeau de réassurance natif (3 items, avant le footer) : même liseré
   animé que le footer, icônes reprises en rouge vif de la charte. -- */
section.border-t.border-b.min-h-\[280px\]{
  position:relative;
  overflow:hidden;
}
section.border-t.border-b.min-h-\[280px\]::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,
    #fff 0%, var(--sx-accent-2) 25%, var(--sx-accent) 50%,
    var(--sx-accent-2) 75%, #fff 100%);
  background-size:200% 100%;
  animation:sx-shimmer 7s linear infinite;
}
section.border-t.border-b.min-h-\[280px\] svg[style*="color"]{
  color:var(--sx-accent-2) !important;
}
section.border-t.border-b.min-h-\[280px\] .rounded-full[style*="background-color"]{
  background-color:rgba(255,77,109,.1) !important;
}

/* ---------- accessibilité (complète le bloc existant) ---------- */
@media (prefers-reduced-motion: reduce){
  .ds-bloc::before,
  .ds-item,
  section.rounded-2xl.shadow-lg.text-center::before,
  section.rounded-2xl.shadow-lg.text-center button,
  section.border-t.border-b.min-h-\[280px\]::before,
  .flex-shrink-0.w-40.sm\:w-64.bg-zinc-50,
  button.fixed.bottom-6.right-6,
  nav[aria-label] a[style*="border-left"],
  section#departements a::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ==========================================================================
   MENU MOBILE (tiroir) — même registre que le header/footer. Le socle
   mécanique (ouverture/fermeture, fixe du déclencheur) est ajouté par
   l'outil APRÈS ce fichier : tout ici est en `!important` pour l'emporter
   quel que soit l'ordre. Aucune propriété display/position/transform/
   overflow du mécanisme n'est touchée.
   ========================================================================== */
.ds-mburger{background:linear-gradient(135deg, var(--sx-bg-2), var(--sx-bg-1)) !important; border:2px solid rgba(255,77,109,.5) !important; box-shadow:0 2px 10px rgba(0,0,0,.5) !important; color:var(--sx-accent) !important;}
.ds-moverlay{background:rgba(11,2,5,.72) !important;}
.ds-mdrawer{background:linear-gradient(180deg, var(--sx-bg-1) 0%, var(--sx-bg-2) 100%) !important; color:var(--sx-fg) !important; border-right:1px solid rgba(255,77,109,.3); box-shadow:8px 0 34px rgba(0,0,0,.55) !important;}
.ds-mhead{background:linear-gradient(120deg, var(--sx-bg-1) 0%, var(--sx-bg-2) 100%) !important; border-bottom:1px solid rgba(255,77,109,.3) !important;}
.ds-mbrand{color:var(--sx-accent) !important; font-weight:800; letter-spacing:.01em;}
.ds-mclose{background:rgba(255,77,109,.16) !important; border:1px solid rgba(255,77,109,.4); color:var(--sx-fg) !important; transition:background-color .2s ease, color .2s ease;}
.ds-mclose:hover, .ds-mclose:focus-visible{background:var(--sx-accent) !important; color:#fff !important;}
.ds-msec-t{color:var(--sx-muted) !important;}
.ds-msec + .ds-msec{border-top:1px solid rgba(255,77,109,.14); margin-top:4px;}
.ds-mlink{display:inline-flex !important; align-items:center; min-height:40px; padding:8px 16px !important; border-radius:999px !important; border:1px solid rgba(255,77,109,.35) !important; background:rgba(255,77,109,.08) !important; color:var(--sx-fg) !important; font-size:.92rem; transition:background-color .2s ease, color .2s ease, border-color .2s ease;}
.ds-mlink:hover, .ds-mlink:focus-visible{background:linear-gradient(135deg, var(--sx-accent-2), var(--sx-accent)) !important; color:#fff !important; border-color:var(--sx-accent) !important;}
.ds-mnav .ds-mlink{border-color:var(--sx-accent) !important; background:rgba(255,77,109,.16) !important; font-weight:700;}
.ds-mfoot{border-top:1px solid rgba(255,77,109,.2); padding-top:16px !important;}
.ds-mcta{background:linear-gradient(135deg, var(--sx-accent-2), var(--sx-accent)) !important; color:#fff !important; border-radius:999px !important; box-shadow:0 10px 22px -10px rgba(122,12,30,.7) !important; transition:transform .2s ease;}
.ds-mcta:hover, .ds-mcta:focus-visible{transform:translateY(-2px);}
.ds-mlink:focus-visible, .ds-mcta:focus-visible, .ds-mclose:focus-visible{outline:2px solid var(--sx-accent); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  .ds-mclose, .ds-mlink, .ds-mcta{transition:none !important;}
  .ds-mcta:hover, .ds-mcta:focus-visible{transform:none !important;}
}

/* __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. */

:root{
  --cro-accent:#d81e3a;
  --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. */
#profileModal .modal-content,
.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;
}
#profileModal.active .modal-content,
.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 */
#profileModal .btn-primary,
#profileModal .modal-contact-btn,
#profileModal .btn-cta-overlay,
.pm-cta button,
.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;
}
#profileModal .btn-primary:hover,
#profileModal .modal-contact-btn:hover,
.pm-cta button:hover,
.pm-cta a:hover{ filter:brightness(1.07); box-shadow:0 14px 26px -10px var(--cro-accent, rgba(20,23,26,.6)); }
#profileModal .btn-primary:active,
#profileModal .modal-contact-btn:active,
.pm-cta button:active,
.pm-cta a:active{ transform:scale(.985); }
#profileModal .btn-primary:focus-visible,
.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; } }
#profileModal.active .btn-primary,
#profileModal.active .modal-contact-btn,
.pm-modal .pm-cta button{ animation:cro-pouls 1.5s ease-out .45s 2; }

/* ---------- Astro : carrousel + corps ---------- */
#profileModal .modal-image{ object-fit:cover; }
#profileModal .modal-body{ background:var(--cro-blanc); padding-bottom:0; }
#profileModal .modal-name{ color:var(--cro-encre); font-size:22px; letter-spacing:-.01em; }
#profileModal .modal-meta{ color:var(--cro-encre-2); font-size:13.5px; }
#profileModal .modal-bio, #profileModal .modal-bio-wrap p{ color:var(--cro-encre); font-size:15px; line-height:1.55; }
#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;
}
#profileModal .modal-tags-label{ color:var(--cro-encre-2) !important; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; }
#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 */
#profileModal .modal-bio, #profileModal .modal-bio *,
#profileModal .modal-bio-wrap, #profileModal .modal-bio-wrap *,
#profileModal .modal-body p, #profileModal .modal-info-value,
#profileModal .modal-infos li, #profileModal .modal-infos span,
.pm-modal .pm-bio, .pm-modal .pm-bio p, .pm-modal .pm-bio div{
  color:var(--cro-encre) !important;
}
#profileModal .modal-info-label, #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). */
#profileModal .modal-actions .btn:not(.btn-primary):not(.modal-contact-btn),
#profileModal .modal-favoris,
#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 */
#profileModal .modal-bio-wrap,
#profileModal .modal-body > div[class*="bio"]{
  background:#f7f8f9 !important; border:1px solid var(--cro-trait) !important; border-radius:12px;
}

/* ---------- Next ---------- */
.pm-modal .pm-head h3{ color:var(--cro-encre) !important; font-size:22px; }
.pm-modal .pm-bio, .pm-modal .pm-bio p{ color:var(--cro-encre); }
.pm-modal .pm-infos .rounded-full{
  background:#f5f7f8 !important; color:var(--cro-encre-2) !important; border:1px solid var(--cro-trait) !important;
}
.pm-modal .pm-cta{ border-top:1px solid var(--cro-trait) !important; }
/* libellés d'infos : l'habillage les teinte de son accent, ce qui tenait sur l'ancien fond sombre et
   passe mal sur blanc (orange clair sur blanc : 1,9 mesuré). Ils redeviennent gris — ce sont des
   étiquettes, la valeur à côté est ce qu'on lit. */
.pm-modal [class*="text-zinc-500"],
.pm-modal [class*="text-zinc-400"],
.pm-modal .pm-bio .text-xs{ color:var(--cro-encre-2) !important; }

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

  #profileModal .modal-actions,
  .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;
  }
  #profileModal .modal-tags-block,
  .pm-modal .pm-bio{ padding-bottom:6px; }
}

@media (prefers-reduced-motion:reduce){
  #profileModal.active .modal-content, .pm-modal,
  #profileModal.active .btn-primary, #profileModal.active .modal-contact-btn, .pm-modal .pm-cta button{ animation:none !important; }
  #profileModal .btn-primary, .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. */

:root{
  --sg-accent:#d81e3a;
  --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 */
#signupOverlay,
.signup-overlay,
.popup-overlay{ background:rgba(12,16,20,.62) !important; backdrop-filter:blur(2px); }

/* LA surface — une seule, blanche */
.signup-popup,
.popup-card,
#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. */
div.fixed.inset-0:has(input[type="email"], form) > div,
div.fixed.inset-0:has(input[type="email"], 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;
}
div.fixed.inset-0:has(input[type="email"], form) h1,
div.fixed.inset-0:has(input[type="email"], form) h2{ font-size:23px !important; line-height:1.2 !important; color:var(--sg-encre) !important; }
div.fixed.inset-0:has(input[type="email"], 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;
}
div.fixed.inset-0:has(input[type="email"], form) button[type="submit"],
div.fixed.inset-0:has(input[type="email"], 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 */
.signup-header h2, .popup-title{ color:var(--sg-encre) !important; font-size:23px !important; line-height:1.2; margin:0 0 6px !important; }
.signup-header p, .popup-desc{ color:var(--sg-encre-2) !important; font-size:14px !important; margin:0 0 16px !important; }
.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 */
.prelinker-embed, .popup-prelinker-host, .popup-prelinker-panel,
.ptprelinker--box, .ptprelinker-content, .ptprelinker-content-inner, .ptprelinker-content-content{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.signup-body{ background:transparent !important; padding:0 !important; }

/* champs : plus hauts, bord clair, une seule teinte de fond */
.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;
}
.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; }
.ptprelinker-input-group .ptprelinker-input,
.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 */
}
.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 */
.ptprelinker-buttons input[type="submit"],
.ptprelinker-buttons .ptprelinker-button,
.signup-popup button[type="submit"], .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;
}
.ptprelinker-buttons input[type="submit"]:hover,
.ptprelinker-buttons .ptprelinker-button:hover{ filter:brightness(1.07) !important; }
.ptprelinker-buttons input[type="submit"]:active,
.ptprelinker-buttons .ptprelinker-button:active{ transform:scale(.985) !important; }

/* croix et pied : présents, discrets — ils ne doivent pas concurrencer le bouton */
.signup-close, .popup-close{
  background:transparent !important; color:var(--sg-encre-2) !important;
  border:1px solid var(--sg-trait) !important; border-radius:999px !important;
}
.signup-footer, .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; }
.signup-footer a, .popup-footer a{ color:var(--sg-accent, #14171a) !important; font-weight:600; }

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

/* garde menu Next (design_site.py) */
.ds-mdrawer, .ds-mburger, .ds-moverlay { position: fixed !important; }

/* garde-fou design_site.py (Next, 17/09) : le logo mobile est un <a> absolu centré ; un nom de site
   allemand long (« Kostenlose Sexdates in Deutschland ») débordait ou s'empilait sur 3 lignes
   par-dessus les icônes (capture du 17/09). Une ligne, ellipse, place réservée aux boutons. */
@media (max-width: 767px) {
  header .md\:hidden a[href="/"] {
    max-width: 56% !important; white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important; font-size: clamp(.95rem, 4.4vw, 1.25rem) !important; line-height: 1.2 !important;
    position: absolute !important; /* lot 21 : un `position: relative` posé pour un ::after l'avait mis dans le flux → bouton par-dessus */
  }
  header nav.hidden { display: none !important; }
}
/* garde-fou 18/09 : la carte des pages ville tombait en repli avec un texte FRANÇAIS (« Carte indisponible (fallback) ») —
   corrigé à la source (VilleMap.tsx), masqué ici tant que le dist n'est pas reconstruit. */
main.space-y-12 > div.rounded-2xl.mb-8 > div.mb-3.text-sm.text-zinc-600 { display: none !important; }
@media (max-width: 767px) { /* lot 21 : `display:flex` posé sur nav.hidden.md:flex la faisait sortir sur mobile, par-dessus le logo */
  /* 19/09 (capture de Lucas, pop-up profil mobile) : le bouton « Registrieren… » remonté sous la photo touchait le
     titre « Bio » (bio.top == cta.bottom, toutes variantes pm-v) ; corrigé à la source (popup_skins.css / globals.css),
     posé ici pour les dists déjà construits. */
  .pm-modal .pm-cta { margin-bottom: .9rem !important; }
}
/* __END_DESIGN_SITE__ */