/**
 * Les Métiers du Spatial — Styles personnalisés globaux
 *
 * Ce fichier est chargé sur toutes les pages publiques par le MU-plugin
 * les-metiers-du-spatial-custom.php.
 */

/* ------------------------------------------------------------
   Cartes métiers — animation de l'image au survol
   ------------------------------------------------------------ */

/* Animation des cartes formations */
.item-formation {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.item-formation .background-item {
  background-position: center;
  background-size: cover;
  transform: scale(1);
  transform-origin: center center;
  transition:
    transform 700ms cubic-bezier(.22, 1, .36, 1),
    filter 550ms ease;
  will-change: transform, filter;
  backface-visibility: hidden;
}

.item-formation .gradient-overlay-metiers {
  pointer-events: none;
  transition:
    background-color 500ms ease,
    box-shadow 500ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .item-formation:hover .background-item,
  .item-formation:focus-within .background-item {
    transform: scale(1.12);
    filter: brightness(.76) blur(1px);
  }

  .item-formation:hover .gradient-overlay-metiers,
  .item-formation:focus-within .gradient-overlay-metiers {
    background-color: rgba(5, 16, 32, .18);
    box-shadow: inset 0 0 0 100vmax rgba(5, 16, 32, .15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .item-formation .background-item,
  .item-formation .gradient-overlay-metiers {
    transition: none;
  }
}

/* ------------------------------------------------------------
   Navigation principale — propagation orange + point actif
   ------------------------------------------------------------ */
/* Variante du header avec liens blancs */
.navbar.navbar-white .nav-link,
.navbar-white .nav-link {
  --nav-color: #ffffff;
}

.navbar .nav-link,
.nav-link-mobile {
  --nav-color: #192e4c;
  --nav-accent: #ff2e1f;

  position: relative;
  display: inline-block;

  background-image: linear-gradient(
    90deg,
    var(--nav-accent) 0%,
    var(--nav-accent) 50%,
    var(--nav-color) 50%,
    var(--nav-color) 100%
  );
  background-position: 100% 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;

  color: transparent !important;
  -webkit-text-fill-color: transparent;

  transition:
    background-position 600ms cubic-bezier(.22, 1, .36, 1),
    transform 300ms ease;
}

/* Petit point sous le lien */
.navbar .nav-link::after,
.nav-link-mobile::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;

  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--nav-accent);

  opacity: 0;
  transform: translate(-50%, 7px) scale(0);
  transition:
    opacity 300ms ease,
    transform 500ms cubic-bezier(.22, 1, .36, 1);
}

/* Animation au survol et au clavier */
@media (hover: hover) and (pointer: fine) {
  .navbar .nav-link:hover,
  .navbar .nav-link:focus-visible,
  .nav-link-mobile:hover,
  .nav-link-mobile:focus-visible {
    background-position: 0 0;
  }

  .navbar .nav-link:hover::after,
  .navbar .nav-link:focus-visible::after,
  .nav-link-mobile:hover::after,
  .nav-link-mobile:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* Conservation de la couleur et du point sur la page active */
.navbar .nav-link.w--current,
.navbar .nav-link[aria-current="page"],
.nav-link-mobile.w--current,
.nav-link-mobile[aria-current="page"] {
  background-position: 0 0;
}

.navbar .nav-link.w--current::after,
.navbar .nav-link[aria-current="page"]::after,
.nav-link-mobile.w--current::after,
.nav-link-mobile[aria-current="page"]::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Le menu mobile semble utiliser un fond foncé */
.nav-link-mobile {
  --nav-color: #ffffff;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .navbar .nav-link,
  .nav-link-mobile,
  .navbar .nav-link::after,
  .nav-link-mobile::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .navbar .nav-link,
  .nav-link-mobile {
    color: LinkText !important;
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

.wrapper-grid-formations > .item-formation.is-hidden-by-toggle,
.wrapper-grid-formations > .item-formation[hidden] {
  display: none !important;
}

.formations-toggle-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 40px;
}

.formations-toggle-button {
  cursor: pointer;
}

.item-formation.is-revealing {
  animation: formation-card-reveal 550ms
    cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--formations-delay, 0ms);
}

@keyframes formation-card-reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.985);
  }

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

@media (prefers-reduced-motion: reduce) {
  .item-formation.is-revealing {
    animation: none;
  }
}

.navbar.navbar-white .trp-shortcode-switcher, footer .trp-shortcode-switcher {
  border-color: #ffffff !important;
}

.trp-shortcode-switcher {
  padding: 4px 0 !important;
}

.navbar.navbar-white .trp-language-item-name, footer .trp-language-item-name {
  color: #ffffff !important;
}

.navbar.navbar-white .trp-shortcode-switcher path, footer .trp-shortcode-switcher path {
  stroke: #ffffff !important;
}

.trp-language-item:hover .trp-language-item-name {
  color: #ff2e1f !important;
}

.section.section-home {
  background-position: 0% 80%;
}

@media screen and (min-width:1440px) {
  .content-home{
    width: 70%;
  }
}


/* Partenaires — léger resserrement des coins */
.item-partenaire .border-tl,
.item-partenaire .border-tr,
.item-partenaire .border-bl,
.item-partenaire .border-br {
  pointer-events: none;
  transition: translate 450ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .item-partenaire:hover .border-tl {
    translate: 4px 4px;
  }

  .item-partenaire:hover .border-tr {
    translate: -4px 4px;
  }

  .item-partenaire:hover .border-bl {
    translate: 4px -4px;
  }

  .item-partenaire:hover .border-br {
    translate: -4px -4px;
  }
}

/* Même effet lors de la navigation au clavier */
.item-partenaire:focus-visible .border-tl {
  translate: 4px 4px;
}

.item-partenaire:focus-visible .border-tr {
  translate: -4px 4px;
}

.item-partenaire:focus-visible .border-bl {
  translate: 4px -4px;
}

.item-partenaire:focus-visible .border-br {
  translate: -4px -4px;
}

@media (prefers-reduced-motion: reduce) {
  .item-partenaire .border-tl,
  .item-partenaire .border-tr,
  .item-partenaire .border-bl,
  .item-partenaire .border-br {
    transition: none;
  }
}