/* __DESIGN_SITE__ */
/* ===================================================================
   swingerclub-niedersachsen.de — habillage unique (gabarit Astro)
   Direction : NOIR + ROSE POUDRÉ, registre « club feutré »
   (ombres douces, coins 18 px, aucune arête vive).
   Zones : sidebar desktop · bandeau + barre d'onglets mobile · footer.
   =================================================================== */

/* -------- palette locale (ne fuit pas hors de ce fichier) -------- */
html:not(#_) .sidebar, html:not(#_) .mobile-guest-top, html:not(#_) .bottom-bar, html:not(#_) .footer-v2{
  --nuit: #0c0a0d;        /* noir velouté, légèrement chaud */
  --nuit-2: #17121a;      /* second plan, dégradés */
  --poudre: #e9c3cf;      /* rose poudré clair — texte/liens */
  --poudre-mate: #b98a9a; /* rose poudré assourdi — texte secondaire */
  --poudre-vif: #d98aa3;  /* rose poudré soutenu — accents, boutons */
  --encre: #241a20;       /* texte sombre sur bouton clair */
}

/* ===================================================================
   1) SIDEBAR DESKTOP — nav.sb-nav dans aside.sidebar
   Disposition : logo empilé et centré, liens ALIGNÉS À DROITE,
   icône placée APRÈS le texte (ordre inversé par flex `order`).
   =================================================================== */

html:not(#_) .sidebar{
  background: var(--nuit);
  border-right: 1px solid rgba(233, 195, 207, .12);
  box-shadow: 6px 0 28px rgba(0, 0, 0, .35);
}

/* le panneau interne est transparent par défaut : on lui redonne un
   fond (dégradé feutré, très léger grain de lumière en haut) */
html:not(#_) .sidebar-inner{
  background: linear-gradient(180deg, var(--nuit-2) 0%, var(--nuit) 220px);
  padding-inline: 18px;
}

/* logo : empilé et centré (au lieu d'une ligne icône + texte) */
html:not(#_) .sb-logo{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding-block: 22px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(233, 195, 207, .1);
}
html:not(#_) .sb-logo-dot{
  color: var(--poudre-vif);
  filter: drop-shadow(0 0 8px rgba(217, 138, 163, .55));
}
html:not(#_) .sb-logo-text{
  color: var(--poudre);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
}

