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

/* ============================================================
   treffen-erotik.de — direction "ambre / noir"
   Header et footer passent sur un fond noir chaud, un liseré
   ambre dérive lentement juste sous le header, les liens
   s'animent (soulignement) au survol. Rien d'autre n'est touché
   (grille de profils, fiches, formulaires, age gate, prelinker).

   Ajoutée après les feuilles du site : à spécificité égale, elle
   gagne déjà (ordre d'apparition). Pour aller plus haut on
   ancre sur une classe existante de l'élément (jamais de classe
   inventée) ; !important n'est posé que sur les deux couleurs
   fixées en style="" inline (logo, bordures), impossibles à
   dépasser autrement.
   ============================================================ */

:root{
  --te-noir-900:#0d0906;
  --te-noir-800:#18110a;
  --te-ambre-700:#b9790f;
  --te-ambre-500:#f5a623;
  --te-ambre-400:#ffc66b;
  --te-texte:#f2e6d2;
  --te-texte-dim:#a89572;
}

/* -------- confort de lecture : on coupe tout mouvement -------- */
@media (prefers-reduced-motion: reduce){
  header.sticky.top-0,
  header.sticky.top-0::after,
  header.sticky nav .font-medium,
  header.sticky nav .font-medium::after,
  header.sticky button[aria-label="Login"],
  header.sticky button[aria-label="Suche"],
  header.sticky button[aria-label="Menü"],
  header.sticky button:has(span.sm\:inline),
  footer a.text-zinc-600,
  footer a.text-zinc-600::after{
    animation:none !important;
    transition:none !important;
  }
}

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

header.sticky.top-0{
  background:linear-gradient(180deg,var(--te-noir-900) 0%,var(--te-noir-800) 100%);
  backdrop-filter:none;
  border-bottom-color:rgba(245,166,35,.35) !important; /* couleur posée en style="" inline sur le header */
  box-shadow:0 8px 22px -14px rgba(245,166,35,.4);
  animation:te-header-in .5s ease-out both;
}
@keyframes te-header-in{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* liseré ambre qui dérive lentement, collé sous le header */
header.sticky.top-0::after{
  content:"";
  position:absolute; left:0; right:0; top:100%; height:3px;
  background:linear-gradient(90deg,transparent,var(--te-ambre-700) 20%,var(--te-ambre-500) 50%,var(--te-ambre-400) 60%,var(--te-ambre-700) 80%,transparent);
  background-size:200% 100%;
  animation:te-liseret 5s linear infinite;
  pointer-events:none;
}
@keyframes te-liseret{
  from{ background-position:0% 0; }
  to{ background-position:200% 0; }
}

/* logo (desktop + mobile) : couleur posée en style="" inline sur le lien -> ciblé par le href */
header.sticky a[href="/"]{
  color:var(--te-ambre-500) !important;
  text-shadow:0 0 12px rgba(245,166,35,.35);
}

/* navigation desktop ("Top 10 Bundesländer" et tout lien de nav similaire) */
header.sticky nav .font-medium{
  color:var(--te-texte-dim);
  position:relative;
  transition:color .25s ease;
}
header.sticky nav .font-medium:hover, header.sticky nav .font-medium:focus-visible{
  color:var(--te-ambre-500);
}
header.sticky nav .font-medium::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--te-ambre-500);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
header.sticky nav .font-medium:hover::after, header.sticky nav .font-medium:focus-visible::after{
  transform:scaleX(1);
}

