/* ============================================================
   NAVIGATION 3D EN PROFONDEUR — EXPERIMENT (mode sombre)
   ------------------------------------------------------------
   S'active uniquement quand <html> porte .site-deck (posé par
   js/deck-3d.js, après l'animation du mode sombre).
   Tout est préfixé .site-deck -> 100% réversible : retirer la
   classe (ou le <link>/<script>) restaure le scroll normal.
   ============================================================ */

/* On verrouille le scroll natif : la navigation se fait carte par carte */
html.site-deck,
html.site-deck body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Le conteneur principal devient la "scène" 3D */
html.site-deck #contenu-principal {
  position: fixed;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 44%;
  transform-style: preserve-3d;
  overflow: visible;
  z-index: 1;
}

/* Le header (logo = sortie du mode sombre) reste au-dessus et cliquable.
   #contenu-principal passe en preserve-3d : le header (enfant) partage donc
   l'empilement des cartes (z-index jusqu'à 100). On le remonte largement
   au-dessus pour qu'il reste cliquable quelle que soit la carte active. */
html.site-deck .site-header {
  z-index: 1000;
}
html.site-deck .site-header,
html.site-deck .site-header a,
html.site-deck .site-header button {
  pointer-events: auto;
}

/* Champ d'étoiles traversé pendant le voyage (derrière les cartes) */
#site-deck-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
html.site-deck #site-deck-stars {
  opacity: 1;
}

/* Titres-jalons traversés pendant le voyage (placés en 3D par le JS) */
html.site-deck #contenu-principal .site-deck-title {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 6vw;
  pointer-events: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}
.site-deck-title__txt {
  font-family: var(--site-font-heading, "Oswald"), sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: #f5f0fb;
  text-shadow: 0 0 38px rgba(150, 120, 180, 0.55), 0 0 14px rgba(0, 0, 0, 0.35);
}

/* Éléments hors-cartes qui resteraient dans le flux : on les masque
   (sinon le footer remonte sous le header une fois les sections fixées) */
html.site-deck .site-hero-scroll-hint,
html.site-deck .site-footer-section {
  display: none !important;
}

/* Contenu resté en flux normal (footer…) masqué par le JS pendant la nav 3D */
html.site-deck .site-deck-hidden {
  display: none !important;
}

/* Chaque section sélectionnée devient un panneau plein écran empilé en Z */
html.site-deck .site-deck-card {
  position: fixed;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* "safe" : si le contenu dépasse l'écran, on s'aligne en haut au lieu de
     rogner le titre (sinon le haut de la carte serait coupé) */
  justify-content: safe center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  /* transform / opacity / filter posés en inline par le JS, chaque frame */
}

/* Pendant le voyage : plus de cadre rognant — la dispersion 3D dépasse la carte */
html.site-deck.site-deck-traveling .site-deck-card,
html.site-deck.site-deck-traveling .site-deck-card > .container,
html.site-deck.site-deck-traveling #portfolio,
html.site-deck.site-deck-traveling #portfolio .full-width,
html.site-deck.site-deck-traveling #services,
html.site-deck.site-deck-traveling #services .container,
html.site-deck.site-deck-traveling #methodologie,
html.site-deck.site-deck-traveling #methodologie .container,
html.site-deck.site-deck-traveling #contact,
html.site-deck.site-deck-traveling #contact .container,
html.site-deck.site-deck-traveling #contact .site-contact-columns,
html.site-deck.site-deck-traveling #contact .site-contact-columns > .col-md-5 {
  overflow: visible !important;
}

/* Scrollbar interne masquée pour un rendu net */
html.site-deck .site-deck-card {
  scrollbar-width: none;
}
html.site-deck .site-deck-card::-webkit-scrollbar {
  display: none;
}

/* Un peu d'air vertical pour les cartes au contenu dense */
html.site-deck .site-deck-card > .container {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 7vh;
  padding-bottom: 7vh;
}

/* ---------- Encarts éclatés dans l'espace puis reformés ----------
   preserve-3d sur les sections compatibles (pas le carrousel compétences :
   Owl + preserve-3d + transform sur .item = slideshow cassé). */
