/**
 * 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;
  }
}

@media (max-width: 767px) {
  .mds-quiz-app,
  .mds-quiz-app *,
  .mds-quiz-app *::before,
  .mds-quiz-app *::after {
    box-sizing: border-box;
  }

  .mds-quiz-app {
    width: 100%;
    padding: 0;
  }

  .mds-quiz-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .mds-quiz-screen {
    width: 100%;
    height: 100%;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 72px 20px max(32px, env(safe-area-inset-bottom));
  }

  .mds-quiz-identification,
  .mds-quiz-identification form,
  .mds-quiz-identification input,
  .mds-quiz-identification .mds-quiz-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .mds-quiz-identification input {
    font-size: 16px;
  }

  .mds-quiz-identification h2,
  .mds-quiz-description {
    overflow-wrap: anywhere;
  }
}

/* ==========================================================
   Carrousel métiers — affichage mobile
   ========================================================== */

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

  .wrapper-carousel-metiers {
    margin-top: 30px;
    padding-left: 20px;
  }

  /* Filtres sur une seule ligne défilable */
  .wrapper-filter-metiers-home {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    width: 100%;
    margin-bottom: 25px;
    padding-right: 20px;
    padding-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .wrapper-filter-metiers-home::-webkit-scrollbar {
    display: none;
  }

  .wrapper-filter-metiers-home .btn-filter {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 15px;
    border-color: rgba(25, 46, 76, .28);
    color: rgba(25, 46, 76, .72);
    font-size: 16px;
    line-height: 1.1;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .wrapper-filter-metiers-home .btn-filter.is-active {
    border-color: #192e4c;
    color: #192e4c;
  }

  /* Carte principale avec aperçu de la suivante */
  .carousel-cel-metier {
    width: 86%;
    padding-right: 8px;
    padding-left: 0;
  }

  .carousel-cel-metier .item-metier {
    border-radius: 20px;
  }

  .carousel-metiers {
    margin-bottom: 25px;
  }
}

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

  .carousel-cel-metier {
    width: 88%;
  }
}