/* icônes du header (login, recherche, menu, espace membre mobile) */
header.sticky button[aria-label="Login"],
header.sticky button[aria-label="Suche"],
header.sticky button[aria-label="Menü"],
header.sticky button:has(span.sm\:inline){
  color:var(--te-texte);
  transition:color .2s ease, transform .2s ease, filter .2s ease;
}
header.sticky button[aria-label="Login"],
header.sticky button[aria-label="Suche"],
header.sticky button[aria-label="Menü"]{
  min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
header.sticky button:has(span.sm\:inline){ min-height:44px; }
header.sticky button[aria-label="Login"]:hover, header.sticky button[aria-label="Login"]:focus-visible,
header.sticky button[aria-label="Suche"]:hover, header.sticky button[aria-label="Suche"]:focus-visible,
header.sticky button[aria-label="Menü"]:hover, header.sticky button[aria-label="Menü"]:focus-visible,
header.sticky button:has(span.sm\:inline):hover, header.sticky button:has(span.sm\:inline):focus-visible{
  color:var(--te-ambre-500);
  transform:translateY(-1px);
  filter:drop-shadow(0 2px 6px rgba(245,166,35,.4));
}

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

footer.border-t{
  background:linear-gradient(180deg,var(--te-noir-800) 0%,var(--te-noir-900) 100%);
  border-top-color:rgba(245,166,35,.3) !important; /* couleur posée en style="" inline sur le footer */
}

/* titres de colonne (Navigation, Rechtliche Hinweise, Bundesländer) */
footer .text-zinc-900{ color:var(--te-ambre-400); }

/* nom du site en tête de footer : couleur posée en style="" inline */
footer .lg\:col-span-1 h3{ color:var(--te-ambre-500) !important; }

/* texte discret (tagline, copyright, mention d'âge) */
footer .text-zinc-500{ color:var(--te-texte-dim); }

/* liens (navigation, mentions légales, Bundesländer) */
footer a.text-zinc-600{
  color:var(--te-texte-dim);
  position:relative;
  transition:color .25s ease;
}
footer a.text-zinc-600::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--te-ambre-500);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
footer a.text-zinc-600:hover, footer a.text-zinc-600:focus-visible{
  color:var(--te-ambre-500);
}
footer a.text-zinc-600:hover::after, footer a.text-zinc-600:focus-visible::after{
  transform:scaleX(1);
}

/* lien de la mention d'âge (hérite déjà de la couleur du paragraphe) */
footer .underline:hover, footer .underline:focus-visible{
  color:var(--te-ambre-500);
}

/* ============================================================
   THÈME PROFOND — le registre "ambre / noir" du header/footer
   descend dans les pages normales (cartes, filtres, CTA, FAQ,
   retour en haut, pop-ups). Mêmes tokens, même motif (liseré
   ambre qui dérive), rien d'inventé.
   ============================================================ */

:root{
  --te-creme:#fff8ec;
  --te-creme-2:#fef1da;
  --te-ligne:rgba(185,121,15,.32);
}

/* socle neutre du bloc de réassurance (app/design_recettes_v3.css, copié tel quel) —
   l'habillage dans le registre ambre/noir vient plus bas, section "BLOC DE RÉASSURANCE" */
.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; }

