/* =========================================================
   GHET CREATIVE V3 — PROGRAM ACCORDION
========================================================= */

.gcv3-program {
  --gcv3-height: 400px;
  --gcv3-closed: 66px;

  --gcv3-green: #3dffa0;
  /*--gcv3-orange: #ff6e31;*/
  --gcv3-orange: #d45a20;
  --gcv3-dark-brown: #33160a;
  --gcv3-brown: #5a260f;
  --gcv3-dark: #07041a;

  /* plus lent + plus fluide, effet Figma */
  --gcv3-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gcv3-ease-page: cubic-bezier(0.19, 1, 0.22, 1);
  --gcv3-duration: 1.05s;

  width: min(100%, 1120px);
  height: var(--gcv3-height);
  margin: 0 auto;

  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;

  overflow: hidden;
  background: transparent;
}

/* =========================
   PANEL
========================= */

.gcv3-program__panel {
  position: relative;
  isolation: isolate;

  height: 100%;
  flex: 0 0 var(--gcv3-closed);
  min-width: var(--gcv3-closed);

  overflow: hidden;
  cursor: pointer;

  border: 1px solid rgba(61, 255, 160, 0.08);

  transform: translateX(0) scaleX(1);
  transform-origin: right center;

  transition:
    flex-basis var(--gcv3-duration) var(--gcv3-ease-page),
    min-width var(--gcv3-duration) var(--gcv3-ease-page),
    transform var(--gcv3-duration) var(--gcv3-ease-page),
    box-shadow 0.55s ease,
    border-color 0.55s ease,
    filter 0.55s ease;

  will-change: flex-basis, min-width, transform;
}

.gcv3-program__panel.is-active {
  flex: 1 1 auto;
  min-width: 0;

  transform: translateX(0) scaleX(1);

  border-color: rgba(61, 255, 160, 0.18);
  box-shadow: 0 0 18px rgba(61, 255, 160, 0.12);
}

.gcv3-program__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 18%,
    rgba(0, 0, 0, 0) 46%
  );

  opacity: 0;
  transform: translateX(-42%) skewX(-8deg);
  transition:
    opacity 0.45s ease,
    transform 1.05s var(--gcv3-ease-page);
}

.gcv3-program__panel.is-active::after {
  opacity: 1;
  transform: translateX(0) skewX(0deg);
  animation: gcv3PageSweep 1.05s var(--gcv3-ease-page) both;
}

/* =========================
   BACKGROUND
========================= */

.gcv3-program__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--gcv3-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.01);
  transition:
    opacity 0.42s ease,
    transform 0.85s var(--gcv3-ease),
    filter 0.42s ease;
  will-change: opacity, transform;
}
.gcv3-program__panel.is-active .gcv3-program__bg {
  opacity: 1;
  transform: scale(1.035);
}
.gcv3-program__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(5, 8, 16, 0.88) 0%,
    rgba(5, 8, 16, 0.58) 34%,
    rgba(5, 8, 16, 0.24) 66%,
    rgba(5, 8, 16, 0.08) 100%
  );
  transition: opacity 0.45s ease;
}
.gcv3-program__panel.is-active .gcv3-program__overlay {
  opacity: 1;
}

/* =========================
   CONTENT
========================= */

