/* =========================================================
   SPIRALÉE 4.3.20 — LOGO OFFICIEL TRANSPARENT
   ========================================================= */

/* One real transparent lockup everywhere. */
.sp-header .sp-brand{
  width:238px!important;
  min-width:238px!important;
  height:104px!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  background:
    url('../images/brand/spiralee-logo-officiel-v4322.png')
    center / contain no-repeat!important;
  font-size:0!important;
  line-height:0!important;
}
.sp-header .sp-brand > *{
  opacity:0!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Footer: no black image rectangle, actual transparent logo. */
.sp-footer .spiralee-brand{
  width:285px!important;
  max-width:100%!important;
  height:165px!important;
  margin:0 0 12px!important;
  padding:0!important;
  display:block!important;
  background:
    url('../images/brand/spiralee-logo-officiel-v4322.png')
    left center / contain no-repeat!important;
}
.sp-footer .spiralee-brand > *{
  display:none!important;
}
.sp-footer .sp-footer-brand > p{
  max-width:380px!important;
  margin-top:0!important;
}
.sp-footer .sp-footer-spiral,
.sp-footer .spiralee-logo-text,
.sp-footer .spiralee-logo-paris{
  display:none!important;
}

/* Avoid inherited opacity from old theme branding. */
.sp-header .sp-brand,
.sp-footer .spiralee-brand{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

@media(max-width:980px){
  .sp-header .sp-brand{
    width:210px!important;
    min-width:210px!important;
    height:92px!important;
  }
}

@media(max-width:640px){
  .sp-header .sp-brand{
    width:174px!important;
    min-width:174px!important;
    height:76px!important;
    justify-self:center!important;
  }

  .sp-footer .spiralee-brand{
    width:245px!important;
    height:142px!important;
    background-position:left center!important;
  }
}


/* =========================================================
   SPIRALÉE 4.4.8 — VRAI FIX LOGO MOBILE
   Le logo du header est un background sur .sp-brand, pas un <img>.
   ========================================================= */
@media(max-width:640px){
  .sp-header .sp-brand{
    width:148px!important;
    min-width:148px!important;
    height:58px!important;
    max-height:58px!important;
    margin:-4px auto 0!important;
    padding:0!important;
    align-self:center!important;
    justify-self:center!important;
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    transform:none!important;
    overflow:hidden!important;
  }
}