/* confort de lecture : mêmes coupures qu'au header, étendues aux nouveaux éléments animés */
@media (prefers-reduced-motion: reduce){
  div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer,
  div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer .relative.mb-3::after,
  section.rounded-2xl.shadow-lg.text-center::before,
  section.rounded-2xl.shadow-lg.text-center button,
  button.fixed.bottom-6.right-6[aria-label="Nach oben"]{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}

/* ===================== CARTES PROFIL ===================== */
/* sélecteur : div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer (unique aux cartes,
   ne touche ni le filtre ni le sélecteur de tri qui portent aussi "flex-shrink-0") */
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer{
  background:linear-gradient(180deg,var(--te-creme) 0%,var(--te-creme-2) 100%);
  border-color:var(--te-ligne) !important;
  border-radius:14px;
  box-shadow:0 2px 10px -6px rgba(13,9,6,.22);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer:hover,
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer:focus-within{
  transform:translateY(-3px);
  border-color:var(--te-ambre-500) !important;
  box-shadow:0 14px 26px -14px rgba(245,166,35,.55);
}
/* liseré ambre (motif du header) qui apparaît sous la photo au survol */
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer .relative.mb-3{
  position:relative;
}
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer .relative.mb-3::after{
  content:"";
  position:absolute; left:6%; right:6%; bottom:-2px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--te-ambre-700) 20%,var(--te-ambre-500) 50%,var(--te-ambre-400) 60%,var(--te-ambre-700) 80%,transparent);
  background-size:200% 100%;
  opacity:0;
  transition:opacity .25s ease;
}
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer:hover .relative.mb-3::after,
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer:focus-within .relative.mb-3::after{
  opacity:1;
  animation:te-liseret 5s linear infinite;
}
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer img.aspect-square{
  border-radius:10px;
}
/* badge d'âge : pilule ambre (reprend la pilule du bandeau d'inscription et l'icône du header) */
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer .absolute.top-2.right-2{
  background:linear-gradient(135deg,var(--te-ambre-500),var(--te-ambre-700)) !important;
  color:var(--te-noir-900) !important;
  font-weight:700;
  border-radius:999px;
  box-shadow:0 2px 6px -2px rgba(13,9,6,.4);
}
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer h3.font-semibold{
  color:var(--te-noir-900);
  transition:color .2s ease;
}
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer:hover h3.font-semibold,
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer:focus-within h3.font-semibold{
  color:var(--te-ambre-700);
}
div.flex-shrink-0.w-40.bg-zinc-50.rounded-lg.cursor-pointer p.text-zinc-500{
  color:var(--te-ambre-700);
  opacity:.85;
}

/* ===================== TRI / RECHERCHE (page ville) ===================== */
.form-group.flex-shrink-0 select{
  border-color:var(--te-ligne) !important;
  background:var(--te-creme);
  color:var(--te-noir-900);
  --tw-ring-color:var(--te-ambre-500) !important;
}
div.relative.flex-shrink-0 > button.rounded-lg.border.border-zinc-300{
  border-color:var(--te-ligne) !important;
  color:var(--te-ambre-700);
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.form-group.flex-shrink-0 select:hover,
.form-group.flex-shrink-0 select:focus,
div.relative.flex-shrink-0 > button.rounded-lg.border.border-zinc-300:hover,
div.relative.flex-shrink-0 > button.rounded-lg.border.border-zinc-300:focus-visible{
  border-color:var(--te-ambre-500) !important;
  background:var(--te-creme);
  color:var(--te-ambre-700);
}

/* ===================== "Nach Bundesland" (recherche accueil/région) ===================== */
section#departements{
  position:relative;
  border:1px solid var(--te-ligne);
}
section#departements::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px; border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--te-ambre-700),var(--te-ambre-500),var(--te-ambre-400));
}
section#departements h2{
  color:var(--te-noir-900);
}
section#departements input[type="text"]{
  border-color:var(--te-ligne) !important;
  --tw-ring-color:var(--te-ambre-500) !important;
}
section#departements input[type="text"]:focus{
  border-color:var(--te-ambre-500) !important;
}

/* ===================== CTA MILIEU DE PAGE ===================== */
/* même fond noir/ambre que le header, avec le liseré qui dérive en tête de bloc */
section.rounded-2xl.shadow-lg.text-center{
  background:linear-gradient(180deg,var(--te-noir-800) 0%,var(--te-noir-900) 100%);
  border:1px solid rgba(245,166,35,.3);
  position:relative;
  overflow:hidden;
}
section.rounded-2xl.shadow-lg.text-center::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--te-ambre-700) 20%,var(--te-ambre-500) 50%,var(--te-ambre-400) 60%,var(--te-ambre-700) 80%,transparent);
  background-size:200% 100%;
  animation:te-liseret 5s linear infinite;
}
section.rounded-2xl.shadow-lg.text-center h2{
  color:var(--te-texte);
}
/* le bouton garde sa couleur (var(--secondary-color), déjà ambrée) : on ajoute juste un halo au survol */
section.rounded-2xl.shadow-lg.text-center button{
  box-shadow:0 10px 24px -10px rgba(245,166,35,.55);
  transition:transform .2s ease, box-shadow .2s ease;
}
section.rounded-2xl.shadow-lg.text-center button:hover,
section.rounded-2xl.shadow-lg.text-center button:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(245,166,35,.7);
}

