/* =====================================================
   FOOTER GLOBAL — VPCE
===================================================== */

.zeb-footer{
  width:100%;

  margin:0;
  padding:48px 0 0;

  background:
    linear-gradient(
      180deg,
      #31420f 0%,
      #223006 100%
    );

  color:#fff;

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


/* =====================================================
   CONTENEUR PRINCIPAL
===================================================== */

.zeb-footer__inner{
  width:min(1180px,calc(100% - 40px));

  margin:0 auto;
  padding-bottom:38px;

  display:grid;
  grid-template-columns:1.35fr .85fr 1fr 1.1fr;
  align-items:start;
  gap:42px;
}


/* =====================================================
   TITRES
===================================================== */

.zeb-footer h3{
  margin:0 0 16px;

  color:#fff;

  font-size:13px;
  font-weight:700;
  line-height:1.3;

  letter-spacing:.08em;
  text-transform:uppercase;
}


/* =====================================================
   TEXTES ET LIENS
===================================================== */

.zeb-footer p,
.zeb-footer span,
.zeb-footer a{
  color:rgba(255,255,255,.76);

  font-size:14px;
  font-weight:400;
  line-height:1.65;

  text-decoration:none;
}

.zeb-footer p{
  margin-top:0;
}

.zeb-footer a{
  position:relative;

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

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

.zeb-footer a:hover,
.zeb-footer a:focus-visible{
  color:#d9bd73;

  transform:translateX(4px);
}

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


/* =====================================================
   IDENTITÉ
===================================================== */

.zeb-footer__brand p{
  max-width:360px;

  margin:0 0 12px;
}

.zeb-footer__brand span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:4px;
  padding:7px 13px;

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

  background:rgba(255,255,255,.05);

  color:rgba(255,255,255,.82);
}


/* =====================================================
   LISTES
===================================================== */

.zeb-footer ul{
  margin:0;
  padding:0;

  list-style:none;
}

.zeb-footer li{
  margin:0;
  padding:0;
}

.zeb-footer li + li{
  margin-top:8px;
}


/* =====================================================
   CONTACT
===================================================== */

.zeb-footer__contact p{
  margin:0 0 8px;
}


/* =====================================================
   BAS DU FOOTER
===================================================== */

.zeb-footer__bottom{
  width:100%;

  padding:16px 20px;

  border-top:1px solid rgba(255,255,255,.12);

  background:rgba(0,0,0,.14);

  text-align:center;
}

.zeb-footer__bottom p{
  margin:0;

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

  font-size:12px;
  font-weight:400;
  line-height:1.6;

  text-align:center;
}


/* =====================================================
   TABLETTE
===================================================== */

@media (max-width:980px){

  .zeb-footer{
    padding-top:42px;
  }

  .zeb-footer__inner{
    width:min(100% - 40px,900px);

    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:36px 30px;

    text-align:center;
  }

  .zeb-footer__inner > *{
    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
  }

  .zeb-footer__brand p{
    max-width:520px;

    text-align:center;
  }

  .zeb-footer ul{
    width:100%;

    text-align:center;
  }

  .zeb-footer li{
    display:flex;
    justify-content:center;
  }

  .zeb-footer__contact p{
    width:100%;

    text-align:center;
  }

  .zeb-footer a{
    justify-content:center;
  }

  .zeb-footer a:hover,
  .zeb-footer a:focus-visible{
    transform:translateY(-2px);
  }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:620px){

  .zeb-footer{
    padding-top:36px;
  }

  .zeb-footer__inner{
    width:min(100% - 28px,560px);

    grid-template-columns:1fr;
    gap:30px;

    padding-bottom:32px;

    text-align:center;
  }

  .zeb-footer__inner > *{
    width:100%;

    align-items:center;

    text-align:center;
  }

  .zeb-footer h3{
    margin-bottom:14px;

    font-size:12px;

    text-align:center;
  }

  .zeb-footer p,
  .zeb-footer span,
  .zeb-footer a{
    font-size:13px;

    text-align:center;
  }

  .zeb-footer__brand p{
    max-width:100%;
  }

  .zeb-footer__brand span{
    margin-inline:auto;
  }

  .zeb-footer ul{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .zeb-footer li{
    width:100%;

    justify-content:center;
  }

  .zeb-footer__contact{
    align-items:center;
  }

  .zeb-footer__contact p{
    text-align:center;
  }

  .zeb-footer__bottom{
    padding:15px 16px;
  }

  .zeb-footer__bottom p{
    font-size:11.5px;
  }
}


/* =====================================================
   TRÈS PETITS ÉCRANS
===================================================== */

@media (max-width:380px){

  .zeb-footer{
    padding-top:32px;
  }

  .zeb-footer__inner{
    width:calc(100% - 24px);
  }
}


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

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

  .zeb-footer a{
    transition:none !important;
  }
}