/* ===========

   HEADER / NAV

   =========== */



header {

  position: sticky;

  top: 0;

  inset-inline: 0;

  z-index: 2000;

  background: var(--white);

  border-bottom: 1px solid var(--line);

  /* padding: var(--space-16-30) 0; */

  padding: 1.25rem 0;

  opacity: 0;

  line-height: 1;

  transform: translateY(-20px);

  transition:

    opacity 0.6s cubic-bezier(.2, .7, .2, 1),

    transform 0.6s cubic-bezier(.2, .7, .2, 1);

}



header.is-visible {

  opacity: 1;

  transform: translateY(0);

}



.header__bar {

  display: flex;

  align-items: center;

  padding: 0 clamp(1.2rem, calc(12px + (25 - 12) * var(--vw-desktop-range)), 2.5rem) 0 clamp(1.5rem, calc(15px + (40 - 15) * var(--vw-desktop-range)), 4rem);

}



header .brand {

  max-width: clamp(9rem, calc(90px + (133 - 90) * var(--vw-desktop-range)), 13.3rem);

  width: 100%;

  margin-right: clamp(1.6rem, calc(16px + (38 - 16) * var(--vw-desktop-range)), 3.8rem);

  font-size: 1.8rem;

  letter-spacing: .2em;

  font-weight: 700;

}



header .brand img {

  width: 100%;

  height: auto;

}



nav.desktop-links {

  display: flex;

  gap: clamp(.4rem, calc(4px + (30 - 4) * var(--vw-desktop-range)), 3rem);

  font-size: var(--fs-nav--2);

}



nav.desktop-links a {

  font-size: var(--fs-nav--2);

}



nav.desktop-links a:hover {

  color: var(--lightblue);

}



.spacer {

  flex: 1;

}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.next-logo p:first-child {

  font-weight: 500;

  font-size: clamp(1.2rem, calc(8px + (30 - 8) * var(--vw-desktop-range)), 3rem);

  letter-spacing: 3px;

  line-height: clamp(3rem, 1vw, 4rem);

}



.next-logo p:last-child {

  font-weight: 400;

  font-size: clamp(1.2rem, calc(8px + (16 - 8) * var(--vw-desktop-range)), 1.6rem);

  line-height: clamp(2rem, 1vw, 2.4rem);

  margin-top: .2rem;

}



.hamburger {

  width: clamp(5.6rem, calc(56px + (80 - 56) * var(--vw-desktop-range)), 8rem);

  height: clamp(5.6rem, calc(56px + (80 - 56) * var(--vw-desktop-range)), 8rem);

  border: 1px solid var(--gray);

  background: #fff;

  display: grid;

  place-items: center;

  cursor: pointer;

  margin-left: clamp(1.5rem, calc(10px + (40 - 10) * var(--vw-desktop-range)), 4rem);

  transition: .8s;

}



.hamburger i {

  position: relative;

  display: block;

  width: clamp(1.6rem, calc(16px + (20 - 16) * var(--vw-desktop-range)), 2rem);

  height: .2rem;

  background: var(--black);

  transition: .5s;

}



.hamburger i::before,

.hamburger i::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  height: .2rem;

  background: var(--black);

}



.hamburger i::before {

  top: -.6rem;

  transition: .3s;

}



.hamburger i::after {

  top: .6rem;

  transition: .7s;

}



.hamburger:hover {

  border-color: var(--lightblue);

}



.hamburger:hover i,

.hamburger:hover i::before,

.hamburger:hover i::after {

  background: var(--lightblue);

}



header .brand,

header .next-logo,

header .desktop-links a {

  opacity: 0;

  transform: translateY(-15px);

  transition:

    opacity 0.6s cubic-bezier(.2, .7, .2, 1),

    transform 0.6s cubic-bezier(.2, .7, .2, 1);

}

header .brand {

  transform: none;

}



