/* __DESIGN_SITE__ */
html:not(#_) .sidebar-inner{background:transparent;box-shadow:none;}
/* ^ posé par design_site.py : le panneau blanc d'Astro recouvrait le fond du .sidebar */
/* ===================================================================
   sextreffen-ffm.de — direction « duo tone » : marine + jaune francs,
   formes obliques. Ne touche qu'a la sidebar (= header du gabarit
   Astro), au bandeau mobile et au footer. Rien d'autre.
   =================================================================== */

html:not(#_){
  --ff-marine:#0b1e3f;
  --ff-marine2:#132a52;
  --ff-marine-fonce:#071223;
  --ff-jaune:#ffcc00;
  --ff-jaune-vif:#ffe066;
}

/* --- Apparition douce au chargement (une seule fois, pas de boucle) --- */
@keyframes ff-entree{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes ff-derive{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

/* =========================== SIDEBAR (desktop) =========================== */
html:not(#_) .sidebar{
  background:linear-gradient(155deg, var(--ff-marine) 0%, var(--ff-marine2) 55%, var(--ff-marine-fonce) 100%);
}
html:not(#_) .sidebar-inner{
  animation:ff-entree .5s ease both;}
/* liseré oblique sur le bord droit de la sidebar */
html:not(#_) .sidebar::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:6px; height:100%;
  background:linear-gradient(180deg, var(--ff-jaune) 0%, var(--ff-marine2) 60%, var(--ff-jaune) 100%);
  clip-path:polygon(40% 0, 100% 0, 100% 100%, 60% 100%);
}

/* Logo : pastille oblique jaune derriere le texte */
html:not(#_) .sb-logo{
  position:relative;
  color:#fff;
  padding-left:.35rem;
}
html:not(#_) .sb-logo-dot{
  position:relative;
  background:var(--ff-jaune);
  border-radius:3px;
  transform:skewX(-10deg);
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}
html:not(#_) .sb-logo-dot svg{transform:skewX(10deg); display:block;}
html:not(#_) .sb-logo-text{
  font-weight:800;
  letter-spacing:.03em;
  color:#fff;
}

/* Liens de nav : soulignement oblique qui glisse au survol */
html:not(#_) .sb-link{
  color:#c9d6ef;
  position:relative;
  transition:color .18s ease;
}
html:not(#_) .sb-link .sb-ico{color:var(--ff-jaune-vif); opacity:.85; transition:opacity .18s ease;}
html:not(#_) .sb-link::before{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:2px;
  height:3px;
  background:var(--ff-jaune);
  transform:skewX(-18deg) scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
}
html:not(#_) .sb-link:hover, html:not(#_) .sb-link:focus-visible{color:#fff;}
html:not(#_) .sb-link:hover::before, html:not(#_) .sb-link:focus-visible::before, html:not(#_) .sb-link.active::before{transform:skewX(-18deg) scaleX(1);}
html:not(#_) .sb-link.active{color:#fff;}
html:not(#_) .sb-link.active .sb-ico, html:not(#_) .sb-link:hover .sb-ico{opacity:1;}

html:not(#_) .sb-map-quick-link{
  background:var(--ff-jaune);
  color:var(--ff-marine-fonce);
  font-weight:700;
  border-radius:3px 10px 3px 10px;
  transition:transform .16s ease, box-shadow .16s ease;
}
html:not(#_) .sb-map-quick-link:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.28);
}

html:not(#_) .sb-section-title{
  color:var(--ff-jaune);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  position:relative;
  padding-left:.6rem;
}
html:not(#_) .sb-section-title::before{
  content:"";
  position:absolute;
  left:0; top:.15em; bottom:.15em;
  width:4px;
  background:var(--ff-jaune);
  transform:skewX(-18deg);
}

html:not(#_) .sb-silo-region{color:#dbe4f6;}
html:not(#_) .sb-silo-region:hover, html:not(#_) .sb-silo-region[data-silo-toggle]:hover{
  color:var(--ff-jaune-vif);
  background:rgba(255,204,0,.08);
}
html:not(#_) .sb-chevron{color:var(--ff-jaune-vif);}
html:not(#_) .sb-silo-ville{color:#9fb0d3;}
html:not(#_) .sb-silo-ville:hover{color:var(--ff-jaune-vif);}

/* =========================== BANDEAU MOBILE =========================== */
html:not(#_) .mobile-guest-top{
  background:linear-gradient(160deg, var(--ff-marine) 0%, var(--ff-marine2) 100%);
  animation:ff-entree .5s ease both;
}
/* bande jaune oblique sous le bandeau, comme une coupe franche */
html:not(#_) .mobile-guest-top::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-5px;
  height:5px;
  background:var(--ff-jaune);
  clip-path:polygon(0 0, 96% 0, 100% 100%, 4% 100%);
}
html:not(#_) .mobile-guest-brand{
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
}
html:not(#_) .mobile-guest-login{
  color:var(--ff-jaune-vif);
  border:1.5px solid var(--ff-jaune-vif);
  border-radius:3px 9px 3px 9px;
  padding:.3rem .8rem;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:background .16s ease, color .16s ease;
}
html:not(#_) .mobile-guest-login:hover{
  background:var(--ff-jaune-vif);
  color:var(--ff-marine-fonce);
}
html:not(#_) .mobile-guest-cta{
  background:rgba(7,18,35,.35);
}
html:not(#_) .mobile-guest-cta-offer{color:var(--ff-jaune-vif); font-weight:700;}
html:not(#_) .mobile-guest-cta-kw{color:#fff;}
html:not(#_) .mobile-guest-timer-label{color:#9fb0d3;}
html:not(#_) .mobile-guest-timer{
  color:var(--ff-jaune);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
html:not(#_) .mobile-guest-cta-btn{
  background:var(--ff-jaune);
  color:var(--ff-marine-fonce);
  font-weight:800;
  border-radius:3px 12px 3px 12px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 0 var(--ff-jaune-vif);
  transition:transform .16s ease, box-shadow .16s ease;
}
html:not(#_) .mobile-guest-cta-btn:hover, html:not(#_) .mobile-guest-cta-btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 5px 10px rgba(0,0,0,.3);
}

/* =========================== FOOTER =========================== */
html:not(#_) .footer-v1{
  background:linear-gradient(160deg, var(--ff-marine-fonce) 0%, var(--ff-marine) 100%);
  position:relative;
  color:#c9d6ef;
}
/* liseré oblique en tête de footer, degrade qui derive lentement */
html:not(#_) .footer-v1::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--ff-jaune) 0%, var(--ff-marine2) 25%, var(--ff-jaune) 50%, var(--ff-marine2) 75%, var(--ff-jaune) 100%);
  background-size:200% 100%;
  clip-path:polygon(0 0, 100% 0, 98% 100%, 2% 100%);
  animation:ff-derive 14s linear infinite;
}
html:not(#_) .footer-v1 h4{
  color:var(--ff-jaune);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.92rem;
  position:relative;
  padding-bottom:.45rem;
}
html:not(#_) .footer-v1 h4::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:34px; height:3px;
  background:var(--ff-jaune);
  transform:skewX(-18deg);
}
html:not(#_) .footer-v1 p{color:#9fb0d3;}
html:not(#_) .footer-v1 a{
  color:#c9d6ef;
  transition:color .16s ease, transform .16s ease;
  display:inline-block;
}
html:not(#_) .footer-v1 a:hover, html:not(#_) .footer-v1 a:focus-visible{
  color:var(--ff-jaune-vif);
  transform:translateX(3px);
}
html:not(#_) .footer-bottom{
  border-top:1px solid rgba(255,204,0,.25);
  color:#7f8fb0;
}

/* --- Confort : on coupe tout mouvement pour qui le demande --- */
@media (prefers-reduced-motion: reduce){
  html:not(#_) .sidebar, html:not(#_) .mobile-guest-top, html:not(#_) .footer-v1::before{animation:none;}
  html:not(#_) .sb-link::before, html:not(#_) .sb-map-quick-link, html:not(#_) .mobile-guest-login, html:not(#_) .mobile-guest-cta-btn, html:not(#_) .footer-v1 a{transition: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__ */