/* __DESIGN_SITE__ */
/* Habillage unique — sex-baden-wuerttemberg.de (gabarit Astro)
   Direction : "suisse typographique" — blanc + rouge signal + gris chaud.
   Sidebar    : grande typo, AUCUN fond de lien, un seul trait rouge vertical
                réservé au lien ACTIF (le survol ne montre qu'un trait gris,
                jamais rouge, pour garder ce signal exclusif).
   Barre mobile : bandeau blanc bordé rouge, textes sombres et lisibles
                (le bandeau d'origine est sombre à textes blancs translucides).
   Footer     : grille 3 colonnes très aérée, fond gris chaud très clair. */

html:not(#_){
  --dsg-rouge:      #d52b1e;   /* rouge signal, contraste ≥ 5:1 sur blanc */
  --dsg-rouge-vif:  #ef3e2e;
  --dsg-encre:      #201d1a;   /* texte principal, presque noir */
  --dsg-gris-chaud: #6b6259;   /* texte secondaire (≈ 6:1 sur blanc) */
  --dsg-gris-clair: #a89f96;
  --dsg-fond:       #ffffff;
  --dsg-fond-chaud: #f7f3ef;   /* fond du footer, gris chaud très clair */
  --dsg-trait:      #ece5df;
}

/* ============================================================ */
/* 1. SIDEBAR DESKTOP — nav.sb-nav dans aside.sidebar            */
/* ============================================================ */

/* Panneau blanc net, séparé du contenu par un simple filet (pas d'ombre) */
html:not(#_) .sidebar-inner{
  background: var(--dsg-fond);
  box-shadow: none;
  border-right: 1px solid var(--dsg-trait);
  padding-top: 2.25rem;
}
html:not(#_) .sidebar-inner{ scrollbar-width: thin; scrollbar-color: var(--dsg-gris-clair) transparent; }

/* Logotype : plus grand, capitales espacées, pastille carrée (pas de rond) */
html:not(#_) .sb-logo{
  display: flex; align-items: center; gap: .65rem;
  padding: 0 1.75rem 1.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--dsg-trait);
}
html:not(#_) .sb-logo-dot{
  width: 11px; height: 11px; border-radius: 2px;
  background: var(--dsg-rouge);
  display: inline-block;
  animation: dsg-pouls 3.2s ease-in-out infinite;
}
html:not(#_) .sb-logo-dot svg{ display: none; } /* la pastille rouge remplace l'icône d'origine */
html:not(#_) .sb-logo-text{
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dsg-encre);
}