header.is-playing .brand {
  opacity: 1;
  transition-delay: 0.15s;
}

header.is-playing .next-logo {
  opacity: 1;
  transition-delay: 0.25s;
}



/* les liens du menu (stagger automatique) */

header.is-playing .desktop-links a {

  opacity: 1;

  transform: translateY(0);

}



header .desktop-links a:nth-child(1) {
  transition-delay: 0.35s;
}

header .desktop-links a:nth-child(2) {
  transition-delay: 0.40s;
}

header .desktop-links a:nth-child(3) {
  transition-delay: 0.45s;
}

header .desktop-links a:nth-child(4) {
  transition-delay: 0.50s;
}

header .desktop-links a:nth-child(5) {
  transition-delay: 0.55s;
}

header .desktop-links a:nth-child(6) {
  transition-delay: 0.60s;
}

header .desktop-links a:nth-child(7) {
  transition-delay: 0.65s;
}



/* ===========

   FOOTER

   =========== */



footer {

  background: var(--black);

  color: var(--white);

  width: 100%;

}



footer a,

footer span,

footer p {

  color: var(--white);

  transition: .3s;

}



.top-footer a:hover {

  color: var(--blue);

  background: var(--blue);

}



.top-footer .flex {

  display: flex;

  width: 100%;

}



.top-footer span:not(.ctn) {

  font-weight: 600;

  line-height: clamp(3.6rem, calc(36px + (60 - 36) * var(--vw-desktop-range)), 6rem);

  letter-spacing: clamp(0.2rem, calc(2px + (5 - 2) * var(--vw-desktop-range)), 0.5rem);

}



.top-footer span:not(.ctn):first-of-type {

  font-size: clamp(2.6rem, calc(26px + (50 - 26) * var(--vw-desktop-range)), 5rem);

  position: relative;

}

.top-footer span:not(.ctn):first-of-type small {

  position: absolute;

  left: 100%;

  top: clamp(1rem, calc(10px + (0) * var(--vw-desktop-range)), 1.5rem);

  font-weight: 400;

  font-size: clamp(1.6rem, calc(16px + (20 - 16) * var(--vw-desktop-range)), 2rem);

  line-height: clamp(3rem, calc(30px + (40 - 30) * var(--vw-desktop-range)), 4rem);

  width: clamp(1rem, calc(150px + (180 - 150) * var(--vw-desktop-range)), 18rem);

}

.top-footer small {

  font-weight: 400;

  font-size: clamp(1.6rem, calc(16px + (20 - 16) * var(--vw-desktop-range)), 2rem);

  line-height: clamp(3rem, calc(30px + (40 - 30) * var(--vw-desktop-range)), 4rem);

}



.top-footer span:not(.ctn):last-of-type {

  font-size: clamp(2.2rem, calc(22px + (36 - 22) * var(--vw-desktop-range)), 3.6rem);

}



.top-footer span.ctn {

  display: flex;

  flex-direction: column;

  font-size: clamp(2.4rem, calc(24px + (40 - 24) * var(--vw-desktop-range)), 4rem);

  line-height: clamp(3.6rem, calc(36px + (60 - 36) * var(--vw-desktop-range)), 6rem);

  letter-spacing: 0;

}



.top-footer .flex a {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  margin: auto;

  height: clamp(14rem, calc(140px + (240 - 140) * var(--vw-desktop-range)), 24rem);

  gap: clamp(1.6rem, calc(16px + (30 - 16) * var(--vw-desktop-range)), 3rem);

  border-left: 1px solid var(--white);

}

.top-footer .flex a:hover svg {
  filter: brightness(0) invert(1);
}

.top-footer .flex a:first-of-type {

  background: var(--blue);
  border-left: none;

}

.top-footer .flex a:first-of-type:hover {

  background: var(--black);

}

.top-footer .flex a:first-of-type:hover span,

.top-footer .flex a:first-of-type:hover small {

  color: var(--lightblue);

}

