/* __DESIGN_SITE__ */
/* ==========================================================================
   sexkontakte-baden-wuerttemberg.de — habillage unique (gabarit Astro)
   Direction : bleu roi + jaune paille — registre « années 70 »
   Arrondis généreux (24 px), dégradés chauds, logo en pastille,
   liens en capsules, footer en bandes horizontales empilées.
   Zones : sidebar desktop / bandeau + barre d'onglets mobile / footer.
   ========================================================================== */

/* ---------- Sidebar desktop ---------- */

html:not(#_) .sidebar{
  box-shadow: 6px 0 26px rgba(20, 28, 82, .2);
}

html:not(#_) .sidebar-inner{
  background:
    radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(160deg, #16265f 0%, #223f9c 55%, #2d52c4 100%);
  border-radius: 0 24px 24px 0;
  padding-top: 8px;
  animation: y70-glisse .5s ease-out both;
}

/* Logo en pastille jaune */
html:not(#_) .sb-logo{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 14px 20px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}
html:not(#_) .sb-logo-dot{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f6dd7c 0%, #e2a63c 100%);
  color: #1a2a63;
  box-shadow: 0 4px 14px rgba(226, 166, 60, .5);
  animation: y70-respire 4s ease-in-out infinite;
}
html:not(#_) .sb-logo-text{
  color: #fff6e0;
  font-weight: 800;
  letter-spacing: .01em;
}

/* Liens en capsules */
html:not(#_) .sb-nav{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
}
html:not(#_) .sb-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  color: #eef1ff;
  background: rgba(255, 255, 255, .05);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .sb-link .sb-ico{ color: #cdd8ff; transition: color .2s ease; }
html:not(#_) .sb-link:hover, html:not(#_) .sb-link:focus-visible{
  background: rgba(255, 255, 255, .15);
  transform: translateX(4px);
}
html:not(#_) .sb-link.active{
  background: linear-gradient(135deg, #f6dd7c 0%, #e2a63c 100%);
  color: #1a2a63;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(226, 166, 60, .35);
}
html:not(#_) .sb-link.active .sb-ico{ color: #1a2a63; }

html:not(#_) .sb-map-quick-link{
  margin: 10px 12px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  color: #1a2a63;
  background: #fff6e0;
  font-weight: 700;
}

html:not(#_) .sb-section-title{
  margin: 18px 18px 6px;
  color: #b9c6ff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}

html:not(#_) .sb-silo-region{
  border-radius: 999px;
  padding: 8px 16px;
  color: #eef1ff;
  background: rgba(255, 255, 255, .05);
}
html:not(#_) .sb-silo-villes{ padding-left: 10px; }
html:not(#_) .sb-silo-ville{
  display: inline-block;
  margin: 3px 4px 3px 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #d8e0ff;
  font-size: .82rem;
  transition: background-color .2s ease, color .2s ease;
}
html:not(#_) .sb-silo-ville:hover{ background: rgba(246, 221, 124, .2); color: #fff6e0; }

/* ---------- Bandeau + barre d'onglets mobile ---------- */

html:not(#_) .mobile-guest-top{
  background: linear-gradient(115deg, #16265f 0%, #2d52c4 100%);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 8px 20px rgba(20, 30, 90, .25);
}
html:not(#_) .mobile-guest-brand{ color: #fff6e0; font-weight: 800; }
html:not(#_) .mobile-guest-login{
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 246, 224, .55);
  color: #fff6e0;
}
html:not(#_) .mobile-guest-cta-offer{ color: #cfe0ff; }
html:not(#_) .mobile-guest-cta-kw{ color: #fff6e0; font-weight: 700; }
html:not(#_) .mobile-guest-timer-label{ color: #b9c6ff; }
html:not(#_) .mobile-guest-timer{ color: #f6dd7c; font-weight: 700; }
html:not(#_) .mobile-guest-cta-btn{
  display: block;
  text-align: center;
  padding: 13px 18px;
  min-height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6dd7c 0%, #e2a63c 100%);
  color: #1a2a63;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(226, 166, 60, .45);
  transition: transform .15s ease, box-shadow .15s ease;
}
html:not(#_) .mobile-guest-cta-btn:active{ transform: scale(.97); }

html:not(#_) .bottom-bar{
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #223f9c 0%, #16265f 100%);
  box-shadow: 0 -6px 18px rgba(20, 30, 90, .3);
}
html:not(#_) .btab{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  margin: 6px 3px;
  border-radius: 16px;
  color: #cdd8ff;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
html:not(#_) .btab:active{ transform: scale(.94); }
html:not(#_) .btab-lbl{ font-size: .66rem; }
html:not(#_) .btab.active{
  background: linear-gradient(135deg, #f6dd7c 0%, #e2a63c 100%);
  color: #1a2a63;
}

/* ---------- Footer : bandes horizontales empilées ---------- */

html:not(#_) .footer-v3{ background: #0d1638; }

html:not(#_) .footer-inner{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 20px;
}

html:not(#_) .footer-top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-radius: 24px;
  background: linear-gradient(115deg, #223f9c 0%, #3c56c2 55%, #e2a63c 130%);
}
html:not(#_) .footer-brand h3{ color: #fff6e0; margin: 0 0 4px; }
html:not(#_) .footer-brand p{ color: #d8e0ff; margin: 0; }
html:not(#_) .footer-v3 .footer-newsletter{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
html:not(#_) .footer-newsletter p{ color: #fff6e0; margin: 0; font-weight: 600; }
html:not(#_) .footer-v3 .btn-primary{
  padding: 11px 22px;
  border-radius: 999px;
  background: #f6dd7c;
  color: #1a2a63;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
html:not(#_) .footer-v3 .btn-primary:hover{ transform: translateY(-2px); }

html:not(#_) .footer-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html:not(#_) .footer-col{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 16px 22px;
  border-radius: 24px;
}
html:not(#_) .footer-col:nth-child(odd){ background: #16265f; }
html:not(#_) .footer-col:nth-child(even){ background: #fff3d6; }
html:not(#_) .footer-col h4{
  margin: 0;
  padding-right: 14px;
  border-right: 2px solid rgba(255, 255, 255, .18);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #f6dd7c;
  flex: 0 0 auto;
}
html:not(#_) .footer-col:nth-child(even) h4{
  color: #1a2a63;
  border-right-color: rgba(26, 42, 99, .18);
}
html:not(#_) .footer-col ul{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 220px;
}
html:not(#_) .footer-col a{
  padding: 5px 13px;
  border-radius: 999px;
  text-decoration: none;
  font-size: .85rem;
  transition: background-color .2s ease;
}
html:not(#_) .footer-col:nth-child(odd) a{ color: #eef1ff; background: rgba(255, 255, 255, .07); }
html:not(#_) .footer-col:nth-child(even) a{ color: #1a2a63; background: rgba(26, 42, 99, .08); }
html:not(#_) .footer-col:nth-child(odd) a:hover{ background: rgba(246, 221, 124, .22); }
html:not(#_) .footer-col:nth-child(even) a:hover{ background: rgba(26, 42, 99, .18); }
html:not(#_) .footer-col .contact-email a{ background: none; padding: 0; text-decoration: underline; }

html:not(#_) .footer-bottom{
  text-align: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: #16265f;
  color: #9fb0e6;
  font-size: .8rem;
}

/* ---------- Animations ---------- */

@keyframes y70-glisse {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes y70-respire {
  0%, 100% { box-shadow: 0 4px 14px rgba(226, 166, 60, .45); }
  50%      { box-shadow: 0 4px 22px rgba(226, 166, 60, .75); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(#_) .sidebar-inner, html:not(#_) .sb-logo-dot, html:not(#_) .sb-link, html:not(#_) .sb-silo-ville, html:not(#_) .mobile-guest-cta-btn, html:not(#_) .footer-v3 .btn-primary, html:not(#_) .footer-col a, html:not(#_) .btab{
    animation: none !important;
    transition: none !important;
  }
}

@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__ */