.gcv3-program__content {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 34px calc(var(--gcv3-closed) + 32px) 34px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
  transition:
    opacity 0.38s ease 0.18s,
    transform 0.58s var(--gcv3-ease) 0.18s;
  will-change: opacity, transform;
}
.gcv3-program__panel.is-active .gcv3-program__content {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.gcv3-program__main {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 28px;
  margin-top: 0;
}
.gcv3-program__panel.is-active .gcv3-program__main {
  animation: gcv3ContentIn 0.58s var(--gcv3-ease) both;
}

/* =========================
   TYPOGRAPHIE
========================= */

.gcv3-program__number {
  flex: 0 0 auto;

  margin-top: 0;

  font-family: "Archivo Black", Arial, sans-serif;
  font-size: 3.15rem;
  line-height: 0.86;
  font-weight: 900;
  letter-spacing: -0.065em;
}

.gcv3-program .gcv3-program__panel--orange {
  &:not(.is-active):not(.unavailable) .gcv3-program__tab {
    background: var(--gcv3-orange);
    color: #000000;
  }
}

.gcv3-program .gcv3-program__panel--green {
  &:not(.is-active):not(.unavailable) .gcv3-program__tab {
    background: var(--gcv3-green);
    color: #000000;
  }
}

.gcv3-program .gcv3-program__panel.unavailable {
  .gcv3-program__number,
  .gcv3-program__text h3,
  .gcv3-program__text strong {
    color: grey;
  }

  /*.gcv3-program__cta{
        background-color:grey;
        pointer-events: none;
    }*/
  &.is-active .gcv3-program__tab {
    background-color: lightgrey;
  }
  &:hover .gcv3-program__tab {
    box-shadow: none;
  }
}

.gcv3-program__text {
  max-width: 430px;
  padding-top: 2px;
}

.gcv3-program__text h3 {
  margin: 0 0 12px;

  font-family: "Archivo Black", Arial, sans-serif;
  font-size: 1.32rem;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.gcv3-program__text p {
  max-width: 410px;
  margin: 0 0 13px;

  color: rgba(255, 255, 255, 0.92);

  font-size: 0.88rem;
  line-height: 1.42;
  font-weight: 500;
}

.gcv3-program__text strong {
  display: block;

  font-size: 0.58rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

/* Couleurs textes */
.gcv3-program__panel--green .gcv3-program__number,
.gcv3-program__panel--green .gcv3-program__text h3,
.gcv3-program__panel--green .gcv3-program__text strong {
  color: var(--gcv3-green);
}

.gcv3-program__panel--orange .gcv3-program__number,
.gcv3-program__panel--orange .gcv3-program__text h3,
.gcv3-program__panel--orange .gcv3-program__text strong {
  color: var(--gcv3-orange);
}

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

.gcv3-program__cta {
  position: absolute;
  left: 34px;
  bottom: 32px;
  z-index: 4;

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

  min-width: 204px;
  min-height: 35px;
  padding: 0 20px;

  overflow: hidden;
  isolation: isolate;

  background: var(--gcv3-green);
  color: #07111d;
  border: 1px solid rgba(255, 255, 255, 0.18);

  font-family: "Archivo", Arial, sans-serif;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;

  transition:
    transform 0.26s ease,
    filter 0.26s ease,
    box-shadow 0.26s ease;
}

.gcv3-program__cta--orange {
  background: var(--gcv3-orange);
  color: #ffffff;
}

.gcv3-program__panel.is-active .gcv3-program__cta {
  animation: gcv3ButtonIn 0.5s var(--gcv3-ease) 0.16s both;
  color: #07111d;
}

.gcv3-program__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;

  /* background: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 6px,
      rgba(255, 255, 255, 0.2) 7px,
      rgba(255, 255, 255, 0) 12px
    ); */

  transform: translateX(-18%);

  transition:
    opacity 0.22s ease,
    transform 0.5s var(--gcv3-ease);
}

.gcv3-program__cta::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -60%;
  z-index: -1;

  width: 45%;

  opacity: 0;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 100%
  );

  transform: skewX(-18deg);
}

.gcv3-program__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.08);
  box-shadow:
    0 0 16px rgba(61, 255, 160, 0.34),
    inset 0 0 12px rgba(255, 255, 255, 0.16);
}

.gcv3-program__cta:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.gcv3-program__cta:hover::after {
  animation: gcv3CtaShine 0.72s var(--gcv3-ease);
}

.gcv3-program__cta--orange:hover {
  box-shadow:
    0 0 16px rgba(255, 110, 49, 0.38),
    inset 0 0 12px rgba(255, 255, 255, 0.14);
  color: white;
}

.gcv3-program__cta:active {
  transform: translateY(0) scale(0.985);
}

/* =========================
   TAB VERTICAL
========================= */

.gcv3-program__tab {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;

  width: var(--gcv3-closed);
  height: 100%;

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

  padding: 0;
  margin: 0;

  border: 0;
  cursor: pointer;

  transition:
    filter 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease,
    background-color 0.28s ease;
}

