/* __DESIGN_SITE__ */
/* ============================================================
   sextreffen-hessen.de - habillage unique (gabarit Next)
   Direction : gris perle + terracotta, registre "atelier"
   (ombres longues, matiere). Header desktop bas et large, logo
   a gauche, nav/icones espacees a droite, bordure basse epaisse
   terracotta. Mobile : logo centre (deja en place), hamburger a
   gauche, profil a droite, barre gris perle. Pied de page : les
   4 colonnes du gabarit regroupees en 2 colonnes larges, fond
   terracotta sombre.
   ============================================================ */

:root {
  --terre-texte: #8F3D1F; /* texte/liens sur fond clair (contraste ~6:1) */
  --terre-bord:  #B5502E; /* bordures et fonds decoratifs */
  --terre-vive:  #C1633D; /* survol */
  --terre-pale:  #E8A87C; /* titres sur fond sombre */
  --perle-haut:  #F5F3EF;
  --perle-bas:   #E1DCD2;
  --fonce-1:     #4A2013;
  --fonce-2:     #35150C;
  --creme:       #F3EDE6;
  --creme-att:   #D9C7B8;
}

/* ---------------------------------------------------------- */
/* EN-TETE - commun desktop + mobile, meme bandeau gris perle  */
/* ---------------------------------------------------------- */

header.sticky {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(74,32,19,.05), transparent 46%),
    linear-gradient(180deg, var(--perle-haut) 0%, var(--perle-bas) 100%) !important;
  border-bottom-width: 6px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--terre-bord) !important; /* la couleur inline du gabarit est ecrasee */
  box-shadow: 0 18px 32px -22px rgba(74,32,19,.35);
  animation: atelier-header-in .5s ease-out both;
}
@keyframes atelier-header-in {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* header "bas et large" : on lui laisse plus d'air */
header.sticky .flex.h-16 {
  min-height: 96px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* logo - desktop a gauche, mobile centre (deja positionne par le gabarit) */
header.sticky a[href="/"] {
  color: var(--terre-texte) !important; /* ecrase le style inline du gabarit */
  letter-spacing: .01em;
  text-shadow:
    1px 1px 0 rgba(181,80,46,.30),
    2px 2px 0 rgba(181,80,46,.22),
    3px 3px 0 rgba(181,80,46,.14),
    4px 4px 6px rgba(58,55,51,.18); /* ombre longue, matiere atelier */
}

/* nav desktop - espacee, en petites capitales, soulignement au survol */
header.sticky nav.hidden.md\:flex {
  gap: 2.4rem;
}
header.sticky nav.hidden.md\:flex button,
header.sticky nav.hidden.md\:flex a {
  color: var(--terre-texte) !important;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .09em;
  position: relative;
}
header.sticky nav.hidden.md\:flex button::after,
header.sticky nav.hidden.md\:flex a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--terre-vive);
  transition: right .25s ease;
}
header.sticky nav.hidden.md\:flex button:hover::after,
header.sticky nav.hidden.md\:flex a:hover::after,
header.sticky nav.hidden.md\:flex button:focus-visible::after,
header.sticky nav.hidden.md\:flex a:focus-visible::after {
  right: 0;
}
header.sticky nav.hidden.md\:flex button:hover,
header.sticky nav.hidden.md\:flex a:hover {
  color: var(--terre-vive) !important;
}