/* Navigation principale : texte seul, jamais de fond, icônes discrètes */
html:not(#_) .sb-nav{ display: flex; flex-direction: column; gap: .1rem; padding: 0 .75rem; }
html:not(#_) .sb-link{
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem 1rem .8rem 1.15rem;
  font-size: 1.02rem; font-weight: 600; letter-spacing: .01em;
  color: var(--dsg-gris-chaud);
  background: transparent !important;   /* règle de la direction : aucun fond de lien */
  border-left: 3px solid transparent;
  border-radius: 0;
  opacity: 0; transform: translateX(-8px);
  animation: dsg-entree .5s ease forwards;
}
html:not(#_) .sb-nav .sb-link:nth-child(1){ animation-delay: .05s; }
html:not(#_) .sb-nav .sb-link:nth-child(2){ animation-delay: .12s; }
html:not(#_) .sb-nav .sb-link:nth-child(3){ animation-delay: .19s; }
html:not(#_) .sb-nav .sb-link:nth-child(4){ animation-delay: .26s; }
html:not(#_) .sb-link:hover{
  color: var(--dsg-encre);
  border-left-color: var(--dsg-gris-clair);   /* survol = trait GRIS, jamais rouge */
  padding-left: 1.4rem;
}
html:not(#_) .sb-link.active{
  color: var(--dsg-rouge);
  font-weight: 800;
  border-left-color: var(--dsg-rouge);        /* seul le lien actif porte le trait rouge */
}
html:not(#_) .sb-ico{ width: 18px; height: 18px; opacity: .8; }
html:not(#_) .sb-ico svg{ width: 18px; height: 18px; }

/* Maillage régional : labels typographiques, aucun fond */
html:not(#_) .sb-section{ margin-top: 1.75rem; padding: 0 1.15rem; }
html:not(#_) .sb-map-quick-link{
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 0;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dsg-rouge);
  background: transparent !important;
  transition: gap .15s ease;
}
html:not(#_) .sb-map-quick-link:hover{ gap: .95rem; }
html:not(#_) .sb-section-title{
  margin: 1rem 0 .6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--dsg-trait);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dsg-gris-clair);
}
html:not(#_) .sb-silo-list{ display: flex; flex-direction: column; gap: .1rem; }
html:not(#_) .sb-silo-region{
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 0;
  font-size: .95rem; font-weight: 700;
  color: var(--dsg-encre);
  background: transparent !important;
}
html:not(#_) .sb-silo-region:hover{ color: var(--dsg-rouge); }
html:not(#_) .sb-chevron{ width: 14px; height: 14px; color: var(--dsg-gris-clair); }
html:not(#_) .sb-silo-villes{ display: flex; flex-direction: column; padding-left: .35rem; }
html:not(#_) .sb-silo-ville{
  padding: .35rem 0 .35rem .6rem;
  font-size: .88rem;
  color: var(--dsg-gris-chaud);
  background: transparent !important;
  border-left: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
html:not(#_) .sb-silo-ville:hover{ color: var(--dsg-encre); border-left-color: var(--dsg-gris-clair); }

/* ============================================================ */
/* 2. BARRE MOBILE — bandeau haut + onglets bas                  */
/* ============================================================ */

html:not(#_) .mobile-guest-top{
  background: var(--dsg-fond);
  border-bottom: 3px solid var(--dsg-rouge);
}
html:not(#_) .mobile-guest-head{
  background: transparent;
  border-bottom: 1px solid var(--dsg-trait);
}
html:not(#_) .mobile-guest-brand{
  color: var(--dsg-encre) !important;
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
html:not(#_) .mobile-guest-login{
  color: var(--dsg-gris-chaud) !important;
  font-weight: 600;
  background: transparent !important;
  transition: color .15s ease;
}
html:not(#_) .mobile-guest-login:hover{ color: var(--dsg-rouge) !important; }
html:not(#_) .mobile-guest-cta{ background: transparent; }
html:not(#_) .mobile-guest-cta-offer{
  color: var(--dsg-rouge) !important;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
html:not(#_) .mobile-guest-cta-kw{ color: var(--dsg-encre) !important; font-weight: 800; }
html:not(#_) .mobile-guest-timer-label{ color: var(--dsg-gris-clair) !important; font-size: .72rem; }
html:not(#_) .mobile-guest-timer{ color: var(--dsg-rouge) !important; font-weight: 800; }
html:not(#_) .mobile-guest-cta-btn{
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  background: var(--dsg-rouge) !important;
  color: #fff !important;
  font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 2px 0 var(--dsg-rouge-vif);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
html:not(#_) .mobile-guest-cta-btn:hover, html:not(#_) .mobile-guest-cta-btn:active{
  background: var(--dsg-rouge-vif) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(213,43,30,.35);
}

/* Onglets du bas : même cadre blanc bordé rouge */
html:not(#_) .bottom-bar{
  background: var(--dsg-fond);
  border-top: 3px solid var(--dsg-rouge);
  box-shadow: 0 -2px 10px rgba(32,29,26,.06);
}
html:not(#_) .btab{
  color: var(--dsg-gris-chaud) !important;
  background: transparent !important;
  transition: transform .15s ease, color .15s ease;
}
html:not(#_) .btab-ico{ transition: transform .15s ease; }
html:not(#_) .btab-lbl{ font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
html:not(#_) .btab:hover .btab-ico, html:not(#_) .btab.active .btab-ico{ transform: translateY(-2px); }
html:not(#_) .btab.active{ color: var(--dsg-rouge) !important; }
html:not(#_) .btab.active .btab-lbl{ font-weight: 800; }

/* ============================================================ */
/* 3. FOOTER — footer.footer-v1, grille 3 colonnes très aérée    */
/* ============================================================ */

html:not(#_) .footer-v1{
  position: relative;
  background: var(--dsg-fond-chaud);
  color: var(--dsg-gris-chaud);
  overflow: hidden;
}
/* liseré animé en tête de footer : dérive lente, jamais sur une surface opaque */
html:not(#_) .footer-v1::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--dsg-rouge) 0 25%, var(--dsg-rouge-vif) 50%, var(--dsg-rouge) 75% 100%);
  background-size: 220% 100%;
  animation: dsg-derive 9s linear infinite;
}
html:not(#_) .footer-inner{ padding: 3.5rem 2rem 2rem; max-width: 1180px; margin: 0 auto; }
html:not(#_) .footer-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  align-items: start;
}
html:not(#_) .footer-col:empty{ display: none; }   /* la 4ᵉ colonne du gabarit est vide sur ce site */
html:not(#_) .footer-col h4{
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dsg-encre);
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--dsg-rouge);
  display: inline-block;
}
html:not(#_) .footer-col p{ line-height: 1.65; font-size: .92rem; }
html:not(#_) .footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
html:not(#_) .footer-col li a{
  color: var(--dsg-gris-chaud);
  background: transparent !important;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
  display: inline-block;
}
html:not(#_) .footer-col li a:hover{ color: var(--dsg-rouge); transform: translateX(4px); }
html:not(#_) .footer-bottom{
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--dsg-trait);
  text-align: center;
  font-size: .8rem;
  color: var(--dsg-gris-clair);
}

/* ============================================================ */
/* 4. Animations + repli accessibilité                           */
/* ============================================================ */
@keyframes dsg-entree{ from{ opacity: 0; transform: translateX(-8px);} to{ opacity: 1; transform: translateX(0);} }
@keyframes dsg-pouls{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.18);} }
@keyframes dsg-derive{ 0%{ background-position: 0% 0;} 100%{ background-position: -220% 0;} }

@media (prefers-reduced-motion: reduce){
  html:not(#_) .sb-link{ animation: none !important; opacity: 1 !important; transform: none !important; }
  html:not(#_) .sb-logo-dot{ animation: none !important; }
  html:not(#_) .footer-v1::before{ animation: none !important; }
  html:not(#_) .mobile-guest-cta-btn, html:not(#_) .btab, html:not(#_) .btab-ico, html:not(#_) .sb-map-quick-link, html:not(#_) .footer-col li a{ transition: none !important; }
}

@media (prefers-reduced-motion: reduce){html:not(#_) .sidebar-inner{animation:none !important;transition:none !important;}}
/* __END_DESIGN_SITE__ */