.gcv3-program__tab span {
  display: block;

  font-family: "Archivo Black", Arial, sans-serif;
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  white-space: nowrap;

  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.gcv3-program__panel:not(.is-active) .gcv3-program__tab {
  width: 100%;
  filter: brightness(0.72) saturate(0.9);
  box-shadow: none;
}

.gcv3-program__panel.is-active .gcv3-program__cta {
  animation: gcv3ButtonIn 0.68s var(--gcv3-ease-page) 0.46s both;
}
.inactive {
  color: grey !important;
}
.inactive:hover .gcv3-program__tab {
  color: var(--gcv3-orange);
}

/* Couleurs tabs */
.gcv3-program__panel:not(.is-active) .gcv3-program__tab {
  background: grey;
  color: rgba(255, 255, 255, 0.42);
}

.gcv3-program__panel--green.is-active .gcv3-program__tab {
  background: var(--gcv3-green);
  color: #07111d;
}

.gcv3-program__panel--orange.is-active .gcv3-program__tab {
  background: var(--gcv3-orange);
  color: #ffffff;
}

/* Hover tabs */
.gcv3-program__panel:not(.is-active):hover .gcv3-program__tab {
  filter: brightness(1.08) saturate(1.12);
  box-shadow: 0 0 18px rgba(255, 110, 49, 0.34);
  transform: translateY(-1px);
}

.gcv3-program__panel.is-active:hover .gcv3-program__tab {
  filter: brightness(1.04) saturate(1.08);
  box-shadow: 0 0 22px rgba(61, 255, 160, 0.28);
}

/* =========================
   ANIMATIONS
========================= */

@keyframes gcv3ContentIn {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gcv3ButtonIn {
  from {
    opacity: 0;
    transform: translateY(1000px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gcv3CtaShine {
  0% {
    opacity: 0;
    left: -60%;
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    left: 120%;
  }
}

@keyframes gcv3PageSweep {
  0% {
    opacity: 0;
    transform: translateX(-52%) skewX(-10deg);
  }

  28% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translateX(36%) skewX(0deg);
  }
}

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

.gcv3-program__tab:focus-visible,
.gcv3-program__cta:focus-visible {
  outline: 2px solid rgba(61, 255, 160, 0.75);
  outline-offset: 3px;
}

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

@media (max-width: 1024px) {
  .gcv3-program {
    --gcv3-height: 330px;
    --gcv3-closed: 58px;

    width: min(100%, 940px);
  }

  .gcv3-program__content {
    padding: 30px calc(var(--gcv3-closed) + 26px) 30px 28px;
  }

  .gcv3-program__main {
    gap: 20px;
  }

  .gcv3-program__number {
    font-size: 2.7rem;
  }

  .gcv3-program__text h3 {
    font-size: 1.14rem;
  }

  .gcv3-program__text p {
    font-size: 0.78rem;
  }

  .gcv3-program__cta {
    left: 28px;
    bottom: 28px;
  }
}

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

@media (max-width: 767px) {
  .gcv3-program {
    --gcv3-closed: 54px;

    width: 100%;
    height: auto;

    flex-direction: column;
    gap: 8px;

    overflow: visible;
  }

  .gcv3-program__panel {
    width: 100%;
    min-width: 0;
    height: var(--gcv3-closed);
    flex: 0 0 var(--gcv3-closed);
  }

  .gcv3-program__panel.is-active {
    height: 310px;
    flex-basis: 310px;
  }

  .gcv3-program__content {
    padding: 26px 22px 82px;
  }

  .gcv3-program__main {
    gap: 12px;
  }

  .gcv3-program__number {
    font-size: 2rem;
  }

  .gcv3-program__text h3 {
    font-size: 1.05rem;
  }

  .gcv3-program__text p {
    max-width: 250px;
    font-size: 0.68rem;
    line-height: 1.38;
  }

  .gcv3-program__text strong {
    font-size: 0.5rem;
  }

  .gcv3-program__cta {
    left: 22px;
    bottom: 74px;

    min-width: 148px;
    min-height: 32px;

    font-size: 0.48rem;
  }

  .gcv3-program__tab {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: var(--gcv3-closed);
  }

  .gcv3-program__tab span {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
  }
}

/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {
  .gcv3-program__panel,
  .gcv3-program__bg,
  .gcv3-program__overlay,
  .gcv3-program__content,
  .gcv3-program__tab,
  .gcv3-program__cta {
    transition: none !important;
    animation: none !important;
  }

  .gcv3-program__cta::before,
  .gcv3-program__cta::after {
    display: none;
  }
}