/* ===================== FAQ ===================== */
main.space-y-12 section:has(> div.space-y-0){
  position:relative;
  border:1px solid var(--te-ligne);
}
main.space-y-12 section:has(> div.space-y-0)::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px; border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--te-ambre-700),var(--te-ambre-500),var(--te-ambre-400));
}
main.space-y-12 section:has(> div.space-y-0) h2{
  color:var(--te-noir-900);
}
main.space-y-12 div.space-y-0 > div.border-b{
  border-color:var(--te-ligne);
  border-left:3px solid transparent;
  transition:border-color .2s ease, background-color .2s ease;
}
main.space-y-12 div.space-y-0 > div.border-b:hover{
  border-left-color:var(--te-ambre-500);
  background:rgba(245,166,35,.05);
}
main.space-y-12 div.space-y-0 > div.border-b > button:hover{
  background:transparent;
}
main.space-y-12 div.space-y-0 h3{
  color:var(--te-noir-900);
}
main.space-y-12 div.space-y-0 svg{
  color:var(--te-ambre-700);
}

/* ===================== RETOUR EN HAUT ===================== */
/* couleurs posées en style="" inline (background-color:#000000;color:#ffffff) sur le bouton */
button.fixed.bottom-6.right-6[aria-label="Nach oben"]{
  background:linear-gradient(135deg,var(--te-ambre-500),var(--te-ambre-700)) !important;
  color:var(--te-noir-900) !important;
  box-shadow:0 10px 22px -10px rgba(245,166,35,.6);
  border:1px solid rgba(13,9,6,.25);
}
button.fixed.bottom-6.right-6[aria-label="Nach oben"]:hover,
button.fixed.bottom-6.right-6[aria-label="Nach oben"]:focus-visible{
  filter:brightness(1.08);
}

/* ===================== AGE GATE / POP-UP D'INSCRIPTION ===================== */
/* couleurs, bordures, rayons seulement — jamais display/position/transform/overflow ici */
div.fixed.inset-0{
  background-color:rgba(13,9,6,.72);
}
div.fixed.inset-0 [class*="rounded-2xl"],
div.fixed.inset-0 [class*="rounded-xl"]{
  border:1px solid rgba(245,166,35,.35);
}
.prelinker-embed input, .prelinker-embed select,
.ptprelinker-embed input, .ptprelinker-embed select{
  border-color:var(--te-ligne) !important;
}
.prelinker-embed input:focus, .prelinker-embed select:focus,
.ptprelinker-embed input:focus, .ptprelinker-embed select:focus{
  border-color:var(--te-ambre-500) !important;
  outline-color:var(--te-ambre-500);
}

/* ===================== BLOC DE RÉASSURANCE (exports/design/treffen-erotik.de.html) ===================== */
/* socle .ds-* (grille, icônes 28 px) : voir app/design_recettes_v3.css — copié tel quel plus haut
   dans la feuille (design_site.py l'ajoute sinon). Ici : habillage dans le registre ambre/noir. */
.ds-bloc{
  background:linear-gradient(180deg,var(--te-creme) 0%,var(--te-creme-2) 100%);
  border:1px solid var(--te-ligne);
  position:relative;
  overflow:hidden;
}
.ds-bloc::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--te-ambre-700) 20%,var(--te-ambre-500) 50%,var(--te-ambre-400) 60%,var(--te-ambre-700) 80%,transparent);
  background-size:200% 100%;
  animation:te-liseret 6s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .ds-bloc::before{ animation:none !important; }
}
.ds-titre{
  color:var(--te-noir-900);
  font-weight:700;
}
.ds-sous{
  color:var(--te-ambre-700);
}
.ds-ico{
  color:var(--te-ambre-700);
}
.ds-item{
  border-left:2px solid var(--te-ligne);
  padding-left:12px;
  transition:border-color .2s ease;
}
.ds-item:hover{
  border-left-color:var(--te-ambre-500);
}
.ds-item-t{
  color:var(--te-noir-900);
}
.ds-item-p{
  color:#5a4a34;
}

