/* __DESIGN_SITE__ */
/* Next : la page a DEUX <header> (barre sticky + hero « text-center mb-16 ») : tout est scopé sur
   header.sticky (correctif du 17/09 : le hero sortait en bordeaux sur bordeaux). */
/* =========================================================================
   swingerclub-bayern.de — habillage unique (header + barre mobile + footer)
   Direction : "opéra" — bordeaux profond, or vieilli, noir. Typo serif système
   (Georgia, Times New Roman). Nav desktop centrée (logo gauche / icônes
   droite). Mobile : bandeau bordeaux, logo serif, hamburger or. Footer noir,
   titres serif or, grille 1 colonne large (marque) + 3 étroites.
   Ne touche que <header> et <footer> — rien d'autre sur le site.
   ========================================================================= */

:root{
  --op-noir:#170609;         /* fond profond du header.sticky (côté "salle") */
  --op-bordeaux:#3d0b17;     /* velours bordeaux, dégradé du header.sticky */
  --op-bordeaux-mobile:#5c0f22; /* bandeau bordeaux du mobile */
  --op-or:#c9a227;           /* or vieilli — liens, filets, titres */
  --op-or-vif:#e8c766;       /* or clair — survol, texte sur bordeaux */
  --op-parchemin:#cdbd93;    /* liens de pied de page, lisible sur noir */
  --op-noir-pied:#0b0708;    /* fond du footer */
}

/* ---------------------------------------------------------------------
   HEADER — desktop : velours noir/bordeaux, filet or, nav CENTRÉE
   --------------------------------------------------------------------- */
