/* __DESIGN_SITE__ */
/* sextreff-bayern.de — direction : bleu bavarois + blanc, losanges discrets
   (clin d'œil au Rautenmuster bavarois), registre « biergarten propre ».
   Disposition : logo CENTRÉ au-dessus d'un filet (sidebar), bandeau mobile
   ÉCLAIRCI (il était sombre par défaut), footer en 2 blocs asymétriques
   (marque large à gauche / liens serrés en 2 colonnes à droite). */

html:not(#_){
  --bay-navy:#0a2f66;     /* texte fort sur fond clair */
  --bay-mid:#325686;      /* texte secondaire, contraste large sur blanc/pâle */
  --bay-ice:#eef4fb;      /* fond très pâle, "ciel bavarois" */
  --bay-line:#c9d8ef;     /* filets / séparateurs */
  /* Losange discret, encre bleue sur fond transparent — 1 tuile ≈ 190 o */
  --bay-pattern:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38'><path d='M19 1 L37 19 L19 37 L1 19 Z' fill='none' stroke='%230d47a1' stroke-width='1.1' opacity='.16'/></svg>");
}

/* ============================== SIDEBAR (desktop) ============================== */

html:not(#_) .sidebar-inner{
  background-color:#fff;
  background-image:var(--bay-pattern);
  background-repeat:repeat;
  border:1px solid var(--bay-line);
  box-shadow:0 1px 3px rgba(13,71,161,.08);
}