/* ============================================================
   MENU MOBILE (Next, socle "menu mobile Next" ajouté par
   design_site.py à la volée si absent) — même registre ambre/noir
   que le header et le footer : tiroir sombre, liens en pilules
   ambre, CTA dégradé ambre → noir. Couleurs/bordures/ombres
   seulement ; le mécanisme d'ouverture (règles #ds-mcb:checked,
   position fixed du burger) n'est jamais touché ici.
   ============================================================ */

.ds-mburger{
  background:linear-gradient(135deg,var(--te-noir-800),var(--te-noir-900)) !important;
  border:1px solid rgba(245,166,35,.5) !important;
  color:var(--te-ambre-500) !important;
  box-shadow:0 2px 10px -2px rgba(0,0,0,.5) !important;
}
.ds-moverlay{ background:rgba(13,9,6,.72) !important; }
.ds-mdrawer{
  background:linear-gradient(180deg,var(--te-noir-900) 0%,var(--te-noir-800) 100%) !important;
  color:var(--te-texte) !important;
  border-right:1px solid rgba(245,166,35,.3) !important;
  box-shadow:8px 0 30px -10px rgba(13,9,6,.7) !important;
}
.ds-mhead{
  border-bottom:1px solid rgba(245,166,35,.28) !important;
  background:linear-gradient(180deg,var(--te-noir-900) 0%,var(--te-noir-800) 100%) !important;
}
.ds-mbrand{
  color:var(--te-ambre-500) !important;
  text-shadow:0 0 10px rgba(245,166,35,.35);
}
.ds-mclose{
  background:rgba(245,166,35,.12) !important;
  border:1px solid rgba(245,166,35,.4);
  color:var(--te-texte) !important;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ds-mclose:hover, .ds-mclose:focus-visible{
  background:var(--te-ambre-500) !important;
  border-color:var(--te-ambre-500);
  color:var(--te-noir-900) !important;
}
.ds-msec-t{ color:var(--te-texte-dim) !important; }
.ds-msec + .ds-msec{ border-top:1px solid rgba(245,166,35,.16); margin-top:2px; }
.ds-mlink{
  min-height:40px;
  display:inline-flex !important;
  align-items:center;
  background:rgba(245,166,35,.08) !important;
  border:1px solid rgba(245,166,35,.32) !important;
  color:var(--te-texte) !important;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.ds-mlink:hover, .ds-mlink:focus-visible{
  background:linear-gradient(135deg,var(--te-ambre-500),var(--te-ambre-700)) !important;
  border-color:var(--te-ambre-500) !important;
  color:var(--te-noir-900) !important;
  transform:translateY(-1px);
}
.ds-mnav .ds-mlink{
  border-color:rgba(245,166,35,.5) !important;
  background:rgba(245,166,35,.14) !important;
}
.ds-mfoot{ border-top:1px solid rgba(245,166,35,.22); padding-top:16px !important; }
.ds-mcta{
  background:linear-gradient(135deg,var(--te-ambre-500),var(--te-ambre-700)) !important;
  color:var(--te-noir-900) !important;
  box-shadow:0 10px 22px -10px rgba(245,166,35,.6) !important;
  transition:transform .2s ease, filter .2s ease;
}
.ds-mcta:hover, .ds-mcta:focus-visible{
  filter:brightness(1.08);
  transform:translateY(-1px);
}
.ds-mlink:focus-visible, .ds-mcta:focus-visible, .ds-mclose:focus-visible{
  outline:2px solid var(--te-ambre-500);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .ds-mlink, .ds-mcta, .ds-mclose{ transition:none !important; }
  .ds-mlink:hover, .ds-mcta:hover{ 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:#9d660d;
  --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; }

/* ---------- 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:#9d660d;
  --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__ */