/* liens principaux : texte à droite, icône après (order) */
html:not(#_) .sb-link, html:not(#_) .sb-map-quick-link{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-align: right;
  color: var(--poudre-mate);
  border-radius: 18px;
  padding: 10px 14px;
  margin-block: 3px;
  position: relative;
  overflow: hidden;
  transition: color .2s ease, background-color .25s ease, transform .2s ease;
}
html:not(#_) .sb-link > span:not(.sb-ico), html:not(#_) .sb-map-quick-link > span:not(.sb-ico){ order: 1; }
html:not(#_) .sb-link .sb-ico, html:not(#_) .sb-map-quick-link .sb-ico{ order: 2; color: var(--poudre-mate); transition: color .2s ease; }

html:not(#_) .sb-link:hover, html:not(#_) .sb-map-quick-link:hover{
  color: var(--poudre);
  background: rgba(233, 195, 207, .07);
  transform: translateX(-3px);
}
html:not(#_) .sb-link:hover .sb-ico, html:not(#_) .sb-map-quick-link:hover .sb-ico{ color: var(--poudre-vif); }

/* lien actif : pastille pleine, coin 18 px, ombre douce */
html:not(#_) .sb-link.active{
  color: var(--encre);
  background: linear-gradient(135deg, var(--poudre-vif), #c46f8b);
  box-shadow: 0 6px 18px rgba(217, 138, 163, .35);
}
html:not(#_) .sb-link.active .sb-ico{ color: var(--encre); }

/* titre de section : petites capitales, aligné à droite */
html:not(#_) .sb-section-title{
  text-align: right;
  color: var(--poudre-mate);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: .75;
  padding-right: 14px;
  margin-top: 10px;
}

/* régions/villes du maillage : alignées à droite, garde l'ordre
   texte → chevron déjà présent (aucun besoin d'inverser) */
html:not(#_) .sb-silo-region{
  justify-content: flex-end;
  text-align: right;
  color: var(--poudre);
  border-radius: 14px;
  padding: 8px 14px;
  transition: background-color .2s ease;
}
html:not(#_) .sb-silo-region:hover{ background: rgba(233, 195, 207, .06); }
html:not(#_) .sb-silo-ville{
  display: block;
  text-align: right;
  color: var(--poudre-mate);
  padding: 6px 18px 6px 10px;
  border-radius: 12px;
  transition: color .18s ease, transform .18s ease;
}
html:not(#_) .sb-silo-ville:hover{
  color: var(--poudre-vif);
  transform: translateX(-2px);
}

/* apparition douce de la sidebar au chargement (une seule fois) */
html:not(#_) .sidebar-inner{ animation: sc-glisse .5s ease-out both; }
@keyframes sc-glisse {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===================================================================
   2) BARRE MOBILE — bandeau .mobile-guest-top + onglets .bottom-bar
   Disposition : bandeau NOIR, offre en ROSE ; liseré animé fin en
   tête de bandeau (surface fine, pas une grande zone opaque).
   =================================================================== */

html:not(#_) .mobile-guest-top{
  background: var(--nuit) !important;
  border-bottom: 1px solid rgba(233, 195, 207, .14);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}
/* liseré animé très fin — surface décorative, pas une grande aplat */
html:not(#_) .mobile-guest-top::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--poudre-vif), transparent);
  background-size: 200% 100%;
  animation: sc-liflow 3.2s linear infinite;
}

html:not(#_) .mobile-guest-brand{
  color: var(--poudre) !important;
  font-weight: 700;
  letter-spacing: .04em;
}
html:not(#_) .mobile-guest-login{
  color: var(--poudre-mate) !important;
  border: 1px solid rgba(233, 195, 207, .3);
  border-radius: 999px;
  padding: 4px 12px;
}

html:not(#_) .mobile-guest-cta-offer{
  color: var(--poudre-vif) !important;
  font-weight: 700;
}
html:not(#_) .mobile-guest-cta-kw{
  color: var(--poudre-mate) !important;
}
html:not(#_) .mobile-guest-timer-label{ color: var(--poudre-mate) !important; }
html:not(#_) .mobile-guest-timer{
  color: var(--poudre) !important;
  font-variant-numeric: tabular-nums;
}

html:not(#_) .mobile-guest-cta-btn{
  background: linear-gradient(135deg, var(--poudre-vif), #c46f8b) !important;
  color: var(--encre) !important;
  border-radius: 18px;
  font-weight: 700;
  min-height: 44px;
  box-shadow: 0 8px 20px rgba(217, 138, 163, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}
html:not(#_) .mobile-guest-cta-btn:active{
  transform: translateY(1px) scale(.99);
  box-shadow: 0 4px 12px rgba(217, 138, 163, .3);
}

/* barre d'onglets basse : fond noir, pastille rose sur l'onglet actif */
html:not(#_) .bottom-bar{
  background: var(--nuit) !important;
  border-top: 1px solid rgba(233, 195, 207, .12);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .3);
}
html:not(#_) .btab{
  color: var(--poudre-mate) !important;
  transition: color .2s ease, transform .18s ease;
}
html:not(#_) .btab-ico{ transition: transform .18s ease; }
html:not(#_) .btab.active{
  color: var(--poudre) !important;
}
html:not(#_) .btab.active .btab-ico{
  color: var(--poudre-vif);
  transform: translateY(-2px);
  filter: drop-shadow(0 3px 6px rgba(217, 138, 163, .5));
}
html:not(#_) .btab:active{ transform: scale(.94); }

/* ===================================================================
   3) FOOTER — footer.footer-v2
   Disposition : bloc unique CENTRÉ et ÉTROIT (au lieu d'une ligne
   large logo/liens/copyright), sur fond noir feutré.
   =================================================================== */

html:not(#_) .footer-v2{
  background: var(--nuit);
  border-top: 1px solid rgba(233, 195, 207, .12);
}
html:not(#_) .footer-inner{
  max-width: 420px;
  margin-inline: auto;
  padding-block: 34px 26px;
}
html:not(#_) .footer-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background: var(--nuit-2);
  border-radius: 18px;
  padding: 26px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
html:not(#_) .footer-logo{
  color: var(--poudre) !important;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 15px;
}
html:not(#_) .footer-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}
html:not(#_) .footer-links a{
  color: var(--poudre-mate);
  font-size: 12.5px;
  transition: color .18s ease;
}
html:not(#_) .footer-links a:hover{ color: var(--poudre-vif); }
html:not(#_) .footer-copy{
  color: var(--poudre-mate);
  opacity: .7;
  font-size: 11.5px;
  margin: 0;
}

/* ===================================================================
   4) accessibilité mouvement — coupe toutes les animations
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html:not(#_) .sidebar-inner, html:not(#_) .mobile-guest-top::before, html:not(#_) .btab.active .btab-ico, html:not(#_) .mobile-guest-cta-btn, html:not(#_) .sb-link, html:not(#_) .sb-map-quick-link, html:not(#_) .sb-silo-ville, html:not(#_) .btab{
    animation: none !important;
    transition: none !important;
  }
}

@keyframes sc-liflow {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce){html:not(#_) .sidebar-inner{animation:none !important;transition:none !important;}}
html:not(#_) .sidebar-inner{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.45) transparent;}
/* __END_DESIGN_SITE__ */