.middle-footer {

  border-top: 1px solid var(--white);

  padding:

    clamp(4rem, calc(40px + (80 - 40) * var(--vw-desktop-range)), 8rem) 0 clamp(5rem, calc(50px + (94 - 50) * var(--vw-desktop-range)), 9.4rem);

  margin: auto;

  border-bottom: 1px solid var(--white);

}



.middle-footer .container-ft {

  width: min(100%, var(--ft-container));

  margin-inline: auto;

  padding-inline: var(--gutter);

}



.middle-footer .logo-ft {

  display: flex;

  justify-content: center;

  margin: 0 0 2rem 0;

}



.address {

  font-weight: 400;

  font-size: clamp(1.6rem, calc(16px + (20 - 16) * var(--vw-desktop-range)), 2rem);

  line-height: clamp(3rem, calc(30px + (40 - 30) * var(--vw-desktop-range)), 4rem);

  letter-spacing: 0;

}



.address-center {

  text-align: center;

  margin: 0 0 1rem 0;

}



.contact-ft {

  display: flex;

  justify-content: center;

  gap: clamp(1.6rem, calc(16px + (37 - 16) * var(--vw-desktop-range)), 3.7rem);

  margin: 0 0 clamp(3.2rem, calc(32px + (60 - 32) * var(--vw-desktop-range)), 6rem) 0;

}



.contact-ft span {

  font-weight: 500;

  font-size: clamp(2rem, calc(20px + (30 - 20) * var(--vw-desktop-range)), 3rem);

  line-height: clamp(3rem, calc(30px + (40 - 30) * var(--vw-desktop-range)), 4rem);

  letter-spacing: clamp(0.2rem, calc(2px + (5 - 2) * var(--vw-desktop-range)), 0.5rem);

}



.other-addresses {

  display: flex;

  justify-content: center;

  margin: 0 0 clamp(4rem, calc(40px + (80 - 40) * var(--vw-desktop-range)), 8rem) 0;

}



.other-addresses p {

  padding: 0 clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem);

  font-size: clamp(1.6rem, calc(16px + (20 - 16) * var(--vw-desktop-range)), 2rem);

  line-height: clamp(3rem, calc(30px + (40 - 30) * var(--vw-desktop-range)), 4rem);

  font-weight: 400;

}



.other-addresses p:not(:first-of-type) {

  border-left: 1px solid var(--white);

}



.other-addresses p:first-of-type {
  padding-left: 0;
}

.other-addresses p:last-of-type {
  padding-right: 0;
}



/* NAV FOOTER */



.nav-ft {

  display: grid;

  justify-content: center;

  grid-template-columns: repeat(8, 1fr);

  gap: clamp(2rem, 3.333vw, 4rem);

  max-width: 144rem;

  margin: 0 auto;

  width: 95%;


  /* grid-template-columns:

    clamp(126px, calc(126px + (182 - 126) * var(--vw-desktop-range)), 182px) clamp(164px, calc(164px + (263 - 164) * var(--vw-desktop-range)), 263px) clamp(131px, calc(131px + (210 - 131) * var(--vw-desktop-range)), 210px) clamp(138px, calc(138px + (220 - 138) * var(--vw-desktop-range)), 220px) clamp(138px, calc(138px + (220 - 138) * var(--vw-desktop-range)), 220px) clamp(106px, calc(106px + (170 - 106) * var(--vw-desktop-range)), 170px) clamp(106px, calc(106px + (170 - 106) * var(--vw-desktop-range)), 170px) clamp(106px, calc(106px + (170 - 106) * var(--vw-desktop-range)), 170px); */

}



.nav-item,

.nav-item a {

  display: flex;

  flex-direction: column;

  align-items: center;

  font-size: clamp(1.6rem, calc(16px + (20 - 16) * var(--vw-desktop-range)), 2rem);

  line-height: clamp(2.8rem, calc(28px + (36 - 28) * var(--vw-desktop-range)), 3.6rem);

  letter-spacing: 0;

  transition: .3s;

}



