/* =====================================================
   ZEB SIDEBAR — PANNEAU LATÉRAL
   Styles complets chargés en différé

   Le CSS global contient déjà :
   - la position initiale du panneau ;
   - sa largeur mobile ;
   - son état masqué ;
   - l’état initial de l’overlay ;
   - le blocage du scroll du body.
===================================================== */


/* =====================================================
   OVERLAY
===================================================== */

.zeb-side-overlay{
  background:rgba(10,15,3,.42);

  transition:
    opacity .30s ease,
    visibility .30s ease;
}

body.zeb-sidebar-open .zeb-side-overlay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


/* =====================================================
   PANNEAU SIDEBAR
===================================================== */

.zeb-side{
  color:#fff;

  font-family:'Manrope',Arial,sans-serif;

  background:
    radial-gradient(
      circle at 16% 8%,
      rgba(217,189,115,.14),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #31420f 0%,
      #223006 58%,
      #172104 100%
    );

  box-shadow:0 24px 64px rgba(0,0,0,.30);

  overflow-x:hidden;
  overflow-y:auto;

  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;
  -ms-overflow-style:none;

  will-change:transform;

  transition:
    transform .48s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .48s;
}

body.zeb-sidebar-open .zeb-side{
  visibility:visible;

  transform:translate3d(0,0,0);

  transition-delay:0s;
}


/* =====================================================
   BARRE DE DÉFILEMENT MASQUÉE
===================================================== */

.zeb-side::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.zeb-side::-webkit-scrollbar-track,
.zeb-side::-webkit-scrollbar-thumb{
  display:none;
}


/* =====================================================
   EN-TÊTE DE LA SIDEBAR
===================================================== */

.zeb-side__head{
  min-height:130px;

  padding:32px 24px 26px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;

  border-bottom:1px solid rgba(255,255,255,.10);
}

.zeb-side__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;

  margin-bottom:13px;

  color:#d9bd73;

  font-size:9.5px;
  font-weight:800;
  line-height:1;
  letter-spacing:.18em;

  text-transform:uppercase;
}

.zeb-side__eyebrow::before{
  content:"";

  width:28px;
  height:1px;
  flex:0 0 28px;

  background:#d9bd73;
}

.zeb-side h2{
  margin:0;

  color:#fff;

  font-size:32px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.05em;
}

.zeb-side__close{
  width:34px;
  height:34px;
  flex:0 0 34px;

  display:grid;
  place-items:center;

  margin:0;
  padding:0;

  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;

  background:rgba(255,255,255,.07);
  color:#fff;

  cursor:pointer;

  font-size:22px;
  line-height:1;

  transition:
    background-color .25s ease,
    transform .25s ease;
}

.zeb-side__close:hover,
.zeb-side__close:focus-visible{
  background:rgba(255,255,255,.13);
  transform:rotate(90deg);
}

.zeb-side__close:focus-visible{
  outline:2px solid #d9bd73;
  outline-offset:3px;
}


/* =====================================================
   NAVIGATION
===================================================== */

.zeb-side__nav{
  padding:32px 24px 30px;
}

.zeb-side__group{
  padding:0 0 28px;

  border-bottom:1px solid rgba(255,255,255,.10);

  opacity:0;
  transform:translate3d(-18px,0,0);
}

.zeb-side__group + .zeb-side__group{
  margin-top:28px;
}

.zeb-side__group h3{
  margin:0 0 20px;

  color:#d9bd73;

  font-size:10px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.18em;

  text-transform:uppercase;
}

.zeb-side__group a{
  position:relative;

  display:block;

  width:max-content;
  max-width:100%;

  padding:8px 0;

  color:rgba(255,255,255,.88);

  text-decoration:none;

  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.01em;

  opacity:0;
  transform:translate3d(-10px,0,0);

  transition:
    color .22s ease,
    transform .22s ease;
}

.zeb-side__group a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:5px;

  width:0;
  height:1px;

  background:#d9bd73;

  transition:width .28s ease;
}

.zeb-side__group a:hover,
.zeb-side__group a:focus-visible{
  color:#fff;
  transform:translate3d(4px,0,0);
}

.zeb-side__group a:hover::after,
.zeb-side__group a:focus-visible::after{
  width:100%;
}

.zeb-side__group a:focus-visible{
  outline:2px solid #d9bd73;
  outline-offset:4px;
}


/* =====================================================
   BOUTON CTA
===================================================== */

.zeb-side__cta{
  width:100%;
  min-height:52px;

  margin-top:28px;
  padding:13px 22px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  color:#223006;

  text-decoration:none;

  font-size:11px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.12em;

  text-transform:uppercase;

  box-shadow:0 16px 36px rgba(0,0,0,.16);

  opacity:0;
  transform:translate3d(0,14px,0);

  transition:
    background-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

.zeb-side__cta:hover,
.zeb-side__cta:focus-visible{
  background:#d9bd73;
  color:#172104;

  transform:translate3d(0,-2px,0);
}

.zeb-side__cta:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}


/* =====================================================
   ANIMATIONS D’OUVERTURE
===================================================== */

body.zeb-sidebar-open .zeb-side__group{
  animation:
    zebSideItem
    .46s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(1){
  animation-delay:.10s;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(2){
  animation-delay:.17s;
}

body.zeb-sidebar-open .zeb-side__group a{
  animation:
    zebSideLink
    .34s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(1) a:nth-of-type(1){
  animation-delay:.16s;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(1) a:nth-of-type(2){
  animation-delay:.20s;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(1) a:nth-of-type(3){
  animation-delay:.24s;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(1) a:nth-of-type(4){
  animation-delay:.28s;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(1) a:nth-of-type(5){
  animation-delay:.32s;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(2) a:nth-of-type(1){
  animation-delay:.22s;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(2) a:nth-of-type(2){
  animation-delay:.26s;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(2) a:nth-of-type(3){
  animation-delay:.30s;
}

body.zeb-sidebar-open .zeb-side__group:nth-child(2) a:nth-of-type(4){
  animation-delay:.34s;
}

body.zeb-sidebar-open .zeb-side__cta{
  animation:
    zebSideCta
    .38s
    cubic-bezier(.22,1,.36,1)
    .36s
    forwards;
}

@keyframes zebSideItem{
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes zebSideLink{
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes zebSideCta{
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}


/* =====================================================
   TABLETTE ET DESKTOP
===================================================== */

@media (min-width:720px){

  .zeb-side{
    width:min(360px,86vw);
  }

  .zeb-side__head{
    min-height:138px;
    padding:34px 28px 28px;
  }

  .zeb-side__nav{
    padding:34px 28px;
  }

  .zeb-side h2{
    font-size:34px;
  }

  .zeb-side__group{
    padding-bottom:30px;
  }

  .zeb-side__group a{
    font-size:15px;
  }
}


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

@media (prefers-reduced-motion:reduce){

  .zeb-side,
  .zeb-side-overlay,
  .zeb-side__close,
  .zeb-side__group,
  .zeb-side__group a,
  .zeb-side__cta{
    transition:none !important;
    animation:none !important;
  }

  body.zeb-sidebar-open .zeb-side__group,
  body.zeb-sidebar-open .zeb-side__group a,
  body.zeb-sidebar-open .zeb-side__cta{
    opacity:1;
    transform:none;
  }
}