/* __DESIGN_SITE__ */
/* ============================================================
   sexkontakte-brandenburg.de — habillage unique (gabarit Next)
   Direction imposée : "pancarte" du Brandebourg — rouge #c62828
   → #b71c1c, blanc, gris. Bordures épaisses, ombres nettes NON
   floutées (box-shadow décalé, sans blur), registre panneau
   officiel/signalétique.
   Disposition : header desktop encadré d'un liseré rouge 6px sur
   tout son pourtour, logo à gauche, nav centrée, actions à
   droite. Mobile : même cadre rouge, bandeau intérieur blanc
   opaque (pas de flou). Footer : fond gris clair, 3 colonnes
   (bandeau marque en pleine largeur au-dessus), titres en
   capitales, liens rouges.
   Ne touche qu'au <header> et au <footer> : grille de profils,
   fiches, age gate, pop-up d'inscription intouchés.
   ============================================================ */

:root {
  --bb-rouge: #c62828;
  --bb-rouge-fonce: #b71c1c;
  --bb-gris-clair: #f0f0f0;
  --bb-gris: #6b6b6b;
  --bb-gris-fonce: #3a3a3a;
}

/* ------------------------------------------------------------
   HEADER — cadre "pancarte" rouge sur tout le pourtour, plat,
   blanc opaque (on retire le flou d'origine). Identique en
   desktop et en mobile : c'est le même <header> qui les contient.
   ------------------------------------------------------------ */
header.sticky {
  top: 10px !important;
  width: auto !important;
  margin: 10px 10px 18px !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 6px solid var(--bb-rouge) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--bb-rouge-fonce);
  animation: bb-entree .5s ease both;
}

@keyframes bb-entree {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ligne desktop : logo | nav | actions — nav vraiment centrée */
header.sticky .flex.h-16 { gap: .5rem; }
header.sticky nav { flex: 1 1 auto; justify-content: center; }

/* Le logo devient une plaque : cadre rouge, fond blanc, ombre
   nette. Sert pour la version desktop (à gauche) ET la version
   mobile centrée (l'ancre garde son centrage via `translate`,
   propriété Tailwind v4 distincte de `transform` : on ne la
   touche pas). */
header.sticky a[href="/"] {
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border: 3px solid var(--bb-rouge);
  background: #fff;
  box-shadow: 4px 4px 0 var(--bb-rouge-fonce);
  color: var(--bb-rouge-fonce) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: transform .15s ease;
}
header.sticky a[href="/"]:hover { transform: translate(-2px, -2px); }

/* Bouton de navigation "Top 10 Bundesländer" : pastille cadrée */
header.sticky nav button {
  border: 2px solid var(--bb-rouge);
  background: #fff;
  color: var(--bb-gris-fonce);
  padding: .4rem .9rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--bb-rouge);
  transition: transform .15s ease;
}
header.sticky nav button:hover { color: var(--bb-rouge); transform: translate(-2px, -2px); }

/* Actions desktop (login, recherche) : icônes rouges, cible tactile nette */
header.sticky button[aria-label="Login"],
header.sticky button[aria-label="Suche"] {
  color: var(--bb-rouge) !important;
  padding: .55rem !important;
}
header.sticky button[aria-label="Login"]:hover,
header.sticky button[aria-label="Suche"]:hover { transform: translate(-1px, -1px); }

/* Barre mobile : bandeau blanc opaque déjà garanti par le fond du
   header ci-dessus. Hamburger + bouton "Mitgliederbereich" en rouge,
   cible tactile ≥ 44 px. */