.nav-item a:hover {

  color: var(--lightblue);

}



/* .nav-item a svg {

  margin: 0 0 clamp(1.2rem, calc(12px + (24 - 12) * var(--vw-desktop-range)), 2.4rem) 0;

} */

.nav-item a img {

  margin: 0 0 clamp(1.2rem, calc(12px + (24 - 12) * var(--vw-desktop-range)), 2.4rem) 0;
  width: calc(120 * 100vw / 1920);
  /* height: calc(120 * 100vw / 1920); */
  height: auto;
}



.nav-item a+p {

  margin: clamp(4rem, calc(40px + (75 - 40) * var(--vw-desktop-range)), 7.5rem) 0 0 0;

  position: relative;

  z-index: 20;

}



.nav-item a+p a {

  font-size: clamp(1.4rem, calc(14px + (18 - 14) * var(--vw-desktop-range)), 1.8rem);

  line-height: clamp(3.2rem, calc(32px + (40 - 32) * var(--vw-desktop-range)), 4rem);

  letter-spacing: 0;

  font-weight: 400;

  position: relative;

  z-index: 20;

}



.bottom-footer {

  padding:

    clamp(4rem, calc(40px + (70 - 40) * var(--vw-desktop-range)), 7rem) 0 clamp(5rem, calc(50px + (80 - 50) * var(--vw-desktop-range)), 8rem);

  display: flex;

  margin: auto;

  justify-content: center;

  align-items: center;

  gap: clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem);

}



.copyright {

  background: var(--lightgray);

}



.copyright div {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:

    clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem) clamp(1.2rem, calc(12px + (20 - 12) * var(--vw-desktop-range)), 2rem);

}



.copyright div p,

.copyright div a {

  color: var(--black);

  font-size: 1.6rem;

}





/* Desktop only */

@media screen and (min-width: 1025px) {

  .sp-only {

    display: none !important;

  }

}



/* Mobile / tablette ≤ 1025px */

