/* SéSé Wine & Beer · validated illustrated header
   Uses the real banner asset as the header on every pilot view. */

.sese-demo.sese-pilot .sese-header.sese-header{
  min-height:144px!important;
  padding:18px 28px 18px clamp(220px,22vw,330px)!important;
  grid-template-columns:164px minmax(0,1fr) 210px!important;
  gap:20px!important;
  background:#690d24 url('/CC_Wine_Beer_bandeau_seul_HD.webp?v=20260917-header2') center/100% 141% no-repeat!important;
  border-color:rgba(231,184,116,.24)!important;
  box-shadow:inset 0 -1px 0 rgba(255,228,190,.10),0 16px 34px rgba(62,8,24,.16)!important;
}

/* The artwork already contains the decorative grapes, gold curves and wine glass. */
.sese-demo.sese-pilot .sese-header.sese-header::before,
.sese-demo.sese-pilot .sese-header.sese-header::after{
  display:none!important;
  content:none!important;
}

/* Keep the complete logo visible and optically centred inside the white card. */
.sese-demo.sese-pilot .sese-header.sese-header .sese-brand-mark.sese-brand-mark{
  width:164px!important;
  height:92px!important;
  margin:0!important;
  padding:10px!important;
  justify-self:center!important;
  align-self:center!important;
  overflow:hidden!important;
  background:#fffaf4!important;
  transform:translateX(14px)!important;
}
.sese-demo.sese-pilot .sese-header.sese-header .sese-brand-mark img{
  width:88%!important;
  height:82%!important;
  display:block!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:8px!important;
  transform:translateY(1px)!important;
}

/* Bring the title block back toward the visual centre, as in the validated mock-up. */
.sese-demo.sese-pilot .sese-header.sese-header>div:first-child>div:last-child{
  text-align:center!important;
  align-items:center!important;
  justify-content:center!important;
  transform:translateX(-78px)!important;
}
.sese-demo.sese-pilot .sese-header.sese-header h1{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(30px,2.55vw,43px)!important;
  font-weight:700!important;
  line-height:1.02!important;
  letter-spacing:-.025em!important;
  color:#fff8e9!important;
  -webkit-text-fill-color:#fff8e9!important;
  text-shadow:0 2px 10px rgba(31,0,9,.32)!important;
}

/* Expense amount stays on the neutral zero baseline. */
.sese-pilot .sese-expense-form label:has(input[inputmode="numeric"]){position:relative!important}
.sese-pilot .sese-expense-form input[inputmode="numeric"]::placeholder{color:transparent!important;opacity:0!important}
.sese-pilot .sese-expense-form label:has(input[inputmode="numeric"]:placeholder-shown)::after{
  content:"0";
  position:absolute;
  left:13px;
  bottom:12px;
  color:#756467;
  font-size:14px;
  font-weight:400;
  line-height:1;
  pointer-events:none;
}

@media(max-width:1100px){
  .sese-demo.sese-pilot .sese-header.sese-header{
    min-height:116px!important;
    padding:14px 16px 14px clamp(128px,18vw,190px)!important;
    grid-template-columns:118px minmax(0,1fr) 132px!important;
    gap:12px!important;
    background-size:100% 141%!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header .sese-brand-mark.sese-brand-mark{
    width:112px!important;
    height:66px!important;
    padding:7px!important;
    transform:translateX(7px)!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header>div:first-child>div:last-child{
    transform:translateX(-36px)!important;
  }
}

@media(max-width:620px){
  .sese-demo.sese-pilot .sese-header.sese-header{
    width:100%!important;
    min-height:96px!important;
    padding:9px 8px 9px 58px!important;
    grid-template-columns:68px minmax(0,1fr) auto!important;
    gap:7px!important;
    background-color:#690d24!important;
    background-position:center 56%!important;
    background-size:auto 110%!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header .sese-brand-mark.sese-brand-mark{
    width:64px!important;
    height:46px!important;
    padding:5px!important;
    border-radius:10px!important;
    transform:none!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header .sese-brand-mark img{
    width:86%!important;
    height:80%!important;
    transform:none!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header>div:first-child>div:last-child{
    text-align:left!important;
    align-items:flex-start!important;
    transform:none!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header h1{
    font-size:clamp(17px,5.2vw,22px)!important;
    white-space:normal!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header .sese-kicker.sese-kicker{
    font-size:7px!important;
    letter-spacing:.07em!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header .sese-kicker::before,
  .sese-demo.sese-pilot .sese-header.sese-header .sese-kicker::after{
    display:none!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header>div:first-child>div:last-child>span{
    margin-top:4px!important;
    font-size:9px!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header .sese-language.sese-language{
    padding:3px!important;
    gap:1px!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header .sese-language button{
    min-width:29px!important;
    min-height:29px!important;
    padding:5px 6px!important;
    font-size:9px!important;
  }
}

@media(max-width:420px){
  .sese-demo.sese-pilot .sese-header.sese-header{
    padding-left:48px!important;
    grid-template-columns:58px minmax(0,1fr) auto!important;
    gap:5px!important;
    background-position:center 56%!important;
    background-size:auto 110%!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header .sese-brand-mark.sese-brand-mark{
    width:56px!important;
    height:42px!important;
    padding:4px!important;
  }
  .sese-demo.sese-pilot .sese-header.sese-header .sese-language button{
    min-width:27px!important;
    padding:5px!important;
  }
}