header.sticky div.md\:hidden > button {
  color: var(--bb-rouge) !important;
  padding: .6rem !important;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  header.sticky,
  header.sticky a[href="/"],
  header.sticky nav button,
  header.sticky button[aria-label="Login"],
  header.sticky button[aria-label="Suche"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   FOOTER — plaque "pancarte" : liseré rouge en tête, fond gris
   clair, titres en capitales, liens rouges. Disposition changée :
   la colonne marque passe en bandeau plein-large au-dessus, les
   trois autres colonnes (Navigation / Mentions légales /
   Bundesländer) se répartissent ensuite sur 3 colonnes égales.
   ------------------------------------------------------------ */
footer {
  background: var(--bb-gris-clair) !important;
  border-top: 6px solid var(--bb-rouge) !important;
}

footer .grid {
  gap: 2rem !important;
}
@media (min-width: 768px) {
  footer .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  footer .grid > div:first-child {
    grid-column: 1 / -1 !important;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 3px solid var(--bb-rouge);
    padding-bottom: 1rem;
  }
}
@media (max-width: 767px) {
  footer .grid { grid-template-columns: 1fr !important; }
}

footer h3 {
  color: var(--bb-rouge) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em;
}

footer a {
  color: var(--bb-rouge-fonce) !important;
  text-decoration: none;
}
footer a:hover { text-decoration: underline; color: var(--bb-rouge) !important; }

/* Petite puce carrée rouge devant chaque lien de colonne — un
   repère de type panneau, pas du texte ajouté. */
footer ul li { position: relative; padding-left: 14px; }
footer ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .45em;
  width: 8px; height: 8px;
  background: var(--bb-rouge);
  transition: transform .15s ease;
}
footer ul li:hover::before { transform: scale(1.5); }

/* Barre du bas (avertissement + sitemap) : séparateur rouge fin */
footer .border-t.border-zinc-200 {
  border-top-color: var(--bb-rouge) !important;
  border-top-width: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  footer ul li::before { transition: none !important; }
}

/* planche du 17/09 : la plaque du logo tronquait « SEXKONTAKTE IN » sur mobile (padding + capitales
   espacées) → plaque plus compacte et un peu plus large que le garde-fou de l'outil. */
@media (max-width: 767px) {
  header.sticky div.md\:hidden > a.font-bold[href="/"] {
    max-width: 68% !important; font-size: .72rem !important; letter-spacing: 0 !important; display: inline-block !important; line-height: 1.6 !important;
    padding: .25rem .5rem !important; border-width: 2px !important; box-shadow: 3px 3px 0 var(--bb-rouge-fonce) !important;
  }
}

/* ===== design v3 (18/09) : mise en page « villes-bas » =====
   Next · villes-bas : « Nach Bundesland » sous les profils et le CTA. Anatomie réelle de l'accueil
   (relue le 18/09 sur sexkontakte-brandenburg.de) : div.container > header + main.space-y-12 >
   section#departements · section (profils) · section.text-center (CTA). On ne touche que le <main>
   qui porte #departements (accueil) — les pages ville n'ont pas cette section, l'ordre y reste natif. */
body.design-v-villes-bas main.space-y-12:where(:has(> section#departements)) { display: flex; flex-direction: column; }
body.design-v-villes-bas main.space-y-12:where(:has(> section#departements)) > * { order: 6; }
body.design-v-villes-bas main.space-y-12 > section.scroll-mt-20:not(#departements) { order: 1; }
body.design-v-villes-bas main.space-y-12 > .ds-bloc { order: 2; }
body.design-v-villes-bas main.space-y-12 > section.text-center { order: 3; }
body.design-v-villes-bas main.space-y-12 > section#departements { order: 7; margin-top: 2rem; }

/* ------------------------------------------------------------
   THÈME PROFOND — la pancarte rouge du Brandebourg descend dans
   toutes les pages normales (accueil + ville) : mêmes bordures
   épaisses plates, mêmes ombres nettes décalées (jamais de flou),
   même rouge #E35D8F d'origine remplacé partout par le rouge
   pancarte. On ne touche que couleurs / bordures / rayons / ombres.
   ------------------------------------------------------------ */

/* Champs de recherche et de tri : le rond rose d'origine (--tw-ring-color)
   devient le rouge pancarte, cadre carré au lieu du rayon Tailwind. */
#departements input[style*="--tw-ring-color"],
div.rounded-lg.shadow-sm select[style*="--tw-ring-color"] {
  --tw-ring-color: var(--bb-rouge) !important;
  border-radius: 0 !important;
  border-color: var(--bb-gris) !important;
}
#departements input[style*="--tw-ring-color"]:focus,
div.rounded-lg.shadow-sm select[style*="--tw-ring-color"]:focus {
  border-color: var(--bb-rouge) !important;
}

/* Barre de tri au-dessus de la grille : petite plaque plate, filet rouge en tête. */
div.rounded-lg.shadow-sm.border.border-zinc-200 {
  border-radius: 0 !important;
  border-color: var(--bb-gris) !important;
  border-top: 3px solid var(--bb-rouge) !important;
  box-shadow: none !important;
}

/* Cartes profil : chaque fiche devient une petite pancarte — cadre
   carré, ombre nette décalée, la plaque "saute" légèrement au survol. */
div.bg-zinc-50.rounded-lg.border.border-zinc-200.cursor-pointer {
  background: #fff !important;
  border: 2px solid var(--bb-gris-clair) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--bb-gris-clair);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
div.bg-zinc-50.rounded-lg.border.border-zinc-200.cursor-pointer:hover {
  border-color: var(--bb-rouge) !important;
  box-shadow: 5px 5px 0 var(--bb-rouge);
  transform: translate(-2px, -2px);
}
div.bg-zinc-50.rounded-lg.border.border-zinc-200.cursor-pointer img {
  border-radius: 0 !important;
}
/* pastille d'âge : plaque rouge carrée au lieu du gris translucide */
div.bg-zinc-50.rounded-lg.border.border-zinc-200.cursor-pointer .absolute.top-2.right-2 {
  background: var(--bb-rouge) !important;
  border-radius: 0 !important;
  font-weight: 700;
}
div.bg-zinc-50.rounded-lg.border.border-zinc-200.cursor-pointer h3.font-semibold {
  color: var(--bb-gris-fonce);
}
div.bg-zinc-50.rounded-lg.border.border-zinc-200.cursor-pointer p.text-zinc-500 {
  color: var(--bb-rouge-fonce) !important;
  font-weight: 600;
}

/* Bandeau CTA de milieu de page ("Worauf wartest du noch?") : plaque
   grise cadrée de rouge, bouton contrasté cadré blanc sur rouge. */
main.space-y-12 > section.text-center {
  background: var(--bb-gris-clair) !important;
  border: 3px solid var(--bb-rouge) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--bb-rouge-fonce);
}
main.space-y-12 > section.text-center h2 {
  color: var(--bb-gris-fonce);
}
main.space-y-12 > section.text-center button[style*="secondary-color"] {
  background-color: var(--bb-rouge) !important;
  border: 2px solid var(--bb-rouge-fonce) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--bb-rouge-fonce);
  transition: transform .15s ease;
}
main.space-y-12 > section.text-center button[style*="secondary-color"]:hover {
  transform: translate(-2px, -2px);
}

/* Texte SEO ("prose") : les titres reçoivent le même filet rouge que
   les colonnes du footer, pour rester dans le même registre signalétique. */
section:has(.prose) h2 {
  border-left: 4px solid var(--bb-rouge);
  padding-left: 10px;
  color: var(--bb-gris-fonce) !important;
}

/* FAQ ("Häufige Fragen") : accordéon en plaques grises, chevron rouge. */
section:has(> div.space-y-0) {
  border: 3px solid var(--bb-gris-clair) !important;
  border-top: 6px solid var(--bb-rouge) !important;
  border-radius: 0 !important;
}
section:has(> div.space-y-0) h2 {
  color: var(--bb-gris-fonce);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.15rem !important;
}
section:has(> div.space-y-0) > div.space-y-0 > div {
  border-bottom-color: var(--bb-gris-clair) !important;
}
section:has(> div.space-y-0) button:hover {
  background: var(--bb-gris-clair) !important;
}
section:has(> div.space-y-0) button h3 {
  color: var(--bb-gris-fonce);
}
section:has(> div.space-y-0) button svg {
  color: var(--bb-rouge) !important;
}

/* Bandeau de réassurance natif (SSL / données / modération, 3 icônes) :
   les ronds gris deviennent des plaques carrées rouges — même registre
   que les puces carrées du footer. */
section.border-t.border-b.py-12 {
  border-top-color: var(--bb-gris-clair) !important;
  border-bottom-color: var(--bb-gris-clair) !important;
}
section.border-t.border-b.py-12 .rounded-full {
  background: #fff !important;
  border: 2px solid var(--bb-rouge) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--bb-gris-clair);
}
section.border-t.border-b.py-12 svg {
  color: var(--bb-rouge) !important;
}
section.border-t.border-b.py-12 p {
  color: var(--bb-gris-fonce);
}

/* "Top 20 Städte in Brandenburg" : le filet rose d'origine devient rouge,
   fond de survol teinté au lieu du gris neutre. */
nav[aria-label] a[style*="border-left"] {
  border-left-color: var(--bb-rouge) !important;
  border-left-width: 3px !important;
}
nav[aria-label] a[style*="border-left"]:hover {
  background: var(--bb-gris-clair) !important;
  color: var(--bb-rouge-fonce) !important;
}

/* Bande de défilement horizontal des régions (pilules). */
section.bg-zinc-100 a {
  border: 2px solid var(--bb-rouge) !important;
  border-radius: 0 !important;
  --hover-bg: var(--bb-rouge) !important;
  --hover-text: #fff !important;
  color: var(--bb-rouge-fonce) !important;
  font-weight: 700;
}

/* Bouton "retour en haut" : plaque carrée rouge cadrée, comme le
   reste de l'identité (les couleurs sont inline, donc !important). */
button.fixed.bottom-6.right-6 {
  background-color: var(--bb-rouge) !important;
  color: #fff !important;
  border: 2px solid var(--bb-rouge-fonce) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--bb-rouge-fonce) !important;
}
button.fixed.bottom-6.right-6:hover {
  transform: translate(-2px, -2px);
}

/* Pop-up d'inscription (prelinker) et age gate : uniquement couleurs,
   bordures, rayons — jamais display/position/transform/overflow. */
.prelinker-embed {
  border: 3px solid var(--bb-rouge) !important;
  border-radius: 0 !important;
}
div.fixed.inset-0 [class*="rounded"] {
  border-radius: 0 !important;
}
div.fixed.inset-0 button[style*="secondary-color"] {
  background-color: var(--bb-rouge) !important;
  border: 2px solid var(--bb-rouge-fonce) !important;
  border-radius: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  div.bg-zinc-50.rounded-lg.border.border-zinc-200.cursor-pointer,
  main.space-y-12 > section.text-center button[style*="secondary-color"],
  button.fixed.bottom-6.right-6 {
    transition: none !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 */
}
/* __END_DESIGN_SITE__ */