html.site-deck #services .container,
html.site-deck #portfolio .full-width,
html.site-deck #portfolio .owl-carousel,
html.site-deck #portfolio .owl-stage-outer,
html.site-deck #portfolio .owl-stage,
html.site-deck #methodologie .container,
html.site-deck #methodologie .site-metho-steps,
html.site-deck #contact .site-contact-columns,
html.site-deck #contact .site-contact-columns > .col-md-5 {
  transform-style: preserve-3d;
}
/* Champs d'action en mode deck : grille statique (3 fiches), pas de slideshow Owl */
html.site-deck #site-competences-carousel.site-deck-comp-static {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
html.site-deck #site-competences-carousel.site-deck-comp-static > .item {
  width: auto !important;
  min-width: 0;
  padding: 60px 56px 90px 56px;
}
html.site-deck #site-competences-carousel.site-deck-comp-static > .item .numb {
  right: 56px;
}
html.site-deck #site-competences-carousel.site-deck-comp-static > .item > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
/* overflow visible sur les carrousels / grilles pendant le voyage */
html.site-deck.site-deck-traveling #portfolio .owl-stage-outer,
html.site-deck.site-deck-traveling #methodologie .site-metho-steps {
  overflow: visible !important;
}
/* Portfolio : slides inactives masquées au repos en mode deck */
html.site-deck #portfolio .owl-item.cloned,
html.site-deck #portfolio .owl-item:not(.active) {
  visibility: hidden !important;
  pointer-events: none;
}
html.site-deck .site-deck-scatter {
  will-change: transform, opacity;
  backface-visibility: hidden;
}
html.site-deck #portfolio .site-deck-scatter,
html.site-deck #methodologie .site-deck-scatter,
html.site-deck #contact .site-deck-scatter {
  transform-style: preserve-3d;
}

/* ---------- Indicateur de navigation (points + libellés) ---------- */
#site-deck-nav {
  position: fixed;
  top: 30px;
  right: 40px;
  z-index: 70;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  pointer-events: none;
}
html.site-deck #site-deck-nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-deck-dot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 4px 2px;
  -webkit-appearance: none;
  appearance: none;
}
.site-deck-dot__mark {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(242, 243, 246, 0.4);
  background: transparent;
  transition: transform 0.35s ease, background-color 0.35s ease,
    border-color 0.35s ease;
}
/* libellé flottant SOUS la puce : n'élargit pas la rangée de puces */
.site-deck-dot__label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  color: rgba(242, 243, 246, 0.85);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.site-deck-dot:hover .site-deck-dot__mark {
  border-color: rgba(242, 243, 246, 0.8);
  transform: scale(1.2);
}
.site-deck-dot:hover .site-deck-dot__label {
  opacity: 0.75;
  transform: translateX(-50%) translateY(0);
}
.site-deck-dot.is-active .site-deck-dot__mark {
  background: rgba(242, 243, 246, 0.95);
  border-color: rgba(242, 243, 246, 0.95);
  transform: scale(1.35);
}
.site-deck-dot.is-active .site-deck-dot__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Indice de défilement (bas, disparait après usage) ---------- */
#site-deck-hint {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(242, 243, 246, 0.6);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  pointer-events: none;
}
html.site-deck #site-deck-hint {
  opacity: 1;
  visibility: visible;
}
html.site-deck.site-deck-moved #site-deck-hint {
  opacity: 0;
  visibility: hidden;
}
#site-deck-hint .site-deck-hint__wheel {
  width: 18px;
  height: 28px;
  border: 1.5px solid rgba(242, 243, 246, 0.5);
  border-radius: 10px;
  position: relative;
}
#site-deck-hint .site-deck-hint__wheel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: rgba(242, 243, 246, 0.7);
  transform: translateX(-50%);
  animation: site-deck-wheel 1.6s ease-in-out infinite;
}
@keyframes site-deck-wheel {
  0% { opacity: 0; transform: translate(-50%, -3px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 8px); }
}

/* Accessibilité : pas de profondeur animée si l'utilisateur réduit les animations.
   (Le JS n'enclenche déjà pas le mode dans ce cas — ceinture + bretelles.) */
@media (prefers-reduced-motion: reduce) {
  html.site-deck,
  html.site-deck body {
    overflow: auto;
    height: auto;
  }
  html.site-deck #contenu-principal {
    position: static;
    perspective: none;
  }
  html.site-deck .site-deck-card {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  #site-deck-nav,
  #site-deck-hint {
    display: none;
  }
}