/* Logo centré au-dessus d'un filet, au lieu d'une ligne logo+texte à gauche */
html:not(#_) .sb-logo{
  flex-direction:column;
  justify-content:center;
  text-align:center;
  gap:8px;
  padding:6px 4px 16px;
  margin-bottom:8px;
  border-bottom:1px solid var(--bay-line);
}
/* Le rond-logo devient un losange (rotation 45°), icône contre-tournée */
html:not(#_) .sb-logo-dot{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--primary,#0d47a1),#1565c0);
  transform:rotate(45deg);
  margin:2px auto;
}
html:not(#_) .sb-logo-dot svg{transform:rotate(-45deg);}
html:not(#_) .sb-logo-text{color:var(--bay-navy);letter-spacing:.03em;}

html:not(#_) .sb-nav{gap:5px;}

/* Liens en pastilles : remplissage qui glisse au survol (background-position) */
html:not(#_) .sb-link{
  border-radius:999px;
  border:1px solid transparent;
  background-image:linear-gradient(90deg,var(--bay-ice) 0%,var(--bay-ice) 100%);
  background-repeat:no-repeat;
  background-size:220% 100%;
  background-position:150% 0;
  transition:background-position .3s ease,color .2s ease,border-color .2s ease;
}
html:not(#_) .sb-link:hover{
  background-position:0 0;
  color:var(--bay-navy);
  border-color:var(--bay-line);
}
html:not(#_) .sb-link.active{
  background-image:none;
  background-color:var(--primary,#0d47a1);
  color:#fff;
  border-color:var(--primary,#0d47a1);
  box-shadow:0 2px 8px rgba(13,71,161,.28);
}

html:not(#_) .sb-section{border-top-color:var(--bay-line);}
html:not(#_) .sb-section-title{color:var(--bay-mid);position:relative;padding-left:18px;}
/* Petit losange décoratif devant le titre de section — aucun mot ajouté */
html:not(#_) .sb-section-title::before{
  content:"";position:absolute;left:2px;top:50%;width:6px;height:6px;
  background:var(--primary,#0d47a1);transform:translateY(-50%) rotate(45deg);
  border-radius:1px;
}
html:not(#_) .sb-silo-region:hover, html:not(#_) .sb-silo-ville:hover{color:var(--bay-navy);background:var(--bay-ice);}
html:not(#_) .sb-silo-more{color:var(--primary,#0d47a1);}

/* ============================== BANDEAU MOBILE ============================== */
/* Le bandeau était sombre (#111827) par défaut : direction imposée = clair. */

html:not(#_) .mobile-guest-top{
  background-color:var(--bay-ice);
  background-image:var(--bay-pattern);
  background-repeat:repeat;
  color:var(--bay-navy);
  border-bottom:2px solid var(--primary,#0d47a1);
  box-shadow:0 2px 10px rgba(13,71,161,.14);
}
html:not(#_) .mobile-guest-head{border-bottom-color:var(--bay-line);}
html:not(#_) .mobile-guest-brand{color:var(--bay-navy)!important;}
html:not(#_) .mobile-guest-login{color:var(--bay-mid)!important;}
html:not(#_) .mobile-guest-cta-offer{color:var(--bay-mid);}
html:not(#_) .mobile-guest-cta-kw{color:var(--bay-navy);}
html:not(#_) .mobile-guest-timer-label{color:var(--bay-mid);}

/* CTA pleine largeur (déjà le cas) : forme pilule + légère élévation au survol
   + un seul passage de lumière au chargement (transform uniquement). */
html:not(#_) .mobile-guest-cta-btn{
  border-radius:999px;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
html:not(#_) .mobile-guest-cta-btn:hover, html:not(#_) .mobile-guest-cta-btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(13,71,161,.35);
}
html:not(#_) .mobile-guest-cta-btn::after{
  content:"";position:absolute;top:0;left:0;width:35%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-220%) skewX(-18deg);
  animation:bay-shine 2.4s ease-in-out .5s 1 both;
}
@keyframes bay-shine{
  from{transform:translateX(-220%) skewX(-18deg);}
  to{transform:translateX(260%) skewX(-18deg);}
}

/* ============================== BARRE D'ONGLETS BASSE ============================== */

html:not(#_) .bottom-bar{
  border-top:1px solid var(--bay-line);
  box-shadow:0 -2px 10px rgba(13,71,161,.08);
}
html:not(#_) .btab:hover{color:var(--primary,#0d47a1);}
html:not(#_) .btab.active{color:var(--primary,#0d47a1);}
html:not(#_) .btab-ico{
  border-radius:50%;
  transition:background-color .15s ease,transform .15s ease;
}
html:not(#_) .btab.active .btab-ico{
  background:var(--bay-ice);
  transform:scale(1.08);
}

/* ============================== FOOTER — 2 BLOCS ASYMÉTRIQUES ============================== */

html:not(#_) .footer-v2{
  position:relative;
  overflow:hidden;
  background-color:var(--bay-ice);
  border-top:3px solid var(--primary,#0d47a1);
}
/* Motif de losanges qui dérive lentement dans le fond du footer (background-position) */
html:not(#_) .footer-v2::before{
  content:"";position:absolute;inset:0;
  background-image:var(--bay-pattern);
  background-repeat:repeat;
  opacity:.55;
  animation:bay-drift 55s linear infinite;
  pointer-events:none;
}
html:not(#_) .footer-inner{position:relative;z-index:1;}
@keyframes bay-drift{
  from{background-position:0 0;}
  to{background-position:380px 380px;}
}

/* marque large (gauche) / liens serrés en 2 colonnes (droite) */
html:not(#_) .footer-row{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  grid-template-areas:"brand links" "copy links";
  align-items:start;
  column-gap:2rem;
  row-gap:.5rem;
  text-align:left;
}
html:not(#_) .footer-logo{
  grid-area:brand;
  color:var(--bay-navy)!important;
  font-size:1.55rem;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
/* Petit losange devant le nom de marque — décor, pas un mot */
html:not(#_) .footer-logo::before{
  content:"";width:9px;height:9px;flex-shrink:0;
  background:var(--primary,#0d47a1);transform:rotate(45deg);border-radius:1px;
}
html:not(#_) .footer-copy{grid-area:copy;color:var(--bay-mid);text-align:left;}

html:not(#_) .footer-links{
  grid-area:links;
  display:block;
  columns:2;
  column-gap:1.1rem;
  border-left:1px solid var(--bay-line);
  padding-left:1.2rem;
}
html:not(#_) .footer-links a{
  display:block;
  break-inside:avoid;
  margin-bottom:.4rem;
  color:var(--bay-mid);
}
html:not(#_) .footer-links a:hover{
  color:var(--primary,#0d47a1);
  text-decoration:underline;
}

@media (max-width:640px){
  html:not(#_) .footer-row{
    grid-template-columns:1fr;
    grid-template-areas:"brand" "links" "copy";
    text-align:center;
    row-gap:1rem;
  }
  html:not(#_) .footer-logo{justify-content:center;}
  html:not(#_) .footer-links{
    columns:1;
    border-left:none;
    padding-left:0;
    border-top:1px solid var(--bay-line);
    padding-top:.9rem;
  }
  html:not(#_) .footer-links a{text-align:center;}
  html:not(#_) .footer-copy{text-align:center;}
}

/* ============================== ACCESSIBILITÉ ============================== */

@media (prefers-reduced-motion: reduce){
  html:not(#_) .footer-v2::before{animation:none!important;background-position:0 0!important;}
  html:not(#_) .mobile-guest-cta-btn::after{animation:none!important;display:none;}
}

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