/* icones desktop (login, recherche) + hamburger mobile : pastilles "atelier" */
header.sticky button[aria-label="Login"],
header.sticky button[aria-label="Suche"],
header.sticky button[aria-label="Menü"] {
  color: var(--terre-texte) !important;
  background: var(--perle-haut);
  border: 1.5px solid var(--terre-bord);
  border-radius: 3px;
  min-width: 44px;
  min-height: 44px;
  box-shadow: 3px 3px 0 rgba(181,80,46,.18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
header.sticky button[aria-label="Login"]:hover,
header.sticky button[aria-label="Suche"]:hover,
header.sticky button[aria-label="Menü"]:hover,
header.sticky button[aria-label="Login"]:focus-visible,
header.sticky button[aria-label="Suche"]:focus-visible,
header.sticky button[aria-label="Menü"]:focus-visible {
  transform: translate(-1px, -2px);
  box-shadow: 5px 5px 0 rgba(181,80,46,.28);
  background: var(--perle-bas);
  color: var(--terre-vive) !important;
}

/* icones desktop espacees a droite */
header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0 {
  gap: 1.2rem;
}

/* barre mobile : icone profil (dernier bouton) mise en avant a droite */
header.sticky .md\:hidden > button:last-child {
  color: var(--terre-texte) !important;
  background: var(--perle-haut);
  border: 1.5px solid var(--terre-bord);
  border-radius: 3px;
  min-width: 44px;
  min-height: 44px;
  box-shadow: 2px 2px 0 rgba(181,80,46,.18);
}
header.sticky .md\:hidden > button:first-child {
  color: var(--terre-texte) !important;
  min-width: 44px;
  min-height: 44px;
}

/* bulle "Mach mit!" sous l'icone profil : jamais hors ecran */
header.sticky .absolute.top-full {
  background: var(--perle-haut) !important;
  color: var(--terre-texte) !important;
  border: 1px solid var(--terre-bord);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(181,80,46,.16);
}
@media (max-width: 767px) {
  /* l'icone profil est collee au bord droit : la bulle s'aligne sur ce bord */
  header.sticky .absolute.top-full {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  header.sticky {
    background:
      radial-gradient(circle at 12% 18%, rgba(255,255,255,.07), transparent 42%),
      linear-gradient(180deg, #2A2622 0%, #1F1C19 100%) !important;
  }
  header.sticky a[href="/"],
  header.sticky nav.hidden.md\:flex button,
  header.sticky nav.hidden.md\:flex a,
  header.sticky button[aria-label="Login"],
  header.sticky button[aria-label="Suche"],
  header.sticky button[aria-label="Menü"],
  header.sticky .md\:hidden > button:first-child,
  header.sticky .md\:hidden > button:last-child {
    color: var(--terre-pale) !important;
  }
  header.sticky button[aria-label="Login"],
  header.sticky button[aria-label="Suche"],
  header.sticky button[aria-label="Menü"],
  header.sticky .md\:hidden > button:last-child {
    background: #2A2622;
  }
}

/* ---------------------------------------------------------- */
/* PIED DE PAGE - 4 colonnes regroupees en 2, fond terracotta   */
/* ---------------------------------------------------------- */

footer.border-t {
  background:
    radial-gradient(circle at 85% 12%, rgba(232,168,124,.09), transparent 45%),
    linear-gradient(160deg, var(--fonce-1) 0%, var(--fonce-2) 100%) !important;
  background-size: 220% 220%;
  border-top: none !important;
  box-shadow: 0 -18px 32px -22px rgba(0,0,0,.4);
  animation: atelier-footer-drift 24s ease-in-out infinite alternate;
}
@keyframes atelier-footer-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 55%; }
}

/* 4 colonnes du gabarit -> 2 colonnes larges */
footer .grid.grid-cols-1 {
  grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
  footer .grid.grid-cols-1 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3rem !important;
  }
}

footer h3 {
  color: var(--terre-pale) !important; /* ecrase aussi le style inline du bloc marque */
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
}
footer p,
footer li,
footer .text-zinc-500,
footer .text-zinc-600 {
  color: var(--creme) !important;
}
footer a {
  color: var(--creme-att) !important;
  text-decoration: none;
  position: relative;
}
footer a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--terre-pale);
  transition: right .2s ease;
}
footer a:hover,
footer a:focus-visible {
  color: var(--terre-pale) !important;
}
footer a:hover::after,
footer a:focus-visible::after {
  right: 0;
}
footer .border-t.border-zinc-200 {
  border-top: 1px solid rgba(232,168,124,.25) !important;
}

@media (prefers-reduced-motion: reduce) {
  header.sticky,
  footer.border-t {
    animation: none !important;
  }
  header.sticky button[aria-label="Login"],
  header.sticky button[aria-label="Suche"],
  header.sticky button[aria-label="Menü"],
  header.sticky nav.hidden.md\:flex button::after,
  header.sticky nav.hidden.md\:flex a::after,
  footer a::after {
    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;
  }
}
/* __END_DESIGN_SITE__ */