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

   HEADER

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



.op-header {

  position: sticky;

  top: 0;

  z-index: 50;

  background-color: var(--color-white);

  /* border-bottom: 1px solid #e4e7eb; */

}



.op-header__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 10.8rem;

  width: 100%;

  max-width: var(--container-width);

  padding-left: 4rem;

  padding-right: 3rem;

  margin-left: auto;

  margin-right: auto;

}



.op-header__logo img {

  height: 6.8rem;

  display: block;

  transition: .3s;

}

.op-header__logo img:hover {

  opacity: 0.65;

}



.op-header__nav {

  flex: 1 0 0;

  justify-items: flex-end;

  margin-right: 3rem;

  display: flex;
  justify-content: flex-end;
}



.op-header__nav ul {

  display: flex;

  gap: 2.4rem;

  list-style: none;

  margin: 0;

  padding: 0;

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

  font-weight: 400;

}



.op-header__nav a {

  text-decoration: none;

  color: #111111;

  position: relative;

}



.op-header__nav a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -4px;

  width: 0;

  height: 2px;

  background-color: var(--color-primary-light);

  transition: width 0.2s ease;

}



.op-header__nav a:hover {

  color: var(--color-primary-light);

}

.op-header__nav a:hover::after {

  width: 100%;

}



.op-header__cta-btn {

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

  position: relative;

  height: 5.6rem;

  width: 18.8rem;

  gap: 1.2rem;

  padding: 0;

}

.op-btn.op-header__cta-btn svg {

  position: static;

  inset: auto auto auto auto;

  transform: none;

  z-index: 20;

  stroke: var(--color-white);

  transition: .3s;

}

.op-btn.op-header__cta-btn:hover svg {

  stroke: var(--color-primary-light);

}



/* Header CTA dans la nav (mobile) */