@media screen and (max-width: 1025px) {



  .pc-only {

    display: none !important;

  }



  header {

    height: calc(60 * 100vw / 390);

    padding: 0;

  }



  .header__bar {

    height: calc(60 * 100vw / 390);

    padding: calc(10 * 100vw / 390);

    position: relative;

  }



  .hamburger {

    height: calc(40 * 100vw / 390);

    width: calc(40 * 100vw / 390);

    margin-left: 0;

  }



  .brand {

    max-width: calc(67 * 100vw / 390);

    margin-right: 0;

    display: flex;



  }

  header .brand {
    margin-right: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }



  nav.desktop-links {

    display: none;

  }



  .next-logo {

    display: none;

  }



  /* Footer responsive */



  .other-addresses {

    flex-direction: column;

  }



  .other-addresses p:not(:first-of-type) {

    border-bottom: 1px solid var(--white);

    border-left: none;

    padding: 3rem 2.5rem;

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }



  .other-addresses p:last-of-type {

    border-bottom: none;

  }



  .other-addresses p:first-of-type {

    border-bottom: 1px solid var(--white);

    padding: 3rem 2.5rem;

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }



  .middle-footer {

    padding: 4rem 0 5rem 0;

  }



  .middle-footer .logo-ft {

    height: 10rem;

    width: 10rem;

    margin: 0 auto 1rem;

  }



  .middle-footer .logo-ft svg {

    height: 10rem;

  }



  .contact-ft {

    flex-direction: column;

    text-align: center;

    gap: 0;

    margin: 0 0 1rem 0;

  }



  .contact-ft span {

    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }



  p.address {

    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }



  .nav-ft {

    display: grid;

    grid-template-columns: 1fr 1fr;

  }



  .nav-item:not(.nav-item-sp) a {
    flex-direction: row;
    align-items: center;
    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);
    justify-content: flex-start;
    gap: 2rem;
    max-width: 28rem;
    width: 100%;
    height: 4rem;
    margin: 3rem auto 0.5em;
    line-height: 3rem;
  }



  .nav-item:not(.nav-item-sp) a+p {

    margin: 0 auto 3rem;

    width: 100%;

    max-width: 28rem;

    padding-left: 8rem;
  }



  .nav-item:not(.nav-item-sp) a+p a {

    margin: 0 auto 0;

  }



  .nav-item a+p {

    margin: 0;

  }



  /* .nav-item a svg {

    max-width: 4rem;

    margin: 0;

  } */

  .nav-item a img {
    width: 6rem;
    margin: 0;
    /* width: calc(260 * 100vw / 1920); */
    /* height: calc(260 * 100vw / 1920); */
  }



  .nav-item-sp {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 3rem;

    flex-direction: row;

    margin: auto;

  }



  .nav-item-sp p {

    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

    font-weight: 400;

    text-align: left;

  }



  .nav-item-sp a {

    text-align: left;

    display: block;

    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

  }



  .top-footer .flex a {

    height: 10rem;

    gap: 1rem;

  }



  .top-footer .flex a:first-of-type {

    gap: .5rem;

    padding: 5rem 0;

  }



  .top-footer .flex a svg {

    height: 2.4rem;

    width: fit-content;

  }



  .top-footer span.ctn {

    font-size: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    line-height: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    letter-spacing: 0;

    gap: .7rem;

  }



  .top-footer span:not(.ctn) {

    font-size: clamp(1.17rem, calc(13 * var(--vw390)), 1.95rem);

    line-height: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    letter-spacing: 0;

  }



  .top-footer span:not(.ctn):first-of-type {

    font-size: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    line-height: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    letter-spacing: 0;

  }



  .top-footer span:not(.ctn):last-of-type {

    font-size: clamp(1.17rem, calc(13 * var(--vw390)), 1.95rem);

    line-height: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    letter-spacing: 0;

  }



  .bottom-footer {

    padding: 3rem 0;

    gap: 2.5rem;

  }



  .bottom-footer a svg {

    max-width: 3rem;

    height: 3rem;

    width: 100%;

  }



  .bottom-footer a:last-child svg {

    max-width: 8.1rem;

    height: auto;

  }



  .copyright .container {

    display: flex;

    flex-direction: column;

    gap: 1.2rem;

    font-size: clamp(1.08rem, calc(12 * var(--vw390)), 1.8rem);

    line-height: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    padding: 2rem 0;

  }

}



@media screen and (max-width: 1240px) {

  .top-footer span:not(.ctn):first-of-type small {

    font-size: clamp(1.1rem, calc(14 * var(--vw390)), 1.8rem);

    line-height: clamp(1.1rem, calc(14 * var(--vw390)), 1.8rem);

    letter-spacing: 0;

    margin-top: 0.7rem;

    display: block;

    position: static;

  }

}



/* Nav footer en 1 colonne sur très petit écran */

@media screen and (max-width: 1024px) {

  .nav-ft {

    grid-template-columns: 1fr;

  }

  .top-footer .flex a {
    flex-direction: column;
    height: auto;
    gap: 2rem;
    margin: 0;
    justify-content: flex-start;
    border-left: none;
  }

  .top-footer .flex a:first-of-type {
    padding: 2rem 0;
    gap: 2rem;
    border-right: 1px solid white;
  }

  .top-footer .flex a:last-of-type {
    padding-top: 2rem;
  }

  .top-footer a:last-of-type p {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .top-footer .flex a svg {
    height: 4rem;
    width: fit-content;
  }


}

@media screen and (max-width: 480px) {
  .nav-item:not(.nav-item-sp) a {
    max-width: 22rem;
  }

  .nav-item:not(.nav-item-sp) a+p {
    max-width: 22rem;
  }
}