/* __DESIGN_SITE__ */
/* ==========================================================================
   sextreff-hessen.de — Memphis 80s : corail + bleu canard
   Sidebar en blocs de couleur empilés, logo dans un rectangle incliné,
   bandeau mobile canard + CTA corail carré, footer en 3 colonnes alternées.
   ========================================================================== */

html:not(#_){
  --corail: #ff6f5e;
  --corail-fonce: #c94a3a;
  --canard: #0d6e78;
  --canard-fonce: #093f47;
  --creme: #fff6ee;
}

/* ==================== SIDEBAR DESKTOP ==================== */

/* le gabarit rend .sidebar-inner transparent : on lui donne le fond */
html:not(#_) .sidebar-inner{
  background: var(--creme);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* bloc 1 : logo dans un rectangle canard légèrement incliné */
html:not(#_) .sb-logo{
  background: var(--canard);
  margin: 14px 12px 10px;
  padding: 12px 14px;
  border-radius: 5px;
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 var(--corail);
  gap: 8px;
}
html:not(#_) .sb-logo-dot{ color: var(--corail); }
html:not(#_) .sb-logo-text{
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
}

/* bloc 2 : nav principale, fond corail clair à pois Memphis */
html:not(#_) .sb-nav{
  background-color: #ffe0d8;
  background-image: radial-gradient(var(--corail) 1.3px, transparent 1.3px);
  background-size: 15px 15px;
  padding: 10px 8px;
  margin: 0 12px 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
html:not(#_) .sb-link{
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--canard-fonce);
  font-weight: 700;
  transition: transform .15s ease, background-color .15s ease;
}
html:not(#_) .sb-link:hover{
  background: #fff;
  transform: translateX(4px);
}
html:not(#_) .sb-link.active{
  background: var(--corail);
  color: #fff;
  box-shadow: 3px 3px 0 var(--canard);
}
html:not(#_) .sb-ico{ color: inherit; }

/* bloc 3 : villes de la région, fond canard sombre */
html:not(#_) .sb-section{
  background: var(--canard-fonce);
  margin: 0 12px 14px;
  padding: 12px 10px 14px;
  border-radius: 5px;
}
html:not(#_) .sb-map-quick-link{
  color: var(--creme);
  border: 2px solid var(--corail);
  border-radius: 4px;
  padding: 6px 8px;
}
html:not(#_) .sb-map-quick-link:hover{ background: rgba(255,111,94,.18); }
html:not(#_) .sb-section-title{
  color: var(--corail);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .76rem;
  margin: 10px 0 6px;
}
html:not(#_) .sb-silo-region{
  color: #fff;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  padding: 6px 8px;
}
html:not(#_) .sb-silo-region:hover{ background: rgba(255,111,94,.25); }
html:not(#_) .sb-silo-ville{
  color: #dcecee;
  padding: 4px 8px 4px 18px;
  position: relative;
}
/* petite pastille Memphis devant chaque ville, décorative (pas de texte) */
html:not(#_) .sb-silo-ville::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--corail);
  border-radius: 50%;
  transform: translateY(-50%);
}
html:not(#_) .sb-silo-ville:hover{ color: #fff; }

/* entrée douce de la sidebar (une fois, pas de boucle) */
@media (prefers-reduced-motion: no-preference) {
  html:not(#_) .sidebar-inner{ animation: sbEntree .5s ease both; }
  @keyframes sbEntree {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
  }
  /* le repère du logo tourne doucement — icône minuscule, pas de grande surface */
  html:not(#_) .sb-logo-dot svg{ animation: logoTourne 7s linear infinite; transform-origin: center; }
  @keyframes logoTourne { to { transform: rotate(360deg); } }
}

/* ==================== BARRE MOBILE ==================== */

html:not(#_) .mobile-guest-top{
  background: var(--canard);
  background-image: radial-gradient(#ffffff30 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}
html:not(#_) .mobile-guest-brand{
  color: #fff;
  background: var(--corail);
  padding: 4px 10px;
  border-radius: 4px;
  transform: rotate(-2deg);
  display: inline-block;
  font-weight: 800;
}
html:not(#_) .mobile-guest-login{
  color: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 4px 10px;
  font-weight: 600;
}
html:not(#_) .mobile-guest-cta{ background: var(--canard-fonce); }
html:not(#_) .mobile-guest-cta-offer{ color: #ffd9d1; }
html:not(#_) .mobile-guest-cta-kw{ color: #fff; font-weight: 700; }
html:not(#_) .mobile-guest-timer-label{ color: #cdeef1; }
html:not(#_) .mobile-guest-timer{ color: var(--corail); font-weight: 800; }

/* CTA carré, coins nets, effet de pression au clic */
html:not(#_) .mobile-guest-cta-btn{
  background: var(--corail);
  color: #fff;
  border-radius: 3px;
  font-weight: 800;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--canard-fonce);
  transition: transform .1s ease, box-shadow .1s ease;
}
html:not(#_) .mobile-guest-cta-btn:active{
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--canard-fonce);
}

/* barre d'onglets basse */
html:not(#_) .bottom-bar{
  background: var(--canard-fonce);
  border-top: 3px solid var(--corail);
}
html:not(#_) .btab{ color: #bfe4e8; }
html:not(#_) .btab.active{ color: var(--corail); }
html:not(#_) .btab-lbl{ font-weight: 600; }

/* ==================== FOOTER : 3 colonnes à fonds alternés ==================== */

html:not(#_) .footer-v2{ background: var(--creme); }
html:not(#_) .footer-inner{ padding: 0; }
html:not(#_) .footer-row{
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: stretch;
  gap: 0;
}

html:not(#_) .footer-logo{
  background: var(--canard);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 22px 14px;
  transition: letter-spacing .2s ease;
}
html:not(#_) .footer-logo:hover{ letter-spacing: 1px; }

html:not(#_) .footer-links{
  background-color: var(--corail);
  background-image: radial-gradient(#ffffff35 1.2px, transparent 1.2px);
  background-size: 16px 16px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px 16px;
  padding: 20px 18px;
}
html:not(#_) .footer-links a{ color: #3a0f08; font-weight: 600; }
html:not(#_) .footer-links a:hover{ text-decoration: underline wavy; }

html:not(#_) .footer-copy{
  background: var(--canard-fonce);
  color: #cdeef1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  margin: 0;
  text-align: center;
}

@media (max-width: 640px) {
  html:not(#_) .footer-row{ grid-template-columns: 1fr; }
  html:not(#_) .footer-logo, html:not(#_) .footer-copy{ padding: 16px; }
}

/* coupe toute animation si demandé */
@media (prefers-reduced-motion: reduce) {
  html:not(#_) .sidebar-inner, html:not(#_) .sb-logo-dot svg{
    animation: 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__ */