.op-header__nav .op-cta__actions {

  display: none;

}



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

   RESPONSIVE HEADER

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



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

  .op-header__inner {

    padding-left: 1rem;

    padding-right: 1rem;

  }

  .op-header__nav ul {

    gap: 1rem;

  }

  .op-header__logo img {

    max-height: 4.8rem;

  }

  .op-header__cta-btn {

    height: 4.6rem;

    width: 15.8rem;

  }

}



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

  .sp-only {

    display: none !important;

  }

}



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

  .pc-only {

    display: none !important;

  }



  .op-header {

    width: 100%;

    position: fixed;

  }



  .op-header__inner {

    padding: 0;

    padding-left: 1rem;

    height: 6rem;

  }



  .op-header__nav {
    flex-direction: column;
    justify-content: flex-start;
  }



  .op-header__cta {

    height: 100%;

    width: 9.1rem;

    margin-left: auto;

  }



    .op-header__cta-btn {

        width: 9.1rem;

    }



  .op-header__cta a {

    display: flex;

    flex-direction: column;

    height: 100%;

    font-size: 1.2rem;

  }



  .op-header__cta svg {

    width: 2.3rem;

    height: 1.5rem;

  }



  .op-header__hamburger {

    width: 6rem;

    display: flex;

    align-items: center;

    position: relative;

    justify-content: center;

    background: #F0F3F7;

    height: 100%;

  }



  .op-header__hamburger span {

    width: 2.6rem;

    background: var(--color-primary-text);

    height: 0.1rem;

    position: absolute;

    inset: 50% auto auto 50%;

    transform: translateX(-50%);

    transition: .3s;

  }



  .op-header__hamburger span:first-of-type {

    transform: translate(-50%, -0.8rem);

    transition: .3s;

  }



  .op-header__hamburger span:last-of-type {

    transform: translate(-50%, 0.8rem);

    transition: .3s;

  }



  .nav-is-open .op-header__hamburger span {

    opacity: 0;

  }



  .nav-is-open .op-header__hamburger span:first-of-type {

    opacity: 1;

    transform: translate(-50%, 0) rotateZ(-45deg);

  }



  .nav-is-open .op-header__hamburger span:last-of-type {

    opacity: 1;

    transform: translate(-50%, 0) rotateZ(45deg);

  }



  .op-header__nav {

    position: absolute;

    left: 100%;

    transition: .3s;

    height: 100vh;

    padding: 4rem 3rem 0;

    background: var(--color-white);

    margin-top: 6rem;

    width: 100%;

    top: 0;

  }



  .nav-is-open .op-header__nav {

    left: 0;

  }



  .nav-is-open .op-header__nav ul {

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 0;

  }



  .op-header__logo img {

    max-height: 4.8rem;

  }



  .nav-is-open .op-header__nav ul li a {

    height: 5rem;

    padding: 0 1rem;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    border-bottom: 1px solid #D5D8DF;

    position: relative;

    width: 100%;

    font-size: 1.6rem;

  }



  .nav-is-open .op-header__nav ul li:first-of-type a {

    border-top: 1px solid #D5D8DF;

  }



  .nav-is-open .op-header__nav ul li a:hover::after {

    content: "";

    position: absolute;

    inset: 50% 0 auto auto;

    transform: translate(-1rem, -50%);

    background: url(../img/common/chevron_right_blue.svg) no-repeat;

    background-size: contain;

    width: 0.5rem;

    height: 1rem;

  }



  .nav-is-open .op-header__nav ul li a::after {

    content: "";

    position: absolute;

    inset: 50% 0 auto auto;

    transform: translate(-1rem, -50%);

    background: url(../img/common/chevron_right_blue.svg) no-repeat;

    background-size: contain;

    width: 0.5rem;

    height: 1rem;

  }



  .nav-is-open .op-header__nav .op-cta__tel-number {

    margin-top: 5rem;

    color: var(--color-primary-text);

  }



  .op-header__nav .op-cta__actions {

    display: flex;

  }



  .nav-is-open .op-header__nav .op-cta__actions {

    align-items: center;

    width: 100%;

  }



  .nav-is-open .op-header__nav a.op-cta__mail,

  .nav-is-open .op-header__nav a.op-cta__mail svg {

    color: var(--color-white);

    stroke: var(--color-white);

  }



  .nav-is-open .op-header__nav a.op-cta__mail::after {

    content: none;

  }



  .nav-is-open .op-header__nav a.op-cta__mail:hover {

    color: var(--color-white);

    background: var(--color-primary-light);

  }

}



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

   HEADER : ANIM SANS JS

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



@keyframes op-header-fade-down {

  0% {

    opacity: 0;

    transform: translateY(-20px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Tous les enfants directs du header */

.op-header__inner > * {

  opacity: 0;

  transform: translateY(-20px);

  animation: op-header-fade-down 0.45s ease-out forwards;

}



/* Délais individuels (logo → nav → CTA → hamburger) */

.op-header__inner > *:nth-child(1) { animation-delay: 0.05s; }

.op-header__inner > *:nth-child(2) { animation-delay: 0.13s; }

.op-header__inner > *:nth-child(3) { animation-delay: 0.21s; }

.op-header__inner > *:nth-child(4) { animation-delay: 0.29s; }



/* Animation dans le menu (chaque <li>) */

.op-header__nav ul li {

  opacity: 0;

  transform: translateY(-15px);

  animation: op-header-fade-down 0.45s ease-out forwards;

}



.op-header__nav ul li:nth-child(1) { animation-delay: 0.20s; }

.op-header__nav ul li:nth-child(2) { animation-delay: 0.26s; }

.op-header__nav ul li:nth-child(3) { animation-delay: 0.32s; }

.op-header__nav ul li:nth-child(4) { animation-delay: 0.38s; }

.op-header__nav ul li:nth-child(5) { animation-delay: 0.44s; }

.op-header__nav ul li:nth-child(6) { animation-delay: 0.5s; }

.op-header__nav ul li:nth-child(7) { animation-delay: 0.54s; }

.op-header__nav ul li:nth-child(8) { animation-delay: 0.58s; }