header.sticky{
  background-color:var(--op-noir);
  background-image:
    repeating-linear-gradient(135deg, rgba(201,162,39,.06) 0 2px, transparent 2px 28px),
    linear-gradient(160deg, var(--op-noir) 0%, var(--op-bordeaux) 55%, var(--op-noir) 100%);
  background-size:260% 260%, 100% 100%;
  background-position:0% 0%, 0 0;
  border-bottom-width:3px !important;
  border-bottom-style:solid !important;
  border-bottom-color:var(--op-or) !important; /* remplace le filet rose inline */
  box-shadow:0 1px 12px rgba(201,162,39,.18);
  animation:sbRideau 24s ease-in-out infinite, sbLever .6s ease-out both;
}
@keyframes sbRideau{ 0%,100%{background-position:0% 0%, 0 0;} 50%{background-position:100% 100%, 0 0;} }
@keyframes sbLever{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* Logo (desktop ET mobile, même lien href="/") — serif, or */
header.sticky a[href="/"]{
  font-family:Georgia, 'Times New Roman', serif !important;
  color:var(--op-or) !important;
  letter-spacing:.03em;
  text-shadow:0 0 14px rgba(201,162,39,.25);
}
header.sticky a[href="/"]:hover{ color:var(--op-or-vif) !important; }

/* Grille : logo | nav centrée | icônes — remplace le simple "justify-between"
   pour que la nav soit vraiment au milieu, pas seulement "entre deux blocs" */
@media (min-width:768px){
  header.sticky .container > div.flex{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    column-gap:2rem;
  }
  header.sticky .container > div.flex > nav{ justify-self:center; }
}

/* Nav desktop : bouton serif or + soulignement qui grandit au survol */
header.sticky nav button{
  font-family:Georgia, 'Times New Roman', serif;
  letter-spacing:.05em;
  color:var(--op-or) !important;
  position:relative;
}
header.sticky nav button::after{
  content:"";
  position:absolute; left:2px; right:2px; bottom:-6px; height:2px;
  background:var(--op-or-vif);
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s ease;
}
header.sticky nav button:hover{ color:var(--op-or-vif) !important; }
header.sticky nav button:hover::after{ transform:scaleX(1); }
header.sticky nav svg{ stroke:currentColor; }

/* Icônes desktop (connexion, recherche) : or, plus clair au survol.
   Le conteneur (position/marges) n'est pas touché : l'info-bulle "Mach mit!"
   qui s'affiche au survol de l'icône de connexion reste ancrée là où elle
   était, donc toujours dans l'écran. */
header.sticky .container > div.flex > div:last-child button{ color:var(--op-or) !important; }
header.sticky .container > div.flex > div:last-child button:hover{ color:var(--op-or-vif) !important; }

/* ---------------------------------------------------------------------
   BARRE MOBILE — bandeau bordeaux, logo serif, hamburger + actions en or
   --------------------------------------------------------------------- */
@media (max-width:767px){
  header.sticky{
    background-color:var(--op-bordeaux-mobile) !important;
    background-image:linear-gradient(180deg, var(--op-bordeaux-mobile), #470c1b) !important;
    border-bottom-color:var(--op-or) !important;
    animation:sbLever .5s ease-out both; /* pas de rideau qui dérive sur un petit écran */
  }
  header.sticky a[href="/"]{ color:var(--op-or-vif) !important; text-shadow:none; }
  header.sticky .container > div.flex > div:nth-child(2) button{
    color:var(--op-or) !important;
  }
  header.sticky .container > div.flex > div:nth-child(2) button:hover,
  header.sticky .container > div.flex > div:nth-child(2) button:active{
    color:var(--op-or-vif) !important;
  }
  header.sticky .container > div.flex > div:nth-child(2) span{
    font-family:Georgia, 'Times New Roman', serif;
    letter-spacing:.02em;
  }
}

/* ---------------------------------------------------------------------
   FOOTER — noir, titres serif or, 1 colonne large (marque) + 3 étroites
   --------------------------------------------------------------------- */
footer{
  background-color:var(--op-noir-pied) !important;
  background-image:
    repeating-linear-gradient(-45deg, rgba(201,162,39,.05) 0 1px, transparent 1px 24px);
  background-size:220% 220%;
  background-position:0% 0%;
  border-top-width:2px !important;
  border-top-style:solid !important;
  border-top-color:var(--op-or) !important; /* remplace le filet rose inline */
  animation:sbRideauPied 30s linear infinite;
}
@keyframes sbRideauPied{ from{background-position:0% 0%;} to{background-position:100% 100%;} }

/* Grille : la marque prend deux fois la largeur d'une colonne */
@media (min-width:1024px){
  footer > div.container > div.grid{
    grid-template-columns:2fr 1fr 1fr 1fr !important;
  }
}

/* Colonne marque : accent or vertical pour marquer la colonne large */
footer .lg\:col-span-1{
  border-left:3px solid var(--op-or);
  padding-left:1.1rem;
}
footer h3{
  font-family:Georgia, 'Times New Roman', serif;
  color:var(--op-or) !important; /* couvre aussi le titre en couleur inline */
  letter-spacing:.08em;
}
footer p{ color:var(--op-parchemin); }
footer a{
  color:var(--op-parchemin);
  position:relative;
  text-decoration:none;
}
footer a::after{
  content:"";
  position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:var(--op-or-vif);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
footer a:hover{ color:var(--op-or-vif); }
footer a:hover::after{ transform:scaleX(1); }

footer .border-t.border-zinc-200{ border-top-color:rgba(201,162,39,.35) !important; }
footer .text-zinc-500{ color:#8a7a5c !important; }

/* Barre du bas : on inverse l'ordre en grand écran pour casser la symétrie
   (le lien Sitemap passe à gauche, la mention légale à droite) */
@media (min-width:768px){
  footer .border-t.pt-8 > div.flex{ flex-direction:row-reverse; }
}

@media (prefers-color-scheme:dark){
  footer .text-zinc-500{ color:#a4936c !important; }
}

/* Coupe toute animation continue pour qui la demande */
@media (prefers-reduced-motion:reduce){
  header.sticky, footer{ animation:none !important; }
  header.sticky nav button::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__ */